:root{
  --bg:#030b16;
  --bg-2:#061221;
  --line:rgba(201,221,236,.13);
  --text:#f7fbff;
  --soft:#d7e1ea;
  --muted:#a8b8c8;
  --gold:#f1c351;
  --gold-bright:#ffdc7d;
  --cyan:#18d7ea;
  --cyan-soft:rgba(24,215,234,.10);
  --container:1240px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  overflow-x:hidden;
  color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:
    radial-gradient(1280px 840px at 14% 2%, rgba(24,215,234,.10), transparent 62%),
    radial-gradient(1060px 780px at 92% 2%, rgba(241,195,81,.11), transparent 67%),
    radial-gradient(900px 720px at 54% 92%, rgba(174,146,255,.045), transparent 74%),
    linear-gradient(180deg,#040d19 0%, #020811 100%);
  overflow-x:hidden;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-2;
  background:
    linear-gradient(90deg, rgba(255,255,255,.012) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.010) 1px, transparent 1px);
  background-size:160px 160px;
  background-position:1px 1px;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.80), transparent 88%);
}

img,svg{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
button,input,textarea,select{font:inherit;cursor:pointer}

.container{
  width:min(calc(100% - 48px),var(--container));
  margin:0 auto;
}

.site-header{
  position:sticky;
  top:0;
  z-index:60;
  backdrop-filter:blur(20px);
  background:linear-gradient(180deg,rgba(3,11,22,.93),rgba(3,11,22,.76));
  border-bottom:1px solid rgba(255,255,255,.055);
}

.nav{
  position:relative;
  min-height:96px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
}

.brand{
  display:flex;
  align-items:center;
  gap:14px;
  flex:0 0 auto;
}

.brand-mark{
  width:58px;
  height:58px;
  border-radius:50%;
  border:2px solid rgba(241,195,81,.92);
  display:grid;
  place-items:center;
  color:var(--gold);
  font-size:16px;
  font-weight:1000;
  letter-spacing:.03em;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,247,220,.28), transparent 22%),
    radial-gradient(circle at 50% 50%, rgba(241,195,81,.22), rgba(3,11,22,.96) 72%);
  box-shadow:
    inset 0 0 0 3px rgba(241,195,81,.08),
    0 18px 44px rgba(241,195,81,.12);
}

.brand-copy strong{
  display:block;
  font-size:20px;
  line-height:1;
  letter-spacing:-.04em;
}

.brand-copy small{
  display:block;
  margin-top:5px;
  color:#d1dce7;
  font-size:11px;
  font-weight:900;
  letter-spacing:.30em;
  text-transform:uppercase;
}

.brand--image{
  gap:0;
  line-height:0;
  min-width:0;
}

.brand-logo-img{
  display:block;
  width:auto;
  height:auto;
  max-height:44px;
  max-width:min(228px, 44vw);
}

.brand--footer .brand-logo-img{
  max-height:40px;
  max-width:min(210px, 78vw);
}

.footer-brand .brand--image{
  margin-bottom:2px;
}

.nav-links{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:34px;
  flex:1 1 auto;
}

.nav-links a{
  position:relative;
  color:#e7eff7;
  font-size:14px;
  font-weight:800;
  transition:color .18s ease;
}

.nav-links a:hover,
.nav-links a.active{color:var(--gold-bright)}

.nav-links a.active::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-16px;
  width:26px;
  height:2px;
  transform:translateX(-50%);
  border-radius:999px;
  background:var(--gold);
  box-shadow:0 0 18px rgba(241,195,81,.48);
}

.nav-actions{
  display:flex;
  align-items:center;
  gap:12px;
  flex:0 0 auto;
}

.btn{
  min-height:52px;
  padding:0 22px;
  border-radius:14px;
  border:1px solid transparent;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-size:14px;
  font-weight:950;
  transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease;
  white-space:nowrap;
}

.btn:hover{transform:translateY(-1px)}
.btn-primary{
  color:#221702;
  border-color:rgba(255,226,145,.32);
  background:linear-gradient(135deg,var(--gold-bright),#dca534);
  box-shadow:0 18px 46px rgba(241,195,81,.18);
}
.btn-outline{
  color:var(--text);
  border-color:rgba(221,235,245,.26);
  background:rgba(255,255,255,.025);
}

.mobile-toggle{
  display:none;
  width:52px;
  height:52px;
  border-radius:14px;
  border:1px solid rgba(221,235,245,.22);
  background:rgba(255,255,255,.025);
  color:var(--text);
  font-size:22px;
}

.marketing-main{min-height:50vh}

.site-footer{padding:0 0 46px}

.footer-inner{
  border-top:1px solid rgba(255,255,255,.12);
  padding-top:34px;
  display:grid;
  grid-template-columns:minmax(250px,1.2fr) repeat(3,minmax(140px,.62fr));
  gap:32px;
}

.footer-brand p{
  max-width:360px;
  margin:16px 0 0;
  color:var(--muted);
  font-size:14px;
  line-height:1.72;
}

.footer-column strong{
  display:block;
  margin-bottom:14px;
  font-size:14px;
  color:#e7eff7;
}

.footer-column a{
  display:block;
  margin-top:10px;
  color:var(--muted);
  font-size:14px;
}

.footer-column a:hover{color:var(--gold)}

.footer-bottom{
  margin-top:30px;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:16px;
  color:#8798aa;
  font-size:13px;
  line-height:1.6;
}

@media(max-width:1180px){
  .nav-links{display:none}
  .mobile-toggle{display:grid;place-items:center}
  .nav-actions .btn-outline{display:none}
  .nav-links.is-open,
  .nav-actions.is-open{
    display:flex;
    position:absolute;
    left:24px;
    right:24px;
    z-index:70;
    padding:18px 20px 22px;
    border-radius:18px;
    border:1px solid rgba(255,255,255,.10);
    background:rgba(6,18,33,.98);
    box-shadow:0 24px 60px rgba(0,0,0,.45);
  }
  .nav-links.is-open{
    top:calc(100% + 8px);
    flex-direction:column;
    align-items:flex-start;
    gap:18px;
  }
  .nav-links.is-open a.active::after{display:none}
  .nav-actions.is-open{
    top:calc(100% + 140px);
    flex-wrap:wrap;
    gap:12px;
  }
  .nav-actions.is-open .btn-outline{display:inline-flex}
  .footer-inner{grid-template-columns:1fr 1fr}
}

@media(max-width:920px){
  .container{width:min(calc(100% - 32px),var(--container))}
  .nav{min-height:82px}
  .brand-mark{width:52px;height:52px}
  .brand-copy strong{font-size:18px}
  .brand--header .brand-logo-img{
    max-height:38px;
    max-width:min(196px, 52vw);
  }
  .nav-actions .btn-primary{min-height:48px;padding-inline:17px}
  .footer-inner{grid-template-columns:1fr}
}

@media(max-width:640px){
  .container{width:min(calc(100% - 24px),var(--container))}
  .nav-actions .btn-primary span{display:none}
  .btn{width:100%}
}