:root{
  --bg:#0f1724;
  --card:#0b1220;
  --accent:#00a99d;
  --accent-2:#6de0c7;
  --muted:#9aa6b2;
  --surface:#0b1220;
  --white:#ffffff;
  --radius:12px;
  --container:1200px;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--white);
  background:linear-gradient(180deg,#071025 0%, #071522 100%);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
  font-size:16px;
}

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

/* header */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter: blur(6px);
  background:linear-gradient(180deg, rgba(7,17,37,0.6), rgba(7,17,37,0.35));
  border-bottom:1px solid rgba(255,255,255,0.03);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.site-logo {
  height: 28px;
  margin-right: 12px;
  vertical-align: middle;
  display: inline-block;
}
.brand{
  display: inline-block;
  font-size: 1.35rem;
  font-weight: 800;
  vertical-align: middle;
  color: var(--white);
  text-decoration: none;
  letter-spacing: 0.5px;
}
.nav a{color:var(--muted); margin-left:1rem; text-decoration:none}
.btn{
  display:inline-block;
  padding:.65rem 1rem;
  border-radius:8px;
  text-decoration:none;
  font-weight:600;
  cursor:pointer;
}
.btn-ghost{background:transparent; border:1px solid rgba(255,255,255,0.06); color:var(--white)}
.btn-primary{background:linear-gradient(90deg,var(--accent),var(--accent-2)); color:#022; border:none}
.btn-outline{background:transparent; border:1px solid rgba(255,255,255,0.08); color:var(--white)}
.btn-card{margin-top:1rem; display:inline-block}

/* Hero */
.hero{padding:4rem 0}
.hero-grid{display:grid; grid-template-columns:1fr 360px; gap:2rem; align-items:start}
.hero-content h1{font-size:2rem; line-height:1.05; margin:0 0 .5rem}
.lead{color:var(--muted); margin:0 0 1rem}
.cta-row{display:flex; gap:1rem; margin:1rem 0}
.hero-features{display:flex; gap:1rem; list-style:none; padding:0; margin:1rem 0 0; color:var(--muted)}
.hero-features li{background:rgba(255,255,255,0.03); padding:.4rem .6rem; border-radius:8px; font-weight:600; font-size:.9rem}

/* Card */
.card{background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02)); padding:1.25rem; border-radius:12px; box-shadow: 0 6px 30px rgba(2,8,23,0.6); color:var(--white)}
.card-kicker{color:var(--accent-2); font-weight:700; margin:0 0 .4rem}
.card h3{margin:.2rem 0 .6rem}
.card ul{margin:0; padding-left:1.1rem; color:var(--muted)}
.card-note{font-size:.8rem; color:var(--muted); margin-top:.75rem}

/* Emotional hook */
.pattern-bg{background:linear-gradient(90deg, rgba(0,169,157,0.02), rgba(109,224,199,0.01)); border-radius:12px; margin:2rem 0; padding:1.5rem}
.emotional-hook h2{margin:0 0 .5rem}
.emotional-hook p{color:var(--muted); margin:0}

/* Problem / solution */
.split{display:flex; gap:2rem; align-items:flex-start}
.split h3{margin-top:0}
.muted{color:var(--muted); font-size:.95rem}

/* solution features */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:1rem}
.feature{background:rgba(255,255,255,0.02); padding:1rem; border-radius:10px}
.feature h4{margin:.4rem 0}
.icon{width:36px; height:36px; color:var(--accent);}

/* benefits */
.benefits-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:1rem}
.benefit{background:rgba(255,255,255,0.02); padding:1rem; border-radius:10px}
.benefit h4{margin:.3rem 0}

/* social proof */
.social .testimonials{display:grid; grid-template-columns:1fr 1fr; gap:1rem; align-items:start}
blockquote{background:rgba(255,255,255,0.02); padding:1rem; border-radius:10px; margin:0}
blockquote p{margin:0 0 .6rem}
cite{color:var(--muted); font-size:.9rem}
.logos{display:flex; gap:.6rem; margin-top:1rem}
.logo{background:rgba(255,255,255,0.02); padding:.5rem .75rem; border-radius:8px; color:var(--muted)}

/* Offer */
.offer-grid{display:grid; grid-template-columns:1fr 320px; gap:1rem; margin-top:1rem}
.offer-card{background:rgba(255,255,255,0.02); padding:1rem; border-radius:10px}

/* CTA / form */
.cta-section{margin:2rem 0; padding:2rem 0; background:linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0.05)); border-radius:12px}
.cta-inner{display:flex; gap:2rem; align-items:center}
.cta-copy h3{margin:0}
.cta-form{display:grid; gap:.6rem; width:360px; background:rgba(255,255,255,0.02); padding:1rem; border-radius:10px}
.cta-form label{font-size:.85rem; color:var(--muted)}
.cta-form input{padding:.6rem .75rem; border-radius:8px; border:1px solid rgba(255,255,255,0.04); background:transparent; color:var(--white)}
.cta-form button{margin-top:.5rem}

/* Footer */
.site-footer{padding:2rem 0; color:var(--muted); font-size:.95rem}
.footer-inner{display:flex; justify-content:space-between; align-items:center}

/* responsiveness */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr; }
  .offer-grid{grid-template-columns:1fr;}
  .grid-3{grid-template-columns:1fr; }
  .benefits-grid{grid-template-columns:1fr; }
  .social .testimonials{grid-template-columns:1fr; }
  .cta-inner{flex-direction:column; align-items:stretch}
  .header-inner{padding:0 1rem}
}

@media (max-width:480px){
  .container{padding:1rem}
  .hero-content h1{font-size:1.4rem}
  .btn{padding:.55rem .7rem}
  .card{padding:.9rem}
  .cta-form{width:100%}
}