:root{
  --bg:#070b14; --pane:#0b1427; --pane2:#0a1222; --border:#1b2942;
  --text:#e7ecf5; --muted:#a9b7cf; --headline:#f4f7fb; --accent:#00e7a7;
  --wa:#25d366; --tg:#2aabee; --shadow:0 30px 70px rgba(0,0,0,.55);
}
*{box-sizing:border-box}
html,body{margin:0;background:radial-gradient(1400px 700px at 10% -10%,#0f1a33 0%,#070b14 60%),linear-gradient(180deg,#0a1224,#050910);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial}
.wrap{max-width:980px;margin:0 auto;padding:24px}
header{display:flex;justify-content:space-between;align-items:center;margin:8px 0 20px}
.brand{display:flex;align-items:center;gap:12px}
.brand img {
  width: 120px !important;  /* force it bigger */
  height: auto !important;
  border-radius: 12px;
}
.brand .title{font-family:"Plus Jakarta Sans",Inter,sans-serif;font-weight:800;letter-spacing:.2px}
.brand .tag{font-size:12px;color:var(--muted);margin-top:2px}
.card{background:linear-gradient(180deg,var(--pane),var(--pane2));border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);overflow:hidden}
.progress{display:flex;gap:8px;padding:16px;border-bottom:1px solid var(--border)}
.pdot{flex:1;height:6px;border-radius:999px;background:#11203b;position:relative;overflow:hidden}
.pdot span{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,#00e7a7,#00c1ff)}
.step{padding:22px}
h1{font-family:"Plus Jakarta Sans",Inter,sans-serif;font-size:28px;margin:0 0 10px;color:var(--headline)}
p.lead{color:#c6d2e6;margin:0 0 16px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid .full{grid-column:1/-1}
@media (max-width:800px){.grid{grid-template-columns:1fr}}
label{font-size:13px;color:#c3d0e8;margin-bottom:6px;display:block}
select,input,textarea{width:100%;padding:12px;border-radius:12px;border:1px solid #24314a;background:#0a1327;color:#eff4ff}
.btnbar{display:flex;justify-content:space-between;gap:10px;margin-top:14px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;border-radius:12px;border:1px solid #284062;background:#142744;color:#dfe8f8;font-weight:700;cursor:pointer;text-decoration:none;min-width:120px}
.btn.primary{background:linear-gradient(90deg,#00e7a7,#00c1ff);color:#052221;border-color:transparent}
.btn.ghost{background:transparent}
.btn.wa{background:var(--wa);border-color:transparent;color:#062c12}
.btn.tg{background:var(--tg);border-color:transparent;color:#041a27}
.row{display:flex;gap:10px;flex-wrap:wrap}
hr.line{border:0;border-top:1px solid var(--border);margin:14px 0}
.kv{display:grid;grid-template-columns:160px 1fr;gap:8px;margin:8px 0}
.kv div:first-child{color:#bcd0ea}
.price{font-size:28px;font-weight:800}
.badge{display:inline-block;border:1px solid #2a3c5f;background:#0c1a33;color:#cfe2ff;border-radius:999px;padding:6px 10px;font-size:12px;margin-right:8px}
.note{font-size:12px;color:#a6b6cf}
footer{color:#9fb0c9;padding:16px 8px;text-align:center}

/* Modal & toast */
.modal{position:fixed;inset:0;background:rgba(3,7,18,.7);display:none;place-items:center;z-index:60}
.modal.open{display:grid}
.modal-card{width:min(640px,92vw);background:#0b1427;border:1px solid #213559;border-radius:16px;box-shadow:var(--shadow);padding:16px}
.modal-card h4{margin:0 0 8px}
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:#0c162b;border:1px solid #224064;color:#d9e6ff;padding:10px 14px;border-radius:10px;opacity:0;transition:opacity .3s;z-index:70}
.toast.show{opacity:1}

.wrap{ padding-bottom:120px; }
@media (max-width:520px){ .wrap{ padding-bottom:130px; } }

/* header chips spacing */
.header-badges{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }

.header-badges .badge {
  font-size: 12px;       /* keep text a bit smaller */
  padding: 2px 8px;      /* much less vertical padding */
  line-height: 1.2;      /* reduce pill height */
  border-radius: 999px;
  background: #0e1c33;
  color: #cfdaf0;
  border: 1px solid #243a5f;
  font-weight: 600;
}
/* announcement bar you showed above */
.announce{
  margin-top:14px; padding:16px 18px; border-radius:16px;
  background: linear-gradient(90deg,#00e7a7,#00c1ff);
  color:#052221; font-weight:800; box-shadow: var(--shadow);
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
}
.announce .pill{
  background: rgba(255,255,255,.22);
  padding:8px 12px; border-radius:999px; font-size:12.5px;
}

/* optional: compact card spacing (uses your existing .card look) */
.card.compact{ padding:18px 20px; }

/* readability bump for text inside cards (keeps your dark theme) */
.card p, .card li, .card div{ color:#dfe8f8; }

/* FAQ badges row */
.facts{ display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }
.facts .badge{ margin:0; }

/* sticky trust strip */
.trust-strip{
  position: fixed; left:0; right:0; bottom:0; z-index:60;
  background: rgba(7,11,20,.92); backdrop-filter: blur(6px);
  border-top:1px solid rgba(255,255,255,.08);
  display:flex; justify-content:center; align-items:center; gap:14px; flex-wrap:wrap;
  padding:10px 14px;
}
.trust-strip .item{ color:#eaf0ff; font-weight:600; font-size:13.5px; white-space:nowrap; }
.trust-strip .dot{ width:4px; height:4px; border-radius:999px; background:#7fa7ff; opacity:.7; }
.trust-strip .cta{
  background: linear-gradient(90deg,#00e7a7,#00c1ff);
  color:#052221; font-weight:800; padding:8px 12px; border-radius:10px; text-decoration:none;
}

@media (max-width: 540px){

  /* Container + header */
  .wrap{ padding:18px 14px 120px; max-width: 100%; }
  header{ flex-direction: column; align-items: flex-start; gap: 10px; margin: 0 0 10px; }
  .brand{ gap:10px }
  .brand img{ width:40px; height:40px; }
  .brand .title{ font-size:20px }
  .brand .tag{ font-size:12px }
  .header-badges{ gap:8px; }

  /* Headings & text rhythm */
  h1{ font-size:22px; margin: 0 0 8px; }
  p.lead{ font-size:14px; margin-bottom:12px; }

  /* Announcement bar: horizontal scroll chips (no wrap) */
  .announce{
    padding:12px; border-radius:14px; gap:8px;
    overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch;
  }
  .announce::-webkit-scrollbar{ display:none; }
  .announce .pill{ display:inline-block; padding:7px 10px; font-size:12px; }

  /* Cards */
  .card{ border-radius:14px; box-shadow: var(--shadow); }
  .card.compact{ padding:14px; }
  .card h3, .section-title{ font-size:18px; margin-bottom:6px; }
  .card p, .card li, .card div{ font-size:14px; line-height:1.5; }

  /* Wizard */
  .progress{ padding:12px; gap:6px; }
  .pdot{ height:5px; }
  .step{ padding:14px; }
  .grid{ grid-template-columns: 1fr; gap:12px; }
  .btnbar{ flex-direction: column; gap:10px; }
  .btn{ width:100%; min-width:0; padding:11px 14px; border-radius:10px; }
  .kv{ grid-template-columns: 120px 1fr; gap:6px; }
  .price{ font-size:22px; }

  /* Badges row in FAQ */
  .facts{ gap:8px; }

  /* Sticky trust strip — compact, touch-friendly */
  .trust-strip{
    padding:8px 10px; gap:10px;
  }
  .trust-strip .item{ font-size:12.5px; }
  .trust-strip .cta{
    padding:8px 12px; border-radius:10px;
  }
}

/* Even smaller phones (≤ 360) */
@media (max-width: 360px){
  .brand .title{ font-size:18px }
  .announce{ padding:10px }
  .card.compact{ padding:12px }
  .btn{ padding:10px 12px }
  .kv{ grid-template-columns: 100px 1fr; }
}

:root{
  --radius: 16px;
  --elev: 0 18px 50px rgba(0,0,0,.45);
}
h1{ font-size: clamp(22px, 3.2vw, 30px); letter-spacing:.1px }
.section-title{ font-family:"Plus Jakarta Sans",Inter,sans-serif; font-weight:800; letter-spacing:.2px }
.card p, .card li, .card div{ color:#e3ebfb }

/* Cards: softer, premium look */
.card{
  border-radius: var(--radius);
  border: 1px solid rgba(164,186,220,.14);
  box-shadow: var(--elev);
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)) ,
    linear-gradient(180deg, var(--pane), var(--pane2));
}

/* Spacing and layout */
.wrap{ max-width: 1100px; padding: 28px 22px 120px; }
.card.compact{ padding: 18px 20px; }
#app.card{ margin-top: 18px; }
@media (max-width:900px){ .wrap{ padding-bottom: 130px; }}

/* Announcement bar – pro variant */
.announce.pro{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:14px 16px; border-radius: calc(var(--radius) + 2px);
  background: linear-gradient(90deg, rgba(0,231,167,.25), rgba(0,193,255,.25));
  border: 1px solid rgba(164,186,220,.18);
  box-shadow: var(--elev);
}
.announce.pro .pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:999px;
  background:#0e1e37; border:1px solid #294264; color:#d5e6ff; font-weight:700; font-size:12.5px;
}
.announce.pro .pill.strong{
  background:linear-gradient(90deg,#00e7a7,#00c1ff); color:#052221; border-color:transparent;
}

/* Two-column info grid (desktop) */
.pro-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; margin-top:16px; }
@media (max-width:920px){ .pro-grid{ grid-template-columns:1fr; }}

/* Form controls – crisper */
select,input,textarea{
  border:1px solid #2a3c5f;
  background:#0a1327;
  transition: border-color .15s ease, box-shadow .15s ease;
}
select:focus,input:focus,textarea:focus{
  outline:none;
  border-color:#3c74ff;
  box-shadow:0 0 0 3px rgba(60,116,255,.18);
}

/* Buttons – refined hover/active */
.btn{ transition: transform .06s ease, filter .2s ease; }
.btn:hover{ filter:brightness(1.05) }
.btn:active{ transform: translateY(1px) }
.btn.primary{ box-shadow: 0 8px 24px rgba(0,193,255,.22) }

/* Wizard: more air, stable grid on desktop, single column on mobile */
.progress{ padding:18px 18px 12px }
.step{ padding:20px }
.grid{ gap:16px }
@media (max-width:800px){ .grid{ grid-template-columns:1fr }}

/* Key-value summary tighter */
.kv{ grid-template-columns: 170px 1fr; gap:10px }
@media (max-width:520px){ .kv{ grid-template-columns: 120px 1fr; gap:6px }}

.trust-strip {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding: 12px 16px;

  background: #0b1427; /* darker base */
  border-top: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 -4px 18px rgba(0,0,0,.5);
}

.trust-strip .item {
  background: linear-gradient(90deg, #1d4ed8, #3b82f6); /* tech blue gradient */
  padding: 6px 12px;
  border-radius: 999px;
  color: #ffffff;
  font-weight: 600;
  font-size: 13.5px;
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
}

.trust-strip .dot {
  display: none; /* optional, remove dots since chips look strong now */
}

.trust-strip .cta {
  background: linear-gradient(90deg,#00e7a7,#00c1ff); /* bright accent */
  color: #052221;
  font-weight: 800;
  padding: 8px 14px;
  border-radius: 12px;
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(0,0,0,.35);
}

/* Mobile-first refinements */
@media (max-width:540px){
  header{ flex-direction:column; align-items:flex-start; gap:10px; margin-bottom:10px }
  .brand img{ width:40px; height:40px }
  .brand .title{ font-size:20px }
  .brand .tag{ font-size:12px }
  .announce.pro{ padding:12px; overflow-x:auto; white-space:nowrap }
  .announce.pro::-webkit-scrollbar{ display:none }
  .card.compact{ padding:14px }
  h1{ font-size:22px }
  p.lead{ font-size:14px }
  .btnbar{ flex-direction:column; gap:10px }
  .btn{ width:100%; min-width:0; padding:11px 14px; border-radius:10px }
  .price{ font-size:22px }
}