:root{

--bg:#0b1220;
--card:rgba(255,255,255,.05);
--border:rgba(255,255,255,.1);
--text:#eef2ff;
--muted:rgba(238,242,255,.72);

--accent:#3b82f6;
--accent2:#60a5fa;

--shadow:0 18px 50px rgba(0,0,0,.35);

--radius:18px;
--max:1180px;

}

*{
box-sizing:border-box;
}

html,body{
margin:0;
padding:0;
}

body{

font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;

color:var(--text);

background:
radial-gradient(1200px 600px at 70% -10%,rgba(59,130,246,.2),transparent 55%),
linear-gradient(180deg,#0b1220,#070b14);

line-height:1.6;

overflow-x:hidden;

}

a{
text-decoration:none;
color:inherit;
}

img{
max-width:100%;
display:block;
}

.container{
max-width:var(--max);
margin:auto;
padding:0 22px;
}

.section{
padding:70px 0;
}

.section.tight{
padding:44px 0;
}

/* HEADER */

.topbar{

position:sticky;
top:0;
z-index:20;

background:rgba(7,11,20,.85);

backdrop-filter:blur(14px);

border-bottom:1px solid rgba(255,255,255,.08);

}

.nav{

display:flex;
align-items:center;
justify-content:space-between;

padding:26px 0;

gap:20px;

}

/* LOGO */

.brand{
display:flex;
align-items:center;
}

.brand img{

height:95px;
width:auto;

}

/* NAVIGATION */

.navlinks{

display:flex;
gap:18px;
align-items:center;

flex-wrap:wrap;

}

.navlinks a{

font-size:15px;

padding:10px 12px;

border-radius:10px;

color:rgba(238,242,255,.85);

transition:.25s;

}

.navlinks a:hover{

background:rgba(255,255,255,.08);

}

.navlinks a.active{

background:rgba(59,130,246,.2);

}

/* CTA BUTTON */

.cta{

display:inline-flex;
align-items:center;
justify-content:center;

padding:12px 20px;

border-radius:14px;

background:
linear-gradient(
135deg,
var(--accent),
var(--accent2)
);

color:#fff;

font-weight:600;

letter-spacing:.2px;

box-shadow:
0 8px 24px rgba(59,130,246,.35),
0 2px 6px rgba(0,0,0,.3);

transition:
transform .2s ease,
box-shadow .2s ease,
filter .2s ease;

}

.cta:hover{

transform:translateY(-2px);

box-shadow:
0 18px 40px rgba(59,130,246,.45);

filter:brightness(1.05);

}

/* HERO */

.hero{
padding:80px 0 40px;
}

.heroGrid{

display:grid;
grid-template-columns:1.2fr .8fr;

gap:26px;

}

.heroCard{

border-radius:var(--radius);

overflow:hidden;

background:var(--card);

border:1px solid var(--border);

box-shadow:var(--shadow);

}

.heroMedia{

position:relative;

height:500px;

}

.heroMedia img{

width:100%;
height:100%;

object-fit:cover;

}

.heroContent{

position:absolute;

bottom:0;

left:0;

right:0;

padding:30px;

background:linear-gradient(transparent,rgba(0,0,0,.65));

}

.heroTitle{

font-size:48px;

margin:0 0 10px;

line-height:1.1;

text-shadow:0 4px 18px rgba(0,0,0,.5);

}

.heroSub{

max-width:540px;

color:rgba(255,255,255,.85);

margin-bottom:16px;

}

/* SIDE PANELS */

.sideStack{
display:flex;
flex-direction:column;
gap:18px;
}

/* GLASS CARDS */

.card,
.panel{

background:rgba(255,255,255,0.04);

border:1px solid rgba(255,255,255,.08);

backdrop-filter:blur(6px);

border-radius:var(--radius);

box-shadow:
0 10px 30px rgba(0,0,0,.25),
inset 0 1px 0 rgba(255,255,255,.06);

transition:transform .25s ease,box-shadow .25s ease;

padding:20px;

}

.card:hover{

transform:translateY(-6px);

box-shadow:
0 20px 55px rgba(0,0,0,.35),
inset 0 1px 0 rgba(255,255,255,.08);

}

/* GRID */

.grid3{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:20px;

}

.media{

height:220px;

border-radius:var(--radius);

overflow:hidden;

}

.media img{

width:100%;
height:100%;

object-fit:cover;

}

.card .pad{

padding:18px;

}

.card h3{
margin:0 0 8px;
}

.card p{
color:var(--muted);
margin:0;
}

/* LIST */

.list{

padding-left:20px;

color:var(--muted);

}

.list li{
margin:8px 0;
}

/* SPLIT */

.split{

display:grid;

grid-template-columns:1fr 1fr;

gap:30px;

align-items:center;

}

/* QUOTE */

.quote{

padding:28px;

border-radius:var(--radius);

background:rgba(255,255,255,.04);

border:1px solid rgba(255,255,255,.1);

}

.quote p{
margin:0;
}

.quote small{

display:block;
margin-top:10px;

color:var(--muted);

}

/* FOOTER */

.footer{

border-top:1px solid rgba(255,255,255,.08);

background:rgba(7,11,20,.65);

padding:34px 0;

}

.footerGrid{

display:grid;

grid-template-columns:1.2fr .8fr;

gap:18px;

}

.footer small{
color:var(--muted);
}

.footer a:hover{
text-decoration:underline;
}

/* MAP */

iframe{

width:100%;

border:0;

display:block;

border-radius:18px;

}

/* RESPONSIVE */

@media(max-width:980px){

.heroGrid{
grid-template-columns:1fr;
}

.grid3{
grid-template-columns:1fr;
}

.split{
grid-template-columns:1fr;
}

.heroMedia{
height:420px;
}

}

@media(max-width:768px){

.container{
padding:0 16px;
}

.nav{

flex-direction:column;

align-items:flex-start;

}

.brand img{
height:74px;
}

.heroTitle{
font-size:36px;
}

.heroBtns{
flex-direction:column;
}

.cta{
width:auto;
padding:10px 16px;
font-size:14px;
}

.navlinks .cta{
width:auto;
padding:8px 14px;
font-size:14px;
}

.footerGrid{
grid-template-columns:1fr;
}

}

@media(max-width:520px){

.brand img{
height:64px;
}

.heroMedia{
height:320px;
}

.heroTitle{
font-size:30px;
}

.heroSub{
font-size:14px;
}

iframe{
height:320px!important;
}

}
