/* 01 / The possibilities — scroll story: big title fades, tablet rises (bottom quarter stays hidden),
   then the tablet plays a looping carousel of three architecture diagrams: pyramid → circle → network. */
.ar{--ar-accent:#2a2d9f;--ar-ink:#0f1233;--ar-lav:#cbd0ff;--ar-mono:'JetBrains Mono',Consolas,'Courier New',monospace;position:relative;padding:0}
.ar-track{position:relative;height:190vh}
.ar-sticky{position:sticky;top:0;height:100vh;overflow:hidden;perspective:1600px}

/* intro title */
.ar-intro{position:absolute;left:0;right:0;top:11vh;padding:0 24px;text-align:center}
.ar-eyebrow{font:11px/1 var(--ar-mono);letter-spacing:.16em;text-transform:uppercase;color:#c8cdf0;margin:0 0 22px}
.ar-eyebrow span{color:#9ca3ff;margin-right:8px}
.ar-intro h2{margin:0;font-weight:400;font-size:clamp(38px,4vw,61px);line-height:1.06;letter-spacing:-.055em;color:#fff}
.ar-intro h2 span{color:var(--ar-lav)}
.ar-sub{margin:20px 0 0;font-size:15px;color:#c8cdf0}

/* tablet */
.ar-device{position:absolute;left:50%;bottom:0;width:min(1320px,92vw,160vh);aspect-ratio:1.43;
  transform:translate(-50%,125%);transform-origin:50% 100%;will-change:transform}
.ar-bezel{position:absolute;inset:0;border-radius:clamp(22px,3.4%,40px);background:#090b22;padding:clamp(10px,1.7%,20px);
  box-shadow:0 0 0 1px rgba(255,255,255,.16),0 0 0 6px rgba(255,255,255,.03),0 -30px 90px -20px rgba(130,138,255,.35)}
.ar-bezel::before{content:"";position:absolute;left:50%;top:calc(clamp(10px,1.7%,20px)/2);width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:#1d2050}
.ar-screen{position:relative;height:100%;border-radius:clamp(12px,2%,22px);background:#f5f7fa;color:var(--ar-ink);overflow:hidden;container-type:inline-size;font-family:'Poppins','Segoe UI',Arial,sans-serif}

.ar-bar{display:flex;align-items:center;gap:1.6cqw;height:5.6cqw;padding:0 2.4cqw;border-bottom:1px solid #e4e7f1;background:#fff}
.ar-bar strong{font-weight:600;font-size:max(12px,1.45cqw)}
.ar-dots{display:flex;gap:.6cqw}.ar-dots i{width:.85cqw;height:.85cqw;border-radius:50%;background:#dfe2f0}
.ar-live{font:600 max(10px,1.1cqw)/1 var(--ar-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ar-accent);padding:.7cqw 1.2cqw;border-radius:2cqw;background:#eceeff}
/* slide indicator */
.ar-pager{margin-left:auto;display:flex;gap:.6cqw}
.ar-pager i{position:relative;width:3.2cqw;height:3px;border-radius:2px;background:#dfe2f0;overflow:hidden}
.ar-pager i::after{content:"";position:absolute;inset:0;background:var(--ar-accent);transform:scaleX(0);transform-origin:left}
.ar-pager i.is-done::after{transform:scaleX(1)}
.ar-pager i.is-on::after{animation:ar-fill var(--ar-dwell,5s) linear forwards}
@keyframes ar-fill{to{transform:scaleX(1)}}

/* carousel */
.ar-viewport{overflow:hidden}
.ar-slides{display:flex;transition:transform 1s cubic-bezier(.65,0,.25,1);will-change:transform}
.ar-slides.no-anim{transition:none}
.ar-slide{flex:0 0 100%;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;gap:2.6cqw;min-height:45cqw;padding:3cqw 3.6cqw 2cqw}
.ar-k{display:block;margin:0 0 1.4cqw;font:600 max(10px,1.1cqw)/1.3 var(--ar-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ar-accent)}
.ar-copy{text-align:center}
.ar-copy h3{margin:0;font-weight:400;font-size:max(20px,2.9cqw);line-height:1.15;letter-spacing:-.03em}
.ar-copy p{margin:1.6cqw 0 0;font-size:max(13px,1.35cqw);line-height:1.55;color:#4a4e78}
.ar-copy>*{opacity:0;transform:translateY(1.2cqw);transition:opacity .6s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.ar-slide.is-active .ar-copy>*{opacity:1;transform:none}
.ar-slide.is-active .ar-copy>:nth-child(2){transition-delay:.1s}.ar-slide.is-active .ar-copy>:nth-child(3){transition-delay:.2s}
.ar-dia{width:100%;max-width:66cqw;height:auto;display:block;overflow:visible;font-family:'Poppins','Segoe UI',Arial,sans-serif}
.ar-dia-m{display:none}
.ar-dia .m-sm{font-size:13px}.ar-dia-m .py-t text,.ar-dia-m .cy-core text,.ar-dia-m .nw-hub text{font-weight:600}
.ar-dia-m .nw-hub circle{fill:var(--ar-accent)}.ar-dia-m .nw-hub text{fill:#fff}
.ar-dia text{text-anchor:middle;font-size:17px;fill:var(--ar-ink)}

/* pyramid */
.py-t polygon{stroke:#fff;stroke-width:2}
.py-1 polygon{fill:#cbd0ff}.py-2 polygon{fill:var(--ar-accent)}.py-3 polygon{fill:#e4e7f4}
.py-2 text{fill:#fff;font-weight:600}.py-1 text,.py-3 text{font-weight:600}.py-1 text{font-size:15px}
.py-t{opacity:0;transform:translateY(26px);transition:opacity .6s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.py-n path{stroke:#9a9ec4;stroke-dasharray:4 5;fill:none}.py-n circle{fill:var(--ar-accent)}
.ar-dia .py-n text{text-anchor:start;font-size:15px;fill:#4a4e78}
.py-n{opacity:0;transition:opacity .6s ease}
.is-active .py-t,.is-active .py-n{opacity:1;transform:none}
.is-active .py-3{transition-delay:.15s}.is-active .py-2{transition-delay:.4s}.is-active .py-1{transition-delay:.65s}
.is-active .py-n3{transition-delay:.55s}.is-active .py-n2{transition-delay:.8s}.is-active .py-n1{transition-delay:1.05s}

/* circle */
.cy-orbit{fill:none;stroke:#d7daf0;stroke-width:1.5;stroke-dasharray:3 7}
.cy-arc{fill:none;stroke:var(--ar-accent);stroke-width:2;stroke-dasharray:0 100;transform:rotate(-90deg);transform-origin:330px 205px;transition:stroke-dasharray 1.6s cubic-bezier(.65,0,.25,1)}
.is-active .cy-arc{stroke-dasharray:100 0;transition-delay:.3s}
.cy-core circle{fill:var(--ar-accent)}.cy-core text{fill:#fff;font-weight:600}
.cy-node circle{fill:#fff;stroke:var(--ar-accent);stroke-width:2}
.cy-i{font:600 14px var(--ar-mono);fill:var(--ar-accent)}
.ar-dia .cy-l{text-anchor:start;font-weight:600}.ar-dia .cy-s{text-anchor:start;font-size:15px;fill:#4a4e78}.ar-dia .cy-r{text-anchor:end}
.cy-core,.cy-node{opacity:0;transform:scale(.6);transform-box:fill-box;transform-origin:center;transition:opacity .5s ease,transform .7s cubic-bezier(.3,1.5,.5,1)}
.is-active .cy-core,.is-active .cy-node{opacity:1;transform:none}
.is-active .cy-a{transition-delay:.5s}.is-active .cy-b{transition-delay:.9s}.is-active .cy-c{transition-delay:1.3s}
.cy-spin{transform-origin:330px 205px;opacity:0;transition:opacity .4s ease}
.cy-spin circle{fill:var(--ar-accent);stroke:#fff;stroke-width:2}
.is-active .cy-spin{opacity:1;transition-delay:1.8s;animation:ar-spin 6s linear 1.8s infinite}
@keyframes ar-spin{to{transform:rotate(360deg)}}

/* network */
.nw-mesh path{fill:none;stroke:#e1e4f3;stroke-width:1.5;stroke-dasharray:3 6}
.nw-links path{fill:none;stroke:#c6cae8;stroke-width:1.5}
.nw-links path{stroke-dasharray:300;stroke-dashoffset:300;transition:stroke-dashoffset 1s cubic-bezier(.65,0,.25,1)}
.is-active .nw-links path{stroke-dashoffset:0}
.is-active .nw-links path:nth-child(2){transition-delay:.1s}.is-active .nw-links path:nth-child(3){transition-delay:.2s}.is-active .nw-links path:nth-child(4){transition-delay:.3s}
.is-active .nw-links path:nth-child(5){transition-delay:.4s}.is-active .nw-links path:nth-child(6){transition-delay:.5s}.is-active .nw-links path:nth-child(7){transition-delay:.6s}
.nw-pulses path{fill:none;stroke:var(--ar-accent);stroke-width:3;stroke-linecap:round;stroke-dasharray:10 290;stroke-dashoffset:0;opacity:0}
.is-active .nw-pulses path{opacity:1;animation:ar-flow 2.4s linear 1.2s infinite}
.is-active .nw-pulses path:nth-child(2){animation-delay:1.7s}.is-active .nw-pulses path:nth-child(3){animation-delay:2.1s}
.is-active .nw-pulses path:nth-child(4){animation-delay:1.5s}.is-active .nw-pulses path:nth-child(5){animation-delay:2.4s}
@keyframes ar-flow{from{stroke-dashoffset:0}to{stroke-dashoffset:-300}}
.nw-node rect{fill:#fff;stroke:#d7daf0;stroke-width:1.5}.nw-node text{font-size:15px;fill:#3b3f66}
.nw-node{opacity:0;transform:scale(.7);transform-box:fill-box;transform-origin:center;transition:opacity .5s ease,transform .6s cubic-bezier(.3,1.5,.5,1)}
.is-active .nw-node{opacity:1;transform:none}
.is-active .nw-node:nth-of-type(1){transition-delay:.5s}.is-active .nw-node:nth-of-type(2){transition-delay:.6s}.is-active .nw-node:nth-of-type(3){transition-delay:.7s}
.is-active .nw-node:nth-of-type(4){transition-delay:.8s}.is-active .nw-node:nth-of-type(5){transition-delay:.9s}.is-active .nw-node:nth-of-type(6){transition-delay:1s}.is-active .nw-node:nth-of-type(7){transition-delay:1.1s}
.nw-hub circle:not(.nw-halo){fill:var(--ar-accent)}.nw-hub text{fill:#fff;font-weight:600;font-size:16px}
.nw-halo{fill:rgba(42,45,159,.12);transform-box:fill-box;transform-origin:center}
.is-active .nw-halo{animation:ar-breathe 2.4s ease-in-out infinite}
@keyframes ar-breathe{50%{transform:scale(1.18);opacity:.5}}


/* static: phones and reduced motion — final state, no scroll or carousel motion */
.ar.ar-static .ar-track{height:auto}
.ar.ar-static .ar-sticky{position:relative;height:auto;overflow:visible;perspective:none;padding:90px 0 0}
.ar.ar-static .ar-intro{position:relative;top:auto;transform:none;opacity:1}
.ar.ar-static .ar-device{position:relative;left:auto;bottom:auto;margin:60px auto 0;transform:none;aspect-ratio:auto}
.ar.ar-static .ar-slide:nth-last-child(2){padding-bottom:28px}
.ar.ar-static .ar-bezel{position:relative}
.ar.ar-static .ar-slides{flex-direction:column;transform:none!important}
.ar.ar-static .ar-slide{padding-bottom:3cqw}
.ar.ar-static .ar-slide+.ar-slide{border-top:1px solid #e4e7f1}
.ar.ar-static .ar-slide[aria-hidden="true"],.ar.ar-static .ar-pager{display:none}
.ar.ar-static *,.ar.ar-static *::before,.ar.ar-static *::after{transition:none!important;animation:none!important}
@media(max-width:760px){
  .ar.ar-static .ar-sticky{padding-top:70px}
  .ar-intro{padding:0 16px;text-align:left}
  .ar-eyebrow{font-size:11px;margin-bottom:20px}
  .ar-sub{margin-top:18px}
  .ar.ar-static .ar-device{width:calc(100% - 32px);margin-top:36px}
  /* tablet runs into the section edge, as if it continues below */
  .ar.ar-static .ar-bezel{padding-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0}
  .ar.ar-static .ar-screen{border-bottom-left-radius:0;border-bottom-right-radius:0}
  .ar-bezel{padding:8px;border-radius:24px}
  .ar-bezel::before{display:none}
  .ar-screen{border-radius:17px}
  .ar-bar{height:46px;padding:0 14px;gap:10px}.ar-dots{display:none}
  .ar-live{margin-left:auto;font-size:9px;padding:6px 9px}
  .ar-slide{gap:16px;padding:24px 16px;min-height:0}
  .ar-dia{display:none}.ar-dia.ar-dia-m{display:block;max-width:360px;width:100%;margin:0 auto}
  .ar-k{margin-bottom:10px}.ar-copy p{margin-top:10px}
}
.ar-jump *,.ar-jump *::before,.ar-jump *::after{transition:none!important}

/* light version: the hero above is already blue, so this section sits on white */
.ar.dark-section{background:#fff;color:var(--ar-ink)}
.ar .ar-eyebrow{color:#5c5e80}
.ar .ar-eyebrow span{color:var(--ar-accent)}
.ar .ar-intro h2{color:var(--ar-ink)}
.ar .ar-intro h2 span{color:var(--ar-accent)}
.ar .ar-sub{color:#5c5e80}
.ar .ar-bezel{box-shadow:0 0 0 1px rgba(15,18,51,.08),0 -24px 70px -24px rgba(42,45,159,.35)}
.ar .ar-screen{background:#f5f7fa}

/* the tablet slides into a slot at the bottom: an inner shadow so it reads as tucked inside, not cut off */
.ar:not(.ar-static) .ar-sticky::after{content:"";position:absolute;left:0;right:0;bottom:0;height:150px;z-index:3;pointer-events:none;
  background:linear-gradient(to top,rgba(15,18,51,.30) 0,rgba(15,18,51,.12) 38%,rgba(15,18,51,0) 100%);
  box-shadow:inset 0 -1px 0 rgba(15,18,51,.25)}
.ar:not(.ar-static) .ar-sticky::before{content:"";position:absolute;left:50%;bottom:0;width:min(1360px,96vw);height:26px;z-index:3;pointer-events:none;
  transform:translateX(-50%);border-radius:50% 50% 0 0/100% 100% 0 0;background:radial-gradient(ellipse at 50% 100%,rgba(5,7,30,.45),rgba(5,7,30,0) 70%)}

/* desktop: the slide headline lives in the tablet's title bar; the diagram is centred in the screen */
.ar .ar-title{display:inline-block;font-size:max(14px,1.75cqw);font-weight:500;letter-spacing:-.02em}
.ar:not(.ar-static) .ar-copy{display:none}
.ar:not(.ar-static) .ar-slide{justify-content:center}
.ar:not(.ar-static) .ar-dia{margin:0 auto}

/* a real tablet: aluminium edge, thin even black bezel, camera, side buttons, status bar */
.ar .ar-bezel{border-radius:clamp(26px,3.9%,46px);background:#0b0c10;padding:clamp(11px,1.55%,19px);
  box-shadow:
    0 0 0 1.5px #c9ccd4,                 /* aluminium rim */
    0 0 0 3px #8e939e,                   /* rim shading */
    0 0 0 3.5px rgba(0,0,0,.25),
    inset 0 0 0 1px rgba(255,255,255,.06),
    0 40px 80px -30px rgba(15,18,51,.45),
    0 -18px 60px -30px rgba(42,45,159,.25)}
/* front camera with a tiny lens glint */
.ar .ar-bezel::before{width:9px;height:9px;margin:-4.5px 0 0 -4.5px;background:radial-gradient(circle at 35% 35%,#3b4a7a 0,#141a33 45%,#05060a 70%);
  box-shadow:0 0 0 1.5px #16181f}
/* top buttons (power + volume) on the aluminium edge */
.ar .ar-device::before,.ar .ar-device::after{content:"";position:absolute;top:-5px;height:5px;border-radius:3px 3px 0 0;background:linear-gradient(#b9bdc6,#8e939e)}
.ar .ar-device::before{right:9%;width:5.5%}
.ar .ar-device::after{left:8%;width:3.5%}
/* screen glass + status bar */
.ar .ar-screen{border-radius:clamp(14px,2.4%,28px);padding-top:max(16px,2.4cqw)}
.ar .ar-screen::before{content:"9:41";position:absolute;left:3cqw;top:0;height:max(16px,2.4cqw);display:flex;align-items:center;
  font:600 max(10px,1.05cqw)/1 'Poppins',Arial,sans-serif;color:#0f1233;z-index:2}
.ar .ar-screen::after{content:"";position:absolute;right:3cqw;top:calc(max(16px,2.4cqw) / 2 - .55cqw);width:6.2cqw;height:1.1cqw;min-height:8px;z-index:2;
  background:
    linear-gradient(#0f1233,#0f1233) right 0 top 50%/2.3cqw 100% no-repeat,                 /* battery body */
    radial-gradient(circle at 50% 100%,#0f1233 0 .45cqw,transparent .5cqw) 1.2cqw 0/1.4cqw 100% no-repeat; /* wifi */
  border-radius:2px}
.ar .ar-screen .ar-bar{border-top:1px solid #eceef5}
/* glass reflection, very faint */
.ar .ar-viewport{position:relative}
.ar .ar-screen>.ar-viewport::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.35) 0,rgba(255,255,255,0) 28%)}
@media(max-width:760px){.ar .ar-device::before,.ar .ar-device::after{display:none}.ar .ar-bezel{padding:8px;border-radius:24px}}
/* status icons: signal, wi-fi, battery */
.ar .ar-screen::after{width:max(52px,6.4cqw);height:max(11px,1.3cqw);top:calc(max(16px,2.4cqw) / 2 - max(11px,1.3cqw) / 2);border-radius:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 13'%3E%3Cg fill='%230f1233'%3E%3Crect x='0' y='8' width='2.6' height='4' rx='.8'/%3E%3Crect x='4' y='6' width='2.6' height='6' rx='.8'/%3E%3Crect x='8' y='3.5' width='2.6' height='8.5' rx='.8'/%3E%3Crect x='12' y='1' width='2.6' height='11' rx='.8'/%3E%3C/g%3E%3Cg fill='none' stroke='%230f1233' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M20.5 5.2a9 9 0 0 1 12 0'/%3E%3Cpath d='M23 8a5.2 5.2 0 0 1 7 0'/%3E%3C/g%3E%3Ccircle cx='26.5' cy='10.6' r='1.3' fill='%230f1233'/%3E%3Crect x='38' y='1.5' width='21' height='10' rx='2.6' fill='none' stroke='%230f1233' stroke-opacity='.45' stroke-width='1.2'/%3E%3Crect x='40' y='3.5' width='15' height='6' rx='1.4' fill='%230f1233'/%3E%3Cpath d='M60.6 5v3' stroke='%230f1233' stroke-opacity='.45' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}

/* keep every diagram inside the visible part of the tablet: top-aligned and no taller than what shows */
.ar:not(.ar-static) .ar-slide{justify-content:flex-start;padding-top:max(14px,1.6cqw)}
.ar:not(.ar-static) .ar-dia:not(.ar-dia-m){height:var(--ar-vis,420px);width:auto;max-width:66cqw}
.ar:not(.ar-static) .ar-dia:not(.ar-dia-m){max-width:82cqw}.ar:not(.ar-static) .ar-slide{padding-top:max(10px,1.1cqw)}