@font-face{font-family:'Inter';src:url('fonts/Inter-Regular.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:'Inter';src:url('fonts/Inter-Medium.woff2') format('woff2');font-style:normal;font-weight:500;font-display:swap}
@font-face{font-family:'Inter';src:url('fonts/Inter-SemiBold.woff2') format('woff2');font-style:normal;font-weight:600;font-display:swap}
@font-face{font-family:'Inter';src:url('fonts/Inter-Bold.woff2') format('woff2');font-style:normal;font-weight:700;font-display:swap}
@font-face{font-family:'Inter';src:url('fonts/Inter-ExtraBold.woff2') format('woff2');font-style:normal;font-weight:800;font-display:swap}
:root{
  --teal:#1cc9d0;
  --purple:#7e36e4;
  --blue:#3535a8;
  --white:#ffffff;
  --bg:#070a18;
  --bg2:#0c1128;
  --card:#111634;
  --card2:#151b3d;
  --line:rgba(255,255,255,.08);
  --edge:#6b6be0;
  --txt:#eef1ff;
  --heading:var(--txt);
  --muted:#9aa3c7;
  --accent-text:#1cc9d0;
  --danger-text:#ff7a7a;
  --grad:linear-gradient(135deg,#7e36e4 0%,#3535a8 45%,#1cc9d0 100%);
  --grad-text:linear-gradient(135deg,#b99aff 0%,#879aff 45%,#59e3e9 100%);
  --grad-action:linear-gradient(135deg,#602caf 0%,#303090 45%,#005867 100%);
  --grad-soft:linear-gradient(135deg,rgba(126,54,228,.16),rgba(28,201,208,.16));
  --radius:18px;
  --maxw:1200px;
}
[data-theme="light"]{
  --bg:#f1effd;
  --bg2:#ffffff;
  --card:#ffffff;
  --card2:#f5f3ff;
  --line:rgba(126,54,228,.16);
  --edge:#3535a8;
  --txt:#191d32;
  --heading:#3535a8;
  --muted:#393f58;
  --accent-text:#0b8f95;
  --danger-text:#a92835;
  --grad-text:linear-gradient(135deg,#57259a 0%,#303090 45%,#00616e 100%);
  --grad-soft:linear-gradient(135deg,rgba(126,54,228,.08),rgba(28,201,208,.1));
}
body,.sec,.card,.dev,footer{transition:background .3s,color .3s,border-color .3s}

/* ---------- Theme toggle button ---------- */
.theme-toggle{
  width:40px;
  height:40px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.08);
  border:1px solid var(--line);
  color:var(--txt);
  cursor:pointer;
  transition:transform .25s,background .25s,border-color .25s,color .25s;
  flex:none;
}
.theme-toggle:hover{
  background:var(--grad-soft);
  border-color:var(--teal);
  transform:scale(1.08);
}
.theme-toggle svg{
  width:20px;
  height:20px;
}
.theme-toggle .icon-sun{display:block}
.theme-toggle .icon-moon{display:none}

[data-theme="light"] .theme-toggle{
  background:rgba(53,53,168,.06);
  color:var(--txt);
}
[data-theme="light"] .theme-toggle .icon-sun{display:none}
[data-theme="light"] .theme-toggle .icon-moon{display:block}
.morphicons-ready .theme-toggle .icon-sun{display:block}
.morphicons-ready .theme-toggle .icon-moon{display:none}

/* ---------- Light mode enhancements ---------- */
[data-theme="light"] header{background:rgba(255,255,255,.88);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
[data-theme="light"] header.scrolled{background:rgba(241,239,253,.88);border-bottom:1px solid var(--line)}
[data-theme="light"] .nav .logo img,[data-theme="light"] .foot .brand img,[data-theme="light"] .hero-logo,[data-theme="light"] .vn-logo{filter:brightness(0) saturate(100%) invert(22%) sepia(44%) saturate(2340%) hue-rotate(224deg) brightness(89%) contrast(98%)}
[data-theme="light"] .nav ul a:hover{color:var(--blue)}
[data-theme="light"] .burger span{background:var(--txt)}
[data-theme="light"] .btn-ghost{background:rgba(255,255,255,.7);color:var(--blue);border-color:rgba(53,53,168,.5)}
[data-theme="light"] .btn-ghost:hover{background:#fff;border-color:var(--blue)}
[data-theme="light"] .grid-overlay{background-image:linear-gradient(rgba(53,53,168,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(53,53,168,.04) 1px,transparent 1px)}
[data-theme="light"] .marquee li{box-shadow:0 4px 16px rgba(0,0,0,.06)}
[data-theme="light"] .foot h3{color:var(--txt)}
[data-theme="light"] .foot-bottom .soc a{background:rgba(53,53,168,.05);border-color:var(--line)}
[data-theme="light"] .foot-bottom .soc a svg{stroke:var(--txt)}
[data-theme="light"] .card{box-shadow:0 4px 20px rgba(53,53,168,.05)}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:74px}
body{
  font-family:'Inter',system-ui,sans-serif;
  background:var(--bg);
  color:var(--txt);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.font-h{font-family:'Inter',sans-serif;font-weight:700;line-height:1.15;letter-spacing:-.01em}
h2,h3{color:var(--heading)}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
header>.wrap,footer>.wrap{max-width:calc(var(--maxw)*var(--z,1))}
.grad-text{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}
.teal{color:var(--accent-text)}
.ls{letter-spacing:.05em}
section{position:relative}
.hero,.sec{display:flex;flex-direction:column;justify-content:center}
.hero{min-height:100vh;min-height:100svh}
.sec{min-height:calc(106vh - 74px);min-height:calc(100svh + 6vh - 74px)}
.hero>.wrap,.sec>.wrap{width:100%;zoom:var(--z,1)}
#why{justify-content:flex-end}
#audience{justify-content:flex-start}
.ph{background:var(--card2);border:1px dashed var(--line);border-radius:12px}
.wm{position:absolute;z-index:0;pointer-events:none;opacity:.12}
svg.ico{width:32px;height:32px;fill:none;stroke:var(--accent-text);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 28px;border-radius:50px;font-weight:600;font-family:'Inter',system-ui,sans-serif;font-size:15px;cursor:pointer;border:none;transition:transform .25s,box-shadow .25s,background .25s;white-space:nowrap}
.btn-primary{background:var(--grad-action);color:#fff;box-shadow:0 10px 30px -8px rgba(28,201,208,.5)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 16px 40px -8px rgba(126,54,228,.6)}
.btn-ghost{background:rgba(255,255,255,.06);color:#fff;border:1.5px solid rgba(255,255,255,.4);padding:12.5px 26.5px;transition:transform .25s,background .25s,border-color .25s,box-shadow .25s}
.btn-ghost:hover{background:rgba(255,255,255,.12);border-color:var(--teal);transform:translateY(-3px);box-shadow:0 12px 28px -12px rgba(28,201,208,.5)}
.btn svg{width:18px;height:18px}

/* ---------- Header ---------- */
header{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(7,10,24,.72);backdrop-filter:blur(14px);transition:background .3s,backdrop-filter .3s,border-color .3s;border-bottom:1px solid var(--line)}
header.scrolled{background:rgba(7,10,24,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px}
.nav .logo img{height:34px;width:auto}
.nav ul{display:flex;gap:30px;list-style:none;font-size:14.5px;font-weight:500}
.nav ul a{color:var(--muted);transition:color .2s}
.nav ul a[aria-current]{color:var(--accent-text)}
.nav ul a:hover{color:#fff}
.nav-cta{display:flex;gap:12px;align-items:center}
.burger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none}
.burger span{width:26px;height:2px;background:#fff;border-radius:2px;transition:.3s}
#menu:popover-open~.burger span:nth-child(1){translate:0 7px;rotate:45deg}
#menu:popover-open~.burger span:nth-child(2){opacity:0}
#menu:popover-open~.burger span:nth-child(3){translate:0 -7px;rotate:-45deg}
@media(min-width:981px){#menu{display:block;position:static;inset:auto;width:auto;height:auto;margin:0;padding:0;border:0;background:none;color:inherit;overflow:visible}}

/* ---------- Slide 1: Hero ---------- */
.hero{padding:98px 0 24px;position:relative;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg .blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5}
.blob.b1{width:520px;height:520px;background:var(--purple);top:-120px;left:-100px}
.blob.b2{width:480px;height:480px;background:var(--teal);top:60px;right:-120px;opacity:.4}
.blob.b3{width:400px;height:400px;background:var(--blue);bottom:-160px;left:40%}
.grid-overlay{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:54px 54px;mask-image:radial-gradient(ellipse 80% 60% at 50% 40%,#000 40%,transparent 100%)}
.hero-wm{right:-80px;bottom:-160px;width:min(640px,60vw);z-index:1}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.4fr .6fr;gap:40px;align-items:start}
.hero h1{font-size:clamp(38px,5.4vw,64px);font-weight:800;margin-bottom:6px}
.hero .sub{font-weight:500;font-size:clamp(22px,3vw,40px);line-height:1.25;color:var(--accent-text);margin-bottom:clamp(32px,8vh,90px)}
.hero p.lead{font-size:18px;color:var(--muted);max-width:620px;margin-bottom:28px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:34px}
.hero-stats{display:flex;gap:clamp(34px,6vw,90px);flex-wrap:wrap}
.hero-stats .s b{font-family:'Inter',system-ui,sans-serif;font-size:clamp(30px,3.6vw,48px);font-weight:600;line-height:1.15;display:block}
.hero-stats .s span{font-size:15px;color:var(--muted)}
.hero-logo{width:100%;max-width:420px;justify-self:end}

/* ---------- Section shell ---------- */
.sec{padding:calc(clamp(20px,4vh,48px) + 3vh) 0;overflow:hidden}
.sec>.wrap{position:relative;z-index:1}
.sec-head{text-align:center;margin:0 0 clamp(20px,4vh,48px)}
.sec-head h2{font-size:clamp(26px,2.4vw,34px);margin-bottom:16px;text-wrap:balance}
.sec-head p{color:var(--muted);font-size:16.5px;max-width:900px;margin-inline:auto}
.sec-head.tl p{margin-inline:0}
.sec-head h2.long{font-size:clamp(22px,2.2vw,30px)}
.sec-head b{color:var(--txt)}
.sec-head.tl{text-align:left;margin:0 0 32px}
.sec.alt{background:var(--bg2)}
.lead-b{font-weight:700;font-size:clamp(17px,1.6vw,21px);color:var(--txt)}

/* reveal */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}.reveal.d5{transition-delay:.4s}

.diagram{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.diagram img{margin:0 auto}

/* ---------- Cards ---------- */
.grid-cards{display:grid;gap:22px}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:28px;transition:transform .3s,border-color .3s,background .3s;position:relative;overflow:hidden}
.card:hover{transform:translateY(-6px)}
.card h3{font-size:18px;margin-bottom:10px}
.card p{color:var(--muted);font-size:14.5px}
.card b{color:var(--txt)}
.bul{padding-left:20px;color:var(--muted);font-size:14.5px}
.bul li{margin-bottom:6px}
.bul ul{list-style:"+  ";padding-left:22px;margin-top:4px}
.card.outline{border:2px solid var(--purple);border-radius:40px;padding:clamp(18px,3.5vh,34px) 28px}
.card.outline h3{color:var(--accent-text);text-align:center;font-size:clamp(19px,1.8vw,24px);margin-bottom:16px}
.card.outline p{text-align:justify}
.box-o{border:1.5px solid var(--edge);background:var(--card);padding:clamp(14px,2vh,22px) clamp(14px,1.3vw,20px);border-radius:18px;position:relative;overflow:hidden;transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .35s,box-shadow .35s,background .35s;display:flex;flex-direction:column}
.box-o:hover{border-color:var(--teal);box-shadow:0 16px 36px -10px rgba(28,201,208,.3),0 0 0 1px rgba(28,201,208,.3)}
.box-o .ph{flex:1 1 0;min-height:clamp(140px,20vh,200px);margin-bottom:clamp(10px,1.4vh,14px);background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.box-o .ph img{width:100%;height:100%;object-fit:contain;border-radius:inherit;transition:transform .4s cubic-bezier(.2,.8,.2,1);cursor:zoom-in}
.box-o:hover .ph img{transform:scale(1.04)}
#audience .box-o .ph img{object-fit:cover}
#why .box-o .ph{flex:none;min-height:0;aspect-ratio:3/2}
.ph:has(img){border-style:solid}
.box-o h3{text-align:center;font-size:clamp(15px,1.25vw,18px);font-weight:700;line-height:1.35;margin-bottom:8px}
.box-o p{color:var(--muted);font-size:clamp(13px,.98vw,14.5px);line-height:1.55;text-align:justify}

/* ---------- Slide 2: Platform ---------- */
.split-head{display:grid;grid-template-columns:300px 1fr;gap:36px;align-items:center;margin-bottom:48px}
.logo-grad{display:block;aspect-ratio:600/275;background:var(--grad);-webkit-mask:url('images/logo-raio.png') center/contain no-repeat;mask:url('images/logo-raio.png') center/contain no-repeat}
.split-head h2{font-size:clamp(26px,2.4vw,34px);margin-bottom:14px}
.split-head p{color:var(--muted);font-size:17px;text-align:justify}
.split-head b{color:var(--txt)}
.feat{display:grid;grid-template-columns:1fr 1fr;gap:30px 48px;padding:40px;border-radius:var(--radius);background:var(--grad-soft)}
.f{display:flex;gap:18px;align-items:flex-start}
.fico{flex:none;width:52px;height:52px;border-radius:12px;background:var(--grad-action);display:flex;align-items:center;justify-content:center}
.fico svg.ico{width:26px;height:26px;stroke:#fff}
.f h3{font-size:18px;padding-top:12px;margin-bottom:6px;background:var(--grad) no-repeat 0 0/100% 2px}
.feat.reveal .f{opacity:0;translate:0 24px;transition:opacity .6s ease,translate .7s cubic-bezier(.2,.8,.2,1);transition-delay:calc(.15s + var(--i)*.1s)}
.feat.reveal .fico{scale:.5;transition:scale .6s cubic-bezier(.3,1.6,.5,1);transition-delay:calc(.25s + var(--i)*.1s)}
.feat.reveal .f h3{background-size:0 2px;transition:background-size .8s cubic-bezier(.6,0,.2,1);transition-delay:calc(.35s + var(--i)*.1s)}
.feat.reveal.in .f{opacity:1;translate:none}
.feat.reveal.in .fico{scale:none}
.feat.reveal.in .f h3{background-size:100% 2px}
.feat-row{display:contents}
.f:nth-child(1){--i:0}.f:nth-child(2){--i:1}.f:nth-child(3){--i:2}.feat-row+.feat-row .f{--i:3}.feat-row+.feat-row .f:nth-child(2){--i:4}.feat-row+.feat-row .f:nth-child(3){--i:5}
@media(prefers-reduced-motion:reduce){.feat.reveal :is(.f,.fico,.f h3){opacity:1;translate:none;scale:none;transition:none}.feat.reveal .f h3{background-size:100% 2px}}
.f p{color:var(--muted);font-size:14.5px}

/* ---------- Slide 3: Devices ---------- */
.eco-h{text-align:center;font-size:clamp(22px,2.4vw,28px);letter-spacing:.05em;margin:0 0 20px}
.eco{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:18px;margin-bottom:40px}
.eco:last-child{margin-bottom:0}
.dev{background:var(--card2);border-radius:28px;padding:22px 14px;text-align:center;transition:.3s}
.dev:hover{transform:translateY(-6px)}
.dev.wide{grid-column:span 2}
.dev .imgbox{height:120px;display:flex;align-items:center;justify-content:center;gap:6px;margin-bottom:14px;overflow:hidden}
.dev .imgbox img{flex:1 1 0;min-width:0;height:100%;object-fit:contain;scale:1.4;mix-blend-mode:multiply;filter:brightness(1.07)}
.dev .imgbox img.full{scale:1}
:root:not([data-theme="light"]) .dev .imgbox{background:#fff;border-radius:16px;padding:8px}
.dev b{font-size:16px;font-weight:400}

.eco .dev.reveal:not(.in){transform:none}
.eco .dev.reveal{opacity:0;translate:0 56px;scale:.94;transition:opacity .7s ease var(--d,0s),translate .9s cubic-bezier(.2,.8,.2,1) var(--d,0s),scale .9s cubic-bezier(.2,.8,.2,1) var(--d,0s),transform .3s,background .3s}
.eco .dev.reveal.in{opacity:1;translate:none;scale:none}
.eco .dev:nth-child(2){--d:.12s}.eco .dev:nth-child(3){--d:.24s}.eco .dev:nth-child(4){--d:.36s}.eco .dev:nth-child(5){--d:.48s}
.eco .dev.reveal :is(.imgbox img,b){opacity:0;translate:0 26px;transition:opacity .6s ease,translate .8s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--d,0s) + .3s + var(--i,0)*.1s)}
.eco .dev.reveal.in :is(.imgbox img,b){opacity:1;translate:none}
.eco .dev .imgbox img:nth-child(2){--i:1}.eco .dev .imgbox img:nth-child(3){--i:2}.eco .dev .imgbox img:nth-child(4){--i:3}
.eco .dev b{--i:3}
@media(prefers-reduced-motion:reduce){.eco .dev.reveal{opacity:1;translate:none;scale:none;transition:none}.eco .dev.reveal :is(.imgbox img,b){opacity:1;translate:none;transition:none}}

/* ---------- Slide 5: Infrastructure ---------- */
.infra{display:grid;grid-template-columns:1.9fr 1fr;gap:0 36px;align-items:start}
.infra>.sec-head{grid-area:1/1}
.infra-row{display:contents}
.ec{grid-area:2/1/5;display:grid;grid-template-rows:subgrid}
.infra-side{grid-area:1/2/5;align-self:stretch}
.h-logo{display:inline-block;height:1.3em;width:auto;vertical-align:baseline;margin-left:.25em}
.infra>.sec-head p{text-align:justify}
.box{border:2px solid var(--edge);border-radius:10px;background:var(--card);position:relative}
.box h4{background:var(--grad-action);color:#fff;text-align:center;padding:8px 10px;font-size:13.5px;letter-spacing:.04em;text-transform:uppercase;border-radius:7px 7px 0 0}
.box-b{padding:14px;display:flex;gap:12px;align-items:center;justify-content:center;font-size:14px;color:var(--muted);text-align:center}
.box-b p b{color:var(--txt)}
svg.ico.big{width:48px;height:48px}
.icons{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:8px;padding:14px 10px;text-align:center;font-size:12.5px;line-height:1.35;color:var(--muted)}
.icons.four{grid-template-columns:repeat(4,1fr)}
.icons .mi{width:40px;height:40px;stroke-linecap:round;stroke-linejoin:round}
.mi-f,.mi-o,.mi-ct,.mi-cl,.mi-cr{stroke:#2f3b8c;stroke-width:1.6}.mi-f{fill:#dfe9fd}.mi-s{fill:#fff}.mi-o{fill:none}
.mi-a{fill:#3b7cf6}.mi-w{fill:none;stroke:#fff;stroke-width:2}.mi-l{fill:none;stroke:#1cc9d0;stroke-width:2.2}
.mi-g{fill:none;stroke:#2f3b8c;stroke-width:3;stroke-dasharray:2.2 1.4;stroke-linecap:butt}.mi-h{fill:#fff}
.mi-ct{fill:#e6eefe}.mi-cl{fill:#b4cbf5}.mi-cr{fill:#86a8ea}
.mi-a.mi-o{fill:#3b7cf6}
:root:not([data-theme="light"]) :is(.mi-f,.mi-o,.mi-ct,.mi-cl,.mi-cr,.mi-g){stroke:#9fb0ff}
.icons svg{display:block;margin:0 auto 6px}
.ec-row{display:grid;grid-template-columns:2.2fr auto 1.8fr;gap:12px}
.ec-arrow{width:48px;height:16px;color:var(--accent-text)}
.ec-bus{position:relative;margin:22px 0;padding:8px;text-align:center;background:var(--grad-action);color:#fff;border-radius:10px;font-weight:700;font-size:14px;letter-spacing:.04em;text-transform:uppercase}
.ec-row4>.box::before{content:"";position:absolute;left:50%;top:-22px;height:20px;border-left:2px solid var(--accent-text)}
.ec-row4{display:grid;grid-template-columns:1fr 1fr auto 1fr auto 1.7fr;gap:10px}
.ec-row4>.box::after{content:"";position:absolute;left:calc(50% - 5px);top:-9px;border:6px solid transparent;border-bottom:0;border-top:8px solid var(--accent-text)}
.ec-row>.box:first-child::before{content:"";position:absolute;left:50%;bottom:-22px;height:14px;border-left:2px solid var(--accent-text)}
.ec-row>.box:first-child::after{content:"";position:absolute;left:calc(50% - 5px);bottom:-9px;border:6px solid transparent;border-top:0;border-bottom:8px solid var(--accent-text)}
.ec-arrow,.ec-dots{align-self:center}
.ec-dots{width:36px;height:6px;background:radial-gradient(circle,var(--accent-text) 2.5px,transparent 3px) 0 0/12px 6px repeat-x}
.ec-ill{width:100%;max-width:120px;height:auto}
.ec-db{fill:#dfe6f5;stroke:#8d9bc4}.ec-db-top{fill:#f2f5fc;stroke:#8d9bc4}.ec-db-band{fill:none;stroke:#8d9bc4}
.ptn{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;align-items:center;padding:12px 14px 14px;font-size:14px;color:var(--muted);text-align:center}
.ptn b{color:var(--txt);font-weight:500}
.ptn p{grid-column:1/-1;font-size:13.5px}
.ptn-ill{width:64px;height:60px}
.ptn-shield,.ptn-badge path:first-child{fill:#3b7cf6}
.ptn-check,.ptn-badge path+path{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ptn-end{white-space:nowrap}
.ptn-badge{display:inline-block;width:1.4em;height:1.4em;vertical-align:-.35em}
.devs{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 16px;padding:14px 12px}
.devs svg.ico{width:30px;height:30px}
.devs text{fill:var(--accent-text);stroke:none;font-size:6.5px;font-weight:700}
.infra-side{display:grid;grid-template-rows:subgrid}
.infra-side>.map{grid-row:1/4;position:relative}
.infra-side>.box{grid-row:4}
.map{margin:0}
.map svg{display:block;position:absolute;top:0;right:0;width:calc(100% + 30px);height:auto;overflow:visible}
.vn-s1{stop-color:#1d2656}.vn-s2{stop-color:#121a42}
[data-theme="light"] .vn-s1{stop-color:#e6efff}[data-theme="light"] .vn-s2{stop-color:#bdd5f6}
.vn-land{fill:url(#vnLand);stroke:rgba(255,255,255,.22);stroke-width:1;filter:drop-shadow(0 10px 22px rgba(28,201,208,.18))}
[data-theme="light"] .vn-land{stroke:#fff;filter:drop-shadow(0 10px 22px rgba(53,53,168,.2))}
.vn-links path{fill:none;stroke:#1cc9d0;stroke-width:1.8;stroke-dasharray:2 6;stroke-linecap:round;animation:vn-flow 1.2s linear infinite}
@keyframes vn-flow{to{stroke-dashoffset:-16}}
.vn-node circle{fill:#fff;stroke:#19c39a;stroke-width:3.5}
.vn-node .vn-halo{fill:#19c39a;stroke:none;opacity:.25;transform-box:fill-box;transform-origin:center;animation:vn-pulse 2.4s ease-out infinite}
@keyframes vn-pulse{from{scale:.6;opacity:.45}to{scale:1.8;opacity:0}}
.vn-label{font-size:10.5px;font-weight:600;letter-spacing:.06em;fill:var(--muted)}
.vn-core{font-size:11.5px;font-weight:700;letter-spacing:.08em;fill:var(--heading)}
.vn-isl circle{fill:#3a4a8f}[data-theme="light"] .vn-isl circle{fill:#8fb2ea}
.vn-ring{fill:none;stroke:#1cc9d0;stroke-width:1.5;opacity:.7}
.vn-rfront{fill:#15205a}.vn-rside{fill:#2a3a86}.vn-rtop{fill:#3d51a8}
.vn-slot{stroke:#4a7cff;stroke-width:1.2;opacity:.55}.vn-led{fill:#1cc9d0}
.vn-draw{fill:none;stroke:#fff;stroke-width:8;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.1s cubic-bezier(.5,0,.2,1) .4s}
.vn-draw:nth-child(2){transition-delay:.55s}.vn-draw:nth-child(3){transition-delay:.7s}
.map.in .vn-draw{stroke-dashoffset:0}
.ec.reveal{opacity:1;transform:none}
.ec.reveal :is(.ec-row>.box,.ec-row4>*){opacity:0;translate:0 24px;transition:opacity .6s ease var(--d),translate .7s cubic-bezier(.2,.8,.2,1) var(--d)}
.ec.reveal .ec-row>.ec-arrow{opacity:0;scale:.2 1;transition:opacity .4s ease var(--d),scale .5s cubic-bezier(.2,.8,.2,1) var(--d)}
.ec.reveal .ec-bus{clip-path:inset(0 100% 0 0 round 10px);transition:clip-path .6s cubic-bezier(.6,0,.2,1) var(--d)}
.ec.reveal :is(.ec-row4>.box,.ec-row>.box:first-child)::before{scale:1 0;transition:scale .4s ease calc(var(--c,var(--d)) + .15s)}
.ec.reveal .ec-row4>.box::before{transform-origin:top}.ec.reveal .ec-row>.box:first-child::before{transform-origin:bottom}
.ec.reveal :is(.ec-row4>.box,.ec-row>.box:first-child)::after{opacity:0;transition:opacity .3s ease calc(var(--c,var(--d)) + .45s)}
.ec-row>.box:first-child{--d:0s;--c:.95s}.ec-row>.box:last-child{--d:.15s}.ec-row>.ec-arrow{--d:.3s}.ec-bus{--d:.45s}
.ec-row4>:nth-child(1){--d:.9s}.ec-row4>:nth-child(2){--d:1s}.ec-row4>:nth-child(3){--d:1.1s}.ec-row4>:nth-child(4){--d:1.2s}.ec-row4>:nth-child(5){--d:1.3s}.ec-row4>:nth-child(6){--d:1.4s}
.ec.reveal.in :is(.ec-row>*,.ec-row4>*){opacity:1;translate:none;scale:none}
.ec.reveal.in .ec-bus{clip-path:inset(0 0 0 0 round 10px)}
.ec.reveal.in :is(.ec-row4>.box,.ec-row>.box:first-child)::before{scale:none}
.ec.reveal.in :is(.ec-row4>.box,.ec-row>.box:first-child)::after{opacity:1}
@media(prefers-reduced-motion:reduce){.vn-links path,.vn-node .vn-halo{animation:none}.vn-draw{stroke-dashoffset:0;transition:none}.ec.reveal :is(.ec-row>*,.ec-row4>*,.ec-bus),.ec.reveal :is(.ec-row4>.box,.ec-row>.box:first-child)::before,.ec.reveal :is(.ec-row4>.box,.ec-row>.box:first-child)::after{opacity:1;translate:none;scale:none;clip-path:none;transition:none}}

/* ---------- Slides 6 & 10: diagram + text ---------- */
.arch2{display:grid;grid-template-columns:1.8fr 1fr;gap:10px 32px;align-items:center}
#architecture .sec-head p,#deploy .sec-head p,#partners .sec-head p{max-width:none;text-align:justify;text-align-last:center;font-size:18px;color:color-mix(in srgb,var(--txt) 85%,var(--muted))}
#architecture .sec-head b,#partners .sec-head b{color:var(--accent-text)}
#architecture .sec-head{margin-bottom:clamp(8px,1vh,14px)}
#architecture .sec-head h2{margin-bottom:12px}
#architecture .bul{font-size:15px;line-height:1.5;text-align:justify}
#architecture .bul li{margin-bottom:3px}
#architecture .bar h3{font-size:clamp(18px,1.6vw,22px);margin-bottom:4px}
#architecture .diagram{grid-row:span 4;align-self:stretch;position:relative;border:0;padding:0;background:none}
#architecture .diagram img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
:root:not([data-theme="light"]) #architecture .diagram{background:#fff;border-radius:16px;overflow:hidden}
.bar{position:relative;padding-left:24px}
.bar h3{font-size:clamp(20px,2vw,26px);color:var(--accent-text);margin-bottom:8px}
.bar::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--teal)}
.bar.p::before{background:var(--purple)}
.bar.p h3{color:var(--purple)}
#deploy .diagram{border:0;padding:0;background:none}
:root:not([data-theme="light"]) #deploy .diagram{background:#fff;border-radius:16px;overflow:hidden}
#architecture .diagram.reveal{transform:scale(.96)}#architecture .diagram.reveal.in{transform:none}
#architecture .bar.reveal{transform:translateX(40px);transition-delay:var(--d)}#architecture .bar.reveal.in{transform:none}
#architecture .bar.reveal::before{scale:1 0;transform-origin:top;transition:scale .6s cubic-bezier(.6,0,.2,1) calc(var(--d) + .25s)}#architecture .bar.reveal.in::before{scale:none}
.arch2>:nth-child(2){--d:.15s}.arch2>:nth-child(3){--d:.27s}.arch2>:nth-child(4){--d:.39s}.arch2>:nth-child(5){--d:.51s}
@media(prefers-reduced-motion:reduce){#architecture :is(.diagram,.bar).reveal{opacity:1;transform:none;transition:none}#architecture .bar.reveal::before{scale:none;transition:none}}
.traits-h{display:flex;align-items:center;gap:14px;font-size:clamp(20px,1.8vw,24px);margin-bottom:18px}
.traits-h::after{content:"";flex:1;height:2px;border-radius:2px;background:var(--grad)}
.trait{background:var(--grad-soft);border:1px solid var(--line);border-left:4px solid var(--purple);border-radius:12px;padding:16px 20px;margin-bottom:14px;color:var(--muted);font-size:15.5px}
.trait b{color:var(--txt)}
.trait{transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1),border-color .3s,background .3s}
.trait:hover{border-left-color:var(--teal)}
#deploy .diagram.reveal{transform:scale(.96)}
#deploy .trait.reveal{transform:translateX(40px);transition-delay:var(--d),var(--d),0s,0s}
#deploy .reveal.in{transform:none}
#deploy .trait.reveal.in:hover{transform:translateX(-4px)}
.traits>:nth-child(2){--d:.2s}.traits>:nth-child(3){--d:.32s}.traits>:nth-child(4){--d:.44s}.traits>:nth-child(5){--d:.56s}
.traits-h.reveal::after{scale:0 1;transform-origin:left;transition:scale .9s cubic-bezier(.6,0,.2,1) .25s}
.traits-h.reveal.in::after{scale:none}
@media(prefers-reduced-motion:reduce){#deploy .reveal{opacity:1;transform:none;transition:none}.traits-h.reveal::after{scale:none;transition:none}}

/* ---------- Slide 7: SDK ---------- */
.sdk-top{display:grid;grid-template-columns:1fr 360px;gap:32px;align-items:center;margin-bottom:28px}
.sdk-ill{display:block;width:100%;height:auto}
.sdk-ill.reveal :is(.sdk-hero,.sdk-tile,.sdk-cursor){opacity:0;transition:opacity .5s ease var(--t),translate .7s cubic-bezier(.2,.8,.2,1) var(--t)}
.sdk-ill.reveal .sdk-hero{translate:0 -14px;--t:.2s}
.sdk-ill.reveal .sdk-tile{translate:0 26px}.sdk-tile:nth-of-type(1){--t:.45s}.sdk-tile:nth-of-type(2){--t:.55s}.sdk-tile:nth-of-type(3){--t:.65s}.sdk-tile:nth-of-type(4){--t:.75s}
.sdk-ill.reveal .sdk-cursor{translate:90px 70px;--t:.8s;transform-box:fill-box;transform-origin:0 0}
.sdk-ill.reveal.in :is(.sdk-hero,.sdk-tile,.sdk-cursor){opacity:1;translate:none}
.sdk-ill.in .sdk-cursor{animation:sdk-click .3s ease 1.55s}
@keyframes sdk-click{50%{scale:.75}}
#sdk .card.outline:hover{border-color:transparent;background:linear-gradient(var(--card),var(--card)) padding-box,var(--grad) border-box;box-shadow:0 16px 34px -16px rgba(126,54,228,.45)}
#sdk .portal.reveal{transform:translateX(-48px)}#sdk .sdk-bottom .lead-b.reveal{transform:translateX(48px);transition-delay:.15s}
#sdk :is(.portal,.sdk-bottom .lead-b).reveal.in{transform:none}
@media(prefers-reduced-motion:reduce){.sdk-ill.reveal :is(.sdk-hero,.sdk-tile,.sdk-cursor){opacity:1;translate:none;transition:none;animation:none}#sdk :is(.portal,.sdk-bottom .lead-b).reveal{transform:none;transition:none}}
.sdk-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;align-items:start}
.sdk-bottom{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center;margin-top:32px}
.portal{display:block;width:100%;height:auto;border:1px solid var(--line);box-shadow:0 18px 40px -18px rgba(53,53,168,.35)}

/* ---------- Slide 8: Module ---------- */
[data-theme="light"] .mod-card{box-shadow:0 12px 32px -18px rgba(53,53,168,.28)}
.mod{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.mod-mid{display:grid;gap:22px}
.mod-card{border-radius:28px;padding:26px;background:radial-gradient(80% 60% at 0% 0%,rgba(126,54,228,.14),transparent 70%),radial-gradient(80% 60% at 100% 100%,rgba(28,201,208,.12),transparent 70%),var(--bg)}
.mod-card::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:var(--grad)}
.mod-h{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.mod-h .fico{width:44px;height:44px}.mod-h .fico svg.ico{width:22px;height:22px}
.mod-card h3{font-size:clamp(17px,1.4vw,19px);line-height:1.3;margin:0;color:var(--heading);text-wrap:balance}
.mod-card .bul,.mod-card p{font-size:14.5px;text-align:justify}
.mod-card p+.bul{margin-top:12px}
#ecosystem .mod-card h3{text-align:center;margin-bottom:14px}
#ecosystem .mod-card{transition:opacity .7s ease var(--d),transform .7s cubic-bezier(.2,.8,.2,1) var(--d),box-shadow .3s}
#ecosystem .mod-card.in:hover{transform:translateY(-6px);box-shadow:0 22px 40px -22px rgba(126,54,228,.55);transition-delay:0s}
#ecosystem .grid-cards>:nth-child(1){--d:0s}#ecosystem .grid-cards>:nth-child(2){--d:.15s}#ecosystem .grid-cards>:nth-child(3){--d:.3s}
#ecosystem .mod-card.reveal::before{scale:0 1;transform-origin:left;transition:scale .8s cubic-bezier(.6,0,.2,1) calc(var(--d) + .35s)}
#ecosystem .mod-card.reveal.in::before{scale:none}
#ecosystem .mod-card.reveal .bul>li{opacity:0;translate:14px 0;transition:opacity .5s ease,translate .6s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--d) + .55s + var(--i,0) * .12s)}
#ecosystem .mod-card.reveal.in .bul>li{opacity:1;translate:none}
#ecosystem .bul>li:nth-child(2){--i:1}
@media(prefers-reduced-motion:reduce){#ecosystem .mod-card.reveal,#ecosystem .mod-card.reveal::before,#ecosystem .mod-card.reveal .bul>li{opacity:1;transform:none;scale:none;translate:none;transition:none}}
.mod-card b{color:var(--txt)}
.mod-card .bul,.mod-card .bul ul{list-style:none;padding-left:0}
.mod-card .bul ul{margin-top:4px}
.mod-card .bul li{position:relative;padding-left:26px}
.mod-card .bul li::before{content:"";position:absolute;left:0;top:3px;width:17px;height:17px;background:var(--accent-text);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M8 12.5l2.7 2.7L16 9.5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M8 12.5l2.7 2.7L16 9.5'/%3E%3C/svg%3E") center/contain no-repeat}
.mod-card .bul ul li{padding-left:18px}
:root:not([data-theme="light"]) .mod-card .bul ul li::before{background:#a57cf2}
.mod-card .bul ul li::before{top:6px;width:11px;height:11px;background:var(--purple);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat}
.mod-img{margin:0 0 20px;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:var(--grad-soft);border:1px dashed var(--line)}
.mod-img img{width:100%;height:100%;object-fit:cover}
.mod-img img.fit{object-fit:contain;padding:10px}
.mod-img.natural{aspect-ratio:auto}.mod-img.natural img{height:auto}
.spec{display:grid;grid-template-columns:minmax(0,300px) minmax(0,320px) minmax(0,290px) minmax(0,170px);justify-content:space-between;gap:24px;align-items:center}
.spec-col{display:grid;gap:14px}
.spec-img{display:block;width:100%;height:auto;background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px}
.spec-img.pic{padding:0}
.spec-img{cursor:zoom-in;transition:transform .3s,box-shadow .3s,opacity .6s ease var(--d),translate .7s cubic-bezier(.2,.8,.2,1) var(--d),scale .7s cubic-bezier(.2,.8,.2,1) var(--d)}
.spec-img:is(:hover,:focus-visible){transform:translateY(-5px);border-color:transparent;background:linear-gradient(#fff,#fff) padding-box,var(--grad) border-box;box-shadow:0 18px 36px -18px rgba(126,54,228,.5);outline:none}
.spec-col.reveal{opacity:1;transform:none}
.spec-col.reveal .spec-img{opacity:0;translate:0 22px;scale:.96}
.spec-col.reveal.in .spec-img{opacity:1;translate:none;scale:none}
.spec-col:nth-child(2){--c:2}.spec-col:nth-child(3){--c:3}.spec-col:nth-child(4){--c:5}
.spec-img{--d:calc((var(--c,0) + var(--i,0)) * .08s)}.spec-img:nth-child(2){--i:1}
.zoom{margin:auto;border:0;padding:0;background:none;max-width:none;max-height:none;overflow:visible;outline:none}
.zoom::backdrop{background:rgba(7,10,24,.82);backdrop-filter:blur(4px)}
.zoom img{display:block;max-width:92vw;max-height:90vh;border-radius:14px;background:#fff;cursor:zoom-out;animation:zoom-in .25s cubic-bezier(.2,.8,.2,1)}
.zoom iframe{display:block;width:min(92vw,calc(90vh*16/9));aspect-ratio:16/9;border:0;border-radius:14px;background:#000;animation:zoom-in .25s cubic-bezier(.2,.8,.2,1)}
@keyframes zoom-in{from{opacity:0;scale:.92}}
@media(prefers-reduced-motion:reduce){.spec-col.reveal .spec-img{opacity:1;translate:none;scale:none;transition:none}.zoom img,.zoom iframe{animation:none}}
.mod-img:has(img){border-style:solid}

/* ---------- Slides 11 & 12: orbit linking the two slides ---------- */
#why, #audience{position:relative;scroll-snap-align:start;scroll-snap-stop:normal}
.pair-wm{right:-6%;width:clamp(360px,42vw,640px);opacity:.1}
#why .pair-wm{bottom:0;translate:0 50%}
#audience .pair-wm{top:0;translate:0 -50%}
:is(#why,#audience)::before{content:"";position:absolute;left:-110px;top:-110px;width:260px;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,#0000 58%,rgba(126,54,228,.3) 60% 72%,rgba(126,54,228,.1) 74% 88%,#0000 90%);pointer-events:none}
:is(#why,#audience)::after{content:"";position:absolute;right:0;top:0;bottom:0;width:clamp(20px,3vw,48px);background:linear-gradient(rgba(126,54,228,var(--a0)),rgba(126,54,228,var(--a1)));pointer-events:none}
#why{--a0:.04;--a1:.24}
#audience{--a0:.24;--a1:.48}
#why{padding-bottom:0}
#audience{padding-top:0}
#why,#audience{min-height:calc(100vh - 74px);min-height:calc(100svh - 74px)}

@media(min-width:981px){
  #why,#audience{height:calc(100vh - 74px);height:calc(100svh - 74px);overflow:hidden}
  #why{padding:14px 0 0}
  #why .wrap{display:flex;flex-direction:column;justify-content:flex-start;height:100%;padding-bottom:0}
  #why .wrap::before,#why .wrap::after{content:"";flex:1}
  #why .wrap::after{order:1}
  #why .orbit-box{order:2}

  #audience{padding:0 0 14px}
  #audience .wrap{display:flex;flex-direction:column;justify-content:flex-start;height:100%;padding-top:0}
  #audience .grid-cards{flex:1 1 auto;margin-top:0;align-content:stretch}
  :is(#why,#audience) .grid-cards{column-gap:2%;grid-template-rows:auto auto auto}
  #audience .grid-cards{grid-template-rows:minmax(0,1fr) auto auto;min-height:0}
  :is(#why,#audience) .box-o{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0}
  .orbit-box{flex:none}
}

.orbit-box{position:relative}
.orbit{position:relative;display:block;width:100%;overflow:visible;pointer-events:none}
.rings,.spin{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;will-change:transform}
.orbit *{pointer-events:auto}
.rings path{fill:none;stroke-width:2}
.rings .r1{stroke:var(--purple);stroke-dasharray:10 6}
.rings .r2{stroke:var(--edge);stroke-dasharray:8 6}

.orbit .ln{stroke:var(--edge);stroke-width:2;transition:stroke .35s,stroke-width .35s,filter .35s}
.orbit .dot{fill:var(--teal);transform-box:fill-box;transform-origin:center;transition:fill .35s,transform .35s,filter .35s}
.spin text{fill:#fff;font:700 15px 'Inter',sans-serif;letter-spacing:.015em}
.spin .t-aud{font-size:17px}

#why .wrap:has(.box-o[data-card="1"]:hover) .orbit .ln1,
#why .wrap:has(.box-o[data-card="2"]:hover) .orbit .ln2,
#why .wrap:has(.box-o[data-card="3"]:hover) .orbit .ln3,
#why .wrap:has(.box-o[data-card="4"]:hover) .orbit .ln4{stroke:var(--teal);stroke-width:3.5px;filter:drop-shadow(0 0 10px rgba(28,201,208,.85))}

#why .wrap:has(.box-o[data-card="1"]:hover) .orbit .dot1,
#why .wrap:has(.box-o[data-card="2"]:hover) .orbit .dot2,
#why .wrap:has(.box-o[data-card="3"]:hover) .orbit .dot3,
#why .wrap:has(.box-o[data-card="4"]:hover) .orbit .dot4{fill:#fff;transform:scale(1.6);filter:drop-shadow(0 0 12px var(--teal))}

#audience .wrap:has(.box-o[data-card="1"]:hover) .orbit .ln1,
#audience .wrap:has(.box-o[data-card="2"]:hover) .orbit .ln2,
#audience .wrap:has(.box-o[data-card="3"]:hover) .orbit .ln3{stroke:var(--teal);stroke-width:3.5px;filter:drop-shadow(0 0 10px rgba(28,201,208,.85))}

#audience .wrap:has(.box-o[data-card="1"]:hover) .orbit .dot1,
#audience .wrap:has(.box-o[data-card="2"]:hover) .orbit .dot2,
#audience .wrap:has(.box-o[data-card="3"]:hover) .orbit .dot3{fill:#fff;transform:scale(1.6);filter:drop-shadow(0 0 12px var(--teal))}

.orbit .ln.active{stroke:var(--teal)!important;stroke-width:3.5px!important;filter:drop-shadow(0 0 10px rgba(28,201,208,.85))!important}
.orbit .dot.active{fill:#fff!important;transform:scale(1.6)!important;filter:drop-shadow(0 0 12px var(--teal))!important}

@media(prefers-reduced-motion:no-preference){
  .rings .r1{animation:orbitFlow 35s linear infinite}
  .rings .r2{animation:orbitFlowRev 30s linear infinite}
  [data-enter=down]{--y:-40px;--o:1}
  [data-enter=up]{--y:40px;--o:-1}
  #why[data-enter=down],#audience[data-enter=up]{--tc:0s;--tl:.55s;--td:1.15s}
  #why[data-enter=up],#audience[data-enter=down]{--td:0s;--tl:.3s;--tc:.85s}
  :is([data-card="2"],.ln2,.dot2){--i:1}:is([data-card="3"],.ln3,.dot3){--i:2}:is([data-card="4"],.ln4,.dot4){--i:3}
  :is(#why,#audience):not([data-enter],[data-seen]) .box-o{opacity:0}
  :is(#why,#audience):not([data-enter],[data-seen]) .orbit .ln{stroke-dasharray:1 1;stroke-dashoffset:1}
  :is(#why,#audience):not([data-enter],[data-seen]) .orbit .dot{scale:0}
  [data-enter]:not([data-seen]) .box-o{animation:cardIn .75s cubic-bezier(.2,.8,.2,1) calc(var(--i,0)*.35s + var(--tc)) both}
  [data-enter]:not([data-seen]) .orbit .ln{stroke-dasharray:1 1;animation:lnDraw .6s ease-in-out calc(var(--i,0)*.35s + var(--tl)) both}
  [data-enter]:not([data-seen]) .orbit .dot{animation:dotPop .45s cubic-bezier(.3,1.6,.5,1) calc(var(--i,0)*.35s + var(--td)) both}
  .spin{rotate:calc(var(--p,0)*360deg)}
  #why .spin{transform-origin:50% 100%}
  #audience .spin{transform-origin:50% 0}
  [data-enter][data-seen] .orbit .ln{animation:lnPulse .5s ease calc(var(--i,0)*.12s + var(--tl)/2)}
  [data-enter][data-seen] .orbit .dot{animation:dotPulse .45s ease calc(var(--i,0)*.12s + var(--td)/2)}
}
@keyframes orbitFlow{to{stroke-dashoffset:1000}}
@keyframes orbitFlowRev{to{stroke-dashoffset:-1000}}
@keyframes cardIn{from{opacity:0;translate:0 var(--y);scale:.96}}
@keyframes lnDraw{from{stroke-dashoffset:var(--o)}}
@keyframes dotPop{from{scale:0}}
@keyframes lnPulse{40%{stroke:var(--teal)}}
@keyframes dotPulse{40%{scale:1.5}}



/* ---------- Slide 13: Value ---------- */
.val{position:relative;display:grid;grid-template-columns:1fr .95fr 1fr;gap:22px 4%;align-items:center}
.bub{position:relative;z-index:1;display:flex;align-items:center;gap:16px}
.bub .fico{width:48px;height:48px;border-radius:14px;box-shadow:0 0 0 6px var(--bg2);transition:transform .3s}
.val-links{display:none;position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.val-links path{vector-effect:non-scaling-stroke;animation-direction:reverse}
#value .reveal{transform:none;transition:opacity .6s ease var(--d,0s),translate .8s cubic-bezier(.2,.8,.2,1) var(--d,0s),scale .8s cubic-bezier(.2,.8,.2,1) var(--d,0s),transform .3s,box-shadow .3s}
@media(min-width:981px){#value .vcenter.reveal{scale:.85}#value .bub.reveal{translate:40px 0}#value .val-row~.val-row .bub.reveal:not(.in){translate:-40px 0}}
#value .reveal.in{scale:none;translate:none}
.val-list,.val-row{display:contents}
.val-row>:nth-child(1){--d:.55s}.val-row>:nth-child(2){--d:.7s}.val-row>:nth-child(3){--d:.85s}
.bub:hover .fico{transform:scale(1.12)}
.val-links{clip-path:inset(0 50%);transition:clip-path 1.1s cubic-bezier(.6,0,.2,1) .3s}
.vcenter.in~.val-links{clip-path:inset(0)}
@media(prefers-reduced-motion:reduce){#value .reveal{opacity:1;scale:none;translate:none;transition:none}.val-links{clip-path:none;transition:none}}
.bub h3{font-size:16.5px;margin-bottom:4px;text-wrap:balance}
.bub p{font-size:14px;color:var(--muted);text-align:justify}
.bub .nw{white-space:nowrap}
@media(min-width:981px){
  .val{row-gap:clamp(28px,6vh,64px)}
  .bub h3{font-size:19px;margin-bottom:6px}.bub p{font-size:15.5px;line-height:1.65}
  .bub .fico{width:56px;height:56px}.bub .fico svg.ico{width:28px;height:28px}
  #ecosystem .sec-head{margin-bottom:clamp(28px,5vh,56px)}
  #ecosystem .mod-card{padding:clamp(26px,4.5vh,44px) 32px}
  #ecosystem .mod-card h3{font-size:21px;margin-bottom:20px}
  #ecosystem .grid-cards{grid-template-rows:auto auto 1fr}
  #ecosystem .mod-card{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0}
  #ecosystem .mod-card h3{align-self:center}
  #ecosystem .mod-card p:last-child{grid-row:span 2}
  #ecosystem .mod-card :is(p,.bul){font-size:16px;line-height:1.7}
}
.vcenter{justify-self:center;width:100%;aspect-ratio:1;background:var(--grad);clip-path:polygon(0 0,84% 0,100% 16%,100% 100%,16% 100%,0 84%);text-align:center;padding:32px 12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;container-type:inline-size}
.vcenter h2{color:#fff;font-size:8.6cqi;white-space:nowrap}
.vcenter img{width:40%;filter:brightness(0) invert(1);opacity:.35}

/* ---------- Slides 14 & 15: Ecosystem ---------- */
.eco-wm{left:-60px;bottom:-40px;width:300px}
.sdk-wm{right:-70px;bottom:-90px;width:clamp(200px,24vw,340px)}
.panel{border:2px dashed var(--edge);border-radius:32px;padding:clamp(10px,1.4vw,20px);background:#fff;transition:transform .3s,border-color .3s,box-shadow .3s}
#d2c h2{font-size:clamp(22px,2.2vw,30px);text-align:center;margin-bottom:clamp(12px,2vh,20px)}
.panel img{width:100%;aspect-ratio:1.105;max-height:calc((100svh - 74px - 2*clamp(20px,4vh,48px))/var(--z,1) - 100px);object-fit:contain;cursor:zoom-in;outline:none}
.panel:is(:hover,:focus-within){transform:translateY(-6px);border-color:var(--teal);box-shadow:0 22px 40px -22px rgba(126,54,228,.55)}
#d2c .grid-cards>:nth-child(2){--d:.15s}
#d2c .reveal .panel img{opacity:0;scale:.94;transition:opacity .7s ease calc(var(--d,0s) + .2s),scale .9s cubic-bezier(.2,.8,.2,1) calc(var(--d,0s) + .2s)}
#d2c .reveal.in .panel img{opacity:1;scale:none}
@media(prefers-reduced-motion:reduce){#d2c .reveal .panel img{opacity:1;scale:none;transition:none}.panel{transition:none}}

/* ---------- Slide 16: Partners ---------- */
.marquee{--g:24px;display:flex;overflow:hidden;padding:14px 0;-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marquee+.marquee{margin-top:clamp(4px,1.5vh,16px)}
.marquee ul{display:flex;gap:var(--g);padding-right:var(--g);list-style:none;flex:none;animation:marquee calc(var(--n,10)*4.5s) linear infinite}
.marquee.rev ul{animation-direction:reverse}
.marquee:hover ul{animation-play-state:paused}
.marquee li{flex:none;width:200px;height:96px;padding:12px 24px;background:#fff;border-radius:14px;transition:translate .3s,box-shadow .3s}
.marquee li:hover{translate:0 -4px;box-shadow:0 14px 28px -14px rgba(126,54,228,.5)}
.marquee img{width:100%;height:100%;object-fit:contain}
@keyframes marquee{to{translate:-100%}}
@media(prefers-reduced-motion:reduce){.marquee{overflow-x:auto;scrollbar-width:thin;-webkit-mask:none;mask:none}.marquee ul{animation:none}.marquee>[aria-hidden]{display:none}.marquee li{transition:none}}

/* ---------- Slide 17: Contact ---------- */
.contact-wm{right:-80px;top:-60px;width:420px}
#contact h2{font-size:clamp(26px,2.4vw,34px);margin-bottom:20px}
.contact{border:2px dashed var(--edge);border-radius:32px;padding:32px;display:grid;grid-template-columns:1.1fr 1fr;gap:24px 40px;align-items:center}
.contact .lead-b{grid-column:1/-1}
.form{display:grid;gap:14px}
.fld{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start}
.fld svg.ico{width:40px;height:40px;margin-top:8px;stroke:var(--heading);transition:stroke .25s,scale .25s}
.fld:focus-within svg.ico{stroke:var(--accent-text);scale:1.12}
.form input,.form textarea{font:inherit;padding:14px 18px;border-radius:12px;border:1.5px solid var(--muted);background:var(--card);color:var(--txt);resize:vertical;transition:border-color .25s,box-shadow .25s}
.form :is(input,textarea):focus{border-color:var(--accent-text);box-shadow:0 0 0 5px color-mix(in srgb,var(--accent-text) 20%,transparent)}
.form ::placeholder{color:var(--muted)}
.form input:focus-visible,.form textarea:focus-visible{outline:2px solid var(--accent-text);outline-offset:1px}
.form .btn{--glow:0 0 22px rgba(126,54,228,.65),0 0 44px rgba(28,201,208,.35);justify-self:center;margin:14px 0 0 58px;padding:20px 64px;font-size:19px;font-weight:800;letter-spacing:.05em;gap:12px;position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(90deg,#7e36e4,#3535a8,#0b8f95,#3535a8,#7e36e4) 0/200% 100%;box-shadow:var(--glow);animation:cta-pulse 2.4s ease-out infinite,cta-flow 4s linear infinite}
.form .btn::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.4) 50%,transparent 65%);translate:-100% 0;animation:cta-sheen 3.2s ease-in-out infinite}
.form .btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:translate .3s}
.form .btn:hover{animation-name:none,cta-flow;box-shadow:0 0 30px rgba(126,54,228,.85),0 0 60px rgba(28,201,208,.5)}
.form .btn:hover svg{translate:3px -3px}
.form .btn:focus-visible{outline:2px solid var(--accent-text);outline-offset:4px}
@keyframes cta-pulse{0%{scale:1;box-shadow:var(--glow),0 0 0 0 rgba(28,201,208,.75)}12%{scale:1.06}24%{scale:1}70%,100%{box-shadow:var(--glow),0 0 0 24px rgba(28,201,208,0)}}
@keyframes cta-flow{to{background-position:-200% 0}}
@keyframes cta-sheen{55%,100%{translate:100% 0}}
.contact.reveal .form>*{opacity:0;translate:0 18px;transition:opacity .5s ease var(--d,0s),translate .6s cubic-bezier(.2,.8,.2,1) var(--d,0s),transform .25s,box-shadow .25s}
.contact.reveal.in .form>*{opacity:1;translate:none}
.form>:nth-child(1){--d:.15s}.form>:nth-child(2){--d:.25s}.form>:nth-child(3){--d:.35s}.form>:nth-child(4){--d:.45s}.form>:nth-child(5){--d:.55s}.form>:nth-child(6){--d:.75s}
@media(prefers-reduced-motion:reduce){.form .btn,.form .btn::before{animation:none}.form .btn::before{content:none}.contact.reveal .form>*{opacity:1;translate:none;transition:none}.fld svg.ico{transition:none}.fld:focus-within svg.ico{scale:none}}
.photo{align-self:stretch;container-type:size;display:grid;place-items:center}
.photo>*{width:min(100cqw,100cqh);aspect-ratio:1;border-radius:50%;object-fit:cover}

/* footer */
footer{background:var(--bg2);padding:60px 0 30px}
.foot{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;margin-bottom:40px}
.foot .brand img{height:34px;width:auto;margin-bottom:16px}
.foot .brand p{color:var(--muted);font-size:14px;max-width:280px;text-align:justify}
.foot h3{font-size:14px;margin-bottom:16px;color:#fff}
.foot ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.foot ul a{color:var(--muted);font-size:14px;transition:.2s}
.foot ul a:hover{color:var(--accent-text)}
.foot-bottom{border-top:1px solid var(--line);padding-top:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;color:var(--muted);font-size:13px}
.foot-bottom .soc{display:flex;gap:14px}
.foot-bottom .soc a{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.05);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;transition:.3s}
.foot-bottom .soc a:hover{background:var(--grad);border-color:transparent}
.foot-bottom .soc svg{width:16px;height:16px;stroke:#fff;fill:none}

/* ---------- Responsive ---------- */
@media(min-width:981px){
  .eco.home{grid-template-columns:repeat(4,1fr);gap:22px}
  .eco.home .dev{padding:26px 18px 22px}
  .eco.home .dev .imgbox{height:clamp(130px,21vh,220px);margin-bottom:18px}
  .eco.home .dev b{font-size:17px}
  .val{grid-template-rows:repeat(3,1fr)}
  .val-row:first-child>*{grid-column:1;flex-direction:row-reverse;text-align:right}
  .val-row:first-child p{text-align-last:right}
  .val-row~.val-row>*{grid-column:3}
  .val-row>:nth-child(1){grid-row:1}
  .val-row>:nth-child(2){grid-row:2}
  .val-row>:nth-child(3){grid-row:3}
  .val>.vcenter{grid-area:1/2/4/3;position:relative;z-index:1}
  .val>.val-links{display:block;grid-area:1/1/4/4}
  #sdk>.wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:14px 22px;align-items:start}
  :is(.sdk-top,.sdk-cards,.sdk-bottom){display:contents}
  #sdk .sec-head{grid-area:1/1/2/4;margin:0}
  .sdk-top .lead-b{grid-area:2/1/3/4}
  .sdk-ill{grid-area:1/4/3/5;align-self:center;justify-self:end;max-width:268px}
  .sdk-cards>*{grid-row:3/span 2;align-self:stretch;display:grid;grid-template-rows:subgrid;row-gap:0}
  .sdk-cards h3{align-self:center}
  .portal{grid-area:5/1/7/3;max-width:520px}
  #sdk .sec-head h2{font-size:clamp(24px,2.3vw,34px);margin:0}
  #sdk .card.outline{padding-block:clamp(16px,2.6vh,28px)}
  #sdk .card.outline h3{margin-bottom:12px;font-size:clamp(17px,1.55vw,22px)}
  #sdk .card.outline h3 span{display:block;white-space:nowrap}
  #sdk .lead-b{text-align:justify}
  .sdk-bottom .lead-b{grid-area:5/3/7/5;align-self:center}
}
@media(max-width:980px){
  .burger{display:flex}
  .nav-cta{margin-left:auto;margin-right:16px}
  #menu{display:none;inset:74px 0 auto;width:auto;margin:0;padding:4px 24px 16px;border:0;border-bottom:1px solid var(--line);background:var(--bg2);color:inherit;box-shadow:0 24px 40px -24px rgba(0,0,0,.5)}
  #menu:popover-open{display:block}
  .nav #menu ul{flex-direction:column;gap:0;font-size:16px}
  #menu li+li{border-top:1px solid var(--line)}
  #menu a{display:block;padding:14px 0}
  .hero-grid,.contact{grid-template-columns:1fr}
  .hero-logo{order:-1;max-width:200px;justify-self:start}
  .feat,.eco,.infra-row,.arch2,.sdk-cards,.mod,.spec,.val,.grid-cards{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(80%,380px);gap:16px;align-items:start;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 24px;margin-left:-24px;margin-right:-24px;padding:0 24px 6px;scrollbar-width:none}
  :is(.feat,.eco,.infra-row,.arch2,.sdk-cards,.mod,.spec,.val,.grid-cards)>*{scroll-snap-align:start}
  .wrap.val{margin-inline:auto}
  #ecosystem .grid-cards{align-items:stretch}
  .bub{align-items:flex-start}
  @media(min-width:601px){.wrap.val{grid-auto-flow:row;grid-template-columns:1fr 1fr;overflow:visible;scroll-snap-type:none;align-items:stretch}.val>.vcenter{grid-column:1/-1;order:-1;aspect-ratio:auto;padding:24px 12px;clip-path:polygon(0 0,calc(100% - 36px) 0,100% 36px,100% 100%,36px 100%,0 calc(100% - 36px))}.vcenter h2{font-size:28px}.vcenter img{width:90px}}
  .eco{grid-auto-columns:42%}
  .infra{display:block}
  .infra-row{grid-auto-columns:92%}
  .ec,.infra-side{grid-area:auto;grid-template-rows:none}
  .infra-side{gap:0}
  .infra-side>*{grid-row:auto}
  .map svg{position:static;width:100%}
  .infra-side>.map{margin-bottom:16px}
  #architecture .diagram{grid-row:auto;position:static}
  #architecture .diagram img{position:static;height:auto}
  .mod-mid{display:contents}
  .vcenter{order:-1;grid-column:auto}
  .feat{background:none;border-radius:0}
  .f{background:var(--grad-soft);border-radius:16px;padding:18px}
  .sdk-top{grid-template-columns:1.3fr 1fr}
  .sdk-bottom{grid-template-columns:minmax(0,1fr);gap:16px}
  .sdk-bottom .lead-b{order:-1}
  #sdk :is(.portal,.sdk-bottom .lead-b).reveal{transform:none}
  .feat,.eco,.sdk-cards,.mod,.val,.grid-cards{align-items:stretch}
  .spec{container-type:inline-size;grid-auto-columns:max-content}
  .spec-col{--w:min(80cqi,380px);--h:calc(var(--w) * 1456 / 958);justify-items:center}
  .spec-img{width:auto;max-width:var(--w);height:calc((var(--h) - 14px) / 2);object-fit:contain}
  .spec-img:only-child{height:var(--h)}
  .spec-img,.spec-img:is(:hover,:focus-visible){border:0;box-shadow:none;transform:none}
  :is([data-theme="light"] .spec-img,.spec-img.pic),:is([data-theme="light"] .spec-img,.spec-img.pic):is(:hover,:focus-visible){background:none;padding:0}
  .sdk-cards{grid-template-rows:auto auto}
  :is(#why,#audience) .grid-cards{grid-template-rows:auto auto auto}
  .val{grid-template-rows:auto 1fr}
  #ecosystem .grid-cards h3{min-height:2lh}
  :is(.f,.bub,.sdk-cards>*,:is(#why,#audience) .grid-cards>*){display:grid;grid-template-rows:subgrid;row-gap:0;align-content:start}
  :is(.f,.bub,.sdk-cards>*,.val>.vcenter){grid-row:span 2}
  :is(#why,#audience) .grid-cards>*{grid-row:span 3}
  :is(.f,.bub){grid-template-columns:auto 1fr;column-gap:16px}
  :is(.f,.bub)>div{display:contents}
  :is(.f,.bub)>.fico{grid-row:span 2}
  .sdk-cards h3{align-self:center}
  #audience .box-o .ph{height:clamp(160px,28svh,280px)}
  :is(#why,#audience){overflow-x:clip}
  :is(#why,#audience) .orbit-box{margin-inline:-70%}
  .rings{scale:.52 1}
  .rings path{vector-effect:non-scaling-stroke}
  :is(#why,#audience) .wrap{flex:1;display:flex;flex-direction:column}
  :is(#why,#audience) .grid-cards{margin-block:auto}
  :is(.feat,.eco,.infra-row,.arch2,.sdk-cards,.mod,.spec,.val,.grid-cards){overflow-y:hidden}
  .sec :is(.eco,.infra-row,.arch2,.sdk-cards,.mod,.mod-mid,.spec,.val,.grid-cards)>.reveal{transform:none;translate:none;scale:none}
  .feat{grid-auto-flow:row;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr auto 1fr;row-gap:16px;overflow:visible;scroll-snap-type:none;margin-inline:0;padding:0}
  .feat-row{display:grid;grid-row:span 2;grid-template-rows:subgrid;grid-auto-flow:column;grid-auto-columns:min(80%,380px);column-gap:16px;align-items:stretch;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding:0 24px;margin-inline:-24px;padding:0 24px 6px;scrollbar-width:none}
  .feat-row>*{scroll-snap-align:start}
  #architecture>.wrap{zoom:1!important}
  #architecture .sec-head h2{text-wrap:wrap}
  #d2c .grid-cards{grid-auto-flow:row;grid-template-columns:minmax(0,1fr);gap:32px;overflow:visible;scroll-snap-type:none;margin-inline:0;padding:0}
  #architecture .arch2{grid-auto-flow:row;grid-template-columns:minmax(0,1fr);gap:20px;overflow:visible;scroll-snap-type:none;margin-inline:0;padding:0}
  .f h3{min-height:calc(2lh + 12px)}

  .marquee{margin-inline:-24px}
  .contact .photo{display:none}
  .contact .lead-b{text-align:justify}
  .form .btn{margin-left:0}
  .orbit .links{display:none}
  .foot{grid-template-columns:1fr 1fr}
  .foot .brand{grid-column:1/-1}
}
@media(max-width:600px){
  .wrap.val{grid-auto-flow:row;grid-template-columns:minmax(0,1fr);grid-template-rows:none;row-gap:16px;overflow:visible;scroll-snap-type:none}
  .val>.vcenter{grid-row:auto;aspect-ratio:auto;padding:0;background:none;clip-path:none;margin-bottom:8px}
  .vcenter h2{color:var(--heading);font-size:26px;white-space:normal}
  .vcenter img{display:none}
  .val-list{display:grid;row-gap:24px}
  #value>.wrap{zoom:1!important}
  .hero-stats{display:grid;grid-template-columns:auto auto;justify-content:start}
  .hero-stats .s:last-child{grid-column:1/-1}
  .nav-cta .btn-primary{padding:10px 18px;font-size:13.5px}
  .theme-toggle{width:36px;height:36px}
  .split-head{grid-template-columns:1fr;gap:16px}
  .logo-grad{width:180px}
  .ec-row{grid-template-columns:1fr}
  .ec-row>.box:first-child::before,.ec-row>.box:first-child::after{content:none}
  .ec-arrow{transform:rotate(90deg);justify-self:center;margin:16px 0}
  .icons{grid-template-columns:repeat(3,1fr)}
  .icons.four{grid-template-columns:repeat(2,1fr)}
  .ec-row4{grid-template-columns:1fr 1fr}
  .ec-dots,.ec-row4>.ec-arrow{display:none}
  .marquee{--g:12px}
  .marquee li{width:140px;height:68px;padding:8px 16px}
  .contact{padding:20px}
  .fld{grid-template-columns:28px 1fr;gap:10px}
  .fld svg.ico{width:28px;height:28px;margin-top:14px}
  .form .btn{padding:18px 44px;font-size:18.66px}
}