:root{--ink:#081420;--surface:#112843;--lift:#163354;--rim:rgba(255,255,255,.06);--teal:#2dd4bf;--gold:#fbbf24;--text:#dff0fb;--muted:rgba(223,240,251,.42);--r:14px}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:"DM Sans",sans-serif;background:var(--ink);color:var(--text);min-height:100vh;overflow-x:hidden}
#bgCanvas{position:fixed;inset:0;z-index:0;pointer-events:none}
.page{position:relative;z-index:1;max-width:1040px;margin:0 auto;padding:2rem 1.25rem 5rem}
header{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:.75rem;margin-bottom:2rem}
.logo{font-family:"Playfair Display",serif;font-size:clamp(1.9rem,5.5vw,3rem);font-weight:700}
.logo em{font-style:normal;color:var(--teal)}
.nav-links{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
.nav-link{font-size:.78rem;color:var(--muted);text-decoration:none;padding:.35rem .9rem;border:1px solid var(--rim);border-radius:8px}
.nav-link:hover,.nav-link.active{color:var(--teal);border-color:var(--teal)}
.live-badge{display:flex;align-items:center;gap:.45rem;font-size:.72rem;text-transform:uppercase;color:var(--muted)}
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--teal);animation:livePulse 2.2s infinite}
@keyframes livePulse{0%,100%{box-shadow:0 0 0 0 rgba(45,212,191,.55)}55%{box-shadow:0 0 0 7px rgba(45,212,191,0)}}
.main-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:1rem}
.wind-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem}
@media(max-width:700px){.main-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.main-grid,.wind-grid{grid-template-columns:1fr}}
.card{background:var(--surface);border:1px solid var(--rim);border-radius:var(--r);padding:1.4rem 1.5rem;transition:transform .2s}
.card:hover{transform:translateY(-3px)}
.card-lbl{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:.7rem}
.val-hero{font-family:"Playfair Display",serif;font-size:clamp(2.4rem,7vw,3.8rem);font-weight:700;line-height:1;display:flex;align-items:flex-start}
.val-hero sup{font-size:.3em;color:var(--teal);margin-top:.4em;margin-left:.1em}
.val-big{font-family:"Playfair Display",serif;font-size:2rem;font-weight:700;line-height:1.1}
.val-unit{font-size:.75rem;color:var(--muted);margin-left:.3rem}
.val-sub{font-size:.78rem;color:var(--muted);margin-top:.5rem}
.wind-rose-wrap{display:flex;justify-content:center;align-items:center;height:140px}
.wind-rose{position:relative;width:120px;height:120px;border-radius:50%;border:1px solid var(--rim);background:rgba(0,0,0,.2)}
.wr-label{position:absolute;font-size:.55rem;color:var(--muted)}
.wr-n{top:2px;left:50%;transform:translateX(-50%)}
.wr-s{bottom:2px;left:50%;transform:translateX(-50%)}
.wr-e{right:4px;top:50%;transform:translateY(-50%)}
.wr-w{left:4px;top:50%;transform:translateY(-50%)}
.wr-arrow{position:absolute;top:50%;left:50%;width:4px;height:44px;margin-left:-2px;margin-top:-44px;transform-origin:bottom center;border-radius:2px;transition:transform .8s ease;background:linear-gradient(to top,var(--teal),transparent)}
.wr-dot{position:absolute;top:50%;left:50%;width:8px;height:8px;border-radius:50%;background:var(--teal);transform:translate(-50%,-50%)}
.divider{display:flex;align-items:center;gap:.9rem;margin:1.75rem 0 1rem}
.divider h2{font-family:"Playfair Display",serif;font-size:1rem;font-weight:400;color:var(--muted)}
.divider::after{content:"";flex:1;height:1px;background:var(--rim)}
.chart-card{background:var(--surface);border:1px solid var(--rim);border-radius:var(--r);padding:1.4rem 1.5rem 1.25rem;margin-bottom:1rem}
.chart-wrap{position:relative;height:240px}
.tabs{display:inline-flex;gap:.3rem;background:rgba(0,0,0,.25);border-radius:9px;padding:.28rem;margin-bottom:1.25rem}
.tab{padding:.38rem 1.05rem;border-radius:6px;border:none;background:transparent;color:var(--muted);font-size:.83rem;cursor:pointer}
.tab.active{background:var(--lift);color:var(--teal)}
.yr-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem}
.yr-lbl{font-size:.65rem;text-transform:uppercase;color:var(--muted);margin-bottom:.25rem}
.yr-unit{font-size:.7rem;color:var(--muted);margin-left:.2rem}
.footer-note{margin-top:2rem;font-size:.72rem;color:var(--muted);display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem}
.fi{opacity:0;transform:translateY(12px);animation:fadeUp .5s ease forwards}
.fi:nth-child(1){animation-delay:.04s}.fi:nth-child(2){animation-delay:.12s}
.fi:nth-child(3){animation-delay:.20s}.fi:nth-child(4){animation-delay:.28s}
.fi:nth-child(5){animation-delay:.36s}.fi:nth-child(6){animation-delay:.44s}
@keyframes fadeUp{to{opacity:1;transform:none}}
.yr-val{font-family:"Playfair Display",serif;font-size:1.3rem}
