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

html,
body{
overflow-x:hidden;
max-width:100%;
}

body{
font-family:Arial,sans-serif;
color:#111827;
background:#fff;
}

img{
max-width:100%;
height:auto;
}

.navbar{
display:flex;
justify-content:space-between;
align-items:center;
padding:24px 6%;
border-bottom:1px solid #eee;
position:sticky;
top:0;
background:#fff;
z-index:999;
}

.logo-wrap{
display:flex;
align-items:center;
gap:15px;
}

.logo-wrap img,
.footer-brand img{
width:58px;
}

.logo-wrap h2,
.footer-brand h3{
font-size:32px;
font-weight:900;
}

.logo-wrap span,
.footer-brand span,
.hero h1 span,
.section-title h2 span,
.recent h2 span,
.why-left h2 span{
color:#6c3cff;
}

nav{
display:flex;
gap:28px;
align-items:center;
}

nav a,
.footer-links a,
.footer-bottom a{
text-decoration:none;
color:#111827;
font-weight:600;
}

/* =========================
   HAMBURGER MENU BUTTON
========================= */

.menu-toggle{
display:none;
width:44px;
height:44px;
flex-direction:column;
justify-content:center;
align-items:center;
gap:6px;
background:none;
border:none;
cursor:pointer;
padding:0;
z-index:1000;
}

.menu-toggle span{
display:block;
width:28px;
height:3px;
background:#111827;
border-radius:2px;
transition:transform .3s ease, opacity .3s ease;
}

.menu-toggle.active span:nth-child(1){
transform:translateY(9px) rotate(45deg);
}

.menu-toggle.active span:nth-child(2){
opacity:0;
}

.menu-toggle.active span:nth-child(3){
transform:translateY(-9px) rotate(-45deg);
}

.menu-overlay{
display:none;
position:fixed;
inset:0;
background:rgba(5,12,24,.45);
backdrop-filter:blur(4px);
opacity:0;
transition:opacity .3s ease;
z-index:997;
}

.menu-overlay.active{
display:block;
opacity:1;
}

.hero{
display:grid;
grid-template-columns:1fr 1fr;
gap:70px;
align-items:center;
padding:80px 6%;
}

.tag{
display:inline-block;
background:#efe8ff;
color:#6c3cff;
padding:10px 18px;
border-radius:999px;
font-size:14px;
font-weight:bold;
}

.hero h1{
font-size:72px;
line-height:1.05;
margin:25px 0;
}

.hero p{
font-size:20px;
line-height:1.7;
color:#555;
}

.hero-buttons{
display:flex;
gap:20px;
margin-top:35px;
}

.btn-primary,
.cta-btn{
background:linear-gradient(90deg,#18a8ff,#6c3cff);
color:#fff;
padding:14px 26px;
border-radius:10px;
text-decoration:none;
font-weight:700;
}

/* =========================
   SECONDARY BUTTONS
========================= */

.btn-secondary{
    position:relative;
    overflow:hidden;
    
    display:inline-flex;
    align-items:center;
    justify-content:center;
    
    padding:14px 26px;
    
    border:2px solid #6c3cff;
    border-radius:14px;
    
    text-decoration:none;
    
    color:#6c3cff;
    font-weight:700;
    
    background:#fff;
    
    transition:
    all .35s ease;
    
    z-index:1;
    }
    
    /* Animated Background */
    
    .btn-secondary::before{
    content:'';
    
    position:absolute;
    inset:0;
    
    background:
    linear-gradient(
    135deg,
    #19c6ff,
    #6c3cff
    );
    
    transform:translateX(-100%);
    transition:transform .35s ease;
    
    z-index:-1;
    }
    
    /* Hover */
    
    .btn-secondary:hover{
    
    color:#fff;
    
    transform:
    translateY(-4px)
    scale(1.03);

    
    border-color:transparent;
    }
    
    .btn-secondary:hover::before{
    transform:translateX(0%);
    }
    
    /* Click Effect */
    
    .btn-secondary:active{
    transform:
    translateY(-1px)
    scale(.98);
    }

.hero-points{
display:flex;
gap:30px;
margin-top:35px;
flex-wrap:wrap;
}

.point{
display:flex;
align-items:center;
gap:10px;
font-weight:600;
color:#666;
}

.dot{
width:12px;
height:12px;
border-radius:50%;
background:linear-gradient(90deg,#18a8ff,#6c3cff);
}

.hero-image img{
width:100%;
}

.features,
.process,
.why-us{
padding:100px 6%;
}

.section-title{
text-align:center;
margin-bottom:60px;
}

.section-title p{
color:#6c3cff;
font-weight:700;
margin-bottom:10px;
}

.section-title h2{
font-size:52px;
line-height:1.2;
max-width:950px;
margin:auto;
}

.feature-grid,
.process-grid{
display:grid;
gap:30px;
}

.feature-grid{
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
}

.process-grid{
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
}

.feature-card,
.process-card{
background:#fff;
padding:40px 30px;
border-radius:24px;
text-align:center;
position:relative;
}

.feature-card img,
.process-card img{
width:90px;
margin-bottom:20px;
}

.feature-card h3,
.process-card h3{
font-size:24px;
margin-bottom:15px;
}

.feature-card p,
.process-card p{
color:#666;
line-height:1.7;
}

.process{
background:#f7f4ff;
}

.number{
position:absolute;
top:-15px;
left:50%;
transform:translateX(-50%);
width:36px;
height:36px;
border-radius:50%;
background:#6c3cff;
color:#fff;
display:flex;
align-items:center;
justify-content:center;
font-weight:bold;
}

.recent{
display:grid;
grid-template-columns:350px 1fr;
gap:50px;
padding:100px 6%;
align-items:center;
}

.small{
color:#6c3cff;
font-weight:700;
margin-bottom:12px;
}

.recent h2,
.why-left h2{
font-size:56px;
line-height:1.1;
margin-bottom:25px;
}

.recent p,
.why-left p{
color:#666;
line-height:1.8;
margin-bottom:25px;
}

.recent{
    display:grid;
    grid-template-columns:380px 1fr;
    gap:70px;
    padding:120px 6%;
    align-items:center;
    }
    
    .recent-right{
    width:100%;
    }
    
    .recent-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(320px, 1fr));
    gap:35px;
    align-items:start;
    }
    
    .recent-card{
    background:#fff;
    border-radius:28px;
    overflow:hidden;
    
    transition:all .35s ease;
    position:relative;
    width:100%;
    }
    
    .recent-card:hover{
    transform:
    translateY(-10px)
    scale(1.02);
    }
    
    .browser-bar{
    height:46px;
    background:#f3f4f6;
    display:flex;
    align-items:center;
    gap:8px;
    padding:0 18px;
    border-bottom:1px solid #e5e7eb;
    }
    
    .browser-bar span{
    width:12px;
    height:12px;
    border-radius:50%;
    }
    
    .browser-bar span:nth-child(1){
    background:#ff5f57;
    }
    
    .browser-bar span:nth-child(2){
    background:#ffbd2e;
    }
    
    .browser-bar span:nth-child(3){
    background:#28c840;
    }
    
    .recent-card img{
    width:100%;
    display:block;
    transition:transform .5s ease;
    }
    
    .recent-card:hover img{
    transform:scale(1.04);
    }
    
    .recent-info{
    padding:28px;
    }
    
    .recent-info h3{
    font-size:28px;
    margin-bottom:12px;
    }
    
    .recent-info p{
    color:#666;
    line-height:1.7;
    margin:0;
    }
    
    @media(max-width:1100px){
    
    .recent{
    grid-template-columns:1fr;
    }
    
    .recent-grid{
    grid-template-columns:1fr;
    }
    
    }

.why-us{
display:grid;
grid-template-columns:1fr 1fr;
gap:70px;
align-items:center;
}

.tick-list{
display:flex;
flex-direction:column;
gap:25px;
margin-top:35px;
}

.tick-item{
display:flex;
gap:18px;
align-items:flex-start;
}

/* =========================
   CUSTOM TICK ICONS
========================= */

.tick-icon{
    flex-shrink:0;
    
    width:52px;
    height:52px;
    
    display:flex;
    align-items:center;
    justify-content:center;
    
    border-radius:16px;
    
    background:
    linear-gradient(
    135deg,
    rgba(25,198,255,.12),
    rgba(108,60,255,.12)
    );

    }
    
    .tick-icon img{
    width:26px;
    height:26px;
    object-fit:contain;
    
    filter:
    drop-shadow(0 4px 8px rgba(108,60,255,.2));
    }

.tick-item h4{
font-size:22px;
margin-bottom:6px;
}

.tick-item p{
margin:0;
}

.why-right img{
width:100%;
max-width:520px;
}

.cta{
background:linear-gradient(90deg,#071630,#6c3cff);
padding:60px 6%;
margin-top:80px;
}

.cta-inner{
display:flex;
justify-content:space-between;
align-items:center;
gap:30px;
}

.cta-inner img{
width:100px;
}

.cta-inner h2{
color:#fff;
font-size:52px;
margin-bottom:10px;
}

.cta-inner p{
color:#ddd;
font-size:20px;
}

footer{
background:#050c18;
padding:50px 6% 20px;
}

.footer-top{
display:flex;
justify-content:space-between;
align-items:center;
gap:40px;
padding-bottom:40px;
border-bottom:1px solid rgba(255,255,255,.08);
}

.footer-brand{
display:flex;
align-items:center;
gap:15px;
color:#fff;
}

.footer-links{
display:flex;
gap:25px;
flex-wrap:wrap;
}

.footer-links a{
color:#fff;
}

.footer-group{
color:#fff;
text-align:right;
}

.footer-bottom{
display:flex;
justify-content:space-between;
align-items:center;
padding-top:20px;
color:#888;
}

.footer-bottom a{
color:#888;
margin-left:20px;
}

@media(max-width:1100px){

.hero,
.why-us,
.recent{
grid-template-columns:1fr;
}

.hero h1,
.section-title h2,
.recent h2,
.why-left h2{
font-size:52px;
}

.footer-top,
.footer-bottom,
.cta-inner{
flex-direction:column;
text-align:center;
gap:25px;
}

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

/* =========================
   HERO LOTTIE EFFECTS
========================= */

.hero-image{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    perspective:1200px;
    }
    
    .hero-animation{
    position:relative;
    width:100%;
    max-width:900px;
    transition:transform .2s ease;
    }
    
    .hero-animation img{
    width:100%;
    position:relative;
    z-index:5;
    animation:heroFloat 6s ease-in-out infinite;
    filter:drop-shadow(0 25px 40px rgba(108,60,255,.25));
    }
    
    @keyframes heroFloat{
    0%{transform:translateY(0px);}
    50%{transform:translateY(-12px);}
    100%{transform:translateY(0px);}
    }
    
    /* Floating Cubes */
    
    .cube{
    position:absolute;
    background:linear-gradient(135deg,#19c6ff,#6c3cff);
    border:4px solid #111827;
    border-radius:10px;
    transform:rotate(20deg);
    animation:cubeFloat 7s ease-in-out infinite;
    z-index:1;
    }
    
    .cube1{
    width:42px;
    height:42px;
    top:70px;
    left:140px;
    }
    
    .cube2{
    width:26px;
    height:26px;
    top:180px;
    right:90px;
    animation-delay:1s;
    }
    
    .cube3{
    width:38px;
    height:38px;
    bottom:140px;
    left:80px;
    animation-delay:2s;
    }
    
    .cube4{
    width:50px;
    height:50px;
    bottom:80px;
    right:60px;
    animation-delay:3s;
    }
    
    .cube5{
    width:18px;
    height:18px;
    top:330px;
    left:30px;
    animation-delay:1.5s;
    }
    
    .cube6{
    width:22px;
    height:22px;
    top:420px;
    right:20px;
    animation-delay:2.5s;
    }
    
    @keyframes cubeFloat{
    0%{
    transform:translateY(0px) rotate(20deg);
    }
    50%{
    transform:translateY(-18px) rotate(35deg);
    }
    100%{
    transform:translateY(0px) rotate(20deg);
    }
    }
    
    /* Glow Particles */
    
    .particle{
    position:absolute;
    border-radius:50%;
    background:linear-gradient(135deg,#19c6ff,#6c3cff);
    animation:pulse 4s ease-in-out infinite;
    opacity:.8;
    }
    
    .p1{
    width:10px;
    height:10px;
    top:120px;
    left:420px;
    }
    
    .p2{
    width:14px;
    height:14px;
    top:260px;
    right:220px;
    animation-delay:1s;
    }
    
    .p3{
    width:8px;
    height:8px;
    bottom:180px;
    left:260px;
    animation-delay:2s;
    }
    
    .p4{
    width:12px;
    height:12px;
    bottom:110px;
    right:180px;
    animation-delay:3s;
    }
    
    @keyframes pulse{
    0%{
    transform:scale(1);
    opacity:.4;
    }
    50%{
    transform:scale(1.8);
    opacity:1;
    }
    100%{
    transform:scale(1);
    opacity:.4;
    }
    }
    /* =========================
   LOTTIE STYLE BUTTON
========================= */

.animated-btn{
    position:relative;
    overflow:hidden;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    isolation:isolate;
    transition:all .35s ease;
    }
    
    .animated-btn span{
    position:relative;
    z-index:5;
    }
    
    .animated-btn:hover{
    transform:translateY(-4px) scale(1.03);
    }
    
    /* Moving Glow */
    
    .btn-glow{
    position:absolute;
    top:-50%;
    left:-120%;
    width:80%;
    height:200%;
    background:linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.35),
    transparent
    );
    transform:rotate(20deg);
    animation:shine 4s linear infinite;
    z-index:2;
    }
    
    @keyframes shine{
    0%{
    left:-120%;
    }
    100%{
    left:140%;
    }
    }
    
    /* Floating Particles */
    
    .btn-particles span{
    position:absolute;
    width:6px;
    height:6px;
    border-radius:50%;
    background:#fff;
    opacity:.6;
    animation:floatParticle 3s ease-in-out infinite;
    }
    
    .btn-particles span:nth-child(1){
    top:10px;
    left:15px;
    animation-delay:0s;
    }
    
    .btn-particles span:nth-child(2){
    top:20px;
    right:20px;
    animation-delay:1s;
    }
    
    .btn-particles span:nth-child(3){
    bottom:10px;
    right:40px;
    animation-delay:2s;
    }
    
    @keyframes floatParticle{
    0%{
    transform:translateY(0px);
    opacity:.2;
    }
    50%{
    transform:translateY(-8px);
    opacity:1;
    }
    100%{
    transform:translateY(0px);
    opacity:.2;
    }
    }
    /* =========================
   PIXEL GROUP ANIMATION
========================= */

.pixel-animation{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    perspective:1200px;
    }
    
    .pixel-logo{
    width:100%;
    max-width:520px;
    position:relative;
    z-index:5;
    animation:pixelFloat 7s ease-in-out infinite;
    filter:drop-shadow(0 20px 35px rgba(108,60,255,.25));
    }
    
    @keyframes pixelFloat{
    0%{
    transform:translateY(0px) rotate(0deg);
    }
    50%{
    transform:translateY(-10px) rotate(1deg);
    }
    100%{
    transform:translateY(0px) rotate(0deg);
    }
    }
    
    /* Floating Shards */
    
    .pixel-shard{
    position:absolute;
    background:linear-gradient(135deg,#19c6ff,#6c3cff);
    border:3px solid #111827;
    border-radius:8px;
    transform:rotate(20deg);
    animation:shardFloat 6s ease-in-out infinite;
    z-index:1;
    }
    
    .shard1{
    width:34px;
    height:34px;
    top:40px;
    left:40px;
    }
    
    .shard2{
    width:18px;
    height:18px;
    top:160px;
    right:50px;
    animation-delay:1s;
    }
    
    .shard3{
    width:26px;
    height:26px;
    bottom:50px;
    left:60px;
    animation-delay:2s;
    }
    
    .shard4{
    width:40px;
    height:40px;
    bottom:30px;
    right:20px;
    animation-delay:3s;
    }
    
    @keyframes shardFloat{
    0%{
    transform:translateY(0px) rotate(20deg);
    }
    50%{
    transform:translateY(-16px) rotate(38deg);
    }
    100%{
    transform:translateY(0px) rotate(20deg);
    }
    }
    

    /* =========================
   LEGAL MODALS
========================= */

.legal-modal{
    position:fixed;
    inset:0;
    
    background:
    rgba(5,12,24,.7);
    
    backdrop-filter:blur(12px);
    
    display:flex;
    justify-content:center;
    align-items:center;
    
    padding:30px;
    
    opacity:0;
    visibility:hidden;
    
    transition:.35s ease;
    
    z-index:99999;
    }
    
    .legal-modal.active{
    opacity:1;
    visibility:visible;
    }
    
    .legal-modal-content{
    position:relative;
    
    width:100%;
    max-width:850px;
    
    max-height:85vh;
    overflow-y:auto;
    
    background:#fff;
    
    padding:60px;
    
    border-radius:32px;
    
    animation:modalPop .35s ease;
    }
    
    @keyframes modalPop{
    
    0%{
    transform:
    translateY(20px)
    scale(.95);
    
    opacity:0;
    }
    
    100%{
    transform:
    translateY(0)
    scale(1);
    
    opacity:1;
    }
    }
    
    .close-modal{
    position:absolute;
    top:20px;
    right:20px;
    
    width:48px;
    height:48px;
    
    border:none;
    border-radius:50%;
    
    background:#f3f4f6;
    
    font-size:28px;
    cursor:pointer;
    
    transition:.3s ease;
    }
    
    .close-modal:hover{
    background:#6c3cff;
    color:#fff;
    transform:rotate(90deg);
    }
    
    .legal-modal-content h2{
    font-size:58px;
    margin-bottom:25px;
    }
    
    .legal-modal-content h2 span{
    color:#6c3cff;
    }
    
    .legal-modal-content h3{
    font-size:28px;
    margin-top:35px;
    margin-bottom:12px;
    }
    
    .legal-modal-content p,
    .legal-modal-content li{
    font-size:18px;
    line-height:1.9;
    color:#555;
    }
    
    .legal-modal-content ul{
    padding-left:20px;
    margin-top:10px;
    }
    
    @media(max-width:768px){
    
    .legal-modal-content{
    padding:40px 25px;
    }
    
    .legal-modal-content h2{
    font-size:42px;
    }
    
    }
/* =========================
   MODAL SCROLLBAR
========================= */

.legal-modal-content::-webkit-scrollbar{
    width:10px;
    }
    
    .legal-modal-content::-webkit-scrollbar-track{
    background:#f3f4f6;
    border-radius:999px;
    }
    
    .legal-modal-content::-webkit-scrollbar-thumb{
    background:
    linear-gradient(
    180deg,
    #19c6ff,
    #6c3cff
    );
    
    border-radius:999px;
    }

/* =========================
   MOBILE - TABLET (<=1100px)
   Hamburger drawer kicks in
========================= */

@media(max-width:1100px){

.menu-toggle{
display:flex;
}

nav{
position:fixed;
top:0;
right:-100%;
width:80%;
max-width:340px;
height:100vh;
background:#fff;
flex-direction:column;
align-items:flex-start;
justify-content:flex-start;
gap:8px;
padding:100px 32px 40px;
box-shadow:-10px 0 40px rgba(0,0,0,.12);
transition:right .35s ease;
z-index:998;
overflow-y:auto;
}

nav.active{
right:0;
}

nav a{
width:100%;
padding:14px 4px;
font-size:18px;
border-bottom:1px solid #f0f0f5;
}

nav a:last-child{
margin-top:12px;
border-bottom:none;
background:linear-gradient(90deg,#18a8ff,#6c3cff);
color:#fff;
padding:14px 22px;
border-radius:10px;
text-align:center;
}

.hero{
padding:60px 6% 40px;
gap:40px;
}

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

.hero p{
font-size:18px;
}

/* Decorative floating cubes overflow on small screens - tone them down */
.cube5,
.cube6,
.p1,
.p2,
.p3,
.p4{
display:none;
}

.cta-inner{
text-align:center;
}

}

/* =========================
   MOBILE (<=768px)
========================= */

@media(max-width:768px){

.navbar{
padding:16px 5%;
}

.logo-wrap img,
.footer-brand img{
width:46px;
}

.logo-wrap h2,
.footer-brand h3{
font-size:24px;
}

.hero{
padding:40px 5% 30px;
gap:30px;
}

.tag{
font-size:12px;
padding:8px 14px;
}

.hero h1,
.section-title h2,
.recent h2,
.why-left h2{
font-size:38px;
line-height:1.15;
}

.hero p,
.recent p,
.why-left p{
font-size:16px;
}

.hero-buttons{
flex-direction:column;
gap:14px;
width:100%;
}

.hero-buttons .btn-primary,
.hero-buttons .btn-secondary,
.animated-btn,
.cta-btn{
width:100%;
text-align:center;
justify-content:center;
}

.hero-points{
gap:14px 20px;
margin-top:25px;
}

.point{
font-size:14px;
}

/* Hide remaining decorative cubes - they have hardcoded positions that overflow */
.cube,
.particle{
display:none;
}

.hero-animation img{
animation-duration:8s;
}

.features,
.process,
.why-us{
padding:60px 5%;
}

.section-title{
margin-bottom:40px;
}

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

.process-grid{
grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
gap:35px 20px;
}

.feature-card,
.process-card{
padding:32px 24px;
}

.feature-card img,
.process-card img{
width:72px;
margin-bottom:16px;
}

.feature-card h3,
.process-card h3{
font-size:20px;
}

.recent{
padding:60px 5%;
gap:35px;
}

.recent-info{
padding:22px;
}

.recent-info h3{
font-size:22px;
}

.tick-list{
margin-top:25px;
gap:20px;
}

.tick-icon{
width:44px;
height:44px;
border-radius:12px;
}

.tick-icon img{
width:22px;
height:22px;
}

.tick-item h4{
font-size:18px;
}

.pixel-shard{
display:none;
}

.cta{
padding:50px 5%;
margin-top:60px;
}

.cta-inner{
gap:20px;
}

.cta-inner img{
width:72px;
}

.cta-inner h2{
font-size:30px;
}

.cta-inner p{
font-size:16px;
}

footer{
padding:40px 5% 20px;
}

.footer-links{
gap:14px 20px;
justify-content:center;
}

.footer-bottom{
flex-direction:column;
gap:14px;
text-align:center;
font-size:13px;
}

.footer-legal{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:8px 16px;
}

.footer-bottom a{
margin-left:0;
}

}

/* =========================
   SMALL MOBILE (<=480px)
========================= */

@media(max-width:480px){

.logo-wrap h2,
.footer-brand h3{
font-size:20px;
}

.hero h1,
.section-title h2,
.recent h2,
.why-left h2{
font-size:30px;
}

.cta-inner h2{
font-size:24px;
}

.legal-modal{
padding:16px;
}

.legal-modal-content{
padding:32px 20px;
border-radius:22px;
max-height:90vh;
}

.legal-modal-content h2{
font-size:32px;
}

.legal-modal-content h3{
font-size:22px;
margin-top:25px;
}

.legal-modal-content p,
.legal-modal-content li{
font-size:16px;
line-height:1.7;
}

.close-modal{
width:40px;
height:40px;
font-size:24px;
top:14px;
right:14px;
}

nav{
width:90%;
}

}