/* Hylox Security theme on the Ecrox design system: black, shield red, navy and white */
:root{
  --signal:#E30613;--signal-hi:#FF2B37;--ember:#6D0A14;
  --rule-red:rgba(227,6,19,.45);
  --panel:#0E0E10;--panel-2:#151518;
}
::selection{background:var(--signal);color:#fff}
.btn.primary,.primary{color:#fff}
.btn.primary:hover{color:#fff}
.statement{background:radial-gradient(ellipse 60% 80% at 100% 50%,rgba(227,6,19,.13),transparent 70%)}
.field input:focus,.field textarea:focus,.field select:focus{box-shadow:0 0 0 3px rgba(227,6,19,.16)}
.notice{background:rgba(227,6,19,.05)}
.callout{background:rgba(227,6,19,.06)}
.pagehero{background:radial-gradient(ellipse 45% 70% at 100% 50%,rgba(227,6,19,.10),transparent 70%)}
.pagehero::after{content:"";position:absolute;right:-160px;top:50%;width:520px;height:520px;margin-top:-260px;border-radius:50%;
  border:2px solid rgba(255,255,255,.35);border-left-color:transparent;border-bottom-color:rgba(227,6,19,.55);transform:rotate(25deg);pointer-events:none}
.pagehero::before{content:"";position:absolute;right:250px;top:calc(50% - 200px);width:14px;height:14px;border-radius:50%;background:var(--signal)}
@media (max-width:720px){.pagehero::after{width:340px;height:340px;margin-top:-170px;right:-200px}.pagehero::before{display:none}}
.navlink{display:flex;align-items:center;padding:0 15px;color:#D6D6DB;font-size:15.5px;font-weight:500}
.navlink:hover{color:#fff}
.mplain{display:block;padding:20px 2px;border-bottom:1px solid var(--rule);font-family:var(--display);font-size:15px;color:#fff}

/* hero shield plate */
.coin-stage{position:relative;width:100%;max-width:540px;aspect-ratio:1;justify-self:end;display:grid;place-items:center}
.coin-stage svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.gcoin{position:relative;z-index:2;width:58%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 35% 30%,#1C1C20,#0B0B0D 55%,#000);
  box-shadow:0 0 0 2px rgba(227,6,19,.55),0 0 0 14px rgba(255,255,255,.04),0 0 0 15px rgba(255,255,255,.12),0 0 90px rgba(227,6,19,.28),0 40px 70px rgba(0,0,0,.7)}
.gcoin::before{content:"";position:absolute;inset:8%;border-radius:50%;border:1px dashed rgba(255,255,255,.18)}
.gcoin img{position:relative;z-index:2;width:56%;height:56%;object-fit:contain;filter:drop-shadow(0 10px 24px rgba(227,6,19,.35))}
.coin-stage .sat-label{z-index:4;box-shadow:0 18px 40px rgba(0,0,0,.6)}
.coin-stage .sat-label.s1{top:8%;left:-4%}.coin-stage .sat-label.s2{bottom:10%;right:-4%}

/* fact strip */
.fact-strip{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--rule);margin-top:56px}
.fact-strip div{padding:24px 22px 28px;border-right:1px solid var(--rule)}
.fact-strip div:last-child{border-right:0}
.fact-strip b{display:block;font-size:16px;font-weight:600;color:#fff}
.fact-strip span{display:block;margin-top:4px;font-size:14px;color:var(--dim);line-height:1.45}
.fact-strip i{display:block;width:10px;height:10px;border-radius:50%;background:var(--signal);margin-bottom:16px}

/* comparison */
.compare{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--rule);border-radius:14px;overflow:hidden}
.compare>div{padding:30px}
.compare>div+div{border-left:1px solid var(--rule);background:linear-gradient(160deg,rgba(227,6,19,.10),transparent 70%)}
.compare h3{font-family:var(--display);font-weight:400;font-size:18px;margin-bottom:18px}
.compare dl{margin:0}
.compare dt{font-size:13.5px;font-weight:600;color:var(--steel);margin-top:16px}
.compare dd{margin:4px 0 0;font-size:16px;color:#D0D0D5}
.compare>div+div h3{color:var(--signal)}

.mico.big{display:grid;width:48px;height:48px;flex:none;margin-bottom:20px;border-color:var(--rule-red);color:var(--signal)}
.mico.big svg{width:22px;height:22px}

@media (max-width:1050px){.coin-stage{justify-self:center;max-width:420px}.fact-strip{grid-template-columns:1fr 1fr}.fact-strip div:nth-child(2n){border-right:0}.fact-strip div:nth-child(-n+2){border-bottom:1px solid var(--rule)}}
@media (max-width:720px){.compare{grid-template-columns:1fr}.compare>div+div{border-left:0;border-top:1px solid var(--rule)}.fact-strip{margin-top:36px}.fact-strip div{padding:18px 14px}}
.fine-risk{margin-top:40px;font-size:13.5px;color:var(--dim);max-width:90ch}
.brand img{height:40px}
@media (max-width:1180px){.brand img{height:36px}}
@media (max-width:720px){.brand img{height:30px}}

/* navy undertone from the logo */
.card,.step,.tool-card,.doc,.hero-panel,.mfeature{background:var(--panel)}
.statement{background:radial-gradient(ellipse 60% 80% at 100% 50%,rgba(227,6,19,.16),transparent 70%),#000}
.sev{display:inline-block;padding:3px 10px;border-radius:4px;font-size:12.5px;font-weight:700;color:#fff;background:var(--signal)}
.sev.critical{background:#8A0010}.sev.medium{background:#E8742A}.sev.low{background:#D9B33A;color:#1A1300}.sev.info{background:#3A3A40}.sev.fixed{background:#3DDC97;color:#03281A}
.steps.five{grid-template-columns:repeat(5,1fr)}
@media (max-width:1050px){.steps.five{grid-template-columns:repeat(2,1fr)}}
@media (max-width:720px){.steps.five{grid-template-columns:1fr}}
.svc-list{border-top:1px solid var(--rule)}
.svc{display:grid;grid-template-columns:300px 1fr;gap:48px;padding:48px 0;border-bottom:1px solid var(--rule);scroll-margin-top:calc(var(--nav-h) + 20px)}
.svc aside h3{font-family:var(--display);font-weight:400;font-size:21px;line-height:1.3;margin-bottom:8px}
.svc aside p{font-size:15.5px}
.two-lists{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:22px}
.two-lists h4{font-size:14.5px;color:var(--steel);margin-bottom:8px}
.two-lists ul{margin:0;padding-left:18px}.two-lists li{margin:7px 0;color:#D0D0D5;font-size:15.5px}
.two-lists li::marker{color:var(--signal)}
.svc-group-title{font-size:15px;font-weight:600;color:var(--signal);margin:0 0 6px}
.code-box{margin:0;overflow-x:auto;padding:20px 0;border:1px solid var(--rule);border-radius:12px;background:#060607;font:13.5px/1.85 ui-monospace,SFMono-Regular,Menlo,monospace;color:#D6D6DB}
.code-box .ln{display:block;white-space:pre;padding-right:18px}
.code-box .ln i{display:inline-block;width:44px;padding-right:14px;text-align:right;font-style:normal;color:#55555C}
.code-box .ln.flag{background:rgba(227,6,19,.16);box-shadow:inset 3px 0 0 var(--signal)}
.code-box .k{color:#FF8A8A}.code-box .f{color:#FFFFFF}.code-box .s{color:#A8E6B5}.code-box .c{color:#77777F;font-style:italic}
.finding-card dl{margin:18px 0 0}.finding-card dt{font-weight:600;color:#fff;margin-top:14px;font-size:15px}.finding-card dd{margin:4px 0 0;color:var(--mute);font-size:15.5px}
.twocol>*{min-width:0}
@media (max-width:1050px){.svc{grid-template-columns:1fr;gap:18px}}
@media (max-width:720px){.two-lists{grid-template-columns:1fr}.code-box{font-size:11.5px}.code-box .ln i{width:30px;padding-right:10px}}


/* black theme */
body{background:#000}
.cta-box{background:linear-gradient(135deg,#141416,#0A0A0B)}
.g-hero{background:radial-gradient(ellipse 50% 60% at 78% 40%,rgba(227,6,19,.16),transparent 70%)}
.statement{background:radial-gradient(ellipse 60% 80% at 100% 50%,rgba(227,6,19,.16),transparent 70%),#000}
.brand img{height:42px}
@media (max-width:1180px){.brand img{height:38px}}
@media (max-width:720px){.brand img{height:30px}}