/* =====================================================================
   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; }