:root{
--bg:#040607;
--surface:#0b1014;
--surface2:#11181d;
--gold:#d4af37;
--gold2:#f1cd65;
--emerald:#00a86b;
--emerald2:#00c77a;
--white:#f7f8fa;
--muted:#a9b1bb;
--line:rgba(212,175,55,.22)
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
margin:0;
min-height:100vh;
color:var(--white);
font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
background:
radial-gradient(circle at 12% 8%,rgba(0,168,107,.12),transparent 28%),
radial-gradient(circle at 86% 0%,rgba(212,175,55,.11),transparent 30%),
linear-gradient(150deg,#020303,#071015 62%,#030505)
}
a{color:inherit}
.shell{width:min(1280px,calc(100% - 30px));margin:auto}
.topbar{
display:flex;
min-height:86px;
align-items:center;
justify-content:space-between;
gap:22px;
border-bottom:1px solid var(--line)
}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand-mark{
display:grid;
width:50px;
height:50px;
place-items:center;
border:1px solid rgba(212,175,55,.35);
border-radius:14px;
color:var(--gold2);
font-size:25px;
background:rgba(212,175,55,.05)
}
.brand-name{font-size:25px;font-weight:900;letter-spacing:-.04em}
.brand-name span{color:var(--gold2)}
.brand-sub{margin-top:4px;color:var(--muted);font-size:9px;letter-spacing:.2em}
.nav{display:flex;gap:24px;align-items:center}
.nav a{
padding:10px 0;
color:#e6e9ed;
text-decoration:none;
font-size:13px;
font-weight:750
}
.nav a:hover,.nav a.active{color:var(--gold2)}
.langs{
display:flex;
gap:6px;
padding:4px;
border:1px solid rgba(212,175,55,.18);
border-radius:999px
}
.lang{
display:inline-flex;
min-width:35px;
min-height:31px;
padding:6px 8px;
align-items:center;
justify-content:center;
border-radius:999px;
color:var(--muted);
text-decoration:none;
font-size:10px;
font-weight:900
}
.lang.active{
color:#08110c;
background:linear-gradient(135deg,var(--gold2),var(--gold))
}
.hero{
display:grid;
min-height:610px;
padding:54px 0;
grid-template-columns:minmax(0,1fr) minmax(420px,.9fr);
gap:58px;
align-items:center
}
.eyebrow{
color:var(--emerald2);
font-size:12px;
font-weight:900;
letter-spacing:.15em
}
.atlas-headline{
max-width:760px;
margin:18px 0 20px;
font-size:clamp(36px,5vw,62px);
line-height:1.04;
letter-spacing:-.05em
}
.gold{color:var(--gold2)}
.lead{
max-width:660px;
margin:0;
color:#c3cad2;
font-size:18px;
line-height:1.7
}
.actions{
display:flex;
flex-wrap:wrap;
gap:11px;
margin-top:26px
}
.btn{
display:inline-flex;
min-height:52px;
padding:13px 20px;
border-radius:12px;
align-items:center;
justify-content:center;
text-decoration:none;
font-weight:900
}
.btn-primary{
color:#08110c;
background:linear-gradient(135deg,var(--gold2),#c79c27)
}
.btn-secondary{
border:1px solid rgba(255,255,255,.14);
background:rgba(255,255,255,.025)
}
.panel{
border:1px solid var(--line);
border-radius:22px;
background:linear-gradient(145deg,rgba(17,24,29,.98),rgba(6,10,13,.99));
box-shadow:0 28px 75px rgba(0,0,0,.36)
}
.atlas-summary-card{
padding:30px;
text-align:center;
overflow:hidden
}
.atlas-logo-wrap{
display:grid;
place-items:center;
margin:2px 0 20px
}
.atlas-logo-ring{
display:grid;
width:170px;
height:170px;
place-items:center;
border:1px solid rgba(212,175,55,.34);
border-radius:50%;
background:
radial-gradient(circle at 38% 30%,rgba(0,199,122,.17),transparent 35%),
linear-gradient(145deg,rgba(212,175,55,.05),rgba(0,168,107,.035));
box-shadow:
inset 0 0 48px rgba(0,168,107,.08),
0 0 42px rgba(212,175,55,.06)
}
.atlas-logo-core{
display:grid;
width:104px;
height:104px;
place-items:center;
border:1px solid rgba(0,168,107,.28);
border-radius:50%;
background:rgba(3,12,10,.86);
font-size:54px
}
.atlas-card-copy{max-width:520px;margin:0 auto 24px}
.atlas-card-kicker{
color:var(--emerald2);
font-size:11px;
font-weight:900;
letter-spacing:.16em
}
.atlas-card-copy h2{
margin:9px 0 10px;
font-size:27px;
letter-spacing:-.03em
}
.atlas-card-copy p{
margin:0;
color:var(--muted);
font-size:14px;
line-height:1.6
}
.stats{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px
}
.stats-three{
grid-template-columns:repeat(3,minmax(0,1fr))
}
.stat{
padding:16px;
border:1px solid rgba(255,255,255,.07);
border-radius:13px;
background:rgba(255,255,255,.025)
}
.stat strong{
display:block;
color:var(--gold2);
font-size:26px
}
.stat span{
display:block;
margin-top:4px;
color:var(--muted);
font-size:12px
}
.page{padding:42px 0 70px}
.page-title{margin:0 0 8px;font-size:clamp(38px,5vw,60px)}
.page-intro{max-width:760px;color:var(--muted);line-height:1.65}
.form-card{max-width:900px;margin-top:26px;padding:26px}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.field{display:grid;gap:8px}
.field.full{grid-column:1/-1}
label{font-size:13px;font-weight:800}
input,select{
width:100%;
min-height:50px;
padding:11px 13px;
border:1px solid rgba(255,255,255,.12);
border-radius:11px;
color:#fff;
background:#101820;
font:inherit
}
.check-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.check{
display:flex;
gap:9px;
align-items:center;
padding:11px;
border:1px solid rgba(255,255,255,.08);
border-radius:10px;
background:rgba(255,255,255,.02)
}
.check input{width:auto;min-height:0}
.notice{
margin-top:18px;
padding:13px 15px;
border:1px solid rgba(0,168,107,.25);
border-radius:11px;
color:#c8f3de;
background:rgba(0,168,107,.06);
font-size:13px;
line-height:1.55
}
.footer{
display:flex;
justify-content:space-between;
gap:20px;
padding:24px 0 34px;
border-top:1px solid rgba(255,255,255,.07);
color:#858e99;
font-size:11px
}
@media(max-width:980px){
.nav{display:none}
.hero{grid-template-columns:1fr}
.grid-2{grid-template-columns:1fr}
.field.full{grid-column:auto}
}
@media(max-width:650px){
.hero{min-height:auto;padding:36px 0}
.atlas-headline{font-size:clamp(34px,10vw,48px)}
.stats-three{grid-template-columns:1fr}
.atlas-logo-ring{width:145px;height:145px}
.atlas-logo-core{width:88px;height:88px;font-size:46px}
.check-grid{grid-template-columns:1fr 1fr}
.footer{flex-direction:column}
}