:root{
  --bg:#06090c;--bg2:#0c1116;--panel:#111920;--line:#263a45;
  --cyan:#36d7e7;--steel:#8eb2c5;--gold:#e3b66a;--cream:#fff7e8;
  --text:#f8fbfc;--muted:#aebcc5;--max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:linear-gradient(180deg,#06090c,#0b1015 55%,#06090c);
  color:var(--text);
  font-family:Inter,Arial,sans-serif;
}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
.wrap{width:min(var(--max),92%);margin:auto}
.top{
  background:#020405;
  color:#c0ccd2;
  font-size:12px;
  padding:7px 0;
}
.top .wrap,.head,.nav,.hero{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
header{
  position:sticky;
  top:0;
  z-index:50;
  background:#06090cf2;
  border-bottom:1px solid #21333d;
  backdrop-filter:blur(10px);
}
.head{padding:14px 0}
.brand img{height:44px}
.actions{display:flex;gap:10px}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 20px;
  border-radius:10px;
  background:linear-gradient(90deg,var(--cyan),#4b9df0);
  color:#041014;
  font-weight:900;
}
.btn.gold{
  background:linear-gradient(90deg,var(--gold),#d39143);
  color:#161006;
}
.nav{
  padding:10px 0;
  border-top:1px solid #192932;
  justify-content:center;
  flex-wrap:wrap;
  font-size:13px;
  font-weight:800;
}
.nav a:hover,.active{color:var(--cyan)}
.hero{
  padding:48px 0;
  align-items:stretch;
}
.hero-copy{
  flex:.92;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.hero-art{
  flex:1.08;
  border:1px solid #375666;
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 24px 70px #0009;
}
.hero-art img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.eyebrow{
  color:var(--gold);
  letter-spacing:2px;
  font-size:12px;
  font-weight:900;
}
.hero h1{
  font-size:58px;
  line-height:.98;
  margin:12px 0;
  color:var(--cream);
}
.hero h1 span{color:var(--cyan)}
.hero h2{
  font-size:28px;
  margin:0 0 14px;
}
.hero p,.card p,.content p,.content li{
  color:var(--muted);
  line-height:1.75;
}
.hero-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:20px;
}
.quick{
  background:#0b1115;
  border-block:1px solid #263b45;
}
.quick .wrap{
  display:grid;
  grid-template-columns:repeat(3,1fr);
}
.quick div{
  padding:16px;
  border-right:1px solid #263b45;
}
.quick div:last-child{border-right:0}
.quick b{display:block;color:var(--gold)}
.quick small{color:var(--muted)}
section{padding:36px 0}
.section-title{
  font-size:32px;
  margin:0 0 20px;
}
.grid3{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:17px;
}
.grid2{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:17px;
}
.card{
  background:linear-gradient(180deg,#111920,#0c1218);
  border:1px solid #2a414d;
  border-radius:16px;
  overflow:hidden;
}
.card-body{padding:19px}
.card h3{margin:8px 0}
.visual{
  height:145px;
  display:grid;
  place-items:center;
  font-size:52px;
  background:radial-gradient(circle at 50% 20%,#163844,#0c1218 70%);
}
.tag{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  background:#17313a;
  color:#8debf4;
  font-size:11px;
  font-weight:900;
}
.pagehero{
  padding:58px 0;
  background:linear-gradient(115deg,#0b1720,#132834 58%,#3a2a17);
}
.pagehero h1{
  font-size:46px;
  margin:0 0 10px;
  color:var(--cream);
}
.pagehero p{
  max-width:820px;
  color:var(--muted);
  line-height:1.7;
}
.content{max-width:930px}
.faq details{
  background:#0e171d;
  border:1px solid #2a414d;
  border-radius:12px;
  padding:16px 18px;
}
.faq summary{
  cursor:pointer;
  font-weight:900;
  color:var(--cream);
}
footer{
  margin-top:30px;
  background:#020405;
  border-top:1px solid #21333d;
  padding:34px 0 18px;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.8fr repeat(4,1fr);
  gap:22px;
}
.footer-grid p{
  color:#99a9b2;
  font-size:12px;
  line-height:1.6;
}
.footer-grid a{
  display:block;
  font-size:12px;
  margin:8px 0;
}
.copy{
  border-top:1px solid #192831;
  margin-top:24px;
  padding-top:15px;
  color:#74848c;
  font-size:11px;
}
@media(max-width:900px){
  .hero{flex-direction:column}
  .grid3{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .top{display:none}
  .head{flex-wrap:wrap}
  .nav{justify-content:flex-start;overflow:auto;flex-wrap:nowrap}
  .hero h1{font-size:40px}
  .grid3,.grid2,.footer-grid,.quick .wrap{grid-template-columns:1fr}
  .quick div{border-right:0;border-bottom:1px solid #263b45}
}