/* =========================================================================
   BELYO landing — belyoapp.com
   Pure CSS, no framework. Single file ~1100 lines.
   Cascade layers: reset → tokens → base → components → utilities → motion
   ========================================================================= */

@layer reset, tokens, base, components, utilities, motion;

/* -------------------------------------------------------------------------
   1. RESET (modern-normalize subset, tuned)
   ------------------------------------------------------------------------- */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; padding: 0; }
  html { -webkit-text-size-adjust: 100%; tab-size: 4; }
  body { min-height: 100vh; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
  img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { background: none; border: 0; cursor: pointer; }
  a { color: inherit; text-decoration: none; }
  ul, ol { list-style: none; }
  h1, h2, h3, h4, h5, h6 { font-weight: inherit; font-size: inherit; }
  table { border-collapse: collapse; border-spacing: 0; }
  address { font-style: normal; }
  :focus { outline: none; }
  :focus-visible { outline: 2px solid var(--brand-purpura); outline-offset: 2px; border-radius: var(--radius-sm); }
}

/* -------------------------------------------------------------------------
   2. TOKENS (design system from DESIGN.md)
   OKLCH first, hex fallback via @supports nesting
   ------------------------------------------------------------------------- */
@layer tokens {
  :root {
    /* Brand */
    --brand-magenta: #A855F7;
    --brand-purpura: #6C63FF;
    --brand-rose:    #FF7EB3;
    --brand-amber:   #FFC371;
    --brand-night:   #0B1020;

    /* Light mode surfaces + ink (default) */
    --surface-base:   #FCFBFD;
    --surface-raised: #F7F4FA;
    --surface-deep:   #EFEAF2;
    --ink-primary:    #1A1830;
    --ink-secondary:  #5A576E;
    --ink-muted:      #8B889C;
    --line-soft:      #E6E0EB;

    /* Typography */
    --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
    --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

    --text-xs:   0.75rem;
    --text-sm:   0.875rem;
    --text-base: 1rem;
    --text-md:   1.125rem;
    --text-lg:   1.5rem;
    --text-xl:   2.25rem;
    --text-2xl:  3.5rem;
    --text-3xl:  5rem;

    --weight-regular:  400;
    --weight-medium:   500;
    --weight-semibold: 600;
    --weight-bold:     700;

    --leading-tight:  1.15;
    --leading-snug:   1.35;
    --leading-normal: 1.6;
    --leading-loose:  1.75;

    --measure: 68ch;

    /* Spacing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --space-9: 6rem;
    --space-10: 8rem;
    --space-11: 12rem;

    /* Containers */
    --container-narrow:  56rem;
    --container-default: 72rem;
    --container-wide:    88rem;

    /* Radius */
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   16px;
    --radius-xl:   24px;
    --radius-full: 9999px;

    /* Shadow */
    --shadow-card: 0 1px 2px rgba(26, 24, 48, 0.04), 0 4px 12px rgba(26, 24, 48, 0.06);

    /* Motion */
    --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
    --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
    --duration-instant:    100ms;
    --duration-fast:       200ms;
    --duration-base:       300ms;
    --duration-slow:       600ms;
    --duration-deliberate: 900ms;

    /* Header */
    --header-h-mobile:  56px;
    --header-h-desktop: 72px;
  }

  /* OKLCH upgrade where supported (Safari 16.4+, Chrome 111+, Firefox 113+) */
  @supports (color: oklch(0 0 0)) {
    :root {
      --brand-magenta: oklch(0.66 0.24 305);
      --brand-purpura: oklch(0.60 0.22 280);
      --brand-rose:    oklch(0.78 0.16 0);
      --brand-amber:   oklch(0.83 0.13 75);
      --brand-night:   oklch(0.18 0.04 270);

      --surface-base:   oklch(0.99 0.005 305);
      --surface-raised: oklch(0.97 0.008 305);
      --surface-deep:   oklch(0.94 0.012 305);
      --ink-primary:    oklch(0.20 0.02 280);
      --ink-secondary:  oklch(0.42 0.02 280);
      --ink-muted:      oklch(0.62 0.015 280);
      --line-soft:      oklch(0.92 0.01 305);

      --shadow-card: 0 1px 2px oklch(0.2 0.02 280 / 0.04), 0 4px 12px oklch(0.2 0.02 280 / 0.06);
    }
  }

  /* Dark mode — same scene re-imagined, NOT a flat inversion */
  @media (prefers-color-scheme: dark) {
    :root {
      --surface-base:   #0F0D1C;
      --surface-raised: #181527;
      --surface-deep:   #221E33;
      --ink-primary:    #F4F1F8;
      --ink-secondary:  #B8B4C6;
      --ink-muted:      #807D90;
      --line-soft:      #363149;
      --shadow-card:    0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3);
    }
    @supports (color: oklch(0 0 0)) {
      :root {
        --surface-base:   oklch(0.12 0.025 280);
        --surface-raised: oklch(0.17 0.03 280);
        --surface-deep:   oklch(0.22 0.035 280);
        --ink-primary:    oklch(0.96 0.005 305);
        --ink-secondary:  oklch(0.75 0.015 280);
        --ink-muted:      oklch(0.55 0.015 280);
        --line-soft:      oklch(0.28 0.02 280);
      }
    }
  }
}

/* -------------------------------------------------------------------------
   3. BASE
   ------------------------------------------------------------------------- */
@layer base {
  html { scroll-behavior: smooth; scroll-padding-top: var(--header-h-desktop); }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

  body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: var(--weight-regular);
    line-height: var(--leading-normal);
    color: var(--ink-primary);
    background: var(--surface-base);
    overflow-x: hidden;
  }

  h1, h2, h3 { font-family: var(--font-display); font-weight: var(--weight-bold); line-height: var(--leading-tight); letter-spacing: -0.02em; color: var(--ink-primary); }
  h4 { font-family: var(--font-body); font-weight: var(--weight-semibold); }

  p { color: var(--ink-primary); }
  p + p { margin-top: var(--space-4); }

  a { color: var(--brand-purpura); transition: color var(--duration-fast) var(--ease-out-quart); }
  a:hover { color: var(--brand-magenta); }
  a.mono { font-family: var(--font-mono); font-size: 0.95em; }

  .mono { font-family: var(--font-mono); }
  .muted { color: var(--ink-muted); }

  ::selection { background: var(--brand-magenta); color: var(--surface-base); }
}

/* -------------------------------------------------------------------------
   4. COMPONENTS
   ------------------------------------------------------------------------- */
@layer components {

  /* --- Skip link (a11y) --- */
  .skip-link {
    position: absolute; top: -100px; left: var(--space-4); z-index: 200;
    background: var(--ink-primary); color: var(--surface-base);
    padding: var(--space-3) var(--space-5); border-radius: var(--radius-md);
    font-weight: var(--weight-semibold); font-size: var(--text-sm);
    transition: top var(--duration-fast) var(--ease-out-quart);
  }
  .skip-link:focus-visible { top: var(--space-4); }

  /* --- Container --- */
  .container { width: 100%; max-width: var(--container-default); margin: 0 auto; padding: 0 var(--space-5); }
  .container--narrow { max-width: var(--container-narrow); }
  .container--wide   { max-width: var(--container-wide); }

  /* --- Header / Nav --- */
  .site-header {
    position: sticky; top: 0; z-index: 100;
    background: color-mix(in oklab, var(--surface-base) 85%, transparent);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--line-soft);
  }
  @supports not (backdrop-filter: blur(1px)) { .site-header { background: var(--surface-base); } }

  .site-header__inner {
    max-width: var(--container-wide); margin: 0 auto;
    height: var(--header-h-mobile);
    padding: 0 var(--space-5);
    display: flex; align-items: center; gap: var(--space-5);
  }
  @media (min-width: 960px) {
    .site-header__inner { height: var(--header-h-desktop); }
  }

  .brand { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1; gap: 2px; min-width: 0; }
  .brand__wordmark {
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    font-size: 1.5rem;
    color: var(--brand-magenta);
    letter-spacing: -0.04em;
  }
  .brand__sub {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    color: var(--ink-secondary);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: var(--weight-medium);
  }

  .site-nav { display: none; flex: 1; }
  @media (min-width: 960px) {
    .site-nav { display: flex; justify-content: center; }
    .site-nav__list { display: flex; gap: var(--space-6); }
    .site-nav__list a {
      color: var(--ink-secondary);
      font-size: var(--text-sm);
      font-weight: var(--weight-medium);
      letter-spacing: 0.01em;
      padding: var(--space-2) var(--space-1);
      border-bottom: 1px solid transparent;
      transition: color var(--duration-fast) var(--ease-out-quart), border-color var(--duration-fast) var(--ease-out-quart);
    }
    .site-nav__list a:hover { color: var(--ink-primary); border-bottom-color: var(--brand-magenta); }
  }

  .header-actions { display: flex; align-items: center; gap: var(--space-3); margin-left: auto; }

  .lang-switch {
    display: inline-flex;
    background: var(--surface-raised);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-full);
    padding: 2px;
  }
  .lang-switch__btn {
    padding: var(--space-1) var(--space-4);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.02em;
    color: var(--ink-secondary);
    transition: background var(--duration-fast) var(--ease-out-quart), color var(--duration-fast) var(--ease-out-quart);
  }
  .lang-switch__btn:hover { color: var(--ink-primary); }
  .lang-switch__btn.is-active {
    background: var(--brand-magenta);
    color: #FCFBFD;
  }

  .nav-burger {
    display: inline-flex; flex-direction: column; justify-content: center; align-items: center;
    width: 40px; height: 40px; gap: 5px;
    border-radius: var(--radius-md);
  }
  .nav-burger span { display: block; width: 20px; height: 2px; background: var(--ink-primary); border-radius: 2px; transition: transform var(--duration-base) var(--ease-out-quart), opacity var(--duration-fast) var(--ease-out-quart); }
  .nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  @media (min-width: 960px) { .nav-burger { display: none; } }

  .mobile-nav {
    background: var(--surface-base);
    border-bottom: 1px solid var(--line-soft);
  }
  .mobile-nav ul { display: flex; flex-direction: column; padding: var(--space-3) var(--space-5) var(--space-5); gap: var(--space-1); }
  .mobile-nav a {
    display: block;
    padding: var(--space-3) var(--space-2);
    font-size: var(--text-md);
    font-weight: var(--weight-medium);
    color: var(--ink-primary);
    border-bottom: 1px solid var(--line-soft);
  }
  .mobile-nav a:hover { color: var(--brand-magenta); }
  @media (min-width: 960px) { .mobile-nav { display: none !important; } }

  /* --- Buttons --- */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.01em;
    line-height: 1.2;
    transition: background var(--duration-fast) var(--ease-out-quart), transform var(--duration-fast) var(--ease-out-quart), border-color var(--duration-fast) var(--ease-out-quart), color var(--duration-fast) var(--ease-out-quart);
    cursor: pointer;
    white-space: nowrap;
  }
  .btn--primary {
    background: var(--brand-magenta);
    color: #FCFBFD;
    border: 1px solid var(--brand-magenta);
  }
  .btn--primary:hover { background: var(--brand-purpura); border-color: var(--brand-purpura); color: #FCFBFD; transform: translateY(-1px); }
  .btn--primary:active { transform: translateY(0); }

  .btn--secondary {
    background: transparent;
    color: var(--ink-primary);
    border: 1px solid var(--ink-primary);
  }
  .btn--secondary:hover { background: var(--surface-raised); transform: translateY(-1px); color: var(--ink-primary); }
  .btn--secondary:active { transform: translateY(0); }

  .btn--ghost {
    background: var(--surface-raised);
    color: var(--ink-secondary);
    border: 1px solid var(--line-soft);
  }
  .btn--disabled { cursor: not-allowed; opacity: 0.7; }
  .btn--disabled:hover { transform: none; }

  .btn--text {
    background: transparent;
    color: var(--brand-purpura);
    padding: var(--space-2) var(--space-3);
    border: none;
  }
  .btn--text:hover { color: var(--brand-magenta); }

  .ext-arrow { display: inline-block; margin-left: var(--space-1); transition: transform var(--duration-fast) var(--ease-out-quart); }
  .btn--text:hover .ext-arrow { transform: translate(1px, -1px); }

  /* --- Hero --- */
  .hero {
    position: relative;
    padding: var(--space-9) 0 var(--space-9);
    min-height: 70vh;
    overflow: hidden;
  }
  @media (min-width: 960px) {
    .hero { padding: var(--space-11) 0 var(--space-10); min-height: 80vh; }
  }

  .hero__blob {
    position: absolute;
    top: -10%;
    left: -10%;
    width: 70vw;
    height: 70vw;
    max-width: 900px;
    max-height: 900px;
    background: radial-gradient(circle at 30% 30%, var(--brand-magenta) 0%, transparent 55%),
                radial-gradient(circle at 60% 50%, var(--brand-purpura) 0%, transparent 50%);
    opacity: 0.18;
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
  }
  @media (prefers-color-scheme: dark) { .hero__blob { opacity: 0.32; } }

  .hero__inner {
    position: relative; z-index: 1;
    max-width: var(--container-wide);
    margin: 0 auto;
    padding: 0 var(--space-5);
    display: grid;
    gap: var(--space-7);
    grid-template-columns: 1fr;
    align-items: center;
  }
  @media (min-width: 960px) {
    .hero__inner { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--space-8); }
  }

  .hero__eyebrow {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--brand-magenta);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-bottom: var(--space-4);
  }

  .hero__h1 {
    font-size: clamp(2.25rem, 5.5vw, 3.5rem);
    line-height: var(--leading-tight);
    max-width: 18ch;
    margin-bottom: var(--space-5);
  }

  .hero__sub {
    font-size: clamp(var(--text-md), 1.5vw, var(--text-lg));
    color: var(--ink-secondary);
    line-height: var(--leading-snug);
    max-width: 48ch;
    margin-bottom: var(--space-5);
    font-weight: var(--weight-medium);
  }

  .hero__note {
    font-size: var(--text-sm);
    color: var(--ink-muted);
    line-height: var(--leading-normal);
    max-width: 56ch;
    margin-bottom: var(--space-7);
  }

  .hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); }

  .hero__art {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .v3-bel {
    width: clamp(140px, 30vw, 320px);
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 22%;
    box-shadow: 0 24px 60px rgba(168, 85, 247, 0.25), 0 8px 20px rgba(108, 99, 255, 0.18);
  }

  /* --- Section base --- */
  .section { padding: var(--space-9) 0; position: relative; }
  @media (min-width: 960px) {
    .section--about    { padding: var(--space-10) 0; }
    .section--product  { padding: var(--space-9) 0; }
    .section--press    { padding: var(--space-9) 0; }
    .section--contact  { padding: var(--space-10) 0; }
  }
  .section--about, .section--press { background: var(--surface-raised); }

  .section__head { margin-bottom: var(--space-7); }
  .section__h2 {
    font-size: clamp(1.75rem, 3.5vw, var(--text-xl));
    line-height: var(--leading-tight);
    max-width: 22ch;
    margin-bottom: var(--space-3);
  }
  .section__rule {
    width: 48px;
    height: 4px;
    background: var(--brand-magenta);
    border-radius: 2px;
  }

  /* --- Prose --- */
  .prose { max-width: var(--measure); margin-bottom: var(--space-8); }
  .prose p { font-size: var(--text-md); line-height: var(--leading-normal); color: var(--ink-primary); }
  .prose p + p { margin-top: var(--space-5); }

  .lead { font-size: var(--text-md); line-height: var(--leading-snug); color: var(--ink-secondary); max-width: 56ch; margin-bottom: var(--space-7); }

  /* --- Legal table --- */
  .legal-table { margin-bottom: var(--space-7); }
  .legal-table__caption {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-secondary);
    margin-bottom: var(--space-3);
  }
  .legal-table table {
    width: 100%;
    background: var(--surface-base);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-md);
    overflow: hidden;
    font-size: var(--text-base);
  }
  .legal-table thead th {
    background: var(--surface-deep);
    color: var(--ink-primary);
    font-family: var(--font-body);
    font-weight: var(--weight-semibold);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: var(--space-3) var(--space-4);
    text-align: left;
    border-bottom: 1px solid var(--line-soft);
  }
  .legal-table tbody th, .legal-table tbody td {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    border-bottom: 1px solid var(--line-soft);
    vertical-align: top;
  }
  .legal-table tbody tr:last-child th, .legal-table tbody tr:last-child td { border-bottom: 0; }
  .legal-table tbody th {
    font-weight: var(--weight-medium);
    color: var(--ink-secondary);
    width: 38%;
    background: color-mix(in oklab, var(--surface-base) 70%, var(--surface-raised));
  }
  .legal-table tbody td { color: var(--ink-primary); }
  .legal-table tbody tr:hover td, .legal-table tbody tr:hover th { background: var(--surface-raised); }
  .legal-table .mono { font-family: var(--font-mono); font-size: 0.97em; }

  @media (max-width: 640px) {
    .legal-table thead { display: none; }
    .legal-table tr { display: block; padding: var(--space-3); border-bottom: 1px solid var(--line-soft); }
    .legal-table tr:last-child { border-bottom: 0; }
    .legal-table th, .legal-table td { display: block; padding: var(--space-1) 0; border: 0; }
    .legal-table tbody th { width: auto; background: transparent; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; }
  }

  /* --- Product section --- */
  .product-intro { margin-bottom: var(--space-7); max-width: var(--measure); }
  .product-intro__eyebrow {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--brand-magenta);
    margin-bottom: var(--space-2);
  }
  .product-intro__tagline {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    letter-spacing: -0.01em;
    line-height: var(--leading-snug);
    margin-bottom: var(--space-3);
  }
  .product-intro__body { color: var(--ink-secondary); font-size: var(--text-md); line-height: var(--leading-normal); }

  .diff-grid {
    display: grid; gap: var(--space-4);
    grid-template-columns: 1fr;
    margin-bottom: var(--space-7);
  }
  @media (min-width: 640px) { .diff-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 960px) { .diff-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); } }

  .diff-card {
    position: relative;
    background: var(--surface-base);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-lg);
    padding: var(--space-7) var(--space-6) var(--space-6);
    box-shadow: var(--shadow-card);
    display: flex; flex-direction: column;
    transition: transform var(--duration-fast) var(--ease-out-quart), border-color var(--duration-fast) var(--ease-out-quart);
  }
  @media (prefers-color-scheme: dark) { .diff-card { background: var(--surface-raised); } }
  .diff-card:hover { transform: translateY(-2px); border-color: var(--brand-magenta); }

  .diff-card__num {
    position: absolute;
    top: var(--space-5);
    left: var(--space-5);
    width: 32px; height: 32px;
    background: var(--brand-magenta);
    color: #FCFBFD;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    font-size: var(--text-base);
  }
  .diff-card__h3 {
    margin-top: var(--space-7);
    margin-bottom: var(--space-3);
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    letter-spacing: -0.01em;
    color: var(--ink-primary);
  }
  .diff-card__body {
    color: var(--ink-secondary);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
  }

  .product-meta {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: 1fr;
    margin-bottom: var(--space-7);
    padding: var(--space-5);
    background: var(--surface-raised);
    border-left: 0;
    border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
  }
  @media (min-width: 640px) { .product-meta { grid-template-columns: repeat(3, 1fr); } }
  .product-meta dt {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-secondary);
    margin-bottom: var(--space-1);
  }
  .product-meta dd {
    font-size: var(--text-base);
    color: var(--ink-primary);
    font-weight: var(--weight-medium);
  }

  .product-cta {
    display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center;
    margin-bottom: var(--space-8);
  }

  .grow-card {
    background: var(--surface-base);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    max-width: var(--measure);
  }
  .grow-card__h3 {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--brand-purpura);
    margin-bottom: var(--space-3);
  }
  .grow-card__body { color: var(--ink-secondary); line-height: var(--leading-normal); }

  /* --- Press / Investors --- */
  .press-grid {
    display: grid; gap: var(--space-7);
    grid-template-columns: 1fr;
  }
  @media (min-width: 720px) { .press-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-8); } }

  .press-grid__col p { color: var(--ink-primary); line-height: var(--leading-normal); }
  .press-grid__col p + p { margin-top: var(--space-4); }

  .press-presskit {
    margin: var(--space-6) 0;
    padding: var(--space-5);
    background: var(--surface-base);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-md);
  }
  .press-presskit__label { font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.1em; color: var(--brand-magenta); margin-bottom: var(--space-2); }
  .press-presskit__value { color: var(--ink-secondary); font-size: var(--text-base); }

  .press-founder__h3 {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--ink-primary);
    margin-top: var(--space-6);
    margin-bottom: var(--space-3);
    font-family: var(--font-display);
  }

  .press-contacts {
    background: var(--surface-base);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
  }
  .press-contacts h3 {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    margin-bottom: var(--space-4);
  }
  .press-contacts dl > div { padding: var(--space-3) 0; border-bottom: 1px solid var(--line-soft); }
  .press-contacts dl > div:last-child { border-bottom: 0; }
  .press-contacts dt { font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-secondary); margin-bottom: var(--space-1); }
  .press-contacts dd a { color: var(--brand-purpura); }
  .press-contacts dd a:hover { color: var(--brand-magenta); }

  /* --- Contact section --- */
  .company-card {
    margin-top: var(--space-7);
    padding: var(--space-6);
    background: var(--surface-raised);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-lg);
    max-width: 38rem;
  }
  .company-card h3 {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    margin-bottom: var(--space-3);
  }
  .company-card__addr {
    font-style: normal;
    line-height: var(--leading-loose);
    color: var(--ink-primary);
  }

  /* --- Footer --- */
  .site-footer {
    background: var(--surface-deep);
    border-top: 1px solid var(--brand-magenta);
    padding: var(--space-9) 0 var(--space-7);
    margin-top: var(--space-9);
  }

  .footer-grid {
    display: grid; gap: var(--space-7);
    grid-template-columns: 1fr;
    margin-bottom: var(--space-8);
  }
  @media (min-width: 640px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 960px) { .footer-grid { grid-template-columns: minmax(0, 1.4fr) repeat(2, 1fr); gap: var(--space-7); } }

  .footer-grid__brand { position: relative; }
  .brand__wordmark--footer { font-size: 2rem; display: inline-block; margin-bottom: var(--space-3); }
  .footer-tagline { color: var(--ink-secondary); font-size: var(--text-sm); max-width: 32ch; }
  .v3-bel--footer {
    width: 48px;
    height: 48px;
    margin-top: var(--space-4);
    border-radius: 22%;
    box-shadow: 0 4px 12px rgba(168, 85, 247, 0.18);
  }

  .footer-grid h4 {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ink-secondary);
    margin-bottom: var(--space-4);
    font-weight: var(--weight-semibold);
  }
  .footer-grid ul li { padding: var(--space-1) 0; }
  .footer-grid ul a { color: var(--ink-primary); font-size: var(--text-sm); font-weight: var(--weight-medium); transition: color var(--duration-fast) var(--ease-out-quart); }
  .footer-grid ul a:hover { color: var(--brand-magenta); }
  .footer-grid ul .muted { color: var(--ink-muted); font-size: var(--text-sm); }

  .footer-baseline {
    padding-top: var(--space-6);
    border-top: 1px solid var(--line-soft);
    display: flex; flex-direction: column; gap: var(--space-2);
  }
  .footer-baseline p { font-size: var(--text-xs); color: var(--ink-muted); line-height: var(--leading-loose); }
  @media (min-width: 720px) {
    .footer-baseline { flex-direction: row; justify-content: space-between; align-items: baseline; }
  }
}

/* -------------------------------------------------------------------------
   5. UTILITIES
   ------------------------------------------------------------------------- */
@layer utilities {
  .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;
  }
}

/* -------------------------------------------------------------------------
   6. MOTION (section reveal + V3 wink)
   ------------------------------------------------------------------------- */
@layer motion {
  .reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity var(--duration-slow) var(--ease-out-expo), transform var(--duration-slow) var(--ease-out-expo);
    will-change: opacity, transform;
  }
  .reveal.is-visible { opacity: 1; transform: translateY(0); }

  /* V3 wink — both eyes blink together briefly */
  .v3-bel .v3-eye-left {
    transform-origin: 32px 30px;
    animation: v3-blink 9s ease-in-out infinite;
  }

  @keyframes v3-blink {
    0%, 88%, 92%, 100% { transform: scaleY(1); }
    90% { transform: scaleY(0.1); }
  }

  @media (prefers-reduced-motion: reduce) {
    .reveal, .reveal.is-visible { opacity: 1; transform: none; transition: none; }
    .v3-bel .v3-eye-left { animation: none; }
    .v3-bel { transition: none !important; }
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  }
}

/* -------------------------------------------------------------------------
   7. PRINT — Apple verifikatorius gali atspausdinti
   ------------------------------------------------------------------------- */
@media print {
  html, body { background: #fff; color: #000; font-size: 11pt; }
  .site-header, .mobile-nav, .lang-switch, .nav-burger, .hero__blob, .v3-bel, .product-cta, .skip-link { display: none !important; }
  .hero { min-height: 0; padding: 1rem 0 0; }
  .hero__h1 { font-size: 24pt; color: #000; }
  .hero__sub, .hero__note { color: #333; }
  .section { padding: 1.5rem 0; break-inside: avoid; background: #fff !important; }
  .section__h2 { color: #000; font-size: 18pt; }
  .section__rule { background: #000; }
  .legal-table table, .legal-table thead th, .legal-table tbody th, .legal-table tbody td { background: #fff !important; color: #000; border-color: #000; }
  .footer-grid { display: block; }
  a { color: #000; text-decoration: underline; }
  a[href^="mailto:"]::after, a[href^="https://belyo"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}