/* ── MU Weather site v3 — living sky, weather-reactive theme ──────────── */
:root{
  --bg:#0A122B;--bg2:#0D1631;
  --card:rgba(22,34,74,.72);--card-solid:#16224A;
  --line:rgba(232,238,247,.09);--line2:rgba(232,238,247,.17);
  --text:#E8EEF7;--muted:#9AA8C7;--faint:#6B7CA3;
  --accent:#7FB5F0;--accent2:#5D9CEC;--glowc:rgba(95,156,236,.4);
  --sun:#F5C86A;--green:#5BC98C;--rain:#6FA8DC;
  --red:#E85F5F;--orange:#F0964E;--purple:#B9A7F5;
  --sky1:#14224D;--sky2:#101A3C;
  --r:20px;
}
/* weather-reactive themes — every accent-using element transitions */
body.wx-rain{--accent:#6FA8DC;--accent2:#4F86C4;--glowc:rgba(111,168,220,.42);--sky1:#12294E;--sky2:#0C1735}
body.wx-snow{--accent:#A9D6F2;--accent2:#7FB9E3;--glowc:rgba(169,214,242,.4);--sky1:#1A2E55;--sky2:#0F1D42}
body.wx-storm{--accent:#B9A7F5;--accent2:#8F7BE0;--glowc:rgba(185,167,245,.42);--sky1:#241E4E;--sky2:#120F35}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--text);
  font-family:"Outfit",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
::selection{background:color-mix(in srgb,var(--accent) 45%,transparent)}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
h1,h2,h3{line-height:1.14;font-weight:700;letter-spacing:-.02em}
.wrap{max-width:1120px;margin:0 auto;padding:0 26px}
section{padding:76px 0}
.skip{position:absolute;left:-999px;top:0;background:var(--accent);color:#0A122B;padding:8px 14px;border-radius:0 0 10px 0;z-index:99;font-weight:600}
.skip:focus{left:0}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}

/* ── sky layers: canvas + aurora blobs ── */
.sky{position:fixed;inset:0;z-index:-2;overflow:hidden;
  background:
    radial-gradient(120% 90% at 85% -10%,var(--sky1) 0%,transparent 55%),
    radial-gradient(100% 80% at 0% 100%,var(--sky2) 0%,transparent 60%),
    var(--bg);
  transition:background 1.2s ease}
#sky-canvas{position:absolute;inset:0;width:100%;height:100%}
.blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:.55;transition:background 1.2s ease;will-change:transform}
.blob-a{width:46vw;height:46vw;left:-12vw;top:-14vw;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 34%,#2A4A9E),transparent 65%)}
.blob-b{width:38vw;height:38vw;right:-10vw;top:16vh;background:radial-gradient(circle,rgba(245,200,106,.3),transparent 62%)}
.blob-c{width:44vw;height:44vw;left:24vw;bottom:-24vw;background:radial-gradient(circle,rgba(91,201,140,.22),transparent 60%)}
@keyframes drift{from{transform:translate(0,0) scale(1)}to{transform:translate(7vw,4vh) scale(1.12)}}
.blob-a{animation:drift 26s ease-in-out infinite alternate}
.blob-c{animation:drift 40s ease-in-out infinite alternate}

#cursor-glow{position:fixed;width:520px;height:520px;border-radius:50%;pointer-events:none;z-index:-1;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 14%,transparent),transparent 60%);
  transform:translate(-50%,-50%);mix-blend-mode:screen;transition:opacity .4s;opacity:0}
body:hover #cursor-glow{opacity:1}
@media(hover:none){#cursor-glow{display:none}}

#flash-overlay{position:fixed;inset:0;background:#DCE6FF;opacity:0;pointer-events:none;z-index:80}
#flash-overlay.on{animation:flash .5s ease-out}
@keyframes flash{0%{opacity:0}12%{opacity:.22}30%{opacity:.05}45%{opacity:.16}100%{opacity:0}}

#scroll-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:90;
  background:linear-gradient(90deg,var(--accent2),var(--accent),var(--sun));border-radius:0 3px 3px 0}

/* ── nav ── */
nav{position:sticky;top:0;z-index:60;background:rgba(10,18,43,.72);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:22px;height:64px}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:17.5px;color:var(--text)}
.logo:hover{text-decoration:none}
.logo svg{filter:drop-shadow(0 2px 8px var(--glowc));transition:transform .3s}
.logo:hover svg{transform:rotate(-8deg) scale(1.06)}
.nav .sp{flex:1}
.nav a.link{color:var(--muted);font-size:14.5px;font-weight:500;transition:color .2s}
.nav a.link:hover{color:var(--text);text-decoration:none}

/* ── buttons ── */
.btn{display:inline-flex;align-items:center;gap:9px;padding:13px 24px;border-radius:999px;font-weight:600;font-size:15px;
  transition:transform .18s ease,box-shadow .3s ease,background .3s ease,border-color .3s;cursor:pointer}
.btn:hover{transform:translateY(-2px);text-decoration:none}
.btn.primary{background:linear-gradient(135deg,var(--accent2),var(--accent));color:#0A122B;box-shadow:0 8px 28px var(--glowc)}
.btn.primary:hover{box-shadow:0 12px 36px var(--glowc)}
.btn.ghost{border:1px solid var(--line2);color:var(--text);background:rgba(232,238,247,.03)}
.btn.ghost:hover{background:rgba(232,238,247,.08)}
.btn.small{padding:8px 16px;font-size:13.5px}
.btn.sm{padding:9px 18px;font-size:13.5px}

/* ── hero ── */
.hero{display:grid;grid-template-columns:1.12fr .88fr;gap:56px;align-items:center;padding:78px 0 64px;position:relative}
.kicker{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;font-weight:700;letter-spacing:.16em;color:var(--accent);text-transform:uppercase;margin-bottom:18px;transition:color .6s}
.kicker::before{content:"";width:24px;height:2px;background:linear-gradient(90deg,var(--accent),transparent);border-radius:2px}
.hero h1{font-size:clamp(38px,5.6vw,62px);font-weight:900}
.grad{background:linear-gradient(115deg,var(--sun) 10%,#F0964E 45%,var(--red) 90%);background-size:200% 200%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:gradShift 6s ease-in-out infinite alternate}
@keyframes gradShift{from{background-position:0% 30%}to{background-position:100% 70%}}
.hero .sub{color:var(--muted);font-size:18px;max-width:33em;margin:22px 0 30px}
.hero .sub b{color:var(--text)}
.cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.stats{display:flex;gap:34px;margin-top:36px;flex-wrap:wrap}
.stat b{font-size:30px;font-weight:800;display:block;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.stat span{color:var(--muted);font-size:13px}

/* ── weather switcher ── */
.wx-switch{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:30px}
.wx-switch-label{color:var(--faint);font-size:13.5px;font-weight:500;margin-right:2px}
.wx-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:999px;border:1px solid var(--line2);
  background:rgba(232,238,247,.04);color:var(--muted);font:inherit;font-size:13.5px;font-weight:500;cursor:pointer;
  transition:all .25s ease;position:relative}
.wx-chip:hover{color:var(--text);border-color:var(--accent);transform:translateY(-1px)}
.wx-chip[aria-pressed="true"]{color:#0A122B;background:linear-gradient(135deg,var(--accent2),var(--accent));border-color:transparent;box-shadow:0 6px 20px var(--glowc)}
.wx-chip::after{content:"";position:absolute;inset:-3px;border-radius:999px;border:2px solid transparent;transition:border-color .25s}
.wx-chip[aria-pressed="true"]::after{border-color:color-mix(in srgb,var(--accent) 40%,transparent);animation:ringOut .6s ease-out}
@keyframes ringOut{from{opacity:1;transform:scale(.96)}to{opacity:0;transform:scale(1.12)}}
.wc{width:14px;height:14px;border-radius:50%;display:inline-block;flex:none}
.wc-clear{background:radial-gradient(circle at 35% 35%,#FFE9B0,var(--sun));box-shadow:0 0 8px rgba(245,200,106,.8)}
.wc-rain{background:linear-gradient(180deg,#9CC4EE,#4F86C4)}
.wc-snow{background:radial-gradient(circle,#fff,#BFE0F5)}
.wc-storm{background:linear-gradient(135deg,#B9A7F5,#6B5BD6);animation:stormPulse 1.6s infinite}
@keyframes stormPulse{50%{box-shadow:0 0 10px rgba(185,167,245,.9)}}

/* ── phone ── */
.phone-col{position:relative;justify-self:center;perspective:1200px}
.phone-glow{position:absolute;inset:8% 6%;background:radial-gradient(50% 50% at 50% 50%,var(--glowc),transparent 70%);filter:blur(34px);z-index:0;transition:background 1s}
.tilt{position:relative;z-index:1;transform-style:preserve-3d;transition:transform .18s ease-out;will-change:transform}
.phone{width:288px;border-radius:46px;padding:13px;background:linear-gradient(180deg,#1A2650,#0C142E);border:1px solid rgba(232,238,247,.16);
  box-shadow:0 40px 90px rgba(3,6,18,.7),inset 0 1px 0 rgba(232,238,247,.14);transition:background 1s}
.screen{position:relative;border-radius:34px;overflow:hidden;min-height:560px;padding:18px 16px 16px;
  background:
    radial-gradient(130% 70% at 85% -8%,color-mix(in srgb,var(--accent) 18%,transparent),transparent 55%),
    radial-gradient(110% 60% at 0% 110%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 55%),
    linear-gradient(175deg,#22346B 0%,#172450 48%,#101A3C 100%);
  transition:background 1s}
.screen::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.06),transparent 12%)}
.scr-status{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);font-weight:500}
.scr-status-r{display:flex;gap:5px;align-items:center}
.scr-status .dot{width:5px;height:5px;border-radius:50%;background:var(--muted);display:inline-block}
.scr-status .bat{width:20px;height:9px;border:1px solid var(--muted);border-radius:3px;display:inline-block;position:relative}
.scr-status .bat::after{content:"";position:absolute;inset:1.5px;right:5px;background:var(--muted);border-radius:1px}
.scr-cityrow{display:flex;justify-content:space-between;align-items:center;margin-top:16px}
.scr-city{font-weight:700;font-size:19px}
.scr-badge{font-size:10px;color:var(--muted);border:1px solid var(--line2);padding:3px 9px;border-radius:999px}
.scr-warn{margin-top:12px;display:flex;align-items:center;gap:8px;background:rgba(232,95,95,.14);border:1px solid rgba(232,95,95,.4);color:#F5B5B5;font-size:11.5px;font-weight:500;padding:8px 12px;border-radius:12px}
.scr-warn.hidden{display:none}
.pulse-dot{width:7px;height:7px;border-radius:50%;background:var(--red);box-shadow:0 0 0 0 rgba(232,95,95,.6);animation:pulse 1.8s infinite;flex:none}
@keyframes pulse{70%{box-shadow:0 0 0 8px rgba(232,95,95,0)}100%{box-shadow:0 0 0 0 rgba(232,95,95,0)}}
.scr-hero{text-align:center;margin-top:20px}
/* weather icon variants — shown per phone state class */
.ic{display:none;position:absolute}
.scr-icon{position:relative;width:96px;height:56px;margin:0 auto}
.ph-clear .ic-sun{display:block;left:24px;top:2px;width:40px;height:40px;border-radius:50%;
  background:radial-gradient(circle at 36% 34%,#FFF3CF,var(--sun) 72%);box-shadow:0 0 30px rgba(245,200,106,.65)}
.ph-clear .ray-spin{position:absolute;inset:-14px;border-radius:50%;
  background:conic-gradient(from 0deg,rgba(245,200,106,.55) 0 6deg,transparent 6deg 45deg,rgba(245,200,106,.4) 45deg 51deg,transparent 51deg 90deg,rgba(245,200,106,.55) 90deg 96deg,transparent 96deg 135deg,rgba(245,200,106,.4) 135deg 141deg,transparent 141deg 180deg,rgba(245,200,106,.55) 180deg 186deg,transparent 186deg 225deg,rgba(245,200,106,.4) 225deg 231deg,transparent 231deg 270deg,rgba(245,200,106,.55) 270deg 276deg,transparent 276deg 315deg,rgba(245,200,106,.4) 315deg 321deg,transparent 321deg 360deg);
  -webkit-mask:radial-gradient(circle,transparent 58%,#000 60%);mask:radial-gradient(circle,transparent 58%,#000 60%);
  animation:spinSlow 14s linear infinite;filter:blur(.4px)}
@keyframes spinSlow{to{transform:rotate(360deg)}}
.ph-clear .ic-cloud{display:block;right:-2px;bottom:0;width:56px;height:20px;border-radius:999px;background:linear-gradient(180deg,#F2F6FC,#C9D6EC);opacity:.9}
.ic-cloud::before{content:"";position:absolute;left:10px;top:-13px;width:28px;height:28px;border-radius:50%;background:inherit}
.ic-cloud::after{content:"";position:absolute;left:28px;top:-8px;width:20px;height:20px;border-radius:50%;background:inherit}
.ph-rain .ic-cloud,.ph-snow .ic-cloud,.ph-storm .ic-cloud{display:block;left:16px;bottom:12px;width:64px;height:24px;border-radius:999px;background:linear-gradient(180deg,#F2F6FC,#B9C7DF)}
.ph-rain .ic-rain,.ph-snow .ic-snow{display:block;left:24px;bottom:-8px;width:52px;height:14px}
.ic-rain b,.ic-snow b{position:absolute;width:3px;height:9px;border-radius:2px;background:linear-gradient(180deg,#9CC4EE,rgba(156,196,238,0));animation:fall 1s linear infinite}
.ic-rain b:nth-child(1){left:6px}.ic-rain b:nth-child(2){left:24px;animation-delay:.35s}.ic-rain b:nth-child(3){left:42px;animation-delay:.65s}
@keyframes fall{0%{transform:translateY(0);opacity:0}25%{opacity:1}100%{transform:translateY(16px);opacity:0}}
.ic-snow b{width:5px;height:5px;border-radius:50%;background:#fff;box-shadow:0 0 5px #fff;animation:fall 1.6s linear infinite}
.ic-snow b:nth-child(1){left:4px}.ic-snow b:nth-child(2){left:24px;animation-delay:.5s}.ic-snow b:nth-child(3){left:44px;animation-delay:1s}
.ph-storm .ic-bolt{display:block;left:38px;bottom:2px;width:18px;height:26px;
  background:linear-gradient(160deg,transparent 42%,#FFE68A 42%,#FFD34D 55%,transparent 55%,transparent 66%,#FFD34D 66%,#FFE68A 82%,transparent 82%);
  clip-path:polygon(62% 0,10% 55%,42% 55%,28% 100%,95% 40%,58% 40%,88% 0);animation:boltFlash 2.4s infinite}
@keyframes boltFlash{0%,88%,100%{opacity:.35}90%{opacity:1}92%{opacity:.4}94%{opacity:1}}
.scr-temp{font-size:74px;font-weight:800;letter-spacing:-.05em;line-height:1;margin-top:6px;font-variant-numeric:tabular-nums}
.scr-cond{color:var(--muted);font-size:14px;margin-top:2px}
.scr-feels{color:var(--faint);font-size:11.5px;margin-top:5px;min-height:2.6em}
.scr-hilo{display:flex;justify-content:center;align-items:center;gap:14px;margin-top:10px;font-size:13px;color:var(--muted)}
.scr-hilo b{color:var(--text);font-weight:600}
.hilo-sep{width:1px;height:12px;background:var(--line2)}
.scr-strip{display:flex;justify-content:space-between;margin-top:24px;background:rgba(232,238,247,.055);border:1px solid rgba(232,238,247,.07);border-radius:16px;padding:11px 6px 9px}
.scr-hour{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:9.5px;color:var(--faint);position:relative;flex:1}
.scr-hour b{color:var(--text);font-size:13px;font-weight:600;transition:color .5s}
.scr-hour i{width:4px;height:calc(var(--p,0)*20px);background:linear-gradient(180deg,var(--accent),color-mix(in srgb,var(--accent) 30%,transparent));border-radius:3px;margin-top:3px;transition:height .6s ease,background .6s}
.scr-hour.now{color:var(--accent)}
.scr-hour.now::before{content:"";position:absolute;inset:-4px -2px;border-radius:10px;background:color-mix(in srgb,var(--accent) 14%,transparent)}
.scr-hour.now b{color:var(--accent)}
.scr-radar{position:relative;height:104px;margin-top:16px;border-radius:16px;overflow:hidden;border:1px solid rgba(91,201,140,.3);
  background:
    repeating-linear-gradient(0deg,transparent 0 26px,rgba(232,238,247,.045) 26px 27px),
    repeating-linear-gradient(90deg,transparent 0 26px,rgba(232,238,247,.045) 26px 27px),
    radial-gradient(90% 120% at 30% 20%,rgba(23,60,40,.9),rgba(10,26,20,.96))}
.scr-radar .sweep{position:absolute;inset:-40%;background:conic-gradient(from 0deg,rgba(91,201,140,.42),transparent 70deg);animation:spin 4.5s linear infinite}
.sweep.big{inset:-60%;background:conic-gradient(from 0deg,rgba(91,201,140,.4),transparent 84deg);animation:spin 6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.blip{position:absolute;width:26px;height:16px;border-radius:50%;background:radial-gradient(circle,rgba(91,201,140,.85),rgba(91,201,140,.15) 70%);filter:blur(1px);animation:blip 3.4s ease-in-out infinite}
.b1{left:16%;top:30%}.b2{left:46%;top:52%;width:38px;height:24px;animation-delay:.8s}.b3{left:70%;top:24%;width:18px;height:12px;animation-delay:1.7s}
@keyframes blip{0%,100%{opacity:.4;transform:scale(.9)}50%{opacity:1;transform:scale(1.12)}}
.scr-radar-label{position:absolute;left:12px;bottom:9px;font-size:10px;letter-spacing:.12em;color:#9FE0BC;font-weight:600;display:flex;gap:6px;align-items:center}
.scr-radar-label i{font-style:normal;animation:pulse 2s infinite}

/* ── marquee ── */
.marquee{overflow:hidden;border-block:1px solid var(--line);padding:15px 0;background:rgba(16,26,60,.5)}
.marquee-track{display:inline-flex;gap:38px;white-space:nowrap;color:var(--faint);font-size:13px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;animation:scrollx 30s linear infinite}
@keyframes scrollx{to{transform:translateX(-50%)}}

/* ── sections ── */
.sec-head{margin-bottom:40px;max-width:46em}
.sec-head h2{font-size:clamp(26px,3.6vw,38px);font-weight:800}
.sec-head p{color:var(--muted);margin-top:12px;font-size:16.5px}
.sec-head em{color:var(--faint);font-style:normal;font-size:14px}

/* ── bento ── */
.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.tile{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px;overflow:hidden;backdrop-filter:blur(6px);transition:transform .22s ease,border-color .5s,box-shadow .22s ease}
.tile:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--accent) 45%,transparent);box-shadow:0 18px 44px rgba(3,6,18,.45)}
.tile h3{font-size:17px;margin-bottom:7px}
.tile p{color:var(--muted);font-size:14px}
.tile-body{position:relative;z-index:2}
.t-radar{grid-column:span 2;grid-row:span 2;display:flex;flex-direction:column}
.t-band{grid-column:span 2}
.t-warn{grid-column:span 2}
.t-widgets{grid-column:span 2}
.t-radar .tile-map{position:relative;flex:1;min-height:210px;margin:-24px -24px 18px;border-radius:var(--r) var(--r) 0 0;overflow:hidden;cursor:crosshair;background:
  repeating-linear-gradient(0deg,transparent 0 34px,rgba(232,238,247,.04) 34px 35px),
  repeating-linear-gradient(90deg,transparent 0 34px,rgba(232,238,247,.04) 34px 35px),
  radial-gradient(120% 100% at 25% 10%,rgba(23,60,40,.85),rgba(9,22,17,.95))}
.t-radar .rain{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(91,201,140,.55),rgba(91,201,140,.05) 68%);filter:blur(2px);animation:blip 4s ease-in-out infinite}
.r1{left:14%;top:22%;width:70px;height:44px}
.r2{left:44%;top:48%;width:120px;height:70px;animation-delay:1.2s}
.r3{left:72%;top:16%;width:52px;height:36px;animation-delay:2.1s}
/* cursor-spawned echoes on the radar tile */
.echo{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(159,224,188,.85),rgba(159,224,188,0) 70%);pointer-events:none;animation:echoOut 1.1s ease-out forwards}
@keyframes echoOut{from{opacity:.95;transform:translate(-50%,-50%) scale(.4)}to{opacity:0;transform:translate(-50%,-50%) scale(1.6)}}
.t-band .band-chart{width:100%;height:auto;margin:-6px 0 14px;display:block}
.band-dot{filter:drop-shadow(0 0 6px rgba(245,200,106,.9))}
.warn-stack{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.wchip{display:flex;align-items:center;gap:9px;font-size:12.5px;font-weight:500;padding:8px 12px;border-radius:11px;background:rgba(232,238,247,.045);border:1px solid var(--line)}
.wchip i{width:8px;height:8px;border-radius:50%;flex:none}
.wchip.red i{background:var(--red);box-shadow:0 0 8px var(--red)}
.wchip.orange i{background:var(--orange);box-shadow:0 0 8px var(--orange)}
.wchip.yellow i{background:var(--sun);box-shadow:0 0 8px var(--sun)}
.wchip.red{border-left:3px solid var(--red)}
.wchip.orange{border-left:3px solid var(--orange)}
.wchip.yellow{border-left:3px solid var(--sun)}
.swatches{display:flex;gap:10px;margin-bottom:16px}
.swatches span{width:26px;height:26px;border-radius:50%;background:var(--c);box-shadow:0 4px 14px rgba(3,6,18,.5),inset 0 1px 0 rgba(255,255,255,.35);animation:bob 3.4s ease-in-out infinite;transition:transform .2s}
.swatches span:hover{transform:scale(1.3)}
.swatches span:nth-child(2){animation-delay:.2s}.swatches span:nth-child(3){animation-delay:.4s}
.swatches span:nth-child(4){animation-delay:.6s}.swatches span:nth-child(5){animation-delay:.8s}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.widget-row{display:flex;gap:10px;margin-bottom:16px}
.mini-widget{border-radius:14px;padding:10px 12px;background:linear-gradient(165deg,#22346B,#101A3C);border:1px solid rgba(232,238,247,.12);display:flex;flex-direction:column;gap:2px}
.mini-widget .mw-city{font-size:10px;color:var(--muted);font-weight:600}
.mini-widget .mw-temp{font-size:24px;font-weight:800;letter-spacing:-.03em}
.mini-widget .mw-cond{font-size:9.5px;color:var(--faint)}
.w22{width:86px;flex:none}
.w42{flex:1}
.mw-top{display:flex;justify-content:space-between;align-items:baseline}
.mw-strip{display:flex;justify-content:space-between;margin-top:8px;font-size:10px;color:var(--muted)}
.mw-strip i{font-style:normal;display:flex;flex-direction:column;gap:2px;align-items:center;font-weight:600}
.mw-strip i::before{content:"";width:14px;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 30%,transparent))}
.shield{width:54px;height:54px;border-radius:16px;background:rgba(91,201,140,.12);border:1px solid rgba(91,201,140,.3);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.flag-cloud{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.flag-cloud span{font-size:19px;line-height:1;padding:4px;border-radius:8px;background:rgba(232,238,247,.05);transition:transform .18s ease}
.flag-cloud span:nth-child(odd){transform:rotate(-3deg)}
.flag-cloud span:nth-child(even){transform:rotate(3deg)}
.flag-cloud span:hover{transform:scale(1.3)}

/* ── keyless flow ── */
.flow{display:flex;align-items:stretch;gap:12px;flex-wrap:wrap}
.node{flex:1;min-width:200px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px;transition:transform .2s ease,border-color .5s}
.node:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.node-ic{display:block;font-size:26px;margin-bottom:10px}
.node b{display:block;font-size:15.5px;margin-bottom:4px}
.node span:last-child{color:var(--muted);font-size:13.5px}
.arrow{align-self:center;color:var(--faint);font-size:22px;flex:none;animation:nudge 1.6s ease-in-out infinite}
@keyframes nudge{50%{transform:translateX(4px)}}

/* ── languages ── */
.lang-grid{display:flex;flex-wrap:wrap;gap:11px}
.lang-grid span{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:9px 20px;font-size:14.5px;font-weight:500;transition:transform .18s ease,border-color .3s}
.lang-grid span:hover{transform:translateY(-3px) scale(1.04);border-color:color-mix(in srgb,var(--accent) 50%,transparent)}

/* ── downloads ── */
.dl{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.dl-card{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px;display:flex;flex-direction:column;gap:4px;align-items:flex-start;color:var(--text);transition:transform .2s ease,border-color .3s,box-shadow .3s}
.dl-card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--accent) 50%,transparent);text-decoration:none}
.dl-card.glow{border-color:color-mix(in srgb,var(--accent) 55%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 30%,transparent),0 16px 44px var(--glowc)}
.dl-card b{font-size:17px}
.dl-card .size{color:var(--muted);font-size:12.5px;margin-bottom:12px}
.dl-tag{position:absolute;top:-11px;left:18px;background:linear-gradient(135deg,var(--accent2),var(--accent));color:#0A122B;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:3px 11px;border-radius:999px}

/* ── FAQ ── */
.faq{margin-top:70px}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:16px;margin-bottom:10px;overflow:hidden;transition:border-color .3s}
.faq details[open]{border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.faq summary{cursor:pointer;list-style:none;padding:18px 52px 18px 22px;font-weight:600;font-size:15.5px;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:20px;top:50%;translate:0 -50%;font-size:22px;font-weight:400;color:var(--faint);transition:rotate .25s ease}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--muted);padding:0 22px 20px;font-size:14.5px}

/* ── sources ── */
.src-table{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.src-table td{padding:15px 20px;border-bottom:1px solid var(--line);vertical-align:top;font-size:14.5px}
.src-table tr:last-child td{border-bottom:none}
.src-table td:first-child{font-weight:700;white-space:nowrap;width:1%;padding-right:34px}
.src-table td:last-child{color:var(--muted)}

/* ── to-top ── */
#toTop{position:fixed;right:22px;bottom:22px;width:46px;height:46px;border-radius:50%;border:1px solid var(--line2);
  background:rgba(16,26,60,.85);color:var(--text);font-size:18px;cursor:pointer;z-index:70;opacity:0;pointer-events:none;
  transform:translateY(10px);transition:all .3s;backdrop-filter:blur(8px)}
#toTop.show{opacity:1;pointer-events:auto;transform:none}
#toTop:hover{border-color:var(--accent);color:var(--accent)}

/* ── footer ── */
footer{border-top:1px solid var(--line);padding:36px 0 46px;color:var(--muted);font-size:13.5px}
footer .f{display:flex;gap:18px;flex-wrap:wrap;align-items:center;justify-content:space-between}
.f-logo{display:flex;gap:10px;align-items:center}
.f-links{display:flex;gap:20px}
.f-links a{color:var(--muted)}
.f-links a:hover{color:var(--text)}

/* ── reveal ── */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.65,.25,1),transform .8s cubic-bezier(.2,.65,.25,1)}
.reveal.in{opacity:1;transform:none}

/* ── responsive ── */
@media(max-width:960px){
  .hero{grid-template-columns:1fr;padding:56px 0 44px;text-align:center}
  .hero .sub{margin-inline:auto}
  .cta,.stats,.wx-switch{justify-content:center}
  .kicker::before{display:none}
  .bento{grid-template-columns:repeat(2,1fr)}
  .t-radar,.t-band,.t-warn,.t-widgets{grid-column:span 2}
  .dl{grid-template-columns:repeat(2,1fr)}
  .nav a.link{display:none}
}
@media(max-width:620px){
  .bento{grid-template-columns:1fr}
  .t-radar,.t-band,.t-warn,.t-widgets{grid-column:span 1}
  .dl{grid-template-columns:1fr}
  .arrow{transform:rotate(90deg)}
  section{padding:56px 0}
  .stats{gap:22px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
  .tilt{transform:none!important}
}