/* Storm sketch (data-theme="storm"). Loaded after home.css; colours come from the storm tokens. No libraries, no glass. */
[data-theme="storm"] body{background:var(--c-bg)}
/* film grain over everything: an SVG turbulence tile, pointer-events off */
[data-theme="storm"] body::after{content:"";position:fixed;inset:0;z-index:20;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
/* sky: header + hero share one stage with clouds, vignette and the lightning canvas */
.sky{position:relative;isolation:isolate;overflow:hidden}
.sky>.clouds{position:absolute;inset:-10% -5% 0;z-index:-2;pointer-events:none;opacity:.9;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='700' preserveAspectRatio='none'%3E%3Cfilter id='c' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0032 .0065' numOctaves='4' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .102 0 0 0 0 .125 0 0 0 0 .157 0 0 0 1.9 -.78'/%3E%3C/filter%3E%3Crect width='1200' height='700' filter='url(%23c)'/%3E%3C/svg%3E");
  background-size:cover;background-position:center top}
.sky>.vig{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 90% at 62% 30%,transparent 45%,var(--c-vignette) 100%),linear-gradient(to bottom,transparent 70%,var(--c-bg) 100%)}
.sky>canvas{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none}
[data-theme="storm"] .hero{position:relative;z-index:1}
[data-theme="storm"] .nav{position:relative;z-index:5}
/* edgier type: tighter display, amber rule under the overline */
[data-theme="storm"] .over{color:var(--c-accent-ink);display:flex;align-items:center;gap:var(--s-3)}
[data-theme="storm"] .over::before{content:"";width:28px;height:2px;background:var(--c-accent)}
[data-theme="storm"] .display{letter-spacing:-.035em}
[data-theme="storm"] .link:hover{background:var(--c-raised)}
/* device + cards sit in the storm */
[data-theme="storm"] .phone{background:#050608;box-shadow:0 0 0 1px var(--c-border),0 30px 80px -20px #000}
[data-theme="storm"] .phone::before{background:#1B2027}
[data-theme="storm"] .card{box-shadow:0 0 0 1px rgba(255,255,255,.06),0 24px 60px -18px #000}
/* Get the app: one short charge on hover (no repeat, no strobe) */
[data-theme="storm"] .btn:hover{animation:charge 260ms var(--ease-out) 1 both}
@keyframes charge{0%{box-shadow:0 0 0 0 rgba(234,244,255,0)}35%{box-shadow:0 0 0 2px rgba(234,244,255,.85),0 0 34px 6px rgba(255,194,26,.55)}100%{box-shadow:0 0 0 1px rgba(255,194,26,.4),0 0 22px rgba(255,194,26,.22)}}
/* sections: hairline storm rules, amber numbers */
[data-theme="storm"] section{border-top-color:var(--c-divider)}
[data-theme="storm"] .feat article{border-top:1px solid var(--c-border);position:relative}
[data-theme="storm"] .feat article::before{content:"";position:absolute;top:-1px;left:0;width:40px;height:2px;background:var(--c-accent)}
[data-theme="storm"] .feat .num{color:var(--c-accent-ink)}
[data-theme="storm"] .frame{background:var(--c-surface)}
.compare{display:inline-flex;gap:var(--s-1);align-items:center}
.compare a[aria-current]{color:var(--c-accent-ink);text-decoration:underline;text-underline-offset:4px}
@media (prefers-reduced-motion:reduce){[data-theme="storm"] .btn:hover{animation:none;box-shadow:0 0 0 1px rgba(255,194,26,.4)}}

/* mascot sits on a raised tile so the concept's charcoal background reads as a card */
[data-theme="storm"] .mascot img{box-shadow:0 0 0 1px var(--c-border), 0 6px 18px rgb(0 0 0 / .45)}

/* 2026-11-13: header is outside .sky (so <main> holds the hero); the sky is pulled up under it so clouds + lightning still reach the logo */
[data-theme="storm"] .nav{min-height:72px}
[data-theme="storm"] main>.sky{margin-top:-72px;padding-top:72px}
[data-theme="storm"] .nav .signin{border:1px solid var(--c-border)}
[data-theme="storm"] .nav .signin:hover{border-color:var(--c-text-3)}
.foot .compare{padding-left:var(--s-3)}