:root{
  --bg:#0b0b0b;
  --panel:#121212;
  --card:#141414;
  --border:#262626;
  --text:#ffffff;
  --muted:#bdbdbd;
  --primary:#d32f2f;
  --primary2:#ff5252;
  --shadow: 0 18px 45px rgba(0,0,0,.45);
  --r: 18px;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  background: radial-gradient(1200px 600px at 20% -10%, rgba(211,47,47,.18), transparent 50%),
              radial-gradient(900px 500px at 90% 10%, rgba(25,118,210,.14), transparent 55%),
              var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
}

a{color:inherit;}

.container{width:min(1040px, 92vw); margin:0 auto;}

.top{
  position:sticky; top:0; z-index:10;
  background:rgba(11,11,11,.75);
  border-bottom:1px solid rgba(255,255,255,.06);
  backdrop-filter: blur(12px);
}
.top-inner{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 0;
}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; font-weight:900;}
.mark{
  width:40px; height:40px; border-radius:14px;
  display:inline-flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, var(--primary), var(--primary2));
  box-shadow: 0 14px 30px rgba(211,47,47,.22);
}
.name{letter-spacing:.2px;}

.nav{display:none; gap:14px;}
.nav a{color:rgba(255,255,255,.78); text-decoration:none; font-weight:800; font-size:13px;}
.nav a:hover{color:#fff;}

.top-cta{display:flex; gap:10px;}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px;
  padding:11px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: #fff;
  text-decoration:none;
  font-weight:900;
}
.btn:hover{border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.08);}
.btn.primary{
  border-color: transparent;
  background: linear-gradient(135deg, var(--primary), var(--primary2));
  box-shadow: 0 18px 40px rgba(211,47,47,.22);
}
.btn.ghost{background: transparent;}

.hero{padding:32px 0 12px;}
.hero-grid{display:grid; grid-template-columns:1fr; gap:18px; align-items:center;}
.badge{
  display:inline-flex;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.86);
  font-weight:900;
  font-size:12px;
  margin:0 0 12px;
}
.hero h1{margin:0; font-size:34px; line-height:1.05; letter-spacing:-.6px;}
.lead{margin:12px 0 0; color: rgba(255,255,255,.80); font-size:15px; line-height:1.55;}
.cta-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px;}

.trust{display:grid; grid-template-columns:1fr; gap:10px; margin-top:18px;}
.trust-item{
  padding:12px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  background: rgba(255,255,255,.04);
}
.trust-item strong{display:block; font-size:13px;}
.trust-item span{display:block; font-size:12px; color:rgba(255,255,255,.72); margin-top:4px;}

.hero-card{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.10);
  border-radius: calc(var(--r) + 8px);
  box-shadow: var(--shadow);
  padding: 16px;
}
.phone{
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.10);
  background: #0f0f0f;
  overflow: hidden;
}
.phone-top{padding:10px; border-bottom:1px solid rgba(255,255,255,.06); display:flex; gap:6px;}
.dot{width:10px; height:10px; border-radius:999px; background: rgba(255,255,255,.12);}
.phone-body{padding:14px;}
.mini{padding:12px; background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:16px;}
.mini-title{font-weight:900;}
.mini-sub{margin-top:6px; color:rgba(255,255,255,.72); font-size:12px; line-height:1.3;}
.mini-actions{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px;}
.mini-btn{
  padding:12px;
  text-align:center;
  font-weight:900;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
}
.mini-btn.accent{grid-column:1 / -1; background: rgba(211,47,47,.18); border-color: rgba(211,47,47,.28);}
.mini-note{margin-top:10px; color:rgba(255,255,255,.62); font-size:12px;}

.section{padding:34px 0;}
.section-head h2{margin:0; font-size:22px;}
.section-head p{margin:10px 0 0; color:rgba(255,255,255,.72); font-size:13px; line-height:1.5;}

.steps{display:grid; grid-template-columns:1fr; gap:12px; margin-top:14px;}
.step{padding:14px; border-radius:var(--r); background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);}
.step .n{width:34px; height:34px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-weight:900; background: rgba(211,47,47,.18); border:1px solid rgba(211,47,47,.25);}
.step h3{margin:10px 0 6px; font-size:16px;}
.step p{margin:0; color:rgba(255,255,255,.72); font-size:13px; line-height:1.45;}

.cards{display:grid; grid-template-columns:1fr; gap:12px; margin-top:14px;}
.card{padding:14px; border-radius:var(--r); background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);}
.card h3{margin:0; font-size:16px;}
.card p{margin:8px 0 0; color:rgba(255,255,255,.72); font-size:13px; line-height:1.5;}

.highlight{
  margin-top:14px;
  padding:16px;
  border-radius: calc(var(--r) + 6px);
  border:1px solid rgba(211,47,47,.22);
  background: linear-gradient(135deg, rgba(211,47,47,.16), rgba(255,255,255,.03));
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}
.highlight h3{margin:0; font-size:16px;}
.highlight p{margin:8px 0 0; color:rgba(255,255,255,.72); font-size:13px;}

.plans{display:grid; grid-template-columns:1fr; gap:12px; margin-top:14px;}
.plan{
  padding:16px;
  border-radius: calc(var(--r) + 6px);
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  position:relative;
}
.plan-top h3{margin:0; font-size:16px;}
.price{margin-top:10px; font-size:24px; font-weight:900;}
.per{margin-top:4px; color:rgba(255,255,255,.70); font-size:12px;}
.list{margin:12px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:10px;}
.list li{position:relative; padding-left:22px; color:rgba(255,255,255,.78); font-size:13px;}
.list li:before{content:'✓'; position:absolute; left:0; top:0; color:rgba(255,255,255,.92);}
.plan .fine{margin-top:10px; color:rgba(255,255,255,.58); font-size:12px; line-height:1.35;}
.featured{border-color: rgba(211,47,47,.30); background: linear-gradient(180deg, rgba(211,47,47,.14), rgba(255,255,255,.03));}
.ribbon{position:absolute; right:14px; top:14px; font-size:12px; font-weight:900; padding:6px 10px; border-radius:999px; background: rgba(211,47,47,.18); border:1px solid rgba(211,47,47,.28);}

.cta{padding:34px 0 44px;}
.cta-inner{
  padding:18px;
  border-radius: calc(var(--r) + 10px);
  border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  box-shadow: var(--shadow);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.cta-inner h2{margin:0; font-size:20px;}
.cta-inner p{margin:8px 0 0; color:rgba(255,255,255,.72); font-size:13px;}

.footer{border-top:1px solid rgba(255,255,255,.06); padding:26px 0 34px; background:rgba(0,0,0,.18);}
.foot{display:grid; grid-template-columns:1fr; gap:16px;}
.foot-title{font-weight:900; margin-bottom:8px;}
.link{color:rgba(255,255,255,.86);}

@media (min-width: 860px){
  .nav{display:flex;}
  .hero{padding:54px 0 12px;}
  .hero-grid{grid-template-columns: 1.1fr .9fr;}
  .hero h1{font-size:44px;}
  .trust{grid-template-columns: repeat(3, 1fr);}
  .steps{grid-template-columns: repeat(4, 1fr);}
  .cards{grid-template-columns: repeat(2, 1fr);}
  .plans{grid-template-columns: 1fr 1fr;}
  .foot{grid-template-columns: 1.1fr 1fr 1fr;}
}