@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Playfair+Display:ital,wght@0,700;0,800;0,900;1,700&display=swap');

:root {
    /* Ultra-Premium Palette: Midnight & Aurora */
    --primary: #0f172a;
    /* Deep Midnight Navy */
    --primary-glow: rgba(99, 102, 241, 0.25);
    --secondary: #334155;
    /* Slate */

    --accent: #6366f1;
    /* Electric Indigo */
    --accent-vibrant: #818cf8;
    /* Soft Indigo */

    --success: #10b981;
    /* Emerald */
    --warning: #f59e0b;
    /* Amber */
    --danger: #ef4444;
    /* Red */


    /* Elegant Backgrounds */
    --bg-white: #ffffff;
    --bg-soft: #f8fafc;
    /* Cloud White */
    --bg-mesh: radial-gradient(circle at 0% 0%, rgba(99, 102, 241, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 100% 100%, rgba(16, 185, 129, 0.05) 0%, transparent 50%);

    /* Refined Typography */
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Plus Jakarta Sans', sans-serif;

    /* Spacing & Borders */
    --radius-xl: 32px;
    --radius-lg: 20px;
    --radius-md: 12px;

    /* Premium Effects */
    --shadow-premium: 0 20px 40px -12px rgba(15, 23, 42, 0.1);
    --shadow-glow: 0 0 30px rgba(99, 102, 241, 0.12);
    --glass-bg: rgba(255, 255, 255, 0.85);
    --glass-border: 1px solid rgba(255, 255, 255, 0.6);

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #0f172a 0%, #334155 100%);
    --gradient-accent: linear-gradient(135deg, #6366f1 0%, #818cf8 100%);
    --gradient-glass: linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.2) 100%);
    --gradient-hero: linear-gradient(to bottom, #f8fafc 0%, #ffffff 100%);

    /* Hyper-Futuristic Tokens (Refined) */
    --holo-glow: 0 0 25px rgba(99, 102, 241, 0.3);
    --neon-blue: #3b82f6;
    --bg-darker: #020617;
    --gradient-hologram: linear-gradient(120deg, rgba(99, 102, 241, 0.15), rgba(16, 185, 129, 0.15), rgba(99, 102, 241, 0.15));
}

/* Futuristic Animations */
@keyframes hologram-flicker {
    0% {
        opacity: 0.8;
        transform: skewX(0deg);
    }

    10% {
        opacity: 0.5;
        transform: skewX(2deg);
    }

    11% {
        opacity: 0.8;
        transform: skewX(0deg);
    }

    50% {
        opacity: 0.9;
    }

    80% {
        opacity: 0.7;
        transform: skewX(-1deg);
    }

    100% {
        opacity: 0.8;
        transform: skewX(0deg);
    }
}

@keyframes neon-pulse {

    0%,
    100% {
        filter: drop-shadow(0 0 5px var(--primary-glow)) brightness(1);
    }

    50% {
        filter: drop-shadow(0 0 20px var(--primary-glow)) brightness(1.2);
    }
}

@keyframes floating-bubble {

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

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

.futuristic-card {
    background: var(--glass-heavy);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: var(--holo-glow);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.futuristic-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--primary);
    transform: translateY(-15px) scale(1.02);
    box-shadow: 0 20px 60px rgba(99, 102, 241, 0.3);
}

.neon-text {
    text-shadow: 0 0 10px var(--primary-glow);
    animation: neon-pulse 3s infinite;
}


/* Animations Hub */
@keyframes float {
    0% {
        transform: translateY(0px) rotate(0deg);
    }

    50% {
        transform: translateY(-15px) rotate(1deg);
    }

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

.hero-immersive {
    padding: 180px 0 120px;
}

.audit-card {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
}

.section-title-large {
    font-size: clamp(2.5rem, 9vw, 4rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
}

@media (max-width: 991px) {
    .hero-immersive {
        padding: 100px 0 50px !important;
    }

    .audit-card {
        grid-template-columns: 1fr !important;
    }

    .futuristic-card {
        padding: 40px 25px !important;
    }
}

@keyframes pulse-glow {
    0% {
        box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4);
    }

    70% {
        box-shadow: 0 0 0 15px rgba(99, 102, 241, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(99, 102, 241, 0);
    }
}

/* Premium Utilities */
.premium-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
}

@media(min-width: 1024px) {
    .premium-grid {
        gap: 80px;
    }
}

@media (max-width: 1024px) {
    .premium-grid {
        gap: 40px;
    }

    .premium-grid>div {
        order: initial;
        /* Reset order for mobile simplicity */
    }

    .hero-immersive .hero-visual {
        order: -1;
        margin-bottom: 20px;
    }
}

.premium-card {
    background: white;
    border-radius: 40px;
    padding: 50px;
    box-shadow: var(--shadow-premium);
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.4s ease;
}

.premium-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 40px 80px -12px rgba(0, 0, 0, 0.12);
}

.glass-pill {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    padding: 10px 20px;
    border-radius: 100px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

body {
    font-family: var(--font-body);
    color: #1a1c23;
    background: var(--bg-soft);
    background-image: var(--bg-mesh);
    line-height: 1.7;
    margin: 0;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5 {
    font-family: var(--font-heading);
    letter-spacing: -0.02em;
}


/* Reset & Base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

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

/* Global Typography with Clamp for Responsibility */
h1 {
    font-size: clamp(2rem, 8vw, 4rem);
    line-height: 1.1;
}

h2 {
    font-size: clamp(1.75rem, 6vw, 3rem);
    line-height: 1.2;
}

h3 {
    font-size: clamp(1.5rem, 4vw, 2rem);
    line-height: 1.3;
}

/* Fluid Hero Utility */
.fluid-hero {
    padding: clamp(100px, 15vh, 180px) 0 clamp(60px, 10vh, 100px);
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

/* Mobile Font & Layout Overrides */
@media (max-width: 768px) {
    .section-padding {
        padding: 60px 0;
        /* Reduced padding for mobile */
    }

    .container {
        padding: 0 20px !important;
    }
}

html,
body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    margin: 0;
    padding: 0;
}

/* Laptop Optimization (Standardize layout for 1024px-1366px) */
@media (min-width: 1024px) and (max-width: 1366px) {
    .container {
        max-width: 90%;
    }

    .hero-content h1 {
        font-size: 3rem;
        /* Adjusted for laptop screens */
    }

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

    .feature-row {
        gap: 40px;
        /* Tighter gap for laptop screens */
    }
}

/* Feature Row (Alternating) */
.feature-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: center;
    margin-bottom: 60px;
}

@media(min-width: 768px) {
    .feature-row {
        grid-template-columns: 1fr 1fr;
        gap: 60px;
    }
}

@media(max-width: 767px) {
    .feature-row {
        display: flex;
        flex-direction: column;
        width: 100%;
        /* Ensure full width */
    }

    .feature-img,
    .hero-visual {
        order: -1;
        margin-bottom: 30px;
        width: 100%;
        /* Ensure visuals don't overflow */
    }
}

a {
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    display: block;
}

/* Utilities */
.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 24px;
}

.section-padding {
    padding: 80px 0;
}

.text-center {
    text-align: center;
}

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

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

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.grid-cols-2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
}

@media(min-width: 768px) {
    .grid-cols-2 {
        grid-template-columns: 1fr 1fr;
    }
}

.grid-cols-3 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}

@media(min-width: 768px) {
    .grid-cols-3 {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 36px;
    font-weight: 600;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 1.05rem;
    position: relative;
    overflow: hidden;
    letter-spacing: 0.5px;
    z-index: 1;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 1px;
}

.btn-primary {
    background: var(--gradient-primary);
    color: var(--text-light);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 2px 4px -1px rgba(0, 0, 0, 0.1);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 25px rgba(11, 17, 32, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.2);
    border-color: var(--accent);
}

.btn-outline {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid var(--primary);
    color: var(--primary);
    backdrop-filter: blur(8px);
}

.hero-title {
    font-size: clamp(2.5rem, 8vw, 6rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin-bottom: 25px;
}

.btn-outline-hero {
    background: white;
    border: 2px solid #e2e8f0;
    color: #1e1b4b !important;
    font-weight: 800;
}

.btn-outline-hero:hover {
    background: #f8fafc;
    border-color: var(--primary);
    transform: translateY(-2px);
}

/* Hero Actions & Mobile Responsive */
.hero-actions {
    display: flex;
    gap: 16px;
    margin-top: 32px;
}

@media (max-width: 768px) {
    .hero-actions {
        flex-direction: column;
        gap: 16px;
        width: 100%;
        padding: 0 10px;
        /* Slight padding from edges */
    }

    .hero-actions .btn {
        width: 100%;
        padding: 16px 20px;
        font-size: 1.05rem;
        /* Slightly larger text for tap targets */
        border-radius: 12px;
        /* Modern "squircle" look for mobile buttons */
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        /* Soft shadow */
    }

    /* Make primary button pop more on mobile */
    .hero-actions .btn-primary {
        background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
        box-shadow: 0 8px 16px rgba(15, 23, 42, 0.2);
    }
}

/* Header & Nav */
/* Header & Nav */
header {
    height: var(--header-height);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    transition: height 0.3s ease;
}

header .container {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--primary);
    letter-spacing: -0.5px;
}

@media (max-width: 768px) {
    header {
        height: 70px;
        /* Smaller header on mobile */
    }

    .container {
        padding: 0 20px;
        /* Reduced padding */
    }

    .logo {
        font-size: 1.5rem;
        /* Smaller logo */
    }
}

.logo span {
    color: var(--accent);
}

.nav-menu {
    display: none;
}

@media(min-width: 1024px) {
    .nav-menu {
        display: flex;
        gap: 32px;
        align-items: center;
    }
}

.nav-link {
    font-weight: 500;
    color: var(--primary);
    position: relative;
}

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

/* Mobile Controls */
.mobile-controls {
    display: flex !important;
    /* Force flex on mobile */
}

@media(min-width: 1024px) {
    .mobile-controls {
        display: none !important;
    }
}

/* Utilities for Mobile/Desktop visibility */
@media(max-width: 1023px) {
    .mobile-hidden {
        display: none !important;
    }

    .nav-menu.active .mobile-only {
        display: block !important;
    }

    .nav-menu.active .nav-link .mobile-only {
        display: inline-block !important;
    }
}

/* Dropdown (Simplified for CSS-only hover or future JS) */
.nav-item {
    position: relative;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    box-shadow: var(--shadow-lg);
    border-radius: var(--radius-sm);
    min-width: 200px;
    display: none;
    flex-direction: column;
    padding: 10px 0;
}

.nav-item:hover .dropdown-menu {
    display: flex;
}

.dropdown-item {
    padding: 10px 20px;
    font-size: 0.95rem;
}

.dropdown-item:hover {
    background-color: var(--bg-light);
    color: var(--accent);
}

/* Mobile Navigation - Modern & Clean */
.nav-menu.active {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: var(--header-height);
    left: 0;
    width: 100%;
    height: calc(100vh - var(--header-height));
    background: #ffffff;
    padding: 20px 30px;
    box-shadow: none;
    overflow-y: auto;
    z-index: 999;
    animation: slideDown 0.3s ease-out forwards;
}

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

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

.nav-menu.active .nav-item {
    width: 100%;
    border-bottom: 1px solid #f1f5f9;
}

.nav-menu.active .nav-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 18px 0;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--primary);
}

.nav-menu.active .nav-link i {
    color: var(--accent);
}

/* Chevron Rotation */
.nav-menu.active .nav-item i.fa-chevron-down {
    transition: transform 0.3s ease;
}

.nav-menu.active .nav-item.dropdown-active i.fa-chevron-down {
    transform: rotate(180deg);
}

.nav-link {
    cursor: pointer;
}

/* Mobile Dropdown Styling - Collapsible */
.nav-menu.active .dropdown-menu {
    position: static;
    display: none;
    /* Hidden by default */
    box-shadow: none;
    border: none;
    background: transparent;
    padding: 0 0 15px 15px;
    /* Indent content */
    margin: 0;
    border-radius: 0;
    min-width: 100%;
}

/* Show when active */
.nav-menu.active .nav-item.dropdown-active .dropdown-menu {
    display: block;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.nav-menu.active .dropdown-item {
    display: block;
    padding: 12px 15px;
    font-size: 1rem;
    color: #64748b;
    border-left: 2px solid #e2e8f0;
    margin-bottom: 5px;
    transition: 0.2s;
}

.nav-menu.active .dropdown-item:hover {
    border-left-color: var(--accent);
    color: var(--primary);
    background: transparent;
    padding-left: 20px;
}

/* Mobile Buttons (CTA) */
.nav-menu.active .nav-item:last-child,
.nav-menu.active .nav-item:nth-last-child(2) {
    border-bottom: none;
    margin-top: 15px;
}

.nav-menu.active .btn {
    width: 100%;
    text-align: center;
    justify-content: center;
    padding: 16px;
    font-size: 1.1rem;
}


/* Animations */
@keyframes blob-morph {
    0% {
        border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
        transform: rotate(0deg);
    }

    100% {
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
        transform: rotate(20deg);
    }
}

@keyframes particle-orbit {
    0% {
        transform: rotate(0deg) translateX(100px) rotate(0deg);
    }

    100% {
        transform: rotate(360deg) translateX(100px) rotate(-360deg);
    }
}

/* Background Patterns */
.bg-mesh {
    background:
        radial-gradient(at 0% 0%, rgba(217, 119, 6, 0.05) 0px, transparent 50%),
        radial-gradient(at 100% 100%, rgba(11, 17, 32, 0.05) 0px, transparent 50%),
        var(--bg-light);
}

.bg-dots {
    background-color: var(--bg-white);
    background-image: radial-gradient(#cbd5e1 1px, transparent 1px);
    background-size: 24px 24px;
}

.bg-grid {
    background-color: var(--bg-light);
    background-image: linear-gradient(#e2e8f0 1px, transparent 1px), linear-gradient(90deg, #e2e8f0 1px, transparent 1px);
    background-size: 40px 40px;
}

/* Section Divider */
.section-divider-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
}

.section-divider-top svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 60px;
}

.shape-fill {
    fill: #FFFFFF;
}

/* School Universe Background */
.school-universe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 2;
    /* Behind the main character (z-index 10) */
    pointer-events: none;
}

.school-icon {
    position: absolute;
    font-size: 2rem;
    opacity: 0.6;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
    animation: float-random 10s ease-in-out infinite;
}

.si-1 {
    top: 15%;
    left: 15%;
    font-size: 2.5rem;
    animation-duration: 8s;
    animation-delay: 0s;
}

.si-2 {
    top: 20%;
    right: 20%;
    font-size: 2rem;
    animation-duration: 12s;
    animation-delay: 1s;
}

.si-3 {
    bottom: 25%;
    left: 10%;
    font-size: 2.2rem;
    animation-duration: 9s;
    animation-delay: 2s;
}

.si-4 {
    bottom: 15%;
    right: 15%;
    font-size: 2.8rem;
    animation-duration: 11s;
    animation-delay: 0.5s;
}

.si-5 {
    top: 50%;
    left: 5%;
    font-size: 1.8rem;
    animation-duration: 14s;
    animation-delay: 3s;
}

.si-6 {
    top: 40%;
    right: 5%;
    font-size: 2rem;
    animation-duration: 10s;
    animation-delay: 1.5s;
}

@keyframes float-random {

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

    25% {
        transform: translate(10px, -15px) rotate(5deg);
    }

    50% {
        transform: translate(-5px, 10px) rotate(-5deg);
    }

    75% {
        transform: translate(-10px, -5px) rotate(3deg);
    }
}

@keyframes float {

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

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

@keyframes pulse-glow {

    0%,
    100% {
        transform: scale(1);
        filter: drop-shadow(0 0 0 rgba(217, 119, 6, 0));
    }

    50% {
        transform: scale(1.05);
        filter: drop-shadow(0 0 30px rgba(217, 119, 6, 0.3));
    }
}

.feature-content h3 {
    font-size: 2rem;
    margin-bottom: 20px;
    color: var(--primary);
}

.feature-content ul {
    margin-top: 20px;
}

.feature-content li {
    margin-bottom: 12px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: var(--text-muted);
}

.feature-content li i {
    color: var(--accent);
    margin-top: 5px;
}

/* Footer */
footer {
    background-color: var(--bg-dark);
    color: var(--text-light);
    padding: 80px 0 30px;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 50px;
    margin-bottom: 60px;
}

.footer-col h4 {
    color: white;
    font-size: 1.2rem;
    margin-bottom: 24px;
}

.footer-col ul li {
    margin-bottom: 12px;
}

.footer-col a {
    color: #94a3b8;
}

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

.copyright {
    text-align: center;
    padding-top: 30px;
    border-top: 1px solid #1e293b;
    color: #64748b;
    font-size: 0.9rem;
}

/* Contact Form Simple */
.contact-form {
    background: white;
    padding: 40px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #cbd5e1;
    border-radius: var(--radius-sm);
    font-family: inherit;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.1);
}

/* Mobile Toggle Buttons */
.mobile-toggle,
.mobile-login-trigger i {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: background 0.2s;
    cursor: pointer;
}

.mobile-toggle:hover,
.mobile-login-trigger i:hover {
    background: rgba(0, 0, 0, 0.05);
}

.mobile-toggle i {
    font-size: 1.5rem;
    color: var(--primary);
}

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

/* Absolute Safety for Mobile Header */
@media (max-width: 768px) {
    header {
        width: 100vw !important;
        max-width: 100% !important;
        left: 0 !important;
        right: 0 !important;
    }

    .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        box-sizing: border-box !important;
    }
}

/* --- Floating Components --- */

/* 1. Floating CTA (Book Consultation) */
.floating-cta-container {
    position: fixed;
    bottom: 30px;
    left: 30px;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    gap: 15px;
    animation: float-admin 6s ease-in-out infinite;
}

@keyframes float-admin {
    0% {
        transform: translateY(0px);
    }

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

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

.floating-cta-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--primary);
    color: white;
    padding: 12px 24px;
    border-radius: 50px;
    box-shadow: 0 10px 25px rgba(11, 17, 32, 0.2);
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 2px solid rgba(255, 255, 255, 0.1);
    text-decoration: none;
}

.floating-cta-btn:hover {
    transform: scale(1.05) translateY(-5px);
    background: var(--accent);
    box-shadow: 0 15px 35px rgba(217, 119, 6, 0.3);
    color: white;
    border-color: rgba(255, 255, 255, 0.3);
}

.pulse-ring {
    width: 10px;
    height: 10px;
    background: #22c55e;
    border-radius: 50%;
    position: relative;
}

.pulse-ring::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #22c55e;
    border-radius: 50%;
    animation: pulse 2s infinite;
    z-index: -1;
}

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

    70% {
        transform: scale(3);
        opacity: 0;
    }

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


/* 2. Chat Widget */
.chat-wrapper {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1200;
    font-family: 'Inter', sans-serif;
}

.chat-toggle-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--accent);
    color: white;
    border: none;
    cursor: pointer;
    box-shadow: 0 5px 20px rgba(217, 119, 6, 0.4);
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.chat-toggle-btn:hover {
    transform: scale(1.1) rotate(5deg);
    background: #b45309;
}

/* Chat Window */
.chat-window {
    position: absolute;
    bottom: 80px;
    right: 0;
    width: 350px;
    height: 500px;
    background: white;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform-origin: bottom right;
    transform: scale(0.8);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
    /* Prevent clicks when closing */
    border: 1px solid #f1f5f9;
}

.chat-window.active {
    transform: scale(1);
    opacity: 1;
    pointer-events: all;
}

/* Header */
.chat-header {
    background: var(--primary);
    padding: 15px 20px;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chat-header-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.avatar-online {
    position: relative;
    width: 40px;
    height: 40px;
}

.avatar-online img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid white;
}

.status-dot {
    position: absolute;
    bottom: 2px;
    right: 0;
    width: 10px;
    height: 10px;
    background: #22c55e;
    border: 2px solid var(--primary);
    border-radius: 50%;
}

.chat-header h5 {
    font-size: 1rem;
    margin: 0;
    font-weight: 600;
}

.status-text {
    font-size: 0.75rem;
    opacity: 0.8;
}

.close-btn {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.close-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Body */
.chat-body {
    flex: 1;
    padding: 20px;
    background: #f8fafc;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Messages */
.message {
    max-width: 80%;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 0.9rem;
    line-height: 1.4;
    position: relative;
    animation: fadeIn 0.3s ease;
}

.message.sent {
    background: var(--accent);
    color: white;
    align-self: flex-end;
    border-bottom-right-radius: 2px;
}

.message.received {
    background: white;
    color: var(--text-main);
    align-self: flex-start;
    border-bottom-left-radius: 2px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
}

.message-time {
    display: block;
    font-size: 0.65rem;
    margin-top: 5px;
    opacity: 0.7;
    text-align: right;
}

.message.received .message-time {
    text-align: left;
}

/* Typing Indicator */
.typing {
    padding: 15px;
}

.typing-dots {
    display: flex;
    gap: 4px;
}

.typing-dots span {
    width: 6px;
    height: 6px;
    background: #cbd5e1;
    border-radius: 50%;
    animation: bounce 1.4s infinite ease-in-out both;
}

.typing-dots span:nth-child(1) {
    animation-delay: -0.32s;
}

.typing-dots span:nth-child(2) {
    animation-delay: -0.16s;
}

@keyframes bounce {

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

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

/* Footer Input */
.chat-footer-input {
    padding: 15px;
    background: white;
    border-top: 1px solid #f1f5f9;
    display: flex;
    gap: 10px;
}

.chat-footer-input input {
    flex: 1;
    padding: 10px 15px;
    border: 1px solid #e2e8f0;
    border-radius: 50px;
    outline: none;
    font-family: inherit;
    font-size: 0.9rem;
    transition: border 0.2s;
}

.chat-footer-input input:focus {
    border-color: var(--accent);
}

.chat-footer-input button {
    background: var(--primary);
    color: white;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.2s;
}

.chat-footer-input button:hover {
    transform: scale(1.1);
}

/* Mobile Responsive */
@media (max-width: 480px) {
    .floating-cta-container {
        left: 20px;
        bottom: 20px;
    }

    .floating-cta-text {
        display: none;
        /* Hide text, show only icon on super small screens if needed, but spacing ok */
    }

    .chat-wrapper {
        right: 20px;
        bottom: 20px;
    }

    .chat-window {
        width: calc(100vw - 40px);
        right: 0;
        bottom: 75px;
        height: 60vh;
    }
}

/* --- Pre-Header --- */
.pre-header {
    background-color: var(--primary);
    color: white;
    padding: 8px 0;
    font-size: 0.9rem;
    position: relative;
    z-index: 1001;
    /* Above mobile menu if needed */
}

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

.pre-header-left,
.pre-header-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.pre-header a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    transition: color 0.2s;
}

.pre-header a:hover {
    color: var(--accent);
}

.social-icons {
    display: flex;
    gap: 15px;
}

.social-icons a {
    font-size: 1rem;
}

/* Adjust Main Header to sit below pre-header */
header {
    top: 40px;
    /* Approximate height of pre-header */
}

/* Ensure sticky functionality works correctly */
/* If header is fixed, we might want pre-header to scroll away or stay fixed. */
/* Let's make pre-header scroll away for now to save screen space, 
   BUT standard is often fixed top bar or static top bar.
   If header is fixed at top:0, adding a static pre-header above it means 
   we need to adjust header's 'top' when at scroll 0, but that gets tricky with pure CSS if header is always fixed.
   
   BETTER APPROACH for Fixed Header + Preheader:
   Make Pre-header relative (scrolls away).
   Header is fixed/sticky.
   
   Wait, existing header is `position: fixed; top: 0;`.
   If I add a pre-header above it in DOM, the fixed header will overlap it unless I move fixed header down.
   BUT if I move fixed header down, it stays down even when scrolling.
   
   Alternative: Put Pre-Header INSIDE fixed header? No, usually separate.
   
   Let's try: Pre-header is static block.
   Header is `sticky` instead of `fixed`? or we use JS to adjust.
   
   Let's stick to: Header is fixed. Pre-header is fixed ABOVE it? 
   No, that takes too much space.
   
   Let's make Pre-header fixed at top, and Header fixed below it.
*/

.pre-header {
    /* Fixed pre-header */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 40px;
}

header {
    top: 40px !important;
    /* Push main header down */
    height: 70px;
    /* Reduced slightly to compensate */
}

/* Adjust main content spacing since both are fixed now */
body {
    padding-top: 110px;
    /* 40px + 70px */
}

.hero {
    margin-top: 0 !important;
    /* Removed old margin-top since body has padding */
}


/* Mobile Responsive for Pre-Header */
@media (max-width: 768px) {
    .pre-header {
        display: block;
        height: auto;
        padding: 5px 0;
        text-align: center;
    }

    .pre-header .container {
        flex-direction: column;
        gap: 5px;
    }

    .pre-header-left,
    .pre-header-right {
        justify-content: center;
        gap: 15px;
    }

    .pre-header-left a {
        font-size: 0.8rem;
    }

    /* Hide email on very small screens if needed, or keep it */
    /* .pre-header-left a[href^="mailto"] { display: none; } */

    header {
        top: 60px !important;
        /* Adjusted for taller pre-header */
        height: 70px;
    }

    body {
        padding-top: 130px;
        /* 60px (pre) + 70px (main) */
    }
}

/* Footer Contact Styles */
.footer-col .contact-info {
    list-style: none;
    padding: 0;
}

.footer-col .contact-info li {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    color: #cbd5e1;
    font-size: 0.95rem;
    align-items: flex-start;
}

.footer-col .contact-info li i {
    color: var(--accent);
    margin-top: 5px;
}

.footer-col .contact-info li a {
    color: #cbd5e1;
    text-decoration: none;
    transition: color 0.3s;
}

.footer-col .contact-info li a:hover {
    color: var(--accent);
}

/* Chat Lead Form */
.chat-lead-form {
    padding: 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 15px;
    height: 100%;
    justify-content: center;
    background: #f8fafc;
}

.chat-lead-form h4 {
    font-size: 1.1rem;
    color: var(--primary);
    margin-bottom: 5px;
}

.chat-lead-form p {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.chat-lead-form input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.2s;
}

.chat-lead-form input:focus {
    border-color: var(--accent);
}

.chat-lead-form button {
    background-color: var(--primary);
    color: white;
    padding: 10px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    transition: background 0.2s;
}

.chat-lead-form button:hover {
    background-color: var(--primary-light);
}

/* --- Robust Chat Visibility Logic --- */

/* Default State: Assume LEAD MODE (Hide Chat Interface) */
.chat-body,
.chat-footer-input {
    display: none !important;
}

/* Default State: Show Form */
.chat-lead-form {
    display: flex !important;
}

/* Chat Mode Active: Show Chat Interface, Hide Form */
.chat-window.chat-mode .chat-body {
    display: flex !important;
}

.chat-window.chat-mode .chat-footer-input {
    display: flex !important;
}

.chat-window.chat-mode .chat-lead-form {
    display: none !important;
}

@media (max-width: 1024px) {
    .triad-container {
        transform: scale(0.7) !important;
        height: 320px !important;
    }
}

/* Beni Interface Wrapper Tweaks when in Hero */
.hero-visual .beni-interface-wrapper {
    max-width: 100% !important;
    margin: 0 auto;
}

.hero-visual .beni-main-card {
    min-height: 500px !important;
    max-height: 80vh;
}

@media (max-width: 1024px) {
    .hero-desktop-visual {
        display: none !important;
    }
}