/* REAShield v2 — hero */
.hero{position:relative;padding:150px 0 0;text-align:center;isolation:isolate;overflow-x:clip}
.aurora{position:absolute;left:-10%;right:-10%;top:-10%;height:900px;z-index:-1;overflow:hidden;pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,#000 50%,transparent);mask-image:linear-gradient(to bottom,#000 50%,transparent)}
.aurora::before{content:"";position:absolute;inset:0;background:
  radial-gradient(40% 50% at 50% 0%,rgba(124,108,255,.55),transparent 70%),
  radial-gradient(28% 40% at 22% 8%,rgba(63,215,230,.25),transparent 70%),
  radial-gradient(28% 40% at 80% 6%,rgba(167,139,250,.3),transparent 70%)}
.beam{position:absolute;top:-12%;width:11%;height:85%;filter:blur(28px);border-radius:50%;opacity:.5;
  background:linear-gradient(to bottom,rgba(150,140,255,.9),rgba(63,215,230,.25) 60%,transparent);
  animation:sway 10s ease-in-out infinite alternate}
.beam.b1{left:29%;rotate:-14deg}
.beam.b2{left:45.5%;width:9%;animation-duration:12s}
.beam.b3{left:60%;rotate:12deg;animation-duration:14s;background:linear-gradient(to bottom,rgba(63,215,230,.8),rgba(124,108,255,.25) 60%,transparent)}
.beam.b4{left:15%;width:7%;rotate:-22deg;opacity:.3}
.beam.b5{left:75%;width:7%;rotate:20deg;opacity:.3}
@keyframes sway{from{translate:-3% 0;opacity:.32}to{translate:3% 0;opacity:.68}}
:root[data-theme="light"] .beam{opacity:.22}
.gridbg{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.6;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:56px 56px;
  -webkit-mask-image:radial-gradient(70% 55% at 50% 28%,#000,transparent 75%);mask-image:radial-gradient(70% 55% at 50% 28%,#000,transparent 75%)}

.newpill{display:inline-flex;align-items:center;gap:10px;font-size:13px;color:var(--mut);border:1px solid var(--line2);border-radius:999px;
  padding:5px 14px 5px 5px;background:color-mix(in srgb,var(--panel) 70%,transparent);backdrop-filter:blur(8px)}
.newpill b{font-weight:600;background:linear-gradient(180deg,#8f80ff,#6a59f5);color:#fff;border-radius:999px;padding:3px 10px;font-size:12px}
.newpill:hover{border-color:var(--accent)}
.hero h1{font-size:clamp(34px,9vw,84px);overflow-wrap:break-word;hyphens:manual;line-height:1;letter-spacing:-.045em;font-weight:700;margin:26px auto 0;max-width:13ch}
.hero h1 .soft{background:linear-gradient(180deg,var(--ink) 35%,color-mix(in srgb,var(--ink) 50%,var(--accent)));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.lede{font-size:clamp(16px,2vw,19px);color:var(--mut);max-width:38em;margin:22px auto 0}
.ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:32px}
.trust{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;margin-top:22px;font-size:13px;color:var(--faint)}
.trust span{display:inline-flex;gap:7px;align-items:center}

/* product window */
.stage{position:relative;margin:64px auto 0;max-width:1080px;perspective:1800px}
.stage::before{content:"";position:absolute;inset:6% 6% -4%;z-index:-1;background:radial-gradient(50% 50% at 50% 50%,var(--glow),transparent 70%);filter:blur(40px)}
.app{border:1px solid var(--line2);border-radius:20px;background:var(--panel);box-shadow:var(--sh);overflow:hidden;text-align:left;
  transform:rotateX(8deg);transform-origin:top center;transition:transform 1s cubic-bezier(.2,.8,.2,1)}
.stage.in .app{transform:none}
.appbar{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--panel2)}
.appbar i{width:11px;height:11px;border-radius:50%;background:var(--line2)}
.appbar .url{margin:0 auto;font-size:12px;color:var(--faint);background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:3px 44px}
.appbody{display:grid;grid-template-columns:200px 1fr;min-height:420px}
.side{border-right:1px solid var(--line);padding:16px 12px;background:var(--panel2)}
.side .proj{display:flex;gap:9px;align-items:center;padding:8px;border-radius:10px;background:var(--raise);font-size:13px;font-weight:600;margin-bottom:14px}
.side .proj i{width:22px;height:22px;border-radius:7px;background:linear-gradient(135deg,#ff8a3d,#f43f5e)}
.side a{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:9px;font-size:13px;color:var(--mut)}
.side a.on{background:var(--raise);color:var(--ink)}
.side .cnt{margin-left:auto;font-size:10.5px;padding:1px 7px;border-radius:999px;background:color-mix(in srgb,var(--bad) 18%,transparent);color:var(--bad)}
.mainp{padding:20px 22px}
.mhead{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap}
.mhead h3{font-size:17px;letter-spacing:-.01em}
.mhead .meta{font-size:12px;color:var(--faint)}
.mhead .btn{margin-left:auto}
.kpis{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:12px;margin-top:16px}
.kpi{border:1px solid var(--line);border-radius:14px;padding:14px;background:var(--panel2)}
.kpi .l{font-size:12px;color:var(--faint)}
.kpi .v{font-size:26px;font-weight:700;letter-spacing:-.02em;margin-top:4px;font-family:"Geist Mono",monospace}
.kpi .d{font-size:11.5px;margin-top:2px}
.kpi.score{display:flex;gap:14px;align-items:center}
.miniring{position:relative;width:72px;height:72px;flex:0 0 72px}
.miniring svg{transform:rotate(-90deg)}
.miniring b{position:absolute;inset:0;display:grid;place-items:center;font-size:21px;font-family:"Geist Mono",monospace}
.tbl{margin-top:14px;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.tr{display:grid;grid-template-columns:84px 1.6fr 1fr 80px;gap:12px;padding:10px 14px;font-size:12.5px;align-items:center;border-top:1px solid var(--line)}
.tr.h{border-top:none;color:var(--faint);background:var(--panel2);font-size:11px;text-transform:uppercase;letter-spacing:.06em}
.tr code{color:var(--warn);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sev{font-size:11px;font-weight:600;padding:2px 8px;border-radius:999px;justify-self:start}
.sev.hi{background:color-mix(in srgb,var(--bad) 18%,transparent);color:var(--bad)}
.sev.md{background:color-mix(in srgb,var(--warn) 18%,transparent);color:var(--warn)}
.fix{font-size:11.5px;color:var(--accent-ink);justify-self:end}
@media(max-width:1060px){.kpis{grid-template-columns:1fr 1fr}}
@media(max-width:860px){
  .appbody{grid-template-columns:1fr}.side{display:none}.kpis{grid-template-columns:1fr 1fr}
  .tr{grid-template-columns:70px 1fr 64px}.tr>:nth-child(3){display:none}
}

/* works-with strip */
.strip{padding:70px 0 10px;text-align:center}
.strip p{font-size:13px;color:var(--faint)}
.marks{display:flex;justify-content:center;gap:38px;flex-wrap:wrap;margin-top:18px}
.marks span{font-weight:600;font-size:17px;letter-spacing:-.01em;color:var(--mut);opacity:.7}

/* stack carousel */
.carousel{position:relative;overflow:hidden;margin-top:22px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.carousel .track{display:flex;width:max-content;animation:marq 90s linear infinite}
.carousel:hover .track{animation-play-state:paused}
.carousel .set{display:flex;gap:56px;padding-right:56px}
.carousel .set span{font-weight:600;font-size:18px;letter-spacing:-.01em;color:var(--mut);opacity:.7;white-space:nowrap}
@keyframes marq{to{transform:translateX(-50%)}}