/* ============================================================
   Havn - Scandinavian harbor identity
   Deep sea-green primary, warm sand neutrals, coral warnings.
   ============================================================ */

:root{
  /* light theme (warm sand) */
  --paper:#F4F2EC;
  --paper-2:#EDEAE1;
  --surface:#FFFFFF;
  --surface-2:#FAF8F3;
  --ink:#14201C;
  --ink-2:#4A574F;
  --ink-3:#7C877E;
  --line:#E1DDD1;
  --line-2:#D3CEBF;

  --sea:#12594A;        /* primary */
  --sea-deep:#0D4237;
  --sea-bright:#1E8067;
  --sea-soft:#E4EFE9;
  --sea-ink:#0F5142;

  --coral:#C24436;      /* warning */
  --coral-soft:#F8E7E3;
  --amber:#A76C1E;      /* caution */
  --amber-soft:#F6ECD9;
  --good:#1E8067;

  --shadow-sm:0 1px 2px rgba(20,32,28,.06), 0 2px 8px rgba(20,32,28,.05);
  --shadow-md:0 6px 24px rgba(20,32,28,.09), 0 2px 6px rgba(20,32,28,.06);
  --shadow-lg:0 20px 60px rgba(13,66,55,.16), 0 6px 18px rgba(20,32,28,.08);

  --r-sm:10px; --r-md:16px; --r-lg:24px; --r-xl:32px;
  --sp:clamp(1rem,3.5vw,1.6rem);

  --ease-spring:cubic-bezier(.22,1,.36,1);
  --ease-out:cubic-bezier(.2,.7,.3,1);

  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --display:'Inter Tight','Inter',-apple-system,sans-serif;
  --nav-h:66px;
}

@media (prefers-color-scheme: dark){
  :root{
    --paper:#0C1310;
    --paper-2:#111A16;
    --surface:#13201B;
    --surface-2:#0F1915;
    --ink:#E8EEEA;
    --ink-2:#A7B4AD;
    --ink-3:#76837B;
    --line:#22322B;
    --line-2:#2C3F36;

    --sea:#3FA285;
    --sea-deep:#0B342B;
    --sea-bright:#57C4A3;
    --sea-soft:#132A23;
    --sea-ink:#7CD3B6;

    --coral:#E28377;
    --coral-soft:#2A1A17;
    --amber:#D7A65E;
    --amber-soft:#2A2214;
    --good:#57C4A3;

    --shadow-sm:0 1px 2px rgba(0,0,0,.3);
    --shadow-md:0 8px 28px rgba(0,0,0,.4);
    --shadow-lg:0 24px 64px rgba(0,0,0,.55);
  }
}
:root[data-theme="dark"]{
  --paper:#0C1310; --paper-2:#111A16; --surface:#13201B; --surface-2:#0F1915;
  --ink:#E8EEEA; --ink-2:#A7B4AD; --ink-3:#76837B; --line:#22322B; --line-2:#2C3F36;
  --sea:#3FA285; --sea-deep:#0B342B; --sea-bright:#57C4A3; --sea-soft:#132A23; --sea-ink:#7CD3B6;
  --coral:#E28377; --coral-soft:#2A1A17; --amber:#D7A65E; --amber-soft:#2A2214; --good:#57C4A3;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 8px 28px rgba(0,0,0,.4);
  --shadow-lg:0 24px 64px rgba(0,0,0,.55);
}
:root[data-theme="light"]{
  --paper:#F4F2EC; --paper-2:#EDEAE1; --surface:#FFFFFF; --surface-2:#FAF8F3;
  --ink:#14201C; --ink-2:#4A574F; --ink-3:#7C877E; --line:#E1DDD1; --line-2:#D3CEBF;
  --sea:#12594A; --sea-deep:#0D4237; --sea-bright:#1E8067; --sea-soft:#E4EFE9; --sea-ink:#0F5142;
  --coral:#C24436; --coral-soft:#F8E7E3; --amber:#A76C1E; --amber-soft:#F6ECD9; --good:#1E8067;
  --shadow-sm:0 1px 2px rgba(20,32,28,.06), 0 2px 8px rgba(20,32,28,.05);
  --shadow-md:0 6px 24px rgba(20,32,28,.09), 0 2px 6px rgba(20,32,28,.06);
  --shadow-lg:0 20px 60px rgba(13,66,55,.16), 0 6px 18px rgba(20,32,28,.08);
}

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

body{
  margin:0; background:var(--paper); 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,h4{font-family:var(--display); font-weight:600; margin:0}
p{margin:0}
a{color:inherit; text-decoration:none}
button{font-family:inherit}
img,svg,canvas{display:block; max-width:100%}

.skip{position:absolute; left:-999px; top:8px; background:var(--sea); color:#fff; padding:10px 16px; border-radius:8px; z-index:200}
.skip:focus{left:12px}

:focus-visible{outline:2.5px solid var(--sea-bright); outline-offset:3px; border-radius:6px}

/* ---------- NAV ---------- */
.nav{position:fixed; inset:0 0 auto 0; z-index:100; height:var(--nav-h);
  background:color-mix(in srgb, var(--paper) 72%, transparent);
  backdrop-filter:blur(18px) saturate(180%); -webkit-backdrop-filter:blur(18px) 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(--paper) 85%, transparent)}
.nav-inner{max-width:1120px; margin:0 auto; height:100%; padding:0 clamp(16px,4vw,32px);
  display:flex; align-items:center; gap:20px}
.logo{display:flex; align-items:center; gap:9px; color:var(--sea-ink); margin-right:auto}
.logo-mark{display:grid; place-items:center; color:var(--sea)}
.logo-word{font-family:var(--display); font-weight:700; font-size:22px; letter-spacing:-.02em; color:var(--ink)}
.nav-links{display:flex; align-items:center; gap:6px}
.nav-links a{padding:8px 13px; border-radius:999px; font-size:15px; font-weight:500; color:var(--ink-2);
  transition:color .2s, background .2s}
.nav-links a:hover{color:var(--ink); background:color-mix(in srgb,var(--sea) 9%,transparent)}
.nav-cta{color:#fff !important; background:var(--sea) !important; font-weight:600}
.nav-cta:hover{background:var(--sea-deep) !important}
.theme-toggle{width:40px; height:40px; border-radius:999px; 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-out), border-color .2s, color .2s}
.theme-toggle:active{transform:scale(.92)}
.theme-toggle:hover{color:var(--ink); border-color:var(--sea)}
.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:720px){
  .nav-links a:not(.nav-cta){display:none}
}

/* ---------- HERO ---------- */
.hero{position:relative; min-height:100svh; display:grid; align-items:center;
  padding:calc(var(--nav-h) + 4vh) clamp(16px,4vw,32px) 12vh; overflow:hidden;
  background:
    radial-gradient(120% 90% at 50% -10%, var(--sea-soft), transparent 60%),
    linear-gradient(180deg, var(--paper), var(--paper-2));
}
.hero-water{position:absolute; inset:auto 0 0 0; width:100%; height:42%; opacity:.9;
  mask-image:linear-gradient(180deg, transparent, #000 30%); -webkit-mask-image:linear-gradient(180deg, transparent, #000 30%)}
.hero-inner{position:relative; z-index:2; max-width:820px; margin:0 auto; text-align:center}
.eyebrow{font-family:var(--display); text-transform:uppercase; letter-spacing:.16em; font-size:13px;
  font-weight:600; color:var(--sea-ink); margin-bottom:20px}
.hero h1{font-size:clamp(2.5rem,7vw,4.6rem); line-height:1.02; letter-spacing:-.035em; text-wrap:balance;
  color:var(--ink)}
.hero-sub{font-size:clamp(1.05rem,2.3vw,1.3rem); line-height:1.55; color:var(--ink-2);
  max-width:58ch; margin:24px auto 0}
.hero-cta{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:34px}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--display);
  font-weight:600; font-size:16px; padding:14px 24px; border-radius:999px; border:1px solid transparent;
  cursor:pointer; transition:transform .14s var(--ease-out), background .2s, box-shadow .2s, border-color .2s;
  will-change:transform}
.btn:active{transform:scale(.965)}
.btn-primary{background:var(--sea); color:#fff; box-shadow:var(--shadow-md)}
.btn-primary:hover{background:var(--sea-deep); box-shadow:var(--shadow-lg)}
.btn-ghost{background:var(--surface); color:var(--ink); border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--sea); color:var(--sea-ink)}
.hero-trust{display:inline-flex; align-items:center; gap:clamp(14px,4vw,32px); margin-top:44px;
  padding:16px 26px; border-radius:var(--r-lg); background:color-mix(in srgb,var(--surface) 70%,transparent);
  backdrop-filter:blur(8px); border:1px solid var(--line); box-shadow:var(--shadow-sm); flex-wrap:wrap; justify-content:center}
.trust-item{display:flex; flex-direction:column; align-items:center}
.trust-item strong{font-family:var(--display); font-size:22px; color:var(--sea-ink); letter-spacing:-.02em}
.trust-item span{font-size:13px; color:var(--ink-3)}
.trust-divider{width:1px; height:34px; background:var(--line-2)}
.scroll-hint{position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:2;
  width:24px; height:38px; border:2px solid var(--ink-3); border-radius:14px; opacity:.5}
.scroll-hint span{position:absolute; top:7px; left:50%; margin-left:-2px; width:4px; height:7px; border-radius:2px;
  background:var(--ink-3); animation:scrolldot 1.8s var(--ease-out) infinite}
@keyframes scrolldot{0%{opacity:0; transform:translateY(0)}30%{opacity:1}70%{opacity:1}100%{opacity:0; transform:translateY(12px)}}

/* ---------- BLOCKS ---------- */
.block{max-width:1120px; margin:0 auto; padding:clamp(64px,10vw,120px) clamp(16px,4vw,32px)}
.block-tint{max-width:none; background:linear-gradient(180deg,var(--paper-2),var(--paper))}
.block-tint > *{max-width:1120px; margin-left:auto; margin-right:auto}
.block-head{max-width:760px; margin-bottom:clamp(32px,5vw,52px)}
.section-eyebrow{font-family:var(--display); text-transform:uppercase; letter-spacing:.14em; font-size:12.5px;
  font-weight:600; color:var(--sea-ink); margin-bottom:14px}
.section-eyebrow-warn{color:var(--coral)}
.block h2{font-size:clamp(1.75rem,4vw,2.9rem); line-height:1.08; letter-spacing:-.03em; text-wrap:balance; color:var(--ink)}
.section-lead{font-size:clamp(1.02rem,2vw,1.18rem); color:var(--ink-2); line-height:1.6; max-width:66ch; margin-top:18px}

/* ---------- CHECKLIST ---------- */
.checklist-wrap{display:grid; grid-template-columns:340px 1fr; gap:clamp(20px,3vw,36px); align-items:start}
@media (max-width:840px){ .checklist-wrap{grid-template-columns:1fr} }
.cfg{position:sticky; top:calc(var(--nav-h) + 20px); 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:22px}
@media (max-width:840px){ .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}
.seg{display:flex; gap:6px; background:var(--surface-2); border:1px solid var(--line); border-radius:999px; padding:4px; flex-wrap:wrap}
.seg-lease{border-radius:14px}
.seg-opt{flex:1 1 auto; min-width:max-content; border:0; background:transparent; color:var(--ink-2);
  font-size:14px; font-weight:500; padding:9px 14px; border-radius:999px; cursor:pointer; white-space:nowrap;
  transition:color .2s, background .25s var(--ease-spring), box-shadow .2s; will-change:transform}
.seg-lease .seg-opt{border-radius:10px}
.seg-opt:active{transform:scale(.96)}
.seg-opt.is-on{background:var(--sea); color:#fff; box-shadow:var(--shadow-sm)}
.date-input{font-family:inherit; font-size:15px; padding:11px 14px; border-radius:12px; border:1px solid var(--line-2);
  background:var(--surface-2); color:var(--ink); width:100%}
.date-input:focus{border-color:var(--sea); outline:none; box-shadow:0 0 0 3px var(--sea-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(--sea)}

.plan{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(20px,3vw,30px); 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:108px; height:108px; 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(--sea); stroke-width:9; stroke-linecap:round;
  stroke-dasharray:327; stroke-dashoffset:262; transition:stroke-dashoffset .7s var(--ease-spring)}
.score-num{position:absolute; text-align:center; line-height:1}
.score-num b{font-family:var(--display); font-size:26px; color:var(--sea-ink); font-variant-numeric:tabular-nums}
.score-num span{display:block; font-size:11px; color:var(--ink-3); margin-top:2px; text-transform:uppercase; letter-spacing:.08em}
.plan-meta{flex:1 1 220px}
.plan-meta h3{font-size:20px; letter-spacing:-.02em}
.plan-meta p{font-size:14.5px; color:var(--ink-2); margin-top:5px}
.plan-note{color:var(--sea-ink) !important; font-weight:500}
.tasks{list-style:none; margin:20px 0 0; padding:0; display:flex; flex-direction:column; gap:2px}
.task{display:flex; gap:14px; padding:14px 8px; border-radius:12px; cursor:pointer; align-items:flex-start;
  transition:background .2s}
.task:hover{background:var(--surface-2)}
.task-box{flex:0 0 auto; width:24px; height:24px; border-radius:8px; border:2px solid var(--line-2);
  display:grid; place-items:center; margin-top:1px; transition:background .2s var(--ease-spring), border-color .2s}
.task-box svg{width:14px; height:14px; color:#fff; opacity:0; transform:scale(.4); transition:opacity .2s, transform .25s var(--ease-spring)}
.task.done .task-box{background:var(--sea); border-color:var(--sea)}
.task.done .task-box svg{opacity:1; transform:scale(1)}
.task-body{flex:1}
.task-when{font-family:var(--display); font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:.07em;
  color:var(--sea-ink); background:var(--sea-soft); padding:2px 8px; border-radius:6px; display:inline-block; margin-bottom:6px}
.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(--sea-ink); font-weight:500}

/* ---------- LEASE ---------- */
.lease-wrap{display:grid; grid-template-columns:1fr 400px; gap:clamp(20px,3vw,36px); align-items:start}
@media (max-width:900px){ .lease-wrap{grid-template-columns:1fr} }
.lease-form{display:flex; flex-direction:column; gap:20px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:clamp(20px,3vw,28px); box-shadow:var(--shadow-sm)}
.lq-q{font-size:15.5px; font-weight:600; color:var(--ink); margin-bottom:11px; line-height:1.4}
.lease-report{position:sticky; top:calc(var(--nav-h) + 20px); background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:clamp(20px,3vw,26px); box-shadow:var(--shadow-md)}
@media (max-width:900px){ .lease-report{position:static} }
.report-head{padding-bottom:16px; border-bottom:1px solid var(--line)}
.report-badge{display:inline-block; font-family:var(--display); font-weight:600; font-size:13px; padding:5px 13px;
  border-radius:999px; background:var(--sea-soft); color:var(--sea-ink); margin-bottom:10px; transition:background .3s, color .3s}
.report-badge.warn{background:var(--amber-soft); color:var(--amber)}
.report-badge.danger{background:var(--coral-soft); color:var(--coral)}
#reportSummary{font-size:14.5px; color:var(--ink-2); line-height:1.5}
.flags{list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column; gap:12px}
.flag{border-radius:14px; padding:14px 15px; border:1px solid; animation:flagin .4s var(--ease-spring) both}
@keyframes flagin{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}
.flag.danger{background:var(--coral-soft); border-color:color-mix(in srgb,var(--coral) 32%,transparent)}
.flag.warn{background:var(--amber-soft); border-color:color-mix(in srgb,var(--amber) 32%,transparent)}
.flag-label{display:inline-flex; align-items:center; gap:6px; font-family:var(--display); font-size:11px; font-weight:600;
  text-transform:uppercase; letter-spacing:.06em; margin-bottom:6px}
.flag.danger .flag-label{color:var(--coral)}
.flag.warn .flag-label{color:var(--amber)}
.flag-title{font-weight:600; font-size:15px; color:var(--ink); line-height:1.35; margin-bottom:5px}
.flag-do{font-size:13.5px; color:var(--ink-2); line-height:1.5}
.flag-do b{color:var(--ink); font-weight:600}
.flag-src{font-size:12px; color:var(--ink-3); margin-top:6px; font-style:italic}
.report-foot{font-size:12.5px; color:var(--ink-3); line-height:1.5; margin-top:16px; padding-top:14px; border-top:1px solid var(--line)}

/* ---------- SERVICES ---------- */
.svc-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:clamp(28px,5vw,44px)}
@media (max-width:820px){ .svc-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:440px){ .svc-grid{grid-template-columns:1fr} }
.svc-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:22px;
  box-shadow:var(--shadow-sm); transition:transform .2s var(--ease-spring), box-shadow .2s, border-color .2s}
.svc-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--sea)}
.svc-ico{font-size:26px; display:block; margin-bottom:12px}
.svc-card h4{font-size:17px; letter-spacing:-.01em; margin-bottom:6px}
.svc-card p{font-size:14px; color:var(--ink-2); line-height:1.5}
.svc-flow{display:flex; align-items:center; gap:12px; flex-wrap:wrap; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:clamp(20px,3vw,28px); box-shadow:var(--shadow-sm)}
.flow-step{display:flex; align-items:center; gap:14px; flex:1 1 220px}
.flow-n{flex:0 0 auto; width:34px; height:34px; border-radius:999px; background:var(--sea); color:#fff;
  font-family:var(--display); font-weight:700; display:grid; place-items:center; font-size:16px}
.flow-step p{font-size:14.5px; color:var(--ink-2); line-height:1.45}
.flow-step b{color:var(--ink)}
.flow-arm{flex:0 0 32px; height:2px; background:linear-gradient(90deg,var(--line-2),transparent); border-radius:2px}
@media (max-width:720px){ .flow-arm{display:none} }

/* ---------- BENEFITS ---------- */
.ben-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
@media (max-width:820px){ .ben-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .ben-grid{grid-template-columns:1fr} }
.ben{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:24px; box-shadow:var(--shadow-sm)}
.ben h4{font-size:17px; color:var(--sea-ink); letter-spacing:-.01em; margin-bottom:8px}
.ben p{font-size:14.5px; color:var(--ink-2); line-height:1.55}

/* ---------- JOIN ---------- */
.join{padding:clamp(64px,10vw,120px) clamp(16px,4vw,32px);
  background:radial-gradient(120% 130% at 50% 120%, var(--sea-deep), var(--sea) 70%)}
:root[data-theme="light"] .join{background:radial-gradient(120% 130% at 50% 120%, #0A3A30, #12594A 70%)}
.join-inner{max-width:640px; margin:0 auto; text-align:center; color:#fff}
.join h2{font-size:clamp(1.9rem,5vw,3rem); letter-spacing:-.03em; color:#fff}
.join-inner > p{font-size:1.1rem; line-height:1.55; margin:16px auto 0; max-width:52ch; color:rgba(255,255,255,.82)}
.join-form{margin-top:28px}
.join-row{display:flex; gap:10px; background:rgba(255,255,255,.12); padding:8px; border-radius:999px; max-width:480px; margin:0 auto;
  border:1px solid rgba(255,255,255,.22); backdrop-filter:blur(8px)}
.join-row input{flex:1; border:0; background:transparent; color:#fff; font-size:16px; padding:10px 16px}
.join-row input::placeholder{color:rgba(255,255,255,.6)}
.join-row input:focus{outline:none}
.join-row .btn-primary{background:#fff; color:var(--sea-deep); box-shadow:none; flex:0 0 auto}
.join-row .btn-primary:hover{background:#F0EEE7}
@media (max-width:480px){ .join-row{flex-direction:column; border-radius:20px} .join-row .btn-primary{width:100%} }
.join-msg{min-height:22px; margin-top:14px; font-size:15px; font-weight:500; color:#CFF3E7}
.join-fine{font-size:13px; color:rgba(255,255,255,.6); margin-top:6px}

/* ---------- FOOTER ---------- */
.foot{background:var(--paper-2); border-top:1px solid var(--line); padding:44px clamp(16px,4vw,32px) 32px}
.foot-inner{max-width:1120px; margin:0 auto; display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; align-items:flex-start}
.foot-brand .logo-word{font-size:22px}
.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(--sea-ink)}
.foot-fine{max-width:1120px; 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)}

/* ---------- REVEAL ---------- */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-spring)}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none}
  .scroll-hint span{animation:none}
  *{transition-duration:.01ms !important; animation-duration:.01ms !important}
}
@media (prefers-reduced-transparency: reduce){
  .nav{background:var(--paper); backdrop-filter:none}
  .hero-trust, .join-row{backdrop-filter:none}
}