/* Ventel.in — shared styles
   Layout: dark-first console aesthetic; full-width bands with a 1200px inner column;
   motion graphics are CSS keyframe loops that start when a section is visible. */

:root{
  --bg:#0A0A0C; --stage:#0D0D11; --surface:#15151A; --surface-2:#1C1C23;
  --line:#25252D; --trace:#2A2A33; --text:#EDEDF0; --muted:#A3A3AD;
  --copper:#FF5500; --copper-t:#FF6B24; --emerald:#00B87A; --emerald-t:#53a6fd; --blue:#53a6fd;
  --emerald-dim:#092642; --copper-dim:rgba(255,85,0,.14); --blue-dim:#092642;
  --display:"Space Grotesk",ui-sans-serif,system-ui,sans-serif;
  --body:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --radius:14px; --w:1200px;
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#F4F3EF; --stage:#E8E6E0; --surface:#FFFFFF; --surface-2:#F0EEE8;
  --line:#DAD6CC; --trace:#C6C2B8; --text:#121214; --muted:#55555E;
  --copper-t:#AE3D00; --emerald-t:#00704F; --blue:#1A5FBF;
  --emerald-dim:rgba(0,112,79,.10); --copper-dim:rgba(174,61,0,.10); --blue-dim:rgba(26,95,191,.14);
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:400 16px/1.6 var(--body);-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--emerald-t);outline-offset:3px;border-radius:4px}
[hidden]{display:none!important}
.wrap{max-width:var(--w);margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.mono{font-family:var(--mono)}
.skip{position:absolute;left:-999px;top:8px;background:var(--surface);padding:8px 12px;z-index:100}
.skip:focus{left:12px}

/* ---------- header ---------- */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--bg)}
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:28px;height:80px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:600 22px var(--display);letter-spacing:-.02em}
.brand svg{width:30px;height:30px;flex:none}
.brand img{flex:none;display:block;width:92px;height:44px;max-width:none;object-fit:contain}
.top .brand img{width:125px;height:60px}
.foot .brand img{width:125px;height:60px}
.brand .logo-light{display:none}
html[data-theme="light"] .brand .logo-light{display:block}
html[data-theme="light"] .brand .logo-dark{display:none}
.brand small{font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-left:2px}
.nav{display:flex;gap:4px;margin-left:auto}
.nav a{text-decoration:none;color:var(--muted);font-size:15px;padding:8px 12px;border-radius:8px}
.nav a:hover,.nav a[aria-current="page"]{color:var(--text);background:var(--surface)}
.top .btn{margin-left:8px}
.theme{appearance:none;background:var(--surface);border:1px solid var(--line);color:var(--text);width:38px;height:38px;border-radius:999px;display:grid;place-items:center;cursor:pointer;flex:none;padding:0}
.theme:hover{border-color:var(--muted)}
.theme svg{width:18px;height:18px}
.theme .moon{display:none}
html[data-theme="light"] .theme .sun{display:none}
html[data-theme="light"] .theme .moon{display:block}
.menu{display:none;margin-left:auto;appearance:none;background:none;border:1px solid var(--line);color:var(--text);border-radius:8px;width:42px;height:42px;cursor:pointer}
@media (max-width:900px){
  .menu{display:grid;place-items:center;margin-left:8px}
  .theme{margin-left:auto}
  .nav{display:none;position:absolute;left:0;right:0;top:80px;flex-direction:column;background:var(--bg);border-bottom:1px solid var(--line);padding:12px max(20px,env(safe-area-inset-left,0px)) 20px}
  .nav.open{display:flex}
  .top .btn.login{display:none}
}

/* ---------- buttons, tags ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 20px;border-radius:999px;font:500 15px var(--body);text-decoration:none;border:1px solid var(--line);background:var(--surface);color:var(--text);cursor:pointer;white-space:nowrap}
.btn:hover{border-color:var(--muted)}
.btn.primary{background:var(--copper);border-color:var(--copper);color:#fff}
.btn.primary:hover{background:#e64d00}
.btn.sm{height:38px;padding:0 16px;font-size:14px}
.eyebrow{font:500 13px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--emerald-t);display:flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:18px;height:1px;background:currentColor}
.tag{display:inline-flex;align-items:center;gap:8px;font:500 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--muted);white-space:nowrap}
.tag.ok{color:var(--emerald-t);border-color:color-mix(in srgb,var(--emerald-t) 45%,transparent);background:var(--emerald-dim)}
.tag.bad{color:var(--copper-t);border-color:color-mix(in srgb,var(--copper-t) 50%,transparent);background:var(--copper-dim)}
.dot{width:8px;height:8px;border-radius:50%;background:currentColor;display:inline-block;flex:none}
.plabel{font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* ---------- type ---------- */
h1,h2,h3{font-family:var(--display);font-weight:600;letter-spacing:-.025em;line-height:1.05;margin:0;text-wrap:balance}
h1{font-size:clamp(40px,6.4vw,84px)}
h2{font-size:clamp(32px,4.4vw,56px)}
h3{font-size:22px;letter-spacing:-.015em;line-height:1.2}
.dotend{color:var(--emerald-t)}
.lede{font-size:clamp(17px,1.6vw,20px);color:var(--muted);max-width:60ch;margin:0}
.sec{padding-block:clamp(72px,10vw,128px);border-top:1px solid var(--line)}
.sec-head{display:flex;flex-direction:column;gap:18px;max-width:760px;margin-bottom:48px}

/* ---------- reveal (visible by default; only hidden once JS confirms it will reveal) ---------- */
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.js .reveal.in{opacity:1;transform:none}
.js .reveal.d1{transition-delay:.1s}.js .reveal.d2{transition-delay:.2s}.js .reveal.d3{transition-delay:.3s}

/* motion only runs when its section is in view */
.mg *{animation-play-state:paused}
.mg.live *{animation-play-state:running}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;padding-block:clamp(56px,8vw,104px) clamp(64px,8vw,96px)}
.hero .grid-bg{position:absolute;inset:0;background-image:linear-gradient(var(--trace) 1px,transparent 1px),linear-gradient(90deg,var(--trace) 1px,transparent 1px);background-size:56px 56px;opacity:.35;mask-image:radial-gradient(ellipse at 75% 35%,#000 5%,transparent 65%);-webkit-mask-image:radial-gradient(ellipse at 75% 35%,#000 5%,transparent 65%);pointer-events:none}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.hero-copy{display:flex;flex-direction:column;gap:26px;min-width:0}
.cta{display:flex;gap:12px;flex-wrap:wrap}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:56px;border-top:1px solid var(--line)}
.facts div{padding:18px 18px 0 0;display:flex;flex-direction:column;gap:6px;min-width:0}
.facts b{font:600 18px var(--display);letter-spacing:-.01em}
@media (max-width:960px){.hero .wrap{grid-template-columns:1fr}.facts{grid-template-columns:repeat(2,minmax(0,1fr))}}

.esim-card{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:26px;display:flex;flex-direction:column;gap:14px;position:relative;min-width:0}
.esim-card .row1{display:flex;justify-content:space-between;align-items:center}
.esim-chip{position:relative;height:150px;display:grid;place-items:center;margin:4px 0 6px}
.esim-chip .ring{position:absolute;width:110px;height:110px;border-radius:50%;border:1px solid var(--emerald-t);opacity:0;animation:ring 3s ease-out infinite}
.esim-chip .ring:nth-child(2){animation-delay:1s}.esim-chip .ring:nth-child(3){animation-delay:2s}
@keyframes ring{0%{transform:scale(.6);opacity:.7}100%{transform:scale(2.1);opacity:0}}
.esim-chip .die{width:92px;height:92px;border-radius:14px;background:var(--surface-2);border:2px solid var(--emerald-t);display:grid;place-items:center;font:600 15px/1.1 var(--display);color:var(--emerald-t);text-align:center;position:relative;box-shadow:0 0 40px var(--emerald-dim)}
.esim-chip .die::before{content:"";position:absolute;inset:-10px;border:4px dotted var(--muted);border-radius:18px;opacity:.5}
.prof{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:10px;font:500 13px var(--mono);letter-spacing:.06em}
.prof .st{display:flex;align-items:center;gap:8px;color:var(--muted)}
.prof.act{border-color:color-mix(in srgb,var(--emerald-t) 45%,transparent);background:var(--emerald-dim)}
.prof.act .st{color:var(--emerald-t)}
.prof .bar{display:flex;gap:3px;align-items:flex-end;height:14px}
.prof .bar i{width:4px;background:currentColor;border-radius:1px}
/* hero profile rotation: each profile takes the active role in turn */
.prof{animation:profcycle 9s infinite}
.prof.p2{animation-delay:-6s}.prof.p3{animation-delay:-3s}
@keyframes profcycle{0%,30%{border-color:color-mix(in srgb,var(--emerald-t) 45%,transparent);background:var(--emerald-dim)}34%,100%{border-color:var(--line);background:transparent}}
.prof .st .on{animation:txton 9s infinite}.prof .st .off{animation:txtoff 9s infinite}
.prof.p2 .st span{animation-delay:-6s}.prof.p3 .st span{animation-delay:-3s}
@keyframes txton{0%,30%{opacity:1}34%,100%{opacity:0}}
@keyframes txtoff{0%,30%{opacity:0}34%,100%{opacity:1}}
.prof .st{position:relative}
.prof .st .on{color:var(--emerald-t)}
.prof .st .off{position:absolute;right:0}

/* ---------- why eSIM ---------- */
.lanes{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:860px){.lanes{grid-template-columns:1fr}}
.lane{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px;display:flex;flex-direction:column;gap:18px;min-width:0}
.lane .head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.lane h3{font-size:24px}
.track{position:relative;height:120px;border-radius:10px;background:var(--stage);border:1px solid var(--line);overflow:hidden}
.track .node{position:absolute;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;font:500 10px var(--mono);letter-spacing:.12em;color:var(--muted);z-index:2}
.track .node .box{width:46px;height:46px;border-radius:10px;border:1px solid var(--trace);background:var(--surface);display:grid;place-items:center}
.track .n1{left:16px}.track .n2{right:16px}
.track .path{position:absolute;left:80px;right:80px;top:50%;height:2px;margin-top:-11px;background:repeating-linear-gradient(90deg,var(--trace) 0 10px,transparent 10px 18px)}
.van{position:absolute;left:80px;top:50%;margin-top:-26px;width:34px;height:24px;color:var(--copper-t);animation:van 6s ease-in-out infinite}
@keyframes van{0%{left:80px}45%{left:calc(100% - 114px)}55%{left:calc(100% - 114px)}100%{left:80px}}
.zap{position:absolute;left:80px;top:50%;margin-top:-17px;width:12px;height:12px;border-radius:50%;background:var(--emerald-t);box-shadow:0 0 16px var(--emerald-t);animation:zap 2s cubic-bezier(.6,0,.4,1) infinite}
@keyframes zap{0%{left:80px;opacity:0}10%{opacity:1}80%{opacity:1}100%{left:calc(100% - 92px);opacity:0}}
.lane ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;color:var(--muted);font-size:15px}
.lane li{display:flex;gap:10px}
.lane li::before{content:"–";color:var(--trace)}
.lane.good li::before{content:"✓";color:var(--emerald-t)}
.clock{font:500 28px var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em}

/* ---------- platform slides ---------- */
.platform{display:grid;grid-template-columns:300px minmax(0,1fr);gap:28px;align-items:start}
@media (max-width:960px){.platform{grid-template-columns:1fr}}
.tabs{display:flex;flex-direction:column;gap:6px;position:sticky;top:108px}
@media (max-width:960px){.tabs{position:static;flex-direction:row;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin}}
.tab{appearance:none;text-align:left;background:transparent;border:1px solid transparent;color:var(--muted);border-radius:10px;padding:14px 16px;font:500 15px var(--body);cursor:pointer;display:grid;grid-template-columns:30px 1fr;gap:4px 10px;align-items:baseline;position:relative;overflow:hidden;flex:none}
.tab b{font:500 12px var(--mono);color:var(--muted)}
.tab:hover{color:var(--text)}
.tab[aria-selected="true"]{border-color:var(--line);background:var(--surface);color:var(--text)}
.tab[aria-selected="true"] b{color:var(--emerald-t)}
.tab .prog{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--emerald-t);transform-origin:left;transform:scaleX(0)}
.tab[aria-selected="true"] .prog{animation:prog var(--slide-ms,9000ms) linear forwards}
.platform.paused .tab .prog,.platform:not(.live) .tab .prog{animation-play-state:paused}
@keyframes prog{to{transform:scaleX(1)}}
.tab .new{grid-column:2;font:500 10px var(--mono);letter-spacing:.12em;color:var(--copper-t)}

.slide{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:32px;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:32px;min-height:520px}
@media (max-width:1100px){.slide{grid-template-columns:1fr;min-height:0}}
.slide .copy{display:flex;flex-direction:column;gap:18px;min-width:0}
.slide h3{font-size:clamp(26px,2.6vw,34px);letter-spacing:-.02em}
.slide p{margin:0;color:var(--muted)}
.ticks{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:15px}
.ticks li{display:flex;gap:10px;align-items:baseline}
.ticks li::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--emerald-t);flex:none;transform:translateY(-1px)}
.viz{background:var(--stage);border:1px solid var(--line);border-radius:14px;padding:22px;position:relative;overflow:hidden;min-height:400px;display:flex;flex-direction:column;gap:14px;min-width:0}
.note{font-size:13px;color:var(--muted);border-left:2px solid var(--trace);padding-left:12px}

/* slide 1: remote provisioning */
.rp-nodes{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;position:relative;margin-top:8px;padding-bottom:28px}
.rp-node{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 12px;display:flex;flex-direction:column;gap:8px;align-items:flex-start;min-width:0;position:relative;z-index:1}
.rp-node b{font:600 15px/1.2 var(--display)}
.rp-node .ico{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:var(--emerald-dim);color:var(--emerald-t)}
.rp-wire{position:absolute;bottom:10px;left:8%;right:8%;height:2px;background:repeating-linear-gradient(90deg,var(--trace) 0 8px,transparent 8px 14px);z-index:0}
.rp-pkt{position:absolute;bottom:5px;left:12%;width:12px;height:12px;border-radius:50%;background:var(--emerald-t);box-shadow:0 0 14px var(--emerald-t);z-index:2;animation:rppkt 7s cubic-bezier(.6,0,.4,1) infinite}
@keyframes rppkt{0%,8%{left:14%;opacity:0}12%{opacity:1}34%{left:48%}44%{left:48%}64%{left:84%;opacity:1}70%,100%{left:84%;opacity:0}}
.rp-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.rp-steps li{display:grid;grid-template-columns:22px 1fr auto;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--surface);font-size:14px}
.rp-steps .k{width:22px;height:22px;border-radius:50%;border:1px solid var(--trace);display:grid;place-items:center;font:500 11px var(--mono);color:var(--muted)}
.rp-steps .s{font:500 11px var(--mono);letter-spacing:.1em;color:var(--muted);position:relative;min-width:92px;text-align:right}
.rp-steps li{animation:rpstep 7s infinite;animation-delay:calc(var(--i)*.9s)}
.rp-steps li .k{animation:rpk 7s infinite;animation-delay:calc(var(--i)*.9s)}
.rp-steps .s .w,.rp-steps .s .d{position:absolute;right:0;top:50%;transform:translateY(-50%)}
.rp-steps .s .w{animation:txtoff2 7s infinite;animation-delay:calc(var(--i)*.9s)}
.rp-steps .s .d{color:var(--emerald-t);animation:txton2 7s infinite;animation-delay:calc(var(--i)*.9s)}
@keyframes rpstep{0%,4%{border-color:var(--line)}8%,80%{border-color:color-mix(in srgb,var(--emerald-t) 40%,transparent)}88%,100%{border-color:var(--line)}}
@keyframes rpk{0%,4%{background:transparent;color:var(--muted);border-color:var(--trace)}8%,80%{background:var(--emerald-t);color:var(--bg);border-color:var(--emerald-t)}88%,100%{background:transparent;color:var(--muted);border-color:var(--trace)}}
@keyframes txton2{0%,4%{opacity:0}8%,80%{opacity:1}88%,100%{opacity:0}}
@keyframes txtoff2{0%,4%{opacity:1}8%,80%{opacity:0}88%,100%{opacity:1}}

/* slide 2: profiles */
.lc{display:flex;gap:8px;flex-wrap:wrap}
.lc span{font:500 12px var(--mono);letter-spacing:.1em;padding:8px 12px;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--muted);animation:lc 8s infinite;animation-delay:calc(var(--i)*2s - 8s)}
@keyframes lc{0%,22%{color:var(--emerald-t);border-color:var(--emerald-t);background:var(--emerald-dim)}25%,100%{color:var(--muted);border-color:var(--line);background:var(--surface)}}
.slots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:auto}
.slot{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:6px;min-width:0}
.slot .c{font:600 22px var(--display)}
.slot .s{font:500 11px var(--mono);letter-spacing:.12em}
.slot.empty{border-style:dashed;background:transparent}
.slot.rm{animation:rm 4s ease-in-out infinite}
@keyframes rm{0%,40%{opacity:1}60%,80%{opacity:.35}100%{opacity:1}}

/* slide 3: carriers */
.carriers{display:flex;flex-direction:column;gap:10px}
.car{display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.car b{font:600 20px var(--display)}
.sig{display:flex;gap:3px;align-items:flex-end;height:20px}
.sig i{width:5px;border-radius:1px;background:var(--emerald-t)}
.car.a{animation:carA 8s infinite}.car.b{animation:carB 8s infinite}
@keyframes carA{0%,40%{border-color:var(--emerald-t);background:var(--emerald-dim)}45%,100%{border-color:var(--line);background:var(--surface)}}
@keyframes carB{0%,52%{border-color:var(--line);background:var(--surface)}56%,96%{border-color:var(--emerald-t);background:var(--emerald-dim)}100%{border-color:var(--line);background:var(--surface)}}
.car.a .sig i:nth-child(3),.car.a .sig i:nth-child(4){animation:sigdrop 8s infinite}
@keyframes sigdrop{0%,25%{background:var(--emerald-t)}30%,96%{background:var(--trace)}100%{background:var(--emerald-t)}}
.car .lbl{position:relative;min-width:110px;height:24px}
.car .lbl > span{position:absolute;right:0;top:0}
.car.a .lbl .x1{animation:carAlbl1 8s infinite}.car.a .lbl .x2{animation:carAlbl2 8s infinite}
.car.b .lbl .x1{animation:carBlbl1 8s infinite}.car.b .lbl .x2{animation:carBlbl2 8s infinite}
@keyframes carAlbl1{0%,25%{opacity:1}28%,100%{opacity:0}}
@keyframes carAlbl2{0%,25%{opacity:0}28%,96%{opacity:1}100%{opacity:0}}
@keyframes carBlbl1{0%,52%{opacity:1}56%,96%{opacity:0}100%{opacity:1}}
@keyframes carBlbl2{0%,52%{opacity:0}56%,96%{opacity:1}100%{opacity:0}}
.ev{margin-top:auto;font:500 12px var(--mono);letter-spacing:.08em;color:var(--muted);border-top:1px solid var(--line);padding-top:12px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}

/* slide 4: monitoring */
.tbl{width:100%;border-collapse:collapse;font:500 13px var(--mono)}
.tbl th{text-align:left;font-size:10px;letter-spacing:.12em;color:var(--muted);font-weight:500;padding:8px 6px}
.tbl td{padding:12px 6px;border-top:1px solid var(--line);white-space:nowrap}
.tbl .okc{color:var(--emerald-t)}
.tbl tr.alert td{animation:alertrow 3s infinite}
.tbl tr.alert .stc{color:var(--copper-t)}
@keyframes alertrow{0%,100%{background:transparent}50%{background:var(--copper-dim)}}
.spark{height:70px;margin-top:auto}
.spark path.l{stroke:var(--emerald-t);stroke-width:2;fill:none;stroke-dasharray:600;animation:draw 4s ease-out infinite}
.spark path.a{fill:var(--emerald-dim);stroke:none}
@keyframes draw{0%{stroke-dashoffset:600}60%,100%{stroke-dashoffset:0}}

/* slide 5: inventory */
.ibar{display:flex;flex-direction:column;gap:6px}
.ibar .hd{display:flex;justify-content:space-between;font:500 12px var(--mono);letter-spacing:.1em}
.ibar .tr{height:12px;border-radius:999px;background:var(--trace);overflow:hidden}
.ibar .fl{height:100%;border-radius:999px;transform-origin:left;animation:grow 6s cubic-bezier(.2,.7,.2,1) infinite}
@keyframes grow{0%{transform:scaleX(0)}25%,90%{transform:scaleX(1)}100%{transform:scaleX(1)}}
.chart{display:flex;align-items:flex-end;gap:8px;height:150px;border-bottom:1px solid var(--line);margin-top:auto}
.chart i{flex:1;border-radius:4px 4px 0 0;background:var(--emerald-t);opacity:.85;transform-origin:bottom;animation:growy 6s cubic-bezier(.2,.7,.2,1) infinite;animation-delay:calc(var(--i)*.06s)}
.chart i.o{background:var(--copper)}
@keyframes growy{0%{transform:scaleY(0)}25%,100%{transform:scaleY(1)}}

/* slide 6: security */
.sec-stage{position:relative;flex:1;min-height:250px;display:grid;place-items:center}
.lockic{width:160px;height:150px;position:relative;z-index:1}
.clone{position:absolute;left:6%;top:50%;margin-top:-50px;width:76px;height:100px;border-radius:8px 24px 8px 8px;border:2px dashed var(--copper-t);background:var(--copper-dim);display:grid;place-items:center;font:600 11px/1.2 var(--mono);color:var(--copper-t);text-align:center;animation:clone 4s cubic-bezier(.4,0,.3,1) infinite}
@keyframes clone{0%{transform:translateX(-30px);opacity:0}15%{opacity:1}45%{transform:translateX(70px)}55%{transform:translateX(40px)}85%{opacity:1;transform:translateX(40px)}100%{opacity:0;transform:translateX(40px)}}
.denied{position:absolute;left:4%;bottom:6px;animation:denied 4s infinite}
@keyframes denied{0%,45%{opacity:0}50%,85%{opacity:1}100%{opacity:0}}
.badges{display:flex;gap:8px;flex-wrap:wrap}

/* ---------- MFF2 ---------- */
.mff2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center}
@media (max-width:900px){.mff2{grid-template-columns:1fr}}
.pcb{position:relative;aspect-ratio:4/3;max-width:100%;border-radius:22px;background:var(--surface);border:1px solid var(--line);overflow:hidden}
.pcb svg.tr{position:absolute;inset:0;width:100%;height:100%}
.pcb svg.tr path{stroke:var(--trace);stroke-width:2;fill:none}
.pcb svg.tr path.flow{stroke:var(--emerald-t);stroke-dasharray:14 400;animation:flow 3s linear infinite}
@keyframes flow{to{stroke-dashoffset:-414}}
.pcb .chip{position:absolute;left:50%;top:50%;width:26%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:12px;background:var(--surface-2);border:2px solid var(--emerald-t);display:grid;place-items:center;font:600 clamp(14px,1.6vw,20px)/1.1 var(--display);color:var(--emerald-t);text-align:center;box-shadow:0 0 50px var(--emerald-dim)}
.pcb .chip::before{content:"";position:absolute;inset:-10px;border:5px dotted var(--muted);border-radius:16px;opacity:.5}
.pcb .lab{position:absolute;left:18px;top:14px}
.pcb .solder{position:absolute;left:50%;bottom:12%;transform:translateX(-50%)}
.feat4{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 28px;margin-top:8px}
@media (max-width:520px){.feat4{grid-template-columns:1fr}}
.feat4 div{display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--line);padding-top:14px}
.feat4 b{font:600 17px var(--display)}
.feat4 span{color:var(--muted);font-size:15px}

/* ---------- capability grid ---------- */
.caps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
@media (max-width:900px){.caps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.caps{grid-template-columns:1fr}}
.cap{padding:26px 24px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:8px;min-width:0;transition:background .2s}
.cap:hover{background:var(--surface)}
.cap b{font:600 18px var(--display);letter-spacing:-.01em}
.cap span{color:var(--muted);font-size:15px}

/* ---------- partners ---------- */
.partners{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:640px){.partners{grid-template-columns:1fr}}
.partner{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px 20px;display:grid;place-items:center;min-height:148px}
.partner img{max-width:min(180px,70%);max-height:96px;width:auto;height:auto;object-fit:contain}

/* ---------- industries ---------- */
.inds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:900px){.inds{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.inds{grid-template-columns:1fr}}
.ind{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px;display:flex;flex-direction:column;gap:10px;min-width:0;transition:border-color .2s,transform .2s}
.ind:hover{border-color:var(--muted);transform:translateY(-2px)}
.ind .k{font:500 11px var(--mono);letter-spacing:.14em;color:var(--emerald-t)}
.ind span{color:var(--muted);font-size:15px}

/* ---------- API integration ---------- */
.api{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;align-items:center}
@media (max-width:900px){.api{grid-template-columns:1fr;gap:32px}}
.api-copy{display:flex;flex-direction:column;gap:20px;min-width:0}
.api-points{display:flex;flex-direction:column}
.api-points div{display:flex;flex-direction:column;gap:4px;border-top:1px solid var(--line);padding-block:14px}
.api-points b{font:600 17px var(--display)}
.api-points span{color:var(--muted);font-size:15px}
.api-board{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:26px;display:flex;flex-direction:column;gap:14px;min-width:0}
.api-board .row1{display:flex;justify-content:space-between;align-items:center;gap:12px}
.api-rows{display:flex;flex-direction:column;gap:10px}
.api-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;background:var(--stage);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.api-flow{grid-column:2 / -1}
.api-row.on{border-color:color-mix(in srgb,var(--emerald-t) 32%,var(--line))}
.api-row b{display:block;font:600 16px/1.2 var(--display)}
.api-row .plabel{display:block;margin-top:4px}
.api-live{width:8px;height:8px;border-radius:50%;background:var(--emerald-t);position:relative;flex:none}
.api-row:has(.api-flow){align-items:start}
.api-row:has(.api-flow) .api-live{margin-top:6px}
.mg .api-live::after{animation-play-state:paused}
.mg.live .api-live::after{animation-play-state:running}
.api-live::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid var(--emerald-t);opacity:0}
.api-row:nth-child(2) .api-live::after{animation-delay:.9s}
.api-row:nth-child(3) .api-live::after{animation-delay:1.8s}
.api-flow{display:flex;flex-direction:column;gap:12px;min-width:0}
.api-flow-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.api-wire{position:relative;height:2px;border-radius:999px;background:repeating-linear-gradient(90deg,var(--trace) 0 8px,transparent 8px 14px)}
.api-pkt{position:absolute;top:-5px;left:0;width:12px;height:12px;border-radius:50%;background:var(--emerald-t);box-shadow:0 0 12px var(--emerald-t);opacity:0}
.api-log{display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--line);padding-top:14px}
.api-lines{display:flex;flex-direction:column;gap:6px;font:500 13px var(--mono);letter-spacing:.02em}
.api-lines span{display:flex;justify-content:space-between;gap:10px;padding:7px 10px;border-radius:8px;white-space:nowrap}
.api-lines b{color:var(--copper-t);font-weight:500}
.api-lines em{color:var(--emerald-t);font-style:normal;margin-left:auto}
@media (prefers-reduced-motion: no-preference){
  .api-live::after{animation:apiring 3.2s ease-out infinite}
  .api-pkt{animation:apipkt 4.8s cubic-bezier(.45,0,.2,1) infinite}
  .api-lines span{animation:apilog 15s infinite;animation-delay:calc(var(--i) * -3s)}
}
@keyframes apiring{0%{transform:scale(.55);opacity:.5}100%{transform:scale(1.85);opacity:0}}
@keyframes apipkt{0%{left:0;opacity:0}14%{opacity:1}86%{opacity:1}100%{left:calc(100% - 12px);opacity:0}}
@keyframes apilog{0%,16%{background:var(--blue-dim)}22%,100%{background:transparent}}

/* ---------- FAQ ---------- */
.faq{display:flex;flex-direction:column;border-top:1px solid var(--line);max-width:880px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:22px 0;display:flex;justify-content:space-between;gap:20px;font:500 19px/1.35 var(--display);letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:400 26px/1 var(--mono);color:var(--muted);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0 0 22px;color:var(--muted);max-width:70ch}

/* ---------- contact ---------- */
.contact{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;align-items:start}
@media (max-width:900px){.contact{grid-template-columns:1fr}}
.cbox{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:28px;display:flex;flex-direction:column;gap:20px}
.cline{display:flex;flex-direction:column;gap:4px;border-bottom:1px solid var(--line);padding-bottom:16px}
.cline:last-of-type{border-bottom:0;padding-bottom:0}
.cline a,.cline span.v{font:500 18px var(--body);text-decoration:none;word-break:break-word}
.cline a:hover{color:var(--emerald-t)}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line);padding-block:48px 40px;color:var(--muted);font-size:14px}
.foot .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px}
@media (max-width:760px){.foot .wrap{grid-template-columns:1fr}}
.foot nav{display:flex;flex-direction:column;gap:8px}
.foot a{text-decoration:none}.foot a:hover{color:var(--text)}
.foot .base{grid-column:1/-1;border-top:1px solid var(--line);padding-top:20px;display:flex;justify-content:space-between;align-items:center;gap:16px 24px;flex-wrap:wrap}
.marks{display:flex;gap:8px;flex-wrap:wrap}
.mark{display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 8px;border:1px solid var(--line);border-radius:10px;color:var(--text);background:var(--surface);white-space:nowrap}
.mark svg{width:26px;height:26px;flex:none}
.mark.soc svg{color:#00E599}
.mark.dpdp svg{color:var(--blue)}
.dotmark{display:flex;align-items:center;height:26px;font:700 22px/1 var(--display);letter-spacing:-.06em}
.dotmark .d{color:#F15A22}
.dotmark .o{color:var(--blue)}
.dotmark .t{color:var(--emerald)}
.mark b{display:block;font:600 13px/1.1 var(--display);letter-spacing:-.01em}
.mark small{display:block;margin-top:2px;font:500 10px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);white-space:nowrap}

/* ---------- legal pages ---------- */
.legal-hero{padding-block:clamp(56px,7vw,88px) 40px;border-bottom:1px solid var(--line)}
.legal-hero .wrap{display:flex;flex-direction:column;gap:18px}
.legal-hero .meta{display:flex;gap:10px;flex-wrap:wrap}
.legal{display:grid;grid-template-columns:240px minmax(0,1fr);gap:56px;padding-block:48px 96px}
@media (max-width:900px){.legal{grid-template-columns:1fr;gap:24px}}
.toc{position:sticky;top:108px;display:flex;flex-direction:column;gap:2px;font-size:14px}
@media (max-width:900px){.toc{position:static;border:1px solid var(--line);border-radius:12px;padding:14px}}
.toc a{text-decoration:none;color:var(--muted);padding:6px 10px;border-radius:6px;display:grid;grid-template-columns:28px 1fr}
.toc a b{font:500 12px var(--mono)}
.toc a:hover,.toc a.on{color:var(--text);background:var(--surface)}
.doc{max-width:72ch;min-width:0}
.doc section{padding-top:8px;margin-bottom:40px;scroll-margin-top:108px}
.doc h2{font-size:26px;letter-spacing:-.015em;margin-bottom:14px;display:flex;gap:14px;align-items:baseline}
.doc h2 .n{font:500 14px var(--mono);color:var(--emerald-t)}
.doc h3{font-size:18px;margin:22px 0 8px}
.doc p,.doc li{color:color-mix(in srgb,var(--text) 82%,var(--muted))}
.doc p{margin:0 0 14px}
.doc ul,.doc ol{margin:0 0 14px;padding-left:22px;display:flex;flex-direction:column;gap:6px}
.doc strong{color:var(--text);font-weight:600}
.doc .tblwrap{overflow-x:auto;margin:6px 0 18px;border:1px solid var(--line);border-radius:12px}
.doc table{border-collapse:collapse;width:100%;font-size:14px;min-width:560px}
.doc th,.doc td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.doc th{font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);background:var(--surface)}
.doc tr:last-child td{border-bottom:0}
.callout{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px 20px;margin:0 0 18px}
.callout p:last-child{margin:0}

/* Privacy notice. Light colours follow the PDF; dark follows the site theme. */
.sheet{
  --doc:#15151A; --doc-ink:#EDEDF0; --doc-navy:#EDEDF0; --doc-blue:#7eb6ff;
  --doc-line:#2A2A33; --doc-head:#1C1C23; --doc-info:#102033; --doc-info-text:#7ec8ff;
  --doc-warn:#2a2118; --doc-muted:#A3A3AD;
  padding:28px 0 64px;
}
html[data-theme="light"] .sheet{
  --doc:#fff; --doc-ink:#111; --doc-navy:#223354; --doc-blue:#1f5ab1;
  --doc-line:#e4e2e6; --doc-head:#dde6f3; --doc-info:#eff9ff; --doc-info-text:#33c2ff;
  --doc-warn:#fff8ed; --doc-muted:#8b95a8;
}
.sheet-inner{max-width:980px}
.sheet-head{display:flex;justify-content:space-between;align-items:center;gap:24px;background:var(--doc);border:1px solid var(--doc-line);border-radius:18px;padding:22px 26px;margin-bottom:16px}
.sheet-head .kicker{margin:0 0 6px;font:600 13px/1.3 Inter,var(--body);letter-spacing:.04em;text-transform:uppercase;color:var(--doc-blue)}
.sheet-head h1{font:700 34px/1.15 Inter,var(--body);letter-spacing:-.02em;color:var(--doc-navy);text-wrap:balance}
.sheet-head .sub{margin:8px 0 0;max-width:46ch;color:var(--doc-navy);font-size:15.5px;line-height:1.45}
.ver{flex:none;align-self:center;border:1.5px solid var(--doc-blue);color:var(--doc-blue);border-radius:999px;padding:7px 14px;font:500 14px/1.3 Inter,var(--body);background:transparent}
@media (max-width:720px){
  .sheet-head{flex-direction:column;align-items:flex-start}
  .sheet-head h1{font-size:28px}
  .ver{align-self:flex-start}
}

.sheet .note{display:flex;gap:12px;align-items:flex-start;border-radius:12px;padding:14px 16px;margin:0 0 22px}
.sheet .note svg{flex:none;margin-top:2px}
.sheet .note p{margin:0;font-size:15.5px;line-height:1.5}
.sheet .note.info{background:var(--doc-info)}
.sheet .note.info p,.sheet .note.info svg{color:var(--doc-info-text)}
.sheet .note.info a{color:var(--doc-blue);font-weight:600}
.sheet .note.warn{background:var(--doc-warn)}
.sheet .note.warn p{color:var(--doc-ink)}
.sheet .note.warn a{color:var(--doc-blue);font-weight:600}
.sheet .note.warn svg{color:#ffbd5e}

.sheet .lead,.sheet section p,.sheet li{color:var(--doc-ink);font-size:16.5px;line-height:1.55}
.sheet .lead{margin:0 0 8px}
.sheet section{scroll-margin-top:100px;margin-top:8px}
.sheet h2{display:flex;align-items:center;gap:12px;margin:28px 0 12px;color:var(--doc-navy);font:700 22px/1.25 Inter,var(--body);letter-spacing:-.015em}
.sheet h2 i{width:4px;align-self:stretch;min-height:22px;background:var(--doc-blue);border-radius:2px;flex:none}
.sheet strong{color:var(--doc-ink);font-weight:700}
.sheet a{color:var(--doc-blue)}
.sheet ul{margin:0 0 8px;padding-left:22px;display:flex;flex-direction:column;gap:8px}
.sheet code{font:500 .92em var(--mono);color:var(--doc-navy)}

.sheet .tblwrap{overflow-x:auto;margin:8px 0 18px;border:1px solid var(--doc-line);border-radius:14px;min-width:0}
.sheet table{border-collapse:collapse;width:100%;min-width:760px;font-size:14.5px;background:var(--doc)}
.sheet th,.sheet td{text-align:left;padding:16px 16px;vertical-align:top;border-bottom:1px solid var(--doc-line);color:var(--doc-navy)}
.sheet th{background:var(--doc-head);font:600 12px/1.35 Inter,var(--body);letter-spacing:.04em;text-transform:uppercase;color:var(--doc-navy)}
.sheet tr:last-child td{border-bottom:0}
.sheet td:first-child{font-weight:700}
.sheet .basis{display:inline-flex;align-items:center;padding:5px 12px;border:1px solid var(--doc-blue);border-radius:999px;color:var(--doc-blue);background:transparent;font:500 13px/1.3 Inter,var(--body);white-space:nowrap}

.sheet .officers{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:8px 0 16px}
@media (max-width:700px){.sheet .officers{grid-template-columns:1fr}}
.sheet .officer{display:flex;gap:14px;align-items:flex-start;background:var(--doc);border:1px solid var(--doc-line);border-radius:14px;padding:18px 18px}
.sheet .officer svg{flex:none;color:var(--doc-blue);margin-top:2px}
.sheet .officer p{margin:0;color:var(--doc-navy)}
.sheet .officer .who{font-weight:600;color:var(--doc-navy)}
.sheet .officer a{display:inline-block;margin:4px 0;font-weight:600}
.sheet .officer .cap{display:block;margin-top:4px;font:600 11px/1.4 Inter,var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--doc-navy)}

.sheet .colophon{margin-top:28px;padding-top:22px;border-top:1px solid var(--doc-line);text-align:center;color:var(--doc-muted)}
.sheet .colophon p{margin:0 0 4px;color:var(--doc-muted);font-size:13.5px}
.sheet .colophon .line{letter-spacing:.08em;text-transform:uppercase;font-size:12px}
mark.ph{background:var(--copper-dim);color:var(--copper-t);border:1px dashed color-mix(in srgb,var(--copper-t) 60%,transparent);border-radius:4px;padding:0 4px;font-family:var(--mono);font-size:.88em}

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