/* ===== Optis — design tokens ===== */
:root{
  --bg:#05060f;
  --bg-2:#080a1a;
  --surface:rgba(255,255,255,.035);
  --surface-2:rgba(255,255,255,.06);
  --line:rgba(120,160,255,.16);
  --line-strong:rgba(120,200,255,.42);
  --text:#e8ecff;
  --muted:#94a0c4;
  --cyan:#00C8FF;
  --blue:#4f7dff;
  --violet:#8B5CF6;
  --pink:#b57cff;
  --ok:#34e0a1;
  --warn:#ff5d8f;
  --grad:linear-gradient(100deg,var(--cyan),var(--blue) 45%,var(--violet) 75%,var(--pink));
  --radius:18px;
  --shell:1180px;
  --ease:cubic-bezier(.22,.7,.25,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.85;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{line-height:1.4;margin:0;font-weight:700;letter-spacing:-.01em}
p{margin:0}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
.shell{width:min(var(--shell),calc(100% - 40px));margin-inline:auto}
b,strong{font-weight:700}

/* ===== background ===== */
.bg-grid{
  position:fixed;inset:-2px;z-index:-3;pointer-events:none;
  /* an extension of the hero skeleton: columns, floor beams and X-bracing */
  background-image:
    repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 168px),
    repeating-linear-gradient(0deg,rgba(120,160,255,.13) 0 1px,transparent 1px 132px),
    repeating-linear-gradient(38.2deg,rgba(0,200,255,.055) 0 1px,transparent 1px 214px),
    repeating-linear-gradient(-38.2deg,rgba(139,92,246,.055) 0 1px,transparent 1px 214px),
    repeating-linear-gradient(90deg,rgba(120,200,255,.07) 0 3px,transparent 3px 168px);
  -webkit-mask-image:radial-gradient(ellipse 120% 90% at 50% 10%,#000 12%,rgba(0,0,0,.55) 55%,transparent 92%);
  mask-image:radial-gradient(ellipse 120% 90% at 50% 10%,#000 12%,rgba(0,0,0,.55) 55%,transparent 92%);
  opacity:.6;
}
/* light "structure comes alive" layer: floor plates drifting very slowly */
.bg-grid::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    repeating-linear-gradient(0deg,rgba(0,200,255,.10) 0 2px,transparent 2px 396px);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 40%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 40%,transparent);
  animation:bgFloors 22s linear infinite;
}
@keyframes bgFloors{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,396px,0)}}
.bg-glow{position:fixed;z-index:-2;width:60vw;height:60vw;max-width:820px;max-height:820px;border-radius:50%;filter:blur(120px);opacity:.28;pointer-events:none}
.bg-glow--a{top:-18vw;inset-inline-end:-12vw;background:radial-gradient(circle,#3b82f6,transparent 65%)}
.bg-glow--b{top:38vh;inset-inline-start:-18vw;background:radial-gradient(circle,#8B5CF6,transparent 65%)}

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

/* ===== header ===== */
.site-header{position:fixed;top:0;inset-inline:0;z-index:90;transition:background .35s var(--ease),backdrop-filter .35s,border-color .35s;border-bottom:1px solid transparent}
.site-header.is-stuck{background:rgba(5,6,15,.72);backdrop-filter:blur(14px);border-bottom-color:var(--line)}
.header-inner{display:flex;align-items:center;gap:22px;height:74px}
.brand{display:flex;align-items:center;gap:10px;font-family:"Space Grotesk",sans-serif;font-size:1.45rem;font-weight:700;letter-spacing:.02em}
.brand-mark{width:24px;height:24px;border-radius:50%;background:conic-gradient(from 200deg,var(--pink),var(--violet),var(--blue),var(--cyan),var(--pink));position:relative;box-shadow:0 0 22px rgba(90,140,255,.6)}
.brand-mark::after{content:"";position:absolute;inset:6px;border-radius:50%;background:var(--bg)}
.brand-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.nav{display:flex;gap:4px;margin-inline-start:auto}
.nav-link{position:relative;padding:8px 12px;font-size:.92rem;color:var(--muted);border-radius:10px;transition:color .25s}
.nav-link::after{content:"";position:absolute;inset-inline:12px;bottom:2px;height:1.5px;background:var(--grad);transform:scaleX(0);transform-origin:right;transition:transform .3s var(--ease)}
.nav-link:hover,.nav-link.active{color:var(--text)}
.nav-link:hover::after,.nav-link.active::after{transform:scaleX(1)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px;border-radius:999px;font-size:.95rem;font-weight:500;cursor:pointer;border:1px solid transparent;transition:transform .25s var(--ease),box-shadow .3s,background .3s,border-color .3s}
.btn--primary{background:var(--grad);color:#04030c;font-weight:700;box-shadow:0 10px 34px -12px rgba(120,120,255,.9)}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 16px 42px -12px rgba(150,120,255,1)}
.btn--ghost{border-color:var(--line-strong);color:var(--text);background:var(--surface)}
.btn--ghost:hover{transform:translateY(-2px);background:var(--surface-2);border-color:var(--cyan)}
.header-cta{padding:9px 18px;font-size:.88rem}
.burger{display:none;width:42px;height:42px;border-radius:12px;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.6px;background:var(--text);transition:transform .3s var(--ease),opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.6px) rotate(-45deg)}

/* ===== hero ===== */
.hero{padding:150px 0 0;position:relative}
.hero-inner{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center;padding-bottom:70px}
.pill{display:inline-block;padding:6px 16px;border-radius:999px;border:1px solid var(--line-strong);background:var(--surface);font-size:.8rem;color:#bcd4ff}
.hero-title{font-size:clamp(2.2rem,5.2vw,3.9rem);font-weight:900;margin:20px 0 18px}
.grad{display:block;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 100%;animation:hue 9s linear infinite}
@keyframes hue{to{background-position:200% 0}}
.hero-sub{color:var(--muted);font-size:1.05rem;max-width:38em}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.stats{display:flex;gap:34px;flex-wrap:wrap;margin-top:44px;padding-top:26px;border-top:1px solid var(--line)}
.stat .num,.out .num{display:block;font-family:"Space Grotesk",sans-serif;font-size:1.9rem;font-weight:700;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat small{color:var(--muted);font-size:.82rem}

.hero-visual{position:relative;height:430px;border-radius:26px;border:1px solid var(--line);background:linear-gradient(160deg,rgba(30,50,120,.28),rgba(120,40,160,.14));overflow:hidden;backdrop-filter:blur(4px)}
.orb{position:absolute;top:34px;inset-inline-start:50%;transform:translateX(-50%);width:180px;height:180px;display:grid;place-items:center}
.orb-core{width:74px;height:74px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#bff4ff,#4f7dff 45%,#8B5CF6 80%);box-shadow:0 0 60px rgba(90,150,255,.75);animation:pulse 4.5s var(--ease) infinite}
.orb-ring{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(120,200,255,.35);animation:spin 14s linear infinite}
.orb-ring::after{content:"";position:absolute;top:-4px;inset-inline-start:50%;width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 14px var(--cyan)}
.orb-ring--2{inset:26px;border-color:rgba(232,121,249,.35);animation-duration:9s;animation-direction:reverse}
.orb-ring--2::after{background:var(--pink);box-shadow:0 0 14px var(--pink)}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.07);filter:brightness(1.2)}}

.hud{position:absolute;z-index:1;bottom:22px;inset-inline:22px;padding:16px 18px;border-radius:16px;border:1px solid var(--line);background:rgba(5,8,22,.72);font-family:"Space Grotesk",sans-serif;font-size:.8rem}
.hud-row{display:flex;justify-content:space-between;color:var(--muted);margin-bottom:5px;direction:ltr}
.hud-row b{color:var(--text)}
.hud-row b.ok{color:var(--ok)}
.hud-row b.down{color:var(--cyan)}
.bar{height:4px;border-radius:99px;background:rgba(255,255,255,.08);margin-bottom:12px;overflow:hidden}
.bar i{display:block;height:100%;width:var(--w);background:var(--grad);border-radius:99px;animation:grow 1.6s var(--ease) both}
.bar i.bar--ok{background:linear-gradient(90deg,var(--cyan),var(--ok))}
@keyframes grow{from{width:0}}
.wave{position:absolute;top:178px;z-index:0;inset-inline:20px;height:80px;width:calc(100% - 40px);opacity:.8}

.marquee{overflow:hidden;border-block:1px solid var(--line);background:rgba(255,255,255,.02);padding:12px 0}
.marquee-track{display:flex;gap:0;width:max-content;font-family:"Space Grotesk",sans-serif;font-size:.82rem;letter-spacing:.22em;color:#7f8dbb;animation:slide 34s linear infinite}
.marquee-track>span{padding-inline-end:34px;white-space:nowrap}
@keyframes slide{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* ===== sections ===== */
.section{padding:110px 0}
.section--alt{background:linear-gradient(180deg,transparent,rgba(255,255,255,.022),transparent)}
.head{max-width:660px;margin-bottom:56px}
.eyebrow{display:inline-block;font-size:.78rem;letter-spacing:.18em;color:var(--cyan);margin-bottom:12px}
.head h2,.split h2{font-size:clamp(1.6rem,3.2vw,2.35rem);margin-bottom:14px}
.head p,.lead{color:var(--muted)}
.grid{display:grid;gap:20px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

.card{position:relative;padding:30px 26px;border-radius:var(--radius);border:1px solid var(--line);background:var(--surface);overflow:hidden;transition:transform .4s var(--ease),border-color .4s,background .4s}
.card::before{content:"";position:absolute;inset:0;background:radial-gradient(340px circle at var(--mx,50%) var(--my,0%),rgba(90,150,255,.16),transparent 60%);opacity:0;transition:opacity .4s}
.card:hover{transform:translateY(-6px);border-color:var(--line-strong);background:var(--surface-2)}
.card:hover::before{opacity:1}
.card>*{position:relative}
.idx{position:absolute;top:22px;inset-inline-end:24px;font-family:"Space Grotesk",sans-serif;font-size:.8rem;color:rgba(255,255,255,.22)}
.ico{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;border:1px solid var(--line-strong);background:rgba(80,130,255,.1);margin-bottom:18px}
.ico svg{width:22px;height:22px;fill:none;stroke:var(--cyan);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.card h3{font-size:1.08rem;margin-bottom:10px}
.card p{color:var(--muted);font-size:.93rem}

/* timeline */
.timeline{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:t}
.timeline li{position:relative;padding:26px 24px;border-radius:var(--radius);border:1px solid var(--line);background:var(--surface);transition:transform .4s var(--ease),border-color .4s}
.timeline li:hover{transform:translateY(-5px);border-color:var(--line-strong)}
.timeline b{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:var(--grad);color:#05060f;font-family:"Space Grotesk",sans-serif;margin-bottom:14px}
.timeline h4{font-size:1rem;margin-bottom:6px}
.timeline p{color:var(--muted);font-size:.9rem}

/* split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.split--rev .chat{order:2}
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px}
.chips span{padding:7px 15px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-size:.85rem;color:#c3cfef;transition:border-color .3s,transform .3s var(--ease)}
.chips span:hover{border-color:var(--cyan);transform:translateY(-2px)}

.panel{border-radius:22px;border:1px solid var(--line);background:rgba(8,11,28,.75);padding:22px;box-shadow:0 30px 70px -40px rgba(80,120,255,.7)}
.panel-head{display:flex;justify-content:space-between;align-items:center;font-family:"Space Grotesk",sans-serif;font-size:.76rem;letter-spacing:.16em;color:var(--muted);padding-bottom:14px;border-bottom:1px solid var(--line);direction:ltr}
.dot{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 12px var(--ok);animation:pulse 2.4s infinite}
.checks li{position:relative;display:flex;align-items:center;gap:12px;padding:14px 0 18px;border-bottom:1px solid rgba(255,255,255,.05);font-family:"Space Grotesk",sans-serif;font-size:.86rem;direction:ltr}
.checks li span{width:110px;color:var(--muted)}
.checks li em{font-style:normal;color:var(--text)}
.checks li i{position:absolute;bottom:8px;inset-inline-start:0;height:3px;border-radius:99px;background:linear-gradient(90deg,var(--cyan),var(--blue));width:0;transition:width 1.2s var(--ease)}
.checks li.warn i{background:linear-gradient(90deg,var(--violet),var(--warn))}
.checks li.warn em{color:var(--warn)}
.panel-foot{margin-top:14px;font-size:.85rem;color:var(--muted)}

.prod{padding:28px 24px;border-radius:var(--radius);border:1px solid var(--line);background:var(--surface);transition:transform .4s var(--ease),border-color .4s}
.prod:hover{transform:translateY(-6px);border-color:var(--line-strong)}
.prod h3{font-family:"Space Grotesk",sans-serif;font-size:1.05rem;margin-bottom:8px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.prod p{color:var(--muted);font-size:.9rem}
.prod--hl{background:linear-gradient(150deg,rgba(80,120,255,.16),rgba(232,121,249,.1));border-color:var(--line-strong)}

/* chat */
.chat{border-radius:22px;border:1px solid var(--line);background:rgba(8,11,28,.75);padding:22px;display:flex;flex-direction:column;gap:12px;box-shadow:0 30px 70px -40px rgba(168,85,247,.8)}
.chat-head{display:flex;align-items:center;gap:9px;font-size:.82rem;color:var(--muted);padding-bottom:12px;border-bottom:1px solid var(--line)}
.msg{padding:12px 16px;border-radius:16px;font-size:.92rem;max-width:88%}
.msg.me{align-self:flex-start;background:rgba(255,255,255,.06);border:1px solid var(--line)}
.msg.ai{align-self:flex-end;background:linear-gradient(120deg,rgba(79,125,255,.22),rgba(168,85,247,.2));border:1px solid var(--line-strong)}
.dots{display:inline-flex;gap:4px;margin-inline-start:6px}
.dots i{width:5px;height:5px;border-radius:50%;background:var(--cyan);animation:bounce 1.2s infinite}
.dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}
@keyframes bounce{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-5px);opacity:1}}
.ticks{margin-top:22px;display:grid;gap:12px}
.ticks li{position:relative;padding-inline-start:30px;color:var(--muted)}
/* honeycomb (flat-top comb cell) markers */
.ticks li{padding-inline-start:32px}
.ticks li::before{
  content:"";position:absolute;inset-inline-start:0;top:5px;width:18px;height:20.8px;
  background:var(--grad);opacity:.95;
  clip-path:polygon(0 25%,0 75%,50% 100%,100% 75%,100% 25%,50% 0,50% 0,
                    50% 3.2%,6.5% 26.6%,6.5% 73.4%,50% 96.8%,93.5% 73.4%,93.5% 26.6%,50% 3.2%);
  filter:drop-shadow(0 0 8px rgba(0,200,255,.35));
}
.ticks li::after{
  content:"";position:absolute;inset-inline-start:3.75px;top:9.35px;width:10.5px;height:12.1px;
  background:linear-gradient(135deg,rgba(0,200,255,.20),rgba(139,92,246,.16));
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  transform:none;border:0;
}
.ticks li .hexdot{
  position:absolute;inset-inline-start:6.35px;top:12.35px;width:5.3px;height:6.1px;
  background:var(--grad);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  z-index:1;filter:drop-shadow(0 0 5px rgba(0,220,255,.55));
}

/* reusable comb mark (used in chips and inline lists) */
.combmark{position:relative;display:inline-block;width:15px;height:17.3px;flex:none}
.combmark::before{content:"";position:absolute;inset:0;background:var(--grad);
  clip-path:polygon(0 25%,0 75%,50% 100%,100% 75%,100% 25%,50% 0,50% 0,
                    50% 3.2%,6.5% 26.6%,6.5% 73.4%,50% 96.8%,93.5% 73.4%,93.5% 26.6%,50% 3.2%);
  filter:drop-shadow(0 0 6px rgba(0,200,255,.35))}
.combmark>i{position:absolute;inset:33% 33%;background:var(--grad);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.combmark--sm{width:12px;height:13.9px}


.outcomes .out{padding:34px 26px;border-radius:var(--radius);border:1px solid var(--line);background:var(--surface);text-align:center}
.outcomes p{color:var(--text);font-size:1.05rem;font-weight:500;line-height:1.9}

/* cta */
.cta{padding:100px 0 120px}
.cta-inner{text-align:center;padding:64px 30px;border-radius:30px;border:1px solid var(--line-strong);background:radial-gradient(700px circle at 50% 0%,rgba(79,125,255,.22),transparent 70%),rgba(255,255,255,.03)}
.cta-inner h2{font-size:clamp(1.6rem,3.4vw,2.4rem);margin-bottom:12px}
.cta-inner p{color:var(--muted);margin-bottom:8px}
.cta-inner .hero-actions{justify-content:center}

.footer{border-top:1px solid var(--line);padding:40px 0;background:rgba(255,255,255,.015)}
.footer-inner{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.footer p{color:var(--muted);font-size:.92rem}
.footer small{color:#63709a}

/* ===== reveal animation ===== */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal[data-delay="1"]{transition-delay:.09s}
.reveal[data-delay="2"]{transition-delay:.18s}
.reveal[data-delay="3"]{transition-delay:.27s}
.reveal[data-delay="4"]{transition-delay:.36s}
.reveal[data-delay="5"]{transition-delay:.45s}

/* ===== responsive ===== */
@media (max-width:1000px){
  .hero-inner,.split{grid-template-columns:1fr;gap:40px}
  .split--rev .chat{order:0}
  .grid-3,.grid-4,.timeline{grid-template-columns:repeat(2,1fr)}
  .header-cta{display:none}
  .burger{display:flex}
  .nav{position:fixed;top:74px;inset-inline:14px;flex-direction:column;gap:2px;padding:14px;border-radius:20px;border:1px solid var(--line);background:rgba(6,8,20,.96);backdrop-filter:blur(16px);opacity:0;visibility:hidden;transform:translateY(-12px);transition:all .3s var(--ease)}
  .nav.open{opacity:1;visibility:visible;transform:none}
  .nav-link{padding:12px}
}
@media (max-width:620px){
  .grid-3,.grid-4,.timeline{grid-template-columns:1fr}
  .hero{padding-top:120px}
  .hero-visual{height:380px}
  .section{padding:80px 0}
  .stats{gap:22px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
}

/* =========================================================
   PREMIUM MOTION LAYER — performance-first
   GPU-only properties (transform/opacity/filter), zero libs.
   ========================================================= */

:root{
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-soft:cubic-bezier(.33,1,.68,1);
  --dur:.85s;
  --sy:0;            /* page scroll (px) — written once per frame by JS */
  --pointer-x:50%;
  --pointer-y:0%;
}

/* keep the browser off the main thread for known-moving layers */
.orb,.orb-ring,.marquee-track,.bg-glow{will-change:transform}
.hero-visual,.panel,.chat{transform:translateZ(0)}

/* ---------- 1. Unified reveal system ---------- */
/* Backwards compatible with .reveal, but richer + staggered. */
.reveal{
  opacity:0;
  transform:translate3d(0,26px,0);
  transition:
    opacity var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-out),
    filter var(--dur) var(--ease-out);
  transition-delay:calc(var(--i,0) * 80ms);
  will-change:opacity,transform;
}
.reveal[data-reveal="blur"]{filter:blur(10px);transform:translate3d(0,20px,0)}
.reveal[data-reveal="scale"]{transform:translate3d(0,32px,0) scale(.965)}
.reveal[data-reveal="right"]{transform:translate3d(34px,0,0)}
.reveal[data-reveal="left"]{transform:translate3d(-34px,0,0)}
.reveal.in{opacity:1;transform:none;filter:none}
.reveal.in.done{will-change:auto}

/* line-by-line typographic reveal (built by JS, no layout thrash) */
.line-mask{display:block;overflow:hidden;padding-block:.06em}
.line-mask>span{
  display:block;
  transform:translate3d(0,110%,0);
  transition:transform 1s var(--ease-out);
  transition-delay:calc(var(--i,0) * 90ms);
}
.in .line-mask>span,.line-mask.in>span{transform:none}

/* word cascade for the gradient headline (word-level keeps Persian shaping) */
.word{display:inline-block;overflow:hidden;vertical-align:top;padding-block:.06em}
.word-in{display:inline-block;transform:translate3d(0,105%,0);
  transition:transform 1s var(--ease-out);
  transition-delay:calc(var(--i,0) * 70ms)}
.in .word-in{transform:none}

/* ---------- 2. Scroll-linked depth (parallax) ---------- */
/* JS writes --p (-1..1 progress) per element; CSS decides the motion. */
[data-parallax]{transform:translate3d(0,calc(var(--p,0) * var(--pd,40px)),0)}
[data-parallax="slow"]{--pd:26px}
[data-parallax="mid"]{--pd:56px}
[data-parallax="fast"]{--pd:92px}
.bg-glow--a{transform:translate3d(0,calc(var(--sy) * .05px),0)}
.bg-glow--b{transform:translate3d(0,calc(var(--sy) * -.035px),0)}
.bg-grid{transform:translate3d(0,calc(var(--sy) * .02px),0)}

/* native scroll-linked animation where supported (no JS at all) */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .section .head,.grid>*,.timeline li,.prod,.out{
      animation:lift-in linear both;
      animation-timeline:view();
      animation-range:entry 4% cover 26%;
    }
    @keyframes lift-in{from{opacity:0;transform:translate3d(0,34px,0) scale(.985)}to{opacity:1;transform:none}}
  }
}

/* ---------- 3. Section transitions & depth ---------- */
.section{position:relative}
.section--alt::before,.section--alt::after{
  content:"";position:absolute;inset-inline:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--line-strong),transparent);opacity:.7
}
.section--alt::before{top:0}.section--alt::after{bottom:0}

/* soft spotlight following the cursor, one composited layer */
.spotlight{
  position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:0;
  transition:opacity .6s var(--ease-soft);
  background:radial-gradient(520px circle at var(--pointer-x) var(--pointer-y),rgba(79,125,255,.10),transparent 70%);
}
.spotlight.on{opacity:1}
.spotlight{background:radial-gradient(520px circle at var(--pointer-x) var(--pointer-y),rgba(0,200,255,.10),transparent 70%)}

/* ---------- 4. Micro-interactions ---------- */
.btn{position:relative;overflow:hidden;transform:translate3d(var(--mxb,0),var(--myb,0),0)}
.btn::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.38),transparent 70%);
  transform:translateX(-120%);transition:transform .8s var(--ease-out);pointer-events:none
}
.btn:hover::after,.btn:focus-visible::after{transform:translateX(120%)}
.btn:active{transform:scale(.975)}

.card,.prod,.timeline li,.out{
  transition:transform .55s var(--ease-out),border-color .45s,background .45s,box-shadow .55s var(--ease-out);
}
.card:hover,.prod:hover,.timeline li:hover{box-shadow:0 26px 60px -34px rgba(90,140,255,.75)}
.out:hover{transform:translateY(-5px);border-color:var(--line-strong)}
.ico{transition:transform .5s var(--ease-out),box-shadow .5s}
.card:hover .ico{transform:translateY(-3px) rotate(-4deg) scale(1.06);box-shadow:0 0 26px -6px rgba(0,200,255,.6)}
.card:hover .idx{color:rgba(255,255,255,.42)}
.idx{transition:color .4s}

/* gentle 3D tilt on the hero panel (JS supplies --rx/--ry) */
.hero-visual{
  transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translate3d(0,calc(var(--p,0) * 30px),0);
  transition:transform .5s var(--ease-soft);
}
.hero-visual .hud,.hero-visual .orb{transition:transform .6s var(--ease-soft)}
.hero-visual:hover .orb{transform:translateX(-50%) translateZ(40px) scale(1.03)}

.marquee-track{animation-play-state:running}
.marquee:hover .marquee-track{animation-play-state:paused}

.chips span:focus-visible,.nav-link:focus-visible,.btn:focus-visible,a:focus-visible{
  outline:2px solid var(--cyan);outline-offset:3px;border-radius:10px
}

/* header shrink on scroll */
.site-header.is-stuck .header-inner{height:64px}
.header-inner{transition:height .4s var(--ease-out)}

/* progress bar smoothing */
.scroll-progress{transition:transform .12s linear;box-shadow:0 0 14px rgba(79,125,255,.7)}

/* ---------- 5. Sticky storytelling: workflow ---------- */
@media (min-width:1001px){
  #workflow .shell{position:relative}
  .timeline li{transition:transform .6s var(--ease-out),border-color .45s,box-shadow .5s}
  .timeline li.in-view{border-color:var(--line-strong);box-shadow:0 26px 60px -40px rgba(120,160,255,.8)}
}

/* ---------- 6. Media entrances ---------- */
img,svg.media{opacity:0;transition:opacity .7s var(--ease-out),transform .9s var(--ease-out);transform:scale(1.03)}
img.loaded,svg.media.loaded{opacity:1;transform:none}

/* ---------- 7. Reduced motion / low-power ---------- */
@media (prefers-reduced-motion:reduce){
  .reveal,.line-mask>span,.word-in{opacity:1!important;transform:none!important;filter:none!important}
  .spotlight{display:none}
  [data-parallax],.bg-glow,.bg-grid,.hero-visual{transform:none!important}
}

/* =========================================================
   Structural Insight Lab + Parallel pipeline  (v4)
   Pure CSS 3D — transform/opacity only, tokens reused.
   ========================================================= */
.lab-section{position:relative}
.lab{
  display:grid;grid-template-columns:.92fr 1.08fr;gap:34px;align-items:stretch;
  padding:26px;border-radius:28px;border:1px solid var(--line);
  background:linear-gradient(150deg,rgba(20,34,90,.34),rgba(90,40,140,.14) 60%,rgba(255,255,255,.02));
  backdrop-filter:blur(6px);
  box-shadow:0 40px 90px -60px rgba(80,120,255,.8);
}
.lab-side{display:flex;flex-direction:column;gap:20px;justify-content:center;padding:8px 6px}
.lab-tabs{display:flex;flex-direction:column;gap:8px}
.lab-tab{
  display:flex;align-items:center;gap:10px;text-align:start;
  padding:11px 14px;border-radius:14px;cursor:pointer;font:inherit;font-size:.95rem;
  color:var(--muted);background:transparent;border:1px solid transparent;
  transition:color .3s var(--ease),background .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease);
}
.lab-tab:hover{color:var(--text);background:var(--surface);transform:translateX(-3px)}
.lab-tab.is-active{color:var(--text);background:var(--surface-2);border-color:var(--line-strong);box-shadow:inset 0 0 0 1px rgba(0,200,255,.08)}
.lab-tab-k{font-family:"Space Grotesk",sans-serif;font-size:.78rem;opacity:.7}
.lab-copy h3{font-size:1.16rem;margin-bottom:6px}
.lab-copy p{color:var(--muted);font-size:.95rem}
.lab-copy{min-height:132px;transition:opacity .35s var(--ease),transform .35s var(--ease)}
.lab.is-switching .lab-copy{opacity:0;transform:translateY(8px)}

.lab-range{display:flex;align-items:center;gap:12px;font-size:.88rem;color:var(--muted)}
.lab-range input{
  flex:1;appearance:none;height:4px;border-radius:99px;outline:none;
  background:linear-gradient(90deg,var(--cyan),var(--violet),var(--warn));
}
.lab-range input::-webkit-slider-thumb{
  appearance:none;width:18px;height:18px;border-radius:50%;background:#fff;cursor:pointer;
  box-shadow:0 0 0 4px rgba(0,200,255,.22),0 4px 14px rgba(0,0,0,.5);transition:transform .2s var(--ease);
}
.lab-range input::-webkit-slider-thumb:hover{transform:scale(1.12)}
.lab-range input::-moz-range-thumb{width:16px;height:16px;border:none;border-radius:50%;background:#fff;cursor:pointer}

.lab-readout{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.ro{padding:11px 12px;border-radius:14px;border:1px solid var(--line);background:var(--surface)}
.ro small{display:block;color:var(--muted);font-size:.74rem;margin-bottom:2px}
.ro b{font-family:"Space Grotesk",sans-serif;font-size:1.08rem}
.ro b.ok{color:var(--ok)}
.ro b.bad{color:var(--warn)}
.ro--verdict{transition:border-color .35s,background .35s}

/* ---------- 3D stage ---------- */
.lab-stage{
  position:relative;min-height:440px;border-radius:22px;overflow:hidden;
  border:1px solid var(--line);
  background:radial-gradient(ellipse 80% 60% at 50% 15%,rgba(60,110,255,.20),transparent 70%),rgba(4,6,18,.55);
  perspective:1100px;perspective-origin:50% 42%;
}
.lab-stage::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(120,170,255,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(120,170,255,.10) 1px,transparent 1px);
  background-size:38px 38px;
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 60%,#000,transparent 78%);
  mask-image:radial-gradient(ellipse 70% 70% at 50% 60%,#000,transparent 78%);
}
.stage-glow{
  position:absolute;left:50%;top:62%;width:340px;height:340px;translate:-50% -50%;
  border-radius:50%;filter:blur(70px);opacity:.45;pointer-events:none;
  background:radial-gradient(circle,color-mix(in srgb,var(--cyan) 55%,transparent),transparent 66%);
  transition:background .6s var(--ease),opacity .6s var(--ease);
}
.lab[data-state="bad"] .stage-glow{background:radial-gradient(circle,color-mix(in srgb,var(--warn) 60%,transparent),transparent 66%);opacity:.55}

.stage-tag{
  position:absolute;inset-inline-start:16px;bottom:14px;display:flex;align-items:center;gap:8px;
  font-family:"Space Grotesk",sans-serif;font-size:.7rem;letter-spacing:.14em;color:var(--muted);
}
.stage-tag i{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 10px var(--ok);animation:labPulse 2.4s var(--ease) infinite}
@keyframes labPulse{0%,100%{opacity:1}50%{opacity:.25}}

/* tower */
.tower{
  position:absolute;left:50%;top:50%;width:0;height:0;
  transform-style:preserve-3d;
  transform:translate(-50%,-50%) rotateX(64deg) rotateZ(var(--spin,-26deg));
  transition:opacity .5s var(--ease),transform .8s var(--ease);
}
.flr{
  position:absolute;width:170px;height:170px;margin:-85px 0 0 -85px;
  border:1px solid rgba(140,190,255,.42);border-radius:8px;
  background:linear-gradient(135deg,rgba(0,200,255,.10),rgba(139,92,246,.07));
  box-shadow:0 0 22px -6px rgba(0,180,255,.45);
  transform-style:preserve-3d;
  transform:translateZ(calc(var(--i) * 30px)) rotateZ(calc(var(--tw,0deg) * var(--i))) translateX(calc(var(--dr,0px) * var(--i)));
  transition:transform .45s var(--ease),border-color .45s,box-shadow .45s,background .45s;
}
.flr::after{
  content:"";position:absolute;inset:26px;border:1px dashed rgba(140,190,255,.22);border-radius:4px;
}
.flr .nd{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 12px var(--cyan)}
.flr .nd:nth-child(1){inset-inline-start:-3px;top:-3px}
.flr .nd:nth-child(2){inset-inline-end:-3px;top:-3px}
.flr .nd:nth-child(3){inset-inline-start:-3px;bottom:-3px}
.flr .nd:nth-child(4){inset-inline-end:-3px;bottom:-3px}
.flr.is-hot{border-color:color-mix(in srgb,var(--warn) 70%,transparent);box-shadow:0 0 30px -4px color-mix(in srgb,var(--warn) 70%,transparent);background:linear-gradient(135deg,color-mix(in srgb,var(--warn) 14%,transparent),transparent)}
.flr.is-hot .nd{background:var(--warn);box-shadow:0 0 12px var(--warn)}
.cm,.cr{position:absolute;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;opacity:0;transition:opacity .4s}
.cm{inset-inline-start:calc(50% - 6px + var(--ecc,0px));background:var(--pink);box-shadow:0 0 14px var(--pink)}
.cr{inset-inline-start:calc(50% - 6px);border:2px solid var(--cyan);background:transparent}
.lab[data-mode="torsion"] .flr:last-child .cm,
.lab[data-mode="torsion"] .flr:last-child .cr{opacity:1}

/* beam / hinges svg */
.beam-svg{
  position:absolute;left:50%;top:50%;width:min(86%,430px);translate:-50% -50%;
  opacity:0;transform:scale(.94);transition:opacity .5s var(--ease),transform .6s var(--ease);
}
.beam-col rect{fill:rgba(120,170,255,.14);stroke:rgba(140,190,255,.5);stroke-width:1.4}
.beam-line{transition:d .5s var(--ease)}
.hinge{fill:var(--warn);opacity:0;transition:opacity .4s}
.beam-load path{stroke:var(--muted);stroke-width:1.6;stroke-dasharray:4 4;opacity:.7}
.lab[data-mode="scwb"] .hinge,.lab[data-state="bad"] .hinge{opacity:1;animation:hingePulse 1.8s var(--ease) infinite}
@keyframes hingePulse{0%,100%{r:6}50%{r:9}}

/* gauge */
.gauge{
  position:absolute;inset-inline-end:22px;top:22px;width:118px;height:118px;border-radius:50%;
  display:grid;place-items:center;opacity:0;transform:scale(.9);
  transition:opacity .5s var(--ease),transform .6s var(--ease);
}
.gauge-ring{
  position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(var(--gc,var(--cyan)) calc(var(--g,.65) * 300deg),rgba(255,255,255,.07) 0);
  -webkit-mask:radial-gradient(circle,transparent 56%,#000 57%);
  mask:radial-gradient(circle,transparent 56%,#000 57%);
  transform:rotate(30deg);transition:background .4s linear;
}
.gauge-val{text-align:center;line-height:1.2}
.gauge-val b{font-family:"Space Grotesk",sans-serif;font-size:1.35rem;display:block}
.gauge-val small{color:var(--muted);font-size:.68rem;letter-spacing:.1em}

.lab[data-mode="scwb"] .tower,.lab[data-mode="dc"] .tower{opacity:0;pointer-events:none;transform:translate(-50%,-50%) rotateX(64deg) rotateZ(-40deg) scale(.9)}
.lab[data-mode="scwb"] .beam-svg,.lab[data-mode="dc"] .beam-svg{opacity:1;transform:scale(1)}
.lab[data-mode="dc"] .gauge{opacity:1;transform:scale(1)}

/* ---------- parallel pipeline ---------- */
.pipe{
  display:grid;grid-template-columns:.8fr .6fr 1.1fr;align-items:center;gap:18px;
  padding:26px;border-radius:28px;border:1px solid var(--line);
  background:linear-gradient(200deg,rgba(20,34,90,.3),rgba(255,255,255,.02));
}
.pipe-engine{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;
  padding:26px 18px;border-radius:22px;border:1px solid var(--line-strong);background:var(--surface);
  font-family:"Space Grotesk",sans-serif;
}
.pipe-engine small{color:var(--muted);font-size:.75rem}
.pipe-engine-core{
  width:58px;height:58px;border-radius:50%;
  background:conic-gradient(from 0deg,var(--cyan),var(--violet),var(--pink),var(--cyan));
  box-shadow:0 0 34px -6px rgba(120,140,255,.9);animation:spinCore 6s linear infinite;position:relative;
}
.pipe-engine-core::after{content:"";position:absolute;inset:9px;border-radius:50%;background:var(--bg)}
@keyframes spinCore{to{transform:rotate(360deg)}}
.pipe-flow svg{width:100%;height:320px;overflow:visible}
.pipe-flow path{fill:none;stroke:rgba(140,190,255,.35);stroke-width:1.4;stroke-dasharray:6 10;animation:flowDash 2.4s linear infinite}
.pipe-flow path:nth-child(2){animation-duration:3.1s}
.pipe-flow path:nth-child(3){animation-duration:2.7s}
.pipe-flow path:nth-child(4){animation-duration:3.4s}
@keyframes flowDash{to{stroke-dashoffset:-64}}
.pipe-workers{display:flex;flex-direction:column;gap:10px}
.wk{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;
  padding:12px 14px;border-radius:16px;border:1px solid var(--line);background:var(--surface);
  transition:border-color .4s,background .4s,transform .4s var(--ease);
}
.wk.is-best{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 8%,transparent);transform:translateX(-6px)}
.wk-id{font-family:"Space Grotesk",sans-serif;font-size:.78rem;color:var(--muted)}
.wk-bar{height:5px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}
.wk-bar i{display:block;height:100%;width:var(--w,30%);border-radius:99px;background:var(--grad);transition:width .7s var(--ease)}
.wk-val{font-family:"Space Grotesk",sans-serif;font-size:.86rem}
.wk-val em{font-style:normal;color:var(--muted);font-size:.72rem}

@media (max-width:1000px){
  .lab{grid-template-columns:1fr}
  .pipe{grid-template-columns:1fr;gap:8px}
  .pipe-flow{display:none}
  .lab-stage{min-height:380px}
}
@media (prefers-reduced-motion:reduce){
  .pipe-flow path,.pipe-engine-core,.stage-tag i,.hinge{animation:none!important}
  .tower{transition:none}
}

/* =========================================================
   V5 — refinements
   (typography, hero background, card artwork, lab skeleton,
    animated CTA border, rich footer)
   ========================================================= */

/* ---------- 0. Typography: justify + larger micro labels ---------- */
p, .lead, .msg, .lab-copy p, .card p, .timeline p, .prod p, .panel-foot{
  text-align:justify;text-justify:inter-word;
}
.cta-inner p,.outcomes p,.footer-bottom,.stat small,.hud-row,.checks li,.ro small,.gauge-val small{
  text-align:center;
}
.outcomes p{text-align:center}
.hero-sub{text-align:justify}

/* micro-labels: bigger, still below body copy size */
.eyebrow{font-size:.98rem;letter-spacing:.12em;font-weight:500}
.head p,.lead{font-size:1.02rem}
.pill{font-size:.92rem;padding:7px 18px}
.stat small{font-size:.92rem;text-align:start}
.card h3{font-size:1.14rem}
.card p,.timeline p,.prod p,.head p{font-size:1rem}
.timeline h4{font-size:1.06rem}
.ro small{font-size:.86rem;text-align:start}
.ro b{font-size:1.14rem}
.lab-tab{font-size:1.01rem}
.lab-tab-k{font-size:.88rem}
.lab-copy h3{font-size:1.24rem}
.lab-copy p{font-size:1rem}
.lab-range{font-size:.98rem}
.stage-tag{font-size:.78rem}
.wk-id{font-size:.86rem}
.wk-val{font-size:.94rem}
.wk-val em{font-size:.8rem}
.pipe-engine small{font-size:.84rem}
.panel-head{font-size:.84rem}
.panel-foot{font-size:.94rem}
.chips span{font-size:.92rem}
.outcomes p{font-size:1rem}
.idx{font-size:.9rem}
.nav-link{font-size:.98rem}

/* ---------- 1. Hero background: civil engineering × AI ---------- */
.hero{overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.hero-bg-art{
  position:absolute;inset:0;width:100%;height:100%;opacity:1;
  -webkit-mask-image:radial-gradient(ellipse 115% 105% at 48% 62%,#000 42%,transparent 96%);
  mask-image:radial-gradient(ellipse 115% 105% at 48% 62%,#000 42%,transparent 96%);
  animation:heroDrift 26s ease-in-out infinite alternate;
}
@keyframes heroDrift{from{transform:translate3d(0,0,0) scale(1.02)}to{transform:translate3d(-2.2%,-1.4%,0) scale(1.07)}}
.hero-bg-veil{
  position:absolute;inset:0;
  background:
    radial-gradient(58% 56% at 84% 34%,rgba(5,6,15,.88),transparent 72%),
    radial-gradient(40% 40% at 22% 46%,rgba(5,6,15,.6),transparent 76%),
    linear-gradient(180deg,rgba(5,6,15,.45),rgba(5,6,15,0) 26%,rgba(5,6,15,.78));
}
/* one-time construction reveal (group opacity = cheap, no layout work) */
.hb-side,.hb-back,.hb-depth,.hb-brace,.hb-front,.hb-truss,.hb-nodes,.hb-edges,.hb-ai{
  opacity:0;animation:hbRise 1.5s var(--ease-out) forwards;
}
.hb-side{animation-delay:.05s}
.hb-back{animation-delay:.18s}
.hb-depth{animation-delay:.3s}
.hb-brace{animation-delay:.62s}
.hb-front{animation-delay:.42s}
.hb-truss{animation-delay:.78s}
.hb-nodes{animation-delay:.9s}
.hb-edges{animation-delay:1s}
.hb-ai{animation-delay:1.15s}
@keyframes hbRise{from{opacity:0}to{opacity:var(--o,1)}}
.hb-side{--o:.3}.hb-back{--o:.34}.hb-depth{--o:.26}
.hb-brace{--o:.4}.hb-front{--o:.52}.hb-truss{--o:.5}.hb-edges{--o:.45}

/* front frame: cheap opacity reveal (no per-path dash math) */
.hb-front{animation-duration:1.9s}

/* AI scan sweeping the skeleton */
.hb-scan{animation:hbScan 9s cubic-bezier(.5,0,.5,1) infinite;will-change:transform}
@keyframes hbScan{0%{transform:translateY(120px)}100%{transform:translateY(1160px)}}

.hb-edges path{stroke-dasharray:9 13;animation:hbFlow 3.2s linear infinite}
@keyframes hbFlow{to{stroke-dashoffset:-88}}

/* pulse only a subset of joints so the frame stays alive but light */
.hb-nodes circle{opacity:.5}
.hb-nodes circle:nth-child(4n+1){animation:hbNode 3.6s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.hb-nodes circle:nth-child(8n+3){animation:hbNode 4.4s ease-in-out .9s infinite;transform-box:fill-box;transform-origin:center}
.hb-ai circle{animation:hbNode 3s ease-in-out infinite;transform-box:fill-box;transform-origin:center;filter:drop-shadow(0 0 6px rgba(181,124,255,.8))}
.hb-ai circle:nth-child(2n){animation-delay:.5s}
.hb-ai circle:nth-child(3n){animation-delay:1.1s}
@keyframes hbNode{0%,100%{opacity:.35;transform:scale(.85)}50%{opacity:1;transform:scale(1.3)}}
.hb-pulse path{stroke-dasharray:26 240;animation:hbPulse 6s linear infinite}
@keyframes hbPulse{to{stroke-dashoffset:-1600}}
.hb-orb{animation:hbOrb 7s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:center}
@keyframes hbOrb{to{opacity:.5;transform:scale(1.16)}}


/* ---------- 2. Marquee ---------- */
.marquee{
  position:relative;padding:16px 0;direction:ltr;
  background:linear-gradient(90deg,rgba(0,200,255,.06),rgba(139,92,246,.07),rgba(0,200,255,.06));
  border-block:1px solid var(--line-strong);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee-track{
  font-family:"Sora","Space Grotesk",Vazirmatn,sans-serif;
  font-size:.98rem;font-weight:600;letter-spacing:.1em;
  color:#cfe0ff;animation-duration:64s;
  /* the track holds 2 identical halves; translating exactly -50% puts copy #2
     where copy #1 started => the loop is mathematically seamless / infinite */
  transform:translate3d(0,0,0);backface-visibility:hidden;
}
.marquee-track>span{
  display:inline-flex;align-items:center;padding-inline-end:26px;
  white-space:nowrap;text-shadow:0 0 18px rgba(90,150,255,.25);
}
/* honeycomb separator between ticker items */
.marquee-track>span.mq-sep{padding-inline-end:26px}
.marquee-track>span.mq-sep>i{
  display:block;width:14.7px;height:17px;background:var(--grad);opacity:.95;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  filter:drop-shadow(0 0 6px rgba(90,150,255,.45));
}
.marquee-track>span.mq-fa{font-family:Vazirmatn,sans-serif;letter-spacing:0;font-weight:500;color:#a9bbe6}

/* ---------- 3. Feature card artwork ---------- */
.card{isolation:isolate}
.card::after{
  content:"";position:absolute;inset:0;z-index:-1;opacity:.5;pointer-events:none;
  background:
    radial-gradient(120% 90% at 100% 0%,rgba(0,200,255,.12),transparent 58%),
    radial-gradient(90% 80% at 0% 100%,rgba(139,92,246,.12),transparent 60%);
  transition:opacity .45s var(--ease);
}
.card:hover::after{opacity:1}
.card-art{
  position:absolute;z-index:-1;inset-inline-end:-6px;bottom:14px;width:200px;height:140px;
  color:var(--cyan);opacity:.3;pointer-events:none;
  transition:transform .6s var(--ease-out),opacity .5s,color .5s;
  -webkit-mask-image:linear-gradient(200deg,#000,rgba(0,0,0,.55));
  mask-image:linear-gradient(200deg,#000,rgba(0,0,0,.55));
}
.card-art svg{width:100%;height:100%}
.card:hover .card-art{transform:translate3d(-6px,-10px,0) scale(1.08);opacity:.48;color:#8fd8ff}
.card[data-art="shield"] .card-art{color:var(--ok)}
.card[data-art="parallel"] .card-art{color:var(--violet)}
.card[data-art="report"] .card-art{color:var(--pink)}
.card[data-art="lock"] .card-art{color:var(--blue)}

/* ---------- 4. Product card artwork ---------- */
.prod{position:relative;overflow:hidden;isolation:isolate;padding:30px 24px 34px;min-height:200px}
.prod::after{
  content:"";position:absolute;inset:0;z-index:-1;opacity:.75;pointer-events:none;
  background:
    radial-gradient(120% 100% at 100% 100%,rgba(0,200,255,.14),transparent 60%),
    radial-gradient(90% 70% at 0% 0%,rgba(139,92,246,.12),transparent 62%);
  transition:opacity .5s var(--ease);
}
.prod:hover::after{opacity:1}
.prod-art{
  position:absolute;z-index:-1;inset-inline:-6px;bottom:-10px;height:120px;
  color:var(--cyan);opacity:.2;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 55%);
  mask-image:linear-gradient(180deg,transparent,#000 55%);
  transition:transform .6s var(--ease-out),opacity .5s;
}
.prod-art svg{width:100%;height:100%}
.prod:hover .prod-art{transform:translateY(-6px) scale(1.04);opacity:.34}
.prod[data-art="steel"] .prod-art{color:#7fd7ff}
.prod[data-art="concrete"] .prod-art{color:#9ab4ff}
.prod[data-art="ai"] .prod-art{color:var(--pink);opacity:.3}
.prod p{position:relative}

/* ---------- 5. Outcome card artwork ---------- */
.outcomes .out{position:relative;overflow:hidden;isolation:isolate;
  min-height:280px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  gap:14px;padding:30px 26px 34px}
.out-cap{position:relative;margin-top:26px;display:inline-flex;align-items:center;gap:8px;
  padding:5px 14px;border-radius:99px;font-size:.72rem;letter-spacing:.02em;
  color:#9fd6ff;border:1px solid var(--line-strong);background:rgba(5,8,22,.6)}
.out-cap i{width:6px;height:6px;border-radius:50%;background:var(--grad);box-shadow:0 0 10px rgba(90,180,255,.8)}
.out::before{content:"";position:absolute;inset-inline:26px;top:0;height:2px;z-index:1;
  background:var(--grad);opacity:.55;transform:scaleX(.35);transform-origin:50% 50%;
  transition:transform .55s var(--ease-out),opacity .4s}
.out:hover::before{transform:scaleX(1);opacity:.9}
.outcomes .out::after{
  content:"";position:absolute;inset:0;z-index:-1;opacity:.7;pointer-events:none;
  background:
    radial-gradient(80% 70% at 50% 0%,rgba(0,200,255,.14),transparent 62%),
    radial-gradient(90% 80% at 50% 120%,rgba(139,92,246,.14),transparent 60%);
}
.out-art{
  position:absolute;z-index:-1;inset-inline:8%;top:14px;bottom:132px;color:var(--cyan);
  display:grid;place-items:center;
  opacity:.34;pointer-events:none;transition:transform .6s var(--ease-out),opacity .5s;
  -webkit-mask-image:radial-gradient(120% 100% at 50% 40%,#000 55%,transparent 100%);
  mask-image:radial-gradient(120% 100% at 50% 40%,#000 55%,transparent 100%);
}
.out-art svg{width:100%;height:100%}
.out:hover .out-art{transform:translateY(-6px) scale(1.04);opacity:.5}
.out[data-art="time"] .out-art{color:var(--violet)}
.out[data-art="trace"] .out-art{color:var(--ok)}

/* ---------- 6. Lab range cursor states ---------- */
.lab-range input{cursor:pointer}
.lab-range input::-webkit-slider-runnable-track{cursor:pointer;height:4px;border-radius:99px}
.lab-range input::-moz-range-track{cursor:pointer;height:4px;border-radius:99px}
.lab-range input::-webkit-slider-thumb{cursor:grab;margin-top:-7px}
.lab-range input:active::-webkit-slider-thumb{cursor:grabbing;transform:scale(1.16)}
.lab-range input::-moz-range-thumb{cursor:grab}
.lab-range input:active::-moz-range-thumb{cursor:grabbing}

/* ---------- 7. Lab: beam always visible + 3D D/C skeleton ---------- */
.beam-line{stroke-width:10;opacity:1}
.lab[data-mode="scwb"] .beam-svg{opacity:1;transform:scale(1)}
.lab[data-mode="dc"] .beam-svg{opacity:0;transform:scale(.94);pointer-events:none}
.lab[data-mode="dc"] .tower,.lab[data-mode="scwb"] .tower{opacity:0}

.skeleton{
  position:absolute;left:50%;top:52%;width:0;height:0;
  opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(.9);
  transition:opacity .5s var(--ease),transform .6s var(--ease);
}
.lab[data-mode="dc"] .skeleton{opacity:1;transform:translate(-50%,-50%) scale(1)}
.skeleton-inner{
  position:absolute;left:0;top:0;width:0;height:0;transform-style:preserve-3d;
  transform:rotateX(-14deg) rotateY(var(--sy2,-32deg));
  animation:skelSpin2 26s ease-in-out infinite;
}
@keyframes skelSpin{
  from{transform:rotateX(-13deg) rotateY(-52deg)}
  50%{transform:rotateX(-17deg) rotateY(-18deg)}
  to{transform:rotateX(-13deg) rotateY(-52deg)}
}
.mb{
  position:absolute;border-radius:3px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--ok) 85%,white 5%),color-mix(in srgb,var(--ok) 55%,transparent));
  box-shadow:0 0 14px -2px color-mix(in srgb,var(--ok) 70%,transparent);
  transition:background .45s var(--ease),box-shadow .45s var(--ease),opacity .45s;
}
.mb.is-bad{
  background:linear-gradient(180deg,color-mix(in srgb,var(--warn) 90%,white 6%),color-mix(in srgb,var(--warn) 55%,transparent));
  box-shadow:0 0 20px -1px color-mix(in srgb,var(--warn) 80%,transparent);
}
.mb--slab{
  background:linear-gradient(135deg,rgba(120,190,255,.10),rgba(139,92,246,.06));
  border:1px solid rgba(140,190,255,.28);box-shadow:none;
}
.mb--node{border-radius:50%;background:#dff6ff;box-shadow:0 0 12px rgba(150,220,255,.9)}
.mb--joist{opacity:.72;border-radius:2px}
.mb--brace{opacity:.85;border-radius:2px}
.mb--roof{background:linear-gradient(135deg,rgba(0,200,255,.14),rgba(139,92,246,.10));border-color:rgba(140,200,255,.42)}
.mb--base{background:rgba(150,210,255,.22);border:1px solid rgba(150,210,255,.5);box-shadow:none;border-radius:2px}
.mb--node{width:8px;height:8px}
.skeleton-inner{--skel-scale:1}
@keyframes skelSpin2{
  from{transform:rotateX(-15deg) rotateY(-58deg)}
  50%{transform:rotateX(-19deg) rotateY(-12deg)}
  to{transform:rotateX(-15deg) rotateY(-58deg)}
}
.skeleton-legend{
  position:absolute;inset-inline-end:16px;bottom:14px;display:none;flex-direction:column;gap:6px;
  font-size:.82rem;color:var(--muted);
}
.lab[data-mode="dc"] .skeleton-legend{display:flex}
.skeleton-legend .lg{display:flex;align-items:center;gap:7px}
.skeleton-legend i{width:10px;height:10px;border-radius:3px;background:var(--ok);box-shadow:0 0 10px var(--ok)}
.skeleton-legend .lg--bad i{background:var(--warn);box-shadow:0 0 10px var(--warn)}

/* ---------- 8. CTA animated border ---------- */
.cta-inner{position:relative;overflow:hidden;border:none;isolation:isolate}
.cta-inner::before{
  content:"";position:absolute;left:50%;top:50%;width:150%;aspect-ratio:1;translate:-50% -50%;
  background:conic-gradient(from 0deg,var(--cyan),var(--blue) 22%,var(--violet) 42%,var(--pink) 58%,var(--cyan) 82%,var(--cyan));
  animation:ctaSpin 7s linear infinite;z-index:-2;filter:blur(.4px);
}
.cta-inner::after{
  content:"";position:absolute;inset:2px;border-radius:28px;z-index:-1;
  background:
    radial-gradient(700px circle at 50% 0%,rgba(79,125,255,.24),transparent 70%),
    linear-gradient(180deg,#080b1c,#06070f);
}
@keyframes ctaSpin{to{transform:rotate(360deg)}}
.cta-inner>*{position:relative;z-index:1}
.cta-inner{box-shadow:0 40px 100px -60px rgba(120,140,255,.9)}

/* ---------- 9. Footer ---------- */
.footer{
  position:relative;overflow:hidden;border-top:1px solid var(--line-strong);
  padding:0;background:linear-gradient(180deg,rgba(8,11,28,.6),rgba(4,5,14,.96));
}
.footer-art .ft-crane,.footer-art .ft-near{opacity:0;animation:hbRise 1.4s var(--ease-out) .2s forwards}
.footer-art .ft-near{--o:.24;animation-delay:.05s}
.footer-art .ft-crane{--o:.26;animation-delay:.35s}
.footer-art{position:absolute;inset:auto 0 0 0;height:400px;z-index:0;pointer-events:none;opacity:.42;
  -webkit-mask-image:linear-gradient(180deg,transparent,rgba(0,0,0,.5) 40%,#000 100%);
  mask-image:linear-gradient(180deg,transparent,rgba(0,0,0,.5) 40%,#000 100%);
}
/* keep the skyline strictly behind the text: soft scrim above the artwork */
.footer::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(4,5,14,.55),rgba(4,5,14,.82) 55%,rgba(4,5,14,.92));
}
.footer-art svg{width:100%;height:100%}
.footer-art .ft-nodes circle{
  animation:hbNode 3.6s ease-in-out infinite;
  transform-box:fill-box;transform-origin:center;
  filter:drop-shadow(0 0 6px rgba(120,220,255,.7));
}
.footer-art .ft-nodes circle:nth-child(2n){animation-delay:.7s}
.footer-art .ft-nodes circle:nth-child(3n){animation-delay:1.3s}
.footer-art .ft-net path{stroke-dasharray:7 11;animation:hbFlow 4s linear infinite}


.footer-art .ft-scan{animation:ftScan 11s linear infinite;will-change:transform}
@keyframes ftScan{from{transform:translateX(0)}to{transform:translateX(1920px)}}
.footer-art .ft-flow path{stroke-dasharray:30 260;animation:hbPulse 7s linear infinite}
.footer-art .ft-far{animation:ftBreathe 9s ease-in-out infinite alternate}
@keyframes ftBreathe{from{opacity:.22}to{opacity:.42}}

/* ---------- back to top ---------- */
.to-top{
  position:fixed;z-index:60;inset-inline-end:26px;inset-block-end:26px;
  width:54px;height:54px;padding:0;border:0;cursor:pointer;border-radius:50%;
  display:grid;place-items:center;background:transparent;
  opacity:0;visibility:hidden;transform:translateY(18px) scale(.85);
  transition:opacity .45s var(--ease),transform .45s var(--ease),visibility .45s;
}
.to-top.is-on{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.to-top::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 30% 25%,rgba(0,200,255,.28),rgba(139,92,246,.20));
  border:1px solid var(--line-strong);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 10px 30px -12px rgba(0,200,255,.75),inset 0 0 18px rgba(120,200,255,.14);
  transition:box-shadow .4s var(--ease),transform .4s var(--ease);
}
.to-top:hover::before{box-shadow:0 14px 38px -10px rgba(0,200,255,.95),inset 0 0 24px rgba(120,200,255,.3);transform:scale(1.06)}
.to-top:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}
.to-top-ico{position:relative;display:grid;place-items:center;width:22px;height:22px;color:#dff1ff}
.to-top-ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--ease)}
.to-top:hover .to-top-ico svg{transform:translateY(-3px)}
@media (max-width:640px){.to-top{width:48px;height:48px;inset-inline-end:16px;inset-block-end:16px}}
.footer-grid{
  position:relative;z-index:1;display:grid;grid-template-columns:1.5fr 1fr 1fr 1.25fr;
  gap:36px;padding:64px 0 44px;
}
.fcol h4{font-size:1.05rem;margin-bottom:16px;position:relative;padding-bottom:10px}
.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:.98rem;margin-top:14px;max-width:34em}
.fcol--brand .brand{margin-bottom:2px}
.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:#a9bbe6;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:stroke .35s}
.social a:hover{transform:translateY(-3px);border-color:var(--cyan);background:var(--surface-2);box-shadow:0 12px 26px -16px rgba(0,200,255,.9)}
.social a:hover svg{stroke:var(--cyan)}
.flinks{display:grid;gap:11px}
.flinks a{color:var(--muted);font-size:.98rem;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(--cyan);transform:scale(1.35)}
.fcontact{display:grid;gap:14px}
.fcontact li{display:flex;align-items:flex-start;gap:11px;color:var(--muted);font-size:.96rem;line-height:1.8}
.fcontact a{color:var(--muted);transition:color .3s}
.fcontact a:hover{color:var(--cyan)}
.fico{
  flex:0 0 auto;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;
  border:1px solid var(--line);background:rgba(0,200,255,.07);
}
.fico svg{width:17px;height:17px;fill:none;stroke:var(--cyan);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.footer-cta{margin-top:20px;padding:11px 22px;font-size:.94rem}
.footer-bottom{
  position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:14px;
  flex-wrap:wrap;padding:18px 0 26px;border-top:1px solid var(--line);
}
.footer-bottom small{color:#7d8ab5}
.footer-bottom{padding-inline-end:96px}
@media (max-width:640px){.footer-bottom{padding-inline-end:0;padding-block-end:64px}}
.fbottom-links{display:flex;align-items:center;gap:10px;color:#5c688d;font-size:.9rem}
.fbottom-links a{color:#8b98c2;transition:color .3s}
.fbottom-links a:hover{color:var(--cyan)}

@media (max-width:1000px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:30px;padding-top:52px}
  .fcol--brand{grid-column:1 / -1}
}
@media (max-width:620px){
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{justify-content:center;text-align:center}
  .marquee-track{font-size:.9rem}
  .skeleton-legend{font-size:.74rem}
}
@media (prefers-reduced-motion:reduce){
  .hero-bg-art,.hb-frames path,.hb-frames rect,.hb-truss path,.hb-edges path,.hb-nodes circle,
  .hb-pulse path,.hb-orb,.hb-scan,.ft-scan,.cta-inner::before,.skeleton-inner,.footer-art .ft-nodes circle,.footer-art .ft-net path,.footer-art .ft-far{
    animation:none!important;stroke-dashoffset:0!important;
  }
}

/* =========================================================
   V6 — swarm hero card, pill border, 3D beam-column joint,
   quieter footer artwork
   ========================================================= */

/* ---------- hero pill: gradient border ---------- */
.pill{
  position:relative;border:1px solid transparent;border-radius:999px;
  background:
    linear-gradient(180deg,rgba(12,18,44,.92),rgba(8,10,26,.92)) padding-box,
    var(--grad) border-box;
  background-size:100% 100%,220% 100%;
  color:#d8e6ff;font-weight:500;
  box-shadow:0 10px 30px -18px rgba(90,150,255,.9),inset 0 0 18px rgba(80,150,255,.12);
  animation:pillHue 9s linear infinite;
}
@keyframes pillHue{to{background-position:0 0,220% 0}}

/* ---------- hero card: swarm intelligence converging to the optimum ---------- */
.swarm{
  position:absolute;top:14px;left:50%;transform:translateX(-50%);
  width:320px;height:230px;pointer-events:none;direction:ltr;
}
.swarm-field{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.sw-contour ellipse{
  stroke-width:1;fill:none;opacity:.32;
  transform-box:fill-box;transform-origin:center;
  animation:swBreathe 6.5s ease-in-out infinite alternate;
}
.sw-contour ellipse:nth-child(2){animation-delay:.3s;opacity:.36}
.sw-contour ellipse:nth-child(3){animation-delay:.6s;opacity:.42}
.sw-contour ellipse:nth-child(4){animation-delay:.9s;opacity:.5}
.sw-contour ellipse:nth-child(5){animation-delay:1.2s;opacity:.6}
@keyframes swBreathe{from{transform:scale(.985)}to{transform:scale(1.025)}}
.sw-halo{transform-box:fill-box;transform-origin:center;animation:swHalo 5s ease-in-out infinite alternate}
@keyframes swHalo{from{opacity:.5;transform:scale(.9)}to{opacity:1;transform:scale(1.1)}}

/* global best marker */
.sw-best{
  position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#eafcff,#4f7dff 55%,#8B5CF6);
  box-shadow:0 0 26px rgba(120,190,255,.95),0 0 60px rgba(139,92,246,.6);
  animation:swBest 2.6s var(--ease) infinite;
}
@keyframes swBest{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}
.sw-best::after{
  content:"";position:absolute;inset:-10px;border-radius:50%;
  border:1px solid rgba(120,200,255,.55);animation:swRing 2.6s var(--ease) infinite;
}
@keyframes swRing{0%{transform:scale(.6);opacity:.9}100%{transform:scale(2.4);opacity:0}}

/* particles (the swarm) — each converges on the optimum, then respawns */
.sw-p{
  position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;
  background:linear-gradient(180deg,#9ff0ff,#4f7dff);
  box-shadow:0 0 10px rgba(120,200,255,.85);
  animation:swarmIn 5.4s cubic-bezier(.34,.02,.24,1) infinite;
  animation-delay:var(--d,0s);opacity:0;will-change:transform,opacity;
}
.sw-p:nth-child(3n){background:linear-gradient(180deg,#e6d3ff,#8B5CF6);box-shadow:0 0 10px rgba(160,130,255,.8)}
.sw-p:nth-child(4n){width:4px;height:4px;margin:-2px 0 0 -2px}
@keyframes swarmIn{
  0%  {transform:translate(var(--x),var(--y)) scale(.5);opacity:0}
  10% {opacity:.95}
  45% {transform:translate(calc(var(--x) * .48),calc(var(--y) * .34)) scale(1)}
  72% {transform:translate(calc(var(--x) * .16),calc(var(--y) * .18)) scale(1.05)}
  90% {transform:translate(calc(var(--x) * .03),calc(var(--y) * .04)) scale(.8);opacity:.9}
  100%{transform:translate(0,0) scale(.35);opacity:0}
}

/* ---------- lab: 3D strong-column / weak-beam joint ---------- */
.joint{
  position:absolute;left:50%;top:52%;width:0;height:0;
  opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(.92);
  transition:opacity .5s var(--ease),transform .6s var(--ease);
  perspective:900px;
}
.lab[data-mode="scwb"] .joint{opacity:1;transform:translate(-50%,-50%) scale(1)}
.lab[data-mode="scwb"] .beam-svg{opacity:0;transform:scale(.94);pointer-events:none}
.joint-inner{
  position:absolute;left:0;top:0;width:0;height:0;transform-style:preserve-3d;
  animation:jointSpin 24s ease-in-out infinite;
}
@keyframes jointSpin{
  from{transform:rotateX(-11deg) rotateY(-34deg)}
  50% {transform:rotateX(-15deg) rotateY(6deg)}
  to  {transform:rotateX(-11deg) rotateY(-34deg)}
}
.jf{
  position:absolute;border-radius:1px;
  background:linear-gradient(180deg,rgba(150,200,255,.30),rgba(90,140,230,.16));
  border:1px solid rgba(150,200,255,.42);
  box-shadow:inset 0 0 18px rgba(90,160,255,.16);
}
.jf--col{background:linear-gradient(180deg,rgba(120,190,255,.34),rgba(70,120,220,.2));border-color:rgba(150,205,255,.55)}
.jf--beam{background:linear-gradient(180deg,rgba(0,200,255,.26),rgba(80,120,230,.14))}
.jf--panel{background:linear-gradient(135deg,rgba(139,92,246,.34),rgba(0,200,255,.2));border-color:rgba(180,150,255,.6)}
.jf--stiff{background:rgba(180,220,255,.22);border-color:rgba(180,220,255,.45)}
.jf--plate{background:rgba(150,210,255,.2);border-color:rgba(150,210,255,.45)}
.jf--bolt{border-radius:50%;background:#dff6ff;border:0;box-shadow:0 0 8px rgba(160,225,255,.9)}
.jf--slab{background:linear-gradient(135deg,rgba(120,190,255,.10),rgba(139,92,246,.07));border-color:rgba(140,190,255,.26);box-shadow:none}
.jf--load{background:linear-gradient(180deg,rgba(0,200,255,.5),transparent);border:0;box-shadow:none;opacity:.55}

/* plastic hinges: beam hinge = safe mechanism, column hinge = failure */
.jh{
  position:absolute;border-radius:50%;opacity:0;
  transition:opacity .45s var(--ease),box-shadow .45s var(--ease);
}
.jh--beam{background:radial-gradient(circle,#a9ffe0,var(--ok));box-shadow:0 0 22px var(--ok)}
.jh--col{background:radial-gradient(circle,#ffc0d4,var(--warn));box-shadow:0 0 24px var(--warn)}
.lab[data-mode="scwb"][data-state="ok"] .jh--beam{opacity:1;animation:jhPulse 1.9s var(--ease) infinite}
.lab[data-mode="scwb"][data-state="bad"] .jh--col{opacity:1;animation:jhPulse 1.5s var(--ease) infinite}
@keyframes jhPulse{0%,100%{transform:scale(.85)}50%{transform:scale(1.25)}}

@media (prefers-reduced-motion:reduce){
  .sw-p,.sw-best,.sw-best::after,.sw-halo,.sw-contour ellipse,.joint-inner,.jh,.pill,.bg-grid::after{
    animation:none!important;
  }
  .sw-p{opacity:.7;transform:translate(calc(var(--x) * .2),calc(var(--y) * .2))}
}

/* =========================================================
   v8 — hive · structure · intelligence
   ========================================================= */

/* ===== global scrollbar ===== */
html{scrollbar-color:rgba(0,200,255,.45) rgba(8,10,26,.9);scrollbar-width:thin}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{
  background:
    linear-gradient(180deg,rgba(0,200,255,.05),rgba(139,92,246,.05)),
    #070917;
  border-inline-start:1px solid var(--line);
}
::-webkit-scrollbar-thumb{
  border-radius:99px;border:3px solid transparent;background-clip:content-box;
  background-image:linear-gradient(180deg,var(--cyan),var(--blue) 50%,var(--violet));
  box-shadow:inset 0 0 8px rgba(255,255,255,.25);
}
::-webkit-scrollbar-thumb:hover{background-image:linear-gradient(180deg,#5fe0ff,#7b9bff 50%,#b57cff)}
::-webkit-scrollbar-corner{background:transparent}

/* ===== hero swarm canvas ===== */
.swarm{position:absolute;inset:14px 14px auto 14px;height:224px;border-radius:18px;overflow:hidden}
.swarm-canvas{width:100%;height:100%;display:block}
.swarm-tag{
  position:absolute;top:10px;inset-inline-start:12px;display:flex;align-items:center;gap:7px;
  font-family:"Space Grotesk",sans-serif;font-size:.62rem;letter-spacing:.16em;color:#9fd6ff;
  padding:4px 9px;border-radius:99px;border:1px solid var(--line);background:rgba(5,8,22,.55);direction:ltr;
}
.swarm-tag i{width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan);animation:nodeBlink 2.4s infinite}
.hero-visual .wave{display:none}
.hero-visual .hud{bottom:18px}

/* ===== products family ===== */
.fam{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.fam-card{
  position:relative;display:flex;flex-direction:column;gap:16px;padding:28px 26px 24px;
  border-radius:var(--radius);border:1px solid var(--line);background:var(--surface);overflow:hidden;
  transition:transform .35s var(--ease),border-color .35s,background .35s;
}
.fam-card:hover{transform:translateY(-4px);border-color:var(--line-strong);background:var(--surface-2)}
.fam-card>*{position:relative}
.fam-lvl{display:inline-block;font-family:"Space Grotesk",sans-serif;font-size:.7rem;letter-spacing:.14em;color:var(--cyan);border:1px solid var(--line-strong);border-radius:99px;padding:3px 12px;margin-bottom:14px}
.fam-lvl--hl{color:#04030c;background:var(--grad);border-color:transparent;font-weight:700}
.fam-ico{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;border:1px solid var(--line);background:rgba(0,200,255,.07);margin-bottom:14px}
.fam-ico svg{width:22px;height:22px;fill:none;stroke:var(--cyan);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.fam-card h3{font-size:1.15rem;margin-bottom:8px}
.fam-top p{color:var(--muted);font-size:.93rem}
.fam-list{display:flex;flex-direction:column;gap:8px;margin-top:auto}
.fam-list li{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:.92rem;
  padding:11px 14px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.025);
  transition:border-color .3s,background .3s,transform .3s var(--ease);
}
.fam-list li:hover{border-color:var(--line-strong);background:rgba(0,200,255,.05);transform:translateX(-3px)}
.fam-list li b{font-weight:500}
.fam-list li::before{content:"";width:9px;height:10px;flex:none;background:var(--grad);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.fam-list--num{counter-reset:f}
.tag{margin-inline-start:auto;font-size:.7rem;padding:2px 10px;border-radius:99px;border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.tag--steel{color:#8fd8ff;border-color:rgba(0,200,255,.4)}
.tag--both{color:#c3b4ff;border-color:rgba(139,92,246,.4)}
.tag--conc{color:#ffcf8a;border-color:rgba(255,190,110,.42)}
.tag--bundle{color:var(--ok);border-color:rgba(52,224,161,.4)}
.fam-foot{font-size:.82rem;color:var(--muted);padding-top:12px;border-top:1px dashed var(--line)}
.fam-card--hl{border-color:rgba(0,200,255,.34);background:linear-gradient(160deg,rgba(0,200,255,.07),rgba(139,92,246,.06))}
.fam-card--hl:hover{background:linear-gradient(160deg,rgba(0,200,255,.1),rgba(139,92,246,.09));border-color:var(--line-strong)}
.fam-note{margin-top:14px;padding:14px 16px;border-radius:12px;border:1px dashed var(--line);background:rgba(255,255,255,.015)}
.fam-note-h{display:block;font-size:.8rem;letter-spacing:.04em;color:var(--cyan);margin-bottom:6px}
.fam-note p{font-size:.88rem;color:var(--muted);line-height:1.85;text-align:justify}

/* ===== activation steps — serpentine timeline ===== */
.steps{position:relative;padding-block:10px}
.steps-spine{position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);width:250px;pointer-events:none}
.spine-svg{width:100%;height:100%;display:block;overflow:visible}
.spine-base{fill:none;stroke:rgba(255,255,255,.09);stroke-width:2;vector-effect:non-scaling-stroke}
.spine-fill{fill:none;stroke:url(#spineGrad);stroke-width:2.6;stroke-linecap:round;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 6px rgba(90,180,255,.45));transition:stroke-dashoffset .25s linear}
.steps-list{position:relative;display:flex;flex-direction:column;gap:26px}
.step{position:relative;display:grid;grid-template-columns:1fr 120px 1fr;align-items:center}
.step .step-body{grid-column:1}
.step-body,.step-dot{position:relative;z-index:1}
.step:nth-child(even) .step-body{grid-column:3}
.step-dot{
  grid-column:2;grid-row:1;justify-self:center;position:relative;z-index:2;
  width:57.2px;height:66px;display:grid;place-items:center;color:var(--muted);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  background:
    linear-gradient(180deg,rgba(0,200,255,.10),rgba(139,92,246,.10)),
    #070a1a;
  font-family:"Space Grotesk",sans-serif;font-weight:700;
  transition:color .45s,filter .45s,transform .45s var(--ease);
  filter:drop-shadow(0 0 0 rgba(90,180,255,0));
}
/* comb cell wall */
.step-dot::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  clip-path:polygon(0 25%,0 75%,50% 100%,100% 75%,100% 25%,50% 0,50% 0,
                    50% 3.5%,7% 26.8%,7% 73.2%,50% 96.5%,93% 73.2%,93% 26.8%,50% 3.5%);
  background:linear-gradient(135deg,rgba(0,200,255,.55),rgba(139,92,246,.45));
  opacity:.55;transition:opacity .45s,background .45s;
}
/* surrounding comb cells */
.step::after{
  content:"";position:absolute;left:50%;top:50%;width:230px;height:200px;
  transform:translate(-50%,-50%);z-index:0;pointer-events:none;opacity:.3;
  transition:opacity .45s;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='58' height='66' viewBox='0 0 58 66'><g fill='none' stroke='%234f7dff' stroke-width='1'><path d='M29 1 L57 17 L57 49 L29 65 L1 49 L1 17 Z'/></g></svg>");
  background-size:57px 66px;background-position:center;
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 22%,transparent 70%);
  mask-image:radial-gradient(circle at 50% 50%,#000 22%,transparent 70%);
}
.step-dot b{font-size:1.02rem;font-family:"Space Grotesk",sans-serif;position:relative;z-index:1}
.step.is-on .step-dot{color:#04030c;transform:scale(1.06);filter:drop-shadow(0 0 16px rgba(90,180,255,.55))}
.step.is-on .step-dot::before{opacity:1;background:var(--grad)}
.step.is-on .step-dot{background:var(--grad)}
.step.is-on::after{opacity:.6}
.step-body{
  position:relative;padding:20px 22px;border-radius:16px;border:1px solid var(--line);background:var(--surface);
  opacity:.55;transform:translateY(10px);
  transition:border-color .45s,background .45s,transform .5s var(--ease),opacity .5s var(--ease);
}
.step.is-on .step-body{opacity:1;transform:none;border-color:var(--line-strong);background:var(--surface-2)}
.step-ico{width:36px;height:36px;margin-bottom:10px;display:grid;place-items:center;border-radius:11px;background:rgba(0,200,255,.08)}
.step-ico svg{width:19px;height:19px;fill:none;stroke:var(--cyan);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.step h4{font-size:1rem;margin-bottom:6px}
.step p{font-size:.88rem;color:var(--muted);line-height:1.85;text-align:start;text-justify:auto}
@media (prefers-reduced-motion:reduce){.step-body{opacity:1;transform:none}.spine-fill{transition:none}}

/* ===== projects slider ===== */
.pj{position:relative}
.pj-viewport{overflow:hidden;width:min(1180px,calc(100% - 40px));margin-inline:auto;border-radius:24px}
.pj-track{display:flex;will-change:transform}
.pj-slide{
  flex:0 0 100%;display:grid;grid-template-columns:1.15fr .85fr;gap:26px;align-items:center;
  padding:26px;border-radius:24px;border:1px solid var(--line);
  background:linear-gradient(160deg,rgba(20,40,100,.32),rgba(90,40,140,.16));
}
.pj-stage{position:relative;border-radius:18px;border:1px solid var(--line);background:radial-gradient(ellipse at 50% 110%,rgba(0,200,255,.14),transparent 62%),rgba(4,7,20,.6);overflow:hidden;padding:6px}
.pj-svg{width:100%;height:auto;display:block}
.pj-img{width:100%;height:300px;object-fit:contain;object-position:center;display:block;border-radius:14px}
@media (max-width:760px){.pj-img{height:220px}}
.pj-geo .pf{stroke:#63e0ff;stroke-width:1.9;opacity:.95}
.pj-geo .pf--in{stroke:#6f9bff;stroke-width:1.2;opacity:.5}
.pj-geo .pu{stroke:#8fb4ff;stroke-width:.8;opacity:.35}
.pj-geo .br{stroke:#b57cff;stroke-width:.9;opacity:.5;stroke-dasharray:4 4}
.pj-geo .gr{stroke:#7fa8ff;stroke-width:1;opacity:.4}
.pj-nodes circle{fill:#bff0ff;opacity:.75}
.pj-badge{position:absolute;top:12px;inset-inline-start:12px;z-index:2;font-size:.72rem;padding:3px 12px;border-radius:99px;border:1px solid var(--line-strong);background:rgba(5,8,22,.7);color:#9fd6ff}
.pj-scan{position:absolute;inset-inline:0;top:0;height:34%;background:linear-gradient(180deg,transparent,rgba(0,200,255,.12),transparent);animation:pjScan 6s linear infinite}
@keyframes pjScan{from{transform:translate3d(0,-120%,0)}to{transform:translate3d(0,320%,0)}}
.pj-save{position:absolute;bottom:12px;right:14px;left:auto;inset-inline:auto;text-align:center;padding:8px 14px;border-radius:14px;border:1px solid rgba(52,224,161,.35);background:rgba(5,8,22,.72)}
.pj-save b{display:block;font-family:"Space Grotesk",sans-serif;font-size:1.35rem;color:var(--ok)}
.pj-save small{font-size:.68rem;color:var(--muted)}
.pj-table{display:flex;flex-direction:column;gap:8px}
.pj-row{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.028);font-size:.92rem;overflow:hidden}
.pj-row span{color:var(--muted);font-size:.85rem}
.pj-row b{font-weight:700;font-family:"Space Grotesk",sans-serif;letter-spacing:.02em}
.pj-row--head{background:linear-gradient(90deg,rgba(0,200,255,.12),rgba(139,92,246,.1));border-color:var(--line-strong)}
.pj-row--head b{font-family:Vazirmatn,sans-serif;font-size:1rem}
.pj-row b.hl{color:var(--cyan)}
.pj-row b.up{color:var(--ok)}
.pj-row b.money{font-size:.95rem;color:#ffd88a}
.pj-meter{position:absolute;inset-inline-start:0;bottom:0;height:2px;width:0;background:var(--grad);border-radius:99px;transition:width .8s var(--ease)}
.pj-slide.is-active .pj-meter{width:var(--w)}
.pj-ctrl{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:22px}
.pj-arrow{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;cursor:pointer;border:1px solid var(--line-strong);background:var(--surface);color:var(--text);transition:background .3s,transform .3s var(--ease),border-color .3s}
.pj-arrow:hover{background:var(--surface-2);border-color:var(--cyan);transform:translateY(-2px)}
.pj-arrow svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pj-dots{display:flex;gap:9px}
.pj-dot{width:11px;height:12px;padding:0;border:0;cursor:pointer;background:rgba(255,255,255,.16);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);transition:background .3s,transform .3s var(--ease)}
.pj-dot.is-on{background:var(--grad);transform:scale(1.25)}

/* ===== faq ===== */
.faq{display:grid;grid-template-columns:1fr 1.05fr;gap:22px;align-items:start}
.faq-list{display:flex;flex-direction:column;gap:10px}
.faq-q{
  display:flex;align-items:center;gap:12px;text-align:start;cursor:pointer;
  padding:15px 18px;border-radius:14px;border:1px solid var(--line);background:var(--surface);
  color:var(--text);font-family:inherit;font-size:.95rem;
  transition:border-color .3s,background .3s,transform .3s var(--ease);
}
.faq-q:hover{border-color:var(--line-strong);background:var(--surface-2)}
.faq-n{font-family:"Space Grotesk",sans-serif;font-size:.78rem;color:var(--muted);transition:color .3s}
.faq-t{flex:1}
.faq-ar{width:10px;height:11px;flex:none;background:rgba(255,255,255,.22);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);transition:background .3s,transform .35s var(--ease)}
.faq-q.is-on{border-color:transparent;background:linear-gradient(100deg,rgba(0,200,255,.14),rgba(139,92,246,.12));box-shadow:inset 0 0 0 1px rgba(0,200,255,.35)}
.faq-q.is-on .faq-n{color:var(--cyan)}
.faq-q.is-on .faq-ar{background:var(--grad);transform:scale(1.3)}
.faq-panel{position:relative;min-height:220px;padding:28px;border-radius:18px;border:1px solid var(--line);background:var(--surface);overflow:hidden}
.faq-a{display:none;position:relative}
.faq-a.is-on{display:block;animation:faqIn .45s var(--ease) both}
@keyframes faqIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.faq-a h4{font-size:1.1rem;margin-bottom:12px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.faq-a p{color:var(--muted);font-size:.95rem}
@media (prefers-reduced-motion:reduce){.faq-a.is-on,.pj-scan{animation:none}}

/* ===== responsive ===== */
@media (max-width:1000px){
  .fam{grid-template-columns:1fr}

  .faq{grid-template-columns:1fr}
  .pj-slide{grid-template-columns:1fr}
}
@media (max-width:640px){

  .pj-slide{padding:16px}
  .swarm{height:190px}
}

@media (max-width:860px){
  .steps-spine{left:auto;right:auto;inset-inline-start:-20px;transform:none;width:110px}
  .step{grid-template-columns:68px 1fr;gap:6px}
  .step .step-body,.step:nth-child(even) .step-body{grid-column:2}
  .step-dot{grid-column:1;width:52px;height:46px}.step::after{display:none}
}


/* ---------- hero stat tags (numbers removed) ---------- */
.stats--tags{gap:14px;align-items:center}
.stat--tag{
  display:inline-flex;align-items:center;gap:9px;
  padding:11px 18px;border-radius:999px;
  border:1px solid var(--line-strong);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  box-shadow:0 10px 26px rgba(0,0,0,.28);
  animation:statFloat 5.6s var(--ease) calc(var(--f,0) * .7s) infinite;
  transition:transform .3s var(--ease),box-shadow .3s,border-color .3s;
}
.stat--tag::before{
  content:"";width:8px;height:9px;flex:none;
  background:var(--grad);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
}
/* labels inherit the gradient color of the removed numbers */
.stat--tag .stat-tag{
  font-family:inherit;font-size:.98rem;font-weight:700;line-height:1.7;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.stat--tag:hover{transform:translateY(-3px);border-color:rgba(0,200,255,.45);box-shadow:0 16px 34px rgba(0,200,255,.16)}
@keyframes statFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@media (prefers-reduced-motion:reduce){.stat--tag{animation:none}}

/* ---------- projects slider grab cursor ---------- */
.pj-viewport{cursor:grab}
.pj-viewport:active,.pj-viewport.is-dragging{cursor:grabbing}