:root{
  --brand:#00dbde;
  --brand-hover:#00c5c7;
  --brand-active:#00afb1;
  --brand-soft-1:rgba(0,219,222,.06);
  --brand-soft-2:rgba(0,219,222,.12);
  --brand-soft-3:rgba(0,219,222,.2);
}

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

body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background:#0a0a0a;color:#fff;overflow-x:hidden;
}

/* Header Styles */
.header{
  background:rgba(10,10,10,.95);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--brand-soft-2);
  position:fixed;top:0;left:0;right:0;z-index:1000;padding:1rem 0;
}

.header-container{
  max-width:1400px;margin:0 auto;padding:0 2rem;display:flex;align-items:center;justify-content:space-between;
}

.logo{
  display:flex;align-items:center;gap:.5rem;font-size:1.5rem;font-weight:800;color:var(--brand);text-decoration:none;
}

.logo-icon{
  width:32px;height:32px;
  background:linear-gradient(135deg,var(--brand),var(--brand-hover));
  border-radius:8px;display:flex;align-items:center;justify-content:center;color:#000;font-weight:bold;font-size:1.2rem;
}

.nav-menu{display:flex;align-items:center;gap:2rem;list-style:none}

.nav-menu a{
  color:#e5e7eb;text-decoration:none;font-weight:500;transition:.3s ease;position:relative;
}
.nav-menu a:hover{color:var(--brand)}
.nav-menu a::after{
  content:'';position:absolute;bottom:-4px;left:0;width:0;height:2px;background:var(--brand);transition:width .3s ease;
}
.nav-menu a:hover::after{width:100%}

.header-actions{display:flex;align-items:center;gap:1rem}

.btn-login{color:#e5e7eb;text-decoration:none;font-weight:500;transition:color .3s ease}
.btn-login:hover{color:var(--brand)}

.btn-register{
  background:linear-gradient(135deg,var(--brand),var(--brand-hover));
  color:#000;text-decoration:none;padding:.75rem 1.5rem;border-radius:12px;font-weight:600;transition:.3s ease;
  box-shadow:0 4px 20px var(--brand-soft-3);display:flex;align-items:center;gap:.5rem;
}
.btn-register:hover{transform:translateY(-2px);box-shadow:0 8px 30px var(--brand-soft-3)}

/* Hero Section */
.hero-section{margin-top:80px;padding:4rem 0;background:#0a0a0a;position:relative;overflow:hidden}
.hero-container{max-width:1400px;margin:0 auto;padding:0 2rem}

.hero-banner{border-radius:24px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between}
.hero-banner::before{
  content:'';position:absolute;inset:0;
  background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
  opacity:.3;
}

.hero-content{position:relative;z-index:2}
.hero-title{font-size:4rem;font-weight:900;color:#fff;text-shadow:2px 2px 4px rgba(0,0,0,.3);margin-bottom:.5rem;line-height:1.1}
.hero-subtitle{font-size:3.5rem;font-weight:900;color:var(--brand);text-shadow:2px 2px 4px rgba(0,0,0,.3);margin-bottom:2rem;line-height:1.1}

.hero-cta{
  background:rgba(255,255,255,.2);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.3);
  color:#fff;padding:1rem 2rem;border-radius:16px;font-weight:700;font-size:1.1rem;text-decoration:none;display:inline-block;transition:.3s ease;
  box-shadow:0 8px 24px rgba(0,0,0,.2);
}
.hero-cta:hover{transform:translateY(-3px);box-shadow:0 12px 36px rgba(0,0,0,.3);background:rgba(255,255,255,.3)}

.hero-visuals{position:relative;z-index:2;display:flex;align-items:center;gap:2rem}

/* money-stack (mantido verde temático R$100) */
.money-stack{width:200px;height:120px;background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 120"><rect x="10" y="20" width="180" height="80" rx="8" fill="%23059669" stroke="%23047857" stroke-width="2"/><text x="100" y="70" text-anchor="middle" fill="white" font-family="Arial" font-size="24" font-weight="bold">100</text><text x="100" y="45" text-anchor="middle" fill="white" font-family="Arial" font-size="10">REPÚBLICA FEDERATIVA DO BRASIL</text></svg>') no-repeat center/contain;border-radius:8px;position:relative;transform:rotate(-5deg)}
.money-stack::after{
  content:'';position:absolute;top:-10px;left:-10px;width:100%;height:100%;
  background:inherit;opacity:.7;z-index:-1;
}

/* Steps Section */
.steps-section{
  padding:4rem 2rem;
  background:
    radial-gradient(circle at 20% 50%, var(--brand-soft-1) 0%, transparent 50%),
    radial-gradient(circle at 80% 50%, var(--brand-soft-1) 0%, transparent 50%);
}
.steps-container{max-width:1200px;margin:0 auto}
.steps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem;position:relative}

/* Connecting Lines */
.steps-grid::before{
  content:'';position:absolute;top:50px;left:12.5%;right:12.5%;height:2px;
  background:linear-gradient(90deg,
    var(--brand) 0%,
    var(--brand) 33%,
    var(--brand-soft-3) 33%,
    var(--brand-soft-3) 66%,
    var(--brand-soft-3) 66%,
    var(--brand-soft-3) 100%
  );
  z-index:1;
}

.step-item{text-align:center;position:relative;z-index:2;transition:.3s ease}
.step-item:hover{transform:translateY(-8px)}

.step-icon{
  width:100px;height:100px;margin:0 auto 1.5rem;
  background:linear-gradient(145deg,rgba(20,20,20,.8) 0%,rgba(10,10,10,.9) 100%);
  border:2px solid var(--brand-soft-3);border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:2.5rem;color:#6b7280;transition:.4s ease;backdrop-filter:blur(20px);position:relative;overflow:hidden;
}
.step-icon::before{
  content:'';position:absolute;inset:0;background:radial-gradient(circle at center,var(--brand-soft-2) 0%,transparent 70%);
  opacity:0;transition:opacity .3s ease;
}
.step-icon:hover::before,.step-icon.active::before{opacity:1}
.step-icon.active{border-color:var(--brand);color:var(--brand);
  box-shadow:0 0 30px var(--brand-soft-3),0 0 60px rgba(34,197,94,.1);
  background:linear-gradient(145deg,var(--brand-soft-2) 0%,var(--brand-soft-1) 100%);
}
.step-icon:hover{border-color:var(--brand);color:var(--brand);transform:scale(1.05)}

.step-title{font-size:1.25rem;font-weight:700;color:#fff;margin-bottom:.75rem;transition:color .3s ease}
.step-title.active{color:var(--brand)}
.step-item:hover .step-title{color:var(--brand)}

.step-description{font-size:.95rem;color:#9ca3af;line-height:1.5;transition:color .3s ease}
.step-item:hover .step-description{color:#e5e7eb}

/* Games Section */
.games-section{
  padding:4rem 2rem;
  background:
    radial-gradient(circle at 20% 80%, var(--brand-soft-1) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, var(--brand-soft-1) 0%, transparent 50%);
}
.games-container{max-width:1200px;margin:0 auto}
.games-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:2rem}

.game-category{
  background:linear-gradient(145deg,rgba(20,20,20,.8) 0%,rgba(10,10,10,.9) 100%);
  border:1px solid var(--brand-soft-2);border-radius:24px;padding:3rem 2rem;text-align:center;position:relative;overflow:hidden;transition:.4s ease;backdrop-filter:blur(20px);
}
.game-category::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(circle at 20% 20%, var(--brand-soft-2) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, var(--brand-soft-1) 0%, transparent 50%);
  opacity:0;transition:opacity .4s ease;pointer-events:none;
}
.game-category:hover::before{opacity:1}
.game-category:hover{transform:translateY(-8px);border-color:var(--brand-soft-3);
  box-shadow:0 20px 60px rgba(0,0,0,.3),0 0 40px var(--brand-soft-2);
}

.game-icon{
  width:120px;height:120px;margin:0 auto 2rem;
  background:linear-gradient(135deg,var(--brand-soft-2) 0%,var(--brand-soft-1) 100%);
  border:3px solid var(--brand-soft-3);border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:3rem;color:var(--brand);transition:.4s ease;position:relative;z-index:2;
}
.game-category:hover .game-icon{
  border-color:var(--brand);
  background:linear-gradient(135deg,var(--brand-soft-3) 0%,var(--brand-soft-2) 100%);
  box-shadow:0 0 40px var(--brand-soft-3),0 0 80px var(--brand-soft-2);
  transform:scale(1.05);
}

.game-title{font-size:2rem;font-weight:800;color:#fff;margin-bottom:1rem;letter-spacing:1px;position:relative;z-index:2;transition:color .3s ease}
.game-category:hover .game-title{color:var(--brand)}

.game-description{font-size:1rem;color:#9ca3af;margin-bottom:2rem;line-height:1.6;position:relative;z-index:2;transition:color .3s ease}
.game-category:hover .game-description{color:#e5e7eb}

.game-btn{
  background:linear-gradient(135deg,var(--brand),var(--brand-hover));
  color:#000;border:none;padding:1rem 2rem;border-radius:50px;font-size:1rem;font-weight:700;text-decoration:none;display:inline-flex;align-items:center;gap:.75rem;transition:.3s ease;position:relative;z-index:2;
  box-shadow:0 4px 20px var(--brand-soft-3);text-transform:uppercase;letter-spacing:.5px;
}
.game-btn:hover{
  background:linear-gradient(135deg,var(--brand-hover),var(--brand-hover));
  transform:translateY(-2px);box-shadow:0 8px 30px var(--brand-soft-3);color:#fff;
}
.game-btn i{font-size:1.1rem;transition:transform .3s ease}
.game-btn:hover i{transform:translateX(4px)}

/* Mobile Responsive */
@media (max-width:768px){
  .steps-section,.games-section{padding:3rem 1rem}
  .steps-grid{grid-template-columns:repeat(2,1fr);gap:1.5rem}
  .steps-grid::before{display:none}
  .step-icon{width:80px;height:80px;font-size:2rem;margin-bottom:1rem}
  .step-title{font-size:1.1rem;margin-bottom:.5rem}
  .step-description{font-size:.9rem}
  .games-grid{grid-template-columns:1fr;gap:1.5rem}
  .game-category{padding:2rem 1.5rem;border-radius:20px}
  .game-icon{width:100px;height:100px;font-size:2.5rem;margin-bottom:1.5rem}
  .game-title{font-size:1.6rem;margin-bottom:.75rem}
  .game-description{font-size:.9rem;margin-bottom:1.5rem}
  .game-btn{padding:.875rem 1.75rem;font-size:.9rem}
}
@media (max-width:480px){
  .steps-grid{grid-template-columns:1fr;gap:2rem}
  .step-icon{width:90px;height:90px;font-size:2.2rem;margin-bottom:1.25rem}
  .step-title{font-size:1.2rem;margin-bottom:.75rem}
  .game-category{padding:2rem 1rem}
  .game-icon{width:90px;height:90px;font-size:2.2rem}
  .game-title{font-size:1.4rem}
  .game-btn{padding:.75rem 1.5rem;font-size:.85rem}
}

/* Animation on scroll */
.step-item,.game-category{opacity:0;transform:translateY(30px);transition:.6s ease}
.step-item.animate-fade-in-up,.game-category.animate-fade-in-up{opacity:1;transform:translateY(0)}
.step-item:nth-child(1){transition-delay:.1s}
.step-item:nth-child(2){transition-delay:.2s}
.step-item:nth-child(3){transition-delay:.3s}
.step-item:nth-child(4){transition-delay:.4s}
.game-category:nth-child(1){transition-delay:.1s}
.game-category:nth-child(2){transition-delay:.3s}

/* Prize Carousel */
.prize-carousel{padding:2rem 0;background:#0a0a0a;overflow:hidden}
.prize-track{display:flex;gap:1.5rem;animation:scroll 30s linear infinite;padding:1rem 0}
.prize-item{
  min-width:200px;
  background:linear-gradient(135deg,var(--brand-soft-2),var(--brand-soft-1));
  border:1px solid var(--brand-soft-2);border-radius:16px;padding:1.5rem;text-align:center;position:relative;white-space:nowrap;
}
.prize-icon{
  width:60px;height:60px;background:linear-gradient(135deg,#6366f1,#8b5cf6);
  border-radius:12px;margin:0 auto 1rem;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.5rem;
}
.prize-name{font-size:.9rem;font-weight:600;color:#fff;margin-bottom:.5rem}
.prize-value{font-size:1.1rem;font-weight:800;color:var(--brand)}

@keyframes scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* Footer */
.footer{background:#0f0f0f;border-top:1px solid var(--brand-soft-2);padding:3rem 0 2rem}
.footer-container{max-width:1400px;margin:0 auto;padding:0 2rem}
.footer-content{display:grid;grid-template-columns:1fr 1fr 1fr;gap:3rem;margin-bottom:2rem}

.footer-brand{display:flex;align-items:center;gap:.5rem;font-size:1.5rem;font-weight:800;color:var(--brand);margin-bottom:1rem}
.footer-description{color:#9ca3af;line-height:1.6;margin-bottom:1rem}
.footer-section h3{color:#fff;font-weight:700;margin-bottom:1rem}
.footer-links{list-style:none}
.footer-links li{margin-bottom:.5rem}
.footer-links a{color:#9ca3af;text-decoration:none;transition:color .3s ease}
.footer-links a:hover{color:var(--brand)}
.footer-bottom{border-top:1px solid var(--brand-soft-2);padding-top:2rem;text-align:center;color:#6b7280;font-size:.9rem}

@media (max-width:768px){
  .nav-menu{display:none}
  .hero-banner{flex-direction:column;text-align:center;gap:2rem}
  .hero-title{font-size:2.5rem}
  .hero-subtitle{font-size:2rem}
  .steps-grid{grid-template-columns:repeat(2,1fr)}
  .games-grid{grid-template-columns:1fr}
  .footer-content{grid-template-columns:1fr;gap:2rem}
}
@media (max-width:480px){
  .steps-grid{grid-template-columns:1fr}
  .hero-title{font-size:2rem}
  .hero-subtitle{font-size:1.5rem}
}

/* Scrollbar */
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:transparent!important}
::-webkit-scrollbar-thumb{background:var(--brand)}
::-webkit-scrollbar-thumb:hover{background:var(--brand-hover)}