:root {
    --ink: #0b1023;
    --ink-2: #1e2a52;
    --accent: #2563eb;
    --accent-2: #38bdf8;
    --accent-3: #818cf8;
    --muted: #5b6678;
    --line: rgba(15,23,42,.08);
    --line-strong: rgba(15,23,42,.12);
    --bg: #fbfcff;
    --surface: rgba(255,255,255,.72);
    --max: 1120px;
    --radius: 16px;
    --radius-lg: 22px;
    --shadow: 0 1px 2px rgba(15,23,42,.04), 0 12px 32px rgba(15,23,42,.06);
    --shadow-lift: 0 4px 10px rgba(15,23,42,.05), 0 22px 52px rgba(15,23,42,.10);
    --ease: cubic-bezier(.22,.61,.36,1);
    --ease-out: cubic-bezier(.16,1,.3,1);
  }
  * { box-sizing: border-box; }
  html {
    scroll-behavior: smooth;
    scroll-padding-top: 84px;
  }
  body {
    margin: 0;
    font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
  }

  /* Continuous page-wide aurora background.
     A single fixed layer that drifts behind every section - no hard color
     changes between sections. */
  body::before {
    content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
    background:
      radial-gradient(60% 50% at 88% 12%, rgba(56,189,248,.22), transparent 70%),
      radial-gradient(55% 45% at 10% 28%, rgba(37,99,235,.18), transparent 70%),
      radial-gradient(50% 45% at 78% 60%, rgba(129,140,248,.16), transparent 70%),
      radial-gradient(50% 45% at 18% 86%, rgba(56,189,248,.15), transparent 70%),
      linear-gradient(180deg, #fbfcff 0%, #f7faff 50%, #fbfcff 100%);
    animation: aurora 32s ease-in-out infinite alternate;
  }
  body::after {
    /* Soft dot grid for subtle texture. */
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background-image: radial-gradient(rgba(15,23,42,.05) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: linear-gradient(180deg, transparent 0, #000 8%, #000 92%, transparent 100%);
    opacity: .5;
  }
  @keyframes aurora {
    0%   { transform: translate3d(0,0,0)   scale(1);     filter: hue-rotate(0deg); }
    50%  { transform: translate3d(-20px,15px,0) scale(1.05); }
    100% { transform: translate3d(15px,-10px,0) scale(.98); filter: hue-rotate(-8deg); }
  }

  a { color: var(--accent); text-decoration: none; transition: color .2s var(--ease); }
  a:hover { text-decoration: underline; }
  .wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; position: relative; }

  /* Scroll reveal - JS adds `.in` via IntersectionObserver as each element
     scrolls into view (works in every browser, incl. Safari). The `html.js`
     guard means visitors without JS get the final, fully-visible layout -
     nothing is ever permanently hidden. A clear fade + lift makes the
     transition obvious; a safety timer (see JS) reveals anything that hasn't
     fired within a few seconds, so content can never get stuck invisible. */
  html.js .reveal {
    opacity: 0;
    transform: translateY(56px) scale(.96);
    transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
    will-change: opacity, transform;
  }
  html.js .reveal.in { opacity: 1; transform: none; }
  html.js .reveal.delay-1 { transition-delay: .06s; }
  html.js .reveal.delay-2 { transition-delay: .12s; }
  html.js .reveal.delay-3 { transition-delay: .18s; }
  html.js .reveal.delay-4 { transition-delay: .24s; }
  html.js .reveal.delay-5 { transition-delay: .30s; }
  html.js .reveal.delay-6 { transition-delay: .36s; }
  html.js .reveal.delay-7 { transition-delay: .42s; }
  html.js .reveal.delay-8 { transition-delay: .48s; }

  /* Header */
  header {
    position: sticky; top: 0; z-index: 50;
    background: rgba(251,252,255,.72);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid transparent;
    transition: border-color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
  }
  header.scrolled {
    border-bottom-color: var(--line);
    box-shadow: 0 6px 20px rgba(15,23,42,.05);
    background: rgba(251,252,255,.88);
  }
  .nav { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; }
  .brand { display: flex; align-items: center; gap: 12px; color: var(--ink-2); transition: transform .25s var(--ease); }
  .brand img { height: 54px; width: auto; display: block; }
  @media (max-width: 680px) { .brand img { height: 44px; } }
  .brand:hover { transform: translateY(-1px); text-decoration: none; }
  nav.menu a {
    color: var(--ink-2); font-weight: 500; margin-left: 28px; font-size: 15px;
    position: relative; padding: 4px 0;
  }
  nav.menu a::after {
    content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    transition: width .3s var(--ease-out);
    border-radius: 2px;
  }
  nav.menu a:hover { color: var(--accent); text-decoration: none; }
  nav.menu a:hover::after { width: 100%; }
  /* The mobile hide for nav.menu lives in the last @media block (below) so it
     wins over the unconditional `nav.menu { display: flex }` that follows. */

  /* Services dropdown: appears on hover/focus, modern glassy card. */
  nav.menu { display: flex; align-items: center; }
  .menu .has-dropdown { position: relative; display: flex; align-items: center; }
  .menu .caret { margin-left: 5px; font-size: 10px; line-height: 1; opacity: .65; transition: transform .25s var(--ease); display: inline-block; }
  .menu .has-dropdown:hover .caret { transform: rotate(180deg); opacity: 1; }
  .menu .dropdown {
    position: absolute; top: 100%; left: 50%;
    transform: translateX(-50%) translateY(8px);
    min-width: 230px; margin-top: 10px; padding: 8px;
    background: rgba(255,255,255,.92);
    backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px);
    border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lift);
    display: flex; flex-direction: column;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .22s var(--ease-out), transform .22s var(--ease-out), visibility .22s;
    z-index: 60;
  }
  /* invisible bridge so the cursor can cross the gap without the menu closing */
  .menu .dropdown::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
  .menu .has-dropdown:hover .dropdown,
  .menu .has-dropdown:focus-within .dropdown {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }
  .menu .dropdown a {
    margin: 0; padding: 9px 12px; border-radius: 9px;
    font-size: 14px; font-weight: 500; color: var(--ink-2); white-space: nowrap;
  }
  .menu .dropdown a::after { display: none; }
  .menu .dropdown a:hover { background: var(--surface); color: var(--accent); }
  .menu .dropdown .dd-all {
    color: var(--accent); font-weight: 600;
    margin-top: 4px; padding-top: 11px; border-top: 1px solid var(--line);
    border-radius: 0 0 9px 9px;
  }

  /* Right side of the header: nav + language toggle */
  .nav-right { display: flex; align-items: center; }
  .lang { display: inline-flex; align-items: center; gap: 2px; margin-left: 22px; font-size: 13px; font-weight: 700; }
  .lang a { color: var(--muted); padding: 5px 8px; border-radius: 8px; transition: color .2s var(--ease), background .2s var(--ease); }
  .lang a:hover { color: var(--ink-2); text-decoration: none; }
  .lang a.active { color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
  .lang a.active:hover { color: #fff; }
  @media (max-width: 680px) { .lang { margin-left: 0; } }

  /* Hamburger toggle + mobile nav drawer. The button is hidden on desktop and
     revealed (with nav.menu hidden) in the last @media block below. */
  .nav-toggle {
    display: none; width: 42px; height: 42px; padding: 0; margin-left: 14px;
    align-items: center; justify-content: center; flex-direction: column;
    background: transparent; border: 1px solid var(--line); border-radius: 10px;
    color: var(--ink-2); cursor: pointer;
    transition: border-color .2s var(--ease), background .2s var(--ease);
  }
  .nav-toggle:hover { border-color: var(--muted); }
  .nav-toggle span {
    display: block; width: 20px; height: 2px; border-radius: 2px; background: currentColor;
    transition: transform .25s var(--ease), opacity .2s var(--ease);
  }
  .nav-toggle span + span { margin-top: 5px; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .mnav { position: fixed; inset: 0; z-index: 45; }
  .mnav[hidden] { display: none; }
  .mnav-backdrop {
    position: absolute; inset: 0; background: rgba(15,23,42,.34);
    opacity: 0; transition: opacity .25s var(--ease);
  }
  .mnav-panel {
    position: absolute; top: 0; left: 0; right: 0;
    max-height: 100dvh; overflow-y: auto;
    padding: calc(env(safe-area-inset-top, 0px) + 84px) 30px 26px;
    background: rgba(251,252,255,.97);
    backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--line); box-shadow: var(--shadow-lift);
    display: flex; flex-direction: column;
    transform: translateY(-14px); opacity: 0;
    transition: transform .28s var(--ease-out), opacity .28s var(--ease-out);
  }
  .mnav.open .mnav-backdrop { opacity: 1; }
  .mnav.open .mnav-panel { transform: translateY(0); opacity: 1; }
  .mnav-item {
    font-size: 19px; font-weight: 600; color: var(--ink-2);
    padding: 15px 2px; border-bottom: 1px solid var(--line);
  }
  .mnav-item:hover { color: var(--accent); text-decoration: none; }
  .mnav-sub {
    font-size: 15px; color: var(--muted);
    padding: 12px 2px 12px 18px; border-bottom: 1px solid var(--line);
  }
  .mnav-sub:hover { color: var(--accent); text-decoration: none; }
  .mnav-lang { display: flex; gap: 10px; margin-top: 20px; }
  .mnav-lang a {
    flex: 1; text-align: center; padding: 11px 0; border-radius: 10px;
    border: 1px solid var(--line); font-weight: 700; font-size: 15px; color: var(--muted);
  }
  .mnav-lang a:hover { color: var(--ink-2); text-decoration: none; }
  .mnav-lang a.active {
    color: #fff; border-color: transparent;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
  }
  /* While the drawer is open: lock scroll and drop the floating WhatsApp button. */
  html.mnav-open { overflow: hidden; }
  html.mnav-open .wa-fab { display: none; }
  html.reduce-motion .mnav-backdrop,
  html.reduce-motion .mnav-panel { transition: none; }

  /* Floating WhatsApp contact button */
  .wa-fab {
    position: fixed; right: 22px; bottom: 22px; z-index: 90;
    display: inline-flex; align-items: center; gap: 10px;
    padding: 12px 18px 12px 14px; border-radius: 999px;
    background: #25d366; color: #fff; font-weight: 600; font-size: 15px;
    box-shadow: 0 8px 24px rgba(37,211,102,.42), 0 2px 6px rgba(0,0,0,.15);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease);
    animation: waIn .5s var(--ease-out) .6s both;
  }
  .wa-fab:hover { transform: translateY(-3px) scale(1.03); text-decoration: none; box-shadow: 0 12px 30px rgba(37,211,102,.55); }
  .wa-fab svg { width: 26px; height: 26px; flex: none; }
  .wa-fab::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1;
    box-shadow: 0 0 0 0 rgba(37,211,102,.5);
    animation: waPulse 2.8s ease-out infinite;
  }
  @keyframes waPulse { 0% { box-shadow: 0 0 0 0 rgba(37,211,102,.5); } 70% { box-shadow: 0 0 0 18px rgba(37,211,102,0); } 100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); } }
  @keyframes waIn { from { opacity: 0; transform: translateY(16px) scale(.9); } to { opacity: 1; transform: none; } }
  @media (max-width: 560px) { .wa-fab { right: 16px; bottom: 16px; padding: 14px; } .wa-fab .wa-label { display: none; } }

  /* Cookie-consent banner (analytics). Shown only when GA is configured and
     the visitor hasn't chosen yet; GA loads only after Accept. */
  .consent {
    position: fixed; left: 22px; bottom: 22px; z-index: 95;
    max-width: 380px; padding: 18px 18px 16px;
    background: rgba(255,255,255,.97);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow-lift);
    font-size: 14px; color: var(--ink-2);
    display: none;
  }
  .consent.show { display: block; animation: waIn .4s var(--ease-out) both; }
  .consent p { margin: 0 0 14px; line-height: 1.55; color: var(--muted); }
  .consent .row { display: flex; gap: 10px; }
  .consent button {
    flex: 1; padding: 9px 14px; border-radius: 10px; font-weight: 600; font-size: 14px;
    cursor: pointer; transition: transform .2s var(--ease), filter .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
  }
  .consent .accept { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; border: none; }
  .consent .accept:hover { transform: translateY(-1px); filter: brightness(1.06); }
  .consent .decline { background: #fff; color: var(--ink-2); border: 1px solid var(--line-strong); }
  .consent .decline:hover { border-color: var(--accent); color: var(--accent); }
  @media (max-width: 560px) { .consent { left: 12px; right: 12px; bottom: 12px; max-width: none; } }
  /* While the banner is open, hide the WhatsApp button so they don't overlap. */
  html.consent-open .wa-fab { display: none; }

  /* Hero */
  .hero { position: relative; padding: 104px 0 92px; }
  .hero h1 {
    /* Smaller + wider column => headline reads horizontally (fewer lines). */
    font-size: clamp(28px, 3.4vw, 44px);
    line-height: 1.14;
    letter-spacing: -0.018em;
    margin: 0 0 22px;
    color: var(--ink);
    max-width: none;
    font-weight: 700;
  }
  .hero h1 .grad {
    background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 50%, var(--accent-3) 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: shimmer 8s linear infinite;
  }
  @keyframes shimmer { to { background-position: 200% 0; } }
  .hero p.lead {
    font-size: clamp(18px, 1.7vw, 21px);
    color: var(--muted); max-width: 720px;
    margin: 0 0 40px;
    line-height: 1.6;
  }
  .cta-row { display: flex; flex-wrap: wrap; gap: 12px; }
  .btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 14px 24px; border-radius: 12px; font-weight: 600; font-size: 15px;
    transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
  }
  .btn.primary {
    background: linear-gradient(135deg, var(--ink-2), #2a3a6e);
    color: #fff;
    box-shadow: 0 6px 22px rgba(30,42,82,.28);
  }
  .btn.primary:hover {
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    text-decoration: none; transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(37,99,235,.35);
  }
  .btn.ghost {
    background: rgba(255,255,255,.7);
    color: var(--ink-2);
    border: 1px solid var(--line-strong);
    backdrop-filter: blur(8px);
  }
  .btn.ghost:hover {
    border-color: var(--accent);
    color: var(--accent);
    text-decoration: none;
    transform: translateY(-2px);
    background: #fff;
    box-shadow: var(--shadow);
  }
  .btn .arr { transition: transform .25s var(--ease); display: inline-block; }
  .btn:hover .arr { transform: translateX(4px); }

  /* Hero two-column layout + inline illustration.
     Wider text column keeps the headline horizontal; the art sits lower
     (margin-top) so it doesn't crowd the top of the copy. */
  .hero-grid { display: grid; grid-template-columns: 1.35fr 0.65fr; gap: 40px; align-items: start; }
  .hero-copy { min-width: 0; }
  .hero-art, .about-art { position: relative; }
  .hero-art { margin-top: 64px; }
  .hero-art svg, .about-art svg { width: 100%; height: auto; display: block; overflow: visible; }
  @media (max-width: 940px) {
    .hero { padding: 88px 0 72px; }
    .hero-grid { grid-template-columns: 1fr; gap: 24px; }
    .hero-art { max-width: 380px; margin: 8px auto 0; }
  }

  /* Gentle, looping motion used inside the illustrations. */
  .float-slow { animation: floatY 7s var(--ease) infinite alternate; transform-box: fill-box; transform-origin: center; }
  .float-mid  { animation: floatY 5.5s var(--ease) .4s infinite alternate; transform-box: fill-box; transform-origin: center; }
  .float-fast { animation: floatY 4.6s var(--ease) .2s infinite alternate; transform-box: fill-box; transform-origin: center; }
  @keyframes floatY { to { transform: translateY(-12px); } }
  .pulse-node { animation: pulseNode 3s ease-in-out infinite; }
  @keyframes pulseNode { 0%,100% { opacity: .45; } 50% { opacity: 1; } }
  .dash-flow { stroke-dasharray: 6 7; animation: dashMove 2.6s linear infinite; }
  @keyframes dashMove { to { stroke-dashoffset: -26; } }

  /* Stats band - animated count-up numbers */
  .stats { padding: 8px 0 0; }
  .stats .grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
  @media (max-width: 760px) { .stats .grid4 { grid-template-columns: repeat(2, 1fr); } }
  .stat {
    text-align: center; padding: 26px 18px; border-radius: var(--radius);
    background: rgba(255,255,255,.62); border: 1px solid var(--line);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    transition: transform .35s var(--ease), box-shadow .35s var(--ease);
  }
  .stat:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
  .stat .num {
    font-size: clamp(32px, 4.4vw, 48px); font-weight: 800; letter-spacing: -.02em;
    line-height: 1;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    -webkit-background-clip: text; background-clip: text; color: transparent;
    font-variant-numeric: tabular-nums;
  }
  .stat .label { margin-top: 10px; color: var(--muted); font-size: 14px; font-weight: 500; }

  /* Sections */
  section { position: relative; padding: 88px 0; }
  section h2 {
    font-size: clamp(28px, 3.4vw, 42px); letter-spacing: -0.02em;
    margin: 0 0 14px; color: var(--ink); font-weight: 700;
    line-height: 1.15;
  }
  section .kicker {
    font-size: 13px; font-weight: 600; color: var(--accent);
    text-transform: uppercase; letter-spacing: .14em;
  }
  section p.intro {
    color: var(--muted); max-width: 720px;
    margin: 0 0 56px; font-size: 17px; line-height: 1.65;
  }

  /* Services grid */
  .grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
  .card {
    position: relative;
    background: rgba(255,255,255,.78);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 30px 28px;
    transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease), background .4s var(--ease);
    overflow: hidden;
  }
  .card::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit;
    background: radial-gradient(420px 200px at var(--mx,50%) var(--my,0%), rgba(56,189,248,.14), transparent 60%);
    opacity: 0; transition: opacity .5s var(--ease); pointer-events: none;
  }
  .card::after {
    /* Hairline accent on top edge. */
    content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(37,99,235,.0), transparent);
    transition: background .4s var(--ease);
  }
  .card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lift);
    border-color: rgba(37,99,235,.32);
    background: rgba(255,255,255,.92);
  }
  .card:hover::before { opacity: 1; }
  .card:hover::after { background: linear-gradient(90deg, transparent, rgba(37,99,235,.5), transparent); }
  .card .icon {
    width: 48px; height: 48px; border-radius: 13px;
    display: grid; place-items: center;
    background: linear-gradient(135deg, rgba(37,99,235,.14), rgba(56,189,248,.20));
    color: var(--ink-2); margin-bottom: 18px;
    transition: transform .4s var(--ease), background .4s var(--ease);
  }
  .card:hover .icon {
    transform: translateY(-2px) rotate(-4deg) scale(1.05);
    background: linear-gradient(135deg, rgba(37,99,235,.22), rgba(56,189,248,.32));
  }
  .card h3 { margin: 0 0 10px; font-size: 18px; color: var(--ink); font-weight: 600; letter-spacing: -.01em; }
  .card .card-more { margin: 14px 0 0; }
  .card .card-more a { color: var(--accent); font-weight: 600; font-size: 14px; }
  .card .card-more a:hover { text-decoration: none; }
  .card:hover .card-more .arr { transform: translateX(3px); }
  .card p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.6; }

  /* About - no hard background; just an unobtrusive divider */
  .about .cols { display: grid; gap: 56px; grid-template-columns: 1.2fr .8fr; align-items: start; }
  @media (max-width: 820px) { .about .cols { grid-template-columns: 1fr; } }
  .about ul {
    padding-left: 0; list-style: none; margin: 28px 0 0;
    display: grid; gap: 14px;
  }
  .about ul li {
    display: flex; align-items: flex-start; gap: 12px;
    color: var(--ink); font-size: 15.5px; line-height: 1.55;
  }
  .about ul li::before {
    content: ""; flex: 0 0 18px; width: 18px; height: 18px;
    /* center the 18px mark on the ~24px first text line */
    margin-top: calc((1.55em - 18px) / 2);
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    border-radius: 6px;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M9 16.2l-3.5-3.6L4 14.1 9 19l11-11-1.5-1.4z'/></svg>") center/contain no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M9 16.2l-3.5-3.6L4 14.1 9 19l11-11-1.5-1.4z'/></svg>") center/contain no-repeat;
  }
  /* Contact */
  .contact .grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
  .contact .card a { color: var(--ink-2); font-weight: 600; word-break: break-word; }
  .contact .card a:hover { color: var(--accent); text-decoration: none; }

  /* Footer */
  footer {
    position: relative;
    background: linear-gradient(180deg, #0b1023 0%, #070a1a 100%);
    color: #cbd5e1; padding: 44px 0 36px; font-size: 14px;
    margin-top: 60px;
  }
  footer::before {
    /* Thin gradient hairline marking the start of the footer. */
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(56,189,248,.5), rgba(129,140,248,.5), transparent);
  }
  footer a { color: #cbd5e1; }
  footer a:hover { color: #fff; }
  footer .fwrap {
    display: flex; flex-wrap: wrap; gap: 16px;
    justify-content: space-between; align-items: center;
  }
  footer .legal { color: #8a96a8; font-size: 13px; }

  /* ─── Scroll-driven flow animations ────────────────────────────────────
     Uses native CSS scroll-timeline / view-timeline where supported
     (Chrome 115+, Edge 115+, Firefox 154+). Browsers without support get
     the static layout - content remains fully readable. */

  /* Slim gradient progress bar pinned to the top of the viewport. */
  .scroll-progress {
    position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 100;
    background: linear-gradient(90deg, var(--accent), var(--accent-2), var(--accent-3));
    transform-origin: 0 50%; transform: scaleX(0);
    pointer-events: none;
  }
  @supports (animation-timeline: scroll()) {
    .scroll-progress {
      animation: grow linear; animation-timeline: scroll(root block);
    }
  }
  @keyframes grow { to { transform: scaleX(1); } }

  /* Scroll-linked parallax: the aurora drifts a touch as you scroll. */
  @supports (animation-timeline: scroll()) {
    body::before {
      animation: aurora 32s ease-in-out infinite alternate,
                 parallax linear;
      animation-timeline: auto, scroll(root block);
      animation-range: auto, 0% 100%;
    }
    @keyframes parallax {
      from { transform: translateY(-4%) scale(1); }
      to   { transform: translateY( 4%) scale(1.04); }
    }
  }

  /* Reduced motion is OPT-IN via a JS flag (RESPECT_REDUCED_MOTION in the
     script below). When that flag is true AND the OS requests reduced motion,
     JS adds `.reduce-motion` to <html> and we calm the ambient background
     motion only. The flag is currently false, so this never applies and every
     visitor gets the full animation set. Flip the flag to honour the OS. */
  html.reduce-motion body::before { animation: none !important; }   /* aurora drift + parallax */
  html.reduce-motion .hero h1 .grad { animation: none !important; } /* headline shimmer */
  html.reduce-motion .wa-fab, html.reduce-motion .wa-fab::before { animation: none !important; }

  /* ── Mobile tuning ─────────────────────────────────────────────────────
     Tighter vertical rhythm on phones and a centred hero (incl. the CTA
     buttons). Placed last so it overrides the wider-breakpoint rules above. */
  @media (max-width: 680px) {
    section { padding: 50px 0; }
    section p.intro { margin-bottom: 28px; }
    .hero { padding: 72px 0 52px; }
    .hero-copy { text-align: center; }
    .cta-row { justify-content: center; }
    .hero-art { margin-top: 22px; }
    .about .cols { gap: 26px; }
    footer { margin-top: 34px; padding: 30px 0 28px; }
    /* A little more breathing room for the logo / language toggle on phones. */
    header .wrap { padding-left: 30px; padding-right: 30px; }
    .nav { padding: 17px 0; }
    /* Collapse the inline nav + header language toggle into the hamburger drawer.
       Declared here (last block) so it beats the unconditional `nav.menu { display:
       flex }` earlier in the file. */
    nav.menu { display: none; }
    .nav-toggle { display: inline-flex; }
  }

  /* Full-height layout for short pages (e.g. 404): the main block grows to fill
     the viewport and the footer is pinned to the bottom of the screen. Applied
     only when <body class="fill"> is set, so the homepage is unaffected. */
  body.fill { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
  body.fill .hero { flex: 1 0 auto; display: flex; align-items: center; }
  body.fill footer { margin-top: 0; }