/* ==========================================
NEXGEN SOLUTIONS
OPTION Z FOUNDATION
MAIN.CSS
========================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* ==========================================
RESET
========================================== */

*,
*::before,
*::after{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

background:#050505;

color:#ffffff;

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

min-height:100vh;

overflow-x:hidden;

text-rendering:
optimizeLegibility;

-webkit-font-smoothing:
antialiased;

position:relative;

}

/* ==========================================
GLOBAL AMBIENT LIGHT
========================================== */

body::before{

content:"";

position:fixed;

inset:0;

pointer-events:none;

background:

radial-gradient(
    circle at 20% 20%,
    rgba(59,130,246,.06),
    transparent 35%
),

radial-gradient(
    circle at 80% 20%,
    rgba(124,58,237,.05),
    transparent 35%
),

radial-gradient(
    circle at 50% 60%,
    rgba(96,165,250,.04),
    transparent 45%
);

z-index:-2;

}

/* ==========================================
MEDIA
========================================== */

img{

display:block;

max-width:100%;

}

a{

text-decoration:none;

color:inherit;

}

button{

font:inherit;

border:none;

background:none;

}

/* ==========================================
PARTICLE CANVAS
========================================== */

#particle-canvas{

position:fixed;

inset:0;

width:100%;

height:100%;

pointer-events:none;

z-index:0;

}

/* ==========================================
CONTAINERS
========================================== */

.container{

width:min(
    1400px,
    calc(100% - 48px)
);

margin-inline:auto;

}

.section{

position:relative;

padding:
120px 0;

}

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

.hero-section{

position:relative;

min-height:100vh;

display:flex;

align-items:center;

justify-content:center;

padding:

140px 24px
100px;

overflow:hidden;

isolation:isolate;

}

.hero-content{

position:relative;

z-index:10;

max-width:1100px;

display:flex;

flex-direction:column;

align-items:center;

text-align:center;

gap:28px;

}

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

.hero-badge{

display:inline-flex;

align-items:center;

justify-content:center;

gap:10px;

padding:
12px 20px;

border-radius:999px;

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

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

backdrop-filter:
blur(16px);

color:#cbd5e1;

font-size:12px;

font-weight:700;

letter-spacing:.12em;

text-transform:uppercase;

}

/* ==========================================
TYPOGRAPHY
========================================== */

h1{

font-size:
clamp(
    5rem,
    10vw,
    9rem
);

line-height:.88;

font-weight:900;

letter-spacing:-.06em;

max-width:1000px;

}

h2{

font-size:
clamp(
    3rem,
    6vw,
    6rem
);

line-height:.95;

font-weight:800;

letter-spacing:-.05em;

}

p{

max-width:700px;

color:
rgba(
    255,
    255,
    255,
    .72
);

font-size:
1.1rem;

line-height:1.8;

}

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

.hero-actions{

display:flex;

align-items:center;

justify-content:center;

flex-wrap:wrap;

gap:16px;

margin-top:20px;

}

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

.btn-primary{

display:inline-flex;

align-items:center;

justify-content:center;

height:62px;

padding:
0 36px;

border-radius:999px;

background:
linear-gradient(
    135deg,
    #2563eb,
    #7c3aed
);

color:#ffffff;

font-weight:700;

transition:
all .45s
cubic-bezier(
    0.16,
    1,
    0.3,
    1
);

}

.btn-primary:hover{

transform:
translateY(-4px);

box-shadow:
0 20px 50px
rgba(
    59,
    130,
    246,
    .28
);

}

.btn-secondary{

display:inline-flex;

align-items:center;

justify-content:center;

height:62px;

padding:
0 36px;

border-radius:999px;

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

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

backdrop-filter:
blur(20px);

transition:
all .45s
cubic-bezier(
    0.16,
    1,
    0.3,
    1
);

}

.btn-secondary:hover{

transform:
translateY(-4px);

border-color:
rgba(
    255,
    255,
    255,
    .15
);

}

/* ==========================================
AURORA SYSTEM
========================================== */

.aurora-bg{

position:absolute;

inset:0;

pointer-events:none;

z-index:1;

}

.aurora-orb{

position:absolute;

border-radius:50%;

filter:blur(180px);

opacity:.38;

will-change:transform;

}

.orb-1{

width:700px;
height:700px;

top:-200px;
left:-150px;

background:
radial-gradient(
    circle,
    rgba(59,130,246,.35),
    transparent 70%
);

animation:
floatOne 22s ease-in-out infinite;

}

.orb-2{

width:650px;
height:650px;

right:-150px;
bottom:-150px;

background:
radial-gradient(
    circle,
    rgba(124,58,237,.30),
    transparent 70%
);

animation:
floatTwo 28s ease-in-out infinite;

}

.orb-3{

width:850px;
height:850px;

left:50%;
top:50%;

transform:
translate(-50%,-50%);

background:
radial-gradient(
    circle,
    rgba(96,165,250,.15),
    transparent 75%
);

animation:
floatThree 35s ease-in-out infinite;

}

/* ==========================================
ANIMATIONS
========================================== */

@keyframes floatOne{

0%{
    transform:
    translate3d(0,0,0);
}

50%{
    transform:
    translate3d(
    120px,
    80px,
    0
    );
}

100%{
    transform:
    translate3d(0,0,0);
}

}

@keyframes floatTwo{

0%{
    transform:
    translate3d(0,0,0);
}

50%{
    transform:
    translate3d(
    -120px,
    -60px,
    0
    );
}

100%{
    transform:
    translate3d(0,0,0);
}

}

@keyframes floatThree{

0%{

    transform:
    translate(
    -50%,
    -50%
    )
    scale(1);

}

50%{

    transform:
    translate(
    -50%,
    -50%
    )
    scale(1.12);

}

100%{

    transform:
    translate(
    -50%,
    -50%
    )
    scale(1);

}

}

/* ==========================================
UTILITIES
========================================== */

.text-gradient{

background:
linear-gradient(
    135deg,
    #60a5fa,
    #a78bfa
);

-webkit-background-clip:text;

background-clip:text;

color:transparent;

}

.glass{

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

backdrop-filter:
blur(20px);

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

}

.blur-glow{

box-shadow:
0 0 120px
rgba(
    59,
    130,
    246,
    .15
);

}

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

@media(max-width:768px){

h1{

    font-size:
    clamp(
        3.5rem,
        14vw,
        5rem
    );

}

.hero-actions{

    width:100%;

    flex-direction:column;

}

.btn-primary,
.btn-secondary{

    width:100%;

}

}