:root{
  --bg:#0a1020; 
  --panel:#111835; 
  --line:#1b2550;
  --text:#e9efff; 
  --muted:#a9b3c6;
  --accent:#33d1a2;
  --radius:12px; 
  --w:1120px;
  --header-h: 80px; /* adjust if your header changes size */
}

/* Prevent sticky header from hiding anchor targets */
section {
  scroll-margin-top: calc(var(--header-h) + 30px);
}

*{box-sizing:border-box}
html,body{
  margin:0;
  background:linear-gradient(180deg,#0a1020,#0a1226);
  color:var(--text);
  font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial;
}

a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

.wrap{max-width:var(--w);margin:auto;padding:20px}

/* HEADER */
header{
  position:sticky;top:0;z-index:10;
  border-bottom:1px solid var(--line);
  backdrop-filter:saturate(140%) blur(6px);
  background:rgba(10,16,32,.6)
}
.nav{display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:12px}
.brand img{height:110px}
.slogan{font-size:18px;font-weight:600;color:var(--muted);white-space:pre-line}

/* -------- BUTTONS -------- */
.btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:10px 18px;border-radius:999px;
  font-weight:700;border:1px solid transparent;cursor:pointer;
  transition:all .25s ease;
  color:var(--text) !important;           /* make text visible by default */
  text-decoration:none !important;        /* no underline on <a> */
}
.btn.primary{
  background:var(--accent, #33d1a2);      /* safe fallback */
  color:#051216 !important;               /* dark text on green */
  box-shadow:0 6px 18px -6px #33d1a288;
}
.btn.secondary{
  background:#121c3e;
  color:var(--text) !important;
  border-color:#223064;
}
.btn:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 16px -6px rgba(51,209,162,.45)
}
.btn.small{
  padding:8px 14px;
  font-size:14px;
  color:inherit !important;               /* keep inherited visible color */
}

/* HERO */
.hero{padding:28px 20px 12px}
.hero-grid{
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:24px;
  align-items:center
}
.tag{
  display:inline-block;background:#12204a;border:1px solid #24336a;color:#c6d2f2;
  padding:4px 10px;border-radius:999px;margin-bottom:8px;font-size:12px
}
h1{font-size:44px;line-height:1.1;margin:0 0 10px;font-weight:700}
.lead{font-size:17px;color:var(--muted);margin-bottom:10px;max-width:540px}

.hero img.illustration{
  max-width:100%;
  height:auto;
  border-radius:10px;
  opacity:.9;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.5))
}

/* ROI strip (ABOVE CTA) */
.roi-strip{
  display:flex !important;
  justify-content:center;
  align-items:flex-start;
  gap:24px;
  max-width:700px;
  margin:8px auto 0;
  flex-wrap:nowrap;
}
.roi-strip .grid{
  display:flex !important;
  justify-content:center;
  align-items:flex-start;
  gap:24px;
  max-width:700px;
  margin:0 auto;
  flex-wrap:nowrap;
}
.roi-strip.grid{display:flex !important}
.roi-strip .card{
  flex:0 0 200px;
  max-width:220px;
  text-align:center;
  padding:6px 8px;
  background:transparent;
  border:none;
}
.roi-strip h3{font-size:16px;font-weight:700;margin:0 0 2px 0}
.roi-strip p{font-size:13px;color:var(--muted);margin:0}

/* CTA below ROI */
.hero-cta{text-align:center;margin-top:16px}
.hero-cta .cta{display:flex;justify-content:center}
.hero-cta .btn.primary{padding:16px 30px;font-size:17px;font-weight:700;margin-bottom:6px}
.hero-cta .btn.primary:hover{transform:scale(1.04);box-shadow:0 6px 20px rgba(51,209,162,.45)}
.hero-cta .free-offer{margin-top:4px;font-size:13px;color:var(--muted)}
.hero-cta .free-offer span{color:var(--accent);font-weight:600}

/* GENERIC CARD BASE */
.card{
  background:transparent;
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius);
  padding:20px 16px;
  transition:all .25s ease
}
.card:hover{
  border-color:var(--accent);
  box-shadow:0 4px 14px rgba(51,209,162,.12);
  transform:translateY(-2px)
}

/* FEATURE CARDS */
#how .grid.cols-3{
  display:grid;
  justify-content:center;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:20px;
  max-width:900px;
  margin:0 auto;
}
#how .card{text-align:center}
#how .card img.icon{
  width:68px;height:68px;object-fit:contain;margin:0 auto 10px;
  filter:drop-shadow(0 0 5px rgba(51,209,162,.3));
  transition:transform .25s ease,filter .25s ease
}
#how .card h2{font-size:18px;font-weight:600;margin:6px 0}
#how .card p.lead2{font-size:14px;color:var(--muted)}
#how .card:hover img.icon{transform:scale(1.06);filter:drop-shadow(0 0 10px rgba(51,209,162,.6))}
#how .card:hover h2{color:var(--accent)}

/* HEADINGS & SECTION TEXT */
section{padding:24px 0;border-top:1px solid var(--line)}
h2{font-size:24px;margin:0 0 6px;text-align:center}
p.lead2{color:var(--muted);margin:4px 0 12px;text-align:center}

/* GRIDS (site-wide base) */
.grid{display:grid;gap:12px}
.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.align-start{align-items:start}

/* Equal-height fixes */
.grid.cols-2{align-items:stretch}
.grid.cols-2 .card{display:flex;flex-direction:column;justify-content:space-between}
.grid.cols-3{align-items:stretch}
.grid.cols-3 .card{display:flex;flex-direction:column;justify-content:space-between}

/* LISTS */
ul.clean{margin:0;padding:0 0 0 22px;list-style:none}
ul.clean li{margin:4px 0;position:relative}
ul.clean li::before{content:"✔";position:absolute;left:-18px;color:var(--accent)}

/* TABLES */
table{
  width:100%;border-collapse:separate;border-spacing:0;
  border:1px solid var(--line);border-radius:10px;overflow:hidden
}
th,td{padding:10px;border-bottom:1px solid var(--line);text-align:left}
th{background:#0f1838}
tr:last-child td{border-bottom:0}
.price{font-size:30px}
small.m{color:var(--muted)}

/* CONTACT FORM */
form{display:grid;gap:10px}
.card.contact label{display:block;margin-bottom:4px;font-size:13px;color:var(--muted)}
.card.contact input,.card.contact textarea{
  width:100%;display:block;background:#0d1736;border:1px solid #203062;color:var(--text);
  padding:10px;border-radius:8px
}
.card.contact input:focus,.card.contact textarea:focus{
  outline:none;border-color:#3653a5;box-shadow:0 0 0 2px rgba(54,83,165,.25)
}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.map-embed{width:100%;height:260px;border:0;border-radius:10px}

/* Center Book a Call button in contact section */
#contact .card.contact:first-child .cta{
  display:flex;justify-content:center;margin-bottom:12px
}

/* FOOTER */
footer{padding:20px 0 24px;text-align:center;background:#0a0f20;color:var(--muted)}
.footer-inner{max-width:var(--w);margin:auto;padding:0 20px}
.footer-brand{display:flex;flex-direction:column;align-items:center}
.footer-brand img{height:80px;display:block;margin:0 0 -6px 0}
.footer-brand .tagline{margin:0;font-size:15px;font-weight:600;color:var(--accent)}
.footer-meta{margin-top:6px;font-size:12px}

/* RESPONSIVE */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr}
  .hero .card{margin-top:16px}
  .cols-3,.cols-2{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .brand img{height:72px}
  .hero .btn.primary{font-size:15px;padding:12px 20px}
  #how .card img.icon{width:60px;height:60px}
  .roi-strip,
  .roi-strip .grid{max-width:100%;flex-wrap:wrap;gap:16px}
  .roi-strip .card{flex:1 1 100%;max-width:100%}
}

.plan-title{font-size:24px;font-weight:800;letter-spacing:.2px}

/* ---------- Strong fit block ---------- */
.fit-inline{
  display:none;margin-top:16px;padding:20px 24px;
  background:#0f1838;border:2px solid var(--accent);
  border-radius:16px;text-align:left;box-shadow:0 8px 24px rgba(0,0,0,.35)
}
.fit-inline.show{display:block}
.fit-inline h3{margin:0 0 12px;font-size:20px;font-weight:700;color:var(--accent)}
.fit-inline ul{margin:0 0 14px;padding:0;list-style:none}
.fit-inline ul li{margin:6px 0;padding-left:24px;position:relative}
.fit-inline ul li::before{content:"✔";position:absolute;left:0;color:var(--accent);font-weight:700}
.fit-inline .btn.primary{display:inline-block;margin-top:8px;padding:12px 22px;font-size:16px;font-weight:600}

/* Pricing tweaks */
.pricing-bullets li{margin:6px 0}
.plan-note{margin-top:10px;color:var(--muted)}
.card.popular{position:relative;border-color:var(--accent)}
.card.popular .badge{
  position:absolute;left:16px;top:-12px;background:#101a3a;border:1px solid var(--line);
  color:#cfe1ff;font-size:12px;padding:4px 8px;border-radius:999px;
}

/* Risk-free pilot banner */
.guarantee{padding:16px 0;border-top:1px solid var(--line)}
.guarantee-card{
  display:flex;align-items:center;gap:16px;background:#0f1838;border:1px solid var(--line);
  border-radius:14px;padding:16px 18px;
}
.guarantee-icon{font-size:22px}
.guarantee-copy h3{margin:0 0 4px;font-size:18px}
.guarantee-copy p{margin:0;color:var(--muted)}
.guarantee-cta{margin-left:auto}
.guarantee-cta .btn.primary{padding:10px 18px;font-size:15px}
@media (max-width:780px){
  .guarantee-card{flex-direction:column;align-items:flex-start}
  .guarantee-cta{margin-left:0}
}

/* New grid for 4 columns */
.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}

/* Small buttons for cards (kept for spacing) */
.btn.small{padding:8px 14px;font-size:14px}

/* Muted helper */
.muted{color:var(--muted);font-size:13px;margin:4px 0 8px}

/* Pricing grid spacing */
.pricing-grid .card{min-height:100%}
.price-line{font-weight:600;margin:4px 0}

/* Details scope block */
details.card.scope{margin-top:14px;background:#0f1838}
details.card.scope summary{cursor:pointer;font-weight:700;margin-bottom:8px}
details.card.scope[open]{border-color:var(--accent)}
details.card.scope ul.clean li{margin:6px 0}

/* Responsive: 4-col to 1-col on small screens */
@media (max-width:980px){ .cols-4{grid-template-columns:1fr} }

.scope-full{
  grid-column:1 / -1;width:100%;margin-top:16px;padding:12px 20px;text-align:center;
  font-size:14px;color:var(--muted);border-top:1px solid var(--line)
}
.scope-full a{color:var(--accent);font-weight:600}

/* Compare table rails */
.compare-table{border-collapse:separate;border-spacing:0}
.compare-table th,.compare-table td{border:0}
.compare-table thead th:nth-child(2),.compare-table tbody td:nth-child(2){
  border-left:2px solid #28a745;border-right:2px solid #28a745
}
.compare-table thead th:nth-child(2){
  border-top:2px solid #28a745;border-top-left-radius:10px;border-top-right-radius:10px;overflow:hidden
}
.compare-table tbody tr:last-child td:nth-child(2){
  border-bottom:2px solid #28a745;border-bottom-left-radius:10px;border-bottom-right-radius:10px;overflow:hidden
}

/* ---- JSON tabs theme (scoped) ---- */
:root{
  --tab-bg: var(--panel, #121a34);
  --tab-border: var(--line, #1b2550);
  --tab-text: var(--text, #e9efff);
}
/* only the tabs get a different accent; global --accent stays intact */
.json-tabs{ --accent:#28a745; }

.json-tabs .tabs{display:flex;gap:.5rem;flex-wrap:wrap;margin:.75rem 0 .75rem}
.json-tabs .tab{
  background:var(--tab-bg);color:var(--tab-text);
  border:1px solid var(--tab-border);border-radius:.6rem;
  padding:.5rem .8rem;cursor:pointer;
  font:500 14px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial;
}
.json-tabs .tab.is-active{outline:2px solid var(--accent)}
.json-tabs .panels{
  background:var(--tab-bg);border:1px solid var(--tab-border);
  border-radius:.8rem;padding:.8rem;
}
.json-tabs .panel[hidden]{display:none}
.json-tabs .panel-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:.75rem;margin:.25rem 0 .5rem;
}
.json-tabs .panel-head h3{margin:0;font-size:16px;color:var(--tab-text)}
.json-tabs .actions{display:flex;gap:.5rem}
.json-tabs .copy-btn,.json-tabs .download-btn{
  border:1px solid var(--tab-border);background:#0f152c;color:var(--tab-text);
  border-radius:.5rem;padding:.35rem .6rem;text-decoration:none;font-size:13px;
}
.json-tabs .copy-btn:hover,.json-tabs .download-btn:hover{border-color:var(--accent)}
.json-tabs pre.code{
  margin:0;padding:.8rem;border-radius:.6rem;background:#0a1020;border:1px dashed var(--tab-border);
  color:#e9efff;overflow:auto;max-height:52vh;
  font:12.5px/1.5 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
}


.security-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
  gap:1rem;
  margin-top:1.2rem;
}
.security-grid .card{
  background:var(--panel,#111835);
  border:1px solid var(--line,#1b2550);
  border-radius:.8rem;
  padding:1rem;
}
.security-grid h3{
  margin-top:0; font-size:16px; color:var(--text,#e9efff);
}
.security-grid ul{
  list-style:none; padding:0; margin:0;
}
.security-grid li{
  margin:.35rem 0; font-size:14px; color:var(--muted,#a9b2d6);
}

  /* Tone down bold, remove check-marks on tier list */
  .plain { font-weight: 400; }
  .tiers.no-check li::before { content: none !important; } /* override any global checkmark bullets */

  /* Tooltip for per‑1k price (native, no JS) */
  .tip {
    display:inline-block; margin-left:.35rem; font-size:.85rem; line-height:1;
    color:var(--muted,#a9b2d6); cursor:help; border-bottom:1px dotted var(--line,#1b2550);
  }
  .tip:hover::after, .tip:focus::after {
    content: attr(data-tip);
    position:absolute; transform: translateY(-110%);
    background:#0f152c; color:#e9efff; border:1px solid var(--line,#1b2550);
    border-radius:.35rem; padding:.25rem .4rem; font-size:.78rem; white-space:nowrap; z-index:3;
    box-shadow:0 6px 20px rgba(0,0,0,.25);
  }

  /* Details with light weight */
  details.lite{ border:1px dashed var(--line,#1b2550); border-radius:.6rem; padding:.5rem .6rem; margin:.5rem 0 0; }
  details.lite[open]{ background:rgba(255,255,255,.02); }
  details.lite > summary{ cursor:pointer; list-style:none; color:var(--text,#e9efff); font-weight:500; }
  details.lite > summary::-webkit-details-marker{ display:none; }

  /* Pricing helpers */
  .pricing-grid .price-inline{ font-weight:500; }
  .cards.two-col{ display:grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap:1rem; margin-top:.8rem; }
  .cards.two-col .card{ background:var(--panel,#111835); border:1px solid var(--line,#1b2550); border-radius:.8rem; padding:.8rem; }

  /* ROI visuals without ticks */
  .roi-card{ margin-top:1rem; }
  .roi-grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap:.75rem; margin:.6rem 0 1rem; }
  .roi-grid label{ display:flex; flex-direction:column; font-size:14px; color:var(--muted,#a9b2d6); }
  .roi-grid input{
    margin-top:.35rem; padding:.5rem .6rem; border-radius:.5rem; border:1px solid var(--line,#1b2550);
    background:#0f152c; color:#e9efff; outline:none;
  }
  .roi-results{ border-top:1px dashed var(--line,#1b2550); padding-top:.7rem; }
  .roi-line{ display:flex; align-items:center; justify-content:space-between; }
  .roi-coverage{ display:grid; grid-template-columns: repeat(4, minmax(68px,1fr)); gap:.5rem; margin-top:.6rem; }
  .roi-coverage .cov{
    background:var(--panel,#111835); border:1px solid var(--line,#1b2550); border-radius:.5rem;
    padding:.5rem .6rem; display:flex; align-items:center; justify-content:space-between; font-size:.92rem;
  }
  .cov.ok{ border-color:#28a745; }
  .cov.no{ opacity:.65; }
  .footnote{ font-size:12px; color:var(--muted,#a9b2d6); margin-top:.55rem; }