:root{
  --bg:#0b0f14;
  --panel:#111826;
  --text:#e7eefc;
  --muted:#b7c3da;
  --line:rgba(231,238,252,.14);
  --accent:#6ea8ff;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text);line-height:1.5}
a{color:var(--text);text-decoration:none}
a:hover{color:var(--accent)}
.container{max-width:1120px;margin:0 auto;padding:0 20px}
.nav{
  position:sticky;top:0;z-index:10;
  background:rgba(11,15,20,.82);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0;gap:18px}
.brand{font-weight:800;letter-spacing:.2px}
.brand span{color:var(--accent)}
.nav-links{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.pill{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 14px;border-radius:999px;border:1px solid var(--line);
  background:rgba(255,255,255,.02);
}
.pill.primary{border-color:rgba(110,168,255,.55);background:rgba(110,168,255,.12);color:var(--text)}
.header{padding:56px 0 24px}
.hero{
  position:relative;
  padding:34px;border:1px solid var(--line);border-radius:18px;
  background:linear-gradient(180deg, rgba(110,168,255,.10), rgba(17,24,38,.10));
  overflow:hidden;
  min-height:420px;
}
.hero-bg{
  position:absolute;
  top:0;right:0;bottom:0;
  width:60%;
  background:linear-gradient(90deg, var(--bg) 0%, transparent 30%), 
    url('https://images.unsplash.com/photo-1621905251189-08b45d6a269e?w=800&q=80') center/cover no-repeat;
  opacity:0.7;
  z-index:0;
}
.hero-content{
  position:relative;
  z-index:1;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:40px;
}
.hero-text{
  flex:1;
  max-width:600px;
}
.hero-phone{
  flex-shrink:0;
  width:280px;
}
.phone-mockup{
  background:#1a2332;
  border-radius:32px;
  padding:12px;
  border:3px solid #2a3544;
  box-shadow:0 20px 60px rgba(0,0,0,0.5);
}
.phone-screen{
  background:#0d1117;
  border-radius:24px;
  overflow:hidden;
  min-height:380px;
}
.phone-header{
  background:linear-gradient(135deg, #1a2332, #0d1117);
  padding:16px;
  border-bottom:1px solid var(--line);
}
.phone-logo{
  font-weight:800;
  font-size:14px;
}
.phone-logo span{
  color:var(--accent);
}
.phone-content{
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.phone-message{
  padding:12px 14px;
  border-radius:16px;
  font-size:13px;
  line-height:1.4;
  max-width:85%;
}
.phone-message p{
  margin:0;
}
.phone-message.incoming{
  background:#1a2332;
  border:1px solid var(--line);
  align-self:flex-start;
}
.phone-message.outgoing{
  background:rgba(110,168,255,0.2);
  border:1px solid rgba(110,168,255,0.3);
  align-self:flex-end;
}
.kicker{color:var(--muted);font-size:14px;text-transform:uppercase;letter-spacing:.12em}
h1{font-size:40px;line-height:1.1;margin:10px 0 12px}
h2{font-size:28px;line-height:1.2;margin:0 0 10px}
h3{font-size:18px;margin:0 0 8px}
.lead{font-size:18px;color:var(--muted);max-width:74ch}
.strongline{margin-top:14px;font-weight:700}
.ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.small{font-size:13px;color:var(--muted);margin-top:10px}
.section{padding:26px 0}
.card{
  border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.03);
  padding:22px;
}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.col-12{grid-column:span 12}
.col-8{grid-column:span 8}
.col-6{grid-column:span 6}
.col-4{grid-column:span 4}
.col-3{grid-column:span 3}
.hr{height:1px;background:var(--line);margin:20px 0}
.list{margin:10px 0 0;padding-left:18px;color:var(--muted)}
.list li{margin:6px 0}
.split{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px
}
.badge{
  display:inline-block;font-size:12px;padding:6px 10px;border-radius:999px;
  border:1px solid var(--line);color:var(--muted)
}
.table{
  width:100%;border-collapse:collapse;margin-top:12px;overflow:hidden;border-radius:14px;
  border:1px solid var(--line)
}
.table th,.table td{padding:12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.table th{color:var(--muted);font-weight:600;background:rgba(255,255,255,.02)}
.footer{
  padding:26px 0;border-top:1px solid var(--line);margin-top:34px;color:var(--muted)
}
.footer a{color:var(--muted)}
.note{color:var(--muted)}
.faq details{border:1px solid var(--line);border-radius:14px;padding:14px 16px;background:rgba(255,255,255,.02)}
.faq details + details{margin-top:10px}
.faq summary{cursor:pointer;font-weight:600}
form{display:grid;gap:12px;margin-top:10px}
label{font-size:13px;color:var(--muted)}
input,select,textarea{
  width:100%;padding:12px 12px;border-radius:12px;border:1px solid var(--line);
  background:rgba(255,255,255,.03);color:var(--text)
}
textarea{min-height:110px;resize:vertical}
@media (max-width: 920px){
  h1{font-size:34px}
  .col-8,.col-6,.col-4,.col-3{grid-column:span 12}
  .split{grid-template-columns:1fr}
  .nav-inner{flex-direction:column;align-items:flex-start}
  .hero-content{flex-direction:column}
  .hero-phone{width:100%;max-width:280px}
  .hero-bg{width:100%;opacity:0.3}
}