/* REAShield v2 — sections: headings, stats, bento, before/after */
section{padding:110px 0;position:relative}
@media(max-width:700px){section{padding:72px 0}}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--accent-ink)}
.eyebrow::before{content:"";width:18px;height:1px;background:currentColor}
.center .eyebrow::before{display:none}
h2{font-size:clamp(30px,4.4vw,52px);line-height:1.05;letter-spacing:-.035em;font-weight:700;margin-top:14px}
.sechead{max-width:720px}
.sechead.center{margin:0 auto;text-align:center}
.sechead p{color:var(--mut);font-size:17.5px;margin-top:16px}

/* problem stats */
.stats{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:24px;background:var(--panel);margin-top:52px;overflow:hidden}
.stat{padding:34px 30px;border-left:1px solid var(--line)}
.stat:first-child{border-left:none}
.stat b{display:block;font-size:clamp(36px,4.2vw,52px);font-weight:700;letter-spacing:-.045em;line-height:1}
.stat span{display:block;color:var(--ink);margin-top:12px;font-size:15px;font-weight:500}
.stat small{display:block;color:var(--faint);font-size:12.5px;margin-top:6px}
@media(max-width:760px){.stats{grid-template-columns:1fr}.stat{border-left:none;border-top:1px solid var(--line)}.stat:first-child{border-top:none}}

/* bento */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;margin-top:56px}
.card{position:relative;border:1px solid var(--line);border-radius:24px;background:var(--panel);padding:28px;overflow:hidden;isolation:isolate}
.card::after{content:"";position:absolute;right:-20%;bottom:-55%;width:65%;height:85%;z-index:-1;background:radial-gradient(closest-side,var(--glow),transparent);opacity:.3}
.card h3{font-size:19px;letter-spacing:-.02em;font-weight:650}
.card p{color:var(--mut);font-size:14.5px;margin-top:8px;max-width:34em}
.card .vis{margin-top:24px}
.c6{grid-column:span 6}.c4{grid-column:span 4}.c2{grid-column:span 2}.c3{grid-column:span 3}
@media(max-width:900px){.c4,.c2,.c3{grid-column:span 6}}

.scorebig{display:flex;gap:30px;align-items:center;flex-wrap:wrap}
.ring2{position:relative;width:136px;height:136px;flex:0 0 136px}
.ring2 svg{transform:rotate(-90deg)}
.ring2 .c{position:absolute;inset:0;display:grid;place-items:center;text-align:center;line-height:1.1}
.ring2 .c b{font-size:40px;font-family:"Geist Mono",monospace;font-weight:600}
.ring2 .c small{font-size:11px;color:var(--faint)}
.ring2 .f{stroke-dashoffset:351.9;transition:stroke-dashoffset 1.6s cubic-bezier(.2,.8,.2,1)}
.in .ring2 .f{stroke-dashoffset:var(--off)}
.barlist{flex:1;min-width:240px;display:grid;gap:12px}
.bl{display:grid;grid-template-columns:150px 1fr 34px;gap:12px;align-items:center;font-size:13px;color:var(--mut)}
.bl .t{height:8px;border-radius:999px;background:var(--raise);overflow:hidden}
.bl .t i{display:block;height:100%;border-radius:999px;width:0;transition:width 1.3s cubic-bezier(.2,.8,.2,1)}
.in .bl .t i{width:var(--w)}
.bl b{font-family:"Geist Mono",monospace;font-size:12.5px;text-align:right;color:var(--ink);font-weight:500}

.leaklist{display:grid;gap:8px}
.lk{display:flex;gap:10px;align-items:center;font-size:12.5px;border:1px solid var(--line);border-radius:12px;padding:9px 12px;background:var(--panel2)}
.lk code{color:var(--warn);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lk .ic{width:22px;height:22px;flex:0 0 22px;border-radius:7px;display:grid;place-items:center;font-size:11px;font-weight:700;
  background:color-mix(in srgb,var(--bad) 16%,transparent);color:var(--bad)}

.ipcmap{width:100%;height:150px;display:block}
.ipcmap .n{fill:var(--panel2);stroke:var(--line2)}
.ipcmap text{fill:var(--mut);font:500 11px "Geist Mono",monospace}
.ipcmap .e{stroke:var(--accent);stroke-width:1.4;stroke-dasharray:4 4;animation:flow 1.6s linear infinite}
@keyframes flow{to{stroke-dashoffset:-16}}

.bytes{font-family:"Geist Mono",monospace;font-size:11.5px;line-height:1.75;color:var(--faint);border:1px solid var(--line);border-radius:12px;
  padding:12px 14px;background:var(--bg2);word-break:break-all;height:118px;overflow:hidden;position:relative}
.bytes::after{content:"";position:absolute;left:0;right:0;bottom:0;height:44px;background:linear-gradient(transparent,var(--bg2))}
.bytes em{font-style:normal;color:var(--accent-ink)}

.check{border:1px solid var(--line);border-radius:14px;background:var(--panel2);overflow:hidden;font-size:13px}
.check .h{padding:10px 14px;border-bottom:1px solid var(--line);color:var(--faint);font-size:12px}
.check .r{display:flex;gap:10px;align-items:center;padding:11px 14px}
.check .r + .r{border-top:1px solid var(--line)}
.check .r small{margin-left:auto;color:var(--faint);font-family:"Geist Mono",monospace}
.okdot,.nodot{width:18px;height:18px;flex:0 0 18px;border-radius:50%;display:grid;place-items:center;font-size:10px;font-weight:700}
.okdot{background:var(--good);color:#04130c}
.nodot{background:var(--bad);color:#200606}

/* before / after code */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:52px}
@media(max-width:900px){.compare{grid-template-columns:1fr}}
.codewin{border:1px solid var(--line);border-radius:20px;background:var(--panel);overflow:hidden}
.codewin .bar{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--panel2);font-size:13px}
.codewin .bar .file{font-family:"Geist Mono",monospace;color:var(--mut)}
.chip{margin-left:auto;font-size:12px;font-weight:600;padding:3px 10px;border-radius:999px;font-family:"Geist Mono",monospace}
.chip.bad{background:color-mix(in srgb,var(--bad) 16%,transparent);color:var(--bad)}
.chip.good{background:color-mix(in srgb,var(--good) 16%,transparent);color:var(--good)}
.codewin pre{margin:0;padding:18px 20px;font-family:"Geist Mono",monospace;font-size:12.5px;line-height:1.75;color:var(--mut);white-space:pre-wrap;word-break:break-all;min-height:260px}
.k{color:#c792ea}.s{color:var(--warn)}.fn{color:#82aaff}.cm{color:var(--faint)}
.hl{background:color-mix(in srgb,var(--bad) 14%,transparent);border-radius:4px;padding:0 2px}
.codewin .foot{padding:12px 16px;border-top:1px solid var(--line);font-size:12.5px;color:var(--faint)}
.scoreline{display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap;margin-top:26px;font-family:"Geist Mono",monospace;font-size:14px}
.scoreline .s1{color:var(--bad)}.scoreline .s2{color:var(--cyan)}.scoreline .s3{color:var(--good)}
.scoreline .arr{color:var(--faint)}
.note{margin:22px auto 0;max-width:640px;text-align:center;font-size:13.5px;color:var(--faint)}