:root{
    --void:#151412;
    --steel:#1C1B19;
    --panel:#2B2825;
    --panel-2:#242220;
    --rust:#B5502D;
    --rust-bright:#D3672F;
    --hazard:#E8B923;
    --bone:#D8D2C4;
    --bone-dim:#8C8578;
    --muted:#5A554C;
    --danger:#8B2E1F;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--steel);
    color:var(--bone);
    font-family:'Inter', sans-serif;
    overflow-x:hidden;
    position:relative;
  }

  /* rust noise/grain texture overlay */
  body::before{
    content:"";
    position:fixed; inset:0;
    pointer-events:none;
    z-index:999;
    opacity:0.05;
    background-image:
      repeating-linear-gradient(0deg, transparent, transparent 2px, #000 2px, #000 3px);
    mix-blend-mode:overlay;
  }
  body::after{
    content:"";
    position:fixed; inset:0;
    pointer-events:none;
    z-index:998;
    background:
      radial-gradient(ellipse at 20% 30%, rgba(181,80,45,0.06), transparent 50%),
      radial-gradient(ellipse at 80% 80%, rgba(0,0,0,0.4), transparent 60%);
  }

  ::selection{ background:var(--rust); color:var(--void); }
  ::-webkit-scrollbar{width:10px;}
  ::-webkit-scrollbar-track{background:var(--void);}
  ::-webkit-scrollbar-thumb{background:var(--muted); border:2px solid var(--void);}

  .eyebrow{
    font-family:'JetBrains Mono', monospace;
    font-size:11px;
    letter-spacing:0.28em;
    text-transform:uppercase;
    color:var(--rust-bright);
    display:flex;
    align-items:center;
    gap:10px;
  }
  .eyebrow::before{
    content:"";
    width:16px; height:1px;
    background:var(--rust-bright);
  }

  h1,h2,h3{ font-family:'Oswald', sans-serif; text-transform:uppercase; letter-spacing:0.01em; }

  /* hazard stripe divider */
  .hazard-strip{
    height:10px;
    width:100%;
    background:repeating-linear-gradient(
      -45deg,
      var(--hazard), var(--hazard) 14px,
      #1a1712 14px, #1a1712 28px
    );
    box-shadow:0 2px 8px rgba(0,0,0,0.5);
  }

  /* ===== NAV ===== */
  header{
    position:sticky; top:0; z-index:100;
    background:rgba(21,20,18,0.92);
    backdrop-filter:blur(6px);
    border-bottom:1px solid var(--muted);
  }
  .nav-wrap{
    max-width:1200px; margin:0 auto;
    display:flex; align-items:center; justify-content:space-between;
    padding:18px 32px;
  }
  .logo{
    font-family:'Black Ops One', 'Oswald', sans-serif;
    font-weight:400;
    font-size:19px;
    letter-spacing:0.02em;
    color:var(--bone);
    display:flex; align-items:center; gap:10px;
    cursor:pointer;
    text-decoration:none;
  }
  nav ul{
    list-style:none;
    display:flex;
    gap:4px;
  }
  nav a.nav-btn{
    font-family:'JetBrains Mono', monospace;
    background:none;
    border:1px solid transparent;
    color:var(--bone-dim);
    font-size:12.5px;
    letter-spacing:0.16em;
    text-transform:uppercase;
    text-decoration:none;
    padding:10px 18px;
    cursor:pointer;
    transition:all 0.15s ease;
    position:relative;
    display:inline-block;
  }
  nav a.nav-btn::before{
    content:"//";
    color:var(--rust);
    margin-right:6px;
    opacity:0;
    transition:opacity 0.15s ease;
  }
  nav a.nav-btn:hover{ color:var(--bone); border-color:var(--muted); }
  nav a.nav-btn:hover::before{ opacity:1; }
  nav a.nav-btn.active{
    color:var(--hazard);
    border-color:var(--rust);
    background:var(--panel);
  }
  nav a.nav-btn.active::before{ opacity:1; content:"//"; color:var(--hazard); }

  .status-pill{
    font-family:'JetBrains Mono', monospace;
    font-size:11px;
    letter-spacing:0.1em;
    color:#8FC97A;
    display:flex; align-items:center; gap:7px;
    border:1px solid var(--muted);
    padding:7px 12px;
  }
  .dot{ width:7px; height:7px; border-radius:50%; background:#8FC97A; box-shadow:0 0 8px #8FC97A; animation:pulse 2s infinite; }
  @keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:0.35;} }

  main{ max-width:1200px; margin:0 auto; padding:0 32px; }

  /* ===== HERO ===== */
  .hero{
    position:relative;
    padding:100px 0 70px;
    border-bottom:1px solid var(--muted);
    overflow:hidden;
    isolation:isolate;
  }

  /* ===== DUSK TILL DAWN sky cycle (signature element) ===== */
  .hero-skyline{
    position:absolute;
    z-index:-1;
    left:0; right:0; bottom:0;
    width:100%;
    height:62%;
    display:block;
  }
  .smoke-puff{
    animation: smokeDrift 9s ease-out infinite;
    transform-box: fill-box;
    transform-origin: center;
  }
  .smoke-puff:nth-child(2){ animation-delay:3s; }
  .smoke-puff:nth-child(3){ animation-delay:6s; }
  .smoke-b{ animation-duration:11s; }
  @keyframes smokeDrift{
    0%   { transform:translate(0,0) scale(0.6); opacity:0; }
    12%  { opacity:0.3; }
    100% { transform:translate(26px,-130px) scale(1.7); opacity:0; }
  }
  .hero-skyline .lit-window{
    animation: windowFlicker 7s ease-in-out infinite;
  }
  .hero-skyline .lit-window:nth-child(3n){ animation-duration:9s; animation-delay:1.5s; }
  .hero-skyline .lit-window:nth-child(4n){ animation-duration:11s; animation-delay:3s; }
  @keyframes windowFlicker{
    0%, 100% { opacity:0.85; }
    45%      { opacity:0.85; }
    50%      { opacity:0.15; }
    55%      { opacity:0.85; }
    82%      { opacity:0.8; }
    85%      { opacity:0.3; }
  }
  .hero-sky{
    position:absolute;
    inset:0;
    z-index:-3;
    background: linear-gradient(180deg, #1a0f24 0%, #3a1f3a 38%, #8a4a3f 68%, #d8632f 100%);
    animation: skyCycle 36s ease-in-out infinite;
    mix-blend-mode:color;
    opacity:0.92;
  }
  .hero-fade{
    position:absolute;
    z-index:-1;
    left:0; right:0; bottom:0;
    height:60px;
    background:linear-gradient(180deg, transparent 0%, var(--steel) 92%);
  }
  @keyframes skyCycle{
    0%   { background: linear-gradient(180deg, #1a0f24 0%, #3a1f3a 38%, #8a4a3f 68%, #d8632f 100%); }
    14%  { background: linear-gradient(180deg, #100b18 0%, #241a2c 38%, #3a2632 68%, #4a2a26 100%); }
    30%  { background: linear-gradient(180deg, #0a0912 0%, #0d0b16 38%, #120f1a 68%, #0d0b12 100%); }
    58%  { background: linear-gradient(180deg, #0d1420 0%, #1a2636 38%, #33455a 68%, #26313f 100%); }
    78%  { background: linear-gradient(180deg, #172a3d 0%, #33506b 38%, #8a7a6b 68%, #d8ac6b 100%); }
    92%  { background: linear-gradient(180deg, #2a3b4d 0%, #4a5a68 38%, #d3672f 68%, #e8b923 100%); }
    100% { background: linear-gradient(180deg, #1a0f24 0%, #3a1f3a 38%, #8a4a3f 68%, #d8632f 100%); }
  }
  .hero-sky::after{
    content:"";
    position:absolute; inset:0;
    background:repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0,0,0,0.12) 3px, rgba(0,0,0,0.12) 4px);
    mix-blend-mode:multiply;
    opacity:0.4;
  }
  .celestial{
    position:absolute;
    z-index:5;
    width:46px; height:46px;
    border-radius:50%;
    left:78%; top:52%;
    background:#D8632F;
    box-shadow:0 0 50px 14px rgba(216,99,47,0.55);
    animation: celestialArc 36s ease-in-out infinite;
  }
  @keyframes celestialArc{
    0%   { left:78%; top:52%; background:#D8632F; box-shadow:0 0 50px 14px rgba(216,99,47,0.55); opacity:1; }
    14%  { left:88%; top:66%; background:#8a4a3f; box-shadow:0 0 24px 6px rgba(138,74,63,0.3); opacity:0.5; }
    30%  { left:50%; top:20%; background:#0d0b12; box-shadow:none; opacity:0; }
    58%  { left:20%; top:24%; background:#3a4a5a; box-shadow:0 0 10px 3px rgba(58,74,90,0.2); opacity:0.35; }
    78%  { left:14%; top:58%; background:#E8C97A; box-shadow:0 0 40px 10px rgba(232,201,122,0.5); opacity:0.9; }
    92%  { left:10%; top:38%; background:#E8B923; box-shadow:0 0 60px 16px rgba(232,185,35,0.6); opacity:1; }
    100% { left:78%; top:52%; background:#D8632F; box-shadow:0 0 50px 14px rgba(216,99,47,0.55); opacity:1; }
  }
  .cycle-readout{
    position:relative;
    z-index:1;
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-family:'JetBrains Mono', monospace;
    font-size:11px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--hazard);
    border:1px solid var(--muted);
    background:rgba(21,20,18,0.55);
    padding:6px 12px;
    margin-bottom:18px;
  }
  .cycle-readout .cdot{
    width:6px; height:6px; border-radius:50%;
    background:var(--hazard);
    animation:pulse 2s infinite;
  }
  .hero-grid{
    display:grid;
    grid-template-columns:1.15fr 0.85fr;
    gap:50px;
    align-items:center;
  }
  .hero-logo-wrap{
    display:flex;
    justify-content:center;
    align-items:center;
    position:relative;
    z-index:1;
  }
  .hero-logo-wrap img{
    width:100%;
    max-width:360px;
    height:auto;
    filter:drop-shadow(0 0 45px rgba(216,99,47,0.75)) brightness(1.05);
    transform-origin:center;
    animation: heroLogoGlow 36s ease-in-out infinite;
    -webkit-mask-image:radial-gradient(ellipse 62% 62% at center, black 45%, transparent 92%);
    mask-image:radial-gradient(ellipse 62% 62% at center, black 45%, transparent 92%);
  }
  @keyframes heroLogoGlow{
    0%   { filter:drop-shadow(0 0 45px rgba(216,99,47,0.75)) brightness(1.05); transform:scale(1); }
    14%  { filter:drop-shadow(0 0 22px rgba(138,74,63,0.35)) brightness(0.95); transform:scale(0.99); }
    30%  { filter:drop-shadow(0 0 5px rgba(10,8,10,0.1)) brightness(0.78); transform:scale(0.98); }
    58%  { filter:drop-shadow(0 0 16px rgba(58,74,90,0.25)) brightness(0.85); transform:scale(0.99); }
    78%  { filter:drop-shadow(0 0 40px rgba(210,201,122,0.65)) brightness(1.05); transform:scale(1.01); }
    92%  { filter:drop-shadow(0 0 60px rgba(232,185,35,0.9)) brightness(1.2); transform:scale(1.03); }
    100% { filter:drop-shadow(0 0 45px rgba(216,99,47,0.75)) brightness(1.05); transform:scale(1); }
  }
  @media (max-width:820px){
    .hero-grid{ grid-template-columns:1fr; }
    .hero-logo-wrap{ order:-1; margin-bottom:12px; }
    .hero-logo-wrap img{ max-width:220px; }
  }
  .hero h1{
    font-size:clamp(42px, 6vw, 74px);
    line-height:0.98;
    margin:18px 0 22px;
    color:#ffffff;
    mix-blend-mode:difference;
  }
  .hero h1 span{ color:#ffffff; }
  .hero p{
    font-size:16px;
    line-height:1.7;
    color:#ffffff;
    max-width:480px;
    margin-bottom:34px;
    mix-blend-mode:difference;
  }
  .btn-row{ display:flex; gap:14px; flex-wrap:wrap; }
  .btn{
    font-family:'JetBrains Mono', monospace;
    font-size:12.5px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    text-decoration:none;
    display:inline-block;
    padding:15px 26px;
    border:1px solid var(--rust);
    background:var(--rust);
    color:var(--void);
    font-weight:700;
    cursor:pointer;
    transition:all 0.15s ease;
    clip-path:polygon(0 0, 100% 0, 100% 100%, 8px 100%, 0 calc(100% - 8px));
  }
  .btn:hover{ background:var(--rust-bright); border-color:var(--rust-bright); }
  .btn.ghost{
    background:transparent;
    color:var(--bone);
    border-color:var(--muted);
  }
  .btn.ghost:hover{ border-color:var(--bone); }

  section{ padding:70px 0; }
  .section-head{ margin-bottom:44px; }
  .section-head h1, .section-head h2{ font-size:36px; margin:14px 0 12px; color:var(--bone); text-transform:uppercase; }
  .section-head p{ color:var(--bone-dim); max-width:560px; line-height:1.6; font-size:15px; }

  /* ===== SERVERS ===== */
  .server-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:18px; }
  .server-card{
    background:var(--panel);
    border:1px solid var(--muted);
    padding:22px;
    position:relative;
    transition:border-color 0.15s ease, transform 0.15s ease;
  }
  .server-card:hover{ border-color:var(--rust); transform:translateY(-2px); }
  .server-card .id{
    font-family:'JetBrains Mono', monospace;
    font-size:10.5px; color:var(--bone-dim); letter-spacing:0.14em;
    margin-bottom:8px;
  }
  .server-card h3{ font-size:21px; color:var(--bone); margin-bottom:10px; }
  .tags{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:16px; }
  .tag-chip{
    font-family:'JetBrains Mono', monospace;
    font-size:10px; letter-spacing:0.08em; text-transform:uppercase;
    color:var(--rust-bright);
    border:1px solid var(--rust);
    padding:3px 8px;
  }
  .server-notes{
    font-size:12.5px;
    line-height:1.55;
    color:var(--bone-dim);
    margin-bottom:14px;
  }
  .server-meta{
    display:flex; justify-content:flex-end; align-items:center;
    padding-top:14px; border-top:1px dashed var(--muted);
    font-family:'JetBrains Mono', monospace; font-size:12px;
  }
  .pop{ color:var(--bone-dim); }
  .pop b{ color:#8FC97A; }
  .connect-link{
    color:var(--hazard); text-decoration:none; letter-spacing:0.08em;
    text-transform:uppercase; font-size:11.5px; font-weight:700;
  }
  .connect-link:hover{ text-decoration:underline; }
  .server-card.wiping .id{ color:var(--danger); }
  .wipe-badge{
    position:absolute; top:-1px; right:-1px;
    background:var(--danger); color:var(--bone);
    font-family:'JetBrains Mono', monospace; font-size:9.5px;
    letter-spacing:0.1em; padding:4px 9px;
    text-transform:uppercase;
  }

  /* ===== RULES ===== */
  .rules-bg{
    position:absolute;
    top:0; left:0; right:0;
    height:240px;
    z-index:0;
    overflow:hidden;
    background:linear-gradient(180deg, rgba(21,20,18,0.2) 0%, var(--steel) 96%);
  }
  .rules-bg img{
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center top;
    display:block;
  }
  .rules-bg::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, transparent 0%, transparent 55%, var(--steel) 100%);
  }
  #rules section > *:not(.rules-bg){
    position:relative;
    z-index:1;
  }
  #rules h2, #rules h3, #rules p, #rules .eyebrow, .rules-wordmark{
    text-shadow:0 2px 8px rgba(10,9,8,0.85);
  }
  .rules-wordmark{
    font-family:'Oswald', sans-serif;
    font-weight:700;
    font-size:26px;
    letter-spacing:0.03em;
    color:var(--bone);
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:20px;
  }
  .rules-wordmark .tag{
    color:var(--void);
    background:var(--hazard);
    font-family:'JetBrains Mono', monospace;
    font-size:12px;
    font-weight:700;
    padding:3px 7px;
    letter-spacing:0.05em;
  }
  .rule-category{
    font-family:'Oswald', sans-serif;
    font-size:22px;
    text-transform:uppercase;
    letter-spacing:0.03em;
    color:var(--hazard);
    margin:28px 0 4px;
    padding-bottom:8px;
    border-bottom:2px solid var(--rust);
    display:flex;
    align-items:center;
    gap:10px;
  }
  .rule-category:first-of-type{ margin-top:0; }
  .admin-panel{
    background:var(--panel);
    border-left:3px solid var(--hazard);
    padding:22px 26px;
    margin-top:8px;
  }
  .admin-panel ul{ list-style:none; }
  .admin-panel li{
    color:var(--bone-dim);
    font-size:14.5px;
    line-height:1.65;
    padding:10px 0 10px 22px;
    position:relative;
    border-bottom:1px dashed var(--panel-2);
  }
  .admin-panel li:last-child{ border-bottom:none; }
  .admin-panel li::before{
    content:"▸";
    position:absolute; left:0;
    color:var(--rust-bright);
  }
  .rules-list{ display:flex; flex-direction:column; }
  .rule-row{
    display:grid; grid-template-columns:70px 1fr;
    gap:24px;
    padding:14px 16px;
    background:rgba(20,19,17,0.8);
    border-bottom:1px solid var(--panel-2);
  }
  .rule-row:first-child{ border-top:1px solid var(--panel-2); }
  .rule-num{
    font-family:'JetBrains Mono', monospace;
    font-size:13px; color:var(--rust-bright); letter-spacing:0.05em;
    padding-top:3px;
  }
  .rule-row h3{ font-size:17px; text-transform:none; letter-spacing:0; color:var(--bone); margin-bottom:6px; font-family:'Inter'; font-weight:600; }
  .rule-row p{ color:var(--bone-dim); font-size:14.5px; line-height:1.65; }
  .severity{
    display:inline-block; margin-top:8px;
    font-family:'JetBrains Mono', monospace; font-size:10px; letter-spacing:0.1em;
    text-transform:uppercase; padding:2px 8px;
    border:1px solid var(--muted); color:var(--bone-dim);
  }
  .severity.ban{ border-color:var(--danger); color:#E27A6A; }
  .severity.kick{ border-color:var(--hazard); color:var(--hazard); }

  /* ===== VIP ===== */
  .vip-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:18px; }
  .vip-card{
    background:var(--panel);
    border:1px solid var(--muted);
    padding:28px 24px;
    display:flex; flex-direction:column;
    position:relative;
  }
  .vip-card.featured{ border-color:var(--hazard); background:var(--panel-2); }
  .vip-card.featured::before{
    content:"MOST SCAVENGED";
    position:absolute; top:0; right:0;
    background:var(--hazard); color:var(--void);
    font-family:'JetBrains Mono', monospace; font-size:9.5px; font-weight:700;
    letter-spacing:0.08em; padding:5px 10px;
  }
  .vip-tier{ font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:0.16em; color:var(--rust-bright); text-transform:uppercase; margin-bottom:10px; }
  .vip-card h3{ font-size:26px; color:var(--bone); margin-bottom:6px; }
  .vip-price{ font-family:'JetBrains Mono', monospace; font-size:26px; color:var(--hazard); font-weight:700; margin-bottom:20px; }
  .vip-price span{ font-size:12px; color:var(--bone-dim); font-weight:400; }
  .perk-list{ list-style:none; margin-bottom:26px; flex:1; }
  .perk-list li{
    font-size:13.5px; color:var(--bone-dim);
    padding:8px 0 8px 20px;
    position:relative;
    border-bottom:1px dashed var(--panel-2);
  }
  .perk-list li::before{
    content:"▸"; position:absolute; left:0; color:var(--rust-bright);
  }
  .vip-card .btn{ width:100%; text-align:center; }

  footer{
    border-top:1px solid var(--muted);
    padding:36px 0;
    margin-top:20px;
  }
  .footer-wrap{
    display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;
  }
  footer p{ font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--bone-dim); letter-spacing:0.05em; }
  .footer-copyright{
    font-family:'JetBrains Mono', monospace;
    font-size:10.5px;
    color:var(--muted);
    letter-spacing:0.05em;
    text-align:center;
    margin-top:16px;
    padding-top:16px;
    border-top:1px dashed var(--panel-2);
  }

  @media (max-width:820px){
    .nav-wrap{ flex-direction:column; gap:14px; padding:16px 20px; }
    nav ul{ flex-wrap:wrap; justify-content:center; }
    main{ padding:0 20px; }
  }

  @media (prefers-reduced-motion: reduce){
    *{ animation:none !important; transition:none !important; }
    .smoke-puff{ opacity:0.18 !important; }
  }