/* ========================= */
/* RESET */
/* ========================= */

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:"Inter",sans-serif;
    background:#080808;
    color:#ffffff;
    overflow-x:hidden;

}

img{

    display:block;
    max-width:100%;

}

a{

    text-decoration:none;

}

video{

    width:100%;
    display:block;

}

ul{

    list-style:none;

}

.container{

    width:min(1200px,92%);
    margin:auto;

}


/* ========================= */
/* NAVBAR */
/* ========================= */

.navbar{

    position:fixed;
    top:0;
    left:0;
    width:100%;

    z-index:999;

    backdrop-filter:blur(18px);

    background:rgba(8,8,8,.75);

    border-bottom:1px solid rgba(255,255,255,.06);

}

.nav-container{

    height:85px;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.logo img{

    width:165px;

}

.nav-links{

    display:flex;

    gap:40px;

}

.nav-links a{

    color:#d4d4d4;

    font-size:15px;

    transition:.3s;

}

.nav-links a:hover{

    color:white;

}

.nav-button{

    background:#7c5cff;

    color:white;

    padding:14px 26px;

    border-radius:14px;

    font-weight:600;

    transition:.3s;

}

.nav-button:hover{

    transform:translateY(-2px);

}


/* ========================= */
/* HERO */
/* ========================= */

.hero{

    min-height:100vh;

    display:flex;

    align-items:center;

    padding-top:120px;

}

.hero-grid{

    display:grid;

    grid-template-columns:1.05fr .95fr;

    gap:90px;

    align-items:center;

}

.hero-tag{

    display:inline-block;

    padding:10px 18px;

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

    border-radius:999px;

    color:#9f9f9f;

    margin-bottom:25px;

    font-size:14px;

}

.hero-content h1{

    font-family:"Space Grotesk",sans-serif;

    font-size:78px;

    line-height:.95;

    margin-bottom:30px;

    letter-spacing:-3px;

}

.hero-content p{

    color:#b5b5b5;

    font-size:20px;

    line-height:1.8;

    max-width:620px;

    margin-bottom:40px;

}

.hero-buttons{

    display:flex;

    gap:20px;

}

.primary-button{

    background:#7c5cff;

    color:white;

    padding:18px 32px;

    border-radius:16px;

    font-weight:600;

}

.secondary-button{

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

    color:white;

    padding:18px 32px;

    border-radius:16px;

}

.hero-stats{

    display:flex;

    gap:60px;

    margin-top:60px;

}

.stat h2{

    font-size:38px;

    margin-bottom:8px;

}

.stat span{

    color:#8e8e8e;

}

.video-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:18px;

}

.video-grid video{

    border-radius:24px;

    aspect-ratio:9/16;

    object-fit:cover;

    box-shadow:0 20px 50px rgba(0,0,0,.45);

}
/* ========================= */
/* SECTION DEFAULTS */
/* ========================= */

section{

    padding:120px 0;

}

.section-title{

    text-align:center;

    margin-bottom:70px;

}

.section-title span{

    display:inline-block;

    color:#7c5cff;

    font-weight:700;

    letter-spacing:2px;

    font-size:13px;

    margin-bottom:18px;

}

.section-title h2{

    font-family:"Space Grotesk",sans-serif;

    font-size:56px;

    margin-bottom:20px;

    line-height:1.05;

}

.section-title p{

    color:#9c9c9c;

    max-width:700px;

    margin:auto;

    line-height:1.8;

    font-size:18px;

}


/* ========================= */
/* PORTFOLIO */
/* ========================= */

.portfolio{

    background:#0d0d0d;

}

.portfolio-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:28px;

}

.portfolio-card{

    overflow:hidden;

    border-radius:24px;

    background:#141414;

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

    transition:.35s;

}

.portfolio-card:hover{

    transform:translateY(-10px);

    border-color:#7c5cff;

}

.portfolio-card video{

    aspect-ratio:9/16;

    object-fit:cover;

}


/* ========================= */
/* WHY IAAI */
/* ========================= */

.problem-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:35px;

}

.problem-card{

    background:#121212;

    border-radius:24px;

    padding:45px;

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

}

.problem-card.active{

    border:2px solid #7c5cff;

    background:linear-gradient(180deg,#18122f,#111111);

}

.problem-card h3{

    font-size:28px;

    margin-bottom:30px;

}

.problem-card li{

    color:#b5b5b5;

    margin-bottom:18px;

    font-size:17px;

}


/* ========================= */
/* PROCESS */
/* ========================= */

.process-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:25px;

}

.process-card{

    background:#111111;

    border-radius:22px;

    padding:35px;

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

    transition:.3s;

}

.process-card:hover{

    transform:translateY(-8px);

    border-color:#7c5cff;

}

.number{

    width:56px;

    height:56px;

    border-radius:50%;

    background:#7c5cff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-weight:700;

    margin-bottom:25px;

}

.process-card h3{

    font-size:24px;

    margin-bottom:18px;

}

.process-card p{

    color:#a8a8a8;

    line-height:1.8;

}
/* ========================= */
/* PRICING */
/* ========================= */

.pricing{

    background:#0d0d0d;

}

.pricing-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

}

.price-card{

    background:#111111;

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

    border-radius:24px;

    padding:45px;

    position:relative;

    transition:.35s;

}

.price-card:hover{

    transform:translateY(-10px);

    border-color:#7c5cff;

}

.featured{

    border:2px solid #7c5cff;

    transform:scale(1.03);

}

.popular{

    position:absolute;

    top:20px;

    right:20px;

    background:#7c5cff;

    padding:8px 14px;

    border-radius:999px;

    font-size:12px;

    font-weight:700;

}

.price-card h3{

    font-size:30px;

    margin-bottom:25px;

}

.price{

    font-size:56px;

    font-weight:700;

    margin-bottom:30px;

}

.price span{

    font-size:18px;

    color:#999;

}

.price-card li{

    color:#b5b5b5;

    margin-bottom:16px;

}

.price-btn{

    display:inline-block;

    margin-top:35px;

    background:#7c5cff;

    color:white;

    padding:16px 28px;

    border-radius:14px;

    font-weight:600;

}

/* ========================= */
/* FAQ */
/* ========================= */

.faq-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:25px;

}

.faq-item{

    background:#111111;

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

    border-radius:20px;

    padding:35px;

}

.faq-item h3{

    margin-bottom:15px;

    font-size:22px;

}

.faq-item p{

    color:#a9a9a9;

    line-height:1.8;

}

/* ========================= */
/* CTA */
/* ========================= */

.cta{

    padding:140px 0;

}

.cta-box{

    background:linear-gradient(135deg,#7c5cff,#5d42db);

    border-radius:30px;

    padding:80px;

    text-align:center;

}

.cta-box h2{

    font-family:"Space Grotesk",sans-serif;

    font-size:56px;

    margin-bottom:25px;

}

.cta-box p{

    max-width:700px;

    margin:0 auto 40px;

    font-size:20px;

    line-height:1.8;

    color:#ececec;

}

/* ========================= */
/* FOOTER */
/* ========================= */

footer{

    border-top:1px solid rgba(255,255,255,.06);

    padding:50px 0;

}

.footer-content{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:30px;

}

.footer-logo{

    width:170px;

}

.footer-links{

    display:flex;

    gap:30px;

}

.footer-links a{

    color:#cfcfcf;

}

footer p{

    color:#8f8f8f;

}

/* ========================= */
/* MOBILE */
/* ========================= */

@media(max-width:1100px){

.hero-grid,
.problem-grid,
.pricing-grid,
.process-grid,
.faq-grid,
.footer-content{

grid-template-columns:1fr;
display:grid;

}

.hero{

padding-top:160px;

}

.hero-content{

text-align:center;

}

.hero-buttons,
.hero-stats{

justify-content:center;

}

.hero-content h1{

font-size:54px;

}

.section-title h2{

font-size:42px;

}

.nav-links{

display:none;

}

.cta-box{

padding:50px 30px;

}

.cta-box h2{

font-size:40px;

}

}

@media(max-width:768px){

.video-grid{

grid-template-columns:1fr;

}

.portfolio-grid{

grid-template-columns:1fr;

}

.hero-stats{

flex-direction:column;

gap:25px;

}

.price{

font-size:46px;

}

.section-title{

margin-bottom:50px;

}

}
/* ========================= */
/* ANIMATIONS */
/* ========================= */

.hidden{

    opacity:0;

    transform:translateY(50px);

    transition:all .8s ease;

}

.show{

    opacity:1;

    transform:translateY(0);

}
/* ========================= */
/* PREMIUM EFFECTS */
/* ========================= */

body{

    opacity:0;
    transition:opacity .8s ease;

}

body.loaded{

    opacity:1;

}

.active{

    color:#7c5cff !important;

}

.primary-button,
.secondary-button,
.price-btn,
.nav-button{

    transition:.3s ease;

}

.hero{

    position:relative;

}

.hero::before{

    content:"";

    position:absolute;

    width:650px;
    height:650px;

    background:#7c5cff;

    filter:blur(180px);

    opacity:.08;

    top:-250px;
    right:-150px;

    border-radius:50%;

    pointer-events:none;

}

.portfolio-card video{

    transition:.4s ease;

}

.portfolio-card:hover video{

    transform:scale(1.03);

}

.price-card,
.problem-card,
.process-card,
.portfolio-card,
.faq-item{

    transition:.35s ease;

}
/* ========================= */
/* PREMIUM BACKGROUND */
/* ========================= */

.background-grid{

    position:fixed;

    inset:0;

    background-image:
        linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);

    background-size:50px 50px;

    mask-image:radial-gradient(circle at center, black 35%, transparent 90%);
    -webkit-mask-image:radial-gradient(circle at center, black 35%, transparent 90%);

    pointer-events:none;

    z-index:-3;

}

.gradient-1{

    position:fixed;

    width:700px;

    height:700px;

    background:#7c5cff;

    border-radius:50%;

    filter:blur(180px);

    opacity:.12;

    top:-250px;

    left:-250px;

    z-index:-2;

    animation:floatOne 18s ease-in-out infinite;

}

.gradient-2{

    position:fixed;

    width:600px;

    height:600px;

    background:#4f9cff;

    border-radius:50%;

    filter:blur(180px);

    opacity:.08;

    right:-200px;

    bottom:-250px;

    z-index:-2;

    animation:floatTwo 22s ease-in-out infinite;

}

.cursor-glow{

    position:fixed;

    width:300px;

    height:300px;

    border-radius:50%;

    background:#7c5cff;

    filter:blur(120px);

    opacity:.15;

    pointer-events:none;

    z-index:-1;

    transform:translate(-50%,-50%);

}

@keyframes floatOne{

0%{transform:translate(0,0);}
50%{transform:translate(120px,80px);}
100%{transform:translate(0,0);}

}

@keyframes floatTwo{

0%{transform:translate(0,0);}
50%{transform:translate(-120px,-80px);}
100%{transform:translate(0,0);}

}
/* ========================= */
/* FLOATING VIDEO WALL */
/* ========================= */

.floating-grid{

    perspective:1400px;

    transform:rotateY(-12deg) rotateX(8deg);

}

.video-card{

    border-radius:24px;

    overflow:hidden;

    background:#111;

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

    transition:.4s;

    animation:floatCard 8s ease-in-out infinite;

}

.video-card:nth-child(2){

    animation-delay:1s;

}

.video-card:nth-child(3){

    animation-delay:2s;

}

.video-card:nth-child(4){

    animation-delay:3s;

}

.video-card.large{

    transform:translateY(-20px);

}

.video-card:hover{

    transform:translateY(-18px) scale(1.04);

    border-color:#7c5cff;

    box-shadow:0 30px 70px rgba(124,92,255,.25);

}

@keyframes floatCard{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-14px);

}

100%{

transform:translateY(0px);

}

}
/* ========================= */
/* PREMIUM HERO */
/* ========================= */

.hero-content h1{

    background:linear-gradient(180deg,#ffffff 0%,#d8d8d8 100%);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

    animation:titleReveal 1.2s ease forwards;

}

.hero-content p{

    opacity:0;

    transform:translateY(25px);

    animation:fadeUp .8s .35s forwards;

}

.hero-buttons{

    opacity:0;

    transform:translateY(25px);

    animation:fadeUp .8s .55s forwards;

}

.hero-stats{

    opacity:0;

    transform:translateY(25px);

    animation:fadeUp .8s .75s forwards;

}

.hero-tag{

    opacity:0;

    animation:fadeIn .8s forwards;

}

.primary-button{

    box-shadow:0 15px 45px rgba(124,92,255,.35);

}

.primary-button:hover{

    box-shadow:0 25px 70px rgba(124,92,255,.55);

}

.secondary-button:hover{

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

}

@keyframes titleReveal{

0%{

opacity:0;
transform:translateY(40px);

}

100%{

opacity:1;
transform:translateY(0);

}

}

@keyframes fadeUp{

to{

opacity:1;
transform:translateY(0);

}

}

@keyframes fadeIn{

to{

opacity:1;

}

}
/* ========================= */
/* SCROLL INDICATOR */
/* ========================= */

.scroll-indicator{

    position:absolute;

    bottom:35px;

    left:50%;

    transform:translateX(-50%);

}

.scroll-indicator span{

    width:28px;

    height:50px;

    border:2px solid rgba(255,255,255,.3);

    border-radius:20px;

    display:block;

    position:relative;

}

.scroll-indicator span::before{

    content:"";

    width:6px;

    height:6px;

    background:white;

    border-radius:50%;

    position:absolute;

    left:50%;

    top:10px;

    transform:translateX(-50%);

    animation:scrollDot 1.8s infinite;

}

@keyframes scrollDot{

0%{

opacity:0;
top:10px;

}

40%{

opacity:1;

}

100%{

opacity:0;
top:28px;

}

}
.sticky-cta{
    position:fixed;
    bottom:25px;
    right:25px;
    background:#7c5cff;
    color:white;
    padding:16px 22px;
    border-radius:999px;
    font-weight:600;
    z-index:99999;
    box-shadow:0 20px 60px rgba(124,92,255,.35);
    transition:.3s;
}

.sticky-cta:hover{
    transform:translateY(-4px) scale(1.03);
    box-shadow:0 30px 80px rgba(124,92,255,.5);
}
section{
    opacity:0;
    transform:translateY(40px);
    transition:all .9s ease;
}

section.show{
    opacity:1;
    transform:translateY(0);
}