:root{
  --bg: #070A10;
  --bg2:#0B1020;
  --card: rgba(255,255,255,.04);
  --card2: rgba(255,255,255,.02);
  --border: rgba(255,255,255,.10);
  --text: #ECF2FF;
  --muted:#A7B4D6;
  --gold:#F4B400;
  --gold2:#FFCC4D;
  --shadow: 0 18px 50px rgba(0,0,0,.45);
  --radius: 18px;
  --radius2: 14px;
  --container: 1120px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:
    radial-gradient(900px 500px at 10% -10%, rgba(244,180,0,.16), transparent 60%),
    radial-gradient(900px 500px at 95% 0%, rgba(255,204,77,.10), transparent 55%),
    radial-gradient(900px 500px at 55% 15%, rgba(99,102,241,.12), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  line-height:1.55;
}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 18px;
}

.header{
  position:sticky;
  top:0;
  z-index:50;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(6, 10, 18, .65);
  backdrop-filter: blur(12px);
}

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding: 12px 0;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width: 240px;
}
.brand__logo{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  padding: 6px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);
}
.brand__name{font-weight:900;letter-spacing:-.3px}
.brand__tag{color:var(--muted);font-size:12px;font-weight:700;margin-top:2px}

.nav__links{
  display:flex;
  align-items:center;
  gap:14px;
}
.nav__links a{
  color: var(--muted);
  font-weight: 700;
  font-size: 14px;
}
.nav__links a:hover{color: var(--text)}

.nav__toggle{
  display:none;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: var(--text);
  cursor:pointer;
  padding: 10px;
}
.nav__toggle span{
  display:block;
  height: 2px;
  background: rgba(255,255,255,.85);
  border-radius: 999px;
  margin: 5px 0;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding: 10px 14px;
  border-radius: 14px;
  font-weight: 900;
  font-size: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
  white-space: nowrap;
}
.btn:hover{transform: translateY(-1px);border-color: rgba(244,180,0,.30)}
.btn--primary{
  background: linear-gradient(135deg, rgba(244,180,0,.20), rgba(255,204,77,.12));
  border-color: rgba(244,180,0,.30);
}
.btn--ghost{
  background: rgba(255,255,255,.02);
}

.hero{
  padding: 72px 0 38px;
}
.hero__grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 18px;
  align-items:stretch;
}
.kicker{
  display:inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(244,180,0,.22);
  background: rgba(244,180,0,.08);
  color: #FFD77A;
  font-weight: 800;
  font-size: 12.5px;
  margin: 0 0 14px;
}
h1{
  font-size: clamp(32px, 4.2vw, 54px);
  line-height: 1.05;
  letter-spacing: -0.9px;
  margin: 0 0 14px;
}
.lead{
  margin: 0 0 18px;
  color: var(--muted);
  max-width: 68ch;
}
.cta{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 18px 0 10px;
}
.pillrow{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.pill{
  color: var(--muted);
  font-weight: 800;
  font-size: 13px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
}

.card{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.hero__card{padding: 16px}
.card__top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.card__title{font-weight: 900}
.card__sub{color: var(--muted);font-size: 13px;font-weight: 700;margin-top: 4px}
.badge{
  width: 44px;height: 44px;border-radius: 16px;
  display:grid;place-items:center;
  font-weight: 900;
  color: rgba(255,255,255,.95);
  border: 1px solid rgba(244,180,0,.25);
  background: linear-gradient(135deg, rgba(244,180,0,.16), rgba(255,204,77,.08));
}

.stats{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 12px 0;
}
.stat{
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
}
.stat__value{font-weight: 900}
.stat__label{color: var(--muted);font-size: 12.5px;font-weight: 700;margin-top: 3px}

.card__bottom{
  display:grid;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.mini{font-size: 13px;color: var(--muted);font-weight: 700}
.mini strong{color: var(--text)}

.section{
  padding: 50px 0;
}
.section__head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap: 12px;
  margin-bottom: 16px;
}
.section__head h2{
  margin: 0;
  font-size: 28px;
  letter-spacing: -0.4px;
}
.section__head p{
  margin: 0;
  color: var(--muted);
  max-width: 66ch;
  font-weight: 600;
}

.grid{display:grid;gap: 14px}
.grid--3{grid-template-columns: repeat(3, 1fr)}
.feature{padding: 16px}
.feature h3{margin: 0 0 6px;font-size: 16px}
.feature p{margin: 0;color: var(--muted);font-weight: 600;font-size: 14px}
.icon{
  width: 38px;height: 38px;border-radius: 14px;
  display:grid;place-items:center;
  border: 1px solid rgba(244,180,0,.20);
  background: rgba(244,180,0,.08);
  margin-bottom: 10px;
}

.split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items:start;
}
.block{padding: 16px}
.block h2{margin: 0 0 8px}
.muted{color: var(--muted);font-weight: 600}
.steps{display:grid;gap: 10px;margin-top: 14px}
.step{
  display:flex;
  gap: 12px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
}
.step__num{
  min-width: 34px;
  height: 34px;
  border-radius: 14px;
  display:grid;place-items:center;
  font-weight: 900;
  border: 1px solid rgba(244,180,0,.25);
  background: rgba(244,180,0,.10);
  color: #FFD77A;
}

.checklist{
  margin: 12px 0 0;
  padding-left: 18px;
  color: var(--muted);
  font-weight: 650;
}
.checklist li{margin: 8px 0}

.proof{padding: 16px}
.proof h3{margin: 0 0 8px;font-size: 16px}
.proof p{margin: 0;color: var(--muted);font-weight: 600;font-size: 14px}

.quotes{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 14px;
}
.quote{padding: 16px}
.quote p{margin: 0;font-weight: 700}
.quote span{display:block;margin-top:10px;color: var(--muted);font-weight: 700;font-size: 13px}

.contact{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items:start;
}
.contact__card{padding: 14px;margin-top: 14px}
.contact__row{
  display:flex;
  justify-content:space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.contact__row:last-child{border-bottom:none;padding-bottom: 4px}
.contact__row a{width: fit-content}

.form{padding: 16px}
.form__head h3{margin: 0 0 4px}
.form__head p{margin: 0 0 12px}
label{display:block;font-weight: 800;font-size: 13px;margin: 10px 0 6px}
input, select, textarea{
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  color: var(--text);
  padding: 12px 12px;
  outline: none;
}
textarea{min-height: 120px;resize: vertical}
.row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.form__actions{
  display:flex;
  align-items:center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.footer{
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(6, 10, 18, .55);
}
.footer__row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 20px 0;
}
.footer__left{display:flex;align-items:center;gap: 12px}
.footer__logo{
  width: 38px;height: 38px;
  border-radius: 14px;
  padding: 6px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);
}
.footer__name{font-weight: 900}
.footer__right{display:flex;gap: 14px;flex-wrap: wrap}
.footer__right a{color: var(--muted);font-weight: 800;font-size: 13.5px}
.footer__right a:hover{color: var(--text)}

.tiny{font-size: 12.5px}
@media (max-width: 980px){
  .hero__grid{grid-template-columns: 1fr}
  .grid--3{grid-template-columns: 1fr}
  .split{grid-template-columns: 1fr}
  .quotes{grid-template-columns: 1fr}
  .contact{grid-template-columns: 1fr}
}
@media (max-width: 820px){
  .nav__toggle{display:inline-flex;align-items:center;justify-content:center}
  .nav__links{
    position: fixed;
    top: 72px;
    left: 18px;
    right: 18px;
    display:none;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 14px;
    border-radius: var(--radius);
    background: rgba(8, 12, 22, .92);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: var(--shadow);
  }
  .nav__links.is-open{display:flex}
  .nav__links a{padding: 10px 12px;border-radius: 12px;background: rgba(255,255,255,.02)}
  .nav__links a.btn{background: transparent}
  .section__head{flex-direction: column;align-items:flex-start}
  .row{grid-template-columns: 1fr}
}