/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.72); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; height: 68px; position: relative; }
.brand { display: flex; align-items: center; gap: var(--sp-2); font-weight: 800; font-size: 20px; color: var(--text); }
.brand svg, .brand img { width: 30px; height: 30px; animation: spin 14s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.site-nav { display: flex; align-items: center; gap: var(--sp-6); }
.site-nav a { color: var(--muted); font-size: 14px; font-weight: 600; }
.site-nav a:hover { color: var(--accent); }
.nav-links { display: flex; align-items: center; gap: var(--sp-6); }

.nav-toggle {
  display: none;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  width: 38px; height: 38px; padding: 0; background: transparent;
  border: 2px solid var(--border); border-radius: var(--r-md); cursor: pointer;
}
.nav-toggle span { display: block; width: 18px; height: 2px; background: var(--text); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
.nav-toggle:hover { border-color: var(--accent); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 760px){
  .nav-toggle { display: flex; }
  .nav-links {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--surface); border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow); padding: var(--sp-2) var(--sp-6) var(--sp-4);
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: var(--sp-3) 0; border-top: 1px solid var(--border); }
  .nav-links a:first-child { border-top: none; }
  .site-header .btn { white-space: nowrap; }
  .site-header .btn-coffee .btn-text { display: none; }
  .site-header .btn-coffee { padding: var(--sp-2) var(--sp-3); font-size: 18px; }
}

/* ---------- Buttons / inputs ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-6); border-radius: var(--r-full); border: 2px solid transparent;
  font-family: var(--font); font-weight: 800; font-size: 15px; cursor: pointer;
  transition: transform .15s, box-shadow .15s, background .2s;
}
.btn-primary { background: var(--grad-hero); background-size: 200% 200%; color: #fff; box-shadow: var(--glow); animation: gradmove 8s ease infinite; }
.btn-primary:hover { transform: translateY(-2px) scale(1.03); }
.btn-ghost { background: #fff; border-color: var(--border); color: var(--text); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }
.btn-coffee { background: var(--c-yellow); color: #3a2a00; font-weight: 800; box-shadow: 0 8px 20px rgba(255,198,58,.45); }
.btn-coffee:hover { background: #FFD35C; transform: translateY(-2px) scale(1.03); }
.btn:active { transform: translateY(0) scale(.99); }
.coffee-link { color: #C98A00 !important; font-weight: 700; }
.coffee-link:hover { color: var(--c-yellow) !important; }

.input {
  width: 100%; padding: var(--sp-4) var(--sp-6); background: #fff; border: 2px solid var(--border);
  border-radius: var(--r-full); color: var(--text); font-size: 16px; font-family: var(--font); box-shadow: var(--shadow-sm);
}
.input::placeholder { color: var(--dim); }
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(255,95,162,.18); }

/* ---------- Hero ---------- */
.hero { padding: var(--sp-16) 0 var(--sp-12); text-align: center; }
.hero h1 {
  max-width: 860px; margin: var(--sp-6) auto var(--sp-4);
  background: var(--grad-hero); background-size: 200% 200%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: gradmove 8s ease infinite;
}
.hero .lead { max-width: 640px; margin: 0 auto var(--sp-8); font-size: 19px; color: var(--muted); }
.free-pill {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  background: var(--grad-warm); color: #fff; border: none;
  padding: 8px 18px; border-radius: var(--r-full); font-weight: 800; font-size: 13px; letter-spacing: .04em;
  box-shadow: 0 8px 22px rgba(255,95,162,.4);
  animation: bob 2s ease-in-out infinite;
}
@keyframes bob { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-7px);} }
.scan-form { display: flex; gap: var(--sp-3); max-width: 660px; margin: 0 auto; }
.scan-form .input { flex: 1; }
.trust-row { margin-top: var(--sp-4); color: var(--dim); font-size: 13px; }
.trust-row b { color: var(--muted); font-weight: 700; }
@media (max-width: 560px){ .scan-form { flex-direction: column; } }

/* ---------- Ticker ---------- */
.ticker { border-top: 2px solid var(--border); border-bottom: 2px solid var(--border); background: rgba(255,255,255,.6); overflow: hidden; }
.ticker-inner { display: flex; gap: var(--sp-8); padding: var(--sp-3) 0; white-space: nowrap; animation: scroll 38s linear infinite; }
.ticker:hover .ticker-inner { animation-play-state: paused; }
@keyframes scroll { from{ transform: translateX(0);} to{ transform: translateX(-50%);} }
.tick { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: 13px; color: var(--muted); font-family: var(--mono); font-weight: 700; }
.tick .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-green); box-shadow: 0 0 0 4px rgba(34,199,154,.2); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%,100%{ transform: scale(1);} 50%{ transform: scale(1.5);} }
.tick .sc { font-weight: 800; }

/* ---------- Cards / grids ---------- */
.grid { display: grid; gap: var(--sp-6); }
.grid-2 { grid-template-columns: repeat(2,1fr); }
.grid-3 { grid-template-columns: repeat(3,1fr); }
.grid-4 { grid-template-columns: repeat(4,1fr); }
@media (max-width: 900px){ .grid-3,.grid-4 { grid-template-columns: repeat(2,1fr);} }
@media (max-width: 620px){ .grid-2,.grid-3,.grid-4 { grid-template-columns: 1fr;} }

.card {
  position: relative; background: var(--card); border: 2px solid var(--border); border-radius: var(--r-lg);
  padding: var(--sp-6); box-shadow: var(--shadow-sm); transition: transform .18s, box-shadow .18s, border-color .18s;
  overflow: hidden;
}
.card::before { content:''; position:absolute; top:0; left:0; right:0; height:5px; background: var(--grad-hero); opacity:0; transition:opacity .18s; }
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: transparent; }
.card:hover::before { opacity: 1; }
.card h3 { font-size: 18px; }
/* Rainbow accent per card position */
.grid-4 .card:nth-child(4n+1) .ico { background: rgba(255,95,162,.15); }
.grid-4 .card:nth-child(4n+2) .ico { background: rgba(77,124,255,.15); }
.grid-4 .card:nth-child(4n+3) .ico { background: rgba(34,199,154,.15); }
.grid-4 .card:nth-child(4n+4) .ico { background: rgba(255,198,58,.2); }
.card .ico {
  font-size: 26px; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-md); margin-bottom: var(--sp-3); background: rgba(155,93,229,.14); color: var(--c-purple);
}
.card .ico .ti { font-size: 28px; }
.grid-4 .card:nth-child(4n+1) .ico { color: var(--c-pink); }
.grid-4 .card:nth-child(4n+2) .ico { color: var(--c-blue); }
.grid-4 .card:nth-child(4n+3) .ico { color: var(--c-green); }
.grid-4 .card:nth-child(4n+4) .ico { color: #C98A00; }

/* Tabler icon baseline */
.ti { font-size: 1.05em; line-height: 1; vertical-align: -0.12em; }
.btn .ti { font-size: 1.1em; }
.card h3 .ti, h2 .ti { color: var(--accent); vertical-align: -0.14em; margin-right: 4px; }

/* ---------- Stats band ---------- */
.stats-band { display: flex; justify-content: center; gap: var(--sp-16); flex-wrap: wrap; }
.stat .num { font-size: 52px; font-weight: 800; font-family: var(--mono); background: var(--grad-cool); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat .lbl { color: var(--muted); font-size: 14px; font-weight: 600; }

/* ---------- Steps ---------- */
.step .n { font-family: var(--mono); font-size: 16px; font-weight: 800; color: #fff; background: var(--grad-warm); display: inline-flex; width: 40px; height: 40px; border-radius: var(--r-full); align-items: center; justify-content: center; margin-bottom: var(--sp-2); }

/* ---------- FAQ ---------- */
.faq-item { border: 2px solid var(--border); border-radius: var(--r-md); margin-bottom: var(--sp-3); background: #fff; transition: border-color .15s, box-shadow .15s; }
.faq-item:hover { border-color: var(--c-blue); box-shadow: var(--shadow-sm); }
.faq-q { width: 100%; text-align: left; background: none; border: none; color: var(--text); font-family: var(--font);
  font-size: 17px; font-weight: 700; padding: var(--sp-4) var(--sp-6); cursor: pointer; display: flex; justify-content: space-between; gap: var(--sp-4); }
.faq-q .chev { color: var(--accent); transition: .25s; font-weight: 800; }
.faq-item.open { border-color: var(--accent); }
.faq-item.open .chev { transform: rotate(180deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .25s ease, padding .25s ease; color: var(--muted); padding: 0 var(--sp-6); }
.faq-item.open .faq-a { max-height: 320px; padding: 0 var(--sp-6) var(--sp-4); }

/* ---------- CTA band ---------- */
.cta-band {
  position: relative; overflow: hidden; text-align: center;
  background: var(--grad-hero); background-size: 300% 300%; animation: gradmove 10s ease infinite;
  border-radius: var(--r-lg); padding: var(--sp-16) var(--sp-8); color: #fff; box-shadow: var(--shadow);
}
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,.9); }
.cta-band p b { color: #fff !important; }

/* ---------- Footer ---------- */
.site-footer { border-top: 2px solid var(--border); padding: var(--sp-8) 0; color: var(--muted); font-size: 14px; background: rgba(255,255,255,.6); }
.site-footer .container { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-4); align-items: center; }
.site-footer a { color: var(--muted); margin-right: var(--sp-4); font-weight: 600; }
.site-footer a:hover { color: var(--accent); }

/* ---------- Progress overlay ---------- */
.overlay { position: fixed; inset: 0; z-index: 100; background: rgba(253,244,255,.92); backdrop-filter: blur(8px);
  display: none; align-items: center; justify-content: center; }
.overlay.show { display: flex; }
.overlay-inner { text-align: center; max-width: 480px; padding: var(--sp-8); background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow); border: 2px solid var(--border); }
.radar { width: 120px; height: 120px; margin: 0 auto var(--sp-6); }
.radar .sweep { transform-origin: 60px 60px; animation: spin 1.5s linear infinite; }
.overlay .stage { font-size: 19px; font-weight: 800; margin-bottom: var(--sp-2); color: var(--text); }
.overlay .scan-url { color: var(--muted); font-family: var(--mono); font-size: 13px; margin-bottom: var(--sp-6); word-break: break-all; }
.progress-track { height: 12px; background: var(--border); border-radius: var(--r-full); overflow: hidden; }
.progress-fill { height: 100%; width: 0%; background: var(--grad-hero); background-size: 200% 200%; border-radius: var(--r-full); transition: width .4s ease; animation: gradmove 3s ease infinite; }
.overlay .eta { margin-top: var(--sp-3); color: var(--dim); font-size: 13px; font-family: var(--mono); }
.form-error { color: var(--danger); font-size: 14px; margin-top: var(--sp-3); min-height: 20px; font-weight: 600; }

/* ---------- Badges ---------- */
.badge { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: var(--r-full); font-size: 12px; font-weight: 800; }
.sev { font-size: 11px; font-weight: 800; padding: 3px 10px; border-radius: var(--r-full); text-transform: uppercase; }
.sev.critical { background: rgba(255,93,108,.16); color: var(--danger); }
.sev.warning { background: rgba(255,159,28,.18); color: #C97A00; }