:root {
  --bg:#0f1113; --panel:#151a1d; --brand:#38bfbc; --brand-dark:#009D92;
  --text:#f4f4f4; --muted:#9ca3af; --radius:10px;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:"Poppins",sans-serif;background:var(--bg);color:var(--text);line-height:1.6}
.container{max-width:1100px;margin:0 auto;padding:20px}

/* HEADER */
.navbar{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;
background:#0b0d0f;border-bottom:1px solid rgba(255,255,255,0.08);position:sticky;top:0;z-index:1000}
.navbar img{height:42px}
.actions{display:flex;gap:10px}
.btn{padding:8px 16px;border-radius:var(--radius);font-weight:600;font-size:.9rem;text-decoration:none;transition:.25s}
.btn-outline{border:1px solid var(--brand-dark);color:var(--text)}
.btn-outline:hover{background:var(--brand-dark);color:#fff}
.btn-solid{background:var(--brand);color:#000}
.btn-solid:hover{background:var(--brand-dark);color:#fff}

/* HERO */
.hero{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;padding:80px 20px;gap:40px;text-align:center}
.hero h1{font-size:clamp(2rem,6vw,3.5rem);font-weight:700;margin-bottom:16px;
background:linear-gradient(to right,#fff,var(--brand));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hero p{font-size:1.1rem;color:var(--muted);margin-bottom:24px}
.hero .buttons{display:flex;gap:15px;justify-content:center;flex-wrap:wrap}
.btn-main{background:var(--brand);color:#000;padding:12px 20px;border-radius:var(--radius);font-weight:600;text-decoration:none}
.btn-main:hover{background:var(--brand-dark);color:#fff}
.hero .btn-outline{border:1px solid var(--brand);color:var(--text)}
.hero .btn-outline:hover{background:var(--brand-dark);color:#fff}
.accent{margin-top:12px;color:#b6dfdc;font-size:.95rem}

/* 3D CARD */
.hero-card{flex:1 1 320px;display:flex;justify-content:center}
.card-3d{width:280px;height:180px;border-radius:var(--radius);background:var(--panel);
display:flex;align-items:center;justify-content:center;transition:transform .2s;
transform-style:preserve-3d;border:1px solid rgba(255,255,255,0.08)}
.card-3d img{max-width:100%;border-radius:var(--radius)}
.side{position:absolute;backface-visibility:hidden}

/* FEATURES */
.features{padding:60px 20px;text-align:center;background:var(--panel)}
.features h2{font-size:2rem;margin-bottom:16px;color:var(--brand)}
.features p{color:var(--muted);margin-bottom:20px}
.features .feature-image img{max-width:400px;width:100%;border-radius:var(--radius)}

/* COIN WIDGET */
.coin-widget{padding:40px 20px;text-align:center}

/* ABOUT */
.about{padding:60px 20px;text-align:center}
.about h2{font-size:2rem;color:var(--brand);margin-bottom:16px}
.about p{color:var(--muted);max-width:800px;margin:0 auto}

/* CONTACT */
.contact{padding:60px 20px;background:var(--panel)}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.contact h3{margin-bottom:12px;color:var(--brand)}
.contact p,.contact a{color:var(--muted)}
.contact a:hover{color:var(--text)}
.contact form{display:flex;flex-direction:column;gap:10px}
.contact input,.contact textarea{padding:10px;border-radius:var(--radius);
border:1px solid rgba(255,255,255,0.1);background:#0f1113;color:#fff}
.contact button{border:none;cursor:pointer}
.socials{margin-top:12px;display:flex;gap:12px}
.socials a{color:var(--brand);text-decoration:none}
.socials a:hover{text-decoration:underline}

/* FOOTER */
footer{background:#0a0c0e;padding:20px;text-align:center;
border-top:1px solid rgba(255,255,255,0.08)}
footer p{color:var(--muted)}
footer a{color:var(--brand);text-decoration:none}
footer a:hover{text-decoration:underline}

/* RESPONSIVE */
@media(max-width:768px){
  .hero{flex-direction:column;text-align:center}
  .contact-grid{grid-template-columns:1fr}
}