/* Hub V415 — Unified Premium Header + Tight Flow Cards
   Goal: make the header feel like one premium system and tighten the Fix/Tune/Save/Build cards.
*/

:root{
  --hub415-bg-1:#050d18;
  --hub415-bg-2:#081528;
  --hub415-line:rgba(96,165,250,.34);
  --hub415-line-strong:rgba(125,211,252,.62);
  --hub415-text:#eaf3ff;
  --hub415-muted:#b6c8e2;
  --hub415-blue:#2563eb;
  --hub415-cyan:#4adeff;
  --hub415-shadow:0 18px 52px rgba(2,8,23,.28);
}

/* === Unified global header === */
.hub405-global-header,
.hub408-header,
.hub409-header-shell{
  display:none !important;
}

.hub415-header{
  max-width:1180px !important;
  margin:18px auto 20px !important;
  padding:0 10px !important;
}

.hub415-header-inner{
  position:relative !important;
  overflow:hidden !important;
  padding:18px !important;
  border-radius:30px !important;
  border:1px solid var(--hub415-line) !important;
  background:
    radial-gradient(circle at 12% 8%,rgba(37,99,235,.20),transparent 34%),
    radial-gradient(circle at 88% 0%,rgba(74,222,255,.13),transparent 28%),
    linear-gradient(135deg,#07111f 0%,#08182f 55%,#05101b 100%) !important;
  box-shadow:var(--hub415-shadow), inset 0 1px 0 rgba(255,255,255,.06) !important;
}

.hub415-header-inner::before{
  content:"";
  position:absolute;
  inset:10px;
  border-radius:24px;
  border:1px solid rgba(96,165,250,.12);
  pointer-events:none;
}

.hub415-top-row{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:16px !important;
  margin-bottom:14px !important;
}

.hub415-brand{
  display:flex !important;
  align-items:center !important;
  min-width:0 !important;
  flex:1 1 auto !important;
  padding:10px 14px !important;
  border-radius:22px !important;
  border:1px solid rgba(74,222,255,.18) !important;
  background:linear-gradient(135deg,rgba(7,18,31,.88),rgba(8,23,43,.96)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 12px 30px rgba(2,8,23,.24) !important;
  text-decoration:none !important;
}

.hub415-brand img{
  display:block !important;
  width:min(100%,560px) !important;
  height:auto !important;
  object-fit:contain !important;
}

.hub415-visit{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:190px !important;
  min-height:56px !important;
  padding:0 20px !important;
  border-radius:18px !important;
  text-decoration:none !important;
  font-weight:950 !important;
  color:#ffffff !important;
  background:linear-gradient(135deg,#1f8ef6,#2962ff) !important;
  box-shadow:0 14px 32px rgba(37,99,235,.28), inset 0 1px 0 rgba(255,255,255,.18) !important;
  white-space:nowrap !important;
}

.hub415-utility-row{
  display:block !important;
  margin-bottom:14px !important;
}

.hub415-search{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  padding:10px !important;
  border-radius:22px !important;
  border:1px solid rgba(96,165,250,.18) !important;
  background:linear-gradient(135deg,rgba(5,16,28,.88),rgba(8,21,40,.96)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04) !important;
}

.hub415-search input{
  flex:1 1 auto !important;
  min-width:0 !important;
  min-height:52px !important;
  padding:0 18px !important;
  border-radius:16px !important;
  border:1px solid rgba(125,211,252,.16) !important;
  background:rgba(255,255,255,.02) !important;
  color:var(--hub415-text) !important;
  font-size:1rem !important;
  outline:none !important;
}

.hub415-search input::placeholder{
  color:#8ea4c4 !important;
}

.hub415-search button{
  min-width:120px !important;
  min-height:52px !important;
  padding:0 18px !important;
  border-radius:16px !important;
  border:1px solid rgba(74,222,255,.28) !important;
  background:linear-gradient(135deg,#153d7a,#2151cf) !important;
  color:#ffffff !important;
  font-weight:900 !important;
  cursor:pointer !important;
}

.hub415-nav{
  display:grid !important;
  grid-template-columns:repeat(6,minmax(0,1fr)) !important;
  gap:10px !important;
}

.hub415-nav a{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:48px !important;
  padding:10px 12px !important;
  border-radius:16px !important;
  text-decoration:none !important;
  color:#e5efff !important;
  font-weight:850 !important;
  background:linear-gradient(135deg,rgba(10,25,46,.9),rgba(8,18,34,.95)) !important;
  border:1px solid rgba(96,165,250,.16) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03) !important;
  white-space:nowrap !important;
}

/* === Tight premium flow deck === */
.hub415-storefront-bridge{
  margin-top:18px !important;
}

.hub415-flow-deck{
  border-radius:28px !important;
  border:1px solid rgba(96,165,250,.22) !important;
  background:
    radial-gradient(circle at 14% 8%,rgba(37,99,235,.15),transparent 32%),
    linear-gradient(135deg,#07111f 0%,#08182e 55%,#050e1c 100%) !important;
  box-shadow:var(--hub415-shadow) !important;
  padding:18px !important;
  overflow:hidden !important;
}

.hub415-flow-intro{
  padding:6px 4px 14px !important;
}

.hub415-flow-intro h2{
  margin:8px 0 8px !important;
  color:#ffffff !important;
  font-size:clamp(1.45rem,2.8vw,2.2rem) !important;
  line-height:1.08 !important;
  letter-spacing:-.035em !important;
}

.hub415-flow-intro p{
  margin:0 !important;
  color:var(--hub415-muted) !important;
  max-width:68ch !important;
}

.hub415-flow-actions{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:10px !important;
  margin-top:14px !important;
}

.hub415-flow-grid{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:14px !important;
  margin-top:8px !important;
}

.hub415-flow-card{
  position:relative !important;
  display:grid !important;
  grid-template-columns:78px minmax(0,1fr) 56px !important;
  align-items:center !important;
  gap:14px !important;
  min-height:128px !important;
  padding:16px !important;
  overflow:hidden !important;
  border-radius:24px !important;
  text-decoration:none !important;
  background:
    linear-gradient(135deg,rgba(255,255,255,.04),rgba(255,255,255,.02)) padding-box,
    linear-gradient(135deg,rgba(74,222,255,.28),rgba(37,99,235,.20),rgba(255,255,255,.08)) border-box !important;
  border:1px solid transparent !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 14px 34px rgba(2,8,23,.22) !important;
}

.hub415-flow-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 12% 50%,rgba(74,222,255,.10),transparent 32%),
    radial-gradient(circle at 88% 18%,rgba(37,99,235,.12),transparent 26%),
    linear-gradient(135deg,#08172a,#06111f 72%);
  z-index:-1;
}

.hub415-flow-card i{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:62px !important;
  height:62px !important;
  border-radius:999px !important;
  background:linear-gradient(135deg,#1d8cf8,#2e63ff) !important;
  color:#ffffff !important;
  font-style:normal !important;
  font-size:1.12rem !important;
  font-weight:950 !important;
  box-shadow:0 14px 30px rgba(37,99,235,.24) !important;
}

.hub415-flow-copy{
  min-width:0 !important;
}

.hub415-flow-copy b{
  display:block !important;
  margin:0 0 6px !important;
  color:#ffffff !important;
  font-size:1.8rem !important;
  line-height:1 !important;
  letter-spacing:-.04em !important;
}

.hub415-flow-copy span{
  display:block !important;
  color:#d7e6fb !important;
  font-size:1rem !important;
  line-height:1.42 !important;
}

.hub415-flow-copy em{
  display:inline-flex !important;
  margin-top:10px !important;
  color:#67e8f9 !important;
  font-style:normal !important;
  font-weight:950 !important;
}

.hub415-flow-card strong{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:52px !important;
  height:52px !important;
  border-radius:18px !important;
  color:#c8deff !important;
  font-size:1.5rem !important;
  font-weight:800 !important;
  background:rgba(255,255,255,.04) !important;
  border:1px solid rgba(125,211,252,.16) !important;
}

.hub415-flow-card:hover{
  transform:translateY(-2px) !important;
}

/* Section-specific accents */
.hub415-flow-card.fix::before{
  background:
    radial-gradient(circle at 12% 50%,rgba(74,222,255,.14),transparent 34%),
    radial-gradient(circle at 88% 18%,rgba(37,99,235,.12),transparent 28%),
    linear-gradient(135deg,#08182b,#06111f 72%);
}
.hub415-flow-card.tune::before{
  background:
    radial-gradient(circle at 12% 50%,rgba(96,165,250,.12),transparent 34%),
    radial-gradient(circle at 88% 18%,rgba(14,165,233,.10),transparent 28%),
    linear-gradient(135deg,#0a1b32,#07111f 72%);
}
.hub415-flow-card.save::before{
  background:
    radial-gradient(circle at 12% 50%,rgba(125,211,252,.10),transparent 34%),
    radial-gradient(circle at 88% 18%,rgba(59,130,246,.11),transparent 28%),
    linear-gradient(135deg,#09182c,#06111f 72%);
}
.hub415-flow-card.build::before{
  background:
    radial-gradient(circle at 12% 50%,rgba(74,222,255,.10),transparent 34%),
    radial-gradient(circle at 88% 18%,rgba(139,92,246,.11),transparent 28%),
    linear-gradient(135deg,#09182b,#07111f 72%);
}

/* Mobile */
@media (max-width: 860px){
  .hub415-top-row{
    flex-direction:column !important;
    align-items:stretch !important;
  }
  .hub415-visit{
    min-width:0 !important;
    width:100% !important;
  }
  .hub415-nav{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
  .hub415-flow-grid{
    grid-template-columns:1fr !important;
  }
}

@media (max-width: 560px){
  .hub415-header{
    margin:10px auto 16px !important;
    padding:0 !important;
  }
  .hub415-header-inner{
    border-radius:24px !important;
    padding:14px !important;
  }
  .hub415-brand{
    padding:10px !important;
    border-radius:18px !important;
  }
  .hub415-search{
    gap:8px !important;
    padding:8px !important;
    border-radius:18px !important;
  }
  .hub415-search input{
    min-height:46px !important;
    padding:0 14px !important;
    border-radius:14px !important;
  }
  .hub415-search button{
    min-width:86px !important;
    min-height:46px !important;
    border-radius:14px !important;
    font-size:.95rem !important;
  }
  .hub415-nav{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important;
  }
  .hub415-nav a{
    min-height:44px !important;
    border-radius:14px !important;
    font-size:.96rem !important;
  }
  .hub415-flow-deck{
    border-radius:22px !important;
    padding:14px !important;
  }
  .hub415-flow-intro{
    padding:2px 2px 10px !important;
  }
  .hub415-flow-intro h2{
    font-size:1.35rem !important;
  }
  .hub415-flow-card{
    grid-template-columns:56px minmax(0,1fr) 42px !important;
    min-height:104px !important;
    padding:14px !important;
    gap:12px !important;
    border-radius:20px !important;
  }
  .hub415-flow-card i{
    width:44px !important;
    height:44px !important;
    font-size:.95rem !important;
  }
  .hub415-flow-copy b{
    font-size:1.35rem !important;
  }
  .hub415-flow-copy span{
    font-size:.94rem !important;
  }
  .hub415-flow-copy em{
    margin-top:8px !important;
    font-size:.88rem !important;
  }
  .hub415-flow-card strong{
    width:36px !important;
    height:36px !important;
    border-radius:12px !important;
    font-size:1rem !important;
  }
}