/* =========================================================
   ScamCatch — consumer-safety scanner
   Hand-built "fraud lab / safety report" system.
   Trust navy + traffic-light signals. Distinct from the
   other sites (no dark arena, no gallery, no field-manual).
   ========================================================= */

:root{
  --paper:#eef1f7;
  --paper-2:#e4e9f2;
  --surface:#ffffff;
  --ink:#0e1a2b;
  --ink-2:#22344c;
  --muted:#5d6e85;
  --line:#d8e0ec;
  --line-2:#c6d1e1;
  --blue:#1f4fd8;
  --blue-ink:#143a9e;
  --safe:#138a4e;
  --safe-bg:#e6f5ec;
  --caution:#c47800;
  --caution-bg:#fcf1dc;
  --danger:#cf342c;
  --danger-bg:#fbe7e5;
  --rad:12px;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --grot:"Space Grotesk",var(--sans);
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --maxw:1140px;
  --shadow:0 18px 50px -28px rgba(14,26,43,.45);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--grot); font-weight:600; letter-spacing:-.01em; line-height:1.08; margin:0}
b{font-weight:700}

/* ---------- utility bar ---------- */
.utility{background:var(--ink); color:#aebbcd; font-size:13px}
.util-row{display:flex; justify-content:space-between; align-items:center; height:34px; font-family:var(--mono)}
.util-note{letter-spacing:.02em}
.util-note.dim{color:#6c7e96}
@media(max-width:620px){.util-note.dim{display:none}}

/* ---------- nav ---------- */
.nav{position:sticky; top:0; z-index:50; background:rgba(238,241,247,.86); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.nav-row{display:flex; align-items:center; justify-content:space-between; height:64px}
.brand{display:inline-flex; align-items:center; gap:10px; font-family:var(--grot); font-weight:700; font-size:21px; text-decoration:none; color:var(--ink); letter-spacing:-.02em}
.brand b{color:var(--blue)}
.brand-mark{color:var(--blue)}
.brand.small{font-size:19px}
.nav-links{display:flex; align-items:center; gap:26px}
.nav-links a{text-decoration:none; color:var(--ink-2); font-size:15px; font-weight:500}
.nav-links a:hover{color:var(--blue)}
.nav-cta{background:var(--ink); color:#fff!important; padding:9px 16px; border-radius:8px; font-weight:600}
.nav-cta:hover{background:var(--blue)!important; color:#fff!important}
@media(max-width:780px){.nav-links a:not(.nav-cta){display:none}}

/* ---------- shared ---------- */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--rad); box-shadow:var(--shadow)}
.kicker{font-family:var(--mono); text-transform:uppercase; letter-spacing:.18em; font-size:12px; color:var(--blue); margin:0 0 10px}
.kicker.light{color:#9db4ff}
.band-h{font-size:clamp(26px,3.6vw,38px); max-width:20ch; margin-bottom:34px}

/* ---------- hero ---------- */
.hero{padding:clamp(40px,6vw,72px) 0 36px}
.hero-grid{display:grid; grid-template-columns:1fr 1.05fr; gap:48px; align-items:center}
.eyebrow{font-family:var(--mono); text-transform:uppercase; letter-spacing:.2em; font-size:13px; color:var(--danger); margin:0 0 14px}
.hero-copy h1{font-size:clamp(38px,5.4vw,62px); font-weight:700; letter-spacing:-.03em}
.lede{color:var(--ink-2); font-size:clamp(16px,1.5vw,18.5px); margin:20px 0 0; max-width:46ch}
.trust-row{list-style:none; display:flex; gap:10px; flex-wrap:wrap; padding:0; margin:26px 0 0}
.trust-row li{font-family:var(--mono); font-size:12.5px; color:var(--ink-2); background:var(--paper-2); border:1px solid var(--line-2); padding:6px 12px; border-radius:100px}
.trust-row li::before{content:"✓ "; color:var(--safe); font-weight:700}
@media(max-width:880px){.hero-grid{grid-template-columns:1fr; gap:30px}}

/* ---------- scanner ---------- */
.scanner{overflow:hidden}
.scanner-head{display:flex; align-items:center; gap:12px; padding:13px 18px; background:var(--ink); color:#cdd8e8}
.scanner-title{font-family:var(--mono); font-size:12px; letter-spacing:.18em}
.dot-row{display:inline-flex; gap:6px}
.dot-row i{width:10px; height:10px; border-radius:50%; background:#3a4c66}
.dot-row i:first-child{background:var(--danger)}
.dot-row i:nth-child(2){background:var(--caution)}
.dot-row i:nth-child(3){background:var(--safe)}
.chan-chips{display:flex; flex-wrap:wrap; gap:7px; padding:16px 18px 4px}
.chip{font-family:var(--sans); font-size:13px; font-weight:500; padding:7px 13px; border-radius:100px; border:1px solid var(--line-2); background:var(--paper); color:var(--ink-2); cursor:pointer; transition:all .14s ease}
.chip:hover{border-color:var(--blue); color:var(--blue)}
.chip.on{background:var(--ink); color:#fff; border-color:var(--ink)}
#content{width:100%; border:0; border-top:1px solid var(--line); margin-top:12px; padding:16px 18px; min-height:140px; resize:vertical; font-family:var(--mono); font-size:14.5px; line-height:1.55; color:var(--ink); outline:none; background:var(--surface)}
#content::placeholder{color:#9aa9bd}
.scanner-foot{display:flex; align-items:center; justify-content:space-between; padding:12px 18px; border-top:1px solid var(--line); background:var(--paper)}
.count{font-family:var(--mono); font-size:12px; color:var(--muted)}
.btn-scan{font-family:var(--grot); font-weight:600; font-size:16px; color:#fff; background:var(--blue); border:0; border-radius:9px; padding:12px 22px; cursor:pointer; transition:filter .15s ease, transform .05s ease}
.btn-scan:hover{filter:brightness(1.08)}
.btn-scan:active{transform:translateY(1px)}
.btn-scan:disabled{opacity:.6; cursor:progress}
.try-row{display:flex; flex-wrap:wrap; align-items:center; gap:9px; padding:0 18px 16px; font-size:13px; color:var(--muted)}
.try{font-size:12.5px; background:transparent; border:1px dashed var(--line-2); color:var(--blue-ink); padding:5px 11px; border-radius:7px; cursor:pointer}
.try:hover{border-color:var(--blue); border-style:solid}

/* ---------- result / report ---------- */
.result-wrap{padding:8px 0 14px}
.report{padding:0; overflow:hidden; animation:rise .25s ease}
@keyframes rise{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}
.report-banner{display:flex; align-items:center; gap:22px; padding:24px 28px}
.report-banner.safe{background:var(--safe-bg)}
.report-banner.suspicious{background:var(--caution-bg)}
.report-banner.dangerous{background:var(--danger-bg)}
.gauge{flex:none; width:96px; height:96px; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#fff; background:conic-gradient(#ccc 0 0)}
.gauge-num{font-family:var(--grot); font-weight:700; font-size:34px; line-height:1}
.gauge-lbl{font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; opacity:.9; margin-top:2px}
.banner-text{min-width:0}
.banner-level{font-family:var(--grot); font-weight:700; font-size:clamp(22px,3vw,30px); margin:0}
.banner-level.safe{color:var(--safe)}
.banner-level.suspicious{color:var(--caution)}
.banner-level.dangerous{color:var(--danger)}
.banner-cat{font-family:var(--mono); font-size:13px; letter-spacing:.04em; color:var(--ink-2); margin:4px 0 0; text-transform:uppercase}
.verdict{padding:22px 28px 6px; font-size:18px; color:var(--ink); margin:0; max-width:72ch}
.flags{display:grid; grid-template-columns:1fr 1fr; gap:0; padding:18px 28px 6px}
.flag-col{padding:6px 18px}
.flag-col:first-child{border-right:1px solid var(--line)}
.flag-col h3{font-size:15px; font-family:var(--grot); margin-bottom:12px; display:flex; align-items:center; gap:8px}
.flag-col.danger h3::before{content:"⚑"; color:var(--danger)}
.flag-col.safe h3::before{content:"✓"; color:var(--safe)}
.flag-col ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px}
.flag-col li{position:relative; padding-left:20px; font-size:15px; color:var(--ink-2); line-height:1.5}
.flag-col li::before{position:absolute; left:0; top:1px}
.flag-col.danger li::before{content:"–"; color:var(--danger); font-weight:700}
.flag-col.safe li::before{content:"–"; color:var(--safe); font-weight:700}
.flag-col .none{color:var(--muted); font-style:italic; padding-left:0}
.flag-col .none::before{content:""}
.todo{padding:20px 28px 8px; border-top:1px solid var(--line); margin-top:14px}
.todo h3{font-size:15px; margin-bottom:12px}
.todo ol{margin:0; padding-left:20px; display:flex; flex-direction:column; gap:9px}
.todo li{font-size:15.5px; color:var(--ink-2); padding-left:4px}
.todo li::marker{color:var(--blue); font-family:var(--grot); font-weight:700}
.report-foot{display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:18px 28px 24px; border-top:1px solid var(--line); margin-top:14px}
.btn-ghost{font-family:var(--grot); font-weight:600; font-size:14px; background:transparent; border:1px solid var(--line-2); color:var(--ink); padding:9px 16px; border-radius:8px; cursor:pointer}
.btn-ghost:hover{border-color:var(--blue); color:var(--blue)}
.disclaim{font-size:12.5px; color:var(--muted); margin-left:auto; max-width:40ch}
@media(max-width:680px){.flags{grid-template-columns:1fr} .flag-col:first-child{border-right:0; border-bottom:1px solid var(--line); padding-bottom:16px}}

/* ---------- bands ---------- */
.band{padding:clamp(52px,7vw,90px) 0}
.band.alt{background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.step{background:var(--surface); border:1px solid var(--line); border-radius:var(--rad); padding:26px 24px}
.band.alt .step{background:var(--paper); }
.step-n{display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:9px; background:var(--ink); color:#fff; font-family:var(--grot); font-weight:700; margin-bottom:16px}
.step h3{font-size:19px; margin-bottom:8px}
.step p{color:var(--muted); font-size:15.5px; margin:0}
@media(max-width:820px){.steps{grid-template-columns:1fr}}

.grid6{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.cat{padding:22px; border-radius:var(--rad); border:1px solid var(--line); background:var(--paper); border-left:3px solid var(--blue)}
.band.alt .cat{background:var(--surface)}
.cat h3{font-size:18px; margin-bottom:7px}
.cat p{margin:0; color:var(--muted); font-size:15px}
@media(max-width:820px){.grid6{grid-template-columns:1fr}}

/* ---------- why ---------- */
.why{background:var(--ink); color:#dde5f0; padding:clamp(54px,7vw,96px) 0}
.why-grid{display:grid; grid-template-columns:1fr 1.1fr; gap:48px; align-items:start}
.why-h{font-size:clamp(26px,3.6vw,40px); color:#fff; max-width:16ch}
.why-body p{color:#b9c6d8; font-size:17.5px; margin:0 0 18px}
.why-body em{color:#fff; font-style:normal; font-weight:600}
@media(max-width:820px){.why-grid{grid-template-columns:1fr; gap:22px}}

/* ---------- plans ---------- */
.tiers{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:stretch}
.tier{position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--rad); padding:30px 26px; display:flex; flex-direction:column}
.tier.featured{border:2px solid var(--blue); box-shadow:var(--shadow)}
.badge{position:absolute; top:-12px; left:26px; background:var(--blue); color:#fff; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; padding:4px 10px; border-radius:100px}
.tier h3{font-size:20px}
.price{font-family:var(--grot); font-weight:700; font-size:40px; margin:8px 0 2px}
.price span{font-size:16px; color:var(--muted); font-weight:500}
.tier-sub{color:var(--muted); font-size:14.5px; margin:0 0 18px}
.tier ul{list-style:none; padding:0; margin:0 0 22px; flex:1; display:flex; flex-direction:column; gap:10px}
.tier li{position:relative; padding-left:22px; font-size:15px; color:var(--ink-2)}
.tier li::before{content:"✓"; position:absolute; left:0; color:var(--safe); font-weight:700}
.tier-btn{display:block; text-align:center; text-decoration:none; font-family:var(--grot); font-weight:600; font-size:15px; padding:12px 16px; border-radius:9px; border:1px solid var(--line-2); color:var(--ink); background:var(--surface); cursor:pointer; transition:all .15s ease}
.tier-btn:hover{border-color:var(--blue); color:var(--blue)}
.tier-btn.solid{background:var(--blue); color:#fff; border-color:var(--blue)}
.tier-btn.solid:hover{filter:brightness(1.08); color:#fff}
@media(max-width:820px){.tiers{grid-template-columns:1fr}}

/* ---------- about ---------- */
.about-wrap{max-width:760px}
.about-body{font-size:18.5px; color:var(--ink-2); margin:0}
.sig{margin-top:28px; font-family:var(--grot); font-weight:600; font-size:18px}
.sig span{display:block; font-family:var(--sans); font-weight:400; font-size:14px; color:var(--muted); margin-top:2px}

/* ---------- faq ---------- */
.faq-wrap{max-width:780px}
details{border-top:1px solid var(--line); padding:18px 0}
details summary{font-family:var(--grot); font-weight:600; font-size:18px; cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+"; color:var(--blue); font-size:22px; font-weight:400}
details[open] summary::after{content:"–"}
details p{color:var(--muted); font-size:16px; margin:12px 0 0; max-width:64ch}

/* ---------- signup ---------- */
.signup{background:var(--blue); color:#fff; padding:clamp(48px,6vw,72px) 0}
.signup-inner{max-width:640px; text-align:center; margin:0 auto}
.signup h2{font-size:clamp(26px,3.4vw,36px); color:#fff}
.signup p{color:#d8e1ff; margin:10px 0 0}
.sub-form{display:flex; gap:10px; margin:24px auto 0; max-width:460px}
.sub-form input{flex:1; border:0; border-radius:9px; padding:13px 16px; font-family:var(--sans); font-size:16px; outline:none}
.sub-form button{font-family:var(--grot); font-weight:600; font-size:16px; background:var(--ink); color:#fff; border:0; border-radius:9px; padding:13px 22px; cursor:pointer}
.sub-form button:hover{background:#06101d}
.sub-msg{min-height:1.2em; font-size:14px; color:#eaf0ff; margin-top:12px}
@media(max-width:520px){.sub-form{flex-direction:column}}

/* ---------- legal docs ---------- */
.doc{max-width:760px; margin:0 auto; padding:54px 22px 80px}
.doc .back{font-family:var(--mono); font-size:13px; color:var(--blue); text-decoration:none}
.doc .back:hover{text-decoration:underline}
.doc h1{font-size:clamp(30px,4vw,42px); margin:22px 0 6px}
.doc .meta{font-family:var(--mono); font-size:12px; color:var(--muted); margin:0 0 26px}
.doc h2{font-size:21px; margin:34px 0 10px}
.doc p,.doc li{color:var(--ink-2); font-size:16.5px}
.doc ul{padding-left:20px; display:flex; flex-direction:column; gap:8px}
.doc a{color:var(--blue)}

/* ---------- footer ---------- */
.foot{background:var(--ink); color:#a9b7ca; padding:48px 0 30px}
.foot-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:30px}
.foot-brand .brand{color:#fff}
.foot-brand p{font-family:var(--mono); font-size:13px; color:#7e90a8; margin:10px 0 0}
.foot-col h4{font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:#7e90a8; margin:0 0 12px}
.foot-col a{display:block; text-decoration:none; color:#c4cfde; font-size:14.5px; margin-bottom:8px}
.foot-col a:hover{color:#fff}
.foot-bottom{display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; border-top:1px solid #1f3047; margin-top:34px; padding-top:18px; font-size:12.5px; color:#6f8197; font-family:var(--mono)}
@media(max-width:820px){.foot-grid{grid-template-columns:1fr 1fr; gap:24px}}
@media(max-width:520px){.foot-grid{grid-template-columns:1fr}}