/* =============================================================================
   theme.css — Professional / corporate restyle (educational demo)
   -----------------------------------------------------------------------------
   This stylesheet is loaded AFTER each page's inline <style> and the Tailwind
   CDN, and uses !important to recolour the captured scam site into a sober,
   business-like palette for classroom presentation. It only changes appearance
   (colours, fonts, shadows, motion). It does NOT touch the disabled data
   collection or the "DEMO" warning banner.
   ============================================================================= */

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

:root {
    --brand-900: #0d1f3a;   /* deepest navy            */
    --brand-800: #13294b;   /* primary navy            */
    --brand-700: #1c3a63;   /* navy, lighter           */
    --brand-600: #27507f;   /* navy accent             */
    --ink:       #1f2937;   /* body text               */
    --muted:     #5b6675;   /* secondary text          */
    --line:      #e2e8f0;   /* hairline borders        */
    --surface:   #f7f8fa;   /* neutral section bg       */
    --pill-bg:   #eef2f7;   /* neutral pill background  */
    --pill-ink:  #334155;   /* neutral pill text        */
}

/* ---- Typography: clean sans body, serif headings ------------------------- */
body {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
    color: var(--ink) !important;
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5,
.counter {
    font-family: 'Merriweather', Georgia, 'Times New Roman', serif !important;
    letter-spacing: -0.01em;
}

/* ---- Custom gradient utility classes -> solid, muted tones --------------- */
.gradient-blue   { background: var(--brand-800) !important; }
.gradient-green  { background: #1f5d4c !important; }      /* muted corporate green */
.gradient-red    { background: #7a2e2e !important; }      /* muted, desaturated    */
.gradient-orange { background: #7a5a2e !important; }
.gradient-purple { background: #3a3550 !important; }

/* ---- Buttons: solid, no glow, restrained hover -------------------------- */
.btn-primary,
.cta-button {
    background: linear-gradient(180deg, #1d3c63 0%, var(--brand-800) 100%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        0 2px 5px rgba(13, 31, 58, 0.30),
        0 9px 20px rgba(13, 31, 58, 0.22) !important;
}
.btn-primary:hover,
.cta-button:hover {
    background: linear-gradient(180deg, #244a7a 0%, var(--brand-700) 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 5px 12px rgba(13, 31, 58, 0.30),
        0 16px 32px rgba(13, 31, 58, 0.28) !important;
}
.btn-primary:active,
.cta-button:active {
    transform: translateY(0) !important;
    box-shadow: inset 0 2px 6px rgba(8, 20, 40, 0.45) !important;
}
.cta-button::before { display: none !important; }        /* remove sweeping shine */

.btn-secondary {
    background: transparent !important;
    color: var(--brand-800) !important;
    border: 1.5px solid var(--brand-800) !important;
}
.btn-secondary:hover {
    background: var(--brand-800) !important;
    color: #fff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 14px rgba(13, 31, 58, 0.18) !important;
}

/* ---- Kill attention-grabbing motion / glow ------------------------------ */
.pulse-glow { animation: none !important; box-shadow: none !important; }
.glow-hover:hover { box-shadow: 0 4px 14px rgba(13, 31, 58, 0.15) !important; }

/* ---- Counters / gradient-clipped headings -> solid navy ----------------- */
.counter {
    background: none !important;
    -webkit-text-fill-color: var(--brand-800) !important;
    color: var(--brand-800) !important;
}

/* ---- Dark CTA + testimonial backgrounds -> sober navy, no colour wash ---- */
.cta-enhanced {
    background: radial-gradient(120% 120% at 50% 0%, #1d3a63 0%, var(--brand-900) 62%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        inset 0 -60px 90px rgba(0, 0, 0, 0.28) !important;
}
.cta-enhanced::before { display: none !important; }

/* Depth on the dark statistics section */
section[class*="from-slate-900"] {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        inset 0 -60px 90px rgba(0, 0, 0, 0.30) !important;
}

/* Floating, layered header */
.nav-blur {
    box-shadow:
        0 1px 0 rgba(15, 23, 42, 0.05),
        0 8px 24px rgba(15, 23, 42, 0.10) !important;
}

/* Tactile depth on the small accent icon tiles / pills / step numbers */
.gradient-blue,
.gradient-green,
.gradient-red,
.gradient-orange,
.gradient-purple {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 4px 10px rgba(13, 31, 58, 0.20) !important;
}
.testimonials-enhanced { background: var(--surface) !important; }
.testimonials-enhanced::before { background-image: none !important; }
.stat-card::before {
    background: linear-gradient(135deg, rgba(19, 41, 75, 0.04), rgba(19, 41, 75, 0.04)) !important;
}

/* ---- Recovery badge / accent chips -> neutral --------------------------- */
.testimonial-recovery {
    background: linear-gradient(180deg, var(--brand-700) 0%, var(--brand-800) 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 3px 8px rgba(13, 31, 58, 0.25) !important;
}
.cta-feature {
    background: #f1f5f9 !important;
    border-left: 4px solid var(--brand-700) !important;
}
.cta-feature-icon { color: var(--brand-700) !important; }
.article-tag,
.tag-crypto, .tag-forex, .tag-ai {
    background: var(--pill-bg) !important;
    color: var(--pill-ink) !important;
}

/* ---- Softer, more corporate shadows ------------------------------------- */
.enhanced-card,
.stat-card,
.article-preview,
.testimonial-card-enhanced,
.cta-card {
    background-image: linear-gradient(180deg, #ffffff 0%, #f5f8fc 100%) !important;
    border: 1px solid #e6ebf2 !important;
    border-top-color: #ffffff !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 1px 2px rgba(15, 23, 42, 0.05),
        0 6px 14px rgba(15, 23, 42, 0.07),
        0 18px 38px rgba(15, 23, 42, 0.10) !important;
}
.enhanced-card:hover,
.stat-card:hover,
.article-preview:hover {
    transform: translateY(-6px) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 3px 6px rgba(15, 23, 42, 0.07),
        0 12px 26px rgba(15, 23, 42, 0.11),
        0 30px 56px rgba(15, 23, 42, 0.16) !important;
}
.enhanced-card::before {
    background: var(--brand-800) !important;   /* top accent bar -> solid navy */
    height: 4px !important;
}

/* =============================================================================
   Tailwind utility overrides (CDN sets these; we mute them with !important)
   ============================================================================= */

/* Gradient text + decorative gradients in LIGHT sections -> solid navy ------ */
.from-green-600, .from-blue-600, .from-blue-500, .from-red-500 {
    --tw-gradient-from: var(--brand-800) var(--tw-gradient-from-position) !important;
    --tw-gradient-to: rgb(19 41 75 / 0) var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.to-green-700, .to-blue-700, .to-green-600, .to-orange-500 {
    --tw-gradient-to: var(--brand-800) var(--tw-gradient-to-position) !important;
}
.to-green-500 {   /* small divider bars: navy -> slate */
    --tw-gradient-to: #64748b var(--tw-gradient-to-position) !important;
}

/* Heading gradient that sits on the DARK stats section -> stays light ------- */
.from-blue-400 {
    --tw-gradient-from: #bcd3f2 var(--tw-gradient-from-position) !important;
    --tw-gradient-to: rgb(188 211 242 / 0) var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.to-green-400 {
    --tw-gradient-to: #dbe7f7 var(--tw-gradient-to-position) !important;
}

/* Section background gradients -> neutral / deep navy ---------------------- */
.to-blue-50  { --tw-gradient-to: #f1f5f9 var(--tw-gradient-to-position) !important; }
.to-blue-900 { --tw-gradient-to: var(--brand-900) var(--tw-gradient-to-position) !important; }
.to-blue-600 { --tw-gradient-to: var(--brand-700) var(--tw-gradient-to-position) !important; }

/* Link / accent text colours -> navy -------------------------------------- */
.text-blue-600, .text-blue-500 { color: var(--brand-700) !important; }
.hover\:text-blue-600:hover,
.hover\:text-blue-800:hover { color: var(--brand-800) !important; }
.text-green-500, .text-green-600 { color: var(--brand-700) !important; }  /* check icons etc. */

/* Light text on dark sections (keep readable, just desaturate) ------------- */
.text-blue-100 { color: #cdd9ea !important; }
.text-blue-400 { color: #9db8e0 !important; }

/* Pale pill backgrounds + their text -> neutral slate --------------------- */
.bg-green-100, .bg-blue-100, .bg-purple-100, .bg-red-100, .bg-orange-100 {
    background-color: var(--pill-bg) !important;
}
.text-green-800, .text-blue-800, .text-purple-800, .text-red-800, .text-orange-800 {
    color: var(--pill-ink) !important;
}

/* Small accent dots / list markers -> neutral grey ------------------------ */
.bg-red-400, .bg-orange-400, .bg-purple-400,
.bg-blue-500, .bg-green-500, .bg-purple-500 {
    background-color: #94a3b8 !important;
}

/* ---- Global mobile fixes ---- */
@media (max-width: 768px) {
    /* fixed background-attachment is janky/broken on mobile — let it scroll */
    .bg-fixed { background-attachment: scroll !important; }
}

/* =============================================================================
   Educational "DEMO" banner — applies to every page that links this file.
   Keeps the captured site unmistakably marked as a non-real teaching artifact.
   ============================================================================= */
:root { --edu-banner-h: 0px; }
@media (max-width: 768px) { :root { --edu-banner-h: 66px; } }
body { padding-top: var(--edu-banner-h) !important; }
.edu-banner {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--edu-banner-h);
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    background: linear-gradient(135deg, #b45309 0%, #d97706 55%, #f59e0b 100%);
    color: #fff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.edu-banner__inner { display: flex; align-items: center; gap: 10px; max-width: 1100px; }
.edu-banner__badge {
    flex-shrink: 0;
    background: rgba(0, 0, 0, 0.28);
    color: #fff;
    font-weight: 800;
    letter-spacing: 0.08em;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.35);
}
.edu-banner__text { font-size: 13px; font-weight: 600; line-height: 1.25; color: #fff !important; }
.edu-banner__ru { display: block; font-weight: 400; opacity: 0.92; font-size: 12px; }
/* push fixed page chrome below the banner */
.progress-container { top: var(--edu-banner-h) !important; }
header.edu-offset, header.header { top: var(--edu-banner-h) !important; }