@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root{
  --black:#030303;
  --charcoal:#0a0a0a;
  --panel:#111111;
  --panel2:#171717;
  --gold:#caa84a;
  --gold2:#f1d675;
  --muted:#b7b7b7;
  --line:rgba(202,168,74,.22);
  --white:#ffffff;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:Inter,system-ui,sans-serif;
  background:var(--black);
  color:var(--white);
  line-height:1.6;
}
.container{width:min(1180px,92%);margin:auto}

.header{
  position:fixed;
  inset:0 0 auto 0;
  z-index:50;
  background:rgba(3,3,3,.88);
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(202,168,74,.16);
}
.nav{
  height:92px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
}
.brand img{
  width:215px;
  display:block;
}
nav{
  display:flex;
  align-items:center;
  gap:30px;
}
nav a{
  color:#e7e7e7;
  text-decoration:none;
  text-transform:uppercase;
  font-size:.78rem;
  font-weight:900;
  letter-spacing:.04em;
}
.nav-btn{
  text-decoration:none;
  color:#050505;
  background:linear-gradient(135deg,var(--gold2),var(--gold));
  padding:13px 24px;
  border-radius:999px;
  font-weight:900;
  text-transform:uppercase;
  font-size:.8rem;
  box-shadow:0 14px 40px rgba(202,168,74,.22);
}

.hero{
  min-height:100vh;
  padding:142px 0 90px;
  display:grid;
  align-items:center;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 78% 24%,rgba(202,168,74,.22),transparent 28%),
    radial-gradient(circle at 18% 78%,rgba(241,214,117,.12),transparent 32%),
    linear-gradient(135deg,#030303 0%,#0c0c0c 45%,#050505 100%);
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(202,168,74,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(202,168,74,.055) 1px,transparent 1px);
  background-size:74px 74px;
  mask-image:linear-gradient(to bottom,black,transparent 86%);
}
.hero-glow{
  position:absolute;
  width:520px;height:520px;
  border-radius:50%;
  right:-160px;top:160px;
  background:rgba(202,168,74,.16);
  filter:blur(80px);
}
.hero-grid{
  position:relative;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:70px;
  align-items:center;
}
.eyebrow{
  color:var(--gold2);
  text-transform:uppercase;
  letter-spacing:.18em;
  font-weight:900;
  font-size:.76rem;
  margin-bottom:16px;
}
h1,h2{
  letter-spacing:-.055em;
  line-height:1.02;
}
h1{
  font-size:clamp(3.2rem,6vw,6.45rem);
  max-width:850px;
}
.hero-copy p{
  color:#d4d4d4;
  max-width:640px;
  font-size:1.18rem;
  margin:26px 0 36px;
}
.hero-actions{display:flex;gap:15px;flex-wrap:wrap}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  padding:15px 26px;
  border-radius:999px;
  font-weight:900;
}
.primary{
  color:#050505;
  background:linear-gradient(135deg,var(--gold2),var(--gold));
}
.secondary{
  color:#fff;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
}

.media-card{
  border:1px solid var(--line);
  background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.025));
  border-radius:34px;
  padding:22px;
  box-shadow:0 35px 100px rgba(0,0,0,.45);
}
.screen{
  min-height:430px;
  border-radius:24px;
  background:
    linear-gradient(180deg,rgba(202,168,74,.10),rgba(0,0,0,.12)),
    #090909;
  border:1px solid rgba(255,255,255,.08);
  padding:28px;
}
.screen-top{
  height:18px;
  width:105px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--gold2),var(--gold));
  margin-bottom:60px;
}
.ad-preview span{
  color:var(--gold2);
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:.72rem;
  font-weight:900;
}
.ad-preview h3{
  font-size:5rem;
  letter-spacing:-.08em;
  margin:10px 0;
}
.ad-preview p{color:var(--muted);max-width:360px}
.bar{
  height:12px;
  background:rgba(255,255,255,.08);
  border-radius:999px;
  margin-top:22px;
  overflow:hidden;
}
.bar span{
  display:block;height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,var(--gold2),var(--gold));
}

.brand-strip{
  background:#070707;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.strip-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
}
.strip-grid div{
  padding:26px 22px;
  border-right:1px solid var(--line);
}
.strip-grid div:last-child{border-right:0}
.strip-grid strong{display:block;color:var(--gold2);font-size:1.05rem}
.strip-grid span{color:var(--muted)}

.section{padding:96px 0}
.section-head{max-width:760px;margin-bottom:40px}
h2{font-size:clamp(2.25rem,4vw,4.4rem)}
.cards{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}
.cards article,.result-card{
  background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid var(--line);
  border-radius:24px;
  padding:30px;
  min-height:285px;
  transition:.24s ease;
}
.cards article:hover,.result-card:hover{
  transform:translateY(-7px);
  border-color:var(--gold);
  box-shadow:0 24px 70px rgba(0,0,0,.32);
}
.cards span{
  color:var(--gold2);
  font-weight:900;
}
.cards h3{
  margin:18px 0 12px;
  font-size:1.28rem;
}
.cards p,.steps p,.result-card p,.contact p{
  color:var(--muted);
}

.dark{
  background:
    radial-gradient(circle at 85% 10%,rgba(202,168,74,.12),transparent 28%),
    #050505;
}
.split,.contact-box{
  display:grid;
  grid-template-columns:.92fr 1.08fr;
  gap:70px;
  align-items:start;
}
.steps{display:grid;gap:16px}
.steps div{
  border:1px solid var(--line);
  background:rgba(255,255,255,.035);
  border-radius:20px;
  padding:24px;
}
.steps strong{color:var(--gold2)}

.results{
  background:#080808;
}
.results-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.result-card{
  min-height:auto;
}
.result-card strong{
  display:block;
  color:var(--gold2);
  font-size:1.25rem;
  margin-bottom:8px;
}

.contact{
  background:linear-gradient(135deg,#060606,#111);
}
.contact-box{
  background:#080808;
  border:1px solid var(--line);
  border-radius:34px;
  padding:46px;
}
form{display:grid;gap:14px}
input,textarea{
  width:100%;
  background:#030303;
  border:1px solid rgba(202,168,74,.28);
  color:#fff;
  padding:16px 17px;
  border-radius:14px;
  font:inherit;
  outline:none;
}
input:focus,textarea:focus{
  border-color:var(--gold2);
  box-shadow:0 0 0 4px rgba(202,168,74,.10);
}
button{
  border:0;
  color:#050505;
  background:linear-gradient(135deg,var(--gold2),var(--gold));
  padding:16px 20px;
  border-radius:999px;
  font:inherit;
  font-weight:900;
  cursor:pointer;
  text-transform:uppercase;
}

footer{
  background:#020202;
  border-top:1px solid var(--line);
  padding:30px 0;
}
.footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  color:#8f8f8f;
}
.footer img{width:185px}

@media(max-width:920px){
  nav,.nav-btn{display:none}
  .brand img{width:190px}
  .nav{height:82px}
  .hero{padding-top:120px}
  .hero-grid,.split,.contact-box{grid-template-columns:1fr;gap:38px}
  .cards,.results-grid,.strip-grid{grid-template-columns:1fr}
  .strip-grid div{border-right:0;border-bottom:1px solid var(--line)}
  .contact-box{padding:28px}
  .footer{flex-direction:column;align-items:flex-start}
}