/* =====================================================================
   GravOS — TRUE LIGHT (white) theme — PREVIEW override.
   Loads after styles.css. Flips surfaces to white and text to dark,
   and patches the spots that hardcode dark colors. The product
   dashboard and the live-widget iframes intentionally stay dark.
   ===================================================================== */
:root {
  --bg:        #f6f8fc;
  --bg-2:      #eef2f8;
  --bg-3:      #e8eef7;
  --panel:     #ffffff;
  --panel-2:   #f3f6fb;
  --border:    rgba(20,40,80,0.12);
  --border-2:  rgba(20,40,80,0.20);
  --txt:       #0f1b33;
  --txt-soft:  #43547a;
  --txt-mute:  #6b7a9c;
}
body { background: var(--bg); color: var(--txt); }

/* Accent gradient text — darken stops so they read on white */
.grad-green { background: linear-gradient(100deg,#1f9d52,#16a34a); -webkit-background-clip:text; background-clip:text; color:transparent; }
.grad-blue  { background: linear-gradient(100deg,#2f6fe0,#2563eb); -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; }
/* hero "commands" sits over a bright video — subtle dark edge keeps the vibrant gradient crisp */
.hero .grad-multi { filter: drop-shadow(0 1px 1.5px rgba(8,16,32,.30)); }

/* NAV */
.nav.scrolled { background: rgba(255,255,255,.82); border-bottom: 1px solid var(--border); }
.nav-burger span { background: #0f1b33; }

/* HERO — light scrim over the video so dark text reads */
.hero-video::after { background: rgba(246,248,252,.40); }
.hero-video video { opacity: .26; }
.hero-video-overlay {
  background:
    linear-gradient(90deg, rgba(246,248,252,.97) 0%, rgba(246,248,252,.86) 38%, rgba(246,248,252,.55) 70%, rgba(238,243,250,.45) 100%),
    linear-gradient(0deg, var(--bg) 2%, rgba(246,248,252,.20) 32%, rgba(246,248,252,0) 58%) !important;
}
@media (max-width: 980px){
  .hero-video-overlay { background: linear-gradient(0deg, var(--bg) 4%, rgba(246,248,252,.86) 45%, rgba(246,248,252,.72) 100%) !important; }
}
/* hero core gif keeps its dark frame (it's a UI/console panel) */
.hero-visual { background: #0c1426; }

/* Translucent-white fills → subtle dark so they show on white */
.btn-ghost { color: var(--txt); background: rgba(15,27,51,.04); border-color: var(--border-2); }
.btn-ghost:hover { background: rgba(15,27,51,.08); }
.hero-chip { color: var(--txt-soft); background: rgba(15,27,51,.03); border-color: var(--border); }
.mod-outcome, .launch-points .lp { background: rgba(15,27,51,.03); }
.live-feature .lf-open:hover, .footer .socials a:hover { background: rgba(15,27,51,.06); }

/* Section grounds */
.foundation, .products, .platform { background: var(--bg-2); }

/* Footer-banner → light */
.fbanner { background: linear-gradient(180deg, var(--bg-2), #dfe7f4) !important; }
.fbanner::before { background: radial-gradient(ellipse 60% 120% at 50% 120%, rgba(59,130,246,.16), transparent 60%); }

/* Footer */
.footer { background: var(--bg); }

/* GravOS wordmark: the "Grav" half is white → darken for light bg */
.logo-gravos .gw .w { color: #0f1b33; }

/* KEEP the product dashboard dark (it reads as a product screenshot) */
.dash { --txt:#eaf0ff; --txt-soft:#aab6d6; --txt-mute:#6f7da3; --border:rgba(255,255,255,.08); --border-2:rgba(255,255,255,.14); }
/* KEEP the live-widget iframe backing dark */
.live-frame { background: #060912; }

/* Cookie consent UI → light */
.cc-banner, .cc-modal .cc-dialog { background:#ffffff !important; color:var(--txt) !important; border:1px solid var(--border) !important; box-shadow:0 20px 60px rgba(20,40,80,.18) !important; }
.cc-banner a, .cc-dialog a { color:#2563eb; }
.cc-cat { border-color: var(--border) !important; }
.cc-btn.cc-prefs, .cc-btn.cc-reject { color: var(--txt); border-color: var(--border-2); }

/* ===================================================================
   HERO video — show more of the footage (less washed-out)
   =================================================================== */
.hero-video::after { background: rgba(246,248,252,.10); }
.hero-video video { opacity: .60; }
.hero-video-overlay {
  background:
    linear-gradient(90deg, rgba(246,248,252,.97) 0%, rgba(246,248,252,.88) 30%, rgba(246,248,252,.46) 60%, rgba(246,248,252,.18) 100%),
    linear-gradient(0deg, var(--bg) 1%, rgba(246,248,252,.16) 26%, rgba(246,248,252,0) 55%) !important;
}
@media (max-width: 980px){
  .hero-video-overlay { background: linear-gradient(0deg, var(--bg) 4%, rgba(246,248,252,.80) 45%, rgba(246,248,252,.6) 100%) !important; }
  .hero-video video { opacity: .5; }
}

/* ===================================================================
   NAV alignment — keep every item on one line, fit the extra link
   =================================================================== */
.nav-links { gap: 20px; margin-left: 26px; }
.nav-links a { white-space: nowrap; font-size: 13.5px; }
.brand-logo { height: 36px; }
.nav-login { padding: 8px 14px; }
.nav-cta { padding: 9px 15px; }

/* ===================================================================
   TOP ANNOUNCEMENT BAR (rolling updates) + nav offset
   =================================================================== */
.has-topbar .nav { top: 38px; }
.has-topbar.tb-hidden .nav { top: 0; }
.tb-hidden .topbar { display: none; }
.topbar {
  position: fixed; top: 0; left: 0; right: 0; height: 38px; z-index: 120;
  display: flex; align-items: center; gap: 14px; padding: 0 16px; overflow: hidden;
  background: linear-gradient(90deg,#0f1b33,#16223f 55%,#1b2a52);
  color: #e8eefb; border-bottom: 1px solid rgba(255,255,255,.08); font-size: 13px;
}
.topbar .tb-label { flex: none; display: inline-flex; align-items: center; gap: 7px; font-weight: 800; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #7ef0a8; }
.topbar .tb-label .dot { width: 7px; height: 7px; border-radius: 50%; background: #25c46a; box-shadow: 0 0 8px #25c46a; animation: tbpulse 1.6s infinite; }
@keyframes tbpulse { 0%{box-shadow:0 0 0 0 rgba(37,196,106,.6)} 70%{box-shadow:0 0 0 7px rgba(37,196,106,0)} 100%{box-shadow:0 0 0 0 rgba(37,196,106,0)} }
.topbar .tb-viewport { position: relative; flex: 1; overflow: hidden; height: 100%; -webkit-mask-image: linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent); mask-image: linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent); }
.topbar .tb-track { position: absolute; top: 0; display: flex; align-items: center; gap: 46px; white-space: nowrap; height: 100%; animation: tbscroll 40s linear infinite; }
.topbar:hover .tb-track { animation-play-state: paused; }
@keyframes tbscroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.topbar .tb-item { display: inline-flex; align-items: center; gap: 9px; color: #d7e1f6; font-size: 13px; }
.topbar .tb-item a { color: #ffffff; }
.topbar .tb-item a:hover { text-decoration: underline; }
.topbar .tb-item .tg { font-size: 9.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; }
.topbar .tb-cta { flex: none; font-weight: 700; font-size: 12.5px; color: #9fe7ff; }
.topbar .tb-close { flex: none; background: none; border: 0; color: #9fb0d6; cursor: pointer; font-size: 17px; line-height: 1; padding: 0 2px; }
.topbar .tb-close:hover { color: #fff; }
@media (max-width: 620px){ .topbar .tb-cta { display: none; } }

/* ===================================================================
   UPDATES / NEWSROOM section
   =================================================================== */
.updates { padding: 100px 0; background: var(--bg); }
.upd-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.upd-card { display: flex; flex-direction: column; gap: 10px; padding: 22px; border: 1px solid var(--border); border-radius: 16px; background: var(--panel); box-shadow: 0 10px 30px rgba(20,40,80,.06); transition: transform .2s, box-shadow .2s; }
.upd-card:hover { transform: translateY(-3px); box-shadow: 0 18px 44px rgba(20,40,80,.12); }
.upd-meta { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--txt-mute); }
.upd-tag { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; }
.upd-card h4 { font-size: 17px; line-height: 1.25; }
.upd-card p { font-size: 14px; color: var(--txt-soft); line-height: 1.6; }
.upd-card .upd-link { margin-top: auto; font-weight: 700; font-size: 13.5px; color: #2563eb; }
@media (max-width: 980px){ .upd-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .upd-grid { grid-template-columns: 1fr; } }

/* ===================================================================
   HERO text legibility on the light theme (over the video)
   =================================================================== */
.hero p.lead { color: #16233f; font-weight: 500; text-shadow: 0 1px 2px rgba(246,248,252,.55); }
.hero .hero-copy h1 { text-shadow: 0 1px 2px rgba(246,248,252,.5); }

/* Eyebrow chip — stronger so "GravOS · Powered by Graviti AI" reads */
.hero .eyebrow {
  color: #0b6c86; font-weight: 800;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(11,108,134,.35);
  box-shadow: 0 2px 10px rgba(20,40,80,.08);
}
.hero .eyebrow .dot { background: #0891b2; box-shadow: 0 0 10px rgba(8,145,178,.6); }

/* Hero feature chips — solid light pills with dark text */
.hero .hero-chip {
  color: #16233f; font-weight: 600;
  background: rgba(255,255,255,.80);
  border: 1px solid rgba(20,40,80,.18);
  box-shadow: 0 2px 10px rgba(20,40,80,.07);
}
.hero .hero-chip svg { color: #0891b2; }

/* ===================================================================
   HERO — single column (the dark core graphic was removed)
   =================================================================== */
.hero .wrap { grid-template-columns: 1fr; }
.hero-copy { max-width: 760px; }
.hero p.lead { max-width: 640px; }
.hero { padding-bottom: 110px; }

/* ===================================================================
   HERO — hold the background still (motion was distracting).
   Show the static poster instead of the autoplaying video.
   =================================================================== */
.hero-video video { display: none; }
.hero-video { background-position: center; }

/* ===================================================================
   VALUE / BUSINESS OUTCOMES section (leads with customer value)
   =================================================================== */
.value { padding: 92px 0 30px; background: var(--bg); }
.value-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: 46px; }
.value-card { display: flex; flex-direction: column; gap: 12px; padding: 30px 26px; border: 1px solid var(--border); border-radius: 18px; background: var(--panel); box-shadow: 0 12px 34px rgba(20,40,80,.07); transition: transform .2s, box-shadow .2s; }
.value-card:hover { transform: translateY(-3px); box-shadow: 0 20px 48px rgba(20,40,80,.12); }
.value-card .vc-ic { width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center; box-shadow: 0 8px 20px rgba(20,40,80,.16); }
.value-card h3 { font-size: 21px; }
.value-card p { font-size: 15px; color: var(--txt-soft); line-height: 1.65; }
.value-card .vc-metric { margin-top: auto; padding-top: 8px; font-size: 13.5px; font-weight: 700; display: inline-flex; align-items: center; gap: 8px; }
.value-card .vc-metric sup { font-weight: 400; }
.value-foot { text-align: center; font-size: 12.5px; color: var(--txt-mute); margin-top: 24px; }
@media (max-width: 980px){ .value-grid { grid-template-columns: 1fr; } }

/* ===================================================================
   Outcome-led hero subhead
   =================================================================== */
.hero p.lead .lead-strong { display: block; font-size: 1.12em; font-weight: 700; color: #0f1b33; margin-bottom: 10px; line-height: 1.4; }

/* ===================================================================
   WHO IT'S FOR — segment self-selection
   =================================================================== */
.who { margin-top: 58px; padding-top: 44px; border-top: 1px solid var(--border); }
.who-head { text-align: center; font-size: 20px; margin-bottom: 26px; color: var(--txt); }
.who-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.who-card { display: flex; flex-direction: column; gap: 9px; padding: 24px 22px; border: 1px solid var(--border); border-radius: 16px; background: var(--panel); transition: transform .2s, box-shadow .2s, border-color .2s; }
.who-card:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(20,40,80,.10); border-color: var(--border-2); }
.who-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(15,27,51,.04); }
.who-card h4 { font-size: 16.5px; }
.who-card p { font-size: 14px; color: var(--txt-soft); line-height: 1.6; }
.who-card .who-link { margin-top: auto; padding-top: 6px; font-size: 13.5px; font-weight: 700; color: #2563eb; }
@media (max-width: 980px){ .who-grid { grid-template-columns: 1fr; } }

/* ===================================================================
   MATURITY MODEL — proprietary POV section
   =================================================================== */
.maturity { padding: 100px 0; background: var(--bg-2); border-top: 1px solid var(--border); }
.mat-track { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin-top: 44px; position: relative; }
.mat-step { position: relative; padding: 26px 22px; border: 1px solid var(--border); border-radius: 16px; background: var(--panel); opacity: .82; }
.mat-step .mat-lvl { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--txt-mute); }
.mat-step h4 { font-size: 18px; margin: 8px 0 8px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.mat-step p { font-size: 13.5px; color: var(--txt-soft); line-height: 1.6; }
.mat-step.is-goal {
  opacity: 1; border-color: rgba(37,196,106,.45);
  background: linear-gradient(160deg, rgba(37,196,106,.09), var(--panel) 60%);
  box-shadow: 0 18px 44px rgba(20,40,80,.12);
}
.mat-step.is-goal .mat-lvl { color: #16a34a; }
.mat-badge { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: linear-gradient(120deg,#25c46a,#0891b2); padding: 3px 9px; border-radius: 999px; }
.mat-note { margin-top: 26px; text-align: center; font-size: 15px; color: var(--txt-soft); max-width: 780px; margin-left: auto; margin-right: auto; line-height: 1.7; }
.mat-note strong { color: var(--txt); }
.mat-reassure {
  margin: 30px auto 0; max-width: 860px; display: flex; align-items: flex-start; gap: 12px;
  padding: 16px 20px; border: 1px solid rgba(37,196,106,.30); border-radius: 14px;
  background: rgba(37,196,106,.07); font-size: 14px; color: var(--txt-soft); line-height: 1.6;
}
.mat-reassure svg { flex: none; margin-top: 2px; }
@media (max-width: 980px){ .mat-track { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .mat-track { grid-template-columns: 1fr; } }

/* ===================================================================
   INDUSTRIES — photo cards are always dark, so force light type
   (they inherited the light theme's dark text and became unreadable)
   =================================================================== */
.ind-card { height: auto; min-height: 270px; }
.ind-overlay { background: linear-gradient(180deg, rgba(6,9,18,.30) 0%, rgba(6,9,18,.72) 48%, rgba(6,9,18,.96) 100%); }
.ind-body { flex-direction: column; align-items: flex-start; gap: 10px; padding: 22px; }
.ind-card h4 { color: #ffffff; font-size: 17px; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.ind-card .ind-outcome { color: rgba(233,240,255,.90); font-size: 13.5px; line-height: 1.55; text-shadow: 0 1px 3px rgba(0,0,0,.55); }
.ind-ic { color: #ffffff; width: 38px; height: 38px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28); }

/* ===================================================================
   SOLUTION PAGES (template — reused by every segment page)
   =================================================================== */
.sol-hero { padding: 150px 0 70px; background: linear-gradient(180deg, var(--bg-3), var(--bg)); border-bottom: 1px solid var(--border); }
.sol-back { display: inline-block; font-size: 13.5px; font-weight: 600; color: var(--txt-mute); margin-bottom: 20px; }
.sol-back:hover { color: var(--txt); }
.sol-hero h1 { font-size: clamp(32px,5vw,58px); margin: 18px 0 18px; max-width: 900px; }
.sol-lead { font-size: clamp(16px,1.7vw,19px); color: var(--txt-soft); max-width: 700px; line-height: 1.7; margin-bottom: 30px; }
.sol-metrics { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }
.sol-metric { display: inline-flex; flex-direction: column; gap: 2px; padding: 12px 18px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); font-size: 13px; color: var(--txt-soft); }
.sol-metric strong { font-size: 13px; color: var(--txt); }

/* Problem cards */
.sol-problem { padding: 96px 0; background: var(--bg-2); }
.prob-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.prob-card { position: relative; padding: 26px 24px; border: 1px solid var(--border); border-radius: 16px; background: var(--panel); }
.prob-quote { position: absolute; top: 6px; right: 18px; font-size: 54px; line-height: 1; color: rgba(20,40,80,.10); font-weight: 800; }
.prob-card p { font-size: 15.5px; font-weight: 600; color: var(--txt); line-height: 1.55; margin-bottom: 12px; position: relative; }
.prob-cost { font-size: 13.5px; color: var(--txt-mute); line-height: 1.55; }

/* Before / after */
.sol-change { padding: 96px 0; background: var(--bg); }
.ba-table { border: 1px solid var(--border); border-radius: 16px; overflow: hidden; background: var(--panel); }
.ba-row { display: grid; grid-template-columns: 1fr 1fr; }
.ba-row > div { padding: 16px 22px; font-size: 14.5px; line-height: 1.6; border-bottom: 1px solid var(--border); }
.ba-row > div:first-child { color: var(--txt-mute); border-right: 1px solid var(--border); }
.ba-row > div:last-child { color: var(--txt); font-weight: 600; }
.ba-row:last-child > div { border-bottom: none; }
.ba-head > div { font-size: 11.5px !important; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; background: var(--bg-2); color: var(--txt-mute) !important; }
.ba-head > div:last-child { color: #16a34a !important; }

/* How it works */
.sol-how { padding: 96px 0; background: var(--bg-2); }
.how-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.how-step { padding: 28px 26px; border: 1px solid var(--border); border-radius: 16px; background: var(--panel); }
.how-num { font-size: 12px; font-weight: 800; letter-spacing: .14em; color: #16a34a; }
.how-step h4 { font-size: 18px; margin: 10px 0 8px; }
.how-step p { font-size: 14.5px; color: var(--txt-soft); line-height: 1.65; }

/* Proof */
.sol-proof { padding: 70px 0; background: var(--bg); }
.proof-card { max-width: 920px; margin: 0 auto; padding: 40px; border: 1px dashed var(--border-2); border-radius: 20px; background: var(--panel); text-align: center; }
.proof-label { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--txt-mute); }
.proof-card h3 { font-size: clamp(19px,2.4vw,26px); line-height: 1.4; margin: 16px 0 12px; color: var(--txt); }
.proof-attr { font-size: 14px; color: var(--txt-mute); margin-bottom: 26px; }
.proof-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-bottom: 18px; }
.proof-stats strong { display: block; font-size: 30px; font-weight: 800; color: #16a34a; }
.proof-stats span { font-size: 13px; color: var(--txt-mute); }
.proof-note { font-size: 12.5px; color: var(--txt-mute); font-style: italic; }

/* Business case */
.sol-case { padding: 96px 0; background: var(--bg-2); }
.case-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 22px; }
.case-card { padding: 28px 26px; border: 1px solid var(--border); border-radius: 16px; background: var(--panel); }
.case-ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 14px; }
.case-card h4 { font-size: 19px; margin-bottom: 8px; }
.case-card p { font-size: 14.5px; color: var(--txt-soft); line-height: 1.65; margin-bottom: 12px; }
.case-model { font-size: 13px; font-weight: 700; color: #2563eb; }
.case-offer { margin-top: 30px; padding: 30px 34px; border-radius: 18px; border: 1px solid rgba(37,196,106,.3); background: linear-gradient(120deg, rgba(37,196,106,.10), rgba(34,211,238,.06)); display: flex; align-items: center; justify-content: space-between; gap: 26px; flex-wrap: wrap; }
.case-offer h3 { font-size: 22px; margin-bottom: 6px; }
.case-offer p { font-size: 14.5px; color: var(--txt-soft); max-width: 560px; }

/* Compatibility */
.sol-compat { padding: 96px 0; background: var(--bg); }
.compat-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.compat-item { padding: 22px; border: 1px solid var(--border); border-radius: 14px; background: var(--panel); }
.compat-item h5 { font-size: 15px; margin-bottom: 6px; }
.compat-item p { font-size: 13.5px; color: var(--txt-soft); line-height: 1.6; }

/* FAQ */
.sol-faq { padding: 96px 0; background: var(--bg-2); }
.faq-list { max-width: 860px; margin: 0 auto; display: grid; gap: 12px; }
.faq-item { border: 1px solid var(--border); border-radius: 14px; background: var(--panel); padding: 4px 20px; }
.faq-item summary { cursor: pointer; padding: 16px 0; font-size: 15.5px; font-weight: 700; color: var(--txt); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 21px; font-weight: 400; color: var(--txt-mute); flex: none; }
.faq-item[open] summary::after { content: "–"; }
.faq-item p { padding: 0 0 18px; font-size: 14.5px; color: var(--txt-soft); line-height: 1.7; }

@media (max-width: 980px){
  .prob-grid, .how-grid, .compat-grid, .case-grid { grid-template-columns: 1fr 1fr; }
  .proof-stats { grid-template-columns: 1fr; }
}
@media (max-width: 620px){
  .prob-grid, .how-grid, .compat-grid, .case-grid { grid-template-columns: 1fr; }
  .ba-row { grid-template-columns: 1fr; }
  .ba-row > div:first-child { border-right: none; }
  .sol-hero { padding-top: 120px; }
}

/* ===================================================================
   SOLUTION PAGE — audience nav chips
   =================================================================== */
.aud-nav { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.aud-chip { display: flex; flex-direction: column; gap: 3px; padding: 14px 20px; border: 1px solid var(--border-2); border-radius: 14px; background: var(--panel); transition: transform .2s, box-shadow .2s, border-color .2s; }
.aud-chip:hover { transform: translateY(-2px); border-color: #16a34a; box-shadow: 0 12px 30px rgba(20,40,80,.10); }
.aud-chip strong { font-size: 14.5px; color: var(--txt); }
.aud-chip span { font-size: 12.5px; color: var(--txt-mute); }

/* Audience sections (CPO / Fleets) */
.sol-aud { padding: 96px 0; background: var(--bg); }
.sol-aud.alt { background: var(--bg-2); }
.aud-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.aud-card { padding: 26px 24px; border: 1px solid var(--border); border-radius: 16px; background: var(--panel); }
.aud-card h4 { font-size: 17.5px; margin-bottom: 9px; }
.aud-card p { font-size: 14.5px; color: var(--txt-soft); line-height: 1.65; }

/* ===================================================================
   STRATEGIC PARTNER — dark contrast band (the differentiator)
   =================================================================== */
.partner {
  padding: 100px 0; background: linear-gradient(160deg,#0f1b33,#16223f 60%,#1b2a52);
  --txt:#eef2fb; --txt-soft:#bcc8e4; --txt-mute:#8b99bf;
  --border:rgba(255,255,255,.12); --border-2:rgba(255,255,255,.2); --panel:rgba(255,255,255,.05);
  color: var(--txt);
}
.partner .section-head h2 { color: #fff; }
.partner .section-head p { color: #bcc8e4; }
.partner .eyebrow { color:#7ef0a8; background: rgba(37,196,106,.12); border-color: rgba(37,196,106,.35); }
.partner .eyebrow .dot { background:#25c46a; box-shadow:0 0 10px #25c46a; }
.partner .grad-green { background: linear-gradient(100deg,#7ef0a8,#25c46a); -webkit-background-clip:text; background-clip:text; color:transparent; }

.partner-split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 44px; }
.partner-col { padding: 28px 26px; border-radius: 18px; border: 1px solid rgba(255,255,255,.12); }
.partner-them { background: rgba(255,255,255,.03); }
.partner-us { background: linear-gradient(150deg, rgba(37,196,106,.16), rgba(34,211,238,.07)); border-color: rgba(37,196,106,.42); }
.pc-label { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 16px; }
.partner-them .pc-label { color: #8b99bf; }
.partner-us .pc-label { color: #7ef0a8; }
.partner-col ul { list-style: none; display: grid; gap: 12px; }
.partner-col li { font-size: 14.5px; line-height: 1.6; padding-left: 26px; position: relative; }
.partner-them li { color: #9aa8c8; }
.partner-them li::before { content: "×"; position: absolute; left: 4px; top: -1px; font-size: 17px; color: #6b7a9c; }
.partner-us li { color: #e6edfb; }
.partner-us li::before { content: "✓"; position: absolute; left: 2px; color: #25c46a; font-weight: 800; }
.partner-us li strong { color: #fff; }

.partner-sub { text-align: center; font-size: 21px; margin: 54px 0 24px; color: #fff; }
.partner-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
.pg-card { padding: 24px 22px; border: 1px solid rgba(255,255,255,.12); border-radius: 16px; background: rgba(255,255,255,.04); }
.pg-num { font-size: 12px; font-weight: 800; letter-spacing: .14em; color: #22d3ee; }
.pg-card h4 { font-size: 16.5px; margin: 9px 0 8px; color: #fff; }
.pg-card p { font-size: 13.5px; color: #b9c5e2; line-height: 1.6; }

.rev-streams { margin-top: 46px; padding: 30px 32px; border-radius: 18px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); }
.rev-streams h4 { font-size: 16px; color: #fff; margin-bottom: 16px; text-align: center; }
.rev-grid { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.rev-pill { font-size: 13.5px; font-weight: 600; color: #eaf2ff; padding: 9px 16px; border-radius: 999px; border: 1px solid rgba(37,196,106,.4); background: rgba(37,196,106,.12); }
.rev-note { margin-top: 16px; text-align: center; font-size: 12.5px; color: #8b99bf; font-style: italic; }

/* ===================================================================
   V2G / V2X
   =================================================================== */
.v2g { padding: 100px 0; background: var(--bg); }
.v2g-feature { display: grid; grid-template-columns: 1.35fr 1fr; gap: 34px; align-items: start; margin-bottom: 44px; }
.v2g-copy { padding: 32px 30px; border: 1px solid var(--border); border-radius: 20px; background: var(--panel); }
.v2g-tag { display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #fff; background: linear-gradient(120deg,#25c46a,#0891b2); padding: 4px 11px; border-radius: 999px; margin-bottom: 14px; }
.v2g-copy h3 { font-size: clamp(21px,2.6vw,28px); margin-bottom: 10px; }
.v2g-copy > p { font-size: 15px; color: var(--txt-soft); line-height: 1.7; margin-bottom: 18px; }
.v2g-list { list-style: none; display: grid; gap: 12px; margin-bottom: 18px; }
.v2g-list li { font-size: 14.5px; color: var(--txt-soft); line-height: 1.6; padding-left: 26px; position: relative; }
.v2g-list li::before { content: "→"; position: absolute; left: 0; color: #16a34a; font-weight: 800; }
.v2g-list strong { color: var(--txt); }
.v2g-guard { font-size: 13.5px; color: var(--txt); background: rgba(37,196,106,.10); border: 1px solid rgba(37,196,106,.3); border-radius: 12px; padding: 14px 16px; line-height: 1.6; }
.v2g-panel { padding: 26px 24px; border-radius: 20px; border: 1px solid var(--border); background: linear-gradient(160deg,#0f1b33,#1b2a52); display: grid; gap: 12px; }
.v2g-stat { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px; border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); }
.v2g-stat span { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #7ef0a8; font-weight: 800; }
.v2g-stat strong { font-size: 15px; color: #fff; }
.v2g-cycle { margin-top: 4px; font-size: 13px; color: #b9c5e2; line-height: 1.6; text-align: center; font-style: italic; }
.v2g-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.v2g-card { padding: 24px 22px; border: 1px solid var(--border); border-radius: 16px; background: var(--panel); }
.v2g-card h4 { font-size: 16.5px; margin-bottom: 8px; }
.v2g-card p { font-size: 14px; color: var(--txt-soft); line-height: 1.65; }
.v2g-foot { margin-top: 24px; text-align: center; font-size: 12.5px; color: var(--txt-mute); font-style: italic; }

@media (max-width: 1080px){ .partner-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 980px){
  .aud-grid, .v2g-grid { grid-template-columns: 1fr 1fr; }
  .partner-split { grid-template-columns: 1fr; }
  .v2g-feature { grid-template-columns: 1fr; }
}
@media (max-width: 620px){
  .aud-grid, .v2g-grid, .partner-grid { grid-template-columns: 1fr; }
  .aud-nav .aud-chip { width: 100%; }
}

/* ===================================================================
   PRODUCT SCREENSHOTS (.shot) — framed app captures
   =================================================================== */
.shot-band { padding: 0 0 20px; background: var(--bg); margin-top: -30px; }
.shot { margin: 46px auto 0; max-width: 1080px; border: 1px solid var(--border-2); border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 26px 70px rgba(20,40,80,.16); }
.shot-lead { margin-top: 0; }
.shot-bar { display: flex; align-items: center; gap: 7px; padding: 10px 16px; background: linear-gradient(180deg,#f3f6fb,#e9eef7); border-bottom: 1px solid var(--border); }
.shot-bar .sd { width: 10px; height: 10px; border-radius: 50%; background: #cdd7e8; flex: none; }
.shot-bar .sd:first-child { background: #f6a6a0; }
.shot-bar .sd:nth-child(2) { background: #f7d08a; }
.shot-bar .sd:nth-child(3) { background: #9fd8a8; }
.shot-bar em { margin-left: 10px; font-style: normal; font-size: 12px; font-weight: 700; letter-spacing: .04em; color: #6b7a9c; }
.shot img { width: 100%; height: auto; display: block; }
.shot figcaption { padding: 14px 20px; font-size: 13.5px; line-height: 1.6; color: var(--txt-soft); background: var(--panel); border-top: 1px solid var(--border); }
/* on the dark partner band */
.shot.on-dark { border-color: rgba(255,255,255,.22); box-shadow: 0 26px 70px rgba(0,0,0,.45); }
.shot.on-dark figcaption { background: rgba(255,255,255,.06); color: #c6d2ea; border-top-color: rgba(255,255,255,.12); }
@media (max-width: 620px){
  .shot { margin-top: 32px; border-radius: 12px; }
  .shot figcaption { font-size: 12.5px; padding: 12px 14px; }
  .shot-bar em { display: none; }
}

/* ===================================================================
   GRAVOS NATIVE DASHBOARDS (.gd) — AI / VPP / BESS consoles
   Dark console styling so they read as the product on a light page.
   =================================================================== */
.gd {
  max-width: 1080px; margin: 46px auto 0; border-radius: 18px; overflow: hidden;
  background: linear-gradient(170deg,#0e1729,#131f3a 60%,#16233f);
  border: 1px solid rgba(255,255,255,.13); box-shadow: 0 26px 70px rgba(20,40,80,.28);
  color: #eaf0ff;
}
.gd-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 20px; border-bottom: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04); flex-wrap: wrap; }
.gd-title { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 14.5px; color: #fff; }
.gd-dot { width: 8px; height: 8px; border-radius: 50%; background: #25c46a; box-shadow: 0 0 9px #25c46a; }
.gd-live { font-size: 9.5px; font-weight: 800; letter-spacing: .1em; color: #7ef0a8; border: 1px solid rgba(37,196,106,.45); background: rgba(37,196,106,.14); padding: 2px 8px; border-radius: 999px; }
.gd-meta { font-size: 12px; color: #8b99bf; }
.gd-kpis { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: rgba(255,255,255,.08); }
.gd-kpi { padding: 16px 18px; background: #101b32; display: flex; flex-direction: column; gap: 3px; }
.gd-kpi span { font-size: 11px; color: #8b99bf; }
.gd-kpi strong { font-size: 24px; font-weight: 800; color: #fff; line-height: 1.1; }
.gd-kpi em { font-style: normal; font-size: 10.5px; color: #6f7da3; }
.gd-kpi .pos, .gd .pos { color: #4ade80; }
.gd-kpi .cy, .gd .cy { color: #22d3ee; }
.gd-kpi .warn, .gd .warn { color: #fbbf24; }
.gd-split { display: grid; grid-template-columns: 1.15fr 1fr; gap: 1px; background: rgba(255,255,255,.08); }
.gd-panel { padding: 18px 20px; background: #0e1729; }
.gd-panel h6 { font-size: 12px; font-weight: 800; letter-spacing: .04em; color: #cdd8f2; margin-bottom: 14px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.gd-tag { font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #22d3ee; background: rgba(34,211,238,.12); border: 1px solid rgba(34,211,238,.3); padding: 2px 7px; border-radius: 999px; }
.gd-panel svg { width: 100%; height: auto; display: block; }
.gd-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px; }
.gd-legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; color: #8b99bf; }
.gd-legend i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.gd-why { list-style: none; display: grid; gap: 12px; }
.gd-why li { display: grid; gap: 3px; padding: 11px 13px; border-radius: 10px; background: rgba(255,255,255,.04); border-left: 2px solid #22d3ee; }
.gd-why b { font-size: 12.5px; color: #fff; }
.gd-why span { font-size: 11.5px; color: #a9b6d6; line-height: 1.55; }
.gd-why.compact li { padding: 9px 12px; }
.gd-stream { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; padding: 13px 20px; border-top: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.03); }
.gd-slabel { font-size: 9.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #6f7da3; }
.gd-ev { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; color: #a9b6d6; font-family: ui-monospace,SFMono-Regular,Menlo,monospace; }
.gd-ev i { width: 6px; height: 6px; border-radius: 50%; }
.gd-ev i.ok { background: #25c46a; } .gd-ev i.cy { background: #22d3ee; } .gd-ev i.wn { background: #fbbf24; }
/* VPP event */
.gd-event { display: flex; gap: 16px; align-items: center; padding: 14px; border-radius: 12px; background: rgba(37,196,106,.09); border: 1px solid rgba(37,196,106,.28); margin-bottom: 14px; }
.gd-ering { flex: none; width: 74px; height: 74px; border-radius: 50%; display: grid; place-content: center; text-align: center; background: conic-gradient(#25c46a 94%, rgba(255,255,255,.10) 0); position: relative; }
.gd-ering::after { content:""; position:absolute; inset:8px; border-radius:50%; background:#0e1729; }
.gd-ering strong, .gd-ering span { position: relative; z-index: 1; }
.gd-ering strong { font-size: 17px; color: #fff; }
.gd-ering span { font-size: 8.5px; color: #8b99bf; }
.gd-einfo { display: grid; gap: 4px; }
.gd-einfo b { font-size: 12.5px; color: #fff; }
.gd-einfo span { font-size: 11.5px; color: #a9b6d6; }
.gd-bar { height: 6px; border-radius: 3px; background: rgba(255,255,255,.12); margin-top: 5px; overflow: hidden; }
.gd-bar i { display: block; height: 100%; background: linear-gradient(90deg,#25c46a,#22d3ee); }
/* BESS racks + table */
.gd-racks { display: grid; grid-template-columns: repeat(12,1fr); gap: 5px; margin-bottom: 14px; }
.gd-racks .rk { height: 30px; border-radius: 4px; background: #25c46a; opacity: .8; }
.gd-racks .rk.wn { background: #fbbf24; }
.gd-tbl { width: 100%; border-collapse: collapse; }
.gd-tbl td { padding: 8px 0; font-size: 11.5px; color: #a9b6d6; border-bottom: 1px solid rgba(255,255,255,.07); }
.gd-tbl td:last-child { text-align: right; color: #dce5f8; }
.gd-tbl tr:last-child td { border-bottom: none; }
.gd-cap { max-width: 1080px; margin: 14px auto 0; text-align: center; font-size: 13.5px; color: var(--txt-soft); line-height: 1.6; }
@media (max-width: 980px){
  .gd-kpis { grid-template-columns: 1fr 1fr; }
  .gd-split { grid-template-columns: 1fr; }
}
@media (max-width: 560px){
  .gd-kpis { grid-template-columns: 1fr; }
  .gd-racks { grid-template-columns: repeat(6,1fr); }
}

/* ===================================================================
   EDGE CONTROLLER PAGE
   =================================================================== */
.edge-hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 44px; align-items: center; }
.edge-hero-copy h1 { font-size: clamp(30px,4.4vw,52px); margin: 18px 0 18px; }
.edge-hero-img { border-radius: 18px; overflow: hidden; border: 1px solid var(--border); box-shadow: 0 26px 70px rgba(20,40,80,.22); background: #0a0f1e; }
.edge-hero-img img { width: 100%; height: auto; display: block; }

.edge-assets { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.ea-card { padding: 24px 22px; border: 1px solid var(--border); border-radius: 16px; background: var(--panel); }
.ea-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(15,27,51,.05); margin-bottom: 12px; }
.ea-card h4 { font-size: 16px; margin-bottom: 10px; }
.ea-card ul { list-style: none; display: grid; gap: 7px; }
.ea-card li { font-size: 13.5px; color: var(--txt-soft); padding-left: 15px; position: relative; }
.ea-card li::before { content: "·"; position: absolute; left: 3px; color: #16a34a; font-weight: 800; }

.edge-sub { text-align: center; font-size: 20px; margin: 52px 0 22px; }
.edge-modes { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.em-card { padding: 24px 22px; border: 1px solid var(--border); border-radius: 16px; background: var(--panel); }
.em-ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 12px; }
.em-card h4 { font-size: 17px; margin-bottom: 6px; }
.em-card p { font-size: 14px; color: var(--txt-soft); line-height: 1.6; }

.edge-steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.edge-steps .shot { margin: 0; max-width: none; }
.shot.compact figcaption { font-size: 12.5px; padding: 12px 14px; }
.edge-note { text-align: center; font-size: 12.5px; color: var(--txt-mute); font-style: italic; margin-top: 16px; }
.edge-fleet { display: grid; grid-template-columns: 1.5fr 1fr; gap: 20px; align-items: start; }
.edge-fleet .shot { margin: 0; max-width: none; }

@media (max-width: 1080px){ .edge-assets { grid-template-columns: 1fr 1fr; } }
@media (max-width: 980px){
  .edge-hero { grid-template-columns: 1fr; gap: 30px; }
  .edge-hero-img { max-width: 520px; margin: 0 auto; }
  .edge-steps, .edge-modes { grid-template-columns: 1fr; }
  .edge-fleet { grid-template-columns: 1fr; }
}
@media (max-width: 620px){ .edge-assets { grid-template-columns: 1fr; } }

/* ---- Edge setup flow (native, replaces tiny wizard screenshots) ---- */
.setup-flow { display: grid; grid-template-columns: repeat(5,1fr); gap: 0; position: relative; }
.sf-step { position: relative; padding: 26px 18px 24px; background: var(--panel); border: 1px solid var(--border); border-right: none; }
.sf-step:first-child { border-radius: 16px 0 0 16px; }
.sf-step.is-last { border-right: 1px solid var(--border); border-radius: 0 16px 16px 0; }
.sf-step::after { content: ""; position: absolute; right: -9px; top: 50%; transform: translateY(-50%) rotate(45deg); width: 16px; height: 16px; background: var(--panel); border-top: 1px solid var(--border); border-right: 1px solid var(--border); z-index: 2; }
.sf-step.is-last::after { display: none; }
.sf-num { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-size: 13px; font-weight: 800; color: #fff; background: linear-gradient(135deg,#25c46a,#0891b2); margin-bottom: 12px; }
.sf-step h4 { font-size: 15.5px; margin-bottom: 7px; }
.sf-step p { font-size: 13px; color: var(--txt-soft); line-height: 1.6; }
@media (max-width: 980px){
  .setup-flow { grid-template-columns: 1fr; gap: 12px; }
  .sf-step, .sf-step:first-child, .sf-step.is-last { border: 1px solid var(--border); border-radius: 14px; }
  .sf-step::after { display: none; }
}

/* ===================================================================
   AI AUTOPILOT PAGE
   =================================================================== */
/* autonomy-by-decision table (inside dark .gd panel) */
.ap-modes { width: 100%; border-collapse: collapse; }
.ap-modes td { padding: 9px 0; font-size: 12px; color: #b9c5e2; border-bottom: 1px solid rgba(255,255,255,.07); vertical-align: middle; }
.ap-modes tr:last-child td { border-bottom: none; }
.ap-modes td:nth-child(2) { width: 96px; text-align: center; }
.ap-modes td:nth-child(3) { width: 108px; text-align: right; white-space: nowrap; }
.ap-pill { font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; }
.ap-pill.manage { color: #04240f; background: #4ade80; }
.ap-pill.rec { color: #062b33; background: #22d3ee; }
.ap-pill.obs { color: #e6edfb; background: rgba(255,255,255,.15); }
.ap-conf { display: inline-block; width: 58px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.13); overflow: hidden; margin-right: 7px; vertical-align: middle; }
.ap-conf i { display: block; height: 100%; background: #4ade80; }
.ap-modes b { font-size: 11.5px; color: #eaf0ff; }

/* product trio */
.ap-products { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.ap-prod { padding: 26px 24px; border: 1px solid var(--border); border-radius: 16px; background: var(--panel); }
.ap-badge { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #fff; padding: 4px 12px; border-radius: 999px; margin-bottom: 12px; }
.ap-prod h4 { font-size: 17px; margin-bottom: 12px; }
.ap-prod ul { list-style: none; display: grid; gap: 9px; }
.ap-prod li { font-size: 13.5px; color: var(--txt-soft); line-height: 1.55; padding-left: 18px; position: relative; }
.ap-prod li::before { content: "→"; position: absolute; left: 0; color: #16a34a; font-weight: 800; }

/* cross-product learning */
.ap-cross { margin-top: 40px; padding: 32px 30px; border-radius: 18px; border: 1px solid rgba(37,196,106,.28); background: linear-gradient(140deg, rgba(37,196,106,.08), rgba(34,211,238,.05)); }
.ap-cross h3 { font-size: 21px; text-align: center; }
.ap-cross-lead { text-align: center; font-size: 14.5px; color: var(--txt-soft); margin: 8px auto 22px; max-width: 640px; line-height: 1.6; }
.ap-cross-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.apx { padding: 18px; border-radius: 13px; background: var(--panel); border: 1px solid var(--border); display: grid; gap: 6px; }
.apx b { font-size: 12.5px; color: #16a34a; }
.apx span { font-size: 13px; color: var(--txt-soft); line-height: 1.55; }

/* learning timeline */
.ap-timeline { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
.apt-phase { position: relative; padding: 26px 22px; border: 1px solid var(--border); border-radius: 16px; background: var(--panel); display: grid; gap: 8px; align-content: start; }
.apt-phase.is-goal { border-color: rgba(37,196,106,.45); background: linear-gradient(160deg, rgba(37,196,106,.09), var(--panel) 62%); box-shadow: 0 18px 44px rgba(20,40,80,.12); }
.apt-day { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--txt-mute); }
.apt-mode { justify-self: start; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; }
.apt-mode.obs { color: #43547a; background: rgba(20,40,80,.09); }
.apt-mode.shadow { color: #6d28d9; background: rgba(139,92,246,.14); }
.apt-mode.rec { color: #0e6f8c; background: rgba(34,211,238,.16); }
.apt-mode.manage { color: #0f7a3a; background: rgba(37,196,106,.18); }
.apt-phase h4 { font-size: 16.5px; }
.apt-phase p { font-size: 13.5px; color: var(--txt-soft); line-height: 1.6; }
.apt-out { font-size: 12.5px; color: var(--txt); font-weight: 600; padding-top: 10px; border-top: 1px dashed var(--border-2); }

@media (max-width: 1080px){ .ap-cross-grid { grid-template-columns: 1fr 1fr; } .ap-timeline { grid-template-columns: 1fr 1fr; } }
@media (max-width: 820px){ .ap-products { grid-template-columns: 1fr; } }
@media (max-width: 620px){ .ap-cross-grid, .ap-timeline { grid-template-columns: 1fr; } }

/* ===================================================================
   NAV — Products dropdown
   =================================================================== */
.nav-drop { position: relative; }
.nav-drop-t { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.nav-drop-t::after { content: "▾"; font-size: 10px; opacity: .65; }
.nav-drop-menu {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(8px);
  min-width: 260px; padding: 8px; border-radius: 14px; background: #fff;
  border: 1px solid var(--border); box-shadow: 0 22px 54px rgba(20,40,80,.18);
  opacity: 0; visibility: hidden; transition: opacity .18s, transform .18s, visibility .18s; z-index: 130;
}
.nav-drop:hover .nav-drop-menu, .nav-drop:focus-within .nav-drop-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(4px); }
.nav-drop-menu a { display: grid; gap: 1px; padding: 10px 12px; border-radius: 10px; }
.nav-drop-menu a:hover { background: var(--bg-2); }
.nav-drop-menu b { font-size: 13.5px; color: var(--txt); }
.nav-drop-menu span { font-size: 12px; color: var(--txt-mute); }
@media (max-width: 980px){
  .nav-drop { width: 100%; }
  .nav-drop-menu { position: static; transform: none; opacity: 1; visibility: visible; min-width: 0;
    box-shadow: none; border: none; background: transparent; padding: 4px 0 4px 12px; }
  .nav-drop-menu b { color: var(--txt-soft); font-weight: 600; }
  .nav-drop-menu span { display: none; }
  .nav-drop-t::after { display: none; }
}

/* ===================================================================
   HOMEPAGE — product hub cards
   =================================================================== */
.prodhub { padding: 96px 0; background: var(--bg); border-top: 1px solid var(--border); }
.ph-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.ph-card { display: flex; flex-direction: column; gap: 10px; padding: 26px 24px; border: 1px solid var(--border); border-radius: 18px; background: var(--panel); transition: transform .2s, box-shadow .2s, border-color .2s; }
.ph-card:hover { transform: translateY(-4px); box-shadow: 0 20px 48px rgba(20,40,80,.12); border-color: var(--border-2); }
.ph-badge { align-self: flex-start; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #fff; padding: 4px 11px; border-radius: 999px; }
.ph-card h3 { font-size: 19px; }
.ph-card .ph-for { font-size: 12px; font-weight: 700; color: var(--txt-mute); text-transform: uppercase; letter-spacing: .06em; }
.ph-card p { font-size: 14px; color: var(--txt-soft); line-height: 1.6; }
.ph-card .ph-link { margin-top: auto; padding-top: 8px; font-size: 13.5px; font-weight: 700; color: #2563eb; }
@media (max-width: 980px){ .ph-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px){ .ph-grid { grid-template-columns: 1fr; } }

/* ===================================================================
   HERO — ecosystem image beside the copy + full-area wave mesh
   =================================================================== */
.hero {
  position: relative; overflow: hidden; padding: 150px 0 92px;
  background:
    radial-gradient(760px 620px at 76% 34%, rgba(34,211,238,.16), rgba(34,211,238,0) 66%),
    radial-gradient(620px 520px at 12% 6%,  rgba(37,196,106,.13), rgba(37,196,106,0) 66%),
    radial-gradient(640px 560px at 94% 94%, rgba(139,92,246,.11), rgba(139,92,246,0) 66%),
    linear-gradient(170deg,#fbfcfe 0%,#eff4fb 55%,#e7eff9 100%);
  border-bottom: 1px solid var(--border);
}
/* legacy video layers — no longer used */
.hero-video, .hero-video-overlay, .hero-bg, .hero-grid { display: none !important; }

/* wave mesh spans the WHOLE hero area, behind the content */
#heroMesh {
  position: absolute; inset: 0;
  width: 100%; height: 100%; z-index: 1; pointer-events: none; opacity: .85;
}

/* two columns — copy left, ecosystem image right */
.hero .wrap {
  position: relative; z-index: 3;
  display: grid; grid-template-columns: 1fr 1.04fr; gap: 44px; align-items: center;
}
.hero-copy { max-width: 620px; }
.hero .hero-copy h1 { font-size: clamp(30px,3.8vw,50px); margin-bottom: 18px; }
.hero .lead { max-width: 580px; }
.hero-eco { margin: 0; }
.hero-eco img { width: 100%; height: auto; display: block;
  /* the artwork sits on white — multiply lets the wave mesh show through it
     so the image blends into the hero instead of sitting on a white slab */
  mix-blend-mode: multiply; }

@media (max-width: 980px){
  .hero { padding: 126px 0 58px; }
  .hero .wrap { grid-template-columns: 1fr; gap: 30px; }
  .hero-copy, .hero .lead { max-width: none; }
  .hero-eco { max-width: 620px; margin: 0 auto; }
  #heroMesh { opacity: .7; }
}
@media (prefers-reduced-motion: reduce){ #heroMesh { opacity: .55; } }
/* ---- wave mesh on every page hero (site-wide standard) ---- */
.sol-hero { position: relative; overflow: hidden; }
.sol-hero > #heroMesh { position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none; opacity: .72; }
.sol-hero > .wrap { position: relative; z-index: 3; }
/* 404 / legal pages: keep it very light so body copy stays comfortable */
.legal { position: relative; overflow: hidden; }
.legal > #heroMesh { position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none; opacity: .35; }
.legal > .wrap { position: relative; z-index: 3; }
@media (max-width: 980px){ .sol-hero > #heroMesh { opacity: .6; } }
/* 404 page mesh */
.nf { position: relative; overflow: hidden; }
.nf > #heroMesh { position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none; opacity: .55; }
.nf > div { position: relative; z-index: 3; }

/* ---- wave mesh in the CTA band (the closing bookend) ---- */
.cta { position: relative; overflow: hidden; }
.cta > .cta-mesh { position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none; opacity: .55; }
.cta > .wrap { position: relative; z-index: 3; }
@media (max-width: 980px){ .cta > .cta-mesh { opacity: .45; } }

/* ---- Legal & Trust Center cards ---- */
.trust-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 18px 0 30px; }
.trust-card { display: flex; flex-direction: column; gap: 8px; padding: 22px 20px; border: 1px solid var(--border);
  border-radius: 14px; background: var(--panel); transition: transform .2s, box-shadow .2s, border-color .2s; }
.trust-card:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(20,40,80,.10); border-color: var(--border-2); }
.tc-tag { align-self: flex-start; font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; }
.trust-card h4 { font-size: 16.5px; }
.trust-card p { font-size: 13.5px; color: var(--txt-soft); line-height: 1.6; }
.trust-card .tc-link { margin-top: auto; padding-top: 6px; font-size: 13px; font-weight: 700; color: #2563eb; }
@media (max-width: 720px){ .trust-grid { grid-template-columns: 1fr; } }