/* ═══════════════════════════════════════════════════════════════
   COFFEETE — HOMEPAGE
   ───────────────────────────────────────────────────────────────
   Previously this lived in a ~900-line inline <style> block inside
   Views/Home/Index.cshtml, which meant it was re-downloaded with
   every single page view and could never be cached. It's a file
   now so the browser caches it (the view links it with
   asp-append-version, so edits still bust the cache immediately).

   Animation rule for everything below: only ever animate
   `transform` and `opacity`. Those are the two properties the
   compositor can handle on the GPU without a layout or paint pass,
   which is what keeps the scroll at 60fps. Never animate width,
   height, top, left, margin, or box-shadow in a loop.
   ═══════════════════════════════════════════════════════════════ */

:root {
    /* Brand */
    --hp-brand:      #29ABE2;
    --hp-brand-dk:   #1a8abf;
    --hp-brand-dp:   #0f6f9e;
    --hp-brand-lt:   #d7f0fa;
    --hp-amber:      #F59E0B;
    --hp-amber-dk:   #D97706;
    --hp-amber-lt:   #fff4db;
    --hp-coffee:     #6F4E37;
    --hp-coffee-dk:  #4a3424;

    /* Surfaces — cool tinted base, never bare white */
    --hp-bg:         #dfeaf3;
    --hp-bg-2:       #e4eef6;
    --hp-card:       #ffffff;
    --hp-border:     #c9d8e6;
    --hp-border-2:   #b4c8db;

    --hp-text:       #142033;
    --hp-text-2:     #3d4d66;
    --hp-muted:      #5f718a;

    /* Radii */
    --hp-r-2xl: 30px;
    --hp-r-xl:  24px;
    --hp-r-lg:  18px;
    --hp-r-md:  14px;
    --hp-r-sm:  10px;

    /* Elevation — brand-tinted, not grey dirt */
    --hp-sh-sm:  0 1px 2px rgba(20,32,51,.05), 0 2px 8px rgba(20,32,51,.06);
    --hp-sh-md:  0 2px 6px rgba(20,32,51,.06), 0 8px 24px rgba(20,32,51,.08);
    --hp-sh-lg:  0 4px 12px rgba(20,32,51,.07), 0 18px 44px rgba(20,32,51,.11);
    --hp-sh-xl:  0 8px 20px rgba(20,32,51,.09), 0 32px 70px rgba(20,32,51,.15);
    --hp-sh-brand: 0 10px 30px rgba(41,171,226,.30);
    --hp-sh-amber: 0 10px 30px rgba(245,158,11,.32);

    /* Gradients */
    --hp-grad-brand:  linear-gradient(135deg, #3fb8ec 0%, var(--hp-brand-dk) 100%);
    --hp-grad-amber:  linear-gradient(135deg, var(--hp-amber) 0%, #F97316 100%);
    --hp-grad-mesh:   radial-gradient(900px 520px at 8% -8%, rgba(41,171,226,.28), transparent 58%),
                      radial-gradient(820px 480px at 92% 12%, rgba(111,78,55,.16), transparent 55%),
                      radial-gradient(700px 500px at 50% 110%, rgba(245,158,11,.14), transparent 58%);

    /* Glass */
    --hp-glass-bg:     rgba(255,255,255,.78);
    --hp-glass-brd:    rgba(255,255,255,.9);
    --hp-glass-blur:   blur(14px) saturate(160%);

    /* Motion */
    --hp-ease-out:    cubic-bezier(.22, 1, .36, 1);
    --hp-ease-spring: cubic-bezier(.34, 1.36, .5, 1);
}

body { background: var(--hp-bg) !important; }
input:focus { outline: none; }
.text-truncate { text-align: right; }

/* ═══════════════════════════════════════
   PASTEL ICON BACKGROUNDS
   Ported from the legacy homepage.css (which the home page no longer
   loads — these seven rules were the only thing still referenced from
   its 1469 lines). Upgraded from flat fills to soft two-stop gradients
   so the icon chips match the rest of the redesign.
   ═══════════════════════════════════════ */
.pastel-yellow-background { background: linear-gradient(135deg, #fdfbd0, #f7f3a8); }
.pastel-pink-background   { background: linear-gradient(135deg, #ffe0fb, #ffc4f5); }
.pastel-green-background  { background: linear-gradient(135deg, #d9fdec, #b8f5d8); }
.pastel-blue-background   { background: linear-gradient(135deg, #d9fdfd, #b5f2f7); }
.pastel-purple-background { background: linear-gradient(135deg, #e0e8ff, #c3d2fd); }
.pastel-lime-background   { background: linear-gradient(135deg, #edfde0, #d5f7b8); }
.pastel-rose-background   { background: linear-gradient(135deg, #ffeae0, #ffd0bd); }

/* ═══════════════════════════════════════
   SCROLL REVEAL
   The .is-visible class is added by an IntersectionObserver in
   homepage-v2.js. `will-change` is deliberately NOT set globally —
   promoting dozens of sections to their own compositor layer at once
   costs more memory than the animation saves. It's applied only for
   the duration of the transition instead (see .hp-reveal:not(.is-visible)).
   ═══════════════════════════════════════ */
.hp-reveal {
    opacity: 0;
    transform: translate3d(0, 30px, 0);
    transition: opacity .7s var(--hp-ease-out), transform .7s var(--hp-ease-out);
}
.hp-reveal.is-visible { opacity: 1; transform: none; }

.hp-reveal-stagger > * {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
    transition: opacity .6s var(--hp-ease-out), transform .6s var(--hp-ease-out);
}
.hp-reveal-stagger.is-visible > * { opacity: 1; transform: none; }
.hp-reveal-stagger.is-visible > *:nth-child(1) { transition-delay: .04s; }
.hp-reveal-stagger.is-visible > *:nth-child(2) { transition-delay: .10s; }
.hp-reveal-stagger.is-visible > *:nth-child(3) { transition-delay: .16s; }
.hp-reveal-stagger.is-visible > *:nth-child(4) { transition-delay: .22s; }
.hp-reveal-stagger.is-visible > *:nth-child(5) { transition-delay: .28s; }
.hp-reveal-stagger.is-visible > *:nth-child(6) { transition-delay: .34s; }
.hp-reveal-stagger.is-visible > *:nth-child(7) { transition-delay: .40s; }
.hp-reveal-stagger.is-visible > *:nth-child(8) { transition-delay: .46s; }

/* Scale-in variant, for cards that benefit from a bit more presence */
.hp-reveal-scale { opacity: 0; transform: scale(.94); transition: opacity .6s var(--hp-ease-out), transform .6s var(--hp-ease-spring); }
.hp-reveal-scale.is-visible { opacity: 1; transform: none; }

/* ═══════════════════════════════════════
   SECTION CHROME (shared by view components)
   ═══════════════════════════════════════ */
.hp-section { position: relative; padding: 5.5rem 0; }
.hp-section > .container { position: relative; z-index: 1; }

/* ═══════════════════════════════════════
   HOME SECTION TONE SYSTEM
   The page follows one repeating colour pattern instead of every section
   inventing its own background. Four tones, applied in a fixed rhythm down the
   page (see each section's own class):

       A  brand light   — soft cyan, the primary resting tone
       B  paper         — near-white, used between two coloured tones
       C  warm          — cream/amber, the counterweight to A
       DEEP brand navy  — the three "feature" bands (دونیت چیست / دیوار افتخار / گیتار)

   Tones are OPAQUE and genuinely coloured. An earlier version layered
   translucent washes over a shared gradient, which averaged every section to the
   same pale blue and left the page reading as one flat sheet.
   ═══════════════════════════════════════ */
.hp-home { position: relative; background: var(--hp-bg-2); }

.hp-tone-a,
.hp-tone-b,
.hp-tone-c,
.hp-tone-deep { position: relative; }
.hp-tone-a > .container,
.hp-tone-b > .container,
.hp-tone-c > .container,
.hp-tone-deep > .container { position: relative; z-index: 1; }

/* A — brand light. Saturated enough to leave white behind. */
.hp-tone-a {
    background:
        radial-gradient(760px 420px at 88% 6%,  rgba(41,171,226,.28), transparent 60%),
        radial-gradient(680px 420px at 6% 92%,  rgba(111,78,55,.12), transparent 60%),
        linear-gradient(180deg, #d4ebf7 0%, #c5e2f3 100%);
}
/* B — cool paper, not bare white. */
.hp-tone-b {
    background:
        radial-gradient(700px 380px at 12% 4%, rgba(41,171,226,.14), transparent 58%),
        radial-gradient(700px 380px at 92% 96%, rgba(245,158,11,.12), transparent 58%),
        linear-gradient(180deg, #e8eef5 0%, #dde6f0 100%);
}
/* C — warm amber/coffee counterweight. */
.hp-tone-c {
    background:
        radial-gradient(720px 420px at 8% 8%,  rgba(245,158,11,.26), transparent 60%),
        radial-gradient(700px 420px at 94% 90%, rgba(111,78,55,.14), transparent 60%),
        linear-gradient(180deg, #f5e8d4 0%, #edd9bc 100%);
}
/* DEEP — brand navy chapter breaks. */
.hp-tone-deep {
    background:
        radial-gradient(820px 520px at 88% 0%, rgba(41,171,226,.34), transparent 62%),
        radial-gradient(760px 520px at 6% 96%, rgba(111,78,55,.22), transparent 62%),
        linear-gradient(165deg, #0c2942 0%, #123a5c 48%, #0a2035 100%);
    color: #E6F2FA;
}
/* Feathered edges so a deep band melts into the light tones on either side. */
.hp-tone-deep::before,
.hp-tone-deep::after {
    content: ''; position: absolute; left: 0; right: 0; height: 84px;
    z-index: 0; pointer-events: none;
}
.hp-tone-deep::before { top: 0;    background: linear-gradient(180deg, rgba(212,235,247,.55), transparent); }
.hp-tone-deep::after  { bottom: 0; background: linear-gradient(0deg,   rgba(212,235,247,.55), transparent); }

/* Legacy surface aliases still referenced by a few sections — mapped onto the
   tone system so nothing falls back to bare white. */
.hp-surface-light { background: inherit; }
.hp-surface-tint  { background: inherit; }
.hp-surface-mesh  { background: inherit; }
.hp-surface-warm  { background: inherit; }

/* `.tagging` is the legacy hook the view components still emit. */
.tagging { position: relative; padding: 5rem 0; }

.section-title {
    font-size: clamp(1.5rem, 3vw, 2.15rem);
    font-weight: 900;
    letter-spacing: -.015em;
    line-height: 1.4;
    color: var(--hp-text);
    margin-bottom: .6rem;
}
.section-subtitle {
    font-size: clamp(.92rem, 1.4vw, 1rem);
    line-height: 2;
    color: var(--hp-muted);
    max-width: 640px;
    margin: 0 auto 2.5rem;
}
.section-subtitle-sm { font-size: .88rem; max-width: 560px; }
.section-subtitle strong { color: var(--hp-text-2); font-weight: 700; }
.total-teams-callout { font-size: clamp(1.5rem, 3vw, 2.15rem) !important; font-weight: 900; color: var(--hp-text); }

.hp-sec-head { margin-bottom: 3rem; }
.hp-sec-head .section-title { margin-bottom: 0; }
.hp-sec-head .section-subtitle { margin-top: .8rem; }

.hp-sec-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; border-radius: 16px; margin-bottom: .9rem;
    font-size: 1.45rem;
    background: linear-gradient(150deg, #fff 0%, var(--hp-brand-lt) 100%);
    box-shadow: var(--hp-sh-sm), inset 0 0 0 1px rgba(41,171,226,.16);
}

.section-title-accent {
    display: block; width: 56px; height: 3px; border-radius: 3px;
    margin: 1rem auto 0;
    background: linear-gradient(90deg, var(--hp-brand), var(--hp-amber));
}

/* Ambient colour orbs. Sections opt in by adding .hp-orbs. */
.hp-orbs { position: relative; overflow: hidden; }
.hp-orbs::before,
.hp-orbs::after {
    content: ''; position: absolute; z-index: 0; pointer-events: none;
    border-radius: 50%; opacity: .45;
}
.hp-orbs::before {
    width: 340px; height: 340px; top: -120px; right: -110px;
    background: radial-gradient(circle, rgba(41,171,226,.32), transparent 70%);
    animation: hpFloat 13s ease-in-out infinite;
}
.hp-orbs::after {
    width: 300px; height: 300px; bottom: -110px; left: -90px;
    background: radial-gradient(circle, rgba(245,158,11,.26), transparent 70%);
    animation: hpFloat 15s ease-in-out infinite -5s;
}
.hp-orbs > .container { position: relative; z-index: 1; }

.hp-eyebrow {
    display: inline-block;
    font-size: .74rem; font-weight: 800; letter-spacing: .04em;
    color: var(--hp-brand-dp);
    margin-bottom: .75rem;
}

.hp-anchor { display: block; height: 0; width: 0; overflow: hidden; }

/* ═══════════════════════════════════════
   WAVE DIVIDERS
   The SVG is inlined as a background so it costs zero extra network
   requests. `preserveAspectRatio="none"` lets one path stretch to any
   viewport width without a media query per breakpoint.

   A divider blends TWO colours: the wave path is filled with the colour of
   the section below it, and the element's own background is set to the
   colour of the section above. Getting only one of them right leaves a
   band of raw page background showing through.
   ═══════════════════════════════════════ */
.hp-divider {
    position: relative; display: block; width: 100%;
    line-height: 0; pointer-events: none;
    margin: 0; padding: 0;
}
.hp-divider svg { display: block; width: 100%; height: clamp(48px, 6vw, 92px); }
.hp-divider-flip svg { transform: rotate(180deg); }

/* Inset variant: sits at the bottom edge INSIDE a section, overlapping it.
   Used where the section above has a gradient no flat colour can match
   (the stats band) — the wave simply paints over whatever is behind it,
   so only the "below" colour has to be correct. */
.hp-divider-inset {
    position: absolute; bottom: -1px; left: 0; right: 0;
    z-index: 2; background: none;
}

/* ═══════════════════════════════════════
   HERO — full-bleed brand stage
   One composition: brand, headline, one line, CTA.
   Cup art is a visual plane, not a side card.
   ═══════════════════════════════════════ */
.hp-hero {
    position: relative; overflow: hidden;
    min-height: min(92vh, 820px);
    display: flex; flex-direction: column; justify-content: center;
    padding: clamp(4rem, 8vw, 7rem) 1.25rem clamp(3.5rem, 6vw, 5.5rem);
    background:
        radial-gradient(900px 560px at 85% 40%, rgba(41,171,226,.32), transparent 55%),
        radial-gradient(700px 480px at 10% 80%, rgba(111,78,55,.18), transparent 50%),
        linear-gradient(155deg, #b8daf0 0%, #cfe6f5 38%, #dce9f2 100%);
}
.hp-hero-wash {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background:
        linear-gradient(105deg, rgba(20,32,51,.06) 0%, transparent 42%),
        linear-gradient(0deg, rgba(223,234,243,.85) 0%, transparent 28%);
}
.hp-hero-grain {
    position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .35;
    background-image: radial-gradient(rgba(15,111,158,.18) 1px, transparent 1px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(ellipse 75% 70% at 40% 45%, #000 20%, transparent 72%);
            mask-image: radial-gradient(ellipse 75% 70% at 40% 45%, #000 20%, transparent 72%);
}

.hp-hero-blob {
    position: absolute; border-radius: 50%;
    opacity: .55; pointer-events: none; z-index: 0;
    animation: hpFloat 14s ease-in-out infinite;
}
.hp-hero-blob.b1 {
    width: 380px; height: 380px; top: -120px; left: -80px;
    background: radial-gradient(circle, rgba(41,171,226,.45), transparent 70%);
}
.hp-hero-blob.b2 {
    width: 420px; height: 420px; bottom: -160px; right: -100px;
    background: radial-gradient(circle, rgba(245,158,11,.32), transparent 70%);
    animation-delay: -4s;
}
@keyframes hpFloat {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50%      { transform: translate3d(0, -22px, 0) scale(1.05); }
}

/* Dominant cup — centered under the signup CTA */
.hp-hero-art {
    position: relative; z-index: 1;
    width: min(72vw, 340px); max-width: 340px;
    margin: 1.75rem auto 0;
    opacity: 1;
    animation: hpArtDrift 12s ease-in-out infinite;
}
.hp-hero-art svg {
    display: block; width: 100%; height: auto;
    filter: drop-shadow(0 28px 60px rgba(20,32,51,.18));
}
.hp-steam path {
    animation: hpSteam 3.4s ease-in-out infinite;
}
.hp-steam path:nth-child(2) { animation-delay: -1.1s; }
.hp-steam path:nth-child(3) { animation-delay: -2.2s; }
@keyframes hpSteam {
    0%, 100% { opacity: .2; }
    50%      { opacity: .55; }
}
@keyframes hpArtDrift {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}

.hp-hero-inner {
    position: relative; z-index: 2;
    width: 100%; max-width: 720px; margin: 0 auto;
    display: flex; flex-direction: column; align-items: center;
    text-align: center;
}
.hp-hero-copy {
    max-width: 560px; width: 100%;
    text-align: center;
}

.hp-brand {
    margin: 0 0 .85rem;
    font-size: clamp(2.6rem, 7vw, 4.4rem);
    font-weight: 900; line-height: 1; letter-spacing: -.03em;
    color: var(--hp-brand-dp);
    text-shadow: 0 2px 0 rgba(255,255,255,.35);
}

.hp-title {
    font-size: clamp(1.65rem, 3.4vw, 2.55rem);
    font-weight: 900; line-height: 1.35; letter-spacing: -.015em;
    margin: 0 0 1rem;
    color: var(--hp-text);
}
.hp-title-grad {
    background: linear-gradient(100deg, var(--hp-brand-dk) 0%, var(--hp-coffee) 55%, var(--hp-amber-dk) 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hp-subtitle {
    font-size: clamp(.95rem, 1.5vw, 1.08rem);
    line-height: 1.95; color: var(--hp-text-2);
    margin: 0 0 1.6rem; max-width: 34em;
}
.hp-rotator-word {
    display: inline-block; font-weight: 800; color: var(--hp-brand-dp);
    transition: opacity .35s ease, transform .35s ease;
}
.hp-rotator-word.is-cycling { opacity: 0; transform: translate3d(0, 6px, 0); }

/* CTA row — light bar, not a heavy glass card */
.hp-signup-card {
    position: relative;
    max-width: 520px;
    margin-inline: auto;
}
.hp-signup-form { margin: 0; }
.hp-signup-label {
    display: block; text-align: center;
    font-size: .82rem; font-weight: 800; color: var(--hp-text-2);
    margin: 0 0 .55rem;
}

.hp-signup-row {
    position: relative; display: flex; align-items: center; gap: .45rem;
    background: rgba(255,255,255,.92);
    border: 1.5px solid rgba(41,171,226,.35);
    border-radius: 14px;
    padding: .55rem .55rem .55rem .95rem;
    box-shadow: var(--hp-sh-md);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s var(--hp-ease-out);
}
.hp-signup-row:focus-within {
    border-color: var(--hp-brand);
    box-shadow: 0 0 0 4px rgba(41,171,226,.18), var(--hp-sh-lg);
    transform: translateY(-1px);
}
.hp-signup-prefix {
    color: var(--hp-muted); font-weight: 700; white-space: nowrap;
    direction: ltr; font-size: .9rem;
}
.hp-signup-row input {
    border: none; flex: 1; min-width: 0; background: transparent;
    font-weight: 700; direction: ltr; text-align: left;
    font-size: 1rem; color: var(--hp-text); outline: none;
}
.hp-signup-row input::placeholder { color: #9aadc2; font-weight: 500; }

.hp-signup-submit {
    border: none; border-radius: 11px; padding: .65rem 1.35rem;
    background: var(--hp-grad-brand); color: #fff;
    font-weight: 800; cursor: pointer; white-space: nowrap;
    box-shadow: var(--hp-sh-brand);
    transition: transform .2s var(--hp-ease-out), box-shadow .2s ease, filter .2s ease;
}
.hp-signup-submit:hover {
    transform: translate3d(0, -2px, 0);
    filter: brightness(1.05);
    box-shadow: 0 14px 32px rgba(41,171,226,.4);
}
#ValidationDiv { font-size: .8rem; font-weight: 600; display: block; margin-top: .5rem; text-align: center; }

.hp-signup-check {
    flex-shrink: 0; width: 20px; height: 20px;
    display: none; align-items: center; justify-content: center; font-size: .9rem;
}
.hp-signup-check.is-checking  { display: flex; color: var(--hp-muted); }
.hp-signup-check.is-checking i { animation: hpSpin .7s linear infinite; }
.hp-signup-check.is-available { display: flex; color: #16A34A; }
.hp-signup-check.is-taken     { display: flex; color: #DC2626; }
@keyframes hpSpin { to { transform: rotate(360deg); } }

.hp-signup-preview {
    display: flex; align-items: center; justify-content: center; gap: .35rem; margin-top: .55rem;
    font-size: .8rem; color: var(--hp-muted); text-align: center;
}
.hp-signup-preview strong { color: var(--hp-brand-dp); direction: ltr; unicode-bidi: embed; }

.hp-scrolldown {
    position: absolute; z-index: 3;
    bottom: 1.4rem; left: 50%; transform: translateX(-50%);
    display: inline-flex; color: var(--hp-brand-dp);
    font-size: 1.25rem; text-decoration: none;
    animation: hpBounce 2s ease-in-out infinite;
}
.hp-scrolldown:hover { color: var(--hp-brand-dk); }
@keyframes hpBounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(8px); }
}

@media (max-width: 991px) {
    .hp-hero {
        min-height: auto;
        padding-top: clamp(3.5rem, 10vw, 5rem);
        padding-bottom: 4rem;
    }
    .hp-hero-art {
        width: min(58vw, 260px);
        margin-top: 1.4rem;
    }
    .hp-hero-copy { max-width: 100%; }
}
@media (max-width: 576px) {
    .hp-hero-art { width: min(70vw, 220px); }
    .hp-signup-row {
        flex-wrap: wrap; padding: .65rem;
        gap: .5rem;
    }
    .hp-signup-row input { flex: 1 1 100%; order: 2; padding: .2rem .35rem; }
    .hp-signup-prefix { order: 1; }
    .hp-signup-check { order: 3; }
    .hp-signup-submit { order: 4; width: 100%; }
}

/* ═══════════════════════════════════════
   STATS BAND (count-up)
   ═══════════════════════════════════════ */
.hp-stats {
    position: relative; overflow: hidden;
    /* Extra bottom padding clears the inset wave divider so it can never
       overlap the counter tiles. */
    padding: 3.5rem 0 clamp(5rem, 8vw, 7.5rem);
    background: linear-gradient(135deg, var(--hp-brand-dp) 0%, var(--hp-brand-dk) 45%, #1e6f96 100%);
}
.hp-stats::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(700px 300px at 15% 0%, rgba(255,255,255,.16), transparent 60%),
                radial-gradient(600px 320px at 85% 100%, rgba(245,158,11,.22), transparent 60%);
}
.hp-stats-grid {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
    max-width: 1000px; margin: 0 auto; list-style: none; padding: 0;
}
.hp-stat {
    text-align: center; padding: 1.2rem .8rem; border-radius: var(--hp-r-lg);
    background: rgba(255,255,255,.09);
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.16);
    transition: transform .3s var(--hp-ease-out), background .3s ease, border-color .3s ease;
}
.hp-stat:hover { transform: translate3d(0, -6px, 0); background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.3); }
.hp-stat-ico {
    font-size: 1.5rem; display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; border-radius: 15px; margin-bottom: .6rem;
    background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.22);
    transition: transform .3s var(--hp-ease-spring);
}
.hp-stat:hover .hp-stat-ico { transform: scale(1.12) rotate(-7deg); }
.hp-stat-num {
    display: block; font-size: clamp(1.6rem, 3.4vw, 2.5rem); font-weight: 900;
    color: #fff; line-height: 1.2; letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}
.hp-stat-num .hp-stat-suffix { font-size: .6em; margin-right: .1em; opacity: .9; }
.hp-stat-label { display: block; font-size: .82rem; font-weight: 700; color: rgba(255,255,255,.82); margin-top: .35rem; }
@media (max-width: 768px) { .hp-stats-grid { grid-template-columns: repeat(2, 1fr); } }

/* ═══════════════════════════════════════
   TESTIMONIALS — graphical board + tilted tweet cards
   Desktop shows all three at once; below 768px = swipe slider.
   ═══════════════════════════════════════ */
.hp-says { position: relative; overflow: hidden; padding: 4.2rem 0 3.2rem; }
.hp-says .container { position: relative; z-index: 2; }
.hp-says-blob {
    position: absolute; border-radius: 50%; filter: blur(60px); pointer-events: none; z-index: 0; opacity: .55;
}
.hp-says-blob.b1 { width: 340px; height: 340px; top: -80px; right: -60px; background: rgba(41,171,226,.35); }
.hp-says-blob.b2 { width: 300px; height: 300px; bottom: -100px; left: -40px; background: rgba(245,158,11,.22); }
.hp-says-quote {
    position: absolute; z-index: 0; top: 12%; left: 6%;
    font-size: clamp(5rem, 14vw, 9rem); line-height: 1; font-family: Georgia, serif;
    color: rgba(41,171,226,.12); pointer-events: none; transform: rotate(-8deg);
}
.hp-says-cup {
    position: absolute; z-index: 0; bottom: 14%; right: 7%;
    font-size: 2.4rem; opacity: .22; pointer-events: none;
    animation: hpSaysFloat 6s ease-in-out infinite;
}
@keyframes hpSaysFloat {
    0%, 100% { transform: translateY(0) rotate(-6deg); }
    50% { transform: translateY(-14px) rotate(6deg); }
}
.hp-says-brand {
    margin: 0 0 .35rem;
    font-size: clamp(1.6rem, 3.5vw, 2.1rem);
    font-weight: 900; letter-spacing: -.02em; line-height: 1;
    color: var(--hp-brand-dp);
}

.hp-tslider { display: flex; align-items: center; gap: 1rem; max-width: 1120px; margin: 0 auto 1.25rem; }
.hp-tslider-viewport { flex: 1; min-width: 0; padding: 1.1rem 0.4rem 1.6rem; }
.hp-tslider-track { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.35rem; transform: none; transition: none; }
.hp-tslide { min-width: 0; padding: .55rem .2rem; }

/* Cards fly in from the side as the section scrolls into view */
.hp-tslider-track.hp-reveal-stagger > .hp-tslide {
    opacity: 0; transform: translate3d(-46px, 0, 0);
    transition: opacity .6s ease, transform .6s var(--hp-ease-out);
    transition-delay: calc(var(--i, 0) * .12s);
}
.hp-tslider-track.hp-reveal-stagger.is-visible > .hp-tslide { opacity: 1; transform: none; }

.hp-tarrow {
    flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%;
    background: #fff; border: 1.5px solid var(--hp-border); color: var(--hp-muted);
    display: none; align-items: center; justify-content: center; cursor: pointer;
    box-shadow: var(--hp-sh-sm);
    transition: transform .2s var(--hp-ease-out), background .2s ease, color .2s ease, border-color .2s ease;
}
.hp-tarrow:hover { background: var(--hp-brand); border-color: var(--hp-brand); color: #fff; transform: scale(1.12); }
.hp-tdots { display: none; justify-content: center; gap: .5rem; margin-bottom: 1rem; }
.hp-tdot { width: 8px; height: 8px; border-radius: 50%; background: var(--hp-border-2); border: none; cursor: pointer; padding: 0; transition: background .25s ease, width .25s ease; }
.hp-tdot.active { background: var(--hp-brand); width: 24px; border-radius: 5px; }

/* X/Twitter-style testimonial card — tilted like pinned notes */
.hp-tcard {
    position: relative; height: 100%; display: flex; flex-direction: column;
    background:
        radial-gradient(circle at 12% 0%, rgba(41,171,226,.08), transparent 45%),
        linear-gradient(165deg, #fff, #f7fbff);
    border: 1px solid var(--hp-border); border-radius: 18px;
    padding: 1.25rem 1.35rem; box-shadow: var(--hp-sh-md); text-align: right;
    transform: rotate(var(--tilt, 0deg));
    transform-origin: 50% 10%;
    transition: transform .35s var(--hp-ease-out), box-shadow .35s ease, border-color .35s ease;
}
.hp-tslide:nth-child(1) .hp-tcard { --tilt: -2.8deg; }
.hp-tslide:nth-child(2) .hp-tcard { --tilt: 1.6deg; }
.hp-tslide:nth-child(3) .hp-tcard { --tilt: -1.4deg; }
.hp-tcard::before {
    content: "";
    position: absolute; top: -7px; left: 50%; width: 42px; height: 14px;
    margin-left: -21px; border-radius: 2px;
    background: linear-gradient(180deg, rgba(41,171,226,.45), rgba(41,171,226,.22));
    transform: rotate(-4deg); opacity: .75;
    box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
.hp-tcard:hover {
    transform: rotate(0deg) translate3d(0, -8px, 0) scale(1.02);
    box-shadow: var(--hp-sh-xl);
    border-color: rgba(41,171,226,.4);
    z-index: 2;
}
.hp-tcard-head { display: flex; align-items: flex-start; gap: .6rem; }
.hp-tcard-av { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; box-shadow: 0 2px 8px rgba(20,32,51,.12); }
.hp-tcard-idn { min-width: 0; flex: 1; line-height: 1.3; }
.hp-tcard-name { display: flex; align-items: center; gap: .2rem; font-weight: 800; font-size: .92rem; color: var(--hp-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-tx-verified { width: 16px; height: 16px; flex-shrink: 0; fill: #1d9bf0; }
.hp-tcard-handle { font-size: .82rem; color: #536471; direction: ltr; text-align: right; }
.hp-tx-logo { width: 19px; height: 19px; flex-shrink: 0; fill: var(--hp-text); opacity: .9; }
.hp-tcard-msg { font-size: .98rem; line-height: 1.75; color: var(--hp-text); text-align: right; margin-top: .7rem; word-break: break-word; }
.hp-tcard-msg .faux-link { color: #1d9bf0; font-weight: 500; }
.hp-tcard-time { font-size: .8rem; color: #536471; direction: ltr; text-align: right; margin-top: .8rem; }
.hp-tcard-actions { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .7rem; padding-top: .7rem; border-top: 1px solid var(--hp-border); max-width: 290px; }
.hp-tcard-act { display: inline-flex; align-items: center; color: #536471; transition: color .2s; }
.hp-tcard-act svg { width: 18px; height: 18px; fill: currentColor; }
.hp-tcard-act:hover { color: #1d9bf0; }
.hp-tcard-act.rt:hover { color: #00ba7c; }
.hp-tcard-act.like:hover { color: #f91880; }

@media (max-width: 768px) {
    .hp-tslider-track { display: flex; grid-template-columns: none; gap: 0; transition: transform .55s var(--hp-ease-out); }
    .hp-tslider-viewport { overflow: hidden; border-radius: var(--hp-r-xl); padding: .8rem 0 1.2rem; }
    .hp-tslide { flex: 0 0 100%; }
    .hp-tslide .hp-tcard { --tilt: -1.2deg !important; }
    .hp-tarrow, .hp-tdots { display: flex; }
    .hp-tslider-track.hp-reveal-stagger > .hp-tslide { opacity: 1; transform: none; }
    .hp-says-quote { opacity: .5; left: 2%; }
}
@media (max-width: 560px) {
    .hp-tslider { gap: .5rem; }
    .hp-tarrow { width: 34px; height: 34px; }
    .hp-tcard { padding: 1.05rem 1.1rem; }
}
@media (prefers-reduced-motion: reduce) {
    .hp-says-cup { animation: none; }
    .hp-tslide .hp-tcard { --tilt: 0deg !important; }
    .hp-tcard:hover { transform: none; }
}

/* ═══════════════════════════════════════
   "WHAT IS A DONATE" / HOW IT WORKS
   ═══════════════════════════════════════ */
.hp-how {
    position: relative; overflow: hidden;
    max-width: 940px; margin: 0 auto;
    background: linear-gradient(160deg, #ffffff 0%, var(--hp-amber-lt) 100%);
    border: 1px solid var(--hp-border); border-radius: var(--hp-r-2xl);
    padding: 2.6rem 2rem; box-shadow: var(--hp-sh-md);
}
.hp-how-head { display: flex; align-items: center; gap: 1.1rem; margin-bottom: 1.4rem; flex-wrap: wrap; justify-content: center; text-align: center; }
.hp-how-cup { font-size: 3.2rem; position: relative; animation: hpCupWobble 3.2s ease-in-out infinite; }
@keyframes hpCupWobble {
    0%, 100% { transform: rotate(0deg); }
    50%      { transform: rotate(-7deg); }
}
.hp-how-steam span { position: absolute; font-size: 1rem; opacity: 0; top: -6px; animation: hpSteam 2.8s ease-in infinite; }
.hp-how-steam span:nth-child(1) { left: -8px; animation-delay: 0s; }
.hp-how-steam span:nth-child(2) { left: 6px;  animation-delay: .65s; }
.hp-how-steam span:nth-child(3) { left: 18px; animation-delay: 1.3s; }
@keyframes hpSteam {
    0%   { opacity: 0; transform: translate3d(0, 0, 0) scale(.6); }
    30%  { opacity: .8; }
    100% { opacity: 0; transform: translate3d(0, -28px, 0) scale(1.1); }
}
.hp-how-coin { position: absolute; font-size: 1rem; opacity: 0; pointer-events: none; animation: hpCoinRise 3.8s ease-in infinite; }
.hp-how-coin.k1 { right: -14px; top: 6px;  animation-delay: .2s; }
.hp-how-coin.k2 { right: 2px;   top: -4px; font-size: .85rem; animation-delay: 1.7s; }
.hp-how-coin.k3 { right: -22px; top: -8px; font-size: .8rem;  animation-delay: 3s; }
@keyframes hpCoinRise {
    0%   { opacity: 0; transform: translate3d(0, 6px, 0) scale(.5); }
    25%  { opacity: 1; }
    100% { opacity: 0; transform: translate3d(0, -32px, 0) scale(1.05); }
}
.hp-how-desc { font-size: .92rem; line-height: 2; color: var(--hp-muted); text-align: justify; margin-bottom: 1.8rem; }

.hp-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; position: relative; }
@media (max-width: 900px) { .hp-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .hp-steps { grid-template-columns: 1fr; } }
.hp-step {
    background: #fff; border: 1.5px solid var(--hp-border); border-radius: var(--hp-r-md);
    padding: 1.5rem 1rem 1.2rem; text-align: center; position: relative;
    transition: transform .25s var(--hp-ease-out), box-shadow .25s ease, border-color .25s ease;
}
.hp-step:hover { transform: translate3d(0, -6px, 0); box-shadow: var(--hp-sh-md); border-color: var(--hp-brand); }
/* RTL flow, so the connector arrow points left */
.hp-steps > .hp-step:not(:last-child)::after {
    content: '‹'; position: absolute; left: -1.15rem; top: 2.6rem;
    font-size: 1.5rem; font-weight: 900; color: var(--hp-brand); opacity: .5;
    line-height: 1; pointer-events: none;
}
@media (max-width: 900px) { .hp-steps > .hp-step:not(:last-child)::after { display: none; } }
.hp-step-icon {
    display: flex; align-items: center; justify-content: center;
    width: 54px; height: 54px; margin: 0 auto .7rem; border-radius: 50%;
    font-size: 1.5rem; transition: transform .3s var(--hp-ease-spring);
}
.hp-step:hover .hp-step-icon { transform: scale(1.14) rotate(-6deg); }
.hp-step-num {
    width: 27px; height: 27px; border-radius: 50%; margin: 0 auto .6rem;
    background: var(--hp-grad-brand); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: .78rem; box-shadow: 0 4px 10px rgba(41,171,226,.35);
}
.hp-step p { font-size: .83rem; color: var(--hp-muted); margin: 0; line-height: 1.8; }
.hp-step a { color: var(--hp-brand-dp); font-weight: 700; }

/* ═══════════════════════════════════════
   MEMBERSHIP CTA
   ═══════════════════════════════════════ */
.hp-cta { position: relative; overflow: hidden; padding: 5rem 0; text-align: center; }
.hp-cta-blob { position: absolute; border-radius: 50%; opacity: .45; pointer-events: none; z-index: 0; animation: hpFloat 10s ease-in-out infinite; }
.hp-cta-blob.c1 { width: 240px; height: 240px; top: -80px; left: -60px; background: radial-gradient(circle, rgba(245,158,11,.4), transparent 70%); }
.hp-cta-blob.c2 { width: 280px; height: 280px; bottom: -110px; right: -80px; background: radial-gradient(circle, rgba(41,171,226,.4), transparent 70%); animation-delay: -4s; }
.hp-cta .container { position: relative; z-index: 1; }

.hp-cta-card {
    display: grid; grid-template-columns: 1.05fr .95fr; gap: 2.75rem; align-items: center;
    background: var(--hp-glass-bg);
    -webkit-backdrop-filter: var(--hp-glass-blur);
            backdrop-filter: var(--hp-glass-blur);
    border: 1px solid var(--hp-glass-brd); border-radius: var(--hp-r-2xl);
    box-shadow: var(--hp-sh-xl); padding: 3rem; text-align: right;
}
.hp-cta-content .hp-eyebrow { margin-bottom: .8rem; }
.hp-cta-content .section-title { text-align: right; }
.hp-cta-content .section-subtitle { text-align: right; margin-inline: 0; margin-bottom: 0; }
.hp-cta-benefits { list-style: none; padding: 0; margin: 1.5rem 0 1.9rem; display: grid; gap: .75rem; }
.hp-cta-benefits li { display: flex; align-items: center; gap: .6rem; font-size: .92rem; font-weight: 600; color: var(--hp-text-2); }
.hp-cta-benefits i {
    width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: .7rem; color: #fff; background: var(--hp-grad-brand);
}
.hp-cta-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.hp-cta-btn {
    position: relative; overflow: hidden;
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .9rem 1.8rem; border-radius: 50px;
    background: var(--hp-grad-brand); color: #fff; font-weight: 800; font-size: .95rem;
    box-shadow: var(--hp-sh-brand);
    transition: transform .2s var(--hp-ease-out), box-shadow .2s ease;
}
.hp-cta-btn:hover { transform: translate3d(0, -3px, 0); box-shadow: 0 16px 38px rgba(41,171,226,.45); color: #fff; text-decoration: none; }
.hp-cta-btn::after {
    content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,.45), transparent);
    transform: skewX(-20deg); transition: left .55s ease;
}
.hp-cta-btn:hover::after { left: 130%; }
.hp-cta-note { font-size: .8rem; color: var(--hp-muted); font-weight: 600; }

.hp-cta-visual { position: relative; }
.hp-cta-imgwrap {
    position: relative; border-radius: var(--hp-r-xl); overflow: hidden;
    box-shadow: var(--hp-sh-lg);
    background: linear-gradient(135deg, var(--hp-brand-lt), #fff8ea);
}
/* Reserving the aspect ratio up front means the image can't shift the
   layout when it finally decodes (no CLS from the lazy load). */
.hp-cta-imgwrap img { display: block; width: 100%; height: auto; aspect-ratio: 1366 / 768; object-fit: cover; transition: transform .45s var(--hp-ease-out); }
.hp-cta-imgwrap:hover img { transform: scale(1.05); }
.hp-cta-badge {
    position: absolute; z-index: 2;
    background: #fff; border-radius: var(--hp-r-md); padding: .6rem .9rem;
    font-size: .82rem; font-weight: 800; color: var(--hp-text);
    box-shadow: var(--hp-sh-lg); animation: hpFloat 6s ease-in-out infinite;
}
.hp-cta-badge.b1 { top: 16px; left: -16px; }
.hp-cta-badge.b2 { bottom: 22px; right: -16px; animation-delay: -3s; }

@media (max-width: 860px) {
    .hp-cta-card { grid-template-columns: 1fr; gap: 1.9rem; padding: 1.9rem; text-align: center; }
    .hp-cta-content .section-title, .hp-cta-content .section-subtitle { text-align: center; }
    .hp-cta-benefits { justify-items: start; max-width: 340px; margin-inline: auto; }
    .hp-cta-actions { justify-content: center; }
    .hp-cta-visual { order: -1; }
}

/* ═══════════════════════════════════════
   FEATURES
   ═══════════════════════════════════════ */
.hp-features { position: relative; padding: 5.5rem 0; }
.hp-features-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(265px, 1fr)); gap: 1.1rem;
    max-width: 1100px; margin: 0 auto; list-style: none; padding: 0;
}
.hp-feature-card {
    position: relative; overflow: hidden;
    display: flex; gap: .95rem; align-items: flex-start; text-align: right; height: 100%;
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(41,171,226,.18);
    border-radius: var(--hp-r-lg);
    padding: 1.25rem; text-decoration: none; color: inherit;
    box-shadow: none;
    transition: transform .28s var(--hp-ease-out), border-color .28s ease, background .28s ease;
}
/* Accent bar that wipes in from the right edge on hover */
.hp-feature-card::before {
    content: ''; position: absolute; top: 0; right: 0; left: 0; height: 3px;
    background: linear-gradient(90deg, var(--hp-brand), var(--hp-amber));
    transform: scaleX(0); transform-origin: right;
    transition: transform .35s var(--hp-ease-out);
}
/* Soft colour wash that fades up behind the content on hover. Kept on a
   pseudo-element and driven by opacity so the card body never repaints. */
.hp-feature-card::after {
    content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: linear-gradient(150deg, rgba(41,171,226,.08), rgba(245,158,11,.07));
    opacity: 0; transition: opacity .35s ease;
}
.hp-feature-card:hover::after { opacity: 1; }
.hp-feature-card > * { position: relative; z-index: 1; }
.hp-feature-card:hover {
    transform: translate3d(0, -4px, 0);
    border-color: rgba(41,171,226,.4);
    background: rgba(255,255,255,.92);
    text-decoration: none; color: inherit;
}
.hp-feature-card:hover::before { transform: scaleX(1); }
.hp-feature-icon {
    flex-shrink: 0; width: 3rem; height: 3rem; border-radius: 14px;
    display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
    transition: transform .3s var(--hp-ease-spring);
}
.hp-feature-card:hover .hp-feature-icon { transform: scale(1.08); }
.hp-feature-title { display: block; font-weight: 800; font-size: .94rem; color: var(--hp-text); margin-bottom: .25rem; }
.hp-feature-desc { font-size: .81rem; color: var(--hp-muted); line-height: 1.8; }

/* ═══════════════════════════════════════
   PERSONA / AUDIENCE
   ═══════════════════════════════════════ */
.hp-persona { position: relative; padding: 5.5rem 0 6rem; }

/* ── Animated audience tag cloud ──
   At least 12 pills that swap labels every few seconds (initAudienceTags in
   homepage-v2.js). Gentle idle float keeps them alive between swaps. */
.hp-audience-tags {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: .65rem .7rem; max-width: 820px; margin: 2.4rem auto 0;
}
.hp-atag {
    display: inline-flex; align-items: center;
    padding: .5rem 1.15rem; border-radius: 50px;
    font-weight: 800; font-size: .88rem; white-space: nowrap; text-decoration: none;
    color: var(--hp-brand-dk, #1a8abf);
    background: var(--hp-brand-lt, #e8f6fc);
    border: 1.5px solid var(--hp-brand-brd, #bae6fd);
    box-shadow: 0 4px 12px rgba(41, 171, 226, .1);
    animation: hpAtagFloat 5.5s ease-in-out infinite;
    transition: color .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease, opacity .32s ease, filter .32s ease, transform .32s ease;
}
.hp-atag:nth-child(3n) { animation-delay: -1.6s }
.hp-atag:nth-child(3n+1) { animation-delay: -3.2s }
.hp-atag:hover { color: #fff; background: var(--hp-brand, #29ABE2); border-color: var(--hp-brand, #29ABE2); text-decoration: none; transform: translateY(-2px); box-shadow: 0 8px 18px rgba(41, 171, 226, .3) }
.hp-atag.swapping { opacity: 0; filter: blur(4px); transform: scale(.9) }
@keyframes hpAtagFloat { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-7px) } }
@media (prefers-reduced-motion: reduce) { .hp-atag { animation: none } }
@media (max-width: 640px) { .hp-atag { font-size: .78rem; padding: .42rem .9rem } }

/* ── Persona grid — "who is Coffeete for" ──
   Ten illustrated orbs instead of a paragraph. Per-tile gradient and animation
   phase come from inline custom properties (--pt-c1/--pt-c2/--pt-i), so this one
   rule set covers every tile. */
.hp-persona-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1.5rem 1rem;
    max-width: 940px;
    margin: 3rem auto 1rem;
}

.hp-persona-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .7rem;
    text-decoration: none;
    color: inherit;
    /* `translate`, not `transform`: the orb's idle float owns transform, and a
       filled entrance animation on transform would freeze it. */
    opacity: 0;
    animation: hpPersonaIn .55s cubic-bezier(.22, 1, .36, 1) both;
    animation-delay: calc(var(--pt-i, 0) * 70ms);
}

@keyframes hpPersonaIn {
    from { opacity: 0; translate: 0 26px; scale: .9 }
    to   { opacity: 1; translate: none; scale: 1 }
}

.hp-persona-orb {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    border-radius: 34% 66% 60% 40% / 46% 38% 62% 54%;
    background: linear-gradient(145deg, var(--pt-c2, #38BDF8), var(--pt-c1, #2563EB));
    box-shadow:
        0 14px 30px color-mix(in srgb, var(--pt-c1, #2563EB) 38%, transparent),
        inset 0 -6px 14px rgba(0, 0, 0, .14),
        inset 0 6px 14px rgba(255, 255, 255, .3);
    /* Organic blob that morphs and bobs, each tile offset so the grid never
       pulses in unison. */
    animation: hpPersonaFloat 7s ease-in-out infinite, hpPersonaMorph 12s ease-in-out infinite;
    animation-delay: calc(var(--pt-i, 0) * -0.9s), calc(var(--pt-i, 0) * -1.4s);
    transition: box-shadow .3s ease;
}

@keyframes hpPersonaFloat {
    0%, 100% { transform: translateY(0) rotate(-2deg) }
    50%      { transform: translateY(-12px) rotate(2deg) }
}

@keyframes hpPersonaMorph {
    0%, 100% { border-radius: 34% 66% 60% 40% / 46% 38% 62% 54% }
    50%      { border-radius: 62% 38% 42% 58% / 58% 56% 44% 42% }
}

.hp-persona-emoji {
    font-size: 2.5rem;
    line-height: 1;
    filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .28));
    /* Counter-rotates against the orb so the icon stays upright while it bobs. */
    animation: hpPersonaCounter 7s ease-in-out infinite;
    animation-delay: calc(var(--pt-i, 0) * -0.9s);
}

@keyframes hpPersonaCounter {
    0%, 100% { transform: rotate(2deg) }
    50%      { transform: rotate(-2deg) }
}

.hp-persona-label {
    font-size: .88rem;
    font-weight: 800;
    color: var(--hp-ink, #1E293B);
    transition: color .25s ease;
}

.hp-persona-tile:hover { text-decoration: none; color: inherit }
.hp-persona-tile:hover .hp-persona-orb {
    box-shadow:
        0 22px 44px color-mix(in srgb, var(--pt-c1, #2563EB) 55%, transparent),
        inset 0 -6px 14px rgba(0, 0, 0, .14),
        inset 0 6px 14px rgba(255, 255, 255, .35);
}
.hp-persona-tile:hover .hp-persona-label { color: var(--pt-c1, #2563EB) }

@media (max-width: 600px) {
    .hp-persona-grid { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 1.15rem .6rem }
    .hp-persona-orb { width: 74px; height: 74px }
    .hp-persona-emoji { font-size: 1.9rem }
    .hp-persona-label { font-size: .76rem }
}

@media (prefers-reduced-motion: reduce) {
    /* Tiles start at opacity:0 for the entrance — keep them visible. */
    .hp-persona-tile { animation: none; opacity: 1 }
    .hp-persona-orb, .hp-persona-emoji { animation: none }
}
.hp-tweet-scene { position: relative; max-width: 620px; margin: 3.5rem auto 1rem; min-height: 400px; }
.hp-tweet-card {
    position: relative; z-index: 3;
    background: var(--hp-card); border: 1px solid var(--hp-border); border-radius: var(--hp-r-xl);
    box-shadow: var(--hp-sh-lg); padding: 1.7rem 1.7rem 1.4rem; text-align: right;
}
.hp-tweet-head { display: flex; align-items: center; gap: .7rem; margin-bottom: .9rem; }
.hp-tweet-head img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.hp-tweet-name { font-weight: 800; font-size: .92rem; color: var(--hp-text); }
.hp-tweet-name i { color: var(--hp-brand); font-size: .78rem; margin-right: .3rem; }
.hp-tweet-time { display: block; font-size: .72rem; color: var(--hp-muted); margin-top: .1rem; }
.hp-tweet-msg { font-size: .93rem; line-height: 2.05; color: var(--hp-text-2); text-align: justify; margin: 0; }
.hp-tweet-msg strong { color: var(--hp-text); }

.hp-tweet-tag {
    position: absolute; z-index: 2;
    background: var(--hp-glass-bg);
    -webkit-backdrop-filter: var(--hp-glass-blur);
            backdrop-filter: var(--hp-glass-blur);
    border: 1px solid var(--hp-glass-brd); border-radius: 50px;
    padding: .55rem 1.25rem; font-weight: 800; font-size: .9rem; color: var(--hp-text);
    white-space: nowrap; text-decoration: none; box-shadow: var(--hp-sh-md);
    animation: hpTagFloat 5s ease-in-out infinite;
    transition: color .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.hp-tweet-tag:hover { color: #fff; background: var(--hp-brand); border-color: var(--hp-brand); text-decoration: none; box-shadow: var(--hp-sh-brand); }
@keyframes hpTagFloat {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(var(--rot, 0deg)); }
    50%      { transform: translate3d(0, -11px, 0) rotate(var(--rot, 0deg)); }
}
.hp-tweet-tag.swapping { opacity: 0; filter: blur(4px); transition: opacity .32s ease, filter .32s ease; }
.hp-tweet-tag.tag-a { top: -2.1rem;   right: 6%;      --rot: -4deg; animation-delay: 0s; }
.hp-tweet-tag.tag-b { top: 8%;        left: -1.6rem;  --rot: 5deg;  animation-delay: -1.25s; }
.hp-tweet-tag.tag-c { bottom: 10%;    right: -1.2rem; --rot: -3deg; animation-delay: -2.5s; }
.hp-tweet-tag.tag-d { bottom: -1.8rem; left: 9%;      --rot: 4deg;  animation-delay: -3.75s; }

@media (max-width: 640px) {
    .hp-tweet-scene { min-height: 480px; padding: 0 1rem; }
    .hp-tweet-tag { font-size: .78rem; padding: .42rem .95rem; }
    .hp-tweet-tag.tag-a { top: -1.6rem; right: 0; }
    .hp-tweet-tag.tag-b { top: -.4rem; left: -.4rem; }
    .hp-tweet-tag.tag-c { bottom: 1.8rem; right: -.4rem; }
    .hp-tweet-tag.tag-d { bottom: -1.6rem; left: 2%; }
}

/* ═══════════════════════════════════════
   DEVELOPERS & STREET MUSICIANS
   ═══════════════════════════════════════ */
.hp-duo { position: relative; overflow: hidden; padding: 5.5rem 0; }
.hp-duo-deco { position: absolute; opacity: .45; font-weight: 900; pointer-events: none; z-index: 0; animation: hpDuoFloat 8s ease-in-out infinite; }
.hp-duo-deco.n1 { top: 10%;    left: 8%;  font-size: 2.2rem; }
.hp-duo-deco.n2 { bottom: 16%; left: 14%; font-size: 1.6rem; animation-delay: -2.5s; }
.hp-duo-deco.n3 { top: 44%;    left: 4%;  font-size: 1.8rem; animation-delay: -5s; }
.hp-duo-deco.c1 { top: 14%;    right: 9%; font-size: 2rem;   font-family: monospace; color: var(--hp-brand); opacity: .2; animation-delay: -1.5s; }
.hp-duo-deco.c2 { bottom: 20%; right: 6%; font-size: 1.8rem; font-family: monospace; color: var(--hp-brand); opacity: .2; animation-delay: -4s; }
.hp-duo-deco.c3 { top: 50%;    right: 16%; font-size: 1.5rem; font-family: monospace; color: var(--hp-amber); opacity: .26; animation-delay: -6.2s; }
@keyframes hpDuoFloat {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
    50%      { transform: translate3d(0, -18px, 0) rotate(7deg); }
}
@media (max-width: 768px) { .hp-duo-deco { display: none; } }

.hp-duo-eyebrow { background: linear-gradient(135deg, var(--hp-brand-lt), rgba(255,255,255,.6)); color: var(--hp-brand-dp); }
.hp-duo-title {
    background: linear-gradient(95deg, var(--hp-brand-dk) 0%, var(--hp-coffee) 55%, var(--hp-amber) 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hp-duo-grid { display: flex; align-items: center; justify-content: center; gap: 1.6rem; max-width: 920px; margin: 0 auto 2.6rem; flex-wrap: wrap; }
.hp-duo-vs {
    flex-shrink: 0; width: 50px; height: 50px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #fff; border: 1.5px solid var(--hp-border);
    color: var(--hp-coffee); font-weight: 800; font-size: .9rem;
    box-shadow: var(--hp-sh-sm);
}
.hp-duo-card {
    position: relative; overflow: hidden;
    flex: 1 1 300px; max-width: 350px; text-align: center;
    background: var(--hp-card); border: 1px solid var(--hp-border); border-radius: var(--hp-r-2xl);
    padding: 2.5rem 1.7rem 1.9rem; box-shadow: var(--hp-sh-md);
    transition: transform .3s var(--hp-ease-out), border-color .3s ease, box-shadow .3s ease;
}
.hp-duo-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; }
.hp-duo-dev::before      { background: linear-gradient(90deg, var(--hp-brand), #38bdf8); }
.hp-duo-musician::before { background: var(--hp-grad-amber); }
.hp-duo-card:hover { transform: translate3d(0, -9px, 0); box-shadow: var(--hp-sh-xl); }
.hp-duo-dev:hover      { border-color: rgba(41,171,226,.4); }
.hp-duo-musician:hover { border-color: rgba(245,158,11,.4); }
.hp-duo-card h3 { color: var(--hp-text); font-weight: 800; font-size: 1.05rem; margin: .4rem 0 .6rem; }
.hp-duo-card p  { color: var(--hp-muted); font-size: .86rem; line-height: 1.9; margin: 0; }

.hp-duo-illustration { position: relative; height: 92px; display: flex; align-items: center; justify-content: center; margin-bottom: .6rem; }
.hp-duo-emoji { font-size: 3rem; filter: drop-shadow(0 8px 18px rgba(0,0,0,.22)); animation: hpDuoBob 3.2s ease-in-out infinite; }
@keyframes hpDuoBob {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
    50%      { transform: translate3d(0, -9px, 0) rotate(-5deg); }
}
.hp-duo-musician .hp-duo-emoji { animation-delay: -1.6s; }

.hp-duo-mock-code { position: absolute; bottom: -6px; right: calc(50% - 62px); width: 78px; display: flex; flex-direction: column; gap: 4px; opacity: .55; }
.hp-duo-mock-code span { height: 4px; border-radius: 2px; background: linear-gradient(90deg, #7dd3fc, #38bdf8); animation: hpDuoType 2.8s ease-in-out infinite; }
.hp-duo-mock-code span:nth-child(1) { width: 100%; animation-delay: 0s; }
.hp-duo-mock-code span:nth-child(2) { width: 70%;  animation-delay: .3s; }
.hp-duo-mock-code span:nth-child(3) { width: 85%;  animation-delay: .6s; }
.hp-duo-mock-code span:nth-child(4) { width: 55%;  animation-delay: .9s; }
@keyframes hpDuoType {
    0%, 100% { opacity: .35; transform: scaleX(.9); }
    50%      { opacity: 1;   transform: scaleX(1); }
}

.hp-duo-mock-wave { position: absolute; bottom: -2px; right: calc(50% - 46px); width: 92px; display: flex; align-items: flex-end; justify-content: center; gap: 5px; height: 26px; opacity: .6; }
.hp-duo-mock-wave span { width: 5px; border-radius: 3px; background: linear-gradient(180deg, var(--hp-amber), #F97316); animation: hpDuoWave 1.15s ease-in-out infinite; }
.hp-duo-mock-wave span:nth-child(1) { height: 40%;  animation-delay: 0s; }
.hp-duo-mock-wave span:nth-child(2) { height: 80%;  animation-delay: .12s; }
.hp-duo-mock-wave span:nth-child(3) { height: 100%; animation-delay: .24s; }
.hp-duo-mock-wave span:nth-child(4) { height: 65%;  animation-delay: .36s; }
.hp-duo-mock-wave span:nth-child(5) { height: 45%;  animation-delay: .48s; }
@keyframes hpDuoWave {
    0%, 100% { transform: scaleY(.5); }
    50%      { transform: scaleY(1); }
}

.hp-duo-cta {
    position: relative; overflow: hidden;
    display: inline-flex; align-items: center; gap: .5rem;
    border: none; border-radius: 50px; padding: .9rem 2rem;
    background: var(--hp-grad-amber); color: #fff;
    font-weight: 800; font-size: .95rem; text-decoration: none;
    box-shadow: var(--hp-sh-amber);
    transition: transform .2s var(--hp-ease-out), box-shadow .2s ease;
}
.hp-duo-cta:hover { transform: translate3d(0, -3px, 0); box-shadow: 0 16px 38px rgba(245,158,11,.45); color: #fff; text-decoration: none; }
.hp-duo-cta::after {
    content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,.5), transparent);
    transform: skewX(-20deg); transition: left .55s ease;
}
.hp-duo-cta:hover::after { left: 130%; }

/* ═══════════════════════════════════════
   VIEW-COMPONENT OVERRIDES
   These classes are emitted by the view components under
   Views/Home/Components. Restyled here so the injected sections match
   the page rather than editing each component's own style block.
   ═══════════════════════════════════════ */
.card-profile { border-radius: var(--hp-r-lg) !important; box-shadow: var(--hp-sh-sm) !important; transition: transform .25s var(--hp-ease-out), box-shadow .25s ease; }
.card-profile:hover { transform: translate3d(0, -6px, 0); box-shadow: var(--hp-sh-lg) !important; }
.header-profile { border-radius: var(--hp-r-lg) var(--hp-r-lg) 0 0 !important; }
.profile-img { box-shadow: var(--hp-sh-md); }
.btn-profile { transition: transform .18s var(--hp-ease-out), box-shadow .18s ease; }
.btn-profile:hover { transform: translate3d(0, -2px, 0); }
.btn-profile-follow { background: var(--hp-brand) !important; }
.btn-profile-donate { background: var(--hp-grad-amber) !important; color: #fff !important; }

/* Popular-member strip */
.pmw-card { box-shadow: var(--hp-sh-sm) !important; border-color: var(--hp-border) !important; }
.pmw-card:hover { box-shadow: var(--hp-sh-lg) !important; }

/* ═══════════════════════════════════════
   FEEDBACK WIDGET
   Namespaced hpfb- so it can't collide with the legacy
   .coffeete-feedback-* rules still shipped in soft-ui-dashboard.css.
   ═══════════════════════════════════════ */
.hpfb-btn {
    position: fixed; left: 0; top: 50%; transform: translateY(-50%);
    z-index: 1040; border: none; border-radius: 0 var(--hp-r-md) var(--hp-r-md) 0;
    writing-mode: vertical-rl; text-orientation: mixed;
    display: inline-flex; align-items: center; gap: .55rem;
    background: var(--hp-grad-amber); color: #fff;
    font-weight: 800; font-size: .9rem; letter-spacing: .03em;
    padding: 1.15rem .55rem; cursor: pointer;
    box-shadow: 4px 4px 20px rgba(245,158,11,.42);
    transition: transform .2s var(--hp-ease-out), box-shadow .2s ease, padding .2s ease;
}
.hpfb-btn::before { content: "💬"; font-size: 1.05rem; line-height: 1; }
.hpfb-btn:hover { transform: translateY(-50%) translateX(4px); box-shadow: 7px 5px 28px rgba(245,158,11,.55); padding-inline-start: .85rem; }
@media (max-width: 600px) { .hpfb-btn { font-size: .82rem; padding: 1rem .5rem; } }

.hpfb-backdrop {
    position: fixed; inset: 0; z-index: 1045;
    background: rgba(15,23,42,.5);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    opacity: 0; visibility: hidden;
    transition: opacity .28s ease, visibility 0s linear .28s;
}
.hpfb-backdrop.is-open { opacity: 1; visibility: visible; transition: opacity .28s ease; }

.hpfb-panel {
    position: fixed; left: 50%; top: 50%; z-index: 1050;
    width: min(440px, 92vw); max-height: 90vh;
    background: #fff; border-radius: var(--hp-r-xl); box-shadow: var(--hp-sh-xl);
    transform: translate(-50%, -48%) scale(.92); opacity: 0; visibility: hidden;
    transition: transform .3s var(--hp-ease-spring), opacity .26s ease, visibility 0s linear .3s;
    overflow: hidden auto; border: none; display: flex; flex-direction: column;
}
.hpfb-panel.is-open {
    transform: translate(-50%, -50%) scale(1); opacity: 1; visibility: visible;
    transition: transform .4s var(--hp-ease-spring), opacity .3s ease;
}
.cfb-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1.15rem 1.3rem; border-bottom: 1px solid var(--hp-border);
    background: linear-gradient(160deg, var(--hp-brand-lt), #fff); flex-shrink: 0;
}
.cfb-head h5 { font-size: 1rem; font-weight: 800; color: var(--hp-text); margin: 0; }
.hpfb-close {
    width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #fff; border: 1.5px solid var(--hp-border); color: var(--hp-muted);
    cursor: pointer; font-size: .9rem; transition: border-color .2s, color .2s;
}
.hpfb-close:hover { border-color: #EF4444; color: #EF4444; }
.cfb-body { padding: 1.3rem; }
.cfb-msg { text-align: center; font-size: .85rem; font-weight: 700; min-height: 1.2rem; margin-bottom: .75rem; }
.cfb-label { font-size: .8rem; font-weight: 700; color: var(--hp-muted); margin-bottom: .7rem; }
.cfb-rates { display: flex; justify-content: space-between; gap: .4rem; margin-bottom: 1.25rem; }
.cfb-rate-item { display: flex; flex-direction: column; align-items: center; gap: .35rem; flex: 1; }
.hpfb-rate {
    width: 46px; height: 46px; border-radius: 50%;
    border: 1.5px solid var(--hp-border); background: #fff;
    font-size: 1.35rem; display: flex; align-items: center; justify-content: center;
    cursor: pointer; padding: 0;
    transition: transform .18s var(--hp-ease-spring), box-shadow .18s ease, border-color .18s ease;
}
.hpfb-rate:hover { transform: translate3d(0, -4px, 0) scale(1.06); border-color: var(--hp-brand); box-shadow: var(--hp-sh-sm); }
.cfb-rate-label { font-size: .68rem; font-weight: 700; color: var(--hp-muted); }
.cfb-textarea {
    width: 100%; min-height: 110px; border: 1.5px solid var(--hp-border); border-radius: var(--hp-r-md);
    padding: .78rem .9rem; font-size: .88rem; color: var(--hp-text); resize: vertical; line-height: 1.8;
    transition: border-color .2s, box-shadow .2s; font-family: inherit; box-sizing: border-box; margin-bottom: 1rem;
}
.cfb-textarea:focus { outline: none; border-color: var(--hp-brand); box-shadow: 0 0 0 4px rgba(41,171,226,.13); }
.hpfb-submit {
    width: 100%; padding: .78rem; border: none; border-radius: var(--hp-r-md);
    background: var(--hp-grad-brand); color: #fff;
    font-weight: 800; font-size: .9rem; cursor: pointer;
    box-shadow: var(--hp-sh-brand);
    transition: transform .2s var(--hp-ease-out), box-shadow .2s ease;
}
.hpfb-submit:hover { transform: translate3d(0, -2px, 0); box-shadow: 0 12px 30px rgba(41,171,226,.4); }
.hpfb-submit:disabled { opacity: .6; cursor: not-allowed; transform: none; }

/* ═══════════════════════════════════════
   OFF-SCREEN ANIMATION GATING

   Ambient loops keep consuming frames even when their section is far
   outside the viewport. Sections tagged .hp-anim-scope get their
   animations paused while off-screen; homepage-v2.js toggles .hp-inview
   and sets .hp-gated on <html>, so with JS off nothing is ever paused.

   animation-play-state is compositor-only — pausing costs no layout or
   paint, and transitions (the scroll reveals) are unaffected.
   ═══════════════════════════════════════ */
.hp-gated .hp-anim-scope:not(.hp-inview),
.hp-gated .hp-anim-scope:not(.hp-inview) *,
.hp-gated .hp-anim-scope:not(.hp-inview)::before,
.hp-gated .hp-anim-scope:not(.hp-inview)::after,
.hp-gated .hp-anim-scope:not(.hp-inview) *::before,
.hp-gated .hp-anim-scope:not(.hp-inview) *::after {
    animation-play-state: paused !important;
}

/* ═══════════════════════════════════════
   REDUCED MOTION
   One blanket opt-out. Ambient loops are killed outright; reveals are
   collapsed to a near-instant fade so content still appears rather
   than being stuck at opacity:0 with the transition disabled.
   ═══════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .hp-hero-blob, .hp-cta-blob, .hp-sec-icon, .hp-scrolldown,
    .hp-how-cup, .hp-how-steam span, .hp-how-coin, .hp-duo-deco, .hp-duo-emoji,
    .hp-duo-mock-code span, .hp-duo-mock-wave span, .hp-tweet-tag,
    .hp-cta-badge, .hp-steam path, .hp-hero-art,
    .section-title-accent, .hp-orbs::before, .hp-orbs::after {
        animation: none !important;
    }
    .hp-reveal, .hp-reveal-stagger > *, .hp-reveal-scale,
    .hp-tslider-track.hp-reveal-stagger > .hp-tslide {
        opacity: 1 !important; transform: none !important; transition: none !important;
    }
    * { scroll-behavior: auto !important; }
}

/* ═══════════════════════════════════════════════════════════════
   SCROLL PROGRESS
   A single composited transform. The inner span is scaled on the X
   axis from 0..1 rather than given a width, so scrolling never
   triggers layout.
   ═══════════════════════════════════════════════════════════════ */
.hp-progress {
    position: fixed; inset-inline: 0; top: 0; height: 3px; z-index: 1200;
    background: transparent; pointer-events: none;
}
.hp-progress > span {
    display: block; height: 100%; transform: scaleX(0);
    /* RTL page: growth must start from the right edge. */
    transform-origin: right center;
    background: linear-gradient(90deg, var(--hp-amber), var(--hp-brand));
    box-shadow: 0 0 10px rgba(41, 171, 226, .5);
}

/* ═══════════════════════════════════════════════════════════════
   USERNAME CONFETTI
   Fired when the hero's availability check reports the name is free.
   Pieces are absolutely positioned inside the signup card and removed
   by the script once their animation ends.
   ═══════════════════════════════════════════════════════════════ */
.hp-confetti-piece {
    position: absolute; top: 50%; inset-inline-start: 50%;
    width: 8px; height: 8px; border-radius: 2px;
    pointer-events: none; z-index: 5;
    animation: hpConfettiFly var(--cf-dur, 900ms) cubic-bezier(.2, .6, .35, 1) forwards;
}
@keyframes hpConfettiFly {
    0%   { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 1 }
    100% { transform: translate(var(--cf-x), var(--cf-y)) rotate(var(--cf-r)) scale(.4); opacity: 0 }
}

/* ═══════════════════════════════════════════════════════════════
   EARNINGS CALCULATOR
   ═══════════════════════════════════════════════════════════════ */
.hp-calc-sec {
    position: relative; overflow: hidden;
    background: linear-gradient(165deg, #fffbeb 0%, #ffffff 55%, var(--hp-brand-lt) 100%);
}
.hp-calc-sec > .container { position: relative; z-index: 1 }
.hp-calc-blob {
    position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; z-index: 0;
}
.hp-calc-blob.b1 { width: 340px; height: 340px; top: -90px; inset-inline-start: -70px; background: rgba(245, 158, 11, .30) }
.hp-calc-blob.b2 { width: 300px; height: 300px; bottom: -110px; inset-inline-end: -60px; background: rgba(41, 171, 226, .28) }

.hp-calc {
    display: grid; grid-template-columns: 1.05fr .95fr; gap: 1.75rem; align-items: stretch;
    background: var(--hp-card); border: 1px solid var(--hp-border);
    border-radius: var(--hp-r-2xl); padding: 2rem; box-shadow: var(--hp-sh-lg);
}
@media (max-width: 860px) { .hp-calc { grid-template-columns: 1fr; padding: 1.4rem } }

.hp-calc-controls { display: flex; flex-direction: column; justify-content: center; gap: 1.9rem }
.hp-calc-field { display: flex; flex-direction: column; gap: .6rem }
.hp-calc-label {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    font-size: .9rem; font-weight: 800; color: var(--hp-text); margin: 0;
}
.hp-calc-val {
    font-size: 1.05rem; font-weight: 900; color: var(--hp-amber-dk);
    background: var(--hp-amber-lt); border: 1px solid #fde68a;
    border-radius: 50px; padding: .2rem .8rem; font-variant-numeric: tabular-nums;
}
.hp-calc-scale {
    display: flex; justify-content: space-between;
    font-size: .68rem; font-weight: 700; color: var(--hp-muted);
}

/* Range input, restyled in both engines. Kept to track + thumb only —
   anything more elaborate stops being operable on some mobile browsers. */
.hp-calc-range { -webkit-appearance: none; appearance: none; width: 100%; height: 10px; border-radius: 50px; background: linear-gradient(90deg, var(--hp-brand) 0%, var(--hp-amber) 100%); outline: none; cursor: pointer }
.hp-calc-range::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; width: 26px; height: 26px; border-radius: 50%;
    background: #fff; border: 3px solid var(--hp-amber); cursor: grab;
    box-shadow: 0 3px 10px rgba(22, 34, 58, .22); transition: transform .15s ease;
}
.hp-calc-range::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.15) }
.hp-calc-range::-moz-range-thumb {
    width: 26px; height: 26px; border-radius: 50%; background: #fff;
    border: 3px solid var(--hp-amber); cursor: grab; box-shadow: 0 3px 10px rgba(22, 34, 58, .22);
}
.hp-calc-range:focus-visible { box-shadow: 0 0 0 4px rgba(41, 171, 226, .30) }

.hp-calc-result {
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: .5rem;
    background: linear-gradient(160deg, #16223a, #24344f);
    border-radius: var(--hp-r-xl); padding: 1.75rem 1.25rem; color: #fff;
}
.hp-calc-result-eyebrow { font-size: .74rem; font-weight: 800; color: #94a3b8; letter-spacing: .02em }
.hp-calc-amount { display: flex; align-items: baseline; gap: .4rem; line-height: 1 }
.hp-calc-amount > span {
    font-size: clamp(1.9rem, 5vw, 2.9rem); font-weight: 900;
    font-variant-numeric: tabular-nums;
    background: linear-gradient(135deg, #fbbf24, #f97316);
    background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.hp-calc-amount small { font-size: .85rem; font-weight: 700; color: #cbd5e1 }
.hp-calc-year { font-size: .8rem; color: #cbd5e1 }
.hp-calc-year strong { color: #fff; font-variant-numeric: tabular-nums }

.hp-calc-cups {
    display: flex; flex-wrap: wrap; justify-content: center; gap: .28rem;
    margin: .5rem 0 .25rem; max-width: 20rem;
}
.hp-calc-cup { font-size: 1.05rem; opacity: .18; transition: opacity .25s ease, transform .25s ease }
.hp-calc-cup.is-on { opacity: 1; transform: translateY(-2px) }

.hp-calc-note { font-size: .68rem; color: #94a3b8; margin: .35rem 0 0; max-width: 30ch; line-height: 1.7 }
.hp-calc-cta {
    margin-top: .75rem; display: inline-flex; align-items: center; gap: .4rem;
    background: var(--hp-grad-amber); color: #fff; text-decoration: none;
    font-size: .85rem; font-weight: 800; padding: .65rem 1.4rem; border-radius: 50px;
    box-shadow: var(--hp-sh-amber); transition: transform .2s ease;
}
.hp-calc-cta:hover { color: #fff; text-decoration: none; transform: translateY(-2px) }

@media (prefers-reduced-motion: reduce) {
    .hp-confetti-piece { display: none }
    .hp-calc-cup, .hp-calc-cta, .hp-calc-range::-webkit-slider-thumb { transition: none }
}