/* ==========================================================================
   GudToGo product website — design system
   Brand red on white, concrete and asphalt. Archivo throughout, as on the original site.
   Visuals are real app screenshots only.
   ========================================================================== */

:root {
    --red: #FE2037;
    --red-press: #E5132A;
    --red-ink: #C80E25;
    --red-wash: #FFE9EC;
    --asphalt: #26282E;
    --asphalt-2: #32353C;
    --asphalt-line: #43464E;
    --concrete: #EEF0F3;
    --concrete-2: #E2E5EA;
    --white: #FFFFFF;
    --ink: #242B3A;
    --slate: #656B76;
    --slate-light: #A7ACB6;
    --green: #12A15A;

    --font: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --fs-display: clamp(2.2rem, 1.4rem + 2.8vw, 3.6rem);
    --fs-h2: clamp(1.75rem, 1.3rem + 1.6vw, 2.6rem);
    --fs-h3: clamp(1.2rem, 1.1rem + .4vw, 1.4rem);
    --fs-lead: clamp(1.075rem, 1rem + .3vw, 1.25rem);
    --fs-body: 1.0625rem;
    --fs-small: .9375rem;
    --fs-tiny: .8125rem;

    --wrap: 1200px;
    --gutter: clamp(16px, 4vw, 40px);
    --section: clamp(72px, 9vw, 128px);

    --r-sm: 8px;
    --r-md: 14px;
    --r-lg: 22px;
    --r-phone: 44px;

    --ease-out: cubic-bezier(.2, .8, .2, 1);
    --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--font);
    font-size: var(--fs-body);
    line-height: 1.6;
    color: var(--ink);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--red); color: var(--white); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--ink); color: var(--white); padding: 10px 16px; border-radius: var(--r-sm); text-decoration: none; }
.skip-link:focus { top: 12px; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); }
.section--concrete { background: var(--concrete); }
.section--asphalt { background: var(--asphalt); color: var(--white); }
.section--tight { padding-block: clamp(56px, 6vw, 88px); }

/* ---------- Type ---------- */
.display, .h2, .h3 { font-weight: 700; letter-spacing: -.015em; line-height: 1.12; text-wrap: balance; color: var(--ink); }
.section--asphalt .h2, .section--asphalt .h3, .cta-band .h2, .auth__show .h2 { color: var(--white); }
.display { font-size: var(--fs-display); line-height: 1.08; letter-spacing: -.02em; }
.h2 { font-size: var(--fs-h2); }
.h3 { font-size: var(--fs-h3); line-height: 1.3; letter-spacing: 0; }
.lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--slate); max-width: 60ch; text-wrap: pretty; }
.section--asphalt .lead { color: var(--slate-light); }
.muted { color: var(--slate); }
.small { font-size: var(--fs-small); }
.tiny { font-size: var(--fs-tiny); }
.tnum { font-variant-numeric: tabular-nums; }
.prose { max-width: 68ch; }
.prose p + p { margin-top: 1em; }
.prose h3 { margin-top: 1.8em; margin-bottom: .5em; }
.prose ul { padding-left: 1.2em; margin-top: .8em; }
.prose ul + p, .prose p + ul { margin-top: 1em; }
.prose li + li { margin-top: .35em; }

.section-head { display: grid; gap: 18px; margin-bottom: clamp(40px, 5vw, 64px); max-width: 760px; }
.section-head--split { max-width: none; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: end; gap: 24px 64px; }
@media (max-width: 860px) { .section-head--split { grid-template-columns: 1fr; } }


/* ---------- Buttons ---------- */
.btn {
    --btn-bg: var(--red-press);
    --btn-fg: var(--white);
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 52px; padding: 0 26px;
    border: 2px solid var(--btn-bg); border-radius: 999px;
    background: var(--btn-bg); color: var(--btn-fg);
    font-weight: 700; font-size: 1rem; letter-spacing: -.005em;
    text-decoration: none; cursor: pointer; white-space: nowrap;
    transition: background-color .2s, border-color .2s, color .2s, transform .2s var(--ease-out), box-shadow .2s;
}
.btn:hover { --btn-bg: var(--red-ink); transform: translateY(-1px); box-shadow: 0 10px 24px -10px rgba(225, 21, 48, .6); }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn .ti { font-size: 1.25em; }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); border-color: var(--concrete-2); }
.btn--ghost:hover { --btn-bg: var(--white); border-color: var(--ink); box-shadow: none; }
.section--asphalt .btn--ghost, .on-dark .btn--ghost { --btn-fg: var(--white); border-color: var(--asphalt-line); }
.section--asphalt .btn--ghost:hover, .on-dark .btn--ghost:hover { --btn-bg: var(--asphalt-2); border-color: var(--white); }
.btn--light { --btn-bg: var(--white); --btn-fg: var(--ink); }
.btn--light:hover { --btn-bg: var(--concrete); box-shadow: none; }
.btn--sm { min-height: 42px; padding: 0 18px; font-size: .9375rem; }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

.text-link { font-weight: 700; color: var(--red-ink); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.text-link:hover { text-decoration: underline; }
.section--asphalt .text-link { color: #FF7F8E; }

/* ---------- Header ---------- */
.site-header {
    position: sticky; top: 0; z-index: 50;
    background: rgba(255, 255, 255, .86);
    backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
    border-bottom: 1px solid transparent;
    transition: border-color .25s, box-shadow .25s;
    view-transition-name: site-header;
}
.site-header.is-scrolled { border-bottom-color: var(--concrete-2); }
.site-header__bar { display: flex; align-items: center; gap: 28px; min-height: 72px; }
.brand { display: inline-flex; align-items: center; flex-shrink: 0; }
.brand img { height: 34px; width: auto; }
.nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav a {
    position: relative; padding: 10px 12px; border-radius: 999px;
    font-weight: 600; font-size: .9375rem; color: var(--slate); text-decoration: none;
    transition: color .2s, background-color .2s;
}
.nav a:hover { color: var(--ink); background: var(--concrete); }
.nav a[aria-current="page"] { color: var(--ink); }
.nav a[aria-current="page"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--red); }
.header-actions { display: flex; align-items: center; gap: 8px; }
.header-actions .login { font-weight: 600; font-size: .9375rem; color: var(--ink); text-decoration: none; padding: 10px 12px; }
.header-actions .login:hover { text-decoration: underline; }
.nav-toggle { display: none; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--concrete-2); background: var(--white); cursor: pointer; align-items: center; justify-content: center; font-size: 1.35rem; }

@media (max-width: 1080px) {
    .nav-toggle { display: inline-flex; }
    .site-header__bar { gap: 12px; }
    .header-actions { margin-left: auto; }
    .header-actions .login { display: none; }
    .nav {
        position: fixed; inset: 72px 0 auto 0; z-index: 49;
        flex-direction: column; align-items: stretch; gap: 0;
        padding: 12px var(--gutter) 28px; background: var(--white);
        border-bottom: 1px solid var(--concrete-2); box-shadow: 0 30px 40px -30px rgba(28, 30, 35, .3);
        transform: translateY(-8px); opacity: 0; visibility: hidden;
        transition: opacity .2s, transform .25s var(--ease-out), visibility 0s .25s;
    }
    .nav a { padding: 14px 4px; font-size: 1.125rem; border-radius: 0; border-bottom: 1px solid var(--concrete); }
    .nav a:hover { background: none; }
    .nav a[aria-current="page"]::after { left: auto; right: 4px; top: 50%; bottom: auto; width: 8px; height: 8px; border-radius: 50%; transform: translateY(-50%); }
    .nav .nav__login { display: block; }
    .site-header.is-open .nav { opacity: 1; transform: none; visibility: visible; transition: opacity .2s, transform .25s var(--ease-out); }
}
@media (min-width: 1081px) { .nav .nav__login { display: none; } }
@media (max-width: 480px) { .header-actions .btn { padding: 0 16px; } }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; padding-block: clamp(40px, 6vw, 88px) clamp(64px, 8vw, 112px); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero__copy { display: grid; gap: 26px; position: relative; z-index: 2; }
.hero__copy .display { }
.hero__copy .display span { display: block; }
.hero__copy .display span + span { color: var(--red); }
.hero__kicker { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: var(--fs-small); color: var(--slate); }
.deliverables { display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 0; margin: 4px 0 0; list-style: none; font-size: var(--fs-small); font-weight: 600; color: var(--ink); }
.deliverables li { display: inline-flex; align-items: center; gap: 8px; }
.deliverables .ti { color: var(--red); font-size: 1.2rem; }
.hero__visual { display: flex; justify-content: center; }
.hero__visual img { width: min(100%, 420px); height: auto; filter: drop-shadow(0 40px 50px rgba(36, 43, 58, .18)); }

@media (max-width: 960px) {
    .hero__grid { grid-template-columns: 1fr; }
}

/* ---------- Screenshot (real app screens, no fake device frame) ---------- */
.phone {
    position: relative; aspect-ratio: 400 / 750; width: 100%;
    border-radius: 26px; overflow: hidden; background: var(--white);
    border: 1px solid var(--concrete-2);
    box-shadow: 0 24px 48px -28px rgba(36, 43, 58, .35);
}
.phone__screen { position: relative; width: 100%; height: 100%; }
.phone__screen > img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.phone--sm { border-radius: 20px; }
.phone-layer { position: absolute; inset: 0; opacity: 0; transition: opacity .45s; }
.phone-layer.is-active { opacity: 1; }
.phone-layer > img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* ---------- Wide image frame (admin panel, website, mechanic app) ---------- */
.browser { border-radius: var(--r-lg); overflow: hidden; background: var(--white); border: 1px solid var(--concrete-2); box-shadow: 0 30px 60px -40px rgba(36, 43, 58, .4); }
.browser > img { width: 100%; }

/* ---------- Suite (four products) ---------- */
.suite__tabs { display: flex; gap: 6px; padding: 6px; border-radius: 999px; background: var(--concrete); width: max-content; max-width: 100%; overflow-x: auto; scrollbar-width: none; margin-bottom: clamp(32px, 4vw, 48px); }
.suite__tabs::-webkit-scrollbar { display: none; }
.suite__tab {
    display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 20px;
    border: 0; border-radius: 999px; background: transparent; cursor: pointer; white-space: nowrap;
    font-weight: 700; font-size: .9375rem; color: var(--slate); transition: background-color .2s, color .2s, box-shadow .2s;
}
.suite__tab .ti { font-size: 1.15rem; }
.suite__tab:hover { color: var(--ink); }
.suite__tab[aria-selected="true"] { background: var(--white); color: var(--ink); box-shadow: 0 6px 16px -8px rgba(28, 30, 35, .35); }
.suite__tab[aria-selected="true"] .ti { color: var(--red); }
.suite__panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.suite__panel[hidden] { display: none; }
.suite__panel.is-entering .suite__visual { animation: panelIn .55s var(--ease-out) both; }
.suite__panel.is-entering .suite__text { animation: panelInText .45s var(--ease-out) both; }
@keyframes panelIn { from { opacity: 0; transform: translateY(18px) scale(.985); } }
@keyframes panelInText { from { opacity: 0; transform: translateX(-12px); } }
.suite__text { display: grid; gap: 20px; }
.suite__who { font-weight: 700; color: var(--red-ink); }
.checklist { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 12px; }
.checklist li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start; }
.checklist li::before {
    content: ""; width: 22px; height: 22px; margin-top: 2px; border-radius: 50%;
    background: var(--red-wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C80E25' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.section--asphalt .checklist li::before { background-color: rgba(255, 31, 55, .18); }
.checklist strong { font-weight: 700; }
.suite__visual { position: relative; display: flex; justify-content: center; align-items: center; min-height: 460px; }
.suite__phones { position: relative; width: min(100%, 470px); height: clamp(420px, 46vw, 560px); }
.suite__phones .phone { position: absolute; width: 50%; }
.suite__phones .phone:nth-child(1) { left: 0; top: 8%; z-index: 1; }
.suite__phones .phone:nth-child(2) { right: 0; top: 0; z-index: 2; }
.suite__phones--single .phone { position: relative; width: min(270px, 70%); margin: 0 auto; top: 0; }
.suite__browser { width: 100%; }
@media (max-width: 900px) {
    .suite__panel { grid-template-columns: 1fr; }
    .suite__visual { min-height: 0; order: -1; }
}

/* ---------- SOS story (sticky phone + steps) ---------- */
.story { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 7vw, 110px); align-items: start; }
.story__stick { position: sticky; top: 110px; display: flex; justify-content: center; }
.story__stick .phone { width: min(300px, 100%); }
.story__steps { list-style: none; padding: 0; margin: 0; counter-reset: step; }
.story__step { position: relative; padding: 0 0 clamp(80px, 14vh, 150px) 76px; counter-increment: step; opacity: .38; transition: opacity .4s; }
.story__step:last-child { padding-bottom: 0; }
.story__step.is-active { opacity: 1; }
.story__step::before {
    content: counter(step); position: absolute; left: 0; top: -4px;
    width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
    font-weight: 700; font-size: 1.25rem;
    background: var(--asphalt-2); color: var(--white); border: 2px solid var(--asphalt-line);
    transition: background-color .3s, border-color .3s;
}
.story__step.is-active::before { background: var(--red); border-color: var(--red); }
.story__step::after { content: ""; position: absolute; left: 25px; top: 56px; bottom: 8px; width: 2px; background: var(--asphalt-line); }
.story__step:last-child::after { display: none; }
.story__step h3 { margin-bottom: 10px; }
.story__step p { color: var(--slate-light); max-width: 52ch; }
.story__step .chips { margin-top: 16px; }
.story .story__mobile-shot { display: none; }
@media (max-width: 860px) {
    .story { grid-template-columns: 1fr; }
    .story__stick { display: none; }
    .story__step { opacity: 1; padding-bottom: 56px; }
    .story .story__mobile-shot { display: block; width: min(220px, 70%); margin-top: 20px; }
}

/* ---------- Chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; list-style: none; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: var(--white); border: 1px solid var(--concrete-2); font-size: var(--fs-small); font-weight: 600; }
.chip img { width: 22px; height: 22px; object-fit: contain; }
.chip--dark { background: var(--asphalt-2); border-color: var(--asphalt-line); color: var(--white); }
.chip--sos { border-color: rgba(255, 31, 55, .35); background: var(--red-wash); color: var(--red-ink); }

/* ---------- Screen reel (auto-scrolling screenshots) ---------- */
.reel { position: relative; overflow: hidden; padding-block: 10px 30px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.reel__track { display: flex; gap: 28px; width: max-content; animation: reel 60s linear infinite; }
.reel:hover .reel__track, .reel:focus-within .reel__track { animation-play-state: paused; }
@keyframes reel { to { transform: translateX(calc(-50% - 14px)); } }
.reel figure { width: 210px; flex-shrink: 0; }
.reel figcaption { margin-top: 14px; font-weight: 600; font-size: var(--fs-small); text-align: center; color: var(--slate); }
.reel .phone { --r-phone: 32px; transition: transform .35s var(--ease-out); }
.reel figure:hover .phone { transform: translateY(-8px); }

/* ---------- Catalog (live service list) ---------- */
.catalog { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
.catalog__lists { display: grid; gap: 34px; }
.catalog__group h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.catalog__group h3 .count { font-size: .8125rem; font-weight: 700; letter-spacing: 0; padding: 2px 9px; border-radius: 999px; background: var(--white); color: var(--slate); border: 1px solid var(--concrete-2); }
.service-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.service-list li { display: grid; grid-template-columns: 46px 1fr; gap: 12px; align-items: center; padding: 12px 14px; border-radius: var(--r-md); background: var(--white); border: 1px solid var(--concrete-2); }
.service-list img { width: 46px; height: 46px; object-fit: contain; padding: 6px; border-radius: 12px; background: var(--red-wash); }
.service-list strong { display: block; font-size: .975rem; line-height: 1.25; }
.service-list small { display: block; color: var(--slate); font-size: .8125rem; line-height: 1.35; margin-top: 2px; }
.service-list .price { color: var(--red-ink); font-weight: 700; }
.source-note { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-small); color: var(--slate); margin-top: 22px; }
.source-note .ti { color: var(--green); font-size: 1.15rem; margin-top: 2px; }
@media (max-width: 860px) { .catalog { grid-template-columns: 1fr; } }

/* ---------- Revenue calculator ---------- */
.calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-radius: var(--r-lg); overflow: hidden; background: var(--white); box-shadow: 0 0 0 1px var(--concrete-2); }
.calc__inputs { padding: clamp(24px, 4vw, 44px); display: grid; gap: 28px; }
.calc__field { display: grid; gap: 10px; }
.calc__label { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-weight: 600; }
.calc__label output { font-weight: 700; font-size: 1.25rem; font-variant-numeric: tabular-nums; color: var(--ink); }
.calc__hint { font-size: var(--fs-tiny); color: var(--slate); }
.range { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; cursor: pointer; --pct: 50%; }
.range::-webkit-slider-runnable-track { height: 8px; border-radius: 99px; background: linear-gradient(90deg, var(--red) var(--pct), var(--concrete-2) var(--pct)); }
.range::-moz-range-track { height: 8px; border-radius: 99px; background: linear-gradient(90deg, var(--red) var(--pct), var(--concrete-2) var(--pct)); }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -9px; border-radius: 50%; background: var(--white); border: 3px solid var(--red); box-shadow: 0 4px 10px -2px rgba(28, 30, 35, .3); transition: transform .15s; }
.range::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--white); border: 3px solid var(--red); box-shadow: 0 4px 10px -2px rgba(28, 30, 35, .3); }
.range:active::-webkit-slider-thumb { transform: scale(1.12); }
.range:focus-visible { outline: none; }
.range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(254, 32, 55, .3); }
.calc__out { padding: clamp(24px, 4vw, 44px); background: var(--asphalt); color: var(--white); display: grid; gap: 22px; align-content: center; }
.calc__headline small { display: block; color: var(--slate-light); font-weight: 600; }
.calc__headline b { display: block; font-size: clamp(2.4rem, 1.6rem + 3vw, 3.8rem); font-weight: 700; letter-spacing: -.035em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.calc__split { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--asphalt-line); border-radius: var(--r-md); overflow: hidden; }
.calc__split div { background: var(--asphalt-2); padding: 14px 16px; }
.calc__split small { display: block; color: var(--slate-light); font-size: var(--fs-tiny); }
.calc__split b { display: block; font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.calc__bar { height: 12px; border-radius: 99px; background: var(--asphalt-line); overflow: hidden; display: flex; }
.calc__bar i { display: block; height: 100%; background: var(--red); width: var(--w, 16%); transition: width .3s var(--ease-out); }
.calc__note { font-size: var(--fs-tiny); color: var(--slate-light); }
@media (max-width: 860px) { .calc { grid-template-columns: 1fr; } }

/* ---------- Comparison table ---------- */
.compare { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-small); }
.compare th, .compare td { padding: 16px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--concrete-2); }
.compare thead th { font-weight: 700; font-size: 1rem; border-bottom: 2px solid var(--ink); }
.compare tbody th { font-weight: 600; color: var(--slate); width: 26%; }
.compare .us { background: var(--red-wash); }
.compare thead .us { background: var(--red); color: var(--white); border-bottom-color: var(--red); border-radius: var(--r-md) var(--r-md) 0 0; }
.compare tbody tr:last-child .us { border-radius: 0 0 var(--r-md) var(--r-md); }
.compare td strong { font-weight: 700; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll .compare { min-width: 640px; }

/* ---------- Packages ---------- */
.packages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.pkg { display: flex; flex-direction: column; gap: 22px; padding: 30px 28px; border-radius: var(--r-lg); background: var(--white); border: 1px solid var(--concrete-2); }
.pkg__name { font-weight: 700; font-size: 1.5rem; letter-spacing: -.02em; }
.pkg__for { color: var(--slate); font-size: var(--fs-small); margin-top: 4px; }
.pkg ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; font-size: var(--fs-small); flex: 1; }
.pkg li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; }
.pkg li .ti { font-size: 1.1rem; margin-top: 2px; color: var(--green); }
.pkg li.no { color: var(--slate-light); }
.pkg li.no .ti { color: var(--slate-light); }
.pkg--featured { background: var(--asphalt); color: var(--white); border-color: var(--asphalt); position: relative; }
.pkg--featured .pkg__for { color: var(--slate-light); }
.pkg--featured li .ti { color: #FF7F8E; }
.pkg__flag { position: absolute; top: 22px; right: 22px; padding: 4px 11px; border-radius: 999px; background: var(--red); color: var(--white); font-size: .75rem; font-weight: 700; }
@media (max-width: 960px) { .packages { grid-template-columns: 1fr; max-width: 520px; } }

/* ---------- Tech row ---------- */
.stack { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--concrete-2); border: 1px solid var(--concrete-2); border-radius: var(--r-lg); overflow: hidden; }
.stack div { background: var(--white); padding: 22px 22px 24px; display: grid; gap: 6px; align-content: start; }
.stack .ti { font-size: 1.6rem; color: var(--red); margin-bottom: 6px; }
.stack strong { font-weight: 700; }
.stack small { color: var(--slate); font-size: var(--fs-small); line-height: 1.45; }
@media (max-width: 900px) { .stack { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .stack { grid-template-columns: 1fr; } }

/* ---------- Feature grid (varied, not cards) ---------- */
.features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 48px; }
.feature { display: grid; grid-template-columns: 30px 1fr; gap: 14px; align-items: start; }
.feature .ti { color: var(--red); font-size: 1.6rem; line-height: 1; padding-top: 2px; }
.section--asphalt .feature .ti { color: #FF7F8E; }
.feature h3 { font-size: 1.0625rem; font-weight: 700; margin-bottom: 4px; line-height: 1.3; }
.feature p { color: var(--slate); font-size: var(--fs-small); line-height: 1.55; }
.section--asphalt .feature p { color: var(--slate-light); }
@media (max-width: 900px) { .features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .features { grid-template-columns: 1fr; gap: 28px; } }

/* ---------- Split (text + visual) ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.split--wide-visual { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
.split__text { display: grid; gap: 20px; }
.split + .split { margin-top: clamp(72px, 9vw, 120px); }
.split--flip .split__visual { order: -1; }
.split--top { align-items: start; }
@media (max-width: 900px) { .split, .split--wide-visual { grid-template-columns: 1fr; } .split--flip .split__visual { order: 0; } }

/* ---------- FAQ ---------- */
.faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.faq__list { border-top: 1px solid var(--concrete-2); }
.faq details { border-bottom: 1px solid var(--concrete-2); }
.faq summary {
    list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px;
    padding: 22px 0; font-weight: 700; font-size: 1.0625rem; line-height: 1.4;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: ""; flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
    background: var(--concrete) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C1E23' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / 14px no-repeat;
    transition: transform .3s var(--ease-out), background-color .2s;
}
.faq details[open] summary::after { transform: rotate(45deg); background-color: var(--red-wash); }
.faq summary:hover::after { background-color: var(--concrete-2); }
.faq__answer { padding: 0 52px 24px 0; color: var(--slate); max-width: 68ch; }
.faq details[open] .faq__answer { animation: faqOpen .35s var(--ease-out); }
@keyframes faqOpen { from { opacity: 0; transform: translateY(-6px); } }
.faq__nav { position: sticky; top: 110px; }
@media (max-width: 860px) { .faq__nav { position: static; } }
.faq-group + .faq-group { margin-top: 56px; }
.faq-group > h2 { margin-bottom: 14px; }
@media (max-width: 860px) { .faq { grid-template-columns: 1fr; } }

/* ---------- Timeline (launch process) ---------- */
.timeline { list-style: none; padding: 0; margin: 0; counter-reset: t; display: grid; gap: 0; }
.timeline li { position: relative; display: grid; grid-template-columns: 120px 1fr; gap: 28px; padding: 30px 0; border-top: 1px solid var(--concrete-2); counter-increment: t; }
.timeline li:last-child { border-bottom: 1px solid var(--concrete-2); }
.timeline__when { font-weight: 700; color: var(--red-ink); font-size: var(--fs-small); padding-top: 6px; }
.timeline__when::before { content: counter(t, decimal-leading-zero); display: block; font-size: 2rem; color: var(--ink); letter-spacing: -.03em; line-height: 1; margin-bottom: 6px; }
.timeline h3 { margin-bottom: 8px; }
.timeline p { color: var(--slate); max-width: 62ch; }
@media (max-width: 600px) { .timeline li { grid-template-columns: 1fr; gap: 10px; } }

/* Status lifecycle (real status strings from the platform) */
.lifecycle { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0; margin: 0; list-style: none; }
.lifecycle li { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: var(--fs-small); }
.lifecycle li span { padding: 8px 14px; border-radius: 999px; background: var(--asphalt-2); border: 1px solid var(--asphalt-line); }
.lifecycle li:last-child span { background: var(--green); border-color: var(--green); }
.lifecycle li + li::before { content: ""; width: 18px; height: 2px; background: var(--asphalt-line); }

/* ---------- Page hero (inner pages) ---------- */
.page-hero { padding-block: clamp(48px, 7vw, 104px) clamp(48px, 6vw, 80px); position: relative; overflow: hidden; }
.page-hero__inner { display: grid; gap: 22px; max-width: 880px; }
.page-hero .display { font-size: clamp(2.3rem, 1.4rem + 3.8vw, 4.3rem); }

/* ---------- CTA band ---------- */
.cta-band { position: relative; overflow: hidden; border-radius: clamp(22px, 3vw, 36px); background: var(--asphalt); color: var(--white); padding: clamp(36px, 6vw, 72px); display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 32px; align-items: center; isolation: isolate; }
.cta-band__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.cta-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(254, 32, 55, .96) 0%, rgba(254, 32, 55, .88) 45%, rgba(36, 43, 58, .35) 100%); }
.cta-band__lottie { max-width: 360px; justify-self: end; background: rgba(255, 255, 255, .95); border-radius: 50%; padding: 6%; }
.cta-band .h2 { max-width: 15ch; }
.cta-band p { color: rgba(255, 255, 255, .86); max-width: 48ch; margin-top: 16px; font-size: var(--fs-lead); }
.cta-band .btn--ghost { --btn-fg: var(--white); border-color: rgba(255, 255, 255, .45); }
.cta-band .btn--ghost:hover { --btn-bg: rgba(255, 255, 255, .12); border-color: var(--white); }
@media (max-width: 860px) { .cta-band { grid-template-columns: 1fr; } .cta-band__lottie { justify-self: start; max-width: 220px; } }

/* ---------- Footer ---------- */
.site-footer { background: var(--asphalt); color: var(--slate-light); padding-top: clamp(56px, 7vw, 96px); font-size: var(--fs-small); }
.site-footer__grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 40px; padding-bottom: 56px; }
.site-footer__brand img { height: 34px; width: auto; filter: invert(1) brightness(2); margin-bottom: 18px; }
.site-footer__brand p { max-width: 36ch; }
.site-footer h3 { color: var(--white); font-size: .9375rem; font-weight: 700; margin-bottom: 14px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--white); text-decoration: underline; }
.site-footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding-block: 24px; border-top: 1px solid var(--asphalt-line); }
.site-footer__stores { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.store-badge { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 12px; border-radius: 12px; border: 1px solid var(--asphalt-line); color: var(--white); }
.store-badge .ti { font-size: 1.5rem; }
.store-badge small { display: block; font-size: .6875rem; color: var(--slate-light); line-height: 1.1; }
.store-badge b { display: block; font-size: .9375rem; line-height: 1.2; }
@media (max-width: 860px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } .site-footer__brand { grid-column: 1 / -1; } }

/* ---------- Forms ---------- */
.form { display: grid; gap: 18px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 600px) { .form__row { grid-template-columns: 1fr; } }
.field { display: grid; gap: 7px; }
.field label { font-weight: 600; font-size: var(--fs-small); }
.field label .opt { color: var(--slate); font-weight: 400; }
.input, .select, .textarea {
    width: 100%; min-height: 52px; padding: 12px 16px; border-radius: 12px;
    border: 1.5px solid var(--concrete-2); background: var(--white); font-size: 1rem;
    transition: border-color .2s, box-shadow .2s;
}
.textarea { min-height: 130px; resize: vertical; line-height: 1.5; }
.select { appearance: none; padding-right: 44px; background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235D6370' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 16px center / 16px no-repeat; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--slate-light); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(254, 32, 55, .15); }
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--red-press); }
.field__error { color: var(--red-ink); font-size: var(--fs-tiny); font-weight: 600; display: flex; gap: 6px; align-items: center; }
.field__help { color: var(--slate); font-size: var(--fs-tiny); }
.check { display: flex; gap: 10px; align-items: center; font-size: var(--fs-small); cursor: pointer; }
.check input { width: 20px; height: 20px; accent-color: var(--red-press); }
.pill-options { display: flex; flex-wrap: wrap; gap: 8px; }
.pill-options label { cursor: pointer; }
.pill-options input { position: absolute; opacity: 0; pointer-events: none; }
.pill-options span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1.5px solid var(--concrete-2); font-weight: 600; font-size: var(--fs-small); transition: all .2s; }
.pill-options input:checked + span { background: var(--asphalt); color: var(--white); border-color: var(--asphalt); }
.pill-options input:focus-visible + span { outline: 3px solid var(--red); outline-offset: 2px; }
.form-card { padding: clamp(24px, 4vw, 44px); border-radius: var(--r-lg); background: var(--white); box-shadow: 0 0 0 1px var(--concrete-2), 0 40px 60px -50px rgba(28, 30, 35, .5); }
.form-success { display: grid; gap: 16px; justify-items: start; padding: clamp(24px, 4vw, 44px); border-radius: var(--r-lg); background: var(--asphalt); color: var(--white); animation: panelIn .5s var(--ease-out); }
.form-success .ti { font-size: 2.4rem; color: #3DD68C; }
.btn[disabled], .btn.is-loading { opacity: .7; cursor: progress; transform: none; }

/* ---------- Contact layout ---------- */
.contact { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
.contact__aside { display: grid; gap: 28px; }
.receive { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; }
.receive li { display: grid; grid-template-columns: 30px 1fr; gap: 12px; }
.receive .ti { font-size: 1.5rem; color: var(--red); padding-top: 2px; }
.receive strong { display: block; }
.receive small { color: var(--slate); font-size: var(--fs-small); }
.direct { padding: 22px; border-radius: var(--r-md); background: var(--concrete); display: grid; gap: 4px; }
.direct a { font-weight: 700; font-size: 1.2rem; text-decoration: none; color: var(--red-ink); }
@media (max-width: 900px) { .contact { grid-template-columns: 1fr; } }

/* ---------- Guides (blog) ---------- */
.guides { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
.guides__toc { position: sticky; top: 100px; display: grid; gap: 4px; }
.guides__toc a { display: block; padding: 10px 14px; border-radius: 10px; text-decoration: none; font-weight: 600; font-size: var(--fs-small); color: var(--slate); border-left: 3px solid transparent; }
.guides__toc a:hover { background: var(--concrete); color: var(--ink); }
.guides__toc a.is-current { color: var(--ink); border-left-color: var(--red); background: var(--concrete); }
.guide { padding-bottom: 64px; margin-bottom: 64px; border-bottom: 1px solid var(--concrete-2); scroll-margin-top: 100px; }
.guide:last-child { border-bottom: 0; margin-bottom: 0; }
.guide__meta { color: var(--slate); font-size: var(--fs-small); margin: 14px 0 26px; }
@media (max-width: 900px) { .guides { grid-template-columns: 1fr; } .guides__toc { position: static; display: flex; flex-wrap: wrap; } .guides__toc a { border-left: 0; } }

/* ---------- Policy pages ---------- */
.policy { color: var(--ink); line-height: 1.75; }
.policy h2 { font-size: var(--fs-h3); font-weight: 700; letter-spacing: -.015em; line-height: 1.25; margin: 0 0 .5em; }
.policy br + br + h2, .policy h2:not(:first-child) { margin-top: .6em; }

/* ---------- Values / about ---------- */
.values { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--asphalt-line); }
.values > div { padding: 32px 32px 32px 0; border-bottom: 1px solid var(--asphalt-line); display: grid; gap: 10px; }
.values > div:nth-child(odd) { border-right: 1px solid var(--asphalt-line); }
.values > div:nth-child(even) { padding-left: 32px; padding-right: 0; }
.values p { color: var(--slate-light); }
@media (max-width: 760px) { .values { grid-template-columns: 1fr; } .values > div, .values > div:nth-child(even) { padding: 26px 0; border-right: 0 !important; } }

.modules { columns: 3 220px; column-gap: 40px; }
.modules > div { break-inside: avoid; margin-bottom: 30px; }
.modules h3 { font-size: 1rem; font-weight: 700; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.modules h3 .ti { color: var(--red); font-size: 1.2rem; }
.modules ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; color: var(--slate); font-size: var(--fs-small); }

/* ---------- Auth (customer login) ---------- */
.auth { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.auth__form { display: flex; flex-direction: column; padding: 28px clamp(20px, 6vw, 80px); }
.auth__form .brand img { height: 32px; }
.auth__box { width: 100%; max-width: 420px; margin: auto; padding-block: 40px; display: grid; gap: 26px; }
.auth__box h1 { font-size: clamp(2rem, 1.5rem + 2vw, 2.8rem); }
.auth__alt { text-align: center; font-size: var(--fs-small); color: var(--slate); }
.auth__alt a { color: var(--red-ink); font-weight: 700; }
.auth__divider { display: flex; align-items: center; gap: 14px; color: var(--slate); font-size: var(--fs-tiny); }
.auth__divider::before, .auth__divider::after { content: ""; flex: 1; height: 1px; background: var(--concrete-2); }
.auth__social { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.auth__social .btn--ghost img { width: 18px; height: 18px; }
.auth__legal { font-size: var(--fs-tiny); color: var(--slate); text-align: center; }
.auth__legal a { color: var(--ink); }
.pw { position: relative; }
.pw .input { padding-right: 56px; }
.pw button { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border: 0; border-radius: 10px; background: transparent; cursor: pointer; font-size: 1.25rem; color: var(--slate); }
.pw button:hover { background: var(--concrete); color: var(--ink); }
.auth__show { position: relative; overflow: hidden; background: var(--red); color: var(--white); display: flex; flex-direction: column; justify-content: space-between; padding: clamp(32px, 5vw, 64px); }
.auth__show .h2 { max-width: 13ch; position: relative; z-index: 2; }
.auth__show p { color: rgba(255, 255, 255, .86); max-width: 40ch; margin-top: 14px; position: relative; z-index: 2; }
.auth__phones { position: relative; height: 460px; margin-top: 32px; }
.auth__phones .phone { position: absolute; width: 230px; bottom: -150px; }
.auth__phones .phone:nth-child(1) { left: 6%; }
.auth__phones .phone:nth-child(2) { left: 38%; bottom: -110px; z-index: 2; }
@media (max-width: 960px) { .auth { grid-template-columns: 1fr; } .auth__show { display: none; } }

/* Admin login: console panel */
.auth--admin { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.auth__badge { justify-self: start; display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 10px; border-radius: 999px; background: var(--asphalt); color: var(--white); font-size: var(--fs-tiny); font-weight: 600; }
.auth__badge .ti { font-size: 1rem; color: #FF6B7B; }
.auth__switch { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--r-md); background: var(--concrete); font-size: var(--fs-small); color: var(--slate); }
.auth__switch .ti { font-size: 1.3rem; color: var(--ink); }
.auth__switch a { color: var(--red-ink); font-weight: 700; }
.auth__show--console { background: var(--asphalt); justify-content: flex-start; gap: clamp(28px, 4vh, 48px); isolation: isolate; }
.auth__show--console::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(var(--asphalt-2) 1px, transparent 1px), linear-gradient(90deg, var(--asphalt-2) 1px, transparent 1px); background-size: 44px 44px; mask-image: radial-gradient(ellipse 80% 70% at 60% 55%, #000 30%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 80% 70% at 60% 55%, #000 30%, transparent 75%); }
.auth__show--console::after { content: ""; position: absolute; z-index: -1; width: 70%; aspect-ratio: 1; right: -18%; top: 30%; border-radius: 50%; background: radial-gradient(circle, rgba(254, 32, 55, .38), transparent 65%); }
.console__head .h2 { max-width: 15ch; }
.console__stage { position: relative; margin-right: calc(-1 * clamp(32px, 5vw, 64px)); padding-bottom: 24px; }
.console__screen { border: 1px solid var(--asphalt-line); border-right: 0; border-radius: var(--r-lg) 0 0 var(--r-lg); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7); transform: perspective(1600px) rotateY(-9deg); transform-origin: left center; }
.console__phone.phone { position: absolute; width: 150px; left: -18px; bottom: -6px; box-shadow: 0 30px 50px -20px rgba(0, 0, 0, .7); }
.console__stats { list-style: none; margin: auto 0 0; padding: 22px 0 0; border-top: 1px solid var(--asphalt-line); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.console__stats b { display: block; color: var(--white); font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.2rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.console__stats span { color: var(--slate-light); font-size: var(--fs-tiny); }
.auth__show--console p { color: var(--slate-light); }
@media (prefers-reduced-motion: no-preference) {
    .console__screen { animation: console-in .9s var(--ease-out) both .1s; }
    .console__phone.phone { animation: console-phone .8s var(--ease-spring) both .45s; }
}
@keyframes console-in { from { opacity: 0; transform: perspective(1600px) rotateY(-20deg) translateX(60px); } }
@keyframes console-phone { from { opacity: 0; transform: translateY(40px) scale(.94); } }
@media (max-width: 1180px) { .console__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 960px) { .auth--admin { grid-template-columns: 1fr; } }

/* ---------- Misc ---------- */
.stat-line { display: flex; flex-wrap: wrap; gap: 14px 40px; padding: 0; margin: 0; list-style: none; }
.stat-line li b { display: block; font-size: clamp(2rem, 1.5rem + 1.8vw, 3rem); font-weight: 700; letter-spacing: -.035em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.stat-line li span { color: var(--slate); font-size: var(--fs-small); }
.section--asphalt .stat-line li span { color: var(--slate-light); }
.mt-s { margin-top: 16px; } .mt-m { margin-top: 32px; } .mt-l { margin-top: 56px; }
.center { text-align: center; }

/* ---------- Motion hooks (anime.js) ---------- */
.js-anim .arch__node, .js-anim .arch__core, .js-anim .arch__wires, .js-anim [data-stagger], .js-anim [data-hero-line], .js-anim [data-hero-media], .js-anim [data-float] { opacity: 0; }

/* ---------- Lottie ---------- */
.lottie { display: block; width: 100%; height: auto; aspect-ratio: 1; opacity: 0; transition: opacity .5s; }
.lottie.is-loaded { opacity: 1; }

/* ---------- Hero composition (real photo + real app images) ---------- */
.hero__stage { position: relative; aspect-ratio: 1 / 1.05; width: 100%; max-width: 580px; justify-self: end; }
.hero__photo { position: absolute; inset: 6% 0 10% 12%; border-radius: 28px; overflow: hidden; }
.hero__photo img { width: 100%; height: 100%; object-fit: cover; }
.hero__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(200deg, rgba(36, 43, 58, 0) 40%, rgba(36, 43, 58, .45)); }
.hero__phone { position: absolute; left: 0; bottom: 0; width: 52%; z-index: 2; filter: drop-shadow(0 30px 40px rgba(36, 43, 58, .35)); }
.hero__card { position: absolute; z-index: 3; background: var(--white); border-radius: 18px; box-shadow: 0 24px 48px -20px rgba(36, 43, 58, .45); overflow: hidden; }
.hero__card--shot { right: 4%; top: 0; width: 34%; aspect-ratio: 400 / 520; }
.hero__card--shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.hero__card--chip { right: -2%; bottom: 20%; display: flex; align-items: center; gap: 12px; padding: 10px 18px 10px 10px; }
.hero__card--chip img { width: 48px; height: 48px; object-fit: contain; border-radius: 12px; background: var(--red-wash); padding: 4px; }
.hero__card--chip strong { display: block; font-size: .95rem; }
.hero__card--chip small { display: block; color: var(--slate); font-size: .8rem; }
.hero__card--pay { right: 22%; bottom: 2%; display: flex; align-items: center; gap: 10px; padding: 10px 16px; font-weight: 700; font-size: .9rem; }
.hero__card--pay .ti { font-size: 1.4rem; color: var(--green); }
@media (max-width: 960px) { .hero__stage { justify-self: center; max-width: 520px; } }
@media (max-width: 520px) { .hero__card--chip { right: 0; bottom: 24%; } .hero__card--pay { display: none; } }

/* ---------- Vehicles strip (real app artwork) ---------- */
.vehicles { border-block: 1px solid var(--concrete-2); background: var(--white); padding-block: 26px; overflow: hidden; }
.vehicles__inner { display: flex; align-items: center; gap: 32px; }
.vehicles__label { flex-shrink: 0; max-width: 15ch; font-weight: 700; color: var(--ink); line-height: 1.35; }
.vehicles__list { display: flex; align-items: flex-end; gap: 26px; overflow-x: auto; scrollbar-width: none; padding: 6px 0 10px; margin: 0; }
.vehicles__list::-webkit-scrollbar { display: none; }
.vehicles__list li { display: grid; justify-items: center; gap: 6px; flex-shrink: 0; font-size: .8125rem; font-weight: 600; color: var(--slate); }
.vehicles__list img { height: 46px; width: auto; transition: transform .3s var(--ease-spring); }
.vehicles__list li.is-fuel img { height: 38px; }
.vehicles__list li:hover img { transform: translateY(-4px) scale(1.06); }
@media (max-width: 760px) { .vehicles__inner { flex-direction: column; align-items: flex-start; gap: 14px; } .vehicles__label { max-width: none; } .vehicles__list { width: 100%; } }

/* ---------- Photo split / media ---------- */
.media-photo { position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 3; background: var(--concrete); }
.media-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.media-photo:hover img { transform: scale(1.04); }
.media-photo--tall { aspect-ratio: 4 / 5; }
.media-stack { position: relative; }
.media-stack .phone { position: absolute; width: 38%; right: -4%; bottom: -8%; z-index: 2; }
.media-stack .media-photo { width: 92%; }
.media-badge { position: absolute; left: -4%; top: 8%; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; border-radius: 16px; background: var(--white); box-shadow: 0 20px 40px -18px rgba(36, 43, 58, .45); font-weight: 700; font-size: .9rem; }
.media-badge img { width: 40px; height: 40px; object-fit: contain; }
.media-lottie { position: absolute; z-index: 2; width: 34%; left: -6%; bottom: -6%; background: var(--white); border-radius: 50%; box-shadow: 0 20px 40px -18px rgba(36, 43, 58, .4); padding: 4%; }

/* ---------- Service icon wall (real app icons) ---------- */
.icon-wall { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.icon-wall figure { display: grid; justify-items: center; gap: 10px; padding: 20px 10px; border-radius: var(--r-md); background: var(--white); border: 1px solid var(--concrete-2); text-align: center; font-weight: 600; font-size: .875rem; transition: transform .3s var(--ease-out), box-shadow .3s; }
.icon-wall figure:hover { transform: translateY(-4px); box-shadow: 0 18px 30px -20px rgba(36, 43, 58, .4); }
.icon-wall img { width: 64px; height: 64px; object-fit: contain; }
@media (max-width: 560px) { .icon-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Audiences (photo cards) ---------- */
.audiences { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.audience { position: relative; margin: 0; border-radius: var(--r-lg); overflow: hidden; min-height: 300px; grid-column: span 2; color: var(--white); }
.audience:nth-child(1), .audience:nth-child(2) { grid-column: span 3; min-height: 360px; }
.audience img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.audience:hover img { transform: scale(1.05); }
.audience::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 24, 33, 0) 35%, rgba(20, 24, 33, .85)); }
.audience figcaption { position: absolute; left: 22px; right: 22px; bottom: 20px; z-index: 2; display: grid; gap: 4px; }
.audience strong { font-size: 1.2rem; }
.audience span { font-size: .9rem; color: rgba(255, 255, 255, .82); max-width: 40ch; }
@media (max-width: 900px) { .audiences { grid-template-columns: 1fr 1fr; } .audience, .audience:nth-child(1), .audience:nth-child(2) { grid-column: span 1; min-height: 260px; } }
@media (max-width: 560px) { .audiences { grid-template-columns: 1fr; } }

/* ---------- City tiles (real city artwork) ---------- */
.city-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.city-tiles li { display: grid; justify-items: center; gap: 8px; padding: 16px 8px; border-radius: var(--r-md); background: var(--white); border: 1px solid var(--concrete-2); font-weight: 600; font-size: .875rem; text-align: center; }
.city-tiles img { height: 52px; width: auto; }
@media (max-width: 560px) { .city-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Page hero with media ---------- */
.page-hero__grid { display: grid; gap: 40px; }
.page-hero--media .page-hero__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; }
.page-hero__media { position: relative; }
.page-hero__photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 28px; }
.page-hero__lottie { width: min(100%, 420px); margin-inline: auto; }
.page-hero__photo + .page-hero__lottie { position: absolute; width: 42%; left: -8%; bottom: -10%; background: var(--white); border-radius: 50%; padding: 5%; box-shadow: 0 24px 48px -24px rgba(36, 43, 58, .45); }
@media (max-width: 860px) { .page-hero--media .page-hero__grid { grid-template-columns: 1fr; } .page-hero__photo + .page-hero__lottie { left: 0; } }

/* ---------- Guide cover photos ---------- */
.guide__cover { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; border-radius: var(--r-lg); margin-bottom: 28px; }

/* ---------- Timeline media ---------- */
.timeline li { grid-template-columns: 120px 1fr 160px; align-items: center; }
.timeline__media { width: 160px; height: 120px; border-radius: var(--r-md); overflow: hidden; background: var(--concrete); }
.timeline__media img { width: 100%; height: 100%; object-fit: cover; }
.timeline__media .lottie { width: 120px; margin: 0 auto; }
@media (max-width: 760px) { .timeline li { grid-template-columns: 1fr; } .timeline__media { width: 100%; height: 180px; } }


/* ==========================================================================
   How it works page
   ========================================================================== */
.hiw-hero { position: relative; overflow: hidden; color: var(--white); padding-block: clamp(56px, 8vw, 120px) clamp(64px, 8vw, 120px); isolation: isolate; }
.hiw-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transform: scale(1.04); }
.hiw-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, rgba(20, 24, 33, .94) 0%, rgba(20, 24, 33, .82) 45%, rgba(254, 32, 55, .55) 100%); }
.hiw-hero__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.hiw-hero__copy { display: grid; gap: 24px; }
.hiw-hero .display { color: var(--white); font-size: clamp(2.4rem, 1.4rem + 3.4vw, 4.2rem); }
.hiw-hero .lead { color: rgba(255, 255, 255, .82); }
.hiw-hero__kicker { display: inline-flex; width: max-content; padding: 6px 14px; border-radius: 999px; background: rgba(254, 32, 55, .9); font-weight: 700; font-size: .875rem; }
.hiw-hero .btn--ghost { --btn-fg: var(--white); border-color: rgba(255, 255, 255, .4); }
.hiw-hero .btn--ghost:hover { --btn-bg: rgba(255, 255, 255, .1); border-color: var(--white); }
.hiw-hero__facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin: 8px 0 0; padding: 0; list-style: none; border-radius: var(--r-md); overflow: hidden; background: rgba(255, 255, 255, .14); max-width: 560px; }
.hiw-hero__facts li { padding: 14px 16px; background: rgba(20, 24, 33, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.hiw-hero__facts b { display: block; font-size: 1.75rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.hiw-hero__facts span { font-size: .8125rem; color: rgba(255, 255, 255, .72); }
.hiw-hero__visual { position: relative; aspect-ratio: 1 / 1.08; max-width: 500px; width: 100%; justify-self: end; }
.hiw-hero__phone { position: absolute; left: 4%; top: 0; width: 60%; filter: drop-shadow(0 40px 50px rgba(0, 0, 0, .5)); z-index: 2; }
.hiw-hero__shot { position: absolute; right: 0; top: 18%; width: 40%; aspect-ratio: 400 / 600; border-radius: 20px; overflow: hidden; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6); z-index: 3; }
.hiw-hero__shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.hiw-hero__badge { position: absolute; right: 6%; bottom: 8%; z-index: 4; display: flex; gap: 12px; align-items: center; padding: 10px 18px 10px 10px; border-radius: 16px; background: var(--white); color: var(--ink); box-shadow: 0 24px 48px -18px rgba(0, 0, 0, .5); }
.hiw-hero__badge img { width: 44px; height: 44px; border-radius: 12px; background: var(--red-wash); padding: 4px; }
.hiw-hero__badge strong { display: block; font-size: .95rem; }
.hiw-hero__badge small { display: block; color: var(--slate); font-size: .8rem; }
@media (max-width: 900px) { .hiw-hero__grid { grid-template-columns: 1fr; } .hiw-hero__visual { justify-self: center; max-width: 420px; } }
@media (max-width: 560px) { .hiw-hero__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Steps: zig-zag rows with a scroll-linked progress rail */
.hiw-steps { position: relative; }
.hiw-steps__list { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(72px, 9vw, 128px); }
.hiw-steps__rail { position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; margin-left: -1.5px; border-radius: 3px; background: var(--concrete-2); }
.hiw-steps__rail i { position: absolute; inset: 0; border-radius: 3px; background: var(--red); transform-origin: top; transform: scaleY(var(--p, 0)); }
.hiw-step { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(48px, 8vw, 120px); align-items: center; }
.hiw-step--flip .hiw-step__media { order: 2; }
.hiw-step__dot { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; display: grid; place-items: center; z-index: 2; background: var(--white); border: 3px solid var(--concrete-2); font-weight: 700; color: var(--slate); transition: background-color .35s, border-color .35s, color .35s, transform .35s var(--ease-spring); }
.hiw-step.is-reached .hiw-step__dot { background: var(--red); border-color: var(--red); color: var(--white); transform: scale(1.08); }
.hiw-step__media { position: relative; }
.hiw-step__photo { border-radius: 28px; overflow: hidden; aspect-ratio: 5 / 4; box-shadow: 0 40px 70px -40px rgba(36, 43, 58, .5); }
.hiw-step__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease-out); }
.hiw-step:hover .hiw-step__photo img { transform: scale(1.05); }
.hiw-step__shot { position: absolute; width: 36%; right: -6%; bottom: -12%; z-index: 2; }
.hiw-step--flip .hiw-step__shot { right: auto; left: -6%; }
.hiw-step__panel { position: absolute; width: 72%; right: -8%; bottom: -14%; z-index: 2; }
.hiw-step__lottie { position: absolute; width: 36%; left: -6%; bottom: -10%; z-index: 2; padding: 4%; border-radius: 50%; background: var(--white); box-shadow: 0 24px 48px -24px rgba(36, 43, 58, .45); }
.hiw-step--flip .hiw-step__lottie { left: auto; right: -6%; }
.hiw-step__stores { position: absolute; left: 6%; top: 8%; z-index: 2; display: grid; gap: 8px; }
.hiw-store { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 12px; background: var(--ink); color: var(--white); font-weight: 700; font-size: .9rem; box-shadow: 0 16px 32px -16px rgba(0, 0, 0, .6); }
.hiw-store .ti { font-size: 1.3rem; }
.hiw-step__text { display: grid; gap: 16px; align-content: center; }
.hiw-step__when { font-weight: 700; color: var(--red); font-size: .9375rem; }
.hiw-step__title { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); }
@media (max-width: 900px) {
    .hiw-steps__rail, .hiw-step__dot { display: none; }
    .hiw-step { grid-template-columns: 1fr; gap: 56px; }
    .hiw-step--flip .hiw-step__media { order: 0; }
    .hiw-step__shot, .hiw-step--flip .hiw-step__shot { right: 2%; left: auto; width: 30%; }
    .hiw-step__lottie, .hiw-step--flip .hiw-step__lottie { left: 2%; right: auto; width: 30%; }
    .hiw-step__panel { right: 2%; }
}

/* Statement band */
.hiw-band { position: relative; overflow: hidden; color: var(--white); padding-block: clamp(80px, 12vw, 160px); isolation: isolate; text-align: center; }
.hiw-band__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hiw-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(20, 24, 33, .55), rgba(20, 24, 33, .78)); }
.hiw-band__inner { display: grid; gap: 28px; justify-items: center; }
.hiw-band__quote { font-weight: 700; font-size: clamp(1.9rem, 1.2rem + 2.8vw, 3.6rem); line-height: 1.1; letter-spacing: -.02em; max-width: 20ch; text-wrap: balance; }
.hiw-band__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0; padding: 0; list-style: none; }
.hiw-band__chips li { padding: 10px 20px; border-radius: 999px; border: 1.5px solid rgba(255, 255, 255, .55); font-weight: 700; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); background: rgba(255, 255, 255, .08); }
.hiw-band__chips li:first-child { background: var(--red); border-color: var(--red); }
.hiw-band__note { color: rgba(255, 255, 255, .8); max-width: 52ch; }

/* An example day: horizontal track */
.hiw-day-section { padding-bottom: clamp(56px, 7vw, 96px); }
.hiw-day__lottie { justify-self: end; width: min(240px, 60%); background: var(--white); border-radius: 50%; padding: 16px; }
@media (max-width: 860px) { .hiw-day__lottie { justify-self: start; width: 150px; } }
.hiw-day { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--asphalt-line) transparent; padding-bottom: 16px; }
.hiw-day__track { display: flex; gap: 20px; margin: 0; padding: 0 max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))); list-style: none; width: max-content; }
.hiw-moment { width: 300px; scroll-snap-align: start; display: grid; gap: 10px; align-content: start; }
.hiw-moment__media { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-lg); overflow: hidden; background: var(--asphalt-2); margin-bottom: 8px; }
.hiw-moment__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.hiw-moment:hover .hiw-moment__media img { transform: scale(1.06); }
.hiw-moment__media--shot img { object-fit: cover; object-position: top; }
.hiw-moment__time { position: absolute; left: 12px; top: 12px; padding: 6px 12px; border-radius: 999px; background: var(--red); color: var(--white); font-weight: 700; font-size: .875rem; font-variant-numeric: tabular-nums; }
.hiw-moment p { color: var(--slate-light); font-size: var(--fs-small); }

/* Collage */
.hiw-collage { position: relative; aspect-ratio: 1 / 1; }
.hiw-collage > div { position: absolute; border-radius: 24px; overflow: hidden; box-shadow: 0 30px 60px -36px rgba(36, 43, 58, .55); }
.hiw-collage img { width: 100%; height: 100%; object-fit: cover; }
.hiw-collage__a { left: 0; top: 0; width: 64%; height: 58%; }
.hiw-collage__b { right: 0; bottom: 0; width: 58%; height: 56%; }
.hiw-collage .hiw-collage__c { position: absolute; left: 6%; bottom: 0; width: 30%; z-index: 2; }

/* Customer flow */
.hiw-flow { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.hiw-flow li { display: grid; gap: 12px; }
.hiw-flow span { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: .9rem; }
.hiw-flow b { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--red); color: var(--white); font-size: .8rem; flex-shrink: 0; }
@media (max-width: 900px) { .hiw-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px) { .hiw-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }


/* ==========================================================================
   Home page
   ========================================================================== */
.home-hero { position: relative; overflow: hidden; color: var(--white); padding-block: clamp(48px, 7vw, 104px) clamp(36px, 4vw, 56px); isolation: isolate; }
.home-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.home-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, rgba(20, 24, 33, .95) 0%, rgba(20, 24, 33, .86) 42%, rgba(20, 24, 33, .35) 70%, rgba(254, 32, 55, .55) 100%); }
.home-hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.home-hero__copy { display: grid; gap: 24px; }
.home-hero .display { color: var(--white); font-size: clamp(2.4rem, 1.3rem + 3.6vw, 4.4rem); }
.home-hero .display span { color: var(--red); display: block; }
.home-hero .lead { color: rgba(255, 255, 255, .84); }
.home-hero__kicker { display: inline-flex; align-items: center; gap: 10px; width: max-content; max-width: 100%; padding: 7px 16px 7px 12px; border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); font-weight: 600; font-size: .875rem; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.home-hero__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px rgba(254, 32, 55, .3); }
.home-hero .btn--ghost { --btn-fg: var(--white); border-color: rgba(255, 255, 255, .4); }
.home-hero .btn--ghost:hover { --btn-bg: rgba(255, 255, 255, .1); border-color: var(--white); }
.home-hero__stores { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.home-hero__stores li { display: flex; align-items: center; gap: 10px; padding: 8px 16px 8px 12px; border-radius: 12px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); font-weight: 700; font-size: .95rem; }
.home-hero__stores .ti { font-size: 1.5rem; }
.home-hero__stores small { display: block; font-size: .6875rem; font-weight: 500; color: rgba(255, 255, 255, .65); line-height: 1.2; }
.home-hero__visual { position: relative; aspect-ratio: 1 / 1.05; width: 100%; max-width: 620px; justify-self: end; }
.home-hero__phone { position: absolute; left: 50%; top: 0; width: 60%; transform: translateX(-50%); z-index: 3; filter: drop-shadow(0 40px 50px rgba(0, 0, 0, .55)); }
.home-hero__shot { position: absolute; top: 14%; width: 36%; aspect-ratio: 400 / 640; border-radius: 20px; overflow: hidden; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .65); z-index: 2; }
.home-hero__shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.home-hero__shot--left { left: 0; transform: rotate(-6deg); }
.home-hero__shot--right { right: 0; transform: rotate(6deg); }
.home-hero__badge { position: absolute; z-index: 4; display: flex; align-items: center; gap: 12px; padding: 10px 18px 10px 10px; border-radius: 16px; background: var(--white); color: var(--ink); box-shadow: 0 24px 48px -18px rgba(0, 0, 0, .55); }
.home-hero__badge img { width: 44px; height: 44px; border-radius: 12px; background: var(--red-wash); padding: 4px; }
.home-hero__badge .ti { font-size: 2rem; color: var(--green); }
.home-hero__badge strong { display: block; font-size: .95rem; }
.home-hero__badge small { display: block; color: var(--slate); font-size: .8rem; }
.home-hero__badge--sos { left: -2%; bottom: 14%; }
.home-hero__badge--paid { right: 0; bottom: 4%; }
.home-hero__facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin: clamp(40px, 5vw, 64px) 0 0; padding: 0; list-style: none; border-radius: var(--r-lg); overflow: hidden; background: rgba(255, 255, 255, .14); }
.home-hero__facts li { padding: 20px 22px; background: rgba(20, 24, 33, .55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.home-hero__facts b { display: block; font-size: clamp(1.8rem, 1.4rem + 1.2vw, 2.6rem); line-height: 1.05; font-variant-numeric: tabular-nums; }
.home-hero__facts span { font-size: .875rem; color: rgba(255, 255, 255, .72); }
@media (max-width: 960px) { .home-hero__grid { grid-template-columns: 1fr; } .home-hero__visual { justify-self: center; max-width: 460px; } }
@media (max-width: 560px) { .home-hero__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .home-hero__badge--sos { left: 0; } }

/* Bento of the four products */
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: minmax(0, auto); gap: 16px; }
.bento__tile { position: relative; overflow: hidden; border-radius: 28px; padding: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; gap: 20px; isolation: isolate; min-height: 340px; }
.bento__copy { display: grid; gap: 12px; position: relative; z-index: 2; max-width: 46ch; }
.bento__copy p { color: var(--slate); }
.bento__tag { display: inline-flex; align-items: center; gap: 8px; width: max-content; padding: 6px 12px; border-radius: 999px; background: var(--white); font-weight: 700; font-size: .8125rem; color: var(--red); }
.bento__tag--light { background: rgba(255, 255, 255, .14); color: var(--white); }
.text-link--light { color: var(--white); }
.bento__tile--customer { grid-column: span 6; background: linear-gradient(135deg, #FFE9EC, #FFF6F7 60%, #FFFFFF); display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: 32px; min-height: 0; }
.bento__tile--customer .h2 { font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.6rem); }
.bento__phones { position: relative; display: flex; justify-content: center; align-items: flex-end; gap: 0; height: clamp(360px, 38vw, 480px); }
.bento__phones .phone { position: absolute; bottom: -12%; width: 34%; }
.bento__phones .phone:nth-child(1) { left: 6%; transform: rotate(-8deg); bottom: -18%; }
.bento__phones .phone:nth-child(2) { left: 33%; width: 38%; z-index: 2; bottom: -6%; }
.bento__phones .phone:nth-child(3) { right: 6%; transform: rotate(8deg); bottom: -18%; }
.bento__tile--mechanic { grid-column: span 3; color: var(--white); justify-content: flex-end; min-height: 420px; }
.bento__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.2s var(--ease-out); }
.bento__tile:hover .bento__bg { transform: scale(1.05); }
.bento__tile--mechanic::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(20, 24, 33, .05) 25%, rgba(20, 24, 33, .9)); }
.bento__tile--mechanic .bento__copy p, .bento__tile--admin .bento__copy p { color: rgba(255, 255, 255, .78); }
.bento__tile--mechanic .h3, .bento__tile--admin .h3 { color: var(--white); }
.bento__tile--admin { grid-column: span 3; background: var(--asphalt); color: var(--white); }
.bento__tile--web { grid-column: span 3; background: var(--concrete); }
.bento__screen { margin-top: auto; width: 108%; max-width: none; border-radius: 14px 14px 0 0; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6); margin-bottom: calc(-1 * clamp(24px, 3vw, 40px)); transition: transform .6s var(--ease-out); }
.bento__tile:hover .bento__screen { transform: translateY(-6px); }
.bento__tile--graphic { grid-column: span 3; padding: 0; min-height: 0; background: var(--red); }
.bento__wide { width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 900px) {
    .bento__tile--customer { grid-template-columns: 1fr; }
    .bento__tile--mechanic, .bento__tile--admin, .bento__tile--web, .bento__tile--graphic { grid-column: span 6; }
}

/* SOS: photo band + steps */
.home-sos { background: var(--asphalt); color: var(--white); padding-bottom: var(--section); }
.home-sos__intro { position: relative; overflow: hidden; isolation: isolate; padding-block: clamp(80px, 11vw, 150px) clamp(140px, 14vw, 200px); text-align: center; }
.home-sos__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.home-sos__intro::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(20, 24, 33, .45), rgba(38, 40, 46, 1)); }
.home-sos__intro-inner { display: grid; gap: 22px; justify-items: center; }
.home-sos__title { font-weight: 700; font-size: clamp(2.2rem, 1.3rem + 3.4vw, 4.2rem); line-height: 1.06; letter-spacing: -.02em; max-width: 16ch; text-wrap: balance; }
.home-sos .lead { color: rgba(255, 255, 255, .8); text-align: center; }
.home-sos__radii { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 6px 0 0; padding: 0; list-style: none; }
.home-sos__radii li { padding: 9px 18px; border-radius: 999px; border: 1.5px solid rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .08); font-weight: 700; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.home-sos__radii li:first-child { background: var(--red); border-color: var(--red); }
.home-sos__steps { list-style: none; margin: calc(-1 * clamp(90px, 10vw, 140px)) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; position: relative; z-index: 2; }
.home-sos__step { background: var(--asphalt-2); border: 1px solid var(--asphalt-line); border-radius: 28px; padding: 18px 18px 28px; display: grid; gap: 10px; align-content: start; }
.home-sos__step p { color: var(--slate-light); font-size: var(--fs-small); }
.home-sos__step .h3 { color: var(--white); }
.home-sos__media { position: relative; margin-bottom: 26px; }
.home-sos__photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 20px; display: block; }
.home-sos__photo--lottie { background: var(--white); display: grid; place-items: center; padding: 10%; }
.home-sos__phone { position: absolute; right: 6%; bottom: -14%; width: 34%; }
.home-sos__num { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--red); font-weight: 700; }
.home-sos .chip { background: rgba(255, 255, 255, .06); border-color: var(--asphalt-line); color: var(--white); font-size: .8125rem; }
@media (max-width: 900px) { .home-sos__steps { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; } }

/* Brand it: hue preview on a real screen */
.brandit { position: relative; aspect-ratio: 1 / 1; }
.brandit__photo { position: absolute; inset: 0 18% 14% 0; width: 82%; height: 86%; object-fit: cover; border-radius: 28px; }
.brandit .brandit__phone { position: absolute; right: 0; bottom: 0; width: 42%; }
.brandit .phone img { filter: hue-rotate(var(--hue, 0deg)); transition: filter .5s var(--ease-out); }
.brandit__swatches { display: flex; gap: 12px; flex-wrap: wrap; }
.brandit__swatch { width: 46px; height: 46px; border-radius: 50%; border: 3px solid var(--white); background: var(--c); cursor: pointer; box-shadow: 0 0 0 1.5px var(--concrete-2), 0 8px 18px -8px rgba(0, 0, 0, .4); transition: transform .25s var(--ease-spring), box-shadow .25s; }
.brandit__swatch:hover { transform: scale(1.1); }
.brandit__swatch[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--ink), 0 8px 18px -8px rgba(0, 0, 0, .4); }

/* Launch strip */
.launch-strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.launch-strip li { position: relative; aspect-ratio: 3 / 4; border-radius: 22px; overflow: hidden; color: var(--white); }
.launch-strip img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.launch-strip li:hover img { transform: scale(1.06); }
.launch-strip li::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 24, 33, 0) 40%, rgba(20, 24, 33, .85)); }
.launch-strip span { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 2; display: grid; gap: 8px; font-weight: 700; line-height: 1.25; }
.launch-strip b { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--red); font-size: .875rem; }
@media (max-width: 900px) { .launch-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px) { .launch-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }


/* Inside the customer app: expanding gallery */
.peek { display: flex; gap: 12px; height: clamp(440px, 46vw, 560px); }
.peek__panel { position: relative; flex: 1 1 0; min-width: 0; border: 0; padding: 0; border-radius: 26px; overflow: hidden; cursor: pointer; text-align: left; color: var(--white); background: var(--asphalt); isolation: isolate; transition: flex-grow .7s var(--ease-out); }
.peek__panel.is-open { flex-grow: 4.2; cursor: default; }
.peek__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.2s var(--ease-out), filter .6s; filter: saturate(.75) brightness(.8); }
.peek__panel.is-open .peek__bg { transform: scale(1.04); filter: none; }
.peek__panel::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(20, 24, 33, .15) 20%, rgba(20, 24, 33, .88)); }
.peek__num { position: absolute; left: 18px; top: 18px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .35); font-weight: 700; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background-color .3s; }
.peek__panel.is-open .peek__num { background: var(--red); border-color: var(--red); }
.peek__body { position: absolute; left: 22px; bottom: 22px; right: 22px; display: grid; gap: 6px; }
.peek__body strong { font-size: 1.15rem; white-space: nowrap; }
@media (min-width: 861px) {
    .peek__panel:not(.is-open) .peek__body { left: 50%; bottom: 24px; right: auto; transform: translateX(-50%); }
    .peek__panel:not(.is-open) .peek__body strong { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 1.05rem; }
}
.peek__body > span { font-size: .9rem; color: rgba(255, 255, 255, .8); max-width: 30ch; opacity: 0; transform: translateY(8px); transition: opacity .35s, transform .45s var(--ease-out); }
.peek__panel.is-open .peek__body { right: 46%; }
.peek__panel.is-open .peek__body > span { opacity: 1; transform: none; transition-delay: .25s; }
.peek__shot { position: absolute; right: 6%; bottom: -6%; width: 34%; aspect-ratio: 400 / 750; border-radius: 22px; overflow: hidden; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .7); opacity: 0; transform: translateY(40px) rotate(4deg); transition: opacity .4s, transform .7s var(--ease-out); }
.peek__shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.peek__panel.is-open .peek__shot { opacity: 1; transform: none; transition-delay: .2s; }
.peek__panel:not(.is-open):hover .peek__bg { filter: none; }
@media (max-width: 860px) {
    .peek { flex-direction: column; height: auto; }
    .peek__panel { flex: none; height: 92px; transition: height .6s var(--ease-out); }
    .peek__panel.is-open { height: 460px; }
    .peek__panel.is-open .peek__body { right: 44%; }
    .peek__body strong { white-space: normal; }
    .peek__panel:not(.is-open) .peek__num { top: 50%; margin-top: -19px; }
    .peek__panel:not(.is-open) .peek__body { left: 70px; right: 18px; top: 50%; bottom: auto; transform: translateY(-50%); }
}

/* One job, every screen in sync */
.sync { position: relative; display: grid; grid-template-columns: .55fr 1fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.sync__lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.sync__lines path { fill: none; stroke: var(--red); stroke-width: 2.5; stroke-dasharray: 6 8; }
.sync__item { margin: 0; display: grid; gap: 14px; position: relative; z-index: 2; }
.sync__item--phone .phone { width: min(220px, 100%); }
.sync__item--panel { transform: translateY(-40px); }
.sync__item figcaption { display: grid; gap: 2px; }
.sync__item figcaption span { color: var(--slate); font-size: var(--fs-small); }
.sync__facts { display: flex; flex-wrap: wrap; gap: 10px; margin: clamp(32px, 4vw, 48px) 0 0; padding: 0; list-style: none; }
.sync__facts li { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 999px; background: var(--concrete); font-weight: 600; font-size: var(--fs-small); }
.sync__facts .ti { color: var(--red); font-size: 1.2rem; }
@media (max-width: 900px) { .sync { grid-template-columns: 1fr; } .sync__lines { display: none; } .sync__item--panel { transform: none; } .sync__item--phone .phone { width: 200px; } }

/* Parts: second revenue line */
.parts { position: relative; overflow: hidden; isolation: isolate; color: var(--white); padding-block: var(--section); }
.parts__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.parts::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(20, 24, 33, .94) 0%, rgba(20, 24, 33, .8) 50%, rgba(20, 24, 33, .55) 100%); }
.parts__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.parts__copy { display: grid; gap: 20px; justify-items: start; }
.parts .h2 { color: var(--white); }
.parts .lead { color: rgba(255, 255, 255, .82); }
.parts__flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: none; }
.parts__flow li { display: grid; grid-template-columns: 48px 1fr; gap: 14px; align-items: center; padding: 16px 18px; border-radius: 18px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.parts__flow .ti { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--red); font-size: 1.4rem; }
.parts__flow small { display: block; color: rgba(255, 255, 255, .7); font-size: var(--fs-small); }
.parts__flow li:last-child .ti { background: var(--green); }
@media (max-width: 860px) { .parts__grid { grid-template-columns: 1fr; } }

/* City ticker */
.ticker { display: flex; align-items: center; gap: 28px; padding-block: 26px; border-block: 1px solid var(--concrete-2); overflow: hidden; }
.ticker__label { flex-shrink: 0; padding-left: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))); font-weight: 700; color: var(--red); white-space: nowrap; }
.ticker__track { display: flex; gap: 40px; width: max-content; animation: reel 40s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__track span { display: inline-flex; align-items: center; gap: 12px; font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); font-weight: 700; color: var(--ink); white-space: nowrap; }
.ticker__track img { height: 44px; width: auto; }


/* Architecture map (tech section) */
.arch { position: relative; background: #1C1F26; color: var(--white); padding-block: var(--section); overflow: hidden; isolation: isolate; }
.arch::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px); background-size: 40px 40px; -webkit-mask-image: radial-gradient(ellipse at 50% 45%, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse at 50% 45%, #000 30%, transparent 75%); }
.arch__head { display: grid; gap: 18px; max-width: 720px; margin: 0 auto clamp(48px, 6vw, 72px); text-align: center; }
.arch .h2 { color: var(--white); }
.arch .lead { color: var(--slate-light); margin-inline: auto; }
.arch__map { position: relative; display: grid; gap: clamp(56px, 7vw, 88px); }
.arch__wires { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 0; }
.arch__wires path { fill: none; stroke: rgba(255, 255, 255, .14); stroke-width: 1.5; transition: stroke .3s, stroke-width .3s; }
.arch__wires path.flow { stroke: var(--red); stroke-width: 2; stroke-dasharray: 4 10; animation: archFlow 1.2s linear infinite; opacity: .55; }
.arch__wires path.is-hot { stroke: var(--red); stroke-width: 2.5; opacity: 1; }
@keyframes archFlow { to { stroke-dashoffset: -28; } }
.arch__row { position: relative; z-index: 1; display: grid; gap: 14px; }
.arch__row--clients { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.arch__row--core { justify-items: center; }
.arch__row--services { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
.arch__node { position: relative; border-radius: 18px; background: #262A33; border: 1px solid #343944; transition: border-color .3s, transform .35s var(--ease-out), box-shadow .35s; outline: none; }
.arch__node:hover, .arch__node:focus-visible, .arch__node.is-hot { border-color: var(--red); transform: translateY(-4px); box-shadow: 0 20px 40px -24px rgba(254, 32, 55, .6); }
.arch__node--client { display: grid; grid-template-rows: 120px auto; overflow: hidden; }
.arch__node--client img { width: 100%; height: 120px; object-fit: cover; object-position: top; opacity: .9; }
.arch__node--client > span { padding: 14px 16px 16px; display: grid; gap: 4px; }
.arch__node--client strong { font-size: 1rem; }
.arch__node--client small { color: var(--slate-light); font-size: .8125rem; display: flex; align-items: center; gap: 6px; }
.arch__node--client small .ti { color: #61DAFB; font-size: 1rem; }
.arch__node--client:nth-child(n+3) small .ti { color: #FB70A9; }
.arch__core { position: relative; display: grid; justify-items: center; gap: 10px; padding: 28px 40px; border-radius: 26px; text-align: center; background: linear-gradient(160deg, #2E323C, #22252D); border: 1.5px solid var(--red); box-shadow: 0 0 0 8px rgba(254, 32, 55, .08), 0 40px 80px -40px rgba(254, 32, 55, .6); min-width: min(100%, 520px); }
.arch__core > .ti { font-size: 2.6rem; color: #FF2D20; }
.arch__core strong { font-size: clamp(1.2rem, 1rem + .6vw, 1.5rem); }
.arch__core-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.arch__core-tags span { padding: 5px 11px; border-radius: 999px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); font-size: .78rem; font-weight: 600; color: rgba(255, 255, 255, .85); }
.arch__pulse { position: absolute; inset: -1.5px; border-radius: 26px; border: 1.5px solid var(--red); animation: archPulse 2.6s var(--ease-out) infinite; pointer-events: none; }
@keyframes archPulse { 0% { opacity: .7; transform: scale(1); } 100% { opacity: 0; transform: scale(1.12, 1.35); } }
.arch__node--service { display: grid; gap: 6px; align-content: start; justify-items: center; text-align: center; padding: 18px 12px 16px; }
.arch__node--service > .ti { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: rgba(254, 32, 55, .14); color: #FF6B7C; font-size: 1.45rem; margin-bottom: 4px; }
.arch__node--service strong { font-size: .875rem; line-height: 1.25; }
.arch__node--service small { color: var(--slate-light); font-size: .75rem; line-height: 1.4; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .4s var(--ease-out), opacity .3s; }
.arch__node--service:hover small, .arch__node--service:focus-visible small, .arch__node--service.is-hot small { max-height: 80px; opacity: 1; }
.arch__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: clamp(48px, 6vw, 72px) 0 0; padding: 0; list-style: none; }
.arch__facts li { display: grid; grid-template-columns: 30px 1fr; gap: 12px; padding: 18px 20px; border-radius: 18px; background: rgba(255, 255, 255, .04); border: 1px solid #343944; }
.arch__facts .ti { font-size: 1.5rem; color: #FF6B7C; }
.arch__facts small { display: block; color: var(--slate-light); font-size: var(--fs-small); }
@media (max-width: 1080px) { .arch__row--services { grid-template-columns: repeat(4, minmax(0, 1fr)); } .arch__node--service small { max-height: 80px; opacity: 1; } }
@media (max-width: 760px) {
    .arch__wires { display: none; }
    .arch__map { gap: 28px; }
    .arch__row--clients, .arch__row--services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .arch__core { padding: 24px 20px; }
    .arch__facts { grid-template-columns: 1fr; }
}

/* ---------- Reveal (only for a few chapter openers) ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.reveal.is-visible { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

/* ---------- Page transitions (cross-document View Transitions) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vtOut .22s cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: vtIn .42s var(--ease-out) both; }
@keyframes vtOut { to { opacity: 0; transform: translateY(-10px); } }
@keyframes vtIn { from { opacity: 0; transform: translateY(16px); } }
::view-transition-group(site-header) { animation: none; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
    .reveal { opacity: 1; transform: none; }
    .reel__track, .ticker__track { animation: none; flex-wrap: nowrap; }
    .arch__pulse { display: none; }
    .reel { overflow-x: auto; }
    @view-transition { navigation: none; }
}