/* ==========================================
   VIRTUAL GENIE AI
   VERSION 1.0
========================================== */

/* RESET */

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

html{
scroll-behavior:smooth;
}

body{

background:#050505;

color:#F5F5F5;

font-family:'Inter',sans-serif;

overflow-x:hidden;

line-height:1.7;

}

/* COLORS */

:root{

--bg:#050505;
--surface:#0D0D0D;
--surface2:#151515;

--primary:#4F8DFF;
--secondary:#7668FF;

--text:#F5F5F5;
--muted:#A5A5A5;

--border:rgba(255,255,255,.08);

}

/* CONTAINER */

.container{

width:min(92%,1200px);

margin:auto;

}

/* TYPOGRAPHY */

h1,h2,h3{

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

font-weight:700;

}

a{

text-decoration:none;

color:inherit;

}

img{

display:block;

max-width:100%;

}

/* ======================
NAVIGATION
====================== */

.navbar{

position:fixed;

top:0;

left:0;

width:100%;

z-index:999;

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

backdrop-filter:blur(18px);

border-bottom:1px solid var(--border);

}

.nav-container{

display:flex;

justify-content:space-between;

align-items:center;

padding:18px 0;

gap:30px;

}

/* LOGO */

.logo{

display:flex;

align-items:center;

gap:14px;

}

.logo-circle{

width:56px;

height:56px;

border-radius:50%;

border:2px solid var(--secondary);

display:flex;

justify-content:center;

align-items:center;

font-weight:700;

font-size:20px;

color:var(--secondary);

}

.logo-text h2{

font-size:22px;

}

.logo-text p{

font-size:13px;

color:var(--muted);

}

/* NAV LINKS */

.desktop-nav{

display:flex;

gap:24px;

}

.desktop-nav a{

color:#d9d9d9;

transition:.3s;

}

.desktop-nav a:hover{

color:var(--primary);

}

/* BUTTON */

.primary-btn{

display:inline-flex;

align-items:center;

justify-content:center;

padding:14px 28px;

border-radius:999px;

background:linear-gradient(135deg,var(--primary),var(--secondary));

color:white;

font-weight:600;

transition:.3s;

}

.primary-btn:hover{

transform:translateY(-3px);

}

.secondary-btn{

display:inline-flex;

align-items:center;

justify-content:center;

padding:14px 28px;

border-radius:999px;

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

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

transition:.3s;

}

.secondary-btn:hover{

border-color:var(--primary);

}

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

.hero{

padding-top:150px;

padding-bottom:100px;

}

.hero-grid{

display:grid;

grid-template-columns:1fr 1fr;

align-items:center;

gap:80px;

}

.system-label{

font-family:'JetBrains Mono',monospace;

color:var(--primary);

margin-bottom:20px;

}

.hero h1{

font-size:68px;

line-height:1.05;

margin-bottom:24px;

}

.hero h1 span{

display:block;

color:var(--primary);

}

.hero-description{

font-size:20px;

color:#bdbdbd;

max-width:620px;

}

.hero-buttons{

display:flex;

gap:20px;

margin-top:40px;

flex-wrap:wrap;

}
/* ==========================================
   HERO VISUAL
========================================== */

.hero-visual{

display:flex;

justify-content:center;

align-items:center;

}

#neural-core{

width:320px;

height:320px;

border-radius:50%;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

background:
radial-gradient(circle at center,
rgba(79,141,255,.25),
rgba(118,104,255,.15),
rgba(255,255,255,.02));

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

box-shadow:
0 0 40px rgba(79,141,255,.25),
0 0 120px rgba(118,104,255,.12);

animation:floatCore 6s ease-in-out infinite;

}

.vg-mark{

font-size:64px;

font-weight:700;

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

background:linear-gradient(135deg,#4F8DFF,#7668FF);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

#neural-core p{

margin-top:12px;

color:#B8B8B8;

font-size:15px;

letter-spacing:1px;

}

/* ==========================================
   METRICS
========================================== */

.metrics{

padding:80px 0;

}

.metrics-grid{

display:grid;

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

gap:24px;

}

.metric-card{

background:#0d0d0d;

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

border-radius:18px;

padding:30px;

transition:.35s;

}

.metric-card:hover{

transform:translateY(-8px);

border-color:#4F8DFF;

box-shadow:0 0 30px rgba(79,141,255,.15);

}

.metric-card h3{

font-size:34px;

margin-bottom:10px;

color:#4F8DFF;

}

.metric-card p{

color:#A7A7A7;

}

/* ==========================================
   AI ECOSYSTEM
========================================== */

.ecosystem{

padding:120px 0;

}

.section-tag{

font-family:'JetBrains Mono',monospace;

color:#4F8DFF;

margin-bottom:18px;

}

.ecosystem h2{

font-size:44px;

margin-bottom:50px;

max-width:700px;

}

.logo-grid{

display:grid;

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

gap:20px;

}

.logo-grid div{

background:#0f0f0f;

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

border-radius:16px;

padding:28px;

text-align:center;

font-weight:600;

transition:.3s;

}

.logo-grid div:hover{

border-color:#4F8DFF;

transform:translateY(-5px);

}

/* ==========================================
   ANIMATION
========================================== */

@keyframes floatCore{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0px);

}

}

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

@media(max-width:900px){

.hero{

padding-top:120px;

}

.hero-grid{

grid-template-columns:1fr;

gap:50px;

}

.hero h1{

font-size:48px;

}

.hero-description{

font-size:18px;

}

.hero-buttons{

flex-direction:column;

}

.primary-btn,
.secondary-btn{

width:100%;

}

#neural-core{

width:220px;

height:220px;

}

.vg-mark{

font-size:48px;

}

.metrics-grid{

grid-template-columns:1fr 1fr;

}

.logo-grid{

grid-template-columns:1fr 1fr;

}

.ecosystem h2{

font-size:34px;

}

}

@media(max-width:600px){

.metrics-grid{

grid-template-columns:1fr;

}

.logo-grid{

grid-template-columns:1fr;

}

.hero h1{

font-size:40px;

}

}
/* ==========================================
   SOLUTIONS
========================================== */

.solutions{

padding:120px 0;

}

.section-subtitle{

max-width:700px;

margin:20px 0 60px;

color:#A7A7A7;

font-size:18px;

}

.solutions-grid{

display:grid;

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

gap:24px;

}

.solution-card{

background:#101010;

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

border-radius:20px;

padding:32px;

transition:.35s;

}

.solution-card:hover{

transform:translateY(-8px);

border-color:#4F8DFF;

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

}

.solution-card h3{

margin-bottom:18px;

font-size:24px;

}

.solution-card p{

color:#A8A8A8;

line-height:1.8;

}

@media(max-width:900px){

.solutions-grid{

grid-template-columns:1fr;

}

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

.process{

padding:120px 0;

}

.process-grid{

display:grid;

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

gap:24px;

}

.process-card{

background:#101010;

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

border-radius:20px;

padding:35px;

transition:.35s;

}

.process-card:hover{

transform:translateY(-8px);

border-color:#4F8DFF;

box-shadow:0 0 30px rgba(79,141,255,.15);

}

.process-card span{

display:inline-block;

font-size:42px;

font-weight:700;

color:#4F8DFF;

margin-bottom:20px;

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

}

.process-card h3{

margin-bottom:14px;

font-size:24px;

}

.process-card p{

color:#A8A8A8;

line-height:1.8;

}

@media(max-width:900px){

.process-grid{

grid-template-columns:1fr;

}

}/* ===== Pricing Section ===== */

.pricing{
    padding:120px 0;
}

.pricing h2{
    font-size:42px;
    margin:20px 0 50px;
}

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

.pricing-card{
    background:#111;
    border:1px solid rgba(255,255,255,.08);
    border-radius:20px;
    padding:40px;
    position:relative;
    transition:.3s;
}

.pricing-card:hover{
    transform:translateY(-8px);
    border-color:#4f7cff;
}

.pricing-card.featured{
    border:2px solid #4f7cff;
    box-shadow:0 0 50px rgba(79,124,255,.25);
}

.badge{
    position:absolute;
    top:20px;
    right:20px;
    background:linear-gradient(90deg,#6a5cff,#4f7cff);
    color:#fff;
    padding:6px 14px;
    border-radius:50px;
    font-size:12px;
    font-weight:700;
}

.price{
    font-size:48px;
    font-weight:800;
    margin:20px 0;
}

.price span{
    font-size:18px;
    color:#888;
}

.monthly{
    color:#9aa0a6;
    margin-bottom:25px;
}

.pricing-card ul{
    list-style:none;
    padding:0;
    margin:30px 0;
}

.pricing-card li{
    margin:14px 0;
    color:#ddd;
}

.pricing-card li::before{
    content:"✓ ";
    color:#4f7cff;
    font-weight:bold;
}

@media(max-width:900px){

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

}/* ===== Contact ===== */

.contact{
padding:120px 0;
}

.contact h2{
font-size:48px;
margin:20px 0;
}

.contact-text{
color:#9aa0a6;
max-width:700px;
margin-bottom:50px;
line-height:1.8;
}

.contact-form{
display:flex;
flex-direction:column;
gap:24px;
max-width:800px;
}

.contact-form input,
.contact-form textarea{

background:#111;

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

color:#fff;

padding:18px 22px;

border-radius:14px;

font-size:16px;

transition:.3s;

font-family:inherit;

}

.contact-form input:focus,
.contact-form textarea:focus{

outline:none;

border-color:#4f7cff;

box-shadow:0 0 20px rgba(79,124,255,.35);

}

.contact-form textarea{

resize:vertical;

min-height:180px;

}

.contact-form button{

width:260px;

margin-top:10px;

}

@media(max-width:900px){

.contact h2{

font-size:36px;

}

.contact-form button{

width:100%;

}

}/* Footer */

.footer{
padding:80px 0 40px;
border-top:1px solid rgba(255,255,255,.08);
margin-top:120px;
}

.footer-grid{
display:grid;
grid-template-columns:2fr 1fr 1fr 1fr;
gap:40px;
}

.footer h3,
.footer h4{
margin-bottom:20px;
}

.footer a{
display:block;
color:#9aa0a6;
margin:10px 0;
text-decoration:none;
transition:.3s;
}

.footer a:hover{
color:#4f7cff;
}

.copyright{
text-align:center;
margin-top:60px;
color:#666;
font-size:14px;
}

@media(max-width:900px){

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

}/* Scroll Animation */

.hidden{
opacity:0;
transform:translateY(40px);
transition:all .8s ease;
}

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

/* Hover */

.solution-card,
.stat-card,
.tech-card,
.price-card,
.step-card{

transition:.35s;

}

.solution-card:hover,
.stat-card:hover,
.tech-card:hover,
.price-card:hover,
.step-card:hover{

transform:translateY(-8px);
box-shadow:0 15px 35px rgba(71,116,255,.25);

}

button,
.btn{

transition:.3s;

}

button:hover,
.btn:hover{

transform:translateY(-2px);

}/* Mobile Menu */

.menu-toggle{
display:none;
background:none;
border:none;
color:#ffffff;
font-size:28px;
cursor:pointer;
}

@media (max-width:900px){
.desktop-nav{
    display:none;
    position:absolute;
    top:70px;
    left:0;
    width:100%;
    background:#0b0b0f;
    flex-direction:column;
    padding:20px;
    gap:20px;
}
.desktop-nav.active{
    display:flex !important;
    position:absolute;
    top:70px;
    left:0;
    width:100%;
    background:#0b0b0f;
    flex-direction:column;
    padding:20px;
    gap:20px;
    z-index:9999;
}

.menu-toggle{
display:block;
}

.primary-btn{
display:none;
}

}.contact-form{
    padding-bottom:100px;
}

.primary-btn{
    display:block;
    width:100%;
    margin:30px 0;
}
/* ================= AI CHATBOT ================= */

#chatbot{
position:fixed;
bottom:25px;
right:25px;
z-index:9999;
}

#chat-toggle{
width:65px;
height:65px;
border:none;
border-radius:50%;
background:#4f7cff;
color:#fff;
font-size:28px;
cursor:pointer;
box-shadow:0 10px 30px rgba(79,124,255,.4);
}

#chat-window{
display:none;
flex-direction:column;
width:340px;
height:500px;
background:#111;
border:1px solid rgba(255,255,255,.08);
border-radius:20px;
overflow:hidden;
box-shadow:0 20px 60px rgba(0,0,0,.5);
margin-bottom:15px;
}

#chat-header{
padding:18px;
background:#4f7cff;
font-weight:600;
color:#fff;
text-align:center;
}

#chat-messages{
flex:1;
padding:15px;
overflow-y:auto;
color:#fff;
font-size:14px;
}

#chat-input-area{
display:flex;
border-top:1px solid rgba(255,255,255,.08);
}

#chat-input{
flex:1;
background:#1a1a1a;
border:none;
padding:15px;
color:#fff;
outline:none;
}

#send-btn{
border:none;
background:#4f7cff;
color:#fff;
padding:0 20px;
cursor:pointer;
}

@media(max-width:768px){

#chat-window{
width:95vw;
height:70vh;
}

#chatbot{
right:10px;
bottom:10px;
}

}