/* =========
   Tokens
   ========= */
:root{
  --bg:#FAFAF9;
  --text:#0F1115;
  --muted:#6B7280;
  --accent:#0A84FF; /* override via JS */
  --border:#E5E7EB;
  --radius:16px;
  --container:1100px;
}

/* =========
   Base
   ========= */
*{box-sizing:border-box}
html,body{
  margin:0; padding:0;
  background:var(--bg); color:var(--text);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,"Helvetica Neue",Arial,system-ui,sans-serif;
}
img{max-width:100%;height:auto;display:block;border-radius:12px}
.hidden{display:none}

/* Make sure the modal truly hides on load */
[hidden]{display:none !important;}

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

/* Prefer reduced motion */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
}

/* =========
   Header
   ========= */
.preview-ribbon{
  position:sticky; top:0; z-index:999;
  background:linear-gradient(90deg,var(--accent),#7cc4ff);
  color:#fff; padding:8px 16px; text-align:center; font-weight:600;
}

.site-header{
  position:sticky; top:40px;
  backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--border);
}
.site-header .container{display:flex;align-items:center;justify-content:space-between;padding:14px 20px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700}
.brand-mark{
  width:28px;height:28px;border-radius:50%;
  background:var(--accent); color:#fff; display:grid; place-items:center;
}
.nav a{color:var(--text);text-decoration:none;margin-left:16px}
.nav .btn{margin-left:24px}

/* =========
   Hero
   ========= */
.hero{padding:72px 0}
.hero h1{font-size:clamp(28px,4vw,46px);line-height:1.15;margin:0 0 10px}
.hero .sub{color:var(--muted);font-size:18px;margin:0 0 22px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin:10px 0 18px}
.proof{color:var(--muted);font-size:14px;margin-bottom:24px}

/* =========
   Buttons
   ========= */
.btn{
  display:inline-block; border:1px solid var(--border);
  padding:10px 16px; border-radius:999px; text-decoration:none; color:var(--text);
  transition:transform .2s ease, background .2s ease, border-color .2s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--accent); border-color:var(--accent); color:#fff}
.btn-ghost{background:transparent}
.btn:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px;
}

/* =========
   Cards / Grids
   ========= */
.grid-3{padding:36px 0}
.muted{background:#F4F5F7}
.cards{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.card{
  grid-column:span 12; background:#fff;
  border:1px solid var(--border); border-radius:var(--radius); padding:20px;
  transition:box-shadow .2s ease, transform .2s ease;
}
.card:hover{box-shadow:0 4px 20px rgba(0,0,0,.06)}
@media (min-width:720px){.card{grid-column:span 6}}
@media (min-width:980px){.card{grid-column:span 4}}

/* =========
   Features
   ========= */
.features{padding:46px 0}
.features h2{margin:0 0 10px}
.feature-list{
  display:grid; gap:8px; list-style:none; padding:0; margin:10px 0;
}
.feature-list li{
  padding:10px 12px; border:1px dashed var(--border);
  border-radius:10px; background:#fff;
}

/* =========
   Gallery
   ========= */
.gallery{padding:36px 0}
.gallery figcaption{
  color:var(--muted); font-size:14px; margin-top:8px; text-align:center;
}

/* =========
   Pricing
   ========= */
.pricing{padding:46px 0}
.pricing .cards .card{grid-column:span 12}
@media (min-width:980px){.pricing .cards .card{grid-column:span 6}}
.pricing .card .card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.pricing .price{font-weight:800}
.pricing .popular{position:relative; outline:2px solid var(--accent)}
.pricing .popular .badge{
  position:absolute; top:-10px; right:-10px;
  background:var(--accent); color:#fff; padding:6px 10px; border-radius:999px; font-size:12px;
}

/* =========
   FAQ
   ========= */
.faq{padding:46px 0}
details{
  background:#fff; border:1px solid var(--border); border-radius:10px;
  padding:12px 16px; margin-bottom:10px;
}
summary{font-weight:600; cursor:pointer; list-style:none}
summary:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* =========
   Contact
   ========= */
.contact{padding:46px 0}
form{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:20px;
}
label{display:block;font-weight:600;margin:10px 0 6px}
input,textarea{
  width:100%; border:1px solid var(--border); border-radius:10px; padding:10px 12px; font:inherit;
}
input:focus-visible, textarea:focus-visible{
  border-color:var(--accent); outline:2px solid rgba(10,132,255,.25); outline-offset:2px;
}
textarea{min-height:120px; resize:vertical}
.w-100{width:100%}
.privacy{color:var(--muted);font-size:13px;margin-top:8px}

/* =========
   Footer + links
   ========= */
.site-footer{border-top:1px solid var(--border); padding:24px 0; color:var(--muted)}
/* Footer links: look like normal text + underline */
.site-footer a:not(.btn){
  color:inherit; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:2px;
}
.site-footer a:not(.btn):visited{color:inherit}
.site-footer a:not(.btn):hover{ text-underline-offset:4px }
.site-footer a:not(.btn):focus-visible{
  outline:2px solid var(--accent); outline-offset:2px; border-radius:4px;
}

/* =========
   Modal
   ========= */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(15,17,21,.5);
  display:grid; place-items:center; z-index:1000;
}
.modal-backdrop[hidden]{display:none !important;}
.modal{
  width:min(520px,92vw); background:#fff; color:var(--text);
  border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:0 20px 50px rgba(0,0,0,.25);
  padding:24px 20px 16px; position:relative;
}
.modal-close{
  position:absolute; top:8px; right:8px; border:0; background:transparent;
  font-size:22px; line-height:1; cursor:pointer; padding:6px; border-radius:8px;
}
.modal-close:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.modal-actions{display:flex; justify-content:flex-end; gap:8px; margin-top:12px}
body.modal-open{overflow:hidden}