:root{
      --gold-1:#fff2b2;
      --gold-2:#ffd36a;
      --gold-3:#ffb52e;
      --gold-4:#b96a00;
      --gold-5:#6c3600;

      --ink:#140b19;
      --glow:#ffcc4d;
      --violet:#7a35ff;
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      color:#fff;
      font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      background:#0b0812;
      overflow-x:hidden;
    }

    /* BG igual a imagem */
    .hero{
      min-height:100vh;
      display:grid;
      place-items:center;
      position:relative;
      padding: clamp(24px, 5vw, 48px) clamp(14px, 4vw, 22px);
      background:
        radial-gradient(1200px 600px at 50% 35%, rgba(155,88,255,.25), transparent 60%),
        radial-gradient(900px 420px at 50% 75%, rgba(255,180,50,.18), transparent 55%),
        linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.65)),
        url("../img/bg.jpeg") center/cover no-repeat;
    }

    /* vignette + overlay pra “cinema” */
    .hero::before{
      content:"";
      position:absolute; inset:0;
      background:
        radial-gradient(closest-side at 50% 35%, rgba(0,0,0,0) 0%, rgba(0,0,0,.35) 60%, rgba(0,0,0,.65) 100%),
        linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.35));
      pointer-events:none;
    }

    /* faíscas/partículas */
    .sparks{
      position:absolute;
      pointer-events:none;
      opacity:.7;
      filter: blur(.15px);
      background-image:
        radial-gradient(circle, rgba(255,200,90,.90) 0 1px, transparent 2px),
        radial-gradient(circle, rgba(255,150,30,.70) 0 1px, transparent 2px),
        radial-gradient(circle, rgba(255,220,140,.55) 0 1px, transparent 2px);
      background-size: 220px 220px, 300px 300px, 420px 420px;
      background-position: 0 0, 60px 120px, 140px 40px;
      animation: drift 18s linear infinite;
      mix-blend-mode: screen;
    }
    @keyframes drift{
      from{transform:translate3d(0,0,0)}
      to{transform:translate3d(-140px, 120px, 0)}
    }

    .wrap{
      width:min(980px, 100%);
      position:relative;
      display:flex;
      flex-direction:column;
      align-items:center;
      gap: clamp(18px, 3vw, 28px);
      text-align:center;
      z-index:1;
      padding-bottom: clamp(20px, 4vw, 36px);
    }

    /* “Logo” central (imagem com asas/ornamentos simples em CSS) */
    .brand{
      margin-top:min(6vh, 56px);
      position:relative;
      display:inline-grid;
      place-items:center;
      padding: clamp(12px, 2.5vw, 18px) clamp(12px, 3vw, 22px) clamp(8px, 2vw, 12px);
      transform: translateY(-6px);
    }

    .brand::before{
      content:"";
      position:absolute;
      inset:-18px -26px -14px;
      background: radial-gradient(closest-side, rgba(130,60,255,.35), rgba(0,0,0,0) 70%);
      filter: blur(2px);
      z-index:-2;
      pointer-events:none;
    }

    .logo{
      display:block;
      width:min(360px, 72vw);
      height:auto;
      filter:
        drop-shadow(0 2px 0 rgba(0,0,0,.35))
        drop-shadow(0 10px 26px rgba(0,0,0,.55))
        drop-shadow(0 0 22px rgba(255,200,90,.22));
      position:relative;
    }

    .tagline{
      margin: 10px 0 0;
      font-family: Cinzel, serif;
      font-weight: 600;
      font-size: clamp(16px, 2.7vw, 26px);
      color: rgba(255,235,210,.92);
      text-shadow: 0 10px 24px rgba(0,0,0,.7);
    }

    /* Botão grande “ENTRAR NA WIKI” */
    .cta{
      margin-top: clamp(18px, 4vh, 36px);
      display:flex;
      justify-content:center;
      width:100%;
    }

    .btn-img{
      display:inline-block;
      text-decoration:none;
      position:relative;
      transition: transform .18s ease, filter .18s ease;
      transform: translateY(0);
      z-index:1;
    }

    .btn-img::after{
      content:"";
      position:absolute;
      inset:-14px -18px;
      border-radius:22px;
      background: radial-gradient(closest-side, rgba(255,210,120,.55), transparent 70%);
      filter: blur(14px);
      opacity:.9;
      transition: opacity .18s ease, transform .18s ease;
      animation: btn-glow 2.8s ease-in-out infinite;
      z-index:-1;
      pointer-events:none;
      mix-blend-mode: screen;
    }

    @keyframes btn-glow{
      0%,100%{opacity:.65; transform:scale(0.97);}
      50%{opacity:1; transform:scale(1.06);}
    }

    .btn-img:hover{
      transform: translateY(-2px) scale(1.01);
      filter: drop-shadow(0 10px 24px rgba(0,0,0,.45));
      transition: transform .14s ease, filter .14s ease;
    }

    .btn-img:hover::after{
      opacity:1;
    }

    .btn-img:active{
      transform: translateY(0) scale(.98);
      transition: transform .1s ease, filter .1s ease;
    }

    .btn-img:focus-visible{
      outline: 2px solid rgba(255,200,90,.8);
      outline-offset: 4px;
      border-radius: 14px;
    }

    .btn-img__image{
      display:block;
      width:min(560px, 92vw);
      height:auto;
    }

    .btn{
      text-decoration:none;
      display:inline-flex;
      align-items:center;
      gap: clamp(10px, 2vw, 14px);
      padding: clamp(12px, 2vw, 16px) clamp(18px, 3vw, 26px);
      border-radius: 14px;
      font-weight: 800;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: #2a1400;
      background:
        linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0) 30%),
        linear-gradient(180deg, var(--gold-1), var(--gold-2) 28%, var(--gold-3) 55%, var(--gold-4));
      border: 1px solid rgba(255,220,170,.55);
      box-shadow:
        0 18px 40px rgba(0,0,0,.65),
        0 0 22px rgba(255,200,90,.25),
        inset 0 1px 0 rgba(255,255,255,.35);
      position:relative;
      transform: translateY(0);
      transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
      width: min(560px, 92vw);
      justify-content:center;
      font-size: clamp(14px, 2.6vw, 20px);
    }

    .btn::before{
      content:"";
      position:absolute;
      inset:-10px;
      border-radius:18px;
      background: radial-gradient(closest-side, rgba(255,200,90,.35), transparent 70%);
      filter: blur(10px);
      z-index:-1;
    }

    .btn:hover{
      transform: translateY(-2px);
      box-shadow:
        0 22px 50px rgba(0,0,0,.72),
        0 0 26px rgba(255,200,90,.30),
        inset 0 1px 0 rgba(255,255,255,.45);
      filter: saturate(1.05);
    }
    .btn:active{ transform: translateY(0px) scale(.99); }

    .btn .icon{
      width: 22px;
      height: 22px;
      display:inline-grid;
      place-items:center;
      border-radius: 6px;
      background: rgba(0,0,0,.12);
      border: 1px solid rgba(0,0,0,.18);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
    }

    /* rodapé opcional */
    .foot{
      margin-top: 10px;
      font-size: 12px;
      opacity: .75;
    }

    /* Ajustes mobile */
    @media (max-width: 520px){
      .brand{padding: 10px 10px 6px}
      .btn{border-radius: 12px;}
    }