/* =========================================================
   PAPUWA4D DESIGN SYSTEM V1
========================================================= */

:root{

  --gold:#D4AF37;
  --gold-dark:#B8860B;
  --gold-light:#F4D03F;

  --bg:#050505;
  --bg-soft:#0B0B0B;

  --surface:#111111;
  --surface-2:#171717;

  --white:#FFFFFF;
  --text:#EAEAEA;
  --muted:#BDBDBD;

  --border:rgba(212,175,55,.20);

  --shadow:
  0 10px 30px rgba(0,0,0,.35);

  --radius-sm:12px;
  --radius-md:18px;
  --radius-lg:28px;

  --container:1280px;

  --transition:.35s ease;

}

/* =========================================================
   RESET
========================================================= */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{

  background:var(--bg);
  color:var(--text);

  font-family:'Inter',sans-serif;

  line-height:1.7;

  overflow-x:hidden;
}

img{
  max-width:100%;
  display:block;
}

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

ul{
  list-style:none;
}

/* =========================================================
   CONTAINER
========================================================= */

.container{

  width:100%;
  max-width:var(--container);

  margin:auto;

  padding-left:24px;
  padding-right:24px;

}

/* =========================================================
   TYPOGRAPHY
========================================================= */

h1,h2,h3,h4{

  font-family:'Montserrat',sans-serif;
  font-weight:700;

  line-height:1.2;

}

h1{

  font-size:clamp(2.8rem,6vw,5.5rem);

}

h2{

  font-size:clamp(2rem,4vw,3.2rem);

}

h3{

  font-size:1.25rem;

}

p{

  color:var(--muted);

}

.section{

  padding:120px 0;

}

.section-label{

  display:inline-block;

  color:var(--gold);

  font-size:.85rem;

  font-weight:700;

  letter-spacing:2px;

  margin-bottom:15px;

}

.section-heading{

  max-width:760px;

  margin:0 auto 60px;

  text-align:center;

}

.section-heading h2{

  margin-bottom:20px;

}

/* =========================================================
   BUTTONS
========================================================= */

.btn{

  display:inline-flex;

  align-items:center;
  justify-content:center;

  min-height:54px;

  padding:0 26px;

  border-radius:999px;

  font-weight:700;

  transition:var(--transition);

}

.btn-primary{

  background:linear-gradient(
  135deg,
  var(--gold-light),
  var(--gold-dark));

  color:#000;

}

.btn-primary:hover{

  transform:translateY(-3px);

}

.btn-secondary{

  border:1px solid var(--gold);

  color:var(--white);

}

.btn-secondary:hover{

  background:rgba(212,175,55,.08);

}

/* =========================================================
   HEADER
========================================================= */

.site-header{

  position:fixed;

  top:0;
  left:0;

  width:100%;

  z-index:999;

  transition:var(--transition);

}

.site-header.scrolled{

  backdrop-filter:blur(14px);

  background:rgba(5,5,5,.85);

  border-bottom:1px solid var(--border);

}

.site-header .container{

  display:flex;

  align-items:center;
  justify-content:space-between;

  min-height:88px;

}

.brand img{

  height:64px;
  width:auto;

}

.main-nav{

  display:flex;
  align-items:center;
  gap:30px;

}

.main-nav ul{

  display:flex;
  gap:25px;

}

.main-nav a{

  transition:var(--transition);

}

.main-nav a:hover{

  color:var(--gold);

}

/* =========================================================
   MOBILE BUTTON
========================================================= */

.menu-toggle{

  display:none;

  background:none;
  border:none;

  cursor:pointer;

}

.menu-toggle span{

  display:block;

  width:28px;
  height:3px;

  background:#fff;

  margin:5px 0;

}

/* =========================================================
   HERO
========================================================= */

.hero{

  position:relative;

  min-height:100vh;

  display:flex;
  align-items:center;

  overflow:hidden;

}

.hero::before{

  content:"";

  position:absolute;

  width:700px;
  height:700px;

  top:-250px;
  right:-150px;

  background:radial-gradient(
  circle,
  rgba(212,175,55,.18),
  transparent 70%);

}

.hero-grid{

  display:grid;

  grid-template-columns:
  1.2fr
  .8fr;

  gap:80px;

  align-items:center;

}

.hero-badge{

  display:inline-flex;

  align-items:center;

  gap:10px;

  padding:12px 20px;

  border-radius:999px;

  background:
  rgba(212,175,55,.08);

  border:1px solid var(--border);

  color:var(--gold);

  backdrop-filter:blur(10px);

}

.hero h1{

  margin-bottom:24px;

}

.hero-description{

  max-width:650px;

  font-size:1.1rem;

  margin-bottom:35px;

}

.hero-actions{

  display:flex;
  gap:15px;

  flex-wrap:wrap;

}

/* =========================================================
   HERO CARD
========================================================= */

.hero-card{

  background:linear-gradient(
  180deg,
  rgba(255,255,255,.03),
  rgba(255,255,255,.01));

  border:1px solid var(--border);

  border-radius:32px;

  padding:40px;

  backdrop-filter:blur(10px);

  box-shadow:var(--shadow);

}

.hero-card h2{

  font-size:1.8rem;

  margin-bottom:20px;

}

.hero-card ul{

  margin-top:20px;

}

.hero-card li{

  margin-bottom:12px;

  color:var(--muted);

}

.hero-image-card{

  position:relative;

}

.hero-image-card::before{

  content:"";

  position:absolute;

  inset:-1px;

  border-radius:32px;

  background:
  linear-gradient(
    135deg,
    rgba(212,175,55,.6),
    rgba(77,163,255,.5)
  );

  z-index:-1;

  filter:blur(20px);

}

/* =========================================================
   ABOUT SECTION
========================================================= */

.about-grid{

  display:grid;

  grid-template-columns:
  1.2fr
  .8fr;

  gap:50px;

  align-items:start;

}

.about-content h3{

  margin-bottom:24px;

  font-size:1.8rem;

}

.about-content p{

  margin-bottom:20px;

}

.about-card{

  background:linear-gradient(
  180deg,
  rgba(255,255,255,.03),
  rgba(255,255,255,.01));

  border:1px solid var(--border);

  border-radius:28px;

  padding:35px;

  box-shadow:var(--shadow);

}

.stat-item{

  padding:20px 0;

  border-bottom:1px solid rgba(255,255,255,.08);

}

.stat-item:last-child{

  border-bottom:none;

}

.stat-item strong{

  display:block;

  color:var(--gold);

  margin-bottom:10px;

  font-size:1.05rem;

}

/* =========================================================
   VALUE SECTION
========================================================= */

.value-grid{

  display:grid;

  grid-template-columns:
  repeat(4,1fr);

  gap:28px;

}

.value-card{

  position:relative;

  background:var(--surface);

  border:1px solid var(--border);

  border-radius:26px;

  padding:35px;

  overflow:hidden;

  transition:var(--transition);

}

.value-card::before{

  content:"";

  position:absolute;

  top:0;
  left:0;

  width:100%;
  height:3px;

  background:linear-gradient(
  90deg,
  var(--gold-light),
  var(--gold-dark));

  transform:scaleX(0);

  transform-origin:left;

  transition:var(--transition);

}

.value-card:hover{

  transform:translateY(-8px);

  border-color:
  rgba(212,175,55,.45);

}

.value-card:hover::before{

  transform:scaleX(1);

}

.value-icon{

  width:60px;
  height:60px;

  display:flex;

  align-items:center;
  justify-content:center;

  border-radius:16px;

  background:
  rgba(212,175,55,.10);

  color:var(--gold);

  font-weight:800;

  margin-bottom:25px;

}

.value-card h3{

  margin-bottom:15px;

}

/* =========================================================
   TRUST SECTION
========================================================= */

.trust{

  position:relative;

  background:
  linear-gradient(
  180deg,
  transparent,
  rgba(255,255,255,.015));

}

.trust-grid{

  display:grid;

  grid-template-columns:
  repeat(2,1fr);

  gap:30px;

}

.trust-card{

  background:var(--surface);

  border:1px solid var(--border);

  border-radius:24px;

  padding:35px;

  transition:var(--transition);

}

.trust-card:hover{

  transform:translateY(-6px);

  border-color:
  rgba(212,175,55,.45);

}

.trust-card h3{

  color:var(--gold);

  margin-bottom:15px;

}

/* =========================================================
   PREMIUM CARD SYSTEM
========================================================= */

.post-card,
.community-card{

  background:var(--surface);

  border:1px solid var(--border);

  border-radius:24px;

  overflow:hidden;

  transition:var(--transition);

}

.post-card:hover,
.community-card:hover{

  transform:translateY(-8px);

  border-color:
  rgba(212,175,55,.45);

}

.post-body{

  padding:28px;

}

.post-body h3{

  margin-bottom:15px;

}

.post-body a{

  display:inline-block;

  margin-top:18px;

  color:var(--gold);

  font-weight:700;

}

.placeholder{

  height:220px;

  background:
  linear-gradient(
  135deg,
  rgba(212,175,55,.18),
  rgba(255,255,255,.03));

}

/* =========================================================
   COMMUNITY
========================================================= */

.community-grid{

  display:grid;

  grid-template-columns:
  repeat(3,1fr);

  gap:30px;

}

.community-card{

  padding:35px;

}

.community-card h3{

  color:var(--gold);

  margin-bottom:15px;

}

/* =========================================================
   SUPPORT SECTION
========================================================= */

.support-box{

  text-align:center;

  max-width:900px;

  margin:auto;

  padding:70px 50px;

  border-radius:32px;

  background:
  linear-gradient(
  180deg,
  rgba(212,175,55,.08),
  rgba(255,255,255,.02));

  border:1px solid var(--border);

}

.support-box h2{

  margin-bottom:20px;

}

.support-actions{

  margin-top:35px;

  display:flex;

  justify-content:center;

  gap:15px;

  flex-wrap:wrap;

}

/* =========================================================
   GRID ARTICLE
========================================================= */

.post-grid{

  display:grid;

  grid-template-columns:
  repeat(3,1fr);

  gap:30px;

}

/* =========================================================
   ROADMAP TIMELINE
========================================================= */

.roadmap-timeline{

  position:relative;

  max-width:900px;

  margin:60px auto 0;

}

.roadmap-timeline::before{

  content:"";

  position:absolute;

  left:80px;

  top:0;
  bottom:0;

  width:2px;

  background:
  linear-gradient(
  to bottom,
  var(--gold-light),
  rgba(212,175,55,.15));

}

.roadmap-item{

  position:relative;

  display:grid;

  grid-template-columns:
  120px
  1fr;

  gap:40px;

  margin-bottom:50px;

}

.roadmap-year{

  width:80px;
  height:80px;

  display:flex;

  align-items:center;
  justify-content:center;

  border-radius:50%;

  background:
  linear-gradient(
  135deg,
  var(--gold-light),
  var(--gold-dark));

  color:#000;

  font-weight:800;

  z-index:2;

}

.roadmap-content{

  background:var(--surface);

  border:1px solid var(--border);

  border-radius:24px;

  padding:30px;

  box-shadow:var(--shadow);

}

.roadmap-content h3{

  margin-bottom:12px;

}

/* =========================================================
   FOOTER
========================================================= */

.footer{

  margin-top:120px;

  border-top:1px solid var(--border);

  background:var(--bg-soft);

}

.footer-grid{

  display:grid;

  grid-template-columns:
  2fr
  1fr
  1fr
  1fr;

  gap:40px;

  padding:80px 0;

}

.footer-logo{

  max-width:180px;

  margin-bottom:25px;

}

.footer-column h3{

  margin-bottom:20px;

  color:var(--gold);

}

.footer-column ul li{

  margin-bottom:12px;

}

.footer-column a{

  color:var(--muted);

  transition:var(--transition);

}

.footer-column a:hover{

  color:var(--gold);

}

.footer-bottom{

  text-align:center;

  padding:25px 0;

  border-top:1px solid rgba(255,255,255,.06);

}

.footer-bottom p{

  margin:0;

}

/* =========================================================
   REVEAL ANIMATION
========================================================= */

.reveal{

  opacity:0;

  transform:translateY(30px);

  transition:
  opacity .8s ease,
  transform .8s ease;

}

.reveal.active{

  opacity:1;

  transform:none;

}

/* =========================================================
   UTILITIES
========================================================= */

.text-center{

  text-align:center;

}

.mt-0{
  margin-top:0;
}

.mb-0{
  margin-bottom:0;
}

.w-100{
  width:100%;
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width:1024px){

  .hero-grid,
  .about-grid{

    grid-template-columns:1fr;

    gap:50px;

  }

  .value-grid{

    grid-template-columns:
    repeat(2,1fr);

  }

  .post-grid{

    grid-template-columns:
    repeat(2,1fr);

  }

  .community-grid{

    grid-template-columns:
    repeat(2,1fr);

  }

  .footer-grid{

    grid-template-columns:
    repeat(2,1fr);

  }

}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width:768px){

  .section{

    padding:90px 0;

  }

  .site-header .container{

    min-height:75px;

  }

  .brand img{

    height:52px;

  }

  .menu-toggle{

    display:block;

    z-index:1001;

  }

  .main-nav{

    position:fixed;

    top:0;
    right:-100%;

    width:300px;

    height:100vh;

    background:#0a0a0a;

    flex-direction:column;

    justify-content:center;

    gap:30px;

    transition:.4s ease;

    border-left:
    1px solid var(--border);

  }

  .main-nav.active{

    right:0;

  }

  .main-nav ul{

    flex-direction:column;

    text-align:center;

  }

  .hero{

    min-height:auto;

    padding-top:140px;
    padding-bottom:100px;

  }

  .hero-actions{

    flex-direction:column;

  }

  .hero-actions .btn{

    width:100%;

  }

  .value-grid,
  .trust-grid,
  .post-grid,
  .community-grid{

    grid-template-columns:1fr;

  }

  .support-box{

    padding:45px 25px;

  }

  .support-actions{

    flex-direction:column;

  }

  .support-actions .btn{

    width:100%;

  }

  .footer-grid{

    grid-template-columns:1fr;

  }

  .roadmap-timeline::before{

    left:40px;

  }

  .roadmap-item{

    grid-template-columns:
    80px
    1fr;

    gap:20px;

  }

  .roadmap-year{

    width:55px;
    height:55px;

    font-size:.85rem;

  }

}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width:480px){

  .container{

    padding-left:18px;
    padding-right:18px;

  }

  h1{

    font-size:2.5rem;

  }

  h2{

    font-size:1.9rem;

  }

}

#mainNav a.active{

  color:var(--gold);

}

/* =========================================================
   HERO VISUAL V2.1
========================================================= */

.hero-content h1 span{

  display:block;

  margin-top:15px;

  font-size:clamp(1.1rem,2vw,1.8rem);

  color:var(--gold);

  font-weight:600;

}

.hero-visual{

  position:relative;

  display:flex;

  align-items:center;
  justify-content:center;

}

.hero-image-card{

  position:relative;

  z-index:5;

  border-radius:32px;

  overflow:hidden;

  border:1px solid var(--border);

  background:var(--surface);

  box-shadow:var(--shadow);

}

.hero-image-card img{

  display:block;

  width:100%;
  height:auto;

}

.hero-orb{

  position:absolute;

  border-radius:50%;

  filter:blur(80px);

}

.hero-orb-1{

  width:250px;
  height:250px;

  background:
  rgba(212,175,55,.25);

  top:10%;
  left:10%;

}

.hero-orb-2{

  width:220px;
  height:220px;

  background:
  rgba(77,163,255,.25);

  right:0;
  bottom:0;

}

/* =========================================================
   ABOUT V2.2
========================================================= */

.about-grid{

  display:grid;

  grid-template-columns:
  1fr
  1fr;

  gap:70px;

  align-items:center;

}

.about-image{

  position:relative;

}

.about-image img{

  width:100%;

  border-radius:30px;

  border:1px solid var(--border);

  box-shadow:var(--shadow);

}

.about-content h2{

  margin-bottom:25px;

}

.about-content p{

  margin-bottom:20px;

}

.about-content .btn{

  margin-top:10px;

}

/* =========================================================
   COMMUNITY V2.3
========================================================= */

.community-preview{

  display:grid;

  grid-template-columns:
  1fr
  1fr;

  gap:70px;

  align-items:center;

}

.community-content h2{

  margin-bottom:25px;

}

.community-content p{

  margin-bottom:20px;

}

.community-features{

  display:grid;

  gap:15px;

  margin:35px 0;

}

.community-feature{

  padding:16px 20px;

  border:1px solid var(--border);

  border-radius:16px;

  background:
  rgba(255,255,255,.02);

}

.community-image img{

  width:100%;

  border-radius:30px;

  border:1px solid var(--border);

  box-shadow:var(--shadow);

}

/* =========================================================
   FAQ
========================================================= */

.faq-wrapper{

  max-width:900px;

  margin:0 auto;

}

.faq-item{

  background:var(--surface);

  border:1px solid var(--border);

  border-radius:20px;

  margin-bottom:20px;

  overflow:hidden;

}

.faq-item summary{

  cursor:pointer;

  padding:24px 30px;

  font-weight:700;

  list-style:none;

  position:relative;

}

.faq-item summary::-webkit-details-marker{

  display:none;

}

.faq-item summary::after{

  content:"+";

  position:absolute;

  right:30px;

  top:50%;

  transform:translateY(-50%);

  color:var(--gold);

  font-size:1.4rem;

}

.faq-item[open] summary::after{

  content:"−";

}

.faq-item p{

  padding:0 30px 25px;

}

/* =========================================================
   EVENT PREVIEW V2.6
========================================================= */

.event-grid{

  display:grid;

  grid-template-columns:
  repeat(3,1fr);

  gap:30px;

}

.event-card{

  background:var(--surface);

  border:1px solid var(--border);

  border-radius:24px;

  overflow:hidden;

  transition:var(--transition);

}

.event-card:hover{

  transform:translateY(-8px);

  border-color:
  rgba(212,175,55,.45);

}

.event-image img{

  width:100%;

  display:block;

}

.event-content{

  padding:28px;

}

.event-date{

  display:inline-block;

  margin-bottom:15px;

  color:var(--gold);

  font-size:.85rem;

  font-weight:700;

  letter-spacing:1px;

}

.event-content h3{

  margin-bottom:15px;

}

.event-link{

  display:inline-block;

  margin-top:18px;

  color:var(--gold);

  font-weight:700;

}

.section-cta{

  text-align:center;

  margin-top:50px;

}

/* =========================================================
   NEWS PREVIEW V2.7
========================================================= */

.news-grid{

  display:grid;

  grid-template-columns:
  repeat(3,1fr);

  gap:30px;

}

.news-card{

  background:var(--surface);

  border:1px solid var(--border);

  border-radius:24px;

  overflow:hidden;

  transition:var(--transition);

}

.news-card:hover{

  transform:translateY(-8px);

  border-color:
  rgba(212,175,55,.45);

}

.news-image img{

  width:100%;

  display:block;

}

.news-content{

  padding:28px;

}

.news-category{

  display:inline-block;

  margin-bottom:15px;

  color:var(--gold);

  font-size:.85rem;

  font-weight:700;

  letter-spacing:1px;

}

.news-content h3{

  margin-bottom:15px;

}

.news-link{

  display:inline-block;

  margin-top:18px;

  color:var(--gold);

  font-weight:700;

}

/* =========================================================
   HERO PREMIUM BACKGROUND V2.8
========================================================= */

.hero{

  position:relative;

  overflow:hidden;

}

.hero-background{

  position:absolute;

  inset:0;

  pointer-events:none;

  z-index:0;

}

.hero-content,
.hero-visual{

  position:relative;

  z-index:5;

}

/* =========================================================
   GRID
========================================================= */

.hero-grid-pattern{

  position:absolute;

  inset:0;

  background-image:

  linear-gradient(
    rgba(255,255,255,.03) 1px,
    transparent 1px
  ),

  linear-gradient(
    90deg,
    rgba(255,255,255,.03) 1px,
    transparent 1px
  );

  background-size:
  60px 60px;

  mask-image:
  radial-gradient(
    circle at center,
    black,
    transparent 85%
  );

}

/* =========================================================
   GLOW
========================================================= */

.hero-glow{

  position:absolute;

  border-radius:50%;

  filter:blur(120px);

}

.hero-glow-1{

  width:500px;
  height:500px;

  background:
  rgba(212,175,55,.12);

  left:-150px;
  top:-100px;

}

.hero-glow-2{

  width:450px;
  height:450px;

  background:
  rgba(77,163,255,.14);

  right:-100px;
  bottom:-100px;

}

/* =========================================================
   PARTICLES
========================================================= */

.hero-particles span{

  position:absolute;

  width:4px;
  height:4px;

  border-radius:50%;

  background:var(--gold);

  opacity:.35;

  animation:
  floatParticle
  12s linear infinite;

}

.hero-particles span:nth-child(1){

  left:10%;
  top:20%;

}

.hero-particles span:nth-child(2){

  left:25%;
  top:70%;

  animation-delay:2s;

}

.hero-particles span:nth-child(3){

  left:50%;
  top:35%;

  animation-delay:4s;

}

.hero-particles span:nth-child(4){

  left:70%;
  top:60%;

  animation-delay:6s;

}

.hero-particles span:nth-child(5){

  left:85%;
  top:25%;

  animation-delay:8s;

}

.hero-particles span:nth-child(6){

  left:90%;
  top:80%;

  animation-delay:10s;

}

@keyframes floatParticle{

  0%{

    transform:
    translateY(0);

    opacity:.15;

  }

  50%{

    transform:
    translateY(-40px);

    opacity:.5;

  }

  100%{

    transform:
    translateY(-80px);

    opacity:0;

  }

}

/* =========================================================
   404 PAGE
========================================================= */

.error-page{

  min-height:100vh;

}

.error-hero{

  padding:180px 0;

  text-align:center;

}

.error-badge{

  display:inline-block;

  padding:12px 20px;

  border-radius:999px;

  border:1px solid var(--border);

  color:var(--gold);

  margin-bottom:25px;

}

.error-hero h1{

  font-size:clamp(2.5rem,6vw,5rem);

  margin-bottom:25px;

}

.error-hero p{

  max-width:700px;

  margin:0 auto 40px;

}

.error-actions{

  display:flex;

  gap:20px;

  justify-content:center;

  flex-wrap:wrap;

}

.quick-links{

  margin-top:60px;

  display:flex;

  justify-content:center;

  gap:25px;

  flex-wrap:wrap;

}

.quick-links a{

  color:var(--gold);

}

/* =========================================================
   ABOUT PAGE FOUNDATION
========================================================= */

.page-section{
  padding:100px 0;
}

.page-section-sm{
  padding:80px 0;
}

.section-header{
  text-align:center;
  max-width:800px;
  margin:0 auto 60px;
}

.section-header h2{
  margin-bottom:20px;
}

.section-header p{
  color:var(--muted);
}

.two-column{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;
}

.about-image img{
  width:100%;
  display:block;
  border-radius:24px;
}

.about-content p{
  margin-bottom:20px;
}

@media (max-width:992px){

  .two-column{
    grid-template-columns:1fr;
  }

}

/* =========================================================
   PAPUWA4D DESIGN SYSTEM V1
========================================================= */

:root{

  --gold:#D4AF37;
  --gold-dark:#B8860B;
  --gold-light:#F4D03F;

  --bg:#050505;
  --bg-soft:#0B0B0B;

  --surface:#111111;
  --surface-2:#171717;

  --white:#FFFFFF;
  --text:#EAEAEA;
  --muted:#BDBDBD;

  --border:rgba(212,175,55,.20);

  --shadow:
  0 10px 30px rgba(0,0,0,.35);

  --radius-sm:12px;
  --radius-md:18px;
  --radius-lg:28px;

  --container:1280px;

  --transition:.35s ease;

}

/* =========================================================
   RESET
========================================================= */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{

  background:var(--bg);
  color:var(--text);

  font-family:'Inter',sans-serif;

  line-height:1.7;

  overflow-x:hidden;
}

img{
  max-width:100%;
  display:block;
}

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

ul{
  list-style:none;
}

/* =========================================================
   CONTAINER
========================================================= */

.container{

  width:100%;
  max-width:var(--container);

  margin:auto;

  padding-left:24px;
  padding-right:24px;

}

/* =========================================================
   TYPOGRAPHY
========================================================= */

h1,h2,h3,h4{

  font-family:'Montserrat',sans-serif;
  font-weight:700;

  line-height:1.2;

}

h1{

  font-size:clamp(2.8rem,6vw,5.5rem);

}

h2{

  font-size:clamp(2rem,4vw,3.2rem);

}

h3{

  font-size:1.25rem;

}

p{

  color:var(--muted);

}

.section{

  padding:120px 0;

}

.section-label{

  display:inline-block;

  color:var(--gold);

  font-size:.85rem;

  font-weight:700;

  letter-spacing:2px;

  margin-bottom:15px;

}

.section-heading{

  max-width:760px;

  margin:0 auto 60px;

  text-align:center;

}

.section-heading h2{

  margin-bottom:20px;

}

/* =========================================================
   BUTTONS
========================================================= */

.btn{

  display:inline-flex;

  align-items:center;
  justify-content:center;

  min-height:54px;

  padding:0 26px;

  border-radius:999px;

  font-weight:700;

  transition:var(--transition);

}

.btn-primary{

  background:linear-gradient(
  135deg,
  var(--gold-light),
  var(--gold-dark));

  color:#000;

}

.btn-primary:hover{

  transform:translateY(-3px);

}

.btn-secondary{

  border:1px solid var(--gold);

  color:var(--white);

}

.btn-secondary:hover{

  background:rgba(212,175,55,.08);

}

/* =========================================================
   HEADER
========================================================= */

.site-header{

  position:fixed;

  top:0;
  left:0;

  width:100%;

  z-index:999;

  transition:var(--transition);

}

.site-header.scrolled{

  backdrop-filter:blur(14px);

  background:rgba(5,5,5,.85);

  border-bottom:1px solid var(--border);

}

.site-header .container{

  display:flex;

  align-items:center;
  justify-content:space-between;

  min-height:88px;

}

.brand img{

  height:64px;
  width:auto;

}

.main-nav{

  display:flex;
  align-items:center;
  gap:30px;

}

.main-nav ul{

  display:flex;
  gap:25px;

}

.main-nav a{

  transition:var(--transition);

}

.main-nav a:hover{

  color:var(--gold);

}

/* =========================================================
   MOBILE BUTTON
========================================================= */

.menu-toggle{

  display:none;

  background:none;
  border:none;

  cursor:pointer;

}

.menu-toggle span{

  display:block;

  width:28px;
  height:3px;

  background:#fff;

  margin:5px 0;

}

/* =========================================================
   HERO
========================================================= */

.hero{

  position:relative;

  min-height:100vh;

  display:flex;
  align-items:center;

  overflow:hidden;

}

.hero::before{

  content:"";

  position:absolute;

  width:700px;
  height:700px;

  top:-250px;
  right:-150px;

  background:radial-gradient(
  circle,
  rgba(212,175,55,.18),
  transparent 70%);

}

.hero-grid{

  display:grid;

  grid-template-columns:
  1.2fr
  .8fr;

  gap:80px;

  align-items:center;

}

.hero-badge{

  display:inline-flex;

  align-items:center;

  gap:10px;

  padding:12px 20px;

  border-radius:999px;

  background:
  rgba(212,175,55,.08);

  border:1px solid var(--border);

  color:var(--gold);

  backdrop-filter:blur(10px);

}

.hero h1{

  margin-bottom:24px;

}

.hero-description{

  max-width:650px;

  font-size:1.1rem;

  margin-bottom:35px;

}

.hero-actions{

  display:flex;
  gap:15px;

  flex-wrap:wrap;

}

/* =========================================================
   HERO CARD
========================================================= */

.hero-card{

  background:linear-gradient(
  180deg,
  rgba(255,255,255,.03),
  rgba(255,255,255,.01));

  border:1px solid var(--border);

  border-radius:32px;

  padding:40px;

  backdrop-filter:blur(10px);

  box-shadow:var(--shadow);

}

.hero-card h2{

  font-size:1.8rem;

  margin-bottom:20px;

}

.hero-card ul{

  margin-top:20px;

}

.hero-card li{

  margin-bottom:12px;

  color:var(--muted);

}

.hero-image-card{

  position:relative;

}

.hero-image-card::before{

  content:"";

  position:absolute;

  inset:-1px;

  border-radius:32px;

  background:
  linear-gradient(
    135deg,
    rgba(212,175,55,.6),
    rgba(77,163,255,.5)
  );

  z-index:-1;

  filter:blur(20px);

}

/* =========================================================
   ABOUT SECTION
========================================================= */

.about-grid{

  display:grid;

  grid-template-columns:
  1.2fr
  .8fr;

  gap:50px;

  align-items:start;

}

.about-content h3{

  margin-bottom:24px;

  font-size:1.8rem;

}

.about-content p{

  margin-bottom:20px;

}

.about-card{

  background:linear-gradient(
  180deg,
  rgba(255,255,255,.03),
  rgba(255,255,255,.01));

  border:1px solid var(--border);

  border-radius:28px;

  padding:35px;

  box-shadow:var(--shadow);

}

.stat-item{

  padding:20px 0;

  border-bottom:1px solid rgba(255,255,255,.08);

}

.stat-item:last-child{

  border-bottom:none;

}

.stat-item strong{

  display:block;

  color:var(--gold);

  margin-bottom:10px;

  font-size:1.05rem;

}

/* =========================================================
   VALUE SECTION
========================================================= */

.value-grid{

  display:grid;

  grid-template-columns:
  repeat(4,1fr);

  gap:28px;

}

.value-card{

  position:relative;

  background:var(--surface);

  border:1px solid var(--border);

  border-radius:26px;

  padding:35px;

  overflow:hidden;

  transition:var(--transition);

}

.value-card::before{

  content:"";

  position:absolute;

  top:0;
  left:0;

  width:100%;
  height:3px;

  background:linear-gradient(
  90deg,
  var(--gold-light),
  var(--gold-dark));

  transform:scaleX(0);

  transform-origin:left;

  transition:var(--transition);

}

.value-card:hover{

  transform:translateY(-8px);

  border-color:
  rgba(212,175,55,.45);

}

.value-card:hover::before{

  transform:scaleX(1);

}

.value-icon{

  width:60px;
  height:60px;

  display:flex;

  align-items:center;
  justify-content:center;

  border-radius:16px;

  background:
  rgba(212,175,55,.10);

  color:var(--gold);

  font-weight:800;

  margin-bottom:25px;

}

.value-card h3{

  margin-bottom:15px;

}

/* =========================================================
   TRUST SECTION
========================================================= */

.trust{

  position:relative;

  background:
  linear-gradient(
  180deg,
  transparent,
  rgba(255,255,255,.015));

}

.trust-grid{

  display:grid;

  grid-template-columns:
  repeat(2,1fr);

  gap:30px;

}

.trust-card{

  background:var(--surface);

  border:1px solid var(--border);

  border-radius:24px;

  padding:35px;

  transition:var(--transition);

}

.trust-card:hover{

  transform:translateY(-6px);

  border-color:
  rgba(212,175,55,.45);

}

.trust-card h3{

  color:var(--gold);

  margin-bottom:15px;

}

/* =========================================================
   PREMIUM CARD SYSTEM
========================================================= */

.post-card,
.community-card{

  background:var(--surface);

  border:1px solid var(--border);

  border-radius:24px;

  overflow:hidden;

  transition:var(--transition);

}

.post-card:hover,
.community-card:hover{

  transform:translateY(-8px);

  border-color:
  rgba(212,175,55,.45);

}

.post-body{

  padding:28px;

}

.post-body h3{

  margin-bottom:15px;

}

.post-body a{

  display:inline-block;

  margin-top:18px;

  color:var(--gold);

  font-weight:700;

}

.placeholder{

  height:220px;

  background:
  linear-gradient(
  135deg,
  rgba(212,175,55,.18),
  rgba(255,255,255,.03));

}

/* =========================================================
   COMMUNITY
========================================================= */

.community-grid{

  display:grid;

  grid-template-columns:
  repeat(3,1fr);

  gap:30px;

}

.community-card{

  padding:35px;

}

.community-card h3{

  color:var(--gold);

  margin-bottom:15px;

}

/* =========================================================
   SUPPORT SECTION
========================================================= */

.support-box{

  text-align:center;

  max-width:900px;

  margin:auto;

  padding:70px 50px;

  border-radius:32px;

  background:
  linear-gradient(
  180deg,
  rgba(212,175,55,.08),
  rgba(255,255,255,.02));

  border:1px solid var(--border);

}

.support-box h2{

  margin-bottom:20px;

}

.support-actions{

  margin-top:35px;

  display:flex;

  justify-content:center;

  gap:15px;

  flex-wrap:wrap;

}

/* =========================================================
   GRID ARTICLE
========================================================= */

.post-grid{

  display:grid;

  grid-template-columns:
  repeat(3,1fr);

  gap:30px;

}

/* =========================================================
   ROADMAP TIMELINE
========================================================= */

.roadmap-timeline{

  position:relative;

  max-width:900px;

  margin:60px auto 0;

}

.roadmap-timeline::before{

  content:"";

  position:absolute;

  left:80px;

  top:0;
  bottom:0;

  width:2px;

  background:
  linear-gradient(
  to bottom,
  var(--gold-light),
  rgba(212,175,55,.15));

}

.roadmap-item{

  position:relative;

  display:grid;

  grid-template-columns:
  120px
  1fr;

  gap:40px;

  margin-bottom:50px;

}

.roadmap-year{

  width:80px;
  height:80px;

  display:flex;

  align-items:center;
  justify-content:center;

  border-radius:50%;

  background:
  linear-gradient(
  135deg,
  var(--gold-light),
  var(--gold-dark));

  color:#000;

  font-weight:800;

  z-index:2;

}

.roadmap-content{

  background:var(--surface);

  border:1px solid var(--border);

  border-radius:24px;

  padding:30px;

  box-shadow:var(--shadow);

}

.roadmap-content h3{

  margin-bottom:12px;

}

/* =========================================================
   FOOTER
========================================================= */

.footer{

  margin-top:120px;

  border-top:1px solid var(--border);

  background:var(--bg-soft);

}

.footer-grid{

  display:grid;

  grid-template-columns:
  2fr
  1fr
  1fr
  1fr;

  gap:40px;

  padding:80px 0;

}

.footer-logo{

  max-width:180px;

  margin-bottom:25px;

}

.footer-column h3{

  margin-bottom:20px;

  color:var(--gold);

}

.footer-column ul li{

  margin-bottom:12px;

}

.footer-column a{

  color:var(--muted);

  transition:var(--transition);

}

.footer-column a:hover{

  color:var(--gold);

}

.footer-bottom{

  text-align:center;

  padding:25px 0;

  border-top:1px solid rgba(255,255,255,.06);

}

.footer-bottom p{

  margin:0;

}

/* =========================================================
   REVEAL ANIMATION
========================================================= */

.reveal{

  opacity:0;

  transform:translateY(30px);

  transition:
  opacity .8s ease,
  transform .8s ease;

}

.reveal.active{

  opacity:1;

  transform:none;

}

/* =========================================================
   UTILITIES
========================================================= */

.text-center{

  text-align:center;

}

.mt-0{
  margin-top:0;
}

.mb-0{
  margin-bottom:0;
}

.w-100{
  width:100%;
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width:1024px){

  .hero-grid,
  .about-grid{

    grid-template-columns:1fr;

    gap:50px;

  }

  .value-grid{

    grid-template-columns:
    repeat(2,1fr);

  }

  .post-grid{

    grid-template-columns:
    repeat(2,1fr);

  }

  .community-grid{

    grid-template-columns:
    repeat(2,1fr);

  }

  .footer-grid{

    grid-template-columns:
    repeat(2,1fr);

  }

}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width:768px){

  .section{

    padding:90px 0;

  }

  .site-header .container{

    min-height:75px;

  }

  .brand img{

    height:52px;

  }

  .menu-toggle{

    display:block;

    z-index:1001;

  }

  .main-nav{

    position:fixed;

    top:0;
    right:-100%;

    width:300px;

    height:100vh;

    background:#0a0a0a;

    flex-direction:column;

    justify-content:center;

    gap:30px;

    transition:.4s ease;

    border-left:
    1px solid var(--border);

  }

  .main-nav.active{

    right:0;

  }

  .main-nav ul{

    flex-direction:column;

    text-align:center;

  }

  .hero{

    min-height:auto;

    padding-top:140px;
    padding-bottom:100px;

  }

  .hero-actions{

    flex-direction:column;

  }

  .hero-actions .btn{

    width:100%;

  }

  .value-grid,
  .trust-grid,
  .post-grid,
  .community-grid{

    grid-template-columns:1fr;

  }

  .support-box{

    padding:45px 25px;

  }

  .support-actions{

    flex-direction:column;

  }

  .support-actions .btn{

    width:100%;

  }

  .footer-grid{

    grid-template-columns:1fr;

  }

  .roadmap-timeline::before{

    left:40px;

  }

  .roadmap-item{

    grid-template-columns:
    80px
    1fr;

    gap:20px;

  }

  .roadmap-year{

    width:55px;
    height:55px;

    font-size:.85rem;

  }

}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width:480px){

  .container{

    padding-left:18px;
    padding-right:18px;

  }

  h1{

    font-size:2.5rem;

  }

  h2{

    font-size:1.9rem;

  }

}

#mainNav a.active{

  color:var(--gold);

}

/* =========================================================
   HERO VISUAL V2.1
========================================================= */

.hero-content h1 span{

  display:block;

  margin-top:15px;

  font-size:clamp(1.1rem,2vw,1.8rem);

  color:var(--gold);

  font-weight:600;

}

.hero-visual{

  position:relative;

  display:flex;

  align-items:center;
  justify-content:center;

}

.hero-image-card{

  position:relative;

  z-index:5;

  border-radius:32px;

  overflow:hidden;

  border:1px solid var(--border);

  background:var(--surface);

  box-shadow:var(--shadow);

}

.hero-image-card img{

  display:block;

  width:100%;
  height:auto;

}

.hero-orb{

  position:absolute;

  border-radius:50%;

  filter:blur(80px);

}

.hero-orb-1{

  width:250px;
  height:250px;

  background:
  rgba(212,175,55,.25);

  top:10%;
  left:10%;

}

.hero-orb-2{

  width:220px;
  height:220px;

  background:
  rgba(77,163,255,.25);

  right:0;
  bottom:0;

}

/* =========================================================
   ABOUT V2.2
========================================================= */

.about-grid{

  display:grid;

  grid-template-columns:
  1fr
  1fr;

  gap:70px;

  align-items:center;

}

.about-image{

  position:relative;

}

.about-image img{

  width:100%;

  border-radius:30px;

  border:1px solid var(--border);

  box-shadow:var(--shadow);

}

.about-content h2{

  margin-bottom:25px;

}

.about-content p{

  margin-bottom:20px;

}

.about-content .btn{

  margin-top:10px;

}

/* =========================================================
   COMMUNITY V2.3
========================================================= */

.community-preview{

  display:grid;

  grid-template-columns:
  1fr
  1fr;

  gap:70px;

  align-items:center;

}

.community-content h2{

  margin-bottom:25px;

}

.community-content p{

  margin-bottom:20px;

}

.community-features{

  display:grid;

  gap:15px;

  margin:35px 0;

}

.community-feature{

  padding:16px 20px;

  border:1px solid var(--border);

  border-radius:16px;

  background:
  rgba(255,255,255,.02);

}

.community-image img{

  width:100%;

  border-radius:30px;

  border:1px solid var(--border);

  box-shadow:var(--shadow);

}

/* =========================================================
   FAQ
========================================================= */

.faq-wrapper{

  max-width:900px;

  margin:0 auto;

}

.faq-item{

  background:var(--surface);

  border:1px solid var(--border);

  border-radius:20px;

  margin-bottom:20px;

  overflow:hidden;

}

.faq-item summary{

  cursor:pointer;

  padding:24px 30px;

  font-weight:700;

  list-style:none;

  position:relative;

}

.faq-item summary::-webkit-details-marker{

  display:none;

}

.faq-item summary::after{

  content:"+";

  position:absolute;

  right:30px;

  top:50%;

  transform:translateY(-50%);

  color:var(--gold);

  font-size:1.4rem;

}

.faq-item[open] summary::after{

  content:"−";

}

.faq-item p{

  padding:0 30px 25px;

}

/* =========================================================
   EVENT PREVIEW V2.6
========================================================= */

.event-grid{

  display:grid;

  grid-template-columns:
  repeat(3,1fr);

  gap:30px;

}

.event-card{

  background:var(--surface);

  border:1px solid var(--border);

  border-radius:24px;

  overflow:hidden;

  transition:var(--transition);

}

.event-card:hover{

  transform:translateY(-8px);

  border-color:
  rgba(212,175,55,.45);

}

.event-image img{

  width:100%;

  display:block;

}

.event-content{

  padding:28px;

}

.event-date{

  display:inline-block;

  margin-bottom:15px;

  color:var(--gold);

  font-size:.85rem;

  font-weight:700;

  letter-spacing:1px;

}

.event-content h3{

  margin-bottom:15px;

}

.event-link{

  display:inline-block;

  margin-top:18px;

  color:var(--gold);

  font-weight:700;

}

.section-cta{

  text-align:center;

  margin-top:50px;

}

/* =========================================================
   NEWS PREVIEW V2.7
========================================================= */

.news-grid{

  display:grid;

  grid-template-columns:
  repeat(3,1fr);

  gap:30px;

}

.news-card{

  background:var(--surface);

  border:1px solid var(--border);

  border-radius:24px;

  overflow:hidden;

  transition:var(--transition);

}

.news-card:hover{

  transform:translateY(-8px);

  border-color:
  rgba(212,175,55,.45);

}

.news-image img{

  width:100%;

  display:block;

}

.news-content{

  padding:28px;

}

.news-category{

  display:inline-block;

  margin-bottom:15px;

  color:var(--gold);

  font-size:.85rem;

  font-weight:700;

  letter-spacing:1px;

}

.news-content h3{

  margin-bottom:15px;

}

.news-link{

  display:inline-block;

  margin-top:18px;

  color:var(--gold);

  font-weight:700;

}

/* =========================================================
   HERO PREMIUM BACKGROUND V2.8
========================================================= */

.hero{

  position:relative;

  overflow:hidden;

}

.hero-background{

  position:absolute;

  inset:0;

  pointer-events:none;

  z-index:0;

}

.hero-content,
.hero-visual{

  position:relative;

  z-index:5;

}

/* =========================================================
   GRID
========================================================= */

.hero-grid-pattern{

  position:absolute;

  inset:0;

  background-image:

  linear-gradient(
    rgba(255,255,255,.03) 1px,
    transparent 1px
  ),

  linear-gradient(
    90deg,
    rgba(255,255,255,.03) 1px,
    transparent 1px
  );

  background-size:
  60px 60px;

  mask-image:
  radial-gradient(
    circle at center,
    black,
    transparent 85%
  );

}

/* =========================================================
   GLOW
========================================================= */

.hero-glow{

  position:absolute;

  border-radius:50%;

  filter:blur(120px);

}

.hero-glow-1{

  width:500px;
  height:500px;

  background:
  rgba(212,175,55,.12);

  left:-150px;
  top:-100px;

}

.hero-glow-2{

  width:450px;
  height:450px;

  background:
  rgba(77,163,255,.14);

  right:-100px;
  bottom:-100px;

}

/* =========================================================
   PARTICLES
========================================================= */

.hero-particles span{

  position:absolute;

  width:4px;
  height:4px;

  border-radius:50%;

  background:var(--gold);

  opacity:.35;

  animation:
  floatParticle
  12s linear infinite;

}

.hero-particles span:nth-child(1){

  left:10%;
  top:20%;

}

.hero-particles span:nth-child(2){

  left:25%;
  top:70%;

  animation-delay:2s;

}

.hero-particles span:nth-child(3){

  left:50%;
  top:35%;

  animation-delay:4s;

}

.hero-particles span:nth-child(4){

  left:70%;
  top:60%;

  animation-delay:6s;

}

.hero-particles span:nth-child(5){

  left:85%;
  top:25%;

  animation-delay:8s;

}

.hero-particles span:nth-child(6){

  left:90%;
  top:80%;

  animation-delay:10s;

}

@keyframes floatParticle{

  0%{

    transform:
    translateY(0);

    opacity:.15;

  }

  50%{

    transform:
    translateY(-40px);

    opacity:.5;

  }

  100%{

    transform:
    translateY(-80px);

    opacity:0;

  }

}

/* =========================================================
   404 PAGE
========================================================= */

.error-page{

  min-height:100vh;

}

.error-hero{

  padding:180px 0;

  text-align:center;

}

.error-badge{

  display:inline-block;

  padding:12px 20px;

  border-radius:999px;

  border:1px solid var(--border);

  color:var(--gold);

  margin-bottom:25px;

}

.error-hero h1{

  font-size:clamp(2.5rem,6vw,5rem);

  margin-bottom:25px;

}

.error-hero p{

  max-width:700px;

  margin:0 auto 40px;

}

.error-actions{

  display:flex;

  gap:20px;

  justify-content:center;

  flex-wrap:wrap;

}

.quick-links{

  margin-top:60px;

  display:flex;

  justify-content:center;

  gap:25px;

  flex-wrap:wrap;

}

.quick-links a{

  color:var(--gold);

}

/* =========================================================
   ABOUT PAGE FOUNDATION
========================================================= */

.page-section{
  padding:100px 0;
}

.page-section-sm{
  padding:80px 0;
}

.section-header{
  text-align:center;
  max-width:800px;
  margin:0 auto 60px;
}

.section-header h2{
  margin-bottom:20px;
}

.section-header p{
  color:var(--muted);
}

.two-column{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;
}

.about-image img{
  width:100%;
  display:block;
  border-radius:24px;
}

.about-content p{
  margin-bottom:20px;
}

@media (max-width:992px){

  .two-column{
    grid-template-columns:1fr;
  }

}