@import url('https://fonts.googleapis.com/css2?family=Cabinet+Grotesk:wght@400;500;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --bg: #060608;
  --s1: #0f0f14;
  --s2: #17171f;
  --s3: #1f1f2a;
  --border: rgba(255,255,255,0.07);
  --border2: rgba(255,255,255,0.13);
  --accent: #6ee7b7;
  --accent2: #34d399;
  --accent-dim: rgba(110,231,183,0.12);
  --gold: #fbbf24;
  --gold-bg: rgba(251,191,36,0.1);
  --blue: #60a5fa;
  --blue-bg: rgba(96,165,250,0.1);
  --red: #f87171;
  --red-dim: rgba(248,113,113,0.12);
  --text: #eeeef5;
  --muted: #72728a;
  --muted2: #4a4a60;
  --font: 'Cabinet Grotesk', sans-serif;
  --mono: 'JetBrains Mono', monospace;
  --radius: 14px;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--bg);color:var(--text);font-family:var(--font);font-size:16px;line-height:1.6;min-height:100vh;}
::-webkit-scrollbar{width:6px;}
::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{background:var(--s3);border-radius:3px;}

/* NAV */
nav{display:flex;align-items:center;justify-content:space-between;padding:1rem 2rem;border-bottom:1px solid var(--border);background:rgba(6,6,8,0.92);backdrop-filter:blur(14px);position:sticky;top:0;z-index:200;}
.logo{font-size:1.25rem;font-weight:900;letter-spacing:-.04em;color:var(--text);text-decoration:none;}
.logo span{color:var(--accent);}
.nav-links{display:flex;gap:1.5rem;align-items:center;}
.nav-links a{font-size:.85rem;color:var(--muted);text-decoration:none;transition:color .15s;}
.nav-links a:hover,.nav-links a.active{color:var(--text);}
.nav-pro-btn{background:var(--gold);color:#000;font-family:var(--font);font-weight:800;font-size:.8rem;padding:6px 16px;border-radius:20px;border:none;cursor:pointer;transition:opacity .15s;text-decoration:none;}
.nav-pro-btn:hover{opacity:.85;}

/* PAGE HERO */
.page-hero{padding:4rem 2rem 3rem;max-width:900px;margin:0 auto;}
.page-tag{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-family:var(--mono);letter-spacing:.08em;color:var(--accent);background:var(--accent-dim);border:1px solid rgba(110,231,183,0.25);border-radius:20px;padding:5px 14px;margin-bottom:1.2rem;}
.page-hero h1{font-size:clamp(2rem,5vw,3.5rem);font-weight:900;letter-spacing:-.04em;line-height:1.1;margin-bottom:.8rem;}
.page-hero p{font-size:1rem;color:var(--muted);max-width:560px;line-height:1.7;}

/* CONTAINER */
.container{max-width:900px;margin:0 auto;padding:0 2rem 5rem;}

/* CARD */
.card{background:var(--s1);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;}
.card+.card{margin-top:1rem;}

/* BUTTONS */
.btn-primary{display:inline-block;padding:.75rem 1.5rem;background:var(--accent);color:#000;font-family:var(--font);font-size:.9rem;font-weight:800;border:none;border-radius:10px;cursor:pointer;text-decoration:none;transition:opacity .15s;}
.btn-primary:hover{opacity:.85;}
.btn-ghost{display:inline-block;padding:.75rem 1.5rem;background:transparent;color:var(--muted);font-family:var(--font);font-size:.9rem;font-weight:700;border:1px solid var(--border2);border-radius:10px;cursor:pointer;text-decoration:none;transition:all .15s;}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);}

/* CODE BLOCK */
.code-block{background:var(--bg);border:1px solid var(--border2);border-radius:8px;padding:1.2rem;font-family:var(--mono);font-size:.75rem;color:var(--accent);line-height:1.8;overflow-x:auto;white-space:pre;}

/* AD STRIP */
.ad-strip{text-align:center;padding:1rem 2rem;max-width:900px;margin:0 auto;}
.ad-label{font-size:.62rem;font-family:var(--mono);color:var(--muted2);letter-spacing:.08em;margin-bottom:4px;}
.ad-box{background:var(--s1);border:1px dashed var(--border2);border-radius:8px;min-height:90px;display:flex;align-items:center;justify-content:center;color:var(--muted2);font-size:.75rem;font-family:var(--mono);}

/* PRO TAG */
.tag-pro{font-size:.6rem;font-family:var(--mono);font-weight:700;background:var(--gold-bg);color:var(--gold);border:1px solid rgba(251,191,36,.3);padding:1px 6px;border-radius:4px;margin-left:5px;vertical-align:middle;}
.tag-new{font-size:.6rem;font-family:var(--mono);font-weight:700;background:var(--blue-bg);color:var(--blue);border:1px solid rgba(96,165,250,.3);padding:1px 6px;border-radius:4px;margin-left:5px;vertical-align:middle;}

/* FOOTER */
footer{border-top:1px solid var(--border);padding:2rem;text-align:center;}
.footer-links{display:flex;justify-content:center;gap:1.5rem;margin-bottom:1rem;flex-wrap:wrap;}
.footer-links a{font-size:.82rem;color:var(--muted);text-decoration:none;transition:color .15s;}
.footer-links a:hover{color:var(--text);}
.footer-copy{font-size:.75rem;color:var(--muted2);font-family:var(--mono);}

@media(max-width:680px){
  nav{padding:.8rem 1rem;}
  .nav-links{gap:.8rem;}
  .page-hero{padding:2.5rem 1rem 2rem;}
  .container{padding:0 1rem 3rem;}
}