/* DRP BuildLab — stylesheet. Shared by every page; edit here, not per page. */
/* ─────────────────────────────────────────────
   RESET & BASE
───────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{
  background:#fff;
  color:#1a1f36;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:400;
  line-height:1.65;
  overflow-x:hidden;
}
a{text-decoration:none;color:inherit}

/* A6 — real cursor everywhere unless a fine pointer is present */
@media (hover:hover) and (pointer:fine){
  body,.btn,.srow,.wcard,.plan,.ex,.crow,.pbtn,.fsubmit,
  .soc-link,.wa-float,.lang-btn,.nav-tog,.nav-ov a,
  .nav-cta,.opp-act{cursor:none}
}
/* A6 — the site had zero focus rings in 700 lines of CSS */
:focus-visible{outline:2px solid var(--blue-d);outline-offset:3px}
::-webkit-scrollbar{width:2px}
::-webkit-scrollbar-track{background:#fff}
::-webkit-scrollbar-thumb{background:#4a90e2}

/* ─────────────────────────────────────────────
   TOKENS
───────────────────────────────────────────── */
:root{
  --bg:#ffffff;
  --bg2:#f5f7fc;
  --bg3:#ebeff8;
  --ink:#1a1f36;
  --ink2:#2d3454;
  --blue:#4a90e2;
  --blue-d:#2e74c9;
  --blue-dd:#245ca6;
  --blue-l:#7ab3ed;
  --muted:rgba(26,31,54,.62);
  --muted2:rgba(26,31,54,.45);
  --line:rgba(26,31,54,.09);
  --line-b:rgba(74,144,226,.2);
}

/* ─────────────────────────────────────────────
   SCROLL PROGRESS
───────────────────────────────────────────── */
#sprog{
  position:fixed;top:0;left:0;height:2px;
  background:var(--blue);z-index:9999;
  width:0;transform-origin:left;
  transition:width .05s linear;
}

/* ─────────────────────────────────────────────
   CURSOR
───────────────────────────────────────────── */
#cdot{
  position:fixed;top:0;left:0;z-index:9000;
  width:5px;height:5px;background:var(--blue);
  border-radius:50%;pointer-events:none;
  transform:translate(-50%,-50%);
}
#cring{
  position:fixed;top:0;left:0;z-index:8999;
  width:32px;height:32px;
  border:1.5px solid rgba(74,144,226,.45);
  border-radius:50%;pointer-events:none;
  transform:translate(-50%,-50%);
  transition:width .3s ease,height .3s ease,border-color .3s ease;
}
.ch #cring{width:50px;height:50px;border-color:rgba(74,144,226,.3)}
.ct #cring{width:60px;height:60px;border-color:transparent;background:rgba(74,144,226,.08)}

/* ─────────────────────────────────────────────
   LOADER
───────────────────────────────────────────── */
#loader{
  position:fixed;inset:0;z-index:10000;
  background:#fff;
  display:flex;align-items:center;justify-content:center;
  transition:opacity .6s ease .1s, visibility .6s ease .1s;
  /* A1 — hides itself even if the JS that removes it never runs */
  animation:loaderFailsafe 0s linear 3s forwards;
}
@keyframes loaderFailsafe{to{opacity:0;visibility:hidden;pointer-events:none}}
#loader.gone{opacity:0;visibility:hidden}
.ld-inner{display:flex;flex-direction:column;align-items:center;gap:8px}
.ld-mark{
  width:64px;height:64px;background:var(--blue);border-radius:12px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;
  opacity:0;transform:scale(.8);
  animation:ldPop .5s cubic-bezier(.16,1,.3,1) .2s forwards;
}
.ld-drp{font-size:1.4rem;font-weight:800;color:#fff;letter-spacing:-.02em;line-height:1}
.ld-bl{font-size:.38rem;font-weight:700;color:rgba(255,255,255,.8);letter-spacing:.12em;text-transform:uppercase}
.ld-name{
  font-size:.72rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);
  opacity:0;animation:ldUp .4s ease .5s forwards;
}
.ld-bar{width:48px;height:1.5px;background:var(--bg3);border-radius:2px;overflow:hidden;opacity:0;animation:ldUp .3s ease .6s forwards;margin-top:4px}
.ld-fill{height:100%;background:var(--blue);width:0;animation:ldFill 1.1s ease .7s forwards}
@keyframes ldPop{to{opacity:1;transform:scale(1)}}
@keyframes ldUp{to{opacity:1;transform:none}}
@keyframes ldFill{to{width:100%}}

/* ─────────────────────────────────────────────
   NAV
───────────────────────────────────────────── */
nav{
  position:fixed;top:0;left:0;right:0;z-index:500;
  padding:1.4rem 5vw;
  display:flex;justify-content:space-between;align-items:center;
  transition:padding .4s ease, background .5s ease, box-shadow .4s ease;
}
nav.s{
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  padding:1rem 5vw;
  box-shadow:0 1px 0 var(--line);
}
.nlogo{display:flex;align-items:center;gap:.7rem}
.nmark{
  width:32px;height:32px;background:var(--blue);border-radius:6px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1px;flex-shrink:0;
}
.nmark-drp{font-size:.72rem;font-weight:800;color:#fff;letter-spacing:-.01em;line-height:1}
.nmark-bl{font-size:.32rem;font-weight:700;color:rgba(255,255,255,.75);letter-spacing:.1em}
.nname{font-size:.92rem;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.nlinks{display:flex;align-items:center;gap:2rem}
.nlinks a{font-size:.8rem;font-weight:500;color:var(--muted);transition:color .2s;position:relative}
.nlinks a::after{content:'';position:absolute;bottom:-2px;left:0;width:0;height:1px;background:var(--blue);transition:width .3s ease}
.nlinks a:hover{color:var(--ink)}
.nlinks a:hover::after{width:100%}
/* C4 — scrollspy */
.nlinks a.active{color:var(--ink)}
.nlinks a.active::after{width:100%}
.nig svg{width:14px;height:14px}
.nig{display:inline-flex;align-items:center;gap:.35rem}

/* ─────────────────────────────────────────────
   HERO  — split top/bottom layout (Rejouice)
───────────────────────────────────────────── */
.hero{
  min-height:100vh;
  display:flex;flex-direction:column;
  justify-content:space-between;
  padding:6.5rem 5vw 4.5rem;
  position:relative;overflow:hidden;
  background:var(--bg);
}
/* Top-fade: white veil so fixed nav always readable */
.hero::after{
  content:'';position:absolute;top:0;left:0;right:0;
  height:120px;
  background:linear-gradient(to bottom,rgba(255,255,255,.98) 0%,transparent 100%);
  pointer-events:none;z-index:3;
}
.hero-bg-glow{
  position:absolute;inset:0;
  background:radial-gradient(ellipse 55% 55% at 70% 20%, rgba(74,144,226,.1) 0%, transparent 70%),
             radial-gradient(ellipse 35% 35% at 15% 75%, rgba(74,144,226,.07) 0%, transparent 70%);
  pointer-events:none;
}
.hero-grid{
  position:absolute;inset:0;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:88px 88px;
  mask-image:radial-gradient(ellipse 80% 70% at 50% 50%,black 20%,transparent 100%);
  opacity:.6;pointer-events:none;
}
/* Eye — top anchor, always below nav */
.hero-eye{
  position:relative;z-index:4;
  display:inline-flex;align-items:center;gap:.7rem;
  font-size:.65rem;font-weight:700;letter-spacing:.26em;text-transform:uppercase;
  color:var(--blue);
  opacity:0;animation:tUp .8s cubic-bezier(.16,1,.3,1) 1.6s forwards;
}
.hero-eye::before{content:'';display:block;width:28px;height:1.5px;background:var(--blue)}
/* Content — bottom anchor */
.hero-content{position:relative;z-index:2;width:100%}
.hero-h1{
  font-size:clamp(3.6rem,8.2vw,8.2rem);
  font-weight:800;line-height:.9;letter-spacing:-.04em;
  color:var(--ink);
  transform-origin:bottom left;
}
.hl{
  display:block;overflow:hidden;line-height:.92;
  /* Padding prevents top/bottom character clipping */
  padding:0.06em 0.06em 0.12em;
  margin:-0.06em -0.06em -0.12em;
}
.hl-i{
  display:block;transform:translateY(110%);
  animation:none;
}
.hl-i.in{
  animation:hlIn .85s cubic-bezier(.16,1,.3,1) forwards;
}
.hl-i.d1{animation-delay:.08s}
.hl-i.d2{animation-delay:.18s}
@keyframes hlIn{to{transform:translateY(0)}}
.h-accent{color:var(--blue)}
.h-light{font-style:italic;font-weight:300;color:var(--muted)}
.hero-foot{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:2rem;flex-wrap:wrap;margin-top:2.5rem;
  opacity:0;animation:tUp .8s cubic-bezier(.16,1,.3,1) 2s forwards;
}
.hero-sub{font-size:.97rem;color:var(--muted);max-width:400px;line-height:1.85}
.hero-acts{display:flex;gap:1rem;flex-wrap:wrap;align-items:center}
/* Logo float — right side, vertically centered in lower half */
.hero-logomark{
  position:absolute;right:6vw;bottom:18%;
  z-index:2;
  opacity:0;animation:tUp 1s cubic-bezier(.16,1,.3,1) 1.8s forwards;
}
.hero-logomark svg{
  width:130px;height:130px;
  filter:drop-shadow(0 20px 50px rgba(74,144,226,.22));
}
/* Scroll hint */
.shint{
  position:absolute;bottom:2.2rem;left:50%;transform:translateX(-50%);
  z-index:2;display:flex;flex-direction:column;align-items:center;gap:.45rem;
  opacity:0;animation:tUp .7s ease 2.2s forwards;
}
.shint span{font-size:.58rem;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--muted2)}
.shint-line{width:1px;height:38px;background:linear-gradient(to bottom,var(--blue),transparent);animation:shAnim 2.2s ease-in-out infinite}
@keyframes shAnim{
  0%{transform:scaleY(0);transform-origin:top}
  45%{transform:scaleY(1);transform-origin:top}
  46%{transform-origin:bottom}
  100%{transform:scaleY(0);transform-origin:bottom}
}
@keyframes tUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}

/* ─────────────────────────────────────────────
   ZOOM STRIP (pinned zoom section — Rejouice)
───────────────────────────────────────────── */
.zoom-section{
  height:220vh; /* longer = more dwell time per stat */
  position:relative;
}
.zoom-sticky{
  position:sticky;top:0;height:100vh;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;background:var(--bg2);
}
/* Corner editorial labels fill the empty space */
.zoom-corner{
  position:absolute;
  font-size:.58rem;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--muted2);
  pointer-events:none;
}
.zoom-corner-tl{top:2.2rem;left:5vw}
.zoom-corner-tr{top:2.2rem;right:5vw;text-align:right}
.zoom-corner-bl{bottom:2.2rem;left:5vw}
.zoom-corner-br{
  bottom:2.2rem;right:5vw;
  display:flex;align-items:center;gap:.5rem;
}
.zoom-corner-br::after{
  content:'';display:block;width:22px;height:1px;background:var(--muted2);
}
.zoom-inner{
  text-align:center;
  transform:scale(.55);opacity:0;
  transition:none;
  will-change:transform,opacity;
}
.zoom-tag{
  font-size:.62rem;font-weight:700;letter-spacing:.28em;
  text-transform:uppercase;color:var(--blue);margin-bottom:2rem;
}
.zoom-num{
  font-size:clamp(6rem,22vw,22rem);
  font-weight:800;letter-spacing:-.06em;color:var(--ink);
  line-height:.85;
}
.zoom-num span{color:var(--blue)}
.zoom-lbl{
  font-size:clamp(.9rem,1.6vw,1.4rem);color:var(--muted);
  margin-top:1.8rem;letter-spacing:.02em;max-width:480px;
}
.zoom-dots{display:flex;gap:.6rem;justify-content:center;margin-top:2.5rem}
.zoom-dot{width:6px;height:6px;border-radius:50%;background:var(--muted2);transition:background .3s,transform .3s}
.zoom-dot.a{background:var(--blue);transform:scale(1.4)}

/* ─────────────────────────────────────────────
   MARQUEE
───────────────────────────────────────────── */
.mq-wrap{
  overflow:hidden;
  border-top:1px solid var(--line-b);border-bottom:1px solid var(--line-b);
  padding:.95rem 0;background:var(--bg);
}
.mq-track{
  display:flex;gap:4rem;width:max-content;
  will-change:transform;
}
.mq-item{
  font-size:.7rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap;display:flex;align-items:center;gap:1.5rem;
}
.mqdot{width:4px;height:4px;border-radius:50%;background:var(--blue);display:inline-block;flex-shrink:0}

/* ─────────────────────────────────────────────
   SHARED SECTION
───────────────────────────────────────────── */
.sec{padding:6.5rem 5vw}
.sec-alt{background:var(--bg)}
/* C4 — anchor jumps land below the fixed nav, not underneath it */
section[id]{scroll-margin-top:90px}
/* Thin rule separates sections without heavy color change */
.sec+.sec,.sec+.sec-alt,.sec-alt+.sec,.sec-alt+.sec-alt{
  border-top:1px solid var(--line);
}
.stag{display:block;font-size:.6rem;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:var(--blue);margin-bottom:.85rem}
.sh{
  font-size:clamp(2.6rem,5.5vw,5.5rem);
  font-weight:800;line-height:1.0;letter-spacing:-.038em;color:var(--ink);
  margin-bottom:1.5rem;
}
.sh em{font-style:italic;font-weight:300;color:var(--muted)}
.ssub{font-size:.96rem;color:var(--muted);line-height:1.85;max-width:480px}

/* Page header — the pages that are not the home hero still need an h1 */
.phero{padding:9.5rem 5vw 3.75rem;border-bottom:1px solid var(--line)}
.phero-eye{font-size:.6rem;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:var(--blue);margin-bottom:.9rem}
.phero-h1{margin-bottom:0}
.phero-sub{margin-top:1.15rem;max-width:620px}

/* Closing CTA — sends people to the contact page from any other page */
.ctastrip{padding:6.5rem 5vw;text-align:center;border-top:1px solid var(--line)}
.ctastrip .sh{margin-bottom:0}
.ctastrip .ssub{margin:1.15rem auto 2.1rem;max-width:560px}
@media(max-width:700px){
  .phero{padding:7.5rem 6vw 2.75rem}
  .ctastrip{padding:4.5rem 6vw}
}

/* ─────────────────────────────────────────────
   REVEAL SYSTEM
───────────────────────────────────────────── */
.rv{opacity:0;transform:translateY(32px);transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .85s cubic-bezier(.16,1,.3,1)}
.rv.vv{opacity:1;transform:none}
.rv.fl{transform:translateX(-32px)}.rv.fl.vv{transform:none}
.rv.fr{transform:translateX(32px)}.rv.fr.vv{transform:none}
/* Scale-in reveal */
.rv.si{transform:scale(.93) translateY(16px)}.rv.si.vv{transform:none}
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}.d4{transition-delay:.42s}.d5{transition-delay:.54s}

/* ─────────────────────────────────────────────
   BUTTONS
───────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.88rem 2rem;font-family:inherit;font-size:.88rem;font-weight:700;
  border:none;transition:all .25s;
  position:relative;overflow:hidden;
}
.btn-p{background:var(--blue-d);color:#fff;box-shadow:0 8px 24px rgba(74,144,226,.28)}
.btn-p:hover{background:var(--blue-dd);transform:translateY(-2px);box-shadow:0 14px 36px rgba(74,144,226,.42)}
.btn-g{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
.btn-g:hover{border-color:var(--blue);color:var(--blue);background:rgba(74,144,226,.05)}

/* ─────────────────────────────────────────────
   PROCESS
───────────────────────────────────────────── */
.proc-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:5rem;flex-wrap:wrap;gap:2rem}
.steps{display:flex;flex-direction:column}
.srow{
  display:grid;grid-template-columns:68px 1fr 100px;gap:2.5rem;align-items:start;
  padding:2.4rem 0;border-bottom:1px solid var(--line);
  position:relative;overflow:hidden;
}
.srow:first-child{border-top:1px solid var(--line)}
.srow::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:0;
  background:rgba(74,144,226,.05);
  transition:width .6s cubic-bezier(.16,1,.3,1);z-index:0;
}
.srow:hover::before{width:100%}
.sn{font-size:.58rem;font-weight:700;letter-spacing:.22em;color:var(--blue);text-transform:uppercase;padding-top:.3rem;position:relative;z-index:1}
.sbody{position:relative;z-index:1}
.stitle{font-size:clamp(1.05rem,2vw,1.5rem);font-weight:700;letter-spacing:-.02em;margin-bottom:.45rem;color:var(--ink)}
.stxt{font-size:.86rem;color:var(--muted);line-height:1.85;max-width:460px}
.stime{font-size:.58rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);opacity:.45;text-align:right;padding-top:.35rem;position:relative;z-index:1}

/* ─────────────────────────────────────────────
   ABOUT
───────────────────────────────────────────── */
.ab-layout{display:grid;grid-template-columns:1fr 1fr;gap:9rem;align-items:center}
.ab-layout>*{min-width:0}
/* Smooth logo integration */
.ab-logo-wrap{
  margin-bottom:3rem;
  display:inline-flex;align-items:center;gap:1.2rem;
  padding:1.5rem 2rem;
  background:var(--bg2);border:1px solid var(--line);
  border-radius:12px;
}
.ab-logo-wrap svg{width:72px;height:72px;border-radius:10px;flex-shrink:0}
.ab-logo-text{display:flex;flex-direction:column}
.ab-logo-name{font-size:1.3rem;font-weight:800;letter-spacing:-.025em;color:var(--ink)}
.ab-logo-tag{font-size:.62rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--blue);margin-top:.1rem}
.ab-quote{font-size:clamp(1.3rem,2.2vw,2.2rem);font-weight:700;line-height:1.2;letter-spacing:-.025em;margin-bottom:1.25rem;color:var(--ink)}
.ab-quote em{font-style:italic;font-weight:300;color:var(--blue)}
.ab-sig{font-size:.62rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.ab-nums{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:2.5rem}
.abn{background:var(--bg);padding:1.6rem 1.8rem}
.abn-v{font-size:clamp(1.45rem,6.5vw,2.5rem);font-weight:800;letter-spacing:-.04em;color:var(--blue);line-height:1;margin-bottom:.2rem}
.abn-l{font-size:.68rem;color:var(--muted)}
.ab-right p{font-size:.92rem;color:var(--muted);line-height:1.9;margin-bottom:1.35rem}
.ab-right p strong{color:var(--ink);font-weight:700}
.pillars{display:flex;flex-direction:column;margin-top:2rem}
.pillar{display:flex;gap:1.4rem;padding:1.3rem 0;border-bottom:1px solid var(--line)}
.pillar>*{min-width:0}
.pillar:first-child{border-top:1px solid var(--line)}
.pn{font-size:.58rem;font-weight:700;color:var(--blue);letter-spacing:.1em;flex-shrink:0;padding-top:.12rem}
.ptitle{font-weight:700;font-size:.88rem;margin-bottom:.18rem;color:var(--ink)}
.pbody{font-size:.8rem;color:var(--muted);line-height:1.72}

/* ─────────────────────────────────────────────
   WHY
───────────────────────────────────────────── */
.wgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:5rem}
.wcard{
  background:var(--bg);padding:2.5rem;position:relative;overflow:hidden;
  transition:background .3s;
}
.wcard::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.16,1,.3,1)}
.wcard:hover{background:var(--bg2)}
.wcard:hover::after{transform:scaleX(1)}
.wico{width:40px;height:40px;background:rgba(74,144,226,.08);border-radius:7px;display:flex;align-items:center;justify-content:center;margin-bottom:1.2rem}
.wico svg{width:19px;height:19px;color:var(--blue)}
.wtitle{font-size:.96rem;font-weight:700;margin-bottom:.42rem;letter-spacing:-.01em;color:var(--ink)}
.wbody{font-size:.82rem;color:var(--muted);line-height:1.78}

/* ─────────────────────────────────────────────
   OPPORTUNITY COST
───────────────────────────────────────────── */
.opp-layout{display:grid;grid-template-columns:1fr 1fr;gap:8rem;align-items:start}
.opp-layout>*{min-width:0}
.opp-box{
  background:var(--bg2);border:1px solid var(--line-b);padding:3rem;
  position:relative;
}
.opp-box::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--blue),transparent)}
.orow{display:flex;justify-content:space-between;align-items:center;padding:.82rem 0;border-bottom:1px solid var(--line);gap:1rem}
.orow:last-child{border-bottom:none}
.olbl{font-size:.83rem;color:var(--muted)}
.oval{font-size:.92rem;font-weight:700;color:var(--ink)}
.oval.n{color:#dc2626}
.oval.p{color:#16a34a}
.ototl{margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--line-b);display:flex;justify-content:space-between;align-items:baseline}
.otlbl{font-size:.58rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.otval{font-size:2rem;font-weight:800;color:var(--blue);letter-spacing:-.035em}
.onote{margin-top:1.5rem;padding:1.15rem 1.4rem;background:var(--bg3);border-left:2.5px solid var(--blue);font-size:.82rem;color:var(--muted);line-height:1.75}
.onote strong{color:var(--ink);font-weight:700}
.opoints{display:flex;flex-direction:column}
.opt{display:flex;gap:1.25rem;padding:1.3rem 0;border-bottom:1px solid var(--line)}
.opt:first-child{border-top:1px solid var(--line)}
.opt-title{font-weight:700;font-size:.88rem;margin-bottom:.18rem;color:var(--ink)}
.opt-body{font-size:.8rem;color:var(--muted);line-height:1.7}
.opt-marker{width:6px;height:6px;border-radius:50%;background:var(--blue);flex-shrink:0;margin-top:.45rem}

/* ─────────────────────────────────────────────
   COMPETITORS
───────────────────────────────────────────── */
.ctbl{width:100%;margin-top:5rem;border:1px solid var(--line);overflow:hidden}
.chd{display:grid;grid-template-columns:2fr 1.2fr 1.2fr 1fr;background:var(--bg2);border-bottom:1px solid var(--line)}
.crow{display:grid;grid-template-columns:2fr 1.2fr 1.2fr 1fr;border-bottom:1px solid var(--line);transition:background .25s}
.crow:last-child{border-bottom:none}
.crow:hover{background:var(--bg2)}
.crow.us{background:rgba(74,144,226,.05);border-left:2.5px solid var(--blue)}
.crow.us:hover{background:rgba(74,144,226,.1)}
.chc{padding:.72rem 1.1rem;font-size:.58rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);border-right:1px solid var(--line);display:flex;align-items:center;min-width:0}
.chc:last-child{border-right:none}
.cc{padding:1.1rem 1.1rem;font-size:.83rem;display:flex;align-items:center;border-right:1px solid var(--line);min-width:0;overflow-wrap:break-word}
.cc:last-child{border-right:none}
/* Flex items default to min-width:auto, so min-width:0 on .cc alone did not
   let a long price shrink -- it stayed at its min-content width, declared
   itself clipped, and sent fitTable() into its pinned-and-scrolling mode.
   Rp 16.417.744-Rp 51.305.449 needs to be allowed to wrap. */
.cc>*,.chc>*{min-width:0;overflow-wrap:anywhere}
.cnm{font-weight:700;color:var(--ink)}
.cnm.u{color:var(--blue)}
.cbdg{display:inline-block;background:var(--blue);color:#fff;font-size:.52rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:.14rem .48rem;margin-left:.45rem;border-radius:2px;vertical-align:middle}
.ck{color:#16a34a;font-weight:700}
.cx{color:var(--muted2)}
.cp{font-weight:700;color:var(--ink)}
.cp.g{color:var(--blue)}
.cp.b{color:var(--muted2)}
.cnote{margin-top:1.5rem;padding:1.1rem 1.4rem;background:var(--bg2);border:1px solid var(--line-b);font-size:.82rem;color:var(--muted);line-height:1.78}
.cnote strong{color:var(--ink)}

/* ─────────────────────────────────────────────
   PRICING
───────────────────────────────────────────── */
.pgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:5rem}
.pgrid>*{min-width:0}
.plan{background:var(--bg);padding:3rem 2.5rem;position:relative;transition:background .3s}
.plan:hover{background:var(--bg2)}
.plan.feat{background:var(--bg2);border:1px solid var(--line-b);box-shadow:0 0 50px rgba(74,144,226,.08);margin:-1px;z-index:1}
.pbadge{display:inline-block;background:var(--blue);color:#fff;font-size:.56rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:.24rem .72rem;margin-bottom:1.5rem}
.pname{font-size:.6rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin-bottom:.7rem}
.pprice{font-size:3.5rem;font-weight:800;letter-spacing:-.04em;line-height:1;margin-bottom:.2rem;color:var(--ink)}
.pprice sup{font-size:1.2rem;vertical-align:super;font-weight:600}
.pperiod{font-size:.8rem;color:var(--muted);margin-bottom:2rem;padding-bottom:1.4rem;border-bottom:1px solid var(--line)}
.pfeats{list-style:none;margin-bottom:2rem}
.pfeats li{font-size:.83rem;color:rgba(26,31,54,.65);padding:.4rem 0;display:flex;align-items:flex-start;gap:.6rem;border-bottom:1px solid rgba(26,31,54,.05)}
.pfeats li::before{content:'✓';color:var(--blue);font-weight:700;flex-shrink:0}
.pbtn{display:block;text-align:center;padding:.88rem;font-size:.84rem;font-weight:700;letter-spacing:.03em;transition:all .25s}
.pbtn.f{background:var(--blue-d);color:#fff;box-shadow:0 6px 20px rgba(74,144,226,.26)}
.pbtn.f:hover{background:var(--blue-dd);box-shadow:0 10px 32px rgba(74,144,226,.4)}
.pbtn.o{border:1.5px solid var(--line);color:var(--ink)}
.pbtn.o:hover{border-color:var(--blue);color:var(--blue);background:rgba(74,144,226,.05)}
.exgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:1.4rem}
.ex{background:var(--bg);padding:1.2rem 1.4rem;display:flex;justify-content:space-between;align-items:center;gap:.9rem;transition:background .25s}
.ex:hover{background:var(--bg2)}
.ex-n{font-size:.83rem;color:var(--muted);line-height:1.45}
.ex-p{font-size:.86rem;font-weight:700;color:var(--blue-d);flex-shrink:0}
/* C2 — 11 items in a 4-col grid: the closer spans 2 so the last row is flush */
.ex-wide{grid-column:span 2}
/* Footer social row — three links now, so let them wrap on narrow screens */
.ft-socials{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap}
.ft-follow{font-size:.7rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.4)}
.addon>*{min-width:0}
.addon{
  margin-top:1.6rem;border:1px solid var(--line);background:var(--bg2);
  padding:1.6rem 1.8rem;display:flex;justify-content:space-between;
  align-items:center;gap:1.6rem;flex-wrap:wrap;
}
.addon-tag{font-size:.6rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--blue-d);display:block;margin-bottom:.5rem}
.addon-n{font-size:1.15rem;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.addon-b{font-size:.84rem;color:var(--ink2);line-height:1.6;margin-top:.45rem;max-width:520px}
.addon-r{display:flex;align-items:baseline;gap:.9rem;flex-shrink:0;flex-wrap:wrap;min-width:0}
.addon-p{font-size:clamp(1.1rem,5vw,1.5rem);font-weight:800;letter-spacing:-.03em;color:var(--blue-d);white-space:nowrap}
.addon-p span{font-size:.78rem;font-weight:600;color:var(--ink2);letter-spacing:0}
.addon-or{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.16em}

/* ─────────────────────────────────────────────
   SOCIAL
───────────────────────────────────────────── */
.soc-sec{background:var(--bg2);padding:8rem 5vw;display:grid;grid-template-columns:1fr 1fr;gap:7rem;align-items:center}
.soc-card{
  position:relative;aspect-ratio:1;max-width:400px;
  background:var(--blue);border-radius:18px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.4rem;overflow:hidden;
  box-shadow:0 32px 80px rgba(74,144,226,.25);
}
.soc-card::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 40% 35%,rgba(255,255,255,.15) 0%,transparent 65%)}
.soc-big{font-size:6rem;font-weight:800;letter-spacing:-.04em;color:#fff;line-height:1;position:relative;z-index:1}
.soc-sub{font-size:1rem;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:rgba(255,255,255,.8);position:relative;z-index:1}
/* .soc-text IS the paragraph. The old rule was `.ig-text p`, a descendant
   selector that matched nothing at all, so both paragraphs here rendered
   with browser defaults: full-strength colour, tight leading, no gap. */
.soc-text{font-size:.92rem;color:var(--muted);line-height:1.9;margin-bottom:1.3rem}
/* A converted price can be far longer than the euro figure the columns were
   sized for -- "Rp 8.535.395" against "€499". When that happens the table
   scrolls sideways instead of clipping, since the figures are the whole point
   of it. locale.js measures the columns and sets these, and only adds
   .scrolls when the content genuinely does not fit, so the euro layout is
   untouched. Every row gets the same explicit template, which is what keeps
   the columns aligned once they stop being fr-proportional. */
.ctbl.scrolls{overflow-x:auto;-webkit-overflow-scrolling:touch}
.ctbl.scrolls .chd,.ctbl.scrolls .crow{
  grid-template-columns:var(--c1) var(--c2) var(--c3);
  min-width:max-content;
}
.ctbl.scrolls .cc,.ctbl.scrolls .chc{white-space:nowrap}
.ctbl.measuring .cc,.ctbl.measuring .chc{white-space:nowrap}

/* Wraps rather than overflows: three buttons do not fit one line on a phone. */
.soc-links{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:.4rem}
.soc-link{
  display:inline-flex;align-items:center;gap:.7rem;
  border:1.5px solid var(--line-b);color:var(--ink);
  padding:.88rem 1.7rem;font-size:.86rem;font-weight:600;
  transition:all .25s;
}
.soc-link:hover{background:var(--blue);color:#fff;border-color:var(--blue);box-shadow:0 8px 26px rgba(74,144,226,.28)}
.soc-link svg{width:18px;height:18px}

/* ─────────────────────────────────────────────
   CONTACT
───────────────────────────────────────────── */
.ct-layout{display:grid;grid-template-columns:1fr 1fr;gap:8rem;align-items:start}
.ct-layout>*{min-width:0}
.ct-lede{font-size:.92rem;color:var(--muted);line-height:1.9;margin-top:1.1rem;margin-bottom:2rem}
.ct-items{display:flex;flex-direction:column}
.ct-item{display:flex;gap:1.2rem;align-items:flex-start;padding:1.2rem 0;border-bottom:1px solid var(--line)}
.ct-item:first-child{border-top:1px solid var(--line)}
.ci-ico{color:var(--blue);flex-shrink:0;margin-top:.1rem}
.ci-lbl{font-size:.58rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:.22rem}
.ci-val{font-size:.88rem;color:var(--ink)}
.ci-val a{color:var(--blue)}
.fwrap{background:var(--bg2);border:1px solid var(--line);padding:3rem;position:relative}
.fwrap::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--blue-d),var(--blue-l))}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.field{display:flex;flex-direction:column;gap:.38rem;margin-bottom:.9rem}
.field label{font-size:.58rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.field input,.field select,.field textarea{
  background:#fff;border:1px solid var(--line);color:var(--ink);
  padding:.82rem 1rem;font-family:inherit;font-size:.88rem;
  outline:none;transition:border-color .25s,box-shadow .25s;width:100%;appearance:none;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:rgba(74,144,226,.38);box-shadow:0 0 0 3px rgba(74,144,226,.06)}
.field input::placeholder,.field textarea::placeholder{color:var(--muted2)}
.field select option{background:#fff;color:var(--ink)}
.field textarea{min-height:96px;resize:none}
.fsubmit{
  width:100%;margin-top:.4rem;background:var(--blue-d);color:#fff;border:none;
  padding:.95rem;font-family:inherit;font-size:.88rem;font-weight:700;
  letter-spacing:.04em;transition:all .25s;box-shadow:0 8px 22px rgba(74,144,226,.24);
}
.fsubmit:hover{background:var(--blue-dd);transform:translateY(-1px);box-shadow:0 12px 34px rgba(74,144,226,.38)}
/* A2 — failed submissions get an error state, not the success screen */
.ferr{display:none;margin-top:1.1rem;padding:1.1rem 1.3rem;background:rgba(220,38,38,.05);border:1px solid rgba(220,38,38,.25);border-left:3px solid #dc2626}
.ferr.on{display:block}
.ferr-t{font-size:.86rem;font-weight:700;color:#b91c1c;margin-bottom:.35rem}
.ferr-b{font-size:.81rem;color:var(--ink2);line-height:1.75}
.ferr-b a{color:var(--blue-d);font-weight:700;text-decoration:underline}
/* A10 — GDPR consent */
.fconsent{display:flex;align-items:flex-start;gap:.65rem;margin:.35rem 0 1.1rem}
.fconsent input{width:16px;height:16px;flex-shrink:0;margin-top:.16rem;appearance:auto;accent-color:var(--blue-d)}
.fconsent label{font-size:.78rem;font-weight:400;letter-spacing:0;text-transform:none;color:var(--muted);line-height:1.65}
.succ{display:none;text-align:center;padding:3rem 1rem}
.succ.on{display:block}
.succ-chk{font-size:2.2rem;color:var(--blue);margin-bottom:.9rem}
.succ h3{font-size:1.4rem;font-weight:800;color:var(--ink);margin-bottom:.45rem}
.succ p{font-size:.88rem;color:var(--muted)}

/* ─────────────────────────────────────────────
   WHATSAPP FLOAT
───────────────────────────────────────────── */
.wa-float{
  position:fixed;bottom:2rem;right:2rem;z-index:800;
  width:54px;height:54px;background:#25D366;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 22px rgba(37,211,102,.42);
  transition:transform .22s,box-shadow .22s;
}
.wa-float:hover{transform:scale(1.1);box-shadow:0 8px 32px rgba(37,211,102,.58)}
.wa-float svg{width:28px;height:28px;fill:#fff}

/* ─────────────────────────────────────────────
   FOOTER
───────────────────────────────────────────── */
footer{background:var(--ink);padding:4rem 5vw 2.5rem;color:#fff}
.ft-top{display:flex;justify-content:space-between;gap:3rem;flex-wrap:wrap;padding-bottom:3rem;border-bottom:1px solid rgba(255,255,255,.07);margin-bottom:2.5rem}
.ft-brand{display:flex;align-items:center;gap:.75rem;margin-bottom:.65rem}
.ft-mark{width:40px;height:40px;background:var(--blue);border-radius:7px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;flex-shrink:0}
.ft-mark-drp{font-size:.8rem;font-weight:800;color:#fff;letter-spacing:-.01em;line-height:1}
.ft-mark-bl{font-size:.34rem;font-weight:700;color:rgba(255,255,255,.7);letter-spacing:.1em}
.ft-name{font-size:1.05rem;font-weight:800;letter-spacing:-.02em;color:#fff}
.ft-tag{font-size:.72rem;color:rgba(255,255,255,.5)}
.ft-cols{display:flex;gap:4rem;flex-wrap:wrap}
.ft-col h4{font-size:.58rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:.9rem}
.ft-col a{display:block;font-size:.8rem;color:rgba(255,255,255,.62);margin-bottom:.45rem;transition:color .22s}
.ft-col a:hover{color:#fff}
.ft-bot{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.ft-copy{font-size:.7rem;color:rgba(255,255,255,.55)}
.ft-ig{display:inline-flex;align-items:center;gap:.45rem;font-size:.76rem;color:rgba(255,255,255,.6);transition:color .22s}
.ft-ig:hover{color:var(--blue-l)}
.ft-ig svg{width:13px;height:13px}

/* ─────────────────────────────────────────────
   WORD REVEAL
───────────────────────────────────────────── */
.wr-w{
  display:inline-block;overflow:hidden;vertical-align:bottom;
  /* A single long word must not be able to set a floor wider than the
     screen. German and Indonesian compounds did exactly that at 320px. */
  max-width:100%;overflow-wrap:break-word;word-break:break-word;
  /* Prevent edge-character clipping (negative letter-spacing + descenders) */
  padding:0.1em 0.08em 0.22em;
  margin:-0.1em -0.08em -0.22em;
}
.wr{display:inline-block;transform:translateY(110%);transition:transform .72s cubic-bezier(.16,1,.3,1)}
.wr.in{transform:translateY(0)}

/* ─────────────────────────────────────────────
   LANGUAGE SWITCHER
───────────────────────────────────────────── */
.nav-right{display:flex;align-items:center;gap:1rem;min-width:0}
/* The switcher now lists seven languages, not four. min-width:0 lets it
   shrink below its content size (the flexbox default is auto, which never
   shrinks), and overflow-x:auto turns any width it cannot fit into a
   horizontal scroll instead of pushing the hamburger off-screen -- which is
   what happened at 320-360px before this. nav-tog is flex-shrink:0 so it is
   never the thing that gives, whatever the language count grows to. */
/* Market picker. A native select rather than a row of codes: 17 markets do
   not fit a nav bar, and the OS picker is better on a phone than anything
   custom. min-width:0 lets it shrink so it can never push the hamburger off
   screen, which a row of buttons previously did at 320px. */
.market-sw{display:flex;align-items:center;min-width:0}
.market-sw select{
  -webkit-appearance:none;appearance:none;
  background:none;border:1px solid var(--line);border-radius:3px;
  padding:.26rem 1.35rem .26rem .5rem;max-width:11rem;
  font-family:inherit;font-size:.68rem;font-weight:700;letter-spacing:.04em;
  color:var(--muted);cursor:pointer;transition:all .2s;
  text-overflow:ellipsis;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .45rem center;background-size:8px;
}
.market-sw select:hover{color:var(--ink);border-color:var(--line-b)}
.market-sw select:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
@media(max-width:560px){
  .market-sw select{max-width:7.5rem;font-size:.64rem;padding:.22rem 1.2rem .22rem .4rem}
}

.lang-sw{
  display:flex;align-items:center;gap:.25rem;
  min-width:0;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
}
.lang-sw::-webkit-scrollbar{display:none}
.lang-btn{
  background:none;border:1px solid transparent;border-radius:3px;
  padding:.22rem .45rem;font-family:inherit;font-size:.68rem;font-weight:700;
  letter-spacing:.06em;color:var(--muted);transition:all .2s;
  text-transform:uppercase;line-height:1;flex-shrink:0;
}
.lang-btn:hover{color:var(--ink);border-color:var(--line)}
.lang-btn.active{color:var(--blue);border-color:rgba(74,144,226,.35);background:rgba(74,144,226,.06)}

/* ─────────────────────────────────────────────
   MOBILE NAV  (A4 + C4)
───────────────────────────────────────────── */
.nav-tog{
  display:none;width:34px;height:30px;padding:0;background:none;border:none;
  flex-direction:column;justify-content:center;align-items:flex-end;gap:5px;
  flex-shrink:0;
}
.nav-tog span{
  display:block;height:2px;width:22px;background:var(--ink);border-radius:2px;
  transition:transform .3s cubic-bezier(.16,1,.3,1),opacity .2s,width .3s;
}
.nav-tog span:nth-child(2){width:15px}
.nav-tog[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-tog[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-tog[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);width:22px}
.nav-ov{
  position:fixed;inset:0;z-index:450;
  background:rgba(255,255,255,.985);
  -webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);
  display:flex;flex-direction:column;justify-content:center;
  padding:7rem 8vw 3rem;overflow-y:auto;
  opacity:0;visibility:hidden;transform:translateY(-10px);
  transition:opacity .34s cubic-bezier(.16,1,.3,1),visibility .34s,transform .34s cubic-bezier(.16,1,.3,1);
}
.nav-ov.on{opacity:1;visibility:visible;transform:none}
.nav-ov a{
  display:block;font-size:clamp(1.5rem,6.4vw,2.2rem);font-weight:800;letter-spacing:-.032em;
  line-height:1.25;color:var(--ink);padding:.55rem 0;border-bottom:1px solid var(--line);
  opacity:0;transform:translateY(20px);
  transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1),color .2s;
}
.nav-ov.on a{opacity:1;transform:none}
.nav-ov.on a:nth-child(1){transition-delay:.05s}
.nav-ov.on a:nth-child(2){transition-delay:.10s}
.nav-ov.on a:nth-child(3){transition-delay:.15s}
.nav-ov.on a:nth-child(4){transition-delay:.20s}
.nav-ov.on a:nth-child(5){transition-delay:.25s}
.nav-ov.on a:nth-child(6){transition-delay:.30s}
.nav-ov.on a:nth-child(7){transition-delay:.35s}
.nav-ov a:hover,.nav-ov a.active{color:var(--blue-d)}
.nav-ov .nav-ov-ig{
  display:flex;align-items:center;gap:.55rem;
  font-size:.92rem;font-weight:600;letter-spacing:0;color:var(--muted);
  border-bottom:none;margin-top:1.1rem;
}
.nav-ov .nav-ov-ig svg{width:16px;height:16px;flex-shrink:0}
.nav-ov .nav-ov-cta{
  margin-top:1.4rem;border-bottom:none;text-align:center;
  background:var(--blue-d);color:#fff;font-size:1rem;padding:1rem;
  box-shadow:0 8px 24px rgba(74,144,226,.28);
}
.nav-ov .nav-ov-cta:hover{background:var(--blue-dd);color:#fff}
body.nav-open{overflow:hidden}

/* ─────────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────────── */
/* Five nav links + CTA + language switcher gets tight before 980px */
@media(max-width:1180px){
  .nlinks{gap:1.15rem}
  .nlinks a{font-size:.76rem}
}
@media(max-width:1100px){
  .ab-layout,.opp-layout,.ct-layout{grid-template-columns:1fr;gap:4rem}
  .shint{display:none}
  .soc-sec{grid-template-columns:1fr;gap:3rem;padding:6rem 6vw}
  .soc-card{max-width:100%;aspect-ratio:2.5/1}
  .soc-big{font-size:4rem}
}
@media(max-width:980px){
  .nlinks{display:none}
  .nav-tog{display:flex}
}
@media(max-width:768px){
  /* Reveal upward, not sideways.
   *
   * .rv.fl and .rv.fr enter from translateX(-32px)/(+32px). On a wide
   * screen the 5vw gutter absorbs that; at 320px there is no gutter, so a
   * full-width block sat 32px past the edge and made the document 32px
   * wider until the section revealed -- a horizontal scrollbar that came
   * and went with the scroll position. Vertical entry cannot overflow,
   * and it is what .rv already does everywhere else. */
  .rv.fl,.rv.fr{transform:translateY(32px)}
  .rv.fl.vv,.rv.fr.vv{transform:none}
  .sec{padding:5rem 6vw}
  .soc-sec{padding:6rem 6vw}
  .hero{padding:5.5rem 6vw 4rem}
  .hero-logomark{display:none}
  .hero-h1{font-size:clamp(3rem,11vw,5.5rem)}
  .hero-foot{flex-direction:column;align-items:flex-start;gap:1.5rem}
  .proc-head{flex-direction:column}
  .srow{grid-template-columns:56px 1fr;gap:1.5rem}
  .stime{display:none}
  .wgrid{grid-template-columns:1fr 1fr}
  .pgrid{grid-template-columns:1fr}
  .plan{padding:2.5rem 1.8rem}
  .plan.feat{margin:0}
  .pprice{font-size:3.5rem}
  .pprice[style]{font-size:1.9rem !important}
  .exgrid{grid-template-columns:1fr 1fr}
  .chd,.crow{grid-template-columns:2fr 1fr 1fr}
  .chc:nth-child(n+4),.cc:nth-child(n+4){display:none}
  .ft-cols{gap:2.5rem}
  .zoom-section{height:200vh}
  .zoom-inner{transform:scale(.65)}
  /* FAQ cards full-width on mobile */
  #faq details{padding:1.1rem 1.2rem !important}
  #faq details summary{font-size:.98rem !important}
  /* Services intro + helper text readable */
  #diensten .ssub{font-size:.95rem}
}
@media(max-width:560px){
  .nav-right{gap:.7rem}
  .lang-btn{padding:.2rem .3rem;font-size:.64rem}
}
@media(max-width:480px){
  .wgrid{grid-template-columns:1fr}
  .exgrid{grid-template-columns:1fr}
  .ex-wide{grid-column:span 1}
  .addon{flex-direction:column;align-items:flex-start;padding:1.3rem 1.4rem}
  /* Two converted figures do not fit side by side on a phone. */
  .ab-nums{grid-template-columns:1fr}
  .abn{padding:1.25rem 1.3rem}
  .plan{padding:2rem 1.4rem}
  .pprice{font-size:clamp(1.9rem,9vw,3rem)}
  .pprice[style]{font-size:1.7rem !important;line-height:1.1 !important}
  .pname{font-size:1.15rem}
  .pfeats li{font-size:.88rem}
  .pbtn{font-size:.9rem;padding:.9rem 1.2rem}
  /* Footer columns stack on very small */
  .ft-cols{flex-direction:column;gap:2rem}
  .ft-top{flex-direction:column;gap:2.5rem}

  /* Market overview — 1.1rem of cell padding left the value columns with
     almost no room, so prices wrapped mid-figure.

     Narrowing the padding was not enough once a converted figure arrived.
     Three columns leave about 93px each and Rp 163.895.984 needs 100, so it
     still broke mid-number: "Rp 10.223." on one line, "012" on the next,
     which reads as a different price. Two columns give the price column the
     room to keep each figure whole. Provider against start price is the
     comparison this table exists to make; maintenance is stated in the copy
     beside it and on the pricing page. */
  .chd,.crow{grid-template-columns:1.35fr 1fr}
  .chc:nth-child(n+3),.cc:nth-child(n+3){display:none}
  .chc{font-size:.52rem;letter-spacing:.08em;padding:.62rem .55rem}
  .cc{font-size:.78rem;padding:.85rem .55rem}
  .cbdg{margin-left:0;margin-top:.32rem}
  .cnm{display:flex;flex-direction:column;align-items:flex-start}

  /* Cost calculation — 3rem of padding each side is 96px of a 320px screen.
     The total also stacks: "+EUR7.473/jaar" is one unbreakable token and at
     2rem it alone is wider than the remaining space. */
  .opp-box{padding:1.5rem 1.2rem}
  .orow{gap:.7rem}
  .olbl{font-size:.78rem;min-width:0}
  .oval{font-size:.85rem;flex-shrink:0}
  .ototl{flex-direction:column;align-items:flex-start;gap:.45rem}
  .otval{font-size:1.6rem}
  .onote{padding:1rem 1.1rem;font-size:.78rem}
}

@media(max-width:360px){
  .chc{font-size:.48rem;letter-spacing:.04em;padding:.55rem .42rem}
  .cc{font-size:.72rem;padding:.75rem .42rem}
  .otval{font-size:1.35rem}
  .opp-box{padding:1.3rem 1rem}
}

/* ─────────────────────────────────────────────
   STICKY MOBILE CTA
───────────────────────────────────────────── */
/* Phones had no persistent call to action: the hero buttons scroll away and
   the next one is a whole section further down. Phone-only — desktop keeps
   the nav CTA in view the entire time. */
.scta{
  position:fixed;left:0;right:0;bottom:0;z-index:850;
  display:none;align-items:center;justify-content:space-between;gap:.9rem;
  padding:.7rem 1rem;padding-bottom:calc(.7rem + env(safe-area-inset-bottom,0px));
  background:rgba(255,255,255,.97);border-top:1px solid var(--line-b);
  box-shadow:0 -6px 24px rgba(26,31,54,.08);
  visibility:hidden;transform:translateY(110%);
  transition:transform .34s cubic-bezier(.16,1,.3,1),visibility 0s .34s;
}
.scta.on{visibility:visible;transform:none;transition:transform .34s cubic-bezier(.16,1,.3,1)}
.scta-txt{font-size:.78rem;font-weight:600;color:var(--ink);line-height:1.3;min-width:0;overflow-wrap:anywhere}
.scta-btn{
  flex-shrink:0;background:var(--blue-d);color:#fff;
  padding:.72rem 1.1rem;font-size:.82rem;font-weight:700;white-space:nowrap;
  box-shadow:0 4px 16px rgba(74,144,226,.3);
}
/* Converted-price disclaimer. Sits with the prices, not in the footer. */
.cur-note{
  margin-top:1rem;font-size:.74rem;line-height:1.65;color:var(--muted2);
}
@media(max-width:768px){
  .scta{display:flex}
  /* Lift the WhatsApp button clear of the bar instead of stacking the two. */
  body.scta-on .wa-float{bottom:5.6rem}
}

/* ─────────────────────────────────────────────
   ANNOTATION RAIL — the page's own folio

   The zoom section already had this idea and used it once: four corner
   labels naming where you are while the statistic holds the middle. This is
   that annotation plane extended over the whole document.

   It is a second plane, not decoration. The strip carries every section
   label laid out in document order and translates at roughly a tenth of
   scroll speed, so the label sitting against the blue playhead is always the
   section you are actually in, with what came before still visible above and
   what is coming below. That ratio is not a taste value -- it is
   (strip travel / document travel), which is what makes the mapping true.

   Vertical-rl rather than a rotation: Latin turns ninety degrees and reads
   top-to-bottom, which is the magazine convention, and Japanese sets
   properly vertical instead of being tipped on its side. One rule, ten
   languages.

   Desktop only, and only in the gutter .sec already reserves (5vw). Below
   1280px that gutter is narrower than the strip, so the rail is not there.
───────────────────────────────────────────── */
.arail{
  position:fixed;left:20px;top:13vh;bottom:13vh;width:30px;
  z-index:400;pointer-events:none;
  opacity:0;transition:opacity .55s ease;
}
.arail.on{opacity:1}
.arail-line{position:absolute;left:14px;top:0;bottom:0;width:1px;background:var(--line)}
/* The playhead. Whatever sits against it is where you are. */
.arail-mark{position:absolute;left:8px;top:60%;width:13px;height:1px;background:var(--blue)}
.arail-mark::before{
  content:'';position:absolute;left:-3px;top:-2px;
  width:5px;height:5px;border-radius:50%;background:var(--blue);
}
.arail-strip{
  position:absolute;inset:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%);
}
.arail-items{position:absolute;left:0;top:0;width:100%;will-change:transform}
.arail-i{
  position:absolute;left:0;width:100%;
  display:flex;align-items:center;gap:.6rem;
  writing-mode:vertical-rl;
  font-size:.56rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted2);opacity:.5;
  transform:translateY(-50%);
  transition:color .4s ease,opacity .4s ease;
  white-space:nowrap;
}
.arail-i i{font-style:normal;font-variant-numeric:tabular-nums;letter-spacing:.08em}
.arail-i.on{opacity:1;color:var(--blue)}
.arail-i.on b{color:var(--ink)}
@media(max-width:1279px){.arail{display:none}}

/* ─────────────────────────────────────────────
   NAV CTA — the desktop conversion path

   Desktop had none. Four text links and a market picker, with the nearest
   button 7.4 screens down the home page; mobile meanwhile had a sticky bar
   and an overlay CTA. This closes that, and it closes the 769-980px band
   where .nlinks has already gone and .scta has not yet arrived.

   Copy comes from nav.cta via data-nav, which the mobile overlay was already
   using -- so it arrived translated into all ten languages and cost nothing.
   Polish sets it longest by some margin, which is what max-width is sized
   against.
───────────────────────────────────────────── */
.nav-cta{
  display:inline-flex;align-items:center;
  background:var(--blue-d);color:#fff;
  font-size:.72rem;font-weight:700;letter-spacing:.01em;
  padding:.52rem .9rem;border-radius:4px;
  box-shadow:0 4px 14px rgba(74,144,226,.26);
  transition:transform .25s ease,box-shadow .25s ease,background .25s ease;
  white-space:nowrap;max-width:15rem;overflow:hidden;text-overflow:ellipsis;
  flex-shrink:0;
}
.nav-cta:hover{background:var(--blue-dd);transform:translateY(-1px);box-shadow:0 7px 20px rgba(74,144,226,.34)}
.nav-cta:active{transform:translateY(0)}
/* Already on the contact page: the form is the CTA. */
body[data-page="contact"] .nav-cta{display:none}
@media(max-width:768px){.nav-cta{display:none}}

/* ─────────────────────────────────────────────
   COST-CALCULATOR CTA — the last row of the ledger

   The box totals to a benefit figure and then stopped. This is the highest
   intent moment on the page and there was nothing to press for another four
   screens. Squared to the box rather than pill-shaped, because it is a row
   of the table and not a floating button.
───────────────────────────────────────────── */
.opp-act{
  display:block;margin-top:1.75rem;
  background:var(--blue-d);color:#fff;text-align:center;
  padding:1.05rem 1.25rem;border-radius:3px;
  font-size:.86rem;font-weight:700;letter-spacing:-.005em;
  box-shadow:0 8px 24px rgba(74,144,226,.24);
  transition:background .25s ease,box-shadow .25s ease;
}
.opp-act:hover{background:var(--blue-dd);box-shadow:0 12px 30px rgba(74,144,226,.32)}

/* ─────────────────────────────────────────────
   A7 — REDUCED MOTION
───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  html{scroll-behavior:auto}
  .rv,.hl-i,.wr,.nav-ov a{opacity:1!important;transform:none!important}
  #cdot,#cring{display:none}
  .shint-line{animation:none!important}
  .arail{display:none!important}
}

/* ─────────────────────────────────────────────
   LANGUAGE OFFER — suggested, never forced
───────────────────────────────────────────── */
.lang-offer{
  position:fixed;left:1rem;bottom:1rem;z-index:60;
  display:flex;align-items:center;gap:.25rem;
  background:var(--ink,#12141a);color:#fff;
  border-radius:999px;padding:.15rem .35rem .15rem 1rem;
  box-shadow:0 6px 24px rgba(0,0,0,.18);
  font-size:.85rem;max-width:calc(100vw - 2rem);
}
.lang-offer a{
  color:inherit;text-decoration:underline;text-underline-offset:2px;
  padding:.45rem 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.lang-offer a:hover{text-decoration-thickness:2px}
.lang-offer-x{
  flex:none;background:none;border:0;color:inherit;cursor:pointer;
  font-size:1.15rem;line-height:1;padding:.35rem .5rem;border-radius:999px;
}
.lang-offer-x:hover{background:rgba(255,255,255,.14)}
.lang-offer-x:focus-visible,.lang-offer a:focus-visible{outline:2px solid #fff;outline-offset:2px}
/* The sticky mobile CTA owns the bottom of a small screen; sit above it. */
@media (max-width:700px){
  .lang-offer{bottom:auto;top:calc(var(--navh,64px) + .5rem);left:.75rem;right:.75rem;font-size:.8rem}
}

/* ─────────────────────────────────────────────
   COOKIE CONSENT   (.ccb — .cc is the comparison cell)
   Accept and Reject share one class on purpose:
   refusing must not be the quieter button.
───────────────────────────────────────────── */
.ccb{
  position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:80;
  max-width:34rem;margin-inline:auto;
  background:#fff;color:var(--ink,#12141a);
  border:1px solid rgba(0,0,0,.08);border-radius:14px;
  box-shadow:0 18px 50px rgba(0,0,0,.16);
  padding:1.15rem 1.25rem;
}
.ccb-body{margin:0 0 .9rem;font-size:.86rem;line-height:1.6;color:var(--muted,#5a5f6b)}

.ccb-opts{display:grid;gap:.55rem;margin:0 0 1rem}
.ccb-row{display:flex;gap:.6rem;align-items:flex-start;cursor:pointer}
.ccb-row>*{min-width:0}
.ccb-row.is-locked{cursor:default;opacity:.7}
.ccb-row input{width:16px;height:16px;flex:none;margin-top:.18rem;appearance:auto;accent-color:var(--blue-d,#1b4ee0)}
.ccb-row strong{display:block;font-size:.82rem;font-weight:600}
.ccb-row small{display:block;font-size:.76rem;line-height:1.5;color:var(--muted,#5a5f6b)}

.ccb-btns{display:flex;flex-wrap:wrap;gap:.5rem}
.ccb-b{
  flex:1 1 auto;min-width:8rem;
  font-family:inherit;font-size:.82rem;font-weight:600;
  padding:.6rem 1rem;border-radius:999px;cursor:pointer;
  border:1px solid transparent;
}
/* Identical weight for accept and reject. */
.ccb-b-solid{background:var(--ink,#12141a);color:#fff}
.ccb-b-solid:hover{opacity:.88}
.ccb-b-ghost{background:transparent;color:var(--ink,#12141a);border-color:rgba(0,0,0,.16)}
.ccb-b-ghost:hover{background:rgba(0,0,0,.04)}
.ccb-b:focus-visible{outline:2px solid var(--blue-d,#1b4ee0);outline-offset:2px}

/* The permanent way back, so consent can be withdrawn as easily as given. */
.ccb-manage{
  background:none;border:0;padding:0;margin:.4rem 0 0;
  font-family:inherit;font-size:inherit;color:inherit;opacity:.8;
  text-decoration:underline;text-underline-offset:2px;cursor:pointer;
}
.ccb-manage:hover{opacity:1}

@media (max-width:700px){
  .ccb{left:.6rem;right:.6rem;bottom:.6rem;padding:1rem}
  .ccb-b{flex:1 1 100%}
}