/* =============================================================================
 * Booster · secțiuni
 *
 * Ordinea și textele sunt ale clientului; fiecare secțiune poartă designul
 * secțiunii corespunzătoare din macheta Figma (nodul e trecut la fiecare).
 * Coordonatele în px sunt cele din cadrul de 1920 px, cu containerul de
 * 1400 px începând la 260 px.
 * ========================================================================== */

/* Ritmul machetei: 200 px între secțiuni. */
main > section + section {
    margin-top: var(--section-gap);
}

/* -----------------------------------------------------------------------------
 * 01 · Hero (648:1217)
 *
 * Cadrul are 1920 × 1080: titlul începe la 183 px, galeria la 560 px și ține
 * până jos, unde cardurile laterale sunt tăiate de
 * marginea secțiunii. Înălțimea galeriei urmează lățimea (27vw → 518 px la
 * 1920), deci cardurile păstrează proporția cadrului pe orice monitor.
 * -------------------------------------------------------------------------- */

.hero {
    --hero-top: clamp(7rem, 4rem + 6.5vw, 11.4375rem);  /* → 183 px, titlul */
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background-color: var(--surface-page);
}

.hero__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

/* Gradientul din machetă (648:48): grupul de 1992 × 857 px de la (-32, 266),
   rotit 180°, în procente din cadrul de 1920 × 1080. SVG-ul exportat iese din
   grup cât zona filtrului de blur. */
.hero__glow {
    position: absolute;
    top: 24.6519%;
    left: -1.6667%;
    width: 103.75%;
    height: 79.3625%;
    transform: rotate(180deg);
}

.hero__glow img {
    position: absolute;
    top: -33.4%;
    left: -2.86%;
    width: 105.72%;
    height: 140.05%;
    max-width: none;
}

/* Zgomotul din machetă (648:52) stă peste gradient, ca acolo. */
.hero__noise {
    position: absolute;
    inset: 0;
    background: url('../img/noise.png') 0 0 / 1024px 1024px;
    mix-blend-mode: overlay;
    opacity: 0.25;
}

.hero__copy {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    padding-top: var(--hero-top);
    text-align: center;
}

.hero__title {
    max-width: var(--measure-hero);
    font-size: var(--text-display);
    font-weight: 500;
    line-height: var(--lh-display);
    letter-spacing: var(--tracking-display);
    color: var(--ink);
    text-wrap: balance;
}

.hero__title em {
    font-style: normal;
    color: var(--brand-orange);
}

/* Literele din titlu care seamănă cu o rețea socială (logo-swap.js): la
   hover litera se stinge, iar logo-ul ei, pus peste literă, sare de la 40 %
   cu baza pe linia de bază. Span-urile sunt inline, deci titlul se rupe pe
   rânduri la fel. */
.logo-swap {
    transition: color var(--duration) var(--ease);
}

.logo-swap.is-swapped {
    color: transparent;
}

.logo-swap__logo {
    position: absolute;
    z-index: 1;
    max-width: none;
    opacity: 0;
    transform: scale(0.4);
    transform-origin: 50% 100%;
    pointer-events: none;
    transition:
        opacity var(--duration) var(--ease),
        transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.logo-swap__logo.is-on {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .logo-swap__logo {
        transform: none;
    }
}

.hero__lead {
    max-width: var(--measure-hero);
    font-size: var(--text-lead);
    line-height: var(--lh-text);
    color: var(--ink-lead);
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
}

/* Stickerele: centrele lor din machetă, raportate la containerul de 1400 px
   și la începutul titlului. Sub 1280 px ar intra peste lead, așa că dispar. */
.hero__sticker {
    display: none;
    pointer-events: auto;
    transition: transform 450ms var(--ease-spring);
}

/* La hover se înclină puțin mai tare, în sensul în care stau deja. */
.hero__sticker:hover {
    transform: translate(-50%, -50%) rotate(calc(var(--tilt) + var(--tilt-hover)));
}

.hero__sticker--stars {
    --tilt: -7.72deg;
    --tilt-hover: -4deg;
    top: calc(var(--hero-top) + 179.72px);
    left: 6.8964%;
}

.hero__sticker--reactions {
    --tilt: 6.28deg;
    --tilt-hover: 4deg;
    top: calc(var(--hero-top) + 78.27px);
    left: 89.1507%;
}

.hero__gallery {
    position: relative;
    height: clamp(22.5rem, 27vw, 32.5rem);
    margin-top: clamp(2rem, 3.2vw, 3.8125rem);
}

/* -----------------------------------------------------------------------------
 * 02 · Cifre — cardurile din 648:145, în trepte: cel din mijloc urcă 161 px
 * -------------------------------------------------------------------------- */

main > .stats {
    margin-top: clamp(4.5rem, 2rem + 6vw, 11.875rem);  /* → 190 px, ca în machetă */
}

.stats__grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 25px;
    align-items: start;
}

.stat {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 32px;
    min-height: 350px;
    padding: 74px 44px 34px;
    border-radius: var(--r-card);
    transition: transform 450ms var(--ease-spring);
}

/* La hover cardul se ridică și se înclină, fiecare în altă parte
   (--hover-tilt), iar în locul lui rămâne umbra: o copie mai pală, cu contur
   punctat. Fondul stă pe ::after și se mișcă odată cu cardul; umbra e
   ::before, mișcată invers, ca să rămână pe loc. Nuanțele sunt transparente,
   așa că fondul are alb dedesubt: altfel umbra s-ar vedea prin card. */
.stat::before,
.stat::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background-color: var(--stat-bg);
}

.stat::after {
    background-color: var(--surface-white);
    background-image: linear-gradient(var(--stat-bg), var(--stat-bg));
}

.stat::before {
    border: 1.5px dashed rgba(32, 32, 32, 0.22);
    opacity: 0;
    transition:
        transform 450ms var(--ease-spring),
        opacity var(--duration) var(--ease);
}

.stat:hover {
    transform: translateY(-8px) rotate(var(--hover-tilt));
}

.stat:hover::before {
    opacity: 0.6;
    transform: rotate(calc(-1 * var(--hover-tilt))) translateY(8px);
}

.stat--cream {
    --stat-bg: var(--tint-cream);
    --hover-tilt: -4deg;
    margin-top: 161px;
}

.stat--peach {
    --stat-bg: var(--tint-peach);
    --hover-tilt: 3.5deg;
}

.stat--amber {
    --stat-bg: var(--tint-amber);
    --hover-tilt: -4deg;
    margin-top: 161px;
}

.stat__value {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 3rem;
    font-weight: 500;
    line-height: 28px;
    white-space: nowrap;
}

.stat__title {
    font-size: 2rem;
    font-weight: 500;
    line-height: 42px;
}

.stat__text {
    margin-top: 19px;
    font-size: 0.875rem;
    line-height: normal;
    color: var(--ink-lead);
}

/* Avatarele de lângă număr: cercuri de 34 px care se suprapun cu 6 px */
.avatars {
    display: flex;
}

.avatars span {
    display: block;
    width: 34px;
    height: 34px;
    margin-right: -6px;
    overflow: hidden;
    border: 1px solid var(--tint-cream);
    border-radius: 50%;
    background-color: var(--bg);
}

.avatars img {
    width: 34px;
    height: 34px;
    max-width: none;
    margin: -1px 0 0 -1px;
    object-fit: cover;
}

/* Camera 3D (648:191) stă pe colțul cardului din dreapta. */
.stats__camera {
    position: absolute;
    top: 80px;
    left: 88.143%;
    width: 149px;
    height: auto;
    pointer-events: none;
    transition: transform 450ms var(--ease-spring);
}

/* Când se înclină cardul de sub ea, camera sare puțin. */
.stat--amber:hover ~ .stats__camera {
    transform: translateY(-14px) rotate(-10deg);
}

/* -----------------------------------------------------------------------------
 * 03 · Clienți — banda cu logo-urile clienților (nu are corespondent în Figma)
 *
 * Logo-urile, în culorile lor, direct pe fundalul paginii; la Hey Roger Smith
 * textul alb din SVG e negru, ca să se vadă pe alb. Banda curge singură și,
 * cu JavaScript (clients-marquee.js), se poate trage; animația CSS de mai jos
 * e doar pentru cazul fără JavaScript.
 * -------------------------------------------------------------------------- */

main > .clients {
    margin-top: clamp(4rem, 2rem + 5vw, 7.5rem);
    text-align: center;
}

.clients__viewport {
    margin-top: 18px;
    overflow: hidden;
    touch-action: pan-y;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.clients__viewport.is-draggable {
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}

.clients__viewport.is-dragging {
    cursor: grabbing;
}

.clients__track {
    display: flex;
    gap: 16px;
    width: max-content;
    padding: 8px 0;
    /* O perioadă = jumătatea benzii (logo-urile de patru ori, ~3500 px la
       1440 px): ~44 px pe secundă. */
    animation: clients-marquee 80s linear infinite;
}

.clients__viewport.is-draggable .clients__track {
    animation: none;
    will-change: transform;
}

.clients__item {
    --card: clamp(3.75rem, 2.9rem + 2.2vw, 5rem);
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    height: var(--card);
    padding-inline: clamp(1.25rem, 0.9rem + 1vw, 1.75rem);
}

/* Logo-ul are cam jumătate din înălțimea rândului, cu o corecție (--scale)
   ca toate să pară la fel de mari. */
.clients__logo {
    --scale: 1;
    width: auto;
    height: calc(var(--card) * 0.48 * var(--scale));
    pointer-events: none;
    -webkit-user-drag: none;
}

.clients__logo--dent-wolf {
    --scale: 1.15;
}

.clients__logo--bona-nanny {
    --scale: 1.3;
}

.clients__logo--hey-roger-smith {
    --scale: 1.1;
}

@keyframes clients-marquee {
    to {
        transform: translateX(calc(-50% - 8px));
    }
}

/* -----------------------------------------------------------------------------
 * 04 · Sistemul (648:321)
 *
 * Compoziția are 1400 × 1378 px și se scalează cu lățimea: toate pozițiile
 * sunt în unități de container (--u = 1 px din machetă).
 * -------------------------------------------------------------------------- */

.system__stage {
    position: relative;
    margin-top: 50px;
    container-type: inline-size;
}

.system__visual {
    --u: calc(100cqw / 1400);
    position: relative;
    height: calc(1378 * var(--u));
}

.system__base {
    position: absolute;
    top: calc(928.02 * var(--u));
    left: 0;
    width: calc(1398 * var(--u));
    height: calc(450 * var(--u));
    border-radius: calc(80 * var(--u));
    /* Elipsa de 2077,5 × 526 px centrată la 76 px deasupra cutiei */
    background: radial-gradient(148.6% 116.9% at 50% -16.9%, rgba(245, 171, 0, 0) 39.42%, rgb(245, 171, 0) 100%);
    opacity: 0.7;
}

.system__fire {
    --depth: 1.8;
    --i: 4;
    position: absolute;
    top: calc(760.65 * var(--u));
    left: calc(1164.63 * var(--u));
    width: calc(144.526 * var(--u));
    height: auto;
    transform: translate(-50%, -50%) rotate(-155.65deg) scaleY(-1) scale(var(--pop, 1));
}

.system__photo {
    position: absolute;
    top: 0;
    left: calc(238 * var(--u));
    width: calc(924 * var(--u));
    height: calc(1376 * var(--u));
    overflow: hidden;
}

.system__photo img {
    position: absolute;
    top: -11.63%;
    left: -8.77%;
    width: 110.82%;
    height: 111.63%;
    max-width: none;
}

/* Cardurile de 350 px se scalează odată cu compoziția. */
.system__post {
    position: absolute;
    width: calc(350 * var(--u));
    height: calc(350 * var(--u));
    gap: calc(10 * var(--u));
    padding: calc(12 * var(--u));
    border-radius: calc(30 * var(--u));
    transform: translate(-50%, -50%) rotate(var(--tilt)) scale(var(--pop, 1));
    transition: transform 450ms var(--ease-spring);
}

.system__post .post-card__media {
    border-radius: calc(20 * var(--u));
    background-size: calc(1392 * var(--u)) calc(783 * var(--u));
}

.system__post .post-card__media img {
    width: calc(var(--memoji-n, 326) * var(--u));
}

.system__post .post-card__label {
    font-size: max(0.6875rem, calc(18 * var(--u)));
    line-height: 1.55;
}

.system__post--a {
    --tilt: 8.92deg;
    --tilt-hover: 3deg;
    --depth: 0.9;
    --i: 1;
    --memoji-n: 350;
    top: calc(421.01 * var(--u));
    left: calc(1175.01 * var(--u));
}

.system__post--b {
    --tilt: 8.58deg;
    --tilt-hover: 3deg;
    --depth: 1.1;
    --i: 5;
    top: calc(1092.14 * var(--u));
    left: calc(1209.14 * var(--u));
}

.system__post--b .post-card__media img {
    top: 0;
    transform: translateX(-50%);
}

.system__post--c {
    --tilt: -4.45deg;
    --tilt-hover: -3deg;
    --depth: 0.7;
    --i: 0;
    --memoji-n: 307;
    top: calc(722.05 * var(--u));
    left: calc(188.05 * var(--u));
}

/* Cei patru pași ai sistemului, ca stickere în jurul fotografiei */
.system__steps {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* Sub ~1000 px fontul nu mai scade odată cu compoziția, iar stickerele de
   lângă margini ieșeau din pagină (pe tabletă apărea scroll orizontal). Un
   sticker e centrat pe poziția lui, deci îl încadrăm la cel mult dublul
   distanței până la cea mai apropiată margine (--edge, în px de machetă),
   minus 8 px pentru înclinare; când nu încape, textul trece pe două rânduri. */
.system__step {
    width: max-content;
    max-width: calc(2 * var(--edge) * 100cqw / 1400 - 8px);
    font-size: max(0.8125rem, calc(18 * 100cqw / 1400));
    white-space: normal;
    text-wrap: pretty;
}

.system__step--1 {
    --tilt: 7.26deg;
    --tilt-hover: 3deg;
    --depth: 1.3;
    --i: 2;
    --edge: 237.94;
    top: calc(142.98 * 100cqw / 1400);
    left: calc(237.94 * 100cqw / 1400);
}

.system__step--2 {
    --tilt: -6deg;
    --tilt-hover: -3deg;
    --depth: 1.5;
    --i: 3;
    --edge: 175;
    top: calc(150 * 100cqw / 1400);
    left: calc(1225 * 100cqw / 1400);
}

.system__step--3 {
    --tilt: -12deg;
    --tilt-hover: -3deg;
    --depth: 1.2;
    --i: 6;
    --edge: 200;
    top: calc(1150 * 100cqw / 1400);
    left: calc(200 * 100cqw / 1400);
}

.system__step--4 {
    --tilt: 5deg;
    --tilt-hover: 3deg;
    --depth: 1.4;
    --i: 7;
    --edge: 230;
    top: calc(1325 * 100cqw / 1400);
    left: calc(1170 * 100cqw / 1400);
}

/* Scena interactivă (system-stage.js). Fiecare strat are o adâncime
   (--depth): fotografia stă pe loc, iar cardurile, stickerele și flacăra se
   mișcă după cursor (--px, --py, de la −1 la 1) și la derulare (--sy, −1 când
   scena intră jos, 1 când iese sus), cu atât mai mult cu cât sunt mai
   „aproape". La intrarea în ecran apar pe rând (--i), din --pop și --rise; la
   hover se înclină mai tare (--tilt-hover) și cresc puțin. Fără JavaScript
   sau cu mișcare redusă, compoziția stă ca în machetă. */
@property --pop {
    syntax: '<number>';
    inherits: false;
    initial-value: 1;
}

@property --rise {
    syntax: '<length>';
    inherits: false;
    initial-value: 0px;
}

/* Amplitudinile sunt din machetă (14 px la cursor, 36 px la derulare, 48 px
   la apariție, pe 1400 px) și scad odată cu scena: 1cqw = 14 px de machetă. */
.system__post,
.system__fire {
    translate:
        calc(var(--px, 0) * var(--depth) * 1cqw)
        calc((var(--py, 0) * 1cqw - var(--sy, 0) * 2.571cqw) * var(--depth) + var(--rise, 0px));
}

.system__post:hover {
    transform: translate(-50%, -50%) rotate(calc(var(--tilt) + var(--tilt-hover))) scale(calc(var(--pop, 1) * 1.05));
}

/* Stickerele se mișcă doar cât stau în jurul fotografiei; sub 768 px sunt
   în grila de sub ea. */
@media (min-width: 768px) {
    .system__step {
        pointer-events: auto;
        transform: translate(-50%, -50%) rotate(var(--tilt)) scale(var(--pop, 1));
        translate:
            calc(var(--px, 0) * var(--depth) * 1cqw)
            calc((var(--py, 0) * 1cqw - var(--sy, 0) * 2.571cqw) * var(--depth) + var(--rise, 0px));
        transition: transform 450ms var(--ease-spring);
    }

    .system__step:hover {
        transform: translate(-50%, -50%) rotate(calc(var(--tilt) + var(--tilt-hover))) scale(calc(var(--pop, 1) * 1.04));
    }
}

/* Apariția: până intră scena în ecran (is-pending) straturile stau ascunse și
   fotografia puțin mărită; apoi (is-visible) fotografia revine, iar restul
   sar pe rând în poziție. Umplerea „backwards" lasă hover-ul liber după. */
.system__photo img {
    transform-origin: 50% 100%;
    transition: scale 1.6s var(--ease);
}

.system__stage.is-pending .system__photo img {
    scale: 1.06;
}

.system__stage.is-pending :is(.system__post, .system__fire, .system__step) {
    opacity: 0;
}

.system__stage.is-visible :is(.system__post, .system__fire, .system__step) {
    animation: system-pop 900ms var(--ease-spring) backwards;
    animation-delay: calc(250ms + var(--i, 0) * 110ms);
}

@keyframes system-pop {
    from {
        opacity: 0;
        --pop: 0.6;
        --rise: 3.43cqw;
    }
}

/* -----------------------------------------------------------------------------
 * 05 · Procesul (648:417) — carduri de 450 × 440 px pe o pistă orizontală
 * -------------------------------------------------------------------------- */

.process__track {
    --edge: max(var(--gutter), (100% - var(--container)) / 2);
    display: flex;
    gap: 24px;
    margin-top: 50px;
    padding-inline: var(--edge);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--edge);
    scrollbar-width: none;
}

.process__track::-webkit-scrollbar {
    display: none;
}

.process__track:focus-visible {
    outline-offset: -2px;
}

.process__controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 35px;
}

.step {
    position: relative;
    flex: 0 0 450px;
    height: 440px;
    overflow: hidden;
    border-radius: var(--r-card);
    background-color: var(--surface-white);
    scroll-snap-align: start;
    isolation: isolate;
}

/* Gradientul cardului (648:425): forma portocalie de jos (648:426) stă sub un
   strat alb 5 % cu blur de fundal 160 (648:432). Stratul are 500 px, ca în
   machetă: trece de marginea de jos și ia de acolo alb, deci jos rămâne pal. */
.step::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 500px;
    background-color: rgb(255 255 255 / 0.05);
    -webkit-backdrop-filter: blur(160px);
    backdrop-filter: blur(160px);
}

.step__glow {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 253.125px;
    overflow: hidden;
    background-color: var(--surface-white);
}

/* Zgomotul din machetă (648:431) */
.step__glow::after {
    content: '';
    position: absolute;
    inset: 0;
    background: url('../img/noise.png') 0 0 / 240px 240px;
    mix-blend-mode: overlay;
    opacity: 0.25;
}

/* Pașii 2 și 4 (648:467, 648:585): grupul e întors cu 180°, deci gradientul
   stă sus și se stinge în alb spre text. */
.step--flip .step__glow {
    top: 59.875px;
    bottom: auto;
    transform: rotate(180deg);
}

.step--flip::before {
    -webkit-backdrop-filter: blur(130px);
    backdrop-filter: blur(130px);
}

/* La pasul 4 grupul e urcat cu 40 px și are blurul obișnuit. */
.step--flip-up .step__glow {
    top: 19.875px;
}

.step--flip-up::before {
    top: -40px;
    -webkit-backdrop-filter: blur(160px);
    backdrop-filter: blur(160px);
}

.step__blob {
    position: absolute;
    top: 62.4px;
    left: -7.5px;
    width: 466.875px;
    height: 200.886px;
    transform: rotate(180deg);
}

.step__blob img {
    position: absolute;
    top: -33.4%;
    left: -2.86%;
    width: 105.72%;
    height: 140.05%;
    max-width: none;
}

.step__art {
    position: absolute;
    inset: 0 0 auto;
    height: 270px;
}

.step__body {
    position: absolute;
    top: 279px;
    right: 44px;
    left: 44px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.step__text {
    font-size: 0.875rem;
    line-height: normal;
    color: var(--ink-lead);
}

.step__title {
    font-size: 2rem;
    font-weight: 500;
    line-height: 42px;
}

/* „Pasul N", scris de mână, în colțul de jos */
.step__tag {
    position: absolute;
    right: 22px;
    bottom: 14px;
    font-family: var(--font-hand);
    font-size: 1.5rem;
    line-height: normal;
    color: var(--ink);
    transform: rotate(-6.1deg);
    transform-origin: 100% 100%;
}

.step__tag--light {
    color: #ffffff;
}

/* Elementele ilustrațiilor */
.mini-card {
    position: absolute;
    display: block;
    width: 186px;
    height: 186px;
    border: 1px solid #ffffff;
    border-radius: 16px;
}

.mini-card > img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 192px;
    max-width: none;
    transform: translate(-50%, -50%);
}

.mini-pill {
    position: absolute;
    top: 7px;
    left: 9px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 0 7px;
    border-radius: 16px;
    background-color: #ffffff;
    font-size: 7px;
    line-height: 15px;
    color: #000000;
}

.mini-pill i {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background-color: var(--online);
}

/* Panourile din ilustrații, în stilul machetei (648:480): alb 80 %, rază 16,
   eticheta mică gri deasupra cifrei mari. Blurul de sticlă din 648:515
   estompează ce stă dedesubt (memoji-ul de la pasul 4). */
.panel {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 13.569px;
    overflow: hidden;
    border-radius: 16px;
    background-color: rgba(255, 255, 255, 0.8);
    -webkit-backdrop-filter: blur(37px);
    backdrop-filter: blur(37px);
}

/* Sticla din pasul 3 (648:515) */
.panel--glass {
    border: 1px solid #ffffff;
    background-color: rgba(255, 255, 255, 0.3);
    -webkit-backdrop-filter: blur(37px);
    backdrop-filter: blur(37px);
}

.panel__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.panel__label {
    font-size: 0.875rem;
    line-height: normal;
    color: rgba(32, 32, 32, 0.5);
    white-space: nowrap;
}

/* Ca linkul din 648:742: eticheta pe o pastilă, aici crem ca „80 %” din
   648:534, ca să se vadă pe panoul alb */
.panel__label--chip {
    padding: 2px 12px;
    border-radius: 6px;
    background-color: #efe3d0;
}

.panel__value {
    font-size: 2.5rem;
    font-weight: 500;
    line-height: normal;
    white-space: nowrap;
    text-box: trim-both cap alphabetic;
}

.panel__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Rândul de sub linie, ca avatarele din 648:485 */
.panel__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 24px;
    border-top: 1px solid rgba(107, 102, 89, 0.2);
}

/* Bara din 648:519: fond crem, umplere portocalie în degrade */
.panel .meter {
    height: 6px;
    background-color: #efe3d0;
}

.panel .meter > span {
    width: var(--fill);
    height: 5px;
    margin: 0.43px;
    background-image: linear-gradient(90deg, #ff6600, #ff7f02 73.889%);
    transition: width 700ms var(--ease);
}

.check {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.875rem;
    line-height: normal;
}

.check::before {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 600;
    color: #ffffff;
}

.check--ok::before {
    content: "✓";
    background-color: var(--online);
}

.check--bad::before {
    content: "✕";
    background-color: var(--brand-orange);
}

/* Statusul are forma etichetei verzi de lângă cursor (648:498) */
.status-on {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 12px;
    border-radius: 4px;
    background-color: #078d4b;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: normal;
    color: #ffffff;
}

.status-on i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: #ffffff;
    transition: box-shadow 500ms var(--ease);
}

.panel__arrow {
    display: inline-block;
}

.bars {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 56px;
}

.bars i {
    flex: 1;
    height: var(--h);
    border-radius: 4px;
    background-color: var(--brand-peach);
}

.bars i:last-child {
    background-image: linear-gradient(0deg, #ff6600, #ff7f02 73.889%);
}

/* Pasul 1: chatul verde (648:447) peste cardul memoji (648:438) */
.step1__memoji {
    top: 128px;
    left: 302px;
    transform: translate(-50%, -50%) rotate(15deg);
}

.step1__chat {
    position: absolute;
    top: 153px;
    left: 138px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    width: 192px;
    height: 192px;
    padding: 14px;
    border: 2.262px solid #ffffff;
    border-radius: 22.6px;
    background-image: linear-gradient(152deg, #cfe0bc 5.71%, #b1c29e 93.86%);
    font-size: 9px;
    color: var(--ink);
    transform: translate(-50%, -50%) rotate(-5.28deg);
}

.step1__chat-title {
    align-self: center;
    font-weight: 500;
    color: #6b7c58;
}

.bubble {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 11px;
    border-radius: 9px;
    background-color: #fffefe;
    line-height: normal;
}

.bubble--answer {
    align-self: flex-end;
    padding-right: 4px;
}

.bubble--answer img {
    width: 16px;
    height: 16px;
    border-radius: 4px;
}

/* Pasul 2: lista de audit în panoul alb din 648:480 și cursorul din 662:1218 */
.step2__audit {
    top: 39px;
    left: 43px;
    width: 364px;
}

.cursor-tag {
    position: absolute;
}

/* Săgeata e rotită cu -36° și stă peste colțul etichetei, ca în machetă */
.cursor-tag img {
    position: absolute;
    top: -16.55px;
    left: -16.37px;
    width: 21.525px;
    height: 23.356px;
    max-width: none;
    transform: rotate(-36deg);
    transform-origin: 10.77px 10.35px;
}

.cursor-tag span {
    display: block;
    padding: 3px 12px;
    border-radius: 4px;
    background-color: #078d4b;
    font-size: 0.75rem;
    line-height: normal;
    color: #ffffff;
    white-space: nowrap;
}

.step2__cursor {
    top: 232px;
    left: 316px;
}

/* Pasul 3: teancul de trei carduri de sticlă (648:515, 648:538, 648:561),
   cu centrul comun în (230, 131) */
.step3__plan {
    position: absolute;
    top: 131px;
    left: 48px;
    display: grid;
    width: 364px;
    transform: translateY(-50%);
}

.step3__plan > .panel {
    position: relative;
    grid-area: 1 / 1;
}

.step3__plan > .panel:nth-child(1) {
    opacity: 0.5;
    transform: rotate(1.2deg);
}

.step3__plan > .panel:nth-child(2) {
    transform: rotate(-1.47deg);
}

.step3__plan > .panel:nth-child(3) {
    transform: rotate(-5.05deg);
}

/* Pasul 4: cardul memoji (648:584) și statusul campaniei */
.step4__memoji {
    top: 112px;
    left: 330px;
    transform: translate(-50%, -50%) rotate(8deg);
}

.step4__live {
    top: 126px;
    left: 34px;
    width: 260px;
    transform: rotate(-3deg);
}

/* Pasul 5: costul pe cerere. Panoul stă pe zona albă a cardului, așa că e
   alb plin și are umbra stickerelor, ca să se desprindă de fundal. */
.step5__cost {
    top: 40px;
    left: 50px;
    width: 350px;
    gap: 12px;
    box-shadow: var(--shadow-sticker);
    transform: rotate(-2.53deg);
}

/* Hover pe card: ilustrația „joacă" pasul. Sunt doar tranziții și o singură
   animație fără repetare, așa că regula de mișcare redusă din base.css le
   oprește pe toate. */
.step1__chat,
.step1__memoji,
.step2__audit,
.step3__plan > .panel,
.step4__memoji,
.step4__live,
.step5__cost,
.panel__arrow {
    transition: transform 550ms var(--ease-spring);
}

.bubble--answer {
    transition: transform 450ms var(--ease-spring);
}

.step2__cursor {
    transition: transform 800ms var(--ease);
}

.bars i {
    transition: height 600ms var(--ease-spring);
}

.bars i:nth-child(2) {
    transition-delay: 40ms;
}

.bars i:nth-child(3) {
    transition-delay: 80ms;
}

.bars i:nth-child(4) {
    transition-delay: 120ms;
}

/* Pasul 1: cele două carduri se desfac în evantai, răspunsurile se apropie */
.step:hover .step1__chat {
    transform: translate(calc(-50% - 8px), calc(-50% - 6px)) rotate(-9deg);
}

.step:hover .step1__memoji {
    transform: translate(calc(-50% + 8px), calc(-50% - 8px)) rotate(19deg);
}

.step:hover .bubble--answer {
    transform: translateX(-4px);
}

.step:hover .bubble--answer:nth-child(5) {
    transition-delay: 60ms;
}

/* Pasul 2: bifele sar pe rând, cursorul echipei merge la problema găsită */
.step:hover .step2__audit {
    transform: translateY(-4px);
}

.step:hover .check::before {
    animation: check-pop 450ms var(--ease) both;
}

.step:hover .check:nth-child(2)::before {
    animation-delay: 90ms;
}

.step:hover .check:nth-child(3)::before {
    animation-delay: 180ms;
}

.step:hover .step2__cursor {
    transform: translate(-127px, -12px);
}

/* Pasul 3: teancul se răsfiră, planul avansează */
.step:hover .step3__plan > .panel:nth-child(1) {
    transform: rotate(4deg) translate(8px, -8px);
}

.step:hover .step3__plan > .panel:nth-child(2) {
    transform: rotate(0.5deg) translate(3px, -3px);
}

.step:hover .step3__plan > .panel:nth-child(3) {
    transform: rotate(-7deg) translate(-6px, 4px);
}

/* Pasul 4: memoji-ul se ridică, campania pornește */
.step:hover .step4__memoji {
    transform: translate(-50%, calc(-50% - 6px)) rotate(12deg) scale(1.03);
}

.step:hover .step4__live {
    transform: rotate(-1deg) translateY(-4px);
}

.step:hover .panel .meter > span {
    width: min(100% - 0.86px, var(--fill) + 24%);
}

.step:hover .status-on i {
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.3);
}

/* Pasul 5: costul coboară și mai mult */
.step:hover .step5__cost {
    transform: rotate(-1deg) translateY(-4px);
}

.step:hover .panel__arrow {
    transform: translateY(5px);
}

.step:hover .bars i:nth-child(2) {
    height: 66%;
}

.step:hover .bars i:nth-child(3) {
    height: 42%;
}

.step:hover .bars i:nth-child(4) {
    height: 22%;
}

@keyframes check-pop {
    50% {
        transform: scale(1.25);
    }
}

/* -----------------------------------------------------------------------------
 * 06 · Planificatorul — antetul din 648:390, formularul în stilul machetei
 * -------------------------------------------------------------------------- */

.planner__head {
    position: relative;
    padding: 51px 0 40px;
}

/* Câte trei întrebări de fiecare parte a titlului, pe arcul din machetă
   (648:403 și 648:410): centrele și înclinările de acolo, raportate la
   containerul de 1400 px și la începutul antetului. Sub 1280 px ar intra
   peste lead, așa că apar doar de acolo în sus. */
.planner__q {
    display: none;
}

.planner__q--1 {
    --tilt: 15deg;
    top: 48.8px;
    left: 12.06%;
}

.planner__q--2 {
    --tilt: -2.08deg;
    top: 211.26px;
    left: 12.228%;
}

.planner__q--3 {
    --tilt: -8.24deg;
    top: 339.74px;
    left: 10.83%;
}

.planner__q--4 {
    --tilt: -15deg;
    top: 61.25px;
    left: 88.53%;
}

.planner__q--5 {
    --tilt: 2.08deg;
    top: 205.84px;
    left: 91.01%;
}

.planner__q--6 {
    --tilt: 8.24deg;
    top: 333.07px;
    left: 87.5%;
}

.planner__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 40px;
    align-items: stretch;
    margin-top: 50px;
}

.planner__form {
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding: 33px 44px;
}

.choice {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.choice legend {
    margin-bottom: 14px;
    padding: 0;
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 28px;
}

.choice__options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.planner__result {
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 33px 44px;
}

.planner__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.planner__eyebrow {
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--brand-cream);
}

.planner__live {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--brand-yellow);
}

.planner__label,
.planner__facts dt {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.82);
}

.planner__channels {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.planner__channels li {
    padding: 8px 14px;
    border-radius: var(--r-btn);
    background-color: #ffffff;
    font-size: 1rem;
    font-weight: 500;
    color: var(--brand-orange-deep);
}

.planner__steps {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}

.planner__steps li {
    display: flex;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--r-btn);
    background-color: rgba(255, 255, 255, 0.16);
    font-size: 1rem;
    line-height: 1.45;
}

.planner__steps b {
    font-weight: 600;
    color: var(--brand-yellow);
}

.planner__facts {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
}

.planner__facts dd {
    font-size: 1.125rem;
    font-weight: 500;
}

.planner__result .btn--light {
    align-self: flex-start;
    margin-top: auto;
}

.planner__note {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.75);
}

/* -----------------------------------------------------------------------------
 * 07 · Servicii (648:192) — cinci carduri de 338 × 400 px, în evantai
 *
 * Evantaiul îl așază bounce-cards.js, cu pozițiile și înclinările din machetă
 * (main.js). Fără JavaScript, ca și sub 900 px, cardurile stau pe un rând
 * care se derulează, fiecare puțin înclinat.
 * -------------------------------------------------------------------------- */

.services__cards {
    display: flex;
    gap: 20px;
    margin: 50px calc(-1 * var(--gutter)) 0;
    padding: 76px var(--gutter) 48px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.services__cards::-webkit-scrollbar {
    display: none;
}

/* Grupul din machetă are 1401 × 534 px; cardurile pornesc din centrul lui. */
.services__cards[data-layout="fan"] {
    position: relative;
    display: block;
    height: 534px;
    margin-inline: 0;
    padding: 0;
    overflow: visible;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.service-card {
    --tag-bg: #f5cdb2;
    --tag-ink: #8a4426;
    --bullet: url('../img/decor/bullet.svg');
    position: relative;
    isolation: isolate;
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    width: 338px;
    height: 400px;
    padding: 54px 24px 24px;
    border-radius: 30px;
    scroll-snap-align: center;
    transform: rotate(var(--row-tilt));
}

.services__cards[data-layout="fan"] .service-card {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    will-change: transform;
}

/* Culorile și iconițele fiecărui card (648:205 … 648:300). */
.service-card--peach {
    --bullet: url('../img/decor/bullet-black.svg');
    --i: 0;
    --row-tilt: 2.09deg;
    --icon-x: 278.29px;
    --icon-y: 17.29px;
    --icon-turn: rotate(-8.05deg);
    background-color: #fbe3d0;
}

.service-card--green {
    --tag-bg: #d3e3c2;
    --tag-ink: #4f6b45;
    --i: 1;
    --row-tilt: -3.05deg;
    --icon-x: 261.09px;
    --icon-y: 2.72px;
    --icon-turn: rotate(0deg);
    background-image: linear-gradient(146.882deg, #e6eedc 10.615%, #c0daa0 106%);
}

.service-card--blue {
    --tag-bg: #cbd9f0;
    --tag-ink: #3e5480;
    --i: 2;
    --row-tilt: 2.59deg;
    --icon-x: 266.88px;
    --icon-y: 15.88px;
    --icon-turn: rotate(-10deg);
    background-image: linear-gradient(144.758deg, #e1e9f7 3.842%, #a9bfe5 117.9%);
}

.service-card--yellow {
    --tag-bg: #f5e3a8;
    --tag-ink: #7a6218;
    --i: 3;
    --row-tilt: -4.05deg;
    --icon-x: 271.05px;
    --icon-y: 12.05px;
    --icon-turn: rotate(15.67deg);
    background-image: linear-gradient(149.393deg, #fbf0ce 6.754%, #f1d788 122.42%);
}

.service-card--purple {
    --tag-bg: #dfd0f0;
    --tag-ink: #5e4a85;
    --i: 4;
    --row-tilt: 1.74deg;
    --icon-x: 269.6px;
    --icon-y: 3.08px;
    --icon-turn: rotate(173.05deg) scaleY(-1);
    background-image: linear-gradient(148.417deg, #ede4f7 2.076%, #d3bdec 99.636%);
}

/* Primul card (648:206): dreptunghiul alb cu valul portocaliu, estompat de
   stratul cu blur de deasupra lui, apoi o ceață albă de 5 %. */
.service-card__glow {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    border-radius: inherit;
}

.service-card__glow::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(255, 255, 255, 0.05);
}

.service-card__glow-fill {
    position: absolute;
    left: 0;
    bottom: 51.93px;
    width: 390.619px;
    height: 219.723px;
    overflow: hidden;
    background-color: #ffffff;
    filter: blur(138.887px);
}

.service-card__glow-shape {
    position: absolute;
    top: 54.17px;
    left: -6.51px;
    width: 405.273px;
    height: 174.377px;
    transform: rotate(180deg);
}

.service-card__glow-shape img {
    position: absolute;
    top: -33.4%;
    left: -2.86%;
    max-width: none;
}

.service-card__icon {
    position: absolute;
    top: var(--icon-y);
    left: var(--icon-x);
    width: 112px;
    height: 112px;
    transform: translate(-50%, -50%) var(--icon-turn);
    pointer-events: none;
}

.service-card__tag {
    padding: 6px 12px;
    border-radius: 6px;
    background-color: var(--tag-bg);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: normal;
    color: var(--tag-ink);
    text-transform: lowercase;
}

.service-card__title {
    font-size: 1.5rem;
    font-weight: 500;
    line-height: normal;
}

.service-card__text {
    font-size: 1rem;
    line-height: normal;
    color: rgba(32, 32, 32, 0.8);
}

/* Linia stă la 207 px și lista la 231 px când descrierea are două rânduri. */
.service-card__rule {
    margin-top: 18px;
}

/* Textul listei e tăiat, în machetă, la înălțimea majusculelor (14 px). */
.service-card__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 17px;
    font-size: 1.125rem;
    line-height: 14px;
    color: rgba(32, 32, 32, 0.8);
}

.service-card__list li {
    display: flex;
    gap: 19px;
    white-space: nowrap;
}

.service-card__list li::before {
    content: '';
    flex: none;
    width: 11.2px;
    height: 14px;
    background: var(--bullet) no-repeat 0 0 / 100% 100%;
}

/* Pe rând, cardurile apar pe același arc ca evantaiul (apariția din
   bounce-cards.js: rigiditate 170, săritură 0,6). */
@media (prefers-reduced-motion: no-preference) {
    .services__cards[data-layout="row"] .service-card {
        transform: rotate(var(--row-tilt)) scale(0);
    }

    .services__cards[data-layout="row"].is-visible .service-card {
        animation: service-pop 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) both;
        animation-timing-function: linear(0, 0.048, 0.169, 0.332, 0.511, 0.685, 0.839, 0.966, 1.061, 1.125, 1.16, 1.17, 1.163, 1.143, 1.115, 1.085, 1.055, 1.028, 1.007, 0.99, 0.979, 0.973, 0.971, 0.972, 0.975, 0.98, 0.985, 0.99, 0.995, 0.999, 1.002, 1.003, 1.005, 1.005, 1.005, 1.004, 1);
        animation-delay: calc(0.5s + var(--i) * 60ms);
    }
}

@keyframes service-pop {
    from {
        transform: rotate(var(--row-tilt)) scale(0);
    }

    to {
        transform: rotate(var(--row-tilt)) scale(1);
    }
}

/* -----------------------------------------------------------------------------
 * 08 · Tot într-un loc (648:830)
 * -------------------------------------------------------------------------- */

.dashboard .tabs {
    margin-top: 2px;
}

.dashboard__cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 25px;
    align-items: stretch;
    margin-top: 50px;
}

.board {
    display: flex;
    flex-direction: column;
    gap: 54px;
    min-height: 269px;
    padding: 33px 44px;
}

.board--peach {
    border-radius: var(--r-card);
    background-color: var(--tint-peach);
}

.board__head {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: clamp(1.5rem, 1rem + 0.9vw, 1.875rem);
    font-weight: 500;
    line-height: 28px;
    white-space: nowrap;
}

.board__head--light {
    color: var(--brand-cream);
}

.board__rows {
    display: flex;
    flex-direction: column;
    gap: 19px;
}

.board__rows div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.board__rows dt {
    font-size: 1.125rem;
}

.board__rows dd {
    font-size: 1.25rem;
    font-weight: 500;
    text-align: right;
}

.board__money {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.board__big {
    font-size: 2.5rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.02em;
}

.board__note {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.88);
}

.board__money .meter {
    margin-top: 10px;
}

/* „Responsabil" ia locul butonului „Publică proiectul" din machetă */
.board__owner {
    margin-top: -35px;
    padding: 10px 24px;
    border-radius: var(--r-btn);
    background:
        radial-gradient(90% 160% at 85% 120%, rgba(255, 217, 45, 0.85) 0%, rgba(247, 205, 37, 0) 60%),
        var(--brand-orange);
    font-size: var(--text-btn);
    line-height: 28px;
    text-align: center;
    color: #ffffff;
}

/* -----------------------------------------------------------------------------
 * 09 · Reguli clare (648:924)
 * -------------------------------------------------------------------------- */

.rules__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 25px;
    margin-top: 50px;
}

.rule {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
}

.rule__title {
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 28px;
}

.rule__text {
    font-size: 1.125rem;
    line-height: 1.5;
}

/* -----------------------------------------------------------------------------
 * 10 · Studii de caz (648:959) — o cutie cu fundalul hero-ului
 * -------------------------------------------------------------------------- */

.cases__box {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    gap: 50px;
    padding: 40px;
    overflow: hidden;
    border-radius: var(--r-panel);
    background-color: var(--surface-page);
}

.cases__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
}

.cases__glow {
    position: absolute;
    top: 167.14px;
    left: -7.014%;
    width: 116.04%;
    height: 699px;
    transform: rotate(180deg);
}

.cases__glow img {
    position: absolute;
    top: -33.4%;
    left: -2.86%;
    width: 105.72%;
    height: 140.05%;
    max-width: none;
}

.cases__noise {
    position: absolute;
    inset: 0;
    background: url('../img/noise.png') 0 0 / 758.5px 758.5px;
    mix-blend-mode: overlay;
    opacity: 0.25;
}

.cases__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
}

.cases__head .eyebrow {
    margin-bottom: 8px;
}

.cases__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.case {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12.155px;
    aspect-ratio: 1;
    padding: 14.586px;
    border-radius: 36.464px;
    background-color: #ffffff;
    box-shadow: var(--shadow-card);
    transition: transform var(--duration) var(--ease);
}

/* Linkul din titlu acoperă tot cardul și duce la pagina cazului. */
.case__link::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.case:has(.case__link):hover {
    transform: translateY(-4px);
}

.case__link:focus-visible {
    outline: none;
}

.case__link:focus-visible::after {
    outline: 2px solid var(--brand-orange);
    outline-offset: 3px;
}

/* Captura site-ului clientului pe tot cardul, aceeași ca în galeria din hero
   (decupajul pătrat din assets/img/cases). La hover poza se mărește puțin,
   ca pe pagina de cazuri. */
.case__media {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    border-radius: 24.309px;
}

.case__shot {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: 50% 0;
    transition: transform 0.5s cubic-bezier(0, 0, 0.2, 1);
}

.case:has(.case__link):hover .case__shot {
    transform: scale(1.05);
}

.case__title {
    padding-inline: 2px;
    font-size: 1.125rem;
    font-weight: 400;
    line-height: normal;
}

.case__meta {
    padding: 0 2px 2px;
    margin-top: -10px;
    font-size: 0.875rem;
    line-height: normal;
}

/* -----------------------------------------------------------------------------
 * 11 · FAQ (648:1114)
 * -------------------------------------------------------------------------- */

.faq__columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 50px;
    align-items: start;
    margin-top: 50px;
}

/* -----------------------------------------------------------------------------
 * 12 · CTA (648:1159) — chenarul e o componentă (components.css), comună cu
 * finalul paginii de cazuri; aici rămâne doar locul lui în pagină.
 * -------------------------------------------------------------------------- */

main > .cta {
    margin-bottom: var(--section-gap);
}


/* -----------------------------------------------------------------------------
 * Ecrane mai înguste
 * -------------------------------------------------------------------------- */

@media (min-width: 1280px) {
    .hero__sticker,
    .planner__q {
        display: inline-flex;
    }

    /* Arcul de întrebări ține de la 8 la 379 px; textul stă la mijlocul lui
       (în machetă îl centra și butonul de sub lead, pe care aici nu-l avem),
       iar cardurile încep la 60 px sub ultima întrebare. */
    .planner__head {
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-height: 379px;
        padding: 8px 0 0;
    }

    .planner__grid {
        margin-top: 60px;
    }
}

/* Până la 1360 px lead-ul pe un rând ar ajunge lângă întrebările din mijloc:
   se rupe la punct, pe două rânduri, iar arcul rămâne cel din machetă. */
@media (min-width: 1280px) and (max-width: 1359px) {
    .planner__head .section-lead {
        max-width: 36rem;
        text-wrap: balance;
    }
}

@media (max-width: 1100px) {
    .stats__grid,
    .dashboard__cards,
    .rules__grid,
    .cases__grid {
        grid-template-columns: minmax(0, 1fr);
        max-width: 560px;
        margin-inline: auto;
    }

    .stat--cream,
    .stat--amber {
        margin-top: 0;
    }

    .stat {
        min-height: 0;
        padding-top: 48px;
    }

    .stats__camera {
        top: -60px;
        left: auto;
        right: 0;
        width: 110px;
    }

    .planner__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 25px;
    }

    .case {
        aspect-ratio: auto;
    }

    .case__media {
        min-height: 260px;
    }

    .faq__columns {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .faq__column + .faq__column .faq__item:first-child {
        border-top: 0;
    }

    .faq__column:first-child .faq__item:last-child {
        border-bottom: 0;
    }
}

@media (max-width: 767px) {
    /* Pașii sistemului ies de pe fotografie și se așază sub ea. */
    .system__steps {
        position: static;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        margin-top: 24px;
    }

    .system__step {
        position: static;
        width: auto;
        max-width: none;
        font-size: 0.9375rem;
        transform: none;
    }

    .process__controls .btn {
        display: none;
    }

    .process__controls {
        justify-content: flex-end;
    }

    .board,
    .planner__form,
    .planner__result {
        padding: 28px 24px;
    }

    .cases__box {
        padding: 24px;
        border-radius: var(--r-box);
    }
}

@media (max-width: 640px) {
    .hero__copy {
        gap: 1rem;
    }

    .hero__actions {
        gap: 0.75rem;
    }

    .hero__actions .btn {
        padding-inline: 20px;
    }

    .step {
        zoom: 0.8;
    }

    .stat__value {
        font-size: 2.5rem;
    }

    .stat__title {
        font-size: 1.625rem;
        line-height: 34px;
    }

    .board__head {
        font-size: 1.5rem;
    }
}

@media (max-width: 400px) {
    .step {
        zoom: 0.72;
    }
}

@media (prefers-reduced-motion: reduce) {
    .clients__track {
        animation: none;
    }

    .case__shot {
        transition: none;
    }
}