/* =========================================================================
   Zyren — public site styles.
   Brand colours (--gray, --blue, --orange) are injected inline by
   Renderer.brandStyle() so staff can change them from the panel. Everything
   else is derived from those three with color-mix, with static fallbacks
   declared first for older browsers.
   ========================================================================= */
:root{
  --bg:#14171a;
  --bg-2:#1b1f24;
  --panel:#20252b;
  --panel-2:#262c33;
  --line:#333b44;
  --text:#e8edf2;

  --gray:#8b96a3;
  --blue:#3f7fbf;
  --orange:#c2571f;

  --gray-2:#b9c3ce;
  --blue-lt:#63a3e0;
  --orange-lt:#e8763a;
  --blue-dim:rgba(63,127,191,.15);
  --orange-dim:rgba(194,87,31,.15);

  --radius:10px;
  --maxw:1140px;
  --font:"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
}
@supports (color: color-mix(in srgb, red 50%, white)){
  :root{
    --gray-2:color-mix(in srgb, var(--gray) 70%, white);
    --blue-lt:color-mix(in srgb, var(--blue) 72%, white);
    --orange-lt:color-mix(in srgb, var(--orange) 72%, white);
    --blue-dim:color-mix(in srgb, var(--blue) 16%, transparent);
    --orange-dim:color-mix(in srgb, var(--orange) 16%, transparent);
  }
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--font);
  line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:var(--blue-lt);text-decoration:none}
a:hover{color:var(--orange-lt)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
section{padding:78px 0;border-top:1px solid var(--line)}
section.hero{border-top:0}
.muted{color:var(--gray)}
.small{font-size:.85rem}

h1,h2,h3{line-height:1.2;letter-spacing:.5px}
h2{font-size:clamp(1.6rem,3.6vw,2.3rem);text-transform:uppercase}
h3{font-size:1.15rem;text-transform:uppercase;letter-spacing:1px}
.eyebrow{display:inline-block;font-size:.72rem;letter-spacing:3px;text-transform:uppercase;
  color:var(--orange-lt);font-weight:700;margin-bottom:10px}
.lede{color:var(--gray-2);max-width:62ch;margin-top:14px}
.lede p + p{margin-top:10px}
.section-head{margin-bottom:42px}
.section-head::after{content:"";display:block;width:64px;height:3px;margin-top:18px;
  background:linear-gradient(90deg,var(--orange),var(--blue))}

/* nav */
header.nav{position:sticky;top:0;z-index:50;background:rgba(20,23,26,.92);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;letter-spacing:3px;
  text-transform:uppercase;color:var(--text);font-size:1.05rem}
.brand .mark{width:28px;height:28px;flex:none;object-fit:contain;display:block}
.nav-links{display:flex;gap:26px;align-items:center}
.nav-links a{color:var(--gray-2);font-size:.83rem;letter-spacing:1.6px;
  text-transform:uppercase;font-weight:600}
.nav-links a:hover{color:var(--orange-lt)}
.nav-toggle{display:none;background:none;border:1px solid var(--line);color:var(--text);
  border-radius:6px;padding:7px 11px;font-size:1rem;cursor:pointer}

/* buttons */
.btn{display:inline-block;padding:13px 26px;border-radius:6px;font-weight:700;
  font-size:.82rem;letter-spacing:1.8px;text-transform:uppercase;cursor:pointer;
  border:1px solid transparent;transition:transform .15s ease,background .15s ease;
  font-family:inherit}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--orange);color:#fff}
.btn-primary:hover{background:var(--orange-lt);color:#fff}
.btn-ghost{border-color:var(--blue);color:var(--blue-lt);background:var(--blue-dim)}
.btn-ghost:hover{background:var(--blue);color:#fff}
.btn-danger{background:transparent;border-color:#7a2f2f;color:#e08585}
.btn-danger:hover{background:#7a2f2f;color:#fff}

/* hero */
.hero{position:relative;padding:120px 0 108px;
  background:radial-gradient(900px 460px at 78% 12%,var(--blue-dim),transparent 65%),
    radial-gradient(760px 420px at 12% 88%,var(--orange-dim),transparent 65%),
    linear-gradient(180deg,var(--bg-2),var(--bg))}
.hero::before{content:"";position:absolute;inset:0;opacity:.35;pointer-events:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),
    linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:58px 58px;
  mask-image:radial-gradient(circle at 50% 40%,#000 20%,transparent 78%);
  -webkit-mask-image:radial-gradient(circle at 50% 40%,#000 20%,transparent 78%)}
.hero .wrap{position:relative}
.hero h1{font-size:clamp(2.6rem,7.5vw,4.6rem);text-transform:uppercase;
  font-weight:800;letter-spacing:2px}
.hero-copy{max-width:60ch;color:var(--gray-2);font-size:1.08rem;margin-top:18px}
.hero-copy p + p{margin-top:10px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.hero-actions.center{justify-content:center}
.stats{display:flex;gap:44px;flex-wrap:wrap;margin-top:56px}
.stat b{display:block;font-size:1.9rem;color:var(--orange-lt);line-height:1}
.stat span{font-size:.72rem;letter-spacing:2.2px;text-transform:uppercase;color:var(--gray)}

/* grids and cards */
.grid{display:grid;gap:20px}
.grid.auto{grid-template-columns:repeat(auto-fit,minmax(255px,1fr))}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px;position:relative;overflow:hidden;transition:border-color .18s,transform .18s}
.card:hover{border-color:var(--blue);transform:translateY(-3px)}
.card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--orange)}
.card.blue::before{background:var(--blue)}
.card h3{margin-bottom:8px}
.card p{color:var(--gray-2);font-size:.94rem}

.pill{display:inline-block;font-size:.66rem;letter-spacing:1.4px;text-transform:uppercase;
  font-weight:700;padding:4px 10px;border-radius:99px;margin-bottom:14px;border:1px solid}
.pill.up{background:var(--blue-dim);color:var(--blue-lt);border-color:var(--blue)}
.pill.down{background:rgba(122,47,47,.18);color:#e08585;border-color:#7a2f2f}

.meta{list-style:none;margin-top:16px;border-top:1px solid var(--line);padding-top:14px}
.meta li{display:flex;justify-content:space-between;gap:12px;font-size:.85rem;padding:5px 0}
.meta li span:first-child{color:var(--gray);letter-spacing:.6px}
.meta li span:last-child{color:var(--text);font-weight:600}
.ip{margin-top:16px;background:var(--bg);border:1px dashed var(--line);border-radius:6px;
  padding:10px 12px;font-family:ui-monospace,Consolas,monospace;font-size:.84rem;
  color:var(--orange-lt);word-break:break-all;cursor:pointer}
.ip:hover{border-color:var(--orange)}
.ip.copied{color:var(--blue-lt);border-color:var(--blue)}

/* image + points */
.map-hero{border-radius:var(--radius);border:1px solid var(--line);overflow:hidden;
  background:linear-gradient(135deg,var(--panel),var(--bg-2))}
.map-hero-inner{padding:40px;display:grid;grid-template-columns:1.15fr .85fr;gap:36px;align-items:center}
.map-figure img{border-radius:8px;width:100%}
.poi{display:grid;gap:16px}
.poi-item{background:var(--panel-2);border:1px solid var(--line);border-radius:8px;
  padding:18px 20px;border-left:3px solid var(--orange)}
.poi-item.blue{border-left-color:var(--blue)}
.poi-item h4{font-size:.95rem;text-transform:uppercase;letter-spacing:1.4px;margin-bottom:6px}
.poi-item p{color:var(--gray-2);font-size:.88rem}
.placeholder-img{aspect-ratio:16/10;border-radius:8px;border:1px dashed var(--line);
  background:var(--bg-2);display:flex;align-items:center;justify-content:center;
  color:var(--gray);font-size:.8rem;letter-spacing:1.6px;text-transform:uppercase}

/* rules and steps */
.rules{counter-reset:rule}
.rule{display:flex;gap:18px;padding:18px 0;border-bottom:1px solid var(--line);align-items:flex-start}
.rule:last-child{border-bottom:0}
.rule::before{counter-increment:rule;content:"0" counter(rule);font-weight:800;
  color:var(--orange);font-size:1.05rem;flex:none;width:34px;
  font-family:ui-monospace,Consolas,monospace}
.rule h4{font-size:.98rem;margin-bottom:3px}
.rule p{color:var(--gray-2);font-size:.9rem}

.steps{counter-reset:step;display:grid;gap:18px;max-width:760px}
.step{background:var(--panel);border:1px solid var(--line);border-radius:8px;
  padding:20px 22px;display:flex;gap:18px;align-items:flex-start}
.step::before{counter-increment:step;content:counter(step);width:32px;height:32px;
  flex:none;border-radius:50%;background:var(--blue);color:#fff;font-weight:800;
  display:grid;place-items:center;font-size:.9rem}
.step h4{font-size:.95rem;margin-bottom:4px;text-transform:uppercase;letter-spacing:1.2px}
.step p{color:var(--gray-2);font-size:.9rem}

/* cta + empty */
.cta{background:linear-gradient(135deg,var(--orange-dim),var(--blue-dim)),var(--panel);
  border:1px solid var(--line);border-radius:var(--radius);padding:52px 40px;text-align:center}
.cta h2{margin-bottom:12px}
.cta p{color:var(--gray-2);max-width:56ch;margin:0 auto 10px}
.empty{text-align:center}
.empty p{color:var(--gray);margin:12px 0 24px}

/* footer */
footer{border-top:1px solid var(--line);padding:44px 0;background:var(--bg-2)}
.foot{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:center}
.foot p{color:var(--gray);font-size:.85rem}
.foot nav{display:flex;gap:20px;flex-wrap:wrap}
.foot nav a{font-size:.85rem;color:var(--gray-2)}

@media (max-width:960px){
  .map-hero-inner{grid-template-columns:1fr;padding:28px}
}
@media (max-width:660px){
  section{padding:58px 0}
  .nav-links{display:none;position:absolute;top:64px;left:0;right:0;flex-direction:column;
    gap:0;background:var(--bg-2);border-bottom:1px solid var(--line);padding:8px 0}
  .nav-links.open{display:flex}
  .nav-links a{padding:13px 22px;width:100%}
  .nav-toggle{display:block}
  .stats{gap:28px}
  .cta{padding:38px 22px}
}