:root{
  --bg:#08132a;
  --card:rgba(255,255,255,0.05);
  --line:rgba(255,255,255,0.12);
  --text:#fff;
  --muted:rgba(255,255,255,0.72);
  --accent:#f6c65a;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:Poppins,Arial,sans-serif;
  color:var(--text);
  background:linear-gradient(160deg,#040a18,#0b1732);
}
.preview-page{
  max-width:1280px;
  margin:0 auto;
  padding:24px;
}
.page-head h1{margin:0 0 8px 0;font-size:28px}
.page-head p{margin:0 0 22px 0;color:var(--muted)}
.preview-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:16px;
}
.shot{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px;
}
.shot h2{
  margin:0 0 10px 0;
  font-size:13px;
  color:var(--accent);
  letter-spacing:.03em;
}
.screen{
  height:190px;
  border-radius:10px;
  border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,0.08),rgba(255,255,255,0.03));
  padding:12px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:10px;
}
.screen-chat{position:relative}
.floating-wa{
  margin-top:auto;
  align-self:flex-end;
  background:#25d366;
  color:#0c1b24;
  font-weight:700;
  border-radius:999px;
  padding:8px 14px;
}
.popup,.seo-card,.workspace-card,.plan-card,.invoice{
  background:rgba(8,19,42,0.86);
  border:1px solid var(--line);
  border-radius:10px;
  padding:10px;
}
.popup p,.seo-card p,.workspace-card p,.plan-card p,.invoice p{margin:6px 0 0 0;color:var(--muted);font-size:12px}
.promo-banner{
  background:linear-gradient(90deg,#f6c65a,#d89b3a);
  color:#11213c;
  border-radius:8px;
  padding:10px 12px;
  font-weight:700;
}
.screen-map{position:relative;align-items:center;justify-content:center}
.pin{
  width:18px;height:18px;border-radius:50%;
  background:#ff5b5b;
  box-shadow:0 0 0 10px rgba(255,91,91,.2);
}
.screen-map p{margin:6px 0 0 0;color:var(--muted);font-size:12px}
.legal-bar{
  margin-top:auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  border:1px solid var(--line);
  border-radius:8px;
  background:rgba(0,0,0,.35);
  padding:8px;
  font-size:12px;
}
button,.action{
  border:0;
  border-radius:8px;
  padding:8px 10px;
  background:var(--accent);
  color:#11213c;
  font-weight:700;
}
.lang-switcher{
  align-self:flex-end;
  border:1px solid var(--line);
  border-radius:8px;
  padding:6px 10px;
  font-weight:700;
}
.center-note{margin:auto 0;color:var(--muted)}
.newsletter-form{display:flex;flex-direction:column;gap:8px}
.newsletter-form label{font-size:12px;color:var(--muted)}
.newsletter-form input{
  width:100%;
  border:1px solid var(--line);
  border-radius:8px;
  padding:8px 10px;
  background:rgba(255,255,255,.04);
  color:var(--text);
}
.chart-row,.est-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid var(--line);
  padding:6px 0;
  font-size:13px;
}
.est-row.total{font-weight:800;color:var(--accent)}
.slots{display:flex;gap:8px;flex-wrap:wrap}
.slots span{
  border:1px solid var(--line);
  border-radius:999px;
  padding:6px 10px;
  font-size:12px;
}
.coupon{
  display:flex;justify-content:space-between;align-items:center;
  border:1px dashed var(--accent);
  border-radius:10px;
  padding:12px;
  font-weight:800;
}