:root{
    --bg:#0b0d0a; --ink:#eae6da; --muted:#8c9282; --amber:#f0a832; --amber-dim:#a8701c;
    --moss:#56703d; --glass:rgba(24,28,21,.62); --line:rgba(240,168,50,.18);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%}
  body{
    background:var(--bg);color:var(--ink);overflow-x:hidden;
    font-family:"Noto Sans Georgian",system-ui,sans-serif;
  }

  /* ---------- atmosphere ---------- */
  .scene{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
  .sky{position:absolute;inset:0;background:
      radial-gradient(ellipse 80% 50% at 50% 18%,rgba(240,168,50,.16),transparent 70%),
      radial-gradient(ellipse 120% 70% at 50% 110%,#1d2617 0%,transparent 60%),
      linear-gradient(#0b0d0a,#10140d 60%,#0b0d0a)}
  .moon{position:absolute;top:9%;left:50%;width:180px;height:180px;margin-left:-90px;border-radius:50%;
      background:radial-gradient(circle,rgba(240,168,50,.32),rgba(240,168,50,.05) 55%,transparent 70%);
      animation:pulse 6s ease-in-out infinite;filter:blur(2px)}
  .ridge{position:absolute;left:-10%;width:120%;bottom:0}
  .ridge svg{width:100%;height:100%;display:block}
  .r1{height:46vh;opacity:.55;animation:drift 60s linear infinite alternate}
  .r2{height:34vh;opacity:.8;animation:drift 40s linear infinite alternate-reverse}
  .r3{height:22vh}
  .fog{position:absolute;left:-50%;width:200%;height:40vh;
      background:radial-gradient(ellipse at center,rgba(170,180,160,.10),transparent 65%);filter:blur(20px)}
  .f1{bottom:12vh;animation:fog 28s linear infinite}
  .f2{bottom:2vh;animation:fog 42s linear infinite reverse;opacity:.8}
  canvas#dust{position:absolute;inset:0;width:100%;height:100%}
  .grain{position:absolute;inset:-50%;opacity:.07;animation:grain 1s steps(6) infinite;
      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='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
  .vignette{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 45%,rgba(0,0,0,.75) 100%)}
  .scan{position:absolute;left:0;right:0;height:120px;top:-120px;
      background:linear-gradient(transparent,rgba(240,168,50,.05),transparent);animation:scan 9s linear infinite}

  /* ---------- content ---------- */
  main{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column;align-items:center;
      justify-content:center;padding:48px 16px 40px;text-align:center}
  .wrap{width:100%;max-width:440px}

  .coords{font-family:"JetBrains Mono",monospace;font-size:.72rem;letter-spacing:.25em;color:var(--muted);
      display:flex;justify-content:center;gap:10px;align-items:center;opacity:0;animation:rise .8s .2s forwards}
  .coords i{width:6px;height:6px;border-radius:50%;background:#d8452c;box-shadow:0 0 10px #d8452c;animation:blink 1.4s infinite}

  .emblem{position:relative;width:170px;height:170px;margin:64px auto 22px;opacity:0;animation:rise .9s .35s forwards}
  .emblem .ring{position:absolute;inset:0;border-radius:50%;border:1px dashed var(--amber-dim);animation:spin 30s linear infinite}
  .emblem .ring2{position:absolute;inset:10px;border-radius:50%;border:1px solid var(--line);
      border-top-color:var(--amber);animation:spin 4s linear infinite reverse}
  .emblem .core{position:absolute;inset:20px;border-radius:50%;
      background:radial-gradient(circle at 50% 30%,#3a3322,#12150f 70%);box-shadow:0 0 50px rgba(240,168,50,.3),inset 0 0 24px rgba(0,0,0,.85)}
  .emblem .fwrap{position:absolute;inset:0;filter:drop-shadow(0 0 10px rgba(240,168,50,.35)) drop-shadow(0 6px 10px rgba(0,0,0,.6))}
  .emblem .face{position:absolute;left:0;top:-54px;width:170px;height:224px;
      background:var(--face) center bottom/224px 224px no-repeat;
      -webkit-mask:linear-gradient(#000,#000) top/100% 139px no-repeat,radial-gradient(circle 65px at 50% 139px,#000 97%,transparent 100%);
      mask:linear-gradient(#000,#000) top/100% 139px no-repeat,radial-gradient(circle 65px at 50% 139px,#000 97%,transparent 100%);
      animation:facein 1.4s .5s cubic-bezier(.2,.8,.2,1) both}
  .emblem .glint{position:absolute;inset:20px;border-radius:50%;overflow:hidden;pointer-events:none}
  .emblem .glint::after{content:"";position:absolute;left:0;right:0;height:30%;top:-30%;
      background:linear-gradient(transparent,rgba(240,168,50,.18),transparent);animation:scan 4.5s 2s linear infinite}
  @keyframes facein{from{opacity:0;transform:translateY(22px);filter:blur(6px) brightness(.3)}to{opacity:1;transform:none;filter:none}}

  h1{font-family:"Bebas Neue",sans-serif;font-weight:400;line-height:.9;letter-spacing:.06em;
      font-size:clamp(3.2rem,15vw,4.6rem);text-shadow:0 0 30px rgba(240,168,50,.35)}
  .ka{margin:14px 0 32px;font-weight:600;font-size:1.05rem;letter-spacing:.12em;color:var(--ink);opacity:0;
      animation:rise .9s 1.5s forwards;display:flex;align-items:center;justify-content:center;gap:12px}
  .ka::before,.ka::after{content:"";height:1px;width:34px;background:linear-gradient(90deg,transparent,var(--amber))}
  .ka::after{transform:scaleX(-1)}
  h1 .l{display:inline-block;opacity:0;transform:translateY(24px) scale(.9);filter:blur(8px);
      animation:letter .6s cubic-bezier(.2,.8,.2,1) forwards}
  h1 .w2{color:var(--amber);display:block;font-size:.62em;letter-spacing:.32em;margin-top:6px}
  h1.flicker{animation:flicker 7s 3s infinite}

  .tag-unused{color:var(--muted);font-size:.95rem;line-height:1.6;margin:16px auto 30px;max-width:330px;min-height:3.2em}
  .tag .cur{display:inline-block;width:2px;height:1em;background:var(--amber);vertical-align:-2px;margin-left:2px;animation:blink 1s infinite}

  .links{display:flex;flex-direction:column;gap:14px}
  a.btn{position:relative;overflow:hidden;display:flex;align-items:center;gap:14px;padding:16px 18px;
      border-radius:12px;background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
      border:1px solid var(--line);color:var(--ink);text-decoration:none;
      opacity:0;transform:translateX(-30px);animation:slide .7s cubic-bezier(.2,.8,.2,1) forwards;
      transition:border-color .25s,transform .25s,box-shadow .25s}
  a.btn::before{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
      background:linear-gradient(100deg,transparent,rgba(240,168,50,.22),transparent);transform:skewX(-20deg);
      transition:left .6s}
  a.btn::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--amber);
      transform:scaleY(0);transition:transform .3s}
  a.btn:hover,a.btn:focus-visible{border-color:rgba(240,168,50,.6);transform:translateY(-3px);outline:none;
      box-shadow:0 10px 30px -10px rgba(240,168,50,.45)}
  a.btn:hover::before,a.btn:focus-visible::before{left:140%}
  a.btn:hover::after,a.btn:focus-visible::after{transform:scaleY(1)}
  a.btn:active{transform:scale(.98)}
  .num{font-family:"JetBrains Mono",monospace;font-size:.72rem;color:var(--amber-dim);width:22px}
  .ico{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;flex-shrink:0;
      background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.06)}
  .ico svg{width:22px;height:22px;fill:var(--ink);transition:fill .25s}
  a.btn:hover .ico svg{fill:var(--amber)}
  .txt{flex:1;text-align:left}
  .txt b{display:block;font-weight:700;font-size:1.02rem;letter-spacing:.02em}
  .txt small{color:var(--muted);font-size:.78rem}
  .go{width:18px;height:18px;fill:none;stroke:var(--muted);stroke-width:2;transition:transform .25s,stroke .25s}
  a.btn:hover .go{transform:translateX(4px);stroke:var(--amber)}

  footer{margin-top:34px;font-size:.92rem;letter-spacing:.02em;
      color:var(--muted);opacity:0;animation:rise 1s 2.9s forwards}
  footer span{color:var(--amber)}


  /* ---------- initial (rider without photo yet) ---------- */
  .emblem .initial{position:absolute;inset:20px;border-radius:50%;display:grid;place-items:center;
      font-family:"Bebas Neue",sans-serif;font-size:4.2rem;color:var(--amber);letter-spacing:.04em;
      text-shadow:0 0 24px rgba(240,168,50,.5);animation:facein 1.4s .5s cubic-bezier(.2,.8,.2,1) both}

  /* ---------- round photo (riders with a regular photo) ---------- */
  .photo-emblem{margin-top:34px}
  .emblem .photo{position:absolute;inset:20px;border-radius:50%;background:var(--face) center/cover no-repeat;
      box-shadow:0 0 0 2px rgba(240,168,50,.55),0 0 40px rgba(240,168,50,.3);
      animation:facein 1.4s .5s cubic-bezier(.2,.8,.2,1) both}

  /* ---------- back link on rider pages ---------- */
  .back{position:fixed;top:16px;left:16px;z-index:2;display:inline-flex;align-items:center;gap:6px;
      font-family:"JetBrains Mono",monospace;font-size:.72rem;letter-spacing:.15em;color:var(--muted);
      text-decoration:none;padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:var(--glass);
      backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:color .2s,border-color .2s}
  .back:hover{color:var(--amber);border-color:rgba(240,168,50,.6)}
  .back + main{padding-top:76px}
  .soon{color:var(--muted);font-size:.95rem;line-height:1.6;padding:18px;border:1px dashed var(--line);border-radius:12px;
      opacity:0;animation:rise .9s 1.8s forwards}

  /* ---------- hub (mark.ge) ---------- */
  .hub-mark{font-family:"Bebas Neue",sans-serif;font-size:1.3rem;letter-spacing:.4em;color:var(--amber);
      margin:56px 0 6px;opacity:0;animation:rise .8s .3s forwards}
  a.rider{padding:14px 16px}
  .avatar{position:relative;width:56px;height:56px;border-radius:50%;flex-shrink:0;overflow:hidden;
      background:radial-gradient(circle at 50% 30%,#3a3322,#12150f 70%);border:1px solid rgba(240,168,50,.45);
      box-shadow:0 0 18px rgba(240,168,50,.18);display:grid;place-items:center}
  .avatar img{width:100%;height:100%;object-fit:cover}
  .avatar.cut img{object-fit:contain;transform:scale(1.12) translateY(4%)}
  .avatar span{font-family:"Bebas Neue",sans-serif;font-size:1.8rem;color:var(--amber);line-height:1}
  .route{font-family:"JetBrains Mono",monospace;font-size:.68rem;color:var(--amber-dim);letter-spacing:.08em}

  /* ---------- keyframes ---------- */
  @keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  @keyframes letter{to{opacity:1;transform:none;filter:blur(0)}}
  @keyframes slide{to{opacity:1;transform:none}}
  @keyframes spin{to{transform:rotate(360deg)}}
  @keyframes draw{to{stroke-dashoffset:0}}
  @keyframes blink{50%{opacity:0}}
  @keyframes pulse{50%{transform:scale(1.12);opacity:.7}}
  @keyframes drift{to{transform:translateX(-6%)}}
  @keyframes fog{from{transform:translateX(0)}to{transform:translateX(25%)}}
  @keyframes scan{to{top:110%}}
  @keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-5%,3%)}40%{transform:translate(4%,-6%)}
      60%{transform:translate(-3%,5%)}80%{transform:translate(6%,2%)}100%{transform:translate(0,0)}}
  @keyframes flicker{0%,92%,100%{opacity:1}93%{opacity:.4}94%{opacity:1}96%{opacity:.6}97%{opacity:1}}

  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition:none!important}
    canvas#dust,.scan,.grain{display:none}
  }