/* Adam Blue Plugins — v4 "Liquid" design system
   Palette = the TextMaker thumbnail: near-black sky → royal blue → icy light corners,
   near-white type. Liquid-glass surfaces, drifting blob background, film grain,
   JS-spawned twinkling stars. Type: Space Grotesk (display) + Inter (UI/body). */

:root {
  --sky: #05060f;
  --royal: #2434c9;
  --royal-deep: #101a66;
  --ice: #cdd8ff;
  --white: #f4f7ff;
  --muted: #9fabdf;
  --glass: rgba(255, 255, 255, 0.07);
  --glass-strong: rgba(255, 255, 255, 0.12);
  --glass-border: rgba(255, 255, 255, 0.16);
  --glass-edge: rgba(255, 255, 255, 0.38);
  --radius: 22px;
  --radius-sm: 14px;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: "Inter", system-ui, sans-serif;
  /* the TextMaker thumbnail gradient: black top-centre, vivid royal blue body,
     soft icy blooms pulling toward white in the low corners and right edge */
  background:
    radial-gradient(95% 70% at 50% -6%, #000004 0%, rgba(0, 0, 6, 0.75) 48%, transparent 74%),
    radial-gradient(44% 38% at 105% 14%, rgba(226, 235, 255, 0.22), transparent 70%),
    radial-gradient(50% 40% at -8% 106%, rgba(220, 231, 255, 0.26), transparent 70%),
    radial-gradient(54% 44% at 105% 106%, rgba(230, 239, 255, 0.3), transparent 70%),
    linear-gradient(178deg, #010109 0%, #040a3a 42%, #0a1a86 76%, #1c31c4 100%);
  background-attachment: fixed;
  color: var(--white);
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

/* ---------- liquid background blobs ---------- */
.liquid {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  filter: blur(85px) saturate(1.2);
  opacity: var(--liquid-op, 1);
  transition: opacity 0.3s linear;
}
.blob {
  position: absolute;
  border-radius: 46% 54% 60% 40% / 50% 44% 56% 50%;
  opacity: 0.75;
}
.blob.b1 {
  width: 55vw; height: 55vw;
  left: -14vw; top: 4vh;
  background: radial-gradient(circle at 35% 35%, #2b3fd4, transparent 68%);
  animation: liquid1 38s ease-in-out infinite alternate;
}
.blob.b2 {
  width: 48vw; height: 48vw;
  right: -12vw; top: 32vh;
  background: radial-gradient(circle at 60% 40%, #4d63f0, transparent 66%);
  animation: liquid2 46s ease-in-out infinite alternate;
}
.blob.b3 {
  width: 60vw; height: 42vw;
  left: 18vw; bottom: -18vh;
  background: radial-gradient(circle at 50% 60%, #8fa2ff, transparent 70%);
  opacity: 0.5;
  animation: liquid3 54s ease-in-out infinite alternate;
}
@keyframes liquid1 {
  50% { border-radius: 58% 42% 44% 56% / 42% 58% 42% 58%; }
  100% { transform: translate(6vw, 8vh) rotate(18deg) scale(1.08); }
}
@keyframes liquid2 {
  50% { border-radius: 40% 60% 52% 48% / 56% 40% 60% 44%; }
  100% { transform: translate(-7vw, -6vh) rotate(-14deg) scale(1.12); }
}
@keyframes liquid3 {
  50% { border-radius: 52% 48% 40% 60% / 48% 56% 44% 52%; }
  100% { transform: translate(-5vw, -5vh) scale(1.06); }
}

/* film grain */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
  z-index: 2;
}

/* JS-spawned stars */
.star {
  position: fixed;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 6px 1px rgba(255, 255, 255, 0.55);
  opacity: 0;
  z-index: 1;
  pointer-events: none;
  animation: starlife var(--life, 9s) ease-in-out forwards;
}
@keyframes starlife {
  0% { opacity: 0; transform: scale(0.4); }
  25% { opacity: var(--peak, 0.85); transform: scale(1); }
  75% { opacity: var(--peak, 0.85); }
  100% { opacity: 0; transform: scale(0.5); }
}

main, header, footer { position: relative; z-index: 3; }

/* horizontal-only longhand: shorthand `padding: 0 24px` was ZEROING the vertical
   padding of every `section.wrap` (class beats element selector) - the overlap bug */
.wrap { max-width: 1080px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }

/* ---------- type ---------- */
h1, h2, h3 {
  font-family: "Space Grotesk", "Inter", sans-serif;
  font-weight: 700;
  letter-spacing: -0.025em;
}
h1 {
  font-size: clamp(2.7rem, 6.6vw, 4.7rem);
  line-height: 1.12;
  margin-bottom: 6px;
  background: linear-gradient(180deg, #ffffff 30%, var(--ice) 75%, #93a5f5 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 14px 44px rgba(70, 95, 255, 0.4));
}
h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); margin-bottom: 26px; }
h3 { font-size: 1.05rem; letter-spacing: -0.01em; }
p { line-height: 1.7; color: var(--muted); font-size: 1rem; }
.lead { font-size: 1.13rem; color: #d7defc; max-width: 52ch; font-weight: 450; }
.em {
  background: linear-gradient(90deg, #9fb1ff, #5f7cf5);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

h1 .ltr { display: inline-block; opacity: 0; transform: translateY(0.5em) scale(0.85); animation: ltrIn 0.6s cubic-bezier(0.2, 1.5, 0.35, 1) forwards; }
@keyframes ltrIn { to { opacity: 1; transform: none; } }

/* ---------- liquid glass primitives ---------- */
.glass, .card, .stat, details, .vframe {
  background: linear-gradient(160deg, var(--glass-strong), var(--glass) 42%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  backdrop-filter: blur(22px) saturate(1.5);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  box-shadow: inset 0 1px 0 var(--glass-edge), inset 0 -1px 0 rgba(255, 255, 255, 0.06),
              0 20px 50px rgba(2, 4, 24, 0.45);
}

/* ---------- nav: floating glass pill ---------- */
header { padding: 18px 0; position: sticky; top: 12px; z-index: 50; }
nav {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  padding: 12px 22px;
  border-radius: 999px;
  background: linear-gradient(160deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(22px) saturate(1.5);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  box-shadow: inset 0 1px 0 var(--glass-edge), 0 14px 38px rgba(2, 4, 24, 0.45);
}
.brand {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: var(--white);
  text-decoration: none;
  margin-right: auto;
}
nav a.link {
  color: var(--muted);
  text-decoration: none;
  font-weight: 600;
  font-variation-settings: "wght" 600;
  font-size: 0.9rem;
  padding: 7px 14px;
  border-radius: 999px;
  transition: background 0.2s ease, color 0.2s ease, font-variation-settings 0.3s ease, letter-spacing 0.3s ease;
}
nav a.link:hover { color: var(--white); background: rgba(255, 255, 255, 0.08); font-variation-settings: "wght" 780; letter-spacing: 0.01em; }
nav a.link.active { color: var(--white); background: rgba(255, 255, 255, 0.12); box-shadow: inset 0 1px 0 rgba(255,255,255,0.25); }

/* icon nav: thin stroke glyphs, Apple style, with glass tooltips */
nav a.link.icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 9px 12px;
}
nav a.link.icon svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: block;
}
nav a.link.icon.yt svg { fill: currentColor; stroke: none; }
nav a.link.icon.yt svg .tri { fill: #070a20; }
nav a.link.icon.yt:hover { color: #ff5f5f; }
nav a.link.icon::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translate(-50%, -4px);
  padding: 5px 11px;
  border-radius: 8px;
  background: linear-gradient(160deg, rgba(20, 26, 70, 0.94), rgba(8, 12, 40, 0.94));
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 10px 26px rgba(2, 4, 24, 0.5);
  color: var(--ice);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
nav a.link.icon:hover::after { opacity: 1; transform: translate(-50%, 0); }

/* ---------- buttons ---------- */
.btn {
  display: inline-block;
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #ffffff, #d9e1ff);
  color: #101a56;
  border-radius: 999px;
  padding: 15px 34px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  font-size: 0.98rem;
  box-shadow: 0 14px 38px rgba(80, 105, 255, 0.45), inset 0 1px 0 #fff;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.btn::after {
  content: "";
  position: absolute;
  top: 0; left: -80%;
  width: 55%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.95), transparent);
  transform: skewX(-20deg);
  transition: left 0.5s ease;
}
.btn:hover::after { left: 130%; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 20px 48px rgba(80, 105, 255, 0.6), inset 0 1px 0 #fff; }
.btn.ghost {
  background: linear-gradient(160deg, rgba(255,255,255,0.12), rgba(255,255,255,0.05));
  color: var(--white);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: inset 0 1px 0 var(--glass-edge);
}

.pill {
  display: inline-block;
  border: 1px solid var(--glass-border);
  background: linear-gradient(160deg, rgba(255,255,255,0.1), rgba(255,255,255,0.04));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 999px;
  padding: 8px 20px;
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ice);
  box-shadow: inset 0 1px 0 var(--glass-edge);
}

/* ---------- sections ---------- */
section { padding: 110px 0; position: relative; }
.hero { padding: 96px 0 56px; text-align: center; }
/* soft royal glow floating behind the hero headline */
.hero::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 30px;
  width: min(760px, 86vw);
  height: 320px;
  transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(72, 100, 255, 0.42), transparent 70%);
  filter: blur(58px);
  z-index: -1;
  pointer-events: none;
}
.hero-art {
  width: min(880px, 100%);
  border-radius: var(--radius);
  margin: 60px auto 0;
  display: block;
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 var(--glass-edge), 0 34px 90px rgba(2, 4, 28, 0.65);
  transition: transform 0.2s ease-out;
  will-change: transform;
}
.hero-cta { margin-top: 42px; display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 22px;
  margin-top: 40px;
}
.card { padding: 28px 26px; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; }
.card:hover {
  transform: translateY(-4px);
  border-color: rgba(170, 190, 255, 0.5);
  box-shadow: inset 0 1px 0 var(--glass-edge),
              0 0 26px rgba(120, 150, 255, 0.4),
              0 0 60px rgba(90, 120, 255, 0.24);
}
.card h3 { margin-bottom: 10px; }
.card p { font-size: 0.95rem; }

.soon { opacity: 0.6; }
.soon .tag {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  padding: 3px 10px;
  margin-left: 8px;
  vertical-align: middle;
}

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; row-gap: 40px; }
@media (max-width: 760px) { .split { grid-template-columns: 1fr; } }

ul.checks { list-style: none; margin-top: 16px; }
ul.checks li { padding: 9px 0 9px 32px; position: relative; color: var(--white); font-weight: 600; font-size: 0.97rem; }
ul.checks li::before { content: "\2726"; position: absolute; left: 2px; color: var(--ice); }
ul.checks li span { color: var(--muted); font-weight: 400; }

/* stats */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-top: 64px; }
.stat { padding: 22px 12px; text-align: center; transition: transform 0.25s ease; }
.stat:hover { transform: translateY(-4px); }
.stat .num {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 2rem;
  display: block;
  letter-spacing: -0.02em;
  background: linear-gradient(100deg, #8fa2ff 0%, #e8eeff 30%, #ffffff 45%, #b9c6ff 60%, #8fa2ff 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 5.5s linear infinite;
}
@keyframes shimmer { to { background-position: 220% 0; } }
.stat .lbl { font-size: 0.72rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); }

/* marquee */
.marquee {
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding: 17px 0;
  margin: 48px 0;
  white-space: nowrap;
}
.marquee .track {
  display: inline-block;
  animation: slide 34s linear infinite;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.05rem;
  letter-spacing: 0.1em;
  color: rgba(215, 224, 255, 0.55);
}
.marquee .track span { margin: 0 24px; }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* comparison table */
.compare { width: 100%; border-collapse: separate; border-spacing: 0; margin-top: 26px; font-size: 0.95rem; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--glass-border); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); background: linear-gradient(160deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03)); }
.compare th, .compare td { padding: 14px 18px; text-align: left; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.compare tr:last-child td { border-bottom: none; }
.compare th { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 0.9rem; }
.compare td.yes { color: var(--white); font-weight: 600; }
.compare td.no { color: rgba(159, 171, 223, 0.55); }
.compare .colhl { background: rgba(255, 255, 255, 0.06); }

/* video frame */
.vframe {
  aspect-ratio: 16 / 9;
  border-style: dashed;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  color: var(--muted);
  font-weight: 600;
}
.vframe .play {
  width: 60px; height: 60px;
  border-radius: 50%;
  border: 1px solid var(--glass-border);
  background: linear-gradient(160deg, rgba(255,255,255,0.14), rgba(255,255,255,0.05));
  box-shadow: inset 0 1px 0 var(--glass-edge);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem;
  color: var(--white);
}

/* faq */
details { padding: 18px 22px; margin-bottom: 12px; }
summary { cursor: pointer; font-weight: 600; color: var(--white); }
details p { margin-top: 12px; }

/* testimonials */
.quote { font-size: 1rem; color: #dbe2ff; line-height: 1.65; }
.who { margin-top: 14px; color: var(--muted); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }

/* reveal motion */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: 0.08s; }
.reveal.d2 { transition-delay: 0.16s; }
.reveal.d3 { transition-delay: 0.24s; }

/* footer */
footer { padding: 46px 0 60px; border-top: 1px solid rgba(255, 255, 255, 0.12); margin-top: 40px; }
footer .wrap { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }
footer p { font-size: 0.85rem; }
footer .links { margin-left: auto; display: flex; gap: 18px; }
footer a { color: var(--muted); text-decoration: none; font-size: 0.85rem; font-weight: 600; }
footer a:hover { color: var(--white); }

/* ---------- product cards ---------- */
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 26px;
  margin-top: 44px;
}
.product-card {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  border: 1px solid var(--glass-border);
  background: linear-gradient(160deg, var(--glass-strong), var(--glass) 42%);
  backdrop-filter: blur(22px) saturate(1.5);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  box-shadow: inset 0 1px 0 var(--glass-edge), 0 24px 60px rgba(2, 4, 24, 0.5);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.product-card:hover {
  transform: translateY(-4px);
  border-color: rgba(170, 190, 255, 0.55);
  box-shadow: inset 0 1px 0 var(--glass-edge),
              0 0 30px rgba(120, 150, 255, 0.45),
              0 0 70px rgba(90, 120, 255, 0.28);
}
.product-card img.cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.product-card:hover img.cover { transform: scale(1.045); }
.product-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(2, 4, 20, 0.62) 0%, transparent 38%, transparent 68%, rgba(2, 4, 20, 0.5) 100%);
}
.product-card .info {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 24px 30px;
}
/* boxless liquid glass: a frosted tint that melts downward into the artwork -
   the blur and the tint both FADE via the mask, so there is no edge anywhere */
.product-card .info::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 160%;
  z-index: -1;
  background: linear-gradient(180deg, rgba(8, 14, 52, 0.55) 0%, rgba(8, 14, 52, 0.22) 55%, transparent 100%);
  backdrop-filter: blur(16px) saturate(1.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 40%, transparent 100%);
}
.product-card .titles { margin-right: auto; }
.product-card h3 {
  font-size: 1.5rem;
  color: var(--white);
  letter-spacing: -0.02em;
  text-shadow: 0 4px 18px rgba(0, 0, 10, 0.6);
}
.product-card .sub {
  margin-top: 5px;
  color: #ccd6fb;
  font-size: 0.92rem;
  font-weight: 500;
  text-shadow: 0 2px 12px rgba(0, 0, 10, 0.6);
}
.price-pill {
  flex-shrink: 0;
  border: 1px solid rgba(150, 175, 255, 0.65);
  background: linear-gradient(180deg, #4a63f2 0%, #2440dd 55%, #1b32c4 100%);
  border-radius: 999px;
  padding: 9px 20px;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  color: #ffffff;
  text-shadow: 0 1px 6px rgba(10, 20, 90, 0.5);
  box-shadow: 0 0 22px rgba(80, 110, 255, 0.85), 0 8px 26px rgba(35, 60, 220, 0.55),
              inset 0 1px 0 rgba(255, 255, 255, 0.55);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.product-card:hover .price-pill {
  box-shadow: 0 0 34px rgba(95, 125, 255, 1), 0 10px 30px rgba(35, 60, 220, 0.65),
              inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transform: translate(calc(var(--px, 0) * 1px), calc(var(--py, 0) * 1px)) scale(1.04);
}
.product-card .cta-row {
  position: absolute;
  left: 24px;
  bottom: 22px;
  z-index: 2;
  color: #dfe6ff;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
}

/* search */
.search-box {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 22px;
  border-radius: 999px;
  margin-top: 40px;
}
.search-box input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--white);
  font-family: "Inter", sans-serif;
  font-size: 1.05rem;
}
.search-box input::placeholder { color: var(--muted); }

/* ---------- proximity: cursor spotlight + tilt ---------- */
.card, .product-card, .stat {
  --mx: 50%;
  --my: 50%;
}
.card::after, .stat::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: calc(var(--near, 0) * 0.85);
  transition: opacity 0.3s ease;
  background: radial-gradient(220px 220px at var(--mx) var(--my), rgba(160, 185, 255, 0.16), transparent 70%);
}
.card, .stat { position: relative; }
.card:hover::after, .stat:hover::after { opacity: 1; }
.product-card .spotlight {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: calc(var(--near, 0) * 0.9);
  transition: opacity 0.3s ease;
  background: radial-gradient(260px 260px at var(--mx) var(--my), rgba(190, 210, 255, 0.18), transparent 70%);
}
.product-card:hover .spotlight { opacity: 1; }
.tiltable { transform-style: preserve-3d; }

/* proximity field: --near (0..1, set by JS as the cursor approaches) brightens
   the border and wakes the spotlight before the cursor ever enters the card */
.card, .stat {
  border-color: rgba(190, 205, 255, calc(0.16 + var(--near, 0) * 0.3));
}
.product-card {
  border-color: rgba(190, 205, 255, calc(0.16 + var(--near, 0) * 0.34));
}

/* fake depth layers: the JS tilt sets --px/--py and the inner layers drift
   toward the cursor, reading as 3D parallax inside the glass */
.card h3, .stat .num {
  transform: translate(calc(var(--px, 0) * 1px), calc(var(--py, 0) * 1px));
  transition: transform 0.2s ease-out;
  will-change: transform;
}
.product-card .info .titles, .product-card .price-pill {
  transform: translate(calc(var(--px, 0) * 1px), calc(var(--py, 0) * 1px));
  transition: transform 0.2s ease-out, box-shadow 0.25s ease;
}

/* ---------- 3D carousel ---------- */
.carousel-stage {
  perspective: 1200px;
  height: 300px;
  margin-top: 50px;
  position: relative;
  overflow: visible;
}
.carousel-ring {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  will-change: transform;
}
.carousel-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 240px;
  height: 150px;
  margin: -75px 0 0 -120px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-border);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.05));
  backdrop-filter: blur(10px) saturate(1.4);
  -webkit-backdrop-filter: blur(10px) saturate(1.4);
  box-shadow: inset 0 1px 0 var(--glass-edge), 0 0 26px rgba(80, 110, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--white);
  backface-visibility: hidden;
}
.carousel-panel .mini {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.carousel-hint {
  text-align: center;
  margin-top: 26px;
  color: var(--muted);
  font-size: 0.85rem;
}

.placeholder-note {
  border: 1.5px dashed rgba(244, 246, 255, 0.4);
  border-radius: var(--radius);
  padding: 18px 22px;
  color: var(--white);
  background: rgba(255, 255, 255, 0.05);
  font-size: 0.95rem;
}

/* ---------- grid background: a slow neon floor that fades in as you scroll,
   crossfading with the liquid blobs (JS drives --grid-op / --liquid-op) ---------- */
.gridfield {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  perspective: 820px;
  opacity: var(--grid-op, 0);
  transition: opacity 0.3s linear;
}
.gridfield .plane {
  position: absolute;
  left: -45%;
  right: -45%;
  top: 48%;
  bottom: -70%;
  background:
    repeating-linear-gradient(90deg, rgba(122, 150, 255, 0.22) 0 1.5px, transparent 1.5px 86px),
    repeating-linear-gradient(0deg, rgba(122, 150, 255, 0.22) 0 1.5px, transparent 1.5px 86px);
  transform: rotateX(63deg);
  transform-origin: 50% 0%;
  -webkit-mask-image: radial-gradient(72% 88% at 50% 0%, #000 22%, transparent 76%);
  mask-image: radial-gradient(72% 88% at 50% 0%, #000 22%, transparent 76%);
  animation: gridflow 18s linear infinite;
}
@keyframes gridflow { to { background-position: 0 0, 0 86px; } }

/* ---------- advanced typography ---------- */
/* giant outlined ghost word behind a section heading
   (named ghostword: .ghost is taken by the glass button variant) */
.ghostword {
  position: absolute;
  top: 34px;
  left: 8px;
  z-index: -1;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(84px, 15vw, 185px);
  line-height: 1;
  letter-spacing: 0.02em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(150, 175, 255, 0.13);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

/* tiny tracked out label above a heading */
.eyebrow {
  display: block;
  font-family: "Inter", sans-serif;
  font-weight: 620;
  font-variation-settings: "wght" 620;
  font-size: 0.72rem;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: rgba(165, 182, 245, 0.9);
  margin-bottom: 16px;
}

/* serif accent: one italic Instrument Serif word inside a sans heading,
   wearing a vertical ice gradient (the amrofilms trick, in our palette) */
.serif-accent {
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  padding-right: 0.06em;
  background: linear-gradient(0deg, rgba(101, 129, 255, 0.55) 0%, #dbe4ff 62%, #ffffff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* interactive dot grid canvas: JS fills sections tagged data-dotgrid */
.dotgrid {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* icy gradient word */
.ice {
  background: linear-gradient(180deg, #ffffff 15%, #c8d5ff 55%, #7f9dff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* featherweight half of a mixed weight heading */
.lite {
  font-weight: 300;
  font-variation-settings: "wght" 300;
  letter-spacing: -0.01em;
}

/* marquee font variations: solid, outlined, feather, gradient, heavy */
.marquee .track span:nth-child(5n+2) {
  color: transparent;
  -webkit-text-stroke: 1px rgba(215, 224, 255, 0.55);
}
.marquee .track span:nth-child(5n+3) {
  font-weight: 300;
  font-variation-settings: "wght" 300;
  letter-spacing: 0.22em;
  color: rgba(198, 210, 255, 0.6);
}
.marquee .track span:nth-child(5n+4) {
  background: linear-gradient(90deg, #d9e3ff, #6f8cff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.marquee .track span:nth-child(5n) {
  font-variation-settings: "wght" 500;
  font-weight: 500;
  color: rgba(230, 237, 255, 0.75);
}

/* ---------- carousel: advanced ring ---------- */
.carousel-stage { cursor: grab; }
.carousel-stage:active { cursor: grabbing; }
.carousel-panel {
  transition: box-shadow 0.45s ease, border-color 0.45s ease, filter 0.45s ease;
  -webkit-box-reflect: below 12px linear-gradient(transparent 62%, rgba(255, 255, 255, 0.16));
}
.carousel-panel.front {
  border-color: rgba(185, 205, 255, 0.7);
  filter: brightness(1.16) saturate(1.15);
  box-shadow: inset 0 1px 0 var(--glass-edge),
              0 0 36px rgba(110, 140, 255, 0.55),
              0 0 90px rgba(80, 110, 255, 0.3);
}
.carousel-panel.front .mini { color: var(--ice); }

/* ---------- orbit ring: video panels on a rotating cylinder ---------- */
.ring-stage {
  perspective: 1300px;
  height: 480px;
  margin-top: 56px;
  position: relative;
}
.ring-inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  will-change: transform;
}
/* full liquid glass card: clip up top, details below, riding the cylinder */
.ring-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 280px;
  height: 268px;
  margin: -134px 0 0 -140px;
  border-radius: var(--radius);
  border: 1px solid rgba(228, 237, 255, 0.3);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.05) 40%, rgba(3, 6, 28, 0.4) 100%);
  backdrop-filter: blur(14px) saturate(1.5);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  box-shadow: inset 0 1px 0 var(--glass-edge), inset 0 -1px 0 rgba(255, 255, 255, 0.06),
              0 14px 34px rgba(2, 4, 24, 0.4);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-align: left;
  backface-visibility: hidden;
  cursor: grab;
  transition: box-shadow 0.4s ease, border-color 0.4s ease;
}
.ring-panel .rmedia {
  position: relative;
  height: 157px;
  flex-shrink: 0;
  background: #000;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.ring-panel .rmedia video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ring-panel .rbody { padding: 13px 16px 0; }
.ring-panel .rbody h3 { font-size: 0.95rem; margin-bottom: 6px; }
.ring-panel .rbody p { font-size: 0.78rem; line-height: 1.5; }
.ring-panel.front {
  border-color: rgba(165, 192, 255, 0.75);
  box-shadow: inset 0 1px 0 var(--glass-edge),
              0 0 30px rgba(105, 138, 255, 0.5),
              0 0 80px rgba(80, 112, 255, 0.26);
}
.ring-stage:active .ring-panel { cursor: grabbing; }

/* ---------- feature coverflow: big liquid glass cards (media up top,
   caption below), centre card wears the blue glow edge ---------- */
.feature-stage {
  perspective: 1300px;
  height: 470px;
  margin-top: 54px;
  position: relative;
}
.feature-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 340px;
  height: 408px;
  margin: -204px 0 0 -170px;
  border-radius: var(--radius);
  border: 1px solid var(--glass-border);
  background: linear-gradient(160deg, var(--glass-strong), var(--glass) 42%);
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  box-shadow: inset 0 1px 0 var(--glass-edge), 0 24px 60px rgba(2, 4, 24, 0.5);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-align: left;
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}
.feature-card .fmedia {
  position: relative;
  height: 194px;
  flex-shrink: 0;
  background:
    radial-gradient(80% 90% at 50% 8%, rgba(70, 100, 255, 0.4), transparent 72%),
    linear-gradient(180deg, rgba(10, 18, 70, 0.55), rgba(4, 8, 34, 0.75));
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}
.feature-card .fmedia video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.feature-card .fmedia .play {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--glass-border);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.05));
  box-shadow: inset 0 1px 0 var(--glass-edge);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: var(--white);
}
.feature-card .fbody { padding: 20px 22px 0; }
.feature-card .fbody h3 { margin-bottom: 9px; }
.feature-card .fbody p { font-size: 0.9rem; line-height: 1.55; }
.feature-card.front {
  border-color: rgba(108, 142, 255, 0.85);
  box-shadow: inset 0 1px 0 var(--glass-edge),
              0 0 0 1px rgba(90, 125, 255, 0.45),
              0 0 40px rgba(90, 125, 255, 0.5),
              0 0 110px rgba(70, 105, 255, 0.3);
}

/* arrow buttons riding the stage edges */
.car-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 300;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--glass-border);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.05));
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: inset 0 1px 0 var(--glass-edge);
  color: var(--white);
  font-family: "Inter", sans-serif;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0 4px;
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.car-arrow:hover {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.09));
  box-shadow: inset 0 1px 0 var(--glass-edge), 0 0 22px rgba(100, 130, 255, 0.5);
}
.car-arrow.prev { left: 2px; }
.car-arrow.next { right: 2px; }

/* ---------- cinema strip: full bleed row of big black panels, gently swept
   like the inside of a screen wall; the preset demos play in the boxes ---------- */
.strip-stage {
  position: relative;
  height: 360px;
  margin-top: 60px;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  perspective: 1400px;
  /* visible: shadows and lens stretched panels must never get cut by the stage box */
  overflow: visible;
}
.strip-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 250px;
  margin: -125px 0 0 -200px;
  border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.05) 40%, rgba(3, 6, 28, 0.4) 100%);
  border: 1px solid rgba(228, 237, 255, 0.3);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  box-shadow: inset 0 1px 0 var(--glass-edge), inset 0 -1px 0 rgba(255, 255, 255, 0.06),
              0 12px 30px rgba(2, 4, 24, 0.32);
  overflow: hidden;
  will-change: transform, opacity;
  cursor: grab;
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}
/* liquid glass sheen riding ON TOP of the video: a soft light catch falling
   from the top left corner plus a bright inner edge all the way round */
.strip-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05) 26%, transparent 52%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 0 rgba(255, 255, 255, 0.1),
              inset 1px 0 0 rgba(255, 255, 255, 0.14), inset -1px 0 0 rgba(255, 255, 255, 0.14);
}
/* the big centre panel wears the signature glow */
.strip-panel.front {
  border-color: rgba(165, 192, 255, 0.75);
  box-shadow: inset 0 1px 0 var(--glass-edge),
              0 0 34px rgba(105, 138, 255, 0.5),
              0 0 90px rgba(80, 112, 255, 0.28),
              0 12px 30px rgba(2, 4, 24, 0.32);
}
.strip-panel video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.strip-panel .arc-demo { font-size: 30px; padding: 20px; }
.strip-stage:active .strip-panel { cursor: grabbing; }

/* bottom name label riding over the video: dark scrim fading upward,
   so white type stays readable on the black clips */
.wave-tile .wave-label, .ring-panel .wave-label, .orbit-tile .wave-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 28px 12px 10px;
  text-align: center;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  color: #ffffff;
  background: linear-gradient(0deg, rgba(0, 0, 4, 0.85) 0%, rgba(0, 0, 4, 0.42) 55%, transparent 100%);
  pointer-events: none;
}

.float-tile .mini, .orbit-tile .mini {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
/* live preset demo viewers: black, Inter Regular, like the plugin plays them */
.arc-demo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.35;
  color: #fff;
  text-align: center;
  padding: 12px;
  overflow: hidden;
}
.arc-demo .u { display: inline-block; white-space: pre; will-change: transform, opacity, filter; }

.wave-tile video, .float-tile video, .orbit-tile video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- wave carousel: tiles surfing a sine path ---------- */
.wave-stage {
  position: relative;
  height: 330px;
  margin-top: 60px;
  overflow: hidden;
  /* soft edges: tiles melt out instead of getting cut by the stage box */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
}
.wave-tile {
  position: absolute;
  top: 0;
  left: 0;
  width: 250px;
  height: 156px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-border);
  background: linear-gradient(160deg, var(--glass-strong), var(--glass) 42%);
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  box-shadow: inset 0 1px 0 var(--glass-edge), 0 16px 40px rgba(2, 4, 24, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--white);
  overflow: hidden;
  will-change: transform;
}

/* ---------- scatter float: tiles hovering around a centre statement ---------- */
.float-stage {
  position: relative;
  height: 560px;
  margin-top: 40px;
}
/* the wrapper floats; the video box inside carries the glass + proximity,
   so the bob animation and the hover tilt never fight over transform */
.float-tile {
  position: absolute;
  width: 216px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  animation: floaty var(--fdur, 7s) ease-in-out infinite alternate;
}
/* 16:9 box: the clips are widescreen text animations, so the frame matches
   them exactly and nothing gets cropped away */
.float-tile .fbox {
  --mx: 50%;
  --my: 50%;
  position: relative;
  width: 216px;
  height: 122px;
  border-radius: 20px;
  border: 1px solid rgba(190, 205, 255, calc(0.16 + var(--near, 0) * 0.3));
  background: linear-gradient(160deg, var(--glass-strong), var(--glass) 42%);
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  box-shadow: inset 0 1px 0 var(--glass-edge), 0 16px 40px rgba(2, 4, 24, 0.5);
  overflow: hidden;
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.float-tile .fbox video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.float-tile .fbox::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: calc(var(--near, 0) * 0.85);
  transition: opacity 0.3s ease;
  background: radial-gradient(200px 200px at var(--mx) var(--my), rgba(160, 185, 255, 0.18), transparent 70%);
}
.float-tile .fbox:hover {
  border-color: rgba(170, 190, 255, 0.55);
  box-shadow: inset 0 1px 0 var(--glass-edge),
              0 0 26px rgba(120, 150, 255, 0.45),
              0 0 60px rgba(90, 120, 255, 0.25);
}
.float-tile .fname {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.01em;
  color: var(--white);
  text-align: center;
}
@keyframes floaty {
  from { transform: translateY(-10px) rotate(var(--frot, 0deg)); }
  to { transform: translateY(12px) rotate(calc(var(--frot, 0deg) * -0.6)); }
}
.float-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
}
.float-center .big {
  display: block;
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-size: 5.4rem;
  line-height: 1;
  background: linear-gradient(0deg, rgba(101, 129, 255, 0.55), #ffffff 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.float-center .sub2 {
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}

/* ---------- orbit: layout tiles circling a hub ---------- */
.orbit-stage {
  position: relative;
  height: 430px;
  margin-top: 40px;
  overflow: hidden;
}
.orbit-hub {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 116px;
  height: 116px;
  border-radius: 50%;
  border: 1px solid var(--glass-border);
  background: linear-gradient(160deg, var(--glass-strong), var(--glass) 42%);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: inset 0 1px 0 var(--glass-edge), 0 0 40px rgba(80, 110, 255, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  color: var(--white);
}
.orbit-tile {
  position: absolute;
  top: 0;
  left: 0;
  /* wide 16:9 tile so the text animation clips fit uncropped */
  width: 236px;
  height: 133px;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid var(--glass-border);
  background: linear-gradient(160deg, var(--glass-strong), var(--glass) 42%);
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  box-shadow: inset 0 1px 0 var(--glass-edge), 0 16px 40px rgba(2, 4, 24, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--white);
  overflow: hidden;
  will-change: transform;
}

/* ---------- style cards: three included looks ---------- */
.style-card {
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  background: linear-gradient(160deg, var(--glass-strong), var(--glass) 42%);
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  box-shadow: inset 0 1px 0 var(--glass-edge), 0 20px 50px rgba(2, 4, 24, 0.45);
  overflow: hidden;
  text-align: left;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.style-card:hover {
  transform: translateY(-4px);
  border-color: rgba(170, 190, 255, 0.5);
  box-shadow: inset 0 1px 0 var(--glass-edge), 0 0 30px rgba(120, 150, 255, 0.4);
}
.style-card .fmedia { height: 158px; position: relative; overflow: hidden; }
.style-card .fmedia img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.style-card .sbody { padding: 18px 20px 22px; }
.style-card .sbody h3 { margin-bottom: 6px; }
.style-card .sbody p { font-size: 0.88rem; }

/* ---------- Resolve style lab panels (interactive demos) ---------- */
.lab {
  max-width: 860px;
  margin: 54px auto 0;
  border-radius: 18px;
  background: #101014;
  border: 1px solid #26262e;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  overflow: hidden;
  text-align: left;
}
.lab-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 18px;
  border-bottom: 1px solid #222229;
  color: #c8c9d4;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
}
.lab-pill {
  margin-left: auto;
  border: 1px solid #3a3b46;
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 0.68rem;
  color: #9fa3b8;
}
.lab-body { display: grid; grid-template-columns: 1fr 280px; }
@media (max-width: 760px) { .lab-body { grid-template-columns: 1fr; } }
.lab-viewer {
  background: #000;
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.demo-text {
  display: flex;
  gap: 0.22em;
  flex-wrap: wrap;
  justify-content: center;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 2.2rem;
  color: #fff;
  padding: 20px;
}
.demo-unit { display: inline-block; white-space: pre; will-change: transform, opacity, filter; }
.lab-controls {
  background: #16161c;
  border-left: 1px solid #222229;
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media (max-width: 760px) { .lab-controls { border-left: none; border-top: 1px solid #222229; } }
.ctl-label {
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 0.64rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #8a8fa8;
  margin-bottom: 7px;
}
.seg {
  display: flex;
  background: #0c0c10;
  border: 1px solid #26262e;
  border-radius: 9px;
  padding: 3px;
  gap: 3px;
}
.seg button {
  flex: 1;
  border: 0;
  background: transparent;
  color: #9ba0b8;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 0.76rem;
  padding: 7px 2px;
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.seg button.on {
  background: #2a3cd8;
  color: #fff;
  box-shadow: 0 0 14px rgba(70, 100, 255, 0.5);
}
.lab-btn {
  border: 1px solid #3a3b46;
  background: #1d1d25;
  color: #e7e9f5;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 0.82rem;
  padding: 10px 14px;
  border-radius: 9px;
  cursor: pointer;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
.lab-btn:hover { background: #262633; box-shadow: 0 0 16px rgba(70, 100, 255, 0.3); }
.lab-slider {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #9ba0b8;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 0.74rem;
}
.lab-slider input[type="range"] { flex: 1; accent-color: #3a56ff; }
.lab-slider output { width: 26px; text-align: right; color: #dfe3ff; }

/* curves editor */
.curve-wrap { position: relative; background: #0b0b0f; height: 320px; }
canvas.curves { display: block; width: 100%; height: 100%; }
.ease-list { display: flex; flex-direction: column; gap: 8px; }
.ease-item {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #26262e;
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
  color: #c8cce2;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 0.8rem;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.ease-item.on {
  border-color: #5d78ff;
  background: rgba(70, 100, 255, 0.12);
  box-shadow: 0 0 16px rgba(70, 100, 255, 0.25);
}
.ease-viewer {
  grid-column: 1 / -1;
  border-top: 1px solid #222229;
  background: #000;
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ease-demo {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 2rem;
  color: #fff;
  will-change: transform;
}

/* ---------- Resolve inspector replica: the combined Animation Center lab.
   Styled to match the plugin's real inspector rows in DaVinci Resolve:
   right aligned grey labels, white active buttons, thin sliders with value
   boxes, the Order dropdown, keyframe diamonds down the right edge. ---------- */
.rl-body { display: grid; grid-template-columns: 1fr 372px; }
@media (max-width: 860px) { .rl-body { grid-template-columns: 1fr; } }
.rl .lab-viewer { min-height: 340px; }
.rl-panel {
  background: #212125;
  border-left: 1px solid #17171a;
  padding: 12px 8px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}
@media (max-width: 860px) { .rl-panel { border-left: none; border-top: 1px solid #1a1a1d; } }
.rl-row {
  display: grid;
  grid-template-columns: 112px 1fr 46px 14px;
  gap: 8px;
  align-items: center;
  padding: 4px 8px;
}
.rl-label {
  text-align: right;
  font-family: "Inter", sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  color: #9b9ba1;
  white-space: nowrap;
}
.rl-key { color: #5b5b62; font-size: 0.6rem; text-align: center; }
.rl-seg {
  display: flex;
  background: #2e2e33;
  border: 1px solid #1b1b1f;
  border-radius: 5px;
  padding: 2px;
  gap: 2px;
  grid-column: 2 / 4;
}
.rl-seg button {
  flex: 1;
  border: 0;
  background: transparent;
  color: #d5d5da;
  font-family: "Inter", sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 4px 2px;
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.rl-seg button:hover { color: #ffffff; }
/* clicked = pressed dark, white text (like the real inspector) */
.rl-seg button.on { background: #0e0e11; color: #ffffff; }
.rl-select {
  grid-column: 2 / 4;
  appearance: none;
  -webkit-appearance: none;
  background: #1b1b1e url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0h8L4 5z' fill='%23aaaaaa'/%3E%3C/svg%3E") no-repeat right 8px center;
  border: 1px solid #131316;
  border-radius: 5px;
  color: #dcdce1;
  font-family: "Inter", sans-serif;
  font-size: 0.74rem;
  font-weight: 500;
  padding: 5px 22px 5px 9px;
  cursor: pointer;
  outline: none;
}
.rl-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(#8a8a90, #8a8a90) no-repeat 0 0 / var(--fill, 25%) 100%, #101014;
  outline: none;
  cursor: pointer;
}
.rl-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #d9d9de;
  border: 1px solid #0d0d0f;
}
.rl-slider::-moz-range-thumb {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #d9d9de;
  border: 1px solid #0d0d0f;
}
.rl-val {
  background: #18181b;
  border: 1px solid #101013;
  border-radius: 4px;
  color: #e2e2e7;
  font-family: "Inter", sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  padding: 3px 5px;
  text-align: right;
}
.rl-extra { display: flex; flex-direction: column; gap: 2px; }
.rl-extra[hidden] { display: none; }
.rl-curvewrap {
  width: 252px;
  height: 192px;
  background: #26262a;
  border: 1px solid #131316;
  border-radius: 5px;
  margin: 4px 8px 4px auto;
  position: relative;
  overflow: hidden;
}
.rl-curvewrap canvas { width: 100%; height: 100%; display: block; }
.rl-play { margin: 10px 8px 0; }
/* the plugin's SeparatorControl: a thin rule between control groups */
.rl-sep { height: 1px; background: #17171b; margin: 7px 10px; }
/* Enter / Exit style paired checkboxes on one row (half width each, like the plugin) */
.rl-two { grid-template-columns: 112px 20px 90px 20px 1fr 14px; }
.rl-check {
  appearance: none;
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  background: #131316;
  border: 1px solid #0c0c0f;
  border-radius: 3px;
  cursor: pointer;
  position: relative;
  margin: 0;
}
.rl-check:checked { background: #0e0e11; border-color: #0c0c0f; }
.rl-check:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 4px;
  height: 8px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ---------- layout rhythm: editorial alignment instead of centre stacking ----------
   .sec-left / .sec-right flip a section's header block to one side; the ghost
   word crosses to the opposite side. .band paints a full bleed dark stripe
   behind a section to break the vertical monotony. */
.sec-left { text-align: left; }
.sec-left > p, .sec-left .lead { margin-left: 0 !important; margin-right: auto !important; }
.sec-left .ghostword { left: auto; right: 0; }
.sec-right { text-align: right; }
.sec-right > p { margin-right: 0 !important; margin-left: auto !important; }
.sec-right .ghostword { left: 0; }
.band { position: relative; }
.band::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  background: linear-gradient(180deg, transparent, rgba(1, 2, 14, 0.5) 14%, rgba(1, 2, 14, 0.5) 86%, transparent);
  z-index: -2;
  pointer-events: none;
}

/* ---------- styles bento: one hero tile + two stacked, instead of a flat row ---------- */
.styles-bento {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  grid-auto-rows: 205px;
  gap: 20px;
  margin-top: 44px;
}
.styles-bento .style-card { display: flex; flex-direction: column; cursor: pointer; }
/* the featured style owns the tall left slot; the rest auto-fill column 2.
   Explicit placement means DOM order never has to change, so the videos and
   images keep their state when the feature is swapped. */
.styles-bento .style-card.feature { grid-column: 1; grid-row: 1 / span 2; }
.styles-bento .style-card.feature { cursor: default; }
.styles-bento .style-card:not(.feature):hover {
  border-color: rgba(170, 190, 255, 0.6);
  box-shadow: inset 0 1px 0 var(--glass-edge), 0 0 26px rgba(120, 150, 255, 0.45);
}
.styles-bento .style-card .fmedia { flex: 1; height: auto; }
@media (max-width: 760px) {
  .styles-bento { grid-template-columns: 1fr; }
  .styles-bento .style-card.feature { grid-column: auto; grid-row: auto; }
}

/* ---------- faq: sticky header column + answers column ---------- */
.faq-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.4fr;
  gap: 52px;
  align-items: start;
}
.faq-head { position: sticky; top: 120px; text-align: left; }
@media (max-width: 760px) {
  .faq-grid { grid-template-columns: 1fr; }
  .faq-head { position: static; }
}

/* speed bars inside a split: hug the column instead of centring */
.split .speed { margin: 0; max-width: none; }

/* ---------- speed bars ---------- */
.speed {
  max-width: 640px;
  margin: 50px auto 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  text-align: left;
}
.speed-lbl {
  display: flex;
  justify-content: space-between;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 0.86rem;
  color: var(--white);
  margin-bottom: 8px;
}
.speed-lbl span { color: var(--muted); font-weight: 500; font-size: 0.78rem; }
.speed-bar {
  height: 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--glass-border);
  overflow: hidden;
}
.speed-fill {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #2440dd, #6f8cff);
  box-shadow: 0 0 18px rgba(90, 120, 255, 0.6);
  transition: width 1.5s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s;
}
.speed-row.in .speed-fill { width: var(--w, 50%); }

/* ---------- requirements smallprint ---------- */
.req-note {
  max-width: 660px;
  margin: 36px auto 0;
  font-size: 0.72rem;
  line-height: 1.75;
  color: rgba(159, 171, 223, 0.55);
  text-align: center;
}

/* ---------- founder note ---------- */
.founder { max-width: 560px; margin: 0 auto; text-align: center; }
.founder .ava {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  border: 1px solid var(--glass-border);
  background: linear-gradient(160deg, var(--glass-strong), var(--glass) 42%);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: inset 0 1px 0 var(--glass-edge), 0 0 40px rgba(80, 110, 255, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 28px;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--white);
}
.founder p { font-size: 1.06rem; line-height: 1.8; color: #dbe2ff; }
.founder .sig {
  margin-top: 20px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ice);
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 0.78rem;
}

/* ---------- sticky buy bar ---------- */
.buybar {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translate(-50%, 150%);
  z-index: 70;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 12px 10px 24px;
  border-radius: 999px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.05));
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(22px) saturate(1.5);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  box-shadow: inset 0 1px 0 var(--glass-edge), 0 18px 50px rgba(2, 4, 24, 0.6);
  transition: transform 0.45s cubic-bezier(0.2, 0.9, 0.25, 1);
}
.buybar.show { transform: translate(-50%, 0); }
.buybar .t { font-family: "Space Grotesk", sans-serif; font-weight: 700; color: var(--white); }
.buybar .p {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  background: linear-gradient(100deg, #8fa2ff 0%, #ffffff 50%, #8fa2ff 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 5.5s linear infinite;
}
.buybar .btn { padding: 10px 24px; font-size: 0.9rem; }

/* ============================================================
   SPACE THEME + ADVANCED 3D  (v6 visual pass)
   ============================================================ */

/* ---- spiral galaxy: a slow rotating disc, blurred, off to one side ---- */
.galaxy {
  position: fixed;
  z-index: 0;
  width: 120vh;
  height: 120vh;
  top: -30vh;
  right: -35vh;
  pointer-events: none;
  border-radius: 50%;
  opacity: 0.5;
  background:
    conic-gradient(from 0deg,
      rgba(120,150,255,0) 0deg,
      rgba(140,120,255,0.14) 40deg,
      rgba(90,130,255,0) 90deg,
      rgba(160,120,255,0.12) 150deg,
      rgba(90,130,255,0) 210deg,
      rgba(120,150,255,0.14) 280deg,
      rgba(120,150,255,0) 360deg),
    radial-gradient(closest-side, rgba(180,190,255,0.28), rgba(90,120,255,0.10) 42%, transparent 66%);
  filter: blur(24px);
  animation: galaxyspin 140s linear infinite;
  mix-blend-mode: screen;
}
.galaxy.g2 {
  width: 78vh; height: 78vh;
  top: auto; right: auto;
  bottom: -22vh; left: -22vh;
  opacity: 0.42;
  animation-duration: 190s;
  animation-direction: reverse;
}
@keyframes galaxyspin { to { transform: rotate(360deg); } }

/* ---- parallax starfield canvas (JS-driven) ---- */
.spacefx {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* ---- 3D glass + gradient text ---- */
.text3d {
  position: relative;
  background: linear-gradient(178deg, #ffffff 20%, #cdd8ff 60%, #7f9dff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow:
    0 1px 0 rgba(255,255,255,0.4),
    0 2px 1px rgba(150,170,255,0.35),
    0 3px 2px rgba(90,120,255,0.28),
    0 5px 6px rgba(50,70,200,0.24),
    0 9px 22px rgba(40,60,180,0.5),
    0 16px 50px rgba(30,50,160,0.4);
}

/* ---- rotating 3D glass-dot sphere ---- */
.sphere-stage {
  position: relative;
  width: 100%;
  height: 420px;
  perspective: 1100px;
  pointer-events: none;
}
.sphere {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  will-change: transform;
}
.sphere-dot {
  position: absolute;
  left: 0;
  top: 0;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffffff, #9db4ff 55%, rgba(70,100,255,0.25));
  box-shadow: 0 0 8px 1px rgba(130,160,255,0.6);
  will-change: transform, opacity;
}
.sphere-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 300px;
  height: 300px;
  margin: -150px 0 0 -150px;
  border-radius: 50%;
  border: 1px solid rgba(150,175,255,0.16);
  box-shadow: 0 0 60px rgba(70,100,255,0.14) inset;
  pointer-events: none;
}
.sphere-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 120px;
  height: 120px;
  margin: -60px 0 0 -60px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, rgba(190,205,255,0.5), rgba(70,100,255,0.18) 55%, transparent 72%);
  filter: blur(8px);
  pointer-events: none;
  animation: corepulse 6s ease-in-out infinite alternate;
}
@keyframes corepulse { to { transform: scale(1.12); opacity: 0.8; } }

/* ---- constellation path threading the sections (scroll-drawn) ---- */
.constellation {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
}
.constellation path {
  fill: none;
  stroke: rgba(150,175,255,0.35);
  stroke-width: 1.5;
  stroke-dasharray: var(--len, 4000);
  stroke-dashoffset: var(--len, 4000);
  filter: drop-shadow(0 0 6px rgba(90,120,255,0.55));
}
.constellation circle { fill: rgba(205,220,255,0.9); filter: drop-shadow(0 0 5px rgba(120,150,255,0.9)); }

/* ---- liquid glass DIAL-IN: animated specular sweep on key glass surfaces ---- */
.card, .style-card, .feature-card, .product-card, .ring-panel, .glass {
  --sheen: -30%;
}
.card::before, .style-card::before, .feature-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(115deg,
    transparent 30%,
    rgba(255,255,255,0.10) 45%,
    rgba(255,255,255,0.22) 50%,
    rgba(255,255,255,0.10) 55%,
    transparent 70%);
  background-size: 260% 100%;
  background-position: var(--sheen) 0;
  opacity: 0;
  transition: opacity 0.4s ease;
  mix-blend-mode: screen;
}
.card:hover::before, .style-card:hover::before, .feature-card.front::before {
  opacity: 1;
  animation: sheenSweep 1.6s ease-in-out;
}
@keyframes sheenSweep {
  from { background-position: -60% 0; }
  to   { background-position: 160% 0; }
}
/* brighter, more "liquid" top edge across all glass */
:root { --glass-edge: rgba(255, 255, 255, 0.46); }

/* ---- hero sphere backdrop + content lift ---- */
.hero-sphere {
  position: absolute;
  left: 50%;
  top: 150px;
  width: 460px;
  height: 460px;
  transform: translateX(-50%);
  z-index: 0;
  opacity: 0.9;
}
.hero > *:not(.hero-sphere):not(.dotgrid) { position: relative; z-index: 2; }
@media (max-width: 700px) { .hero-sphere { width: 320px; height: 320px; top: 120px; opacity: 0.6; } }

/* ---- interactive effects tag-sphere: draggable word sphere + featured panel ---- */
.efx-lab {
  display: grid;
  grid-template-columns: 1fr 430px;
  gap: 36px;
  margin-top: 50px;
  text-align: left;
  align-items: center;
}
@media (max-width: 820px) { .efx-lab { grid-template-columns: 1fr; } }
.efx-orbit {
  position: relative;
  height: 560px;
  cursor: grab;
  touch-action: none;
}
.efx-orbit:active { cursor: grabbing; }
.efx-dot {
  position: absolute;
  left: 50%; top: 50%;
  width: 5px; height: 5px;
  margin: -2.5px;
  border-radius: 50%;
  background: radial-gradient(circle, #cdd8ff, rgba(90,120,255,0.2));
  pointer-events: none;
  will-change: transform, opacity;
}
.efx-node {
  position: absolute;
  left: 50%; top: 50%;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: linear-gradient(160deg, var(--glass-strong), var(--glass) 42%);
  backdrop-filter: blur(10px) saturate(1.4);
  -webkit-backdrop-filter: blur(10px) saturate(1.4);
  box-shadow: inset 0 1px 0 var(--glass-edge);
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600;
  font-size: 0.82rem;
  color: #fff;
  white-space: nowrap;
  cursor: pointer;
  will-change: transform, opacity;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.efx-node.front { border-color: rgba(165, 192, 255, 0.7); }
.efx-node.sel {
  border-color: rgba(175, 200, 255, 0.95);
  box-shadow: inset 0 1px 0 var(--glass-edge), 0 0 24px rgba(105, 138, 255, 0.7);
}
.efx-feature {
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  background: linear-gradient(160deg, var(--glass-strong), var(--glass) 42%);
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  box-shadow: inset 0 1px 0 var(--glass-edge), 0 24px 60px rgba(2, 4, 24, 0.5);
  overflow: hidden;
}
.efx-feature .efx-media {
  position: relative;
  height: 242px;
  background: #000;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.efx-feature .efx-media video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.efx-feature .efx-info { padding: 15px 20px 20px; text-align: left; }
.efx-feature .efx-count {
  font-family: "Inter", sans-serif;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--muted);
}
.efx-feature h3 { margin: 8px 0 6px; font-size: 1.22rem; }
.efx-feature p { font-size: 0.9rem; line-height: 1.55; }
.efx-feature { will-change: transform; }

/* ============================================================
   ADVANCED PATTERNS (nourart-inspired, space theme)  v7
   ============================================================ */

/* ---- before/after "See the difference" slider ---- */
.compare-slider {
  position: relative;
  max-width: 920px;
  margin: 46px auto 0;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 var(--glass-edge), 0 24px 60px rgba(2, 4, 24, 0.55);
  cursor: ew-resize;
  user-select: none;
  touch-action: none;
  --pos: 50%;
}
.compare-slider .cmp-layer { position: absolute; inset: 0; }
.compare-slider .cmp-after { background: #000; }
.compare-slider .cmp-after video { width: 100%; height: 100%; object-fit: cover; display: block; }
.compare-slider .cmp-before {
  background: radial-gradient(120% 120% at 50% 0%, #0a0d1a, #05060a 70%);
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
  display: flex;
  align-items: center;
  justify-content: center;
}
.compare-slider .cmp-before .deadtext {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(2.8rem, 8.5vw, 5.6rem);
  letter-spacing: -0.02em;
  color: #6a7091;
  text-shadow: none;
}
.compare-slider .cmp-label {
  position: absolute;
  top: 14px;
  z-index: 3;
  padding: 5px 13px;
  border-radius: 999px;
  font-family: "Inter", sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: rgba(8, 12, 36, 0.62);
  border: 1px solid var(--glass-border);
  color: var(--ice);
}
.compare-slider .cmp-label.l { left: 14px; }
.compare-slider .cmp-label.r { right: 14px; }
.compare-slider .cmp-divider {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--pos);
  width: 2px;
  margin-left: -1px;
  cursor: ew-resize;
  touch-action: none;
  z-index: 3;
  background: rgba(220, 230, 255, 0.9);
  box-shadow: 0 0 18px rgba(120, 150, 255, 0.85);
}
.compare-slider .cmp-handle {
  position: absolute;
  top: 50%;
  left: var(--pos);
  width: 44px; height: 44px;
  margin: -22px 0 0 -22px;
  cursor: ew-resize;
  touch-action: none;
  z-index: 4;
  border-radius: 50%;
  background: linear-gradient(160deg, rgba(255,255,255,0.18), rgba(255,255,255,0.06));
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(10px) saturate(1.4);
  -webkit-backdrop-filter: blur(10px) saturate(1.4);
  box-shadow: inset 0 1px 0 var(--glass-edge), 0 0 22px rgba(100, 130, 255, 0.55);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 0.95rem; letter-spacing: -2px;
}

/* ---- infinite reviews marquee ---- */
.review-marquee {
  margin-top: 44px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.review-track {
  display: flex;
  gap: 20px;
  width: max-content;
  animation: reviewscroll 46s linear infinite;
}
.review-marquee:hover .review-track { animation-play-state: paused; }
@keyframes reviewscroll { to { transform: translateX(-50%); } }
.review-card {
  width: 340px;
  flex-shrink: 0;
  padding: 24px 26px;
  border-radius: var(--radius);
  border: 1px solid var(--glass-border);
  background: linear-gradient(160deg, var(--glass-strong), var(--glass) 42%);
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  box-shadow: inset 0 1px 0 var(--glass-edge), 0 20px 50px rgba(2, 4, 24, 0.45);
  text-align: left;
}
.review-card .stars { color: #ffd27a; letter-spacing: 2px; font-size: 0.85rem; margin-bottom: 12px; }
.review-card .rquote { font-size: 0.95rem; line-height: 1.6; color: #dbe2ff; }
.review-card .rwho { margin-top: 16px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }

/* ---- magnetic buttons keep smooth return ---- */
.btn { will-change: transform; }

/* momentum scroll disables the CSS smooth-behavior (JS owns it) */
html.momentum { scroll-behavior: auto; }

/* ============================================================
   HERO OVERHAUL + BLACKHOLES + GLASS SHIMMER  v8
   ============================================================ */

/* ---- asymmetric split hero (de-centred) ---- */
.hero-split {
  display: grid;
  grid-template-columns: 1.02fr 1.15fr;
  gap: 54px;
  align-items: center;
  text-align: left;
  padding: 70px 0 34px;
}
@media (max-width: 900px) {
  .hero-split { grid-template-columns: 1fr; text-align: center; gap: 30px; }
}
.hero-copy { position: relative; }
.hero-copy .lead { margin-left: 0; margin-right: 0; }
.hero-copy .hero-cta { justify-content: flex-start; }
@media (max-width: 900px) {
  .hero-copy .lead { margin-left: auto; margin-right: auto; }
  .hero-copy .hero-cta { justify-content: center; }
}
.hero-visual { position: relative; perspective: 1100px; }

/* ---- super-3D thumbnail with rays + glare ---- */
.thumb3d {
  position: relative;
  border-radius: var(--radius);
  transform-style: preserve-3d;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}
.thumb3d .hero-art {
  width: 100%;
  margin: 0;
  display: block;
  border-radius: var(--radius);
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 var(--glass-edge), 0 34px 90px rgba(2, 4, 28, 0.7);
}
.thumb3d .rays {
  position: absolute;
  inset: -45%;
  z-index: -1;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    transparent 0deg, rgba(120,150,255,0.28) 12deg, transparent 34deg,
    transparent 90deg, rgba(160,120,255,0.22) 104deg, transparent 128deg,
    transparent 190deg, rgba(120,160,255,0.26) 208deg, transparent 232deg,
    transparent 300deg, rgba(150,130,255,0.2) 316deg, transparent 340deg);
  filter: blur(26px);
  opacity: 0;
  transition: opacity 0.5s ease;
  animation: rayspin 16s linear infinite;
}
.thumb3d:hover .rays { opacity: 1; }
@keyframes rayspin { to { transform: rotate(360deg); } }
.thumb3d .glare {
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  pointer-events: none;
  background: radial-gradient(300px 300px at var(--gx, 50%) var(--gy, 0%), rgba(255,255,255,0.28), transparent 60%);
  opacity: 0;
  transition: opacity 0.3s ease;
  mix-blend-mode: screen;
}
.thumb3d:hover .glare { opacity: 1; }

/* ---- faded preset tags drifting in the hero background (proximity) ---- */
.hero-presets {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero-preset {
  position: absolute;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  color: rgba(150, 175, 255, 0.28);
  white-space: nowrap;
  will-change: transform, opacity, color;
  transition: color 0.3s ease;
}

/* ---- quasar: bright core + light jet ---- */
.quasar {
  position: absolute;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 20px 6px rgba(180, 200, 255, 0.9), 0 0 60px 20px rgba(110, 140, 255, 0.5);
  animation: quasarpulse 4.5s ease-in-out infinite;
}
.quasar::before {
  content: "";
  position: absolute;
  left: -140px; top: 50%;
  width: 300px; height: 2px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, transparent, rgba(150,180,255,0.55), #fff, rgba(150,180,255,0.55), transparent);
  filter: blur(1px);
}
.quasar::after {
  content: "";
  position: absolute;
  left: 50%; top: -140px;
  width: 2px; height: 300px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, rgba(150,180,255,0.4), #fff, rgba(150,180,255,0.4), transparent);
  filter: blur(1px);
  opacity: 0.7;
}
@keyframes quasarpulse { 50% { box-shadow: 0 0 28px 9px rgba(190,210,255,1), 0 0 80px 28px rgba(120,150,255,0.65); } }

/* ---- black hole: rotating accretion disc + event horizon (layout accent) ---- */
.blackhole {
  position: absolute;
  width: var(--bh, 360px);
  height: var(--bh, 360px);
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
  opacity: 0.75;
}
.blackhole::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    transparent, rgba(140,120,255,0.45), rgba(120,160,255,0.7),
    rgba(230,235,255,0.5), rgba(120,160,255,0.7), rgba(140,120,255,0.45), transparent);
  -webkit-mask: radial-gradient(closest-side, transparent 53%, #000 56%, #000 73%, transparent 79%);
  mask: radial-gradient(closest-side, transparent 53%, #000 56%, #000 73%, transparent 79%);
  filter: blur(3px);
  animation: bhspin 20s linear infinite;
}
.blackhole::after {
  content: "";
  position: absolute;
  inset: 27%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, #000 58%, rgba(8,10,26,0.85) 74%, transparent 82%);
  box-shadow: 0 0 46px 8px rgba(90,120,255,0.32), inset 0 0 0 1px rgba(185,205,255,0.45);
}
@keyframes bhspin { to { transform: rotate(360deg); } }

/* ---- glass text SHIMMER (animated) ---- */
.text3d {
  background: linear-gradient(100deg, #ffffff 12%, #cdd8ff 34%, #ffffff 48%, #b9c6ff 62%, #7f9dff 100%);
  background-size: 250% auto;
  -webkit-background-clip: text;
  background-clip: text;
  animation: glassShimmer 7.5s linear infinite;
}
@keyframes glassShimmer { to { background-position: 250% center; } }

/* ---- big horizontal drag-scroll gallery (filmstrip of preset clips) ---- */
.gallery-wrap {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: 46px;
  overflow: hidden;
  cursor: grab;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.gallery-wrap:active { cursor: grabbing; }
.gallery-track {
  display: flex;
  gap: 22px;
  padding: 6px max(26px, calc(50vw - 540px));
  width: max-content;
  will-change: transform;
}
.gallery-card {
  flex: 0 0 auto;
  width: 452px;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  background: #000;
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 var(--glass-edge), 0 24px 60px rgba(2, 4, 24, 0.5);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.gallery-card:hover {
  border-color: rgba(165, 192, 255, 0.6);
  box-shadow: inset 0 1px 0 var(--glass-edge), 0 0 30px rgba(105, 138, 255, 0.4), 0 24px 60px rgba(2, 4, 24, 0.5);
}
.gallery-card video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.gallery-card .gtag {
  position: absolute;
  left: 14px; bottom: 12px;
  z-index: 2;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600;
  font-size: 0.82rem;
  color: #fff;
  padding: 4px 11px;
  border-radius: 999px;
  background: linear-gradient(0deg, rgba(0,0,4,0.7), rgba(0,0,4,0.3));
  backdrop-filter: blur(6px);
  pointer-events: none;
}
@media (max-width: 640px) { .gallery-card { width: 300px; } }

/* ============================================================
   MORE SPACE LAYOUT VARIATIONS  v9
   ============================================================ */

/* ---- solar system: a sun with planets on rotating orbits ---- */
.solar { position: absolute; pointer-events: none; z-index: -1; }
.solar .sun {
  position: absolute; left: 50%; top: 50%;
  width: 24px; height: 24px; margin: -12px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff, #ffd27a 45%, #ff8a3c 82%);
  box-shadow: 0 0 34px 9px rgba(255, 180, 90, 0.5);
}
.solar .orbit {
  position: absolute; left: 50%; top: 50%;
  border: 1px solid rgba(150, 175, 255, 0.13);
  border-radius: 50%;
  animation: solarspin linear infinite;
}
.solar .planet {
  position: absolute; left: 50%; top: 0;
  border-radius: 50%;
}
@keyframes solarspin { to { transform: rotate(360deg); } }

/* ---- black hole WITH quasar jets (bipolar beam through the core) ---- */
.quasar-hole { position: absolute; width: var(--bh, 440px); height: var(--bh, 440px); pointer-events: none; z-index: -1; }
.quasar-hole > .blackhole { position: absolute; inset: 0; width: 100%; height: 100%; z-index: auto; }
.quasar-hole::before {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 3px; height: 235%;
  transform: translate(-50%, -50%) rotate(24deg);
  background: linear-gradient(180deg, transparent, rgba(140,175,255,0.5) 28%, rgba(235,242,255,0.95) 50%, rgba(140,175,255,0.5) 72%, transparent);
  filter: blur(1.5px);
}
.quasar-hole::after {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 62%; height: 62%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(120,150,255,0.28), transparent 70%);
  filter: blur(6px);
}

/* ---- ringed planet (Saturn) ---- */
.ringed { position: absolute; width: var(--rp, 200px); height: var(--rp, 200px); pointer-events: none; z-index: -1; }
.ringed .body {
  position: absolute; left: 50%; top: 50%;
  width: 56%; height: 56%; margin: -28% 0 0 -28%;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, #cfd8ff, #6f86e6 55%, #2c3a86 90%);
  box-shadow: inset -8px -8px 20px rgba(10,16,50,0.7), 0 0 40px rgba(90,120,255,0.35);
}
.ringed .ring {
  position: absolute; left: 50%; top: 50%;
  width: 118%; height: 118%; margin: -59% 0 0 -59%;
  border-radius: 50%;
  border: 8px solid rgba(180, 200, 255, 0.22);
  border-top-color: rgba(210, 222, 255, 0.4);
  border-bottom-color: rgba(150, 175, 255, 0.12);
  box-shadow: 0 0 22px rgba(120, 150, 255, 0.25);
  /* the bright segment of the ring keeps travelling around the tilted disc */
  animation: ringspin 16s linear infinite;
}
.ringed .ring.r2 { width: 138%; height: 138%; margin: -69% 0 0 -69%; border-width: 3px; opacity: 0.6; animation-duration: 24s; }
@keyframes ringspin {
  from { transform: rotateX(74deg) rotateZ(0deg); }
  to   { transform: rotateX(74deg) rotateZ(360deg); }
}

/* ============================================================
   PULSAR · COMET · NEBULA  v10
   ============================================================ */

/* ---- pulsar: neutron star with two sweeping lighthouse beams ---- */
.pulsar { position: absolute; pointer-events: none; z-index: -1; }
.pulsar .beam {
  position: absolute; left: 50%; top: 50%;
  width: var(--pb, 340px); height: var(--pb, 340px);
  margin-left: calc(var(--pb, 340px) / -2);
  margin-top: calc(var(--pb, 340px) / -2);
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    transparent 0deg, rgba(150,180,255,0.34) 6deg, transparent 26deg,
    transparent 174deg, rgba(150,180,255,0.34) 186deg, transparent 206deg,
    transparent 360deg);
  -webkit-mask: radial-gradient(closest-side, #000 6%, rgba(0,0,0,0.55) 32%, transparent 74%);
  mask: radial-gradient(closest-side, #000 6%, rgba(0,0,0,0.55) 32%, transparent 74%);
  filter: blur(2px);
  animation: pulsarspin 5s linear infinite;
}
.pulsar .core {
  position: absolute; left: 50%; top: 50%;
  width: 14px; height: 14px; margin: -7px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff, #bcd0ff 58%, rgba(120,150,255,0.4));
  box-shadow: 0 0 22px 6px rgba(150,180,255,0.9);
  animation: pulsarcore 1.25s ease-in-out infinite;
}
@keyframes pulsarspin { to { transform: rotate(360deg); } }
@keyframes pulsarcore { 50% { transform: scale(1.45); box-shadow: 0 0 30px 9px rgba(185,208,255,1); } }

/* ---- comet: bright head + trailing tail streaking across a section ---- */
.comet {
  position: absolute;
  width: var(--cl, 230px); height: 2px;
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  animation: cometfly var(--cs, 12s) linear infinite;
  animation-delay: var(--cd, 0s);
}
.comet .tail {
  position: absolute; inset: 0;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(150,180,255,0.16) 42%, rgba(205,222,255,0.78));
  filter: blur(1px);
}
.comet .head {
  position: absolute; right: -2px; top: 50%;
  width: 6px; height: 6px; margin-top: -3px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 15px 4px rgba(185,208,255,0.95);
}
@keyframes cometfly {
  0%   { transform: translate(-140px, -50px) rotate(19deg); opacity: 0; }
  9%   { opacity: 0.95; }
  60%  { opacity: 0.95; }
  76%  { transform: translate(820px, 240px) rotate(19deg); opacity: 0; }
  100% { transform: translate(820px, 240px) rotate(19deg); opacity: 0; }
}

/* ---- nebula: soft multicolour gas cloud, slowly drifting ---- */
.nebula {
  position: absolute;
  width: var(--nb, 600px); height: var(--nb, 600px);
  pointer-events: none;
  z-index: -1;
  border-radius: 50%;
  background:
    radial-gradient(42% 50% at 34% 40%, rgba(180,120,255,0.28), transparent 70%),
    radial-gradient(46% 42% at 66% 56%, rgba(110,160,255,0.26), transparent 72%),
    radial-gradient(36% 46% at 56% 30%, rgba(255,140,210,0.15), transparent 70%),
    radial-gradient(52% 52% at 48% 66%, rgba(90,200,255,0.16), transparent 72%);
  filter: blur(42px);
  mix-blend-mode: screen;
  opacity: 0.72;
  animation: nebuladrift 28s ease-in-out infinite alternate;
}
@keyframes nebuladrift { to { transform: translate(26px, -20px) scale(1.09) rotate(8deg); } }

/* ---- style cards: hold the cursor on one and its animation takes over ---- */
.style-card .fmedia img { transition: opacity 0.4s ease; }
.style-card .fmedia video.hoverclip {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.style-card.playing .fmedia video.hoverclip { opacity: 1; }
.style-card.playing .fmedia img { opacity: 0; }
.style-card .hint {
  position: absolute;
  right: 12px; top: 12px;
  z-index: 3;
  padding: 4px 11px;
  border-radius: 999px;
  font-family: "Inter", sans-serif;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: rgba(8, 12, 36, 0.62);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--ice);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease 0.45s;
}
.style-card:hover .hint { opacity: 1; }
.style-card.playing .hint { opacity: 0; transition-delay: 0s; }

/* ---- showcase sphere: 30 video tiles on one giant draggable 3D globe ---- */
.scw-stage {
  position: relative;
  height: 790px;
  margin-top: 26px;
  cursor: grab;
  touch-action: none;
}
.scw-stage:active { cursor: grabbing; }
.scw-tile {
  position: absolute;
  left: 50%; top: 50%;
  width: 236px;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 var(--glass-edge), 0 16px 44px rgba(2, 4, 24, 0.55);
  pointer-events: none;
  will-change: transform, opacity, filter;
}
.scw-tile video { width: 100%; height: 100%; object-fit: cover; display: block; }
.scw-tile.front {
  border-color: rgba(165, 192, 255, 0.55);
  box-shadow: inset 0 1px 0 var(--glass-edge), 0 0 26px rgba(105, 138, 255, 0.35), 0 16px 44px rgba(2, 4, 24, 0.55);
}
@media (max-width: 760px) { .scw-stage { height: 560px; } .scw-tile { width: 150px; } }

/* ---- hero intro (reversed): normal split by default; scrolling UP at the
   very top blows the thumbnail up to viewport centre. The thumbnail is LAID
   OUT at up to 1160px wide (≈ the FHD clip's native size) and scaled DOWN
   into the split slot, so the big state shows native resolution instead of a
   blurry upscale. ---- */
.hero-scroll { position: relative; }
@media (min-width: 901px) {
  /* compact hero: no 100vh stretch — content-sized with breathing room */
  .hero-scroll .hero-split {
    padding-top: 96px;
    padding-bottom: 28px;
    box-sizing: border-box;
  }
  .hero-scroll .hero-copy { will-change: transform, opacity; }
  .hero-scroll .hero-visual {
    will-change: transform;
    position: relative;
    z-index: 5;
    aspect-ratio: 16 / 9;
    transform: scale(0.54);   /* approximate; JS replaces with the exact fit */
  }
  /* Centred with explicit negative margins, NOT inset+margin:auto — CSS
     clamps auto margins to 0 for an absolute child WIDER than its container
     (it pinned the big thumb to the cell's left edge, which threw off both
     states). left/top 50% + calc margins centre it at any width, and no
     translate is used so the tilt transform stays free. */
  .hero-scroll .hero-visual .thumb3d {
    --bigw: min(78vw, 1160px);
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--bigw);
    aspect-ratio: 16 / 9;
    margin-left: calc(var(--bigw) / -2);
    margin-top: calc(var(--bigw) * -0.28125);   /* half of width · 9/16 */
  }
}

/* ---- cosmic divider: a quiet light line with a star drifting along it
   (replaced the claims marquee, which read as cheap) ---- */
.cosmic-divider {
  position: relative;
  height: 2px;
  max-width: min(1100px, 88vw);
  margin: 34px auto 26px;
  background: linear-gradient(90deg,
    transparent, rgba(150, 175, 255, 0.32) 28%,
    rgba(214, 226, 255, 0.55) 50%,
    rgba(150, 175, 255, 0.32) 72%, transparent);
}
.cosmic-divider::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 12%;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 12px 4px rgba(180, 200, 255, 0.9), 0 0 30px 10px rgba(110, 140, 255, 0.4);
  animation: divstar 8s ease-in-out infinite alternate;
}
@keyframes divstar { to { left: 88%; } }

/* ---- feature ring: rotatable faded OVAL carousel, icon cards (no videos) ---- */
.fring-stage, .feature-stage {
  position: relative;
  /* full-bleed: the ring owns the entire page width */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  height: 566px;
  margin-top: 34px;
  cursor: grab;
}
.fring-stage:active, .feature-stage:active { cursor: grabbing; }
.fring-card {
  position: absolute;
  left: 50%; top: 50%;
  width: 340px;
  /* uniform box: fixed height so short descriptions get the same card */
  height: 338px;
  box-sizing: border-box;
  margin-left: -170px;
  margin-top: -169px;
  padding: 27px 27px 29px;
  border-radius: var(--radius);
  /* ~90% opaque glass so the copy reads solid against the starfield.
     No backdrop-filter: at this opacity it is invisible but forces soft
     text rasterization on the composited cards. */
  background: linear-gradient(160deg, rgba(52, 66, 134, 0.88), rgba(16, 22, 62, 0.92));
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 var(--glass-edge), 0 24px 60px rgba(2, 4, 24, 0.5);
  text-align: left;
  will-change: transform, opacity;
  user-select: none;
}
.fring-card.front {
  border-color: rgba(170, 194, 255, 0.65);
  box-shadow: inset 0 1px 0 var(--glass-edge), 0 0 34px rgba(108, 140, 255, 0.35), 0 24px 60px rgba(2, 4, 24, 0.5);
}
.fring-card .ficon {
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  margin-bottom: 15px;
  border-radius: 13px;
  color: #d3ddff;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.14), rgba(120, 145, 255, 0.10));
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 var(--glass-edge);
}
.fring-card .ficon svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.fring-card h3 { margin-bottom: 9px; }
.fring-card p { font-size: 0.92rem; line-height: 1.6; }
.fring-arrow {
  position: absolute;
  top: 50%;
  z-index: 300;
  width: 46px; height: 46px;
  margin-top: -23px;
  border-radius: 50%;
  border: 1px solid var(--glass-border);
  background: rgba(16, 22, 58, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #dfe6ff;
  font-size: 1.05rem;
  cursor: pointer;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.fring-arrow:hover { border-color: rgba(170, 194, 255, 0.7); background: rgba(30, 40, 96, 0.7); }
.fring-arrow.prev { left: 28px; }
.fring-arrow.next { right: 28px; }
@media (max-width: 700px) { .fring-stage, .feature-stage { height: 510px; } .fring-card { width: 266px; height: 384px; margin-left: -133px; margin-top: -192px; } }

/* Special Presets coverflow: arrows sit toward the carousel's outer spread —
   past the first neighbour cards, inside the visible fan (max() keeps them
   on screen on narrow windows) */
[data-carousel-presets] .car-arrow.prev { left: max(16px, calc(50% - 520px)); right: auto; }
[data-carousel-presets] .car-arrow.next { right: max(16px, calc(50% - 520px)); left: auto; }

/* ---- vframe.filled: a placeholder frame that now holds a real clip ---- */
.vframe.filled {
  border-style: solid;
  position: relative;
  overflow: hidden;
  padding: 0;
}
.vframe.filled video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- founder avatar: the real photo fills the glass circle ---- */
.founder .ava { overflow: hidden; padding: 0; }
.founder .ava img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

/* ---- hero "Watch it work": workflow clip crossfades over the promo ---- */
.thumb3d .hero-art-alt {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--glass-border);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.55s ease;
}
.thumb3d.showalt .hero-art-alt { opacity: 1; }

/* ---- Animation Center lab: Resolve nest header + display-only buttons ---- */
.rl-nesthead {
  text-align: left;
  padding: 7px 10px 6px;
  font-family: "Inter", sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  color: #4cbb6c;
  border-bottom: 1px solid #232327;
}
.rl-setrow {
  display: flex;
  gap: 8px;
  padding: 8px 8px 4px;
}
.rl-setbtn {
  flex: 1;
  padding: 6px 0;
  border-radius: 4px;
  border: 1px solid #202024;
  background: #2e2e33;
  color: #d8d8dc;
  font-family: "Inter", sans-serif;
  font-size: 0.78rem;
  cursor: default;
}
.rl-seg.rl-static button { cursor: default; pointer-events: none; }

/* ---- reviews: user submitted cards + write a review modal ---- */
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
  margin-top: 30px;
}
.rv-empty { margin-top: 26px; color: var(--muted); font-size: 0.95rem; }
.rv-overlay {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(4, 6, 24, 0.66);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.rv-modal {
  width: min(480px, 92vw);
  padding: 30px 30px 26px;
  border-radius: var(--radius);
  border: 1px solid var(--glass-border);
  background: linear-gradient(160deg, rgba(52, 66, 134, 0.92), rgba(14, 20, 58, 0.96));
  box-shadow: inset 0 1px 0 var(--glass-edge), 0 40px 100px rgba(2, 4, 24, 0.7);
  text-align: left;
}
.rv-modal h3 { margin-bottom: 16px; }
.rv-field { margin-bottom: 14px; }
.rv-field label { display: block; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.rv-field input, .rv-field textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 14px;
  border-radius: 10px;
  border: 1px solid var(--glass-border);
  background: rgba(8, 12, 36, 0.55);
  color: var(--white);
  font-family: "Inter", sans-serif;
  font-size: 0.95rem;
}
.rv-field textarea { min-height: 92px; resize: vertical; }
.rv-field input:focus, .rv-field textarea:focus { outline: none; border-color: rgba(165, 192, 255, 0.65); }
.rv-rater {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: rgba(8, 12, 36, 0.55);
  width: fit-content;
}
.rv-stars { display: flex; gap: 4px; }
.rv-stars button {
  background: none;
  border: none;
  font-size: 1.9rem;
  line-height: 1;
  color: rgba(255, 255, 255, 0.22);
  cursor: pointer;
  padding: 0 3px;
  transition: color 0.12s ease, transform 0.12s ease;
}
.rv-stars button:hover { transform: scale(1.22) rotate(8deg); }
.rv-stars button.on { color: #f5c542; text-shadow: 0 0 14px rgba(245, 197, 66, 0.55); }
.rv-starlbl { font-size: 0.86rem; color: var(--muted); min-width: 74px; }
.rv-mediarow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rv-medbtn {
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px dashed var(--glass-border);
  background: rgba(8, 12, 36, 0.4);
  color: var(--ice);
  font-family: "Inter", sans-serif;
  font-size: 0.85rem;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.rv-medbtn:hover { border-color: rgba(165, 192, 255, 0.65); background: rgba(16, 24, 64, 0.6); }
.rv-preview {
  position: relative;
  width: 118px;
  aspect-ratio: 16 / 10;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--glass-border);
}
.rv-preview img, .rv-preview video { width: 100%; height: 100%; object-fit: cover; display: block; }
.rv-remove {
  position: absolute;
  top: 4px; right: 4px;
  z-index: 2;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: none;
  background: rgba(4, 6, 24, 0.75);
  color: #fff;
  font-size: 0.7rem;
  cursor: pointer;
}
.reviews-lines { display: flex; flex-direction: column; gap: 20px; margin-top: 30px; }
.review-card { position: relative; }
.review-card .rmedia {
  margin: 16px -26px -24px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-top: 1px solid var(--glass-border);
  /* the media bleeds to the card's bottom edge, so it must carry the
     card's rounded bottom corners itself */
  border-radius: 0 0 var(--radius) var(--radius);
}
.review-card .rmedia img, .review-card .rmedia video { width: 100%; height: 100%; object-fit: cover; display: block; }
.rv-actions { display: flex; gap: 12px; margin-top: 18px; justify-content: flex-end; }
.rv-err { color: #ff9d9d; font-size: 0.85rem; margin-top: 10px; display: none; }

/* ---- remove-your-review button on posted cards ---- */
.rv-del {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 5;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--glass-border);
  background: rgba(4, 6, 24, 0.65);
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.72rem;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.rv-del:hover { background: rgba(120, 30, 40, 0.8); border-color: rgba(255, 140, 150, 0.6); color: #fff; }