/* Sawtguide — marketingsite. Stijl volgt design/sawt-design.html: nachtzwart, violet, ijsblauw, vloeiend glas. */
@font-face { font-family: 'Satoshi'; font-weight: 400; font-display: swap; src: url(../fonts/Satoshi-400.woff2) format('woff2'); }
@font-face { font-family: 'Satoshi'; font-weight: 500; font-display: swap; src: url(../fonts/Satoshi-500.woff2) format('woff2'); }
@font-face { font-family: 'Satoshi'; font-weight: 700; font-display: swap; src: url(../fonts/Satoshi-700.woff2) format('woff2'); }
@font-face { font-family: 'Satoshi'; font-weight: 900; font-display: swap; src: url(../fonts/Satoshi-900.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 400 700; font-display: swap; src: url(../fonts/inter.woff2) format('woff2'); }
@font-face { font-family: 'Plex Arabic'; font-weight: 400; font-display: swap; src: url(../fonts/plex-arabic-400.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: 'Plex Arabic'; font-weight: 600; font-display: swap; src: url(../fonts/plex-arabic-600.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: 'Plex Arabic'; font-weight: 700 800; font-display: swap; src: url(../fonts/plex-arabic-700.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFC; }

:root {
  --nacht: #05050a; --inkt: #0d0d18;
  --violet: #7b61ff; --ijs: #3ad6ff; --roze: #ff4f8b; --koraal: #ff5a5f; --mint: #34e3a4;
  --wit: #f7f7fb; --mist: rgba(247,247,251,.66); --mist2: rgba(247,247,251,.44); --lijn: rgba(255,255,255,.12);
  --kop: 'Satoshi', 'Plex Arabic', system-ui, sans-serif;
  --tekst: 'Inter', 'Plex Arabic', system-ui, sans-serif;
  --ls-kop: -.02em; --ls-kop2: -.01em;
  --gutter: clamp(20px, 5vw, 48px);
  color-scheme: dark;
}
html[lang="ar"] { --kop: 'Plex Arabic', 'Satoshi', system-ui, sans-serif; --tekst: 'Plex Arabic', 'Inter', system-ui, sans-serif; --ls-kop: 0; --ls-kop2: 0; }

* { box-sizing: border-box; margin: 0; padding: 0; }
html { overflow-x: clip; scroll-behavior: smooth; scroll-padding-top: 80px; -webkit-text-size-adjust: 100%; }
body { background: var(--nacht); color: var(--wit); font: 400 17px/1.55 var(--tekst); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--kop); font-weight: 900; letter-spacing: var(--ls-kop); line-height: 1.08; text-wrap: balance; }
html[lang="ar"] h1, html[lang="ar"] h2 { line-height: 1.25; font-weight: 700; }
h2 { font-size: clamp(38px, 6.4vw, 84px); max-width: 15ch; }
h3 { font-size: 21px; font-weight: 700; letter-spacing: var(--ls-kop2); line-height: 1.2; }
p { text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--ijs); outline-offset: 3px; border-radius: 8px; }
.skip { position: absolute; inset-inline-start: 12px; top: -60px; z-index: 99; background: var(--wit); color: #000; padding: 10px 16px; border-radius: 12px; font-weight: 600; }
.skip:focus { top: 12px; }

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); }
.sec { padding: clamp(96px, 14vw, 180px) 0; position: relative; }
.eyebrow { display: inline-flex; align-items: center; gap: 12px; font: 500 14px var(--kop); letter-spacing: .14em; text-transform: uppercase; color: var(--mist); margin-bottom: 20px; }
html[lang="ar"] .eyebrow { letter-spacing: 0; font-size: 15px; }
.lead { font-size: clamp(18px, 2vw, 22px); color: var(--mist); max-width: 40ch; margin-top: 24px; }
.feat .lead, .how .lead, .package .lead { color: var(--wit); font-weight: 500; }
.grad { background: linear-gradient(90deg, #fff 0%, #cfc6ff 45%, #9be9ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; padding: 0 .08em .14em 0; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
[dir="rtl"] .grad { background-image: linear-gradient(270deg, #fff 0%, #cfc6ff 45%, #9be9ff 100%); }
.live { display: inline-flex; align-items: center; gap: 7px; font: 700 12px 'Satoshi', sans-serif; letter-spacing: .14em; color: var(--mint); }
.live i { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 4px rgba(52,227,164,.18), 0 0 14px var(--mint); animation: puls 2s ease-in-out infinite; }
@keyframes puls { 50% { box-shadow: 0 0 0 7px rgba(52,227,164,.06), 0 0 18px var(--mint); } }

/* vloeibaar glas, zoals in het app-design */
.glas {
  background: linear-gradient(160deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,.04) 45%, rgba(255,255,255,.07) 100%);
  -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255,255,255,.13);
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.28), inset 0 0 22px rgba(255,255,255,.04), 0 18px 40px rgba(0,0,0,.3);
  border-radius: 28px; position: relative;
}
.glas::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(120% 60% at 20% 0%, rgba(255,255,255,.12), transparent 55%); }

/* knoppen */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 54px; padding: 0 26px; border-radius: 999px; border: 0; cursor: pointer;
  font: 700 17px var(--kop); letter-spacing: 0; color: #fff;
  background: linear-gradient(135deg, #8a72ff, #5b3cff 55%, #2f8bff); box-shadow: inset 0 1.5px 0 rgba(255,255,255,.4), 0 14px 34px rgba(91,60,255,.45);
  transition: transform .2s, box-shadow .2s; }
.btn:hover { transform: translateY(-1px); box-shadow: inset 0 1.5px 0 rgba(255,255,255,.45), 0 18px 44px rgba(91,60,255,.6); }
.btn:active { transform: translateY(1px); }
.btn-glass { background: rgba(255,255,255,.08); box-shadow: inset 0 1.5px 0 rgba(255,255,255,.3), inset 0 0 0 1px rgba(255,255,255,.14); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.btn-glass:hover { background: rgba(255,255,255,.14); box-shadow: inset 0 1.5px 0 rgba(255,255,255,.35), inset 0 0 0 1px rgba(255,255,255,.2); }
.btn-sm { height: 40px; padding: 0 18px; font-size: 15px; }
.btn-full { width: 100%; }
.btn[disabled] { opacity: .6; cursor: wait; }

/* navigatie */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; transition: background .3s, box-shadow .3s; padding-top: env(safe-area-inset-top); }
.nav.vast { background: rgba(8,8,16,.62); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); box-shadow: 0 1px 0 var(--lijn); }
.nav-in { max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); height: 68px; display: flex; align-items: center; gap: 28px; }
.logo { display: inline-flex; align-items: center; gap: 10px; font: 700 22px 'Satoshi', sans-serif; letter-spacing: -.01em; }
.logo-mark { display: inline-flex; align-items: center; gap: 2.5px; height: 22px; width: 30px; justify-content: center; border-radius: 9px; background: linear-gradient(135deg, var(--violet), var(--ijs)); padding: 0 5px; }
.logo-mark i { width: 3px; border-radius: 2px; background: #fff; }
.logo-mark i:nth-child(1) { height: 6px } .logo-mark i:nth-child(2) { height: 13px } .logo-mark i:nth-child(3) { height: 9px } .logo-mark i:nth-child(4) { height: 5px }
.nav-links { display: flex; gap: 26px; margin-inline-start: auto; font-size: 15px; color: var(--mist); }
.nav-links a:hover { color: var(--wit); }
.nav-end { display: flex; align-items: center; gap: 14px; }
.nav-login { font-size: 14px; color: var(--mist); white-space: nowrap; }
.nav-login:hover { color: var(--wit); }
.foot-login { width: 100%; margin-top: 0 !important; }
.foot-login a { color: var(--wit); font-weight: 600; }
.nav-links a { white-space: nowrap; }
@media (max-width: 1360px) { .nav-login { display: none; } }
.langs { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px var(--lijn); }
.langs a { min-width: 34px; height: 30px; padding: 0 9px; display: grid; place-items: center; border-radius: 999px; font: 500 13px 'Satoshi', 'Plex Arabic', sans-serif; color: var(--mist); }
.langs a:hover { color: var(--wit); }
.langs a.cur { background: rgba(255,255,255,.16); color: var(--wit); box-shadow: inset 0 1px 0 rgba(255,255,255,.3); }
@media (max-width: 1020px) { .nav-links { display: none; } .nav-end { margin-inline-start: auto; } }
.btn { white-space: nowrap; }
.lang-s { display: none; }
@media (max-width: 480px) { .lang-l { display: none; } .lang-s { display: inline; } }
@media (max-width: 420px) { .nav-in { gap: 10px; } .nav-end { gap: 8px; } .btn-sm { padding: 0 14px; font-size: 14px; } .langs a { min-width: 30px; padding: 0 6px; } }

/* hero */
.hero { position: relative; padding-top: clamp(130px, 18vw, 190px); overflow: hidden; text-align: center; isolation: isolate; }
.hero-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.blob { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .55; }
.b1 { width: 60vw; height: 60vw; max-width: 760px; max-height: 760px; background: #5b3cff; top: -18%; left: -14%; }
.b2 { width: 50vw; height: 50vw; max-width: 640px; max-height: 640px; background: #00a3e6; top: 18%; right: -16%; opacity: .4; }
.b3 { width: 40vw; height: 40vw; max-width: 520px; max-height: 520px; background: #ff4f8b; bottom: 8%; left: 30%; opacity: .2; }
.hero h1 { font-size: clamp(38px, 5.6vw, 80px); line-height: 1.06; margin: 0 auto; max-width: none; }
.hero h1 span { display: block; }
html[lang="ar"] .hero h1 { font-size: clamp(38px, 5.6vw, 76px); }
.hero .eyebrow { margin-bottom: 26px; flex-direction: column; gap: 10px; }
.hero .lead { margin: 28px auto 0; max-width: 34em; }
.ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 36px; }
.for { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin-top: 30px; font-size: 14px; }
.for span { color: var(--mist2); margin-inline-end: 4px; }
.for i { font-style: normal; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px var(--lijn); color: var(--mist); }
.for i:first-of-type { color: var(--wit); background: rgba(123,97,255,.25); box-shadow: inset 0 0 0 1px rgba(155,135,255,.45); }
.hero-phones { position: relative; display: flex; justify-content: center; align-items: flex-end; margin-top: clamp(56px, 8vw, 90px); height: clamp(420px, 62vw, 760px); }
.ph { filter: drop-shadow(0 40px 70px rgba(0,0,0,.55)); }
.hero-phones .ph { position: absolute; bottom: -12%; width: clamp(220px, 27vw, 350px); will-change: transform; }
.ph-main { z-index: 2; }
.ph-side { opacity: .9; }
.ph-l { transform: translateX(-78%) translateY(9%) rotate(-7deg); }
.ph-r { transform: translateX(78%) translateY(9%) rotate(7deg); }
.hero-phones::before { content: ''; position: absolute; left: 50%; bottom: 10%; width: min(70vw, 760px); height: min(50vw, 520px); transform: translateX(-50%); background: conic-gradient(from 200deg, #7b61ff, #3ad6ff, #ff4f8b, #7b61ff); filter: blur(80px); opacity: .35; border-radius: 50%; z-index: 0; }
.hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 30%; background: linear-gradient(transparent, var(--nacht)); z-index: 3; pointer-events: none; }
@media (max-width: 640px) {
  .ph-l { transform: translateX(-62%) translateY(12%) rotate(-8deg) scale(.86); }
  .ph-r { transform: translateX(62%) translateY(12%) rotate(8deg) scale(.86); }
  .hero-phones { height: 118vw; }
  .hero-phones .ph { width: 58vw; }
}

/* het 5000-verhaal, groot en vroeg */
.shock { position: relative; z-index: 4; padding: clamp(40px, 8vw, 110px) 0 clamp(60px, 9vw, 120px); text-align: center; }
.shock::before { content: ''; position: absolute; left: 50%; top: 50%; width: min(90vw, 1000px); height: min(60vw, 560px); transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(255,90,95,.28), transparent); pointer-events: none; }
.shock-n { position: relative; font: 900 clamp(84px, 22vw, 320px)/1 'Satoshi', sans-serif; letter-spacing: -.02em; display: inline-block; padding: 0 .08em .14em 0; -webkit-box-decoration-break: clone; box-decoration-break: clone; background: linear-gradient(180deg, #fff 10%, #ffb3c1 50%, var(--koraal) 95%); -webkit-background-clip: text; background-clip: text; color: transparent; direction: ltr; unicode-bidi: isolate; white-space: nowrap; }
.shock-t { position: relative; font: 900 clamp(24px, 3.6vw, 46px)/1.15 var(--kop); letter-spacing: var(--ls-kop); max-width: 22ch; margin: clamp(18px, 3vw, 36px) auto 0; text-wrap: balance; }
.shock-t span { color: var(--mist); }

/* zo werkt het, in 3 stappen */
.steps3::before { content: ''; position: absolute; inset: 0; background: radial-gradient(800px 500px at 50% 30%, rgba(123,97,255,.16), transparent 70%); pointer-events: none; }
.s3 { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 56px; }
.s3 li { padding: clamp(26px, 3vw, 36px); }
.s3-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 26px; }
.s3-n { font: 900 64px/1 'Satoshi', sans-serif; letter-spacing: -.02em; background: linear-gradient(180deg, #fff, #9b8cff); -webkit-background-clip: text; background-clip: text; color: transparent; padding: 0 .08em .1em 0; }
.s3 .kit-ic { margin: 0; }
.s3 h3 { font-size: 22px; margin-bottom: 10px; }
.s3 p { color: var(--mist); font-size: 16px; }
.s3-slot { margin-top: clamp(40px, 6vw, 64px); text-align: center; font: 900 clamp(24px, 3.4vw, 40px)/1.2 var(--kop); letter-spacing: var(--ls-kop); text-wrap: balance; }
html[lang="ar"] .s3-slot, html[lang="ar"] .turn, html[lang="ar"] .shock-t, html[lang="ar"] .cmp-slot { font-weight: 700; }
@media (max-width: 860px) { .s3 { grid-template-columns: 1fr; } }

/* stats */
.stats-wrap { position: relative; z-index: 4; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn); }
.stat { padding: 30px 20px; display: flex; flex-direction: column; gap: 6px; }
.stat + .stat { border-inline-start: 1px solid var(--lijn); }
.stat b { font: 700 clamp(34px, 4.4vw, 52px)/1.1 'Satoshi', sans-serif; letter-spacing: -.01em; direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] .stat b { text-align: right; }
.stat span { color: var(--mist); font-size: 15px; }
@media (max-width: 900px) { .stats { grid-template-columns: 1fr 1fr; } .stat:nth-child(3) { border-inline-start: 0; } .stat:nth-child(n+3) { border-top: 1px solid var(--lijn); } }

/* probleem */
.problem::before { content: ''; position: absolute; inset: 0; background: radial-gradient(700px 500px at 85% 30%, rgba(255,90,95,.14), transparent 70%); pointer-events: none; }
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 64px; }
.card { padding: 26px; }
.card .num { font: 500 13px 'Satoshi', sans-serif; color: var(--koraal); letter-spacing: .1em; }
.card h3 { margin: 18px 0 8px; }
.card p, .tile p, .kit-i p, .flow p { color: var(--mist); font-size: 16px; }
.turn { font: 900 clamp(28px, 4.2vw, 52px)/1.15 var(--kop); letter-spacing: var(--ls-kop); text-wrap: balance; margin-top: clamp(64px, 9vw, 110px); max-width: 20ch; }
.turn::first-line { color: var(--wit); }
@media (max-width: 1000px) { .cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .cards { grid-template-columns: 1fr; } }

/* hoe het werkt */
.how::before { content: ''; position: absolute; inset: 0; background: radial-gradient(800px 600px at 10% 20%, rgba(123,97,255,.16), transparent 70%); pointer-events: none; }
.flow { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 64px; counter-reset: s; }
.flow li { padding: 28px; }
.step { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font: 700 16px 'Satoshi', sans-serif; background: linear-gradient(135deg, var(--violet), var(--ijs)); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 8px 20px rgba(91,60,255,.4); margin-bottom: 22px; }
.flow h3 { margin-bottom: 8px; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; }
.tile { padding: 32px; }
.tile h3 { font-size: 26px; margin: 22px 0 10px; }
.ic { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ic.mint { color: var(--mint); } .ic.ice { color: var(--ijs); }
.speed { margin-top: 20px; padding: 32px; display: grid; gap: 20px; }
.bar { display: grid; grid-template-columns: 220px 1fr; align-items: center; gap: 20px; }
.bar-l b { font: 700 30px 'Satoshi', sans-serif; letter-spacing: -.01em; display: block; direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] .bar-l b { text-align: right; }
.bar-l span { color: var(--mist); font-size: 15px; }
.bar-t { height: 12px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.bar-t i { display: block; height: 100%; width: var(--w); border-radius: inherit; background: linear-gradient(90deg, var(--mint), var(--ijs)); transform-origin: left; }
[dir="rtl"] .bar-t i { transform-origin: right; margin-inline-start: 0; }
.bar + .bar .bar-t i { background: linear-gradient(90deg, var(--violet), var(--ijs)); }
html.js .speed .bar-t i { transform: scaleX(0); transition: transform 1.2s cubic-bezier(.2,.8,.2,1) .2s; }
html.js .speed.in .bar-t i { transform: scaleX(1); }
.speed p { color: var(--mist); max-width: 60ch; }
@media (max-width: 860px) { .flow { grid-template-columns: 1fr; } .duo { grid-template-columns: 1fr; } .bar { grid-template-columns: 1fr; gap: 10px; } }

/* functie-secties met telefoon */
.feat { overflow: hidden; }
.feat::before { content: ''; position: absolute; inset: 0; pointer-events: none; }
.feat-listen::before { background: radial-gradient(700px 600px at 75% 50%, rgba(91,60,255,.22), transparent 70%); }
.feat-find::before { background: radial-gradient(800px 700px at 25% 50%, rgba(31,143,224,.28), transparent 70%), radial-gradient(600px 400px at 30% 20%, rgba(123,97,255,.2), transparent 70%); }
.feat-lost::before { background: radial-gradient(800px 700px at 75% 50%, rgba(224,36,106,.26), transparent 70%); }
.feat-guide::before { background: radial-gradient(800px 700px at 25% 50%, rgba(52,227,164,.12), transparent 70%), radial-gradient(600px 500px at 20% 70%, rgba(58,214,255,.14), transparent 70%); }
.feat-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(40px, 6vw, 96px); align-items: center; position: relative; }
.feat-grid.rev .feat-text { order: 2; }
.feat-media { display: flex; justify-content: center; position: relative; }
.feat-media .ph { width: clamp(240px, 26vw, 340px); position: relative; z-index: 1; }
.feat-media::before { content: ''; position: absolute; width: 80%; aspect-ratio: 1; border-radius: 50%; top: 20%; filter: blur(60px); opacity: .55; }
.feat-listen .feat-media::before { background: #5b3cff; }
.feat-find .feat-media::before { background: #1f8fe0; }
.feat-lost .feat-media::before { background: #e0246a; }
.feat-guide .feat-media::before { background: #1aa69a; opacity: .4; }
.feat-media.two .ph-back { position: absolute; z-index: 0; transform: translateX(42%) translateY(8%) rotate(6deg) scale(.86); opacity: .85; }
[dir="rtl"] .feat-media.two .ph-back { transform: translateX(-42%) translateY(8%) rotate(-6deg) scale(.86); }
.feat-media.two .ph:first-child { transform: translateX(-14%); }
[dir="rtl"] .feat-media.two .ph:first-child { transform: translateX(14%); }
.ticks { list-style: none; margin-top: 40px; display: grid; gap: 22px; }
.ticks li { display: flex; gap: 16px; align-items: flex-start; }
.ic-s { flex: none; width: 28px; height: 28px; padding: 6px; border-radius: 50%; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; background: rgba(255,255,255,.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.3); margin-top: 1px; }
.feat-find .ic-s { background: rgba(58,214,255,.25); }
.feat-lost .ic-s { background: linear-gradient(135deg, #ff5a5f, #ff2d7a); }
.feat-guide .ic-s { background: rgba(52,227,164,.3); }
.ticks b { display: block; font: 700 18px var(--kop); letter-spacing: var(--ls-kop2); }
.ticks span { color: var(--mist); font-size: 16px; }
@media (max-width: 860px) {
  .feat-grid { grid-template-columns: 1fr; }
  .feat-grid.rev .feat-text { order: 0; }
  .feat-media .ph { width: min(66vw, 300px); }
  .feat-media.two .ph:first-child { transform: translateX(-8%); }
  [dir="rtl"] .feat-media.two .ph:first-child { transform: translateX(8%); }
  .feat-media.two .ph-back { transform: translateX(30%) translateY(6%) rotate(6deg) scale(.84); }
  [dir="rtl"] .feat-media.two .ph-back { transform: translateX(-30%) translateY(6%) rotate(-6deg) scale(.84); }
}

/* pakket */
.kit { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 64px; }
.kit-i { padding: 30px; }
.kit-ic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; background: linear-gradient(140deg, rgba(123,97,255,.5), rgba(58,214,255,.3)); box-shadow: inset 0 1.5px 0 rgba(255,255,255,.4); margin-bottom: 24px; }
.kit-i h3 { margin-bottom: 8px; }
@media (max-width: 900px) { .kit { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .kit { grid-template-columns: 1fr; } .kit-i { display: grid; grid-template-columns: 56px 1fr; column-gap: 18px; padding: 22px; } .kit-ic { grid-row: span 2; margin: 0; } }

/* prijzen */
.pricing::before { content: ''; position: absolute; inset: 0; background: radial-gradient(900px 600px at 50% 60%, rgba(123,97,255,.16), transparent 70%); pointer-events: none; }
.prices { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 56px; }
.plans-fallback { grid-column: 1 / -1; padding: 32px; color: var(--mist); font-size: 18px; }
.plan { padding: clamp(28px, 3.4vw, 40px); display: flex; flex-direction: column; align-items: flex-start; }
.plan-main { background: linear-gradient(150deg, #7b61ff, #3a6bff 55%, #22b8ff); border-color: rgba(255,255,255,.3); box-shadow: inset 0 2px 0 rgba(255,255,255,.45), 0 30px 70px rgba(70,90,255,.4); }
.plan h3 { font-size: 24px; margin-top: 14px; }
.badge { font: 700 11px 'Satoshi', 'Plex Arabic', sans-serif; letter-spacing: .1em; text-transform: uppercase; padding: 7px 11px; border-radius: 999px; background: rgba(255,255,255,.14); white-space: nowrap; }
html[lang="ar"] .badge { letter-spacing: 0; font-size: 12px; }
.badge.hot { background: linear-gradient(135deg, #ff5a5f, #ff2d7a); box-shadow: 0 6px 18px rgba(255,60,110,.35); }
.plan-price { margin-top: 22px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; }
.plan-price span { font: 700 clamp(60px, 7.5vw, 92px)/1.08 'Satoshi', sans-serif; letter-spacing: -.02em; }
.plan-price small { color: var(--mist); font-size: 16px; }
.plan-price.small span { font-size: 52px; }
.plan ul { list-style: none; margin: 28px 0 22px; display: grid; gap: 12px; }
.plan li { display: flex; gap: 12px; font-size: 16px; }
.plan li svg { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--mint); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; margin-top: 2px; }
.plan-tekst { color: var(--mist); font-size: 16px; margin: 18px 0 26px; flex: 1; }
.plan-tekst b { color: #fff; }
.plan-main .plan-tekst { color: rgba(255,255,255,.88); }
.prijs-rij { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }
.plan-kop { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; flex-wrap: wrap; }
.schakel { display: inline-flex; padding: 4px; border-radius: 999px; background: rgba(0,0,0,.22); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.schakel button { border: 0; background: transparent; color: rgba(255,255,255,.8); font: 700 14px var(--kop); padding: 8px 16px; border-radius: 999px; cursor: pointer; }
.schakel button.aan { background: #fff; color: #2b2bb5; box-shadow: 0 4px 12px rgba(0,0,0,.18); }
.plan-main .plan-price span { font-size: clamp(72px, 9vw, 112px); }
.plan-main .plan-price small { color: rgba(255,255,255,.85); font-size: 18px; }
.jaar-noot[hidden] { display: none; }
.jaar-noot { display: inline-block; margin-top: 10px; padding: 6px 12px; border-radius: 999px; background: rgba(52,227,164,.22); color: #c9ffe9; font: 700 14px var(--kop); }
.plan-zin { margin-top: 16px; font: 700 clamp(18px, 2vw, 22px)/1.3 var(--kop); color: #fff; }
.plan-main ul { margin: 22px 0 28px; }
.plan-main li { color: rgba(255,255,255,.92); }
.plan-main li svg { stroke: #fff; }
.btn-wit { background: #fff; color: #2b2bb5; box-shadow: 0 14px 34px rgba(0,0,0,.25); }
.btn-wit:hover { box-shadow: 0 18px 44px rgba(0,0,0,.3); }
.plan.kastje .kit-ic { margin: 0; }
.plan.kastje h3 { margin-top: 22px; }
.plan-price.small span { font-size: 52px; }
.cmp b.streep { text-decoration: line-through; text-decoration-color: var(--koraal); text-decoration-thickness: 5px; color: #ff9a9d; }
.compare { margin-top: 56px; }
.compare h3 { font-size: 22px; margin-bottom: 18px; }
.compare-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cmp { padding: 30px; }
.cmp-naam { font: 500 13px var(--kop); letter-spacing: .12em; text-transform: uppercase; color: var(--mist); }
html[lang="ar"] .cmp-naam { letter-spacing: 0; font-size: 15px; }
.cmp b { display: block; font: 700 clamp(44px, 5vw, 64px)/1.08 'Satoshi', sans-serif; letter-spacing: -.02em; margin: 14px 0 10px; }
.cmp p { color: var(--mist); font-size: 16px; }
.cmp-old b { color: #ff8a8e; }
.cmp-new { border-color: rgba(52,227,164,.4); background: linear-gradient(160deg, rgba(52,227,164,.16), rgba(255,255,255,.04) 60%); }
.cmp-new b { color: var(--mint); }
.cmp-then { margin-top: 4px; color: var(--wit) !important; font-weight: 600; }
.cmp-slot { margin-top: 28px; font: 900 clamp(26px, 3.6vw, 44px)/1.2 var(--kop); letter-spacing: var(--ls-kop); text-wrap: balance; }
.cmp-meer { margin-top: 10px; color: var(--mist); font-size: 17px; }
.plans-note { margin-top: 24px; color: var(--mist2); font-size: 14px; }
@media (max-width: 900px) { .prijs-rij, .compare-row { grid-template-columns: minmax(0, 1fr); } }

/* demo */
.demo::before { content: ''; position: absolute; inset: 0; background: radial-gradient(800px 600px at 80% 40%, rgba(58,214,255,.12), transparent 70%), radial-gradient(700px 500px at 10% 80%, rgba(123,97,255,.18), transparent 70%); pointer-events: none; }
.demo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 80px); align-items: start; position: relative; }
.demo-board { margin-top: 48px; border-radius: 22px; box-shadow: 0 0 0 1px var(--lijn), 0 30px 60px rgba(0,0,0,.45); }
.form { padding: clamp(24px, 3.5vw, 40px); display: grid; gap: 16px; }
.f { display: grid; gap: 8px; font-size: 14px; font-weight: 600; color: var(--mist); }
.f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.f input, .f select, .f textarea { width: 100%; font: 400 16px var(--tekst); color: var(--wit); background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.14); border-radius: 14px; padding: 13px 15px; outline: none; transition: border-color .2s, box-shadow .2s; }
[dir="rtl"] .f input[dir="ltr"] { text-align: right; }
.f select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--mist) 50%), linear-gradient(135deg, var(--mist) 50%, transparent 50%); background-position: calc(100% - 20px) 55%, calc(100% - 15px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-inline-end: 36px; }
[dir="rtl"] .f select { background-position: 20px 55%, 15px 55%; }
.f select option { background: #15151f; }
.f textarea { resize: vertical; min-height: 90px; }
.f input:focus, .f select:focus, .f textarea:focus { border-color: var(--violet); box-shadow: 0 0 0 4px rgba(123,97,255,.25); }
.f input.fout, .f select.fout { border-color: var(--koraal); }
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); opacity: 0; pointer-events: none; }
.form-msg { font-size: 15px; min-height: 1px; }
.form-msg.ok { color: var(--mint); font-weight: 600; }
.form-msg.err { color: #ff8a8e; }
.form-priv { color: var(--mist2); font-size: 13px; }
@media (max-width: 900px) { .demo-grid { grid-template-columns: 1fr; } .demo-board { display: none; } }
@media (max-width: 480px) { .f2 { grid-template-columns: 1fr; } }

/* faq */
.faq-wrap { max-width: 880px; }
.faq-list { display: grid; gap: 12px; margin-top: 56px; }
.faq details { border-radius: 22px; padding: 0; }
.faq summary { list-style: none; cursor: pointer; padding: 22px 26px; padding-inline-end: 60px; font: 700 18px var(--kop); letter-spacing: var(--ls-kop2); position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ''; position: absolute; inset-inline-end: 26px; top: 50%; width: 12px; height: 12px; margin-top: -8px; border-right: 2px solid var(--mist); border-bottom: 2px solid var(--mist); transform: rotate(45deg); transition: transform .25s; }
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq details p { padding: 0 26px 24px; color: var(--mist); }

/* voet */
.foot { border-top: 1px solid var(--lijn); padding: 56px 0 calc(48px + env(safe-area-inset-bottom)); }
.foot-in { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 28px; }
.foot p { color: var(--mist); font-size: 15px; margin-top: 12px; }
.foot-langs a { min-width: auto; padding: 0 14px; }
.foot .copy { width: 100%; color: var(--mist2); font-size: 13px; margin-top: 0; }

/* in beeld schuiven (alleen met JS) */
html.js .rv { opacity: 0; transform: translateY(26px); transition: opacity .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1); }
html.js .rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .rv { opacity: 1; transform: none; transition: none; }
  html.js .speed .bar-t i { transform: none; transition: none; }
  .live i { animation: none; }
}

/* privacybeleid */
.pv-main { max-width: 820px; padding-top: 130px; padding-bottom: 80px; }
.pv-main h1 { font-size: clamp(40px, 6vw, 68px); }
.pv-datum { color: var(--mist2); margin-top: 14px; font-size: 15px; }
.pv-kort { padding: 28px 30px; margin: 40px 0 16px; }
.pv-kort h2 { font-size: 22px; font-weight: 700; max-width: none; }
.pv-kort .ticks { margin-top: 18px; gap: 14px; }
.pv-kort .ticks li span { color: var(--wit); font-size: 16px; }
.pv-sectie { margin-top: 44px; }
.pv-sectie h2 { font-size: clamp(24px, 3vw, 30px); font-weight: 700; max-width: none; margin-bottom: 14px; }
.pv-sectie p { color: var(--mist); font-size: 16.5px; line-height: 1.65; margin-top: 12px; }
.pv-sectie b, .pv-kort b { color: var(--wit); }
.pv-terug { margin-top: 56px; }