/**
 * BaseCRM - Homepage Styles
 *
 * Modern homepage with impressive animations and effects
 */

/* Google Fonts Heebo loaded via <link> in HTML - no @import needed */

/* ==========================================
   CSS VARIABLES
   ========================================== */

:root {
    /* Bold & Vibrant Color Palette */
    --primary-vibrant: #FF6B6B;      /* Coral Red - Main CTA (a FILL) */
    --primary-vibrant-text: #bf5050; /* its ink sibling: #FF6B6B is 2.78:1 on white */
    --primary-blue: #4ECDC4;         /* Turquoise - Secondary */
    --primary-purple: #9D4EDD;       /* Vibrant Purple - Accent */
    --accent-yellow: #FFE66D;        /* Sunny Yellow - Highlights */
    --accent-green: #06D6A0;         /* Mint Green - Success */
    --accent-orange: #FF8C42;        /* Tangerine - Energy */
    --neutral-dark: #2D3142;         /* Deep Slate */
    --neutral-light: #F7F7F9;        /* Soft White Background */
    /* Ink for the vibrant FILLS above. Those are mid-tones: white measures
       1.89–2.78:1 on coral, orange, turquoise and mint, so a white label on any
       of them fails IS 5568 / WCAG AA. Dark ink measures 5.56 / 6.67 / 7.97 /
       8.18:1 on the same four — which is why the fix moves the INK and leaves
       every brand colour exactly where it was. Measured, not chosen. */
    --ink-on-vibrant: #212529;

    /* Gradients */
    --gradient-hero: linear-gradient(135deg, #506be7 0%, #764ba2 100%);
    --gradient-1: linear-gradient(135deg, #FF6B6B 0%, #FF8C42 100%);
    --gradient-2: linear-gradient(135deg, #4ECDC4 0%, #06D6A0 100%);
    --gradient-3: linear-gradient(135deg, #9D4EDD 0%, #506be7 100%);
    --gradient-4: linear-gradient(135deg, #FFE66D 0%, #FF8C42 100%);
    --gradient-5: linear-gradient(135deg, #06D6A0 0%, #4ECDC4 100%);
    --gradient-6: linear-gradient(135deg, #FF6B6B 0%, #9D4EDD 100%);

    /* Animation */
    --animation-duration: 0.6s;
    --animation-easing: cubic-bezier(0.4, 0, 0.2, 1);
    --animation-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Spacing */
    --section-padding: 5rem 0;

    /* Shadow */
    --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.15);
    --shadow-colored: 0 10px 40px rgba(157, 78, 221, 0.2);
}

/* ==========================================
   GLOBAL STYLES
   ========================================== */

html {
    scroll-behavior: smooth;
}

/* Arabic and French marketing copy tends to run a bit longer than the
   Hebrew source, which can push wrapping in tight spots (top nav buttons)
   on narrower desktop widths. Scaling the root font-size shrinks every
   rem-based measurement on the page proportionally — subtle, sitewide,
   no redesign. Mirrors the same rule in assets/css/design-tokens.css
   (the logged-in app), which this marketing stylesheet doesn't load. */
html[lang="ar"],
html[lang="fr"],
html[lang="ru"] {
    font-size: 97%;
}

body {
    overflow-x: hidden;
    font-family: 'Heebo', 'Segoe UI', Tahoma, sans-serif;
}

/* ==========================================
   HEADER / NAVIGATION - Floating Pill Design
   ========================================== */

.homepage-header {
    position: fixed;
    top: 20px;
    left: 2.5%;
    right: 2.5%;
    width: 95%;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 50px;
    padding: 1rem 2rem;
    box-shadow: var(--shadow-md);
    z-index: 1000;
    transition: all 0.3s var(--animation-easing);
    overflow: visible !important;
    clip-path: none !important;
}

.homepage-header.scrolled {
    top: 10px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: var(--shadow-lg);
}

.nav-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0 0rem;
    overflow: visible;
    /* space-between alone lets the brand and the menu meet with ZERO gap once the
       links grow. Around 1100px the last link then wrapped to two lines and the
       logo rendered between them. Visible in Hebrew too — Arabic only made it
       obvious, since two scripts colliding reads as broken rather than tight. */
    gap: 1.25rem;
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.brand-name {
    display: none;  /* Hide text, show only logo */
    font-size: 1.5rem;
    font-weight: 700;
    background: linear-gradient(90deg, var(--hero-gradient-1), var(--accent-gold));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transition: all 0.3s ease;
}

.navbar-toggler {
    display: none;
    background: none;
    border: none;
    font-size: 1.75rem;
    color: var(--accent-gold);
    cursor: pointer;
}

.nav-menu {
    display: flex;
    align-items: center;
    gap: 2rem;
    overflow: visible;
}

.nav-links {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: calc(2.25rem + 9px);
    overflow: visible;
}

.nav-links a {
    color: var(--neutral-dark);
    text-decoration: none;
    font-weight: 600;
    position: relative;
    white-space: nowrap;
    transition: color 0.3s ease;
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 3px;
    background: var(--gradient-3);
    border-radius: 2px;
    transition: width 0.3s var(--animation-easing);
}

.nav-links a:hover {
    color: var(--primary-purple);
}

.nav-links a:hover::after {
    width: 100%;
}

.nav-links a:focus-visible {
    outline: 3px solid var(--primary-purple);
    outline-offset: 5px;
    border-radius: 4px;
}

/* Business Dropdown - Clean Simple Implementation */
.business-dropdown {
    position: relative;
}

.business-dropdown-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    /* A nav label is a unit — it drops as a whole or not at all. Without this it
       broke mid-phrase ("סוג העסק / שלך", "نوع / عملك") and collided with the logo.
       Matches the site-wide never-break-a-word rule. */
    white-space: nowrap;
    color: var(--neutral-dark);
    font-weight: 600;
    text-decoration: none;
    position: relative;
    transition: color 0.3s ease;
    cursor: pointer;
    user-select: none;
}

.business-dropdown-btn i {
    font-size: 0.85rem;
    transition: transform 0.3s ease;
}

.business-dropdown:hover .business-dropdown-btn i {
    transform: translateY(2px);
}

.business-dropdown-btn::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 3px;
    background: var(--gradient-3);
    border-radius: 2px;
    transition: width 0.3s var(--animation-easing);
}

.business-dropdown:hover .business-dropdown-btn {
    color: var(--primary-purple);
}

.business-dropdown:hover .business-dropdown-btn::after {
    width: 100%;
}

.business-dropdown-content {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 15px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    padding: 8px 0;
    min-width: 280px;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}

/* ============================================
   Mega-menu (3-column grouped) — desktop
   ============================================ */
.business-mega-menu {
    display: grid;
    grid-template-columns: repeat(3, minmax(220px, 1fr));
    gap: 0;
    min-width: 760px;
    padding: 18px 8px;
    /* Anchor menu's RIGHT edge to trigger's right edge so menu extends LEFT
       (toward page interior), keeping the logo on the right uncovered. */
    right: 0;
    left: auto;
    transform: translateY(-10px);
}

.business-dropdown.active .business-mega-menu {
    transform: translateY(0);
}

/* LTR: the nav is mirrored, so the trigger sits on the LEFT. Anchor the menu's
   LEFT edge to it and let it extend RIGHT (toward the page interior) instead of
   overflowing off the left edge. */
[dir="ltr"] .business-dropdown-content,
[dir="ltr"] .business-mega-menu {
    right: auto;
    left: 0;
}

[dir="ltr"] .business-mega-menu .mega-col {
    border-left: 0;
    border-right: 1px solid #f1f1f4;
}

[dir="ltr"] .business-mega-menu .mega-col:first-child {
    border-right: 0;
}

.business-mega-menu .mega-col {
    padding: 8px 16px;
    border-left: 1px solid #f1f1f4;
}

.business-mega-menu .mega-col:first-child {
    border-left: 0;
}

.business-mega-menu .mega-col-title {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin: 0 0 8px;
    padding: 6px 8px;
    background: transparent;
    border: 0;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0.02em;
    color: var(--primary-purple, #9D4EDD);
    cursor: default;
    text-align: right;
    pointer-events: none;
}

/* LTR: keep the column title hugging its icon (start), not pushed to the far end. */
[dir="ltr"] .business-mega-menu .mega-col-title {
    text-align: left;
}

.business-mega-menu .mega-col-title i:first-child {
    font-size: 0.95rem;
    opacity: 0.85;
}

.business-mega-menu .mega-col-title span {
    flex: 1;
}

.business-mega-menu .mega-col-chevron {
    display: none;
    transition: transform 0.25s ease;
}

.business-mega-menu .mega-col-list {
    display: flex;
    flex-direction: column;
}

.business-mega-menu .mega-col-list a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 10px;
    color: var(--neutral-dark, #2d3142);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    line-height: 1.3;
    transition: background 0.18s ease, color 0.18s ease;
}

.business-mega-menu .mega-col-list a::after {
    display: none !important;
}

.business-mega-menu .mega-col-list a:hover {
    background: linear-gradient(90deg, rgba(157, 78, 221, 0.10), rgba(80, 107, 231, 0.10));
    color: var(--primary-purple, #9D4EDD);
}

.business-mega-menu .mega-col-list a i {
    font-size: 1.05rem;
    opacity: 0.78;
    flex-shrink: 0;
}

/* Tablet: 2 columns */
@media (min-width: 992px) and (max-width: 1199px) {
    .business-mega-menu {
        grid-template-columns: repeat(2, minmax(220px, 1fr));
        min-width: 540px;
    }
    .business-mega-menu .mega-col:nth-child(2) {
        border-left: 0;
    }
    .business-mega-menu .mega-col:nth-child(3) {
        grid-column: 1 / -1;
        border-left: 0;
        border-top: 1px solid #f1f1f4;
        margin-top: 8px;
        padding-top: 14px;
    }
}

.business-dropdown.active .business-dropdown-content {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.business-dropdown-content a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 24px;
    color: var(--neutral-dark);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
}

.business-dropdown-content a::after {
    display: none !important;
}

.business-dropdown-content a:hover {
    background: linear-gradient(90deg, rgba(157, 78, 221, 0.08), rgba(80, 107, 231, 0.08));
    color: var(--primary-purple);
}

.business-dropdown-content a i {
    font-size: 1.2rem;
    opacity: 0.8;
}

.nav-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem 1rem;
}

/* Reclaim horizontal space in the middle desktop band so the action buttons stay
   on ONE row. Russian and French CTAs run roughly twice the length of the Hebrew
   source ("Бесплатная регистрация" / "Inscription gratuite" vs "הרשמה חינם"), so
   the signup button wrapped to a second row at 1280-1440 — the most common laptop
   widths. Hebrew and Arabic always fit; this simply gives the long locales room
   instead of shortening their copy. */
@media (min-width: 993px) and (max-width: 1560px) {
    .nav-menu { gap: 1.25rem; }
    /* Menu labels only — the reclaimed space above comes from .nav-menu and the
       button padding, so the links can breathe without pushing the CTAs to a
       second row. Verified 993-1920px in he/en/ru/fr/ar. */
    .nav-links { gap: 1.45rem; }
    .nav-actions { gap: 0.5rem 0.6rem; }
    .nav-actions .btn-outline-primary,
    .nav-actions .btn-primary {
        padding-inline: 1rem;
    }
}

/* Tightest band — the long locales need a little more than the block above to
   keep all three buttons on one row here. */
@media (min-width: 993px) and (max-width: 1330px) {
    .nav-menu { gap: 0.9rem; }
    /* Do NOT widen this one. At 0.95rem the English CTAs already drop to a second
       row at 1100px — this band has no slack left to give. */
    .nav-links { gap: 0.85rem; }
    .nav-actions { gap: 0.4rem 0.45rem; }
    .nav-actions .btn-outline-primary,
    .nav-actions .btn-primary {
        padding-inline: 0.75rem;
        font-size: 0.94rem;
    }
}

/* Hebrew keeps the extra 9px between menu labels (the base rule above) below 1561px
   too. The other locales stay on the two blocks above because they have no room:
   +9px wraps the Russian CTAs at 1331-1359 and every long locale somewhere in the
   tightest band. Hebrew itself fits from ~1031px; 1060 leaves room for a classic
   17px scrollbar, which the media query counts and the layout does not. */
@media (min-width: 1331px) and (max-width: 1560px) {
    html[lang="he"] .nav-links { gap: calc(1.45rem + 9px); }
}
@media (min-width: 1060px) and (max-width: 1330px) {
    html[lang="he"] .nav-links { gap: calc(0.85rem + 9px); }
}

.nav-actions .btn-outline-primary {
    /* #8A3FC8, not var(--primary-purple) = #9D4EDD: this button sits on the
       nav's pale gradient, whose darker stop is #E9ECEF, where #9D4EDD measures
       3.88:1 — under AA. #8A3FC8 is the same hue one step deeper and measures
       4.88:1 there, 5.79:1 on white. The border follows the label so the control
       keeps its 3:1 non-text contrast too. */
    color: #8A3FC8;
    border-color: #8A3FC8;
    border-radius: 50px;
    font-weight: 600;
    padding: 0.5rem 1.5rem;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.nav-actions .btn-outline-primary:hover {
    background-color: var(--primary-purple);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(157, 78, 221, 0.3);
}

.nav-actions .btn-outline-primary:focus-visible {
    outline: 3px solid var(--primary-purple);
    outline-offset: 3px;
}

.nav-actions .btn-primary {
    background: var(--gradient-1);
    border: none;
    color: var(--ink-on-vibrant);
    font-weight: 700;
    border-radius: 50px;
    padding: 0.5rem 1.5rem;
    box-shadow: 0 5px 15px rgba(255, 107, 107, 0.3);
    transition: all 0.3s ease;
    white-space: nowrap;
}

.nav-actions .btn-primary:hover {
    background: var(--gradient-1);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 107, 107, 0.4);
}

/* ==========================================
   HERO SECTION - Animated Blob Morphing
   ========================================== */

.hero-section {
    min-height: 90vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    background: var(--gradient-hero);
    padding-top: 120px;
    padding-bottom: 4rem;
    color: white;
}

/* Animated Blob Shapes */
.floating-shapes {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
}

.shape {
    position: absolute;
    filter: blur(60px);
    opacity: 0.3;
    will-change: transform;
}

.shape-1 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(255, 230, 109, 0.4), transparent 70%);
    top: -10%;
    left: -5%;
    animation: morphBlob1 20s ease-in-out infinite;
}

.shape-2 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(78, 205, 196, 0.3), transparent 70%);
    bottom: -5%;
    right: -10%;
    animation: morphBlob2 18s ease-in-out infinite;
    animation-delay: -5s;
}

.shape-3 {
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(255, 107, 107, 0.25), transparent 70%);
    top: 40%;
    left: 50%;
    animation: morphBlob3 22s ease-in-out infinite;
    animation-delay: -10s;
}

@keyframes morphBlob1 {
    0%, 100% {
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
        transform: translate(0, 0) scale(1);
    }
    33% {
        border-radius: 40% 60% 60% 40% / 50% 60% 40% 50%;
        transform: translate(50px, -50px) scale(1.1);
    }
    66% {
        border-radius: 50% 50% 50% 50% / 40% 70% 30% 60%;
        transform: translate(-30px, 30px) scale(0.9);
    }
}

@keyframes morphBlob2 {
    0%, 100% {
        border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
        transform: translate(0, 0) scale(1) rotate(0deg);
    }
    33% {
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
        transform: translate(-40px, 40px) scale(1.15) rotate(120deg);
    }
    66% {
        border-radius: 50% 50% 60% 40% / 50% 60% 40% 50%;
        transform: translate(30px, -30px) scale(0.95) rotate(240deg);
    }
}

@keyframes morphBlob3 {
    0%, 100% {
        border-radius: 50% 50% 40% 60% / 50% 40% 60% 50%;
        transform: translate(0, 0) scale(1);
    }
    50% {
        border-radius: 40% 60% 50% 50% / 60% 50% 50% 40%;
        transform: translate(-40px, -40px) scale(1.2);
    }
}

.hero-section .container {
    position: relative;
    z-index: 2;
}

.hero-content {
    padding: 2rem 0;
}

.hero-title {
    font-size: 3.5rem;
    font-weight: 900;
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

.gradient-text {
    color: white; /* Fallback */
    background: linear-gradient(90deg,
        #FF8C42 0%,
        #FFE66D 33%,
        #FFFFFF 66%,
        #FF8C42 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmer 8s linear infinite;
}

/* Fallback for browsers that don't support background-clip */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
    .gradient-text {
        color: white;
        background: none;
    }
}

@keyframes shimmer {
    0% {
        background-position: 0% center;
    }
    100% {
        background-position: 200% center;
    }
}

.hero-subtitle {
    font-size: 1.25rem;
    margin-bottom: 2rem;
    /* opacity:.95 removed — it composites the whole element, so it silently
       shaved contrast off a subtitle already sitting on a mid-tone hero. */
    line-height: 1.6;
}

.hero-actions {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.btn-hero {
    padding: 1rem 2.5rem;
    font-size: 1.1rem;
    border-radius: 50px;
    transition: all 0.3s var(--animation-easing);
    position: relative;
    overflow: hidden;
    font-weight: 700;
}

.btn-hero.btn-primary {
    background: var(--gradient-1);
    border: none;
    color: var(--ink-on-vibrant);
    box-shadow: 0 10px 30px rgba(255, 107, 107, 0.4);
}

.btn-hero.btn-primary:hover {
    background: var(--gradient-1);
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 15px 40px rgba(255, 107, 107, 0.5);
}

.btn-hero.btn-outline-light {
    border: 2px solid white;
    color: white;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
}

.btn-hero.btn-outline-light:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: white;
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 10px 30px rgba(255, 255, 255, 0.3);
}

/* Magnetic Button Effect (will be added via JS) */
.btn-hero.magnetic {
    transition: transform 0.1s ease-out;
}

.hero-features {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.hero-features span {
    font-size: 0.95rem;
    /* opacity:.9 removed — 4.03:1 on the hero. Size already de-emphasises it. */
}

.hero-features i {
    color: var(--accent-gold);
}

.hero-microcopy {
    font-size: 0.9rem;
    opacity: 0.8;
    margin-bottom: 1rem;
    color: rgba(255, 255, 255, 0.85);
}

.hero-microcopy i {
    color: var(--accent-yellow);
}

.hero-image {
    position: relative;
}

.image-container {
    animation: fadeInRight 1s ease;
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.parallax-image {
    will-change: transform;
}

/* ==========================================
   TAX AUTHORITY APPROVAL SECTION
   ========================================== */

.tax-approval-section {
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 50%, #f0f9ff 100%);
    padding: 4rem 0;
    position: relative;
    overflow: hidden;
}

.tax-approval-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #059669, #10b981, #34d399);
}

.tax-approval-banner {
    background: white;
    border-radius: 24px;
    padding: 3rem;
    box-shadow: 0 4px 30px rgba(5, 150, 105, 0.1);
    border: 1px solid rgba(5, 150, 105, 0.15);
    position: relative;
}

.tax-approval-badge {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    /* #06a674, not #059669, as the dark stop: white measured 2.54:1 on this pill
       and the dark ink the rest of the palette now uses measured 4.09:1 there —
       neither ink cleared it. Lightening that one stop to #06a674 puts the dark
       ink at 4.93 / 6.08 across the pair, so the pill stays bright and reads. */
    background: linear-gradient(135deg, #06a674 0%, #10b981 100%);
    color: var(--ink-on-vibrant);
    padding: 0.75rem 1.5rem;
    border-radius: 50px;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 15px rgba(5, 150, 105, 0.3);
}

.tax-approval-badge .badge-icon {
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}

.tax-approval-badge .badge-text {
    display: flex;
    flex-direction: column;
}

.tax-approval-badge .badge-label {
    font-weight: 700;
    font-size: 1rem;
}

.tax-approval-badge .badge-number {
    font-size: 0.85rem;
    /* opacity:.9 removed — the pill is a mid-tone green and the fade took the
       registration number to 2.54:1. See --ink-on-vibrant. */
}

.tax-approval-title {
    font-size: 2rem;
    font-weight: 800;
    color: #064e3b;
    margin-bottom: 1rem;
}

.tax-approval-subtitle {
    font-size: 1.1rem;
    color: #374151;
    line-height: 1.8;
    max-width: 900px;
    margin-bottom: 2.5rem;
}

.tax-approval-features {
    margin-bottom: 2rem;
}

.tax-feature-item {
    background: linear-gradient(135deg, #f0fdf4, #ecfdf5);
    border-radius: 16px;
    padding: 1.5rem;
    height: 100%;
    border: 1px solid rgba(5, 150, 105, 0.1);
    transition: all 0.3s var(--animation-easing);
}

.tax-feature-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(5, 150, 105, 0.15);
    border-color: rgba(5, 150, 105, 0.3);
}

.tax-feature-item i {
    font-size: 2rem;
    color: #059669;
    margin-bottom: 0.75rem;
    display: block;
}

.tax-feature-item h4 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #064e3b;
    margin-bottom: 0.5rem;
}

.tax-feature-item p {
    font-size: 0.95rem;
    color: #4b5563;
    line-height: 1.6;
    margin: 0;
}

/* חשבוניות ישראל / allocation number — a single highlighted strip inside the
   tax-registration banner. Deliberately NOT a fifth .tax-feature-item: four
   items fill that row exactly, and this claim carries more weight than any one
   of them. Same green family, one step deeper, plus a start-edge rule so it
   reads as a callout and not as another tile. Light-only, like the rest of this
   file — the marketing pages have no dark theme. */
.tax-alloc-callout {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    background: linear-gradient(135deg, #ecfdf5 0%, #eff6ff 100%);
    border: 1px solid rgba(5, 150, 105, 0.25);
    border-inline-start: 4px solid #047857;
    border-radius: 16px;
    padding: 1.5rem 1.75rem;
    margin-bottom: 2rem;
}

.tax-alloc-icon {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    /* #047857 measures 5.2:1 against white, so the glyph inside is legible ink
       rather than a 3:1 decoration. */
    background: #047857;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.tax-alloc-body {
    min-width: 0;
}

.tax-alloc-eyebrow {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #047857;
    margin-bottom: 0.35rem;
}

.tax-alloc-title {
    font-size: 1.3rem;
    font-weight: 800;
    color: #064e3b;
    margin-bottom: 0.6rem;
}

.tax-alloc-text {
    font-size: 1rem;
    color: #374151;
    line-height: 1.8;
    margin-bottom: 0.6rem;
}

.tax-alloc-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.9rem;
    font-weight: 700;
    color: #047857;
    text-decoration: none;
}

.tax-alloc-link:hover,
.tax-alloc-link:focus {
    color: #064e3b;
    text-decoration: underline;
}

.tax-approval-extra {
    padding-top: 1.5rem;
    border-top: 1px solid rgba(5, 150, 105, 0.1);
}

.extra-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0;
}

.extra-item i {
    font-size: 1.3rem;
    color: #059669;
    min-width: 28px;
}

.extra-item span {
    font-size: 1rem;
    color: #374151;
    font-weight: 500;
}

/* Tax approval responsive */
@media (max-width: 768px) {
    .tax-approval-section {
        padding: 2.5rem 0;
    }

    .tax-approval-banner {
        padding: 2rem 1.5rem;
    }

    .tax-approval-title {
        font-size: 1.5rem;
    }

    .tax-approval-subtitle {
        font-size: 1rem;
    }

    .tax-feature-item {
        padding: 1.25rem;
    }

    .tax-alloc-callout {
        flex-direction: column;
        gap: 0.9rem;
        padding: 1.25rem;
    }

    .tax-alloc-title {
        font-size: 1.15rem;
    }
}

/* ==========================================
   WHY BASE — the five things that matter most
   ------------------------------------------
   Sits directly under the tax-registration banner, which is where a first-time
   visitor has just been told we are a REGISTERED invoicing tool and is deciding
   whether that is all we are. So this block answers "and what else", in five
   claims, before the page fans out into audiences and feature grids.

   Deliberately NOT another card grid: the page already has three of those
   (audience, features, guides). Icon-beside-text rows read as a statement of
   what the product IS, and they carry no layout risk at any width.
   ========================================== */

.advantages-section {
    background: white;
    padding: 4.5rem 0;
}

.advantages-grid {
    max-width: 1000px;
    margin: 0 auto;
}

.advantage-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    height: 100%;
    padding: 1.25rem;
    border-radius: 16px;
    border: 1px solid transparent;
    transition: background 0.25s var(--animation-easing), border-color 0.25s var(--animation-easing);
}

.advantage-item:hover {
    background: var(--neutral-light);
    border-color: rgba(45, 49, 66, 0.08);
}

.advantage-icon {
    width: 52px;
    height: 52px;
    min-width: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.45rem;
    /* A soft tint of the item's own hue, with that hue's MEASURED text tone as
       the ink — never a mid-tone fill carrying a borrowed white. The five pairs
       below are each checked against the white section background. */
    background: rgba(157, 78, 221, 0.12);
    color: #7B2CBF;
}

/* 🔴 nth-child on the COLUMN, not on .advantage-item: the item is the only
   child of its .col-lg-6, so `.advantage-item:nth-child(n)` matched every item
   as :first-child and painted all five the same green. */
.advantages-grid > [class*="col-"]:nth-child(1) .advantage-icon { background: rgba(5, 150, 105, 0.12);  color: #047857; }
.advantages-grid > [class*="col-"]:nth-child(2) .advantage-icon { background: rgba(157, 78, 221, 0.12); color: #7B2CBF; }
.advantages-grid > [class*="col-"]:nth-child(3) .advantage-icon { background: rgba(37, 131, 125, 0.12); color: #1F6F6A; }
.advantages-grid > [class*="col-"]:nth-child(4) .advantage-icon { background: rgba(255, 140, 66, 0.15); color: #A8521A; }
.advantages-grid > [class*="col-"]:nth-child(5) .advantage-icon { background: rgba(59, 125, 216, 0.12); color: #2C5FA8; }

.advantage-body h3 {
    font-size: 1.12rem;
    font-weight: 700;
    color: var(--neutral-dark);
    margin: 0 0 0.35rem;
    line-height: 1.35;
}

.advantage-body p {
    font-size: 0.98rem;
    color: #555;
    line-height: 1.65;
    margin: 0;
}

.advantage-body a {
    color: #2C5FA8;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.advantage-body a:hover { color: #1E4780; }

@media (max-width: 768px) {
    .advantages-section { padding: 3rem 0; }
    .advantage-item { padding: 0.9rem 0.25rem; gap: 0.85rem; }
    .advantage-icon { width: 46px; height: 46px; min-width: 46px; font-size: 1.25rem; border-radius: 12px; }
    .advantage-body h3 { font-size: 1.05rem; }
    .advantage-body p { font-size: 0.94rem; }
}

/* ==========================================
   SECTION HEADERS
   ========================================== */

.section-header {
    margin-bottom: 3rem;
}

.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: #333;
}

.section-subtitle {
    font-size: 1.1rem;
    color: #666;
}

/* ==========================================
   AUDIENCE SECTION - Colorful Gradient Cards
   ========================================== */

.audience-section {
    background: var(--neutral-light);
}

.audience-card {
    border-radius: 20px;
    padding: 2.5rem;
    text-align: center;
    transition: all 0.4s var(--animation-bounce);
    height: 100%;
    border: none;
    color: var(--ink-on-vibrant);
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

/* Unique gradient for each card.
   Cards 1, 2 and 4 are vibrant mid-tones and take the dark ink; card 3 is
   purple→indigo, which takes NEITHER (white 3.66 on the indigo end, dark 3.36 on
   the purple end) and is left for the indigo sweep. */
.audience-card:nth-child(1) {
    background: var(--gradient-1);
    color: var(--ink-on-vibrant);
    box-shadow: 0 10px 30px rgba(255, 107, 107, 0.3);
}

.audience-card:nth-child(2) {
    background: var(--gradient-2);
    color: var(--ink-on-vibrant);
    box-shadow: 0 10px 30px rgba(78, 205, 196, 0.3);
}

.audience-card:nth-child(3) {
    /* The one card that keeps WHITE: purple→indigo takes no dark ink (3.36 on
       the purple end), and now that the indigo stop is #506be7 white measures
       4.60 / 4.57 across it. The base .audience-card rule above sets dark ink for
       the vibrant cards, so this override is what keeps card 3 legible. */
    color: #fff;
    background: var(--gradient-3);
    box-shadow: 0 10px 30px rgba(157, 78, 221, 0.3);
}

.audience-card:nth-child(4) {
    background: var(--gradient-4);
    color: var(--ink-on-vibrant);
    box-shadow: 0 10px 30px rgba(255, 230, 109, 0.3);
}

.audience-card:nth-child(5) {
    background: var(--gradient-5);
    box-shadow: 0 10px 30px rgba(6, 214, 160, 0.3);
}

.audience-card:nth-child(6) {
    background: var(--gradient-6);
    box-shadow: 0 10px 30px rgba(255, 107, 107, 0.3);
}

.audience-card .card-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: var(--ink-on-vibrant);
    transition: transform 0.3s var(--animation-easing);
}

.audience-card h3 {
    font-size: 1.35rem;
    font-weight: 700;
    margin-bottom: 1rem;
    /* Follows the card's fill: cards 1/2/4 are vibrant and carry dark ink.
       Card 3 (purple→indigo) still sets white on itself. */
    color: inherit;
}

.audience-card p {
    /* was rgba(255,255,255,.95) — 2.22:1 on the orange stop, and the .95 alpha
       quietly cost contrast on top of that. Inherit the card's ink instead. */
    color: inherit;
    margin: 0;
    line-height: 1.7;
    font-size: 1rem;
}

/* Card Link Wrapper */
.card-link {
    text-decoration: none;
    color: inherit;
    display: block;
    height: 100%;
}

.card-link:hover,
.card-link:focus {
    text-decoration: none;
    color: inherit;
}

/* 3D Hover Effect */
.card-hover-effect {
    transform-style: preserve-3d;
    perspective: 1000px;
}

.card-hover-effect:hover {
    transform: translateY(-15px) rotateX(5deg) rotateY(5deg);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
}

.card-hover-effect:hover .card-icon {
    transform: scale(1.15) rotate(-5deg);
}

/* ==========================================
   FEATURES SECTION - Asymmetric Showcase
   ========================================== */

.features-section {
    background: white;
}

.feature-card {
    background: white;
    border-radius: 20px;
    padding: 2.5rem;
    transition: all 0.4s var(--animation-easing);
    position: relative;
    overflow: hidden;
    border: 2px solid transparent;
}

/* Color-coded borders */
.feature-card:nth-child(1) {
    border-color: rgba(255, 107, 107, 0.2);
}

.feature-card:nth-child(2) {
    border-color: rgba(78, 205, 196, 0.2);
}

.feature-card:nth-child(3) {
    border-color: rgba(157, 78, 221, 0.2);
}

.feature-card:nth-child(4) {
    border-color: rgba(255, 230, 109, 0.2);
}

.feature-card:nth-child(5) {
    border-color: rgba(6, 214, 160, 0.2);
}

.feature-card:nth-child(6) {
    border-color: rgba(255, 107, 107, 0.2);
}

.feature-icon {
    width: 70px;
    height: 70px;
    margin-bottom: 1.5rem;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    transition: all 0.3s var(--animation-easing);
}

/* Icon colors matching gradients */
.feature-card:nth-child(1) .feature-icon {
    background: linear-gradient(135deg, rgba(255, 107, 107, 0.1), rgba(255, 140, 66, 0.1));
    color: var(--primary-vibrant-text);
}

.feature-card:nth-child(2) .feature-icon {
    background: linear-gradient(135deg, rgba(78, 205, 196, 0.1), rgba(6, 214, 160, 0.1));
    color: var(--primary-blue);
}

.feature-card:nth-child(3) .feature-icon {
    background: linear-gradient(135deg, rgba(157, 78, 221, 0.1), rgba(80, 107, 231, 0.1));
    color: var(--primary-purple);
}

.feature-card:nth-child(4) .feature-icon {
    background: linear-gradient(135deg, rgba(255, 230, 109, 0.1), rgba(255, 140, 66, 0.1));
    color: var(--accent-yellow);
}

.feature-card:nth-child(5) .feature-icon {
    background: linear-gradient(135deg, rgba(6, 214, 160, 0.1), rgba(78, 205, 196, 0.1));
    color: var(--accent-green);
}

.feature-card:nth-child(6) .feature-icon {
    background: linear-gradient(135deg, rgba(255, 107, 107, 0.1), rgba(157, 78, 221, 0.1));
    color: var(--primary-vibrant-text);
}

.feature-card h3 {
    font-size: 1.35rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--neutral-dark);
}

.feature-card p {
    color: #666;
    margin: 0;
    line-height: 1.7;
    font-size: 1rem;
}

/* Hover Effects */
.feature-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
}

.feature-card:nth-child(1):hover {
    border-color: var(--primary-vibrant);
    box-shadow: 0 20px 60px rgba(255, 107, 107, 0.2);
}

.feature-card:nth-child(2):hover {
    border-color: var(--primary-blue);
    box-shadow: 0 20px 60px rgba(78, 205, 196, 0.2);
}

.feature-card:nth-child(3):hover {
    border-color: var(--primary-purple);
    box-shadow: 0 20px 60px rgba(157, 78, 221, 0.2);
}

.feature-card:hover .feature-icon {
    transform: scale(1.1) rotate(-5deg);
}

/* ==========================================
   TESTIMONIALS SECTION - Chat Bubble Style
   ========================================== */

.testimonials-section {
    background: var(--neutral-light);
    position: relative;
    overflow: hidden;
}

/* Chat Bubble Design */
.testimonial-card {
    background: white;
    border-radius: 24px 24px 24px 4px;
    padding: 2.5rem;
    position: relative;
    box-shadow: var(--shadow-md);
    transition: all 0.4s var(--animation-easing);
    max-width: 600px;
    margin: 0 auto;
}

/* Chat tail */
.testimonial-card::before {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 30px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 10px 0 0;
    border-color: white transparent transparent transparent;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.1));
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 1rem;
}

/* Gradient Avatar Border */
.author-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--gradient-3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 1.5rem;
    position: relative;
    animation: borderSpin 10s linear infinite;
}

@keyframes borderSpin {
    0% {
        filter: hue-rotate(0deg);
    }
    100% {
        filter: hue-rotate(360deg);
    }
}

.author-info h4 {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 0.25rem 0;
    color: var(--neutral-dark);
}

.author-info p {
    font-size: 0.95rem;
    color: #666;
    margin: 0;
}

.testimonial-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: var(--shadow-lg);
}

.testimonial-quote-text {
    font-size: 0.9rem;
    color: #555;
    line-height: 1.7;
    margin: 0 0 0.75rem 0;
    padding: 0 0.5rem;
    border: none;
    font-style: normal;
    /* Logical: right in Hebrew (unchanged), left in an LTR language. */
    text-align: start;
}

/* LTR: mirror the chat-bubble sharp corner + tail to the bottom-right. */
[dir="ltr"] .testimonial-card {
    border-radius: 24px 24px 4px 24px;
}

[dir="ltr"] .testimonial-card::before {
    left: auto;
    right: 30px;
    border-width: 10px 0 0 10px;
}

/* ==========================================
   AI FEATURE CARD (in features grid)
   ========================================== */

.feature-card-ai {
    background: linear-gradient(135deg, rgba(78, 205, 196, 0.08) 0%, rgba(157, 78, 221, 0.08) 100%);
    border: 2px solid rgba(78, 205, 196, 0.3);
}

.feature-card-ai:hover {
    border-color: var(--primary-blue);
    box-shadow: 0 8px 30px rgba(78, 205, 196, 0.2);
}

.feature-card-ai .feature-icon {
    background: linear-gradient(135deg, rgba(78, 205, 196, 0.1), rgba(157, 78, 221, 0.1));
}
.feature-card-ai .feature-icon i {
    background: var(--gradient-3);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ==========================================
   AI HIGHLIGHT SECTION
   ========================================== */

.ai-highlight-section {
    background: var(--neutral-light);
    padding: 5rem 0;
}

.ai-feature-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(78, 205, 196, 0.15) 0%, rgba(157, 78, 221, 0.15) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--primary-purple);
}

.ai-demo-card {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    background: white;
}

.ai-demo-header {
    /* #25837d, not var(--primary-blue) = #4ECDC4: white on the teal end measured
       1.93:1. This one cannot take dark ink either (3.36:1 on the purple end),
       so the STOP moves rather than the label. White is now 4.60 / 4.54. */
    background: linear-gradient(135deg, var(--primary-purple) 0%, #25837d 100%);
    color: white;
    padding: 0.75rem 1.25rem;
    font-weight: 600;
    font-size: 0.95rem;
}

.ai-demo-body {
    padding: 1.5rem;
    font-size: 0.95rem;
    line-height: 1.7;
    color: #444;
}

.ai-demo-body p:last-child {
    margin-bottom: 0;
}

/* ==========================================
   HOW IT WORKS SECTION
   ========================================== */

.how-it-works-section {
    background: white;
    padding: 4rem 0;
}

.step-card {
    padding: 2rem 1.5rem;
    border-radius: 16px;
    background: var(--neutral-light);
    transition: all 0.3s var(--animation-easing);
    position: relative;
}

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

.step-number {
    position: absolute;
    top: -18px;
    right: 50%;
    transform: translateX(50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--gradient-3);
    color: white;
    font-weight: 800;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(157, 78, 221, 0.3);
}

.step-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    background: var(--gradient-3);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.step-card h3 {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: var(--neutral-dark);
}

.step-card p {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.6;
    margin-bottom: 0;
}

/* ==========================================
   COMPARISON TABLE SECTION
   ========================================== */

.comparison-section {
    background: var(--neutral-light);
    padding: 4rem 0;
}

.comparison-table {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.comparison-table thead th {
    background: var(--neutral-dark);
    color: white;
    font-weight: 600;
    padding: 1rem;
    border: none;
}

.comparison-table thead th.table-primary {
    background: var(--primary-purple) !important;
    color: white !important;
}

.comparison-table tbody td {
    padding: 0.85rem 1rem;
    vertical-align: middle;
}

.comparison-table tbody td.table-primary {
    background: rgba(157, 78, 221, 0.08) !important;
    font-weight: 600;
}

.comparison-table .bi-check-circle-fill.text-success {
    font-size: 1.2rem;
}

.comparison-table .bi-x-circle-fill.text-danger {
    font-size: 1.2rem;
    opacity: 0.5;
}

/* ==========================================
   CTA/PRICING SECTION - Bold Gradient Block
   ========================================== */

.pricing-section {
    background: var(--gradient-1);
    color: var(--ink-on-vibrant);
    position: relative;
    overflow: hidden;
    padding: 6rem 0;
}

.pricing-section h2 {
    color: var(--ink-on-vibrant);
}

.pricing-section .lead {
    /* was rgba(255,255,255,.95) on --gradient-1 = 2.22:1. */
    color: var(--ink-on-vibrant);
}

.pricing-section .pricing-features {
    list-style: none;
    padding: 0;
    margin: 2rem 0;
}

.pricing-section .pricing-features li {
    font-size: 1.15rem;
    padding: 0.875rem 0;
    color: var(--ink-on-vibrant);
    display: flex;
    align-items: center;
    gap: 1rem;
}

.pricing-section .pricing-features i {
    color: var(--ink-on-vibrant);
    font-size: 1.3rem;
    background: rgba(255, 255, 255, 0.2);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* pro-pricing-section + .pricing-card.featured (used on freelancers.php) —
   plain dark text on white card background, not gradient. */
.pro-pricing-section .pricing-card.featured {
    background: #ffffff;
    border-radius: 16px;
    padding: 2.5rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    border-top: 4px solid var(--primary-color, #3b7dd8);
}

.pro-pricing-section .pricing-card .pricing-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.pro-pricing-section .pricing-card .price {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--primary-color, #3b7dd8);
}

.pro-pricing-section .pricing-features {
    list-style: none;
    padding: 0;
    margin: 2rem 0;
}

.pro-pricing-section .pricing-features li {
    font-size: 1rem;
    padding: 0.5rem 0;
    color: #2d2a26;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* ==========================================
   MARKET FACTS STRIP
   ========================================== */

.market-facts-strip {
    background: var(--neutral-dark);
    color: white;
    padding: 3rem 0;
}

.fact-item {
    padding: 1rem;
}

.fact-number {
    display: block;
    font-size: 2.5rem;
    font-weight: 800;
    background: var(--gradient-3);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.25rem;
}

.fact-label {
    display: block;
    font-size: 0.95rem;
    opacity: 0.9;
    line-height: 1.5;
}

.fact-source {
    display: block;
    font-size: 0.75rem;
    opacity: 0.5;
    margin-top: 0.25rem;
}

/* ==========================================
   FOOTER
   ========================================== */

.footer {
    background: var(--neutral-dark);
    color: white;
    padding: 3rem 0 1.5rem;
    position: relative;
    overflow: hidden;
}

.footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient-3);
}

.footer-brand {
    margin-bottom: 1rem;
}

.footer-brand p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-top: 0.75rem;
}

.footer h5 {
    font-weight: 700;
    margin-bottom: 1.25rem;
    font-size: 1.1rem;
    background: var(--gradient-3);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
    padding-bottom: 0.5rem;
}

.footer h5::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 50px;
    height: 3px;
    background: var(--gradient-3);
    border-radius: 2px;
}

/* LTR: the heading sits on the left, so the accent underline belongs there too. */
[dir="ltr"] .footer h5::after {
    right: auto;
    left: 0;
}

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

.footer-links li {
    margin-bottom: 0.65rem;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block;
    font-size: 0.95rem;
    position: relative;
    padding-right: 1.25rem;
}

.footer-links a::before {
    content: '\f285';
    font-family: 'bootstrap-icons';
    position: absolute;
    right: 0;
    opacity: 0;
    transition: all 0.3s ease;
}

.footer-links a:hover {
    color: white;
    padding-right: 1.5rem;
}

.footer-links a:hover::before {
    opacity: 1;
}

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

.footer-contact li {
    margin-bottom: 0.85rem;
    color: rgba(255, 255, 255, 0.85);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
}

.footer-contact i {
    color: var(--primary-purple);
    font-size: 1.1rem;
    min-width: 20px;
}

.footer-contact a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-contact a:hover {
    color: white;
}

.footer-social {
    list-style: none;
    padding: 0;
    margin: 1.25rem 0 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.footer-social li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    font-size: 1.2rem;
    line-height: 1;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.footer-social a:hover,
.footer-social a:focus-visible {
    background: var(--primary-purple, #6c5ce7);
    color: #ffffff;
    transform: translateY(-2px);
}

.footer h5 i {
    background: var(--gradient-3);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 0.95em;
    margin-inline-end: 4px;
}

.footer-subhead {
    color: rgba(255, 255, 255, 0.85);
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.footer-subhead i {
    color: var(--primary-purple);
    font-size: 0.95rem;
    margin-inline-end: 4px;
}

.footer-tax-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.85rem;
    background: rgba(157, 78, 221, 0.18);
    border: 1px solid rgba(157, 78, 221, 0.4);
    border-radius: 50px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.85rem;
    font-weight: 500;
}

.footer-tax-badge i {
    color: var(--accent-green, #06D6A0);
    font-size: 1rem;
}

.footer hr {
    border-color: rgba(157, 78, 221, 0.2);
    margin: 2.5rem 0 1.5rem;
}

.footer .text-center p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
    margin: 0;
}

/* Footer Responsive */
@media (max-width: 768px) {
    .footer {
        padding: 2rem 0 1rem;
    }

    .footer h5 {
        margin-top: 1.5rem;
    }

    .footer h5:first-child {
        margin-top: 0;
    }
}

/* ==========================================
   SCROLL ANIMATIONS
   ========================================== */

.fade-in-on-scroll {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

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

/* Staggered Animation for Cards */
.audience-card:nth-child(1) { transition-delay: 0.1s; }
.audience-card:nth-child(2) { transition-delay: 0.2s; }
.audience-card:nth-child(3) { transition-delay: 0.3s; }
.audience-card:nth-child(4) { transition-delay: 0.4s; }
.audience-card:nth-child(5) { transition-delay: 0.5s; }
.audience-card:nth-child(6) { transition-delay: 0.6s; }

/* ==========================================
   RTL SPECIFIC ENHANCEMENTS
   ========================================== */

/* Ensure proper icon spacing in RTL */
[dir="rtl"] .footer-contact i {
    margin-left: 0.5rem;
    margin-right: 0;
}

/* Adjust footer link arrows for RTL */
[dir="rtl"] .footer-links a {
    padding-right: 0;
    padding-left: 1.25rem;
}

[dir="rtl"] .footer-links a::before {
    right: auto;
    left: 0;
    content: '\f284';
}

[dir="rtl"] .footer-links a:hover {
    padding-right: 0;
    padding-left: 1.5rem;
}

/* Ensure proper 3D tilt behavior */
.audience-card,
.feature-card {
    transform-style: preserve-3d;
    will-change: transform;
}

/* Performance optimization for animations */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================
   RESPONSIVE DESIGN
   ========================================== */

@media (max-width: 991px) {
    /* Header padding for mobile */
    .homepage-header {
        width: 95%;
        border-radius: 30px;
        padding: 0.75rem 1.5rem;
    }

    .homepage-header nav.container {
        padding-right: 0;
        padding-left: 0;
    }

    .nav-wrapper {
        padding: 0 0rem;
    }

    .navbar-toggler {
        display: block;
        color: var(--primary-purple);
    }

    .nav-menu {
        position: fixed;
        top: 80px;
        right: -100%;
        width: 300px;
        height: calc(100vh - 100px);
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        flex-direction: column;
        align-items: flex-start;
        padding: 2rem;
        border-radius: 20px 0 0 20px;
        box-shadow: -5px 0 30px rgba(0, 0, 0, 0.15);
        transition: right 0.3s var(--animation-easing);
    }

    .nav-menu.active {
        right: 0;
    }

    .nav-links {
        flex-direction: column;
        gap: 1rem;
        width: 100%;
    }

    .nav-links a {
        color: #333;
        width: 100%;
        padding: 0.75rem 0;
        border-bottom: 1px solid #e9ecef;
    }

    /* Mobile Business Dropdown Styles */
    .business-dropdown {
        width: 100%;
    }

    .business-dropdown-content {
        position: static;
        box-shadow: none;
        background: rgba(255, 255, 255, 0.5);
        border-radius: 8px;
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
        padding: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease, opacity 0.3s ease;
        display: block;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
        width: 100%;
        min-width: auto;
        box-sizing: border-box;
    }

    .business-dropdown.mobile-active .business-dropdown-content {
        max-height: 1500px;
        opacity: 1;
        visibility: visible;
    }

    .business-dropdown-content a {
        padding: 0.75rem 1rem;
        font-size: 0.85rem;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        white-space: normal;
        word-wrap: break-word;
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    .business-dropdown-content a:last-child {
        border-bottom: none;
    }

    /* Mobile mega-menu — accordion behavior per column */
    .business-mega-menu {
        display: block;
        grid-template-columns: none;
        min-width: auto;
        padding: 4px 0;
        left: auto;
        transform: none;
    }

    .business-dropdown.active .business-mega-menu,
    .business-dropdown.mobile-active .business-mega-menu {
        transform: none;
    }

    .business-mega-menu .mega-col {
        padding: 0;
        border-left: 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    }

    .business-mega-menu .mega-col:last-child {
        border-bottom: 0;
    }

    .business-mega-menu .mega-col-title {
        display: flex;
        margin: 0;
        padding: 0.85rem 1rem;
        font-size: 0.88rem;
        font-weight: 700;
        background: transparent;
        cursor: pointer;
        pointer-events: auto;
        align-items: center;
        gap: 10px;
    }

    .business-mega-menu .mega-col-title i:first-child {
        font-size: 1rem;
    }

    .business-mega-menu .mega-col-chevron {
        display: inline-block;
        margin-inline-start: auto;
        font-size: 0.8rem;
        opacity: 0.6;
    }

    .business-mega-menu .mega-col.expanded .mega-col-chevron {
        transform: rotate(180deg);
    }

    .business-mega-menu .mega-col-list {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }

    .business-mega-menu .mega-col.expanded .mega-col-list {
        max-height: 700px;
    }

    .business-mega-menu .mega-col-list a {
        padding: 0.7rem 1rem 0.7rem 2.4rem;
        font-size: 0.86rem;
        border-bottom: 1px solid rgba(0, 0, 0, 0.04);
        background: rgba(255, 255, 255, 0.4);
    }

    .business-mega-menu .mega-col-list a:last-child {
        border-bottom: 0;
    }

    .nav-actions {
        flex-direction: column;
        width: 100%;
    }

    .nav-actions .btn {
        width: 100%;
    }

    .hero-title {
        font-size: 2.5rem;
    }

    .section-title {
        font-size: 2rem;
    }
}

@media (max-width: 768px) {
    /* Add padding to all sections for mobile */
    section {
        padding-right: 1rem;
        padding-left: 1rem;
    }

    .container {
        padding-right: 1rem;
        padding-left: 1rem;
    }

    .hero-section {
        min-height: auto;
        padding: 6rem 1rem 4rem;
    }

    .hero-title {
        font-size: 2rem;
    }

    .hero-subtitle {
        font-size: 1rem;
    }

    .hero-actions {
        flex-direction: column;
    }

    .btn-hero {
        width: 100%;
    }

    .hero-features {
        flex-direction: column;
        gap: 0.75rem;
    }
    /* Extra padding for very small screens */
    section {
        padding-right: 0.75rem;
        padding-left: 0.75rem;
    }

    .container {
        padding-right: 0.75rem;
        padding-left: 0.75rem;
    }


    .section-title {
        font-size: 1.75rem;
    }

    .section-subtitle {
        font-size: 1rem;
    }
}

@media (max-width: 576px) {
    .hero-title {
        font-size: 1.75rem;
    }

    .audience-card,
    .feature-card,
    .testimonial-card {
        padding: 1.5rem;
    }
}

/* ==========================================
   ACCESSIBILITY
   ========================================== */

/* Focus Styles for Keyboard Navigation */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 3px solid var(--primary-purple);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Remove default focus for mouse users */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
    outline: none;
}

/* ==========================================
   UTILITY CLASSES
   ========================================== */

.text-gradient {
    background: linear-gradient(135deg, var(--hero-gradient-1), var(--accent-gold));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Add luxury shine effect on hover for important elements */
.btn-hero.btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s ease;
}

.btn-hero.btn-primary:hover::before {
    left: 100%;
}

/* ========================================================================
   Accessibility / Contrast fixes — WCAG 2.1 AA / ת"י 5568
   Added 2026-04-14 — see docs/accessibility-audit-2026-04.md
   ======================================================================== */

/* Hero micro-copy on purple gradient — was opacity:0.8 + rgba white 0.85 (≈3.6:1).
   Use solid white + subtle shadow for legibility over the #506be7→#764ba2 gradient. */
.hero-microcopy {
    opacity: 1;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* Fact source line — on dark-slate fact strip bg (#2D3142). Use light muted color. */
.fact-source {
    opacity: 1;
    color: #b8c1d1;
}

/* Tax-approval inline number on green gradient — ensure full opacity. */
.tax-approval-badge .badge-number {
    opacity: 1;
}

/* Bootstrap .badge.bg-info uses #0dcaf0 with white text = 1.96:1. Override to
   a darker teal that passes AA for small text (#00819b → 4.57:1 on white). */
.badge.bg-info {
    background-color: #00819b !important;
    color: #ffffff !important;
}

/* Bootstrap .bg-warning yellow (#ffc107) with white text fails at 1.63:1.
   Force dark text; matches Bootstrap's own text-dark convention. */
.badge.bg-warning,
.bg-warning {
    color: #2d2a26 !important;
}

/* <code> default pink #d63384 on light gray fails 4.27:1.
   Darker rose still reads as "code". */
code {
    color: #a01a5a !important;
}

/* Breadcrumb link default #0d6efd on Bootstrap's #e2e3e5 bg = 3.5:1.
   Darken to pass AA on light-bg pages. Dark-hero sections override below. */
.breadcrumb a,
nav[aria-label="breadcrumb"] a:not(.text-white):not(.btn) {
    color: #0a58ca;
}

/* Dark-hero sections (article-hero = photo/gradient on guides/view.php,
   guides-hero = purple gradient on guides/index.php) keep breadcrumb, active
   crumb, and tag pills white. Specificity is intentionally tuned to beat the
   AA rule above — mirrors its :not(.btn):not(.text-white) structure so the
   nav-level selector reaches (0,4,2) vs the AA rule's (0,3,2). */
.article-hero .breadcrumb a,
.article-hero nav[aria-label="breadcrumb"] a:not(.btn):not(.text-white),
.article-hero .article-view-tags a,
.guides-hero .breadcrumb a,
.guides-hero nav[aria-label="breadcrumb"] a:not(.btn):not(.text-white) {
    color: rgba(255, 255, 255, 0.9);
}
.article-hero .breadcrumb-item.active,
.guides-hero .breadcrumb-item.active {
    color: #ffffff;
}
.article-hero .breadcrumb a:hover,
.article-hero nav[aria-label="breadcrumb"] a:not(.btn):not(.text-white):hover,
.article-hero .article-view-tags a:hover,
.guides-hero .breadcrumb a:hover,
.guides-hero nav[aria-label="breadcrumb"] a:not(.btn):not(.text-white):hover {
    color: #ffffff;
}

/* .btn-outline-info with #0dcaf0 text on white = 1.96:1. Push to teal-600. */
.btn-outline-info {
    color: #0a6776 !important;
    border-color: #0a6776 !important;
}
.btn-outline-info:hover {
    background-color: #0a6776 !important;
    color: #ffffff !important;
}

/* Default Bootstrap link #0d6efd on light backgrounds (#f8f9fa / #e2e3e5) fails AA
   (4.27 / 3.5:1). Darken links inside light alerts / bg-light containers. */
.bg-light a:not(.btn):not(.nav-link),
.alert-secondary a:not(.btn),
.alert-light a:not(.btn),
.alert-warning a:not(.btn) {
    color: #0a58ca;
}

/* .text-success (#198754) on Bootstrap's .table-primary (#cfe2ff) = 3.45:1 fails,
   and on #f8f9fa = 4.3:1 barely fails. Darken globally — brand "success green"
   stays clearly green, just a shade deeper. */
.text-success {
    color: #157347 !important;
}

/* .table-primary (#cfe2ff) is extra-tinted, needs even deeper green to pass AA. */
.table-primary .text-success,
td.table-primary.text-success,
th.table-primary.text-success {
    color: #0d5a37 !important;
}

/* .text-danger (#dc3545) on white/near-white = 4.3:1 — miss 4.5 by a hair. */
.text-danger {
    color: #c41e2e !important;
}

/* Tighter: Bootstrap link default #0d6efd on the site's off-white body bg
   (#f7f7f9 from --neutral-light) is 4.21:1 — fails 4.5 by a whisker.
   Darken generic in-content links without affecting buttons/nav.
   Excludes dark-hero sections (.article-hero, .guides-hero) — their links
   inherit the hero's own white styling defined above. */
main a:not(.btn):not(.nav-link):not([class*="text-white"]):not([class*="text-light"]),
section:not(.article-hero):not(.guides-hero) a:not(.btn):not(.nav-link):not([class*="text-white"]):not([class*="text-light"]),
article a:not(.btn):not(.nav-link):not([class*="text-white"]):not([class*="text-light"]) {
    color: #0a58ca;
}

/* Skip-link — make it visibly clear when focused (was inline-style only). */
.skip-nav:focus {
    top: 0 !important;
    outline: 3px solid #ffffff;
    outline-offset: 2px;
}

/* ------------------------------------------------------------------------
   Design-system token fallbacks for public pages.
   design-tokens.css is loaded only on admin/dashboard; public pages
   (pricing, features, pro/*) reference --primary-gradient directly.
   Without these fallbacks, their hero sections render white-on-white.
   ------------------------------------------------------------------------ */
:root {
    --primary-color: #3b7dd8;
    --primary-color-deep: #0a58ca;
    /* #3369bd, not #3b7dd8, as the light stop: white measured 4.11:1 on #3b7dd8
       — under AA for anything that is not large text — and 5.39:1 on #3369bd,
       which is --primary-color in design-tokens.css. Only the MARKETING copy of
       this token moves; #3b7dd8 still does duty as ink on pale tints elsewhere,
       where darkening it is a separate question. */
    --primary-gradient: linear-gradient(135deg, #3369bd 0%, #0a58ca 100%);
}

/* FAQ card-header accordion — add visible chevron + focus ring.
   Used on /pricing/, /features/, pro pages. */
.card-header[role="button"] {
    position: relative;
    padding-inline-start: 2.5rem !important;
    cursor: pointer;
}

.card-header[role="button"]::before {
    content: "";
    position: absolute;
    inset-inline-start: 1rem;
    top: 50%;
    width: 10px;
    height: 10px;
    border-inline-end: 2px solid #4b5563;
    border-bottom: 2px solid #4b5563;
    transform: translateY(-75%) rotate(45deg);
    transition: transform 0.25s ease;
}

.card-header[role="button"][aria-expanded="true"]::before {
    transform: translateY(-25%) rotate(135deg);
}

.card-header[role="button"]:focus-visible {
    outline: 3px solid #3b7dd8;
    outline-offset: 2px;
    border-radius: 4px;
}


/* ============================================================
   Screenshots Carousel Section
   ============================================================ */
.screenshots-section {
    background: linear-gradient(180deg, #f8f7f4 0%, #ffffff 100%);
}

.screenshots-section .carousel {
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
    border-radius: 16px;
    background: #fff;
    padding: 10px;
}

.screenshots-section .carousel-inner {
    border-radius: 12px;
    overflow: hidden;
    background: #eae8e4;
    aspect-ratio: 14 / 9;
}

.screenshots-section .carousel-item img {
    object-fit: cover;
    object-position: top center;
    height: 100%;
    width: 100%;
}

.screenshots-section .carousel-caption {
    right: 0;
    left: 0;
    bottom: 0;
    padding: 48px 24px 24px;
    text-align: center;
    color: #fff;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.75) 100%);
}
.screenshots-section .carousel-caption h3 {
    font-size: 1.35rem;
    font-weight: 700;
    margin: 0 0 6px;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.screenshots-section .carousel-caption p {
    font-size: 0.95rem;
    margin: 0;
    color: rgba(255,255,255,0.95);
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

.screenshots-section .carousel-indicators {
    position: static;
    /* 13px, not 20px: the dots below grew 7px taller on each side to reach the
       WCAG target size, so the top margin gives back the 7px above and the dot
       row stays optically where it was. */
    margin: 13px 0 0;
    justify-content: center;
}
/* WCAG 2.5.8 / IS 5568: the DOT stays 10px, the TARGET becomes 24px.
   A transparent border plus background-clip:content-box grows the hit area
   without growing the dot, so the fix and the measurement agree. An ::after
   expander would NOT: getBoundingClientRect() ignores pseudo-elements, so an
   audit would keep reporting 10x10 forever and the finding would get baselined
   rather than fixed.
   🔴 box-sizing AND background-clip must both be restated here. Bootstrap ships
   `box-sizing:content-box; background-clip:padding-box` on this exact selector
   — leaving either one alone silently undoes this rule. */
.screenshots-section .carousel-indicators [data-bs-target] {
    box-sizing: border-box;
    width: 24px;
    height: 24px;
    border: 7px solid transparent;
    border-radius: 50%;
    background-color: #c8c5bf;
    background-clip: content-box;
    opacity: 1;
    margin: 0;
    transition: background-color 0.2s, transform 0.2s;
}
.screenshots-section .carousel-indicators .active {
    background-color: #3b7dd8;
    transform: scale(1.25);
}
.screenshots-section .carousel-indicators [data-bs-target]:focus-visible {
    outline: 3px solid #3b7dd8;
    outline-offset: 3px;
}

.screenshots-section .carousel-control-prev,
.screenshots-section .carousel-control-next {
    width: 48px;
    height: 48px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.92);
    border-radius: 50%;
    opacity: 0.95;
    box-shadow: 0 4px 14px rgba(0,0,0,0.12);
    transition: background-color 0.2s, transform 0.2s;
}
.screenshots-section .carousel-control-prev { right: 10px; left: auto; }
.screenshots-section .carousel-control-next { left: 10px; right: auto; }
.screenshots-section .carousel-control-prev:hover,
.screenshots-section .carousel-control-next:hover {
    background: #fff;
    transform: translateY(-50%) scale(1.07);
}
.screenshots-section .carousel-control-prev-icon,
.screenshots-section .carousel-control-next-icon {
    filter: invert(0.3);
    width: 22px;
    height: 22px;
}

.screenshots-section .carousel-pause-btn {
    position: absolute;
    top: 20px;
    inset-inline-start: 20px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.92);
    color: #2d2a26;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    z-index: 5;
    cursor: pointer;
    transition: transform 0.15s;
}
.screenshots-section .carousel-pause-btn:hover { transform: scale(1.08); }
.screenshots-section .carousel-pause-btn:focus-visible {
    outline: 3px solid #3b7dd8;
    outline-offset: 2px;
}

@media (max-width: 576px) {
    .screenshots-section .carousel-control-prev,
    .screenshots-section .carousel-control-next {
        width: 38px;
        height: 38px;
    }
    .screenshots-section .carousel-caption h3 { font-size: 1.1rem; }
    .screenshots-section .carousel-caption p { font-size: 0.85rem; }
}

@media (prefers-reduced-motion: reduce) {
    .screenshots-section .carousel-indicators [data-bs-target] { transition: none; }
}

/* ============================================================
   Mobile Phone Frame Carousel (pricing section)
   ============================================================ */
.mobile-phone-frame {
    position: relative;
    width: 280px;
    max-width: 100%;
    aspect-ratio: 390 / 844;
    background: #1a1a1a;
    border-radius: 42px;
    padding: 10px;
    box-shadow:
        0 0 0 2px #2a2a2a,
        0 25px 60px rgba(0,0,0,0.25),
        0 10px 25px rgba(0,0,0,0.15);
}

.mobile-phone-frame::before {
    /* notch */
    content: "";
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 22px;
    background: #1a1a1a;
    border-radius: 0 0 14px 14px;
    z-index: 3;
}

.mobile-phone-frame .carousel {
    width: 100%;
    height: 100%;
    border-radius: 32px;
    overflow: hidden;
    background: #fff;
}

.mobile-phone-frame .carousel-inner,
.mobile-phone-frame .carousel-item {
    height: 100%;
}

.mobile-phone-frame .carousel-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

.mobile-indicators {
    position: absolute;
    /* 5.5px, not 14px: the dots grew from 7px to a 24px target, which lifts their
       centres 8.5px off an anchored bottom edge. Giving those 8.5px back keeps
       the dots painted exactly where they were inside the phone frame. */
    bottom: 5.5px;
    left: 0;
    right: 0;
    margin: 0;
    justify-content: center;
    z-index: 4;
}
/* Same rule as the screenshots dots above — see the note there for why the
   border/background-clip pair is the technique and why both Bootstrap defaults
   have to be restated. 7px dot, 24px target. */
.mobile-indicators [data-bs-target] {
    box-sizing: border-box;
    width: 24px;
    height: 24px;
    border: 8.5px solid transparent;
    border-radius: 50%;
    background-color: rgba(255,255,255,0.55);
    background-clip: content-box;
    opacity: 1;
    margin: 0;
    transition: background-color 0.2s, transform 0.2s;
}
.mobile-indicators .active {
    background-color: #fff;
    transform: scale(1.3);
}
.mobile-indicators [data-bs-target]:focus-visible {
    outline: 2px solid #3b7dd8;
    outline-offset: 3px;
}

@media (max-width: 576px) {
    .mobile-phone-frame { width: 240px; }
    .mobile-phone-frame::before { width: 80px; height: 18px; }
}

/* ==========================================
   MARKETING PAGE HERO — shared by features, pricing, …
   Spacious, centered hero with soft depth glow.
   ========================================== */
.page-hero {
    position: relative;
    background: var(--primary-gradient);
    padding: 150px 0 96px;
    overflow: hidden;
}
.page-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(1100px 400px at 50% -12%, rgba(255, 255, 255, .22), transparent 70%),
        radial-gradient(760px 340px at 88% 118%, rgba(255, 255, 255, .10), transparent 60%);
    pointer-events: none;
}
.page-hero > .container {
    position: relative;
    z-index: 1;
}
.page-hero .breadcrumb {
    margin-bottom: 1.5rem;
}
.page-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    background: rgba(255, 255, 255, .16);
    color: #fff;
    padding: .42rem 1.05rem;
    border-radius: 50rem;
    font-weight: 600;
    font-size: .85rem;
    letter-spacing: .01em;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(255, 255, 255, .28);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.page-hero h1 {
    color: #fff;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.12;
    margin-bottom: 1.15rem;
}
.page-hero-sub {
    /* Solid, not rgba(255,255,255,.85): the alpha cost this subtitle ~0.8 of a
       ratio point and left it at 3.43:1 even after the fill was darkened. The
       de-emphasis comes from size and width, not from fading the ink. */
    color: #fff;
    font-size: 1.22rem;
    line-height: 1.7;
    max-width: 640px;
    margin: 0 auto 2.25rem;
}
.page-hero .btn-lg {
    padding-inline: 1.7rem;
    font-weight: 600;
}
.page-hero-trust {
    margin-top: 1.6rem;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    justify-content: center;
    /* was rgba(255,255,255,.82) = 3.30:1 */
    color: #fff;
    font-size: .92rem;
}
.page-hero-trust .sep {
    /* .5 put this separator at 1.89:1 and .8 still left it at 4.08. It is a "·"
       between two readable phrases — content, not decoration — and opacity is the
       wrong lever on a coloured surface. The gap around it already separates them. */
    opacity: 1;
}
@media (max-width: 575.98px) {
    .page-hero { padding: 120px 0 68px; }
    .page-hero-sub { font-size: 1.06rem; }
}

/* ============================================================
   Bootstrap outline buttons on the PUBLIC pages
   ============================================================
   style.css already maps these onto the design tokens — but no public page
   loads style.css. `/` pulls in homepage.css alone; `/pro/*` adds pro-pages.css;
   only `/nadlan/` happens to include design-tokens.css. So on the marketing
   pages Bootstrap's raw values show through: #0d6efd measured 4.21:1 on the
   homepage's #f7f7f9 section and #198754 measured 4.23:1 on the nadlan header.
   Both fail AA for their size.

   🔴 Literal hexes on purpose. This file is loaded WITHOUT design-tokens.css on
   two of the three page types, so var(--accent-green-text) would resolve to
   nothing there and the declaration would be dropped — leaving exactly the bug
   this rule is fixing, but now invisible to grep. Measured: #0b5ed7 = 5.46 and
   #157347 = 5.48 against those backgrounds. */
.btn-outline-primary:not(.nav-actions .btn-outline-primary) {
    color: #0b5ed7;
}
.btn-outline-success {
    color: #157347;
}


/* ============================================================
   Faded ink on a coloured hero — the last contrast cluster
   ============================================================
   Every hero and CTA band on the marketing site is a mid-tone brand fill, and the
   page templates quiet their subtitles and breadcrumbs with inline
   rgba(255,255,255,.7–.95) or opacity, written when nobody was measuring. Even
   after the fills were darkened (#667eea→#506be7, #3b7dd8→#3369bd) those landed
   at 3.08–4.29:1, because alpha eats roughly a full ratio point.

   Opacity is the wrong lever for de-emphasis on a coloured surface: size, weight
   and measure already carry the hierarchy, and unlike alpha they cost nothing.
   The declarations are inline on the elements, so !important is the only way to
   reach them without editing the same two lines across a dozen templates.

   Scoped to the hero/CTA bands so ordinary page copy is untouched. The vibrant
   heroes' own rules in pro-pages.css are MORE specific and keep their dark ink.
   ============================================================ */
.page-hero .breadcrumb-item a,
.page-hero .breadcrumb-item.active,
.pro-hero .breadcrumb-item a,
.pro-hero .breadcrumb-item.active,
.pro-hero-content p.lead,
.pro-hero .hero-subtitle,
.pricing-section .container > p,
.final-cta-section .container > p,
/* A coloured band the templates mark with .text-white and then fade again with
   .opacity-75 / .small / a nested <strong>. The band is already a mid-tone; the
   second fade is what pushed these to 3.76-4.27:1. */
section.text-white .opacity-75,
section.text-white p.lead,
section.text-white p.mb-4,
section.text-white .small,
section.text-white small {
    color: #fff !important;
    opacity: 1 !important;
}

/* .pricing-section / .final-cta-section are vibrant fills, so their copy takes
   the dark ink rather than white. Listed apart from the block above because the
   answer is the opposite one. */
.pricing-section .container > p,
.final-cta-section .container > p {
    color: var(--ink-on-vibrant) !important;
}

/* The same un-fade, for the hero bands that do not use .page-hero/.pro-hero —
   contact, guides and נדל״ן each roll their own <section> with the brand
   gradient inline, and fade the breadcrumb or the lead the same way. Matching on
   the gradient is impossible in CSS, so this matches the shape they all share:
   a breadcrumb or a .lead that already declares .text-white and then dims it. */
section .breadcrumb-item a.text-white,
section .breadcrumb-item.active.text-white,
section p.lead.text-white,
.nadlan-hero .breadcrumb-item a,
.nadlan-hero .breadcrumb-item.active,
.nadlan-hero p.lead,
.guides-hero .breadcrumb-item a,
.guides-hero .breadcrumb-item.active,
.guides-hero p {
    color: #fff !important;
    opacity: 1 !important;
}

/* .pricing-section is a VIBRANT band, so anything inside it that hardcodes white
   or a muted grey has to take the dark ink instead — .badge-industry and
   Bootstrap's .text-muted both landed at 2.31 / 3.75:1 there. */
.pricing-section .badge-industry,
.pricing-section .text-muted,
.final-cta-section .badge-industry,
.final-cta-section .text-muted {
    color: var(--ink-on-vibrant) !important;
    opacity: 1 !important;
}

/* ============================================================================
   Accessibility — public nav (16.10.2026 audit)
   ============================================================================ */

/* "סוג העסק שלך" is a <button> now (it was a <span>: no keyboard, no role).
   Strip the UA button chrome so it still looks like the other menu labels. */
.business-dropdown-btn {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-weight: 600;
}
.business-dropdown-btn:focus-visible {
    outline: 3px solid var(--primary-purple);
    outline-offset: 5px;
    border-radius: 4px;
}

/* The accessibility entry (opens assets/js/a11y-toolbar.js). An icon on desktop —
   the 993–1560px band has no width left for another label (see the comments at
   .nav-links above) — and the full label inside the mobile menu. The name stays
   in the accessibility tree either way. 40px square: over the 24px floor of 2.5.8. */
.nav-a11y-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-width: 40px;
    min-height: 40px;
    padding: 0 0.4rem;
    background: none;
    border: 0;
    border-radius: 8px;
    color: var(--neutral-dark);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.nav-a11y-btn .bi { font-size: 1.35rem; line-height: 1; }
.nav-a11y-btn:hover { color: var(--primary-purple); }
.nav-a11y-btn:focus-visible {
    outline: 3px solid var(--primary-purple);
    outline-offset: 3px;
}
@media (min-width: 992px) {
    .nav-a11y-label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
}

@media (max-width: 991px) {
    .nav-a11y-btn {
        width: 100%;
        justify-content: flex-start;
        padding: 0.75rem 0;
    }

    /* 🔴 A closed off-canvas menu sat at right:-100% with every link still in the Tab
       order — focus walked into a panel nobody could see. Same for the collapsed
       accordions inside it (max-height:0 hides the box, not the links). visibility
       is what takes them out of the Tab order; the delay keeps the close animation. */
    .nav-menu {
        visibility: hidden;
        transition: right 0.3s var(--animation-easing), visibility 0s linear 0.3s;
    }
    .nav-menu.active {
        visibility: visible;
        transition: right 0.3s var(--animation-easing), visibility 0s;
    }
    .business-dropdown:not(.mobile-active) .business-dropdown-content {
        visibility: hidden;
        transition: max-height 0.3s ease, opacity 0.3s ease, visibility 0s linear 0.3s;
    }
    .business-mega-menu .mega-col:not(.expanded) .mega-col-list {
        visibility: hidden;
        transition: max-height 0.3s ease, visibility 0s linear 0.3s;
    }
}

/* 🔴 No focus ring at all on the public pages' buttons ("הרשמה חינם", the hero CTAs,
   carousel arrows): Bootstrap's `.btn:focus-visible { outline: 0 }` (0,2,0) beats the
   `a:focus-visible` rule above (0,1,1), and the decorative box-shadow on .btn-primary
   then overrides Bootstrap's own focus shadow — nothing was left (WCAG 2.4.7,
   נגישות 16.10). Two-tone so it reads on the white page AND on the purple hero:
   a dark ring with a white gap inside it. */
.btn:focus-visible,
.carousel-control-prev:focus-visible,
.carousel-control-next:focus-visible,
.carousel-indicators [data-bs-target]:focus-visible {
    outline: 3px solid #1e1b4b !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 2px #ffffff !important;
}