@font-face{font-family:"Space Grotesk";src:url(../fonts/space-grotesk-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url(../fonts/space-grotesk-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Manrope";src:url(../fonts/manrope-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Manrope";src:url(../fonts/manrope-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Manrope";src:url(../fonts/manrope-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Manrope";src:url(../fonts/manrope-latin-800-normal.woff2) format("woff2");font-weight:800;font-display:swap}

/* Home Swift Services: crisp white and cool gray, electric blue, tangerine motion accents */
:root{
  --bg:#f4f6fb; --surface:#ffffff; --tint:#e8eefe;
  --ink:#0f1630; --ink-soft:#4e5672;
  --accent:#2f5bea; --accent-deep:#1f44c4; --accent-soft:#e3eafd; --on-accent:#fff;
  --orange:#ff7a29; --orange-soft:#ffe9db;
  --link:#2049cf; --ok:#14866d; --ok-soft:#dcf3ec; --bad:#c9302c; --bad-soft:#fbe2e1;
  --line:#dde2ee; --field:#a3abc2;
  --head:"Space Grotesk",system-ui,sans-serif; --head-w:700; --head-track:-.03em;
  --sans:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --wrap:1180px; --r-sm:10px; --r-md:18px; --r-btn:12px;
}
.eyebrow{font:700 .78rem var(--head);letter-spacing:.1em;text-transform:uppercase;color:var(--orange);margin-bottom:.8em}
.tag{display:inline-block;font:700 .78rem var(--head);color:#fff;background:var(--orange);padding:.35em .85em;border-radius:999px;margin-bottom:14px}
.section-h{margin-bottom:26px}

.masthead{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30}
.brand-text{font:700 1.3rem var(--head);letter-spacing:-.03em}
.brand-text b{color:var(--accent)}
.brand-text span{font-weight:500;color:var(--ink-soft)}
.nav a{color:var(--ink);border-radius:10px}
.nav a:hover{background:var(--accent-soft)}
.nav a[aria-current]{color:var(--accent-deep);background:var(--accent-soft)}
.nav .nav-login{border:2px solid var(--line);padding:.38em 1em}
.nav .nav-login:hover{border-color:var(--ink)}
.nav .nav-btn{background:var(--accent);color:#fff;padding:.45em 1.05em}
.nav .nav-btn:hover,.nav .nav-btn[aria-current]{background:var(--accent-deep);color:#fff}
.menu summary{color:var(--ink)}
.group-tabs{top:75px}

.hero{padding:64px 0 76px;background:radial-gradient(1000px 400px at 90% 0,var(--tint),transparent 60%)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:64px;align-items:center}
.hero h1{font-size:clamp(2.4rem,5.4vw,4rem);max-width:12ch;line-height:1}
.hero .lede{max-width:50ch}
.count-card{background:var(--surface);border-radius:var(--r-md);padding:26px;box-shadow:0 30px 60px -30px rgba(15,22,48,.45);display:flex;flex-direction:column;gap:14px;border:1px solid var(--line);position:relative;overflow:hidden}
.count-card::after{content:"";position:absolute;right:-30px;top:-30px;width:110px;height:110px;border-radius:50%;background:var(--orange-soft)}
.count-card>*{position:relative;z-index:1}
.cc-k{font:700 .78rem var(--head);letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin:0}
.count-card h2{margin:0;font-size:1.7rem}
.cc-phases{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.cc-phases li{font-size:.78rem;font-weight:700;color:var(--ink-soft);background:var(--bg);border-radius:8px;padding:6px 8px;border-left:3px solid var(--accent)}
.cc-phases li:last-child{border-left-color:var(--orange)}

.stages{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:st}
.stage{background:var(--surface);border-radius:var(--r-md);padding:24px 22px 14px;border:1px solid var(--line)}
.stage-n{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--ink);color:#fff;font:700 1rem var(--head);margin-bottom:12px}
.stage:nth-child(2) .stage-n{background:var(--accent)}
.stage:nth-child(3) .stage-n{background:var(--orange)}
.stage:nth-child(4) .stage-n{background:var(--ok)}
.stage ul{list-style:none;margin:12px 0 0;padding:0}
.stage li{padding:.5em 0;border-top:1px solid var(--line)}
.stage a{text-decoration:none;color:var(--ink);font-weight:700}
.stage a:hover{color:var(--accent)}
.section-tint{background:var(--tint)}
.warn-row{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:center}
.flag-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.flag-list li{background:var(--surface);border-radius:var(--r-sm);padding:14px 16px 14px 48px;position:relative;font-weight:600}
.flag-list li::before{content:"!";position:absolute;left:14px;top:12px;width:24px;height:24px;border-radius:50%;background:var(--bad);color:#fff;display:grid;place-items:center;font:700 .9rem var(--head)}
.free-row{display:grid;grid-template-columns:300px 1fr;gap:64px;align-items:center}
.product-band{background:var(--ink);color:#c9cee0;padding:76px 0;position:relative;overflow:hidden}
.product-band::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:linear-gradient(90deg,var(--accent),var(--orange))}
.product-band h2{color:#fff}
.product-band .lede{color:#bfc5da}
.product-band .price-line strong{color:var(--orange);font-size:1.4rem}
.product-teaser{display:grid;grid-template-columns:1.25fr 1fr;gap:56px;align-items:center}
.band-signup{background:var(--orange-soft)}

.page-head{background:var(--surface);border-bottom:1px solid var(--line)}
.hub-group{display:grid;grid-template-columns:260px 1fr;gap:40px;padding:34px 0;border-top:1px solid var(--line)}
.hub-group:first-child{border-top:0;padding-top:0}
.hub-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px 32px}
.hub-list li{padding:.8em 0;border-bottom:1px solid var(--line)}
.hub-list a{font:700 1.1rem var(--head);letter-spacing:-.02em}
.hub-list p{margin:.25em 0 0;color:var(--ink-soft);font-size:.96rem}
.hub-list .meta,.meta-line{font-size:.85rem;font-weight:700;color:var(--accent)}
.guide-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:56px;padding-top:44px;padding-bottom:64px}
.guide-body{max-width:70ch}
.guide-body h2{margin-top:1.3em;font-size:1.55rem}
.intro{font-size:1.15rem;line-height:1.6}
.steps-num{list-style:none;counter-reset:s;margin:0;padding:0}
.steps-num li{counter-increment:s;position:relative;padding:4px 0 14px 48px;border-bottom:1px solid var(--line);margin-bottom:6px}
.steps-num li::before{content:counter(s);position:absolute;left:0;top:0;width:32px;height:32px;border-radius:10px;background:var(--accent);color:#fff;display:grid;place-items:center;font:700 1rem var(--head)}
.flag-box{background:var(--bad-soft);border-radius:var(--r-md);padding:20px 24px;margin:2em 0;border:1px solid #f1c2c0}
.flag-box h2{font-size:1.25rem;margin:0 0 .5em;color:var(--bad)}
.flag-box ul{margin:0;padding-left:1.2em}
.guide-side{display:flex;flex-direction:column;gap:20px}
.guide-side .flag-box{margin:0}
.side-kit{background:var(--accent-soft);border-color:#c9d6fb}
.check-steps{list-style:none;counter-reset:c;margin:0;padding:0}
.check-steps li{counter-increment:c;position:relative;padding:0 0 22px 64px;margin-bottom:22px;border-bottom:1px solid var(--line)}
.check-steps li::before{content:counter(c);position:absolute;left:0;top:0;width:44px;height:44px;border-radius:14px;background:var(--ink);color:#fff;display:grid;place-items:center;font:700 1.2rem var(--head)}
.check-steps h2{font-size:1.35rem;margin:6px 0 .4em}

.countdown-head{display:grid;grid-template-columns:1fr 380px;gap:48px;align-items:center}
.cd-days{margin:0;font-size:1.05rem}
.cd-days b{font:700 1.8rem var(--head);color:var(--accent)}
.phase-list{list-style:none;margin:0 0 20px;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.phase{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:22px}
.phase-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.phase-h h2{font-size:1.3rem;margin:0}
.phase-dot{width:12px;height:12px;border-radius:50%;background:var(--line)}
.phase-now{display:none;font:700 .72rem var(--head);text-transform:uppercase;letter-spacing:.08em;color:#fff;background:var(--orange);padding:.25em .6em;border-radius:999px}
.phase.is-now{border:2px solid var(--orange);box-shadow:0 18px 36px -24px rgba(255,122,41,.7)}
.phase.is-now .phase-dot{background:var(--orange)}
.phase.is-now .phase-now{display:inline-block}

.club-hero{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:center}
.plan-tl{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:22px 24px;box-shadow:0 26px 50px -30px rgba(15,22,48,.5)}
.tl-h{font:700 1.1rem var(--head);margin:0 0 14px;display:flex;flex-direction:column}
.tl-h span{font:600 .88rem var(--sans);color:var(--ink-soft)}
.plan-tl ol{list-style:none;margin:0;padding:0 0 0 18px;border-left:3px solid var(--accent-soft)}
.plan-tl li{position:relative;padding:0 0 14px 14px;font-size:.95rem}
.plan-tl li::before{content:"";position:absolute;left:-26px;top:4px;width:13px;height:13px;border-radius:50%;background:#fff;border:3px solid var(--accent)}
.plan-tl li.now::before{background:var(--orange);border-color:var(--orange)}
.plan-tl time{display:block;font:700 .82rem var(--head);color:var(--accent)}
.plan-tl li.now time{color:var(--orange)}
.plan-tl figcaption{font-size:.82rem;color:var(--ink-soft)}
.features{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.features p{margin:0;color:var(--ink-soft)}
.club-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:56px}

.footer{background:var(--ink);color:#bfc5da}
.footer a{color:#fff}
.footer-brand{font:700 1.35rem var(--head);color:#fff;letter-spacing:-.03em}
.footer-h{color:var(--orange)}
.footer-base{border-top:1px solid rgba(255,255,255,.14);color:#8f97b3}

@media (max-width:960px){
  .hero-grid,.product-teaser,.club-hero,.guide-grid,.hub-group,.free-row,.warn-row,.club-grid,.countdown-head{grid-template-columns:1fr}
  .stages,.phase-list{grid-template-columns:1fr 1fr}
  .hub-list{grid-template-columns:1fr}
  .features{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .hero{padding:36px 0 50px}
  .stages,.phase-list,.features{grid-template-columns:1fr}
  .cc-phases{grid-template-columns:1fr 1fr}
  .brand-text{font-size:1.1rem}
  .brand-mark{width:34px;height:34px}
  .group-tabs{top:66px}
}
