@charset "utf-8";

/* Baloo Bhaijaan 2 font family */
@font-face {
  font-family: "Baloo Bhaijaan 2";
  src: url("../fonts/BalooBhaijaan2-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Baloo Bhaijaan 2";
  src: url("../fonts/BalooBhaijaan2-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Baloo Bhaijaan 2";
  src: url("../fonts/BalooBhaijaan2-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Baloo Bhaijaan 2";
  src: url("../fonts/BalooBhaijaan2-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Baloo Bhaijaan 2";
  src: url("../fonts/BalooBhaijaan2-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}


:root {
    --nav-h: 72px;
    --radius-xl: 24px;
    --radius-lg: 16px;
    --radius-pill: 50px;
    --transition: 0.3s cubic-bezier(0.4,0,0.2,1);
    /* Brand Colors */
    --primary-dark: #212121;
    --primary-accent: #212121; /* Brand Dark */
    --primary-accent-dark: #000000;
    --primary-accent-light: #424242;
    --brand-green: #7fa91b;
    --brand-green-dark: #5e8012;
    --brand-green-light: #94c424;

    /* Bootstrap Overrides */
    --bs-primary: #7fa91b;
    --bs-primary-rgb: 127, 169, 27;
    --bs-link-color: #7fa91b;
    --bs-link-hover-color: #5e8012;

    /* Light Theme */
    --bg-color: #f0f2f5;
    --text-color: #212121;
    --text-muted: #4b5563;
    --glass-bg: rgba(255, 255, 255, 0.4);
    --glass-border: rgba(0, 0, 0, 0.12);
    --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.07);

    /* Gradients */
    --brand-gradient: linear-gradient(
        135deg,
        var(--primary-accent) 0%,
        var(--primary-accent-light) 100%
    );
    --success-gradient: linear-gradient(
        135deg,
        var(--brand-green) 0%,
        var(--brand-green-light) 100%
    );
    --success-gradient-hover: linear-gradient(
        135deg,
        var(--brand-green-dark) 0%,
        var(--brand-green) 100%
    );
    --surface-gradient: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.8) 0%,
        rgba(255, 255, 255, 0.4) 100%
    );

    /* Fonts */
    --font-heading: "Baloo Bhaijaan 2", sans-serif;
    --font-body: "Baloo Bhaijaan 2", sans-serif;

    /* ── Semantic Alpha Colors (derived from brand) ──────── */
    --brand-alpha-04:  rgba(127, 169, 27, 0.04);
    --brand-alpha-06:  rgba(127, 169, 27, 0.06);
    --brand-alpha-08:  rgba(127, 169, 27, 0.08);
    --brand-alpha-10:  rgba(127, 169, 27, 0.1);
    --brand-alpha-12:  rgba(127, 169, 27, 0.12);
    --brand-alpha-15:  rgba(127, 169, 27, 0.15);
    --brand-alpha-18:  rgba(127, 169, 27, 0.18);
    --brand-alpha-20:  rgba(127, 169, 27, 0.2);
    --brand-alpha-25:  rgba(127, 169, 27, 0.25);
    --brand-alpha-30:  rgba(127, 169, 27, 0.3);
    --brand-alpha-32:  rgba(127, 169, 27, 0.32);
    --brand-alpha-35:  rgba(127, 169, 27, 0.35);
    --brand-alpha-40:  rgba(127, 169, 27, 0.4);
    --brand-alpha-42:  rgba(127, 169, 27, 0.42);
    --brand-alpha-50:  rgba(127, 169, 27, 0.5);
    --brand-alpha-90:  rgba(127, 169, 27, 0.9);

    /* Stats section */
    --stats-bg-start:   #000000;
    --stats-bg-mid:     #111111;
    --stats-bg-end:     #1a1a1a;
    --stats-blob-1:     #7fa91b;
    --stats-blob-2:     #94c424;

    /* CTA section */
    --cta-bg: linear-gradient(135deg, #212121 0%, #1a2a1a 40%, #1c2a10 70%, #212121 100%);
    --cta-blob-1: rgba(127, 169, 27, 0.25);
    --cta-blob-2: rgba(148, 196, 36, 0.15);

    /* Trust bg */
    --trust-bg: linear-gradient(135deg, #f8faf3 0%, #f0f2f5 50%, #ecf0e8 100%);

    /* Hero blobs */
    --hero-blob-1: rgba(127, 169, 27, 0.25);
    --hero-blob-2: rgba(33, 33, 33, 0.15);
    --hero-blob-3: rgba(148, 196, 36, 0.2);

    /* Step icon backgrounds */
    --step-1-bg: linear-gradient(135deg, rgba(127,169,27,.15), rgba(148,196,36,.08));
    --step-2-bg: linear-gradient(135deg, rgba(33,33,33,.1), rgba(66,66,66,.05));
    --step-3-bg: linear-gradient(135deg, rgba(127,169,27,.2), rgba(94,128,18,.1));

    /* How bg accent */
    --how-bg-accent: radial-gradient(ellipse at top right, rgba(127,169,27,.08) 0%, transparent 60%);

    /* Static blobs */
    --blob-1-color: #7fa91b;
    --blob-2-color: #212121;
    --blob-3-color: #94c424;

    /* Category card gradients (7 slots for visual variety, all theme-aware) */
    --cat-gradient-1: linear-gradient(135deg, #1a2a1a 0%, #2d4a10 100%);
    --cat-gradient-2: linear-gradient(135deg, #1a1a2a 0%, #2a2a4a 100%);
    --cat-gradient-3: linear-gradient(135deg, #2a1a10 0%, #4a2a10 100%);
    --cat-gradient-4: linear-gradient(135deg, #1a2a2a 0%, #0d3d2a 100%);
    --cat-gradient-5: linear-gradient(135deg, #2a2a1a 0%, #4a4010 100%);
    --cat-gradient-6: linear-gradient(135deg, #2a1a2a 0%, #4a104a 100%);
    --cat-gradient-7: linear-gradient(135deg, #1a1a1a 0%, #3a3a3a 100%);
}

/* Theme Colors Overrides */
[data-theme-color="ocean-blue"] {
    --brand-green: #0ea5e9;
    --brand-green-dark: #0284c7;
    --brand-green-light: #38bdf8;
    --bs-primary: #0ea5e9;
    --bs-primary-rgb: 14, 165, 233;
    --bs-link-color: #0ea5e9;
    --bs-link-hover-color: #0284c7;

    --brand-alpha-06:  rgba(14, 165, 233, 0.06);
    --brand-alpha-08:  rgba(14, 165, 233, 0.08);
    --brand-alpha-10:  rgba(14, 165, 233, 0.1);
    --brand-alpha-12:  rgba(14, 165, 233, 0.12);
    --brand-alpha-15:  rgba(14, 165, 233, 0.15);
    --brand-alpha-18:  rgba(14, 165, 233, 0.18);
    --brand-alpha-20:  rgba(14, 165, 233, 0.2);
    --brand-alpha-25:  rgba(14, 165, 233, 0.25);
    --brand-alpha-30:  rgba(14, 165, 233, 0.3);
    --brand-alpha-32:  rgba(14, 165, 233, 0.32);
    --brand-alpha-35:  rgba(14, 165, 233, 0.35);
    --brand-alpha-40:  rgba(14, 165, 233, 0.4);
    --brand-alpha-42:  rgba(14, 165, 233, 0.42);
    --brand-alpha-50:  rgba(14, 165, 233, 0.5);
    --brand-alpha-90:  rgba(14, 165, 233, 0.9);

    --stats-blob-1: #0ea5e9; --stats-blob-2: #38bdf8;
    --cta-bg: linear-gradient(135deg, #0c1a2e 0%, #0a2240 40%, #0d2847 70%, #0c1a2e 100%);
    --cat-gradient-1: linear-gradient(135deg, #0c1a2e 0%, #0a2847 100%);
    --cat-gradient-2: linear-gradient(135deg, #0a1525 0%, #0d2038 100%);
    --cat-gradient-3: linear-gradient(135deg, #15100a 0%, #25200a 100%);
    --cat-gradient-4: linear-gradient(135deg, #0a2020 0%, #0d3038 100%);
    --cat-gradient-5: linear-gradient(135deg, #10152a 0%, #182040 100%);
    --cat-gradient-6: linear-gradient(135deg, #0a1030 0%, #101038 100%);
    --cat-gradient-7: linear-gradient(135deg, #101520 0%, #253040 100%);
    --cta-blob-1: rgba(14, 165, 233, 0.25); --cta-blob-2: rgba(56, 189, 248, 0.15);
    --trust-bg: linear-gradient(135deg, #f0f8ff 0%, #e8f4fd 50%, #dceefb 100%);
    --hero-blob-1: rgba(14, 165, 233, 0.25); --hero-blob-2: rgba(2, 132, 199, 0.15); --hero-blob-3: rgba(56, 189, 248, 0.2);
    --step-1-bg: linear-gradient(135deg, rgba(14,165,233,.15), rgba(56,189,248,.08));
    --step-3-bg: linear-gradient(135deg, rgba(14,165,233,.2), rgba(2,132,199,.1));
    --how-bg-accent: radial-gradient(ellipse at top right, rgba(14,165,233,.08) 0%, transparent 60%);
    --blob-1-color: #0ea5e9; --blob-3-color: #38bdf8;
}

[data-theme-color="sunset-orange"] {
    --brand-green: #f97316;
    --brand-green-dark: #c2410c;
    --brand-green-light: #fb923c;
    --bs-primary: #f97316;
    --bs-primary-rgb: 249, 115, 22;
    --bs-link-color: #f97316;
    --bs-link-hover-color: #c2410c;

    --brand-alpha-06:  rgba(249, 115, 22, 0.06);
    --brand-alpha-08:  rgba(249, 115, 22, 0.08);
    --brand-alpha-10:  rgba(249, 115, 22, 0.1);
    --brand-alpha-12:  rgba(249, 115, 22, 0.12);
    --brand-alpha-15:  rgba(249, 115, 22, 0.15);
    --brand-alpha-18:  rgba(249, 115, 22, 0.18);
    --brand-alpha-20:  rgba(249, 115, 22, 0.2);
    --brand-alpha-25:  rgba(249, 115, 22, 0.25);
    --brand-alpha-30:  rgba(249, 115, 22, 0.3);
    --brand-alpha-32:  rgba(249, 115, 22, 0.32);
    --brand-alpha-35:  rgba(249, 115, 22, 0.35);
    --brand-alpha-40:  rgba(249, 115, 22, 0.4);
    --brand-alpha-42:  rgba(249, 115, 22, 0.42);
    --brand-alpha-50:  rgba(249, 115, 22, 0.5);
    --brand-alpha-90:  rgba(249, 115, 22, 0.9);

    --stats-blob-1: #f97316; --stats-blob-2: #fb923c;
    --cta-bg: linear-gradient(135deg, #2d1a0a 0%, #3d1f08 40%, #2a1a0d 70%, #2d1a0a 100%);
    --cat-gradient-1: linear-gradient(135deg, #2a1a0a 0%, #3d1f08 100%);
    --cat-gradient-2: linear-gradient(135deg, #1a1520 0%, #2a2030 100%);
    --cat-gradient-3: linear-gradient(135deg, #2a1508 0%, #4a2510 100%);
    --cat-gradient-4: linear-gradient(135deg, #1a2015 0%, #2a3010 100%);
    --cat-gradient-5: linear-gradient(135deg, #2a2010 0%, #403010 100%);
    --cat-gradient-6: linear-gradient(135deg, #2a1020 0%, #401030 100%);
    --cat-gradient-7: linear-gradient(135deg, #1a1a1a 0%, #3a3a3a 100%);
    --cta-blob-1: rgba(249, 115, 22, 0.25); --cta-blob-2: rgba(251, 146, 60, 0.15);
    --trust-bg: linear-gradient(135deg, #fff8f0 0%, #fef3e8 50%, #fdecd8 100%);
    --hero-blob-1: rgba(249, 115, 22, 0.25); --hero-blob-2: rgba(194, 65, 12, 0.15); --hero-blob-3: rgba(251, 146, 60, 0.2);
    --step-1-bg: linear-gradient(135deg, rgba(249,115,22,.15), rgba(251,146,60,.08));
    --step-3-bg: linear-gradient(135deg, rgba(249,115,22,.2), rgba(194,65,12,.1));
    --how-bg-accent: radial-gradient(ellipse at top right, rgba(249,115,22,.08) 0%, transparent 60%);
    --blob-1-color: #f97316; --blob-3-color: #fb923c;
}

[data-theme-color="amethyst-purple"] {
    --brand-green: #8b5cf6;
    --brand-green-dark: #6d28d9;
    --brand-green-light: #a78bfa;
    --bs-primary: #8b5cf6;
    --bs-primary-rgb: 139, 92, 246;
    --bs-link-color: #8b5cf6;
    --bs-link-hover-color: #6d28d9;

    --brand-alpha-06:  rgba(139, 92, 246, 0.06);
    --brand-alpha-08:  rgba(139, 92, 246, 0.08);
    --brand-alpha-10:  rgba(139, 92, 246, 0.1);
    --brand-alpha-12:  rgba(139, 92, 246, 0.12);
    --brand-alpha-15:  rgba(139, 92, 246, 0.15);
    --brand-alpha-18:  rgba(139, 92, 246, 0.18);
    --brand-alpha-20:  rgba(139, 92, 246, 0.2);
    --brand-alpha-25:  rgba(139, 92, 246, 0.25);
    --brand-alpha-30:  rgba(139, 92, 246, 0.3);
    --brand-alpha-32:  rgba(139, 92, 246, 0.32);
    --brand-alpha-35:  rgba(139, 92, 246, 0.35);
    --brand-alpha-40:  rgba(139, 92, 246, 0.4);
    --brand-alpha-42:  rgba(139, 92, 246, 0.42);
    --brand-alpha-50:  rgba(139, 92, 246, 0.5);
    --brand-alpha-90:  rgba(139, 92, 246, 0.9);

    --stats-blob-1: #8b5cf6; --stats-blob-2: #a78bfa;
    --cta-bg: linear-gradient(135deg, #1a0d2e 0%, #220f3d 40%, #1e1040 70%, #1a0d2e 100%);
    --cat-gradient-1: linear-gradient(135deg, #1a0d2e 0%, #220f3d 100%);
    --cat-gradient-2: linear-gradient(135deg, #100d28 0%, #201840 100%);
    --cat-gradient-3: linear-gradient(135deg, #201510 0%, #352010 100%);
    --cat-gradient-4: linear-gradient(135deg, #0d2020 0%, #103030 100%);
    --cat-gradient-5: linear-gradient(135deg, #1a1520 0%, #302040 100%);
    --cat-gradient-6: linear-gradient(135deg, #0d0d28 0%, #1a1040 100%);
    --cat-gradient-7: linear-gradient(135deg, #151520 0%, #303040 100%);
    --cta-blob-1: rgba(139, 92, 246, 0.25); --cta-blob-2: rgba(167, 139, 250, 0.15);
    --trust-bg: linear-gradient(135deg, #faf8ff 0%, #f3f0ff 50%, #eae5ff 100%);
    --hero-blob-1: rgba(139, 92, 246, 0.25); --hero-blob-2: rgba(109, 40, 217, 0.15); --hero-blob-3: rgba(167, 139, 250, 0.2);
    --step-1-bg: linear-gradient(135deg, rgba(139,92,246,.15), rgba(167,139,250,.08));
    --step-3-bg: linear-gradient(135deg, rgba(139,92,246,.2), rgba(109,40,217,.1));
    --how-bg-accent: radial-gradient(ellipse at top right, rgba(139,92,246,.08) 0%, transparent 60%);
    --blob-1-color: #8b5cf6; --blob-3-color: #a78bfa;
}

[data-theme-color="rose-pink"] {
    --brand-green: #f43f5e;
    --brand-green-dark: #be123c;
    --brand-green-light: #fb7185;
    --bs-primary: #f43f5e;
    --bs-primary-rgb: 244, 63, 94;
    --bs-link-color: #f43f5e;
    --bs-link-hover-color: #be123c;

    --brand-alpha-06:  rgba(244, 63, 94, 0.06);
    --brand-alpha-08:  rgba(244, 63, 94, 0.08);
    --brand-alpha-10:  rgba(244, 63, 94, 0.1);
    --brand-alpha-12:  rgba(244, 63, 94, 0.12);
    --brand-alpha-15:  rgba(244, 63, 94, 0.15);
    --brand-alpha-18:  rgba(244, 63, 94, 0.18);
    --brand-alpha-20:  rgba(244, 63, 94, 0.2);
    --brand-alpha-25:  rgba(244, 63, 94, 0.25);
    --brand-alpha-30:  rgba(244, 63, 94, 0.3);
    --brand-alpha-32:  rgba(244, 63, 94, 0.32);
    --brand-alpha-35:  rgba(244, 63, 94, 0.35);
    --brand-alpha-40:  rgba(244, 63, 94, 0.4);
    --brand-alpha-42:  rgba(244, 63, 94, 0.42);
    --brand-alpha-50:  rgba(244, 63, 94, 0.5);
    --brand-alpha-90:  rgba(244, 63, 94, 0.9);

    --stats-blob-1: #f43f5e; --stats-blob-2: #fb7185;
    --cta-bg: linear-gradient(135deg, #2d0a12 0%, #3d0c19 40%, #2d0f18 70%, #2d0a12 100%);
    --cat-gradient-1: linear-gradient(135deg, #2d0a12 0%, #3d0c19 100%);
    --cat-gradient-2: linear-gradient(135deg, #1a1020 0%, #2a1830 100%);
    --cat-gradient-3: linear-gradient(135deg, #2a1510 0%, #401510 100%);
    --cat-gradient-4: linear-gradient(135deg, #1a1520 0%, #0d2028 100%);
    --cat-gradient-5: linear-gradient(135deg, #2a1520 0%, #401020 100%);
    --cat-gradient-6: linear-gradient(135deg, #200a20 0%, #350a35 100%);
    --cat-gradient-7: linear-gradient(135deg, #201a1a 0%, #3a2a2a 100%);
    --cta-blob-1: rgba(244, 63, 94, 0.25); --cta-blob-2: rgba(251, 113, 133, 0.15);
    --trust-bg: linear-gradient(135deg, #fff0f3 0%, #ffe8ed 50%, #ffdde3 100%);
    --hero-blob-1: rgba(244, 63, 94, 0.25); --hero-blob-2: rgba(190, 18, 60, 0.15); --hero-blob-3: rgba(251, 113, 133, 0.2);
    --step-1-bg: linear-gradient(135deg, rgba(244,63,94,.15), rgba(251,113,133,.08));
    --step-3-bg: linear-gradient(135deg, rgba(244,63,94,.2), rgba(190,18,60,.1));
    --how-bg-accent: radial-gradient(ellipse at top right, rgba(244,63,94,.08) 0%, transparent 60%);
    --blob-1-color: #f43f5e; --blob-3-color: #fb7185;
}

/* Bootstrap Overrides */
.text-success {
    color: var(--brand-green) !important;
}
.bg-success {
    background: var(--success-gradient) !important;
}
.btn-success {
    background: var(--success-gradient);
    border: none;
    color: #fff;
    box-shadow: 0 4px 15px rgba(var(--bs-primary-rgb), 0.3);
}
.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active {
    background: var(--success-gradient-hover) !important;
    color: #fff !important;
    box-shadow: 0 6px 20px rgba(var(--bs-primary-rgb), 0.4);
    transform: translateY(-1px);
}

[data-theme="dark"] {
    --bg-color: #0f1115; /* Deep, rich dark */
    --text-color: #ffffff;
    --text-muted: #9ca3af;
    --glass-bg: rgba(25, 28, 36, 0.6);
    --glass-border: rgba(255, 255, 255, 0.12);
    --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
    --surface-gradient: linear-gradient(
        180deg,
        rgba(30, 34, 42, 0.8) 0%,
        rgba(20, 22, 28, 0.4) 100%
    );
}

html,
body {
    overflow-x: hidden;
    max-width: 100%;
}

a {
    text-decoration: none !important;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-heading); /* Default for Arabic */
    transition: background-color 0.4s ease;
}

/* Glassmorphism Classes */
.glass {
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
}

.glass-card {
    background: var(--surface-gradient);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 24px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.glass-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
    border-color: var(--primary-accent);
}

.bg-alt {
    background-color: #fafafa;
}

[data-theme="dark"] .bg-alt {
    background-color: #0d0f12 !important;
}

/* ── Modern Header System ────────────────────────────────── */
.main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1050;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.4s ease, backdrop-filter 0.4s ease;
    padding: 1.25rem 0;
}

/* Smart Navbar behavior */
.main-header.nav-hidden {
    transform: translateY(-100%);
}

.main-header.nav-scrolled {
    padding: 0.75rem 0;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
}

.navbar-brand img {
    height: 44px;
    transition: var(--transition);
}

.main-header.nav-scrolled .navbar-brand img {
    height: 38px;
}

.nav-link-modern {
    color: var(--text-color);
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.5rem 1rem;
    position: relative;
    transition: var(--transition);
    opacity: 0.85;
}

.nav-link-modern:hover {
    color: var(--brand-green);
    opacity: 1;
}

.nav-link-modern::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 1rem;
    right: 1rem;
    height: 2px;
    background: var(--brand-green);
    transform: scaleX(0);
    transition: var(--transition);
    transform-origin: right;
}

.nav-link-modern:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

.nav-link-modern.active {
    color: var(--brand-green);
    opacity: 1;
}

.nav-link-modern.active::after {
    transform: scaleX(1);
}

/* Mobile Menu Trigger */
.menu-trigger {
    width: 40px;
    height: 40px;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    background: var(--brand-alpha-08);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: var(--transition);
}

.menu-trigger span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--primary-accent);
    border-radius: 2px;
    transition: var(--transition);
}

.menu-trigger.active {
    background: var(--brand-green);
}

.menu-trigger.active span {
    background: #fff;
}

.menu-trigger.active span:nth-child(1) { transform: rotate(45deg) translate(5.5px, 5.5px); }
.menu-trigger.active span:nth-child(2) { opacity: 0; }
.menu-trigger.active span:nth-child(3) { transform: rotate(-45deg) translate(5.5px, -5.5px); }

/* Mobile Overlay */
.mobile-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #fff;
    z-index: 1040;
    padding: 100px 2rem 2rem;
    transform: translateX(100%);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
}

.mobile-overlay.active {
    transform: translateX(0);
}

.mobile-link {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-color);
    text-decoration: none;
    padding: 1rem 0;
    border-bottom: 1px solid #f0f0f0;
    transition: var(--transition);
}

.mobile-link:hover {
    color: var(--brand-green);
    padding-left: 10px;
}

/* Typography & Hero */
.display-title {
    font-weight: 800;
    font-size: 3.5rem;
    line-height: 1.2;
    background: linear-gradient(
        135deg,
        var(--brand-green-dark) 30%,
        var(--brand-green) 100%
    );
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.text-gradient {
    color: var(--primary-accent);
}

/* Buttons */
.btn-brand {
    background: var(--brand-gradient);
    color: white;
    font-weight: 700;
    padding: 0.8rem 2rem;
    border-radius: 50px;
    border: none;
    box-shadow: 0 10px 20px var(--brand-alpha-30);
    transition: all 0.3s ease;
}

.btn-brand:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 30px var(--brand-alpha-40);
    color: white;
}

.btn-brand:disabled {
    opacity: 0.5;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
    background: var(--text-muted) !important;
}

.btn-glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    color: var(--text-color);
    font-weight: 600;
    padding: 0.8rem 2rem;
    border-radius: 50px;
}

.btn-glass:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: var(--text-color);
    color: var(--text-color);
}

/* Floating Animation */
@keyframes float {
    0% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-15px) rotate(2deg);
    }
    100% {
        transform: translateY(0px) rotate(0deg);
    }
}

.float-element {
    animation: float 6s ease-in-out infinite;
}

@keyframes pulse-ring {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.6;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.08);
        opacity: 0.2;
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.6;
    }
}

@keyframes blink {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.4;
    }
}

@keyframes hero-rotate {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes hero-glow {
    0%,
    100% {
        box-shadow: 0 0 20px var(--brand-alpha-20),
            0 8px 30px rgba(0, 0, 0, 0.08);
    }
    50% {
        box-shadow: 0 0 35px var(--brand-alpha-35),
            0 8px 30px rgba(0, 0, 0, 0.12);
    }
}

@keyframes hero-float {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

@keyframes hero-float-center {
    0%,
    100% {
        transform: translateY(0) translateX(-50%);
    }
    50% {
        transform: translateY(-8px) translateX(-50%);
    }
}

@keyframes hero-dash {
    from {
        stroke-dashoffset: 20;
    }
    to {
        stroke-dashoffset: 0;
    }
}

.hero-layer-node {
    transition: transform 0.3s ease;
}

.hero-layer-node:hover {
    z-index: 10;
    transform: scale(1.1) !important;
}

/* Showcase Stats */
.showcase-stat-card {
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.showcase-stat-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, 0.15) !important;
}

.showcase-stat-card:hover .showcase-stat-glow {
    opacity: 1 !important;
    transition: opacity 0.4s ease;
}

@keyframes showcase-bar {
    0%,
    100% {
        transform: scaleY(1);
    }
    50% {
        transform: scaleY(0.6);
    }
}

@keyframes showcase-ring {
    from {
        stroke-dashoffset: 94.2;
    }
}

@keyframes showcase-dot {
    0%,
    100% {
        transform: scale(1);
        opacity: 0.7;
    }
    50% {
        transform: scale(1.4);
        opacity: 1;
    }
}

/* Grids & Sections */
.feature-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: var(--brand-alpha-15);
    color: var(--primary-accent);
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
}

.section-padding {
    padding: 6rem 0;
}

/* Infinite Scroll */
.ticker-wrap {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    mask-image: linear-gradient(
        to right,
        transparent,
        black 10%,
        black 90%,
        transparent
    );
}

.ticker {
    display: inline-block;
    animation: ticker 40s linear infinite;
}

@keyframes ticker {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-100% - 2rem));
    } /* Adjust based on content */
}

.ticker__item {
    display: inline-block;
    padding: 0 2rem;
    opacity: 0.6;
    transition: opacity 0.3s;
    filter: grayscale(100%);
}

.ticker__item:hover {
    opacity: 1;
    filter: grayscale(0%);
}

/* Stats */
.stat-card {
    text-align: center;
    padding: 2rem;
}

.stat-number {
    font-size: 3rem;
    font-weight: 800;
    color: var(--primary-accent);
}

/* Footer */
footer {
    background: var(--bg-color);
    border-top: 1px solid var(--glass-border);
    padding-top: 4rem;
}

.footer-link {
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.2s;
    display: block;
    margin-bottom: 0.8rem;
}

.footer-link:hover {
    color: var(--primary-accent);
}

/* Shapes */
.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    z-index: -1;
    opacity: 0.4;
}

.blob-1 {
    top: -10%;
    left: -5%;
    width: 500px;
    height: 500px;
    background: var(--blob-1-color);
}
.blob-2 {
    bottom: 10%;
    right: -5%;
    width: 400px;
    height: 400px;
    background: var(--blob-2-color);
}
.blob-3 {
    top: 40%;
    left: 40%;
    width: 300px;
    height: 300px;
    background: var(--blob-3-color);
    opacity: 0.2;
}

/* Custom Code Block */
.code-block {
    background: #1e1e1e;
    border-radius: 12px;
    padding: 1.5rem;
    font-family: "Fira Code", monospace;
    font-size: 0.9rem;
    color: #d4d4d4;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.code-line {
    display: block;
    margin-bottom: 0.5rem;
}
.keyword {
    color: #569cd6;
}
.string {
    color: #ce9178;
}
.function {
    color: #dcdcaa;
}

/* Responsive adjustments */
@media (max-width: 991px) {
    .display-title {
        font-size: 2.5rem;
    }

    .section-padding {
        padding: 4rem 0;
    }
    .navbar-collapse {
        background: var(--glass-bg);
        backdrop-filter: blur(20px);
        border-radius: 16px;
        padding: 1rem;
        margin-top: 1rem;
        border: 1px solid var(--glass-border);
    }
}

@media (max-width: 576px) {
    .display-title {
        font-size: 2rem;
    }
    .hero-section {
        min-height: auto !important;
        padding-top: 6rem !important;
        padding-bottom: 4rem;
    }
    .glass-card {
        padding: 1.5rem !important;
    }
    .btn-brand,
    .btn-glass {
        padding: 0.6rem 1.5rem;
        width: 100%;
        display: block;
        text-align: center;
    }
    .d-flex.gap-3.flex-wrap {
        gap: 0.5rem !important;
    }
}

.transition-img {
    transition: opacity 0.2s ease-in-out;
}
.cursor-pointer {
    cursor: pointer;
}

/* Bootstrap Overrides */
.text-success {
    color: var(--brand-green) !important;
}
.bg-success {
    background: var(--success-gradient) !important;
}
.btn-success {
    background: var(--success-gradient);
    border: none;
    color: #fff;
    box-shadow: 0 4px 15px rgba(127, 169, 27, 0.3);
}
.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active {
    background: var(--success-gradient-hover) !important;
    color: #fff !important;
    box-shadow: 0 6px 20px rgba(127, 169, 27, 0.4);
    transform: translateY(-1px);
}

.btn:disabled,
.btn.disabled,
fieldset:disabled .btn,
.btn-primary:disabled,
.btn-primary.disabled {
    background-color: var(--brand-alpha-50) !important;
    border-color: var(--brand-alpha-50) !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

.btn-outline-primary {
    color: var(--brand-green);
    border-color: var(--brand-green);
}
.btn-outline-primary:hover,
.btn-outline-primary:active,
.btn-outline-primary.active {
    background-color: var(--brand-green) !important;
    border-color: var(--brand-green) !important;
    color: white !important;
}
.btn-outline-primary:disabled,
.btn-outline-primary.disabled {
    color: var(--brand-alpha-50) !important;
    border-color: var(--brand-alpha-50) !important;
    background-color: transparent !important;
}

.btn-check:checked + .btn-outline-primary,
.btn-check:active + .btn-outline-primary {
    background-color: var(--brand-green) !important;
    border-color: var(--brand-green) !important;
    color: white !important;
}

.dropdown-item:active,
.dropdown-item.active {
    background-color: var(--brand-green) !important;
    color: #fff !important;
}
.dropdown-item:focus,
.dropdown-item:hover {
    background-color: var(--brand-alpha-10);
    color: var(--brand-green-dark);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--brand-green);
    box-shadow: 0 0 0 0.25rem var(--brand-alpha-25);
}

.btn-outline-success {
    color: var(--brand-green);
    border-color: var(--brand-green);
}
.btn-outline-success:hover,
.btn-outline-success:focus,
.btn-outline-success:active,
.btn-outline-success.active {
    background-color: var(--brand-green) !important;
    border-color: var(--brand-green) !important;
    color: #fff !important;
}
.border-success {
    border-color: var(--brand-green) !important;
}
.link-success {
    color: var(--brand-green) !important;
}
.alert-success {
    background-color: var(--brand-alpha-10);
    border-color: var(--brand-alpha-12);
    color: var(--brand-green-dark);
}

.btn-primary {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}
.btn-primary:hover {
    background-color: var(--bs-link-hover-color);
    border-color: var(--bs-link-hover-color);
}

[data-dir="rtl"] {
    direction: rtl;
    text-align: right;
}

/* Code block scrolling */
.code-block {
    overflow-x: auto;
}

/* ═══════════════════════════════════════════════════════════
   Branded Pagination & Switches
   ═══════════════════════════════════════════════════════════ */

/* Custom Pagination Branding */
.pagination {
    --bs-pagination-padding-x: 0.85rem;
    --bs-pagination-padding-y: 0.45rem;
    --bs-pagination-font-size: 0.95rem;
    --bs-pagination-color: var(--text-color);
    --bs-pagination-bg: transparent;
    --bs-pagination-border-width: 0;
    --bs-pagination-active-color: #fff;
    --bs-pagination-active-bg: var(--brand-green);
    --bs-pagination-active-border-color: var(--brand-green);
    --bs-pagination-hover-color: var(--brand-green);
    --bs-pagination-hover-bg: var(--brand-alpha-10);
    --bs-pagination-disabled-color: var(--text-muted);
    --bs-pagination-disabled-bg: transparent;
    gap: 6px;
}

.page-link {
    border-radius: 12px !important;
    font-weight: 600;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
}

.page-item.active .page-link {
    box-shadow: 0 4px 12px var(--brand-alpha-30);
}

.page-item.disabled .page-link {
    opacity: 0.5;
}

/* Custom Switches & Checkboxes */
.form-check-input {
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.form-check-input:checked {
    background-color: var(--brand-green);
    border-color: var(--brand-green);
}

.form-check-input:focus {
    border-color: var(--brand-green);
    box-shadow: 0 0 0 0.25rem var(--brand-alpha-20);
}

.form-switch .form-check-input {
    width: 2.8em;
    height: 1.4em;
    margin-left: -3.3em; /* Adjusted for RTL typically, but Bootstrap Handles it */
}

/* Specific fix for RTL switches if needed */
[dir="rtl"] .form-switch {
    padding-right: 3.5em;
    padding-left: 0;
}

[dir="rtl"] .form-switch .form-check-input {
    margin-right: -3.5em;
    margin-left: 0;
    float: right;
}

.form-switch .form-check-input:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

/* End of File */



/* ═══════════════════════════════════════════════════════════
   STOREFRONT CUSTOM STYLES (Merged from store.css)
   ═══════════════════════════════════════════════════════════ */

/* ── Reset ────────────────────────────────────────────── */
.store-shell{scroll-behavior:smooth;overflow-x:hidden;font-family:var(--font-body);background:var(--bg-color);color:var(--text-color);transition:background .4s ease,color .3s ease}
.store-shell img{max-width:100%;display:block}
.store-shell a{text-decoration:none;color:inherit}
.store-shell ul{list-style:none}

/* ── Keyframes ────────────────────────────────────────── */
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes floatB{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-10px) rotate(3deg)}}
@keyframes blobPulse{0%,100%{border-radius:60% 40% 70% 30%/50% 60% 40% 70%;transform:scale(1)}50%{border-radius:40% 70% 30% 60%/60% 40% 70% 50%;transform:scale(1.05)}}
@keyframes shimmer{0%{background-position:-200% center}100%{background-position:200% center}}
@keyframes ticker{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
@keyframes scaleIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes countUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes borderGlow{0%,100%{box-shadow:0 0 0 0 rgba(0,0,0,0)}50%{box-shadow:0 0 0 6px var(--brand-alpha-18)}}
@keyframes ripple{0%{transform:scale(0);opacity:.6}100%{transform:scale(3);opacity:0}}

/* ── Utilities ────────────────────────────────────────── */
.section-pad{padding:7rem 0}
.store-shell .container{width:100%;max-width:1200px;margin:0 auto;padding:0 1.5rem}
.text-green{color:var(--brand-green)}
.store-shell .text-muted{color:var(--text-muted)}
.font-heading{font-family:var(--font-heading)}
.store-shell .glass{background:var(--glass-bg);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow)}
.store-shell .glass-card{background:var(--surface-gradient);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--glass-border);border-radius:var(--radius-xl);transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition)}
.store-shell .glass-card:hover{transform:translateY(-6px);box-shadow:0 20px 50px rgba(0,0,0,0.12);border-color:var(--brand-green)}
.btn-brand{display:inline-flex;align-items:center;gap:.5rem;background:var(--success-gradient);color:#fff;font-family:var(--font-heading);font-weight:700;font-size:1rem;padding:.8rem 2rem;border-radius:var(--radius-pill);border:none;cursor:pointer;box-shadow:0 8px 24px var(--brand-alpha-32);transition:all var(--transition);position:relative;overflow:hidden}
.btn-brand::after{content:'';position:absolute;inset:0;background:rgba(255,255,255,.1);transform:translateX(-100%);transition:transform .4s ease}
.btn-brand:hover{transform:translateY(-2px);box-shadow:0 14px 32px var(--brand-alpha-42)}
.btn-brand:hover::after{transform:translateX(0)}
.store-shell .btn-dark{display:inline-flex;align-items:center;gap:.5rem;background:var(--brand-gradient);color:#fff;font-family:var(--font-heading);font-weight:700;font-size:1rem;padding:.8rem 2rem;border-radius:var(--radius-pill);border:none;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,0.2);transition:all var(--transition)}
.store-shell .btn-dark:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(0,0,0,0.3)}
.btn-outline{display:inline-flex;align-items:center;gap:.5rem;background:transparent;color:var(--text-color);font-family:var(--font-heading);font-weight:600;font-size:1rem;padding:.75rem 1.8rem;border-radius:var(--radius-pill);border:1.5px solid var(--glass-border);cursor:pointer;transition:all var(--transition)}
.btn-outline:hover{border-color:var(--brand-green);color:var(--brand-green);background:var(--brand-alpha-06)}
.badge-green{display:inline-flex;align-items:center;gap:.4rem;background:var(--brand-alpha-12);color:var(--brand-green);font-family:var(--font-body);font-weight:600;font-size:.78rem;padding:.35rem .9rem;border-radius:var(--radius-pill);border:1px solid var(--brand-alpha-20);letter-spacing:.04em;text-transform:uppercase}
.section-label{font-family:var(--font-body);font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-green);margin-bottom:.75rem}
.section-title{font-family:var(--font-heading);font-weight:800;font-size:clamp(2rem,4vw,3rem);line-height:1.15;color:var(--text-color)}
.gradient-text{background:var(--success-gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.store-shell .text-muted{color:var(--text-muted) !important}
.store-shell .blob{position:absolute;border-radius:50%;filter:blur(100px);z-index:0 !important;pointer-events:none}

/* ── Navbar ───────────────────────────────────────────── */
.store-shell .navbar{position:fixed;top:0;left:0;right:0;height:var(--nav-h);z-index:1000;transition:all .4s ease;padding:0 !important}
.store-shell .navbar.scrolled{background:var(--glass-bg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--glass-border);box-shadow:0 4px 20px rgba(0,0,0,.06)}
.store-shell .nav-inner{display:flex !important;align-items:center;justify-content:space-between !important;height:100%;width:100%;gap:1rem}
.nav-logo{font-family:var(--font-heading);font-size:1.6rem;font-weight:800;display:flex;align-items:center;gap:.6rem}
.nav-logo span.dot{width:8px;height:8px;border-radius:50%;background:var(--success-gradient);display:inline-block}
.nav-logo img{height:40px;width:auto;object-fit:contain}
.nav-logo .logo-name{font-family:var(--font-heading);font-weight:800;font-size:1.2rem}
.store-shell .nav-links{display:flex;align-items:center;gap:.25rem}
.store-shell .nav-link{font-family:var(--font-body);font-weight:600;font-size:.95rem;padding:.45rem .9rem;border-radius:var(--radius-lg);transition:all var(--transition);color:var(--text-color)}
.store-shell .nav-link:hover,.store-shell .nav-link.active{background:var(--brand-alpha-10);color:var(--brand-green)}
.nav-actions{display:flex;align-items:center;gap:.75rem}
.icon-btn{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;border:1px solid var(--glass-border);background:var(--glass-bg);cursor:pointer;font-size:1.1rem;color:var(--text-color);transition:all var(--transition);position:relative}
.icon-btn:hover{border-color:var(--brand-green);color:var(--brand-green)}
.icon-btn .badge{position:absolute;top:-4px;right:-4px;width:16px;height:16px;background:var(--success-gradient);border-radius:50%;font-size:.6rem;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700}
.theme-toggle{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:12px;padding:0;cursor:pointer;display:flex;align-items:center;gap:.4rem;font-size:.85rem;color:var(--text-color);transition:all var(--transition);width:40px;height:40px;justify-content:center;}
.theme-toggle:hover{border-color:var(--brand-green)}

/* ── Navbar Expandable Search ─────────────────────────── */
.nav-search-wrap{display:flex;align-items:center;position:relative}
.nav-search-wrap input{width:0;opacity:0;padding:0;border:1px solid var(--glass-border);border-radius:var(--radius-pill);background:var(--glass-bg);backdrop-filter:blur(12px);font-size:.92rem;font-family:var(--font-body);color:var(--text-color);outline:none;transition:all .35s ease;height:40px}
.nav-search-wrap input::placeholder{color:var(--text-muted)}
.nav-search-wrap.open input{width:220px;opacity:1;padding:0 .9rem;margin-right:.5rem;border-color:var(--brand-green)}
@media(max-width:600px){
  .nav-search-wrap.open input{width:140px}
}

/* ── Hero ─────────────────────────────────────────────── */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;overflow:clip;padding-top:var(--nav-h)}
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-bg .blob{position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none;z-index:0 !important;opacity:1 !important;left:auto !important;right:auto !important;top:auto !important;bottom:auto !important}
.hero-bg .blob-1{width:600px;height:600px;background:var(--hero-blob-1) !important;top:-15% !important;inset-inline-start:-8%;animation:blobPulse 10s ease-in-out infinite}
.hero-bg .blob-2{width:450px;height:450px;background:var(--hero-blob-2) !important;bottom:-10% !important;inset-inline-end:-5%;animation:blobPulse 12s ease-in-out infinite reverse}
.hero-bg .blob-3{width:300px;height:300px;background:var(--hero-blob-3) !important;top:35% !important;inset-inline-start:50%;animation:blobPulse 8s ease-in-out infinite 2s}
.hero.has-bg .hero-title{color:#fff;text-shadow:0 2px 10px rgba(0,0,0,0.3)}
.hero.has-bg .hero-sub{color:rgba(255,255,255,0.95);text-shadow:0 1px 5px rgba(0,0,0,0.2)}
.hero.has-bg .hero-trust-text{color:rgba(255,255,255,0.8)}
.hero.has-bg .hero-trust-text strong{color:#fff}
.hero-image-bg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0;transform:scale(1.05) translate3d(0,0,0);animation:heroZoom 20s ease-out forwards;backface-visibility:hidden;-webkit-backface-visibility:hidden;will-change:transform;transform-style:preserve-3d}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0.7));z-index:1}
@keyframes heroZoom {
    from { transform: scale(1.05) translate3d(0,0,0); }
    to { transform: scale(1.15) translate3d(0,0,0); }
}
.navbar.navbar-dark:not(.scrolled) .logo-name, .navbar.navbar-dark:not(.scrolled) .nav-logo{color:#fff !important}
.navbar.navbar-dark:not(.scrolled) .icon-btn i, .navbar.navbar-dark:not(.scrolled) .theme-toggle i{color:#fff !important}
.navbar.navbar-dark:not(.scrolled) .nav-search-wrap input{color:#fff !important;border-color:rgba(255,255,255,0.3) !important;background:rgba(255,255,255,0.1) !important}
.navbar.navbar-dark:not(.scrolled) .nav-search-wrap input::placeholder{color:rgba(255,255,255,0.6) !important}
.hero.has-bg .btn-outline{color:#fff !important;border-color:rgba(255,255,255,0.3) !important}
.hero.has-bg .btn-outline:hover{background:rgba(255,255,255,0.1) !important;border-color:#fff !important}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;position:relative;z-index:1}
.hero-content{animation:fadeUp .8s ease both}
.hero-title{font-family:var(--font-heading);font-weight:800;font-size:clamp(2.4rem,4.5vw,3.8rem);line-height:1.12;margin-bottom:1.25rem}
.hero-sub{font-size:1.05rem;color:var(--text-muted);line-height:1.7;margin-bottom:2rem;max-width:480px}
.hero-cta{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;justify-content:flex-start}
.hero-cta .btn-brand, .hero-cta .btn-outline{flex:0 0 auto}
@media(max-width:600px){
  .hero-cta{justify-content:center !important}
  .hero-cta button, .hero-cta a{width:100%;justify-content:center}
}
.hero-trust{display:flex;align-items:center;gap:1rem;margin-top:2.5rem}
.hero-trust-avatars{display:flex}
.avatar{width:36px;height:36px;border-radius:50%;border:2.5px solid var(--bg-color);margin-left:-10px;background:var(--success-gradient);display:flex;align-items:center;justify-content:center;color:#fff;font-size:.7rem;font-weight:700}
.avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.hero-trust-text{font-size:.85rem;color:var(--text-muted)}
.hero-trust-text strong{color:var(--text-color);font-weight:700}


/* ── Ticker ───────────────────────────────────────────── */
.ticker-section{padding:1.5rem 0;border-top:1px solid var(--glass-border);border-bottom:1px solid var(--glass-border);overflow:hidden;position:relative}
.ticker-section::before,.ticker-section::after{content:'';position:absolute;top:0;bottom:0;width:120px;z-index:2}
.ticker-section::before{left:0;background:linear-gradient(to right,var(--bg-color),transparent)}
.ticker-section::after{right:0;background:linear-gradient(to left,var(--bg-color),transparent)}
.ticker-track{display:flex;width:max-content;animation:ticker 28s linear infinite}
.ticker-item{display:flex;align-items:center;gap:.6rem;padding:0 2.5rem;font-family:var(--font-body);font-weight:600;font-size:.9rem;color:var(--text-muted);white-space:nowrap}
.ticker-item i{color:var(--brand-green);font-size:1rem}
.ticker-item:hover{color:var(--text-color)}

/* ── Stats ────────────────────────────────────────────── */
.stats-section{position:relative;overflow:hidden}
.stats-bg{position:absolute;inset:0;background:linear-gradient(135deg,var(--stats-bg-start) 0%,var(--stats-bg-mid) 50%,var(--stats-bg-end) 100%)}
.stats-bg-blob{position:absolute;border-radius:50%;filter:blur(80px);opacity:.25}
.stats-bg-blob-1{width:400px;height:400px;background:var(--stats-blob-1);top:-20%;left:-10%}
.stats-bg-blob-2{width:300px;height:300px;background:var(--stats-blob-2);bottom:-10%;right:-15%}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;position:relative;z-index:1}
.stat-card{text-align:center;padding:2.5rem 1.5rem;border-radius:var(--radius-xl);border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04);transition:all var(--transition);position:relative;overflow:hidden}
.stat-card::before{content:'';position:absolute;inset:0;border-radius:inherit;border:1px solid transparent;background:var(--success-gradient) border-box;-webkit-mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity var(--transition)}
.stat-card:hover::before{opacity:.3}
.stat-card:hover{transform:translateY(-5px);background:rgba(255,255,255,.07)}
.stat-icon{width:52px;height:52px;border-radius:14px;background:var(--brand-alpha-20);display:flex;align-items:center;justify-content:center;font-size:1.4rem;color:var(--brand-green-light);margin:0 auto 1rem}
.stat-number{font-family:var(--font-heading);font-weight:800;font-size:2.8rem;background:var(--success-gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;line-height:1;margin-bottom:.3rem}
.stat-label{color:rgba(255,255,255,.65);font-size:.9rem;font-weight:500}

/* ── Categories ───────────────────────────────────────── */
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:auto auto;gap:1.5rem}
.cat-card{border-radius:var(--radius-xl);overflow:hidden;position:relative;cursor:pointer;aspect-ratio:4/3}
.cat-card.big{grid-row:span 2;aspect-ratio:auto}
.cat-card-bg{position:absolute;inset:0;transition:transform .5s ease}
.cat-card:hover .cat-card-bg{transform:scale(1.06)}
.cat-emoji{font-size:3rem;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(1);transition:transform .4s ease,top .4s ease;z-index:2;filter:drop-shadow(0 4px 12px rgba(0,0,0,.3))}
.cat-card:hover .cat-emoji{transform:translate(-50%,-60%) scale(1.15)}
.cat-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.75) 0%,rgba(0,0,0,.1) 60%);z-index:1;transition:opacity .3s ease}
.cat-content{position:absolute;bottom:0;left:0;right:0;padding:1.5rem;z-index:3;transform:translateY(5px);transition:transform .3s ease}
.cat-card:hover .cat-content{transform:translateY(0)}
.cat-name{font-family:var(--font-heading);font-weight:800;font-size:1.2rem;color:#fff}
.cat-count{font-size:.82rem;color:rgba(255,255,255,.7);margin-top:.2rem}
.cat-arrow{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.15);backdrop-filter:blur(8px);color:#fff;font-size:.9rem;position:absolute;top:1rem;right:1rem;z-index:3;opacity:0;transform:translateX(8px);transition:all .3s ease}
.cat-card:hover .cat-arrow{opacity:1;transform:translateX(0)}
/* Category gradient themes — dynamic slug-based via inline */
.cat-accent{position:absolute;width:150px;height:150px;border-radius:50%;filter:blur(40px);top:-20px;right:-20px;opacity:.5;z-index:0}

/* ── Products ─────────────────────────────────────────── */
.products-header{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:2.5rem;flex-wrap:wrap;gap:1rem}
.products-filter{display:flex;gap:.5rem;flex-wrap:wrap}
.filter-btn{background:var(--glass-bg);border:1px solid var(--glass-border);color:var(--text-muted);padding:.4rem 1.1rem;border-radius:var(--radius-pill);font-family:var(--font-body);font-weight:600;font-size:.85rem;cursor:pointer;transition:all var(--transition)}
.filter-btn.active,.filter-btn:hover{background:var(--success-gradient);border-color:transparent;color:#fff}
.products-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:3rem 1.5rem;}
.product-card{border-radius:var(--radius-xl);overflow:hidden;transition:all var(--transition);position:relative;background:var(--surface-gradient);border:1px solid var(--glass-border)}
.product-card:hover{transform:translateY(-8px);box-shadow:0 24px 56px rgba(0,0,0,.14);border-color:var(--brand-green)}
.store-shell .product-img{height:200px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:4rem}
.product-img-bg{position:absolute;inset:0;transition:transform .5s ease}
.product-card:hover .product-img-bg{transform:scale(1.08)}
.product-type-badge{position:absolute;top:.75rem;inset-inline-start:.75rem;z-index:2;font-size:.7rem;font-weight:700;padding:.25rem .7rem;border-radius:var(--radius-pill)}
.badge-digital{background:var(--brand-alpha-90);color:#fff}
.badge-physical{background:rgba(33,33,33,.85);color:#fff;backdrop-filter:blur(8px)}
.badge-new{background:linear-gradient(135deg,#f59e0b,#f97316);color:#fff}
.product-actions{position:absolute;bottom:.75rem;inset-inline-start:.75rem;display:flex;flex-direction:row;gap:.4rem;opacity:0;transform:translateY(8px);transition:all .3s ease;z-index:2}
.product-card:hover .product-actions{opacity:1;transform:translateY(0)}
.product-action-btn{width:30px;height:30px;border-radius:8px;background:var(--glass-bg);backdrop-filter:blur(8px);border:1px solid var(--glass-border);display:flex;align-items:center;justify-content:center;font-size:.8rem;color:var(--text-color);cursor:pointer;transition:all var(--transition)}
.product-action-btn:hover{background:var(--success-gradient);color:#fff;border-color:transparent}
.store-shell .product-info{padding:1.25rem}
.store-shell .product-name{font-family:var(--font-heading);font-weight:700;font-size:1rem;margin-bottom:.3rem;color:var(--text-color)}
.product-meta{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem}
.product-rating{display:flex;align-items:center;gap:.3rem;font-size:.8rem;color:var(--text-muted)}
.product-pricing{display:flex;align-items:center;gap:.6rem}
.store-shell .product-price{font-family:var(--font-heading);font-weight:800;font-size:1.15rem;color:var(--brand-green)}
.product-old-price{font-size:.82rem;color:var(--text-muted);text-decoration:line-through}
.product-discount{font-size:.72rem;font-weight:700;background:var(--brand-alpha-12);color:var(--brand-green);padding:.15rem .5rem;border-radius:.4rem}
.add-cart-btn{width:100%;padding:.65rem;border-radius:var(--radius-lg);background:var(--surface-gradient);border:1.5px solid var(--glass-border);color:var(--text-color);font-family:var(--font-heading);font-weight:700;font-size:.9rem;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.5rem;transition:all var(--transition)}
.add-cart-btn:hover{background:var(--success-gradient);border-color:transparent;color:#fff}

/* ── Featured Ribbon ──────────────────────────────────── */
.featured-ribbon{position:absolute;top:0;right:0;width:100px;height:100px;overflow:hidden;z-index:10;pointer-events:none}
.featured-ribbon span{position:absolute;display:block;width:160px;padding:8px 0;background-color:var(--brand-green);box-shadow:0 5px 10px rgba(0,0,0,.1);color:#fff;font:700 13px/1 var(--font-heading);text-shadow:0 1px 1px rgba(0,0,0,.2);text-transform:uppercase;text-align:center;right:-35px;top:25px;transform:rotate(45deg)}
[dir="rtl"] .featured-ribbon{right:auto;left:0}
[dir="rtl"] .featured-ribbon span{right:auto;left:-35px;transform:rotate(-45deg)}

/* ── How It Works ─────────────────────────────────────── */
.how-bg{position:relative;overflow:hidden}
.how-bg-accent{position:absolute;inset:0;background:var(--how-bg-accent)}
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;position:relative}
.steps-connector{position:absolute;top:60px;left:calc(16.67% + 40px);right:calc(16.67% + 40px);height:2px;background:linear-gradient(90deg,var(--brand-green) 0%,var(--brand-green-light) 100%);z-index:0}
.steps-connector::after{content:'';position:absolute;right:-6px;top:-5px;border:6px solid transparent;border-left-color:var(--brand-green-light)}
[dir="rtl"] .steps-connector{background:linear-gradient(270deg,var(--brand-green) 0%,var(--brand-green-light) 100%)}
[dir="rtl"] .steps-connector::after{right:auto;left:-6px;border-left-color:transparent;border-right-color:var(--brand-green-light)}
.step-card{border-radius:var(--radius-xl);padding:2.5rem 2rem;text-align:center;position:relative;z-index:1;transition:all var(--transition);border:1px solid var(--glass-border);background:var(--surface-gradient)}
.step-card:hover{transform:translateY(-6px);border-color:var(--brand-green);box-shadow:0 20px 50px var(--brand-alpha-10)}
.step-number{font-family:var(--font-heading);font-weight:800;font-size:.78rem;color:var(--brand-green);letter-spacing:.1em;text-transform:uppercase;margin-bottom:.75rem;display:block}
.step-icon{width:80px;height:80px;border-radius:20px;margin:1rem auto;display:flex;align-items:center;justify-content:center;font-size:2rem;position:relative}
.step-icon-ring{position:absolute;inset:-4px;border-radius:24px;border:2px dashed var(--brand-alpha-30);animation:spin 12s linear infinite}
.step-title{font-family:var(--font-heading);font-weight:800;font-size:1.25rem;margin-bottom:.75rem;color:var(--text-color)}
.step-desc{font-size:.92rem;color:var(--text-muted);line-height:1.7}
/* Step themes */
.step-1 .step-icon{background:var(--step-1-bg)}
.step-2 .step-icon{background:var(--step-2-bg)}
.step-3 .step-icon{background:var(--step-3-bg)}

/* ── Trust Badges ─────────────────────────────────────── */
.trust-section{position:relative;overflow:hidden}
.trust-bg{position:absolute;inset:0;background:var(--trust-bg)}
[data-theme="dark"] .trust-bg{background:linear-gradient(135deg,#0f1115 0%,#111417 50%,#0d1012 100%)}
.trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;position:relative;z-index:1}
.trust-card{padding:2.5rem 2rem;border-radius:var(--radius-xl);text-align:center;transition:all var(--transition);border:1px solid var(--glass-border);background:var(--glass-bg);backdrop-filter:blur(16px);position:relative;overflow:hidden}
.trust-card::before{content:'';position:absolute;inset:0;border-radius:inherit;background:var(--success-gradient);opacity:0;transition:opacity .4s ease}
.trust-card:hover::before{opacity:.04}
.trust-card:hover{transform:translateY(-6px);box-shadow:0 20px 50px var(--brand-alpha-12);border-color:var(--brand-green)}
.trust-icon-wrap{width:72px;height:72px;border-radius:20px;margin:0 auto 1.5rem;display:flex;align-items:center;justify-content:center;font-size:2rem;position:relative;background:var(--success-gradient);box-shadow:0 8px 24px var(--brand-alpha-30)}
.trust-icon-wrap::after{content:'';position:absolute;inset:-6px;border-radius:26px;border:2px solid var(--brand-alpha-20);animation:borderGlow 3s ease-in-out infinite}
.trust-title{font-family:var(--font-heading);font-weight:800;font-size:1.15rem;margin-bottom:.6rem;color:var(--text-color)}
.trust-desc{font-size:.9rem;color:var(--text-muted);line-height:1.7}
.trust-tag{display:inline-flex;align-items:center;gap:.3rem;margin-top:1rem;background:var(--brand-alpha-10);color:var(--brand-green);font-size:.75rem;font-weight:700;padding:.3rem .8rem;border-radius:var(--radius-pill);border:1px solid var(--brand-alpha-20)}

/* ── Newsletter / CTA ─────────────────────────────────── */
.cta-section{position:relative;overflow:hidden;border-radius:2rem;margin:0 1.5rem 5rem}
.cta-bg{position:absolute;inset:0;background:var(--cta-bg)}
.cta-blob-1{position:absolute;width:400px;height:400px;border-radius:50%;filter:blur(100px);background:var(--cta-blob-1);top:-30%;left:-10%;opacity:.1}
.cta-blob-2{position:absolute;width:300px;height:300px;border-radius:50%;filter:blur(100px);background:var(--cta-blob-2);bottom:-20%;right:5%;opacity:.1}
.cta-inner{position:relative;z-index:1;text-align:center;padding:5rem 2rem}
.cta-title{font-family:var(--font-heading);font-weight:800;font-size:clamp(1.8rem,3.5vw,3rem);color:#fff;margin-bottom:1rem}
.cta-sub{color:rgba(255,255,255,.65);font-size:1.05rem;margin-bottom:2.5rem;max-width:500px;margin-left:auto;margin-right:auto}
.cta-form{display:flex;gap:.75rem;max-width:480px;margin:0 auto;flex-wrap:wrap;justify-content:center}
.cta-input{flex:1;min-width:240px;padding:.85rem 1.4rem;border-radius:var(--radius-pill);border:1.5px solid rgba(255,255,255,.15);background:rgba(255,255,255,.08);backdrop-filter:blur(12px);color:#fff;font-size:.95rem;font-family:var(--font-body);outline:none;transition:border-color .3s}
.cta-input::placeholder{color:rgba(255,255,255,.4)}
.cta-input:focus{border-color:var(--brand-green)}

/* ── Footer ───────────────────────────────────────────── */
.store-shell footer{border-top:1px solid var(--glass-border);padding:4rem 0 2rem}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:3rem;margin-bottom:3rem}
.footer-brand{font-family:var(--font-heading);font-weight:800;font-size:1.5rem;margin-bottom:.75rem;display:flex;align-items:center;gap:.4rem}
.footer-desc{font-size:.9rem;color:var(--text-muted);line-height:1.7;margin-bottom:1.5rem}
.footer-social{display:flex;gap:.6rem;flex-wrap:wrap}
.social-btn{width:38px;height:38px;border-radius:11px;background:var(--glass-bg);border:1px solid var(--glass-border);display:flex;align-items:center;justify-content:center;font-size:1rem;color:var(--text-muted);cursor:pointer;transition:all var(--transition)}
.social-btn:hover{background:var(--success-gradient);border-color:transparent;color:#fff}
.footer-col-title{font-family:var(--font-heading);font-weight:700;font-size:1rem;margin-bottom:1.2rem;color:var(--text-color)}
.store-shell .footer-link{display:block;font-size:.9rem;color:var(--text-muted);margin-bottom:.7rem;transition:color var(--transition)}
.store-shell .footer-link:hover{color:var(--brand-green)}
.store-shell .footer-bottom{display:flex;align-items:center;justify-content:space-between;padding-top:2rem;border-top:1px solid var(--glass-border);font-size:.85rem;color:var(--text-muted);flex-wrap:wrap;gap:1rem}
.footer-payment{display:flex;align-items:center;gap:.6rem}
.payment-badge{padding:.3rem .7rem;border-radius:8px;background:var(--glass-bg);border:1px solid var(--glass-border);font-size:.75rem;font-weight:700;color:var(--text-muted)}

/* ── Scroll Animation ─────────────────────────────────── */
.store-shell .reveal{opacity:0;transform:translateY(30px);transition:opacity .7s ease,transform .7s ease}
.store-shell .reveal.visible{opacity:1;transform:translateY(0)}
.reveal-delay-1{transition-delay:.1s}
.reveal-delay-2{transition-delay:.2s}
.reveal-delay-3{transition-delay:.3s}
.reveal-delay-4{transition-delay:.4s}

/* ── Video Modal (large, responsive, stops video on close) ── */
.video-modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.85);backdrop-filter:blur(8px);z-index:9999;display:flex;align-items:center;justify-content:center;padding:1.5rem;animation:fadeUp .3s ease}
.video-modal-wrapper{position:relative;width:100%;max-width:960px}
.video-modal-content{width:100%;border-radius:var(--radius-xl);overflow:hidden;position:relative;background:#000;aspect-ratio:16/9}
.video-modal-close{position:absolute;top:12px;right:12px;width:40px;height:40px;border-radius:50%;background:rgba(0,0,0,.6);backdrop-filter:blur(8px);border:none;color:#fff;font-size:1.2rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease;z-index:10}
.video-modal-close:hover{background:rgba(255,255,255,.3)}
@media(max-width:600px){
  .video-modal-backdrop{padding:.5rem}
}

/* ── Responsive ───────────────────────────────────────── */
@media(max-width:1100px){
  .products-grid{grid-template-columns:repeat(3,1fr)}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr;text-align:center}

  .hero-sub{margin:0 auto 2rem}
  .hero-cta{justify-content:center}
  .hero-trust{justify-content:center}
  .products-header{flex-direction:column;align-items:center;text-align:center;gap:1.5rem}
  .products-filter{width:100%;justify-content:center}
  .cat-grid{grid-template-columns:repeat(2,1fr)}
  .cat-card.big{grid-row:auto;aspect-ratio:4/3}
  .products-grid{grid-template-columns:repeat(2,1fr)}
  .steps-grid{grid-template-columns:1fr}
  .steps-connector{display:none}
  .trust-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .section-pad{padding:4rem 0}
  .products-grid{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:1fr 1fr}
  .products-filter, .status-filters-scroll{flex-wrap:nowrap !important;overflow-x:auto;padding:.5rem 1rem;margin:0 -1.5rem;width:calc(100% + 3rem);-webkit-overflow-scrolling:touch;scrollbar-width:none;justify-content:flex-start !important}
  .products-filter::-webkit-scrollbar, .status-filters-scroll::-webkit-scrollbar{display:none}
  .filter-btn, .status-filters-scroll .btn{flex:0 0 auto;white-space:nowrap}
  .cat-grid{grid-template-columns:repeat(2,1fr);gap:.8rem}
  .cat-content{padding:.8rem}
  .cat-name{font-size:.95rem}
  .cat-count{font-size:.75rem}
  .cat-emoji{font-size:2rem}
  .trust-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr;text-align:center;gap:2.5rem}
  .footer-social{justify-content:center}
  .footer-brand{justify-content:center}
  .cta-section{margin:0 0 3rem;border-radius:0}
  .store-shell .footer-bottom{flex-direction:column;text-align:center}
}

/* ══════════════════════════════════════════════════════════
   Inline-style Utility Classes (extracted from blade views)
   All brand colors use CSS variables for full theme support
   ══════════════════════════════════════════════════════════ */

/* ── Hero avatar stack ──────────────────────────────────── */
.avatar-brand-1 { background: var(--success-gradient) !important; }
.avatar-brand-2 { background: var(--brand-gradient) !important; }
.avatar-brand-3 { background: linear-gradient(135deg, var(--brand-green-dark), var(--brand-green)) !important; }
.avatar-brand-4 { background: linear-gradient(135deg, var(--brand-green-light), var(--brand-green)) !important; }

/* ── Products section soft bg tint ─────────────────────── */
.section-tint-brand {
    background: linear-gradient(180deg, transparent 0%, var(--brand-alpha-06) 50%, transparent 100%);
}

/* ── Product image placeholder (no image) ──────────────── */
.product-img-placeholder {
    background: linear-gradient(135deg, var(--primary-accent), var(--primary-accent-light));
}

/* ── Product image placeholder on product page ─────────── */
.product-page-img-placeholder {
    background: linear-gradient(135deg, var(--primary-accent), var(--primary-accent-light));
    border-radius: calc(var(--radius-xl) - 0.5rem);
    min-height: 400px;
    max-height: 50vh;
}

/* ── Discount badge on product page ────────────────────── */
.product-page-discount-badge {
    background: var(--brand-green);
    color: #fff;
    padding: 0.4rem 1rem;
    border-radius: var(--radius-pill);
    font-size: 0.85rem;
    font-weight: 700;
    box-shadow: 0 4px 15px var(--brand-alpha-30);
    position: absolute;
    top: 2rem;
    inset-inline-start: 2rem;
    z-index: 5;
}

/* ── Order summary panel ────────────────────────────────── */
.order-summary-panel {
    background-color: rgba(var(--bs-primary-rgb), 0.05);
    border: 1px dashed var(--brand-alpha-30);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
}
.order-summary-panel hr {
    border-color: var(--brand-alpha-20);
    opacity: 1;
}

/* ── Skeleton / loading placeholders ───────────────────── */
.skeleton-img {
    height: 180px;
    background: var(--glass-bg);
    position: relative;
}
.skeleton-gradient {
    background: linear-gradient(135deg, rgba(0,0,0,0.06), rgba(0,0,0,0.04));
}

/* ── Store nav logo action icon ────────────────────────── */
.nav-logo-icon {
    background: var(--success-gradient);
    width: 44px;
    height: 44px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: bold;
    font-size: 1.2rem;
    flex-shrink: 0;
}

/* ── Footer nav dot indicator ───────────────────────────── */
.footer-brand-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--success-gradient);
    margin-left: 2px;
}

/* ── Input border style ─────────────────────────────────── */
.input-border-subtle { border: 1px solid rgba(0,0,0,0.15) !important; }
.input-border-subtle-important { border-color: rgba(0,0,0,0.15) !important; }

/* ── Promo/coupon badge ─────────────────────────────────── */
.coupon-badge {
    background: rgba(var(--bs-primary-rgb), 0.1);
    color: var(--bs-primary);
    border-radius: 12px;
}

/* ── Product Page Grid ─────────────────────────────────── */
.product-main-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-areas:
        "p-images"
        "p-info"
        "p-form"
        "p-description";
}

@media (min-width: 992px) {
    .product-main-grid {
        grid-template-columns: 1.1fr 0.9fr;
        gap: 2rem;
        grid-template-areas:
            "p-images      p-form"
            "p-info        p-form"
            "p-description p-form";
        align-items: start;
    }

    .p-area-form {
        position: sticky;
        top: 2.5rem;
    }
}

.p-area-images { grid-area: p-images; }
.p-area-info { grid-area: p-info; }
.p-area-form { grid-area: p-form; }
.p-area-description { grid-area: p-description; }

/* Global Animations and Utilities */
.item-row {
    transition: all 0.2s ease;
}

.item-row:hover {
    background: rgba(0, 0, 0, 0.01);
}

.overlay-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    z-index: 1150;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.overlay-modal {
    width: 100%;
    max-width: 600px;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
}

.animate-fade-in {
    animation: fadeIn 0.3s ease both;
}

.animate-slide-up {
    animation: slideUp 0.4s ease both;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fs-7 {
    font-size: 0.85rem;
}

.x-small {
    font-size: 0.75rem;
}

/* ══════════════════════════════════════════════════════════════════
   FEATURES PAGE — Component Styles
   ══════════════════════════════════════════════════════════════════ */

/* ── Feature Cards ─────────────────────────────────────────────── */
.feat-card {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .07);
    border-radius: 20px;
    padding: 1.75rem;
    transition: all .3s ease;
    height: 100%;
}
.feat-card:hover {
    border-color: rgba(127, 169, 27, .3);
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(127, 169, 27, .1);
}
.feat-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin-bottom: 1rem;
    flex-shrink: 0;
}
.feat-icon-green  { background: rgba(127, 169, 27, .1);  color: #7fa91b; }
.feat-icon-blue   { background: rgba(14, 165, 233, .1);  color: #0ea5e9; }
.feat-icon-purple { background: rgba(139, 92, 246, .1);  color: #8b5cf6; }
.feat-icon-orange { background: rgba(249, 115, 22, .1);  color: #f97316; }
.feat-icon-rose   { background: rgba(244, 63, 94, .1);   color: #f43f5e; }
.feat-icon-teal   { background: rgba(20, 184, 166, .1);  color: #14b8a6; }

/* ── Category title ────────────────────────────────────────────── */
.cat-title {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(0, 0, 0, .4);
    padding: .5rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
    margin-bottom: 2rem;
}

/* ── Pain / problem cards ──────────────────────────────────────── */
.pain-card {
    background: #fafafa;
    border: 1px solid #f0f0f0;
    border-radius: 16px;
    padding: 1.5rem;
    transition: all .25s;
    height: 100%;
}
.pain-card:hover {
    background: #fff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .06);
}

/* ── Showcase area (dark) ──────────────────────────────────────── */
.showcase-area {
    background: #111;
    border-radius: 28px;
    padding: 3rem;
    position: relative;
    overflow: hidden;
}
.showcase-area::before {
    content: '';
    position: absolute;
    top: -200px;
    right: -200px;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(127, 169, 27, .2) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}
@media (max-width: 767.98px) {
    .showcase-area { padding: 1.75rem 1.25rem; }
}
#showcaseTabs { position: relative; z-index: 10; }

.showcase-tab {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, .45);
    font-weight: 600;
    padding: .6rem 1.25rem;
    border-radius: 50px;
    cursor: pointer;
    transition: all .25s;
    font-size: .9rem;
    white-space: nowrap;
}
.showcase-tab.active,
.showcase-tab:hover {
    background: rgba(255, 255, 255, .1);
    color: #fff;
}
.showcase-panel { display: none; }
.showcase-panel.active {
    display: block;
    animation: feat-glow-in .4s ease;
}
@keyframes feat-glow-in {
    from { opacity: 0; transform: scale(.98) translateY(10px); }
    to   { opacity: 1; transform: scale(1)   translateY(0);    }
}

/* ── Order rows (showcase) ─────────────────────────────────────── */
.feat-order-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem;
    border-radius: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, .04);
    font-size: .7rem;
    color: rgba(255, 255, 255, .75);
}
.feat-order-badge {
    font-size: .6rem;
    padding: .2rem .6rem;
    border-radius: 20px;
    font-weight: 700;
    white-space: nowrap;
}

/* ── Chat bubbles (showcase) ───────────────────────────────────── */
.feat-bubble {
    max-width: 85%;
    padding: .75rem 1rem;
    border-radius: 18px;
    font-size: .85rem;
    line-height: 1.6;
    margin-bottom: .75rem;
}
.feat-bubble-in  { background: #f1f5f9; color: #1e293b; border-bottom-right-radius: 4px; }
.feat-bubble-ai  {
    background: rgba(127, 169, 27, .15);
    color: #dcfce7;
    border: 1px solid rgba(127, 169, 27, .25);
    border-bottom-left-radius: 4px;
    align-self: flex-end;
}

/* ── Check-item (showcase panels) ─────────────────────────────── */
.feat-check-item { display: flex; align-items: flex-start; gap: .75rem; margin-bottom: .75rem; }
.feat-check-icon {
    width: 20px;
    height: 20px;
    background: rgba(127, 169, 27, .2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}

/* ── Impact metric cards ───────────────────────────────────────── */
.feat-metric-card {
    background: #fff;
    border-radius: 20px;
    padding: 1.5rem 1rem;
    border: 1px solid #f0f0f0;
    transition: all .3s;
    height: 100%;
}
.feat-metric-card:hover {
    border-color: rgba(127, 169, 27, .25);
    box-shadow: 0 8px 30px rgba(127, 169, 27, .08);
    transform: translateY(-3px);
}

/* ── Solution bridge banner ────────────────────────────────────── */
.feat-solution-bridge {
    background: linear-gradient(135deg, rgba(127, 169, 27, .06) 0%, rgba(94, 128, 18, .04) 100%);
    border: 1px solid rgba(127, 169, 27, .15);
    border-radius: 24px;
    padding: 3.5rem 2rem;
    text-align: center;
}

/* ── CTA section ───────────────────────────────────────────────── */
.feat-cta-section {
    background: linear-gradient(135deg, #151515 0%, #1a2a1a 50%, #151515 100%);
    position: relative;
    overflow: hidden;
}
.feat-cta-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, rgba(127, 169, 27, .22) 0%, transparent 60%);
    pointer-events: none;
}

/* ── Mockup window ─────────────────────────────────────────────── */
.feat-mockup-window {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .3);
}

/* ── Ticker ────────────────────────────────────────────────────── */
.feat-ticker-wrap {
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}
.feat-ticker {
    animation: ticker 28s linear infinite;
    white-space: nowrap;
    display: inline-flex;
    gap: 2.5rem;
}

/* ==========================================================================
   RASSMI WELCOME — LANDING PAGE STYLES
   ========================================================================== */

@keyframes ticker-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(100%); }
}

@keyframes blink {
    0%, 100% { opacity: 1 }
    50% { opacity: .3 }
}

@keyframes wave {
    0%, 100% { transform: scaleY(.5) }
    50% { transform: scaleY(1.4) }
}

@keyframes typing {
    0%, 60%, 100% { transform: translateY(0) }
    30% { transform: translateY(-5px) }
}

@keyframes fade-up {
    from { opacity: 0; transform: translateY(24px) }
    to { opacity: 1; transform: translateY(0) }
}

.hero-heading {
    font-size: clamp(2rem, 4.3vw, 4.1rem);
    font-weight: 800;
    line-height: 1.33;
    letter-spacing: -2px;
    color: #111;
}

.hero-heading .highlight {
    background: var(--success-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.section-heading {
    font-size: clamp(1.9rem, 3.5vw, 2.8rem);
    font-weight: 800;
    letter-spacing: -1px;
    line-height: 1.2;
    color: #111;
}

[data-theme="dark"] .section-heading {
    color: #fff !important;
}

.section-sub {
    font-size: 1.05rem;
    line-height: 1.85;
    color: #6b7280;
    max-width: 560px;
}

[data-theme="dark"] .section-sub {
    color: rgba(255, 255, 255, .6) !important;
}

.section-badge {
    background: var(--brand-alpha-10);
    color: var(--brand-green);
    border: 1px solid var(--brand-alpha-25);
    border-radius: 50px;
    padding: 6px 16px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: 1rem;
}

.section-label {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--brand-green);
    margin-bottom: 1rem;
    display: block;
}

.lp-section {
    padding: 110px 0;
}

.lp-section-sm {
    padding: 64px 0;
}

@media(max-width:768px) {
    .lp-section { padding: 72px 0; }
    .lp-section-sm { padding: 40px 0; }
}

.btn-style2-dark {
    background: #111;
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: 14px 32px;
    font-weight: 700;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    transition: all .25s ease;
    text-decoration: none;
}

.btn-style2-dark:hover {
    background: #000;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
    color: #fff;
}

.btn-style2-green {
    background: var(--success-gradient);
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: 14px 32px;
    font-weight: 700;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    text-decoration: none;
    transition: all .25s ease;
    box-shadow: 0 4px 18px var(--brand-alpha-30);
}

.btn-style2-green:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px var(--brand-alpha-40);
    color: #fff;
}

.btn-style2-ghost {
    background: transparent;
    color: #374151;
    border: 1.5px solid #d1d5db;
    border-radius: 50px;
    padding: 13px 28px;
    font-weight: 700;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    transition: all .25s;
    text-decoration: none;
}

.btn-style2-ghost:hover {
    border-color: var(--brand-green);
    color: var(--brand-green);
    transform: translateY(-2px);
}

.style2-card {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .07);
    border-radius: 20px;
    padding: 32px;
    transition: all .3s ease;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .04);
    height: 100%;
}

.style2-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, .1);
    border-color: var(--brand-alpha-30);
}

.style2-card-dark {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 20px;
    padding: 32px;
    backdrop-filter: blur(10px);
    height: 100%;
}

.feat-icon-wrap {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--brand-alpha-12);
    color: var(--brand-green);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin-bottom: 20px;
    flex-shrink: 0;
}

.animate-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .45s ease, transform .45s ease;
}

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

.animate-in:nth-child(2) { transition-delay: .1s; }
.animate-in:nth-child(3) { transition-delay: .15s; }
.animate-in:nth-child(4) { transition-delay: .2s; }
.animate-in:nth-child(5) { transition-delay: .25s; }
.animate-in:nth-child(6) { transition-delay: .3s; }
.animate-in:nth-child(7) { transition-delay: .35s; }
.animate-in:nth-child(8) { transition-delay: .4s; }
.animate-in:nth-child(9) { transition-delay: .45s; }
.animate-in:nth-child(10) { transition-delay: .5s; }
.animate-in:nth-child(11) { transition-delay: .55s; }
.animate-in:nth-child(12) { transition-delay: .6s; }
.animate-in:nth-child(13) { transition-delay: .65s; }
.animate-in:nth-child(14) { transition-delay: .7s; }

.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .65s ease, transform .65s ease;
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal-r {
    opacity: 0;
    transform: translateX(24px);
    transition: opacity .65s ease, transform .65s ease;
}

.reveal-r.visible {
    opacity: 1;
    transform: translateX(0);
}

.reveal-l {
    opacity: 0;
    transform: translateX(-24px);
    transition: opacity .65s ease, transform .65s ease;
}

.reveal-l.visible {
    opacity: 1;
    transform: translateX(0);
}

@keyframes breathe {
    from { transform: scale(1) translate(0, 0); }
    to { transform: scale(1.1) translate(30px, 20px); }
}

@keyframes pulse-dot {
    0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
    70% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.pulse-dot { animation: pulse-dot 2s infinite; }

.telegram-line {
    stroke: rgba(0, 136, 204, 0.4);
    animation: flow-line 2s linear infinite;
}

.instagram-line {
    stroke: rgba(225, 48, 108, 0.4);
    animation: flow-line 2.5s linear infinite reverse;
}

.messenger-line {
    stroke: rgba(0, 132, 255, 0.4);
    animation: flow-line 2.2s linear infinite;
}

.store-line {
    stroke: rgba(0, 0, 0, 0.3);
    animation: flow-line 1.8s linear infinite reverse;
}

@keyframes flow-line { to { stroke-dashoffset: -12; } }

@keyframes float-hero {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

@keyframes float-hero-alt {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(12px); }
}

.float-animation { animation: float-hero 5s ease-in-out infinite; }
.float-animation-alt { animation: float-hero-alt 6s ease-in-out infinite; }

.core-pulse { animation: core-pulse-glow 3s ease-in-out infinite alternate; }

@keyframes core-pulse-glow {
    from { opacity: 0.1; transform: scale(0.85); }
    to { opacity: 0.35; transform: scale(1.15); }
}

.rotate-slow { animation: rotate 20s linear infinite; border-radius: 40px; }
.rotate-slow-reverse { animation: rotate 25s linear infinite reverse; border-radius: 45px; }

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.status-toast { animation: toast-bounce 4s ease-in-out infinite; }

@keyframes toast-bounce {
    0%, 100% { transform: translateY(0) scale(1); opacity: 1; }
    50% { transform: translateY(-5px) scale(1.05); opacity: 0.9; }
}

.float-particle { animation: particle-float 6s linear infinite; }
.float-particle-alt { animation: particle-float-alt 7s linear infinite; }

@keyframes particle-float {
    0% { transform: translate(0, 0) scale(1) rotate(0); opacity: 0; }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { transform: translate(40px, -60px) scale(0.5) rotate(45deg); opacity: 0; }
}

@keyframes particle-float-alt {
    0% { transform: translate(0, 0) scale(1) rotate(0); opacity: 0; }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { transform: translate(-30px, -50px) scale(0.5) rotate(-45deg); opacity: 0; }
}

.ai-network-container { direction: ltr; }

.live-dot {
    width: 8px;
    height: 8px;
    background: #22c55e;
    border-radius: 50%;
    display: inline-block;
    animation: blink 1.4s ease-in-out infinite;
}

.hero-metric-pill {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 50px;
    padding: 8px 16px;
    font-size: .82rem;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .08);
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    animation: fade-up .6s ease both;
    position: absolute;
}

.trust-check {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .9rem;
    color: #374151;
    font-weight: 600;
}

.trust-check i { color: var(--brand-green); font-size: .8rem; }

.integ-pill {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 14px;
    padding: 12px 20px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: .9rem;
    transition: all .2s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
    cursor: default;
}

.integ-pill:hover {
    border-color: var(--brand-green);
    box-shadow: 0 4px 16px var(--brand-alpha-15);
    transform: translateY(-2px);
}

.product-card {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .07);
    border-radius: 24px;
    padding: 36px;
    height: 100%;
    position: relative;
    overflow: hidden;
    transition: all .3s ease;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .04);
}

[data-theme="dark"] .product-card {
    background: #161a1d !important;
    border-color: rgba(255, 255, 255, .08) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .3) !important;
}

[data-theme="dark"] .bg-white,
[data-theme="dark"] .bg-light {
    background-color: var(--bg-color) !important;
}

.product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .08);
}

.product-card-badge {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--brand-green);
    background: var(--brand-alpha-10);
    border-radius: 50px;
    padding: 4px 12px;
    display: inline-block;
    margin-bottom: 16px;
}

.product-card .pc-list { list-style: none; padding: 0; margin: 0; }

.product-card .pc-list li {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem 0;
    font-size: .92rem;
    color: #374151;
    border-bottom: 1px solid rgba(0, 0, 0, .04);
}

[data-theme="dark"] .product-card .pc-list li {
    color: rgba(255, 255, 255, .8) !important;
    border-color: rgba(255, 255, 255, .05) !important;
}

[data-theme="dark"] .product-card h3 {
    color: #fff !important;
}

.product-card .pc-list li i { color: var(--brand-green); font-size: .75rem; flex-shrink: 0; }

.pc-learn {
    font-size: .88rem;
    font-weight: 700;
    color: var(--brand-green);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: 1.25rem;
}

.pc-learn:hover { color: var(--brand-green-dark); }

.step-number {
    font-size: 3.5rem;
    font-weight: 800;
    color: var(--brand-alpha-15);
    line-height: 1;
    margin-bottom: 8px;
    font-family: var(--font-heading);
}

.step-icon-wrap {
    width: 64px;
    height: 64px;
    background: var(--brand-alpha-12);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: var(--brand-green);
    margin: 0 auto 20px;
}

.steps-connector {
    position: absolute;
    top: 52px;
    left: 0;
    right: 15%;
    height: 2px;
    background: repeating-linear-gradient(to left, var(--brand-alpha-30) 0, var(--brand-alpha-30) 8px, transparent 8px, transparent 16px);
    z-index: 0;
    max-width: 71%;
    opacity: .4;
}

.pain-section {
    background: #0d0d0d;
    position: relative;
    overflow: hidden;
}

.pain-section::before {
    content: '';
    position: absolute;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, var(--brand-alpha-15), transparent 70%);
    border-radius: 50%;
    top: -200px;
    left: -100px;
    pointer-events: none;
}

.pain-section::after {
    content: '';
    position: absolute;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(148, 196, 36, .08), transparent 70%);
    border-radius: 50%;
    bottom: -100px;
    right: -80px;
    pointer-events: none;
}

.problem-cell {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 20px;
    padding: 28px;
    color: #e5e7eb;
    height: 100%;
}

.solution-cell {
    background: rgba(127, 169, 27, .08);
    border: 1px solid rgba(127, 169, 27, .2);
    border-radius: 20px;
    padding: 28px;
    color: #f0f4e8;
    height: 100%;
}

.problem-title { color: #f87171; font-weight: 700; font-size: 1rem; margin-bottom: .4rem; }
.solution-title { color: var(--brand-green-light); font-weight: 700; font-size: 1rem; margin-bottom: .4rem; }

.chat-mock-wrap {
    background: #fff;
    border-radius: 24px;
    border: 1px solid rgba(0, 0, 0, .08);
    box-shadow: 0 24px 80px rgba(0, 0, 0, .1);
    overflow: hidden;
    max-width: 380px;
}

.chat-mock-header {
    background: var(--brand-green);
    color: #fff;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: .6rem;
    font-weight: 700;
}

.chat-messages {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 200px;
}

.chat-msg {
    padding: 12px 16px;
    border-radius: 16px;
    font-size: .9rem;
    max-width: 82%;
    line-height: 1.55;
}

.chat-msg.user {
    background: #f3f4f6;
    align-self: flex-start;
    border-bottom-right-radius: 4px;
}

.chat-msg.ai {
    background: var(--brand-alpha-10);
    border: 1px solid var(--brand-alpha-20);
    align-self: flex-end;
    color: #1a2a05;
    border-bottom-left-radius: 4px;
}

.chat-msg.typing {
    background: #f3f4f6;
    align-self: flex-start;
    padding: 14px 18px;
}

.chat-msg.typing span {
    display: inline-block;
    width: 7px;
    height: 7px;
    background: #9ca3af;
    border-radius: 50%;
    margin: 0 2px;
    animation: typing 1.2s ease-in-out infinite;
}

.chat-msg.typing span:nth-child(2) { animation-delay: .15s; }
.chat-msg.typing span:nth-child(3) { animation-delay: .3s; }

.chat-input-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border-top: 1px solid rgba(0, 0, 0, .06);
    background: #fafafa;
}

.chat-input {
    flex: 1;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 50px;
    padding: 7px 16px;
    font-size: .82rem;
    color: #374151;
    outline: none;
    transition: border-color .2s;
}

.chat-input:focus { border-color: var(--brand-green); }

.chat-send-btn {
    width: 34px;
    height: 34px;
    background: var(--brand-green);
    color: #fff;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    transition: transform .2s, background .2s;
    cursor: pointer;
}

.chat-send-btn:hover { transform: scale(1.08); background: var(--brand-green-dark); }

.stats-dark-section {
    background: linear-gradient(135deg, #000 0%, #0d1a00 50%, #111 100%);
    position: relative;
    overflow: hidden;
}

.stats-dark-section::before {
    content: '';
    position: absolute;
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, rgba(127, 169, 27, .12), transparent 70%);
    border-radius: 50%;
    top: -200px;
    right: -100px;
    pointer-events: none;
}

.stat-number {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 800;
    background: var(--success-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    letter-spacing: -2px;
}

.stat-label { color: rgba(255, 255, 255, .6); font-size: .95rem; margin-top: 8px; }

.pricing-card {
    background: #fff;
    border: 1.5px solid rgba(0, 0, 0, .08);
    border-radius: 24px;
    padding: 40px 32px;
    height: 100%;
    transition: all .3s ease;
    position: relative;
}

[data-theme="dark"] .pricing-card:not(.featured) {
    background: #161a1d !important;
    border-color: rgba(255, 255, 255, .1) !important;
    color: #fff !important;
}

.pricing-card.featured {
    background: #111;
    border-color: var(--brand-green);
    color: #fff;
    transform: scale(1.04);
    box-shadow: 0 24px 80px rgba(127, 169, 27, .2);
}

.pricing-card:not(.featured):hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .1);
}

.pricing-card.featured .price-amount { color: var(--brand-green-light); }
.pricing-card.featured .feature-item { color: rgba(255, 255, 255, .85); border-color: rgba(255, 255, 255, .06); }

.price-amount {
    font-size: 2.4rem;
    font-weight: 800;
    letter-spacing: -1px;
    color: #111;
    line-height: 1;
}

[data-theme="dark"] .price-amount {
    color: #fff !important;
}

.price-period { font-size: .85rem; color: #9ca3af; font-weight: 400; }

.popular-badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--success-gradient);
    color: #fff;
    border-radius: 50px;
    padding: 4px 20px;
    font-size: .78rem;
    font-weight: 700;
    white-space: nowrap;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    font-size: .92rem;
    color: #374151;
    border-bottom: 1px solid rgba(0, 0, 0, .05);
}

.feature-item i { color: var(--brand-green); flex-shrink: 0; font-size: .8rem; }

.testimonial-card {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .07);
    border-radius: 20px;
    padding: 28px;
    height: 100%;
    transition: all .3s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
}

.testimonial-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0, 0, 0, .09); }

.avatar-initial {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--success-gradient);
    color: #fff;
    font-weight: 700;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.faq-item { border-bottom: 1px solid #f0f0f0 !important; background: transparent !important; }
.faq-btn { background: transparent !important; box-shadow: none !important; font-weight: 700; color: #111 !important; font-size: 1rem; }
.faq-btn:not(.collapsed) { color: var(--brand-green) !important; }
.faq-btn::after { filter: none !important; }

.faq-accordion .accordion-button {
    font-weight: 700;
    font-size: 1rem;
    background: transparent;
    color: #111;
    padding: 20px 0;
    border: none;
    box-shadow: none;
}

.faq-accordion .accordion-button:not(.collapsed) { color: var(--brand-green); background: transparent; }
.faq-accordion .accordion-item { border: none; border-bottom: 1px solid rgba(0, 0, 0, .08); background: transparent; }
.faq-accordion .accordion-body { padding: 0 0 20px; color: #6b7280; font-size: .97rem; line-height: 1.8; }

.cta-final-section { background: var(--cta-bg); position: relative; overflow: hidden; }

.cta-final-section::before {
    content: '';
    position: absolute;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, var(--brand-alpha-20), transparent 70%);
    border-radius: 50%;
    top: -150px;
    right: -100px;
    pointer-events: none;
}

.cta-final-section::after {
    content: '';
    position: absolute;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(148, 196, 36, .1), transparent 70%);
    border-radius: 50%;
    bottom: -100px;
    left: -80px;
    pointer-events: none;
}

.mockup-bar {
    background: #f0f0f0;
    padding: .5rem 1rem;
    display: flex;
    align-items: center;
    gap: .4rem;
    border-bottom: 1px solid rgba(0, 0, 0, .07);
}

.mockup-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.order-row-m { display: flex; align-items: center; gap: .6rem; padding: .4rem .5rem; border-radius: 6px; font-size: .7rem; color: #374151; }
.order-badge-m { font-size: .6rem; padding: .15rem .5rem; border-radius: 20px; font-weight: 700; white-space: nowrap; }

@media(max-width:991.98px) {
    .pricing-card.featured { transform: scale(1); }
    .hero-metric-pill { display: none; }
    .steps-connector { display: none; }
}

.showcase-area {
    background: #111;
    border-radius: 28px;
    padding: 3rem;
    position: relative;
    overflow: hidden;
}
.showcase-area::before {
    content: '';
    position: absolute;
    top: -200px;
    right: -200px;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(127,169,27,.2) 0%, transparent 70%);
}
.showcase-tab {
    background: transparent;
    border: none;
    color: rgba(255,255,255,.45);
    font-weight: 600;
    padding: .6rem 1.25rem;
    border-radius: 50px;
    cursor: pointer;
    transition: all .25s;
    font-size: .9rem;
}
.showcase-tab.active, .showcase-tab:hover {
    background: rgba(255,255,255,.1);
    color: #fff;
}
.showcase-panel { display: none; }
.showcase-panel.active { display: block; animation: glow-in .4s ease; }

/* ═══════════════════════════════════════════════════════════════════
   PUBLIC INTEGRATIONS PAGE
   ═══════════════════════════════════════════════════════════════════ */

/* ── Category header ───────────────────────────────────────────────── */
.int-cat-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1.25rem;
    border-bottom: 2px solid rgba(127,169,27,.12);
    margin-bottom: 2.5rem;
}
.int-cat-label {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--brand-green);
    margin-bottom: .3rem;
}
.int-cat-title {
    font-size: 1.6rem;
    font-weight: 800;
    color: #1a1a1a;
    margin: 0;
    line-height: 1.2;
}
.int-cat-sub {
    font-size: .85rem;
    color: #6b7280;
    margin: 0;
}

/* ── Bento integration row ─────────────────────────────────────────── */
.int-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.25rem;
}
.int-item {
    background: #fff;
    border: 1.5px solid #f0f0f0;
    border-radius: 20px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    transition: border-color .25s, box-shadow .25s, transform .25s;
    position: relative;
    overflow: hidden;
}
.int-item:hover {
    border-color: rgba(127,169,27,.25);
    box-shadow: 0 12px 40px rgba(127,169,27,.08);
    transform: translateY(-3px);
}
.int-item.int-item-soon {
    background: #fafafa;
    opacity: .72;
}
.int-item.int-item-soon:hover {
    transform: none;
    box-shadow: none;
    border-color: #f0f0f0;
}
.int-item-glow {
    position: absolute;
    top: -60px;
    right: -60px;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    transition: opacity .4s;
}
.int-item:hover .int-item-glow { opacity: 1; }

/* ── Item header row ───────────────────────────────────────────────── */
.int-item-head {
    display: flex;
    align-items: center;
    gap: .85rem;
}
.int-icon-wrap {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.35rem;
}
.int-item-name {
    font-weight: 700;
    font-size: 1rem;
    color: #1a1a1a;
    margin: 0;
}
.int-badge-avail {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    background: rgba(127,169,27,.09);
    color: var(--brand-green-dark);
    border: 1px solid rgba(127,169,27,.2);
    font-size: .62rem;
    font-weight: 700;
    padding: .25rem .65rem;
    border-radius: 50px;
    white-space: nowrap;
}
.int-badge-soon {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    background: rgba(0,0,0,.05);
    color: #9ca3af;
    border: 1px solid rgba(0,0,0,.08);
    font-size: .62rem;
    font-weight: 700;
    padding: .25rem .65rem;
    border-radius: 50px;
    white-space: nowrap;
}
.int-tag {
    display: inline-block;
    background: rgba(127,169,27,.1);
    color: var(--brand-green-dark);
    font-size: .58rem;
    font-weight: 700;
    padding: .15rem .55rem;
    border-radius: 50px;
    border: 1px solid rgba(127,169,27,.18);
}

/* ── Item description ──────────────────────────────────────────────── */
.int-item-desc {
    font-size: .84rem;
    color: #6b7280;
    line-height: 1.7;
    flex-grow: 1;
    margin: 0;
}

/* ── Feature chips row ─────────────────────────────────────────────── */
.int-feats {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}
.int-feat-chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    background: #f8f9fa;
    border: 1px solid #eee;
    color: #374151;
    font-size: .68rem;
    font-weight: 600;
    padding: .25rem .7rem;
    border-radius: 50px;
}
.int-feat-chip::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--brand-green);
    flex-shrink: 0;
}
.int-item-soon .int-feat-chip::before { background: #9ca3af; }

/* ── Item CTA link ─────────────────────────────────────────────────── */
.int-item-cta {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .8rem;
    font-weight: 700;
    color: var(--brand-green-dark);
    text-decoration: none;
    margin-top: .25rem;
    transition: gap .2s;
}
.int-item-cta:hover { gap: .7rem; color: var(--brand-green-dark); }

/* ── Hero stats strip ──────────────────────────────────────────────── */
.int-hero-stat {
    text-align: center;
    padding: 1.25rem 2rem;
    border-radius: 16px;
    background: rgba(127,169,27,.06);
    border: 1px solid rgba(127,169,27,.12);
}
.int-hero-stat-val {
    font-size: 2rem;
    font-weight: 800;
    color: var(--brand-green-dark);
    line-height: 1;
    margin-bottom: .25rem;
}
.int-hero-stat-lbl {
    font-size: .78rem;
    color: #6b7280;
    font-weight: 600;
}

/* ── Section divider pill ──────────────────────────────────────────── */
.int-section-sep {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 4rem 0 0;
}
.int-section-sep::before,
.int-section-sep::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #f0f0f0;
}

@media (max-width: 576px) {
    .int-row { grid-template-columns: 1fr; }
    .int-cat-header { flex-direction: column; align-items: flex-start; }
    .int-hero-stat { padding: 1rem; }
}


/* --- Pricing Page Custom Styles --- */
.pricing-hero {
    padding: 10rem 0 8rem;
    background: linear-gradient(180deg, #ffffff 0%, #f4f7f6 100%);
    position: relative;
    overflow: hidden;
}

.pricing-hero::before {
    content: '';
    position: absolute;
    width: 800px;
    height: 800px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(127,169,27,0.06) 0%, transparent 60%);
    top: -200px;
    left: -200px;
    pointer-events: none;
    animation: core-pulse-glow 8s infinite alternate ease-in-out;
}

.pricing-hero::after {
    content: '';
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(14,165,233,0.06) 0%, transparent 60%);
    bottom: -150px;
    right: -150px;
    pointer-events: none;
    animation: core-pulse-glow 10s infinite alternate-reverse ease-in-out;
}

/* Glassmorphic Pricing Card Container */
.pricing-card-wrapper {
    position: relative;
    border-radius: 24px;
    padding: 2px; /* Gradient Border wrapper trick */
    background: linear-gradient(135deg, rgba(255,255,255,0.8), rgba(255,255,255,0.2));
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;
}

.pricing-card-wrapper:hover {
    transform: translateY(-12px) scale(1.02);
    box-shadow: 0 30px 60px rgba(0,0,0,0.08);
}

.pricing-card-wrapper.featured {
    background: linear-gradient(135deg, var(--brand-green) 0%, #0ea5e9 100%);
    box-shadow: 0 20px 40px rgba(127,169,27,0.15);
}

.pricing-card-wrapper.enterprise {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
}

.pricing-card-inner {
    background: #ffffff;
    border-radius: 22px;
    padding: 2.5rem 2rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
}

.pricing-card-wrapper.featured .pricing-card-inner {
    background: rgba(255,255,255,0.98);
}

.pricing-card-wrapper.enterprise .pricing-card-inner {
    background: rgba(15,23,42,0.95);
    color: #f8fafc;
}

.popular-badge-glow {
    position: absolute;
    top: -12px;
    right: 20px;
    background: linear-gradient(90deg, #f97316 0%, #f43f5e 100%);
    color: white;
    font-size: 0.75rem;
    font-weight: 800;
    padding: 6px 16px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 4px 15px rgba(249,115,22,0.3);
    z-index: 10;
    animation: float-hero 3s infinite ease-in-out;
}

/* Features Grid Redesign */
.feature-box-glass {
    background: rgba(255,255,255,0.7);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: 20px;
    padding: 2rem;
    height: 100%;
    transition: all 0.3s ease;
    box-shadow: 0 8px 32px rgba(0,0,0,0.03);
    position: relative;
    overflow: hidden;
}

.feature-box-glass::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(135deg, transparent, rgba(255,255,255,0.4) 50%, transparent);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
}

.feature-box-glass:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(127,169,27,0.08);
    border-color: rgba(127,169,27,0.2);
}

.feature-box-glass:hover::before {
    transform: translateX(100%);
}

.feature-icon-glow {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    background: linear-gradient(135deg, rgba(127,169,27,0.1) 0%, rgba(127,169,27,0.02) 100%);
    color: var(--brand-green);
    border: 1px solid rgba(127,169,27,0.1);
    box-shadow: inset 0 0 20px rgba(255,255,255,0.5);
    transition: transform 0.3s ease;
}

.feature-box-glass:hover .feature-icon-glow {
    transform: scale(1.1) rotate(5deg);
    background: var(--brand-green);
    color: white;
    box-shadow: 0 10px 20px rgba(127,169,27,0.3);
}

/* Pricing Table Container */
.pricing-table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.04);
    background: white;
    border: 1px solid rgba(0,0,0,0.04);
}

.pricing-table {
    min-width: 800px;
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
}

.pricing-table th {
    padding: 1.8rem 1.5rem;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 1px;
    background: rgba(248,250,252,0.8);
    backdrop-filter: blur(10px);
    position: sticky;
    top: 0;
    z-index: 5;
    border-bottom: 2px solid #e2e8f0;
}

.pricing-table td {
    padding: 1.4rem 1.5rem;
    border-bottom: 1px solid #f1f5f9;
    text-align: center;
    transition: background 0.2s ease;
}

.pricing-table tbody tr:hover td {
    background: rgba(248,250,252,0.6);
}

.pricing-table th:first-child, .pricing-table td:first-child {
    text-align: right;
    position: sticky;
    right: 0;
    background: #ffffff;
    z-index: 10;
    min-width: 250px;
    font-weight: 600;
    border-left: 1px solid #f1f5f9;
    box-shadow: -5px 0 15px rgba(0,0,0,0.02);
}

.pricing-table tbody tr:hover td:first-child {
    background: #ffffff;
}

.pricing-table .feature-group {
    background-color: #f8fafc !important;
    font-weight: 800;
    text-align: right !important;
    color: #475569;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.table-check {
    color: var(--brand-green);
    font-size: 1.3rem;
    filter: drop-shadow(0 2px 4px rgba(127,169,27,0.3));
}

.plan-column-highlight {
    background: linear-gradient(180deg, rgba(127,169,27,0.03) 0%, rgba(127,169,27,0) 100%) !important;
    position: relative;
}

/* FAQ Accordion Enhancements */
.faq-accordion .accordion-item {
    border: 1px solid rgba(0,0,0,0.04) !important;
    border-radius: 16px !important;
    margin-bottom: 1rem !important;
    background: white !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
    overflow: hidden;
    transition: box-shadow 0.3s ease;
}

.faq-accordion .accordion-item:hover {
    box-shadow: 0 10px 20px rgba(0,0,0,0.06);
}

.faq-accordion .accordion-button {
    background: transparent !important;
    font-weight: 700;
    padding: 1.5rem;
    box-shadow: none !important;
    color: #1e293b !important;
}

.faq-accordion .accordion-button:not(.collapsed) {
    color: var(--brand-green) !important;
}

.faq-accordion .accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2364748b'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

/* CTA Section Gradient */
.premium-cta-box {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
    position: relative;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(15,23,42,0.4);
}

.premium-cta-box::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(circle at top right, rgba(127,169,27,0.2) 0%, transparent 60%);
    pointer-events: none;
}

.text-theme { color: var(--text-color) !important; }
.bg-glass { background: var(--glass-bg) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.border-theme { border-color: var(--glass-border) !important; }

.store-shell input::placeholder, .store-shell textarea::placeholder { color: var(--text-muted) !important; opacity: 0.6; }