:root{
  --bg: #000000;
  --fg: #f5f5f5;
  --muted: #b9b9b9;
  --panel: rgba(0,0,0,0.45);
}

@font-face{
  font-family:'CloisterBlack';
  src:url('https://thecryptcrew.com/CloisterBlack.ttf');
  font-weight:normal;
  font-style:normal;
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:'Cinzel',serif;
  overflow-x:hidden;
  min-height:100vh;
}

h1,h2,h3,h4{
  font-family:'Cinzel',serif;
  letter-spacing:.05em;
  margin:0;
}

.fraktur-title{
  font-family:'CloisterBlack', serif !important;
  text-transform:none;
  letter-spacing:0;
}

a{
  color:inherit;
  text-decoration:none;
}

.video-bg{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:-3;
  opacity:.22;
  filter:grayscale(100%) contrast(110%);
  transform:scale(1.1);
  animation:bgDrift 30s ease-in-out infinite alternate;
}

@keyframes bgDrift{
  from{ transform:scale(1.1) translateY(-10px); }
  to{ transform:scale(1.1) translateY(10px); }
}

.overlay{
  position:fixed;
  inset:0;
  z-index:-2;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.65), rgba(0,0,0,.35) 20%, rgba(0,0,0,.72)),
    radial-gradient(circle at center, transparent 35%, rgba(0,0,0,.82) 100%);
  pointer-events:none;
}

.grain{
  position:fixed;
  inset:0;
  z-index:-1;
  opacity:.04;
  pointer-events:none;
  background-image:
    radial-gradient(rgba(255,255,255,.7) 0.5px, transparent 0.5px);
  background-size:4px 4px;
  mix-blend-mode:screen;
}

#dust{
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
}

.site-shell{
  position:relative;
  z-index:1;
}

.navbar{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:100;
  padding:.7rem 1rem;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.08);
  transition:padding .35s ease, background .35s ease, box-shadow .35s ease;
}

.navbar.nav-scrolled{
  padding:.45rem 1rem;
  background:rgba(0,0,0,.62);
  box-shadow:0 4px 22px rgba(0,0,0,.6);
}

.nav-wrap{
  max-width:1440px;
  margin:0 auto;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:.75rem .85rem;
}

.menu-box{
  min-width:122px;
  height:42px;
  padding:0 1rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  text-transform:uppercase;
  letter-spacing:.28em;
  font-size:.66rem;
  font-weight:600;
  color:rgba(255,255,255,.9);
  border:1px solid rgba(255,255,255,.6);
  background:#000;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.025),
    0 0 0 rgba(255,255,255,0);
  position:relative;
  overflow:hidden;
  transition:
    transform .25s ease,
    background .25s ease,
    border-color .25s ease,
    color .25s ease,
    box-shadow .25s ease;
}

.menu-box::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.12) 46%, transparent 100%);
  transform:translateX(-135%);
  transition:transform .55s ease;
  pointer-events:none;
}

.menu-box:hover::before{
  transform:translateX(135%);
}

.menu-box:hover{
  transform:translateY(-1px);
  background:#000;
  border-color:rgba(255,255,255,.95);
  box-shadow:
    0 0 14px rgba(255,255,255,.08),
    0 0 24px rgba(255,255,255,.05),
    inset 0 0 10px rgba(255,255,255,.03);
}

.menu-box.active-menu{
  background:rgba(255,255,255,.94);
  color:#000;
  border-color:#fff;
  box-shadow:0 0 24px rgba(255,255,255,.14);
}

.menu-cross{
  font-size:.95rem;
  line-height:1;
  transform:translateY(-1px);
  text-shadow:0 0 8px rgba(255,255,255,.25);
}

.menu-box.active-menu .menu-cross{
  text-shadow:none;
}

.menu-text{
  line-height:1;
  white-space:nowrap;
}

.mobile-menu-toggle{
  display:none;
  background:#000;
  border:1px solid rgba(255,255,255,.6);
  color:#fff;
  font-size:1rem;
  width:40px;
  height:40px;
  cursor:pointer;
}

.nav-spacer{
  height:82px;
}

.section{
  width:min(1280px, calc(100% - 2rem));
  margin-inline:auto;
}

.hero{
  min-height:calc(100vh - 130px);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:2rem 0 1rem;
}

.hero-scroll-delay{
  opacity:0;
  transform:translateY(10px);
  animation:scrollFadeIn 1s ease forwards;
  animation-delay:1.8s;
}

@keyframes scrollFadeIn{
  from{
    opacity:0;
    transform:translateY(10px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

.hero-inner{
  max-width:1080px;
  margin:0 auto;
  position:relative;
  padding:4.4rem 3rem 3.8rem;
  isolation:isolate;
  overflow:hidden;
  background:rgba(0,0,0,.58);
  border:1px solid rgba(255,255,255,.07);
  box-shadow:
    0 30px 80px rgba(0,0,0,.58),
    inset 0 0 0 1px rgba(255,255,255,.025),
    inset 0 0 90px rgba(0,0,0,.34);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}

.hero-inner::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.22), rgba(0,0,0,.06) 24%, rgba(0,0,0,.30)),
    radial-gradient(circle at 50% 40%, rgba(255,255,255,.03), transparent 48%),
    linear-gradient(to right, rgba(0,0,0,.18), transparent 20%, transparent 80%, rgba(0,0,0,.18));
  pointer-events:none;
  z-index:0;
}

.hero-inner::after{
  content:"";
  position:absolute;
  top:-110px;
  right:-185px;
  width:min(560px, 46vw);
  height:min(560px, 46vw);
  background-image:url("https://i.imgur.com/LCDf4w2.jpeg");
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  opacity:.13;
  filter:grayscale(100%) contrast(145%) brightness(1.08);
  mix-blend-mode:screen;
  pointer-events:none;
  user-select:none;
  z-index:0;
  animation:relicFloat 10s ease-in-out infinite alternate;
}

@keyframes relicFloat{
  from{
    transform:translateY(0);
  }
  to{
    transform:translateY(14px);
  }
}

.hero-inner > *{
  position:relative;
  z-index:2;
}

.hero-inner .hero-vignette{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:1;
  background:
    radial-gradient(circle at center, transparent 34%, rgba(0,0,0,.18) 62%, rgba(0,0,0,.42) 100%);
}

.hero-corner{
  position:absolute;
  width:62px;
  height:62px;
  pointer-events:none;
  opacity:.34;
}

.hero-corner::before,
.hero-corner::after{
  content:"";
  position:absolute;
  background:linear-gradient(to right, rgba(255,255,255,.58), rgba(255,255,255,.08));
  box-shadow:0 0 12px rgba(255,255,255,.07);
}

.hero-corner::before{
  height:1px;
  width:62px;
}

.hero-corner::after{
  width:1px;
  height:62px;
  background:linear-gradient(to bottom, rgba(255,255,255,.58), rgba(255,255,255,.08));
}

.hero-corner.tl{
  top:1rem;
  left:1rem;
}

.hero-corner.tr{
  top:1rem;
  right:1rem;
  transform:scaleX(-1);
}

.hero-corner.bl{
  bottom:1rem;
  left:1rem;
  transform:scaleY(-1);
}

.hero-corner.br{
  bottom:1rem;
  right:1rem;
  transform:scale(-1);
}

.eyebrow{
  display:inline-block;
  font-size:.72rem;
  letter-spacing:.35em;
  text-transform:uppercase;
  color:rgba(255,255,255,.62);
  opacity:.85;
  margin-bottom:1rem;
}

.hero-title{
  font-size:clamp(4rem, 12vw, 10rem);
  line-height:.92;
  letter-spacing:0;
  text-shadow:
    0 0 46px rgba(255,255,255,.22),
    0 0 28px rgba(255,255,255,.14),
    0 0 38px rgba(255,255,255,.08),
    0 0 72px rgba(255,255,255,.06);
  animation:titleGlow 6s ease-in-out infinite;
}

.hero-title.fraktur-title{
  letter-spacing:0;
  word-spacing:-0.08em;
  text-shadow:
    0 0 6px rgba(255,255,255,.08),
    0 0 18px rgba(255,255,255,.05),
    0 2px 4px rgba(0,0,0,.9);
}

@keyframes titleGlow{
  0%,100%{
    text-shadow:
      0 0 38px rgba(255,255,255,.16),
      0 0 18px rgba(255,255,255,.1),
      0 0 32px rgba(255,255,255,.07),
      0 0 60px rgba(255,255,255,.05);
  }
  50%{
    text-shadow:
      0 0 46px rgba(255,255,255,.22),
      0 0 28px rgba(255,255,255,.14),
      0 0 38px rgba(255,255,255,.08),
      0 0 72px rgba(255,255,255,.06);
  }
}

.hero-sub{
  max-width:720px;
  margin:1.75rem auto 0;
  font-family:'Cinzel', serif;
  font-size:clamp(.85rem, 1.2vw, 1rem);
  line-height:1.8;
  letter-spacing:.12em;
  color:rgba(255,255,255,.74);
  font-weight:400;
}

.hero-microcopy{
  max-width:640px;
  margin:1.35rem auto 0;
  font-family:'Inter', sans-serif;
  font-size:.72rem;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:rgba(255,255,255,.42);
}

.hero-actions{
  display:flex;
  gap:1rem;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:2.8rem;
}

.gothic-btn{
  min-width:220px;
  min-height:58px;
  padding:1rem 2rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.65rem;
  border:1px solid rgba(255,255,255,.38);
  letter-spacing:.24em;
  text-transform:uppercase;
  font-size:.78rem;
  font-weight:700;
  color:#fff;
  background:rgba(0,0,0,.34);
  position:relative;
  overflow:hidden;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.03),
    0 0 22px rgba(255,255,255,.07),
    inset 0 0 18px rgba(255,255,255,.02);
  transition:
    transform .28s ease,
    box-shadow .28s ease,
    background .28s ease,
    border-color .28s ease,
    color .28s ease;
  animation:ctaGlow 4s ease-in-out infinite;
}

@keyframes ctaGlow{
  0%,100%{
    box-shadow:
      0 0 0 1px rgba(255,255,255,.03),
      0 0 20px rgba(255,255,255,.05),
      inset 0 0 18px rgba(255,255,255,.02);
  }
  50%{
    box-shadow:
      0 0 0 1px rgba(255,255,255,.05),
      0 0 35px rgba(255,255,255,.14),
      inset 0 0 20px rgba(255,255,255,.04);
  }
}

.gothic-btn::before{
  content:"";
  position:absolute;
  inset:auto -30% 0 -30%;
  height:120%;
  background:linear-gradient(to top, rgba(255,255,255,.12), transparent 70%);
  transform:translateY(100%);
  transition:transform .4s ease;
  pointer-events:none;
}

.gothic-btn:hover::before{
  transform:translateY(0);
}

.gothic-btn:hover{
  transform:translateY(-3px);
  background:#fff;
  color:#000;
  border-color:#fff;
  box-shadow:0 12px 34px rgba(255,255,255,.18);
}

.gothic-btn.ghost{
  background:transparent;
  color:#fff;
}

.gothic-btn.ghost:hover{
  background:rgba(255,255,255,.08);
  color:#fff;
}

.scroll-cue{
  margin-top:1.4rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

.scroll-label{
  margin-bottom:.85rem;
  font-family:'Inter', sans-serif;
  font-size:.58rem;
  letter-spacing:.52em;
  text-transform:uppercase;
  color:rgba(255,255,255,.36);
}

.lux-scroll{
  margin-top:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  user-select:none;
}

.lux-scroll span{
  display:block;
  width:18px;
  height:18px;
  border-right:2px solid rgba(255,255,255,.95);
  border-bottom:2px solid rgba(255,255,255,.95);
  transform:rotate(45deg);
  margin:-4px 0;
  opacity:.85;
  filter:drop-shadow(0 0 8px rgba(255,255,255,.18));
  animation:luxArrow 2.2s ease-in-out infinite;
}

.lux-scroll span:nth-child(2){
  animation-delay:.18s;
}

@keyframes luxArrow{
  0%, 100%{
    opacity:.28;
    transform:rotate(45deg) translate(-2px,-2px);
  }
  50%{
    opacity:1;
    transform:rotate(45deg) translate(4px,4px);
  }
}

.divider{
  width:min(1140px, calc(100% - 2rem));
  margin:2rem auto;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  column-gap:1rem;
}

.divider::before,
.divider::after{
  content:"";
  display:block;
  height:1px;
  background:linear-gradient(to right, transparent, rgba(255,255,255,.45));
}

.divider::after{
  background:linear-gradient(to left, transparent, rgba(255,255,255,.45));
}

.divider-symbol{
  color:rgba(255,255,255,.86);
  font-size:1rem;
  line-height:1;
  text-shadow:
    0 0 10px rgba(255,255,255,.15),
    0 0 18px rgba(255,255,255,.08),
    0 0 28px rgba(255,255,255,.05);
  transform:translateY(-1px);
}

.section-header{
  text-align:center;
  margin-bottom:3rem;
}

.section-kicker{
  display:block;
  margin-bottom:.8rem;
  font-family:'Inter', sans-serif;
  font-size:.75rem;
  letter-spacing:.42em;
  color:rgba(255,255,255,.55);
  text-transform:uppercase;
}

.section-title{
  font-family:'Cinzel', serif;
  font-size:clamp(2rem, 4vw, 3.25rem);
  line-height:1.08;
  letter-spacing:.08em;
  text-shadow:
    0 0 10px rgba(255,255,255,.08),
    0 0 20px rgba(255,255,255,.06),
    0 0 40px rgba(255,255,255,.04);
  position:relative;
  display:inline-block;
  padding:.7rem 0;
  text-transform:uppercase;
}

.section-title::before,
.section-title::after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  width:88px;
  height:1px;
  background:linear-gradient(to right, transparent, rgba(255,255,255,.5), transparent);
}

.section-title::before{
  top:0;
}

.section-title::after{
  bottom:0;
}

.section-copy{
  max-width:760px;
  margin:1rem auto 0;
  color:#b9b9b9;
  line-height:1.8;
  font-size:1rem;
  font-family:'Manrope', sans-serif;
  letter-spacing:.02em;
}

.grid-3{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:1.25rem;
}

.grid-2{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:1.25rem;
}

.glass{
  background:var(--panel);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.12);
  position:relative;
  overflow:hidden;
  transition:
    transform .3s ease,
    border-color .3s ease,
    box-shadow .3s ease,
    background .3s ease;
}

.glass::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 20%, rgba(255,255,255,.08), transparent 60%);
  opacity:0;
  transition:opacity .3s ease;
  pointer-events:none;
}

.glass:hover::before{
  opacity:.08;
}

.glass:hover{
  transform:translateY(-4px);
  border-color:rgba(255,255,255,.22);
  box-shadow:
    0 20px 50px rgba(0,0,0,.45),
    0 0 0 1px rgba(255,255,255,.04);
  background:var(--panel);
}

.feature-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,.06), transparent);
  opacity:0;
  transition:opacity .4s ease;
  pointer-events:none;
}

.feature-card:hover::after{
  opacity:1;
}

.stat-card,
.feature-card,
.community-card{
  padding:2rem;
  text-align:center;
}

.stat-number,
.community-number{
  font-family:'Cinzel',serif;
  font-size:clamp(2rem, 5vw, 3.2rem);
  margin-bottom:.45rem;
}

.stat-label,
.community-label{
  font-family:'Cinzel', serif;
  text-transform:uppercase;
  letter-spacing:.22em;
  font-size:.76rem;
  color:rgba(255,255,255,.72);
}

.feature-card h3{
  font-size:1.15rem;
  margin-bottom:1rem;
  text-transform:uppercase;
}

.feature-card p{
  margin:0;
  color:#b9b9b9;
  line-height:1.8;
  font-size:.98rem;
  font-family:'Manrope', sans-serif;
  letter-spacing:.01em;
}

.feature-icon-wrap{
  width:62px;
  height:62px;
  margin:0 auto 1.1rem;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.14);
  border-radius:50%;
  background:radial-gradient(circle at center, rgba(255,255,255,.055), rgba(255,255,255,.01) 70%, transparent 100%);
  box-shadow:
    inset 0 0 18px rgba(255,255,255,.035),
    0 0 24px rgba(255,255,255,.04);
  transition:
    border-color .3s ease,
    box-shadow .3s ease,
    transform .3s ease;
}

.feature-card:hover .feature-icon-wrap{
  transform:translateY(-2px);
  border-color:rgba(255,255,255,.24);
  box-shadow:
    inset 0 0 18px rgba(255,255,255,.05),
    0 0 28px rgba(255,255,255,.08);
}

.feature-icon{
  width:28px;
  height:28px;
  object-fit:contain;
  display:block;
  opacity:.9;
  filter:brightness(1.2) grayscale(100%);
}

.join-panel{
  text-align:center;
  padding:3rem 2rem;
}

.join-panel p{
  max-width:720px;
  margin:1rem auto 0;
  color:#b9b9b9;
  line-height:1.8;
  font-family:'Cinzel', serif;
  letter-spacing:.06em;
}

footer{
  width:min(1280px, calc(100% - 2rem));
  margin:6rem auto 0;
  padding:2rem 0 3rem;
  border-top:1px solid rgba(255,255,255,.1);
  text-align:center;
  color:rgba(255,255,255,.52);
  font-size:.92rem;
  font-family:'Cinzel', serif;
  letter-spacing:.08em;
}

.reveal{
  opacity:1;
  transform:none;
  transition:opacity .9s ease, transform .9s ease;
}

.js-enabled .reveal{
  opacity:0;
  transform:translateY(44px);
}

.js-enabled .reveal.active{
  opacity:1;
  transform:translateY(0);
}

.hero-stagger-1{
  transition-delay:.08s;
}

.hero-stagger-2{
  transition-delay:.22s;
}

.hero-stagger-3{
  transition-delay:.38s;
}

.hero-stagger-4{
  transition-delay:.54s;
}

.hero-stagger-5{
  transition-delay:.7s;
}

.hero-stagger-6{
  transition-delay:.86s;
}

.stat-card{
  opacity:0;
  transform:translateY(15px);
  animation:statReveal .9s ease forwards;
}

.stat-card:nth-child(1){ animation-delay:.15s; }
.stat-card:nth-child(2){ animation-delay:.35s; }
.stat-card:nth-child(3){ animation-delay:.55s; }

@keyframes statReveal{
  from{
    opacity:0;
    transform:translateY(15px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

@media (max-width: 900px){
  .grid-3,
  .grid-2{
    grid-template-columns:1fr;
  }

  .nav-spacer{
    height:170px;
  }

  .hero{
    min-height:auto;
    padding-top:2rem;
  }

  .hero-inner{
    padding:3.3rem 1.5rem 3rem;
    background:rgba(0,0,0,.64);
  }

  .hero-inner::after{
    top:-70px;
    right:-140px;
    width:min(390px, 50vw);
    height:min(390px, 50vw);
    opacity:.11;
  }

  .hero-corner{
    width:42px;
    height:42px;
  }

  .hero-corner::before{
    width:42px;
  }

  .hero-corner::after{
    height:42px;
  }
}

@media (max-width: 768px){
  .navbar{
    padding:1rem .8rem;
  }

  .mobile-menu-toggle{
    display:block;
    margin:auto;
    margin-bottom:.6rem;
  }

  .nav-wrap{
    display:none;
    flex-direction:column;
    gap:.8rem;
  }

  .nav-wrap.open{
    display:flex;
  }

  .menu-box{
    min-width:118px;
    height:44px;
    font-size:.62rem;
    letter-spacing:.22em;
    padding:0 .9rem;
  }

  .hero-actions{
    flex-direction:column;
    align-items:center;
  }

  .gothic-btn{
    width:min(100%, 320px);
  }

  .divider{
    margin:5rem auto;
    column-gap:.8rem;
  }

  .stat-card,
  .feature-card,
  .community-card,
  .join-panel{
    padding:1.35rem;
  }

  .hero-sub{
    font-size:1rem;
    letter-spacing:.08em;
  }

  .section-copy,
  .feature-card p,
  .join-panel p{
    letter-spacing:.04em;
  }

  .hero-microcopy{
    font-size:.64rem;
    letter-spacing:.26em;
    line-height:1.8;
  }

  .scroll-label{
    letter-spacing:.34em;
  }

  .feature-icon-wrap{
    width:56px;
    height:56px;
    margin-bottom:1rem;
  }

  .feature-icon{
    width:25px;
    height:25px;
  }

  .hero-inner{
    background:rgba(0,0,0,.68);
  }

  .hero-inner::after{
    top:-42px;
    right:-110px;
    width:min(300px, 58vw);
    height:min(300px, 58vw);
    opacity:.10;
  }
}