/* Modern dark design for PlayTechCorner — Crazy Dragon App */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&display=swap');

:root{
  --bg:#071312;
  --card:#0f2a27;
  --muted:rgba(255,255,255,0.75);
  --accent:#00E5D4;
  --glass:rgba(255,255,255,0.04);
}

*{box-sizing:border-box}
html,body{height:100%;}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background: linear-gradient(180deg,#04120f 0%, #071a17 60%);
  color:#eafaf7;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.container{
  width:92%;
  max-width:1200px;
  margin:0 auto;
}

/* NAV */
.navbar{
  position:sticky;
  top:0;
  z-index:40;
  backdrop-filter: blur(8px);
  background: linear-gradient(180deg, rgba(6,30,28,0.55), rgba(4,18,15,0.35));
  border-bottom:1px solid rgba(255,255,255,0.04);
}
.nav-container{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.nav-logo{height:44px}
nav{
  display:flex;align-items:center;gap:20px
}
nav a{
  color:var(--accent);
  font-weight:600;
  padding:8px 10px;
  border-radius:8px;
  transition:all .18s ease;
}
nav a:hover{color:#02120f;background:rgba(0,0,0,0.12);transform:translateY(-2px)}

/* MOBILE NAV */
.menu-toggle{display:none}

/* HERO */
.hero{
  display:flex;gap:36px;align-items:center;padding:80px 0 60px;
}
.hero-content{flex:1;max-width:640px}
.hero h1{
  font-size:clamp(28px,4.2vw,56px);
  margin:0 0 12px 0;color:var(--accent);line-height:1.02;font-weight:800
}
.hero p{color:var(--muted);margin:0 0 20px;font-size:1.05rem}
.hero-buttons{display:flex;gap:14px;margin-bottom:10px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:12px 20px;border-radius:12px;font-weight:700;cursor:pointer;border:0}
.btn-primary{background:var(--accent);color:#04201b}
.btn-outline{background:transparent;border:1.5px solid rgba(0,229,212,0.18);color:var(--accent)}
.btn-primary:hover{transform:scale(1.03)}

.stats{display:flex;gap:28px;margin-top:26px}
.stats div{display:flex;flex-direction:column}
.stats h3{margin:0;color:var(--accent);font-size:20px}
.stats p{margin:4px 0 0;color:var(--muted);font-size:13px}

/* HERO IMAGE */
.hero-image{width:420px;flex:0 0 420px}
.logo-card{width:100%;height:420px;border-radius:26px;background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,0.03);box-shadow:0 18px 50px rgba(0,229,212,0.08)}
.logo-card img{width:70%;height:auto}

/* FEATURES */
.features{padding:60px 0}
.feature-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:18px}
.feature-card{background:var(--card);padding:20px;border-radius:14px;border:1px solid rgba(255,255,255,0.03)}
.feature-card h3{color:var(--accent);margin-bottom:6px}
.feature-card p{color:var(--muted);font-size:14px}

/* CRAZY SECTION */
.crazy-section{display:flex;gap:24px;align-items:center;padding:48px 0}
.crazy-content{flex:1}
.crazy-list{margin:12px 0 18px 18px;color:var(--muted)}
.crazy-image img{width:100%;border-radius:12px;border:1px solid rgba(255,255,255,0.04)}

/* NFT */
.nft-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:18px}
.nft-card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02));padding:16px;border-radius:12px;border:1px solid rgba(255,255,255,0.03)}

/* DOWNLOAD */
.download-section{padding:48px 0}
.btn-disabled{background:rgba(255,255,255,0.03);color:var(--muted);padding:12px 18px;border-radius:10px;border:1px solid rgba(255,255,255,0.02)}

/* FOOTER */
.footer{padding:36px 0;margin-top:40px;background:linear-gradient(180deg,transparent,rgba(0,0,0,0.05))}
.footer-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;align-items:start}
.footer-logo{height:42px;margin-bottom:8px}
.footer a{display:block;color:var(--muted);margin:6px 0;font-size:14px}

/* RESPONSIVE */
@media (max-width:880px){
  .hero{flex-direction:column;padding:48px 0}
  .hero-image{width:100%;flex:unset}
  .feature-grid{grid-template-columns:1fr}
  .nft-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  nav{display:none}
  .menu-toggle{display:block}
}

/* SMALL ANIMATIONS */
.fade-up{opacity:0;transform:translateY(12px);animation:fadeUp .7s forwards}
.fade-in{opacity:0;animation:fadeIn .8s forwards}
@keyframes fadeUp{to{opacity:1;transform:none}}
@keyframes fadeIn{to{opacity:1}}

/* Accessibility tweaks */
:focus{outline:3px solid rgba(0,229,212,0.18);outline-offset:3px}

/* End of design */