:root {
    --primary: #10b981;
    --primary-dark: #059669;
    --secondary: #f59e0b;
    --accent: #8b5cf6;
    --bg-dark: #0a0e1a;
    --bg-darker: #050810;
    --bg-card: rgba(20, 25, 45, 0.6);
    --text-white: #f8fafc;
    --text-muted: #94a3b8;
    --glass: rgba(255, 255, 255, 0.05);
    --glass-border: rgba(255, 255, 255, 0.1);
    --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.5);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Cairo', sans-serif;
    background: var(--bg-dark);
    color: var(--text-white);
    line-height: 1.7;
    overflow-x: hidden;
}

.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* ========== ANIMATED BACKGROUND ========== */
.bg-animation {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    overflow: hidden;
}

.glow-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.15;
    animation: float 20s ease-in-out infinite;
}

.orb-1 {
    width: 500px;
    height: 500px;
    background: var(--primary);
    top: -150px;
    right: -100px;
    animation-delay: 0s;
}

.orb-2 {
    width: 400px;
    height: 400px;
    background: var(--secondary);
    bottom: -100px;
    left: -50px;
    animation-delay: 5s;
}

.orb-3 {
    width: 350px;
    height: 350px;
    background: var(--accent);
    top: 50%;
    left: 50%;
    animation-delay: 10s;
}

.grid-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(rgba(16, 185, 129, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(16, 185, 129, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
    opacity: 0.3;
}

@keyframes float {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    33% {
        transform: translate(50px, -50px) scale(1.1);
    }

    66% {
        transform: translate(-30px, 30px) scale(0.9);
    }
}

/* ========== PARTICLES ========== */
.particles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
}

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--primary);
    border-radius: 50%;
    opacity: 0.3;
    animation: particle-float 15s infinite ease-in-out;
}

.particle:nth-child(1) {
    left: 10%;
    top: 20%;
    animation-delay: 0s;
}

.particle:nth-child(2) {
    left: 80%;
    top: 40%;
    animation-delay: 3s;
}

.particle:nth-child(3) {
    left: 50%;
    top: 60%;
    animation-delay: 6s;
}

.particle:nth-child(4) {
    left: 20%;
    top: 80%;
    animation-delay: 9s;
}

.particle:nth-child(5) {
    left: 90%;
    top: 10%;
    animation-delay: 12s;
}

@keyframes particle-float {

    0%,
    100% {
        transform: translateY(0) translateX(0);
    }

    50% {
        transform: translateY(-100px) translateX(50px);
    }
}

/* ========== NAVIGATION ========== */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    padding: 1.5rem 0;
    backdrop-filter: blur(20px);
    background: rgba(10, 14, 26, 0.8);
    border-bottom: 1px solid var(--glass-border);
    transition: all 0.3s;
}

.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.logo-icon {
    width: 45px;
    height: 45px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 1.5rem;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
}

.header-logo-img {
    width: 45px;
    height: 45px;
    border-radius: 12px;
    object-fit: cover;
}

.logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.brand-name {
    font-weight: 800;
    font-size: 1.3rem;
    letter-spacing: 0.5px;
}

.brand-sub {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-weight: 600;
}

.nav-links {
    display: flex;
    gap: 2.5rem;
    list-style: none;
    align-items: center;
}

.nav-links a {
    text-decoration: none;
    color: var(--text-white);
    font-weight: 600;
    font-size: 1.05rem;
    transition: color 0.3s;
    position: relative;
}

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

.nav-links a:not(.btn-nav)::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--primary);
    transition: width 0.3s;
}

.nav-links a:not(.btn-nav):hover::after {
    width: 100%;
}

.btn-nav {
    background: var(--primary);
    padding: 0.7rem 1.8rem;
    border-radius: 50px;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
    transition: transform 0.3s, box-shadow 0.3s;
}

.btn-nav:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.5);
    color: white !important;
}

.mobile-menu-btn {
    display: none;
    cursor: pointer;
}

/* ========== HERO SECTION ========== */
.hero {
    padding: 150px 0 100px;
    min-height: 100vh;
    display: flex;
    align-items: center;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 4rem;
    align-items: center;
}

.hero-centered {
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero-centered .hero-badge,
.hero-centered .hero-title,
.hero-centered .hero-subtitle,
.hero-centered .hero-cta {
    justify-content: center;
}

.hero-centered .hero-stats {
    justify-content: center;
    margin-top: 4rem;
}

.hero-centered .pricing-card {
    /* margin: 3rem auto 0; */
    width: 100%;
    max-width: 550px;
}


.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--glass);
    border: 1px solid var(--glass-border);
    padding: 0.6rem 1.2rem;
    border-radius: 50px;
    margin-bottom: 2rem;
    font-size: 0.95rem;
    color: var(--primary);
    font-weight: 600;
}

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

.gradient-text {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.highlight-underline {
    position: relative;
    display: inline-block;
}

.highlight-underline::after {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 0;
    width: 100%;
    height: 15px;
    background: linear-gradient(90deg, var(--primary), transparent);
    opacity: 0.3;
    z-index: -1;
}

.hero-subtitle {
    font-size: 1.3rem;
    color: var(--text-muted);
    margin-bottom: 2.5rem;
    line-height: 1.8;
}

.hero-cta {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.btn-primary,
.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    padding: 1.1rem 2.5rem;
    border-radius: 12px;
    font-weight: 700;
    font-size: 1.1rem;
    text-decoration: none;
    transition: all 0.3s;
}

.btn-lg {
    font-size: 1.15rem;
    padding: 1.2rem 2.8rem;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    box-shadow: 0 10px 30px rgba(16, 185, 129, 0.4);
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(16, 185, 129, 0.6);
}

.btn-secondary {
    background: var(--glass);
    border: 1px solid var(--glass-border);
    color: white;
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--primary);
}

.hero-stats {
    display: flex;
    gap: 3rem;
}

.hero-stats .stat-item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    color: var(--text-muted);
    font-weight: 600;
}

.hero-stats .stat-item i {
    color: var(--primary);
}

/* ========== PHONE MOCKUP ========== */
.phone-mockup {
    perspective: 1000px;
}

.phone-frame {
    width: 380px;
    height: 770px;
    background: #1e293b;
    border: 14px solid #334155;
    border-radius: 50px;
    position: relative;
    box-shadow: var(--shadow-lg);
    transform: rotateY(-15deg) rotateX(5deg);
    transition: transform 0.6s ease;
}

.phone-frame:hover {
    transform: rotateY(0deg) rotateX(0deg);
}

.phone-notch {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 180px;
    height: 30px;
    background: #0f172a;
    border-radius: 0 0 24px 24px;
    z-index: 10;
}

.phone-screen {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #0f172a, #1e293b);
    border-radius: 38px;
    overflow: hidden;
}

.app-preview {
    padding: 50px 24px 24px;
    height: 100%;
}

.preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.app-title {
    font-weight: 900;
    font-size: 1.5rem;
    color: var(--primary);
}

.profit-badge {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-weight: 800;
    font-size: 0.95rem;
}

.preview-chart {
    height: 180px;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: 15px;
    margin-bottom: 20px;
}

.preview-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.preview-card {
    background: var(--bg-card);
    padding: 1.2rem;
    border-radius: 15px;
    border: 1px solid var(--glass-border);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.preview-card i {
    color: var(--primary);
    width: 24px;
    height: 24px;
}

.preview-card span {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.preview-card strong {
    font-size: 1.3rem;
    color: var(--primary);
}

.pulse-1 {
    animation: pulse 2s ease-in-out infinite;
}

.pulse-2 {
    animation: pulse 2s ease-in-out infinite 1s;
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

/* ========== ANIMATIONS ========== */
.animate-slide-up {
    opacity: 0;
    animation: slideUp 0.8s ease forwards;
}

.delay-1 {
    animation-delay: 0.2s;
}

.delay-2 {
    animation-delay: 0.4s;
}

.delay-3 {
    animation-delay: 0.6s;
}

.delay-4 {
    animation-delay: 0.8s;
}

.delay-5 {
    animation-delay: 1s;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    opacity: 0;
    animation: fadeIn 1s ease forwards;
}

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

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

@keyframes floatPhone {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-20px);
    }
}

.animate-on-scroll {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s ease;
}

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

/* ========== SECTIONS ========== */
.section-header {
    margin-bottom: 4rem;
}

.section-header.centered {
    text-align: center;
}

.section-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    background: var(--glass);
    border: 2px solid var(--primary);
    color: var(--primary);
    padding: 0.8rem 2.2rem;
    border-radius: 50px;
    font-weight: 900;
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

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

.section-subtitle {
    font-size: 1.3rem;
    color: var(--text-muted);
    max-width: 700px;
    margin: 0 auto;
}

/* ========== PROBLEM SECTION ========== */
.problem-section {
    padding: 60px 0;
    background: rgba(5, 8, 16, 0.5);
}

.problem-content {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 4rem;
    align-items: center;
}

.problem-box {
    background: var(--bg-card);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 24px;
    padding: 3rem;
    backdrop-filter: blur(10px);
}

.problem-icon {
    width: 70px;
    height: 70px;
    background: rgba(239, 68, 68, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
}

.problem-icon i {
    color: #ef4444;
    width: 35px;
    height: 35px;
}

.problem-box h3 {
    font-size: 2rem;
    margin-bottom: 1.5rem;
    font-weight: 800;
}

.lead-text {
    font-size: 1.2rem;
    line-height: 1.8;
    margin-bottom: 2rem;
    color: var(--text-muted);
}

.problem-reasons {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.reason-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: rgba(239, 68, 68, 0.05);
    border-radius: 12px;
    border-left: 3px solid #ef4444;
}

.reason-item i {
    color: #ef4444;
    flex-shrink: 0;
}

/* ========== COMPARISON CARD ========== */
.comparison-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    background: var(--bg-card);
    padding: 4rem 3rem;
    border-radius: 30px;
    border: 1px solid var(--glass-border);
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}

.comparison-side {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.comparison-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin-bottom: 1.5rem;
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
}

.comparison-side h4 {
    font-size: 1.5rem;
    margin-bottom: 2.5rem;
    font-weight: 800;
    line-height: 1.2;
    color: white;
}

.comparison-side ul {
    list-style: none;
    text-align: right;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.comparison-side li {
    padding-bottom: 0.8rem;
    border-bottom: 1px solid var(--glass-border);
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: flex-start;
    font-size: 1.1rem;
    line-height: 1.4;
}

.comparison-side.bad li {
    color: #ef4444;
}

.comparison-side.bad li i {
    width: 20px;
    height: 20px;
}

.comparison-side.good li {
    color: var(--primary);
}

.comparison-side.good li i {
    width: 20px;
    height: 20px;
}

.tag-danger {
    color: #ef4444 !important;
    border-color: #ef4444 !important;
}

.comparison-divider {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    background: var(--bg-dark);
    padding: 10px;
    border-radius: 50%;
    border: 1px solid var(--glass-border);
}

.comparison-divider i {
    color: var(--primary);
    width: 30px;
    height: 30px;
}

/* ========== SOLUTION SECTION ========== */
.solution-section {
    padding: 60px 0;
}

.solution-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.solution-card {
    background: var(--bg-card);
    border: 1px solid var(--glass-border);
    border-radius: 24px;
    padding: 2.5rem;
    position: relative;
    overflow: hidden;
    transition: all 0.4s;
}

.solution-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    transform: scaleX(0);
    transition: transform 0.4s;
}

.solution-card:hover::before {
    transform: scaleX(1);
}

.solution-card:hover {
    transform: translateY(-10px);
    border-color: var(--primary);
    box-shadow: 0 20px 50px rgba(16, 185, 129, 0.2);
}

.solution-number {
    position: absolute;
    top: 10px;
    left: 20px;
    font-size: 4rem;
    font-weight: 900;
    color: rgba(16, 185, 129, 0.1);
    z-index: 0;
}

.solution-icon {
    width: 70px;
    height: 70px;
    background: rgba(16, 185, 129, 0.1);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.solution-icon i {
    color: var(--primary);
    width: 35px;
    height: 35px;
}

.solution-card h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    font-weight: 800;
}

.solution-card p {
    color: var(--text-muted);
    margin-bottom: 1.5rem;
    line-height: 1.7;
}

.solution-features {
    display: flex;
    gap: 0.7rem;
    flex-wrap: wrap;
}

.feature-tag {
    background: rgba(16, 185, 129, 0.1);
    color: var(--primary);
    padding: 0.4rem 0.9rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
}

/* ========== FEATURES DEEP DIVE ========== */
.features-deep {
    padding: 60px 0;
    background: rgba(5, 8, 16, 0.5);
}

.feature-showcase {
    display: flex;
    flex-direction: column;
    gap: 6rem;
}

.showcase-item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.showcase-item.reverse {
    direction: ltr;
}

.showcase-item.reverse .showcase-content {
    direction: rtl;
}

.feature-screen {
    perspective: 1000px;
}

.screen-mockup {
    background: var(--bg-card);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 2rem;
    box-shadow: var(--shadow-lg);
    transform: rotateY(-5deg);
    transition: transform 0.5s;
}

.screen-mockup:hover {
    transform: rotateY(0deg);
}

.mockup-header {
    font-size: 1.3rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
    color: var(--primary);
}

.mockup-chart {
    height: 150px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), transparent);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: 12px;
    margin-bottom: 1rem;
}

.mockup-stats {
    display: flex;
    gap: 1rem;
}

.stat-pill {
    flex: 1;
    padding: 0.8rem;
    border-radius: 10px;
    text-align: center;
    font-weight: 700;
}

.stat-pill.green {
    background: rgba(16, 185, 129, 0.2);
    color: var(--primary);
}

.stat-pill.blue {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
}

.calculator-demo {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.calc-input {
    background: rgba(255, 255, 255, 0.05);
    padding: 1rem;
    border-radius: 10px;
    border: 1px solid var(--glass-border);
}

.calc-result {
    background: rgba(59, 130, 246, 0.1);
    padding: 1rem;
    border-radius: 10px;
    border: 1px solid #3b82f6;
    color: #3b82f6;
    font-weight: 700;
}

.calc-profit {
    background: rgba(16, 185, 129, 0.1);
    padding: 1.2rem;
    border-radius: 10px;
    border: 2px solid var(--primary);
    color: var(--primary);
    font-weight: 800;
    font-size: 1.2rem;
    text-align: center;
}

.inventory-list {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.inventory-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    border: 1px solid var(--glass-border);
}

.stock-badge {
    padding: 0.4rem 0.9rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 700;
}

.stock-badge.good {
    background: rgba(16, 185, 129, 0.2);
    color: var(--primary);
}

.stock-badge.low {
    background: rgba(245, 158, 11, 0.2);
    color: var(--secondary);
}

.stock-badge.critical {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.showcase-content h3 {
    font-size: 2.2rem;
    margin-bottom: 1.5rem;
    font-weight: 900;
}

.showcase-content p {
    font-size: 1.2rem;
    color: var(--text-muted);
    margin-bottom: 2rem;
    line-height: 1.8;
}

.feature-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.feature-list li {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 1.1rem;
    padding: 0.8rem;
    background: rgba(16, 185, 129, 0.05);
    border-radius: 10px;
}

.feature-list i {
    color: var(--primary);
    flex-shrink: 0;
}

/* ========== HOW IT WORKS ========== */
.how-section {
    padding: 60px 0;
}

.steps-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
    align-items: stretch;
    max-width: 1200px;
    margin: 0 auto;
}

.step-item {
    text-align: center;
    padding: 2.5rem 2rem;
    background: var(--bg-card);
    border: 1px solid var(--glass-border);
    border-radius: 24px;
    position: relative;
    transition: all 0.4s;
}

.step-item:hover {
    transform: translateY(-10px);
    border-color: var(--primary);
    box-shadow: 0 20px 50px rgba(16, 185, 129, 0.2);
}

.step-number {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 1.5rem;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
}

.step-icon {
    width: 80px;
    height: 80px;
    background: rgba(16, 185, 129, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.7rem;
}

.step-icon i {
    color: var(--primary);
    width: 40px;
    height: 40px;
}

.step-item h3 {
    font-size: 1.5rem;
    margin-bottom: 0.3rem;
    font-weight: 800;
}

.step-item p {
    color: var(--text-muted);
}

.step-arrow {
    color: var(--primary);
    font-size: 2rem;
}

/* ========== TESTIMONIALS ========== */
.testimonials {
    padding: 60px 0;
    background: rgba(5, 8, 16, 0.5);
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.testimonial-card {
    background: var(--bg-card);
    border: 1px solid var(--glass-border);
    border-radius: 24px;
    padding: 2.5rem;
    transition: all 0.4s;
}

.testimonial-card:hover {
    transform: translateY(-10px);
    border-color: var(--primary);
    box-shadow: 0 20px 50px rgba(16, 185, 129, 0.2);
}

.testimonial-rating {
    display: flex;
    gap: 0.3rem;
    margin-bottom: 1.5rem;
}

.testimonial-rating i {
    color: #f59e0b;
    fill: #f59e0b;
    width: 20px;
    height: 20px;
}

/* Yellow filled stars */
.testimonial-rating svg,
.testimonial-rating i[data-lucide="star"] {
    color: #f59e0b !important;
    fill: #f59e0b !important;
}

.testimonial-text {
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 2rem;
    color: var(--text-muted);
}

.testimonial-author {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.testimonial-author strong {
    font-size: 1.1rem;
    color: var(--text-white);
}

.testimonial-author span {
    color: var(--text-muted);
    font-size: 0.95rem;
}

/* ========== FINAL CTA ========== */
.final-cta {
    padding: 60px 0;
}

.cta-box {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(139, 92, 246, 0.1));
    border: 1px solid var(--primary);
    border-radius: 40px;
    padding: 5rem;
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 4rem;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.cta-box::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.2), transparent);
    animation: rotate 20s linear infinite;
}

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

    to {
        transform: rotate(360deg);
    }
}

.cta-content {
    position: relative;
    z-index: 1;
}

.cta-title {
    font-size: 3.5rem;
    font-weight: 900;
    margin-bottom: 1.5rem;
}

.cta-subtitle {
    font-size: 1.3rem;
    color: var(--text-muted);
    margin-bottom: 3rem;
}

.cta-buttons {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.btn-download {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.2rem 2rem;
    background: var(--bg-card);
    border: 1px solid var(--glass-border);
    border-radius: 15px;
    text-decoration: none;
    color: white;
    transition: all 0.3s;
}

.btn-download:hover {
    transform: translateY(-5px);
    border-color: var(--primary);
    box-shadow: 0 10px 30px rgba(16, 185, 129, 0.3);
}

.btn-download i {
    width: 40px;
    height: 40px;
    color: var(--primary);
}

.btn-download div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.btn-download small {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.btn-download strong {
    font-size: 1.1rem;
}

.cta-note {
    color: var(--primary);
    font-weight: 700;
    font-size: 1.1rem;
}

.floating-phone {
    position: relative;
    animation: floatCTA 4s ease-in-out infinite;
}

@keyframes floatCTA {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-20px) rotate(5deg);
    }
}

.phone-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
    background: var(--primary);
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.3;
}

.phone-device {
    width: 200px;
    height: 400px;
    background: #1e293b;
    border: 8px solid #334155;
    border-radius: 35px;
    position: relative;
    box-shadow: var(--shadow-lg);
}

.phone-screen-cta {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #0f172a, #1e293b);
    border-radius: 27px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.success-animation {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    animation: successPulse 2s ease-in-out infinite;
}

.success-animation i {
    color: var(--primary);
    width: 60px;
    height: 60px;
}

.success-animation span {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--primary);
}

@keyframes successPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}

/* ========== FOOTER ========== */
.footer {
    padding: 6rem 0 2rem;
    border-top: 1px solid var(--glass-border);
    background: rgba(5, 8, 16, 0.8);
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5rem;
    margin-bottom: 4rem;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 1.5rem;
}

.footer-logo-img {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    object-fit: cover;
}

.footer-desc {
    color: var(--text-muted);
    line-height: 1.8;
    margin-bottom: 2rem;
}

.social-links {
    display: flex;
    gap: 1rem;
}

.social-links a {
    width: 45px;
    height: 45px;
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

.social-links a:hover {
    background: var(--primary);
    border-color: var(--primary);
    transform: translateY(-3px);
}

.footer-col h4 {
    font-size: 1.4rem;
    margin-bottom: 2rem;
    font-weight: 900;
    color: white;
}

.footer-col ul {
    list-style: none;
}

.footer-col li {
    margin-bottom: 0.8rem;
}

.footer-col a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.3s;
}

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

.footer-downloads {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.download-badge img {
    height: 45px;
    transition: transform 0.3s;
}

.download-badge:hover img {
    transform: scale(1.05);
}

.footer-bottom {
    text-align: center;
    padding-top: 2rem;
    border-top: 1px solid var(--glass-border);
    color: var(--text-muted);
}


/* ========== FIXED DOWNLOAD BUTTON (CENTER) ========== */
.download-fixed {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    padding: 1rem 2rem;
    background: linear-gradient(135deg, var(--primary), #059669);
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    box-shadow: 0 8px 30px rgba(16, 185, 129, 0.5);
    z-index: 9999;
    transition: all 0.3s ease;
    animation: download-bounce 2s ease-in-out infinite;
    text-decoration: none;
    color: white;
    font-weight: 700;
    font-size: 1.1rem;
    font-family: 'Cairo', sans-serif;
}

.download-fixed:hover {
    transform: translateX(-50%) scale(1.05);
    box-shadow: 0 12px 40px rgba(16, 185, 129, 0.7);
}

.download-fixed i {
    color: white;
    width: 24px;
    height: 24px;
}

.download-fixed span {
    white-space: nowrap;
}

@keyframes download-bounce {

    0%,
    100% {
        transform: translateX(-50%) translateY(0);
    }

    50% {
        transform: translateX(-50%) translateY(-10px);
    }
}

/* ========== VIDEO MODAL ========== */
.video-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.video-modal.active {
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
}

.video-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(10px);
}

.video-modal-content {
    position: relative;
    width: 90%;
    max-width: 900px;
    /* Increased for better video view */
    max-height: 90vh;
    background: var(--bg-darker);
    border-radius: 24px;
    padding: 2rem;
    border: 3px solid var(--primary);
    box-shadow: 0 0 50px rgba(16, 185, 129, 0.5);
    animation: modalSlideIn 0.4s ease;
    z-index: 1;
    margin: auto;
}

@keyframes modalSlideIn {
    from {
        transform: scale(0.9) translateY(20px);
        opacity: 0;
    }

    to {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

.video-modal-close {
    position: absolute;
    top: -15px;
    right: -15px;
    width: 45px;
    height: 45px;
    background: var(--primary);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
    z-index: 2;
}

.video-modal-close:hover {
    transform: rotate(90deg) scale(1.1);
    background: #ef4444;
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.5);
}

.video-modal-close i {
    color: white;
    width: 24px;
    height: 24px;
}

.video-container {
    position: relative;
    width: 100%;
    max-width: 450px;
    aspect-ratio: 9 / 16;
    background: #000;
    border-radius: 16px;
    overflow: hidden;
    margin: 0 auto;
}

.video-container video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Button styling for video trigger */
#openVideoBtn {
    background: var(--glass);
    border: 1px solid var(--glass-border);
    color: white;
    cursor: pointer;
    font-family: 'Cairo', sans-serif;
    font-weight: 700;
}

#openVideoBtn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--primary);
}

/* Ensure all buttons use Cairo font */
button {
    font-family: 'Cairo', sans-serif;
}

/* Sticky Video Button (CTA after scroll) */
#openVideoBtn.sticky {
    position: fixed !important;
    top: 50% !important;
    right: 30px !important;
    left: auto !important;
    transform: translateY(-50%) !important;
    z-index: 9998 !important;
    padding: 1rem 1.5rem !important;
    background: linear-gradient(135deg, var(--primary), #059669) !important;
    border: 2px solid var(--primary) !important;
    box-shadow: 0 8px 30px rgba(16, 185, 129, 0.4) !important;
    animation: pulse-cta 2s ease-in-out infinite !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    white-space: nowrap !important;
}

#openVideoBtn.sticky:hover {
    transform: translateY(-50%) scale(1.05) !important;
    box-shadow: 0 12px 40px rgba(16, 185, 129, 0.6) !important;
}

@keyframes pulse-cta {

    0%,
    100% {
        box-shadow: 0 8px 30px rgba(16, 185, 129, 0.4);
    }

    50% {
        box-shadow: 0 12px 40px rgba(16, 185, 129, 0.7);
    }
}

/* ========== RESPONSIVE ========== */
@media (max-width: 1024px) {
    .hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero-visual {
        order: -1;
        margin-bottom: 0rem;
    }

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

    .hero-subtitle {
        margin: 0 auto 2.5rem;
    }

    .hero-cta {
        justify-content: center;
    }

    .hero-stats {
        justify-content: center;
    }

    .solution-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .showcase-item {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .showcase-item.reverse {
        direction: rtl;
    }

    .showcase-item.reverse .showcase-content {
        direction: rtl;
    }

    .steps-container {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .step-arrow {
        transform: rotate(90deg);
        margin: -2rem 0;
    }

    .testimonials-grid {
        grid-template-columns: 1fr;
    }

    .cta-box {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 4rem 3rem;
    }

    .cta-visual {
        display: flex;
        justify-content: center;
    }

    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 3rem;
    }

    .problem-content {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
}

@media (max-width: 768px) {

    /* Navigation */
    .nav-links {
        position: fixed;
        top: 80px;
        left: -100%;
        width: 280px;
        height: calc(100vh - 80px);
        background: rgba(10, 14, 26, 0.98);
        backdrop-filter: blur(20px);
        flex-direction: column;
        padding: 2rem;
        gap: 1.5rem;
        align-items: flex-start;
        border-right: 1px solid var(--glass-border);
        transition: left 0.3s ease;
        z-index: 999;
    }

    .nav-links.active {
        left: 0;
    }

    .mobile-menu-btn {
        display: block;
        font-size: 1.5rem;
        cursor: pointer;
        color: var(--text-white);
    }

    .logo-icon {
        width: 40px;
        height: 40px;
        font-size: 1.3rem;
    }

    .brand-name {
        font-size: 1.1rem;
    }

    .brand-sub {
        font-size: 0.65rem;
    }

    /* Hero */
    .hero {
        padding: 120px 0 80px;
    }

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

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

    .hero-cta {
        flex-direction: column;
        gap: 1rem;
    }

    .btn-lg {
        width: 100%;
        justify-content: center;
    }

    .hero-stats {
        flex-direction: column;
        gap: 1.5rem;
        align-items: center;
    }

    .phone-mockup {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
    }

    .phone-frame {
        width: 310px;
        height: 630px;
        margin: 0 auto;
    }

    /* Sections */
    .section-title {
        font-size: 2.2rem;
    }

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

    .solution-grid {
        grid-template-columns: 1fr;
    }

    .solution-card {
        padding: 2rem;
    }

    .solution-number {
        font-size: 3rem;
    }

    /* Problem Section */
    .problem-content {
        grid-template-columns: 1fr;
    }

    .problem-box {
        padding: 2rem;
    }

    .problem-box h3 {
        font-size: 1.6rem;
    }

    .lead-text {
        font-size: 1.1rem;
    }

    .comparison-card {
        grid-template-columns: 1fr;
        padding: 2rem;
    }

    .comparison-divider {
        transform: rotate(90deg);
        margin: 1rem 0;
    }

    /* Features */
    .showcase-content h3 {
        font-size: 1.8rem;
    }

    .showcase-content p {
        font-size: 1.1rem;
    }

    .feature-list li {
        font-size: 1rem;
    }

    /* How It Works */
    .steps-container {
        gap: 1rem;
    }

    .step-item {
        padding: 1.5rem 1rem;
    }

    .step-icon {
        margin-bottom: 0.3rem;
    }

    .step-item h3 {
        margin-bottom: 0.2rem;
    }

    /* Testimonials */
    .testimonial-card {
        padding: 2rem;
    }

    .testimonial-text {
        font-size: 1rem;
    }

    /* CTA */
    .cta-box {
        padding: 3rem 2rem;
    }

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

    .cta-subtitle {
        font-size: 1.1rem;
    }

    .cta-buttons {
        flex-direction: column;
        gap: 1rem;
    }

    .btn-download {
        width: 100%;
        justify-content: center;
    }

    .phone-device {
        width: 160px;
        height: 320px;
    }

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .footer {
        padding: 4rem 0 2rem;
    }


    /* Video Modal */
    .video-modal-content {
        width: 95%;
        max-width: 400px;
        padding: 1.5rem;
        border-width: 2px;
    }

    .video-container {
        max-width: 350px;
    }

    .video-modal-close {
        width: 40px;
        height: 40px;
        top: -12px;
        right: -12px;
    }

    .video-modal-close i {
        width: 20px;
        height: 20px;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 1.5rem;
    }

    /* Hero */
    .hero-title {
        font-size: 2rem;
        line-height: 1.2;
    }

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

    .hero-badge {
        font-size: 0.85rem;
        padding: 0.5rem 1rem;
    }

    .btn-primary,
    .btn-secondary {
        padding: 1rem 2rem;
        font-size: 1rem;
    }

    .phone-mockup {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
    }

    .phone-frame {
        width: 280px;
        height: 570px;
        border-width: 10px;
        margin: 0 auto;
    }

    /* Sections */
    .section-header {
        text-align: center;
        margin-bottom: 3rem;
    }

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

    .section-tag {
        font-size: 1.8rem;
        padding: 0.4rem 1rem;
        display: table;
        margin: 0 auto 1.5rem;
    }

    .section-subtitle {
        font-size: 1rem;
        text-align: center;
        margin: 0 auto;
    }

    /* Solution Cards */
    .solution-card {
        padding: 1.5rem;
    }

    .solution-card h3 {
        font-size: 1.3rem;
    }

    .solution-icon {
        width: 60px;
        height: 60px;
    }

    .solution-icon i {
        width: 30px;
        height: 30px;
    }

    /* Problem */
    .problem-box {
        padding: 1.5rem;
    }

    .problem-box h3 {
        font-size: 1.4rem;
    }

    .lead-text {
        font-size: 1rem;
    }

    .problem-icon {
        width: 60px;
        height: 60px;
    }

    .problem-icon i {
        width: 30px;
        height: 30px;
    }

    .reason-item {
        padding: 0.8rem;
        font-size: 0.95rem;
    }

    /* Features */
    .showcase-content h3 {
        font-size: 1.5rem;
    }

    .showcase-content p {
        font-size: 1rem;
    }

    .screen-mockup {
        padding: 1.5rem;
    }

    .mockup-header {
        font-size: 1.1rem;
    }

    /* Steps */
    .step-item {
        padding: 0.6rem 0.5rem;
    }

    .step-item h3 {
        font-size: 1.05rem;
        margin-bottom: 0.15rem;
    }

    .step-item p {
        font-size: 0.8rem;
        line-height: 1.3;
    }

    .step-icon {
        width: 50px;
        height: 50px;
        margin-bottom: 0.25rem;
    }

    .step-icon i {
        width: 26px;
        height: 26px;
    }

    .step-number {
        width: 36px;
        height: 36px;
        font-size: 1rem;
        top: -10px;
    }

    /* Testimonials */
    .testimonial-card {
        padding: 1.5rem;
    }

    .testimonial-text {
        font-size: 0.95rem;
    }

    .testimonial-author strong {
        font-size: 1rem;
    }

    /* CTA */
    .cta-box {
        padding: 2.5rem 1.5rem;
    }

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

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

    .btn-download {
        padding: 1rem 1.5rem;
    }

    .btn-download strong {
        font-size: 1rem;
    }

    .phone-device {
        width: 140px;
        height: 280px;
    }

    /* Footer */
    .footer-logo {
        gap: 0.6rem;
    }

    .footer-col h4 {
        font-size: 1.1rem;
    }

    .footer-desc {
        font-size: 0.95rem;
    }

    .social-links a {
        width: 40px;
        height: 40px;
    }

}

/* Landscape phones */
@media (max-width: 768px) and (orientation: landscape) {
    .hero {
        padding: 100px 0 60px;
    }

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

    .phone-frame {
        width: 200px;
        height: 410px;
    }
}

/* Very small devices */
@media (max-width: 360px) {
    .hero-title {
        font-size: 1.8rem;
    }

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

    .cta-title {
        font-size: 1.8rem;
    }

    .phone-frame {
        width: 260px;
        height: 530px;
    }
}

/* High resolution displays */
@media (min-width: 1440px) {
    .container {
        max-width: 1400px;
    }

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

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

/* Print styles */
@media print {

    .navbar,
    .particles,
    .bg-animation {
        display: none;
    }

    body {
        background: white;
        color: black;
    }
}

/* ========== SUCCESS MODAL (POST-DOWNLOAD) ========== */
.success-modal {
    display: none;
}

.success-modal.active {
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
}

.success-modal .success-modal-content {
    text-align: center;
    max-width: 450px;
    width: 90%;
    padding: 3rem 2rem;
    border: 1px solid rgba(16, 185, 129, 0.3);
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(20px);
    border-radius: 30px;
    position: relative;
    margin: auto;
}

.success-icon-wrapper {
    width: 80px;
    height: 80px;
    background: rgba(16, 185, 129, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    color: #10b981;
}

.success-icon-wrapper i {
    width: 45px;
    height: 45px;
    animation: successCheck 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

@keyframes successCheck {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.success-content h2 {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 1rem;
    color: white;
}

.success-content p {
    color: var(--text-muted);
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 2rem;
}

.whatsapp-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    padding: 1.2rem;
    background: #25D366;
    border: none;
    box-shadow: 0 10px 20px rgba(37, 211, 102, 0.3);
    text-decoration: none;
    color: white !important;
    border-radius: 15px;
    font-weight: 700;
}

.whatsapp-btn:hover {
    background: #128C7E;
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(37, 211, 102, 0.5);
}

.success-modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.3s;
}

.success-modal-close:hover {
    color: white;
    transform: rotate(90deg);
}

.success-modal-close i {
    width: 24px;
    height: 24px;
}

.rtl-mirror {
    transform: scaleX(-1);
}

/* ========== PRICING SECTION ========== */
.pricing-section {
    /* padding: 100px 0; */
    /* margin-top: 5rem; */
    position: relative;
    overflow: hidden;
}

.pricing-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 4rem;
}

.pricing-card {
    background: var(--bg-card);
    border: 1px solid var(--glass-border);
    border-radius: 30px;
    padding: 4rem 3rem;
    max-width: 500px;
    width: 100%;
    position: relative;
    backdrop-filter: blur(20px);
    transition: transform 0.4s ease, border-color 0.4s ease;
}

.pricing-card:hover {
    transform: translateY(-10px);
    border-color: var(--primary);
}

.pricing-card.featured {
    border: 2px solid var(--primary);
    box-shadow: 0 20px 50px rgba(16, 185, 129, 0.2);
}

.card-badge {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--secondary);
    color: white;
    padding: 0.8rem 2rem;
    border-radius: 50px;
    font-weight: 800;
    font-size: 1.1rem;
    box-shadow: 0 10px 20px rgba(245, 158, 11, 0.4);
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pricing-header {
    text-align: center;
    margin-bottom: 2.5rem;
}

.pricing-header h3 {
    font-size: 2.5rem;
    font-weight: 900;
    margin-bottom: 0.5rem;
    color: white;
}

.pricing-header p {
    color: var(--text-muted);
    font-size: 1.1rem;
}

.pricing-price {
    text-align: center;
    margin-bottom: 2rem;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.5rem;
}

.pricing-price .currency {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary);
}

.pricing-price .amount {
    font-size: 5rem;
    font-weight: 900;
    line-height: 1;
    color: white;
}

.pricing-price .period {
    font-size: 1.1rem;
    color: var(--text-muted);
}

.pricing-comparison {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 15px;
    padding: 1.5rem;
    margin-bottom: 2.5rem;
    border: 1px dashed var(--glass-border);
}

.comparison-item.after {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.comparison-item .label {
    font-size: 1rem;
    color: var(--text-muted);
}

.comparison-item .price {
    font-size: 1.3rem;
    font-weight: 800;
    color: #ef4444;
    text-decoration: line-through;
}

.pricing-features {
    list-style: none;
    margin-bottom: 3rem;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.pricing-features li {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 1.1rem;
    color: var(--text-white);
}

.pricing-features i {
    color: var(--primary);
    flex-shrink: 0;
}

.full-width {
    width: 100%;
    justify-content: center;
}

.pricing-note {
    text-align: center;
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-top: 1.5rem;
}

@media (max-width: 768px) {
    .pricing-card {
        padding: 3rem 1.5rem;
    }

    .pricing-price .amount {
        font-size: 4rem;
    }
}

/* ========== VIDEO PLAY BUTTON ========== */
.video-btn-container {
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 10;
    margin-top: 2.5rem;
}

.hero-video-btn {
    display: inline-flex;
    align-items: center;
    gap: 1.5rem;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.05), rgba(5, 150, 105, 0.15));
    border: 1px solid rgba(16, 185, 129, 0.4);
    padding: 0.6rem 2.8rem 0.6rem 0.8rem;
    border-radius: 50px;
    cursor: pointer;
    color: #f8fafc;
    font-family: inherit;
    font-weight: 800;
    font-size: 1.3rem;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    backdrop-filter: blur(12px);
    box-shadow: 0 10px 30px rgba(16, 185, 129, 0.15), inset 0 0 20px rgba(16, 185, 129, 0.05);
    position: relative;
    overflow: hidden;
}

.hero-video-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: all 0.6s ease;
    transform: skewX(-20deg);
}

.hero-video-btn:hover::before {
    animation: shine 1.5s infinite;
}

@keyframes shine {
    0% {
        left: -100%;
    }

    100% {
        left: 200%;
    }
}

.hero-video-btn:hover {
    transform: translateY(-5px) scale(1.03);
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(5, 150, 105, 0.25));
    border-color: rgba(16, 185, 129, 0.8);
    box-shadow: 0 15px 40px rgba(16, 185, 129, 0.4), 0 0 20px rgba(16, 185, 129, 0.2);
    color: #fff;
}

.play-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #10b981, #059669);
    border-radius: 50%;
    color: white;
    filter: drop-shadow(0 4px 15px rgba(16, 185, 129, 0.6));
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    z-index: 2;
}

.play-icon-wrapper::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #10b981;
    z-index: -1;
    animation: pulse-ring 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}

@keyframes pulse-ring {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }

    100% {
        transform: scale(1.6);
        opacity: 0;
    }
}

.hero-video-btn:hover .play-icon-wrapper {
    transform: scale(1.15) rotate(5deg);
}

.play-icon {
    width: 26px;
    height: 26px;
    margin-left: 4px;
    /* Adjust for visual center of play icon */
}

.btn-text {
    position: relative;
    z-index: 2;
    letter-spacing: 0.5px;
}


/* ========== VIDEO CARD WRAPPER ========== */
.video-card-wrapper {
    max-width: 400px;
    margin: 3.5rem auto;
    background: rgba(20, 25, 45, 0.4);
    backdrop-filter: blur(20px);
    border: 3px solid var(--primary) !important;
    border-radius: 40px !important;
    box-shadow:
        0 30px 60px rgba(0, 0, 0, 0.6),
        0 0 30px rgba(16, 185, 129, 0.3),
        inset 0 0 20px rgba(16, 185, 129, 0.1);
    position: relative;
    overflow: hidden !important;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 5;
}

.video-card-wrapper:hover {
    transform: translateY(-15px) scale(1.03);
    border-color: #22c55e;
    /* Brighter green on hover */
    box-shadow:
        0 50px 100px rgba(0, 0, 0, 0.8),
        0 0 50px rgba(16, 185, 129, 0.5);
}

.video-card-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.8rem 1.2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    margin-bottom: 1.2rem;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 20px 20px 0 0;
}

.header-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.dot-red {
    background: #ff5f56;
}

.dot-yellow {
    background: #ffbd2e;
}

.dot-green {
    background: #27c93f;
}

.header-title {
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--text-muted);
    letter-spacing: 1.5px;
    margin-right: auto;
    text-transform: uppercase;
}

.video-hero-container {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
    background: #000;
}

.hero-video-element {
    width: 100%;
    display: block;
    aspect-ratio: 9 / 16;
    object-fit: cover;
    transition: filter 0.5s ease;
}

.video-play-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(5, 8, 16, 0.5);
    backdrop-filter: blur(4px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    cursor: pointer;
    z-index: 10;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    pointer-events: none;
}

.video-play-overlay.active {
    opacity: 1;
    pointer-events: all;
}

.play-button-icon {
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 40px rgba(16, 185, 129, 0.6);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 4px solid rgba(255, 255, 255, 0.1);
}

.play-button-icon i {
    width: 40px;
    height: 40px;
    color: white;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.3));
}

.play-button-text {
    font-weight: 900;
    font-size: 1.4rem;
    color: white;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
    background: rgba(16, 185, 129, 0.2);
    padding: 0.8rem 2rem;
    border-radius: 50px;
    border: 1px solid rgba(16, 185, 129, 0.3);
    backdrop-filter: blur(10px);
}

.video-play-overlay:hover .play-button-icon {
    transform: scale(1.15) rotate(5deg);
    box-shadow: 0 0 60px rgba(16, 185, 129, 0.8);
}

.video-card-footer {
    display: flex;
    justify-content: space-between;
    padding: 1.2rem 0.8rem 0.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    margin-top: 1.2rem;
}

.footer-stat {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-muted);
}

.footer-stat i {
    width: 18px;
    height: 18px;
    color: var(--primary);
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 1.5rem;
        line-height: 1.2;
    }
}

@media (max-width: 1024px) {
    .hero-subtitle {
        margin: 0 auto -0.5rem;
    }
}

@media (max-width: 768px) {
    .hero {
        padding: 40px 0 80px;
    }
}
/* ══════════════════════════════════════════════════════════════
   Landscape hero video
   The V2 clip is 1280x720. The original rule forced 9/16 with
   object-fit:cover inside a 400px card, which cropped a widescreen
   video down to a narrow vertical strip. These override it.
   ══════════════════════════════════════════════════════════════ */
.video-card-wrapper {
    max-width: 900px;
}

.hero-video-element {
    aspect-ratio: 16 / 9;
    object-fit: contain;
    background: #000;
}

@media (max-width: 768px) {
    .video-card-wrapper {
        max-width: 100%;
        border-radius: 24px !important;
    }
}

/* ══════════════════════════════════════════════════════════════
   Navigation bar — compact
   Scoped under .site-nav so the page's older .nav-links rules
   (line ~241) do not fight these.
   ══════════════════════════════════════════════════════════════ */
.site-nav {
    font-family: 'Cairo', sans-serif;
    position: sticky;
    top: 0;
    z-index: 999;
    background: rgba(10, 14, 26, 0.82);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--glass-border);
}

.site-nav .nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.45rem 0;
    min-height: 52px;
}

.site-nav .nav-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    flex-shrink: 0;
}

.site-nav .nav-brand img {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}

.site-nav .nav-brand span {
    font-family: 'Cairo', sans-serif;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.01em;
    color: var(--text-white);
    text-decoration: none;
    white-space: nowrap;
}

.site-nav .nav-links {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-nav .nav-links a {
    font-family: 'Cairo', sans-serif;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 600;
    transition: color 0.2s ease;
}

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

.site-nav .nav-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}

.site-nav .nav-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.2s ease;
}

.site-nav .nav-social:hover {
    color: var(--text-white);
}

.site-nav .nav-cta {
    font-family: 'Cairo', sans-serif;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.85rem;
    border-radius: 9px;
    background: var(--primary);
    color: #fff;
    font-weight: 700;
    font-size: 0.78rem;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s ease;
}

.site-nav .nav-cta:hover {
    background: var(--primary-dark);
}

/* Download entries sit in the links list, so the burger menu reveals
   them on mobile instead of them being pinned outside it. */
.site-nav .nav-links .nav-dl a {
    color: var(--primary);
    font-weight: 700;
}

.site-nav .nav-links a svg {
    width: 15px;
    height: 15px;
    vertical-align: -2px;
}

.site-nav .mobile-menu-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    background: none;
    border: none;
    color: var(--text-white);
    cursor: pointer;
}

.site-nav .mobile-menu-btn svg {
    width: 22px;
    height: 22px;
}

/* ── Mobile: burger + slide-in panel ──────────────────────────────
   script.js already toggles .active on .nav-links and swaps the icon;
   these rules give it something to animate. `left: auto` neutralises
   the older global .nav-links rule at 768px, which slides from the
   left - wrong side for an RTL page.
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .site-nav .mobile-menu-btn {
        display: inline-flex;
    }

    .site-nav .nav-links {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        position: fixed;
        top: 52px;
        right: -100%;
        left: auto;
        width: min(290px, 82vw);
        height: calc(100vh - 52px);
        padding: 1rem;
        background: rgba(10, 14, 26, 0.98);
        backdrop-filter: blur(20px);
        border-left: 1px solid var(--glass-border);
        box-shadow: -12px 0 40px rgba(0, 0, 0, 0.5);
        transition: right 0.3s ease;
        overflow-y: auto;
        z-index: 998;
    }

    .site-nav .nav-links.active {
        right: 0;
    }

    .site-nav .nav-links li {
        width: 100%;
    }

    .site-nav .nav-links a {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        width: 100%;
        padding: 0.85rem 0.3rem;
        font-size: 0.95rem;
        color: var(--text-white);
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    .site-nav .nav-social {
        display: none;
    }
}

@media (max-width: 480px) {
    .site-nav .nav-brand span {
        display: none;
    }

    .site-nav .nav-cta span {
        display: none;
    }

    .site-nav .nav-cta {
        padding: 0.5rem 0.7rem;
    }
}

/* ── Video card border ────────────────────────────────────────────
   Two problems fixed here:
   1. The wrapper had no padding, so the black video box sat flush
      against the 3px border and swallowed it along the left and right
      edges. 10px of padding gives the border room to read.
   2. The border was declared inline with !important, which outranks
      every stylesheet rule - so the :hover colour change could never
      apply. The inline declaration is gone; these rules own it now.
   ───────────────────────────────────────────────────────────────── */
.video-card-wrapper {
    max-width: 900px;
    padding: 10px;
    border: 3px solid var(--primary) !important;
    border-radius: 28px !important;
}

.video-hero-container {
    border-radius: 20px;
}

/* Hover on the video card is removed by request. The original rule
   further up the file still exists, so rather than editing it this
   pins every hover property back to the resting state. */
.video-card-wrapper:hover {
    border-color: var(--primary) !important;
    transform: none !important;
    box-shadow:
        0 30px 60px rgba(0, 0, 0, 0.6),
        0 0 30px rgba(16, 185, 129, 0.3),
        inset 0 0 20px rgba(16, 185, 129, 0.1) !important;
}

@media (max-width: 768px) {
    .video-card-wrapper {
        padding: 6px;
        border-radius: 20px !important;
    }

    .video-hero-container {
        border-radius: 14px;
    }
}

/* ── Video card header strip ──────────────────────────────────────
   .video-card-header already existed in this file but was never used
   in the markup and was styled as a dark subtle bar. These rules are
   scoped under .video-card-wrapper so they win without editing the
   original block.
   ───────────────────────────────────────────────────────────────── */
.video-card-wrapper .video-card-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 0 0 8px;
    padding: 0.7rem 1rem;
    background: #cde01a;
    color: #0a0e1a;
    font-family: 'Cairo', sans-serif;
    font-weight: 800;
    font-size: 0.95rem;
    line-height: 1.35;
    text-align: center;
    border: none;
    border-radius: 18px 18px 6px 6px;
}

.video-card-wrapper .video-card-header svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    stroke-width: 2.2;
}

.video-hero-container {
    border-radius: 6px 6px 18px 18px;
}

@media (max-width: 768px) {
    .video-card-wrapper .video-card-header {
        font-size: 0.78rem;
        padding: 0.55rem 0.6rem;
        gap: 0.35rem;
        border-radius: 12px 12px 4px 4px;
    }

    .video-card-wrapper .video-card-header svg {
        width: 16px;
        height: 16px;
    }

    .video-hero-container {
        border-radius: 4px 4px 12px 12px;
    }
}

/* ── Free-trial messaging ─────────────────────────────────────── */
.trial-banner {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    margin: 0 0 1.2rem;
    padding: 0.85rem 1rem;
    border-radius: 14px;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    text-align: right;
}

.trial-banner svg {
    width: 22px;
    height: 22px;
    color: var(--secondary);
    flex-shrink: 0;
    margin-top: 2px;
}

.trial-banner strong {
    display: block;
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--secondary);
    margin-bottom: 0.15rem;
}

.trial-banner span {
    display: block;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--text-muted);
}

.hero-trial-line {
    display: inline-block;
    margin-top: 0.6rem;
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: var(--secondary);
    font-size: 0.9rem;
    font-weight: 700;
}

/* ══════════════════════════════════════════════════════════════════
   LIGHT THEME
   Appended so nothing above is edited; later rules of equal
   specificity win, and !important is used only where the original
   declaration used it.

   Most of the page follows from the variables alone: --glass-border is
   used 23 times, --text-muted 27. The blocks after them are the ~28
   rules that hardcoded a dark surface and cannot follow a variable.

   NOTE: --text-white now holds a DARK colour, and --bg-dark a light
   one. The names are kept because they are referenced throughout the
   file; renaming them would mean touching every use.
   ══════════════════════════════════════════════════════════════════ */
:root {
    --bg-dark: #FFFFFF;
    --bg-darker: #F1F5F9;
    --bg-card: #FFFFFF;
    --text-white: #0F172A;
    --text-muted: #475569;
    --glass: rgba(15, 23, 42, 0.035);
    --glass-border: rgba(15, 23, 42, 0.1);
    --shadow-lg: 0 20px 60px rgba(15, 23, 42, 0.1);
}

body {
    background: var(--bg-dark);
    color: var(--text-white);
}

/* Decorative background: the orbs and grid were tuned to glow against
   near-black. On white they turn to haze, so they are dialled back. */
.glow-orb {
    opacity: 0.07;
}

.grid-overlay {
    opacity: 0.35;
}

.particle {
    opacity: 0.18;
}

/* Nav and menus */
.navbar,
.site-nav {
    background: rgba(255, 255, 255, 0.85);
    border-bottom: 1px solid var(--glass-border);
}

.nav-links,
.site-nav .nav-links {
    background: rgba(255, 255, 255, 0.98);
}

.site-nav .nav-links a {
    border-bottom: 1px solid rgba(15, 23, 42, 0.07);
}

.site-nav .mobile-menu-btn {
    color: var(--text-white);
}

/* Alternating section bands */
.problem-section,
.features-deep,
.testimonials {
    background: #F8FAFC;
}

.footer {
    background: #F1F5F9;
    border-top: 1px solid var(--glass-border);
}

/* Small inset surfaces that were white-on-dark */
.comparison-icon,
.calc-input,
.inventory-item,
.pricing-comparison,
.btn-secondary:hover,
#openVideoBtn:hover {
    background: rgba(15, 23, 42, 0.04);
}

.play-button-icon {
    border: 4px solid rgba(15, 23, 42, 0.12);
}

.success-modal .success-modal-content {
    background: #FFFFFF;
    border: 1px solid var(--glass-border);
}

/* Video card */
.video-card-wrapper {
    background: #FFFFFF;
}

.video-play-overlay {
    background: rgba(15, 23, 42, 0.35);
}

.video-card-footer {
    border-top: 1px solid var(--glass-border);
}

/* Cards get a real border and shadow; on dark they relied on a lighter
   fill against a darker page, which does not read on white. */
.solution-card,
.testimonial-card,
.step-item,
.pricing-card,
.showcase-item {
    background: #FFFFFF;
    border: 1px solid var(--glass-border);
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
}

/* Phone mockups stay dark on purpose: they depict the app's own dark
   interface, so lightening them would misrepresent the product. */

/* Text that was explicitly light */
.hero-title,
.section-title,
.cta-title,
.pricing-header h3,
.showcase-content h3,
.solution-card h3,
.step-item h3 {
    color: var(--text-white);
}

/* ── Free-trial call to action ────────────────────────────────────
   Deliberately outlined rather than solid: the WhatsApp download stays
   the primary action, and two solid buttons of equal weight would
   compete instead of ranking.
   ───────────────────────────────────────────────────────────────── */
.btn-trial {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    margin-top: 0.7rem;
    padding: 0.85rem 1.2rem;
    border-radius: 14px;
    background: rgba(245, 158, 11, 0.08);
    border: 1.5px solid var(--secondary);
    color: var(--secondary);
    font-family: 'Cairo', sans-serif;
    font-size: 0.95rem;
    font-weight: 800;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.2s ease;
}

.btn-trial:hover {
    background: rgba(245, 158, 11, 0.16);
    transform: translateY(-2px);
}

.btn-trial svg {
    width: 19px;
    height: 19px;
    flex-shrink: 0;
}

.btn-trial-lg {
    width: auto;
    margin-top: 0;
    padding: 1rem 1.6rem;
    text-align: right;
}

.btn-trial-lg small {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    opacity: 0.85;
}

.btn-trial-lg strong {
    display: block;
    font-size: 1rem;
    font-weight: 800;
}

@media (max-width: 560px) {
    .btn-trial-lg {
        width: 100%;
        margin-top: 0.7rem;
    }
}

/* ── Product screenshots ──────────────────────────────────────────
   Real captures of the panel and the Android app, taken against a
   seeded demo account. Framed in browser/phone chrome so it reads as
   software rather than as loose images dropped on the page.
   ───────────────────────────────────────────────────────────────── */
.screens-section {
    background: #F8FAFC;
}

.screens-stage {
    position: relative;
    max-width: 940px;
    margin: 0 auto 3.5rem;
    padding-bottom: 2rem;
}

.screen-browser {
    margin: 0;
    border-radius: 14px;
    overflow: hidden;
    background: #FFFFFF;
    border: 1px solid var(--glass-border);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.14);
}

.browser-bar {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 10px 14px;
    background: #EEF2F6;
    border-bottom: 1px solid var(--glass-border);
    direction: ltr;
}

.browser-bar .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #CBD5E1;
    flex-shrink: 0;
}

.browser-url {
    margin-inline-start: 10px;
    padding: 3px 12px;
    border-radius: 20px;
    background: #FFFFFF;
    border: 1px solid var(--glass-border);
    font-family: 'Cairo', sans-serif;
    font-size: 11px;
    color: var(--text-muted);
}

.screen-browser img,
.screen-card img {
    display: block;
    width: 100%;
    height: auto;
}

/* Phone overlaps the browser corner: one composed scene rather than
   two unrelated pictures side by side. */
.screen-phone {
    position: absolute;
    inset-inline-start: -10px;
    bottom: 0;
    width: 168px;
    margin: 0;
    border-radius: 22px;
    overflow: hidden;
    background: #FFFFFF;
    border: 5px solid #0F172A;
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.28);
}

.screen-phone img {
    display: block;
    width: 100%;
    height: auto;
}

.screens-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.2rem;
}

.screen-card {
    margin: 0;
    background: #FFFFFF;
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06);
}

/* Fixed ratio so the three cards line up regardless of source size;
   anchored to the top because the useful part of a UI screenshot is
   the header and first rows, not the empty space below. */
.screen-card img {
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: top;
}

/* The sticky nav would otherwise cover the browser chrome when this
   section is reached via the menu. */
.screens-section {
    scroll-margin-top: 70px;
}

.screen-card figcaption {
    padding: 0.7rem 0.9rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-white);
    border-top: 1px solid var(--glass-border);
}

@media (max-width: 720px) {
    /* The overlap needs room it does not have on a phone, so the two
       stack instead and the handset is centred under the browser. */
    .screens-stage {
        padding-bottom: 0;
    }

    .screen-phone {
        position: static;
        width: 150px;
        margin: -28px auto 0;
    }
}

/* ── Light theme: white text that had no ground left ──────────────
   These were white against dark surfaces. The surfaces are light now,
   so the text disappeared. Buttons keep their white text because they
   still sit on a green fill.
   ───────────────────────────────────────────────────────────────── */
.footer-col h4 {
    color: var(--text-white);
}

.comparison-side h4 {
    color: var(--text-white);
}

.success-content h2 {
    color: var(--text-white);
}

/* Footer body text and links, so the whole block reads on a light ground */
.footer,
.footer p,
.footer li,
.footer a {
    color: var(--text-muted);
}

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

/* ── Feature card numbers ─────────────────────────────────────────
   Were rgba(primary, 0.1): a watermark tuned to sit just above a
   near-black card. On white that is almost nothing, so the numbering
   read as a smudge. Solid primary, with the icon lifted above it.
   ───────────────────────────────────────────────────────────────── */
.solution-number {
    color: var(--primary);
    opacity: 0.9;
    font-size: 3.2rem;
    line-height: 1;
}

.solution-card .solution-icon,
.solution-card h3,
.solution-card p,
.solution-card .solution-features {
    position: relative;
    z-index: 1;
}

/* ── Download button in the final CTA ─────────────────────────────
   background was var(--bg-card) with color:white. The card token is
   white now, so the button rendered as a blank panel with only the
   muted <small> visible. Rebuilt as a proper light card.
   ───────────────────────────────────────────────────────────────── */
.btn-download {
    background: #FFFFFF;
    border: 1.5px solid var(--glass-border);
    color: var(--text-white);
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
    transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.btn-download:hover {
    border-color: var(--primary);
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(16, 185, 129, 0.18);
}

.btn-download strong {
    color: var(--text-white);
}

.btn-download small {
    color: var(--text-muted);
}

/* Icon gets a tinted disc so it reads as an affordance, not clip art */
.btn-download svg,
.btn-download i {
    width: 42px;
    height: 42px;
    padding: 9px;
    border-radius: 12px;
    background: rgba(16, 185, 129, 0.1);
    color: var(--primary);
    flex-shrink: 0;
    box-sizing: border-box;
}

/* ── Portrait hero video (v3) ─────────────────────────────────────
   The v3 clip is 720x1280. The earlier override forced 16/9 for a
   landscape source; that would letterbox this one into thin bars, so
   the frame goes back to 9/16 and the card narrows to suit.
   ───────────────────────────────────────────────────────────────── */
.video-card-wrapper {
    max-width: 420px;
}

.hero-video-element {
    aspect-ratio: 9 / 16;
    object-fit: cover;
}

@media (max-width: 480px) {
    .video-card-wrapper {
        max-width: 100%;
    }
}

/* Price is back on a light card, where `color: white` was invisible */
.pricing-price .amount {
    color: var(--text-white);
}

/* ══════════════════════════════════════════════════════════════════
   FREE TRIAL — HIDDEN ON THE LANDING PAGE
   ------------------------------------------------------------------
   The trial itself is fully built and live in the product: the
   User.isTrial / trialEndsAt columns, the expiry gate across the panel,
   mobile and Electron, and the admin controls on the Clients page all
   remain untouched. Only the marketing of it is hidden here.

   The markup is deliberately left in place and tagged .trial-only, so
   bringing the offer back means DELETING THIS ONE RULE — no hunting
   through the page for pieces to re-add.

   Hidden: hero pill, offer-card banner, both trial CTA buttons, the FAQ
   entry, and the trial line in the final CTA note.

   Not hidden: the floating button, which is the page's primary
   always-visible CTA. It reverted to the download wording instead,
   since hiding it would leave the page with no persistent call to
   action at all.
   ══════════════════════════════════════════════════════════════════ */
.trial-only {
    display: none !important;
}

/* ── Hero headline sized for a sentence ───────────────────────────
   The original size was tuned for a five-word line. The current
   headline is a full sentence; at that size it filled the whole fold
   on desktop and pushed the video and CTA below it. Scaled down and
   given a tighter line-height so it lands in three lines and the
   video still sits above the fold.
   ───────────────────────────────────────────────────────────────── */
.hero-title {
    font-size: clamp(1.45rem, 3vw, 2.7rem);
    line-height: 1.4;
    max-width: 34ch;
    margin-inline: auto;
    text-wrap: balance;
}

@media (max-width: 768px) {
    .hero-title {
        font-size: clamp(1.25rem, 5.4vw, 1.7rem);
        max-width: none;
    }
}

/* ── Hero spacing ─────────────────────────────────────────────────
   .hero carried `padding: 150px 0 100px` AND `min-height: 100vh`, so
   it always filled a whole screen no matter how little was in it —
   the headline and video ended up floating in a large empty band.
   Height now follows the content, with padding that scales down on
   small screens instead of holding a fixed 150px.
   ───────────────────────────────────────────────────────────────── */
.hero {
    min-height: 0;
    padding: clamp(28px, 6vw, 70px) 0 clamp(24px, 4vw, 48px);
}

.hero-title {
    margin-bottom: 0.9rem;
}

.hero-subtitle {
    margin-bottom: 1.2rem;
}

/* The video sat in its own large margin on top of the hero padding */
.video-card-wrapper {
    margin-top: 1.6rem;
    margin-bottom: 1.6rem;
}

/* ── Hero headline: full width, aligned left ──────────────────────
   Was centred inside a 900px column with 2rem of container padding
   and a 34ch measure on the title, which forced short stacked lines.
   Those three constraints are lifted so the sentence uses the width
   it has.
   ───────────────────────────────────────────────────────────────── */
.hero .container {
    padding-inline: clamp(0.75rem, 1.6vw, 1.25rem);
}

/* Right, not left: this is an RTL page, so left-aligning put the ragged
   edge on the side the reader starts from and left a dead gap there.
   Aligned right, lines begin flush at the reading edge and the space is
   used. */
.hero-centered {
    text-align: right;
    max-width: none;
    align-items: stretch;
}

.hero-title,
.hero-subtitle {
    max-width: none;
    margin-inline: 0;
    text-align: right;
}

/* The video and the stats row stay centred; only the text moved. */
.hero-centered .video-card-wrapper {
    margin-inline: auto;
}

.hero-stats {
    justify-content: center;
}

/* ── Fill the ragged edge on the hero text ────────────────────────
   Right-aligned lines left white space down the opposite side,
   because the mixed Latin runs ("Ecom", "80%") break the Arabic into
   uneven lines. Justifying stretches every line but the last edge to
   edge; text-align-last keeps that final line on the reading side
   rather than stretching it into gaps.
   ───────────────────────────────────────────────────────────────── */
/* Justify was tried here and removed: with only three or four words per
   line it tore the word spacing apart, which looked worse than the
   ragged edge it fixed. Smaller type on phones packs more words per
   line instead, so the block fills out on its own. */
@media (max-width: 768px) {
    .hero-title {
        font-size: clamp(1.05rem, 4.6vw, 1.4rem);
        line-height: 1.5;
        word-spacing: -0.02em;
    }

    .hero-subtitle {
        font-size: 0.95rem;
        line-height: 1.75;
    }
}

/* ── Floating CTA stack ───────────────────────────────────────────
   The download button sits under the WhatsApp one, both fixed.

   .download-fixed positioned itself with `fixed` + translateX(-50%),
   and its bounce keyframes repeat that translate on every frame. As a
   flex child that shifts it half its own width sideways and drags the
   stack off-centre, so centring moves to the wrapper and the bounce is
   replaced with a vertical-only one.
   ───────────────────────────────────────────────────────────────── */
@keyframes cta-bounce-y {
    0%,
    100% { transform: translateY(0); }
    50%  { transform: translateY(-8px); }
}

.fixed-cta-stack {
    position: fixed;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    width: min(420px, calc(100vw - 24px));
}

.fixed-cta-stack .download-fixed,
.fixed-cta-stack .download-fixed:nth-of-type(2) {
    position: static;
    left: auto;
    bottom: auto;
    width: 100%;
    justify-content: center;
    animation: cta-bounce-y 2s ease-in-out infinite;
}




@media (max-width: 480px) {
    .fixed-cta-stack .download-fixed {
        font-size: 0.9rem;
        padding: 0.8rem 1rem;
    }

}

/* ── Offer-card CTA pair, equal height ────────────────────────────
   Both buttons already share every style property; they rendered at
   different heights only because the WhatsApp label wraps to two lines
   and the download label does not. `grid-auto-rows: 1fr` sizes every
   row to the tallest, so the pair matches without hardcoding a height
   that would break when the copy changes.
   ───────────────────────────────────────────────────────────────── */
.pricing-cta {
    display: grid;
    grid-auto-rows: 1fr;
    gap: 0.7rem;
}

.pricing-cta > a {
    margin: 0;
}

/* ── Floating stack: WhatsApp request pill hidden ─────────────────
   The floating CTA now offers the direct download only. The pill keeps
   its markup and is tagged .cta-wa-request, so bringing it back is
   deleting this rule.

   The offer card, the nav and the final CTA still offer the WhatsApp
   route, so that path is not lost from the page.
   ───────────────────────────────────────────────────────────────── */
.cta-wa-request {
    display: none !important;
}

/* ── Ads VAT section ──────────────────────────────────────────────
   Explains the 20% TVA Meta adds to ads in Morocco and the live
   calculator that shows a visitor their own VAT cost.
   ───────────────────────────────────────────────────────────────── */
.ads-vat-section {
    padding: 60px 0;
}

.ads-vat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 2.5rem;
}

.ads-vat-card {
    position: relative;
    background: var(--bg-card);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 24px;
    padding: 2.5rem;
    box-shadow: var(--shadow-lg);
}

.ads-vat-card.is-solution {
    border-color: rgba(16, 185, 129, 0.4);
}

.ads-vat-card h3 {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.5rem;
    font-weight: 900;
    margin-bottom: 1.5rem;
}

.ads-vat-card h3 svg {
    color: var(--primary);
    flex-shrink: 0;
}

.ads-vat-input {
    display: grid;
    gap: 0.6rem;
    margin-bottom: 1rem;
    font-weight: 700;
    color: var(--text-muted);
}

.ads-vat-input-box {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    direction: ltr;
    background: var(--bg-dark, rgba(0, 0, 0, 0.2));
    border: 2px solid var(--glass-border);
    border-radius: 14px;
    padding: 0.4rem 1rem;
    transition: border-color 0.2s;
}

.ads-vat-input-box:focus-within {
    border-color: var(--primary);
}

.ads-vat-input-box input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    color: inherit;
    font: inherit;
    font-size: 1.6rem;
    font-weight: 900;
}

.ads-vat-input-box em {
    font-style: normal;
    font-weight: 800;
}

.ads-vat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.9rem 0;
    border-bottom: 1px dashed var(--glass-border);
    font-size: 1.15rem;
}

.ads-vat-row strong {
    direction: ltr;
    white-space: nowrap;
}

.ads-vat-row.is-tax strong {
    color: #ef4444;
}

.ads-vat-row.is-total {
    border-bottom: none;
    font-size: 1.35rem;
    font-weight: 900;
}

.ads-vat-note {
    margin-top: 1rem;
    padding: 1rem 1.2rem;
    background: rgba(239, 68, 68, 0.08);
    border-radius: 14px;
    color: var(--text-muted);
}

.ads-vat-list {
    list-style: none;
    display: grid;
    gap: 0.9rem;
    margin-bottom: 1.8rem;
}

.ads-vat-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 1.1rem;
}

.ads-vat-list li svg {
    color: var(--primary);
    flex-shrink: 0;
    margin-top: 0.3rem;
}

.ads-vat-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

@media (max-width: 768px) {
    .ads-vat-grid {
        grid-template-columns: 1fr;
    }

    .ads-vat-card {
        padding: 1.8rem 1.2rem;
    }

    .ads-vat-section .section-tag {
        font-size: 1rem;
        padding: 0.5rem 1.2rem;
        letter-spacing: 0;
    }
}