/* Night (2026-10-15): the "Linear / Vercel night" layer Richard chose after
   the flat version read as "so basic... not premium... i'm not wow'd".
   Loaded after styles.css, home.css and stories.css on the home and
   comparison pages. It adds light and depth only: a grain on the ground,
   soft light behind the product, light-catching gradient edges on product
   cards, gradient-filled headings, a glowing primary button, a glass nav once
   scrolled, word-by-word heading reveals and the tilted hero product (motion
   in night.js). Allowed by the taste skill's "flat is not premium" override
   (SKILL.md, 2026-10-15); still no violet, no blobs, no fake dashboards. */

body.home {
  --ground: #08080a;
  --edge: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04) 55%, rgba(198, 242, 78, 0.14)); /* taste-skill-ignore: night override (SKILL.md 2026-10-15) */
  --t-h2: clamp(38px, 4.2vw, 64px);
  background: var(--ground);
}
@media (max-width: 900px) { body.home { --t-h2: clamp(30px, 7.6vw, 44px); } }

/* Grain: a fixed, faint noise over the whole ground so black reads as material. */
body.home::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Nav: solid at the top, glass once the page moves under it. */
.home .nav.nav-scrolled {
  background: rgba(8, 8, 10, 0.72); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); /* taste-skill-ignore: night override, the one glass surface */
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06); /* taste-skill-ignore: night override */
}

/* ---------- Headings: one gradient fill, light to grey ---------- */
.home .n-hero h1, .home .n-split, .vs .vs-head h1, .vs .vs-h2 {
  background: linear-gradient(180deg, #ffffff 30%, #a1a1aa 100%); /* taste-skill-ignore: night override */
  -webkit-background-clip: text; background-clip: text; color: transparent; /* taste-skill-ignore: night override (SKILL.md 2026-10-15) */
}
/* Split headings: each word carries the fill, so words can move on their own. */
.home .n-split.is-split { background: none; color: inherit; }
.n-split .w {
  display: inline-block; padding-bottom: 0.08em;
  background: linear-gradient(180deg, #ffffff 30%, #a1a1aa 100%); /* taste-skill-ignore: night override */
  -webkit-background-clip: text; background-clip: text; color: transparent; /* taste-skill-ignore: night override (SKILL.md 2026-10-15) */
}
@keyframes n-word { from { opacity: 0; transform: translateY(0.45em); filter: blur(8px); } }
.motion .n-hero h1 .w { animation: n-word 800ms var(--out) backwards; animation-delay: calc(80ms + var(--w) * 60ms); }
.motion .n-split.rv .w { opacity: 0; transform: translateY(0.45em); filter: blur(8px); transition: opacity 600ms var(--out), transform 700ms var(--out), filter 600ms var(--out); transition-delay: calc(var(--w) * 45ms); }
.motion .n-split.rv.in .w { opacity: 1; transform: none; filter: none; }
/* The split heading itself no longer fades as a block; its words do. */
.motion .n-split.rv { opacity: 1; transform: none; filter: none; }

/* ---------- Hero: centred, then the real product, large ---------- */
/* Light may spill past a section, never past the page: clip, not hidden, so sticky still works. */
.home main { overflow-x: clip; }
.home main .n-hero { display: block; min-height: 0; padding-top: 80px; text-align: center; overflow: visible; }
.n-hero::before {
  /* Light from above: a wide, faint beam behind the headline. */
  content: ""; position: absolute; left: 50%; top: -120px; width: min(1100px, 120vw); height: 640px; transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(50% 50% at 50% 30%, rgba(255, 255, 255, 0.07), transparent 70%); /* taste-skill-ignore: night override */
}
.n-hero-copy { position: relative; max-width: 980px; margin: 0 auto; }
.home .n-hero h1 { font-size: clamp(48px, 7vw, 104px); line-height: 0.98; letter-spacing: -0.045em; max-width: 14ch; margin: 0 auto; }
.n-hero .h-lede { margin: 28px auto 0; max-width: 44ch; color: #d4d4d8; }
.n-hero .h-actions { justify-content: center; margin-top: 36px; gap: 12px; }
.n-hero .h-terms { margin-top: 18px; }

.n-shot { position: relative; margin: 64px auto 0; max-width: 1180px; perspective: 1800px; }
.n-shot::before {
  /* The glow the product sits in. */
  content: ""; position: absolute; inset: 8% 6% -6%; z-index: -1; pointer-events: none; filter: blur(60px);
  background: radial-gradient(60% 55% at 50% 40%, rgba(198, 242, 78, 0.22), rgba(198, 242, 78, 0.04) 60%, transparent 75%); /* taste-skill-ignore: night override */
}
.n-shot-frame {
  border-radius: 18px; padding: 8px; transform-origin: 50% 0%;
  border: 1px solid transparent; /* taste-skill-ignore: night override (SKILL.md 2026-10-15) */
  background: linear-gradient(#0d0d10, #0d0d10) padding-box, var(--edge) border-box; /* taste-skill-ignore: night override, light-catching edge */
  box-shadow: 0 50px 120px -40px rgba(0, 0, 0, 0.9), 0 30px 80px -50px rgba(198, 242, 78, 0.35); /* taste-skill-ignore: night override */
}
.n-shot-frame img { display: block; width: 100%; height: auto; border-radius: 12px; }
/* Tilted back until night.js straightens it on scroll. */
.motion .n-shot-frame { transform: rotateX(22deg) scale(0.92); }

/* ---------- Flow section ---------- */
.home main .n-flowsec { text-align: center; }
.n-flowsec h2 { font-size: var(--t-h2); line-height: 1.04; letter-spacing: -0.035em; max-width: 18ch; margin: 0 auto; }
.n-sub { margin: 20px auto 0; max-width: 46ch; font-size: var(--t-m); color: #a1a1aa; }
.home .n-flowsec .h-stage.h-flow { margin: 56px auto 0; max-width: 1100px; text-align: left; }

/* ---------- Product cards: light-catching edge, glow beneath, cursor light ---------- */
.home :is(.order, .chat, .frag-card, .src-panel, .h-price-grid, .h-stage.h-flow, .h-faq-pane, .n-card),
.vs :is(.vs-two, .vs-video video, .vs-shot img) {
  position: relative;
  border: 1px solid transparent; /* taste-skill-ignore: night override (SKILL.md 2026-10-15) */
  background: linear-gradient(var(--card-bg, #0f0f11), var(--card-bg, #0f0f11)) padding-box, var(--edge) border-box; /* taste-skill-ignore: night override */
  box-shadow: 0 40px 100px -50px rgba(198, 242, 78, 0.16), 0 20px 50px -30px rgba(0, 0, 0, 0.8); /* taste-skill-ignore: night override */
}
.home :is(.h-price-grid, .h-stage.h-flow, .h-faq-pane), .vs .vs-two { --card-bg: #111114; }
.home .chat, .home .order { --card-bg: #0e0e11; }
@media (hover: hover) and (pointer: fine) {
  .home :is(.order, .chat, .frag-card, .src-panel, .h-price-grid), .vs .vs-two { overflow: hidden; }
  .home :is(.order, .chat, .frag-card, .src-panel, .h-price-grid)::after, .vs .vs-two::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; opacity: 0;
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(198, 242, 78, 0.07), transparent 60%); /* taste-skill-ignore: night override, cursor light */
    transition: opacity 250ms var(--out);
  }
  .home :is(.order, .chat, .frag-card, .src-panel, .h-price-grid):hover::after, .vs .vs-two:hover::after { opacity: 1; }
}

/* ---------- Buttons ---------- */
.home .btn-primary {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 0 0 1px rgba(198, 242, 78, 0.5), 0 10px 30px -10px rgba(198, 242, 78, 0.55); /* taste-skill-ignore: night override */
  transition: transform 160ms var(--out), box-shadow 250ms var(--out), background 150ms var(--out);
}
@media (hover: hover) and (pointer: fine) {
  .home .btn-primary:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 0 0 1px rgba(198, 242, 78, 0.7), 0 16px 40px -10px rgba(198, 242, 78, 0.7); } /* taste-skill-ignore: night override */
}
.home .n-ghost {
  color: var(--ink); border: 1px solid transparent; /* taste-skill-ignore: night override (SKILL.md 2026-10-15) */
  background: linear-gradient(#141417, #141417) padding-box, var(--edge) border-box; /* taste-skill-ignore: night override */
  transition: transform 160ms var(--out), background 150ms var(--out);
}
.home .n-ghost:hover { background: linear-gradient(#1c1c20, #1c1c20) padding-box, var(--edge) border-box; } /* taste-skill-ignore: night override */
.home .n-ghost:active { transform: scale(0.98); }

/* ---------- Section light: a faint lime pool behind key sections ---------- */
.home main :is(.h-same, .h-price, .h-agents) { isolation: isolate; }
.home main :is(.h-same, .h-price, .h-agents)::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none; right: -10%; top: 20%; width: 60%; height: 70%; filter: blur(40px);
  background: radial-gradient(50% 50% at 50% 50%, rgba(198, 242, 78, 0.06), transparent 70%); /* taste-skill-ignore: night override */
}
.home main section { position: relative; }

/* ---------- Comparison page ---------- */
.vs .vs-head h1 { padding-bottom: 0.06em; }

@media (max-width: 900px) {
  .home main .n-hero { padding-top: 56px; }
  .home .n-hero h1 { font-size: clamp(34px, 9.4vw, 52px); max-width: none; }
  .n-hero .h-actions { flex-direction: column; align-items: stretch; max-width: 320px; margin-left: auto; margin-right: auto; }
  .n-hero .h-actions .btn { text-align: center; }
  .n-shot { margin-top: 56px; }
  .n-shot-frame { padding: 5px; border-radius: 14px; }
  .n-shot-frame img { border-radius: 10px; }
  .motion .n-shot-frame { transform: rotateX(14deg) scale(0.96); }
}

@media (prefers-reduced-motion: reduce) {
  .motion .n-shot-frame { transform: none; }
}

/* Lenis (lenis/dist/lenis.css, 1.3.11): native scroll stays the source of truth. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }