/* ==========================================================================
   SoftPro — Dark Premium Design System
   Brand: teal #1DDEC8 → cyan #00C8FF (extracted from logo)
   ========================================================================== */

/* ---------- 1. TOKENS ---------- */
:root {
    /* surfaces */
    --bg-0:        #060D14;   /* page                     */
    --bg-1:        #08111A;   /* alternate section        */
    --bg-2:        #0D1926;   /* card                     */
    --bg-3:        #12222F;   /* card hover / elevated    */

    /* lines */
    --line:        rgba(150, 196, 214, .11);
    --line-2:      rgba(150, 196, 214, .18);
    --line-brand:  rgba(29, 222, 200, .32);

    /* text */
    --txt-1:       #EAF4F8;
    --txt-2:       #A6BECD;
    --txt-3:       #6E8A9C;

    /* brand */
    --brand-1:     #1DDEC8;
    --brand-2:     #00C8FF;
    /* The brand colour doing two different jobs, which only matters once a
       light background is on the table: as a FILL it stays the mint from the
       logo, but as TEXT it is unreadable on anything pale — #1DDEC8 on a
       near-white page measures 1.61:1, against a 4.5 floor. --brand-fg is the
       one used for words and icons, and it is the mint here so nothing
       changes; the light theme darkens it to #0E6F64 (5.71:1) and leaves
       every fill alone. */
    --brand-fg:    var(--brand-1);

    --brand-ink:   #04202B;
    --grad:        linear-gradient(135deg, #1DDEC8 0%, #00C8FF 100%);
    /* Everything that is merely SELECTED or ACTIVE — tabs, ticks, badges,
       chosen packages — points at this rather than at --grad directly. It is
       the gradient today, so nothing changes. Flip it to a flat colour in the
       trial block at the bottom of :root and the gradient falls back to the
       four places it actually earns: the primary button, the one accented
       word in the headline, the card hairline, the preloader. */
    --grad-accent: var(--grad);

    --grad-soft:   linear-gradient(135deg, rgba(29,222,200,.16), rgba(0,200,255,.16));

    /* status */
    /* ---- surface washes --------------------------------------------------
       A white film over the dark ground is how every raised surface on this
       site is drawn — cards, inputs, chips, hover states. There were sixteen
       different alphas doing it, from .01 to .08, and .03 / .035 / .04 / .045
       were all being used for the same job.

       Four steps replace them, no value moving by more than .01 alpha.

       These are also the single thing standing between this stylesheet and a
       light theme: a white film on a white page is invisible. As tokens, that
       becomes four values to redefine rather than forty rules to rewrite.
       --------------------------------------------------------------------- */
    --fill-1:      rgba(255, 255, 255, .02);   /* barely there             */
    --fill-2:      rgba(255, 255, 255, .04);   /* resting surface          */
    --fill-3:      rgba(255, 255, 255, .06);   /* hover, raised            */
    --fill-4:      rgba(255, 255, 255, .08);   /* pressed, strongest       */

    /* ---- type scale ------------------------------------------------------
       Twenty-seven sizes lived between 10.5px and 17px — 14.8, 14.6, 14.5,
       14.4, 14.3, 14.2 all at once. Nobody can tell those apart; each was
       just a decision taken once and never revisited.

       Seven steps replace them, chosen so that no existing size moves by more
       than half a pixel: the page looks identical, but the next label has one
       of seven answers instead of an open question.

       Display sizes (the clamp()ed headings, 20px and up) are a separate
       scale and stay as they are.
       --------------------------------------------------------------------- */
    --fs-2xs:      11px;     /* eyebrows, badges, table labels   */
    --fs-xs:       12.5px;   /* captions, hints, chips           */
    --fs-sm:       13.5px;   /* secondary text, dense UI         */
    --fs-md:       14.5px;   /* the default for interface text   */
    --fs-lg:       15.5px;   /* emphasis, lead-ins               */
    --fs-xl:       16px;     /* reading text                     */
    --fs-2xl:      17px;     /* card titles                      */

    /* ---- weights ---------------------------------------------------------
       500, 550, 620, 650 and 750 were all in use. Four steps carry every
       distinction the design actually makes.
       --------------------------------------------------------------------- */
    --fw-normal:   400;
    --fw-medium:   600;
    --fw-bold:     700;
    --fw-black:    800;

    /* ---- semantic state -------------------------------------------------
       Four meanings, four roles each. The roles are what the code kept
       reinventing: a readable ink on a dark ground, a wash to fill with, and
       an edge to draw with. Only the two bases below existed, so the other
       three roles were written out by hand every time — and drifted, with the
       error wash appearing at .08, .09 and .12 for the same job.

       -ink   text and icons; the base colours are too dark to read at 13px
       -bg    the fill behind a notice, pill or chip
       -line  its border   (-hi for hover, where it has to lift)
       --------------------------------------------------------------------- */
    --ok:          #34D399;
    --ok-ink:      #86EFC4;
    --ok-bg:       rgba(52, 211, 153, .10);
    --ok-line:     rgba(52, 211, 153, .28);

    --err:         #FB7185;
    --err-ink:     #FDA4AF;
    --err-bg:      rgba(251, 113, 133, .10);
    --err-line:    rgba(251, 113, 133, .28);
    --err-line-hi: rgba(251, 113, 133, .40);

    --warn:        #FBBF24;
    --warn-ink:    #FCD34D;
    --warn-bg:     rgba(251, 191, 36, .08);
    --warn-line:   rgba(251, 191, 36, .28);

    --info:        #3B82F6;
    --info-ink:    #93C5FD;
    --info-bg:     rgba(59, 130, 246, .10);
    --info-line:   rgba(59, 130, 246, .28);

    --wa:          #25D366;

    /* shadows */
    --sh-sm:       0 2px 8px rgba(0,0,0,.35);
    --sh-md:       0 12px 32px -12px rgba(0,0,0,.6);
    --sh-lg:       0 32px 70px -24px rgba(0,0,0,.75);
    --glow:        0 14px 44px -14px rgba(0,200,255,.5);
    --glow-lg:     0 24px 70px -18px rgba(0,200,255,.55);

    /* geometry */
    --r-sm:        10px;
    --r-md:        16px;
    --r-lg:        22px;
    --r-xl:        30px;
    --r-pill:      999px;

    /* motion */
    --e-out:       cubic-bezier(.16, 1, .3, 1);
    --t-fast:      .2s var(--e-out);
    --t:           .38s var(--e-out);
    --t-slow:      .7s var(--e-out);

    /* rhythm */
    --gutter:      clamp(20px, 4vw, 32px);
    --sec-y:       clamp(76px, 9vw, 128px);
    --max:         1200px;

    --header-h:    76px;

    /* ======================================================================
       TRIAL: the calmer palette
       ----------------------------------------------------------------------
       Three changes, all reversible by re-adding the slashes on the line
       below. Nothing else in the stylesheet knows about them.

         1. The gradient stops being the answer to everything. It keeps the
            primary button, the accented word, the card hairline and the
            preloader; the other 27 selected/active states go flat brand.
         2. The page lifts one notch off pure black. #060D14 is darker than
            it needs to be for a business audience.
         3. A second neutral, so "1000+ clients" and other trust marks are
            not fighting the call to action for the same colour.

       Contrast was checked on every pairing before this was written: the
       lowest is muted text on a card at 4.64:1, still above the 4.5 floor —
       but that is the one to watch, because lifting the surface spends
       headroom that pairing did not have much of.
       ====================================================================== */
    /*
    --grad-accent: var(--brand-1);
    --bg-0:        #0A1420;
    --bg-2:        #111E2C;
    --txt-trust:   #C3D3DE;
    */
}

/* ---------- 2. RESET & BASE ---------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 20px);
    -webkit-text-size-adjust: 100%;
}

/* The hidden attribute means hidden, everywhere.
   The browser's own rule is only  [hidden] { display: none }  at the weakest
   possible specificity, so any class that sets display beats it. That is how
   the wizard's Continue button survived onto the final step: renderNav() set
   hidden=true, and  .btn { display: flex }  quietly overruled it. Anything
   marked hidden is meant to be gone, so this wins outright. */
[hidden] { display: none !important; }

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: var(--fs-xl);
    line-height: 1.65;
    color: var(--txt-2);
    background: var(--bg-0);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "cv11", "ss01";
}

body.ar {
    font-family: 'Cairo', system-ui, sans-serif;
    letter-spacing: 0;
}

/* subtle film grain over the whole page — kills gradient banding */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    opacity: .028;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img, svg { display: block; max-width: 100%; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul { list-style: none; }

::selection { background: rgba(29,222,200,.28); color: #fff; }

:focus-visible {
    outline: 2px solid var(--brand-1);
    outline-offset: 3px;
    border-radius: 4px;
}

/* scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-0); }
::-webkit-scrollbar-thumb {
    background: #1d3040;
    border-radius: 10px;
    border: 2px solid var(--bg-0);
}
::-webkit-scrollbar-thumb:hover { background: #2a4557; }

.skip-link {
    position: absolute;
    inset-inline-start: 50%;
    top: -80px;
    transform: translateX(-50%);
    z-index: 10000;
    background: var(--brand-1);
    color: var(--brand-ink);
    font-weight: var(--fw-bold);
    padding: 12px 24px;
    border-radius: 0 0 var(--r-sm) var(--r-sm);
    transition: top var(--t-fast);
}
.skip-link:focus { top: 0; }

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- 3. LAYOUT ---------- */
.container {
    width: 100%;
    max-width: var(--max);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

section { position: relative; }

.section-pad { padding-block: var(--sec-y); }

.section-alt { background: var(--bg-1); }

/* hairline divider between sections */
.section-alt::before,
.section-alt::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--line-2) 20%, var(--line-2) 80%, transparent);
}
.section-alt::before { top: 0; }
.section-alt::after  { bottom: 0; }

/* ---------- 4. TYPOGRAPHY ---------- */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--brand-fg);
    background: rgba(29,222,200,.07);
    border: 1px solid rgba(29,222,200,.2);
    padding: 7px 16px;
    border-radius: var(--r-pill);
    margin-bottom: 22px;
}
.eyebrow .ico { width: 15px; height: 15px; }
body.ar .eyebrow { letter-spacing: 0; }

.h1 {
    font-size: clamp(38px, 6.4vw, 68px);
    font-weight: var(--fw-black);
    line-height: 1.06;
    letter-spacing: -.03em;
    color: var(--txt-1);
}
body.ar .h1 { line-height: 1.25; letter-spacing: 0; }

.h2 {
    font-size: clamp(29px, 4.4vw, 46px);
    font-weight: var(--fw-black);
    line-height: 1.14;
    letter-spacing: -.025em;
    color: var(--txt-1);
    margin-bottom: 18px;
}
body.ar .h2 { line-height: 1.35; letter-spacing: 0; }

.h3 {
    font-size: 20px;
    font-weight: var(--fw-bold);
    line-height: 1.35;
    letter-spacing: -.015em;
    color: var(--txt-1);
}

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

.lead {
    font-size: clamp(16px, 1.6vw, 18.5px);
    line-height: 1.75;
    color: var(--txt-2);
    max-width: 62ch;
}

.section-head {
    text-align: center;
    max-width: 700px;
    margin-inline: auto;
    margin-bottom: clamp(48px, 6vw, 72px);
}
.section-head .lead { margin-inline: auto; }

/* ---------- 5. ATMOSPHERE (aurora + grid) ---------- */
.atmos {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .5;
    will-change: transform;
}
.blob-1 {
    width: 620px; height: 620px;
    top: -240px; inset-inline-start: -160px;
    background: radial-gradient(circle, rgba(29,222,200,.42), transparent 68%);
    animation: drift1 22s ease-in-out infinite;
}
.blob-2 {
    width: 560px; height: 560px;
    top: 40px; inset-inline-end: -180px;
    background: radial-gradient(circle, rgba(0,200,255,.4), transparent 68%);
    animation: drift2 26s ease-in-out infinite;
}
.blob-3 {
    width: 480px; height: 480px;
    bottom: -220px; inset-inline-start: 42%;
    background: radial-gradient(circle, rgba(0,140,255,.28), transparent 70%);
    animation: drift1 30s ease-in-out infinite reverse;
}

@keyframes drift1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(60px, 50px) scale(1.12); }
}
@keyframes drift2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(-70px, 40px) scale(1.08); }
}

.grid-overlay {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(150,196,214,.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(150,196,214,.055) 1px, transparent 1px);
    background-size: 62px 62px;
    -webkit-mask-image: radial-gradient(ellipse 90% 65% at 50% 30%, #000 25%, transparent 78%);
    mask-image: radial-gradient(ellipse 90% 65% at 50% 30%, #000 25%, transparent 78%);
}

/* ---------- 6. BUTTONS ---------- */
.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    letter-spacing: -.01em;
    padding: 15px 30px;
    border-radius: var(--r-pill);
    white-space: nowrap;
    transition: transform var(--t-fast), box-shadow var(--t), background var(--t), border-color var(--t), color var(--t);
    overflow: hidden;
    isolation: isolate;
}
.btn .ico { width: 18px; height: 18px; flex-shrink: 0; }
.btn:active { transform: translateY(1px) scale(.99); }

.btn-primary {
    background: var(--grad);
    color: var(--brand-ink);
    font-weight: var(--fw-bold);
    box-shadow: var(--glow);
}
/* sheen sweep on hover */
.btn-primary::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(110deg, transparent 25%, rgba(255,255,255,.55) 50%, transparent 75%);
    transform: translateX(-120%);
    transition: transform .75s var(--e-out);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--glow-lg); }
.btn-primary:hover::after { transform: translateX(120%); }

.btn-ghost {
    color: var(--txt-1);
    background: var(--fill-2);
    border: 1px solid var(--line-2);
    backdrop-filter: blur(10px);
}
.btn-ghost:hover {
    transform: translateY(-2px);
    border-color: var(--line-brand);
    background: rgba(29,222,200,.09);
    color: var(--brand-fg);
}

.btn-block { width: 100%; }

/* arrow nudge */
.btn .ico-arrow { transition: transform var(--t); }
.btn:hover .ico-arrow { transform: translateX(4px); }
body.ar .btn .ico-arrow { transform: scaleX(-1); }
body.ar .btn:hover .ico-arrow { transform: scaleX(-1) translateX(4px); }

/* ---------- 7. CARD PRIMITIVE ---------- */
.card {
    position: relative;
    background: linear-gradient(180deg, var(--fill-2), var(--fill-1));
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    backdrop-filter: blur(14px);
    transition: transform var(--t), border-color var(--t), background var(--t), box-shadow var(--t);
    overflow: hidden;
}

/* gradient hairline that fades in on hover */
.card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: var(--grad);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0;
    transition: opacity var(--t);
    pointer-events: none;
}

/* cursor spotlight — JS feeds --mx/--my */
.card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%), rgba(29,222,200,.12), transparent 62%);
    opacity: 0;
    transition: opacity var(--t);
    pointer-events: none;
}

.card:hover {
    transform: translateY(-6px);
    background: linear-gradient(180deg, var(--fill-4), var(--fill-1));
    box-shadow: var(--sh-lg);
}
.card:hover::before,
.card:hover::after { opacity: 1; }

/* ---------- 8. HEADER ---------- */
#header {
    position: fixed;
    inset-inline: 0;
    top: 0;
    z-index: 1000;
    height: var(--header-h);
    display: flex;
    align-items: center;
    transition: background var(--t), border-color var(--t), height var(--t), backdrop-filter var(--t);
    border-bottom: 1px solid transparent;
}
#header.scrolled {
    height: 66px;
    background: rgba(6,13,20,.78);
    backdrop-filter: blur(18px) saturate(160%);
    border-bottom-color: var(--line);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    flex-shrink: 0;
}
.brand img { width: 38px; height: 38px; object-fit: contain; }
.brand-name {
    font-size: 22px;
    font-weight: var(--fw-black);
    letter-spacing: -.03em;
    color: var(--txt-1);
}
.brand-name b { color: var(--brand-fg); font-weight: var(--fw-black); }

.nav-desktop {
    display: flex;
    align-items: center;
    gap: 4px;
}
.nav-desktop a {
    position: relative;
    font-size: var(--fs-md);
    font-weight: var(--fw-medium);
    color: var(--txt-2);
    padding: 9px 15px;
    border-radius: var(--r-pill);
    transition: color var(--t-fast), background var(--t-fast);
}
.nav-desktop a::after {
    content: "";
    position: absolute;
    bottom: 3px;
    inset-inline-start: 50%;
    width: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--grad-accent);
    transform: translateX(-50%);
    transition: width var(--t);
}
.nav-desktop a:hover { color: var(--txt-1); }
.nav-desktop a:hover::after,
.nav-desktop a.current::after { width: 20px; }
.nav-desktop a.current { color: var(--brand-fg); }

.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.lang-switch {
    display: flex;
    background: var(--fill-2);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    padding: 3px;
}
.lang-btn {
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    letter-spacing: .04em;
    color: var(--txt-3);
    padding: 6px 13px;
    border-radius: var(--r-pill);
    transition: color var(--t-fast), background var(--t-fast);
}
.lang-btn:hover { color: var(--txt-1); }
.lang-btn.active {
    background: var(--grad-accent);
    color: var(--brand-ink);
}

.nav-cta { display: inline-flex; }

.burger {
    display: none;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--fill-2);
}
.burger span {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: var(--txt-1);
    transition: transform var(--t), opacity var(--t-fast);
}
.burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* mobile drawer */
.nav-mobile {
    position: fixed;
    inset-inline: 0;
    top: var(--header-h);
    z-index: 999;
    background: rgba(6,13,20,.97);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--line);
    padding: 10px var(--gutter) 26px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    transform: translateY(-14px);
    opacity: 0;
    visibility: hidden;
    transition: transform var(--t), opacity var(--t), visibility var(--t);
}
.nav-mobile.open { transform: translateY(0); opacity: 1; visibility: visible; }
.nav-mobile a {
    font-size: var(--fs-xl);
    font-weight: var(--fw-medium);
    color: var(--txt-2);
    padding: 15px 4px;
    border-bottom: 1px solid var(--line);
    transition: color var(--t-fast), padding-inline-start var(--t-fast);
}
.nav-mobile a:last-of-type { border-bottom: 0; }
.nav-mobile a:hover { color: var(--brand-fg); padding-inline-start: 12px; }
.nav-mobile .btn { margin-top: 16px; }

/* ---------- 9. HERO ---------- */
.hero {
    position: relative;
    padding-top: calc(var(--header-h) + clamp(52px, 8vw, 96px));
    padding-bottom: clamp(70px, 9vw, 120px);
    overflow: hidden;
}

.hero-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.08fr .92fr;
    gap: clamp(40px, 5vw, 72px);
    align-items: center;
}

.hero-title { margin-bottom: 24px; }
.hero-title .line { display: block; }

.hero-title .typed-wrap {
    display: flex;
    align-items: baseline;
    min-height: 1em;
}
.caret {
    display: inline-block;
    width: 3px;
    height: .82em;
    margin-inline-start: 6px;
    border-radius: 2px;
    background: var(--brand-1);
    animation: blink 1.05s steps(2, start) infinite;
    box-shadow: 0 0 12px rgba(29,222,200,.8);
}
@keyframes blink { to { opacity: 0; } }

.hero-sub { margin-bottom: 34px; max-width: 54ch; }

.hero-btns { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 40px; }

.hero-trust {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 26px;
    font-size: var(--fs-sm);
    color: var(--txt-3);
}
.hero-trust span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.hero-trust .ico { width: 16px; height: 16px; color: var(--brand-fg); }

/* hero visual */
.hero-visual {
    position: relative;
    perspective: 1400px;
}

.mock {
    position: relative;
    background: linear-gradient(165deg, var(--fill-4), var(--fill-1));
    border: 1px solid var(--line-2);
    border-radius: var(--r-xl);
    padding: 20px;
    backdrop-filter: blur(18px);
    box-shadow: var(--sh-lg), 0 0 60px -20px rgba(0,200,255,.4);
    transform: rotateY(-9deg) rotateX(4deg);
    transition: transform var(--t-slow);
    animation: floaty 7s ease-in-out infinite;
}
.hero-visual:hover .mock { transform: rotateY(0deg) rotateX(0deg); }
body.ar .mock { transform: rotateY(9deg) rotateX(4deg); }
body.ar .hero-visual:hover .mock { transform: rotateY(0) rotateX(0); }

@keyframes floaty {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 -14px; }
}

.mock-bar {
    display: flex;
    align-items: center;
    gap: 7px;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--line);
}
.dot { width: 10px; height: 10px; border-radius: 50%; }
.dot-r { background: #FF5F57; }
.dot-y { background: #FEBC2E; }
.dot-g { background: #28C840; }
.mock-title {
    margin-inline-start: auto;
    font-size: var(--fs-2xs);
    font-weight: var(--fw-medium);
    letter-spacing: .05em;
    color: var(--txt-3);
    font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
}

.mock-head {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 20px;
}
.mock-icon {
    display: grid;
    place-items: center;
    width: 44px; height: 44px;
    border-radius: 13px;
    background: var(--grad-accent);
    color: var(--brand-ink);
    box-shadow: var(--glow);
    flex-shrink: 0;
}
.mock-icon .ico { width: 22px; height: 22px; }
.mock-head h4 { font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--txt-1); }
.mock-head p  { font-size: var(--fs-xs); color: var(--txt-3); }

/* fake code lines */
.code-lines { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.cl {
    height: 9px;
    border-radius: 5px;
    background: rgba(150,196,214,.13);
    animation: shimmer 2.6s ease-in-out infinite;
}
.cl.on { background: var(--grad-accent); opacity: .8; }
.cl.w95 { width: 95%; } .cl.w80 { width: 80%; }
.cl.w65 { width: 65%; } .cl.w50 { width: 50%; }
.cl:nth-child(2) { animation-delay: .2s; }
.cl:nth-child(3) { animation-delay: .4s; }
.cl:nth-child(4) { animation-delay: .6s; }
.cl:nth-child(5) { animation-delay: .8s; }
.cl:nth-child(6) { animation-delay: 1s; }
@keyframes shimmer { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

.mock-foot {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}
.mock-kpi {
    background: var(--fill-2);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 11px 12px;
}
.mock-kpi b {
    display: block;
    font-size: var(--fs-2xl);
    font-weight: var(--fw-black);
    color: var(--brand-fg);
    letter-spacing: -.02em;
}
.mock-kpi span { font-size: var(--fs-2xs); color: var(--txt-3); }

/* floating badges */
.float-badge {
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 11px;
    background: rgba(13,25,38,.9);
    border: 1px solid var(--line-2);
    border-radius: 15px;
    padding: 12px 16px;
    backdrop-filter: blur(16px);
    box-shadow: var(--sh-md);
    animation: floaty 6s ease-in-out infinite;
}
/* both hang off the card edges over decorative areas only */
.fb-1 { top: 29%;     inset-inline-start: -7%; animation-delay: .4s;  }
.fb-2 { bottom: -11%; inset-inline-end: -8%;   animation-delay: 1.6s; }
.fb-icon {
    display: grid;
    place-items: center;
    width: 36px; height: 36px;
    border-radius: 11px;
    flex-shrink: 0;
}
.fb-icon .ico { width: 18px; height: 18px; }
.fb-teal  { background: rgba(29,222,200,.14);  color: var(--brand-fg); }
.fb-green { background: rgba(52,211,153,.14);  color: var(--ok); }
.fb-label { font-size: var(--fs-2xs); color: var(--txt-3); line-height: 1.3; }
.fb-value { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--txt-1); line-height: 1.3; }

/* ---------- 10. STATS ---------- */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
}
.stat {
    background: var(--bg-1);
    padding: clamp(26px, 3.6vw, 40px) 20px;
    text-align: center;
    transition: background var(--t);
}
.stat:hover { background: var(--bg-2); }
.stat-num {
    font-size: clamp(32px, 4.4vw, 46px);
    font-weight: var(--fw-black);
    letter-spacing: -.035em;
    line-height: 1;
    margin-bottom: 8px;
    background: var(--grad-accent);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-variant-numeric: tabular-nums;
}
.stat-label {
    font-size: var(--fs-sm);
    color: var(--txt-3);
    font-weight: var(--fw-medium);
}

/* ---------- 11. SERVICES ---------- */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 22px;
}

.service {
    padding: 32px 28px 30px;
}
.service-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}
.service-icon {
    display: grid;
    place-items: center;
    width: 54px; height: 54px;
    border-radius: 16px;
    background: var(--grad-soft);
    border: 1px solid var(--line-brand);
    color: var(--brand-fg);
    flex-shrink: 0;
    transition: transform var(--t), background var(--t), color var(--t), box-shadow var(--t);
}
.service-icon .ico { width: 25px; height: 25px; }
.card:hover .service-icon {
    transform: scale(1.06) rotate(-4deg);
    background: var(--grad-accent);
    color: var(--brand-ink);
    box-shadow: var(--glow);
}
.service-no {
    font-size: 30px;
    font-weight: var(--fw-black);
    letter-spacing: -.04em;
    color: rgba(150,196,214,.12);
    line-height: 1;
    transition: color var(--t);
}
.card:hover .service-no { color: rgba(29,222,200,.3); }

.service h3 { margin-bottom: 11px; }
.service p { font-size: var(--fs-md); line-height: 1.72; color: var(--txt-2); margin-bottom: 20px; }

.feat-list { display: flex; flex-direction: column; gap: 10px; padding-top: 18px; border-top: 1px solid var(--line); }
.feat {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--fs-sm);
    color: var(--txt-3);
    transition: color var(--t-fast);
}
.feat .ico { width: 16px; height: 16px; color: var(--brand-fg); flex-shrink: 0; }
.card:hover .feat { color: var(--txt-2); }

/* ---------- 12. PORTFOLIO ---------- */
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 22px;
}

.project { display: flex; flex-direction: column; }

.project-thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-bottom: 1px solid var(--line);
}
.project-thumb .ico {
    width: 60px; height: 60px;
    color: rgba(255,255,255,.9);
    opacity: .88;
    transition: transform var(--t-slow), opacity var(--t);
    filter: drop-shadow(0 6px 20px rgba(0,0,0,.45));
}
.card:hover .project-thumb .ico { transform: scale(1.12) translateY(-3px); opacity: 1; }

/* thumb tints */
.t-navy  { background: linear-gradient(135deg, #123044, #007D93); }
.t-green { background: linear-gradient(135deg, #0F3D2A, #16A34A); }
.t-violet{ background: linear-gradient(135deg, #1B2A52, #6D4AED); }
.t-brand { background: linear-gradient(135deg, #12A896, #0091CC); }
.t-blue  { background: linear-gradient(135deg, #0A3D63, #0EA5E9); }
.t-rose  { background: linear-gradient(135deg, #61163E, #E1436B); }
.t-amber { background: linear-gradient(135deg, #5C3410, #E0930F); }

/* diagonal shine across thumb */
.project-thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.18) 50%, transparent 62%);
    transform: translateX(-100%);
    transition: transform .9s var(--e-out);
}
.card:hover .project-thumb::after { transform: translateX(100%); }

.project-body { padding: 24px 26px 28px; flex: 1; }
.tag {
    display: inline-block;
    font-size: var(--fs-2xs);
    font-weight: var(--fw-bold);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--brand-fg);
    background: rgba(29,222,200,.09);
    border: 1px solid rgba(29,222,200,.2);
    padding: 5px 12px;
    border-radius: var(--r-pill);
    margin-bottom: 14px;
}
body.ar .tag { letter-spacing: 0; }
.project-body h3 { margin-bottom: 10px; }
.project-body p { font-size: var(--fs-md); line-height: 1.72; color: var(--txt-2); }

/* ---------- 13. ABOUT ---------- */
.about-grid {
    display: grid;
    grid-template-columns: .92fr 1.08fr;
    gap: clamp(40px, 5.5vw, 78px);
    align-items: center;
}

.about-visual { position: relative; }
.about-frame {
    position: relative;
    aspect-ratio: 1 / 1;
    display: grid;
    place-items: center;
    border-radius: var(--r-xl);
    background:
        radial-gradient(circle at 30% 25%, rgba(29,222,200,.2), transparent 55%),
        radial-gradient(circle at 75% 78%, rgba(0,200,255,.2), transparent 55%),
        linear-gradient(160deg, var(--fill-3), var(--fill-1));
    border: 1px solid var(--line-2);
    overflow: hidden;
}
.about-frame::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(150,196,214,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(150,196,214,.06) 1px, transparent 1px);
    background-size: 40px 40px;
}
.about-frame img {
    position: relative;
    width: 46%;
    filter: drop-shadow(0 20px 50px rgba(0,200,255,.4));
    animation: floaty 6s ease-in-out infinite;
}

/* concentric rings */
.ring {
    position: absolute;
    border: 1px solid rgba(29,222,200,.14);
    border-radius: 50%;
}
.ring-1 { inset: 12%; animation: spin 26s linear infinite; }
.ring-2 { inset: 24%; border-style: dashed; animation: spin 34s linear infinite reverse; }
@keyframes spin { to { transform: rotate(360deg); } }

.about-chip {
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(13,25,38,.92);
    border: 1px solid var(--line-2);
    border-radius: 16px;
    padding: 13px 18px;
    backdrop-filter: blur(16px);
    box-shadow: var(--sh-md);
    animation: floaty 6.5s ease-in-out infinite;
}
.ac-1 { top: 4%; inset-inline-end: -6%; }
.ac-2 { bottom: 5%; inset-inline-start: -6%; animation-delay: 1.4s; }
.about-chip .fb-icon { background: var(--grad-soft); color: var(--brand-fg); border: 1px solid var(--line-brand); }
.ac-num { font-size: 19px; font-weight: var(--fw-black); color: var(--txt-1); line-height: 1.2; letter-spacing: -.02em; }
.ac-label { font-size: var(--fs-2xs); color: var(--txt-3); line-height: 1.2; }

.values { display: flex; flex-direction: column; gap: 8px; margin-top: 32px; }
.value {
    display: flex;
    gap: 16px;
    padding: 16px;
    border-radius: var(--r-md);
    border: 1px solid transparent;
    transition: background var(--t), border-color var(--t);
}
.value:hover { background: var(--fill-2); border-color: var(--line); }
.value-icon {
    display: grid;
    place-items: center;
    width: 44px; height: 44px;
    border-radius: 13px;
    background: var(--grad-soft);
    border: 1px solid var(--line-brand);
    color: var(--brand-fg);
    flex-shrink: 0;
    transition: background var(--t), color var(--t);
}
.value-icon .ico { width: 20px; height: 20px; }
.value:hover .value-icon { background: var(--grad-accent); color: var(--brand-ink); }
.value h4 { font-size: var(--fs-xl); font-weight: var(--fw-bold); color: var(--txt-1); margin-bottom: 4px; }
.value p  { font-size: var(--fs-md); line-height: 1.65; color: var(--txt-3); }

/* ---------- 14. TESTIMONIALS ---------- */
.testi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 22px;
}
.testi { padding: 30px 28px; display: flex; flex-direction: column; }
.testi-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}
.stars { display: flex; gap: 3px; color: #FFB020; }
.stars .ico { width: 16px; height: 16px; }
.quote-mark { width: 32px; height: 32px; color: rgba(29,222,200,.18); }
.testi-quote {
    font-size: var(--fs-lg);
    line-height: 1.78;
    color: var(--txt-2);
    margin-bottom: 24px;
    flex: 1;
}
.testi-author {
    display: flex;
    align-items: center;
    gap: 13px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}
.avatar {
    display: grid;
    place-items: center;
    width: 46px; height: 46px;
    border-radius: 50%;
    font-size: var(--fs-md);
    font-weight: var(--fw-black);
    letter-spacing: .02em;
    color: var(--brand-ink);
    flex-shrink: 0;
}
.av-1 { background: linear-gradient(135deg, #1DDEC8, #00C8FF); }
.av-2 { background: linear-gradient(135deg, #00C8FF, #3B82F6); }
.av-3 { background: linear-gradient(135deg, #14B8A6, #1DDEC8); }
.testi-name { font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--txt-1); }
.testi-role { font-size: var(--fs-xs); color: var(--txt-3); }

/* ---------- 15. CONTACT ---------- */
.contact-grid {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: clamp(28px, 3.6vw, 46px);
    align-items: start;
}

.contact-side { padding: 34px 30px; }
.contact-side > h3 { margin-bottom: 10px; }
.contact-side > p  { font-size: var(--fs-md); color: var(--txt-3); margin-bottom: 28px; }

.contact-list { display: flex; flex-direction: column; gap: 6px; }
.contact-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 13px 12px;
    border-radius: var(--r-md);
    border: 1px solid transparent;
    transition: background var(--t), border-color var(--t), transform var(--t);
}
.contact-item:hover {
    background: var(--fill-2);
    border-color: var(--line);
    transform: translateX(3px);
}
body.ar .contact-item:hover { transform: translateX(-3px); }
.ci-icon {
    display: grid;
    place-items: center;
    width: 42px; height: 42px;
    border-radius: 13px;
    background: var(--grad-soft);
    border: 1px solid var(--line-brand);
    color: var(--brand-fg);
    flex-shrink: 0;
    transition: background var(--t), color var(--t);
}
.ci-icon .ico { width: 19px; height: 19px; }
.contact-item:hover .ci-icon { background: var(--grad-accent); color: var(--brand-ink); }
.ci-label {
    font-size: var(--fs-2xs);
    font-weight: var(--fw-bold);
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--txt-3);
    margin-bottom: 2px;
}
body.ar .ci-label { letter-spacing: 0; }
.ci-value { font-size: var(--fs-md); font-weight: var(--fw-medium); color: var(--txt-1); word-break: break-word; }
a.ci-value:hover { color: var(--brand-fg); }

.socials { display: flex; gap: 10px; margin-top: 28px; padding-top: 26px; border-top: 1px solid var(--line); }
.social {
    display: grid;
    place-items: center;
    width: 42px; height: 42px;
    border-radius: 12px;
    background: var(--fill-2);
    border: 1px solid var(--line);
    color: var(--txt-2);
    transition: transform var(--t), background var(--t), color var(--t), border-color var(--t);
}
.social .ico { width: 19px; height: 19px; }
.social:hover {
    transform: translateY(-3px);
    background: var(--grad-accent);
    border-color: transparent;
    color: var(--brand-ink);
}
.social.wa:hover { background: var(--wa); color: #04240F; }

/* form */
.contact-form { padding: 34px 30px; }
.contact-form > h3 { margin-bottom: 8px; }
.contact-form > p  { font-size: var(--fs-md); color: var(--txt-3); margin-bottom: 26px; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { margin-bottom: 18px; }
.field label {
    display: block;
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    letter-spacing: .04em;
    color: var(--txt-2);
    margin-bottom: 8px;
}
.field input,
.field select,
.field textarea {
    width: 100%;
    background: var(--fill-2);
    border: 1px solid var(--line-2);
    border-radius: var(--r-md);
    padding: 14px 16px;
    font-size: var(--fs-md);
    color: var(--txt-1);
    transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}
.field textarea { min-height: 130px; resize: vertical; line-height: 1.65; }
.field select {
    appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%236E8A9C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 6 5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-inline-end: 42px;
}
body.ar .field select { background-position: left 16px center; padding-inline-end: 16px; padding-inline-start: 42px; }
.field select option { background: var(--bg-2); color: var(--txt-1); }
.field ::placeholder { color: #4E6878; }
.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--line-brand); }
.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--brand-fg);
    background: rgba(29,222,200,.05);
    box-shadow: 0 0 0 3px rgba(29,222,200,.13);
}

/* honeypot — invisible to humans, irresistible to bots */
.hp {
    position: absolute !important;
    inset-inline-start: -9999px;
    width: 1px; height: 1px;
    opacity: 0;
    pointer-events: none;
}

.form-note {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-xs);
    color: var(--txt-3);
    margin-top: 14px;
    justify-content: center;
}
.form-note .ico { width: 14px; height: 14px; color: var(--brand-fg); }

.form-msg {
    display: none;
    align-items: flex-start;
    gap: 13px;
    padding: 18px 20px;
    border-radius: var(--r-md);
    font-size: var(--fs-md);
    line-height: 1.6;
    margin-top: 18px;
}
.form-msg.show { display: flex; }
.form-msg .ico { width: 21px; height: 21px; flex-shrink: 0; margin-top: 1px; }
.form-msg.ok  { background: var(--ok-bg);  border: 1px solid var(--ok-line);  color: var(--ok-ink); }
.form-msg.err { background: var(--err-bg); border: 1px solid var(--err-line); color: var(--err-ink); }

.spin { animation: spin 1s linear infinite; }

/* ---------- 16. CTA STRIP ---------- */
.cta-band {
    position: relative;
    overflow: hidden;
    border-radius: var(--r-xl);
    border: 1px solid var(--line-brand);
    background:
        radial-gradient(circle at 15% 20%, rgba(29,222,200,.2), transparent 55%),
        radial-gradient(circle at 85% 80%, rgba(0,200,255,.2), transparent 55%),
        linear-gradient(135deg, var(--fill-3), var(--fill-1));
    padding: clamp(38px, 5vw, 60px) clamp(26px, 4vw, 56px);
    text-align: center;
}
.cta-band h2 { margin-bottom: 14px; }
.cta-band .lead { margin-inline: auto; margin-bottom: 30px; }
.cta-btns { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* ---------- 17. FOOTER ---------- */
footer {
    position: relative;
    background: var(--bg-1);
    border-top: 1px solid var(--line);
    padding-top: clamp(54px, 6vw, 76px);
}
.footer-grid {
    display: grid;
    grid-template-columns: 1.8fr 1fr 1fr 1fr;
    gap: clamp(30px, 4vw, 52px);
    padding-bottom: 44px;
}
.footer-brand p {
    font-size: var(--fs-md);
    line-height: 1.75;
    color: var(--txt-3);
    margin: 18px 0 22px;
    max-width: 40ch;
}
.footer-col h5 {
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--txt-1);
    margin-bottom: 18px;
}
body.ar .footer-col h5 { letter-spacing: 0; }
.footer-col a {
    display: block;
    font-size: var(--fs-md);
    color: var(--txt-3);
    padding: 6px 0;
    transition: color var(--t-fast), padding-inline-start var(--t-fast);
}
.footer-col a:hover { color: var(--brand-fg); padding-inline-start: 6px; }

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    align-items: center;
    justify-content: space-between;
    padding-block: 24px;
    border-top: 1px solid var(--line);
    font-size: var(--fs-sm);
    color: var(--txt-3);
}
.footer-bottom .heart { color: var(--err); }

/* ---------- 18. FLOATING UI ---------- */
.fab {
    position: fixed;
    z-index: 900;
    display: grid;
    place-items: center;
    border-radius: 50%;
    transition: transform var(--t), opacity var(--t), visibility var(--t), box-shadow var(--t);
}
.fab .ico { width: 26px; height: 26px; }

.fab-wa {
    inset-inline-end: 24px;
    bottom: 24px;
    width: 56px; height: 56px;
    background: var(--wa);
    color: #fff;
    box-shadow: 0 10px 30px -8px rgba(37,211,102,.6);
}
.fab-wa::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--wa);
    animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse {
    0%   { transform: scale(1);   opacity: .8; }
    100% { transform: scale(1.7); opacity: 0; }
}
.fab-wa:hover { transform: scale(1.09); }

.fab-top {
    inset-inline-end: 24px;
    bottom: 92px;
    width: 46px; height: 46px;
    background: rgba(13,25,38,.9);
    border: 1px solid var(--line-2);
    color: var(--txt-1);
    backdrop-filter: blur(14px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
}
.fab-top .ico { width: 20px; height: 20px; }
.fab-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.fab-top:hover { border-color: var(--line-brand); color: var(--brand-fg); }

/* scroll progress bar */
#progress {
    position: fixed;
    top: 0;
    inset-inline-start: 0;
    z-index: 1001;
    height: 2px;
    width: 0;
    background: var(--grad-accent);
    box-shadow: 0 0 12px rgba(0,200,255,.7);
    transition: width .1s linear;
}

/* ---------- 19. PRELOADER ---------- */
#preloader {
    position: fixed;
    inset: 0;
    z-index: 10001;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 20px;
    background: var(--bg-0);
    transition: opacity .5s ease, visibility .5s ease;
}
#preloader.done { opacity: 0; visibility: hidden; }
#preloader img {
    width: 74px;
    animation: floaty 2.4s ease-in-out infinite;
    filter: drop-shadow(0 10px 34px rgba(0,200,255,.5));
}
.pre-name {
    font-size: 21px;
    font-weight: var(--fw-black);
    letter-spacing: .22em;
    color: var(--txt-1);
    text-transform: uppercase;
}
.pre-track {
    width: 150px;
    height: 3px;
    border-radius: 3px;
    background: rgba(150,196,214,.14);
    overflow: hidden;
}
.pre-fill {
    height: 100%;
    width: 40%;
    border-radius: 3px;
    background: var(--grad);
    animation: load 1.15s var(--e-out) infinite;
}
@keyframes load {
    0%   { transform: translateX(-110%); }
    100% { transform: translateX(300%); }
}

/* ---------- 20. SCROLL REVEAL ---------- */
.reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .75s var(--e-out), transform .75s var(--e-out);
}
.reveal.in { opacity: 1; transform: none; }
.d1 { transition-delay: .08s; }
.d2 { transition-delay: .16s; }
.d3 { transition-delay: .24s; }
.d4 { transition-delay: .32s; }

/* ---------- 21. RESPONSIVE ---------- */
@media (max-width: 1080px) {
    .hero-inner,
    .about-grid,
    .contact-grid { grid-template-columns: 1fr; }

    .hero-inner { gap: 56px; }
    .hero-visual { max-width: 520px; margin-inline: auto; width: 100%; }
    .mock, body.ar .mock { transform: none; }

    .about-visual { max-width: 440px; margin-inline: auto; width: 100%; }
    .about-grid { gap: 50px; }

    .footer-grid { grid-template-columns: 1fr 1fr; }
    .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
    .nav-desktop { display: none; }
    .burger { display: flex; }
    .nav-cta { display: none; }
    .stats-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
    :root { --header-h: 66px; }

    .form-row { grid-template-columns: 1fr; gap: 0; }
    .fb-1 { inset-inline-start: -2%; top: 26%; }
    .fb-2 { inset-inline-end: -2%; bottom: -8%; }
    .ac-1 { inset-inline-end: -2%; }
    .ac-2 { inset-inline-start: -2%; }
    .float-badge { padding: 10px 13px; }
    .float-badge .fb-icon { width: 32px; height: 32px; }

    .service, .contact-side, .contact-form, .testi { padding-inline: 22px; }
    .project-body { padding-inline: 22px; }

    .footer-grid { grid-template-columns: 1fr; gap: 34px; }
    .footer-bottom { justify-content: center; text-align: center; }

    .btn { width: 100%; }
    .hero-btns, .cta-btns { flex-direction: column; }

    .fab-wa { width: 52px; height: 52px; inset-inline-end: 16px; bottom: 16px; }
    .fab-top { inset-inline-end: 16px; bottom: 80px; }
}

@media (max-width: 400px) {
    .stats-grid { grid-template-columns: 1fr; }
    .float-badge { display: none; }
}

/* ---------- 22. ACCESSIBILITY / MOTION ---------- */
@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; }
}

/* ==========================================================================
   24. QUOTE WIZARD  (quote.html)
   ========================================================================== */
.wizard-page {
    padding-top: calc(var(--header-h) + clamp(40px, 6vw, 72px));
    padding-bottom: clamp(60px, 8vw, 100px);
    min-height: 100vh;
    position: relative;
    overflow: hidden;
}

.wizard {
    position: relative;
    z-index: 1;
    max-width: 880px;
    margin-inline: auto;
}

/* ---- progress rail ---- */
.steps {
    display: flex;
    align-items: center;
    margin-bottom: clamp(30px, 4vw, 46px);
}
.step-dot {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.step-num {
    display: grid;
    place-items: center;
    width: 36px; height: 36px;
    border-radius: 50%;
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    color: var(--txt-3);
    background: var(--fill-2);
    border: 1px solid var(--line-2);
    transition: background var(--t), color var(--t), border-color var(--t), box-shadow var(--t);
}
.step-num .ico { width: 17px; height: 17px; }
.step-label {
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    color: var(--txt-3);
    white-space: nowrap;
    transition: color var(--t);
}
.step-line {
    flex: 1;
    height: 2px;
    margin-inline: 12px;
    border-radius: 2px;
    background: var(--line-2);
    position: relative;
    overflow: hidden;
}
.step-line::after {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 0;
    background: var(--grad-accent);
    transition: width .45s var(--e-out);
}

.step-dot.active .step-num {
    background: var(--grad-accent);
    color: var(--brand-ink);
    border-color: transparent;
    box-shadow: var(--glow);
}
.step-dot.active .step-label { color: var(--txt-1); }
.step-dot.done .step-num {
    background: rgba(29,222,200,.14);
    border-color: var(--line-brand);
    color: var(--brand-fg);
}
.step-dot.done .step-label { color: var(--txt-2); }
.step-line.filled::after { width: 100%; }

/* ---- panels ---- */
.panel { display: none; }
.panel.current { display: block; animation: panelIn .45s var(--e-out); }
@keyframes panelIn {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

.panel-head { margin-bottom: 26px; }
.panel-head h2 {
    font-size: clamp(23px, 3vw, 31px);
    font-weight: var(--fw-black);
    letter-spacing: -.02em;
    color: var(--txt-1);
    margin-bottom: 8px;
}
body.ar .panel-head h2 { letter-spacing: 0; }
.panel-head p { font-size: var(--fs-md); color: var(--txt-3); }

.panel-body { padding: clamp(22px, 3vw, 32px); }

/* ---- selectable option grid (radio / checkbox as cards) ---- */
.opt-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px;
}
.opt-grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

.opt {
    position: relative;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 15px 16px;
    border-radius: var(--r-md);
    background: var(--fill-1);
    border: 1px solid var(--line-2);
    cursor: pointer;
    transition: border-color var(--t), background var(--t), transform var(--t-fast);
}
.opt:hover { border-color: var(--line-brand); background: rgba(29,222,200,.05); }
.opt:active { transform: scale(.99); }

/* the real input stays focusable but invisible */
.opt input {
    position: absolute;
    opacity: 0;
    width: 1px; height: 1px;
    margin: 0;
}
.opt input:focus-visible ~ .opt-mark {
    outline: 2px solid var(--brand-1);
    outline-offset: 2px;
}

.opt-mark {
    display: grid;
    place-items: center;
    width: 22px; height: 22px;
    flex-shrink: 0;
    border-radius: 6px;
    border: 1.5px solid var(--line-2);
    color: transparent;
    transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.opt-mark .ico { width: 14px; height: 14px; }
.opt input[type="radio"] ~ .opt-mark { border-radius: 50%; }

.opt-icon {
    display: grid;
    place-items: center;
    width: 42px; height: 42px;
    border-radius: 12px;
    background: var(--grad-soft);
    border: 1px solid var(--line-brand);
    color: var(--brand-fg);
    flex-shrink: 0;
    transition: background var(--t), color var(--t);
}
.opt-icon .ico { width: 20px; height: 20px; }

.opt-text { min-width: 0; }
.opt-title {
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    color: var(--txt-1);
    line-height: 1.35;
}
.opt-sub {
    font-size: var(--fs-xs);
    color: var(--txt-3);
    line-height: 1.4;
    margin-top: 2px;
}

/* selected state */
.opt:has(input:checked) {
    border-color: var(--brand-fg);
    background: rgba(29,222,200,.08);
}
.opt:has(input:checked) .opt-mark {
    background: var(--grad-accent);
    border-color: transparent;
    color: var(--brand-ink);
}
.opt:has(input:checked) .opt-icon {
    background: var(--grad-accent);
    color: var(--brand-ink);
}

/* fallback for engines without :has() — JS mirrors the state onto the label */
.opt.is-checked {
    border-color: var(--brand-fg);
    background: rgba(29,222,200,.08);
}
.opt.is-checked .opt-mark {
    background: var(--grad-accent);
    border-color: transparent;
    color: var(--brand-ink);
}
.opt.is-checked .opt-icon { background: var(--grad-accent); color: var(--brand-ink); }

/* ---- field groups inside the wizard ---- */
.wz-group { margin-bottom: 28px; }
.wz-group:last-child { margin-bottom: 0; }
.wz-label {
    display: block;
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    color: var(--txt-1);
    margin-bottom: 4px;
}
.wz-hint {
    font-size: var(--fs-xs);
    color: var(--txt-3);
    margin-bottom: 13px;
}

/* ---- footer nav ---- */
.wz-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 28px;
}
.wz-nav .spacer { flex: 1; }

/* mirrored arrow for the Back button (and again under RTL) */
.ico-flip { transform: scaleX(-1); }
body.ar .ico-flip { transform: none; }
.wz-count {
    font-size: var(--fs-xs);
    color: var(--txt-3);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ---- review summary ---- */
.review { display: flex; flex-direction: column; gap: 2px; }
.review-row {
    display: grid;
    grid-template-columns: 190px 1fr;
    gap: 16px;
    padding: 13px 4px;
    border-bottom: 1px solid var(--line);
}
.review-row:last-child { border-bottom: 0; }
.review-key {
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--txt-3);
}
body.ar .review-key { letter-spacing: 0; }
.review-val { font-size: var(--fs-md); color: var(--txt-1); line-height: 1.65; }
.review-val .chips { display: flex; flex-wrap: wrap; gap: 7px; }
.review-val .chip {
    font-size: var(--fs-xs);
    color: var(--brand-fg);
    background: rgba(29,222,200,.09);
    border: 1px solid rgba(29,222,200,.22);
    padding: 4px 11px;
    border-radius: var(--r-pill);
}
/* Wanted, but outside the tier on screen — flagged before sending, not after. */
.review-val .chip.off {
    color: var(--warn-ink);
    background: var(--warn-bg);
    border-color: var(--warn-line);
}
.review-val .muted { color: var(--txt-3); }

/* ---- inline error ---- */
.wz-error {
    display: none;
    align-items: center;
    gap: 9px;
    margin-top: 16px;
    padding: 12px 15px;
    border-radius: var(--r-sm);
    background: var(--err-bg);
    border: 1px solid var(--err-line);
    color: var(--err-ink);
    font-size: var(--fs-sm);
}
.wz-error.show { display: flex; }
.wz-error .ico { width: 17px; height: 17px; flex-shrink: 0; }

.field.invalid input,
.field.invalid textarea,
.field.invalid select { border-color: var(--err); }

/* ---- success screen ---- */
.done-screen {
    display: none;
    text-align: center;
    padding: clamp(40px, 6vw, 64px) clamp(22px, 4vw, 40px);
}
.done-screen.show { display: block; animation: panelIn .5s var(--e-out); }
.done-badge {
    display: grid;
    place-items: center;
    width: 78px; height: 78px;
    margin: 0 auto 24px;
    border-radius: 50%;
    background: var(--grad-accent);
    color: var(--brand-ink);
    box-shadow: var(--glow-lg);
}
.done-badge .ico { width: 38px; height: 38px; }
.done-screen h2 {
    font-size: clamp(24px, 3.4vw, 34px);
    font-weight: var(--fw-black);
    letter-spacing: -.02em;
    color: var(--txt-1);
    margin-bottom: 12px;
}
body.ar .done-screen h2 { letter-spacing: 0; }
.done-screen p {
    font-size: var(--fs-xl);
    color: var(--txt-2);
    max-width: 46ch;
    margin: 0 auto 14px;
    line-height: 1.75;
}
.done-ref {
    display: inline-block;
    font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
    font-size: var(--fs-sm);
    color: var(--brand-fg);
    background: rgba(29,222,200,.08);
    border: 1px solid var(--line-brand);
    padding: 8px 18px;
    border-radius: var(--r-pill);
    margin-bottom: 28px;
}
.done-actions { display: flex; flex-wrap: wrap; gap: 13px; justify-content: center; }

/* ---- saved-draft notice ---- */
.draft-note {
    display: none;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    padding: 12px 16px;
    border-radius: var(--r-sm);
    background: rgba(29,222,200,.06);
    border: 1px solid var(--line-brand);
    font-size: var(--fs-sm);
    color: var(--txt-2);
}
.draft-note.show { display: flex; }
.draft-note .ico { width: 16px; height: 16px; color: var(--brand-fg); flex-shrink: 0; }
.draft-note button {
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    color: var(--brand-fg);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.draft-note button.ghost { color: var(--txt-3); }

@media (max-width: 760px) {
    /* keep only the active step's label visible on narrow screens */
    .step-dot .step-label { display: none; }
    .step-dot.active .step-label { display: block; }
    .step-line { margin-inline: 8px; }
    .review-row { grid-template-columns: 1fr; gap: 5px; }
    .wz-nav { flex-wrap: wrap; }
    .wz-nav .btn { width: 100%; }
    .wz-count { width: 100%; text-align: center; order: -1; }
}

/* ==========================================================================
   25. AUTH PAGES  (admin/login.php, setup-admin.php)
   ========================================================================== */
.auth-page {
    position: relative;
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: clamp(24px, 5vw, 56px) var(--gutter);
    overflow: hidden;
}

.auth-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 430px;
    padding: clamp(28px, 4vw, 40px);
}

.auth-head {
    text-align: center;
    margin-bottom: 28px;
}
.auth-head img {
    margin: 0 auto 16px;
    filter: drop-shadow(0 10px 30px rgba(0,200,255,.45));
}
.auth-head h1 {
    font-size: 24px;
    font-weight: var(--fw-black);
    letter-spacing: -.02em;
    color: var(--txt-1);
    margin-bottom: 8px;
}
.auth-head p {
    font-size: var(--fs-md);
    color: var(--txt-3);
    line-height: 1.6;
}

.auth-card .form-msg { margin-top: 0; margin-bottom: 22px; }
.auth-card .form-msg strong { color: inherit; font-weight: var(--fw-bold); }
.auth-card .btn { margin-top: 8px; }

.auth-foot {
    text-align: center;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
    font-size: var(--fs-sm);
}
.auth-foot a { color: var(--txt-3); transition: color var(--t-fast); }
.auth-foot a:hover { color: var(--brand-fg); }

code {
    font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
    font-size: .92em;
    color: var(--brand-fg);
    background: rgba(29,222,200,.09);
    border: 1px solid rgba(29,222,200,.2);
    padding: 2px 6px;
    border-radius: 5px;
}

/* ==========================================================================
   26. ADMIN PANEL
   ========================================================================== */
.admin-body { background: var(--bg-0); }

.admin-top {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: clamp(16px, 3vw, 34px);
    padding: 12px clamp(16px, 3vw, 28px);
    background: rgba(8,17,26,.92);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--line);
}
.admin-top .brand-name { font-size: 18px; }
.admin-tag {
    font-size: var(--fs-2xs);
    font-weight: var(--fw-bold);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--brand-fg);
    background: rgba(29,222,200,.1);
    border: 1px solid rgba(29,222,200,.24);
    padding: 3px 8px;
    border-radius: var(--r-pill);
    margin-inline-start: 2px;
}

.admin-nav {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1;
    overflow-x: auto;
    scrollbar-width: none;
}
.admin-nav::-webkit-scrollbar { display: none; }
.admin-nav a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--txt-3);
    padding: 9px 14px;
    border-radius: var(--r-sm);
    white-space: nowrap;
    transition: color var(--t-fast), background var(--t-fast);
}
.admin-nav a .ico { width: 17px; height: 17px; }
.admin-nav a:hover { color: var(--txt-1); background: var(--fill-2); }
.admin-nav a.current { color: var(--brand-fg); background: rgba(29,222,200,.09); }

.admin-user { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.admin-who { font-size: var(--fs-sm); color: var(--txt-2); white-space: nowrap; }
.admin-out {
    display: grid;
    place-items: center;
    width: 36px; height: 36px;
    border-radius: var(--r-sm);
    border: 1px solid var(--line);
    color: var(--txt-3);
    transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.admin-out .ico { width: 17px; height: 17px; }
.admin-out:hover { color: var(--err-ink); border-color: var(--err-line-hi); background: var(--err-bg); }

.admin-main { padding: clamp(22px, 3.5vw, 40px) clamp(16px, 3vw, 28px); }
.admin-wrap { max-width: 1240px; margin-inline: auto; }

.admin-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 28px;
}
.admin-head h1 {
    font-size: clamp(22px, 3vw, 29px);
    font-weight: var(--fw-black);
    letter-spacing: -.02em;
    color: var(--txt-1);
    margin-bottom: 5px;
}
.admin-head p { font-size: var(--fs-sm); color: var(--txt-3); }

/* ---- stat tiles ---- */
.tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 16px;
    margin-bottom: 26px;
}
.tile {
    display: block;
    padding: 22px 24px;
}
.tile-num {
    display: block;
    font-size: 34px;
    font-weight: var(--fw-black);
    letter-spacing: -.03em;
    line-height: 1;
    margin-bottom: 8px;
    background: var(--grad-accent);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-variant-numeric: tabular-nums;
}
.tile-label { display: block; font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--txt-1); }
.tile-sub   { display: block; font-size: var(--fs-xs); color: var(--txt-3); margin-top: 3px; }

/* ---- content blocks ---- */
.panel-block { padding: clamp(20px, 3vw, 28px); margin-bottom: 22px; }
.panel-block h2 {
    font-size: var(--fs-2xl);
    font-weight: var(--fw-bold);
    color: var(--txt-1);
    margin-bottom: 6px;
}
.muted-note { font-size: var(--fs-sm); color: var(--txt-3); margin-bottom: 18px; line-height: 1.65; }

.mini-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px;
}
.mini-stats > div {
    background: var(--fill-2);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 16px 18px;
}
.mini-stats b {
    display: block;
    font-size: 24px;
    font-weight: var(--fw-black);
    color: var(--brand-fg);
    letter-spacing: -.02em;
    line-height: 1.1;
}
.mini-stats span { font-size: var(--fs-xs); color: var(--txt-3); }

/* ---- tables ---- */
.table-wrap { overflow-x: auto; margin-inline: -4px; }
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-sm);
    min-width: 640px;
}
.data-table th {
    text-align: start;
    font-size: var(--fs-2xs);
    font-weight: var(--fw-bold);
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--txt-3);
    padding: 10px 12px;
    border-bottom: 1px solid var(--line-2);
    white-space: nowrap;
}
.data-table td {
    padding: 13px 12px;
    border-bottom: 1px solid var(--line);
    color: var(--txt-2);
    vertical-align: middle;
}
.data-table tbody tr { transition: background var(--t-fast); }
.data-table tbody tr:hover { background: var(--fill-1); }
.data-table tbody tr:last-child td { border-bottom: 0; }

.pill {
    display: inline-block;
    font-size: var(--fs-2xs);
    font-weight: var(--fw-bold);
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: var(--r-pill);
    border: 1px solid transparent;
}
.pill-new    { color: var(--brand-fg); background: rgba(29,222,200,.1);  border-color: rgba(29,222,200,.26); }
.pill-seen   { color: var(--txt-2);   background: rgba(150,196,214,.08); border-color: var(--line-2); }
.pill-quoted { color: var(--info-ink);        background: var(--info-bg);  border-color: var(--info-line); }
.pill-won    { color: var(--ok-ink);        background: var(--ok-bg);  border-color: var(--ok-line); }
.pill-lost   { color: var(--err-ink);        background: var(--err-bg); border-color: var(--err-line); }

.admin-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    max-width: 1240px;
    margin-inline: auto;
    padding: 22px clamp(16px, 3vw, 28px) 34px;
    border-top: 1px solid var(--line);
    font-size: var(--fs-xs);
    color: var(--txt-3);
}
.admin-foot a { color: var(--txt-3); transition: color var(--t-fast); }
.admin-foot a:hover { color: var(--brand-fg); }

@media (max-width: 760px) {
    .admin-nav a span { display: none; }
    .admin-nav a { padding: 9px 11px; }
    .admin-who { display: none; }
    .admin-head .btn { width: 100%; }
}

/* ==========================================================================
   27. ADMIN — filters, tables, forms
   ========================================================================== */

/* ---- filter bar ---- */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    padding: 16px 18px;
    margin-bottom: 20px;
}
.filter-search {
    position: relative;
    flex: 1;
    min-width: 220px;
}
.filter-search .ico {
    position: absolute;
    inset-inline-start: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 17px; height: 17px;
    color: var(--txt-3);
    pointer-events: none;
}
.filter-search input {
    width: 100%;
    background: var(--fill-2);
    border: 1px solid var(--line-2);
    border-radius: var(--r-sm);
    padding: 11px 14px 11px 42px;
    font-size: var(--fs-md);
    color: var(--txt-1);
    transition: border-color var(--t-fast), background var(--t-fast);
}
body.ar .filter-search input { padding: 11px 42px 11px 14px; }
.filter-search input:focus {
    outline: none;
    border-color: var(--brand-fg);
    background: rgba(29,222,200,.05);
}
.filter-bar select {
    background: var(--fill-2);
    border: 1px solid var(--line-2);
    border-radius: var(--r-sm);
    padding: 11px 14px;
    font-size: var(--fs-md);
    color: var(--txt-1);
    cursor: pointer;
}
.filter-bar select option { background: var(--bg-2); }
.filter-bar .btn { padding: 11px 22px; }

/* ---- table extras ---- */
.table-card { padding: 6px 10px; }
.ta-end { text-align: end; }
.nowrap { white-space: nowrap; }

.row-muted td { opacity: .45; }

/* A request nobody has opened yet. Marked on the leading edge rather than by
   tinting the whole row: the eye finds the untouched ones without the table
   turning into a colour chart. */
.row-fresh td { background: rgba(29,222,200,.035); }
.row-fresh td:first-child { box-shadow: inset 2px 0 0 var(--brand-1); }
body.ar .row-fresh td:first-child { box-shadow: inset -2px 0 0 var(--brand-1); }

/* ---- editable table (the feature list) ----
   Inputs sit flush in the cells: the row IS the form, and a page of boxed
   fields inside a table reads as clutter rather than as a list. */
.ta-center { text-align: center; }

.feature-table input[type="text"],
.feature-table input[type="number"] {
    width: 100%;
    padding: 8px 11px;
    font-size: var(--fs-sm);
    border-radius: var(--r-sm);
    background: var(--fill-2);
    border: 1px solid transparent;
    color: var(--txt-1);
    transition: border-color var(--t-fast), background var(--t-fast);
}
.feature-table input[type="text"]:hover,
.feature-table input[type="number"]:hover { border-color: var(--line-2); }
.feature-table input[type="text"]:focus,
.feature-table input[type="number"]:focus {
    outline: none;
    border-color: var(--brand-fg);
    background: var(--fill-3);
}
.feature-table input[type="number"] { text-align: center; font-variant-numeric: tabular-nums; }
.feature-table td { vertical-align: middle; }

/* One column per tier. Tinted as a block so the eye reads down a package
   rather than across a row — "what is in Standard" is the question being
   answered here, and a plain grid of ticks makes that surprisingly hard. */
.feature-table .pkg-col {
    width: 110px;
    background: var(--fill-1);
    border-inline: 1px solid var(--line);
}
.feature-table th.pkg-col { padding-top: 12px; padding-bottom: 12px; }
.feature-table th.pkg-col a { color: var(--txt-1); font-weight: var(--fw-bold); }
.feature-table th.pkg-col a:hover { color: var(--brand-fg); }
.feature-table th.pkg-col .cell-sub {
    padding-inline-start: 0;
    text-transform: none;
    letter-spacing: 0;
    font-weight: var(--fw-medium);
}
.feature-table .cell-sub { margin-top: 4px; padding-inline-start: 11px; }
.row-check { width: 18px; height: 18px; accent-color: #1DDEC8; }

/* ---- status tabs ---- */
.tab-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
}
.tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 15px;
    border-radius: var(--r-pill);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--txt-3);
    background: var(--fill-1);
    border: 1px solid var(--line);
    transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.tab:hover { color: var(--txt-1); border-color: var(--line-brand); }
.tab.current {
    color: var(--brand-ink);
    background: var(--grad-accent);
    border-color: transparent;
}
.tab-n {
    font-size: var(--fs-2xs);
    font-weight: var(--fw-bold);
    padding: 1px 7px;
    border-radius: var(--r-pill);
    background: var(--fill-4);
    font-variant-numeric: tabular-nums;
}
.tab.current .tab-n { background: rgba(0,0,0,.18); }

/* ---- key / value blocks ---- */
.kv { display: grid; grid-template-columns: auto 1fr; gap: 9px 18px; align-items: baseline; }
.kv dt {
    font-size: var(--fs-2xs);
    font-weight: var(--fw-bold);
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--txt-3);
    white-space: nowrap;
}
.kv dd { font-size: var(--fs-md); color: var(--txt-1); line-height: 1.5; }
.kv dd a { color: var(--brand-fg); }

.plain-list { display: flex; flex-direction: column; gap: 8px; }
.plain-list li { font-size: var(--fs-md); color: var(--txt-1); line-height: 1.55; }

/* Customer-written text. Wrapping rules matter here: a pasted URL with no
   spaces would otherwise stretch the card and push the page sideways. */
.long-text {
    font-size: var(--fs-md);
    line-height: 1.7;
    color: var(--txt-1);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* ---- message cards ---- */
.msg-list { display: flex; flex-direction: column; gap: 14px; }
.msg { padding: 20px 22px; }
.msg.is-new { border-color: rgba(29,222,200,.28); }
.msg-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.msg-who { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--txt-1); margin-inline-end: 8px; }
.msg-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    font-size: var(--fs-xs);
    color: var(--txt-3);
    text-align: end;
}
.msg-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}
.msg-actions .btn { padding: 8px 16px; font-size: var(--fs-xs); }

/* Kept apart from the save button, and after it, so "delete" is never the
   thing under a finger reaching for "save". */
.danger-zone {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}
.btn.danger { color: var(--err-ink); }
.btn.danger:hover { color: var(--err-ink); border-color: var(--err-line-hi); background: var(--err-bg); }

.cell-thumb { width: 56px; }
.cell-thumb img {
    width: 44px; height: 44px;
    object-fit: cover;
    border-radius: 9px;
    border: 1px solid var(--line);
    background: var(--bg-2);
}
.thumb-blank {
    display: grid;
    place-items: center;
    width: 44px; height: 44px;
    border-radius: 9px;
    border: 1px dashed var(--line-2);
    color: var(--txt-3);
}
.thumb-blank .ico { width: 20px; height: 20px; }

.cell-title {
    font-weight: var(--fw-bold);
    color: var(--txt-1);
    transition: color var(--t-fast);
}
.cell-title:hover { color: var(--brand-fg); }
.cell-sub { font-size: var(--fs-xs); color: var(--txt-3); margin-top: 2px; }

.inline-form { display: inline-block; }

.icon-btn {
    display: inline-grid;
    place-items: center;
    width: 34px; height: 34px;
    border-radius: var(--r-sm);
    border: 1px solid var(--line);
    color: var(--txt-2);
    vertical-align: middle;
    margin-inline-start: 4px;
    transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.icon-btn .ico { width: 16px; height: 16px; }
.icon-btn:hover { color: var(--brand-fg); border-color: var(--line-brand); background: rgba(29,222,200,.07); }
.icon-btn.danger:hover { color: var(--err-ink); border-color: var(--err-line-hi); background: var(--err-bg); }

/* ---- on/off switch ---- */
.switch {
    position: relative;
    width: 40px; height: 22px;
    border-radius: var(--r-pill);
    background: rgba(150,196,214,.16);
    border: 1px solid var(--line-2);
    transition: background var(--t-fast), border-color var(--t-fast);
}
.switch span {
    position: absolute;
    top: 2px;
    inset-inline-start: 2px;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--txt-3);
    transition: transform var(--t-fast), background var(--t-fast);
}
.switch.on { background: rgba(29,222,200,.2); border-color: var(--line-brand); }
.switch.on span { background: var(--brand-1); transform: translateX(18px); }
body.ar .switch.on span { transform: translateX(-18px); }

/* ---- pager ---- */
.pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 22px;
}
.pager-info { font-size: var(--fs-sm); color: var(--txt-3); }

/* ---- empty state ---- */
.empty-state {
    text-align: center;
    padding: clamp(40px, 6vw, 64px) clamp(22px, 4vw, 40px);
}
.empty-state h2 {
    font-size: 19px;
    font-weight: var(--fw-bold);
    color: var(--txt-1);
    margin-bottom: 10px;
}
.empty-state p {
    font-size: var(--fs-md);
    color: var(--txt-3);
    max-width: 46ch;
    margin: 0 auto 22px;
    line-height: 1.7;
}

/* ---- edit form ---- */
.edit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 20px;
    align-items: start;
}
.edit-grid .panel-block { margin-bottom: 0; }

.field-hint {
    font-size: var(--fs-xs);
    color: var(--txt-3);
    margin: -8px 0 18px;
    line-height: 1.55;
}

.opt-tag {
    font-size: var(--fs-2xs);
    font-weight: var(--fw-bold);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--txt-3);
    background: rgba(150,196,214,.1);
    padding: 2px 7px;
    border-radius: var(--r-pill);
    margin-inline-start: 6px;
}

/* Module tick boxes — a dense two-column list, because a tier can open ten. */
.mod-set {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 8px;
    margin-bottom: 4px;
}
.mod-set .check-row strong { font-size: var(--fs-sm); font-weight: var(--fw-medium); }

.check-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 16px;
    margin-bottom: 18px;
    border-radius: var(--r-md);
    background: var(--fill-1);
    border: 1px solid var(--line);
    cursor: pointer;
    transition: border-color var(--t-fast), background var(--t-fast);
}
.check-row:hover { border-color: var(--line-brand); }
.check-row.compact { padding: 10px 13px; margin-bottom: 0; }
.check-row input { margin-top: 3px; width: 17px; height: 17px; accent-color: #1DDEC8; flex-shrink: 0; }
.check-row strong { display: block; font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--txt-1); }
.check-row em {
    display: block;
    font-style: normal;
    font-size: var(--fs-xs);
    color: var(--txt-3);
    line-height: 1.6;
    margin-top: 4px;
}

#price-wrap { transition: opacity var(--t); }
#price-wrap.is-dimmed { opacity: .5; }

.current-image,
.current-image-preview {
    margin-bottom: 16px;
}
.current-image img,
.current-image-preview {
    display: block;
    width: 100%;
    max-width: 200px;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--r-md);
    border: 1px solid var(--line-2);
    background: var(--bg-2);
    margin-bottom: 10px;
}

.field input[type="file"] {
    width: 100%;
    background: var(--fill-2);
    border: 1px dashed var(--line-2);
    border-radius: var(--r-md);
    padding: 13px 15px;
    font-size: var(--fs-sm);
    color: var(--txt-2);
    cursor: pointer;
}
.field input[type="file"]:hover { border-color: var(--line-brand); }
.field input[type="number"] { max-width: 160px; }

.form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 13px;
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
}

@media (max-width: 620px) {
    .filter-bar { flex-direction: column; align-items: stretch; }
    .filter-bar .btn { width: 100%; }
    .form-actions .btn { width: 100%; }
    .pager { flex-direction: column; }
}

/* ==========================================================================
   28. HARDWARE CONFIGURATOR  (quote wizard, step 3)
   ========================================================================== */

.cfg-note {
    padding: 16px 18px;
    border-radius: var(--r-md);
    font-size: var(--fs-md);
    line-height: 1.7;
}
.cfg-note.muted { background: var(--fill-1); border: 1px solid var(--line); color: var(--txt-3); }
.cfg-note.warn  { background: var(--warn-bg); border: 1px solid var(--warn-line); color: var(--warn-ink); }

/* ==========================================================================
   SIZING QUESTIONS — for work that is quoted by its size
   ========================================================================== */
.scope-q { margin-bottom: 20px; }
.scope-q:last-child { margin-bottom: 0; }
.scope-q-t {
    display: block;
    font-size: var(--fs-md);
    font-weight: var(--fw-medium);
    color: var(--txt-1);
    margin-bottom: 10px;
    line-height: 1.5;
}

/* Two or three short answers per row — these are quick choices, not the main
   checklist, so they should not take a full-width card each. */
.opt-grid-tight {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
}
.opt-grid-tight .opt { padding: 11px 13px; }
.opt-grid-tight .opt-title { font-size: var(--fs-sm); }

#scope-body .field { margin-bottom: 20px; }
#scope-body .field:last-child { margin-bottom: 0; }
#scope-body .field-hint { margin: 6px 0 0; }
#scope-body input[type="number"] { max-width: 220px; }

/* ==========================================================================
   SOFTWARE PACKAGES — pick one, never counted
   ========================================================================== */
.pkg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}

.pkg-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 22px 20px 18px;
    border-radius: var(--r-lg);
    background: var(--fill-2);
    border: 1px solid var(--line-2);
    cursor: pointer;
    transition: border-color var(--t), background var(--t), transform var(--t-fast);
}
.pkg-card:hover { border-color: var(--line-brand); transform: translateY(-3px); }
.pkg-card:active { transform: translateY(-1px); }
.pkg-card.chosen {
    border-color: var(--brand-fg);
    background: rgba(29,222,200,.09);
    box-shadow: 0 0 0 1px var(--brand-1) inset, var(--glow);
}

.pkg-head { margin-bottom: 14px; }
.pkg-name {
    font-size: var(--fs-2xl);
    font-weight: var(--fw-black);
    color: var(--txt-1);
    letter-spacing: -.015em;
}
body.ar .pkg-name { letter-spacing: 0; }
.pkg-sub { font-size: var(--fs-xs); color: var(--txt-3); margin-top: 3px; line-height: 1.5; }

.pkg-price {
    display: flex;
    align-items: baseline;
    gap: 7px;
    flex-wrap: wrap;
    padding-bottom: 16px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--line);
}
.pkg-amount {
    font-size: 29px;
    font-weight: var(--fw-black);
    letter-spacing: -.03em;
    line-height: 1;
    background: var(--grad-accent);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-variant-numeric: tabular-nums;
}
.pkg-once { font-size: var(--fs-xs); color: var(--txt-3); }

/* ---- the badge on the tier that fits what was ticked ---- */
.pkg-card.is-fit { border-color: var(--line-brand); }
.pkg-badge {
    position: absolute;
    top: -9px;
    inset-inline-end: 14px;
    font-size: var(--fs-2xs);
    font-weight: var(--fw-black);
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: var(--r-pill);
    background: var(--grad-accent);
    color: var(--brand-ink);
    white-space: nowrap;
}
body.ar .pkg-badge { letter-spacing: 0; text-transform: none; font-size: var(--fs-2xs); }

/* ---- what the program itself does in this tier ----
   Every card lists the same rows in the same order, so three cards side by
   side read as one comparison table. A row that is off keeps its place: an
   absent line tells the customer nothing, a struck-through one tells them
   exactly what the next tier up is for. */
.pkg-mods {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 16px;
}
.pkg-mod {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: var(--fs-sm);
    line-height: 1.45;
}
.pkg-mod .ico {
    width: 14px; height: 14px;
    flex-shrink: 0;
    margin-top: 3px;
}
.pkg-mod.on  { color: var(--txt-2); }
.pkg-mod.on  .ico { color: var(--brand-fg); }
.pkg-mod.off { color: var(--txt-3); opacity: .62; }
.pkg-mod.off .ico { color: var(--txt-3); }

/* A row the customer actually asked for carries weight — included or not. */
.pkg-mod.on.wanted  { color: var(--txt-1); font-weight: var(--fw-bold); }
.pkg-mod.off.wanted { color: var(--warn-ink); opacity: 1; }
.pkg-mod.off.wanted .ico { color: var(--warn-ink); }

.pkg-svc {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}
.pkg-svc-h {
    font-size: var(--fs-2xs);
    font-weight: var(--fw-black);
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--txt-3);
    margin-bottom: 10px;
}
body.ar .pkg-svc-h { letter-spacing: 0; text-transform: none; font-size: var(--fs-xs); }

.pkg-warn {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 12px 14px;
    margin-bottom: 16px;
    border-radius: var(--r-md);
    background: var(--warn-bg);
    border: 1px solid var(--warn-line);
}
.pkg-warn-t { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--warn-ink); line-height: 1.5; }
.pkg-warn-s { font-size: var(--fs-xs); color: var(--txt-3); line-height: 1.5; }

/* The same warning, said once more where the eye already is: on the tick. */
.opt.not-in-pkg { border-color: var(--warn-line); }
.opt.not-in-pkg .opt-title { color: var(--warn-ink); }

.pkg-includes {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-bottom: 18px;
    flex: 1;
}
.pkg-includes li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: var(--fs-sm);
    line-height: 1.5;
    color: var(--txt-2);
}
.pkg-includes .ico {
    width: 14px; height: 14px;
    color: var(--brand-fg);
    flex-shrink: 0;
    margin-top: 3px;
}

.pkg-pick {
    display: block;
    text-align: center;
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    padding: 10px 16px;
    border-radius: var(--r-pill);
    color: var(--txt-2);
    background: var(--fill-3);
    border: 1px solid var(--line-2);
    transition: background var(--t), color var(--t), border-color var(--t);
}
.pkg-card:hover .pkg-pick { border-color: var(--line-brand); color: var(--txt-1); }
.pkg-card.chosen .pkg-pick {
    background: var(--grad-accent);
    border-color: transparent;
    color: var(--brand-ink);
}

.pkg-renewal { margin-top: 4px; }

@media (max-width: 520px) {
    .pkg-grid { grid-template-columns: 1fr; }
    .pkg-card { padding: 18px 16px 15px; }
    .pkg-amount { font-size: 25px; }
}

/* ---- ready-made kits ---- */
.cfg-kits { margin-bottom: 22px; }
.cfg-kits-title {
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--txt-3);
    margin-bottom: 11px;
}
body.ar .cfg-kits-title { letter-spacing: 0; }
.cfg-kit-row { display: flex; flex-wrap: wrap; gap: 10px; }
.cfg-kit {
    flex: 1 1 180px;
    text-align: start;
    padding: 13px 16px;
    border-radius: var(--r-md);
    background: rgba(29,222,200,.05);
    border: 1px solid var(--line-brand);
    transition: background var(--t-fast), transform var(--t-fast);
}
.cfg-kit:hover { background: rgba(29,222,200,.11); transform: translateY(-2px); }
.cfg-kit:active { transform: translateY(0) scale(.99); }

.cfg-kit-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.cfg-kit-name { font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--txt-1); }
.cfg-kit-desc { display: block; font-size: var(--fs-xs); color: var(--txt-3); margin-top: 3px; line-height: 1.5; }

/* Applied kits say so, and clicking again does nothing — no silent doubling */
.cfg-kit.applied {
    background: rgba(29,222,200,.14);
    border-color: var(--brand-fg);
}
.cfg-kit-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    font-size: var(--fs-2xs);
    font-weight: var(--fw-bold);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--brand-ink);
    background: var(--grad-accent);
    padding: 3px 9px 3px 6px;
    border-radius: var(--r-pill);
}
body.ar .cfg-kit-badge { letter-spacing: 0; }
.cfg-kit-badge .ico { width: 12px; height: 12px; }

/* ---- sticky basket summary ---- */
.cfg-sticky {
    position: fixed;
    z-index: 950;
    inset-inline: max(16px, calc((100vw - 720px) / 2));
    bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 13px 16px 13px 20px;
    border-radius: var(--r-pill);
    background: rgba(13,25,38,.95);
    border: 1px solid var(--line-brand);
    backdrop-filter: blur(18px) saturate(160%);
    box-shadow: var(--sh-lg), 0 0 44px -18px rgba(0,200,255,.5);
    opacity: 0;
    visibility: hidden;
    transform: translateY(90px);
    transition: opacity var(--t), transform var(--t), visibility var(--t);
}
.cfg-sticky.show { opacity: 1; visibility: visible; transform: translateY(0); }

.cfg-sticky-info {
    font-size: var(--fs-md);
    color: var(--txt-2);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cfg-sticky-info b {
    color: var(--brand-fg);
    font-weight: var(--fw-black);
    font-variant-numeric: tabular-nums;
}
.cfg-sticky-btn {
    flex-shrink: 0;
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    color: var(--brand-ink);
    background: var(--grad-accent);
    padding: 8px 18px;
    border-radius: var(--r-pill);
    transition: transform var(--t-fast);
}
.cfg-sticky-btn:hover { transform: translateY(-1px); }

/* A brief pulse so a change registers even when the basket is off-screen */
.cfg-sticky.pulse { animation: stickyPulse .5s var(--e-out); }
@keyframes stickyPulse {
    0%   { transform: translateY(0) scale(1); }
    35%  { transform: translateY(0) scale(1.035); box-shadow: var(--sh-lg), 0 0 60px -10px rgba(29,222,200,.75); }
    100% { transform: translateY(0) scale(1); }
}

/* ---- search + category tabs ---- */
.cfg-tools { margin-bottom: 16px; }
.cfg-search {
    width: 100%;
    background: var(--fill-2);
    border: 1px solid var(--line-2);
    border-radius: var(--r-md);
    padding: 12px 16px;
    font-size: var(--fs-md);
    color: var(--txt-1);
    margin-bottom: 12px;
    transition: border-color var(--t-fast), background var(--t-fast);
}
.cfg-search:focus {
    outline: none;
    border-color: var(--brand-fg);
    background: rgba(29,222,200,.05);
}
.cfg-tabs {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
}
.cfg-tab {
    flex-shrink: 0;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--txt-3);
    background: var(--fill-2);
    border: 1px solid var(--line);
    padding: 8px 15px;
    border-radius: var(--r-pill);
    white-space: nowrap;
    transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast);
}
.cfg-tab:hover { color: var(--txt-1); border-color: var(--line-2); }
.cfg-tab.on {
    background: var(--grad-accent);
    border-color: transparent;
    color: var(--brand-ink);
}

/* ---- product grid ---- */
.cfg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}
.cfg-card {
    display: flex;
    flex-direction: column;
    background: var(--fill-2);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    overflow: hidden;
    transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}
.cfg-card:hover { border-color: var(--line-2); transform: translateY(-2px); }
.cfg-card.picked {
    border-color: var(--brand-fg);
    background: rgba(29,222,200,.07);
}

.cfg-img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: var(--bg-2);
    border-bottom: 1px solid var(--line);
}
.cfg-img-blank {
    background:
        repeating-linear-gradient(45deg, rgba(150,196,214,.05) 0 8px, transparent 8px 16px),
        var(--bg-2);
}

.cfg-info { padding: 13px 15px 15px; display: flex; flex-direction: column; flex: 1; }
.cfg-name {
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    color: var(--txt-1);
    line-height: 1.35;
    margin-bottom: 4px;
}
.cfg-specs {
    font-size: var(--fs-xs);
    color: var(--txt-3);
    line-height: 1.5;
    margin-bottom: 8px;
}
.cfg-stock {
    align-self: flex-start;
    font-size: var(--fs-2xs);
    font-weight: var(--fw-bold);
    padding: 3px 9px;
    border-radius: var(--r-pill);
    margin-bottom: 8px;
}
.cfg-stock.on_order     { color: var(--info-ink); background: var(--info-bg); }
.cfg-stock.out_of_stock { color: var(--err-ink); background: var(--err-bg); }

.cfg-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding-top: 10px;
}
.cfg-price {
    font-size: var(--fs-lg);
    font-weight: var(--fw-black);
    color: var(--brand-fg);
    letter-spacing: -.02em;
}
.cfg-price.on-request {
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    color: var(--txt-3);
    letter-spacing: 0;
}

.cfg-add {
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    color: var(--brand-ink);
    background: var(--grad-accent);
    padding: 7px 16px;
    border-radius: var(--r-pill);
    transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.cfg-add:hover { transform: translateY(-1px); box-shadow: var(--glow); }

.cfg-stepper {
    display: flex;
    align-items: center;
    gap: 2px;
    background: var(--fill-3);
    border: 1px solid var(--line-brand);
    border-radius: var(--r-pill);
    padding: 2px;
}
.cfg-step {
    width: 26px; height: 26px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
    line-height: 1;
    color: var(--brand-fg);
    transition: background var(--t-fast);
}
.cfg-step:hover { background: rgba(29,222,200,.15); }
.cfg-qty {
    min-width: 22px;
    text-align: center;
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    color: var(--txt-1);
    font-variant-numeric: tabular-nums;
}

/* ---- basket ---- */
.cfg-basket {
    background: var(--fill-2);
    border: 1px solid var(--line-2);
    border-radius: var(--r-lg);
    padding: 20px 22px;
}
.cfg-basket-title {
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--txt-3);
    margin-bottom: 14px;
}
body.ar .cfg-basket-title { letter-spacing: 0; }

.cfg-lines { display: flex; flex-direction: column; }
.cfg-line {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid var(--line);
    font-size: var(--fs-md);
}
.cfg-line:last-child { border-bottom: 0; }
.cfg-line-name  { flex: 1; color: var(--txt-1); min-width: 0; }
.cfg-line-qty   { color: var(--txt-3); font-variant-numeric: tabular-nums; }
.cfg-line-price { font-weight: var(--fw-bold); color: var(--brand-fg); white-space: nowrap; }
.cfg-line-price.on-request { font-weight: var(--fw-medium); font-size: var(--fs-xs); color: var(--txt-3); }
.cfg-line-remove {
    width: 24px; height: 24px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: var(--fs-2xl);
    line-height: 1;
    color: var(--txt-3);
    transition: color var(--t-fast), background var(--t-fast);
}
.cfg-line-remove:hover { color: var(--err-ink); background: var(--err-bg); }

.cfg-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--line-2);
}
.cfg-total-label { font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--txt-2); }
.cfg-total-value {
    font-size: 26px;
    font-weight: var(--fw-black);
    letter-spacing: -.03em;
    background: var(--grad-accent);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-variant-numeric: tabular-nums;
}
.cfg-total-note {
    font-size: var(--fs-xs);
    color: var(--txt-3);
    margin-top: 6px;
    text-align: end;
}
.cfg-disclaimer {
    font-size: var(--fs-xs);
    color: var(--txt-3);
    line-height: 1.6;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}

@media (max-width: 520px) {
    .cfg-sticky {
        inset-inline: 12px;
        bottom: 12px;
        padding: 11px 12px 11px 16px;
        gap: 10px;
    }
    .cfg-sticky-info { font-size: var(--fs-xs); }
    .cfg-sticky-btn { padding: 8px 14px; font-size: var(--fs-xs); }

    .cfg-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .cfg-info { padding: 11px 12px 13px; }
    .cfg-name { font-size: var(--fs-sm); }
    .cfg-foot { flex-direction: column; align-items: stretch; gap: 8px; }
    .cfg-add { text-align: center; }
    .cfg-stepper { justify-content: center; }
    .cfg-basket { padding: 16px; }
    .cfg-total-value { font-size: 22px; }
}

/* Full-width opt-in row — used for "I also need equipment with this",
   which sits between the feature checklist and the catalogue. */
.opt-wide {
    display: flex;
    width: 100%;
    align-items: flex-start;
    padding: 17px 20px;
    background: rgba(29,222,200,.045);
    border-color: var(--line-brand);
}
.opt-wide .opt-mark { margin-top: 2px; }
.opt-wide .opt-sub { margin-top: 4px; line-height: 1.6; }
.opt-wide:has(input:checked),
.opt-wide.is-checked { background: rgba(29,222,200,.1); }

/* ---------- 29. PRINT ---------- */
@media print {
    #header, #preloader, .fab, #progress, .atmos, .nav-mobile, body::after { display: none !important; }
    body { background: #fff; color: #000; }
    .card { border: 1px solid #ccc; }
}

/* ==========================================================================
   TOUCH TARGETS

   A control can look small and still be easy to hit — the visible box and the
   tappable box do not have to be the same thing. Everything below keeps its
   drawn size and grows only the area a finger lands on, to the 44x44 minimum.

   The language switch mattered most: on a site that exists in two languages it
   is the most-used control on the page, and it was the smallest thing on it
   at 32x32.
   ========================================================================== */
.social,
.burger,
.brand,
.icon-btn,
.admin-out {
    min-width: 44px;
    min-height: 44px;
}

/* The language switch is a segmented control, so a square hit area turns the
   active segment into a circle. 52px keeps the pill shape while still clearing
   44px in both directions. */
.lang-btn {
    min-width: 52px;
    min-height: 44px;
}

/* Inter draws a lone Arabic letter at roughly a third the width of "EN" at the
   same size — 6.3px against 18.1px — so it reads as an afterthought beside it.
   A couple of points back, on that button only. */
.lang-btn[data-lang="ar"] { font-size: 15px; }

/* Grid and inline-flex already centre their contents; these two need telling
   so the extra height does not push the label off-centre. */
.lang-btn,
.brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Small text controls that sit inline: a link inside a sentence cannot be
   given a 44px box without tearing the line apart, so they get vertical
   padding instead — the hit area grows, the text stays where it is. */
#draft-clear,
.cfg-sticky-btn,
.footer-bottom a {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

/* Footer links: full width already, so only the height was short. Padding
   rather than min-height, so the rows stay evenly spaced instead of one
   growing while its neighbours keep their old rhythm. */
.footer-col a {
    display: block;
    padding-block: 4px;
    min-height: 44px;
}

/* Inputs are tapped as often as buttons and were the shortest of all at 30px. */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="number"],
select {
    min-height: 44px;
}

/* ==========================================================================
   LIGHT THEME  —  add ?theme=light to any page URL to see it

   Reached by html.theme-light, so nothing here can affect the normal site.

   Almost all of it is token redefinition, which is the whole reason the
   washes and the type scale were tokenised first. The exceptions are at the
   bottom: glows and atmosphere were drawn for a dark ground and do not invert,
   they have to be turned down or off.

   Every pairing below was measured before it was written. Lowest is muted text
   on the page at 5.21:1, against a 4.5 floor.
   ========================================================================== */
html.theme-light {
    --bg-0:        #F6F9FB;
    --bg-1:        #FFFFFF;
    --bg-2:        #FFFFFF;
    --bg-3:        #F1F5F8;

    --txt-1:       #0B1B26;
    --txt-2:       #3D4E5A;
    --txt-3:       #5A6B78;

    --brand-fg:    #0E6F64;

    /* The base semantic colours are used directly as text in a few places —
       the footer heart, a WhatsApp icon, a tick. Every one of them was chosen
       to glow on near-black and every one fails on white: the rose reads
       2.69:1, the green 1.92:1. Same hues, darkened until they are legible. */
    --err:         #C2334F;
    --ok:          #0B7A54;
    --wa:          #0F7A36;
    --warn:        #8A5A05;
    --info:        #1A5FA8;

    --line:        rgba(11, 27, 38, .10);
    --line-2:      rgba(11, 27, 38, .16);
    --line-brand:  rgba(14, 111, 100, .30);

    /* The washes invert: a dark film on a pale ground does the job a white
       film did on a dark one. */
    --fill-1:      rgba(11, 27, 38, .022);
    --fill-2:      rgba(11, 27, 38, .045);
    --fill-3:      rgba(11, 27, 38, .07);
    --fill-4:      rgba(11, 27, 38, .10);

    /* Shadows can finally be shadows rather than a way of faking depth. */
    --sh-sm:       0 1px 2px rgba(11, 27, 38, .06);
    --sh-md:       0 8px 24px -10px rgba(11, 27, 38, .16);
    --sh-lg:       0 24px 56px -20px rgba(11, 27, 38, .22);
    --glow:        0 8px 26px -12px rgba(14, 111, 100, .35);
    --glow-lg:     0 16px 40px -16px rgba(14, 111, 100, .35);

    /* Semantic inks were picked to sit on near-black; on white they need the
       darker end of the same hues. */
    --ok-ink:      #0B7A54;
    --err-ink:     #B22B45;
    --warn-ink:    #8A5A05;
    --info-ink:    #1A5FA8;
    --ok-bg:       rgba(52, 211, 153, .12);
    --err-bg:      rgba(251, 113, 133, .12);
    --warn-bg:     rgba(251, 191, 36, .16);
    --info-bg:     rgba(59, 130, 246, .10);

    color-scheme: light;
}

/* ---- the parts a token cannot reach ---- */

/* Aurora blobs are 40%-opacity colour bombs built to bloom out of black. On
   white they read as smudges, so they come right down. */
html.theme-light .blob { opacity: .16; filter: blur(90px); }
html.theme-light .grid-overlay { opacity: .35; }

/* Card depth came from a lighter film; on white it has to come from a border
   and a real shadow instead. */
html.theme-light .card {
    background: var(--bg-1);
    border-color: var(--line);
    box-shadow: var(--sh-sm);
    backdrop-filter: none;
}
html.theme-light .card:hover { box-shadow: var(--sh-md); }

/* The header sat on a dark blur; on light it needs its own pale ground or the
   page scrolls through it. */
html.theme-light #header { background: rgba(255, 255, 255, .82); }
html.theme-light #header.scrolled { background: rgba(255, 255, 255, .94); }

/* Text selection was white-on-teal, which disappears here. */
html.theme-light ::selection { background: rgba(14, 111, 100, .18); color: #0B1B26; }

/* Three elements paint their own dark glass — floating badges, the about
   chips, the back-to-top button. They were written as "a pane of the page
   colour at 90%", which only works when the page is dark. */
html.theme-light .float-badge,
html.theme-light .about-chip,
html.theme-light .fab-top {
    background: rgba(255, 255, 255, .92);
    border-color: var(--line);
    box-shadow: var(--sh-sm);
}

/* The oversized service numerals are a watermark, not something to read. On a
   dark ground a pale tint receded; on white it has to be a dark one to recede
   the same way. */
html.theme-light .service-no { color: rgba(11, 27, 38, .07); }
html.theme-light .card:hover .service-no { color: rgba(14, 111, 100, .22); }

/* Same story for the faint grid and the mock browser chrome. */
html.theme-light .mock,
html.theme-light .mock-kpi { background: var(--fill-2); }

/* ---- theme toggle (trial) ---- */
.theme-toggle {
    min-width: 44px;
    min-height: 44px;
    padding: 6px 14px;
    border-radius: var(--r-pill);
    border: 1px solid var(--line-2);
    background: var(--fill-2);
    color: var(--txt-2);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-bold);
    letter-spacing: .04em;
    transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.theme-toggle:hover { color: var(--txt-1); border-color: var(--line-brand); }