/* ============================================================
   components.css — Reusable UI components
   ============================================================ */

/* ── Nav ── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200; height: 62px;
  background: rgba(248,246,241,.9);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border-bottom: 1px solid var(--rule);
}
.nav-inner { max-width:1180px; margin:0 auto; padding:0 5%; height:100%; display:flex; align-items:center; justify-content:space-between; }
.logo { font-family:var(--f-display); font-size:1.3rem; font-weight:500; letter-spacing:-.02em; color:var(--ink); }
.logo span { color:var(--accent); }
.nav-links { display:flex; align-items:center; gap:.125rem; list-style:none; }
.nav-links a { display:block; padding:.375rem .7rem; font-size:.84rem; font-weight:500; color:var(--ink-2); border-radius:var(--r-sm); transition:all .15s; }
.nav-links a:hover,
.nav-links a.active { color:var(--ink); background:rgba(0,0,0,.04); }
.nav-r { display:flex; align-items:center; gap:.75rem; }
.ham { display:none; flex-direction:column; gap:4px; background:none; border:none; padding:6px; }
.ham span { display:block; width:20px; height:1.5px; background:var(--ink); border-radius:2px; }
.mob-nav { display:none; position:fixed; top:62px; left:0; right:0; background:var(--surface); border-bottom:1px solid var(--rule); padding:1rem 5%; z-index:199; flex-direction:column; box-shadow:0 12px 32px rgba(0,0,0,.08); }
.mob-nav.open { display:flex; }
.mob-nav a { display:block; padding:.8rem 0; font-size:.9375rem; font-weight:500; color:var(--ink); border-bottom:1px solid var(--rule); }
.mob-nav a:last-child { border-bottom:none; }
.mob-nav a.cta { color:var(--accent); }
@media(max-width:640px){
  .nav-links { display:none; }
  .ham { display:flex; }
  .nav-r .btn { display:none; }
}

/* ── Page wrapper ── */
.page-wrap { padding-top: 62px; }

/* ── Buttons ── */
.btn { display:inline-flex; align-items:center; gap:.4rem; padding:.7rem 1.375rem; font-family:var(--f-body); font-size:.875rem; font-weight:600; border-radius:var(--r-sm); border:none; transition:all .16s ease; white-space:nowrap; }
.btn-p { background:var(--accent); color:#fff; }
.btn-p:hover { background:#5a1fcc; transform:translateY(-1px); box-shadow:0 6px 18px rgba(123,47,255,.3); }
.btn-s { background:transparent; color:var(--ink); border:1.5px solid var(--ink); }
.btn-s:hover { background:var(--ink); color:#fff; }
.btn-g { background:var(--surface); color:var(--ink); border:1.5px solid var(--rule); }
.btn-g:hover { border-color:var(--ink); }
.btn-sm { padding:.5rem 1rem; font-size:.8125rem; }
.btn-block { width:100%; justify-content:center; padding:.85rem; font-size:.9375rem; }

/* ── Chip ── */
.chip { display:inline-flex; align-items:center; gap:.4rem; padding:.3rem .75rem; background:var(--accent-2); color:var(--accent); border-radius:100px; font-size:.75rem; font-weight:600; }
.chip-dot { width:5px; height:5px; border-radius:50%; background:var(--accent); animation:blink 2s infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }

/* ── Cards ── */
.card   { background:var(--surface); border:1px solid var(--rule); border-radius:var(--r-lg); padding:1.75rem; transition:box-shadow .2s, transform .2s; }
.card:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
.card-f { background:var(--surface); border:1px solid var(--rule); border-radius:var(--r-lg); padding:1.75rem; }

/* ── Icon box ── */
.icon-b { width:42px; height:42px; border-radius:var(--r-sm); background:var(--accent-2); display:flex; align-items:center; justify-content:center; font-size:1.05rem; flex-shrink:0; }

/* ── Flow rows ── */
.flow-r { display:flex; align-items:center; gap:.75rem; padding:.75rem 1rem; background:var(--bg); border:1px solid var(--rule); border-radius:var(--r-sm); font-size:.85rem; font-weight:500; color:var(--ink-2); margin-bottom:.375rem; }
.flow-conn { text-align:center; font-size:.7rem; color:var(--ink-3); padding:.15rem 0; }
.flow-r.good { border-color:rgba(13,122,78,.2); background:#F0FAF5; }

/* ── Feature list ── */
.fl { list-style:none; }
.fl li { display:flex; align-items:flex-start; gap:.625rem; padding:.5rem 0; border-bottom:1px solid var(--rule); font-size:.875rem; color:var(--ink-2); }
.fl li:last-child { border-bottom:none; }
.tick  { color:var(--positive); font-size:.7rem; font-weight:700; margin-top:3px; flex-shrink:0; }
.cross { color:#C0392B;         font-size:.7rem; font-weight:700; margin-top:3px; flex-shrink:0; }

/* ── Section header ── */
.sec-head { display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; flex-wrap:wrap; margin-bottom:2.5rem; padding-bottom:1.5rem; border-bottom:1px solid var(--rule); }
@media(max-width:640px){ .sec-head { flex-direction:column; align-items:flex-start; } }

/* ── Accordion ── */
.accordion { border-top:1px solid var(--rule); }
.acc-item  { border-bottom:1px solid var(--rule); }
.acc-btn { width:100%; background:none; border:none; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding:1.05rem 0; font-family:var(--f-body); font-size:.9rem; font-weight:600; color:var(--ink); text-align:left; cursor:pointer; transition:color .15s; }
.acc-btn:hover { color:var(--accent); }
.acc-ico { width:22px; height:22px; border:1.5px solid var(--rule); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.8rem; flex-shrink:0; color:var(--ink-3); transition:all .22s; }
.acc-btn.open .acc-ico { border-color:var(--accent); color:var(--accent); background:var(--accent-2); transform:rotate(45deg); }
.acc-body { overflow:hidden; max-height:0; transition:max-height .32s ease; }
.acc-body.open { max-height:380px; }
.acc-inner { padding:0 0 1.25rem; font-size:.875rem; color:var(--ink-2); line-height:1.7; }
.killer { display:block; margin-top:.75rem; padding:.55rem .9rem; background:var(--accent-2); border-left:2px solid var(--accent); border-radius:0 var(--r-sm) var(--r-sm) 0; font-size:.845rem; font-style:italic; color:var(--accent); }

/* ── Callout blocks ── */
.callout { background:var(--ink); color:#fff; border-radius:var(--r-xl); padding:3.5rem; }
.callout .d2 { color:#fff; }
.callout .body-lg { color:rgba(255,255,255,.6); }
.callout-l { background:var(--accent-2); border:1px solid rgba(10,95,255,.14); border-radius:var(--r-lg); padding:1.75rem; }
@media(max-width:960px){ .callout { padding:2.5rem 2rem; } }
@media(max-width:640px){ .callout-l { padding:1.5rem; } }

/* ── Stats strip ── */
.stat-strip { display:grid; grid-template-columns:repeat(4,1fr); background:var(--surface); border:1px solid var(--rule); border-radius:var(--r-lg); overflow:hidden; }
.stat-item  { padding:1.75rem 1.5rem; border-right:1px solid var(--rule); }
.stat-item:last-child { border-right:none; }
.stat-val { font-family:var(--f-display); font-size:2rem; font-weight:400; letter-spacing:-.03em; line-height:1; }
.stat-lab { font-size:.78rem; color:var(--ink-3); margin-top:.3rem; }
@media(max-width:960px){
  .stat-strip { grid-template-columns:1fr 1fr; }
  .stat-item  { border-right:none; border-bottom:1px solid var(--rule); }
  .stat-item:nth-child(odd)          { border-right:1px solid var(--rule); }
  .stat-item:nth-child(3),
  .stat-item:nth-child(4)            { border-bottom:none; }
}

/* ── Trust pills ── */
.t-row  { display:flex; flex-wrap:wrap; gap:.5rem; }
.t-pill { padding:.3rem .8rem; background:var(--surface); border:1px solid var(--rule); border-radius:100px; font-size:.78rem; font-weight:500; color:var(--ink-2); }

/* ── Sector tags ── */
.sectors { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.25rem; }
.sector  { padding:.35rem .8rem; background:var(--surface); border:1px solid var(--rule); border-radius:var(--r-sm); font-size:.8rem; font-weight:500; color:var(--ink-2); }

/* ── Steps ── */
.steps  { display:flex; flex-direction:column; }
.step   { display:flex; gap:1.25rem; padding:1.5rem 0; border-bottom:1px solid var(--rule); }
.step:last-child { border-bottom:none; }
.step-n { font-family:var(--f-display); font-size:.8125rem; font-style:italic; color:var(--ink-3); min-width:24px; padding-top:2px; }

/* ── Service cards ── */
.svc-card { display:grid; grid-template-columns:1fr 1.15fr; gap:3.5rem; align-items:start; padding:3.5rem 0; border-bottom:1px solid var(--rule); }
.svc-card:last-child { border-bottom:none; }
@media(max-width:960px){ .svc-card { grid-template-columns:1fr; gap:2rem; } }

/* ── Price cards ── */
.price-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; max-width:760px; }
.p-card { background:var(--surface); border:1px solid var(--rule); border-radius:var(--r-lg); padding:2.25rem; }
.p-card.feat { background:var(--ink); border-color:var(--ink); }
.p-card.feat .h4,
.p-card.feat .label    { color:rgba(255,255,255,.45); }
.p-card.feat .body-sm  { color:rgba(255,255,255,.4); }
.p-card.feat .fl li    { color:rgba(255,255,255,.8); border-color:rgba(255,255,255,.1); }
.p-card.feat .tick     { color:#5BDB8A; }
.p-card.feat .btn-g    { background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.15); }
.p-num { font-family:var(--f-display); font-size:3rem; font-weight:400; letter-spacing:-.04em; line-height:1; margin:.75rem 0 .25rem; color:var(--ink); }
.p-card.feat .p-num    { color:#fff; }
@media(max-width:640px){ .price-grid { grid-template-columns:1fr; max-width:420px; } }

/* ── Form ── */
.fg2    { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.field  { display:flex; flex-direction:column; gap:.3rem; }
.field label { font-size:.7rem; font-weight:600; letter-spacing:.05em; color:var(--ink-3); text-transform:uppercase; }
.field input,
.field select,
.field textarea { font-family:var(--f-body); font-size:.875rem; color:var(--ink); background:var(--bg); border:1.5px solid var(--rule); border-radius:var(--r-sm); padding:.7rem .9rem; outline:none; transition:border-color .16s; width:100%; appearance:none; }
.field input:focus,
.field select:focus,
.field textarea:focus { border-color:var(--accent); background:#fff; }
.field textarea { resize:vertical; min-height:105px; }
.captcha-err { display:none; font-size:.75rem; color:#C0392B; margin-top:.25rem; }
@media(max-width:640px){ .fg2 { grid-template-columns:1fr; } }

/* ── Footer ── */
footer { border-top:1px solid var(--rule); background:var(--surface); padding:3.5rem 0 2.25rem; }
.footer-g { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:2.5rem; margin-bottom:2.5rem; }
.fc h5  { font-size:.6875rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); margin-bottom:.875rem; }
.fc ul  { list-style:none; display:flex; flex-direction:column; gap:.4rem; }
.fc ul li { font-size:.84rem; color:var(--ink-2); transition:color .15s; }
.fc ul li:hover { color:var(--accent); }
.footer-bot { display:flex; justify-content:space-between; flex-wrap:wrap; gap:.75rem; padding-top:1.5rem; border-top:1px solid var(--rule); }
@media(max-width:960px){ .footer-g { grid-template-columns:1fr 1fr; gap:2rem; } }
@media(max-width:640px){ .footer-g { grid-template-columns:1fr; } }