/* ============================================================
   LUMOSCROLL — style.css (v2)
   ============================================================ */

/* 1 · CUSTOM PROPERTIES
   ──────────────────────────────────────────────────────────── */
:root {
  --bg-base:      #0B0F17;
  --bg-raised:    #10151F;
  --bg-alt:       #0D1320;
  --bg-card:      #151B28;
  --bg-inset:     #10151F;
  --bg-code:      #0A0E17;

  --text-primary:    #F7FAFD;
  --text-secondary:  #C2CBDC;
  --text-tertiary:   #8B96AC;
  --text-code:       #D6ECFF;

  --border:         #26324A;
  --border-subtle:  #1B2436;

  --accent:               #38BDF8;
  --accent-secondary:     #818CF8;
  --accent-hover:         #0EA5E9;
  --accent-subtle:        rgba(56, 189, 248, 0.12);
  --accent-subtle-border: rgba(56, 189, 248, 0.32);
  --glow-accent:          rgba(56, 189, 248, 0.28);

  --success:  #4ADE80;
  --warning:  #FB923C;

  --logo-lumo:   #38BDF8;
  --logo-scroll: #F7FAFD;

  --grad-a: #38BDF8;
  --grad-b: #A78BFA;

  --font-logo:    'Glacial Indifference', 'Glacial Indifference 2', sans-serif;
  --font-heading: 'Sora', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'Fira Code', monospace;

  --text-hero:    clamp(2.8rem, 6vw, 5rem);
  --text-h1:      clamp(2.2rem, 4vw, 3.5rem);
  --text-h2:      clamp(1.6rem, 3vw, 2.4rem);
  --text-h3:      clamp(1.1rem, 2vw, 1.4rem);
  --text-display: clamp(1.05rem, 1.8vw, 1.25rem);
  --text-body-lg: 1.0625rem;
  --text-body:    1rem;
  --text-body-sm: 0.875rem;
  --fs-code:      0.875rem;
  --text-label:   0.6875rem;

  --lh-hero:    1.06;
  --lh-heading: 1.15;
  --lh-body:    1.72;
  --lh-ui:      1.45;

  --ls-hero:  -0.03em;
  --ls-h2:    -0.02em;
  --ls-h3:    -0.01em;
  --ls-label:  0.1em;
  --ls-code:  -0.01em;

  --r-sm:  5px;
  --r-md:  10px;
  --r-lg:  14px;
  --r-xl:  20px;
}

/* 2 · RESET
   ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
body {
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; }

/* 3 · FOCUS
   ──────────────────────────────────────────────────────────── */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }

/* 4 · TYPOGRAPHY
   ──────────────────────────────────────────────────────────── */
h1, h2, h3 { font-family: var(--font-heading); color: var(--text-primary); }
h1 { font-size: var(--text-h1); font-weight: 700; letter-spacing: var(--ls-hero); line-height: var(--lh-hero); }
h2 { font-size: var(--text-h2); font-weight: 600; letter-spacing: var(--ls-h2); line-height: var(--lh-heading); }
h3 { font-size: var(--text-h3); font-weight: 600; letter-spacing: var(--ls-h3); line-height: var(--lh-heading); }

.g-text {
  background: linear-gradient(120deg, var(--grad-a) 0%, var(--grad-b) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  display: inline;
}

.eyebrow-p { font-family: var(--font-body); font-size: 1.0625rem; color: var(--text-secondary); line-height: 1.75; margin-bottom: 1rem; }
.eyebrow-p:last-child { margin-bottom: 0; }
.eyebrow-p strong { color: var(--text-primary); font-weight: 600; }

/* 5 · LAYOUT
   ──────────────────────────────────────────────────────────── */
.container { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 clamp(1.5rem, 5vw, 4rem); }
.container--narrow { max-width: 780px; margin: 0 auto; }
.container--mid    { max-width: 960px; margin: 0 auto; }
.container--tight  { max-width: 660px; margin: 0 auto; }
.container--620    { max-width: 620px; margin: 0 auto; }
.container--740    { max-width: 740px; margin: 0 auto; }

section { padding: clamp(4rem, 8vw, 7rem) 0; }
.page-content { padding-top: 60px; }

/* 6 · SECTION REVEAL
   ──────────────────────────────────────────────────────────── */
.section-reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.section-reveal.visible { opacity: 1; transform: translateY(0); }

/* 7 · NAVIGATION
   ──────────────────────────────────────────────────────────── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; height: 60px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(1.5rem, 5vw, 4rem);
  background: transparent;
  box-shadow: 0 1px 0 transparent;
  transition: background 0.35s ease, box-shadow 0.35s ease;
  z-index: 100;
}
.nav.scrolled {
  background: rgba(11, 15, 23, 0.92);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 var(--border-subtle);
}
.nav-links { display: flex; gap: 2rem; align-items: center; }
.nav-links a { font-family: var(--font-body); font-size: 0.875rem; color: var(--text-secondary); letter-spacing: 0.01em; transition: color 0.2s; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--text-primary); }
.nav-right { display: flex; align-items: center; gap: 1.25rem; }

.nav-hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; background: none; border: none; padding: 4px; }
.nav-hamburger span { display: block; width: 22px; height: 2px; background: var(--text-secondary); border-radius: 1px; transition: transform 0.3s, opacity 0.3s; }

.nav-mobile {
  display: none; position: fixed; inset: 0; background: var(--bg-raised); z-index: 200;
  flex-direction: column; align-items: center; justify-content: center; gap: 2.5rem;
}
.nav-mobile.open { display: flex; }
.nav-mobile a { font-family: var(--font-heading); font-size: 1.6rem; font-weight: 600; color: var(--text-primary); transition: color 0.2s; }
.nav-mobile a:hover { color: var(--accent); }
.nav-mobile-close { position: absolute; top: 1.25rem; right: clamp(1.5rem, 5vw, 4rem); background: none; border: none; font-size: 2rem; line-height: 1; cursor: pointer; color: var(--text-secondary); transition: color 0.2s; }
.nav-mobile-close:hover { color: var(--text-primary); }

/* 8 · LOGO — interactive, kept exactly as designed. Do not alter. */
.logo {
  font-family: var(--font-logo); font-size: 1.35rem; font-weight: 700; letter-spacing: -0.01em;
  text-decoration: none; line-height: 1; white-space: nowrap; display: inline-flex; align-items: baseline;
}
.logo .lumo   { color: var(--logo-lumo); }
.logo .scroll { color: var(--logo-scroll); }
.logo-umo, .logo-croll {
  display: inline-block; overflow: hidden; vertical-align: baseline; max-width: 5em; opacity: 1;
  transition: opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1), max-width 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav.scrolled .logo-umo, .nav.scrolled .logo-croll { opacity: 0; max-width: 0; }
.logo-sep {
  color: var(--logo-lumo); display: inline-block; opacity: 0; max-width: 0; overflow: hidden; padding: 0; transform: scale(0.2);
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), max-width 0.22s cubic-bezier(0.16, 1, 0.3, 1), padding 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.logo:hover .logo-sep, .logo:focus .logo-sep { opacity: 1; max-width: 1.2em; padding: 0 0.18em; transform: scale(1); }
.nav.scrolled .logo .logo-sep, .nav.scrolled .logo:hover .logo-sep, .nav.scrolled .logo:focus .logo-sep {
  opacity: 0 !important; max-width: 0 !important; padding: 0 !important; transform: scale(0.2) !important;
}
footer .logo { font-size: 1.1rem; }

/* 9 · BUTTONS
   ──────────────────────────────────────────────────────────── */
.btn-install {
  display: inline-block; font-family: var(--font-body); font-size: 0.875rem; font-weight: 600;
  background: var(--accent); color: #06121B; border: none; padding: 9px 20px; border-radius: var(--r-sm);
  cursor: pointer; text-decoration: none; transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
  white-space: nowrap; box-shadow: 0 0 20px var(--glow-accent);
}
.btn-install:hover { background: var(--accent-hover); color: #06121B; box-shadow: 0 0 30px rgba(56,189,248,0.45); transform: translateY(-1px); }
.btn-install--lg { font-size: 1rem; font-weight: 700; padding: 13px 32px; }
.btn-install--full { display: block; width: 100%; text-align: center; }

.btn-ghost {
  display: inline-block; font-family: var(--font-body); font-size: var(--text-body); color: var(--text-secondary);
  background: none; border: 1px solid var(--border); padding: 12px 28px; border-radius: var(--r-sm);
  cursor: pointer; text-decoration: none; transition: color 0.2s, border-color 0.2s;
}
.btn-ghost:hover { color: var(--text-primary); border-color: var(--text-tertiary); }

.btn-link { display: inline; font-family: var(--font-body); font-size: var(--text-body); font-weight: 600; color: var(--accent); text-decoration: none; transition: color 0.2s; }
.btn-link:hover { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 3px; }

.btn-outline {
  display: inline-block; font-family: var(--font-body); font-size: 0.9375rem; font-weight: 600; background: transparent;
  color: var(--accent); border: 1px solid var(--accent-subtle-border); padding: 12px 28px; border-radius: var(--r-sm);
  cursor: pointer; text-decoration: none; transition: background 0.2s, border-color 0.2s; white-space: nowrap; text-align: center;
}
.btn-outline:hover { background: var(--accent-subtle); border-color: var(--accent); }
.btn-outline--full { display: block; width: 100%; }
.btn-pair-divider { font-family: var(--font-body); font-size: 0.75rem; color: var(--text-tertiary); text-align: center; margin: 0.625rem 0; }

/* 10 · SECTION LABEL
   ──────────────────────────────────────────────────────────── */
.section-label { display: block; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--accent); margin-bottom: 1.25rem; }

/* 11 · CARDS
   ──────────────────────────────────────────────────────────── */
.card { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--r-lg); padding: 24px; transition: border-color 0.25s, box-shadow 0.25s; }
.card:hover { border-color: rgba(56,189,248,0.32); box-shadow: 0 0 32px rgba(56,189,248,0.1), 0 2px 12px rgba(0,0,0,0.3); }
.card h3 { margin-bottom: 0.75rem; color: var(--text-primary); }
.card p { font-family: var(--font-body); font-size: var(--text-body); color: var(--text-secondary); line-height: var(--lh-body); }
.card .card-icon { font-size: 1.35rem; margin-bottom: 0.875rem; display: block; }

/* 12 · CODE / DATA BLOCKS
   ──────────────────────────────────────────────────────────── */
.code-block, .data-table {
  background: var(--bg-code); color: var(--text-code); font-family: var(--font-mono); font-size: var(--fs-code);
  letter-spacing: var(--ls-code); line-height: 1.65; padding: 1.25rem 1.5rem; border-radius: var(--r-md);
  border: 1px solid var(--border); overflow-x: auto; white-space: pre;
}

/* 13 · SPEC LIST
   ──────────────────────────────────────────────────────────── */
.spec-list { border-top: 1px solid var(--border-subtle); margin-top: 2.5rem; }
.spec-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem; padding: 0.9rem 0; border-bottom: 1px solid var(--border-subtle); font-family: var(--font-mono); font-size: 0.8125rem; }
.spec-row-name { color: var(--text-primary); }
.spec-row-val { color: var(--text-secondary); text-align: right; white-space: nowrap; }

/* 14 · IDEA COMPARE
   ──────────────────────────────────────────────────────────── */
.idea-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 2.5rem; }
.idea-panel { border: 1px solid var(--border-subtle); border-radius: var(--r-lg); padding: 1.75rem; background: var(--bg-inset); }
.idea-panel--positive { border-color: rgba(56,189,248,0.4); background: rgba(56,189,248,0.06); }
.idea-panel-label { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 0.75rem; display: block; }
.idea-panel--positive .idea-panel-label { color: var(--accent); }
.idea-panel h4 { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.6rem; }
.idea-panel p { font-family: var(--font-body); font-size: 0.9375rem; color: var(--text-secondary); line-height: var(--lh-body); }

/* 15 · NUMBERED STEPS
   ──────────────────────────────────────────────────────────── */
.step-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; margin-top: 2.5rem; }
.step-card { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--r-lg); padding: 1.75rem; }
.step-num { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--accent); margin-bottom: 0.9rem; display: block; }
.step-card h3 { margin-bottom: 0.6rem; }
.step-card p { color: var(--text-secondary); font-size: 0.9375rem; line-height: var(--lh-body); }
.step-card code { font-family: var(--font-mono); font-size: 0.85em; background: var(--bg-code); border: 1px solid var(--border-subtle); padding: 1px 6px; border-radius: 3px; color: var(--text-code); }

/* 16 · CHECKLIST
   ──────────────────────────────────────────────────────────── */
.checklist { display: flex; flex-direction: column; gap: 1.5rem; margin-top: 2.25rem; }
.checklist-item { display: flex; gap: 1rem; align-items: flex-start; }
.checklist-mark { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: rgba(74,222,128,0.14); color: var(--success); display: flex; align-items: center; justify-content: center; font-size: 0.8rem; margin-top: 0.15rem; }
.checklist-item strong { font-family: var(--font-heading); font-weight: 600; color: var(--text-primary); }
.checklist-item p { color: var(--text-secondary); font-size: 0.9375rem; line-height: var(--lh-body); margin-top: 0.15rem; }

.permission-list { display: flex; flex-direction: column; gap: 0; margin-top: 1.5rem; border-top: 1px solid var(--border-subtle); }
.permission-item { padding: 1.1rem 0; border-bottom: 1px solid var(--border-subtle); }
.permission-name { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--accent); margin-bottom: 0.35rem; }
.permission-item p { color: var(--text-secondary); font-size: 0.9375rem; line-height: var(--lh-body); }

/* 17 · FAQ ACCORDION
   ──────────────────────────────────────────────────────────── */
.faq-list { border-top: 1px solid var(--border-subtle); }
.faq-item { border-bottom: 1px solid var(--border-subtle); }
.faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: none; border: none; text-align: left; padding: 1.4rem 0; cursor: pointer; color: var(--text-primary); font-family: var(--font-heading); font-size: 1.0625rem; font-weight: 600; }
.faq-q-icon { font-family: var(--font-mono); color: var(--text-tertiary); font-size: 1.1rem; flex-shrink: 0; transition: transform 0.25s ease; }
.faq-item.open .faq-q-icon { transform: rotate(45deg); color: var(--accent); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
.faq-a-inner { padding: 0 0 1.5rem; color: var(--text-secondary); font-size: var(--text-body); line-height: var(--lh-body); max-width: 640px; }
.faq-a-inner a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.faq-a-inner code { font-family: var(--font-mono); font-size: 0.85em; background: var(--bg-card); border: 1px solid var(--border-subtle); padding: 1px 6px; border-radius: 3px; }

.qa-item { padding: 1.5rem 0; border-top: 1px solid var(--border-subtle); }
.qa-item:last-child { border-bottom: 1px solid var(--border-subtle); }
.qa-q { font-family: var(--font-body); font-size: 1.0625rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.5rem; }
.qa-a { font-family: var(--font-body); font-size: var(--text-body); color: var(--text-secondary); line-height: var(--lh-body); }
.qa-a a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.qa-a a:hover { color: var(--accent-hover); }
.qa-code { font-family: var(--font-mono); font-size: 0.85em; background: var(--bg-card); border: 1px solid var(--border-subtle); padding: 1px 6px; border-radius: 3px; }

/* 18 · MOBILE NOTE
   ──────────────────────────────────────────────────────────── */
.mobile-note { display: none; font-family: var(--font-body); font-size: 0.75rem; color: var(--text-tertiary); margin-top: 0.75rem; text-align: center; line-height: var(--lh-ui); }
@media (pointer: coarse), (max-width: 767px) { .mobile-note { display: block; } }

/* 19 · FOOTER
   ──────────────────────────────────────────────────────────── */
footer { background: var(--bg-raised); border-top: 1px solid var(--border-subtle); padding: clamp(3rem, 6vw, 4.5rem) 0; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1.5fr; gap: 3rem; align-items: start; }
.footer-tagline { font-family: var(--font-body); font-size: 0.8125rem; color: var(--text-tertiary); margin-top: 0.75rem; line-height: var(--lh-body); max-width: 240px; }
.footer-nav-list { display: flex; flex-direction: column; gap: 0.75rem; }
.footer-nav-list a { font-family: var(--font-body); font-size: 0.875rem; color: var(--text-secondary); transition: color 0.2s; }
.footer-nav-list a:hover { color: var(--text-primary); }
.footer-legal { font-family: var(--font-body); font-size: 0.75rem; color: var(--text-tertiary); line-height: 1.9; }
.footer-legal a { color: var(--text-secondary); text-decoration: underline; text-underline-offset: 2px; }
.footer-legal a:hover { color: var(--text-primary); }
.footer-bottom-strip { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border-subtle); font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; }

/* 20 · PILLS
   ──────────────────────────────────────────────────────────── */
.pill { display: inline-block; font-family: var(--font-body); font-size: 0.75rem; font-weight: 500; background: var(--bg-card); border: 1px solid var(--border-subtle); color: var(--text-secondary); padding: 7px 14px; border-radius: var(--r-xl); white-space: nowrap; }
.pill-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }

/* 21 · HERO
   ──────────────────────────────────────────────────────────── */
.hero-section { min-height: 100vh; display: flex; align-items: center; position: relative; overflow: hidden; }
.hero-glow { position: absolute; top: -10%; left: 50%; transform: translateX(-50%); width: min(900px, 120vw); height: 600px; background: radial-gradient(ellipse at 50% 0%, rgba(56,189,248,0.16) 0%, rgba(56,189,248,0.05) 35%, transparent 65%); pointer-events: none; }
.hero-glow-2 { position: absolute; top: 20%; left: 62%; width: 500px; height: 500px; background: radial-gradient(ellipse at 50% 50%, rgba(167,139,250,0.09) 0%, transparent 60%); pointer-events: none; }
.hero-inner { position: relative; z-index: 1; padding: clamp(6.5rem, 11vw, 8.5rem) clamp(1.5rem, 5vw, 4rem) clamp(4rem, 8vw, 6rem); width: 100%; max-width: 1180px; margin: 0 auto; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 440px); gap: clamp(2.5rem, 5vw, 5rem); align-items: center; }

.hero-eyebrow { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--text-tertiary); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 1.75rem; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.eyebrow-changelog-link { display: inline-flex; align-items: center; gap: 0.5rem; padding: 4px 12px 4px 8px; border: 1px solid rgba(56,189,248,0.35); border-radius: 20px; background: rgba(56,189,248,0.1); font-family: var(--font-mono); font-size: 0.6875rem; color: var(--accent); letter-spacing: 0.06em; text-decoration: none; transition: background 0.15s, border-color 0.15s; }
.eyebrow-changelog-link:hover { background: rgba(56,189,248,0.18); border-color: rgba(56,189,248,0.55); }
.eyebrow-new-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex-shrink: 0; animation: pulse-dot 2.4s ease-in-out infinite; }
.eyebrow-arrow { opacity: 0.7; transition: transform 0.15s; }
.eyebrow-changelog-link:hover .eyebrow-arrow { transform: translateX(2px); opacity: 1; }
@keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.hero-section h1 { font-family: var(--font-heading); font-size: var(--text-hero); font-weight: 700; letter-spacing: var(--ls-hero); line-height: var(--lh-hero); margin-bottom: 1.5rem; }
.hero-h1-line2 { display: block; background: linear-gradient(120deg, var(--grad-a) 0%, var(--grad-b) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.hero-subhead { font-family: var(--font-body); font-size: clamp(1.0625rem, 1.8vw, 1.2rem); color: var(--text-secondary); line-height: 1.68; margin-bottom: 1.75rem; max-width: 560px; }
.hero-cta-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.hero-cta-note { font-family: var(--font-body); font-size: 0.75rem; color: var(--text-tertiary); margin-top: 1rem; letter-spacing: 0.01em; }

@media (max-width: 991px) { .hero-grid { grid-template-columns: 1fr; } }
@media (max-width: 767px) {
  .hero-section h1 { font-size: clamp(2rem, 8vw, 2.8rem); }
  .hero-cta-row { flex-direction: column; align-items: stretch; }
  .hero-cta-row .btn-install--lg, .hero-cta-row .btn-ghost { text-align: center; }
}

/* 22 · ATTENTION LOG — hero widget, replaces the hold-to-read demo.
   A live-looking terminal feed of classification events. Auto-plays,
   pausable. Mirrors the actual stored-record format used elsewhere
   on the site, so it reads as real rather than decorative. */
.log-widget { background: var(--bg-code); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,0.45), 0 0 50px rgba(56,189,248,0.08); }
.log-widget-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: var(--bg-raised); border-bottom: 1px solid var(--border-subtle); }
.log-widget-title-group { display: flex; align-items: center; gap: 10px; }
.log-dots { display: flex; gap: 5px; }
.log-dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--border); }
.log-widget-title { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-tertiary); }
.log-pause-btn { background: none; border: 1px solid var(--border); color: var(--text-secondary); font-family: var(--font-mono); font-size: 0.6875rem; padding: 4px 10px; border-radius: 20px; cursor: pointer; display: flex; align-items: center; gap: 5px; transition: border-color 0.2s, color 0.2s; }
.log-pause-btn:hover { border-color: var(--text-tertiary); color: var(--text-primary); }
.log-live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success); animation: pulse-dot 1.6s ease-in-out infinite; }
.log-pause-btn.paused .log-live-dot { background: var(--text-tertiary); animation: none; }

.log-body { height: 232px; overflow: hidden; position: relative; padding: 10px 0; }
.log-body::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 20px; background: linear-gradient(180deg, var(--bg-code), transparent); z-index: 2; pointer-events: none; }
.log-lines { display: flex; flex-direction: column; justify-content: flex-end; min-height: 100%; }
.log-line { display: flex; align-items: baseline; gap: 10px; padding: 6px 16px; font-family: var(--font-mono); font-size: 0.75rem; opacity: 0; transform: translateY(6px); animation: log-line-in 0.4s ease forwards; white-space: nowrap; overflow: hidden; }
@keyframes log-line-in { to { opacity: 1; transform: translateY(0); } }
.log-line-time { color: var(--text-tertiary); flex-shrink: 0; }
.log-line-platform { color: var(--text-secondary); flex-shrink: 0; width: 78px; overflow: hidden; text-overflow: ellipsis; }
.log-line-detail { color: var(--text-tertiary); flex-shrink: 0; }
.log-line-topic { color: var(--accent); flex-shrink: 0; }
.log-line-sentiment { flex-shrink: 0; }
.log-line-sentiment.positive { color: var(--success); }
.log-line-sentiment.negative { color: var(--warning); }
.log-line-sentiment.neutral { color: var(--text-tertiary); }
.log-line.skip .log-line-detail { color: var(--text-tertiary); font-style: italic; }

.log-footer { display: flex; border-top: 1px solid var(--border-subtle); }
.log-stat { flex: 1; text-align: center; padding: 12px 8px; border-right: 1px solid var(--border-subtle); }
.log-stat:last-child { border-right: none; }
.log-stat-num { display: block; font-family: var(--font-mono); font-size: 1.05rem; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.log-stat-label { font-family: var(--font-mono); font-size: 0.625rem; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.04em; }
.hero-widget-col { display: flex; flex-direction: column; min-width: 0; }
.log-caption { text-align: center; font-family: var(--font-body); font-size: 0.75rem; color: var(--text-tertiary); margin-top: 0.85rem; line-height: var(--lh-ui); }

/* 23 · FEATURE / IDEA / HARD-PART SECTIONS
   ──────────────────────────────────────────────────────────── */
.two-col { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start; }
.two-col--reverse { grid-template-columns: 1.15fr 0.85fr; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 2.5rem; }

@media (max-width: 991px) {
  .two-col, .two-col--reverse { grid-template-columns: 1fr; }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .step-grid { grid-template-columns: 1fr; }
  .idea-compare { grid-template-columns: 1fr; }
}
@media (max-width: 640px) { .feature-grid { grid-template-columns: 1fr; } }

/* 24 · VIDEOS
   ──────────────────────────────────────────────────────────── */
.site-video { width: 100%; border-radius: var(--r-lg); border: 1px solid var(--border-subtle); box-shadow: 0 24px 60px rgba(0,0,0,0.35); }
.video-intro { max-width: 640px; margin-bottom: 2.5rem; }
.video-intro p { color: var(--text-secondary); font-size: var(--text-body-lg); line-height: var(--lh-body); margin-top: 1rem; }

/* 25 · CHECKOUT MODAL (Dodo Payments)
   ──────────────────────────────────────────────────────────── */
.checkout-overlay { display: none; position: fixed; inset: 0; background: rgba(4,6,10,0.82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 500; align-items: center; justify-content: center; padding: 1rem; }
.checkout-overlay.open { display: flex; }
.checkout-modal { position: relative; width: 100%; max-width: 480px; height: 90vh; max-height: 720px; background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 32px 80px rgba(0,0,0,0.6); display: flex; flex-direction: column; }
.checkout-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: var(--bg-code); border-bottom: 1px solid var(--border-subtle); flex-shrink: 0; }
.checkout-modal-title { font-family: var(--font-body); font-size: 0.8125rem; color: var(--text-secondary); }
.checkout-modal-close { background: none; border: none; font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--text-secondary); padding: 2px 6px; border-radius: 4px; transition: color 0.15s, background 0.15s; }
.checkout-modal-close:hover { color: var(--text-primary); background: var(--bg-card); }
.checkout-iframe { flex: 1; width: 100%; border: none; display: block; }

/* 26 · PRICING
   ──────────────────────────────────────────────────────────── */
.pricing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.pricing-card { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--r-lg); padding: clamp(1.75rem, 3vw, 2.25rem); position: relative; }
.pricing-card--pro { border-color: rgba(56,189,248,0.4); background: linear-gradient(180deg, rgba(56,189,248,0.07), var(--bg-card) 40%); }
.pricing-tier-label { display: inline-block; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 0.9rem; }
.pricing-card--pro .pricing-tier-label { color: var(--accent); }
.pricing-card h2 { font-size: 1.5rem; margin-bottom: 0.4rem; }
.pricing-tagline { color: var(--text-secondary); font-size: 0.9375rem; }
.pricing-divider { border: none; border-top: 1px solid var(--border-subtle); margin: 1.5rem 0; }
.feature-list { display: flex; flex-direction: column; gap: 0.7rem; }
.feature-list li { position: relative; padding-left: 1.4rem; color: var(--text-primary); font-size: 0.9375rem; line-height: var(--lh-ui); }
.feature-list li::before { content: '✓'; position: absolute; left: 0; color: var(--accent); font-size: 0.8rem; top: 0.15em; }
.feature-list li.sub-feature { padding-left: 1.4rem; color: var(--text-tertiary); font-size: 0.8125rem; }
.feature-list li.sub-feature::before { content: ''; }
.price-free { font-family: var(--font-heading); font-size: 2.25rem; font-weight: 700; }
.price-free-label { color: var(--text-tertiary); font-size: 0.875rem; margin-top: 0.15rem; }
.price-display { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.price-original { font-family: var(--font-body); font-size: 1.1rem; color: var(--text-tertiary); text-decoration: line-through; }
.price-current { font-family: var(--font-heading); font-size: 2.25rem; font-weight: 700; }
.price-launch-pill { font-family: var(--font-mono); font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); background: rgba(56,189,248,0.12); border: 1px solid rgba(56,189,248,0.35); padding: 3px 9px; border-radius: 20px; }
.price-period { color: var(--text-secondary); font-size: 0.875rem; margin-top: 0.4rem; }
.price-or { color: var(--text-tertiary); font-size: 0.8125rem; margin-top: 0.15rem; }
.checkout-note { font-family: var(--font-body); font-size: 0.75rem; color: var(--text-tertiary); margin-top: 0.85rem; text-align: center; line-height: var(--lh-ui); }

.pricing-teaser-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 2.5rem; }
.pricing-teaser-card { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--r-lg); padding: 1.75rem; }
.pricing-teaser-card--pro { border-color: rgba(56,189,248,0.36); }
.teaser-tier { font-family: var(--font-mono); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: var(--ls-label); color: var(--text-tertiary); }
.pricing-teaser-card--pro .teaser-tier { color: var(--accent); }
.pricing-teaser-card h3 { margin: 0.5rem 0 1rem; font-size: 1.15rem; }
.teaser-features { color: var(--text-secondary); font-size: 0.875rem; line-height: 1.9; }
.teaser-price-row { display: flex; align-items: baseline; gap: 0.5rem; margin-top: 1.25rem; }
.teaser-price-free { font-family: var(--font-heading); font-size: 1.6rem; font-weight: 700; }
.teaser-price-orig { font-family: var(--font-body); color: var(--text-tertiary); text-decoration: line-through; }
.teaser-price-now { font-family: var(--font-heading); font-size: 1.6rem; font-weight: 700; }
.teaser-launch-pill { font-family: var(--font-mono); font-size: 0.6rem; text-transform: uppercase; color: var(--accent); background: rgba(56,189,248,0.12); border: 1px solid rgba(56,189,248,0.35); padding: 2px 8px; border-radius: 20px; }
.pricing-teaser-footer { margin-top: 2.25rem; }

@media (max-width: 767px) { .pricing-grid, .pricing-teaser-inner { grid-template-columns: 1fr; } }

/* 27 · CHANGELOG
   ──────────────────────────────────────────────────────────── */
.changelog-entry { padding: 2.25rem 0; border-bottom: 1px solid var(--border-subtle); display: grid; grid-template-columns: 130px 1fr; gap: 2rem; }
.changelog-entry:first-child { padding-top: 0; }
.changelog-meta { position: sticky; top: 80px; }
.changelog-version { font-family: var(--font-mono); font-size: 0.9375rem; color: var(--text-primary); }
.changelog-date { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-tertiary); margin-top: 0.35rem; }
.changelog-tag { display: inline-block; font-family: var(--font-mono); font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.05em; padding: 2px 8px; border-radius: 20px; margin-top: 0.6rem; }
.changelog-tag--feature { color: var(--accent); background: rgba(56,189,248,0.12); border: 1px solid rgba(56,189,248,0.35); }
.changelog-tag--fix { color: var(--warning); background: rgba(251,146,60,0.12); border: 1px solid rgba(251,146,60,0.35); }
.changelog-tag--polish { color: var(--success); background: rgba(74,222,128,0.12); border: 1px solid rgba(74,222,128,0.35); }
.changelog-body h3 { font-size: 1.15rem; margin-bottom: 0.9rem; }
.changelog-body h4 { font-family: var(--font-heading); font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-tertiary); margin: 1.2rem 0 0.6rem; }
.changelog-body p { color: var(--text-secondary); font-size: 0.9375rem; line-height: var(--lh-body); margin-bottom: 0.75rem; }
.changelog-body ul { display: flex; flex-direction: column; gap: 0.55rem; margin: 0.5rem 0 0.9rem; }
.changelog-body ul li { position: relative; padding-left: 1.1rem; color: var(--text-secondary); font-size: 0.9375rem; line-height: var(--lh-body); }
.changelog-body ul li::before { content: '–'; position: absolute; left: 0; color: var(--text-tertiary); }
.changelog-body code { font-family: var(--font-mono); font-size: 0.85em; background: var(--bg-card); border: 1px solid var(--border-subtle); padding: 1px 6px; border-radius: 3px; color: var(--text-code); }
.changelog-jump { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 2rem; }
.changelog-jump a { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-secondary); border: 1px solid var(--border-subtle); padding: 4px 12px; border-radius: 20px; transition: border-color 0.2s, color 0.2s; }
.changelog-jump a:hover { color: var(--text-primary); border-color: var(--text-tertiary); }

@media (max-width: 700px) {
  .changelog-entry { grid-template-columns: 1fr; gap: 0.75rem; }
  .changelog-meta { position: static; display: flex; align-items: center; gap: 0.75rem; }
}

/* 28 · PRIVACY / DATA TABLE PAGE
   ──────────────────────────────────────────────────────────── */
.privacy-body { max-width: 740px; margin: 0 auto; padding: 0 clamp(1.5rem, 5vw, 4rem); }
.pv-section { padding: 2.5rem 0; border-bottom: 1px solid var(--border-subtle); }
.pv-section:first-child { padding-top: 0; }
.pv-section:last-child { border-bottom: none; }
.pv-section h2 { margin-bottom: 1rem; }
.pv-section p { color: var(--text-secondary); font-size: var(--text-body); line-height: var(--lh-body); margin-bottom: 0.9rem; }
.pv-section p:last-child { margin-bottom: 0; }
.pv-not-list { margin-top: 0.75rem; }
.pv-not-list li { color: var(--text-secondary); font-family: var(--font-mono); font-size: 0.8125rem; padding: 0.3rem 0; }
.pv-not-list li::before { content: '✕ '; color: var(--warning); }

/* 29 · CONTACT / UNINSTALL — TALLY EMBED
   White card by design: Tally's default form theme uses dark text
   meant for a light background. Fighting that with a transparent
   background makes the text unreadable against a dark page. */
.form-label { font-family: var(--font-body); font-size: var(--text-label); font-weight: 600; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-tertiary); display: block; margin-bottom: 1rem; }
.form-frame-wrap { width: 100%; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--border-subtle); background: #ffffff; min-height: 700px; padding: clamp(20px, 4vw, 36px); }
.form-frame-wrap iframe { width: 100%; border: none; display: block; }
@media (max-width: 480px) { .form-frame-wrap { padding: 16px; } }

/* 30 · GENERIC INNER-PAGE HERO
   ──────────────────────────────────────────────────────────── */
.page-hero { padding: clamp(5.5rem, 10vw, 8rem) 0 clamp(3rem, 6vw, 5rem); }
.page-hero h1 { font-size: var(--text-hero); margin-bottom: 1.25rem; }
.page-hero-intro { font-family: var(--font-body); font-size: var(--text-display); color: var(--text-secondary); line-height: 1.65; max-width: 580px; }
.page-hero-intro p + p { margin-top: 1rem; }
@media (max-width: 767px) { .page-hero h1 { font-size: clamp(1.9rem, 8vw, 2.6rem); } }

/* 31 · 404
   ──────────────────────────────────────────────────────────── */
.notfound { min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 2rem; }
.notfound-code { font-family: var(--font-mono); color: var(--accent); font-size: 0.9375rem; margin-bottom: 1rem; letter-spacing: 0.05em; }
.notfound h1 { margin-bottom: 1rem; }
.notfound p { color: var(--text-secondary); margin-bottom: 2rem; }

/* 32 · RESPONSIVE
   ──────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer-bottom-strip { flex-direction: column; }
}