/* =========================================
   VARIABLES & RESET
   ========================================= */
:root {
    --primary-blue: #2563EB;
    --primary-blue-hover: #1D4ED8;
    --dark-bg: #0A1128;
    /* Fallback gradient in case the image takes time to load */
    --dark-bg-gradient: linear-gradient(135deg, #071126 0%, #0d1b3e 50%, #0d2e5c 100%);
    --whatsapp-green: #25D366;
    --whatsapp-green-hover: #1EBE5A;
    --text-dark: #1E293B;
    --text-light: #64748B;
    --white: #FFFFFF;
    --border-color: #E2E8F0;
    --font-family: 'Inter', sans-serif;
}

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

body {
    font-family: var(--font-family);
    color: var(--text-dark);
    line-height: 1.5;
    background-color: var(--white);
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

.hero-section {
    position: relative;
    background: var(--dark-bg-gradient);
    background-image: url('../assets/background.png');
    background-size: cover;
    background-position: center top;
    color: var(--white);
    padding-bottom: 24px;
    overflow: hidden;
    margin-top: -20px;
}

/* =========================================
   STICKY SITE HEADER / NAVBAR
   ========================================= */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
    background: var(--dark-bg-gradient);
    /* background-color: rgba(9, 24, 72, 0.716); */
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.site-header.scrolled {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

/* Navbar */
.navbar {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 16px 0;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* Hamburger button (mobile only) */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    padding: 0;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.3s ease, background-color 0.3s ease;
}

.nav-toggle:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

.nav-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background-color: var(--white);
    transition: transform 0.3s ease, opacity 0.2s ease;
}

/* Bars morph into an X when the menu is open */
.nav-toggle.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.nav-toggle.active span:nth-child(2) {
    opacity: 0;
}

.nav-toggle.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.5rem;
    font-weight: 700;
}

.logo-icon {
    width: 140px;
    height: auto;
    /* background-color: var(--white); */
    border-radius: 6px;
    position: relative;
}

.logo-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 14px;
    height: 14px;
    background-color: var(--primary-blue);
    border-radius: 2px;
}

.nav-links {
    display: flex;
    gap: 32px;
}

.nav-links a {
    font-size: 0.9rem;
    font-weight: 500;
    color: #94A3B8;
    transition: color 0.3s;
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--white);
}

.nav-links a.active {
    border-bottom: 2px solid var(--whatsapp-green);
    padding-bottom: 4px;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    border: none;
}

.btn-primary {
    background-color: var(--primary-blue);
    color: var(--white);
}

.btn-primary:hover {
    background-color: var(--primary-blue-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.35);
}

.btn-whatsapp {
    background-color: var(--whatsapp-green);
    color: var(--white);
}

.btn-whatsapp:hover {
    background-color: var(--whatsapp-green-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(37, 211, 102, 0.35);
}

.whatsapp-float {
    position: fixed;
    right: max(20px, env(safe-area-inset-right));
    bottom: max(20px, env(safe-area-inset-bottom));
    z-index: 1001;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background-color: var(--whatsapp-green);
    color: var(--white);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.whatsapp-float::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    border-radius: inherit;
    background: var(--whatsapp-green);
    content: "";
    animation: whatsapp-pulse 2.4s ease-out infinite;
}

.whatsapp-float svg {
    position: relative;
    z-index: 1;
    width: 34px;
    height: 34px;
    fill: currentColor;
    animation: whatsapp-icon-nudge 4.8s ease-in-out 1s infinite;
}

@keyframes whatsapp-pulse {
    0% {
        opacity: 0.55;
        transform: scale(1);
    }
    70%, 100% {
        opacity: 0;
        transform: scale(1.65);
    }
}

@keyframes whatsapp-icon-nudge {
    0%, 88%, 100% {
        transform: rotate(0) scale(1);
    }
    92% {
        transform: rotate(-8deg) scale(1.08);
    }
    96% {
        transform: rotate(8deg) scale(1.08);
    }
}

.whatsapp-float:hover {
    background-color: var(--whatsapp-green-hover);
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
}

.whatsapp-float:focus-visible {
    outline: 3px solid var(--white);
    outline-offset: 3px;
}

.btn-outline {
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--white);
}

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

/* Press-down feedback, matching .submit-btn/.refresh-btn */
.btn:active {
    transform: translateY(0);
}

/* Hero Content */
.hero-content {
    text-align: center;
    width: min(100%, 800px);
    max-width: 800px;
    margin: clamp(24px, 3vw, 40px) auto 0;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: rgba(37, 211, 102, 0.1);
    border: 1px solid rgba(37, 211, 102, 0.3);
    color: #A7F3D0;
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 0.85rem;
    margin-bottom: 24px;
}

.hero-content h1 {
    font-size: clamp(2.5rem, 4.2vw, 3.75rem);
    line-height: 1.1;
    font-weight: 800;
    margin-bottom: 20px;
    letter-spacing: -0.02em;
}

.hero-content h1 .highlight {
    color: #2DD4BF;
}

.subtitle {
    font-size: 1.15rem;
    color: #94A3B8;
    margin-bottom: 25px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.cta-group {
    display: flex;
    justify-content: center;
    gap: 16px;
}

/* =========================================
   HERO VISUALS (Image Based Layout)
   ========================================= */
/* .hero-visuals {
    position: absolute;
    left: 50%;
    bottom: 0;
    translate: -50% 0;
    width: min(100%, 1320px);
    height: clamp(360px, 32vw, 420px);
} */
.hero-visuals {
    position: relative;
    width: 100%;
    max-width: 1400px;
    height: clamp(320px, 36vw, 430px);
    margin: clamp(24px, 3vw, 40px) auto 0;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    pointer-events: none;
}

.hero-art {
    position: absolute;
    bottom: 0;
    display: block;
    line-height: 0;
}

.hero-art-image {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 18px 28px rgba(0, 8, 35, 0.35));
}

/* .hero-art-left {
    z-index: 3;
    left: 0;
    width: clamp(230px, 26%, 350px);
    animation: hero-art-left-in 1.15s cubic-bezier(0.16, 1, 0.3, 1) 0.45s both;
} */

/* .hero-art-center {
    z-index: 2;
    left: 50%;
    width: min(62%, 820px);
    translate: -50% 0;
    animation: hero-art-center-in 1.35s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
} */

.hero-art-right {
    z-index: 3;
    right: 0;
    width: 23%;
    animation: hero-art-right-in 1.15s cubic-bezier(0.16, 1, 0.3, 1) 0.65s both;
}

/* .hero-art-left .hero-art-image {
    margin-bottom: 5rem;
    height: 20rem;
    width: 21rem;
    animation: hero-art-float 1.5s ease-in-out 5.7s infinite;
} */
 .hero-art-left .hero-art-image {
    margin-bottom: 5rem;
    height: auto; /* Maintain aspect ratio */
    width: 100%; /* Take full width of its parent */
    max-width: 350px; /* Limit max size */
    animation: hero-art-float 1.5s ease-in-out 5.7s infinite;
}

/* Also adjust the parent container */
.hero-art-left {
    z-index: 3;
    left: 0;
    width: 23%;
    animation: hero-art-left-in 1.15s cubic-bezier(0.16, 1, 0.3, 1) 0.45s both;
}

/* .hero-art-center .hero-art-image {
    animation: hero-art-float 1.5s ease-in-out 5.7s infinite;
    margin-left: 4rem;
    height: 40rem;
    width: 58rem;
} */
.hero-art-center .hero-art-image {
    animation: hero-art-float 1.5s ease-in-out 5.7s infinite;
    margin-left: 0; /* Remove fixed margin */
    height: auto; /* Maintain aspect ratio */
    width: 100%; /* Take full width of its parent */
    max-width: 920px; /* Keep the dashboard prominent on wide screens */
}

/* Also adjust the parent container for the center image */
.hero-art-center {
    z-index: 2;
    left: 60%;
    translate: -50% 0;
    width: min(84%, 920px);
    max-width: 920px;
    height: auto; /* Let height adjust based on content */
    animation: hero-art-center-in 1.35s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}

.hero-art-right .hero-art-image {
    margin-bottom: 5rem;
    animation: hero-art-float 1.5s ease-in-out 5.7s infinite;
}

.hero-content .badge,
.hero-content h1,
.hero-content .subtitle,
.hero-content .cta-group {
    animation: hero-copy-in 0.8s cubic-bezier(0.2, 0.75, 0.25, 1) both;
}

.hero-content h1 {
    animation-delay: 0.12s;
}

.hero-content .subtitle {
    animation-delay: 0.24s;
}

.hero-content .cta-group {
    animation-delay: 0.36s;
}

@keyframes hero-copy-in {
    from {
        opacity: 0;
        transform: translateY(28px);
    }

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

@keyframes hero-art-center-in {
    from {
        opacity: 0;
        transform: translateY(90px) scale(0.76);
    }

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

@keyframes hero-art-left-in {
    from {
        opacity: 0;
        transform: translate(-95px, 45px) rotate(-9deg) scale(0.78);
    }

    to {
        opacity: 1;
        transform: translate(0, 0) rotate(0) scale(1);
    }
}

@keyframes hero-art-right-in {
    from {
        opacity: 0;
        transform: translate(95px, 45px) rotate(9deg) scale(0.78);
    }

    to {
        opacity: 1;
        transform: translate(0, 0) rotate(0) scale(1);
    }
}

@keyframes hero-art-float {

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

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


/* =========================================
   FEATURES SECTION
   ========================================= */
.features-section {
    padding: 65px 0;
    /* Soft gray/blue gradient background */
    background: linear-gradient(180deg, #F8FAFC 0%, #F1F5F9 100%);
    position: relative;
    overflow: hidden;
}

/* Optional: Subtle vertical lines to mimic the background in the image */
.features-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: repeating-linear-gradient(90deg,
            transparent,
            transparent 100px,
            rgba(226, 232, 240, 0.4) 100px,
            rgba(226, 232, 240, 0.4) 101px);
    pointer-events: none;
    z-index: 0;
}

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

.section-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px;
}

.section-badge {
    display: inline-block;
    background: #ECFDF5;
    /* Light green */
    color: #059669;
    /* Dark green */
    border: 1px solid #A7F3D0;
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 16px;
}

.section-header h2 {
    font-size: 2.8rem;
    font-weight: 800;
    color: var(--dark-bg);
    margin-bottom: 16px;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.section-header h2 .highlight-text {
    color: #0EA5E9;
    /* Bright cyan/blue */
}

.section-header p {
    color: var(--text-light);
    font-size: 1.05rem;
}

/* Features Grid */
.features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.feature-card {
    background: var(--white);
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 28px 24px;
    transition: transform 0.3s, box-shadow 0.3s;
    display: flex;
    flex-direction: column;
    position: relative;
    /* Subtle green bottom border */
    border-bottom: 3px solid #14B8A6;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px -1px rgba(0, 0, 0, 0.02);
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

/* The number in the top right corner */
.feature-number {
    position: absolute;
    top: 20px;
    right: 24px;
    font-size: 0.85rem;
    font-weight: 700;
    color: #94A3B8;
}

/* Circular background for the icons */
.feature-icon-wrapper {
    width: 80px;
    height: 80px;
    background: #EFF6FF;
    /* Light blue circle */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}

.feature-icon-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.feature-card h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--dark-bg);
}

.feature-card p {
    font-size: 0.9rem;
    color: var(--text-light);
    line-height: 1.6;
    margin: 0;
}

/* --- Highlighted Card (First one) --- */
.feature-card.highlight {
    background: var(--primary-blue);
    border-color: var(--primary-blue);
    border-bottom-color: #14B8A6;
    /* Keep the green bottom border */
    color: var(--white);
    box-shadow: 0 20px 25px -5px rgba(37, 99, 235, 0.3);
}

.feature-card.highlight .feature-number {
    color: rgba(255, 255, 255, 0.7);
}

.feature-card.highlight .feature-icon-wrapper {
    /* Slightly transparent white circle for the highlighted card */
    background: rgba(255, 255, 255, 0.2);
}

.feature-card.highlight h3,
.feature-card.highlight p {
    color: var(--white);
}

/* New Bottom Text Row */
.features-footer {
    text-align: center;
    margin-top: 50px;
    font-size: 0.85rem;
    color: var(--text-light);
    font-weight: 500;
}

.features-footer span {
    margin: 0 4px;
}

/* =========================================
   RESPONSIVE DESIGN
   ========================================= */
@media (max-width: 1024px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .nav-toggle {
        display: flex;
    }

    .navbar .nav-links {
        position: absolute;
        top: calc(100% + 10px);
        left: 0;
        right: 0;
        flex-direction: column;
        gap: 0;
        padding: 8px 0;
        background-color: #0A1128;
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 14px;
        box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-10px);
        transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
    }

    .navbar.menu-open .nav-links {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }

    .navbar .nav-links li a {
        display: block;
        padding: 12px 20px;
        font-size: 0.95rem;
    }

    .navbar .nav-links a.active {
        color: var(--white);
        border-bottom: none;
        border-left: 3px solid var(--whatsapp-green);
        padding-left: 17px;
    }
}

@media (max-width: 768px) {
    .hero-section {
        background-image: url('../assets/background-mobile.png');
        background-size: cover;
        background-position: center bottom;
        min-height: 100vh;
        padding-bottom: 60px;
    }

    .nav-toggle {
        display: flex;
    }

    .navbar {
        padding: 12px 0;
    }

    .logo-icon {
        width: 110px;
    }

    .nav-actions {
        gap: 10px;
    }

    .nav-actions .btn-primary {
        padding: 10px 16px;
        font-size: 0.8rem;
    }

    /* Nav links collapse into a dropdown panel */
    .navbar .nav-links {
        position: absolute;
        top: calc(100% + 10px);
        left: 0;
        right: 0;
        flex-direction: column;
        gap: 0;
        padding: 8px 0;
        background-color: #0A1128;
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 14px;
        box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-10px);
        transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
    }

    .navbar.menu-open .nav-links {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }

    .navbar .nav-links li a {
        display: block;
        padding: 12px 20px;
        font-size: 0.95rem;
    }

    .navbar .nav-links a.active {
        color: var(--white);
        border-bottom: none;
        border-left: 3px solid var(--whatsapp-green);
        padding-left: 17px;
    }

    .hero-content h1 {
        font-size: 1.8rem;
    }

    .subtitle {
        font-size: 0.9rem;
        margin-bottom: 30px;
    }

    .cta-group {
        flex-direction: column;
        align-items: center;
    }

    .cta-group .btn {
        width: 100%;
        max-width: 280px;
    }

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

    .hero-visuals {
        display: none;
    }

    .section-header h2 {
        font-size: 2rem;
    }
}


/* =========================================
   HOW IT WORKS SECTION
   ========================================= */
.how-it-works-section {
    padding: 70px 0;
    background-color: #F8FAFC;
    /* Light gray background */
}

.how-it-works-badge {
    background: #EFF6FF;
    /* Light blue */
    color: #2563EB;
    /* Primary blue */
    border: 1px solid #BFDBFE;
}

.how-it-works-section .section-header h2 {
    font-size: 2.8rem;
    line-height: 1.2;
    margin-bottom: 20px;
}

.how-it-works-section .highlight-text {
    color: #0EA5E9;
    /* Cyan highlight */
}

.how-it-works-section .section-header p {
    font-size: 1.05rem;
    color: var(--text-light);
    margin-bottom: 8px;
}

.urdu-text {
    font-size: 1.1rem;
    color: #94A3B8;
    font-weight: 500;
}

/* --- Comparison Grid (Top Row) --- */
.comparison-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 60px;
}

.comparison-card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s, box-shadow 0.3s;
}

.comparison-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.14);
}

.comparison-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.comparison-card:hover .comparison-img {
    transform: scale(1.03);
    /* Subtle zoom, clipped by the card's rounded corners */
}

/* Badges (Without / With) */
.comparison-badge {
    position: absolute;
    top: 20px;
    left: 20px;
    padding: 8px 16px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--white);
    z-index: 2;
}

.comparison-badge.without {
    background: rgba(220, 38, 38, 0.8);
    /* Red */
    backdrop-filter: blur(4px);
}

.comparison-badge.with {
    background: rgba(5, 150, 105, 0.8);
    /* Green */
    backdrop-filter: blur(4px);
}

/* Footer Labels (Error / Success) */
.comparison-footer {
    position: absolute;
    bottom: 20px;
    left: 20px;
    background: var(--white);
    padding: 10px 20px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-dark);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    z-index: 2;
}

.status-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 0.7rem;
}

.status-icon.error {
    background: #DC2626;
}

.status-icon.success {
    background: #059669;
}

/* Checklist Overlay (With FinSmart) */
.checklist-overlay {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding: 20px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    z-index: 2;
}

.checklist-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-dark);
}

.check-icon {
    width: 18px;
    height: 18px;
    background: #059669;
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
}

/* --- Steps Grid (Bottom Row) --- */
.steps-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}

.step-card {
    background: var(--white);
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 30px 20px;
    text-align: center;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.3s, box-shadow 0.3s;
}

.step-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}

/* Step Number Circle */
.step-number {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 30px;
    background: #2563EB;
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    border: 3px solid var(--white);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Icon Circle */
.step-icon-wrapper {
    width: 70px;
    height: 70px;
    background: #F8FAFC;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    border: 1px solid #E2E8F0;
}

.step-icon-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.step-card h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--dark-bg);
    margin-bottom: 8px;
}

.step-card p {
    font-size: 0.8rem;
    color: var(--text-light);
    line-height: 1.5;
}

/* Step Arrows (The little blue arrows between cards) */
.step-arrow {
    position: absolute;
    right: -23px;
    top: 50%;
    transform: translateY(-50%);
    color: #2563EB;
    font-size: 1.5rem;
    font-weight: bold;
    z-index: 10;
}

/* Hide arrow on the last card */
.step-card:last-child .step-arrow {
    display: none;
}

/* Highlighted Step 5 (Green) */
.step-card.highlight-step {
    background: #ECFDF5;
    /* Light green */
    border-color: #A7F3D0;
}

.step-card.highlight-step .step-number {
    background: #059669;
    /* Dark green */
}

.step-card.highlight-step .step-icon-wrapper {
    background: transparent;
    border: none;
}

.step-card.highlight-step .step-icon-img {
    width: 70px;
    /* Make the checkmark icon larger */
    height: 70px;
}

/* =========================================
   RESPONSIVE DESIGN FOR HOW IT WORKS
   ========================================= */
@media (max-width: 1024px) {
    .comparison-grid {
        grid-template-columns: 1fr;
    }

    .steps-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
    }

    /* Hide arrows on tablet */
    .step-arrow {
        display: none;
    }

}

@media (max-width: 768px) {
    .steps-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .checklist-overlay {
        position: relative;
        top: 0;
        right: 0;
        transform: none;
        margin: 20px;
        width: calc(100% - 40px);
    }

    .how-it-works-section .section-header h2 {
        font-size: 2rem;
    }
}


/* =========================================
   HOW IT WORKS SECTION (DARK THEME)
   ========================================= */
.how-it-works-dark {
    /* Dark blue gradient background */
    /* background: linear-gradient(180deg, #0A1128 0%, #06586598 100%); */
    background: var(--dark-bg-gradient);
    padding: 80px 0;
    color: var(--white);
    position: relative;
    overflow: hidden;
}

/* Optional: Subtle glowing orb in the background */
.how-it-works-dark::before {
    content: '';
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(56, 189, 248, 0.1) 0%, transparent 70%);
    pointer-events: none;
}

.section-header-dark {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 60px;
    position: relative;
    z-index: 1;
}

.section-badge-dark {
    display: inline-block;
    background: rgba(14, 165, 233, 0.1);
    color: #38BDF8;
    border: 1px solid rgba(56, 189, 248, 0.3);
    padding: 6px 20px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 20px;
}

.section-header-dark h2 {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 16px;
    letter-spacing: -0.02em;
}

.gradient-text {
    /* Cyan to Blue gradient text */
    background: linear-gradient(90deg, #2DD4BF 0%, #3B82F6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.section-header-dark p {
    color: #94A3B8;
    font-size: 1.05rem;
    margin-bottom: 6px;
}

.urdu-text-dark {
    font-size: 1rem;
    color: #64748B !important;
    font-weight: 500;
}

/* --- Steps Wrapper --- */
.steps-wrapper-dark {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 16px;
    position: relative;
    z-index: 1;
}

/* --- Individual Step Card --- */
.step-card-dark {
    flex: 1;
    background: rgba(15, 23, 42, 0.6);
    /* Dark semi-transparent */
    border: 1px solid rgba(56, 189, 248, 0.2);
    border-radius: 16px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    backdrop-filter: blur(10px);
    /* Anchors the hover success badge to each card */
    position: relative;
    transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}

.step-card-dark:hover {
    transform: translateY(-5px);
    border-color: #2DD4BF;
    box-shadow: 0 0 30px rgba(45, 212, 191, 0.15), inset 0 0 20px rgba(45, 212, 191, 0.05);
}

/* Step Header (Number + Icon) */
.step-header-dark {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
}

.step-number-dark {
    font-size: 4rem;
    font-weight: 800;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 2px #38BDF8;
    /* Outline effect */
    opacity: 0.8;
    transition: color 0.3s, -webkit-text-stroke 0.3s, text-shadow 0.3s, opacity 0.3s;
}

.step-icon-dark img {
    width: 95px;
    height: 64px;
    object-fit: contain;
    /* Optional: Add a glow to the icon */
    filter: drop-shadow(0 0 10px rgba(56, 189, 248, 0.4));
}

.step-card-dark h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--white);
    line-height: 1.3;
}

.step-card-dark p {
    font-size: 0.9rem;
    color: #94A3B8;
    line-height: 1.6;
    margin-bottom: 24px;
    flex-grow: 1;
}

/* Divider Line */
.step-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin-bottom: 20px;
}

/* You / FinSmart Action List */
.step-action-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}

.action-row {
    display: flex;
    font-size: 0.85rem;
}

.action-label {
    font-weight: 700;
    width: 80px;
    flex-shrink: 0;
}

.action-label.you {
    color: #38BDF8;
}

/* Blue */
.action-label.finsmart {
    color: #2DD4BF;
}

/* Cyan/Green */

.action-desc {
    color: #CBD5E1;
    line-height: 1.4;
}

/* Bottom Badge (e.g., "Sandbox first") */
.step-badge-dark {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(45, 212, 191, 0.1);
    border: 1px solid rgba(45, 212, 191, 0.3);
    color: #2DD4BF;
    padding: 8px 16px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 600;
    width: fit-content;
    margin-top: auto;
    /* Pushes to bottom */
}

.badge-check {
    background: #2DD4BF;
    color: #0A1128;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    font-weight: bold;
}

/* --- Arrows Between Cards --- */
.step-arrow-dark {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #38BDF8;
    font-size: 2rem;
    opacity: 0.6;
    flex-shrink: 0;
}

/* --- Success badge (revealed on card hover) --- */
.top-success-badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    background: #2DD4BF;
    color: #0A1128;
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 4px 10px rgba(45, 212, 191, 0.4);
    /* Revealed only while its own card is hovered / focused */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}

.step-card-dark:hover .top-success-badge,
.step-card-dark:focus-within .top-success-badge {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* The step number fills in (solid teal) on hover */
.step-card-dark:hover .step-number-dark {
    color: #2DD4BF;
    -webkit-text-stroke: 2px #2DD4BF;
    opacity: 1;
    text-shadow: 0 0 24px rgba(45, 212, 191, 0.45);
}

/* Bottom badge picks up the stronger success look on hover */
.step-card-dark:hover .step-badge-dark {
    background: rgba(45, 212, 191, 0.2);
    border-color: #2DD4BF;
}

/* --- Bottom Features Bar --- */
.bottom-features-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    margin-top: 60px;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50px;
    padding: 16px 40px;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    backdrop-filter: blur(10px);
}

.bar-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--white);
}

.bar-check {
    background: #2DD4BF;
    color: #0A1128;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: bold;
}

.bar-divider {
    width: 1px;
    height: 20px;
    background: rgba(255, 255, 255, 0.2);
}


/* =========================================
   RESPONSIVE DESIGN FOR HOW IT WORKS DARK
   ========================================= */
@media (max-width: 1024px) {
    .steps-wrapper-dark {
        flex-direction: column;
        gap: 30px;
    }

    .step-arrow-dark {
        transform: rotate(90deg);
        margin: -10px 0;
    }

    /* Stacked cards: the badge drops into normal flow instead of straddling the top edge.
       Hidden by default (takes no space), and revealed on hover/tap via display. */
    .top-success-badge {
        position: static;
        top: auto;
        left: auto;
        transform: none;
        display: none;
        align-self: flex-start;
        white-space: normal;
        margin-bottom: 16px;
    }

    .step-card-dark:hover .top-success-badge,
    .step-card-dark:focus-within .top-success-badge {
        display: inline-block;
        transform: none;
    }

    .bottom-features-bar {
        flex-direction: column;
        border-radius: 20px;
        padding: 20px;
        gap: 15px;
        width: 100%;
    }

    .bar-divider {
        width: 100%;
        height: 1px;
    }
}

@media (max-width: 768px) {
    .section-header-dark h2 {
        font-size: 2.2rem;
    }

    .step-header-dark {
        /* flex-direction: column-reverse; */
        align-items: flex-start;
        gap: 16px;
    }

    .step-number-dark {
        font-size: 3rem;
    }

    .action-row {
        flex-direction: column;
        gap: 4px;
    }

    .action-label {
        width: auto;
    }
}




/* =========================================
   INDUSTRIES SECTION
   ========================================= */
.industries-section {
    padding: 80px 0;
    background-color: #F8FAFC;
    /* Very light gray/blue background */
}

.section-header-industries {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 60px;
}

.section-badge-industries {
    display: inline-block;
    background: #EFF6FF;
    /* Light blue */
    color: #2563EB;
    /* Primary blue */
    border: 1px solid #BFDBFE;
    padding: 6px 20px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 20px;
}

.section-header-industries h2 {
    font-size: 2.8rem;
    font-weight: 800;
    color: var(--dark-bg);
    margin-bottom: 16px;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.gradient-text-industries {
    /* Gradient from blue to cyan */
    background: linear-gradient(90deg, #2563EB 0%, #06B6D4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.section-header-industries p {
    color: var(--text-light);
    font-size: 1.05rem;
}

/* --- Industries Grid --- */
.industries-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* --- Industry Card --- */
.industry-card {
    background: var(--white);
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02);
}

.industry-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
}

/* Image Wrapper */
.industry-image-wrapper {
    position: relative;
    height: 200px;
    overflow: hidden;
}

.industry-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.industry-card:hover .industry-img {
    transform: scale(1.05);
    /* Subtle zoom on hover */
}

/* Floating Badge on Image */
.industry-badge {
    position: absolute;
    bottom: 16px;
    left: 16px;
    background: var(--white);
    padding: 8px 16px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--dark-bg);
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.badge-icon {
    font-size: 1rem;
}

/* Content Area */
.industry-content {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.industry-content h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--dark-bg);
    margin-bottom: 12px;
}

.industry-content p {
    font-size: 0.9rem;
    color: var(--text-light);
    line-height: 1.6;
    margin-bottom: 24px;
    flex-grow: 1;
}

.industry-content strong {
    color: var(--dark-bg);
    font-weight: 700;
}

/* Feature Tags (Pills) */
.industry-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
}

.industry-tags span {
    background: #F0F9FF;
    /* Very light blue */
    color: #0369A1;
    /* Dark blue text */
    border: 1px solid #E0F2FE;
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Bottom Footer Text */
.industries-footer-text {
    text-align: center;
    margin-top: 50px;
}

.industries-footer-text p {
    color: var(--text-light);
    font-size: 0.95rem;
}

/* =========================================
   RESPONSIVE DESIGN FOR INDUSTRIES
   ========================================= */
@media (max-width: 1024px) {
    .industries-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .section-header-industries h2 {
        font-size: 2.4rem;
    }
}

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

    .section-header-industries h2 {
        font-size: 2rem;
    }

    .industry-image-wrapper {
        height: 180px;
    }
}




/* =========================================
   RESULTS & TRUST SECTION (Light Top Half)
   ========================================= */
.results-section {
    padding: 70px 0 120px 0;
    /* background-color: #F8FAFC; */
    /* Light background */
    position: relative;
    z-index: 1;
}

.section-header-results {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 60px;
}

.section-badge-results {
    display: inline-block;
    background: #EFF6FF;
    color: #2563EB;
    border: 1px solid #BFDBFE;
    padding: 6px 20px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 20px;
}

.section-header-results h2 {
    font-size: 2.8rem;
    font-weight: 800;
    color: var(--dark-bg);
    margin-bottom: 16px;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.gradient-text-results {
    background: linear-gradient(90deg, #2563EB 0%, #06B6D4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.section-header-results p {
    color: var(--text-light);
    font-size: 1.05rem;
}

/* Layout Grid */
.results-layout {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    /* Image takes 1/3, cards take 2/3 */
    gap: 30px;
}

/* Left Image Container */
.results-image-container {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.results-main-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Floating Badges */
.floating-badge {
    position: absolute;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    padding: 10px 16px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--dark-bg);
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    z-index: 2;
}

.floating-badge.top-left {
    top: 20px;
    left: 20px;
}

.floating-badge.bottom-right {
    bottom: 20px;
    right: 20px;
}

.badge-check-blue {
    background: #2563EB;
    color: white;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
}

/* Right Side: 6 Feature Cards Grid */
.results-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.result-card {
    background: var(--white);
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 24px;
    transition: transform 0.3s, box-shadow 0.3s;
}

.result-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

.result-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
}

.result-number {
    font-size: 0.9rem;
    font-weight: 700;
    color: #2563EB;
    background: #EFF6FF;
    padding: 4px 8px;
    border-radius: 6px;
}

.result-icon-wrapper {
    width: 63px;
    height: 60px;
}

.result-icon-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.result-card h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--dark-bg);
    margin-bottom: 8px;
}

.result-card p {
    font-size: 0.85rem;
    color: var(--text-light);
    line-height: 1.5;
}


/* =========================================
   SECURITY SECTION (Dark Bottom Half)
   ========================================= */
.security-section {
    /* Dark background with subtle vertical lines */
    /* background: #0A1128;
    background-image: 
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(180deg, #0A1128 0%, #071126 100%); */
    /* background: url('../assets/result-background.png');
    background-size: 100px 100%, 100% 100%;

    background-size: 100% auto;
    background-position: center top;
    background-repeat: no-repeat;
    object-fit: contain;
    height: 100%;
    width: 100%; */

    /* padding: 120px 0; */
    color: var(--white);
    /* position: relative;
    border-radius: 50px 50px 0 0;
    z-index: 2;
    overflow: hidden; */
    padding: 17rem 0 35px;
}

.secure-section-bottom {
    background: url('../assets/result-background.png');
    /* background-size: 100px 100%, 100% 100%; */

    background-size: 100% auto;
    /* background-position: center top; */
    background-repeat: no-repeat;
    /* object-fit: contain; */
    /* height: 100%; */
    /* width: 100%; */
    margin-top: -18.8rem;
}

/* Add a subtle glow to the background */
.security-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
    /* background: radial-gradient(circle at 20% 50%, rgba(37, 99, 235, 0.15) 0%, transparent 60%); */
    pointer-events: none;
}

.security-section .container {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 60px;
    align-items: center;
    position: relative;
    z-index: 1;
}

.section-badge-security {
    display: inline-block;
    background: rgba(45, 212, 191, 0.1);
    color: #2DD4BF;
    border: 1px solid rgba(45, 212, 191, 0.3);
    padding: 6px 20px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 20px;
}

.security-content h2 {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 10px;
}

.gradient-text-security {
    background: linear-gradient(90deg, #3B82F6 0%, #2DD4BF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.security-subtitle {
    font-size: 1.1rem;
    color: #94A3B8;
    margin-bottom: 40px;
}

/* Security Features Grid */
.security-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.security-box {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(56, 189, 248, 0.15);
    border-radius: 12px;
    padding: 24px;
    display: flex;
    gap: 16px;
    backdrop-filter: blur(10px);
    transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}

.security-box:hover {
    border-color: rgba(56, 189, 248, 0.4);
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(2, 8, 23, 0.45), 0 0 24px rgba(56, 189, 248, 0.12);
}

.security-icon {
    width: 60px;
    height: 70px;
    flex-shrink: 0;
}

.security-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.security-icon img:hover {
    width: 110%;
    height: 130%;
    object-fit: contain;
}



.security-box h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 6px;
}

.security-box p {
    font-size: 0.85rem;
    color: #94A3B8;
    line-height: 1.5;
}


.security-visual {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 10;
}

.shield-img {
    width: 100%;
    max-width: 450px;
    height: auto;
    filter: drop-shadow(0 0 40px rgba(56, 189, 248, 0.3));
    margin-bottom: -90px;

    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
        filter 0.4s ease;

    transform-origin: center center;
}

.shield-img:hover {
    transform: scale(1.1);
    filter: drop-shadow(0 0 60px rgba(56, 189, 248, 0.6));
}


/* =========================================
   RESPONSIVE DESIGN FOR RESULTS & SECURITY
   ========================================= */
@media (max-width: 1024px) {
    .results-layout {
        grid-template-columns: 1fr;
        /* Stack image above cards */
    }

    .results-image-container {
        height: 300px;
    }

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

    .security-section .container {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .security-visual {
        order: -1;
        /* Move shield image to top on tablet */
    }

    .shield-img {
        max-width: 300px;
    }
}

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

    .secure-section-bottom {
        background-image: url('../assets/result-mob-background.png');
        background-size: cover;
        background-position: center top;
    }

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

    .section-header-results h2,
    .security-content h2 {
        font-size: 2.2rem;
    }

    .security-section {
        border-radius: 30px 30px 0 0;
        margin-top: 8rem;
    }

    .shield-img {
        max-width: 36rem;
        margin-bottom: 0.5rem;
    }
}



/* =========================================
   CONTACT SECTION
   ========================================= */
.contact-section {
    padding: 45px 0;
    background-color: #F8FAFC;
    /* Light background */
    /* Optional: subtle grid pattern like the image */
    background-image:
        linear-gradient(rgba(226, 232, 240, 0.5) 1px, transparent 1px),
        linear-gradient(90deg, rgba(226, 232, 240, 0.5) 1px, transparent 1px);
    background-size: 40px 40px;
}

.section-header-contact {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px;
}

.section-badge-contact {
    display: inline-block;
    background: #EFF6FF;
    color: #2563EB;
    border: 1px solid #BFDBFE;
    padding: 6px 20px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 20px;
}

.section-header-contact h2 {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--dark-bg);
    margin-bottom: 16px;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.gradient-text-contact {
    background: linear-gradient(90deg, #2563EB 0%, #06B6D4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.section-header-contact p {
    color: var(--text-light);
    font-size: 1.05rem;
}

/* --- Layout Grid --- */
.contact-layout {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    /* Left column smaller than right */
    gap: 30px;
    align-items: start;
}

/* =========================================
   LEFT COLUMN: CONTACT INFO
   ========================================= */
.contact-info-column {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Dark Blue Card */
.contact-info-card {
    background: linear-gradient(135deg, #0F172A 0%, #1E3A8A 100%);
    border-radius: 16px;
    padding: 40px;
    color: var(--white);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    position: relative;
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
}

.contact-info-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 28px 55px rgba(0, 0, 0, 0.22);
}

/* Subtle glow in the dark card */
.contact-info-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(45, 212, 191, 0.1) 0%, transparent 60%);
    pointer-events: none;
}

.contact-info-card h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 12px;
    position: relative;
}

.info-desc {
    color: #94A3B8;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 32px;
    position: relative;
}

/* Email Support Box */
.email-support-box {
    display: flex;
    align-items: center;
    gap: 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 16px;
    border-radius: 12px;
    margin-bottom: 32px;
    position: relative;
    transition: border-color 0.3s, background-color 0.3s, transform 0.3s;
}

.email-support-box:hover {
    border-color: rgba(45, 212, 191, 0.45);
    background-color: rgba(255, 255, 255, 0.08);
    transform: translateY(-3px);
}

.email-icon-wrapper {
    width: 48px;
    height: 48px;
    background: rgba(45, 212, 191, 0.1);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(45, 212, 191, 0.2);
}

.email-text span {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    color: #94A3B8;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}

.email-text a {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--white);
    transition: color 0.3s;
}

.email-text a:hover {
    color: #2DD4BF;
}

/* Fast Response Box */
.fast-response-box {
    position: relative;
}

.response-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #2DD4BF;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}

.response-header .dot {
    width: 8px;
    height: 8px;
    background: #2DD4BF;
    border-radius: 50%;
    box-shadow: 0 0 10px #2DD4BF;
}

.fast-response-box p {
    color: #CBD5E1;
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Light FBR Compliant Box */
.fbr-compliant-box {
    background: var(--white);
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 24px;
    display: flex;
    gap: 16px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
    transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}

.fbr-compliant-box:hover {
    transform: translateY(-4px);
    border-color: rgba(37, 99, 235, 0.35);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
}

.fbr-icon-wrapper {
    width: 40px;
    height: 40px;
    background: #EFF6FF;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.fbr-compliant-box p {
    font-size: 0.85rem;
    color: var(--text-light);
    line-height: 1.6;
    margin: 0;
}

.fbr-compliant-box strong {
    color: var(--dark-bg);
    font-weight: 700;
}

/* =========================================
   RIGHT COLUMN: CONTACT FORM
   ========================================= */
.contact-form-column {
    background: var(--white);
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border: 1px solid #E2E8F0;
}

.contact-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.contact-form .form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}

.contact-form .form-group label {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--dark-bg);
    margin-bottom: 8px;
}

/* Input Styling */
.contact-form input,
.contact-form select,
.contact-form textarea {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    font-family: var(--font-family);
    font-size: 0.95rem;
    color: var(--dark-bg);
    background: #F8FAFC;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: #94A3B8;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: #2563EB;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
    background: var(--white);
}

/* Security Check Box */
.security-check-box {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 24px;
}

.security-check-box label {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--dark-bg);
    margin-bottom: 12px;
}

.security-input-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.math-question {
    background: var(--white);
    border: 1px solid #E2E8F0;
    padding: 10px 16px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 1rem;
    color: var(--dark-bg);
    white-space: nowrap;
}

.security-input-row input {
    flex: 1;
    padding: 10px 16px;
}

.refresh-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border-radius: 6px;
    transition: background 0.3s;
}

.refresh-btn:hover {
    background: #E2E8F0;
}

/* Submit Button */
.submit-btn {
    width: 100%;
    background: #10B981;
    /* Green */
    color: var(--white);
    border: none;
    padding: 16px;
    border-radius: 8px;
    font-family: var(--font-family);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: background 0.3s, transform 0.2s;
}

.submit-btn:hover {
    background: #059669;
    transform: translateY(-2px);
}

.submit-btn:active {
    transform: translateY(0);
}

.submit-btn:disabled {
    opacity: 0.7;
    cursor: wait;
    transform: none;
}

.contact-form-status {
    min-height: 1.4em;
    margin-top: 12px;
    font-size: 0.9rem;
    line-height: 1.5;
}

.contact-form-status:empty {
    display: none;
}

.contact-form-status[data-state="success"] {
    color: #047857;
}

.contact-form-status[data-state="error"] {
    color: #b91c1c;
}

.contact-form-status[data-state="loading"] {
    color: #475569;
}

.contact-form-honeypot {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* =========================================
   RESPONSIVE DESIGN FOR CONTACT SECTION
   ========================================= */
@media (max-width: 1024px) {
    .contact-layout {
        grid-template-columns: 1fr;
    }

    .section-header-contact h2 {
        font-size: 2.2rem;
    }
}

@media (max-width: 768px) {
    .contact-form .form-row {
        grid-template-columns: 1fr;
    }

    .contact-info-card,
    .contact-form-column {
        padding: 24px;
    }

    .security-input-row {
        flex-wrap: wrap;
    }

    .security-input-row input {
        width: 100%;
        flex: none;
        margin-top: 8px;
    }

    .refresh-btn {
        position: absolute;
        right: 40px;
        margin-top: 8px;
    }
}


/* =========================================
   FAQ SECTION
   ========================================= */
.faq-section {
    padding: 50px 0;
    background-color: #F8FAFC;
    /* Light background */
    /* Subtle vertical lines matching the image */
    background-image: repeating-linear-gradient(90deg,
            transparent,
            transparent 150px,
            rgba(226, 232, 240, 0.4) 150px,
            rgba(226, 232, 240, 0.4) 151px);
}

.section-header-faq {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 60px;
}

.section-badge-faq {
    display: inline-block;
    background: #EFF6FF;
    color: #2563EB;
    border: 1px solid #BFDBFE;
    padding: 6px 20px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 20px;
}

.section-header-faq h2 {
    font-size: 3rem;
    font-weight: 800;
    color: var(--dark-bg);
    margin-bottom: 16px;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.gradient-text-faq {
    background: linear-gradient(90deg, #2563EB 0%, #06B6D4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.section-header-faq p {
    color: var(--text-light);
    font-size: 1.05rem;
    margin-bottom: 6px;
}

.urdu-text-faq {
    font-size: 1rem;
    color: #94A3B8 !important;
    font-weight: 500;
}

/* --- FAQ Container --- */
.faq-container {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* --- Individual FAQ Item --- */
.faq-item {
    background: var(--white);
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02);
}

/* Hover effect for closed items */
.faq-item:not([open]):hover {
    border-color: #CBD5E1;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
}

/* Active/Open State (Matches the first item in your image) */
.faq-item[open] {
    background: #F0F9FF;
    /* Light blue background */
    border-color: #BAE6FD;
    /* Blue border */
    box-shadow: 0 10px 20px -5px rgba(37, 99, 235, 0.1);
}

/* --- FAQ Question (Summary) --- */
.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 30px;
    cursor: pointer;
    font-size: 1.15rem;
    font-weight: 700;
    color: #1E3A8A;
    /* Dark navy text */
    list-style: none;
    /* Hide default browser arrow */
}

/* Hide default arrow in Webkit browsers */
.faq-question::-webkit-details-marker {
    display: none;
}

/* --- The Plus/Minus Icon --- */
.faq-icon {
    width: 36px;
    height: 36px;
    background: #F1F5F9;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #2563EB;
    transition: background 0.3s, color 0.3s;
}

.faq-item[open] .faq-icon {
    background: #2563EB;
    color: var(--white);
}

/* Toggle Icon visibility */
.faq-icon .icon-minus {
    display: none;
}

.faq-icon .icon-plus {
    display: block;
}

.faq-item[open] .faq-icon .icon-minus {
    display: block;
}

.faq-item[open] .faq-icon .icon-plus {
    display: none;
}

/* --- FAQ Answer --- */
.faq-answer {
    padding: 0 30px 24px 30px;
    color: #475569;
    /* Slate gray text */
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Smooth slide down animation */
.faq-item[open] .faq-answer {
    animation: slideDown 0.3s ease-out forwards;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

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

/* =========================================
   RESPONSIVE DESIGN FOR FAQ
   ========================================= */
@media (max-width: 768px) {
    .section-header-faq h2 {
        font-size: 2.2rem;
    }

    .faq-question {
        padding: 20px;
        font-size: 1rem;
    }

    .faq-answer {
        padding: 0 20px 20px 20px;
    }

    .faq-icon {
        width: 30px;
        height: 30px;
    }
}



/* =========================================
   FOOTER SECTION
   ========================================= */
.footer-section {
    /* Background artwork - swapped for the portrait variant below 768px */
    background-image: url('../assets/footer-bg.png');
    /* background-color: #071126; */
    /* Fallback dark blue */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* color: var(--white); */
    padding: 80px 0 0 0;
    /* position: relative; */
    /* border-top: 1px solid rgba(255, 255, 255, 0.05); */
    overflow: hidden;
}

/* Subtle grid pattern overlay (optional, matches the previous section) */
.footer-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 50px 50px;
    pointer-events: none;
    z-index: 0;
}

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

/* --- Main Footer Grid --- */
.footer-main {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.5fr;
    gap: 40px;
    margin-bottom: 60px;
}

/* --- Column 1: Brand --- */
.footer-logo {
    height: 40px;
    width: 160px;
    padding-bottom: 2rem;
    display: contents;
}

.footer-logo img {
    height: 4rem;
    width: 17rem;
    margin: -28px 0 18px;
}

/* =========================================
   CONTACT WIDGET
   ========================================= */
.contact-widget {
    /* Dark blue background matching your image */
    /* background-color: #102A54;  */
    padding: 24px;
    border-radius: 8px;
    /* Optional: add rounded corners */
    display: inline-block;
    /* Keeps the widget sized to its content */
}

.contact-heading {
    color: #FFFFFF;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-bottom: 16px;
    font-family: 'Inter', sans-serif;
}

.contact-row {
    display: flex;
    align-items: center;
    /* justify-content: center; */
    gap: 12px;
    margin-bottom: 12px;
}

.contact-row:last-child {
    margin-bottom: 0;
}

/* The green icons and text */
.contact-icon {
    color: #2DD4BF;
    /* Cyan/Green */
    flex-shrink: 0;
}

.contact-text {
    color: #2DD4BF;
    /* Cyan/Green */
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    font-family: 'Inter', sans-serif;
    transition: color 0.3s;
}

.contact-text:hover {
    color: #5EEAD4;
    /* Lighter green on hover */
}

/* The copy icon buttons */
.copy-btn {
    background: transparent;
    border: none;
    color: #2DD4BF;
    /* Cyan/Green */
    opacity: 0.5;
    /* Faded slightly by default */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border-radius: 4px;
    transition: opacity 0.3s, background-color 0.3s;
    margin-left: 4px;
}

.copy-btn:hover {
    opacity: 1;
    /* Full opacity on hover */
    background-color: rgba(45, 212, 191, 0.1);
    /* Subtle green background */
}

.copy-btn:active {
    transform: scale(0.95);
}


.footer-desc {
    font-size: 0.95rem;
    color: #94A3B8;
    line-height: 1.6;
    margin-bottom: 24px;
    max-width: 280px;
}

/* Social Links */
.social-links {
    display: flex;
    gap: 12px;
}

.social-links a {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94A3B8;
    transition: all 0.3s ease;
}

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

/* --- Recent Posts Widget --- */
.recent-post-item {
    display: flex;
    gap: 16px;
    text-decoration: none;
    transition: transform 0.2s;
}

.recent-post-item:hover {
    transform: translateX(4px);
    color: var(--primary-blue);
}

.recent-post-item img {
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}

.recent-post-info h4 {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--dark-bg);
    margin-bottom: 6px;
    line-height: 1.3;
}

.recent-post-meta {
    font-size: 0.75rem;
    color: var(--text-light);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* --- Columns 2 & 3: Links --- */
.footer-col h4 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 24px;
    color: var(--white);
}

.footer-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.footer-links a {
    color: #94A3B8;
    font-size: 0.95rem;
    transition: color 0.3s, padding-left 0.3s;
}

.footer-links a:hover {
    color: #2DD4BF;
    padding-left: 4px;
    /* Subtle slide effect */
}

/* --- Column 4: Newsletter --- */
.newsletter-col p {
    font-size: 0.95rem;
    color: #94A3B8;
    line-height: 1.6;
    margin-bottom: 20px;
}

.newsletter-form .input-wrapper {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50px;
    padding: 6px;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.newsletter-form .input-wrapper:focus-within {
    border-color: #2563EB;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}

.mail-icon {
    margin-left: 14px;
    flex-shrink: 0;
}

.newsletter-form input {
    flex: 1;
    background: transparent;
    border: none;
    padding: 10px 12px;
    color: var(--white);
    font-family: var(--font-family);
    font-size: 0.9rem;
    outline: none;
}

.newsletter-form input::placeholder {
    color: #64748B;
}

.newsletter-form button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #2563EB;
    /* Blue */
    border: none;
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.3s, transform 0.2s;
}

.newsletter-form button:hover {
    background: #1D4ED8;
    transform: scale(1.05);
}

/* --- Bottom Copyright Bar --- */
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 0;
    /* border-top: 1px solid rgba(255, 255, 255, 0.1); */
    font-size: 1rem;
    color: #b8cbe6;
    position: relative;
    z-index: 2;
}

/* --- Wavy Lines Graphic --- */
.footer-waves {
    position: absolute;
    bottom: 50px;
    left: 0;
    width: 100%;
    height: 120px;
    z-index: 1;
    pointer-events: none;
}

.footer-waves svg {
    width: 100%;
    height: 100%;
}

/* =========================================
   RESPONSIVE DESIGN FOR FOOTER
   ========================================= */
@media (max-width: 1024px) {
    .footer-main {
        grid-template-columns: 1fr 1fr;
        /* 2x2 grid on tablet */
        gap: 50px;
    }

    .brand-col {
        grid-column: 1 / -1;
        /* Brand takes full width */
    }

    .newsletter-col {
        grid-column: 1 / -1;
        /* Newsletter takes full width */
    }

    .newsletter-form .input-wrapper {
        max-width: 400px;
    }
}

@media (max-width: 768px) {
    .footer-section {
        /* Mobile Background Image */
        background-image: url('../assets/footer-bg-mob.png');
        background-position: center center;
    }

    .footer-main {
        grid-template-columns: 1fr;
        /* Stack everything on mobile */
        gap: 40px;
        text-align: center;
    }

    .footer-desc {
        margin: 0 auto 24px auto;
    }

    .social-links {
        justify-content: center;
    }

    .footer-links {
        align-items: center;
    }

    .newsletter-form .input-wrapper {
        margin: 0 auto;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }

    .footer-waves {
        bottom: 80px;
        opacity: 0.5;
    }

    .contact-row {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        margin-bottom: 12px;
    }
}


/* =========================================
   INLINE VECTOR ICONS (Lucide, ISC licence - lucide.dev)
   Platform emoji were replaced with inline SVG so every glyph looks the
   same on every device and inherits the surrounding text colour instead of
   the OS emoji palette. Sized in em so each icon tracks its label's font
   size; stroke-width can be raised if a thicker line is wanted.
   ========================================= */
.shield-icon,
.wa-icon,
.cal-icon,
.badge-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.shield-icon svg,
.wa-icon svg,
.cal-icon svg,
.badge-icon svg {
    width: 1em;
    height: 1em;
    display: block;
}


/* =========================================
   ICON GROWTH ON CARD HOVER
   Hovering a card scales its icon up. This uses transform: scale() rather
   than animating width/height, so the icon grows without reflowing the
   card's text and without triggering layout on every frame. Retune every
   card at once by changing the single scale factor below.
   ========================================= */
.feature-icon-wrapper,
.step-icon-wrapper,
.step-icon-dark img,
.result-icon-wrapper,
/* .security-icon, */
.email-icon-wrapper,
.fbr-icon-wrapper {
    transition: transform 0.3s ease;
}

.feature-card:hover .feature-icon-wrapper,
.step-card:hover .step-icon-wrapper,
.step-card-dark:hover .step-icon-dark img,
.result-card:hover .result-icon-wrapper,
/* .security-box:hover .security-icon, */
.contact-info-card:hover .email-icon-wrapper,
.fbr-compliant-box:hover .fbr-icon-wrapper {
    transform: scale(1.12);
}


/* =========================================
   REDUCED MOTION
   Hover/lift states still apply, just instantly, for users who ask their
   system to reduce motion. The decorative hero float is stopped outright
   rather than merely sped up, and the FAQ answer still ends fully visible.
   ========================================= */
@media (prefers-reduced-motion: reduce) {

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

    .hero-art-image {
        animation: none !important;
    }

    .whatsapp-float::before,
    .whatsapp-float svg {
        animation: none !important;
    }

    /* Keep the open FAQ answer at its final, fully visible state */
    .faq-item[open] .faq-answer {
        opacity: 1;
        transform: none;
    }
}








/* =========================================
   BLOG / INSIGHTS SECTION
   ========================================= */
.blog-section {
    padding: 70px 0;
    background-color: #F8FAFC;
    background-image: repeating-linear-gradient(90deg,
            transparent,
            transparent 150px,
            rgba(226, 232, 240, 0.4) 150px,
            rgba(226, 232, 240, 0.4) 151px);
    overflow: hidden;
    /* Prevents horizontal scroll */
}

.section-header-blog {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 60px;
}

.section-badge-blog {
    display: inline-block;
    background: #EFF6FF;
    color: #2563EB;
    border: 1px solid #BFDBFE;
    padding: 6px 20px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 20px;
}

.section-header-blog h2 {
    font-size: 3rem;
    font-weight: 800;
    color: var(--dark-bg);
    margin-bottom: 16px;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.gradient-text-blog {
    background: linear-gradient(90deg, #2563EB 0%, #06B6D4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.section-header-blog p {
    color: var(--text-light);
    font-size: 1.05rem;
}

/* --- Carousel Layout --- */
.carousel-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
}

.carousel-track-container {
    overflow: hidden;
    touch-action: pan-y;
    /* Hides cards that are off-screen */
    width: 100%;
    padding: 20px 0;
    /* Space for card hover effects */
}

.carousel-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
    /* Smooth sliding animation */
    gap: 24px;
}

/* --- The Blog Card --- */
.blog-card {
    /* Default for desktop: 3 cards per view. 
       Calculation: (100% - (2 gaps * 24px)) / 3 */
    flex: 0 0 calc((100% - 48px) / 3);
    background: var(--white);
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
    transition: transform 0.3s, box-shadow 0.3s;
    display: flex;
    flex-direction: column;
}

.blog-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
}

/* Card Image */
.blog-img-wrapper {
    height: 200px;
    overflow: hidden;
}

.blog-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.blog-card:hover .blog-img-wrapper img {
    transform: scale(1.05);
}

/* Card Content */
.blog-content {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.blog-category {
    display: inline-block;
    background: #E0F2FE;
    color: #0284C7;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 50px;
    margin-bottom: 16px;
    align-self: flex-start;
    letter-spacing: 0.05em;
}

.blog-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: var(--text-light);
    margin-bottom: 12px;
}

.meta-divider {
    color: #CBD5E1;
}

.meta-icon {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.meta-icon svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
}

.blog-content h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--dark-bg);
    margin-bottom: 12px;
    line-height: 1.4;
}

.blog-content p {
    font-size: 0.9rem;
    color: var(--text-light);
    line-height: 1.6;
    margin-bottom: 24px;
    flex-grow: 1;
    /* Pushes the Read Article link to the bottom */
}

.read-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #0D9488;
    /* Teal */
    font-size: 0.9rem;
    font-weight: 600;
    transition: gap 0.3s;
    text-decoration: none;
    cursor: pointer;
    padding: 6px 0;
}

.read-more:hover {
    gap: 10px;
    color: #0F766E;
}

/* --- Navigation Arrows --- */
.carousel-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--white);
    border: 1px solid #E2E8F0;
    color: #2563EB;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    transition: all 0.3s;
    z-index: 10;
}

.carousel-btn:hover:not(:disabled) {
    background: #2563EB;
    color: var(--white);
    border-color: #2563EB;
    box-shadow: 0 6px 15px rgba(37, 99, 235, 0.3);
}

.carousel-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* --- Pagination Dots --- */
.carousel-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 40px;
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #CBD5E1;
    border: none;
    cursor: pointer;
    transition: all 0.3s;
    padding: 0;
}

.dot.active {
    background: #2563EB;
    width: 24px;
    /* Pill shape when active */
    border-radius: 10px;
}

.dot:hover:not(.active) {
    background: #94A3B8;
}

/* =========================================
   RESPONSIVE DESIGN FOR CAROUSEL
   ========================================= */
@media (max-width: 1024px) {

    /* 2 cards per view on tablet */
    .blog-card {
        /* Calculation: (100% - (1 gap * 24px)) / 2 */
        flex: 0 0 calc((100% - 24px) / 2);
    }

    .carousel-btn {
        display: none;
        /* Hide arrows on tablet, rely on dots/swipe */
    }
}

@media (max-width: 768px) {

    /* 1 card per view on mobile */
    .blog-card {
        flex: 0 0 100%;
    }

    .section-header-blog h2 {
        font-size: 2.2rem;
    }
}

/* =========================================
   SHARED LAYOUT PLACEHOLDERS
   These two <div>s are the mount points that js/includes.js fills with the
   contents of components/header.html and components/footer.html.

   display: contents makes the placeholder generate no box of its own, so the
   injected header and footer are laid out as if they were direct children of
   <body>. This is load-bearing for the header: position: sticky can only
   travel inside its parent's box, and a wrapper that is exactly as tall as
   the header would pin it for 0px and let it scroll away. Keep it.
   ========================================= */
#header-placeholder,
#footer-placeholder {
    display: contents;
}

/* =========================================
   SECTION REVEALS AND SMALL INTERACTIONS
   ========================================= */
.site-header .logo,
.site-header .nav-links li,
.site-header .nav-actions {
    animation: header-fade-in 0.55s ease both;
}

.site-header .nav-links li:nth-child(2) {
    animation-delay: 60ms;
}

.site-header .nav-links li:nth-child(3) {
    animation-delay: 120ms;
}

.site-header .nav-links li:nth-child(4) {
    animation-delay: 180ms;
}

.site-header .nav-links li:nth-child(5) {
    animation-delay: 240ms;
}

.site-header .nav-links li:nth-child(6) {
    animation-delay: 300ms;
}

.site-header .nav-links li:nth-child(7) {
    animation-delay: 360ms;
}

.site-header .nav-actions {
    animation-delay: 180ms;
}

@keyframes header-fade-in {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

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

.nav-links a {
    position: relative;
    text-decoration: none;
}

.nav-links a::after {
    position: absolute;
    right: 0;
    bottom: -6px;
    left: 0;
    height: 2px;
    background: var(--whatsapp-green);
    content: "";
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s ease;
}

.nav-links a:hover::after,
.nav-links a:focus-visible::after {
    transform: scaleX(1);
}

.scroll-reveal-pending {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.65s ease, transform 0.65s ease;
}

.scroll-reveal-pending[data-reveal-direction="left"] {
    transform: translateX(-28px);
}

.scroll-reveal-pending[data-reveal-direction="right"] {
    transform: translateX(28px);
}

.scroll-revealed {
    opacity: 1;
    transform: none;
}

.steps-grid {
    position: relative;
}

.steps-grid::before {
    position: absolute;
    z-index: 2;
    top: -12px;
    right: 10%;
    left: 10%;
    height: 2px;
    background: linear-gradient(90deg, #2563EB, #2DD4BF);
    content: "";
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.8s ease;
}

.steps-grid.scroll-revealed::before {
    transform: scaleX(1);
}

.step-card {
    z-index: 3;
}

.step-number {
    z-index: 3;
}

.feature-card.scroll-revealed .feature-icon-wrapper,
.checklist-item.scroll-revealed .check-icon,
.step-card-dark.scroll-revealed .badge-check,
.security-box.scroll-revealed .security-icon img {
    animation: icon-pop 0.45s ease;
}

.security-visual.scroll-revealed .shield-img {
    animation: security-lock-in 0.85s cubic-bezier(0.2, 0.75, 0.25, 1);
}

@keyframes security-lock-in {
    0% {
        opacity: 0;
        transform: scale(0.78) rotate(-8deg);
    }

    70% {
        opacity: 1;
        transform: scale(1.04) rotate(2deg);
    }

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

@keyframes icon-pop {
    0% {
        transform: scale(0.75);
    }

    70% {
        transform: scale(1.12);
    }

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

.step-arrow-dark {
    position: relative;
    margin-top: 245px;
    flex: 0 0 48px;
    width: 48px;
    height: 24px;
    font-size: 0;
}

.step-arrow-dark::before {
    position: absolute;
    top: 50%;
    right: 3px;
    left: 0;
    height: 2px;
    background: #38BDF8;
    content: "";
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.55s ease;
}

.step-arrow-dark::after {
    position: absolute;
    top: 50%;
    right: 2px;
    width: 8px;
    height: 8px;
    border-top: 2px solid #38BDF8;
    border-right: 2px solid #38BDF8;
    content: "";
    transform: translateY(-50%) rotate(45deg);
    opacity: 0;
    transition: opacity 0.2s ease 0.4s;
}

.step-arrow-dark.scroll-revealed::before {
    transform: scaleX(1);
}

.step-arrow-dark.scroll-revealed::after {
    opacity: 1;
}

.faq-icon {
    transform: rotate(0);
    transition: background 0.3s, color 0.3s, transform 0.3s ease;
}

.faq-item[open] .faq-icon {
    transform: rotate(180deg);
}

.faq-answer {
    overflow: hidden;
}

.faq-item[open] .faq-answer {
    animation: slideDown 0.35s ease-out both;
}

@keyframes slideDown {
    from {
        max-height: 0;
        padding-bottom: 0;
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        max-height: 32rem;
        padding-bottom: 24px;
        opacity: 1;
        transform: translateY(0);
    }
}

.footer-links a {
    position: relative;
    text-decoration: none;
}

.footer-links a::after {
    position: absolute;
    right: 0;
    bottom: -3px;
    left: 0;
    height: 1px;
    background: #2DD4BF;
    content: "";
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s ease;
}

.footer-links a:hover::after,
.footer-links a:focus-visible::after {
    transform: scaleX(1);
}

.submit-btn[disabled]::before {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-top-color: var(--white);
    border-radius: 50%;
    content: "";
    animation: submit-spinner 0.75s linear infinite;
}

.submit-btn[disabled] svg {
    display: none;
}

.submit-btn[data-state="success"] {
    background: #047857;
}

.submit-btn[data-state="success"]::before {
    width: 18px;
    height: 18px;
    border: 0;
    border-radius: 0;
    content: "✓";
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
    animation: icon-pop 0.35s ease both;
}

@keyframes submit-spinner {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 1024px) {
    .steps-grid::before {
        display: none;
    }

    .step-arrow-dark.scroll-revealed {
        transform: rotate(90deg);
    }
}

@media (max-width: 768px) {
    .nav-links a::after {
        display: none;
    }

    .step-arrow-dark {
        align-self: center;
        margin-top: 0;
        margin-left: 0;
    }
}