/* ==========================================================
   Vibela AI
   Premium Landing Page
   ========================================================== */

:root{

--bg:#050816;
--bg2:#0b1022;

--surface:rgba(255,255,255,.045);
--surface2:rgba(255,255,255,.08);

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

--text:#ffffff;
--muted:#a7b1c6;

--blue:#4f7cff;
--cyan:#00d8ff;
--purple:#7a5cff;

--radius:24px;

--shadow:
0 20px 60px rgba(0,0,0,.45);

--transition:.35s ease;

max-width:1400px;

}

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

html{
scroll-behavior:smooth;
}

body{

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

background:
radial-gradient(circle at top,#111a3d 0%,#050816 45%),
#050816;

color:var(--text);

overflow-x:hidden;

line-height:1.65;

}

a{

text-decoration:none;
color:inherit;

}

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

.container{

width:min(1180px,92%);
margin:auto;

}

/* ========================================================== */

.noise{

position:fixed;
inset:0;

pointer-events:none;

opacity:.035;

background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");

z-index:999;

}

/* ========================================================== */

header{

position:fixed;

left:0;
right:0;
top:0;

z-index:1000;

backdrop-filter:blur(18px);

background:rgba(4,7,18,.55);

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

}

nav{

display:flex;

justify-content:space-between;

align-items:center;

height:82px;

}

.logo{

display:flex;

align-items:center;

gap:14px;

font-size:1.3rem;

font-weight:700;

letter-spacing:-.02em;

}

.logo-icon{

width:42px;
height:42px;

border-radius:14px;

background:
linear-gradient(135deg,
var(--purple),
var(--cyan));

box-shadow:

0 0 45px rgba(79,124,255,.45);

position:relative;

overflow:hidden;

}

.logo-icon::after{

content:"";

position:absolute;

width:140%;

height:140%;

background:

linear-gradient(45deg,
transparent,
rgba(255,255,255,.45),
transparent);

transform:rotate(35deg);

animation:shine 6s infinite;

}

@keyframes shine{

0%{
left:-180%;
}

100%{
left:180%;
}

}

.nav-links{

display:flex;

gap:38px;

list-style:none;

}

.nav-links a{

color:var(--muted);

transition:var(--transition);

font-weight:500;

}

.nav-links a:hover{

color:white;

}

/* ========================================================== */

.button{

display:inline-flex;

align-items:center;

justify-content:center;

padding:16px 34px;

border-radius:18px;

font-weight:700;

background:

linear-gradient(135deg,
var(--purple),
var(--blue));

box-shadow:

0 12px 35px rgba(79,124,255,.35);

transition:var(--transition);

}

.button:hover{

transform:translateY(-4px);

box-shadow:

0 18px 55px rgba(79,124,255,.5);

}

.button-small{

padding:12px 24px;

}

.button.secondary{

background:transparent;

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

box-shadow:none;

}

.button.secondary:hover{

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

}

/* ========================================================== */

.hero{

position:relative;

padding-top:180px;

padding-bottom:120px;

overflow:hidden;

}

.hero-gradient{

position:absolute;

width:900px;
height:900px;

right:-200px;
top:-250px;

background:

radial-gradient(circle,
rgba(84,122,255,.35),
transparent 70%);

filter:blur(70px);

}

.hero-grid{

display:grid;

grid-template-columns:

1fr
520px;

gap:70px;

align-items:center;

}

.tag{

display:inline-flex;

padding:8px 18px;

border-radius:999px;

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

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

font-size:.85rem;

margin-bottom:28px;

color:#d6dcff;

}

.hero h1{

font-size:4.3rem;

line-height:1.05;

letter-spacing:-.05em;

margin-bottom:28px;

}

.hero h1 span{

background:
linear-gradient(
90deg,
#ffffff,
#95bcff,
#72f3ff);

-webkit-background-clip:text;

color:transparent;

}

.hero p{

font-size:1.18rem;

color:var(--muted);

max-width:640px;

margin-bottom:40px;

}

.hero-buttons{

display:flex;

gap:18px;

margin-bottom:55px;

}

.hero-stats{

display:flex;

gap:60px;

}

.hero-stats h3{

font-size:2rem;

}

.hero-stats p{

margin:0;
font-size:.95rem;

}

/* ========================================================== */

.hero-visual{

display:flex;

justify-content:center;

align-items:center;

}

.orb{

width:520px;
height:520px;

animation:

float 7s ease-in-out infinite;

filter:

drop-shadow(0 0 80px rgba(80,120,255,.4));

}

.orb svg{

width:100%;
height:100%;

}

@keyframes float{

0%{

transform:
translateY(0);

}

50%{

transform:
translateY(-18px);

}

100%{

transform:
translateY(0);

}

}
/* ==========================================================
   LOGO STRIP
   ========================================================== */

.logos{
    padding:50px 0 90px;
}

.logos p{
    text-align:center;
    color:var(--muted);
    margin-bottom:36px;
    text-transform:uppercase;
    letter-spacing:.18em;
    font-size:.8rem;
}

.logo-grid{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:24px;
}

.logo-grid span{
    display:flex;
    justify-content:center;
    align-items:center;

    height:72px;

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

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

    border-radius:18px;

    color:#d5def7;

    font-weight:600;

    transition:.35s;
}

.logo-grid span:hover{

    transform:translateY(-6px);

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

}

/* ==========================================================
   SECTIONS
   ========================================================== */

section{

    position:relative;

}

.features,
.solutions,
.process,
.about{

    padding:120px 0;

}

section h2{

    font-size:3rem;

    letter-spacing:-.04em;

    margin-bottom:20px;

}

.section-text{

    color:var(--muted);

    max-width:720px;

    margin-bottom:70px;

    font-size:1.08rem;

}

/* ==========================================================
   FEATURE CARDS
   ========================================================== */

.feature-grid{

display:grid;

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

gap:30px;

}

.card{

background:var(--surface);

backdrop-filter:blur(20px);

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

border-radius:28px;

padding:42px;

transition:.4s;

position:relative;

overflow:hidden;

}

.card::before{

content:"";

position:absolute;

left:-30%;

top:-30%;

width:250px;

height:250px;

background:

radial-gradient(circle,
rgba(79,124,255,.22),
transparent 70%);

opacity:0;

transition:.4s;

}

.card:hover{

transform:translateY(-10px);

border-color:rgba(79,124,255,.35);

}

.card:hover::before{

opacity:1;

}

.icon{

width:62px;

height:62px;

border-radius:18px;

margin-bottom:26px;

background:

linear-gradient(135deg,
var(--purple),
var(--cyan));

box-shadow:

0 0 35px rgba(79,124,255,.45);

}

.card h3{

margin-bottom:16px;

font-size:1.35rem;

}

.card p{

color:var(--muted);

}

/* ==========================================================
   SPLIT SECTION
   ========================================================== */

.split{

display:grid;

grid-template-columns:1fr 520px;

gap:70px;

align-items:center;

}

.checks{

list-style:none;

margin-top:40px;

display:grid;

gap:20px;

}

.checks li{

position:relative;

padding-left:38px;

font-size:1.05rem;

}

.checks li::before{

content:"✓";

position:absolute;

left:0;

top:0;

color:var(--cyan);

font-weight:bold;

}

/* ==========================================================
   GLASS GRAPHIC
   ========================================================== */

.glass-graphic{

height:520px;

border-radius:36px;

background:

linear-gradient(
180deg,
rgba(255,255,255,.06),
rgba(255,255,255,.02));

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

position:relative;

overflow:hidden;

backdrop-filter:blur(30px);

}

.rings{

position:absolute;

inset:0;

background-image:

radial-gradient(circle,
transparent 34%,
rgba(255,255,255,.08) 35%,
transparent 36%),

radial-gradient(circle,
transparent 50%,
rgba(255,255,255,.06) 51%,
transparent 52%),

radial-gradient(circle,
transparent 66%,
rgba(255,255,255,.05) 67%,
transparent 68%);

animation:rotateGraphic 26s linear infinite;

}

@keyframes rotateGraphic{

from{

transform:rotate(0deg);

}

to{

transform:rotate(360deg);

}

}

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

.steps{

display:grid;

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

gap:28px;

margin-top:60px;

}

.step{

padding:34px;

border-radius:26px;

background:var(--surface);

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

}

.step span{

font-size:.82rem;

letter-spacing:.2em;

color:var(--cyan);

}

.step h3{

margin:18px 0 14px;

}

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

.about{

text-align:center;

}

.about p{

max-width:900px;

margin:auto;

font-size:1.15rem;

color:var(--muted);

}

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

.cta{

padding:80px 0 130px;

}

.cta-box{

padding:80px;

border-radius:36px;

text-align:center;

background:

linear-gradient(
135deg,
rgba(78,124,255,.18),
rgba(122,92,255,.16));

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

backdrop-filter:blur(30px);

}

.cta h2{

margin-bottom:20px;

}

.cta p{

max-width:700px;

margin:0 auto 45px;

color:var(--muted);

}

.cta form{

display:flex;

justify-content:center;

gap:18px;

flex-wrap:wrap;

}

.cta input{

width:420px;

max-width:100%;

padding:18px 24px;

border:none;

outline:none;

border-radius:18px;

background:white;

font-size:1rem;

}

.cta button{

padding:18px 34px;

border:none;

cursor:pointer;

border-radius:18px;

font-weight:700;

color:white;

background:

linear-gradient(
135deg,
var(--purple),
var(--blue));

}

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

footer{

padding:80px 0 40px;

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

}

.footer-grid{

display:grid;

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

gap:60px;

}

.footer-grid h4{

margin-bottom:22px;

}

.footer-grid a{

display:block;

margin-bottom:12px;

color:var(--muted);

transition:.3s;

}

.footer-grid a:hover{

color:white;

}

.footer-logo{

margin-bottom:24px;

}

footer p{

color:var(--muted);

}

.copyright{

text-align:center;

margin-top:70px;

padding-top:30px;

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

color:#7f8aa5;

font-size:.9rem;

}

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

@media (max-width:1100px){

.hero-grid,
.split{

grid-template-columns:1fr;

}

.hero{

text-align:center;

}

.hero p{

margin-left:auto;
margin-right:auto;

}

.hero-buttons,
.hero-stats{

justify-content:center;

}

.orb{

width:380px;
height:380px;

margin-top:50px;

}

.feature-grid{

grid-template-columns:1fr;

}

.steps{

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

}

.logo-grid{

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

}

.footer-grid{

grid-template-columns:1fr;

text-align:center;

}

.footer-logo{

justify-content:center;

}

}

@media (max-width:700px){

.nav-links{

display:none;

}

.hero h1{

font-size:3rem;

}

section h2{

font-size:2.2rem;

}

.hero-stats{

flex-direction:column;

gap:26px;

}

.logo-grid{

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

}

.steps{

grid-template-columns:1fr;

}

.cta-box{

padding:45px 28px;

}

}