:root{
  --bg:#0b0c0d;
  --panel-solid:#17181b;
  --ink:#f2f1ec;
  --gold:#f2a61c;
  --gold-soft:#ffce6b;
  --slate:#9a9d9f;
  --line:#2b2d31;
}
body{background:var(--bg); color:var(--ink); font-family:'Inter',sans-serif;}
.font-display{font-family:'Rajdhani',sans-serif;}
.font-mono{font-family:'Space Mono',monospace;}
.rosettes{
  position:absolute; inset:0; pointer-events:none; opacity:0.5;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(242,166,28,0.10) 0 3px, transparent 4px),
    radial-gradient(circle at 60% 15%, rgba(242,166,28,0.08) 0 4px, transparent 5px),
    radial-gradient(circle at 80% 55%, rgba(242,166,28,0.09) 0 3px, transparent 4px),
    radial-gradient(circle at 35% 70%, rgba(242,166,28,0.07) 0 3px, transparent 4px),
    radial-gradient(circle at 10% 85%, rgba(242,166,28,0.08) 0 4px, transparent 5px),
    radial-gradient(circle at 90% 90%, rgba(242,166,28,0.06) 0 3px, transparent 4px),
    radial-gradient(circle at 50% 45%, rgba(242,166,28,0.05) 0 3px, transparent 4px);
  background-size:340px 340px;
}
.trace{display:flex; align-items:center; gap:0; width:100%;}
.trace .seg{flex:1; height:1px; background:var(--line);}
.trace .node{width:6px; height:6px; border-radius:9999px; background:var(--gold); flex-shrink:0;}
.spec-card{position:relative; border:1px solid var(--line); background:var(--panel-solid);}
.spec-card::before, .spec-card::after{content:""; position:absolute; width:14px; height:14px; border-color:var(--gold); border-style:solid; border-width:0;}
.spec-card::before{top:-1px; left:-1px; border-top-width:2px; border-left-width:2px;}
.spec-card::after{bottom:-1px; right:-1px; border-bottom-width:2px; border-right-width:2px;}
.tag{font-family:'Space Mono',monospace; font-size:0.7rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--slate);}
.nav-link{position:relative;}
.nav-link::after{content:""; position:absolute; left:0; bottom:-4px; width:0; height:2px; background:var(--gold); transition:width .2s ease;}
.nav-link:hover::after{width:100%;}
.nav-link.active::after{width:100%;}
.tier-card{border:1px solid var(--line); background:var(--panel-solid); transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;}
.tier-card:hover{transform:translateY(-3px); box-shadow:0 12px 24px -12px rgba(0,0,0,.6); border-color:#3a3d42;}
.tier-featured{border-color:var(--gold); border-width:2px;}
.peek-zone{ position:relative; overflow:visible; }
.leopard-peek{
  position:absolute; width:150px; z-index:10; pointer-events:none;
  opacity:0; transform:translateY(36px) scale(.8) rotate(var(--tilt,0deg));
  transition: opacity .55s cubic-bezier(.34,1.56,.64,1), transform .55s cubic-bezier(.34,1.56,.64,1);
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.5));
}
.leopard-peek img{ width:100%; display:block; }
.leopard-peek.is-visible{ opacity:1; transform:translateY(0) scale(1) rotate(var(--tilt,0deg)); }
.leopard-peek--r{ right:-10px; top:-40px; --tilt:6deg; }
.leopard-peek--l{ left:-10px; top:-40px; --tilt:-8deg; transform:translateY(36px) scale(.8) rotate(var(--tilt)) scaleX(-1); }
.leopard-peek--l.is-visible{ transform:translateY(0) scale(1) rotate(var(--tilt)) scaleX(-1); }
@media (max-width: 768px){ .leopard-peek{ width:96px; } }
@media (prefers-reduced-motion: reduce){ *{transition:none !important; animation:none !important;} .leopard-peek{ opacity:1; transform:none !important; } .tier-card:hover{transform:none;} }