/*================================================== VEYA AI PREMIUM DESIGN SYSTEM PART 1 ==================================================*/
 :root{
    /* BACKGROUND */
    --bg: #040914;
    --bg-soft: #07101E;
    --surface: #0C1627;
    --surface-light: #14213A;
    /* BRAND */
     --primary:#4D3DCF;
     --accent:#6D5DF6;
     --purple:#7C3AED;
     --violet:#A855F7;
    /* TEXT */
     --text:rgba(255,255,255,.92);
     --text-soft:rgba(255,255,255,.65);
     --text-muted:rgba(255,255,255,.45);
    /* UI */
     --border:rgba(255,255,255,.10);
     --glass:rgba(255,255,255,.06);
}
/*================================================== RESET ==================================================*/
 *{
     margin:0;
     padding:0;
     box-sizing:border-box;
}
 html{
     scroll-behavior:smooth;
}
 body{
     background:var(--bg);
     color:var(--text);
     font-family: "Inter", sans-serif;
     overflow-x:hidden;
}
 a{
     text-decoration:none;
     color:inherit;
}
 p{
     color:var(--text-soft);
     font-size:17px;
     line-height:1.8;
}
 img{
     max-width:100%;
     display:block;
}
 .container{
     width:min(1200px,90%);
     margin:auto;
}
/*================================================== BACKGROUND EFFECTS ==================================================*/
 .grid-bg{
     position:fixed;
     inset:0;
     z-index:-5;
     background-image: linear-gradient( rgba(255,255,255,.025) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,.025) 1px, transparent 1px );
     background-size: 70px 70px;
     mask-image: radial-gradient( circle, black, transparent 75% );
}
 .cursor-glow{
     position:fixed;
     width:500px;
     height:500px;
     border-radius:50%;
     background: radial-gradient( circle, rgba(109,93,246,.18), transparent 70% );
     pointer-events:none;
     transform: translate(-50%,-50%);
     z-index:-2;
}
 .aurora{
     position:fixed;
     width:700px;
     height:700px;
     border-radius:50%;
     filter:blur(120px);
     opacity:.35;
     z-index:-3;
}
 .aurora-one{
     background:#6D5DF6;
     top:-300px;
     left:-200px;
}
 .aurora-two{
     background:#A855F7;
     bottom:-300px;
     right:-200px;
}
/*================================================== NAVBAR ==================================================*/
 header{
     position:fixed;
     top:0;
     width:100%;
     z-index:100;
     backdrop-filter:blur(20px);
}
 .navbar{
     height:90px;
     display:flex;
     align-items:center;
     justify-content:space-between;
}
 .brand{
     display:flex;
     align-items:center;
     gap:12px;
     font-size:22px;
     font-weight:700;
}
 .brand img{
     width:42px;
}
 .nav-links{
     display:flex;
     gap:40px;
     color:var(--text-soft);
}
 .nav-links a{
     transition:.3s;
}
 .nav-links a:hover{
     color:white;
}
 .nav-button{
     padding:13px 25px;
     border-radius:100px;
     background: linear-gradient( 135deg, var(--primary), var(--violet) );
}
/*================================================== HERO ==================================================*/
 .hero{
     min-height:100vh;
     display:grid;
     grid-template-columns: 1fr 1fr;
     align-items:center;
     gap:50px;
     padding-top:120px;
}
 .hero-badge{
     display:inline-flex;
     padding:10px 18px;
     border-radius:50px;
     background: rgba(109,93,246,.12);
     border: 1px solid rgba(109,93,246,.3);
     color:#C4B5FD;
     margin-bottom:30px;
}
 .hero h1{
     font-size: clamp(60px,7vw,100px);
     line-height:1;
     letter-spacing:-4px;
}
 .hero h1 span{
     display:block;
     background: linear-gradient( 90deg, #FFFFFF, #A855F7 );
     -webkit-background-clip:text;
     color:transparent;
}
 .hero-content p{
     max-width:560px;
     margin-top:25px;
     line-height:1.7;
}
/*================================================== APP STORE BUTTON ==================================================*/
 .appstore-btn{
     display:inline-flex;
     align-items:center;
     margin-top:35px;
     transition:.35s ease;
}
 .appstore-btn img{
     width:180px;
     height:auto;
}
 .appstore-btn:hover{
     transform: translateY(-5px);
     filter: drop-shadow( 0 15px 30px rgba(0,0,0,.35) );
}
/*================================================== HERO STATS ==================================================*/
 .hero-stats{
     display:flex;
     gap:70px;
     margin-top:55px;
}
 .hero-stats div{
     display:flex;
     flex-direction:column;
     gap:8px;
}
 .hero-stats strong{
     font-size:38px;
     font-weight:800;
     background: linear-gradient( 135deg, #6D5DF6, #A855F7 );
     -webkit-background-clip:text;
     color:transparent;
}
 .hero-stats span{
     color:var(--text-muted);
     font-size:14px;
}
/*================================================== PHONE HERO VISUAL ==================================================*/
 .hero-visual{
     position:relative;
     height:650px;
     display:flex;
     justify-content:center;
     align-items:center;
}
 .phone{
     position:relative;
     z-index:2;
}
 .phone img{
     width:360px;
     border-radius:45px;
     border: 1px solid rgba(255,255,255,.15);
     box-shadow: 0 60px 120px rgba(0,0,0,.6), 0 0 80px rgba(109,93,246,.35);
}
 .ai-orb{
     position:absolute;
     width:500px;
     height:500px;
     border-radius:50%;
     background: radial-gradient( circle, rgba(109,93,246,.5), transparent 65% );
     filter:blur(25px);
}
 .assistant-card{
     position:absolute;
     z-index:3;
     width:230px;
     padding:18px;
     display:flex;
     align-items:center;
     gap:15px;
     border-radius:22px;
     background: rgba(255,255,255,.08);
     backdrop-filter:blur(25px);
     border: 1px solid var(--border);
     animation: floatCard 6s ease-in-out infinite;
}
 .assistant-card strong{
     display:block;
     font-size:16px;
}
 .assistant-card span{
     display:block;
     margin-top:4px;
     font-size:13px;
     color:var(--text-muted);
}
 .card-one{
     top:100px;
     left:20px;
}
 .card-two{
     right:0;
     top:260px;
     animation-delay:1.5s;
}
 .card-three{
     bottom:100px;
     left:80px;
     animation-delay:3s;
}
/*================================================== COMMON SECTION ==================================================*/
 .section{
     padding:130px 0;
}
 .section-heading{
     text-align:center;
     max-width:800px;
     margin: 0 auto 70px;
}
 .section-heading span{
     color:#A855F7;
     letter-spacing:3px;
     font-size:14px;
     font-weight:600;
}
 .section-heading h2{
     font-size:60px;
     line-height:1.1;
     letter-spacing:-2px;
     margin:20px 0;
}
/*================================================== AI TEAM CARDS ==================================================*/
 .assistant-grid{
     display:grid;
     grid-template-columns: repeat(4,1fr);
     gap:25px;
}
 .assistant-box{
     padding:35px;
     border-radius:30px;
     background: var(--glass);
     border: 1px solid var(--border);
     backdrop-filter:blur(25px);
     transition:.35s;
}
 .assistant-box:hover{
     transform: translateY(-10px);
     border-color: rgba(168,85,247,.5);
}
 .assistant-box h3{
     font-size:22px;
     margin-bottom:15px;
}
 .assistant-box p{
     font-size:15px;
}
/*================================================== AI ASSISTANT SHOWCASE ==================================================*/
 .assistant-showcase{
     display:grid;
     grid-template-columns: 1fr 1fr;
     align-items:center;
     gap:80px;
     padding:120px 0;
}
 .showcase-content span{
     color:#A855F7;
     letter-spacing:3px;
     font-size:14px;
}
 .showcase-content h2{
     font-size:60px;
     line-height:1.1;
     letter-spacing:-2px;
     margin:20px 0;
}
 .showcase-list{
     margin-top:40px;
     display:grid;
     grid-template-columns: repeat(2,1fr);
     gap:15px;
}
 .showcase-list div{
     padding:18px;
     border-radius:18px;
     background: rgba(255,255,255,.06);
     border: 1px solid rgba(255,255,255,.1);
     transition:.3s;
}
 .showcase-list div:hover{
     background: rgba(109,93,246,.18);
}
 .showcase-device{
     position:relative;
     display:flex;
     justify-content:center;
     align-items:center;
}
 .showcase-device img{
     width:350px;
     max-width:100%;
     border-radius:45px;
     position:relative;
     z-index:2;
     box-shadow:0 40px 100px rgba(0,0,0,.5);
}
 .device-glow{
     position:absolute;
     right:20px;
     top:50%;
     width:380px;
     height:380px;
     transform:translateY(-50%);
     border-radius:50%;
     background:#6D5DF6;
     filter:blur(100px);
     opacity:.6;
}
/*================================================== PRIVACY SECTION ==================================================*/
 .privacy-ai{
     padding:120px 0;
}
 .privacy-card{
     padding:90px 40px;
     text-align:center;
     border-radius:50px;
     background: linear-gradient( 135deg, rgba(109,93,246,.25), rgba(168,85,247,.15) );
     border: 1px solid rgba(255,255,255,.12);
}
 .privacy-icon{
     font-size:60px;
}
 .privacy-card h2{
     font-size:60px;
     line-height:1.1;
     margin:25px 0;
}
 .privacy-card p{
     max-width:700px;
     margin:auto;
}
 .privacy-features{
     display:flex;
     justify-content:center;
     gap:30px;
     margin-top:40px;
}
 .privacy-features div{
     padding:18px 35px;
     border-radius:20px;
     background: rgba(255,255,255,.08);
     border: 1px solid rgba(255,255,255,.08);
}
/*================================================== EXPERIENCE SCREEN GALLERY ==================================================*/
 .experience{
     padding:120px 0;
}
 .screens-gallery{
     display:flex;
     justify-content:center;
     align-items:flex-start;
     gap:45px;
}
 .screen-card{
     flex:1;
     min-height:520px;
     display:flex;
     justify-content:center;
     align-items:center;
     padding:15px;
     border-radius:35px;
     background: rgba(255,255,255,.05);
     border: 1px solid rgba(255,255,255,.1);
     transition:.4s;
}
 .screen-card:hover{
     transform: translateY(-15px);
}
 .screen-card img{
     width:100%;
     max-width:300px;
     border-radius:30px;
     box-shadow: 0 40px 80px rgba(0,0,0,.45);
}
/*================================================== WHY VEYA COMPARISON ==================================================*/
 .comparison{
     padding:120px 0;
}
 .comparison .section-heading{
     margin-bottom:80px;
}
 .compare-grid{
     display:grid;
     grid-template-columns: 1fr 1fr;
     gap:40px;
}
 .compare-box{
     min-height:360px;
     padding:45px;
     border-radius:35px;
     background: rgba(255,255,255,.05);
     border: 1px solid rgba(255,255,255,.1);
     display:flex;
     flex-direction:column;
     justify-content:center;
     gap:18px;
     transition:.35s;
}
 .compare-box:hover{
     transform: translateY(-8px);
}
 .compare-box.highlight{
     background: linear-gradient( 135deg, rgba(109,93,246,.25), rgba(168,85,247,.25) );
     border: 1px solid rgba(168,85,247,.5);
     box-shadow: 0 30px 80px rgba(109,93,246,.18);
}
 .compare-box h3{
     font-size:32px;
     margin-bottom:20px;
}
 .compare-item{
     display:flex;
     align-items:center;
     gap:12px;
     color:var(--text-soft);
     font-size:16px;
}
 .compare-item::before{
     content:"✓";
     color:#A855F7;
     font-weight:700;
}
 .old .compare-item::before{
     content:"•";
     color:#94A3B8;
}
/*================================================== CREATE YOUR OWN AI BUILDER ==================================================*/
 .builder-section{
     display:grid;
     grid-template-columns: 1fr 1fr;
     align-items:center;
     gap:80px;
     padding:140px 0;
}
 .builder-text span{
     color:#A855F7;
     letter-spacing:3px;
     font-size:14px;
     font-weight:600;
}
 .builder-text h2{
     font-size:60px;
     line-height:1.1;
     letter-spacing:-2px;
     margin:20px 0;
}
 .builder-card{
     position:relative;
     overflow:hidden;
     padding:45px;
     border-radius:35px;
     background: linear-gradient( 145deg, rgba(255,255,255,.10), rgba(255,255,255,.03) );
     border: 1px solid var(--border);
}
 .builder-card::before{
     content:"";
     position:absolute;
     width:300px;
     height:300px;
     right:-120px;
     top:-120px;
     background:#6D5DF6;
     filter:blur(120px);
     opacity:.35;
}
 .builder-row{
     position:relative;
     margin-bottom:28px;
}
 .builder-row span{
     display:block;
     color:#94A3B8;
     font-size:14px;
     margin-bottom:8px;
}
 .builder-row h3{
     font-size:22px;
}
 .builder-row p{
     padding:18px;
     border-radius:15px;
     background: rgba(255,255,255,.06);
     font-size:15px;
}
 .builder-card button{
     position:relative;
     width:100%;
     margin-top:20px;
     padding:16px;
     border:0;
     border-radius:16px;
     background: linear-gradient( 135deg, #6D5DF6, #A855F7 );
     color:white;
     font-size:16px;
     font-weight:600;
     cursor:pointer;
     transition:.3s;
}
 .builder-card button:hover{
     transform: translateY(-4px);
}
/*================================================== DOWNLOAD SECTION ==================================================*/
 .download-section{
     padding:130px 0;
}
 .download-box{
     text-align:center;
     padding:90px 40px;
     border-radius:50px;
     background: linear-gradient( 135deg, #4D3DCF, #A855F7 );
     position:relative;
     overflow:hidden;
}
 .download-box::before{
     content:"";
     position:absolute;
     width:400px;
     height:400px;
     background:white;
     opacity:.12;
     filter:blur(120px);
     top:-200px;
     left:-100px;
}
 .download-box h2{
     position:relative;
     font-size:60px;
     line-height:1.1;
     margin-bottom:20px;
}
 .download-box p{
     position:relative;
     color: rgba(255,255,255,.75);
     margin-bottom:25px;
}
 .download-box .appstore-btn{
     position:relative;
}
/*================================================== FOOTER ==================================================*/
 footer{
     padding:60px 0 30px;
     border-top: 1px solid var(--border);
}
 .footer{
     display:flex;
     justify-content:space-between;
     align-items:flex-start;
}
 .footer img{
     width:50px;
     margin-bottom:15px;
}
 .footer h3{
     font-size:22px;
     margin-bottom:10px;
}
 .footer a{
     display:block;
     margin-bottom:15px;
     color:var(--text-soft);
     transition:.3s;
}
 .footer a:hover{
     color:white;
}
 .copyright{
     text-align:center;
     margin-top:50px;
     color:var(--text-muted);
     font-size:14px;
}
/*================================================== GLOBAL ANIMATIONS ==================================================*/
 @keyframes floatCard{
     0%, 100%{
         transform:translateY(0);
    }
     50%{
         transform:translateY(-15px);
    }
}
 @keyframes glowPulse{
     0%{
         opacity:.5;
    }
     50%{
         opacity:1;
    }
     100%{
         opacity:.5;
    }
}
 .ai-orb{
     animation: glowPulse 5s ease-in-out infinite;
}
/*================================================== LEGAL / CONTACT PAGES ==================================================*/
 .legal-page{
     padding-top:160px;
     padding-bottom:120px;
}
 .section-title{
     text-align:center;
     max-width:800px;
     margin:0 auto 70px;
}
 .section-title span{
     color:#A855F7;
     letter-spacing:3px;
     font-size:14px;
     font-weight:600;
}
 .section-title h1{
     font-size:64px;
     line-height:1.1;
     margin:20px 0;
     letter-spacing:-2px;
}
 .section-title p{
     font-size:20px;
     color:var(--text-soft);
}
/* LEGAL CARD */
 .legal-card{
     max-width:900px;
     margin:auto;
     padding:60px;
     border-radius:40px;
     background: linear-gradient( 145deg, rgba(255,255,255,.08), rgba(255,255,255,.03) );
     border: 1px solid rgba(255,255,255,.10);
     backdrop-filter:blur(30px);
     box-shadow: 0 40px 100px rgba(0,0,0,.35);
}
 .legal-card h2{
     font-size:32px;
     margin-top:40px;
     margin-bottom:20px;
}
 .legal-card h2:first-child{
     margin-top:0;
}
 .legal-card p{
     color:var(--text-soft);
     line-height:1.8;
}

.legal-card ul{
    margin:20px 0 30px;
    padding-left:25px;
}

.legal-card li{
    color:var(--text-soft);
    font-size:15px;
    line-height:1.3;
    margin-bottom:12px;
}


/* CONTACT BOX */
 .contact-box{
     margin:40px 0;
     padding:35px;
     border-radius:25px;
     background: rgba(109,93,246,.12);
     border: 1px solid rgba(168,85,247,.25);
}
 .contact-box h3{
     font-size:22px;
     margin-bottom:15px;
}
 .contact-box a{
     display:inline-block;
     color:#C4B5FD;
     font-size:20px;
     font-weight:600;
     margin-bottom:20px;
}
 .contact-box ul{
     margin-top:20px;
     padding-left:20px;
}
 .contact-box li{
     margin-bottom:12px;
     color:var(--text-soft);
}
/* FOOTER LOGO */
 .footer-logo{
     width:50px;
     margin-bottom:15px;
}
/*================================================== MOBILE ==================================================*/
 @media(max-width:768px){
     .legal-page{
         padding-top:120px;
    }
     .section-title h1{
         font-size:42px;
    }
     .section-title p{
         font-size:17px;
    }
     .legal-card{
         padding:30px;
         border-radius:25px;
    }
     .legal-card h2{
         font-size:26px;
    }
     .contact-box{
         padding:25px;
    }
}