/* ================= GLOBAL ================= */

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

body{
font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
background:#0b1118;
color:#e6edf3;
line-height:1.75;
overflow-x:hidden;
}

/* ================= REMOVE TOP NAV ================= */

.nav,
.nav-inner,
.nav-links{
display:none;
}

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

.hero
width:100vw;
margin-left:calc(-50vw + 50%);

max-width:none;

padding:170px 20px 140px;

text-align:center;

background:
radial-gradient(circle at 20% 20%,rgba(88,166,255,0.35),transparent 60%),
radial-gradient(circle at 80% 10%,rgba(125,211,252,0.20),transparent 60%),
linear-gradient(180deg,#0a0f16 0%,#111827 100%);

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

}

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

.brand-line{

font-size:12px;

letter-spacing:2px;

text-transform:uppercase;

color:#9fb3c8;

margin-bottom:18px;

}

.hero h1{

font-size:52px;

font-weight:600;

margin-bottom:22px;

letter-spacing:.5px;

}

.hero p{

font-size:18px;

color:#b6c2cf;

max-width:900px;

margin:auto;

}

/* ================= MAIN ================= */

.container{

max-width:1100px;

margin:auto;

padding:100px 24px;

}

.section{

margin-bottom:80px;

}

/* ================= HEADINGS ================= */

h2{

font-size:30px;

margin-bottom:20px;

font-weight:600;

position:relative;

}

h2::after{

content:"";

display:block;

width:60px;

height:2px;

background:#58a6ff;

margin-top:10px;

opacity:.6;

}

h3{

font-size:20px;

margin-bottom:10px;

}

p{

font-size:16px;

color:#c9d1d9;

max-width:820px;

}

/* ================= CARD GRID ================= */

.card-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

gap:28px;

margin-top:40px;

}

.card{

background:#0f1620;

padding:34px;

border-radius:14px;

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

transition:0.3s ease;

}

.card:hover{

transform:translateY(-6px);

border-color:#58a6ff;

box-shadow:0 16px 40px rgba(0,0,0,0.5);

}

/* ================= CONTACT ================= */

.contact-email{

margin-top:14px;

}

.contact-email a{

font-size:17px;

color:#58a6ff;

text-decoration:none;

}

.contact-email a:hover{

text-decoration:underline;

}

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

.footer{

background:#0b1118;

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

padding:90px 20px;

}

.footer-container{

max-width:1200px;

margin:auto;

display:flex;

flex-wrap:wrap;

gap:60px;

}

.footer-column{

flex:1;

min-width:260px;

}

.footer h3,
.footer h4{

margin-bottom:14px;

}

.footer a{

display:block;

margin-bottom:6px;

color:#9aa4b2;

text-decoration:none;

transition:.3s;

}

.footer a:hover{

color:#ffffff;

}

.footer-bottom{

margin-top:60px;

text-align:center;

font-size:13px;

color:#8a97a5;

line-height:1.7;

}

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

@media(max-width:900px){

.hero{
padding:130px 20px;
}

.hero h1{
font-size:40px;
}

.container{
padding:70px 20px;
}

.footer-container{
flex-direction:column;
}

/* ================= LUXURY RESEARCH LAYER ================= */

/* subtle background grid */

body::before{

content:"";

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

background:
linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);

background-size:60px 60px;

pointer-events:none;

z-index:-1;

}

/* hero premium glow */

.hero{

overflow:hidden;

}

.hero::before{

content:"";

position:absolute;

top:-50%;
left:-50%;

width:200%;
height:200%;

background:radial-gradient(circle, rgba(88,166,255,0.15), transparent 65%);

animation:heroGlow 20s linear infinite;

opacity:.5;

}

@keyframes heroGlow{

0%{transform:rotate(0deg)}
100%{transform:rotate(360deg)}

}

/* refined typography */

.hero h1{

font-weight:600;

letter-spacing:1px;

text-shadow:0 0 30px rgba(88,166,255,0.15);

}

/* section breathing space */

.section{

padding-top:10px;

}

/* elegant card refinement */

.card{

backdrop-filter:blur(4px);

border:1px solid rgba(88,166,255,0.08);

}

.card:hover{

transform:translateY(-8px);

box-shadow:0 20px 60px rgba(0,0,0,0.6);

border-color:#58a6ff;

}

/* footer luxury tone */

.footer{

background:
linear-gradient(180deg,#0b1118 0%,#0f1620 100%);

}

/* smooth link hover */

a{

transition:all .25s ease;

}

a:hover{

color:#7dd3fc;

}
/* ===== LUXURY BACKGROUND DEPTH ===== */

body::after{

content:"";

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

background:
radial-gradient(circle at 30% 20%, rgba(88,166,255,0.08), transparent 60%),
radial-gradient(circle at 80% 80%, rgba(125,211,252,0.06), transparent 60%);

pointer-events:none;

z-index:-1;

}


/* ===== HERO LUXURY LIGHT ===== */

.hero{

box-shadow:
inset 0 120px 180px rgba(88,166,255,0.08),
inset 0 -120px 180px rgba(0,0,0,0.6);

}


/* ===== GLASS CARD EFFECT ===== */

.card{

background:rgba(15,22,32,0.65);

backdrop-filter:blur(14px);

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

box-shadow:0 10px 40px rgba(0,0,0,0.45);

transition:all .35s ease;

}


/* ===== CARD PREMIUM HOVER ===== */

.card:hover{

transform:translateY(-10px) scale(1.02);

box-shadow:0 30px 80px rgba(0,0,0,0.65);

border-color:rgba(88,166,255,0.4);

}


/* ===== SECTION SPACING LUXURY ===== */

.section{

margin-bottom:110px;

}


/* ===== TITLE ENHANCEMENT ===== */

h2{

letter-spacing:.5px;

}


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

.footer{

background:linear-gradient(180deg,#0a0f16 0%,#0f1620 100%);

  }
/* ===== HERO FULL WIDTH FIX ===== */

.hero{

position:relative;
width:100vw;
margin-left:calc(-50vw + 50%);

padding:180px 20px 160px;

text-align:center;

background:
radial-gradient(circle at 30% 20%, rgba(88,166,255,0.35), transparent 60%),
radial-gradient(circle at 80% 0%, rgba(125,211,252,0.20), transparent 60%),
linear-gradient(180deg,#0a0f16 0%,#111827 100%);

overflow:hidden;

}


/* ===== AI LIGHT EFFECT ===== */

.hero::before{

content:"";

position:absolute;

top:-60%;
left:-60%;

width:220%;
height:220%;

background:radial-gradient(circle, rgba(88,166,255,0.15), transparent 70%);

animation:heroRotate 25s linear infinite;

opacity:.5;

}

@keyframes heroRotate{
0%{transform:rotate(0deg)}
100%{transform:rotate(360deg)}
  }
/* ===== ENGINEERING GRID BACKGROUND ===== */

body::before{

content:"";

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

background:
linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);

background-size:70px 70px;

pointer-events:none;

z-index:-1;

  }
  /* ===== CENTER AI LIGHT ===== */

.hero::after{

content:"";

position:absolute;

top:50%;
left:50%;

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

width:900px;
height:900px;

background:radial-gradient(circle, rgba(88,166,255,0.18), transparent 65%);

filter:blur(120px);

opacity:.6;

pointer-events:none;

animation:heroPulse 8s ease-in-out infinite;

}

/* light breathing animation */

@keyframes heroPulse{

0%{
opacity:.4;
transform:translate(-50%,-50%) scale(1);
}

50%{
opacity:.7;
transform:translate(-50%,-50%) scale(1.1);
}

100%{
opacity:.4;
transform:translate(-50%,-50%) scale(1);
}

/* ===== PREMIUM GLASS CARDS ===== */

.card{

background:rgba(15,22,32,0.65);

backdrop-filter:blur(14px);

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

box-shadow:0 10px 40px rgba(0,0,0,0.45);

transition:all .35s ease;

position:relative;

overflow:hidden;

}


/* subtle light */

.card::before{

content:"";

position:absolute;

top:-50%;
left:-50%;

width:200%;
height:200%;

background:radial-gradient(circle, rgba(88,166,255,0.12), transparent 70%);

opacity:0;

transition:.6s;

}


/* hover effect */

.card:hover::before{

opacity:1;

}

.card:hover{

transform:translateY(-10px) scale(1.02);

box-shadow:0 30px 80px rgba(0,0,0,0.65);

border-color:rgba(88,166,255,0.4);

  }

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

h1{

font-size:58px;

font-weight:600;

letter-spacing:1px;

line-height:1.2;

margin-bottom:26px;

}

h2{

font-size:32px;

font-weight:600;

margin-bottom:24px;

letter-spacing:.4px;

}

h3{

font-size:20px;

font-weight:600;

margin-bottom:12px;

}

p{

font-size:16px;

line-height:1.9;

color:#c9d1d9;

max-width:780px;

}


/* ===== SECTION SPACING ===== */

section{

margin-bottom:90px;

}


/* ===== CONTAINER REFINEMENT ===== */

.container{

max-width:1100px;

margin:auto;

padding:110px 24px;

}

/* ===== HERO LIGHT LINE ===== */

.hero::after{

content:"";

position:absolute;

bottom:0;
left:50%;

transform:translateX(-50%);

width:120px;
height:2px;

background:linear-gradient(90deg,#58a6ff,#7dd3fc);

opacity:.6;

}

/* ===== CARD SMOOTH ANIMATION ===== */

.card{

transition:

transform .35s ease,
box-shadow .35s ease,
border-color .35s ease;

}

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

.footer{

background:linear-gradient(180deg,#0a0f16 0%,#0f1620 100%);

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

}

.footer a{

color:#9aa4b2;

transition:.3s;

}

.footer a:hover{

color:#ffffff;

}

/* ===== AI PARTICLE BACKGROUND ===== */

.hero span.light{

position:absolute;

border-radius:50%;

background:rgba(88,166,255,0.25);

filter:blur(80px);

animation:floatLight 20s linear infinite;

}

/* light positions */

.hero span.light1{
width:260px;
height:260px;
top:10%;
left:15%;
}

.hero span.light2{
width:300px;
height:300px;
bottom:10%;
right:15%;
animation-duration:26s;
}

.hero span.light3{
width:220px;
height:220px;
top:60%;
left:40%;
animation-duration:22s;
}

/* animation */

@keyframes floatLight{

0%{
transform:translateY(0) translateX(0);
}

50%{
transform:translateY(-40px) translateX(30px);
}

100%{
transform:translateY(0) translateX(0);
}

/* ===== HERO PREMIUM TITLE ===== */

.hero h1{

font-size:60px;

font-weight:600;

background:linear-gradient(90deg,#ffffff,#7dd3fc,#58a6ff);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

letter-spacing:1px;

margin-bottom:24px;

}

/* ===== THINK TANK TYPOGRAPHY ===== */

h2{

font-size:30px;

font-weight:500;

letter-spacing:.5px;

margin-bottom:20px;

}

p{

font-size:16px;

line-height:1.9;

color:#c9d1d9;

max-width:780px;

  }

/* ===== RESEARCH TITLE LINE ===== */

h2::after{

content:"";

display:block;

width:60px;

height:2px;

background:linear-gradient(90deg,#58a6ff,#7dd3fc);

margin-top:10px;

opacity:.6;

}

/* ===== SECTION DIVIDER ===== */

section{

position:relative;

padding-bottom:60px;

}

section::after{

content:"";

position:absolute;

bottom:0;
left:50%;

transform:translateX(-50%);

width:120px;
height:1px;

background:linear-gradient(90deg,transparent,#58a6ff,transparent);

opacity:.25;

}

/* ===== CARD INTERACTION ===== */

.card{

cursor:default;

transition:

transform .35s ease,
box-shadow .35s ease,
border-color .35s ease,
background .35s ease;

}

.card:hover{

background:linear-gradient(150deg,#0f1620,#1a2433);

transform:translateY(-12px);

box-shadow:0 32px 80px rgba(0,0,0,0.65);

}

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

.hero{

animation:heroFade 1.5s ease;

}

@keyframes heroFade{

from{

opacity:0;
transform:translateY(30px);

}

to{

opacity:1;
transform:translateY(0);

}

/* ===== ANIMATED RESEARCH GRID ===== */

body::before{

content:"";

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

background:
linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);

background-size:80px 80px;

animation:gridMove 40s linear infinite;

pointer-events:none;

z-index:-1;

}

@keyframes gridMove{

0%{
transform:translateY(0);
}

100%{
transform:translateY(80px);
}

/* ===== INTERACTIVE CARDS ===== */

.card{

cursor:default;

transition:

transform .4s ease,
box-shadow .4s ease,
border-color .4s ease,
background .4s ease;

}

.card:hover{

transform:translateY(-14px) scale(1.02);

box-shadow:0 35px 90px rgba(0,0,0,0.65);

border-color:rgba(88,166,255,0.45);

}