/* ============================================================
   kutweer: eigen stylesheet
   Donker, atmosferisch, ronde zware typografie. Spiegelt de app:
   weer-stemmingen (droog / op komst / regen / nacht), glazen
   panelen, accenten in regen-blauw, lucht-cyaan, temperatuur-
   oranje. Nederlands, no-nonsense.
   ============================================================ */

:root{
  /* canvas + glas */
  --canvas:#10162A;          /* diep nacht-navy */
  --canvas-2:#0B1020;        /* nog dieper, voor banden */
  --panel:rgba(255,255,255,.055);
  --panel-2:rgba(255,255,255,.085);
  --line:rgba(255,255,255,.12);
  --line-strong:rgba(255,255,255,.22);

  /* tekst */
  --ink:#F3F5FB;
  --ink-soft:rgba(243,245,251,.72);
  --ink-faint:rgba(243,245,251,.52);

  /* weer-accenten (uit de app) */
  --rain:#6FB1FF;
  --sky:#8FE3FF;
  --thunder:#FFD15C;
  --warm:#FF9A6B;            /* temperatuurlijn (WeatherKind.temperature) */
  --dry:#5BD16A;
  --wet:#FF7A6B;

  --accent:#8FE3FF;          /* hoofd-accent: lucht-cyaan */

  /* stemming-gradients, exact uit Theme.swift.
     Droog = de temperatuur-getinte daglucht (milde lentedag, ~14°):
     de app kleurt 'm van staalblauw (vorst) tot diep azuur (heet). */
  --grad-dry:linear-gradient(160deg,#3884D8,#53ABE4 50%,#79CDE4);
  --grad-incoming:linear-gradient(160deg,#7B6CE6,#4D6EF5 50%,#202A52);
  --grad-raining:linear-gradient(160deg,#49687F,#2C4A66 50%,#0F1C30);
  --grad-night:linear-gradient(160deg,#1B2160,#0C0F30 55%,#04050F);

  --shadow:0 1px 2px rgba(0,0,0,.4), 0 22px 60px rgba(0,0,0,.5);
  --nav-bg:rgba(13,18,33,.72);

  --nav-h:62px;              /* de hoogte van de vaste balk; scroll-padding rekent hiermee */
  --maxw:1060px;
  --prose:760px;
  --r-sm:14px;
  --r:20px;
  --r-lg:30px;
  --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:dark;
}

/* ---------- Reset / base ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{
  scroll-behavior:smooth;
  /* De nav is sticky en 62px hoog: zonder deze marge scrolt elke ankerlink
     (#functies, #radar, de inhoudsopgave in het privacybeleid) de kop
     precies achter de balk. */
  scroll-padding-top:calc(var(--nav-h) + 16px);
  -webkit-text-size-adjust:100%;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body{
  background:var(--canvas);
  color:var(--ink);
  font-family:ui-rounded,"SF Pro Rounded",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  line-height:1.6;
  /* clip knipt net als hidden, maar maakt géén scroll-container — en dus
     blijft position:sticky het binnen deze pagina gewoon doen. De regel
     erboven is het vangnet voor browsers die clip nog niet kennen. */
  overflow-x:hidden;
  overflow-x:clip;
}
::selection{background:rgba(143,227,255,.28)}
img,svg{display:block;max-width:100%}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
/* Toetsenbordfocus was nergens gedefinieerd; op dit donkere canvas is de
   standaardring van de browser nauwelijks te zien. */
:focus-visible{outline:2px solid var(--sky);outline-offset:3px}

/* zachte korrel + een waas onweerlicht bovenin, voor diepte */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(60vw 40vw at 78% -8%,rgba(123,108,230,.22),transparent 60%),
    radial-gradient(55vw 40vw at 12% 6%,rgba(111,177,255,.16),transparent 60%);
}
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.035;
  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='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
main,header,footer{position:relative;z-index:1}

/* ---------- Layout ---------- */
.container{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.prose-wrap{max-width:var(--prose);margin:0 auto;padding:0 22px}
.section{padding:clamp(60px,9vw,116px) 0}
.center{text-align:center}
.tint{background:var(--canvas-2)}

.eyebrow{
  display:inline-block;font-size:13px;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;color:var(--sky);
  margin-bottom:18px;
}
.eyebrow.warm{color:var(--warm)}
.eyebrow.rain{color:var(--rain)}

h1,h2,h3{letter-spacing:-.03em;line-height:1.05;color:var(--ink);font-weight:800}
h1{font-weight:900}
h2{font-size:clamp(1.95rem,4.6vw,3rem)}
h3{font-size:clamp(1.15rem,2.2vw,1.4rem);font-weight:750}
.lead{font-size:clamp(1.06rem,2vw,1.28rem);color:var(--ink-soft);max-width:60ch;font-weight:450}
.center .lead{margin-left:auto;margin-right:auto}

/* ---------- Nav ---------- */
.nav{
  position:sticky;top:0;z-index:1000;
  display:flex;align-items:center;gap:18px;height:var(--nav-h);
  padding:0 max(22px,env(safe-area-inset-left));
  background:var(--nav-bg);
  backdrop-filter:saturate(160%) blur(20px);
  -webkit-backdrop-filter:saturate(160%) blur(20px);
  border-bottom:1px solid var(--line);
}
.brand{display:inline-flex;align-items:center;gap:11px;font-weight:900;letter-spacing:-.03em;color:var(--ink);font-size:19px}
.brand:hover{text-decoration:none}
.brand .mark{width:30px;height:30px;flex:none;border-radius:9px}
.brand .brand-name{white-space:nowrap}
.nav-spacer{flex:1}
.nav-links{display:flex;align-items:center;gap:4px}
.nav-links a{
  color:var(--ink-soft);font-weight:600;font-size:15px;
  padding:8px 12px;border-radius:10px;transition:color .2s,background .2s;
}
.nav-links a:hover{color:var(--ink);background:rgba(255,255,255,.07);text-decoration:none}
.nav-links a[aria-current="page"]{color:var(--ink)}

/* Mobiel menu. Onder 620px werden de nav-links simpelweg verborgen zonder dat er
   iets voor in de plaats kwam: op een telefoon was er dan geen enkele weg naar
   Support of Privacy vanuit de kop. <details> doet het werk, dus het werkt ook
   zonder JS; app.js sluit 'm alleen netjes na een klik. */
.nav-menu{position:relative;display:none;flex:none}
.nav-menu>summary{
  list-style:none;cursor:pointer;width:40px;height:40px;border-radius:12px;
  display:grid;place-items:center;
  background:var(--panel);border:1px solid var(--line);color:var(--ink);
  transition:background .2s,border-color .2s;
}
.nav-menu>summary::-webkit-details-marker{display:none}
.nav-menu>summary svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.nav-menu>summary .close,.nav-menu[open]>summary .open{display:none}
.nav-menu[open]>summary .close{display:block}
.nav-menu[open]>summary{background:var(--panel-2);border-color:var(--line-strong)}
.nav-panel{
  position:absolute;top:calc(100% + 13px);right:0;z-index:1001;
  min-width:212px;padding:8px;display:grid;gap:2px;
  background:var(--canvas-2);border:1px solid var(--line);
  border-radius:16px;box-shadow:var(--shadow);
}
.nav-panel a{color:var(--ink);font-weight:650;font-size:15.5px;padding:10px 14px;border-radius:10px;white-space:nowrap}
.nav-panel a:hover{background:rgba(255,255,255,.07);text-decoration:none}
.nav-panel a[aria-current="page"]{color:var(--sky)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-weight:700;font-size:15px;line-height:1;
  padding:13px 20px;border-radius:14px;border:1px solid transparent;
  cursor:pointer;transition:transform .18s var(--ease),filter .2s,box-shadow .2s,border-color .2s;
  white-space:nowrap;
}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn-sky{background:var(--sky);color:#06223A;box-shadow:0 10px 26px rgba(143,227,255,.30)}
.btn-sky:hover{filter:brightness(1.06)}
.btn-ghost{background:var(--panel);color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--line-strong);background:var(--panel-2)}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.center .btn-row{justify-content:center}
.note{font-size:13.5px;color:var(--ink-faint);margin-top:14px;max-width:48ch}
.center .note{margin-left:auto;margin-right:auto}

/* App Store badge: donkere paneel-variant, live link naar de App Store */
.appstore{
  display:inline-flex;align-items:center;gap:12px;
  padding:11px 20px;border-radius:14px;
  background:#fff;color:#06121F;border:1px solid transparent;
  transition:transform .18s var(--ease),filter .2s;
}
.appstore:hover{text-decoration:none;transform:translateY(-1px);filter:brightness(.97)}
.appstore svg{width:26px;height:26px;flex:none;fill:currentColor}
.appstore .as-top{font-size:12px;opacity:.8;line-height:1.15;letter-spacing:.01em}
.appstore .as-big{font-size:18px;font-weight:800;line-height:1.15;letter-spacing:-.02em}
.appstore.soon{background:var(--panel);color:var(--ink);border-color:var(--line-strong)}
.appstore.soon .as-top{color:var(--sky);opacity:1;font-weight:700}

/* kleine premium-pill (heette ooit de "1 euro"-pill) */
.euro{
  display:inline-flex;align-items:center;gap:5px;
  font-size:11.5px;font-weight:800;letter-spacing:.02em;
  color:#06223A;background:var(--sky);
  padding:4px 9px;border-radius:999px;white-space:nowrap;
}
.euro.ghost{background:rgba(143,227,255,.16);color:var(--sky)}
/* premium heeft z'n eigen kleur: goud, net als het slotje in de app */
.euro.pro{background:var(--thunder);color:#3A2A12}
.euro.pro.ghost{background:rgba(255,209,92,.16);color:var(--thunder)}
.euro svg{width:11px;height:11px;fill:currentColor;stroke:none}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;overflow:clip;padding:clamp(48px,8vw,96px) 0 clamp(36px,6vw,64px)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,60px);align-items:center}
.hero h1{font-size:clamp(2.5rem,6.6vw,4.4rem);letter-spacing:-.04em}
.hero h1 .accent{color:var(--sky)}
.hero .lead{margin-top:22px;font-size:clamp(1.1rem,2.2vw,1.4rem)}
.hero .btn-row{margin-top:30px}

/* trust-chips */
.chips{display:flex;flex-wrap:wrap;gap:9px}
.center .chips{justify-content:center}
.chip{
  font-size:13.5px;font-weight:650;color:var(--ink);
  background:var(--panel);border:1px solid var(--line);
  padding:8px 14px;border-radius:999px;
}
.chip b{color:var(--sky);font-weight:800}
.datasrc{margin-top:18px;font-size:13px;font-weight:600;color:var(--ink-faint);letter-spacing:.02em}

/* ---------- Phone mockup (spiegelt de app) ---------- */
.hero-visual{display:flex;justify-content:center}
.phone{
  position:relative;width:min(310px,84vw);margin:0 auto;aspect-ratio:9/19.3;
  background:#05070D;border-radius:46px;padding:9px;
  box-shadow:var(--shadow),0 0 0 1px rgba(255,255,255,.06);
}
.phone-screen{
  position:relative;height:100%;width:100%;border-radius:38px;overflow:hidden;
  display:flex;flex-direction:column;color:#fff;
  background:var(--grad-incoming);
  transition:background .8s var(--ease);
}
.phone-screen.is-dry{background:var(--grad-dry)}
.phone-screen.is-incoming{background:var(--grad-incoming)}
.phone-screen.is-raining{background:var(--grad-raining)}
.phone-screen.is-night{background:var(--grad-night)}
.phone-notch{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:30%;height:18px;background:#05070D;border-radius:0 0 11px 11px;z-index:8}

/* meebewegende regen in de telefoon */
.phone .rainfx{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .8s ease}
.phone-screen.is-incoming .rainfx{opacity:.5}
.phone-screen.is-raining .rainfx{opacity:1}
.phone .rainfx i{position:absolute;top:-12%;width:1.5px;height:14px;border-radius:2px;background:linear-gradient(transparent,rgba(220,238,255,.85));}
@media (prefers-reduced-motion:no-preference){
  .phone .rainfx i{animation:drop linear infinite}
  @keyframes drop{0%{transform:translateY(-20px)}100%{transform:translateY(640px)}}
}

/* sterrenhemel in de telefoon: fonkelt zachtjes zodra het nacht is */
.phone .starfx{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity 1s ease}
.phone-screen.is-night .starfx{opacity:1}
.phone .starfx i{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff;box-shadow:0 0 5px rgba(255,255,255,.85)}
@media (prefers-reduced-motion:no-preference){
  .phone .starfx i{animation:twinkle 2.8s ease-in-out infinite}
  @keyframes twinkle{0%,100%{opacity:.25}50%{opacity:1}}
}

.app-head{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:26px 16px 4px}
.app-head .loc{display:flex;align-items:center;gap:6px;font-size:17px;font-weight:900;letter-spacing:-.02em}
.app-head .loc svg{width:14px;height:14px;fill:currentColor}
/* het verversknopje naast de plaatsnaam, net als in de app */
.app-head .loc .rf{width:11px;height:11px;margin-left:3px;opacity:.7;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.app-head .acts{display:flex;gap:7px}
.app-head .acts span{width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.18);display:grid;place-items:center}
.app-head .acts svg{width:13px;height:13px;fill:none;stroke:#fff;stroke-width:2}

.app-hero{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:6px 16px}
.app-symbol{width:84px;height:84px;filter:drop-shadow(0 8px 14px rgba(0,0,0,.25))}
@media (prefers-reduced-motion:no-preference){
  .app-symbol{animation:bob 2.6s ease-in-out infinite}
  @keyframes bob{0%,100%{transform:translateY(6px)}50%{transform:translateY(-6px)}}
}
.app-verdict{font-size:25px;font-weight:900;letter-spacing:-.03em;margin-top:6px}
.app-sub{font-size:12.5px;font-weight:600;line-height:1.4;opacity:.85;max-width:24ch}

/* tijdlijn-kaart in de telefoon, net als de app: geen filter-chips,
   alleen de regenlijn (de temperatuur leest als getal mee in de kop) */
.app-tl{
  position:relative;z-index:2;margin:0 12px 10px;padding:13px;
  background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.16);
  border-radius:22px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.app-tl .tl-top{display:flex;align-items:baseline;justify-content:space-between;font-weight:800;font-size:12.5px}
.app-tl .tl-top small{font-weight:700;font-size:10px;opacity:.8;font-variant-numeric:tabular-nums}
.app-tl .tl-chart{height:62px;margin:8px -2px 2px}
.app-tl .tl-axis{display:flex;justify-content:space-between;font-size:9px;font-weight:600;opacity:.7;margin-top:6px}

/* Grafiek | Kaart | Week: de segmented-schakelaar onder het regenvak */
.app-seg{
  position:relative;z-index:2;display:flex;gap:5px;margin:0 12px 10px;padding:4px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.14);
  border-radius:15px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.app-seg span{
  flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  font-size:11px;font-weight:800;padding:8px 0;border-radius:11px;color:rgba(255,255,255,.6);
}
.app-seg span.on{background:rgba(255,255,255,.22);color:#fff}
.app-seg svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.app-foot{position:relative;z-index:2;text-align:center;font-size:9.5px;font-weight:700;opacity:.75;padding:0 12px 14px}
.app-foot small{display:block;font-size:8.5px;font-weight:600;opacity:.75;margin-top:3px}

/* ---------- Feature cards ---------- */
.grid{display:grid;gap:16px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.card{
  position:relative;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);padding:24px;box-shadow:var(--shadow);
  transition:transform .25s var(--ease),border-color .25s,background .25s;
}
.card:hover{transform:translateY(-3px);border-color:var(--line-strong);background:var(--panel-2)}
.card .ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;margin-bottom:15px;background:rgba(111,177,255,.16);color:var(--rain)}
.card .ic.cyan{background:rgba(143,227,255,.16);color:var(--sky)}
.card .ic.gold{background:rgba(255,209,92,.16);color:var(--thunder)}
.card .ic.warm{background:rgba(255,154,107,.16);color:var(--warm)}
.card .ic svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.card h3{margin-bottom:8px;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.card p{color:var(--ink-soft);font-size:15.5px}

/* ---------- Spotlight (copy + visual) ---------- */
.showcase{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,64px);align-items:center}
.showcase.flip .showcase-copy{order:2}
.showcase-copy .lead{max-width:50ch}
.ticks{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:11px}
.ticks li{position:relative;padding-left:32px;color:var(--ink-soft);font-size:15.5px;line-height:1.5}
.ticks li b{color:var(--ink);font-weight:750}
.ticks li::before{content:"";position:absolute;left:0;top:1px;width:21px;height:21px;border-radius:50%;background:rgba(143,227,255,.18)}
.ticks li::after{content:"";position:absolute;left:7px;top:6px;width:7px;height:4px;border-left:2px solid var(--sky);border-bottom:2px solid var(--sky);transform:rotate(-45deg)}

/* glazen weer-paneel voor showcases */
.glass{
  background:var(--grad-incoming);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:20px;box-shadow:var(--shadow);position:relative;overflow:hidden;
}
.glass .inner{position:relative;z-index:1;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16);border-radius:22px;padding:18px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}

/* tijdlijn-showcase */
.tlx-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px}
.tlx-head b{font-weight:800;font-size:15px}
.tlx-read{font-size:12.5px;font-weight:700;opacity:.9;font-variant-numeric:tabular-nums}
.tlx-chart{position:relative;height:120px;margin-top:4px}
.tlx-chart svg{width:100%;height:100%;overflow:visible}
.tlx-rule{position:absolute;top:0;bottom:18px;width:1.5px;background:rgba(255,255,255,.6);left:0;transition:left .1s linear}
.tlx-rule::after{content:"";position:absolute;top:-4px;left:50%;transform:translateX(-50%);width:9px;height:9px;border-radius:50%;background:#fff}
.tlx-axis{display:flex;justify-content:space-between;font-size:11px;font-weight:600;opacity:.75;margin-top:6px}

/* radar-showcase: nagebouwde heatmap-kaart met overtrekkende buien */
.radar-glass{background:var(--grad-raining)}
.radar-viz{
  position:relative;height:220px;border-radius:16px;overflow:hidden;
  background:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(150deg,#141E2E,#0D1522 60%,#0A101B);
  background-size:36px 36px,36px 36px,auto;
  border:1px solid rgba(255,255,255,.12);
}
.radar-viz .blob{position:absolute;border-radius:50%;filter:blur(14px);opacity:.75;pointer-events:none}
.radar-viz .b1{width:150px;height:110px;background:radial-gradient(closest-side,#3D7BFF,rgba(61,123,255,0));top:16%;left:-24%}
.radar-viz .b2{width:200px;height:150px;background:radial-gradient(closest-side,#8E7BFF 0%,#5AA8FF 45%,rgba(90,168,255,0));top:38%;left:-46%}
.radar-viz .b3{width:110px;height:90px;background:radial-gradient(closest-side,#9BD3FF,rgba(155,211,255,0));top:5%;left:-16%}
@media (prefers-reduced-motion:no-preference){
  .radar-viz .b1{animation:drift1 9s linear infinite}
  .radar-viz .b2{animation:drift2 9s linear infinite}
  .radar-viz .b3{animation:drift3 9s linear infinite}
  @keyframes drift1{0%{transform:translateX(0)}100%{transform:translateX(560px)}}
  @keyframes drift2{0%{transform:translateX(0) scale(1)}60%{transform:translateX(340px) scale(1.15)}100%{transform:translateX(600px) scale(.9)}}
  @keyframes drift3{0%{transform:translateX(0)}100%{transform:translateX(520px)}}
}
.radar-pin{
  position:absolute;top:52%;left:50%;width:13px;height:13px;border-radius:50%;
  background:var(--sky);border:2.5px solid #fff;box-shadow:0 0 0 6px rgba(143,227,255,.22),0 2px 8px rgba(0,0,0,.4);
  transform:translate(-50%,-50%);
}
.radar-bar{display:flex;align-items:center;gap:11px;margin-top:14px}
.radar-play{width:32px;height:32px;flex:none;border-radius:50%;background:rgba(255,255,255,.16);display:grid;place-items:center}
.radar-play svg{width:14px;height:14px;fill:#fff}
.radar-track{position:relative;flex:1;height:5px;border-radius:99px;background:rgba(255,255,255,.16);overflow:hidden}
.radar-prog{position:absolute;inset:0 100% 0 0;background:var(--sky);border-radius:99px}
@media (prefers-reduced-motion:no-preference){
  .radar-prog{animation:radarprog 9s linear infinite}
  @keyframes radarprog{0%{inset:0 100% 0 0}100%{inset:0 0% 0 0}}
}
.radar-time{font-size:11.5px;font-weight:700;opacity:.8;font-variant-numeric:tabular-nums}
.radar-scale{display:flex;flex-wrap:wrap;gap:7px 14px;margin-top:13px}
.radar-scale span{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700;opacity:.85}
.radar-scale i{width:11px;height:11px;border-radius:50%}

/* route-showcase */
.route .inner{padding:0;overflow:hidden}
.route-top{display:flex;align-items:center;gap:10px;padding:15px 16px;border-bottom:1px solid rgba(255,255,255,.12)}
.route-top .rsym{width:38px;height:38px;border-radius:12px;background:rgba(255,122,107,.22);color:var(--wet);display:grid;place-items:center;flex:none}
.route-top .rsym svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9}
.route-top b{display:block;font-size:15px;font-weight:800}
.route-top span{font-size:12px;opacity:.8}
.route-stops{padding:6px 16px 14px}
.rstop{display:flex;align-items:center;gap:11px;padding:9px 0;position:relative}
.rstop+.rstop::before{content:"";position:absolute;left:6px;top:-9px;height:18px;width:2px;background:rgba(255,255,255,.18)}
.rstop .dot{width:14px;height:14px;border-radius:50%;flex:none;box-shadow:0 0 0 4px rgba(255,255,255,.06)}
.rstop .dot.dry{background:var(--dry)}
.rstop .dot.wet{background:var(--wet)}
.rstop .rname{flex:1;font-size:13.5px;font-weight:700}
.rstop .rmeta{font-size:11.5px;opacity:.8;font-variant-numeric:tabular-nums}
.rstop .rtag{font-size:11px;font-weight:800;padding:3px 8px;border-radius:999px;font-variant-numeric:tabular-nums}
.rstop .rtag.dry{background:rgba(91,209,106,.2);color:var(--dry)}
.rstop .rtag.wet{background:rgba(255,122,107,.2);color:var(--wet)}

/* wind op de route: het onderste blok in de route-kaart, net als de app */
.route-wind{display:flex;align-items:center;gap:11px;padding:13px 16px;border-top:1px solid rgba(255,255,255,.12)}
.route-wind .wsym{width:34px;height:34px;flex:none;border-radius:50%;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);display:grid;place-items:center}
.route-wind .wsym svg{width:17px;height:17px;fill:none;stroke:var(--sky);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transform:rotate(35deg)}
.route-wind b{display:block;font-size:13.5px;font-weight:800}
.route-wind span{font-size:11.5px;opacity:.8;font-variant-numeric:tabular-nums}

/* ---------- How-it-works steps ---------- */
.steps{display:grid;gap:13px;margin:38px auto 0;max-width:780px;text-align:left}
.step{display:flex;gap:16px;align-items:flex-start;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:18px 20px}
.step .tile{position:relative;width:46px;height:46px;flex:none;border-radius:13px;background:rgba(143,227,255,.16);display:grid;place-items:center;transition:background .45s var(--ease),transform .4s var(--ease)}
.step .tile svg{width:23px;height:23px;stroke:var(--sky);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;transition:stroke .45s var(--ease)}
.step .tile .n{position:absolute;top:-7px;left:-7px;width:21px;height:21px;border-radius:50%;background:var(--rain);color:#04121F;font-size:11px;font-weight:900;display:grid;place-items:center;border:2px solid var(--canvas)}
.step h3{font-size:1.05rem;margin-bottom:3px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.step p{color:var(--ink-soft);font-size:15px;margin:0}
.sx .step.lit .tile{background:var(--sky);transform:scale(1.05)}
.sx .step.lit .tile svg{stroke:#06223A}

/* ---------- Bronnen / blend ---------- */
.sources{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:38px;text-align:left}
.sources.three{grid-template-columns:repeat(3,1fr)}
.src{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:24px}
.src .tag{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:999px;margin-bottom:13px}
.src.radar .tag{background:rgba(111,177,255,.18);color:var(--rain)}
.src.model .tag{background:rgba(255,154,107,.18);color:var(--warm)}
.src.vendor .tag{background:rgba(255,209,92,.18);color:var(--thunder)}
.src h3{margin-bottom:7px}
.src p{color:var(--ink-soft);font-size:14.5px}

/* ---------- Privacy band ---------- */
.band{background:var(--canvas-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.privacy-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:36px;text-align:left}
.pill{display:flex;gap:13px;align-items:flex-start;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.pill .dot{width:36px;height:36px;border-radius:11px;flex:none;display:grid;place-items:center;background:rgba(143,227,255,.16);color:var(--sky)}
.pill .dot svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pill b{display:block;font-size:15px;margin-bottom:4px}
.pill span{color:var(--ink-soft);font-size:13.8px;line-height:1.5}

/* ---------- Prijs ---------- */
.price-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:38px;text-align:left;max-width:820px;margin-left:auto;margin-right:auto}
.price{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px}
.price.paid{background:linear-gradient(160deg,rgba(143,227,255,.14),rgba(111,177,255,.06));border-color:var(--line-strong)}
.price .ph{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:6px}
.price .ph b{font-size:18px;font-weight:850}
.price .amt{font-size:30px;font-weight:900;letter-spacing:-.03em}
.price .amt small{font-size:13px;font-weight:700;opacity:.7}
.price ul{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:9px}
.price li{position:relative;padding-left:26px;color:var(--ink-soft);font-size:14.5px;line-height:1.45}
.price li::before{content:"";position:absolute;left:0;top:6px;width:14px;height:8px;border-left:2.4px solid var(--sky);border-bottom:2.4px solid var(--sky);transform:rotate(-45deg)}

/* de drie premium-smaken, als rijen in de betaalde prijskaart */
.plans{display:grid;gap:8px;margin-top:16px}
.plan{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 14px;border-radius:14px;
  background:rgba(255,255,255,.05);border:1px solid var(--line);
}
.plan.best{background:rgba(143,227,255,.12);border-color:var(--line-strong)}
.plan b{display:block;font-size:14.5px;font-weight:800}
.plan small{display:block;font-size:11.5px;font-weight:600;color:var(--ink-faint);margin-top:2px}
.plan .amt2{font-size:16px;font-weight:900;letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.plan .amt2 span{display:block;font-size:11px;font-weight:700;opacity:.7;text-align:right}
.trial{
  display:inline-flex;align-items:center;gap:6px;margin-top:14px;
  font-size:12.5px;font-weight:750;color:var(--sky);
  background:rgba(143,227,255,.14);border-radius:999px;padding:6px 12px;
}

/* ---------- Meldingen-showcase: een vergrendeld scherm met een banner ---------- */
.alert-glass{background:var(--grad-night)}
.lockscreen{
  position:relative;border-radius:18px;overflow:hidden;padding:20px 14px 16px;
  background:linear-gradient(170deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12);
}
.lockscreen .lstime{text-align:center;font-size:38px;font-weight:850;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.lockscreen .lsdate{text-align:center;font-size:12px;font-weight:650;opacity:.7;margin-top:5px}
.notif{
  display:flex;gap:11px;align-items:flex-start;margin-top:22px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.18);
  border-radius:16px;padding:12px 13px;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
@media (prefers-reduced-motion:no-preference){
  .notif{animation:notifIn .7s var(--ease) both;animation-delay:.15s}
  @keyframes notifIn{from{opacity:0;transform:translateY(-14px) scale(.97)}to{opacity:1;transform:none}}
}
.notif .nic{width:34px;height:34px;flex:none;border-radius:9px;overflow:hidden;background:#0B1020}
.notif .nic img{width:100%;height:100%;object-fit:cover}
.notif .nbody{flex:1;min-width:0}
.notif .ntop{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.notif .ntop b{font-size:13.5px;font-weight:850;letter-spacing:-.01em}
.notif .ntop span{font-size:11px;opacity:.7;white-space:nowrap}
.notif .nmsg{font-size:12.5px;line-height:1.45;opacity:.92;margin-top:3px}
.levels{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.levels span{
  font-size:11px;font-weight:750;padding:6px 11px;border-radius:999px;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.14);
}
.levels span.on{background:var(--sky);border-color:transparent;color:#06223A;font-weight:850}

/* ---------- Week-showcase: de kutweer-score-kaart ---------- */
.week-glass{background:var(--grad-dry)}
.wk-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.wk-head b{font-size:15px;font-weight:800}
.wk-head span{font-size:12px;font-weight:700;opacity:.8;font-variant-numeric:tabular-nums}
.wk-score{display:flex;align-items:baseline;gap:8px;margin-top:12px}
.wk-num{font-size:42px;font-weight:900;letter-spacing:-.04em;line-height:1;color:#FFD9A0;font-variant-numeric:tabular-nums}
.wk-score em{font-style:normal;font-size:19px;font-weight:850;opacity:.9}
.wk-bar{height:6px;border-radius:99px;background:rgba(255,255,255,.18);margin-top:12px;overflow:hidden}
.wk-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#B8F5C9,#FFD9A0)}
.wk-line{font-size:12px;font-weight:600;opacity:.82;margin-top:11px;line-height:1.45}
.wk-rows{margin-top:14px}
.wk-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid rgba(255,255,255,.12);font-size:13px;font-weight:700}
.wk-row .wday{flex:1;min-width:0}
.wk-row .wday small{display:block;font-size:10.5px;font-weight:750;color:#8FE3FF;margin-top:1px;font-variant-numeric:tabular-nums}
.wk-row svg{width:19px;height:19px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.wk-row .wlo{width:28px;text-align:right;opacity:.55;font-variant-numeric:tabular-nums}
.wk-row .whi{width:28px;text-align:left;font-variant-numeric:tabular-nums}
.wk-row .wspan{position:relative;width:60px;height:5px;border-radius:99px;background:rgba(255,255,255,.18);flex:none}
.wk-row .wspan i{position:absolute;top:0;bottom:0;border-radius:99px;background:linear-gradient(90deg,#8FE3FF,#FFD15C)}
.wk-credit{margin-top:13px;padding-top:11px;border-top:1px solid rgba(255,255,255,.12);font-size:10.5px;font-weight:650;opacity:.62}

/* ---------- Story ---------- */
.story{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(28px,5vw,52px);max-width:820px;margin:0 auto;text-align:left;box-shadow:var(--shadow)}
.story .q{font-size:clamp(1.25rem,2.6vw,1.65rem);font-weight:700;letter-spacing:-.02em;line-height:1.42}
.story .q .accent{color:var(--sky)}
.story .sign{margin-top:24px;font-weight:800;color:var(--ink)}
.story .sign span{color:var(--ink-faint);font-weight:500}

/* ---------- Reveal ---------- */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
/* Vangnet: als app.js niet binnenkomt zet de inline klok in de <head> deze klasse
   en wordt alles alsnog zichtbaar. Zonder dit blijft de pagina leeg. */
.js.reveal-fallback .reveal{opacity:1;transform:none}
.js .reveal[data-d="1"]{transition-delay:.07s}
.js .reveal[data-d="2"]{transition-delay:.14s}
.js .reveal[data-d="3"]{transition-delay:.21s}

/* ---------- Footer ---------- */
.foot{border-top:1px solid var(--line);padding:54px 0 calc(40px + env(safe-area-inset-bottom));background:var(--canvas-2)}
.foot-grid{display:flex;flex-wrap:wrap;gap:30px;justify-content:space-between;align-items:flex-start}
.foot .brand{margin-bottom:14px}
.foot p{color:var(--ink-soft);font-size:14px;max-width:40ch}
.foot-links{display:flex;flex-wrap:wrap;gap:26px}
.foot-col b{display:block;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:12px}
.foot-col a{display:block;color:var(--ink);font-size:15px;padding:4px 0}
.foot-col a:hover{color:var(--sky)}
.foot-base{margin-top:42px;padding-top:24px;border-top:1px solid var(--line);color:var(--ink-faint);font-size:13.5px;display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:space-between}

/* ---------- Legal / prose ---------- */
.legal-head{padding:clamp(46px,8vw,82px) 0 0}
.legal-head .updated{color:var(--ink-faint);font-size:14.5px;margin-top:14px}
.crumb{font-size:13.5px;font-weight:600;color:var(--ink-faint);margin-bottom:16px}
.crumb a{color:var(--ink);transition:color .2s}
.crumb a:hover{color:var(--sky);text-decoration:none}
.crumb .sep{margin:0 .45em;color:var(--line-strong)}
.crumb .cur{color:var(--ink-faint)}
.prose{padding:clamp(26px,5vw,42px) 0 clamp(54px,9vw,92px)}
.prose h2{font-size:clamp(1.3rem,3vw,1.6rem);margin:38px 0 12px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:1.1rem;margin:24px 0 8px}
.prose p{color:var(--ink-soft);margin:0 0 14px;font-size:16.5px}
.prose ul,.prose ol{color:var(--ink-soft);margin:0 0 16px;padding-left:22px;font-size:16.5px}
.prose li{margin:0 0 9px}
.prose strong{color:var(--ink);font-weight:750}
.callout{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--sky);border-radius:var(--r-sm);padding:18px 20px;margin:0 0 22px}
.callout p{margin:0;color:var(--ink)}
.toc{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:20px 24px;margin:0 0 34px}
.toc b{display:block;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:12px}
.toc ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:6px 22px;padding:0;margin:0}
.toc a{font-size:15px}

/* FAQ */
.faq{max-width:var(--prose);margin:30px auto 0}
.qa{border-bottom:1px solid var(--line)}
.qa summary{cursor:pointer;list-style:none;padding:20px 4px;display:flex;align-items:center;justify-content:space-between;gap:16px;font-weight:750;font-size:17px;color:var(--ink)}
.qa summary::-webkit-details-marker{display:none}
.qa summary .plus{flex:none;width:22px;height:22px;position:relative;transition:transform .25s var(--ease)}
.qa summary .plus::before,.qa summary .plus::after{content:"";position:absolute;background:var(--ink-faint);border-radius:2px}
.qa summary .plus::before{top:10px;left:3px;right:3px;height:2px}
.qa summary .plus::after{left:10px;top:3px;bottom:3px;width:2px;transition:opacity .25s}
.qa[open] summary .plus{transform:rotate(180deg)}
.qa[open] summary .plus::after{opacity:0}
.qa .a{padding:0 4px 22px;color:var(--ink-soft);font-size:15.5px}
.qa .a p+p{margin-top:12px}
.contact-card{margin:34px auto 0;max-width:var(--prose);background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(26px,5vw,40px);text-align:center;box-shadow:var(--shadow)}
.contact-card .ic{width:54px;height:54px;border-radius:15px;margin:0 auto 16px;display:grid;place-items:center;background:rgba(143,227,255,.16);color:var(--sky)}
.contact-card .ic svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.contact-card .email{font-size:clamp(1.1rem,2.6vw,1.5rem);font-weight:800;margin:8px 0 4px;color:var(--sky);word-break:break-word}

/* ---------- Responsive ---------- */
@media (max-width:880px){
  .hero-grid{grid-template-columns:1fr;text-align:center}
  .hero .lead{margin-left:auto;margin-right:auto}
  .hero .btn-row,.hero .chips{justify-content:center}
  .hero-visual{order:-1}
  .grid-3{grid-template-columns:1fr 1fr}
  .showcase,.showcase.flip .showcase-copy{grid-template-columns:1fr;order:0}
  .showcase{grid-template-columns:1fr;gap:clamp(28px,7vw,44px)}
  .sources,.sources.three,.privacy-row,.price-grid{grid-template-columns:1fr}
}
@media (max-width:620px){
  .nav-links{display:none}
  .nav-menu{display:block}
  .grid-3{grid-template-columns:1fr}
  .step{padding:16px}
  .toc ul{grid-template-columns:1fr}
  .foot-grid{flex-direction:column}
}
/* Kleine iPhones: brand + downloadknop + menuknop moeten samen passen. */
@media (max-width:400px){
  .nav{gap:10px;padding:0 14px}
  .nav .btn-sky{padding:12px 14px;font-size:14px}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none}
}