:root{
    --banner-h:36px;
    --nav-h:60px;
    --header-h:calc(var(--banner-h) + var(--nav-h));
}

@media (max-width:768px){
    :root{
        --banner-h:54px;
        --nav-h:56px;
    }
}

/* ── Global Landing Reset ── */
.lp-body{
    --banner-h:36px;
    --nav-h:60px;
    --header-h:calc(var(--banner-h) + var(--nav-h));
    background:var(--bg-color);
    overflow-x:hidden;
    font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    color:var(--text-primary);
    position:relative;
}

@media (max-width:768px){
    .lp-body{
        --banner-h:54px;
        --nav-h:56px;
    }
}

/* ── Typography Kerning & Lucide Scaling ── */
h1, h2, h3, h4, h5, h6 {
    letter-spacing:-0.03em;
}

[data-lucide] {
    width: 1em;
    height: 1em;
    stroke-width: 1.5;
    vertical-align: -0.125em;
}

/* ── Dot-Grid Background Texture ── */
.lp-body::before{
    content:'';
    position:fixed;
    inset:0;
    z-index:0;
    pointer-events:none;
    background-image:radial-gradient(circle, rgba(0,0,0,0.06) 1px, transparent 1px);
    background-size:24px 24px;
}

body.dark-mode.lp-body::before{
    background-image:radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1px);
}

/* ── SVG Noise Grain Dither ── */
.lp-body::after{
    content: '';
    position: fixed;
    inset: 0;
    z-index: 1; 
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.04;
}

body.dark-mode.lp-body::after{
    opacity: 0.03;
    mix-blend-mode: overlay;
}

/* ── Reflow Phosphor Orbs ── */
@keyframes orbFloat{
    0% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(8vw, -5vh) scale(1.1); }
    66% { transform: translate(-5vw, 10vh) scale(0.9); }
    100% { transform: translate(0, 0) scale(1); }
}

.phosphor-orb{
    position:fixed;
    border-radius:50%;
    filter:blur(120px);
    opacity:0.6;
    z-index:0;
    pointer-events:none;
    animation:orbFloat 20s ease-in-out infinite;
}

.orb-1{
    width:40vw;
    height:40vh;
    left:-10vw;
    top:10vh;
    background:rgba(200, 200, 200, 0.04);
    animation-delay:0s;
}

.orb-2{
    width:50vw;
    height:50vh;
    right:-10vw;
    top:40vh;
    background:rgba(220, 220, 220, 0.03);
    animation-delay:-5s;
    animation-duration:25s;
}

.orb-3{
    width:35vw;
    height:35vh;
    left:20vw;
    bottom:10vh;
    background:rgba(180, 180, 180, 0.05);
    animation-delay:-10s;
    animation-duration:18s;
}

body.dark-mode .orb-1{ background:rgba(255, 255, 255, 0.02); }
body.dark-mode .orb-2{ background:rgba(240, 240, 255, 0.015); }
body.dark-mode .orb-3{ background:rgba(230, 230, 240, 0.025); }


/* ── Scroll Progress ── */
.scroll-progress{
    position:fixed;
    top:0;
    left:0;
    height:3px;
    background:var(--text-primary);
    z-index:9999;
    transition:width 0.1s linear;
    border-radius:0 2px 2px 0;
}

/* ── Early Access Banner ── */
.early-access-banner{
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:1002;
    background:var(--text-primary);
    color:var(--bg-color);
    text-align:center;
    padding:0.45rem 1rem;
    font-size:0.78rem;
    font-weight:500;
    letter-spacing:0.01em;
    height:var(--banner-h);
    display:flex;
    align-items:center;
    justify-content:center;
    will-change:transform;
    transition:transform 0.4s var(--spring), opacity 0.3s ease;
}

@media (max-width:768px){
    .early-access-banner{
        padding:0.4rem 0.75rem;
        font-size:0.7rem;
        line-height:1.3;
    }
    .early-access-banner span{
        max-width:320px;
    }
}

.early-access-banner a{
    color:var(--bg-color);
    text-decoration:none !important;
    border-bottom:1.5px solid currentColor;
    font-weight:700;
}

/* ── Navigation ── */
.lp-nav{
    position:fixed;
    top:var(--banner-h);
    left:40px;
    right:40px;
    width:calc(100% - 80px);
    max-width:1400px;
    margin:0 auto;
    z-index:1000;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0.6rem 1.5rem;
    background:rgba(255,255,255,0.7);
    backdrop-filter:blur(40px) saturate(180%);
    -webkit-backdrop-filter:blur(40px) saturate(180%);
    border:1px solid rgba(0,0,0,0.08);
    border-radius:16px;
    box-shadow:0 4px 24px rgba(0,0,0,0.06);
    transition:all 0.5s cubic-bezier(0.16,1,0.3,1);
}

@media (max-width:768px){
    .lp-nav{
        left:10px;
        right:10px;
        width:calc(100% - 20px);
        padding:0.5rem 1rem;
        border-radius:12px;
    }
}

body.dark-mode .lp-nav{
    background:rgba(12,12,12,0.65) !important;
    border:1px solid rgba(255,255,255,0.08) !important;
    box-shadow:0 4px 24px rgba(0,0,0,0.3) !important;
}

/* Full-width bar when scrolled */
.lp-nav.scrolled{
    top:0;
    left:0;
    right:0;
    width:100%;
    max-width:100%;
    margin:0;
    border-radius:0;
    padding:0.7rem 5%;
    background:rgba(255,255,255,0.88);
    border:none;
    border-bottom:1px solid rgba(0,0,0,0.07);
    box-shadow:0 2px 20px rgba(0,0,0,0.06);
}

body.dark-mode .lp-nav.scrolled{
    background:rgba(8,8,8,0.92) !important;
    border-bottom:1px solid rgba(255,255,255,0.06) !important;
    box-shadow:0 2px 24px rgba(0,0,0,0.4) !important;
}

.mobile-menu-toggle{
    display:none;
}

@media (max-width:991px){
    .mobile-menu-toggle{
        display:flex;
        align-items:center;
        justify-content:center;
        width:40px;
        height:40px;
        background:rgba(0,0,0,0.05);
        border:1px solid rgba(0,0,0,0.1);
        border-radius:10px;
        cursor:pointer;
        color:var(--text-primary);
        transition:all 0.3s ease;
    }

    body.dark-mode .mobile-menu-toggle{
        background:rgba(255,255,255,0.08);
        border-color:rgba(255,255,255,0.15);
    }
}

.lp-nav-logo img{
    height:30px;
    transition:height 0.3s ease;
}

.lp-nav.scrolled .lp-nav-logo img{
    height:26px;
}

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

@media (max-width:991px){
    .lp-nav-links{
        position:fixed;
        top:0;
        right:-300px;
        width:280px;
        height:100vh;
        background:var(--surface-solid);
        flex-direction:column;
        padding:8rem 2rem 2rem;
        gap:1rem;
        transition:transform 0.5s cubic-bezier(0.16,1,0.3,1);
        box-shadow:-10px 0 40px rgba(0,0,0,0.15);
        z-index:100;
        margin:0;
    }

    body.dark-mode .lp-nav-links{
        background:rgba(15,15,18,0.98);
        backdrop-filter:blur(30px);
        -webkit-backdrop-filter:blur(30px);
        border-left:1px solid rgba(255,255,255,0.08);
    }

    .lp-nav-links.active{
        transform:translateX(-300px);
    }

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

    .lp-nav-links a{
        display:flex;
        align-items:center;
        gap:1rem;
        width:100%;
        padding:1rem;
        font-size:1rem;
        border-radius:12px;
    }

    .lp-nav-links .nav-control-group{
        margin-top:auto;
        padding:1rem;
        border-top:1px solid var(--border-color);
        width:100%;
        justify-content:space-between;
    }

    .nav-btn-outline, .nav-btn-primary{
        text-align:center;
        justify-content:center !important;
        margin-top:0.5rem;
    }
}

.lp-nav-links a{
    color:var(--text-secondary);
    text-decoration:none;
    font-size:0.88rem;
    font-weight:500;
    padding:0.5rem 0.9rem;
    border-radius:var(--radius-md);
    transition:all 0.3s ease;
}

.lp-nav-links a:hover{
    color:var(--text-primary);
    background:rgba(0,0,0,0.03);
}

.nav-btn-outline{
    border:1.5px solid var(--border-color) !important;
    color:var(--text-primary) !important;
    font-weight:600 !important;
}

.nav-btn-primary{
    background:var(--text-primary) !important;
    color:var(--bg-color) !important;
    font-weight:600 !important;
    padding:0.55rem 1.25rem !important;
}

.nav-control-group{
    display:flex;
    align-items:center;
    gap:0.5rem;
}

.nav-mascot-icon{
    color:var(--text-secondary);
    font-size:0.95rem;
    cursor:pointer;
    transition:color 0.2s ease;
}

.nav-mascot-icon:hover{
    color:var(--text-primary);
}

.nav-icon-btn{
    background:var(--surface-color);
    border:1px solid var(--border-color);
    color:var(--text-secondary);
    font-size:0.82rem;
    cursor:pointer;
    width:32px;
    height:32px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    transition:all 0.25s ease;
    box-shadow:inset 0 1px 1px rgba(255,255,255,0.1);
}

.nav-icon-btn:hover{
    color:var(--text-primary);
    background:var(--surface-solid,rgba(0,0,0,0.08));
    transform:scale(1.05);
}

/* ── Hero Section ── */
.hero-section{
    position:relative;
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:8rem 5% 4rem;
    overflow:hidden;
    background:transparent;
}

/* Premium Mesh Gradient for Hero */


/* Hero Grid Overlay */
.hero-section::after{
    content:'';
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    background-image:
        linear-gradient(rgba(0,0,0,0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,0.02) 1px, transparent 1px);
    background-size:60px 60px;
    mask-image:radial-gradient(ellipse 70% 60% at 50% 40%, black 30%, transparent 70%);
    -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 40%, black 30%, transparent 70%);
}

/* Dark Mode Hero Overrides */
body.dark-mode .hero-section::after{
    background-image:
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
}

/* ─── Hero Background Wrapper ─── */
.hero-bg-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: transparent;
}

#hero-waves {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    mix-blend-mode: normal; /* Threejs handles antialiasing opacity */
}

body.dark-mode #hero-waves {
    mix-blend-mode: screen;
}

.hero-split-grid{
    display:grid;
    grid-template-columns:1.25fr 0.75fr;
    gap:4rem;
    align-items:center;
    max-width:var(--container-width);
    width:100%;
    margin:0 auto;
    position:relative;
    z-index:2;
}

.hero-content{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    text-align:left;
}

/* Animated Gradient Orbs */
.hero-orb{
    position:absolute;
    border-radius:50%;
    filter:blur(80px);
    opacity:0.4;
    pointer-events:none;
    animation:orbFloat 20s ease-in-out infinite;
}

.hero-orb-1{
    width:600px;
    height:600px;
    background:radial-gradient(circle,rgba(50,50,50,0.05) 0%,transparent 70%);
    top:-10%;
    right:-10%;
    animation-delay:0s;
}

.hero-orb-2{
    width:500px;
    height:500px;
    background:radial-gradient(circle,rgba(30,30,30,0.05) 0%,transparent 70%);
    bottom:-10%;
    left:-10%;
    animation-delay:-10s;
}

@keyframes orbFloat{
    0%,100%{transform:translate(0,0) scale(1) rotate(0deg);}
    33%{transform:translate(40px,-60px) scale(1.1) rotate(5deg);}
    66%{transform:translate(-30px,30px) scale(0.9) rotate(-5deg);}
}

.hero-badge{
    display:inline-flex;
    align-items:center;
    gap:0.6rem;
    padding:0.5rem 1.2rem;
    border-radius:8px;
    border:1px solid var(--border-color);
    background:var(--surface-solid);
    box-shadow:var(--card-shadow);
    font-size:0.75rem;
    font-weight:700;
    color:var(--text-primary);
    letter-spacing:0.1em;
    text-transform:uppercase;
    margin-bottom:2.5rem;
}

.hero-badge-dot{
    width:6px;
    height:6px;
    background:#FF3B30;/* iOS Red */
    border-radius:50%;
    box-shadow:0 0 10px rgba(255,59,48,0.4);
    animation:pulse 2s infinite;
}

@keyframes pulse{
    0%,100%{opacity:1;transform:scale(1);}
    50%{opacity:0.5;transform:scale(1.3);}
}

/* Mode Toggle (Switch Pill) */
.mode-toggle{
    display:flex;
    background:#1C1C1C;
    border:1px solid rgba(255,255,255,0.05);
    border-radius:100px;
    padding:4px;
    margin-bottom:2.5rem;
    position:relative;
    width:240px;
    height:46px;
    align-items:center;
    box-shadow:inset 0 2px 5px rgba(0,0,0,0.3);
}

@media (max-width:768px){
    .mode-toggle{
        width:200px;
        height:40px;
        margin:0 auto 2rem;
    }
}

.mode-slider{
    position:absolute;
    top:4px;
    left:4px;
    width:calc(50% - 4px);
    height:calc(100% - 8px);
    background:#FFFFFF;
    border-radius:100px;
    transition:transform 0.4s var(--spring);
    box-shadow:0 4px 10px rgba(0,0,0,0.15);
}

.mode-btn{
    flex:1;
    z-index:1;
    background:transparent;
    border:none;
    color:#8E8E8E;
    font-weight:700;
    font-size:0.8rem;
    letter-spacing:0.05em;
    cursor:pointer;
    transition:color 0.3s ease;
    text-align:center;
    padding:0;
    outline:none;
}

/* Active States */
.mode-toggle[data-active="llb"] .mode-slider{
    transform:translateX(0);
}
.mode-toggle[data-active="llb"] .mode-btn[data-mode="llb"]{
    color:#000000;
}
.mode-toggle[data-active="llb"] .mode-btn[data-mode="alevel"]{
    color:#8E8E8E;
}

.mode-toggle[data-active="alevel"] .mode-slider{
    transform:translateX(100%);
}
.mode-toggle[data-active="alevel"] .mode-btn[data-mode="alevel"]{
    color:#000000;
}
.mode-toggle[data-active="alevel"] .mode-btn[data-mode="llb"]{
    color:#8E8E8E;
}

@media (max-width:768px){
    .mode-btn{
        font-size:0.75rem;
    }
}

/* Hero Title */
.hero-title{
    font-family:'Outfit',sans-serif !important;
    font-size:clamp(3.8rem,8vw,6.5rem);
    font-weight:900;
    line-height:0.95;
    letter-spacing:-0.05em;
    color:var(--text-primary);
    max-width:900px;
    margin-bottom:2.5rem;
    text-align:left;
    text-wrap:balance;
    position:relative;
    text-shadow:0 10px 40px rgba(0,0,0,0.05);
}

body.dark-mode .hero-title{
    text-shadow:0 10px 40px rgba(255,255,255,0.03);
}

@keyframes textShimmer{
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.gradient-text{
    background:var(--brand-gradient);
    background-size:200% auto;
    animation:textShimmer 6s ease-in-out infinite;
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    display:inline-block;
}

.cursor{
    display:inline-block;
    width:3px;
    height:1em;
    background:var(--text-primary);
    margin-left:2px;
    animation:blink 1s step-end infinite;
    vertical-align:text-bottom;
}

@keyframes blink{
    0%,100%{opacity:1;}
    50%{opacity:0;}
}

.hero-sub{
    font-size:1.15rem;
    color:var(--text-secondary);
    max-width:600px;
    line-height:1.7;
    margin-bottom:2.5rem;
}

@media (max-width:768px){
    .hero-sub{
        font-size:1rem;
        margin-bottom:2rem;
        padding:0 1rem;
    }
}

/* Hero CTA */
.hero-cta-group{
    display:flex;
    gap:1.5rem;
    margin-top:1rem;
}

@media (max-width:768px){
    .hero-cta-group{
        flex-direction:column;
        gap:1rem;
        align-items:center;
    }
    .hero-cta-group .btn{
        width:100%;
        max-width:280px;
    }
}

@keyframes pulseGlow{
    0%, 100% { box-shadow: 0 0 0 0 rgba(100, 100, 100, 0.0); }
    50% { box-shadow: 0 0 20px 2px rgba(100, 100, 100, 0.15); }
}

@keyframes pulseGlowDark{
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.0); }
    50% { box-shadow: 0 0 30px 5px rgba(255, 255, 255, 0.15); }
}

.btn-primary{
    display:inline-flex;
    align-items:center;
    gap:0.5rem;
    padding:0.85rem 2rem;
    background:var(--text-primary);
    color:var(--bg-color);
    border:none;
    border-radius:var(--radius-md);
    font-weight:600;
    font-size:0.95rem;
    text-decoration:none;
    cursor:pointer;
    transition:all 0.3s cubic-bezier(0.16,1,0.3,1);
    font-family:'Inter',sans-serif;
    letter-spacing:0.01em;
    position:relative;
    animation:pulseGlow 4s infinite;
}

body.dark-mode .btn-primary{
    animation:pulseGlowDark 4s infinite;
}

.btn-primary:hover{
    transform:translateY(-2px) scale(1.02);
    box-shadow:0 6px 16px rgba(0,0,0,0.15), 0 16px 50px rgba(0,0,0,0.1) !important;
}

.btn-primary:focus, .btn-hero-secondary:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(100, 100, 100, 0.4) !important;
}

.btn-hero-secondary{
    display:inline-flex;
    align-items:center;
    gap:0.5rem;
    padding:0.85rem 2rem;
    background:var(--glass-bg);
    backdrop-filter:blur(10px);
    border:1px solid var(--border-color);
    color:var(--text-primary);
    border-radius:var(--radius-md);
    font-weight:600;
    font-size:0.95rem;
    text-decoration:none;
    cursor:pointer;
    transition:var(--spring);
}

.btn-hero-secondary:hover{
    transform:translateY(-2px);
    box-shadow:var(--card-shadow-hover);
}

/* Split Screen Visual */
.hero-visual{
    flex:1;
    position:relative;
    height:500px;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:2;
}

@media (max-width:768px){
    .hero-visual{
        height:400px;
        width:100%;
        margin-top:2rem;
    }
}

.visual-panel{
    position:absolute;
    width:320px;
    background:var(--glass-bg);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    border:var(--glass-border);
    border-radius:var(--radius-lg);
    padding:1.5rem;
    box-shadow:0 20px 40px rgba(0,0,0,0.2);
    transition:transform 0.6s var(--spring);
}

@media (max-width:768px){
    .visual-panel{
        width:280px;
        padding:1rem;
    }
}

.passive-panel{
    top:20px;
    left:0;
    z-index:1;
    transform:scale(0.9) translateX(-20px) rotate(-3deg);
    opacity:0.6;
    filter:grayscale(100%);
}

@media (max-width:768px){
    .passive-panel{
        top:0;
        left:50%;
        transform:scale(0.8) translateX(-60%) rotate(-3deg);
    }
}

.active-panel{
    bottom:0;
    right:0;
    z-index:2;
    background:var(--surface-solid);
    transform:scale(1.05);
    border:1px solid var(--border-color);
    box-shadow:var(--card-shadow);
}

@media (max-width:768px){
    .active-panel{
        bottom:20px;
        right:50%;
        transform:scale(0.95) translateX(55%);
    }
}

.hero-visual:hover .passive-panel{
    transform:scale(0.85) translateX(-40px) rotate(-5deg);
}

.hero-visual:hover .active-panel{
    transform:scale(1.08) translateY(-10px);
}

.panel-header{
    font-size:0.85rem;
    font-weight:700;
    color:var(--text-secondary);
    text-transform:uppercase;
    letter-spacing:0.05em;
    margin-bottom:1.5rem;
    padding-bottom:0.75rem;
    border-bottom:1px solid var(--border-color);
}

.fake-line{
    height:8px;
    background:var(--border-color);
    border-radius:4px;
    margin-bottom:12px;
    width:100%;
    opacity:0.5;
}
.fake-line.short{width:40%;}
.fake-line.medium{width:70%;}
.fake-line.highlighter-yellow{
    background:var(--text-primary);
    opacity:0.8;
}

.panel-caption{
    font-size:0.8rem;
    color:var(--text-secondary);
    font-style:italic;
    margin-top:1rem;
}

.irac-block{
    margin-bottom:1.25rem;
}

.irac-tag{
    display:inline-block;
    font-size:0.75rem;
    font-weight:700;
    color:var(--bg-color);
    background:var(--text-primary);
    padding:2px 8px;
    border-radius:4px;
    margin-bottom:0.5rem;
}

.ben-critique{
    display:flex;
    align-items:flex-start;
    gap:0.75rem;
    background:rgba(0,0,0,0.05);
    padding:1rem;
    border-radius:var(--radius-md);
    margin-top:1.5rem;
    border-left:3px solid var(--text-primary);
}

.ben-critique i{
    color:var(--text-primary);
    font-size:1.2rem;
    margin-top:2px;
}

.ben-critique span{
    font-size:0.85rem;
    color:var(--text-primary);
    font-weight:500;
    line-height:1.4;
}

@media (max-width:992px){
    .hero-split-grid{grid-template-columns:1fr;gap:4rem;text-align:center;}
    .hero-content{align-items:center;text-align:center;}
    .hero-title{text-align:center;}
}

/* ── Trust Strip ── */
.trust-strip{
    padding:5rem 2rem;
    text-align:center;
    border-top:1px solid var(--border-color);
    background:var(--surface-solid);
    overflow:hidden;
}

.trust-strip p{
    font-size:0.7rem;
    text-transform:uppercase;
    letter-spacing:0.2em;
    color:var(--text-secondary);
    margin-bottom:2.5rem;
    font-weight:700;
}

.trust-marquee{
    overflow:hidden;
    white-space:nowrap;
}

.trust-marquee-content{
    display:inline-flex;
    gap:3rem;
    animation:marquee 40s linear infinite;
}

.trust-marquee-content span{
    font-family:'Outfit',sans-serif;
    font-size:0.85rem;
    font-weight:800;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--text-primary);
    opacity:0.2;
    transition:opacity 0.3s ease;
}

.trust-marquee-content span:hover{
    opacity:0.8;
}

/* ── Stats Section ── */
.stats-section{
    display:flex;
    justify-content:center;
    gap:8rem;
    padding:8rem 2rem;
    width: 100%;
    position:relative;
}

/* Glow divider line above stats */
.stats-section::before{
    content:'';
    position:absolute;
    top:0;
    left:50%;
    transform:translateX(-50%);
    width:200px;
    height:1px;
    background:linear-gradient(90deg, transparent, rgba(0,0,0,0.15), transparent);
}

body.dark-mode .stats-section::before{
    background:linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
}

.stat-item{
    text-align:center;
    position:relative;
}

.stat-item + .stat-item::before{
    content:'';
    position:absolute;
    left:-4rem;
    top:50%;
    transform:translateY(-50%);
    width:1px;
    height:40px;
    background:var(--border-color);
}

.stat-number{
    font-family:'Outfit',sans-serif;
    font-size:4.5rem;
    font-weight:900;
    letter-spacing:-0.05em;
    line-height:1;
    margin-bottom:0.75rem;
    color:var(--text-primary);
}

.stat-label{
    font-size:0.75rem;
    color:var(--text-secondary);
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.15em;
}

/* ── Support Form ── */
.support-form-container{
    padding:8rem 5%;
    background:var(--surface-solid);
    border-top:1px solid var(--border-color);
}

.support-form-card{
    max-width:800px;
    margin:0 auto;
    padding:4rem;
    background:var(--bg-color);
    border-radius:var(--radius-xl);
    border:1px solid var(--border-color);
    box-shadow:var(--card-shadow);
}

.support-form-card h3{
    font-family:'Outfit',sans-serif;
    font-size:2rem;
    font-weight:900;
    margin-bottom:1rem;
    text-align:center;
}

.premium-form .form-group label{
    font-family:'Outfit',sans-serif;
    font-size:0.75rem;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:0.1em;
    margin-bottom:0.75rem;
    display:block;
    color:var(--text-secondary);
}

.premium-form input,
.premium-form select,
.premium-form textarea{
    width:100%;
    padding:1rem 1.25rem;
    background:var(--surface-solid);
    border:1px solid var(--border-color);
    border-radius:var(--radius-md);
    font-family:'Inter',sans-serif;
    font-size:0.95rem;
    color:var(--text-primary);
    transition:var(--transition);
}

.premium-form input:focus{
    outline:none;
    border-color:var(--text-primary);
    box-shadow:0 0 0 4px rgba(0,0,0,0.03);
}

/* ── Problem/Solution (UVP) ── */
.problem-section{
    padding:6rem 2rem;
}

.problem-grid{
    max-width:900px;
    margin:0 auto;
    text-align:center;
}

.typing-wrapper{
    font-size:1.8rem;
    font-weight:700;
    margin-bottom:3rem;
    color:var(--text-primary);
    letter-spacing:-0.02em;
}

.static-text{
    color:var(--text-secondary);
}

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

.uvp-list{
    display:flex;
    flex-direction:column;
    gap:1.5rem;
}

.uvp-item{
    display:flex;
    align-items:flex-start;
    gap:1.5rem;
    text-align:left;
    padding:1.5rem 2rem;
    background:var(--glass-bg);
    backdrop-filter:blur(20px);
    border:1px solid var(--border-color);
    border-radius:var(--radius-lg);
    transition:var(--spring);
    opacity:0;
    transform:translateY(20px);
}

.uvp-item.visible{
    opacity:1;
    transform:translateY(0);
}

.uvp-item:hover{
    transform:translateY(-4px);
    box-shadow:var(--card-shadow-hover);
}

.uvp-icon{
    width:48px;
    height:48px;
    border-radius:var(--radius-md);
    background:rgba(0,0,0,0.04);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.2rem;
    color:var(--text-primary);
    flex-shrink:0;
}

.uvp-content h3{
    font-size:1.1rem;
    font-weight:700;
    margin-bottom:0.3rem;
    color:var(--text-primary);
}

.uvp-content p{
    font-size:0.9rem;
    color:var(--text-secondary);
    line-height:1.5;
}

/* ── Meet Ben Section ── */
.meet-ben-section{
    padding:8rem 2rem;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:5rem;
    width: 100%;
    position:relative;
}

@keyframes breathe{
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.1); opacity: 0.8; }
}

.ben-hero-glow{
    position:absolute;
    width:500px;
    height:500px;
    background:radial-gradient(circle,rgba(200,200,200,0.06) 0%,transparent 70%);
    border-radius:50%;
    right:10%;
    top:20%;
    pointer-events:none;
    filter:blur(60px);
    animation:breathe 8s ease-in-out infinite;
}

body.dark-mode .ben-hero-glow{
    background:radial-gradient(circle,rgba(255,255,255,0.04) 0%,transparent 70%);
}

.showcase-badge{
    display:inline-block;
    padding:0.35rem 0.9rem;
    border-radius:var(--radius-md);
    border:1px solid var(--border-color);
    font-size:0.72rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.08em;
    color:var(--text-primary);
    margin-bottom:1rem;
}

.hero-section{
    position:relative;
    min-height:100vh;
    display:flex;
    align-items:center;
    padding:calc(var(--header-h) + 4rem) 5% 6rem;
    overflow:hidden;
    z-index:1;
}

@media (max-width:768px){
    .hero-section{
        padding:calc(var(--header-h) + 2rem) 1.5rem 4rem;
        text-align:center;
        flex-direction:column;
        justify-content:flex-start;
    }
}

.hero-content{
    flex:1;
    max-width:650px;
    z-index:2;
}

@media (max-width:768px){
    .hero-content{
        margin:0 auto 3rem;
    }
}

.hero-title{
    font-family:'Outfit',sans-serif;
    font-size:clamp(2.5rem,6vw,4.5rem);
    font-weight:900;
    line-height:1.05;
    margin-bottom:1.5rem;
    color:var(--text-primary);
}

@media (max-width:768px){
    .hero-title{
        font-size:2.4rem;
        line-height:1.1;
    }
}
.meet-ben-content{
    flex:1;
    max-width:550px;
}

.meet-ben-content h2{
    font-family:'Outfit',sans-serif;
    font-size:clamp(2.5rem,4vw,3.5rem);
    font-weight:900;
    letter-spacing:-0.04em;
    line-height:1.1;
    margin-bottom:1.5rem;
    color:var(--text-primary);
}

.meet-ben-content p{
    font-size:1rem;
    color:var(--text-secondary);
    line-height:1.7;
    margin-bottom:2rem;
}

.ben-feature-card{
    background:var(--surface-solid);
    border:1px solid var(--border-color);
    border-radius:var(--radius-lg);
    padding:2.5rem;
    box-shadow:var(--card-shadow);
}

.ben-feature-list{
    list-style:none;
    padding:0;
    margin:0;
    display:grid;
    grid-template-columns:1fr;
    gap:2rem;
}

.ben-feature-item{
    display:flex;
    align-items:flex-start;
    gap:1.25rem;
}

.ben-feature-item i{
    color:var(--text-primary);
    font-size:1.25rem;
    margin-top:4px;
    flex-shrink:0;
    background:var(--accent-subtle);
    width:40px;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
}

.ben-feature-item h4{
    font-family:'Outfit',sans-serif;
    font-size:1.1rem;
    font-weight:700;
    margin-bottom:0.4rem;
    color:var(--text-primary);
}

.ben-feature-item p{
    font-size:0.9rem;
    color:var(--text-secondary);
    line-height:1.6;
    margin-bottom:0;
}

.meet-ben-visual{
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
}

/* ── App Showcase Section ── */
.app-showcase-section{
    padding:8rem 5%;
    width: 100%;
    background:var(--surface-solid);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.app-showcase-container{
    max-width:1200px;
    margin:0 auto;
    display:grid;
    grid-template-columns:1fr 1.2fr;
    gap:8rem;
    align-items:center;
}

.app-features-content h2{
    font-family:'Outfit',sans-serif !important;
    font-size:clamp(2.5rem,4vw,3.5rem);
    font-weight:900;
    margin-bottom:1.5rem;
}

.app-ex-item{
    display:flex;
    gap:1.25rem;
    margin-bottom:2rem;
}

.app-ex-item i{
    font-size:1.5rem;
    color:var(--text-primary);
    background:var(--accent-subtle);
    width:56px;
    height:56px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:16px;
    flex-shrink:0;
    box-shadow:inset 0 1px 1px rgba(255,255,255,0.1);
    transition:var(--spring);
}

.app-ex-item:hover i{
    transform:scale(1.1) rotate(5deg);
    background:var(--text-primary);
    color:var(--bg-color);
}

.app-ex-item h4{
    font-family:'Outfit',sans-serif;
    font-size:1.1rem;
    font-weight:700;
    margin-bottom:0.3rem;
}

/* ── Ecosystem / Features Section ── */
.ecosystem-section{
    padding:8rem 2rem;
    background:var(--glass-bg);
    backdrop-filter:blur(20px);
    border-top:1px solid var(--border-color);
    border-bottom:1px solid var(--border-color);
    width: 100%;
}

.ecosystem-container{
    max-width:1100px;
    margin:0 auto;
}

.showcase-header{
    text-align:center;
    margin-bottom:4rem;
}

.showcase-header h2{
    font-size:2.8rem;
    font-weight:800;
    letter-spacing:-0.03em;
    color:var(--text-primary);
    margin-bottom:1rem;
}

.showcase-header p{
    font-size:1.05rem;
    color:var(--text-secondary);
    max-width:600px;
    margin:0 auto;
    line-height:1.7;
}

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

.eco-card{
    background:var(--surface-solid,var(--surface-color));
    border:1px solid var(--border-color);
    border-radius:var(--radius-lg);
    padding:2.5rem;
    transition:var(--spring);
    position:relative;
    overflow:hidden;
}

.eco-card::before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:3px;
    background:var(--text-primary);
    opacity:0;
    transition:opacity 0.3s ease;
}

.eco-card:hover{
    transform:translateY(-6px);
    box-shadow:var(--card-shadow-hover);
}

.eco-card:hover::before{
    opacity:1;
}

.eco-icon{
    width:48px;
    height:48px;
    border-radius:var(--radius-md);
    background:rgba(0,0,0,0.04);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.2rem;
    color:var(--text-primary);
    margin-bottom:1.5rem;
}

.eco-card h3{
    font-size:1.2rem;
    font-weight:700;
    margin-bottom:0.75rem;
    color:var(--text-primary);
}

.eco-card p{
    font-size:0.9rem;
    color:var(--text-secondary);
    line-height:1.6;
    margin-bottom:1.5rem;
}

.eco-link{
    color:var(--text-primary);
    text-decoration:none;
    font-weight:600;
    font-size:0.85rem;
    transition:gap 0.2s ease;
    display:inline-flex;
    align-items:center;
    gap:0.4rem;
}

.eco-link:hover{
    gap:0.8rem;
}

/* ── Process Workflow ── */
.process-section{
    padding:8rem 5%;
}
.process-header{
    text-align:center;
    margin:0 auto 4rem;
}
.process-header h2{
    font-family:'Outfit',sans-serif !important;
    font-size:clamp(2.5rem,4vw,3.5rem);
    font-weight:900;
    margin-bottom:1rem;
}
.process-grid{
    display:grid;
    grid-template-columns: 2fr 1.5fr;
    grid-auto-rows: minmax(320px, auto);
    gap:2rem;
    margin-top:5rem;
}

.process-card:nth-child(1) { grid-column: 1 / 2; }
.process-card:nth-child(2) { grid-column: 2 / 3; }
.process-card:nth-child(3) { grid-column: 1 / 3; }
@keyframes spinEdge{
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

.process-card{
    background:rgba(255,255,255,0.7);
    backdrop-filter:blur(40px) saturate(150%);
    -webkit-backdrop-filter:blur(40px) saturate(150%);
    padding:3rem 2rem;
    border-radius:var(--radius-lg);
    border:1px solid rgba(0,0,0,0.05);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,0.6), 0 4px 20px rgba(0,0,0,0.06);
    text-align:center;
    transition:var(--spring);
    position:relative;
    overflow:hidden;
}

body.dark-mode .process-card{
    background:rgba(10,10,10,0.4);
    border:1px solid rgba(255,255,255,0.05);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,0.05), 0 8px 32px rgba(0,0,0,0.4);
}

/* Glassmorphism Animated Edge */
.process-card::before{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(transparent 70%, rgba(150, 150, 150, 0.4) 100%);
    transform: translate(-50%, -50%) rotate(0deg);
    animation: spinEdge 6s linear infinite;
    z-index: 0;
}

.process-card::after{
    content: '';
    position: absolute;
    inset: 1px;
    background: var(--surface-solid);
    border-radius: calc(var(--radius-lg) - 1px);
    z-index: 1;
}

body.dark-mode .process-card::before{
    background: conic-gradient(transparent 70%, rgba(255, 255, 255, 0.3) 100%);
}

.process-card > * {
    position: relative;
    z-index: 2;
}

.process-card:hover{
    transform:translateY(-10px);
    box-shadow:var(--card-shadow-hover);
}
.process-icon{
    width:60px;
    height:60px;
    background:var(--accent-subtle);
    border-radius:50%;
    margin:2rem auto 0;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.5rem;
    color:var(--text-primary);
    transition:var(--transition);
}

.process-card:hover .process-icon{
    background:var(--text-primary);
    color:var(--bg-color);
    transform:rotate(10deg);
}

/* ── Prompt Library ── */
.prompt-library-section{
    padding:5rem 5%;
    background:var(--surface-solid);
    border-top:1px solid var(--border-color);
    border-bottom:1px solid var(--border-color);
    overflow:hidden;
}
.prompt-slider-container{
    width:100%;
    overflow-x:auto;
    padding:2rem 0;
    scrollbar-width:none;
}
.prompt-slider-container::-webkit-scrollbar{
    display:none;
}
.prompt-track{
    display:flex;
    gap:1.5rem;
    width:max-content;
    padding:0 5%;
}
.prompt-card{
    background:var(--surface-solid);
    border:1px solid var(--border-color);
    padding:2.5rem;
    border-radius:var(--radius-lg);
    min-width:320px;
    max-width:320px;
    transition:var(--spring);
    box-shadow:var(--card-shadow);
    display:flex;
    flex-direction:column;
    position:relative;
}

.prompt-card::after{
    content:'';
    position:absolute;
    inset:0;
    pointer-events:none;
    border-radius:var(--radius-lg);
    border:2px solid transparent;
    background:linear-gradient(135deg,rgba(80, 80, 80, 0.4),rgba(160, 160, 160, 0.3)) border-box;
    -webkit-mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);
    mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);
    -webkit-mask-composite:destination-out;
    mask-composite:exclude;
    opacity:0;
    transition:opacity 0.3s ease;
}

.prompt-card:hover{
    border-color:var(--text-primary);
    transform:scale(1.02) translateY(-5px);
    box-shadow:var(--card-shadow-hover);
}

.prompt-card:hover::after{
    opacity:1;
}
.prompt-tag{
    font-family:'Outfit',sans-serif;
    font-size:0.7rem;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:0.1em;
    background:var(--accent-subtle);
    color:var(--text-primary);
    padding:4px 12px;
    border-radius:100px;
    width:fit-content;
    margin-bottom:1.5rem;
}
.prompt-text{
    font-size:1.1rem;
    color:var(--text-primary);
    font-style:italic;
    line-height:1.6;
    margin-bottom:2rem;
    flex:1;
}
.btn-prompt-try{
    background:rgba(255,255,255,0.1);
    border:none;
    color:var(--text-primary);
    padding:0.75rem 1rem;
    border-radius:var(--radius-md);
    cursor:pointer;
    font-weight:600;
    font-size:0.85rem;
    display:flex;
    align-items:center;
    gap:0.5rem;
    position: relative;
    z-index: 2;
    transition:var(--spring);
}
.btn-prompt-try:hover{
    background:rgba(255,255,255,0.2);
}
/* Responsive Process */
@media (max-width:900px){
    .process-grid{grid-template-columns:1fr;}
}

/* ── Pricing Section ── */
.pricing-section{
    padding:8rem 5%;
    width: 100%;
    position:relative;
}

.pricing-ambient-glow{
    position:absolute;
    width:800px;
    height:800px;
    background:radial-gradient(circle,rgba(200,200,200,0.04) 0%,transparent 50%);
    border-radius:50%;
    left:-200px;
    top:0;
    pointer-events:none;
    filter:blur(80px);
    animation:breathe 12s ease-in-out infinite reverse;
    z-index: -1;
}

body.dark-mode .pricing-ambient-glow{
    background:radial-gradient(circle,rgba(255,255,255,0.02) 0%,transparent 50%);
}

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

.pricing-header h2{
    font-family:'Outfit',sans-serif !important;
    font-size:clamp(2.5rem,4vw,3.5rem);
    font-weight:900;
    margin-bottom:1rem;
}

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

.pricing-grid{
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    gap:1.5rem;
    margin-top:5rem;
    align-items:stretch;
}

.pricing-card:nth-child(1) { grid-column: 1 / 2; }
.pricing-card:nth-child(2) { grid-column: 2 / 3; grid-row: span 2; }
.pricing-card:nth-child(3) { grid-column: 1 / 2; }
.pricing-card:nth-child(4) { grid-column: 1 / 3; }

.pricing-card{
    background:rgba(255,255,255,0.7);
    backdrop-filter:blur(40px) saturate(150%);
    -webkit-backdrop-filter:blur(40px) saturate(150%);
    padding:3rem 2rem;
    border-radius:var(--radius-lg);
    border:1px solid rgba(0,0,0,0.05);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,0.6), 0 4px 20px rgba(0,0,0,0.06);
    display:flex;
    flex-direction:column;
    transition:var(--spring);
    position:relative;
}

body.dark-mode .pricing-card{
    background:rgba(10,10,10,0.4);
    border:1px solid rgba(255,255,255,0.05);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,0.05), 0 8px 32px rgba(0,0,0,0.4);
}

.pricing-card .pricing-features{
    flex:1;
}

.pricing-card .btn-pricing{
    margin-top:auto;
}

.pricing-card:hover{
    transform:translateY(-8px);
    box-shadow:var(--card-shadow-hover);
    border-color:var(--text-primary);
}

.pricing-card.featured{
    background:#000000;
    color:#FFFFFF;
    border-color:#000000;
    transform:scale(1.05);
    z-index:2;
    box-shadow:0 40px 100px rgba(0,0,0,0.2);
}

body.dark-mode .pricing-card.featured{
    background:#0C0C0E;
    color:#FFFFFF;
    border: 1px solid rgba(255,255,255,0.2);
    box-shadow: 0 0 40px rgba(255,255,255,0.03);
}

.pricing-card.featured h3,
.pricing-card.featured .pricing-amount,
.pricing-card.featured .pricing-features li,
.pricing-card.featured .pricing-features i {
    color: inherit;
}

.pricing-card.featured .pricing-period,
.pricing-card.featured .pricing-features .fa-times,
.pricing-card.featured .pricing-features .fa-bolt-gold {
    color: rgba(255,255,255,0.7);
}

body.dark-mode .pricing-card.featured .pricing-period,
body.dark-mode .pricing-card.featured .pricing-features .fa-times,
body.dark-mode .pricing-card.featured .pricing-features .fa-bolt-gold {
    color: rgba(255,255,255,0.6);
}

.pricing-popular{
    position:absolute;
    text-transform:uppercase;
    letter-spacing:0.08em;
    padding:0.3rem 0.9rem;
    border-radius:var(--radius-md);
    white-space:nowrap;
    background: #FFFFFF !important;
    color: #000000 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 10;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
}

.pricing-card h3{
    font-size:1.1rem;
    font-weight:700;
    color:var(--text-primary);
    margin-bottom:0.5rem;
}

.pricing-amount{
    font-size:2.5rem;
    font-weight:800;
    color:var(--text-primary);
    letter-spacing:-0.02em;
}

.pricing-amount-custom{
    font-size:2rem;
}

.pricing-period{
    font-size:0.82rem;
    color:var(--text-secondary);
    margin-bottom:1.5rem;
}

.pricing-features{
    list-style:none;
    padding:0;
    margin:0 0 2rem;
    display:flex;
    flex-direction:column;
    gap:0.7rem;
}

.pricing-features li{
    display:flex;
    align-items:center;
    gap:0.6rem;
    font-size:0.85rem;
    color:var(--text-secondary);
}

.pricing-features i{
    font-size:0.75rem;
    color:var(--text-primary);
}

.pricing-features .fa-times{
    color:var(--text-secondary);
    opacity:0.4;
}

.pricing-features .fa-infinity-green{
    color:var(--text-primary);
}

.pricing-features .fa-bolt-gold{
    color:var(--text-secondary);
}

/* slider */
.slider-container{
    margin-bottom:1.5rem;
}

.slider-label-row{
    display:flex;
    justify-content:space-between;
    font-size:0.82rem;
    font-weight:600;
    color:var(--text-secondary);
    margin-bottom:0.5rem;
}

.slider-value-accent{
    color:var(--text-primary);
    font-weight:700;
}

.slider-input{
    width:100%;
    -webkit-appearance:none;
    appearance:none;
    height:4px;
    background:var(--border-color);
    border-radius:4px;
    outline:none;
}

.slider-input::-webkit-slider-thumb{
    -webkit-appearance:none;
    width:18px;
    height:18px;
    border-radius:50%;
    background:var(--text-primary);
    cursor:pointer;
    box-shadow:0 2px 6px rgba(0,0,0,0.2);
}

.btn-pricing{
    display:block;
    width:100%;
    padding:0.75rem;
    border-radius:var(--radius-md);
    font-weight:600;
    font-size:0.88rem;
    text-align:center;
    text-decoration:none;
    transition:var(--spring);
    cursor:pointer;
    border:none;
    font-family:'Inter',sans-serif;
}

.btn-pricing-solid{
    background:var(--text-primary);
    color:var(--bg-color);
}

.btn-pricing-outline{
    background:transparent;
    border:1.5px solid var(--border-color);
    color:var(--text-primary);
}

.btn-pricing:hover{
    transform:translateY(-2px);
    box-shadow:var(--card-shadow-hover);
    filter:brightness(1.1);
}

/* ── Resources / Blog ── */
.resources-section{
    padding:8rem 5%;
    width: 100%;
    position:relative;
}

.resources-section::before{
    content:'';
    position:absolute;
    top:0;
    left:50%;
    transform:translateX(-50%);
    width:80%;
    max-width:800px;
    height:1px;
    background:linear-gradient(90deg, transparent, rgba(0,0,0,0.1), transparent);
}

body.dark-mode .resources-section::before{
    background:linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
}

.resources-container{
    max-width:1100px;
    margin:0 auto;
}



.resources-header{
    text-align:center;
    margin-bottom:4rem;
}

.resources-header h2{
    font-family:'Outfit',sans-serif !important;
    font-size:clamp(2.5rem,4vw,3.5rem);
    font-weight:900;
    margin-bottom:1rem;
}

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

.resources-grid{
    display:grid !important;
    grid-template-columns:repeat(2,1fr);
    gap:4rem !important;
    row-gap:4rem !important;
    margin-top:5rem;
    margin-bottom:6rem;
}

.resource-card{
    background:var(--surface-solid);
    border:1px solid transparent; /* Hide standard border */
    border-radius:var(--radius-lg);
    transition:var(--spring);
    box-shadow:var(--card-shadow);
    display:flex;
    flex-direction:column;
    position:relative;
    overflow:hidden;
    margin-bottom: 2rem; /* Fail-safe for vertical stacking */
}

/* Glassmorphism Animated Edge */
.resource-card::before{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 250%; /* Wider to cover rectangle */
    height: 250%;
    background: conic-gradient(transparent 70%, rgba(150, 150, 150, 0.4) 100%);
    transform: translate(-50%, -50%) rotate(0deg);
    animation: spinEdge 8s linear infinite;
    z-index: 0;
}

.resource-card::after{
    content: '';
    position: absolute;
    inset: 1px;
    background: var(--surface-solid);
    border-radius: calc(var(--radius-lg) - 1px);
    z-index: 1;
}

body.dark-mode .resource-card::before{
    background: conic-gradient(transparent 70%, rgba(255, 255, 255, 0.3) 100%);
}

.resource-card > * {
    position: relative;
    z-index: 2;
}

.resource-card:hover{
    transform:translateY(-8px);
    box-shadow:var(--card-shadow-hover);
}

.resource-visual{
    position:relative;
    padding:2.5rem;
    background:var(--accent-subtle);
    display:flex;
    align-items:center;
    justify-content:center;
}

.resource-visual i{
    font-size:2.5rem;
    color:var(--text-primary);
    opacity:0.2;
}

.resource-tag{
    position:absolute;
    top:1rem;
    right:1rem;
    font-size:0.68rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.08em;
    padding:0.25rem 0.7rem;
    border-radius:var(--radius-md);
    background:var(--text-primary);
    color:var(--bg-color);
}

.resource-content{
    padding:2.5rem;
}

.resource-content h3{
    font-family:'Outfit',sans-serif;
    font-size:1.5rem;
    font-weight:800;
    line-height:1.25;
    margin-bottom:1rem;
    color:var(--text-primary);
}

.resource-content p{
    font-size:0.88rem;
    color:var(--text-secondary);
    line-height:1.6;
    margin-bottom:1rem;
}

.resource-highlights{
    list-style:none;
    padding:0;
    margin:0 0 1.5rem;
}

.resource-highlights li{
    display:flex;
    align-items:center;
    gap:0.5rem;
    font-size:0.82rem;
    color:var(--text-secondary);
    margin-bottom:0.4rem;
}

.resource-highlights i{
    color:var(--text-primary);
    font-size:0.7rem;
}

.resource-footer{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding-top:1rem;
    border-top:1px solid var(--border-color);
}

.read-time{
    font-size:0.75rem;
    color:var(--text-secondary);
    font-weight:500;
}

.resource-link{
    color:var(--text-primary);
    text-decoration:none;
    font-weight:600;
    font-size:0.82rem;
    display:inline-flex;
    align-items:center;
    gap:0.3rem;
    transition:gap 0.2s ease;
}

.resource-link:hover{
    gap:0.6rem;
}

.seo-content-block{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:3rem;
    margin-top:5rem;
    padding:3rem;
    background:var(--surface-solid,var(--surface-color));
    border:1px solid var(--border-color);
    border-radius:var(--radius-lg);
}

.seo-column h4{
    font-size:1rem;
    font-weight:700;
    color:var(--text-primary);
    margin-bottom:0.75rem;
}

.seo-column p{
    font-size:0.88rem;
    color:var(--text-secondary);
    line-height:1.7;
}

.hero-section{
    padding: calc(var(--header-h) + 4rem) 5% 4rem;
    width: 100%;
    text-align:center;
    position:relative;
    z-index: 10;
}

/* ── FAQ ── */
.faq-section{
    padding:8rem 5%;
    width: 100%;
    background: var(--surface-solid);
}

.faq-header{
    text-align:center;
    margin-bottom:4rem;
}

.faq-header h2{
    font-family:'Outfit',sans-serif !important;
    font-size:clamp(2.5rem,4vw,3.5rem);
    font-weight:900;
    margin-bottom:3rem;
    text-align:center;
}

/* ── FAQ Accordion ── */
.faq-accordion{
    max-width:800px;
    margin:0 auto;
    display:flex;
    flex-direction:column;
    gap:1.5rem;
    padding-bottom:100px;
}

.faq-accordion-item{
    background:var(--surface-color);
    border:1px solid var(--border-color);
    border-radius:var(--radius-md);
    overflow:hidden;
    transition:var(--transition);
    margin-bottom: 0.5rem;
}

.faq-accordion-item:hover{
    border-color:rgba(150,150,150,0.3);
}

body.dark-mode .faq-accordion-item:hover{
    border-color:rgba(255,255,255,0.3);
}

.faq-accordion-header{
    width:100%;
    text-align:left;
    background:none;
    border:none;
    padding:1.5rem;
    font-size:1.1rem;
    font-weight:600;
    color:var(--text-primary);
    display:flex;
    justify-content:space-between;
    align-items:center;
    cursor:pointer;
    transition:color 0.3s;
}

.faq-accordion-header i{
    transition:transform 0.4s cubic-bezier(0.16,1,0.3,1);
    color:var(--text-secondary);
}

.faq-accordion-item.active .faq-accordion-header i{
    transform:rotate(45deg); /* Turns plus into an X */
    color:var(--text-primary);
}

.faq-accordion-content{
    max-height:0;
    overflow:hidden;
    transition:max-height 0.4s cubic-bezier(0.16,1,0.3,1);
}

.faq-accordion-content p{
    padding:0 1.5rem 1.5rem;
    margin:0;
    color:var(--text-secondary);
    line-height:1.6;
}

/* ── CTA ── */
.cta-section{
    position:relative;
    padding:8rem 2rem;
    text-align:center;
    overflow:hidden;
    width: 100%;
    border-top:1px solid var(--border-color);
}

.cta-glow{
    position:absolute;
    width:500px;
    height:500px;
    background:radial-gradient(circle,rgba(150,150,150,0.1) 0%,transparent 70%);
    border-radius:50%;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    pointer-events:none;
    filter:blur(40px);
}

.cta-section h2{
    font-size:3rem;
    font-weight:800;
    letter-spacing:-0.03em;
    color:var(--text-primary);
    margin-bottom:1rem;
    position:relative;
}

.cta-section p{
    font-size:1.1rem;
    color:var(--text-secondary);
    margin-bottom:2.5rem;
    position:relative;
}

.btn-hero-primary{
    display:inline-flex;
    align-items:center;
    gap:0.5rem;
    padding:1rem 2.5rem;
    background:var(--text-primary);
    color:var(--bg-color);
    border-radius:var(--radius-md);
    font-weight:700;
    font-size:1.05rem;
    text-decoration:none;
    transition:var(--spring);
    position:relative;
}

.btn-hero-primary:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 35px rgba(0,0,0,0.2);
}

/* ── Support Form ── */
.support-form-section{
    padding:6rem 2rem;
    border-top:1px solid var(--border-color);
}

.support-form-container{
    max-width:700px;
    margin:0 auto;
}

.support-form-card{
    background:var(--surface-solid,var(--surface-color));
    border:1px solid var(--border-color);
    border-radius:var(--radius-lg);
    padding:3rem;
}

.support-form-card h3{
    font-size:1.75rem;
    font-weight:800;
    color:var(--text-primary);
    margin-bottom:0.5rem;
}

.support-form-card > p{
    color:var(--text-secondary);
    margin-bottom:2rem;
}

.premium-form .form-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1rem;
}

.premium-form .form-group{
    margin-bottom:1rem;
}

.premium-form label{
    display:block;
    font-size:0.78rem;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:0.05em;
    color:var(--text-secondary);
    margin-bottom:0.4rem;
}

.premium-form input,
.premium-form select,
.premium-form textarea{
    width:100%;
    background:var(--input-bg);
    border:1px solid var(--border-color);
    padding:0.75rem 1rem;
    border-radius:var(--radius-sm);
    color:var(--text-primary);
    font-family:'Inter',sans-serif;
    font-size:0.92rem;
    transition:border-color 0.2s ease;
    box-sizing:border-box;
}

.premium-form input:focus,
.premium-form select:focus,
.premium-form textarea:focus{
    border-color:var(--text-primary);
    outline:none;
    box-shadow:0 0 0 3px rgba(0,0,0,0.06);
}

.select-wrapper{
    position:relative;
}

.select-wrapper i{
    position:absolute;
    right:1rem;
    top:50%;
    transform:translateY(-50%);
    color:var(--text-secondary);
    pointer-events:none;
    font-size:0.8rem;
}

.btn-form-submit{
    display:inline-flex;
    align-items:center;
    gap:0.6rem;
    margin-top:0.5rem;
    padding:0.85rem 2rem;
    background:var(--text-primary);
    color:var(--bg-color);
    border:none;
    border-radius:var(--radius-md);
    font-weight:600;
    font-size:0.95rem;
    cursor:pointer;
    transition:var(--spring);
    font-family:'Inter',sans-serif;
}

.btn-form-submit:hover{
    transform:translateY(-2px);
    box-shadow:var(--card-shadow-hover);
}

.form-status{
    margin-top:1rem;
    font-size:0.85rem;
    opacity:0;
    transition:opacity 0.3s ease;
}

.form-status.visible{
    opacity:1;
}

.form-status.success{
    color:#30D158;
}

.form-status.error{
    color:#FF3B30;
}

/* ── Newsletter ── */
.newsletter-strip{
    padding:8rem 2rem;
    border-top:1px solid var(--border-color);
    background: var(--surface-solid);
    margin-top: 4rem;
}

.newsletter-content{
    max-width:900px;
    margin:0 auto;
    display:flex;
    flex-direction: column;
    align-items:center;
    text-align: center;
    gap:3rem;
}

.newsletter-text h3{
    font-size:1.5rem;
    font-weight:800;
    color:var(--text-primary);
    margin-bottom:0.3rem;
}

.newsletter-text p{
    font-size:0.88rem;
    color:var(--text-secondary);
}

.newsletter-form{
    display:flex;
    gap:0.5rem;
}

.newsletter-form input{
    padding:1rem 1.5rem;
    width: 350px;
    border:1px solid var(--border-color);
    background:var(--input-bg);
    border-radius:var(--radius-md);
    color:var(--text-primary);
    font-size: 1rem;
    font-family:'Inter',sans-serif;
    transition: var(--transition);
}

.newsletter-form input:focus {
    border-color: #999;
    outline: none;
    background: #FFF;
}

body.dark-mode .newsletter-form input:focus {
    background: rgba(255,255,255,0.05);
    border-color: #555;
}

.btn-newsletter {
    padding: 1rem 2.5rem;
    background: var(--text-primary);
    color: var(--bg-color);
    border: none;
    border-radius: var(--radius-md);
    font-weight: 700;
    cursor: pointer;
    transition: var(--spring);
}

.btn-newsletter:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

body.dark-mode .btn-newsletter:hover {
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.newsletter-status-msg{
    text-align:center;
    font-size:0.85rem;
    margin-top:0.5rem;
    opacity:0;
    transition:opacity 0.3s ease;
}

.newsletter-status-msg.visible{
    opacity:1;
}

.newsletter-status-msg.success{
    color:#30D158;
}

.newsletter-status-msg.error{
    color:#FF3B30;
}

/* ── Footer ── */
.lp-footer{
    padding:4rem 3rem 2rem;
    border-top:1px solid var(--border-color);
}

.footer-grid{
    display:grid;
    grid-template-columns:2fr 1fr 1fr 1fr;
    gap:3rem;
    max-width:1100px;
    margin:0 auto 3rem;
}

.footer-brand p{
    font-size:0.85rem;
    color:var(--text-secondary);
    line-height:1.6;
    margin-top:1rem;
}

.footer-logo-img{
    height:28px;
}

.footer-col h4{
    font-size:0.75rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.1em;
    color:var(--text-primary);
    margin-bottom:1rem;
}

.footer-col a{
    display:block;
    color:var(--text-secondary);
    text-decoration:none;
    font-size:0.85rem;
    margin-bottom:0.6rem;
    transition:color 0.2s ease;
}

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

.footer-bottom{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding-top:2rem;
    border-top:1px solid var(--border-color);
    max-width:1100px;
    margin:0 auto;
}

.footer-bottom span{
    font-size:0.78rem;
    color:var(--text-secondary);
}

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

.footer-social a{
    color:var(--text-secondary);
    font-size:1rem;
    text-decoration:none;
    transition:color 0.2s ease;
}

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

/* ── Scroll Reveal Animation ── */
.reveal{
    opacity:0;
    transform:translateY(30px);
    transition:all 0.8s cubic-bezier(0.16,1,0.3,1);
}

.reveal.visible{
    opacity:1;
    transform:translateY(0);
}

.stagger-1{transition-delay:0.1s;}
.stagger-2{transition-delay:0.2s;}
.stagger-3{transition-delay:0.3s;}
.stagger-4{transition-delay:0.4s;}

/* ── Responsive ── */
@media (max-width:1024px){
    .ecosystem-grid{grid-template-columns:1fr;}
    .pricing-grid{grid-template-columns:repeat(2,1fr);}
    .resources-grid{
        grid-template-columns:1fr;
        gap: 4rem !important;
    }
    .meet-ben-section{flex-direction:column;}
    .seo-content-block{grid-template-columns:1fr;}
    .footer-grid{grid-template-columns:1fr 1fr;}

}

@media (max-width:768px){
    .lp-nav{padding:0.75rem 1.5rem;}
    
    .mobile-menu-toggle{
        display:flex;
        align-items:center;
        justify-content:center;
        width:40px;
        height:40px;
        background:var(--accent-subtle);
        border:1px solid var(--border-color);
        border-radius:10px;
        color:var(--text-primary);
        cursor:pointer;
        z-index:1001;
}

    .lp-nav-links{
        position:fixed;
        top:80px;
        left:20px;
        right:20px;
        background:var(--surface-solid);
        border:1px solid var(--border-color);
        border-radius:var(--radius-lg);
        padding:2rem;
        flex-direction:column;
        gap:1.5rem;
        box-shadow:var(--card-shadow-hover);
        transform:translateY(-20px);
        opacity:0;
        pointer-events:none;
        transition:var(--spring);
        display:flex;
        z-index:1000;
}

    .lp-nav-links.active{
        transform:translateY(0);
        opacity:1;
        pointer-events:all;
}

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

    .lp-nav-links .nav-link,
    .lp-nav-links .nav-btn-outline,
    .lp-nav-links .nav-btn-primary{
        width:100%;
        justify-content:center;
        padding:1rem;
        text-align:center;
}
    .hero-section{padding:4rem 1.5rem 4rem;}
    .hero-title{font-size:2.5rem;}
    .stats-section{flex-direction:column;gap:2rem;}
    .pricing-grid{grid-template-columns:1fr;}
    .premium-form .form-row{grid-template-columns:1fr;}
    .newsletter-content{flex-direction:column;text-align:center;}
    .footer-grid{grid-template-columns:1fr;}
    .footer-bottom{flex-direction:column;gap:1rem;text-align:center;}
}

/* ── Legal Pages Padding ── */
.legal-container {
    padding-top: 140px !important;
    max-width: 800px;
    margin: 0 auto;
}

/* ── Dark Mode Overrides ── */
body.dark-mode .uvp-icon,
body.dark-mode .eco-icon{
    background:rgba(255,255,255,0.08);
}

body.dark-mode .nav-icon-btn{
    background:rgba(255,255,255,0.06);
    border-color:rgba(255,255,255,0.1);
}

body.dark-mode .lp-nav{
    background:rgba(10,10,10,0.85);
}

body.dark-mode .lp-nav.scrolled{
    background:rgba(10,10,10,0.85);
    border:none;
    border-bottom:1px solid rgba(255,255,255,0.08);
    box-shadow:0 8px 24px rgba(0,0,0,0.2);
}

body.dark-mode .resource-visual{
    background:rgba(255,255,255,0.04);
}

body.dark-mode .pricing-features .fa-times{
    opacity:0.3;
}

/* ── App Showcase Section ── */
.app-showcase-section{
    padding:10rem 5%;
    background:var(--bg-color);
    position:relative;
    overflow:hidden;
    width: 100%;
}

.app-showcase-container{
    max-width:1200px;
    margin:0 auto;
}

.app-showcase-grid{
    display:grid;
    grid-template-columns:1fr 1.2fr;
    gap:8rem;
    align-items:center;
}

/* iOS Device Mockup (CSS Only) */
.app-mockup-wrapper{
    display:flex;
    justify-content:center;
    perspective:1000px;
}

.device-iphone{
    width:280px;
    height:580px;
    background:#000;
    border-radius:44px;
    padding:12px;
    box-shadow:
        0 40px 100px -20px rgba(0,0,0,0.5),
        0 0 0 2px #333,
        inset 0 0 0 1px rgba(255,255,255,0.1);
    position:relative;
    transform:rotateY(-15deg) rotateX(5deg);
    transition:transform 0.8s var(--spring);
}

.device-iphone:hover{
    transform:rotateY(-5deg) rotateX(2deg) translateY(-10px);
}

.device-screen{
    width:100%;
    height:100%;
    background:var(--bg-color);
    border-radius:34px;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    border:1px solid var(--border-color);
}
/* ── Reveal Animations ── */
.reveal{
    opacity:0;
    transform:translateY(30px);
    transition:opacity 1s cubic-bezier(0.16,1,0.3,1),
                transform 1.2s cubic-bezier(0.16,1,0.3,1) !important;
    will-change:transform,opacity;
}

/* iOS Fallback:if user is on mobile AND animations are too slow,ensure visibility */
@media (max-width:768px){
    .reveal{
        transition-duration:0.6s !important;/* Faster trigger for mobile */
}
}

.reveal-active{
    opacity:1 !important;
    transform:translateY(0) !important;
}

/* ── Responsive Overrides ── */
@media (max-width:1024px){
    .lp-nav-logo{
        flex:1;
}
    
    .lp-nav{
        left:20px;
        right:20px;
        width:calc(100% - 40px);
        padding:0.8rem 1.5rem;
}
    
    .hero-split-grid{
        grid-template-columns:1fr;
        text-align:center;
        gap:3rem;
}
    
    .hero-content{
        align-items:center;
        text-align:center;
}
    
    .hero-title{
        text-align:center;
}
    
    .pricing-grid{
        grid-template-columns:repeat(2,1fr);
}
    
    .process-grid{
        grid-template-columns:repeat(2,1fr);
}
}

@media (max-width:768px){
    .lp-nav-links{
        display:none;/* Hide default on 768px as well,handled by the 1024px toggle */
}
    
    .hero-title{
        font-size:3rem;
}
    
    .stat-number{
        font-size:3rem;
}
    
    .stats-section{
        flex-direction:column;
        gap:3rem;
}
    
    .pricing-grid{
        grid-template-columns:1fr;
}
    
    .process-grid{
        grid-template-columns:1fr;
}
    
    .resources-grid{
        grid-template-columns:1fr;
        gap: 3rem !important;
    }
    
    .support-form-card{
        padding:2rem;
}
}

.app-header{
    padding:2.5rem 1.5rem 1rem;
    display:flex;
    align-items:center;
    gap:0.75rem;
    font-weight:700;
    font-size:0.9rem;
}

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

.app-content-mock{
    padding:1.5rem;
    flex:1;
    display:flex;
    flex-direction:column;
    gap:1.5rem;
}

.mock-card{
    background:var(--surface-solid);
    border-radius:16px;
    padding:1.25rem;
    border:1px solid var(--border-color);
}

.mock-line-title{width:50%;height:10px;background:var(--text-primary);opacity:0.8;border-radius:5px;margin-bottom:12px;}
.mock-line{width:100%;height:6px;background:var(--text-primary);opacity:0.4;border-radius:3px;margin-bottom:8px;}
.mock-line.short{width:40%;}

.mock-drawing-canvas{
    flex:1;
    background:var(--surface-solid);
    border-radius:16px;
    border:1px dashed var(--border-color);
    position:relative;
    overflow:hidden;
}

.mock-sketch-line{
    position:absolute;
    top:30%;
    left:10%;
    width:80%;
    height:2px;
    background:var(--text-primary);
    transform:rotate(15deg);
    opacity:0.4;
}

.mock-sketch-circle{
    position:absolute;
    top:50%;
    right:15%;
    width:40px;
    height:40px;
    border:2px solid var(--text-primary);
    border-radius:50%;
    opacity:0.3;
}

.mock-voice-wave{
    height:40px;
    display:flex;
    align-items:center;
    gap:4px;
    justify-content:center;
}

.wave-bar{width:4px;height:10px;background:var(--text-primary);border-radius:2px;animation:wave 1.2s ease-in-out infinite;}
.wave-bar:nth-child(2){animation-delay:0.2s;height:20px;}
.wave-bar:nth-child(3){animation-delay:0.4s;height:15px;}
.wave-bar:nth-child(4){animation-delay:0.6s;height:12px;}

@keyframes wave{
    0%,100%{height:10px;}
    50%{height:25px;}
}

/* Content Styles */
.app-features-content h2{
    font-size:3rem;
    font-weight:800;
    margin-bottom:1.5rem;
    line-height:1.1;
}

.app-features-content p{
    color:var(--text-secondary);
    font-size:1.1rem;
    margin-bottom:3rem;
    max-width:500px;
}

.app-exclusive-grid{
    display:flex;
    flex-direction:column;
    gap:2rem;
    margin-bottom:3rem;
}

.app-ex-item{
    display:flex;
    gap:1.5rem;
    align-items:flex-start;
}

.app-ex-item i{
    width:48px;
    height:48px;
    background:var(--surface-solid,rgba(0,0,0,0.05));
    border:1px solid var(--border-color);
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.25rem;
    color:var(--text-primary);
    flex-shrink:0;
}

.app-ex-item h4{font-size:1.1rem;margin-bottom:0.4rem;font-weight:700;}
.app-ex-item p{font-size:0.9rem;margin-bottom:0;line-height:1.6;}

.app-download-btns{
    display:flex;
    align-items:center;
    gap:2rem;
}

.app-store-btn{
    background:#000;
    color:#fff;
    padding:0.75rem 1.5rem;
    border-radius:12px;
    display:flex;
    align-items:center;
    gap:0.75rem;
    text-decoration:none;
    transition:var(--spring);
    border:1px solid #333;
}

.app-store-btn:hover{background:#111;transform:translateY(-4px);}

.app-store-btn i{font-size:1.8rem;}
.app-store-btn div{display:flex;flex-direction:column;}
.btn-sub{font-size:0.65rem;text-transform:uppercase;opacity:0.7;font-weight:600;letter-spacing:0.05em;}
.btn-main{font-size:1.1rem;font-weight:700;}

.app-status-tag{
    font-size:0.82rem;
    color:#4CAF50;
    font-weight:600;
    margin-bottom:0 !important;
}

@media (max-width:992px){
    .app-showcase-grid{grid-template-columns:1fr;gap:4rem;text-align:center;}
    .app-features-content{display:flex;flex-direction:column;align-items:center;}
    .app-features-content p{margin-left:auto;margin-right:auto;}
    .app-download-btns{flex-direction:column;gap:1rem;}
}

/* ── Elite Judicial Lab Section ── */
.judicial-lab-section{
    padding:10rem 5%;
    background:var(--bg-color);
    position:relative;
    overflow:hidden;
}

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

.lab-header{
    text-align:center;
    margin-bottom:6rem;
}

.lab-header h2{
    font-family:'Outfit',sans-serif !important;
    font-size:clamp(3rem,5vw,4.5rem);
    font-weight:900;
    margin-bottom:1.5rem;
    letter-spacing:-0.04em;
}

.lab-features-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:2rem;
}

.lab-card{
    background:var(--glass-bg);
    backdrop-filter:blur(25px);
    -webkit-backdrop-filter:blur(25px);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:var(--radius-xl);
    padding:3rem 2rem;
    text-align:center;
    transition:all 0.6s cubic-bezier(0.16,1,0.3,1);
    position:relative;
    overflow:hidden;
}

.lab-card::before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:radial-gradient(circle at top right,rgba(255,255,255,0.05),transparent);
    opacity:0;
    transition:opacity 0.6s ease;
}

.lab-card:hover{
    transform:translateY(-12px) scale(1.02);
    border-color:rgba(255,255,255,0.2);
    box-shadow:0 30px 60px -12px rgba(0,0,0,0.3);
}

.lab-card:hover::before{
    opacity:1;
}

.lab-icon{
    width:64px;
    height:64px;
    background:var(--text-primary);
    color:var(--bg-color);
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.5rem;
    margin:0 auto 2rem;
    transition:transform 0.6s var(--spring);
    box-shadow:0 8px 20px rgba(0,0,0,0.1);
}

.lab-card:hover .lab-icon{
    transform:rotateY(180deg) scale(1.1);
}

.lab-card h3{
    font-family:'Outfit',sans-serif;
    font-size:1.25rem;
    font-weight:800;
    margin-bottom:1rem;
    color:var(--text-primary);
}

.lab-card p{
    font-size:0.9rem;
    color:var(--text-secondary);
    line-height:1.6;
}

@media (max-width:768px){
    .judicial-lab-section{padding:6rem 1.5rem;}
    .lab-header{margin-bottom:3rem;}
    .lab-card{padding:2rem 1.5rem;}
}

/* ── Waitlist Form & Roadmap (New) ── */

/* Waitlist Section */
.waitlist-section{
    margin-top:2rem;
    padding:1.5rem;
    background:var(--surface-solid);
    border:1px solid var(--border-color);
    border-radius:var(--radius-lg);
    max-width:500px;
}

.waitlist-section h4{
    font-family:'Outfit',sans-serif;
    font-size:1.2rem;
    font-weight:800;
    margin-bottom:0.5rem;
    color:var(--text-primary);
}

.waitlist-section p{
    font-size:0.88rem;
    color:var(--text-secondary);
    margin-bottom:1rem;
}

.waitlist-form{
    display:flex;
    gap:0.5rem;
}

.waitlist-form input{
    flex:1;
    padding:0.7rem 1rem;
    border:1px solid var(--border-color);
    background:var(--input-bg);
    border-radius:var(--radius-md);
    color:var(--text-primary);
    font-family:'Inter',sans-serif;
    font-size:0.88rem;
}

.waitlist-form input:focus{
    outline:none;
    border-color:var(--text-primary);
    box-shadow:0 0 0 3px rgba(0,0,0,0.06);
}

.waitlist-form button{
    padding:0.7rem 1.5rem;
    background:var(--text-primary);
    color:var(--bg-color);
    border:none;
    border-radius:var(--radius-md);
    font-weight:600;
    font-size:0.85rem;
    cursor:pointer;
    transition:var(--spring);
    font-family:'Inter',sans-serif;
}

.waitlist-form button:hover{
    transform:translateY(-2px);
    box-shadow:var(--card-shadow-hover);
}

/* Coming Soon Badge */
.coming-soon-badge{
    display:inline-block;
    font-family:'Outfit',sans-serif;
    font-size:0.65rem;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:0.08em;
    padding:0.2rem 0.6rem;
    border-radius:100px;
    background:rgba(255,193,7,0.15);
    color:#FFC107;
    margin-top:0.5rem;
    border:1px solid rgba(255,193,7,0.3);
}

/* Roadmap Section */
.roadmap-section{
    padding:8rem 5%;
    width: 100%;
}

.roadmap-container{
    max-width:900px;
    margin:0 auto;
}

.roadmap-header{
    text-align:center;
    margin-bottom:4rem;
}

.roadmap-header h2{
    font-family:'Outfit',sans-serif;
    font-size:clamp(2.5rem,4vw,3.5rem);
    font-weight:900;
    margin-bottom:1rem;
    color:var(--text-primary);
}

.roadmap-header p{
    font-size:1.05rem;
    color:var(--text-secondary);
    max-width:600px;
    margin:0 auto;
}

.roadmap-timeline{
    display:flex;
    flex-direction:column;
    gap:2rem;
}

.roadmap-item{
    display:flex;
    gap:1.5rem;
    padding:2rem;
    background:var(--surface-solid);
    border:1px solid var(--border-color);
    border-radius:var(--radius-lg);
    transition:var(--spring);
    position:relative;
}

.roadmap-item:hover{
    transform:translateY(-4px);
    box-shadow:var(--card-shadow-hover);
    border-color:var(--text-primary);
}

.roadmap-item.completed .roadmap-marker{
    background:#30D158;
    color:white;
}

.roadmap-item.current .roadmap-marker{
    background:var(--text-primary);
    color:white;
    box-shadow:0 0 0 4px rgba(0,0,0,0.1);
}

.roadmap-item.upcoming .roadmap-marker{
    background:var(--border-color);
    color:var(--text-secondary);
}

.roadmap-marker{
    width:48px;
    height:48px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.1rem;
    flex-shrink:0;
    transition:var(--transition);
}

.roadmap-content h4{
    font-family:'Outfit',sans-serif;
    font-size:1.2rem;
    font-weight:800;
    margin-bottom:0.5rem;
    color:var(--text-primary);
}

.roadmap-content p{
    font-size:0.95rem;
    color:var(--text-secondary);
    line-height:1.6;
    margin-bottom:0.75rem;
}

.roadmap-date{
    font-size:0.8rem;
    font-weight:600;
    color:var(--text-primary);
}

.roadmap-date a{
    color:var(--text-primary);
    text-decoration:underline;
    font-weight:700;
}

.roadmap-date a:hover{
    color:var(--text-secondary);
}

@media (max-width:768px){
    .roadmap-item{
        flex-direction:column;
        gap:1rem;
}
    
    .roadmap-marker{
        width:40px;
        height:40px;
        font-size:1rem;
}
    
    .waitlist-form{
        flex-direction:column;
}
    
    .waitlist-form button{
        width:100%;
    }
}

/* ═══════════════════════════════════════════════════════════════
   DARK MODE OVERRIDES — Landing Page
   ═══════════════════════════════════════════════════════════════ */
body.dark-mode .lp-body{
    background:var(--bg-color);
    color:var(--text-primary);
}

/* Fix hardcoded shadows for dark mode */
body.dark-mode .hero-orb{
    opacity:0.4;
}

body.dark-mode .hero-orb-1{
    background:radial-gradient(circle,rgba(200,200,200,0.1) 0%,transparent 70%);
}

body.dark-mode .hero-orb-2{
    background:radial-gradient(circle,rgba(150,150,150,0.08) 0%,transparent 70%);
}

body.dark-mode .visual-panel{
    box-shadow:0 4px 20px rgba(255,255,255,0.05);
}

body.dark-mode .passive-panel{
    background:rgba(30,30,30,0.8);
    border-color:rgba(255,255,255,0.1);
}

body.dark-mode .active-panel{
    background:rgba(18,18,18,0.9);
    border-color:rgba(255,255,255,0.15);
}

body.dark-mode .panel-header{
    color:var(--text-secondary);
    border-color:rgba(255,255,255,0.1);
}

body.dark-mode .fake-line{
    background:rgba(255,255,255,0.1);
}

body.dark-mode .highlighter-yellow{
    background:rgba(255,199,0,0.3);
}

body.dark-mode .irac-tag{
    background:rgba(255,255,255,0.1);
    color:var(--text-primary);
}

body.dark-mode .panel-caption{
    color:var(--text-secondary);
}

body.dark-mode .ben-critique{
    background:rgba(255,255,255,0.05);
}

/* Trust Strip Dark Mode */
body.dark-mode .trust-strip{
    background:transparent;
    border-color:rgba(255,255,255,0.05);
}

body.dark-mode .trust-strip p{
    color:var(--text-secondary);
}

body.dark-mode .trust-marquee-content span{
    color:var(--text-primary);
    opacity:0.15;
}

body.dark-mode .trust-marquee-content span:hover{
    opacity:0.6;
}

/* Stats Section Dark Mode */
body.dark-mode .stats-section{
    background:transparent;
}

body.dark-mode .stat-item{
    background:transparent;
}

/* Feature Cards Dark Mode */
body.dark-mode .feature-card{
    background:rgba(18,18,18,0.6);
    border-color:rgba(255,255,255,0.08);
    box-shadow:0 4px 20px rgba(0,0,0,0.3);
}

body.dark-mode .feature-card:hover{
    background:rgba(24,24,24,0.8);
    box-shadow:0 8px 30px rgba(0,0,0,0.4);
}

/* Pricing Cards Dark Mode */
body.dark-mode .pricing-card{
    background:rgba(18,18,18,0.8);
    border-color:rgba(255,255,255,0.08);
}

body.dark-mode .pricing-card.featured{
    background:rgba(12,12,12,0.9);
    border-color:rgba(255,255,255,0.2);
}

/* Footer Dark Mode */
body.dark-mode .lp-footer{
    background:rgba(10,10,10,0.95);
    border-top-color:rgba(255,255,255,0.05);
}

body.dark-mode .footer-col h4{
    color:var(--text-primary);
}

body.dark-mode .footer-col a{
    color:var(--text-secondary);
}

body.dark-mode .footer-col a:hover{
    color:var(--text-primary);
}

/* Form Elements Dark Mode */
body.dark-mode .form-input{
    background:rgba(255,255,255,0.05);
    border-color:rgba(255,255,255,0.1);
    color:var(--text-primary);
}

body.dark-mode .form-input:focus{
    border-color:rgba(255,255,255,0.3);
    background:rgba(255,255,255,0.08);
}

body.dark-mode .form-input::placeholder{
    color:var(--text-secondary);
}

/* Hero Section Dark Mode */
body.dark-mode .hero-section{
    background:radial-gradient(circle at 10% 20%,rgba(255,255,255,0.02) 0%,transparent 40%),
                radial-gradient(circle at 90% 80%,rgba(255,255,255,0.02) 0%,transparent 40%);
}

/* Mode Toggle Dark Mode */
body.dark-mode .mode-toggle{
    background:rgba(255,255,255,0.05);
    border-color:rgba(255,255,255,0.1);
}

body.dark-mode .mode-btn{
    color:var(--text-secondary);
}

body.dark-mode .mode-btn.active{
    color:#000000;
}

/* Badge Dark Mode */
body.dark-mode .hero-badge{
    background:rgba(255,255,255,0.08);
    border-color:rgba(255,255,255,0.15);
    color:var(--text-primary);
}

body.dark-mode .showcase-badge{
    background:rgba(255,255,255,0.08);
    border-color:rgba(255,255,255,0.15);
    color:var(--text-primary);
}

/* Gradient Text Dark Mode Override */
body.dark-mode .gradient-text{
    background:linear-gradient(135deg,#FFFFFF 0%,#E0E0E0 50%,#A0A0A0 100%);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
}

/* Stat Numbers Dark Mode */
body.dark-mode .stat-number{
    color:var(--text-primary);
}

/* Buttons Dark Mode */
body.dark-mode .btn-hero-secondary{
    background:rgba(255,255,255,0.08);
    border-color:rgba(255,255,255,0.2);
    color:var(--text-primary);
}

body.dark-mode .btn-hero-secondary:hover{
    background:rgba(255,255,255,0.15);
}

/* Roadmap Dark Mode */
body.dark-mode .roadmap-section{
    background:transparent;
}

body.dark-mode .roadmap-item{
    background:rgba(15,15,20,0.5);
    border-color:rgba(255,255,255,0.08);
}

body.dark-mode .roadmap-marker{
    background:rgba(255,255,255,0.1);
    color:var(--text-primary);
}

body.dark-mode .roadmap-item.completed .roadmap-marker{
    background:rgba(34,197,94,0.2);
    color:#22c55e;
}

body.dark-mode .roadmap-item.current .roadmap-marker{
    background:rgba(59,130,246,0.2);
    color:#3b82f6;
}

/* Meet Ben Section Dark Mode */
body.dark-mode .meet-ben-section{
    background:transparent;
}

body.dark-mode .ben-hero-glow{
    background:radial-gradient(circle,rgba(139,92,246,0.15) 0%,transparent 70%);
}

body.dark-mode .ben-feature-card{
    background:rgba(15,15,20,0.6);
    border-color:rgba(255,255,255,0.08);
}

body.dark-mode .ben-feature-item{
    border-color:rgba(255,255,255,0.05);
}

body.dark-mode .ben-feature-item i{
    color:var(--text-primary);
}

/* Process Section Dark Mode */
body.dark-mode .process-section{
    background:transparent;
}

body.dark-mode .process-step{
    background:rgba(15,15,20,0.5);
    border-color:rgba(255,255,255,0.08);
}

/* Legal Lab Dark Mode */
body.dark-mode .judicial-lab-section{
    background:transparent;
}

body.dark-mode .lab-card{
    background:rgba(15,15,20,0.6);
    border-color:rgba(255,255,255,0.08);
}

body.dark-mode .lab-icon{
    background:rgba(255,255,255,0.08);
    color:var(--text-primary);
}

/* Testimonial Dark Mode */
body.dark-mode .testimonial-card{
    background:rgba(15,15,20,0.6);
    border-color:rgba(255,255,255,0.08);
}

/* Waitlist Form Dark Mode */
body.dark-mode .waitlist-form input{
    background:rgba(255,255,255,0.05);
    border-color:rgba(255,255,255,0.1);
    color:var(--text-primary);
}

body.dark-mode .waitlist-form input::placeholder{
    color:var(--text-secondary);
}

/* ═══════════════════════════════════════════════════════════════
   KEYFRAME ANIMATIONS
   ═══════════════════════════════════════════════════════════════ */
@keyframes marquee{
    0%{
        transform:translateX(0);
    }
    100%{
        transform:translateX(-50%);
    }
}

@keyframes fadeInUp{
    from{
        opacity:0;
        transform:translateY(30px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes pulse{
    0%,100%{
        opacity:1;
    }
    50%{
        opacity:0.5;
    }
}

@keyframes float{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-10px);
    }
}

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


/* ═══════════════════════════════════════════════════════
   THEME INSPIRATION ANIMATION SYSTEM
   Ported from GSAPWrapper.js + components.scss
   All colors use existing greyscale CSS vars
═══════════════════════════════════════════════════════ */

/* ── Pre-animation states — GSAP controls opacity via fromTo, no CSS opacity:0 ── */
/* .animate is a GSAP selector marker — no CSS visual state to avoid blank content if GSAP fails */
/* GSAP sets opacity: 0 dynamically through fromTo() at runtime */

/* High-specificity reveal — applied after GSAP runs */
.animate.gsap-revealed {
    opacity: 1;
}

/* ── Section Title Underline Bar ── */
/*  Adapts the theme's orange bar to use --text-primary */
.section-title {
    position: relative;
    display: inline-block;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -16px;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    height: 3px;
    width: 70px;
    background: var(--text-primary);
    border-radius: 30px;
    transform-origin: center;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.section-title.bar-left::after {
    left: 0;
    transform: translateX(0) scaleX(0);
    transform-origin: left;
}

.section-title.title-revealed::after {
    transform: translateX(-50%) scaleX(1);
}

.section-title.bar-left.title-revealed::after {
    transform: translateX(0) scaleX(1);
}

/* ── Floating Decorative Circles ── */
/* Equivalent to the theme's <Circle> components — greyscale variant */
.theme-circle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
    will-change: transform;
}

.theme-circle-fill {
    background: var(--border-color);
    opacity: 0.5;
}

.theme-circle-outline {
    background: transparent;
    border: 2px solid var(--border-color);
    opacity: 0.4;
}

body.dark-mode .theme-circle-fill {
    background: rgba(255, 255, 255, 0.06);
    opacity: 1;
}

body.dark-mode .theme-circle-outline {
    border-color: rgba(255, 255, 255, 0.08);
    opacity: 1;
}

/* ── Navigation: Hide on scroll down, show on scroll up ── */
.lp-nav.unpinned {
    transform: translateY(calc(-100% - 60px));
    opacity: 0;
    pointer-events: none;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Ensure pinned state always transitions back smoothly */
.lp-nav:not(.unpinned) {
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Perf: Only apply will-change to elements that truly need it ── */
.theme-circle {
    will-change: transform;
}

/* ── Feature / Lab Card Icon Hover Fill ── */
/* Equivalent to .feature-card-icon::before animation from the theme */
.lab-card,
.app-ex-item {
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.lab-icon,
.app-ex-item > i {
    position: relative;
    overflow: hidden;
    transition: color 0.3s ease;
}

.lab-icon::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0;
    background: var(--border-color);
    border-radius: inherit;
    transition: height 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: -1;
}

body.dark-mode .lab-icon::before {
    background: rgba(255, 255, 255, 0.06);
}

.lab-card:hover .lab-icon::before {
    height: 100%;
}

/* ── CTA Button Pulse Ring ── */
/* Replaces the theme's orange shadowPulse with greyscale */
@keyframes btnPulseRing {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.18);
    }
    70% {
        box-shadow: 0 0 0 22px rgba(0, 0, 0, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    }
}

@keyframes btnPulseRingDark {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.2);
    }
    70% {
        box-shadow: 0 0 0 22px rgba(255, 255, 255, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
}

/* Apply pulse ring to primary CTA buttons */
.btn-primary,
.nav-btn-primary,
.btn-pricing-solid {
    animation: btnPulseRing 3s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
}

body.dark-mode .btn-primary,
body.dark-mode .nav-btn-primary,
body.dark-mode .btn-pricing-solid {
    animation: btnPulseRingDark 3s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
}

/* Don't double-animate what already has pulseGlow */
.btn-primary {
    animation: pulseGlow 4s infinite, btnPulseRing 3s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
}

body.dark-mode .btn-primary {
    animation: pulseGlowDark 4s infinite, btnPulseRingDark 3s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
}

/* ── Resource Card Hover ── */
.resource-card {
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.35s ease,
                border-color 0.35s ease;
}

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

/* ── Process Card Entry Animations ── */
.process-card {
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.35s ease;
}

.process-card:hover {
    transform: translateY(-4px) scale(1.02);
}

/* ── Roadmap marker pulse (current item) ── */
.roadmap-item.current .roadmap-marker {
    animation: btnPulseRing 2.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
}

/* ── Intro play-btn style pulse (used in ShortIntro / video sections) ── */
.intro-play-btn {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease;
    animation: btnPulseRing 2s infinite;
    position: relative;
}

.intro-play-btn:hover {
    transform: scale(1.06);
}

/* ── Scroll-reveal initial opacity for .reveal elements ──
   (existing .reveal class preserved, GSAP handles the rest) */
/* Note: do not override existing .reveal transitions */