:root{
  --bg:#f6f8fc;       /* background */
  --panel:#ffffff;    /* card */
  --ink:#1b2130;      /* primary text */
  --muted:#667085;    /* secondary text */
  --line:#e9edf3;     /* border */

  /* Brand: trust‑forward blue; keep gold as subtle accent only */
  --brand:#2563eb;    /* blue-600 */
  --brand-ink:#0f172a;/* dark text on brand tints */
  --brand-grad:linear-gradient(135deg,#7aa8ff,#3b82f6 45%,#2563eb);

  --gold:#b08a2e;     /* accent only (icons/badges) */

  --shadow:0 10px 30px rgba(28,40,64,.12);
  --radius:18px;
  --container: clamp(320px, 92vw, 1200px);
  --ok:#19c37d;       /* success */
  --err:#ff6b6b;      /* error */
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Nunito Sans", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.65;
  -webkit-text-size-adjust:100%;
}
a{text-decoration:none; color:inherit}
img{max-width:100%; height:auto; display:block}

.container{width:var(--container); margin:0 auto}

/* Header */
header{padding:28px 0 10px}
.logoRow{display:flex; align-items:center; gap:14px; min-width:0}
.logo{
  width:46px; height:46px; border-radius:12px; object-fit:cover; flex:0 0 46px;
  background:linear-gradient(135deg,#e6eefc,#dfe7fb);
  box-shadow:var(--shadow);
}
h1{
  margin:0; font-size:clamp(22px,4.2vw,42px); font-weight:900; letter-spacing:.3px;
  line-height:1.2; word-break:break-word; overflow-wrap:anywhere;
}
.subtitle{color:var(--muted); margin-top:6px; font-size:clamp(13px,1.9vw,16px)}
.trustline{color:#0f5132; background:#d1fae5; border:1px solid #a7f3d0; display:inline-block; padding:6px 10px; border-radius:10px; margin-top:8px; font-weight:800}

/* Hero */
.hero{
  margin-top:16px; padding:22px; background:var(--panel);
  border:1px solid var(--line); border-radius:24px; box-shadow:var(--shadow);
  position:relative; overflow:hidden
}
.badges{display:flex; flex-wrap:wrap; gap:10px; margin:6px 0 8px}
.badge{
  padding:8px 12px; border-radius:999px; border:1px solid var(--line);
  background:#eef2ff; font-weight:800; font-size:13px; color:#1e3a8a;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.badge i{color:#1e3a8a}

/* CTA buttons */
.ctaRow{display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:16px}
.btn{
  --h:52px; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  height:var(--h); padding:0 22px; border-radius:calc(var(--h)/2);
  background:var(--brand-grad); color:#ffffff; font-weight:900; letter-spacing:.3px;
  box-shadow:0 12px 28px rgba(37,99,235,.25); position:relative; overflow:hidden;
  transform:translateZ(0); transition:transform .15s ease, box-shadow .25s ease;
  line-height:1; border:0;
}
.btn:hover{transform:translateY(-1px); box-shadow:0 14px 32px rgba(37,99,235,.32)}
.btn:active{transform:translateY(0)}
.btn .pulse{position:absolute; inset:0; background:conic-gradient(from 0deg, transparent 0 85%, #ffffff44 90% 100%); animation:spin 4s linear infinite; mix-blend:overlay; pointer-events:none}
@keyframes spin{to{transform:rotate(1turn)}}
.btn-outline{background:#eef2ff; color:#1e3a8a; border:1px solid #c7d2fe; box-shadow:none}
.btn-outline:hover{background:#e0e7ff}

/* Sections */
section{padding:40px 0}
.grid{display:grid; grid-template-columns:repeat(12,1fr); gap:18px}
.card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px; box-shadow:var(--shadow); min-width:0;
}
.card h3{
  margin:0 0 12px; font-size:22px; line-height:1.25;
  word-break:break-word; overflow-wrap:anywhere;
}

/* Definition list */
.items{display:grid; gap:12px}
.item{display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start; min-width:0}
.item i{color:#1e3a8a; font-size:18px; line-height:1; margin-top:2px}
.item .line{display:grid; grid-template-columns:max-content 1fr; align-items:start; gap:8px; min-width:0}
.item .label{font-weight:900; white-space:nowrap}
.item .desc{min-width:0; word-break:break-word; overflow-wrap:anywhere; line-break:loose}

/* Stepper */
.stepper{display:grid; gap:16px}
.step{display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start; padding:12px; border-radius:14px; background:#f0f9ff; border:1px dashed #93c5fd}
.step .num{width:34px; height:34px; display:grid; place-items:center; font-weight:800; border-radius:999px; background:#dbeafe; border:1px solid #93c5fd; color:#1e3a8a; flex:0 0 34px}

/* FAQ Accordion */
.accordion{display:grid; gap:12px}
.details, details.ac{background:var(--panel); border-radius:16px; border:1px solid var(--line); overflow:hidden; box-shadow:var(--shadow)}
.details summary, details.ac summary{cursor:pointer; list-style:none; padding:16px 18px; display:flex; align-items:center; justify-content:space-between; gap:14px; font-weight:800}
.details summary::-webkit-details-marker, details.ac summary::-webkit-details-marker{display:none}
.details .content, details.ac .content{padding:0 18px 18px; color:#475069}
.chev{transition:transform .25s ease}
.details[open] .chev, details[open] .chev{transform:rotate(180deg)}

/* Sticky CTA */
.stickyBar{position:sticky; bottom:0; z-index:50; backdrop-filter: blur(8px); background:linear-gradient(180deg,#ffffff00,#ffffffcc 20%,#ffffffee 100%); border-top:1px solid var(--line); padding:14px 0}
.stickyRow{display:flex; gap:12px; align-items:center; justify-content:space-between}
.muted{color:var(--muted)}

/* Modal */
.overlay{position:fixed; inset:0; background:rgba(18,22,33,.35); display:none; align-items:flex-start; justify-content:center; padding:18px; z-index:100; overflow:auto}
.overlay.show{display:flex}
.modal{width:min(720px,100%); margin:24px 0; background:var(--panel); border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow); overflow:hidden; max-height:90vh; display:flex; flex-direction:column}
.modalHead{display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--line)}
.modalBody{padding:18px; display:grid; gap:14px; overflow:auto}
.xbtn{background:transparent; border:0; font-size:20px; cursor:pointer}

.qgroup{display:grid; gap:10px}
.q{padding:12px; border:1px solid var(--line); border-radius:12px; background:#f8fafc}
.q label{display:block; font-weight:800; margin-bottom:6px}
.ops{display:flex; gap:14px; flex-wrap:wrap}
.chip{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; border:1px solid #c7d2fe; background:#eef2ff; cursor:pointer; user-select:none}
.chip input{accent-color:#2563eb}

form{display:grid; gap:12px}
.row{display:grid; grid-template-columns:1fr; gap:12px}
.field{display:grid; gap:6px}
.field label{font-weight:800}
.input, select{height:46px; padding:0 14px; border-radius:12px; border:1px solid var(--line); background:#fff; outline:none}
.input:focus, select:focus{box-shadow:0 0 0 4px #bfdbfe}

.res-group{display:grid; gap:8px}
.res-item{display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:#fff}
.res-item input{accent-color:#2563eb}

/* Success / Error modal */
.overlay-mini{position:fixed; inset:0; display:none; place-items:center; background:rgba(18,22,33,.35); z-index:110; padding:18px}
.overlay-mini.show{display:grid}
.mini{width:min(520px,100%); border-radius:18px; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow); padding:18px}
.mini h4{margin:0 0 6px; font-size:20px}
.mini p{margin:6px 0}
.ok{color:var(--ok)}
.err{color:var(--err)}
.mini-actions{display:flex; gap:10px; margin-top:12px; flex-wrap:wrap}
.copy{background:#f2f4f7; border:1px solid #e5e7eb; padding:8px 10px; border-radius:10px; font-size:13px; white-space:pre-wrap; max-height:240px; overflow:auto}

/* Desktop spans */
@media (min-width:860px){
  .col-7{grid-column:span 7}
  .col-5{grid-column:span 5}
  .col-6{grid-column:span 6}
}

/* Mobile (≤ 860px) */
@media (max-width:859.9px){
  .grid{grid-template-columns:1fr}
  header{padding:20px 0 6px}
  .logo{width:40px; height:40px; border-radius:10px; flex:0 0 40px}
  h1{font-size:clamp(20px,5.6vw,28px); letter-spacing:.2px}
  .subtitle{font-size:clamp(12px,3.6vw,14px)}

  .hero{padding:16px; border-radius:18px}
  .badge{font-size:12px; padding:6px 10px}
  .badges{gap:8px}

  .btn{--h:46px; padding:0 18px; font-size:14px}
  .btn-outline{font-weight:800}

  .card{padding:16px; border-radius:16px}
  .card h3{font-size:18px; margin-bottom:10px}

  .item{grid-template-columns:22px 1fr; gap:10px}
  .item i{font-size:16px; margin-top:3px}
  .item .line{grid-template-columns:1fr; gap:4px}
  .item .label{white-space:normal; line-height:1.35}
  .item .desc{font-size:14px; color:#475069}

  .step{padding:10px; gap:10px}
  .step .num{width:30px; height:30px; font-size:14px}

  details.ac summary{padding:14px 16px; font-size:15px}
  details.ac .content{padding:0 16px 14px; font-size:14px}

  .stickyBar{padding:10px 0}
  .stickyRow{gap:10px}
}

/* Very narrow (≤ 360px) */
@media (max-width:360px){
  h1{font-size:18px}
  .btn{--h:44px; padding:0 16px; font-size:13px}
  .badge{font-size:11px; padding:5px 9px}
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  .btn .pulse{animation:none}
  .chev{transition:none}
}