@charset "UTF-8";
/* ==========================================================================
   Voops - design system
   Dark, minimal, brand-led. Purple→magenta comes from the logo mark.

   Every colour is a token. That is what makes the accessibility contrast mode
   actually work: the previous stylesheet swapped two variables while ~120
   hardcoded rgba() literals ignored them.

   All directional CSS uses logical properties (inline-start/end), so the RTL
   layout is correct by construction and an LTR build costs nothing.
   ========================================================================== */

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

/* ========================================================================== */
@layer tokens {

  :root {
    /* Surfaces */
    --bg:            #0A0A0F;
    --bg-elevated:   #0E0E14;
    --surface:       #131319;
    --surface-2:     #1A1A22;
    --surface-3:     #22222C;
    --border:        rgb(255 255 255 / .09);
    --border-strong: rgb(255 255 255 / .17);

    /* Text - all verified ≥4.5:1 on --bg */
    --text:   #F4F4F6;
    --text-2: #A6A6B5;
    --text-3: #7E7E8E;

    /* Brand - sampled from the Voops logo */
    --brand-violet:  #8B2D9E;
    --brand-magenta: #D6197D;
    --accent:        #E23E9E;
    --accent-strong: #F26DB6;
    --accent-dim:    rgb(226 62 158 / .12);
    --accent-ring:   rgb(226 62 158 / .38);

    --grad:      linear-gradient(135deg, var(--brand-violet), var(--brand-magenta));
    --grad-text: linear-gradient(100deg, #C77DFF 0%, #FF5FA8 100%);
    --grad-soft: linear-gradient(135deg, rgb(139 45 158 / .16), rgb(214 25 125 / .16));

    --whatsapp: #25D366;
    --ok:       #34D399;
    --warn:     #FBBF24;
    --danger:   #FB7185;

    /* Type */
    --font: "Heebo", ui-sans-serif, system-ui, "Segoe UI", Arial, sans-serif;

    --step--1: clamp(.8125rem, .79rem + .12vw, .875rem);
    --step-0:  clamp(1rem,     .97rem + .16vw, 1.0625rem);
    --step-1:  clamp(1.0625rem, 1.02rem + .25vw, 1.1875rem);
    --step-2:  clamp(1.25rem,  1.16rem + .45vw, 1.5rem);
    --step-3:  clamp(1.5rem,   1.32rem + .9vw,  2rem);
    --step-4:  clamp(1.875rem, 1.55rem + 1.6vw, 2.75rem);
    --step-5:  clamp(2.25rem,  1.75rem + 2.5vw, 3.5rem);
    --step-6:  clamp(2.625rem, 1.9rem + 3.6vw,  4.5rem);

    /* Space - 8pt grid */
    --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
    --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 2.5rem;  --sp-8: 3rem;
    --sp-9: 4rem;    --sp-10: 5rem;   --sp-11: 6.5rem; --sp-12: 8rem;

    --section: clamp(3.5rem, 2rem + 7vw, 7rem);
    --gutter:  clamp(1.125rem, .6rem + 2.6vw, 2.5rem);
    --container: 1180px;
    --container-narrow: 46rem;

    /* Shape */
    --r-sm: .5rem;  --r: .875rem;  --r-lg: 1.25rem;  --r-xl: 1.75rem;  --r-full: 999px;

    --shadow-sm: 0 1px 2px rgb(0 0 0 / .4);
    --shadow:    0 10px 30px -12px rgb(0 0 0 / .7);
    --shadow-lg: 0 28px 70px -24px rgb(0 0 0 / .8);

    /* Motion */
    --ease: cubic-bezier(.16, 1, .3, 1);
    --dur:  .45s;

    /* One z-index scale, no ad-hoc values anywhere else */
    --z-header: 100;
    --z-float:  200;
    --z-panel:  300;
    --z-modal:  400;
    --z-skip:   500;
  }

  /* --- Accessibility: high contrast ------------------------------------- */
  :root[data-a11y-contrast] {
    --bg: #000; --bg-elevated: #000; --surface: #000; --surface-2: #000; --surface-3: #0A0A0A;
    --border: #FFF; --border-strong: #FFF;
    --text: #FFF; --text-2: #FFF; --text-3: #F0F0F0;
    --accent: #FFE81A; --accent-strong: #FFF67A;
    --accent-dim: rgb(255 232 26 / .22); --accent-ring: rgb(255 232 26 / .6);
    --grad: none; --grad-soft: none;
    --shadow-sm: none; --shadow: none; --shadow-lg: none;
  }
  /* Anything painted with background-clip:text must be reverted explicitly -
     a token swap alone cannot undo a gradient fill. */
  :root[data-a11y-contrast] .gradient-text,
  :root[data-a11y-contrast] .process__n {
    background: none !important;
    color: #FFE81A !important;
    -webkit-text-fill-color: #FFE81A !important;
  }
  :root[data-a11y-contrast] .aurora,
  :root[data-a11y-contrast] .hero::before { display: none !important; }
  :root[data-a11y-contrast] .btn--primary { background: #FFE81A !important; color: #000 !important; }

  /* --- Accessibility: emphasise links ----------------------------------- */
  :root[data-a11y-links] a:not(.btn) {
    text-decoration: underline !important;
    text-underline-offset: .2em;
    text-decoration-thickness: 2px !important;
    color: var(--accent) !important;
  }

  /* --- Accessibility: readable font ------------------------------------- */
  :root[data-a11y-font="readable"] { --font: "Arial", "Helvetica", sans-serif; }
  :root[data-a11y-font="readable"] body { letter-spacing: .015em; word-spacing: .08em; line-height: 1.85; }

  /* --- Accessibility: larger cursor ------------------------------------- */
  :root[data-a11y-cursor="big"],
  :root[data-a11y-cursor="big"] * {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M8 4l30 15-13 4-4 13z' fill='%23fff' stroke='%23000' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") 6 4, auto;
  }
}

/* ========================================================================== */
@layer reset {

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

  html {
    font-size: calc(100% * var(--a11y-scale, 1));
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-block-start: 6rem;
    /* `clip` rather than `hidden`: it prevents the sideways scroll the parked
       off-canvas panel would otherwise create in RTL, without turning the root
       into a scroll container (which would break the sticky header). */
    overflow-x: clip;
  }

  body {
    min-height: 100svh;
    overflow-x: clip;
    font-family: var(--font);
    font-size: var(--step-0);
    line-height: 1.75;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  img, svg, video, canvas { display: block; max-width: 100%; }
  img { height: auto; }

  input, button, textarea, select { font: inherit; color: inherit; }
  button { background: none; border: 0; cursor: pointer; }

  a { color: inherit; text-decoration: none; }

  h1, h2, h3, h4, h5, h6 { line-height: 1.15; font-weight: 800; text-wrap: balance; }
  p, li { text-wrap: pretty; }

  ul[class], ol[class] { list-style: none; padding: 0; }

  :where(:focus-visible) {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: var(--r-sm);
  }

  ::selection { background: var(--accent); color: #fff; }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
      animation-duration: .001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .001ms !important;
    }
  }
  :root[data-a11y-motion="off"] *,
  :root[data-a11y-motion="off"] *::before,
  :root[data-a11y-motion="off"] *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ========================================================================== */
@layer base {

  @font-face {
    font-family: "Heebo";
    src: url("../fonts/heebo-hebrew.woff2") format("woff2");
    font-weight: 300 900;
    font-display: swap;
    unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
  }
  @font-face {
    font-family: "Heebo";
    src: url("../fonts/heebo-latin.woff2") format("woff2");
    font-weight: 300 900;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                   U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

  .sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

  .icon {
    display: inline-block;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: middle;
  }
  .icon--brand { fill: currentColor; stroke: none; }

  .skip-link {
    position: fixed;
    inset-block-start: -100%;
    inset-inline-start: 50%;
    translate: 50% 0;
    z-index: var(--z-skip);
    padding: .75rem 1.5rem;
    background: var(--accent);
    color: #fff;
    font-weight: 700;
    border-radius: 0 0 var(--r) var(--r);
  }
  .skip-link:focus { inset-block-start: 0; }

  .gradient-text {
    background: var(--grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}

/* ========================================================================== */
@layer layout {

  .container {
    inline-size: min(100% - var(--gutter) * 2, var(--container));
    margin-inline: auto;
  }
  .container--narrow { --container: var(--container-narrow); }

  .section { padding-block: var(--section); }
  .section--tight { padding-block: calc(var(--section) * .6); }

  .stack > * + * { margin-block-start: var(--flow, 1em); }

  .grid { display: grid; gap: var(--sp-5); }
  .grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); }
  .grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr)); }
  .grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }

  main { display: block; }
}

/* ========================================================================== */
@layer components {

  /* ---------- Ambient background ---------------------------------------- */
  .aurora {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
    /* Static gradients - no infinite animation, no blur() filters to repaint. */
    background:
      radial-gradient(48rem 30rem at 78% -6%,  rgb(139 45 158 / .30), transparent 65%),
      radial-gradient(40rem 26rem at 8% 8%,    rgb(214 25 125 / .20), transparent 62%),
      radial-gradient(52rem 34rem at 50% 108%, rgb(109 60 190 / .16), transparent 68%);
  }
  .aurora::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .55;
    background-image:
      linear-gradient(var(--border) 1px, transparent 1px),
      linear-gradient(90deg, var(--border) 1px, transparent 1px);
    background-size: 5.5rem 5.5rem;
    mask-image: radial-gradient(72% 55% at 50% 0%, #000 0%, transparent 78%);
  }

  /* ---------- Buttons ---------------------------------------------------- */
  .btn {
    --btn-bg: transparent;
    --btn-fg: var(--text);
    --btn-bd: var(--border-strong);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .625rem;
    min-block-size: 3rem;
    padding: .8125rem 1.5rem;
    font-size: var(--step-0);
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    color: var(--btn-fg);
    background: var(--btn-bg);
    border: 1px solid var(--btn-bd);
    border-radius: var(--r-full);
    transition: transform var(--dur) var(--ease), background-color .25s, border-color .25s, color .25s, box-shadow .25s;
  }
  .btn:hover { transform: translateY(-2px); }
  .btn:active { transform: translateY(0); }
  .btn .icon { inline-size: 1.15em; block-size: 1.15em; }

  .btn--primary {
    --btn-bg: var(--grad);
    --btn-fg: #fff;
    --btn-bd: transparent;
    box-shadow: 0 8px 24px -10px rgb(214 25 125 / .8);
  }
  .btn--primary:hover { box-shadow: 0 14px 34px -10px rgb(214 25 125 / .95); }

  .btn--ghost:hover { background: var(--surface-2); border-color: var(--accent); color: var(--accent); }

  .btn--wa { --btn-bg: var(--whatsapp); --btn-fg: #04240F; --btn-bd: transparent; }
  .btn--wa:hover { --btn-bg: #1FBE5B; }

  .btn--lg { min-block-size: 3.5rem; padding-inline: 2rem; font-size: var(--step-1); }
  .btn--block { inline-size: 100%; }

  /* Arrow nudge - in RTL "forward" is toward the inline start. */
  .btn--primary .icon,
  .link-arrow .icon { transition: translate .3s var(--ease); }
  .btn:hover .icon,
  .link-arrow:hover .icon { translate: -.25rem 0; }

  .link-arrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-weight: 700;
    color: var(--accent);
  }
  .link-arrow:hover { color: var(--accent-strong); }

  /* ---------- Header ----------------------------------------------------- */
  .header {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--z-header);
    background: color-mix(in srgb, var(--bg) 78%, transparent);
    backdrop-filter: blur(14px);
    border-block-end: 1px solid transparent;
    transition: border-color .3s, background-color .3s;
  }
  .header.is-stuck {
    background: color-mix(in srgb, var(--bg) 94%, transparent);
    border-block-end-color: var(--border);
  }
  @supports not (backdrop-filter: blur(1px)) { .header { background: var(--bg); } }

  .nav { display: flex; align-items: center; gap: var(--sp-5); min-block-size: 4.75rem; }
  .nav__logo { flex: none; }
  .nav__logo img { block-size: 2.25rem; inline-size: auto; }

  .nav__list { display: flex; align-items: center; gap: .25rem; margin-inline-start: auto; }
  .nav__link {
    position: relative;
    display: block;
    padding: .5rem .875rem;
    font-size: var(--step-0);
    font-weight: 600;
    color: var(--text-2);
    border-radius: var(--r-sm);
    transition: color .25s;
  }
  .nav__link:hover, .nav__link[aria-current] { color: var(--text); }
  .nav__link::after {
    content: "";
    position: absolute;
    inset-block-end: .15rem;
    inset-inline-start: .875rem;
    inline-size: 0;
    block-size: 2px;
    border-radius: 2px;
    background: var(--grad);
    transition: inline-size .3s var(--ease);
  }
  .nav__link:hover::after, .nav__link[aria-current]::after { inline-size: calc(100% - 1.75rem); }

  .nav__cta { flex: none; }

  /* ---------- Burger ----------------------------------------------------- */
  .nav__toggle {
    display: none;
    padding: .625rem;
    margin-inline-start: auto;
    color: var(--text);
    border-radius: var(--r-sm);
  }
  .nav__burger { display: block; inline-size: 24px; block-size: 16px; position: relative; }
  .nav__burger i {
    position: absolute;
    inset-inline: 0;
    block-size: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: translate .35s var(--ease), rotate .35s var(--ease), opacity .2s;
  }
  .nav__burger i:nth-child(1) { inset-block-start: 0; }
  .nav__burger i:nth-child(2) { inset-block-start: 7px; }
  .nav__burger i:nth-child(3) { inset-block-start: 14px; }
  /* Morphs into an X while the panel is open. */
  [aria-expanded="true"] .nav__burger i:nth-child(1) { translate: 0 7px; rotate: 45deg; }
  [aria-expanded="true"] .nav__burger i:nth-child(2) { opacity: 0; }
  [aria-expanded="true"] .nav__burger i:nth-child(3) { translate: 0 -7px; rotate: -45deg; }

  @media (max-width: 60rem) {
    .nav__cta,
    .nav__list { display: none; }
    .nav__toggle { display: block; }
  }

  /* ---------- Mobile menu panel ------------------------------------------ */
  .mmenu {
    position: fixed;
    inset: 0;
    z-index: var(--z-panel);
    display: grid;
    background: var(--bg);
    visibility: hidden;
    opacity: 0;
    /* Wipes open from the top rather than sliding a whole slab across. */
    clip-path: inset(0 0 100% 0);
    transition: clip-path .5s var(--ease), opacity .3s ease, visibility .5s;
  }
  .mmenu::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      radial-gradient(38rem 24rem at 92% -4%, rgb(139 45 158 / .40), transparent 64%),
      radial-gradient(30rem 22rem at 4% 100%, rgb(214 25 125 / .26), transparent 62%);
  }
  .mmenu.is-open { visibility: visible; opacity: 1; clip-path: inset(0 0 0 0); }
  @media (min-width: 60.0625rem) { .mmenu { display: none; } }

  .mmenu__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    inline-size: 100%;
    block-size: 100%;
    padding: 1.15rem var(--gutter) calc(var(--gutter) + env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .mmenu__bar { display: flex; align-items: center; justify-content: space-between; min-block-size: 3.25rem; }
  .mmenu__logo { block-size: 2rem; inline-size: auto; }
  .mmenu__close {
    display: grid;
    place-items: center;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    color: var(--text);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-full);
  }

  .mmenu__nav { margin-block: var(--sp-7) auto; }
  .mmenu__nav ul { display: grid; list-style: none; padding: 0; margin: 0; }
  .mmenu__nav li + li { border-block-start: 1px solid var(--border); }
  .mmenu__nav a {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    padding-block: 1.05rem;
    font-size: clamp(1.5rem, 1.1rem + 2.4vw, 2rem);
    font-weight: 800;
    color: var(--text);
    /* Each row eases in behind the wipe; delays are set per-item below. */
    opacity: 0;
    translate: 0 .75rem;
    transition: opacity .45s var(--ease), translate .45s var(--ease), color .2s;
  }
  .mmenu.is-open .mmenu__nav a { opacity: 1; translate: 0; }
  .mmenu__nav li:nth-child(1) a { transition-delay: .14s; }
  .mmenu__nav li:nth-child(2) a { transition-delay: .20s; }
  .mmenu__nav li:nth-child(3) a { transition-delay: .26s; }
  .mmenu__nav li:nth-child(4) a { transition-delay: .32s; }
  .mmenu__nav li:nth-child(5) a { transition-delay: .38s; }

  .mmenu__num {
    font-size: .75rem;
    font-weight: 700;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
    padding-block-start: .35em;
  }
  .mmenu__label { flex: 1; }
  .mmenu__arrow { color: var(--text-3); transition: translate .3s var(--ease), color .2s; }
  .mmenu__nav a:hover .mmenu__arrow,
  .mmenu__nav a[aria-current] .mmenu__arrow { color: var(--accent); translate: -.35rem 0; }
  .mmenu__nav a[aria-current] { color: var(--accent); }

  .mmenu__foot {
    display: grid;
    gap: .75rem;
    padding-block-start: var(--sp-6);
    border-block-start: 1px solid var(--border);
    opacity: 0;
    translate: 0 .75rem;
    transition: opacity .45s var(--ease) .44s, translate .45s var(--ease) .44s;
  }
  .mmenu.is-open .mmenu__foot { opacity: 1; translate: 0; }
  .mmenu__contact { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); margin-block-start: var(--sp-2); }
  .mmenu__contact a { display: inline-flex; align-items: center; gap: .5rem; min-block-size: 2.75rem; font-size: var(--step--1); color: var(--text-2); }
  .mmenu__contact .icon { color: var(--accent); }

  @media (prefers-reduced-motion: reduce) {
    .mmenu, .mmenu__nav a, .mmenu__foot { transition-duration: .01ms !important; }
    .mmenu__nav a, .mmenu__foot { transition-delay: 0s !important; }
  }
  :root[data-a11y-motion="off"] .mmenu__nav a,
  :root[data-a11y-motion="off"] .mmenu__foot { opacity: 1; translate: 0; }

  /* Latin/number runs inside Hebrew text ("12+", "AA") keep their own order. */
  bdi { unicode-bidi: isolate; }

  /* ---------- Section headings ------------------------------------------ */
  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .375rem .875rem;
    font-size: var(--step--1);
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--accent);
    background: var(--accent-dim);
    border: 1px solid var(--accent-ring);
    border-radius: var(--r-full);
  }
  .eyebrow .icon { inline-size: 1em; block-size: 1em; }

  .section-head { max-inline-size: 46rem; margin-block-end: var(--sp-8); }
  .section-head--center { margin-inline: auto; text-align: center; }
  .section-head h2 { margin-block: var(--sp-4) var(--sp-4); font-size: var(--step-4); }
  .section-head p { font-size: var(--step-1); color: var(--text-2); }

  /* ---------- Cards ------------------------------------------------------ */
  .card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: var(--sp-6);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    transition: border-color .3s, transform var(--dur) var(--ease), background-color .3s;
  }
  .card:hover { border-color: var(--border-strong); transform: translateY(-4px); background: var(--surface-2); }
  .card h3 { font-size: var(--step-2); margin-block-end: var(--sp-3); }
  .card p { color: var(--text-2); }

  .card__icon {
    display: grid;
    place-items: center;
    inline-size: 3.25rem;
    block-size: 3.25rem;
    margin-block-end: var(--sp-5);
    color: #fff;
    background: var(--grad);
    border-radius: var(--r);
  }
  .card__icon .icon { inline-size: 1.5rem; block-size: 1.5rem; }

  .card__link { margin-block-start: auto; padding-block-start: var(--sp-5); }

  /* Whole-card click target without nesting interactive elements */
  .card--linked .card__title-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }

  .card__list { margin-block: var(--sp-4) 0; display: grid; gap: .5rem; }
  .card__list li { display: flex; gap: .5rem; font-size: var(--step--1); color: var(--text-2); }
  .card__list .icon { inline-size: 1.05rem; block-size: 1.05rem; margin-block-start: .38rem; color: var(--accent); }

  /* ---------- Hero ------------------------------------------------------- */
  .hero { position: relative; padding-block: clamp(3.5rem, 2rem + 8vw, 8rem) var(--section); }
  .hero__inner { max-inline-size: 58rem; }
  .hero h1 { font-size: var(--step-6); font-weight: 900; letter-spacing: -.02em; margin-block: var(--sp-5) var(--sp-5); }
  .hero__lead { font-size: var(--step-2); color: var(--text-2); max-inline-size: 44rem; }
  .hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-block-start: var(--sp-7); }

  .hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-4) var(--sp-6);
    margin-block-start: var(--sp-8);
    padding-block-start: var(--sp-6);
    border-block-start: 1px solid var(--border);
    font-size: var(--step--1);
    color: var(--text-3);
  }
  .hero__meta span { display: inline-flex; align-items: center; gap: .5rem; }
  .hero__meta .icon { inline-size: 1.05rem; block-size: 1.05rem; color: var(--accent); }
  .hero__meta a { display: inline-block; padding-block: .3rem; color: var(--accent); }
  .hero__meta a:hover { color: var(--accent-strong); }

  /* ---------- Stats ------------------------------------------------------ */
  .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
  .stat { padding: var(--sp-6) var(--sp-5); background: var(--surface); text-align: center; }
  .stat__num { display: block; font-size: var(--step-4); font-weight: 900; line-height: 1.1; }
  .stat__label { font-size: var(--step--1); color: var(--text-3); }

  /* ---------- Process ---------------------------------------------------- */
  /* 12.5rem keeps all five steps on one row at container width. */
  .process { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr)); }
  .process__item { position: relative; padding: var(--sp-6) var(--sp-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
  .process__n { display: block; font-size: var(--step-2); font-weight: 900; color: transparent; background: var(--grad-text); -webkit-background-clip: text; background-clip: text; margin-block-end: var(--sp-3); }
  .process__item h3 { font-size: var(--step-1); margin-block-end: var(--sp-2); }
  .process__item p { font-size: var(--step--1); color: var(--text-2); }

  /* ---------- FAQ -------------------------------------------------------- */
  .faq { display: grid; gap: var(--sp-3); }
  .faq__item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
  .faq__item[open] { border-color: var(--accent-ring); }
  .faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: var(--sp-5);
    font-size: var(--step-1);
    font-weight: 700;
    cursor: pointer;
    list-style: none;
  }
  .faq__q::-webkit-details-marker { display: none; }
  .faq__q:hover { color: var(--accent); }
  .faq__q .icon { flex: none; color: var(--accent); transition: rotate .3s var(--ease); }
  .faq__item[open] .faq__q .icon { rotate: 180deg; }
  .faq__a { padding: 0 var(--sp-5) var(--sp-5); color: var(--text-2); }

  /* ---------- CTA band --------------------------------------------------- */
  .cta-band {
    position: relative;
    padding: clamp(2.5rem, 1.5rem + 5vw, 4.5rem);
    background: var(--grad-soft), var(--surface);
    border: 1px solid var(--accent-ring);
    border-radius: var(--r-xl);
    text-align: center;
    overflow: hidden;
  }
  .cta-band h2 { font-size: var(--step-4); margin-block-end: var(--sp-4); }
  .cta-band p { max-inline-size: 40rem; margin-inline: auto; color: var(--text-2); font-size: var(--step-1); }
  .cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: center; margin-block-start: var(--sp-7); }

  /* ---------- Forms ------------------------------------------------------ */
  .form { display: grid; gap: var(--sp-5); }
  .form__row { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
  .field { display: grid; gap: .5rem; }
  .field > label { font-size: var(--step--1); font-weight: 700; color: var(--text-2); }
  .field .req { color: var(--accent); }

  .field input, .field textarea, .field select {
    inline-size: 100%;
    padding: .875rem 1rem;
    color: var(--text);
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    border-radius: var(--r);
    transition: border-color .25s, box-shadow .25s;
  }
  .field textarea { min-block-size: 8rem; resize: vertical; }
  .field select {
    appearance: none;
    padding-inline-end: 2.75rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%23A6A6B5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7.5l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 1rem center;
  }
  .field input::placeholder, .field textarea::placeholder { color: var(--text-3); }
  .field input:focus, .field textarea:focus, .field select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-dim);
  }
  .field [aria-invalid="true"] { border-color: var(--danger); }
  .field__error { display: none; font-size: var(--step--1); color: var(--danger); }
  .field__error.is-shown { display: block; }

  .form__note { font-size: var(--step--1); color: var(--text-3); text-align: center; }

  /* ---------- Floating actions ------------------------------------------ */
  .floats {
    position: fixed;
    inset-block-end: 1.25rem;
    inset-inline-start: 1.25rem;
    z-index: var(--z-float);
    display: flex;
    flex-direction: column-reverse;
    gap: .75rem;
  }
  .float-btn {
    display: grid;
    place-items: center;
    inline-size: 3.375rem;
    block-size: 3.375rem;
    color: #fff;
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-full);
    box-shadow: var(--shadow);
    transition: transform var(--dur) var(--ease), background-color .25s;
  }
  .float-btn:hover { transform: scale(1.07); }
  .float-btn--wa { background: var(--whatsapp); border-color: transparent; color: #04240F; }
  .float-btn--wa:hover { background: #1FBE5B; }
  .float-btn .icon { inline-size: 1.6rem; block-size: 1.6rem; }

  /* ---------- Accessibility panel ---------------------------------------- */
  .a11y-panel {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    z-index: var(--z-panel);
    inline-size: min(22rem, 92vw);
    padding: var(--sp-6);
    background: var(--bg-elevated);
    border-inline-end: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    overflow-y: auto;
    visibility: hidden;
    transition: translate var(--dur) var(--ease), visibility var(--dur);
    /* inset-inline-start:0 puts the panel on the right in RTL, so it must slide
       out to the right. `translate` is physical, so it cannot be logical here. */
    translate: 100% 0;
  }
  [dir="ltr"] .a11y-panel { translate: -100% 0; }
  .a11y-panel.is-open { translate: 0; visibility: visible; }
  .a11y-panel__head { display: flex; align-items: center; justify-content: space-between; margin-block-end: var(--sp-5); }
  .a11y-panel__head h2 { font-size: var(--step-2); }
  .a11y-list { display: grid; gap: .5rem; }
  .a11y-opt {
    display: flex;
    align-items: center;
    gap: .75rem;
    inline-size: 100%;
    padding: .75rem 1rem;
    text-align: start;
    font-weight: 600;
    color: var(--text-2);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    transition: border-color .2s, color .2s, background-color .2s;
  }
  .a11y-opt:hover { color: var(--text); border-color: var(--border-strong); }
  .a11y-opt[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); background: var(--accent-dim); }
  .a11y-opt .icon { inline-size: 1.2rem; block-size: 1.2rem; }
  .a11y-size { display: flex; align-items: center; gap: .5rem; }
  .a11y-size button { display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; border: 1px solid var(--border); border-radius: var(--r); color: var(--text-2); }
  .a11y-size button:hover { color: var(--accent); border-color: var(--accent); }
  .a11y-size output { flex: 1; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }

  .overlay {
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-panel) - 1);
    background: rgb(0 0 0 / .6);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s, visibility .3s;
  }
  .overlay.is-open { opacity: 1; visibility: visible; }

  /* ---------- Breadcrumbs ------------------------------------------------ */
  .crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; font-size: var(--step--1); color: var(--text-3); }
  .crumbs a { display: inline-block; padding-block: .3rem; }
  .crumbs a:hover { color: var(--accent); }
  .crumbs li { display: flex; align-items: center; gap: .5rem; }
  .crumbs li + li::before { content: "/"; color: var(--border-strong); }
  .crumbs [aria-current] { color: var(--text-2); }

  /* ---------- Post cards -------------------------------------------------- */
  .post-card { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; transition: border-color .3s, transform var(--dur) var(--ease); }
  .post-card:hover { border-color: var(--border-strong); transform: translateY(-4px); }
  .post-card__thumb { display: grid; place-items: center; aspect-ratio: 16 / 7; color: #fff; background: var(--grad-soft), var(--surface-2); border-block-end: 1px solid var(--border); }
  .post-card__thumb .icon { inline-size: 2.5rem; block-size: 2.5rem; color: var(--accent); }
  .post-card__body { display: flex; flex-direction: column; flex: 1; padding: var(--sp-5); }
  .post-card h3 { font-size: var(--step-1); margin-block: var(--sp-3); }
  .post-card h3 a::after { content: ""; position: absolute; inset: 0; }
  .post-card p { font-size: var(--step--1); color: var(--text-2); }
  .post-card__meta { display: flex; flex-wrap: wrap; gap: .75rem; margin-block-start: auto; padding-block-start: var(--sp-4); font-size: var(--step--1); color: var(--text-3); }

  .chip { display: inline-flex; align-items: center; gap: .375rem; padding: .25rem .625rem; font-size: var(--step--1); font-weight: 700; color: var(--accent); background: var(--accent-dim); border-radius: var(--r-full); }
  .chip--muted { color: var(--text-3); background: var(--surface-3); }

  /* ---------- Portfolio ---------------------------------------------------- */
  .work-grid { display: grid; gap: var(--sp-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }

  .work {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: border-color .3s, transform var(--dur) var(--ease);
  }
  .work:hover { border-color: var(--accent-ring); transform: translateY(-4px); }
  /* Covers the card so the whole thing is one target, without nesting links. */
  .work__link { position: absolute; inset: 0; z-index: 1; }
  .work:focus-within { border-color: var(--accent); }

  .work__shot {
    position: relative;
    aspect-ratio: 16 / 10;
    display: grid;
    place-items: center;
    background: var(--surface-2);
    border-block-end: 1px solid var(--border);
    overflow: hidden;
  }
  .work__shot img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: top center;
    transition: scale .6s var(--ease);
  }
  .work:hover .work__shot img { scale: 1.03; }
  .work__fallback { color: var(--accent); }

  .work__body { display: flex; flex-direction: column; flex: 1; padding: var(--sp-5); }
  .work__tags { display: flex; flex-wrap: wrap; gap: .5rem; }
  .work__body h2 { font-size: var(--step-2); margin-block: var(--sp-3) .25rem; }
  .work__client { font-size: var(--step--1); color: var(--text-3); margin-block-end: var(--sp-3); }
  .work__body p { color: var(--text-2); font-size: var(--step-0); }
  .work__more { margin-block-start: auto; padding-block-start: var(--sp-5); }

  /* Framed screenshot on a case study page */
  .shot {
    margin: 0;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--surface-2);
    box-shadow: var(--shadow-lg);
  }
  .shot img { inline-size: 100%; block-size: auto; display: block; }

  /* ---------- Prose (article body) --------------------------------------- */
  .prose { --flow: 1.4em; font-size: var(--step-1); color: var(--text-2); }
  .prose > * + * { margin-block-start: var(--flow); }
  .prose h2 { font-size: var(--step-3); color: var(--text); margin-block-start: 2em; scroll-margin-block-start: 6rem; }
  .prose h3 { font-size: var(--step-2); color: var(--text); margin-block-start: 1.6em; }
  .prose h4 { font-size: var(--step-1); color: var(--text); margin-block-start: 1.4em; }
  .prose strong { color: var(--text); font-weight: 700; }
  .prose a { color: var(--accent); text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; }
  .prose a:hover { color: var(--accent-strong); }
  .prose ul, .prose ol { padding-inline-start: 1.4em; display: grid; gap: .6em; }
  .prose ul { list-style: disc; }
  .prose ol { list-style: decimal; }
  .prose li::marker { color: var(--accent); }
  .prose blockquote {
    padding: var(--sp-5);
    border-inline-start: 3px solid var(--accent);
    background: var(--surface);
    border-radius: 0 var(--r) var(--r) 0;
    color: var(--text);
  }
  .prose code { padding: .15em .4em; font-size: .9em; background: var(--surface-2); border-radius: .35rem; }
  .prose hr { border: 0; border-block-start: 1px solid var(--border); margin-block: 2.5em; }

  .prose figure { margin: 0; }
  .prose figcaption { margin-block-start: .6em; font-size: var(--step--1); color: var(--text-3); text-align: center; }

  .table-wrap {
    position: relative;
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--r);
    -webkit-overflow-scrolling: touch;
  }
  /* Only shown when the table is actually wider than its container (set by JS),
     so a narrow screen gets a visible cue that there is more to the side. */
  .table-wrap.is-scrollable { border-color: var(--accent-ring); }
  .table-wrap.is-scrollable::after {
    content: "";
    position: sticky;
    inset-inline-end: 0;
    inset-block-start: 0;
    float: inline-end;
    inline-size: 2.5rem;
    block-size: 100%;
    margin-inline-start: -2.5rem;
    pointer-events: none;
    background: linear-gradient(to left, transparent, var(--surface));
  }
  .table-scroll-hint {
    display: none;
    margin-block-start: .5rem;
    font-size: var(--step--1);
    color: var(--text-3);
  }
  .table-wrap.is-scrollable + .table-scroll-hint { display: block; }
  .prose table { inline-size: 100%; border-collapse: collapse; font-size: var(--step-0); }
  .prose th, .prose td { padding: .875rem 1rem; text-align: start; border-block-end: 1px solid var(--border); }
  .prose th { color: var(--text); font-weight: 700; background: var(--surface-2); white-space: nowrap; }
  .prose tbody tr:last-child td { border-block-end: 0; }

  .callout {
    display: flex;
    gap: var(--sp-4);
    padding: var(--sp-5);
    background: var(--surface);
    border: 1px solid var(--border);
    border-inline-start: 3px solid var(--accent);
    border-radius: var(--r);
  }
  .callout .icon { flex: none; color: var(--accent); margin-block-start: .2rem; }
  .callout p { margin: 0; }

  /* ---------- Table of contents ------------------------------------------ */
  .toc { padding: var(--sp-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
  .toc h2 { font-size: var(--step-1); margin-block-end: var(--sp-3); color: var(--text); }
  .toc ol { display: grid; gap: .5rem; padding-inline-start: 1.2em; list-style: decimal; }
  .toc a { color: var(--text-2); font-size: var(--step-0); }
  .toc a:hover { color: var(--accent); }

  /* ---------- Footer ------------------------------------------------------ */
  .footer { margin-block-start: var(--section); border-block-start: 1px solid var(--border); background: var(--bg-elevated); }
  /* Explicit column counts rather than auto-fit: auto-fit collapsed the whole
     footer to a single column on phones, which read as an unstyled list. */
  .footer__main {
    display: grid;
    gap: var(--sp-7) var(--sp-5);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-block: var(--sp-9) var(--sp-8);
  }
  .footer__brand { grid-column: 1 / -1; max-inline-size: 28rem; }
  .footer__main > :nth-child(4) { grid-column: 1 / -1; }   /* contact details */

  @media (min-width: 40rem) {
    .footer__main { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .footer__main > :nth-child(4) { grid-column: auto; }
  }
  @media (min-width: 64rem) {
    .footer__main { grid-template-columns: 1.5fr 1fr 1fr 1.35fr; gap: var(--sp-8); }
    .footer__brand { grid-column: auto; }
  }
  .footer__brand img { block-size: 2.5rem; inline-size: auto; margin-block-end: var(--sp-4); }
  .footer__brand p { color: var(--text-2); font-size: var(--step--1); }
  .footer h3 { font-size: var(--step-0); margin-block-end: var(--sp-4); letter-spacing: .03em; }
  .footer__links { display: grid; gap: .125rem; }
  /* padding-block lifts these to the 24px minimum target size (WCAG 2.5.8). */
  .footer__links a {
    display: inline-block;
    padding-block: .3rem;
    font-size: var(--step--1);
    color: var(--text-2);
  }
  .footer__links a:hover { color: var(--accent); }
  .footer__contact { display: grid; gap: .875rem; font-size: var(--step--1); color: var(--text-2); }
  .footer__contact li { display: flex; gap: .625rem; }
  .footer__contact .icon { inline-size: 1.1rem; block-size: 1.1rem; margin-block-start: .3rem; color: var(--accent); }
  .footer__contact a { display: inline-block; padding-block: .2rem; }
  .footer__contact a:hover { color: var(--accent); }

  .socials { display: flex; gap: .625rem; margin-block-start: var(--sp-5); }
  .socials a { display: grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; color: var(--text-2); border: 1px solid var(--border); border-radius: var(--r-full); transition: color .25s, border-color .25s; }
  .socials a:hover { color: var(--accent); border-color: var(--accent); }

  /* The trailing padding keeps the last line of the footer clear of the fixed
     buttons once the page is scrolled to the bottom. The float column is two
     3.375rem buttons plus a .75rem gap, offset 1.25rem from the bottom edge. */
  .footer__bar {
    --float-stack: 8.75rem;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-4);
    align-items: center;
    justify-content: space-between;
    padding-block: var(--sp-4) calc(var(--float-stack) + env(safe-area-inset-bottom));
    border-block-start: 1px solid var(--border);
    font-size: var(--step--1);
    color: var(--text-3);
  }
  .footer__bar nav { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); }
  .footer__bar a { display: inline-block; padding-block: .3rem; }
  .footer__bar a:hover { color: var(--accent); }

  /* ---------- Scroll reveal ---------------------------------------------- */
  .reveal { opacity: 0; translate: 0 1.25rem; transition: opacity .6s var(--ease), translate .6s var(--ease); }
  .reveal.is-in { opacity: 1; translate: 0; }
  @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; translate: 0; } }
  :root[data-a11y-motion="off"] .reveal { opacity: 1; translate: 0; }
}

/* ========================================================================== */
@layer utilities {
  .visually-hidden {
    position: absolute !important;
    inline-size: 1px; block-size: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .text-center { text-align: center; }
  .mx-auto { margin-inline: auto; }
  .mt-6 { margin-block-start: var(--sp-6); }
  .mt-8 { margin-block-start: var(--sp-8); }

  /* Lock scrolling on the root element. Setting it on <body> stopped working
     once <html> gained overflow-x:clip, because overflow no longer propagates
     from body to the viewport. */
  :root.no-scroll { overflow: hidden; }
}