/* ===================================================================
   GravOS — Graviti AI  |  Marketing site stylesheet
   Dark, techy, animated.  Native SVG visuals.
   =================================================================== */

:root {
  /* Core surfaces */
  --bg:        #060912;
  --bg-2:      #0a0f1f;
  --bg-3:      #0f1730;
  --panel:     #111a33;
  --panel-2:   #16213f;
  --border:    rgba(255,255,255,0.08);
  --border-2:  rgba(255,255,255,0.14);

  /* Text */
  --txt:       #eaf0ff;
  --txt-soft:  #aab6d6;
  --txt-mute:  #6f7da3;

  /* Brand */
  --green:     #25c46a;
  --green-2:   #16a34a;
  --blue:      #3b82f6;
  --blue-2:    #2563eb;
  --cyan:      #22d3ee;
  --purple:    #8b5cf6;
  --orange:    #fb923c;
  --orange-2:  #f97316;
  --teal:      #14b8a6;

  /* Module accents */
  --m-charge:    #25c46a;
  --m-electron:  #3b82f6;
  --m-edge:      #8b5cf6;
  --m-cortex:    #fb923c;
  --m-autopilot: #22d3ee;

  --radius:    18px;
  --radius-sm: 12px;
  --maxw:      1240px;
  --ease:      cubic-bezier(.22,.61,.36,1);

  --font: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--txt);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
section { position: relative; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }

/* ---------- Typography helpers ---------- */
h1,h2,h3,h4 { line-height: 1.12; font-weight: 800; letter-spacing: -0.02em; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--cyan);
  padding: 7px 14px; border-radius: 999px;
  background: rgba(34,211,238,.08); border: 1px solid rgba(34,211,238,.25);
}
.eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.section-head { max-width: 760px; margin: 0 auto 56px; text-align: center; }
.section-head h2 { font-size: clamp(30px, 4.4vw, 50px); margin: 18px 0 16px; }
.section-head p { color: var(--txt-soft); font-size: clamp(15px,1.5vw,18px); }
.grad-green { background: linear-gradient(100deg,#7ef0a8,#25c46a); -webkit-background-clip:text; background-clip:text; color:transparent; }
.grad-blue  { background: linear-gradient(100deg,#7db2ff,#3b82f6); -webkit-background-clip:text; background-clip:text; color:transparent; }
.grad-multi { background: linear-gradient(100deg,#25c46a,#22d3ee 45%,#8b5cf6 80%); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ===================================================================
   NAVBAR
   =================================================================== */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  transition: background .35s var(--ease), border-color .35s, backdrop-filter .35s;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(6,9,18,.72);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--border);
}
.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.brand { display: flex; align-items: center; gap: 11px; }
.brand .logomark { width: 30px; height: 30px; }
.brand .gr { color: var(--txt); }
.brand .ai { color: var(--blue); }

/* ---- Brand logo image (official artwork) ---- */
.brand-logo { height: 42px; width: auto; display: block; }
.footer .brand-logo { height: 50px; margin-bottom: 16px; }
@media (max-width: 560px){ .brand-logo { height: 34px; } }

/* ---- Brand logo lockups (CSS fallback) ---- */
.logo-graviti { font-family:"Rajdhani","Inter",sans-serif; font-weight:700; line-height:.9; letter-spacing:.5px; display:inline-flex; flex-direction:column; }
.logo-graviti .wm { font-size:24px; white-space:nowrap; }
.logo-graviti .wm .g { color:#2bbd57; }            /* green A */
.logo-graviti .wm .n { color:var(--txt); }          /* light on dark */
.logo-graviti .wm .b { color:#3b82f6; margin-left:7px; }
.logo-graviti .tagrow { display:flex; align-items:center; gap:7px; margin-top:3px; }
.logo-graviti .tagrow .ln { height:2px; width:14px; border-radius:2px; }
.logo-graviti .tagrow .tg { font-family:"Inter",sans-serif; font-weight:600; font-size:8px; letter-spacing:2.6px; color:var(--txt-mute); }

.logo-gravos { display:inline-flex; align-items:center; gap:12px; }
.logo-gravos .dm { display:grid; grid-template-columns:repeat(3,1fr); gap:3px; }
.logo-gravos .dm i { width:7px; height:7px; border-radius:50%; }
.logo-gravos .gw { font-family:"Inter",sans-serif; font-weight:800; letter-spacing:-1px; font-size:30px; }
.logo-gravos .gw .w { color:#f3f6fc; }
.logo-gravos .gw .b { color:#3b82f6; }
.nav-links { display: flex; gap: 30px; align-items: center; }
.nav-links a { font-size: 14.5px; color: var(--txt-soft); font-weight: 500; transition: color .2s; }
.nav-links a:hover { color: var(--txt); }
.nav-cta {
  font-size: 14px; font-weight: 700; color: #061018;
  background: linear-gradient(100deg,var(--green),var(--cyan));
  padding: 10px 18px; border-radius: 999px; transition: transform .2s, box-shadow .2s;
  box-shadow: 0 6px 22px rgba(37,196,106,.28);
}
.nav-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(37,196,106,.4); }
.nav-burger { display: none; flex-direction: column; gap: 5px; cursor: pointer; }
.nav-burger span { width: 24px; height: 2px; background: var(--txt); border-radius: 2px; }

/* ===================================================================
   HERO
   =================================================================== */
.hero { padding: 168px 0 90px; overflow: hidden; position: relative; }
/* video background (blended into the dark theme) */
.hero-video { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #05080f center/cover no-repeat url('../assets/media/hero-poster.jpg'); }
.hero-video::after { content:""; position:absolute; inset:0; background: rgba(6,9,18,.5); } /* dims the static poster to match video opacity */
.hero-video video { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; opacity: .5; filter: saturate(1.08) contrast(1.03); transform: scale(1.02); }
.hero-video-overlay { position: absolute; inset: 0; background:
  linear-gradient(90deg, rgba(6,9,18,.96) 0%, rgba(6,9,18,.82) 34%, rgba(6,9,18,.5) 68%, rgba(8,16,32,.42) 100%),
  linear-gradient(0deg, var(--bg) 1%, rgba(6,9,18,.2) 30%, rgba(6,9,18,0) 55%),
  radial-gradient(ellipse 70% 90% at 80% 20%, rgba(34,211,238,.10), transparent 60%);
}
@media (max-width: 980px){
  .hero-video-overlay { background:
    linear-gradient(0deg, var(--bg) 3%, rgba(6,9,18,.74) 45%, rgba(6,9,18,.6) 100%); }
  .hero-video video { opacity: .42; }
}
.hero-bg { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.hero-bg .glow {
  position: absolute; border-radius: 50%; filter: blur(90px); opacity: .32;
}
.hero-bg .g1 { width: 560px; height: 560px; top: -160px; left: -120px; background: radial-gradient(circle, rgba(37,196,106,.45), transparent 65%); }
.hero-bg .g2 { width: 620px; height: 620px; top: -120px; right: -160px; background: radial-gradient(circle, rgba(59,130,246,.42), transparent 65%); }
.hero-bg .g3 { width: 520px; height: 520px; bottom: -220px; left: 38%; background: radial-gradient(circle, rgba(139,92,246,.32), transparent 65%); }
.hero-grid {
  position: absolute; inset: 0; z-index: 1; opacity: .22;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 30%, transparent 75%);
}
.hero .wrap { position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
.hero h1 { font-size: clamp(38px, 5.6vw, 70px); margin: 22px 0 22px; }
.hero p.lead { font-size: clamp(16px,1.7vw,20px); color: var(--txt-soft); max-width: 560px; }
.hero-cta { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; gap: 9px; font-weight: 700; font-size: 15px;
  padding: 14px 26px; border-radius: 999px; cursor: pointer; transition: transform .2s, box-shadow .2s, background .2s; border: 1px solid transparent;
}
.btn-primary { color: #061018; background: linear-gradient(100deg,var(--green),var(--cyan)); box-shadow: 0 10px 30px rgba(37,196,106,.3); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(37,196,106,.42); }
.btn-ghost { color: var(--txt); background: rgba(255,255,255,.04); border-color: var(--border-2); }
.btn-ghost:hover { background: rgba(255,255,255,.09); transform: translateY(-2px); }
.hero-stats { display: flex; gap: 34px; margin-top: 46px; flex-wrap: wrap; }
.hero-stats .stat .num { font-size: 30px; font-weight: 800; background: linear-gradient(100deg,#7ef0a8,#22d3ee); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-stats .stat .lbl { font-size: 13px; color: var(--txt-mute); }

/* Hero visual orbit */
.hero-visual { position: relative; }
.hero-visual svg { width: 100%; height: auto; overflow: visible; }

/* ===================================================================
   TRUST BAR
   =================================================================== */
.trust { padding: 34px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--bg-2); }
.trust .wrap { display: flex; align-items: center; gap: 40px; flex-wrap: wrap; justify-content: center; }
.trust .lbl { font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--txt-mute); }
.trust .pills { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.trust .pill { font-size: 13px; color: var(--txt-soft); padding: 8px 15px; border: 1px solid var(--border); border-radius: 999px; background: rgba(255,255,255,.02); }

/* ===================================================================
   PLATFORM PILLARS
   =================================================================== */
.platform { padding: 110px 0; }
.pillars { display: grid; grid-template-columns: repeat(5,1fr); gap: 16px; }
.pillar {
  padding: 26px 20px; border-radius: var(--radius-sm); background: var(--panel);
  border: 1px solid var(--border); transition: transform .3s var(--ease), border-color .3s, background .3s;
}
.pillar:hover { transform: translateY(-6px); border-color: var(--border-2); background: var(--panel-2); }
.pillar .pi { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 16px; background: rgba(34,211,238,.1); }
.pillar h4 { font-size: 16px; margin-bottom: 8px; }
.pillar p { font-size: 13.5px; color: var(--txt-mute); }

/* ===================================================================
   ARCHITECTURE / SYSTEM DIAGRAM
   =================================================================== */
.arch { padding: 30px 0 110px; }
.arch-frame {
  border: 1px solid var(--border); border-radius: 24px; padding: 36px;
  background: linear-gradient(180deg, var(--bg-3), var(--bg-2));
  position: relative; overflow: hidden;
}
.arch-frame svg { width: 100%; height: auto; overflow: visible; }

/* ===================================================================
   PRODUCT MODULES
   =================================================================== */
.products { padding: 110px 0; background: var(--bg-2); border-top: 1px solid var(--border); }
.module {
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center;
  padding: 60px 0; border-bottom: 1px solid var(--border);
}
.module:last-child { border-bottom: none; }
.module.reverse .mod-copy { order: 2; }
.module.reverse .mod-visual { order: 1; }
.mod-tag {
  display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 700;
  padding: 7px 14px; border-radius: 999px; margin-bottom: 18px;
}
.mod-copy h3 { font-size: clamp(26px,3.2vw,40px); margin-bottom: 10px; }
.mod-copy .mod-sub { font-size: 17px; color: var(--txt-soft); margin-bottom: 22px; font-weight: 600; }
.mod-list { list-style: none; display: grid; gap: 11px; margin-bottom: 26px; }
.mod-list li { display: flex; gap: 11px; align-items: flex-start; font-size: 14.5px; color: var(--txt-soft); }
.mod-list li svg { flex: none; margin-top: 3px; }
.mod-outcome {
  display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700;
  padding: 12px 18px; border-radius: 12px; background: rgba(255,255,255,.03); border: 1px solid var(--border);
}
.mod-visual { position: relative; }
.mod-card {
  border-radius: 22px; padding: 30px; border: 1px solid var(--border);
  background: linear-gradient(180deg, var(--panel), var(--bg-3));
  position: relative; overflow: hidden;
}
.mod-card svg { width: 100%; height: auto; overflow: visible; }
.mod-card .card-glow { position: absolute; width: 320px; height: 320px; border-radius: 50%; filter: blur(80px); opacity: .25; top: -80px; right: -80px; pointer-events:none; }

/* accent helpers */
.acc-charge   { color: var(--m-charge); }   .bg-charge   { background: rgba(37,196,106,.12); border:1px solid rgba(37,196,106,.3);}
.acc-electron { color: var(--m-electron); }  .bg-electron { background: rgba(59,130,246,.12); border:1px solid rgba(59,130,246,.3);}
.acc-edge     { color: var(--m-edge); }      .bg-edge     { background: rgba(139,92,246,.12); border:1px solid rgba(139,92,246,.3);}
.acc-cortex   { color: var(--m-cortex); }    .bg-cortex   { background: rgba(251,146,60,.12); border:1px solid rgba(251,146,60,.3);}
.acc-auto     { color: var(--m-autopilot); } .bg-auto     { background: rgba(34,211,238,.12); border:1px solid rgba(34,211,238,.3);}

/* ===================================================================
   AUTOPILOT BACKBONE  (full-width feature)
   =================================================================== */
.backbone { padding: 110px 0; position: relative; overflow: hidden; }
.backbone::before {
  content:""; position:absolute; inset:0; z-index:0;
  background: radial-gradient(ellipse 60% 50% at 50% 40%, rgba(34,211,238,.14), transparent 70%);
}
.backbone .wrap { position: relative; z-index: 2; }
.backbone-visual { margin-top: 50px; }
.backbone-visual svg { width: 100%; height: auto; overflow: visible; }

/* ===================================================================
   MARKETS SERVED
   =================================================================== */
.markets { padding: 110px 0; background: var(--bg-2); border-top: 1px solid var(--border); }
.market-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.market {
  padding: 28px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--panel); transition: transform .3s var(--ease), border-color .3s, background .3s;
  position: relative; overflow: hidden;
}
.market:hover { transform: translateY(-6px); border-color: var(--border-2); background: var(--panel-2); }
.market .mk-ico { width: 50px; height: 50px; border-radius: 13px; display: grid; place-items: center; margin-bottom: 16px; }
.market h4 { font-size: 18px; margin-bottom: 8px; }
.market p { font-size: 14px; color: var(--txt-mute); }

/* ===================================================================
   EDGE AI INFRASTRUCTURE
   =================================================================== */
.infra { padding: 110px 0; }
.infra-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.infra-visual svg { width: 100%; height: auto; overflow: visible; }
.spec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 28px; }
.spec {
  padding: 18px; border-radius: 12px; border: 1px solid var(--border); background: var(--panel);
}
.spec .k { font-size: 12px; color: var(--txt-mute); text-transform: uppercase; letter-spacing: .08em; }
.spec .v { font-size: 22px; font-weight: 800; margin-top: 4px; }
.spec .v.sm { font-size: 16px; }
.infra-feats { list-style: none; display: grid; gap: 10px; margin-top: 26px; }
.infra-feats li { display: flex; gap: 10px; align-items: center; font-size: 14.5px; color: var(--txt-soft); }

/* ===================================================================
   FOUNDATION BAND
   =================================================================== */
.foundation { padding: 100px 0; background: var(--bg-2); border-top: 1px solid var(--border); }
.found-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.found {
  padding: 26px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--panel);
  transition: border-color .3s, transform .3s;
}
.found:hover { border-color: var(--border-2); transform: translateY(-4px); }
.found h4 { font-size: 16px; margin: 14px 0 8px; display: flex; align-items: center; gap: 10px; }
.found p { font-size: 13.5px; color: var(--txt-mute); }
.found .tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; }
.found .tags span { font-size: 11.5px; color: var(--txt-soft); padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.04); border: 1px solid var(--border); }

/* ===================================================================
   CTA
   =================================================================== */
.cta { padding: 120px 0; position: relative; overflow: hidden; }
.cta-card {
  border-radius: 28px; padding: 70px 48px; text-align: center; position: relative; overflow: hidden;
  background: linear-gradient(140deg, var(--bg-3), var(--panel-2));
  border: 1px solid var(--border-2);
}
.cta-card::before { content:""; position:absolute; inset:0; background: radial-gradient(ellipse 70% 80% at 50% 0%, rgba(37,196,106,.2), transparent 60%); }
.cta-card > * { position: relative; z-index: 2; }
.cta-card h2 { font-size: clamp(30px,4.4vw,52px); margin-bottom: 18px; }
.cta-card p { color: var(--txt-soft); font-size: 18px; max-width: 600px; margin: 0 auto 34px; }
.cta-card .hero-cta { justify-content: center; }

/* ===================================================================
   FOOTER
   =================================================================== */
.footer { padding: 70px 0 40px; border-top: 1px solid var(--border); background: var(--bg); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; }
.footer .brand { margin-bottom: 16px; }
.footer .fdesc { font-size: 14px; color: var(--txt-mute); max-width: 320px; }
.footer h5 { font-size: 13px; text-transform: uppercase; letter-spacing: .1em; color: var(--txt-mute); margin-bottom: 16px; }
.footer ul { list-style: none; display: grid; gap: 11px; }
.footer ul a { font-size: 14px; color: var(--txt-soft); transition: color .2s; }
.footer ul a:hover { color: var(--txt); }
.footer-bottom { margin-top: 50px; padding-top: 26px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; }
.footer-bottom p { font-size: 13px; color: var(--txt-mute); }

/* ===================================================================
   SCROLL REVEAL
   =================================================================== */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }
.reveal.d4 { transition-delay: .32s; }

/* ===================================================================
   SVG ANIMATIONS
   =================================================================== */
@keyframes dashflow { to { stroke-dashoffset: -1000; } }
.flow { stroke-dasharray: 7 11; animation: dashflow 14s linear infinite; }
.flow.fast { animation-duration: 7s; }
@keyframes pulse-node { 0%,100% { opacity: .55; r: 5; } 50% { opacity: 1; r: 7; } }
.pulse-node { animation: pulse-node 2.6s ease-in-out infinite; }
@keyframes spin-slow { to { transform: rotate(360deg); } }
.orbit-rot { transform-origin: center; animation: spin-slow 40s linear infinite; }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.floaty { animation: float 6s ease-in-out infinite; }
@keyframes glow-pulse { 0%,100% { opacity:.3; } 50% { opacity:.7; } }
.glow-pulse { animation: glow-pulse 4s ease-in-out infinite; }

/* gravity-well spiral trails — energy directed into the core */
@keyframes spiral-flow { to { stroke-dashoffset: -260; } }
.spiral { stroke-dasharray: 5 13; animation: spiral-flow 2.4s linear infinite; }

/* exploded iso stack — light beams + slab entrance */
@keyframes beamflow { to { stroke-dashoffset: -120; } }
.beam { stroke-dasharray: 4 8; animation: beamflow 1.8s linear infinite; }
.slab { opacity: 0; transform: translateY(-22px); animation: slab-in .8s var(--ease) forwards; animation-delay: calc(var(--d) * .14s + .1s); }
@keyframes slab-in { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .slab { opacity:1; transform:none; animation:none; } }

/* vertical platform-flow section */
.flow-wrap { display: grid; grid-template-columns: 1fr 1.05fr; gap: 30px; align-items: stretch; }
.flow-copy { display: flex; flex-direction: column; justify-content: space-around; gap: 26px; padding: 30px 0; }
.flow-step { border-left: 2px solid var(--border); padding-left: 20px; transition: border-color .3s; }
.flow-step:hover { border-color: currentColor; }
.flow-step .fs-tag { font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; display: flex; align-items: center; gap: 9px; }
.flow-step .fs-tag .sw { width: 9px; height: 9px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.flow-step h3 { font-size: 21px; margin: 9px 0 8px; color: var(--txt); }
.flow-step p { font-size: 13.5px; color: var(--txt-mute); }
.flow-visual { display: grid; place-items: center; }
.flow-visual svg { width: 100%; max-width: 560px; height: auto; overflow: visible; }
@keyframes rise { 0%{opacity:0;transform:translateY(0)} 10%{opacity:.9} 90%{opacity:.9} 100%{opacity:0;transform:translateY(-620px)} }
.rise { animation: rise 4s linear infinite; }
@media (max-width: 980px) { .flow-wrap { grid-template-columns: 1fr; } .flow-copy { padding: 0; } }

/* iso platform stack frame */
.stack-frame { display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px; align-items: center; }
.stack-frame .stack-copy h3 { font-size: 22px; margin: 22px 0 10px; }
.stack-layer { padding: 14px 0; border-left: 2px solid var(--border); padding-left: 18px; margin-left: 4px; transition: border-color .3s; }
.stack-layer:hover { border-color: var(--cyan); }
.stack-layer .sl-name { font-weight: 800; font-size: 15px; display:flex; align-items:center; gap:9px; }
.stack-layer .sl-name .sw { width: 9px; height: 9px; border-radius: 50%; }
.stack-layer p { font-size: 13px; color: var(--txt-mute); margin-top: 3px; }
@media (max-width: 980px) { .stack-frame { grid-template-columns: 1fr; } }

/* ===================================================================
   NAV EXTRAS (login + demo)
   =================================================================== */
.nav-actions { display: flex; align-items: center; gap: 14px; }
.nav-login { font-size: 14px; font-weight: 600; color: var(--txt-soft); padding: 9px 18px; border: 1px solid var(--border-2); border-radius: 999px; transition: background .2s, color .2s; }
.nav-login:hover { background: rgba(255,255,255,.06); color: var(--txt); }

/* hero capability chips */
.hero-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }
.hero-chip { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; color: var(--txt-soft); padding: 9px 15px; border: 1px solid var(--border); border-radius: 12px; background: rgba(255,255,255,.025); }
.hero-chip svg { color: var(--cyan); }

/* trusted-by wordmarks */
.partners { padding: 30px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--bg-2); }
.partners .wrap { display: flex; align-items: center; gap: 40px; flex-wrap: wrap; justify-content: center; }
.partners .plabel { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--txt-mute); max-width: 130px; line-height: 1.4; }
.partners .marks { display: flex; gap: 38px; flex-wrap: wrap; align-items: center; justify-content: center; }
.partners .mark { font-size: 18px; font-weight: 800; letter-spacing: .02em; color: #61708f; opacity: .85; transition: color .25s, opacity .25s; }
.partners .mark:hover { color: var(--txt-soft); opacity: 1; }

/* ===================================================================
   PRODUCT MATRIX (connected overview)
   =================================================================== */
.matrix { padding: 100px 0; }
.matrix-frame { border: 1px solid var(--border); border-radius: 24px; padding: 44px 36px 32px; background: linear-gradient(180deg, var(--bg-3), var(--bg-2)); }
.matrix-top { display: flex; justify-content: center; }
.ai-node {
  display: inline-flex; align-items: center; gap: 11px; font-weight: 800; font-size: 15px;
  padding: 14px 24px; border-radius: 14px; color: var(--cyan);
  background: rgba(34,211,238,.08); border: 1.5px solid rgba(34,211,238,.4);
  box-shadow: 0 0 34px rgba(34,211,238,.22);
}
.ai-node .ic { width: 26px; height: 26px; border-radius: 8px; background: rgba(34,211,238,.16); display: grid; place-items: center; }
.matrix-connector { height: 26px; width: 2px; background: linear-gradient(var(--cyan), transparent); margin: 0 auto; }
.matrix-cards { display: grid; grid-template-columns: repeat(5,1fr); gap: 16px; position: relative; padding-top: 22px; }
.matrix-cards::before { content:""; position: absolute; top: 0; left: 10%; right: 10%; height: 2px; background: rgba(255,255,255,.1); }
.mx-card { position: relative; border-radius: 16px; padding: 22px 18px; background: var(--panel); border: 1px solid var(--border); transition: transform .3s var(--ease), border-color .3s, box-shadow .3s; }
.mx-card::before { content:""; position: absolute; top: -22px; left: 50%; width: 2px; height: 22px; background: rgba(255,255,255,.18); transform: translateX(-50%); }
.mx-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0,0,0,.35); }
.mx-card .mx-ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 14px; }
.mx-card .mx-kicker { font-size: 11px; color: var(--txt-mute); text-transform: uppercase; letter-spacing: .08em; }
.mx-card h4 { font-size: 18px; margin-top: 2px; }
.mx-card p { font-size: 12.5px; color: var(--txt-mute); margin-top: 8px; }
.mx-charge   { border-top: 3px solid var(--m-charge); }   .mx-charge .mx-ic{background:rgba(37,196,106,.14);color:var(--m-charge)}
.mx-electron { border-top: 3px solid #f59e0b; }            .mx-electron .mx-ic{background:rgba(245,158,11,.14);color:#f59e0b}
.mx-edge     { border-top: 3px solid #6366f1; }            .mx-edge .mx-ic{background:rgba(99,102,241,.16);color:#818cf8}
.mx-cortex   { border-top: 3px solid #ef4444; }            .mx-cortex .mx-ic{background:rgba(239,68,68,.14);color:#f87171}
.mx-auto     { border-top: 3px solid var(--m-electron); }  .mx-auto .mx-ic{background:rgba(59,130,246,.14);color:var(--m-electron)}
.matrix-infra { margin-top: 24px; }
.infra-label { text-align: center; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--txt-mute); margin-bottom: 14px; position: relative; }
.infra-label span { background: var(--bg-2); padding: 0 14px; position: relative; z-index: 2; }
.infra-label::before { content:""; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: var(--border); }
.asset-row { display: grid; grid-template-columns: repeat(6,1fr); gap: 12px; }
.asset { display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 16px 8px; border-radius: 12px; border: 1px solid var(--border); background: rgba(255,255,255,.02); transition: border-color .3s, background .3s; }
.asset:hover { border-color: var(--border-2); background: rgba(255,255,255,.05); }
.asset svg { color: var(--txt-soft); }
.asset span { font-size: 12px; color: var(--txt-soft); font-weight: 600; text-align: center; }

/* ===================================================================
   INDUSTRIES (photo cards)
   =================================================================== */
.industries { padding: 110px 0; background: var(--bg-2); border-top: 1px solid var(--border); }
.ind-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.ind-card { position: relative; height: 230px; border-radius: 16px; overflow: hidden; border: 1px solid var(--border); transition: transform .35s var(--ease), border-color .35s; }
.ind-card:hover { transform: translateY(-6px); border-color: var(--border-2); }
.ind-photo { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform .6s var(--ease); }
.ind-card:hover .ind-photo { transform: scale(1.07); }
.ind-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,9,18,.15) 0%, rgba(6,9,18,.55) 55%, rgba(6,9,18,.94) 100%); }
.ind-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 20px; display: flex; align-items: center; gap: 12px; }
.ind-ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; flex: none; background: rgba(255,255,255,.1); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.18); }
.ind-card h4 { font-size: 16px; line-height: 1.25; }

/* ===================================================================
   COMMAND CENTER DASHBOARD
   =================================================================== */
.command { padding: 110px 0; }
.command-grid { display: grid; grid-template-columns: .85fr 1.4fr; gap: 48px; align-items: center; }
.cmd-copy h2 { font-size: clamp(28px,3.6vw,44px); line-height: 1.1; margin-bottom: 18px; }
.cmd-copy h2 span { display: block; }
.cmd-copy p { color: var(--txt-soft); font-size: 16px; margin-bottom: 26px; max-width: 380px; }
.dash {
  border: 1px solid var(--border-2); border-radius: 18px; overflow: hidden;
  background: linear-gradient(180deg, #0c1426, #0a1020);
  box-shadow: 0 30px 80px rgba(0,0,0,.5); display: grid; grid-template-columns: 168px 1fr;
}
.dash-side { background: rgba(0,0,0,.25); border-right: 1px solid var(--border); padding: 16px 12px; }
.dash-brand { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 14px; padding: 6px 8px 16px; }
.dash-nav { display: grid; gap: 3px; }
.dash-nav a { font-size: 12.5px; color: var(--txt-mute); padding: 8px 10px; border-radius: 8px; display:flex; align-items:center; gap:8px; }
.dash-nav a.active { background: rgba(59,130,246,.14); color: var(--txt); }
.dash-main { padding: 16px; }
.dash-stats { display: grid; grid-template-columns: repeat(5,1fr); gap: 10px; margin-bottom: 12px; }
.dstat { padding: 12px; border-radius: 10px; background: rgba(255,255,255,.03); border: 1px solid var(--border); }
.dstat .k { font-size: 10px; color: var(--txt-mute); }
.dstat .v { font-size: 19px; font-weight: 800; margin-top: 3px; }
.dstat .v.alert { color: #f87171; }
.dash-panels { display: grid; grid-template-columns: 1fr 1.2fr 1fr 1.1fr; gap: 10px; }
.dpanel { padding: 12px; border-radius: 10px; background: rgba(255,255,255,.03); border: 1px solid var(--border); }
.dpanel h6 { font-size: 11px; color: var(--txt-soft); margin-bottom: 10px; font-weight: 700; }
.dpanel svg { width: 100%; height: auto; }
.dlegend { display: grid; gap: 5px; margin-top: 8px; }
.dlegend div { display: flex; align-items: center; gap: 6px; font-size: 10px; color: var(--txt-mute); }
.dlegend .dot { width: 7px; height: 7px; border-radius: 50%; }
.dalerts { display: grid; gap: 8px; }
.dalert { display: flex; gap: 8px; align-items: flex-start; }
.dalert .ad { width: 7px; height: 7px; border-radius: 50%; margin-top: 4px; flex: none; }
.dalert .at { font-size: 11px; color: var(--txt-soft); font-weight: 600; }
.dalert .as { font-size: 9.5px; color: var(--txt-mute); }

/* ===================================================================
   LIVE INTERACTIVE WIDGETS
   =================================================================== */
.live { padding: 110px 0; }
.live-feature { border: 1px solid var(--border-2); border-radius: 22px; overflow: hidden; background: linear-gradient(180deg,var(--bg-3),var(--bg-2)); margin-bottom: 22px; }
.live-feature .lf-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 22px; border-bottom: 1px solid var(--border); flex-wrap: wrap; gap: 10px; }
.live-feature .lf-head .lf-t { font-weight: 800; font-size: 16px; display: flex; align-items: center; gap: 10px; }
.live-feature .lf-head .lf-t .lb { font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--cyan); padding: 3px 9px; border: 1px solid rgba(34,211,238,.35); border-radius: 999px; }
.live-feature .lf-head .lf-d { font-size: 12.5px; color: var(--txt-mute); }
.live-feature .lf-open { font-size: 12.5px; font-weight: 700; color: var(--txt-soft); padding: 8px 14px; border: 1px solid var(--border-2); border-radius: 999px; transition: background .2s; }
.live-feature .lf-open:hover { background: rgba(255,255,255,.06); color: var(--txt); }
.live-frame { position: relative; width: 100%; background: #060912; }
.live-frame iframe { display: block; width: 100%; border: 0; }
.live-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 980px){ .live-row { grid-template-columns: 1fr; } }

/* footer banner */
.fbanner { padding: 54px 0; text-align: center; background: linear-gradient(180deg, var(--bg-2), #0a1430); border-top: 1px solid var(--border); position: relative; overflow: hidden; }
.fbanner::before { content:""; position:absolute; inset:0; background: radial-gradient(ellipse 60% 120% at 50% 120%, rgba(59,130,246,.25), transparent 60%); }
.fbanner > * { position: relative; z-index: 2; }
.fbanner h3 { font-size: clamp(26px,4vw,42px); font-weight: 800; }
.fbanner p { margin-top: 12px; font-size: 15px; font-weight: 600; }
.fbanner .w { color: var(--green); } .fbanner .b { color: var(--cyan); } .fbanner .p { color: var(--purple); } .fbanner .g { color: var(--green); }
.footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; }
.footer .socials { display: flex; gap: 12px; margin-top: 18px; }
.footer .socials a { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--border); display: grid; place-items: center; color: var(--txt-soft); transition: background .2s, color .2s; }
.footer .socials a:hover { background: rgba(255,255,255,.06); color: var(--txt); }

@media (max-width: 980px) {
  .matrix-cards { grid-template-columns: repeat(2,1fr); }
  .matrix-cards::before, .mx-card::before { display: none; }
  .asset-row { grid-template-columns: repeat(3,1fr); }
  .ind-grid { grid-template-columns: repeat(2,1fr); }
  .command-grid { grid-template-columns: 1fr; }
  .dash { grid-template-columns: 1fr; }
  .dash-side { display: none; }
  .dash-stats { grid-template-columns: repeat(2,1fr); }
  .dash-panels { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .nav-actions .nav-login { display: none; }
}
@media (max-width: 560px) {
  .matrix-cards, .asset-row, .ind-grid, .dash-stats, .dash-panels { grid-template-columns: 1fr; }
}

/* ===================================================================
   LEGAL / POLICY PAGES
   =================================================================== */
.legal{padding:130px 0 80px}
.legal .legal-wrap{max-width:820px;margin:0 auto}
.legal .back{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--txt-soft);margin-bottom:24px}
.legal .back:hover{color:var(--txt)}
.legal h1{font-size:clamp(30px,4vw,44px);margin-bottom:10px}
.legal .updated{color:var(--txt-mute);font-size:13px;margin-bottom:14px}
.legal .note{background:rgba(251,146,60,.08);border:1px solid rgba(251,146,60,.28);border-radius:12px;padding:14px 16px;font-size:13px;color:var(--txt-soft);margin-bottom:34px}
.legal h2{font-size:20px;margin:34px 0 12px;font-weight:800}
.legal h3{font-size:15px;margin:20px 0 8px;font-weight:700;color:var(--txt)}
.legal p,.legal li{font-size:14.5px;color:var(--txt-soft);line-height:1.75}
.legal ul{margin:10px 0 10px 22px;display:grid;gap:7px}
.legal a{color:var(--cyan);text-decoration:underline}
.legal table{width:100%;border-collapse:collapse;margin:14px 0;font-size:13px}
.legal th,.legal td{border:1px solid var(--border);padding:10px 12px;text-align:left;vertical-align:top}
.legal th{background:rgba(255,255,255,.03);color:var(--txt);font-weight:700}
.legal td{color:var(--txt-soft)}
.legal .legal-foot{margin-top:50px;padding-top:24px;border-top:1px solid var(--border);font-size:13px;color:var(--txt-mute);display:flex;gap:18px;flex-wrap:wrap}

/* ===================================================================
   COOKIE CONSENT
   =================================================================== */
.cc-banner{position:fixed;left:20px;right:20px;bottom:20px;z-index:1000;max-width:560px;margin:0 auto;
  background:rgba(10,18,36,.92);backdrop-filter:blur(16px);border:1px solid var(--border-2);border-radius:16px;
  padding:20px 22px;box-shadow:0 24px 60px rgba(0,0,0,.5);transform:translateY(140%);transition:transform .5s var(--ease)}
.cc-banner.show{transform:none}
.cc-banner h4{font-size:15px;font-weight:800;margin-bottom:7px;display:flex;align-items:center;gap:9px}
.cc-banner p{font-size:12.5px;color:var(--txt-soft);line-height:1.6}
.cc-banner p a{color:var(--cyan);text-decoration:underline}
.cc-actions{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.cc-btn{font-family:var(--font);font-size:13px;font-weight:700;border-radius:999px;padding:10px 18px;cursor:pointer;border:1px solid transparent;transition:transform .15s,background .2s}
.cc-btn:hover{transform:translateY(-1px)}
.cc-accept{color:#061018;background:linear-gradient(100deg,var(--green),var(--cyan));box-shadow:0 6px 20px rgba(37,196,106,.25)}
.cc-reject{color:var(--txt);background:rgba(255,255,255,.06);border-color:var(--border-2)}
.cc-prefs{color:var(--txt-soft);background:transparent;border-color:var(--border)}
.cc-prefs:hover{color:var(--txt)}
/* modal */
.cc-modal{position:fixed;inset:0;z-index:1001;display:none;align-items:center;justify-content:center;padding:20px;
  background:rgba(3,6,12,.7);backdrop-filter:blur(6px)}
.cc-modal.show{display:flex}
.cc-dialog{width:100%;max-width:520px;max-height:86vh;overflow:auto;background:var(--panel);border:1px solid var(--border-2);border-radius:18px;padding:26px}
.cc-dialog h3{font-size:19px;font-weight:800;margin-bottom:8px}
.cc-dialog .cc-sub{font-size:13px;color:var(--txt-soft);margin-bottom:18px}
.cc-cat{border:1px solid var(--border);border-radius:12px;padding:15px 16px;margin-bottom:12px}
.cc-cat .cc-cat-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.cc-cat h5{font-size:14px;font-weight:700}
.cc-cat p{font-size:12px;color:var(--txt-mute);margin-top:6px;line-height:1.55}
/* toggle */
.cc-tog{position:relative;width:42px;height:24px;flex:none}
.cc-tog input{opacity:0;width:0;height:0;position:absolute}
.cc-track{position:absolute;inset:0;border-radius:999px;background:rgba(255,255,255,.14);transition:background .2s;cursor:pointer}
.cc-track::before{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .2s}
.cc-tog input:checked+.cc-track{background:linear-gradient(100deg,var(--green),var(--cyan))}
.cc-tog input:checked+.cc-track::before{transform:translateX(18px)}
.cc-tog input:disabled+.cc-track{background:rgba(37,196,106,.5);cursor:not-allowed}
.cc-locktxt{font-size:10px;color:var(--mute);font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.cc-modal-actions{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.cc-modal-actions .cc-btn{flex:1;min-width:130px;text-align:center}
.footer .cc-settings{background:none;border:none;color:var(--txt-soft);font:inherit;font-size:14px;cursor:pointer;padding:0;transition:color .2s}
.footer .cc-settings:hover{color:var(--txt)}
@media(max-width:560px){.cc-banner{left:12px;right:12px;bottom:12px;padding:17px 18px}}

/* ===================================================================
   RESPONSIVE
   =================================================================== */
@media (max-width: 980px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .hero-visual { max-width: 460px; margin: 10px auto 0; }
  .pillars { grid-template-columns: repeat(2,1fr); }
  .module, .module.reverse { grid-template-columns: 1fr; gap: 32px; }
  .module .mod-copy, .module.reverse .mod-copy,
  .module .mod-visual, .module.reverse .mod-visual { order: initial; }
  .market-grid, .found-grid { grid-template-columns: repeat(2,1fr); }
  .infra-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .nav-links { display: none; }
  .nav-burger { display: flex; }
}
@media (max-width: 560px) {
  .pillars, .market-grid, .found-grid, .spec-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero { padding-top: 130px; }
  .cta-card { padding: 50px 24px; }
}