/* styles.css */
:root{
  --bg:#1A191F;
  --text:#e9edf1;
  --muted:#c8d1dc;
  --blue:#F9AB00;
  --tint:#f5f5f5;
  --ink:#0b0d10;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:#0f1520;
  background:#fff;
  line-height:1.6;
}

.container{width:min(1100px, 100% - 2rem); margin-inline:auto}

/* Header */
.site-header{background:var(--bg); color:var(--text); padding-bottom:2rem}
.header-bar{display:flex; align-items:center; justify-content:space-between; padding:1rem 0}
.brand{width: 120px;}
.beta{font-size:.7rem; background:#fff2; color:#fff; padding:.2rem .4rem; border-radius:.25rem; margin-left:.4rem}

.nav{display:flex; gap:.75rem; align-items:center}
.nav-link{color:#cbd5e1; text-decoration:none; font-weight:500}
.nav-link:hover{color:#fff}

.btn{display:inline-block; padding:.6rem 1rem; border-radius:.5rem; font-weight:600; text-decoration:none}
.btn--primary{background:var(--blue); color:#1A191F}
.btn--ghost{background:transparent; color:#e5e7eb; border:1px solid #2b303a}
.btn--lg{padding:.85rem 1.25rem; font-size:1.05rem}

/* Hero */
.hero{display:grid; grid-template-columns: 1.1fr .9fr; gap:2rem; padding:3rem 0 2rem}
.hero__title{margin:0; font-weight:900; line-height:1.05; font-size: clamp(2.2rem, 3vw + 1.5rem, 5rem)}
.hero .muted{color:#eef2ff}
.hero .accent{color:var(--blue)}
.eyebrow{color:#cbd5e1; text-transform:uppercase; letter-spacing:.08em; font-size:.95rem; margin:.25rem 0}
.lead{font-size:1.1rem; color:#e7ecf4}
.lead .link{color:#F9AB00}

/* Image band */
.band{position:relative; overflow:hidden}
.band--image{background:#eaeef6}
.band__img{
  height:76vh; min-height:240px;
  background:url('https://media.com/images/home-page/landing-video-poster.webp?v=3') center/cover no-repeat;
  filter:grayscale(1);
  position:relative;
}
/* Sections */
.section{padding:6.5rem 0 5rem}
.section--tint{background:var(--tint)}

.section__title{font-size: clamp(2.5rem, 1rem + 1.8vw, 3.5rem); line-height:1.2; margin:0 0 1.8rem; font-weight:800}
.section__text{margin:.35rem 0 1rem; color:#444; font-size:1.1rem; line-height:1.5}
.accent{color:var(--blue)}

.grid{display:grid; gap:2rem}
.grid--2{grid-template-columns: 1fr 1fr}
.grid--2-1{grid-template-columns: .8fr 1fr}

/* Features */
.features{display:grid; grid-template-columns: repeat(3, 1fr); gap:1.5rem; margin-top:1rem}
.feature-list{list-style:none; padding:0; margin:0}
.feature-list li{margin:.5rem 0; display:flex; gap:.6rem; align-items:flex-start; font-size: 1.2rem;}
.feature-list .icon{color:var(--blue); margin-top:.2rem}

/* Illustration */
.illustration img{width:100%; height:auto; border-radius:1rem;}

/* Bullets & fine print */
.bullet{margin:0 0 1rem 0; padding-left:1rem}
.bullet li{margin:.4rem 0}
.fineprint{font-size:.85rem; color:#6b7280; margin-top:2rem}

/* CTA */
.cta{background: var(--ink); color:#fff; padding:3rem 0}
.cta__inner{display:flex; align-items:center; justify-content:space-between; gap:1rem}
.cta__title{margin:0; font-size: clamp(1.8rem, 1.2rem + 1.6vw, 2.4rem)}

/* Footer */
.footer{background:#0b0d10; color:#cbd5e1; padding:2rem 0}
.footer__grid{display:grid; gap:1rem; grid-template-columns: 1fr; justify-items:center; text-align:center}
.footer__brand{font-weight:800; color:#fff}
.footer__links{list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:.75rem .9rem; justify-content:center}
.footer__links a{color:#F9AB00; text-decoration:none}
.footer__links a:hover{color:#fff}
.footer__social{display:flex; gap:.75rem; font-size:1.2rem}
.footer__social a{color:#e5e7eb}
.footer__copy{font-size:.85rem; color:#9aa3b2}

/* Responsive */
@media (max-width: 960px){
  .hero{grid-template-columns: 1fr; padding-top:2rem}
  .hero__right{order:2}
  .grid--2{grid-template-columns: 1fr}
  .features{grid-template-columns: 1fr 1fr}
  .cta__inner{flex-direction:column; text-align:center}
}
@media (max-width: 560px){
  .features{grid-template-columns: 1fr; gap: inherit;}
  .grid--2-1{grid-template-columns: 1fr}
}