/* ================================================
   IKAMETI LANDING — conversion + motion layer
   Loaded after style.css. Uses existing design tokens only.
   Every animation here is disabled under prefers-reduced-motion
   at the bottom of this file.
   ================================================ */

/* ================================================================
   1. SCROLL REVEALS
   Opt-in via [data-reveal]. JS adds .is-revealed when the element
   enters the viewport. The `no-js`/no-observer path leaves elements
   visible, so content is never hidden by a script that failed.
   ================================================================ */

/* These use the individual `translate` / `scale` properties rather than
   `transform`. Both apply before `transform` in the rendering order, which
   leaves `transform` free for the pointer tilt on .card-interactive — the two
   would otherwise overwrite each other on the same element. */
[data-reveal] {
    opacity: 0;
    transition:
        opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
        translate 0.7s cubic-bezier(0.16, 1, 0.3, 1),
        scale 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, translate;
}

[data-reveal="up"]    { translate: 0 32px; }
[data-reveal="down"]  { translate: 0 -32px; }
[data-reveal="zoom"]  { scale: 0.94; }

/* Directional reveals follow reading direction, so they still travel
   "inward" when the page flips to RTL. Taken from `dir` rather than from a
   JS-maintained --rv-dir: the variable was set at init and only corrected on a
   later event, so switching language mid-page could leave elements sliding in
   from the wrong edge. */
[data-reveal="start"] { translate: -40px 0; }
[data-reveal="end"]   { translate: 40px 0; }

html[dir="rtl"] [data-reveal="start"] { translate: 40px 0; }
html[dir="rtl"] [data-reveal="end"]   { translate: -40px 0; }

[data-reveal].is-revealed {
    opacity: 1;
    translate: none;
    scale: none;
}

/* Below 1024px the two- and three-column grids collapse to a single
   full-bleed column, so a 40px sideways offset no longer has anywhere to sit:
   it pushed .stats-panel past the container and gave the whole document a
   horizontal scrollbar (399px of scrollWidth in a 375px viewport) until the
   observer fired. The travel becomes vertical at those widths, which reads the
   same and cannot overflow. */
@media (max-width: 1024px) {
    /* The html[dir="rtl"] variants above are more specific (0,2,1) than a bare
       attribute selector (0,1,0), and a media query adds no specificity of its
       own — so they have to be repeated here or RTL keeps the horizontal offset
       and the scrollbar comes back on ar/fa/af. */
    [data-reveal="start"],
    [data-reveal="end"],
    html[dir="rtl"] [data-reveal="start"],
    html[dir="rtl"] [data-reveal="end"] {
        translate: 0 32px;
    }
}

/* ================================================================
   2. STAT COUNTERS
   ================================================================ */

.count-up {
    font-variant-numeric: tabular-nums;
    /* Digits have different widths; without this the number jitters
       horizontally while counting. */
}

/* ================================================================
   2b. LOCAL UTILITIES
   `flex-wrap` was being used as a Tailwind class on the hero CTA row while
   Tailwind was never actually applied (it was linked as a stylesheet but is a
   JS bundle). Combined with `white-space: nowrap` on .btn that left the row
   unable to wrap, and the Turkmen CTA pair overflowed a 375px viewport.
   ================================================================ */

.flex-wrap { flex-wrap: wrap; }

/* Visible to screen readers, not to the eye. Used to give the language button
   an accessible name that still CONTAINS its visible text ("EN"), which an
   aria-label of "Change Language" did not — a WCAG 2.5.3 failure, and it
   breaks voice control: saying "click EN" would not match the button. */
.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;
}

/* The footer column headings move from <h4> to <h3> so the document's heading
   levels stop skipping a rank. style.css styles them by tag name, so the exact
   same metrics are restated here for the new tag. */
footer h3 {
    color: var(--text-white);
    font-size: 16px;
    font-weight: 700;
    margin-bottom: var(--space-4);
}

@media (max-width: 480px) {
    footer h3 {
        margin-top: 0;
        margin-bottom: var(--space-3);
        font-size: 15px;
    }
}

/* ================================================================
   2c. HERO BACKGROUND — the LCP element
   style.css:540 serves one 1400px photo to every device. A 375px phone
   only ever paints ~800 CSS px of it, and the 55-80% gradient on top hides
   the detail anyway, so the extra bytes buy nothing and delay the largest
   paint. Same selector as style.css, declared later, so it wins.
   ================================================================ */

@media (max-width: 768px) {
    section.bg-dark.hero-img-landing {
        background:
            linear-gradient(135deg, rgba(176, 0, 0, 0.55) 0%, rgba(25, 0, 0, 0.80) 100%),
            url("../images/hero-landing-800.jpg") center center / cover no-repeat;
    }
}

/* ================================================================
   3. CTA POLISH — shine sweep + attention pulse
   ================================================================ */

.btn-shine {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.btn-shine::after {
    content: '';
    position: absolute;
    top: 0;
    left: -140%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        100deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.45) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-18deg);
    pointer-events: none;
    z-index: 1;
}

.btn-shine:hover::after,
.btn-shine:focus-visible::after {
    animation: btnShine 0.85s ease-out;
}

@keyframes btnShine {
    to { left: 140%; }
}

/* Slow breathing pulse on the single most important CTA.
   The ring is a pseudo-element animating transform + opacity, not the button's
   own box-shadow. Animating box-shadow repaints the element on every frame for
   as long as the page is open, which is a permanent tax on a phone's main
   thread; transform and opacity are composited and cost the CPU nothing. */
.btn-pulse {
    position: relative;
}

.btn-pulse::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 0 0 4px rgba(208, 0, 0, 0.45);
    opacity: 0;
    pointer-events: none;
    z-index: -1;
    animation: btnPulse 2.8s ease-in-out infinite;
}

@keyframes btnPulse {
    0%, 100% { transform: scale(1);    opacity: 0.55; }
    50%      { transform: scale(1.09); opacity: 0; }
}

.btn-pulse:hover::before {
    animation-play-state: paused;
}

/* ================================================================
   4. HERO SCROLL CUE
   ================================================================ */

.scroll-cue {
    position: absolute;
    bottom: var(--space-6);
    inset-inline-start: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    color: rgba(255, 255, 255, 0.75);
    font-size: 12px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-weight: 600;
    z-index: 2;
    pointer-events: none;
}

html[dir="rtl"] .scroll-cue {
    transform: translateX(50%);
}

.scroll-cue svg {
    width: 22px;
    height: 22px;
    animation: cueBob 1.9s ease-in-out infinite;
}

@keyframes cueBob {
    0%, 100% { transform: translateY(0); opacity: 0.6; }
    50%      { transform: translateY(7px); opacity: 1; }
}

/* ================================================================
   5. FLOATING WHATSAPP
   WhatsApp green is deliberate rather than the brand red: the colour
   is the recognition cue for the channel.
   ================================================================ */

.wa-float {
    position: fixed;
    inset-inline-end: 20px;
    bottom: 20px;
    z-index: 900;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px 12px 14px;
    border-radius: 999px;
    background-color: #25D366;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: 15px;
    box-shadow: 0 8px 24px rgba(37, 211, 102, 0.38);
    transition:
        transform var(--transition-normal),
        box-shadow var(--transition-normal),
        opacity var(--transition-normal);

    /* Hidden until the visitor scrolls past the hero, so it never
       competes with the hero's own CTAs. */
    opacity: 0;
    transform: translateY(24px) scale(0.9);
    pointer-events: none;
}

.wa-float.is-visible {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.wa-float:hover,
.wa-float:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(37, 211, 102, 0.5);
    color: #fff;
}

.wa-float svg {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
}

/* Expanding ring, drawn behind the pill */
.wa-float::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-color: #25D366;
    z-index: -1;
    animation: waPing 2.4s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes waPing {
    0%   { transform: scale(1);    opacity: 0.55; }
    70%  { transform: scale(1.28); opacity: 0; }
    100% { transform: scale(1.28); opacity: 0; }
}

/* On small screens collapse to a circle and sit above the CTA bar.
   The bar's own height already grows by env(safe-area-inset-bottom), so this
   offset has to grow with it — with a fixed 84px the pill landed 23px *inside*
   the bar on a notched iPhone. */
@media (max-width: 768px) {
    .wa-float {
        padding: 14px;
        bottom: calc(84px + env(safe-area-inset-bottom, 0px));
        inset-inline-end: 14px;
    }

    .wa-float .wa-float__label {
        display: none;
    }
}

/* ================================================================
   6. STICKY MOBILE CTA BAR
   ================================================================ */

.cta-bar {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 899;
    display: none;
    gap: var(--space-3);
    padding: 10px var(--space-4) calc(10px + env(safe-area-inset-bottom, 0px));
    background-color: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--border-color);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
    transform: translateY(110%);
    transition: transform var(--transition-normal);
}

.cta-bar.is-visible {
    transform: none;
}

.cta-bar a {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 10px;
    border-radius: var(--radius-md);
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    white-space: nowrap;
}

.cta-bar__primary {
    background-color: var(--primary);
    color: #fff;
    box-shadow: var(--shadow-cta);
}

.cta-bar__wa {
    background-color: #fff;
    /* WhatsApp's own #128C7E is 4.14:1 on white — just under AA at 15px.
       Darkened to the same hue at 5.66:1; the green border carries the brand. */
    color: #0B6B5F;
    border: 2px solid #25D366;
}

.cta-bar svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .cta-bar {
        display: flex;
    }
}

/* ================================================================
   7. LIVE TRUST TICKER
   ================================================================ */

.trust-strip {
    background-color: var(--primary);
    color: #fff;
    padding: var(--space-3) 0;
    overflow: hidden;
    position: relative;
}

.trust-strip__track {
    display: flex;
    gap: var(--space-10);
    width: max-content;
    animation: tickerSlide 32s linear infinite;
}

/* The track holds two identical copies of the list; translating by
   exactly -50% therefore lands on a seam-free loop point. */
@keyframes tickerSlide {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

html[dir="rtl"] .trust-strip__track {
    animation-name: tickerSlideRtl;
}

@keyframes tickerSlideRtl {
    from { transform: translateX(0); }
    to   { transform: translateX(50%); }
}

.trust-strip:hover .trust-strip__track {
    animation-play-state: paused;
}

.trust-strip__item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

.trust-strip__item svg {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    opacity: 0.9;
}

/* ================================================================
   8. CARD / SECTION LIVELINESS
   ================================================================ */

/* Accent bar that draws itself in as the card is revealed */
.card {
    position: relative;
}

.grid .card::after {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    bottom: 0;
    height: 3px;
    width: 0;
    background: linear-gradient(90deg, var(--primary), var(--primary-light));
    transition: width var(--transition-smooth);
}

.grid .card:hover::after {
    width: 100%;
}

/* ---- Icon tiles -------------------------------------------------------
   Replaces the emoji blocks. Mirrors the rounded gradient medallion the
   existing "4-Step Process" section already uses, so it reads as part of
   the same system. */
.icon-tile {
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--primary-light), var(--bg-base));
    color: var(--primary);
    margin-bottom: var(--space-4);
    transition:
        transform var(--transition-normal),
        background var(--transition-normal),
        color var(--transition-normal),
        box-shadow var(--transition-normal);
}

.icon-tile svg {
    width: 26px;
    height: 26px;
}

/* ---- Interactive cards ------------------------------------------------
   `transform` is reserved for the tilt (see the [data-reveal] note above).
   The lift is folded into the same transform via --lift so the two cannot
   clobber one another. */
.card-interactive {
    transform:
        perspective(900px)
        rotateX(var(--tilt-x, 0deg))
        rotateY(var(--tilt-y, 0deg))
        translateY(var(--lift, 0px));
    transition:
        transform var(--transition-normal),
        box-shadow var(--transition-normal),
        border-color var(--transition-normal);
}

.card-interactive:hover {
    --lift: -8px;
}

.card-interactive:hover .icon-tile {
    transform: translateY(-4px) scale(1.06) rotate(-4deg);
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: var(--white);
    box-shadow: var(--shadow-primary);
}

/* Cursor-following highlight. style.css already defines .card::before as a
   full-bleed overlay at opacity 0; this repaints it and is declared later,
   so it wins at equal specificity. */
.card-interactive::before {
    background: radial-gradient(
        420px circle at var(--mx, 50%) var(--my, 50%),
        rgba(208, 0, 0, 0.10),
        transparent 62%
    );
    opacity: 0;
    transition: opacity var(--transition-normal);
}

.card-interactive:hover::before {
    opacity: 1;
}

/* ---- Solution list rows ----------------------------------------------- */

.solution-item {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    padding: var(--space-3);
    margin: calc(var(--space-3) * -1);
    border-radius: var(--radius-md);
    transition: background-color var(--transition-normal);
}

.solution-item:hover {
    background-color: var(--primary-light);
}

.solution-item__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background-color: var(--primary-light);
    color: var(--primary);
    transition:
        transform var(--transition-normal),
        background-color var(--transition-normal),
        color var(--transition-normal);
}

.solution-item__icon svg {
    width: 22px;
    height: 22px;
}

.solution-item:hover .solution-item__icon {
    transform: scale(1.08) rotate(-4deg);
    background-color: var(--primary);
    color: var(--white);
}

/* ================================================================
   STATS PANEL — flat single colour, with a chart per stat on hover
   The old 135deg gradient faded to --primary-light at the bottom,
   which left the white unit labels ("approved", "satisfied") almost
   unreadable. A flat --primary keeps contrast constant top to bottom.
   ================================================================ */

.stats-panel {
    background-color: var(--primary);
    color: var(--white);
    padding: var(--space-8);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-primary);
}

.stats-heading {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    /* style.css sets `h1..h6 { color: var(--text-primary) }`, which beats the
       white inherited from .stats-panel — headings need it stated explicitly.
       currentColor carries it to the chart icon too. */
    color: var(--white);
}

.stats-heading svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    opacity: 0.9;
}

.stats-panel__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.stat {
    padding-bottom: var(--space-4);
    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
    cursor: default;
}

/* These carry tabindex="0" so the charts can be opened from the keyboard via
   :focus-within. style.css only styles :focus-visible for button/a/.card, so a
   focused .stat fell back to the UA's black ring — about 2.9:1 on the red
   panel. A white ring is 5.7:1 and matches the panel's own text. */
.stat:focus-visible {
    outline: 3px solid var(--white);
    outline-offset: 3px;
    border-radius: var(--radius-sm, 4px);
}

.stat:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.stat__label {
    font-size: 12px;
    /* Opaque white: at 0.75 alpha this was 3.54:1 on --primary, below AA. */
    color: var(--white);
    margin-bottom: var(--space-1);
    letter-spacing: 0.8px;
    text-transform: uppercase;
    font-weight: 600;
}

.stat__value {
    font-size: 40px;
    font-weight: 900;
    color: var(--white);
    line-height: 1;
}

.stat__unit {
    font-size: 13px;
    /* 0.8 alpha measured 3.91:1; 0.92 gives 5.05:1 and stays subordinate. */
    color: rgba(255, 255, 255, 0.92);
    margin-top: var(--space-1);
}

/* Reveal: 0fr -> 1fr animates height without hard-coding one. */
.stat__chart {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition:
        grid-template-rows var(--transition-smooth),
        opacity var(--transition-normal);
}

.stat__chart-inner {
    overflow: hidden;
    min-height: 0;
}

.stat:hover .stat__chart,
.stat:focus-within .stat__chart {
    grid-template-rows: 1fr;
    opacity: 1;
}

.stat__chart-pad {
    padding-top: var(--space-4);
}

/* ---- Comparison bars (time to approval) ---- */

.bar-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
    font-size: 11px;
}

.bar-row__label {
    flex: 0 0 34%;
    /* 11px text needs the full 4.5:1; 0.85 alpha only reached 4.32:1. */
    color: var(--white);
    font-weight: 600;
}

.bar-row__track {
    flex: 1;
    height: 8px;
    border-radius: 999px;
    background-color: rgba(255, 255, 255, 0.22);
    overflow: hidden;
}

.bar-row__fill {
    display: block;
    height: 100%;
    width: var(--w, 100%);
    border-radius: inherit;
    background-color: var(--white);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Bars must grow from the reading edge, and SVG/CSS has no logical
   equivalent of transform-origin. */
html[dir="rtl"] .bar-row__fill {
    transform-origin: right center;
}

.stat:hover .bar-row__fill,
.stat:focus-within .bar-row__fill {
    transform: scaleX(1);
}

.bar-row--muted .bar-row__fill {
    background-color: rgba(255, 255, 255, 0.45);
    transition-delay: 0.12s;
}

.bar-row__val {
    flex: 0 0 auto;
    font-weight: 800;
    font-size: 12px;
    min-width: 26px;
    text-align: end;
}

/* ---- Donut (success rate) ---- */

.donut-wrap {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.donut {
    width: 74px;
    height: 74px;
    flex-shrink: 0;
}

.donut__track {
    stroke: rgba(255, 255, 255, 0.22);
}

.donut__value {
    stroke: var(--white);
    /* r is 15.9155 so the circumference is exactly 100 — dasharray then
       reads directly as a percentage. */
    stroke-dasharray: 98 100;
    stroke-dashoffset: 100;
    transition: stroke-dashoffset 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}

.stat:hover .donut__value,
.stat:focus-within .donut__value {
    stroke-dashoffset: 0;
}

.donut-caption {
    font-size: 12px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.92);
}

/* ---- Sparkline (client growth) ---- */

.spark {
    width: 100%;
    height: 52px;
    display: block;
}

.spark__area {
    fill: rgba(255, 255, 255, 0.18);
    opacity: 0;
    transition: opacity 0.7s ease 0.35s;
}

.spark__line {
    stroke: var(--white);
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    transition: stroke-dashoffset 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}

.spark__dot {
    fill: var(--white);
    opacity: 0;
    transition: opacity 0.4s ease 0.9s;
}

.stat:hover .spark__area,
.stat:focus-within .spark__area,
.stat:hover .spark__dot,
.stat:focus-within .spark__dot {
    opacity: 1;
}

.stat:hover .spark__line,
.stat:focus-within .spark__line {
    stroke-dashoffset: 0;
}

.spark-caption {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.92);
    display: flex;
    justify-content: space-between;
    margin-top: var(--space-1);
}

/* Touch devices have no hover: show every chart, already drawn. */
@media (hover: none) {
    .stat__chart {
        grid-template-rows: 1fr;
        opacity: 1;
    }

    .bar-row__fill { transform: scaleX(1); }
    .donut__value  { stroke-dashoffset: 0; }
    .spark__line   { stroke-dashoffset: 0; }
    .spark__area,
    .spark__dot    { opacity: 1; }
}

/* ================================================================
   8b. BENEFITS — large circular icon tiles
   ================================================================ */

.icon-tile--lg {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    position: relative;
}

.icon-tile--lg svg {
    width: 34px;
    height: 34px;
}

/* Ring that expands out of the tile on hover */
.icon-tile--lg::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--primary);
    opacity: 0;
    transition: transform var(--transition-smooth), opacity var(--transition-smooth);
}

.card-interactive:hover .icon-tile--lg::after {
    transform: scale(1.35);
    opacity: 0;
    animation: tileRing 1.4s ease-out infinite;
}

@keyframes tileRing {
    0%   { transform: scale(1);    opacity: 0.55; }
    100% { transform: scale(1.45); opacity: 0; }
}

/* ================================================================
   8c. PROCESS — a connected step system, not four loose cards
   ================================================================ */

.steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
    --medallion: 84px;
    /* The colour the medallion ring punches out of the rail. It must match the
       section's real background: the process section is <section> #6, which the
       nth-of-type rule in card-showcase.css paints var(--bg-alt) (#FFFFFF) —
       not var(--section-background) (#F5F5F5), which would show a grey halo. */
    --step-bg: var(--bg-alt);
}

.step-card {
    position: relative;
    text-align: center;
    padding-top: var(--space-2);
}

/* The rail between one medallion and the next.
   Geometry: the medallion is centred in a column of width 100%, so the rail
   starts half a medallion past the centre and runs to the same point in the
   next column — one column plus one gap, minus one medallion. */
.step-card:not(:last-child)::after {
    content: '';
    position: absolute;
    top: calc(var(--space-2) + var(--medallion) / 2);
    inset-inline-start: calc(50% + var(--medallion) / 2);
    width: calc(100% + var(--space-6) - var(--medallion));
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--primary), var(--primary-light));
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
    z-index: 0;
}

html[dir="rtl"] .step-card:not(:last-child)::after {
    transform-origin: right center;
    background: linear-gradient(270deg, var(--primary), var(--primary-light));
}

/* Each rail draws itself as its own step arrives, so the line advances
   step by step instead of appearing all at once. */
.step-card.is-revealed:not(:last-child)::after {
    transform: scaleX(1);
}

.step-card__medallion {
    position: relative;
    z-index: 1;
    width: var(--medallion);
    height: var(--medallion);
    margin: 0 auto var(--space-4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary-light), var(--background));
    color: var(--primary);
    /* Masks the rail where it meets the circle */
    box-shadow: 0 0 0 6px var(--step-bg);
    transition:
        transform var(--transition-normal),
        background var(--transition-normal),
        color var(--transition-normal),
        box-shadow var(--transition-normal);
}

.step-card__medallion svg {
    width: 34px;
    height: 34px;
}

.step-card__num {
    position: absolute;
    top: -2px;
    inset-inline-end: -2px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: var(--primary);
    color: var(--white);
    font-size: 13px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid var(--step-bg);
    transition: transform var(--transition-normal);
}

/* Promoted from <h4> to <h3> so the section's heading levels no longer skip a
   rank; the h4 metrics are restated here so nothing moves on screen. */
.step-card__title {
    color: var(--primary);
    margin-bottom: var(--space-3);
    font-weight: 700;
    font-size: 20px;
    letter-spacing: -0.3px;
}

.step-card__desc {
    font-size: 15px;
    color: var(--text-secondary);
    margin: 0;
}

/* Hover: lift the whole step and invert its medallion */
.step-card:hover .step-card__medallion {
    transform: translateY(-6px) scale(1.05);
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: var(--white);
    box-shadow: 0 0 0 6px var(--step-bg), var(--shadow-primary);
}

.step-card:hover .step-card__num {
    transform: translateY(-6px) scale(1.05);
}

/* Below the 4-across breakpoint the rail turns vertical and the steps read
   as a timeline rather than a broken row. */
@media (max-width: 1024px) {
    .steps {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }

    .step-card {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: var(--space-5);
        text-align: start;
        align-items: start;
    }

    .step-card__medallion {
        margin: 0;
    }

    .step-card:not(:last-child)::after {
        top: calc(var(--space-2) + var(--medallion));
        inset-inline-start: calc(var(--medallion) / 2 - 1.5px);
        width: 3px;
        height: calc(100% + var(--space-8) - var(--medallion));
        background: linear-gradient(180deg, var(--primary), var(--primary-light));
        transform: scaleY(0);
        transform-origin: top center;
    }

    html[dir="rtl"] .step-card:not(:last-child)::after {
        transform-origin: top center;
        background: linear-gradient(180deg, var(--primary), var(--primary-light));
    }

    .step-card.is-revealed:not(:last-child)::after {
        transform: scaleY(1);
    }

    .step-card__body {
        padding-top: var(--space-2);
    }
}

@media (max-width: 480px) {
    .steps {
        --medallion: 64px;
    }

    .step-card__medallion svg {
        width: 26px;
        height: 26px;
    }
}

/* ================================================================
   8d. TESTIMONIALS
   ================================================================ */

.tcard {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background-color: var(--white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    transition:
        transform var(--transition-normal),
        box-shadow var(--transition-normal),
        border-color var(--transition-normal);
}

.tcard:hover {
    transform: translateY(-8px);
    border-color: var(--primary);
    box-shadow: var(--shadow-xl);
}

/* Oversized quote glyph, bled into the corner */
.tcard__mark {
    position: absolute;
    top: var(--space-4);
    inset-inline-end: var(--space-4);
    width: 52px;
    height: 52px;
    color: var(--primary-light);
    pointer-events: none;
    transition: transform var(--transition-smooth), color var(--transition-normal);
}

.tcard:hover .tcard__mark {
    transform: scale(1.12) rotate(-6deg);
}

.tcard__stars {
    display: flex;
    gap: 3px;
    /* Amber, not brand red: it is the near-universal signal for a rating,
       and red reads as an error state next to review copy. */
    color: #F5A623;
    margin-bottom: var(--space-4);
}

.tcard__stars svg {
    width: 17px;
    height: 17px;
}

.tcard__text {
    flex: 1;
    font-size: 16px;
    line-height: 1.75;
    color: var(--text-secondary);
    margin: 0 0 var(--space-6);
}

.tcard__person {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-top: var(--space-5);
    border-top: 1px solid var(--border-light);
}

/* A person glyph rather than an initial: an initial would have to be
   hard-coded and would then be wrong in seven of the eight locales. */
.tcard__avatar {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: var(--white);
    transition: transform var(--transition-normal);
}

.tcard__avatar svg {
    width: 22px;
    height: 22px;
}

.tcard:hover .tcard__avatar {
    transform: scale(1.06);
}

.tcard__id {
    min-width: 0;
}

.tcard__name {
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.tcard__verified {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    color: var(--primary);
}

.tcard__meta {
    font-size: 13px;
    /* --text-tertiary (#999) is 2.85:1 on white — below AA for 13px body text. */
    color: var(--text-secondary);
    margin: 0;
}

.tcard__chip {
    display: inline-block;
    margin-top: var(--space-3);
    padding: 5px 12px;
    border-radius: 999px;
    background-color: var(--primary-light);
    color: var(--primary);
    font-size: 12px;
    font-weight: 700;
    transition: background-color var(--transition-normal), color var(--transition-normal);
}

.tcard:hover .tcard__chip {
    background-color: var(--primary);
    color: var(--white);
}

/* ================================================================
   8d-bis. SECTION RHYTHM — moved off the elements
   The hero, the FAQ band and the final CTA carried these as inline
   styles, which meant one desktop-sized value on every screen. Fluid
   values let a 375px phone breathe without shrinking the desktop.
   ================================================================ */

/* Desktop keeps the 80vh full-bleed opening the inline style used to set.
   A single clamp() cannot express "80vh on desktop, less on a phone": its
   middle value applies at every width, so clamp(360px, 52vh, 720px) quietly
   cut the desktop hero from 720px to 468px. The phone value is set in the
   media block below instead. */
/* Desktop only. Below 769px the shared mobile-hero block in css/style.css
   takes over (min-height:auto plus its own padding); this rule used to apply
   at every width and would have overridden it purely by load order. */
@media (min-width: 769px) {
    section.bg-dark.hero-img-landing {
        min-height: 80vh;
        padding: var(--space-16) 0;
    }
}

section.landing-faq,
section.bg-dark.landing-final-cta {
    padding: clamp(var(--space-10), 9vw, var(--space-16)) 0;
}

/* ================================================================
   8e. PHONE SIZING AND SMOOTHNESS
   Measured at 375px: the page ran 8716px (10.7 screens) and several
   elements were sized for a desktop column — the final CTA heading at
   44px, stat figures at 40px, and a stats panel 851px tall because
   every chart is forced open on a touch device.
   ================================================================ */

@media (max-width: 768px) {
    /* --- the header ------------------------------------------------
       90px of sticky chrome (12 + 64px logo + 12 + 2px rule) followed the
       reader down the whole page, eating an ninth of a 812px screen before
       any content. The logo is the fluid clamp set in the markup; the rest
       is tightened to match. */
    #navbar { padding: var(--space-2) 0; border-bottom-width: 1px; }
    #navbar .container { padding: 0 var(--space-3); }
    .language-dropdown-btn { padding: 5px 8px; font-size: 12px; }
    #mobile-menu-btn { padding: 6px; }
    html { scroll-padding-top: 64px; }

    /* --- hero ------------------------------------------------------ */
    section.hero-img h1 { font-size: clamp(21px, 6vw, 32px); line-height: 1.25; }
    .scroll-cue { display: none; }   /* the section below is already visible */

    /* The two CTAs stack full-width here, and .gap-4's 16px left them reading
       as two unrelated bars rather than one choice with a primary and a
       secondary. Pulling them together, and trimming the height .btn-lg was
       sized for on desktop, makes them a single block the thumb can take in at
       once — while staying well above the 44px minimum tap target. */
    section.hero-img .flex.gap-4 { gap: var(--space-2); }

    section.hero-img .btn-lg {
        padding: var(--space-3) var(--space-5);
        font-size: 15px;
        min-height: 46px;
    }

    /* --- showcase -------------------------------------------------- */
    .ikamet-showcase__head { margin-bottom: var(--space-5); }
    .ikamet-showcase__subtitle { font-size: 14px; margin-bottom: var(--space-4); }
    .ikamet-showcase__icon svg { width: 32px; height: 32px; }
    .ikamet-showcase__icon { margin-bottom: var(--space-3); }
    .ikamet-showcase__step h3 { font-size: 18px; margin-bottom: var(--space-2); }
    .ikamet-showcase__step p { font-size: 14px; }
    .ikamet-showcase:not(.is-scroll-enabled) .ikamet-showcase__stage { gap: var(--space-6); }

    /* --- shared section furniture ---------------------------------- */
    .section-title { margin-bottom: var(--space-6); }
    .card { padding: var(--space-4); }
    .card h3, .card h4 { font-size: 16px; margin-bottom: var(--space-2); }
    .card p { font-size: 14px; }
    .solution-item { padding: var(--space-2); margin: calc(var(--space-2) * -1); }
    .solution-item__icon { width: 34px; height: 34px; }
    .solution-item__icon svg { width: 18px; height: 18px; }
    .step-card__medallion { width: 52px; height: 52px; }
    .step-card__medallion svg { width: 24px; height: 24px; }
    .step-card__num { width: 22px; height: 22px; font-size: 11px; }
    .step-card__title { font-size: 17px; margin-bottom: var(--space-2); }
    .faq-item summary { font-size: 15px; }

    /* --- footer ---------------------------------------------------- */
    footer { padding-top: var(--space-8); }
    footer .grid { gap: var(--space-6); }
    footer p, footer ul li a { font-size: 14px; }
    footer img { height: 44px !important; }

    /* --- typography: dial back the desktop scale ------------------- */
    .stat__value      { font-size: 30px; }
    .stat__label      { font-size: 11px; letter-spacing: 0.6px; }
    .stats-panel      { padding: var(--space-5); }
    .stats-panel__list { gap: var(--space-4); }
    .stats-heading    { font-size: 18px !important; margin-bottom: var(--space-4) !important; }

    /* Charts are all open at once here (no hover to reveal them), so they
       have to be compact or the panel alone fills two and a half screens. */
    .donut            { width: 58px; height: 58px; }
    .spark            { height: 40px; }
    .stat__chart-pad  { padding-top: var(--space-3); }

    .tcard            { padding: var(--space-5); }
    .tcard__text      { font-size: 15px; line-height: 1.65; margin-bottom: var(--space-4); }
    .tcard__mark      { width: 38px; height: 38px; }
    .tcard__avatar    { width: 40px; height: 40px; }
    .tcard__person    { padding-top: var(--space-4); }

    .icon-tile        { width: 48px; height: 48px; margin-bottom: var(--space-3); }
    .icon-tile svg    { width: 22px; height: 22px; }
    .icon-tile--lg    { width: 60px; height: 60px; }
    .icon-tile--lg svg { width: 28px; height: 28px; }

    .step-card__desc  { font-size: 14px; }
    .trust-strip__item { font-size: 13px; }
    .wa-float svg     { width: 24px; height: 24px; }

    /* --- smoothness ----------------------------------------------- */

    /* Decorative infinite animations are the ones that keep a phone's
       compositor awake for the whole visit; the content loses nothing
       by having them still. */
    .icon-tile--lg::after,
    .wa-float::before,
    .btn-pulse::before {
        animation: none;
    }

    /* Skip layout and paint for sections still far off screen. The page is
       ten screens tall, so most of it is doing nothing but costing frames.
       contain-intrinsic-size keeps the scrollbar honest while they are
       skipped, so this does not reintroduce layout shift. */
    body > section:not(.hero-img):not(#ikamet-showcase) {
        content-visibility: auto;
        contain-intrinsic-size: auto 600px;
    }
}

/* ================================================================
   9. REDUCED MOTION
   Content still appears — only the movement is removed.
   ================================================================ */

@media (prefers-reduced-motion: reduce) {
    /* The offsets are set with the individual `translate`/`scale` properties, so
       resetting `transform` here reset nothing. JS masked it by adding
       .is-revealed immediately — but only when JS runs at all. */
    [data-reveal],
    [data-reveal].is-revealed {
        opacity: 1;
        translate: none;
        scale: none;
        transform: none;
        transition: none;
    }

    .btn-shine::after,
    .btn-pulse,
    .scroll-cue svg,
    .wa-float::before,
    .trust-strip__track {
        animation: none;
    }

    .card-interactive,
    .card-interactive:hover {
        transform: none;
    }

    .icon-tile,
    .solution-item__icon,
    .card-interactive:hover .icon-tile,
    .solution-item:hover .solution-item__icon {
        transform: none;
    }

    /* Charts still appear on hover — they just arrive fully drawn. */
    .stat__chart,
    .bar-row__fill,
    .donut__value,
    .spark__line,
    .spark__area,
    .spark__dot {
        transition: none;
    }

    .stat:hover .bar-row__fill { transform: scaleX(1); }
    .stat:hover .donut__value  { stroke-dashoffset: 0; }
    .stat:hover .spark__line   { stroke-dashoffset: 0; }

    /* Steps stay connected — the rail is information, not decoration, so it
       is shown in full rather than animated away. */
    .step-card:not(:last-child)::after {
        transform: none !important;
        transition: none;
    }

    .step-card__medallion,
    .step-card__num,
    .step-card:hover .step-card__medallion,
    .step-card:hover .step-card__num {
        transform: none;
        transition: none;
    }

    .card-interactive:hover .icon-tile--lg::after {
        animation: none;
    }

    .tcard,
    .tcard:hover,
    .tcard__mark,
    .tcard:hover .tcard__mark,
    .tcard__avatar,
    .tcard:hover .tcard__avatar {
        transform: none;
        transition: none;
    }

    .wa-float,
    .cta-bar {
        transition: none;
    }

    .trust-strip__track {
        /* Without the marquee the duplicated copy would be dead weight */
        width: 100%;
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--space-6);
    }
}