:root{
  --bg:#050505;
  --panel:#0d0d14;
  --panel-2:#11111d;
  --text:#ffffff;
  --muted:#a7a7b6;
  --line:rgba(255,255,255,.12);
  --purple:#7c3aed;
  --blue:#3b82f6;
  --cyan:#22d3ee;
  --green:#34d399;
  --radius:22px;
  --shadow:0 24px 80px rgba(0,0,0,.45);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Inter,Arial,sans-serif;background:radial-gradient(circle at top left,rgba(124,58,237,.25),transparent 28%),radial-gradient(circle at 80% 10%,rgba(59,130,246,.18),transparent 24%),var(--bg);color:var(--text);line-height:1.6;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{
    width:min(1400px,95%);
    margin:auto;
}
.nav{position:sticky;top:0;z-index:50;background:rgba(5,5,5,.75);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}
.nav-inner{height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo{display:flex;align-items:center;gap:12px;font-weight:900;font-size:22px;letter-spacing:-.04em}
.logo-mark{width:38px;height:38px;border-radius:14px;background:linear-gradient(135deg,var(--purple),var(--blue));display:grid;place-items:center;box-shadow:0 0 32px rgba(124,58,237,.55)}
.logo-mark span{font-weight:900}
.nav-links{display:flex;align-items:center;gap:26px;color:var(--muted);font-weight:700;font-size:14px}
.nav-links a:hover{color:white}
.nav-actions{display:flex;gap:12px;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:13px 18px;border-radius:999px;border:1px solid var(--line);font-weight:800;transition:.25s;cursor:pointer;background:rgba(255,255,255,.04)}
.btn:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.28)}
.btn-primary{background:linear-gradient(135deg,var(--purple),var(--blue));border:none;box-shadow:0 12px 35px rgba(124,58,237,.32)}
.btn-ghost{color:white}
.mobile-toggle{display:none;background:none;border:0;color:white;font-size:28px}
.hero{padding:92px 0 70px;position:relative}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center}
.badge{display:inline-flex;align-items:center;gap:10px;padding:9px 14px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.05);color:#d9d9ff;font-weight:800;font-size:13px;margin-bottom:22px}
.pulse{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 18px var(--green)}
h1{font-size:clamp(46px,6vw,78px);line-height:.94;letter-spacing:-.07em;margin-bottom:24px}
.gradient-text{background:linear-gradient(135deg,#fff,#bfa7ff,#72b5ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{font-size:20px;color:var(--muted);max-width:680px;margin-bottom:32px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:34px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:660px}
.stat{padding:18px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.04)}
.stat strong{display:block;font-size:24px}.stat span{color:var(--muted);font-size:13px;font-weight:700}
.dashboard{border:1px solid var(--line);border-radius:28px;background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.03));box-shadow:var(--shadow);overflow:hidden;position:relative}
.dashboard:before{content:"";position:absolute;inset:-80px;background:radial-gradient(circle,rgba(124,58,237,.26),transparent 45%);filter:blur(10px);pointer-events:none}
.dash-top{height:54px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px;padding:0 18px;position:relative}.dot{width:11px;height:11px;border-radius:50%;background:#555}.dot:nth-child(1){background:#ff5f57}.dot:nth-child(2){background:#ffbd2e}.dot:nth-child(3){background:#28c840}
.dash-body{padding:22px;position:relative}.video-card{
    height:250px;
    border-radius:22px;
    border:1px solid var(--line);

    background:
        
        url("assets/images/images%3Ahero-dashboard.png");

    background-size:cover;
    background-position:center;

    display:grid;
    place-items:center;

    margin-bottom:20px;
    position:relative;
    overflow:hidden;
}.play{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--purple),var(--blue));box-shadow:0 0 40px rgba(59,130,246,.45);font-size:28px}.scan{position:absolute;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,var(--cyan),transparent);animation:scan 2.4s infinite}@keyframes scan{0%{top:0}100%{top:100%}}.play{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--purple),var(--blue));box-shadow:0 0 40px rgba(59,130,246,.45);font-size:28px}.scan{position:absolute;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,var(--cyan),transparent);animation:scan 2.4s infinite}@keyframes scan{0%{top:0}100%{top:100%}}
.clip-list{display:grid;gap:12px}.clip-row{display:grid;grid-template-columns:55px 1fr auto;gap:12px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.045)}.thumb{
    height:42px;
    width:42px;

    border-radius:12px;

    background:linear-gradient(
        135deg,
        var(--purple),
        var(--blue)
    );

    display:flex;
    align-items:center;
    justify-content:center;

    overflow:hidden;
}
.thumb img{
    width:27px;
    height:27px;

    object-fit:contain;

}
.bar{height:8px;border-radius:10px;background:rgba(255,255,255,.13);overflow:hidden;margin:7px 0}.bar span{display:block;height:100%;background:linear-gradient(90deg,var(--purple),var(--cyan))}.score{font-weight:900;color:var(--green)}
.section{padding:86px 0}.section-head{text-align:center;max-width:760px;margin:0 auto 44px}.eyebrow{color:#bca7ff;font-weight:900;text-transform:uppercase;font-size:13px;letter-spacing:.16em;margin-bottom:10px}.section h2{font-size:clamp(32px,4vw,54px);line-height:1;letter-spacing:-.05em;margin-bottom:16px}.section-head p{color:var(--muted);font-size:18px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.card{padding:26px;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.025));box-shadow:0 12px 40px rgba(0,0,0,.18)}.card:hover{transform:translateY(-5px);transition:.25s;border-color:rgba(124,58,237,.45)}.icon{width:48px;height:48px;border-radius:16px;background:linear-gradient(135deg,var(--purple),var(--blue));display:grid;place-items:center;margin-bottom:18px;font-size:22px}.card h3{font-size:21px;margin-bottom:10px}.card p{color:var(--muted)}
.pricing-toggle{text-align:center;margin-bottom:24px}.toggle{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:5px;background:rgba(255,255,255,.05)}.toggle button{border:0;background:transparent;color:var(--muted);font-weight:900;padding:10px 18px;border-radius:999px;cursor:pointer}.toggle button.active{background:white;color:black}.price-card{position:relative}.popular{position:absolute;top:16px;right:16px;background:linear-gradient(135deg,var(--purple),var(--blue));font-size:12px;font-weight:900;padding:7px 10px;border-radius:999px}.price{font-size:44px;font-weight:950;letter-spacing:-.05em;margin:14px 0}.price small{font-size:15px;color:var(--muted)}.features{list-style:none;margin:20px 0;display:grid;gap:10px;color:#e5e5ee}.features li:before{content:"✓";color:var(--green);font-weight:900;margin-right:10px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:20px}.panel{border:1px solid var(--line);border-radius:var(--radius);padding:28px;background:rgba(255,255,255,.045)}.panel h3{font-size:26px;margin-bottom:14px}.comparison-list{list-style:none;display:grid;gap:12px;color:var(--muted)}
.testimonials{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.quote{font-size:17px;color:#ececff;margin-bottom:20px}.person{color:var(--muted);font-weight:800}
.form{max-width:640px;margin:auto;display:grid;gap:14px}.input,textarea{width:100%;padding:15px 16px;background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:14px;color:white;font:inherit}textarea{min-height:130px}.auth-box{max-width:480px;margin:70px auto;padding:30px;border:1px solid var(--line);border-radius:28px;background:rgba(255,255,255,.05)}
.footer{border-top:1px solid var(--line);padding:38px 0;color:var(--muted)}.footer-grid{display:flex;justify-content:space-between;gap:22px;flex-wrap:wrap}.footer a{margin-right:16px}.footer a:hover{color:white}
.dash-layout{display:grid;grid-template-columns:260px 1fr;min-height:calc(100vh - 76px)}.sidebar{border-right:1px solid var(--line);padding:24px;background:rgba(255,255,255,.03)}.sidebar a{display:block;padding:13px 14px;border-radius:14px;color:var(--muted);font-weight:800}.sidebar a.active,.sidebar a:hover{background:rgba(255,255,255,.08);color:white}.dash-main{padding:28px}.dash-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:22px 0}.upload-zone{border:1px dashed rgba(255,255,255,.28);border-radius:24px;padding:46px;text-align:center;background:rgba(255,255,255,.035)}
.price-card.featured{
    background: linear-gradient(
        135deg,
        #5b21b6 0%,
        #7c3aed 50%,
        #8b5cf6 100%
    );

    border: 2px solid #a78bfa;

    transform: scale(1.05);

    box-shadow:
        0 0 25px rgba(124,58,237,.5),
        0 0 60px rgba(124,58,237,.3);

    position: relative;
}

.price-card.featured h3,
.price-card.featured p,
.price-card.featured li,
.price-card.featured .price,
.price-card.featured .price small{
    color:#fff;
}

.price-card.featured .btn{
    background:#fff;
    color:#7c3aed;
    border:none;
    font-weight:900;
}

.price-card.featured:hover{
    transform:scale(1.07) translateY(-5px);
}
.vexora-panel{
    background: linear-gradient(
        135deg,
        #5b21b6 0%,
        #7c3aed 50%,
        #8b5cf6 100%
    );

    border: 2px solid #a78bfa;

    box-shadow:
        0 0 25px rgba(124,58,237,.5),
        0 0 60px rgba(124,58,237,.3),
        0 0 100px rgba(124,58,237,.15);

    position: relative;
}

.vexora-panel h3,
.vexora-panel li,
.vexora-panel p{
    color: white;
}
.ai-process-section{
    position:relative;
}

.ai-process-box{
    width:100%;
    display:grid;
    grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;
    gap:18px;
    align-items:stretch;

    padding:28px;
    border:1px solid rgba(255,255,255,.14);
    border-radius:28px;

    background:
        radial-gradient(circle at top, rgba(124,58,237,.25), transparent 35%),
        linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.025));

    box-shadow:
        0 0 35px rgba(124,58,237,.18),
        0 24px 80px rgba(0,0,0,.35);
}

.process-step{
    display:block;
    padding:24px;
    min-height:230px;

    border:1px solid rgba(255,255,255,.12);
    border-radius:29px;

    
}

.process-icon{
    width:58px;
    height:58px;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:26px;
    margin-bottom:18px;

    background:linear-gradient(135deg,var(--purple),var(--blue));
}

.process-step h3{
    font-size:20px;
    margin-bottom:10px;
}

.process-step p{
    color:var(--muted);
    line-height:1.5;
}

.process-step.active{
    background:linear-gradient(135deg,#5b21b6,#7c3aed,#3b82f6);
    border-color:#a78bfa;
    box-shadow:0 0 35px rgba(124,58,237,.45);
}

.process-step.active p{
    color:rgba(255,255,255,.88);
}

.process-arrow{
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:34px;
    color:#a78bfa;
    text-shadow:0 0 18px rgba(124,58,237,.8);
    margin:0;
}
.counter{
    font-weight:900;
    color:#34d399;
    transition:all .3s ease;
}
/* FEATURES PAGE UPGRADE */

.features-hero{
    padding:90px 0 80px;
    position:relative;
    overflow:hidden;
}

.features-hero::before{
    content:"";
    position:absolute;
    width:520px;
    height:520px;
    right:-160px;
    top:40px;
    background:radial-gradient(circle, rgba(124,58,237,.45), transparent 65%);
    filter:blur(20px);
    pointer-events:none;
}

.features-hero-grid{
    display:grid;
    grid-template-columns:1fr 520px;
    gap:50px;
    align-items:center;
}

.feature-preview{
    border:1px solid rgba(255,255,255,.14);
    border-radius:30px;
    padding:20px;
    background:linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.025));
    box-shadow:0 30px 90px rgba(0,0,0,.45);
    position:relative;
    overflow:hidden;
}

.preview-top{
    height:42px;
    display:flex;
    align-items:center;
    gap:8px;
    color:var(--muted);
    font-size:13px;
    font-weight:800;
}

.preview-top span{
    width:10px;
    height:10px;
    border-radius:50%;
    background:rgba(255,255,255,.25);
}

.preview-top strong{
    margin-left:auto;
    color:white;
}

.preview-video{
    height:270px;
    border-radius:24px;
    border:1px solid rgba(255,255,255,.12);
    background:
        linear-gradient(rgba(0,0,0,.25), rgba(0,0,0,.35)),
        url("assets/images/5_CDNzf.webp");
    background-size:cover;
    background-position:center;
    display:grid;
    place-items:center;
    position:relative;
    overflow:hidden;
}

.preview-result{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:12px;
    margin-top:14px;
}

.preview-result div{
    padding:15px;
    border-radius:18px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.1);
}

.preview-result small{
    color:var(--muted);
    font-weight:800;
    font-size:12px;
}

.preview-result strong{
    display:block;
    font-size:25px;
    margin-top:4px;
    color:white;
}

.feature-card{
    position:relative;
    overflow:hidden;
}

.feature-card::after{
    content:"";
    position:absolute;
    inset:auto -40px -80px auto;
    width:160px;
    height:160px;
    background:radial-gradient(circle, rgba(124,58,237,.35), transparent 65%);
    opacity:0;
    transition:.3s;
}

.feature-card:hover::after{
    opacity:1;
}

.feature-card:hover{
    transform:translateY(-8px);
    box-shadow:0 0 45px rgba(124,58,237,.22);
}

.workflow-glow-box{
    border:1px solid rgba(255,255,255,.14);
    border-radius:34px;
    padding:38px;
    background:
        radial-gradient(circle at top, rgba(124,58,237,.24), transparent 35%),
        linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.025));
    box-shadow:0 0 45px rgba(124,58,237,.16);
}

.mini-workflow{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:16px;
}

.workflow-item{
    padding:22px;
    border-radius:22px;
    border:1px solid rgba(255,255,255,.12);
    background:rgba(255,255,255,.045);
}

.workflow-item span{
    color:#a78bfa;
    font-weight:900;
    font-size:14px;
}

.workflow-item h3{
    margin:10px 0 8px;
    font-size:20px;
}

.workflow-item p{
    color:var(--muted);
    font-size:14px;
}
/* LIVE AI PROCESSING BOX */

.ai-live-box{
    max-width:620px;
    margin:40px auto 0;
    border:1px solid rgba(255,255,255,.14);
    border-radius:26px;
    overflow:hidden;
    background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.025));
    box-shadow:0 0 45px rgba(124,58,237,.22);
}

.ai-live-header{
    height:54px;
    display:flex;
    align-items:center;
    gap:10px;
    padding:0 20px;
    border-bottom:1px solid rgba(255,255,255,.12);
    background:rgba(255,255,255,.04);
}

.live-dot{
    width:10px;
    height:10px;
    border-radius:50%;
    background:#34d399;
    box-shadow:0 0 18px #34d399;
    animation:pulseLive 1.4s infinite;
}

.ai-terminal{
    padding:24px;
    font-family:monospace;
    font-size:15px;
    color:white;
}

.ai-terminal p{
    margin-bottom:12px;
    opacity:0;
    transform:translateY(8px);
    animation:terminalLine .5s forwards;
}

.line-1{animation-delay:.2s !important;}
.line-2{animation-delay:1.7s !important;}
.line-3{animation-delay:2.4s !important;color:#34d399;}
.line-4{animation-delay:3s !important;color:#34d399;}
.line-5{animation-delay:3.6s !important;color:#34d399;}
.line-6{animation-delay:4.4s !important;color:#22d3ee;}

.progress-bar{
    height:12px;
    width:100%;
    border-radius:999px;
    background:rgba(255,255,255,.12);
    overflow:hidden;
    margin:6px 0 20px;
}

.progress-bar span{
    display:block;
    height:100%;
    width:0;
    border-radius:999px;
    background:linear-gradient(90deg, #7c3aed, #3b82f6, #22d3ee);
    animation:progressFill 1.6s forwards;
    animation-delay:.5s;
}

@keyframes progressFill{
    to{
        width:80%;
    }
}

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

@keyframes pulseLive{
    0%,100%{
        transform:scale(1);
        opacity:1;
    }
    50%{
        transform:scale(1.4);
        opacity:.65;
    }
}
.demo-box{
    max-width:850px;
    margin:auto;
    padding:40px;
    border-radius:30px;

    border:1px solid rgba(255,255,255,.12);

    background:
    linear-gradient(
        180deg,
        rgba(255,255,255,.08),
        rgba(255,255,255,.03)
    );
}

.demo-options{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:30px;
    margin:30px 0;
}

.demo-group h3{
    margin-bottom:15px;
}

.demo-group label{
    display:block;
    margin-bottom:12px;
    cursor:pointer;
    color:var(--muted);
}

.demo-group input{
    margin-right:10px;
}

.generate-btn{
    width:100%;
}

.demo-result{
    margin-top:25px;
    padding:20px;
    border-radius:20px;

    background:rgba(255,255,255,.05);

    min-height:100px;

    display:flex;
    align-items:center;
    justify-content:center;

    text-align:center;

    font-weight:700;
}
.before-after{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    gap:24px;
    align-items:center;
}

.compare-card{
    padding:34px;
    border-radius:28px;
    border:1px solid rgba(255,255,255,.14);
    background:rgba(255,255,255,.045);
    min-height:330px;
}

.compare-label{
    display:inline-block;
    margin-bottom:18px;
    padding:8px 14px;
    border-radius:999px;
    font-size:13px;
    font-weight:900;
    background:rgba(255,255,255,.08);
    color:var(--muted);
}

.compare-card h3{
    font-size:28px;
    line-height:1.1;
    margin-bottom:22px;
}

.compare-card ul{
    list-style:none;
    display:grid;
    gap:14px;
    color:var(--muted);
}

.manual-card{
    opacity:.75;
}

.ai-card{
    background:linear-gradient(135deg,#5b21b6,#7c3aed,#3b82f6);
    border-color:#a78bfa;
    box-shadow:0 0 45px rgba(124,58,237,.45);
    transform:scale(1.04);
}

.ai-card,
.ai-card ul,
.ai-card .compare-label{
    color:white;
}

.compare-vs{
    width:64px;
    height:64px;
    border-radius:50%;
    display:grid;
    place-items:center;
    font-weight:900;
    background:white;
    color:#7c3aed;
    box-shadow:0 0 30px rgba(255,255,255,.25);
}
.ai-card{
    transition: all .3s ease;
    cursor:pointer;
}

.ai-card:hover{
    transform: translateY(-12px) scale(1.04);
    box-shadow:
        0 22px 60px rgba(124,58,237,.5),
        0 0 40px rgba(124,58,237,.35);
}
.card:hover{
    transform:translateY(-10px);
}

.card:hover .icon{
    transform:scale(1.15) rotate(8deg);
}
.upload-step{
    border:1px dashed rgba(167,139,250,.8);
    box-shadow:0 0 35px rgba(124,58,237,.25);
}

.upload-demo-box{
    margin-top:18px;
    padding:16px;
    border-radius:16px;
    background:rgba(124,58,237,.18);
    border:1px solid rgba(167,139,250,.45);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
    transition:.3s ease;
}

.upload-arrow{
    font-size:28px;
    color:#a78bfa;
}

.upload-demo-box strong{
    font-size:15px;
}

.upload-demo-box small{
    color:var(--muted);
}

.upload-step:hover .upload-demo-box{
    transform:translateY(-6px);
    background:rgba(124,58,237,.32);
    box-shadow:0 0 30px rgba(124,58,237,.45);
}

.upload-step:hover .upload-demo-box strong{
    font-size:0;
}

.upload-step:hover .upload-demo-box strong::after{
    content:"Insert video.mp4";
    font-size:15px;
}

/* FINAL MOBILE NAV FIX */

.mobile-toggle{
    display:flex !important;
    cursor:pointer;
}

@media(max-width:900px){

    .nav{
        position:sticky;
        top:0;
        z-index:9999;
    }

    .nav-inner{
        position:relative;
    }

    .mobile-toggle{
        display:flex !important;
        width:42px;
        height:42px;
        background:none;
        border:0;
        flex-direction:column;
        justify-content:center;
        align-items:center;
        gap:6px;
        cursor:pointer;
        z-index:10000;
    }

    .mobile-toggle span{
        display:block;
        width:28px;
        height:3px;
        background:#fff;
        border-radius:999px;
    }

    .nav-links,
    .nav-actions{
        display:none !important;
    }

    .nav.open .nav-links,
    .nav.open .nav-actions{
        display:flex !important;
        flex-direction:column;
        position:absolute;
        top:76px;
        left:0;
        right:0;
        background:#090912;
        border:1px solid var(--line);
        border-radius:20px;
        padding:20px;
        z-index:9999;
    }

    .nav.open .nav-links{
        gap:16px;
    }
}
@media(max-width:850px){
    .before-after{
        grid-template-columns:1fr;
    }

    .compare-vs{
        margin:auto;
    }

    .ai-card{
        transform:none;
    }
}
@media(max-width:700px){

    .demo-options{
        grid-template-columns:1fr;
    }

}
@media(max-width:650px){
    .ai-live-box{
        margin-top:28px;
    }

    .ai-terminal{
        font-size:13px;
        padding:18px;
    }
}
@media(max-width:1000px){
    .features-hero-grid{
        grid-template-columns:1fr;
    }

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

@media(max-width:650px){
    .preview-result{
        grid-template-columns:1fr;
    }

    .mini-workflow{
        grid-template-columns:1fr;
    }

    .workflow-glow-box{
        padding:22px;
    }
}
@media (max-width: 768px){

    .process-arrow{
        display:none !important;
    }

}
@media(max-width:1000px){
    .ai-process-box{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
}

/* phone */
@media(max-width:600px){
    .ai-process-box{
        grid-template-columns:1fr;
        padding:16px;
    }

    .process-step{
        padding:16px;
    }
}
@media(max-width:900px){.nav-links,.nav-actions{display:none}.mobile-toggle{display:block}.nav.open .nav-links,.nav.open .nav-actions{display:flex;position:absolute;left:4%;right:4%;top:76px;flex-direction:column;background:#090912;border:1px solid var(--line);border-radius:20px;padding:20px}.hero-grid,.split,.dash-layout{grid-template-columns:1fr}.grid-3,.testimonials,.stats,.dash-grid{grid-template-columns:1fr}.hero{padding-top:50px}.sidebar{border-right:0;border-bottom:1px solid var(--line)}}.
.generated-clips{
    margin-top:18px;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.generated-clips span{
    padding:8px 12px;
    border-radius:999px;
    background:rgba(124,58,237,.25);
    border:1px solid rgba(167,139,250,.4);
    font-size:13px;
    font-weight:700;
}

.export-btn{
    margin-top:18px;
    width:100%;
    padding:12px;
    border:none;
    border-radius:14px;
    cursor:pointer;
    font-weight:800;
    color:white;
    background:linear-gradient(
        135deg,
        #7c3aed,
        #3b82f6
    );
    transition:.3s;
}

.export-btn:hover{
    transform:translateY(-3px);
    box-shadow:0 0 25px rgba(124,58,237,.5);
}
.mini-clips{
    display:flex;
    gap:10px;
    margin-top:18px;
}

.mini-clip{
    flex:1;
    height:70px;
    border-radius:12px;
    background:linear-gradient(
        135deg,
        #7c3aed,
        #3b82f6
    );
}
.pricing-hero{
    position:relative;
}

.pricing-badges{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:12px;
    margin:-18px 0 28px;
}

.pricing-badges span{
    padding:10px 14px;
    border-radius:999px;
    background:rgba(255,255,255,.06);
    border:1px solid var(--line);
    color:#d9d9ff;
    font-size:13px;
    font-weight:800;
}

.pricing-grid{
    align-items:stretch;
}

.upgraded-price-card{
    position:relative;
    overflow:hidden;
}

.upgraded-price-card::before{
    content:"";
    position:absolute;
    width:180px;
    height:180px;
    right:-80px;
    top:-80px;
    background:radial-gradient(circle, rgba(124,58,237,.45), transparent 65%);
    pointer-events:none;
}

.plan-tag{
    display:inline-block;
    margin-bottom:14px;
    padding:7px 11px;
    border-radius:999px;
    background:rgba(124,58,237,.18);
    border:1px solid rgba(167,139,250,.35);
    color:#c4b5fd;
    font-size:12px;
    font-weight:900;
}

.agency-box{
    margin-top:22px;
    padding:30px;
    border-radius:28px;
    border:1px solid rgba(255,255,255,.14);
    background:
        radial-gradient(circle at right, rgba(124,58,237,.28), transparent 35%),
        linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.025));
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:24px;
    box-shadow:0 0 45px rgba(124,58,237,.16);
}

.agency-box h3{
    font-size:30px;
    margin-bottom:8px;
}

.agency-box p{
    color:var(--muted);
    max-width:620px;
}

.agency-price{
    text-align:right;
}

@media(max-width:800px){
    .agency-box{
        flex-direction:column;
        align-items:flex-start;
    }

    .agency-price{
        text-align:left;
    }
}
.creator-trust-section{
    position:relative;
}

.creator-stats{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:16px;
    margin-bottom:28px;
}

.creator-stats div{
    padding:22px;
    text-align:center;
    border-radius:22px;
    border:1px solid var(--line);
    background:rgba(255,255,255,.045);
}

.creator-stats strong{
    display:block;
    font-size:34px;
    line-height:1;
    margin-bottom:8px;
    background:linear-gradient(135deg,#fff,#bfa7ff,#72b5ff);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

.creator-stats span{
    color:var(--muted);
    font-weight:800;
    font-size:13px;
}

.creator-testimonials{
    align-items:stretch;
}

.creator-card{
    position:relative;
    overflow:hidden;
}

.creator-card::before{
    content:"";
    position:absolute;
    width:160px;
    height:160px;
    right:-70px;
    top:-70px;
    background:radial-gradient(circle, rgba(124,58,237,.35), transparent 70%);
}

.creator-avatar{
    width:48px;
    height:48px;
    border-radius:50%;
    display:grid;
    place-items:center;
    margin-bottom:18px;
    font-weight:900;
    background:linear-gradient(135deg,var(--purple),var(--blue));
    box-shadow:0 0 25px rgba(124,58,237,.35);
}

.featured-creator{
    border-color:#a78bfa;
    box-shadow:0 0 35px rgba(124,58,237,.28);
    transform:translateY(-8px);
}

@media(max-width:800px){
    .creator-stats,
    .creator-testimonials{
        grid-template-columns:1fr;
    }

    .featured-creator{
        transform:none;
    }
}
.platform-marquee-section{
    overflow:hidden;
}

.platform-marquee{
    width:100%;
    overflow:hidden;
    position:relative;
    padding:10px 0 20px;
}

.platform-marquee::before,
.platform-marquee::after{
    content:"";
    position:absolute;
    top:0;
    width:120px;
    height:100%;
    z-index:2;
    pointer-events:none;
}

.platform-marquee::before{
    left:0;
    background:linear-gradient(90deg, var(--bg), transparent);
}

.platform-marquee::after{
    right:0;
    background:linear-gradient(270deg, var(--bg), transparent);
}

.platform-track{
    display:flex;
    gap:22px;
    width:max-content;
    animation:platformScroll 28s linear infinite;
}

.platform-bubble{
    min-width:190px;
    height:95px;
    border-radius:28px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    font-weight:900;
    color:white;
    border:1px solid rgba(255,255,255,.14);
    background:
        radial-gradient(circle at top, rgba(124,58,237,.35), transparent 45%),
        linear-gradient(135deg, rgba(255,255,255,.09), rgba(255,255,255,.03));
    box-shadow:0 0 35px rgba(124,58,237,.18);
}

.platform-bubble:nth-child(2n){
    transform:translateY(18px);
}

.platform-bubble:nth-child(3n){
    transform:translateY(-10px);
}

@keyframes platformScroll{
    from{
        transform:translateX(0);
    }
    to{
        transform:translateX(-50%);
    }
}

@media(max-width:700px){
    .platform-bubble{
        min-width:145px;
        height:75px;
        font-size:17px;
    }

    .platform-track{
        gap:14px;
        animation-duration:22s;
    }
}
.contact-upgrade-section{
    position:relative;
}

.contact-grid{
    display:grid;
    grid-template-columns:1fr 520px;
    gap:50px;
    align-items:center;
}

.contact-info h2{
    font-size:clamp(38px,5vw,64px);
    line-height:.95;
    letter-spacing:-.06em;
    margin-bottom:22px;
}

.contact-info > p{
    color:var(--muted);
    font-size:19px;
    max-width:650px;
    margin-bottom:30px;
}

.contact-points{
    display:grid;
    gap:16px;
}

.contact-points div{
    padding:18px;
    border-radius:20px;
    border:1px solid var(--line);
    background:rgba(255,255,255,.045);
}

.contact-points span{
    width:44px;
    height:44px;
    border-radius:15px;
    display:grid;
    place-items:center;
    margin-bottom:12px;
    background:linear-gradient(135deg,var(--purple),var(--blue));
    box-shadow:0 0 25px rgba(124,58,237,.35);
}

.contact-points strong{
    display:block;
    font-size:18px;
    margin-bottom:5px;
}

.contact-points p{
    color:var(--muted);
    font-size:14px;
}

.contact-card{
    max-width:none;
    padding:30px;
    border:1px solid rgba(255,255,255,.14);
    border-radius:28px;
    background:
        radial-gradient(circle at top, rgba(124,58,237,.25), transparent 35%),
        linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.025));
    box-shadow:0 0 45px rgba(124,58,237,.18);
}

.contact-card h3{
    font-size:28px;
    margin-bottom:18px;
}

.contact-card select{
    appearance:none;
}

@media(max-width:900px){
    .contact-grid{
        grid-template-columns:1fr;
    }
}
/* Modern full-page background design */
.page-design-bg{
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(circle at 15% 20%, rgba(124, 58, 237, 0.18), transparent 28%),
    radial-gradient(circle at 85% 15%, rgba(0, 229, 255, 0.16), transparent 25%),
    radial-gradient(circle at 70% 75%, rgba(255, 45, 149, 0.12), transparent 30%),
    linear-gradient(120deg, transparent 0%, transparent 45%, rgba(0, 229, 255, 0.06) 46%, transparent 48%),
    linear-gradient(35deg, transparent 0%, transparent 55%, rgba(124, 58, 237, 0.07) 56%, transparent 58%);
}



.page-design-bg::after{
  content: "";
  position: absolute;
  width: 500px;
  height: 500px;
  right: -180px;
  top: 35%;
  border: 1px solid rgba(0, 229, 255, 0.18);
  border-radius: 40%;
  transform: rotate(25deg);
  box-shadow: 0 0 80px rgba(0, 229, 255, 0.08);
}
/* Features page background design */
.features-design-bg{
    position:fixed;
    inset:0;
    z-index:-1;
    pointer-events:none;
    overflow:hidden;
}

.features-design-bg::before{
    content:"";
    position:absolute;
    width:1000px;
    height:1000px;
    top:-350px;
    left:-420px;
    border:1px solid rgba(0,255,255,.09);
    border-radius:50%;
    box-shadow:0 0 90px rgba(0,255,255,.06);
}

.features-design-bg::after{
    content:"";
    position:absolute;
    width:900px;
    height:900px;
    right:-380px;
    bottom:-260px;
    border:1px solid rgba(139,92,246,.10);
    border-radius:50%;
    box-shadow:0 0 100px rgba(139,92,246,.07);
}
/* Pricing Page Background */
.pricing-design-bg{
    position:fixed;
    inset:0;
    z-index:-1;
    pointer-events:none;
    overflow:hidden;
}

.pricing-design-bg::before{
    content:"";
    position:absolute;
    width:700px;
    height:700px;
    top:-250px;
    left:-250px;
    background:radial-gradient(
        circle,
        rgba(0,255,255,.08),
        transparent 70%
    );
}

.pricing-design-bg::after{
    content:"";
    position:absolute;
    width:800px;
    height:800px;
    bottom:-350px;
    right:-250px;
    background:radial-gradient(
        circle,
        rgba(139,92,246,.08),
        transparent 70%
    );
}
.pricing-hero{
    position:relative;
    overflow:hidden;
}

.pricing-hero::before{
    content:"";
    position:absolute;
    width:500px;
    height:1px;
    top:180px;
    left:-100px;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(0,255,255,.4),
        transparent
    );
    transform:rotate(15deg);
}

.pricing-hero::after{
    content:"";
    position:absolute;
    width:500px;
    height:1px;
    right:-100px;
    bottom:100px;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(139,92,246,.4),
        transparent
    );
    transform:rotate(-15deg);
}
.features-hero{
    position:relative;
    overflow:hidden;
}

.features-hero::before{
    content:"";
    position:absolute;
    width:420px;
    height:2px;
    top:120px;
    right:8%;
    background:linear-gradient(90deg, transparent, rgba(0,255,255,.45), transparent);
    transform:rotate(-18deg);
    opacity:.6;
}

.features-hero::after{
    content:"";
    position:absolute;
    width:300px;
    height:2px;
    bottom:80px;
    left:10%;
    background:linear-gradient(90deg, transparent, rgba(139,92,246,.45), transparent);
    transform:rotate(18deg);
    opacity:.5;
}
/* Dashboard Background */
.dashboard-design-bg{
    position:fixed;
    inset:0;
    z-index:-1;
    pointer-events:none;
    overflow:hidden;
}

.dashboard-design-bg::before{
    content:"";
    position:absolute;
    inset:0;

    background:
    repeating-linear-gradient(
        90deg,
        transparent 0px,
        transparent 120px,
        rgba(0,255,255,.03) 121px,
        rgba(0,255,255,.03) 122px
    );

    opacity:.8;
}

.dashboard-design-bg::after{
    content:"";
    position:absolute;
    width:100%;
    height:100%;

    background:
    repeating-linear-gradient(
        0deg,
        transparent 0px,
        transparent 120px,
        rgba(139,92,246,.03) 121px,
        rgba(139,92,246,.03) 122px
    );
}
.dash-main{
    position:relative;
}

.dash-main::before{
    content:"";
    position:absolute;
    width:400px;
    height:2px;
    top:50px;
    right:0;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(0,255,255,.5),
        transparent
    );
}

.dash-main::after{
    content:"";
    position:absolute;
    width:300px;
    height:2px;
    bottom:100px;
    left:0;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(139,92,246,.5),
        transparent
    );
}
/* Contact page background like home page */
.contact-design-bg{
    position:fixed;
    inset:0;
    z-index:-1;
    pointer-events:none;
    overflow:hidden;
    background:
      radial-gradient(circle at 15% 20%, rgba(124,58,237,.16), transparent 28%),
      radial-gradient(circle at 85% 25%, rgba(0,229,255,.15), transparent 25%),
      radial-gradient(circle at 70% 80%, rgba(255,45,149,.10), transparent 30%);
}

.contact-design-bg::before{
    content:"";
    position:absolute;
    width:1100px;
    height:1100px;
    top:-420px;
    right:-420px;
    border:1px solid rgba(0,229,255,.10);
    border-radius:50%;
    box-shadow:0 0 100px rgba(0,229,255,.08);
}

.contact-design-bg::after{
    content:"";
    position:absolute;
    width:850px;
    height:850px;
    bottom:-330px;
    left:-260px;
    border:1px solid rgba(139,92,246,.10);
    border-radius:50%;
    box-shadow:0 0 90px rgba(139,92,246,.08);
}
/* Login + Signup Background */
.auth-design-bg{
    position:fixed;
    inset:0;
    z-index:-1;
    pointer-events:none;
    overflow:hidden;

    background:
      radial-gradient(circle at 15% 20%, rgba(124,58,237,.16), transparent 28%),
      radial-gradient(circle at 85% 15%, rgba(0,229,255,.15), transparent 25%),
      radial-gradient(circle at 75% 80%, rgba(255,45,149,.10), transparent 30%);
}

.auth-design-bg::before{
    content:"";
    position:absolute;
    width:1200px;
    height:1200px;
    top:-450px;
    right:-450px;
    border:1px solid rgba(0,229,255,.08);
    border-radius:50%;
}

.auth-design-bg::after{
    content:"";
    position:absolute;
    width:900px;
    height:900px;
    bottom:-350px;
    left:-300px;
    border:1px solid rgba(139,92,246,.08);
    border-radius:50%;
}
.auth-box{
    box-shadow:
        0 0 30px rgba(0,229,255,.10),
        0 0 80px rgba(139,92,246,.08);
}
.input,
textarea,
select{
    border:1px solid rgba(255,255,255,.08);
    transition:.3s;
}

.input:focus,
textarea:focus,
select:focus{
    border-color:rgba(0,229,255,.4);
    box-shadow:0 0 20px rgba(0,229,255,.15);
}
.mini-clips{
    display:contain;
    gap:8px;
    justify-content:center;
    margin-top:12px;
}

.mini-clip{
    width:58px;
    height:95px;
    border-radius:23px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 0 15px rgba(0,229,255,.08);
}