/* ==========================================================================
   Nuvia landing page - marketing site (NOT the product UI, which is WPF).
   Aesthetic: light, Windows-native. White surfaces, soft paper strips and
   hairline rules - the same palette as the real app window (Theme/Colors.xaml),
   so the site looks like the product instead of a generic dark SaaS template.
   Lime (#A3E635) is the brand mark: it is a vivid FILL for CTAs and chips (with
   dark ink on top), never coloured text on white. Colored text and icons use
   the deeper leaf greens, which clear contrast. Native CSS only, no build step.
   ========================================================================== */

/* Self-hosted variable fonts (no build step, works offline once cached).
   Geist = clean technical grotesk for UI + display; Geist Mono for file chips.
   The lime "nuvia" wordmark stays on Segoe Script (brand mark, unchanged). */
@font-face {
  font-family: "Geist";
  src: url("assets/fonts/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("assets/fonts/GeistMono-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* Playwrite NG Modern = user's chosen handwriting display face for headlines
   (OFL, self-hosted from the supplied zip; this family tops out at weight 400).
   Bodoni Moda / Playfair Display kept defined as quick-revert fallbacks.
   Dancing Script = flowing wordmark script (stand-in for the paid Telma). */
@font-face {
  font-family: "Playwrite NG Modern";
  src: url("assets/fonts/PlaywriteNGModern-Variable.woff2") format("woff2");
  font-weight: 100 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bodoni Moda";
  src: url("assets/fonts/BodoniModa-Variable.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("assets/fonts/PlayfairDisplay-Variable.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Dancing Script";
  src: url("assets/fonts/DancingScript-Variable.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Surfaces — light, Windows-native (mirrors the real app: white window,
     soft paper strips, hairline rules). */
  --bg:    #FFFFFF;
  --bg-1:  #FFFFFF;   /* card base */
  --bg-2:  #F6F8F3;   /* raised paper panel / soft band */
  --bg-3:  #EEF1EA;   /* sink */
  --line:  #E7EAE3;
  --line-2:#D7DCCF;
  --tint:  #F1F8E9;   /* faint brand-green wash (app's selection tint) */

  /* Ink */
  --text:  #1C2217;
  --muted: #5E6655;
  --dim:   #8A9080;

  /* Brand lime: a solid FILL only (buttons, chips) with dark ink on top —
     lime fails contrast as text/icon on white, so coloured text + icons use
     the deeper leaf greens below. */
  --lime:  #A3E635;
  --lime-2:#B4F04F;
  --lime-3:#7FBF22;
  --on-lime:#19210E;
  --accent:    #497A1E;  /* deep green: links, eyebrows, display accent words */
  --accent-ic: #6AA331;  /* mid green: icons + decorative marks */
  --word:      #3F6B1A;  /* "nuvia" script wordmark on light */

  /* Shape scale: buttons = pill, cards = --r, small = --r-sm */
  --r:    16px;
  --r-sm: 10px;
  --r-lg: 22px;
  --pill: 999px;

  /* Depth — soft, tinted toward ink (never hard black on white). */
  --shadow: 0 2px 6px rgba(28, 34, 23, 0.06), 0 22px 48px -26px rgba(28, 34, 23, 0.26);
  --glow:   0 0 0 rgba(0, 0, 0, 0);   /* transparent so shadow lists stay valid */

  --wrap: 1200px;

  --font-sans: "Geist", "Segoe UI Variable Display", "Segoe UI Variable", "Segoe UI",
    system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Geist", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --font-script: "Dancing Script", "Segoe Script", "Brush Script MT", cursive;
  --font-mono: "Geist Mono", "Cascadia Code", "Cascadia Mono", Consolas, "SF Mono", ui-monospace, monospace;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* Bold full-bleed bands (the colourful rhythm: light → ink → lime). */
  --ink:   #10140A;   /* near-black section */
  --ink-2: #171C0E;   /* raised card on ink */
}
/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; color-scheme: light; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  font-size: 1.0625rem;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: fixed; top: -60px; left: 16px; z-index: 200;
  background: var(--lime); color: var(--on-lime);
  padding: 10px 16px; border-radius: var(--pill); font-weight: 600;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 16px; }

.accent { color: var(--accent); }
.dot-sep { display: inline-block; width: 4px; height: 4px; border-radius: 50%;
  background: var(--dim); vertical-align: middle; margin: 0 4px; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 { font-weight: 700; line-height: 1.08; letter-spacing: -0.02em; color: var(--text); }

/* Display headlines ride the grotesk at heavy weight with tight tracking —
   crisp and product-like, the opposite of a decorative handwriting face. */
.hero__title, .section__title, .download__title, .ceiling__big {
  font-family: var(--font-display); font-weight: 800;
  letter-spacing: -0.035em; line-height: 0.98;
}

.eyebrow {
  display: inline-block; font-size: 0.78rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.16em; color: var(--accent);
  margin-bottom: 18px;
}

.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand__tile { border-radius: 9px; box-shadow: 0 2px 8px rgba(28, 34, 23, .14); }
.brand__word { font-family: var(--font-script); font-weight: 700; font-size: 1.9rem; color: var(--word);
  line-height: 1; padding-top: 2px; }
/* ---------- Buttons ---------- */
.btn {
  --tx: 0px; --ty: 0px;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: inherit; font-size: 0.98rem; font-weight: 600; white-space: nowrap;
  padding: 13px 22px; border-radius: var(--pill); border: 1px solid transparent;
  cursor: pointer; transition: transform .25s var(--ease), background .2s var(--ease),
    border-color .2s var(--ease), box-shadow .25s var(--ease), color .2s var(--ease);
  transform: translate(var(--tx), var(--ty));
}
.btn i { font-size: 1.15em; }
.btn--sm { padding: 10px 18px; font-size: 0.9rem; }
.btn--lg { padding: 16px 30px; font-size: 1.05rem; }

.btn--primary { background: var(--lime); color: var(--on-lime);
  box-shadow: 0 1px 2px rgba(28, 34, 23, .10), 0 10px 24px -12px rgba(127, 191, 34, .55); }
.btn--primary:hover { background: var(--lime-2);
  box-shadow: 0 2px 6px rgba(28, 34, 23, .12), 0 16px 34px -14px rgba(127, 191, 34, .62); }
.btn--primary:active { transform: translate(var(--tx), calc(var(--ty) + 1px)) scale(0.985); }

.btn--ghost { background: var(--bg); color: var(--text); border-color: var(--line-2); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn--ghost:active { transform: scale(0.985); }

/* ---------- Scroll progress rail (CSS scroll-driven; safe to ignore) ---------- */
.scroll-rail { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 150;
  background: transparent; pointer-events: none; }
.scroll-rail__fill { display: block; height: 100%; width: 100%;
  transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--lime-3), var(--lime));
}
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .scroll-rail__fill { animation: railGrow linear both; animation-timeline: scroll(root); }
    @keyframes railGrow { to { transform: scaleX(1); } }
  }
}

/* ---------- Navigation ---------- */
.nav { position: sticky; top: 0; z-index: 120;
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  border-bottom: 1px solid var(--line);
}
.nav__inner { max-width: var(--wrap); margin: 0 auto; height: 68px;
  display: flex; align-items: center; gap: 24px; padding: 0 24px; }
.nav__links { display: flex; gap: 28px; margin-left: auto; }
.nav__links a { color: var(--muted); font-size: 0.95rem; font-weight: 500;
  transition: color .2s var(--ease); }
.nav__links a:hover { color: var(--text); }
.nav .btn { flex-shrink: 0; }
/* ---------- Hero — full-bleed 3D "data cloud" ----------
   One centred headline over a FULL-BLEED WebGL background (hero3d.js): a flowing
   field of lime light points that undulates and flies forward as you scroll. No
   file cards — the motion fills the whole section. Decorative + progressive: the
   copy still reads if WebGL/script is unavailable; a white halo keeps it legible. */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: calc(100dvh - 68px);
  display: flex; align-items: center; justify-content: center;
  padding: 76px 24px; text-align: center;
}

/* The 3D background fills the entire hero, edge to edge, behind everything. */
.hero__scene { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.hero__canvas { display: block; width: 100%; height: 100%; }
.hero__fade { position: absolute; left: 0; right: 0; bottom: 0; height: 180px; z-index: 1;
  pointer-events: none; background: linear-gradient(to bottom, rgba(255,255,255,0), var(--bg-1)); }

/* Foreground copy — centred, above the scene, readable over the motion. */
.hero__fore { position: relative; z-index: 2; width: 100%; max-width: 760px; margin: 0 auto; }
.hero__fore::before {            /* soft white veil keeps copy + buttons readable */
  content: ""; position: absolute; z-index: -1; inset: -26% -40%; pointer-events: none;
  background: radial-gradient(76% 74% at 50% 50%,
    rgba(255,255,255,.96) 0%, rgba(255,255,255,.92) 42%, rgba(255,255,255,.6) 64%, rgba(255,255,255,0) 84%);
}
.hero__kicker { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 24px;
  padding: 8px 16px; border-radius: var(--pill);
  background: var(--bg-1); border: 1px solid var(--line-2); box-shadow: var(--shadow);
  font-size: .82rem; font-weight: 600; color: var(--text); }
.hero__kicker i { color: var(--accent-ic); font-size: 1.1rem; }
.hero__title { font-size: clamp(2.9rem, 8vw, 6.4rem); letter-spacing: -0.045em; }
.hero__sub { color: var(--muted); font-size: clamp(1.08rem, 1.7vw, 1.3rem);
  max-width: 48ch; margin: 24px auto 0; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; justify-content: center; }
.hero__facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin-top: 40px; }
.hero__facts li { display: inline-flex; align-items: center; gap: 9px;
  color: var(--muted); font-size: .95rem; font-weight: 500; }
.hero__facts i { color: var(--accent-ic); font-size: 1.15rem; }

/* Scroll cue — a little mouse that nudges down. */
.hero__cue { position: absolute; left: 50%; bottom: 26px; z-index: 2;
  transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: var(--dim); font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none; }
.hero__mouse { width: 22px; height: 34px; border: 2px solid var(--line-2); border-radius: var(--pill);
  display: flex; justify-content: center; padding-top: 6px; }
.hero__wheel { width: 3px; height: 7px; border-radius: 3px; background: var(--accent-ic); }
@media (prefers-reduced-motion: no-preference) {
  /* Foreground copy rises in, staggered. */
  .hero__fore > * { opacity: 0; animation: heroIn .7s var(--ease) forwards; }
  .hero__fore > :nth-child(1) { animation-delay: .05s; }
  .hero__fore > :nth-child(2) { animation-delay: .14s; }
  .hero__fore > :nth-child(3) { animation-delay: .23s; }
  .hero__fore > :nth-child(4) { animation-delay: .32s; }
  .hero__fore > :nth-child(5) { animation-delay: .41s; }
  @keyframes heroIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
  .hero__wheel { animation: wheelNudge 1.6s var(--ease) infinite; }
  @keyframes wheelNudge { 0%,100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(7px); } }
}
@media (prefers-reduced-motion: reduce) {
  .hero__fore > * { opacity: 1; animation: none; }
}
/*END hero 3D*/

/* ---------- Facts band + disclosure ---------- */
.facts { max-width: var(--wrap); margin: 0 auto; padding: 8px 24px 40px; }
.facts__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 26px 0; }
.facts__row li { display: flex; align-items: center; gap: 13px; color: var(--muted);
  font-size: 0.98rem; }
.facts__row i { font-size: 1.5rem; color: var(--accent-ic); flex-shrink: 0; }
.facts__row strong { color: var(--text); font-weight: 600; }
.facts__note { margin-top: 18px; color: var(--dim); font-size: 0.85rem; max-width: 60ch; }

/* ---------- Built on (logo provenance) ---------- */
.builton { max-width: var(--wrap); margin: 0 auto; padding: 24px 24px 8px; text-align: center; }
.builton__label { color: var(--dim); font-size: 0.82rem; letter-spacing: 0.04em; margin-bottom: 20px; }
.builton__logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 44px; }
.builton__logos img { height: 26px; width: auto; opacity: 0.75;
  transition: opacity .25s var(--ease), filter .25s var(--ease); }
.builton__logos img:hover { opacity: 1; }
.builton__glyph { font-size: 30px; line-height: 1; color: var(--dim); opacity: 0.85;
  transition: opacity .25s var(--ease), color .25s var(--ease); }
.builton__glyph:hover { opacity: 1; color: var(--accent-ic); }

/* ---------- Section shell ---------- */
.section { max-width: var(--wrap); margin: 0 auto; padding: clamp(84px, 12vh, 150px) 24px; }
.section__head { max-width: 720px; margin-bottom: 56px; }
.section__head--center { margin-left: auto; margin-right: auto; text-align: center; }
.section__title { font-size: clamp(2.3rem, 5vw, 4rem); }
.section__lead { color: var(--muted); font-size: 1.12rem; max-width: 60ch; margin-top: 18px; }

/* ---------- Bento ---------- */
.bento { display: grid; grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(150px, auto); gap: 18px; }
.cell { position: relative; overflow: hidden; padding: 28px;
  background: var(--bg-1); border: 1px solid var(--line);
  border-radius: var(--r); display: flex; flex-direction: column; justify-content: flex-end;
  box-shadow: 0 1px 2px rgba(28, 34, 23, .03);
  transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease); }
.cell:hover { border-color: var(--line-2); transform: translateY(-3px); box-shadow: var(--shadow); }
.cell__icon { font-size: 1.9rem; color: var(--accent-ic); margin-bottom: 14px; }
.cell h3 { font-size: 1.2rem; margin-bottom: 8px; }
.cell p { color: var(--muted); font-size: 0.96rem; }

.cell--a { grid-column: span 5; grid-row: span 2; justify-content: flex-end;
  background: var(--bg-2); }
.cell--b { grid-column: span 7; }
.cell--c { grid-column: span 4; }
.cell--d { grid-column: span 3; }
.cell--e { grid-column: span 6; }
.cell--f { grid-column: span 6; }

.cell--a .cell__art { position: absolute; top: 24px; left: 28px; }
.cell--a .cell__art img { border-radius: 22%; box-shadow: var(--shadow); }
.cell--a h3 { font-size: 1.55rem; }

.cell--tint { background: var(--tint); border-color: #DCEBCB; }
.cell--dots > * { position: relative; }
/* ---------- Steps (how it works) ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; position: relative; }
.steps::before { content: ""; position: absolute; top: 33px; left: 8%; right: 8%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-2) 15%, var(--line-2) 85%, transparent); }
.step { position: relative; }
.step__node { position: relative; z-index: 1; display: grid; place-items: center;
  width: 66px; height: 66px; border-radius: 50%; margin-bottom: 22px;
  background: var(--bg); border: 1px solid var(--line-2); color: var(--accent-ic); font-size: 1.7rem;
  box-shadow: 0 0 0 8px var(--bg), 0 2px 10px rgba(28, 34, 23, .07); }
.step h3 { font-size: 1.3rem; margin-bottom: 10px; }
.step p { color: var(--muted); font-size: 1rem; max-width: 34ch; }

/* ---------- Ceiling / why (typographic comparison) ---------- */
.ceiling__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 28px; align-items: stretch; }
.ceiling__lead { display: flex; flex-direction: column; align-items: flex-start; }
.ceiling__lead .btn { margin-top: 30px; }
.ceiling__stat { background: var(--bg-2);
  border: 1px solid var(--line); border-radius: var(--r-lg); padding: 40px;
  display: flex; flex-direction: column; justify-content: center; }
.ceiling__kicker { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.76rem; color: var(--dim); }
.ceiling__big { font-size: clamp(3.6rem, 8vw, 6rem); letter-spacing: -0.04em;
  margin: 14px 0 18px; }
.ceiling__foot { color: var(--muted); font-size: 0.98rem; }

/* ---------- Privacy ---------- */
.privacy__grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 56px; align-items: start; }
.privacy__intro { position: sticky; top: 100px; }
.principles { display: grid; gap: 2px; }
.principles li { display: flex; gap: 18px; padding: 24px 4px;
  border-top: 1px solid var(--line); }
.principles li:last-child { border-bottom: 1px solid var(--line); }
.principles i { font-size: 1.5rem; color: var(--accent-ic); flex-shrink: 0; margin-top: 2px; }
.principles h3 { font-size: 1.12rem; margin-bottom: 5px; }
.principles p { color: var(--muted); font-size: 0.98rem; }
/* ---------- FAQ accordion ---------- */
.accordion { max-width: 780px; margin: 0 auto; }
.qa { border-bottom: 1px solid var(--line); }
.qa summary { cursor: pointer; list-style: none; padding: 24px 4px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font-size: 1.12rem; font-weight: 600; color: var(--text); transition: color .2s var(--ease); }
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--accent); }
.qa summary i { color: var(--accent-ic); font-size: 1.15rem; transition: transform .3s var(--ease); flex-shrink: 0; }
.qa[open] summary i { transform: rotate(45deg); }
.qa p { color: var(--muted); font-size: 1rem; padding: 0 4px 26px; max-width: 62ch; }

/* ---------- Download / final CTA ---------- */
.download__card { max-width: 720px; margin: 0 auto; text-align: center;
  background: var(--bg-2);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(40px, 6vw, 72px); }
.download__icon { margin: 0 auto 26px; border-radius: 24%; box-shadow: var(--shadow); }
.download__title { font-size: clamp(1.9rem, 3.6vw, 2.8rem); }
.download__sub { color: var(--muted); font-size: 1.12rem; margin: 16px auto 32px; max-width: 42ch; }
.download__meta { color: var(--dim); font-size: 0.88rem; margin-top: 22px;
  display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 6px; }
.download__meta i { color: var(--accent-ic); }

.download__links { display: inline-flex; align-items: center; flex-wrap: wrap;
  justify-content: center; gap: 10px; margin-top: 6px; font-size: 0.95rem; }
.download__links a { color: var(--muted); border-bottom: 1px solid transparent;
  transition: color .2s var(--ease), border-color .2s var(--ease); }
.download__links a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* Download source picker. The two sources occupy their row at all times, so revealing them
   never shifts the layout underneath. Hover/focus only gates visibility on real pointer
   devices; on touch both options are visible from the start. */
.dl-cta__main { position: relative; }
.dl-cta__caret { margin-left: -2px; opacity: .7; transition: transform .25s var(--ease), opacity .2s var(--ease); }
.dl-cta:hover .dl-cta__caret,
.dl-cta:focus-within .dl-cta__caret { transform: rotate(180deg); opacity: 1; }

.dl-cta__opts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 12px; }

.dl-opt { display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px; border-radius: var(--pill);
  border: 1px solid var(--line-2); background: var(--bg); color: var(--text);
  font-family: inherit; font-size: 0.94rem; font-weight: 600; white-space: nowrap;
  transition: opacity .22s var(--ease), transform .22s var(--ease),
    border-color .2s var(--ease), color .2s var(--ease); }
.dl-opt i { font-size: 1.15em; color: var(--accent-ic);
  transition: color .2s var(--ease); }
.dl-opt:hover { border-color: var(--accent); color: var(--accent); }
.dl-opt:hover i { color: var(--accent); }
.dl-opt:active { transform: scale(0.985); }

@media (hover: hover) and (pointer: fine) {
  .dl-opt { opacity: 0; transform: translateY(-6px); pointer-events: none; }
  .dl-cta:hover .dl-opt,
  .dl-cta:focus-within .dl-opt { opacity: 1; transform: translateY(0); pointer-events: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .dl-cta__caret, .dl-opt { transition: none; }
  .dl-opt { transform: none; }
}

/* ---------- Footer ---------- */
.footer { max-width: var(--wrap); margin: 0 auto; padding: 64px 24px 48px;
  border-top: 1px solid var(--line); }
.footer__top { display: flex; flex-wrap: wrap; gap: 40px; justify-content: space-between; }
.footer__tag { font-family: var(--font-script); font-weight: 700; color: var(--word); font-size: 1.35rem; margin-top: 14px; }
.footer__nav { display: flex; gap: 64px; }
.footer__nav h4 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--dim); margin-bottom: 16px; font-weight: 600; }
.footer__nav a { display: block; color: var(--muted); padding: 6px 0; font-size: 0.95rem;
  transition: color .2s var(--ease); }
.footer__nav a:hover { color: var(--accent); }
.footer__legal { margin-top: 54px; padding-top: 26px; border-top: 1px solid var(--line); }
.footer__disclosure { color: var(--dim); font-size: 0.84rem; max-width: 72ch; }
.footer__copy { color: var(--dim); font-size: 0.84rem; margin-top: 12px; }
/* ---------- Scroll reveal + entrances (motion, gated on preference) ---------- */
@media (prefers-reduced-motion: no-preference) {
  [data-animate] { opacity: 0; transform: translateY(28px);
    transition: opacity .7s var(--ease), transform .7s var(--ease); }
  [data-animate].in { opacity: 1; transform: none; }

  /* Hero copy/scene reveal + bob now live with the 3D hero block above. */
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .nav__links { display: none; }
  .nav .btn { margin-left: auto; }
  .hero { min-height: 86vh; padding: 60px 20px; }
  .hero__title { font-size: clamp(2.4rem, 10vw, 4rem); }
  .hero__sub { max-width: 42ch; }
  .facts__row { grid-template-columns: 1fr; gap: 16px; }
  .bento { grid-template-columns: repeat(6, 1fr); }
  .cell--a { grid-column: span 6; grid-row: span 1; }
  /* Collapsed to a short single row, the absolutely-positioned app image would
     land on top of the heading/paragraph — drop it the moment the cell shrinks
     (the inline infinity glyph still labels the cell). */
  .cell--a .cell__art { display: none; }
  .cell--b, .cell--c, .cell--d, .cell--e, .cell--f { grid-column: span 6; }
  .steps { grid-template-columns: 1fr; gap: 30px; }
  .steps::before { display: none; }
  .ceiling__grid { grid-template-columns: 1fr; gap: 22px; }
  .privacy__grid { grid-template-columns: 1fr; gap: 32px; }
  .privacy__intro { position: static; }
  .footer__top { flex-direction: column; gap: 30px; }
}
@media (max-width: 560px) {
  .section { padding: 72px 20px; }
  .hero { padding: 48px 18px; }
  .footer__nav { gap: 40px; }
  .btn--lg { padding: 14px 22px; font-size: 1rem; }
  .hero__cta { width: 100%; }
  .hero__cta .btn { flex: 1 1 auto; }
  /* Nav CTA collapses to an icon-only pill so the long label never overflows;
     the hero keeps the full "Download for Windows" call to action. */
  .nav__inner { gap: 12px; }
  .nav .btn--sm { padding: 10px 12px; }
  .nav .btn--sm .btn__label { display: none; }
  .nav .btn--sm i { font-size: 1.25rem; }
}

/* ==========================================================================
   BOLD + KINETIC LAYER  — Awwwards-style redesign (outcrowd-inspired motion).
   Colourful full-bleed bands (light → ink → lime), oversized type, scroll
   reveals, a parallax hero with floating chips, a marquee, an honest stat
   band and a drawn connector line. Pure progressive enhancement: the page is
   fully readable, honest and on-brand with none of it (reduced-motion safe).
   ========================================================================== */

/* Lime highlight marker behind an accent word — dark ink stays ON TOP, so the
   lime is a contrast-safe FILL, never low-contrast green text. It draws in. */
.hl { position: relative; color: var(--text); padding: 0 .04em;
  background: linear-gradient(var(--lime), var(--lime)) no-repeat;
  background-position: 0 92%; background-size: 100% .40em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }
@media (prefers-reduced-motion: no-preference) {
  [data-animate] .hl { background-size: 0% .40em; transition: background-size .7s var(--ease-out) .15s; }
  [data-animate].in .hl { background-size: 100% .40em; }
  .hero__title .hl { background-size: 0% .40em; animation: hlGrow .9s var(--ease-out) .65s forwards; }
  @keyframes hlGrow { to { background-size: 100% .40em; } }
}

/* Arrow / icon micro-interactions (the outcrowd slide-on-hover). */
.btn--ghost i.ph-arrow-down { transition: transform .3s var(--ease-out); }
.btn--ghost:hover i.ph-arrow-down { transform: translateY(3px); }
.btn--primary i { transition: transform .3s var(--ease-out); }
.btn--primary:hover i { transform: translateX(3px); }

/* (The old hero floating chips were removed with the split-layout hero; the 3D
   file cards in the hero block above replace them.) */

/* Marquee strip — a loud, honest value line that scrolls edge to edge. */
.marquee { overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: var(--bg-2); padding: 15px 0; }
.marquee__track { display: flex; width: max-content; animation: marq 34s linear infinite; }
.marquee__track span { display: inline-flex; align-items: center; gap: 16px; padding: 0 26px;
  font-family: var(--font-display); font-weight: 800; letter-spacing: -.02em;
  font-size: clamp(1.05rem, 2.1vw, 1.65rem); color: var(--text); }
.marquee__track i { color: var(--accent-ic); font-size: .62em; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }
@keyframes marq { to { transform: translateX(-50%); } }

/* Honest stat band — real facts only (count-up handled in app.js). */
.stats { max-width: var(--wrap); margin: 0 auto; padding: 60px 24px; }
.stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.stat { padding: 26px 22px; border-radius: var(--r); border: 1px solid var(--line);
  background: var(--bg-1); box-shadow: 0 1px 2px rgba(28, 34, 23, .03); }
.stat__num { font-family: var(--font-display); font-weight: 800; letter-spacing: -.03em;
  font-size: clamp(2.4rem, 4.6vw, 3.5rem); line-height: 1; color: var(--text); }
.stat__num .u { color: var(--accent); }
.stat__label { margin-top: 11px; color: var(--muted); font-size: .95rem; line-height: 1.45; }

/* Full-bleed colour bands. The section goes edge-to-edge; .section__inner
   re-centres the content at the normal page width. Each band redefines the
   design tokens locally, so every child auto-recolours — no per-element work. */
.section--band { max-width: none; width: 100%; padding-left: 0; padding-right: 0; }
.section--band .section__inner { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

.section--ink { background: var(--ink); color: var(--text);
  --text: #F3F6EC; --muted: #A9B29B; --dim: #7C866C;
  --line: rgba(255, 255, 255, .12); --line-2: rgba(255, 255, 255, .22);
  --bg-1: #171C0E; --bg-2: #13170B; --bg-3: #1C2212; --tint: rgba(163, 230, 53, .14);
  --accent: #A3E635; --accent-ic: #B4F04F; --word: #A3E635;
  --shadow: 0 2px 10px rgba(0, 0, 0, .3), 0 30px 60px -30px rgba(0, 0, 0, .6); }

.section--lime { background: var(--lime); color: var(--text);
  --text: #16200A; --muted: #3A4720; --dim: #56662F;
  --line: rgba(22, 32, 10, .18); --line-2: rgba(22, 32, 10, .3);
  --bg-1: #B2EE54; --bg-2: #ADEA49; --bg-3: #A6E53E; --tint: rgba(22, 32, 10, .08);
  --accent: #16200A; --accent-ic: #2A3813; --word: #16200A;
  --shadow: 0 2px 10px rgba(22, 32, 10, .12), 0 26px 50px -28px rgba(22, 32, 10, .4); }
.section--lime .btn--primary { background: var(--ink); color: var(--lime);
  box-shadow: 0 2px 6px rgba(22, 32, 10, .18), 0 16px 30px -14px rgba(22, 32, 10, .5); }
.section--lime .btn--primary:hover { background: #1d260f; }
/* On colour bands the lime marker would clash (light text on lime, or lime on
   lime), so the accent word becomes solid accent-coloured text instead — which
   on ink is legible lime and on the lime band is dark ink. Both pass contrast. */
.section--band .hl { background-image: none; color: var(--accent); font-weight: 800; }

/* "How it works" connector line on the ink band — draws left→right on reveal. */
.section--ink .steps::before {
  background: linear-gradient(90deg, transparent, var(--accent) 14%, var(--accent) 86%, transparent);
  opacity: .55; transform: scaleX(0); transform-origin: left; }
.section--ink .step__node { background: var(--ink-2); border-color: var(--line-2); color: var(--accent-ic);
  box-shadow: 0 0 0 8px var(--ink), 0 2px 12px rgba(0, 0, 0, .45); }
@media (prefers-reduced-motion: no-preference) {
  .section--ink .steps.in::before { transform: scaleX(1); transition: transform 1s var(--ease-out) .25s; }
}
@media (prefers-reduced-motion: reduce) { .section--ink .steps::before { transform: none; } }

/* Staggered reveal for grouped children (bento, steps, principles). */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal] > * { opacity: 0; transform: translateY(32px) scale(.99);
    transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
  [data-reveal].in > * { opacity: 1; transform: none; }
  [data-reveal].in > *:nth-child(1) { transition-delay: .04s; }
  [data-reveal].in > *:nth-child(2) { transition-delay: .11s; }
  [data-reveal].in > *:nth-child(3) { transition-delay: .18s; }
  [data-reveal].in > *:nth-child(4) { transition-delay: .25s; }
  [data-reveal].in > *:nth-child(5) { transition-delay: .32s; }
  [data-reveal].in > *:nth-child(6) { transition-delay: .39s; }
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] > * { opacity: 1; transform: none; }
}

/* Responsive — new kinetic elements. */
@media (max-width: 960px) {
  .stats__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .stats__grid { grid-template-columns: 1fr; }
  .stats { padding: 44px 24px; }
}

/* ==========================================================================
   SCROLL-LINKED REVEAL  — the outcrowd move: large visuals scale/clip/drift
   INTO view, with progress tied to scroll position (CSS view-timeline). Falls
   back to a one-shot IntersectionObserver (.in) where view-timeline is absent,
   and shows the final state immediately for reduced-motion users.
   ========================================================================== */
.sr--img { border-radius: 26px; }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .sr      { animation: srUp   linear both; animation-timeline: view(); animation-range: entry 2% cover 40%; }
    .sr--img { animation: srImg  linear both; animation-timeline: view(); animation-range: entry 0% cover 48%; }
    .sr--par { animation: srPar  linear both; animation-timeline: view(); animation-range: entry exit; }
  }
  @supports not (animation-timeline: view()) {
    .sr { opacity: 0; transform: translateY(44px) scale(.97);
      transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
    .sr.in { opacity: 1; transform: none; }
    .sr--img { clip-path: inset(9% 7% 9% 7% round 26px);
      transition: opacity .9s var(--ease-out), transform .9s var(--ease-out), clip-path .9s var(--ease-out); }
    .sr--img.in { clip-path: inset(0 0 0 0 round 26px); }
  }
}
@keyframes srUp  { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: none; } }
@keyframes srImg {
  from { opacity: .2;  transform: translateY(64px) scale(.84); clip-path: inset(11% 9% 11% 9% round 26px); }
  45%  { opacity: 1; }
  to   { opacity: 1;   transform: none;                        clip-path: inset(0 0 0 0 round 26px); }
}
@keyframes srPar { from { transform: translateY(42px); } to { transform: translateY(-42px); } }

/* ==========================================================================
   SHOWCASE  — alternating big-media rows (outcrowd rhythm). Each media panel
   is an honest model of Nuvia's real UI (a Windows window frame + file rows),
   not a copied illustration. The panel reveals on scroll via .sr--img.
   ========================================================================== */
.showcase { padding-top: clamp(40px, 7vh, 96px); }
.section__head--center { text-align: center; margin: 0 auto; max-width: 820px; }
.section__head--center .section__title { margin-inline: auto; }

.showcase__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 76px);
  align-items: center;
  margin-top: clamp(52px, 9vh, 118px);
}
.showcase__row--rev .showcase__media { order: -1; }

.showcase__step {
  font-family: var(--font-display); font-weight: 800;
  font-size: .95rem; letter-spacing: .08em; color: var(--accent);
}
.showcase__copy h3 {
  font-family: var(--font-display); font-weight: 800;
  letter-spacing: -.03em; line-height: 1.02;
  font-size: clamp(1.8rem, 3.4vw, 2.9rem);
  margin: .28em 0 .4em;
}
.showcase__copy p { color: var(--muted); font-size: 1.08rem; line-height: 1.62; max-width: 42ch; }

.showcase__media {
  position: relative; overflow: hidden;
  border-radius: 26px; padding: clamp(26px, 4vw, 54px);
  background: radial-gradient(120% 130% at 18% 0%, var(--tint, #ECF8D6), var(--bg-2) 72%);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.showcase__media::after {
  content: ""; position: absolute; right: -18%; bottom: -34%;
  width: 58%; height: 68%; z-index: 0;
  background: radial-gradient(circle, rgba(163,230,53,.55), transparent 70%);
  filter: blur(34px);
}
/* Honest Nuvia window model reused across showcase rows. */
.mini-win {
  position: relative; z-index: 1;
  background: #fff; border: 1px solid var(--line);
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 24px 46px -22px rgba(28, 34, 23, .4);
}
.mini-win__bar {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 14px; border-bottom: 1px solid var(--line);
  background: var(--bg-2);
}
.mini-win__word { font-family: var(--font-script); color: var(--word); font-size: 1.18rem; line-height: 1; }
.mini-win__ctrls { margin-left: auto; display: flex; gap: 12px; color: var(--muted); font-size: .8rem; }
.mini-win__row {
  display: grid; grid-template-columns: auto 1fr auto auto;
  align-items: center; gap: 13px;
  padding: 14px 16px; border-bottom: 1px solid var(--line);
}
.mini-win__row:last-child { border-bottom: 0; }
.mini-win__row > i:first-child { font-size: 1.35rem; color: var(--accent-ic); }
.mini-win__row b { font-weight: 600; color: var(--text); font-size: .97rem; }
.mini-win__row > span { color: var(--muted); font-size: .84rem; }
.mini-win__row .ok { color: var(--accent-ic); font-size: 1.12rem; }

@media (max-width: 820px) {
  .showcase__row { grid-template-columns: 1fr; gap: 26px; margin-top: 54px; }
  .showcase__row--rev .showcase__media { order: 0; }
  .showcase__copy p { max-width: none; }
}