:root{
  --bg:#000;
  --panel:#11131b;
  --panel-2:#0f1118;
  --text:#e7e9ee;
  --muted:#9aa3b2;
  --brand-1:#6bffda;
  --brand-2:#a86bff;
  --accent: linear-gradient(90deg, #FFD700, #FFB000);
  --glass: rgba(255,255,255,0.06);
  --border: rgba(255,255,255,0.12);
  --up:#36d399;
  --down:#f87272;
}

*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0; color:var(--text); background:#000;
  font: 14px/1.6 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji";
  overflow-x:hidden; /* allow scrolling vertically */
}

/* Background canvas */
#bg{
  position:fixed; inset:0; z-index:0;
  display:none; /* disable gradient/particle canvas */
}

/* Nav */
.nav{
  position: sticky; top:0; z-index:10; display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:12px 20px; backdrop-filter:saturate(140%) blur(8px);
  background: linear-gradient(180deg, rgba(15,17,24,.7), rgba(15,17,24,.4));
  border-bottom:1px solid var(--border);
}
.brand{ display:flex; align-items:center; gap:10px; color:var(--text); text-decoration:none; font-weight:700; letter-spacing:.4px }
.brand span{ background:var(--accent); -webkit-background-clip:text; background-clip:text; color:transparent; font-size:18px }
.nav nav{ display:none }
.nav nav a{ color:var(--muted); text-decoration:none; padding:6px 8px; border-radius:8px }
.nav nav a:hover{ color:var(--text); background:var(--glass) }
.btn{
  border:1px solid var(--border);
  background:var(--panel);
  color:var(--text);
  padding:10px 14px;
  border-radius:10px;
  cursor:default;            /* was pointer */
}
.btn.primary{ background: linear-gradient(90deg, rgba(255,215,0,.25), rgba(255,176,0,.25)); border-color:transparent }
.btn.ghost{ background: transparent }
.btn.xl{ padding:14px 18px; font-size:16px }

/* Hero */
.hero{ position:relative; z-index:1; display:grid; grid-template-columns: 1.2fr 1fr; gap:48px; align-items:center; padding:80px 20px 60px; max-width:1200px; margin:0 auto; min-height: calc(100dvh - 64px) }
.hero h1{ font-size:52px; line-height:1.1; margin:0 0 16px; font-weight:800; color:var(--text) }
.hero .sub{ color:var(--muted); max-width:56ch; font-size:16px; line-height:1.7 }
.accent{ background:var(--accent); -webkit-background-clip:text; background-clip:text; color:transparent }
.cta{ display:flex; gap:16px; margin:24px 0 16px }
.hero-points{ display:flex; gap:20px; list-style:none; padding:0; margin:16px 0 0 }
.hero-points li{ color:var(--muted); font-size:14px }

.hero-frame{ 
  position:relative;
  display:flex; 
  justify-content:center; 
  align-items:center; 
  perspective:1000px;
}
.floating-container{
  animation: containerFloat 12s ease-in-out infinite;
}
.hero-video{
  width:100%;
  max-width:320px;
  height:320px;
  display:block;
  object-fit:cover;
  border-radius:24px;
  background: linear-gradient(135deg, rgba(255,215,0,.1), rgba(255,255,255,.06));
  box-shadow: 
    0 25px 80px rgba(0,0,0,.5), 
    0 0 0 1px rgba(255,255,255,.1),
    0 0 40px rgba(255,215,0,.2);
  transform: rotateY(-15deg) rotateX(5deg) translateY(0);
  animation: heroFloat 10s ease-in-out infinite;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
}
.hero-video:hover{
  transform: rotateY(-10deg) rotateX(2deg) translateY(-8px);
  box-shadow: 
    0 35px 100px rgba(0,0,0,.6), 
    0 0 0 1px rgba(255,255,255,.15),
    0 0 60px rgba(255,215,0,.3);
}
.hero-video-fallback{ display:none; width:100%; max-width:320px; height:auto; border-radius:24px; box-shadow: 0 20px 60px rgba(0,0,0,.4), inset 0 0 0 1px rgba(255,255,255,.08) }

.reveal{ opacity:0; transform: translateY(14px); animation: reveal 700ms ease-out forwards }
.reveal:nth-child(1){ animation-delay: 100ms }
.reveal:nth-child(2){ animation-delay: 250ms }

@keyframes reveal{ to{ opacity:1; transform: translateY(0) } }
@keyframes pulse{ 0%,100%{ box-shadow: 0 10px 30px rgba(0,0,0,.35), 0 0 0 0 rgba(255,215,0,.25) } 50%{ box-shadow: 0 18px 40px rgba(0,0,0,.45), 0 0 0 12px rgba(255,215,0,.08) } }

/* Remove force-hide of sections to allow new content */
/* .features,.grid2,.trending,.trade,.portfolio,.footer{ display:none !important } */

/* Generic section layout */
.section{ max-width:1200px; margin:0 auto; padding:48px 20px }
.section.narrow{ max-width:1000px }
.center{ text-align:center }
.kicker{ color:var(--muted); text-transform:uppercase; letter-spacing:.12em; font-size:12px; animation: slideInDown 800ms ease-out both }
.h1{ font-size:48px; line-height:1.1; margin:12px 0 8px; font-weight:800; color:var(--text); animation: typewriter 1.2s ease-out both }
.lead{ color:var(--muted); max-width:70ch; margin:0 auto; font-size:16px; line-height:1.6; animation: fadeInUp 900ms ease-out both }

/* Text animations and effects */
.animated-text{ 
  animation: slideInDown 800ms ease-out both, shimmer 3s ease-in-out infinite 2s; 
}
.gradient-text{ 
  background: linear-gradient(135deg, var(--text), var(--accent), var(--text));
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gradientShift 4s ease-in-out infinite, typewriter 1.2s ease-out both;
}
.animated-fade{
  animation: fadeInUp 900ms ease-out both 0.3s;
}

/* Button animations */
.pulse-btn{
  animation: buttonPulse 2s ease-in-out infinite;
  position: relative;
  overflow: hidden;
}
.pulse-btn::before{
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.5s;
}
.pulse-btn:hover::before{
  left: 100%;
}
.animate-hover{
  transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1);
}
.animate-hover:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(255,215,0,.2);
}

@keyframes buttonPulse{
  0%, 100%{ transform: scale(1); box-shadow: 0 0 0 0 rgba(255,215,0,.4) }
  50%{ transform: scale(1.02); box-shadow: 0 0 0 8px rgba(255,215,0,.0) }
}
@keyframes shimmer{
  0%, 100%{ opacity: 1 }
  50%{ opacity: 0.8 }
}
@keyframes gradientShift{
  0%, 100%{ background-position: 0% 50% }
  50%{ background-position: 100% 50% }
}
@keyframes containerFloat{
  0%, 100%{ transform: translateY(0px) rotate(0deg) }
  25%{ transform: translateY(-10px) rotate(1deg) }
  50%{ transform: translateY(-20px) rotate(0deg) }
  75%{ transform: translateY(-10px) rotate(-1deg) }
}
@keyframes heroFloat{
  0%, 100%{ transform: rotateY(-15deg) rotateX(5deg) translateY(0) }
  33%{ transform: rotateY(-12deg) rotateX(3deg) translateY(-8px) }
  66%{ transform: rotateY(-18deg) rotateX(7deg) translateY(-4px) }
}

/* Stats */
.stats{ display:grid; grid-template-columns: repeat(3,1fr); gap:20px; margin-top:32px }
.stat{ 
  background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.03)); 
  border:1px solid var(--border); 
  border-radius:20px; 
  padding:24px; 
  text-align:center; 
  animation: reveal 700ms ease-out both, glow 4s ease-in-out infinite;
  transition: transform 0.3s ease;
}
.stat:hover{ transform: translateY(-4px) }
.stat span{ color:var(--muted); font-size:13px; text-transform:uppercase; letter-spacing:.08em }
.stat b{ display:block; font-size:32px; margin-top:8px; background:var(--accent); -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:800 }

/* Products */
.cards{ display:flex; justify-content:center; margin-top:32px }
.card.product{ 
  position:relative; 
  background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.03)); 
  border:1px solid var(--border); 
  border-radius:20px; 
  padding:32px; 
  overflow:hidden; 
  animation: reveal 700ms ease-out both, cardFloat 8s ease-in-out infinite;
  max-width:400px;
  text-align:center;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1);
}
.card.product:hover{ 
  transform: translateY(-12px) scale(1.02);
  box-shadow: 0 25px 80px rgba(0,0,0,.3), 0 0 40px rgba(255,215,0,.2);
}
.card.product.featured{
  border: 2px solid rgba(255,215,0,.4);
  background: linear-gradient(135deg, rgba(255,215,0,.12), rgba(255,255,255,.06));
  box-shadow: 0 15px 50px rgba(0,0,0,.2), 0 0 30px rgba(255,215,0,.15);
}
.card h3{ margin:8px 0 12px; font-size:24px; font-weight:700; color:var(--text) }
.card p{ color:var(--muted) }
.badge{ 
  font-size:12px; 
  padding:6px 12px; 
  border-radius:999px; 
  border:1px solid var(--border); 
  background:var(--glass); 
  text-transform:uppercase; 
  letter-spacing:.06em;
  animation: badgeGlow 3s ease-in-out infinite;
}

@keyframes cardFloat{
  0%, 100%{ transform: translateY(0) }
  50%{ transform: translateY(-6px) }
}
@keyframes badgeGlow{
  0%, 100%{ box-shadow: 0 0 0 0 rgba(255,215,0,.3) }
  50%{ box-shadow: 0 0 0 4px rgba(255,215,0,.1) }
}
.badge.soon{ background:rgba(255,215,0,.08); border-color:rgba(255,215,0,.3) }

/* Features why */
.features-why{ display:grid; grid-template-columns: repeat(3,1fr); gap:20px; margin-top:32px }
.feature{ 
  background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.03)); 
  border:1px solid var(--border); 
  border-radius:20px; 
  padding:24px; 
  animation: reveal 700ms ease-out both;
  transition: transform 0.3s ease;
}
.feature:hover{ transform: translateY(-4px) }
.feature h3{ margin:0 0 8px; font-size:20px; font-weight:700; color:var(--text) }
.feature p{ color:var(--muted); margin:8px 0 0; line-height:1.6 }

/* Shine animation utility */
.shine{
  position:relative;
  overflow:hidden;
}
.shine::after{
  content:""; position:absolute; inset:0 -120%; background: linear-gradient(75deg, transparent 0%, rgba(255,255,255,.08) 50%, transparent 100%);
  transform: translateX(-100%);
  animation: shine 3.2s ease-in-out infinite;
}
@keyframes shine{ 60%{ transform: translateX(0) } 100%{ transform: translateX(0) } }

/* Existing reveal/float/pulse animations are used */

/* Responsive */
@media (max-width: 1024px){
  .stats{ grid-template-columns: 1fr 1fr }
  .features-why{ grid-template-columns: 1fr 1fr }
  .h1{ font-size:40px }
}
@media (max-width: 640px){
  .h1{ font-size:32px }
  .stats{ grid-template-columns: 1fr }
  .features-why{ grid-template-columns: 1fr }
  .hero{ grid-template-columns: 1fr; padding:40px 16px; gap:24px; min-height: auto }
  .hero h1{ font-size:36px }
  .cta{ flex-direction:column }
  .cta .btn{ width:100%; text-align:center }
  .hero-frame{ justify-content:center }
  .hero-video{ display:none }
  .hero-video-fallback{ display:block; max-width:220px; margin:0 auto; animation: pulse 3s ease-in-out infinite }
  .section{ padding:32px 16px }
}