/* =====================================================================
   AURYON TECHNOLOGIES — shared stylesheet
   ===================================================================== */
:root{
  --gold:#FABD15; --gold-2:#F1A01B; --gold-soft:#ffd45e;
  --navy:#0A3B66; --navy-2:#1763a8; --navy-3:#3b8fd6;
  --grad-gold:linear-gradient(135deg,#FABD15 0%,#F1A01B 100%);
  --grad-brand:linear-gradient(135deg,#1763a8 0%,#0A3B66 100%);
  --grad-mix:linear-gradient(120deg,#FABD15 0%,#F1A01B 38%,#1763a8 100%);
  --r-lg:26px; --r-md:18px; --r-sm:12px; --maxw:1240px;
  --font-display:"Bricolage Grotesque",serif;
  --font-body:"Manrope",sans-serif;
  --font-mono:"JetBrains Mono",monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
}
html[data-theme="dark"]{
  --bg:#060e1c; --bg-2:#0a1830; --surface:#0c1e3a; --surface-2:#0f2647;
  --panel:rgba(255,255,255,.035); --panel-strong:rgba(255,255,255,.06);
  --border:rgba(255,255,255,.09); --border-strong:rgba(255,255,255,.16);
  --text:#eef4fd; --text-2:#a9bdd9; --text-3:#7286a3;
  --glow:.55; --shadow:0 30px 70px -30px rgba(0,0,0,.75);
  --grid-line:rgba(120,160,220,.07); --nav-bg:rgba(8,18,36,.72);
  --cell:#5fa8e6;
}
html[data-theme="light"]{
  --bg:#eef2f8; --bg-2:#ffffff; --surface:#ffffff; --surface-2:#f4f7fb;
  --panel:#ffffff; --panel-strong:#ffffff;
  --border:rgba(10,59,102,.12); --border-strong:rgba(10,59,102,.22);
  --text:#0a1f38; --text-2:#3f536f; --text-3:#74879f;
  --glow:.22; --shadow:0 26px 60px -30px rgba(10,40,90,.28);
  --grid-line:rgba(10,59,102,.06); --nav-bg:rgba(255,255,255,.78);
  --cell:#1763a8;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);background:var(--bg);color:var(--text);line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased;transition:background .5s var(--ease),color .5s var(--ease)}
body::before{content:"";position:fixed;inset:0;z-index:-3;pointer-events:none;
  background:radial-gradient(900px 600px at 12% -5%,rgba(250,189,21,calc(var(--glow)*.26)),transparent 60%),
  radial-gradient(1000px 700px at 100% 8%,rgba(23,99,168,calc(var(--glow)*.4)),transparent 60%),
  radial-gradient(800px 800px at 80% 100%,rgba(250,189,21,calc(var(--glow)*.1)),transparent 65%);transition:opacity .5s}
#cells{position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.85}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 26px}
a{color:inherit;text-decoration:none}
img{max-width:100%}
h1,h2,h3,h4,h5{font-family:var(--font-display);font-weight:700;line-height:1.05;letter-spacing:-.02em}
.mono{font-family:var(--font-mono)}
.grad-text{background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent}
.kicker{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);font-weight:500}
.kicker::before{content:"";width:26px;height:1px;background:var(--grad-gold)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:15px;padding:14px 26px;border-radius:100px;cursor:pointer;border:1px solid transparent;transition:.35s var(--ease);white-space:nowrap}
.btn-primary{background:var(--grad-gold);color:#1a1303;box-shadow:0 12px 34px -10px rgba(250,189,21,.6)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 20px 44px -12px rgba(250,189,21,.75)}
.btn-ghost{background:var(--panel);color:var(--text);border:1px solid var(--border-strong);backdrop-filter:blur(8px)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-3px)}
.btn svg{width:17px;height:17px}

/* ---------- NAV ---------- */
nav{position:fixed;top:0;left:0;right:0;z-index:200;transition:.4s var(--ease)}
nav .bar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 0;transition:.4s var(--ease)}
nav.scrolled{background:var(--nav-bg);backdrop-filter:blur(18px) saturate(140%);border-bottom:1px solid var(--border)}
nav.scrolled .bar{padding:11px 0}
.logo{display:flex;align-items:center;gap:11px}
.logo svg{width:38px;height:38px;flex:none}
.logo .word{font-family:var(--font-display);font-weight:800;font-size:20px;letter-spacing:-.02em;line-height:1}
.logo .sub{font-family:var(--font-mono);font-size:8.5px;letter-spacing:.34em;color:var(--text-3);text-transform:uppercase;margin-top:3px}
.nav-links{display:flex;align-items:center;gap:30px}
.nav-links a{font-size:14.5px;font-weight:600;color:var(--text-2);transition:.25s;position:relative}
.nav-links a:hover,.nav-links a.active{color:var(--text)}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:2px;background:var(--grad-gold);transition:.3s var(--ease);border-radius:2px}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
.nav-right{display:flex;align-items:center;gap:14px}
.theme-toggle{width:54px;height:30px;border-radius:100px;border:1px solid var(--border-strong);background:var(--panel);position:relative;cursor:pointer;flex:none;transition:.3s}
.theme-toggle .knob{position:absolute;top:2px;left:2px;width:24px;height:24px;border-radius:50%;background:var(--grad-gold);display:grid;place-items:center;transition:.4s var(--ease);box-shadow:0 3px 10px rgba(0,0,0,.3)}
html[data-theme="light"] .theme-toggle .knob{left:26px;background:var(--grad-brand)}
.theme-toggle svg{width:14px;height:14px;color:#1a1303}
html[data-theme="light"] .theme-toggle svg{color:#fff}
.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px}
.hamburger span{width:24px;height:2px;background:var(--text);border-radius:2px;transition:.3s}

/* ---------- GOLDEN AURA INTRO ---------- */
#intro{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;background:radial-gradient(circle at 50% 50%,#0a1d3a 0%,#04101f 70%);transition:opacity .9s var(--ease),visibility .9s}
#intro.done{opacity:0;visibility:hidden;pointer-events:none}
.aura{position:relative;display:grid;place-items:center;text-align:center}
.aura .halo{position:absolute;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(250,189,21,.55),rgba(250,189,21,0) 62%);filter:blur(8px);animation:halo 2.6s ease-out forwards}
.aura .halo.h2{width:520px;height:520px;opacity:.5;animation-delay:.15s}
@keyframes halo{0%{transform:scale(.2);opacity:0}40%{opacity:1}100%{transform:scale(1.05);opacity:.9}}
.aura .ring{position:absolute;border:1px solid rgba(250,189,21,.4);border-radius:50%;animation:ringexp 2.4s ease-out forwards}
.aura .ring.r1{width:160px;height:160px}
.aura .ring.r2{width:160px;height:160px;animation-delay:.4s}
.aura .ring.r3{width:160px;height:160px;animation-delay:.8s}
@keyframes ringexp{0%{transform:scale(.6);opacity:.9}100%{transform:scale(3.4);opacity:0}}
.aura-logo{position:relative;z-index:2;width:120px;height:120px;animation:logoIn 1.2s var(--ease) forwards;opacity:0;transform:scale(.6)}
@keyframes logoIn{0%{opacity:0;transform:scale(.5) translateY(10px)}100%{opacity:1;transform:scale(1) translateY(0)}}
.aura-logo path{stroke-dasharray:340;stroke-dashoffset:340;animation:draw 1.4s var(--ease) forwards .2s}
@keyframes draw{to{stroke-dashoffset:0}}
.aura-name{position:relative;z-index:2;margin-top:30px;font-family:var(--font-display);font-weight:800;font-size:clamp(34px,7vw,64px);letter-spacing:.06em;color:#fff}
.aura-name span{display:inline-block;opacity:0;transform:translateY(20px);animation:letterUp .5s var(--ease) forwards}
.aura-sub{position:relative;z-index:2;margin-top:10px;font-family:var(--font-mono);font-size:13px;letter-spacing:.5em;text-transform:uppercase;color:var(--gold);opacity:0;animation:fadeUp .8s var(--ease) forwards 1.5s}
.aura-tag{position:relative;z-index:2;margin-top:26px;color:#9fb6d6;font-size:15px;opacity:0;animation:fadeUp .8s var(--ease) forwards 1.9s}
@keyframes letterUp{to{opacity:1;transform:none}}
@keyframes fadeUp{to{opacity:1;transform:none}}
.aura-spark{position:absolute;width:5px;height:5px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px var(--gold);opacity:0}

/* ---------- HERO ---------- */
header.hero{position:relative;padding:170px 0 90px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:50px;align-items:center}
.hero-badge{display:inline-flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--border);padding:7px 15px 7px 8px;border-radius:100px;font-size:13px;color:var(--text-2);margin-bottom:26px}
.hero-badge .dot{width:8px;height:8px;border-radius:50%;background:#3ddc84;box-shadow:0 0 0 4px rgba(61,220,132,.18);animation:pulse 2s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 8px rgba(61,220,132,0)}}
header.hero h1{font-size:clamp(42px,5.6vw,72px);font-weight:800;margin-bottom:24px}
header.hero h1 .line{display:block}
.hero-sub{font-size:clamp(16px,1.5vw,19px);color:var(--text-2);max-width:520px;margin-bottom:34px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:42px}
.hero-stats{display:flex;gap:34px;flex-wrap:wrap}
.hero-stats .s .n{font-family:var(--font-display);font-weight:800;font-size:30px;line-height:1}
.hero-stats .s .l{font-size:13px;color:var(--text-3);margin-top:5px}

/* hero orbit visual */
.hero-visual{position:relative;height:480px}
.orbit{position:absolute;inset:0;display:grid;place-items:center}
.orbit-ring{position:absolute;border:1px dashed var(--border-strong);border-radius:50%;opacity:.5}
.r1{width:300px;height:300px;animation:spin 40s linear infinite}
.r2{width:430px;height:430px;animation:spin 60s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.core{width:128px;height:128px;border-radius:34px;background:var(--grad-brand);display:grid;place-items:center;position:relative;z-index:3;box-shadow:0 0 0 1px var(--border-strong),0 30px 70px -20px rgba(23,99,168,.6)}
.core::after{content:"";position:absolute;inset:-2px;border-radius:36px;background:var(--grad-gold);z-index:-1;opacity:.55;filter:blur(18px)}
.core svg{width:62px;height:62px}
.node{position:absolute;display:flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--border);padding:11px 15px;border-radius:14px;font-size:13px;font-weight:600;box-shadow:var(--shadow);z-index:4;animation:float 6s ease-in-out infinite}
.node .ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none}
.node .ic svg{width:16px;height:16px}
.n1{top:6%;left:-2%}.n2{top:30%;right:-6%;animation-delay:1.2s}.n3{bottom:18%;left:-8%;animation-delay:.6s}.n4{bottom:2%;right:4%;animation-delay:1.8s}
@keyframes float{50%{transform:translateY(-14px)}}

/* sections */
section{padding:104px 0;position:relative}
.sec-head{max-width:680px;margin:0 auto 60px;text-align:center}
.sec-head.left{margin:0 0 56px;text-align:left}
.sec-head h2{font-size:clamp(32px,4vw,52px);font-weight:800;margin:16px 0 18px}
.sec-head p{color:var(--text-2);font-size:17px}
.page-hero{padding:160px 0 60px;text-align:center;position:relative}
.page-hero h1{font-size:clamp(40px,6vw,76px);font-weight:800;margin:18px 0 18px}
.page-hero p{color:var(--text-2);font-size:18px;max-width:600px;margin:0 auto}

/* marquee */
.marquee{padding:30px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);overflow:hidden;position:relative}
.marquee .track{display:flex;gap:54px;width:max-content;animation:scroll 28s linear infinite}
.marquee:hover .track{animation-play-state:paused}
@keyframes scroll{to{transform:translateX(-50%)}}
.marquee .item{display:flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:15px;font-weight:500;color:var(--text-3);white-space:nowrap}
.marquee .item b{color:var(--text)}
.marquee .item .d{width:6px;height:6px;border-radius:50%;background:var(--gold)}

/* service cards */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.svc{background:var(--panel);border:1px solid var(--border);border-radius:var(--r-md);padding:32px;position:relative;overflow:hidden;transition:.4s var(--ease)}
.svc:hover{transform:translateY(-8px);border-color:var(--border-strong);box-shadow:var(--shadow)}
.svc .ic{width:54px;height:54px;border-radius:15px;background:var(--surface-2);border:1px solid var(--border);display:grid;place-items:center;margin-bottom:22px;transition:.4s}
.svc:hover .ic{background:var(--grad-gold);border-color:transparent;transform:rotate(-6deg) scale(1.05)}
.svc .ic svg{width:26px;height:26px;color:var(--gold);transition:.4s}
.svc:hover .ic svg{color:#1a1303}
.svc h3{font-size:21px;margin-bottom:11px}
.svc p{color:var(--text-2);font-size:14.5px;margin-bottom:18px}
.svc .tags{display:flex;flex-wrap:wrap;gap:8px}
.svc .tags span{font-family:var(--font-mono);font-size:11px;padding:4px 10px;border-radius:100px;background:var(--surface-2);border:1px solid var(--border);color:var(--text-3)}
.svc .num{position:absolute;top:24px;right:26px;font-family:var(--font-mono);font-size:13px;color:var(--text-3);opacity:.6}

/* ===== ENTERPRISE ZIGZAG ROWS w/ DEMOS ===== */
.feature-row{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center;margin-bottom:96px}
.feature-row:last-child{margin-bottom:0}
.feature-row.flip .fr-text{order:2}
.fr-text .badge{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;padding:6px 12px;border-radius:100px;background:var(--panel);border:1px solid var(--border);color:var(--gold);margin-bottom:18px}
.fr-text h3{font-size:clamp(26px,3vw,38px);font-weight:800;margin-bottom:14px}
.fr-text p{color:var(--text-2);font-size:16px;margin-bottom:20px}
.fr-list{display:flex;flex-direction:column;gap:11px}
.fr-list li{list-style:none;display:flex;gap:11px;align-items:flex-start;font-size:14.5px;color:var(--text-2)}
.fr-list svg{width:20px;height:20px;color:var(--gold);flex:none;margin-top:1px}
.demo{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow);overflow:hidden;position:relative}
.demo-top{display:flex;align-items:center;gap:8px;padding:13px 16px;border-bottom:1px solid var(--border);background:var(--surface-2)}
.demo-top i{width:11px;height:11px;border-radius:50%;display:block}
.demo-top i:nth-child(1){background:#ff5f57}.demo-top i:nth-child(2){background:#febc2e}.demo-top i:nth-child(3){background:#28c840}
.demo-top .dt{margin-left:8px;font-family:var(--font-mono);font-size:11px;color:var(--text-3)}
.demo-body{padding:22px;min-height:230px}

/* code demo */
.codeline{font-family:var(--font-mono);font-size:12.5px;line-height:2;color:var(--text-2);white-space:pre;opacity:0;animation:typein .4s forwards}
.codeline .k{color:var(--navy-3)}.codeline .s{color:var(--gold)}.codeline .c{color:var(--text-3)}
@keyframes typein{to{opacity:1}}

/* automation pipeline (#pipe) */
.pipe{display:flex;flex-direction:column;gap:12px}
.pipe .step{display:flex;align-items:center;gap:14px;background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:13px 16px;opacity:.45;transform:translateX(-6px);transition:.5s var(--ease)}
.pipe .step.on{opacity:1;transform:none;border-color:var(--border-strong);box-shadow:0 10px 30px -16px rgba(250,189,21,.5)}
.pipe .step .si{width:38px;height:38px;border-radius:11px;background:var(--surface-2);border:1px solid var(--border);display:grid;place-items:center;flex:none;transition:.5s}
.pipe .step.on .si{background:var(--grad-gold);border-color:transparent}
.pipe .step .si svg{width:18px;height:18px;color:var(--text-2);transition:.4s}
.pipe .step.on .si svg{color:#1a1303}
.pipe .step .meta{flex:1}
.pipe .step .meta b{display:block;font-size:14px;font-weight:700}
.pipe .step .meta small{font-family:var(--font-mono);font-size:11px;color:var(--text-3)}
.pipe .step .chk{width:24px;height:24px;border-radius:50%;background:#3ddc84;display:grid;place-items:center;flex:none;opacity:0;transform:scale(.4);transition:.4s var(--ease)}
.pipe .step.on .chk{opacity:1;transform:none}
.pipe .step .chk svg{width:13px;height:13px;color:#053}

/* CI/CD pipeline demo */
.cicd{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:8px}
.cicd .stg{flex:1;text-align:center}
.cicd .stg .dot{width:42px;height:42px;border-radius:50%;margin:0 auto 8px;display:grid;place-items:center;background:var(--surface-2);border:2px solid var(--border);transition:.4s}
.cicd .stg.on .dot{background:var(--grad-gold);border-color:transparent;box-shadow:0 0 0 5px rgba(250,189,21,.15)}
.cicd .stg .dot svg{width:20px;height:20px;color:var(--text-2)}.cicd .stg.on .dot svg{color:#1a1303}
.cicd .stg small{font-size:11px;color:var(--text-3);font-family:var(--font-mono)}
.cicd .link{height:2px;flex:.6;background:var(--border);position:relative;border-radius:2px;overflow:hidden}
.cicd .link b{position:absolute;inset:0;width:0;background:var(--grad-gold);transition:width .5s}
.cicd .stg.on ~ .link b,.cicd .link.on b{width:100%}
.commits{margin-top:22px;display:flex;flex-direction:column;gap:9px}
.commit{display:flex;gap:10px;align-items:center;font-family:var(--font-mono);font-size:11.5px;color:var(--text-2)}
.commit .h{color:var(--gold)}.commit .ok{margin-left:auto;color:#3ddc84}

/* data ETL demo */
.etl{display:flex;align-items:center;justify-content:space-between;gap:10px}
.etl .grp{display:flex;flex-direction:column;gap:8px}
.etl .blk{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:9px 12px;font-size:11.5px;font-family:var(--font-mono);color:var(--text-2);display:flex;align-items:center;gap:7px}
.etl .blk .pd{width:7px;height:7px;border-radius:50%;background:var(--gold);animation:pulse 1.5s infinite}
.etl .arrow{flex:1;height:2px;background:var(--border);position:relative}
.etl .arrow::after{content:"";position:absolute;top:-3px;left:0;width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 8px var(--gold);animation:flow 2s linear infinite}
@keyframes flow{from{left:0}to{left:100%}}

/* chat / AI agent demo */
.chat{display:flex;flex-direction:column;gap:12px}
.bubble{max-width:80%;padding:11px 15px;border-radius:16px;font-size:13.5px;line-height:1.5}
.bubble.u{align-self:flex-end;background:var(--grad-brand);color:#fff;border-bottom-right-radius:5px}
.bubble.a{align-self:flex-start;background:var(--panel);border:1px solid var(--border);border-bottom-left-radius:5px}
.bubble.a .typing{display:inline-flex;gap:4px}
.bubble.a .typing i{width:6px;height:6px;border-radius:50%;background:var(--text-3);animation:blink 1.2s infinite}
.bubble.a .typing i:nth-child(2){animation-delay:.2s}.bubble.a .typing i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,60%,100%{opacity:.3}30%{opacity:1}}

/* phone demo */
.phone{width:200px;margin:0 auto;border-radius:30px;border:8px solid var(--surface-2);background:var(--bg-2);box-shadow:var(--shadow);overflow:hidden;position:relative}
.phone .notch{height:22px;background:var(--surface-2);border-radius:0 0 14px 14px;width:90px;margin:0 auto}
.phone .scr{padding:14px}
.phone .pcard{background:var(--grad-brand);border-radius:14px;height:90px;margin-bottom:10px;position:relative;overflow:hidden}
.phone .pcard::after{content:"";position:absolute;inset:0;background:radial-gradient(120px 60px at 80% 10%,rgba(250,189,21,.5),transparent)}
.phone .pl{height:11px;border-radius:6px;background:var(--surface-2);margin-bottom:8px}
.phone .pl.s{width:60%}

/* status board demo */
.status .srow{display:flex;align-items:center;gap:11px;padding:11px 0;border-bottom:1px solid var(--border);font-size:13.5px}
.status .srow:last-child{border:none}
.status .ico{width:30px;height:30px;border-radius:8px;background:var(--surface-2);display:grid;place-items:center;flex:none}
.status .ico svg{width:15px;height:15px;color:var(--text-2)}
.status .up{margin-left:auto;font-family:var(--font-mono);font-size:11px;color:#3ddc84;display:flex;align-items:center;gap:6px}
.status .up::before{content:"";width:7px;height:7px;border-radius:50%;background:#3ddc84;box-shadow:0 0 8px #3ddc84;animation:pulse 1.6s infinite}

/* saas tiles */
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.tile{background:var(--panel);border:1px solid var(--border);border-radius:13px;padding:15px}
.tile .tl{font-size:11px;color:var(--text-3);margin-bottom:7px;font-family:var(--font-mono)}
.tile .tv{font-family:var(--font-display);font-weight:800;font-size:22px}
.tile .tb{height:5px;border-radius:4px;background:var(--surface-2);margin-top:9px;overflow:hidden}
.tile .tb b{display:block;height:100%;background:var(--grad-gold);width:0;transition:width 1.1s var(--ease)}

/* bars demo (shared with dashboards) */
.bars{display:flex;align-items:flex-end;gap:9px;height:120px;margin-top:6px}
.bars .bg{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px;height:100%;justify-content:flex-end}
.bars .bar{width:100%;border-radius:6px 6px 3px 3px;background:var(--grad-gold);transition:height 1s var(--ease);min-height:4px}
.bars .bar.alt{background:var(--grad-brand)}
.bars .bl{font-family:var(--font-mono);font-size:10px;color:var(--text-3)}

/* ===== full dashboards (home/services) ===== */
.dash-shell{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow);overflow:hidden}
.dash-tabs{display:flex;gap:6px;padding:14px 16px;border-bottom:1px solid var(--border);background:var(--surface-2);flex-wrap:wrap;align-items:center}
.dash-tabs .dots{display:flex;gap:7px;margin-right:10px}
.dash-tabs .dots i{width:11px;height:11px;border-radius:50%;display:block}
.dash-tabs .dots i:nth-child(1){background:#ff5f57}.dash-tabs .dots i:nth-child(2){background:#febc2e}.dash-tabs .dots i:nth-child(3){background:#28c840}
.dtab{font-weight:600;font-size:13px;padding:8px 16px;border-radius:100px;border:1px solid transparent;color:var(--text-2);cursor:pointer;transition:.3s;background:none}
.dtab.active{background:var(--grad-brand);color:#fff}
.dtab:not(.active):hover{color:var(--text);background:var(--panel)}
.dash-body{padding:26px;display:none;animation:fade .5s var(--ease)}
.dash-body.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(10px)}}
.dash-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:10px}
.dash-title h4{font-size:19px}
.dash-title .pill{font-family:var(--font-mono);font-size:11px;padding:5px 12px;border-radius:100px;background:var(--panel);border:1px solid var(--border);color:var(--text-2)}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.kpi{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:16px}
.kpi .kl{font-size:12px;color:var(--text-3);margin-bottom:8px}
.kpi .kv{font-family:var(--font-display);font-weight:800;font-size:24px}
.kpi .kd{font-family:var(--font-mono);font-size:11px;margin-top:6px;color:#3ddc84}.kpi .kd.down{color:#ff7a7a}
.dash-low{display:grid;grid-template-columns:1.5fr 1fr;gap:14px}
.chartbox,.listbox{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:18px}
.chartbox .ct,.listbox .ct{font-size:13px;font-weight:700;margin-bottom:16px;display:flex;justify-content:space-between;align-items:center}
.chartbox .ct small{font-family:var(--font-mono);font-size:11px;color:var(--text-3);font-weight:400}
.linebox svg{width:100%;height:auto;display:block}
.rows{display:flex;flex-direction:column;gap:11px}
.row{display:flex;align-items:center;gap:11px;font-size:13px}
.row .av{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-family:var(--font-mono);font-weight:700;font-size:12px;flex:none;color:#1a1303;background:var(--grad-gold)}
.row .av.b{background:var(--grad-brand);color:#fff}
.row .rn{font-weight:600}.row .rm{margin-left:auto;font-family:var(--font-mono);font-size:12px;color:var(--text-2)}
.row .st{font-family:var(--font-mono);font-size:10px;padding:3px 8px;border-radius:100px;margin-left:auto}
.st.ok{background:rgba(61,220,132,.14);color:#3ddc84}.st.pend{background:rgba(250,189,21,.16);color:var(--gold-2)}
.tablegrid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.tcell{aspect-ratio:1.4;border-radius:10px;border:1px solid var(--border);display:grid;place-items:center;font-family:var(--font-mono);font-size:11px;font-weight:700;background:var(--surface-2)}
.tcell.busy{background:var(--grad-brand);color:#fff;border-color:transparent}.tcell.free{color:#3ddc84;border-color:rgba(61,220,132,.4)}
.donut-wrap{display:flex;align-items:center;gap:18px}
.legend{display:flex;flex-direction:column;gap:9px;font-size:12.5px}
.legend i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:8px;vertical-align:middle}

/* stats band */
.band{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:50px;display:grid;grid-template-columns:repeat(4,1fr);gap:30px;text-align:center;box-shadow:var(--shadow)}
.band .st .n{font-family:var(--font-display);font-weight:800;font-size:clamp(36px,4.5vw,54px);background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1}
.band .st .l{color:var(--text-2);font-size:14px;margin-top:10px}

/* process */
.proc{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.pcardx{background:var(--panel);border:1px solid var(--border);border-radius:var(--r-md);padding:30px 26px;position:relative;transition:.4s var(--ease)}
.pcardx:hover{transform:translateY(-8px);border-color:var(--gold)}
.pcardx .pn{font-family:var(--font-mono);font-size:13px;color:var(--gold);margin-bottom:18px}
.pcardx .pic{width:50px;height:50px;border-radius:14px;background:var(--surface-2);border:1px solid var(--border);display:grid;place-items:center;margin-bottom:18px}
.pcardx .pic svg{width:24px;height:24px;color:var(--gold)}
.pcardx h4{font-size:18px;margin-bottom:9px}.pcardx p{font-size:14px;color:var(--text-2)}

/* why / values */
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.why{display:flex;gap:18px;background:var(--panel);border:1px solid var(--border);border-radius:var(--r-md);padding:26px;transition:.4s}
.why:hover{border-color:var(--border-strong);transform:translateX(6px)}
.why .wi{width:50px;height:50px;border-radius:13px;background:var(--grad-gold);display:grid;place-items:center;flex:none}
.why .wi svg{width:24px;height:24px;color:#1a1303}
.why h4{font-size:18px;margin-bottom:7px}.why p{font-size:14px;color:var(--text-2)}

/* testimonials */
.tgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.tcard{background:var(--panel);border:1px solid var(--border);border-radius:var(--r-md);padding:34px;position:relative}
.tcard .stars{color:var(--gold);font-size:16px;margin-bottom:16px;letter-spacing:3px}
.tcard p{font-size:16px;color:var(--text);line-height:1.7;margin-bottom:22px}
.tcard .who{display:flex;align-items:center;gap:13px}
.tcard .who .ph{width:46px;height:46px;border-radius:50%;background:var(--grad-brand);display:grid;place-items:center;font-family:var(--font-display);font-weight:800;color:#fff;flex:none}
.tcard .who b{display:block;font-size:15px}.tcard .who small{font-size:13px;color:var(--text-3)}
.tcard .q{position:absolute;top:22px;right:30px;font-family:var(--font-display);font-size:80px;line-height:1;color:var(--gold);opacity:.16}

/* CTA */
.cta{background:var(--grad-brand);border-radius:var(--r-lg);padding:64px;text-align:center;position:relative;overflow:hidden}
.cta::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 300px at 50% -20%,rgba(250,189,21,.45),transparent 70%)}
.cta>*{position:relative;z-index:1}
.cta h2{color:#fff;font-size:clamp(30px,4vw,48px);margin-bottom:18px}
.cta p{color:rgba(255,255,255,.82);font-size:18px;max-width:540px;margin:0 auto 30px}
.cta .row2{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.cta .btn-ghost{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3);color:#fff}
.cta .btn-ghost:hover{background:rgba(255,255,255,.18);color:#fff;border-color:#fff}

/* contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.cinfo{display:flex;flex-direction:column;gap:14px}
.cline{display:flex;gap:15px;align-items:center;background:var(--panel);border:1px solid var(--border);border-radius:var(--r-md);padding:22px;transition:.3s}
.cline:hover{border-color:var(--gold);transform:translateY(-3px)}
.cline .ci{width:48px;height:48px;border-radius:13px;background:var(--surface-2);border:1px solid var(--border);display:grid;place-items:center;flex:none}
.cline .ci svg{width:22px;height:22px;color:var(--gold)}
.cline small{font-size:12px;color:var(--text-3);display:block;margin-bottom:3px;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.1em}
.cline b{font-size:15.5px;font-weight:700}
.cform{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:34px;box-shadow:var(--shadow)}
.cform .f{margin-bottom:16px}
.cform label{display:block;font-size:13px;font-weight:600;margin-bottom:7px;color:var(--text-2)}
.cform input,.cform textarea,.cform select{width:100%;background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:13px 15px;color:var(--text);font-family:var(--font-body);font-size:14.5px;transition:.3s;outline:none}
.cform input:focus,.cform textarea:focus,.cform select:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(250,189,21,.14)}
.cform textarea{resize:vertical;min-height:96px}
.cform .btn-primary{width:100%;justify-content:center}
.crow{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* footer */
footer{border-top:1px solid var(--border);padding:64px 0 30px;margin-top:30px}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;margin-bottom:44px}
.fbrand p{color:var(--text-2);font-size:14px;margin:18px 0 22px;max-width:300px}
.fsoc{display:flex;gap:10px}
.fsoc a{width:40px;height:40px;border-radius:11px;background:var(--panel);border:1px solid var(--border);display:grid;place-items:center;transition:.3s}
.fsoc a:hover{background:var(--grad-gold);border-color:transparent;transform:translateY(-3px)}
.fsoc a:hover svg{color:#1a1303}
.fsoc svg{width:18px;height:18px;color:var(--text-2)}
.fcol h5{font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);margin-bottom:18px}
.fcol a{display:block;color:var(--text-2);font-size:14px;margin-bottom:12px;transition:.25s}
.fcol a:hover{color:var(--gold);transform:translateX(4px)}
.fbot{border-top:1px solid var(--border);padding-top:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;color:var(--text-3);font-size:13px}

/* reveal */
.reveal{opacity:0;transform:translateY(34px);transition:.8s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.1s}.reveal.d2{transition-delay:.2s}.reveal.d3{transition-delay:.3s}.reveal.d4{transition-delay:.4s}.reveal.d5{transition-delay:.5s}.reveal.d6{transition-delay:.6s}

/* responsive */
@media(max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:60px}.hero-visual{height:420px}
  .svc-grid{grid-template-columns:repeat(2,1fr)}.proc{grid-template-columns:repeat(2,1fr)}
  .fgrid{grid-template-columns:1fr 1fr}
  .feature-row{grid-template-columns:1fr;gap:30px;margin-bottom:64px}
  .feature-row.flip .fr-text{order:0}
  .nav-links{display:none}.hamburger{display:flex}
  .nav-links.open{display:flex;position:absolute;top:64px;left:0;right:0;flex-direction:column;background:var(--nav-bg);backdrop-filter:blur(18px);padding:24px;gap:20px;border-bottom:1px solid var(--border)}
}
@media(max-width:680px){
  .svc-grid,.proc,.why-grid,.tgrid,.contact-grid,.crow,.kpis,.dash-low,.tiles{grid-template-columns:1fr}
  .band{grid-template-columns:1fr 1fr;padding:34px;gap:26px}.kpis{grid-template-columns:1fr 1fr}
  .cta,.cform{padding:32px 24px}.fgrid{grid-template-columns:1fr}
  section{padding:72px 0}header.hero{padding:130px 0 60px}
}

/* real logo images */
.logo img.logomark{width:38px;height:38px;object-fit:contain;flex:none;display:block}
img.aura-logo{object-fit:contain}

/* ===================== HERO ROBOT ===================== */
.robot-stage{position:relative;width:100%;height:100%;display:grid;place-items:center;perspective:1100px}
.r-glow{position:absolute;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(250,189,21,.30),transparent 62%);filter:blur(12px);animation:rglow 5s ease-in-out infinite;z-index:1}
@keyframes rglow{50%{transform:scale(1.14);opacity:.8}}
.r-ring{position:absolute;border-radius:50%;border:1px dashed var(--border-strong);opacity:.5;z-index:2}
.r-ring1{width:370px;height:370px;animation:spin 50s linear infinite}
.r-ring2{width:300px;height:300px;animation:spin 34s linear infinite reverse;border-style:dotted}
.orbit-tech{position:absolute;inset:0;animation:orbSpin 42s linear infinite;z-index:3}
@keyframes orbSpin{to{transform:rotate(360deg)}}
.techbit{position:absolute;left:50%;top:50%}
.techbit .b{position:absolute;transform:translate(-50%,-50%) rotate(var(--ang)) translate(0,-185px)}
.techbit .ic{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow);transform:rotate(calc(-1 * var(--ang)));animation:orbSpin 42s linear infinite reverse}
.techbit .ic svg{width:22px;height:22px;color:var(--gold)}
.techbit .ic.navy svg{color:var(--navy-3)}
.techbit .ic.green svg{color:#3ddc84}
.robot-tilt{position:relative;z-index:4;transition:transform .18s ease-out;transform-style:preserve-3d;will-change:transform}
.robot{width:244px;height:auto;display:block;animation:rfloat 6s ease-in-out infinite;filter:drop-shadow(0 30px 42px rgba(0,0,0,.45))}
@keyframes rfloat{50%{transform:translateY(-14px)}}
.robot .core,.robot .antenna,.robot .eq,.robot .scan{transform-box:fill-box}
.robot .core,.robot .antenna{transform-origin:center;animation:rcore 2.1s ease-in-out infinite}
.robot .antenna{animation-duration:1.5s}
@keyframes rcore{50%{opacity:.5;transform:scale(.8)}}
.robot .scan{transform-origin:center;animation:rscan 2.6s ease-in-out infinite}
@keyframes rscan{0%,100%{transform:translateY(0);opacity:0}12%{opacity:.7}50%{transform:translateY(40px);opacity:.7}62%{opacity:0}}
.robot .eq{transform-origin:center bottom;animation:eq 1s ease-in-out infinite}
.robot .eq2{animation-delay:.18s}.robot .eq3{animation-delay:.36s}.robot .eq4{animation-delay:.12s}
@keyframes eq{50%{transform:scaleY(.3)}}
#eyeL,#eyeR{transition:transform .08s linear}
.r-chip{position:absolute;z-index:5;display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow);border-radius:12px;padding:9px 13px;font-size:12.5px;font-weight:600;animation:rfloat 5s ease-in-out infinite}
.r-chip .gdot{width:8px;height:8px;border-radius:50%;background:#3ddc84;box-shadow:0 0 0 4px rgba(61,220,132,.18);animation:pulse 2s infinite}
.r-chip.rc1{top:13%;left:-3%;animation-delay:.4s}
.r-chip.rc2{bottom:15%;right:-5%;animation-delay:1.1s}
@media(max-width:980px){.robot{width:210px}.r-ring1{width:320px;height:320px}.r-ring2{width:260px;height:260px}.techbit .b{transform:translate(-50%,-50%) rotate(var(--ang)) translate(0,-162px)}}

/* ===================== HERO FULL-SCREEN ANDROID SCENE ===================== */
header.hero{min-height:100vh;display:flex;align-items:center;padding:120px 0 60px}
.hero-grid.solo{grid-template-columns:1fr;max-width:680px;position:relative;z-index:2}
.hero-bg{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none}
.hero-bg::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(90deg,var(--bg) 5%,rgba(0,0,0,0) 58%)}
.hero-scene{position:absolute;right:-2%;bottom:0;height:104%;display:flex;align-items:flex-end;opacity:.96;will-change:transform;transition:transform .5s ease-out;z-index:1}
.hero-scene svg.android{height:100%;width:auto;display:block}
#rb,#rbHead,#armReach,.holo,.rcore,.rvisor{transform-box:fill-box}
#rb{transform-origin:center bottom;animation:breathe 7s ease-in-out infinite}
@keyframes breathe{50%{transform:translateY(-9px)}}
#rbHead{transform-origin:center bottom;animation:headturn 12s ease-in-out infinite}
@keyframes headturn{0%,100%{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg)}}
#armReach{transform-origin:78% 12%;animation:gesture 6.5s ease-in-out infinite}
@keyframes gesture{0%,100%{transform:rotate(3deg)}50%{transform:rotate(-3.5deg)}}
.rcore{transform-origin:center;animation:corepulse 2.4s ease-in-out infinite}
.rvisor{transform-origin:center;animation:vpulse 3s ease-in-out infinite}
@keyframes corepulse{50%{opacity:.5;transform:scale(.85)}}
@keyframes vpulse{50%{opacity:.7}}
.holo{transform-origin:center;animation:hbob 5s ease-in-out infinite}
.holo.h2{animation:hbob2 6s ease-in-out infinite}
.holo.h3{animation:hbob 7s ease-in-out infinite}
@keyframes hbob{50%{transform:translateY(-10px)}}
@keyframes hbob2{50%{transform:translateY(9px)}}
.holo-line{stroke-dasharray:6 6;animation:dashmove 2s linear infinite}
@keyframes dashmove{to{stroke-dashoffset:-48}}
.datarise{animation:rise 4s linear infinite}
@keyframes rise{0%{opacity:0;transform:translateY(0)}20%{opacity:1}100%{opacity:0;transform:translateY(-64px)}}
@media(max-width:980px){
  header.hero{min-height:auto;padding:130px 0 64px}
  .hero-scene{right:-36%;height:78%;opacity:.32}
  .hero-bg::after{background:linear-gradient(180deg,rgba(0,0,0,0),var(--bg) 88%)}
  .hero-grid.solo{max-width:100%}
}

/* ===== ANDROID v2: HUD rings, blink, scan, pop FX ===== */
.hudring{transform-box:fill-box;transform-origin:center}
.hud1{animation:spin 26s linear infinite}
.hud2{animation:spin 18s linear infinite reverse}
#eyes{transform-box:fill-box;transform-origin:center;animation:blink 5.5s infinite}
@keyframes blink{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.08)}}
.eyeglow{animation:vpulse 2.6s ease-in-out infinite}
.scanwave{transform-box:fill-box;transform-origin:center;animation:scanwave 3.4s ease-out infinite}
@keyframes scanwave{0%{transform:scale(.35);opacity:.5}80%{opacity:0}100%{transform:scale(1.5);opacity:0}}
.antenna2{transform-box:fill-box;transform-origin:center;animation:vpulse 1.5s ease-in-out infinite}
.hero-fx{position:absolute;inset:0;z-index:3;pointer-events:none}
.popchip{position:absolute;display:flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--border-strong);box-shadow:var(--shadow);border-radius:12px;padding:9px 14px;font-size:13px;font-weight:600;white-space:nowrap;opacity:0;transform:translate(-50%,-50%) scale(.6)}
.popchip.show{animation:popIn .5s var(--ease) forwards}
.popchip.hide{animation:popOut .42s var(--ease) forwards}
@keyframes popIn{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}60%{opacity:1;transform:translate(-50%,calc(-50% - 4px)) scale(1.07)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes popOut{to{opacity:0;transform:translate(-50%,calc(-50% - 12px)) scale(.7)}}
.popchip .pi{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;flex:none}
.popchip .pi svg{width:15px;height:15px}
@media(max-width:980px){.hero-fx{display:none}}

/* ===================== HERO DATA GLOBE (replaces robot) ===================== */
.hero-visual{height:auto}
.globe-wrap{position:relative;width:100%;height:min(72vh,560px);display:grid;place-items:center;will-change:transform;transition:transform .5s ease-out}
.globe-glow{position:absolute;width:76%;height:76%;border-radius:50%;background:radial-gradient(circle,rgba(250,189,21,.22),rgba(23,99,168,.12) 48%,transparent 70%);filter:blur(12px);animation:rglow 6s ease-in-out infinite;z-index:0}
#globe{position:relative;z-index:2;width:100%;height:100%;display:block}
.orbit{position:absolute;width:94%;height:94%;z-index:1;pointer-events:none}
.orbit .ring{position:absolute;inset:0;border-radius:50%;border:1px solid var(--border-strong);opacity:.3}
.orbit .dot{position:absolute;top:-5px;left:50%;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--grad-gold);box-shadow:0 0 12px var(--gold)}
.orbit.o1{transform:scaleY(.46) rotate(16deg)}
.orbit.o2{transform:scaleY(.40) rotate(-26deg)}
.orbit.o1 .ring{animation:spin 22s linear infinite}
.orbit.o2 .ring{animation:spin 32s linear infinite reverse}
.orbit.o2 .dot{background:var(--grad-brand);box-shadow:0 0 12px var(--navy-3)}
.hero-visual .hero-fx{position:absolute;inset:0;z-index:5}
@media(max-width:680px){.globe-wrap{height:54vh}}

/* ===================== HOME SERVICES — BENTO SPOTLIGHT ===================== */
@property --ba{syntax:'<angle>';inherits:false;initial-value:0deg}
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(158px,auto);gap:18px}
.bcard{position:relative;display:flex;flex-direction:column;border-radius:var(--r-md);border:1px solid var(--border);background:var(--panel);background-image:radial-gradient(var(--grid-line) 1px,transparent 1px);background-size:22px 22px;padding:26px;overflow:hidden;text-decoration:none;color:inherit;transition:transform .4s var(--ease),border-color .4s,box-shadow .4s}
.bcard::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(250,189,21,.18),transparent 60%);opacity:0;transition:opacity .4s;z-index:0}
.bcard::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.4px;background:conic-gradient(from var(--ba),transparent 0 68%,var(--gold) 84%,transparent 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .45s;z-index:2;pointer-events:none}
.bcard:hover{transform:translateY(-6px);border-color:var(--border-strong);box-shadow:var(--shadow)}
.bcard:hover::before{opacity:1}
.bcard:hover::after{opacity:1;animation:borderspin 3.2s linear infinite}
@keyframes borderspin{to{--ba:360deg}}
.bcard>*{position:relative;z-index:1}
.bcard .ctop{display:flex;align-items:flex-start;justify-content:space-between}
.bcard .ic{width:54px;height:54px;border-radius:15px;background:var(--surface-2);border:1px solid var(--border);display:grid;place-items:center;transition:.4s var(--ease)}
.bcard:hover .ic{background:var(--grad-gold);border-color:transparent;transform:rotate(-6deg) scale(1.06)}
.bcard .ic svg{width:26px;height:26px;color:var(--gold);transition:.4s}
.bcard:hover .ic svg{color:#1a1303}
.bcard .num{font-family:var(--font-mono);font-size:13px;color:var(--text-3);opacity:.7}
.bcard h3{font-size:20px;margin:20px 0 9px}
.bcard p{color:var(--text-2);font-size:14.5px;margin-bottom:14px}
.bcard .tags{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}
.bcard .tags span{font-family:var(--font-mono);font-size:11px;padding:4px 10px;border-radius:100px;background:var(--surface-2);border:1px solid var(--border);color:var(--text-3)}
.bcard .go{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--gold);opacity:0;transform:translateX(-6px);transition:.4s var(--ease);margin-top:auto}
.bcard:hover .go{opacity:1;transform:none}
.bcard .go svg{width:15px;height:15px}
.bcard.feat h3{font-size:26px;margin-top:26px}
.bcard.feat .ic{width:62px;height:62px}
.bcard.feat .ic svg{width:30px;height:30px}
.fviz{display:flex;gap:8px;align-items:flex-end;height:56px;margin:6px 0 16px}
.fviz i{flex:1;border-radius:6px 6px 2px 2px;background:var(--grad-gold);opacity:.85;transform-origin:bottom;animation:fbars 2.6s ease-in-out infinite}
@keyframes fbars{50%{transform:scaleY(.5)}}
.b1{grid-column:span 2;grid-row:span 2}
.b2{grid-column:span 2}.b3{grid-column:span 1}.b4{grid-column:span 1}
.b5{grid-column:span 2}.b6{grid-column:span 2}
@media(max-width:980px){.bento{grid-template-columns:1fr 1fr}.b1,.b2,.b5,.b6{grid-column:span 2}.b1{grid-row:span 1}.b3,.b4{grid-column:span 1}}
@media(max-width:680px){.bento{grid-template-columns:1fr}.bcard{grid-column:span 1 !important}}

/* ===== BENTO v2: 3D tilt, sheen sweep, live terminal ===== */
.bento{perspective:1200px}
.bcard{transition:transform .18s ease-out,border-color .4s,box-shadow .4s}
.bcard .sheen{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.12) 47%,rgba(250,189,21,.14) 52%,transparent 68%);transform:translateX(-130%);z-index:1;pointer-events:none}
.bcard:hover .sheen{animation:sheen 1s ease forwards}
@keyframes sheen{to{transform:translateX(130%)}}
.term{margin:8px 0 16px;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--surface-2)}
.term .tbar{display:flex;gap:5px;padding:8px 11px;border-bottom:1px solid var(--border)}
.term .tbar i{width:8px;height:8px;border-radius:50%}
.term .tbar i:nth-child(1){background:#ff5f57}.term .tbar i:nth-child(2){background:#febc2e}.term .tbar i:nth-child(3){background:#28c840}
.term .tbody{padding:12px 14px;font-family:var(--font-mono);font-size:12px;line-height:1.95}
.term .tl{color:var(--text-2);white-space:nowrap;opacity:0;transform:translateY(4px);animation:tlin .45s var(--ease) forwards}
.term .tl .k{color:var(--navy-3)}.term .tl .s{color:var(--gold)}
@keyframes tlin{to{opacity:1;transform:none}}
.term .cur{display:inline-block;width:7px;height:13px;background:var(--gold);vertical-align:-2px;margin-left:3px;animation:cblink 1s steps(1) infinite}
@keyframes cblink{50%{opacity:0}}

/* ===================== HOME SERVICES — EXPANDING ACCORDION ===================== */
.accord{display:flex;gap:14px;height:460px}
.acc-item{position:relative;flex:1;min-width:0;border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;background:var(--panel);background-image:radial-gradient(var(--grid-line) 1px,transparent 1px);background-size:22px 22px;cursor:pointer;text-decoration:none;color:inherit;transition:flex .55s var(--ease),border-color .4s,box-shadow .4s}
.acc-item.open{flex:4.4;border-color:var(--border-strong);box-shadow:var(--shadow)}
.acc-item .glow{position:absolute;inset:0;background:radial-gradient(380px circle at 66% 16%,var(--c),transparent 62%);opacity:0;transition:opacity .5s}
.acc-item.open .glow{opacity:.18}
.acc-bgnum{position:absolute;top:8px;right:18px;font-family:var(--font-display);font-size:66px;font-weight:800;line-height:1;color:var(--text);opacity:.05}
.acc-label{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:28px 0;transition:opacity .3s}
.acc-label .ic{width:50px;height:50px;border-radius:14px;background:var(--surface-2);border:1px solid var(--border);display:grid;place-items:center}
.acc-label .ic svg{width:24px;height:24px;color:var(--gold)}
.acc-label .lt{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--font-display);font-weight:700;font-size:19px;white-space:nowrap}
.acc-item.open .acc-label{opacity:0;pointer-events:none}
.acc-content{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:32px;min-width:360px;opacity:0;transform:translateX(14px);transition:opacity .45s .12s,transform .45s .12s}
.acc-item.open .acc-content{opacity:1;transform:none}
.acc-content .ic{width:58px;height:58px;border-radius:16px;background:var(--grad-gold);display:grid;place-items:center;margin-bottom:auto}
.acc-content .ic svg{width:28px;height:28px;color:#1a1303}
.acc-content h3{font-size:clamp(23px,2.3vw,32px);margin:18px 0 10px}
.acc-content p{color:var(--text-2);font-size:15px;max-width:430px;margin-bottom:16px}
.acc-content .tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.acc-content .tags span{font-family:var(--font-mono);font-size:11px;padding:5px 11px;border-radius:100px;background:var(--surface-2);border:1px solid var(--border);color:var(--text-2)}
.acc-content .go{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:14px;color:var(--gold)}
.acc-content .go svg{width:16px;height:16px}
.acc-content .fviz{height:42px;max-width:230px;margin:0 0 16px}
@media(max-width:880px){
  .accord{flex-direction:column;height:auto}
  .acc-item,.acc-item.open{flex:none;min-height:150px}
  .acc-label{display:none}
  .acc-content{position:relative;opacity:1;transform:none;min-width:0;padding:26px;justify-content:flex-start}
  .acc-content .ic{margin-bottom:14px}
  .acc-item .glow{opacity:.12}
}

/* ===================== ACCORDION — PER-SERVICE LIVE DEMOS ===================== */
.demo-mini{margin:10px 0 18px;max-width:330px;width:100%}
/* code */
.dm-code{border:1px solid var(--border);border-radius:11px;overflow:hidden;background:var(--surface-2)}
.dm-code .bar{display:flex;gap:5px;padding:7px 10px;border-bottom:1px solid var(--border)}
.dm-code .bar i{width:7px;height:7px;border-radius:50%}
.dm-code .bar i:nth-child(1){background:#ff5f57}.dm-code .bar i:nth-child(2){background:#febc2e}.dm-code .bar i:nth-child(3){background:#28c840}
.dm-code .body{padding:11px 13px;font-family:var(--font-mono);font-size:11px;line-height:1.9;position:relative}
.dm-code .l{color:var(--text-2);white-space:nowrap}
.dm-code .l .k{color:var(--navy-3)}.dm-code .l .s{color:var(--gold)}
.dm-code .hl{position:absolute;left:0;right:0;height:20px;border-radius:4px;background:linear-gradient(90deg,rgba(250,189,21,.16),transparent);animation:codescan 3.2s ease-in-out infinite}
@keyframes codescan{0%,100%{top:8px}50%{top:48px}}
.dm-code .cur{display:inline-block;width:6px;height:11px;background:var(--gold);vertical-align:-1px;animation:cblink 1s steps(1) infinite}
/* automation flow */
.dm-flow{display:flex;align-items:center;gap:6px;padding:10px 2px}
.dm-flow .nd{width:38px;height:38px;border-radius:11px;background:var(--surface-2);border:1px solid var(--border);display:grid;place-items:center;flex:none;animation:ndp 4s ease-in-out infinite}
.dm-flow .nd svg{width:18px;height:18px;color:var(--text-2)}
.dm-flow .nd.n2{animation-delay:1s}.dm-flow .nd.n3{animation-delay:2s}.dm-flow .nd.n4{animation-delay:3s}
@keyframes ndp{0%,100%{background:var(--surface-2);border-color:var(--border);box-shadow:none}12%,24%{background:#F1A01B;border-color:transparent;box-shadow:0 0 0 5px rgba(250,189,21,.14)}}
.dm-flow .ln{flex:1;height:2px;background:var(--border);position:relative;overflow:hidden;border-radius:2px}
.dm-flow .ln::after{content:"";position:absolute;inset:0;width:0;background:var(--grad-gold);animation:lnf 4s ease-in-out infinite}
.dm-flow .ln.l2::after{animation-delay:1s}.dm-flow .ln.l3::after{animation-delay:2s}
@keyframes lnf{0%,8%{width:0}22%,100%{width:100%}}
/* web build */
.dm-web{border:1px solid var(--border);border-radius:11px;overflow:hidden;background:var(--surface-2)}
.dm-web .bar{display:flex;align-items:center;gap:5px;padding:7px 10px;border-bottom:1px solid var(--border)}
.dm-web .bar i{width:7px;height:7px;border-radius:50%;background:var(--text-3);opacity:.5}
.dm-web .url{margin-left:6px;height:9px;flex:1;border-radius:5px;background:var(--panel)}
.dm-web .prog{height:3px;background:var(--border)}
.dm-web .prog b{display:block;height:100%;width:0;background:var(--grad-gold);animation:wprog 3.4s ease-in-out infinite}
@keyframes wprog{0%{width:0}72%,100%{width:100%}}
.dm-web .rows{padding:12px;display:flex;flex-direction:column;gap:8px}
.dm-web .sk{height:11px;border-radius:6px;background:linear-gradient(90deg,var(--panel) 25%,var(--surface) 50%,var(--panel) 75%);background-size:200% 100%;animation:shim 1.4s linear infinite}
.dm-web .sk.s{width:55%}
@keyframes shim{to{background-position:-200% 0}}
/* cart */
.dm-cart{display:flex;align-items:center;gap:10px;padding:8px 2px}
.dm-cart .prod{width:40px;height:40px;border-radius:10px;background:var(--grad-brand);position:relative;transform:scale(0);animation:cpop 4s ease-in-out infinite}
.dm-cart .prod::after{content:"";position:absolute;inset:0;border-radius:10px;background:radial-gradient(60px 30px at 70% 10%,rgba(250,189,21,.5),transparent)}
.dm-cart .prod.p2{animation-delay:.5s}.dm-cart .prod.p3{animation-delay:1s}
@keyframes cpop{0%,4%{transform:scale(0)}14%{transform:scale(1.12)}24%,80%{transform:scale(1)}92%,100%{transform:scale(0)}}
.dm-cart .cartic{margin-left:auto;width:44px;height:44px;border-radius:12px;background:var(--surface-2);border:1px solid var(--border);display:grid;place-items:center;position:relative}
.dm-cart .cartic svg{width:22px;height:22px;color:var(--gold)}
.dm-cart .badge{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--grad-gold);color:#1a1303;font-family:var(--font-mono);font-size:11px;font-weight:700;display:grid;place-items:center;animation:bump 4s ease-in-out infinite}
@keyframes bump{0%,12%{transform:scale(1)}18%{transform:scale(1.4)}26%{transform:scale(1)}}
/* marketing chart */
.dm-chart{display:flex;align-items:flex-end;gap:7px;height:98px;padding:6px 2px;position:relative}
.dm-chart .cb{flex:1;border-radius:5px 5px 2px 2px;background:var(--grad-gold);transform-origin:bottom;animation:cgrow 3.6s ease-in-out infinite}
.dm-chart .cb.b2{animation-delay:.15s}.dm-chart .cb.b3{animation-delay:.3s}.dm-chart .cb.b4{animation-delay:.45s}.dm-chart .cb.b5{animation-delay:.6s}.dm-chart .cb.b6{animation-delay:.75s}
@keyframes cgrow{0%{transform:scaleY(.18)}55%{transform:scaleY(1)}100%{transform:scaleY(.18)}}
.dm-chart .cbadge{position:absolute;top:0;right:0;font-family:var(--font-mono);font-size:11px;font-weight:700;color:#3ddc84;background:rgba(61,220,132,.14);border-radius:100px;padding:3px 9px}
/* design morph */
.dm-design{display:flex;align-items:center;gap:16px;padding:8px 2px}
.dm-design .morph{width:56px;height:56px;background:var(--grad-gold);animation:morph 5s ease-in-out infinite}
@keyframes morph{0%{border-radius:32% 68% 68% 32%/32% 32% 68% 68%;transform:rotate(0)}50%{border-radius:62% 38% 30% 70%/60% 34% 66% 40%;transform:rotate(180deg)}100%{border-radius:32% 68% 68% 32%/32% 32% 68% 68%;transform:rotate(360deg)}}
.dm-design .sw{display:flex;flex-direction:column;gap:8px}
.dm-design .sw span{width:64px;height:14px;border-radius:7px;animation:swc 4s ease-in-out infinite}
.dm-design .sw span:nth-child(2){animation-delay:.5s}.dm-design .sw span:nth-child(3){animation-delay:1s}
@keyframes swc{0%{background:#FABD15}33%{background:#1763a8}66%{background:#3ddc84}100%{background:#FABD15}}

/* ===================== HOME SERVICES — RADIAL HUB ===================== */
.radial{position:relative;width:min(560px,92vw);aspect-ratio:1;margin:6px auto 0}
.rring{position:absolute;inset:7%;border:1px dashed var(--border-strong);border-radius:50%;opacity:.4;animation:spin 60s linear infinite;z-index:0}
.rring::after{content:"";position:absolute;inset:8%;border:1px dotted var(--border);border-radius:50%}
.rpointer{position:absolute;left:50%;top:50%;height:2px;width:40%;background:linear-gradient(90deg,transparent,var(--gold));transform-origin:left center;border-radius:2px;transition:transform .6s var(--ease);opacity:.55;z-index:1}
.rnode{position:absolute;width:60px;height:60px;border-radius:16px;display:grid;place-items:center;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow);cursor:pointer;transform:translate(-50%,-50%);transition:.4s var(--ease);z-index:3;padding:0}
.rnode svg{width:25px;height:25px;color:var(--text-2);transition:.3s}
.rnode:hover{border-color:var(--border-strong)}
.rnode.active{background:var(--grad-gold);border-color:transparent;box-shadow:0 0 0 6px rgba(250,189,21,.14),var(--shadow)}
.rnode.active svg{color:#1a1303}
.rcenter{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:60%;height:60%;border-radius:50%;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow);z-index:2;overflow:hidden}
.rcenter::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 30%,rgba(250,189,21,.12),transparent 60%)}
.rc-panel{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;text-align:center;padding:13% 12%;opacity:0;transform:scale(.96);transition:opacity .45s var(--ease),transform .45s var(--ease);pointer-events:none}
.rc-panel.active{opacity:1;transform:none;pointer-events:auto}
.rc-ic{width:50px;height:50px;border-radius:14px;background:var(--grad-gold);display:grid;place-items:center}
.rc-ic svg{width:24px;height:24px;color:#1a1303}
.rc-panel h4{font-size:19px;line-height:1.1}
.rc-panel p{font-size:13px;color:var(--text-2);max-width:210px}
.rcenter .demo-mini{margin:4px 0 0;max-width:210px}
.rcenter .dm-chart{height:58px}
.rcenter .dm-flow{padding:2px 0}
.rcenter .dm-flow .nd{width:30px;height:30px;border-radius:9px}
.rcenter .dm-flow .nd svg{width:14px;height:14px}
.rcenter .dm-cart{gap:7px}.rcenter .dm-cart .prod{width:30px;height:30px}.rcenter .dm-cart .cartic{width:36px;height:36px}.rcenter .dm-cart .cartic svg{width:18px;height:18px}
.rcenter .dm-design .morph{width:44px;height:44px}.rcenter .dm-design .sw span{width:48px;height:11px}
.rcenter .dm-code .body{font-size:10px;padding:9px 11px}
.rcenter .dm-web .rows{padding:9px}
@media(max-width:560px){.rnode{width:48px;height:48px;border-radius:13px}.rnode svg{width:20px;height:20px}.rc-panel p{font-size:12px}}

/* ===================== HOME SERVICES — ORBIT CAROUSEL ===================== */
.orbitwrap{position:relative;width:min(560px,92vw);aspect-ratio:1;margin:6px auto 0}
.odeco{position:absolute;inset:6%;border:1px dashed var(--border-strong);border-radius:50%;opacity:.35;animation:spin 80s linear infinite;z-index:0}
.odeco::after{content:"";position:absolute;inset:10%;border:1px dotted var(--border);border-radius:50%}
.ofocus{position:absolute;top:6%;left:50%;width:84px;height:84px;border-radius:20px;transform:translate(-50%,-50%);border:2px solid var(--gold);box-shadow:0 0 0 7px rgba(250,189,21,.12),0 0 26px rgba(250,189,21,.3);z-index:1;animation:focuspulse 2.4s ease-in-out infinite}
@keyframes focuspulse{50%{box-shadow:0 0 0 11px rgba(250,189,21,.05),0 0 32px rgba(250,189,21,.45)}}
.orbit{position:absolute;inset:0;transform:rotate(var(--rot,0deg));transition:transform .9s var(--ease);z-index:2}
.onode{position:absolute;left:50%;top:50%;transform:rotate(var(--a)) translate(0,calc(-1*var(--R,240px)))}
.onode .inner{position:absolute;left:0;top:0;transform:translate(-50%,-50%) rotate(calc(-1*var(--a))) rotate(calc(-1*var(--rot,0deg)));transition:transform .9s var(--ease)}
.onode .oic{width:62px;height:62px;border-radius:17px;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow);display:grid;place-items:center;cursor:pointer;transition:.4s var(--ease);padding:0}
.onode .oic svg{width:26px;height:26px;color:var(--text-2);transition:.3s}
.onode.active .oic{background:var(--grad-gold);border-color:transparent;transform:scale(1.2)}
.onode.active .oic svg{color:#1a1303}
.orbitwrap .rcenter{z-index:3;width:52%;height:52%}
@media(max-width:560px){.onode .oic{width:50px;height:50px;border-radius:14px}.onode .oic svg{width:21px;height:21px}.ofocus{width:66px;height:66px}.orbitwrap .rcenter{width:58%;height:58%}}

/* ===================== HOME SERVICES — INTERACTIVE INDEX ===================== */
.svindex{display:grid;grid-template-columns:1.08fr .92fr;gap:46px;align-items:stretch}
.svlist{display:flex;flex-direction:column;justify-content:center}
.sxrow{display:flex;align-items:center;gap:18px;padding:20px 8px;border-top:1px solid var(--border);text-decoration:none;color:inherit;position:relative;cursor:pointer;transition:padding .4s var(--ease)}
.sxrow:last-child{border-bottom:1px solid var(--border)}
.sxrow .sbar{position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:3px;background:var(--grad-gold);transform:scaleY(0);transform-origin:center;transition:transform .4s var(--ease)}
.sxrow.active .sbar{transform:scaleY(1)}
.snum{font-family:var(--font-mono);font-size:13px;color:var(--text-3);width:30px;flex:none}
.sname{font-family:var(--font-display);font-weight:800;font-size:clamp(24px,3.2vw,42px);line-height:1.02;letter-spacing:-.02em;-webkit-text-stroke:1.2px var(--text-3);color:transparent;transition:.4s var(--ease)}
.sarrow{margin-left:auto;color:var(--gold);opacity:0;transform:translateX(-12px);transition:.4s var(--ease);display:flex}
.sarrow svg{width:24px;height:24px}
.sxrow.active{padding-left:22px}
.sxrow.active .sname{-webkit-text-stroke:0;background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent}
.sxrow.active .sarrow{opacity:1;transform:none}
.spreview{position:relative;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);overflow:hidden;box-shadow:var(--shadow);min-height:430px;background-image:radial-gradient(var(--grid-line) 1px,transparent 1px);background-size:24px 24px}
.spreview::before{content:"";position:absolute;inset:0;background:radial-gradient(440px circle at 78% 16%,rgba(250,189,21,.16),transparent 60%);pointer-events:none}
.sp-panel{position:absolute;inset:0;padding:34px;display:flex;flex-direction:column;opacity:0;transform:scale(1.03);transition:opacity .5s var(--ease),transform .5s var(--ease);pointer-events:none}
.sp-panel.active{opacity:1;transform:none;pointer-events:auto}
.sp-ic{width:60px;height:60px;border-radius:16px;background:var(--grad-gold);display:grid;place-items:center}
.sp-ic svg{width:28px;height:28px;color:#1a1303}
.sp-panel h3{font-size:25px;margin:20px 0 10px}
.sp-panel p{color:var(--text-2);font-size:15px;max-width:360px;margin-bottom:16px}
.sp-panel .tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:auto}
.sp-panel .tags span{font-family:var(--font-mono);font-size:11px;padding:5px 11px;border-radius:100px;background:var(--surface-2);border:1px solid var(--border);color:var(--text-2)}
.sp-panel .demo-mini{margin:18px 0 0;max-width:330px}
@media(max-width:880px){
  .svindex{grid-template-columns:1fr;gap:22px}
  .spreview{min-height:340px;order:-1}
  .sxrow{padding:16px 8px}
}

/* ===================== HERO — SINGAPORE SKYLINE SCENE ===================== */
header.hero{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:120px 0 0;overflow:hidden;color:#eef4fd}
.hero-city{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-city .sky{position:absolute;inset:0;background:linear-gradient(180deg,#03101f 0%,#06223f 44%,#0a3360 72%,#123f64 90%)}
.hero-city .glow{position:absolute;left:0;right:0;bottom:4%;height:64%;background:radial-gradient(760px 340px at 50% 100%,rgba(250,189,21,.34),rgba(250,189,21,.05) 55%,transparent 72%);pointer-events:none}
.hero-city .stars{position:absolute;inset:0 0 30% 0;pointer-events:none}
.hero-city .stars i{position:absolute;width:2px;height:2px;border-radius:50%;background:#dCE8f7;opacity:.5;animation:twk 3.4s ease-in-out infinite}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2;opacity:0;transition:opacity .6s}
.hero-video.on{opacity:.55}
.skyline{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:102%;height:auto;display:block;z-index:2;transition:transform .4s ease-out}
.skyline .win{fill:#1d3c63;opacity:.45}
.skyline .lit{fill:#FABD15;animation:twk 3.6s ease-in-out infinite}
@keyframes twk{0%,100%{opacity:.92}50%{opacity:.28}}
.skyline .flyer{transform-box:fill-box;transform-origin:center;animation:spin 90s linear infinite}
.hero-city .water{position:absolute;left:0;right:0;bottom:0;height:13%;z-index:3;background:linear-gradient(180deg,rgba(8,30,55,0),rgba(4,16,30,.66));overflow:hidden}
.hero-city .water::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(180deg,transparent 0 7px,rgba(140,180,235,.05) 7px 8px)}
.city-fx{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden}
.city-fx .p{position:absolute;bottom:13%;width:3px;height:3px;border-radius:50%;background:var(--gold);box-shadow:0 0 8px var(--gold);opacity:0;animation:rise2 7s linear infinite}
@keyframes rise2{0%{opacity:0;transform:translateY(0)}14%{opacity:1}100%{opacity:0;transform:translateY(-360px)}}
.city-fx .scan{position:absolute;left:0;right:0;height:150px;background:linear-gradient(180deg,transparent,rgba(250,189,21,.06),transparent);animation:cityscan 8s ease-in-out infinite}
@keyframes cityscan{0%{top:78%}100%{top:-22%}}
.hero-city .scrim{position:absolute;inset:0;z-index:5;background:radial-gradient(1000px 540px at 50% 36%,rgba(3,15,30,.6),transparent 72%);pointer-events:none}
.hero-grid.solo.center{max-width:880px;text-align:center;margin:0 auto;position:relative;z-index:6}
.hero-grid.center .hero-badge{margin:0 auto 26px}
.hero-grid.center .hero-sub{margin-left:auto;margin-right:auto}
.hero-grid.center .hero-cta{justify-content:center}
.hero-grid.center .hero-stats{justify-content:center}
header.hero .hero-sub{color:#b9cce6}
header.hero .hero-badge{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#cfe0f5}
header.hero .hero-stats .l{color:#9fb6d6}
header.hero .btn-ghost{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3);color:#fff}
header.hero h1{font-size:clamp(40px,5.4vw,76px)}

/* ===================== HERO — MULTI-SCENE MONTAGE ===================== */
.hero-bg2{position:absolute;inset:0;z-index:0;overflow:hidden}
.scene{position:absolute;inset:0;opacity:0;transition:opacity 1.2s ease;will-change:opacity}
.scene.active{opacity:1}
.scene .sbase{position:absolute;inset:0;background:linear-gradient(180deg,#03101f,#06203b 55%,#0a2f55)}
.scene .sglow{position:absolute;left:50%;top:44%;width:700px;height:700px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(250,189,21,.16),rgba(23,99,168,.10) 45%,transparent 70%);filter:blur(8px)}
/* data center */
.dc-led{animation:twk 1.5s steps(2,jump-none) infinite}
.scene-data .dflow{stroke:#1d5a93;stroke-width:1.6;stroke-dasharray:5 9;animation:dashmove 1.8s linear infinite;opacity:.55}
/* code rain */
.coderain{position:absolute;inset:0;overflow:hidden}
.coderain .col{position:absolute;top:0;white-space:pre;font-family:var(--font-mono);font-size:14px;line-height:1.32;color:#1f6fb0;opacity:.42;will-change:transform;animation:fall linear infinite}
.coderain .col b{color:#FABD15}
@keyframes fall{from{transform:translateY(-58%)}to{transform:translateY(62%)}}
.coderain::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,16,31,.55),transparent 26%,transparent 72%,rgba(3,16,31,.85))}
/* ai neural */
.scene-ai .nline{stroke:#1d5a93;stroke-width:1.4;stroke-dasharray:4 8;animation:dashmove 2s linear infinite;opacity:.5}
.scene-ai .nnode{animation:twk 2.6s ease-in-out infinite}
.scene-ai .ncore{animation:corepulse 2.2s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
/* scene dots */
.scene-dots{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);display:flex;gap:10px;z-index:6}
.scene-dots b{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.32);cursor:pointer;transition:.35s var(--ease)}
.scene-dots b.on{background:var(--grad-gold);width:28px;border-radius:5px}

/* ---- real photo / video layers per scene ---- */
.scene-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2;opacity:0;transition:opacity 1.5s ease;transform:scale(1.04);animation:slowzoom 26s ease-in-out infinite alternate}
.scene-photo.loaded{opacity:1}
.scene-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2;opacity:0;transition:opacity 1s ease}
.scene-video.loaded{opacity:1}
@keyframes slowzoom{from{transform:scale(1.04)}to{transform:scale(1.13)}}
.photo-tint{position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(180deg,rgba(3,13,26,.62),rgba(3,13,26,.3) 38%,rgba(3,13,26,.4) 62%,rgba(3,13,26,.78))}

/* ===================== FORMAS-STYLE SECTIONS (process + FAQ) ===================== */
.fsec{padding:104px 0;position:relative}
.fhead{max-width:760px;margin:0 0 56px}
.fhead.center{margin-left:auto;margin-right:auto;text-align:center}
.feyebrow{display:inline-flex;align-items:center;gap:10px;font:600 12px/1 var(--font-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:20px}
.feyebrow::before{content:"";width:24px;height:1.5px;background:var(--grad-gold)}
.fhead.center .feyebrow::before{display:none}
.fhead h2{font-family:var(--font-display);font-weight:600;font-size:clamp(32px,4.4vw,56px);line-height:1.04;letter-spacing:-.025em;margin:0 0 16px;color:var(--text)}
.fhead h2 em{font-style:italic;font-weight:500;background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.fhead p{font-size:17.5px;line-height:1.65;color:var(--text-2);margin:0}

/* numbered workflow */
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;position:relative}
.flow::before{content:"";position:absolute;top:34px;left:6%;right:6%;height:1.5px;background:linear-gradient(90deg,transparent,var(--border-strong) 12%,var(--border-strong) 88%,transparent);z-index:0}
.fstep{position:relative;z-index:1;padding:4px}
.fstep .fnum{width:68px;height:68px;border-radius:20px;display:grid;place-items:center;font:700 26px/1 var(--font-display);color:var(--gold);background:var(--surface);border:1.5px solid var(--border-strong);box-shadow:var(--shadow);margin-bottom:22px;position:relative;transition:.4s var(--ease)}
.fstep .fnum::after{content:"";position:absolute;inset:-1.5px;border-radius:20px;padding:1.5px;background:var(--grad-gold);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:.4s var(--ease)}
.fstep:hover .fnum{transform:translateY(-4px)}
.fstep:hover .fnum::after{opacity:1}
.fstep h3{font-family:var(--font-display);font-weight:600;font-size:20px;margin:0 0 8px;color:var(--text)}
.fstep p{font-size:14.5px;line-height:1.6;color:var(--text-2);margin:0}
@media(max-width:820px){.flow{grid-template-columns:repeat(2,1fr);gap:30px}.flow::before{display:none}}
@media(max-width:480px){.flow{grid-template-columns:1fr}}

/* FAQ accordion */
.faq{max-width:860px;margin:0 auto;border-top:1px solid var(--border)}
.faq-item{border-bottom:1px solid var(--border)}
.faq-q{width:100%;background:none;border:0;cursor:pointer;text-align:left;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:26px 6px;font-family:var(--font-display);font-weight:600;font-size:clamp(17px,2vw,21px);color:var(--text);transition:color .3s}
.faq-q:hover{color:var(--gold)}
.faq-ic{flex:none;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--border-strong);display:grid;place-items:center;position:relative;transition:.4s var(--ease)}
.faq-ic::before,.faq-ic::after{content:"";position:absolute;background:var(--gold);border-radius:2px;transition:.4s var(--ease)}
.faq-ic::before{width:12px;height:2px}.faq-ic::after{width:2px;height:12px}
.faq-item.open .faq-ic{background:var(--grad-gold);border-color:transparent;transform:rotate(180deg)}
.faq-item.open .faq-ic::before,.faq-item.open .faq-ic::after{background:#0a1f38}
.faq-item.open .faq-ic::after{transform:scaleY(0)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .45s var(--ease)}
.faq-a p{margin:0 6px 26px;color:var(--text-2);font-size:15.5px;line-height:1.7;max-width:760px}

/* ===================== HERO — AI ARCHITECTING ANIMATION ===================== */
.arch-bg{position:absolute;inset:0;z-index:0;overflow:hidden;background:radial-gradient(120% 95% at 50% 28%,#0a2746 0%,#061densely 1%,#040f1f 72%)}
.arch-bg{background:radial-gradient(120% 95% at 50% 28%,#0a2746 0%,#050f20 72%)}
.arch-grid{position:absolute;inset:0;background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);background-size:48px 48px;-webkit-mask:radial-gradient(circle at 50% 44%,#000,transparent 82%);mask:radial-gradient(circle at 50% 44%,#000,transparent 82%);opacity:.7;animation:gridfloat 26s ease-in-out infinite alternate}
@keyframes gridfloat{to{background-position:48px 24px}}
.arch-svg{position:absolute;inset:0;width:100%;height:100%;transition:transform .4s ease-out}
.anode{opacity:0;transform:scale(.5);transform-box:fill-box;transform-origin:center;transition:opacity .5s var(--ease),transform .55s var(--ease)}
.anode.on{opacity:1;transform:scale(1)}
.acard{fill:#0b2138;stroke:#1a4068;stroke-width:1.5}
.anode.on .acard{stroke:rgba(250,189,21,.55);filter:drop-shadow(0 0 10px rgba(250,189,21,.22))}
.anode.core .acard{fill:#0c2c52;stroke:rgba(250,189,21,.65)}
.acard-i{fill:#163a60}
.aport{fill:var(--gold)}
.alabel{fill:#d4e4f7;font-family:var(--font-mono);font-weight:600;font-size:12px;text-anchor:middle;dominant-baseline:middle;letter-spacing:.04em}
.anode.core .alabel{fill:#ffd45e;font-size:13px}
.aconn .alink{fill:none;stroke:#1a4d7d;stroke-width:1.6;transition:stroke-dashoffset .62s var(--ease);opacity:.22}
.aconn.on .alink{opacity:.6}
.aconn .aflow{fill:none;stroke:var(--gold-soft);stroke-width:2.2;stroke-dasharray:3 16;opacity:0;filter:drop-shadow(0 0 4px var(--gold))}
.aconn.on .aflow{opacity:.9;animation:aflow 1.5s linear infinite}
@keyframes aflow{to{stroke-dashoffset:-260}}
.arch-scrim{position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(940px 540px at 50% 42%,rgba(4,12,26,.74),rgba(4,12,26,.32) 58%,transparent 80%)}

/* ===================== HERO — REAL-TIME 3D INTERACTIVE NETWORK ===================== */
.fx3d-wrap{position:absolute;inset:0;z-index:0;overflow:hidden;background:radial-gradient(120% 95% at 50% 32%,#0a2746 0%,#050f20 72%);cursor:grab}
.fx3d-wrap:active{cursor:grabbing}
#fx3d{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero .arch-scrim{background:radial-gradient(960px 560px at 50% 44%,rgba(4,12,26,.72),rgba(4,12,26,.28) 58%,transparent 82%)}
.drag-hint{display:inline-flex;align-items:center;gap:7px}
.drag-hint svg{width:14px;height:14px;opacity:.8}

/* ===================== ENTERPRISE DASHBOARD SHOWCASE ===================== */
.showcase .appwrap{position:relative;max-width:1080px;margin:0 auto}
.appwin{position:relative;border-radius:18px;border:1px solid var(--border-strong);background:linear-gradient(180deg,var(--surface),var(--surface-2));box-shadow:var(--shadow);overflow:hidden}
.app-top{display:flex;align-items:center;gap:12px;padding:11px 16px;border-bottom:1px solid var(--border);background:var(--panel-strong)}
.app-top .dots{display:flex;gap:6px}.app-top .dots i{width:10px;height:10px;border-radius:50%;background:#ff5f57;display:block}.app-top .dots i:nth-child(2){background:#febc2e}.app-top .dots i:nth-child(3){background:#28c840}
.app-top .at-title{font:600 12.5px/1 var(--font-mono);color:var(--text-2)}
.app-top .at-pill{margin-left:6px;font:600 10.5px var(--font-mono);color:var(--gold);border:1px solid var(--border-strong);border-radius:20px;padding:3px 9px}
.app-top .at-right{margin-left:auto;display:flex;align-items:center;gap:8px;color:var(--text-3);font-size:12px}
.app-top .av{width:24px;height:24px;border-radius:50%;background:var(--grad-mix)}
.app-body{display:grid;grid-template-columns:208px 1fr 248px;min-height:452px}
.app-side{border-right:1px solid var(--border);padding:14px 12px;display:flex;flex-direction:column;gap:3px;background:rgba(255,255,255,.012)}
.app-search{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--border);border-radius:9px;color:var(--text-3);font-size:12px;margin-bottom:8px}
.app-search svg{width:13px;height:13px}
.side-h{font:700 10px var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);margin:10px 4px 4px}
.nav-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;cursor:pointer;color:var(--text-2);font-size:13px;font-weight:600;transition:.2s var(--ease);border:1px solid transparent}
.nav-item:hover{background:var(--panel);color:var(--text)}
.nav-item.on{background:var(--grad-gold);color:#0a1f38;box-shadow:0 6px 18px -8px rgba(250,189,21,.6)}
.nav-item .ic{width:15px;height:15px;flex:none}
.nav-item .ct{margin-left:auto;font:700 10px var(--font-mono);opacity:.7}
.app-main{padding:18px 20px;display:flex;flex-direction:column;gap:14px;min-width:0}
.amh h3{font-family:var(--font-display);font-size:20px;margin:0;color:var(--text)}
.amh p{color:var(--text-3);font-size:12.5px;margin:3px 0 0}
.kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.kpi{border:1px solid var(--border);border-radius:12px;padding:11px 12px;background:var(--panel)}
.kpi .l{font-size:10.5px;color:var(--text-3);text-transform:uppercase;letter-spacing:.05em}
.kpi .v{font-family:var(--font-display);font-size:21px;font-weight:700;margin-top:5px;color:var(--text)}
.kpi .d{font-size:11px;font-weight:700;margin-top:2px}
.kpi .d.up{color:#3ddc84}.kpi .d.down{color:#ff6b6b}
.app-chart{border:1px solid var(--border);border-radius:12px;padding:13px 14px 10px;background:var(--panel)}
.app-chart .ch-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.app-chart .ch-h b{font-size:12.5px;color:var(--text-2)}
.app-chart .ch-h .lg{font:600 10.5px var(--font-mono);color:var(--text-3)}
.bars{display:flex;align-items:flex-end;gap:5px;height:116px}
.bars span{flex:1;background:linear-gradient(180deg,var(--gold-soft),var(--gold-2));border-radius:4px 4px 0 0;height:10%;transition:height .7s var(--ease);min-width:3px;opacity:.92}
.bars span.alt{background:linear-gradient(180deg,#7fc0ff,#1763a8);opacity:.7}
.app-table{border:1px solid var(--border);border-radius:12px;overflow:hidden}
.app-table .tr{display:grid;grid-template-columns:1.7fr 1fr 1fr .9fr;gap:8px;padding:9px 14px;font-size:12px;border-top:1px solid var(--border);align-items:center}
.app-table .tr.h{background:var(--panel-strong);color:var(--text-3);text-transform:uppercase;font-size:10px;letter-spacing:.05em;border-top:0;font-weight:700}
.app-table .tr .nm{color:var(--text);font-weight:600}
.st{padding:2px 9px;border-radius:20px;font-size:10px;font-weight:700;justify-self:start}
.st.ok{background:rgba(61,220,132,.15);color:#3ddc84}.st.run{background:rgba(95,168,230,.15);color:#7fc0ff}.st.warn{background:rgba(250,189,21,.16);color:var(--gold)}
.app-right{border-left:1px solid var(--border);padding:15px;display:flex;flex-direction:column;gap:12px;background:rgba(255,255,255,.012)}
.ar-tabs{display:flex;gap:6px}
.ar-tabs b{flex:1;text-align:center;font:600 11.5px var(--font-mono);color:var(--text-3);padding:6px;border-radius:8px;cursor:pointer;border:1px solid var(--border)}
.ar-tabs b.on{color:#0a1f38;background:var(--grad-gold);border-color:transparent}
.ai-card{border:1px solid var(--border-strong);border-radius:13px;padding:14px;background:linear-gradient(160deg,rgba(250,189,21,.08),var(--panel))}
.ai-card .h{display:flex;align-items:center;gap:7px;font:700 11px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.ai-card .h .pulse{width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 0 rgba(250,189,21,.6);animation:pl 1.8s infinite}
@keyframes pl{0%{box-shadow:0 0 0 0 rgba(250,189,21,.5)}70%{box-shadow:0 0 0 8px rgba(250,189,21,0)}100%{box-shadow:0 0 0 0 rgba(250,189,21,0)}}
.ai-card p{font-size:12.5px;line-height:1.55;color:var(--text-2);margin:0}
.ring{display:flex;align-items:center;gap:12px;margin-top:4px}
.ring svg{width:64px;height:64px;flex:none}
.ring .rt b{font-family:var(--font-display);font-size:20px;color:var(--text)}
.ring .rt span{display:block;font-size:11px;color:var(--text-3)}
.act{display:flex;flex-direction:column;gap:9px}
.act .it{display:flex;gap:9px;align-items:flex-start;font-size:12px;color:var(--text-2)}
.act .it .dotc{width:8px;height:8px;border-radius:50%;background:var(--gold);margin-top:4px;flex:none}
.act .it .dotc.b{background:#7fc0ff}.act .it .dotc.g{background:#3ddc84}
.act .it time{display:block;color:var(--text-3);font-size:10.5px;margin-top:1px}
.app-float{position:absolute;left:-16px;bottom:-26px;width:300px;border-radius:14px;border:1px solid var(--border-strong);background:var(--surface);box-shadow:var(--shadow);padding:13px 14px;backdrop-filter:blur(8px)}
.app-float .fk{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px}
.app-float .fk .l{font-size:9.5px;color:var(--text-3);text-transform:uppercase;letter-spacing:.04em}
.app-float .fk .v{font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--text)}
.app-float .spark{display:flex;align-items:flex-end;gap:3px;height:34px}
.app-float .spark span{flex:1;background:var(--grad-gold);border-radius:2px;transition:height .7s var(--ease)}
@media(max-width:920px){.app-body{grid-template-columns:1fr}.app-side,.app-right{display:none}.app-float{display:none}.kpi-row{grid-template-columns:repeat(2,1fr)}}

/* ===================== 3D LAYERED (look inside) ===================== */
.showcase.fsec{overflow:hidden}
.showcase .stage{perspective:1700px;perspective-origin:50% 36%;max-width:1140px;margin:0 auto;padding:26px 0 64px}
.showcase .stack{position:relative;transform-style:preserve-3d;will-change:transform}
.showcase .appwin{position:relative;z-index:2;backface-visibility:hidden}
.syslayer{position:absolute;inset:0;border-radius:18px;border:1px solid var(--border-strong);background:linear-gradient(180deg,rgba(11,32,58,.94),rgba(7,20,40,.96));overflow:hidden;backface-visibility:hidden;box-shadow:0 36px 70px -34px rgba(0,0,0,.8)}
.syslayer .sl-tab{position:absolute;top:12px;left:14px;z-index:3;font:700 10px var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);background:rgba(250,189,21,.12);border:1px solid var(--border-strong);padding:4px 9px;border-radius:7px}
.sl1{transform:translateZ(-130px) translateY(30px) scale(.975)}
.sl2{transform:translateZ(-260px) translateY(60px) scale(.95)}
.sl3{transform:translateZ(-390px) translateY(90px) scale(.925)}
.sl1 .pipe3{position:absolute;left:8%;right:8%;top:46%;display:flex;align-items:center;justify-content:space-between}
.sl1 .pn{min-width:62px;height:38px;padding:0 8px;border-radius:9px;background:var(--panel-strong);border:1px solid var(--border-strong);display:grid;place-items:center;font:600 10px var(--font-mono);color:var(--text-2)}
.sl1 .pl{flex:1;height:2px;margin:0 6px;background:linear-gradient(90deg,rgba(250,189,21,.5),rgba(250,189,21,.05));position:relative;overflow:hidden}
.sl1 .pl::after{content:"";position:absolute;top:-2px;left:-25%;width:25%;height:6px;background:var(--gold);border-radius:3px;filter:blur(1px);animation:plmove 2.2s linear infinite}
@keyframes plmove{to{left:125%}}
.sl2 .grid3{position:absolute;inset:32% 9% 14%;display:grid;grid-template-columns:repeat(12,1fr);gap:5px}
.sl2 .grid3 i{background:rgba(95,168,230,.12);border-radius:3px;animation:cellp 3s ease-in-out infinite}
@keyframes cellp{0%,100%{background:rgba(95,168,230,.1)}50%{background:rgba(250,189,21,.32)}}
.sl3 .net3{position:absolute;inset:30% 16% 16%}
.sl3 .net3 b{position:absolute;width:11px;height:11px;border-radius:50%;background:var(--gold);box-shadow:0 0 12px var(--gold);transform:translate(-50%,-50%);animation:twk 2.4s ease-in-out infinite}
.sl3 .net3 svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.sl3 .net3 svg line{stroke:rgba(95,168,230,.5);stroke-width:1.2;stroke-dasharray:4 7;animation:dashmove 2s linear infinite}
.rail{position:absolute;top:50%;width:430px;height:3px;border-radius:3px;background:linear-gradient(90deg,rgba(250,189,21,.55),rgba(95,168,230,.15));backface-visibility:hidden}
.rl{left:10px;transform-origin:left center;transform:rotateY(-90deg)}
.rr{right:10px;transform-origin:right center;transform:rotateY(90deg)}
.zflow{position:absolute;top:44%;width:11px;height:11px;border-radius:50%;background:var(--gold-soft);box-shadow:0 0 14px var(--gold);animation:zmove 3.6s ease-in-out infinite}
@keyframes zmove{0%{transform:translate(-50%,-50%) translateZ(60px);opacity:0}14%{opacity:1}86%{opacity:1}100%{transform:translate(-50%,-50%) translateZ(-400px);opacity:0}}
.z1{left:32%;animation-delay:0s}.z2{left:50%;animation-delay:.9s}.z3{left:67%;animation-delay:1.8s}.z4{left:43%;animation-delay:2.6s}
.stage-hint{text-align:center;margin-top:30px;font:600 12px var(--font-mono);color:var(--text-3);letter-spacing:.03em}
.stage-hint b{color:var(--gold)}

/* ===================== AUTO-DEMO (cursor walkthrough) ===================== */
@keyframes kin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.showcase .kpi{opacity:0;animation:kin .5s var(--ease) forwards}
.showcase .app-table .tr:not(.h){opacity:0;animation:kin .45s var(--ease) forwards}
.demo-cursor{position:absolute;left:30px;top:130px;z-index:20;width:24px;height:24px;pointer-events:none;filter:drop-shadow(0 3px 5px rgba(0,0,0,.45));transition:left 1s cubic-bezier(.5,.05,.2,1),top 1s cubic-bezier(.5,.05,.2,1)}
.demo-cursor svg{width:100%;height:100%;display:block}
.demo-cursor::after{content:"";position:absolute;left:-7px;top:-3px;width:30px;height:30px;border-radius:50%;border:2px solid var(--gold);opacity:0}
.demo-cursor.click::after{animation:clickr .55s ease-out}
@keyframes clickr{0%{transform:scale(.3);opacity:.85}100%{transform:scale(1.5);opacity:0}}
.demo-pop{position:absolute;z-index:18;min-width:176px;max-width:230px;background:var(--surface);border:1px solid var(--border-strong);border-radius:12px;box-shadow:var(--shadow);padding:11px 13px;opacity:0;transform:translateY(12px) scale(.95);transition:.45s var(--ease);pointer-events:none}
.demo-pop.on{opacity:1;transform:translateY(0) scale(1)}
.demo-pop h5{margin:0 0 4px;font:700 12.5px var(--font-display);color:var(--text)}
.demo-pop p{margin:0;font-size:11.5px;color:var(--text-2);line-height:1.5}
.demo-pop .pp-bar{height:5px;border-radius:3px;background:var(--panel-strong);margin-top:9px;overflow:hidden}
.demo-pop .pp-bar i{display:block;height:100%;width:0;background:var(--grad-gold);transition:width 1.1s var(--ease)}
.demo-pop.pop-a{left:296px;top:250px}
.demo-pop.pop-b{left:560px;top:150px}
@media(max-width:920px){.demo-cursor,.demo-pop{display:none}}

/* ===================== SHOWCASE: LIGHT THEME + STACKING WINDOWS ===================== */
.showcase .appwrap{
  --surface:#ffffff; --surface-2:#eef3fa; --panel:#f6f9fd; --panel-strong:#eaf0f8;
  --border:#e2e9f2; --border-strong:#cfdaea; --text:#0e1b2e; --text-2:#46566f; --text-3:#8593a8;
  --shadow:0 30px 60px -25px rgba(20,45,90,.35);
}
.demo-cursor{z-index:40;transition:left .42s cubic-bezier(.5,.05,.2,1),top .42s cubic-bezier(.5,.05,.2,1)}
.popwin{position:absolute;width:250px;left:224px;top:90px;background:var(--surface);border:1px solid var(--border-strong);border-radius:13px;box-shadow:0 28px 55px -20px rgba(20,45,90,.5);overflow:hidden;opacity:0;transform:translateY(16px) scale(.94);transition:.3s var(--ease);z-index:30;pointer-events:none}
.popwin.on{opacity:1;transform:translateY(0) scale(1)}
.popwin .pw-top{display:flex;align-items:center;gap:8px;padding:8px 11px;border-bottom:1px solid var(--border);background:var(--panel-strong)}
.popwin .pw-dots{display:flex;gap:5px}.popwin .pw-dots i{width:8px;height:8px;border-radius:50%;background:#ff5f57;display:block}.popwin .pw-dots i:nth-child(2){background:#febc2e}.popwin .pw-dots i:nth-child(3){background:#28c840}
.popwin .pw-top b{font:700 12px var(--font-display);color:var(--text)}
.popwin .pw-live{margin-left:auto;font:600 9px var(--font-mono);color:var(--gold);border:1px solid var(--border-strong);border-radius:20px;padding:2px 7px}
.popwin .pw-body{padding:12px}
.popwin .pw-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:11px}
.popwin .pw-kpis>div{border:1px solid var(--border);border-radius:9px;padding:7px 8px;background:var(--panel)}
.popwin .pw-kpis .l{font-size:9px;color:var(--text-3);text-transform:uppercase;letter-spacing:.04em}
.popwin .pw-kpis .v{font:700 14px var(--font-display);color:var(--text);margin-top:2px}
.popwin .pw-bars{display:flex;align-items:flex-end;gap:4px;height:64px}
.popwin .pw-bars span{flex:1;background:linear-gradient(180deg,var(--gold-soft),var(--gold-2));border-radius:3px 3px 0 0;height:8%;transition:height .5s var(--ease)}
@media(max-width:920px){.popwin{display:none}}

/* ===================== SHOWCASE: phone-screen windows, left/center/right ===================== */
.popwin{width:208px!important;border-radius:26px!important;padding:0!important;box-shadow:0 26px 52px -18px rgba(20,45,90,.55)!important;transform:translateY(20px) scale(.9)}
.popwin.on{transform:translateY(0) scale(1)}
.popwin .pw-notch{height:24px;display:flex;align-items:center;justify-content:center;background:var(--panel-strong);border-bottom:1px solid var(--border)}
.popwin .pw-notch::before{content:"";width:48px;height:6px;border-radius:6px;background:var(--border-strong)}
.popwin .pw-status{display:flex;align-items:center;justify-content:space-between;padding:6px 15px 0;font:600 9px var(--font-mono);color:var(--text-3)}
.popwin .pw-top{display:flex;align-items:center;gap:7px;padding:7px 15px 4px;border-bottom:0!important;background:transparent!important}
.popwin .pw-top b{font:700 13px var(--font-display);color:var(--text)}
.popwin .pw-live{margin-left:auto;font:600 8.5px var(--font-mono);color:var(--gold);border:1px solid var(--border-strong);border-radius:20px;padding:2px 7px}
.popwin .pw-body{padding:4px 15px 16px!important}
.popwin .pw-kpis{display:flex!important;flex-direction:column;gap:6px;margin-bottom:11px}
.popwin .pw-kpis>div{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--border);border-radius:9px;padding:6px 10px;background:var(--panel)}
.popwin .pw-kpis .l{font-size:10px;color:var(--text-3);text-transform:none;letter-spacing:0}
.popwin .pw-kpis .v{font:700 14px var(--font-display);color:var(--text);margin-top:0}
.popwin .pw-bars{height:56px}

/* ===================== SITE-WIDE INTERACTIONS ===================== */
.scroll-prog{position:fixed;top:0;left:0;height:3px;width:100%;transform:scaleX(0);transform-origin:0 50%;background:var(--grad-gold);z-index:2000;box-shadow:0 0 10px rgba(250,189,21,.55);pointer-events:none}
.fstep,.band .st,#dashboards .kpi{transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.fstep:hover,.band .st:hover,#dashboards .kpi:hover{box-shadow:0 18px 42px -18px rgba(250,189,21,.38)}
.cta .btn,header.hero .btn-primary{transition:transform .3s cubic-bezier(.2,.8,.3,1)}
.glowable{position:relative;isolation:isolate}
.glowable::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%),rgba(250,189,21,.16),transparent 62%);opacity:0;transition:opacity .35s;pointer-events:none;z-index:-1}
.glowable:hover::before{opacity:1}
.flow{position:relative}
.flow-line{position:absolute;left:7%;right:7%;top:30px;height:2px;background:var(--border-strong);border-radius:2px;overflow:hidden;z-index:0}
.flow-line i{display:block;height:100%;width:100%;background:var(--grad-gold);transform:scaleX(0);transform-origin:0 50%;box-shadow:0 0 8px rgba(250,189,21,.6)}
.flow .fstep{position:relative;z-index:1}
@media(max-width:760px){.flow-line{display:none}}
.marquee:hover .track{animation-play-state:paused}
.faq-q{transition:color .2s var(--ease)}
.faq-item:hover .faq-q{color:var(--gold)}
.dash-body .kpi{cursor:default}

/* ===================== ABOUT PAGE POLISH ===================== */
.proc{position:relative}
.proc-line{top:54px}
.proc .pcardx{position:relative;z-index:1}
.pcardx{transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.pcardx:hover,.why:hover,.tcard:hover{box-shadow:0 20px 46px -20px rgba(250,189,21,.4)}
.why{transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.why .wi{transition:transform .35s var(--ease),color .3s var(--ease)}
.why:hover .wi{transform:scale(1.14) rotate(-7deg);color:var(--gold)}
.tcard{transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.tcard .q{transition:transform .35s var(--ease)}
.tcard:hover .q{transform:translateY(-5px) scale(1.12)}
.tcard .stars{transition:filter .3s}
.tcard:hover .stars{filter:drop-shadow(0 0 8px rgba(250,189,21,.6))}
.tile{transition:transform .25s var(--ease)}
.page-hero{position:relative;overflow:hidden}
.page-hero::after{content:"";position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(250,189,21,.15),transparent 66%);top:-200px;right:-120px;filter:blur(8px);animation:floatblob 15s ease-in-out infinite;pointer-events:none;z-index:0}
.page-hero .wrap{position:relative;z-index:1}
@keyframes floatblob{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-44px,46px) scale(1.14)}}

/* ===================== CONTACT POPUP MODAL ===================== */
.cmodal{position:fixed;inset:0;z-index:5000;display:none;align-items:center;justify-content:center;padding:24px}
.cmodal.on{display:flex}
.cmodal-back{position:absolute;inset:0;background:radial-gradient(circle at 50% 40%,rgba(250,189,21,.45),rgba(250,189,21,.16) 28%,transparent 64%),rgba(5,12,24,.7);backdrop-filter:blur(7px);animation:cmfade .35s ease}
@keyframes cmfade{from{opacity:0}to{opacity:1}}
.cmodal-win{position:relative;z-index:1;width:min(640px,100%);max-height:90vh;overflow:auto;background:var(--surface);border:1px solid var(--border-strong);border-radius:18px;box-shadow:0 40px 90px -30px rgba(0,0,0,.7),0 0 150px 4px rgba(250,189,21,.6),0 0 0 1px rgba(250,189,21,.32);padding:30px 30px 28px;animation:cmwin .85s cubic-bezier(.22,.7,.3,1),glowPulse 2.4s ease-in-out .85s infinite}
@keyframes cmwin{0%{opacity:0;transform:translateY(64px) scale(.76)}38%{opacity:1;transform:translateY(-22px) scale(1.08)}58%{transform:translateY(12px) scale(.955)}74%{transform:translateY(-8px) scale(1.03)}88%{transform:translateY(3px) scale(.99)}100%{transform:translateY(0) scale(1)}}
.cmodal-x{position:absolute;top:14px;right:16px;width:34px;height:34px;border-radius:9px;border:1px solid var(--border);background:var(--panel);color:var(--text-2);font-size:22px;line-height:1;cursor:pointer;transition:.2s;z-index:2}
.cmodal-x:hover{color:var(--text);border-color:var(--border-strong)}
.cmodal-head{margin-bottom:14px}
.cmodal-head h3{font-family:var(--font-display);font-size:26px;margin:8px 0 6px;color:var(--text)}
.cmodal-head p{color:var(--text-3);font-size:14px;margin:0;line-height:1.5}
.cmodal-chips{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.cchip{font:600 12.5px var(--font-mono);color:var(--text-2);border:1px solid var(--border-strong);border-radius:30px;padding:7px 13px;text-decoration:none;transition:.2s}
.cchip:hover{color:var(--gold);border-color:var(--gold)}
.cmodal .cform{background:transparent;border:0;padding:0;box-shadow:none;margin:0;display:block}
.cmodal-done{text-align:center;padding:22px 6px 6px}
.cmodal-check{width:64px;height:64px;border-radius:50%;margin:0 auto 14px;display:grid;place-items:center;background:rgba(61,220,132,.14);color:#3ddc84}
.cmodal-check svg{width:30px;height:30px}
.cmodal-done h3{font-family:var(--font-display);font-size:24px;margin:0 0 8px;color:var(--text)}
.cmodal-done p{color:var(--text-2);font-size:14px;margin:0 0 18px}
@media(max-width:560px){.cmodal-win{padding:24px 18px}.cmodal-head h3{font-size:22px}}

/* readable native dropdown options */
select option{background:#10233c;color:#eaf1fb}
.cform select,.cmodal select{color:var(--text)}

@keyframes glowPulse{0%,100%{box-shadow:0 40px 90px -30px rgba(0,0,0,.7),0 0 130px 0 rgba(250,189,21,.5),0 0 0 1px rgba(250,189,21,.3)}50%{box-shadow:0 40px 90px -30px rgba(0,0,0,.7),0 0 190px 10px rgba(250,189,21,.85),0 0 0 1px rgba(250,189,21,.45)}}

/* ===================== ABOUT: ANIMATED OFFICE SCENE ===================== */
.office-scene{border:1px solid var(--border-strong);border-radius:18px;background:linear-gradient(180deg,var(--surface),var(--surface-2));padding:16px;box-shadow:var(--shadow);overflow:hidden}
.office-scene svg{width:100%;height:auto;display:block;border-radius:12px}
.ofc-bob{animation:ofcBob 3.6s ease-in-out infinite}
@keyframes ofcBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.ofc-type{animation:ofcType .5s ease-in-out infinite}
@keyframes ofcType{0%,100%{transform:translateY(0)}50%{transform:translateY(2.2px)}}
.ofc-screen{animation:ofcScreen 2.2s ease-in-out infinite}
@keyframes ofcScreen{0%,100%{opacity:.72}50%{opacity:1}}
.ofc-bar{transform-box:fill-box;transform-origin:bottom;animation:ofcBar 2.8s ease-in-out infinite}
@keyframes ofcBar{0%{transform:scaleY(.3)}50%{transform:scaleY(1)}100%{transform:scaleY(.45)}}
.ofc-lamp{transform-box:fill-box;transform-origin:top center;animation:ofcSway 5s ease-in-out infinite}
@keyframes ofcSway{0%,100%{transform:rotate(-2.6deg)}50%{transform:rotate(2.6deg)}}
.ofc-plant{transform-box:fill-box;transform-origin:bottom center;animation:ofcSway 6.5s ease-in-out infinite}
.ofc-steam{transform-box:fill-box;animation:ofcSteam 2.8s ease-in-out infinite}
@keyframes ofcSteam{0%{opacity:0;transform:translateY(0) scaleX(1)}40%{opacity:.5}100%{opacity:0;transform:translateY(-16px) scaleX(.5)}}
.ofc-pop{transform-box:fill-box;transform-origin:center;animation:ofcPop 5s ease-in-out infinite}
@keyframes ofcPop{0%,70%{opacity:0;transform:translateY(10px) scale(.7)}8%,60%{opacity:1;transform:translateY(0) scale(1)}}
.ofc-cursor{animation:ofcBlink 1.1s steps(1) infinite}
@keyframes ofcBlink{0%,50%{opacity:1}51%,100%{opacity:0}}

/* ===================== ABOUT: STUDIO BACKGROUND BAND ===================== */
.studio-band{position:relative;overflow:hidden;min-height:500px;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:linear-gradient(180deg,#eef4fc,#d9e5f5)}
.studio-band .studio-bg{position:absolute;inset:0;z-index:0}
.studio-band .studio-bg svg{width:100%;height:100%;display:block}
.studio-band .studio-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(238,244,252,.96),rgba(238,244,252,.72) 26%,rgba(238,244,252,.15) 46%,transparent 62%)}
.studio-band .wrap{position:relative;z-index:2;padding-top:42px;padding-bottom:46px;text-align:center}
.studio-band .sec-head{margin:0 auto;max-width:760px}
.studio-band .sec-head h2{color:#0e2440}
.studio-band .sec-head p{color:#43577a}
@media(max-width:760px){.studio-band{min-height:430px}.studio-band .studio-scrim{background:linear-gradient(180deg,rgba(238,244,252,.97),rgba(238,244,252,.82) 42%,rgba(238,244,252,.3) 72%)}}
.ofc-flow{animation:ofcFlow 4s linear infinite}
@keyframes ofcFlow{0%{transform:translateX(0);opacity:0}10%{opacity:1}88%{opacity:1}100%{transform:translateX(820px);opacity:0}}
.ofc-gear{transform-box:fill-box;transform-origin:center;animation:ofcSpin 7s linear infinite}
.ofc-gear-r{transform-box:fill-box;transform-origin:center;animation:ofcSpin 7s linear infinite reverse}
@keyframes ofcSpin{to{transform:rotate(360deg)}}
.ofc-drop{animation:ofcDrop 3s ease-in-out infinite}
@keyframes ofcDrop{0%{transform:translateY(0);opacity:0}20%{opacity:1}80%{opacity:1}100%{transform:translateY(50px);opacity:0}}


/* ===================== ABOUT: AUTOMATION ENGINE PANEL (home-style) ===================== */
.sys-wrap{max-width:760px;margin:8px auto 0}
.sys-panel{border:1px solid #dbe5f2;border-radius:18px;background:linear-gradient(180deg,#ffffff,#eef4fc);box-shadow:0 30px 70px -30px rgba(20,45,90,.45),0 0 0 1px rgba(250,189,21,.06);overflow:hidden}
.sys-top{display:flex;align-items:center;gap:10px;padding:11px 16px;border-bottom:1px solid #e6edf6;background:#f4f8fd}
.sys-top .dots{display:flex;gap:6px}.sys-top .dots i{width:10px;height:10px;border-radius:50%;background:#ff5f57;display:block}.sys-top .dots i:nth-child(2){background:#febc2e}.sys-top .dots i:nth-child(3){background:#28c840}
.sys-top .tt{font:600 12.5px var(--font-mono);color:#46566f}
.sys-top .live{margin-left:auto;font:700 10px var(--font-mono);color:#b9831a;border:1px solid #ecd9a8;background:#fff7e6;border-radius:20px;padding:3px 9px 3px 8px;display:flex;align-items:center;gap:6px}
.sys-top .live::before{content:"";width:7px;height:7px;border-radius:50%;background:#FABD15;animation:sysdPulseDot 1.6s infinite}
@keyframes sysdPulseDot{0%{box-shadow:0 0 0 0 rgba(250,189,21,.55)}70%{box-shadow:0 0 0 7px rgba(250,189,21,0)}100%{box-shadow:0 0 0 0 rgba(250,189,21,0)}}
.sys-body{display:grid;grid-template-columns:1.05fr 1fr;gap:14px;padding:16px}
.sys-left{border:1px solid #e6edf6;border-radius:12px;background:#fbfdff;display:flex;align-items:center;justify-content:center;padding:8px}
.sys-left svg{width:100%;height:auto;display:block}
.sys-right{display:flex;flex-direction:column;gap:10px}
.sys-kpis{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sys-kpi{border:1px solid #e6edf6;border-radius:10px;background:#fff;padding:8px 10px}
.sys-kpi .l{font-size:10px;color:#8593a8;text-transform:uppercase;letter-spacing:.04em}
.sys-kpi .v{font:700 17px var(--font-display);color:#0e2440;margin-top:2px}
.sys-chart{border:1px solid #e6edf6;border-radius:10px;background:#fff;padding:10px}
.sys-bars{display:flex;align-items:flex-end;gap:5px;height:74px}
.sys-bars span{flex:1;border-radius:4px 4px 0 0;background:linear-gradient(180deg,#ffd45e,#F1A01B);transform-origin:bottom;animation:sysdBar 2.6s ease-in-out infinite alternate}
@keyframes sysdBar{0%{transform:scaleY(.35)}100%{transform:scaleY(1)}}
.sys-line{width:100%;height:46px;display:block}
.sys-line path{fill:none;stroke:#3b8fd6;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:340;stroke-dashoffset:340;animation:sysdDraw 3.6s ease-in-out infinite}
@keyframes sysdDraw{0%{stroke-dashoffset:340}55%{stroke-dashoffset:0}100%{stroke-dashoffset:0;opacity:.35}}
.sys-pipe{display:flex;align-items:center;gap:8px;padding:8px 16px 16px}
.sys-pipe .pn{font:600 10.5px var(--font-mono);color:#46566f;background:#fff;border:1px solid #e6edf6;border-radius:8px;padding:5px 9px}
.sys-pipe .pl{flex:1;height:2px;background:#e6edf6;position:relative;border-radius:2px;overflow:hidden}
.sys-pipe .pl::after{content:"";position:absolute;left:-30%;top:-2px;width:30%;height:6px;border-radius:3px;background:#FABD15;animation:sysdRun 2.2s linear infinite}
@keyframes sysdRun{to{left:130%}}
.sysd-pulse{transform-box:fill-box;transform-origin:center;animation:sysdRing 2.4s ease-out infinite}
@keyframes sysdRing{0%{transform:scale(.55);opacity:.85}100%{transform:scale(1.9);opacity:0}}
@media(max-width:720px){.sys-body{grid-template-columns:1fr}}


/* ===================== ABOUT: FUTURISTIC LIGHT BACKGROUND ===================== */
.fx-band{position:relative;overflow:hidden;min-height:440px;display:flex;align-items:center;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:linear-gradient(180deg,#f7faff,#e9f1fb)}
.fx-bg{position:absolute;inset:0;z-index:0}
.fx-bg>*{position:absolute;inset:0}
.fx-grid{background-image:linear-gradient(rgba(59,143,214,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(59,143,214,.07) 1px,transparent 1px);background-size:46px 46px;animation:fxGrid 18s linear infinite;opacity:.7}
@keyframes fxGrid{to{background-position:46px 46px}}
.fx-net svg{width:100%;height:100%;display:block;opacity:.7}
.fx-ring{transform-box:fill-box;transform-origin:center;animation:fxRing 2.6s ease-out infinite}
@keyframes fxRing{0%{transform:scale(.6);opacity:.7}100%{transform:scale(2.4);opacity:0}}
.fx-pa{animation:fxFloatA 9s ease-in-out infinite}.fx-pb{animation:fxFloatB 11s ease-in-out infinite}.fx-pc{animation:fxFloatC 13s ease-in-out infinite}
@keyframes fxFloatA{0%,100%{transform:translate(0,0)}50%{transform:translate(14px,-20px)}}
@keyframes fxFloatB{0%,100%{transform:translate(0,0)}50%{transform:translate(-16px,-14px)}}
@keyframes fxFloatC{0%,100%{transform:translate(0,0)}50%{transform:translate(10px,18px)}}
.fx-streaks{display:flex;align-items:flex-end;gap:6px;padding:0 24px;opacity:.18}
.fx-streaks span{flex:1;border-radius:3px 3px 0 0;background:linear-gradient(180deg,#FABD15,#5fa8e6);transform-origin:bottom;animation-name:fxStreak;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:alternate}
@keyframes fxStreak{0%{transform:scaleY(.3)}100%{transform:scaleY(1)}}
.fx-sheen{background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.55) 50%,transparent 58%);transform:translateX(-60%);animation:fxSheen 8s ease-in-out infinite}
@keyframes fxSheen{0%{transform:translateX(-60%)}100%{transform:translateX(60%)}}
.fx-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(60% 70% at 50% 50%,rgba(247,250,255,.86),rgba(247,250,255,.45) 55%,transparent 80%)}
.fx-band .wrap{position:relative;z-index:2;text-align:center}
.fx-band .sec-head{margin:0 auto;max-width:720px}
.fx-band .sec-head h2{color:#0e2440}
.fx-band .sec-head p{color:#41557a}
@media(max-width:760px){.fx-band{min-height:360px}.fx-scrim{background:radial-gradient(80% 80% at 50% 50%,rgba(247,250,255,.92),rgba(247,250,255,.55) 60%,transparent 90%)}}


/* ===================== ABOUT: AI NEURAL CONSTELLATION ===================== */
.ai-band{position:relative;overflow:hidden;min-height:500px;display:flex;align-items:center;border-top:1px solid #143356;border-bottom:1px solid #143356;background:radial-gradient(130% 130% at 50% 28%,#0c2640,#05101c 72%)}
.ai-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.ai-canvas{position:absolute;inset:0;display:block}
.ai-orb{position:absolute;width:640px;height:640px;border-radius:50%;left:50%;top:46%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(250,189,21,.13),transparent 62%);animation:aiOrb 12s ease-in-out infinite;pointer-events:none}
@keyframes aiOrb{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-46%,-54%) scale(1.14)}}
.ai-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(58% 72% at 50% 50%,rgba(4,14,26,.8),rgba(4,14,26,.4) 56%,transparent 82%)}
.ai-band .wrap{position:relative;z-index:2}
.ai-band .sec-head{text-align:center;margin:0 auto;max-width:680px}
.ai-band .sec-head h2{color:#eef4fd}
.ai-band .sec-head p{color:#aebfd6}
@media(max-width:760px){.ai-band{min-height:420px}}

/* ===================== SERVICES: DNA STAGE + ROTATOR + SCENARIOS ===================== */
.svc-stage{padding-top:14px}
.ss-grid{display:grid;grid-template-columns:300px 1fr;gap:34px;align-items:center}
.ss-helix{position:relative;height:440px;border-radius:18px;border:1px solid var(--border);background:radial-gradient(circle at 50% 38%,rgba(95,168,230,.07),transparent 70%)}
.ss-helix canvas{position:absolute;inset:0}
.ss-rot .kicker{margin-bottom:6px}
.ss-spot{min-height:200px}
.ss-spot.in{animation:ssIn .5s var(--ease)}
@keyframes ssIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.ss-ic{width:64px;height:64px;border-radius:16px;display:grid;place-items:center;background:var(--grad-gold);color:#0a1f38;margin-bottom:16px;box-shadow:0 12px 28px -12px rgba(250,189,21,.6)}
.ss-ic svg{width:30px;height:30px}
.ss-spot h2{font-family:var(--font-display);font-size:clamp(28px,4vw,42px);margin:0 0 10px;color:var(--text)}
.ss-spot p{color:var(--text-2);font-size:16px;max-width:460px;line-height:1.6;margin:0}
.ss-dots{display:flex;gap:8px;margin-top:22px}
.ss-dots i{width:8px;height:8px;border-radius:50%;background:var(--border-strong);transition:.3s var(--ease);cursor:default}
.ss-dots i.on{background:var(--gold);width:22px;border-radius:4px}
@media(max-width:820px){.ss-grid{grid-template-columns:1fr}.ss-helix{height:280px}}

.scn-grid{display:flex;flex-direction:column;gap:16px;margin-top:26px}
.scn{border:1px solid var(--border);border-radius:16px;background:var(--panel);padding:22px 24px;display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease)}
.scn:hover{border-color:var(--border-strong);box-shadow:0 20px 44px -24px rgba(250,189,21,.35);transform:translateY(-3px)}
.scn .ic{width:52px;height:52px;border-radius:13px;display:grid;place-items:center;background:var(--surface-2);border:1px solid var(--border);color:var(--gold)}
.scn .ic svg{width:24px;height:24px}
.scn .num{font-family:var(--font-mono);color:var(--gold);font-size:12px;letter-spacing:.05em}
.scn h3{margin:2px 0 0;font-size:19px;color:var(--text)}
.scn-story{color:var(--text-2);font-size:14.5px;line-height:1.65;margin:9px 0 11px}
.scn-story b{color:var(--text);font-weight:700}
.scn .tags{display:flex;gap:8px;flex-wrap:wrap}
.scn .tags span{font:600 11px var(--font-mono);padding:5px 10px;border-radius:100px;background:var(--surface-2);border:1px solid var(--border);color:var(--text-3)}
@media(max-width:560px){.scn{grid-template-columns:1fr}}


/* ===================== SERVICES: FULL FUTURISTIC BACKGROUND ===================== */
.svc-fx{position:relative;overflow:hidden;padding:64px 0;background:radial-gradient(120% 110% at 50% 0%,#0d2a47,#050f1b 72%);border-top:1px solid #143356;border-bottom:1px solid #143356}
.svc-fx-bg{position:absolute;inset:0;z-index:0;display:block}
.svc-fx-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(5,15,27,.32),rgba(5,15,27,.6))}
.svc-fx .wrap{position:relative;z-index:2}
.svc-fx .sec-head{text-align:center;margin:0 auto 8px;max-width:680px}
.svc-fx .sec-head h2{color:#eef4fd}
.svc-fx .sec-head p{color:#aebfd6}
.svc-fx .scn{background:rgba(11,27,46,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(120,160,210,.2)}
.svc-fx .scn:hover{border-color:rgba(250,189,21,.5);box-shadow:0 22px 50px -24px rgba(0,0,0,.65),0 0 32px -12px rgba(250,189,21,.4);transform:translateY(-3px)}
.svc-fx .scn h3{color:#eef4fd}
.svc-fx .scn-story{color:#bccbe0}
.svc-fx .scn-story b{color:#fff}
.svc-fx .scn .ic{background:rgba(255,255,255,.05);border-color:rgba(120,160,210,.25);color:#FABD15}
.svc-fx .scn .num{color:#FABD15}
.svc-fx .scn .tags span{background:rgba(255,255,255,.05);border-color:rgba(120,160,210,.2);color:#cdd9ea}


/* ===================== SERVICES: BIG FULL-SCREEN STAGE ===================== */
.svc-stage-big{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden;background:transparent;border-bottom:1px solid #143356}
.svc-stage-big>canvas{position:absolute;inset:0;z-index:0}
.svc-stage-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(48% 56% at 50% 50%,rgba(5,15,27,.7),rgba(5,15,27,.2) 60%,transparent 82%)}
.svc-stage-inner{position:relative;z-index:2;text-align:center;max-width:760px;padding:0 20px}
.svc-stage-inner .kicker{justify-content:center}
.svc-stage-inner h1{color:#eef4fd;margin:14px 0}
.svc-stage-inner p{color:#aebfd6;font-size:17px;max-width:600px;margin:0 auto}
.scroll-hint{margin-top:42px;display:inline-flex;flex-direction:column;align-items:center;gap:4px;color:#7e93b4;font:600 11px var(--font-mono);letter-spacing:.18em;text-transform:uppercase;animation:scrollB 2s ease-in-out infinite}
.scroll-hint svg{width:18px;height:18px}
@keyframes scrollB{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}


/* services explore button */
.svc-explore{margin-top:34px;font-size:15px;padding:14px 26px;box-shadow:0 14px 40px -12px rgba(250,189,21,.6)}
.svc-explore svg{width:18px;height:18px}
html{scroll-behavior:smooth}


/* ===================== SERVICES EXPLORER (pop-up windows from the back) ===================== */
.svc-explorer{position:fixed;inset:0;z-index:4000;display:none;overflow-x:hidden;overflow-y:auto;padding:64px 24px 48px}
.svc-explorer.open{display:block}
.se-scrim{position:fixed;inset:0;z-index:0;background:rgba(4,12,24,.74);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:seScrim .4s ease}
@keyframes seScrim{from{opacity:0}to{opacity:1}}
.se-close{position:fixed;top:18px;right:22px;z-index:3;width:42px;height:42px;border-radius:11px;border:1px solid #244a6e;background:rgba(12,30,50,.8);color:#cfe0f5;font-size:26px;line-height:1;cursor:pointer;transition:.2s}
.se-close:hover{color:#fff;border-color:#FABD15}
.se-head{position:relative;z-index:3;text-align:center;max-width:680px;margin:0 auto 8px}
.se-head h2{color:#eef4fd}
.se-grid{position:relative;z-index:3;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:1100px;margin:26px auto 0;perspective:1400px}
.se-win{background:linear-gradient(180deg,#10294421,#0a1d33);background:linear-gradient(180deg,rgba(18,42,70,.92),rgba(9,26,46,.95));border:1px solid #20446a;border-radius:16px;overflow:hidden;box-shadow:0 34px 80px -34px rgba(0,0,0,.8);opacity:0}

.se-top{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid #1c3e60;background:rgba(8,22,40,.7)}
.se-top .dots{display:flex;gap:6px}.se-top .dots i{width:9px;height:9px;border-radius:50%;background:#ff5f57;display:block}.se-top .dots i:nth-child(2){background:#febc2e}.se-top .dots i:nth-child(3){background:#28c840}
.se-top .se-tt{font:600 11px var(--font-mono);color:#7e93b4;letter-spacing:.04em}
.se-body{padding:20px}
.se-ic{width:54px;height:54px;border-radius:14px;display:grid;place-items:center;background:var(--grad-gold);color:#0a1f38;margin-bottom:14px;box-shadow:0 12px 26px -12px rgba(250,189,21,.6)}
.se-ic svg{width:26px;height:26px}
.se-body h3{margin:0 0 8px;font-size:19px;color:#eef4fd}
.se-body p{margin:0 0 14px;font-size:14px;line-height:1.6;color:#b9c8de}
.se-body .tags{display:flex;gap:8px;flex-wrap:wrap}
.se-body .tags span{font:600 11px var(--font-mono);padding:5px 10px;border-radius:100px;background:rgba(255,255,255,.05);border:1px solid #20446a;color:#cdd9ea}
@media(max-width:900px){.se-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.se-grid{grid-template-columns:1fr}}

.se-canvas{position:fixed;inset:0;z-index:1;pointer-events:none}
.se-win{will-change:transform,opacity}


/* ===================== SERVICES EXPLORER: FLOATING NODES ===================== */
.se-grid{align-items:center}
.se-node{display:flex;align-items:center;justify-content:center;opacity:0;background:none;border:0;box-shadow:none}
.se-inner{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;animation:seFloat 4.6s ease-in-out infinite;will-change:transform}
@keyframes seFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.se-orb{position:relative;width:88px;height:88px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 50% 38%,rgba(250,189,21,.30),rgba(250,189,21,.05) 70%);box-shadow:0 0 40px -6px rgba(250,189,21,.55)}
.se-orb svg{width:36px;height:36px;color:#FABD15;position:relative;z-index:1}
.se-ring{position:absolute;inset:-7px;border-radius:50%;border:1.5px dashed rgba(250,189,21,.6);animation:seSpin 8s linear infinite}
.se-ring::after{content:"";position:absolute;inset:8px;border-radius:50%;border:1px solid rgba(95,168,230,.35);animation:seSpin 5s linear infinite reverse}
@keyframes seSpin{to{transform:rotate(360deg)}}
.se-label{font-family:var(--font-display);font-weight:700;font-size:22px;color:#eef4fd;text-shadow:0 2px 16px rgba(0,0,0,.55),0 0 22px rgba(95,168,230,.3)}
.se-sub{font:600 11px var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:#FABD15;opacity:.88}

.svc-explorer .se-grid{grid-template-columns:repeat(4,1fr);max-width:1180px;gap:52px 22px}
.svc-explorer .se-orb{width:74px;height:74px}.svc-explorer .se-orb svg{width:30px;height:30px}
.svc-explorer .se-label{font-size:19px}
@media(max-width:900px){.svc-explorer .se-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.svc-explorer .se-grid{grid-template-columns:repeat(2,1fr)}}


/* ===================== SERVICE DETAIL POPUP ===================== */
.se-node{cursor:pointer}
.se-node:focus-visible{outline:2px solid var(--gold);outline-offset:6px;border-radius:12px}
.sd-modal{position:fixed;inset:0;z-index:4500;display:none}
.sd-modal.open{display:block}
.sd-back{position:fixed;inset:0;background:rgba(3,10,20,.8);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:cmfade .3s ease}
.sd-win{position:relative;z-index:1;max-width:920px;margin:40px auto;background:linear-gradient(180deg,#0e2740,#0a1b30);border:1px solid #20446a;border-radius:18px;box-shadow:0 50px 100px -30px rgba(0,0,0,.85);max-height:calc(100vh - 80px);overflow-y:auto;animation:sdIn .45s cubic-bezier(.22,1.25,.4,1)}
@keyframes sdIn{from{opacity:0;transform:translateY(34px) scale(.96)}to{opacity:1;transform:none}}
.sd-x{position:absolute;top:14px;right:16px;z-index:3;width:38px;height:38px;border-radius:10px;border:1px solid #2b557d;background:rgba(10,28,48,.85);color:#cfe0f5;font-size:24px;line-height:1;cursor:pointer;transition:.2s}
.sd-x:hover{color:#fff;border-color:var(--gold)}
.sd-hero{display:flex;gap:18px;align-items:center;padding:30px 32px;background:linear-gradient(120deg,rgba(250,189,21,.18),rgba(23,99,168,.2));border-bottom:1px solid #1c3e60}
.sd-hero-ic{width:64px;height:64px;border-radius:16px;display:grid;place-items:center;background:var(--grad-gold);color:#0a1f38;flex:none;box-shadow:0 12px 30px -12px rgba(250,189,21,.7)}
.sd-hero-ic svg{width:32px;height:32px}
.sd-hero h2{margin:2px 0 4px;font-family:var(--font-display);font-size:27px;color:#fff}
.sd-hero p{margin:0;color:#bcd0ea;font-size:14px}
.sd-eyebrow{font:700 11px var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:#FABD15}
.sd-body{padding:26px 32px 30px}
.sd-sec{margin-bottom:22px}
.sd-sec h3{font-size:16px;color:#eef4fd;margin:0 0 9px}
.sd-sec>p{color:#b9c8de;font-size:14.5px;line-height:1.65;margin:0}
.sd-caps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:11px}
.sd-caps li{display:flex;gap:10px;align-items:flex-start;color:#cdd9ea;font-size:13.5px;line-height:1.4}
.sd-caps li::before{content:"✓";flex:none;width:18px;height:18px;border-radius:6px;background:var(--grad-gold);color:#0a1f38;display:grid;place-items:center;font-size:11px;font-weight:800;margin-top:1px}
.sd-case{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:stretch;background:rgba(255,255,255,.03);border:1px solid #1c3e60;border-radius:14px;padding:16px;margin-top:4px}
.sd-case-media{position:relative;border-radius:10px;overflow:hidden;min-height:190px;background:linear-gradient(135deg,#13314f,#0a1f38)}
.sd-case-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent,rgba(8,22,40,.35))}
.sd-case-media img{width:100%;height:100%;object-fit:cover;display:block;min-height:190px;position:relative;z-index:1}
.sd-case-text{display:flex;flex-direction:column;justify-content:center}
.sd-case-text h3{margin:6px 0 8px;color:#eef4fd;font-size:18px}
.sd-case-text p{color:#b9c8de;font-size:13.8px;line-height:1.6;margin:0 0 12px}
.sd-case-text .tags{display:flex;gap:8px;flex-wrap:wrap}
.sd-case-text .tags span{font:600 11px var(--font-mono);padding:5px 10px;border-radius:100px;background:rgba(255,255,255,.05);border:1px solid #20446a;color:#cdd9ea}
.sd-cta{margin-top:24px;text-align:center}
@media(max-width:720px){.sd-caps{grid-template-columns:1fr}.sd-case{grid-template-columns:1fr}.sd-win{margin:16px;max-height:calc(100vh - 32px)}.sd-hero{padding:24px 20px}.sd-body{padding:22px 20px}}

/* ===================== MOBILE SAFETY & POLISH ===================== */
img{max-width:100%;height:auto}
@media(max-width:820px){
  html,body{max-width:100%;overflow-x:hidden}
  /* phones skip the 3D hero, so give the hero a rich background of its own */
  header.hero{background:radial-gradient(circle at 50% 26%,#103056 0%,#08182c 68%,#050f1e 100%)}
  .hero-fx{display:none}
  /* keep wide showcase / dashboard mockups from spilling off-screen */
  .showcase .appwrap{max-width:100%;overflow:hidden}
  .appwin{overflow:hidden}
  .svc-stage-big{min-height:auto}
}
@media(max-width:560px){
  .wrap{padding-left:18px;padding-right:18px}
  header.hero h1{font-size:clamp(32px,9vw,44px)}
  .cmodal{padding:14px}
  .cmodal-win{max-height:92vh;padding:24px 20px}
  .sd-win{margin:14px;max-height:calc(100vh - 28px)}
}

/* ===================== BLOG ===================== */
.wrap-narrow{max-width:760px;margin:0 auto;padding:0 24px}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:14px}
.blog-card{display:flex;flex-direction:column;gap:10px;padding:24px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--panel);text-decoration:none;color:var(--text);transition:transform .25s var(--ease),border-color .25s,box-shadow .25s}
.blog-card:hover{transform:translateY(-4px);border-color:var(--gold);box-shadow:var(--shadow)}
.blog-card-tag{font:700 11px var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.blog-card h3{font-family:var(--font-display);font-size:20px;line-height:1.25;margin:0}
.blog-card p{color:var(--text-2);font-size:14px;margin:0;flex:1}
.blog-card-meta{font-size:12px;color:var(--text-3);font-family:var(--font-mono)}
.blog-article{padding:26px 0 80px}
.blog-article p,.blog-article li{color:var(--text-2);font-size:17px;line-height:1.8}
.blog-article h2{font-family:var(--font-display);font-size:26px;margin:38px 0 12px;color:var(--text)}
.blog-article h3{font-family:var(--font-display);font-size:20px;margin:26px 0 10px;color:var(--text)}
.blog-article ul{padding-left:22px;margin:12px 0}
.blog-article li{margin:6px 0}
.blog-article blockquote{margin:24px 0;padding:14px 20px;border-left:3px solid var(--gold);background:var(--panel);border-radius:0 10px 10px 0;color:var(--text);font-size:17px}
.blog-article img{border-radius:var(--r-md);margin:22px 0;width:100%}
.blog-meta{color:var(--text-3);font-size:14px;font-family:var(--font-mono);margin-top:8px}
.blog-cta{margin-top:42px;padding:28px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--panel);text-align:center}
.blog-cta h3{font-family:var(--font-display);font-size:20px;margin:0 0 14px}
@media(max-width:900px){.blog-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.blog-grid{grid-template-columns:1fr}}


/* ===================== BLOG — COLORFUL STICKERS ===================== */
.blog-hero-art{width:100%;height:auto;border-radius:16px;margin:8px 0 28px;border:1px solid var(--border);display:block}
.sign{display:flex;gap:16px;align-items:flex-start;margin:32px 0 0}
.sign-ico{flex:none;width:54px;height:54px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(140deg,var(--c1),var(--c2));box-shadow:0 12px 24px -10px var(--c1);margin-top:4px}
.sign-ico svg{width:27px;height:27px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sign-body{flex:1;min-width:0}
.sign-body h2{margin:2px 0 8px !important}
.blog-article .todo{display:flex;gap:9px;align-items:center;background:rgba(61,220,132,.12);border:1px solid rgba(61,220,132,.35);color:#9af0c4;font-size:14.5px;line-height:1.5;border-radius:11px;padding:9px 13px;margin:12px 0 0}
.blog-article .todo svg{width:17px;height:17px;flex:none;stroke:#3ddc84;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.cmp-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:20px 0}
.cmp-card{border-radius:15px;padding:20px;border:1px solid var(--border)}
.cmp-card h4{margin:0 0 14px;font-family:var(--font-display);font-size:16px;display:flex;align-items:center;gap:9px}
.cmp-card ul{margin:0;padding:0;list-style:none}
.cmp-card li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;margin:10px 0;color:var(--text-2);line-height:1.5}
.cmp-card li svg{width:18px;height:18px;flex:none;margin-top:2px;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.cmp-bad{background:rgba(255,107,107,.06);border-color:rgba(255,107,107,.30)}
.cmp-bad h4{color:#ff9a9a}.cmp-bad li svg{stroke:#ff7a7a}
.cmp-good{background:rgba(61,220,132,.07);border-color:rgba(61,220,132,.34)}
.cmp-good h4{color:#76e8a8}.cmp-good li svg{stroke:#3ddc84}
.faq-q{display:flex;gap:11px;align-items:center;margin-top:24px}
.faq-q .qmark{flex:none;width:28px;height:28px;border-radius:9px;background:var(--grad-gold);color:#0a1f38;display:grid;place-items:center;font-weight:800;font-size:15px;font-family:var(--font-display)}
.faq-q h3{margin:0 !important}
@media(max-width:600px){.cmp-grid{grid-template-columns:1fr}}