/* ═══════════════════════════════════════════════════════════════
   SILKSTACK — futuristic one-pager (light theme)
   Theme: arctic white + neon cyan/violet/magenta accents
   ═══════════════════════════════════════════════════════════════ */

/* ---------- Tokens ---------- */
:root {
  --bg: #eef2f9;
  --bg-2: #e6ecf7;
  --panel: rgba(255, 255, 255, 0.72);
  --panel-solid: #ffffff;
  --stroke: rgba(15, 48, 96, 0.12);
  --stroke-bright: rgba(2, 132, 199, 0.45);

  --cyan: #00a3e0;
  --cyan-soft: #0891b2;
  --violet: #7c3aed;
  --violet-soft: #6d28d9;
  --magenta: #db2777;
  --lime: #3f6212;

  --text: #0b1b33;
  --text-dim: #3d4f6e;
  --text-faint: #64748b;

  --grad-main: linear-gradient(100deg, #0284c7 0%, #7c3aed 55%, #db2777 100%);
  --grad-soft: linear-gradient(120deg, rgba(2, 132, 199, 0.1), rgba(124, 58, 237, 0.1));

  --font-display: "Orbitron", "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;

  --radius: 18px;
  --glow-cyan: 0 0 24px rgba(2, 132, 199, 0.22);
  --glow-violet: 0 0 24px rgba(124, 58, 237, 0.22);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Base ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

::selection { background: rgba(2, 132, 199, 0.22); color: var(--text); }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--cyan), var(--violet));
  border-radius: 8px;
  border: 2px solid var(--bg);
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; }

:focus-visible {
  outline: 2px solid var(--cyan-soft);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- Ambient layers ---------- */
.bg-orbs { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.orb { position: absolute; border-radius: 50%; filter: blur(110px); opacity: 0.22; }
.orb-a {
  width: 55vw; height: 55vw; top: -18vw; left: -14vw;
  background: radial-gradient(circle, #7dd3fc, transparent 65%);
  animation: drift-a 26s ease-in-out infinite alternate;
}
.orb-b {
  width: 48vw; height: 48vw; top: 22vh; right: -16vw;
  background: radial-gradient(circle, #c4b5fd, transparent 65%);
  animation: drift-b 32s ease-in-out infinite alternate;
}
.orb-c {
  width: 42vw; height: 42vw; bottom: -16vw; left: 22vw;
  background: radial-gradient(circle, #f9a8d4, transparent 65%);
  animation: drift-a 38s ease-in-out infinite alternate-reverse;
}
@keyframes drift-a { to { transform: translate(9vw, 7vh) scale(1.15); } }
@keyframes drift-b { to { transform: translate(-8vw, -6vh) scale(1.1); } }

.scanlines {
  position: fixed; inset: 0; z-index: 60;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    rgba(11, 27, 51, 0.02) 0px,
    rgba(11, 27, 51, 0.02) 1px,
    transparent 1px,
    transparent 4px
  );
}

.cursor-glow {
  position: fixed; top: 0; left: 0; z-index: 55;
  width: 420px; height: 420px;
  margin: -210px 0 0 -210px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(2, 132, 199, 0.035) 0%, rgba(124, 58, 237, 0.025) 40%, transparent 70%);
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}
@media (pointer: coarse) { .cursor-glow { display: none; } }

.progress {
  position: fixed; top: 0; left: 0; z-index: 90;
  height: 3px; width: 0%;
  background: var(--grad-main);
  box-shadow: 0 0 12px rgba(2, 132, 199, 0.6);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 600; font-size: 15px; letter-spacing: 0.04em;
  cursor: pointer; border: none;
  /* a squeezed button must not break "Purchase license" onto two lines */
  white-space: nowrap;
  transition: transform var(--ease) 0.25s, box-shadow var(--ease) 0.25s, background var(--ease) 0.25s, color var(--ease) 0.25s;
  will-change: transform;
}
.btn-sm { padding: 9px 18px; font-size: 13.5px; }
.btn-lg { padding: 16px 34px; font-size: 16px; }
.btn-block { width: 100%; }

.btn-primary {
  background: var(--grad-main);
  background-size: 160% 160%;
  color: #ffffff;
  box-shadow: 0 0 0 1px rgba(2, 132, 199, 0.3), 0 8px 28px rgba(2, 132, 199, 0.28);
}
.btn-primary:hover {
  background-position: 100% 0;
  box-shadow: 0 0 0 1px rgba(2, 132, 199, 0.5), 0 10px 40px rgba(124, 58, 237, 0.35);
}

.btn-ghost {
  background: rgba(255, 255, 255, 0.55);
  color: var(--text-dim);
  border: 1px solid var(--stroke);
}
.btn-ghost:hover { color: var(--text); border-color: var(--stroke-bright); box-shadow: var(--glow-cyan); }

.btn-glass {
  background: rgba(255, 255, 255, 0.6);
  color: var(--text);
  border: 1px solid var(--stroke);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.btn-glass:hover { border-color: var(--stroke-bright); box-shadow: var(--glow-violet); }

.btn-arrow { transition: transform 0.3s var(--ease); }
.btn:hover .btn-arrow { transform: translateX(5px); }
.play-ico { color: var(--cyan-soft); }

/* ---------- Nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 80;
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease), backdrop-filter 0.4s;
}
.nav.scrolled {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--stroke);
}
.nav-inner {
  max-width: 1240px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 28px;
  /* space-between collapses to nothing when the row is tight, which butted
     the brand against the first link; a column-gap is a floor it can't pass */
  column-gap: 18px;
}
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand-mark { width: 30px; height: 30px; border-radius: 8px; filter: drop-shadow(0 0 8px rgba(2, 132, 199, 0.45)); }
.brand-name {
  font-family: var(--font-display); font-weight: 800; font-size: 16.5px;
  letter-spacing: 0.22em;
}
.brand-accent { background: var(--grad-main); -webkit-background-clip: text; background-clip: text; color: transparent; }

.nav-links { display: flex; gap: 34px; }
.nav-link {
  font-size: 14.5px; font-weight: 500; color: var(--text-dim);
  letter-spacing: 0.08em; text-transform: uppercase;
  position: relative; padding: 4px 0;
  transition: color 0.3s;
}
.nav-link::after {
  content: ""; position: absolute; left: 0; bottom: -2px;
  width: 0%; height: 2px;
  background: var(--grad-main);
  box-shadow: 0 0 8px rgba(2, 132, 199, 0.5);
  transition: width 0.35s var(--ease);
}
.nav-link:hover, .nav-link.active { color: var(--text); }
.nav-link:hover::after, .nav-link.active::after { width: 100%; }

.nav-cta { display: flex; gap: 12px; }

.hamburger {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer; padding: 8px;
}
.hamburger span {
  width: 24px; height: 2px; background: var(--text);
  border-radius: 2px; transition: transform 0.3s var(--ease), opacity 0.3s;
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  display: none;
  flex-direction: column; gap: 6px;
  padding: 10px 28px 26px;
  background: rgba(255, 255, 255, 0.97);
  border-bottom: 1px solid var(--stroke);
}
.mobile-menu.open { display: flex; }
.mobile-link {
  padding: 12px 8px; font-size: 15px; color: var(--text-dim);
  border-bottom: 1px solid var(--stroke);
  text-transform: uppercase; letter-spacing: 0.1em;
}
.mobile-menu .btn { margin-top: 14px; }

/* ---------- Hero ---------- */
/* Hero fills the first screen; like the modules, its content starts at
   the top instead of being centered — with 120px of air above the
   eyebrow (just the right breathing room under the fixed nav). */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex; flex-direction: column;
  padding: 120px 28px 72px;
  overflow: hidden;
}

#particles { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; }
.hero::after {
  content: "";
  position: absolute; inset: 0; z-index: 3;
  background:
    radial-gradient(ellipse 80% 60% at 30% 40%, transparent 0%, rgba(238, 242, 249, 0.55) 70%, var(--bg) 100%),
    linear-gradient(to bottom, rgba(238, 242, 249, 0.6) 0%, rgba(238, 242, 249, 0.25) 30%, rgba(238, 242, 249, 0.25) 70%, var(--bg) 100%);
  pointer-events: none;
}

/* Grid: the headline, CTA and trust row span the full width; the app
   window sits in the empty space right of the subtitle row. */
.hero-content {
  position: relative; z-index: 4;
  max-width: 1240px; width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "eyebrow eyebrow"
    "title   title"
    "sub     win"
    "cta     cta"
    "trust   trust";
  column-gap: clamp(32px, 4vw, 64px);
  align-items: start;
}
.eyebrow    { grid-area: eyebrow; }
.hero-title { grid-area: title; }
.hero-sub   { grid-area: sub; }
.hero-cta   { grid-area: cta; }
.hero-trust { grid-area: trust; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display);
  font-size: 12.5px; letter-spacing: 0.34em;
  color: var(--cyan-soft);
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(2, 132, 199, 0.25);
  padding: 9px 18px; border-radius: 999px;
  text-transform: uppercase;
}
.pulse-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 10px var(--cyan);
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: 0.25; box-shadow: 0 0 2px var(--cyan); } }

.hero-title {
  margin-top: 28px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(26px, 4.1vw, 54px);
  line-height: 1.12;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  /* Reserve 3 lines so the typewriter's line wraps never resize the hero */
  min-height: 3.36em;
}
.typed-wrap { color: var(--text-dim); font-weight: 500; }
.typed {
  background: var(--grad-main);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 14px rgba(2, 132, 199, 0.3));
}
.typed::after {
  content: "▌";
  color: var(--cyan-soft);
  animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.hero-sub {
  margin-top: 26px;
  max-width: 640px;
  color: var(--text-dim);
  font-size: 18.5px;
  font-weight: 300;
}

.hero-cta { margin-top: 38px; display: flex; flex-wrap: wrap; gap: 18px; }

.hero-trust {
  margin-top: 34px;
  display: flex; flex-wrap: wrap; gap: 12px;
  color: var(--text-faint);
  font-size: 13.5px; letter-spacing: 0.06em;
}
.trust-sep { color: var(--cyan-soft); opacity: 0.7; }

/* Holo desktop app window */
/* App window sits in the grid cell right of the subtitle (grid-area:
   win), so it never covers the headline; position: relative keeps
   .appwin-chip and .holo-halo anchored to it. Hidden below 1080px. */
.holo {
  position: relative; z-index: 4;
  grid-area: win;
  width: min(400px, 28vw);
  perspective: 900px;
}
.appwin {
  position: relative;
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--stroke-bright);
  border-radius: 18px;
  box-shadow:
    0 30px 70px rgba(15, 48, 96, 0.26),
    0 0 40px rgba(2, 132, 199, 0.14),
    inset 0 0 0 1px rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
  animation: appwin-float 7s ease-in-out infinite;
}
@keyframes appwin-float {
  0%, 100% { transform: translateY(0) rotateX(calc(4deg + var(--tilt-x, 0deg))) rotateY(calc(-7deg + var(--tilt-y, 0deg))); }
  50% { transform: translateY(-4%) rotateX(calc(2deg + var(--tilt-x, 0deg))) rotateY(calc(-2deg + var(--tilt-y, 0deg))); }
}
.appwin-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 14px;
  background: rgba(255, 255, 255, 0.55);
  border-bottom: 1px solid var(--stroke);
}
.appwin-dot { width: 11px; height: 11px; border-radius: 50%; }
.appwin-dot-red { background: #ff5f57; }
.appwin-dot-yellow { background: #febc2e; }
.appwin-dot-green { background: #28c840; }
.appwin-title {
  margin-left: 10px;
  font-family: var(--font-display);
  font-size: 10.5px; letter-spacing: 0.24em;
  color: var(--text-faint); text-transform: uppercase;
}
.appwin-body { position: relative; padding: 10px; }
.appwin-shot {
  display: block; width: 100%; height: auto;
  border-radius: 10px;
}
.appwin-scan {
  position: absolute; left: 12px; right: 12px; top: 12px;
  height: 40%;
  background: linear-gradient(to bottom, transparent 0%, rgba(2, 132, 199, 0.09) 50%, transparent 100%);
  pointer-events: none;
  animation: appwin-scan 5s ease-in-out infinite;
}
@keyframes appwin-scan {
  0%, 100% { transform: translateY(0); opacity: 0; }
  10%, 90% { opacity: 1; }
  50% { transform: translateY(220%); opacity: 0.55; }
}
.appwin-chip {
  position: absolute; z-index: 3;
  left: 24px; bottom: -14px;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid var(--stroke-bright);
  color: var(--text-dim);
  font-size: 11px; letter-spacing: 0.12em;
  box-shadow: 0 8px 24px rgba(15, 48, 96, 0.18), var(--glow-cyan);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.appwin-chip i {
  width: 7px; height: 7px; border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.8);
  animation: chip-pulse 2s ease-in-out infinite;
}
@keyframes chip-pulse { 50% { opacity: 0.35; } }
.holo-halo {
  position: absolute; z-index: 1;
  inset: 8% -18%;
  background: radial-gradient(ellipse at center, rgba(2, 132, 199, 0.16), rgba(124, 58, 237, 0.1) 50%, transparent 72%);
  filter: blur(18px);
}

.scroll-hint {
  position: absolute; z-index: 4;
  left: 50%; bottom: 84px; /* 28px of air above the marquee strip */
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  color: var(--text-faint); font-size: 11px; letter-spacing: 0.4em;
}
.scroll-text { font-family: var(--font-display); }
.scroll-line {
  width: 1.5px; height: 46px;
  background: linear-gradient(to bottom, var(--cyan-soft), transparent);
  animation: scroll-line 2.2s ease-in-out infinite;
}
@keyframes scroll-line {
  0% { transform: scaleY(0); transform-origin: top; opacity: 0; }
  40% { transform: scaleY(1); transform-origin: top; opacity: 1; }
  60% { transform: scaleY(1); transform-origin: bottom; opacity: 1; }
  100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}

/* ---------- Ticker ---------- */
.ticker {
  /* anchored flush to the very bottom of the hero, below the SCROLL hint */
  position: absolute; left: 0; right: 0; bottom: 0;
  z-index: 5;
  border-top: 1px solid var(--stroke);
  border-bottom: 1px solid var(--stroke);
  background: rgba(255, 255, 255, 0.55);
  overflow: hidden;
  padding: 16px 0;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.ticker-track {
  display: flex; align-items: center; gap: 42px;
  width: max-content;
  animation: ticker 32s linear infinite;
}
.ticker-track span {
  font-family: var(--font-display);
  font-size: 13.5px; letter-spacing: 0.3em;
  color: var(--text-dim); white-space: nowrap;
}
.tick-star { color: var(--cyan-soft); font-size: 11px; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ---------- Sections ---------- */
/* Modules start at the top of the screen: no scroll offset (the fixed
   74px nav overlays the 84px top padding), and each section is trimmed
   to fit within one 1080px-tall viewport. */
.section {
  position: relative; z-index: 5;
  max-width: 1240px;
  margin: 0 auto;
  padding: 84px 28px 56px;
  scroll-margin-top: 0;
}
.section-head { text-align: center; max-width: 720px; margin: 0 auto 40px; }
.section-title {
  margin-top: 16px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(27px, 3.6vw, 42px);
  line-height: 1.2;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.section-sub { margin-top: 14px; color: var(--text-dim); font-size: 17px; font-weight: 300; }

.grad-text {
  background: var(--grad-main);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 18px rgba(124, 58, 237, 0.25));
}

/* ---------- Reveal animation ---------- */
.reveal {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.reveal.in { opacity: 1; transform: none; }
.reveal.in[data-parallax] {
  transform: translateY(var(--par-y, 0px));
  transition: opacity 0.9s var(--ease), transform 0.16s linear;
}

/* ---------- About ---------- */
.about-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 44px;
  align-items: center;
}

.about-visual { position: relative; }
.media-frame {
  position: relative;
  border-radius: var(--radius);
  border: 1px solid var(--stroke);
  overflow: hidden;
  background: var(--grad-soft);
  box-shadow: 0 24px 60px rgba(15, 48, 96, 0.14), inset 0 0 0 1px rgba(2, 132, 199, 0.08);
}
.media-frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  aspect-ratio: 9 / 6.4;
  filter: saturate(1.1) contrast(1.02);
}
.frame-scan {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, transparent 0%, rgba(2, 132, 199, 0.06) 50%, transparent 100%);
  background-size: 100% 220%;
  animation: frame-scan 5.5s linear infinite;
}
@keyframes frame-scan { to { background-position-y: 220%; } }

.float-chip {
  position: absolute;
  display: flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 500;
  color: var(--text);
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--stroke-bright);
  border-radius: 12px;
  padding: 10px 16px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 10px 30px rgba(15, 48, 96, 0.16), var(--glow-cyan);
  animation: chip-float 6s ease-in-out infinite;
}
.chip-a { top: -18px; left: -24px; }
.chip-b { bottom: 18%; right: -30px; animation-delay: 1.4s; }
.chip-c { bottom: -18px; left: 12%; animation-delay: 2.6s; }
@keyframes chip-float { 50% { transform: translateY(-9px); } }

.about-copy h3 {
  font-family: var(--font-display);
  font-size: 24px; font-weight: 700; letter-spacing: 0.02em;
  text-transform: uppercase;
}
.about-copy > p { margin-top: 14px; color: var(--text-dim); font-weight: 300; }

.about-list { list-style: none; margin-top: 22px; display: grid; gap: 10px; }
/* The marker is positioned out of flow rather than being a flex item, so a
   list item can hold inline markup (<strong>, <em>, links) and still wrap
   as one paragraph instead of each child becoming its own column. */
.about-list li { position: relative; padding-left: 24px; color: var(--text-dim); font-size: 15.5px; }
.li-marker {
  position: absolute; left: 0; top: 0.24em;
  color: var(--cyan-soft); text-shadow: 0 0 10px rgba(2, 132, 199, 0.5); font-size: 12px;
}
.about-list li strong { color: var(--text); font-weight: 500; }

.about-stats {
  margin-top: 28px;
  display: flex; flex-wrap: wrap; gap: 42px;
}
.stat { display: flex; flex-direction: column; }
.stat-num {
  font-family: var(--font-display);
  font-weight: 800; font-size: 34px;
  background: var(--grad-main);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  line-height: 1.1;
}
.stat-label { margin-top: 6px; font-size: 12.5px; letter-spacing: 0.14em; color: var(--text-faint); text-transform: uppercase; }

/* ---------- Features ---------- */
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  perspective: 1200px;
}

.tilt-card {
  position: relative;
  border-radius: var(--radius);
  padding: 28px 26px;
  background: var(--panel);
  border: 1px solid var(--stroke);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
  transition: transform 0.18s ease-out, border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
  transform-style: preserve-3d;
  will-change: transform;
}
.tilt-card:hover {
  border-color: var(--stroke-bright);
  box-shadow: 0 22px 54px rgba(15, 48, 96, 0.14), 0 0 40px rgba(2, 132, 199, 0.1);
}
.card-glow {
  position: absolute; top: -40%; left: -40%;
  width: 180%; height: 180%;
  background: radial-gradient(circle at 50% 50%, rgba(2, 132, 199, 0.09), transparent 55%);
  opacity: 0;
  transition: opacity 0.45s var(--ease);
  pointer-events: none;
}
.tilt-card:hover .card-glow { opacity: 1; }

.card-icon {
  width: 54px; height: 54px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: var(--grad-soft);
  border: 1px solid var(--stroke);
  color: var(--cyan-soft);
  margin-bottom: 18px;
  box-shadow: inset 0 0 18px rgba(2, 132, 199, 0.08);
  transform: translateZ(30px);
}
.card-icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tilt-card:nth-child(2) .card-icon { color: var(--violet-soft); box-shadow: inset 0 0 18px rgba(124, 58, 237, 0.1); }
.tilt-card:nth-child(3) .card-icon { color: var(--magenta); box-shadow: inset 0 0 18px rgba(219, 39, 119, 0.1); }
.tilt-card:nth-child(4) .card-icon { color: var(--lime); box-shadow: inset 0 0 18px rgba(63, 98, 18, 0.1); }
.tilt-card:nth-child(5) .card-icon { color: var(--cyan-soft); }
.tilt-card:nth-child(6) .card-icon { color: var(--violet-soft); }

.tilt-card h3 {
  font-family: var(--font-display);
  font-size: 18px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase;
  transform: translateZ(24px);
}
.tilt-card p { margin-top: 12px; color: var(--text-dim); font-size: 14.8px; font-weight: 300; transform: translateZ(18px); }
.card-tag {
  display: inline-block;
  margin-top: 16px;
  font-family: var(--font-display);
  font-size: 10.5px; letter-spacing: 0.28em;
  color: var(--cyan-soft);
  border: 1px solid rgba(2, 132, 199, 0.3);
  border-radius: 999px;
  padding: 5px 12px;
  transform: translateZ(14px);
}

/* ---------- Showcase ---------- */
.showcase-frame {
  max-width: 760px;
  margin: 0 auto;
  border-radius: var(--radius);
  border: 1px solid var(--stroke);
  background: var(--panel);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(15, 48, 96, 0.16), 0 0 60px rgba(124, 58, 237, 0.08);
  transition: transform 0.18s ease-out;
  will-change: transform;
}
.frame-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--stroke);
  background: rgba(255, 255, 255, 0.8);
}
.fb-dot { width: 11px; height: 11px; border-radius: 50%; }
.fb-dot.red { background: #ff5f57; box-shadow: 0 0 8px rgba(255, 95, 87, 0.5); }
.fb-dot.yellow { background: #febc2e; box-shadow: 0 0 8px rgba(254, 188, 46, 0.5); }
.fb-dot.green { background: #28c840; box-shadow: 0 0 8px rgba(40, 200, 64, 0.5); }
.fb-title {
  margin-left: 10px;
  font-family: var(--font-display);
  font-size: 12px; letter-spacing: 0.16em;
  color: var(--text-faint);
}
.fb-live {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-size: 10.5px; letter-spacing: 0.26em;
  color: var(--lime);
}
.frame-screen video,
.frame-screen img {
  /* explicit height: auto so aspect-ratio wins over the width/height
     attributes (otherwise the img stays at the attribute height) */
  width: 100%; height: auto; aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #e3eaf6;
  display: block;
}
.frame-screen video::-webkit-media-controls-panel {
  background-image: linear-gradient(to top, rgba(238, 242, 249, 0.9), transparent);
}

.showcase-caption {
  max-width: 640px; margin: 24px auto 0; text-align: center;
  color: var(--text-faint); font-size: 14.5px; font-style: italic;
}

/* Screenshot strip */
.shot-strip {
  max-width: 760px;
  margin: 26px auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.shot {
  position: relative;
  display: block;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  overflow: hidden;
  background: var(--panel);
  transition: border-color 0.35s var(--ease), transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.shot:hover {
  border-color: var(--stroke-bright);
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(15, 48, 96, 0.16), 0 0 34px rgba(2, 132, 199, 0.12);
}
.shot img {
  width: 100%; height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform 0.6s var(--ease), filter 0.4s;
  filter: saturate(1.05);
}
.shot:hover img { transform: scale(1.05); }
.shot-cap {
  position: absolute;
  left: 14px; bottom: 12px;
  font-family: var(--font-display);
  font-size: 10px; letter-spacing: 0.24em;
  color: var(--text);
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--stroke-bright);
  border-radius: 999px;
  padding: 5px 12px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* ---------- Premium ---------- */
.plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
  max-width: 980px;
  margin: 0 auto;
  perspective: 1200px;
}
.plan {
  position: relative;
  display: flex; flex-direction: column;
  border-radius: var(--radius);
  padding: 30px 28px;
  background: var(--panel);
  border: 1px solid var(--stroke);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
  transition: transform 0.18s ease-out, border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
  will-change: transform;
}
.plan:hover { border-color: var(--stroke-bright); box-shadow: 0 24px 60px rgba(15, 48, 96, 0.14), 0 0 40px rgba(124, 58, 237, 0.1); }
.plan-glow {
  position: absolute; top: -30%; left: 50%;
  width: 120%; height: 60%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(2, 132, 199, 0.1), transparent 65%);
  pointer-events: none;
}

.plan-featured {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(240, 245, 255, 0.9));
  border-color: rgba(2, 132, 199, 0.4);
  box-shadow: 0 0 0 1px rgba(2, 132, 199, 0.2), 0 24px 70px rgba(15, 48, 96, 0.16), 0 0 60px rgba(124, 58, 237, 0.12);
}
.plan-badge {
  position: absolute; top: 22px; right: -38px;
  transform: rotate(45deg);
  background: var(--grad-main);
  color: #ffffff;
  font-family: var(--font-display); font-size: 9px; font-weight: 700; letter-spacing: 0.24em;
  padding: 7px 44px;
  box-shadow: 0 4px 16px rgba(2, 132, 199, 0.35);
}
.plan-name { font-family: var(--font-display); font-size: 17px; font-weight: 700; letter-spacing: 0.24em; }
.plan-desc { margin-top: 6px; color: var(--text-faint); font-size: 14px; font-weight: 300; }
.plan-price { margin: 18px 0 16px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.price-num {
  font-family: var(--font-display); font-weight: 800;
  font-size: 46px; line-height: 1;
  background: var(--grad-main);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.plan-featured .price-num { filter: drop-shadow(0 0 12px rgba(2, 132, 199, 0.3)); }
.price-per { color: var(--text-faint); font-size: 13.5px; }

.plan-feats { list-style: none; display: grid; gap: 8px; flex: 1; }
.plan-feats li {
  position: relative; padding-left: 26px;
  color: var(--text-dim); font-size: 14.6px;
}
.plan-feats li::before {
  content: "✦";
  position: absolute; left: 0;
  color: var(--cyan-soft); font-size: 11px;
  text-shadow: 0 0 8px rgba(2, 132, 199, 0.5);
}
.plan-feats li em { color: var(--text); font-style: normal; }
.plan-btn { margin-top: 24px; width: 100%; }

.premium-note {
  margin-top: 28px; text-align: center;
  color: var(--text-faint); font-size: 13.5px; letter-spacing: 0.04em;
}

/* ---------- Support ---------- */
/* One ask only: file it on GitHub. The two-column grid from the old
   FAQ + contact layout is kept because it already collapses to a
   single column at 860px. */
.support-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 36px;
  align-items: start;
}
.issue-card {
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  padding: 32px 34px;
  background: var(--panel);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.issue-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  margin-bottom: 18px;
  border: 1px solid var(--stroke);
  border-radius: 12px;
  background: var(--grad-soft);
  color: var(--cyan-soft);
  font-size: 16px;
}
.issue-h3 {
  font-family: var(--font-display);
  font-size: 19px; font-weight: 700; letter-spacing: 0.05em;
  color: var(--text);
  margin-bottom: 12px;
}
.issue-copy { color: var(--text-dim); font-size: 15.5px; max-width: 44ch; }
.issue-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
/* Reuses .about-list, including its absolute marker — see the note there. */
.issue-hints { margin-top: 4px; }

/* ---------- Lightbox ---------- */
.lightbox-trigger { display: block; cursor: zoom-in; }
.lightbox-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 10px; }

.lightbox {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s var(--ease);
}
.lightbox.open { opacity: 1; pointer-events: auto; }
.lightbox-backdrop {
  position: absolute; inset: 0;
  background: rgba(238, 242, 249, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.lightbox-stage {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  max-width: min(1200px, calc(100vw - 90px));
  padding: 48px 0 20px;
}
.lightbox-figure {
  margin: 0;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.lightbox-img {
  display: block;
  max-width: min(1200px, calc(100vw - 90px));
  max-height: calc(100vh - 160px);
  width: auto; height: auto;
  border: 1px solid var(--stroke-bright);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 30px 90px rgba(15, 48, 96, 0.35), 0 0 60px var(--glow-cyan);
}
.lightbox-cap {
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid var(--stroke);
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 13.5px;
  letter-spacing: 0.02em;
  color: var(--text);
}
.lightbox-btn {
  flex: none;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--stroke-bright);
  border-radius: 50%;
  color: var(--text);
  font-size: 22px; line-height: 1;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(15, 48, 96, 0.18);
  transition: transform 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.lightbox-btn:hover { transform: scale(1.08); border-color: var(--accent); box-shadow: 0 10px 30px rgba(15, 48, 96, 0.25), var(--glow-cyan); }
.lightbox-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.lightbox-prev { position: absolute; left: -56px; top: 50%; transform: translateY(-50%); }
.lightbox-next { position: absolute; right: -56px; top: 50%; transform: translateY(-50%); }
.lightbox-prev:hover, .lightbox-next:hover { transform: translateY(-50%) scale(1.08); }
.lightbox-close { position: absolute; right: 0; top: 0; font-size: 15px; }

/* ---------- Footer ---------- */
.footer {
  position: relative; z-index: 5;
  border-top: 1px solid var(--stroke);
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  margin-top: 90px;
  padding: 70px 28px 36px;
}
.footer-grid {
  max-width: 1240px; margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 44px;
}
.footer-brand .brand { margin-bottom: 18px; }
.footer-tag { color: var(--text-dim); font-size: 15px; font-weight: 300; max-width: 300px; }
.footer-privacy { margin-top: 14px; color: var(--text-faint); font-size: 12.5px; line-height: 1.6; max-width: 300px; }
.footer-copy { margin-top: 16px; color: var(--text-faint); font-size: 12.5px; }
.footer-col { display: grid; gap: 12px; align-content: start; }
.footer-col h4 {
  font-family: var(--font-display);
  font-size: 12px; letter-spacing: 0.3em;
  color: var(--text); text-transform: uppercase;
  margin-bottom: 6px;
}
.footer-col a { color: var(--text-faint); font-size: 14.5px; transition: color 0.3s; }
.footer-col a:hover { color: var(--cyan-soft); }
.footer-bottom {
  max-width: 1240px; margin: 54px auto 0;
  padding-top: 24px;
  border-top: 1px solid var(--stroke);
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  color: var(--text-faint); font-size: 13px;
}
.footer-social { display: flex; gap: 14px; }
.footer-social a {
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--stroke);
  border-radius: 12px;
  color: var(--text-dim);
  font-size: 15px;
  transition: all 0.3s var(--ease);
}
.footer-social a:hover { border-color: var(--stroke-bright); color: var(--cyan-soft); box-shadow: var(--glow-cyan); transform: translateY(-3px); }

/* ---------- AI section ---------- */
/* Teaser link under a grid, pointing at the AI section */
.section-link { margin-top: 34px; text-align: center; }
.section-link a {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-display);
  font-size: 12.5px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--cyan-soft);
  padding-bottom: 5px;
  border-bottom: 1px solid transparent;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.section-link a:hover { color: var(--violet-soft); border-bottom-color: var(--stroke-bright); }
.section-link a:hover .btn-arrow { transform: translateX(4px); }

.ai-grid { margin-top: 26px; }
.ai-block { margin-top: 62px; }

/* Screenshots that must be read whole (settings lists, stack rows, annotated
   UI shots) are shown at their own ratio instead of being cropped. */
.media-frame.frame-fit img,
.frame-screen.frame-natural img {
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .holo { display: none; }
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .about-grid { gap: 44px; }
}

/* The full nav (brand + 6 links + 3 buttons) needs ~1160px of viewport before
   it stops clipping — narrower than that and the CTA row ran off the right
   edge, cutting "Purchase license" in half. So below that width the redundant
   GitHub button goes first (it also lives in the footer and in Support) and
   the link gaps tighten, which is enough to keep the two real CTAs. */
@media (max-width: 1154px) {
  .nav-cta .btn-ghost { display: none; }
  .nav-links { gap: 26px; }
}

/* With the buttons unable to wrap, the trimmed nav needs ~1024px before it
   fits inside the padding, so below that the links fold into the hamburger
   menu instead of running off the edge. */
@media (max-width: 1023px) {
  .nav-links, .nav-cta { display: none; }
  .hamburger { display: flex; }
  /* The trust row is four separate flex items, so any wrap strands a "·" at
     the end of a line — the separator can't know it's now trailing. The row
     only fits on one line from 1024px up, so below that the dots go and the
     items are told apart by the 12px flex gap alone. */
  .trust-sep { display: none; }
}

@media (max-width: 860px) {
  .about-grid, .support-grid { grid-template-columns: 1fr; }
  .section { padding: 84px 20px 44px; }
  .hero { padding: 120px 20px 72px; }
  .float-chip { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .ai-block { margin-top: 46px; }
}

/* Below ~760px the uppercase headline can wrap to a second line, so
   the typewriter needs 4 reserved lines to keep the hero stable;
   below ~430px the typed line takes a third line (5 total) */
@media (max-width: 760px) {
  .hero-title { min-height: 4.48em; }
}
@media (max-width: 430px) {
  .hero-title { min-height: 5.6em; }
}

@media (max-width: 560px) {
  .features-grid, .plans, .shot-strip, .footer-grid { grid-template-columns: 1fr; }
  .hero-cta .btn, .issue-actions .btn { width: 100%; }
  .issue-card { padding: 24px 22px; }
  .about-stats { gap: 26px; }
  .stat-num { font-size: 27px; }
  /* Keep the window-chrome bar on one line on narrow screens */
  .frame-bar { padding: 11px 14px; gap: 6px; }
  .fb-title {
    font-size: 10px; letter-spacing: 0.08em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .fb-live { font-size: 9px; letter-spacing: 0.12em; white-space: nowrap; }
}

/* Short viewports: no room for the SCROLL hint between the content
   and the marquee strip, so it's dropped. The ticker is allowed to
   fall just below the fold — the hero keeps its full top padding. */
@media (max-height: 940px) {
  .scroll-hint { display: none; }
}

/* ---------- Dark mode (automatic, follows OS) ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #04060f;
    --bg-2: #070b1a;
    --panel: rgba(13, 24, 48, 0.55);
    --panel-solid: #0a1124;
    --stroke: rgba(120, 200, 255, 0.14);
    --stroke-bright: rgba(120, 255, 255, 0.5);

    --cyan: #00e5ff;
    --cyan-soft: #22d3ee;
    --violet: #a855f7;
    --violet-soft: #8b5cf6;
    --magenta: #ff2e88;
    --lime: #a3e635;

    --text: #e6f6ff;
    --text-dim: #9fb3d3;
    --text-faint: #5c6f92;

    --grad-main: linear-gradient(100deg, #00e5ff 0%, #a855f7 55%, #ff2e88 100%);
    --grad-soft: linear-gradient(120deg, rgba(0, 229, 255, 0.16), rgba(168, 85, 247, 0.16));

    --glow-cyan: 0 0 24px rgba(0, 229, 255, 0.35);
    --glow-violet: 0 0 24px rgba(168, 85, 247, 0.35);
  }

  .orb { opacity: 0.3; }
  .orb-a { background: radial-gradient(circle, #00b3d9, transparent 65%); }
  .orb-b { background: radial-gradient(circle, #7c3aed, transparent 65%); }
  .orb-c { background: radial-gradient(circle, #d91a6c, transparent 65%); }

  .scanlines {
    background: repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.025) 0px,
      rgba(255, 255, 255, 0.025) 1px,
      transparent 1px,
      transparent 4px
    );
  }

  .cursor-glow {
    background: radial-gradient(circle, rgba(0, 229, 255, 0.045) 0%, rgba(168, 85, 247, 0.03) 40%, transparent 70%);
  }

  .progress { box-shadow: 0 0 12px rgba(0, 229, 255, 0.8); }

  .btn-ghost { background: rgba(255, 255, 255, 0.03); }
  .btn-glass { background: rgba(13, 24, 48, 0.5); }

  .brand-mark { filter: drop-shadow(0 0 8px rgba(0, 229, 255, 0.6)); }

  .nav.scrolled { background: rgba(4, 6, 15, 0.72); }
  .mobile-menu { background: rgba(4, 6, 15, 0.97); }

  .hero::after {
    background:
      radial-gradient(ellipse 80% 60% at 30% 40%, transparent 0%, rgba(4, 6, 15, 0.6) 70%, var(--bg) 100%),
      linear-gradient(to bottom, rgba(4, 6, 15, 0.55) 0%, transparent 30%, transparent 70%, var(--bg) 100%);
  }

  .eyebrow { background: rgba(0, 229, 255, 0.06); border-color: rgba(0, 229, 255, 0.25); }

  .holo-halo {
    background: radial-gradient(ellipse at center, rgba(0, 229, 255, 0.22), rgba(168, 85, 247, 0.14) 50%, transparent 72%);
  }
  .appwin {
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), 0 0 44px rgba(0, 229, 255, 0.16), inset 0 0 0 1px rgba(120, 255, 255, 0.14);
  }
  .appwin-bar { background: rgba(7, 11, 26, 0.7); border-bottom-color: rgba(0, 229, 255, 0.12); }
  .appwin-scan { background: linear-gradient(to bottom, transparent 0%, rgba(0, 229, 255, 0.09) 50%, transparent 100%); }
  .appwin-chip { background: rgba(10, 17, 36, 0.85); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), var(--glow-cyan); }

  .ticker { background: rgba(7, 11, 26, 0.6); }

  .media-frame { box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(0, 229, 255, 0.08); }
  .frame-scan { background: linear-gradient(to bottom, transparent 0%, rgba(0, 229, 255, 0.07) 50%, transparent 100%); }

  .float-chip { background: rgba(10, 17, 36, 0.85); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), var(--glow-cyan); }

  .tilt-card:hover { box-shadow: 0 22px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(0, 229, 255, 0.12); }
  .card-glow { background: radial-gradient(circle at 50% 50%, rgba(0, 229, 255, 0.1), transparent 55%); }

  .showcase-frame { box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55), 0 0 60px rgba(168, 85, 247, 0.1); }
  .frame-bar { background: rgba(7, 11, 26, 0.7); }
  .frame-screen video,
  .frame-screen img { background: #05070f; }
  .shot:hover { box-shadow: 0 16px 44px rgba(0, 0, 0, 0.5), 0 0 34px rgba(0, 229, 255, 0.14); }
  .shot-cap { background: rgba(4, 6, 15, 0.72); }

  .plan:hover { box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5), 0 0 40px rgba(168, 85, 247, 0.12); }
  .plan-glow { background: radial-gradient(ellipse at center, rgba(0, 229, 255, 0.12), transparent 65%); }
  .plan-featured {
    background: linear-gradient(180deg, rgba(13, 24, 48, 0.9), rgba(20, 10, 44, 0.85));
    border-color: rgba(0, 229, 255, 0.4);
    box-shadow: 0 0 0 1px rgba(0, 229, 255, 0.25), 0 24px 80px rgba(0, 0, 0, 0.6), 0 0 60px rgba(168, 85, 247, 0.18);
  }
  .plan-featured .price-num { filter: drop-shadow(0 0 16px rgba(0, 229, 255, 0.4)); }
  .lightbox-backdrop { background: rgba(3, 5, 12, 0.84); }
  .lightbox-img { box-shadow: 0 30px 100px rgba(0, 0, 0, 0.7), 0 0 70px var(--glow-violet); }
  .lightbox-cap { background: rgba(13, 24, 48, 0.85); border-color: rgba(148, 163, 184, 0.25); }
  .lightbox-btn { background: rgba(13, 24, 48, 0.85); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); }
  .lightbox-btn:hover { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), var(--glow-cyan); }

  .footer { background: rgba(5, 8, 18, 0.85); }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
  }
  .reveal { opacity: 1; transform: none; }
  .cursor-glow, .scanlines, .bg-orbs { display: none; }
}