/* ============================================================
   Premium SaaS Design System - Frontend only
   Scope: everything is nested under `body.site` so the admin
   panel (which loads style.css without .site) is untouched.

   How it works:
   1. `.site` redefines the design tokens (new blue/purple palette,
      radii, shadows, Inter font). The legacy variable names used by
      style.css (--emerald, --gold, --olive, --cream ...) are remapped
      here, so every existing frontend component re-skins automatically.
   2. Targeted overrides below fix the pieces the spec changes
      structurally (gradient hero, 14px buttons, #0F172A footer,
      56px inputs, blue focus rings, typography scale, etc.).

   New pages/sections inherit all of this for free - just build them
   inside the frontend layout (body.site) using the shared classes.
   ============================================================ */

.site {
  /* ---- Brand ---- */
  --primary: #2563EB;
  --primary-hover: #1D4ED8;
  --primary-press: #1E40AF;
  --secondary: #7C3AED;
  --secondary-hover: #6D28D9;
  --accent: #10B981;
  --accent-hover: #059669;
  --warning: #F59E0B;
  --error: #EF4444;
  --info: #0EA5E9;

  /* ---- Surfaces ---- */
  --bg: #F8FAFC;
  --bg-alt: #F1F5F9;
  --card: #FFFFFF;
  --footer-bg: #0F172A;
  --hero-grad: linear-gradient(135deg, #2563EB 0%, #7C3AED 100%);

  /* ---- Text ---- */
  --heading: #0F172A;
  --heading-2: #1E293B;
  --text: #475569;
  --text-muted: #64748B;
  --disabled: #94A3B8;

  /* ---- Borders ---- */
  --border: #E2E8F0;
  --border-input: #CBD5E1;
  --border-hover: #94A3B8;
  --border-focus: #2563EB;

  /* ---- Radii ---- */
  --r-card: 20px;
  --r-btn: 14px;
  --r-input: 14px;
  --r-pill: 999px;
  --r-img: 18px;

  /* ---- Shadows ---- */
  --sh-sm: 0 2px 8px rgba(0,0,0,.05);
  --sh-md: 0 8px 25px rgba(0,0,0,.08);
  --sh-lg: 0 20px 45px rgba(0,0,0,.10);
  --sh-hover: 0 25px 60px rgba(37,99,235,.18);
  --focus-ring: 0 0 0 4px rgba(37,99,235,.12);

  --site-transition: all .3s cubic-bezier(.22,1,.36,1);

  /* ---- Remap legacy tokens so style.css components adopt the new palette ---- */
  --emerald: var(--primary);
  --emerald-dark: var(--primary-press);
  --olive: var(--secondary);
  --olive-soft: #a78bfa;
  --gold: var(--accent);
  --gold-soft: #34d399;
  --cream: var(--bg);
  --beige: var(--bg-alt);
  --ink: var(--heading);
  --muted: var(--text-muted);
  --white: #ffffff;
  --shadow-sm: var(--sh-sm);
  --shadow-md: var(--sh-md);
  --shadow-lg: var(--sh-lg);
  --radius: var(--r-card);
  --radius-lg: var(--r-card);
  --radius-pill: var(--r-pill);
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --transition: var(--site-transition);
}

/* ============================================================
   Base
   ============================================================ */
body.site {
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  line-height: 1.7;
  letter-spacing: -0.011em;
}

.site h1, .site h2, .site h3, .site h4, .site h5, .site h6 {
  color: var(--heading);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.site p { line-height: 1.7; }

.site a { color: var(--primary); }
.site a:hover { color: var(--primary-hover); }

.site ::selection { background: rgba(37,99,235,.16); }

/* WCAG AA - always-visible keyboard focus */
.site a:focus-visible,
.site button:focus-visible,
.site .btn:focus-visible,
.site .nav-link:focus-visible,
.site .form-control:focus-visible,
.site .form-select:focus-visible,
.site [tabindex]:focus-visible {
  outline: 3px solid rgba(37,99,235,.5);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Utility text colors, re-pointed to the new palette */
.site .text-muted-soft { color: var(--text-muted) !important; }
.site .text-olive { color: var(--secondary) !important; }
.site .text-gold { color: var(--accent) !important; }
.site .text-success { color: var(--accent) !important; }
.site .bg-cream { background: var(--bg) !important; }
.site .bg-beige { background: var(--bg-alt) !important; }
.site .bg-white { background: var(--card) !important; }

/* ============================================================
   Layout & section rhythm
   ============================================================ */
.site .container { max-width: 1320px; }
.site .section { padding: 120px 0; }
.site .section-sm { padding: 72px 0; }

.site .eyebrow {
  color: var(--primary);
  background: rgba(37,99,235,.10);
  font-weight: 600;
  letter-spacing: .12em;
}
.site .section-title { font-size: clamp(1.9rem, 4vw, 2.625rem); color: var(--heading); }
.site .section-lead { color: var(--text); font-size: 1.125rem; }

/* ============================================================
   Buttons
   ============================================================ */
.site .btn {
  font-weight: 600;
  font-size: 1rem;
  border-radius: var(--r-btn);
  padding: 14px 30px;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: var(--site-transition);
}
.site .btn-lg { padding: 16px 34px; font-size: 1.05rem; }
.site .btn-sm-z { padding: 8px 16px; min-height: 40px; font-size: .875rem; border-radius: 10px; }

/* Primary */
.site .btn-primary-z {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 10px 24px rgba(37,99,235,.28);
}
.site .btn-primary-z:hover {
  background: var(--primary-hover);
  color: #fff;
  transform: scale(1.03);
  box-shadow: var(--sh-hover);
}
.site .btn-primary-z:active { background: var(--primary-press); transform: scale(.99); }

/* Secondary (white bg, blue border) */
.site .btn-outline-z {
  background: #fff;
  color: var(--primary);
  border: 1.5px solid var(--border-input);
}
.site .btn-outline-z:hover {
  background: rgba(37,99,235,.06);
  color: var(--primary-hover);
  border-color: var(--primary);
  transform: translateY(-2px);
}

/* "Gold" legacy button repurposed as the purple/gradient highlight CTA */
.site .btn-gold {
  background: var(--hero-grad);
  color: #fff;
  box-shadow: 0 10px 24px rgba(124,58,237,.30);
}
.site .btn-gold:hover { color: #fff; transform: scale(1.03); box-shadow: 0 20px 45px rgba(124,58,237,.32); filter: saturate(1.05); }

/* Success / danger helpers */
.site .btn-success-z { background: var(--accent); color: #fff; box-shadow: 0 10px 24px rgba(16,185,129,.26); }
.site .btn-success-z:hover { background: var(--accent-hover); color: #fff; transform: scale(1.03); }
.site .btn-ghost { background: rgba(37,99,235,.06); color: var(--primary); border: none; }
.site .btn-ghost:hover { background: rgba(37,99,235,.12); color: var(--primary-hover); }

/* ============================================================
   Announcement bar  (auto gradient via remap, refined here)
   ============================================================ */
.site .announcement { background: var(--footer-bg); color: #E2E8F0; font-weight: 500; font-size: .875rem; }
.site .announcement .close-ann { color: rgba(255,255,255,.6); }
.site .announcement .close-ann:hover { color: #fff; }

/* ============================================================
   Navbar - glass, blue accents, animated underline
   ============================================================ */
.site .navbar-z {
  background: rgba(255,255,255,.90);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--border);
  min-height: 82px;
}
.site .navbar-z.scrolled { background: rgba(255,255,255,.95); box-shadow: var(--sh-sm); }
.site .brand-z { color: var(--heading); font-weight: 800; }
.site .brand-z .leaf { background: var(--hero-grad); color: #fff; border-radius: 12px; }
.site .brand-z small { color: var(--primary); }

.site .navbar-z .nav-link {
  color: var(--heading-2);
  font-weight: 500;
  font-size: .9375rem;
  position: relative;
}
.site .navbar-z .nav-link::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: 4px;
  height: 2px;
  background: var(--primary);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s cubic-bezier(.22,1,.36,1);
}
.site .navbar-z .nav-link:hover { color: var(--primary); background: transparent; }
.site .navbar-z .nav-link:hover::after,
.site .navbar-z .nav-link.active::after { transform: scaleX(1); }
.site .navbar-z .nav-link.active { color: var(--primary); background: transparent; }

/* Submenu indicator - a chevron on nav items that open a dropdown */
.site .navbar-z .dropdown-toggle::after { display: none; } /* drop Bootstrap's default caret */
.site .navbar-z .nav-caret {
  font-size: .7rem;
  margin-left: 5px;
  opacity: .6;
  vertical-align: middle;
  display: inline-block;
  transition: transform .3s cubic-bezier(.22,1,.36,1), opacity .2s ease;
}
.site .navbar-z .nav-link:hover .nav-caret,
.site .navbar-z .nav-link.active .nav-caret { opacity: 1; }
.site .navbar-z .nav-link[aria-expanded="true"] .nav-caret { transform: rotate(180deg); opacity: 1; }

.site .dropdown-menu-z { border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--sh-md); }
.site .dropdown-menu-z .dropdown-item { color: var(--heading-2); }
.site .dropdown-menu-z .dropdown-item:hover,
.site .dropdown-menu-z .dropdown-item.active { background: rgba(37,99,235,.08); color: var(--primary); }
.site .dropdown-header-z { color: var(--secondary); }

.site .nav-cart-badge { background: var(--accent); color: #fff; }

/* ============================================================
   Hero - blue → purple gradient, light content
   ============================================================ */
.site .hero {
  background: var(--hero-grad);
  color: #fff;
  padding: 96px 0 110px;
}
.site .hero h1 { color: #fff; font-size: clamp(2.4rem, 5vw, 4rem); letter-spacing: -0.03em; }
.site .hero .highlight { color: #E9D5FF; }
.site .hero p.lead { color: rgba(255,255,255,.88); font-size: clamp(1.05rem, 1.6vw, 1.375rem); }
.site .hero .eyebrow { color: #fff; background: rgba(255,255,255,.16); backdrop-filter: blur(6px); }
.site .hero .text-muted-soft { color: rgba(255,255,255,.85) !important; }
.site .hero .text-olive,
.site .hero .text-gold { color: #fff !important; }

/* Hero CTAs need light treatment on the gradient */
.site .hero .btn-primary-z { background: #fff; color: var(--primary); box-shadow: 0 14px 30px rgba(15,23,42,.22); }
.site .hero .btn-primary-z:hover { background: #fff; color: var(--primary-press); box-shadow: 0 20px 45px rgba(15,23,42,.28); }
.site .hero .btn-outline-z { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.site .hero .btn-outline-z:hover { background: rgba(255,255,255,.14); color: #fff; border-color: #fff; }

/* Discount offer strip inside the hero */
.site .hero-promo {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: var(--r-pill);
  padding: 8px 14px 8px 9px;
  color: #fff;
  font-size: 1rem;
  box-shadow: 0 10px 28px rgba(15,23,42,.22);
}
.site .hero-promo-off {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent);
  color: #fff;
  font-weight: 800;
  font-size: .85rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: 7px 15px;
  border-radius: var(--r-pill);
  box-shadow: 0 0 0 0 rgba(16,185,129,.55);
  animation: heroPromoPulse 2.2s ease-in-out infinite;
}
.site .hero-promo-code { display: inline-flex; align-items: center; gap: 9px; color: #fff; padding-right: 2px; }
.site .hero-promo-code strong { color: #fff; letter-spacing: .07em; font-weight: 800; font-size: 1.05rem; }
.site .hero-promo .promo-copy { color: #fff; opacity: .85; padding: 2px; font-size: 1.05rem; }
.site .hero-promo .promo-copy:hover { opacity: 1; color: #fff; }

@keyframes heroPromoPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,.5); }
  50% { box-shadow: 0 0 0 9px rgba(16,185,129,0); }
}

/* Soft background blobs */
.site .hero .blob-1 { background: rgba(255,255,255,.18); }
.site .hero .blob-2 { background: rgba(167,139,250,.35); }

/* Glass illustration */
.site .profile-card {
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: var(--r-card);
  box-shadow: 0 30px 70px rgba(15,23,42,.35);
}
.site .profile-card .fw-bold.text-success,
.site .profile-card .text-success { color: #fff !important; }
.site .profile-card .small.text-muted-soft { color: rgba(255,255,255,.7) !important; }
.site .profile-card .avatar { background: linear-gradient(135deg, #fff, #E9D5FF); color: var(--primary); }
.site .profile-stats .num { color: #fff; }
.site .profile-stats .lbl { color: rgba(255,255,255,.7); }
.site .growth-chart span { background: linear-gradient(180deg, #fff, #C4B5FD); }
.site .floating-badge { background: #fff; color: var(--heading); border-radius: 14px; box-shadow: var(--sh-lg); }
.site .floating-badge .ic { color: var(--secondary); }

/* ============================================================
   Cards (stat / feature / step)
   ============================================================ */
.site .stat-card,
.site .z-card,
.site .step-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--sh-sm);
  transition: var(--site-transition);
}
.site .z-card { padding: 32px; }
.site .stat-card:hover,
.site .step-card:hover { transform: translateY(-6px); box-shadow: var(--sh-md); border-color: rgba(37,99,235,.28); }
.site .z-card:hover { transform: translateY(-8px); box-shadow: var(--sh-hover); border-color: var(--primary); }

.site .stat-card .stat-num { color: var(--primary); font-weight: 800; }
.site .stat-card .stat-lbl { color: var(--text-muted); }

.site .z-card .icon-box {
  background: rgba(37,99,235,.10);
  color: var(--primary);
  border-radius: 16px;
}
.site .z-card:hover .icon-box { background: var(--hero-grad); color: #fff; transform: rotate(-6deg) scale(1.05); }
.site .z-card h4 { color: var(--heading); }
.site .z-card p { color: var(--text); }
.site .card-link { color: var(--primary); }
.site .card-link:hover { color: var(--secondary); }

/* Service pills (home "Our Services" platform cards) */
.site .service-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.site .service-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .85rem; font-weight: 600; color: var(--primary);
  background: rgba(37,99,235,.08);
  border: 1px solid rgba(37,99,235,.14);
  border-radius: var(--r-pill);
  padding: 6px 14px;
  transition: var(--site-transition);
}
.site .service-pill i { font-size: .75rem; transition: transform .3s cubic-bezier(.22,1,.36,1); }
.site .service-pill:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.site .service-pill:hover i { transform: translateX(3px); }

.site .step-num { background: var(--hero-grad); color: #fff; }

/* ============================================================
   Pricing
   ============================================================ */
.site .price-card { border: 1.5px solid var(--border); border-radius: var(--r-card); box-shadow: var(--sh-sm); }
.site .price-card:hover { transform: translateY(-8px); box-shadow: var(--sh-hover); border-color: var(--primary); }
.site .price-card.popular { border-color: var(--primary); box-shadow: var(--sh-md); }
.site .popular-tag { background: var(--hero-grad); color: #fff; }
.site .price-card .price { color: var(--heading); }
.site .price-card .plan-name { color: var(--primary); }
.site .feature-list li { color: var(--text); }
.site .feature-list li i { color: var(--accent); }

/* ============================================================
   Reviews / testimonials
   ============================================================ */
.site .review-card { border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: var(--sh-sm); }
.site .review-card .stars { color: var(--warning); }
.site .review-card p { color: var(--heading-2); }
.site .review-card .reviewer .av { background: var(--hero-grad); }
.site .review-card .reviewer .name { color: var(--heading); }
.site .review-card .reviewer .role { color: var(--text-muted); }

/* ============================================================
   FAQ accordion
   ============================================================ */
.site .accordion-z .accordion-item { border: 1px solid var(--border); border-radius: var(--r-card) !important; }
.site .accordion-z .accordion-button { color: var(--heading); }
.site .accordion-z .accordion-button:not(.collapsed) { background: rgba(37,99,235,.06); color: var(--primary); }
.site .accordion-z .accordion-body { color: var(--text); }

/* ============================================================
   CTA banner (auto gradient via remap)
   ============================================================ */
.site .cta-banner { border-radius: var(--r-card); }
.site .cta-banner::before { background: rgba(255,255,255,.20); }

/* ============================================================
   Footer  (#0F172A)
   ============================================================ */
.site .footer { background: var(--footer-bg); color: #CBD5E1; }
.site .footer h6 { color: #fff; }
.site .footer a { color: #94A3B8; }
.site .footer a:hover { color: #fff; }
.site .footer .brand-z { color: #fff; }
.site .footer .brand-z .leaf { background: var(--hero-grad); color: #fff; }
.site .footer .brand-z small { color: #A5B4FC; }
.site .footer .social a { background: rgba(255,255,255,.08); color: #fff; border-radius: 12px; }
.site .footer .social a:hover { background: var(--primary); color: #fff; transform: translateY(-3px); }
.site .footer-bottom { border-top: 1px solid rgba(255,255,255,.10); }
.site .footer-about { max-width: 300px; }

/* ============================================================
   Forms - 56px height, 14px radius, blue focus ring
   ============================================================ */
.site .form-control,
.site .form-select {
  border: 1.5px solid var(--border-input);
  border-radius: var(--r-input);
  color: var(--heading);
  background: #fff;
}
.site .form-control { min-height: 56px; padding: 14px 18px; }
.site .form-select { min-height: 56px; }
.site textarea.form-control { min-height: 120px; }
.site .form-control::placeholder { color: var(--disabled); }
.site .form-control:hover,
.site .form-select:hover { border-color: var(--border-hover); }
.site .form-control:focus,
.site .form-select:focus {
  border-color: var(--border-focus);
  box-shadow: var(--focus-ring);
}
.site .form-label { color: var(--heading-2); font-weight: 600; }
.site .input-group .form-control { min-height: 48px; }

/* ============================================================
   Auth cards
   ============================================================ */
.site .auth-wrap {
  background:
    radial-gradient(circle at 15% 15%, rgba(37,99,235,.12), transparent 42%),
    radial-gradient(circle at 85% 20%, rgba(124,58,237,.12), transparent 42%),
    var(--bg);
}
.site .auth-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: var(--sh-lg); }
.site .auth-card .form-control { border-radius: var(--r-input); }
.site .auth-card .form-control:focus { border-color: var(--border-focus); box-shadow: var(--focus-ring); }

/* ============================================================
   Badges / tags
   ============================================================ */
.site .badge-soft { background: rgba(37,99,235,.12); color: var(--primary); }
.site .badge-done { background: rgba(16,185,129,.14); color: var(--accent-hover); }
.site .badge-active { background: rgba(124,58,237,.14); color: var(--secondary); }
.site .badge-warn { background: rgba(245,158,11,.16); color: #b45309; }
.site .badge-danger { background: rgba(239,68,68,.14); color: #b91c1c; }
.site .badge-muted { background: var(--bg-alt); color: var(--text-muted); }

/* ============================================================
   Service package boxes
   ============================================================ */
.site .pkg-switch { border: 1.5px solid var(--border); box-shadow: var(--sh-sm); }
.site .pkg-switch button { color: var(--text-muted); }
.site .pkg-switch button.active { background: var(--primary); color: #fff; box-shadow: 0 6px 16px rgba(37,99,235,.28); }
.site .pkg-switch button[data-pkg-tab="vip"].active { background: var(--secondary); color: #fff; }

.site .pkg-box { border: 1.5px solid var(--border); border-radius: var(--r-card); }
.site .pkg-box::before { background: var(--hero-grad); }
.site .pkg-box:hover { transform: translateY(-8px); box-shadow: var(--sh-hover); border-color: var(--primary); }
.site .pkg-box.is-popular { border-color: var(--primary); box-shadow: var(--sh-md); }
.site .pkg-box.is-popular::before,
.site .pkg-box.is-vip::before { background: linear-gradient(90deg, var(--secondary), var(--primary)); }
.site .pkg-box.is-vip { border-color: rgba(124,58,237,.4); background: linear-gradient(180deg, #faf5ff, #fff); }
.site .pkg-ribbon { background: var(--secondary); color: #fff; }
.site .pkg-vip-tag { background: rgba(124,58,237,.14); color: var(--secondary); }
.site .pkg-icon { background: rgba(37,99,235,.10); color: var(--primary); border-radius: 15px; }
.site .pkg-box.is-vip .pkg-icon { background: rgba(124,58,237,.14); color: var(--secondary); }
.site .pkg-qty { color: var(--primary); }
.site .pkg-price { color: var(--heading); }
.site .pkg-feats li { color: var(--text); }
.site .pkg-feats li i { color: var(--accent); }
.site .pkg-box.is-vip .pkg-feats li i { color: var(--secondary); }

/* ============================================================
   Cart / order summary / coupon / promo
   ============================================================ */
.site .cart-item { border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: var(--sh-sm); }
.site .cart-item .thumb { background: rgba(37,99,235,.10); color: var(--primary); }
.site .cart-item.vip .thumb { background: rgba(124,58,237,.14); color: var(--secondary); }
.site .cart-item .item-title { color: var(--heading); }
.site .cart-summary { border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: var(--sh-md); }
.site .cart-summary .sum-total { color: var(--primary); }
.site .cart-price-box .item-price { color: var(--primary); }
.site .qty-badge { background: rgba(37,99,235,.10); color: var(--primary); }
.site .cart-item.vip .qty-badge { background: rgba(124,58,237,.14); color: var(--secondary); }
.site .cart-trust i { color: var(--accent); }
.site .sum-line-name { color: var(--heading-2); }
.site .sum-line-qty i { color: var(--secondary); }
.site .sum-line-price { color: var(--primary); }

.site .coupon-toggle-link { color: var(--primary); }
.site .coupon-toggle-link i { color: var(--secondary); }
.site .coupon-applied { background: rgba(16,185,129,.12); color: var(--accent-hover); }
.site .coupon-applied i { color: var(--accent); }

.site .promo-band { background: var(--hero-grad); }
.site .promo-band .eyebrow-light { color: #fff; background: rgba(255,255,255,.16); }
.site .promo-ticket { border-radius: var(--r-card); border: 1px dashed rgba(37,99,235,.25); }
.site .promo-ticket-off { background: var(--accent); color: #fff; }
.site .promo-code { font-family: var(--font); color: var(--primary); border: 2px dashed var(--primary); background: rgba(37,99,235,.05); }
.site .promo-copy { color: var(--secondary); }
.site .promo-copy:hover { color: var(--primary); }

/* Order flow steps */
.site .order-step.active .circle { background: var(--primary); border-color: var(--primary); color: #fff; }
.site .order-step.done .circle { background: var(--accent); border-color: var(--accent); color: #fff; }
.site .order-step.active .s-label { color: var(--primary); }
.site .pkg-option:hover,
.site .pkg-option.selected { border-color: var(--primary); background: rgba(37,99,235,.05); }

/* ============================================================
   Blog
   ============================================================ */
.site .blog-hero { background: var(--bg-alt); }

.site .blog-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--sh-sm);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: var(--site-transition);
}
.site .blog-card:hover { transform: translateY(-8px); box-shadow: var(--sh-hover); border-color: var(--primary); }
.site .blog-card-media {
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--hero-grad);
  overflow: hidden;
}
.site .blog-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.22,1,.36,1); }
.site .blog-card:hover .blog-card-media img { transform: scale(1.06); }
.site .blog-card-media-fallback { width: 100%; height: 100%; display: grid; place-items: center; color: rgba(255,255,255,.9); font-size: 2.4rem; }
.site .blog-card-body { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1 1 auto; }
.site .blog-meta { display: inline-flex; align-items: center; gap: 7px; font-size: .8rem; color: var(--text-muted); font-weight: 500; }
.site .blog-meta i { color: var(--secondary); }
.site .blog-card-title { font-size: 1.2rem; line-height: 1.35; margin: 10px 0 8px; }
.site .blog-card-title a { color: var(--heading); }
.site .blog-card-title a:hover { color: var(--primary); }
.site .blog-card-excerpt { color: var(--text); font-size: .94rem; margin-bottom: 16px; flex: 1 1 auto; }
.site .blog-readmore { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--primary); font-size: .92rem; }
.site .blog-readmore i { transition: transform .3s cubic-bezier(.22,1,.36,1); }
.site .blog-readmore:hover { color: var(--primary-hover); }
.site .blog-readmore:hover i { transform: translateX(4px); }

/* Single article */
.site .blog-breadcrumb { font-size: .85rem; color: var(--text-muted); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
.site .blog-breadcrumb a { color: var(--text-muted); }
.site .blog-breadcrumb a:hover { color: var(--primary); }
.site .blog-breadcrumb i { font-size: .7rem; opacity: .6; }
.site .blog-breadcrumb span { color: var(--heading-2); }
.site .blog-article-title { font-size: clamp(1.9rem, 4vw, 2.75rem); margin-bottom: 14px; }
.site .blog-article-lead { font-size: 1.2rem; color: var(--text); line-height: 1.6; }
.site .blog-article-cover { width: 100%; border-radius: var(--r-img); margin: 8px 0 32px; box-shadow: var(--sh-md); }

.site .article-body { color: var(--text); font-size: 1.0625rem; line-height: 1.85; }
.site .article-body h2 { font-size: 1.6rem; margin: 34px 0 14px; }
.site .article-body h3 { font-size: 1.3rem; margin: 28px 0 12px; }
.site .article-body p { margin-bottom: 20px; }
.site .article-body a { color: var(--primary); text-decoration: underline; }
.site .article-body a:hover { color: var(--primary-hover); }
.site .article-body ul, .site .article-body ol { margin: 0 0 20px; padding-left: 22px; }
.site .article-body li { margin-bottom: 10px; }
.site .article-body img { max-width: 100%; border-radius: var(--r-img); margin: 12px 0 24px; }
.site .article-body blockquote {
  margin: 24px 0; padding: 16px 22px;
  border-left: 4px solid var(--primary);
  background: rgba(37,99,235,.05);
  border-radius: 0 12px 12px 0;
  color: var(--heading-2); font-style: italic;
}
.site .article-body strong { color: var(--heading-2); }
.site .blog-article-footer {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
  margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--border);
}

/* Pagination (Bootstrap) recolored */
.site .pagination { --bs-pagination-color: var(--heading-2); --bs-pagination-hover-color: var(--primary); --bs-pagination-active-bg: var(--primary); --bs-pagination-active-border-color: var(--primary); --bs-pagination-border-radius: 12px; gap: 6px; }
.site .pagination .page-link { border-radius: 12px !important; border-color: var(--border); }
.site .pagination .page-link:focus { box-shadow: var(--focus-ring); }

/* ============================================================
   Loading skeleton (reusable helper for async content)
   ============================================================ */
.site .skeleton {
  background: linear-gradient(90deg, var(--bg-alt) 25%, #e9eef5 37%, var(--bg-alt) 63%);
  background-size: 400% 100%;
  animation: siteShimmer 1.4s ease infinite;
  border-radius: 10px;
}
@keyframes siteShimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* ============================================================
   Responsive spacing (spec: 120 desktop → tighter on small)
   ============================================================ */
@media (max-width: 1023px) {
  .site .section { padding: 88px 0; }
  .site .section-sm { padding: 56px 0; }
  .site .hero { padding: 72px 0 84px; }
}
@media (max-width: 767px) {
  .site .section { padding: 64px 0; }
  .site .section-sm { padding: 44px 0; }
  .site .hero { padding: 56px 0 66px; }
  .site .z-card { padding: 26px; }
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .site *, .site .reveal { animation: none !important; transition: none !important; }
  .site .reveal { opacity: 1 !important; transform: none !important; }
}