/* ============================================================
   Ecomruns — shared premium / 3D effects  (loaded on every page)
   Card mouse-tilt · animated counters · button depth
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Manrope:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* ---- Unified professional typography ---- */
/* Body copy: Inter. Headings: Space Grotesk.
   Both stay !important because this file is loaded on every page and has to
   win over the per-page inline styles that still set their own faces. */
body, .font-inter {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
}

.font-unbounded, h1, h2, h3, h4, h5, h6,
.hd-big, .hd-stat-v, .hd-prod-rank, .sim-invest, .sim-stat-num,
.preloader-logo, .cp-tile .v, .hd-badge b {
    font-family: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
}
h1, h2, h3, h4, h5, h6, .font-unbounded { letter-spacing: -0.02em; }

/* Headings read badly when the last line is a lone orphan word. Let the
   browser even out the line lengths instead of filling each line to the edge. */
h1, h2, h3, .hero-title { text-wrap: balance; }

/* ---- 3D mouse-tilt cards ---- */
.tilt-3d {
    transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease;
}
.tilt-3d, .premium-card {
    transform-style: preserve-3d;
    will-change: transform;
}
.tilt-3d.tilting, .premium-card.tilting {
    transition: transform .08s ease-out, box-shadow .08s ease;
    box-shadow: 0 26px 55px -18px rgba(0, 0, 0, .6), 0 0 0 1px rgba(232, 185, 35, .22) !important;
}

/* ---- Animated stat counters ---- */
[data-count] { display: inline-block; font-variant-numeric: tabular-nums; }

/* ---- Button depth / glow ---- */
.btn-3d {
    transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s ease;
    will-change: transform;
}
.btn-3d:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 32px -10px rgba(232, 185, 35, .5);
}
.btn-3d:active { transform: translateY(-1px); }

/* ---- Accessibility / touch: disable motion ---- */
@media (prefers-reduced-motion: reduce) {
    .tilt-3d, .btn-3d { transition: none !important; transform: none !important; }
}
@media (hover: none) {
    .tilt-3d { transform: none !important; }
}

/* ============================================================
   Premium quality layer  (site-wide polish)
   ============================================================ */
* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
html { scroll-behavior: smooth; }
body { text-rendering: optimizeLegibility; }

::selection { background: rgba(232, 185, 35, .30); color: #fff; }
:focus-visible { outline: 2px solid #E8B923; outline-offset: 3px; border-radius: 4px; }

/* (film-grain overlay removed — it caused a render artifact; the site reads cleaner without it) */

/* thin gold scroll-progress bar */
#scroll-progress {
    position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 9999;
    background: linear-gradient(90deg, #b5850f, #E8B923 50%, #FFE066);
    box-shadow: 0 0 12px rgba(232, 185, 35, .65);
    transition: width .08s linear;
}

/* softer, layered premium shadows on glass cards */
.tilt-3d, .premium-card {
    box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .55), 0 4px 12px -6px rgba(0, 0, 0, .3);
}

/* smoother, richer glass */
.glassmorphism, .sim-panel {
    background: rgba(255, 255, 255, .055);
    border: 1px solid rgba(255, 255, 255, .12);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
    backdrop-filter: blur(14px) saturate(120%);
}

/* premium link/icon micro-transition everywhere */
a, button, .fas, .fab, i { transition: color .2s ease, transform .2s ease, opacity .2s ease; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    body::after { display: none; }
    #scroll-progress { transition: none; }
}

/* ambient section glow orbs */
.amb-orb { position: absolute; border-radius: 50%; filter: blur(90px); z-index: 0; pointer-events: none; opacity: .4; }
.amb-orb-g { background: radial-gradient(circle, rgba(232, 185, 35, .42), transparent 70%); animation: amb-float 18s ease-in-out infinite; }
.amb-orb-b { background: radial-gradient(circle, rgba(59, 130, 246, .30), transparent 70%); animation: amb-float 22s ease-in-out infinite reverse; }
@keyframes amb-float { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(36px, -28px) scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .amb-orb { animation: none !important; } }
/* keep real content above the orbs */
.amb-orb ~ *:not(.amb-orb) { position: relative; z-index: 1; }

/* chatbot disabled (no Gemini) — hide the widget + floating button */
#chatToggleBtn, #chat-widget { display: none !important; }