/* ============================================================================
   Tajir — Landing Premium
   ----------------------------------------------------------------------------
   Restyle layer for Views/Home/Index.cshtml only. Loaded immediately after
   sitecss.css. The page also carries an inline <style> block that is later in
   source order, so every rule here is deliberately scoped under `.landing`
   (the wrapper `.layout-wrapper.landing`) to out-specify it.

   RTL FIRST: default culture is ar-EG (<html dir="rtl">). This file declares no
   physical inline-axis properties at all. Everything directional is expressed
   with logical properties (inset-inline-*, padding-inline, margin-inline,
   border-inline-*, text-align:start) or lives inside an explicit [dir="…"] rule,
   so the whole page mirrors correctly in both directions.

   Self-contained: no external fonts, images, or network requests. Gradients and
   CSS shapes only.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
    /* Brand — deepened, no new hues */
    --tj-indigo:        #405189;
    --tj-indigo-600:    #35447a;
    --tj-indigo-300:    #7183bd;
    --tj-teal:          #0ab39c;
    --tj-gold:          #d4af37;
    --tj-gold-100:      #f6e3a6;
    --tj-gold-200:      #e9c874;
    --tj-gold-700:      #b8860b;
    --tj-gold-800:      #8a6910; /* accessible gold for small text on white */
    --tj-gold-ink:      #2f2400;

    /* Night canvas for hero / CTA / footer */
    --tj-night-900:     #080d1a;
    --tj-night-800:     #0b1226;
    --tj-night-700:     #0d1a33;

    /* Neutrals */
    --tj-ink:           #0f172a;
    --tj-body:          #4b5563;
    --tj-muted:         #6b7280;
    --tj-line:          rgba(15, 23, 42, .09);
    --tj-line-soft:     rgba(15, 23, 42, .06);
    --tj-surface:       #ffffff;
    --tj-tint:          #f6f8fc;

    /* 8px spacing system */
    --tj-1: 8px;
    --tj-2: 16px;
    --tj-3: 24px;
    --tj-4: 32px;
    --tj-5: 40px;
    --tj-6: 48px;
    --tj-8: 64px;
    --tj-12: 96px;

    /* Radii */
    --tj-r-xs: 10px;
    --tj-r-sm: 12px;
    --tj-r:    14px;
    --tj-r-lg: 16px;
    --tj-r-xl: 20px;
    --tj-r-2xl: 24px;
    --tj-r-pill: 999px;

    /* Soft, layered shadows — never a single harsh box */
    --tj-sh-1: 0 1px 2px rgba(15, 23, 42, .04), 0 2px 6px -1px rgba(15, 23, 42, .05);
    --tj-sh-2: 0 1px 2px rgba(15, 23, 42, .05), 0 4px 10px -2px rgba(15, 23, 42, .06), 0 12px 26px -8px rgba(15, 23, 42, .10);
    --tj-sh-3: 0 2px 4px rgba(15, 23, 42, .05), 0 10px 22px -6px rgba(15, 23, 42, .09), 0 30px 60px -18px rgba(15, 23, 42, .18);
    --tj-sh-gold: 0 1px 2px rgba(122, 97, 26, .22), 0 8px 20px -6px rgba(212, 175, 55, .50);
    --tj-sh-gold-hi: 0 2px 4px rgba(122, 97, 26, .24), 0 14px 32px -8px rgba(212, 175, 55, .58);

    --tj-ease: cubic-bezier(.16, .84, .44, 1);

    /* Letter-spacing tokens. Arabic script must never be tracked: spacing breaks
       the visual rhythm of joined glyphs. These flip to `normal` under RTL. */
    --tj-tight:    -0.03em;
    --tj-tight-sm: -0.02em;
    --tj-wide:     0.14em;

    /* Hero/CTA mesh glow anchors — mirrored for RTL below. */
    --tj-glow-x:  78%;
    --tj-glow2-x: 14%;
}

[dir="rtl"] {
    --tj-tight:    normal;
    --tj-tight-sm: normal;
    --tj-wide:     normal;
    --tj-glow-x:  22%;
    --tj-glow2-x: 86%;
}

/* ---------------------------------------------------------------------------
   2. Page canvas & base type
   -------------------------------------------------------------------------- */
html body {
    background-color: var(--tj-surface);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden; /* belt-and-braces: no horizontal scroll at any width */
}

.landing {
    font-family: 'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', sans-serif;
    color: var(--tj-body);
    overflow-x: clip;
}

/* Velzon's secondary face (hkgrotesk) is not bundled — unify on the loaded font. */
.landing .ff-secondary {
    font-family: 'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.landing :is(h1, h2, h3, h4, h5, h6) {
    letter-spacing: var(--tj-tight-sm);
}

/* Vertical rhythm — generous, viewport-aware, on the 8px system. */
.landing .section {
    padding-block: clamp(64px, 5.2vw + 32px, 112px);
}

.landing .section > .container {
    position: relative;
    z-index: 1;
}

/* Section eyebrow */
.landing .section .text-uppercase.text-success {
    color: var(--tj-gold-800) !important;
    letter-spacing: var(--tj-wide);
    font-weight: 700;
    display: inline-block;
    margin-block-end: var(--tj-1);
}

/* Section heading */
.landing .section h2 {
    font-size: clamp(1.7rem, 1.15rem + 1.7vw, 2.5rem);
    line-height: 1.22;
    letter-spacing: var(--tj-tight);
}

/* Section deck */
.landing .section p.text-muted {
    color: var(--tj-muted) !important;
    font-size: 1.02rem;
    line-height: 1.75;
    max-width: 62ch;
    margin-inline: auto;
}

/* ---------------------------------------------------------------------------
   3. Buttons — gentle lift, layered shadow, consistent radii
   -------------------------------------------------------------------------- */
.landing .btn {
    font-weight: 600;
    border-radius: var(--tj-r-sm);
    letter-spacing: var(--tj-tight-sm);
    transition: transform .22s var(--tj-ease), box-shadow .22s var(--tj-ease),
                background-color .22s var(--tj-ease), background-image .22s var(--tj-ease),
                border-color .22s var(--tj-ease), color .22s var(--tj-ease);
    will-change: transform;
}

.landing .btn:hover  { transform: translateY(-2px); }
.landing .btn:active { transform: translateY(0); }

.landing .btn-lg {
    border-radius: var(--tj-r);
    padding-block: 13px;
    font-size: 1rem;
}

/* Gold primary */
.landing .btn-success {
    background-color: #d4af37 !important;
    background-image: linear-gradient(135deg, #f0d68a 0%, #e0bb52 44%, #c99b23 100%) !important;
    border: 1px solid rgba(122, 97, 26, .32) !important;
    color: var(--tj-gold-ink) !important;
    box-shadow: var(--tj-sh-gold) !important;
}

.landing .btn-success:hover,
.landing .btn-success:focus,
.landing .btn-success:focus-visible {
    background-image: linear-gradient(135deg, #f6e3a6 0%, #e9c874 44%, #d4af37 100%) !important;
    box-shadow: var(--tj-sh-gold-hi) !important;
    color: var(--tj-gold-ink) !important;
    filter: none;
}

/* Gold secondary */
.landing .btn-outline-success {
    background-color: var(--tj-surface) !important;
    border: 1px solid rgba(212, 175, 55, .55) !important;
    color: var(--tj-gold-800) !important;
    box-shadow: var(--tj-sh-1);
}

.landing .btn-outline-success:hover,
.landing .btn-outline-success:focus-visible {
    background-color: #f6e3a6 !important;
    background-image: linear-gradient(135deg, #f6e3a6 0%, #e9c874 100%) !important;
    border-color: rgba(184, 134, 11, .5) !important;
    color: var(--tj-gold-ink) !important;
}

/* Ghost buttons on the night sections */
.landing .hero-section .btn-outline-light,
.landing .cta-section .btn-outline-light,
.landing #templates .btn-outline-light {
    background-color: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .24);
    color: #e9eefb;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: none;
}

.landing .hero-section .btn-outline-light:hover,
.landing .cta-section .btn-outline-light:hover,
.landing #templates .btn-outline-light:hover,
.landing .hero-section .btn-outline-light:focus-visible,
.landing .cta-section .btn-outline-light:focus-visible,
.landing #templates .btn-outline-light:focus-visible {
    background-color: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .46);
    color: #fff;
}

.landing .btn-light {
    border: 1px solid rgba(15, 23, 42, .06);
    color: var(--tj-ink);
    box-shadow: 0 2px 6px rgba(8, 13, 26, .18), 0 10px 24px -8px rgba(8, 13, 26, .3);
}

.landing .btn:focus-visible {
    outline: 2px solid var(--tj-gold-200);
    outline-offset: 3px;
}

/* ---------------------------------------------------------------------------
   4. Navbar — frosted glass, hairline, shadow on scroll
   (uses the `is-sticky` class the bundled landing.init.js already toggles —
    no new JS)
   -------------------------------------------------------------------------- */
.landing .navbar-landing {
    background-color: rgba(255, 255, 255, .72);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-block-end: 1px solid transparent;
    box-shadow: none;
    padding-block: 12px;
    transition: background-color .3s var(--tj-ease), box-shadow .3s var(--tj-ease),
                border-color .3s var(--tj-ease), padding .3s var(--tj-ease);
}

.landing .navbar-landing.is-sticky {
    background-color: rgba(255, 255, 255, .86);
    border-block-end-color: var(--tj-line-soft);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px -10px rgba(15, 23, 42, .22);
    padding-block: 8px;
}

/* Nav links: ink on hover with a gold underline indicator. */
.landing .navbar-landing .navbar-nav .nav-item .nav-link {
    position: relative;
    font-family: inherit;
    font-size: .92rem;
    font-weight: 600;
    color: var(--tj-body) !important;
    background-color: transparent !important;
    padding-block: 8px !important;
    padding-inline: 14px !important;
    border-radius: var(--tj-r-xs);
    transition: color .22s var(--tj-ease);
}

.landing .navbar-landing .navbar-nav .nav-item .nav-link::after {
    content: "";
    position: absolute;
    inset-inline: 14px;
    bottom: 1px;
    height: 2px;
    border-radius: 2px;
    background-image: linear-gradient(90deg, var(--tj-gold-200), var(--tj-gold));
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .26s var(--tj-ease);
}

.landing .navbar-landing .navbar-nav .nav-item .nav-link:hover,
.landing .navbar-landing .navbar-nav .nav-item .nav-link:focus,
.landing .navbar-landing .navbar-nav .nav-item .nav-link.active {
    color: var(--tj-ink) !important;
    background-color: transparent !important;
}

.landing .navbar-landing .navbar-nav .nav-item .nav-link:hover::after,
.landing .navbar-landing .navbar-nav .nav-item .nav-link.active::after {
    transform: scaleX(1);
}

.landing .navbar-landing .navbar-toggler {
    border: 1px solid var(--tj-line);
    border-radius: var(--tj-r-xs);
    padding-block: 4px !important;
    padding-inline: 10px;
    box-shadow: none;
}

.landing .navbar-landing .btn-link {
    color: var(--tj-body) !important;
    font-weight: 600;
    font-size: .92rem;
}

.landing .navbar-landing .btn-link:hover { color: var(--tj-ink) !important; }

.landing .navbar-landing .btn-success {
    padding-block: 9px;
    padding-inline: 20px;
    font-size: .92rem;
    border-radius: var(--tj-r-xs);
}

/* Brand */
.landing .brand-logo-icon {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background-image: linear-gradient(140deg, #f0d68a 0%, #d4af37 52%, #a97708 100%);
    box-shadow: 0 1px 2px rgba(122, 97, 26, .3), 0 6px 16px -4px rgba(212, 175, 55, .5);
}

.landing .brand-logo-text {
    font-size: 1.32rem;
    font-weight: 700;
    letter-spacing: var(--tj-tight);
    color: var(--tj-ink);
}

/* Language switcher */
.landing .lang-switcher {
    border: 1px solid var(--tj-line);
    background-color: rgba(246, 248, 252, .9);
    border-radius: var(--tj-r-pill);
    padding: 3px;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, .04);
}

.landing .lang-btn {
    padding-block: 5px;
    padding-inline: 13px;
    font-size: .72rem;
    font-weight: 700;
    color: var(--tj-muted);
    border-radius: var(--tj-r-pill);
    transition: color .2s var(--tj-ease), background-color .2s var(--tj-ease), box-shadow .2s var(--tj-ease);
}

.landing .lang-btn.active {
    background-image: linear-gradient(135deg, #e9c874, #d4af37);
    color: var(--tj-gold-ink);
    box-shadow: 0 1px 2px rgba(122, 97, 26, .25), 0 4px 10px -3px rgba(212, 175, 55, .5);
}

.landing .lang-btn:hover:not(.active) {
    color: var(--tj-gold-800);
    background-color: rgba(212, 175, 55, .1);
}

/* Mobile menu panel */
@media (max-width: 991.98px) {
    .landing .navbar-landing {
        background-color: rgba(255, 255, 255, .94);
    }

    .landing .navbar-landing .navbar-collapse {
        margin-block-start: 12px;
        padding: 12px;
        background-color: var(--tj-surface);
        border: 1px solid var(--tj-line);
        border-radius: var(--tj-r-lg);
        box-shadow: var(--tj-sh-2);
    }

    .landing .navbar-landing .navbar-collapse > .d-flex {
        flex-wrap: wrap;
        margin-block-start: var(--tj-1);
    }

    .landing .navbar-landing .navbar-nav .nav-item .nav-link::after { content: none; }
}

/* ---------------------------------------------------------------------------
   5. Hero — layered gradient mesh, confident type
   -------------------------------------------------------------------------- */
.landing .hero-section {
    /* Kept >= ~92px so the headline always clears the fixed navbar. */
    padding-top: clamp(92px, 3.5vw + 60px, 120px);
    /* Section ships with pb-0; the mockup is tall and the white wave is pinned to the
       section's bottom edge, so without this the image bled onto the white band.
       This dark space sits between the image and the wave. */
    padding-bottom: clamp(120px, 11vw, 210px) !important;
    background-color: var(--tj-night-800);
    background-image:
        radial-gradient(1100px 620px at var(--tj-glow-x) -12%, rgba(212, 175, 55, .20) 0%, rgba(212, 175, 55, 0) 62%),
        radial-gradient(880px 560px at var(--tj-glow2-x) 6%, rgba(64, 81, 137, .60) 0%, rgba(64, 81, 137, 0) 64%),
        radial-gradient(900px 620px at 50% 112%, rgba(10, 179, 156, .12) 0%, rgba(10, 179, 156, 0) 60%),
        linear-gradient(168deg, #0b1226 0%, #0d1a33 46%, #090f21 100%);
}

/* Faint blueprint grid, faded out toward the edges. */
.landing .hero-section::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .045) 0 1px, transparent 1px 72px),
        repeating-linear-gradient(0deg,  rgba(255, 255, 255, .045) 0 1px, transparent 1px 72px);
    -webkit-mask-image: radial-gradient(720px 460px at 50% 34%, #000 0%, transparent 78%);
    mask-image: radial-gradient(720px 460px at 50% 34%, #000 0%, transparent 78%);
    opacity: .8;
}

/* Blobs — logical inset so the composition mirrors under RTL. */
.landing .hero-blob {
    filter: blur(90px);
    opacity: .22;
}

.landing .hero-blob-1 {
    inset: auto;
    inset-block-start: -140px;
    inset-inline-end: -120px;
    width: 520px;
    height: 520px;
    background-color: var(--tj-gold);
}

.landing .hero-blob-2 {
    inset: auto;
    inset-block-end: -40px;
    inset-inline-start: -110px;
    width: 400px;
    height: 400px;
    background-color: var(--tj-indigo-300);
    opacity: .3;
}

/* Eyebrow badge */
.landing .hero-section .badge {
    background-color: rgba(212, 175, 55, .12) !important;
    color: var(--tj-gold-200) !important;
    border: 1px solid rgba(212, 175, 55, .28) !important;
    border-radius: var(--tj-r-pill);
    font-weight: 600;
    letter-spacing: var(--tj-tight-sm);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

/* The hero row ships with Bootstrap mt-4 pt-4 (~3rem extra on top). Trim it so the
   reduced section padding-top actually shows; keep a little breathing room. */
.landing .hero-section .row.mt-4.pt-4 {
    margin-top: 0 !important;
    padding-top: var(--tj-2) !important;
}

/* Headline */
.landing .hero-section h1.display-5 {
    font-size: clamp(1.7rem, 0.9rem + 2.15vw, 2.5rem) !important;
    line-height: 1.2 !important;
    font-weight: 700;
    letter-spacing: var(--tj-tight);
    margin-block-end: var(--tj-3) !important;
}

/* Gold gradient on the highlighted words — guarded so text never disappears. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .landing .hero-section h1 .text-success {
        background-image: linear-gradient(135deg, #f6e3a6 0%, #e9c874 42%, #d4af37 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent !important;
    }
}

.landing .hero-section .lead {
    color: rgba(226, 232, 240, .74) !important;
    font-size: 1.08rem;
    line-height: 1.78;
    font-weight: 400;
    max-width: 54ch;
    margin-block-end: var(--tj-5) !important;
}

.landing .hero-section .btn-success {
    box-shadow: 0 2px 6px rgba(122, 97, 26, .28), 0 16px 40px -12px rgba(212, 175, 55, .65) !important;
}

.landing .hero-section .btn-success:hover {
    box-shadow: 0 3px 8px rgba(122, 97, 26, .3), 0 22px 52px -14px rgba(212, 175, 55, .8) !important;
}

/* Trust row — wrap instead of overflowing on narrow screens. */
.landing .hero-section .d-flex.gap-4 {
    flex-wrap: wrap;
    row-gap: var(--tj-1) !important;
    column-gap: var(--tj-3) !important;
}

/* Bottom clearance for the wave divider. */
.landing .hero-section .pb-5 {
    padding-bottom: 8rem !important;
}

/* Dashboard mockup */
.landing .dashboard-mockup {
    border-radius: var(--tj-r-xl);
    border: 1px solid rgba(255, 255, 255, .1);
    box-shadow:
        0 2px 6px rgba(0, 0, 0, .25),
        0 18px 40px -12px rgba(0, 0, 0, .45),
        0 48px 90px -24px rgba(0, 0, 0, .6);
    transition: transform .5s var(--tj-ease), box-shadow .5s var(--tj-ease);
}

.landing .mockup-bar {
    background-color: #f6f8fc;
    border-block-end: 1px solid var(--tj-line-soft);
    padding-block: 11px;
    padding-inline: 14px;
}

/* Floating badges */
.landing .hero-float-badge {
    background-color: rgba(255, 255, 255, .94);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    backdrop-filter: saturate(160%) blur(14px);
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: var(--tj-r);
    padding-block: 9px;
    padding-inline: 14px;
    box-shadow: 0 2px 6px rgba(8, 13, 26, .18), 0 14px 34px -10px rgba(8, 13, 26, .45);
    font-weight: 600;
}

.landing .hero-float-badge .hfb-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--tj-r-xs);
}

/* Wave divider — meets the white stats band, and mirrors under RTL. */
.landing .hero-shape-svg path { fill: var(--tj-surface); }
.landing .hero-shape-svg svg  { display: block; }

[dir="rtl"] .landing .hero-shape-svg svg { transform: scaleX(-1); }

/* ---------------------------------------------------------------------------
   6. Stats band
   -------------------------------------------------------------------------- */
.landing .stat-card.card {
    background-color: var(--tj-surface);
    border: 1px solid var(--tj-line) !important;
    border-radius: var(--tj-r-lg) !important;
    box-shadow: var(--tj-sh-1) !important;
    transition: transform .25s var(--tj-ease), box-shadow .25s var(--tj-ease), border-color .25s var(--tj-ease);
}

.landing .stat-card.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--tj-sh-2) !important;
    border-color: rgba(212, 175, 55, .35) !important;
}

.landing .counter-value {
    color: var(--tj-indigo) !important;
    font-size: clamp(1.9rem, 1.3rem + 1.7vw, 2.7rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: var(--tj-tight);
    font-variant-numeric: tabular-nums;
}

.landing .stat-card p.text-muted {
    color: var(--tj-muted) !important;
    font-size: .86rem;
    font-weight: 500;
}

/* ---------------------------------------------------------------------------
   7. Features
   -------------------------------------------------------------------------- */
.landing #features { background-color: var(--tj-surface); }

.landing #features .row > [class*="col-"] > .d-flex.h-100 {
    background-color: var(--tj-surface);
    border: 1px solid var(--tj-line);
    border-radius: var(--tj-r-lg);
    padding: var(--tj-3) !important;
    box-shadow: var(--tj-sh-1);
    transition: transform .26s var(--tj-ease), box-shadow .26s var(--tj-ease), border-color .26s var(--tj-ease);
}

.landing #features .row > [class*="col-"] > .d-flex.h-100:hover {
    transform: translateY(-4px);
    box-shadow: var(--tj-sh-2);
    border-color: rgba(64, 81, 137, .22);
}

.landing #features h5 {
    color: var(--tj-ink) !important;
    font-weight: 700;
    letter-spacing: var(--tj-tight-sm);
    margin-block-end: 6px !important;
}

.landing #features p.text-muted {
    color: var(--tj-muted) !important;
    font-size: .93rem;
    line-height: 1.7;
    max-width: none;
    margin-inline: 0;
}

.landing .feature-icon-lg {
    width: 56px;
    height: 56px;
    border-radius: var(--tj-r);
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .05), 0 2px 6px -2px rgba(15, 23, 42, .1);
    transition: transform .26s var(--tj-ease);
}

.landing #features .row > [class*="col-"] > .d-flex.h-100:hover .feature-icon-lg {
    transform: translateY(-2px);
}

/* ---------------------------------------------------------------------------
   8. How it works
   -------------------------------------------------------------------------- */
.landing #how-it-works.bg-light {
    background-color: var(--tj-tint) !important;
    border-block: 1px solid var(--tj-line-soft);
}

.landing #how-it-works .card {
    background-color: var(--tj-surface);
    border: 1px solid var(--tj-line) !important;
    border-radius: var(--tj-r-xl) !important;
    box-shadow: var(--tj-sh-1) !important;
    transition: transform .26s var(--tj-ease), box-shadow .26s var(--tj-ease), border-color .26s var(--tj-ease);
}

.landing #how-it-works .card:hover {
    transform: translateY(-5px);
    box-shadow: var(--tj-sh-2) !important;
    border-color: rgba(64, 81, 137, .22) !important;
}

.landing #how-it-works .feature-icon-lg {
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .05), 0 6px 18px -6px rgba(15, 23, 42, .18);
}

.landing #how-it-works .step-number {
    background-color: transparent !important;
    background-image: linear-gradient(135deg, #e9c874, #b8860b) !important;
    color: var(--tj-gold-ink) !important;
    font-weight: 700;
    box-shadow: 0 1px 2px rgba(122, 97, 26, .25), 0 6px 14px -4px rgba(212, 175, 55, .5);
}

.landing #how-it-works h5 {
    color: var(--tj-ink) !important;
    letter-spacing: var(--tj-tight-sm);
}

.landing #how-it-works p.text-muted {
    color: var(--tj-muted) !important;
    font-size: .94rem;
    line-height: 1.7;
    max-width: none;
    margin-inline: auto;
}

/* ---------------------------------------------------------------------------
   9. Pricing
   -------------------------------------------------------------------------- */
.landing #plans { background-color: var(--tj-surface); }

/* Billing period — segmented pill control */
.landing #plans .btn-group {
    background-color: var(--tj-tint);
    border: 1px solid var(--tj-line);
    border-radius: var(--tj-r-pill);
    padding: 5px;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, .05);
    gap: 4px;
}

.landing #plans .btn-group > .btn {
    border-radius: var(--tj-r-pill) !important;
    padding-block: 9px;
    padding-inline: 22px;
    font-size: .9rem;
    box-shadow: none !important;
}

.landing #plans .btn-group > .btn:hover { transform: none; }

.landing #plans .btn-group > .btn-success {
    border-color: transparent !important;
    box-shadow: 0 1px 2px rgba(122, 97, 26, .22), 0 4px 12px -3px rgba(212, 175, 55, .5) !important;
}

.landing #plans .btn-group > .btn-outline-success {
    background-color: transparent !important;
    background-image: none !important;
    border-color: transparent !important;
    color: var(--tj-muted) !important;
}

.landing #plans .btn-group > .btn-outline-success:hover {
    background-color: rgba(15, 23, 42, .04) !important;
    color: var(--tj-ink) !important;
}

.landing #plans .btn-group .badge {
    background-color: rgba(47, 36, 0, .14) !important;
    color: #4a3a05 !important;
    border-radius: var(--tj-r-pill);
    font-weight: 700;
    font-size: .66rem;
    letter-spacing: var(--tj-tight-sm);
}

/* Plan cards */
.landing .plan-card.card {
    background-color: var(--tj-surface);
    border: 1px solid var(--tj-line) !important;
    border-radius: var(--tj-r-2xl) !important;
    box-shadow: var(--tj-sh-1) !important;
    overflow: hidden;
    transition: transform .28s var(--tj-ease), box-shadow .28s var(--tj-ease), border-color .28s var(--tj-ease);
}

.landing .plan-card.card:hover {
    transform: translateY(-6px);
    box-shadow: var(--tj-sh-3) !important;
    border-color: rgba(64, 81, 137, .24) !important;
}

/* Most popular */
.landing .plan-card.popular.card {
    border-color: rgba(212, 175, 55, .5) !important;
    box-shadow:
        0 0 0 1px rgba(212, 175, 55, .3),
        0 10px 24px -8px rgba(212, 175, 55, .28),
        0 32px 64px -20px rgba(15, 23, 42, .24) !important;
}

.landing .plan-card.popular.card:hover {
    border-color: rgba(212, 175, 55, .72) !important;
    box-shadow:
        0 0 0 1px rgba(212, 175, 55, .45),
        0 16px 34px -10px rgba(212, 175, 55, .4),
        0 40px 80px -22px rgba(15, 23, 42, .3) !important;
}

.landing .plan-card.popular .card-header {
    background-color: #d4af37 !important;
    background-image: linear-gradient(100deg, #f0d68a 0%, #d4af37 55%, #b8860b 100%) !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: var(--tj-gold-ink) !important;
    padding-block: 11px !important;
}

.landing .plan-card.popular .card-header .fw-semibold {
    font-weight: 700 !important;
    font-size: .8rem;
    letter-spacing: var(--tj-wide);
    text-transform: uppercase;
}

.landing .plan-card .card-body {
    padding: var(--tj-4) var(--tj-3) var(--tj-3) !important;
}

.landing .plan-card h4 {
    color: var(--tj-ink) !important;
    font-size: 1.18rem;
    font-weight: 700;
    letter-spacing: var(--tj-tight-sm);
}

.landing .plan-card .card-body > .d-flex > .flex-grow-1 > p.text-muted {
    color: var(--tj-muted) !important;
    font-size: .84rem;
    line-height: 1.6;
    max-width: none;
    margin-inline: 0;
}

.landing .plan-card .avatar-title {
    background-color: rgba(212, 175, 55, .12) !important;
    color: var(--tj-gold-700) !important;
    box-shadow: inset 0 0 0 1px rgba(212, 175, 55, .3);
}

/* Price typography — the hero of the card */
.landing #plans .plan-card .card-body h2 {
    color: var(--tj-ink) !important;
    font-size: clamp(2.1rem, 1.5rem + 1.7vw, 2.9rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: var(--tj-tight);
    font-variant-numeric: tabular-nums;
}

.landing #plans .plan-card .card-body h2 small {
    color: var(--tj-muted) !important;
    font-size: .9rem !important;
    font-weight: 500;
    letter-spacing: normal;
}

.landing #plans .plan-card .card-body h2 small del { opacity: .65; }

.landing #plans .plan-card .card-body > .mb-4 > div > small {
    color: var(--tj-muted) !important;
    font-size: .82rem;
}

/* Feature list */
.landing .plan-card ul.vstack {
    border-block-start: 1px solid var(--tj-line-soft);
    padding-block-start: var(--tj-3);
    row-gap: 11px !important;
}

.landing .plan-card ul.vstack li {
    font-size: .9rem;
    color: var(--tj-body);
    line-height: 1.5;
}

.landing .plan-card ul.vstack li b {
    color: var(--tj-ink);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.landing .plan-card ul.vstack li .ri-checkbox-circle-fill {
    color: var(--tj-gold-700) !important;
}

.landing .plan-card ul.vstack li .ri-close-circle-fill {
    color: rgba(15, 23, 42, .22) !important;
}

.landing .plan-card ul.vstack li span.text-muted {
    color: rgba(107, 114, 128, .72) !important;
}

.landing .plan-card .card-body > a.btn {
    border-radius: var(--tj-r);
    padding-block: 12px;
}

@media (min-width: 992px) {
    .landing .plan-card.popular.card { transform: translateY(-12px); }
    .landing .plan-card.popular.card:hover { transform: translateY(-18px); }
}

/* ---------------------------------------------------------------------------
   10. Templates
   -------------------------------------------------------------------------- */
.landing .tpl-section {
    background-color: var(--tj-tint);
    background-image: linear-gradient(180deg, #f6f8fc 0%, #fbfcfe 60%, #ffffff 100%);
    border-block-start: 1px solid var(--tj-line-soft);
}

.landing .templates-badge.badge {
    background-color: rgba(212, 175, 55, .12) !important;
    color: var(--tj-gold-800) !important;
    border: 1px solid rgba(212, 175, 55, .28);
    border-radius: var(--tj-r-pill);
    letter-spacing: var(--tj-wide);
    font-weight: 700;
}

.landing .tpl-card.card {
    background-color: var(--tj-surface);
    border: 1px solid var(--tj-line);
    border-radius: var(--tj-r-xl);
    box-shadow: var(--tj-sh-1);
    transition: transform .3s var(--tj-ease), box-shadow .3s var(--tj-ease), border-color .3s var(--tj-ease);
}

.landing .tpl-card.card:hover {
    transform: translateY(-6px);
    box-shadow: var(--tj-sh-3);
    border-color: rgba(64, 81, 137, .22);
}

.landing .tpl-browser {
    background-color: #f6f8fc;
    border-block-end: 1px solid var(--tj-line-soft);
    padding-block: 9px;
    padding-inline: 12px;
}

.landing .tpl-url {
    background-color: var(--tj-surface);
    border: 1px solid var(--tj-line-soft);
    height: 15px;
    opacity: 1;
}

.landing .tpl-badge.badge {
    border-radius: var(--tj-r-pill);
    letter-spacing: var(--tj-tight-sm);
    box-shadow: 0 2px 8px rgba(8, 13, 26, .3);
}

.landing .tpl-card .card-body {
    padding-block: 14px !important;
    padding-inline: 16px !important;
    border-block-start: 1px solid var(--tj-line-soft);
}

.landing .tpl-name {
    color: var(--tj-ink);
    font-weight: 700;
    letter-spacing: var(--tj-tight-sm);
}

.landing .tpl-tag {
    color: var(--tj-muted) !important;
    opacity: 1;
    font-size: .72rem;
}

/* Templates closing CTA — replaces the navy→gold ramp with an indigo night + gold glow. */
.landing #templates .card.rounded-4 {
    background-color: var(--tj-night-700) !important;
    background-image:
        radial-gradient(620px 240px at var(--tj-glow-x) -30%, rgba(212, 175, 55, .34) 0%, rgba(212, 175, 55, 0) 68%),
        radial-gradient(520px 260px at var(--tj-glow2-x) 130%, rgba(64, 81, 137, .7) 0%, rgba(64, 81, 137, 0) 66%),
        linear-gradient(140deg, #12203c 0%, #0b1226 100%) !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
    border-radius: var(--tj-r-2xl) !important;
    box-shadow: 0 2px 6px rgba(8, 13, 26, .2), 0 24px 60px -18px rgba(8, 13, 26, .55);
    padding-block: var(--tj-5) !important;
    padding-inline: var(--tj-3) !important;
}

.landing #templates .card.rounded-4 h5 {
    color: #fff !important;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: var(--tj-tight);
}

/* ---------------------------------------------------------------------------
   11. FAQ
   -------------------------------------------------------------------------- */
.landing .faq-section { background-color: var(--tj-surface); }

.landing .faq-section .accordion-item {
    background-color: var(--tj-surface);
    border: 1px solid var(--tj-line) !important;
    border-radius: var(--tj-r) !important;
    box-shadow: var(--tj-sh-1);
    margin-block-end: 12px !important;
    overflow: hidden;
    transition: border-color .25s var(--tj-ease), box-shadow .25s var(--tj-ease);
}

.landing .faq-section .accordion-item:hover {
    border-color: rgba(64, 81, 137, .22) !important;
}

.landing .faq-section .accordion-button {
    background-color: var(--tj-surface) !important;
    color: var(--tj-ink) !important;
    font-size: .98rem;
    font-weight: 600;
    line-height: 1.6;
    padding-block: 17px;
    padding-inline: 20px;
    border-radius: var(--tj-r) !important;
    box-shadow: none !important;
    text-align: start;
    transition: background-color .22s var(--tj-ease), color .22s var(--tj-ease);
}

.landing .faq-section .accordion-button:not(.collapsed) {
    color: var(--tj-indigo) !important;
    background-color: rgba(64, 81, 137, .055) !important;
    box-shadow: none !important;
}

.landing .faq-section .accordion-button:focus {
    box-shadow: none !important;
    border-color: transparent;
}

.landing .faq-section .accordion-body {
    color: var(--tj-body) !important;
    font-size: .94rem;
    line-height: 1.8;
    padding-block: 4px 20px;
    padding-inline: 20px;
}

/* ---------------------------------------------------------------------------
   12. Closing CTA
   -------------------------------------------------------------------------- */
.landing .cta-section {
    background-color: var(--tj-night-800);
    background-image:
        radial-gradient(900px 420px at var(--tj-glow-x) -25%, rgba(212, 175, 55, .22) 0%, rgba(212, 175, 55, 0) 64%),
        radial-gradient(760px 440px at var(--tj-glow2-x) 125%, rgba(64, 81, 137, .55) 0%, rgba(64, 81, 137, 0) 62%),
        linear-gradient(160deg, #0c1428 0%, #090f21 100%);
    border-block-start: 1px solid var(--tj-line-soft);
    padding-block: clamp(64px, 5vw + 32px, 104px) !important;
}

/* Keep the decorative veil behind the content and out of the click path. */
.landing .cta-section::before {
    z-index: 0;
    pointer-events: none;
    background-image: radial-gradient(ellipse 62% 100% at 50% 0%, rgba(212, 175, 55, .16) 0%, transparent 70%);
}

.landing .cta-section > .container {
    position: relative;
    z-index: 1;
}

.landing .cta-section h2 {
    font-size: clamp(1.75rem, 1.15rem + 1.9vw, 2.6rem);
    line-height: 1.2;
    letter-spacing: var(--tj-tight);
}

.landing .cta-section p {
    color: rgba(226, 232, 240, .68) !important;
    font-size: 1.04rem;
    line-height: 1.75;
    max-width: 56ch;
    margin-inline: auto;
}

/* ---------------------------------------------------------------------------
   13. Footer
   -------------------------------------------------------------------------- */
.landing footer.custom-footer.bg-dark {
    background-color: #070c17 !important;
    background-image: radial-gradient(760px 320px at var(--tj-glow2-x) -40%, rgba(64, 81, 137, .3) 0%, rgba(64, 81, 137, 0) 62%);
    border-block-start: 1px solid rgba(255, 255, 255, .07);
    padding-block: var(--tj-8) var(--tj-4) !important;
}

.landing footer.custom-footer h6 {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: var(--tj-wide);
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5) !important;
}

.landing footer.custom-footer a {
    color: rgba(226, 232, 240, .62);
    font-size: .92rem;
    transition: color .2s var(--tj-ease);
}

.landing footer.custom-footer a:hover { color: var(--tj-gold-200); }

.landing footer.custom-footer .footer-list li { margin-block-end: 9px; }

.landing .footer-brand-icon {
    border-radius: var(--tj-r-sm);
    background-image: linear-gradient(140deg, #f0d68a 0%, #d4af37 52%, #a97708 100%);
    box-shadow: 0 1px 2px rgba(122, 97, 26, .3), 0 8px 20px -6px rgba(212, 175, 55, .4);
}

.landing .footer-brand-text {
    font-weight: 700;
    letter-spacing: var(--tj-tight);
}

.landing footer.custom-footer hr {
    border-color: rgba(255, 255, 255, .09) !important;
    opacity: 1;
}

.landing .footer-social-link .avatar-title {
    background-color: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .1);
    color: rgba(226, 232, 240, .7);
    transition: background-color .2s var(--tj-ease), color .2s var(--tj-ease), border-color .2s var(--tj-ease);
}

.landing .footer-social-link a:hover .avatar-title {
    background-color: rgba(212, 175, 55, .16);
    border-color: rgba(212, 175, 55, .4);
    color: var(--tj-gold-200);
}

/* Back to top */
.landing .landing-back-top.btn {
    border-radius: var(--tj-r-sm);
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(122, 97, 26, .25), 0 12px 28px -8px rgba(212, 175, 55, .55) !important;
}

/* ---------------------------------------------------------------------------
   14. Responsive tuning (390px / 768px / 1440px)
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .landing .hero-section .pb-5 { padding-bottom: 3.5rem !important; }
    .landing .hero-section .lead { max-width: none; }
}

@media (max-width: 767.98px) {
    .landing .section { padding-block: 56px; }

    .landing .hero-section {
        padding-top: 104px;
        background-attachment: scroll;
    }

    .landing .hero-section .lead {
        font-size: 1rem;
        margin-block-end: var(--tj-4) !important;
    }

    .landing .hero-section .btn-lg {
        width: 100%;
        padding-inline: var(--tj-2) !important;
    }

    .landing .hero-section .d-flex.gap-4 {
        font-size: 12px;
        column-gap: var(--tj-2) !important;
    }

    .landing .hero-section::after { display: none; }

    .landing #features .row > [class*="col-"] > .d-flex.h-100 { padding: 20px !important; }

    .landing #plans .btn-group > .btn { padding-inline: 15px; font-size: .82rem; }

    .landing .plan-card .card-body { padding: var(--tj-3) 20px !important; }

    .landing footer.custom-footer.bg-dark { padding-block: var(--tj-6) var(--tj-3) !important; }
}

@media (min-width: 1400px) {
    .landing .section > .container,
    .landing .navbar-landing > .container { max-width: 1200px; }
}

/* ---------------------------------------------------------------------------
   15. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html:root { scroll-behavior: auto !important; }

    .landing,
    .landing *,
    .landing *::before,
    .landing *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        animation-delay: 0ms !important;
        transition-duration: .001ms !important;
        transition-delay: 0ms !important;
        scroll-behavior: auto !important;
    }

    .landing .hero-blob,
    .landing .hero-float-badge,
    .landing .brand-logo-icon,
    .landing .footer-brand-icon {
        animation: none !important;
    }

    .landing .dashboard-mockup,
    .landing .dashboard-mockup:hover,
    .landing .btn:hover,
    .landing .stat-card.card:hover,
    .landing #features .row > [class*="col-"] > .d-flex.h-100:hover,
    .landing #features .row > [class*="col-"] > .d-flex.h-100:hover .feature-icon-lg,
    .landing #how-it-works .card:hover,
    .landing .plan-card.card:hover,
    .landing .plan-card.popular.card,
    .landing .plan-card.popular.card:hover,
    .landing .tpl-card.card:hover {
        transform: none !important;
    }

    .landing .navbar-landing .navbar-nav .nav-item .nav-link::after {
        transition: none !important;
    }
}
