/* ========== Base ==========/ */
html { scroll-behavior: smooth; }
body {
  font-family: "Inter", sans-serif;
  background: #000; color: #a0aec0; overflow-x: hidden;
}

/* HERO (fix: caminho relativo ao CSS, sem / inicial) */
.hero-bg{
  background-image: url("../images/hero-bg.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* ========== Cards base (House) ========== */
:root { --card-w: 360px; --card-h: 540px; }
.card { width: var(--card-w); height: var(--card-h); perspective: 1200px; border-radius: 16px; overflow: visible; margin: 0 auto; }
.inner.frame {
  position: relative; width: 100%; height: 100%; border-radius: 16px;
  border: 1px solid rgba(255,255,255,.1); overflow: hidden; transform-style: preserve-3d;
  transition: transform .25s ease, filter .25s ease; background: none;
}
.card:hover .inner.frame { transform: rotateX(6deg) rotateY(-6deg) scale(1.01); filter: drop-shadow(0 10px 28px rgba(0,0,0,.45)); }
.frame::after{
  content:""; position:absolute; inset:2px; border-radius:14px; pointer-events:none;
  background: radial-gradient(140% 120% at 50% 0%, rgba(255,255,255,.06) 0%, rgba(255,255,255,.02) 40%, rgba(0,0,0,.30) 100%);
}

/* Parallax */
.parallax-layer{ transform-style: preserve-3d; will-change: transform; }
.parallax-bg  { transform: translateZ(-20px) scale(1.06); z-index:0; }
.parallax-base{ transform: translateZ(-10px) scale(1.03); z-index:10; }
.parallax-char{ transform: translateZ(0px); z-index:20; }

/* Header */
.header-scrolled{
  background: rgba(10,10,20,.7); backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255,255,255,.1);
}

/* Halos */
@keyframes spin-slower { to { transform: rotate(360deg); } }
.halo-ring{
  width:18rem; height:18rem; border-radius:9999px; opacity:.55; filter: blur(1px);
  background:
    radial-gradient(closest-side, rgba(255,255,255,.06), transparent 70%),
    conic-gradient(from 0deg, rgba(255,255,255,.25), rgba(255,255,255,0) 25%, rgba(255,255,255,.18) 50%, rgba(255,255,255,0) 75%, rgba(255,255,255,.25) 100%);
  animation: spin-slower 22s linear infinite;
  mask: radial-gradient(circle at 50% 50%, #000 65%, transparent 72%);
}
.halo-blue{
  background:
    radial-gradient(closest-side, rgba(255,255,255,.06), transparent 70%),
    conic-gradient(from 0deg, rgba(96,165,250,.28), rgba(96,165,250,0) 25%, rgba(96,165,250,.22) 50%, rgba(96,165,250,0) 75%, rgba(96,165,250,.28) 100%);
}
.halo-cyan{
  background:
    radial-gradient(closest-side, rgba(255,255,255,.06), transparent 70%),
    conic-gradient(from 0deg, rgba(14,165,233,.28), rgba(14,165,233,0) 25%, rgba(14,165,233,.22) 50%, rgba(14,165,233,0) 75%, rgba(14,165,233,.28) 100%);
}

/* Connectors */
.connector-line{
  position:absolute; left:0; right:0; top:50%; height:2px; transform: translateY(-50%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  box-shadow: 0 0 24px rgba(255,255,255,.12);
}
.connector-node{
  position:relative; display:grid; place-items:center; width:54px; height:54px; border-radius:9999px; color:#fff; font-weight:900;
  letter-spacing:.02em; isolation:isolate;
  background: color-mix(in srgb, var(--tint) 26%, rgba(255,255,255,.06));
  border:1px solid color-mix(in srgb, var(--tint) 40%, rgba(255,255,255,.18));
  box-shadow: 0 6px 24px rgba(0,0,0,.45), 0 0 24px color-mix(in srgb, var(--tint) 24%, transparent);
}
.connector-node::before{
  content:""; position:absolute; inset:-30%; border-radius:inherit; z-index:-1; opacity:.75;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--tint) 20%, transparent), transparent 70%);
  filter: blur(16px);
}

/* Step cards/badges */
.step-card{
  border:1px solid color-mix(in srgb, var(--tint) 28%, rgba(255,255,255,.18));
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05));
  box-shadow: 0 14px 40px rgba(0,0,0,.4), 0 0 28px color-mix(in srgb, var(--tint) 18%, transparent);
  transition: transform .2s ease, box-shadow .2s ease;
}
.step-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 50px rgba(0,0,0,.45), 0 0 36px color-mix(in srgb, var(--tint) 24%, transparent);
}
.step-badge{
  display:inline-flex; align-items:center; gap:.5rem; padding:.35rem .7rem; font-size:.7rem; font-weight:800; letter-spacing:.06em; color:#fff;
  border-radius:.6rem; backdrop-filter: blur(6px);
  background: color-mix(in srgb, var(--tint) 22%, rgba(255,255,255,.08));
  border:1px solid color-mix(in srgb, var(--tint) 36%, rgba(255,255,255,.16));
}
.step-chip{
  display:inline-flex; align-items:center; padding:.35rem .65rem; font-size:.7rem; font-weight:800; letter-spacing:.06em;
  color: color-mix(in srgb, var(--tint) 92%, white);
  background: color-mix(in srgb, var(--tint) 16%, rgba(255,255,255,.06));
  border:1px solid color-mix(in srgb, var(--tint) 30%, rgba(255,255,255,.18));
  border-radius:.6rem; backdrop-filter: blur(6px);
}
.step-media-frame{
  position:relative; display:grid; place-items:center; height:12rem; width:100%; border-radius:1rem; overflow:hidden;
  background: radial-gradient(120% 120% at 100% 0%, rgba(255,255,255,.06), transparent 60%), linear-gradient(135deg, rgba(0,0,0,.55), rgba(0,0,0,.35));
  border:1px solid rgba(255,255,255,.12); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.step-play{
  display:grid; place-items:center; width:48px; height:48px; border-radius:9999px; color:#fff;
  background: color-mix(in srgb, var(--tint) 40%, rgba(255,255,255,.08));
  border:1px solid color-mix(in srgb, var(--tint) 50%, rgba(255,255,255,.2));
  box-shadow:0 6px 18px rgba(0,0,0,.45); transition: transform .15s ease;
}
.step-play:hover{ transform: scale(1.06); }

/* Support glows */
.support-card{ position:relative; }
.corner-glow{
  position:absolute; width:140px; height:140px; border-radius:50%; pointer-events:none; filter: blur(16px); opacity:.5;
  background: radial-gradient(closest-side, rgba(96,165,250,.25), transparent 70%);
}
.corner-glow.top-0.left-0{ top:-40px; left:-40px; }
.corner-glow.bottom-0.right-0{ bottom:-40px; right:-40px; }

/* Donate card */
.donate-panel{
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05));
  border-radius:1.5rem; backdrop-filter: blur(10px); isolation:isolate;
  box-shadow: 0 18px 50px rgba(0,0,0,.45), 0 0 36px rgba(96,165,250,.15);
}
.donate-ring{
  position:absolute; inset:-20%; z-index:-1; opacity:.35; filter: blur(28px);
  background: conic-gradient(from 0deg, rgba(96,165,250,.18), transparent 20%, rgba(56,189,248,.12) 40%, transparent 60%, rgba(96,165,250,.18) 80%, transparent);
  animation: spin-slow 26s linear infinite;
}
@keyframes spin-slow { to { transform: rotate(360deg); } }

.btn-cta{
  position:relative; display:flex; align-items:center; justify-content:space-between; width:100%;
  padding:1rem 1.2rem; border-radius:9999px; font-weight:800; letter-spacing:.02em; color:#fff;
  border:1px solid rgba(255,255,255,.2); box-shadow: 0 8px 28px rgba(0,0,0,.45);
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.btn-cta .arrow{ opacity:.9; transition: transform .15s ease; }
.btn-cta:hover{ transform: translateY(-2px); }
.btn-cta:hover .arrow{ transform: translateX(4px); }

.btn-crypto{
  background: linear-gradient(90deg, rgba(56,189,248,.35), rgba(96,165,250,.25));
  border-color: rgba(56,189,248,.35);
  box-shadow: 0 8px 28px rgba(14,165,233,.25), inset 0 0 0 1px rgba(255,255,255,.06);
}
.btn-crypto:hover{ background: linear-gradient(90deg, rgba(56,189,248,.5), rgba(96,165,250,.35)); }

.btn-coffee{
  background: linear-gradient(90deg, rgba(245,158,11,.5), rgba(249,115,22,.45));
  border-color: rgba(251,191,36,.4);
  box-shadow: 0 8px 28px rgba(249,115,22,.25), inset 0 0 0 1px rgba(255,255,255,.06);
}
.btn-coffee:hover{ background: linear-gradient(90deg, rgba(245,158,11,.65), rgba(249,115,22,.6)); }

/* Glass */
.glass-card{
  background: rgba(25,30,59,.5); backdrop-filter: blur(12px);
  border:1px solid rgba(56,189,248,.2); transition: transform .3s, box-shadow .3s;
  display:flex; flex-direction: column;
}
.glass-card:hover{ transform: translateY(-8px) scale(1.02); box-shadow: 0 0 30px rgba(56,189,248,.25); }
.glass-panel{
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.18); border-radius:.9rem; backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.06);
  transition: transform .1s ease;
}

/* Reveal */
.reveal{ opacity:0; transform: translateY(40px); transition: opacity .8s ease-out, transform .8s ease-out; }
.reveal.visible{ opacity:1; transform:none; }

/* Float */
@keyframes float { 0%{transform:translateY(0)} 50%{transform:translateY(-18px)} 100%{transform:translateY(0)} }
.floating-animation{ animation: float 8s ease-in-out infinite; }

/* Oracle card variants (seções antigas que usam .oracle-card) */
.oracle-card .inner{
  position:relative; aspect-ratio: 7/9; height:auto; border-radius:1rem; overflow:hidden;
  perspective:1000px; transform-style: preserve-3d; --rx:0deg; --ry:0deg; --tx:0px; --ty:0px; transition: transform .25s ease;
}
.oracle-card .inner.card-inner{
  background: linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(56,189,248,.08) 100%),
              linear-gradient(180deg, rgba(25,30,59,.65) 0%, rgba(25,30,59,.45) 100%);
  backdrop-filter: blur(10px); z-index:1;
}
.oracle-layer{ position:absolute; inset:0; }
.oracle-bg{
  filter: contrast(1) saturate(1.05) brightness(.9);
  object-fit: cover; width:100%; height:100%; transition: transform .1s ease;
  -webkit-mask-image: radial-gradient(120% 120% at 50% 0%, #000 70%, rgba(0,0,0,0) 100%);
          mask-image: radial-gradient(120% 120% at 50% 0%, #000 70%, rgba(0,0,0,0) 100%);
}
.oracle-char{
  position:absolute; inset:auto 0 0 0; width:100%; height:100%; object-fit: contain; object-position: center bottom;
  transform-origin: bottom center; transition: transform .1s ease; pointer-events:none;
}
.glass-badge{
  display:inline-flex; align-items:center; gap:.5rem; padding:.4rem .75rem; font-size:.7rem; font-weight:700; letter-spacing:.06em; color:#fff;
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.18); border-radius:.75rem; backdrop-filter: blur(8px);
}
.oracle-title{ font-weight:900; font-size:1.25rem; color:#fff; letter-spacing:-.02em; }
.oracle-sub{ font-weight:700; font-size:.8rem; }
.oracle-card .glass-panel{
  border-color: color-mix(in srgb, var(--tint) 35%, white 65%);
  box-shadow: 0 10px 30px rgba(0,0,0,.35), 0 0 24px color-mix(in srgb, var(--tint) 18%, transparent);
}
.oracle-card .glass-badge:last-child{
  background: color-mix(in srgb, var(--tint) 16%, rgba(255,255,255,.08));
  border-color: color-mix(in srgb, var(--tint) 30%, rgba(255,255,255,.18));
  color: color-mix(in srgb, var(--tint) 90%, white);
}
.badge-status{ background: color-mix(in srgb, var(--tint) 22%, transparent)!important; color: color-mix(in srgb, var(--tint) 90%, white)!important; }
.oracle-card[data-status="coming"] .badge-status{ background: rgba(245,158,11,.24)!important; color:#fbbf24!important; }

/* ========== Roadmap layout (empilhar no mobile) ========== */
.roadmap-row{ display:flex; gap:1.25rem; flex-wrap: wrap; justify-content:center; overflow-x: visible; }
.oracle-card{ width: min(420px, 92vw); }
@media (max-width: 768px){
  :root{ --card-w: 92vw; --card-h: 560px; }
  .card{ width: var(--card-w); height: var(--card-h); margin-inline:auto; }
}

/* ========== Tabs (segmented) & Donate coin chips ========== */
/* base dos tabs p/ estado não selecionado */
.segmented-control [role="tab"]{
  padding:.5rem 1rem; border-radius:9999px; color:#cbd5e1; transition: background .2s,color .2s;
}
.segmented-control [role="tab"][aria-selected="true"]{
  background:#38BDF8; color:#0b1220; font-weight:700;
}

/* Coin buttons */
.coin-btn{
  display:inline-flex; align-items:center; gap:.5rem; padding:.5rem .9rem; border-radius:9999px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.15); color:#fff; font-weight:700;
  transition:transform .12s, box-shadow .2s, background .2s;
}
.coin-btn:hover{ transform: translateY(-1px); }
.coin-btn.selected{
  background:#0ea5e9; color:#0b1220; border-color:transparent;
  box-shadow: 0 0 24px rgba(56,189,248,.25);
}
.coin-btn svg{ display:block }

/* ========== Tutorial Carousel (fix mobile overflow + dots corretos) ========== */
#tutorial-carousel{ width:100%; max-width:72rem; margin-inline:auto; overflow:hidden; }
#tutorial-track{ display:flex; will-change: transform; }
#tutorial-track .slide{ min-width:100%; box-sizing: border-box; }
#tutorial-carousel .slide{
  min-height: clamp(320px, 60vh, 620px); display:flex; flex-direction:column; justify-content:center;
}
#tutorial-carousel img.tutorial-zoom{
  width:100%; height:auto; max-height: clamp(300px, 60vh, 520px); object-fit: contain;
}
@media (max-width: 768px){
  #tutorial-carousel .slide{ min-height: clamp(320px, 58vh, 560px); }
  #tutorial-carousel img.tutorial-zoom{ max-height: clamp(280px, 56vh, 520px); }
}

/* Dots do carrossel (injetados via JS) */
#tutorial-dots{ display:flex; gap:8px; }
.tutorial-nav-btn{
  width:10px; height:10px;
  display:inline-block; padding:0; line-height:0;
  border-radius:9999px;
  background:rgba(255,255,255,.30);
  border:1px solid rgba(255,255,255,.25);
  cursor:pointer;
}
.tutorial-nav-btn:hover{ background:rgba(255,255,255,.60); }
.tutorial-nav-btn[aria-current="true"]{ background:#fff; }
.tutorial-nav-btn:focus-visible{
  outline:2px solid #60a5fa; outline-offset:2px; border-radius:9999px;
}

/* === Carousel: frame 4/3 e moldura dos slides === */
#tutorial-carousel { outline: none; } /* o tabindex vem do JS */
#tutorial-track .slide {
  position: relative;
  border-radius: 1rem;
  border: 1px solid rgba(255,255,255,.12);
  background: radial-gradient(120% 120% at 100% 0%, rgba(255,255,255,.06), transparent 60%),
              linear-gradient(135deg, rgba(0,0,0,.55), rgba(0,0,0,.35));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  display:flex; align-items:center; justify-content:center;
  padding: .75rem;
}
#tutorial-track .slide .slide-caption {
  position:absolute; left:.75rem; right:.75rem; bottom:.65rem;
  text-align:center; font-size:.8rem; color:#cbd5e1;
  background: rgba(15,23,42,.45);
  border:1px solid rgba(255,255,255,.12);
  border-radius:.65rem; padding:.35rem .6rem;
  backdrop-filter: blur(6px);
}
#tutorial-track .slide img.tutorial-zoom {
  width: 100%; height: auto; object-fit: contain;
  aspect-ratio: 4 / 3; /* suas imagens ~4:3 */
  border-radius: .6rem;
}

/* QR mais nítido (canvas) */
#qr-canvas{ image-rendering: pixelated; }

/* ========== A11y & misc ========== */
@media (prefers-reduced-motion: reduce){
  .floating-animation{ animation: none !important; }
  #tsparticles{ display:none !important; }
  .oracle-card .inner{ transition:none !important; }
}
:focus-visible{ outline:2px solid #60a5fa; outline-offset:3px; border-radius:8px; }
.code-wrap{ white-space: pre-wrap; word-break: break-word; }

/* === Tutorial prose: melhor legibilidade === */
.md-prose {
  --md-ch: 48ch;
  max-width: var(--md-ch);
  line-height: 1.7;
}
.md-prose ol { counter-reset: step; }
.md-prose li { margin: .5rem 0 .5rem 0; }
.md-prose strong { color: #e2e8f0; }
.md-prose .pill {
  display:inline-block; padding:.15rem .5rem; border-radius:.5rem;
  background:rgba(148,163,184,.15); border:1px solid rgba(148,163,184,.25); color:#e2e8f0;
  font-weight:700; font-size:.78rem;
}

/* === Toolbar do .md (topo + rodapé) === */
.md-toolbar {
  display:flex; align-items:center; gap:.5rem; justify-content:flex-end;
  border:1px solid rgba(255,255,255,.16);
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
  border-radius:.75rem; padding:.4rem; margin-bottom:.75rem;
  backdrop-filter: blur(8px);
}
.md-toolbar .btn {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.45rem .7rem; border-radius:.6rem;
  border:1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.08);
  color:#fff; font-weight:700; font-size:.8rem;
}
.md-toolbar .btn:hover { filter: brightness(1.05); }
.md-toolbar .btn svg { width:16px; height:16px; }

/* feedback acessível */
[aria-live="polite"] .flash { margin-left:.5rem; font-size:.78rem; color:#a7f3d0; }

/* === Contato (form “glass”) === */
.contact-card {
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 1rem;
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.06);
}
.contact-card input, .contact-card textarea {
  background: rgba(15,23,42,.5);
  border:1px solid rgba(255,255,255,.15);
  color:#e2e8f0; border-radius:.6rem; padding:.7rem .9rem;
}
.contact-card input:focus, .contact-card textarea:focus {
  outline:2px solid #38bdf8; outline-offset:2px;
}