:root{
      --bg: #05070f;
      --text: rgba(255,255,255,.92);
      --muted: rgba(255,255,255,.72);
      --line: rgba(255,255,255,.12);
      --card: rgba(10,14,28,.45);
      --card2: rgba(10,14,28,.20);
      --glow: rgba(90,160,255,.55);
      --glow2: rgba(170,90,255,.35);
    }

    * { box-sizing: border-box; }
    html, body { height: 100%; }
    body{
      margin: 0;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
      color: var(--text);
      background: var(--bg);
      overflow-x: hidden;
    }

    /* BACKGROUND IMAGE LAYER */
    .bg{
      position: fixed;
      inset: 0;
      background:
        radial-gradient(1200px 800px at 70% 20%, rgba(90,160,255,.14), transparent 60%),
        radial-gradient(900px 600px at 25% 85%, rgba(170,90,255,.10), transparent 60%),
        linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.70)),
        url("/assets/images/neon.webp");
      background-size: cover;
      background-position: center;
      filter: saturate(1.05) contrast(1.05);
      transform: scale(1.03);
      z-index: -2;
    }

    /* OVERLAY + GRAIN (gives that "jazz ambience") */
    .overlay{
      position: fixed;
      inset: 0;
      background:
        radial-gradient(900px 600px at 40% 15%, rgba(255,255,255,.06), transparent 60%),
        linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.82));
      z-index: -1;
      pointer-events: none;
    }
    .grain{
      position: fixed;
      inset: 0;
      z-index: -1;
      pointer-events: none;
      opacity: .08;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
      mix-blend-mode: overlay;
    }

    .wrap{
      min-height: 100vh;
      display: grid;
      place-items: center;
      padding: 56px 18px;
    }

    .card{
      width: min(940px, 100%);
      border: 1px solid var(--line);
      background: linear-gradient(180deg, var(--card), var(--card2));
      backdrop-filter: blur(10px);
      border-radius: 22px;
      padding: clamp(22px, 4vw, 40px);
      box-shadow:
        0 30px 80px rgba(0,0,0,.55),
        0 0 0 1px rgba(255,255,255,.03) inset;
      position: relative;
      overflow: hidden;
    }

    /* subtle neon edge */
    .card::before{
      content:"";
      position:absolute;
      inset:-2px;
      background: radial-gradient(1200px 300px at 20% 10%, var(--glow), transparent 60%),
                  radial-gradient(800px 260px at 85% 35%, var(--glow2), transparent 60%);
      opacity: .35;
      filter: blur(18px);
      pointer-events:none;
    }

    header{
      display: grid;
      gap: 10px;
      margin-bottom: 22px;
      position: relative;
      z-index: 1;
    }

    h1{
      margin: 0;
      font-size: clamp(36px, 5vw, 56px);
      letter-spacing: -0.02em;
      line-height: 1.06;
    }
    .subtitle{
      margin: 0;
      max-width: 58ch;
      color: var(--muted);
      font-size: clamp(14px, 2.2vw, 18px);
      line-height: 1.55;
    }

    .chips{
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 8px;
    }
    .chip{
      font-size: 12px;
      color: rgba(255,255,255,.78);
      padding: 6px 10px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(10,14,28,.35);
      border-radius: 999px;
      backdrop-filter: blur(6px);
    }

    .links{
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      margin-top: 18px;
      position: relative;
      z-index: 1;
    }

    .link{
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 14px 16px;
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(10,14,28,.28);
      color: var(--text);
      text-decoration: none;
      transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
      will-change: transform;
    }

    .link:hover{
      transform: translateY(-2px);
      border-color: rgba(120,190,255,.35);
      background: rgba(10,14,28,.38);
      box-shadow:
        0 18px 45px rgba(0,0,0,.35),
        0 0 0 1px rgba(120,190,255,.10) inset;
    }

    .left{
      display:flex;
      align-items:center;
      gap:12px;
      min-width: 0;
    }

    .icon{
      width: 40px;
      height: 40px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,.14);
      display:grid;
      place-items:center;
      background:
        radial-gradient(18px 18px at 30% 30%, rgba(120,190,255,.35), transparent 65%),
        rgba(10,14,28,.35);
      box-shadow: 0 0 18px rgba(90,160,255,.15);
      flex: 0 0 auto;
    }

    .label{
      display:grid;
      gap:2px;
      min-width: 0;
    }
    .label strong{
      font-weight: 600;
      letter-spacing: -0.01em;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .label span{
      color: var(--muted);
      font-size: 13px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .arrow{
      opacity: .75;
      font-size: 18px;
      transform: translateX(0);
      transition: transform .18s ease, opacity .18s ease;
      flex: 0 0 auto;
    }
    .link:hover .arrow{
      transform: translateX(4px);
      opacity: 1;
    }

    footer{
  margin-top: 18px;
  display:flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  color: rgba(255,255,255,.55);
  font-size: 12px;
  position: relative;
  z-index: 1;
  border-top: 1px solid rgba(255,255,255,.10);
  padding-top: 14px;
}

.tiny{
  font-size: 12px;
  color: rgba(255,255,255,.55);
}

.footer-links{
  display:flex;
  align-items:center;
  gap:8px;
}

/* jedan stil za SVE linkove u footeru */
footer a{
  color: rgba(255,255,255,.72);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.18);
}

footer a:hover{
  border-bottom-color: rgba(120,190,255,.55);
}

.footer-links .dot{
  color: rgba(255,255,255,.45);
  user-select: none;
}


    /* responsive */
    @media (max-width: 720px){
      .links{ grid-template-columns: 1fr; }
    }

    /* nice entrance */
    @media (prefers-reduced-motion: no-preference){
      .card{ animation: up .65s ease both; }
      @keyframes up{
        from{ opacity:0; transform: translateY(10px); }
        to{ opacity:1; transform: translateY(0); }
      }
    }