*{box-sizing:border-box;margin:0;padding:0}
    :root{
      --bg:#0b0b0b;
      --panel:#121212;
      --muted:#9aa0a6;
      --text:#e9eef0;
      --accent-amber:#d99b4a;
      --accent-green:#78c38f;
      --accent-blue:#6c8ac7;
      --accent-red:#c76c6c;
      --accent-purple:#a27cc7;
      --glass: rgba(255,255,255,0.03);
      --inter: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    }

    html,body{height:100%;width:100%}
    body{
        background-color: var(--bg);
        background-image: 
        repeating-linear-gradient(
            45deg,
            rgba(255, 255, 255, 0.04), /* stronger diagonal lines */
            rgba(255, 255, 255, 0.04) 1px,
            transparent 1px,
            transparent 5px
        ),
        repeating-linear-gradient(
            -45deg,
            rgba(255, 255, 255, 0.03),
            rgba(255, 255, 255, 0.03) 1px,
            transparent 1px,
            transparent 3px
        ),
        radial-gradient(circle at center, rgba(0, 170, 255, 0.02), transparent 70%);
        
        color: #f5f5f5;
        font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
        -webkit-font-smoothing:antialiased;
        -moz-osx-font-smoothing:grayscale;
        padding:12px;

        animation: backgroundShift 60s linear infinite;
    }

    @keyframes backgroundShift {
    0% { background-position: 0 0, 0 0; }
    50% { background-position: 50px 50px, -50px -50px; }
    100% { background-position: 0 0, 0 0; }
    }

    .shell{
      display:flex;
      flex-direction:column;
      height:100%;
      max-width:1800px;
      margin:0 auto;
      background: var(--panel);
      border-radius:12px;
      padding:16px;
      border:1px solid rgba(255,255,255,0.03);
      box-shadow:0 10px 30px rgba(0,0,0,0.7);
    }

    header{display:flex;gap:16px;align-items:center;margin-bottom:18px;flex-wrap:wrap}
    .logo {
      width: 84px;
      height: 84px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 6px;
      background: rgba(255,255,255,0.02);
      border: 1px solid rgba(255,255,255,0.03);
      font-family: var(--inter);
      font-weight: 700;
      font-size: 14px;
      color: var(--accent-amber);
      letter-spacing: 1px;
      /* Add responsive scaling */
      max-width: 18vw;
      max-height: 18vw;
      min-width: 48px;
      min-height: 48px;
      aspect-ratio: 1/1;
    }
    .logo img {
      width: 90%;
      height: 90%;
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
      display: block;
    }
    .brand h1{font-size:18px;letter-spacing:0.6px}
    .brand p{color:var(--muted);font-size:12px}

    nav{margin-left:auto}
    .nav{display:flex;gap:8px;flex-wrap:wrap}
    .nav button{background:transparent;border:1px solid rgba(255,255,255,0.03);padding:10px 12px;border-radius:6px;color:var(--muted);font-family:var(--inter);cursor:pointer;transition:all 0.2s ease}
    .nav button:hover{background:rgba(255,255,255,0.05);color:var(--text)}
    .nav button.active{color:var(--text);border-color:rgba(255,255,255,0.06);box-shadow:0 0 10px rgba(0,0,0,0.6) inset}

    main{
      flex:1;
      display:flex;
      flex-direction:column;
      overflow:hidden;
    }

    .content{
      flex:1;
      padding:18px;
      border-radius:10px;
      background:rgba(255,255,255,0.01);
      border:1px solid rgba(255,255,255,0.02);
      overflow-y:auto;
    }

    h2{font-family:var(--inter);font-size:16px;margin-bottom:8px}
    p.lead{color:var(--muted);font-size:13px;margin-bottom:12px}

    /* Button links */
    .btn-link{
      display:inline-block;
      padding:10px 16px;
      margin:6px 8px 6px 0;
      border-radius:6px;
      background:rgba(255,255,255,0.04);
      border:1px solid rgba(255,255,255,0.08);
      font-size:13px;
      font-family:var(--inter);
      text-decoration:none;
      transition:background 0.2s;
    }
    .btn-link:hover{background:rgba(255,255,255,0.08)}
    .btn-discord{background:linear-gradient(135deg,#d896f6,#a970ff);color:#fff}
    .btn-roblox{background:linear-gradient(135deg,#ff6b6b,#c0392b);color:#fff}

    /* Tags */
    .tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:6px}
    .tag{padding:4px 8px;border-radius:6px;font-size:11px;font-family:var(--inter)}
    .tag.civil{background:rgba(120,195,143,0.08);color:var(--accent-green)}
    .tag.combative{background:rgba(199,108,108,0.08);color:var(--accent-red)}
    .tag.misc{background:rgba(162,124,199,0.08);color:var(--accent-purple)}
    .tag.enforcement{background:rgba(108,138,199,0.08);color:var(--accent-blue)}
    .tag.lore{background:rgba(255,255,255,0.05);color:var(--accent-purple)}
    .tag.announcement{background:rgba(255,255,255,0.05);color:var(--accent-amber)}
    .tag.alpha{background:rgba(255,255,255,0.05);color:var(--accent-green)}

    .dept{padding:16px;background:rgba(255,255,255,0.01);border:1px solid rgba(255,255,255,0.03);border-radius:10px;margin-bottom:16px}
    .dept-header{display:flex;align-items:center;gap:12px;margin-bottom:8px}
    .dept-header img{width:40px;height:40px;object-fit:contain}
    .dept h3{font-family:var(--inter);font-size:14px}
    .dept p{font-size:13px;color:var(--muted)}
    .links{margin-top:8px;font-size:12px}
    .links a{color:var(--accent-amber);margin-right:10px}

    .division{margin-left:32px;padding:12px;background:rgba(255,255,255,0.02);border-radius:8px;margin-top:10px}
    .division-header{display:flex;align-items:center;gap:8px;margin-bottom:4px}
    .division-header img{width:30px;height:30px;object-fit:contain}

    /* News */
    .new-item {
      padding:16px;
      background:rgba(255,255,255,0.01);
      border:1px solid rgba(255,255,255,0.03);
      border-radius:10px;
      margin-bottom:32px; /* more spacing between cards */
      position: relative;
      box-shadow: 0 2px 12px 0 rgba(0,0,0,0.18);
      transition: transform 0.15s, box-shadow 0.15s;
      border-left: 4px solid var(--accent-amber);
      background: linear-gradient(120deg, rgba(255,255,255,0.01) 80%, rgba(216,150,246,0.04) 100%);
    }
    .new-item:hover {
      transform: translateY(-2px) scale(1.012);
      box-shadow: 0 6px 24px 0 rgba(0,0,0,0.22);
      border-left-color: var(--accent-blue);
    }
    .new-item .section-icon {
      width: 38px;
      height: 38px;
      object-fit: contain;
      display: inline-block;
      vertical-align: middle;
      margin-right: 12px;
      margin-bottom: 6px;
      filter: drop-shadow(0 2px 6px rgba(0,0,0,0.18));
    }
    .new-item .highlight {
      color: var(--accent-amber);
      font-weight: bold;
      letter-spacing: 0.2px;
      font-family: var(--inter);
    }
    .new-item .section-divider {
      border: none;
      border-top: 1px solid rgba(255,255,255,0.07);
      margin: 18px 0 10px 0;
    }
    .new-header{display:flex;align-items:center;gap:8px;margin-bottom:6px}
    .new-header h3{font-size:14px;font-family:var(--inter)}

    /* Terminal page */
    .terminal-page .term-output{height:800px;overflow:auto;padding:12px;background:#020202;border:1px solid rgba(255,255,255,0.05);border-radius:6px;margin-bottom:8px;font-family:var(--inter);font-size:13px;white-space:pre-wrap}
    .terminal-page .term-line{margin-bottom:4px}
    .terminal-page .term-input{display:flex;gap:8px}
    .terminal-page .term-input input{flex:1;background:transparent;border:1px solid rgba(255,255,255,0.05);padding:8px;border-radius:6px;color:var(--text);font-family:var(--inter)}
    .terminal-page .term-input button{padding:8px 12px;border-radius:6px;border:1px solid rgba(255,255,255,0.05);background:transparent;color:var(--text)}

    footer{margin-top:18px;color:var(--muted);font-size:12px;display:flex;justify-content:space-between;flex-wrap:wrap}

    /* Scrollbar styles */
    .dept-scroll {
      max-height: 70vh;
      overflow-y: auto;
      padding-right: 8px;
      scrollbar-width: thin;
      scrollbar-color: var(--accent-amber) var(--panel);
    }
    .dept-scroll::-webkit-scrollbar {
      width: 8px;
    }
    .dept-scroll::-webkit-scrollbar-thumb {
      background: var(--accent-amber);
      border-radius: 6px;
    }
    .dept-scroll::-webkit-scrollbar-track {
      background: var(--panel);
    }

    /* Responsive scaling */
    @media(max-width:768px){
      .dept-scroll{
        max-height: none;
        overflow-y: visible;
        padding-right: 0;
      }
      .brand h1{font-size:15px}
      .logo {
        width: 48px;
        height: 48px;
        max-width: 20vw;
        max-height: 20vw;
        font-size: 12px;
        font-family: var(--inter);
      }
      .logo img {
        width: 90%;
        height: 90%;
      }
      .dept,.news-item{padding:12px}
      .new-item {
        margin-bottom: 20px;
        border-left-width: 3px;
      }
      .new-item .section-icon {
        width: 28px;
        height: 28px;
        margin-right: 8px;
      }
    }
    @media(min-width:2000px){
      body{font-size:18px}
      .logo{width:100px;height:100px;font-size:18px}
      .dept,.news-item{padding:24px}
    }

    /* Hero Banner */
    .hero-banner {
      position: relative;
      background: linear-gradient(120deg, rgba(108,138,199,0.18) 0%, rgba(216,155,74,0.12) 100%), url('images/hero-bg.jpg') center/cover no-repeat;
      border-radius: 14px;
      padding: 48px 28px 38px 28px;
      margin-bottom: 32px;
      text-align: center;
      overflow: hidden;
      box-shadow: 0 6px 32px 0 rgba(0,0,0,0.22);
      min-height: 220px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    .hero-banner .hero-logo {
      width: 90px;
      height: 90px;
      margin-bottom: 12px;
      filter: drop-shadow(0 4px 16px rgba(0,0,0,0.18));
    }
    .hero-banner h1 {
      font-size: 2.2rem;
      color: var(--accent-amber);
      margin-bottom: 8px;
      letter-spacing: 1.2px;
      font-family: var(--inter);
    }
    .hero-banner p {
      color: var(--muted);
      font-size: 1.1rem;
      margin-bottom: 18px;
    }
    .hero-banner .hero-cta {
      margin-top: 10px;
      padding: 12px 28px;
      font-size: 1rem;
      border-radius: 8px;
      background: linear-gradient(90deg, var(--accent-blue), var(--accent-amber));
      color: #fff;
      border: none;
      font-family: var(--inter);
      font-weight: bold;
      cursor: pointer;
      box-shadow: 0 2px 12px 0 rgba(0,0,0,0.18);
      transition: background 0.2s, transform 0.15s;
    }
    .hero-banner .hero-cta:hover {
      background: linear-gradient(90deg, var(--accent-amber), var(--accent-blue));
      transform: scale(1.04);
    }

    /* Card entrance animation */
    @keyframes fadeInUp {
      from { opacity: 0; transform: translateY(32px);}
      to { opacity: 1; transform: translateY(0);}
    }
    .new-item {
      animation: fadeInUp 0.7s cubic-bezier(.23,1.02,.32,1) both;
      /* Add accent bar */
      border-left: 6px solid var(--accent-blue);
      background: linear-gradient(120deg, rgba(255,255,255,0.01) 80%, rgba(216,150,246,0.04) 100%);
      margin-bottom: 36px;
      position: relative;
      overflow: hidden;
    }
    .new-item:nth-child(2) { animation-delay: 0.08s; border-left-color: var(--accent-green);}
    .new-item:nth-child(3) { animation-delay: 0.16s; border-left-color: var(--accent-amber);}
    .new-item:nth-child(4) { animation-delay: 0.24s; border-left-color: var(--accent-purple);}

    /* Card hover effect */
    .new-item:hover {
      transform: translateY(-4px) scale(1.018);
      box-shadow: 0 8px 32px 0 rgba(0,0,0,0.26);
      border-left-width: 8px;
    }

    /* Decorative SVG background shape for cards */
    .new-item::before {
      content: "";
      position: absolute;
      top: -30px; right: -60px;
      width: 120px; height: 120px;
      background: radial-gradient(circle, var(--accent-blue) 0%, transparent 70%);
      opacity: 0.08;
      z-index: 0;
      pointer-events: none;
    }
    .new-item:nth-child(2)::before { background: radial-gradient(circle, var(--accent-green) 0%, transparent 70%);}
    .new-item:nth-child(3)::before { background: radial-gradient(circle, var(--accent-amber) 0%, transparent 70%);}
    .new-item:nth-child(4)::before { background: radial-gradient(circle, var(--accent-purple) 0%, transparent 70%);}

    .new-item > * { position: relative; z-index: 1; }