@font-face{font-family:Manrope;font-style:normal;font-weight:400;font-display:swap;src:url('fonts/manrope-regular.ttf') format('truetype')}
@font-face{font-family:Manrope;font-style:normal;font-weight:600;font-display:swap;src:url('fonts/manrope-semibold.ttf') format('truetype')}
@font-face{font-family:Manrope;font-style:normal;font-weight:800;font-display:swap;src:url('fonts/manrope-extrabold.ttf') format('truetype')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/spacegrotesk-bold.ttf') format('truetype')}
/* ---------------------------------------------------------------------------
   NamuGo design system - landing and legal pages.

   Separate from styles.css on purpose: this file is free to change without
   touching anything else.

   Fonts are served from our own origin, not from Google's CDN. Loading them
   from fonts.gstatic.com would send every visitor's IP address to Google
   before they have agreed to anything, which LG München I held to be a GDPR
   breach (3 O 17493/20, 20 Jan 2022) precisely because self-hosting is a
   readily available alternative. The Privacy Policy says plainly that reading
   this site shares nothing with anyone, so every asset here, including the 3D
   library, is served from namugo.eu.

   Two locked rules, applied everywhere:
     Radius   outer shell 24px, inner core 16px, chip 10px, control full pill.
     Easing   --ease for travel, --ease-soft for settling. Nothing linear.
--------------------------------------------------------------------------- */





/* ---------------------------------------------------------------------------
   Tokens

   The palette is not a free choice: it is the palette the two shipped apps
   use, so the site and the product read as one brand. Keep in step with
   styles.css and the apps' theme.
--------------------------------------------------------------------------- */

:root {
  color-scheme: light dark;

  --bg: #f8f5ee;
  --bg-sunk: #f1ece1;
  --surface: #fffdf9;
  --surface-raised: #ffffff;

  --ink: #121d1e;
  --text: #2b3a3a;
  /* Both of these are checked against --bg for WCAG AA on body text (4.5:1).
     The lighter greys they started as looked better and failed. */
  --muted: #606b68;
  --faint: #66716e;

  --line: #e3dccf;
  --line-soft: #ece6da;
  --line-strong: #d0c5b1;

  --green: #0e6f57;
  --green-bright: #16a37b;
  --green-deep: #0a5643;
  --mint: #e4f4ec;

  --amber-ink: #8a5a00;
  --amber-soft: #fbeed2;
  --amber-line: #e9d4a0;

  --clay: #f36b3f;

  /* Shadows are tinted to the background hue. A neutral black shadow on a
     warm ground is the fastest way to make a page look cheap. */
  --shadow-sm: 0 1px 2px rgba(60, 52, 38, 0.04), 0 2px 8px rgba(60, 52, 38, 0.03);
  --shadow-md: 0 2px 4px rgba(60, 52, 38, 0.04), 0 10px 30px rgba(60, 52, 38, 0.055);
  --shadow-lg: 0 4px 10px rgba(60, 52, 38, 0.05), 0 26px 70px rgba(60, 52, 38, 0.08);
  --shell: rgba(60, 52, 38, 0.035);
  --shell-line: rgba(60, 52, 38, 0.07);
  --inner-light: inset 0 1px 0 rgba(255, 255, 255, 0.75);

  --r-shell: 24px;
  --r-core: 16px;
  --r-chip: 10px;

  --gutter: clamp(20px, 5vw, 56px);
  --max: 1200px;
  --measure: 62ch;

  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-soft: cubic-bezier(0.16, 1, 0.3, 1);

  --scene-key: #fff1dc;
  --scene-sky: #fff4e2;
  --scene-ground: #cfc6b4;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #14110d;
    --bg-sunk: #100e0a;
    --surface: #1c1814;
    --surface-raised: #221d18;

    --ink: #f6f1e7;
    --text: #ded6c8;
    --muted: #a49b8c;
    --faint: #7d756a;

    --line: #2e2822;
    --line-soft: #26211b;
    --line-strong: #40382f;

    --green: #2fbf93;
    --green-bright: #43d7a9;
    --green-deep: #1d9a74;
    --mint: #16342b;

    --amber-ink: #e7bd6a;
    --amber-soft: #2e2415;
    --amber-line: #4a3a1e;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.22);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.32), 0 10px 30px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 4px 10px rgba(0, 0, 0, 0.35), 0 26px 70px rgba(0, 0, 0, 0.4);
    --shell: rgba(255, 255, 255, 0.035);
    --shell-line: rgba(255, 255, 255, 0.07);
    --inner-light: inset 0 1px 0 rgba(255, 255, 255, 0.05);

    --scene-key: #ffe3ba;
    --scene-sky: #3a3128;
    --scene-ground: #171310;
  }
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 16.5px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

/* Film grain. Fixed and pointer-events-none so it never repaints with scroll.
   Generated locally rather than loaded, like everything else here. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0.035;
  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.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- Type ---------------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: 'Space Grotesk', 'Manrope', -apple-system, 'Segoe UI', sans-serif;
  color: var(--ink);
  font-weight: 700;
  margin: 0;
  text-wrap: balance;
}

/* Tracking is size-specific. Display type reads too loose at default spacing,
   small type reads too tight. One value for both is wrong somewhere. */
h1 {
  font-size: clamp(2.6rem, 6.2vw, 5rem);
  line-height: 0.98;
  letter-spacing: -0.042em;
}

h2 {
  font-size: clamp(1.85rem, 3.6vw, 2.95rem);
  line-height: 1.06;
  letter-spacing: -0.032em;
}

h3 {
  font-size: 1.12rem;
  line-height: 1.3;
  letter-spacing: -0.016em;
}

p { margin: 0; }

.lead {
  color: var(--muted);
  font-size: clamp(1.06rem, 1.3vw, 1.2rem);
  line-height: 1.6;
  max-width: 34ch;
}

.kicker {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--green);
}

a { color: var(--green); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--green-bright); }

.wrap {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 14px 20px;
  background: var(--ink);
  color: var(--bg);
  border-radius: 0 0 var(--r-core) 0;
  font-weight: 700;
}
.skip-link:focus { left: 0; }

:where(a, button, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--green-bright);
  outline-offset: 3px;
  border-radius: 6px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- Nav ----------------------------------------------------------------- */

/* A floating pill, detached from the top edge, rather than a bar glued to it. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  padding-top: 14px;
  pointer-events: none;
}

.site-header .wrap { display: flex; justify-content: center; }

.nav-pill {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 34px);
  width: 100%;
  max-width: 760px;
  height: 60px;
  padding: 0 10px 0 18px;
  border: 1px solid var(--shell-line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(20px) saturate(170%);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  box-shadow: var(--inner-light);
  transition: box-shadow 500ms var(--ease), background-color 500ms var(--ease), border-color 500ms var(--ease);
}

.site-header[data-scrolled='true'] .nav-pill {
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  box-shadow: var(--inner-light), var(--shadow-md);
  border-color: var(--line);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-right: auto;
  color: var(--ink);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.026em;
  text-decoration: none;
}
.brand:hover { color: var(--ink); }
.brand svg { display: block; }

.site-nav { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 26px); }

.site-nav a {
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: color 240ms var(--ease);
}
.site-nav a:hover { color: var(--green); }

/* The wordmark, two links and a button do not fit a 390px bar. The button is
   the one to drop: on a phone the download tray it scrolls to is already the
   first thing under the headline. */
@media (max-width: 620px) {
  .nav-pill { height: 54px; padding: 0 16px; gap: 14px; }
  .nav-pill > .btn { display: none; }
  .brand { font-size: 1rem; gap: 8px; }
  .brand svg { width: 22px; height: 22px; }
  .site-nav a { font-size: 0.82rem; }
}

/* --- Controls ------------------------------------------------------------ */

/* Nested architecture: the trailing glyph lives in its own disc flush with the
   control's inner padding, and gains kinetic tension on hover. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 6px 0 20px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 320ms var(--ease), background-color 320ms var(--ease);
}

.btn:hover { background: var(--green-deep); color: var(--bg); }
.btn:active { transform: scale(0.978); }

.btn .disc {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 18%, transparent);
  transition: transform 380ms var(--ease), background-color 380ms var(--ease);
}

.btn:hover .disc {
  transform: translate(3px, -2px) scale(1.06);
  background: color-mix(in srgb, var(--bg) 28%, transparent);
}

.btn--quiet {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line-strong);
  padding-right: 18px;
}
.btn--quiet:hover { background: var(--shell); color: var(--ink); border-color: var(--ink); }

.text-link {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
}

.text-link span { border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.text-link svg { transition: transform 340ms var(--ease); }
.text-link:hover svg { transform: translateX(4px); }

/* --- Double bezel -------------------------------------------------------- */

/* Nothing important sits flat on the page. An outer tray holds an inner plate,
   with concentric radii, so containers read as machined rather than drawn. */
.bezel {
  padding: 6px;
  border: 1px solid var(--shell-line);
  border-radius: var(--r-shell);
  background: var(--shell);
}

.bezel > .core {
  border-radius: var(--r-core);
  background: var(--surface);
  box-shadow: var(--inner-light), var(--shadow-sm);
}

/* --- Scene --------------------------------------------------------------- */

/* The scene is pinned for the length of the page and driven by scroll
   position, so one continuous shot carries the whole narrative. */
.scene {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.scene canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 1;
}

/* The fallback is not stretched over the viewport the way the canvas is: the
   WebGL subject is framed to one side, and a full-bleed SVG of the same motif
   would sit straight across the headline. This puts it where the 3D subject
   would be. */
.scene-fallback {
  position: absolute;
  right: 3%;
  bottom: 6%;
  width: min(44vw, 470px);
  aspect-ratio: 1 / 1;
  height: auto;
  display: block;
  opacity: 1;
  transition: opacity 600ms var(--ease);
}

@media (max-width: 899px) {
  .scene-fallback {
    right: 50%;
    transform: translateX(50%);
    bottom: 3%;
    width: min(74vw, 340px);
  }
}

/* Set once the WebGL scene has produced a frame. The fade is decoration: the
   fallback is removed from the DOM outright a moment later, so a browser that
   never runs the transition still ends up in the right state. */
.scene[data-live='true'] .scene-fallback { opacity: 0; }

/* The fallback runs the same gesture as the WebGL scene, on the same 3.6s
   cycle, so a device without WebGL gets the motif rather than a still frame.
   Both are plain transforms: no layout, no paint. The swing is smaller here
   because the hand travels with the tool and the shoulder does not. */
.fb-wrench {
  transform-box: view-box;
  transform-origin: 138px 215px; /* the centre of the fitting */
  animation: fb-turn 3.6s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

.fb-float {
  transform-box: view-box;
  transform-origin: 200px 200px;
  animation: fb-breathe 12s ease-in-out infinite;
}

@keyframes fb-turn {
  0%   { transform: rotate(-6deg); }
  40%  { transform: rotate(6deg); }
  50%  { transform: rotate(6deg); }
  80%  { transform: rotate(-6deg); }
  100% { transform: rotate(-6deg); }
}

@keyframes fb-breathe {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

.scene-shadow {
  position: absolute;
  left: 50%;
  bottom: 16%;
  width: min(46vw, 520px);
  height: 8vh;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(60, 52, 38, 0.16), rgba(60, 52, 38, 0));
  pointer-events: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .scene-shadow {
    background: radial-gradient(closest-side, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  }
}

/* Content rides above the fixed scene. Sections themselves stay transparent so
   the scene is visible between and around them for the whole page; anything
   carrying text of its own sits on an opaque surface. */
.site-header,
main,
.site-footer { position: relative; z-index: 1; }

/* --- Hero ---------------------------------------------------------------- */

.hero {
  min-height: 100svh;
  display: grid;
  align-content: center;
  padding-block: clamp(96px, 14vh, 150px) clamp(48px, 9vh, 90px);
}

.hero .wrap {
  display: grid;
  gap: clamp(28px, 4vw, 44px);
}

/* Asymmetric: copy occupies the left seven columns, the scene owns the right,
   and the download tray sits under the copy rather than beside it. */
@media (min-width: 900px) {
  .hero .wrap {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: center;
  }
  .hero-copy { grid-column: 1; }
  .hero-aside { grid-column: 1; max-width: 560px; }
}

.hero-copy { display: grid; gap: 20px; justify-items: start; }

.hero-note {
  display: inline-flex;
  align-items: center;
  padding: 6px 15px;
  border: 1px solid var(--amber-line);
  border-radius: 999px;
  background: var(--amber-soft);
  color: var(--amber-ink);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.73rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* --- Download tray ------------------------------------------------------- */

.download { display: grid; gap: 8px; width: 100%; }

.app-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(16px, 2.6vw, 22px);
  align-items: center;
  padding: clamp(14px, 2.2vw, 18px);
  border-radius: var(--r-core);
  background: var(--surface);
  box-shadow: var(--inner-light), var(--shadow-sm);
  transition: box-shadow 420ms var(--ease), transform 420ms var(--ease);
}

.app-row + .app-row { margin-top: 6px; }
.app-row:hover { box-shadow: var(--inner-light), var(--shadow-md); transform: translateY(-1px); }

.qr {
  position: relative;
  width: clamp(92px, 14vw, 108px);
  aspect-ratio: 1 / 1;
  border-radius: var(--r-chip);
  background: #fff;
  overflow: hidden;
}

.qr svg { display: block; width: 100%; height: 100%; }

/* Coming soon is part of the design, not a browser grey disabled state: the
   code stays legible and on brand, just held back a stop. */
.qr[data-state='pending'] svg { opacity: 0.4; }

.qr-veil { position: absolute; inset: 0; display: grid; place-items: center; padding: 6px; }
.qr[data-state='live'] .qr-veil { display: none; }

.qr-veil span {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--amber-ink);
  background: var(--amber-soft);
  border: 1px solid var(--amber-line);
  border-radius: 999px;
  padding: 4px 9px;
  line-height: 1;
  text-align: center;
}

.app-meta { display: grid; gap: 11px; min-width: 0; }
.app-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px 8px; }

.app-title strong {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.app-title span { color: var(--muted); font-size: 0.82rem; font-weight: 600; }

.store-badges { display: flex; flex-wrap: wrap; gap: 8px; }

/* Ships as a <span> and is upgraded to an <a> by site.js the moment a store
   URL exists, so an unreleased badge is never a dead link. */
.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 15px;
  border-radius: var(--r-chip);
  background: var(--ink);
  color: var(--bg);
  text-decoration: none;
  line-height: 1.12;
  transition: transform 300ms var(--ease), opacity 300ms var(--ease), background-color 300ms var(--ease);
}

.store-badge svg { flex: none; }
.store-badge b {
  display: block;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: -0.018em;
}
.store-badge i { display: block; font-style: normal; opacity: 0.68; font-size: 0.63rem; letter-spacing: 0.04em; }

a.store-badge:hover { background: var(--green-deep); color: var(--bg); }
a.store-badge:active { transform: scale(0.975); }

.store-badge[aria-disabled='true'] { opacity: 0.42; cursor: default; user-select: none; }

.download-note { color: var(--faint); font-size: 0.8rem; line-height: 1.55; max-width: 48ch; }

/* --- Sections ------------------------------------------------------------ */

.section { padding-block: clamp(92px, 15vh, 168px); }

/* The last section ends on a deliberately empty band. The scene's closing
   shot, where the camera lifts and shows all three jobs at once, needs
   somewhere to land that is not behind a panel. */
.section:last-of-type { padding-bottom: clamp(200px, 32vh, 380px); }
.section-head { display: grid; gap: 16px; max-width: var(--measure); margin-bottom: clamp(38px, 6vw, 64px); }
.section-head p { color: var(--muted); }

/* --- Promise bento ------------------------------------------------------- */

/* Three claims, three cells, deliberately unequal: the first one carries the
   weight and gets the visual, the other two are quieter statements. */
.bento { display: grid; gap: 14px; }

@media (min-width: 860px) {
  .bento { grid-template-columns: 1.25fr 1fr; grid-template-rows: auto auto; }
  .bento > :first-child { grid-row: 1 / span 2; }
}

.tile {
  position: relative;
  display: grid;
  gap: 14px;
  align-content: start;
  padding: clamp(26px, 3.4vw, 40px);
  border-radius: var(--r-shell);
  background: var(--surface);
  box-shadow: var(--inner-light), var(--shadow-sm);
  overflow: hidden;
}

.tile p { color: var(--muted); font-size: 0.97rem; }

/* The lead tile gets real visual weight rather than another white card. */
.tile--lead {
  background:
    radial-gradient(120% 90% at 82% 6%, color-mix(in srgb, var(--mint) 88%, transparent), transparent 62%),
    var(--surface);
}

.tile--sunk { background: var(--bg-sunk); box-shadow: none; border: 1px solid var(--line-soft); }

.tile-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: var(--mint);
  color: var(--green);
}

/* The ledger inside the lead tile: what is held, what is taken. It does the
   job a stock photograph would do, with real numbers from the rate card. */
.ledger {
  margin-top: 6px;
  border-radius: var(--r-core);
  background: var(--surface-raised);
  box-shadow: var(--inner-light), var(--shadow-sm);
  overflow: hidden;
}

.ledger-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 18px;
  font-size: 0.88rem;
}

.ledger-row + .ledger-row { border-top: 1px solid var(--line-soft); }
.ledger-row span { color: var(--muted); }

.ledger-row b {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.ledger-row--final b { color: var(--green); }

/* --- Steps --------------------------------------------------------------- */

/* A different layout family from the bento: a vertical rail, not cards. */
.steps { display: grid; gap: 0; counter-reset: step; }

.step {
  display: grid;
  gap: 6px 26px;
  grid-template-columns: auto minmax(0, 1fr);
  padding-block: clamp(26px, 3.4vw, 38px);
  border-top: 1px solid var(--line-soft);
}

.step:last-child { border-bottom: 1px solid var(--line-soft); }

.step-mark {
  counter-increment: step;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  color: var(--muted);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.step-mark::before { content: counter(step, decimal-leading-zero); }

.step h3 { align-self: center; }
.step p { grid-column: 2; color: var(--muted); max-width: 54ch; }

@media (min-width: 760px) {
  .step { grid-template-columns: auto minmax(0, 22ch) minmax(0, 1fr); align-items: start; }
  .step h3 { align-self: start; padding-top: 6px; }
  .step p { grid-column: 3; padding-top: 6px; }
}

/* --- Audience split ------------------------------------------------------ */

.split { display: grid; gap: 14px; }
@media (min-width: 820px) { .split { grid-template-columns: 1fr 1fr; } }

.panel {
  display: grid;
  gap: 16px;
  align-content: start;
  padding: clamp(30px, 4vw, 52px);
  border-radius: var(--r-shell);
  background: var(--surface);
  box-shadow: var(--inner-light), var(--shadow-sm);
}

.panel p { color: var(--muted); max-width: 40ch; }
.panel--dark { background: var(--ink); }
.panel--dark h2, .panel--dark .kicker { color: var(--bg); }
.panel--dark p { color: color-mix(in srgb, var(--bg) 66%, transparent); }
.panel--dark .text-link { color: var(--bg); }

/* Service landing pages (santechnikas.html, …), generated by tools/build-website-services.cjs. */
.breadcrumbs { margin-bottom: 22px; font-size: 14px; color: var(--muted); }
.breadcrumbs a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.service-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 28px; }
.service-includes { display: grid; gap: 10px; padding: 0; margin: 0; list-style: none; }
@media (min-width: 720px) { .service-includes { grid-template-columns: 1fr 1fr; } }
.service-includes li { padding: 16px 18px 16px 44px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); position: relative; }
.service-includes li::before { content: ''; position: absolute; left: 18px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--green-bright, #0AD38B); }
.service-links { display: grid; gap: 8px; padding: 0; margin: 16px 0 0; list-style: none; }
@media (min-width: 520px) { .service-links { grid-template-columns: 1fr 1fr; } }
.service-links a { text-decoration: underline; text-underline-offset: 3px; }

/* Store download on masters.html: QR for desktop visitors, the button for phones. */
.app-download { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 24px; }
.app-download-qr { flex: none; width: 112px; height: 112px; border-radius: 12px; background: #fff; }
.app-download-copy { display: grid; justify-items: start; gap: 14px; }
@media (max-width: 600px) { .app-download-qr { display: none; } }

/* --- Inner pages --------------------------------------------------------- */

.page-head { padding-block: clamp(120px, 18vh, 190px) clamp(20px, 4vh, 44px); }
.page-head .wrap { display: grid; gap: 20px; max-width: 900px; }
.page-head .lead { max-width: 56ch; }

.prose { display: grid; gap: 14px; max-width: var(--measure); }
.prose p { color: var(--muted); }
.aside-note { color: var(--faint); font-size: 0.9rem; line-height: 1.6; max-width: 62ch; }

.block + .block { margin-top: clamp(48px, 7vw, 80px); }

/* Rates. A price table is the one place on this site where a real table is the
   right element: these are rows of comparable numbers, not a layout. */
/* A rate table is wider than a phone, so it scrolls inside its own box. The
   layered backgrounds are the no-JS scroll shadow: the two `local` layers move
   with the content and uncover a `scroll`-attached shadow at whichever edge
   still has something behind it. Without it there is no sign that the third
   column exists. */
.table-wrap {
  margin-top: 22px;
  border-radius: var(--r-shell);
  box-shadow: var(--inner-light), var(--shadow-sm);
  overflow-x: auto;
  background:
    linear-gradient(to right, var(--surface) 34%, rgba(255, 255, 255, 0)) left center,
    linear-gradient(to left, var(--surface) 34%, rgba(255, 255, 255, 0)) right center,
    radial-gradient(farthest-side at 0 50%, rgba(60, 52, 38, 0.16), rgba(60, 52, 38, 0)) left center,
    radial-gradient(farthest-side at 100% 50%, rgba(60, 52, 38, 0.16), rgba(60, 52, 38, 0)) right center,
    var(--surface);
  background-repeat: no-repeat;
  background-size: 48px 100%, 48px 100%, 16px 100%, 16px 100%, 100% 100%;
  background-attachment: local, local, scroll, scroll, local;
}

.rate-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.94rem;
  min-width: 440px;
}

.rate-table th,
.rate-table td { padding: 15px 22px; text-align: left; }

.rate-table thead th {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
  border-bottom: 1px solid var(--line-soft);
}

/* One hairline between rows, never a box around every cell. */
.rate-table tbody tr + tr td { border-top: 1px solid var(--line-soft); }
.rate-table td:first-child { color: var(--ink); font-weight: 600; }
.rate-table td:last-child,
.rate-table th:last-child { text-align: right; }

.rate-table td:last-child {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Two figures being compared rather than one price: both columns are numbers
   and must be set as numbers, or the left one reads as a label. */
.rate-table--dual td:nth-child(2),
.rate-table--dual th:nth-child(2) { text-align: right; }

.rate-table--dual td:nth-child(2) {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.note {
  margin-top: 24px;
  padding: 20px 24px;
  border-radius: var(--r-core);
  border: 1px solid var(--amber-line);
  background: var(--amber-soft);
  color: var(--amber-ink);
  font-size: 0.93rem;
  line-height: 1.65;
}

.note strong { color: inherit; }

/* FAQ. No boxes: items are separated by a single hairline, and the toggle is
   a plus that becomes a minus. */
.faq { margin-top: clamp(28px, 4vw, 40px); }

.faq details { border-top: 1px solid var(--line-soft); }
.faq details:last-of-type { border-bottom: 1px solid var(--line-soft); }

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0;
  cursor: pointer;
  list-style: none;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.014em;
  color: var(--ink);
  transition: color 240ms var(--ease);
}

.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--green); }

.faq summary::after {
  content: '';
  flex: none;
  width: 13px;
  height: 13px;
  background:
    linear-gradient(currentColor, currentColor) center/13px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center/1.5px 13px no-repeat;
  transition: transform 340ms var(--ease);
}

.faq details[open] summary::after { transform: rotate(90deg); background-size: 13px 1.5px, 0 0; }

.faq details p {
  padding-bottom: 24px;
  color: var(--muted);
  max-width: 68ch;
}

/* --- Footer -------------------------------------------------------------- */

/* Opaque on purpose: the scene runs behind the whole page, and the footer is
   the one block of small print that must never have a moving figure through
   it. It is also where the scene's closing shot stops. */
.site-footer {
  border-top: 1px solid var(--line);
  padding-block: clamp(56px, 8vh, 88px) 36px;
  background: var(--bg);
  color: var(--muted);
  font-size: 0.88rem;
}

.footer-grid {
  display: grid;
  gap: clamp(28px, 4vw, 48px);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  margin-bottom: 40px;
}

.site-footer h4 {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 14px;
}

.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.site-footer a { color: var(--text); text-decoration: none; }
.site-footer a:hover { color: var(--green); text-decoration: underline; }

.legal-line {
  padding-top: 26px;
  border-top: 1px solid var(--line-soft);
  font-size: 0.79rem;
  line-height: 1.7;
  color: var(--faint);
  max-width: 78ch;
}

/* --- Legal pages --------------------------------------------------------- */

.legal { padding-block: clamp(110px, 16vh, 150px) clamp(64px, 9vh, 104px); }

/* Narrow enough to keep the measure near 70 characters. Legal text is read
   line by line, and a 95-character line is where people lose their place. */
.legal .wrap { max-width: 720px; }

.legal-head { display: grid; gap: 16px; padding-bottom: 30px; border-bottom: 1px solid var(--line); }
.legal-meta { color: var(--muted); font-size: 0.84rem; }

.legal-body h2 { font-size: 1.22rem; letter-spacing: -0.022em; margin-top: 48px; margin-bottom: 12px; }
.legal-body h2:first-of-type { margin-top: 34px; }
.legal-body h3 { font-size: 1rem; margin-top: 26px; margin-bottom: 8px; }
.legal-body p { margin-bottom: 15px; }
.legal-body ul { margin: 0 0 15px; padding-left: 21px; }
.legal-body li { margin-bottom: 9px; }
.legal-body strong { color: var(--ink); }
.legal-body .muted { color: var(--muted); font-size: 0.84rem; }

.legal-body .intro {
  padding: 22px 24px;
  border-radius: var(--r-core);
  background: var(--surface);
  box-shadow: var(--inner-light), var(--shadow-sm);
  margin: 26px 0;
}

.legal-body .intro p:last-child { margin-bottom: 0; }

.legal-body .notice {
  padding: 16px 20px;
  border: 1px solid var(--amber-line);
  border-radius: var(--r-core);
  background: var(--amber-soft);
  color: var(--amber-ink);
  font-size: 0.92rem;
  margin: 22px 0;
}

.legal-body .notice p:last-child { margin-bottom: 0; }

/* The Lithuanian half, announced rather than merely separated: the two are the
   same document, not two sections. */
.legal-divider {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: clamp(60px, 9vw, 88px) 0 10px;
  scroll-margin-top: 110px;
}

.legal-divider::before,
.legal-divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }

.legal-divider span {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.legal-back { margin-top: 48px; font-size: 0.88rem; }
.legal-back a { text-decoration: none; }

#main { scroll-margin-top: 90px; }

/* --- Scroll entry -------------------------------------------------------- */

/* Heavy, slightly out of focus on the way in, so arrival has mass. */
.reveal { opacity: 0; transform: translateY(22px); filter: blur(6px); }

.reveal[data-shown='true'] {
  opacity: 1;
  transform: none;
  filter: none;
  transition:
    opacity 900ms var(--ease-soft),
    transform 900ms var(--ease-soft),
    filter 900ms var(--ease-soft);
  transition-delay: var(--reveal-delay, 0ms);
}

/* Nothing here is load bearing: if the observer never runs, content is
   visible anyway. */
.no-js .reveal { opacity: 1; transform: none; filter: none; }

/* --- Preferences --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .reveal { opacity: 1; transform: none; filter: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .nav-pill { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

@media (prefers-contrast: more) {
  :root { --line: #b3a68d; --line-soft: #c3b8a2; --muted: #4c5654; --faint: #5d6664; }
  .store-badge[aria-disabled='true'] { opacity: 0.72; }
  body::after { display: none; }
}

/* Shared public-page identity, kept outside generated legal HTML. */
:root, :root:not([data-theme='light']) {
  color-scheme: light;
  --bg:#F4F7F2; --bg-sunk:#EAF0E8; --surface:#FFFEFA; --surface-raised:#FFFFFF;
  --ink:#10231D; --text:#1C3029; --muted:#52645B; --faint:#52645B;
  --line:#D9DED8; --line-soft:#E4E9E1; --line-strong:#B8CABC;
  --green:#087653; --green-bright:#0AD38B; --green-deep:#10231D; --mint:#DDF6EC;
  --clay:#FF5A47; --r-shell:16px; --r-core:12px;
}
.brand>svg { display:none; }
.brand::before { content:''; display:block; width:34px; height:34px; border-radius:8px; background:url('assets/namugo-mark.svg') center/contain no-repeat; flex-shrink:0; }
.brand { font-size:25px; letter-spacing:-.04em; }
.site-header { position:relative; padding:18px 0; border-bottom:1px solid var(--line); background:var(--bg); }
.site-header .nav-pill { max-width:none; border:0; box-shadow:none; background:none; backdrop-filter:none; padding:0; }
.site-header .btn { background:var(--green-bright); color:var(--ink); border-radius:10px; }
.site-header .btn .disc { background:transparent; color:var(--ink); }
.page-head { padding-top:68px; }
.page-head h1 { font-size:clamp(38px,5vw,66px); max-width:950px; }
.page-head .kicker, .legal-head .kicker { display:none; }
.panel--dark { background:var(--mint); color:var(--ink); border-color:transparent; }
.panel--dark p, .panel--dark .text-link { color:var(--text); }
.panel--dark h2, .panel--dark .kicker { color:var(--ink); }
.site-footer { background:var(--bg-sunk); }
@media (max-width:600px) { .site-header .wrap { padding-inline:20px; }.site-header .nav-pill { gap:14px; }.brand { font-size:22px; }.site-nav { gap:15px; }.site-header .btn { display:none; }.page-head { padding-top:40px; }.page-head h1 { font-size:38px; } }

/* Lithuanian catalogue: prices are generated from the application's quote function. */
.price-controls{display:flex;flex-wrap:wrap;gap:20px;margin-bottom:20px}.price-controls[hidden]{display:none}
.price-controls label{display:grid;gap:8px;font-size:14px;font-weight:600;min-width:180px}
.price-controls select{font:inherit;color:var(--ink);background:#fff;border:1px solid #9daea6;border-radius:8px;padding:12px 36px 12px 14px;width:100%;min-width:0;max-width:100%;min-height:48px}
.catalogue-table th[scope=row]{text-transform:none;letter-spacing:normal;font-size:16px;font-weight:600}
.catalogue-table small{display:block;font-size:13px;font-weight:400;line-height:1.55;margin-top:6px;color:#4a625d}
.catalogue-table{table-layout:fixed;width:100%}.catalogue-table td:last-child{font-variant-numeric:tabular-nums;white-space:normal;min-width:0}
.catalogue-table th:first-child{width:60%}.price-controls select:focus-visible{outline:3px solid #007e60;outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.text-link [data-icon],.btn [data-icon]{width:18px;height:18px;display:inline-flex;flex:none}.text-link [data-icon] svg,.btn [data-icon] svg{width:100%;height:100%}
.legal-translation{margin-top:48px;padding-top:24px;border-top:1px solid #cdd9d3}.legal-translation>summary{cursor:pointer;font-weight:600;padding:16px 0}
.brand::before{display:none}.brand .brand-wordmark{width:190px;height:auto;border-radius:0}.site-nav a{display:inline-flex;align-items:center;min-height:44px}
@media(max-width:360px){.brand .brand-wordmark{width:112px!important}.site-header .site-nav{gap:10px}.site-header .site-nav a{font-size:12px}}
@media(max-width:600px){.brand .brand-wordmark{width:135px}.site-header .nav-pill{gap:10px;justify-content:space-between}.site-nav{gap:12px}.site-nav a{font-size:13px}.price-controls select{font-size:16px}.site-footer a{display:inline-flex;align-items:center;min-height:44px}.legal-body{overflow-wrap:anywhere}.site-footer{padding-bottom:max(28px,env(safe-area-inset-bottom))}}
@media(max-width:600px){.price-controls{display:grid;grid-template-columns:1fr}.price-controls label{min-width:0}.catalogue-table{min-width:0}.catalogue-table th,.catalogue-table td{padding:16px 10px!important;min-width:0;overflow-wrap:break-word}.catalogue-table th:first-child{width:49%}.catalogue-table small{font-size:12px}.catalogue-table th[scope=row],.catalogue-table td:last-child{font-size:14px}.page-head h1{overflow-wrap:break-word}}