/* cyrillic */

/* latin-ext */

/* latin */

/* cyrillic */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/geist-400-cyrillic-d59c4095.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/geist-400-latinext-12ffd1b0.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/geist-400-latin-284d2af3.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/geist-500-cyrillic-d59c4095.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/geist-500-latinext-12ffd1b0.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/geist-500-latin-284d2af3.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/geist-600-cyrillic-d59c4095.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/geist-600-latinext-12ffd1b0.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/geist-600-latin-284d2af3.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */

/* latin-ext */

/* latin */

/* cyrillic */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/geistmono-400-cyrillic-d03a9952.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/geistmono-400-latinext-1579fb36.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/geistmono-400-latin-bd0693c1.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/geistmono-500-cyrillic-d03a9952.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/geistmono-500-latinext-1579fb36.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/geistmono-500-latin-bd0693c1.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/newsreader-400i-latinext-15adcd29.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/newsreader-400i-latinext-31b46868.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/newsreader-400i-latin-a6974fdd.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */

/* latin-ext */

/* latin */




  :root{
    --bg: #07080A;
    --bg-2: #0B0D11;
    --surface-1: #0E1116;
    --surface-2: #14181F;
    --hairline: rgba(255,255,255,0.08);
    --hairline-strong: rgba(255,255,255,0.14);
    --ink: #F5F5F7;
    --ink-2: rgba(245,245,247,0.66);
    /* muted tiers are kept above the WCAG AA 4.5:1 floor on --bg (was .42/.22 → 3.8:1/1.8:1) */
    --ink-3: rgba(245,245,247,0.54);
    --ink-4: rgba(245,245,247,0.50);
    --accent: oklch(0.80 0.13 230);
    --accent-2: oklch(0.82 0.12 65);
    --good: oklch(0.78 0.14 155);
    --bad: oklch(0.72 0.18 25);
    --serif: "Newsreader", Georgia, serif;
    --sans: "Geist", system-ui, -apple-system, sans-serif;
    --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  }

  *, *::before, *::after { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  html { scroll-behavior: smooth; background: var(--bg); }
  body{
    font-family: var(--sans);
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-feature-settings: "ss01","cv11";
    overflow-x: hidden;
  }
  ::selection { background: oklch(0.80 0.13 230 / 0.4); }

  /* === lang transition === */
  body.lang-switching [data-i18n]{
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .18s ease, transform .18s ease;
  }
  [data-i18n]{
    transition: opacity .28s ease .04s, transform .28s ease .04s;
  }

  /* === reveal === */
  /* Only hide reveals once JS has confirmed it can un-hide them again.
     Without JS (or in webviews where scripts don't run) content stays visible. */
  html.js .reveal{ opacity: 0; transform: translateY(24px); transition: opacity .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1), filter .9s ease; }
  html.js .reveal.in{ opacity: 1; transform: none; }
  .reveal.delay-1{ transition-delay: .08s; }
  .reveal.delay-2{ transition-delay: .16s; }
  .reveal.delay-3{ transition-delay: .24s; }
  .reveal.delay-4{ transition-delay: .32s; }
  /* headings gently focus in from a blur — a premium signature */
  html.js h1.reveal, html.js h2.reveal{ filter: blur(14px); transform: translateY(28px); }
  html.js h1.reveal.in, html.js h2.reveal.in{ filter: blur(0); transform: none; }
  /* staggered children reveal (choreographed, one after another) */
  html.js .stagger > *{ opacity: 0; transform: translateY(20px); transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1); }
  html.js .stagger.in > *{ opacity: 1; transform: none; }
  html.js .stagger.in > *:nth-child(1){ transition-delay: .04s; }
  html.js .stagger.in > *:nth-child(2){ transition-delay: .12s; }
  html.js .stagger.in > *:nth-child(3){ transition-delay: .20s; }
  html.js .stagger.in > *:nth-child(4){ transition-delay: .28s; }
  html.js .stagger.in > *:nth-child(5){ transition-delay: .36s; }
  html.js .stagger.in > *:nth-child(6){ transition-delay: .44s; }

  /* === nav === */
  nav.topbar{
    position: fixed; top: 0; left: 0; right: 0; z-index: 50;
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px clamp(20px, 4vw, 56px);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    background: rgba(7,8,10,0.55);
    border-bottom: 1px solid transparent;
    transition: border-color .3s ease, background .3s ease;
  }
  nav.topbar.scrolled{ border-bottom-color: var(--hairline); background: rgba(7,8,10,0.85); }
  .brand{
    display: inline-flex; align-items: center; gap: 10px;
    font-weight: 600; letter-spacing: -0.01em; color: var(--ink); font-size: 15px;
    text-decoration: none;
  }
  .brand .logo{
    width: 22px; height: 22px; border: 1.4px solid var(--ink); border-radius: 5px;
    position: relative; display: inline-flex;
  }
  .brand .logo::before{
    content:""; position:absolute; inset: 3px; background: var(--ink); border-radius: 1px;
    clip-path: polygon(0 100%, 28% 60%, 50% 78%, 100% 0, 100% 100%);
  }
  nav.topbar .links{
    display: flex; gap: 28px; align-items: center;
  }
  nav.topbar .links a{
    color: var(--ink-2); font-size: 14px; text-decoration: none; transition: color .2s ease;
  }
  @media (hover: hover) and (pointer: fine){ nav.topbar .links a:hover{ color: var(--ink); } }
  @media (max-width: 880px){ nav.topbar .links a, nav.topbar .nav-dd{ display:none; } }
  /* products dropdown */
  .nav-dd{ position: relative; }
  .nav-dd-trigger{ background: none; border: 0; padding: 0; font: inherit; color: var(--ink-2); font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: color .2s ease; }
  .nav-dd-trigger svg{ width: 11px; height: 11px; opacity: .65; transition: transform .25s ease; }
  .nav-dd:hover .nav-dd-trigger, .nav-dd:focus-within .nav-dd-trigger{ color: var(--ink); }
  .nav-dd:hover .nav-dd-trigger svg, .nav-dd:focus-within .nav-dd-trigger svg{ transform: rotate(180deg); }
  .nav-dd-panel{ position: absolute; top: calc(100% + 16px); left: 50%; transform: translateX(-50%) translateY(-8px); min-width: 320px; padding: 10px; border-radius: 18px; background: rgba(13,15,19,0.92); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border: 1px solid var(--hairline); box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 30px 70px -28px rgba(0,0,0,0.92); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .22s ease, transform .22s ease; display: flex; flex-direction: column; gap: 2px; z-index: 60; }
  .nav-dd-panel::before{ content: ""; position: absolute; top: -16px; left: 0; right: 0; height: 16px; }
  .nav-dd:hover .nav-dd-panel, .nav-dd:focus-within .nav-dd-panel{ opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
  .nav-dd-item{ display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-radius: 12px; text-decoration: none; transition: background .18s ease; }
  .nav-dd-item:hover{ background: rgba(255,255,255,0.05); }
  .nav-dd-item.active{ background: rgba(255,255,255,0.04); }
  .nav-dd-item .t{ color: var(--ink); font-size: 14px; font-weight: 500; }
  .nav-dd-item .d{ color: var(--ink-3); font-size: 12px; line-height: 1.35; }
  /* Narrow phones (e.g. iPhone): keep header items from overlapping /
     running off-screen. Shrink padding, let the brand truncate, and drop the
     header CTA (the hero + contact sections still carry it). */
  @media (max-width: 560px){
    nav.topbar{ padding: 14px 16px; gap: 10px; }
    nav.topbar .brand span:last-child{
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    nav.topbar > div:last-child > .cta{ display: none; }
  }

  .lang-switch{
    display: inline-flex; align-items: center; gap: 0;
    padding: 4px; border: 1px solid var(--hairline); border-radius: 999px;
    background: rgba(255,255,255,0.025);
    font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em;
  }
  .lang-switch button{
    appearance: none; background: transparent; border: 0; cursor: pointer;
    color: var(--ink-3); padding: 6px 14px; border-radius: 999px;
    font-family: inherit; font-size: inherit; letter-spacing: inherit;
    text-transform: uppercase; transition: color .2s ease, background .3s ease;
    touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  }
  .lang-switch button.active{
    color: var(--bg); background: var(--ink);
  }

  .cta{
    display: inline-flex; align-items: center; gap: 10px;
    padding: 10px 18px; border-radius: 999px;
    background: var(--ink); color: var(--bg);
    font-size: 14px; font-weight: 500; letter-spacing: -0.005em;
    text-decoration: none; transition: transform .2s ease, background .2s ease;
    touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  }
  @media (hover: hover) and (pointer: fine){ .cta:hover{ transform: translateY(-1px); background: #fff; } }
  .cta-ghost{
    display: inline-flex; align-items: center; gap: 10px;
    padding: 10px 18px; border-radius: 999px;
    border: 1px solid var(--hairline); color: var(--ink);
    font-size: 14px; text-decoration: none; transition: border-color .2s ease;
    touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  }
  @media (hover: hover) and (pointer: fine){ .cta-ghost:hover{ border-color: var(--hairline-strong); } }

  /* === sections === */
  html{ scroll-behavior: smooth; scroll-padding-top: 12px; }
  section{ position: relative; scroll-margin-top: 0; }
  .section{
    padding: clamp(80px, 9vw, 120px) clamp(20px, 4vw, 56px);
    max-width: 1440px; margin: 0 auto;
  }
  /* tighter vertical rhythm on phones (avoids large empty gaps between sections) */
  @media (max-width: 640px){ .section{ padding-top: 60px; padding-bottom: 60px; } }
  .eyebrow{
    font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--ink-3); display: inline-flex; align-items: center; gap: 12px;
  }
  .eyebrow::before{
    content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
    box-shadow: 0 0 0 4px oklch(0.80 0.13 230 / 0.18);
    animation: dot-pulse 2.6s ease-in-out infinite;
  }
  @keyframes dot-pulse{
    0%, 100%{ box-shadow: 0 0 0 3px oklch(0.80 0.13 230 / 0.22), 0 0 8px oklch(0.80 0.13 230 / 0.4); }
    50%{ box-shadow: 0 0 0 7px oklch(0.80 0.13 230 / 0.08), 0 0 14px oklch(0.80 0.13 230 / 0.25); }
  }
  h1, h2, h3, h4 { margin: 0; font-weight: 500; letter-spacing: -0.025em; }
  /* Russian compounds ("автоматизированная") can be wider than a grid column;
     without this the column refuses to shrink and the page scrolls sideways. */
  h1, h2, h3, h4, .lede, .big { overflow-wrap: break-word; hyphens: auto; }
  h1{ font-size: clamp(48px, 7vw, 112px); line-height: 0.96; }
  h2{ font-size: clamp(40px, 5.4vw, 80px); line-height: 1.0; letter-spacing: -0.028em; }
  h3{ font-size: clamp(24px, 2vw, 32px); line-height: 1.2; letter-spacing: -0.018em; }
  h4{ font-size: 20px; line-height: 1.3; }
  .ital{ font-family: var(--serif); font-style: italic; font-weight: 400; }
  p{ margin: 0; color: var(--ink-2); line-height: 1.55; }
  strong, b{ font-weight: 600; }
  .lede{ font-size: clamp(18px, 1.6vw, 22px); color: var(--ink-2); max-width: 56ch; }
  .label{ font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
  .mono{ font-family: var(--mono); font-size: 13px; letter-spacing: 0.06em; color: var(--ink-3); }

  /* visually hidden until focused, so keyboard users get a way past the nav */
  .skip-link{
    position: fixed; top: 10px; left: 10px; z-index: 200;
    padding: 10px 16px; border-radius: 8px;
    background: var(--ink); color: var(--bg);
    font-family: var(--sans); font-size: 14px; font-weight: 500; text-decoration: none;
    transform: translateY(-160%); transition: transform .2s ease;
  }
  .skip-link:focus{ transform: translateY(0); outline: 2px solid var(--accent); outline-offset: 2px; }

  /* === HERO === */
  .hero{
    min-height: 100vh; padding: 140px clamp(20px, 4vw, 56px) 80px;
    max-width: 1440px; margin: 0 auto;
    display: flex; flex-direction: column; justify-content: center;
    position: relative;
  }
  .hero-grid{
    position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background-image:
      linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size: 80px 80px;
    -webkit-mask-image: radial-gradient(ellipse at 60% 30%, black 25%, transparent 75%); mask-image: radial-gradient(ellipse at 60% 30%, black 25%, transparent 75%);
  }
  .hero-glow{
    position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background:
      radial-gradient(50% 40% at 80% 10%, oklch(0.55 0.15 230 / 0.20), transparent 60%),
      radial-gradient(40% 30% at 10% 90%, oklch(0.55 0.10 30 / 0.10), transparent 60%);
  }
  .hero-inner{ position: relative; z-index: 1; }
  /* hero two-column layout with globe */
  .hero-layout{ display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(24px, 4vw, 64px); align-items: center; width: 100%; }
  @media (max-width: 980px){ .hero-layout{ grid-template-columns: 1fr; } }
  .hero-visual{ position: relative; display: flex; align-items: center; justify-content: center; min-height: 420px; }
  @media (max-width: 980px){ .hero-visual{ order: -1; min-height: 300px; margin-bottom: 8px; } }
  #globe{ width: 100%; height: 100%; max-width: 540px; aspect-ratio: 1 / 1; display: block; cursor: grab; touch-action: pan-y; }
  #globe:active{ cursor: grabbing; }
  .geo-label{
    position: absolute; bottom: 2%; left: 50%; transform: translateX(-50%);
    display: inline-flex; align-items: center; gap: 10px;
    padding: 8px 16px; border: 1px solid var(--hairline); border-radius: 999px;
    background: rgba(255,255,255,0.04); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    font-family: var(--mono); font-size: 12px; letter-spacing: 0.03em; color: var(--ink-2); white-space: nowrap;
    opacity: 0; transition: opacity .6s ease; pointer-events: none;
  }
  .geo-label.show{ opacity: 1; }
  .geo-dot{ width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px oklch(0.80 0.13 230 / 0.18); animation: geo-pulse 2s ease-in-out infinite; }
  @keyframes geo-pulse{ 0%,100%{ opacity: .55; transform: scale(1); } 50%{ opacity: 1; transform: scale(1.15); } }
  .hero-eyebrow{ margin-bottom: 32px; }
  .hero h1{ max-width: 18ch; }
  .hero .sub{ margin-top: 32px; max-width: 56ch; font-size: clamp(18px, 1.5vw, 22px); color: var(--ink-2); }
  .hero-actions{ display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; }
  .hero-stats{
    margin-top: clamp(60px, 8vw, 100px);
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
    background: var(--hairline); border: 1px solid var(--hairline); border-radius: 4px;
  }
  .hero-stats > div{
    background: var(--bg); padding: 24px 28px;
  }
  .hero-stats .num{
    font-size: clamp(32px, 3.2vw, 48px); font-weight: 500; letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
  }
  .hero-stats .lbl{ font-size: 12px; color: var(--ink-3); margin-top: 6px; font-family: var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }
  @media (max-width: 880px){
    .hero-stats{ grid-template-columns: 1fr 1fr; }
  }

  /* === ABOUT === */
  .about-grid{ display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(40px, 6vw, 96px); align-items: end; }
  @media (max-width: 880px){ .about-grid{ grid-template-columns: 1fr; } }
  .pill-row{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
  .pill{
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 12px; border: 1px solid var(--hairline); border-radius: 999px;
    font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--ink-2);
  }
  .pill .swatch{ width: 8px; height: 8px; border-radius: 2px; background: var(--accent); }

  /* === PROBLEMS === */
  .problem-grid{
    margin-top: 60px;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
    background: var(--hairline); border: 1px solid var(--hairline); border-radius: 4px;
  }
  @media (max-width: 1100px){ .problem-grid{ grid-template-columns: 1fr 1fr; } }
  @media (max-width: 600px){ .problem-grid{ grid-template-columns: 1fr; } }
  .problem-grid > div{ background: var(--bg); padding: 32px 28px; display: flex; flex-direction: column; gap: 14px; }
  .problem-grid .num{ font-size: clamp(40px, 4.4vw, 72px); font-weight: 500; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
  .problem-grid .num small{ color: var(--ink-3); font-size: 0.5em; font-weight: 400; }
  .problem-grid .bar{ height: 4px; background: rgba(255,255,255,0.06); border-radius: 999px; overflow:hidden; }
  .problem-grid .bar > span{ display:block; height:100%; background: var(--accent); border-radius: 999px; transform: scaleX(0); transform-origin: left; transition: transform 1.4s cubic-bezier(.2,.8,.2,1); }
  .in .problem-grid .bar > span, .problem-grid.in .bar > span{ transform: scaleX(var(--w, 1)); }

  /* === SOLUTIONS / ANALYTICS === */
  .duo{ display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); gap: clamp(40px, 6vw, 80px); align-items: stretch; }
  .duo > *{ min-width: 0; }
  @media (max-width: 1000px){ .duo{ grid-template-columns: minmax(0,1fr); } }
  .glass{
    background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.012));
    border: 1px solid var(--hairline); border-radius: 16px; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    overflow: hidden;
  }
  .dash{ display: flex; flex-direction: column; }
  .dash-header{
    display:flex; align-items: center; justify-content: space-between;
    padding: 14px 22px; border-bottom: 1px solid var(--hairline);
  }
  .dash-dots{ display:flex; gap: 6px; }
  .dash-dots span{ width:9px; height:9px; border-radius:50%; background: rgba(255,255,255,0.15); }
  .dash-title{
    padding: 22px 26px 8px; display: flex; justify-content: space-between; align-items: end;
  }
  .seg{
    display: inline-flex; padding: 3px; border: 1px solid var(--hairline); border-radius: 999px; background: rgba(255,255,255,0.02);
  }
  .seg span{ padding: 4px 10px; border-radius: 999px; font-family: var(--mono); font-size: 11px; color: var(--ink-3); cursor: pointer; }
  .seg span.on{ background: rgba(255,255,255,0.06); color: var(--ink); }
  .kpis{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--hairline); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
  .kpis > div{ background: var(--bg); padding: 16px 20px; }
  .kpis .v{ font-size: 22px; font-weight: 500; letter-spacing: -0.02em; margin-top: 4px; font-variant-numeric: tabular-nums; }
  .kpis .l{ font-family: var(--mono); font-size: 10px; color: var(--ink-3); letter-spacing: 0.1em; text-transform: uppercase; }
  .kpis .d.up{ color: var(--good); font-family: var(--mono); font-size: 10px; }
  .kpis .d.dn{ color: var(--bad); font-family: var(--mono); font-size: 10px; }

  .chart-wrap{ padding: 18px 26px 22px; }

  /* === AI HERO === */
  .ai-hero{ display: grid; grid-template-columns: 1.2fr 1fr; gap: 80px; align-items: end; margin-bottom: 60px; }
  @media (max-width: 1000px){ .ai-hero{ grid-template-columns: 1fr; } }
  .ai-grid{
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px;
    background: var(--hairline); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
  }
  @media (max-width: 1100px){ .ai-grid{ grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 560px){ .ai-grid{ grid-template-columns: 1fr; } }
  .ai-grid > div{
    background: var(--bg); padding: 26px 22px; display: flex; flex-direction: column; gap: 12px;
    transition: background .3s ease;
  }
  @media (hover: hover) and (pointer: fine){ .ai-grid > div:hover{ background: rgba(255,255,255,0.018); } }
  .ai-grid .h{ font-weight: 500; font-size: 18px; letter-spacing: -0.01em; }
  .ai-grid .p{ font-size: 13px; color: var(--ink-3); line-height: 1.5; }
  .ai-grid .meta{ display:flex; justify-content: space-between; margin-top: auto; padding-top: 12px; }
  .ai-grid .meta .lab{ font-family: var(--mono); font-size: 10px; color: var(--ink-4); letter-spacing: 0.08em; text-transform: uppercase; }
  .ai-grid .meta .val{ font-family: var(--mono); font-size: 10px; color: var(--good); }
  .ai-grid .pn{ font-family: var(--mono); font-size: 11px; color: var(--accent); letter-spacing: 0.08em; }

  /* === USE CASES === */
  .feed{ margin-top: 56px; }
  .feed-row{
    display: grid; grid-template-columns: 130px 1fr 220px 110px; gap: 18px; align-items: center;
    padding: 18px 22px; border-bottom: 1px solid var(--hairline); transition: background .3s ease;
  }
  @media (hover: hover) and (pointer: fine){ .feed-row:hover{ background: rgba(255,255,255,0.02); } }
  .feed-row:first-child{ border-top: 1px solid var(--hairline); }
  .feed-row .dept{ font-family: var(--mono); font-size: 11px; color: var(--ink-4); letter-spacing: 0.08em; text-transform: uppercase; }
  .feed-row .agent{ font-family: var(--mono); font-size: 12px; color: var(--accent); margin-top: 4px; }
  .feed-row .title-line{ font-size: 15px; }
  .feed-row .sub{ font-size: 13px; color: var(--ink-3); margin-top: 4px; }
  .feed-row .stack{ display: flex; gap: 6px; flex-wrap: wrap; }
  .feed-row .delta{ font-family: var(--mono); font-size: 12px; color: var(--good); text-align: right; font-variant-numeric: tabular-nums; }
  @media (max-width: 900px){
    .feed-row{ grid-template-columns: 1fr; gap: 8px; }
    .feed-row .stack, .feed-row .delta{ text-align: left; }
  }

  /* === DASHBOARD SHOWCASE === */
  .dash-grid{
    display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 18px;
    margin-top: 56px;
  }
  @media (max-width: 1100px){ .dash-grid{ grid-template-columns: 1fr; } }
  .heat{ display: grid; grid-template-columns: 60px repeat(8, 1fr); gap: 4px; }
  .heat .lab{ font-family: var(--mono); font-size: 10px; color: var(--ink-4); letter-spacing: 0.08em; align-self: center; }
  .heat .cell{ border-radius: 2px; min-height: 22px; }

  /* === RESULTS === */
  .results-grid{
    margin-top: 56px;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  }
  @media (max-width: 1100px){ .results-grid{ grid-template-columns: 1fr 1fr; } }
  @media (max-width: 600px){ .results-grid{ grid-template-columns: 1fr; } }
  .results-grid > div{
    padding: 32px 32px;
    border-right: 1px solid var(--hairline);
  }
  .results-grid > div:last-child{ border-right: 0; }
  .results-grid > div:first-child{ padding-left: 0; }
  @media (max-width: 1100px){
    .results-grid > div{ border-right: 0; border-bottom: 1px solid var(--hairline); padding: 28px 0; }
    .results-grid > div:last-child{ border-bottom: 0; }
  }
  .results-grid .big{
    font-size: clamp(64px, 9vw, 132px); font-weight: 500; letter-spacing: -0.04em; line-height: 0.95;
    font-variant-numeric: tabular-nums;
  }
  .results-grid .big small{ color: var(--ink-3); font-size: 0.42em; font-weight: 400; }

  .testimonial{
    margin-top: 64px; padding: 32px 36px;
    border: 1px solid var(--hairline); border-radius: 16px;
    background: rgba(255,255,255,0.018);
    display: flex; align-items: center; gap: 32px; flex-wrap: wrap;
  }
  .testimonial .q{ font-family: var(--serif); font-style: italic; font-size: clamp(20px, 2vw, 26px); line-height: 1.3; flex: 1; min-width: 280px; }

  /* The PROCESS timeline block that used to sit here was removed on purpose:
     the timeline exists only on the home page, which carries its own inline
     copy, while the bare .dot/.node selectors in this shared sheet leaked into
     the audit dots and the bot mockup dots (14px + 3px border + accent ring +
     margin-top:11px) and gave the AI pipeline nodes a stray right hairline.
     If the timeline ever lands on an opa.css page, bring it back NAMESPACED
     (.timeline .dot, .timeline .node). */

  /* === STACK === */
  .stack-grid{
    margin-top: 56px;
    display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px;
    background: var(--hairline); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
  }
  @media (max-width: 1100px){ .stack-grid{ grid-template-columns: repeat(3, 1fr); } }
  @media (max-width: 600px){ .stack-grid{ grid-template-columns: 1fr 1fr; } }
  .stack-grid > div{ background: var(--bg); padding: 26px 22px; }
  .stack-grid .label{ margin-bottom: 14px; }
  .stack-grid .item{ display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px dashed rgba(255,255,255,0.05); font-family: var(--mono); font-size: 13px; color: var(--ink-2); }
  .stack-grid .item:last-child{ border-bottom: 0; }
  .stack-grid .item .star{ color: var(--good); font-size: 11px; }
  .stack-grid .item.primary { color: var(--ink); }
  .stack-grid .item.ai .star{ color: var(--accent); }

  /* === CONTACT === */
  .contact{ position: relative; }
  .contact-grid{ display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(40px, 6vw, 80px); align-items: start; }
  @media (max-width: 1000px){ .contact-grid{ grid-template-columns: 1fr; } }
  .card{ padding: 28px; border-radius: 16px; border: 1px solid var(--hairline); background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.012)); }
  .card .row{ display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--hairline); }
  .card .row:last-child{ border-bottom: 0; padding-bottom: 0; }
  .card .row:first-child{ padding-top: 0; }
  .card .row .l{ font-family: var(--mono); font-size: 11px; color: var(--ink-3); letter-spacing: 0.08em; text-transform: uppercase; }
  .card .row .r{ font-size: 17px; font-weight: 500; font-variant-numeric: tabular-nums; }
  .card .row .r.acc{ color: var(--accent); }

  /* The old single-line footer lived on a bare `footer` selector that forced
     var(--mono), 11px and letter-spacing on the whole subtree. .site-footer now
     overrides the layout but not the type, so every link, the tagline and the
     brand were inheriting monospace. Removed; mono is opted into per class. */

  /* hairline */
  .hr{ height: 1px; background: var(--hairline); margin: 24px 0; }

  /* counter inline */
  .counter{ font-variant-numeric: tabular-nums; }

  /* utility row/col on contact */
  .row-flex{ display: flex; }
  .col-flex{ display: flex; flex-direction: column; }

  /* ============================================================
   * SITE BACKGROUND (site-wide animated layers, behind content)
   * ============================================================ */
  .site-bg{ position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
  #bg-canvas{ position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
  .bg-aurora{
    position: absolute; inset: -20%;
    background:
      radial-gradient(38% 42% at 18% 22%, oklch(0.55 0.15 230 / 0.16), transparent 70%),
      radial-gradient(34% 38% at 82% 18%, oklch(0.60 0.13 265 / 0.13), transparent 70%),
      radial-gradient(40% 44% at 72% 82%, oklch(0.58 0.11 40 / 0.09), transparent 72%),
      radial-gradient(30% 34% at 28% 88%, oklch(0.60 0.14 155 / 0.07), transparent 72%);
    filter: blur(20px);
    will-change: transform;
    animation: aurora-drift 34s ease-in-out infinite alternate;
  }
  @keyframes aurora-drift{
    0%   { transform: translate3d(-2%, -1%, 0) scale(1.02) rotate(0deg); }
    50%  { transform: translate3d(2%, 1.5%, 0) scale(1.08) rotate(1.5deg); }
    100% { transform: translate3d(-1.5%, 2%, 0) scale(1.04) rotate(-1.5deg); }
  }
  /* fine film grain — adds a tactile, hand-made feel; subtly flickers */
  .bg-grain{
    position: absolute; inset: -100%; width: 300%; height: 300%; opacity: 0.045; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 140px 140px;
    animation: grain-shift 1s steps(4) infinite;
  }
  @keyframes grain-shift{
    0%{ transform: translate(0,0); } 25%{ transform: translate(-4%,3%); }
    50%{ transform: translate(3%,-3%); } 75%{ transform: translate(-3%,-2%); } 100%{ transform: translate(2%,3%); }
  }
  /* content sits above the background layers (fixed overlays keep their own z-index) */
  body > section, body > footer{ position: relative; z-index: 2; }
  .site-bg{ z-index: 0; }

  /* ============================================================
   * SCROLL PROGRESS
   * ============================================================ */
  .scroll-progress{
    position: fixed; top: 0; left: 0; height: 2px; width: 0%;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    z-index: 60; pointer-events: none;
    box-shadow: 0 0 12px oklch(0.80 0.13 230 / 0.5);
    transition: width .1s linear;
  }

  /* ============================================================
   * NAV — animated underline + active state
   * ============================================================ */
  nav.topbar .links a{ position: relative; padding-bottom: 3px; }
  nav.topbar .links a::after{
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
    background: var(--ink); transform: scaleX(0); transform-origin: right;
    transition: transform .32s cubic-bezier(.2,.8,.2,1);
  }
  @media (hover: hover) and (pointer: fine){ nav.topbar .links a:hover::after{ transform: scaleX(1); transform-origin: left; } }
  nav.topbar .links a.active{ color: var(--ink); }
  nav.topbar .links a.active::after{ transform: scaleX(1); background: var(--accent); }

  .brand .logo{ transition: transform .4s cubic-bezier(.2,.8,.2,1); }
  @media (hover: hover) and (pointer: fine){ .brand:hover .logo{ transform: rotate(-6deg) scale(1.06); } }

  /* ============================================================
   * BUTTONS — sheen sweep + magnetic (JS sets --mx/--my)
   * ============================================================ */
  .cta{ position: relative; overflow: hidden; will-change: transform; }
  .cta::after{
    content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,0.55), transparent);
    transform: skewX(-18deg); opacity: 0; pointer-events: none;
  }
  @media (hover: hover) and (pointer: fine){
    .cta:hover::after{ animation: sheen .8s ease; }
  }
  @keyframes sheen{ 0%{ left: -60%; opacity: .6; } 100%{ left: 130%; opacity: 0; } }
  .cta-ghost{ position: relative; will-change: transform; }
  @media (hover: hover) and (pointer: fine){
    .cta-ghost:hover{ background: rgba(255,255,255,0.03); transform: translateY(-1px); }
  }

  /* ============================================================
   * GLASS CARDS — pointer tilt + glare (JS driven)
   * ============================================================ */
  @media (hover: hover) and (pointer: fine){
    .glass, .card{
      transition: transform .5s cubic-bezier(.2,.8,.2,1), border-color .3s ease, box-shadow .5s ease,
                  opacity .9s cubic-bezier(.2,.8,.2,1), filter .9s ease;
      transform-style: preserve-3d; will-change: transform;
    }
    .glass.tilt, .card.tilt{
      transform: perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-2px);
      border-color: var(--hairline-strong);
      box-shadow: 0 30px 80px -40px rgba(0,0,0,0.8);
    }
    .glass::before, .card::before{
      content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
      opacity: 0; transition: opacity .4s ease; z-index: 3;
      background: radial-gradient(320px circle at var(--gx,50%) var(--gy,50%), rgba(255,255,255,0.10), transparent 60%);
    }
    .glass.tilt::before, .card.tilt::before{ opacity: 1; }
  }
  .glass, .card{ position: relative; }

  /* ============================================================
   * SHIMMER on italic accent words
   * ============================================================ */
  .ital{
    background: linear-gradient(100deg, var(--ink-2) 20%, var(--ink) 45%, var(--ink-2) 70%);
    background-size: 220% 100%;
    -webkit-background-clip: text; background-clip: text;
    animation: ital-shimmer 7s ease-in-out infinite;
  }
  @keyframes ital-shimmer{ 0%,100%{ background-position: 120% 0; } 50%{ background-position: -20% 0; } }
  /* keep inline color overrides working: those set color on .ital, so re-expose text */
  .ital[style*="color"]{ -webkit-text-fill-color: currentColor; }

  /* ============================================================
   * REVEAL — richer variants
   * ============================================================ */
  html.js .reveal.blur-in{ filter: blur(8px); }
  html.js .reveal.blur-in.in{ filter: blur(0); }

  /* ============================================================
   * FOCUS + SCROLLBAR + SELECTION niceties
   * ============================================================ */
  a:focus-visible, button:focus-visible, [tabindex]:focus-visible{
    outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px;
  }
  /* The film grain lives in a position:fixed layer, which cannot paint under the
     native scrollbar. A track of var(--bg) therefore sat ~3 luminance units
     below the grain-lifted page and drew a seam down the full height of the
     right edge. #0A0B0D matches the lifted tone, so the gutter disappears. */
  :root{ color-scheme: dark; }
  html{ scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.18) #0A0B0D; }
  ::-webkit-scrollbar{ width: 11px; height: 11px; }
  ::-webkit-scrollbar-track{ background: #0A0B0D; }
  ::-webkit-scrollbar-thumb{ background: rgba(255,255,255,0.18); border-radius: 99px; border: 3px solid #0A0B0D; }
  ::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,0.3); }
  ::-webkit-scrollbar-corner{ background: #0A0B0D; }

  /* ============================================================
   * MOBILE MENU
   * ============================================================ */
  .menu-btn{
    display: none; appearance: none; background: transparent; border: 0; cursor: pointer;
    width: 40px; height: 40px; padding: 8px; border-radius: 10px;
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
    border: 1px solid var(--hairline);
  }
  .menu-btn{ align-items: center; justify-content: center; }
  .menu-btn span{ display: block; width: 20px; height: 1.5px; background: var(--ink); border-radius: 2px; margin: 4px 0; transition: transform .3s ease, opacity .2s ease; }
  .menu-toggle-cb{ position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; }
  #menu-toggle:checked ~ * .menu-btn span:nth-child(1){ transform: translateY(5.5px) rotate(45deg); }
  #menu-toggle:checked ~ * .menu-btn span:nth-child(2){ opacity: 0; }
  #menu-toggle:checked ~ * .menu-btn span:nth-child(3){ transform: translateY(-5.5px) rotate(-45deg); }
  .menu-panel{
    position: fixed; inset: 0 0 0 auto; width: min(84vw, 360px);
    background: rgba(9,11,14,0.92); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
    border-left: 1px solid var(--hairline); z-index: 70;
    transform: translateX(100%); transition: transform .42s cubic-bezier(.2,.8,.2,1);
    padding: 96px 32px 40px; display: flex; flex-direction: column; gap: 4px;
  }
  #menu-toggle:checked ~ .menu-panel{ transform: translateX(0); }
  .menu-panel a{ color: var(--ink); text-decoration: none; font-size: 22px; letter-spacing: -0.02em; padding: 14px 0; border-bottom: 1px solid var(--hairline); transition: color .2s ease, padding-left .3s ease; }
  .menu-panel a:hover{ color: var(--accent); padding-left: 6px; }
  .menu-panel .cta{ margin-top: 24px; justify-content: center; color: var(--bg); border-bottom: 0; }
  .menu-panel .cta:hover{ color: var(--bg); padding-left: 0; }
  .menu-scrim{
    position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 65;
    opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s ease;
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  }
  #menu-toggle:checked ~ .menu-scrim{ opacity: 1; visibility: visible; }
  @media (max-width: 880px){
    .menu-btn{ display: block; }
    nav.topbar > div:last-child > .cta{ display: none; }
  }
  body.menu-open{ overflow: hidden; }
  /* client logos, used by the footer strip */
  .client{ flex: none; display: inline-flex; align-items: center; gap: 13px; text-decoration: none; opacity: 0.58; transition: opacity .35s ease; }
  .client:hover{ opacity: 1; }
  .client-mark{ height: 34px; width: auto; display: block; filter: brightness(0) invert(1); }
  .client-name{ font-size: 18px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); white-space: nowrap; }
  .client-word{ height: 30px; width: auto; aspect-ratio: 142 / 32; display: block; }
  .client-row{ display: flex; align-items: center; justify-content: center; gap: clamp(44px, 7vw, 96px); flex-wrap: wrap; row-gap: 28px; }

  /* Clients moved into the footer: with two logos a full-width section was too
     much weight, and the footer shows them on every page instead of just home.
     The dormant .clients / .clients-cap / .marquee rules above are kept so the
     standalone section can be restored when the list grows. */
  /* the "Working with" strip was removed 2026-07-30 (two logos are too few for
     a trust band); the .client base rules below stay for its return at 4-5 */


  /* === COOKIE CONSENT ============================================
   * The privacy page promises that nothing non-essential is set before the
   * visitor agrees, so this bar has to actually gate it — analytics lives in
   * enableAnalytics() and runs from nowhere else. */
  .cookie-bar{
    position: fixed; z-index: 95; left: 50%; bottom: 18px;
    width: min(680px, calc(100vw - 24px));
    transform: translate(-50%, 16px); opacity: 0;
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    padding: 15px 18px; border-radius: 14px;
    background: var(--bg-2); border: 1px solid var(--hairline-strong);
    box-shadow: 0 20px 60px rgba(0,0,0,0.55);
    transition: opacity .3s ease, transform .3s cubic-bezier(.2,.8,.2,1);
  }
  .cookie-bar.is-in{ opacity: 1; transform: translate(-50%, 0); }
  /* the class sets display:flex, which outranks the UA rule for [hidden] */
  .cookie-bar[hidden]{ display: none; }
  .cookie-bar p{ margin: 0; flex: 1 1 250px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
  .cookie-bar p a{ color: var(--accent); text-decoration: none; border-bottom: 1px solid oklch(0.80 0.13 230 / 0.35); }
  .cb-actions{ display: flex; gap: 10px; flex-wrap: wrap; flex: 0 0 auto; }
  .cookie-bar button{
    font-family: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
    padding: 9px 15px; border-radius: 999px; white-space: nowrap;
    color: var(--ink); background: rgba(255,255,255,0.04);
    border: 1px solid var(--hairline-strong);
    transition: background .2s ease, border-color .2s ease;
  }
  .cookie-bar button:hover{ background: rgba(255,255,255,0.1); }
  @media (max-width: 560px){
    .cookie-bar{ bottom: 12px; padding: 14px 16px; }
    .cb-actions{ width: 100%; }
    .cookie-bar button{ flex: 1 1 0; }
  }
  @media (prefers-reduced-motion: reduce){ .cookie-bar{ transition: none; } }
  /* the footer control that reopens the bar, styled like its neighbours */
  .cb-reopen{
    font-family: inherit; font-size: inherit; letter-spacing: inherit; color: inherit;
    background: none; border: 0; padding: 0; cursor: pointer; text-transform: inherit;
  }
  .cb-reopen:hover{ color: var(--ink); }


  /* === LEGAL PAGES (privacy, terms) — a single readable prose column === */
  .legal{ max-width: 780px; margin: 0 auto; padding: clamp(120px,15vh,190px) clamp(20px,4vw,56px) clamp(60px,8vw,100px); }
  .legal h1{ font-size: clamp(36px,5.2vw,64px); line-height: 1.02; }
  .legal .updated{ margin-top: 18px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
  .legal h2{ margin-top: 54px; font-size: clamp(21px,2.3vw,27px); letter-spacing: -0.02em; }
  .legal h3{ margin-top: 28px; font-size: 17px; }
  .legal p{ margin-top: 14px; font-size: 16px; line-height: 1.7; }
  .legal ul{ margin: 14px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 9px; }
  .legal li{ font-size: 16px; line-height: 1.65; color: var(--ink-2); }
  .legal li::marker{ color: var(--ink-4); }
  .legal a{ color: var(--accent); text-decoration: none; border-bottom: 1px solid oklch(0.80 0.13 230 / 0.35); }
  .legal a:hover{ border-bottom-color: var(--accent); }
  .legal code{ font-family: var(--mono); font-size: 13px; color: var(--ink); background: rgba(255,255,255,0.06); padding: 2px 6px; border-radius: 5px; }
  .legal .tldr{ margin-top: 34px; padding: 22px 24px; border: 1px solid var(--hairline); border-radius: 14px; background: rgba(255,255,255,0.022); }
  .legal .tldr p{ margin-top: 10px; }
  .legal .tldr p:first-of-type{ margin-top: 12px; }
  .legal .back-link{ margin-bottom: 26px; }

  /* === CONTACT CHOOSER ===========================================
   * "Start a project" used to be a bare mailto:, which silently does nothing
   * on machines with no mail client configured. It now opens this panel so the
   * visitor picks a channel. CSS-only, mirroring the mobile-menu pattern. */
  .contact-toggle-cb{ position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; }
  label.cta, label.cta-ghost{ cursor: pointer; }
  .contact-scrim{
    position: fixed; inset: 0; z-index: 90; cursor: pointer;
    background: rgba(4,5,7,0.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s linear .3s;
  }
  #contact-toggle:checked ~ .contact-scrim{ opacity: 1; visibility: visible; transition-delay: 0s; }
  .contact-panel{
    position: fixed; z-index: 91; left: 50%; top: 50%;
    width: min(460px, calc(100vw - 32px));
    transform: translate(-50%, -46%) scale(0.98);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .28s ease, transform .28s cubic-bezier(.2,.8,.2,1), visibility 0s linear .28s;
    background: var(--bg-2); border: 1px solid var(--hairline-strong);
    border-radius: 18px; padding: 26px 26px 22px;
    box-shadow: 0 30px 80px rgba(0,0,0,0.6);
  }
  #contact-toggle:checked ~ .contact-panel{
    opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s;
    transform: translate(-50%, -50%) scale(1);
  }
  .contact-panel h3{ font-size: 24px; letter-spacing: -0.02em; padding-right: 34px; }
  .cp-sub{ margin-top: 8px; font-size: 14px; color: var(--ink-2); line-height: 1.5; }
  .cp-list{ margin-top: 22px; display: flex; flex-direction: column; gap: 10px; }
  .cp-row{
    display: flex; align-items: center; gap: 14px; text-decoration: none;
    padding: 13px 15px; border-radius: 12px;
    border: 1px solid var(--hairline); background: rgba(255,255,255,0.02);
    transition: border-color .2s ease, background .2s ease, transform .2s ease;
  }
  .cp-row:hover{ border-color: var(--hairline-strong); background: rgba(255,255,255,0.05); transform: translateY(-1px); }
  .cp-ic{ width: 34px; height: 34px; flex: 0 0 auto; border-radius: 9px; display: grid; place-items: center; background: rgba(255,255,255,0.06); color: var(--ink); }
  .cp-ic svg{ width: 17px; height: 17px; display: block; }
  .cp-t{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .cp-k{ font-size: 15px; font-weight: 500; color: var(--ink); }
  .cp-v{ font-family: var(--mono); font-size: 12px; color: var(--ink-3); overflow-wrap: anywhere; }
  .cp-badge{
    margin-left: auto; flex: 0 0 auto; font-family: var(--mono); font-size: 10px;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent);
    background: oklch(0.80 0.13 230 / 0.10); border: 1px solid oklch(0.80 0.13 230 / 0.28);
    padding: 4px 8px; border-radius: 999px; white-space: nowrap;
  }
  .cp-close{
    position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; cursor: pointer;
    display: grid; place-items: center; border-radius: 9px; color: var(--ink-3);
    transition: color .2s ease, background .2s ease;
  }
  .cp-close:hover{ color: var(--ink); background: rgba(255,255,255,0.06); }
  .cp-close svg{ width: 16px; height: 16px; display: block; }
  .cp-foot{ margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--hairline); font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
  body.contact-open{ overflow: hidden; }
  @media (max-width: 480px){ .contact-panel{ padding: 22px 18px 18px; } .contact-panel h3{ font-size: 21px; } }
  @media (prefers-reduced-motion: reduce){ .contact-panel, .contact-scrim{ transition: none; } }

  /* no-JS scroll lock on browsers that support :has() */
  html:has(#menu-toggle:checked){ overflow: hidden; }

  /* ============================================================
   * CSS-ONLY LANGUAGE SWITCH (no JavaScript required)
   * Native radio state toggles which language spans are shown,
   * so it works even in JS-disabled offline viewers (iOS Files,
   * Quick Look, in-app previews).
   * ============================================================ */
  .lang-radio{ position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; }
  .lang-switch label.lang-opt{
    display: inline-flex; align-items: center; user-select: none;
    color: var(--ink-3); padding: 6px 14px; border-radius: 999px; cursor: pointer;
    font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
    transition: color .2s ease, background .3s ease;
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  }
  #lang-en:checked ~ * label[for="lang-en"],
  #lang-ru:checked ~ * label[for="lang-ru"]{ color: var(--bg); background: var(--ink); }
  /* language visibility: English shown by default */
  .i18n-ru{ display: none; }
  #lang-ru:checked ~ * .i18n-en{ display: none; }
  #lang-ru:checked ~ * .i18n-ru{ display: inline; }

  /* ============================================================
   * SERVICES GRID ("What we do")
   * ============================================================ */
  .svc-grid{
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
    background: var(--hairline); border: 1px solid var(--hairline); border-radius: 16px; overflow: hidden;
    margin-top: 56px;
  }
  @media (max-width: 760px){ .svc-grid{ grid-template-columns: 1fr; } }
  .svc-grid > div{ background: var(--bg); padding: clamp(28px, 3vw, 40px); display: flex; flex-direction: column; gap: 14px; transition: background .3s ease; }
  @media (hover: hover) and (pointer: fine){ .svc-grid > div:hover{ background: rgba(255,255,255,0.02); } }
  .svc-grid .pn{ font-family: var(--mono); font-size: 11px; color: var(--accent); letter-spacing: 0.12em; }
  .svc-grid h3{ font-size: clamp(22px, 2vw, 28px); }
  .svc-grid p{ font-size: 15px; color: var(--ink-2); line-height: 1.55; }

  /* ============================================================
   * PREMIUM DETAILS — small touches that add perceived value
   * ============================================================ */
  /* service cards: an accent line sweeps in on hover, index brightens */
  .svc-grid > div{ position: relative; overflow: hidden; }
  .svc-grid > div::before{
    content: ""; position: absolute; top: 0; left: 0; height: 2px; width: 0;
    background: linear-gradient(90deg, var(--accent), transparent);
    transition: width .55s cubic-bezier(.2,.8,.2,1);
  }
  .svc-grid .pn{ transition: color .3s ease; }
  @media (hover: hover) and (pointer: fine){
    .svc-grid > div:hover::before{ width: 100%; }
    .svc-grid > div:hover .pn{ color: var(--ink); }
  }
  /* fine top-highlight bevel on glass/cards — reads as crafted glass */
  .glass, .card{ box-shadow: inset 0 1px 0 rgba(255,255,255,0.06); }
  /* primary CTA gets a soft accent glow on hover */
  .cta{ transition: transform .2s ease, background .2s ease, box-shadow .45s ease; }
  @media (hover: hover) and (pointer: fine){
    .cta:hover{ box-shadow: 0 10px 34px -10px oklch(0.80 0.13 230 / 0.55); }
  }
  /* hero cursor spotlight — subtle depth that follows the pointer */
  .hero::after{
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: radial-gradient(440px circle at var(--mx, 72%) var(--my, 32%), oklch(0.72 0.15 230 / 0.08), transparent 62%);
    opacity: 0; transition: opacity .5s ease;
  }
  @media (hover: hover) and (pointer: fine){ .hero:hover::after{ opacity: 1; } }
  /* KPI / stat numbers get tabular alignment + subtle glow already; refine dividers */
  .hero-stats, .problem-grid, .ai-grid{ box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); }

  /* ============================================================
   * CLOSING CTA + CANONICAL FOOTER
   * ============================================================ */
  .cta-band{ text-align: center; }
  .cta-band .eyebrow{ justify-content: center; }
  .cta-band .lede{ margin-left: auto; margin-right: auto; }
  .cta-band > *{ position: relative; z-index: 1; }
  .cta-band > .cta-glow{ position: absolute; left: 50%; top: 45%; width: 60vw; max-width: 640px; aspect-ratio: 1; transform: translate(-50%,-50%); pointer-events: none; z-index: 0;
    background: radial-gradient(circle, oklch(0.60 0.16 230 / 0.16), transparent 60%); filter: blur(40px); }

  .site-footer{ display: block; padding: 0; border-top: 1px solid var(--hairline); background: linear-gradient(180deg, transparent, rgba(255,255,255,0.015)); }
  .footer-inner{ max-width: 1440px; margin: 0 auto; padding: clamp(48px, 6vw, 80px) clamp(20px, 4vw, 56px) 40px; display: grid; grid-template-columns: 1.6fr 1fr 1.2fr; gap: clamp(32px, 4vw, 64px); }
  @media (max-width: 760px){ .footer-inner{ grid-template-columns: 1fr 1fr; } .footer-brand{ grid-column: 1 / -1; } }
  @media (max-width: 440px){ .footer-inner{ grid-template-columns: 1fr; } }
  .footer-brand .brand{ font-size: 16px; }
  .footer-tagline{ margin-top: 16px; max-width: 36ch; font-size: 14px; color: var(--ink-3); line-height: 1.55; }
  .footer-col{ display: flex; flex-direction: column; gap: 12px; }
  .footer-h{ font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 6px; }

  /* social tiles in the footer contact column — the signature's icon language */
  .soc-row{ display: flex; gap: 10px; margin-top: 8px; }
  /* .soc-row .soc, not bare .soc: .footer-col a (0,1,1) sets width:fit-content and was collapsing the 36px tile to 19px */
  .soc-row .soc{ flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--hairline); border-radius: 10px; color: var(--ink-2); transition: color .25s ease, border-color .25s ease, transform .25s ease; }
  .soc-row .soc svg{ width: 17px; height: 17px; }
  @media (hover: hover) and (pointer: fine){ .soc-row .soc:hover{ color: var(--ink); border-color: var(--hairline-strong); transform: translateY(-2px); } }

  .footer-col a{ color: var(--ink-2); text-decoration: none; font-size: 14px; transition: color .2s ease, transform .2s ease; width: fit-content; }
  @media (hover: hover) and (pointer: fine){ .footer-col a:hover{ color: var(--ink); } }
  .footer-bottom{ max-width: 1440px; margin: 0 auto; padding: 20px clamp(20px, 4vw, 56px); border-top: 1px solid var(--hairline); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--ink-4); }
  .footer-bottom a{ color: inherit; text-decoration: none; }

  /* ============================================================
   * PRODUCT SECTIONS (Apple-style, one product per scene)
   * ============================================================ */
  .prod{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 88px); align-items: center; }
  @media (max-width: 920px){ .prod{ grid-template-columns: 1fr; gap: 40px; } }
  .prod-index{ font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); display: flex; align-items: center; gap: 12px; }
  .prod-index .n{ color: var(--accent); }
  .prod-text h2{ margin-top: 22px; font-size: clamp(34px, 4vw, 58px); line-height: 1.02; }
  .prod-text .lede{ margin-top: 22px; }
  .prod-features{ margin-top: 30px; display: flex; flex-direction: column; gap: 16px; }
  .prod-feat{ display: flex; gap: 14px; align-items: flex-start; }
  .prod-feat .tick{ color: var(--accent); font-family: var(--mono); flex: none; margin-top: 1px; }
  .prod-feat .ft{ font-size: 15px; color: var(--ink-2); line-height: 1.5; }
  .prod-feat .ft strong{ color: var(--ink); font-weight: 500; }
  .prod-visual{ min-height: 320px; display: flex; align-items: center; justify-content: center; }
  .prod-visual .glass{ width: 100%; }
  .prod.rev .prod-text{ order: 2; }
  @media (max-width: 920px){ .prod.rev .prod-text{ order: 0; } .prod-visual{ order: -1; min-height: 240px; } }

  /* web: browser mock */
  .bm-hero{ height: 108px; position: relative; background: linear-gradient(135deg, oklch(0.55 0.15 230 / 0.55), oklch(0.60 0.13 300 / 0.35)); }
  .bm-hero::after{ content: ""; position: absolute; left: 22px; bottom: 20px; width: 120px; height: 10px; background: rgba(255,255,255,0.65); border-radius: 3px; box-shadow: 0 18px 0 -2px rgba(255,255,255,0.28); }
  .bm-cards{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 18px 22px 6px; }
  .bm-cards > div{ height: 54px; background: rgba(255,255,255,0.04); border: 1px solid var(--hairline); border-radius: 8px; }
  .bm-lines{ padding: 10px 22px 24px; display: flex; flex-direction: column; gap: 9px; }
  .bm-lines > div{ height: 8px; background: rgba(255,255,255,0.08); border-radius: 3px; }
  .bm-lines > div:nth-child(2){ width: 82%; } .bm-lines > div:nth-child(3){ width: 58%; }

  /* data: bespoke panel */
  .dp-metrics{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--hairline); border-bottom: 1px solid var(--hairline); }
  .dp-metrics > div{ background: var(--bg); padding: 16px 18px; }
  .dp-metrics .v{ font-size: 22px; font-weight: 500; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; margin-top: 4px; }
  .dp-metrics .l{ font-family: var(--mono); font-size: 10px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.1em; }

  /* ai: automation flow */
  .flow{ padding: 22px 24px; display: flex; flex-direction: column; }
  .flow-step{ display: flex; gap: 16px; align-items: flex-start; padding: 12px 0; position: relative; }
  .flow-step:not(:last-child)::before{ content: ""; position: absolute; left: 11px; top: 34px; bottom: -4px; width: 1px; background: var(--hairline); }
  .flow-dot{ width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--hairline-strong); display: flex; align-items: center; justify-content: center; flex: none; background: var(--surface-1); z-index: 1; }
  .flow-dot i{ width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
  .flow-step .ttl{ font-weight: 500; font-size: 15px; }
  .flow-step .sub{ font-family: var(--mono); font-size: 11px; color: var(--ink-3); margin-top: 3px; }

  /* ============================================================
   * FAQ (native <details> — works without JavaScript)
   * ============================================================ */
  .faq{ margin-top: 56px; border-top: 1px solid var(--hairline); }
  .faq details{ border-bottom: 1px solid var(--hairline); }
  .faq summary{
    list-style: none; cursor: pointer; padding: 26px 0; display: flex; justify-content: space-between;
    align-items: center; gap: 24px; font-size: clamp(17px, 1.7vw, 21px); font-weight: 500;
    letter-spacing: -0.01em; color: var(--ink); -webkit-tap-highlight-color: transparent;
  }
  .faq summary::-webkit-details-marker{ display: none; }
  .faq .q-ic{ flex: none; width: 20px; height: 20px; position: relative; }
  .faq .q-ic::before, .faq .q-ic::after{ content: ""; position: absolute; background: var(--ink-3); border-radius: 2px; transition: transform .3s ease, background .3s ease; }
  .faq .q-ic::before{ top: 9px; left: 1px; right: 1px; height: 1.6px; }
  .faq .q-ic::after{ left: 9px; top: 1px; bottom: 1px; width: 1.6px; }
  .faq details[open] .q-ic::after{ transform: scaleY(0); }
  .faq details[open] .q-ic::before{ background: var(--accent); }
  .faq .a{ padding: 0 0 26px; max-width: 72ch; color: var(--ink-2); line-height: 1.6; font-size: 16px; }

  /* ============================================================
   * REDUCED MOTION — respect user preference
   * ============================================================ */
  @media (prefers-reduced-motion: reduce){
    *, *::before, *::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
    .bg-aurora{ animation: none; }
    .ital{ animation: none; }
  }

/* ============================================================
 * PRODUCT PAGE (dedicated sub-pages)
 * ============================================================ */
.back-link{ display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-3); text-decoration:none; transition:color .2s ease; }
.back-link:hover{ color:var(--ink); }
.subhero{ padding: clamp(130px,17vh,210px) clamp(20px,4vw,56px) clamp(50px,7vw,90px); max-width:1200px; margin:0 auto; text-align:center; position:relative; }
.subhero .back-link{ display:flex; justify-content:center; }
.subhero .eyebrow{ display:flex; justify-content:center; }
.subhero h1{ margin-top:22px; font-size:clamp(46px,8vw,116px); line-height:0.95; }
/* The three product headlines are different lengths, so the heading box used to
   change height between pages and everything below it jumped — 14px in English,
   158px in Russian, where two titles wrap to three lines and one to two.
   Reserving the tallest line count per language keeps the lede and the buttons
   in the same place while clicking through the products. The value is in em, so
   it tracks the clamp()ed font-size instead of assuming one viewport. */
:root:lang(en) .subhero h1{ min-height: 2.15em; }
:root:lang(ru) .subhero h1{ min-height: 3.10em; }
/* Same story one level down: the Russian lede runs to three lines on the web
   page and two elsewhere, which moved the buttons by another 34px. */
:root:lang(en) .subhero .lede{ min-height: 3.10em; }
:root:lang(ru) .subhero .lede{ min-height: 4.65em; }
@media (max-width: 760px){
  /* narrow screens wrap every title to many lines, so a reservation would only
     add dead space */
  :root:lang(en) .subhero h1, :root:lang(ru) .subhero h1,
  :root:lang(en) .subhero .lede, :root:lang(ru) .subhero .lede{ min-height: 0; }
}
.subhero .lede{ margin:28px auto 0; }
.subhero-actions{ margin-top:40px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.subhero > *{ position:relative; z-index:1; }
.subhero > .subhero-glow{ position:absolute; left:50%; top:34%; width:70vw; max-width:820px; aspect-ratio:1; transform:translate(-50%,-50%); pointer-events:none; z-index:0; background:radial-gradient(circle, oklch(0.55 0.16 230 / 0.18), transparent 60%); filter:blur(55px); }

/* image / shot placeholders */
.hero-shot{ max-width:1200px; margin:0 auto; padding:0 clamp(20px,4vw,56px); }
.photo{ position:relative; border-radius:18px; overflow:hidden; border:1px solid var(--hairline); background:linear-gradient(135deg, oklch(0.34 0.09 250 / 0.55), oklch(0.28 0.07 300 / 0.4)); box-shadow:inset 0 1px 0 rgba(255,255,255,0.07), 0 40px 100px -40px rgba(0,0,0,0.85); }
.photo::after{ content:attr(data-label); position:absolute; left:16px; bottom:13px; font-family:var(--mono); font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:rgba(255,255,255,0.5); }
.photo.r169{ aspect-ratio:16/9; } .photo.r43{ aspect-ratio:4/3; } .photo.r11{ aspect-ratio:1/1; }
.photo .ph-mark{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,0.25); }
.photo .ph-mark svg{ width:46px; height:46px; }
/* real image inside a .photo tile */
.photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center; display:block; transition:transform .6s cubic-bezier(.2,.7,.2,1); }
.photo.has-img{ background:#0b0d11; }
.photo.has-img .ph-mark{ display:none; }
.photo.has-img::after{ text-shadow:0 1px 6px rgba(0,0,0,0.7); color:rgba(255,255,255,0.72); z-index:2; }
.photo.has-img::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(to top, rgba(0,0,0,0.55), transparent 34%); }
@media(hover:hover){ .photo.has-img:hover img{ transform:scale(1.045); } }

/* browser frame for a real website screenshot */
.browser{ max-width:1100px; margin:0 auto; border-radius:16px; overflow:hidden; border:1px solid var(--hairline); background:#0b0d11; box-shadow:inset 0 1px 0 rgba(255,255,255,0.06), 0 60px 150px -50px rgba(0,0,0,0.92); }
.browser .bar{ display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--hairline); background:oklch(0.22 0.02 260 / 0.6); }
.browser .bar .dots{ display:flex; gap:7px; }
.browser .bar .dots span{ width:11px; height:11px; border-radius:50%; background:rgba(255,255,255,0.16); }
.browser .bar .url{ font-family:var(--mono); font-size:12px; color:var(--ink-4); letter-spacing:0.02em; }
.browser img{ display:block; width:100%; height:auto; }

/* phone frame for a mobile screenshot */
.phone{ width:min(280px,72vw); aspect-ratio:9/18.6; border-radius:34px; padding:10px; background:linear-gradient(160deg,#1a1d24,#0a0c10); border:1px solid var(--hairline); box-shadow:inset 0 1px 0 rgba(255,255,255,0.08), 0 50px 120px -40px rgba(0,0,0,0.9); position:relative; }
.phone::before{ content:""; position:absolute; top:16px; left:50%; transform:translateX(-50%); width:96px; height:7px; border-radius:99px; background:rgba(255,255,255,0.14); z-index:2; }
.phone img{ display:block; width:100%; height:100%; object-fit:cover; object-position:top center; border-radius:25px; }

/* mailbox — auto-sent emails mockup */
.mailbox{ max-width:880px; margin:44px auto 0; border-radius:16px; overflow:hidden; border:1px solid var(--hairline); background:#0b0d11; box-shadow:inset 0 1px 0 rgba(255,255,255,0.06), 0 60px 150px -50px rgba(0,0,0,0.92); }
.mailbox .mb-bar{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 18px; border-bottom:1px solid var(--hairline); background:oklch(0.22 0.02 260 / 0.6); }
.mailbox .mb-bar .l{ display:flex; align-items:center; gap:12px; font-family:var(--mono); font-size:12px; color:var(--ink-2); }
.mailbox .mb-dots{ display:flex; gap:7px; } .mailbox .mb-dots span{ width:11px; height:11px; border-radius:50%; background:rgba(255,255,255,0.16); }
.mb-live{ display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-3); }
.mb-live i{ width:7px; height:7px; border-radius:50%; background:var(--good); box-shadow:0 0 0 4px oklch(0.78 0.14 155 / 0.18); animation:geo-pulse 2s ease-in-out infinite; }
.mb-row{ display:grid; grid-template-columns:210px 1fr auto; gap:16px; align-items:center; padding:15px 18px; border-bottom:1px solid var(--hairline); grid-template-areas:"from body meta"; transition:background .18s ease; }
.mb-row:last-child{ border-bottom:0; }
@media(hover:hover){ .mb-row:hover{ background:rgba(255,255,255,0.025); } }
.mb-from{ grid-area:from; display:flex; align-items:center; gap:10px; min-width:0; }
.mb-from .dot{ width:9px; height:9px; border-radius:50%; flex:none; }
.mb-from .name{ font-size:14px; font-weight:500; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mb-body{ grid-area:body; min-width:0; }
.mb-body .subj{ display:block; font-size:14px; color:var(--ink); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mb-body .snip{ display:block; font-size:13px; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:3px; }
.mb-meta{ grid-area:meta; display:flex; flex-direction:column; align-items:flex-end; gap:7px; white-space:nowrap; }
.mb-meta .time{ font-family:var(--mono); font-size:11px; color:var(--ink-4); }
.mb-tag{ font-family:var(--mono); font-size:10px; letter-spacing:0.08em; text-transform:uppercase; padding:3px 9px; border-radius:99px; border:1px solid var(--hairline); }
.mb-row.report .dot{ background:#7cc4ff; } .mb-tag.report{ color:#7cc4ff; }
.mb-row.alert  .dot{ background:#f5b060; } .mb-tag.alert{ color:#f5b060; }
.mb-row.run    .dot{ background:#7ddca0; } .mb-tag.run{ color:#7ddca0; }
.mb-row.custom .dot{ background:#c39bf5; } .mb-tag.custom{ color:#c39bf5; }
@media(max-width:700px){
  .mb-row{ grid-template-columns:1fr auto; grid-template-areas:"from meta" "body meta"; row-gap:4px; gap:12px; }
  .mb-body .snip{ white-space:normal; }
}

/* === project illustrations (AI page) — stylised mockups, no confidential data === */
.illus{ position:relative; border-radius:16px; border:1px solid var(--hairline); background:#0b0d11; overflow:hidden; box-shadow:inset 0 1px 0 rgba(255,255,255,0.05), 0 40px 100px -50px rgba(0,0,0,0.9); }
.illus::before{ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(120% 90% at 25% -10%, oklch(0.55 0.16 250 / 0.12), transparent 55%); }
.illus > *{ position:relative; }

/* The pointer tilt from .glass/.card, extended to the illustration frames.
   opa.js sets --rx/--ry/--gx/--gy and toggles .tilt; it only binds when the
   pointer is fine and reduced-motion is off, so no state leaks to touch.
   The glare rides on ::after because ::before already carries the corner wash. */
@media (hover:hover) and (pointer:fine){
  /* html.js prefix is load-bearing, not decoration: some frames carry .reveal on
     the .illus itself, and `html.js .reveal.in{ transform:none }` scores 0,3,1 —
     it beat a bare `.illus:not(.shot).tilt` at 0,3,0 and killed the tilt on the
     hub diagram. 0,4,1 wins. Costs nothing when JS is off, since the tilt class
     is only ever added by opa.js. */
  html.js .illus:not(.shot){
    transition:transform .5s cubic-bezier(.2,.8,.2,1), border-color .3s ease, box-shadow .5s ease;
    transform-style:preserve-3d; will-change:transform;
  }
  html.js .illus:not(.shot).tilt{
    transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-2px);
    border-color:var(--hairline-strong);
    box-shadow:0 30px 80px -40px rgba(0,0,0,0.8);
  }
  .illus:not(.shot)::after{
    content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
    opacity:0; transition:opacity .4s ease; z-index:3;
    background:radial-gradient(320px circle at var(--gx,50%) var(--gy,50%), rgba(255,255,255,0.10), transparent 60%);
  }
  .illus:not(.shot).tilt::after{ opacity:1; }
}
@media (prefers-reduced-motion:reduce){ .illus.tilt{ transform:none; } }
.illus-bar{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 16px; border-bottom:1px solid var(--hairline); background:oklch(0.22 0.02 260 / 0.5); font-family:var(--mono); font-size:11px; letter-spacing:0.05em; color:var(--ink-3); }
.illus-bar .live{ display:inline-flex; align-items:center; gap:7px; }
.illus-bar .live i{ width:7px; height:7px; border-radius:50%; background:var(--good); box-shadow:0 0 0 4px oklch(0.78 0.14 155 / 0.18); animation:geo-pulse 2s ease-in-out infinite; }
.illus-body{ padding:26px 24px; }

/* pipeline: DB -> auto/AI -> report + email */
.pipe{ display:grid; grid-template-columns:1fr 46px 1fr 46px 1fr; align-items:center; }
.pipe .node{ display:flex; flex-direction:column; align-items:center; gap:11px; text-align:center; }
.pipe .box{ width:62px; height:62px; border-radius:16px; border:1px solid var(--hairline); background:rgba(255,255,255,0.03); display:flex; align-items:center; justify-content:center; color:var(--ink); }
.pipe .box svg{ width:28px; height:28px; }
.pipe .box.acc{ border-color:oklch(0.6 0.16 250 / 0.55); color:var(--accent); box-shadow:0 0 26px -6px var(--accent); }
.pipe .cap{ font-family:var(--mono); font-size:10px; letter-spacing:0.04em; text-transform:uppercase; color:var(--ink-3); line-height:1.35; max-width:15ch; }
.pipe .wire{ height:2px; border-radius:2px; background:linear-gradient(90deg, oklch(0.6 0.16 250 / 0.12), var(--accent), oklch(0.6 0.16 250 / 0.12)); position:relative; overflow:hidden; }
.pipe .wire::after{ content:""; position:absolute; top:0; left:-30%; width:30%; height:100%; background:linear-gradient(90deg, transparent, #dff1ff, transparent); animation:wireflow 2.2s linear infinite; }
@keyframes wireflow{ to{ left:110% } }

/* AI summary card */
.aicard .row1{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.aicard .big{ font-size:clamp(32px,4vw,42px); font-weight:500; letter-spacing:-0.02em; font-variant-numeric:tabular-nums; color:var(--ink); }
.aicard .delta{ font-family:var(--mono); font-size:13px; color:var(--good); }
.aicard .delta.dn{ color:#f5b060; }
.aicard .sub{ font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:0.08em; color:var(--ink-4); }
.aicard .quote{ margin-top:18px; padding:14px 16px; border-left:2px solid var(--accent); background:rgba(255,255,255,0.02); border-radius:0 10px 10px 0; font-size:14px; color:var(--ink-2); line-height:1.55; }
.aicard .quote .tag{ font-family:var(--mono); font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:var(--accent); display:block; margin-bottom:6px; }
.aicard .cmp{ display:flex; gap:18px; margin-top:20px; }
.aicard .cmp .b{ flex:1; }
.aicard .cmp .bl{ display:flex; justify-content:space-between; font-family:var(--mono); font-size:10px; color:var(--ink-4); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:7px; }
.aicard .cmp .bar{ height:8px; border-radius:99px; background:rgba(255,255,255,0.06); overflow:hidden; }
.aicard .cmp .bar>span{ display:block; height:100%; border-radius:99px; background:var(--accent); }
.aicard .cmp .bar.prev>span{ background:rgba(255,255,255,0.22); }

/* desktop automation bot */
.illus.deskbot{ display:flex; flex-direction:column; }
.deskbot .scr{ padding:18px 20px; display:flex; flex-direction:column; gap:12px; flex:1; }
.deskbot .botfoot{ margin-top:auto; padding:13px 20px; border-top:1px solid var(--hairline); display:flex; justify-content:space-between; font-family:var(--mono); font-size:11px; color:var(--ink-4); letter-spacing:0.05em; text-transform:uppercase; }
.deskbot .task{ display:flex; align-items:center; gap:12px; font-size:14px; color:var(--ink-2); }
.deskbot .task .st{ width:22px; height:22px; border-radius:7px; flex:none; display:flex; align-items:center; justify-content:center; }
.deskbot .task .st svg{ width:13px; height:13px; }
.deskbot .task.done .st{ background:oklch(0.5 0.13 155 / 0.18); color:var(--good); }
.deskbot .task.run .st{ background:oklch(0.55 0.16 250 / 0.2); color:var(--accent); animation:geo-pulse 1.6s ease-in-out infinite; }
.deskbot .task.wait{ color:var(--ink-4); }
.deskbot .task.wait .st{ border:1px solid var(--hairline); }
.deskbot .task .k{ font-family:var(--mono); font-size:11px; color:var(--ink-4); margin-left:auto; letter-spacing:0.04em; }
.deskbot .badge{ font-family:var(--mono); font-size:10px; letter-spacing:0.08em; text-transform:uppercase; color:var(--accent); border:1px solid oklch(0.6 0.16 250 / 0.4); border-radius:99px; padding:3px 9px; }

/* data audit */
.audit .arow{ display:grid; grid-template-columns:1fr auto; gap:12px; align-items:center; padding:12px 0; border-bottom:1px solid var(--hairline); }
.audit .arow:last-of-type{ border-bottom:0; }
.audit .field{ color:var(--ink-2); font-family:var(--mono); font-size:12.5px; }
.audit .stat{ font-family:var(--mono); font-size:11px; letter-spacing:0.05em; text-transform:uppercase; display:inline-flex; align-items:center; gap:6px; }
.audit .stat.ok{ color:var(--good); } .audit .stat.flag{ color:#f5b060; }
.audit .stat .dot{ width:6px; height:6px; border-radius:50%; background:currentColor; }
.audit .foot{ margin-top:16px; padding-top:14px; border-top:1px solid var(--hairline); display:flex; justify-content:space-between; font-family:var(--mono); font-size:11px; color:var(--ink-4); text-transform:uppercase; letter-spacing:0.05em; }

.illus-two{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:44px; }
@media(max-width:820px){ .illus-two{ grid-template-columns:1fr; } }
@media(prefers-reduced-motion:reduce){ .pipe .wire::after, .illus-bar .live i, .deskbot .task.run .st{ animation:none; } }
@media(max-width:560px){ .pipe{ grid-template-columns:1fr 26px 1fr 26px 1fr; } .pipe .box{ width:48px; height:48px; border-radius:13px; } .pipe .box svg{ width:22px; height:22px; } .pipe .cap{ font-size:9px; } }

/* gallery */
.gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:56px; }
@media(max-width:820px){ .gallery{ grid-template-columns:1fr 1fr; } }
@media(max-width:520px){ .gallery{ grid-template-columns:1fr; } }
/* real-work screenshots: full-width stacked, aligned to the hero frame (max crispness) */
.gallery-work{ grid-template-columns:1fr; gap:22px; max-width:1100px; margin-left:auto; margin-right:auto; }
.gallery-work > .span-2{ grid-column:1 / -1; }
.gallery-work .photo picture{ display:block; }
/* on phones, swap to readable mobile close-ups that flow at natural height */
@media(max-width:640px){
  .gallery-work .photo.has-img{ aspect-ratio:auto; }
  .gallery-work .photo.has-img img{ position:static; width:100%; height:auto; }
  /* the mobile shots carry their own headings — drop the overlay label + bottom dim */
  .gallery-work .photo.has-img::before,
  .gallery-work .photo.has-img::after{ display:none; }
}

/* specs list */
.specs{ margin-top:8px; border-top:1px solid var(--hairline); }
.spec-row{ display:grid; grid-template-columns:1fr 2fr; gap:24px; padding:24px 0; border-bottom:1px solid var(--hairline); }
@media(max-width:640px){ .spec-row{ grid-template-columns:1fr; gap:8px; } }
.spec-row .k{ font-family:var(--mono); font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-3); }
.spec-row .v{ font-size:17px; color:var(--ink); }

/* alternating feature blocks on product page */
.feature-block{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,80px); align-items:center; margin-top:clamp(48px,7vw,96px); }
@media(max-width:920px){ .feature-block{ grid-template-columns:1fr; gap:36px; } }
.feature-block.rev .fb-text{ order:2; }
@media(max-width:920px){ .feature-block.rev .fb-text{ order:0; } .feature-block .fb-visual{ order:-1; } }
.feature-block h2{ font-size:clamp(30px,3.4vw,48px); line-height:1.05; }
.feature-block .lede{ margin-top:20px; }

/* === CASE STUDY ===================================================== */
.case-meta{ margin-top:30px; display:flex; flex-wrap:wrap; gap:1px; background:var(--hairline); border:1px solid var(--hairline); border-radius:12px; overflow:hidden; }
.case-meta > div{ flex:1 1 170px; background:var(--bg); padding:15px 18px; }
.case-meta .k{ font-family:var(--mono); font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-4); }
.case-meta .v{ margin-top:6px; font-size:15px; font-weight:500; color:var(--ink); }
.case-grid{ margin-top:44px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--hairline); border:1px solid var(--hairline); border-radius:14px; overflow:hidden; }
@media(max-width:900px){ .case-grid{ grid-template-columns:minmax(0,1fr); } }
.case-grid > div{ background:var(--bg); padding:26px 24px; }
.case-grid h3{ margin-top:12px; font-size:19px; }
.case-grid p{ margin-top:12px; font-size:15px; line-height:1.62; }
.case-grid ul{ margin:14px 0 0; padding-left:18px; display:flex; flex-direction:column; gap:8px; }
.case-grid li{ font-size:14.5px; line-height:1.55; color:var(--ink-2); }
.case-grid li::marker{ color:var(--ink-4); }

/* === INTEGRATION HUB ================================================ */
.hub{ display:grid; grid-template-columns:1fr 34px auto 34px 1fr; align-items:center; gap:clamp(8px,1.4vw,16px); }
@media(max-width:820px){ .hub{ grid-template-columns:minmax(0,1fr); gap:14px; } .hub .hub-wire{ display:none; } }
.hub-col{ display:flex; flex-direction:column; gap:9px; min-width:0; }
.hub-chip{ display:flex; align-items:center; gap:8px; padding:9px 12px; border:1px solid var(--hairline); border-radius:10px; background:rgba(255,255,255,0.025); font-family:var(--mono); font-size:11px; letter-spacing:0.03em; color:var(--ink-2); }
.hub-chip .d{ width:5px; height:5px; border-radius:50%; background:var(--ink-4); flex:none; }
.hub-chip.out .d{ background:var(--accent); }
.hub-wire{ height:2px; border-radius:2px; background:linear-gradient(90deg, oklch(0.6 0.16 250 / 0.1), var(--accent), oklch(0.6 0.16 250 / 0.1)); position:relative; overflow:hidden; }
.hub-wire::after{ content:""; position:absolute; top:0; left:-30%; width:30%; height:100%; background:linear-gradient(90deg, transparent, #dff1ff, transparent); animation:wireflow 2.4s linear infinite; }
@media(prefers-reduced-motion:reduce){ .hub-wire::after{ animation:none; } }
.hub-core{ display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; padding:20px 18px; border-radius:16px; border:1px solid oklch(0.6 0.16 250 / 0.5); background:oklch(0.55 0.16 250 / 0.08); box-shadow:0 0 46px -16px var(--accent); }
.hub-core .t{ font-size:15px; font-weight:500; color:var(--ink); white-space:nowrap; }
.hub-core .s{ font-family:var(--mono); font-size:10px; letter-spacing:0.08em; text-transform:uppercase; color:var(--accent); }

/* === DEMO SCREENSHOT GALLERY ======================================== */
/* Stated plainly, in the site's own voice: a hairline rule and a mono label,
   the same device used for every other section. The amber bordered callout this
   replaced read as a generated template, not as our own page. */
.demo-note{ margin-top:30px; padding-top:18px; border-top:1px solid var(--hairline); max-width:80ch; }
.demo-note p{ margin:0; font-size:14.5px; line-height:1.66; color:var(--ink-2); }
.dn-tag{ display:block; margin-bottom:9px; font-family:var(--mono); font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-3); }

.shots{ margin-top:34px; display:flex; flex-direction:column; gap:26px; }
.shot{ margin:0; }
.shot img{ display:block; width:100%; height:auto; }
.shot figcaption{ padding:15px 18px; border-top:1px solid var(--hairline); font-size:14px; line-height:1.58; color:var(--ink-3); background:oklch(0.22 0.02 260 / 0.28); }
/* not a badge — just the right-hand caption of the frame's own bar */
.demo-pill{ flex:none; color:var(--ink-4); }

/* === FULL-SIZE SCREENSHOT VIEWER ==================================== */
.shot-open{ display:block; }
.shot-hint{ display:none; }
@media(max-width:900px){
  .shot-hint{ display:block; margin-top:9px; font-family:var(--mono); font-size:10px; letter-spacing:0.07em; text-transform:uppercase; color:var(--accent); }
}
.lightbox{ display:none; }
.lightbox:target{ display:flex; flex-direction:column; position:fixed; inset:0; z-index:300; background:#05060a; }
.lb-bar{ flex:none; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 14px; padding-top:max(12px, env(safe-area-inset-top)); border-bottom:1px solid var(--hairline); background:oklch(0.22 0.02 260 / 0.75); font-family:var(--mono); font-size:11px; letter-spacing:0.05em; color:var(--ink-3); }
.lb-right{ display:inline-flex; align-items:center; gap:9px; flex:none; }
.lb-close{ color:var(--ink); text-decoration:none; border:1px solid var(--hairline-strong); border-radius:999px; padding:6px 13px; font-family:var(--mono); font-size:10px; letter-spacing:0.08em; text-transform:uppercase; }
.lb-close:hover{ border-color:var(--ink-3); }
.lb-scroll{ flex:1; min-height:0; overflow:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; display:flex; align-items:flex-start; justify-content:flex-start; }
/* phones pan a full-width copy, so the dashboard text stays its original size */
.lb-scroll img{ display:block; width:1640px; max-width:none; height:auto; }
@media(min-width:901px){
  .lb-scroll{ align-items:center; justify-content:center; padding:20px; }
  .lb-scroll img{ width:auto; max-width:100%; max-height:100%; }
}

/* === FEATURE-BLOCK ILLUSTRATIONS ==================================== */
/* aspect-ratio matches the .photo.r43 frames these replaced, so the space
   reserved before paint is unchanged and nothing shifts */
.mold, .answer{ aspect-ratio:4/3; display:flex; flex-direction:column; }
.il-note{ flex:none; font-family:var(--mono); font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-4); }
/* nothing to hover on touch, so do not invite it */
@media(hover:none){ .il-note{ display:none; } }
.mold-body, .answer-body{ flex:1; min-height:0; display:flex; flex-direction:column; }

/* --- A --- */
/* both halves share the height rather than being pushed to the extremes —
   space-between left a dead void in the middle of the 4:3 frame */
.mold-body{ gap:0; }
.mold-half{ flex:1; min-height:0; display:flex; flex-direction:column; gap:10px; }
.mold-cap{ flex:none; font-family:var(--mono); font-size:9.5px; letter-spacing:0.11em; text-transform:uppercase; color:var(--ink-4); }
.mold-rows{ flex:1; min-height:0; display:flex; flex-direction:column; justify-content:space-evenly; }
.mold-rows i{ height:10px; border-radius:3px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.05); }
.mold-turn{ flex:none; display:flex; justify-content:center; padding:10px 0; }
.mold-turn span{ width:1px; height:22px; background:linear-gradient(180deg, var(--hairline), var(--accent)); position:relative; }
.mold-turn span::after{ content:""; position:absolute; left:-3px; bottom:-1px; width:7px; height:7px; border-right:1px solid var(--accent); border-bottom:1px solid var(--accent); transform:rotate(45deg); }
.mold-grid{ flex:1; min-height:0; display:grid; grid-template-columns:repeat(6,1fr); grid-template-rows:1fr 1fr; gap:8px; }
.mold-grid b{ border-radius:4px; background:oklch(0.55 0.16 250 / 0.22); border:1px solid oklch(0.60 0.16 250 / 0.34); }
.mold-grid .a{ grid-column:span 4; }
.mold-grid .b{ grid-column:span 2; }
.mold-grid .c{ grid-column:span 2; }
.mold-grid .d{ grid-column:span 4; }

/* --- B --- */
.answer-body{ gap:16px; }
.ans-chart{ position:relative; flex:1; min-height:0; display:flex; align-items:flex-end; gap:8px; padding-bottom:1px; border-bottom:1px solid var(--hairline); }
.ans-chart i{ flex:1; height:var(--h); border-radius:3px 3px 0 0; background:rgba(255,255,255,0.08); }
.ans-chart i.hi{ background:linear-gradient(180deg, var(--accent), oklch(0.55 0.16 250 / 0.35)); }
.ans-line{ position:absolute; left:0; right:0; bottom:88%; height:1px; background:repeating-linear-gradient(90deg, var(--accent) 0 4px, transparent 4px 9px); transform:scaleX(0); transform-origin:left; opacity:0.5; }
.ans-chip{ flex:none; display:flex; align-items:center; gap:9px; padding:11px 13px; border:1px solid var(--hairline); border-radius:10px; background:rgba(255,255,255,0.025); }
.ans-dot{ flex:none; width:6px; height:6px; border-radius:50%; background:var(--accent); }
.ans-txt{ font-size:13px; line-height:1.4; color:var(--ink-2); }

/* --- motion, pointer devices only --- */
@media(hover:hover) and (pointer:fine){
  .mold-grid b, .ans-chart i, .ans-chip, .ans-line{ transition:transform .5s cubic-bezier(.2,.7,.2,1), background .5s ease, border-color .5s ease, opacity .5s ease; }
  .mold-grid .a{ transition-delay:0s; }   .mold-grid .b{ transition-delay:.06s; }
  .mold-grid .c{ transition-delay:.12s; } .mold-grid .d{ transition-delay:.18s; }
  .mold:hover .mold-grid b{ transform:translateY(-4px); background:oklch(0.55 0.16 250 / 0.34); border-color:oklch(0.65 0.16 250 / 0.55); }
  .answer:hover .ans-chart i{ transform:translateY(-3px); }
  .answer:hover .ans-chart i.hi{ transform:translateY(-7px); }
  .answer:hover .ans-line{ transform:scaleX(1); opacity:0.9; }
  .answer:hover .ans-chip{ transform:translateY(-3px); border-color:oklch(0.60 0.16 250 / 0.45); background:oklch(0.55 0.16 250 / 0.08); }
}
@media(prefers-reduced-motion:reduce){
  .mold-grid b, .ans-chart i, .ans-chip{ transition:background .3s ease, border-color .3s ease; }
  .mold:hover .mold-grid b, .answer:hover .ans-chart i, .answer:hover .ans-chip{ transform:none; }
  .ans-line{ transform:scaleX(1); }
}

/* built output: the language switch is real links, not CSS radios */
.lang-switch .lang-opt{
  display:inline-flex; align-items:center; user-select:none; text-decoration:none;
  color:var(--ink-3); padding:6px 14px; border-radius:999px;
  font-family:var(--mono); font-size:12px; letter-spacing:0.06em; text-transform:uppercase;
  transition:color .2s ease, background .3s ease;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
}
.lang-switch a.lang-opt:hover{ color:var(--ink); }
.lang-switch .lang-opt.is-current{ color:var(--bg); background:var(--ink); }