:root {
  --paper: #fff9f7;
  --muted: rgba(255, 246, 241, .66);
  --line: rgba(255,255,255,.13);
  --red: #f23842;
  --deep: #180204;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { width: 100%; min-width: 320px; min-height: 100%; margin: 0; overflow-x: hidden; background: var(--deep); }
body { color: var(--paper); font-family: "DM Sans", sans-serif; }
button, a { font: inherit; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }

.site-shell { position: relative; min-height: 200svh; overflow: clip; isolation: isolate; background: #5f050c; }
.background-video, .video-fallback { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 58% 50%; }
.video-fallback { z-index: -5; background: #68070d url("./assets/Character.jpg") center / cover no-repeat; }
.background-video { z-index: -4; }
.shade { position: fixed; inset: 0; z-index: -3; background: linear-gradient(90deg, rgba(14,0,2,.8) 0%, rgba(19,0,2,.4) 38%, rgba(22,0,2,.05) 65%, rgba(12,0,2,.28) 100%), linear-gradient(0deg, rgba(10,0,1,.58), transparent 34%, rgba(7,0,1,.22)); }
.grain { position: fixed; inset: 0; z-index: 30; pointer-events: none; opacity: .06; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); }

.view { position: relative; min-height: 100svh; padding: 0 clamp(28px, 5.8vw, 92px); }
.home-view { background: linear-gradient(0deg, rgba(18,0,2,.18), transparent 30%); }
.web3-view { border-top: 1px solid rgba(255,255,255,.08); background: linear-gradient(180deg, rgba(24,0,3,.24), rgba(18,0,2,.5)); }

.header { height: 102px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 11px; width: fit-content; font-size: 1.15rem; font-weight: 600; letter-spacing: -.025em; }
.brand-mark { width: 24px; height: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; transform: rotate(45deg); }
.brand-mark i { display: block; border-radius: 3px; background: linear-gradient(145deg, #ff4550, #ad0711); box-shadow: 0 0 13px rgba(255,45,57,.2); }
.nav { display: flex; align-items: center; gap: 4px; padding: 6px; border: 1px solid rgba(255,255,255,.055); border-radius: 999px; background: rgba(23,0,3,.28); backdrop-filter: blur(14px); }
.nav a { padding: 9px 16px; border-radius: 999px; color: rgba(255,255,255,.65); font-size: .78rem; transition: color .25s, background .25s; }
.nav a:hover, .nav a:focus-visible { color: white; background: rgba(255,255,255,.08); outline: none; }
.nav small { margin-left: 2px; font-size: .7rem; }
.header-cta { justify-self: end; padding: 12px 21px; border: 0; border-radius: 999px; color: #180204; background: #fff; font-size: .8rem; font-weight: 600; cursor: pointer; transition: transform .25s, box-shadow .25s; }
.header-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 34px rgba(0,0,0,.3); }
.menu-button, .mobile-nav { display: none; }

.hero-layout { min-height: calc(100svh - 102px); display: flex; align-items: center; position: relative; padding-bottom: 76px; }
.hero-copy { position: relative; z-index: 3; width: min(600px, 50vw); margin-top: -1vh; }
.eyebrow { margin: 0 0 28px; color: rgba(255,255,255,.76); font-size: .69rem; font-weight: 500; text-transform: uppercase; letter-spacing: .13em; line-height: 1.45; }
.eyebrow span { display: inline-block; margin-right: 12px; font-size: 1rem; vertical-align: 5px; }
h1, h2 { margin: 0; font-weight: 400; letter-spacing: -.058em; }
h1 { font-size: clamp(3.6rem, 5.45vw, 6.25rem); line-height: .98; }
h1 em, h1 i, h2 em { font-family: "Instrument Serif", serif; font-weight: 400; }
h1 em, h2 em { color: #ff4b53; }
h1 i { color: rgba(255,255,255,.96); }
.subcopy { margin: 31px 0 0; color: var(--muted); font-size: .95rem; line-height: 1.68; }
.action-row { display: flex; align-items: center; gap: 28px; margin-top: 28px; }
.primary-button { display: inline-flex; align-items: center; gap: 13px; padding: 7px 7px 7px 19px; border: 0; border-radius: 999px; background: linear-gradient(120deg, #ef313b, #ff5058); box-shadow: 0 14px 34px rgba(62,0,4,.35); cursor: pointer; font-size: .79rem; font-weight: 600; transition: transform .25s, box-shadow .25s; }
.primary-button b { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #280205; background: white; font-size: 1rem; transition: transform .25s; }
.primary-button:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(50,0,3,.48); }
.primary-button:hover b { transform: rotate(-22deg); }
.social-proof, .web3-proof { display: flex; align-items: center; gap: 12px; }
.avatars { display: flex; }
.avatars span { display: grid; place-items: center; width: 30px; height: 30px; margin-left: -8px; border: 2px solid #70070d; border-radius: 50%; color: #210103; background: linear-gradient(150deg, #fff, #a98e8f); font-size: .55rem; font-weight: 700; }
.avatars span:first-child { margin-left: 0; }
.social-proof p, .web3-proof p { margin: 0; color: rgba(255,255,255,.5); font-size: .61rem; line-height: 1.5; }
.social-proof strong, .web3-proof strong { color: rgba(255,255,255,.82); font-weight: 500; }

.metric-strip { position: absolute; z-index: 3; right: 0; bottom: 112px; display: grid; grid-template-columns: repeat(2, minmax(170px, 220px)); gap: 10px; }
.metric-strip article, .stats-grid article { position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,.11); border-radius: 18px; background: linear-gradient(145deg, rgba(89,6,12,.46), rgba(35,1,5,.24)); backdrop-filter: blur(18px); box-shadow: inset 0 1px rgba(255,255,255,.05), 0 24px 55px rgba(26,0,2,.18); }
.metric-strip article { min-height: 140px; padding: 23px; }
.metric-strip article > span { position: absolute; top: 18px; right: 19px; color: rgba(255,255,255,.24); }
.metric-strip strong { display: block; margin-top: 31px; font-size: 1.82rem; font-weight: 400; letter-spacing: -.04em; }
.metric-strip strong b { font: inherit; }
.metric-strip p { margin: 10px 0 0; color: rgba(255,255,255,.38); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; }

.partners { position: absolute; z-index: 4; left: clamp(28px, 5.8vw, 92px); right: clamp(28px, 5.8vw, 92px); bottom: 28px; display: grid; grid-template-columns: 150px 1fr; align-items: center; color: rgba(255,255,255,.42); }
.partners > span { font-size: .6rem; text-transform: uppercase; letter-spacing: .1em; }
.partners div { display: flex; justify-content: flex-end; gap: clamp(28px, 4.5vw, 74px); }
.partners b { font-size: .72rem; font-weight: 500; letter-spacing: .02em; }
.scroll-cue { position: absolute; z-index: 5; left: 50%; bottom: 24px; display: flex; align-items: center; gap: 10px; transform: translateX(-50%); color: rgba(255,255,255,.52); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; transition: color .25s; }
.scroll-cue span { display: grid; place-items: center; width: 25px; height: 25px; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; }
.scroll-cue:hover { color: white; }

.back-home { position: absolute; z-index: 5; top: 46px; left: clamp(28px, 5.8vw, 92px); padding: 8px 0; border: 0; background: transparent; color: rgba(255,255,255,.66); font-size: .78rem; cursor: pointer; transition: color .2s, transform .2s; }
.back-home:hover { color: white; transform: translateX(-3px); }
.back-home span { margin-left: 8px; }
.web3-layout { min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 92px 0 34px; }
.web3-copy { position: relative; z-index: 3; width: min(980px, 92%); text-align: center; margin-top: 2vh; }
.web3-kicker { margin: 0 0 20px; color: rgba(255,255,255,.64); font-size: .72rem; }
h2 { font-size: clamp(3.25rem, 5.5vw, 6.1rem); line-height: .96; }
.web3-copy > p:not(.web3-kicker) { margin: 25px auto 0; color: var(--muted); font-size: .9rem; line-height: 1.6; }
.web3-proof { justify-content: center; margin-top: 25px; }
.stats-grid { position: relative; z-index: 4; width: min(1000px, 100%); margin-top: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.stats-grid article { min-height: 205px; padding: 24px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; text-align: center; background: linear-gradient(145deg, rgba(116,14,20,.48), rgba(49,2,6,.3)); }
.stats-grid article > span { position: absolute; top: 22px; color: rgba(255,255,255,.25); }
.stats-grid p { margin: 0 0 8px; color: rgba(255,255,255,.42); font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; }
.stats-grid strong { font-size: clamp(2.5rem, 4vw, 4.15rem); font-weight: 400; letter-spacing: -.055em; }
.stats-grid small { margin-top: 8px; color: rgba(255,255,255,.34); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; }

@media (min-width: 1600px) {
  .header { height: 116px; }
  .hero-layout { min-height: calc(100svh - 116px); }
  .hero-copy { width: min(690px, 46vw); }
  h1 { font-size: clamp(5rem, 5.8vw, 7.2rem); }
  .metric-strip { bottom: 126px; }
}

@media (max-width: 980px) {
  .header { height: 78px; grid-template-columns: 1fr auto; }
  .nav, .header-cta { display: none; }
  .menu-button { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: rgba(20,0,3,.26); cursor: pointer; }
  .menu-button span { width: 16px; height: 1px; margin: 2px 0; background: white; transition: transform .25s; }
  .menu-button[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }
  .menu-button[aria-expanded="true"] span:last-child { transform: translateY(-2px) rotate(-45deg); }
  .mobile-nav { position: absolute; z-index: 20; top: 68px; right: 28px; width: min(270px, calc(100vw - 56px)); padding: 10px; border: 1px solid var(--line); border-radius: 16px; background: rgba(23,0,3,.9); backdrop-filter: blur(20px); }
  .mobile-nav.open { display: grid; }
  .mobile-nav a { padding: 13px; border-radius: 10px; color: rgba(255,255,255,.75); }
  .mobile-nav a:hover { background: rgba(255,255,255,.08); color: white; }
  .hero-layout { min-height: calc(100svh - 78px); padding-bottom: 180px; }
  .hero-copy { width: min(620px, 78vw); }
  .metric-strip { left: 0; right: 0; bottom: 58px; grid-template-columns: repeat(2, 1fr); }
  .partners { display: none; }
  .scroll-cue { bottom: 18px; }
  .stats-grid { margin-top: 9vh; }
}

@media (max-width: 680px) {
  .site-shell { min-height: 100svh; }
  .view { overflow: visible; padding: 0 18px; }
  .header { height: 72px; }
  .brand { font-size: 1rem; }
  .brand-mark { width: 21px; height: 21px; }
  .mobile-nav { right: 18px; }
  .background-video, .video-fallback { object-position: 61% center; }
  .shade { background: linear-gradient(90deg, rgba(13,0,2,.86), rgba(18,0,2,.38) 70%, rgba(14,0,2,.4)), linear-gradient(0deg, rgba(10,0,1,.6), transparent 50%); }
  .hero-layout { min-height: 860px; display: block; padding: 65px 0 250px; }
  .hero-copy { width: 100%; }
  .eyebrow { margin-bottom: 23px; font-size: .63rem; }
  h1 { font-size: clamp(3.25rem, 14.8vw, 5rem); }
  .subcopy { width: 88%; margin-top: 25px; font-size: .86rem; }
  .desktop-only { display: none; }
  .action-row { flex-direction: column; align-items: flex-start; gap: 18px; }
  .metric-strip { bottom: 54px; gap: 8px; }
  .metric-strip article { min-height: 126px; padding: 18px; }
  .metric-strip strong { margin-top: 27px; font-size: 1.58rem; }
  .metric-strip p { line-height: 1.35; }

  .back-home { top: 22px; left: 18px; }
  .web3-layout { min-height: 1040px; justify-content: flex-start; padding: 105px 0 24px; }
  .web3-copy { width: 100%; }
  .web3-kicker { margin-bottom: 16px; }
  h2 { font-size: clamp(3rem, 13.5vw, 4.6rem); }
  .web3-copy > p:not(.web3-kicker) { width: 95%; }
  .stats-grid { margin-top: auto; grid-template-columns: 1fr; gap: 8px; }
  .stats-grid article { min-height: 130px; align-items: flex-end; text-align: right; }
  .stats-grid article > span { left: 20px; }
  .stats-grid p, .stats-grid small { align-self: flex-start; text-align: left; }
  .stats-grid strong { position: absolute; right: 20px; bottom: 42px; font-size: 2.45rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .background-video { display: none; }
}