:root {
  --bg: #0b0a0d; --bg2: #121016; --ink: #efe6d6; --mut: #a3988a; --line: rgba(239, 230, 214, .16);
  --ember: #ff7a2a; --gold: #d9a54a; --gold2: #f3d38a; --blood: #a3242c;
  --serif: 'Cinzel', 'Times New Roman', serif; --sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --gut: max(20px, env(safe-area-inset-left, 0px));
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.6 var(--sans); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--serif); font-weight: 700; line-height: 1.08; margin: 0; text-wrap: balance; letter-spacing: .01em; }
h2 { font-size: clamp(34px, 5.4vw, 76px); }
.eyebrow { display: inline-block; font: 600 12px/1 var(--sans); letter-spacing: .32em; text-transform: uppercase; color: var(--gold); margin-bottom: 22px; }
.grain { position: fixed; inset: -50%; pointer-events: none; z-index: 60; opacity: .07; 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"); animation: grain 1s steps(6) infinite; }
@keyframes grain { 0% { transform: translate(0, 0) } 33% { transform: translate(-3%, 2%) } 66% { transform: translate(2%, -3%) } 100% { transform: translate(0, 0) } }

/* botões */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 30px; border-radius: 999px; border: 1px solid rgba(255, 170, 90, .6); background: linear-gradient(180deg, #ff8a3a, #c9481a); color: #1a0d05; font: 800 15px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; cursor: pointer; box-shadow: 0 0 0 0 rgba(255, 122, 42, .5), 0 10px 40px -10px rgba(255, 110, 30, .7); transition: transform .25s, box-shadow .25s; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 0 0 6px rgba(255, 122, 42, .14), 0 16px 50px -10px rgba(255, 110, 30, .9); }
.btn--small { padding: 11px 18px; font-size: 12px; }
.btn--wide { width: 100%; padding: 18px; }

/* navegação */
.nav { position: fixed; z-index: 50; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 24px; padding: calc(14px + env(safe-area-inset-top, 0px)) var(--gut) 14px; background: linear-gradient(180deg, rgba(11, 10, 13, .85), rgba(11, 10, 13, 0)); transition: background .3s; }
.nav.is-solid { background: rgba(11, 10, 13, .88); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.nav__brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 900 18px/1 var(--serif); letter-spacing: .22em; }
.nav__brand img { mix-blend-mode: screen; width: 40px; height: auto; }
.nav__links { display: flex; gap: 26px; margin-left: auto; font-size: 14px; }
.nav__links a { text-decoration: none; color: var(--mut); transition: color .2s; }
.nav__links a:hover { color: var(--ink); }
@media (max-width: 760px) { .nav__links { display: none; } .nav .btn { margin-left: auto; } }

/* 1. abertura */
.hero { position: relative; height: 260vh; }
.hero__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 60%, #1c1416 0%, var(--bg) 70%); }
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.25); filter: saturate(.9) brightness(.55); }
.hero__stage::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, transparent 30%, rgba(11, 10, 13, .9) 85%), linear-gradient(180deg, transparent 60%, var(--bg)); pointer-events: none; }
.hero__emblem { position: absolute; width: min(46vw, 560px); aspect-ratio: 1200 / 896; mix-blend-mode: screen; opacity: 0; z-index: 2; top: 50%; left: 50%; }
.hero__ew { position: absolute; inset: 0; z-index: 2; mix-blend-mode: screen; }
.hero__emblem img { position: absolute; inset: 0; width: 100%; height: 100%; }
.em-on { opacity: 0; }
.em-flare { position: absolute; left: 50%; top: 49.7%; width: 46%; aspect-ratio: 1; transform: translate(-50%, -50%) scale(.2); border-radius: 50%; background: radial-gradient(circle, rgba(255, 220, 150, .95) 0%, rgba(255, 130, 40, .7) 22%, rgba(255, 90, 20, .25) 48%, transparent 70%); opacity: 0; mix-blend-mode: screen; pointer-events: none; }
.hero__word { position: absolute; z-index: 3; width: min(96vw, 1500px); top: 50%; left: 50%; transform: translate(-50%, -50%); overflow: visible; }
.hero__word text { font: 900 250px var(--serif); letter-spacing: 18px; fill: transparent; stroke: rgba(239, 230, 214, .78); stroke-width: 1.3; paint-order: stroke; }
.hero__tag { position: absolute; z-index: 4; top: 63%; left: 0; right: 0; margin: 0; text-align: center; font: 700 clamp(26px, 4.2vw, 62px)/1.1 var(--serif); letter-spacing: .02em; padding: 0 var(--gut); text-shadow: 0 4px 40px rgba(0, 0, 0, .8); }
.hero__tag span { display: inline-block; opacity: 0; filter: blur(14px); }
.hero__tag span:nth-child(2) { color: var(--ember); }
.hero__sub { position: absolute; z-index: 4; top: calc(63% + clamp(48px, 6vw, 86px)); left: 0; right: 0; text-align: center; margin: 0; letter-spacing: .3em; text-transform: uppercase; font-size: 13px; color: var(--gold2); opacity: 0; padding: 0 var(--gut); }
.hero__cta { position: absolute; z-index: 4; bottom: 9%; left: 0; right: 0; display: flex; justify-content: center; opacity: 0; pointer-events: none; }
.hero__cta.on { pointer-events: auto; }
.hero__scroll { position: absolute; z-index: 4; bottom: 28px; left: 50%; transform: translateX(-50%); display: grid; justify-items: center; gap: 8px; font-size: 11px; letter-spacing: .4em; text-transform: uppercase; color: var(--mut); }
.hero__scroll i { width: 1px; height: 42px; background: linear-gradient(var(--ink), transparent); animation: drip 1.8s ease-in-out infinite; transform-origin: top; }
@keyframes drip { 0% { transform: scaleY(0) } 50% { transform: scaleY(1) } 100% { transform: scaleY(1); opacity: 0 } }

/* 2. manifesto */
.manifesto { min-height: 100vh; display: grid; place-items: center; padding: 18vh var(--gut); }
.manifesto__text { max-width: 1100px; margin: 0; font: 600 clamp(26px, 3.6vw, 50px)/1.3 var(--serif); text-wrap: pretty; }
.manifesto__text .w { opacity: .14; transition: none; }
.manifesto__text em { font-style: normal; color: var(--ember); }

/* 3. pilares (rolagem lateral) */
.pillars { position: relative; }
.pillars__pin { height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; gap: 5vh; }
.pillars__head { padding: 0 var(--gut); max-width: 900px; }
.pillars__track { display: flex; gap: 28px; padding: 0 var(--gut); width: max-content; will-change: transform; }
.pillar { position: relative; width: min(78vw, 560px); flex: 0 0 auto; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--bg2); }
.pillar img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; filter: saturate(1.05); }
.pillar > div { padding: 24px 26px 30px; }
.pillar__n { font: 700 13px/1 var(--sans); letter-spacing: .2em; color: var(--ember); }
.pillar h3 { font-size: clamp(24px, 2.4vw, 34px); margin: 10px 0 10px; }
.pillar p { margin: 0; color: var(--mut); font-size: 16px; }

/* 4. reencarnação */
.rebirth { position: relative; min-height: 120vh; display: grid; align-items: center; padding: 16vh var(--gut); overflow: hidden; }
.rebirth__art { position: absolute; right: -6vw; top: 50%; width: min(70vw, 1100px); transform: translateY(-50%); opacity: .22; filter: grayscale(.3) contrast(1.1); mask-image: radial-gradient(ellipse at 60% 50%, #000 30%, transparent 72%); -webkit-mask-image: radial-gradient(ellipse at 60% 50%, #000 30%, transparent 72%); }
.rebirth__lines { position: relative; z-index: 2; max-width: 900px; display: grid; gap: 2.2vh; }
.rebirth__lines p { margin: 0; font: 600 clamp(26px, 3.8vw, 54px)/1.15 var(--serif); opacity: 0; filter: blur(10px); transform: translateY(30px); }
.rebirth__hit { color: var(--blood); font-size: clamp(40px, 6.5vw, 96px) !important; text-shadow: 0 0 40px rgba(163, 36, 44, .55); }

/* 5. caminhos */
.paths { padding: 14vh var(--gut); }
.paths__head { max-width: 900px; margin-bottom: 7vh; }
.paths__head p { color: var(--mut); max-width: 640px; margin: 22px 0 0; }
.paths__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 18px; }
.path { position: relative; margin: 0; border-radius: 16px; overflow: hidden; background: radial-gradient(ellipse at 50% 30%, #2a2028, #141117 70%); border: 1px solid var(--line); aspect-ratio: 3 / 4.4; isolation: isolate; }
.path img { position: absolute; inset: 6% 6% 22%; width: 88%; height: 72%; object-fit: contain; object-position: bottom; transition: transform .5s cubic-bezier(.2, .8, .2, 1), filter .5s; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .6)); }
.path::before { content: ""; position: absolute; inset: auto 15% 18% 15%; height: 20%; background: radial-gradient(ellipse, rgba(255, 122, 42, .35), transparent 70%); filter: blur(10px); opacity: 0; transition: opacity .4s; z-index: -1; }
.path:hover img { transform: scale(1.06) translateY(-2%); }
.path:hover::before { opacity: 1; }
.path figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 18px 18px; background: linear-gradient(transparent, rgba(11, 10, 13, .95) 38%); display: grid; gap: 3px; }
.path b { font: 700 20px/1.1 var(--serif); }
.path span { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.path i { font-style: normal; font-size: 13.5px; line-height: 1.45; color: var(--mut); max-height: 0; overflow: hidden; transition: max-height .45s ease; }
.path:hover i, .path:focus-within i { max-height: 120px; }
@media (hover: none) { .path i { max-height: 120px; } }
.path__ph { position: absolute; inset: 10% 10% 30%; display: grid; place-items: center; }
.path__ph img { position: static; width: 70%; height: auto; mix-blend-mode: screen; opacity: .35; filter: grayscale(1) blur(1px); }
.path--soon b::after { content: " · em breve"; font: 600 11px var(--sans); letter-spacing: .14em; color: var(--ember); text-transform: uppercase; }

/* 6. mundo */
.world { padding: 12vh 0; overflow: hidden; }
.world__head { padding: 0 var(--gut); margin-bottom: 7vh; }
.world__row { display: flex; gap: 18px; width: max-content; margin-bottom: 18px; will-change: transform; }
.world__row img { height: clamp(200px, 30vw, 420px); width: auto; aspect-ratio: 16 / 10.5; object-fit: cover; border-radius: 14px; border: 1px solid var(--line); }

/* 7. arte */
.art { padding: 12vh var(--gut); }
.art__head { max-width: 900px; margin-bottom: 7vh; }
.art__head p { color: var(--mut); max-width: 600px; margin: 22px 0 0; }
.art__grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: clamp(70px, 9vw, 130px); gap: 14px; }
.art__grid img { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; border: 1px solid var(--line); background: #2a2a2e; }
.a1 { grid-column: 1 / 6; grid-row: span 4; } .a2 { grid-column: 6 / 13; grid-row: span 3; } .a3 { grid-column: 6 / 9; grid-row: span 3; } .a4 { grid-column: 9 / 13; grid-row: span 3; }
.a5 { grid-column: 1 / 4; grid-row: span 3; } .a6 { grid-column: 4 / 6; grid-row: span 3; } .a7 { grid-column: 1 / 5; grid-row: span 3; } .a8 { grid-column: 5 / 8; grid-row: span 4; } .a9 { grid-column: 8 / 13; grid-row: span 3; } .a10 { grid-column: 1 / 5; grid-row: span 1; }
@media (max-width: 760px) { .art__grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 160px; } .art__grid img { grid-column: auto !important; grid-row: span 1 !important; } }

/* 8. brasil */
.brasil { position: relative; min-height: 110vh; display: grid; place-content: center; justify-items: center; text-align: center; padding: 14vh var(--gut); overflow: hidden; background: radial-gradient(ellipse at 50% 55%, rgba(0, 156, 59, .14), transparent 55%), radial-gradient(ellipse at 50% 60%, rgba(255, 223, 0, .08), transparent 45%); }
.brasil__seal { width: min(70vw, 520px); opacity: .9; border-radius: 10px; margin-bottom: 6vh; box-shadow: 0 30px 80px -20px #000; }
.brasil__kicker { margin: 0 0 18px; letter-spacing: .32em; text-transform: uppercase; font-size: 13px; color: #6fd08c; }
.brasil__big { font-size: clamp(38px, 6.6vw, 104px); line-height: 1.02; }
.brasil__by { margin: 30px 0 0; color: var(--mut); font-size: 18px; }
.brasil__by b { color: var(--ink); }

/* 9. beta */
.beta { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(30px, 6vw, 90px); align-items: center; padding: 16vh var(--gut); max-width: 1320px; margin: 0 auto; }
.beta__copy p { color: var(--mut); margin: 22px 0; max-width: 560px; }
.beta__copy ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.beta__copy li::before { content: "✦"; color: var(--ember); margin-right: 12px; }
.beta__form { display: grid; gap: 14px; padding: clamp(22px, 3vw, 36px); border-radius: 22px; border: 1px solid rgba(255, 140, 60, .3); background: linear-gradient(180deg, rgba(255, 122, 42, .08), rgba(18, 16, 22, .9)); box-shadow: 0 40px 120px -40px rgba(255, 110, 30, .45); }
.beta__form label { display: grid; gap: 6px; font-size: 13px; color: var(--mut); }
.beta__form small { color: #766c62; }
.beta__form input, .beta__form select { width: 100%; padding: 13px 14px; border-radius: 10px; border: 1px solid var(--line); background: rgba(0, 0, 0, .35); color: var(--ink); font: 400 16px var(--sans); }
.beta__form input:focus, .beta__form select:focus { outline: 2px solid var(--ember); outline-offset: 1px; }
.beta__form .check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; }
.beta__form .check input { width: auto; margin-top: 3px; accent-color: var(--ember); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; }
.beta__msg { margin: 0; min-height: 1.4em; font-size: 14px; text-align: center; }
.beta__msg.ok { color: #7fe0a0; } .beta__msg.err { color: #ff9a8a; }
@media (max-width: 860px) { .beta { grid-template-columns: 1fr; } }

.foot { display: grid; justify-items: center; gap: 10px; padding: 10vh var(--gut) calc(6vh + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); color: var(--mut); font-size: 13px; }
.foot img { mix-blend-mode: screen; }

@media (prefers-reduced-motion: reduce) {
  .grain { animation: none; }
  .hero { height: auto; } .hero__stage { position: relative; }
  .hero__tag span, .hero__sub, .hero__cta, .hero__emblem, .hero__bg, .rebirth__lines p { opacity: 1 !important; filter: none !important; transform: none !important; }
  .hero__emblem { transform: translate(-50%, -58%) !important; } .em-on { opacity: 1 !important; } .hero__bg { opacity: .5 !important; }
  .manifesto__text .w { opacity: 1 !important; }
}
.btn { white-space: nowrap; }
@media (max-width: 600px) { .paths__grid { grid-template-columns: 1fr 1fr; gap: 12px; } .path b { font-size: 16px; } .nav__brand span { font-size: 15px; letter-spacing: .16em; } .nav { gap: 12px; } }
