/* ===== Design Tokens =====
   Brand palette, accents, radii, and shadows. Product pages override
   --accent-* via a .theme-* class so each product reads as its own brand
   while sharing one layout system. */
:root {
    --ink: #1e293b;
    --ink-muted: #64748b;
    --ink-strong: #0f172a;
    --surface: #fff;
    --surface-subtle: #f8fafc;
    --hairline: #e2e8f0;

    --brand: #4f46e5;
    --brand-dark: #4338ca;

    /* Overridden per product by .theme-* */
    --accent: #4f46e5;
    --accent-strong: #4338ca;
    --accent-tint: rgba(79, 70, 229, 0.1);
    --accent-glow: rgba(79, 70, 229, 0.35);
    /* Decorative fills (icons, rules) — can be light. */
    --accent-gradient: linear-gradient(135deg, #4f46e5, #6366f1);
    /* Solid-enough fills that carry white text — keep these dark for contrast. */
    --accent-btn: linear-gradient(135deg, #4338ca, #4f46e5);

    --radius-sm: 10px;
    --radius: 16px;
    --radius-lg: 24px;
    --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.06);
    --shadow-lg: 0 20px 40px rgba(15, 23, 42, 0.1);
}

/* Per-product accents. Applied on a page wrapper or section. */
/* Product accents are sampled from each product's own live site. The Aug 2026
   portfolio report colours its DigiFI section emerald; the live site is dark
   forest green with an amber action colour, so the report reflects its own
   designer's palette, not the brands, and is not a source here.
   --accent carries body text on white, so it is the darkest shade that still
   reads as the brand; --accent-gradient is decorative only. A theme may also
   set --accent-btn-ink, --icon-ink, --hero-bg and --code-* where the brand
   needs more than an accent (see .theme-digifi). */
.theme-temrr {
    --accent: #047857;
    --accent-strong: #065f46;
    --accent-tint: #ecfdf5;
    --accent-glow: rgba(16, 185, 129, 0.35);
    --accent-gradient: linear-gradient(135deg, #10b981, #34d399);
    --accent-btn: linear-gradient(135deg, #065f46, #047857);
}

.theme-cortex-trade {
    --accent: #4f46e5;
    --accent-strong: #4338ca;
    --accent-tint: #eef2ff;
    --accent-glow: rgba(99, 102, 241, 0.35);
    --accent-gradient: linear-gradient(135deg, #6366f1, #22d3ee);
    --accent-btn: linear-gradient(135deg, #4338ca, #4f46e5);
}

.theme-cashflow {
    --accent: #2563eb;
    --accent-strong: #1d4ed8;
    --accent-tint: #eff6ff;
    --accent-glow: rgba(37, 99, 235, 0.35);
    --accent-gradient: linear-gradient(135deg, #2563eb, #7c3aed);
    --accent-btn: linear-gradient(135deg, #1e40af, #2563eb);
}

/* DigiFI, sampled from digifi.pocketpass.app: a dark forest green ground with
   amber as the action colour. Two colours rather than one, so this theme also
   sets the button ink, the icon glyph, the hero and the code block:
     #01271c  header / darkest ground      #013f32 -> #07503c  hero gradient
     #07503c  the green that reads green   #fbb716  amber CTA and logo mark
   The icon and card rule take the amber with a green glyph, mirroring the live
   logo lockup; a green-on-green icon disappeared against the green hero.
   Amber cannot carry text on white (1.9:1), so --accent stays green and amber
   is used where it sits on a dark ground or carries dark ink. */
.theme-digifi {
    --accent: #07503c;
    --accent-strong: #01271c;
    --accent-tint: #e8f2ed;
    --accent-glow: rgba(7, 80, 60, 0.45);
    --accent-gradient: linear-gradient(135deg, #fbb716, #fcd34d);
    --accent-btn: linear-gradient(135deg, #fbb716, #fcd34d);
    --accent-btn-ink: #01271c;
    --icon-ink: #01271c;
    --hero-bg: linear-gradient(135deg, #01271c 0%, #013f32 55%, #07503c 100%);
    --code-bg: #01271c;
    --code-ink: #e8f2ed;
    --code-comment: #fbb716;
}

/* ===== Global Typography ===== */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-weight: 400;
    color: #1e293b;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 800;
    letter-spacing: -0.02em;
}

.lead { font-weight: 400; }
.fw-medium { font-weight: 500; }
.fw-semibold { font-weight: 600; }

/* ===== Buttons — Pill-shaped ===== */
.btn {
    border-radius: 50px;
    font-weight: 600;
    letter-spacing: -0.01em;
    transition: all 0.25s ease;
}

.btn-lg {
    padding: 0.85rem 2.25rem;
    font-size: 1.05rem;
}

/* Hero / CTA button groups */
.hero-buttons {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.btn-light {
    background: #fff;
    border-color: #fff;
    color: #0f172a;
}

.btn-light:hover {
    background: #f1f5f9;
    border-color: #f1f5f9;
    color: #0f172a;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 255, 255, 0.15);
}

.btn-primary {
    background: linear-gradient(135deg, #4f46e5, #6366f1);
    border: none;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #4338ca, #4f46e5);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(79, 70, 229, 0.35);
}

.btn-outline-light:hover {
    transform: translateY(-2px);
}

.btn-outline-primary {
    border-width: 2px;
}

.btn-outline-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(79, 70, 229, 0.2);
}

/* ===== Navbar — Transparent to solid ===== */
.navbar {
    background: transparent !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: background-color 0.35s ease, box-shadow 0.35s ease, padding 0.35s ease;
    padding-top: 1rem;
    padding-bottom: 1rem;
    z-index: 1040;
}

.navbar-scrolled {
    background: rgba(10, 10, 26, 0.95) !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.15);
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.navbar-brand {
    font-size: 1.15rem;
    letter-spacing: -0.02em;
}

.nav-link {
    font-weight: 500;
    font-size: 0.9rem;
    letter-spacing: -0.01em;
    opacity: 0.85;
    transition: opacity 0.2s ease;
}

.nav-link:hover {
    opacity: 1;
}

/* ===== Hero Sections ===== */
.hero-section {
    background: linear-gradient(135deg, #0a0a1a 0%, #1a1a3e 40%, #0f2460 70%, #0a1628 100%);
    position: relative;
    overflow: hidden;
    padding-top: 7rem;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -30%;
    width: 80%;
    height: 200%;
    background: radial-gradient(ellipse, rgba(79, 70, 229, 0.08) 0%, transparent 60%);
    pointer-events: none;
}

.hero-section::after {
    content: '';
    position: absolute;
    bottom: -50%;
    right: -20%;
    width: 60%;
    height: 200%;
    background: radial-gradient(ellipse, rgba(99, 102, 241, 0.06) 0%, transparent 60%);
    pointer-events: none;
}

.hero-home {
    min-height: 100vh;
    display: flex;
    align-items: center;
}

.hero-home .container {
    position: relative;
    z-index: 1;
}

/* ===== Marketplace Hero ===== */
.marketplace-hero {
    background: linear-gradient(135deg, #0a0a1a 0%, #0f3460 50%, #1a365d 100%);
    position: relative;
    overflow: hidden;
    padding-top: 7rem;
}

.marketplace-hero::after {
    content: '';
    position: absolute;
    top: -40%;
    right: -15%;
    width: 50%;
    height: 180%;
    background: radial-gradient(ellipse, rgba(79, 70, 229, 0.07) 0%, transparent 60%);
    pointer-events: none;
}

/* ===== Product Hero (detail pages) ===== */
.product-hero {
    background: var(--hero-bg, linear-gradient(135deg, #0a0a1a 0%, #16213e 50%, #0f3460 100%));
    position: relative;
    overflow: hidden;
    padding-top: 7rem;
}

.product-hero::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 60%;
    height: 200%;
    background: radial-gradient(ellipse, rgba(255, 255, 255, 0.03) 0%, transparent 70%);
    pointer-events: none;
}

/* ===== Section Spacing ===== */
.py-section {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

@media (min-width: 992px) {
    .py-section {
        padding-top: 7rem;
        padding-bottom: 7rem;
    }
}

/* ===== Section Backgrounds ===== */
.bg-dark-gradient {
    background: linear-gradient(135deg, #0a0a1a 0%, #1a1a3e 50%, #0f172a 100%);
}

.bg-subtle {
    background-color: #f8fafc;
}

/* ===== Cards — Premium ===== */
.product-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1) !important;
}

.product-card .card-body {
    padding: 1.75rem;
}

.card-glass {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
}

/* ===== Service Cards ===== */
.service-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: none;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.service-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1) !important;
}

/* ===== Product Icons ===== */
.product-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--icon-ink, #fff);
    flex-shrink: 0;
}

.product-icon-wallet { background: linear-gradient(135deg, #667eea, #764ba2); }
.product-icon-digifi { background: linear-gradient(135deg, #fbb716, #fcd34d); }
.product-icon-temrr { background: linear-gradient(135deg, #10b981, #34d399); }
.product-icon-cortex-trade { background: linear-gradient(135deg, #6366f1, #22d3ee); }
.product-icon-cashflow { background: linear-gradient(135deg, #2563eb, #7c3aed); }
.product-icon-impact { background: linear-gradient(135deg, #fa709a, #fee140); }

.product-icon-lg {
    width: 72px;
    height: 72px;
    border-radius: 18px;
    font-size: 2rem;
}

/* ===== Value Prop Icon Containers ===== */
.icon-container {
    width: 72px;
    height: 72px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    margin: 0 auto 1.25rem;
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.1), rgba(99, 102, 241, 0.05));
    color: #4f46e5;
}

/* ===== Status Badges ===== */
.badge-beta {
    background-color: #4f46e5;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.3em 0.8em;
    border-radius: 20px;
}

.badge-live {
    background-color: var(--accent);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.3em 0.8em;
    border-radius: 20px;
}

.badge-preview {
    background-color: #f59e0b;
    color: #000;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.3em 0.8em;
    border-radius: 20px;
}

/* ===== CRM Status Badges ===== */
.badge-new { background-color: #4f46e5; }
.badge-contacted { background-color: #6f42c1; }
.badge-qualified { background-color: #ffc107; color: #000; }
.badge-proposal { background-color: #0dcaf0; color: #000; }
.badge-won { background-color: #198754; }
.badge-lost { background-color: #dc3545; }

/* ===== Category Tags ===== */
.product-tag {
    display: inline-block;
    font-size: 0.75rem;
    padding: 0.2em 0.65em;
    border-radius: 20px;
    background-color: #f1f5f9;
    color: #475569;
    margin-right: 0.35rem;
    margin-bottom: 0.35rem;
    font-weight: 500;
}

/* ===== Feature Items ===== */
.feature-item {
    padding: 1.75rem;
    border-radius: 16px;
    background: #fff;
    border: 1px solid #f1f5f9;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.feature-item:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    transform: translateY(-2px);
}

/* ===== Pricing Cards ===== */
.pricing-card {
    border-radius: 16px;
    border: 2px solid #e2e8f0;
    transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.pricing-card:hover {
    border-color: #4f46e5;
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(79, 70, 229, 0.1);
}

.pricing-card.featured {
    border-color: #4f46e5;
    box-shadow: 0 8px 30px rgba(79, 70, 229, 0.12);
}

/* ===== Stats Bar ===== */
.stats-bar .stat-item {
    padding: 0.75rem 0;
}

.stats-bar .stat-value {
    font-size: 1.75rem;
    font-weight: 800;
    color: #1e293b;
}

.stats-bar .stat-label {
    font-size: 0.8rem;
    color: #64748b;
    font-weight: 500;
}

/* ===== Trust Stats (dark variant) ===== */
.trust-stat-value {
    font-size: 3rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    background: linear-gradient(135deg, #fff 0%, #94a3b8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.trust-stat-label {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
}

/* ===== Activity Timeline ===== */
.activity-timeline {
    position: relative;
    padding-left: 30px;
}

.activity-timeline::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: #dee2e6;
}

.activity-item {
    position: relative;
    padding-bottom: 1.5rem;
}

.activity-item::before {
    content: '';
    position: absolute;
    left: -24px;
    top: 5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #4f46e5;
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px #4f46e5;
}

.activity-item.completed::before {
    background-color: #198754;
    box-shadow: 0 0 0 2px #198754;
}

/* Stat Card Hover */
.stat-card {
    transition: transform 0.15s ease-in-out;
}

.stat-card:hover {
    transform: translateY(-2px);
}

/* Chart Containers */
.chart-container {
    position: relative;
    height: 300px;
}

/* ===== Footer ===== */
.footer-section {
    background: linear-gradient(180deg, #0a0a1a 0%, #0f172a 100%);
}

.footer-link {
    transition: color 0.2s ease;
}

.footer-link:hover {
    color: #fff !important;
}

.footer-social-btn {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 0.85rem;
    border-color: rgba(255, 255, 255, 0.2);
    transition: all 0.25s ease;
}

.footer-social-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-2px);
}

/* ===== Scroll Animations ===== */
.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.fade-in-up.visible {
    opacity: 1;
    transform: translateY(0);
}

.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }

/* ===== CTA Section ===== */
.cta-section {
    background: linear-gradient(135deg, #0a0a1a 0%, #1a1a3e 50%, #0f2460 100%);
    position: relative;
    overflow: hidden;
}

.cta-section::before {
    content: '';
    position: absolute;
    top: -60%;
    right: -20%;
    width: 50%;
    height: 200%;
    background: radial-gradient(ellipse, rgba(79, 70, 229, 0.1) 0%, transparent 60%);
    pointer-events: none;
}

/* ===== Responsive Adjustments ===== */
@media (max-width: 991.98px) {
    .navbar-collapse {
        background: rgba(10, 10, 26, 0.98);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-radius: 12px;
        padding: 1rem;
        margin-top: 0.5rem;
    }

    .hero-home {
        min-height: auto;
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    .hero-buttons {
        flex-direction: column;
        align-items: center;
    }

    .hero-buttons.justify-content-start {
        align-items: flex-start;
    }

    .trust-stat-value {
        font-size: 2rem;
    }
}

/* ===== Product Status Badges =====
   Keys match Product.status, so the backoffice product list renders a
   coloured badge rather than an unstyled one. */
.badge-status-concept { background-color: #6c757d; }
.badge-status-preview { background-color: #0dcaf0; color: #000; }
.badge-status-beta { background-color: #ffc107; color: #000; }
.badge-status-ga { background-color: #198754; }
.badge-status-sunset { background-color: #adb5bd; color: #000; }

/* =====================================================================
   Marketing surface components
   Shared vocabulary for the public site: section headers, product heroes,
   feature grids, pricing, and cross-sell. Everything here reads --accent,
   so a .theme-* wrapper re-skins a whole page without new rules.
   ===================================================================== */

/* ===== Section Headers ===== */
.section-eyebrow {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 0.75rem;
}

.section-eyebrow-light {
    color: rgba(255, 255, 255, 0.55);
}

.section-lede {
    color: var(--ink-muted);
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
}

.text-gradient {
    background: linear-gradient(120deg, #a5b4fc 0%, #67e8f9 55%, #fff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ===== Accent-aware overrides =====
   Declared after the base rules so a themed page recolours buttons, icons,
   and badges without page-level style attributes. Scoped to .site-marketing
   (set by the public pages) so the internal marketing and CRM screens that
   share this stylesheet keep the Bootstrap defaults they were built against. */
.site-marketing .btn-primary {
    background: var(--accent-btn);
    color: var(--accent-btn-ink, #fff);
}

.site-marketing .btn-primary:hover,
.site-marketing .btn-primary:focus-visible {
    background: var(--accent-btn);
    color: var(--accent-btn-ink, #fff);
    filter: brightness(1.1);
    box-shadow: 0 8px 25px var(--accent-glow);
}

.site-marketing .btn-outline-primary {
    color: var(--accent);
    border-color: var(--accent);
}

.site-marketing .btn-outline-primary:hover,
.site-marketing .btn-outline-primary:focus-visible {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    box-shadow: 0 8px 25px var(--accent-glow);
}

.site-marketing .icon-container {
    background: var(--accent-tint);
    color: var(--accent);
}

.site-marketing .badge-beta,
.site-marketing .badge-live {
    background-color: var(--accent);
}

.site-marketing .text-primary { color: var(--accent) !important; }

/* ===== Product Hero ===== */
.product-hero::before {
    content: '';
    position: absolute;
    top: -60%;
    left: -10%;
    width: 70%;
    height: 220%;
    background: radial-gradient(ellipse, var(--accent-glow) 0%, transparent 62%);
    opacity: 0.35;
    pointer-events: none;
}

.product-hero .container {
    position: relative;
    z-index: 1;
}

.product-hero .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255, 255, 255, 0.4);
}

.hero-tagline {
    font-size: 1.05rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.75);
    letter-spacing: -0.01em;
}

/* Fact chips under a product hero headline */
.hero-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0 0 1.75rem;
}

.hero-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 50px;
    padding: 0.35rem 0.9rem;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.hero-chip i {
    font-size: 0.9rem;
    opacity: 0.75;
}

/* Decorative hero glyph (right column on large screens) */
.hero-glyph {
    width: 220px;
    height: 220px;
    margin: 0 auto;
    border-radius: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 6rem;
    color: #fff;
    background: var(--accent-gradient);
    box-shadow: 0 30px 80px var(--accent-glow);
    opacity: 0.92;
}

/* ===== Stats Bar ===== */
.stats-bar {
    border-bottom: 1px solid var(--hairline);
}

.stats-bar .stat-value {
    color: var(--accent);
}

/* ===== Feature Grid ===== */
.feature-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    background: var(--accent-tint);
    color: var(--accent);
    margin-bottom: 1rem;
}

.feature-item {
    border-color: var(--hairline);
    box-shadow: var(--shadow-sm);
}

.feature-item:hover {
    border-color: var(--accent);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
}

/* ===== Audience Cards ===== */
.audience-card {
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    height: 100%;
}

.audience-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.audience-card .audience-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    background: var(--accent-tint);
    color: var(--accent);
    margin-bottom: 1rem;
}

/* ===== Pricing ===== */
.pricing-card {
    border-color: var(--hairline);
}

.pricing-card:hover {
    border-color: var(--accent);
    box-shadow: 0 20px 40px var(--accent-tint);
}

.pricing-card.featured {
    border-color: var(--accent);
    box-shadow: 0 12px 40px var(--accent-tint);
}

.pricing-badge {
    position: absolute;
    top: -0.9rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent-btn);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.35em 1em;
    border-radius: 50px;
    white-space: nowrap;
    box-shadow: 0 6px 18px var(--accent-glow);
}

.pricing-card .price-figure {
    font-size: 2.75rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--ink-strong);
}

.pricing-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
    font-size: 0.925rem;
    color: #475569;
}

.pricing-list i {
    color: var(--accent);
    margin-top: 0.15rem;
}

/* ===== Product Showcase (products index) ===== */
.product-showcase {
    position: relative;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    height: 100%;
}

.product-showcase::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: var(--accent-gradient);
}

.product-showcase:hover {
    transform: translateY(-6px);
    border-color: var(--accent);
    box-shadow: var(--shadow-lg);
}

.product-showcase .showcase-body {
    padding: 2rem;
}

.showcase-highlights {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
}

.showcase-highlights li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.9rem;
    color: #475569;
    margin-bottom: 0.55rem;
}

.showcase-highlights i {
    color: var(--accent);
    margin-top: 0.2rem;
}

.showcase-price {
    font-size: 0.9rem;
    color: var(--ink-muted);
    border-top: 1px solid var(--hairline);
    padding-top: 1rem;
    margin-bottom: 1.25rem;
}

.showcase-price strong {
    color: var(--ink-strong);
}

/* ===== Comparison Table ===== */
.compare-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    overflow: hidden;
    font-size: 0.925rem;
}

.compare-table th,
.compare-table td {
    padding: 1rem 1.25rem;
    text-align: left;
    border-bottom: 1px solid var(--hairline);
    vertical-align: top;
}

.compare-table thead th {
    background: var(--surface-subtle);
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-muted);
    font-weight: 700;
}

.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td {
    border-bottom: none;
}

.compare-table tbody th {
    font-weight: 600;
    color: var(--ink-strong);
    white-space: nowrap;
}

.compare-table td {
    color: #475569;
}

.compare-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ===== Cross-sell ===== */
.cross-sell-card {
    display: block;
    height: 100%;
    padding: 1.5rem;
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    background: var(--surface);
    text-decoration: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.cross-sell-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: #cbd5e1;
}

.cross-sell-card h3 {
    color: var(--ink-strong);
}

.cross-sell-card p {
    color: var(--ink-muted);
    margin-bottom: 0;
}

/* ===== API code sample & endpoint list (DigiFI) ===== */
.code-sample {
    background: var(--code-bg, #0f172a);
    border: 1px solid #1e293b;
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
    overflow-x: auto;
}

.code-sample pre {
    margin: 0;
    color: var(--code-ink, #e2e8f0);
    font-size: 0.85rem;
    line-height: 1.7;
}

.code-sample code {
    font-family: 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace;
    color: inherit;
}

.code-sample .code-comment {
    color: var(--code-comment, #64748b);
}

.endpoint-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.endpoint-list li {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--hairline);
}

.endpoint-list li:last-child {
    border-bottom: 0;
}

.endpoint-list code {
    font-family: 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace;
    font-size: 0.8rem;
    color: var(--ink-strong);
}

.endpoint-method {
    flex-shrink: 0;
    min-width: 3.25rem;
    text-align: center;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 0.2em 0.5em;
    border-radius: 6px;
    color: #fff;
}

.endpoint-method.get { background-color: #334155; }
.endpoint-method.post { background-color: var(--accent, #4f46e5); }

.endpoint-note {
    flex: 1 1 100%;
    font-size: 0.8rem;
    color: var(--ink-muted);
    padding-left: 3.75rem;
}

/* ===== Legacy / retired product notice ===== */
.legacy-notice {
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
    color: #78350f;
}

.legacy-notice a {
    color: #92400e;
    font-weight: 600;
}

/* ===== Risk / regulatory disclosure =====
   Used where a product is required to carry a risk statement. Deliberately
   high-contrast: this must not read as decorative fine print. */
.risk-disclosure {
    background: #fef2f2;
    border: 1px solid #fca5a5;
    border-left: 4px solid #dc2626;
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
    color: #7f1d1d;
}

.risk-disclosure p {
    margin-bottom: 0;
}

/* ===== Link with animated arrow ===== */
.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--accent);
}

.link-arrow i {
    transition: transform 0.2s ease;
}

.link-arrow:hover i {
    transform: translateX(4px);
}

/* ===== Trust band ===== */
.trust-band {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* ===== Motion preferences =====
   Honour reduced-motion: reveal content immediately and drop hover lifts. */
@media (prefers-reduced-motion: reduce) {
    .fade-in-up {
        opacity: 1;
        transform: none;
        transition: none;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }

    .product-card:hover,
    .service-card:hover,
    .product-showcase:hover,
    .audience-card:hover,
    .pricing-card:hover,
    .cross-sell-card:hover,
    .btn:hover {
        transform: none;
    }
}

/* Without JS the observer never runs, so never hide content in the first place. */
.no-js .fade-in-up {
    opacity: 1;
    transform: none;
}

@media (max-width: 991.98px) {
    .hero-glyph {
        width: 150px;
        height: 150px;
        font-size: 4rem;
        border-radius: 36px;
    }

    .pricing-card .price-figure {
        font-size: 2.25rem;
    }
}