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

body{
    font-family:'Montserrat',sans-serif;
    background:#000;
    color:#fff;
   overflow-x:hidden;
}

/* ===== SPLASH ===== */
#splash{
    position:fixed;
    inset:0;
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:999;
}

#splash::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(120deg,#020617,#0f172a,#020617);
    background-size:300% 300%;
    animation:bgMove 12s infinite;
    z-index:-2;
}

#splash::after{
    content:"";
    position:absolute;
    inset:0;
    background-image:
    linear-gradient(rgba(255,255,255,0.04)1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,0.04)1px,transparent 1px);
    background-size:32px 32px;
    z-index:-1;
}

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

/* TEXT */
.line1{
    font-family:'Orbitron',sans-serif;
    font-size:clamp(30px,7vw,56px);
    letter-spacing:5px;
    background:linear-gradient(90deg,#38bdf8,#818cf8);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.line2{
    font-size:clamp(16px,4vw,26px);
    letter-spacing:8px;
    margin-top:8px;
    opacity:.8;
}

/* ===== NAVBAR ===== */
nav{
    position:fixed;
    top:0;
    width:100%;
    padding:18px 30px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    background:rgba(0,0,0,.7);
    backdrop-filter:blur(10px);
    transform:translateY(-100%);
    transition:.4s;
    z-index:1000;
}

nav.show{
    transform:translateY(0);
}

.logo{
    display:flex;
    flex-direction:column;
    line-height:1.1;
    cursor:pointer;
}
.desc{
    font-family:'Fira Code', monospace;
    font-size:14px;
    line-height:1.8;
    opacity:0.9;
    letter-spacing:0.5px;
}
/* CEZONAL (same as splash) */
.logo .line1{
    font-family:'Orbitron',sans-serif;
    font-size:18px;
    letter-spacing:3px;

    background:linear-gradient(90deg,#38bdf8,#818cf8);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

    /* 🔥 same glow feel */
    text-shadow:0 0 10px rgba(56,189,248,0.4);
}

/* TECHNOLOGIES */
.logo .line2{
    font-family:'Orbitron',sans-serif;
    font-size:10px;
    letter-spacing:5px;
    opacity:0.7;
}

/* 🔥 SAME HOVER ANIMATION LIKE HERO */
.logo:hover{
    transform:rotateX(10deg) rotateY(10deg) scale(1.05);
    text-shadow:0 0 15px rgba(56,189,248,0.7);
}

/* MENU */
.menu{
    display:flex;
    gap:25px;
    font-family:'Fira Code', monospace;
}

.menu a{
    text-decoration:none;
    color:#94a3b8;
    font-size:14px;
    position:relative;
    transition:0.3s;
}
.ceo h2{
    font-family: 'Rubik Mono One', sans-serif;
    color:#ef4444;
    text-shadow:0 0 10px rgba(239,68,68,0.6);
}
.menu a:hover{
    color:#38bdf8;
}

.menu a::after{
    content:"";
    position:absolute;
    bottom:-5px;
    left:0;
    width:0;
    height:2px;
    background:#38bdf8;
    transition:0.3s;
}

.menu a:hover::after{
    width:100%;
}

/* MOBILE */
.menu-btn{
    display:none;
    font-size:26px;
    cursor:pointer;
}

@media(max-width:768px){

    .menu{
        position:fixed;
        left:-280px;
        top:0;
        height:100%;
        width:280px;

        /* 🔥 glass + gradient */
        background:transparent;   /* pure black */
        backdrop-filter:blur(20px);

        flex-direction:column;
        padding-top:100px;
        padding-left:25px;
        gap:25px;

        box-shadow:5px 0 30px rgba(0,0,0,0.6);

        transition:0.4s ease;
    }

    .menu.active{
        left:0;
    }

    /* menu links */
    .menu a{
        font-size:18px;
        color:#cbd5f5;
        position:relative;
        padding-left:10px;
        transition:0.3s;
    }

    .menu a:hover{
    color:#fff;
    transform:translateX(5px);
}

    /* left glow bar */
   

    .menu-btn{
        display:block;
        z-index:1100;
    }
}

/* ===== MAIN ===== */
#main{display:none;}

/* ===== HERO ===== */
.hero{
    position:relative;
    height:100vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    overflow:hidden;
}

/* 🔥 MULTI CODE BACKGROUND */
/* 🔥 BRIGHT GRID BACKGROUND */
.hero::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-2;

    background:
    repeating-linear-gradient(
        0deg,
        rgba(56,189,248,0.18) 0px,
        rgba(56,189,248,0.18) 1px,
        transparent 1px,
        transparent 40px
    ),
    repeating-linear-gradient(
        90deg,
        rgba(56,189,248,0.12) 0px,
        rgba(56,189,248,0.12) 1px,
        transparent 1px,
        transparent 40px
    );

    animation:moveGrid 60s linear infinite;
}
.code-bg{
    position:absolute;
    inset:0;
    overflow:hidden;
    z-index:0; /* FIXED: was -1 */
 height:100%;
    pointer-events:none;
}

#code{
    font-family:'Fira Code', monospace;
    font-size:14px;
    color:#38bdf8;
    opacity:0.12;
    line-height:20px;
    white-space:pre;

    animation:scrollCode 60s linear infinite;
}
#overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.6);
    backdrop-filter:blur(3px);
    opacity:0;
    pointer-events:none;
    transition:0.3s;
    z-index:900;
}

#overlay.active{
    opacity:1;
    pointer-events:auto;
}

/* smooth vertical loop */
@keyframes scrollCode{
    from{
        transform:translateY(0);
    }
    to{
        transform:translateY(-50%);
    }
}

@keyframes moveGrid{
    from{
        transform:translateY(0);
    }
    to{
        transform:translateY(-40px); /* MUST match grid spacing */
    }
}
@keyframes scrollCode{
    from{transform:translateY(0);}
    to{transform:translateY(-50%);}
}

/* 3D SHINE EFFECT */
.hero h1, .hero p, .btn, .menu a, .logo{
    transition:0.3s;
}

.hero h1:hover, .menu a:hover, .logo:hover{
    transform:rotateX(10deg) rotateY(10deg) scale(1.05);
    text-shadow:0 0 15px rgba(56,189,248,0.7);
}

/* HERO TEXT */
.hero h1{
    font-family:'Cinzel Decorative', serif;
    font-size:clamp(32px,6vw,60px);
    margin-bottom:15px;

    /* 🔥 multi-color inside text */
    background:linear-gradient(
        90deg,
        #38bdf8,
        #818cf8,
        #22c55e,
        #facc15,
        #fb7185,
        #38bdf8
    );

    background-size:300% auto;

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

    animation:colorMove 6s linear infinite;
}
@keyframes colorMove{
    0%{
        background-position:0% center;
    }
    100%{
        background-position:300% center;
    }
}

.hero p{
    opacity:.7;
    margin-bottom:20px;
}

.btn{
    padding:12px 25px;
    background:linear-gradient(90deg,#38bdf8,#818cf8);
    border:none;
    color:#fff;
    cursor:pointer;
    border-radius:6px;
}

/* SERVICES */
.services{
    padding:80px 20px;
    text-align:center;
}


.cards{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
    gap:20px;
    max-width:1100px;   /* 🔥 LIMIT WIDTH */
    margin:40px auto;   /* 🔥 CENTER */
}

.card{
    background:#0b0f1a;
    border-radius:16px;
    padding:25px;
    position:relative;
    overflow:hidden;
    transition:0.3s;
}

/* glow border */
.card::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:16px;
    padding:1px;
    background:linear-gradient(120deg,#38bdf8,#818cf8,#22c55e);
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
            mask-composite:exclude;
}

.card{
    background:rgba(255,255,255,0.03);
    backdrop-filter:blur(12px);
}
/* text */
.card h3{
    font-size:18px;
    font-weight:600;
}

.card p{
    font-size:14px;
    opacity:0.7;
}
.card:hover{
    transform:translateY(-10px) scale(1.02);
    box-shadow:0 20px 40px rgba(56,189,248,0.2);
}
.card i{
    display:block;
    font-size:28px;
    margin-bottom:15px;
    color:#38bdf8;

    animation:float 3s ease-in-out infinite;
}

/* animation */
@keyframes float{
    0%{ transform:translateY(0); }
    50%{ transform:translateY(-6px); }
    100%{ transform:translateY(0); }
}
.card:hover i{
    transform:scale(1.15);
    color:#818cf8;
}
.card span{
    display:block;
    margin-top:10px;
    font-size:12px;
    color:#38bdf8;
}
.card:nth-child(1) i{ animation-delay:0s; }
.card:nth-child(2) i{ animation-delay:0.2s; }
.card:nth-child(3) i{ animation-delay:0.4s; }
.card:nth-child(4) i{ animation-delay:0.6s; }
.card:nth-child(5) i{ animation-delay:0.8s; }
.card:nth-child(6) i{ animation-delay:1s; }



/* 🔥 BUBBLE CONTAINER */
.bubbles{
    position:absolute;
    inset:0;
    overflow:hidden;
    z-index:0;
}

/* BUBBLES */

.process{
    padding:20px 20px 80px;
    text-align:center; /* ✅ THIS FIXES IT */
}
/* random positions */
.bubbles span:nth-child(1){ left:10%; animation-delay:0s; }
.bubbles span:nth-child(2){ left:30%; animation-delay:2s; }
.bubbles span:nth-child(3){ left:50%; animation-delay:4s; }
.bubbles span:nth-child(4){ left:70%; animation-delay:1s; }
.bubbles span:nth-child(5){ left:90%; animation-delay:3s; }

/* animation */


/* keep text above bubbles */
.card h3,
.card p,
.card span{
    position:relative;
    z-index:1;
}

/* SCROLL ENABLE */
.enable-scroll{
    overflow:auto !important;
}
.sub{
    font-size:14px;
    margin-top:10px;
    letter-spacing:1px;
}

/* 🔥 Multi-color words */
.sub span{
    margin-right:4px;
}

/* Colors */
.c1{ color:#38bdf8; }      /* blue */
.c2{ color:#818cf8; }      /* purple */
.c3{ color:#22c55e; }      /* green */
.c4{ color:#facc15; }      /* yellow */
.c5{ color:#fb7185; }      /* pink */
.c6{ color:#14b8a6; }      /* teal */
.c7{ color:#a78bfa; }      /* violet */
.c1{
  background:linear-gradient(90deg,#38bdf8,#818cf8);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}
.card h3{
    font-family:'Fira Code', monospace; /* 🔥 tech style */
    letter-spacing:2px;
    margin-bottom:10px;
}
.services h2,
.process h2,
.advantage h2{
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(22px, 4vw, 32px); /* 🔽 reduced */
    letter-spacing:3px;
    margin-bottom:20px;

    background:linear-gradient(90deg,#38bdf8,#818cf8,#38bdf8);
    background-size:200% auto;

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

    animation:shine 4s linear infinite;
}
@keyframes shine{
    0%{
        background-position:0% center;
    }
    100%{
        background-position:200% center;
    }
}
.timeline{
    position:relative;
    max-width:600px;
    margin:50px auto;
}

/* vertical line */
.timeline::before{
    content:"";
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    width:2px;
    height:100%;
    background:linear-gradient(#38bdf8,#818cf8);
}

/* step */
.step{
    position:relative;
    margin:40px 0;
    opacity:0;
    transform:translateY(40px);
    transition:0.6s;
}

/* dot icon */
.dot{
    position:absolute;
    left:50%;
    transform:translate(-50%,-50%);
    top:0;

    width:50px;
    height:50px;
    border-radius:50%;

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

    background:#111;
    border:2px solid #38bdf8;
    font-size:20px;
}

/* content */
.content{
    width:45%;
    padding:15px;
    background:#111;
    border-radius:8px;
    font-size:14px;
}

/* left side */
.step:nth-child(odd) .content{
    margin-right:auto;
    text-align:right;
}

/* right side */
.step:nth-child(even) .content{
    margin-left:auto;
    text-align:left;
}

/* animation visible */
.step.show{
    opacity:1;
    transform:translateY(0);
}
.advantage{
   padding:10px 10px 30px;
    text-align:center;
}

/* container */
.adv-3d{
    display:flex;
    flex-direction:column;
    gap:20px;
    max-width:600px;
    margin:50px auto;
    perspective:800px;
}

/* items */
.item{
    padding:15px;
    background:#111;
    border-radius:8px;

    font-size:15px;
    letter-spacing:1px;

    transition:0.3s;

    /* 🔥 3D depth shadow */
    box-shadow:
        0 2px 5px rgba(0,0,0,0.5),
        0 10px 20px rgba(0,0,0,0.4);
}

/* subtle depth layering */
.item:nth-child(1){ transform:translateZ(0); }
.item:nth-child(2){ transform:translateZ(-5px); }
.item:nth-child(3){ transform:translateZ(-10px); }
.item:nth-child(4){ transform:translateZ(-15px); }
.item:nth-child(5){ transform:translateZ(-20px); }
.item:nth-child(6){ transform:translateZ(-25px); }
.item:nth-child(7){ transform:translateZ(-30px); }
.item:nth-child(8){ transform:translateZ(-35px); }
.item:nth-child(9){ transform:translateZ(-40px); }
/* remove default color if any */
.item{
    color:#fff;
}

/* different colors for each */
.item:nth-child(1){ color:#38bdf8; }  /* blue */
.item:nth-child(2){ color:#818cf8; }  /* purple */
.item:nth-child(3){ color:#22c55e; }  /* green */
.item:nth-child(4){ color:#facc15; }  /* yellow */
.item:nth-child(5){ color:#fb7185; }  /* pink */
.item:nth-child(6){ color:#14b8a6; }  /* teal */
.item:nth-child(7){ color:#a78bfa; }  /* violet */
.item:nth-child(8){ color:#f97316; }  /* orange */
.item:nth-child(9){ color:#10b981; }  /* emerald */
/* hover 3D tilt */
.item:hover{
    transform:rotateX(5deg) rotateY(-5deg) scale(1.03);
    box-shadow:
        0 5px 15px rgba(0,0,0,0.7),
        0 20px 40px rgba(0,0,0,0.6);
}
.about{
    padding:20px 20px 60px;
    text-align:center;
}
.about{
    padding-top:10px;
}
/* heading */
.about h2{
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(22px,4vw,32px);
    letter-spacing:3px;
    margin-bottom:20px;

    background:linear-gradient(90deg,#38bdf8,#818cf8,#38bdf8);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

    animation:shine 4s linear infinite;
}

/* paragraph (medium font) */
.about-text{
    max-width:700px;
    margin:0 auto 20px;

    font-family:'Fira Code', monospace; /* 🔥 new font */
    font-size:15px;
    line-height:1.8;

    text-transform:uppercase;   /* 🔥 ALL CAPS */
    letter-spacing:1.5px;       /* 🔥 spacing between letters */

    opacity:0.85;
}

.brand{
    display:flex;
    flex-direction:column;
    align-items:center;
    margin-top:10px;
}

/* CEZONAL (blue gradient) */
.b-line1{
    font-family:'Orbitron', sans-serif;
    font-size:18px;
    letter-spacing:3px;

    background:linear-gradient(90deg,#38bdf8,#818cf8);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

    text-shadow:0 0 10px rgba(56,189,248,0.4);
}

/* TECHNOLOGIES (white below) */
.b-line2{
    font-family:'Orbitron', sans-serif;
    font-size:12px;
    letter-spacing:5px;
    color:#fff;   /* 🔥 white */
    opacity:0.8;
}
.brand:hover{
    transform:scale(1.05);
}
.ceo{
    padding:40px 20px 20px;
    text-align:center;
}

/* card */
.ceo-card{
    max-width:900px;
    margin:40px auto;

    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:30px;

    padding:25px;

    background:rgba(255,255,255,0.05);
    backdrop-filter:blur(10px);

    border-radius:12px;
    border:1px solid rgba(56,189,248,0.2);

    transition:0.3s;
}

/* left image (NOT circle) */
/* Enhanced CEO Image */
.ceo-left img{
    width:260px;              /* Increased size */
    height:340px;             /* Maintain portrait ratio */
    object-fit:cover;
    border-radius:12px;       /* Smooth rounded corners */
    border:2px solid rgba(56,189,248,0.4);
    box-shadow:0 10px 30px rgba(0,0,0,0.6),
               0 0 20px rgba(56,189,248,0.25);
    transition:transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover Effect */
.ceo-left img:hover{
    transform:scale(1.05);
    box-shadow:0 15px 40px rgba(56,189,248,0.35),
               0 0 30px rgba(56,189,248,0.4);
}

/* right */
.ceo-right{
    flex:1;
    text-align:left;
}

/* name */
.ceo-right h3{
    font-family:'Orbitron', sans-serif;
    margin-bottom:10px;
}

/* quote highlight */
.quote{
    font-family:'Fira Code', monospace;
    font-size:16px;
    margin-bottom:10px;

    color:#38bdf8;
    letter-spacing:1px;
}

/* description */

.footer{
    background:#020617;
    padding:50px 20px 20px;
    margin-top:20px;
}

/* container */
.footer-container{
    max-width:1100px;
    margin:auto;

    display:flex;
    flex-wrap:wrap;
    gap:30px;
    justify-content:space-between;
    align-items:flex-start; /* 🔥 important */
}

/* brand */
.footer-brand{
    max-width:300px;
}

.footer-brand p{
    margin-top:10px;
    font-size:14px;
    opacity:0.7;
}
html{
    scroll-behavior:smooth;
}
/* links */
.footer-links{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.footer-links h4{
    margin-bottom:10px;
    font-family:'Orbitron', sans-serif;
}

.footer-links a{
    text-decoration:none;
    color:#94a3b8;
    font-size:14px;
    transition:0.3s;
}

.footer-links a:hover{
    color:#38bdf8;
}

/* bottom */
.footer-bottom{
    text-align:center;
    margin-top:30px;
    font-size:13px;
    opacity:0.6;
}
.socials{
    margin-top:15px;
    display:flex;
    gap:15px;
}

.socials a{
    color:#94a3b8;
    font-size:18px;
    transition:0.3s;
}

/* hover glow */
.socials a:hover{
    color:#38bdf8;
    transform:translateY(-3px) scale(1.1);
}
@media(max-width:768px){

    .footer-container{
        flex-direction:column;
        align-items:center;
        text-align:center;
    }

    .footer-links{
        align-items:center;
    }

    .footer-brand{
        align-items:center;
    }

    .socials{
        justify-content:center;
    }
}
.footer-links h4{
    margin-bottom:12px;
}

.footer-links a{
    margin:2px 0;
}
@media(max-width:768px){

    .ceo-card{
        flex-direction:column;   /* 🔥 stack */
        align-items:center;
        text-align:center;
    }

    .ceo-left{
        width:100%;
        display:flex;
        justify-content:center;  /* 🔥 center image */
    }

    .ceo-left img{
        width:180px;   /* slightly smaller for mobile */
        height:240px;
    }

    .ceo-right{
        text-align:center;  /* 🔥 center text */
    }
}
.contact{
    padding:50px 20px;
    text-align:center;
}

/* heading same style */
.contact h2{
    font-family:'Montserrat', sans-serif;
    font-size:clamp(22px,4vw,32px);
    letter-spacing:3px;
    margin-bottom:25px;

    background:linear-gradient(90deg,#38bdf8,#818cf8,#38bdf8);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

    animation:shine 4s linear infinite;
}

/* form */
.contact-form{
    max-width:500px;
    margin:auto;

    display:flex;
    flex-direction:column;
    gap:15px;
}

/* inputs */
.contact-form input{
    padding:12px;
    border:none;
    outline:none;

    background:#111;
    color:#fff;

    border-radius:6px;
    font-size:16px;
}

/* button */
.contact-form button{
      font-family:'Orbitron', sans-serif;  /* 🔥 futuristic */

    padding:12px;
    border:none;
    cursor:pointer;

    background:linear-gradient(90deg,#38bdf8,#818cf8);
    color:#fff;
    border-radius:6px;

    transition:0.3s;
}

.contact-form button:hover{
    transform:scale(1.05);
}
/* popup background */
.popup{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.8);
    display:flex;
    justify-content:center;
    align-items:center;

    opacity:0;
    pointer-events:none;
    transition:0.3s;
    z-index:2000;
}

.popup.show{
    opacity:1;
    pointer-events:auto;
}

/* box */
.popup-box{
    position:relative;
    width:320px;
    padding:35px 25px;

    border-radius:16px;

    /* 🔥 upgraded background */
    background:linear-gradient(145deg,#0f172a,#020617);

    text-align:center;
    overflow:hidden;

    /* ✨ better shadow */
    box-shadow:
        0 10px 30px rgba(0,0,0,0.7),
        0 0 20px rgba(56,189,248,0.15);

    /* 🔥 smooth popup animation */
    transform:translateY(30px) scale(0.9);
    opacity:0;
    transition:0.35s ease;
}

/* animate on open */
.popup.show .popup-box{
    transform:translateY(0) scale(1);
    opacity:1;
}
/* blast animation */

/* particles container */
.blast{
    position:absolute;
    inset:0;
    overflow:hidden;
    pointer-events:none;
}

/* particles */
.blast span{
    position:absolute;
    width:6px;
    height:6px;
    background:#38bdf8;
    opacity:1;
    border-radius:2px;

    transition:0.8s ease-out; /* 🔥 IMPORTANT */
}

/* random directions */
.blast span:nth-child(1){ left:0; top:50%; animation-delay:0s; }
.blast span:nth-child(2){ right:0; top:40%; animation-delay:0.05s; }
.blast span:nth-child(3){ left:10%; top:0; animation-delay:0.1s; }
.blast span:nth-child(4){ right:10%; bottom:0; animation-delay:0.15s; }
.blast span:nth-child(5){ left:50%; top:0; animation-delay:0.2s; }
.blast span:nth-child(6){ left:50%; bottom:0; animation-delay:0.25s; }


@keyframes blastAnim{
    from{
        transform:scale(0);
        opacity:0.8;
    }
    to{
        transform:scale(2);
        opacity:0;
    }
}

/* text */
.popup-box h3{
    margin-bottom:10px;
    color:#38bdf8;
}

.popup-box p{
    font-size:14px;
    opacity:0.8;
}

/* button */
.popup-box button{
    margin-top:15px;
    padding:10px 20px;
    border:none;
    cursor:pointer;
    border-radius:6px;

    background:linear-gradient(90deg,#38bdf8,#818cf8);
    color:#fff;
}
/* brand container */
.popup-brand{
    display:flex;
    flex-direction:column;
    align-items:center;
    margin-bottom:10px;
}

/* CEZONAL */
.p-line1{
    font-family:'Orbitron', sans-serif;
    font-size:16px;
    letter-spacing:3px;

    background:linear-gradient(90deg,#38bdf8,#818cf8);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

    text-shadow:0 0 8px rgba(56,189,248,0.4);
}

/* TECHNOLOGIES */
.p-line2{
    font-family:'Orbitron', sans-serif;
    font-size:10px;
    letter-spacing:5px;
    color:#fff;
    opacity:0.8;
}
/* ===== ULTRA SMOOTH FLOW ===== */
.premium{
    position:relative;
      padding:35px 20px; /* 🔽 tighter *//* 🔥 reduced from 120px */
    text-align:center;
    background:transparent;
}

.premium + .premium{
    margin-top:-10px; /* small overlap */
}
/* 🔥 soft light (smaller so no heavy feel) */
.premium::before{
    content:"";
    position:absolute;
    inset:0; /* 🔥 full coverage */

    background:
        radial-gradient(circle at 50% 0%,
            rgba(56,189,248,0.20),
            transparent 60%
        ),
        radial-gradient(circle at 50% 100%,
            rgba(59,130,246,0.15),
            transparent 70%
        );

    filter:blur(80px);
    z-index:0;
}

/* heading */
.premium h2{
    position:relative;
    z-index:1;

    font-size:clamp(28px,5vw,42px); /* 🔽 slightly smaller */
    margin-bottom:10px; /* 🔽 reduced */

    opacity:0;
    transform:translateY(30px);
    animation:premiumFade 0.8s ease forwards;
}

/* paragraph */
.premium p{
    position:relative;
    z-index:1;

    max-width:650px;
    margin:auto;

    font-size:15px;
    line-height:1.7;

    opacity:1;              /* ✅ remove fade conflict */
    transform:none;         /* ✅ remove transform */
}

/* animation */
@keyframes premiumFade{
    to{
        opacity:1;
        transform:translateY(0);
    }
}
/* ===== VISION (RED / PINK + TECH FONT) ===== */
.vision-sec h2{
    font-family:'Bebas Neue', sans-serif !important;
    letter-spacing:3px;

    color:#fb7185;
    text-shadow:0 0 10px rgba(251,113,133,0.6);
}

.vision-sec p{
    font-family:'Fira Code', monospace;
    letter-spacing:1px;

    color:#fda4af;
}


/* ===== SOLUTIONS (ORANGE + CLEAN FONT) ===== */
.solution-sec h2{
    font-family:'Bebas Neue', sans-serif !important;
    letter-spacing:3px;

    color:#f97316;
    text-shadow:0 0 10px rgba(249,115,22,0.6);
}
.solution-sec p{
     font-family:'Fira Code', monospace !important;

    color:#fdba74;
}


/* ===== CTA (GREEN + PREMIUM FONT) ===== */
.cta-sec h2{
      font-family:'Bebas Neue', sans-serif !important;
    letter-spacing:3px;

    color:#22c55e;
    text-shadow:0 0 10px rgba(34,197,94,0.6);
}

.cta-sec p{
    font-family:'Fira Code', monospace !important;
    font-weight:500;
    letter-spacing:1px;
    color:#86efac;
}
/* 🔥 UP ENTRY ANIMATION */
.premium h2,
.premium p{
    opacity:0;
    transform:translateY(60px);
    transition:0.8s ease;
}

/* when visible */
.premium.show h2{
    opacity:1;
    transform:translateY(0);
}

.premium.show p{
    opacity:1;
    transform:translateY(0);
    transition-delay:0.2s; /* 🔥 little delay */
}
/* HANGER CONTAINER */
.hanger{
    position:relative;
    display:inline-block;
    margin-top:20px;

    /* 🔥 smooth performance */
    transform:translateZ(0);
}

/* 🪵 WOOD BUTTON */
.btn.swing{
    position:relative;

    background:linear-gradient(145deg,#9b6b3f,#5a3b1c);
    border:none;
    color:#fff;
    padding:14px 32px;
    font-weight:bold;
    border-radius:8px;

    /* wood depth */
    box-shadow:
        inset 0 2px 4px rgba(255,255,255,0.2),
        inset 0 -3px 6px rgba(0,0,0,0.6),
        0 6px 12px rgba(0,0,0,0.6);

    transform-origin:top center;

    /* 🚀 smooth animation fix */
    will-change:transform;
    backface-visibility:hidden;

    animation:swingSmooth 2.5s cubic-bezier(0.45,0.05,0.55,0.95) infinite;
}

/* 🔩 SCREW INSIDE BUTTON (FIXED POSITION) */
.btn.swing::before{
    content:"";
    position:absolute;

    top:-8px;   /* 🔥 move screw UP outside */
    left:50%;
    transform:translateX(-50%);

    width:16px;
    height:16px;
    border-radius:50%;

    background:radial-gradient(circle at 30% 30%, #d2a679, #8b5a2b 70%);

    box-shadow:
        inset -2px -2px 4px rgba(0,0,0,0.6),
        inset 2px 2px 3px rgba(255,255,255,0.3),
        0 2px 4px rgba(0,0,0,0.8);
}

/* screw cross */
.btn.swing::after{
    content:"";
    position:absolute;

    top:-1px;   /* 🔥 adjust with screw */
    left:50%;
    transform:translateX(-50%);

    width:10px;
    height:2px;
    background:#3b2a1a;

    box-shadow:0 -4px 0 #3b2a1a;
}
.btn.swing{
    font-family:'Fira Code', monospace;
    letter-spacing:1px;
}

/* 🔄 ULTRA SMOOTH SWING */
@keyframes swingSmooth{
    0%   { transform:rotate(0deg); }
    20%  { transform:rotate(4deg); }
    40%  { transform:rotate(-4deg); }
    60%  { transform:rotate(3deg); }
    80%  { transform:rotate(-3deg); }
    100% { transform:rotate(0deg); }
}
.logo img{
    width:140px;
    height:auto;
    object-fit:contain;

    margin-bottom:6px; /* 🔥 space between image & text */

    filter:drop-shadow(0 0 8px rgba(56,189,248,0.5));

    transition:0.3s;
}
/* LOGO CONTAINER */
.logo{
    display:flex;
    flex-direction:column;   /* 🔥 stack items vertically */
    align-items:center;      /* 🔥 center horizontally */
    justify-content:center;
    text-align:center;
}
.logo img:hover{
    transform:scale(1.05);
}
.subscribe-form{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:12px;
}

/* INPUT FIELD */
.subscribe-form input{
  padding:12px 14px;
  border-radius:10px;

  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);

  color:#fff;
  font-size:16px;   /* 🔥 FIX: prevents mobile zoom */

  outline:none;

  transition:all 0.25s ease;
}

/* 🔥 FOCUS (NO ZOOM, ONLY CLEAN EFFECT) */
.subscribe-form input:focus{
  border-color:#fff;
  background:rgba(255,255,255,0.08);

  box-shadow:0 0 0 2px rgba(255,255,255,0.1);
}
.subscribe-form input::placeholder{
  font-family:'Fira Code', monospace;  /* 🔥 tech style */
  font-size:14px;
  letter-spacing:1px;
  color:#bbb;
}

/* PLACEHOLDER */
.subscribe-form input::placeholder{
  color:#aaa;
  transition:0.3s;
}

/* hide placeholder on focus */
.subscribe-form input:focus::placeholder{
  opacity:0.5;
}

/* BUTTON */
.subscribe-form button{
  padding:12px;
  border-radius:10px;
  border:1px solid #fff;

  background:transparent;
  color:#fff;

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

  cursor:pointer;
  transition:all 0.25s ease;
}

/* 🔥 HOVER */
.subscribe-form button:hover{
  background:#fff;
  color:#000;
  transform:translateY(-2px);
}

/* CLICK */
.subscribe-form button:active{
  transform:scale(0.96);
}

/* OPTIONAL: subtle glow on hover container */
.subscribe-form:hover input{
  border-color:rgba(255,255,255,0.2);
}
/* button container */
#subBtn{
  position:relative;
  overflow:hidden;
}

/* confetti container */
.confetti{
  position:absolute;
  inset:0;
  pointer-events:none;
}

/* particles */
.confetti span{
  position:absolute;
  width:6px;
  height:10px;
  border-radius:2px;
  transform:rotate(45deg);

  animation:explode 1s ease-out infinite; /* 🔥 repeat */
}

/* animation */
@keyframes explode{
  from{
    transform:translate(0,0) scale(1);
    opacity:1;
  }
  to{
    transform:translate(var(--x), var(--y)) scale(0.5);
    opacity:0;
  }
}
.confetti span{
  position:absolute;
  width:6px;
  height:10px;
  border-radius:2px;
  transform:rotate(45deg);
  opacity:0;

  animation:explode 1s ease-out;
}
/* normal already you have */

/* 🔥 when subscribed */
#subBtn.active{
  background:#fff;
  color:#000;
  border-color:#fff;
}
/* input text style */
.contact-form input{
  font-family:'Fira Code', monospace;   /* 🔥 tech style */
  letter-spacing:1px;
}

/* placeholder style */
.contact-form input::placeholder{
  font-family:'Orbitron', sans-serif;   /* 🔥 stylish futuristic */
  font-size:13px;
  letter-spacing:1.5px;
  color:#aaa;
}
.card{
    position:relative;
    overflow:hidden;
}

/* 🔥 glow layer */
.card::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:16px;

    background:radial-gradient(
        250px circle at var(--x,50%) var(--y,50%),
        rgba(56,189,248,0.25),
        transparent 60%
    );

    opacity:0;
    transition:0.3s;
}

/* show on hover */
.card:hover::after{
    opacity:1;
}
.popup-box h3{
    font-family:'Anton', sans-serif;  /* 🔥 BIG & HEAVY */
    font-size:28px;
    letter-spacing:2px;
}

.popup-box p{
    font-family:'Oswald', sans-serif; /* 🔥 strong but readable */
    font-size:15px;
    letter-spacing:1px;
    opacity:0.85;
}
.popup-box h3{
    text-transform:uppercase;
    text-shadow:0 0 12px rgba(56,189,248,0.7);
}