:root {
  --green: #00E676;
  --green-dark: #00C853;
  --yellow: #FFD600;
  --red: #FF3D57;
  --blue: #448AFF;
  --dark: #060A0F;
  --dark2: #0C1219;
  --dark3: #131C28;
  --dark4: #1A2535;
  --gray: #7A8BA8;
  --gray2: #3A4A60;
  --white: #EEF3FF;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { background:var(--dark); color:var(--white); font-family:'Barlow',sans-serif; overflow-x:hidden; }
::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-track { background:var(--dark2); }
::-webkit-scrollbar-thumb { background:var(--dark4); border-radius:2px; }

/* ========== NAV ========== */
nav {
  position:fixed; top:0; left:0; right:0; z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 48px; height:62px;
  background:rgba(6,10,15,0.85);
  border-bottom:1px solid rgba(255,255,255,0.05);
  backdrop-filter:blur(20px);
  transition:all 0.3s;
}
.logo { font-family:'Bebas Neue',cursive; font-size:30px; letter-spacing:4px; color:var(--green); text-shadow:0 0 30px rgba(0,230,118,0.5); }
.logo span { color:var(--white); }
.nav-links { display:flex; gap:32px; list-style:none; }
.nav-links a { color:var(--gray); text-decoration:none; font-family:'Barlow Condensed',sans-serif; font-size:14px; font-weight:700; letter-spacing:1px; text-transform:uppercase; transition:color 0.2s; }
.nav-links a:hover { color:var(--white); }
.nav-ctas { display:flex; gap:10px; }
.btn { padding:9px 22px; border-radius:7px; font-family:'Barlow Condensed',sans-serif; font-size:13px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; cursor:pointer; border:none; transition:all 0.2s; }
.btn-ghost { background:transparent; color:var(--gray); border:1px solid rgba(255,255,255,0.12); }
.btn-ghost:hover { color:var(--white); border-color:rgba(255,255,255,0.3); }
.btn-green { background:var(--green); color:var(--dark); box-shadow:0 4px 20px rgba(0,230,118,0.3); }
.btn-green:hover { background:var(--green-dark); transform:translateY(-1px); box-shadow:0 8px 28px rgba(0,230,118,0.4); }
.btn-large { padding:16px 40px; font-size:15px; letter-spacing:2px; border-radius:8px; }

/* ========== HERO ========== */
.hero {
  min-height:100vh; position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; overflow:hidden;
  padding:120px 24px 80px;
}

/* background layers */
.hero-bg {
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(0,230,118,0.08) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 80% 80%, rgba(255,214,0,0.04) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 20% 60%, rgba(68,138,255,0.04) 0%, transparent 60%);
}
.hero-grid {
  position:absolute; inset:0; opacity:0.025;
  background-image:
    linear-gradient(rgba(0,230,118,1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,230,118,1) 1px, transparent 1px);
  background-size:80px 80px;
}
.hero-field {
  position:absolute; bottom:-100px; left:50%; transform:translateX(-50%);
  width:700px; height:500px; border:1px solid rgba(0,230,118,0.05);
  border-radius:50%; pointer-events:none;
}
.hero-field::before {
  content:''; position:absolute; inset:40px;
  border:1px solid rgba(0,230,118,0.04); border-radius:50%;
}

/* floating cards */
.float-card {
  position:absolute;
  right:8%;
  background:rgba(12,18,25,0.9);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:12px; padding:12px 16px;
  backdrop-filter:blur(12px);
  animation:float 6s ease-in-out infinite;
  display:flex; align-items:center; gap:10px;
}
.float-1 { top:12%; animation-delay:0s; }
.float-2 { top:22%; animation-delay:1.5s; }
.float-3 { top:32%; animation-delay:3s; }
.float-4 { top:42%; animation-delay:0.8s; }

@keyframes float {
  0%,100% { transform:translateY(0); }
  50% { transform:translateY(-12px); }
}
.fc-icon { font-size:24px; }
.fc-info {}
.fc-name { font-family:'Barlow Condensed',sans-serif; font-size:13px; font-weight:800; color:var(--white); }
.fc-detail { font-size:11px; color:var(--gray); font-family:'Barlow Condensed',sans-serif; }
.fc-badge {
  font-family:'Barlow Condensed',sans-serif; font-size:10px; font-weight:700;
  letter-spacing:1px; padding:3px 8px; border-radius:6px; text-transform:uppercase;
}

/* hero content */
.hero-eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(0,230,118,0.08); border:1px solid rgba(0,230,118,0.2);
  color:var(--green); font-family:'Barlow Condensed',sans-serif;
  font-size:12px; font-weight:700; letter-spacing:2px; text-transform:uppercase;
  padding:6px 18px; border-radius:20px; margin-bottom:28px;
  animation: fadeUp 0.6s ease-out both;
}
.hero-title {
  font-family:'Bebas Neue',cursive;
  font-size:clamp(60px, 10vw, 130px);
  line-height:0.92; letter-spacing:2px;
  margin-bottom:12px;
  animation: fadeUp 0.6s ease-out 0.1s both;
}
.hero-title .accent { color:var(--green); text-shadow:0 0 60px rgba(0,230,118,0.4); }
.hero-title .line2 { color:rgba(238,243,255,0.85); }

.hero-sub {
  font-size:clamp(16px,2vw,20px); color:var(--gray);
  max-width:580px; line-height:1.6; margin:20px auto 40px;
  animation: fadeUp 0.6s ease-out 0.2s both;
}
.hero-sub strong { color:var(--white); }

.hero-ctas {
  display:flex; gap:14px; justify-content:center; flex-wrap:wrap;
  margin-bottom:50px;
  animation: fadeUp 0.6s ease-out 0.3s both;
}

.hero-social-proof {
  display:flex; align-items:center; gap:24px; justify-content:center;
  flex-wrap:wrap;
  animation: fadeUp 0.6s ease-out 0.4s both;
}
.sp-item {
  display:flex; align-items:center; gap:8px;
  font-family:'Barlow Condensed',sans-serif; font-size:13px; font-weight:600; color:var(--gray);
}
.sp-num { font-family:'Bebas Neue',cursive; font-size:24px; color:var(--white); }
.sp-sep { color:var(--gray2); font-size:20px; }

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

/* ========== PROBLEM SECTION ========== */
.section { padding:100px 48px; max-width:1200px; margin:0 auto; }
.section-eyebrow {
  font-family:'Barlow Condensed',sans-serif; font-size:12px; font-weight:700;
  letter-spacing:3px; text-transform:uppercase; color:var(--green); margin-bottom:16px;
}
.section-title {
  font-family:'Bebas Neue',cursive; font-size:clamp(36px,5vw,64px);
  letter-spacing:1px; line-height:1; margin-bottom:20px;
}
.section-sub { font-size:17px; color:var(--gray); max-width:560px; line-height:1.7; }

.problem-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:56px;
}
.problem-card {
  background:var(--dark2); border:1px solid rgba(255,255,255,0.06);
  border-radius:14px; padding:28px;
  transition:all 0.25s; cursor:default;
  position:relative; overflow:hidden;
}
.problem-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, var(--red), transparent);
  opacity:0; transition:opacity 0.25s;
}
.problem-card:hover { border-color:rgba(255,61,87,0.2); transform:translateY(-4px); }
.problem-card:hover::before { opacity:1; }
.problem-emoji { font-size:36px; margin-bottom:16px; }
.problem-title { font-family:'Barlow Condensed',sans-serif; font-size:18px; font-weight:800; letter-spacing:0.5px; margin-bottom:8px; }
.problem-text { font-size:14px; color:var(--gray); line-height:1.65; }

/* ========== SOLUTION ========== */
.solution-wrap {
  background:linear-gradient(135deg, var(--dark2) 0%, var(--dark) 100%);
  border-top:1px solid rgba(255,255,255,0.05);
  border-bottom:1px solid rgba(255,255,255,0.05);
  padding:100px 0;
}
.solution-inner { max-width:1200px; margin:0 auto; padding:0 48px; }
.solution-grid { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.solution-features { display:flex; flex-direction:column; gap:20px; margin-top:40px; }
.sol-feature {
  display:flex; gap:16px; align-items:flex-start;
  padding:18px; border-radius:12px; background:var(--dark3);
  border:1px solid rgba(255,255,255,0.05);
  transition:all 0.2s; cursor:default;
}
.sol-feature:hover { border-color:rgba(0,230,118,0.15); background:var(--dark4); }
.sol-icon {
  width:44px; height:44px; border-radius:10px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:22px;
  background:rgba(0,230,118,0.08); border:1px solid rgba(0,230,118,0.15);
}
.sol-title { font-family:'Barlow Condensed',sans-serif; font-size:16px; font-weight:800; letter-spacing:0.5px; margin-bottom:4px; }
.sol-text { font-size:13px; color:var(--gray); line-height:1.6; }

/* MOCK SCREEN */
.mock-screen {
  background:var(--dark3); border:1px solid rgba(255,255,255,0.1);
  border-radius:16px; overflow:hidden;
  box-shadow:0 40px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(0,230,118,0.05);
}
.mock-bar {
  background:var(--dark4); padding:10px 16px;
  display:flex; align-items:center; gap:8px;
  border-bottom:1px solid rgba(255,255,255,0.05);
}
.mock-dot { width:10px; height:10px; border-radius:50%; }
.mock-content { padding:20px; }
.mock-player {
  display:flex; gap:12px; align-items:center;
  background:var(--dark2); border:1px solid rgba(255,255,255,0.07);
  border-radius:10px; padding:12px; margin-bottom:10px;
  transition:all 0.2s;
}
.mock-player:hover { border-color:rgba(0,230,118,0.2); }
.mock-av { width:42px; height:42px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; }
.mock-pname { font-family:'Barlow Condensed',sans-serif; font-size:15px; font-weight:800; }
.mock-psub { font-size:11px; color:var(--gray); font-family:'Barlow Condensed',sans-serif; }
.mock-prating { margin-left:auto; font-family:'Bebas Neue',cursive; font-size:22px; color:var(--yellow); }
.mock-tag {
  font-family:'Barlow Condensed',sans-serif; font-size:10px; font-weight:700;
  letter-spacing:1px; padding:2px 8px; border-radius:4px; text-transform:uppercase;
}

/* ========== USER TYPES ========== */
.types-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:56px; }
.type-card {
  background:var(--dark2); border:1px solid rgba(255,255,255,0.06);
  border-radius:16px; padding:28px 22px; text-align:center;
  transition:all 0.25s; cursor:default; position:relative; overflow:hidden;
}
.type-card::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:3px;
  border-radius:0 0 16px 16px; opacity:0; transition:opacity 0.25s;
}
.type-card.jugador::after { background:var(--green); }
.type-card.equipo::after { background:var(--yellow); }
.type-card.coach::after { background:var(--purple, #AA44FF); }
.type-card.creator::after { background:var(--blue); }
.type-card:hover { transform:translateY(-6px); border-color:rgba(255,255,255,0.12); }
.type-card:hover::after { opacity:1; }
.type-emoji { font-size:44px; margin-bottom:16px; }
.type-title { font-family:'Bebas Neue',cursive; font-size:24px; letter-spacing:1px; margin-bottom:8px; }
.type-text { font-size:13px; color:var(--gray); line-height:1.65; }
.type-list { margin-top:14px; text-align:left; display:flex; flex-direction:column; gap:6px; }
.type-list-item { font-size:12px; color:var(--gray); display:flex; align-items:flex-start; gap:6px; font-family:'Barlow Condensed',sans-serif; font-weight:600; }
.type-list-item::before { content:'→'; color:var(--green); font-size:12px; flex-shrink:0; margin-top:1px; }

/* ========== HOW IT WORKS ========== */
.steps-wrap {
  background:var(--dark2);
  border-top:1px solid rgba(255,255,255,0.05);
  border-bottom:1px solid rgba(255,255,255,0.05);
  padding:100px 0;
}
.steps-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:56px; position:relative; }
.steps-grid::before {
  content:''; position:absolute; top:32px; left:12.5%; right:12.5%; height:1px;
  background:linear-gradient(90deg, transparent, rgba(0,230,118,0.3), rgba(0,230,118,0.3), rgba(0,230,118,0.3), transparent);
}
.step { text-align:center; padding:0 20px; }
.step-num {
  width:64px; height:64px; border-radius:50%; margin:0 auto 20px;
  display:flex; align-items:center; justify-content:center;
  font-family:'Bebas Neue',cursive; font-size:28px;
  background:var(--dark3); border:2px solid rgba(0,230,118,0.3);
  color:var(--green); position:relative; z-index:1;
  box-shadow:0 0 24px rgba(0,230,118,0.15);
}
.step-icon { font-size:28px; }
.step-title { font-family:'Barlow Condensed',sans-serif; font-size:17px; font-weight:800; letter-spacing:0.5px; margin-bottom:8px; }
.step-text { font-size:13px; color:var(--gray); line-height:1.65; }

/* ========== STATS / MARKET ========== */
.market-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:56px; }
.market-card {
  background:var(--dark2); border:1px solid rgba(255,255,255,0.06);
  border-radius:14px; padding:28px; text-align:center;
  transition:background 0.2s;
}
.market-card:hover { background:var(--dark3); }
.market-val { font-family:'Bebas Neue',cursive; font-size:52px; line-height:1; color:var(--green); margin-bottom:6px; }
.market-val.y { color:var(--yellow); }
.market-val.b { color:var(--blue); }
.market-lbl { font-family:'Barlow Condensed',sans-serif; font-size:13px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--gray); margin-bottom:6px; }
.market-sub { font-size:12px; color:var(--gray2); line-height:1.5; }

/* ========== TESTIMONIALS ========== */
.testimonials-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:56px; }
.testi-card {
  background:var(--dark2); border:1px solid rgba(255,255,255,0.06);
  border-radius:14px; padding:24px;
  transition:all 0.2s;
}
.testi-card:hover { border-color:rgba(0,230,118,0.15); transform:translateY(-3px); }
.testi-stars { color:var(--yellow); font-size:14px; letter-spacing:2px; margin-bottom:14px; }
.testi-text { font-size:14px; color:rgba(238,243,255,0.8); line-height:1.7; margin-bottom:18px; font-style:italic; }
.testi-author { display:flex; align-items:center; gap:10px; }
.testi-av { width:36px; height:36px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:18px; }
.testi-name { font-family:'Barlow Condensed',sans-serif; font-size:14px; font-weight:800; }
.testi-role { font-size:12px; color:var(--gray); font-family:'Barlow Condensed',sans-serif; }

/* ========== CTA FINAL ========== */
.cta-section {
  position:relative; overflow:hidden;
  padding:120px 48px; text-align:center;
  background:linear-gradient(135deg, #060A0F 0%, #0A1A0F 50%, #060A0F 100%);
  border-top:1px solid rgba(255,255,255,0.05);
}
.cta-glow {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:600px; height:400px; border-radius:50%;
  background:radial-gradient(ellipse, rgba(0,230,118,0.08) 0%, transparent 70%);
  pointer-events:none;
}
.cta-title { font-family:'Bebas Neue',cursive; font-size:clamp(48px,8vw,100px); line-height:0.95; letter-spacing:2px; margin-bottom:20px; position:relative; }
.cta-sub { font-size:18px; color:var(--gray); max-width:500px; margin:0 auto 40px; line-height:1.6; position:relative; }
.cta-btns { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; position:relative; }

/* ========== FOOTER ========== */
footer {
  padding:40px 48px;
  border-top:1px solid rgba(255,255,255,0.05);
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:16px;
}
.footer-logo { font-family:'Bebas Neue',cursive; font-size:22px; letter-spacing:3px; color:var(--green); }
.footer-logo span { color:var(--gray2); }
.footer-links { display:flex; gap:24px; }
.footer-links a { color:var(--gray2); text-decoration:none; font-family:'Barlow Condensed',sans-serif; font-size:13px; font-weight:600; letter-spacing:1px; transition:color 0.2s; }
.footer-links a:hover { color:var(--gray); }
.footer-copy { font-size:12px; color:var(--gray2); font-family:'Barlow Condensed',sans-serif; }

/* ========== RESPONSIVE ========== */
@media(max-width:900px) {
  nav { padding:0 20px; }
  .nav-links { display:none; }
  .section { padding:70px 24px; }
  .problem-grid { grid-template-columns:1fr; }
  .types-grid { grid-template-columns:repeat(2,1fr); }
  .steps-grid { grid-template-columns:repeat(2,1fr); }
  .steps-grid::before { display:none; }
  .market-grid { grid-template-columns:repeat(2,1fr); }
  .testimonials-grid { grid-template-columns:1fr; }
  .solution-grid { grid-template-columns:1fr; }
  .float-card { display:none; }
  footer { flex-direction:column; text-align:center; }
}