/* ============================================================
   veracore — design system (Direction A: premium editorial)
   Fraunces (display serif) + Inter (UI) + JetBrains Mono (data)
   ============================================================ */
:root{
  --bg:#FBFAF8;
  --bg-soft:#F4F1EB;
  --bg-tint:#F7F4EE;
  --ink-bg:#15140F;
  --ink:#1A1813;
  --ink-soft:#6B665C;
  --ink-faint:#9A948A;
  --line:#E9E4DA;
  --line-strong:#DAD3C6;
  --accent:#3F3C7C;
  --accent-soft:#ECEBF6;
  --crit:#B42318;
  --high:#B54708;
  --med:#8A6500;
  --ok:#2E7D5B;
  --radius:14px;
  --radius-sm:9px;
  --shadow-sm:0 1px 2px rgba(20,18,12,.04), 0 2px 6px rgba(20,18,12,.04);
  --shadow-md:0 6px 16px rgba(20,18,12,.06), 0 16px 40px rgba(20,18,12,.07);
  --shadow-lg:0 10px 30px rgba(20,18,12,.08), 0 30px 70px rgba(20,18,12,.13);
  --maxw:1120px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
:target{scroll-margin-top:88px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:17px; line-height:1.6; letter-spacing:-0.006em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{
  font-family:"Fraunces","Iowan Old Style",Georgia,serif;
  font-weight:500; color:var(--ink); letter-spacing:-0.02em; line-height:1.1;
  font-optical-sizing:auto;
}
a{color:var(--ink); text-decoration:none}
a:hover{text-decoration:underline}
.mono{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px}
img{max-width:100%}

/* ---------- header / nav ---------- */
header.site{
  position:sticky; top:0; z-index:40;
  background:rgba(251,250,248,.82); backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
}
header.site .wrap{display:flex; align-items:center; justify-content:space-between; height:66px}
.logo{display:inline-flex; align-items:center; gap:0; font-family:"Inter"; font-weight:700;
  font-size:19px; letter-spacing:-0.03em; color:var(--ink)}
.logo:hover{text-decoration:none}
.logo::before{
  content:""; width:18px; height:18px; border-radius:6px; margin-right:9px;
  background:linear-gradient(140deg,var(--ink) 0%, var(--accent) 100%);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.18);
}
.logo span{color:var(--accent)}
nav.site{display:flex; align-items:center; gap:6px}
nav.site a{padding:8px 13px; border-radius:8px; font-size:15px; font-weight:500;
  color:var(--ink-soft); letter-spacing:-0.01em}
nav.site a:hover{color:var(--ink); background:var(--bg-soft); text-decoration:none}
nav.site a.cta{margin-left:8px; background:var(--ink); color:#fff; font-weight:600}
nav.site a.cta:hover{background:#000; color:#fff}
@media (max-width:640px){
  nav.site a:not(.cta){display:none}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; gap:8px; padding:13px 22px; border-radius:10px;
  font-family:"Inter"; font-weight:600; font-size:15.5px; letter-spacing:-0.01em;
  border:1px solid transparent; cursor:pointer; transition:transform .15s ease, box-shadow .15s ease, background .15s ease}
.btn-primary{background:var(--ink); color:#fff; box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:#000; color:#fff; text-decoration:none; transform:translateY(-1px); box-shadow:var(--shadow-md)}
.btn-ghost{background:#fff; color:var(--ink); border-color:var(--line-strong)}
.btn-ghost:hover{background:var(--bg-soft); text-decoration:none; transform:translateY(-1px)}

/* ---------- generic sections ---------- */
main{padding:0 0 40px}
section{margin:72px 0}
.wrap > section:first-child{margin-top:40px}
section h2{font-size:clamp(28px,3.4vw,38px); margin:0 0 14px}
.eyebrow{display:inline-block; font-family:"Inter"; font-weight:600; font-size:12.5px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin-bottom:16px}
.section-lead{font-size:19px; color:var(--ink-soft); max-width:640px; margin:0 0 8px}

/* ---------- hero ---------- */
.hero{padding:64px 0 28px}
.badge{display:inline-flex; align-items:center; gap:7px; font-family:"Inter"; font-weight:600;
  font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--accent);
  background:var(--accent-soft); padding:6px 13px; border-radius:999px; margin-bottom:22px}
.hero h1{font-size:clamp(40px,6.2vw,68px); margin:0 0 22px; max-width:14ch}
.hero p.lead, .lead{font-size:clamp(18px,2.2vw,21px); line-height:1.5; color:var(--ink-soft);
  max-width:600px; margin:0 0 30px; font-family:"Inter"; letter-spacing:-0.01em}
.hero .ctas{display:flex; gap:13px; flex-wrap:wrap}
.hero-note{margin-top:18px; font-size:14px; color:var(--ink-faint)}

.hero-grid{display:grid; grid-template-columns:1.05fr 1fr; gap:48px; align-items:center}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr; gap:8px}}

/* soft gradient backdrop behind hero visual */
.hero-visual{position:relative}
.hero-visual::before{
  content:""; position:absolute; inset:-12% -8% -8% -8%; z-index:0;
  background:radial-gradient(60% 60% at 70% 20%, rgba(63,60,124,.12), transparent 70%),
             radial-gradient(50% 50% at 20% 90%, rgba(181,71,8,.08), transparent 70%);
  filter:blur(8px);
}
.hero-visual .ui-window{position:relative; z-index:1}

/* ---------- product UI mockup ("looks like the app") ---------- */
.ui-window{
  background:#fff; border:1px solid var(--line); border-radius:16px;
  box-shadow:var(--shadow-lg); overflow:hidden;
}
.ui-bar{display:flex; align-items:center; gap:10px; padding:12px 16px;
  border-bottom:1px solid var(--line); background:var(--bg-tint)}
.ui-dots{display:flex; gap:6px}
.ui-dots i{width:10px; height:10px; border-radius:50%; background:#DBD5C9; display:block}
.ui-title{font-family:"JetBrains Mono",monospace; font-size:12px; color:var(--ink-soft)}
.ui-title b{color:var(--ink); font-weight:500}
.ui-body{padding:16px 18px}
.ui-statline{display:flex; gap:22px; padding:2px 2px 14px; flex-wrap:wrap}
.ui-statline .s{display:flex; flex-direction:column}
.ui-statline .s b{font-family:"Fraunces",serif; font-size:24px; font-weight:600; line-height:1}
.ui-statline .s span{font-size:11.5px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.05em; margin-top:5px}

.ui-table{width:100%; border-collapse:collapse; font-size:13.5px}
.ui-table th{font-family:"Inter"; text-transform:uppercase; letter-spacing:.05em; font-size:10.5px;
  color:var(--ink-faint); font-weight:600; text-align:left; padding:7px 10px; border-bottom:1px solid var(--line)}
.ui-table td{padding:10px; border-bottom:1px solid var(--line); vertical-align:middle}
.ui-table tr:last-child td{border-bottom:none}
.ui-table .issuer{font-weight:600; color:var(--ink)}
.ui-table .sub{font-size:11.5px; color:var(--ink-faint)}
.ui-table .num{font-family:"JetBrains Mono",monospace; font-size:12px; color:var(--ink-soft)}

.pill{display:inline-flex; align-items:center; gap:5px; font-family:"Inter"; font-weight:700;
  font-size:10.5px; letter-spacing:.04em; padding:3px 9px; border-radius:999px; color:#fff; white-space:nowrap}
.pill::before{content:""; width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,.85)}
.pill.crit{background:var(--crit)} .pill.high{background:var(--high)}
.pill.med{background:var(--med)} .pill.ok{background:var(--ok)}
.pill.ghost{background:var(--bg-soft); color:var(--ink-soft)} .pill.ghost::before{background:var(--ink-faint)}

/* signal cards (MAR) */
.signal{display:flex; gap:13px; padding:14px 16px; border:1px solid var(--line);
  border-radius:12px; background:#fff; box-shadow:var(--shadow-sm); margin-bottom:12px}
.signal .ic{flex:0 0 38px; height:38px; border-radius:10px; display:grid; place-items:center;
  background:var(--bg-soft); font-size:18px}
.signal h4{margin:0 0 3px; font-family:"Inter"; font-weight:600; font-size:15px; letter-spacing:-0.01em}
.signal p{margin:0; font-size:13px; color:var(--ink-soft)}
.signal .meta{font-family:"JetBrains Mono",monospace; font-size:11.5px; color:var(--ink-faint); margin-top:5px}

/* audit / hash chain card */
.audit{background:var(--ink-bg); color:#EDEAE2; border-radius:16px; padding:22px 24px; box-shadow:var(--shadow-lg)}
.audit .row{display:flex; justify-content:space-between; gap:14px; padding:9px 0; border-bottom:1px solid rgba(255,255,255,.08); font-size:13px}
.audit .row:last-child{border-bottom:none}
.audit .k{color:#A9A398} .audit .v{font-family:"JetBrains Mono",monospace; color:#EDEAE2; text-align:right; word-break:break-all}
.audit .verified{display:inline-flex; align-items:center; gap:8px; margin-top:14px; color:#7FD7AE; font-weight:600; font-size:13.5px; font-family:"Inter"}

/* ---------- stats strip ---------- */
.stat-strip{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--bg-tint)}
.stat-strip .wrap{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; padding:34px 28px}
@media (max-width:760px){.stat-strip .wrap{grid-template-columns:repeat(2,1fr); gap:28px}}
.stat b{display:block; font-family:"Fraunces",serif; font-weight:600; font-size:clamp(30px,4vw,42px); line-height:1}
.stat span{display:block; margin-top:8px; font-size:14px; color:var(--ink-soft)}

/* ---------- feature rows (alternating) ---------- */
.feature{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; margin:88px 0}
.feature.flip .feature-text{order:2}
@media (max-width:900px){.feature{grid-template-columns:1fr; gap:28px} .feature.flip .feature-text{order:0}}
.feature-text h2{font-size:clamp(26px,3vw,34px); margin:10px 0 14px}
.feature-text p{color:var(--ink-soft); font-size:17px; margin:0 0 16px; max-width:46ch}
.feature-text ul{margin:0 0 20px; padding:0; list-style:none}
.feature-text li{position:relative; padding-left:26px; margin:9px 0; color:var(--ink); font-size:15.5px}
.feature-text li::before{content:""; position:absolute; left:0; top:8px; width:14px; height:14px;
  border-radius:50%; background:var(--accent-soft);
  box-shadow:inset 0 0 0 4px var(--accent)}
.feature-link{font-weight:600; color:var(--accent)}

/* ---------- cards / bento ---------- */
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.grid2{display:grid; grid-template-columns:repeat(2,1fr); gap:20px}
@media (max-width:820px){.grid3,.grid2{grid-template-columns:1fr}}
.card{border:1px solid var(--line); border-radius:var(--radius); padding:26px; background:#fff;
  box-shadow:var(--shadow-sm); transition:transform .18s ease, box-shadow .18s ease}
.card:hover{transform:translateY(-3px); box-shadow:var(--shadow-md)}
.card .ic{width:42px; height:42px; border-radius:11px; display:grid; place-items:center;
  background:var(--bg-soft); margin-bottom:14px; font-size:20px; color:var(--ink)}
.ic svg{width:22px; height:22px; display:block}
.signal .ic svg{width:20px; height:20px}
.card h3{margin:0 0 8px; font-size:19px; font-family:"Fraunces",serif; font-weight:600}
.card h3 a{color:var(--ink)}
.card p{margin:0; color:var(--ink-soft); font-size:15px}

/* ---------- callout ---------- */
.callout{border:1px solid var(--line-strong); background:linear-gradient(180deg,#fff,var(--bg-tint));
  padding:22px 26px; border-radius:var(--radius); font-size:16.5px; box-shadow:var(--shadow-sm)}

/* ---------- logo cloud ---------- */
.logocloud{text-align:center; margin:64px 0}
.logocloud p{font-size:13px; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-faint); margin:0 0 22px}
.logocloud .row{display:flex; flex-wrap:wrap; justify-content:center; gap:18px 40px; align-items:center; opacity:.62}
.logocloud .row span{font-family:"Fraunces",serif; font-weight:600; font-size:20px; color:var(--ink-soft)}

/* ---------- forms ---------- */
input[type=text],input[type=email]{width:100%; padding:13px 15px; border:1px solid var(--line-strong);
  border-radius:10px; font-size:15.5px; font-family:"Inter"; background:#fff; color:var(--ink); transition:border .15s, box-shadow .15s}
input[type=text]:focus,input[type=email]:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
label{font-weight:600; font-size:13.5px; display:block; margin-bottom:7px; color:var(--ink)}
form .field{margin-bottom:15px}
form.card{background:#fff}

/* ---------- checker result ---------- */
.result-box{border:1px solid var(--line-strong); border-radius:var(--radius); padding:22px; margin-top:20px; display:none; background:#fff; box-shadow:var(--shadow-sm)}
.result-box.show{display:block}
#resultSummary{font-size:16px}
.sev{display:inline-block; font-family:"Inter"; font-weight:700; font-size:11.5px; padding:4px 11px; border-radius:999px; color:#fff; letter-spacing:.03em}
.sev-match{background:var(--crit)} .sev-possible{background:var(--med)} .sev-clear{background:var(--ok)}
.match-row{border:1px solid var(--line); border-radius:10px; padding:13px 15px; margin-top:11px; font-size:14.5px; background:var(--bg-tint)}
.match-row .name{font-weight:600} .match-row .meta{color:var(--ink-soft); font-size:13px; font-family:"JetBrains Mono",monospace}

/* ---------- footer ---------- */
footer.site{border-top:1px solid var(--line); background:var(--bg-tint); margin-top:80px}
footer.site .wrap{padding:54px 28px 34px}
.foot-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:32px}
@media (max-width:760px){.foot-grid{grid-template-columns:1fr 1fr}}
.foot-grid h5{font-family:"Inter"; font-weight:600; font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint); margin:0 0 14px}
.foot-grid a{display:block; color:var(--ink-soft); font-size:14.5px; padding:5px 0}
.foot-grid a:hover{color:var(--ink)}
.foot-about{max-width:30ch; color:var(--ink-soft); font-size:14.5px; margin:12px 0 0}
.foot-bottom{display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  margin-top:40px; padding-top:22px; border-top:1px solid var(--line); color:var(--ink-faint); font-size:13px}

/* ---------- content / guides ---------- */
.disclaimer{font-size:13.5px; color:var(--ink-soft); background:var(--bg-soft); padding:15px 17px; border-radius:10px; margin-top:20px}
.breadcrumb{font-size:13.5px; color:var(--ink-faint); margin:28px 0 10px}
.breadcrumb a{color:var(--ink-soft)}
.reviewed{font-size:13px; color:var(--ink-faint)}
.guide-body{max-width:720px}
.guide-body h2{font-size:25px; margin-top:38px}
.guide-body p, .guide-body li{font-size:17px; color:#2A2720; line-height:1.7}
.guide-body ul, .guide-body ol{padding-left:22px}
.guide-body li{margin:7px 0}
.toc{border:1px solid var(--line); border-radius:12px; padding:18px 20px; background:var(--bg-tint); font-size:14.5px; max-width:720px}
.toc strong{display:block; margin-bottom:8px; font-size:12.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint)}
.toc a{display:block; padding:4px 0; color:var(--accent)}
.faq dt{font-weight:600; margin-top:24px; font-size:17.5px; font-family:"Inter"}
.faq dd{margin:8px 0 0; color:var(--ink-soft)}
table{width:100%; border-collapse:collapse; font-size:15px; margin:18px 0}
th,td{text-align:left; padding:11px 13px; border-bottom:1px solid var(--line)}
th{color:var(--ink-faint); font-weight:600; font-size:12.5px; text-transform:uppercase; letter-spacing:.04em}

.honeypot{position:absolute; left:-9999px}

/* dark section */
.section-dark{background:var(--ink-bg); color:#EDEAE2}
.section-dark h2{color:#fff}
.section-dark .lead{color:#B7B1A6}

/* ---------- how it works (pipeline) ---------- */
.how-steps{display:flex; align-items:stretch; gap:6px; margin-top:30px}
.how-step{flex:1; background:#fff; border:1px solid var(--line); border-radius:14px;
  padding:22px 20px; box-shadow:var(--shadow-sm); position:relative}
.how-step .n{position:absolute; top:16px; right:16px; font-family:"JetBrains Mono",monospace;
  font-size:12px; color:var(--ink-faint); font-weight:500}
.how-step .ic{width:42px; height:42px; border-radius:11px; display:grid; place-items:center;
  background:var(--bg-soft); color:var(--ink); margin-bottom:14px}
.how-step h4{margin:0 0 7px; font-family:"Inter"; font-weight:600; font-size:16px; letter-spacing:-0.01em}
.how-step p{margin:0; font-size:13.5px; color:var(--ink-soft); line-height:1.5}
.how-chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:13px}
.how-chips span{font-family:"JetBrains Mono",monospace; font-size:11px; color:var(--ink-soft);
  background:var(--bg-soft); border:1px solid var(--line); padding:3px 8px; border-radius:6px}
.how-arrow{flex:0 0 auto; display:flex; align-items:center; color:var(--ink-faint)}
.how-arrow svg{width:20px; height:20px}
.how-loop{display:flex; justify-content:center; margin-top:20px}
.how-loop span{display:inline-flex; align-items:center; gap:9px; font-size:13.5px; color:var(--ink-soft);
  background:var(--bg-tint); border:1px solid var(--line); padding:9px 18px; border-radius:999px}
.how-loop svg{width:16px; height:16px; color:var(--accent)}
@media (max-width:860px){
  .how-steps{flex-direction:column}
  .how-arrow{justify-content:center; transform:rotate(90deg); padding:2px 0}
}

/* ---------- scroll reveal ---------- */
.reveal{opacity:0; transform:translateY(16px); transition:opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1; transform:none; transition:none}}