/* ============================================================
   Havn v2 - Nordic wayfinding
   Cobalt as the single locked accent, true cool neutrals,
   red reserved for lease warnings. Outfit + JetBrains Mono.
   ============================================================ */

:root{
  /* light: cool daylight, not cream */
  --bg:#FBFBFD;
  --bg-2:#F1F2F7;
  --surface:#FFFFFF;
  --surface-2:#F6F7FB;
  --ink:#15161D;
  --ink-2:#4C4F5E;
  --ink-3:#6E7284;
  --line:#E4E5EE;
  --line-2:#D5D7E3;

  --cobalt:#2B44C7;        /* locked accent */
  --cobalt-deep:#1E31A0;
  --cobalt-bright:#3A57E8;
  --cobalt-soft:#E8EBFB;
  --cobalt-ink:#243AAE;

  --danger:#CE3A2C;        /* lease red flags only */
  --danger-soft:#FBE7E3;
  --caution:#9A6512;       /* lease cautions only */
  --caution-soft:#F7EDD8;

  --r-sm:10px; --r-md:14px; --r-lg:20px;

  --shadow-sm:0 1px 2px rgba(21,22,29,.05), 0 3px 10px rgba(21,22,29,.05);
  --shadow-md:0 8px 30px rgba(30,49,160,.10), 0 2px 8px rgba(21,22,29,.06);
  --shadow-lg:0 26px 70px rgba(30,49,160,.16), 0 8px 22px rgba(21,22,29,.08);

  --font:'Outfit',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
  --nav-h:64px;
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#101118;
    --bg-2:#16171F;
    --surface:#1A1B24;
    --surface-2:#141520;
    --ink:#ECEDF3;
    --ink-2:#AEB1C0;
    --ink-3:#797D8F;
    --line:#262838;
    --line-2:#31344A;

    --cobalt:#6E82FF;
    --cobalt-deep:#4E63E8;
    --cobalt-bright:#8797FF;
    --cobalt-soft:#1C2140;
    --cobalt-ink:#9AA6FF;

    --danger:#EC8377;
    --danger-soft:#2C1B18;
    --caution:#D6A75E;
    --caution-soft:#2A2214;

    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --shadow-md:0 10px 34px rgba(0,0,0,.45);
    --shadow-lg:0 28px 72px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --bg:#101118; --bg-2:#16171F; --surface:#1A1B24; --surface-2:#141520;
  --ink:#ECEDF3; --ink-2:#AEB1C0; --ink-3:#797D8F; --line:#262838; --line-2:#31344A;
  --cobalt:#6E82FF; --cobalt-deep:#4E63E8; --cobalt-bright:#8797FF; --cobalt-soft:#1C2140; --cobalt-ink:#9AA6FF;
  --danger:#EC8377; --danger-soft:#2C1B18; --caution:#D6A75E; --caution-soft:#2A2214;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 10px 34px rgba(0,0,0,.45);
  --shadow-lg:0 28px 72px rgba(0,0,0,.6);
}
:root[data-theme="light"]{
  --bg:#FBFBFD; --bg-2:#F1F2F7; --surface:#FFFFFF; --surface-2:#F6F7FB;
  --ink:#15161D; --ink-2:#4C4F5E; --ink-3:#6E7284; --line:#E4E5EE; --line-2:#D5D7E3;
  --cobalt:#2B44C7; --cobalt-deep:#1E31A0; --cobalt-bright:#3A57E8; --cobalt-soft:#E8EBFB; --cobalt-ink:#243AAE;
  --danger:#CE3A2C; --danger-soft:#FBE7E3; --caution:#9A6512; --caution-soft:#F7EDD8;
  --shadow-sm:0 1px 2px rgba(21,22,29,.05), 0 3px 10px rgba(21,22,29,.05);
  --shadow-md:0 8px 30px rgba(30,49,160,.10), 0 2px 8px rgba(21,22,29,.06);
  --shadow-lg:0 26px 70px rgba(30,49,160,.16), 0 8px 22px rgba(21,22,29,.08);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 14px)}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }

body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden;
}
h1,h2,h3{margin:0; font-weight:700; letter-spacing:-.025em; text-wrap:balance}
p{margin:0}
a{color:inherit; text-decoration:none}
button{font-family:inherit}
svg{display:block}
.mono{font-family:var(--mono)}

.skip{position:absolute; left:-999px; top:8px; background:var(--cobalt); color:#fff; padding:10px 16px; border-radius:8px; z-index:200}
.skip:focus{left:12px}
:focus-visible{outline:2.5px solid var(--cobalt-bright); outline-offset:3px; border-radius:6px}

.reveal{will-change:transform}
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .reveal{animation:reveal linear both; animation-timeline:view(); animation-range:entry 4% cover 22%}
    @keyframes reveal{from{opacity:0; transform:translateY(22px)} to{opacity:1; transform:none}}
  }
}

/* ---------- BUTTONS ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--font);
  font-weight:600; font-size:16px; padding:13px 22px; border-radius:999px; border:1.5px solid transparent;
  cursor:pointer; transition:transform .14s var(--ease), background .2s, border-color .2s, box-shadow .2s; will-change:transform}
.btn:active{transform:translateY(1px) scale(.99)}
.btn-sm{padding:9px 16px; font-size:14.5px}
.btn-primary{background:var(--cobalt); color:#fff; box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:var(--cobalt-deep); box-shadow:var(--shadow-md)}
:root[data-theme="dark"] .btn-primary{color:#0E0F17}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .btn-primary{color:#0E0F17} }
.btn-line{background:transparent; color:var(--ink); border-color:var(--line-2)}
.btn-line:hover{border-color:var(--cobalt); color:var(--cobalt-ink)}
.link-arrow{display:inline-flex; align-items:center; gap:8px; color:var(--cobalt-ink); font-weight:600; font-size:15.5px}
.link-arrow span{transition:transform .2s var(--ease)}
.link-arrow:hover span{transform:translateX(4px)}

/* ---------- NAV ---------- */
.nav{position:fixed; inset:0 0 auto 0; z-index:100; height:var(--nav-h);
  background:color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter:blur(16px) saturate(180%); -webkit-backdrop-filter:blur(16px) saturate(180%);
  border-bottom:1px solid transparent; transition:border-color .3s, background .3s}
.nav.scrolled{border-bottom-color:var(--line); background:color-mix(in srgb, var(--bg) 88%, transparent)}
.nav-inner{max-width:1200px; margin:0 auto; height:100%; padding:0 clamp(16px,4vw,32px); display:flex; align-items:center; gap:18px}
.logo{display:flex; align-items:center; gap:9px; margin-right:auto}
.logo-mark{color:var(--cobalt)}
.logo-word{font-family:var(--font); font-weight:700; font-size:21px; letter-spacing:-.03em; color:var(--ink)}
.nav-links{display:flex; align-items:center; gap:4px}
.nav-links a{padding:8px 13px; border-radius:8px; font-size:15px; font-weight:500; color:var(--ink-2); transition:color .2s, background .2s}
.nav-links a:hover{color:var(--ink); background:var(--surface-2)}
.nav-right{display:flex; align-items:center; gap:10px}
.theme-toggle{width:38px; height:38px; border-radius:10px; border:1px solid var(--line-2); background:var(--surface);
  color:var(--ink-2); display:grid; place-items:center; cursor:pointer; transition:transform .15s var(--ease), border-color .2s, color .2s}
.theme-toggle:active{transform:scale(.92)}
.theme-toggle:hover{color:var(--ink); border-color:var(--cobalt)}
.i-moon{display:none}
:root[data-theme="dark"] .i-sun{display:none}
:root[data-theme="dark"] .i-moon{display:block}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .i-sun{display:none} :root:not([data-theme="light"]) .i-moon{display:block} }
@media (max-width:760px){ .nav-links{display:none} }

/* ---------- HERO ---------- */
.hero{max-width:1200px; margin:0 auto; padding:calc(var(--nav-h) + clamp(28px,6vw,64px)) clamp(16px,4vw,32px) clamp(40px,6vw,72px);
  display:grid; grid-template-columns:1.12fr .88fr; gap:clamp(28px,5vw,56px); align-items:center; min-height:min(86vh,740px)}
@media (max-width:900px){ .hero{grid-template-columns:1fr; min-height:0; align-items:start} }
.eyebrow{font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--cobalt-ink); margin-bottom:18px}
.eyebrow-warn{color:var(--danger)}
.hero h1{font-size:clamp(2.4rem,5vw,3.5rem); line-height:1.06; letter-spacing:-.03em; color:var(--ink)}
.hero-sub{font-size:clamp(1.05rem,1.8vw,1.24rem); color:var(--ink-2); line-height:1.55; max-width:52ch; margin-top:22px}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:32px}

/* hero chain card */
.hero-chain{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(22px,3vw,30px); box-shadow:var(--shadow-md)}
.chain-head{margin-bottom:22px}
.chain-kicker{font-family:var(--mono); font-size:11.5px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--cobalt-ink)}
.chain-head p{font-size:14.5px; color:var(--ink-2); margin-top:8px; line-height:1.5}
.chain{list-style:none; margin:0; padding:0; position:relative}
.chain::before{content:""; position:absolute; left:11px; top:14px; bottom:14px; width:2px; background:var(--line-2)}
.chain-node{position:relative; display:flex; gap:16px; padding:11px 0}
.node-dot{position:relative; z-index:1; flex:0 0 auto; width:24px; height:24px; border-radius:50%; background:var(--surface);
  border:2px solid var(--line-2); margin-top:2px}
.chain-node.is-done .node-dot{background:var(--cobalt); border-color:var(--cobalt)}
.chain-node.is-done .node-dot::after{content:""; position:absolute; inset:0; margin:auto; width:7px; height:7px; border-radius:50%; background:#fff}
.chain-node div{display:flex; flex-direction:column}
.chain-node b{font-size:15.5px; color:var(--ink); font-weight:600}
.chain-node span{font-size:13.5px; color:var(--ink-3); margin-top:2px; line-height:1.45}

/* ---------- TRUST BAND ---------- */
.trust{border-block:1px solid var(--line); background:var(--surface-2)}
.trust-inner{max-width:1200px; margin:0 auto; padding:22px clamp(16px,4vw,32px); display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
@media (max-width:640px){ .trust-inner{grid-template-columns:repeat(2,1fr); gap:18px 12px} }
.trust-stat{display:flex; flex-direction:column; gap:3px}
.trust-stat b{font-family:var(--mono); font-size:clamp(1.1rem,2.4vw,1.5rem); font-weight:600; color:var(--ink); letter-spacing:-.02em}
.trust-stat span{font-size:13px; color:var(--ink-3)}

/* ---------- SECTIONS ---------- */
.section{max-width:1200px; margin:0 auto; padding:clamp(56px,9vw,104px) clamp(16px,4vw,32px)}
.section-lease{background:var(--surface-2); max-width:none; border-block:1px solid var(--line)}
.section-lease > *{max-width:1200px; margin-inline:auto}
.sec-head{max-width:720px; margin-bottom:clamp(30px,5vw,48px)}
.sec-head h2{font-size:clamp(1.7rem,3.6vw,2.7rem); line-height:1.1; color:var(--ink)}
.sec-lead{font-size:clamp(1.02rem,1.7vw,1.18rem); color:var(--ink-2); line-height:1.6; max-width:64ch; margin-top:16px}

/* ---------- SEGMENTED CONTROLS ---------- */
.seg{display:inline-flex; gap:5px; background:var(--surface-2); border:1px solid var(--line); border-radius:12px; padding:4px}
.seg-wrap{display:flex; flex-wrap:wrap}
.seg-opt{flex:0 1 auto; border:0; background:transparent; color:var(--ink-2); font-size:14px; font-weight:500;
  padding:9px 15px; border-radius:9px; cursor:pointer; white-space:nowrap; transition:color .2s, background .25s var(--ease); will-change:transform}
.seg-opt:active{transform:scale(.97)}
.seg-opt.is-on{background:var(--cobalt); color:#fff; box-shadow:var(--shadow-sm)}
:root[data-theme="dark"] .seg-opt.is-on{color:#0E0F17}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .seg-opt.is-on{color:#0E0F17} }

/* ---------- PLAN ---------- */
.plan-grid{display:grid; grid-template-columns:330px 1fr; gap:clamp(18px,3vw,32px); align-items:start}
@media (max-width:860px){ .plan-grid{grid-template-columns:1fr} }
.cfg{position:sticky; top:calc(var(--nav-h) + 18px); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:22px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:20px}
@media (max-width:860px){ .cfg{position:static} }
.cfg fieldset{border:0; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.cfg legend{font-size:14px; font-weight:600; color:var(--ink); padding:0}
.date-input{font-family:inherit; font-size:15px; padding:11px 14px; border-radius:11px; border:1px solid var(--line-2); background:var(--surface-2); color:var(--ink); width:100%}
.date-input:focus{border-color:var(--cobalt); outline:none; box-shadow:0 0 0 3px var(--cobalt-soft)}
.check-inline{display:flex; align-items:center; gap:10px; font-size:14px; color:var(--ink-2); cursor:pointer}
.check-inline input{width:18px; height:18px; accent-color:var(--cobalt)}

.plan{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(20px,3vw,28px); box-shadow:var(--shadow-md)}
.plan-top{display:flex; align-items:center; gap:22px; padding-bottom:20px; border-bottom:1px solid var(--line); flex-wrap:wrap}
.score{position:relative; width:104px; height:104px; flex:0 0 auto; display:grid; place-items:center}
.score svg{transform:rotate(-90deg)}
.ring-bg{fill:none; stroke:var(--line); stroke-width:9}
.ring-fg{fill:none; stroke:var(--cobalt); stroke-width:9; stroke-linecap:round; stroke-dasharray:327; stroke-dashoffset:262; transition:stroke-dashoffset .7s var(--ease)}
.score-num{position:absolute; text-align:center; line-height:1}
.score-num b{font-family:var(--mono); font-size:25px; font-weight:600; color:var(--cobalt-ink); font-variant-numeric:tabular-nums}
.score-num span{display:block; font-size:10.5px; color:var(--ink-3); margin-top:3px; text-transform:uppercase; letter-spacing:.09em}
.plan-meta{flex:1 1 200px}
.plan-meta h3{font-size:20px}
.plan-meta > p{font-size:14.5px; color:var(--ink-2); margin-top:5px}
.plan-note{color:var(--cobalt-ink) !important; font-weight:500}
.tasks{list-style:none; margin:18px 0 0; padding:0; display:flex; flex-direction:column}
.task{display:flex; gap:14px; padding:15px 8px; cursor:pointer; align-items:flex-start; border-radius:12px; transition:background .2s}
.task + .task{border-top:1px solid var(--line)}
.task:hover{background:var(--surface-2)}
.task-box{flex:0 0 auto; width:24px; height:24px; border-radius:7px; border:2px solid var(--line-2); display:grid; place-items:center; margin-top:1px;
  transition:background .2s var(--ease), border-color .2s}
.task-box svg{width:14px; height:14px; color:#fff; opacity:0; transform:scale(.4); transition:opacity .2s, transform .25s var(--ease)}
:root[data-theme="dark"] .task-box svg{color:#0E0F17}
.task.done .task-box{background:var(--cobalt); border-color:var(--cobalt)}
.task.done .task-box svg{opacity:1; transform:scale(1)}
.task-body{flex:1}
.task-when{display:inline-block; font-family:var(--mono); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.05em;
  color:var(--cobalt-ink); background:var(--cobalt-soft); padding:2px 8px; border-radius:6px; margin-bottom:7px}
.task-title{display:block; font-weight:600; font-size:15.5px; color:var(--ink); line-height:1.35}
.task.done .task-title{color:var(--ink-3); text-decoration:line-through; text-decoration-color:var(--line-2)}
.task-desc{display:block; font-size:14px; color:var(--ink-2); margin-top:3px; line-height:1.5}
.task-desc .dk{font-style:normal; color:var(--cobalt-ink); font-weight:500}

/* ---------- LEASE ---------- */
.lease-grid{display:grid; grid-template-columns:1fr 380px; gap:clamp(18px,3vw,32px); align-items:start}
@media (max-width:900px){ .lease-grid{grid-template-columns:1fr} }
.lease-form{display:grid; grid-template-columns:1fr 1fr; gap:22px 24px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(20px,3vw,28px); box-shadow:var(--shadow-sm)}
@media (max-width:560px){ .lease-form{grid-template-columns:1fr} }
.lq-q{font-size:14.5px; font-weight:600; color:var(--ink); margin-bottom:10px; line-height:1.4}
.lease-form .seg{background:transparent; border:0; padding:0; gap:6px}
.lease-form .seg-opt{border:1px solid var(--line-2); background:var(--surface-2)}
.lease-form .seg-opt.is-on{border-color:var(--cobalt); background:var(--cobalt); color:#fff}
:root[data-theme="dark"] .lease-form .seg-opt.is-on{color:#0E0F17}

/* dark "verdict" report panel (element emphasis, not a page theme flip) */
.lease-report{position:sticky; top:calc(var(--nav-h) + 18px); background:#15161D; color:#ECEDF3; border:1px solid #262838;
  border-radius:var(--r-lg); padding:clamp(20px,3vw,26px); box-shadow:var(--shadow-lg)}
:root[data-theme="dark"] .lease-report{background:#0C0D14}
@media (max-width:900px){ .lease-report{position:static} }
.report-head{padding-bottom:16px; border-bottom:1px solid rgba(255,255,255,.1)}
.report-badge{display:inline-block; font-family:var(--mono); font-weight:600; font-size:12px; padding:5px 12px; border-radius:999px;
  background:rgba(110,130,255,.2); color:#AEB8FF; margin-bottom:11px; letter-spacing:.02em; transition:background .3s, color .3s}
.report-badge.warn{background:rgba(214,167,94,.22); color:#E7C283}
.report-badge.danger{background:rgba(236,131,119,.2); color:#F3A79B}
#reportSummary{font-size:14.5px; color:#C3C6D6; line-height:1.5}
.flags{list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column; gap:11px}
.flag{border-radius:13px; padding:14px 15px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); animation:flagin .4s var(--ease) both}
@keyframes flagin{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion: reduce){ .flag{animation:none} }
.flag.danger{background:rgba(236,131,119,.10); border-color:rgba(236,131,119,.3)}
.flag.warn{background:rgba(214,167,94,.10); border-color:rgba(214,167,94,.28)}
.flag-label{display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:.05em; margin-bottom:6px}
.flag.danger .flag-label{color:#F3A79B}
.flag.warn .flag-label{color:#E7C283}
.flag-title{font-weight:600; font-size:14.5px; color:#F4F5FA; line-height:1.35; margin-bottom:5px}
.flag-do{font-size:13.5px; color:#C3C6D6; line-height:1.5}
.flag-do b{color:#F4F5FA; font-weight:600}
.flag-src{font-size:12px; color:#8A8EA3; margin-top:6px; font-style:italic}
.report-foot{font-size:12.5px; color:#8A8EA3; line-height:1.5; margin-top:16px; padding-top:14px; border-top:1px solid rgba(255,255,255,.1)}

/* ---------- SERVICES ---------- */
.services-lead{display:grid; grid-template-columns:1.3fr 1fr; gap:clamp(28px,5vw,60px); align-items:center; margin-bottom:clamp(28px,4vw,44px)}
@media (max-width:820px){ .services-lead{grid-template-columns:1fr; gap:28px} }
.services-headline h2{font-size:clamp(1.7rem,3.6vw,2.7rem); line-height:1.1}
.services-headline .sec-lead{margin-bottom:20px}
.svc-steps{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px}
.svc-steps li{display:flex; gap:15px; align-items:flex-start; padding:14px 0}
.svc-steps li + li{border-top:1px solid var(--line)}
.svc-num{flex:0 0 auto; width:30px; height:30px; border-radius:9px; background:var(--cobalt-soft); color:var(--cobalt-ink); font-family:var(--mono); font-weight:600; display:grid; place-items:center; font-size:14px}
.svc-steps b{display:block; font-size:15.5px; color:var(--ink); font-weight:600}
.svc-steps span{display:block; font-size:14px; color:var(--ink-2); margin-top:2px}
.svc-rail{display:flex; gap:12px; overflow-x:auto; padding:4px 4px 14px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch}
.svc-rail::-webkit-scrollbar{height:8px}
.svc-rail::-webkit-scrollbar-thumb{background:var(--line-2); border-radius:8px}
.svc-chip{flex:0 0 auto; scroll-snap-align:start; min-width:190px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  padding:18px 20px; box-shadow:var(--shadow-sm); transition:transform .2s var(--ease), border-color .2s, box-shadow .2s}
.svc-chip:hover{transform:translateY(-3px); border-color:var(--cobalt); box-shadow:var(--shadow-md)}
.svc-chip b{display:block; font-size:16px; color:var(--ink); font-weight:600}
.svc-chip span{display:block; font-size:13.5px; color:var(--ink-3); margin-top:4px}

/* ---------- WHY ---------- */
.why-inner h2{font-size:clamp(1.7rem,3.6vw,2.7rem); line-height:1.1; max-width:22ch; margin-bottom:clamp(28px,4vw,40px)}
.why-list{display:grid; grid-template-columns:repeat(2,1fr); gap:0 clamp(28px,5vw,64px)}
@media (max-width:720px){ .why-list{grid-template-columns:1fr} }
.why-item{font-size:16px; color:var(--ink-2); line-height:1.55; padding:20px 0; border-top:1px solid var(--line)}
.why-item b{color:var(--ink); font-weight:600}

/* ---------- JOIN ---------- */
.join{padding:clamp(60px,9vw,110px) clamp(16px,4vw,32px); background:var(--cobalt); color:#fff}
:root[data-theme="dark"] .join{background:linear-gradient(160deg,#141a44,#0f1330)}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .join{background:linear-gradient(160deg,#141a44,#0f1330)} }
.join-inner{max-width:640px; margin:0 auto; text-align:center}
.join h2{font-size:clamp(1.9rem,4.6vw,3rem); color:#fff}
.join-inner > p{font-size:1.1rem; line-height:1.55; margin:16px auto 0; max-width:50ch; color:rgba(255,255,255,.85)}
.join-form{margin-top:28px}
.join-row{display:flex; gap:10px; background:rgba(255,255,255,.14); padding:8px; border-radius:16px; max-width:480px; margin:0 auto; border:1px solid rgba(255,255,255,.28)}
.join-row input{flex:1; border:0; background:transparent; color:#fff; font-size:16px; padding:11px 15px}
.join-row input::placeholder{color:rgba(255,255,255,.72)}
.join-row input:focus{outline:none}
.join-row .btn-primary{background:#fff; color:var(--cobalt-deep); box-shadow:none; flex:0 0 auto}
.join-row .btn-primary:hover{background:#EEF0FF; color:var(--cobalt-deep)}
@media (max-width:480px){ .join-row{flex-direction:column} .join-row .btn-primary{width:100%} }
.join-msg{min-height:22px; margin-top:14px; font-size:15px; font-weight:500; color:#DEE3FF}
.join-fine{font-size:13px; color:rgba(255,255,255,.66); margin-top:6px}

/* ---------- FOOTER ---------- */
.foot{background:var(--bg-2); border-top:1px solid var(--line); padding:44px clamp(16px,4vw,32px) 32px}
.foot-inner{max-width:1200px; margin:0 auto; display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; align-items:flex-start}
.foot-brand .logo-word{font-size:21px}
.foot-brand p{color:var(--ink-3); font-size:14px; margin-top:6px}
.foot-links{display:flex; gap:20px; flex-wrap:wrap}
.foot-links a{font-size:14px; color:var(--ink-2)}
.foot-links a:hover{color:var(--cobalt-ink)}
.foot-fine{max-width:1200px; margin:28px auto 0; font-size:12.5px; color:var(--ink-3); line-height:1.6; padding-top:20px; border-top:1px solid var(--line)}

@media (prefers-reduced-motion: reduce){
  *{transition-duration:.01ms !important; animation-duration:.01ms !important}
}
@media (prefers-reduced-transparency: reduce){
  .nav{background:var(--bg); backdrop-filter:none}
  .join-row{backdrop-filter:none}
}