/*
=========================================================
 KARYA INNOVATIVE 2.0
 Main Stylesheet
 Extracted from index.php
=========================================================
*/
:root{
    --bg:#050505;
    --bg2:#090909;
    --panel:#0d0d0d;
    --panel2:#111111;

    --gold:#F2C94C;
    --gold2:#FFD966;
    --gold3:#C89B2C;

    --gold-glow:rgba(242,201,76,.34);

    --white:#ffffff;
    --muted:#999999;
    --muted2:#6e6e6e;

    --line:rgba(255,255,255,.10);
    --line2:rgba(242,201,76,.30);

    --max:1380px;
}

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

html{
    scroll-behavior:smooth;
}

body{
    background:var(--bg);
    color:var(--white);
    font-family:"DM Sans",sans-serif;
    overflow-x:hidden;
}

body::-webkit-scrollbar{
    width:7px;
}

body::-webkit-scrollbar-track{
    background:#050505;
}

body::-webkit-scrollbar-thumb{
    background:linear-gradient(var(--gold2),var(--gold3));
    border-radius:20px;
}

a{
    color:inherit;
    text-decoration:none;
}

button,
input,
textarea{
    font:inherit;
}

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

.container{
    width:min(calc(100% - 48px),var(--max));
    margin:auto;
}

.section{
    padding:130px 0;
    position:relative;
}

.section-label{
    color:var(--gold2);
    font-size:11px;
    font-weight:700;
    letter-spacing:3px;
    text-transform:uppercase;
    margin-bottom:18px;
}

.section-title{
    font-family:"Manrope",sans-serif;
    font-size:clamp(38px,5vw,72px);
    line-height:1.02;
    letter-spacing:-3px;
    font-weight:800;
}

.section-title span{
    color:var(--gold2);
}

.section-copy{
    color:#999;
    max-width:650px;
    line-height:1.8;
    margin-top:25px;
}

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

.navbar{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:1000;
    padding:18px 0;
    transition:.35s ease;
}

.navbar.scrolled{
    background:rgba(5,5,5,.84);
    backdrop-filter:blur(18px);
    border-bottom:1px solid rgba(255,255,255,.07);
}

.nav-inner{
    width:min(calc(100% - 48px),1450px);
    margin:auto;

    display:flex;
    align-items:center;
    justify-content:space-between;
}

.logo{
    width:155px;
}

.logo img{
    width:100%;
    height:auto;
}

.nav-links{
    display:flex;
    align-items:center;
    gap:34px;
}

.nav-links a{
    color:#b5b5b5;
    font-size:13px;
    font-weight:600;
    transition:.25s ease;
}

.nav-links a:hover{
    color:var(--gold2);
}

.nav-cta{
    padding:12px 20px;
    border-radius:100px;

    background:linear-gradient(
        135deg,
        #FFD966 0%,
        #F2C94C 45%,
        #C89B2C 100%
    );

    color:#080706;
    font-size:12px;
    font-weight:800;

    box-shadow:
        0 10px 30px rgba(242,201,76,.13),
        inset 0 1px rgba(255,255,255,.45);
}

.menu-toggle{
    display:none;
    width:42px;
    height:42px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:50%;
    background:#0d0d0d;
    color:white;
    cursor:pointer;
}

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

.hero{
    min-height:900px;
    height:100vh;
    max-height:1080px;

    position:relative;
    overflow:hidden;
    isolation:isolate;

    background:
        radial-gradient(
            circle at 74% 46%,
            rgba(242,201,76,.17),
            transparent 23%
        ),
        radial-gradient(
            circle at 63% 52%,
            rgba(242,201,76,.055),
            transparent 38%
        ),
        radial-gradient(
            circle at 20% 55%,
            rgba(255,255,255,.035),
            transparent 28%
        ),
        linear-gradient(
            120deg,
            #030303 0%,
            #070707 48%,
            #030303 100%
        );
}

.hero:before{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.70) 0%,
            rgba(0,0,0,.18) 55%,
            transparent 100%
        );
    pointer-events:none;
    z-index:-1;
}

.hero-grid{
    position:absolute;
    inset:0;
    opacity:.22;

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

    background-size:70px 70px;

    mask-image:linear-gradient(
        to right,
        black,
        transparent 78%
    );

    pointer-events:none;
}

#hero3d{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    z-index:1;
    pointer-events:none;
}

.hero-content{
    position:relative;
    z-index:5;

    width:min(calc(100% - 48px),var(--max));
    height:100%;
    margin:auto;

    display:flex;
    align-items:center;
}

.hero-copy{
    width:58%;
    padding-top:45px;
}

.hero-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:10px;

    padding:9px 14px;

    border:1px solid rgba(242,201,76,.28);
    background:rgba(242,201,76,.045);
    border-radius:100px;

    color:var(--gold2);
    font-size:10px;
    font-weight:800;
    letter-spacing:2.5px;

    opacity:0;
    animation:heroIn .8s .15s forwards;
}

.hero-eyebrow:before{
    content:"";
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--gold2);
    box-shadow:0 0 12px var(--gold);
}

.hero h1{
    margin-top:26px;

    max-width:900px;

    font-family:"Manrope",sans-serif;
    font-size:clamp(55px,7vw,108px);
    line-height:.92;
    letter-spacing:-6px;
    font-weight:800;

    opacity:0;
    animation:heroIn .9s .25s forwards;
}

.hero h1 em{
    font-style:normal;

    background:
        linear-gradient(
            100deg,
            #C89B2C 0%,
            #FFD966 45%,
            #F2C94C 100%
        );

    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;

    text-shadow:
        0 0 35px rgba(242,201,76,.08);
}

.hero-description{
    margin-top:26px;
    max-width:560px;

    color:#a0a0a0;
    font-size:15px;
    line-height:1.8;

    opacity:0;
    animation:heroIn .8s .42s forwards;
}

.hero-buttons{
    display:flex;
    align-items:center;
    gap:15px;

    margin-top:34px;

    opacity:0;
    animation:heroIn .8s .55s forwards;
}

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    min-height:52px;
    padding:0 24px;

    border-radius:100px;

    font-size:12px;
    font-weight:800;

    transition:.3s ease;
}

.btn-primary{
    background:
        linear-gradient(
            135deg,
            #FFD966 0%,
            #F2C94C 45%,
            #C89B2C 100%
        );

    color:#080706;

    border:1px solid rgba(255,217,102,.65);

    box-shadow:
        0 12px 38px rgba(242,201,76,.16),
        0 0 0 1px rgba(255,255,255,.08) inset,
        0 1px 0 rgba(255,255,255,.45) inset;

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        filter .3s ease;
}

.btn-primary:hover{
    transform:translateY(-3px);
    filter:brightness(1.06);

    box-shadow:
        0 18px 48px rgba(242,201,76,.24),
        0 0 30px rgba(242,201,76,.10),
        0 1px 0 rgba(255,255,255,.5) inset;
}

.btn-outline{
    border:1px solid rgba(255,255,255,.14);
    background:rgba(255,255,255,.025);
    color:#ddd;
}

.btn-outline:hover{
    border-color:rgba(242,201,76,.35);
    color:var(--gold2);
    transform:translateY(-3px);
}

.hero-trust{
    margin-top:35px;

    display:flex;
    align-items:center;
    gap:12px;

    color:#777;
    font-size:11px;

    opacity:0;
    animation:heroIn .8s .7s forwards;
}

.trust-dots{
    display:flex;
}

.trust-dots span{
    width:23px;
    height:23px;

    border-radius:50%;
    margin-left:-6px;

    background:
        linear-gradient(
            135deg,
            #333,
            #111
        );

    border:2px solid #050505;
}

.trust-dots span:first-child{
    margin-left:0;
}

.hero-stats{
    position:absolute;
    bottom:38px;
    left:0;

    width:100%;

    display:flex;
    gap:45px;

    opacity:0;
    animation:heroIn .8s .85s forwards;
}

.stat{
    position:relative;
    padding-right:45px;
}

.stat:not(:last-child):after{
    content:"";
    position:absolute;
    right:0;
    top:5px;

    width:1px;
    height:35px;

    background:rgba(255,255,255,.13);
}

.stat strong{
    display:block;

    color:#F2C94C;

    font-family:"Manrope";
    font-size:25px;
    font-weight:800;
}

.stat span{
    color:#EEEEEE;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:1px;
}

/* floating cards */

.float-card{
    position:absolute;
    z-index:6;

    padding:14px 17px;

    min-width:145px;

    border:1px solid rgba(255,255,255,.13);
    border-radius:16px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.09),
            rgba(255,255,255,.025)
        );

    backdrop-filter:blur(18px);

    box-shadow:
        0 20px 50px rgba(0,0,0,.30),
        inset 0 1px rgba(255,255,255,.08);

    animation:floatCard 5s ease-in-out infinite;
}

.float-card small{
    display:block;

    color:#666;
    font-size:8px;
    letter-spacing:1.5px;
    text-transform:uppercase;
    margin-bottom:5px;
}

.float-card strong{
    color:#ddd;
    font-size:12px;
}

.float-card i{
    color:var(--gold2);
    font-style:normal;
}

.card-one{
    top:25%;
    right:11%;
}

.card-two{
    top:62%;
    right:8%;
    animation-delay:-1s;
}

.card-three{
    top:37%;
    right:2%;
    animation-delay:-2s;
}

.card-four{
    top:72%;
    right:24%;
    animation-delay:-3s;
}

.card-five{
    top:18%;
    right:30%;
    animation-delay:-4s;
}

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

@keyframes floatCard{
    0%,100%{
        transform:translateY(0) rotate(0deg);
    }
    50%{
        transform:translateY(-12px) rotate(.5deg);
    }
}




/* =========================================================
   SERVICES
   ========================================================= */

.services{
    background:
        radial-gradient(
            circle at 80% 30%,
            rgba(242,201,76,.045),
            transparent 28%
        );
}

.services-head{
    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:40px;
    margin-bottom:60px;
}

.services-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
}

.service-card{
    position:relative;
    min-height:310px;

    padding:34px;

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

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.045),
            rgba(255,255,255,.012)
        );

    overflow:hidden;

    transition:
        transform .4s ease,
        border-color .4s ease,
        background .4s ease;
}

.service-card:before{
    content:"";
    position:absolute;

    width:180px;
    height:180px;

    top:-100px;
    right:-100px;

    background:var(--gold);
    filter:blur(90px);

    opacity:.06;

    transition:.4s;
}

.service-card:hover{
    transform:translateY(-8px);
    border-color:rgba(242,201,76,.27);
}

.service-card:hover:before{
    opacity:.15;
}

.service-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.service-number{
    color:#4d4d4d;
    font-size:11px;
    font-weight:800;
}

.service-icon{
    width:46px;
    height:46px;

    display:grid;
    place-items:center;

    border-radius:14px;

    color:var(--gold2);
    font-size:20px;

    background:rgba(242,201,76,.06);
    border:1px solid rgba(242,201,76,.15);
}

.service-card h3{
    margin-top:55px;

    font-family:"Manrope";
    font-size:25px;
    letter-spacing:-1px;
}

.service-card p{
    margin-top:13px;

    color:#777;
    font-size:13px;
    line-height:1.75;
}

.service-tags{
    display:flex;
    flex-wrap:wrap;
    gap:7px;

    margin-top:24px;
}

.service-tags span{
    padding:6px 9px;

    border-radius:100px;

    background:rgba(255,255,255,.035);
    color:#666;

    font-size:9px;
}

/* =========================================================
   ABOUT
   ========================================================= */

.about{
    background:#080808;
    overflow:hidden;
}

.about:after{
    content:"";
    position:absolute;

    width:500px;
    height:500px;

    right:-250px;
    top:20%;

    border-radius:50%;

    background:rgba(242,201,76,.045);
    filter:blur(100px);
}

.about-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:100px;
}

.about-visual{
    min-height:600px;
    position:relative;

    display:grid;
    place-items:center;
}

.about-orbit{
    position:absolute;

    width:460px;
    height:460px;

    border:1px solid rgba(242,201,76,.14);
    border-radius:50%;

    animation:spin 25s linear infinite;
}

.about-orbit:before,
.about-orbit:after{
    content:"";

    position:absolute;

    width:8px;
    height:8px;

    border-radius:50%;

    background:var(--gold2);
    box-shadow:0 0 18px var(--gold);
}

.about-orbit:before{
    top:40px;
    left:80px;
}

.about-orbit:after{
    right:55px;
    bottom:85px;
}

.about-orbit-two{
    width:350px;
    height:350px;

    border:1px dashed rgba(242,201,76,.12);

    animation:spinReverse 18s linear infinite;
}

.about-core{
    width:210px;
    height:210px;

    display:grid;
    place-items:center;

    border-radius:50%;

    background:
        radial-gradient(
            circle at 35% 30%,
            #252525,
            #080808 65%
        );

    border:1px solid rgba(242,201,76,.28);

    box-shadow:
        0 0 80px rgba(242,201,76,.11),
        inset 0 0 50px rgba(242,201,76,.04);
}

.about-core img{
    width:125px;
    filter:
        drop-shadow(0 0 18px rgba(242,201,76,.20));
}

.about-badge{
    position:absolute;

    right:8%;
    bottom:8%;

    padding:15px 20px;

    border-radius:16px;

    background:rgba(255,255,255,.045);
    border:1px solid rgba(255,255,255,.10);

    backdrop-filter:blur(15px);

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

.about-badge strong{
    color:var(--gold2);
    font-size:20px;
}

.about-badge span{
    display:block;
    color:#666;
    font-size:9px;
    text-transform:uppercase;
    letter-spacing:1px;
}

.about-list{
    margin-top:42px;
}

.about-item{
    display:grid;
    grid-template-columns:44px 1fr;
    gap:15px;

    padding:20px 0;

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

.about-item:last-child{
    border-bottom:1px solid rgba(255,255,255,.08);
}

.about-item-number{
    color:var(--gold2);
    font-size:11px;
    font-weight:800;
}

.about-item h4{
    font-family:"Manrope";
    font-size:15px;
}

.about-item p{
    margin-top:5px;
    color:#666;
    font-size:12px;
    line-height:1.6;
}

@keyframes spin{
    to{transform:rotate(360deg)}
}

@keyframes spinReverse{
    to{transform:rotate(-360deg)}
}

/* =========================================================
   AI ADVANTAGE
   ========================================================= */

.ai-section{
    overflow:hidden;
}

.ai-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:100px;
    align-items:center;
}

.ai-points{
    margin-top:45px;
}

.ai-point{
    display:grid;
    grid-template-columns:48px 1fr;
    gap:18px;

    padding:22px 0;

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

.ai-point:last-child{
    border-bottom:1px solid rgba(255,255,255,.08);
}

.ai-point-icon{
    width:42px;
    height:42px;

    display:grid;
    place-items:center;

    border-radius:12px;

    color:var(--gold2);
    background:rgba(242,201,76,.06);
    border:1px solid rgba(242,201,76,.13);
}

.ai-point h4{
    font-family:"Manrope";
    font-size:15px;
}

.ai-point p{
    color:#666;
    font-size:12px;
    line-height:1.65;
    margin-top:5px;
}

.ai-orb-wrap{
    min-height:580px;

    display:grid;
    place-items:center;

    position:relative;
}

.ai-orb{
    width:420px;
    height:420px;

    position:relative;

    display:grid;
    place-items:center;
}

.ai-orb .orb{
    position:absolute;
    inset:55px;

    border-radius:50%;

    background:
        radial-gradient(
            circle at 35% 30%,
            rgba(255,255,255,.13),
            rgba(242,201,76,.10) 25%,
            rgba(0,0,0,.95) 68%
        );

    border:1px solid rgba(242,201,76,.30);

    box-shadow:
        0 0 100px rgba(242,201,76,.12),
        inset 0 0 80px rgba(242,201,76,.08);
}

.ai-orb:before{
    content:"";

    position:absolute;
    inset:0;

    border:1px solid rgba(242,201,76,.16);
    border-radius:50%;

    animation:spin 14s linear infinite;
}

.ai-orb:after{
    content:"";

    position:absolute;
    inset:25px;

    border:1px dashed rgba(255,255,255,.10);
    border-radius:50%;

    animation:spinReverse 19s linear infinite;
}

.ai-orb img{
    position:relative;
    z-index:3;

    width:145px;

    filter:
        drop-shadow(0 0 25px rgba(242,201,76,.20));
}

.ai-label{
    position:absolute;

    padding:10px 15px;

    border-radius:100px;

    color:#888;
    font-size:9px;
    letter-spacing:1.5px;
    text-transform:uppercase;

    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.09);
    backdrop-filter:blur(15px);
}

.ai-label.one{
    top:40px;
    left:15px;
}

.ai-label.two{
    top:150px;
    right:-15px;
}

.ai-label.three{
    bottom:80px;
    right:25px;
}

.ai-label.four{
    bottom:45px;
    left:35px;
}

/* =========================================================
   WORK
   ========================================================= */

.work{
    background:#080808;
}

.work-head{
    display:flex;
    align-items:end;
    justify-content:space-between;
    margin-bottom:55px;
}

.work-link{
    color:var(--gold2);
    font-size:12px;
    font-weight:700;
}

.work-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
}

.work-card{
    position:relative;
    height:460px;

    overflow:hidden;

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

    background:
        radial-gradient(
            circle at 70% 25%,
            rgba(242,201,76,.18),
            transparent 25%
        ),
        linear-gradient(
            145deg,
            #181818,
            #070707
        );
}

.work-card:nth-child(2){
    background:
        radial-gradient(
            circle at 30% 30%,
            rgba(255,255,255,.10),
            transparent 25%
        ),
        linear-gradient(
            145deg,
            #141414,
            #050505
        );
}

.work-card:nth-child(3){
    background:
        radial-gradient(
            circle at 65% 40%,
            rgba(242,201,76,.13),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            #191919,
            #060606
        );
}

.work-visual{
    position:absolute;
    inset:0;

    display:grid;
    place-items:center;
}

.work-visual:before{
    content:"";

    width:220px;
    height:220px;

    border-radius:50%;

    border:1px solid rgba(242,201,76,.22);

    box-shadow:
        0 0 80px rgba(242,201,76,.09),
        inset 0 0 50px rgba(242,201,76,.04);

    transform:rotate(20deg);
}

.work-card:nth-child(2) .work-visual:before{
    border-radius:25px;
    transform:rotate(25deg);
}

.work-card:nth-child(3) .work-visual:before{
    width:180px;
    height:260px;
    border-radius:100px;
    transform:rotate(-25deg);
}

.work-content{
    position:absolute;
    left:28px;
    right:28px;
    bottom:28px;

    padding:22px;

    border-radius:18px;

    background:rgba(5,5,5,.72);
    border:1px solid rgba(255,255,255,.09);

    backdrop-filter:blur(15px);
}

.work-content small{
    color:var(--gold2);
    font-size:9px;
    letter-spacing:2px;
    text-transform:uppercase;
}

.work-content h3{
    margin-top:8px;
    font-family:"Manrope";
    font-size:21px;
}

.work-content p{
    color:#777;
    font-size:11px;
    margin-top:5px;
}

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

.process{
    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(242,201,76,.035),
            transparent 35%
        );
}

.process-grid{
    margin-top:65px;

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:0;
}

.process-card{
    padding:25px 35px 25px 0;

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

    position:relative;
}

.process-card:not(:first-child){
    padding-left:35px;
    border-left:1px solid rgba(255,255,255,.08);
}

.process-number{
    color:var(--gold2);
    font-size:11px;
    font-weight:800;
}

.process-card h3{
    margin-top:55px;
    font-family:"Manrope";
    font-size:21px;
}

.process-card p{
    margin-top:12px;
    color:#666;
    font-size:12px;
    line-height:1.7;
}

/* =========================================================
   TESTIMONIALS
   ========================================================= */

.testimonials{
    background:#080808;
}

.testimonial-grid{
    margin-top:55px;

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
}

.testimonial{
    padding:32px;

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

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.04),
            rgba(255,255,255,.012)
        );
}

.stars{
    color:var(--gold2);
    letter-spacing:3px;
    font-size:12px;
}

.testimonial blockquote{
    margin-top:25px;

    color:#c8c8c8;

    font-family:"Playfair Display";
    font-size:19px;
    line-height:1.55;
}

.testimonial-author{
    margin-top:30px;
    padding-top:18px;

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

.testimonial-author strong{
    display:block;
    font-size:12px;
}

.testimonial-author span{
    color:#666;
    font-size:10px;
}

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

.faq-grid{
    margin-top:55px;

    max-width:1000px;
}

.faq-item{
    border-top:1px solid rgba(255,255,255,.10);
}

.faq-item:last-child{
    border-bottom:1px solid rgba(255,255,255,.10);
}

.faq-question{
    width:100%;

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

    padding:23px 0;

    background:none;
    border:0;

    color:#ddd;
    text-align:left;

    cursor:pointer;

    font-family:"Manrope";
    font-size:14px;
    font-weight:600;
}

.faq-icon{
    width:30px;
    height:30px;

    display:grid;
    place-items:center;

    border:1px solid rgba(255,255,255,.10);
    border-radius:50%;

    color:var(--gold2);

    transition:.3s;
}

.faq-answer{
    max-height:0;
    overflow:hidden;

    transition:max-height .4s ease;
}

.faq-answer p{
    padding:0 50px 22px 0;

    color:#666;
    font-size:12px;
    line-height:1.8;
}

.faq-item.active .faq-icon{
    transform:rotate(45deg);
    border-color:rgba(242,201,76,.35);
}

.faq-item.active .faq-answer{
    max-height:200px;
}

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

.cta{
    padding:120px 0;

    position:relative;
    overflow:hidden;

    text-align:center;

    background:
        radial-gradient(
            circle at 50% 40%,
            rgba(242,201,76,.14),
            transparent 34%
        ),
        #070707;
}

.cta:before{
    content:"";

    position:absolute;
    width:650px;
    height:650px;

    left:50%;
    top:50%;

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

    border:1px solid rgba(242,201,76,.07);
    border-radius:50%;

    box-shadow:
        0 0 100px rgba(242,201,76,.04);
}

.cta h2{
    position:relative;

    font-family:"Manrope";
    font-size:clamp(45px,7vw,90px);
    line-height:.95;
    letter-spacing:-5px;
}

.cta h2 span{
    color:var(--gold2);
}

.cta p{
    position:relative;

    max-width:600px;
    margin:25px auto 0;

    color:#777;
    line-height:1.8;
    font-size:14px;
}

.cta .btn{
    position:relative;
    margin-top:35px;
}

/* =========================================================
   CONTACT
   ========================================================= */

.contact{
    background:#090909;
}

.contact-grid{
    display:grid;
    grid-template-columns:.8fr 1.2fr;
    gap:100px;
}

.contact-info{
    margin-top:45px;
}

.contact-row{
    padding:18px 0;

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

.contact-row:last-child{
    border-bottom:1px solid rgba(255,255,255,.08);
}

.contact-row small{
    display:block;

    color:#555;
    font-size:9px;
    text-transform:uppercase;
    letter-spacing:1.5px;
}

.contact-row a,
.contact-row span{
    display:block;

    margin-top:7px;

    color:#bbb;
    font-size:13px;
}

.contact-form{
    padding:38px;

    border:1px solid rgba(255,255,255,.09);
    border-radius:25px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.045),
            rgba(255,255,255,.012)
        );
}

.form-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:15px;
}

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

.form-group.full{
    grid-column:1/-1;
}

.form-group label{
    display:block;

    margin-bottom:8px;

    color:#666;
    font-size:9px;
    text-transform:uppercase;
    letter-spacing:1.2px;
}

.form-group input,
.form-group select,
.form-group textarea{
    width:100%;
    box-sizing:border-box;

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

    background:#080808;
    color:#fff;

    padding:14px 15px;

    outline:none;

    font-family:inherit;
    font-size:13px;

    transition:.25s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
    border-color:rgba(242,201,76,.35);
    box-shadow:0 0 0 3px rgba(242,201,76,.04);
}

.form-group select{
    min-height:47px;
    cursor:pointer;

    appearance:auto;
}

.form-group select option{
    background:#080808;
    color:#fff;
}

.form-group textarea{
    min-height:135px;
    resize:vertical;
}

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

.footer{
    padding:55px 0 25px;

    background:#040404;
    border-top:1px solid rgba(255,255,255,.07);
}

.footer-top{
    display:grid;
    grid-template-columns:1.5fr 1fr 1fr 1fr;
    gap:50px;
}

.footer-brand img{
    width:155px;
}

.footer-brand p{
    max-width:330px;

    margin-top:20px;

    color:#666;
    font-size:12px;
    line-height:1.8;
}

.footer h4{
    color:#aaa;

    font-size:10px;
    text-transform:uppercase;
    letter-spacing:1.5px;
}

.footer-links{
    margin-top:18px;

    display:grid;
    gap:11px;
}

.footer-links a{
    color:#666;
    font-size:11px;
    transition:.25s;
}

.footer-links a:hover{
    color:var(--gold2);
}

.footer-bottom{
    margin-top:50px;
    padding-top:22px;

    display:flex;
    justify-content:space-between;
    gap:20px;

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

    color:#444;
    font-size:10px;
}

/* =========================================================
   REVEAL
   ========================================================= */

.reveal{
    opacity:0;
    transform:translateY(35px);
    transition:
        opacity .8s ease,
        transform .8s ease;
}

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

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:1100px){

    .nav-links{
        gap:20px;
    }

    .hero-copy{
        width:65%;
    }

    .float-card{
        transform:scale(.85);
    }

    .services-grid,
    .work-grid,
    .testimonial-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .process-grid{
        grid-template-columns:repeat(2,1fr);
        gap:35px;
    }

    .process-card{
        border-left:0 !important;
        padding-left:0 !important;
    }

    .about-grid,
    .ai-grid{
        gap:50px;
    }
}

@media(max-width:800px){

    .container,
    .nav-inner,
    .hero-content{
        width:min(calc(100% - 32px),var(--max));
    }

    .section{
        padding:90px 0;
    }

    .nav-links,
    .nav-cta{
        display:none;
    }

    .menu-toggle{
        display:block;
    }

    .nav-mobile-open .nav-links{
        position:absolute;

        display:flex;
        flex-direction:column;
        align-items:flex-start;
        gap:0;

        top:76px;
        left:16px;
        right:16px;

        padding:15px;

        background:rgba(8,8,8,.96);
        border:1px solid rgba(255,255,255,.10);
        border-radius:18px;

        backdrop-filter:blur(20px);
    }

    .nav-mobile-open .nav-links a{
        width:100%;
        padding:13px;
    }

    .hero{
        min-height:850px;
        height:auto;
    }

    .hero-content{
        min-height:850px;
        align-items:center;
    }

    .hero-copy{
        width:100%;
        padding-top:80px;
    }

    .hero h1{
        font-size:clamp(50px,12vw,75px);
        letter-spacing:-4px;
    }

    .hero-stats{
        display:none;
    }

    .float-card{
        opacity:.55;
        transform:scale(.7);
    }

    .card-one{
        right:-2%;
    }

    .card-two{
        right:-4%;
    }

    .card-three{
        right:-5%;
    }

    .card-four,
    .card-five{
        display:none;
    }

    .trusted-inner{
        flex-wrap:wrap;
        justify-content:center;
    }

    .trusted-label{
        width:100%;
        text-align:center;
    }

    .services-head,
    .work-head{
        display:block;
    }

    .work-link{
        display:inline-block;
        margin-top:20px;
    }

    .services-grid,
    .work-grid,
    .testimonial-grid{
        grid-template-columns:1fr;
    }

    .about-grid,
    .ai-grid,
    .contact-grid{
        grid-template-columns:1fr;
    }

    .about-visual{
        min-height:480px;
    }

    .about-orbit{
        width:360px;
        height:360px;
    }

    .about-orbit-two{
        width:280px;
        height:280px;
    }

    .ai-orb-wrap{
        min-height:470px;
        order:-1;
    }

    .ai-orb{
        width:350px;
        height:350px;
    }

    .footer-top{
        grid-template-columns:1fr 1fr;
    }

    .contact-grid{
        gap:50px;
    }
}

@media(max-width:540px){

    .hero{
        min-height:820px;
    }

    .hero-content{
        min-height:820px;
    }

    .hero h1{
        font-size:48px;
        letter-spacing:-3px;
    }

    .hero-description{
        font-size:13px;
    }

    .hero-buttons{
        flex-direction:column;
        align-items:stretch;
    }

    .hero-buttons .btn{
        width:100%;
    }

    .float-card{
        display:none;
    }

    .section-title{
        letter-spacing:-2px;
    }

    .service-card{
        min-height:auto;
        padding:26px;
    }

    .service-card h3{
        margin-top:35px;
    }

    .about-visual{
        min-height:390px;
    }

    .about-orbit{
        width:290px;
        height:290px;
    }

    .about-orbit-two{
        width:225px;
        height:225px;
    }

    .about-core{
        width:155px;
        height:155px;
    }

    .about-core img{
        width:95px;
    }

    .about-badge{
        right:0;
        bottom:5%;
    }

    .ai-orb{
        width:280px;
        height:280px;
    }

    .ai-orb .orb{
        inset:38px;
    }

    .ai-orb img{
        width:100px;
    }

    .ai-label{
        font-size:7px;
        padding:8px 10px;
    }

    .ai-label.two{
        right:-5px;
    }

    .contact-form{
        padding:22px;
    }

    .form-grid{
        grid-template-columns:1fr;
    }

    .form-group.full{
        grid-column:auto;
    }

    .footer-top{
        grid-template-columns:1fr;
        gap:35px;
    }

    .footer-bottom{
        flex-direction:column;
    }
}




/* =========================================================
   SERVICES — VISUAL TREATMENT #2
   ========================================================= */

.services-section{
    position:relative;
    padding:150px 0 120px;
    overflow:hidden;
    background:
        radial-gradient(
            circle at 18% 20%,
            rgba(242,201,76,.055),
            transparent 30%
        ),
        radial-gradient(
            circle at 85% 65%,
            rgba(242,201,76,.045),
            transparent 32%
        ),
        #050505;
    isolation:isolate;
}

.services-bg-grid{
    position:absolute;
    inset:0;
    z-index:-3;
    opacity:.18;
    background-image:
        linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
    background-size:70px 70px;
    mask-image:linear-gradient(
        to bottom,
        transparent,
        black 15%,
        black 80%,
        transparent
    );
}

.services-glow{
    position:absolute;
    width:500px;
    height:500px;
    border-radius:50%;
    filter:blur(100px);
    pointer-events:none;
    z-index:-2;
}

.services-glow-1{
    left:-250px;
    top:400px;
    background:rgba(242,201,76,.08);
}

.services-glow-2{
    right:-300px;
    bottom:100px;
    background:rgba(255,217,102,.06);
}


/* HEADING */

.services-heading{
    max-width:820px;
    margin:0 auto 80px;
    text-align:center;
}

.section-eyebrow{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:15px;
    margin-bottom:24px;
    color:#FFD966;
    font-size:11px;
    font-weight:700;
    letter-spacing:3px;
}

.eyebrow-line{
    width:38px;
    height:1px;
    background:linear-gradient(
        90deg,
        transparent,
        #F2C94C
    );
}

.eyebrow-line:last-child{
    background:linear-gradient(
        90deg,
        #F2C94C,
        transparent
    );
}

.services-heading h2{
    margin:0;
    color:#fff;
    font-size:clamp(48px,7vw,96px);
    line-height:.92;
    letter-spacing:-4px;
    font-weight:800;
}

.services-heading h2 span{
    display:block;
    color:transparent;
    background:
        linear-gradient(
            100deg,
            #C89B2C,
            #FFD966 48%,
            #F2C94C
        );
    -webkit-background-clip:text;
    background-clip:text;
}

.services-heading p{
    max-width:600px;
    margin:30px auto 0;
    color:#929292;
    font-size:15px;
    line-height:1.8;
}


/* SHOWCASE */

.services-showcase{
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:22px;
    align-items:stretch;
}


/* FEATURE CARD */

.service-feature,
.service-card{
    position:relative;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.09);
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.065),
            rgba(255,255,255,.018)
        );
    box-shadow:
        0 25px 80px rgba(0,0,0,.35),
        inset 0 1px 0 rgba(255,255,255,.045);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
}

.service-feature{
    min-height:720px;
    border-radius:30px;
    display:flex;
    flex-direction:column;
    transition:
        transform .45s ease,
        border-color .45s ease,
        box-shadow .45s ease;
}

.service-feature:hover{
    transform:translateY(-8px);
    border-color:rgba(242,201,76,.32);
    box-shadow:
        0 35px 100px rgba(0,0,0,.55),
        0 0 70px rgba(242,201,76,.07);
}

.service-feature::before,
.service-card::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
        radial-gradient(
            circle at 50% 30%,
            rgba(242,201,76,.08),
            transparent 42%
        );
    opacity:.8;
}


/* TOP */

.service-feature-top,
.service-card-head{
    position:relative;
    z-index:3;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.service-feature-top{
    padding:27px 30px;
}

.service-number,
.service-index{
    color:#FFD966;
    font-family:monospace;
    font-size:12px;
    letter-spacing:2px;
}

.service-category,
.service-tag{
    color:#707070;
    font-size:9px;
    letter-spacing:2px;
}


/* AI VISUAL */

.service-visual-ai{
    position:relative;
    flex:1;
    min-height:450px;
    display:flex;
    align-items:center;
    justify-content:center;
    perspective:900px;
}

.ai-core{
    position:relative;
    z-index:5;
    width:150px;
    height:150px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:
        radial-gradient(
            circle at 35% 28%,
            #fff4b2,
            #FFD966 10%,
            #F2C94C 32%,
            #8b6818 65%,
            #17130a 100%
        );
    box-shadow:
        0 0 30px rgba(255,217,102,.55),
        0 0 100px rgba(242,201,76,.20),
        inset -20px -25px 45px rgba(0,0,0,.42),
        inset 10px 10px 20px rgba(255,255,255,.45);
    animation:aiCoreFloat 5s ease-in-out infinite;
}

.ai-core::before{
    content:"";
    position:absolute;
    inset:-20px;
    border-radius:50%;
    border:1px solid rgba(255,217,102,.25);
    box-shadow:0 0 35px rgba(242,201,76,.12);
}

.ai-core-inner{
    width:70px;
    height:70px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#090806;
    border:1px solid rgba(255,217,102,.45);
    box-shadow:
        inset 0 0 25px rgba(242,201,76,.16),
        0 0 20px rgba(0,0,0,.7);
}

.ai-core-inner span{
    color:#FFD966;
    font-weight:800;
    font-size:20px;
    letter-spacing:2px;
}


.ai-orbit{
    position:absolute;
    border:1px solid rgba(255,217,102,.20);
    border-radius:50%;
    transform-style:preserve-3d;
}

.orbit-1{
    width:260px;
    height:260px;
    transform:rotateX(68deg) rotateY(15deg);
    animation:orbitRotate 10s linear infinite;
}

.orbit-2{
    width:350px;
    height:350px;
    transform:rotateX(68deg) rotateY(-28deg);
    animation:orbitRotateReverse 14s linear infinite;
}

.orbit-3{
    width:450px;
    height:450px;
    border-color:rgba(255,217,102,.09);
    transform:rotateX(68deg) rotateY(48deg);
    animation:orbitRotate 20s linear infinite;
}


/* NODES */

.ai-node{
    position:absolute;
    z-index:6;
    width:7px;
    height:7px;
    border-radius:50%;
    background:#FFD966;
    box-shadow:
        0 0 8px #FFD966,
        0 0 25px rgba(242,201,76,.7);
}

.node-1{
    top:20%;
    right:28%;
}

.node-2{
    bottom:20%;
    left:23%;
}

.node-3{
    top:45%;
    right:10%;
}

.node-4{
    top:28%;
    left:20%;
}


/* CONNECTING LINES */

.ai-line{
    position:absolute;
    height:1px;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,217,102,.65),
            transparent
        );
    transform-origin:left center;
    opacity:.55;
}

.line-1{
    width:130px;
    top:29%;
    left:25%;
    transform:rotate(25deg);
}

.line-2{
    width:120px;
    top:48%;
    right:12%;
    transform:rotate(155deg);
}

.line-3{
    width:150px;
    bottom:27%;
    left:25%;
    transform:rotate(-18deg);
}


/* MINI CARDS */

.ai-mini-card{
    position:absolute;
    z-index:10;
    min-width:100px;
    padding:12px 15px;
    border:1px solid rgba(255,217,102,.18);
    border-radius:12px;
    background:rgba(8,8,8,.72);
    backdrop-filter:blur(14px);
    box-shadow:0 15px 35px rgba(0,0,0,.35);
}

.ai-mini-card strong{
    display:block;
    color:#FFD966;
    font-size:17px;
}

.ai-mini-card small{
    display:block;
    margin-top:3px;
    color:#777;
    font-size:8px;
    letter-spacing:1px;
}

.mini-card-1{
    top:16%;
    left:8%;
}

.mini-card-2{
    right:5%;
    bottom:17%;
}


/* FEATURE CONTENT */

.service-feature-content{
    position:relative;
    z-index:5;
    display:flex;
    justify-content:space-between;
    gap:30px;
    align-items:flex-end;
    padding:28px 30px 30px;
    border-top:1px solid rgba(255,255,255,.07);
}

.service-feature-content h3{
    margin:0 0 10px;
    color:#fff;
    font-size:27px;
    letter-spacing:-1px;
}

.service-feature-content p{
    max-width:440px;
    margin:0;
    color:#888;
    font-size:13px;
    line-height:1.7;
}

.service-arrow{
    flex:0 0 auto;
    width:48px;
    height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(255,217,102,.25);
    border-radius:50%;
    color:#FFD966;
    font-size:19px;
    transition:.35s ease;
}

.service-feature:hover .service-arrow{
    background:#FFD966;
    color:#080706;
    transform:rotate(45deg);
}


/* GRID */

.services-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:22px;
}

.service-card{
    min-height:345px;
    border-radius:25px;
    display:flex;
    flex-direction:column;
    transition:
        transform .4s ease,
        border-color .4s ease,
        box-shadow .4s ease;
}

.service-card:hover{
    transform:translateY(-7px);
    border-color:rgba(242,201,76,.28);
    box-shadow:
        0 25px 70px rgba(0,0,0,.45),
        0 0 50px rgba(242,201,76,.055);
}

.service-card-head{
    padding:23px 24px 0;
}


/* CARD VISUAL */

.service-card-visual{
    position:relative;
    height:155px;
    margin:8px 20px 0;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}


/* MARKETING */

.marketing-visual{
    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(242,201,76,.10),
            transparent 65%
        );
}

.growth-chart{
    position:absolute;
    width:190px;
    height:90px;
    border-left:1px solid rgba(255,255,255,.10);
    border-bottom:1px solid rgba(255,255,255,.10);
}

.chart-line{
    position:absolute;
    left:10px;
    top:43px;
    width:175px;
    height:45px;
    border-top:2px solid #FFD966;
    transform:skewY(-18deg);
    filter:drop-shadow(0 0 7px rgba(255,217,102,.45));
}

.chart-dot{
    position:absolute;
    width:7px;
    height:7px;
    border-radius:50%;
    background:#FFD966;
    box-shadow:0 0 12px #FFD966;
}

.dot-a{left:35px;top:65px}
.dot-b{left:82px;top:48px}
.dot-c{left:125px;top:34px}
.dot-d{right:3px;top:12px}

.growth-number{
    position:absolute;
    right:5px;
    top:4px;
    color:#FFD966;
    font-size:11px;
    font-weight:700;
}

.chart-bars{
    position:absolute;
    bottom:0;
    left:15px;
    display:flex;
    gap:6px;
    align-items:flex-end;
    opacity:.25;
}

.chart-bars i{
    display:block;
    width:9px;
    height:25px;
    border-radius:3px 3px 0 0;
    background:#FFD966;
}

.chart-bars i:nth-child(2){height:40px}
.chart-bars i:nth-child(3){height:32px}
.chart-bars i:nth-child(4){height:55px}
.chart-bars i:nth-child(5){height:70px}


/* WEBSITE */

.website-visual{
    perspective:800px;
}

.browser-window{
    width:210px;
    height:120px;
    border-radius:10px;
    overflow:hidden;
    border:1px solid rgba(255,217,102,.25);
    background:#080808;
    transform:rotateX(8deg) rotateY(-12deg) rotateZ(-2deg);
    box-shadow:
        18px 20px 45px rgba(0,0,0,.5),
        0 0 35px rgba(242,201,76,.07);
    transition:.5s ease;
}

.service-card:hover .browser-window{
    transform:rotateX(2deg) rotateY(-3deg) rotateZ(0deg) translateY(-5px);
}

.browser-top{
    height:20px;
    display:flex;
    align-items:center;
    gap:4px;
    padding:0 8px;
    background:#111;
    border-bottom:1px solid rgba(255,255,255,.06);
}

.browser-top i{
    width:5px;
    height:5px;
    border-radius:50%;
    background:#444;
}

.browser-top i:first-child{
    background:#FFD966;
}

.browser-content{
    padding:13px;
}

.browser-title{
    display:flex;
    flex-direction:column;
    gap:4px;
    margin-bottom:10px;
}

.browser-title span{
    width:65px;
    height:4px;
    background:#777;
    border-radius:4px;
}

.browser-title span:nth-child(2){
    width:110px;
    background:#FFD966;
}

.browser-title span:nth-child(3){
    width:80px;
}

.browser-block{
    height:35px;
    border:1px solid rgba(255,217,102,.18);
    background:
        radial-gradient(
            circle,
            rgba(242,201,76,.15),
            transparent
        );
}

.browser-row{
    display:flex;
    gap:8px;
    margin-top:8px;
}

.browser-row span{
    height:12px;
    flex:1;
    background:#171717;
}


/* DESIGN */

.design-visual{
    perspective:700px;
}

.design-canvas{
    position:relative;
    width:175px;
    height:120px;
    border:1px solid rgba(255,217,102,.2);
    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.06),
            rgba(255,255,255,.015)
        );
    transform:rotate(-7deg) rotateX(8deg);
    box-shadow:18px 20px 45px rgba(0,0,0,.4);
}

.design-circle{
    position:absolute;
    width:55px;
    height:55px;
    border-radius:50%;
    right:25px;
    top:20px;
    background:
        radial-gradient(
            circle at 35% 30%,
            #FFD966,
            #C89B2C
        );
    box-shadow:0 0 25px rgba(242,201,76,.25);
}

.design-square{
    position:absolute;
    width:42px;
    height:42px;
    left:22px;
    bottom:22px;
    border:1px solid #FFD966;
    transform:rotate(45deg);
}

.design-line{
    position:absolute;
    left:22px;
    top:22px;
    width:70px;
    height:1px;
    background:#FFD966;
}

.design-text{
    position:absolute;
    left:22px;
    bottom:18px;
    color:#fff;
    font-size:8px;
    letter-spacing:3px;
}

.floating-tool{
    position:absolute;
    width:30px;
    height:30px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(255,217,102,.2);
    border-radius:8px;
    background:#0b0b0b;
    color:#FFD966;
    box-shadow:0 10px 25px rgba(0,0,0,.4);
}

.tool-1{
    top:12px;
    right:30px;
}

.tool-2{
    bottom:10px;
    left:30px;
}


/* BRAND */

.brand-visual{
    flex-direction:column;
    gap:10px;
}

.brand-symbol{
    position:relative;
    width:90px;
    height:90px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.brand-symbol span{
    position:relative;
    z-index:4;
    color:#FFD966;
    font-size:30px;
    font-weight:800;
}

.brand-ring{
    position:absolute;
    inset:4px;
    border:1px solid rgba(255,217,102,.6);
    border-radius:50%;
    animation:brandRotate 8s linear infinite;
}

.brand-ring.inner{
    inset:17px;
    border-color:rgba(255,255,255,.18);
    animation-direction:reverse;
    animation-duration:5s;
}

.brand-word{
    color:#fff;
    font-size:10px;
    letter-spacing:6px;
    padding-left:6px;
}


/* GROWTH */

.growth-visual{
    height:155px;
}

.dashboard-panel{
    width:90%;
    height:125px;
    border:1px solid rgba(255,217,102,.16);
    border-radius:12px;
    background:rgba(4,4,4,.7);
    box-shadow:0 15px 40px rgba(0,0,0,.35);
    overflow:hidden;
}

.dashboard-header{
    height:28px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0 12px;
    border-bottom:1px solid rgba(255,255,255,.06);
    color:#666;
    font-size:7px;
    letter-spacing:1px;
}

.dashboard-header b{
    color:#FFD966;
    font-size:7px;
}

.dashboard-main{
    display:flex;
    align-items:center;
    justify-content:space-between;
    height:95px;
    padding:10px 15px;
}

.dashboard-value small{
    display:block;
    color:#666;
    font-size:7px;
}

.dashboard-value strong{
    display:block;
    margin-top:5px;
    color:#FFD966;
    font-size:27px;
}

.dashboard-bars{
    height:75px;
    display:flex;
    align-items:flex-end;
    gap:5px;
}

.dashboard-bars i{
    width:8px;
    min-height:12px;
    border-radius:3px 3px 0 0;
    background:
        linear-gradient(
            to top,
            #8c691d,
            #FFD966
        );
    opacity:.85;
}


/* CARD CONTENT */

.service-card-content{
    position:relative;
    z-index:4;
    margin-top:auto;
    padding:15px 24px 25px;
}

.service-card-content h3{
    margin:0 0 9px;
    color:#fff;
    font-size:19px;
    letter-spacing:-.5px;
}

.service-card-content p{
    margin:0;
    color:#7e7e7e;
    font-size:12px;
    line-height:1.65;
}

.service-card-content a{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-top:17px;
    color:#FFD966;
    font-size:10px;
    font-weight:700;
    letter-spacing:1px;
    text-decoration:none;
}

.service-card-content a span{
    transition:.3s ease;
}

.service-card:hover .service-card-content a span{
    transform:translate(3px,-3px);
}


/* BOTTOM CTA */

.services-bottom{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    margin-top:55px;
    padding:26px 30px;
    border-top:1px solid rgba(255,255,255,.08);
    border-bottom:1px solid rgba(255,255,255,.08);
}

.services-bottom span{
    color:#666;
    font-size:10px;
    letter-spacing:2px;
}

.services-bottom strong{
    color:#fff;
    font-size:13px;
    letter-spacing:1px;
}

.services-cta{
    margin-left:25px;
    padding:12px 19px;
    border:1px solid rgba(255,217,102,.35);
    border-radius:100px;
    color:#FFD966;
    font-size:10px;
    letter-spacing:1px;
    text-decoration:none;
    transition:.35s ease;
}

.services-cta span{
    margin-left:7px;
    color:inherit;
}

.services-cta:hover{
    background:#FFD966;
    color:#080706;
    border-color:#FFD966;
}


/* ANIMATIONS */

@keyframes aiCoreFloat{
    0%,100%{
        transform:translateY(0) scale(1);
    }
    50%{
        transform:translateY(-12px) scale(1.025);
    }
}

@keyframes orbitRotate{
    from{
        transform:rotateX(68deg) rotateY(15deg) rotateZ(0deg);
    }
    to{
        transform:rotateX(68deg) rotateY(15deg) rotateZ(360deg);
    }
}

@keyframes orbitRotateReverse{
    from{
        transform:rotateX(68deg) rotateY(-28deg) rotateZ(360deg);
    }
    to{
        transform:rotateX(68deg) rotateY(-28deg) rotateZ(0deg);
    }
}

@keyframes brandRotate{
    from{
        transform:rotate(0deg);
    }
    to{
        transform:rotate(360deg);
    }
}


/* RESPONSIVE */

@media(max-width:1100px){

    .services-showcase{
        grid-template-columns:1fr;
    }

    .service-feature{
        min-height:650px;
    }

}


@media(max-width:760px){

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

    .services-heading{
        margin-bottom:55px;
    }

    .services-heading h2{
        font-size:50px;
        letter-spacing:-2px;
    }

    .services-heading p{
        font-size:14px;
        padding:0 15px;
    }

    .services-grid{
        grid-template-columns:1fr;
        gap:16px;
    }

    .service-feature{
        min-height:610px;
        border-radius:22px;
    }

    .service-feature-top{
        padding:22px;
    }

    .service-visual-ai{
        min-height:370px;
    }

    .ai-core{
        width:120px;
        height:120px;
    }

    .ai-core-inner{
        width:58px;
        height:58px;
    }

    .orbit-1{
        width:210px;
        height:210px;
    }

    .orbit-2{
        width:285px;
        height:285px;
    }

    .orbit-3{
        width:350px;
        height:350px;
    }

    .mini-card-1{
        left:4%;
    }

    .mini-card-2{
        right:2%;
    }

    .service-feature-content{
        padding:22px;
    }

    .service-feature-content h3{
        font-size:23px;
    }

    .service-card{
        min-height:330px;
    }

    .services-bottom{
        flex-wrap:wrap;
        text-align:center;
        gap:8px;
    }

    .services-cta{
        width:100%;
        margin:12px 0 0;
        text-align:center;
    }

}


@media(max-width:420px){

    .services-heading h2{
        font-size:43px;
    }

    .service-feature{
        min-height:590px;
    }

    .service-visual-ai{
        min-height:350px;
    }

    .ai-mini-card{
        min-width:85px;
        padding:9px 11px;
    }

    .ai-mini-card strong{
        font-size:14px;
    }

    .ai-mini-card small{
        font-size:7px;
    }

    .service-feature-content{
        gap:15px;
    }

    .service-feature-content p{
        font-size:11px;
    }

}


/* =========================================================
   AI ADVANTAGE — CINEMATIC ROCKET SYSTEM
   ========================================================= */

.ai-section{
    position:relative;
    overflow:hidden;
    min-height:900px;
    background:
        radial-gradient(
            circle at 72% 48%,
            rgba(242,201,76,.095),
            transparent 25%
        ),
        radial-gradient(
            circle at 82% 55%,
            rgba(255,217,102,.035),
            transparent 38%
        ),
        linear-gradient(
            135deg,
            #030303 0%,
            #080808 48%,
            #030303 100%
        );
    isolation:isolate;
}


/* Background Grid */

.ai-bg-grid{
    position:absolute;
    inset:0;
    opacity:.18;
    pointer-events:none;

    background-image:
        linear-gradient(
            rgba(242,201,76,.045) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(242,201,76,.045) 1px,
            transparent 1px
        );

    background-size:70px 70px;

    mask-image:
        radial-gradient(
            ellipse at center,
            black 0%,
            transparent 72%
        );

    -webkit-mask-image:
        radial-gradient(
            ellipse at center,
            black 0%,
            transparent 72%
        );
}


/* Ambient glows */

.ai-bg-glow{
    position:absolute;
    border-radius:50%;
    pointer-events:none;
    filter:blur(80px);
}

.ai-glow-1{
    width:420px;
    height:420px;
    right:5%;
    top:25%;
    background:rgba(242,201,76,.07);
}

.ai-glow-2{
    width:300px;
    height:300px;
    left:15%;
    bottom:0;
    background:rgba(242,201,76,.035);
}


/* Main Grid */

.ai-grid{
    position:relative;
    z-index:2;

    display:grid;
    grid-template-columns:
        minmax(0, .9fr)
        minmax(560px, 1.1fr);

    align-items:center;
    gap:60px;

    min-height:900px;
}


/* =========================================================
   LEFT CONTENT
   ========================================================= */

.ai-copy{
    position:relative;
    z-index:5;
    max-width:620px;
}

.ai-copy .section-label{
    display:inline-flex;
    align-items:center;
    gap:10px;

    color:#FFD966;
    font-size:11px;
    font-weight:700;
    letter-spacing:3px;
    text-transform:uppercase;

    margin-bottom:22px;
}

.ai-copy .section-label::before{
    content:"";
    width:28px;
    height:1px;
    background:#F2C94C;
    box-shadow:0 0 12px rgba(242,201,76,.5);
}


.ai-copy .section-title{
    margin:0;

    font-size:
        clamp(48px,5vw,76px);

    line-height:.98;
    letter-spacing:-3px;
    font-weight:700;

    color:#fff;
}

.ai-copy .section-title span{
    background:
        linear-gradient(
            100deg,
            #C89B2C 0%,
            #FFD966 42%,
            #F2C94C 100%
        );

    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;

    filter:
        drop-shadow(
            0 0 24px rgba(242,201,76,.08)
        );
}


.ai-copy .section-copy{
    max-width:570px;

    margin:
        28px 0 38px;

    color:#999;

    font-size:15px;
    line-height:1.85;
}


/* =========================================================
   AI POINTS
   ========================================================= */

.ai-points{
    display:grid;
    gap:12px;
}

.ai-point{
    display:flex;
    align-items:flex-start;
    gap:16px;

    padding:17px 18px;

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

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.045),
            rgba(255,255,255,.012)
        );

    border-radius:15px;

    transition:
        transform .35s ease,
        border-color .35s ease,
        background .35s ease,
        box-shadow .35s ease;
}

.ai-point:hover{
    transform:translateX(7px);

    border-color:
        rgba(242,201,76,.30);

    background:
        linear-gradient(
            135deg,
            rgba(242,201,76,.07),
            rgba(255,255,255,.015)
        );

    box-shadow:
        0 15px 40px rgba(0,0,0,.25),
        0 0 25px rgba(242,201,76,.04);
}


.ai-point-icon{
    width:38px;
    height:38px;
    flex:none;

    display:grid;
    place-items:center;

    border-radius:11px;

    color:#FFD966;
    font-size:18px;

    border:1px solid rgba(242,201,76,.25);

    background:
        radial-gradient(
            circle,
            rgba(242,201,76,.12),
            rgba(242,201,76,.02)
        );

    box-shadow:
        0 0 20px rgba(242,201,76,.05);
}


.ai-point h4{
    margin:1px 0 5px;

    color:#f4f4f4;

    font-size:14px;
    font-weight:600;
}


.ai-point p{
    margin:0;

    color:#777;

    font-size:12px;
    line-height:1.55;
}


/* =========================================================
   RIGHT AI STAGE
   ========================================================= */

.ai-orb-wrap{
    min-height:700px;

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

    position:relative;
}


.ai-stage{
    position:relative;

    width:min(680px,100%);
    aspect-ratio:1/1;

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

    perspective:1200px;

    transform-style:preserve-3d;
}


/* Ambient core glow */

.ai-ambient{
    position:absolute;

    width:330px;
    height:330px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(242,201,76,.22) 0%,
            rgba(242,201,76,.08) 28%,
            rgba(242,201,76,.025) 52%,
            transparent 72%
        );

    filter:blur(12px);

    animation:
        aiAmbientPulse 4s ease-in-out infinite;
}


/* =========================================================
   MOVING PARTICLE FIELDS
   ========================================================= */

.ai-particles{
    position:absolute;

    width:100%;
    height:100%;

    border-radius:50%;

    pointer-events:none;
}


.ai-particles::before,
.ai-particles::after{
    content:"";

    position:absolute;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(255,217,102,.95) 0 1px,
            transparent 2px
        );

    background-size:
        47px 47px;

    opacity:.65;

    animation:
        particleDrift 18s linear infinite;
}


.particles-a::before{
    inset:5%;
    transform:rotate(15deg);
}

.particles-a::after{
    inset:12%;
    transform:rotate(-25deg);
    animation-duration:25s;
    animation-direction:reverse;
}


.particles-b::before{
    inset:18%;
    background-size:63px 63px;
    opacity:.4;
    animation-duration:22s;
}


.particles-b::after{
    inset:25%;
    background-size:31px 31px;
    opacity:.5;
    animation-duration:14s;
    animation-direction:reverse;
}


.particles-c::before{
    inset:2%;
    background-size:91px 91px;
    opacity:.28;
    animation-duration:35s;
}


.particles-c::after{
    inset:30%;
    background-size:27px 27px;
    opacity:.3;
    animation-duration:11s;
}


/* =========================================================
   ORBIT RINGS
   ========================================================= */

.ai-ring{
    position:absolute;

    left:50%;
    top:50%;

    border-radius:50%;

    border:
        1px solid rgba(242,201,76,.18);

    transform-style:preserve-3d;

    pointer-events:none;
}


.ring-1{
    width:470px;
    height:470px;

    margin:
        -235px 0 0 -235px;

    transform:
        rotateX(68deg)
        rotateZ(0deg);

    animation:
        orbitRotate1 18s linear infinite;
}


.ring-2{
    width:390px;
    height:390px;

    margin:
        -195px 0 0 -195px;

    border-color:
        rgba(255,217,102,.13);

    transform:
        rotateY(67deg)
        rotateZ(20deg);

    animation:
        orbitRotate2 14s linear infinite reverse;
}


.ring-3{
    width:540px;
    height:270px;

    margin:
        -135px 0 0 -270px;

    border-color:
        rgba(242,201,76,.10);

    transform:
        rotateX(72deg)
        rotateY(20deg);

    animation:
        orbitRotate3 25s linear infinite;
}


/* =========================================================
   ORBIT NODES
   ========================================================= */

.ai-node{
    position:absolute;

    width:7px;
    height:7px;

    border-radius:50%;

    background:#FFD966;

    box-shadow:
        0 0 7px #FFD966,
        0 0 20px rgba(242,201,76,.65);

    z-index:8;
}


.node-a{
    top:25%;
    left:25%;
    animation:nodeFloat1 5s ease-in-out infinite;
}

.node-b{
    top:19%;
    right:31%;
    animation:nodeFloat2 4s ease-in-out infinite;
}

.node-c{
    right:16%;
    top:50%;
    animation:nodeFloat3 6s ease-in-out infinite;
}

.node-d{
    right:30%;
    bottom:19%;
    animation:nodeFloat1 4.5s ease-in-out infinite reverse;
}

.node-e{
    left:23%;
    bottom:26%;
    animation:nodeFloat2 5.5s ease-in-out infinite;
}

.node-f{
    left:14%;
    top:48%;
    animation:nodeFloat3 4.2s ease-in-out infinite reverse;
}


/* =========================================================
   AI CORE
   ========================================================= */

.ai-core{
    position:relative;

    width:290px;
    height:290px;

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

    z-index:10;

    animation:
        coreFloat 5s ease-in-out infinite;
}


.core-glow{
    position:absolute;
    inset:-45px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(242,201,76,.22),
            rgba(242,201,76,.05) 40%,
            transparent 70%
        );

    filter:blur(20px);

    animation:
        coreGlowPulse 3.5s ease-in-out infinite;
}


.core-shell{
    position:relative;

    width:240px;
    height:240px;

    border-radius:50%;

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

    background:
        radial-gradient(
            circle at 38% 30%,
            rgba(255,255,255,.08),
            transparent 22%
        ),
        radial-gradient(
            circle,
            #17130a 0%,
            #0c0b08 52%,
            #050505 100%
        );

    border:
        1px solid rgba(242,201,76,.34);

    box-shadow:
        inset 0 0 50px rgba(242,201,76,.06),
        inset 0 0 0 1px rgba(255,255,255,.04),
        0 0 40px rgba(242,201,76,.10),
        0 25px 80px rgba(0,0,0,.6);

    overflow:visible;
}


/* glass highlight */

.core-shell::before{
    content:"";

    position:absolute;
    inset:10px;

    border-radius:50%;

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

    pointer-events:none;
}


.core-shell::after{
    content:"";

    position:absolute;

    width:65%;
    height:18%;

    left:18%;
    top:9%;

    border-radius:50%;

    background:
        radial-gradient(
            ellipse,
            rgba(255,255,255,.09),
            transparent 70%
        );

    transform:rotate(-20deg);

    filter:blur(3px);

    pointer-events:none;
}


/* =========================================================
   ROCKET
   ========================================================= */

.rocket-wrap{
    position:absolute;

    width:125px;
    height:165px;

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

    z-index:20;

    animation:
        rocketFloat 3.8s ease-in-out infinite;
}


.rocket{
    position:relative;

    width:52px;
    height:96px;

    border-radius:
        50% 50% 42% 42%;

    background:
        linear-gradient(
            90deg,
            #777 0%,
            #f2f2f2 28%,
            #fff 52%,
            #999 100%
        );

    box-shadow:
        inset -8px 0 12px rgba(0,0,0,.2),
        inset 5px 0 10px rgba(255,255,255,.35),
        0 0 25px rgba(255,217,102,.12);

    transform:
        rotate(-3deg);
}


/* nose */

.rocket::before{
    content:"";

    position:absolute;

    left:0;
    top:-18px;

    width:52px;
    height:42px;

    border-radius:
        50% 50% 25% 25%;

    background:
        linear-gradient(
            135deg,
            #fff,
            #a8a8a8
        );
}


/* body center */

.rocket-body{
    position:absolute;

    width:100%;
    height:48%;

    left:0;
    top:25%;

    background:
        linear-gradient(
            90deg,
            #666,
            #f6f6f6 35%,
            #fff 55%,
            #999
        );

    border-radius:50%;
}


/* window */

.rocket-window{
    position:absolute;

    width:20px;
    height:20px;

    left:16px;
    top:17px;

    border-radius:50%;

    background:
        radial-gradient(
            circle at 35% 30%,
            #fff,
            #FFD966 18%,
            #8a6c1d 65%,
            #17120a 100%
        );

    border:
        2px solid #444;

    box-shadow:
        0 0 15px rgba(242,201,76,.4);

    z-index:4;
}


/* fins */

.rocket-fin{
    position:absolute;

    bottom:10px;

    width:25px;
    height:38px;

    background:
        linear-gradient(
            135deg,
            #666,
            #cfcfcf
        );

    z-index:-1;
}

.fin-left{
    left:-18px;

    clip-path:
        polygon(100% 0,100% 100%,0 75%);
}

.fin-right{
    right:-18px;

    clip-path:
        polygon(0 0,100% 75%,0 100%);
}


/* rocket glow */

.rocket-glow{
    position:absolute;

    width:110px;
    height:145px;

    border-radius:50%;

    background:
        radial-gradient(
            ellipse,
            rgba(242,201,76,.18),
            transparent 65%
        );

    filter:blur(15px);

    animation:
        rocketGlow 2s ease-in-out infinite;
}


/* =========================================================
   ROCKET FIRE
   ========================================================= */

.rocket-fire{
    position:absolute;

    left:12px;
    bottom:-48px;

    width:28px;
    height:62px;

    display:flex;
    justify-content:center;

    filter:
        drop-shadow(
            0 0 12px rgba(242,201,76,.75)
        );
}


.rocket-fire span{
    position:absolute;

    bottom:0;

    width:8px;
    height:42px;

    border-radius:
        50% 50% 60% 60%;

    background:
        linear-gradient(
            to bottom,
            #fff 0%,
            #FFD966 28%,
            #F2C94C 55%,
            transparent 100%
        );

    transform-origin:top center;

    animation:
        fireParticle .25s ease-in-out infinite alternate;
}


.rocket-fire span:nth-child(1){
    left:2px;
    height:45px;
}

.rocket-fire span:nth-child(2){
    left:8px;
    height:58px;
    animation-delay:.08s;
}

.rocket-fire span:nth-child(3){
    left:14px;
    height:40px;
    animation-delay:.13s;
}

.rocket-fire span:nth-child(4){
    left:20px;
    height:50px;
    animation-delay:.04s;
}


/* =========================================================
   LOGO
   ========================================================= */

.ai-karya-logo{
    position:absolute;

    width:86px;
    max-width:35%;

    bottom:28px;
    left:50%;

    transform:
        translateX(-50%);

    opacity:.92;

    filter:
        drop-shadow(
            0 0 12px rgba(242,201,76,.24)
        );

    z-index:15;
}


/* =========================================================
   FLOATING LABELS
   ========================================================= */

.ai-label{
    position:absolute;

    padding:
        10px 15px;

    border:
        1px solid rgba(242,201,76,.20);

    border-radius:9px;

    background:
        rgba(10,10,10,.68);

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);

    color:#d7d7d7;

    font-size:9px;
    font-weight:600;
    letter-spacing:1.7px;

    white-space:nowrap;

    box-shadow:
        0 15px 35px rgba(0,0,0,.28);

    z-index:20;

    animation:
        labelFloat 5s ease-in-out infinite;
}


.label-dot{
    display:inline-block;

    width:5px;
    height:5px;

    margin-right:8px;

    border-radius:50%;

    background:#FFD966;

    box-shadow:
        0 0 8px #FFD966;
}


.ai-label.one{
    top:21%;
    left:2%;
}

.ai-label.two{
    top:37%;
    right:0;

    animation-delay:-1.4s;
}

.ai-label.three{
    bottom:23%;
    right:4%;

    animation-delay:-2.7s;
}

.ai-label.four{
    bottom:17%;
    left:5%;

    animation-delay:-3.6s;
}


/* =========================================================
   SYSTEM STATUS
   ========================================================= */

.ai-status{
    position:absolute;

    bottom:4%;

    left:50%;

    transform:
        translateX(-50%);

    display:flex;
    align-items:center;
    gap:10px;

    padding:
        9px 14px;

    border:
        1px solid rgba(242,201,76,.14);

    border-radius:50px;

    background:
        rgba(5,5,5,.62);

    backdrop-filter:blur(12px);

    color:#777;

    font-size:8px;
    letter-spacing:1.5px;

    white-space:nowrap;
}


.ai-status i{
    width:1px;
    height:10px;

    background:
        rgba(255,255,255,.15);
}


.status-pulse{
    width:6px;
    height:6px;

    border-radius:50%;

    background:#FFD966;

    box-shadow:
        0 0 0 0 rgba(255,217,102,.5);

    animation:
        statusPulse 1.8s infinite;
}


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

@keyframes aiAmbientPulse{

    0%,100%{
        transform:scale(.92);
        opacity:.65;
    }

    50%{
        transform:scale(1.08);
        opacity:1;
    }
}


@keyframes particleDrift{

    0%{
        transform:
            rotate(0deg)
            translate3d(0,0,0)
            scale(1);
    }

    25%{
        transform:
            rotate(90deg)
            translate3d(10px,-14px,0)
            scale(1.03);
    }

    50%{
        transform:
            rotate(180deg)
            translate3d(-8px,12px,0)
            scale(.98);
    }

    75%{
        transform:
            rotate(270deg)
            translate3d(14px,5px,0)
            scale(1.04);
    }

    100%{
        transform:
            rotate(360deg)
            translate3d(0,0,0)
            scale(1);
    }
}


@keyframes orbitRotate1{

    from{
        transform:
            rotateX(68deg)
            rotateZ(0deg);
    }

    to{
        transform:
            rotateX(68deg)
            rotateZ(360deg);
    }
}


@keyframes orbitRotate2{

    from{
        transform:
            rotateY(67deg)
            rotateZ(20deg);
    }

    to{
        transform:
            rotateY(67deg)
            rotateZ(-340deg);
    }
}


@keyframes orbitRotate3{

    from{
        transform:
            rotateX(72deg)
            rotateY(20deg)
            rotateZ(0deg);
    }

    to{
        transform:
            rotateX(72deg)
            rotateY(20deg)
            rotateZ(360deg);
    }
}


@keyframes coreFloat{

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

    50%{
        transform:
            translateY(-9px)
            rotateX(2deg);
    }
}


@keyframes coreGlowPulse{

    0%,100%{
        transform:scale(.88);
        opacity:.55;
    }

    50%{
        transform:scale(1.12);
        opacity:1;
    }
}


@keyframes rocketFloat{

    0%,100%{
        transform:
            translateY(5px)
            rotate(-3deg);
    }

    50%{
        transform:
            translateY(-14px)
            rotate(3deg);
    }
}


@keyframes rocketGlow{

    0%,100%{
        transform:scale(.8);
        opacity:.5;
    }

    50%{
        transform:scale(1.15);
        opacity:1;
    }
}


@keyframes fireParticle{

    from{
        transform:
            scaleY(.65)
            scaleX(.85);
        opacity:.65;
    }

    to{
        transform:
            scaleY(1.25)
            scaleX(1.15);
        opacity:1;
    }
}


@keyframes labelFloat{

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

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


@keyframes nodeFloat1{

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

    50%{
        transform:translate(8px,-12px) scale(1.35);
    }
}


@keyframes nodeFloat2{

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

    50%{
        transform:translate(-10px,9px) scale(1.25);
    }
}


@keyframes nodeFloat3{

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

    50%{
        transform:translate(10px,5px) scale(1.3);
    }
}


@keyframes statusPulse{

    0%{
        box-shadow:
            0 0 0 0 rgba(255,217,102,.45);
    }

    70%{
        box-shadow:
            0 0 0 8px rgba(255,217,102,0);
    }

    100%{
        box-shadow:
            0 0 0 0 rgba(255,217,102,0);
    }
}


/* =========================================================
   MOUSE PARALLAX
   ========================================================= */

.ai-stage{
    transition:
        transform .25s ease-out;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:1100px){

    .ai-grid{
        grid-template-columns:1fr;
        gap:20px;
    }

    .ai-copy{
        max-width:760px;
        margin:auto;
        text-align:center;
    }

    .ai-copy .section-label{
        justify-content:center;
    }

    .ai-copy .section-copy{
        margin-left:auto;
        margin-right:auto;
    }

    .ai-points{
        text-align:left;
        max-width:700px;
        margin:auto;
    }

    .ai-orb-wrap{
        min-height:650px;
    }
}


@media(max-width:760px){

    .ai-section{
        min-height:auto;
        padding:
            90px 0;
    }

    .ai-grid{
        min-height:auto;
    }

    .ai-copy .section-title{
        font-size:48px;
        letter-spacing:-2px;
    }

    .ai-orb-wrap{
        min-height:520px;
    }

    .ai-stage{
        width:560px;
        max-width:100%;
    }

    .ai-ring.ring-1{
        width:390px;
        height:390px;
        margin:-195px 0 0 -195px;
    }

    .ai-ring.ring-2{
        width:330px;
        height:330px;
        margin:-165px 0 0 -165px;
    }

    .ai-ring.ring-3{
        width:430px;
        height:220px;
        margin:-110px 0 0 -215px;
    }

    .ai-core{
        width:230px;
        height:230px;
    }

    .core-shell{
        width:190px;
        height:190px;
    }

    .rocket{
        transform:scale(.9) rotate(-3deg);
    }

    .ai-label{
        font-size:7px;
        padding:8px 10px;
    }

    .ai-label.one{
        left:0;
    }

    .ai-label.two{
        right:0;
    }

    .ai-label.three{
        right:0;
    }

    .ai-label.four{
        left:0;
    }
}


@media(max-width:480px){

    .ai-copy .section-title{
        font-size:40px;
    }

    .ai-copy .section-copy{
        font-size:13px;
    }

    .ai-point{
        padding:14px;
    }

    .ai-point-icon{
        width:34px;
        height:34px;
    }

    .ai-point h4{
        font-size:13px;
    }

    .ai-point p{
        font-size:11px;
    }

    .ai-orb-wrap{
        min-height:440px;
    }

    .ai-stage{
        transform:scale(.78);
    }

    .ai-status{
        bottom:1%;
    }
}


/* =========================================================
   WORK — CINEMATIC PORTFOLIO
   ========================================================= */

.work{
    position:relative;
    overflow:hidden;

    background:
        radial-gradient(
            circle at 20% 50%,
            rgba(242,201,76,.035),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #040404,
            #090909 50%,
            #030303
        );

    isolation:isolate;
}


.work-bg-grid{
    position:absolute;
    inset:0;

    opacity:.12;

    background-image:
        linear-gradient(
            rgba(242,201,76,.05) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(242,201,76,.05) 1px,
            transparent 1px
        );

    background-size:80px 80px;

    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            black 20%,
            black 80%,
            transparent
        );

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            transparent,
            black 20%,
            black 80%,
            transparent
        );
}


.work-glow{
    position:absolute;

    width:420px;
    height:420px;

    border-radius:50%;

    filter:blur(100px);

    pointer-events:none;
}

.work-glow-1{
    left:-180px;
    top:25%;

    background:
        rgba(242,201,76,.055);
}

.work-glow-2{
    right:-200px;
    bottom:5%;

    background:
        rgba(255,217,102,.035);
}


/* =========================================================
   HEADER
   ========================================================= */

.work-head{
    position:relative;
    z-index:3;

    display:flex;
    align-items:flex-end;
    justify-content:space-between;

    gap:40px;

    margin-bottom:55px;
}


.work-intro{
    max-width:570px;

    margin:
        22px 0 0;

    color:#777;

    font-size:14px;
    line-height:1.8;
}


.work-link{
    display:inline-flex;
    align-items:center;
    gap:12px;

    padding:
        13px 18px;

    border:
        1px solid rgba(242,201,76,.25);

    border-radius:50px;

    color:#FFD966;

    font-size:11px;
    font-weight:600;
    letter-spacing:1px;

    text-decoration:none;

    background:
        rgba(242,201,76,.035);

    transition:
        .3s ease;
}


.work-link span{
    font-size:17px;

    transition:
        transform .3s ease;
}


.work-link:hover{
    border-color:
        rgba(242,201,76,.55);

    background:
        rgba(242,201,76,.08);

    box-shadow:
        0 0 25px rgba(242,201,76,.08);
}


.work-link:hover span{
    transform:
        translate(4px,-4px);
}


/* =========================================================
   GRID
   ========================================================= */

.work-grid{
    position:relative;
    z-index:3;

    display:grid;

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

    gap:20px;
}


.work-card{
    position:relative;

    min-width:0;

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

    border-radius:22px;

    overflow:hidden;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.045),
            rgba(255,255,255,.012)
        );

    box-shadow:
        0 25px 70px rgba(0,0,0,.28);

    transition:
        transform .5s cubic-bezier(.2,.8,.2,1),
        border-color .4s ease,
        box-shadow .5s ease;
}


.work-card:hover{
    transform:
        translateY(-9px);

    border-color:
        rgba(242,201,76,.25);

    box-shadow:
        0 35px 90px rgba(0,0,0,.42),
        0 0 35px rgba(242,201,76,.035);
}


/* =========================================================
   VISUAL
   ========================================================= */

.work-visual{
    position:relative;

    height:380px;

    overflow:hidden;

    background:#070707;
}


.work-card-large .work-visual{
    height:460px;
}


/* =========================================================
   WEBSITE SCENE
   ========================================================= */

.website-scene{
    background:
        radial-gradient(
            circle at 72% 48%,
            rgba(242,201,76,.17),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #050505,
            #101010
        );
}


.website-scene::before{
    content:"";

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            115deg,
            transparent 20%,
            rgba(255,255,255,.025) 50%,
            transparent 80%
        );

    transform:
        translateX(-100%);

    animation:
        websiteSweep 7s linear infinite;
}


.scene-topbar{
    position:absolute;

    top:20px;
    left:22px;
    right:22px;

    height:34px;

    display:flex;
    align-items:center;

    gap:6px;

    padding:
        0 10px;

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

    z-index:5;
}


.scene-topbar > span{
    width:5px;
    height:5px;

    border-radius:50%;

    background:
        rgba(255,255,255,.25);
}


.scene-url{
    margin-left:15px;

    color:#666;

    font-size:7px;
    letter-spacing:1.5px;
}


.website-hero-content{
    position:absolute;

    left:50px;
    top:110px;

    z-index:4;
}


.website-hero-content small{
    color:#FFD966;

    font-size:8px;
    letter-spacing:3px;
}


.website-hero-content h3{
    margin:
        16px 0 22px;

    color:#fff;

    font-size:42px;
    line-height:.92;

    letter-spacing:-2px;
}


.scene-button{
    display:inline-flex;

    padding:
        8px 13px;

    border:
        1px solid rgba(242,201,76,.45);

    color:#FFD966;

    font-size:7px;
    letter-spacing:2px;

    border-radius:4px;
}


.website-orb{
    position:absolute;

    width:280px;
    height:280px;

    right:-30px;
    top:75px;

    border-radius:50%;

    background:
        radial-gradient(
            circle at 40% 35%,
            rgba(255,217,102,.18),
            rgba(242,201,76,.04) 35%,
            transparent 68%
        );

    border:
        1px solid rgba(242,201,76,.16);

    box-shadow:
        inset 0 0 80px rgba(242,201,76,.07),
        0 0 70px rgba(242,201,76,.06);

    animation:
        workOrb 7s ease-in-out infinite;
}


.website-orb::before,
.website-orb::after{
    content:"";

    position:absolute;

    inset:25px;

    border-radius:50%;

    border:
        1px solid rgba(242,201,76,.12);

    transform:
        rotateX(65deg);

    animation:
        websiteOrbit 9s linear infinite;
}


.website-orb::after{
    inset:50px;

    transform:
        rotateY(65deg);

    animation-duration:
        13s;

    animation-direction:
        reverse;
}


.website-lines{
    position:absolute;

    right:-30px;
    bottom:-50px;

    width:350px;
    height:250px;

    background:
        repeating-linear-gradient(
            0deg,
            transparent 0 18px,
            rgba(242,201,76,.08) 19px 20px
        );

    transform:
        perspective(500px)
        rotateX(65deg)
        rotateZ(-8deg);

    opacity:.4;
}


.floating-ui{
    position:absolute;

    z-index:10;

    padding:
        10px 12px;

    border:
        1px solid rgba(242,201,76,.20);

    background:
        rgba(5,5,5,.65);

    backdrop-filter:
        blur(10px);

    border-radius:8px;

    box-shadow:
        0 15px 35px rgba(0,0,0,.35);

    animation:
        floatingUI 4s ease-in-out infinite;
}


.floating-ui span{
    display:block;

    color:#FFD966;

    font-size:9px;
}


.floating-ui b{
    color:#777;

    font-size:6px;
    letter-spacing:1px;
}


.ui-one{
    top:105px;
    right:32px;
}


.ui-two{
    right:72px;
    bottom:60px;

    animation-delay:
        -2s;
}


/* =========================================================
   BRANDING SCENE
   ========================================================= */

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

    background:
        radial-gradient(
            circle at center,
            rgba(242,201,76,.10),
            transparent 50%
        ),
        #080808;
}


.brand-grid{
    position:absolute;
    inset:0;

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

    background-size:38px 38px;

    mask-image:
        radial-gradient(
            circle,
            black,
            transparent 75%
        );

    -webkit-mask-image:
        radial-gradient(
            circle,
            black,
            transparent 75%
        );
}


.brand-circle{
    position:absolute;

    border-radius:50%;

    border:
        1px solid rgba(242,201,76,.22);
}


.brand-circle-1{
    width:230px;
    height:230px;

    animation:
        brandRotate 15s linear infinite;
}


.brand-circle-2{
    width:180px;
    height:180px;

    border-color:
        rgba(255,217,102,.10);

    animation:
        brandRotate 11s linear infinite reverse;
}


.brand-mark{
    position:relative;
    z-index:4;

    width:105px;
    height:105px;

    display:grid;
    place-items:center;

    border-radius:25px;

    color:#FFD966;

    font-size:58px;
    font-weight:700;

    background:
        linear-gradient(
            145deg,
            #17130a,
            #080808
        );

    border:
        1px solid rgba(242,201,76,.4);

    box-shadow:
        0 0 45px rgba(242,201,76,.12),
        inset 0 0 30px rgba(242,201,76,.06);

    transform:
        rotate(-8deg);

    transition:
        transform .5s ease;
}


.work-card:hover .brand-mark{
    transform:
        rotate(0deg)
        scale(1.05);
}


.brand-word{
    position:absolute;

    right:24px;
    top:28px;

    color:#444;

    font-size:10px;
    font-weight:700;
    line-height:1.1;

    letter-spacing:2px;

    text-align:right;
}


.brand-number{
    position:absolute;

    left:24px;
    top:28px;

    color:#FFD966;

    font-size:9px;
    letter-spacing:2px;
}


.brand-chip{
    position:absolute;

    bottom:24px;

    display:flex;
    align-items:center;
    gap:7px;

    padding:
        8px 11px;

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

    border-radius:50px;

    color:#777;

    font-size:7px;
    letter-spacing:1.5px;

    background:
        rgba(0,0,0,.4);
}


.brand-chip span{
    width:5px;
    height:5px;

    border-radius:50%;

    background:#FFD966;

    box-shadow:
        0 0 8px #FFD966;
}


/* =========================================================
   GROWTH SCENE
   ========================================================= */

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

    background:
        radial-gradient(
            circle at center,
            rgba(242,201,76,.13),
            transparent 42%
        ),
        #060606;
}


.growth-grid{
    position:absolute;
    inset:0;

    background-image:
        linear-gradient(
            rgba(242,201,76,.04) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(242,201,76,.04) 1px,
            transparent 1px
        );

    background-size:35px 35px;

    transform:
        perspective(500px)
        rotateX(55deg)
        scale(1.5);

    transform-origin:center bottom;

    opacity:.45;
}


.growth-orbit{
    position:absolute;

    border-radius:50%;

    border:
        1px solid rgba(242,201,76,.18);
}


.growth-orbit.orbit-a{
    width:210px;
    height:210px;

    transform:
        rotateX(65deg);

    animation:
        growthRotate 12s linear infinite;
}


.growth-orbit.orbit-b{
    width:160px;
    height:160px;

    transform:
        rotateY(65deg);

    animation:
        growthRotate 9s linear infinite reverse;
}


.growth-core{
    position:relative;

    width:100px;
    height:100px;

    display:grid;
    place-items:center;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            #241c08,
            #090807 65%
        );

    border:
        1px solid rgba(242,201,76,.42);

    box-shadow:
        0 0 50px rgba(242,201,76,.12),
        inset 0 0 30px rgba(242,201,76,.08);

    z-index:5;

    animation:
        growthPulse 3s ease-in-out infinite;
}


.growth-core-inner{
    width:56px;
    height:56px;

    display:grid;
    place-items:center;

    border-radius:50%;

    border:
        1px solid rgba(255,217,102,.3);

    color:#FFD966;

    font-size:14px;
    font-weight:700;
    letter-spacing:1px;

    background:
        rgba(242,201,76,.06);

    box-shadow:
        0 0 25px rgba(242,201,76,.12);
}


.growth-node{
    position:absolute;

    z-index:8;

    padding:
        7px 10px;

    border:
        1px solid rgba(242,201,76,.18);

    border-radius:5px;

    color:#999;

    font-size:6px;
    letter-spacing:1.5px;

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

    backdrop-filter:
        blur(8px);

    animation:
        growthNodeFloat 4s ease-in-out infinite;
}


.growth-node-1{
    top:26%;
    left:17%;
}


.growth-node-2{
    top:22%;
    right:14%;

    animation-delay:-1s;
}


.growth-node-3{
    bottom:24%;
    left:13%;

    animation-delay:-2s;
}


.growth-node-4{
    bottom:19%;
    right:12%;

    animation-delay:-3s;
}


.growth-node::before{
    content:"";

    display:inline-block;

    width:4px;
    height:4px;

    margin-right:5px;

    border-radius:50%;

    background:#FFD966;

    box-shadow:
        0 0 7px #FFD966;
}


.growth-line{
    position:absolute;

    width:90px;
    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(242,201,76,.35),
            transparent
        );

    transform-origin:left center;

    animation:
        linePulse 2.5s ease-in-out infinite;
}


.growth-line-1{
    left:28%;
    top:39%;

    transform:
        rotate(18deg);
}


.growth-line-2{
    right:27%;
    top:40%;

    transform:
        rotate(160deg);
}


.growth-line-3{
    left:28%;
    bottom:35%;

    transform:
        rotate(-25deg);
}


.growth-status{
    position:absolute;

    bottom:20px;

    left:50%;

    transform:
        translateX(-50%);

    display:flex;
    align-items:center;
    gap:7px;

    color:#666;

    font-size:7px;
    letter-spacing:1.5px;
}


.growth-status span{
    width:5px;
    height:5px;

    border-radius:50%;

    background:#FFD966;

    box-shadow:
        0 0 8px #FFD966;

    animation:
        statusBlink 1.8s ease-in-out infinite;
}


/* =========================================================
   WORK CONTENT
   ========================================================= */

.work-content{
    padding:
        23px 24px 26px;
}


.work-meta{
    display:flex;
    align-items:center;
    justify-content:space-between;

    margin-bottom:13px;
}


.work-meta small{
    color:#666;

    font-size:8px;
    font-weight:600;

    letter-spacing:2px;
}


.work-meta span{
    color:#FFD966;

    font-size:15px;

    transition:
        transform .3s ease;
}


.work-card:hover .work-meta span{
    transform:
        translate(4px,-4px);
}


.work-content h3{
    margin:0 0 8px;

    color:#f3f3f3;

    font-size:20px;
    font-weight:600;

    letter-spacing:-.5px;
}


.work-content p{
    margin:0;

    color:#666;

    font-size:11px;
    line-height:1.6;
}


/* =========================================================
   BOTTOM
   ========================================================= */

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

    gap:18px;

    margin-top:42px;

    color:#444;

    font-size:8px;
    font-weight:600;

    letter-spacing:2.5px;
}


.work-bottom i{
    width:4px;
    height:4px;

    border-radius:50%;

    background:#FFD966;

    opacity:.5;
}


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

@keyframes websiteSweep{

    0%{
        transform:translateX(-110%);
    }

    100%{
        transform:translateX(110%);
    }
}


@keyframes workOrb{

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

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


@keyframes websiteOrbit{

    from{
        transform:
            rotateX(65deg)
            rotateZ(0deg);
    }

    to{
        transform:
            rotateX(65deg)
            rotateZ(360deg);
    }
}


@keyframes floatingUI{

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

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


@keyframes brandRotate{

    from{
        transform:
            rotate(0deg);
    }

    to{
        transform:
            rotate(360deg);
    }
}


@keyframes growthRotate{

    from{
        transform:
            rotateX(65deg)
            rotateZ(0deg);
    }

    to{
        transform:
            rotateX(65deg)
            rotateZ(360deg);
    }
}


@keyframes growthPulse{

    0%,100%{
        transform:scale(.96);
        box-shadow:
            0 0 35px rgba(242,201,76,.08),
            inset 0 0 30px rgba(242,201,76,.06);
    }

    50%{
        transform:scale(1.06);
        box-shadow:
            0 0 65px rgba(242,201,76,.18),
            inset 0 0 35px rgba(242,201,76,.10);
    }
}


@keyframes growthNodeFloat{

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

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


@keyframes linePulse{

    0%,100%{
        opacity:.25;
    }

    50%{
        opacity:.9;
    }
}


@keyframes statusBlink{

    0%,100%{
        opacity:.4;
        transform:scale(.8);
    }

    50%{
        opacity:1;
        transform:scale(1.2);
    }
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:1100px){

    .work-grid{
        grid-template-columns:1fr 1fr;
    }

    .work-card-large{
        grid-column:1 / -1;
    }

    .work-card-large .work-visual{
        height:430px;
    }
}


@media(max-width:760px){

    .work-head{
        align-items:flex-start;
        flex-direction:column;
    }

    .work-grid{
        grid-template-columns:1fr;
    }

    .work-card-large{
        grid-column:auto;
    }

    .work-visual,
    .work-card-large .work-visual{
        height:360px;
    }

    .website-hero-content{
        left:30px;
        top:105px;
    }

    .website-hero-content h3{
        font-size:34px;
    }

    .work-bottom{
        flex-wrap:wrap;
        gap:12px;
    }
}


@media(max-width:480px){

    .work-intro{
        font-size:13px;
    }

    .work-content{
        padding:
            19px 18px 22px;
    }

    .work-content h3{
        font-size:18px;
    }

    .work-visual,
    .work-card-large .work-visual{
        height:320px;
    }

    .website-orb{
        width:220px;
        height:220px;

        right:-70px;
    }

    .website-hero-content h3{
        font-size:30px;
    }

    .floating-ui{
        display:none;
    }

    .brand-mark{
        width:85px;
        height:85px;

        font-size:45px;
    }

    .brand-circle-1{
        width:190px;
        height:190px;
    }

    .brand-circle-2{
        width:145px;
        height:145px;
    }
}

/* =========================================================
   KARYA INNOVATIVE 2.0
   MOBILE RESPONSIVE POLISH
   ========================================================= */

@media (max-width: 760px){

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

    .container{
        width:100%;
        max-width:100%;
        padding-left:20px;
        padding-right:20px;
    }

    /* NAVIGATION */
    .nav-inner{
        padding-left:20px;
        padding-right:20px;
    }

    .logo img{
        max-width:145px;
        height:auto;
    }

    .nav-cta{
        display:none;
    }

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

    /* HERO */
    .hero{
        width:100%;
        min-height:780px;
        overflow:hidden;
    }

    .hero-grid{
        width:100%;
        min-height:780px;
    }

    #hero3d{
        width:100%;
        height:100%;
        opacity:.55;
    }

    .hero-content{
        width:100%;
        max-width:100%;
        padding:120px 20px 60px;
    }

    .hero h1{
        font-size:clamp(42px,12vw,58px);
        line-height:.96;
        letter-spacing:-2px;
        max-width:100%;
    }

    .hero-description{
        max-width:100%;
        font-size:15px;
        line-height:1.7;
    }

    .hero-buttons{
        width:100%;
        display:flex;
        flex-direction:column;
        gap:12px;
    }

    .hero-buttons .btn{
        width:100%;
        justify-content:center;
    }

    .hero-trust{
        font-size:11px;
        line-height:1.5;
    }

    .hero-stats{
        display:none;
    }

    /* FLOATING CARDS */
    .float-card{
        transform:scale(.72);
        opacity:.45;
        pointer-events:none;
    }

    .card-one{
        top:17%;
        right:-50px;
    }

    .card-two{
        top:37%;
        left:-55px;
    }

    .card-three{
        bottom:27%;
        right:-50px;
    }

    .card-four,
    .card-five{
        display:none;
    }

    /* TRUST STRIP */
    .trusted-strip{
        overflow:hidden;
    }

    .trusted-inner{
        padding:25px 20px;
        gap:18px;
        flex-wrap:wrap;
    }

    .trusted-label{
        width:100%;
    }

    .brand-word{
        font-size:12px;
    }

    /* SECTION */
    .section{
        width:100%;
        overflow:hidden;
    }

    .section-title{
        font-size:clamp(34px,9vw,48px);
        letter-spacing:-1.5px;
    }

    .section-copy{
        font-size:15px;
        line-height:1.7;
    }

    /* SERVICES */
    .services-section{
        overflow:hidden;
    }

    .services-heading h2{
        font-size:clamp(38px,10vw,54px);
        line-height:1;
    }

    .services-heading p{
        font-size:14px;
    }

    .services-showcase{
        width:100%;
    }

    .service-feature,
    .service-card{
        width:100%;
        min-width:0;
    }

    .service-feature{
        padding:22px;
    }

    .service-feature-content h3{
        font-size:28px;
    }

    .service-card{
        padding:20px;
    }

    .service-card-content h3{
        font-size:24px;
    }

    .service-card-visual{
        min-height:220px;
    }

    /* ABOUT */
    .about{
        overflow:hidden;
    }

    .about-visual{
        min-height:390px;
        transform:scale(.88);
    }

    .about-orbit{
        width:280px;
        height:280px;
    }

    .about-orbit-two{
        width:220px;
        height:220px;
    }

    .about-core{
        width:150px;
        height:150px;
    }

    .about-core img{
        max-width:105px;
    }

    /* AI ADVANTAGE */
    .ai-section{
        min-height:auto;
        overflow:hidden;
    }

    .ai-grid{
        min-height:auto;
        grid-template-columns:1fr;
        gap:20px;
    }

    .ai-copy{
        order:1;
    }

    .ai-orb-wrap{
        order:2;
        min-height:480px;
        width:100%;
        overflow:hidden;
    }

    .ai-stage{
        width:min(500px,100vw);
        height:min(500px,100vw);
        transform-origin:center center;
        margin:auto;
    }

    .ai-core{
        transform:scale(.72);
    }

    .ai-label{
        transform:scale(.72);
    }

    .ai-status{
        transform:scale(.8);
    }

    .ai-point{
        padding:17px;
    }

    .ai-point h4{
        font-size:16px;
    }

    .ai-point p{
        font-size:13px;
    }

    /* WORK */
    .work{
        overflow:hidden;
    }

    .work-grid{
        grid-template-columns:1fr;
    }

    .work-card-large{
        grid-column:auto;
    }

    .work-visual{
        min-height:300px;
    }

    .work-content{
        padding:22px;
    }

    .work-content h3{
        font-size:25px;
    }

    /* PROCESS */
    .process-grid{
        grid-template-columns:1fr;
    }

    /* TESTIMONIALS */
    .testimonial-grid{
        grid-template-columns:1fr;
    }

    .testimonial{
        padding:24px;
    }

    /* FAQ */
    .faq-grid{
        grid-template-columns:1fr;
    }

    .faq-question{
        padding:20px;
    }

    .faq-answer{
        padding-left:20px;
        padding-right:20px;
    }

    /* CTA */
    .cta{
        padding-left:20px;
        padding-right:20px;
    }

    .cta h2{
        font-size:clamp(38px,10vw,54px);
        line-height:1;
    }

    /* CONTACT */
    .contact-grid{
        grid-template-columns:1fr;
        gap:35px;
    }

    .contact-form{
        padding:22px;
    }

    .form-grid{
        grid-template-columns:1fr;
    }

    .form-group{
        width:100%;
    }

    .form-submit{
        width:100%;
    }

    /* FOOTER */
    .footer-top{
        grid-template-columns:1fr;
        gap:35px;
    }

    .footer-bottom{
        flex-direction:column;
        align-items:flex-start;
        gap:10px;
    }
}


/* =========================================================
   SMALL PHONES
   ========================================================= */

@media (max-width:420px){

    .hero{
        min-height:740px;
    }

    .hero-grid{
        min-height:740px;
    }

    .hero-content{
        padding-top:110px;
    }

    .hero h1{
        font-size:43px;
        letter-spacing:-2px;
    }

    .hero-eyebrow{
        font-size:10px;
    }

    .hero-description{
        font-size:14px;
    }

    .services-heading h2{
        font-size:39px;
    }

    .service-feature{
        padding:18px;
    }

    .service-feature-content h3{
        font-size:25px;
    }

    .service-card{
        padding:18px;
    }

    .about-visual{
        min-height:330px;
        transform:scale(.78);
        margin-left:-20px;
        margin-right:-20px;
    }

    .ai-orb-wrap{
        min-height:390px;
    }

    .ai-stage{
        width:390px;
        height:390px;
    }

    .work-visual{
        min-height:250px;
    }

    .contact-form{
        padding:18px;
    }

    .cta h2{
        font-size:40px;
    }
}

/* =========================================================
   KARYA INNOVATIVE 2.0
   AI ADVANTAGE — PERFORMANCE PATCH
   ========================================================= */

.ai-section{
    contain:layout paint;
}

.ai-stage{
    will-change:transform;
    transform:translateZ(0);
    backface-visibility:hidden;
}

.ai-core,
.ai-ring,
.ai-node,
.ai-ambient,
.ai-particles,
.rocket,
.rocket-fire,
.ai-label{
    backface-visibility:hidden;
    transform:translateZ(0);
}

.ai-ring,
.ai-node,
.ai-ambient,
.ai-particles,
.rocket,
.rocket-fire,
.ai-label{
    will-change:transform;
}


/* ---------------------------------------------------------
   Reduced animation load on tablets
   --------------------------------------------------------- */

@media (max-width:1100px) and (min-width:761px){

    .ai-particles{
        opacity:.65;
    }

    .ai-ring{
        opacity:.75;
    }

    .ai-node{
        transform:scale(.85);
    }

}


/* ---------------------------------------------------------
   Mobile optimization
   --------------------------------------------------------- */

@media (max-width:760px){

    .ai-section{
        contain:layout paint;
    }

    .ai-bg-grid{
        opacity:.35;
    }

    .ai-bg-glow{
        opacity:.55;
    }

    .ai-particles{
        opacity:.45;
    }

    .ai-ring{
        opacity:.65;
    }

    .ai-node{
        transform:scale(.72);
    }

    .ai-label{
        transform:scale(.68);
    }

    .rocket-fire{
        opacity:.8;
    }

}


/* ---------------------------------------------------------
   Very small screens
   --------------------------------------------------------- */

@media (max-width:480px){

    .ai-particles{
        opacity:.30;
    }

    .ai-ring{
        opacity:.55;
    }

    .ai-node{
        transform:scale(.62);
    }

    .ai-label{
        transform:scale(.58);
    }

    .ai-status{
        transform:scale(.72);
    }

}

/* =========================================================
   FONT & RENDERING OPTIMIZATION
   ========================================================= */

html{
    text-rendering:optimizeLegibility;
}

body{
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

img{
    max-width:100%;
    height:auto;
}

canvas{
    display:block;
}
/* =========================================================
   KARYA INNOVATIVE 2.0
   PREMIUM SCROLL REVEAL — STABLE VERSION
   ========================================================= */

.reveal {
    opacity: 0;
    transform: translateY(30px);
    visibility: hidden;

    transition:
        opacity .7s ease,
        transform .7s cubic-bezier(.22,1,.36,1),
        visibility .7s ease;
}

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


/* ---------------------------------------------------------
   Staggered reveal
   --------------------------------------------------------- */

.reveal:nth-child(2) {
    transition-delay: .08s;
}

.reveal:nth-child(3) {
    transition-delay: .16s;
}

.reveal:nth-child(4) {
    transition-delay: .24s;
}

.reveal:nth-child(5) {
    transition-delay: .32s;
}

.reveal:nth-child(6) {
    transition-delay: .40s;
}


/* ---------------------------------------------------------
   Accessibility
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    .reveal,
    .reveal.visible {

        opacity: 1;
        transform: none;
        visibility: visible;
        transition: none;

    }

}


/* ---------------------------------------------------------
   Mobile stability
   --------------------------------------------------------- */

@media (max-width: 760px) {

    .reveal {

        transform: translateY(20px);
        transition-duration: .55s;

    }

    .reveal.visible {

        transform: translateY(0);

    }

}


/* =========================================================
   KARYA2.0 — PREMIUM TRUSTED STRIP
   14 BRAND NAMES + INFINITE SCROLL
   ========================================================= */

.karya-trusted-strip {
    position: relative;
    width: 100%;
    padding: 20px 0 24px;
    background: linear-gradient(180deg, #090909 0%, #050505 100%);
    border-top: 1px solid rgba(255,255,255,.06);
    border-bottom: 1px solid rgba(255,255,255,.06);
    overflow: hidden;
}


/* =========================================================
   TOP LABEL
   ========================================================= */

.karya-trusted-label {
    width: 100%;
    margin-bottom: 18px;
    text-align: center;

    color: rgba(255,255,255,.32);

    font-family: "DM Sans", Arial, sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2.8px;
    line-height: 1;
    text-transform: uppercase;

    white-space: nowrap;
}


/* GOLD LINE */

.karya-trusted-label::after {
    content: "";

    display: block;

    width: 38px;
    height: 1px;

    margin: 9px auto 0;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(242,201,76,.75),
        transparent
    );

    box-shadow:
        0 0 8px rgba(242,201,76,.25);
}


/* =========================================================
   VIEWPORT
   ========================================================= */

.karya-trusted-window {
    position: relative;
    width: 100%;
    overflow: hidden;
}


/* =========================================================
   LEFT FADE
   ========================================================= */

.karya-trusted-window::before {
    content: "";

    position: absolute;
    left: 0;
    top: 0;

    width: 120px;
    height: 100%;

    z-index: 10;
    pointer-events: none;

    background: linear-gradient(
        90deg,
        #060606 0%,
        rgba(6,6,6,.88) 30%,
        rgba(6,6,6,.35) 65%,
        transparent 100%
    );
}


/* =========================================================
   RIGHT FADE
   ========================================================= */

.karya-trusted-window::after {
    content: "";

    position: absolute;
    right: 0;
    top: 0;

    width: 120px;
    height: 100%;

    z-index: 10;
    pointer-events: none;

    background: linear-gradient(
        270deg,
        #060606 0%,
        rgba(6,6,6,.88) 30%,
        rgba(6,6,6,.35) 65%,
        transparent 100%
    );
}


/* =========================================================
   MOVING TRACK
   ========================================================= */

.karya-trusted-track {
    display: flex;
    align-items: center;

    width: max-content;
    flex-shrink: 0;

    will-change: transform;

    animation:
        karyaTrustedInfinite
        32s
        linear
        infinite;
}


/* =========================================================
   EACH 14-LOGO GROUP
   ========================================================= */

.karya-trusted-group {
    display: flex;
    align-items: center;

    width: max-content;
    flex-shrink: 0;

    gap: 78px;

    padding-right: 78px;

    white-space: nowrap;
}


/* =========================================================
   BRAND NAMES
   ========================================================= */

.karya-trusted-group span {
    position: relative;

    display: inline-block;
    flex-shrink: 0;

    color: rgba(255,255,255,.34);

    font-family:
        "Manrope",
        Arial,
        sans-serif;

    font-size: 14px;
    font-weight: 800;

    letter-spacing: 1px;
    line-height: 1;

    white-space: nowrap;

    cursor: default;

    transition:
        color .35s ease,
        transform .35s ease,
        text-shadow .35s ease;
}


/* =========================================================
   GOLD SEPARATOR DOT
   ========================================================= */

.karya-trusted-group span::after {
    content: "";

    position: absolute;

    right: -40px;
    top: 50%;

    width: 3px;
    height: 3px;

    transform: translateY(-50%);

    border-radius: 50%;

    background: rgba(242,201,76,.45);

    box-shadow:
        0 0 7px rgba(242,201,76,.25);
}


/* =========================================================
   HOVER
   ========================================================= */

.karya-trusted-group span:hover {
    color: rgba(255,255,255,.90);

    transform: translateY(-1px);

    text-shadow:
        0 0 10px rgba(242,201,76,.30),
        0 0 20px rgba(242,201,76,.12);
}


/* =========================================================
   INFINITE LOOP
   ========================================================= */

@keyframes karyaTrustedInfinite {

    0% {
        transform: translate3d(0,0,0);
    }

    100% {
        transform: translate3d(-50%,0,0);
    }

}


/* =========================================================
   PAUSE ON HOVER
   ========================================================= */

.karya-trusted-window:hover
.karya-trusted-track {
    animation-play-state: paused;
}


/* =========================================================
   LARGE DESKTOP
   ========================================================= */

@media (min-width: 1400px) {

    .karya-trusted-group {
        gap: 95px;
        padding-right: 95px;
    }

    .karya-trusted-group span {
        font-size: 15px;
    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {

    .karya-trusted-group {
        gap: 60px;
        padding-right: 60px;
    }

    .karya-trusted-group span {
        font-size: 13px;
    }

}


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

@media (max-width: 850px) {

    .karya-trusted-strip {
        padding: 17px 0 20px;
    }

    .karya-trusted-label {
        margin-bottom: 16px;

        font-size: 8px;
        letter-spacing: 2px;
    }

    .karya-trusted-label::after {
        width: 28px;
        margin-top: 8px;
    }

    .karya-trusted-group {
        gap: 45px;
        padding-right: 45px;
    }

    .karya-trusted-group span {
        font-size: 12px;
    }

    .karya-trusted-group span::after {
        right: -24px;

        width: 2px;
        height: 2px;
    }

    .karya-trusted-window::before,
    .karya-trusted-window::after {
        width: 60px;
    }

}


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

@media (max-width: 480px) {

    .karya-trusted-strip {
        padding: 15px 0 18px;
    }

    .karya-trusted-label {
        font-size: 7px;
        letter-spacing: 1.7px;
    }

    .karya-trusted-group {
        gap: 35px;
        padding-right: 35px;
    }

    .karya-trusted-group span {
        font-size: 11px;
    }

    .karya-trusted-group span::after {
        right: -19px;
    }

    .karya-trusted-window::before,
    .karya-trusted-window::after {
        width: 45px;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .karya-trusted-track {
        animation: none;
    }

}