/* =========================================================
   Apis — Artificial Intelligence Developers in Science & Technology
   Design system: "The Hive" — deep plum canvas, AI violet,
   honey amber accents, hexagonal geometry. RTL first.
   ========================================================= */

:root{
  /* surfaces */
  --bg:#0a0614;
  --bg-2:#120a24;
  --bg-3:#180d2e;
  --surface:rgba(255,255,255,.038);
  --surface-2:rgba(255,255,255,.07);
  --line:rgba(178,140,255,.16);
  --line-strong:rgba(190,150,255,.42);

  /* type */
  --text:#efe9ff;
  --muted:#a99cc9;
  --dim:#7d719e;

  /* brand */
  --violet:#8b5cf6;
  --violet-2:#a855f7;
  --violet-deep:#5b21b6;
  --magenta:#d6338c;
  --honey:#ffb020;
  --honey-2:#ffd166;
  --ok:#4ade80;

  --grad:linear-gradient(105deg,var(--violet-2),var(--violet) 38%,var(--magenta) 78%,var(--honey));
  --grad-soft:linear-gradient(120deg,rgba(168,85,247,.22),rgba(214,51,140,.14) 60%,rgba(255,176,32,.12));
  --glow-v:0 0 60px -12px rgba(168,85,247,.75);
  --glow-h:0 0 50px -14px rgba(255,176,32,.65);

  --radius:20px;
  --shell:1200px;
  --ease:cubic-bezier(.22,.7,.25,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:Vazirmatn,system-ui,sans-serif;font-weight:400;line-height:1.9;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0;line-height:1.45;font-weight:700;letter-spacing:-.01em}
p{margin:0}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
img{max-width:100%;display:block}
b,strong{font-weight:700}
.shell{width:min(var(--shell),calc(100% - 40px));margin-inline:auto}
.en{font-family:"Space Grotesk",sans-serif;letter-spacing:.02em;direction:ltr;display:inline-block}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ===== ambient background: honeycomb lattice + glows ===== */
.bg-comb{
  position:fixed;inset:-4px;z-index:-3;pointer-events:none;opacity:.5;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='112' height='194' viewBox='0 0 112 194'%3E%3Cg fill='none' stroke='%23a06cff' stroke-opacity='.30' stroke-width='1'%3E%3Cpath d='M56 0 108 32.3v64.7L56 129.3 4 97V32.3z'/%3E%3Cpath d='M0 129.3 52 161.7v64.7'/%3E%3Cpath d='M112 129.3 60 161.7v64.7'/%3E%3C/g%3E%3C/svg%3E");
  background-size:112px 194px;
  -webkit-mask-image:radial-gradient(ellipse 110% 80% at 50% 6%,#000 8%,rgba(0,0,0,.5) 52%,transparent 90%);
  mask-image:radial-gradient(ellipse 110% 80% at 50% 6%,#000 8%,rgba(0,0,0,.5) 52%,transparent 90%);
  animation:combDrift 40s linear infinite;
}
@keyframes combDrift{to{background-position:0 388px}}

.bg-glow{position:fixed;z-index:-2;width:62vw;height:62vw;max-width:840px;max-height:840px;border-radius:50%;filter:blur(130px);pointer-events:none;opacity:.3}
.bg-glow--a{top:-16vw;inset-inline-end:-14vw;background:radial-gradient(circle,var(--violet-2),transparent 65%);animation:float1 26s var(--ease) infinite}
.bg-glow--b{top:46vh;inset-inline-start:-18vw;background:radial-gradient(circle,var(--magenta),transparent 66%);opacity:.2;animation:float2 32s var(--ease) infinite}
.bg-glow--c{bottom:-20vw;inset-inline-end:10vw;background:radial-gradient(circle,var(--honey),transparent 68%);opacity:.12;animation:float1 38s var(--ease) infinite reverse}
@keyframes float1{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(-4%,5%,0)}}
@keyframes float2{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(5%,-5%,0)}}

.scroll-progress{position:fixed;top:0;inset-inline:0;height:2px;z-index:200;background:var(--grad);transform:scaleX(0);transform-origin:right center;will-change:transform}

/* ===== header ===== */
.site-header{position:fixed;top:0;inset-inline:0;z-index:120;border-bottom:1px solid transparent;transition:background .4s var(--ease),backdrop-filter .4s,border-color .4s}
.site-header.is-stuck{background:rgba(10,6,20,.74);backdrop-filter:blur(16px) saturate(1.2);border-bottom-color:var(--line)}
.header-inner{display:flex;align-items:center;gap:20px;height:78px}

.brand{display:flex;align-items:center;gap:13px}
.brand-logo{width:62px;height:62px;object-fit:contain;filter:drop-shadow(0 0 16px rgba(168,85,247,.55));transition:transform .5s var(--ease)}
.brand:hover .brand-logo{transform:rotate(-8deg) scale(1.06)}
.brand-text{display:flex;align-items:center}
.brand-name{font-family:"Space Grotesk",sans-serif;font-size:1.7rem;font-weight:700;line-height:1;direction:ltr}


.nav{display:flex;gap:2px;margin-inline-start:auto}
.nav-link{position:relative;padding:9px 13px;font-size:.93rem;color:var(--muted);border-radius:10px;transition:color .25s}
.nav-link::after{content:"";position:absolute;inset-inline:13px;bottom:3px;height:1.6px;background:var(--grad);transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease)}
.nav-link:hover,.nav-link.is-active{color:var(--text)}
.nav-link:hover::after,.nav-link.is-active::after{transform:scaleX(1)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 26px;border-radius:999px;font-size:.95rem;font-weight:600;font-family:inherit;
  cursor:pointer;border:1px solid transparent;position:relative;overflow:hidden;
  transition:transform .3s var(--ease),box-shadow .35s,background .35s,border-color .35s,color .3s;
}
.btn--primary{background:var(--grad);color:#170a24;font-weight:700;box-shadow:0 14px 40px -16px rgba(168,85,247,.95)}
.btn--primary:hover{transform:translateY(-3px);box-shadow:0 20px 48px -14px rgba(214,51,140,.9)}
.btn--ghost{border-color:var(--line-strong);color:var(--text);background:var(--surface)}
.btn--ghost:hover{transform:translateY(-3px);background:var(--surface-2);border-color:var(--honey);color:var(--honey-2)}
.btn--honey{background:linear-gradient(105deg,var(--honey-2),var(--honey));color:#2a1500;font-weight:700;box-shadow:var(--glow-h)}
.btn--honey:hover{transform:translateY(-3px)}
.btn::before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%);transition:transform .8s var(--ease-out)}
.btn:hover::before{transform:translateX(120%)}
.header-cta{padding:10px 20px;font-size:.88rem}

.burger{display:none;width:44px;height:44px;border-radius:13px;border:1px solid var(--line);background:var(--surface);flex-direction:column;justify-content:center;align-items:center;gap:5px;cursor:pointer}
.burger span{width:18px;height:1.7px;background:var(--text);transition:transform .35s var(--ease),opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.7px) rotate(-45deg)}

/* ===== hero ===== */
.hero{position:relative;padding:158px 0 40px;overflow:hidden}
.hero-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.9}
.hero-inner{position:relative;z-index:1;display:grid;grid-template-columns:1.06fr .94fr;gap:56px;align-items:center;padding-bottom:56px}

.pill{display:inline-flex;align-items:center;gap:9px;padding:7px 17px;border-radius:999px;border:1px solid var(--line-strong);background:rgba(139,92,246,.1);font-size:.8rem;color:#dfcaff}
.pill i{width:7px;height:7px;border-radius:50%;background:var(--honey);box-shadow:0 0 12px var(--honey);animation:beat 2.4s var(--ease) infinite}
@keyframes beat{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.7)}}

.hero-title{font-size:clamp(1.55rem,3.4vw,2.9rem);font-weight:900;margin:22px 0 20px;line-height:1.38}
.hero-title .line-1{display:block;white-space:normal;color:var(--text);margin-bottom:.35em}
.hero-title .line-2{display:block;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:220% 100%;animation:hue 11s linear infinite}

@keyframes hue{to{background-position:220% 0}}

/* rotating headline words */
.rotator{position:relative;display:block;height:1.4em;overflow:hidden;background:none!important;color:transparent;animation:none}
.rot-word{
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  background-size:220% 100%;animation:hue 11s linear infinite;
  position:absolute;inset-inline-start:0;top:0;white-space:nowrap;
  opacity:0;transform:translateY(78%) rotateX(-55deg) scale(.94);filter:blur(7px);
  transform-origin:50% 0;transition:opacity .62s var(--ease-out),transform .78s var(--ease-out),filter .62s var(--ease-out);
}
.rot-word.is-on{opacity:1;transform:none;filter:none}
.rot-word.is-out{opacity:0;transform:translateY(-72%) rotateX(52deg) scale(.94);filter:blur(7px)}

.hero-sub{color:var(--muted);font-size:1.06rem;max-width:36em;text-align:justify;text-justify:inter-word;text-align-last:start;line-height:2.05}
.hero-sub+.hero-sub{margin-top:26px}
.hero-actions{display:inline-grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:32px;justify-items:stretch}
.hero-actions .btn--optis{grid-column:1 / -1}


/* ===== OPTIS cross-link (its own cyan/teal identity) ===== */
.btn--optis{
  --optis-1:#22d3ee;--optis-2:#2563eb;
  padding:11px 20px;text-align:start;border-radius:18px;gap:13px;
  background:linear-gradient(135deg,rgba(34,211,238,.16),rgba(37,99,235,.22));
  border-color:rgba(34,211,238,.5);color:#dffaff;
  box-shadow:0 16px 44px -22px rgba(34,211,238,.9);
}
.btn--optis:hover{transform:translateY(-3px);border-color:#22d3ee;box-shadow:0 22px 54px -18px rgba(34,211,238,.95)}
.btn--optis .optis-ico{
  display:grid;place-items:center;width:38px;height:42px;flex:none;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  background:linear-gradient(140deg,var(--optis-1),var(--optis-2));
}
.btn--optis .optis-ico svg{width:20px;height:20px;fill:none;stroke:#04202b;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.btn--optis .optis-txt{display:flex;flex-direction:column;line-height:1.5}
.btn--optis .optis-txt b{font-size:.95rem;font-weight:700}
.btn--optis .optis-txt small{font-size:.74rem;color:#8fdcef;letter-spacing:.04em}
.btn--optis .optis-arrow{font-size:1rem;color:var(--optis-1);transition:transform .35s var(--ease)}
.btn--optis:hover .optis-arrow{transform:translate(3px,-3px)}


.stats{display:flex;gap:38px;flex-wrap:wrap;margin-top:46px;padding-top:26px;border-top:1px solid var(--line)}
.stats--center{justify-content:center;text-align:center}
.stats--center .stat{text-align:center}
.stat .num{display:block;font-family:"Space Grotesk",sans-serif;font-size:1.95rem;font-weight:700;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;direction:rtl;unicode-bidi:isolate}
.stat small{color:var(--dim);font-size:.82rem}

/* hero visual: living comb */
.hero-visual{position:relative;display:grid;place-items:center;min-height:440px}
.comb{position:relative;width:min(100%,430px);aspect-ratio:1/1;display:grid;place-items:center}
.comb-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.comb-svg .cell{fill:none;stroke:rgba(178,140,255,.28);stroke-width:1.2;transition:stroke .9s var(--ease-out),stroke-width .9s var(--ease-out),filter .9s var(--ease-out)}
.comb-svg .cell.lit{stroke:url(#apisGrad);stroke-width:1.8;filter:drop-shadow(0 0 8px rgba(168,85,247,.75))}
.comb-svg .trace{fill:none;transition:opacity .5s linear;stroke:url(#apisGrad);stroke-width:1.6;stroke-linecap:round;stroke-dasharray:26 320;filter:drop-shadow(0 0 6px rgba(255,176,32,.55))}
.comb-core{
  position:relative;width:132px;height:150px;display:grid;place-items:center;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  background:radial-gradient(circle at 40% 30%,rgba(255,209,102,.95),rgba(168,85,247,.9) 45%,rgba(91,33,182,.9));
  box-shadow:0 0 80px -10px rgba(168,85,247,.85);
  animation:corePulse 5.5s var(--ease) infinite;
}
@keyframes corePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.comb-core img{width:78px;filter:brightness(0) invert(1) drop-shadow(0 2px 10px rgba(0,0,0,.4));opacity:.95}
.comb-ring{position:absolute;inset:6%;border-radius:50%;border:1px dashed rgba(214,51,140,.3);animation:spin 30s linear infinite}
.comb-ring--2{inset:-4%;border-color:rgba(255,176,32,.22);animation-duration:44s;animation-direction:reverse}
@keyframes spin{to{transform:rotate(360deg)}}

/* floating capability chips (JS-positioned, draggable, physics) */
.hero-chips{position:absolute;inset:-6% -4%;pointer-events:none;z-index:3}
.chip{
  position:absolute;left:0;top:0;padding:8px 14px;border-radius:14px;border:1px solid var(--line-strong);
  background:rgba(18,10,36,.86);backdrop-filter:blur(8px);font-size:.78rem;color:#e5d6ff;white-space:nowrap;
  box-shadow:0 12px 34px -20px rgba(0,0,0,.9);pointer-events:auto;cursor:pointer;touch-action:none;
  opacity:0;will-change:transform,opacity;
  transition:opacity .7s var(--ease-out),filter .5s var(--ease);
}
.chip.is-on{opacity:1}
.chip.is-drag{cursor:grabbing;border-color:var(--honey);box-shadow:0 18px 44px -18px rgba(255,176,32,.5)}
.chip:hover{border-color:var(--honey);filter:drop-shadow(0 0 12px rgba(255,176,32,.35))}
.chip b{color:var(--honey-2)}


/* neural network flow band */
.hero-marquee{position:relative;z-index:1;margin-top:10px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:linear-gradient(90deg,rgba(18,10,36,.15),rgba(24,12,48,.55),rgba(18,10,36,.15));overflow:hidden;height:58px;display:flex;align-items:center}
.hero-marquee::before,.hero-marquee::after{content:"";position:absolute;top:0;bottom:0;width:12%;z-index:2;pointer-events:none}
.hero-marquee::before{left:0;background:linear-gradient(90deg,var(--bg),transparent)}
.hero-marquee::after{right:0;background:linear-gradient(270deg,var(--bg),transparent)}
.kw-track{display:flex;align-items:center;width:max-content;animation:kw-scroll 38s linear infinite}
.hero-marquee:hover .kw-track{animation-play-state:paused}
.kw-set{display:flex;align-items:center}
.kw{font-size:.94rem;font-weight:500;color:var(--dim);white-space:nowrap;letter-spacing:.2px;transition:color .25s ease}
.kw:hover{color:var(--ink)}
.kw-hex{flex:none;width:13px;height:15px;margin:0 22px;background:var(--grad);clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);opacity:.85}
@keyframes kw-scroll{from{transform:translateX(0)}to{transform:translateX(50%)}}
@media (max-width:560px){.hero-marquee{height:46px}.kw{font-size:.84rem}.kw-hex{margin:0 14px;width:11px;height:13px}}
@media (prefers-reduced-motion:reduce){.kw-track{animation:none}}


/* ===== generic section ===== */
.section{padding:104px 0;position:relative}
.section--alt{background:linear-gradient(180deg,transparent,rgba(24,13,46,.55) 18%,rgba(24,13,46,.55) 82%,transparent)}
.head{max-width:44em;margin-bottom:52px}
.head--center{margin-inline:auto;text-align:center}
.eyebrow{display:inline-block;font-size:clamp(1rem,1.5vw,1.18rem);font-weight:700;letter-spacing:.08em;color:var(--honey);margin-bottom:12px}
.head h2{font-size:clamp(1.6rem,3.1vw,2.35rem)}
.head p{color:var(--muted);margin-top:14px}

/* ===== capabilities: puzzle honeycomb + light sweep ===== */
.hive{
  position:relative;width:min(100%,720px);margin-inline:auto;aspect-ratio:1.039;
  --gap:1.1%;
}

/* empty board: dark hexagon slots (the puzzle frame) */
.hive-frame{position:absolute;inset:0;pointer-events:none;z-index:0}
.hive-frame .slot{
  position:absolute;width:33.333%;height:40%;
  left:calc(var(--cx) * 33.333%);top:calc(var(--ry) * 30%);
}
.hive-frame .slot::before{
  content:"";position:absolute;inset:var(--gap);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  background:rgba(255,255,255,.05);
}
.hive-frame .slot::after{
  content:"";position:absolute;inset:calc(var(--gap) + 1.5px);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  background:#0d0719;
}


/* ===== page-wide vertical neon halo (sweeps the whole body) ===== */
#capabilities{position:relative;overflow:hidden}
.page-sweep{
  position:absolute;top:0;bottom:0;left:0;right:auto;direction:ltr;
  width:min(190px,20vw);z-index:20;pointer-events:none;opacity:0;transform:translateX(-110%);
  background:linear-gradient(90deg,
    transparent,
    rgba(88,28,205,.10) 18%,
    rgba(124,58,237,.42) 38%,
    rgba(167,110,255,.95) 50%,
    rgba(124,58,237,.42) 62%,
    rgba(88,28,205,.10) 82%,
    transparent);
  filter:blur(7px);mix-blend-mode:screen;
}
.page-sweep::after{
  content:"";position:absolute;top:0;bottom:0;left:50%;width:3px;margin-left:-1.5px;
  background:linear-gradient(180deg,transparent,rgba(196,150,255,.9) 12%,#c7a2ff 50%,rgba(196,150,255,.9) 88%,transparent);
  box-shadow:0 0 22px 6px rgba(124,58,237,.75),0 0 60px 18px rgba(88,28,205,.45);
}
#capabilities.is-sweeping .page-sweep{animation:pageSweep 2.9s cubic-bezier(.34,0,.64,1) forwards}
@keyframes pageSweep{
  0%{opacity:0;transform:translateX(-110%)}
  4%{opacity:1}
  88%{opacity:1}
  100%{opacity:0;transform:translateX(calc(100vw + 120%))}
}

/* puzzle pieces flying into their cells */
.hex-cell{
  position:absolute;width:33.333%;height:40%;z-index:1;
  left:calc(var(--cx) * 33.333%);top:calc(var(--ry) * 30%);
  opacity:0;
  transform:translate(var(--dx),var(--dy)) rotate(var(--rot)) scale(.8);
  transition:opacity .9s var(--ease-out),transform 1.5s cubic-bezier(.22,.68,.3,1);
  transition-delay:calc(var(--i) * 220ms);
}
.hive.is-assembled .hex-cell{opacity:1;transform:none}

/* neon tube edge: dark glass core, thin glowing outline */
.hex-shell{
  position:absolute;inset:var(--gap);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  background:rgba(150,110,255,.14);
  transition:background .85s var(--ease-out),filter .85s var(--ease-out);
}
.hex-shell::before{
  content:"";position:absolute;inset:1.5px;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  background:#0b0616;
  transition:background .9s var(--ease-out);
}
.hive.is-lit .hex-shell{
  background:linear-gradient(150deg,#8b5cf6,#7c3aed 45%,#5b21b6);
  filter:drop-shadow(0 0 3px rgba(150,90,255,.95)) drop-shadow(0 0 12px rgba(109,40,217,.6));
}
.hive.is-lit .hex-shell::before{
  background:radial-gradient(120% 120% at 50% 100%,rgba(88,28,205,.20),#0b0616 62%);
}

.hex-body{
  position:absolute;inset:12% 16%;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;gap:6px;z-index:2;
}
.hex-ico{width:clamp(20px,2.6vw,28px);height:clamp(20px,2.6vw,28px);fill:none;stroke:rgba(160,120,255,.4);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:stroke .8s var(--ease-out),transform .5s var(--ease),filter .8s var(--ease-out)}
.hive.is-lit .hex-ico{stroke:#a877ff;filter:drop-shadow(0 0 6px rgba(124,58,237,.9))}
.hex-body h3{font-size:clamp(.78rem,1.28vw,1rem);line-height:1.5;color:var(--dim);transition:color .8s var(--ease-out),text-shadow .8s var(--ease-out)}
.hive.is-lit .hex-body h3{color:#ece1ff;text-shadow:0 0 12px rgba(124,58,237,.75)}
.hex-body p{color:rgba(169,156,201,.45);font-size:clamp(.62rem,.95vw,.8rem);line-height:1.6;transition:color .8s var(--ease-out)}
.hive.is-lit .hex-body p{color:var(--muted)}
.hex-cell:hover{z-index:4}
.hive.is-lit .hex-cell:hover .hex-shell{filter:drop-shadow(0 0 6px rgba(167,110,255,1)) drop-shadow(0 0 22px rgba(109,40,217,.85))}
.hex-cell:hover .hex-ico{transform:scale(1.14)}


/* ===== products: alternating rows + 3D animated cards ===== */
.prows{display:flex;flex-direction:column;gap:clamp(48px,7vw,96px)}
.prow{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,60px);align-items:center}
.prow--flip .prow-text{order:2}
.prow-idx{display:block;font-size:.8rem;letter-spacing:.2em;color:var(--dim);margin-bottom:10px}
.prow-tag{display:inline-block;font-size:.74rem;padding:5px 13px;border-radius:999px;color:#dcc9ff;
  background:rgba(124,58,237,.14);border:1px solid rgba(150,110,255,.3);margin-bottom:14px}
.prow-text h3{font-size:clamp(1.1rem,2vw,1.42rem);line-height:1.7;margin-bottom:12px}
.prow-text p{color:var(--muted);font-size:.94rem}
.prow-feats{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.prow-feats li{font-size:.76rem;padding:5px 12px;border-radius:999px;background:rgba(139,92,246,.10);
  border:1px solid var(--line);color:#d3c1ff}

.prow-stage{perspective:1200px}
.pcard{
  position:relative;aspect-ratio:4/3;border-radius:26px;
  border:1px solid rgba(150,110,255,.26);background:#0b0616;
  transform-style:preserve-3d;
  transform:rotateX(var(--tx,5deg)) rotateY(var(--ty,-7deg)) translateZ(0);
  transition:transform .5s var(--ease),border-color .5s,box-shadow .6s;
  box-shadow:0 40px 80px -50px rgba(109,40,217,.9);
  will-change:transform;
}
.prow--flip .pcard{--ty:7deg}
.pcard:hover{border-color:rgba(167,110,255,.6);box-shadow:0 46px 92px -44px rgba(140,70,255,.95)}
.pcard.is-tilting{transition:transform .12s linear,border-color .5s,box-shadow .6s}
.pcard-glow{position:absolute;inset:-6% -4% -14%;pointer-events:none;z-index:0;
  background:radial-gradient(60% 50% at 50% 100%,rgba(124,58,237,.45),transparent 72%);filter:blur(14px)}

/* the stacked 3D deck inside the card */
.pdeck{position:absolute;inset:0;border-radius:26px;overflow:hidden;transform-style:preserve-3d}
.pdeck-img{
  position:absolute;inset:-4%;width:108%;height:108%;object-fit:cover;
  transform:translateZ(-28px) scale(1.06);
  filter:saturate(1.15) contrast(1.05) brightness(.82);
  animation:deckDrift 22s ease-in-out infinite;
}
@keyframes deckDrift{50%{transform:translateZ(-28px) scale(1.12) translate(-1.5%,-1%)}}
.pdeck-tint{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(200deg,rgba(88,28,205,.30),transparent 42%),
    radial-gradient(80% 70% at 50% 110%,rgba(59,15,122,.75),transparent 70%),
    linear-gradient(0deg,rgba(11,6,22,.72),rgba(11,6,22,.10) 55%)}
.pdeck-grid{position:absolute;inset:0;pointer-events:none;opacity:.35;transform:translateZ(10px);
  background:linear-gradient(rgba(167,110,255,.16) 1px,transparent 1px) 0 0/100% 30px,
    linear-gradient(90deg,rgba(167,110,255,.16) 1px,transparent 1px) 0 0/30px 100%;
  -webkit-mask-image:radial-gradient(75% 70% at 50% 50%,#000,transparent);
  mask-image:radial-gradient(75% 70% at 50% 50%,#000,transparent)}
.pcard::after{content:"";position:absolute;inset:0;border-radius:26px;pointer-events:none;z-index:6;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px);opacity:.55}
.pcard-scan{position:absolute;left:0;right:0;height:24%;z-index:5;pointer-events:none;transform:translateZ(30px);
  background:linear-gradient(180deg,transparent,rgba(167,110,255,.20) 55%,rgba(199,162,255,.65) 80%,transparent);
  animation:deckScan 6s linear infinite}
@keyframes deckScan{0%{top:-26%}100%{top:104%}}
.pcard-corners{position:absolute;inset:16px;z-index:5;pointer-events:none;transform:translateZ(44px);
  background:
    linear-gradient(#c7a2ff,#c7a2ff) 0 0/18px 1.5px no-repeat,
    linear-gradient(#c7a2ff,#c7a2ff) 0 0/1.5px 18px no-repeat,
    linear-gradient(#c7a2ff,#c7a2ff) 100% 0/18px 1.5px no-repeat,
    linear-gradient(#c7a2ff,#c7a2ff) 100% 0/1.5px 18px no-repeat,
    linear-gradient(#c7a2ff,#c7a2ff) 0 100%/18px 1.5px no-repeat,
    linear-gradient(#c7a2ff,#c7a2ff) 0 100%/1.5px 18px no-repeat,
    linear-gradient(#c7a2ff,#c7a2ff) 100% 100%/18px 1.5px no-repeat,
    linear-gradient(#c7a2ff,#c7a2ff) 100% 100%/1.5px 18px no-repeat;
  opacity:.75;filter:drop-shadow(0 0 6px rgba(124,58,237,.9))}

/* floating chips */
.pchip{position:absolute;z-index:7;font-size:.68rem;padding:5px 12px;border-radius:999px;
  background:rgba(13,7,25,.82);border:1px solid rgba(167,110,255,.45);color:#e4d6ff;backdrop-filter:blur(6px);
  box-shadow:0 0 22px -6px rgba(124,58,237,.95);animation:chipFloat 5s ease-in-out infinite}
.pchip--a{top:9%;inset-inline-start:7%;transform:translateZ(70px)}
.pchip--b{bottom:10%;inset-inline-end:7%;transform:translateZ(56px);animation-delay:-2.5s}
@keyframes chipFloat{50%{translate:0 -8px}}

/* ===== HUD atoms (shared across product scenes) ===== */
.hud{position:absolute;inset:0;z-index:4;pointer-events:none;transform-style:preserve-3d}
.hud>*{position:absolute}

.hud-box{left:var(--x);top:var(--y);width:var(--w);height:var(--h);border:1.5px solid rgba(199,162,255,.85);
  border-radius:5px;transform:translateZ(38px);box-shadow:0 0 16px -4px rgba(167,110,255,.95),inset 0 0 18px -8px rgba(167,110,255,.9);
  animation:hudBox 4.4s ease-in-out infinite;animation-delay:var(--d)}
.hud-box::after{content:"";position:absolute;inset-inline-start:0;top:-9px;width:34%;height:2px;background:#c7a2ff;
  box-shadow:0 0 10px 2px rgba(124,58,237,.9)}
@keyframes hudBox{0%,100%{translate:0 0;opacity:.55}50%{translate:6% -5%;opacity:1}}

.hud-lock{left:var(--x);top:var(--y);width:56px;height:56px;margin:-28px 0 0 -28px;transform:translateZ(52px);
  animation:lockIn 3.4s ease-in-out infinite;animation-delay:var(--d)}
.hud-lock b{position:absolute;width:16px;height:16px;border:1.6px solid #c7a2ff;filter:drop-shadow(0 0 6px rgba(124,58,237,1))}
.hud-lock b:nth-child(1){left:0;top:0;border-inline-end:0;border-bottom:0}
.hud-lock b:nth-child(2){right:0;top:0;border-inline-start:0;border-bottom:0}
.hud-lock b:nth-child(3){left:0;bottom:0;border-inline-end:0;border-top:0}
.hud-lock b:nth-child(4){right:0;bottom:0;border-inline-start:0;border-top:0}
@keyframes lockIn{0%,100%{transform:translateZ(52px) scale(1.3);opacity:.35}55%{transform:translateZ(52px) scale(1);opacity:1}}

.hud-ping{left:var(--x);top:var(--y);width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;
  border:1px solid rgba(199,162,255,.85);transform:translateZ(26px);
  animation:hudPing 3s ease-out infinite;animation-delay:var(--d)}
@keyframes hudPing{0%{transform:translateZ(26px) scale(.4);opacity:.95}100%{transform:translateZ(26px) scale(5);opacity:0}}

.hud-route{left:10%;right:10%;top:58%;height:2px;transform:translateZ(30px);border-radius:2px;
  background:repeating-linear-gradient(90deg,rgba(199,162,255,.95) 0 10px,transparent 10px 20px);
  animation:routeRun 1.4s linear infinite;filter:drop-shadow(0 0 6px rgba(124,58,237,.9))}
@keyframes routeRun{to{background-position:20px 0}}
.hud-dot{position:absolute;top:-5px;width:12px;height:12px;border-radius:50%;background:#e9dcff;
  box-shadow:0 0 16px 5px rgba(167,110,255,.95);animation:dotRun 6s ease-in-out infinite}
@keyframes dotRun{0%,100%{left:2%}50%{left:92%}}

.hud-meter{left:8%;bottom:12%;width:34%;height:22%;display:flex;align-items:flex-end;gap:4px;transform:translateZ(40px)}
.hud-meter b{flex:1;height:var(--h);border-radius:2px;background:linear-gradient(180deg,#c7a2ff,#5b21b6);
  box-shadow:0 0 10px -2px rgba(124,58,237,.95);transform-origin:bottom;
  animation:meterUp 2.6s ease-in-out infinite;animation-delay:calc(var(--m) * -.18s)}
@keyframes meterUp{50%{transform:scaleY(.45)}}

.hud-wave{left:16%;right:16%;top:30%;height:20%;opacity:.85;mix-blend-mode:screen;display:flex;align-items:center;gap:5px;transform:translateZ(44px)}
.hud-wave b{flex:1;height:20%;border-radius:3px;background:linear-gradient(180deg,#e0ccff,#6d28d9);
  box-shadow:0 0 12px -3px rgba(167,110,255,.95);animation:waveBar 1.6s ease-in-out infinite;
  animation-delay:calc(var(--w) * -.1s)}
@keyframes waveBar{50%{height:94%}}
.hud-langs{left:12%;right:12%;bottom:16%;display:flex;gap:6px;transform:translateZ(60px)}
.hud-langs b{flex:1;text-align:center;font-size:.72rem;font-weight:400;padding:5px 0;border-radius:9px;color:#e4d6ff;
  border:1px solid rgba(167,110,255,.4);background:rgba(13,7,25,.7);
  animation:langOn 4.5s ease-in-out infinite;animation-delay:calc(var(--i,0) * -.7s)}
.hud-langs b:nth-child(2){animation-delay:-.9s}.hud-langs b:nth-child(3){animation-delay:-1.8s}
.hud-langs b:nth-child(4){animation-delay:-2.7s}.hud-langs b:nth-child(5){animation-delay:-3.6s}
@keyframes langOn{45%,58%{border-color:#c7a2ff;color:#fff;box-shadow:0 0 18px -4px rgba(167,110,255,1)}}

.hud-radar{left:50%;top:48%;width:46%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;overflow:hidden;
  border:1px solid rgba(167,110,255,.45);transform:translateZ(24px) rotateX(58deg);
  background:radial-gradient(circle,rgba(124,58,237,.20),transparent 68%)}
.hud-radar i{position:absolute;inset:0;border-radius:50%}
.hud-radar i:nth-child(1){background:conic-gradient(from 0deg,rgba(199,162,255,.55),transparent 26%);animation:spin360 4s linear infinite}
.hud-radar i:nth-child(2){inset:26%;border:1px solid rgba(167,110,255,.4)}
@keyframes spin360{to{transform:rotate(360deg)}}

.hud-arc{left:50%;top:46%;width:40%;aspect-ratio:1;translate:-50% -50%;transform:translateZ(46px)}
.hud-arc i{position:absolute;inset:0;border-radius:50%;border:1.5px solid transparent;
  border-top-color:#c7a2ff;border-inline-end-color:rgba(167,110,255,.5);
  filter:drop-shadow(0 0 8px rgba(124,58,237,.9));animation:spin360 7s linear infinite}
.hud-arc i:nth-child(2){inset:18%;border-top-color:transparent;border-bottom-color:#a877ff;animation-duration:4.5s;animation-direction:reverse}

.hud-node{width:9px;height:9px;border-radius:50%;background:#e9dcff;transform:translateZ(50px);
  box-shadow:0 0 14px 4px rgba(124,58,237,.9);animation:nodeBob 4s ease-in-out infinite;
  animation-delay:calc(var(--n) * -.7s)}
.hud-node:nth-child(1){left:18%;top:30%}.hud-node:nth-child(2){right:22%;top:24%}
.hud-node:nth-child(3){left:30%;bottom:26%}.hud-node:nth-child(4){right:26%;bottom:30%}
.hud-node:nth-child(5){left:52%;top:52%}
@keyframes nodeBob{50%{translate:0 -10px;opacity:.6}}

.hud-link{left:16%;right:16%;top:50%;height:1px;transform:translateZ(20px);
  background:linear-gradient(90deg,transparent,rgba(199,162,255,.8),transparent);
  animation:linkFade 3.2s ease-in-out infinite}
@keyframes linkFade{50%{opacity:.2}}


/* ===== hive process ===== */
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative}
.step{position:relative;padding:0 16px;text-align:center}
.step-hex{
  position:relative;width:74px;height:84px;margin:0 auto 20px;display:grid;place-items:center;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  background:var(--grad);font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:1.15rem;color:#170a24;
  transition:transform .5s var(--ease),box-shadow .5s;
}
.step:hover .step-hex{transform:translateY(-6px) rotate(-4deg);box-shadow:var(--glow-v)}
.step-hex::after{content:"";position:absolute;inset:2px;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:#150c28;z-index:0}
.step-hex b{position:relative;z-index:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.step h3{font-size:1.02rem;margin-bottom:9px}
.step p{color:var(--muted);font-size:.87rem}

/* ===== about / values ===== */
.about{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.about p{color:var(--muted);margin-bottom:18px}
.values{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.value{
  padding:22px;border-radius:18px;border:1px solid var(--line);background:linear-gradient(150deg,rgba(255,255,255,.05),rgba(255,255,255,.012));
  transition:transform .45s var(--ease),border-color .4s
}
.value:hover{transform:translateY(-6px);border-color:var(--honey)}
.value h4{font-size:1rem;margin-bottom:8px;color:var(--honey-2)}
.value p{color:var(--muted);font-size:.86rem;margin:0}

/* ===== CTA + footer ===== */
.cta{position:relative;padding:96px 0;text-align:center;overflow:hidden}
.cta-card{
  position:relative;padding:64px 34px;border-radius:30px;border:1px solid var(--line-strong);
  background:linear-gradient(150deg,rgba(88,28,135,.4),rgba(214,51,140,.16) 55%,rgba(255,176,32,.12));
  overflow:hidden;
}
.cta-card::before{
  content:"";position:absolute;inset:0;opacity:.35;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath fill='none' stroke='%23ffd166' stroke-opacity='.4' d='M28 0 54 16.2v32.3L28 64.7 2 48.5V16.2z'/%3E%3C/svg%3E");
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000,transparent 70%);
  mask-image:radial-gradient(circle at 50% 50%,#000,transparent 70%);
}
.cta-card>*{position:relative}
.cta h2{font-size:clamp(1.6rem,3.3vw,2.4rem)}
.cta p{color:#e2d3ff;margin:16px auto 30px;max-width:38em}
.cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.contact-row{display:flex;gap:30px;justify-content:center;flex-wrap:wrap;margin-top:38px;color:var(--muted);font-size:.9rem}
.contact-row span{display:inline-flex;align-items:center;gap:8px}
.contact-row svg{width:17px;height:17px;fill:none;stroke:var(--honey);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.contact-row a:hover{color:var(--honey-2)}

.site-footer{border-top:1px solid var(--line);padding:44px 0 34px;background:rgba(18,10,36,.5)}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.footer-inner small{color:var(--dim);font-size:.82rem}
.footer-links{display:flex;gap:18px;font-size:.86rem;color:var(--muted)}
.footer-links a:hover{color:var(--text)}

.to-top{
  position:fixed;z-index:130;inset-inline-end:22px;bottom:22px;width:48px;height:54px;display:grid;place-items:center;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);border:0;cursor:pointer;
  background:var(--grad);color:#170a24;opacity:0;transform:translateY(16px) scale(.85);pointer-events:none;
  transition:opacity .4s,transform .4s var(--ease);
}
.to-top.is-on{opacity:1;transform:none;pointer-events:auto}

/* ===== reveal animations ===== */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.reveal[data-reveal="scale"]{transform:translateY(20px) scale(.97)}
.reveal[data-reveal="blur"]{filter:blur(9px)}
.reveal.is-in{opacity:1;transform:none;filter:none}
.stagger>*{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);transition-delay:calc(var(--i,0)*70ms)}
.stagger.is-in>*{opacity:1;transform:none}

/* ===== responsive ===== */
@media (max-width:1080px){
  .prow{gap:26px}
  .flow{grid-template-columns:repeat(2,1fr);row-gap:44px}
  .flow-line{display:none}
}
@media (max-width:900px){
  .nav{
    position:fixed;top:78px;inset-inline:14px;flex-direction:column;gap:4px;padding:16px;
    border-radius:20px;border:1px solid var(--line);background:rgba(14,8,26,.96);backdrop-filter:blur(18px);
    opacity:0;transform:translateY(-12px);pointer-events:none;transition:opacity .3s,transform .35s var(--ease);
  }
  .nav.is-open{opacity:1;transform:none;pointer-events:auto}
  .burger{display:flex}
  .header-cta{display:none}
  .hero-inner,.about{grid-template-columns:1fr;gap:44px}
  .hero-visual{min-height:360px;order:-1}
  .prow{grid-template-columns:1fr}
  .prow--flip .prow-text{order:0}
  .pcard{aspect-ratio:16/10}
  .section{padding:76px 0}
}
@media (max-width:700px){
  .hero-title .line-1{white-space:normal;margin-bottom:.3em}
  .hero-actions{display:grid;grid-template-columns:1fr}
}
@media (max-width:560px){
  .values,.flow{grid-template-columns:1fr}
  .hex-body p{display:none}
  .hex-body{inset:14% 12%}
  .stats{gap:24px}
  .chip{font-size:.7rem;padding:6px 11px}
}


@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
  .reveal,.stagger>*{opacity:1!important;transform:none!important;filter:none!important}
  .hex-cell{opacity:1!important;transform:none!important}
  .rot-word{transition:none}
  .page-sweep{display:none}
  .chip{opacity:1}
}


/* ===== product HUD: neon optimization curve (p1) ===== */
.hud-curve{position:absolute;left:9%;right:9%;bottom:11%;height:34%;overflow:visible;transform:translateZ(42px);
  fill:none;filter:drop-shadow(0 0 7px rgba(167,110,255,.85))}
.hud-curve-ghost{stroke:rgba(167,110,255,.20);stroke-width:1.4;stroke-dasharray:4 5;vector-effect:non-scaling-stroke}
.hud-curve-line{stroke:#c7a2ff;stroke-width:1.8;stroke-linecap:round;vector-effect:non-scaling-stroke;
  stroke-dasharray:260;stroke-dashoffset:260;animation:curveDraw 4.2s cubic-bezier(.4,0,.3,1) infinite}
@keyframes curveDraw{0%{stroke-dashoffset:260;opacity:.35}18%{opacity:1}70%,100%{stroke-dashoffset:0;opacity:1}}
.hud-curve-dot{fill:#f3ebff;filter:drop-shadow(0 0 8px rgba(199,162,255,1))}

/* ===== product HUD: vertical serpentine path (p2 / p4) ===== */
.hud-snake{position:absolute;top:12%;bottom:12%;width:16%;overflow:visible;transform:translateZ(46px);
  fill:none;filter:drop-shadow(0 0 8px rgba(124,58,237,.9))}
.hud-snake--car{right:6%;left:auto}
.hud-snake-ghost{stroke:rgba(167,110,255,.22);stroke-width:1.2;stroke-dasharray:3 5;vector-effect:non-scaling-stroke}
.hud-snake-line{stroke:#b98cff;stroke-width:1.7;stroke-linecap:round;vector-effect:non-scaling-stroke;
  stroke-dasharray:120 300;animation:snakeRun 5s linear infinite}
@keyframes snakeRun{0%{stroke-dashoffset:420}100%{stroke-dashoffset:0}}
.hud-snake-dot{fill:#f4edff;filter:drop-shadow(0 0 9px rgba(199,162,255,1))}

/* ===== product HUD: delicate sound equalizer (p5) ===== */
/* no mix-blend-mode here: blending inside 3D/filtered stacking contexts is
   inconsistent across browsers and made the bars vanish in some setups. */
.hud-eq{left:38%;right:38%;top:56%;height:9%;display:flex;align-items:center;justify-content:center;gap:4px;
  transform:translateZ(44px)}
.hud-eq b{width:1.5px;height:20%;opacity:.9;border-radius:2px;background:linear-gradient(180deg,#e6d6ff,#7c3aed);
  box-shadow:0 0 8px -1px rgba(167,110,255,.95);animation:eqBar 1.25s ease-in-out infinite;
  animation-delay:calc(var(--w) * -.08s)}
@keyframes eqBar{0%,100%{height:18%;opacity:.65}50%{height:100%;opacity:1}}

/* ===== process: neon line that fills on scroll ===== */
/* top offset is measured by JS (--flow-line-top) so a different loaded font
   or a missing web font can never push the line off the hexagons. */
.flow-line{position:absolute;top:var(--flow-line-top,37px);left:8%;right:8%;height:2px;border-radius:2px;
  overflow:hidden;background:rgba(167,110,255,.14);z-index:0}
.flow-line i{position:absolute;top:0;bottom:0;right:0;left:auto;width:0;border-radius:2px;
  background:linear-gradient(270deg,rgba(124,58,237,.55),#c7a2ff);
  box-shadow:0 0 12px 2px rgba(124,58,237,.85),0 0 26px 6px rgba(88,28,205,.45);
  transition:width 4.6s cubic-bezier(.35,0,.35,1)}
.flow.is-drawn .flow-line i{width:100%}

/* the connecting line only makes sense in the single-row desktop layout */
@media (max-width:900px){.flow-line{display:none}}

/* ===== about cards: richer idle + hover ===== */
.value{position:relative;overflow:hidden;
  background:linear-gradient(150deg,rgba(167,110,255,.10),rgba(255,255,255,.015) 55%,rgba(255,176,32,.05));
  box-shadow:0 14px 34px -26px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.06);
  transition:transform .45s var(--ease),border-color .4s,box-shadow .45s,background .45s}
.value::before{content:"";position:absolute;inset-inline-start:0;top:14%;bottom:14%;width:2px;border-radius:2px;
  background:var(--grad);opacity:.5;transition:opacity .4s,transform .5s var(--ease);transform:scaleY(.45)}
.value::after{content:"";position:absolute;inset:-40% -10% auto auto;width:150px;height:150px;border-radius:50%;
  background:radial-gradient(circle,rgba(167,110,255,.30),transparent 70%);opacity:0;transition:opacity .5s}
.value:hover{transform:translateY(-8px);border-color:rgba(199,162,255,.55);
  box-shadow:0 26px 54px -30px rgba(124,58,237,.85),inset 0 1px 0 rgba(255,255,255,.09)}
.value:hover::before{opacity:1;transform:scaleY(1)}
.value:hover::after{opacity:1}
.value:hover h4{color:#e9dcff}


/* ===== Apis wordmark (image lockup used wherever the name appears) ===== */
.wm{display:inline-block;height:1em;width:2.59em;vertical-align:-.16em;
  background:url("img/apis-word.png") center/contain no-repeat}
.wm--light{background-image:url("img/apis-word-light.png")}
.wm--brand{height:1.5rem;width:3.89rem;vertical-align:middle;
  background:linear-gradient(105deg,#3a7bd5 0%,#7c3aed 48%,#c026a8 100%);
  -webkit-mask:url("img/apis-word.png") center/contain no-repeat;
  mask:url("img/apis-word.png") center/contain no-repeat}
.wm--footer{height:1.35rem;width:3.5rem;vertical-align:middle}

/* ===== process: steps stay lit once the neon line passes them ===== */
.step-hex{
  transition:transform .5s var(--ease),box-shadow .6s var(--ease),filter .6s}
.step-hex::after{transition:background .6s,box-shadow .6s}
.step.is-lit .step-hex{box-shadow:0 0 0 1px rgba(199,162,255,.5),0 0 26px 5px rgba(124,58,237,.6),0 0 60px 14px rgba(88,28,205,.32)}
.step.is-lit .step-hex::after{background:radial-gradient(circle at 50% 30%,rgba(124,58,237,.55),rgba(21,12,40,.98) 78%)}
.step.is-lit .step-hex b{color:transparent}
.step.is-lit h3{color:#e9dcff}
.step.is-lit .step-hex{transform:translateY(-4px)}
.step-flash{position:absolute;inset:-10% 0 auto 0;height:0;pointer-events:none}
.step.is-lit .step-hex::before{content:"";position:absolute;inset:-14px;border-radius:50%;
  background:radial-gradient(circle,rgba(167,110,255,.35),transparent 68%);z-index:-1;animation:stepGlowIn .7s var(--ease) both}
@keyframes stepGlowIn{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}

/* ===== back-to-top: richer hover ===== */
.to-top{overflow:visible}
.to-top::before{content:"";position:absolute;inset:-8px;z-index:-1;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  background:linear-gradient(160deg,rgba(167,110,255,.65),rgba(255,176,32,.5));
  opacity:0;transform:scale(.85);transition:opacity .4s,transform .45s var(--ease)}
.to-top.is-on:hover::before,.to-top.is-on:focus-visible::before{opacity:1;transform:scale(1)}
.to-top.is-on:hover{box-shadow:0 18px 40px -14px rgba(124,58,237,.95),0 0 26px rgba(255,176,32,.35)}
.to-top-ico{display:grid;place-items:center;width:20px;height:20px;color:#170a24}
.to-top-ico svg{transition:transform .4s var(--ease)}
.to-top.is-on:hover .to-top-ico svg{transform:translateY(-3px)}
.to-top:focus-visible{outline:2px solid var(--honey-2);outline-offset:4px}

/* ===== footer (structured, Optis-style) ===== */
.footer-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.6fr 1fr 1.15fr 1.2fr;gap:36px;padding:6px 0 40px}
.footer-grid .brand-sub{display:block;margin-top:6px;font-size:.74rem;letter-spacing:.02em;color:var(--dim)}
.fcol h4{font-size:1.02rem;margin-bottom:16px;position:relative;padding-bottom:10px;color:var(--text)}
.fcol h4::after{content:"";position:absolute;bottom:0;inset-inline-start:0;width:38px;height:2px;border-radius:2px;background:var(--grad)}
.fcol--brand p{color:var(--muted);font-size:.95rem;margin-top:14px;max-width:34em;line-height:1.9}
.social{display:flex;gap:10px;margin-top:20px}
.social a{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  border:1px solid var(--line);background:var(--surface);
  transition:transform .35s var(--ease),border-color .35s,background .35s,box-shadow .35s}
.social a svg{width:19px;height:19px;fill:none;stroke:#c6b6ea;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:stroke .35s}
.social a:hover{transform:translateY(-3px);border-color:var(--honey);background:var(--surface-2);box-shadow:0 14px 28px -16px rgba(167,110,255,.9)}
.social a:hover svg{stroke:var(--honey-2)}
.flinks{display:grid;gap:11px;list-style:none;margin:0;padding:0}
.flinks a{color:var(--muted);font-size:.94rem;position:relative;padding-inline-start:14px;transition:color .3s}
.flinks a::before{content:"";position:absolute;inset-inline-start:0;top:.62em;width:6px;height:6px;border-radius:50%;
  background:var(--line-strong);transition:background .3s,transform .3s var(--ease)}
.flinks a:hover{color:var(--text)}
.flinks a:hover::before{background:var(--honey);transform:scale(1.35)}
.fcontact{display:grid;gap:14px;list-style:none;margin:0;padding:0}
.fcontact li{display:flex;align-items:flex-start;gap:11px;color:var(--muted);font-size:.93rem;line-height:1.8}
.fcontact a{color:var(--muted);transition:color .3s}
.fcontact a:hover{color:var(--honey-2)}
.fico{flex:0 0 auto;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;
  border:1px solid var(--line);background:rgba(167,110,255,.09)}
.fico svg{width:17px;height:17px;fill:none;stroke:var(--honey);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.footer-cta{margin-top:20px;padding:11px 22px;font-size:.92rem}
.footer-bottom{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:14px;
  flex-wrap:wrap;padding:18px 0 6px;border-top:1px solid var(--line)}
.footer-bottom{padding-inline-end:96px}
.footer-bottom small{color:var(--dim);font-size:.82rem}
@media (max-width:640px){.footer-bottom{padding-inline-end:0;padding-block-end:60px}}
.fbottom-links{display:flex;align-items:center;gap:10px;color:var(--dim);font-size:.88rem}
.fbottom-links a{color:var(--muted);transition:color .3s}
.fbottom-links a:hover{color:var(--honey-2)}
@media (max-width:1000px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:30px}
  .fcol--brand{grid-column:1 / -1}
}
@media (max-width:620px){
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{justify-content:center;text-align:center}
}

/* ===== long body copy: justified alignment ===== */
p,li,.lead,.desc,.card p,.value p,.pcard p,.prow p,.step p,.qa-a p,.fcol p{
  text-align:justify;text-justify:inter-word;text-align-last:start;
  -webkit-hyphens:none;hyphens:none}
.cta p,.foot p,.head--center p{text-align:center;text-align-last:center}

/* ===================== AI SPOTLIGHT (fixed hero badge) ===================== */
.ai-spotlight{
  position:fixed;
  top:150px;
  left:clamp(16px,3.2vw,54px);
  z-index:110;
  display:flex;
  align-items:center;
  gap:26px;
  padding:26px 38px 26px 28px;
  border-radius:34px;
  border:1px solid rgba(214,51,140,.35);
  background:linear-gradient(135deg,rgba(24,10,40,.86),rgba(12,7,22,.82));
  backdrop-filter:blur(14px) saturate(1.25);
  box-shadow:0 18px 50px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.04) inset,0 0 42px rgba(168,85,247,.18);
  animation:aiFloat 6s ease-in-out infinite;
  transition:opacity .45s var(--ease),transform .45s var(--ease),visibility .45s;
  pointer-events:none;
}
.ai-spotlight.is-hidden{opacity:0;visibility:hidden;transform:translateY(-14px) scale(.96)}

.ai-spotlight__halo{
  position:absolute;inset:-2px;border-radius:inherit;pointer-events:none;
  background:conic-gradient(from 0deg,rgba(168,85,247,.0),rgba(168,85,247,.55),rgba(214,51,140,.55),rgba(255,176,32,.55),rgba(168,85,247,.0));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  padding:2px;opacity:.85;
  animation:aiSpin 6s linear infinite;
}

.ai-spotlight__icon{position:relative;width:110px;height:110px;flex:0 0 auto;display:grid;place-items:center}
.ai-spotlight__icon .ai-net{width:110px;height:110px;position:relative;z-index:2}
.ai-hex{animation:aiHexPulse 3.4s ease-in-out infinite;transform-origin:60px 60px}
.ai-links path{stroke-dasharray:6 10;animation:aiFlow 2.2s linear infinite}
.ai-node{animation:aiNode 2.6s ease-in-out infinite}
.ai-node:nth-child(2){animation-delay:.18s}
.ai-node:nth-child(3){animation-delay:.36s}
.ai-node:nth-child(4){animation-delay:.54s}
.ai-node:nth-child(5){animation-delay:.72s}
.ai-node:nth-child(6){animation-delay:.9s}
.ai-node:nth-child(7){animation-delay:1.08s}
.ai-node--core{filter:drop-shadow(0 0 8px rgba(214,51,140,.9))}

.ai-orbit{position:absolute;inset:3px;border-radius:50%;border:1.5px dashed rgba(255,176,32,.35);animation:aiSpin 9s linear infinite}
.ai-orbit--2{inset:18px;border-color:rgba(168,85,247,.35);animation-duration:6s;animation-direction:reverse}
.ai-orbit i{position:absolute;top:-4px;left:50%;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:#ffb020;box-shadow:0 0 14px #ffb020}
.ai-orbit--2 i{background:#a855f7;box-shadow:0 0 14px #a855f7}

.ai-pulse{position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(214,51,140,.5);animation:aiPulse 3s ease-out infinite}
.ai-pulse--2{animation-delay:1.5s}

.ai-spotlight__text{display:flex;flex-direction:column;gap:7px;line-height:1.15}
.ai-title{
  font-size:clamp(1.55rem,3.4vw,2.9rem);
  font-weight:900;letter-spacing:-.01em;
  background:linear-gradient(100deg,#ffb020,#d6338c,#a855f7,#ffb020);
  background-size:260% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:aiShine 5s linear infinite;
}
.ai-sub{font-size:clamp(12px,1.05vw,16px);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.55)}

@keyframes aiFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes aiSpin{to{transform:rotate(360deg)}}
@keyframes aiShine{to{background-position:260% 0}}
@keyframes aiFlow{to{stroke-dashoffset:-32}}
@keyframes aiNode{0%,100%{opacity:.45;transform:scale(.9);transform-box:fill-box;transform-origin:center}50%{opacity:1;transform:scale(1.15)}}
@keyframes aiHexPulse{0%,100%{opacity:.65}50%{opacity:1}}
@keyframes aiPulse{0%{transform:scale(.75);opacity:.7}100%{transform:scale(1.5);opacity:0}}

@media (max-width:1180px){
  .ai-spotlight{top:120px;gap:18px;padding:18px 26px 18px 18px;border-radius:24px}
  .ai-spotlight__icon,.ai-spotlight__icon .ai-net{width:78px;height:78px}
  .ai-orbit{inset:2px;border-width:1.2px}
  .ai-orbit--2{inset:13px}
  .ai-orbit i{width:6px;height:6px;margin-left:-3px;top:-3px}
  .ai-spotlight__text{gap:5px}
  .ai-title{font-size:clamp(1.3rem,2.8vw,2.3rem)}
  .ai-sub{font-size:clamp(9px,.9vw,12px)}
}
@media (max-width:820px){
  .ai-spotlight{display:none}
}
@media (prefers-reduced-motion:reduce){
  .ai-spotlight,.ai-spotlight__halo,.ai-hex,.ai-links path,.ai-node,.ai-orbit,.ai-pulse,.ai-title{animation:none}
}