:root{
  /* Brand (final tokens) */
  --teal:#00D1FF;               /* primary accents & CTAs */
  --amber:#FFB347;              /* secondary CTA / highlight */
  --indigo:#405070;             /* structural tint & subtle accents */

  /* Neutrals */
  --ink-strong:#0B0F14;         /* H1/H2 on light */
  --ink:#111;                   /* body on light */
  --ink-muted:#475467;          /* secondary text on light */
  --surfaceLight:#F7FAFC;       /* light sections */

  /* Borders / elevation */
  --border-light:rgba(0,0,0,.10);
  --shadow-card:0 6px 18px rgba(16,24,40,.06);

  /* Legacy darks (hero/backdrop) */
  --blue:#006694; --blue2:#005D87; --dark:#001119;
  --fg:#F2F2F2; --muted:#B9C1C7;

  --header-h:64px;
}

*{ box-sizing:border-box }
html, body{
  margin:0; padding:0;
  background:
    radial-gradient(1200px 600px at 80% 10%, rgba(0,209,255,.12), transparent 60%),
    linear-gradient(180deg,#01060A,var(--dark));
  color:var(--fg);
  font:16px/1.6 "Source Sans Pro", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
a{ color:inherit; text-decoration:none }
.container{ max-width:1120px; margin:0 auto; padding:0 24px }

/* ================= NAV ================= */
nav{
  position:sticky; top:0; z-index:10;
  /* F2 — distinct tone from hero */
  background: rgba(3,14,22,.55);
  border-bottom:1px solid rgba(255,255,255,.06);
  backdrop-filter:saturate(180%) blur(8px);
}
.nav-inner{ display:flex; align-items:center; gap:20px; height:64px }
.brand{
  display:flex; align-items:center; gap:10px;
  font-family:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight:800; letter-spacing:.06em;
}
.brand img{ height:28px; vertical-align:middle; border-radius:6px }
.nav-links{ margin-left:auto; display:flex; gap:20px }
.nav-links a{ opacity:.9; transition:opacity .15s }
.nav-links a:hover{ opacity:1 }
.nav-links a.active{ color:var(--teal) }

/* Hide Menu button on desktop; mobile shows it in media query */
.menu-toggle{ display:none; }
@media (max-width:900px){
  .nav-links{ display:none }
  .menu-toggle{
    display:inline-block; margin-left:auto; border:1px solid rgba(255,255,255,.2);
    padding:6px 10px; border-radius:8px; background:transparent; color:var(--fg)
  }
  body.menu-open .nav-links{
    display:flex; flex-direction:column; position:absolute;
    top:64px; right:24px; background:#0a1c28;
    border:1px solid rgba(255,255,255,.12); padding:12px; border-radius:12px; gap:10px
  }
}

/* ================= HERO ================= */
.hero{
  padding:96px 0 72px;
  background:
    /* right-side highlight */
    radial-gradient(900px 500px at 95% 20%, rgba(0,209,255,.10), transparent 60%),
    linear-gradient(180deg, #07131C 0%, #040B11 60%, #030A10 100%);
}
h1, h2, h3{
  font-family:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  margin:0 0 12px;
}
h1{ font-weight:800; font-size:56px; line-height:1.05; margin-bottom:16px }
h2{ font-weight:700; font-size:28px; color:inherit }
h3{ font-weight:700; font-size:20px; color:inherit }
p.lead{ font-size:18px; opacity:.9; max-width:720px }
.small{ font-size:14px; color:var(--muted) }

/* Hero media: full-right visual with blur over text side */
.hero .hero-media{
  position:relative; height:360px; border-radius:14px; overflow:hidden;
  border:1px solid rgba(255,255,255,.12); background:#0b1a28;
}
@media (min-width:901px){ .hero .hero-media{ height:420px } }
.hero .hero-media img,
.hero .hero-media video{ width:100%; height:100%; object-fit:cover; display:block }
.hero .hero-media::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(7,19,28,.85) 0%, rgba(7,19,28,.4) 30%, rgba(7,19,28,0) 60%);
  backdrop-filter: blur(4px);
}
/* Fallback if hero image missing */
.hero .hero-media.fallback{ background: rgba(255,255,255,.06) }

/* ================= BUTTONS ================= */
.btn{
  display:inline-block; background:transparent; color:var(--fg);
  padding:12px 18px; border-radius:12px; text-decoration:none; cursor:pointer;
  border:1px solid var(--teal);
  box-shadow:0 0 24px rgba(0,209,255,.15) inset;
  transition:transform .12s ease, background .12s ease, color .12s ease;
}
.btn:hover{ background:var(--teal); color:#000; transform:translateY(-1px) }
.btn-secondary{
  border-color: var(--amber);
  box-shadow: 0 0 24px rgba(255,179,71,.15) inset;
}
.btn-secondary:hover{ background: var(--amber); color:#000 }

/* Buttons on light surfaces readable by default */
.surface-light .btn,
.card.light .btn,
.surface-light .btn.btn-secondary{ color: var(--ink) }

/* ================= LAYOUT ================= */
.section{ padding:56px 0; border-top:1px solid rgba(255,255,255,.06) }
.grid{ display:grid; gap:24px }
.grid-2{ grid-template-columns:1.1fr 1fr }
@media (max-width:900px){ .grid-2{ grid-template-columns:1fr } }

.measure{ max-width:68ch }
.section p + p, .card p + p { margin-top:12px }

/* Cards */
.card{
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px; padding:20px; background:#071722;
}
.surface-light{ background:var(--surfaceLight); color:var(--ink) }
.surface-light .small{ color:#667085 }
.surface-light .card.light{
  background:#fff; color:var(--ink);
  border-color: var(--border-light);
  box-shadow: var(--shadow-card);
}
.surface-tint{ background:#0b1a28; border-top-color: rgba(255,255,255,.06) }

/* Footer */
footer{
  padding:32px 0; color:var(--muted);
  border-top:1px solid rgba(255,255,255,.06); margin-top:56px;
}

/* ================= BADGE / NOTES ================= */
.badge{
  display:inline-block;
  font:600 12px/1 "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  letter-spacing:.04em; padding:6px 10px; border-radius:999px; margin-bottom:10px;

  /* fallback + modern mix */
  background: rgba(64,80,112,.85);
  border:1px solid rgba(64,80,112,.8);
  background: color-mix(in hsl, var(--indigo) 85%, transparent);
  border:1px solid color-mix(in srgb, var(--indigo) 80%, white 10%);
  color:#DDE5F2;
}
.card.indigo{
  background:#0b1a28;
  border-color: rgba(64,80,112,.7);
  border-color: color-mix(in srgb, var(--indigo) 70%, white 5%);
}

/* ================= MID-PAGE SUBNAV ================= */
.subnav-wrap{
  position: sticky; top: var(--header-h); z-index: 9;
  background: rgba(247,250,252,.92);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.subnav{ display:flex; align-items:center; gap:16px; height:56px }
.subnav a{
  font-family:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight:600; font-size:14px; color: var(--ink);
  text-decoration:none; padding:6px 10px; border-radius:8px;
}
.subnav a:hover{ text-decoration: underline; text-underline-offset: 2px }
.subnav a.active{ color: var(--teal) }
#overview, #solutions, #approach, #contact{
  scroll-margin-top: calc(var(--header-h) + 16px);
}

/* fade from hero into first light section (MS vibe) */
.hero + .subnav-wrap + .section.surface-light::before{
  content:""; display:block; height:48px; margin:-48px 0 0 0;
  background: linear-gradient(180deg, rgba(7,19,28,1) 0%, rgba(247,250,252,0) 100%);
}

/* ================= FORMS (light) ================= */
.card.light label{
  display:block; font-family:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight:600; font-size:14px; color: var(--ink);
  margin-top:8px; margin-bottom:6px;
}
.card.light input, .card.light textarea{
  width:100%; margin:6px 0 14px; padding:10px; border-radius:8px;
  border:1px solid rgba(0,0,0,.15); background:#fff; color: var(--ink);
}
.card.light input:focus, .card.light textarea:focus{
  outline:2px solid var(--teal); outline-offset:2px;
}

/* ================= MEDIA HELPERS ================= */
.media-img{
  display:block; width:100%; height:260px;
  object-fit:cover; border-radius:14px;
  border:1px solid var(--border-light);
  box-shadow: var(--shadow-card);
  background:#fff;
}
.media-thumb{ height:140px }

/* ================= OVERVIEW (NVIDIA vibe) ================= */
.surface-light .section-title-xl{
  font-family:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight:800; font-size:40px; line-height:1.15; color:var(--ink-strong);
  margin:0 0 12px;
}
@media (min-width:901px){ .surface-light .section-title-xl{ font-size:48px } }
.surface-light .section-lead{ font-size:18px; color:var(--ink); max-width:70ch }
.surface-light .section-lead + .section-lead{ margin-top:10px }

/* ================= SOLUTIONS (MS vibe) ================= */
.section-kicker{
  display:block;
  font:600 12px/1 "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  letter-spacing:.08em; text-transform:uppercase; color:#667085; margin-bottom:10px;
}
.section-title{
  font-family:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight:800; font-size:36px; line-height:1.15; color:var(--ink-strong);
  margin:0 0 8px;
}
.section-intro{ color:var(--ink-muted); max-width:78ch; margin:0 0 20px }

.solutions-section.soft-gradient{
  background:
    radial-gradient(600px 300px at 85% 0%, rgba(255,179,71,.08), transparent 60%),
    var(--surfaceLight);
}

.solutions-grid{
  display:grid; gap:24px;
  grid-template-columns: repeat(2, minmax(0,1fr));
}
@media (max-width:900px){ .solutions-grid{ grid-template-columns:1fr } }

/* Brighter cards with image header */
.card.light{
  background:#fff; border-color:var(--border-light);
  box-shadow: var(--shadow-card); border-radius:16px;
}
.card.light .media-img{
  height:160px; border:0; border-bottom:1px solid rgba(0,0,0,.06);
  border-top-left-radius:16px; border-top-right-radius:16px;
  border-bottom-left-radius:0; border-bottom-right-radius:0;
}

/* Arrow-only button */
.card-link-row{ display:flex; justify-content:flex-end; margin-top:14px }
.card-link-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:999px;
  border:1px solid var(--border-light); background:#fff; color:var(--ink);
  font-weight:700; transition: transform .12s ease, filter .12s ease, border-color .12s ease;
}
.card-link-btn:hover{ border-color: var(--teal); transform: translateX(2px) }
.card-link-btn.teal{ background: var(--teal); color:#000; border-color: var(--teal) }
.card-link-btn svg{ width:18px; height:18px }

/* ================= ACCESSIBILITY / POLISH ================= */
.skip-link{
  position:absolute; left:-9999px; top:0; background:#000; color:#fff;
  padding:10px 14px; border-radius:10px; z-index:1000;
}
.skip-link:focus{
  left:16px; top:12px; outline:2px solid var(--teal); outline-offset:2px;
}
.backtotop{
  position:fixed; right:20px; bottom:20px; z-index:20; display:none;
  padding:10px 12px; border-radius:10px; background:#0b1a28; color:var(--fg);
  border:1px solid rgba(255,255,255,.12); text-decoration:none; font-family:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
.backtotop.is-visible{ display:inline-block }
.backtotop:focus-visible{ outline:2px solid var(--teal); outline-offset:2px }
.section a:not(.btn){ transition: color .12s ease, text-decoration-color .12s ease }
.section a:not(.btn):active{ opacity:.9 }
html:not(.reduce-motion){ scroll-behavior:smooth }