/* Edge Technology Construction — site design system
   Night base, signal orange primary, cold blue secondary. Michroma display, Sora body, JetBrains Mono data. */
:root{
  --bg:#04080F; --bg-2:#070D19; --surf:#0B1324; --surf-2:#101B31; --panel:rgba(12,20,37,.78);
  --fg:#EEF2FF; --fg-2:#C5CEE4; --muted:#8E9BBA; --dim:#7E8BAA;
  --line:rgba(130,170,255,.14); --line-2:rgba(130,170,255,.26);
  --acc:#FF7A1A; --acc-2:#FF9A4D; --acc-glow:rgba(255,122,26,.55); --on-acc:#1A0A00;
  --blue:#6FA8FF; --ok:#3DDC97; --warn:#FFC24B; --bad:#FF5D73;
  --display:"Michroma","Eurostile","Arial Black",sans-serif;
  --body:"Sora","Segoe UI",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --r:16px; --gap:14px; --nav-h:74px;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; background:var(--bg); -webkit-text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--fg); font-family:var(--body); font-size:16.5px; line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden}
img,svg,canvas{display:block; max-width:100%}
a{color:inherit} p{margin:0} h1,h2,h3,h4{margin:0; text-wrap:balance; font-weight:400} ul,ol{margin:0; padding:0}
::selection{background:var(--acc); color:var(--on-acc)}
:focus-visible{outline:2px solid var(--acc); outline-offset:3px; border-radius:6px}
.wrap{max-width:1280px; margin:0 auto; padding-inline:clamp(16px,4vw,48px)}
.skip{position:absolute; left:12px; top:-60px; z-index:100; background:var(--acc); color:var(--on-acc); padding:10px 16px; border-radius:10px; font-weight:600; text-decoration:none}
.skip:focus{top:12px}
.mono{font-family:var(--mono)}
.acc{color:var(--acc)} .blue{color:var(--blue)}

/* ---------- NAV ---------- */
.nav{position:fixed; top:0; left:0; right:0; z-index:50; transition:background .35s, border-color .35s, backdrop-filter .35s; border-bottom:1px solid transparent; padding-top:env(safe-area-inset-top,0px)}
.nav.solid{background:rgba(4,8,15,.78); backdrop-filter:blur(16px) saturate(140%); -webkit-backdrop-filter:blur(16px) saturate(140%); border-bottom-color:var(--line)}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:var(--nav-h)}
.logo{display:flex; align-items:center; gap:12px; text-decoration:none; min-height:44px; flex:none}
.logo .lw{display:flex; flex-direction:column; line-height:1.05}
.logo b{font-family:"Archivo",Arial,sans-serif; font-weight:800; font-size:18px; letter-spacing:.01em}
.logo .l1,.logo .l2{font-family:var(--mono); font-size:9.5px; letter-spacing:.32em}
.logo .l1{color:var(--acc)} .logo .l2{color:#8FA3C0}
.links{display:flex; align-items:center; gap:2px}
.links a{text-decoration:none; color:var(--muted); font-size:14.5px; padding:10px 13px; min-height:44px; display:inline-flex; align-items:center; border-radius:999px; transition:color .2s}
.links a:hover{color:var(--fg)}
.links a[aria-current="page"]{color:var(--fg)}
.links a[aria-current="page"]::after{content:""; width:5px; height:5px; border-radius:50%; background:var(--acc); margin-left:7px; box-shadow:0 0 8px var(--acc)}
.links .portal{border:1px solid var(--line-2); color:var(--fg); margin-left:8px; padding-inline:16px; gap:8px}
.links .portal:hover{border-color:var(--acc)}
.links .portal i{width:7px; height:7px; border-radius:50%; background:var(--ok); box-shadow:0 0 8px var(--ok)}
.burger{display:none; width:46px; height:46px; border-radius:12px; border:1px solid var(--line-2); background:rgba(4,8,15,.6); color:var(--fg); cursor:pointer; align-items:center; justify-content:center}
.burger span,.burger span::before,.burger span::after{display:block; width:18px; height:2px; background:currentColor; border-radius:2px; position:relative; transition:transform .3s, background .3s}
.burger span::before,.burger span::after{content:""; position:absolute; left:0}
.burger span::before{top:-6px} .burger span::after{top:6px}
.nav.open .burger span{background:transparent}
.nav.open .burger span::before{transform:translateY(6px) rotate(45deg)}
.nav.open .burger span::after{transform:translateY(-6px) rotate(-45deg)}
@media (max-width:1120px){
  .burger{display:inline-flex}
  .links{position:fixed; inset:calc(var(--nav-h) + env(safe-area-inset-top,0px)) 0 0 0; flex-direction:column; align-items:stretch; gap:0; padding:12px clamp(16px,4vw,48px) 24px; background:rgba(4,8,15,.97); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-bottom:1px solid var(--line); transform:translateY(-8px); opacity:0; visibility:hidden; transition:opacity .25s, transform .25s, visibility .25s; overflow:auto}
  .nav.open .links{opacity:1; transform:none; visibility:visible}
  .nav.open{background:rgba(4,8,15,.97)}
  .links a{font-size:18px; padding:14px 4px; border-radius:0; border-bottom:1px solid var(--line)}
  .links .portal{margin:16px 0 0; justify-content:center; border-radius:999px; border:1px solid var(--line-2)}
}

/* ---------- BUTTONS ---------- */
.btn{position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:54px; padding:0 26px; border-radius:999px; font:inherit; font-weight:600; font-size:15.5px; text-decoration:none; border:1px solid transparent; cursor:pointer; transition:background .2s, border-color .2s, box-shadow .3s, transform .2s; white-space:nowrap}
.btn svg{width:18px; height:18px; transition:transform .25s}
.btn:hover svg{transform:translateX(3px)}
.btn-p{background:var(--acc); color:var(--on-acc); box-shadow:0 0 0 1px rgba(255,154,77,.4) inset, 0 10px 40px -10px var(--acc-glow)}
.btn-p:hover{background:var(--acc-2); box-shadow:0 0 0 1px rgba(255,180,120,.6) inset, 0 14px 50px -8px var(--acc-glow)}
.btn-g{border-color:var(--line-2); color:var(--fg); background:rgba(4,8,15,.45); backdrop-filter:blur(6px)}
.btn-g:hover{border-color:var(--acc)}
.btn-sm{min-height:44px; padding:0 18px; font-size:14.5px}
.actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:34px}
@media (max-width:520px){ .actions .btn{width:100%} }

/* ---------- TYPE ---------- */
.eyebrow{display:inline-flex; align-items:center; gap:10px; font-family:var(--mono); color:var(--acc); font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; margin-bottom:22px}
.eyebrow::before{content:""; width:22px; height:1px; background:currentColor}
.h-xl{font-family:var(--display); font-size:clamp(32px,5.6vw,82px); line-height:1.06; letter-spacing:-.01em}
.h-lg{font-family:var(--display); font-size:clamp(28px,4.2vw,58px); line-height:1.1}
.h-md{font-family:var(--display); font-size:clamp(23px,2.9vw,40px); line-height:1.18}
.h-sm{font-family:var(--display); font-size:15px; letter-spacing:.04em; line-height:1.4}
.lede{color:var(--fg-2); font-size:clamp(17px,1.5vw,20px); max-width:38em; margin-top:24px; line-height:1.6}
.muted{color:var(--muted)}
.grad{background:linear-gradient(100deg,var(--acc) 10%,#FFC08A 50%,var(--blue) 95%); -webkit-background-clip:text; background-clip:text; color:transparent}

/* ---------- SECTIONS ---------- */
.sec{padding-block:clamp(80px,11vw,150px); position:relative}
.sec.tight{padding-block:clamp(56px,7vw,96px)}
.sec-h{display:grid; grid-template-columns:minmax(0,1fr); gap:18px; margin-bottom:clamp(36px,5vw,60px)}
@media (min-width:960px){ .sec-h.split{grid-template-columns:minmax(0,7fr) minmax(0,5fr); align-items:end; gap:48px} }
.sec-h p{color:var(--muted); font-size:17.5px; max-width:34em}
.divider{height:1px; background:linear-gradient(90deg,transparent,var(--line-2),transparent)}
.glow-top::before{content:""; position:absolute; left:50%; top:0; width:min(900px,90vw); height:1px; transform:translateX(-50%); background:linear-gradient(90deg,transparent,var(--acc),transparent); opacity:.5}

/* ---------- HOME HERO ---------- */
.hero{position:relative; height:clamp(680px,100svh,1040px); min-height:620px; overflow:hidden; perspective:900px; perspective-origin:50% 45%; background:radial-gradient(90% 70% at 50% 40%, #0D1A33 0%, var(--bg) 70%)}
.floor{position:absolute; left:-50%; right:-50%; bottom:-10%; height:70%; transform:rotateX(78deg); transform-origin:50% 100%; background-image:linear-gradient(rgba(255,122,26,.18) 1px, transparent 1px), linear-gradient(90deg, rgba(255,122,26,.18) 1px, transparent 1px); background-size:80px 80px; -webkit-mask-image:linear-gradient(to top,#000 10%,transparent 85%); mask-image:linear-gradient(to top,#000 10%,transparent 85%); animation:floor 3s linear infinite}
@keyframes floor{to{background-position:0 80px}}
.horizon{position:absolute; left:0; right:0; top:58%; height:2px; background:linear-gradient(90deg,transparent,rgba(255,122,26,.7),transparent); filter:blur(1px); box-shadow:0 0 60px 10px rgba(255,122,26,.25); opacity:.6}
.world{position:absolute; inset:0; transform-style:preserve-3d}
.scr{position:absolute; left:50%; top:50%; width:260px; margin:-80px 0 0 -130px; padding:14px 16px 12px; background:var(--panel); border:1px solid var(--line-2); border-radius:12px; box-shadow:0 0 40px -10px rgba(255,122,26,.35); will-change:transform,opacity; backface-visibility:hidden}
.scr .t{font-size:11.5px; color:var(--muted); display:flex; justify-content:space-between; gap:8px}
.scr .t b{color:var(--acc); font-weight:500; font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase}
.scr .v{font-family:var(--display); font-size:22px; margin-top:4px; font-variant-numeric:tabular-nums}
.scr canvas{width:100%; height:56px; margin-top:6px}
.scrim{position:absolute; inset:0; pointer-events:none; background:radial-gradient(46% 42% at 50% 48%, rgba(4,8,15,.9) 0%, rgba(4,8,15,.55) 58%, transparent 100%), linear-gradient(to bottom, rgba(4,8,15,.7) 0%, transparent 20%, transparent 72%, var(--bg) 100%)}
.hero-copy{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:var(--nav-h) 16px 40px; z-index:5}
.hero-copy .eyebrow{margin-bottom:26px}
.hero-copy .eyebrow::after{content:""; width:22px; height:1px; background:currentColor}
.hero h1{max-width:14.5em; text-shadow:0 4px 40px rgba(0,0,0,.6)}
.hero .lede{margin-inline:auto; text-align:center}
.hero .actions{justify-content:center}
.hero-foot{position:absolute; left:0; right:0; bottom:22px; z-index:5; display:flex; justify-content:center; gap:12px 28px; flex-wrap:wrap; padding-inline:16px; font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; color:var(--muted); text-transform:uppercase}
.hero-foot span{display:inline-flex; align-items:center; gap:8px}
.hero-foot span::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--ok); box-shadow:0 0 8px var(--ok)}
@media (max-width:640px){ .hero-foot .x{display:none} }

/* ---------- PAGE HERO ---------- */
.phero{position:relative; overflow:hidden; perspective:700px; padding:calc(var(--nav-h) + clamp(64px,9vw,120px)) 0 clamp(64px,8vw,110px); background:radial-gradient(70% 90% at 50% 0%, #0D1C38 0%, var(--bg) 70%)}
.phero::after{content:""; position:absolute; left:-50%; right:-50%; bottom:-30%; height:80%; transform:rotateX(76deg); transform-origin:50% 100%; background-image:linear-gradient(rgba(255,122,26,.15) 1px,transparent 1px),linear-gradient(90deg,rgba(255,122,26,.15) 1px,transparent 1px); background-size:70px 70px; -webkit-mask-image:linear-gradient(to top,#000 5%,transparent 80%); mask-image:linear-gradient(to top,#000 5%,transparent 80%); animation:floor2 3s linear infinite; pointer-events:none}
@keyframes floor2{to{background-position:0 70px}}
.phero .wrap{position:relative; z-index:1}
.phero h1{max-width:15em}
.phero .meta{display:flex; flex-wrap:wrap; gap:10px; margin-top:34px}
.chip{display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border:1px solid var(--line-2); border-radius:999px; font-size:13px; color:var(--fg-2); background:rgba(11,19,36,.6); backdrop-filter:blur(6px)}
.chip i{width:6px; height:6px; border-radius:50%; background:var(--acc)}

/* ---------- STATS ---------- */
.stats{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border:1px solid var(--line); border-radius:var(--r); background:linear-gradient(180deg,var(--bg-2),var(--bg)); overflow:hidden}
@media (min-width:900px){ .stats{grid-template-columns:repeat(4,minmax(0,1fr))} }
.stat{padding:clamp(22px,3vw,34px); border-right:1px solid var(--line); border-bottom:1px solid var(--line); min-width:0}
.stat:nth-child(2n){border-right:0}
@media (min-width:900px){ .stat{border-bottom:0} .stat:nth-child(2n){border-right:1px solid var(--line)} .stat:last-child{border-right:0} }
@media (max-width:899px){ .stat:nth-last-child(-n+2){border-bottom:0} }
.stat b{display:block; font-family:var(--display); font-weight:400; font-size:clamp(28px,3.6vw,46px); line-height:1; font-variant-numeric:tabular-nums; color:var(--fg)}
.stat b small{font-size:.5em; color:var(--acc); margin-left:4px}
.stat>span{display:block; color:var(--muted); font-size:14px; margin-top:12px; line-height:1.45}

/* ---------- PIPELINE ---------- */
.pipe{display:grid; grid-template-columns:minmax(0,1fr); gap:var(--gap); position:relative}
@media (min-width:960px){ .pipe{grid-template-columns:repeat(4,minmax(0,1fr))} }
.pipe .st{position:relative; background:var(--surf); border:1px solid var(--line); border-radius:var(--r); padding:26px; min-width:0; overflow:hidden}
.pipe .st .n{font-family:var(--mono); font-size:12px; color:var(--acc); letter-spacing:.14em}
.pipe .st h3{font-family:var(--display); font-size:18px; margin:14px 0 10px}
.pipe .st p{color:var(--muted); font-size:15px}
.pipe .st .vis{height:86px; margin:-4px -6px 16px; border-radius:10px; background:var(--bg-2); border:1px solid var(--line); position:relative; overflow:hidden}
.pipe .st::after{content:""; position:absolute; inset:auto 0 0 0; height:2px; background:linear-gradient(90deg,transparent,var(--acc),transparent); transform:translateX(-100%); animation:sweep 4s ease-in-out infinite}
.pipe .st:nth-child(2)::after{animation-delay:1s} .pipe .st:nth-child(3)::after{animation-delay:2s} .pipe .st:nth-child(4)::after{animation-delay:3s}
@keyframes sweep{0%{transform:translateX(-100%)} 25%,100%{transform:translateX(100%)}}

/* ---------- CARDS ---------- */
.grid{display:grid; gap:var(--gap)}
.g2{grid-template-columns:minmax(0,1fr)} .g3{grid-template-columns:minmax(0,1fr)} .g4{grid-template-columns:minmax(0,1fr)}
@media (min-width:760px){ .g2,.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1080px){ .g3{grid-template-columns:repeat(3,minmax(0,1fr))} .g4{grid-template-columns:repeat(4,minmax(0,1fr))} }
.card{position:relative; background:var(--surf); border:1px solid var(--line); border-radius:var(--r); padding:clamp(22px,2.4vw,30px); min-width:0; transition:border-color .25s, transform .25s, box-shadow .3s; overflow:hidden; isolation:isolate}
.card::before{content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(400px circle at var(--mx,50%) var(--my,0%), rgba(255,122,26,.10), transparent 45%); opacity:0; transition:opacity .3s}
.card:hover{border-color:rgba(255,122,26,.55); transform:translateY(-3px); box-shadow:0 20px 50px -24px rgba(255,122,26,.45)}
.card:hover::before{opacity:1}
.card .ic{width:46px; height:46px; border-radius:12px; display:grid; place-items:center; background:rgba(255,122,26,.1); border:1px solid rgba(255,122,26,.3); color:var(--acc); margin-bottom:20px}
.card .ic svg{width:22px; height:22px}
.card h3{font-family:var(--display); font-size:16px; letter-spacing:.03em; line-height:1.4}
.card p{color:var(--muted); margin-top:10px; font-size:15.5px}
.card .k{font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--acc)}
.card a.more{display:inline-flex; align-items:center; gap:8px; margin-top:18px; color:var(--fg); font-weight:600; font-size:14.5px; text-decoration:none}
.card a.more:hover{color:var(--acc)}
.ul{list-style:none; margin-top:18px; display:flex; flex-direction:column; gap:9px}
.ul li{display:flex; gap:11px; align-items:flex-start; font-size:15px; color:var(--fg-2)}
.ul li::before{content:""; flex:none; width:7px; height:7px; margin-top:9px; border-radius:2px; background:var(--acc); transform:rotate(45deg)}
.card.feat{background:linear-gradient(160deg,#13213D 0%,var(--surf) 55%); border-color:rgba(255,122,26,.35)}
.tag{display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; padding:5px 10px; border-radius:999px; border:1px solid var(--line-2); color:var(--fg-2)}
.tag.live{color:var(--ok); border-color:rgba(61,220,151,.35)}
.tag.live::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--ok); box-shadow:0 0 8px var(--ok); animation:pulse 2s infinite}
@keyframes pulse{50%{opacity:.35}}

/* ---------- LIVE DEMO DASHBOARD ---------- */
.demo{display:grid; grid-template-columns:minmax(0,1fr); gap:24px}
@media (min-width:1080px){ .demo{grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:40px; align-items:start} }
.ind-pick{display:flex; flex-wrap:wrap; gap:8px; margin-top:28px}
.ind-pick button{font:inherit; font-size:14px; color:var(--fg-2); background:transparent; border:1px solid var(--line-2); border-radius:999px; padding:0 16px; min-height:42px; cursor:pointer; transition:all .2s}
.ind-pick button:hover{border-color:var(--acc); color:var(--fg)}
.ind-pick button[aria-pressed="true"]{background:var(--acc); border-color:var(--acc); color:var(--on-acc); font-weight:600}
.dash{background:linear-gradient(180deg,#0C1529,#070D19); border:1px solid var(--line-2); border-radius:20px; padding:clamp(14px,2vw,22px); box-shadow:0 40px 120px -40px rgba(255,122,26,.35), 0 0 0 1px rgba(255,255,255,.02) inset; min-width:0}
.dash-top{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; padding:2px 4px 14px; border-bottom:1px solid var(--line); margin-bottom:14px}
.dash-top .ttl{font-family:var(--display); font-size:14px; letter-spacing:.04em}
.dash-top .ttl small{display:block; font-family:var(--mono); font-size:11px; color:var(--muted); letter-spacing:.08em; margin-top:4px; text-transform:uppercase}
.dash-top .dots{display:flex; gap:6px} .dash-top .dots i{width:9px; height:9px; border-radius:50%; background:var(--line-2)} .dash-top .dots i:first-child{background:var(--acc)}
.kpis{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
@media (min-width:700px){ .kpis{grid-template-columns:repeat(4,minmax(0,1fr))} }
.kpi{background:rgba(255,255,255,.02); border:1px solid var(--line); border-radius:12px; padding:14px; min-width:0}
.kpi small{display:block; font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.kpi b{display:block; font-family:var(--display); font-weight:400; font-size:clamp(18px,2vw,24px); margin-top:6px; font-variant-numeric:tabular-nums; white-space:nowrap}
.kpi .d{font-family:var(--mono); font-size:11.5px; margin-top:6px; display:block}
.kpi .d.up{color:var(--ok)} .kpi .d.dn{color:var(--bad)}
.dash-body{display:grid; grid-template-columns:minmax(0,1fr); gap:10px; margin-top:10px}
@media (min-width:700px){ .dash-body{grid-template-columns:minmax(0,8fr) minmax(0,4fr)} }
.pane{background:rgba(255,255,255,.02); border:1px solid var(--line); border-radius:12px; padding:14px; min-width:0}
.pane h4{font-size:12.5px; color:var(--muted); font-weight:400; display:flex; justify-content:space-between; gap:8px}
.pane h4 span{font-family:var(--mono); font-size:11px; color:var(--acc)}
.pane canvas{width:100%; height:200px; margin-top:10px}
.bars{display:flex; flex-direction:column; gap:12px; margin-top:14px}
.bars div{font-size:12.5px; color:var(--fg-2)}
.bars div span{display:flex; justify-content:space-between; margin-bottom:5px} .bars div span em{font-style:normal; font-family:var(--mono); color:var(--muted)}
.bars div i{display:block; height:6px; border-radius:6px; background:linear-gradient(90deg,var(--acc),#FFB27A); transform-origin:left; transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.alerts{margin-top:10px; display:flex; flex-direction:column; gap:8px}
.alert{display:flex; gap:10px; align-items:flex-start; font-size:13px; color:var(--fg-2); background:rgba(255,255,255,.02); border:1px solid var(--line); border-radius:10px; padding:10px 12px}
.alert i{flex:none; width:8px; height:8px; border-radius:50%; margin-top:6px}
.alert .w{background:var(--warn)} .alert .o{background:var(--ok)} .alert .b{background:var(--bad)}
.dash-foot{font-family:var(--mono); font-size:11px; color:var(--dim); margin-top:12px; display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; letter-spacing:.04em}

/* ---------- SPLIT FEATURE ---------- */
.split{display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(32px,5vw,72px); align-items:center}
@media (min-width:1000px){ .split{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .split.rev>:first-child{order:2} }
.checks{list-style:none; display:grid; gap:14px; margin-top:30px}
.checks li{display:grid; grid-template-columns:28px minmax(0,1fr); gap:12px; align-items:start}
.checks li svg{width:22px; height:22px; color:var(--acc); margin-top:2px}
.checks b{display:block; font-weight:600; color:var(--fg)}
.checks span{color:var(--muted); font-size:15px}

/* energy console visual */
.console{background:#050B16; border:1px solid var(--line-2); border-radius:20px; overflow:hidden; box-shadow:0 40px 120px -40px rgba(111,168,255,.3)}
.console .bar{display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--line); font-family:var(--mono); font-size:11.5px; color:var(--muted); letter-spacing:.06em}
.console .bar i{width:9px; height:9px; border-radius:50%; background:var(--line-2)} .console .bar i:first-child{background:var(--acc)}
.console .bar span{margin-left:auto}
.console .body{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
@media (max-width:560px){ .console .body{grid-template-columns:minmax(0,1fr)} .console .wb{border-right:0!important; border-bottom:1px solid var(--line)} }
.console .wb{border-right:1px solid var(--line); padding:12px; display:grid; place-items:center}
.console .wb svg{width:100%; max-width:220px; height:auto}
.console .rows{padding:14px; display:flex; flex-direction:column; gap:8px}
.crow{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:center; padding:10px 12px; border:1px solid var(--line); border-radius:10px; font-size:13px; background:rgba(255,255,255,.015)}
.crow small{display:block; color:var(--muted); font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase}
.crow .st{font-family:var(--mono); font-size:11px; padding:4px 8px; border-radius:6px; white-space:nowrap}
.st.ok{color:var(--ok); background:rgba(61,220,151,.1)} .st.wa{color:var(--warn); background:rgba(255,194,75,.1)} .st.bl{color:var(--blue); background:rgba(111,168,255,.1)}

/* ---------- MARQUEE ---------- */
.marquee{overflow:hidden; border-block:1px solid var(--line); background:var(--bg-2); -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee .track{display:flex; gap:48px; width:max-content; padding-block:20px; animation:mq 50s linear infinite}
.marquee:hover .track{animation-play-state:paused}
.marquee span{font-family:var(--mono); font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); white-space:nowrap; display:inline-flex; align-items:center; gap:48px}
.marquee span::after{content:"◆"; color:var(--acc); font-size:8px}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---------- INDUSTRY WALL ---------- */
.wall{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:12px}
.tile{background:var(--surf); border:1px solid var(--line); border-radius:14px; padding:20px; min-width:0; transition:border-color .2s, transform .2s}
.tile:hover{border-color:var(--acc); transform:translateY(-2px)}
.tile .ind{font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; color:var(--acc); display:flex; justify-content:space-between; align-items:center}
.tile .ind svg{width:18px; height:18px; color:var(--muted)}
.tile h3{font-family:var(--display); font-size:15px; margin-top:12px; letter-spacing:.03em}
.tile ul{list-style:none; margin-top:12px; display:flex; flex-direction:column; gap:6px}
.tile li{color:var(--muted); font-size:14.5px; padding-left:16px; position:relative}
.tile li::before{content:""; position:absolute; left:0; top:10px; width:6px; height:1px; background:var(--acc)}
.tile.hot{border-color:rgba(255,122,26,.45); background:linear-gradient(160deg,#16233F,var(--surf) 60%)}

/* ---------- STEPS ---------- */
.steps{list-style:none; display:grid; grid-template-columns:minmax(0,1fr); gap:var(--gap); counter-reset:s}
@media (min-width:760px){ .steps{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1080px){ .steps{grid-template-columns:repeat(4,minmax(0,1fr))} }
.steps li{counter-increment:s; background:var(--surf); border:1px solid var(--line); border-radius:var(--r); padding:28px; min-width:0; position:relative}
.steps li::before{content:counter(s,decimal-leading-zero); display:block; font-family:var(--display); color:var(--acc); font-size:34px; line-height:1; margin-bottom:18px; font-variant-numeric:tabular-nums}
.steps li .tm{position:absolute; top:28px; right:24px; font-family:var(--mono); font-size:11px; color:var(--muted); letter-spacing:.08em; text-transform:uppercase}
.steps h3{font-family:var(--display); font-size:17px; margin-bottom:8px}
.steps p{color:var(--muted); font-size:15.5px}

/* ---------- QUOTE ---------- */
.quote{display:grid; grid-template-columns:minmax(0,1fr); gap:32px; align-items:center}
@media (min-width:960px){ .quote{grid-template-columns:minmax(0,3fr) minmax(0,9fr); gap:60px} }
.avatar{width:clamp(120px,14vw,180px); aspect-ratio:1; border-radius:24px; background:linear-gradient(145deg,#1A2B4D,#0B1324); border:1px solid var(--line-2); display:grid; place-items:center; font-family:var(--display); font-size:clamp(34px,4vw,52px); color:var(--acc); position:relative; overflow:hidden}
.avatar::after{content:""; position:absolute; inset:0; background:repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 6px)}
blockquote{margin:0}
blockquote p{font-family:var(--display); font-size:clamp(20px,2.5vw,34px); line-height:1.35; letter-spacing:-.005em}
blockquote p::before{content:"“"; color:var(--acc)} blockquote p::after{content:"”"; color:var(--acc)}
blockquote footer{margin-top:24px; color:var(--muted); font-size:15px}
blockquote footer b{color:var(--fg); font-weight:600}

/* ---------- PRINCIPLES ---------- */
.rules{display:grid; grid-template-columns:minmax(0,1fr); border-top:1px solid var(--line)}
@media (min-width:860px){ .rules{grid-template-columns:repeat(2,minmax(0,1fr))} }
.rule{display:grid; grid-template-columns:56px minmax(0,1fr); gap:16px; padding:28px 0; border-bottom:1px solid var(--line)}
@media (min-width:860px){ .rule:nth-child(odd){padding-right:40px; border-right:1px solid var(--line)} .rule:nth-child(even){padding-left:40px} }
.rule .n{font-family:var(--mono); color:var(--acc); font-size:13px; padding-top:4px}
.rule h3{font-family:var(--display); font-size:17px}
.rule p{color:var(--muted); margin-top:8px}

/* ---------- TOOLS ---------- */
.spec{margin-top:20px; border-top:1px solid var(--line)}
.spec div{display:flex; justify-content:space-between; gap:16px; padding:11px 0; border-bottom:1px solid var(--line); font-size:14.5px; flex-wrap:wrap}
.spec dt{color:var(--muted)} .spec dd{margin:0; font-weight:600; text-align:right; font-family:var(--mono); font-size:13px}
.tool-top{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap}
.tool-top .cat{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.card.tool h3{font-size:19px; margin-top:16px}

/* ---------- MODELS ---------- */
.models .card h3{font-size:18px}
.price{font-family:var(--mono); font-size:12px; color:var(--acc); letter-spacing:.1em; text-transform:uppercase; margin-bottom:14px}

/* ---------- CTA ---------- */
.cta{position:relative; border-top:1px solid var(--line); overflow:hidden; background:radial-gradient(60% 90% at 85% 110%, rgba(255,122,26,.18), transparent 70%), radial-gradient(40% 60% at 0% 0%, rgba(111,168,255,.08), transparent 70%), var(--bg)}
.cta .wrap{display:grid; grid-template-columns:minmax(0,1fr); gap:44px; padding-block:clamp(80px,11vw,150px)}
@media (min-width:1000px){ .cta .wrap{grid-template-columns:minmax(0,7fr) minmax(0,5fr); align-items:end} }
.cta p{color:var(--fg-2); font-size:18px; margin-top:20px; max-width:30em}
.rows{display:flex; flex-direction:column; gap:10px}
.r{display:flex; justify-content:space-between; align-items:center; gap:12px; border:1px solid var(--line); background:rgba(11,19,36,.7); border-radius:14px; padding:12px 12px 12px 18px; flex-wrap:wrap}
.r small{display:block; color:var(--muted); font-size:12px; font-family:var(--mono); letter-spacing:.08em; text-transform:uppercase}
.r .v{font-weight:600; overflow-wrap:anywhere; min-width:0; font-size:15.5px}
.r>span{min-width:0}
.copy{font:inherit; font-size:13.5px; font-weight:600; color:var(--fg); background:transparent; border:1px solid var(--line-2); border-radius:999px; padding:0 16px; min-height:40px; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center}
.copy:hover{border-color:var(--acc)}

/* ---------- CONTACT ---------- */
.contact-grid{display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(32px,5vw,64px)}
@media (min-width:1000px){ .contact-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr)} }
form{display:grid; gap:18px}
.fr{display:grid; grid-template-columns:minmax(0,1fr); gap:18px}
@media (min-width:640px){ .fr{grid-template-columns:repeat(2,minmax(0,1fr))} }
label{display:grid; gap:8px; font-size:14px; color:var(--fg-2); font-weight:500}
input,select,textarea{font:inherit; font-size:16px; color:var(--fg); background:var(--surf); border:1px solid var(--line-2); border-radius:12px; padding:14px 16px; width:100%; min-height:52px; transition:border-color .2s, box-shadow .2s}
textarea{min-height:150px; resize:vertical}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--acc); box-shadow:0 0 0 4px rgba(255,122,26,.15)}
select{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238E9BBA' stroke-width='1.6' fill='none'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center; padding-right:40px}
.seg{display:flex; flex-wrap:wrap; gap:8px}
.seg label{display:inline-flex; cursor:pointer}
.seg input{position:absolute; opacity:0; width:1px; height:1px}
.seg span{display:inline-flex; align-items:center; min-height:44px; padding:0 16px; border:1px solid var(--line-2); border-radius:999px; font-size:14px; transition:all .2s}
.seg input:checked+span{background:var(--acc); border-color:var(--acc); color:var(--on-acc); font-weight:600}
.seg input:focus-visible+span{outline:2px solid var(--acc); outline-offset:3px}
.note{font-size:13.5px; color:var(--muted)}
.done{display:none; gap:14px}
.done.show{display:grid}
.done textarea{min-height:220px; font-family:var(--mono); font-size:13.5px}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap:20px; align-items:center; padding:24px 0; font-family:var(--display); font-size:clamp(15px,1.4vw,18px); line-height:1.4}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; flex:none; width:34px; height:34px; border-radius:50%; border:1px solid var(--line-2); display:grid; place-items:center; color:var(--acc); font-family:var(--body); font-size:20px; transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--muted); padding:0 0 26px; max-width:52em}

/* ---------- FOOTER ---------- */
.foot{border-top:1px solid var(--line); background:var(--bg-2)}
.foot .top{display:grid; grid-template-columns:minmax(0,1fr); gap:40px; padding-block:64px 40px}
@media (min-width:900px){ .foot .top{grid-template-columns:minmax(0,4fr) repeat(3,minmax(0,2fr))} }
.foot h4{font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:16px}
.foot ul{list-style:none; display:flex; flex-direction:column; gap:4px}
.foot ul a{text-decoration:none; color:var(--fg-2); font-size:15px; display:inline-flex; min-height:34px; align-items:center; overflow-wrap:anywhere}
.foot ul a:hover{color:var(--acc)}
.foot .about{color:var(--muted); font-size:15px; max-width:26em; margin-top:18px}
.foot .bot{display:flex; justify-content:space-between; gap:12px 24px; flex-wrap:wrap; padding-block:22px; border-top:1px solid var(--line); color:var(--dim); font-size:13px; font-family:var(--mono); letter-spacing:.04em}

/* ---------- REVEAL ---------- */
.js .rv{opacity:0; transform:translateY(22px); transition:opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1)}
.js .rv.in{opacity:1; transform:none}
.js .rv.d1{transition-delay:.08s} .js .rv.d2{transition-delay:.16s} .js .rv.d3{transition-delay:.24s}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important; transition:none!important}
  .js .rv{opacity:1; transform:none}
}
@media (max-width:760px){
  .scrim{background:radial-gradient(80% 50% at 50% 48%, rgba(4,8,15,.94) 0%, rgba(4,8,15,.7) 60%, rgba(4,8,15,.3) 100%), linear-gradient(to bottom, rgba(4,8,15,.7) 0%, transparent 20%, transparent 72%, var(--bg) 100%)}
  .scr{opacity:.8}
}

/* =========================================================
   v3 — dimensional layer: page-hero visuals, tilt, scroll-3D
   ========================================================= */
.phero.has-vis .wrap{display:grid; grid-template-columns:minmax(0,1fr); gap:24px; align-items:center}
@media (min-width:1040px){ .phero.has-vis .wrap{grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:40px} }
.hvis{position:relative; min-width:0; height:clamp(280px,34vw,460px); display:grid; place-items:center}
@media (max-width:1039px){ .hvis{height:300px; margin-top:12px} }
.hvis canvas{width:100%; height:100%}

/* tilt */
[data-tilt]{transform-style:preserve-3d; will-change:transform; transition:transform .5s cubic-bezier(.2,.8,.2,1)}
[data-tilt].tilting{transition:transform .08s linear}
[data-tilt] .glare{position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:radial-gradient(500px circle at var(--gx,50%) var(--gy,50%), rgba(255,255,255,.07), transparent 40%); opacity:0; transition:opacity .3s; z-index:2}
[data-tilt]:hover .glare{opacity:1}

/* scroll-in 3D */
.js [data-scroll3d]{transform:perspective(1400px) rotateX(var(--rx,16deg)) scale(var(--sc,.94)); transform-origin:50% 100%; transition:transform .1s linear}

/* ---------- services: isometric data stack ---------- */
.stack{position:relative; width:min(420px,90%); aspect-ratio:1; perspective:1600px}
.stack .iso{position:absolute; inset:0; transform-style:preserve-3d; transform:rotateX(58deg) rotateZ(-42deg); animation:isofloat 9s ease-in-out infinite}
@keyframes isofloat{50%{transform:rotateX(58deg) rotateZ(-36deg)}}
.stack .lyr{position:absolute; left:12%; top:12%; width:76%; height:76%; border-radius:18px; border:1px solid var(--line-2); background:linear-gradient(135deg,rgba(16,27,49,.92),rgba(7,13,25,.92)); box-shadow:0 30px 60px -20px rgba(0,0,0,.8); transform:translateZ(var(--z)); transition:transform .8s cubic-bezier(.2,.8,.2,1); overflow:hidden}
.stack:hover .lyr{transform:translateZ(calc(var(--z) * 1.45))}
.stack .lyr::after{content:attr(data-l); position:absolute; left:14px; bottom:10px; font-family:var(--mono); font-size:10px; letter-spacing:.18em; color:var(--muted); text-transform:uppercase}
.stack .lyr.l1{--z:0px} .stack .lyr.l2{--z:60px} .stack .lyr.l3{--z:120px} .stack .lyr.l4{--z:180px; border-color:rgba(255,122,26,.6); box-shadow:0 0 60px -10px rgba(255,122,26,.5), 0 30px 60px -20px rgba(0,0,0,.8)}
.lyr .cells{position:absolute; inset:16px 16px 30px; display:grid; grid-template-columns:repeat(6,1fr); gap:5px}
.lyr .cells i{border-radius:3px; background:rgba(130,170,255,.12)}
.lyr .cells i.h{background:rgba(255,122,26,.55); animation:blink 3s infinite}
@keyframes blink{50%{opacity:.35}}
.lyr svg{position:absolute; inset:14px 14px 28px; width:calc(100% - 28px); height:calc(100% - 42px)}
.stack .beam{position:absolute; left:50%; top:50%; width:2px; height:180px; transform-origin:0 0; transform:translateZ(0) rotateX(-90deg); background:linear-gradient(to top,transparent,var(--acc)); opacity:.7}

/* ---------- energy: pumpjack scene ---------- */
.pj{width:100%; max-width:560px}
.pj .beam{transform-origin:250px 120px; animation:pjbeam 4s ease-in-out infinite}
.pj .crank{transform-origin:330px 230px; animation:pjcrank 4s linear infinite}
.pj .rod{animation:pjrod 4s ease-in-out infinite}
@keyframes pjbeam{0%,100%{transform:rotate(-9deg)} 50%{transform:rotate(9deg)}}
@keyframes pjcrank{to{transform:rotate(360deg)}}
@keyframes pjrod{0%,100%{transform:translateY(23px)} 50%{transform:translateY(-23px)}}
.pj .pkt{animation:pkt 3.2s linear infinite; opacity:0}
.pj .pkt:nth-of-type(2){animation-delay:.8s} .pj .pkt:nth-of-type(3){animation-delay:1.6s} .pj .pkt:nth-of-type(4){animation-delay:2.4s}
@keyframes pkt{0%{opacity:0; transform:translate(0,0)} 10%{opacity:1} 90%{opacity:1} 100%{opacity:0; transform:translate(var(--dx),var(--dy))}}
.pj .scan{animation:scan 3s ease-in-out infinite}
@keyframes scan{0%,100%{transform:translateY(0)} 50%{transform:translateY(120px)}}

/* ---------- platform: fanned 3D tool cards ---------- */
.fan{position:relative; width:min(460px,92%); height:100%; perspective:1400px}
.fan .fc{position:absolute; left:50%; top:50%; width:min(300px,70%); aspect-ratio:4/3; margin:0; border-radius:16px; border:1px solid var(--line-2); background:linear-gradient(160deg,#13213D,#0A1222); box-shadow:0 40px 80px -30px rgba(0,0,0,.9); padding:16px; transform-style:preserve-3d; transition:transform .8s cubic-bezier(.2,.8,.2,1), border-color .3s; overflow:hidden}
.fan .fc:nth-child(1){transform:translate(-50%,-50%) translate3d(-34%, -26%, -160px) rotateY(24deg) rotateX(8deg)}
.fan .fc:nth-child(2){transform:translate(-50%,-50%) translate3d(30%, -18%, -100px) rotateY(-22deg) rotateX(6deg)}
.fan .fc:nth-child(3){transform:translate(-50%,-50%) translate3d(-26%, 26%, -40px) rotateY(18deg) rotateX(-6deg)}
.fan .fc:nth-child(4){transform:translate(-50%,-50%) translate3d(22%, 22%, 40px) rotateY(-14deg) rotateX(-4deg); border-color:rgba(255,122,26,.6); box-shadow:0 0 60px -14px rgba(255,122,26,.5), 0 40px 80px -30px rgba(0,0,0,.9)}
.fan:hover .fc:nth-child(1){transform:translate(-50%,-50%) translate3d(-44%, -32%, -120px) rotateY(16deg)}
.fan:hover .fc:nth-child(2){transform:translate(-50%,-50%) translate3d(40%, -24%, -60px) rotateY(-14deg)}
.fan:hover .fc:nth-child(3){transform:translate(-50%,-50%) translate3d(-36%, 32%, 0) rotateY(12deg)}
.fan:hover .fc:nth-child(4){transform:translate(-50%,-50%) translate3d(30%, 28%, 80px) rotateY(-8deg)}
.fc b{display:block; font-family:var(--display); font-weight:400; font-size:12px; letter-spacing:.04em}
.fc small{display:flex; align-items:center; gap:6px; font-family:var(--mono); font-size:9.5px; color:var(--ok); letter-spacing:.12em; margin-bottom:8px}
.fc small::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--ok); box-shadow:0 0 8px var(--ok)}
.fc svg{width:100%; height:calc(100% - 40px); margin-top:6px}

/* ---------- contact: radar ---------- */
.radar{position:relative; width:min(380px,86%); aspect-ratio:1; border-radius:50%; background:radial-gradient(circle, rgba(255,122,26,.08) 0 1px, transparent 1px) 0 0/22px 22px, radial-gradient(circle at 50% 50%, #0E1A31, #050A14 70%); border:1px solid var(--line-2); overflow:hidden; box-shadow:0 0 80px -20px rgba(255,122,26,.35) inset}
.radar::before,.radar::after{content:""; position:absolute; inset:16%; border-radius:50%; border:1px solid var(--line)}
.radar::after{inset:33%}
.radar .sweep{position:absolute; inset:0; border-radius:50%; background:conic-gradient(from 0deg, rgba(255,122,26,.45), rgba(255,122,26,0) 70deg, transparent 360deg); animation:sweep2 4s linear infinite}
@keyframes sweep2{to{transform:rotate(360deg)}}
.radar .x{position:absolute; left:50%; top:0; bottom:0; width:1px; background:var(--line)} .radar .y{position:absolute; top:50%; left:0; right:0; height:1px; background:var(--line)}
.radar .pin{position:absolute; left:50%; top:50%; width:14px; height:14px; margin:-7px; border-radius:50%; background:var(--acc); box-shadow:0 0 0 0 rgba(255,122,26,.7); animation:ping 2s infinite}
@keyframes ping{70%{box-shadow:0 0 0 26px rgba(255,122,26,0)} 100%{box-shadow:0 0 0 0 rgba(255,122,26,0)}}
.radar .lbl{position:absolute; left:calc(50% + 16px); top:calc(50% - 26px); font-family:var(--mono); font-size:11px; color:var(--fg); letter-spacing:.08em; white-space:nowrap}
.radar .lbl em{display:block; font-style:normal; color:var(--muted); font-size:10px}
.radar .blip{position:absolute; width:6px; height:6px; border-radius:50%; background:var(--blue); opacity:0; animation:blip 4s infinite}
@keyframes blip{0%,100%{opacity:0} 8%{opacity:1} 40%{opacity:0}}

@media (prefers-reduced-motion:reduce){ .stack .iso{transform:rotateX(58deg) rotateZ(-42deg)} }

/* ---------- ambient light layer (all pages) ---------- */
.ambient{position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; background:var(--bg)}
.ambient i{position:absolute; border-radius:50%; filter:blur(90px); opacity:.55; will-change:transform}
.ambient i:nth-child(1){width:46vw; height:46vw; left:-12vw; top:10vh; background:radial-gradient(circle,rgba(255,122,26,.30),transparent 65%); animation:drift1 26s ease-in-out infinite}
.ambient i:nth-child(2){width:52vw; height:52vw; right:-16vw; top:40vh; background:radial-gradient(circle,rgba(111,168,255,.24),transparent 65%); animation:drift2 32s ease-in-out infinite}
.ambient i:nth-child(3){width:38vw; height:38vw; left:30vw; bottom:-18vh; background:radial-gradient(circle,rgba(255,154,77,.18),transparent 65%); animation:drift3 38s ease-in-out infinite}
@keyframes drift1{50%{transform:translate(18vw,22vh) scale(1.15)}}
@keyframes drift2{50%{transform:translate(-20vw,-18vh) scale(.9)}}
@keyframes drift3{50%{transform:translate(-14vw,-26vh) scale(1.2)}}
.ambient b{position:absolute; inset:-10%; background-image:radial-gradient(rgba(150,180,255,.10) 1px, transparent 1.2px); background-size:28px 28px; -webkit-mask-image:radial-gradient(70% 60% at 50% 40%, #000, transparent); mask-image:radial-gradient(70% 60% at 50% 40%, #000, transparent); transform:translateY(calc(var(--sy,0) * -0.15px))}
body{background:transparent}
.hero,.phero{background-color:transparent}
.cta,.foot,.marquee{background-color:rgba(4,8,15,.6)}

/* section accents */
.sec{isolation:isolate; overflow-x:clip}
.sec .wm-big{position:absolute; right:-2vw; top:clamp(30px,5vw,80px); z-index:-1; font-family:var(--display); font-size:clamp(90px,16vw,260px); line-height:1; color:transparent; -webkit-text-stroke:1px rgba(130,170,255,.09); pointer-events:none; user-select:none; white-space:nowrap}
.grid-floor{position:absolute; left:-30%; right:-30%; bottom:0; height:260px; z-index:-1; perspective:500px; pointer-events:none; overflow:hidden}
.grid-floor::before{content:""; position:absolute; inset:0 0 -40% 0; transform:rotateX(72deg); transform-origin:50% 100%; background-image:linear-gradient(rgba(255,122,26,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(255,122,26,.14) 1px,transparent 1px); background-size:60px 60px; -webkit-mask-image:linear-gradient(to top,#000,transparent 80%); mask-image:linear-gradient(to top,#000,transparent 80%); animation:floor2 4s linear infinite}
.card .ic{box-shadow:0 0 24px -6px rgba(255,122,26,.45)}
.card{background:linear-gradient(160deg,rgba(18,30,54,.9),rgba(11,19,36,.9))}

/* globe section */
.globe-wrap{position:relative; height:clamp(360px,46vw,600px)}
.globe-wrap canvas{width:100%; height:100%}
.globe-legend{display:flex; flex-wrap:wrap; gap:8px; margin-top:24px}

/* =================== data & dashboards page =================== */
.explode{position:relative; width:min(440px,92%); aspect-ratio:1.1; perspective:1600px}
.explode .pl{position:absolute; inset:0; transform-style:preserve-3d; transform:rotateX(56deg) rotateZ(-34deg); animation:isofloat2 10s ease-in-out infinite}
@keyframes isofloat2{50%{transform:rotateX(52deg) rotateZ(-28deg)}}
.explode .tl{position:absolute; border-radius:12px; border:1px solid var(--line-2); background:linear-gradient(140deg,rgba(19,33,61,.95),rgba(8,14,27,.95)); box-shadow:0 26px 40px -18px rgba(0,0,0,.9); transform:translateZ(var(--z)); animation:tz 6s ease-in-out infinite; animation-delay:var(--d); overflow:hidden}
@keyframes tz{0%,100%{transform:translateZ(var(--z))} 50%{transform:translateZ(calc(var(--z) + 40px))}}
.explode .tl svg{width:100%; height:100%}
.explode .base{position:absolute; inset:-4%; border-radius:18px; border:1px dashed rgba(255,122,26,.35); transform:translateZ(-30px)}

.kinds{display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:10px}
.kind{display:flex; gap:12px; align-items:center; padding:14px 16px; border:1px solid var(--line); border-radius:14px; background:rgba(11,19,36,.7); transition:border-color .2s, transform .2s}
.kind:hover{border-color:var(--acc); transform:translateY(-2px)}
.kind svg{flex:none; width:22px; height:22px; color:var(--acc)}
.kind b{display:block; font-weight:600; font-size:14.5px; line-height:1.3}
.kind span{display:block; color:var(--muted); font-size:12.5px; line-height:1.4}

.gallery{display:grid; grid-template-columns:minmax(0,1fr); gap:var(--gap)}
@media (min-width:760px){ .gallery{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1080px){ .gallery{grid-template-columns:repeat(3,minmax(0,1fr))} }
.dcon{padding:0!important}
.dcon .scr2{position:relative; aspect-ratio:16/9; background:linear-gradient(180deg,#0C1529,#070D19); border-bottom:1px solid var(--line); overflow:hidden}
.dcon .scr2 svg{width:100%; height:100%; display:block}
.dcon .scr2::after{content:""; position:absolute; inset:0; background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.05) 50%,transparent 60%); transform:translateX(-100%); transition:transform .9s}
.dcon:hover .scr2::after{transform:translateX(100%)}
.dcon .txt{padding:20px 22px 24px}
.dcon .txt .k{display:block; margin-bottom:8px}
.dcon .q{list-style:none; margin-top:14px; display:flex; flex-direction:column; gap:6px}
.dcon .q li{font-size:14px; color:var(--fg-2); padding-left:18px; position:relative}
.dcon .q li::before{content:"?"; position:absolute; left:0; top:0; color:var(--acc); font-family:var(--mono); font-weight:500}
.dcon svg .grow{transform-origin:bottom; transform-box:fill-box; animation:grow 1.2s cubic-bezier(.2,.8,.2,1) both}
@keyframes grow{from{transform:scaleY(0)}}
.dcon svg .dash{stroke-dasharray:600; stroke-dashoffset:600; animation:draw 2s ease forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.dcon svg .pulse{animation:pulse 2s infinite}

.proof{display:grid; grid-template-columns:minmax(0,1fr); gap:0; border-top:1px solid var(--line)}
.proof li{list-style:none; display:grid; grid-template-columns:44px minmax(0,1fr) auto; gap:16px; align-items:center; padding:22px 0; border-bottom:1px solid var(--line)}
.proof li .n{font-family:var(--mono); color:var(--acc); font-size:13px}
.proof li b{font-family:var(--display); font-weight:400; font-size:clamp(15px,1.4vw,18px); display:block}
.proof li span.d{color:var(--muted); font-size:15px}
.proof li .tag{white-space:nowrap}
@media (max-width:640px){ .proof li{grid-template-columns:32px minmax(0,1fr)} .proof li .tag{grid-column:2} }

.formats{display:flex; flex-wrap:wrap; gap:10px; margin-top:28px}
.research{position:relative; overflow:hidden; border:1px solid rgba(255,122,26,.4); border-radius:24px; padding:clamp(28px,4vw,56px); background:radial-gradient(80% 120% at 100% 0%, rgba(255,122,26,.16), transparent 60%), linear-gradient(160deg,#111E38,#080F1D)}
.research .ring{position:absolute; right:-80px; top:50%; width:360px; height:360px; margin-top:-180px; border-radius:50%; border:1px dashed rgba(255,122,26,.35); animation:spin 40s linear infinite}
.research .ring:nth-child(2){width:240px; height:240px; margin-top:-120px; right:-20px; animation-direction:reverse; border-color:rgba(111,168,255,.35)}
@keyframes spin{to{transform:rotate(360deg)}}
.research>*:not(.ring){position:relative}
@media (prefers-reduced-motion:reduce){ .explode .pl{transform:rotateX(56deg) rotateZ(-34deg)} }

/* =================== chart system v2 (validated palette) =================== */
:root{--s1:#E8661A; --s2:#3987E5; --s3:#199E70}
.dcon .scr2{aspect-ratio:320/190}
.hit .gd{opacity:0; transition:opacity .15s}
.hit:hover .gd,.hit:focus .gd{opacity:.55}
svg [data-tip]{cursor:crosshair}
svg path[data-tip]:hover, svg rect[data-tip]:hover{filter:brightness(1.25)}
.vtip{position:fixed; z-index:200; pointer-events:none; padding:7px 10px; border-radius:8px; background:rgba(9,15,28,.96); border:1px solid var(--line-2); color:var(--fg); font:500 12.5px/1.35 var(--body); box-shadow:0 12px 30px -10px rgba(0,0,0,.8); opacity:0; transform:translate(-50%,calc(-100% - 12px)); transition:opacity .12s; white-space:nowrap}
.vtip.on{opacity:1}
/* stat values: same sans, proportional figures */
.kpi b{font-family:var(--body)!important; font-weight:600; font-variant-numeric:normal; font-size:clamp(19px,2vw,25px); letter-spacing:-.01em}
.kpi .row{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:4px}
.kpi svg{width:56px; height:22px; flex:none}
.kpi .d{margin-top:0}
.kpi .d{font-variant-numeric:tabular-nums}
.dash-legend{display:flex; gap:14px; flex-wrap:wrap; font-size:11.5px; color:var(--fg-2); margin-top:8px}
.dash-legend span{display:inline-flex; align-items:center; gap:6px}
.dash-legend i{display:inline-block; width:14px; height:2px; background:var(--s1); border-radius:2px}
.dash-legend i.p{background:repeating-linear-gradient(90deg,var(--s2) 0 4px,transparent 4px 7px)}
.dash-legend i.b{height:8px; background:rgba(61,220,151,.18); border-radius:2px}
.pane{position:relative}
.pane canvas{height:220px; cursor:crosshair}
.bars div i{height:8px; border-radius:0 4px 4px 0; background:var(--s1)}
.bars div i.t{position:relative}
.bars div .track{display:block; height:8px; border-radius:0 4px 4px 0; background:rgba(150,175,230,.08); overflow:hidden}
.alert{align-items:center}
.alert svg{flex:none; width:16px; height:16px}
.alert .lv{margin-left:auto; font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.dash-table{margin-top:10px}
.dash-table summary{cursor:pointer; font-family:var(--mono); font-size:11px; color:var(--muted); letter-spacing:.06em; text-transform:uppercase}
.dash-table table{width:100%; border-collapse:collapse; margin-top:8px; font-size:12.5px}
.dash-table th,.dash-table td{text-align:right; padding:5px 8px; border-bottom:1px solid var(--line); font-variant-numeric:tabular-nums}
.dash-table th:first-child,.dash-table td:first-child{text-align:left}
.dash-table th{color:var(--muted); font-weight:500}
/* word-style stat tiles: sized so the widest word fits its column in Michroma */
.stats.words .stat b{font-size:clamp(18px,1.9vw,28px); line-height:1.15; white-space:nowrap}

.kpi small{white-space:normal; overflow:visible; text-overflow:clip; line-height:1.3; min-height:2.6em}
.kpi b{font-size:clamp(18px,1.7vw,24px)!important}

/* =================== motion budget: one signature visual per page, quiet everywhere else =================== */
.phero::after{animation:none}                     /* header grid stays, no scrolling */
.grid-floor::before{animation:none}               /* CTA grid static */
.research .ring{animation:none}                   /* static rings */
.pipe .st::after{animation:none; transform:translateX(-100%); transition:transform .9s ease}
.pipe .st:hover::after{transform:translateX(100%)} /* sweep only on hover */
.ambient i:nth-child(1){animation-duration:48s} .ambient i:nth-child(2){animation-duration:56s} .ambient i:nth-child(3){animation-duration:64s}
.explode .tl{animation-duration:11s} @keyframes tz{0%,100%{transform:translateZ(var(--z))} 50%{transform:translateZ(calc(var(--z) + 18px))}}
.stack .iso{animation-duration:16s}
.explode .pl{animation-duration:18s}
.radar .sweep{animation-duration:7s}
.tag.live::before{animation-duration:3.5s}
.hero-foot span::before{box-shadow:none}

/* perf: gradients are already soft, so no live blur filter on animated layers */
.ambient i{filter:none; opacity:.8}

.ambient b{transform:none!important}
.ambient{contain:strict; will-change:transform}