:root{
      --bg0:#121724;
      --bg1:#1a2030;

      --text:#eef2f9;
      --muted: rgba(238,242,249,.72);

      --accent:#c12b2b;
      --accent2:#f1c86a;

      --easePremium: cubic-bezier(.2,.9,.2,1);
    }

    *{box-sizing:border-box}
    html,body{height:100%}

    body{
      margin:0;
      font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      color:var(--text);
      background:
        radial-gradient(1200px 700px at 20% 15%, rgba(193,43,43,.18), transparent 60%),
        radial-gradient(1100px 650px at 80% 20%, rgba(241,200,106,.16), transparent 60%),
        radial-gradient(1000px 700px at 50% 85%, rgba(255,255,255,.10), transparent 65%),
        linear-gradient(180deg, var(--bg0), var(--bg1));
      overflow:hidden;
    }

    main{
      min-height:100vh;
      display:flex;
      flex-direction:column;
      align-items:center;
      text-align:center;
      padding:48px 20px 32px;
    }

    .brandGroup{
      display:flex;
      flex-direction:column;
      align-items:center;
      line-height:1;
      user-select:none;
    }

    .logoStage{
      width:min(520px,92vw);
      height:min(440px,78vw);
      display:grid;
      place-items:center;
      perspective:1600px;
      position:relative;
    }

    .logoStage::before{
      content:"";
      position:absolute;
      width:min(560px,96vw);
      height:min(560px,96vw);
      border-radius:999px;
      background:
        radial-gradient(circle at 50% 50%, rgba(193,43,43,.18), transparent 55%),
        radial-gradient(circle at 55% 40%, rgba(241,200,106,.14), transparent 60%);
      filter:blur(14px);
      opacity:.9;
      pointer-events:none;
    }

    /* =========================
       3D LOGO (FIX: no mirror at rest)
       ========================= */
    .logoSpin{
      width:min(400px,72vw);
      height:min(400px,72vw);
      position:relative;
      transform-style:preserve-3d;
      animation: spinOnce 4.4s var(--easePremium) 1 forwards;
      will-change: transform;
    }

    /* IMPORTANT: only the facing side is visible */
    .logoFace,
    .logoBack{
      position:absolute;
      inset:0;
      backface-visibility:hidden;
      -webkit-backface-visibility:hidden;
      transform-style:preserve-3d;
    }

    .logoFace img,
    .logoBack img{
      width:100%;
      height:100%;
      object-fit:contain;
      display:block;
      filter:
        drop-shadow(0 28px 42px rgba(0,0,0,.45))
        drop-shadow(0 3px 0 rgba(255,255,255,.12));
    }

    .logoFace img{
      transform: translateZ(24px);
    }

    .logoBack{
      transform: rotateY(180deg);
    }
    .logoBack img{
      transform: translateZ(24px) scaleX(-1);
      opacity:.98;
    }

    @keyframes spinOnce{
      0%   { transform: rotateY(0deg) scale(.98); }
      18%  { transform: rotateY(40deg) scale(1); }
      70%  { transform: rotateY(360deg) scale(1); }
      100% { transform: rotateY(360deg) scale(1); }
    }

    .brand{
      font-family:"Black Ops One", Inter, sans-serif;
      font-size:clamp(27px,3.3vw,39px);
      letter-spacing:.14em;
      text-transform:uppercase;
      margin-top:-14px;
      color:#f5f7fc;
    }

    .tagline{
      margin-top:4px;
      font-family:Inter, system-ui, sans-serif;
      font-size:clamp(13px,1.4vw,16px);
      letter-spacing:.06em;
      color:rgba(238,242,249,.75);
      max-width:52ch;
    }

    .info{
      margin-top:auto;
      padding-top:96px;
      display:flex;
      flex-direction:column;
      gap:6px;
      font-size:12px;
      color:rgba(238,242,249,.65);
    }

    .infoLine{
      display:flex;
      align-items:center;
      justify-content:center;
      gap:8px;
    }

    .dot{
      display:none;
      width:6px;
      height:6px;
      border-radius:50%;
      background:linear-gradient(135deg,var(--accent),var(--accent2));
      box-shadow:0 0 0 4px rgba(193,43,43,.15);
    }

    a{
      color:inherit;
      text-decoration:none;
      border-bottom:1px dashed rgba(238,242,249,.25);
    }

    @media (prefers-reduced-motion: reduce){
      .logoSpin{ animation:none; transform: rotateY(0deg); }
    }

/* Lang switch (tiny) */
.langSwitch{position:fixed;top:18px;right:18px;z-index:60;display:flex;gap:8px;align-items:center}
.langBtn{border:1px solid rgba(255,255,255,.14);background:rgba(18,23,36,.55);backdrop-filter: blur(10px);
color:rgba(238,242,249,.9);font:600 12px/1 Inter,system-ui; padding:8px 10px;border-radius:999px; cursor:pointer}
.langBtn[aria-pressed="true"]{border-color:rgba(241,200,106,.55); box-shadow: 0 0 0 3px rgba(193,43,43,.15) inset}
@media (max-width:520px){.langSwitch{top:12px;right:12px}.langBtn{padding:7px 9px}}