/* Tunr: gedeelde stijl voor alle pagina's van de website (niet voor /web, dat heeft player.css).
   Tokens komen uit docs/SPEC.md §1. Alles onder "Subpagina's" geldt alleen voor <body class="sub-page">. */
:root{
  --bg:#0A0A0C;--surface:#16161A;--elevated:#202026;--stroke:#FFFFFF14;--stroke2:#FFFFFF24;
  --text:#FFFFFF;--sec:#A8A8B3;--dim:#7C7C88;
  --accent:#FF5A1F;--accent2:#FFB020;--live:#FF3B30;
  --grad:linear-gradient(135deg,var(--accent),var(--accent2));
  --btn:linear-gradient(135deg,#FF5A1F 0%,#FF7417 55%,#FF8E1C 100%);
  --ok:#4ADE80;--warn:#FFC56B;--info:#8FB8FF;
  --r-card:14px;--r-btn:12px;
  --max:1200px;--g:24px;
  --font:Inter,-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-head:ui-rounded,"SF Pro Rounded","Inter Display",Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--bg)}
body{background:var(--bg);color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased;line-height:1.5;overflow-x:hidden}
a{color:inherit}
img{display:block;max-width:100%;height:auto}
svg{flex:none}
button{font:inherit;color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--g)}
section{scroll-margin-top:84px}
:focus-visible{outline:3px solid #fff;outline-offset:3px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:#fff;color:#000;padding:10px 14px;border-radius:8px;font-weight:700;text-decoration:none}
.skip:focus{top:12px}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ===== wordmark (TunrLogo): TUNR + frequentieschaal met naaldje ===== */
.logo{display:inline-flex;flex-direction:column;align-items:stretch;gap:.08em;text-decoration:none;line-height:1;font-family:var(--font-head);font-weight:900;letter-spacing:.04em;color:#fff}
.logo b{font-weight:900;display:block;padding-left:.04em}
.logo svg{display:block;width:100%;height:.3em;overflow:visible}

/* ===== knoppen ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-weight:800;border-radius:var(--r-btn);padding:15px 26px;font-size:17.5px;line-height:1.2;cursor:pointer;border:0;text-decoration:none;transition:transform .15s,box-shadow .2s,background .15s;background:var(--btn);color:#fff;box-shadow:0 10px 30px -10px #ff5a1fb0,inset 0 1px 0 #ffffff40;font-family:inherit}
.btn:hover{transform:translateY(-1px);box-shadow:0 14px 38px -10px #ff5a1fd0,inset 0 1px 0 #ffffff50}
.btn:active{transform:none}
.btn.ghost{background:#ffffff14;box-shadow:inset 0 0 0 1px #ffffff2e;color:#fff}
.btn.ghost:hover{background:#ffffff22}
.btn.sm{padding:9px 16px;font-size:14.5px;border-radius:10px}
.btn svg{width:20px;height:20px}
.store{display:inline-flex;align-items:center;gap:11px;background:#000;color:#fff;border-radius:12px;padding:9px 18px 9px 14px;text-decoration:none;box-shadow:inset 0 0 0 1px #ffffff40;position:relative;cursor:default;user-select:none}
.store svg{width:26px;height:26px}
.store small{display:block;font-size:11px;font-weight:700;line-height:1.15;color:var(--accent2);letter-spacing:.01em}
.store b{display:block;font-size:17px;line-height:1.15;letter-spacing:-.01em;font-weight:700}

/* ===== LIVE-pil en equalizer ===== */
.live{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.live::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--live);box-shadow:0 0 0 0 #ff3b3099;animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 #ff3b3088}70%{box-shadow:0 0 0 8px #ff3b3000}100%{box-shadow:0 0 0 0 #ff3b3000}}
.eq{display:inline-flex;align-items:flex-end;gap:2px;height:14px}
.eq i{width:3px;height:100%;border-radius:2px;background:var(--accent);transform-origin:bottom;animation:eq .9s ease-in-out infinite}
.eq i:nth-child(2){animation-duration:.7s;animation-delay:-.3s}
.eq i:nth-child(3){animation-duration:1.1s;animation-delay:-.5s}
.eq i:nth-child(4){animation-duration:.8s;animation-delay:-.15s}
@keyframes eq{0%,100%{transform:scaleY(.25)}50%{transform:scaleY(1)}}

/* ===== navigatie ===== */
nav.top{position:fixed;inset:0 0 auto 0;z-index:50;transition:background .3s,box-shadow .3s}
nav.top.scrolled{background:#0a0a0ce6;backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);box-shadow:0 1px 0 var(--stroke)}
nav.top .wrap{display:flex;align-items:center;gap:30px;height:76px}
nav.top .logo{font-size:28px}
nav.top .links{display:flex;gap:26px;font-size:15px;font-weight:600;color:#d8d8de}
nav.top .links a{text-decoration:none;transition:color .15s}
nav.top .links a:hover,nav.top .links a[aria-current]{color:#fff}
nav.top .right{margin-left:auto;display:flex;align-items:center;gap:12px}
.lang{display:flex;border:1px solid #ffffff38;border-radius:9px;overflow:hidden;font-size:13px;font-weight:700;background:#00000066}
.lang button{background:none;border:0;color:#cfcfd6;padding:6px 11px;cursor:pointer}
.lang button.on{background:#fff;color:#000}
.navtoggle{display:none;width:40px;height:40px;border-radius:10px;border:1px solid #ffffff38;background:#00000066;color:#fff;cursor:pointer;padding:0;place-items:center}
.navtoggle svg{width:22px;height:22px}
.navtoggle path{transition:transform .2s,opacity .2s;transform-origin:12px 12px}
nav.menu-open .navtoggle .l1{transform:translateY(5px) rotate(45deg)}
nav.menu-open .navtoggle .l2{opacity:0}
nav.menu-open .navtoggle .l3{transform:translateY(-5px) rotate(-45deg)}

/* ===== kopjes en blokken ===== */
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--accent2)}
.eyebrow::before{content:"";width:18px;height:2px;border-radius:2px;background:var(--grad)}
.h2{font-family:var(--font-head);font-size:clamp(30px,3.8vw,48px);font-weight:900;letter-spacing:-.03em;line-height:1.06;text-wrap:balance;margin-top:10px}
.lead2{color:var(--sec);font-size:18.5px;margin-top:14px;max-width:62ch;text-wrap:pretty}
.block{padding:84px 0}
.center{text-align:center}
.center .lead2{margin-left:auto;margin-right:auto}

/* frequentieschaal als scheidingslijn */
.dial{position:relative;height:64px;max-width:1100px;margin:0 auto;pointer-events:none}
.dial::before{content:"";position:absolute;left:0;right:0;top:36px;height:4px;border-radius:4px;background:linear-gradient(90deg,transparent,var(--accent) 15%,var(--accent2) 85%,transparent)}
.dial::after{content:"";position:absolute;left:10%;right:10%;top:14px;height:16px;background:repeating-linear-gradient(90deg,#ffffff40 0 1.5px,transparent 1.5px 2.5%);-webkit-mask:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent);mask:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent)}
.dial i{position:absolute;left:58%;top:8px;width:3px;height:44px;border-radius:3px;background:var(--accent2);box-shadow:0 0 18px var(--accent2),0 0 40px #ffb02066}

/* ===== faq ===== */
.faq{max-width:880px;margin:30px auto 0}
.faq details{background:var(--surface);border:1px solid var(--stroke);border-radius:var(--r-card);margin-bottom:10px;transition:border-color .2s}
.faq details[open]{border-color:#ffffff2a}
.faq summary{list-style:none;cursor:pointer;padding:22px 24px;font-size:clamp(17px,2vw,19.5px);font-weight:700;display:flex;justify-content:space-between;align-items:center;gap:20px;border-radius:var(--r-card)}
.faq summary:hover{background:#ffffff06}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:20px;height:20px;background:linear-gradient(var(--accent2),var(--accent2)) center/20px 2.5px no-repeat,linear-gradient(var(--accent2),var(--accent2)) center/2.5px 20px no-repeat;transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 24px 24px;color:#d6d6dc;font-size:16.5px;line-height:1.65}
.faq .a a{color:#fff;text-underline-offset:2px}

/* ===== footer ===== */
footer.foot{border-top:1px solid var(--stroke);padding:56px 0 64px;color:var(--dim);font-size:14px;background:linear-gradient(180deg,#0d0d10,var(--bg))}
footer.foot .top{display:flex;justify-content:space-between;align-items:flex-start;gap:30px;flex-wrap:wrap}
footer.foot .logo{font-size:26px}
footer.foot .tag{margin-top:14px;color:var(--sec)}
footer.foot .flinks{display:grid;grid-template-columns:repeat(3,minmax(130px,auto));gap:12px 40px}
footer.foot .flinks a{color:var(--sec);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px}
footer.foot .flinks a:hover{color:#fff;text-decoration-color:currentColor}
footer.foot .flinks a[aria-current]{color:#fff}
footer.foot .disc{margin-top:32px;max-width:820px;font-size:13px;line-height:1.6}
footer.foot .disc a{color:var(--sec)}
footer.foot .copy{margin-top:12px;font-size:13px}

@media (max-width:980px){
  nav.top .links{display:none}
  .navtoggle{display:inline-grid}
  nav.top.menu-open{background:#0a0a0cf5;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
  nav.top.menu-open .links{display:flex;flex-direction:column;gap:0;position:absolute;left:0;right:0;top:100%;background:#0a0a0cf5;border-bottom:1px solid var(--stroke);padding:6px var(--g) 14px;font-size:17px}
  nav.top.menu-open .links a{padding:13px 0;border-bottom:1px solid #ffffff10}
  nav.top.menu-open .links a:last-child{border-bottom:0}
}
@media (max-width:640px){
  :root{--g:16px}
  nav.top .wrap{height:64px;gap:12px}
  nav.top .logo{font-size:23px}
  nav.top .navweb{display:none}
  .block{padding:60px 0}
  .lead2{font-size:17px}
  footer.foot .flinks{grid-template-columns:repeat(2,1fr)}
  .faq summary{padding:18px}
  .faq .a{padding:0 18px 20px;font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ================= Subpagina's ================= */
.sub-page main{display:block;padding:136px 0 96px;min-height:70vh;position:relative}
.sub-page main::before{content:"";position:absolute;inset:0 0 auto 0;height:420px;z-index:-1;background:radial-gradient(ellipse 60% 70% at 20% 0%,#ff5a1f22,transparent 70%),radial-gradient(ellipse 50% 60% at 85% 0%,#ffb02012,transparent 70%)}
.sub-page .narrow{max-width:860px}
.ttl{font-family:var(--font-head);font-size:clamp(38px,5.6vw,62px);font-weight:900;line-height:1.03;letter-spacing:-.035em;text-wrap:balance}
.ttl::after{content:"";display:block;width:min(150px,40%);height:6px;border-radius:6px;background:var(--grad);margin-top:20px;box-shadow:0 0 24px #ff5a1f99}
.phead{margin-bottom:38px}
.phead .lead2{margin-top:20px}
.panel{background:var(--surface);border:1px solid var(--stroke);border-radius:16px;padding:26px}
.prose{max-width:74ch}
.prose h2{font-family:var(--font-head);font-size:clamp(22px,2.6vw,27px);font-weight:900;letter-spacing:-.02em;line-height:1.2;margin:46px 0 10px;scroll-margin-top:96px}
.prose h2:first-child{margin-top:0}
.prose p,.prose li{color:#d6d6dc;font-size:17px;line-height:1.68}
.prose p+p{margin-top:12px}
.prose ul{padding-left:22px;margin-top:10px}
.prose li{margin-top:7px}
.prose li::marker{color:var(--accent)}
.prose a{color:#fff;text-underline-offset:3px}
.prose strong{color:#fff}
.prose .panel{margin-top:30px}
.note{display:flex;gap:16px;align-items:flex-start;padding:18px 22px;border-radius:14px;background:linear-gradient(135deg,#ff5a1f14,#ffb0200a);border:1px solid #ff5a1f55}
.note .ic{flex:none;width:40px;height:40px;border-radius:11px;background:var(--grad);display:grid;place-items:center}
.note .ic svg{width:22px;height:22px;color:#fff}
.note p{color:#e2e2e8;font-size:15.5px;margin:0}
.updated{color:var(--dim);font-size:14px;margin-top:40px}
@media (max-width:640px){
  .sub-page main{padding:104px 0 64px}
  .prose p,.prose li{font-size:16px}
  .panel{padding:20px}
}