/* ===========================================
   SHREE TECHNOLOGIES AI 2050
   Premium Design System
=========================================== */

:root{

--bg:#02040a;
--bg2:#050816;
--surface:rgba(255,255,255,.05);
--surface2:rgba(255,255,255,.08);

--primary:#00E5FF;
--secondary:#6C63FF;
--accent:#9D4DFF;
--green:#00FFA3;

--white:#ffffff;
--text:#E9EEF8;
--muted:#9AA5B5;

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

--shadow:
0 0 25px rgba(0,229,255,.15),
0 0 60px rgba(108,99,255,.12);

--radius:22px;

--transition:.35s cubic-bezier(.4,.2,.2,1);

}

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

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

html{
scroll-behavior:smooth;
}

body{

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

background:
radial-gradient(circle at top left,#102a66 0%,transparent 25%),
radial-gradient(circle at bottom right,#3d0d67 0%,transparent 30%),
linear-gradient(180deg,#02040a,#050816);

color:var(--text);

overflow-x:hidden;

}

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

h1,h2,h3,h4{

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

font-weight:700;

letter-spacing:-1px;

}

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

a{

text-decoration:none;

color:white;

}

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

section{

padding:120px 8%;

position:relative;

}

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

.container{

max-width:1400px;

margin:auto;

}

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

.noise{

position:fixed;

inset:0;

pointer-events:none;

opacity:.05;

background-image:url("https://www.transparenttextures.com/patterns/asfalt-light.png");

z-index:-1;

}

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

.aurora{

position:fixed;

width:900px;

height:900px;

left:-200px;

top:-200px;

background:

radial-gradient(circle,

rgba(0,229,255,.25),

transparent 70%);

filter:blur(120px);

animation:auroraMove 15s linear infinite;

z-index:-2;

}

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

@keyframes auroraMove{

0%{

transform:translate(0,0);

}

50%{

transform:translate(600px,300px);

}

100%{

transform:translate(0,0);

}

}

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

.cursor{

position:fixed;

width:26px;

height:26px;

border-radius:50%;

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

pointer-events:none;

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

transition:.08s;

z-index:99999;

box-shadow:

0 0 30px var(--primary);

}

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

.navbar{

position:fixed;

top:20px;

left:50%;

transform:translateX(-50%);

width:92%;

padding:18px 40px;

display:flex;

justify-content:space-between;

align-items:center;

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

backdrop-filter:blur(20px);

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

border-radius:100px;

z-index:999;

}

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

.logo{

font-size:28px;

font-weight:700;

font-family:'Space Grotesk';

}

.logo span{

color:var(--primary);

}

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

.navbar ul{

display:flex;

gap:45px;

list-style:none;

}

.navbar li a{

color:var(--muted);

transition:.3s;

}

.navbar li a:hover{

color:var(--primary);

}

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

.btn-primary{

padding:16px 34px;

border-radius:100px;

background:

linear-gradient(135deg,

var(--primary),

var(--secondary));

font-weight:600;

box-shadow:

0 20px 60px rgba(0,229,255,.35);

transition:var(--transition);

display:inline-flex;

align-items:center;

gap:10px;

}

.btn-primary:hover{

transform:translateY(-5px);

box-shadow:

0 35px 90px rgba(0,229,255,.45);

}

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

.btn-secondary{

padding:16px 34px;

border-radius:100px;

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

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

backdrop-filter:blur(20px);

transition:.3s;

}

.btn-secondary:hover{

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

}

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

.glass{

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

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

backdrop-filter:blur(25px);

border-radius:var(--radius);

box-shadow:var(--shadow);

}

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

.title{

font-size:62px;

line-height:1.05;

margin-bottom:20px;

}

.subtitle{

font-size:20px;

color:var(--muted);

max-width:750px;

line-height:1.8;

}

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

.grid{

display:grid;

gap:30px;

}

.flex{

display:flex;

align-items:center;

}

.center{

text-align:center;

}

.mt100{

margin-top:100px;

}

.mb60{

margin-bottom:60px;

}

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

.blur-circle{

position:absolute;

width:350px;

height:350px;

border-radius:50%;

filter:blur(90px);

background:var(--primary);

opacity:.18;

}

.blur-purple{

background:var(--accent);

}

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

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#040915;

}

::-webkit-scrollbar-thumb{

background:linear-gradient(

var(--primary),

var(--secondary));

border-radius:20px;

}
/*==================================================
 HERO SECTION - AI 2050
==================================================*/

.hero{

min-height:100vh;

display:grid;

grid-template-columns:1.1fr 1fr;

align-items:center;

padding:0 8%;

position:relative;

overflow:hidden;

}

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

.hero::before{

content:"";

position:absolute;

width:900px;

height:900px;

right:-250px;

top:-250px;

background:

radial-gradient(circle,

rgba(0,229,255,.18),

transparent 70%);

filter:blur(90px);

animation:rotateGlow 20s linear infinite;

}

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

.hero::after{

content:"";

position:absolute;

left:-180px;

bottom:-180px;

width:600px;

height:600px;

background:

radial-gradient(circle,

rgba(157,77,255,.18),

transparent 70%);

filter:blur(120px);

}

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

.hero-content{

position:relative;

z-index:5;

}

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

.hero small{

display:inline-flex;

align-items:center;

gap:12px;

padding:12px 24px;

border-radius:50px;

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

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

margin-bottom:30px;

color:var(--primary);

font-weight:600;

letter-spacing:.5px;

backdrop-filter:blur(20px);

}

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

.hero h1{

font-size:82px;

line-height:1.05;

font-weight:700;

margin-bottom:30px;

max-width:900px;

}

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

.hero h1 span{

background:

linear-gradient(

90deg,

#00E5FF,

#6C63FF,

#9D4DFF);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

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

.hero p{

font-size:20px;

line-height:1.9;

max-width:700px;

color:var(--muted);

margin-bottom:50px;

}

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

.buttons{

display:flex;

gap:22px;

flex-wrap:wrap;

}

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

.hero-right{

display:flex;

justify-content:center;

align-items:center;

position:relative;

}

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

.ai-brain{

width:470px;

height:470px;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

font-size:120px;

font-family:'Space Grotesk';

font-weight:700;

color:white;

background:

linear-gradient(

145deg,

rgba(255,255,255,.08),

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

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

backdrop-filter:blur(40px);

box-shadow:

0 0 50px rgba(0,229,255,.25),

0 0 120px rgba(108,99,255,.18),

inset 0 0 60px rgba(255,255,255,.05);

position:relative;

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

}

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

.ai-brain::before{

content:"";

position:absolute;

inset:-25px;

border-radius:50%;

border:1px solid rgba(0,229,255,.2);

animation:rotateGlow 20s linear infinite;

}

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

.ai-brain::after{

content:"";

position:absolute;

inset:-60px;

border-radius:50%;

border:1px dashed rgba(108,99,255,.25);

animation:rotateReverse 28s linear infinite;

}

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

.floating-dot{

position:absolute;

width:12px;

height:12px;

background:var(--primary);

border-radius:50%;

box-shadow:

0 0 30px var(--primary);

animation:floatDot 5s ease-in-out infinite;

}

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

.dot1{

top:8%;

left:12%;

}

.dot2{

top:20%;

right:18%;

animation-delay:1s;

}

.dot3{

bottom:18%;

left:8%;

animation-delay:2s;

}

.dot4{

bottom:8%;

right:10%;

animation-delay:3s;

}

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

.grid-bg{

position:absolute;

inset:0;

background-image:

linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),

linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);

background-size:80px 80px;

mask-image:

linear-gradient(to bottom,

rgba(0,0,0,1),

rgba(0,0,0,.2));

z-index:-1;

}

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

.hero-stats{

display:flex;

gap:40px;

margin-top:70px;

flex-wrap:wrap;

}

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

.hero-stat{

padding:22px 26px;

border-radius:22px;

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

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

backdrop-filter:blur(18px);

min-width:170px;

}

.hero-stat h2{

font-size:40px;

color:var(--primary);

margin-bottom:6px;

}

.hero-stat p{

margin:0;

font-size:15px;

color:var(--muted);

}

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

@keyframes brainFloat{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-18px);

}

100%{

transform:translateY(0);

}

}

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

@keyframes rotateGlow{

from{

transform:rotate(0deg);

}

to{

transform:rotate(360deg);

}

}

@keyframes rotateReverse{

from{

transform:rotate(360deg);

}

to{

transform:rotate(0deg);

}

}

@keyframes floatDot{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-25px);

}

100%{

transform:translateY(0);

}

}