/* Self-hosted fonts — served from assets/fonts/ instead of Google Fonts CDN */
@font-face { font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/geist-normal-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/geist-normal-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/geist-normal-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/geist-normal-cyrillic-ext.woff2") format("woff2"); unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/geist-normal-vietnamese.woff2") format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Geist"; font-style: italic; font-weight: 100 900; font-display: swap; src: url("../fonts/geist-italic-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geist"; font-style: italic; font-weight: 100 900; font-display: swap; src: url("../fonts/geist-italic-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Geist"; font-style: italic; font-weight: 100 900; font-display: swap; src: url("../fonts/geist-italic-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Geist"; font-style: italic; font-weight: 100 900; font-display: swap; src: url("../fonts/geist-italic-cyrillic-ext.woff2") format("woff2"); unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "Geist"; font-style: italic; font-weight: 100 900; font-display: swap; src: url("../fonts/geist-italic-vietnamese.woff2") format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB; }

:root { --bg: #ffffff; --bg-2:#f8fafd; --bg-3:#f1f5fb; --bg-4:#edf2f7; --dark: #05091c; --dark-2:#0b1229; --ink: #0a0f1e; --ink-2:#1e2a3a; --muted: #4b5a70; --faint: #8696ac; --blue-title-top: #057a93; --blue: #00a8cc; --blue-2:#00d0f5; --blue-glow: rgba(0, 200, 245, 0.20); --blue-soft: rgba(0, 200, 245, 0.09); --red: #e8001a; --red-dark: #c0001a; --border: #dde5f0; --border-2:#c7d4e8; --d-border: rgba(255, 255, 255, 0.09); --d-border-2:rgba(255, 255, 255, 0.18);     /* Three shadow levels: sm for resting cards, md for modals/images, lg for hover lift --*/ --shadow-sm: 0 1px 3px rgba(10, 15, 40, 0.06), 0 1px 2px rgba(10, 15, 40, 0.04); --shadow-md: 0 4px 16px rgba(10, 15, 40, 0.09), 0 2px 6px rgba(10, 15, 40, 0.05); --shadow-lg: 0 12px 40px rgba(10, 15, 40, 0.13), 0 4px 12px rgba(10, 15, 40, 0.07); --radius: 14px;     /* standard card corner radius */ --radius-lg: 20px;     /* larger cards and hero elements */ --container: 94%;     /* fluid content width — scales with viewport, caps at 1600 px */ --font: "Geist", sans-serif; --font-heading: "Geist", sans-serif;     /* system font stack fallback */ }
/* ============ RESET ============ */
*,
*::before,
*::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 16px; line-height: 1.68; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
img,
video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: var(--font); }
/* ============ LAYOUT ============ */
.container { max-width: var(--container); margin: 0 auto; }
.footer .container { padding: 0 clamp(20px, 5vw, 80px); }
.footer .container .cpwr{    color: #82868f;}
/* ============ TYPOGRAPHY ============ */
h1,
h2,
h3,
h4 { font-family: var(--font-heading); font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; color: var(--ink); }
h1 { font-size: clamp(2.8rem, 5.5vw, 4.4rem); letter-spacing: -0.001em; line-height: 1.03; }
h2 { font-size: clamp(2rem, 3.5vw, 3rem); letter-spacing: -0.025em; }
h3 { font-size: clamp(1.1rem, 2vw, 1.3rem); font-weight: 600; }
h4 { font-size: 0.96rem; font-weight: 600; }
p { color: var(--muted); line-height: 1.7; }
.lead { font-size: 1.08rem; line-height: 1.75; color: var(--muted); max-width: 540px; }
/* ============ EYEBROW ============ */
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 1.08rem; font-weight: 600; letter-spacing: 0.20em; text-transform: uppercase; color: var(--blue-title-top); margin-bottom: 22px; font-family: var(--font-heading); }
.eyebrow::before { content: ""; display: block; width: 20px; height: 2px; background: currentColor; border-radius: 2px; flex-shrink: 0; }
.eyebrow-light { color: var(--blue-title-top); }
.container.reveal.visible .eyebrow-light { color: var(--blue); }
/* ============ BUTTONS ============ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 28px; border-radius: 50px; font-family: var(--font); font-weight: 600; font-size: 0.98rem; letter-spacing: 0.065em; text-decoration: none; white-space: nowrap; border: 1.5px solid transparent; cursor: pointer; transition: all 0.2s ease; }
.btn-sm { padding: 9px 20px; font-size: 0.8rem; }
.btn.btn-inverse.btn-sm { font-size: 0.98rem; }
/* Keeps button label on one line — replaces the removed inline style="white-space:nowrap" */
.btn-nowrap { white-space: nowrap; }
.btn-primary { background: var(--blue); color: #fff; border-color: var(--blue); box-shadow: 0 4px 18px rgba(0, 168, 204, 0.45); }
.btn-primary:hover { background: #0090b0; border-color: #0090b0; box-shadow: 0 6px 24px rgba(0, 168, 204, 0.60); transform: translateY(-1px); }
.btn-inverse { background: #fff; color: var(--dark); border-color: #fff; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.2); }
.btn-inverse:hover { background: #eef3ff; transform: translateY(-1px); }
.btn-outline-light { background: rgba(255, 255, 255, 0.08); color: #fff; border-color: rgba(255, 255, 255, 0.28); backdrop-filter: blur(6px); }
.btn-outline-light:hover { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.55); transform: translateY(-1px); }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--border-2); }
.btn-outline:hover { border-color: var(--blue); color: var(--blue); }
/* ============ BADGES ============ */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 13px; border-radius: 50px; font-size: 0.67rem; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase; white-space: nowrap; }
.badge-here { background: var(--red); color: #fff; box-shadow: 0 2px 10px rgba(232, 0, 26, 0.35); }
.badge-dev { background: var(--bg-2); color: var(--muted); border: 1px solid var(--border); }
.badge-future { background: var(--bg-2); color: var(--faint); border: 1px solid var(--border); }
.pulse-dot { width: 5px; height: 5px; border-radius: 50%; background: #fff; animation: pulse 2s ease-in-out infinite; }
@keyframes pulse {
0%,
100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.4; transform: scale(0.8); }
}
/* ============ NAV ============ */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 500; background: transparent; }

.nav::before { content: ""; position: absolute; inset: 0; background: rgba(5, 9, 28, 0.92); backdrop-filter: blur(22px) saturate(180%); -webkit-backdrop-filter: blur(22px) saturate(180%); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.07), 0 8px 40px rgba(0, 0, 0, 0.4); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; z-index: -1; }
.nav.scrolled::before,
html.nav-open .nav::before { opacity: 1; }
.nav-inner { max-width: var(--container); margin: 0 auto; padding: 0 clamp(20px, 4vw, 80px); height: 70px; display: flex; align-items: center; gap: 36px; }
/* .logo: flex container for the SVG img; flex-shrink: 0 prevents it squashing on narrow screens */
.logo { display: inline-flex; align-items: center; text-decoration: none; flex-shrink: 0;     margin-top: -9px; display: block; min-width: 266px
}
/* Constrain the SVG to a fixed height; width scales proportionally (300×87 native ratio) */
.logo img { height: 36px; width: auto; display: block; }
.nav-links { display: flex; gap: 4px; margin-left: auto; position: relative; }
.nav-links a { color: rgba(255, 255, 255, 0.98); text-decoration: none; font-size: 0.955rem; font-weight: 500; padding: 7px 13px; border-radius: 8px; transition: color 0.15s, background 0.15s; white-space: nowrap; margin-top : 3px }
.nav-links a:hover { color: #fff; background: rgba(255, 255, 255, 0.30); }
.nav-links a.active { color: #fff; }
.nav-pill { position: absolute; top: 0; left: 0; border-radius: 8px; background: #363c5f; z-index: -1; pointer-events: none; opacity: 0; will-change: transform, width; transition: transform 0.38s cubic-bezier(0.25, 1, 0.5, 1), width 0.38s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.2s ease; }
.nav-toggle { display: none; background: none; border: none; cursor: pointer; flex-direction: column; gap: 5px; padding: 6px; margin-left: auto; }
.nav-toggle span { width: 22px; height: 2px; background: #fff; border-radius: 2px; transition: transform 0.3s ease, opacity 0.3s ease; }
/* ============ HERO ============ */
.hero { background: #05091c; min-height: 100vh; display: flex; flex-direction: column; }
.hero-top { position: relative; display: flex; align-items: center; justify-content: center; flex: 1; padding: 120px 0 80px; overflow: hidden; background: url("../images/hero-poster.jpg") center / cover no-repeat, var(--dark); }
.hero-media { position: absolute; inset: 0; }
.hero-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-scrim { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(5, 9, 28, 0.40) 0%, rgba(5, 9, 28, 0.65) 45%, rgba(5, 9, 28, 0.92) 100%), linear-gradient(to right, rgba(5, 9, 28, 0.35) 0%, transparent 35%, transparent 65%, rgba(5, 9, 28, 0.35) 100%); }
.hero-fg { position: relative; z-index: 1; width: 100%; text-align: left; display: flex; flex-direction: column; align-items: flex-start; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--blue-2); font-family: var(--font-heading); font-size: 0.88rem; font-weight: 500; letter-spacing: 0.0em; text-transform: inherit; margin-bottom: 24px; }
.hero-eyebrow::before { display: none; }
.hero h1 { color: #fff; max-width: 900px; text-shadow: 0 2px 40px rgba(5, 9, 28, 0.6); line-height: 1.03; text-align: left; font-weight: 600; }
.hero h1 em { font-style: normal; color: var(--blue-2); }
.hero-sub { font-size: 1.08rem; max-width: 800px; margin: 28px 0 44px; color: rgba(255, 255, 255, 0.98); line-height: 1.78; text-align: left; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: flex-start; }
@media (prefers-reduced-motion:reduce) {
.hero-media video { display: none; }
}

.section-roadmap { background: transparent; padding-bottom: 0; }
.section-stats { background: transparent; border-top: 1px solid rgba(255, 255, 255, 0.08); border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.section-stats .stats-inner { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat { padding: 44px 40px 48px; }
.stat.reveal.sr-box-1 { padding-left: 0; }
.stat + .stat { border-left: 1px solid rgba(255, 255, 255, 0.12); }
.stat-num { font-size: 3rem; font-weight: 800; color: #fff; letter-spacing: 0.035em; line-height: 1; margin-bottom: 10px; font-family: var(--font-heading); font-size: clamp(12px, 980px, 28px); }
.stat-label { color: rgba(255, 255, 255, 0.55); font-size: 0.82rem; font-weight: 400; line-height: 1.5; }
/* Road progress — horizontal progress line with three stage stop labels */
.hero-road { position: relative; display: block; padding: 54px 0 68px; border-top: 0px solid rgba(255, 255, 255, 0.18); max-width: 960px; margin: 0 auto; min-height: 200px; }
.hero-road-line { position: absolute; top: 53px; left: 8px; right: 8px; height: 5px; background: linear-gradient(90deg, rgb(52 98 107 / 45%) 0%, rgba(255, 255, 255, 0.18) 50%, rgba(0, 208, 245, 0.15) 100%); }

.hero-road-line::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 18%; background: linear-gradient(90deg, var(--blue), var(--blue-2)); box-shadow: 0 0 18px rgba(0, 208, 245, 0.75); border-radius: 5px;     /* brighter glow */ }
.hero-road-stop { position: absolute; display: flex; flex-direction: column; align-items: center; transform: translateX(-50%); }
.hero-road-stop:nth-child(2) { left: 0%; align-items: flex-start; transform: none; }
.hero-road-stop:nth-child(3) { left: 50%; }
.hero-road-stop:nth-child(4) { left: 100%; align-items: flex-end; transform: translateX(-100%); }
.hero-road-dot { display: block; width: 17px; height: 17px; border-radius: 50%; background: #2b3443; border: 4px solid rgb(49 54 69); position: relative; z-index: 1; margin-top: -6px; top: 0px; }
.hero-road-stop.here .hero-road-dot { background: var(--blue-2); border-color: var(--blue-2); box-shadow: 0 0 0 6px rgba(0, 208, 245, 0.22), 0 0 24px rgba(0, 208, 245, 0.65); width: 16px; height: 16px; margin-top: -8px; }
.hero-road-label { display: block; margin-top: 30px; font-size: 0.65rem; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); font-weight: 600; text-align: center; white-space: nowrap; }
.hero-road-stop:nth-child(2) .hero-road-label { text-align: left; }
.hero-road-stop:nth-child(4) .hero-road-label { text-align: right; }
.hero-road-label em { display: block; font-style: normal; color: rgba(255, 255, 255, 0.90);     /* was 0.72 — crisp white */ font-size: 0.95rem;     /* was 0.9rem */ font-weight: 600; letter-spacing: -0.01em; text-transform: none; margin-top: 5px; }
.hero-road-stop.here .hero-road-label { color: var(--blue-2); }
.hero-road-stop.here .hero-road-label em { color: #fff; }
.section { padding: 128px 0; }
.section-alt { background: var(--bg-2); }
.section-dark { background: var(--bg-3); position: relative; }
.section-dark .section-head h2,
.section-dark h2 { color: var(--ink); }
.section-dark .section-head p { color: var(--muted); }
.section-dark .eyebrow { color: var(--blue-title-top); }
.section-dark .eyebrow::before { background: var(--blue); }
.section-head { max-width: 700px; margin-bottom: 80px; }
.section-head p { margin-top: 22px; font-size: 1.07rem; color: var(--muted); line-height: 1.78; max-width: 630px; }
.section-head-center { text-align: center; max-width: 640px; margin: 0 auto 68px; }

.caps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px); }
.cap-card { position: relative; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease; }
.cap-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg), 0 0 0 1px rgba(0, 200, 245, 0.18), 0 0 40px rgba(0, 200, 245, 0.08); border-color: rgba(0, 200, 245, 0.30); }
.cap-photo { margin: 0; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-3); }
.cap-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.45s ease; }
.cap-card:hover .cap-photo img { transform: scale(1.05); }
.cap-body { padding: 22px 24px 28px; flex: 1; }
.cap-kicker { display: inline-flex; align-items: center; gap: 5px; font-size: clamp(12px, 800px, 0.9em); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--blue); margin-bottom: 10px; }
.cap-kicker::before { content: ""; width: 12px; height: 2px; background: var(--blue); border-radius: 2px; }
.cap-body h3 { font-size: 1.38rem; margin-bottom: 8px; color: var(--ink); }
.cap-body p { font-size: 0.862rem; color: var(--muted); }
/* grid-column: 1 / -1 stretches the wide card from the first to the last column track.
Inner grid splits it into image (~55%) and text (~45%). */
.cap-wide { grid-column: 1 / -1; display: grid; grid-template-columns: 1.1fr 1fr; }
.cap-wide .cap-photo { aspect-ratio: auto; min-height: 320px; }
.cap-wide .cap-body { padding: 44px 48px; align-self: center; }
.cap-wide .cap-body h3 { font-size: clamp(24px, 3vw, 63px); }
.cap-wide .cap-body p { font-size: 0.94rem; margin-top: 20px; }
@media (max-width:1024px) {
.brake-cap { display: none; }
.cap-wide { grid-template-columns: 1fr; }
.cap-wide .cap-photo { min-height: 240px; }
.cap-wide .cap-body { padding: 32px 28px; }
.cap-wide .cap-body h3 { font-size: 1.38rem; }
.cap-wide .cap-body p { margin-top: 0px; }
}

.stages-section { background: #070d22; padding: 128px 0; position: relative; overflow: hidden; }
/* Subtle centered radial glow */
.stages-section::before { content: ""; position: absolute; top: 35%; left: 50%; transform: translateX(-50%); width: 1000px; height: 700px; border-radius: 50%; background: radial-gradient(ellipse, rgba(0, 200, 245, 0.09) 0%, transparent 65%); pointer-events: none; }
.stages-section .section-head h2 { color: #fff; }
.stages-section .section-head p { color: rgba(255, 255, 255, 0.50); }
/* — Row container — */
.stages-rows { display: flex; flex-direction: column; gap: 20px; }
/* — Single stage row — */
.stage-row { display: grid; grid-template-columns: 1.1fr 1fr; border-radius: var(--radius-lg); overflow: hidden; background: #0d0e12; border: 1px solid rgba(255, 255, 255, 0.07); min-height: 400px; position: relative; transition: border-color 0.3s ease, box-shadow 0.3s ease; }
.stage-row:hover { border-color: rgba(0, 208, 245, 0.28); box-shadow: 0 28px 90px rgba(0, 0, 0, 0.40); }
.stage-row-active { border-color: rgba(0, 200, 245, 0.40); box-shadow: 0 0 0 1px rgba(0, 200, 245, 0.18), 0 20px 70px rgba(0, 200, 245, 0.13); }
/* Stage 2: image on right, body on left */
.stage-row-reverse { grid-template-columns: 1fr 1.1fr; }
.stage-row-reverse .stage-row-media { order: 2; }
.stage-row-reverse .stage-row-body { order: 1; }
/* — Image panel — */
.stage-row-media { position: relative; overflow: hidden; }
.stage-row-media img { width: 100%; height: 100%; object-position: left center; object-fit: cover; display: block; transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1); filter: brightness(0.82) saturate(0.85); }
.stage-row:hover .stage-row-media img { transform: scale(1.045); filter: brightness(0.92) saturate(1.0); }
/* Feather edge: fades image into the content panel */
.stage-row-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 50%, #0d0e12 100%); pointer-events: none; }
.stage-row-reverse .stage-row-media::after { background: linear-gradient(270deg, transparent 50%, #0d0e12 100%); }
/* — Content panel — */
.stage-row-body { position: relative; padding: 52px 56px; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
/* Large watermark stage number */
.stage-row-bg-num { position: absolute; top: -12px; right: 12px; font-family: var(--font-heading); font-size: 10rem; font-weight: 900; line-height: 1; letter-spacing: -0.06em; color: rgba(255, 255, 255, 0.035); pointer-events: none; user-select: none; }
/* Meta row: stage label + badge */
.stage-row-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.stage-num-label { font-family: var(--font-heading); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255, 255, 255, 0.32); }
/* Heading */
.stage-row-body h3 { font-size: clamp(1.65rem, 2.4vw, 2.3rem); color: #fff; margin-bottom: 10px; letter-spacing: -0.035em; line-height: 1.12; }
/* Tagline */
.stage-row-body .stage-tagline { color: var(--blue-2); font-weight: 600; font-size: 0.95rem; margin: 0 0 18px; line-height: 1.45; }
/* Description */
.stage-row-body .stage-desc { font-size: 1rem; color: rgba(255, 255, 255, 0.52); line-height: 1.72; margin-bottom: 28px; max-width: 468px; }
/* Feature list on dark bg */
.stage-row-body .feature-list li { color: rgba(255, 255, 255, 0.68); border-bottom-color: rgba(255, 255, 255, 0.07); font-size: 1rem; padding: 10px 0; line-height: 1.58; }
.stage-row-body .feature-list li::before { background: var(--blue-2); margin-top: 7px; }
.stage-row-body .feature-list strong { color: rgba(255, 255, 255, 0.88); }
/* Active stage: glowing left-edge stripe */
.stage-row-active .stage-row-body::before { content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 3px; border-radius: 3px; background: linear-gradient(180deg, var(--blue) 0%, var(--blue-2) 100%); box-shadow: 0 0 14px rgba(0, 208, 245, 0.65); }
/* Badge overrides on dark surface */
.stage-row-body .badge-dev { background: rgba(255, 255, 255, 0.07); color: rgba(255, 255, 255, 0.42); border-color: rgba(255, 255, 255, 0.11); }
.stage-row-body .badge-future { background: rgba(255, 255, 255, 0.04); color: rgba(255, 255, 255, 0.26); border-color: rgba(255, 255, 255, 0.07); }
.research-section { background: var(--bg); padding: 128px 0; position: relative; overflow: hidden; }
/* Subtle top-right decorative glow */
.research-section::before { content: ""; position: absolute; top: -10%; right: -15%; width: 800px; height: 800px; border-radius: 50%; background: radial-gradient(ellipse, rgba(0, 200, 245, 0.05) 0%, transparent 65%); pointer-events: none; }
.research-section .section-head h2 { color: var(--ink); }
.research-section .section-head p { color: var(--muted); }
/* — Shared icon chip — */
.rc-icon { width: 52px; height: 52px; flex-shrink: 0; border-radius: 14px; background: rgba(0, 200, 245, 0.08); border: 1px solid rgba(0, 200, 245, 0.18); color: var(--blue); display: flex; align-items: center; justify-content: center; box-shadow: none; transition: background 0.25s, box-shadow 0.25s; }
.rc-icon svg { width: 24px; height: 24px; }
.rc-icon-lg { width: 68px; height: 68px; border-radius: 18px; }
.rc-icon-lg svg { width: 30px; height: 30px; }
/* — Shared label — */
.rc-label { display: block; font-family: var(--font-heading); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--blue); margin-bottom: 8px; }
/* — Shared description — */
.rc-desc { font-size: 1rem; color: var(--muted); line-height: 1.75; }
.rc-hero { position: relative; background: #fff; border: 1px solid rgba(0, 200, 245, 0.14); border-radius: var(--radius-lg); padding: 52px 56px 48px; margin-bottom: 20px; overflow: hidden; box-shadow: 0 0 0 1px rgba(0, 200, 245, 0.06), var(--shadow-md); }
/* Top-left glow accent */
.rc-hero::before { content: ""; position: absolute; top: -80px; left: -80px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(ellipse, rgba(0, 200, 245, 0.05) 0%, transparent 65%); pointer-events: none; }
/* Glowing top-edge line */
.rc-hero::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--blue) 0%, var(--blue-2) 40%, transparent 80%); border-radius: 2px 2px 0 0; }
.rc-hero-top { display: flex; align-items: center; gap: 20px; margin-bottom: 20px; }
.rc-hero-title { flex: 1; }
.rc-hero-title h3 { font-size: clamp(1.4rem, 2vw, 1.9rem); color: var(--ink); letter-spacing: -0.03em; line-height: 1.15; }
.rc-hero > .rc-desc { max-width: 100%; margin-bottom: 44px; }
/* — Sub-program tiles — */
.rc-sub-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); background: var(--border); }
.rc-sub { background: var(--bg-2); padding: 28px 30px 32px; position: relative; transition: background 0.25s; }
.rc-sub:hover { background: rgba(0, 200, 245, 0.04); }
/* Vertical divider between tiles */
.rc-sub + .rc-sub { border-left: none; }
.rc-sub-num { display: block; font-family: var(--font-heading); font-size: 0.6rem; font-weight: 800; letter-spacing: 0.22em; color: var(--blue); margin-bottom: 14px; opacity: 0.65; }
.rc-sub h4 { font-size: 0.96rem; color: var(--ink); margin-bottom: 10px; letter-spacing: -0.01em; }
.rc-sub h4 { font-size: clamp(12px, 480px, 1em); font-weight: 700; color: var(--ink); padding-left: 13px; margin-bottom: 20px; border-left: 3px solid var(--blue); }
.rc-sub p { font-size: 0.932rem; color: var(--muted); line-height: 1.68; }
.rc-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.rc-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 44px 44px 36px; display: flex; flex-direction: column; position: relative; overflow: hidden; box-shadow: var(--shadow-sm); transition: border-color 0.28s, box-shadow 0.28s, transform 0.28s; }
.rc-card:hover { border-color: rgba(0, 200, 245, 0.30); box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.rc-card:hover .rc-icon { background: rgba(0, 200, 245, 0.24); box-shadow: 0 0 28px rgba(0, 200, 245, 0.35); }
.rc-card .rc-icon { margin-bottom: 0; }
.rc-card h3 { font-size: clamp(1.25rem, 1.8vw, 1.6rem); color: var(--ink); margin-bottom: 0; letter-spacing: -0.03em; }
.reveal .rc-both-merged { display: flex; align-items: center; gap: 20px; margin-bottom: 24px; }
.rc-card .rc-desc { flex: 1; margin-bottom: 32px; }
/* Capability tags strip at the bottom of each card */
.rc-card-footer { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 24px; border-top: 1px solid var(--border); margin-top: auto; }
.rc-card-footer span { font-family: var(--font-heading); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); background: var(--bg-3); border: 1px solid var(--border); padding: 5px 12px; border-radius: 50px; white-space: nowrap; transition: color 0.2s, background 0.2s, border-color 0.2s; }
.rc-card:hover .rc-card-footer span { color: var(--blue); background: var(--blue-soft); border-color: rgba(0, 200, 245, 0.22); }
/* ============ STEPS ============ */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 77.2px; }
.step { padding-top: 28px; border-top: 2px solid var(--border); transition: border-color 0.22s, transform 0.22s; }
.step:hover { border-top-color: var(--blue); transform: translateY(-2px); }
.step-num { display: block; font-size: 3.2rem; font-weight: 900; letter-spacing: -0.04em; line-height: 1; margin-bottom: 18px; background: linear-gradient(135deg, var(--blue) 0%, var(--blue-2) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-family: var(--font-heading); }
.step h3 { margin-bottom: 10px; font-size: 1.52rem; }
.step p { font-size: 1.275rem; }
/* ============ WHERE WE DRIVE ============ */
.drive-split { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: start; }
.drive-map { margin: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.drive-map img { display: block; width: 100%; }
.drive-map figcaption { font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: var(--faint); padding: 13px 20px; border-top: 1px solid var(--border); background: var(--bg-2); }
.drive-list { display: flex; flex-direction: column; }
.drive-item { padding: 24px 0; border-bottom: 1px solid var(--border); }
.drive-item:first-child { border-top: 1px solid var(--border); }
.drive-item h3 { font-size: 1.24rem; margin-bottom: 7px; }
.drive-item p { font-size: 1.175rem; }
/* ============ SAFETY ============ */
.split { display: grid; grid-template-columns: 1fr 1.15fr; gap: 80px; align-items: start; }
.split-text h2 { margin-bottom: 20px; }
.split-text p.lead { margin-top: 12px; }
.why-list { display: flex; flex-direction: column; }
.why-item { padding: 22px 0; border-bottom: 1px solid var(--border); }
.why-item:first-child { border-top: 1px solid var(--border); }
.why-item h3 { font-size: 1.0rem; margin-bottom: 5px; }
.why-item p { font-size: 1.175rem; }
/* ============ TEAM SECTION ============ */
.team-section { background: var(--bg-4); padding: 128px 0; position: relative; overflow: hidden; }
.team-section::before { content: ""; position: absolute; bottom: -10%; left: -10%; width: 700px; height: 700px; border-radius: 50%; background: radial-gradient(ellipse, rgba(0, 200, 245, 0.04) 0%, transparent 65%); pointer-events: none; }
.team-section .section-head h2 { color: var(--ink); }
.team-section .section-head p { color: var(--muted); }
.team-head { margin-bottom: 72px; }
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
/* — Card — */
.team-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 32px 28px 28px; display: flex; flex-direction: column; position: relative; overflow: hidden; box-shadow: var(--shadow-sm); transition: border-color 0.28s, box-shadow 0.28s, transform 0.28s; }
.team-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, transparent); transition: background 0.3s; border-radius: 2px 2px 0 0; }
.team-card:hover { border-color: rgba(0, 200, 245, 0.25); box-shadow: var(--shadow-lg); transform: translateY(-5px); }
.team-card:hover::before { background: linear-gradient(90deg, var(--blue) 0%, var(--blue-2) 60%, transparent 100%); }
/* — Card top row: avatar + live badge — */
.team-card-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 22px; }
/* — Avatar — */
.team-avatar { display: inline-flex; align-items: center; justify-content: center; width: 68px; height: 68px; border-radius: 18px; font-family: var(--font-heading); font-size: 1.15rem; font-weight: 900; letter-spacing: 0.02em; position: relative; flex-shrink: 0; }
/* Per-person avatar color palettes */
.team-avatar--dg { background: linear-gradient(135deg, #1a3a8f 0%, #2255cc 100%); color: #a8c8ff; box-shadow: 0 0 0 1px rgba(0, 208, 245, 0.35), 0 8px 24px rgba(0, 200, 245, 0.35); }
.team-avatar--dv { background: linear-gradient(135deg, #0e3a5e 0%, #1160a0 100%); color: #7ec8f5; box-shadow: 0 0 0 1px rgba(30, 120, 200, 0.35), 0 8px 24px rgba(14, 80, 160, 0.35); }
.team-avatar--as { background: linear-gradient(135deg, #1e2d6e 0%, #3547b0 100%); color: #b4bfff; box-shadow: 0 0 0 1px rgba(90, 110, 220, 0.35), 0 8px 24px rgba(53, 71, 176, 0.35); }
.team-avatar--vp { background: linear-gradient(135deg, #0d3550 0%, #0d6080 100%); color: #7de0f5; box-shadow: 0 0 0 1px rgba(13, 96, 128, 0.40), 0 8px 24px rgba(13, 80, 120, 0.35); }
/* Glow ring pulse on hover */
.team-card:hover .team-avatar--dg { box-shadow: 0 0 0 4px rgba(0, 208, 245, 0.22), 0 0 24px rgba(0, 200, 245, 0.50); }
.team-card:hover .team-avatar--dv { box-shadow: 0 0 0 4px rgba(30, 120, 200, 0.22), 0 0 24px rgba(14, 80, 160, 0.50); }
.team-card:hover .team-avatar--as { box-shadow: 0 0 0 4px rgba(90, 110, 220, 0.22), 0 0 24px rgba(53, 71, 176, 0.50); }
.team-card:hover .team-avatar--vp { box-shadow: 0 0 0 4px rgba(13, 96, 128, 0.25), 0 0 24px rgba(13, 80, 120, 0.50); }
/* — Live status chip — */
.team-status { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-heading); font-size: 0.58rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); background: var(--bg-3); border: 1px solid var(--border); padding: 5px 10px; border-radius: 50px; }
/* — Name — */
.team-card h3 { font-size: clamp(12px, 1180px, 1.16em); color: var(--ink); margin-bottom: 10px; letter-spacing: -0.02em; }
/* — Role label — */
.team-role { font-family: var(--font-heading); font-size: 0.82rem; font-weight: 600;     /* letter-spacing: 0.14em; */ text-transform: uppercase; color: var(--blue); margin-bottom: 16px; }
/* — Bio text — */
.team-bio { font-size: 0.932rem; color: var(--muted); line-height: 1.70; flex: 1; margin-bottom: 22px; }
/* — Expertise tags — */
.team-tags { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 18px; border-top: 1px solid var(--border); margin-top: auto; }
.team-tags span { font-family: var(--font-heading); font-size: 0.60rem; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase; color: var(--faint); background: var(--bg-3); border: 1px solid var(--border); padding: 4px 10px; border-radius: 50px; white-space: nowrap; transition: color 0.2s, background 0.2s, border-color 0.2s; }
.team-card:hover .team-tags span { color: var(--blue); background: var(--blue-soft); border-color: rgba(0, 200, 245, 0.22); }
/* ============ CTA ============
Full-width dark section with a decorative radial glow behind the headline
created via the .cta::before pseudo-element (no extra HTML element needed).
============ */
.cta { background: var(--dark); padding: 120px 0; text-align: center; position: relative; overflow: hidden; }
/* Decorative background glow: a large elliptical radial gradient centered behind the heading.
pointer-events: none ensures the pseudo-element never blocks clicks on the buttons below. */
.cta::before { content: ""; position: absolute; top: -240px; left: 50%; transform: translateX(-50%); width: 900px; height: 700px; border-radius: 50%; background: radial-gradient(ellipse, rgba(0, 200, 245, 0.2) 0%, transparent 65%); pointer-events: none; }
.cta h2 { color: #fff; font-size: clamp(2.2rem, 4.5vw, 3.6rem); position: relative; line-height: 1.75; }
.cta-sub { color: rgba(255, 255, 255, 0.55); font-size: 1.04rem; line-height: 1.75; margin: 20px auto 40px; max-width: 460px; position: relative; }
.cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; position: relative; }
.email-form { display: flex; gap: 14px; max-width: 440px; margin: 40px auto 0; position: relative; }
.email-form input { flex: 1; padding: 14px 22px; border-radius: 50px; border: 1.5px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.07); color: #fff; font-family: var(--font); font-size: 0.975rem; outline: none; transition: border-color 0.2s, background 0.2s; backdrop-filter: blur(8px); }
.email-form input::placeholder { color: rgba(255, 255, 255, 0.28); }
.email-form input:focus { border-color: rgba(0, 208, 245, 0.6); background: rgba(255, 255, 255, 0.10); }
.email-note { color: rgba(255, 255, 255, 0.28); font-size: 0.76rem; margin-top: 16px; position: relative; }
.email-form .btn[disabled] { opacity: 0.6; cursor: not-allowed; pointer-events: none; }
.email-form .btn.loading { display: flex; align-items: center; gap: 8px; }
.btn-spinner { width: 14px; height: 14px; border: 2px solid rgba(0, 0, 0, 0.25); border-top-color: currentColor; border-radius: 50%; animation: btn-spin 0.65s linear infinite; flex-shrink: 0; }
@keyframes btn-spin {
to { transform: rotate(360deg); }
}
.email-error { display: none; align-items: center; gap: 8px; max-width: 440px; margin: 12px auto 0; color: rgba(255, 120, 120, 0.9); font-size: 0.8rem; text-align: center; justify-content: center; }
.email-error.visible { display: flex; }
/* — Email submission success state — */
.email-success[hidden] { display: none; }
.email-success { display: flex; align-items: center; justify-content: center; gap: 10px; max-width: 440px; margin: 54px auto 0; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(0, 208, 245, 0.40); border-radius: 50px; padding: 14px 28px; color: rgba(255, 255, 255, 0.85); font-size: 0.975rem; font-weight: 500; position: relative; }
.email-success svg { width: 20px; height: 20px; color: var(--blue-2); flex-shrink: 0; }
/* ============ FOOTER ============ */
.footer { background: #00070e; padding: 72px 0 40px; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 40px; padding-bottom: 56px !important; border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.footer-brand p { font-size: 0.85rem; margin-top: 16px; color: rgba(255, 255, 255, 0.75); line-height: 1.65; }
.footer-col { display: flex; flex-direction: column; gap: 0; }
.footer-col h4 { font-size: 0.85rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.85); margin-bottom: 18px; }
.footer-col a { color: rgba(255, 255, 255, 0.65); text-decoration: none; font-size: 0.862rem; padding: 5px 0; display: block; transition: color 0.15s; width: fit-content; }
.footer-col a:hover { color: rgba(255, 255, 255, 0.9); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 28px !important; color: rgba(255, 255, 255, 0.836); font-size: 0.78rem; flex-wrap: wrap; gap: 12px; }
.footer-legal { display: flex; gap: 24px; }
.footer-legal a { color: rgba(255, 255, 255, 0.86); text-decoration: none; transition: color 0.15s; }
.footer-legal a:hover { color: rgba(255, 255, 255, 0.7); }
.footer .logo img { height: 28px; }
/* slightly smaller in the footer */

.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.section-stats .stats-inner .reveal { text-align: center; }
.reveal.visible { opacity: 1; transform: none; }
/* script.js adds "visible" on intersection */
.delay-1 { transition-delay: 0.10s; }
/* 100 ms after the base reveal */
.delay-2 { transition-delay: 0.20s; }
/* 200 ms after the base reveal */
.delay-3 { transition-delay: 0.30s; }
/* 300 ms after the base reveal */
.delay-4 { transition-delay: 0.40s; }
/* 400 ms — used for hero roadmap & stats */

@media screen and (max-width:1920px) and (min-width:1400px) {
.section-stats .stat.reveal.visible { font-size: clamp(12px, 1400px, 42px); }
}
@media (max-width:1040px) {
.stage-row,
.stage-row-reverse { grid-template-columns: 1fr; min-height: auto; }
.stage-row-active .stage-row-body::before { background: transparent; box-shadow: 0 0 0px rgba(0, 208, 245, 0.65); }
.stage-row-media { order: 1 !important; height: 280px; }
.stage-row-body { order: 2 !important; padding: 40px 36px; }
.stage-row-media::after,
.stage-row-reverse .stage-row-media::after { background: linear-gradient(0deg, #0d0e12 0%, transparent 45%); }
.stage-row-bg-num { font-size: 7rem; }
.rc-sub-grid { grid-template-columns: 1fr; gap: 1px; }
.rc-sub + .rc-sub { border-left: none; border-top: 1px solid var(--border); }
.rc-pair { grid-template-columns: 1fr; }
.rc-hero { padding: 36px 28px 32px; }
.split { grid-template-columns: 1fr; gap: 48px; }
.steps { grid-template-columns: 1fr; gap: 28px; }
.caps-grid { grid-template-columns: 1fr 1fr; }
.team-grid { grid-template-columns: 1fr 1fr; }
.cap-wide { grid-template-columns: 1fr; }
.cap-wide .cap-photo { aspect-ratio: 16/10; min-height: 0; }
.drive-split { grid-template-columns: 1fr; gap: 40px; }
.section-stats .stats-inner { grid-template-columns: repeat(2, 1fr); }
.stat:nth-child(3),
.stat:nth-child(4) { border-top: 1px solid rgba(255, 255, 255, 0.10); }
.stat:nth-child(3) { border-left: none; }
.footer-grid { grid-template-columns: repeat(2, 1fr); }
.footer-brand { grid-column: 1 / -1; }
}
@media (max-width:1390px) {
.container { max-width: 100%; padding: 0 clamp(20px, 4vw, 80px); }
}
@media (max-width:1280px) {
.container { padding: 0 0; }
}
@media (max-width:720px) {
:root { --container: 100%; }
/* expand container to full width on small screens */
.container { padding: 0 0px; }
.nav-inner { padding: 0 20px; }
.hero-top { padding: 130px 0 90px; min-height: 75vh; align-items: center; }
.caps-grid { grid-template-columns: 1fr; }
.team-grid { grid-template-columns: 1fr 1fr; }
.section-stats .stats-inner { grid-template-columns: 1fr 1fr; }
.stat { padding: 22px 20px; }
.stat:nth-child(2) { border-left: 1px solid rgba(255, 255, 255, 0.10); }
.stat:nth-child(3) { border-left: none; border-top: 1px solid rgba(255, 255, 255, 0.10); }
.stat:nth-child(4) { border-left: 1px solid rgba(255, 255, 255, 0.10); border-top: 1px solid rgba(255, 255, 255, 0.10); }
.email-form { flex-direction: column; }
.section { padding: 80px 0; }
.hero-road-label em { font-size: 0.78rem; }
h2 { font-size: 1.9rem; }
}
@media (max-width:480px) {
.team-grid { grid-template-columns: 1fr; }
}

@media (max-width:1290px) {
	.nav-pill {
		display: none;
	}

	.nav-inner > .btn {
		display: none;
	}

	.nav-toggle {
		display: flex;
		margin-left: auto;
		position: relative;
		z-index: 510;
		position: absolute;
		right: 0px;
		top: 0px;
		height: 100%;
		width: 55px;
		justify-content: center;
		align-items: center;
		background: transparent;
	}

	.scrolled .nav-toggle {
		background: #2e3248;
	}

	.nav-open .nav-toggle {
		background: #2e3248;
	}

	.nav-links {
		position: fixed;
		top: 60px;
		right: 0;
		width: min(78vw, 320px);
		height: calc(100dvh - 61px);
		margin-left: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		background: #ffffff;
		backdrop-filter: blur(24px);
		-webkit-backdrop-filter: blur(24px);
		border-left: 1px solid rgba(0, 0, 0, 0.08);
		padding: 0px 0 40px;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		z-index: 490;         /* below nav (500) so toggle button is always reachable */
		transform: translateX(100%);
		visibility: hidden;
		pointer-events: none;
		transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.38s;
		box-shadow: -12px 0 48px rgba(0, 0, 0, 0.50);
	}

	.nav-links.open {
		transform: translateX(0);
		visibility: visible;
		pointer-events: auto;
		transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0s;
	}

	.nav-links a {
		padding: 16px 28px;
		font-size: 1.05rem;
		font-weight: 500;
		border-bottom: 1px dashed rgb(0 0 0 / 17%);
		border-radius: 0;
		color: #000000;
		transition: color 0.15s, background 0.15s;
	}

	.nav-links a:hover {
		background: rgba(0, 0, 0, 0.06);
		color: #000000;
	}

	.nav-links a:first-child {
		border-top: none;
	}

	.nav-links .nav-cta {
		display: flex;
		align-items: center;
		padding: 14px 28px;
		border-bottom: none;
		border-top: none;
		font-size: 0.95rem;
		font-weight: 600;
		letter-spacing: 0.065em;
		background: #D9F8FD;
		color: #000000;
		transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
	}

	.nav-links .nav-cta:hover {
		background: #D9F8FD;
		padding-left: 28px;
		transform: translateY(-1px);
	}

	[data-theme="dark"] .nav-links {
		background: #0a0a0ceb;
	}

        .nav-inner{
            padding: 0 clamp(20px, 0vw, 80px);
    }



}
/* Dimmed backdrop — sits between page content and the offcanvas panel.
Starts at 70px (below the header) so the logo row stays fully unobscured. */
.nav-backdrop { position: fixed; top: 60px; left: 0; right: 0; bottom: 0; background: rgba(2, 5, 16, 0.60); opacity: 0; visibility: hidden; transition: opacity 0.38s ease, visibility 0s linear 0.38s; z-index: 480;     /* above page (no z-index), below panel (490) and nav (500) */ cursor: pointer; }
.nav-backdrop.open { opacity: 1; visibility: visible; transition: opacity 0.38s ease, visibility 0s linear 0s; }
@media (min-width:1291px) {
.nav-backdrop { display: none; }
.nav-links .nav-cta { display: none; }
}
@media (max-width:1291px) {
html.nav-open,
body.nav-open { overflow: hidden; }
}
/* Lock scroll on both html and body to cover all mobile browsers */

/* Hamburger → X morph */
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); background: #fefefe9d; }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); background: #fefefe9d; }
/* ============ TECHNOLOGY HEADING — WORD ANIMATION ============
Each word is wrapped in a .tech-word span by JS.
Words start invisible + shifted down; they transition to visible
when the heading enters the viewport (JS adds .visible).
After words settle, JS adds .line-visible to draw a gradient underline.
============ */
#tech-heading { position: relative; padding-bottom: 22px; }
#tech-heading::after { content: ""; position: absolute; bottom: 0; left: 0; height: 3px; width: 0; border-radius: 3px; background: linear-gradient(90deg, var(--blue) 0%, var(--blue-2) 55%, transparent 100%); transition: width 0.9s cubic-bezier(0.16, 1, 0.3, 1); }
#tech-heading.line-visible::after { width: 62%; }
#tech-heading .tech-word { display: inline-block; opacity: 0; transform: translateY(24px); transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); will-change: opacity, transform; }
#tech-heading .tech-word.visible { opacity: 1; transform: none; }
/* ============ HERO ROAD — ANIMATED PROGRESS LINE ============ */
.hero-road-line::after { animation: road-progress 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both; }
@keyframes road-progress {
from { width: 0; }
to { width: 18%; }
}
/* ============ SECTION TRANSITIONS — SUBTLE BG DEPTH ============ */
.section-head .eyebrow { position: relative; }
/* Smooth reveal for the section-head as a whole */
.section-head.reveal.visible .eyebrow { animation: eyebrow-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; }
.section-head.reveal.visible .eyebrow.eyebrow-light { background-color: #f9f9f9; border-radius: 8px; padding: 5px 20px;     /* box-shadow: 1px 2px 11px 3px #bdc0cb; */ }
@keyframes eyebrow-in {
from { opacity: 0; transform: translateX(-12px); }
to { opacity: 1; transform: none; }
}
/* ============ CARD SHINE EFFECT ON HOVER ============ */
.cap-card { overflow: hidden; }
.cap-card::after { content: ""; position: absolute; top: 0; left: -75%; width: 50%; height: 100%; background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.08) 50%, transparent 100%); transform: skewX(-15deg); transition: left 0.55s ease; pointer-events: none; }
.cap-card:hover::after { left: 130%; }
.cta-divider { display: block; border: 0; height: 1px; margin: 40px 0; background: linear-gradient(to right, transparent, #cfcfcf, transparent); }
@media(max-width:580px) {
.research-section .rc-hero { padding: 28px 15px 18px; }
.research-section .rc-card { padding: 28px 15px 18px; }
.research-section .rc-sub { padding: 28px 15px 32px; }
.btn { min-width: 100%; }
.cta { padding: 60px 0; }
.cta h2 { line-height: 1.35; }
.footer-bottom { justify-content: center; flex-direction: column-reverse; }
.footer-legal, .footer .container .cpwr { flex-direction: column; align-items: flex-start; align-self: flex-start; gap: 8px; }
}
@media (max-width:649px) {
.footer-grid { grid-template-columns: repeat(1, 1fr); }
}
.scroll-top { position: fixed; bottom: 32px; right: 32px; z-index: 5; width: 44px; height: 44px; border-radius: 50%; border: none; background: rgb(255, 255, 255); color: #000000; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, background 0.2s ease, bottom 0.18s ease; }
.scroll-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.scroll-top:hover { background: rgb(240, 240, 240); }
.scroll-top::before { content: 'Back to top'; position: absolute; right: calc(100% + 10px); top: 50%; transform: translateY(-50%) translateX(6px); background: rgba(10, 15, 30, 0.88); color: #ffffff; font-family: "Geist", sans-serif; font-size: 11px; font-weight: 500; letter-spacing: 0.4px; white-space: nowrap; padding: 5px 10px; border-radius: 6px; pointer-events: none; opacity: 0; transition: opacity 0.2s ease, transform 0.2s ease; }
.scroll-top::after { content: ''; position: absolute; right: calc(100% + 0px); top: 50%; transform: translateY(-50%); border: 5px solid transparent; border-left-color: rgba(10, 15, 30, 0.88); pointer-events: none; opacity: 0; transition: opacity 0.2s ease; }
.scroll-top:hover::before,
.scroll-top:focus-visible::before { opacity: 1; transform: translateY(-50%) translateX(0); }
.scroll-top:hover::after,
.scroll-top:focus-visible::after { opacity: 1; }
@media (hover:none), (max-width:480px) {
.scroll-top::before,
.scroll-top::after { display: none; }
}
.progress-ring { position: absolute; top: 0; left: 0; width: 44px; height: 44px; transform: rotate(-90deg); pointer-events: none; }
.progress-ring__circle { fill: none; stroke: #000000; stroke-width: 2.5; stroke-dasharray: 119.38; stroke-dashoffset: 119.38; stroke-linecap: round; transition: stroke-dashoffset 0.15s ease; }
.scroll-icon { width: 20px; height: 20px; }
.popup-overlay { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(5, 9, 28, 0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity 0.25s ease; }
.popup-overlay.active { display: flex; }
.popup-overlay.active.popup-open { opacity: 1; }
.hide { display: none !important; }
.popup-card { position: relative; background: #ffffff; border-radius: 10px; box-shadow: var(--shadow-lg); width: 100%; max-width: 650px; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; transform: translateY(20px) scale(0.97); transition: transform 0.28s cubic-bezier(0.34, 1.36, 0.64, 1), opacity 0.25s ease; opacity: 0; }
.popup-overlay.popup-open .popup-card { transform: translateY(0) scale(1); opacity: 1; }
.popup-close { position: absolute; top: 13px; right: 18px; width: 36px; height: 36px; border-radius: 50%; border: none; background: var(--bg-3); color: var(--ink-2); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s ease, color 0.2s ease; flex-shrink: 0; z-index: 20; }
.popup-close:hover { background: var(--border-2); }
.popup-close svg { width: 16px; height: 16px; }
.popup-close::before { content: 'Close'; position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(-4px); background: rgba(10, 15, 30, 0.88); color: #ffffff; font-family: "Geist", sans-serif; font-size: 11px; font-weight: 500; white-space: nowrap; padding: 4px 9px; border-radius: 5px; pointer-events: none; opacity: 0; transition: opacity 0.18s ease, transform 0.18s ease; z-index: 30; }
.popup-close::after { content: ''; position: absolute; top: calc(100% + 2px); left: 50%; transform: translateX(-50%); border: 4px solid transparent; border-bottom-color: rgba(10, 15, 30, 0.88); pointer-events: none; opacity: 0; transition: opacity 0.18s ease; z-index: 30; }
.popup-close:hover::before { opacity: 1; transform: translateX(-50%) translateY(0); }
.popup-close:hover::after { opacity: 1; }
@media (hover:none) {
.popup-close::before,
.popup-close::after { display: none; }
}
.popup-body { padding: 10px 40px 40px; overflow-y: auto; flex: 1; scrollbar-color: rgba(0, 0, 0, 0.404) transparent; }
.popup-body::-webkit-scrollbar { width: 4px; }
.popup-body::-webkit-scrollbar-track { background: transparent; }
.popup-body::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.14); cursor: pointer; }
.popup-body::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.28); cursor: pointer;}
.popup-body .eyebrow { position: fixed; width: 100%; top: 0; z-index: 10; background: #ffffff; margin: 0 -40px 20px; padding: 18px 72px 18px 40px; border-bottom: 1px solid rgba(0, 0, 0, 0.07); font-size: 0.82rem; }
.popup-title { font-size: 1.15rem; font-weight: 700; color: var(--ink); line-height: 1.25; margin-bottom: 10px; }
.popup-sub { font-size: 0.92rem; color: var(--muted); line-height: 1.65; margin-bottom: 28px; }
/* Form fields */
.popup-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; }
.field-group { display: flex; flex-direction: column; gap: 6px; }
.field-group--full { grid-column: 1 / -1; }
.field-group label { font-size: 0.82rem; font-weight: 600; color: var(--ink-2); letter-spacing: 0.03em; }
.req-star { color: #e53935; margin-left: 1px; }
.field-error { font-size: 0.75rem; color: #e53935; display: none; margin-top: 4px; }
.field-group input.error + .field-error,
.field-group textarea.error + .field-error { display: block; }
.field-group input,
.field-group textarea { font-family: var(--font); font-size: 0.93rem; color: var(--ink); background: var(--bg-2); border: 1.5px solid var(--border); border-radius: 10px; padding: 12px 16px; outline: none; transition: border-color 0.2s ease, box-shadow 0.2s ease; resize: vertical;}
.field-group input::placeholder,
.field-group textarea::placeholder { color: var(--faint); }
.field-group input:focus,
.field-group textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0, 168, 204, 0.15); background: #fff; }
.field-group input.error,
.field-group textarea.error { border-color: var(--red); box-shadow: 0 0 0 3px rgba(232, 0, 26, 0.10); }
.popup-submit { width: 100%; justify-content: center; background: #0d2347; border-color: #0d2347; box-shadow: none; }
.popup-submit:hover { background: #112d58; border-color: #112d58; box-shadow: none; }
.popup-submit:focus{background:#112d58!important;border-color:#112d58!important;box-shadow:0 0 10px 3px rgba(17,45,88,0.514)!important;outline:none!important;}

/* Success state */
.popup-success { text-align: center; padding: 20px 0 8px; }
.popup-success svg { width: 52px; height: 52px; stroke: var(--blue); margin-bottom: 16px; }
.popup-success h3 { font-size: 1.3rem; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.popup-success p { font-size: 0.92rem; color: var(--muted); }
.popup-toast { position: fixed; top: 88px; left: 50%; transform: translateX(-50%) translateY(-16px); z-index: 2000; display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 12px; font-family: var(--font); font-size: 0.875rem; font-weight: 500; line-height: 1.4; border: 1.5px solid; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.14), 0 2px 8px rgba(0, 0, 0, 0.10); min-width: 630px; max-width: min(650px, calc(100vw - 32px)); opacity: 0; pointer-events: none; transition: opacity 0.32s ease, transform 0.32s ease; }
.popup-toast--visible { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }

.popup-toast--success {
    background: #f8edba;
    border-color: #e7ef86;
    color: #202100;
}
.popup-toast--error { background: #fef2f2; border-color: #fca5a5; color: #991b1b; }
[data-theme="dark"] .popup-toast--error { background: #450a0a; border-color: #991b1b; color: #fca5a5; }

.popup-toast-icon { flex-shrink: 0; width: 20px; height: 20px; display: flex; align-items: center; }
.popup-toast-icon svg { width: 20px; height: 20px; }
.popup-toast-msg { flex: 1; }
.popup-toast-close { background: none; border: none; cursor: pointer; padding: 2px; color: inherit; opacity: 0.5; flex-shrink: 0; display: flex; align-items: center; transition: opacity 0.15s; }
.popup-toast-close:hover { opacity: 1; }
.popup-toast-close svg { width: 20px; height: 20px; }
/* Mobile */
@media (max-width:520px) {
.popup-body { padding: 20px 24px 28px; }
.popup-body .eyebrow { margin: 0 -24px 16px; padding: 14px 68px 14px 24px; }
.popup-fields { grid-template-columns: 1fr; }
.popup-title { font-size: 1.35rem; }
}
@media (max-width:768px) {
	.popup-toast { min-width : 90% }
    .popup-toast .popup-toast-msg{font-size : 0.775rem}
}
[data-theme="dark"] { --bg: #080808; --bg-2:#10131d; --bg-3:#0a0c0f; --ink: #e8f1fc; --ink-2:#b6cbe0; --muted: #8aabcc; --faint: #5e7898; --border: rgba(255, 255, 255, 0.11); --border-2:rgba(255, 255, 255, 0.20); --blue-title-top: #2ad4f2; --blue-glow: rgba(0, 200, 245, 0.28); --blue-soft: rgba(0, 200, 245, 0.12); --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.50), 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-md: 0 6px 24px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.40); --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.65), 0 8px 20px rgba(0, 0, 0, 0.45); }
[data-theme] body,
[data-theme] .section,
[data-theme] .section-alt,
[data-theme] .section-dark,
[data-theme] .research-section,
[data-theme] .team-section,
[data-theme] .stages-section,
[data-theme] .cta,
[data-theme] .footer,
[data-theme] .cap-card,
[data-theme] .rc-hero,
[data-theme] .rc-card,
[data-theme] .rc-sub,
[data-theme] .team-card { transition: background-color 0.35s ease, border-color 0.35s ease, color 0.35s ease; }
[data-theme="dark"] .hero { background: #080808; }
[data-theme="dark"] .hero-scrim { background: linear-gradient(to bottom, rgba(5, 9, 28, 0.40) 0%, rgba(5, 9, 28, 0.65) 45%, rgb(8 8 8) 100%), linear-gradient(to right, rgba(5, 9, 28, 0.35) 0%, transparent 35%, transparent 65%, rgba(5, 9, 28, 0.35) 100%) }
[data-theme="dark"] .nav::before { background: #0a0a0ceb; }
[data-theme="dark"] .nav-backdrop.open { background: #020510de; }
[data-theme="dark"] .section-dark { background: #10131d; }
[data-theme="dark"] .team-section { background: #0a0b0f; }
[data-theme="dark"] .stages-section { background: #111316; }
[data-theme="dark"] .stages-section::before { background: radial-gradient(ellipse, rgba(0, 200, 245, 0.14) 0%, transparent 65%); }
[data-theme="dark"] .cta { background: #000000; }
[data-theme="dark"] .cta::before { background: radial-gradient(ellipse, rgba(0, 200, 245, 0.30) 0%, transparent 65%); }
[data-theme="dark"] .research-section::before { background: radial-gradient(ellipse, rgba(0, 200, 245, 0.08) 0%, transparent 65%); }

[data-theme="dark"] .rc-hero,
[data-theme="dark"] .rc-card,
[data-theme="dark"] .team-card { background: #0c0e16; border-color: rgba(255, 255, 255, 0.10); }
[data-theme="dark"] .rc-hero { box-shadow: 0 0 0 1px rgba(0, 200, 245, 0.14), var(--shadow-md); }
[data-theme="dark"] .rc-hero::after { opacity: 0.85; }
[data-theme="dark"] .rc-sub-grid { border-color: rgba(255, 255, 255, 0.09); background: rgba(255, 255, 255, 0.09); }
[data-theme="dark"] .rc-sub { background: #0c0e16; }
[data-theme="dark"] .rc-sub:hover { background: rgba(14, 15, 15, 0.08); }
[data-theme="dark"] .cap-card { background: #0c0e16; border-color: rgba(255, 255, 255, 0.10); }
[data-theme="dark"] .cap-photo { background: #091028; }
[data-theme="dark"] .cap-card:hover { border-color: rgba(0, 200, 245, 0.35); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.60), 0 0 0 1px rgba(0, 200, 245, 0.22), 0 0 44px rgba(0, 200, 245, 0.12); }
[data-theme="dark"] .cap-card::after { background: linear-gradient(120deg, transparent 0%, rgba(0, 200, 245, 0.05) 50%, transparent 100%); }
[data-theme="dark"] .section-head h2:not(#tech-heading),
[data-theme="dark"] .team-section .section-head h2:not(#tech-heading) { background: linear-gradient(140deg, #f0f8ff 0%, #9adff8 55%, #5dcef5 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
/* Apply same gradient to the Roadmap section (currently hardcoded white) */
[data-theme="dark"] .stages-section .section-head h2 { background: linear-gradient(140deg, #f0f8ff 0%, #9adff8 55%, #5dcef5 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
/* Eyebrow pill: replace harsh white box with teal-tinted glass */
[data-theme="dark"] .section-head.reveal.visible .eyebrow.eyebrow-light { background-color: rgba(0, 200, 245, 0.08); box-shadow: inset 0 0 0 1px rgba(0, 200, 245, 0.18); }
[data-theme="dark"] .badge-dev { background: rgba(255, 255, 255, 0.07); color: var(--muted); border-color: rgba(255, 255, 255, 0.12); }
[data-theme="dark"] .badge-future { background: rgba(255, 255, 255, 0.04); color: var(--faint); border-color: rgba(255, 255, 255, 0.08); }
[data-theme="dark"] .drive-map figcaption { background: #080d24; }
[data-theme="dark"] .drive-map { border-color: rgba(255, 255, 255, 0.10); }
[data-theme="dark"] .drive-item { border-bottom-color: rgba(255, 255, 255, 0.13); }
[data-theme="dark"] .drive-item:first-child { border-top-color: rgba(255, 255, 255, 0.13); }
[data-theme="dark"] .why-item { border-bottom-color: rgba(255, 255, 255, 0.13); }
[data-theme="dark"] .why-item:first-child { border-top-color: rgba(255, 255, 255, 0.13); }
[data-theme="dark"] .step { border-top-color: rgba(255, 255, 255, 0.15); }
[data-theme="dark"] .footer { background: #000000; border-top-color: rgba(255, 255, 255, 0.07); }
[data-theme="dark"] .footer-grid { border-bottom-color: rgba(255, 255, 255, 0.08); }
[data-theme="dark"] .footer-brand p { color: rgba(255, 255, 255, 0.42); }
[data-theme="dark"] .footer-col h4 { color: rgba(255, 255, 255, 0.42); }
[data-theme="dark"] .footer-col a { color: rgba(255, 255, 255, 0.60); }
[data-theme="dark"] .footer-col a:hover { color: rgba(255, 255, 255, 0.94); }
[data-theme="dark"] .footer-bottom { color: rgba(255, 255, 255, 0.30); }
[data-theme="dark"] .footer-legal a { color: rgba(255, 255, 255, 0.60); }
[data-theme="dark"] .footer-legal a:hover { color: rgba(255, 255, 255, 0.78); }
[data-theme="dark"] .cta-divider { background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.14), transparent); }
[data-theme="dark"] .popup-overlay { background: rgba(1, 3, 12, 0.86); }
/* Card: dark slate with visible border and strong shadow */
[data-theme="dark"] .popup-card { background: #06070b; border: 1px solid rgba(255, 255, 255, 0.10); box-shadow: 0 0 0 1px rgba(0, 200, 245, 0.07), 0 32px 80px rgba(0, 0, 0, 0.72); }
/* Title: gradient treatment matching section headings */
[data-theme="dark"] .popup-title { background: linear-gradient(140deg, #f0f8ff 0%, #9adff8 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
/* Close button: glass with a subtle border */
[data-theme="dark"] .popup-close { background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.13); color: var(--ink-2); }
[data-theme="dark"] .popup-close:hover { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.24); }
[data-theme="dark"] .popup-body .eyebrow { background: #06070b; border-bottom-color: rgba(255, 255, 255, 0.08); }
[data-theme="dark"] .popup-body { scrollbar-color: rgba(255, 255, 255, 0.14) transparent; }
[data-theme="dark"] .popup-body::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.14); }
[data-theme="dark"] .popup-body::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.28); }
/* Inputs: slightly opaque surface with a clear border */
[data-theme="dark"] .field-group input,
[data-theme="dark"] .field-group textarea { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.14); color: var(--ink); }
[data-theme="dark"] .field-group input::placeholder,
[data-theme="dark"] .field-group textarea::placeholder { color: rgba(255, 255, 255, 0.28); }
/* Focus: teal accent ring */
[data-theme="dark"] .field-group input:focus,
[data-theme="dark"] .field-group textarea:focus { background: rgba(0, 200, 245, 0.05); border-color: rgba(0, 200, 245, 0.55); box-shadow: 0 0 0 3px rgba(0, 200, 245, 0.12); }
[data-theme="dark"] .popup-submit { background: var(--blue); border-color: var(--blue); box-shadow: 0 4px 22px rgba(0, 168, 204, 0.45); }
[data-theme="dark"] .popup-submit:hover { background: #0090b0; border-color: #0090b0; box-shadow: 0 6px 28px rgba(0, 168, 204, 0.62); }
/* ── Theme Toggle Switch ────────────────────────────────────────────────── */
.footer-theme { margin-top: 20px; }
.theme-toggle { position: relative; width: 62px; height: 30px; flex-shrink: 0; padding: 0; border-radius: 50px; border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.07); cursor: pointer; transition: background 0.25s ease, border-color 0.25s ease; -webkit-tap-highlight-color: transparent; }
.theme-toggle:hover { border-color: rgba(0, 208, 245, 0.45); }
.theme-toggle-knob { position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #ffe7b0 0%, #ffd27a 100%); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45); transition: transform 0.30s cubic-bezier(0.16, 1, 0.3, 1), background 0.30s ease; }
.theme-toggle .ti { position: absolute; width: 14px; height: 14px; transition: opacity 0.2s ease; }
.ti-sun { color: #8a5a00; opacity: 1; }
.ti-moon { color: #cfeeff; opacity: 0; }
[data-theme="dark"] .theme-toggle { background: rgba(0, 200, 245, 0.16); border-color: rgba(0, 208, 245, 0.40); }
[data-theme="dark"] .theme-toggle-knob { transform: translateX(32px); background: linear-gradient(135deg, #1aa9d6 0%, #0d6f96 100%); }
[data-theme="dark"] .ti-sun { opacity: 0; }
[data-theme="dark"] .ti-moon { opacity: 1; }
/* Scroll-to-top ring in dark mode */
[data-theme="dark"] .scroll-top { background: #1e1f22; color: #eaf1fb; }
[data-theme="dark"] .scroll-top:hover { background: #1e1f22; }
[data-theme="dark"] .scroll-top::before { background: #1e1f22; color: #e8eeff; border: 1px solid rgba(255, 255, 255, 0.12); }
[data-theme="dark"] .scroll-top::after { border-left-color: #1e1f22; }
[data-theme="dark"] .progress-ring__circle { stroke: #2ad0ee; }
@media (prefers-reduced-motion:reduce) {
.cap-body h3 [data-theme] body,
[data-theme] .section,
[data-theme] .section-alt,
[data-theme] .section-dark,
[data-theme] .research-section,
[data-theme] .team-section,
[data-theme] .stages-section,
[data-theme] .cta,
[data-theme] .footer,
[data-theme] .cap-card,
[data-theme] .rc-hero,
[data-theme] .rc-card,
[data-theme] .rc-sub,
[data-theme] .team-card,
.theme-toggle-knob { transition: none; }
}
@media (max-width:380px) {
.hero h1 {         /* font-size : 40px;  */
font-size: clamp(20px, 10vw, 40px); }
}


/* ABOUT STYLE START  */

/* ============ ABOUT PAGE STYLES ============ */


/* ============================================================
   LIGHT THEME VARIABLES (default)
   To activate dark theme: add data-theme="dark" to <html>
   or toggle class "dark-theme" on .about-page
   ============================================================ */

.about-page {
    /* Backgrounds */
    --ab-bg-page: #ffffff;
    --ab-bg-section-light: #ffffff;
    --ab-bg-section-alt: #f8fafd;
    --ab-bg-section-dark: #05091c;
    --ab-bg-card: #f8fafd;
    --ab-bg-card-dark: rgba(255, 255, 255, 0.04);
    --ab-bg-card-dark-hover: rgba(255, 255, 255, 0.07);
    --ab-bg-card-img: #0a0f1e;
    /* Text — light sections */
    --ab-text-primary: #0a0f1e;
    --ab-text-muted: #4b5a70;
    /* Text — dark sections (overlaid on images / dark bg) */
    --ab-text-on-dark: #ffffff;
    --ab-text-on-dark-82: rgba(255, 255, 255, 0.82);
    --ab-text-on-dark-70: rgba(255, 255, 255, 0.70);
    --ab-text-on-dark-60: rgba(255, 255, 255, 0.60);
    --ab-text-on-dark-55: rgba(255, 255, 255, 0.55);
    --ab-text-on-dark-50: rgba(255, 255, 255, 0.50);
    --ab-text-on-dark-45: rgba(255, 255, 255, 0.45);
    --ab-text-on-dark-15: rgba(255, 255, 255, 0.15);
    /* Accent / brand */
    --ab-accent: #057a93;
    --ab-accent-blue: #00a8cc;
    --ab-accent-cyan: #00d0f5;
    --ab-accent-bright: #00d9ff;
    /* Borders */
    --ab-border: #dde5f0;
    --ab-border-light: #f1f5fb;
    --ab-border-dark: rgba(255, 255, 255, 0.09);
    --ab-border-dark-hover: rgba(0, 217, 255, 0.30);
    /* Overlays (image sections) */
    --ab-overlay-hero: linear-gradient(160deg, rgb(5 9 28 / 35%) 0%, rgba(11, 18, 41, 0.82) 100%);
    --ab-overlay-proven: linear-gradient(120deg, rgb(0 0 0 / 93%) 0%, rgb(0 0 0 / 65%) 100%);
    --ab-overlay-future: linear-gradient(135deg, rgba(5, 9, 28, 0.82) 0%, rgba(11, 18, 41, 0.75) 100%);
    /* Badges */
    --ab-badge-1-bg: rgba(0, 168, 204, 0.15);
    --ab-badge-1-color: #00a8cc;
    --ab-badge-2-bg: rgba(0, 208, 245, 0.12);
    --ab-badge-2-color: #00d0f5;
    --ab-badge-3-bg: rgba(5, 122, 147, 0.15);
    --ab-badge-3-color: #00d9ff;
    /* Shadows */
    --ab-shadow-card-hover: 0 16px 40px rgba(0, 0, 0, 0.30);
    --ab-shadow-test-hover: 0 8px 32px rgba(0, 168, 204, 0.10);
    /* Page base */
    background: var(--ab-bg-page);
    color: var(--ab-text-primary);
    font-family: "Geist", sans-serif;
}




[data-theme="dark"] .about-page {
    /* Backgrounds */
    --ab-bg-page: #05091c;
    --ab-bg-section-light: #080e20;
    --ab-bg-section-alt: #070809;
    --ab-bg-section-dark: #0e1012;
    --ab-bg-card: rgba(255, 255, 255, 0.05);
    --ab-bg-card-dark: rgba(255, 255, 255, 0.06);
    --ab-bg-card-dark-hover: rgba(255, 255, 255, 0.10);
    --ab-bg-card-img: #030610;
    /* Text */
    --ab-text-primary: #e8eeff;
    --ab-text-muted: #7a8fa8;
    /* Borders */
    --ab-border: rgba(255, 255, 255, 0.10);
    --ab-border-light: rgba(255, 255, 255, 0.05);
    /* Shadows */
    --ab-shadow-card-hover: 0 16px 40px rgba(0, 0, 0, 0.60);
    --ab-shadow-test-hover: 0 8px 32px rgba(0, 168, 204, 0.20);

    --ab-overlay-hero-dark : linear-gradient(160deg, rgb(0 0 0 / 43%) 0%, rgb(0 0 0 / 82%) 100%);
    --ab-overlay-future-dark : linear-gradient(135deg, rgb(0 0 0 / 82%) 0%, rgb(0 0 0 / 75%) 100%);
}


/* Dark mode: revert .technology-light back to dark styles */

[data-theme="dark"] .about-page .technology-light {
    background: var(--ab-bg-section-dark);
}
[data-theme="dark"] .about-page .hero-overlay{
    background: var(--ab-overlay-hero-dark);
}
[data-theme="dark"] .about-page .technology-light .section-label {
    color: var(--ab-accent-bright);
}

[data-theme="dark"] .about-page .technology-light h2 {
    color: var(--ab-text-on-dark);
}

[data-theme="dark"] .about-page .technology-light .section-description {
    color: var(--ab-text-on-dark-60);
}

[data-theme="dark"] .about-page .technology-light .stage-card {
    background: var(--ab-bg-card-dark);
    border: 1px solid var(--ab-border-dark);
    box-shadow: none;
}

[data-theme="dark"] .about-page .technology-light .stage-number {
    color:#ffffffa3;
}

[data-theme="dark"] .about-page .technology-light .stage-card h3 {
    color: var(--ab-text-on-dark);
}

[data-theme="dark"] .about-page .technology-light .stage-card>p {
    color: var(--ab-text-on-dark-55);
}

[data-theme="dark"] .about-page .technology-light .features-list li {
    color: var(--ab-text-on-dark-45);
    border-bottom-color: var(--ab-border-dark);
}

[data-theme="dark"] .about-page .technology-light .features-list li::before {
    background: var(--ab-accent-bright);
    width: 5px;
    height: 5px;
}

[data-theme="dark"] .about-page .technology-light .stage-badge {
    background: var(--ab-badge-1-bg);
    color: var(--ab-badge-1-color);
    border: none;
}

[data-theme="dark"] .about-page .technology-light .stage-badge.badge-dev {
    background: var(--ab-badge-2-bg);
    color: var(--ab-badge-2-color);
    border: none;
}

[data-theme="dark"] .about-page .technology-light .stage-badge.badge-future {
    background: var(--ab-badge-3-bg);
    color: var(--ab-badge-3-color);
    border: none;
}


/* Smooth transition when switching theme */

.about-page,
.about-page * {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}


/* Exclude elements where transitions cause flicker */

.about-page .hero-section,
.about-page .proven-section,
.about-page .future-section,
.about-page .hero-overlay,
.about-page .proven-section::before,
.about-page .future-overlay,
.about-page img {
    transition: none;
}


/* ============ HERO SECTION ============ */

.about-page .hero-section {
     background-color: #0b1118;
    background-image: url('../images/hero-autonomous.jpg');
    min-height: 72vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    position: relative;
    overflow: hidden;
    padding: clamp(80px, 12vw, 160px) clamp(20px, 5vw, 80px);
}

.about-page .hero-overlay {
    position: absolute;
    inset: 0;
    background: var(--ab-overlay-hero);
    z-index: 1;
    pointer-events: none;
}

.about-page .hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 1000px;
    margin: 0 auto;
}

.about-page .hero-label {
    display: inline-block;
    font-size: clamp(30px, 6.5vw, 70px);
    font-weight: 700;
    letter-spacing: 0px;
    text-transform: capitalize;
    color: var(--ab-accent-bright);
    margin-bottom: clamp(13px, 2vw, 13px);
}

.about-page .hero-section h1 {
    font-size: clamp(38px, 6.5vw, 56px);
    font-weight: 600;
    line-height: 1.08;
    margin-bottom: clamp(20px, 2.5vw, 32px);
    letter-spacing: clamp(-1px, -0.15vw, -2px);
    color: var(--ab-text-on-dark);
}

.about-page .hero-section .hero-label sup {
        /* top: -25px;
    position: relative; */
    font-size: clamp(17px, 4vw, 43px);
    position: relative;
    left: clamp(-9px, 4vw, -7px);
}

.about-page .hero-description {
    font-size: clamp(15px, 1.5vw, 19px);
    font-weight: 400;
    line-height: 1.75;
    color: var(--ab-text-on-dark-82);
    max-width: 730px;
    margin: 0 auto clamp(28px, 4vw, 48px);
}

.about-page .btn-large {
    padding: 14px 36px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.5px;
    min-width: 200px;
}


/* ============ SHARED SECTION BASE ============ */

.about-page .section {
    padding: clamp(60px, 8vw, 120px) clamp(20px, 5vw, 80px);
    position: relative;
}


/* ============ SECTION LABEL (shared) ============ */

.about-page .section-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: clamp(10px, 1vw, 13px);
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--ab-accent);
    margin-bottom: clamp(14px, 1.5vw, 22px);
}

.about-page .section-label::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 2px;
    background: currentColor;
    flex-shrink: 0;
}


/* ============ MISSION SECTION ============ */

.about-page .mission-section {
    background: var(--ab-bg-section-alt);
}

.about-page .mission-section .container {
    display: grid;
    grid-template-columns: 0.6fr 2fr;
    gap: clamp(30px, 6vw, 30px);
    align-items: start;
}

.about-page .mission-section .section-label {
    grid-column: 1 / -1;
}

.about-page .mission-section h2 {
    font-size: clamp(32px, 5vw, 64px);
    font-weight: 600;
    color: var(--ab-text-primary);
    line-height: 1.1;
    margin: 0;
}

.about-page .mission-text-right {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 24px;
    /* padding-top: clamp(8px, 1.5vw, 20px); */
}

.about-page .mission-text-large {
    font-size: clamp(16px, 1.8vw, 26px);
    font-weight: 500;
    line-height: 1.6;
    color: var(--ab-text-primary);
    margin: 0;
}

.about-page .mission-text-medium {
    font-size: clamp(14px, 1.4vw, 17px);
    font-weight: 400;
    line-height: 1.85;
    color: var(--ab-text-muted);
    margin: 0;
}


/* ============ STAGES SECTION ============ */

.about-page .stages-section {
    background: var(--ab-bg-section-dark);
}

.about-page .stages-section .section-label {
    color: var(--ab-accent-bright);
}

.about-page .stages-section h2 {
    font-size: clamp(28px, 4vw, 52px);
    font-weight: 600;
    color: var(--ab-text-on-dark);
    margin-bottom: clamp(12px, 2vw, 24px);
    line-height: 1.15;
}

.about-page .stages-section .section-description {
    font-size: clamp(14px, 1.5vw, 18px);
    font-weight: 400;
    line-height: 1.8;
    color: var(--ab-text-on-dark-60);
    max-width: 720px;
    margin-bottom: clamp(40px, 6vw, 72px);
}

.about-page .stages-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(16px, 2.5vw, 30px);
}

.about-page .stage-card {
    background: var(--ab-bg-card-dark);
    padding: clamp(21px, 3vw, 30px);
    border-radius: 14px;
    border: 1px solid var(--ab-border-dark);
    transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}


/* Shine sweep — same as cap-card in preview-view2 */

.about-page .stage-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.07) 50%, transparent 100%);
    transform: skewX(-15deg);
    transition: left 0.55s ease;
    pointer-events: none;
}

.about-page .stage-card:hover {
    border-color: rgba(0, 200, 245, 0.30);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.40), 0 0 0 1px rgba(0, 200, 245, 0.18), 0 0 40px rgba(0, 200, 245, 0.08);
    transform: translateY(-5px);
}

.about-page .stage-card:hover::after {
    left: 130%;
}

.about-page .stage-number {
    font-size: clamp(24px, 3vw, 36px);
    font-weight: 700;
    color: var(--ab-text-on-dark-15);
    margin-bottom: 14px;
    display: block;
}

.about-page .stage-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    background: var(--ab-badge-1-bg);
    color: var(--ab-badge-1-color);
    padding: 5px 12px;
    border-radius: 4px;
    margin-bottom: 20px;
    width: fit-content;
}

.about-page .stage-badge.badge-dev {
    background: var(--ab-badge-2-bg);
    color: var(--ab-badge-2-color);
}

.about-page .stage-badge.badge-future {
    background: var(--ab-badge-3-bg);
    color: var(--ab-badge-3-color);
}

.about-page .stage-card h3 {
    font-size: clamp(18px, 2vw, 28px);
    font-weight: 700;
    color: var(--ab-text-on-dark);
    margin-bottom: 14px;
    letter-spacing: 0.3px;
    line-height: 1.2;
}

.about-page .stage-card>p {
    font-size: clamp(13px, 1.2vw, 15px);
    font-weight: 400;
    line-height: 1.7;
    color: var(--ab-text-on-dark-55);
    margin-bottom: 24px;
    flex: 1;
}

.about-page .features-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.about-page .features-list li {
    font-size: clamp(13px, 1.2vw, 15px);
    font-weight: 400;
    color: var(--ab-text-on-dark-45);
    padding: 10px 0;
    border-bottom: 1px solid var(--ab-border-dark);
    display: flex;
    align-items: center;
    gap: 10px;
}

.about-page .features-list li::before {
    content: '';
    width: 12px;
    height: 12px;
    background: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.99969 3L4.50024 8.4996L2.00049 5.99978' stroke='%2306B6D4' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
    flex-shrink: 0;
}

.about-page .features-list li:last-child {
    border-bottom: none;
}


/* ============ TECHNOLOGY SECTION – WHITE BG OVERRIDE ============ */


/* All rules scoped to .technology-light — remove that class to revert */

.about-page .technology-light {
    background: #edf2f7;
}

.about-page .technology-light .section-label {
    color: var(--ab-accent);
    font-weight: 700;
    letter-spacing: 2px;
}

.about-page .technology-light h2 {
    color: var(--ab-text-primary);
}

.about-page .technology-light .section-description {
    color: var(--ab-text-muted);
}


/* Cards: white surface so they lift off the tinted section bg */

.about-page .technology-light .stage-card {
    background: #ffffff;
    border: 1.5px solid #d0dae8;
    box-shadow: 0 4px 16px rgba(10, 15, 40, 0.08), 0 1px 4px rgba(10, 15, 40, 0.04);
}

.about-page .technology-light .stage-card:hover {
    border-color: var(--ab-accent-blue);
    box-shadow: 0 16px 48px rgba(0, 168, 204, 0.18), 0 4px 12px rgba(10, 15, 40, 0.10), 0 0 0 1px rgba(0, 168, 204, 0.22);
    transform: translateY(-6px);
}


/* Stage number: tinted accent so it's visible but still decorative */

.about-page .technology-light .stage-number {
    color: #06B6D4;
}

.about-page .technology-light .stage-card h3 {
    color: var(--ab-text-primary);
}

.about-page .technology-light .stage-card>p {
    color: #3d4f63;
}

.about-page .technology-light .features-list li {
    color: var(--ab-text-muted);
    border-bottom-color: #e4ecf4;
}

.about-page .technology-light .features-list li::before {
    background: var(--ab-accent-blue);
    width: 6px;
    height: 6px;
}


/* Badge visibility boost */

.about-page .technology-light .stage-badge {
    background: rgba(5, 122, 147, 0.10);
    color: var(--ab-accent);
    border: 1px solid rgba(5, 122, 147, 0.22);
}

.about-page .technology-light .stage-badge.badge-dev {
    background: rgba(0, 168, 204, 0.12);
    color: #0090b0;
    border: 1px solid rgba(0, 168, 204, 0.28);
}

.about-page .technology-light .stage-badge.badge-future {
    background: rgba(0, 208, 245, 0.10);
    color: #0090b0;
    border: 1px solid rgba(0, 208, 245, 0.28);
}


/* ============ PROVEN SECTION ============ */

.about-page .proven-section {
    position: relative;
    min-height: 600px;
    display: flex;
    align-items: center;
    background-image: url('../images/lane-change.jpg');
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.about-page .proven-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--ab-overlay-proven);
    z-index: 1;
    pointer-events: none;
}

.about-page .proven-section>.container {
    position: relative;
    z-index: 2;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: clamp(20px, 6vw, 20px);
    align-items: center;
}

.about-page .proven-section .section-label {
    color: var(--ab-accent-bright);
    grid-column: 1 / -1;
}

.about-page .proven-section h2 {
    font-size: clamp(36px, 5vw, 70px);
    font-weight: 700;
    color: var(--ab-text-on-dark);
    line-height: 1;
    margin: 0;
    letter-spacing: 5px;
}

.about-page .proven-description {
    font-size: clamp(13px, 1.4vw, 17px);
    font-weight: 400;
    line-height: 1.8;
    color: var(--ab-text-on-dark-70);
    max-width: 560px;
    margin: clamp(16px, 2vw, 28px) 0 0;
}

.about-page .proven-stats {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    flex-shrink: 0;
}

.about-page .big-number {
    font-size: clamp(80px, 12vw, 180px);
    font-weight: 700;
    color: var(--ab-accent-cyan);
    line-height: 0.9;
    letter-spacing: -4px;
}

.about-page .stats-label {
    font-size: clamp(14px, 1.8vw, 22px);
    font-weight: 700;
    color: var(--ab-text-on-dark);
    text-transform: uppercase;
    letter-spacing: 2px;
    text-align: right;
}

.about-page .stats-note {
    font-size: clamp(11px, 1vw, 13px);
    font-weight: 400;
    color: var(--ab-text-on-dark-50);
    text-align: right;
    margin-top: 8px;
}


.about-page .testing-section {
    background: #edf2f7;
}


/* Light-theme text & card overrides for testing-section */

.about-page .testing-section .section-label {
    color: var(--ab-accent);
}

.about-page .testing-section h2 {
    color: var(--ab-text-primary);
}

.about-page .testing-description {
    color: var(--ab-text-muted);
}

.about-page .testing-card {
    background: #ffffff;
    border-color: #d0dae8;
    box-shadow: 0 4px 16px rgba(10, 15, 40, 0.08), 0 1px 4px rgba(10, 15, 40, 0.04);
}

.about-page .testing-card:hover {
    border-color: var(--ab-accent-blue);
    box-shadow: 0 16px 48px rgba(0, 168, 204, 0.18), 0 4px 12px rgba(10, 15, 40, 0.10), 0 0 0 1px rgba(0, 168, 204, 0.22);
}

.about-page .testing-card-tag {
    color: var(--ab-accent);
}

.about-page .testing-card h3 {
    color: var(--ab-text-primary);
}

.about-page .testing-card p {
        color: #191e26;
}

.about-page .testing-card-link {
    color: var(--ab-accent);
}


/* Dark-mode: revert testing-section back to dark styles */

[data-theme="dark"] .about-page .testing-section {
    background: var(--ab-bg-section-dark);
}

[data-theme="dark"] .about-page .testing-section .section-label {
    color: var(--ab-accent-bright);
}

[data-theme="dark"] .about-page .testing-section h2 {
    color: var(--ab-text-on-dark);
}

[data-theme="dark"] .about-page .testing-description {
    color: var(--ab-text-on-dark-60);
}

[data-theme="dark"] .about-page .testing-card {
    background: var(--ab-bg-card-dark);
    border-color: var(--ab-border-dark);
    box-shadow: none;
}

[data-theme="dark"] .about-page .testing-card:hover {
    border-color: rgba(0, 200, 245, 0.30);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.40), 0 0 0 1px rgba(0, 200, 245, 0.18), 0 0 40px rgba(0, 200, 245, 0.08);
}

[data-theme="dark"] .about-page .testing-card-tag {
    color: var(--ab-accent-bright);
}

[data-theme="dark"] .about-page .testing-card h3 {
    color: var(--ab-text-on-dark);
}

[data-theme="dark"] .about-page .testing-card p {
    color: var(--ab-text-on-dark-55);
}

[data-theme="dark"] .about-page .testing-card-link {
    color: var(--ab-accent-bright);
}

.about-page .testing-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 5vw, 80px);
    align-items: end;
    margin-bottom: clamp(40px, 6vw, 72px);
}

.about-page .testing-section h2 {
    font-size: clamp(20px, 4vw, 52px);
    font-weight: 600;
    line-height: 1.12;
    margin: 0;
}

.about-page .testing-description {
    font-size: clamp(14px, 1.4vw, 17px);
    font-weight: 400;
    line-height: 1.85;
    margin: 0;
    align-self: end;
    padding-bottom: 4px;
}

.about-page .testing-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(20px, 2.5vw, 32px);
}

.about-page .testing-card {
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid #dce1e7;
    transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
    display: flex;
    flex-direction: column;
    position: relative;
}


/* Shine sweep on hover — same as cap-card in preview-view2 */

.about-page .testing-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.07) 50%, transparent 100%);
    transform: skewX(-15deg);
    transition: left 0.55s ease;
    pointer-events: none;
    z-index: 3;
}

.about-page .testing-card:hover {
    border-color: rgba(0, 200, 245, 0.30);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.40), 0 0 0 1px rgba(0, 200, 245, 0.18), 0 0 40px rgba(0, 200, 245, 0.08);
    transform: translateY(-5px);
}

.about-page .testing-card:hover::after {
    left: 130%;
}

.about-page .testing-card-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--ab-bg-card-img);
    overflow: hidden;
    position: relative;
}

.about-page .testing-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.about-page .testing-card:hover .testing-card-image img {
    transform: scale(1.04);
}

.about-page .testing-card-image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(5, 9, 28, 0.60) 100%);
    pointer-events: none;
}

.about-page .testing-card-body {
    padding: clamp(20px, 2.5vw, 32px);
    display: flex;
    flex-direction: column;
    flex: 1;
}

.about-page .testing-card-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.about-page .testing-card h3 {
    font-size: clamp(16px, 1.8vw, 22px);
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 12px;
    letter-spacing: 0.5px;
    line-height: 1.2;
}

.about-page .testing-card p {
    font-size: clamp(13px, 1.2vw, 15px);
    font-weight: 400;
    line-height: 1.75;
    margin: 0 0 20px;
    flex: 1;
}

.about-page .testing-card-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    letter-spacing: 0.3px;
    transition: gap 0.2s ease, opacity 0.2s ease;
    margin-top: auto;
}

.about-page .testing-card-link:hover {
    gap: 10px;
    opacity: 0.85;
}


/* ============ BUILT SECTION ============ */

.about-page .built-section {
    background: var(--ab-bg-section-alt);
    border-top: 1px solid var(--ab-border);
    border-bottom: 1px solid var(--ab-border);
}

.about-page .built-section .section-label {
    color: var(--ab-accent);
}

.about-page .built-section h2 {
    font-size: clamp(28px, 4.5vw, 60px);
    font-weight: 600;
    color: var(--ab-text-primary);
    margin-bottom: clamp(16px, 2vw, 28px);
    line-height: 1.1;
    max-width: 800px;
}

.about-page .built-description {
    font-size: clamp(14px, 1.5vw, 18px);
    font-weight: 400;
    line-height: 1.85;
    color: var(--ab-text-muted);
    max-width: 700px;
}


/* ============ FUTURE SECTION ============ */

.about-page .future-section {
    background-image: url('../images/future-where-headed.jpg');
    background-size: cover;
    background-position: center top;
    position: relative;
    min-height: 600px;
    display: flex;
    align-items: center;
}

.about-page .future-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(240, 248, 255, 0.30) 0%, rgba(255, 255, 255, 0.15) 100%);
    pointer-events: none;
}

.about-page .future-content {
    position: relative;
    z-index: 2;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.about-page .future-section .section-label {
    color: var(--ab-accent);
}

.about-page .future-section h2 {
    font-size: clamp(36px, 6vw, 80px);
    font-weight: 700;
    color: var(--ab-text-primary);
    line-height: 1.05;
    letter-spacing: clamp(-1px, -0.1vw, -2px);
    margin-bottom: clamp(16px, 2vw, 24px);
}

.about-page .future-description {
    font-size: clamp(15px, 1.5vw, 19px);
    font-weight: 400;
    line-height: 1.85;
    color: var(--ab-text-muted);
    max-width: 600px;
    margin: 0 auto clamp(32px, 4vw, 48px);
}

.about-page .future-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
}

.about-page .btn-outline-light {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 36px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.5px;
    border-radius: 50px;
    border: 1.5px solid rgba(5, 122, 147, 0.55);
    color: var(--ab-accent);
    background: transparent;
    text-decoration: none;
    transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.about-page .btn-outline-light:hover {
    border-color: var(--ab-accent-blue);
    color: var(--ab-accent-blue);
    background: rgba(0, 168, 204, 0.08);
}


/* Dark-mode: revert future-section to proven-roads.jpg with white text */

[data-theme="dark"] .about-page .future-section {
    background-image: url('../images/proven-roads.jpg');
    background-position: center;
}

[data-theme="dark"] .about-page .future-overlay {
    background: var(--ab-overlay-future-dark);
}

[data-theme="dark"] .about-page .future-section .section-label {
    color: var(--ab-accent-bright);
}

[data-theme="dark"] .about-page .future-section h2 {
    color: var(--ab-text-on-dark);
}

[data-theme="dark"] .about-page .future-description {
    color: var(--ab-text-on-dark-70);
}

[data-theme="dark"] .about-page .btn-outline-light {
    border-color: rgba(255, 255, 255, 0.55);
    color: var(--ab-text-on-dark);
}

[data-theme="dark"] .about-page .btn-outline-light:hover {
    border-color: var(--ab-accent-bright);
    color: var(--ab-accent-bright);
    background: rgba(0, 217, 255, 0.08);
}


/* ============================================================
   RESPONSIVE — Tablet (max 1024px)
   ============================================================ */

@media (max-width: 1160px) {
    .about-page .stages-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 1024px) {
    .about-page .mission-section .container {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .about-page .mission-section h2 {
        grid-column: auto;
    }
     .about-page .mission-section h2 br{
        display: none;
     }

    .about-page .proven-section>.container {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .about-page .proven-stats {
        flex-direction: row;
        align-items: center;
        gap: 24px;
    }
    .about-page .stats-label,
    .about-page .stats-note {
        text-align: left;
    }
    .about-page .hero-section {
        background-attachment: scroll;
    }
    .about-page .testing-header {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}


/* ============================================================
   RESPONSIVE — Tablet Portrait (max 768px)
   ============================================================ */

@media (max-width: 768px) {
    .about-page .hero-section {
        min-height: 70vh;
        padding: 100px 24px 60px;
    }
    .about-page .stages-grid {
        grid-template-columns: 1fr;
    }
    .about-page .testing-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .about-page .testing-card-image {
        aspect-ratio: 16 / 8;
    }
    .about-page .proven-stats {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    .about-page .big-number {
        letter-spacing: -2px;
    }
    .about-page .mission-section .container {
        gap: 24px;
    }
    .about-page .future-description {
        max-width: 100%;
    }
}


/* ============================================================
   RESPONSIVE Mobile (max 480px)
   ============================================================ */

@media (max-width: 480px) {
    .about-page .section {
        padding: 56px 20px;
    }
    .about-page .hero-section {
        min-height: 70svh;
        padding: 90px 20px 50px;
    }
    .about-page .hero-section h1 {
        letter-spacing: -1px;
    }
    .about-page .stage-card {
        padding: 24px 20px;
    }
    .about-page .testing-card-body {
        padding: 20px;
    }
    .about-page .proven-section>.container {
        gap: 28px;
    }
    .about-page .stages-grid {
        gap: 14px;
    }
}


/* ============================================================
   RESPONSIVE Small Mobile (max 360px)
   ============================================================ */

@media (max-width: 360px) {
    .about-page .hero-section h1 {
        font-size: 34px;
        letter-spacing: -0.5px;
    }
    .about-page .big-number {
        font-size: 72px;
    }
}


/* ============================================================
   OS / BROWSER TARGETED FIXES  (via env-detect.js classes)
   ============================================================ */


/* Safari / iOS: fix background-attachment:fixed */

html.os-ios .about-page .hero-section,
html.browser-safari .about-page .hero-section {
    background-attachment: scroll;
}


/* Firefox: subpixel font rendering */

html.browser-firefox .about-page .hero-section h1 {
    -moz-osx-font-smoothing: grayscale;
}


/* Edge: remove fixed background */

html.browser-edge .about-page .hero-section {
    background-attachment: scroll;
}


/* Touch devices: disable hover lift on cards */

html.touch .about-page .stage-card:hover,
html.touch .about-page .testing-card:hover {
    transform: none;
}



.about-page .nav-toggle span {
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.about-page .nav-toggle.open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.about-page .nav-toggle.open span:nth-child(2) {
    opacity: 0;
}

.about-page .nav-toggle.open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ── Scroll-to-top button ──────────────────────────────────────────────────
   Restore full transitions overridden by the broad ".about-page *" rule.
────────────────────────────────────────────────────────────────────────── */

.about-page .scroll-top {
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, background 0.2s ease, bottom 0.18s ease;
}


/* ABOUT STYLE END */



/* MANIFESTO STYLE START */

/* ============================================================
   MANIFESTO PAGE STYLES
   Parent class: .manifesto-page
   All rules scoped under .manifesto-page to avoid conflicts
   ============================================================ */


/* ============ VARIABLES — LIGHT THEME ============ */

.manifesto-page {
    /* Backgrounds */
    --mf-bg-page: #ffffff;
    --mf-bg-items: #ffffff;
    /* Text */
    --mf-text-primary: #0a0f1e;
    --mf-text-muted: #4b5a70;
    /* Accent */
    --mf-accent: #29aecb;
    --mf-accent-cyan: #29aecb;
    --mf-accent-bright: #29aecb;
    /* Step — single unified color */
    --mf-step-color: #29aecb;
    --mf-step-glow: rgba(41, 174, 203, 0.20);
    --mf-step-shadow: rgba(41, 174, 203, 0.35);
    /* Timeline */
    --mf-line-color: #dde5f0;
    --mf-dot-color: #29aecb;
    --mf-dot-glow: rgba(41, 174, 203, 0.20);
    /* Borders */
    --mf-border: #dde5f0;
    /* Number color */
    --mf-number-color: #29aecb;
    /* Overlays */
    --mf-overlay-hero: linear-gradient(180deg, rgba(5, 9, 28, 0.55) 0%, rgba(5, 9, 28, 0.80) 100%);
    background: var(--mf-bg-page);
    color: var(--mf-text-primary);
    font-family: "Geist", sans-serif;
}


/* ============ DARK THEME OVERRIDES ============ */

[data-theme="dark"] .manifesto-page {
    --mf-bg-page: #05091c;
    --mf-bg-items: #0a0a0a;
    --mf-text-primary: #e8eeff;
    --mf-text-muted: #7a8fa8;
    --mf-line-color: rgba(255, 255, 255, 0.10);
    --mf-border: rgba(255, 255, 255, 0.10);
}


/* Smooth theme transitions */

.manifesto-page,
.manifesto-page *:not(.mf-hero):not(.mf-hero-overlay) {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}


/* ============================================================
   HERO SECTION
   ============================================================ */

.manifesto-page .mf-hero {
    position: relative;
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url('../images/testing-real-world-logging.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    overflow: hidden;
    padding: clamp(100px, 14vw, 180px) clamp(20px, 5vw, 80px) clamp(80px, 10vw, 140px);
}

.manifesto-page .mf-hero-overlay {
    position: absolute;
    inset: 0;
    background: var(--mf-overlay-hero);
    pointer-events: none;
}
[data-theme="dark"] .manifesto-page .mf-hero-overlay {
    background: linear-gradient(180deg, rgb(0 0 0 / 53%) 0%, rgb(10 10 10) 100%);
}

.manifesto-page .mf-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.manifesto-page .mf-hero-title {
    font-size: clamp(44px, 9vw, 87px);
    font-weight: 700;
    color: #ffffff;
    line-height: 1.0;
    letter-spacing: clamp(-1px, -0.2vw, -3px);
    margin: 0 0 clamp(16px, 2vw, 24px);
    text-transform: uppercase;
}

.manifesto-page .mf-hero-sub {
    font-size: clamp(22px, 4vw, 43px);
    font-weight: 700;
    letter-spacing: clamp(2px, 0.4vw, 4px);
    text-transform: uppercase;
    color: #ffffff;
    margin: 0 0 clamp(18px, 2.5vw, 28px);
}

.manifesto-page .mf-hero-desc {
    font-size: clamp(15px, 1.6vw, 19px);
    font-weight: 400;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.78);
    max-width: 560px;
    margin: 0 0 clamp(40px, 6vw, 72px);
}

.manifesto-page .mf-hero-brand {
    font-size: clamp(11px, 1vw, 13px);
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
}



/* ============================================================
   STICKY SECTION TITLE
   Hidden until hero scrolls out of view; JS adds .is-visible
   ============================================================ */

.manifesto-page .mf-sticky-title {
    position: sticky;
    top: 70px;
    z-index: 9;
    padding: 14px 0;
    margin-left: calc(-1 * clamp(20px, 5vw, 80px));
    margin-right: calc(-1 * clamp(20px, 5vw, 80px));
    text-align: center;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    /* Bottom accent line */
    border-bottom: 1px solid rgba(5, 122, 147, 0.22);
    /* Float shadow */
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.07), 0 1px 0 rgba(5, 122, 147, 0.12);
}

[data-theme="dark"] .manifesto-page .mf-sticky-title {
    background: #191f25e0;
    border-bottom: 1px solid rgba(41, 174, 203, 0.20);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35), 0 1px 0 rgba(5, 122, 147, 0.12);
}

.manifesto-page .mf-sticky-title.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.manifesto-page .mf-sticky-title-text {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: clamp(14px, 1.5vw, 18px);
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    /* High-contrast dark text in light mode */
    color: #0a0f1e;
}

[data-theme="dark"] .manifesto-page .mf-sticky-title-text {
    color: #e8eeff;
}


/* Accent dot before label */

.manifesto-page .mf-sticky-title-text::before {
    content: '';
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--mf-step-color);
    box-shadow: 0 0 8px var(--mf-step-glow);
    flex-shrink: 0;
}


/* Gradient bottom rule for brand identity */

.manifesto-page .mf-sticky-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #29aecb, transparent);
    border-radius: 2px;
}


/* ============================================================
   MANIFESTO ITEMS SECTION
   ============================================================ */

.manifesto-page .mf-items {
    background: var(--mf-bg-items);
    padding: 0 clamp(20px, 5vw, 80px) clamp(80px, 10vw, 140px);
}

.manifesto-page .mf-items>.container {
    padding-top: clamp(60px, 8vw, 100px);
    padding-right: 0;
    padding-left: 0;
}

.manifesto-page .mf-timeline {
    position: relative;
    max-width: 1280px;
    margin: 0 auto;
}


/* Spine track */

.manifesto-page .mf-spine {
    position: absolute;
    left: 0;
    width: 3px;
    border-radius: 3px;
    overflow: visible;
    top: 0;
    height: 100%;
    transition: top 0.3s ease, height 0.3s ease;
    background: rgba(41, 174, 203, 0.18);
}


/* Spine fill — bright gradient, revealed with clip-path by JS */

.manifesto-page .mf-spine-fill {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: linear-gradient(180deg, rgba(41, 174, 203, 0.55) 0%, #29aecb 100%);
    border-radius: 3px;
    clip-path: inset(0 0 100% 0);
    transition: clip-path 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Ripple ring that fires when a step dot becomes active */

@keyframes mf-dot-ping {
    0%   { transform: scale(1);   opacity: 0.75; }
    100% { transform: scale(3.2); opacity: 0; }
}

.manifesto-page .mf-item.active .mf-dot::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--mf-step-color);
    animation: mf-dot-ping 0.75s cubic-bezier(0.2, 0.8, 0.4, 1) forwards;
    pointer-events: none;
}


/* ============ SINGLE ITEM ============ */

.manifesto-page .mf-item {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: clamp(10px, 4vw, 25px);
    padding: clamp(40px, 6vw, 72px) 0;
    border-bottom: 1px solid var(--mf-border);
    opacity: 0.42;
    transition: opacity 0.55s ease;
}

.manifesto-page .mf-item:last-child {
    border-bottom: none;
}


/* Active step — fully visible */

.manifesto-page .mf-item.active {
    opacity: 1;
}


/* ============ MARKER (dot on timeline) ============ */

.manifesto-page .mf-item-marker {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 22px;
}

.manifesto-page .mf-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--mf-step-color);
    box-shadow: 0 0 0 3px var(--mf-step-glow);
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    left: -12px;
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease;
}

.manifesto-page .mf-item.active .mf-dot {
    transform: scale(1.15);
    box-shadow: 0 0 0 4px var(--mf-step-glow);
    animation: mf-dot-glow 2.2s ease-in-out infinite;
}

@keyframes mf-dot-glow {
    0%, 100% { box-shadow: 0 0 0 4px var(--mf-step-glow); }
    50%       { box-shadow: 0 0 0 7px rgba(41, 174, 203, 0.12), 0 0 14px 4px rgba(41, 174, 203, 0.28); }
}


/* ============ ITEM BODY ============ */

.manifesto-page .mf-item-body {
    padding-bottom: 4px;
}

.manifesto-page .mf-number {
    font-size: clamp(22px, 2.8vw, 40px);
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--mf-step-color);
    margin-bottom: clamp(10px, 1.2vw, 16px);
    font-variant-numeric: tabular-nums;
}

.manifesto-page .mf-item-heading {
    font-size: clamp(22px, 3.5vw, 44px);
    font-weight: 800;
    color: var(--mf-text-primary);
    line-height: 1.4;
    letter-spacing: -0.5px;
    text-transform: uppercase;
    margin: 0 0 clamp(14px, 1.8vw, 22px);
}

.manifesto-page .mf-item-text {
    font-size: clamp(14px, 1.4vw, 17px);
    font-weight: 400;
    line-height: 1.85;
    color: var(--mf-text-muted);
    max-width: 840px;
    margin: 0;
}


/* ============================================================
   ACTIVE NAV LINK
   ============================================================ */

.manifesto-page .nav-links a.active {
    color: var(--mf-accent-bright);
    font-weight: 600;
}


/* ============================================================
   RESPONSIVE — Tablet (max 768px)
   ============================================================ */

@media (max-width:768px) {
.manifesto-page .mf-hero { min-height: 60vh; background-attachment: scroll; padding: 110px 24px 70px; }
.manifesto-page .mf-sticky-title { top: 60px; padding: 16px 0; }
.manifesto-page .mf-item { grid-template-columns: 20px 1fr; gap: 20px; }
.manifesto-page .mf-dot { left: -9px; }
.manifesto-page .mf-item-heading { letter-spacing: 0; }
}


/* ============================================================
   RESPONSIVE — Mobile (max 480px)
   ============================================================ */

@media (max-width:480px) {
.manifesto-page .mf-hero { min-height: 100svh; padding: 100px 20px 60px; }
.manifesto-page .mf-hero-title { letter-spacing: -1px; }
.manifesto-page .mf-items { padding-bottom: 60px; }
.manifesto-page .mf-items > .container { padding-top: 40px; }
.manifesto-page .mf-sticky-title { top: 56px; padding: 12px 0; }
.manifesto-page .mf-item { grid-template-columns: 16px 1fr; gap: 16px; padding: 32px 0; }
.manifesto-page .mf-dot { width: 10px; height: 10px; left: -7px; }
.manifesto-page .mf-item-marker { padding-top: 14px; }
}


/* ============================================================
   OS / BROWSER TARGETED FIXES (via env-detect.js)
   ============================================================ */

html.os-ios .manifesto-page .mf-hero,
html.browser-safari .manifesto-page .mf-hero {
    background-attachment: scroll;
}

html.touch .manifesto-page .mf-item {
    opacity: 1;
}


/* MANIFESTO STYLE END */


/* PRIVACY POLICY STYLE START */

/* ============================================================
   PRIVACY POLICY — privacy-preview.css
   Scoped to .privacy-page
   ============================================================ */

/* ── Variables ── */
.privacy-page {
    --pp-bg:         #ffffff;
    --pp-text:       #0a0d18;
    --pp-muted:      #32415a;
    --pp-subtle:     #1b2027;
    --pp-accent:     #2456e0;
    --pp-border:     #dae0ec;
    --pp-divider:    #ffffff;
    --pp-nav-h:      72px;

    background: var(--pp-bg);
    color: var(--pp-text);
    font-family: "Geist", sans-serif;
}

[data-theme="dark"] .privacy-page{--pp-bg:#030304;--pp-text:#edf1ff;--pp-muted:#8898b8;--pp-subtle:#d3dce9;--pp-accent:#5080ff;--pp-border:rgba(255,255,255,0.10);--pp-divider:rgba(255,255,255,0.06);}


.privacy-page *:not(svg):not(path):not(circle):not(line):not(polyline) {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}


/* ============================================================
   HERO
   ============================================================ */
.privacy-page .pp-hero {
    position: relative;
    min-height: clamp(440px, 24vh, 700px);
    display: flex;
    align-items: flex-end;
    background-image: url('../images/privacy-banner.png');
    background-size: cover;
    background-position: right top 43%;
    /* background-attachment: fixed; */
    overflow: hidden;
    background-color: #020923;
}

/* Strong bottom-weighted gradient so title reads clearly */
.privacy-page .pp-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(87deg, #03438d 0%, rgb(4 7 22 / 41%) 40%, rgb(4 7 22 / 74%) 100%);
    pointer-events: none;
}

[data-theme="dark"] .privacy-page .pp-hero-overlay {
    background: linear-gradient(87deg, rgb(0 0 0) 0%, rgba(4, 7, 22, 0.41) 40%, rgb(0 0 0 / 74%) 100%);
}

.privacy-page .pp-hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 94%;
    margin: 0 auto;
    padding: clamp(120px, 15vw, 161px) clamp(20px, 6vw, 62px) clamp(19px, 10vw, 185px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Badge pill */
.privacy-page .pp-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 14px 5px 10px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 100px;
    background: rgb(0 168 204);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 2.8px;
    text-transform: uppercase;
    color: rgb(255 255 255);
    margin-bottom: 24px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

@keyframes pp-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.25; }
}

.privacy-page .pp-hero-badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgb(255 255 255);
    flex-shrink: 0;
    animation: pp-pulse 2.6s ease-in-out infinite;
}

/* Main title — extra large, heavy weight, pure white */
.privacy-page .pp-hero-title {
    font-size: clamp(26px, 6vw, 60px);
    font-weight: 800;
    color: #ffffff;
    line-height: 1.08;
    letter-spacing: clamp(4px, -0.3vw, 9px);
    margin: 0;
    text-transform: uppercase;
}

/* Thin white rule separating title from date */
.privacy-page .pp-hero-line {
    width: 36px;
    height: 2px;
    background: rgba(255, 255, 255, 0.38);
    border-radius: 1px;
    margin: 28px 0 20px;
    flex-shrink: 0;
}

.privacy-page .pp-hero-date {
    font-size: 11px;
    font-weight: 400;
    color: rgb(255 255 255);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0;
}


/* ============================================================
   MAIN — SIDEBAR + CONTENT GRID
   ============================================================ */
.privacy-page .pp-main {
    background: var(--pp-bg);
}

.privacy-page .pp-inner {
    max-width: 94%;
    margin: 0 auto;
    padding: clamp(56px, 7vw, 100px) clamp(24px, 5vw, 80px);
    display: grid;
    grid-template-columns: 252px 1fr;
    gap: clamp(48px, 6vw, 79px);
    align-items: start;
}


/* ============================================================
   STICKY SIDEBAR TOC
   ============================================================ */
.privacy-page .pp-sidebar {
    position: sticky;
    top: calc(var(--pp-nav-h) + 32px);
    max-height: calc(100vh - var(--pp-nav-h) - 64px);
    overflow-y: auto;
    scrollbar-width: none;
}



/* "Contents" label */
.privacy-page .pp-toc-label {
    font-size: 14px;
    font-weight: 700;
    /* letter-spacing: 3px; */
    text-transform: uppercase;
    color: var(--pp-subtle);
    margin: 0 0 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--pp-border);
    display: block;
}

/* Toggle button wrapping the label — full TOC header row.
   Inert/label-like on desktop; becomes a collapse control on mobile (see media query). */
.privacy-page .pp-toc-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    border-bottom: 1px solid var(--pp-border);
    padding: 14px 18px 14px;
    font: inherit;
    color: inherit;
    cursor: default;
    text-align: left;
}

.privacy-page .pp-toc-toggle .pp-toc-label {
    margin: 0;
    padding: 0;
    border: none;
}

.privacy-page .pp-toc-chevron {
    display: none;
    width: 16px;
    height: 16px;
    color: var(--pp-subtle);
    flex-shrink: 0;
    transition: transform 0.25s ease;
}

/* TOC list */
.privacy-page .pp-toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: toc-c;
}

/* Left-border track: grey default, blue when active */
.privacy-page .pp-toc-list li {
    counter-increment: toc-c;
    border-left: 2px solid var(--pp-border);
    transition: border-color 0.22s ease;
}

.privacy-page .pp-toc-list li.toc-active {
    border-left-color: #00a8cc;
}

/* Link row */
.privacy-page .pp-toc-list li a {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 12px 0 12px 14px;
    text-decoration: none;
    color: var(--pp-subtle);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    transition: color 0.2s ease;
    border: 1px solid var(--pp-divider);
    border-width: 1px 0px;
}

/* Auto-numbered prefix */
.privacy-page .pp-toc-list li a::before {
    content: counter(toc-c, decimal-leading-zero);
    font-size: 14px;
    font-weight: 600;
    color: var(--pp-subtle);
    flex-shrink: 0;
    min-width: 20px;
    transition: color 0.2s ease;
}

.privacy-page .pp-toc-list li a:hover {
    color: #39aac2;
    background-color: #f7f8f8;
}

[data-theme="dark"] .privacy-page .pp-toc-list li a:hover {
    background-color: rgba(0, 168, 204, 0.07);
}

.privacy-page .pp-toc-list li a:hover::before {
    color: #39aac2;
}

/* Active: blue text + number */
.privacy-page .pp-toc-list li.toc-active a {
    color: #00a8cc;
    font-weight: 500;
    background: #e1faff;
}

[data-theme="dark"] .privacy-page .pp-toc-list li.toc-active a {
    background: rgba(0, 168, 204, 0.12);
}

.privacy-page .pp-toc-list li.toc-active a::before {
    color: #00a8cc;
}


/* ============================================================
   INTRO PARAGRAPH
   ============================================================ */
.privacy-page .pp-intro {
    padding-bottom: clamp(32px, 4vw, 48px);
    border-bottom: 1px solid var(--pp-divider);
    margin-bottom: clamp(36px, 5vw, 52px);
}

.privacy-page .pp-intro p {
    font-size: clamp(14px, 1.35vw, 16px);
    line-height: 1.92;
    color: var(--pp-muted);
    margin: 0 0 1em;
}
nav#ppToc {
    overflow-x: hidden;
    overflow-y: auto;
    max-height: calc(100vh - 161px);
}

.privacy-page .pp-intro p:last-child { margin-bottom: 0; }

.privacy-page .pp-intro a {
    color: var(--pp-text);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.2s ease;
}

.privacy-page .pp-intro a:hover { color: var(--pp-accent); }

.privacy-page .pp-intro strong {
    color: var(--pp-text);
    font-weight: 600;
}


/* ============================================================
   POLICY SECTIONS
   ============================================================ */
.privacy-page .pp-sections {
    display: flex;
    flex-direction: column;
}

.privacy-page .pp-section {
    padding: clamp(36px, 4.5vw, 72px) 0;
    border-bottom: 1px solid var(--pp-divider);
    scroll-margin-top: calc(var(--pp-nav-h) + 28px);
}

.privacy-page .pp-section:last-child {
    border-bottom: none;
    margin-bottom: 60px;
}

/* Section number — tiny blue label */
.privacy-page .pp-section-num {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 2.5px;
    color: #00a8cc;
    text-transform: uppercase;
    margin-bottom: 10px;
    opacity: 0.8;
}

/* Section heading — dark, heavy, prominent */
.privacy-page .pp-section-heading {
    font-size: clamp(14px, 1.5vw, 18px);
    font-weight: 700;
    color: var(--pp-text);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.25;
    margin: 0 0 clamp(14px, 1.8vw, 20px);
}

/* Body text — darker muted for readability */
.privacy-page .pp-section-body p {
    font-size: clamp(13px, 1.25vw, 15px);
    line-height: 1.92;
    color: var(--pp-muted);
    margin: 0 0 1em;
}

.privacy-page .pp-section-body p:last-child { margin-bottom: 0; }

.privacy-page .pp-section-body a {
    color: var(--pp-text);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.2s ease;
}

.privacy-page .pp-section-body a:hover { color: var(--pp-accent); }

.privacy-page .pp-section-body strong {
    color: var(--pp-text);
    font-weight: 600;
}

/* Bullet lists */
.privacy-page .pp-list {
    list-style: none;
    padding: 0;
    margin: clamp(10px, 1.2vw, 14px) 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.privacy-page .pp-list li {
    font-size: clamp(13px, 1.25vw, 15px);
    line-height: 1.88;
    color: var(--pp-muted);
    padding-left: 20px;
    position: relative;
}

.privacy-page .pp-list li::before {
    content: '—';
    position: absolute;
    left: 0;
    color: var(--pp-subtle);
    font-weight: 300;
}

.privacy-page .pp-list strong {
    color: var(--pp-text);
    font-weight: 600;
}


/* ============================================================
   RESPONSIVE — Tablet ≤960px
   ============================================================ */
@media (max-width: 960px) {
    .privacy-page .pp-inner {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 0;
    }

    .privacy-page .pp-sidebar {
        position: relative;
        top: 0px;
        max-height: none;
        overflow: visible;
        z-index: 40;
        isolation: isolate;
        /* Full-bleed: break out of .pp-inner's gutter so the sticky bar spans the viewport edge-to-edge */
        width: 100vw;
        margin-left: calc(50% - 50vw);
        padding-left: 0;
        padding-right: 0;
        box-sizing: border-box;
    }
    .privacy-page .pp-sidebar::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;

  box-shadow: inset 0 0 0px -50px rgba(0, 0, 0, 0.7);
  background-color: rgba(255, 255, 255, 0);
  pointer-events: none;
}
.privacy-page .pp-sidebar::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  isolation: isolate;
  pointer-events: none;
}
    /* Collapse control becomes interactive */
    .privacy-page .pp-toc-toggle {
        cursor: pointer;
    }

    .privacy-page .pp-toc-chevron {
        display: block;
    }

    .privacy-page .pp-toc.pp-toc-collapsed .pp-toc-chevron {
        transform: rotate(-90deg);
    }
    .privacy-page .pp-toc{
        border: 1px solid var(--pp-border);
        padding-left: clamp(24px, 5vw, 80px);
        padding-right: clamp(24px, 5vw, 80px);
    }

    .privacy-page .pp-toc-toggle .pp-toc-label{
        color: var(--pp-subtle);
    }
    /* Collapsible TOC list */
    .privacy-page .pp-toc-list {
        overflow: hidden;
        max-height: 1400px;
        padding: 0 10px;
        opacity: 1;
        transition: max-height 0.35s ease, opacity 0.25s ease;
    }


    .privacy-page .pp-toc.pp-toc-collapsed .pp-toc-list {
        max-height: 0;
        opacity: 0;
        pointer-events: none;
    }

    /* Used briefly by JS to collapse the TOC instantly (no animation) right before
       a TOC-link scroll, so the scroll lands using final, settled geometry. */
    .privacy-page .pp-toc.pp-toc-no-transition,
    .privacy-page .pp-toc.pp-toc-no-transition .pp-toc-list {
        transition: none !important;
    }

    /* Account for the sticky collapsed TOC bar sitting below the nav so a
       TOC-link jump doesn't land the section heading underneath it. */
    .privacy-page .pp-section {
        scroll-margin-top: calc(70px + 28px + var(--pp-toc-offset, 56px));
    }

    /* Two-column grid TOC on tablet */
   .privacy-page .pp-toc-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(8, auto);
        grid-auto-flow: column;
        gap: 0;
    }

    .privacy-page .pp-toc-list li {
        border-left: none;
    }


    .privacy-page .pp-toc-list li a {
        padding: 9px;
        color : var(--pp-subtle);
        font-size: clamp(13px, 1.25vw, 15px);
        border: none;

    }
      .privacy-page .pp-toc {
        max-height: max-content !important;
      }
}

/* ============================================================
   RESPONSIVE — Mobile ≤640px
   ============================================================ */
@media (max-width: 640px) {
    .privacy-page .pp-hero {
        min-height: auto;
        background-attachment: scroll;
            background-position: right 13% top 17%;
    }

    .privacy-page .pp-inner {
        padding: 0 7px;
        gap: 32px;
    }

    .privacy-page .pp-toc {
        padding-left: 0px;
        padding-right: 0px;
    }

    .privacy-page .pp-toc-list {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        grid-auto-flow: row;
    }
  
    .privacy-page .pp-section {
        padding: 32px 0;
    }
}

/* ============================================================
   NOTICE / CALLOUT BOX
   ============================================================ */
.privacy-page .pp-notice {
    border: 1px solid var(--pp-border);
    border-left: 3px solid var(--pp-muted);
    background: var(--pp-divider);
    border-radius: 8px;
    padding: 18px 22px;
    margin: 20px 0 0;
}

.privacy-page .pp-notice p {
    font-size: clamp(13px, 1.25vw, 15px);
    line-height: 1.8;
    color: var(--pp-muted);
    margin: 0;
}

.privacy-page .pp-notice strong {
    color: var(--pp-text);
}

[data-theme="dark"] .privacy-page .pp-notice {
    background: rgba(80, 128, 255, 0.06);
    border-color: var(--pp-border);
    border-left-color: var(--pp-accent);
}

/* ── iOS / Safari parallax fix ── */
html.os-ios .privacy-page .pp-hero,
html.browser-safari .privacy-page .pp-hero {
    background-attachment: scroll;
}
.pp-toc {
    scrollbar-width: thin;
}
[data-theme="dark"] .pp-toc {
    scrollbar-color: #8D9098 transparent; /* thumb track */
    scrollbar-width: thin;
}

/* Scrollbar */

/* PRIVACY POLICY STYLE END */


.grecaptcha-badge { visibility: hidden; }
p.recaptcha-terms { font-size: 12px; padding-top: 15px; text-align: center; color: rgba(3, 3, 3, 0.61); }
form#ctaEmailForm .recaptcha-notice { text-align: left; font-size: 12px; color: rgb(255 255 255 / 28%); text-align: left; margin-top: 0px; padding-left: 16px; }
#ctaEmailForm .btn-inverse { padding: 13px 30px; height: fit-content; }
form#ctaEmailForm .email-input-group { display: flex; flex-direction: column; min-width: 285px; gap: 8px; }
[data-theme="dark"] p.recaptcha-terms { color: rgb(255 255 255 / 28%); }

[data-theme="dark"] .field-group input.error,
.field-group textarea.error { border-color: var(--red); box-shadow: 0 0 0 3px rgba(232, 0, 26, 0.10); }
.message-counter { font-size: 12px; color: #646464; }
.submitting { position: relative; pointer-events: none; cursor: not-allowed; opacity: 0.6; color: transparent; user-select: none; }
.submitting::after { content: ""; position: absolute; width: 18px; height: 18px; top: 50%; left: 50%; margin: -9px 0 0 -9px; border: 2px solid rgba(255, 255, 255, 0.4); border-top-color: #fff; border-radius: 50%; animation: submitting-loader 0.7s linear infinite; }
@keyframes submitting-loader {
to { transform: rotate(360deg); }
}
/* Chrome, Edge, Safari */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
/* Firefox */
input[type="number"]{-moz-appearance:textfield;appearance:textfield;}
.popup-head{min-height:65px;display:flex;align-items:center;padding:17px 33px;border-bottom:1px solid var(--border);}
.popup-head .eyebrow{margin-bottom:0px;}
@media (max-width:768px){
.popup-head{padding:17px 20px;}
.email-message-container{font-size:12px;}
.privacy-page .pp-hero-line{margin:5px 0 8px;}
.privacy-page .pp-hero-content{max-width:100%;}
}
@media (max-width:1380px){
.nav-links a{font-size:0.855rem;}
.nav-links .nav-cta{font-size:0.855rem;}
.nav-inner .btn-primary{font-size:0.755rem;}
}
@media (max-width:1280px){
.nav-inner{max-width:100%;}
.privacy-page .pp-hero-content{max-width:100%;}
}
@media (max-width:1240px){
.privacy-page .pp-hero-content{padding:clamp(120px,15vw,161px) clamp(20px,2vw,62px) clamp(19px,10vw,185px);}
}



.error-notification { position: relative; min-width: 100%; max-width: 100%; top: 0; box-shadow: none; display: none; opacity: 0; background: #fef2f2; border-color: #fca5a5; color: #991b1b; z-index: 2000; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 12px; font-family: var(--font); font-size: 0.875rem; font-weight: 500; line-height: 1.4; border: 1.5px solid; opacity: 0; transition: opacity 0.32s ease, transform 0.32s ease; margin-bottom: 20px; }
.error-notification.show { display: flex; opacity: 1; visibility: visible; }
#ctaEmailForm .error-notification { justify-content: space-between; }
#ctaEmailForm .error-notification .subscription-error-wrapper { display: flex; align-items: center; gap: 12px; }
[data-theme="dark"] .error-notification { background: #450a0a; border-color: #991b1b; color: #fca5a5; }

/* ============================================================
   Nav header override — matches the header used on preview-video-v2
   (assets/css/main-style-v2.css): dual light/dark logo swap on
   scroll, white-on-scroll nav background, Geist font.
   ============================================================ */

.nav {
    font-family: "Geist", sans-serif;
    background: #000000;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.63) 0%, rgba(0, 0, 0, 0.33) 50%, rgba(237, 221, 83, 0) 100%);
}

.nav::before {
    content: "";
    position: absolute;
    inset: 0;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
    background: #fff;
    box-shadow: 0 1px 10px rgba(0, 0, 0, .08);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    opacity: 0;
    transition: opacity .3s ease;
    z-index: -1;
}

.nav.scrolled::before {
    opacity: 1;
}

.logo {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.logo img {
    height: 36px;
    width: auto;
    transition: opacity .3s ease;
}

.logo-dark {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
}

.logo-white {
    opacity: 1;
}

.nav.scrolled .logo-white {
    opacity: 0;
}

.nav.scrolled .logo-dark {
    opacity: 1;
}

@media (min-width:1291px) {
.nav-links a {
    color: rgba(255, 255, 255, 0.98);
    font-size: 1.1rem;
    font-weight: 400;
    letter-spacing: 0.4px;
}

.nav-inner a.btn-primary {
    font-size: 1rem;
    letter-spacing: 0.4px;
    font-weight: 300;
}
}

.nav-links a:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.30);
}

.nav-links a.active {
    color: #fff;
}

.nav.scrolled .nav-links a {
    color: #111;
}

.nav.scrolled .nav-links a:hover {
    color: #111;
    background: rgba(0, 0, 0, .06);
}

.nav-pill {
    top: auto;
    bottom: 0;
    height: 3px;
    border-radius: 999px;
    background: #00a8cc;
}

.nav-backdrop {
    top: 60px;
}

@media (max-width: 1290px) {
    .nav-inner {
        height: 60px;
    }

    .nav-links {
        top: 60px;
        height: calc(100dvh - 61px);
    }

    .nav-links .nav-cta:hover {
        background: #243437a6;
        box-shadow: none;
    }

    /* Off-canvas panel: white/black when open, matching the home page
       (index.html / main-style-v2.css) instead of the old always-dark
       translucent panel. */
    .nav-open .nav::before {
        opacity: 1;
        background: white !important;
    }

    .nav-open .nav-inner .logo-white {
        opacity: 0;
    }

    .nav-open .nav-inner .logo-dark {
        opacity: 1;
    }

    .nav-links.open {
        background: #ffffff;
        box-shadow: none;
        border: none;
    }

    .nav-links a {
        border-bottom: 1px dashed rgb(0 0 0 / 17%);
        color: #000000;
    }

    .nav-links a:hover {
        background: rgba(0, 0, 0, 0.06);
        color: #000000;
    }

    .nav-links a:first-child {
        border-top: none;
    }

    .nav-links .nav-cta {
        background: #D9F8FD;
        color: #000000;
    }

    [data-theme="dark"] .nav-open .nav::before {
        background: #000000 !important;
    }

    [data-theme="dark"] .nav-open .nav-inner .logo-white {
        opacity: 1;
    }

    [data-theme="dark"] .nav-open .nav-inner .logo-dark {
        opacity: 0;
    }

    [data-theme="dark"] .nav-links.open {
        background: #000000;
        box-shadow: none;
        border: none;
    }

    [data-theme="dark"] .nav-links a {
        border-bottom: 1px dashed rgb(255 255 255 / 17%);
        color: #ffffff;
    }

    [data-theme="dark"] .nav-links a:hover {
        background: rgba(255, 255, 255, 0.06);
        color: #ffffff;
    }

    [data-theme="dark"] .nav-links a:first-child {
        border-top: none;
    }

    [data-theme="dark"] .nav-links .nav-cta {
        background: #0c2126;
        color: #ffffff;
    }
}

@media (max-width: 720px) {
    .logo img {
        height: 26px;
    }

    .nav-inner {
        height: 60px;
    }
}

/* Dark theme — scrolled nav keeps the white logo/text instead of
   switching to the dark variant, since the scrolled background
   itself is dark in this theme (all-styles.css already darkens
   .nav::before and .nav-backdrop for [data-theme="dark"]). */
[data-theme="dark"] .nav.scrolled .logo-white {
    opacity: 1;
}

[data-theme="dark"] .nav.scrolled .logo-dark {
    opacity: 0;
}

[data-theme="dark"] .nav.scrolled .nav-links a {
    color: rgba(255, 255, 255, 0.85);
}

[data-theme="dark"] .nav.scrolled .nav-links a:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.10);
}


@media (max-width:1480px){
.nav-links a{font-size:0.855rem;}
.nav-links .nav-cta{font-size:0.855rem;}
.nav-inner .btn-primary{font-size:0.755rem;}
}