/* ===================================================================
   IMAGENS DO JOGO — troque só os 4 caminhos abaixo.
   Se algum arquivo não existir, a página cai no gradiente de base sem
   quebrar. Detalhes e critério de escolha em docs/images.md.
   =================================================================== */
:root {
  /* hero */
  --shot-hero:     url('images/Omega-Protocol-Ultimate-Raid-Boss-in-FFXIV-1024x576.jpg');
  --shot-hero-pos: 50% 58%;   /* background-position, ajuste se cortar errado */

  /* lista de duties (seção "WHAT WE'RE RUNNING") */
  --duty-m1:    url('images/aac-heavyweight-m1.jpg');
  --duty-m2:    url('images/aac-heavyweight-m2.jpg');
  --duty-m3:    url('images/aac-heavyweight-m3.jpg');
  --duty-m4:    url('images/aac-heavyweight-m4.jpg');
  --duty-kefka: url('images/kefka.jpg');

  /* arte de fundo das seções (os Ultimates, usados como marca d'água) */
  --art-problem: url('images/final-fantasy-14-ultimate-unending-coil-of-bahamut.avif');
  --art-how:     url('images/final-fantasy-14-the-epic-of-alexander-ultimate.avif');
  --art-pricing: url('images/final-fantasy-14-dragonsong-s-reprise-ultimate.avif');
  --art-booking: url('images/final-fantasy-14-patch-7-11-futures-rewritten-ultimate-raid-ryne-and-gaia.avif');
  --art-strength: 0.18;   /* presença das marcas d'água — 0 desliga todas */
}

* { margin:0; padding:0; box-sizing:border-box; }
body { background:#0B0B10; color:#ECEBF3; font-family:'Inter',sans-serif; }

/* camada genérica de overlay */
.layer { position:absolute; inset:0; pointer-events:none; }

/* grain reaproveitável (SVG inline como data-URI, sem request extra) */
.grain { z-index:4; opacity:0.15; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); }
a { text-decoration:none; color:inherit; }
.wrap { max-width:1040px; margin:0 auto; padding:0 32px; position:relative; }

nav { display:flex; justify-content:space-between; align-items:center; padding:28px 0; border-bottom:1px solid #1E1E27; position:relative; z-index:2; }
.logo { font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:18px; letter-spacing:-0.02em; }
.logo span { color:#9B8FFF; }
.navlinks { display:flex; gap:32px; font-size:14px; color:#9695A8; }
.navlinks a:hover { color:#ECEBF3; }
.cta-small { border:1px solid #34324A; padding:8px 18px; border-radius:6px; font-size:13px; color:#ECEBF3; }

.hero { position:relative; padding:110px 0 96px; overflow:hidden; }

/* -- camada 1: screenshot em duotone -------------------------------- */
/* scaleX(-1): a imagem do Omega tem o boss à esquerda, que é justo onde o
   texto senta e onde o véu é mais escuro. Espelhando, o boss vai pro lado
   direito (embaixo do aether e dos telegraphs) e sobra chão vazio pro texto.
   Se trocar por uma imagem já composta pra direita, é só remover. */
.hero-shot { z-index:0; background-image:var(--shot-hero); background-size:cover;
             background-position:var(--shot-hero-pos); transform:scaleX(-1);
             filter:grayscale(1) brightness(0.5) contrast(1.15); }
.hero-duotone { z-index:1; background:linear-gradient(120deg,#4A2FA8 0%,#1B1040 100%);
                mix-blend-mode:color; opacity:0.8; }

/* -- camada 2: aether ----------------------------------------------- */
.hero-aether { z-index:2; filter:blur(2px); background:
    radial-gradient(circle 320px at 78% 30%, rgba(155,143,255,0.34) 0%, rgba(155,143,255,0) 66%),
    radial-gradient(circle 260px at 94% 76%, rgba(80,200,220,0.18) 0%, rgba(80,200,220,0) 68%),
    radial-gradient(circle 220px at 60% 88%, rgba(226,126,166,0.15) 0%, rgba(226,126,166,0) 70%); }
.glow { position:absolute; top:20px; right:-20px; width:560px; height:560px; z-index:2;
        background:radial-gradient(circle, rgba(139,127,255,0.16) 0%, rgba(139,127,255,0) 70%); pointer-events:none; }

/* -- camada 3: escurece a foto (fica ANTES dos telegraphs, pra eles
      continuarem nítidos por cima) ------------------------------------ */
.hero-veil { z-index:3; background:linear-gradient(90deg,#0B0B10 16%, rgba(11,11,16,0.86) 42%, rgba(11,11,16,0.5) 74%, rgba(11,11,16,0.7) 100%); }

/* -- camada 4: telegraphs ------------------------------------------- */
.arena-bg { position:absolute; top:-140px; right:-180px; width:720px; height:720px; z-index:4; opacity:0.9; pointer-events:none; }

.hero .grain { z-index:5; }
.hero-content { position:relative; z-index:6; max-width:620px; }
.eyebrow { font-family:'JetBrains Mono',monospace; font-size:12px; color:#9B8FFF; letter-spacing:0.06em; margin-bottom:18px; display:flex; align-items:center; gap:8px; }
.eyebrow::before { content:''; width:6px; height:6px; border-radius:50%; background:#9B8FFF; box-shadow:0 0 8px #9B8FFF; }
h1 { font-family:'Space Grotesk',sans-serif; font-size:58px; line-height:1.06; font-weight:700; letter-spacing:-0.02em; margin-bottom:22px; }
h1 em { color:#9B8FFF; font-style:normal; }
.sub { font-size:16.5px; color:#9695A8; line-height:1.6; max-width:480px; margin-bottom:34px; }
.actions { display:flex; gap:14px; }
.btn-primary { display:inline-block; background:#9B8FFF; color:#0E0E12; font-weight:500; padding:13px 26px; border-radius:7px; font-size:14px; border:none; box-shadow:0 0 24px rgba(155,143,255,0.25); cursor:pointer; }
.btn-primary:disabled { opacity:0.6; cursor:not-allowed; }
.btn-ghost { display:inline-block; border:1px solid #2A2836; padding:13px 26px; border-radius:7px; font-size:14px; color:#ECEBF3; }

.section { padding:60px 0; border-top:1px solid #1E1E27; position:relative; z-index:2; overflow:hidden; }

/* ---- marcas d'água: as artes dos Ultimates sangrando pelas laterais --
   Presença baixa e desfoque alto de propósito — a ideia é dar profundidade
   ao rolar a página, não competir com o texto. `--art-strength: 0` no :root
   desliga todas de uma vez. --------------------------------------------- */
.section-art { position:absolute; top:50%; transform:translateY(-50%);
               width:600px; height:130%; z-index:0; pointer-events:none;
               background-size:cover; background-position:center;
               opacity:var(--art-strength);
               filter:grayscale(1) blur(3px) brightness(0.85) contrast(1.1); }
.section-art::after { content:''; position:absolute; inset:0;
                      background:linear-gradient(120deg,#6A4FD8,#2A1A60); mix-blend-mode:color; }
.section-art.right { right:-150px;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 58%);
          mask-image:linear-gradient(90deg, transparent 0%, #000 58%); }
.section-art.left  { left:-150px;
  -webkit-mask-image:linear-gradient(270deg, transparent 0%, #000 58%);
          mask-image:linear-gradient(270deg, transparent 0%, #000 58%); }
.art-problem { background-image:var(--art-problem); }
.art-how     { background-image:var(--art-how); }
.art-pricing { background-image:var(--art-pricing); }
.art-booking { background-image:var(--art-booking); width:680px; }
/* conteúdo sempre por cima da arte */
.section > *:not(.section-art) { position:relative; z-index:1; }
.section-label { font-family:'JetBrains Mono',monospace; font-size:12px; color:#6E6C82; margin-bottom:12px; }
h2 { font-family:'Space Grotesk',sans-serif; font-size:28px; font-weight:700; margin-bottom:16px; letter-spacing:-0.01em; }
.section-sub { font-size:14.5px; color:#9695A8; max-width:520px; margin-bottom:30px; line-height:1.6; }

.phases { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:14px; }
.phase { background:#15151C; border:1px solid #232230; border-radius:10px; padding:18px; }
.phase-tag { font-family:'JetBrains Mono',monospace; font-size:11px; color:#9B8FFF; margin-bottom:10px; }
.phase-body { font-size:13.5px; color:#B4B2C4; line-height:1.5; }

/* ---- lista de duties (seção "WHAT WE'RE RUNNING") ------------------
   As artes do jogo são banners largos (~3.13:1), então a leitura natural
   é uma lista empilhada tipo Duty Finder, não uma grade de cards. Cada
   linha corta o banner numa faixa fina via background-size:cover. ---- */
.duty-list { list-style:none; display:flex; flex-direction:column; gap:10px; margin-top:22px; }
.duty { position:relative; display:flex; align-items:center; gap:16px; overflow:hidden;
        height:112px; padding:0 20px; border:1px solid #232230; border-radius:11px;
        background:linear-gradient(150deg,#1B2340,#38304C 55%,#241C28); }
.duty-img { position:absolute; inset:0; z-index:0; background-size:cover; background-position:center 42%;
            filter:grayscale(1) brightness(0.5) contrast(1.15);
            transition:filter .45s ease, transform .45s ease; }
.d-m1 .duty-img { background-image:var(--duty-m1); }
.d-m2 .duty-img { background-image:var(--duty-m2); }
.d-m3 .duty-img { background-image:var(--duty-m3); }
.d-m4 .duty-img { background-image:var(--duty-m4); }
.d-kefka .duty-img { background-image:var(--duty-kefka); background-position:center 30%; }
/* duotone + escurecimento pro texto ficar legível por cima */
.duty::before { content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
                background:linear-gradient(120deg,#4A2FA8,#1B1040); mix-blend-mode:color; opacity:0.75;
                transition:opacity .45s ease; }
.duty::after { content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
               background:linear-gradient(90deg, rgba(8,8,12,0.9) 0%, rgba(8,8,12,0.55) 45%, rgba(8,8,12,0.8) 100%); }
.duty-meta { position:relative; z-index:3; flex:1; min-width:0; }
.duty-name { font-family:'Space Grotesk',sans-serif; font-weight:500; font-size:15.5px; letter-spacing:-0.01em; }
.duty-state { position:relative; z-index:3; display:flex; flex-direction:column; align-items:flex-end;
              gap:7px; flex-shrink:0; }
.duty-bar { width:132px; height:5px; border-radius:3px; background:rgba(8,8,12,0.65);
            border:1px solid #2A2836; overflow:hidden; }
.duty-bar i { display:block; height:100%; width:100%; background:linear-gradient(90deg,#7B6BE8,#C0A8FF); }
.duty-tag { font-family:'JetBrains Mono',monospace; font-size:10.5px; color:#9B8FFF; letter-spacing:0.04em; }
/* estado parcial: laranja dos telegraphs, barra incompleta */
.duty.partial .duty-bar i { width:60%; background:linear-gradient(90deg,#C4652A,#FF8A3D); }
.duty.partial .duty-tag { color:#FF8A3D; }
.duty.partial { border-color:#3A2A24; }
/* no hover a cor real da arte volta */
.duty:hover .duty-img { filter:grayscale(0.15) brightness(0.72) contrast(1.05); transform:scale(1.04); }
.duty:hover::before { opacity:0.3; }

/* ---- pricing -------------------------------------------------------
   O laranja aqui é o mesmo dos telegraphs e do `.duty.partial`: no
   vocabulário da página, roxo é o estado normal e laranja é estado
   temporário/em alerta — que é exatamente o que a promo é. Quando a promo
   acabar, o preço volta a ser roxo junto com a remoção da faixa. ------- */
.promo-banner { display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin-bottom:16px; padding:13px 18px; border-radius:10px; border:1px solid #4A3220;
  background:linear-gradient(100deg, rgba(255,138,61,0.15), rgba(255,138,61,0.03) 64%);
  font-size:13.5px; color:#D9CCC2; }
.promo-flag { font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:0.08em;
  color:#120C07; background:#FF8A3D; padding:4px 9px; border-radius:5px; flex-shrink:0; }
.promo-banner s { color:#8A8398; }
.promo-banner strong { font-family:'Space Grotesk',sans-serif; font-weight:700; color:#FF8A3D; font-size:15px; }

.pricing-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.price-card { background:#15151C; border:1px solid #232230; border-radius:12px; padding:24px; text-align:center; }
.price-card.featured { border-color:#4A4470; background:linear-gradient(180deg,#1A1A24,#15151C); }
.price-count { font-family:'JetBrains Mono',monospace; font-size:11.5px; color:#9B8FFF;
               letter-spacing:0.05em; margin-bottom:10px; }
.price-rate { display:flex; align-items:baseline; justify-content:center; gap:7px; margin-bottom:10px; }
.price-was { font-size:15px; color:#6E6C82; }
.price-now { font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:30px;
             color:#FF8A3D; letter-spacing:-0.02em; }
.price-unit { font-family:'JetBrains Mono',monospace; font-size:11.5px; color:#9695A8; }
.price-label { font-size:13px; color:#9695A8; }
.pay-note { margin-top:18px; font-size:13px; color:#9695A8; }
.pay-note span { font-family:'JetBrains Mono',monospace; font-size:11.5px; color:#ECEBF3;
                 border:1px solid #2A2836; border-radius:5px; padding:3px 8px; margin:0 1px; }

.faq-list { display:flex; flex-direction:column; gap:2px; }
.faq-item { border-bottom:1px solid #1E1E27; padding:18px 0; }
.faq-q { font-weight:500; font-size:15px; margin-bottom:8px; }
.faq-a { font-size:13.5px; color:#9695A8; line-height:1.55; }

.booking-form { max-width:600px; display:flex; flex-direction:column; gap:16px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-field { display:flex; flex-direction:column; gap:6px; }
.form-field label { font-size:12.5px; color:#9695A8; }
.form-field input, .form-field select, .form-field textarea {
  background:#15151C; border:1px solid #262536; border-radius:8px; padding:11px 12px;
  color:#ECEBF3; font-family:'Inter',sans-serif; font-size:14px; outline:none;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color:#4A4470; }
.form-field textarea { resize:vertical; }
.form-status { font-size:13px; color:#E2726B; min-height:18px; }
/* honeypot: fora da tela, não fora do DOM. `display:none` seria mais simples,
   mas parte dos bots pula campo escondido assim — e aí a armadilha não pega
   ninguém. O `.section` tem overflow:hidden, então isso não cria scroll. */
.hp-field { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.booking-success { display:none; background:#15151C; border:1px solid #3A3654; border-radius:12px; padding:26px; max-width:600px; }
.success-title { font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:18px; color:#9B8FFF; margin-bottom:6px; }
.success-body { font-size:14px; color:#9695A8; }

.form-legal { font-size:12px; color:#6E6C82; line-height:1.5; max-width:600px; }
.form-legal a { color:#9695A8; text-decoration:underline; text-underline-offset:2px; }

/* ---- privacy.html --------------------------------------------------
   Página de texto: sem hero, sem marca d'água, sem nada competindo. A
   medida menor que o resto do site é de propósito — linha curta se lê,
   e é o único lugar do site em que alguém realmente lê parágrafo. ---- */
.legal { max-width:700px; }
.legal h3 { font-family:'Space Grotesk',sans-serif; font-size:16px; font-weight:700;
            margin:32px 0 10px; letter-spacing:-0.01em; }
.legal p, .legal li { font-size:14px; color:#B4B2C4; line-height:1.68; }
.legal p { margin-bottom:12px; }
.legal ul { margin:0 0 14px 20px; }
.legal li { margin-bottom:7px; }
.legal strong { color:#ECEBF3; font-weight:500; }
.legal a { color:#9B8FFF; text-decoration:underline; text-underline-offset:2px; }
.legal-updated { font-family:'JetBrains Mono',monospace; font-size:11.5px; color:#6E6C82;
                 margin-bottom:28px; }

footer { padding:40px 0 60px; text-align:center; color:#6E6C82; font-size:13px; border-top:1px solid #1E1E27; position:relative; z-index:2; }
footer a { text-decoration:underline; text-underline-offset:2px; }
footer a:hover { color:#9695A8; }

@media (max-width:720px) {
  h1 { font-size:38px; }
  .hero { padding:64px 0 72px; }
  .arena-bg { right:-260px; top:-100px; width:560px; height:560px; }
  .phases, .pricing-grid { grid-template-columns:1fr 1fr; }
  .form-row { grid-template-columns:1fr; }
  .navlinks { display:none; }
  /* no mobile o texto passa por cima da foto inteira, então escurece tudo */
  .hero-veil { background:linear-gradient(180deg, rgba(11,11,16,0.82) 0%, rgba(11,11,16,0.9) 100%); }
  /* lista de duties mais compacta */
  .duty { height:92px; padding:0 14px; gap:12px; }
  .duty-name { font-size:13.5px; }
  .duty-bar { width:84px; }
  .duty-tag { font-size:9.5px; }
  /* marca d'água atrapalha mais do que ajuda em tela estreita */
  .section-art { width:340px; opacity:calc(var(--art-strength) * 0.55); }
  /* a faixa da promo empilha o selo em cima do texto */
  .promo-banner { gap:10px; padding:12px 14px; font-size:12.5px; }
  .price-card { padding:18px 14px; }
  .price-now { font-size:25px; }
}

@media (prefers-reduced-motion:reduce) {
  .duty-img, .duty::before { transition:none; }
  .duty:hover .duty-img { transform:none; }
}