:root{
  --bg0:#f5f7ff;
  --bg1:#eef6ff;
  --ink:#0b1020;
  --muted:#4b5563;
  --card:#ffffffcc;
  --stroke:rgba(15,23,42,.12);
  --shadow:0 18px 50px rgba(2,6,23,.12);
  --shadow2:0 10px 28px rgba(2,6,23,.10);
  --blue:#2563eb;
  --sky:#0ea5e9;
  --indigo:#6366f1;
  --green:#10b981;
  --radius:22px;
  --radius2:16px;
  --max:1120px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  color:var(--ink);
  background:
    radial-gradient(1100px 600px at 20% 10%, rgba(14,165,233,.22), transparent 55%),
    radial-gradient(900px 520px at 80% 18%, rgba(99,102,241,.18), transparent 55%),
    radial-gradient(900px 520px at 70% 85%, rgba(16,185,129,.12), transparent 60%),
    linear-gradient(180deg, var(--bg1), var(--bg0));
  overflow-x:hidden;
}
a{color:inherit}
.container{max-width:var(--max); margin:0 auto; padding:0 22px}
.topbar{
  position:sticky; top:0; z-index:60;
  backdrop-filter: blur(14px);
  background: rgba(245,247,255,.70);
  border-bottom:1px solid var(--stroke);
}
.topbar-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
}
.brand{
  display:flex; gap:12px; align-items:center;
}
.logo{
  width:38px; height:38px; border-radius:14px;
  background: linear-gradient(135deg, rgba(14,165,233,.95), rgba(99,102,241,.95));
  box-shadow: 0 14px 40px rgba(37,99,235,.22);
  position:relative;
}
.logo:after{
  content:"";
  position:absolute; inset:10px 9px 10px 9px;
  border-radius:12px;
  background: rgba(255,255,255,.22);
  border:1px solid rgba(255,255,255,.35);
}
.brand h1{
  margin:0; font-size:15px; letter-spacing:.2px; line-height:1.1;
}
.brand small{display:block; margin-top:2px; color:var(--muted); font-weight:600}
.nav{
  display:flex; gap:18px; align-items:center;
}
.nav a{
  text-decoration:none; font-weight:700; color:#111827;
  padding:10px 10px; border-radius:12px;
}
.nav a:hover{background: rgba(15,23,42,.06)}
.nav .cta{
  background: linear-gradient(135deg, rgba(37,99,235,.95), rgba(14,165,233,.90));
  color:white; padding:10px 14px; border-radius:999px;
  box-shadow: 0 14px 40px rgba(37,99,235,.22);
}
.nav .cta:hover{filter:brightness(1.03)}
.nav .phone{display:none; color:var(--muted); font-weight:700}

.hero{
  padding:44px 0 26px;
}
.hero-grid{
  display:grid; grid-template-columns: 1.2fr .8fr; gap:26px; align-items:stretch;
}
.kicker{
  display:inline-flex; gap:10px; align-items:center;
  padding:10px 14px; border-radius:999px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.65);
  color:#0f172a;
  font-weight:800;
  box-shadow: var(--shadow2);
}
.kicker .dot{
  width:10px; height:10px; border-radius:999px;
  background: linear-gradient(135deg, var(--sky), var(--indigo));
  box-shadow: 0 10px 20px rgba(37,99,235,.25);
}
.hero h2{
  margin:16px 0 12px;
  font-size: clamp(40px, 5vw, 60px);
  letter-spacing:-.02em;
  line-height:1.02;
}
.hero p{
  margin:0;
  color:#374151;
  font-size: clamp(16px, 1.8vw, 18px);
  line-height:1.55;
}
.hero-actions{
  display:flex; gap:12px; align-items:center;
  margin-top:18px; flex-wrap:wrap;
}
.btn{
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.70);
  padding:12px 16px; border-radius:999px;
  text-decoration:none; font-weight:900;
  box-shadow: var(--shadow2);
}
.btn.primary{
  border:none;
  background: linear-gradient(135deg, rgba(37,99,235,.95), rgba(99,102,241,.90));
  color:white;
}
.btn:hover{transform: translateY(-1px)}
.btn:active{transform: translateY(0)}
.hero-side{
  border-radius: var(--radius);
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.60);
  box-shadow: var(--shadow);
  padding:18px;
  position:relative;
  overflow:hidden;
}
.hero-side:before{
  content:"";
  position:absolute; inset:-140px -120px auto auto;
  width:320px; height:320px;
  background: radial-gradient(circle at 30% 30%, rgba(14,165,233,.40), transparent 60%),
              radial-gradient(circle at 70% 70%, rgba(99,102,241,.28), transparent 60%);
  filter: blur(2px);
}
.stats{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:12px;
  margin-top:12px;
}
.stat{
  border-radius: 18px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.62);
  padding:12px 12px;
}
.stat b{display:block; font-size:18px}
.stat span{display:block; color:var(--muted); font-weight:700; margin-top:4px; font-size:13px}

.section{padding:34px 0}
.section h3{
  margin:0 0 8px;
  font-size: 30px;
  letter-spacing:-.02em;
}
.section p.lead{margin:0 0 18px; color:#374151; line-height:1.6}
.grid-3{display:grid; grid-template-columns: repeat(3, 1fr); gap:16px}
.grid-2{display:grid; grid-template-columns: repeat(2, 1fr); gap:16px}
.card{
  border-radius: var(--radius);
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.70);
  box-shadow: var(--shadow2);
  padding:18px;
}
.card h4{margin:0 0 8px; font-size:18px}
.card ul{margin:0; padding-left:18px; color:#374151; line-height:1.55}
.badge{
  display:inline-flex; gap:8px; align-items:center;
  padding:8px 10px; border-radius:999px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.70);
  font-weight:900; color:#0f172a;
}
.badge i{
  width:10px; height:10px; border-radius:999px;
  background: linear-gradient(135deg, var(--green), var(--sky));
}
.process{
  display:grid; gap:12px;
}
.step{
  display:flex; gap:14px; align-items:flex-start;
}
.step .num{
  width:38px; height:38px; border-radius:14px;
  background: linear-gradient(135deg, rgba(14,165,233,.95), rgba(99,102,241,.95));
  color:white; display:flex; align-items:center; justify-content:center;
  font-weight:1000;
  box-shadow: 0 18px 50px rgba(37,99,235,.18);
  flex:0 0 auto;
}
.step b{display:block; margin-bottom:4px}
.step p{margin:0; color:#374151; line-height:1.6}
.results{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:16px;
}
.metric{
  border-radius: var(--radius);
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.65);
  padding:18px;
  box-shadow: var(--shadow2);
}
.metric b{display:block; font-size:26px}
.metric span{display:block; color:var(--muted); font-weight:700; margin-top:6px}

.pricing{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:16px;
}
.price{
  position:relative;
}
.price .tag{
  position:absolute; top:14px; right:14px;
  padding:8px 10px; border-radius:999px;
  background: rgba(37,99,235,.12);
  border:1px solid rgba(37,99,235,.22);
  color:#1d4ed8;
  font-weight:900; font-size:12px;
}
.price h4{margin:0 0 6px}
.price .money{font-size:30px; font-weight:1000; margin:8px 0}
.price .sub{color:var(--muted); font-weight:800; margin:0 0 12px}
.price ul{margin:0; padding-left:18px; color:#374151; line-height:1.55}
.price .act{margin-top:14px; display:flex; gap:10px}
.price .act a{flex:1; text-align:center}
.price.pop{
  border:1px solid rgba(37,99,235,.28);
  box-shadow: 0 24px 70px rgba(37,99,235,.18);
  background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.68));
}
.faq{
  display:grid; gap:10px;
}
details{
  border-radius:18px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.70);
  box-shadow: var(--shadow2);
  padding:12px 14px;
}
summary{
  cursor:pointer;
  font-weight:900;
  list-style:none;
}
summary::-webkit-details-marker{display:none}
details p{margin:10px 0 0; color:#374151; line-height:1.6}

.form{
  display:grid; grid-template-columns: 1fr 1fr; gap:12px;
  margin-top:12px;
}
.field{
  display:flex; flex-direction:column; gap:8px;
}
label{font-weight:900}
input, textarea, select{
  border-radius:14px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.85);
  padding:12px 12px;
  font:inherit;
  outline:none;
}
textarea{min-height:110px; resize:vertical}
.full{grid-column:1/-1}
.footer{
  padding:30px 0 44px;
  border-top: 1px solid var(--stroke);
  color:var(--muted);
}
.footer-grid{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; flex-wrap:wrap;
}
.footer a{color:inherit; text-decoration:none; font-weight:800}
.footer a:hover{text-decoration:underline}

.samples-grid{
  display:grid; grid-template-columns: 1.2fr .8fr; gap:16px;
}
.mock{
  border-radius: var(--radius);
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.72);
  box-shadow: var(--shadow2);
  overflow:hidden;
}
.mock .head{
  padding:14px 16px;
  display:flex; justify-content:space-between; align-items:center;
  background: rgba(255,255,255,.80);
  border-bottom:1px solid var(--stroke);
}
.mock .head b{font-size:14px}
.mock .pill{
  font-size:12px; font-weight:900; padding:8px 10px; border-radius:999px;
  background: rgba(16,185,129,.12);
  border:1px solid rgba(16,185,129,.20);
  color:#047857;
}
.mock .canvas{
  padding:16px;
  background:
    radial-gradient(700px 300px at 20% 20%, rgba(14,165,233,.20), transparent 55%),
    radial-gradient(700px 300px at 90% 15%, rgba(99,102,241,.16), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.75));
}
.mock .preview{
  border-radius:18px;
  border:1px solid rgba(15,23,42,.10);
  background:white;
  overflow:hidden;
}
.mock .preview .bar{
  display:flex; gap:8px; align-items:center;
  padding:10px 12px;
  background: #0b1220;
  color: rgba(255,255,255,.9);
  font-weight:800;
}
.dot3{display:flex; gap:6px}
.dot3 span{width:10px; height:10px; border-radius:999px; background: rgba(255,255,255,.18)}
.mock .preview .body{
  padding:16px;
}
.mock .preview h5{margin:0 0 10px; font-size:20px}
.mock .preview p{margin:0; color:#374151; line-height:1.6}
.mock .preview .cta-row{display:flex; gap:10px; margin-top:14px}
.mock .preview .cta-row a{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 12px; border-radius:999px;
  text-decoration:none; font-weight:900;
  border:1px solid rgba(37,99,235,.22);
  background: rgba(37,99,235,.12);
  color:#1d4ed8;
}
.mock .preview .cta-row a.primary{
  border:none; background: linear-gradient(135deg, rgba(37,99,235,.95), rgba(14,165,233,.92)); color:white;
}
.social-cards{display:grid; gap:12px}
.social{
  border-radius: var(--radius);
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.72);
  box-shadow: var(--shadow2);
  overflow:hidden;
}
.social .meta{
  padding:14px 16px;
  display:flex; justify-content:space-between; align-items:center;
  border-bottom:1px solid var(--stroke);
  background: rgba(255,255,255,.80);
}
.social .meta b{font-size:14px}
.social .img{
  height:170px;
  background:
    radial-gradient(260px 160px at 20% 40%, rgba(14,165,233,.25), transparent 60%),
    radial-gradient(260px 160px at 80% 30%, rgba(99,102,241,.18), transparent 60%),
    linear-gradient(135deg, rgba(15,23,42,.12), rgba(15,23,42,.06));
}
.social .copy{padding:14px 16px}
.social .copy p{margin:0; color:#374151; line-height:1.6}
.social .copy small{display:block; margin-top:8px; color:var(--muted); font-weight:800}


/* --- Mock Samples: richer, "ready to deploy" visuals (Urbanbytez) --- */
.mock-window{
  overflow:hidden;
}
.mock-window.landing, .mock-window.social, .mock-window.dashboard{
  min-height: 420px;
}

/* Landing page mock */
.landing{ background: radial-gradient(700px 320px at 75% 20%, rgba(59,130,246,.28), transparent 60%),
                     radial-gradient(700px 320px at 25% 0%, rgba(34,197,94,.22), transparent 55%),
                     linear-gradient(180deg, rgba(8,14,28,.75), rgba(8,14,28,.92)); }
.landing .lp-top{
  display:flex; align-items:center; gap:12px;
  padding:16px 18px 12px; border-bottom:1px solid rgba(255,255,255,.09);
}
.landing .lp-brand{ font-weight:900; letter-spacing:.2px; color:#eaf0ff; }
.landing .lp-nav{ display:flex; gap:10px; opacity:.85; font-size:12px; margin-left:auto; }
.landing .lp-nav span{ padding:6px 10px; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); }
.landing .lp-cta{ font-size:12px; font-weight:800; padding:8px 12px; border-radius:999px;
  background:linear-gradient(135deg, rgba(59,130,246,.95), rgba(99,102,241,.92));
  border:1px solid rgba(255,255,255,.18);
}

.landing .lp-hero{ display:grid; grid-template-columns: 1.2fr 1fr; gap:18px; padding:18px; }
.landing .lp-eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:12px; opacity:.9;
  padding:6px 10px; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); width:max-content; }
.landing .lp-h1{ font-size:26px; line-height:1.1; margin:10px 0 8px; font-weight:950; color:#f3f6ff; }
.landing .lp-sub{ font-size:13px; line-height:1.5; opacity:.9; }
.landing .lp-actions{ display:flex; gap:10px; margin-top:12px; }
.landing .lp-btn{ display:inline-flex; align-items:center; justify-content:center; padding:10px 14px; border-radius:999px; font-weight:850; font-size:12px; }
.landing .lp-btn.primary{ background:linear-gradient(135deg, rgba(34,197,94,.95), rgba(16,185,129,.9));
  border:1px solid rgba(255,255,255,.18); color:#07151a; }
.landing .lp-btn.ghost{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); color:#eaf0ff; }
.landing .lp-btn.full{ width:100%; margin-top:10px; }

.landing .lp-proof{ display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; margin-top:12px; }
.landing .lp-proof-item{ padding:10px 12px; border-radius:14px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); }
.landing .lp-proof-item strong{ font-size:14px; display:block; }
.landing .lp-proof-item span{ font-size:11px; opacity:.8; }

.landing .lp-card{
  padding:14px; border-radius:18px; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1); box-shadow: 0 18px 50px rgba(0,0,0,.35);
}
.landing .lp-card-title{ font-weight:900; font-size:12px; opacity:.95; }
.landing .lp-mini-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap:10px; margin-top:10px; }
.landing .lp-kpi{ padding:10px 10px; border-radius:14px; background:rgba(8,14,28,.55); border:1px solid rgba(255,255,255,.08); }
.landing .lp-kpi .k{ font-size:10px; opacity:.75; }
.landing .lp-kpi .v{ font-size:16px; font-weight:950; margin-top:2px; }
.landing .lp-kpi .d{ font-size:10px; opacity:.82; margin-top:2px; }
.landing .lp-mini-chart{ display:flex; align-items:flex-end; gap:6px; height:70px; margin-top:10px; padding:10px; border-radius:14px;
  background:rgba(8,14,28,.55); border:1px solid rgba(255,255,255,.08);
}
.landing .lp-mini-chart .bar{ width:10px; border-radius:10px; background:linear-gradient(180deg, rgba(59,130,246,.95), rgba(99,102,241,.75)); }

.landing .lp-features{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.landing .lp-pill{ font-size:11px; padding:7px 10px; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); opacity:.92; }

.landing .lp-mid{ padding:0 18px 16px; }
.landing .lp-row{ display:grid; grid-template-columns: 1.1fr 1.1fr .8fr; gap:12px; }
.landing .lp-block{ border-radius:18px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); padding:14px; }
.landing .lp-block .h{ font-weight:950; margin-bottom:8px; }
.landing .lp-block ul{ margin:0; padding-left:18px; font-size:12px; line-height:1.45; opacity:.9; }
.landing .lp-test{ display:flex; gap:10px; padding:10px 0; border-top:1px solid rgba(255,255,255,.08); }
.landing .lp-test:first-of-type{ border-top:0; padding-top:2px; }
.landing .lp-test .avatar{ width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg, rgba(34,197,94,.6), rgba(59,130,246,.55)); border:1px solid rgba(255,255,255,.14); }
.landing .lp-test .n{ font-weight:900; font-size:12px; }
.landing .lp-test .q{ font-size:12px; opacity:.85; line-height:1.35; }
.landing .lp-price{ display:flex; align-items:baseline; gap:10px; }
.landing .lp-price .p{ font-size:22px; font-weight:950; }
.landing .lp-price .s{ font-size:11px; opacity:.8; }
.landing .lp-fine{ font-size:10px; opacity:.7; margin-top:8px; }
.landing .lp-footer{
  display:flex; justify-content:space-between; gap:10px; padding:12px 18px 14px;
  border-top:1px solid rgba(255,255,255,.09); font-size:11px; opacity:.85;
}

/* Social post mock */
.social{ background: radial-gradient(650px 280px at 20% 10%, rgba(99,102,241,.22), transparent 55%),
                   radial-gradient(650px 280px at 80% 0%, rgba(59,130,246,.18), transparent 60%),
                   linear-gradient(180deg, rgba(10,14,26,.85), rgba(10,14,26,.96)); }
.social .soc-top{ display:flex; align-items:center; gap:10px; padding:16px 18px 10px; border-bottom:1px solid rgba(255,255,255,.08); }
.social .soc-avatar{ width:34px; height:34px; border-radius:12px; background:linear-gradient(135deg, rgba(59,130,246,.8), rgba(34,197,94,.65)); border:1px solid rgba(255,255,255,.14); }
.social .soc-name{ font-weight:950; font-size:12px; }
.social .soc-sub{ font-size:10px; opacity:.75; margin-top:2px; }
.social .soc-follow{ margin-left:auto; font-size:11px; font-weight:900; padding:8px 12px; border-radius:999px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); }
.social .soc-media{ margin:12px 18px; border-radius:22px; padding:16px;
  background: radial-gradient(500px 220px at 20% 30%, rgba(34,197,94,.22), transparent 55%),
              radial-gradient(520px 240px at 85% 35%, rgba(59,130,246,.25), transparent 60%),
              linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.12);
  min-height: 250px;
  display:flex; flex-direction:column; justify-content:flex-end; gap:10px;
}
.social .soc-badge{ width:max-content; font-size:10px; font-weight:900; padding:6px 10px; border-radius:999px;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.14); }
.social .soc-title{ font-size:22px; font-weight:950; line-height:1.1; }
.social .soc-copy{ font-size:12px; line-height:1.45; opacity:.9; max-width: 520px; }
.social .soc-chips{ display:flex; gap:8px; flex-wrap:wrap; }
.social .soc-chips span{ font-size:10px; padding:6px 10px; border-radius:999px; background:rgba(8,14,28,.5); border:1px solid rgba(255,255,255,.12); }
.social .soc-cta{ width:max-content; font-size:12px; font-weight:950; padding:10px 14px; border-radius:999px;
  background:linear-gradient(135deg, rgba(59,130,246,.95), rgba(99,102,241,.88)); border:1px solid rgba(255,255,255,.18); }

.social .soc-actions{ display:flex; align-items:center; gap:10px; padding:0 18px; }
.social .soc-actions .ico, .social .soc-actions .save{
  width:28px; height:28px; border-radius:10px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
}
.social .soc-actions .save{ margin-left:auto; width:34px; }
.social .soc-stats{ padding:10px 18px 4px; font-size:11px; opacity:.9; }
.social .soc-caption{ padding:6px 18px; font-size:11px; line-height:1.4; opacity:.9; }
.social .soc-caption .hash{ opacity:.85; margin-left:6px; }
.social .soc-comments{ padding:10px 18px 16px; border-top:1px solid rgba(255,255,255,.08); }
.social .soc-comments .c{ font-size:11px; line-height:1.35; opacity:.9; margin-top:6px; }
.social .soc-comments .u{ font-weight:950; margin-right:6px; }

/* Dashboard mock */
.dashboard{ background: radial-gradient(650px 280px at 15% 10%, rgba(34,197,94,.18), transparent 55%),
                      radial-gradient(650px 280px at 85% 0%, rgba(59,130,246,.22), transparent 60%),
                      linear-gradient(180deg, rgba(8,14,28,.82), rgba(8,14,28,.96)); }
.dashboard .dash-top{ display:flex; align-items:center; justify-content:space-between; padding:16px 18px 10px; border-bottom:1px solid rgba(255,255,255,.08); }
.dashboard .dash-title{ font-weight:950; font-size:12px; }
.dashboard .dash-range{ font-size:11px; opacity:.8; padding:6px 10px; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); }
.dashboard .dash-kpis{ display:grid; grid-template-columns: repeat(4, 1fr); gap:10px; padding:12px 18px; }
.dashboard .dash-kpi{ padding:12px; border-radius:16px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); }
.dashboard .dash-kpi .k{ font-size:10px; opacity:.75; }
.dashboard .dash-kpi .v{ font-size:18px; font-weight:950; margin-top:3px; }
.dashboard .dash-kpi .d{ font-size:10px; opacity:.85; margin-top:2px; }
.dashboard .dash-grid{ display:grid; grid-template-columns: 1.2fr 1fr 1fr; gap:10px; padding:0 18px 18px; }
.dashboard .dash-card{ padding:14px; border-radius:18px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); }
.dashboard .dash-card .h{ font-weight:950; font-size:12px; }
.dashboard .dash-card .fine{ font-size:10px; opacity:.7; margin-top:8px; }
.dashboard .spark{ display:flex; align-items:flex-end; gap:6px; height:92px; margin-top:10px; padding:10px; border-radius:14px;
  background:rgba(8,14,28,.55); border:1px solid rgba(255,255,255,.08); }
.dashboard .spark span{ width:10px; border-radius:10px; background:linear-gradient(180deg, rgba(34,197,94,.95), rgba(16,185,129,.72)); }
.dashboard .rows{ margin-top:10px; }
.dashboard .rows .r{ display:flex; justify-content:space-between; padding:8px 10px; border-radius:12px; margin-top:8px;
  background:rgba(8,14,28,.55); border:1px solid rgba(255,255,255,.08); font-size:11px; opacity:.9; }
.dashboard .rows .r em{ font-style:normal; opacity:.85; }
.dashboard .funnel{ margin-top:10px; display:grid; grid-template-columns: 1fr; gap:8px; }
.dashboard .funnel div{ padding:10px 12px; border-radius:14px; background:rgba(8,14,28,.55); border:1px solid rgba(255,255,255,.08); font-size:11px; opacity:.9; }
.dashboard .funnel .f1{ width:100%; }
.dashboard .funnel .f2{ width:88%; }
.dashboard .funnel .f3{ width:72%; }
.dashboard .funnel .f4{ width:58%; }

/* Responsiveness */
@media (max-width: 560px){
  .landing .lp-hero{ grid-template-columns: 1fr; }
  .landing .lp-proof{ grid-template-columns: 1fr; }
  .landing .lp-row{ grid-template-columns: 1fr; }
  .landing .lp-nav{ display:none; }
  .dashboard .dash-kpis{ grid-template-columns: repeat(2, 1fr); }
  .dashboard .dash-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr 1fr}
  .grid-3, .pricing, .results{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .samples-grid{grid-template-columns:1fr}
  .nav .phone{display:inline}
}
@media (max-width: 560px){
  .nav a:not(.cta){display:none}
  .nav .phone{display:none}
  .hero{padding-top:30px}
  .stats{grid-template-columns:1fr}
  .hero h2{font-size:42px}
}