/* ==================================================
   ECOMNIGHTHQ — OPTIMIZED PREMIUM STYLESHEET
   With Dark/Light Mode + Fixed Responsive + Fixed Dynamic Word
   ================================================== */

/* ==================================================
   VARIABLES & RESET
   ================================================== */
:root {
    /* Typography */
    --font-display: 'Clash Display', sans-serif;
    --font-body: 'Satoshi', sans-serif;
    --font-mono: 'Inter Tight', monospace;

    /* Spacing */
    --nav-height: 80px;
    --ticker-height: 34px;

    /* Easing */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ===== DARK THEME (Default) ===== */
[data-theme="dark"] {
    --bg-void: #000000;
    --bg-surface: rgba(8, 8, 12, 0.85);
    --bg-glass: rgba(12, 12, 16, 0.5);
    --bg-glass-hover: rgba(18, 18, 24, 0.6);
    --text-primary: #FFFFFF;
    --text-secondary: #B0B0BC;
    --text-muted: #6B6B78;
    --accent: #4D7CFF;
    --accent-dim: rgba(77, 124, 255, 0.15);
    --accent-glow: rgba(77, 124, 255, 0.4);
    --border-subtle: rgba(255, 255, 255, 0.06);
    --border-glass: rgba(255, 255, 255, 0.1);
    --border-hover: rgba(255, 255, 255, 0.15);
    --green: #34D399;
    --green-dim: rgba(52, 211, 153, 0.1);
    --panel-bg: rgba(10, 10, 14, 0.9);
    --panel-float-bg: rgba(10, 10, 14, 0.92);
    --ticker-bg: rgba(5, 5, 8, 0.95);
    --nav-scrolled-bg: rgba(5, 5, 8, 0.85);
    --mobile-menu-bg: rgba(0, 0, 0, 0.95);
    --btn-primary-bg: #FFFFFF;
    --btn-primary-color: #000000;
    --btn-ghost-bg: rgba(255, 255, 255, 0.03);
    --btn-ghost-border: rgba(255, 255, 255, 0.1);
    --btn-ghost-hover-bg: rgba(255, 255, 255, 0.06);
    --metric-card-bg: rgba(255, 255, 255, 0.02);
    --logo-svg-color: #FFFFFF;
}

/* ===== LIGHT THEME ===== */
[data-theme="light"] {
    --bg-void: #F8F9FC;
    --bg-surface: rgba(255, 255, 255, 0.9);
    --bg-glass: rgba(255, 255, 255, 0.7);
    --bg-glass-hover: rgba(255, 255, 255, 0.85);
    --text-primary: #0F1419;
    --text-secondary: #536471;
    --text-muted: #8899A6;
    --accent: #2563EB;
    --accent-dim: rgba(37, 99, 235, 0.1);
    --accent-glow: rgba(37, 99, 235, 0.3);
    --border-subtle: rgba(0, 0, 0, 0.06);
    --border-glass: rgba(0, 0, 0, 0.08);
    --border-hover: rgba(0, 0, 0, 0.15);
    --green: #059669;
    --green-dim: rgba(5, 150, 105, 0.08);
    --panel-bg: rgba(255, 255, 255, 0.95);
    --panel-float-bg: rgba(255, 255, 255, 0.97);
    --ticker-bg: rgba(255, 255, 255, 0.98);
    --nav-scrolled-bg: rgba(255, 255, 255, 0.9);
    --mobile-menu-bg: rgba(255, 255, 255, 0.98);
    --btn-primary-bg: #0F1419;
    --btn-primary-color: #FFFFFF;
    --btn-ghost-bg: rgba(0, 0, 0, 0.03);
    --btn-ghost-border: rgba(0, 0, 0, 0.1);
    --btn-ghost-hover-bg: rgba(0, 0, 0, 0.06);
    --metric-card-bg: rgba(0, 0, 0, 0.02);
    --logo-svg-color: #0F1419;
}

/* Reset */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: auto; }
body {
    font-family: var(--font-body);
    background: var(--bg-void);
    color: var(--text-primary);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.6;
    cursor: auto;
    transition: background 0.4s ease, color 0.4s ease;
}
a { text-decoration: none; color: inherit; transition: color 0.3s; cursor: pointer; }
button { border: none; background: none; cursor: pointer; font-family: inherit; color: inherit; }
img { display: block; max-width: 100%; }

/* Utility */
.desktop-only { display: flex; }
.mobile-only { display: none !important; }

/* Icons */
.icon-sm { width: 16px; height: 16px; display: inline-block; vertical-align: middle; }
.icon-xs { width: 14px; height: 14px; display: inline-block; vertical-align: middle; }

/* ==================================================
   NAV ICONS
   ================================================== */
.nav-icon {
    width: 15px;
    height: 15px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
    opacity: 0.7;
    transition: opacity 0.3s;
}
.nav-link:hover .nav-icon {
    opacity: 1;
}
.nav-link.active .nav-icon {
    opacity: 1;
    color: var(--accent);
}

.mobile-nav-icon {
    width: 22px;
    height: 22px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 12px;
    opacity: 0.6;
    flex-shrink: 0;
}

/* ==================================================
   THEME TOGGLE BUTTON
   ================================================== */
.theme-toggle {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--btn-ghost-bg);
    border: 1px solid var(--border-glass);
    transition: all 0.3s var(--ease-out-expo);
    cursor: pointer;
    flex-shrink: 0;
}
.theme-toggle:hover {
    background: var(--btn-ghost-hover-bg);
    border-color: var(--border-hover);
    transform: scale(1.05);
}
.theme-toggle:active {
    transform: scale(0.95);
}
.theme-icon {
    width: 18px;
    height: 18px;
    position: absolute;
    transition: all 0.4s var(--ease-out-expo);
    color: var(--text-primary);
}
/* Dark mode: show sun, hide moon */
[data-theme="dark"] .sun-icon {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}
[data-theme="dark"] .moon-icon {
    opacity: 0;
    transform: rotate(-90deg) scale(0.5);
}
/* Light mode: show moon, hide sun */
[data-theme="light"] .sun-icon {
    opacity: 0;
    transform: rotate(90deg) scale(0.5);
}
[data-theme="light"] .moon-icon {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

.theme-toggle-mobile {
    width: 36px;
    height: 36px;
}
.theme-toggle-mobile .theme-icon {
    width: 16px;
    height: 16px;
}

/* ==================================================
   CUSTOM CURSOR
   ================================================== */

/* ==================================================
   SOCIAL PROOF TICKER
   ================================================== */
.top-ticker {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--ticker-height);
    background: var(--ticker-bg);
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    overflow: hidden;
    z-index: 1000;
    font-size: 0.72rem;
    color: var(--text-muted);
    letter-spacing: 0.5px;
    font-weight: 500;
    transition: background 0.4s ease;
}
.ticker-track {
    display: flex;
    white-space: nowrap;
    animation: ticker 60s linear infinite;
    gap: 32px;
    padding-left: 32px;
    will-change: transform;
}
.ticker-track span {
    display: flex;
    align-items: center;
    gap: 6px;
}
.ticker-track .dot { color: var(--border-subtle); font-size: 0.5rem; }
.ticker-track .icon-sm { color: var(--accent); opacity: 0.7; }

@keyframes ticker {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ==================================================
   BACKGROUND SYSTEM
   ================================================== */
.bg-elements {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
    transition: opacity 0.4s ease;
}
[data-theme="light"] .bg-elements {
    opacity: 0.4;
}
.bg-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, rgba(128,128,128,0.04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(128,128,128,0.04) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse 80% 60% at 65% 35%, black 20%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 65% 35%, black 20%, transparent 70%);
}
.bg-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    will-change: opacity;
}
.bg-glow-1 {
    top: -20%;
    left: -5%;
    width: 50vw;
    height: 50vh;
    background: radial-gradient(ellipse at center, rgba(128,128,128,0.03) 0%, transparent 70%);
}
.bg-glow-2 {
    bottom: -30%;
    right: -10%;
    width: 60vw;
    height: 60vh;
    background: radial-gradient(ellipse at center, rgba(128,128,128,0.02) 0%, transparent 70%);
}
.bg-glow-accent {
    top: 15%;
    right: 5%;
    width: 50vw;
    height: 50vh;
    background: radial-gradient(ellipse at center, rgba(77,124,255,0.04) 0%, transparent 60%);
}

/* ==================================================
   PREMIUM NAVBAR
   ================================================== */
.navbar {
    position: fixed;
    top: var(--ticker-height);
    left: 0;
    width: 100%;
    height: var(--nav-height);
    z-index: 100;
    transition: all 0.7s var(--ease-out-expo);
    border-bottom: 1px solid transparent;
}
.navbar.scrolled {
    height: 64px;
    background: var(--nav-scrolled-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border-glass);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

.nav-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 48px;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Logo */
.nav-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: 0.3px;
    color: var(--text-primary);
}
.logo-mark {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--btn-ghost-bg);
    border: 1px solid var(--border-glass);
    border-radius: 10px;
    transition: all 0.3s;
    color: var(--logo-svg-color);
}
.nav-logo:hover .logo-mark {
    border-color: var(--border-hover);
    box-shadow: 0 0 20px var(--accent-dim);
}
.logo-text { opacity: 0.95; }

/* Nav Links */
.nav-links { display: flex; gap: 24px; }
.nav-link {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-muted);
    letter-spacing: 0.3px;
    position: relative;
    padding: 4px 0;
    transition: color 0.3s var(--ease-out-expo);
    display: inline-flex;
    align-items: center;
}
.nav-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0%;
    height: 1px;
    background: var(--accent);
    transition: width 0.4s var(--ease-out-expo);
}
.nav-link:hover { color: var(--text-primary); }
.nav-link:hover::after { width: 100%; }
.nav-link.active { color: var(--text-primary); }
.nav-link.active::after { width: 100%; background: var(--text-primary); }

/* Nav Actions */
.nav-actions { display: flex; align-items: center; gap: 20px; }
.lang-switch {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
}
.lang-active { color: var(--text-primary); }
.lang-divider { color: var(--border-subtle); }
.lang-dim { color: var(--text-muted); transition: color 0.3s; }
.lang-switch:hover .lang-dim { color: var(--text-secondary); }
.login-link { font-size: 0.82rem; font-weight: 500; color: var(--text-secondary) !important; }
.login-link:hover { color: var(--text-primary) !important; }

/* ==================================================
   BUTTONS
   ================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 100px;
    font-weight: 500;
    font-size: 0.88rem;
    letter-spacing: 0.2px;
    transition: all 0.4s var(--ease-out-expo);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
}
.btn-nav { padding: 10px 22px; font-size: 0.82rem; }
.btn-lg { padding: 16px 36px; font-size: 0.95rem; }

.btn-primary {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-color);
    box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}
.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.2);
}
.btn-shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: left 0.6s var(--ease-out-expo);
}
.btn-primary:hover .btn-shine { left: 100%; }

.btn-ghost {
    background: var(--btn-ghost-bg);
    border: 1px solid var(--btn-ghost-border);
    color: var(--text-primary);
}
.btn-ghost:hover {
    background: var(--btn-ghost-hover-bg);
    border-color: var(--border-hover);
    transform: translateY(-1px);
}

.btn-play-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--btn-primary-bg);
    color: var(--btn-primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.btn-arrow {
    display: flex;
    align-items: center;
    transition: transform 0.3s;
}
.btn:hover .btn-arrow { transform: translateX(3px); }

.glow-btn::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 100px;
    background: linear-gradient(90deg, transparent, rgba(77,124,255,0.6), transparent);
    z-index: -1;
    filter: blur(10px);
    opacity: 0;
    transition: opacity 0.5s;
}
.glow-btn:hover::before { opacity: 1; }

.btn-text { position: relative; z-index: 2; pointer-events: none; }
.magnetic { display: inline-flex; }

/* ==================================================
   MOBILE HAMBURGER & NAV RIGHT
   ================================================== */
.nav-right-mobile {
    display: none !important;
    align-items: center;
    gap: 12px;
}
.mobile-menu-toggle { 
    z-index: 1001; 
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hamburger {
    width: 22px;
    height: 16px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.hamburger span {
    display: block;
    width: 100%;
    height: 1.5px;
    background: var(--text-primary);
    border-radius: 2px;
    transition: all 0.4s var(--ease-out-expo);
    transform-origin: center;
}
.mobile-menu-toggle.active .hamburger span:nth-child(1) { transform: translateY(7.25px) rotate(45deg); }
.mobile-menu-toggle.active .hamburger span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.mobile-menu-toggle.active .hamburger span:nth-child(3) { transform: translateY(-7.25px) rotate(-45deg); }

/* ==================================================
   FULLSCREEN MOBILE MENU
   ================================================== */
.mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 999;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}
.mobile-menu-bg {
    position: absolute;
    inset: 0;
    background: var(--mobile-menu-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}
.mobile-menu.active { 
    pointer-events: auto; 
    opacity: 1;
    visibility: visible;
}

.mobile-menu-content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 0 24px;
}
.mobile-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    height: 64px;
    border-bottom: 1px solid var(--border-subtle);
}
.mobile-menu-close {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--btn-ghost-bg);
    border: 1px solid var(--border-glass);
    color: var(--text-primary);
    transition: all 0.3s ease;
    cursor: pointer;
}
.mobile-menu-close:hover {
    background: var(--btn-ghost-hover-bg);
    border-color: var(--border-hover);
}

.mobile-nav-links {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    justify-content: center;
    padding: 30px 0;
}
.mobile-link-wrap { overflow: hidden; }
.mobile-link {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 4vw, 2.5rem);
    font-weight: 500;
    color: var(--text-primary);
    transform: translateY(110%);
    transition: color 0.3s;
    padding: 8px 0;
    line-height: 1.2;
}
.mobile-link::before {
    content: attr(data-index);
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--text-muted);
    opacity: 0.5;
    min-width: 20px;
}
.mobile-link:hover { color: var(--accent); }
.mobile-link.active { color: var(--accent); }

/* Fix mobile menu icon color */
.mobile-link .mobile-nav-icon {
    color: var(--text-secondary);
}
.mobile-link:hover .mobile-nav-icon {
    color: var(--accent);
}

.mobile-nav-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--border-subtle);
    padding: 24px 0;
    opacity: 0;
    transform: translateY(20px);
}
.mobile-footer-left { display: flex; align-items: center; gap: 24px; }
.mobile-link-small { font-size: 0.9rem; font-weight: 500; color: var(--text-secondary); }
.lang-switch-mobile { font-size: 0.9rem; font-weight: 500; color: var(--text-primary); }
.lang-switch-mobile .lang-dim { color: var(--text-muted); }

/* ==================================================
   HERO SECTION
   ================================================== */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding-top: calc(var(--ticker-height) + var(--nav-height) + 40px);
    padding-bottom: 80px;
    position: relative;
    z-index: 2;
    overflow: hidden;
}
.hero-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 48px;
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 60px;
    align-items: center;
    width: 100%;
}

/* Hero Content (Left) */
.hero-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    z-index: 5;
}

/* Trust Badge */
.trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 18px;
    background: var(--accent-dim);
    border: 1px solid rgba(77, 124, 255, 0.15);
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 500;
    margin-bottom: 36px;
    color: var(--text-secondary);
    opacity: 0;
    transform: translateY(20px);
}
.badge-pulse {
    width: 7px;
    height: 7px;
    background: var(--accent);
    border-radius: 50%;
    box-shadow: 0 0 12px var(--accent-glow);
    animation: pulse-accent 2.5s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes pulse-accent {
    0%, 100% { box-shadow: 0 0 6px var(--accent-glow); transform: scale(1); }
    50% { box-shadow: 0 0 16px var(--accent-glow); transform: scale(1.2); }
}

/* Hero Title */
.hero-title {
    font-family: var(--font-display);
    font-size: clamp(3.2rem, 5.5vw, 5.5rem);
    line-height: 1.05;
    font-weight: 500;
    letter-spacing: -2px;
    margin-bottom: 28px;
}
.line-wrap {
    overflow: hidden;
    display: block;
    position: relative;
}
.split-line {
    display: inline-block;
    transform: translateY(110%);
    opacity: 0;
}
.accent-line { color: var(--text-primary); }

.dynamic-word-container {
    position: relative;
    display: inline-block;
    color: var(--accent);
    vertical-align: baseline;
}
.dynamic-word {
    position: absolute;
    left: 0;
    top: 0;
    display: inline-block;
    opacity: 0;
    visibility: hidden;
    white-space: nowrap;
    pointer-events: none;
}
.dynamic-word.active { opacity: 1; visibility: visible; }
.dynamic-word-sizer {
    display: inline-block;
    visibility: hidden;
    white-space: nowrap;
    pointer-events: none;
}

/* Hero Description */
.hero-desc {
    font-size: 1.1rem;
    color: var(--text-secondary);
    line-height: 1.7;
    max-width: 500px;
    margin-bottom: 44px;
    font-weight: 400;
    opacity: 0;
    transform: translateY(20px);
}

/* Hero CTA */
.hero-cta {
    display: flex;
    gap: 16px;
    margin-bottom: 56px;
    opacity: 0;
    transform: translateY(20px);
    flex-wrap: wrap;
}

/* Micro Trust Stats */
.micro-trust {
    display: flex;
    align-items: center;
    gap: 32px;
    opacity: 0;
    transform: translateY(20px);
}
.micro-stat h4 {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 4px;
    letter-spacing: -0.5px;
}
.micro-stat p {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-weight: 500;
}
.micro-divider {
    width: 1px;
    height: 36px;
    background: var(--border-subtle);
}

/* ==================================================
   THE OPERATOR ROOM (RIGHT SIDE)
   ================================================== */
.hero-visual {
    position: relative;
    height: 620px;
    perspective: 1400px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.operator-room {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transform: rotateY(-12deg) rotateX(4deg);
    opacity: 0;
    will-change: transform;
}

/* Panel Base Styles */
.op-panel {
    background: var(--panel-bg);
    border: 1px solid var(--border-glass);
    border-radius: 16px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255,255,255,0.05) inset;
    transition: border-color 0.3s, box-shadow 0.3s, background 0.4s;
}
.op-panel:hover {
    border-color: var(--border-hover);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255,255,255,0.08) inset;
}
.op-panel-float {
    background: var(--panel-float-bg);
    border-radius: 14px;
    padding: 14px 16px;
}

/* Layer Positioning */
.op-layer {
    position: absolute;
    will-change: transform;
}
.op-layer-main { top: 2%; left: 0; width: 420px; z-index: 2; }
.op-layer-product { top: 8%; right: -10px; width: 220px; z-index: 3; }
.op-layer-notif { bottom: 22%; left: -40px; width: 270px; z-index: 4; }
.op-layer-ads { bottom: 5%; right: 20px; width: 220px; z-index: 3; }
.op-layer-chat { top: 55%; left: 10px; width: 280px; z-index: 5; }
.op-layer-payment { top: 40%; right: -30px; width: 240px; z-index: 4; }

/* Main Panel (Analytics Dashboard) */
.op-panel-main {
    padding: 0;
    overflow: hidden;
    border-radius: 18px;
}
.op-panel-main::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, var(--accent-dim), transparent 50%);
    pointer-events: none;
    border-radius: 18px;
}

/* Panel Chrome (Title Bar) */
.panel-chrome {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-subtle);
}
.chrome-left { display: flex; align-items: center; gap: 12px; }
.chrome-dots { display: flex; gap: 5px; }
.chrome-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(128,128,128,0.2);
}
.chrome-dots span:first-child { background: rgba(255, 95, 87, 0.7); }
.chrome-dots span:nth-child(2) { background: rgba(255, 189, 46, 0.7); }
.chrome-dots span:nth-child(3) { background: rgba(39, 201, 63, 0.7); }
.chrome-title {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
}
.chrome-right { display: flex; align-items: center; }
.live-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.68rem;
    font-weight: 500;
    color: var(--green);
    background: var(--green-dim);
    padding: 4px 10px;
    border-radius: 100px;
    border: 1px solid rgba(52, 211, 153, 0.2);
}
.live-dot {
    width: 6px;
    height: 6px;
    background: var(--green);
    border-radius: 50%;
    animation: pulse-green 2s infinite;
}
@keyframes pulse-green {
    0%, 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.4); }
    70% { box-shadow: 0 0 0 5px rgba(52, 211, 153, 0); }
}

/* Panel Body */
.panel-body-main { padding: 20px; }
.metric-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.metric-card {
    background: var(--metric-card-bg);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 14px;
}
.metric-label {
    display: block;
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 6px;
    font-weight: 500;
}
.metric-value {
    display: block;
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: -0.5px;
    margin-bottom: 6px;
    color: var(--text-primary);
}
.metric-trend {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.72rem;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 4px;
}
.metric-trend.positive {
    color: var(--green);
    background: var(--green-dim);
}

/* Revenue Graph */
.graph-wrapper { position: relative; height: 80px; margin-top: 8px; }
.revenue-graph { width: 100%; height: 100%; overflow: visible; }
.graph-line {
    stroke-dasharray: 1200;
    stroke-dashoffset: 1200;
    animation: draw-line 2.5s ease-out forwards 1s;
}
.graph-fill { opacity: 0; animation: fade-up 1.5s ease-out forwards 1.5s; }
.graph-dot { opacity: 0; animation: pop-in 0.3s ease-out forwards 3s; }
.graph-dot-glow { opacity: 0; animation: pop-in 0.3s ease-out forwards 3s; }

@keyframes draw-line { to { stroke-dashoffset: 0; } }
@keyframes fade-up { to { opacity: 1; } }
@keyframes pop-in { to { opacity: 1; } }

.graph-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 0.62rem;
    color: var(--text-muted);
    font-weight: 500;
    letter-spacing: 0.3px;
}

/* Floating Product Card */
.op-layer-product .op-panel-float { padding: 10px; }
.float-product-img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 10px;
}
.float-product-info { padding: 0 4px 4px; }
.float-product-name {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--text-primary);
}
.float-product-meta {
    display: flex;
    gap: 12px;
    font-size: 0.7rem;
    color: var(--text-secondary);
    margin-bottom: 8px;
}
.float-product-meta span { display: flex; align-items: center; gap: 4px; }
.float-product-meta .icon-xs { color: var(--accent); }
.float-product-price {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--accent);
}

/* Notification Panel */
.op-panel-notif {
    display: flex;
    align-items: center;
    gap: 12px;
}
.notif-icon {
    width: 38px;
    height: 38px;
    background: var(--accent-dim);
    border: 1px solid rgba(77,124,255,0.2);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--accent);
}
.notif-body { flex: 1; }
.notif-title { display: block; font-size: 0.82rem; font-weight: 500; color: var(--text-primary); }
.notif-sub { display: block; font-size: 0.68rem; color: var(--text-muted); margin-top: 2px; }
.notif-status { flex-shrink: 0; }
.status-dot {
    display: block;
    width: 8px;
    height: 8px;
    background: var(--green);
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(52,211,153,0.5);
}

/* Ad Performance Mini Widget */
.op-panel-mini { padding: 14px 16px; }
.mini-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 12px;
}
.mini-header .icon-xs { color: var(--accent); }
.mini-bars { display: flex; flex-direction: column; gap: 8px; }
.mini-bar-row { display: flex; align-items: center; gap: 8px; }
.mini-bar-label { font-size: 0.65rem; color: var(--text-muted); min-width: 42px; font-weight: 500; }
.mini-bar-track {
    flex: 1;
    height: 5px;
    background: var(--metric-card-bg);
    border-radius: 3px;
    overflow: hidden;
}
.mini-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), rgba(77,124,255,0.6));
    border-radius: 3px;
}
.mini-bar-val { font-size: 0.65rem; color: var(--text-secondary); font-weight: 500; min-width: 32px; text-align: right; }

/* Customer Chat Widget */
.op-panel-chat {
    display: flex;
    align-items: center;
    gap: 10px;
}
.chat-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid var(--border-glass);
}
.chat-avatar img { width: 100%; height: 100%; object-fit: cover; }
.chat-body { flex: 1; min-width: 0; }
.chat-name { display: block; font-size: 0.75rem; font-weight: 600; margin-bottom: 2px; color: var(--text-primary); }
.chat-msg {
    display: block;
    font-size: 0.7rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chat-time { font-size: 0.62rem; color: var(--text-muted); flex-shrink: 0; }

/* Payment Widget */
.op-panel-payment {
    display: flex;
    align-items: center;
    gap: 10px;
}
.payment-icon {
    width: 36px;
    height: 36px;
    background: var(--green-dim);
    border: 1px solid rgba(52,211,153,0.2);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--green);
}
.payment-body { flex: 1; }
.payment-title { display: block; font-size: 0.72rem; color: var(--text-muted); font-weight: 500; }
.payment-amount { display: block; font-size: 0.95rem; font-weight: 600; color: var(--green); margin-top: 2px; }
.payment-check { color: var(--green); flex-shrink: 0; }

/* Ecosystem Glows */
.ecosystem-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 300px;
    background: var(--accent);
    filter: blur(100px);
    opacity: 0.1;
    z-index: 0;
    pointer-events: none;
}
.ecosystem-glow-2 {
    position: absolute;
    top: 30%;
    left: 30%;
    width: 200px;
    height: 200px;
    background: rgba(128,128,128,0.5);
    filter: blur(80px);
    opacity: 0.02;
    z-index: 0;
    pointer-events: none;
}


/* ==================================================
   RE-DESIGNED PHILOSOPHY SECTION (Bento Layout)
   ================================================== */
.philosophy {
    position: relative;
    padding: 120px 0 160px;
    z-index: 3;
    background: transparent;
    overflow: hidden;
}

.philo-bg-glow {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
    width: 70vw;
    height: 70vh;
    background: radial-gradient(ellipse at center, var(--accent-glow) 0%, transparent 60%);
    filter: blur(140px);
    z-index: 1;
    opacity: 0.3;
    pointer-events: none;
}

.philo-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 48px;
    position: relative;
    z-index: 2;
}

/* Cinematic Header */
.philo-header {
    margin-bottom: 80px;
    text-align: left;
    max-width: 900px;
}

.cinematic-statement {
    font-family: var(--font-display);
    font-size: clamp(3rem, 6vw, 5.5rem);
    line-height: 1.05;
    font-weight: 500;
    letter-spacing: -1.5px;
    color: var(--text-secondary);
}

/* Reduced size variant */
.cinematic-statement-sm {
    font-size: clamp(2.4rem, 4.5vw, 4rem);
    letter-spacing: -1px;
    line-height: 1.1;
}

.cinematic-statement .accent-line {
    color: var(--text-primary);
}

.philo-line {
    display: inline-block;
    transform: translateY(110%);
    opacity: 0;
    will-change: transform, opacity;
}

/* Bento Grid System */
.bento-wrapper {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: minmax(180px, auto);
    gap: 24px;
}

.bento-box {
    border-radius: 24px;
    position: relative;
    overflow: hidden;
}

/* Box spanning config */
.box-image { grid-column: span 8; grid-row: span 2; }
.box-content { grid-column: span 4; }
.box-pillars { grid-column: span 8; }

/* Image Box */
.bento-image-mask {
    position: absolute;
    inset: 0;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid var(--border-glass);
    box-shadow: 0 40px 80px rgba(0,0,0,0.2);
}

.bento-parallax-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.15) translateY(-5%);
    will-change: transform;
}

.bento-image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top right, var(--bg-void) 0%, transparent 60%);
    opacity: 0.6;
}

/* Glass Content Cards */
.glass-card {
    background: var(--bg-glass);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--border-glass);
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    transition: background 0.4s ease, border-color 0.4s ease, transform 0.4s var(--ease-out-expo);
}

.glass-card:hover {
    background: var(--bg-glass-hover);
    border-color: var(--border-hover);
    transform: translateY(-4px);
}

.card-label {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 24px;
    display: block;
    font-weight: 600;
}

.card-title {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 12px;
    letter-spacing: -0.5px;
    line-height: 1.1;
}

.card-desc {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Floating Pillars Grid */
.pillars-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    height: 100%;
    align-items: center;
    align-content: flex-start;
}

.floating-pillar {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
    border-radius: 100px;
    background: var(--panel-bg);
    border: 1px solid var(--border-glass);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    will-change: transform;
    transition: border-color 0.3s, background 0.3s;
}

.floating-pillar:hover {
    background: var(--bg-glass-hover);
    border-color: var(--border-hover);
}

.pillar-icon {
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pillar-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.pillar-text {
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--text-primary);
    letter-spacing: 0.3px;
}

/* ==================================================
   PREMIUM SERVICES SECTION — REDESIGNED BENTO LAYOUT
   ================================================== */
.services-section {
    position: relative;
    padding: 10px 0 180px;
    z-index: 3;
    background: transparent;
    overflow: hidden;
}

.services-bg-glow {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    width: 80vw;
    height: 60vh;
    background: radial-gradient(ellipse at center, var(--accent-glow) 0%, transparent 65%);
    filter: blur(160px);
    opacity: 0.2;
    pointer-events: none;
    z-index: 0;
}

.services-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 48px;
    position: relative;
    z-index: 2;
}

/* Section Header */
.services-header {
    text-align: center;
    margin-bottom: 80px;
    position: relative;
}

.services-header-accent {
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, var(--accent), rgba(77, 124, 255, 0.3));
    border-radius: 2px;
    margin: 0 auto 24px;
}

.services-label {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 2.5px;
    margin-bottom: 20px;
    padding: 8px 20px;
    background: var(--accent-dim);
    border: 1px solid rgba(77, 124, 255, 0.15);
    border-radius: 100px;
}

.services-title {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 4vw, 3.5rem);
    font-weight: 500;
    letter-spacing: -1px;
    line-height: 1.15;
    color: var(--text-primary);
    margin-bottom: 16px;
}

.services-title-accent {
    color: var(--accent);
}

.services-subtitle {
    font-size: 1.05rem;
    color: var(--text-secondary);
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.6;
}

/* ===== Bento Services Grid ===== */
.services-bento {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.svc-grid-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
}

/* ===== Service Card Base ===== */
.svc-card {
    position: relative;
    border-radius: 28px;
    overflow: visible;
    transition: transform 0.6s var(--ease-out-expo);
    perspective: 1000px;
}

.svc-card:hover {
    transform: translateY(-6px);
}

/* Animated Gradient Border */
.svc-card-border {
    position: absolute;
    inset: -1px;
    border-radius: 29px;
    background: linear-gradient(135deg, var(--border-glass), var(--border-glass));
    z-index: 0;
    transition: all 0.5s ease;
}

.svc-card:hover .svc-card-border {
    background: linear-gradient(135deg, var(--accent), rgba(77, 124, 255, 0.3), var(--accent));
    background-size: 200% 200%;
    animation: gradient-border-spin 3s linear infinite;
}

@keyframes gradient-border-spin {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Floating Glow Behind Card */
.svc-card-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70%;
    height: 70%;
    background: var(--accent);
    filter: blur(80px);
    opacity: 0;
    transition: opacity 0.6s ease;
    z-index: -1;
    pointer-events: none;
    border-radius: 50%;
}

.svc-card:hover .svc-card-glow {
    opacity: 0.12;
}

/* Card Inner (Glassmorphism) */
.svc-card-inner {
    position: relative;
    z-index: 1;
    background: var(--bg-glass);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-radius: 28px;
    overflow: hidden;
    border: 1px solid var(--border-glass);
    transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

.svc-card:hover .svc-card-inner {
    background: var(--bg-glass-hover);
    border-color: var(--border-hover);
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.25), 0 0 60px var(--accent-dim);
}

/* ===== Featured Card (Full Width Split Layout) ===== */
.svc-card-featured .svc-card-inner {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    min-height: 480px;
}

.svc-featured-image {
    position: relative;
    overflow: hidden;
}

.svc-featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s var(--ease-out-expo);
}

.svc-card-featured:hover .svc-featured-image img {
    transform: scale(1.06);
}

.svc-image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, transparent 50%, var(--bg-void) 100%);
    opacity: 0.4;
    pointer-events: none;
}

.svc-featured-content {
    padding: 48px 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* ===== Standard Cards ===== */
.svc-card-standard .svc-card-inner {
    display: flex;
    flex-direction: column;
}

.svc-standard-image {
    position: relative;
    width: 100%;
    height: 240px;
    overflow: hidden;
}

.svc-standard-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s var(--ease-out-expo);
}

.svc-card-standard:hover .svc-standard-image img {
    transform: scale(1.06);
}

.svc-standard-image .svc-image-overlay {
    background: linear-gradient(to bottom, transparent 40%, var(--bg-void) 100%);
    opacity: 0.6;
}

.svc-standard-content {
    padding: 36px 32px 40px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* ===== Card Top (Number + Badge) ===== */
.svc-card-top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.svc-number {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--accent);
    background: var(--accent-dim);
    border: 1px solid rgba(77, 124, 255, 0.2);
    padding: 6px 12px;
    border-radius: 8px;
    letter-spacing: 1px;
}

.svc-badge-popular {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    color: #F59E0B;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.2);
    padding: 6px 14px;
    border-radius: 100px;
    letter-spacing: 0.3px;
}

.svc-badge-popular svg {
    color: #F59E0B;
}

/* ===== Card Title ===== */
.svc-card-title {
    font-family: var(--font-display);
    font-size: 1.8rem;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 14px;
    letter-spacing: -0.5px;
    line-height: 1.15;
}

.svc-card-featured .svc-card-title {
    font-size: 2.2rem;
}

/* ===== Card Description ===== */
.svc-card-desc {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.65;
    margin-bottom: 24px;
}

/* ===== Feature List ===== */
.svc-features {
    list-style: none;
    padding: 0;
    margin: 0 0 28px 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.svc-features li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.88rem;
    color: var(--text-secondary);
    font-weight: 400;
}

.svc-features li svg {
    color: var(--green);
    flex-shrink: 0;
}

/* ===== Card CTA ===== */
.svc-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--accent);
    padding: 12px 24px;
    border-radius: 100px;
    background: var(--accent-dim);
    border: 1px solid rgba(77, 124, 255, 0.2);
    transition: all 0.4s var(--ease-out-expo);
    width: fit-content;
    margin-top: auto;
}

.svc-card-cta svg {
    width: 16px;
    height: 16px;
    transition: transform 0.3s var(--ease-out-expo);
}

.svc-card-cta:hover {
    background: var(--accent);
    color: #FFFFFF;
    border-color: var(--accent);
    transform: translateX(4px);
    box-shadow: 0 8px 24px var(--accent-glow);
}

.svc-card-cta:hover svg {
    transform: translateX(4px);
}

/* ===== 3D Tilt Effect (CSS-only subtle) ===== */
.svc-card[data-tilt] .svc-card-inner {
    transition: transform 0.4s var(--ease-out-expo), background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

.svc-card[data-tilt]:hover .svc-card-inner {
    transform: perspective(1000px) rotateX(1deg) rotateY(-1deg);
}

/* ==================================================
   SERVICES SECTION RESPONSIVE (Including Desktop)
   ================================================== */
@media (max-width: 1024px) {
    .svc-card-featured .svc-card-inner {
        grid-template-columns: 1fr;
        min-height: auto;
    }
    .svc-featured-image {
        height: 280px;
    }
    .svc-featured-content {
        padding: 36px 32px;
    }
    .svc-grid-row {
        grid-template-columns: 1fr 1fr;
    }
}

/* ==================================================
   Specific Responsive adjustments for Philosophy
   ================================================== */
@media (max-width: 1024px) {
    .philo-header { text-align: center; margin: 0 auto 60px; }
    .box-image { grid-column: span 12; min-height: 400px; }
    .box-content { grid-column: span 6; }
    .box-pillars { grid-column: span 12; }
    .pillars-grid { justify-content: center; padding-top: 20px; }
}

@media (max-width: 768px) {
    /* The ticker bar is hidden on mobile (see navbar.css), but .hero's
       padding-top still reserved space for it via --ticker-height. Zero it
       out here so the hero doesn't leave an empty gap under the navbar. */
    :root { --ticker-height: 0px; }

    .philosophy { padding: 80px 0; }
    .philo-container { padding: 0 20px; }
    .cinematic-statement { font-size: clamp(2.5rem, 8vw, 3.5rem); letter-spacing: -1px; text-align: left; }
    .cinematic-statement-sm { font-size: clamp(2rem, 6vw, 2.8rem); }
    .bento-wrapper { display: flex; flex-direction: column; gap: 16px; }
    .box-image { height: 350px; min-height: auto; }
    .glass-card { padding: 32px 24px; }
    .card-title { font-size: 1.8rem; }
    .floating-pillar { padding: 14px 20px; font-size: 0.85rem; }
    .pillars-grid { justify-content: flex-start; gap: 12px; padding-top: 10px; }
}

/* ==================================================
   RESPONSIVE DESIGN (Hero/Global)
   ================================================== */
@media (max-width: 1200px) {
    .hero-title { font-size: clamp(3rem, 4.5vw, 4.5rem); }
    .hero-container { gap: 40px; }
    .op-layer-main { width: 380px; }
    .operator-room { transform: scale(0.9) rotateY(-10deg) rotateX(4deg); transform-origin: center right; }
    .nav-container { padding: 0 32px; }
    .nav-links { gap: 16px; }
    .nav-link { font-size: 0.75rem; }
    .nav-icon { width: 13px; height: 13px; }
}

@media (max-width: 1024px) {
    .desktop-only { display: none !important; }
    .mobile-only { display: flex !important; }
    .nav-right-mobile { display: flex !important; }

    .hero-container { grid-template-columns: 1fr; gap: 60px; }
    .hero-content { align-items: flex-start; text-align: left; }
    .hero-visual { height: 500px; margin: 0 auto; max-width: 600px; width: 100%; }
    .operator-room { transform: scale(0.85) rotateY(-8deg) rotateX(3deg); transform-origin: center; }
    body, a, button, .btn, .lang-switch { cursor: auto; }
}

@media (max-width: 768px) {
    .desktop-only { display: none !important; }
    .mobile-only { display: flex !important; }
    .nav-right-mobile { display: flex !important; }
    .top-ticker { display: none; }
    body, a, button, .btn, .lang-switch { cursor: auto; }

    .navbar {
        top: 0;
        height: 64px;
        background: var(--nav-scrolled-bg);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border-bottom: 1px solid var(--border-subtle);
    }
    .navbar.scrolled { top: 0; height: 58px; }
    .nav-container { padding: 0 20px; }

    .hero {
        padding-top: 100px;
        padding-bottom: 60px;
        min-height: auto;
    }
    .hero-container { padding: 0 20px; }
    .hero-title { font-size: clamp(2.2rem, 7vw, 3.2rem); letter-spacing: -1px; }
    .hero-desc { font-size: 0.95rem; max-width: 100%; }

    .hero-cta { flex-direction: column; width: 100%; gap: 12px; }
    .hero-cta .btn { width: 100%; justify-content: center; }

    .micro-trust { flex-wrap: wrap; gap: 20px; }
    .micro-divider { display: none; }

    .hero-visual { height: auto; min-height: 340px; margin-top: 40px; perspective: none; overflow: visible; }
    .operator-room { transform: none; transform-style: flat; display: flex; flex-direction: column; gap: 12px; position: relative; width: 100%; height: auto; }
    .op-layer { position: relative !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; width: 100% !important; transform: none !important; }
    .op-layer-main { order: 1; }
    .op-panel-main { border-radius: 14px; }
    .op-layer-notif { order: 2; }
    .op-layer-payment { order: 3; }
    .op-layer-ads { order: 4; }
    .op-layer-product { display: none; }
    .op-layer-chat { display: none; }
    .ecosystem-glow, .ecosystem-glow-2 { display: none; }

    .trust-badge { font-size: 0.68rem; padding: 6px 14px; }
}

@media (max-width: 480px) {
    .hero-title { font-size: 2rem; letter-spacing: -0.5px; }
    .hero-cta .btn-lg { padding: 14px 28px; font-size: 0.88rem; }
    .micro-stat h4 { font-size: 1.1rem; }
    .micro-stat p { font-size: 0.62rem; }
    .hero-container { padding: 0 16px; }
    .nav-container { padding: 0 16px; }
    .hero-desc { font-size: 0.9rem; margin-bottom: 32px; }
    .trust-badge { margin-bottom: 24px; }
    .metric-grid { grid-template-columns: 1fr; gap: 10px; }
    .metric-value { font-size: 1.3rem; }
}

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

/* ==================================================
   PREMIUM TESTIMONIALS / SOCIAL PROOF SECTION
   ================================================== */
.testimonials-section {
    position: relative;
    padding: 120px 0 160px;
    z-index: 3;
    background: transparent;
    overflow: hidden;
}

.testimonials-bg-glow {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
    width: 80vw;
    height: 70vh;
    background: radial-gradient(ellipse at center, var(--accent-glow) 0%, transparent 60%);
    filter: blur(160px);
    opacity: 0.15;
    pointer-events: none;
    z-index: 0;
}

.testimonials-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 48px;
    position: relative;
    z-index: 2;
}

/* Section Header */
.testimonials-header {
    text-align: center;
    margin-bottom: 60px;
    position: relative;
}

.testimonials-header-accent {
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, var(--accent), rgba(77, 124, 255, 0.3));
    border-radius: 2px;
    margin: 0 auto 24px;
}

.testimonials-label {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 2.5px;
    margin-bottom: 20px;
    padding: 8px 20px;
    background: var(--accent-dim);
    border: 1px solid rgba(77, 124, 255, 0.15);
    border-radius: 100px;
}

.testimonials-title {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 4vw, 3.5rem);
    font-weight: 500;
    letter-spacing: -1px;
    line-height: 1.15;
    color: var(--text-primary);
    margin-bottom: 16px;
}

.testimonials-title-accent {
    color: var(--accent);
}

.testimonials-subtitle {
    font-size: 1.05rem;
    color: var(--text-secondary);
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.6;
}

/* ===== Social Proof Stats Bar ===== */
.proof-stats-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    padding: 32px 48px;
    margin-bottom: 64px;
    background: var(--bg-glass);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--border-glass);
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
}

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

.proof-stat-number {
    font-family: var(--font-display);
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.5px;
    margin-bottom: 4px;
}

.proof-stat-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
}

.proof-stat-divider {
    width: 1px;
    height: 40px;
    background: var(--border-glass);
}

/* ===== Testimonials Grid (Masonry-like) ===== */
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 64px;
}

/* Featured card spans 2 columns */
.testimonial-featured {
    grid-column: span 2;
    grid-row: span 1;
}

/* ===== Testimonial Card Base ===== */
.testimonial-card {
    position: relative;
    border-radius: 24px;
    overflow: visible;
    transition: transform 0.6s var(--ease-out-expo);
}

.testimonial-card:hover {
    transform: translateY(-6px);
}

/* Card Glow */
.testimonial-card-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    height: 60%;
    background: var(--accent);
    filter: blur(80px);
    opacity: 0;
    transition: opacity 0.6s ease;
    z-index: -1;
    pointer-events: none;
    border-radius: 50%;
}

.testimonial-card:hover .testimonial-card-glow {
    opacity: 0.08;
}

/* Card Inner */
.testimonial-card-inner {
    position: relative;
    z-index: 1;
    background: var(--bg-glass);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-radius: 24px;
    padding: 36px;
    border: 1px solid var(--border-glass);
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

.testimonial-card:hover .testimonial-card-inner {
    background: var(--bg-glass-hover);
    border-color: var(--border-hover);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15), 0 0 40px var(--accent-dim);
}

/* Quote Icon */
.testimonial-quote-icon {
    position: absolute;
    top: 28px;
    right: 32px;
    color: var(--accent);
    opacity: 0.5;
}

/* Revenue Badge */
.testimonial-revenue-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--accent-dim);
    border: 1px solid rgba(77, 124, 255, 0.2);
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--accent);
    margin-bottom: 20px;
    width: fit-content;
}

.testimonial-revenue-badge.badge-green {
    background: var(--green-dim);
    border-color: rgba(52, 211, 153, 0.2);
    color: var(--green);
}

.testimonial-revenue-badge.badge-purple {
    background: rgba(139, 92, 246, 0.1);
    border-color: rgba(139, 92, 246, 0.2);
    color: #8B5CF6;
}

/* Testimonial Text */
.testimonial-text {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.75;
    margin-bottom: 28px;
    flex: 1;
    font-style: italic;
}

.testimonial-featured .testimonial-text {
    font-size: 1.1rem;
    line-height: 1.8;
}

/* Author Section */
.testimonial-author {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 20px;
    border-top: 1px solid var(--border-subtle);
}

.testimonial-avatar {
    position: relative;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
}

.testimonial-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.avatar-ring {
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 2px solid var(--accent);
    opacity: 0.4;
    transition: opacity 0.3s;
}

.testimonial-card:hover .avatar-ring {
    opacity: 0.8;
}

.testimonial-author-info {
    flex: 1;
    min-width: 0;
}

.testimonial-name {
    display: block;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.testimonial-role {
    display: block;
    font-size: 0.72rem;
    color: var(--text-muted);
    font-weight: 500;
}

/* Rating Stars */
.testimonial-rating {
    flex-shrink: 0;
}

.stars {
    display: flex;
    gap: 2px;
}

.stars svg {
    width: 14px;
    height: 14px;
    color: #F59E0B;
}

/* ===== Trust Platforms Bar ===== */
.trust-platforms {
    text-align: center;
}

.trust-platforms-label {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 500;
    margin-bottom: 24px;
}

.trust-logos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}

.trust-logo-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    font-size: 0.82rem;
    font-weight: 500;
    transition: color 0.3s ease;
    padding: 10px 18px;
    border-radius: 12px;
    background: var(--bg-glass);
    border: 1px solid var(--border-subtle);
}

.trust-logo-item:hover {
    color: var(--text-primary);
    border-color: var(--border-hover);
}

.trust-logo-item svg {
    width: 20px;
    height: 20px;
    opacity: 0.7;
}

/* ===== Testimonials Responsive ===== */
@media (max-width: 1200px) {
    .testimonials-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .testimonial-featured {
        grid-column: span 2;
    }
}

/* ==================================================
   MOBILE SLIDER / CAROUSEL IMPLEMENTATION (Services & Testimonials)
   - Using CSS scroll-snap strictly for screens 768px and down.
   ================================================== */
@media (max-width: 768px) {
    .services-section { padding: 80px 0 100px; }
    .services-container { padding: 0 20px; }
    .services-header { margin-bottom: 48px; }
    .services-title { font-size: clamp(1.8rem, 6vw, 2.5rem); }
    
    /* Services: static 2-up-then-1-below grid instead of a slider.
       The slider kept mixing a "featured" card (bigger image/title) with
       "standard" cards in the same swipeable row, which is what made them
       read as inconsistent sizes — replaced with a plain grid where every
       card uses the exact same size/styling, and the last card spans the
       full width underneath the first two. No more swipe/carousel logic
       needed here at all, which also removes this section from every
       carousel-related bug (multi-card skip, black-flash, auto-rewind…). */
    .services-bento {
        display: grid;
        /* minmax(0, 1fr) instead of a bare 1fr — a plain 1fr column can
           still grow past its share to fit a child's min-content (a long
           title, a wide image), which would silently break "both cards
           the same size" whenever the featured/standard cards' content
           lengths differ even slightly. minmax(0, ...) clamps that. */
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 16px;
    }
    /* Flatten inner grid row so its two cards become direct grid items of
       .services-bento (needed for the "last card spans both columns" rule
       below to land on the true last card, not the wrapper). */
    .svc-grid-row {
        display: contents;
    }

    .svc-card {
        max-width: 100%;
        margin-bottom: 0;
    }
    /* 1-to-1 Coaching (the "featured" card) is first and spans the full
       width on its own row; Store Creation and Payment Gateway (both
       "standard" cards) sit side-by-side underneath. Both standard cards
       share the exact same styling/size, so there's no more mismatch —
       the old asymmetry came from pairing the featured card next to a
       standard one; now the featured card is never paired next to
       anything. */
    .svc-card-featured {
        grid-column: 1 / -1;
    }
    .svc-card-featured .svc-card-inner {
        grid-template-columns: 1fr;
    }
    .svc-featured-image, .svc-standard-image { height: 130px; }
    .svc-featured-content, .svc-standard-content { padding: 16px 14px 20px; }
    .svc-card-featured .svc-card-title, .svc-card-title { font-size: 1rem; }
    .svc-card-desc { font-size: 0.8rem; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
    /* The detailed feature bullet list reads cleanly on a full-width
       desktop/slider card but crowds a half-width mobile tile — hide it
       here and keep the compact grid to title + short description + CTA,
       which is what actually looks tidy at this size. */
    .svc-features { display: none; }
    .svc-card, .svc-card-inner { border-radius: 20px; }
    .svc-card-border { border-radius: 21px; }

    /* Convert Testimonials Grid to Horizontal Slider */
    .testimonials-section { padding: 80px 0 100px; }
    .testimonials-container { padding: 0 20px; }
    .testimonials-header { margin-bottom: 40px; }
    .testimonials-title { font-size: clamp(1.8rem, 6vw, 2.5rem); }

    .testimonials-grid {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: flex-start; /* don't stretch every slide to the tallest one */
        /* Arrows/autoplay only, no swipe/drag — overflow:hidden removes all
           native touch/trackpad/mouse-wheel scrolling capability, while
           track.scrollBy()/scrollTo() (button clicks, autoplay ticks) still
           move it perfectly fine programmatically. This is what was
           repeatedly causing multiple cards to move in one gesture and the
           active card to land slightly off-center. */
        overflow-x: hidden;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        scrollbar-width: none;
        gap: 16px;
        padding-bottom: 16px;
        margin-bottom: 0;
        transition: height 0.25s var(--ease-out-quart, ease); /* JS sets an explicit height matching the current slide */
    }
    .testimonials-grid::-webkit-scrollbar { display: none; }
    
    .testimonial-card {
        flex: 0 0 100%;
        scroll-snap-align: center;
        scroll-snap-stop: always; /* same fix as .svc-card above — stop at every card, never skip past several on a fast swipe */
        max-width: 100%;
        margin-bottom: 0;
    }
    .testimonial-featured { grid-column: auto; }
    .testimonial-card-inner { padding: 28px 24px; }
    .testimonial-featured .testimonial-text { font-size: 1rem; }

    /* Slider Controls Style (Appended via JS) — matches the coaching page's
       .ch-results-nav-btn exactly: same size, same solid (non-glass) fill so
       the arrow icon reads clearly instead of blending into the dark page
       background. */
    .mobile-slider-controls {
        display: flex;
        /* Fixed left-to-right visual order (prev, dots, next) regardless of
           page language — see the identical fix + explanation on
           .ch-results-nav in coaching/style.css. The prev/next handlers
           here always move a fixed physical direction, so this is safe. */
        direction: ltr;
        justify-content: center;
        gap: 12px;
        margin-top: 20px;
        width: 100%;
    }
    .slider-btn {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: var(--bg-glass-hover);
        border: 1px solid var(--border-glass);
        color: var(--text-primary);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s ease;
        z-index: 10;
        opacity: 1;
        visibility: visible;
    }
    .slider-btn svg {
        width: 20px;
        height: 20px;
        display: block;
        stroke: currentColor;
    }
    .slider-btn:hover,
    .slider-btn:active {
        background: var(--accent-dim);
        border-color: var(--accent);
        color: var(--accent);
    }
    .slider-btn:active {
        transform: scale(0.92);
    }
    /* No [dir="rtl"] icon mirroring here on purpose. The testimonials
       track above (.testimonials-grid { direction: ltr }, further down
       this file) is deliberately forced to always scroll on a plain LTR
       axis in both languages — see the comment there — so prevBtn always
       physically moves left (toward the first card) and nextBtn always
       physically moves right (toward the last card), in Arabic exactly
       like in English. Mirroring just the SVG glyph (transform:
       scaleX(-1)) used to flip the "<"/">" shapes without touching what
       the buttons actually do, so in Arabic the left button showed ">"
       while still scrolling left, and the right button showed "<" while
       still scrolling right — arrows pointing the opposite way from the
       card movement they caused. Removing the mirror keeps the icon
       shape truthful to the real, language-independent scroll direction. */

    /* Keep remaining responsive rules for other elements */
    .proof-stats-bar {
        flex-wrap: wrap;
        gap: 24px;
        padding: 24px 28px;
        margin-bottom: 40px;
    }
    .proof-stat-divider { display: none; }
    .proof-stat { flex: 1; min-width: 100px; }
    .proof-stat-number { font-size: 1.4rem; }
    .trust-logos { gap: 16px; }
    .trust-logo-item { padding: 8px 14px; font-size: 0.75rem; }
}

@media (max-width: 480px) {
    .services-section { padding: 60px 0 80px; }
    .services-container { padding: 0 16px; }
    /* Keep the 2-up-then-1-below grid uniform at this narrower width too —
       same height/font for featured and standard cards, no bigger/smaller
       distinction between them. */
    .svc-featured-image, .svc-standard-image { height: 110px; }
    .svc-featured-content, .svc-standard-content { padding: 14px 12px 16px; }
    .svc-card-title, .svc-card-featured .svc-card-title { font-size: 0.92rem; }
    .svc-card-desc { font-size: 0.78rem; }
    .svc-features li { font-size: 0.78rem; }
    .svc-card-cta { font-size: 0.78rem; padding: 8px 16px; }

    .testimonials-section { padding: 60px 0 80px; }
    .testimonials-container { padding: 0 16px; }
    .proof-stats-bar { padding: 20px; gap: 16px; border-radius: 16px; }
    .proof-stat-number { font-size: 1.2rem; }
    .proof-stat-label { font-size: 0.65rem; }
    .testimonial-card-inner { padding: 24px 20px; border-radius: 18px; }
    .testimonial-card { border-radius: 18px; }
    .testimonial-text { font-size: 0.92rem; }
    .testimonial-revenue-badge { font-size: 0.7rem; padding: 6px 12px; }
    .trust-logos { gap: 10px; }
    .trust-logo-item { padding: 8px 12px; font-size: 0.7rem; gap: 6px; }
    .trust-logo-item svg { width: 16px; height: 16px; }
}

/* ==================================================
   GET STARTED / CONTACT SECTION
   ================================================== */
.get-started-section {
    position: relative;
    padding: 140px 0 160px;
    z-index: 3;
    background: transparent;
    overflow: hidden;
}

.get-started-bg-glow {
    position: absolute;
    top: 20%;
    left: 20%;
    width: 50vw;
    height: 50vh;
    background: radial-gradient(ellipse at center, var(--accent-glow) 0%, transparent 60%);
    filter: blur(140px);
    opacity: 0.12;
    pointer-events: none;
    z-index: 0;
}

.get-started-bg-glow-2 {
    position: absolute;
    bottom: 10%;
    right: 10%;
    width: 40vw;
    height: 40vh;
    background: radial-gradient(ellipse at center, rgba(139, 92, 246, 0.15) 0%, transparent 60%);
    filter: blur(120px);
    opacity: 0.1;
    pointer-events: none;
    z-index: 0;
}

.get-started-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 48px;
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 80px;
    align-items: center;
}

/* Left Content */
.get-started-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.get-started-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 18px;
    background: var(--accent-dim);
    border: 1px solid rgba(77, 124, 255, 0.15);
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--accent);
    margin-bottom: 28px;
    letter-spacing: 0.5px;
}

.get-started-badge-pulse {
    width: 7px;
    height: 7px;
    background: var(--accent);
    border-radius: 50%;
    box-shadow: 0 0 12px var(--accent-glow);
    animation: pulse-accent 2.5s ease-in-out infinite;
    flex-shrink: 0;
}

.get-started-title {
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 4.5vw, 3.8rem);
    font-weight: 500;
    letter-spacing: -1.5px;
    line-height: 1.1;
    color: var(--text-primary);
    margin-bottom: 20px;
}

.get-started-title-accent {
    color: var(--accent);
}

.get-started-desc {
    font-size: 1.05rem;
    color: var(--text-secondary);
    line-height: 1.7;
    max-width: 480px;
    margin-bottom: 40px;
}

/* Features List */
.get-started-features {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.gs-feature {
    display: flex;
    align-items: center;
    gap: 16px;
}

.gs-feature-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--accent-dim);
    border: 1px solid rgba(77, 124, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--accent);
    transition: all 0.3s ease;
}

.gs-feature-icon svg {
    width: 20px;
    height: 20px;
}

.gs-feature:hover .gs-feature-icon {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    box-shadow: 0 8px 24px var(--accent-glow);
}

.gs-feature-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.gs-feature-title {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-primary);
}

.gs-feature-sub {
    font-size: 0.78rem;
    color: var(--text-muted);
    font-weight: 400;
}

/* ===== Form Card ===== */
.get-started-form-wrapper {
    position: relative;
}

.gs-form-card {
    position: relative;
    border-radius: 28px;
    overflow: visible;
}

.gs-form-card-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70%;
    height: 70%;
    background: var(--accent);
    filter: blur(100px);
    opacity: 0.06;
    z-index: -1;
    pointer-events: none;
    border-radius: 50%;
}

.gs-form-card-inner {
    position: relative;
    z-index: 1;
    background: var(--bg-glass);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-radius: 28px;
    padding: 48px;
    border: 1px solid var(--border-glass);
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.12);
    transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

.gs-form-card-inner:hover {
    border-color: var(--border-hover);
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.2), 0 0 60px var(--accent-dim);
}

/* Form Header */
.gs-form-header {
    margin-bottom: 32px;
}

.gs-form-title {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 8px;
    letter-spacing: -0.5px;
}

.gs-form-subtitle {
    font-size: 0.88rem;
    color: var(--text-muted);
    line-height: 1.5;
}

/* Form Fields */
.gs-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.gs-field {
    position: relative;
}

.gs-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 8px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.gs-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.gs-input-icon {
    position: absolute;
    left: 16px;
    width: 18px;
    height: 18px;
    color: var(--text-muted);
    pointer-events: none;
    transition: color 0.3s ease;
    z-index: 2;
}

.gs-textarea-icon {
    top: 16px;
}

.gs-input {
    width: 100%;
    padding: 14px 16px 14px 48px;
    background: var(--metric-card-bg);
    border: 1px solid var(--border-glass);
    border-radius: 14px;
    font-family: var(--font-body);
    font-size: 0.92rem;
    color: var(--text-primary);
    outline: none;
    transition: all 0.3s var(--ease-out-expo);
    -webkit-appearance: none;
}

.gs-input::placeholder {
    color: var(--text-muted);
    opacity: 0.7;
}

.gs-input:focus {
    border-color: var(--accent);
    background: var(--bg-glass-hover);
    box-shadow: 0 0 0 4px var(--accent-dim), 0 8px 24px rgba(0, 0, 0, 0.08);
}

.gs-input:focus + .gs-input-icon,
.gs-input-wrap:focus-within .gs-input-icon {
    color: var(--accent);
}

.gs-textarea {
    resize: vertical;
    min-height: 120px;
    line-height: 1.6;
}

/* Validation Error */
.gs-error {
    display: block;
    font-size: 0.72rem;
    color: #EF4444;
    margin-top: 6px;
    opacity: 0;
    transform: translateY(-4px);
    transition: all 0.3s ease;
    pointer-events: none;
}

.gs-field.has-error .gs-error {
    opacity: 1;
    transform: translateY(0);
}

.gs-field.has-error .gs-input {
    border-color: #EF4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.gs-field.has-error .gs-input-icon {
    color: #EF4444;
}

/* Submit Button */
.gs-submit-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 16px 32px;
    margin-top: 8px;
    background: var(--btn-primary-bg);
    color: var(--btn-primary-color);
    border: none;
    border-radius: 14px;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.4s var(--ease-out-expo);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.gs-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
}

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

.gs-btn-text {
    transition: opacity 0.3s, transform 0.3s;
}

.gs-btn-arrow {
    display: flex;
    align-items: center;
    transition: transform 0.3s ease, opacity 0.3s;
}

.gs-btn-arrow svg {
    width: 18px;
    height: 18px;
}

.gs-submit-btn:hover .gs-btn-arrow {
    transform: translateX(4px);
}

/* Loading State */
.gs-btn-loader {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
}

.gs-spinner {
    width: 22px;
    height: 22px;
    animation: gs-spin 1s linear infinite;
}

@keyframes gs-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Success State */
.gs-btn-success {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: 0;
    pointer-events: none;
}

.gs-btn-success svg {
    width: 18px;
    height: 18px;
}

/* Button States */
.gs-submit-btn.loading .gs-btn-text,
.gs-submit-btn.loading .gs-btn-arrow {
    opacity: 0;
    transform: translateY(8px);
}

.gs-submit-btn.loading .gs-btn-loader {
    opacity: 1;
}

.gs-submit-btn.loading {
    pointer-events: none;
    opacity: 0.85;
}

.gs-submit-btn.success .gs-btn-text,
.gs-submit-btn.success .gs-btn-arrow {
    opacity: 0;
    transform: translateY(8px);
}

.gs-submit-btn.success .gs-btn-loader {
    opacity: 0;
}

.gs-submit-btn.success .gs-btn-success {
    opacity: 1;
}

.gs-submit-btn.success {
    background: var(--green);
    color: #fff;
    pointer-events: none;
}

/* ===== Get Started Responsive ===== */
@media (max-width: 1024px) {
    .get-started-container {
        grid-template-columns: 1fr;
        gap: 60px;
    }
    .get-started-content {
        text-align: left;
        align-items: flex-start;
    }
}

@media (max-width: 768px) {
    .get-started-section {
        padding: 80px 0 100px;
    }
    .get-started-container {
        padding: 0 20px;
        gap: 40px;
    }
    .get-started-title {
        font-size: clamp(1.8rem, 6vw, 2.5rem);
    }
    .get-started-desc {
        font-size: 0.95rem;
        max-width: 100%;
    }
    .gs-form-card-inner {
        padding: 32px 24px;
        border-radius: 22px;
    }
    .gs-form-card {
        border-radius: 22px;
    }
    .get-started-features {
        gap: 16px;
    }
    .gs-feature-icon {
        width: 38px;
        height: 38px;
    }
    .gs-feature-icon svg {
        width: 18px;
        height: 18px;
    }
}

@media (max-width: 480px) {
    .get-started-section {
        padding: 60px 0 80px;
    }
    .get-started-container {
        padding: 0 16px;
        gap: 32px;
    }
    .get-started-title {
        font-size: 1.6rem;
        letter-spacing: -0.5px;
    }
    .get-started-desc {
        font-size: 0.88rem;
        margin-bottom: 28px;
    }
    .gs-form-card-inner {
        padding: 28px 20px;
        border-radius: 18px;
    }
    .gs-form-card {
        border-radius: 18px;
    }
    .gs-input {
        padding: 12px 14px 12px 44px;
        font-size: 0.88rem;
        border-radius: 12px;
    }
    .gs-submit-btn {
        padding: 14px 24px;
        font-size: 0.9rem;
        border-radius: 12px;
    }
    .gs-form {
        gap: 20px;
    }
    .gs-form-title {
        font-size: 1.3rem;
    }
}
/* ==================================================
   PREMIUM FOOTER
   ================================================== */
.premium-footer {
    position: relative;
    padding: 0 0 2rem;
    background: var(--bg-void);
    overflow: hidden;
}

/* Animated Gradient Divider */
.footer-divider {
    position: relative;
    width: 100%;
    height: 2px;
    margin-bottom: 4rem;
    overflow: hidden;
}

.footer-divider-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 100%;
    background: linear-gradient(90deg, transparent, var(--accent), var(--green), var(--accent), transparent);
    animation: footerDividerSlide 4s linear infinite;
}

@keyframes footerDividerSlide {
    0% { transform: translateX(-50%); }
    100% { transform: translateX(0%); }
}

/* Footer Container */
.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Footer Grid */
.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
    gap: 3rem;
    margin-bottom: 3rem;
}

/* Footer Brand */
.footer-brand {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.footer-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    color: var(--text-primary);
    transition: opacity 0.3s var(--ease-out-expo);
}

.footer-logo:hover {
    opacity: 0.8;
}

.footer-logo-mark {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-dim);
    border-radius: 10px;
    color: var(--accent);
    border: 1px solid var(--border-glass);
}

.footer-logo-text {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.footer-brand-desc {
    font-family: var(--font-body);
    font-size: 0.875rem;
    line-height: 1.7;
    color: var(--text-muted);
    max-width: 320px;
}

/* Footer Socials */
.footer-socials {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.footer-social-link {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: var(--text-muted);
    background: var(--bg-glass);
    border: 1px solid var(--border-subtle);
    transition: all 0.3s var(--ease-out-expo);
    text-decoration: none;
}

.footer-social-link:hover {
    color: var(--accent);
    border-color: var(--accent-dim);
    background: var(--accent-dim);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--accent-glow);
}

/* Footer Links Columns */
.footer-links-col {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.footer-col-title {
    font-family: var(--font-display);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.footer-links-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.footer-link {
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--text-muted);
    text-decoration: none;
    transition: all 0.25s var(--ease-out-expo);
    position: relative;
    display: inline-block;
}

.footer-link:hover {
    color: var(--text-primary);
    transform: translateX(4px);
}

/* Footer Contact */
.footer-contact-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.footer-contact-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--text-muted);
}

.footer-contact-item svg {
    flex-shrink: 0;
    opacity: 0.7;
}

/* Newsletter Section */
.footer-newsletter {
    margin-bottom: 2.5rem;
}

.footer-newsletter-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: 2rem 2.5rem;
    background: var(--bg-glass);
    border: 1px solid var(--border-glass);
    border-radius: 16px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.footer-newsletter-content {
    flex: 1;
}

.footer-newsletter-title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.35rem;
    letter-spacing: -0.02em;
}

.footer-newsletter-desc {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.5;
}

.footer-newsletter-form {
    flex: 1;
    max-width: 400px;
}

.footer-newsletter-input-wrap {
    display: flex;
    align-items: center;
    gap: 0;
    background: var(--bg-glass-hover);
    border: 1px solid var(--border-glass);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.3s var(--ease-out-expo);
}

.footer-newsletter-input-wrap:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-dim);
}

.footer-newsletter-input {
    flex: 1;
    padding: 0.85rem 1.25rem;
    background: transparent;
    border: none;
    outline: none;
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--text-primary);
}

.footer-newsletter-input::placeholder {
    color: var(--text-muted);
}

.footer-newsletter-btn {
    position: relative;
    padding: 0.85rem 1.5rem;
    background: var(--accent);
    border: none;
    color: #FFFFFF;
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s var(--ease-out-expo);
    white-space: nowrap;
    border-radius: 0 10px 10px 0;
    overflow: hidden;
}

.footer-newsletter-btn:hover {
    background: var(--accent-glow);
    box-shadow: 0 4px 20px var(--accent-glow);
}

.footer-newsletter-btn-text,
.footer-newsletter-btn-icon {
    transition: all 0.3s var(--ease-out-expo);
}

.footer-newsletter-btn-success {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    transition: all 0.3s var(--ease-out-expo);
    color: #FFFFFF;
}

.footer-newsletter-btn.success .footer-newsletter-btn-text,
.footer-newsletter-btn.success .footer-newsletter-btn-icon {
    opacity: 0;
    transform: translateY(10px);
}

.footer-newsletter-btn.success .footer-newsletter-btn-success {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.footer-newsletter-btn.success {
    background: var(--green);
}

/* Footer Bottom */
.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 2rem;
    border-top: 1px solid var(--border-subtle);
}

.footer-copyright {
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: 0;
}

/* Back To Top Button */
.back-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-glass);
    border: 1px solid var(--border-glass);
    border-radius: 12px;
    color: var(--text-primary);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.4s var(--ease-out-expo);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 999;
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    background: var(--accent-dim);
    border-color: var(--accent);
    color: var(--accent);
    transform: translateY(-3px);
    box-shadow: 0 6px 20px var(--accent-glow);
}

/* ==================================================
   FOOTER RESPONSIVE
   ================================================== */
@media (max-width: 1024px) {
    .footer-grid {
        grid-template-columns: 1.5fr 1fr 1fr;
        gap: 2.5rem;
    }

    .footer-grid .footer-brand {
        grid-column: 1 / -1;
    }

    .footer-newsletter-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
        padding: 1.75rem 2rem;
    }

    .footer-newsletter-form {
        max-width: 100%;
        width: 100%;
    }
}

@media (max-width: 768px) {
    .footer-divider {
        margin-bottom: 2.5rem;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }

    .footer-grid .footer-brand {
        grid-column: 1 / -1;
    }

    .footer-container {
        padding: 0 1.25rem;
    }

    .footer-newsletter-card {
        padding: 1.5rem;
        border-radius: 12px;
    }

    .footer-newsletter-title {
        font-size: 1.1rem;
    }

    .back-to-top {
        bottom: 1.5rem;
        right: 1.5rem;
        width: 40px;
        height: 40px;
    }
}

@media (max-width: 480px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 1.75rem;
    }

    .footer-newsletter-input-wrap {
        flex-direction: column;
        border-radius: 12px;
    }

    .footer-newsletter-input {
        width: 100%;
        padding: 0.85rem 1rem;
    }

    .footer-newsletter-btn {
        width: 100%;
        justify-content: center;
        border-radius: 0 0 10px 10px;
        padding: 0.85rem;
    }

    .footer-socials {
        gap: 0.4rem;
    }

    .footer-social-link {
        width: 34px;
        height: 34px;
    }
}

/* ========== RTL MODE (Arabic) ========== */
[dir="rtl"] {
    font-family: 'Satoshi', 'Inter Tight', 'Segoe UI', Tahoma, sans-serif;
}

[dir="rtl"] .nav-links {
    direction: rtl;
}

[dir="rtl"] .nav-container {
    direction: rtl;
}

[dir="rtl"] .hero-content {
    text-align: right;
}

[dir="rtl"] .hero-cta {
    justify-content: flex-start;
}

[dir="rtl"] .micro-trust {
    direction: rtl;
}

[dir="rtl"] .btn-arrow {
    transform: scaleX(-1);
}

[dir="rtl"] .svc-card-cta svg {
    transform: scaleX(-1);
}

[dir="rtl"] .gs-submit-btn .gs-btn-arrow svg {
    transform: scaleX(-1);
}

[dir="rtl"] .philo-header,
[dir="rtl"] .services-header,
[dir="rtl"] .testimonials-header,
[dir="rtl"] .get-started-content {
    text-align: right;
}

[dir="rtl"] .svc-features li {
    direction: rtl;
    text-align: right;
}

[dir="rtl"] .svc-features li svg {
    margin-left: 0.5rem;
    margin-right: 0;
}

[dir="rtl"] .gs-input-wrap {
    direction: rtl;
}

[dir="rtl"] .gs-input-icon {
    left: auto;
    right: 1rem;
}

[dir="rtl"] .gs-input {
    padding-left: 1rem;
    padding-right: 2.8rem;
}

[dir="rtl"] .get-started-container {
    direction: rtl;
}

[dir="rtl"] .footer-container {
    direction: rtl;
}

[dir="rtl"] .footer-grid {
    direction: rtl;
    text-align: right;
}

[dir="rtl"] .footer-contact-item {
    direction: rtl;
}

[dir="rtl"] .footer-newsletter-card {
    direction: rtl;
}

[dir="rtl"] .testimonial-card-inner {
    text-align: right;
}

[dir="rtl"] .testimonial-author {
    direction: rtl;
}

/* Mobile Testimonials slider (seamless loop, see script.js's
   initMobileSliders): the scroll TRACK itself is forced to a standard LTR
   scroll axis regardless of page language — browsers disagree on what
   scrollLeft means inside an RTL-direction scroller (this is exactly what
   made the coaching page's carousel behave differently between desktop
   and mobile), so keeping the track itself always LTR makes scrollLeft
   behave identically everywhere. Each card's own text alignment is reset
   back to rtl below so Arabic content still reads correctly.
   .services-bento is NOT included here anymore — it's a plain CSS grid
   now (no scrollLeft involved at all), so it should follow the page's
   natural direction. Forcing it to ltr in Arabic mode made the grid's
   auto-placement flow left-to-right while the user reads right-to-left,
   which is what made the second card look like it appeared "before" the
   first one. */
@media (max-width: 768px) {
    .testimonials-grid { direction: ltr; }
}
[dir="rtl"] .testimonials-grid .testimonial-card {
    direction: rtl;
}

[dir="rtl"] .proof-stats-bar {
    direction: rtl;
}

[dir="rtl"] .get-started-features {
    direction: rtl;
}

[dir="rtl"] .gs-feature {
    direction: rtl;
    text-align: right;
}

[dir="rtl"] .gs-form-card-inner {
    direction: rtl;
    text-align: right;
}

[dir="rtl"] .ticker-track {
    animation-direction: reverse;
}

[dir="rtl"] .lang-switch,
[dir="rtl"] .lang-switch-mobile {
    cursor: pointer;
    user-select: none;
}

.lang-switch,
.lang-switch-mobile {
    cursor: pointer;
    user-select: none;
    transition: opacity 0.2s;
}

.lang-switch:hover,
.lang-switch-mobile:hover {
    opacity: 0.8;
}