/* ═══════════════════════════════════════════════════
       DESIGN TOKENS
    ════════════════════════════════════════════════════ */
    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

    :root {
      /* Brand — per brand-guidelines.html */
      --teal:       #00D4B4;
      --teal-mid:   #00D4B4;
      --violet:     #7C3AED;
      --navy:       #0A0E27;
      --navy-mid:   #141832;

      /* Light theme surface */
      --bg:         #FFFFFF;
      --bg-soft:    #F8F9FA;
      --bg-mid:     #F1F3F5;

      /* Text — per brand-guidelines.html */
      --ink:        #1A1A2E;
      --ink-mid:    #374151;
      --ink-muted:  #6B7280;
      --ink-faint:  #ADB5BD;

      /* Borders */
      --border:     rgba(15,23,42,0.08);
      --border-mid: rgba(15,23,42,0.13);

      /* AI dark section */
      --dark-bg:    #0A0E27;
      --dark-bg2:   #141832;
      --dark-text:  #EFF6FF;
      --dark-muted: rgba(239,246,255,0.6);
      --dark-border:rgba(239,246,255,0.1);
      --dark-glass: rgba(255,255,255,0.04);

      /* Glows */
      --teal-glow:   rgba(0,212,180,0.18);
      --violet-glow: rgba(124,58,237,0.16);
      /* blue-glow removed — not a brand color */

      /* Radii */
      --r-sm: 8px;
      --r-md: 14px;
      --r-lg: 20px;
      --r-xl: 28px;

      /* Fonts */
      --font-he: 'Heebo', system-ui, sans-serif;
      --font-en: 'Space Grotesk', system-ui, sans-serif;
    }

    html { scroll-behavior: smooth; }

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

    img { display: block; max-width: 100%; }
    a   { text-decoration: none; color: inherit; }

    .sr-only {
      position: absolute; width: 1px; height: 1px;
      padding: 0; margin: -1px; overflow: hidden;
      clip: rect(0,0,0,0); white-space: nowrap; border: 0;
    }

    /* ── Shared eyebrow label ── */
    .eyebrow {
      display: inline-block;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--teal-mid);
      margin-bottom: 16px;
    }
    .eyebrow--light { color: var(--teal); }

    /* ═══════════════════════════════════════════════════
       LOGO MARK  — brand-guidelines 2×2 grid
       Colour version: teal + violet (for use on light bg)
    ════════════════════════════════════════════════════ */
    .kyd-mark {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr;
      gap: 3px;
      width: 38px;
      height: 38px;
      flex-shrink: 0;
    }

    .kyd-sq { border-radius: 3px; }
    .kyd-sq--teal       { background: #00D4B4; }
    .kyd-sq--teal-fade  { background: #00D4B4; opacity: 0.5; height: 65%; align-self: start; }
    .kyd-sq--teal-dim   { background: #00D4B4; opacity: 0.35; }
    .kyd-sq--violet     { background: #7C3AED; }

    /* ═══════════════════════════════════════════════════
       NAV
    ════════════════════════════════════════════════════ */
    .site-nav {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 200;
      height: 66px;
      background: rgba(255,255,255,0.88);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-bottom: 1px solid var(--border);
      transition: background 0.3s, box-shadow 0.3s;
      padding: 0 6vw;
    }
    .site-nav.scrolled {
      background: rgba(255,255,255,0.97);
      box-shadow: 0 1px 12px rgba(0,0,0,0.07);
    }
    .nav__inner {
      display: flex;
      align-items: center;
      height: 100%;
      max-width: 1320px;
      margin: 0 auto;
      gap: 20px;
    }

    /* Logo */
    .nav__logo {
      display: flex;
      align-items: center;
      gap: 11px;
      flex-shrink: 0;
      margin-inline-end: auto;  /* pushes links + right cluster to the opposite edge */
    }
    .nav__logo-svg { display: block; }
    .nav__logo-text {
      font-family: var(--font-en);
      font-weight: 700;
      font-size: 13px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--ink);
      white-space: nowrap;
    }
    .nav__logo-text span { color: var(--ink); }

    /* Nav links */
    .nav__links {
      display: flex;
      align-items: center;
      gap: 4px;
      list-style: none;
    }
    .nav__links a {
      font-size: 14px;
      font-weight: 500;
      color: var(--ink-muted);
      padding: 6px 14px;
      border-radius: var(--r-sm);
      transition: color 0.15s, background 0.15s;
    }
    .nav__links a:hover, .nav__links a.active {
      color: var(--ink);
      background: var(--bg-soft);
    }

    /* Right cluster: lang + CTA */
    .nav__right {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    /* Transparent wrapper: the logo's auto-margin spaces the cluster to the
       far edge on every width. (This used to become a dropdown panel on
       mobile, back when the nav had links.) */
    .nav__menu { display: contents; }

    /* Language toggle */
    .lang-toggle {
      display: flex;
      align-items: center;
      background: var(--bg-soft);
      border: 1px solid var(--border-mid);
      border-radius: 100px;
      padding: 3px;
      gap: 2px;
    }
    .lang-toggle__btn {
      font-size: 12px;
      font-weight: 700;
      padding: 4px 10px;
      border-radius: 100px;
      border: none;
      cursor: pointer;
      background: transparent;
      color: var(--ink-muted);
      font-family: var(--font-en);
      transition: background 0.18s, color 0.18s;
    }
    .lang-toggle__btn.active {
      background: var(--bg);
      color: var(--ink);
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }

    /* CTA */
    .nav__cta {
      padding: 8px 22px;
      border-radius: var(--r-sm);
      background: linear-gradient(135deg, var(--teal) 0%, var(--teal-mid) 100%);
      color: #fff !important;
      font-weight: 700 !important;
      font-size: 13.5px !important;
      font-family: var(--font-he);
      transition: filter 0.18s, transform 0.15s, box-shadow 0.18s;
      box-shadow: 0 2px 10px var(--teal-glow);
    }
    .nav__cta:hover {
      filter: brightness(1.08);
      transform: translateY(-1px);
      box-shadow: 0 6px 20px var(--teal-glow);
    }

    /* ═══════════════════════════════════════════════════
       HERO  (light background, transparent canvas)
    ════════════════════════════════════════════════════ */
    .hero {
      min-height: 88vh;
      display: flex;
      align-items: center;
      padding: 96px 6vw 48px;
      position: relative;
      overflow: hidden;
      background: var(--bg);
      direction: ltr;
    }
    /* ── Dot grid texture ── */
    .hero::before {
      content: '';
      position: absolute; inset: 0;
      background-image: radial-gradient(circle, rgba(0,212,180,0.12) 1px, transparent 1px);
      background-size: 32px 32px;
      mask-image: radial-gradient(ellipse 70% 70% at 60% 50%, black 20%, transparent 72%);
      -webkit-mask-image: radial-gradient(ellipse 70% 70% at 60% 50%, black 20%, transparent 72%);
      pointer-events: none;
      opacity: 0.55;
    }
    /* ── Stronger gradient blobs ── */
    .hero::after {
      content: '';
      position: absolute; inset: 0;
      background:
        radial-gradient(ellipse 55% 65% at 70% 45%, rgba(0,212,180,0.13) 0%, transparent 65%),
        radial-gradient(ellipse 40% 50% at 8% 70%, rgba(124,58,237,0.09) 0%, transparent 60%),
        radial-gradient(ellipse 35% 35% at 85% 15%, rgba(124,58,237,0.07) 0%, transparent 55%);
      pointer-events: none;
    }
    /* ── Breathing glow behind canvas ── */
    .hero__visual::before {
      content: '';
      position: absolute;
      width: 110%; height: 110%;
      top: -5%; left: -5%;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(0,212,180,0.14) 0%, rgba(124,58,237,0.06) 45%, transparent 70%);
      animation: heroGlow 4s ease-in-out infinite alternate;
      pointer-events: none;
      z-index: -1;
    }
    @keyframes heroGlow {
      0%   { opacity: 0.5;  transform: scale(0.95); }
      100% { opacity: 1;    transform: scale(1.08); }
    }
    .hero__inner {
      display: flex;
      align-items: center;
      gap: clamp(40px, 6vw, 100px);
      max-width: 1320px;
      margin: 0 auto;
      width: 100%;
      position: relative;
      z-index: 1;            /* above the phone backdrop (.kyd-bg) */
    }
    .hero__text { flex: 1; min-width: 0; }
    .hero__eyebrow {
      color: var(--teal-mid);
      font-size: 12.5px;
      font-weight: 700;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      margin-bottom: 24px;
      font-family: var(--font-en);
    }
    .hero__heading {
      font-family: var(--font-en);
      font-size: clamp(32px, 4.4vw, 64px);
      font-weight: 900;
      line-height: 1.02;
      letter-spacing: -0.03em;
      color: var(--ink);
      margin-bottom: 10px;
    }
    .hero__heading .accent { color: var(--teal-mid); }
    /* Phones only. The same words run as .value-tagline in the value section
       on wider screens — the two copies live in index.html, and each
       breakpoint shows exactly one. */
    .hero__subheading {
      display: none;
      font-family: var(--font-he);
      font-weight: 400;
      line-height: 1.7;
      /* .hero pins itself to LTR so the English display heading lays out
         correctly, which means this paragraph cannot just inherit the document
         direction. It is set per language instead: RTL by default, flipped
         below when the toggle switches <html> to LTR. */
      direction: rtl;
    }
    [dir="ltr"] .hero__subheading { direction: ltr; }
    .hero__actions {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
    }

    /* Buttons */
    .btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      padding: 12px 28px; border-radius: var(--r-sm);
      font-weight: 700; font-size: 14px;
      cursor: pointer; border: 1.5px solid transparent;
      transition: all 0.18s; font-family: var(--font-he);
    }
    .btn--primary {
      background: linear-gradient(135deg, var(--teal) 0%, var(--teal-mid) 100%);
      color: #fff;
      box-shadow: 0 2px 12px var(--teal-glow);
    }
    .btn--primary:hover {
      filter: brightness(1.08);
      box-shadow: 0 6px 22px var(--teal-glow);
      transform: translateY(-2px);
    }
    .btn--outline {
      background: transparent;
      color: var(--ink);
      border-color: var(--border-mid);
    }
    .btn--outline:hover {
      border-color: var(--teal);
      color: var(--teal-mid);
      background: rgba(0,212,180,0.04);
      transform: translateY(-2px);
    }

    /* Canvas */
    .hero__visual {
      flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      position: relative;
    }
    .canvas-wrap {
      width: clamp(340px, 48vw, 640px);
      height: clamp(340px, 48vw, 640px);
    }
    #kyd-canvas {
      display: block;
      width: 100%;
      height: 100%;
    }

    /* ═══════════════════════════════════════════════════
       CLIENTS MARQUEE
    ════════════════════════════════════════════════════ */
    .clients-section {
      padding: 0;
      background: #FFFFFF;
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
      overflow: hidden;
    }
    .clients-label-bar {
      text-align: center;
      padding: 38px 6vw 22px;
      font-size: 11.5px;
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--ink-faint);
    }
    .marquee-outer {
      position: relative;
      overflow: hidden;
      padding: 0 0 40px;
      /* Force LTR inside the marquee so flex layout + translateX behave
         predictably regardless of the page's RTL direction. */
      direction: ltr;
    }
    .marquee-outer::before,
    .marquee-outer::after {
      content: '';
      position: absolute;
      top: 0; bottom: 0;
      width: 140px;
      z-index: 2;
      pointer-events: none;
    }
    .marquee-outer::before {
      left: 0;
      background: linear-gradient(to right, #FFFFFF, rgba(255,255,255,0));
    }
    .marquee-outer::after {
      right: 0;
      background: linear-gradient(to left, #FFFFFF, rgba(255,255,255,0));
    }
    .marquee-track {
      display: flex;
      width: max-content;
      gap: 0;
      direction: ltr;
      /* always running — no fade, no gating, no pause */
      animation: marquee-ltr 60s linear infinite;
      /* No will-change here on purpose: this track is ~10,000px wide, and the
         hint would pin a layer that size in GPU memory permanently — past what
         a phone's texture budget is comfortable with, which is a known way to
         make a marquee hitch. An animated transform is composited anyway. */
      transform: translateX(0);
    }
    @keyframes marquee-ltr {
      from { transform: translateX(0); }
      to   { transform: translateX(-50%); }
    }
    .marquee-item {
      display: flex;
      align-items: center;
      justify-content: center;
      /* fixed slot width so the layout is stable even before the image
         has loaded — no jitter, no "pop" as each logo arrives */
      width: 220px;
      height: 90px;
      flex-shrink: 0;
      flex-grow: 0;
    }
    .marquee-item img {
      height: 56px;
      width: auto;
      max-width: 160px;
      object-fit: contain;
      /* clean, readable greyscale — no washed-out effect */
      filter: grayscale(100%) contrast(1.05);
      opacity: 0.82;
      transition: filter 0.3s ease, opacity 0.3s ease, transform 0.25s ease;
    }
    .marquee-item:hover img {
      filter: grayscale(0%) contrast(1);
      opacity: 1;
      transform: scale(1.06);
    }

    /* ═══════════════════════════════════════════════════
       SHARED SECTION WRAPPER
    ════════════════════════════════════════════════════ */
    .section {
      padding: 96px 6vw;
    }
    .section--soft { background: var(--bg-soft); }
    .section--mid  { background: var(--bg-mid); }
    .section__inner {
      max-width: 1320px;
      margin: 0 auto;
    }
    .section__header { margin-bottom: 52px; }
    /* "start", not "right": the modifier means "aligned to the reading edge",
       which is the right in Hebrew and the left once the language toggle flips
       the document to LTR. A literal `right` left the English site with its
       headings hanging off the wrong edge. Same reasoning for .ai-header and
       .ai-desc below. */
    .section__header--right { text-align: start; }
    .section__header--right .section__title { max-width: none; }
    .section__title {
      font-size: clamp(24px, 2.8vw, 40px);
      font-weight: 900;
      line-height: 1.1;
      letter-spacing: -0.025em;
      color: var(--ink);
    }
    .section__title .accent  { color: var(--teal-mid); }
    .section__title .accent2 { color: var(--violet); }
    .section__desc {
      color: var(--ink-muted);
      font-size: clamp(14px, 1.1vw, 17px);
      line-height: 1.75;
      max-width: 540px;
      margin-top: 12px;
    }

    /* ═══════════════════════════════════════════════════
       VALUE SECTION
    ════════════════════════════════════════════════════ */
    /* Shown from 801px up; on phones the hero carries these words instead
       (.hero__subheading) and this copy is hidden. */
    .value-tagline {
      text-align: center;
      font-size: clamp(18px, 2vw, 26px);
      font-weight: 600;
      line-height: 1.55;
      color: var(--ink-mid);
      max-width: 720px;
      margin: 0 auto 64px;
    }
    .value-tagline .accent { color: var(--teal-mid); }

    .value-cards {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 22px;
    }
    /* ── Value cards: clean, flat, professional ── */
    .value-card {
      border-radius: var(--r-lg);
      background: #fff;
      border: 1px solid var(--border);
      display: flex; flex-direction: column;
    }
    .value-card__anim {
      display: flex; justify-content: center; align-items: center;
      padding: 34px 0 4px;
    }
    .lottie-wrap { width: 92px; height: 92px; }
    .value-card__name {
      font-size: 22px; font-weight: 800; letter-spacing: -0.025em;
      text-align: center;
      padding: 10px 26px 0;
    }
    .value-card__name { color: var(--ink); }
    .value-card__name .accent { color: var(--teal-mid); }
    .value-card__body {
      padding: 22px 28px 30px;
      display: flex; flex-direction: column; gap: 18px;
      margin-top: 18px;
    }
    .value-block { display: flex; flex-direction: column; gap: 6px; }
    .value-block__label {
      font-size: 14px; font-weight: 700;
      color: var(--teal-mid);
      letter-spacing: 0;
      text-transform: none;
    }
    .value-block__text {
      font-size: 14px; line-height: 1.70; color: var(--ink-mid);
    }

    /* ── Value section: data-network background texture ── */
    @keyframes network-drift {
      0%   { transform: translate(0, 0); }
      50%  { transform: translate(-8px, 6px); }
      100% { transform: translate(0, 0); }
    }
    #value {
      position: relative;
      overflow: hidden;
    }
    .value-network-bg {
      position: absolute;
      inset: -20px;
      pointer-events: none;
      z-index: 0;
      animation: network-drift 20s ease-in-out infinite;
    }
    .value-network-bg svg {
      width: 100%;
      height: 100%;
      position: absolute;
      inset: 0;
    }
    .value-net--tall { display: none; }   /* phone copy — see the mobile block */
    #value > .section__inner {
      position: relative;
      z-index: 1;
    }

    /* ═══════════════════════════════════════════════════
       TOOLS SECTION  (v3 — cards over a light chart field)
    ════════════════════════════════════════════════════ */
    .tools-section {
      position: relative;
      overflow: hidden;
      background: linear-gradient(180deg, #EAEEF6 0%, #E0E6F1 100%);
      padding-bottom: 120px;
    }
    .tools-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
    .tools-bg-glow {
      position: absolute; top: -160px; right: -120px;
      width: 560px; height: 560px; border-radius: 50%;
      background: radial-gradient(circle, rgba(0,212,180,0.10), transparent 65%);
      filter: blur(34px);
      animation: toolsFloat 20s ease-in-out infinite;
    }
    @keyframes toolsFloat { 0%,100%{transform:translate(0,0)} 50%{transform:translate(18px,-22px)} }
    .tools-bg-chart {
      position: absolute; left: 0; right: 0; bottom: 0;
      width: 100%; height: 52%;
      -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%);
      mask-image: linear-gradient(180deg, transparent 0%, #000 30%);
    }
    .tools-section > .section__inner { position: relative; z-index: 1; }

    .tools-cards {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 40px;
    }
    .tools-more { display: flex; justify-content: center; margin-top: 80px; }
    .tools-more-btn {
      display: inline-flex; align-items: center; gap: 10px;
      padding: 16px 32px; border-radius: 10px;
      font-family: var(--font-he); font-size: 16px; font-weight: 700;
      color: #fff; background: linear-gradient(135deg, #00D4B4, #00A896);
      box-shadow: 0 2px 12px rgba(0,212,180,0.22);
      transition: transform 0.18s, box-shadow 0.18s, filter 0.18s;
    }
    .tools-more-btn:hover {
      filter: brightness(1.08); transform: translateY(-2px);
      box-shadow: 0 6px 22px rgba(0,212,180,0.30);
    }
    .tools-more-btn span { font-size: 17px; }

    .tool-card {
      border-radius: 18px;
      overflow: hidden;
      display: flex; flex-direction: column;
      background: #fff;
      border: 1px solid rgba(15,23,42,0.10);
      box-shadow: 0 4px 20px rgba(15,23,42,0.09);
    }
    .tools-section .tool-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 22px 55px -12px rgba(0,180,160,0.30);
      border-color: rgba(0,212,180,0.4);
    }
    /* Box is a touch taller than the media (~1280x600) so `contain` shows the
       full width with a small, proportional margin above/below. */
    .tool-card__media {
      position: relative; aspect-ratio: 1280 / 680;
      overflow: hidden; background: #F1F5FA;
      border-bottom: 1px solid rgba(15,23,42,0.06);
    }
    .tool-card__img, .tool-card__video {
      position: absolute; inset: 0;
      width: 100%; height: 100%; object-fit: contain;
      object-position: center;
    }
    .tool-card__img   { transition: opacity 0.4s; }
    .tool-card__video { opacity: 0; transition: opacity 0.4s; }
    .tool-card:hover .tool-card__img   { opacity: 0; }
    .tool-card:hover .tool-card__video { opacity: 1; }
    .tool-card__play-hint {
      position: absolute; bottom: 12px; inset-inline-start: 12px; z-index: 2;
      background: rgba(255,255,255,0.92);
      border: 1px solid rgba(15,23,42,0.08);
      border-radius: 100px; padding: 5px 11px;
      font-size: 11px; font-weight: 600; color: #64748B;
      display: flex; align-items: center; gap: 5px;
      transition: opacity 0.3s;
    }
    .tool-card:hover .tool-card__play-hint { opacity: 0; }
    .tool-card__body {
      padding: 26px 26px 28px;
      display: flex; flex-direction: column; flex: 1;
    }
    .tool-card__title { font-size: 20px; font-weight: 700; color: #0A0E27; margin-bottom: 10px; }
    .tool-card__desc  { font-size: 14.5px; color: #64748B; line-height: 1.7; }
    .tool-card__tags  { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 22px; }
    .tool-card__tags .tag {
      font-size: 11px; font-weight: 600;
      padding: 5px 11px; border-radius: 100px;
      background: #F1F5F9; color: #64748B; border: none;
    }
    .tool-card__tags .tag:nth-child(1) { background: #E0FBF7; color: #00A896; }
    .tool-card__tags .tag:nth-child(2) { background: #F1EEFE; color: #6D28D9; }
    .tool-card__tags .tag:nth-child(3) { background: #F1F5F9; color: #64748B; }

    /* ═══════════════════════════════════════════════════
       AI SECTION  (dark — the exception)
    ════════════════════════════════════════════════════ */
    .ai-section {
      background: linear-gradient(160deg, var(--dark-bg) 0%, var(--dark-bg2) 100%);
      color: var(--dark-text);
      position: relative;
      overflow: hidden;
    }
    /* Particle depth field */
    @keyframes ai-float-near {
      0%   { transform: translateY(0); }
      50%  { transform: translateY(-14px); }
      100% { transform: translateY(0); }
    }
    @keyframes ai-float-mid {
      0%   { transform: translateY(0) translateX(0); }
      50%  { transform: translateY(-7px) translateX(5px); }
      100% { transform: translateY(0) translateX(0); }
    }
    @keyframes ai-float-far {
      0%   { transform: translateY(0); }
      50%  { transform: translateY(-4px); }
      100% { transform: translateY(0); }
    }
    .ai-particles {
      position: absolute; inset: 0;
      pointer-events: none; z-index: 0;
    }
    .ai-particles svg { width: 100%; height: 100%; }
    .ai-p-near { animation: ai-float-near 12s ease-in-out infinite; }
    .ai-p-mid  { animation: ai-float-mid 18s ease-in-out infinite; }
    .ai-p-far  { animation: ai-float-far 25s ease-in-out 2s infinite; }
    /* Soft glow orbs */
    .ai-particles-glow {
      position: absolute; inset: 0;
      pointer-events: none; z-index: 0;
      background:
        radial-gradient(circle 280px at 30% 50%, rgba(0,212,180,0.10) 0%, transparent 100%),
        radial-gradient(circle 250px at 70% 50%, rgba(124,58,237,0.08) 0%, transparent 100%);
    }
    .ai-section > .section__inner {
      position: relative;
      z-index: 1;
    }
    /* ── AI Two-Column Layout ── */
    .ai-layout {
      display: grid;
      grid-template-columns: 1fr 2fr;
      gap: 56px;
      align-items: start;
      direction: rtl;            /* content on right, diagram on left */
      margin-bottom: 0;
    }
    .ai-layout__content {
      direction: rtl;
      display: flex;
      flex-direction: column;
    }
    .ai-layout__diagram {
      direction: ltr;
    }

    .ai-header {
      text-align: start;
      margin-bottom: 16px;
    }
    .ai-title {
      font-size: clamp(20px, 2vw, 28px);
      font-weight: 900; line-height: 1.15;
      letter-spacing: -0.025em;
      color: #fff;
    }
    .ai-title .accent { color: #fff; }
    .ai-subtitle {
      font-size: clamp(20px, 2vw, 28px);
      font-weight: 600;
      color: var(--teal);
      margin-top: 10px;
      line-height: 1.2;
      letter-spacing: -0.02em;
    }
    .ai-desc {
      font-size: clamp(14px, 1.15vw, 18px);
      color: rgba(239,246,255,0.85);
      line-height: 1.6;
      margin: 14px 0 0;
      max-width: 680px;
      text-align: start;
    }

    /* ── Service cards — three horizontal tiles ── */
    .ai-services {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      margin-bottom: 0;
    }
    .ai-service-card {
      background: var(--dark-glass);
      border: 1px solid var(--dark-border);
      border-radius: var(--r-md);
      padding: 20px 18px 18px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
    }
    .ai-service-card:hover {
      border-color: rgba(0,212,180,0.3);
      box-shadow: 0 8px 32px rgba(0,212,180,0.08);
      transform: translateY(-3px);
    }
    .ai-service-icon {
      width: 38px; height: 38px;
      display: flex; align-items: center; justify-content: center;
      border-radius: var(--r-sm);
      background: rgba(0,212,180,0.1);
      border: 1px solid rgba(0,212,180,0.18);
      flex-shrink: 0;
    }
    .ai-service-icon svg {
      width: 20px; height: 20px;
      stroke: var(--teal);
      fill: none;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .ai-service-name {
      font-size: clamp(13px, 1.1vw, 16px);
      font-weight: 700;
      color: var(--dark-text);
      line-height: 1.35;
    }
    .ai-service-body {
      font-size: clamp(11px, 0.85vw, 13px);
      color: var(--dark-muted);
      line-height: 1.6;
    }

    /* ── AI Agent live demo (dark showcase, embedded) ── */
    /* No outer frame — the demo blends into the dark AI section; the glowing
       edge lives on the showcase's own frame inside the iframe. */
    .ai-agent-demo {
      margin-top: 40px;
      position: relative;
      overflow: hidden;
    }
    .ai-agent-frame {
      display: block;
      width: 100%;
      /* Wide showcase renders a fixed 1240×720 landscape frame centered in a
         100vh body — 800px reveals it fully (720 + centering breathing room). */
      height: 800px;
      border: 0;
      /* Transparent so the dark AI section shows through (the JS in index.html
         clears the showcase document's own background on load). No color-scheme
         override — it would force an opaque dark canvas and defeat this. */
      background: transparent;
    }

    /* ── AI demo animation area ── */
    .ai-demo {
      display: flex;
      justify-content: center;
      position: relative;
    }
    .ai-chat-mock {
      width: min(100%, 680px);
      background: var(--dark-glass);
      border: 1px solid var(--dark-border);
      border-radius: var(--r-lg);
      overflow: hidden;
      backdrop-filter: blur(16px);
    }
    .chat-topbar {
      padding: 13px 18px;
      border-bottom: 1px solid var(--dark-border);
      display: flex; align-items: center; gap: 8px;
      background: rgba(255,255,255,0.02);
    }
    .chat-topbar-dot { width: 8px; height: 8px; border-radius: 50%; }
    .chat-topbar-name {
      font-size: 13px; font-weight: 600; margin-right: auto;
      display: flex; align-items: center; gap: 8px;
      color: var(--dark-text);
    }
    .chat-topbar-badge {
      font-size: 10px; font-weight: 700;
      padding: 2px 7px; border-radius: 4px;
      background: rgba(0,212,180,0.15); color: var(--teal);
      border: 1px solid rgba(0,212,180,0.25);
    }
    .chat-messages {
      padding: 20px 18px;
      display: flex; flex-direction: column; gap: 13px; min-height: 240px;
    }
    .chat-msg {
      max-width: 84%; font-size: 13.5px; line-height: 1.6;
      padding: 10px 14px; border-radius: 12px; direction: rtl;
    }
    .chat-msg--user {
      background: rgba(0,212,180,0.14);
      border: 1px solid rgba(0,212,180,0.2);
      align-self: flex-end; color: var(--dark-text);
    }
    .chat-msg--ai {
      background: var(--dark-glass);
      border: 1px solid var(--dark-border);
      align-self: flex-start; color: var(--dark-muted);
    }
    .chat-input-row {
      padding: 13px 18px;
      border-top: 1px solid var(--dark-border);
      display: flex; gap: 10px;
    }
    .chat-input {
      flex: 1; background: rgba(255,255,255,0.04);
      border: 1px solid var(--dark-border); border-radius: 8px;
      padding: 9px 14px; color: var(--dark-muted);
      font-size: 13px; font-family: var(--font-he); direction: rtl;
    }
    .chat-send {
      width: 36px; height: 36px; border-radius: 8px;
      background: var(--teal); border: none; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      color: var(--navy); font-size: 16px;
      transition: filter 0.18s;
    }
    .chat-send:hover { filter: brightness(1.1); }

    /* ═══════════════════════════════════════════════════
       DATA-LAYERS ARCHITECTURE DIAGRAM (embedded in AI)
    ════════════════════════════════════════════════════ */
    .ai-arch-label {
      text-align: right;
      margin-bottom: 20px;
      direction: rtl;
    }
    .ai-arch-eyebrow {
      display: inline-block;
      font-family: var(--font-he);
      font-size: 11px; font-weight: 600;
      letter-spacing: 1.2px;
      text-transform: uppercase;
      color: var(--teal);
      padding: 4px 14px;
      border: 1px solid rgba(0,212,180,0.25);
      border-radius: 20px;
      background: rgba(0,212,180,0.08);
      margin-bottom: 10px;
    }
    .ai-arch-title {
      font-family: var(--font-he);
      font-size: clamp(18px, 1.8vw, 26px);
      font-weight: 700;
      color: var(--dark-text);
      line-height: 1.2;
    }
    .ai-arch-title .accent { color: var(--teal); }
    .ai-arch-sub {
      font-family: var(--font-he);
      font-size: clamp(12px, 0.95vw, 14px);
      color: var(--dark-muted);
      margin-top: 6px;
    }

    /* Dark stage that hosts the (dark-styled) architecture diagram on a
       light standalone page — replicates the AI section's navy backdrop. */
    .arch-stage {
      background: var(--dark-bg);
      border-radius: var(--r-xl);
      padding: clamp(18px, 3.5vw, 48px);
      direction: ltr;
      overflow: hidden;
      box-shadow: 0 30px 80px -34px rgba(10,14,39,0.45);
    }

    /* Projects page — empty placeholder state */
    .projects-empty {
      margin-top: 32px;
      min-height: 320px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 48px 24px;
      border: 1.5px dashed var(--border-mid);
      border-radius: var(--r-xl);
      background: var(--bg-soft);
      color: var(--ink-muted);
      font-size: clamp(14px, 1.1vw, 17px);
    }

    .dl-arch-wrapper {
      position: relative;
      border-radius: var(--r-md);
      background: var(--dark-glass);
      width: 100%;
      border: 1px solid var(--dark-border);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      overflow: hidden;
    }
    .dl-arch-wrapper canvas {
      position: absolute; top: 0; left: 0;
      pointer-events: none;
      z-index: 0;
    }
    .dl-arch-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      direction: ltr;
      overflow: hidden;
      background: transparent;
      position: relative;
      z-index: 1;
    }
    .dl-arch-col {
      display: flex; flex-direction: column;
      border-right: 1px solid var(--dark-border);
      background: transparent;
    }
    .dl-arch-col:last-child { border-right: none; }

    .dl-col-hdr {
      background: rgba(10,14,39,0.85);
      backdrop-filter: blur(8px);
      color: var(--dark-muted);
      padding: 8px 6px;
      text-align: center;
      font-size: 9px; font-weight: 600; letter-spacing: 0.6px;
      text-transform: uppercase;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      position: relative; flex-shrink: 0;
      border-bottom: 1px solid var(--dark-border);
      transition: color 0.28s ease;
    }
    .dl-col-hdr-bar {
      position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
      width: 0; height: 2px; background: var(--teal);
      transition: width 0.38s ease; border-radius: 2px 2px 0 0;
    }
    .dl-arch-col:hover .dl-col-hdr-bar { width: 100%; }
    .dl-arch-col:hover .dl-col-hdr { color: var(--dark-text); }

    .dl-col-body {
      flex: 1; padding: 8px 5px 10px;
      display: flex; flex-direction: column; gap: 5px;
      justify-content: space-between;
      background: transparent;
    }
    .dl-sec-hdr {
      font-size: 7.5px; font-weight: 700; color: var(--dark-muted);
      text-transform: uppercase; letter-spacing: 0.8px;
      padding: 2px 4px;
      background: rgba(255,255,255,0.03);
      border-radius: 3px;
      margin-top: 3px;
    }
    .dl-sec-hdr:first-child { margin-top: 0; }
    .dl-sec-div { height: 1px; background: var(--dark-border); margin: 3px 0; }

    /* ── Component card — glass in dark AI section ── */
    .dl-comp-card {
      background: var(--dark-glass);
      border: 1px solid var(--dark-border);
      border-radius: var(--r-sm);
      padding: 8px 5px 7px;
      display: flex; flex-direction: column; align-items: center; gap: 4px;
      cursor: default;
      position: relative;
      overflow: hidden;
      flex-shrink: 0;
      --glare-x: 50%;
      --glare-y: 50%;
      --glare-opacity: 0;
      transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
                  box-shadow 0.28s cubic-bezier(0.22, 1, 0.36, 1),
                  border-color 0.28s ease,
                  background 0.28s ease;
    }
    .dl-comp-card::after {
      content: ''; position: absolute; inset: 0;
      border-radius: inherit;
      pointer-events: none;
      background: radial-gradient(
        ellipse 120px 100px at var(--glare-x) var(--glare-y),
        rgba(0, 212, 180, 0.12),
        rgba(124, 58, 237, 0.05) 40%,
        transparent 70%
      );
      opacity: var(--glare-opacity);
      transition: opacity 0.35s ease;
      z-index: 4;
    }
    .dl-comp-card:hover {
      transform: translateY(-4px);
      box-shadow:
        0 12px 32px rgba(0,212,180,0.12),
        0 0 0 1px rgba(0,212,180,0.30);
      border-color: rgba(0,212,180,0.35);
      background: rgba(255,255,255,0.07);
    }
    .dl-comp-card:hover .dl-ci {
      animation: dlIconPulse 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }
    @keyframes dlIconPulse {
      0%   { transform: scale(1); }
      40%  { transform: scale(1.15); }
      70%  { transform: scale(0.95); }
      100% { transform: scale(1.05); }
    }
    .dl-ci { display: block; flex-shrink: 0; transform: scale(0.7); }
    .dl-comp-card svg { filter: drop-shadow(0 0 3px rgba(0,212,180,0.15)); }
    .dl-card-label {
      font-size: 8px; font-weight: 600; color: var(--dark-text);
      text-align: center; line-height: 1.2; position: relative; z-index: 1;
    }

    /* ══════════════════════════════════════════════════
       AI PLATFORM — Command Center + Radiant Core
       ══════════════════════════════════════════════════ */
    .dl-ai-bar {
      position: relative;
      height: 140px;
      background: linear-gradient(135deg,
        #2d0a4e 0%,
        #6b1558 30%,
        #8b1a6b 50%,
        #6b1558 70%,
        #2d0a4e 100%
      );
      padding: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      direction: ltr;
      z-index: 1;
      overflow: hidden;
      border-bottom: 2px solid rgba(180, 40, 140, 0.5);
      border-radius: var(--r-md) var(--r-md) 0 0;
    }

    /* Radial glow in center */
    .dl-ai-bar::before {
      content: '';
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      width: 700px; height: 500px;
      background: radial-gradient(
        ellipse,
        rgba(200, 50, 160, 0.40) 0%,
        rgba(139, 26, 107, 0.20) 35%,
        transparent 70%
      );
      pointer-events: none;
      z-index: 0;
      animation: dl-radiantPulse 4s ease-in-out infinite;
    }
    @keyframes dl-radiantPulse {
      0%, 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
      50% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
    }

    /* Star particles layer */
    .dl-ai-particles {
      position: absolute; inset: 0;
      pointer-events: none; z-index: 0;
      background-image:
        radial-gradient(2px 2px at 8% 12%, rgba(255,255,255,0.5), transparent),
        radial-gradient(1.5px 1.5px at 22% 72%, rgba(255,255,255,0.35), transparent),
        radial-gradient(2px 2px at 40% 6%, rgba(255,255,255,0.4), transparent),
        radial-gradient(1px 1px at 55% 88%, rgba(255,255,255,0.25), transparent),
        radial-gradient(2px 2px at 73% 18%, rgba(255,255,255,0.4), transparent),
        radial-gradient(1.5px 1.5px at 90% 55%, rgba(255,255,255,0.3), transparent),
        radial-gradient(1px 1px at 32% 40%, rgba(255,255,255,0.2), transparent),
        radial-gradient(2px 2px at 95% 10%, rgba(255,255,255,0.35), transparent),
        radial-gradient(1.5px 1.5px at 3% 48%, rgba(255,255,255,0.25), transparent),
        radial-gradient(1px 1px at 62% 35%, rgba(255,255,255,0.2), transparent),
        linear-gradient(0deg, transparent 24%, rgba(255,255,255,0.035) 25%, rgba(255,255,255,0.035) 26%, transparent 27%, transparent 74%, rgba(255,255,255,0.035) 75%, rgba(255,255,255,0.035) 76%, transparent 77%),
        linear-gradient(90deg, transparent 24%, rgba(255,255,255,0.035) 25%, rgba(255,255,255,0.035) 26%, transparent 27%, transparent 74%, rgba(255,255,255,0.035) 75%, rgba(255,255,255,0.035) 76%, transparent 77%);
      background-size: 200% 200%, 200% 200%, 200% 200%, 200% 200%, 200% 200%, 200% 200%, 200% 200%, 200% 200%, 200% 200%, 200% 200%, 50px 50px, 50px 50px;
      animation: dl-particleShimmer 8s ease-in-out infinite;
    }
    @keyframes dl-particleShimmer {
      0%, 100% { opacity: 0.45; }
      50% { opacity: 0.8; }
    }

    /* Corner HUD brackets */
    .dl-ai-bar::after {
      content: '';
      position: absolute; inset: 8px;
      pointer-events: none; z-index: 1;
      background-image:
        linear-gradient(135deg, rgba(255,255,255,0.75) 0%, rgba(255,255,255,0.75) 2px, transparent 2px),
        linear-gradient(-135deg, rgba(255,255,255,0.75) 0%, rgba(255,255,255,0.75) 2px, transparent 2px),
        linear-gradient(45deg, rgba(255,255,255,0.75) 0%, rgba(255,255,255,0.75) 2px, transparent 2px),
        linear-gradient(-45deg, rgba(255,255,255,0.75) 0%, rgba(255,255,255,0.75) 2px, transparent 2px);
      background-size: 16px 16px;
      background-position: top left, top right, bottom right, bottom left;
      background-repeat: no-repeat;
      opacity: 0.4;
      animation: dl-cornerPulse 3s ease-in-out infinite;
    }
    @keyframes dl-cornerPulse {
      0%, 100% { opacity: 0.25; }
      50% { opacity: 0.55; }
    }

    /* Scan line */
    .dl-ai-scanline {
      position: absolute; top: 0; left: 0;
      width: 100%; height: 2px;
      background: linear-gradient(90deg,
        transparent 0%,
        rgba(255,255,255,0.3) 15%,
        rgba(0,212,180,0.85) 50%,
        rgba(255,255,255,0.3) 85%,
        transparent 100%
      );
      box-shadow: 0 0 14px rgba(0,212,180,0.5), 0 0 30px rgba(200,50,160,0.3);
      animation: dl-scanDown 3.5s linear infinite;
      pointer-events: none; z-index: 3;
    }
    @keyframes dl-scanDown {
      0% { top: -1%; }
      100% { top: 101%; }
    }

    /* Content wrapper */
    .dl-ai-content {
      position: relative; z-index: 2;
      display: flex; flex-direction: row;
      align-items: center; gap: 10px;
    }

    /* Title — gradient shine */
    .dl-ai-title {
      font-family: var(--font-en);
      font-size: 14px; font-weight: 700;
      letter-spacing: 3px;
      text-transform: uppercase;
      background: linear-gradient(90deg, #ffffff 0%, #00D4B4 50%, #ffffff 100%);
      background-size: 200% 100%;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      animation: dl-titleShine 4s ease-in-out infinite;
      margin: 0; white-space: nowrap;
    }
    @keyframes dl-titleShine {
      0%, 100% { background-position: 200% center; }
      50% { background-position: 0% center; }
    }

    /* SVG icon container */
    .dl-ai-icon {
      position: relative;
      width: 50px; height: 50px;
      display: flex; align-items: center; justify-content: center;
      animation: dl-iconGlow 2.5s ease-in-out infinite;
    }
    @keyframes dl-iconGlow {
      0%, 100% {
        filter: drop-shadow(0 0 10px rgba(0,212,180,0.4))
                drop-shadow(0 0 25px rgba(139,26,107,0.3));
      }
      50% {
        filter: drop-shadow(0 0 20px rgba(0,212,180,0.7))
                drop-shadow(0 0 40px rgba(200,50,160,0.4));
      }
    }
    .dl-ai-icon svg { width: 45px; height: 45px; }

    /* Platform item pills */
    .dl-ai-items {
      display: flex; gap: 6px; flex-wrap: wrap;
      justify-content: center;
      position: relative; z-index: 2;
      margin-top: 4px; padding: 0 8px;
    }
    .dl-ai-item {
      display: inline-flex; align-items: center; gap: 4px;
      color: rgba(255,255,255,0.95);
      font-size: 8px; font-weight: 600;
      padding: 4px 8px; border-radius: 16px;
      border: 1px solid rgba(0,212,180,0.55);
      background: rgba(255,255,255,0.08);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      cursor: default;
      transition: all 0.28s cubic-bezier(0.22, 1, 0.36, 1);
      box-shadow: 0 0 10px rgba(139,26,107,0.2), inset 0 1px 0 rgba(255,255,255,0.08);
    }
    .dl-ai-item:hover {
      background: rgba(0,212,180,0.18);
      border-color: var(--teal);
      color: var(--teal);
      box-shadow: 0 0 20px rgba(0,212,180,0.30), 0 0 40px rgba(139,26,107,0.25);
      transform: translateY(-3px);
    }
    .dl-ai-item svg { width: 10px; height: 10px; transition: transform 0.22s ease; }
    .dl-ai-item:hover svg { transform: scale(1.2); }

    /* ── Governance bar ── */
    .dl-gov-bar {
      background: rgba(10,14,39,0.7);
      backdrop-filter: blur(12px);
      padding: 8px 10px;
      display: flex; align-items: center; gap: 4px; direction: ltr;
      border-top: 1px solid rgba(0,212,180,0.18);
      position: relative; z-index: 1;
    }
    .dl-gov-title {
      color: var(--dark-muted); font-size: 7.5px; font-weight: 700;
      text-transform: uppercase; letter-spacing: 1px;
      white-space: nowrap; margin-right: 8px;
    }
    .dl-gov-sep { width: 1px; height: 14px; background: var(--dark-border); flex-shrink: 0; margin: 0 4px; }
    .dl-gov-items { display: flex; gap: 4px; flex-wrap: wrap; }
    .dl-gov-item {
      display: flex; align-items: center; gap: 3px;
      color: var(--dark-muted); font-size: 8px; font-weight: 500;
      padding: 3px 7px; border-radius: 14px;
      border: 1px solid var(--dark-border);
      background: transparent;
      transition: all 0.22s ease; cursor: default;
    }
    .dl-gov-item:hover {
      background: rgba(0,212,180,0.10);
      border-color: rgba(0,212,180,0.35);
      color: var(--teal);
    }
    .dl-gov-item svg { width: 10px; height: 10px; }
    .dl-gov-item:hover svg { transform: scale(1.15); }
    .dl-gov-item svg { transition: transform 0.22s ease; }

    /* ── Responsive: data-layers ── */
    @media (max-width: 1080px) {
      .dl-arch-grid { grid-template-columns: repeat(3, 1fr); }
      .dl-arch-col:nth-child(4),
      .dl-arch-col:nth-child(5) { display: none; }
    }
    @media (max-width: 620px) {
      .dl-arch-grid { grid-template-columns: 1fr 1fr; }
      .dl-arch-col:nth-child(3),
      .dl-arch-col:nth-child(4),
      .dl-arch-col:nth-child(5) { display: none; }
      .dl-gov-bar { flex-wrap: wrap; padding: 12px 14px; }
      .dl-ai-bar { height: 140px; gap: 8px; }
      .dl-ai-title { font-size: 12px; letter-spacing: 2px; }
      .dl-ai-icon { width: 40px; height: 40px; }
      .dl-ai-icon svg { width: 36px; height: 36px; }
      .dl-ai-item { font-size: 7px; padding: 3px 6px; }
      .dl-ai-items { gap: 5px; padding: 0 8px; }
    }

    /* ═══════════════════════════════════════════════════
       PROJECTS SECTION
    ════════════════════════════════════════════════════ */
    .projects-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 22px;
    }
    .project-card {
      border-radius: var(--r-lg);
      overflow: hidden;
      display: flex; flex-direction: column;
      background: #fff;
      border: 1px solid var(--border);
      box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    }
    .project-card__img-wrap {
      aspect-ratio: 3/2; overflow: hidden;
      background: var(--bg-mid); position: relative;
    }
    .project-card__img {
      width: 100%; height: 100%; object-fit: cover;
      transition: transform 0.5s;
    }
    .project-card:hover .project-card__img { transform: scale(1.06); }
    .project-placeholder {
      width: 100%; height: 100%;
      display: flex; align-items: center; justify-content: center;
      font-size: 52px;
    }
    .project-card--teal   .project-placeholder { background: linear-gradient(135deg, rgba(0,212,180,0.06) 0%, rgba(0,184,160,0.14) 100%); }
    .project-card--blue   .project-placeholder { background: linear-gradient(135deg, rgba(124,58,237,0.06) 0%, rgba(124,58,237,0.14) 100%); }
    .project-card--violet .project-placeholder { background: linear-gradient(135deg, rgba(124,58,237,0.06) 0%, rgba(124,58,237,0.14) 100%); }
    .project-card__client-badge {
      position: absolute; top: 10px; right: 10px;
      background: rgba(255,255,255,0.92);
      border: 1px solid var(--border);
      border-radius: 6px; padding: 4px 10px;
      font-size: 11px; font-weight: 600; color: var(--ink-mid);
      backdrop-filter: blur(8px);
    }
    .project-card__body {
      padding: 20px; flex: 1;
      display: flex; flex-direction: column; gap: 8px;
    }
    .project-card__title   { font-size: 17px; font-weight: 800; color: var(--ink); }
    .project-card__subtitle { font-size: 13px; color: var(--ink-muted); font-weight: 500; }
    .project-card__desc    { font-size: 13.5px; color: var(--ink-muted); line-height: 1.65; flex: 1; }
    .project-card__values  { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
    .value-tag {
      font-size: 11px; font-weight: 600;
      padding: 3px 10px; border-radius: 100px;
      background: rgba(124,58,237,0.07);
      color: var(--violet);
      border: 1px solid rgba(124,58,237,0.16);
    }
    .project-card__footer {
      padding: 13px 20px;
      border-top: 1px solid var(--border);
    }
    .project-link {
      font-size: 13px; font-weight: 600; color: var(--violet);
      display: inline-flex; align-items: center; gap: 6px;
      transition: gap 0.2s;
    }
    .project-card:hover .project-link { gap: 10px; }

    /* ═══════════════════════════════════════════════════
       PROCESS SECTION
    ════════════════════════════════════════════════════ */
    .process-steps {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 18px;
      position: relative;
    }
    .process-step {
      display: flex; flex-direction: column; align-items: center; gap: 14px;
      padding: 26px 22px 28px;
      border-radius: var(--r-md);
      background: #fff;
      border: 1px solid var(--border);
      box-shadow: 0 2px 6px rgba(0,0,0,0.03);
    }
    .process-step__anim,
    .process-step__title,
    .process-step__desc {
      position: relative;
    }
    .process-step__anim {
      display: flex; justify-content: center; align-items: center;
      padding: 4px 0 2px;
    }
    .lottie-process { width: 84px; height: 84px; }
    .process-step__title {
      font-size: 17px; font-weight: 800; color: var(--ink);
      text-align: center;
      margin-top: 2px;
    }
    .process-step__desc {
      font-size: 13.5px; color: var(--ink-muted); line-height: 1.7;
      text-align: center;
    }

    /* ── Process section: analytics-grid background texture ── */
    @keyframes grid-shift {
      0%   { background-position: 0 0; }
      100% { background-position: 40px 40px; }
    }
    #process {
      position: relative;
      overflow: hidden;
    }
    .process-grid-bg {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      /* Small grid */
      background-image:
        linear-gradient(rgba(0,212,180,0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,212,180,0.07) 1px, transparent 1px);
      background-size: 40px 40px;
      animation: grid-shift 30s linear infinite;
    }
    .process-grid-bg::before {
      content: '';
      position: absolute;
      inset: 0;
      /* Large grid overlay */
      background-image:
        linear-gradient(rgba(124,58,237,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(124,58,237,0.05) 1px, transparent 1px);
      background-size: 160px 160px;
    }
    .process-grid-bg::after {
      content: '';
      position: absolute;
      inset: 0;
      /* Vignette fade to soften edges */
      background: radial-gradient(ellipse at center, transparent 20%, var(--bg) 80%);
    }
    #process > .section__inner {
      position: relative;
      z-index: 1;
    }

    /* ═══════════════════════════════════════════════════
       CONTACT CTA
    ════════════════════════════════════════════════════ */
    .cta-section {
      padding: 96px 6vw;
      background: var(--bg-mid);
      text-align: center;
    }
    .cta-section .section__title { color: var(--ink); }
    .cta-section .accent { color: var(--teal-mid); }
    .cta-section p {
      color: var(--ink-muted);
      font-size: clamp(15px, 1.2vw, 17px);
      line-height: 1.7; max-width: 560px;
      margin: 14px auto 36px;
    }
    .cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

    /* ═══════════════════════════════════════════════════
       FOOTER  (dark theme)
    ════════════════════════════════════════════════════ */
    /* Minimal footer — a single centered copyright line. */
    .site-footer {
      background: var(--dark-bg);
      border-top: 1px solid var(--dark-border);
      padding: 26px 6vw;
      color: var(--dark-text);
    }
    .footer-bottom {
      max-width: 1320px; margin: 0 auto;
      display: flex; align-items: center; justify-content: center;
      font-size: 12.5px; color: rgba(239,246,255,0.45);
    }

    /* ═══════════════════════════════════════════════════
       RESPONSIVE
    ════════════════════════════════════════════════════ */
    @media (max-width: 1080px) {
      .value-cards, .projects-grid { grid-template-columns: 1fr 1fr; }
      .process-steps { grid-template-columns: 1fr 1fr; }
      .ai-services { gap: 16px; }
      .ai-header { text-align: center; margin-bottom: 24px; }
      .ai-desc { text-align: center; margin: 12px auto 0; }
      .ai-title { font-size: clamp(22px, 3vw, 36px); }
      .ai-subtitle { font-size: clamp(22px, 3vw, 36px); }
      .ai-desc { font-size: clamp(15px, 1.4vw, 19px); }
      .ai-service-card { padding: 24px 22px 20px; gap: 10px; }
      .ai-service-icon { width: 44px; height: 44px; }
      .ai-service-name { font-size: clamp(15px, 1.3vw, 18px); }
      .ai-service-body { font-size: clamp(12px, 1vw, 14px); }
      .dl-col-hdr { padding: 12px 10px; font-size: 10px; }
      .dl-col-body { padding: 12px 8px 14px; gap: 7px; }
      .dl-comp-card { padding: 12px 8px 10px; gap: 6px; }
      .dl-sec-hdr { font-size: 8.5px; }
      .dl-card-label { font-size: 10px; }
      .dl-ci { transform: scale(1); }
      .ai-chat-mock { width: 100%; }
    }
    @media (max-width: 800px) {
      .hero__inner { flex-direction: column; }
      .hero__visual { order: -1; }
      .canvas-wrap { width: clamp(280px, 80vw, 480px); height: clamp(280px, 80vw, 480px); }

      /* ── Mobile nav: logo + language toggle only ──
         No links remain, so there is no hamburger and no dropdown. The CTA is
         dropped here too — the request was for only the language switch in the
         bar — leaving the toggle alone at the far (start) edge. */
      .nav__cta { display: none; }
    }
    @media (max-width: 800px) {
      .ai-services { grid-template-columns: 1fr; }
    }
    @media (max-width: 620px) {
      .value-cards, .projects-grid, .process-steps { grid-template-columns: 1fr; }
    }

    /* ═══════════════════════════════════════════════════
       PHONE SECTION BACKDROPS
       Ported from the three "KYD BG - *.dc.html" design exports. They are
       drawn for a 430×440/480 phone frame, but a real section is far taller
       than that, and these SVGs use `slice` — which scales to COVER and would
       blow the artwork up several times over on a long section (the same trap
       the value/tools backgrounds fell into). So the container carries what
       tiles happily over any height — the gradient wash and the corner blobs —
       while the drawn artwork lives in .kyd-bg__stage, an aspect-locked box
       pinned to one edge at its true proportions and faded out where it ends.
       Hidden above 800px, where the desktop artwork takes over.
    ════════════════════════════════════════════════════ */
    .kyd-bg { display: none; }

    @keyframes kydBlob {
      0%, 100% { transform: translate(0, 0) scale(1) rotate(0); }
      50%      { transform: translate(16px, -13px) scale(1.09) rotate(9deg); }
    }
    @keyframes kydBarSlow {
      0%, 46%   { transform: scaleY(.72); }
      54%, 100% { transform: scaleY(1); }
    }
    @keyframes kydDrift  { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-14px, -11px); } }
    @keyframes kydDriftB { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(12px, 13px); } }
    @keyframes kydPulse {
      0%, 100% { opacity: .3; transform: scale(1); }
      50%      { opacity: 1;  transform: scale(1.7); }
    }
    @keyframes kydRadar {
      0%   { transform: scale(.25); opacity: .5; }
      100% { transform: scale(1.5); opacity: 0; }
    }
    /* The trend curve draws itself in once, left to right */
    @keyframes kydTrendDraw { to { stroke-dashoffset: 0; } }
    @keyframes kydFadeIn    { to { opacity: 1; } }

    /* ═══════════════════════════════════════════════════
       MOBILE TUNING (≤ 800px)
       The desktop layout leans on wide decorative artwork and a large
       canvas animation. Both fight a phone screen, so here the hero
       becomes type-led and the background art is re-anchored.
    ════════════════════════════════════════════════════ */
    @media (max-width: 800px) {
      /* ── Phone backdrops (see the block above for the shape of this) ── */
      .kyd-bg {
        display: block;
        position: absolute;
        inset: 0;
        overflow: hidden;
        pointer-events: none;
        z-index: 0;
      }
      /* Full-height layers: safe at any section height */
      .kyd-bg__wash { position: absolute; inset: 0; }
      .kyd-bg__blob { position: absolute; border-radius: 50%; }

      /* The drawn artwork, locked to the design's own proportions */
      .kyd-bg__stage { position: absolute; left: 0; width: 100%; }
      .kyd-bg__tex   { position: absolute; inset: 0; width: 100%; height: 100%; }
      .kyd-bg__net    { animation: kydDrift 16s ease-in-out infinite; }
      .kyd-bg__nodes  { animation: kydDriftB 22s ease-in-out infinite; }
      .kyd-bg__sparks { animation: kydDrift 11s ease-in-out infinite; }
      .kyd-bg__spark  { transform-box: fill-box; transform-origin: center; animation: kydPulse 3s ease-in-out infinite; }
      .kyd-bg__spark:nth-child(2) { animation-duration: 3.6s; animation-delay: .6s; }
      .kyd-bg__spark:nth-child(3) { animation-duration: 3.3s; animation-delay: 1s; }
      .kyd-bg__spark:nth-child(4) { animation-duration: 3.9s; animation-delay: .3s; }

      .kyd-bg__radar {
        position: absolute; left: 50%; top: 50%;
        width: 140px; height: 140px; margin: -70px 0 0 -70px;
        border-radius: 50%;
        animation: kydRadar 4s ease-out infinite;
      }
      .kyd-bg__radar--late { animation-delay: 2s; }

      /* ── Hero: bar field sits on the bottom edge ── */
      .hero { background: linear-gradient(180deg, #fbfcfe 0%, #eef2f7 100%); }
      .kyd-bg--hero .kyd-bg__stage { bottom: 0; aspect-ratio: 430 / 440; }
      .kyd-bg__blob--teal {
        width: 220px; height: 220px; top: -70px; left: -60px; filter: blur(30px);
        background: radial-gradient(circle at 45% 40%, rgba(0,212,180,.18), transparent 70%);
        animation: kydBlob 16s ease-in-out infinite;
      }
      .kyd-bg__blob--violet {
        width: 200px; height: 200px; bottom: -30px; right: -60px; filter: blur(32px);
        background: radial-gradient(circle at 55% 45%, rgba(124,58,237,.14), transparent 70%);
        animation: kydBlob 19s ease-in-out infinite reverse;
      }
      .kyd-bg__bar {
        transform-box: fill-box; transform-origin: center bottom;
        animation: kydBarSlow 16s ease-in-out infinite;
      }
      .kyd-bg__bar:nth-child(2)  { animation-duration: 19s; animation-delay: 3s; }
      .kyd-bg__bar:nth-child(3)  { animation-duration: 14s; animation-delay: 6s; }
      .kyd-bg__bar:nth-child(4)  { animation-duration: 21s; animation-delay: 9s; }
      .kyd-bg__bar:nth-child(5)  { animation-duration: 17s; animation-delay: 1.5s; }
      .kyd-bg__bar:nth-child(6)  { animation-duration: 22s; animation-delay: 7.5s; }
      .kyd-bg__bar:nth-child(7)  { animation-duration: 15s; animation-delay: 4.5s; }
      .kyd-bg__bar:nth-child(8)  { animation-duration: 20s; animation-delay: 10.5s; }
      .kyd-bg__bar:nth-child(9)  { animation-duration: 16s; animation-delay: 2s; }
      .kyd-bg__bar:nth-child(10) { animation-duration: 18s; animation-delay: 8s; }
      .kyd-bg__bar:nth-child(11) { animation-duration: 14s; animation-delay: 5s; }
      .kyd-bg__bar:nth-child(12) { animation-duration: 21s; animation-delay: 11s; }
      .kyd-bg__bar:nth-child(13) { animation-duration: 17s; animation-delay: 3.5s; }
      .kyd-bg__bar:nth-child(14) { animation-duration: 19s; animation-delay: 9.5s; }

      /* ── Tools section: dark-on-light ── */
      .tools-section { background: linear-gradient(160deg, #f6f8fc 0%, #eaeff6 55%, #eceaf6 100%); }
      .tools-bg { display: none; }                      /* superseded here */
      .kyd-bg--dark .kyd-bg__stage {
        top: 0;
        aspect-ratio: 430 / 480;
        -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
                mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
      }
      /* The trend curve is a band rather than a framed panel: fixed height,
         full bleed, anchored to the foot of the section. preserveAspectRatio is
         "none" on this SVG, so it stretches to whatever width the phone is and
         the curve always meets both edges — which is the point of it. */
      .kyd-bg--trend .kyd-bg__stage {
        top: auto;
        bottom: 0;
        height: 190px;
        aspect-ratio: auto;
        -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
                mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
      }
      .kyd-bg--trend .kyd-bg__wash {
        background:
          radial-gradient(90% 50% at 15% 0%, rgba(124,58,237,.10), transparent 60%),
          radial-gradient(80% 45% at 90% 100%, rgba(0,168,150,.08), transparent 60%);
      }
      .kyd-bg__trend {
        stroke-dasharray: 1400;
        stroke-dashoffset: 1400;
        animation: kydTrendDraw 3.2s ease-out .3s forwards;
      }
      .kyd-bg__trend-dots { opacity: 0; animation: kydFadeIn 1.2s ease-out 2.6s forwards; }
      .kyd-bg__area { opacity: 0; animation: kydFadeIn 1.6s ease-out 1.6s forwards; }
      .kyd-bg__blob--violet-lg {
        width: 280px; height: 280px; top: -90px; right: -60px; filter: blur(80px);
        animation: kydBlob 18s ease-in-out infinite;
      }
      .kyd-bg--trend .kyd-bg__blob--violet-lg { background: rgba(124,58,237,.14); }

      /* ── AI section: dark ── */
      .ai-section { background: linear-gradient(160deg, #0A0E27 0%, #141832 55%, #1a1040 100%); }
      .ai-particles { display: none; }                  /* superseded here */
      .kyd-bg--dark .kyd-bg__wash {
        background: radial-gradient(90% 50% at 15% 0%, rgba(124,58,237,.22), transparent 60%);
      }
      .kyd-bg--dark .kyd-bg__blob--violet-lg { background: rgba(124,58,237,.30); }
      .kyd-bg--dark .kyd-bg__radar { border: 1px solid rgba(0,212,180,.5); }
      .kyd-bg--dark .kyd-bg__tex { opacity: .95; }

      /* Every section carries 96px top and bottom — a figure chosen for a
         1440px canvas. On a phone the two stack into 192px of nothing between
         sections, which reads as the page having lost its place rather than as
         breathing room. This is the gap that shows up before the value cards,
         and at the top of tools, AI, process and the CTA: all of them are just
         this one rule. */
      .section { padding: 56px 6vw; }
      /* The CTA sets its own padding rather than riding on .section */
      .cta-section { padding: 56px 6vw; }
      .section__header { margin-bottom: 32px; }
      .tools-section { padding-bottom: 72px; }

      /* Hero: drop the canvas animation entirely. It is the single most
         expensive thing on the page and at phone width it crowds out the
         message rather than supporting it. Hiding it also parks the render
         loop (the script's IntersectionObserver stops rAF when it is not
         visible), so it costs no battery. */
      .hero__visual { display: none; }

      /* 88vh was sized around the canvas sitting beside the text. Without it,
         that height just becomes dead space above and below the words, so the
         hero shrinks to its content and sits near the top of the screen.
         The top padding still has to clear the fixed 66px nav. */
      .hero { min-height: 0; padding: 92px 6vw 56px; align-items: flex-start; }

      /* With the art gone, the type carries the hero — so it grows a lot, and
         everything centres on the column. The vw term does the work between
         360px and ~510px, and the clamps keep it sane at both ends. */
      .hero__text     { text-align: center; }
      .hero__eyebrow  { display: none; }   /* phone hero leads with the heading */
      /* 10px was tuned for a heading sitting next to artwork. Centred, with
         the tagline directly beneath it, the two need real separation. */
      .hero__heading  { font-size: clamp(40px, 11.2vw, 58px); line-height: 1.03; margin-bottom: 26px; }

      /* The value section's tagline moves into the hero here, and only here —
         on wider screens .value-tagline carries it and this copy is hidden.
         Full black rather than the muted body colour, accents included: at
         this size the teal highlights fought the heading for attention. */
      .hero__subheading {
        display: block;
        font-size: clamp(19px, 5.4vw, 24px);
        line-height: 1.6;
        color: var(--ink);
        max-width: none;
        margin: 0 auto 34px;
        text-align: center;
      }
      .hero__subheading .accent { color: inherit; font-weight: inherit; }

      /* Buttons stack rather than wrap, but stop short of the full column:
         edge-to-edge they read as bars rather than buttons, and they sit
         better under centred type when they share its centre line. */
      .hero__actions { flex-direction: column; align-items: center; gap: 12px; }
      .hero__actions .btn { width: 100%; max-width: 250px; padding: 15px 24px; font-size: 15px; }
      /* The outline button is transparent by default, which left the backdrop's
         bar field showing straight through it. Half-opaque white lifts it off
         the artwork while still letting the gradient read behind. */
      .hero__actions .btn--outline { background: rgba(255, 255, 255, 0.55); }

      /* Desktop's copy of the same words */
      .value-tagline { display: none; }

      /* The mesh runs the full height of the section here, rather than the
         200px strip it used to be clipped to. That strip existed because the
         desktop SVG is 1400×600 and uses `slice` (scale to COVER), which on a
         narrow section magnifies it several times over — so a phone-shaped
         copy is swapped in instead, drawn at 390×1600 and therefore rendered
         at roughly its true scale. */
      .value-network-bg { inset: 0; }
      .value-net--wide  { display: none; }
      .value-net--tall  { display: block; }

      /* Tighter logo slots. Partly design — 220px slots show barely two logos
         at a time on a phone — and partly to shrink the animated track, which
         the compositor has to hold as a single texture: 46 slots at 220px is
         ~10,000px, i.e. ~30,000px at a phone's 3x ratio, past the texture
         limit of most mobile GPUs. This roughly halves it. See the watchdog in
         main.js for the belt-and-braces half of this. */
      .marquee-item { width: 128px; height: 74px; }
      .marquee-item img { height: 42px; max-width: 100px; }
      .marquee-outer { padding-bottom: 30px; }
      .marquee-outer::before, .marquee-outer::after { width: 60px; }

      /* AI demo: the showcase renders a fixed-size frame, so on phones we load
         its 560x900 portrait variant (?narrow=1) at native size and scale the
         whole iframe down to the column width. Scaling the element keeps the
         demo's proportions and type hierarchy intact — squeezing the 1240px
         landscape frame into 390px made it an unreadable letterboxed sliver.
         --demo-scale / --demo-h are set by the boot script in index.html,
         which is what knows the real column width. */
      .ai-agent-demo {
        margin-top: 28px;
        height: var(--demo-h, 560px);
      }
      .ai-agent-frame {
        position: absolute;
        top: 0;
        left: 0;
        width: 560px;
        height: 900px;
        transform: scale(var(--demo-scale, 1));
        transform-origin: top left;
      }
    }

    /* ═══════════════════════════════════════════════════
       HERO ENTRANCE — choreographed sequence on load
    ════════════════════════════════════════════════════ */
    .hero__eyebrow {
      opacity: 0;
      filter: blur(10px);
      transform: translateX(30px);
      animation: heroSide 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards;
    }
    .hero__heading {
      opacity: 0;
      filter: blur(16px);
      transform: translateY(36px) scale(0.97);
      animation: heroUp 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.4s forwards;
    }
    /* Sits between the heading (0.4s) and the buttons (0.8s) so the hero still
       reads top-to-bottom as it arrives. */
    .hero__subheading {
      opacity: 0;
      filter: blur(10px);
      transform: translateY(22px);
      animation: heroFade 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.62s forwards;
    }
    .hero__actions {
      opacity: 0;
      filter: blur(10px);
      transform: translateY(22px);
      animation: heroFade 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.8s forwards;
    }
    .hero__visual {
      opacity: 0;
      filter: blur(18px);
      transform: scale(0.88);
      animation: heroScale 1.3s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards;
    }
    @keyframes heroSide {
      to { opacity: 1; filter: blur(0); transform: translateX(0); }
    }
    @keyframes heroUp {
      to { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); }
    }
    @keyframes heroFade {
      to { opacity: 1; filter: blur(0); transform: translateY(0); }
    }
    @keyframes heroScale {
      to { opacity: 1; filter: blur(0); transform: scale(1); }
    }

    /* ═══════════════════════════════════════════════════
       GLOBAL SCROLL REVEAL — Blur Reveal
       Applied automatically via JS: data-reveal attribute
    ════════════════════════════════════════════════════ */
    [data-reveal] {
      opacity: 0;
      filter: blur(14px);
      transform: translateY(72px) scale(0.94);
      transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1),
                  filter 1.2s cubic-bezier(0.16, 1, 0.3, 1),
                  transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
      will-change: opacity, filter, transform;
    }
    [data-reveal].is-visible {
      opacity: 1;
      filter: blur(0);
      transform: translateY(0) scale(1);
    }
    /* Stagger children inside grid/group containers */
    [data-reveal-stagger] > [data-reveal]:nth-child(1) { transition-delay: 0ms; }
    [data-reveal-stagger] > [data-reveal]:nth-child(2) { transition-delay: 200ms; }
    [data-reveal-stagger] > [data-reveal]:nth-child(3) { transition-delay: 400ms; }
    [data-reveal-stagger] > [data-reveal]:nth-child(4) { transition-delay: 600ms; }
    [data-reveal-stagger] > [data-reveal]:nth-child(5) { transition-delay: 800ms; }
    [data-reveal-stagger] > [data-reveal]:nth-child(6) { transition-delay: 1000ms; }

    /* ═══════════════════════════════════════════════════
       GLOBAL CARD HOVER — lift + glare highlight
       Applied via JS: .hover-glow class
    ════════════════════════════════════════════════════ */
    .hover-glow {
      position: relative;
      --glare-x: 50%;
      --glare-y: 50%;
      --glare-opacity: 0;
      transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
                  box-shadow 0.28s cubic-bezier(0.22, 1, 0.36, 1),
                  border-color 0.28s ease;
    }
    .hover-glow:hover {
      transform: translateY(-4px);
      box-shadow: 0 18px 50px -10px rgba(0, 180, 160, 0.18),
                  0 8px 20px rgba(8, 16, 50, 0.08);
      border-color: rgba(0, 212, 180, 0.3);
    }
    /* Colored radial glare — visible on BOTH light and dark backgrounds */
    .hover-glow::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      pointer-events: none;
      background: radial-gradient(
        ellipse 260px 200px at var(--glare-x) var(--glare-y),
        rgba(0, 212, 180, 0.10),
        rgba(124, 58, 237, 0.04) 40%,
        transparent 70%
      );
      opacity: var(--glare-opacity);
      transition: opacity 0.35s ease;
      z-index: 4;
    }

    /* ═══════════════════════════════════════════════════
       BUTTON — Ripple + Lift (extends existing .btn)
    ════════════════════════════════════════════════════ */
    .btn {
      position: relative;
      overflow: hidden;
    }
    .btn::after {
      content: '';
      position: absolute;
      top: 50%; left: 50%;
      width: 0; height: 0;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.22);
      transform: translate(-50%, -50%);
      opacity: 0;
      transition: width 0.55s ease, height 0.55s ease, opacity 0.55s ease;
      pointer-events: none;
    }
    .btn--outline::after {
      background: rgba(0, 212, 180, 0.15);
    }
    .btn:hover::after {
      width: 300px; height: 300px;
      opacity: 1;
    }
    .btn:active {
      transform: translateY(0) !important;
    }

    /* ═══════════════════════════════════════════════════
       ACCESSIBILITY — reduced motion
    ════════════════════════════════════════════════════ */
    @media (prefers-reduced-motion: reduce) {
      /* The logo strip keeps moving, at half speed. Stopping it dead leaves a
         row of logos clipped mid-slot, which reads as a broken widget rather
         than a calm page — and this is slow, linear, horizontal motion in a
         90px strip, not the parallax/zoom kind this query exists to spare
         people. Everything else here still stops. */
      .marquee-track { animation-duration: 120s; }
      .btn, .tool-card, .project-card, .value-card, .process-step, .dl-comp-card { transition: none; }
      [data-reveal] {
        opacity: 1 !important;
        filter: none !important;
        transform: none !important;
        transition: none !important;
      }
      .hover-glow {
        transform: none !important;
        transition: none !important;
      }
      .hover-glow::after { display: none !important; }
      .btn::after { display: none !important; }
      .hero__eyebrow, .hero__heading, .hero__subheading, .hero__actions, .hero__visual {
        opacity: 1 !important;
        filter: none !important;
        transform: none !important;
        animation: none !important;
      }
      .hero__visual::before {
        animation: none !important;
        opacity: 0.7 !important;
      }
      .process-step__anim,
      .process-step__title,
      .process-step__desc {
        transform: none !important;
      }
    }