/* ============================================
       CITT -- AI Voice Receptionist Landing Page
       Brand: Sora + DM Mono | #E8553D accent
       ============================================ */

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --bg: #FAFAF7;
      --bg-warm: #F3F0EA;
      --bg-dark: #1A1A17;
      --ink: #1A1A17;
      --ink-2: #5C5C56;
      --ink-3: #9C9C94;
      --accent: #E8553D;
      --accent-hover: #D44A34;
      --accent-soft: rgba(232, 85, 61, 0.08);
      --accent-glow: rgba(232, 85, 61, 0.15);
      --green: #2D8F5C;
      --green-soft: rgba(45, 143, 92, 0.08);
      --border: #E5E2DB;
      --border-light: #EDEBE5;
      --radius: 12px;
      --max-w: 1120px;
      --mono: 'DM Mono', monospace;
      --sans: 'Sora', -apple-system, system-ui, sans-serif;
    }

    html { scroll-behavior: smooth; }

    body {
      font-family: var(--sans);
      color: var(--ink);
      background: var(--bg);
      line-height: 1.7;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }

    .wrap { max-width: var(--max-w); margin: 0 auto; padding: 0 28px; }
    a { color: inherit; text-decoration: none; }

    /* ============================================
       ANIMATED CHARACTER PLACEHOLDER
       Reusable placeholder for Lottie/Rive/SVG
       animated character illustrations
       ============================================ */

    .char-placeholder {
      border: 2px dashed var(--border);
      border-radius: 16px;
      background:
        linear-gradient(135deg, rgba(232,85,61,0.03) 0%, rgba(232,85,61,0.06) 100%);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      position: relative;
      overflow: hidden;
      transition: border-color 0.3s, box-shadow 0.3s;
    }
    .char-placeholder:hover {
      border-color: var(--accent);
      box-shadow: 0 8px 32px rgba(232, 85, 61, 0.08);
    }

    /* Pulsing circle animation inside placeholder */
    .char-placeholder::before {
      content: '';
      width: 48px; height: 48px;
      border-radius: 50%;
      border: 2px solid var(--accent);
      opacity: 0.25;
      animation: charPulse 2.5s ease-in-out infinite;
    }
    @keyframes charPulse {
      0%, 100% { transform: scale(0.9); opacity: 0.15; }
      50% { transform: scale(1.1); opacity: 0.35; }
    }

    .char-placeholder-label {
      font-family: var(--mono);
      font-size: .62rem;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--accent);
      opacity: 0.7;
      text-align: center;
      padding: 0 12px;
    }
    .char-placeholder-desc {
      font-size: .72rem;
      color: var(--ink-3);
      text-align: center;
      max-width: 200px;
      line-height: 1.5;
      padding: 0 12px;
    }

    /* Size variants */
    .char-placeholder--lg { width: 320px; height: 360px; }
    .char-placeholder--md { width: 240px; height: 260px; }
    .char-placeholder--sm { width: 120px; height: 120px; }
    .char-placeholder--wide { width: 100%; height: 200px; }
    .char-placeholder--hero-pair { flex: 1; height: 260px; }

    /* Dark variant for dark sections */
    .char-placeholder--dark {
      border-color: rgba(255,255,255,0.12);
      background: linear-gradient(135deg, rgba(232,85,61,0.05) 0%, rgba(232,85,61,0.1) 100%);
    }
    .char-placeholder--dark .char-placeholder-label { color: var(--accent); }
    .char-placeholder--dark .char-placeholder-desc { color: rgba(255,255,255,0.35); }

    /* ============================================
       NAV
       ============================================ */

    .nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 100;
      padding: 16px 0; transition: all .35s;
    }
    .nav.scrolled {
      background: rgba(250, 250, 247, 0.92);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border-bottom: 1px solid var(--border-light);
      padding: 12px 0;
    }
    .nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
    /* Wortmarke: Bild statt Text. display:flex zentriert es zur Navigation,
       height fixiert die optische Groesse, width:auto haelt das Verhaeltnis. */
    .nav-logo { display: flex; align-items: center; line-height: 0; flex-shrink: 0; }
    .nav-logo img { height: 36px; width: auto; display: block; }
    .nav-links {
      display: flex; align-items: center; gap: 20px; list-style: none;
      flex-wrap: nowrap; white-space: nowrap; min-width: 0;
    }
    .nav-links > li { flex-shrink: 0; }
    .nav-links a { font-size: .88rem; font-weight: 500; color: var(--ink-2); transition: color .25s; }
    .nav-links a:hover { color: var(--ink); }
    .nav-cta-link {
      background: var(--ink); color: var(--bg) !important;
      padding: 10px 18px; border-radius: 100px;
      font-weight: 700 !important; font-size: .85rem !important;
      white-space: nowrap;
      transition: all .3s !important;
    }
    .nav-cta-link:hover { background: var(--accent) !important; transform: translateY(-1px); }
    .nav-login-link {
      color: var(--ink-2) !important;
      font-weight: 600 !important; font-size: .85rem !important;
      transition: color .25s !important;
    }
    .nav-login-link:hover { color: var(--ink) !important; }
    /* Language switcher (added with the Astro rebuild).

       Reads as a control, not as a seventh destination: a bordered pill in
       the muted ink, so the eye groups it with Login/Get Started rather
       than with the section anchors. It is the ONLY deliberate change to
       the header's pixels — everything else in this stylesheet above the
       appended block at the bottom is untouched. */
    .nav-dd { position: relative; list-style: none; z-index: 2; }
    .nav-dd details { position: relative; }
    .nav-dd details[open] { z-index: 5; }
    .nav-dd summary {
      list-style: none;
      cursor: pointer;
      user-select: none;
      font-size: .88rem;
      font-weight: 500;
      color: var(--ink-2);
      white-space: nowrap;
    }
    .nav-dd summary::-webkit-details-marker,
    .nav-dd summary::marker { display: none; content: none; }
    .nav-dd summary:hover { color: var(--ink); }
    .nav-dd-menu {
      position: absolute;
      right: 0;
      top: calc(100% + 10px);
      min-width: 196px;
      max-height: min(70vh, 480px);
      overflow: auto;
      margin: 0;
      padding: 6px;
      list-style: none;
      background: #ffffff;
      border: 1px solid var(--border);
      border-radius: 16px;
      box-shadow: 0 16px 48px rgba(20, 20, 16, .18);
      z-index: 300;
    }
    .nav-dd-menu--wide {
      min-width: min(520px, 92vw);
      left: 0;
      right: auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      column-gap: 4px;
    }
    .nav-dd-menu a,
    .nav-dd-menu span {
      display: block;
      padding: 8px 12px;
      border-radius: 10px;
      font-size: .88rem;
      font-weight: 500;
      color: var(--ink-2);
      white-space: nowrap;
    }
    .nav-dd-menu a:hover { background: var(--border-light); color: var(--ink); }
    .nav-dd-menu .is-active { color: var(--ink); font-weight: 700; }
    html[dir="rtl"] .nav-dd-menu { right: auto; left: 0; }
    html[lang="el"] { font-family: Manrope, Sora, sans-serif; }
    html[lang="ru"] { font-family: Manrope, Sora, sans-serif; }
    html[lang="ja"] { font-family: "Noto Sans JP", Sora, sans-serif; }
    html[lang="ko"] { font-family: "Noto Sans KR", Sora, sans-serif; }
    html[lang="zh"] { font-family: "Noto Sans SC", Sora, sans-serif; }
    html[dir="rtl"] { font-family: "Noto Sans Arabic", Sora, sans-serif; }
    .nav-toggle {
      display: none; background: none; border: none; cursor: pointer;
      width: 28px; height: 20px; position: relative;
      flex-direction: column; justify-content: space-between;
    }
    .nav-toggle span {
      display: block; width: 100%; height: 2px;
      background: var(--ink); border-radius: 2px; transition: all .3s;
    }

    /* ============================================
       HERO — Calculator-first
       ============================================ */

    .hero {
      padding: 90px 0 40px;
      position: relative;
      overflow: visible;
      background:
        radial-gradient(circle at 10% 30%, rgba(232, 85, 61, 0.04) 0%, transparent 50%),
        radial-gradient(circle at 90% 70%, rgba(232, 85, 61, 0.03) 0%, transparent 50%),
        var(--bg);
    }

    /* Decorative floating accents (Alta-style) */
    .hero-deco {
      position: absolute;
      border-radius: 50%;
      background: rgba(232, 85, 61, 0.08);
      pointer-events: none;
      z-index: 0;
    }
    .hero-deco--1 { width: 120px; height: 120px; top: 15%; left: -30px; animation: decoFloat 6s ease-in-out infinite; }
    .hero-deco--2 { width: 80px; height: 80px; top: 40%; right: -20px; animation: decoFloat 8s ease-in-out infinite reverse; }
    .hero-deco--3 { width: 48px; height: 48px; bottom: 20%; left: 8%; animation: decoFloat 5s ease-in-out infinite 1s; }
    .hero-deco--4 { width: 24px; height: 24px; top: 25%; right: 12%; background: rgba(232, 85, 61, 0.12); animation: decoFloat 4s ease-in-out infinite 0.5s; }
    .hero-deco--5 { width: 14px; height: 14px; top: 60%; left: 15%; background: rgba(232, 85, 61, 0.15); animation: decoFloat 7s ease-in-out infinite 2s; }

    /* Decorative sparkle crosses */
    .hero-sparkle {
      position: absolute;
      width: 16px; height: 16px;
      pointer-events: none; z-index: 0;
      opacity: 0.25;
      animation: sparkleSpin 8s linear infinite;
    }
    .hero-sparkle svg { width: 100%; height: 100%; }
    .hero-sparkle--1 { top: 18%; right: 20%; }
    .hero-sparkle--2 { top: 50%; left: 6%; animation-duration: 12s; animation-direction: reverse; }
    .hero-sparkle--3 { bottom: 30%; right: 8%; width: 12px; height: 12px; animation-duration: 10s; }

    @keyframes decoFloat {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-12px); }
    }
    @keyframes sparkleSpin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    /* Large enclosing container card */
    .hero .wrap { max-width: 1400px; padding: 0 16px; }
    .hero-container {
      background: #fff;
      border: 1.5px solid var(--border-light);
      border-radius: 24px;
      padding: 36px 56px 48px;
      box-shadow: 0 4px 40px rgba(0, 0, 0, 0.03), 0 1px 3px rgba(0, 0, 0, 0.02);
      position: relative;
      z-index: 1;
      overflow: visible;
    }

    .hero-header {
      text-align: center;
      margin-bottom: 28px;
    }

    .hero-eyebrow {
      font-family: var(--mono); font-size: .74rem; font-weight: 500;
      text-transform: uppercase; letter-spacing: .12em;
      color: var(--accent); margin-bottom: 10px;
    }

    .hero h1 {
      font-size: clamp(2.6rem, 5vw, 3.8rem);
      font-weight: 800; line-height: 1.08;
      letter-spacing: -0.04em; margin-bottom: 10px;
    }
    .hero h1 em { font-style: normal; color: var(--accent); }

    .hero-tagline {
      font-size: 1.1rem;
      color: var(--ink-2);
      margin-top: 8px;
      font-weight: 400;
      letter-spacing: -0.01em;
    }

    .hero-sub {
      font-size: 1.08rem; color: var(--ink-2);
      max-width: 560px; margin: 0 auto 32px; line-height: 1.75;
    }

    .hero-actions { display: flex; gap: 14px; align-items: center; justify-content: center; flex-wrap: wrap; }

    .btn-primary {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 14px 32px; background: var(--ink); color: var(--bg);
      border-radius: 100px; font-weight: 700; font-size: .92rem;
      transition: all .35s; border: none; cursor: pointer;
      font-family: var(--sans);
    }
    .btn-primary:hover {
      background: var(--accent); transform: translateY(-2px);
      box-shadow: 0 8px 30px rgba(232, 85, 61, 0.2);
    }
    .btn-secondary {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 14px 32px; background: transparent; color: var(--ink);
      border-radius: 100px; font-weight: 700; font-size: .92rem;
      border: 1.5px solid var(--border); transition: all .3s;
      cursor: pointer; font-family: var(--sans);
    }
    .btn-secondary:hover { border-color: var(--ink); background: var(--ink); color: var(--bg); }
    .btn-arrow { transition: transform .3s; }
    .btn-primary:hover .btn-arrow,
    .btn-secondary:hover .btn-arrow { transform: translateX(3px); }

    /* Hero calculator layout */
    .hero-calc-layout {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 32px;
      align-items: stretch;
      position: relative;
    }

    .hero-calc-left {
      position: relative; z-index: 1;
      display: flex; flex-direction: column;
    }
    .hero-calc-left .calc-card {
      flex: 1;
      display: flex;
      flex-direction: column;
    }

    /* Below calculator: description + CTAs */
    .hero-below {
      text-align: center;
      margin-top: 48px;
    }
    .hero-below .hero-sub {
      max-width: 640px;
      margin: 0 auto 28px;
    }

    /* CITT mascot character cards — hanging over container edge */
    .hero-chars {
      display: flex;
      gap: 32px;
      justify-content: center;
      align-items: stretch;
      margin-top: 32px;
      margin-bottom: -180px;
      position: relative;
      z-index: 2;
    }
    .mascot-card {
      width: 280px;
      border-radius: 20px;
      border: 1.5px solid var(--border-light);
      background: #fff;
      overflow: hidden;
      transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    }
    .mascot-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 16px 48px rgba(232, 85, 61, 0.10), 0 4px 20px rgba(0, 0, 0, 0.06);
    }
    .mascot-card-img {
      background: #F8D5C2;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      padding: 0;
      height: 320px;
      overflow: hidden;
    }
    .mascot-card-img img {
      width: 110%;
      max-width: none;
      height: 100%;
      object-fit: cover;
      object-position: top center;
      filter: drop-shadow(0 8px 24px rgba(0,0,0,0.08));
      transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .mascot-card:hover .mascot-card-img img {
      transform: scale(1.04);
    }
    .mascot-card-label {
      background: var(--bg-dark);
      color: #fff;
      font-size: .82rem;
      font-weight: 700;
      letter-spacing: 0.02em;
      text-align: center;
      padding: 14px 16px;
    }

    /* Animated mascot: video hidden by default, shown on hover */
    .mascot-card--animated .mascot-card-img { position: relative; }
    .mascot-video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: top center;
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    .mascot-card--animated:hover .mascot-static { opacity: 0; }
    .mascot-card--animated:hover .mascot-video { opacity: 1; }

    .calc-card {
      background: #fff;
      border: 1px solid var(--border-light);
      border-radius: 16px;
      padding: 28px 26px;
      box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04), 0 20px 60px rgba(0, 0, 0, 0.03);
    }

    .calc-card-label {
      font-family: var(--mono); font-size: .62rem; font-weight: 500;
      text-transform: uppercase; letter-spacing: .12em;
      color: var(--ink-3); text-align: center; margin-bottom: 20px;
    }

    .calc-slider-group { margin-bottom: 18px; }
    .calc-slider-group:last-of-type { margin-bottom: 0; }

    .calc-slider-header {
      display: flex; justify-content: space-between; align-items: baseline;
      margin-bottom: 8px;
    }
    .calc-slider-title { font-size: .82rem; font-weight: 700; color: var(--ink); }
    .calc-slider-value {
      font-family: var(--mono); font-size: .82rem; font-weight: 500;
      color: var(--accent); min-width: 60px; text-align: right;
    }

    .calc-slider-wrap { position: relative; height: 6px; margin-bottom: 6px; }
    .calc-slider-track { position: absolute; inset: 0; background: var(--border); border-radius: 3px; }
    .calc-slider-fill {
      position: absolute; top: 0; left: 0; bottom: 0;
      background: var(--accent); border-radius: 3px;
      transition: width 0.1s ease;
    }

    input[type="range"].calc-range {
      -webkit-appearance: none; appearance: none;
      width: 100%; height: 6px; background: transparent;
      position: absolute; top: 0; left: 0; z-index: 2;
      cursor: pointer; margin: 0;
    }
    input[type="range"].calc-range::-webkit-slider-thumb {
      -webkit-appearance: none; appearance: none;
      width: 20px; height: 20px; border-radius: 50%;
      background: var(--accent); border: 3px solid #fff;
      box-shadow: 0 2px 8px rgba(232, 85, 61, 0.3);
      cursor: pointer; margin-top: -7px;
      transition: box-shadow 0.2s, transform 0.2s;
    }
    input[type="range"].calc-range::-webkit-slider-thumb:hover {
      box-shadow: 0 2px 16px rgba(232, 85, 61, 0.5);
      transform: scale(1.1);
    }
    input[type="range"].calc-range::-moz-range-thumb {
      width: 20px; height: 20px; border-radius: 50%;
      background: var(--accent); border: 3px solid #fff;
      box-shadow: 0 2px 8px rgba(232, 85, 61, 0.3);
      cursor: pointer;
    }
    input[type="range"].calc-range::-webkit-slider-runnable-track {
      height: 6px; background: transparent; border-radius: 3px;
    }
    input[type="range"].calc-range::-moz-range-track {
      height: 6px; background: transparent; border-radius: 3px;
    }
    .calc-slider-range {
      display: flex; justify-content: space-between;
      font-family: var(--mono); font-size: .6rem; color: var(--ink-3);
    }

    /* Calculator results — stretch to exactly match calculator height */
    .calc-results { display: flex; flex-direction: column; gap: 12px; min-height: 100%; }
    .calc-results .calc-result-card { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; }

    .calc-result-card {
      background: var(--bg-warm);
      border: 1px solid var(--border-light);
      border-radius: 14px;
      padding: 24px 22px;
      text-align: center;
      transition: all 0.4s ease;
    }
    .calc-result-card:hover {
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06);
      transform: translateY(-2px);
    }
    .calc-result-label {
      font-family: var(--mono); font-size: .62rem; font-weight: 500;
      text-transform: uppercase; letter-spacing: .12em;
      color: var(--ink-3); margin-bottom: 6px;
    }
    .calc-result-value {
      font-size: clamp(1.8rem, 3.2vw, 2.4rem); font-weight: 800;
      color: var(--accent); letter-spacing: -0.03em;
      margin-bottom: 4px; line-height: 1.1;
      transition: all 0.3s ease;
    }
    .calc-result-note { font-size: .78rem; color: var(--ink-3); line-height: 1.5; }

    .calc-result-card--dark {
      background: var(--bg-dark); border-color: transparent;
    }
    .calc-result-card--dark .calc-result-label { color: rgba(255, 255, 255, 0.4); }
    .calc-result-card--dark .calc-result-value { color: var(--accent); }
    .calc-result-card--dark .calc-result-note { color: rgba(255, 255, 255, 0.4); }

    .calc-demo-btn {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 14px 28px; background: var(--accent); color: #fff;
      border-radius: 100px; font-weight: 700; font-size: .88rem;
      transition: all .35s; border: none; cursor: pointer;
      font-family: var(--sans);
    }
    .calc-demo-btn:hover {
      background: var(--accent-hover); transform: translateY(-2px);
      box-shadow: 0 8px 30px rgba(232, 85, 61, 0.3);
    }
    .calc-demo-icon {
      width: 48px; height: 48px; border-radius: 50%;
      background: var(--accent); display: flex;
      align-items: center; justify-content: center;
      box-shadow: 0 4px 16px rgba(232, 85, 61, 0.25);
    }
    .calc-demo-icon svg {
      width: 22px; height: 22px; fill: none; stroke: #fff;
      stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
    }

    /* ============================================
       SOCIAL PROOF BAR
       ============================================ */

    .proof { padding: 120px 0 32px; border-bottom: 1px solid var(--border); position: relative; z-index: 0; }
    .proof-stats { display: flex; justify-content: center; gap: 56px; flex-wrap: wrap; }
    .proof-stat { text-align: center; }
    .proof-stat-v { font-size: 1.8rem; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; }
    .proof-stat-l { font-size: .75rem; color: var(--ink-3); margin-top: 2px; font-weight: 500; }

    /* ============================================
       SHARED SECTION STYLES
       ============================================ */

    .sec { padding: 110px 0; }
    .sec-label {
      font-family: var(--mono); font-size: .72rem; font-weight: 500;
      text-transform: uppercase; letter-spacing: .12em;
      color: var(--accent); margin-bottom: 14px;
    }
    .sec-title {
      font-size: clamp(1.9rem, 3.6vw, 2.6rem); font-weight: 700;
      letter-spacing: -0.03em; line-height: 1.15; margin-bottom: 16px;
    }
    .sec-title em { font-style: normal; color: var(--accent); }
    .sec-desc { font-size: 1rem; color: var(--ink-2); max-width: 480px; margin-bottom: 56px; }

    /* ============================================
       PROBLEM SECTION
       ============================================ */

    .problem { background: var(--bg-warm); padding-top: 32px; padding-bottom: 56px; }
    .problem-header { display: flex; align-items: flex-start; gap: 0; margin-bottom: 24px; position: relative; }
    .problem-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

    .problem-card {
      background: #fff; border: 1px solid var(--border-light);
      border-radius: var(--radius); padding: 32px 28px;
      transition: all .4s;
    }
    .problem-card:hover { box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06); transform: translateY(-3px); }

    .problem-num { font-family: var(--mono); font-size: 1.4rem; color: var(--ink-3); margin-bottom: 12px; line-height: 1; font-weight: 500; }
    .problem-card h3 { font-size: 1rem; font-weight: 700; margin-bottom: 8px; }
    .problem-card p { font-size: .88rem; color: var(--ink-2); line-height: 1.7; }

    /* ============================================
       HOW IT WORKS
       ============================================ */

    .how { background: var(--bg); }
    .how-track { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; position: relative; }
    .how-track::before {
      content: ''; position: absolute; top: 28px; left: 28px; right: 28px;
      height: 2px; background: var(--border);
    }
    .how-step { position: relative; padding: 0 28px; }
    .how-step-dot {
      width: 12px; height: 12px; border-radius: 50%;
      border: 2px solid var(--accent); background: var(--bg);
      position: relative; z-index: 1; margin-bottom: 24px;
    }
    .how-step:first-child .how-step-dot { background: var(--accent); }
    .how-step h3 { font-size: 1rem; font-weight: 700; margin-bottom: 8px; }
    .how-step p { font-size: .88rem; color: var(--ink-2); line-height: 1.65; }

    /* ============================================
       CALL FLOW (with phone mockup)
       ============================================ */

    .callflow { background: var(--bg-dark); color: #fff; overflow: hidden; }
    .callflow .sec-label { color: var(--accent); }
    .callflow .sec-title { color: #fff; }
    .callflow .sec-desc { color: rgba(255, 255, 255, 0.55); }

    .cf-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }
    .cf-steps { display: flex; flex-direction: column; gap: 0; }
    .cf-step {
      display: grid; grid-template-columns: 48px 1fr; gap: 16px;
      padding: 24px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }
    .cf-step:last-child { border-bottom: none; }
    .cf-num { font-family: var(--mono); font-size: 1rem; color: rgba(255, 255, 255, 0.25); font-weight: 500; }
    .cf-step h4 { font-size: .95rem; font-weight: 700; color: #fff; margin-bottom: 4px; }
    .cf-step p { font-size: .85rem; color: rgba(255, 255, 255, 0.5); line-height: 1.65; }

    /* Phone mockup (moved from old hero) */
    .cf-right {
      display: flex; flex-direction: column; align-items: center; gap: 24px;
    }

    .phone-wrap { position: relative; display: flex; justify-content: center; }
    .phone {
      width: 260px; height: 520px; background: var(--bg-dark);
      border-radius: 36px; padding: 10px; position: relative;
      box-shadow: 0 40px 80px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.06);
      overflow: hidden;
    }
    .phone-inner {
      width: 100%; height: 100%; border-radius: 28px;
      background: #111; overflow: hidden;
      display: flex; flex-direction: column;
    }
    .phone-notch {
      width: 110px; height: 26px; background: var(--bg-dark);
      border-radius: 0 0 14px 14px; margin: 0 auto;
      position: relative; z-index: 2;
    }
    .phone-screen {
      flex: 1; display: flex; flex-direction: column;
      align-items: center; padding: 20px 18px 16px;
    }

    .call-status {
      font-family: var(--mono); font-size: .58rem; color: var(--green);
      text-transform: uppercase; letter-spacing: .12em;
      margin-bottom: 20px; display: flex; align-items: center; gap: 6px;
    }
    .call-status-dot {
      width: 5px; height: 5px; border-radius: 50%;
      background: var(--green); animation: liveDot 2s ease infinite;
    }
    @keyframes liveDot { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

    .call-avatar {
      width: 64px; height: 64px; border-radius: 50%;
      background: linear-gradient(135deg, var(--accent), #F49E4C);
      display: flex; align-items: center; justify-content: center;
      margin-bottom: 14px; position: relative;
    }
    .call-avatar svg {
      width: 28px; height: 28px; stroke: #fff; fill: none;
      stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
    }
    .call-avatar::after {
      content: ''; position: absolute; inset: -6px; border-radius: 50%;
      border: 2px solid rgba(232, 85, 61, 0.2);
      animation: avatarPulse 3s ease infinite;
    }
    @keyframes avatarPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.12); opacity: .3; } }

    .call-name { font-size: .92rem; font-weight: 700; color: #fff; margin-bottom: 2px; }
    .call-number { font-family: var(--mono); font-size: .66rem; color: rgba(255, 255, 255, 0.3); margin-bottom: 4px; }
    .call-timer { font-family: var(--mono); font-size: .66rem; color: rgba(255, 255, 255, 0.4); margin-bottom: 16px; }

    .call-wave { display: flex; align-items: center; justify-content: center; gap: 2.5px; height: 40px; margin-bottom: 16px; }
    .call-wave-bar { width: 2.5px; border-radius: 2px; background: var(--accent); animation: callWave 1.4s ease-in-out infinite; }
    .call-wave-bar:nth-child(1) { height: 6px; animation-delay: 0s; }
    .call-wave-bar:nth-child(2) { height: 14px; animation-delay: .08s; }
    .call-wave-bar:nth-child(3) { height: 22px; animation-delay: .16s; }
    .call-wave-bar:nth-child(4) { height: 10px; animation-delay: .24s; }
    .call-wave-bar:nth-child(5) { height: 30px; animation-delay: .12s; }
    .call-wave-bar:nth-child(6) { height: 18px; animation-delay: .2s; }
    .call-wave-bar:nth-child(7) { height: 26px; animation-delay: .28s; }
    .call-wave-bar:nth-child(8) { height: 8px; animation-delay: .04s; }
    .call-wave-bar:nth-child(9) { height: 20px; animation-delay: .32s; }
    .call-wave-bar:nth-child(10) { height: 12px; animation-delay: .18s; }
    .call-wave-bar:nth-child(11) { height: 24px; animation-delay: .1s; }
    .call-wave-bar:nth-child(12) { height: 16px; animation-delay: .26s; }
    @keyframes callWave { 0%, 100% { transform: scaleY(.25); opacity: .35; } 50% { transform: scaleY(1); opacity: 1; } }

    .call-transcript { width: 100%; flex: 1; display: flex; flex-direction: column; gap: 5px; overflow: hidden; }
    .call-transcript-label { font-family: var(--mono); font-size: .52rem; color: rgba(255, 255, 255, 0.25); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 4px; }
    .transcript-line { font-size: .68rem; line-height: 1.45; padding: 5px 9px; border-radius: 7px; opacity: 0; transform: translateY(8px); animation: lineIn .5s ease forwards; }
    .transcript-ai { background: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.7); border-left: 2px solid var(--accent); }
    .transcript-caller { background: transparent; color: rgba(255, 255, 255, 0.4); font-style: italic; }
    .transcript-line:nth-child(2) { animation-delay: .6s; }
    .transcript-line:nth-child(3) { animation-delay: 1.4s; }
    .transcript-line:nth-child(4) { animation-delay: 2.2s; }
    .transcript-line:nth-child(5) { animation-delay: 3s; }
    .transcript-line:nth-child(6) { animation-delay: 3.8s; }
    @keyframes lineIn { to { opacity: 1; transform: translateY(0); } }

    .call-actions { display: flex; gap: 14px; margin-top: auto; padding-top: 10px; }
    .call-btn { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
    .call-btn svg { width: 16px; height: 16px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .call-btn-mute { background: rgba(255, 255, 255, 0.08); }
    .call-btn-end { background: #EF4444; }
    .call-btn-speaker { background: rgba(255, 255, 255, 0.08); }

    /* ============================================
       FEATURES
       ============================================ */

    .features { background: var(--bg); }
    .feat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

    .feat {
      padding: 32px 28px; border-radius: var(--radius);
      border: 1px solid var(--border-light); background: #fff;
      transition: all .4s; position: relative; overflow: hidden;
    }
    .feat:hover { box-shadow: 0 12px 40px rgba(0, 0, 0, 0.05); transform: translateY(-2px); }

    .feat-ico {
      width: 44px; height: 44px; border-radius: 10px;
      display: flex; align-items: center; justify-content: center;
      margin-bottom: 18px;
    }
    .feat-ico svg { width: 22px; height: 22px; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

    .feat:nth-child(1) .feat-ico { background: var(--accent-soft); }
    .feat:nth-child(1) .feat-ico svg { stroke: var(--accent); }
    .feat:nth-child(2) .feat-ico { background: var(--green-soft); }
    .feat:nth-child(2) .feat-ico svg { stroke: var(--green); }
    .feat:nth-child(3) .feat-ico { background: rgba(99, 102, 241, 0.08); }
    .feat:nth-child(3) .feat-ico svg { stroke: #6366F1; }
    .feat:nth-child(4) .feat-ico { background: rgba(234, 179, 8, 0.08); }
    .feat:nth-child(4) .feat-ico svg { stroke: #B8860B; }
    .feat:nth-child(5) .feat-ico { background: rgba(14, 165, 233, 0.08); }
    .feat:nth-child(5) .feat-ico svg { stroke: #0EA5E9; }
    .feat:nth-child(6) .feat-ico { background: rgba(107, 114, 128, 0.08); }
    .feat:nth-child(6) .feat-ico svg { stroke: #6B7280; }

    .feat h3 { font-size: 1rem; font-weight: 700; margin-bottom: 6px; }
    .feat p { font-size: .86rem; color: var(--ink-2); line-height: 1.7; }


    /* ============================================
       COMPARISON TABLE
       ============================================ */

    .compare { background: var(--bg-warm); }
    .compare-table {
      max-width: 720px;
      margin: 0 auto;
      border-radius: var(--radius); overflow: hidden;
      border: 1px solid var(--border-light); background: #fff;
    }
    .c-row { display: grid; grid-template-columns: 1.6fr 1fr 1fr; border-bottom: 1px solid var(--border-light); }
    .c-row:last-child { border-bottom: none; }
    .c-head { background: var(--bg-dark); color: #fff; }
    .c-head .c-cell { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
    .c-cell { padding: 14px 20px; font-size: .88rem; }
    .c-dim { color: var(--ink-3); }
    .c-win { color: var(--green); font-weight: 600; }

    /* ============================================
       INDUSTRIES
       ============================================ */

    .industries { background: var(--bg); overflow-x: hidden; }
    .ind-grid { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
    .ind-chip {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 10px 22px; border-radius: 100px;
      border: 1px solid var(--border); background: #fff;
      font-size: .88rem; font-weight: 500;
      color: var(--ink-2); transition: all .3s; cursor: pointer;
      text-decoration: none;
    }
    .ind-chip:hover { border-color: var(--accent); color: var(--ink); box-shadow: 0 4px 16px rgba(232, 85, 61, 0.08); }
    .ind-ico {
      width: 16px; height: 16px; stroke: var(--ink-3);
      fill: none; stroke-width: 1.5;
      stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0;
    }
    .ind-chip:hover .ind-ico { stroke: var(--accent); }

    /* ============================================
       PRICING
       ============================================ */

    .pricing { background: var(--bg-warm); }
    .price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 880px; margin: 0 auto; }

    .price-card {
      background: #fff; border: 1px solid var(--border-light);
      border-radius: var(--radius); padding: 36px 28px;
      text-align: center; transition: all .4s; position: relative;
    }
    .price-card:hover { box-shadow: 0 16px 48px rgba(0, 0, 0, 0.06); transform: translateY(-3px); }
    .price-card.pop { border: 2px solid var(--accent); box-shadow: 0 12px 40px rgba(232, 85, 61, 0.08); }

    .price-pop-tag {
      position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
      background: var(--accent); color: #fff;
      font-size: .68rem; font-weight: 700; text-transform: uppercase;
      letter-spacing: .1em; padding: 5px 16px; border-radius: 100px;
    }
    .price-name { font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); margin-bottom: 8px; }
    .price-amt { font-size: 2.6rem; font-weight: 800; color: var(--ink); margin-bottom: 4px; letter-spacing: -0.03em; }
    .price-amt span { font-family: var(--sans); font-size: .88rem; color: var(--ink-3); font-weight: 400; }
    .price-vat-mark { font-size: .6rem; color: var(--ink-3); font-weight: 400; vertical-align: baseline; margin-left: 2px; }
    .price-desc { font-size: .82rem; color: var(--ink-3); margin-bottom: 24px; }
    .price-vat-note { max-width: 880px; margin: 48px auto 0; font-size: .8rem; color: var(--ink-3); text-align: left; }

    .price-list { list-style: none; text-align: left; margin-bottom: 28px; display: flex; flex-direction: column; gap: 10px; }
    .price-list li { font-size: .86rem; color: var(--ink-2); padding-left: 20px; position: relative; }
    .price-list li::before { content: ''; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--green); }
    .price-card.pop .price-list li::before { background: var(--green); border-color: var(--green); }

    .btn-card {
      display: block; padding: 14px; border-radius: 100px;
      font-weight: 700; font-size: .88rem; text-align: center;
      transition: all .3s; border: 1.5px solid var(--border);
    }
    .btn-card:hover { border-color: var(--ink); background: var(--ink); color: var(--bg); }
    .price-card.pop .btn-card { background: var(--accent); color: #fff; border-color: var(--accent); }
    .price-card.pop .btn-card:hover { background: var(--accent-hover); transform: translateY(-1px); }

    /* ============================================
       FAQ ACCORDION
       ============================================ */

    .faq-sec { background: var(--bg); }
    .faq-list { max-width: 720px; }
    .faq-item { border-bottom: 1px solid var(--border-light); }
    .faq-q {
      width: 100%; background: none; border: none;
      padding: 24px 48px 24px 0; text-align: left;
      font-family: var(--sans); font-size: 1rem; font-weight: 600;
      color: var(--ink); cursor: pointer;
      position: relative; transition: color 0.3s;
    }
    .faq-q:hover { color: var(--accent); }
    .faq-q::after {
      content: '+'; position: absolute; right: 0; top: 50%;
      transform: translateY(-50%); font-size: 1.4rem;
      font-weight: 300; color: var(--ink-3);
      transition: transform 0.3s, color 0.3s;
    }
    .faq-item.open .faq-q::after { content: '-'; color: var(--accent); }
    .faq-a { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
    .faq-item.open .faq-a { max-height: 300px; }
    .faq-a-inner { padding: 0 0 24px; font-size: .9rem; color: var(--ink-2); line-height: 1.75; }

    /* ============================================
       CTA
       ============================================ */

    .cta {
      padding: 120px 0; text-align: center;
      background: var(--bg-dark); color: #fff;
      position: relative; overflow: hidden;
    }
    .cta::before { display: none; }
    .cta h2 {
      font-size: clamp(2.2rem, 4vw, 3rem); font-weight: 800;
      letter-spacing: -0.03em; margin-bottom: 16px; position: relative;
    }
    .cta h2 em { font-style: normal; color: var(--accent); }
    .cta p {
      font-size: 1.05rem; color: rgba(255, 255, 255, 0.5);
      max-width: 420px; margin: 0 auto 36px;
    }
    .cta-btns { display: flex; gap: 14px; justify-content: center; position: relative; flex-wrap: wrap; }

    .btn-cta-primary {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 16px 36px; background: var(--accent); color: #fff;
      border-radius: 100px; font-weight: 700; font-size: .95rem;
      transition: all .35s; border: none; cursor: pointer;
      font-family: var(--sans);
    }
    .btn-cta-primary:hover {
      background: var(--accent-hover); transform: translateY(-2px);
      box-shadow: 0 8px 30px rgba(232, 85, 61, 0.3);
    }
    .btn-cta-ghost {
      display: inline-flex; padding: 16px 36px;
      border: 1.5px solid rgba(255, 255, 255, 0.15);
      color: rgba(255, 255, 255, 0.7); border-radius: 100px;
      font-weight: 700; font-size: .95rem; transition: all .3s;
    }
    .btn-cta-ghost:hover { border-color: rgba(255, 255, 255, 0.4); color: #fff; }

    /* CTA character area */
    .cta-char-area { display: flex; justify-content: center; margin-bottom: 32px; }

    /* ============================================
       CONTACT FORM
       ============================================ */

    .contact-form { max-width: 520px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
    .contact-form input,
    .contact-form textarea {
      width: 100%; padding: 14px 20px; border-radius: 12px;
      background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.1);
      color: #fff; font-size: 0.92rem; font-family: var(--sans);
      outline: none; transition: border-color 0.3s;
    }
    .contact-form input::placeholder,
    .contact-form textarea::placeholder { color: rgba(255, 255, 255, 0.3); }
    .contact-form input:focus,
    .contact-form textarea:focus { border-color: var(--accent); }
    .contact-form textarea { resize: none; }
    .contact-form button {
      width: 100%; padding: 16px; background: var(--accent); color: #fff;
      border: none; border-radius: 100px; font-weight: 700; font-size: 0.95rem;
      cursor: pointer; transition: all 0.35s; font-family: var(--sans); margin-top: 8px;
    }
    .contact-form button:hover {
      background: var(--accent-hover); transform: translateY(-2px);
      box-shadow: 0 8px 30px rgba(232, 85, 61, 0.3);
    }
    .contact-mailto { color: rgba(255, 255, 255, 0.3); font-size: 0.78rem; text-align: center; margin-top: 20px; }
    .contact-mailto a { color: var(--accent); text-decoration: none; }
    .contact-mailto a:hover { text-decoration: underline; }

    /* ============================================
       FOOTER
       ============================================ */

    .footer {
      padding: 40px 0;
      border-top: 1px solid rgba(255, 255, 255, 0.06);
      background: var(--bg-dark);
    }
    .footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
    .footer-nav { display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
    .footer-logo { font-weight: 900; font-size: 1.1rem; color: #fff; letter-spacing: -0.02em; }
    .footer-links { display: flex; gap: 28px; list-style: none; }
    .footer-links a { font-size: .82rem; color: rgba(255, 255, 255, 0.35); transition: color .3s; }
    .footer-links a:hover { color: rgba(255, 255, 255, 0.7); }
    .footer-links--product { gap: 20px; }
    .footer-copy { font-size: .78rem; color: rgba(255, 255, 255, 0.2); }

    /* ============================================
       SCROLL REVEALS
       ============================================ */

    .rv { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
    .rv.vis { opacity: 1; transform: translateY(0); }

    /* ============================================
       RESPONSIVE
       ============================================ */

    /* Nav collapse threshold — raised from 600px with the Astro rebuild.

       Measured, not guessed (tools/nav-overflow-probe.mjs): the horizontal
       bar was already broken from 620px to 860px on the shipped site — two
       links wrapped onto two lines the whole way, and below 700px the list
       ran up to 88px past the content box. The bar was simply being used at
       widths it never fit in. Adding the language switcher widened that band
       to 940px, so the switcher is not the cause but it is the reason this
       could no longer be left alone.

       1080px is the narrowest probed width at which the full bar fits in
       BOTH languages with the switcher and still keeps a gap to the
       wordmark. (1060 fit until the Greek page started loading Manrope,
       which is fractionally wider than the OS fallback it replaced — the
       probe caught that regression.) Greek needs ~100px more than English (Πώς λειτουργεί,
       Λίστα αναμονής), and one shared threshold is deliberate: with two
       thresholds, switching language at 1000px would reflow the header
       under the visitor. English could collapse 100px later, which costs
       nothing — the hamburger is a working nav, the overlapping bar was
       not. Everything else in the 600px block is untouched. */
    @media (max-width: 1199px) {
      .nav-links {
        display: none; position: absolute; top: 100%; left: 0; right: 0;
        background: var(--bg); border-bottom: 1px solid var(--border);
        flex-direction: column; padding: 20px 28px; gap: 16px;
      }
      .nav-links.open { display: flex; }
      .nav-toggle { display: flex; }
    }

    @media (max-width: 900px) {
      .hero-container { padding: 32px 28px 36px; }
      .hero-calc-layout { grid-template-columns: 1fr; gap: 24px; }
      .hero-chars { gap: 24px; margin-bottom: -150px; }
      .mascot-card { width: 220px; }
      .mascot-card-img { height: 240px; }
      .problem-header { grid-template-columns: 1fr; }
      .problem-header .char-placeholder { display: none; }
      .problem-grid, .feat-grid { grid-template-columns: 1fr 1fr; }
      .cf-inner { grid-template-columns: 1fr; }
      .cf-right { display: none; }
      .how-track { grid-template-columns: 1fr; gap: 28px; }
      .how-track::before { display: none; }
    }

    @media (max-width: 600px) {
      .hero { padding: 100px 0 180px; }
      .hero-container { padding: 28px 20px 28px; border-radius: 18px; }
      .sec { padding: 72px 0; }
      .problem-grid, .feat-grid, .price-grid { grid-template-columns: 1fr; }
      .price-grid { max-width: 360px; }
      .proof-stats { gap: 32px; }
      .calc-card { padding: 24px 18px; }
      .hero-chars { gap: 16px; flex-direction: row; margin-bottom: -120px; }
      .mascot-card { width: 150px; }
      .mascot-card-img { height: 170px; }
      .mascot-card-label { font-size: .72rem; padding: 10px 10px; }
      .footer-inner { flex-direction: column; gap: 16px; text-align: center; }
      .footer-nav { align-items: center; }
      .footer-links { flex-wrap: wrap; justify-content: center; gap: 16px; }
      .cta-char-area { display: none; }
    }
    /* 01.09.: eleven rules for the demo-agent dock stood here. They went with
       the dock — no element carries those ids any more.

       🔴 The `vf-` prefix further down is NOT the same thing and must survive:
       the @keyframes named vf-marquee, vf-marquee-rev, vf-orbit,
       vf-orbit-reverse, vf-scroll-up and vf-hub-ping drive the language band,
       the two industry marquees and the feature ring, all live. Deleting by
       prefix would have taken them too. */

    /* ============================================
       DEMO REQUEST STATUS  (added with the Astro rebuild)

       Appended, never interleaved: every rule above this line is byte-for
       byte the stylesheet that ships today, which is what makes the pixel
       comparison meaningful. The element is `hidden` until the request to
       /api/demo-requests has actually resolved, so it contributes no
       layout — and therefore no pixel — on load.
       ============================================ */

    .contact-status {
      margin: 0;
      font-size: 0.86rem;
      line-height: 1.5;
      text-align: center;
    }
    .contact-status[hidden] { display: none; }
    .contact-status--pending { color: rgba(255, 255, 255, 0.55); }
    .contact-status--ok { color: #6BCB77; }
    /* Failure has to be unmissable on the dark CTA panel — it is the one
       message the visitor must not scroll past. */
    .contact-status--error { color: #FF8A73; font-weight: 600; }
    .contact-form button[disabled] { opacity: 0.6; cursor: default; }

    /* ============================================
       GREEK TYPOGRAPHY  (added with the Astro rebuild)

       Sora and DM Mono ship latin + latin-ext only — no Greek glyphs at
       all. Appended (not substituted) so CSS falls back per glyph: Greek
       words render in Manrope/Roboto Mono, while CITT, AI, GDPR, € and
       every numeral stay in Sora/DM Mono. Scoped to html[lang="el"]
       because the English route never loads these families.
       ============================================ */

    html[lang="el"] {
      --sans: 'Sora', 'Manrope', -apple-system, system-ui, sans-serif;
      --mono: 'DM Mono', 'Roboto Mono', monospace;
    }

    /* ============================================
       #571 — LANGUAGE BAND (ported from domakihub)
       ============================================ */

    .langband { margin-top: 34px; }
    .langband-caption {
      text-align: center; font-size: .82rem; font-weight: 500;
      color: var(--ink-3); margin: 0 0 14px;
    }
    /* Faded at both ends so the loop has no visible seam. */
    .langband-track {
      position: relative; overflow: hidden;
      -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
      mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
    }
    .langband-row {
      display: flex; align-items: center; width: max-content;
      list-style: none; margin: 0; padding: 0;
      animation: vf-marquee 40s linear infinite;
    }
    /* Trailing space is per-item margin, NOT flex gap: with gap the last item
       has none, and the -50% wrap visibly jumps every cycle. */
    .langband-row li { margin-right: 20px; flex-shrink: 0; }
    .langband-row img {
      height: 24px; width: auto; display: block;
      border-radius: 3px; box-shadow: 0 2px 8px rgba(0,0,0,.10);
    }

    .proof-note {
      max-width: 640px; margin: 22px auto 0; text-align: center;
      font-size: .72rem; line-height: 1.6; color: var(--ink-3);
    }

    @keyframes vf-marquee {
      from { transform: translateX(0); }
      to   { transform: translateX(-50%); }
    }
    @keyframes vf-marquee-rev {
      from { transform: translateX(-50%); }
      to   { transform: translateX(0); }
    }
    @keyframes vf-orbit         { to { transform: rotate(360deg); } }
    @keyframes vf-orbit-reverse { to { transform: rotate(-360deg); } }
    @keyframes vf-scroll-up {
      from { transform: translateY(0); }
      to   { transform: translateY(-50%); }
    }
    @keyframes vf-hub-ping {
      0%   { transform: scale(.7); opacity: .5; }
      100% { transform: scale(2.3); opacity: 0; }
    }

    /* ============================================
       #571 — REASSURANCE ("nothing changes for your customers")
       ============================================ */

    .reassure {
      margin-top: 20px; padding: 26px 30px; border-radius: 16px;
      border: 1px solid var(--border); background: #fff;
      border-left: 3px solid var(--green, #2f9e44);
    }
    .reassure h3 { font-size: 1.05rem; font-weight: 700; margin: 0 0 8px; }
    .reassure p { font-size: .9rem; color: var(--ink-2); line-height: 1.7; margin: 0; }
    .reassure-note { margin-top: 8px !important; font-weight: 600; color: var(--ink) !important; }

    /* ============================================
       #571 — INDUSTRIES: two-row marquee
       ============================================ */

    .ind-marquee {
      margin-top: 34px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      width: 100vw;
      margin-left: calc(50% - 50vw);
      margin-right: calc(50% - 50vw);
    }
    .ind-track {
      position: relative; overflow: hidden;
      -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
      mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
    }
    .ind-row {
      display: flex; width: max-content; list-style: none; margin: 0; padding: 4px 0;
    }
    .ind-row-l { animation: vf-marquee 52s linear infinite; }
    .ind-row-r { animation: vf-marquee-rev 60s linear infinite; }
    .ind-track:hover .ind-row { animation-play-state: paused; }
    .ind-marquee .ind-chip { margin-right: 12px; flex-shrink: 0; }

    /* ============================================
       #571 — CAPABILITY RING (ported from domakihub ServicesWheelCSS)
       ============================================ */

    .cap-layout {
      display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 40px; align-items: center; margin-top: 12px;
    }

    .cap-ring-box { display: grid; place-items: center; }
    /* Square + container-type:size is what makes cqmin mean "a share of the
       wheel". Every size below is relative to it, so the whole thing scales as
       ONE object instead of needing a px value per breakpoint. */
    .cap-ring {
      position: relative; width: 100%; max-width: 460px; aspect-ratio: 1;
      container-type: size;
      --cap-tile: 13cqmin;
      --cap-icon: 6.4cqmin;
    }
    .cap-ring-guide { position: absolute; border-radius: 50%; }
    .cap-ring-guide-1 { inset: 10%; border: 1px dashed rgba(232, 85, 61, .18); }
    .cap-ring-guide-2 { inset: 2%;  border: 1px solid rgba(0, 0, 0, .05); }

    .cap-orbit { position: absolute; inset: 0; animation: vf-orbit linear infinite; }
    .cap-chip-anchor { position: absolute; transform: translate(-50%, -50%); }
    /* Counter-rotation at the SAME duration is what keeps the label upright. */
    .cap-chip {
      display: flex; flex-direction: column; align-items: center;
      width: 24cqmin; gap: 1.6cqmin;
      animation: vf-orbit-reverse linear infinite;
      text-decoration: none; color: inherit;
    }
    .cap-chip-tile {
      display: grid; place-items: center;
      width: var(--cap-tile); height: var(--cap-tile); border-radius: 3.2cqmin;
      background: #fff; border: 1px solid var(--border);
      box-shadow: 0 6px 20px rgba(0,0,0,.06);
    }
    .cap-chip-tile svg {
      width: var(--cap-icon); height: var(--cap-icon);
      stroke: var(--accent); fill: none; stroke-width: 1.7;
      stroke-linecap: round; stroke-linejoin: round;
    }
    .cap-chip span {
      text-align: center; font-size: 3.1cqmin; font-weight: 600;
      line-height: 1.2; color: var(--ink-2);
    }

    .cap-hub {
      position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
      width: 29.16cqmin; height: 29.16cqmin; border-radius: 50%;
      display: flex; flex-direction: column; align-items: center;
      justify-content: center; gap: 0.2cqmin; padding-top: 1.2cqmin;
      background: var(--accent); color: #fff;
      box-shadow: 0 12px 40px rgba(232, 85, 61, .28);
    }
    .cap-hub-ping {
      position: absolute; inset: 0; border-radius: 50%;
      border: 2px solid var(--accent);
      animation: vf-hub-ping 2s ease-out infinite;
    }
    .cap-hub-ico {
      width: 8cqmin; height: 8cqmin; flex-shrink: 0;
      stroke: #fff; fill: none; stroke-width: 1.8;
      stroke-linecap: round; stroke-linejoin: round;
    }
    .cap-hub-label {
      font-size: 3.6cqmin; font-weight: 700; letter-spacing: -.01em;
      line-height: 1.1; text-align: center; padding: 0 2cqmin;
    }

    /* RIGHT: the card column, looping downwards */
    .cap-cards-mask {
      position: relative; overflow: hidden; height: 460px;
      -webkit-mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
      mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
    }
    .cap-cards {
      display: flex; flex-direction: column;
      animation: vf-scroll-up 60s linear infinite;
    }
    /* Trailing space as margin, for the same reason as the marquee rows. */
    .cap-card {
      margin-bottom: 12px; flex-shrink: 0;
      padding: 20px 22px; border-radius: 14px;
      border: 1px solid var(--border); background: #fff;
    }
    .cap-card h3 { font-size: .98rem; font-weight: 700; margin: 0 0 6px; }
    .cap-card h3 a { color: inherit; text-underline-offset: 3px; }
    .cap-card p { font-size: .84rem; color: var(--ink-2); line-height: 1.65; margin: 0; }
    /* Reading beats motion: hovering the column stops it. */
    .cap-cards-mask:hover .cap-cards { animation-play-state: paused; }

    /* ============================================
       #571 — PRICING: pay as you go
       ============================================ */

    .pay-panel {
      max-width: 720px; margin: 0 auto; text-align: left;
      padding: 34px 36px; border-radius: 20px;
      border: 1px solid var(--border); background: #fff;
      box-shadow: 0 16px 48px rgba(0,0,0,.05);
    }
    .pay-slogan {
      margin: 0 0 22px; text-align: center;
      font-size: 1rem; font-weight: 700; color: var(--accent);
    }
    .pay-table { margin: 0; }
    .pay-row {
      display: grid; grid-template-columns: 1fr auto;
      gap: 4px 18px; align-items: baseline;
      padding: 14px 0; border-top: 1px solid var(--border);
    }
    .pay-row:first-child { border-top: 0; padding-top: 0; }
    .pay-row dt { font-size: .95rem; font-weight: 600; color: var(--ink); }
    .pay-row dd { margin: 0; }
    .pay-v { font-size: 1.15rem; font-weight: 800; color: var(--ink); white-space: nowrap; }
    .pay-note { grid-column: 1 / -1; font-size: .8rem; color: var(--ink-3); line-height: 1.6; }

    .pay-incl { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); }
    .pay-incl-head { font-size: .82rem; font-weight: 700; text-transform: uppercase;
                     letter-spacing: .06em; color: var(--ink-3); margin-bottom: 12px; }
    .pay-incl ul { list-style: none; margin: 0; padding: 0;
                   display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; }
    .pay-incl li { position: relative; padding-left: 22px; font-size: .86rem; color: var(--ink-2); }
    .pay-incl li::before {
      content: ''; position: absolute; left: 0; top: .45em;
      width: 10px; height: 10px; border-radius: 50%;
      background: var(--green, #2f9e44);
    }

    .pay-cta { display: block; margin-top: 26px; text-align: center; }
    /* With the prices, not under them: EUR 99 net is EUR 122.76 on the invoice. */
    .pay-vat {
      margin: 16px 0 0; font-size: .76rem; line-height: 1.6;
      color: var(--ink-3); text-align: center;
    }
    .pay-fine {
      max-width: 720px; margin: 20px auto 0; padding: 0 0 0 18px;
      text-align: left; font-size: .74rem; line-height: 1.7; color: var(--ink-3);
    }
    .pay-fine li { margin-bottom: 4px; }

    /* ============================================
       #571 — RESPONSIVE + MOTION
       ============================================ */

    @media (max-width: 900px) {
      /* Ring above, cards below. A vertically looping column next to nothing
         is not a layout. */
      .cap-layout { grid-template-columns: 1fr; gap: 28px; }
      .cap-ring { max-width: 380px; }
      .cap-cards-mask { height: 400px; }
      .pay-incl ul { grid-template-columns: 1fr; }
    }

    @media (max-width: 600px) {
      /* #571 — the gap the owner flagged. 180px of hero bottom padding met
         120px of proof top padding on a screen 390px wide: half a screen of
         nothing between the calculator and the first number. */
      .hero { padding: 100px 0 110px; }
      .proof { padding: 56px 0 28px; }
      .hero-chars { margin-bottom: -90px; }
      .pay-panel { padding: 26px 20px; }
      .pay-row { grid-template-columns: 1fr; }
      .pay-v { font-size: 1.05rem; }
      .cap-ring { max-width: 320px; }
      .cap-cards-mask { height: 360px; }
      .reassure { padding: 22px 20px; }
    }

    /* Decoration stops; nothing disappears. A ring standing still is still a
       diagram, and a marquee standing still is still a list. */
    @media (prefers-reduced-motion: reduce) {
      .langband-row,
      .ind-row-l, .ind-row-r,
      .cap-orbit, .cap-chip, .cap-hub-ping,
      .cap-cards {
        animation: none;
      }
      .cap-cards-mask { height: auto; overflow: visible; -webkit-mask-image: none; mask-image: none; }
    }

    /* ============================================
       CONTENT ESTATE — the industry / use-case / location pages.
       One stylesheet for 6 300 pages: nothing here is per-page, and
       nothing per-page may be added. A page that needs its own CSS is a
       page that has stopped being comparable to the other 6 299.
       ============================================ */

    .doc { padding: 120px 0 80px; background: var(--bg); }
    .doc-wrap { max-width: 760px; }

    .doc-crumbs { font-size: .78rem; color: var(--ink-3); margin-bottom: 22px; }
    .doc-crumbs a { color: var(--ink-3); text-decoration: none; }
    .doc-crumbs a:hover { color: var(--accent); }

    .doc h1 {
      font-size: clamp(1.9rem, 4vw, 2.7rem); font-weight: 800;
      letter-spacing: -.03em; line-height: 1.12; margin: 0 0 34px;
    }
    .doc-hero { margin: -8px 0 34px; }
    .doc-hero img {
      width: 100%; height: auto; display: block;
      border-radius: 16px; background: var(--bg-warm);
    }
    .doc h2 {
      font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em;
      margin: 44px 0 14px;
    }
    .doc-body h2:first-child { margin-top: 0; }
    .doc-body h3 { font-size: 1.05rem; font-weight: 700; margin: 26px 0 8px; }
    .doc p, .doc li { font-size: .96rem; line-height: 1.75; color: var(--ink-2); }
    .doc-body p { margin: 0 0 16px; }
    .doc-body ol, .doc-body ul { margin: 0 0 18px; padding-left: 22px; }
    .doc-body li { margin-bottom: 8px; }
    .doc strong { color: var(--ink); font-weight: 700; }

    /* Blocks 1–3: the part a language model quotes. Boxed so they read as
       a unit rather than as three more paragraphs. */
    .doc-summary, .doc-takeaways {
      padding: 24px 26px; border-radius: 16px;
      border: 1px solid var(--border); background: #fff; margin-bottom: 22px;
    }
    .doc-summary h2, .doc-takeaways h2 {
      margin: 0 0 12px; font-size: .82rem; text-transform: uppercase;
      letter-spacing: .08em; color: var(--ink-3);
    }
    .doc-summary ul { margin: 0; padding-left: 20px; }
    .doc-takeaways ol { margin: 0; padding-left: 22px; }
    .doc-summary li, .doc-takeaways li { margin-bottom: 8px; }
    .doc-tldr {
      padding: 20px 24px; border-left: 3px solid var(--accent);
      background: var(--bg-warm); border-radius: 0 12px 12px 0; margin-bottom: 26px;
    }
    .doc-tldr h2 { margin: 0 0 8px; font-size: .82rem; text-transform: uppercase;
                   letter-spacing: .08em; color: var(--accent); }
    .doc-tldr p { margin: 0; }

    /* 7 · comparison table */
    .doc-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .doc-compare table { width: 100%; border-collapse: collapse; font-size: .88rem; min-width: 520px; }
    .doc-compare th, .doc-compare td {
      text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--border);
      vertical-align: top;
    }
    .doc-compare thead th { font-size: .74rem; text-transform: uppercase;
                            letter-spacing: .06em; color: var(--ink-3); }
    .doc-compare tbody th { font-weight: 600; color: var(--ink); }
    .doc-compare td { color: var(--ink-2); }
    .doc-win { color: var(--green, #2f9e44); font-weight: 600; }

    /* 10 · worked example — assumptions ABOVE the result, visually as well
       as structurally. A result that arrives before its inputs is read as
       a fact rather than as arithmetic. */
    .doc-example {
      padding: 24px 26px; border-radius: 16px;
      border: 1px solid var(--border); background: #fff;
    }
    .doc-example h2 { margin-top: 0; }
    .doc-example-lead { font-size: .84rem !important; color: var(--ink-3) !important; margin-bottom: 10px; }
    .doc-assumptions { margin: 0 0 16px; padding-left: 20px; }
    .doc-assumptions li { font-size: .86rem; color: var(--ink-3); }
    .doc-steps { margin: 0 0 14px; padding-left: 22px; }
    .doc-result { margin: 0; font-size: 1.05rem !important; color: var(--ink) !important; }

    .doc-sources ul { padding-left: 20px; }
    .doc-sources li { font-size: .84rem; margin-bottom: 6px; }
    .doc-sources a { color: var(--accent); }

    .doc-pricing p a { color: var(--accent); }

    /* 12 · FAQ — <details>, so it works with JavaScript disabled and a
       crawler still reads every answer. */
    .doc-faq-item { border-bottom: 1px solid var(--border); padding: 14px 0; }
    .doc-faq-item summary {
      cursor: pointer; font-weight: 600; color: var(--ink);
      font-size: .95rem; list-style: none;
    }
    .doc-faq-item summary::-webkit-details-marker { display: none; }
    .doc-faq-item summary::after { content: '+'; float: right; color: var(--ink-3); }
    .doc-faq-item[open] summary::after { content: '\2013'; }
    .doc-faq-item p { margin: 10px 0 0; }

    .doc-cta {
      margin-top: 48px; padding: 30px; border-radius: 18px;
      background: var(--ink); text-align: center;
    }
    .doc-cta h2 { margin-top: 0; color: #fff; }
    .doc-cta p { color: rgba(255,255,255,.72); margin-bottom: 18px; }

    .doc-related ul { list-style: none; padding: 0; margin: 0;
                      display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .doc-related a {
      display: block; padding: 14px 16px; border-radius: 12px;
      border: 1px solid var(--border); background: #fff;
      color: var(--ink); text-decoration: none; font-size: .88rem; font-weight: 600;
    }
    .doc-related a:hover { border-color: var(--accent); color: var(--accent); }

    @media (max-width: 600px) {
      .doc { padding: 96px 0 60px; }
      .doc-summary, .doc-takeaways, .doc-example { padding: 20px 18px; }
      .doc-related ul { grid-template-columns: 1fr; }
    }