:root{
    /* === BRÄNDI TOKENID === Vaheta need ühes kohas, et kogu sait ümber värvida.
       RGB-kanalid (mitte hex), et Tailwindi /opacity modifikaatorid (nt bg-ruby-primary/20) töötaks. */
    --color-primary: 190 18 60;        /* rgb(var(--color-primary)) */
    --color-primary-dark: 136 19 55;   /* rgb(var(--color-primary-dark)) */
    --color-primary-light: 255 241 242;/* rgb(var(--color-primary-light)) */
}

/* ==========================================================================
   1. BAAS JA SÜSTEEM
   ========================================================================== */
html { 
    scroll-behavior: smooth; 
}

body {
    background-color: #FCFCFD;
    color: #0A0A0B;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    /* Õrn, luksuslik täpimuster taustal */
    background-image: radial-gradient(rgb(var(--color-primary) / 0.04) 1px, transparent 1px);
    background-size: 32px 32px;
}

/* Teksti selekteerimine brändi värvides */
::selection { background-color: rgb(var(--color-primary)); color: #FFFFFF; }
::-moz-selection { background-color: rgb(var(--color-primary)); color: #FFFFFF; }

/* Kogu lehe kerimisriba (Scrollbar) - Modernne ja peenike */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 10px; border: 2px solid #FCFCFD; }
::-webkit-scrollbar-thumb:hover { background: rgb(var(--color-primary)); }

/* ==========================================================================
   2. PÕHILISED UI ELEMENDID
   ========================================================================== */
/* Progressiriba */
.progress-bar { height: 4px; background: #F3F4F6; width: 100%; position: fixed; top: 0; left: 0; z-index: 100; }
.progress-fill { height: 100%; background: linear-gradient(90deg, rgb(var(--color-primary)), #E11D48); width: 20%; transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1); box-shadow: 0 0 15px rgba(225, 29, 72, 0.5); }

/* Klaasjas Päis */
.site-header { 
    background: rgba(252, 252, 253, 0.85); 
    backdrop-filter: blur(20px); 
    -webkit-backdrop-filter: blur(20px); 
    border-bottom: 1px solid rgba(0,0,0,0.03); 
    z-index: 90; 
    transition: all 0.3s ease; 
}

/* Laitmatu kaartide süsteem (Bento) */
.minimal-card {
    background: #FFFFFF; 
    border: 1px solid #E5E7EB; 
    border-radius: 24px;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1); 
    cursor: pointer; 
    position: relative;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02); 
    transform-style: preserve-3d;
    will-change: transform, box-shadow;
    user-select: none;
}
.minimal-card:hover { 
    transform: translateY(-4px); 
    box-shadow: 0 30px 60px -15px rgb(var(--color-primary) / 0.12); 
    border-color: #FECDD3; 
}
.minimal-card:active { transform: scale(0.98) translateY(0); } 

.minimal-card.selected { 
    background: rgb(var(--color-primary)); 
    border-color: rgb(var(--color-primary)); 
    color: #FFFFFF; 
    box-shadow: 0 15px 35px -5px rgb(var(--color-primary) / 0.35); 
    transform: translateY(-2px); 
}
.minimal-card.selected .icon { stroke: #FFFFFF; }
.minimal-card.selected .subtitle { color: #FECDD3; }
.minimal-card.selected .icon-wrapper { background: rgba(255,255,255,0.15); color: #FFFFFF; border-color: rgba(255,255,255,0.2); }

/* Lauaarvuti ekraanide erikaart (Samm 3) */
.desktop-mon-btn { border-radius: 16px; border: 1.5px solid #E5E7EB; }
.desktop-mon-btn.selected { background: rgb(var(--color-primary)); border-color: rgb(var(--color-primary)); box-shadow: 0 8px 25px rgb(var(--color-primary) / 0.25); }

/* Pill Nupud (Mitmikvalikute ja filtrite jaoks) */
.pill-btn {
    padding: 0.6rem 1.1rem; 
    border: 1.5px solid #E5E7EB; 
    border-radius: 9999px; 
    font-size: 0.85rem; 
    font-weight: 700;
    color: #4B5563; 
    background: #FFFFFF; 
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); 
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
@media (min-width: 768px) { .pill-btn { padding: 0.75rem 1.5rem; font-size: 0.95rem; } }
.pill-btn:hover { border-color: rgb(var(--color-primary)); color: rgb(var(--color-primary)); background: rgb(var(--color-primary-light)); box-shadow: 0 4px 12px rgb(var(--color-primary) / 0.08); }
.pill-btn:active { transform: scale(0.96); } 
.pill-btn.selected { background: rgb(var(--color-primary)); border-color: rgb(var(--color-primary)); color: #FFFFFF !important; box-shadow: 0 8px 20px rgb(var(--color-primary) / 0.3); }

/* ==========================================================================
   3. VORMID JA INTERAKTIIVSED PANEELID
   ========================================================================== */
/* Nutikad interaktiivsed paneelid (Dokk / Monitor / Lisad) */
.interactive-panel { 
    border: 1.5px solid #E5E7EB; 
    border-radius: 24px; 
    background: #FFFFFF; 
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); 
    overflow: hidden; 
}
.interactive-panel.active { border-color: rgb(var(--color-primary)); box-shadow: 0 15px 35px -10px rgb(var(--color-primary) / 0.15); }

.interactive-header { 
    padding: 1rem 1.25rem; 
    cursor: pointer; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    transition: background 0.3s ease; 
    user-select: none;
}
.interactive-header:hover { background: #F9FAFB; }
@media (min-width: 768px) { .interactive-header { padding: 1.5rem 1.75rem; } }

/* Alampaneelide (Sub-panel) veatu ilmumine */
.sub-panel { 
    max-height: 0; 
    opacity: 0; 
    visibility: hidden;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1); 
    background: #F9FAFB; 
}
.interactive-panel.active .sub-panel { 
    max-height: 800px; 
    opacity: 1; 
    visibility: visible;
    border-top: 1px solid #E5E7EB; 
    padding: 1.25rem; 
}
@media (min-width: 768px) { .interactive-panel.active .sub-panel { padding: 1.5rem 1.75rem; } }

/* Dünaamilised AVA/SULGE paneelid (Pro-specs ja Lauaarvuti Ekraanid) */
.pro-specs-panel, .desktop-specs-panel { max-height: 0; opacity: 0; overflow: hidden; transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
.pro-specs-panel.expanded, .desktop-specs-panel.expanded { max-height: 3000px; opacity: 1; margin-top: 1rem; padding-top: 1.25rem; border-top: 1px solid #E5E7EB; overflow: visible; }
@media (min-width: 768px) {
    .pro-specs-panel.expanded, .desktop-specs-panel.expanded { margin-top: 1.5rem; padding-top: 1.5rem; }
}

/* Checkboxi visuaal paneeli päises */
.checkbox-ui { 
    width: 26px; height: 26px; 
    border: 2px solid #D1D5DB; 
    border-radius: 8px; 
    display: flex; align-items: center; justify-content: center; 
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); 
    flex-shrink: 0; 
    background: #FFFFFF;
}
.interactive-panel.active .checkbox-ui { background: rgb(var(--color-primary)); border-color: rgb(var(--color-primary)); transform: scale(1.05); }
.interactive-panel.active .checkbox-ui i { opacity: 1 !important; color: white; }

/* Custom Lülitid (Refurbished Toggle switch) */
.toggle-bg { width: 52px; height: 28px; background: #E5E7EB; border-radius: 999px; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); position: relative; box-shadow: inset 0 2px 4px rgba(0,0,0,0.05); }
.toggle-dot { width: 20px; height: 20px; background: white; border-radius: 50%; position: absolute; top: 4px; left: 4px; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s; box-shadow: 0 2px 5px rgba(0,0,0,0.15); }
input:checked + .toggle-wrapper .toggle-bg { background: rgb(var(--color-primary)); box-shadow: inset 0 2px 4px rgb(var(--color-primary) / 0.5); }
input:checked + .toggle-wrapper .toggle-dot { transform: translateX(24px); }

/* Custom Slider (Aku ja Kaal liugurid - iOS stiilis) */
input[type=range] { -webkit-appearance: none; width: 100%; background: transparent; margin: 10px 0; }
input[type=range]:focus { outline: none; }
input[type=range]::-webkit-slider-runnable-track { 
    width: 100%; height: 6px; cursor: pointer; background: #E5E7EB; border-radius: 4px; box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none; height: 26px; width: 26px; border-radius: 50%; background: rgb(var(--color-primary));
    cursor: pointer; margin-top: -10px; border: 4px solid #FFFFFF; box-shadow: 0 4px 12px rgb(var(--color-primary) / 0.3);
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s;
}
input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.15); box-shadow: 0 6px 16px rgb(var(--color-primary) / 0.4); }
input[type=range]::-webkit-slider-thumb:active { transform: scale(1.25); }

/* Vormiväljade fookusolekud (Otsingukast, E-mail, Textarea) */
input[type=text]:focus, input[type=email]:focus, textarea:focus {
    outline: none !important;
    border-color: rgb(var(--color-primary)) !important;
    box-shadow: 0 0 0 4px rgb(var(--color-primary) / 0.1) !important;
}
input[type=radio] { accent-color: rgb(var(--color-primary)); cursor: pointer; transform: scale(1.1); }

/* ==========================================================================
   4. KONTEINERID, LAYOUT JA ANIMATSIOONID
   ========================================================================== */
/* Sammude vahetus */
.step-container { display: none; opacity: 0; }
.step-container.active { display: block; opacity: 1; }

/* Brändide nimekirja sisene kerimisriba */
.brand-list::-webkit-scrollbar { width: 6px; }
.brand-list::-webkit-scrollbar-track { background: transparent; }
.brand-list::-webkit-scrollbar-thumb { background: #D1D5DB; border-radius: 10px; }
.brand-list::-webkit-scrollbar-thumb:hover { background: rgb(var(--color-primary)); }

/* Lõpptulemuste Bento Grid (Samm 5) */
.bento-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2rem; }
@media (min-width: 768px) { .bento-grid { gap: 2.5rem; } }

/* Helper mobiilse turvaala jaoks (Apple iOS Home Indicator tugi) */
.pb-safe-body { padding-bottom: calc(env(safe-area-inset-bottom) + 90px); }
@media (min-width: 768px) { .pb-safe-body { padding-bottom: 2rem; } }
.pb-safe-nav { padding-bottom: calc(env(safe-area-inset-bottom) + 0.5rem); }

/* Avalehe "Kuidas platvorm töötab" — mobiilis ühe lingi all, rullub vajutusel sujuvalt lahti.
   Desktopil (>=768px) alati avatud (tavaline plokk). grid-rows 0fr->1fr annab sujuva animatsiooni. */
@media (max-width: 767px) {
    .hiw-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; }
    .hiw-panel.open { grid-template-rows: 1fr; }
    .hiw-panel > div { overflow: hidden; }
    #hiw-toggle .hiw-chevron { transition: transform .3s ease; }
    #hiw-toggle[aria-expanded="true"] .hiw-chevron { transform: rotate(180deg); }
}

/* Aktiivsete hangete luksuslik visuaal (Live Ticker) */
.live-activity-mask {
    mask-image: linear-gradient(to bottom, transparent, black 5%, black 95%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 5%, black 95%, transparent);
}
.live-card { transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); border: 1px solid #E5E7EB; }
.live-card:hover { transform: scale(1.02) translateY(-2px); box-shadow: 0 15px 30px -5px rgba(0,0,0,0.08); border-color: #D1D5DB; z-index: 10; position: relative;}

/* ==========================================================================
   5. FOOKUSREŽIIM (FOCUS MODE) - Uduseks tegemine
   ========================================================================== */
/* Fookusrežiimi selektorid (Aktiivne sammudes 2, 3 ja 4) */
body.focus-mode-active > header,
body.focus-mode-active > footer,
body.focus-mode-active #sticky-progress-desktop,
body.focus-mode-active #how-it-works,
body.focus-mode-active #live-activity,
body.focus-mode-active #step-1 > div > div:first-child /* Avalehe pealkiri (Hero) uduseks */ {
    filter: blur(8px) grayscale(40%);
    opacity: 0.3;
    pointer-events: none;
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Sujuv naasmine tavarežiimi */
body > header,
body > footer,
#sticky-progress-desktop,
#how-it-works,
#live-activity,
#step-1 > div > div:first-child {
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   6. CUSTOM KEYFRAMES (Animatsioonid)
   ========================================================================== */
/* Live Activity püstine kerimine (Kriitiline! HTML-is on viide "animate-marquee-vertical") */
@keyframes marqueeVertical {
    0% { transform: translateY(0); }
    100% { transform: translateY(-50%); /* Eeldab sisu dubleerimist (2x) JavaScriptis */ }
}
.animate-marquee-vertical {
    animation: marqueeVertical 25s linear infinite;
}

/* ==========================================================================
   7. MOBIILSE KOGEMUSE TÄIUSTUSED (Touch, kerimisribad, puutealad)
   ========================================================================== */

/* Peidetud kerimisriba horisontaalsetel filtri-/kiip-ribadel.
   (Oli varem defineeritud ainult kaupmehe päises — avalikel lehtedel puudus.) */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Peenike, elegantne kerimisriba modaalide/paneelide sees (nt hanke modaal) */
.custom-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #D1D5DB; border-radius: 10px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: rgb(var(--color-primary)); }
.custom-scrollbar { scrollbar-width: thin; scrollbar-color: #D1D5DB transparent; }

/* Pehme, iOS-stiilis hoojõuga kerimine kõigil horisontaalsetel ribadel */
.no-scrollbar,
.overflow-x-auto,
.custom-scrollbar {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

/* Puuteala miinimum 44px (Apple HIG) — pill-nupud mobiilis mugavalt vajutatavad */
@media (max-width: 767px) {
    .pill-btn {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Horisontaalsete filtriribade servapehmendus, et viimane kiip ei "kleepuks" serva */
    #type-filters,
    .filter-chips-row {
        scroll-padding-left: 1rem;
        padding-right: 0.25rem;
    }
}

/* Eemaldab puutel kollase/halli "tap-highlight" varju (puhtam, app-laadne tunne) */
button, a, label, .pill-btn, .minimal-card, input[type=range] {
    -webkit-tap-highlight-color: transparent;
}

/* Austa kasutaja "vähem liikumist" eelistust (ligipääsetavus + auhinnatase) */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   8. ABIVIHJED (HINT TOOLTIPID) — taaskasutatav "?" / "!" hover-juhend
   --------------------------------------------------------------------------
   Kasutus HTML-is:
     <span class="hint" tabindex="0" aria-label="...">
        <i data-lucide="help-circle" class="hint-icon"></i>
        <span class="hint-bubble">Selgitav tekst siia.</span>
     </span>
   Variant hoiatusele/olulisele: lisa klass "hint--warn" (kollane "!" stiilis).
   Mull avaneb hoveril JA fookusel (klaviatuur) — ligipääsetav.
   ========================================================================== */
.hint {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    color: #9CA3AF;
    cursor: help;
    outline: none;
    transition: color 0.2s ease;
}
.hint:hover, .hint:focus-visible { color: rgb(var(--color-primary)); }
.hint--warn { color: #D97706; }
.hint--warn:hover, .hint--warn:focus-visible { color: #B45309; }

.hint-icon { width: 0.95rem; height: 0.95rem; }

.hint-bubble {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    width: max-content;
    max-width: 240px;
    background: #0A0A0B;
    color: #F9FAFB;
    text-align: left;
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: 0;
    text-transform: none;
    padding: 0.6rem 0.75rem;
    border-radius: 0.7rem;
    box-shadow: 0 12px 30px -8px rgba(0,0,0,0.4);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.16,1,0.3,1), visibility 0.2s;
    z-index: 1000;
}
/* Väike "nool" mulli all */
.hint-bubble::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #0A0A0B;
}
.hint:hover .hint-bubble,
.hint:focus-visible .hint-bubble,
.hint:focus .hint-bubble {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* Servalähedaste vihjete mull joondub vasakule, et ekraanilt välja ei jookseks */
.hint--left .hint-bubble { left: 0; transform: translateX(0) translateY(4px); }
.hint--left .hint-bubble::after { left: 14px; }
.hint--left:hover .hint-bubble,
.hint--left:focus-visible .hint-bubble,
.hint--left:focus .hint-bubble { transform: translateX(0) translateY(0); }

@media (max-width: 480px) {
    .hint-bubble { max-width: 200px; }
}


/* ==========================================================================
   9. MODAALID (Tender Modal Spetsiifika)
   ========================================================================== */

/* Hanke modali jaluse (sticky footer) turvaala Apple iOS seadmetele.
   Hoiab ära nupu ja e-posti välja sattumise Home Indicatori taha. */
#tender-modal-content .flex-shrink-0 {
    padding-bottom: max(1.25rem, env(safe-area-inset-bottom) + 0.75rem) !important;
}

/* KRIITILINE MOBIILI UX: Vältida iOS Safari automaatset sissesuumimist (Auto-zoom),
   kui kasutaja vajutab e-posti sisestusväljale. iOS suumib sisse, kui font on alla 16px. */
@media (max-width: 768px) {
    #tender-modal input[type="email"],
    #tender-modal textarea {
        font-size: 16px !important;
    }

    /* ======================================================================
       10. ÜLDINE MOBIILIKIHT — "nupp jääb voldi taha" klassi hädade vastu
       ====================================================================== */

    /* iOS auto-zoom kõigil vormiväljadel (mitte ainult tender-modalis) */
    input[type="text"], input[type="email"], input[type="number"],
    input[type="tel"], input[type="url"], input[type="password"],
    select, textarea {
        font-size: 16px !important;
    }

    /* KÕIK modalid: ei tohi ületada ekraani — sisu kerib, mitte leht.
       Peamine tegevusnupp jääb alati nähtavale (sticky jalus modali sees). */
    #journey-modal > div:last-child,
    #decline-modal > div:last-child,
    #ticker-chooser > div:last-child,
    #device-request-panel {
        max-height: calc(100dvh - 1rem);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: max(1.25rem, env(safe-area-inset-bottom) + 0.75rem);
    }

    /* Mobiili alumine navigatsiooniriba: ALATI fikseeritud ekraani alaserva.
       !important kaitseb juhtumite eest, kus utiliit-klass mingil põhjusel ei
       rakendu (nt Tailwind CDN laadimisjärjekord) või miski selle üle kirjutab. */
    #mobile-nav-container {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        transform: none !important;
        z-index: 100;
    }

    /* Ujuv "Sinu päring" kaart ei tohi katta avalehe mobiilinavi ega jalust */
    #journey-bar { bottom: calc(env(safe-area-inset-bottom) + 5.25rem); }

    /* Avalehe sammude sisu ei tohi jääda fikseeritud "Jätka" riba taha */
    .step-container { padding-bottom: 7rem; }

    /* Pikad ridade tegevusnupud murduvad ilusti, mitte ei voola üle ääre */
    .a-btn, .filter-tab { white-space: nowrap; }
    .offer-card .flex-wrap, .live-card { min-width: 0; }

    /* Tabelid ja koodiväljad: horisontaalne kerimine kasti sees, mitte leht laiali */
    .overflow-x-auto { -webkit-overflow-scrolling: touch; }

    /* Suured pealkirjad veidi väiksemaks, et CTA-d mahuks esimesele ekraanile */
    main h1 { overflow-wrap: anywhere; }
}

/* ==========================================================================
   10. PREMIUM POLISH — ühtne viimistluskiht kogu avalikule poolele
   ========================================================================== */

/* Klaviatuuriga liikujale selge, brändivärvi fookusring (hiirekasutajat ei sega) */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid rgb(var(--color-primary));
    outline-offset: 2px;
    border-radius: 6px;
}
:where(a, button):focus:not(:focus-visible) { outline: none; }

/* Nuppude ja linkide ühtlane, pehme micro-interaction */
:where(button, [role="button"], a) { -webkit-tap-highlight-color: transparent; }

/* Gradient-pealkirja utiliit (hero ja rõhuasetused) */
.text-gradient-ruby {
    background: linear-gradient(100deg, rgb(var(--color-primary)) 0%, #E11D48 55%, #FB7185 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Sissejuhatav reveal-animatsioon sisulehtedele: lisa elemendile data-reveal.
   Järjestikused elemendid saavad väikese viite (stagger) — elegantne sisenemine. */
@keyframes revealUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
[data-reveal] { animation: revealUp .55s cubic-bezier(0.16, 1, 0.3, 1) both; }
[data-reveal]:nth-child(2) { animation-delay: .06s; }
[data-reveal]:nth-child(3) { animation-delay: .12s; }
[data-reveal]:nth-child(4) { animation-delay: .18s; }
[data-reveal]:nth-child(5) { animation-delay: .24s; }
[data-reveal]:nth-child(6) { animation-delay: .30s; }

/* Piltide elegantne sisse-fade pärast laadimist (lisa class img-fade) */
.img-fade { opacity: 0; transition: opacity .5s ease; }
.img-fade.loaded, .img-fade[data-loaded] { opacity: 1; }

/* Usaldusriba (hero all): diskreetne, õhuline */
.trust-strip {
    display: inline-flex; flex-wrap: wrap; align-items: center;
    gap: .5rem 1.5rem;
}
.trust-strip > span {
    display: inline-flex; align-items: center; gap: .45rem;
    font-size: 12px; font-weight: 700; color: #71717A;
    letter-spacing: .01em;
}
.trust-strip > span svg, .trust-strip > span i { color: rgb(var(--color-primary)); }

/* Tabelid sisulehtedel — puhas, õhuline vaikimisi stiil */
main table:not([class]) { width: 100%; border-collapse: collapse; font-size: 14px; }
main table:not([class]) th { text-align: left; font-weight: 800; color: #18181B; padding: 10px 12px; border-bottom: 2px solid #E4E4E7; }
main table:not([class]) td { padding: 10px 12px; border-bottom: 1px solid #F4F4F5; color: #3F3F46; }

/* Peen "tõuse esile" efekt suurtele CTA nuppudele */
.cta-lift { transition: transform .25s cubic-bezier(0.16,1,0.3,1), box-shadow .25s ease; }
.cta-lift:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -10px rgb(var(--color-primary) / .35); }
.cta-lift:active { transform: translateY(0) scale(.98); }

/* Sisulehe proosa (terms/privacy/help jms pikk tekst) — parem loetavus */
.prose-page h1 { font-size: clamp(1.9rem, 4vw, 3rem); font-weight: 900; letter-spacing: -0.02em; margin-bottom: 1rem; }
.prose-page h2 { font-size: 1.3rem; font-weight: 800; margin: 2rem 0 .6rem; }
.prose-page p, .prose-page li { color: #52525B; line-height: 1.75; font-size: 15px; }
.prose-page a { color: rgb(var(--color-primary)); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.prose-page a:hover { color: rgb(var(--color-primary-dark)); }

/* Skeleton-laadimise sära (kasutusel töölaudade laadimiskaartidel) */
@keyframes shimmer { 100% { transform: translateX(100%); } }
.animate-pulse { position: relative; overflow: hidden; }
.animate-pulse::after {
    content: ''; position: absolute; inset: 0; transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent);
    animation: shimmer 1.6s infinite;
}

/* Austame kasutaja liikumiseelistust — lülitame animatsioonid välja */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}