*{box-sizing:border-box}
:root{
  --bg:#040915;
  --panel:rgba(255,255,255,.075);
  --panel-2:rgba(255,255,255,.045);
  --stroke:rgba(255,255,255,.11);
  --text:#eef2ff;
  --muted:#bcc7e3;
  --gold:#ffbf3d;
  --gold-2:#ffd96a;
  --violet:#8b5cf6;
  --cyan:#52d2ff;
  --radius:30px;
  --shadow:0 24px 90px rgba(0,0,0,.38);
}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 18% 12%, rgba(255,191,61,.10), transparent 24%),
    radial-gradient(circle at 84% 16%, rgba(82,210,255,.11), transparent 24%),
    radial-gradient(circle at 70% 72%, rgba(139,92,246,.13), transparent 26%),
    linear-gradient(180deg,#030814 0%,#081120 55%,#030814 100%);
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
.wrap{width:min(1180px, calc(100% - 28px)); margin:0 auto}
.bg-grid{
  position:fixed; inset:0; pointer-events:none; opacity:.28;
  background-image:
    linear-gradient(rgba(121,145,193,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(121,145,193,.08) 1px, transparent 1px);
  background-size:42px 42px;
}
.bg-noise{
  position:fixed; inset:0; pointer-events:none; opacity:.06;
  background-image:radial-gradient(rgba(255,255,255,.5) 1px, transparent 1px);
  background-size:5px 5px;
}
.orb{
  position:fixed; width:30rem; height:30rem; border-radius:999px;
  filter:blur(95px); pointer-events:none; opacity:.24;
}
.orb-a{left:-10rem; top:-4rem; background:radial-gradient(circle, rgba(255,191,61,.95), rgba(255,191,61,0))}
.orb-b{right:-12rem; bottom:0; background:radial-gradient(circle, rgba(139,92,246,.95), rgba(139,92,246,0))}
.site-header{
  position:sticky; top:0; z-index:30;
  backdrop-filter:blur(18px);
  background:linear-gradient(180deg, rgba(4,9,22,.92), rgba(4,9,22,.72));
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav{
  min-height:90px;
  display:flex; align-items:center; justify-content:space-between;
}
.brand{display:flex; align-items:center; gap:14px}
.brand-logo{
  width:58px; height:58px; object-fit:cover; border-radius:18px;
  box-shadow:0 0 0 1px rgba(255,255,255,.12), 0 12px 30px rgba(0,0,0,.34);
}
.brand-copy{display:flex; flex-direction:column}
.brand-copy strong{font-size:1.7rem; letter-spacing:.22em}
.brand-copy span{color:var(--muted); margin-top:2px; font-size:1rem}
.desktop-nav{display:flex; gap:28px; color:#dfe6fd; font-weight:600}
.desktop-nav a:hover,.footer-links a:hover{color:#fff}
.menu-btn{
  display:none; width:60px; height:60px; border-radius:20px;
  border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.04);
  align-items:center; justify-content:center; flex-direction:column; gap:7px; cursor:pointer;
}
.menu-btn span{display:block; width:26px; height:2px; background:#fff; border-radius:99px}
.mobile-nav{display:none; padding:0 0 16px; grid-template-columns:1fr; gap:8px}
.mobile-nav.open{display:grid}
.mobile-nav a{
  padding:14px 16px; border-radius:16px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
}
.hero{
  min-height:calc(100vh - 90px);
  display:grid; grid-template-columns:1fr 1.02fr; gap:30px;
  align-items:center; padding:52px 0 74px;
}
.pill,.tag-row span{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 16px; border-radius:999px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12);
  color:#dbe4ff;
}
.hero h1{
  margin:18px 0 0;
  font-size:clamp(3rem, 7vw, 6.2rem);
  line-height:.93;
  letter-spacing:-.05em;
}
.hero p{
  margin:24px 0 0;
  max-width:700px;
  color:var(--muted);
  font-size:clamp(1.05rem,2vw,1.24rem);
  line-height:1.8;
}
.cta-row{display:flex; flex-wrap:wrap; gap:14px; margin-top:28px}
.btn{
  min-width:210px; padding:16px 22px; border-radius:18px;
  font-weight:800; text-align:center; transition:transform .2s ease, box-shadow .2s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{
  background:linear-gradient(135deg,var(--gold),var(--gold-2));
  color:#180f03; box-shadow:0 18px 40px rgba(255,191,61,.26);
}
.btn-secondary{
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.14);
}
.tag-row{display:flex; flex-wrap:wrap; gap:12px; margin-top:24px}
.card{
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid var(--stroke);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.hero-media{padding:18px}
.hero-media img,.media-card img,.meme-grid img{width:100%; border-radius:22px}
.section{padding:78px 0}
.section-head{max-width:860px; margin-bottom:28px}
.section-head h2{
  margin:16px 0 0;
  font-size:clamp(2.1rem, 4.8vw, 4rem);
  line-height:1.02;
  letter-spacing:-.04em;
}
.story-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
}
.story-grid .card{padding:28px}
.story-grid h3{margin:0 0 14px; font-size:1.38rem}
.story-grid p{margin:0; color:var(--muted); line-height:1.82; font-size:1.02rem}
.feature-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:center;
}
.feature-grid.reverse{grid-template-columns:1fr 1fr}
.media-card{padding:18px}
.copy-card{
  padding:14px 10px;
}
.copy-card h2{
  margin:18px 0 12px;
  font-size:clamp(2rem, 4.1vw, 3.4rem);
  line-height:1.05;
}
.copy-card p{
  margin:0;
  color:var(--muted);
  line-height:1.85;
  font-size:1.06rem;
  max-width:520px;
}
.meme-grid{
  display:grid; grid-template-columns:1.1fr .9fr .75fr; gap:20px; align-items:stretch;
}
.meme-grid .card{padding:16px}
.meme-tall{grid-row:span 2}
.quote-card{
  display:flex; flex-direction:column; justify-content:center; padding:28px !important;
}
.quote-card h3{font-size:2rem; line-height:1.04; margin:0 0 12px}
.quote-card p{margin:0; color:var(--muted); line-height:1.8}
.community{padding:34px}
.community h2{
  margin:18px 0 12px;
  font-size:clamp(2rem,4vw,3.2rem);
  line-height:1.04;
}
.community p{margin:0; color:var(--muted); line-height:1.8}
.community-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:24px;
}
.community-link{
  padding:24px; border-radius:22px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.10);
}
.community-link span{display:block; color:var(--muted); margin-bottom:8px}
.community-link strong{font-size:1.2rem; word-break:break-word}
.site-footer{
  padding:22px 0 52px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.footer-brand{display:flex; align-items:center; gap:14px}
.footer-brand img{width:50px; height:50px; border-radius:16px}
.footer-brand strong{display:block; letter-spacing:.18em; font-size:1.3rem}
.footer-brand span{display:block; color:var(--muted); margin-top:4px}
.footer-links{display:flex; gap:20px}
.reveal{
  opacity:0; transform:translateY(24px);
  transition:opacity .7s ease, transform .7s ease;
}
.reveal.show{opacity:1; transform:none}

@media (max-width:980px){
  .desktop-nav{display:none}
  .menu-btn{display:flex}
  .hero,.story-grid,.feature-grid,.meme-grid,.community-grid{grid-template-columns:1fr}
  .hero{min-height:auto}
  .meme-tall{grid-row:auto}
}

@media (max-width:640px){
  .wrap{width:min(100% - 24px, 1180px)}
  .nav{min-height:84px}
  .brand-logo{width:54px; height:54px}
  .brand-copy strong{font-size:1.45rem; letter-spacing:.18em}
  .brand-copy span{font-size:.95rem}
  .hero{padding:34px 0 52px}
  .hero h1{font-size:clamp(2.7rem, 15vw, 4.35rem)}
  .hero p{font-size:1rem; line-height:1.7}
  .btn{min-width:100%}
  .section{padding:62px 0}
  .story-grid .card,.community,.quote-card{padding:22px}
  .site-footer{flex-direction:column; align-items:flex-start}
}

.launch-banner{
width:100%;
text-align:center;
padding:14px 10px;
font-weight:800;
letter-spacing:.05em;
background:linear-gradient(90deg,#ffbf3d,#ffd96a);
color:#140c02;
font-family:Inter,system-ui;
}

.launch-top-banner{
width:100%;
text-align:center;
background:linear-gradient(90deg,#ffd700,#ffb300);
color:#1a1a1a;
font-weight:700;
padding:14px;
letter-spacing:1px;
font-size:15px;
position:sticky;
top:0;
z-index:999;
}


.social-icon-row{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:18px;
}
.social-pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:12px 16px;
  border-radius:999px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  color:#eef2ff;
  font-weight:700;
  transition:transform .2s ease, background .2s ease, border-color .2s ease;
}
.social-pill:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.2);
}
.social-glyph{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  font-size:14px;
  line-height:1;
}

.floating-telegram{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:1001;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 18px;
  border-radius:14px;
  background:linear-gradient(135deg,#ffbf3d,#ffd96a);
  color:#180f03;
  font-weight:800;
  box-shadow:0 18px 40px rgba(255,191,61,.28);
  transition:transform .2s ease, box-shadow .2s ease;
}
.floating-telegram:hover{
  transform:translateY(-2px);
  box-shadow:0 22px 46px rgba(255,191,61,.34);
}

@media (max-width:640px){
  .social-icon-row{
    gap:10px;
  }
  .social-pill{
    width:100%;
    justify-content:center;
  }
  .floating-telegram{
    right:12px;
    left:12px;
    bottom:12px;
    border-radius:16px;
  }
}

/* subtle hero glow */
.hero{
position:relative;
overflow:hidden;
}

.hero::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:radial-gradient(circle at center, rgba(255,215,0,0.15), transparent 60%);
pointer-events:none;
}

/* floating particles */
body::after{
content:"";
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:radial-gradient(circle, rgba(255,255,255,0.15) 1px, transparent 1px);
background-size:80px 80px;
opacity:0.08;
animation:moatFloat 120s linear infinite;
pointer-events:none;
}

@keyframes moatFloat{
0%{transform:translateY(0)}
100%{transform:translateY(-2000px)}
}