/* OffQen design layer: modern 3D look + responsive rules. Loads after style.css. */
:root {
  --bg: #050816; --bg-2: #0a1128; --bg-3: #0e1733; --bg-4: #14203a;
  --surface: rgba(255,255,255,.045); --surface-2: rgba(255,255,255,.07); --surface-3: rgba(255,255,255,.10);
  --border: rgba(255,255,255,.09); --border-strong: rgba(255,255,255,.18);
  --text: #f4f7ff; --text-dim: #aab6d3; --text-faint: #7d8aab; --text-soft: #d3dbef;
  --accent: #19e3a5; --cyan: #38d8ff; --violet: #9b8cff;
  --radius: 22px;
  --depth: 0 1px 0 rgba(255,255,255,.12) inset, 0 -1px 0 rgba(0,0,0,.35) inset, 0 18px 40px -12px rgba(0,0,0,.6), 0 40px 80px -30px rgba(25,227,165,.18);
  --nav-h: 64px;
}
html { color-scheme: dark; }
body {
  background:
    radial-gradient(1200px 700px at 12% -10%, rgba(25,227,165,.16), transparent 60%),
    radial-gradient(1000px 700px at 100% 8%, rgba(56,216,255,.14), transparent 60%),
    radial-gradient(900px 700px at 50% 110%, rgba(155,140,255,.14), transparent 60%),
    var(--bg) !important;
  background-attachment: fixed;
  color: var(--text);
  overflow-x: hidden;
}
.container { width: min(1180px, 100% - 40px); margin-inline: auto; padding-inline: 0; }
img, video, canvas, svg, iframe { max-width: 100%; }
.theme-toggle { display: none !important; }

/* Floating glass nav */
.nav {
  inset: 10px 12px auto 12px; height: var(--nav-h); border-radius: 20px;
  border: 1px solid var(--border-strong); background: rgba(10,17,40,.55) !important;
  backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%);
  box-shadow: var(--depth);
}
.nav-inner { padding-inline: 18px; }
.nav-links { gap: 20px; }
.nav-links > a:not(.btn) { color: var(--text-dim); white-space: nowrap; }
.nav-links > a:not(.btn):hover, .nav-links > a.active { color: var(--text); }
@media (max-width: 1180px) { .nav-links .nav-optional, .nav-links .nav-builds { display: none; } }
@media (max-width: 960px) {
  .nav-burger { display: flex !important; }
  .nav-links {
    position: absolute; top: calc(var(--nav-h) + 8px); left: 0; right: 0;
    display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; gap: 4px; padding: 12px;
    border-radius: 20px; background: rgba(8,13,32,.94); border: 1px solid var(--border-strong);
    backdrop-filter: blur(22px); box-shadow: var(--depth);
    max-height: none; overflow: visible;
    opacity: 0; transform: translateY(-8px) scale(.98); pointer-events: none; visibility: hidden;
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
  }
  .nav-links.open { opacity: 1; transform: none; pointer-events: auto; visibility: visible; }
  .nav-links .nav-optional, .nav-links .nav-builds { display: block; }
  .nav-links > a:not(.btn) { padding: 9px 12px; border-radius: 10px; font-size: .9rem; white-space: normal; line-height: 1.25; }
  .nav-links > a:not(.btn):hover { background: var(--surface-2); }
  .nav-links > a:not(.btn)::after { display: none; }
  .nav-links .nav-cta { grid-column: 1 / -1; text-align: center; margin: 6px 0 0; }
  .nav-links .nav-optional, .nav-links .nav-builds { opacity: 1; }
}

/* Type */
h1, h2, h3 { font-family: var(--font-head); letter-spacing: -.03em; }
.hero-title { font-size: clamp(2.3rem, 7vw, 5rem); line-height: 1.02; }
.section-title { font-size: clamp(1.7rem, 4.4vw, 3rem); }
.gradient-text { background: linear-gradient(100deg, var(--accent), var(--cyan) 55%, var(--violet)); -webkit-background-clip: text; background-clip: text; color: transparent; }
section, .section { scroll-margin-top: 90px; }
.hero { padding-top: calc(var(--nav-h) + 56px); }

/* 3D surfaces */
.card, .asset-card, .asset-block, .nepal-feature-card, .stat, .tl-card, .cta-card, .qa-item, .sim-stage, .trans-state, .faq-item, .terminal {
  position: relative; border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(255,255,255,.085), rgba(255,255,255,.025)) !important;
  border: 1px solid var(--border-strong) !important;
  box-shadow: var(--depth);
  backdrop-filter: blur(10px);
  transform-style: preserve-3d;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease;
}
.card::before, .asset-card::before, .nepal-feature-card::before, .stat::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(56,216,255,.16), transparent 45%);
  opacity: 0; transition: opacity .3s;
}
.card:hover::before, .asset-card:hover::before, .nepal-feature-card:hover::before, .stat:hover::before { opacity: 1; }
.card:hover, .asset-card:hover, .nepal-feature-card:hover { border-color: rgba(56,216,255,.45) !important; box-shadow: var(--depth), 0 0 0 1px rgba(56,216,255,.15); }
.card-icon { transform: translateZ(40px); box-shadow: 0 10px 24px -6px rgba(25,227,165,.5); }
.tilt { will-change: transform; }

/* 3D buttons */
.btn { border-radius: 14px; transition: transform .2s ease, box-shadow .2s ease; }
.btn-primary {
  background: linear-gradient(180deg, #2cf0b4, #0fb98a) !important; color: #03251b !important; border: 0;
  box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 6px 0 #0a7d5e, 0 14px 28px -6px rgba(25,227,165,.55);
}
.btn-primary:hover { transform: translateY(-2px); }
.btn-primary:active { transform: translateY(4px); box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 2px 0 #0a7d5e, 0 6px 12px -4px rgba(25,227,165,.5); }
.btn-ghost { background: var(--surface-2) !important; border: 1px solid var(--border-strong) !important; color: var(--text) !important; box-shadow: var(--depth); }
.btn-ghost:hover { transform: translateY(-2px); }

/* Hero 3D stage */
.hero-visual { perspective: 1200px; }
.hero-visual > * { transform: rotateX(8deg) rotateY(-10deg); transform-style: preserve-3d; filter: drop-shadow(0 40px 50px rgba(0,0,0,.55)); transition: transform .5s ease; }
.hero-visual:hover > * { transform: rotateX(2deg) rotateY(-3deg); }
.hero-glow-1, .hero-glow-2 { filter: blur(90px); animation: oq-float 14s ease-in-out infinite alternate; }
.hero-glow-2 { animation-delay: -6s; }
@keyframes oq-float { to { transform: translate3d(40px, -30px, 0) scale(1.15); } }
.pill, .badge, .chip { backdrop-filter: blur(8px); }

/* Reveal gets depth */
.reveal { transform: translateY(32px) scale(.98); }
.reveal.in-view { transform: none; }

/* Responsive */
@media (max-width: 960px) {
  .stats-strip { grid-template-columns: repeat(2, 1fr); }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .container { width: calc(100% - 32px); }
  .grid, .nepal-feature-grid, .asset-grid { grid-template-columns: 1fr !important; gap: 16px; }
  .stats-strip { gap: 14px; }
  .footer-inner { grid-template-columns: 1fr; }
  .trans-step-row { grid-template-columns: 1fr; gap: 10px; }
  .hero-cta, .cta-row, .asset-actions { flex-wrap: wrap; }
  .hero-cta .btn, .cta-row .btn { flex: 1 1 100%; justify-content: center; }
  .hero-visual > * { transform: none; }
  .hero-visual { margin-top: 28px; }
  pre, .stp-json, .stp-log, .terminal { overflow-x: auto; }
  table { display: block; overflow-x: auto; }
}
@media (hover: none) { .card:hover, .asset-card:hover, .nepal-feature-card:hover { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .hero-visual > * { transform: none; }
  .tilt { transform: none !important; }
}

/* Fixes after first visual pass */
html, body { overflow-x: clip; max-width: 100%; }
.hero { overflow: hidden; }
.nav-cta, .nav-links .btn { white-space: nowrap; }
.nav-links { gap: 16px; }
@media (max-width: 1300px) { .nav-links .nav-builds { display: none; } }
@media (max-width: 1180px) { .nav-links { gap: 14px; } }
.hero-visual {
  height: clamp(260px, 46vw, 460px); max-width: none; margin: 32px 0 0;
  border-radius: 28px; overflow: hidden;
  background: radial-gradient(60% 60% at 50% 40%, rgba(56,216,255,.14), transparent 70%), linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border: 1px solid var(--border-strong); box-shadow: var(--depth);
}
.hero-visual > canvas { display: block; }
@media (min-width: 1000px) {
  .hero-inner { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
  .hero-visual { margin: 0; height: 480px; }
}
.asset-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); }
.nepal-feature-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.pdf-frame, .video-frame, .asset-block-body, .asset-card, .asset-block { min-width: 0; max-width: 100%; }
.asset-block-head { flex-wrap: wrap; gap: 12px; }
.hero-bg, [class$="-hero"], .section, section { overflow-x: clip; }
.hero-glow { max-width: 100vw; }
.btn svg, .asset-actions svg, .card-icon svg { width: 18px; height: 18px; flex: none; }
.card-icon svg { width: 26px; height: 26px; }
.asset-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.asset-actions .btn { white-space: nowrap; }
.chip, .assets-hero a { color: var(--text); }
.chip { background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 999px; padding: 6px 14px; display: inline-block; }
.video-frame { height: auto !important; min-height: 0 !important; aspect-ratio: auto !important; padding: 18px 20px; border-radius: var(--radius); }
.video-fallback { margin: 0; color: var(--text-soft); }
.video-fallback a { color: var(--cyan); text-decoration: underline; }
.assets-hero a:not(.chip), .qa-back { background: none !important; color: var(--text-soft) !important; }
.qa-back { display: inline-block; margin-bottom: 14px; }
@media (max-width: 640px) {
  .assets-hero, .qa-hero { padding-top: calc(var(--nav-h) + 48px) !important; padding-bottom: 28px !important; }
  .asset-grid { margin-top: 20px; }
}
html, body { overflow-x: hidden; }
.hero-glow, .hero-glow-1, .hero-glow-2 { max-width: 60vw; max-height: 60vw; }
.assets-hero, .qa-hero, .hero { position: relative; overflow: hidden; }
[hidden] { display: none !important; }
.card-icon { transform: none !important; box-shadow: none !important; background: none !important; width: auto; height: auto; }
.pill, .badge, .chip { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.qa-back { display: block !important; width: fit-content; position: relative; z-index: 3; margin-bottom: 14px; }
.qa-empty { display: none; }
.qa-empty.show { display: block; }
.qa-item.hidden, .qa-group.hidden { display: none !important; }

/* Audit fixes: content remains readable if motion or scripts are unavailable. */
.reveal { opacity: 1; transform: none; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }
/* Nav must never scroll: menu is sized to fit. */
.nav-links { max-height: none; overflow: visible; }
.anchor-target { scroll-margin-top: 100px; }
.simulator, .sim-controls > *, .sim-stage { min-width: 0; }
.sim-controls { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
#simTo { width: 100%; min-width: 0; padding: 13px 14px; color: var(--text); background: var(--bg); border: 1px solid var(--border-strong); border-radius: 10px; cursor: text; }
.stage-head { flex-wrap: wrap; gap: 14px; }
.phase-tracker { width: 100%; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.phase { justify-content: center; white-space: normal; }
.sim-hint { overflow-wrap: anywhere; }
button:disabled { opacity: .45; cursor: not-allowed; transform: none !important; box-shadow: none; }
@media (max-width: 640px) {
  .simulator { padding: 20px; }
  .sim-stage { padding: 14px; }
  .phase-tracker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .phase { font-size: .68rem; gap: 5px; padding: 8px 5px; }
  .asset-block { padding: 22px; }
  .section { padding-block: 64px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.nav { z-index: 1000; }
.nav-links { transform-style: flat; }
.btn-reset { background: var(--surface-2); color: var(--text); border: 1px solid var(--border-strong); }
.sim-demo-note { margin-top: 12px; }
@media (max-width: 960px) { .nav-links.open { background: #081020 !important; } }

.pdf-frame { display: block; width: 100%; height: 680px; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--bg-3); }
@media (max-width: 960px) { .nav-links .nav-builds { display: block; } }

/* Landscape phones and short windows: three compact columns, still no scrolling. */
@media (max-width: 960px) and (max-height: 520px) {
  .nav-links { grid-template-columns: repeat(3, 1fr); padding: 10px; gap: 3px; }
  .nav-links > a:not(.btn) { padding: 7px 9px; font-size: .78rem; }
  .nav-links .nav-cta { padding-block: 8px; margin-top: 4px; }
}

/* Skip link must sit fully above the viewport until focused. */
.skip-link { top: -80px; }
.skip-link:focus { top: 10px; }