:root {
  --orange: #FF6B00; --magenta: #CC00CC; --purple: #6A00FF;
  --dark: #0A0A0F; --darker: #060608; --card: #12121A;
  --border: rgba(255,255,255,0.08); --text: #F0EEF8;
  --muted: rgba(240,238,248,0.55); --input-bg: rgba(255,255,255,0.04);
  --green: #1D9E75;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { background:var(--dark); color:var(--text); font-family:'DM Sans',sans-serif; min-height:100vh; }

/* NAV */
nav { background:rgba(6,6,8,0.97); border-bottom:1px solid var(--border); padding:16px 48px; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:100; backdrop-filter:blur(12px); }
.nav-logo { display:flex; align-items:center; gap:12px; text-decoration:none; }
.nav-logo svg { height:40px; width:auto; }
.nav-links { display:flex; align-items:center; gap:24px; }
.nav-links a { color:var(--muted); text-decoration:none; font-size:14px; transition:color 0.2s; }
.nav-links a:hover { color:var(--text); }
.btn-nav { padding:9px 20px; background:linear-gradient(135deg,var(--orange),var(--purple)); color:white; border:none; border-radius:8px; font-family:'DM Sans',sans-serif; font-size:14px; font-weight:500; cursor:pointer; text-decoration:none; }

/* HERO */
.blog-hero { padding:64px 48px 48px; max-width:1100px; margin:0 auto; text-align:center; }
.blog-hero h1 { font-family:'Bebas Neue',sans-serif; font-size:64px; letter-spacing:2px; margin-bottom:16px; background:linear-gradient(135deg,var(--orange),var(--magenta),var(--purple)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.blog-hero p { font-size:18px; color:var(--muted); max-width:600px; margin:0 auto; line-height:1.7; }

/* BLOG GRID */
.blog-container { max-width:1100px; margin:0 auto; padding:0 48px 80px; }
.blog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-bottom:48px; }

/* POST CARD */
.post-card { background:var(--card); border:1px solid var(--border); border-radius:16px; overflow:hidden; transition:transform 0.2s, border-color 0.2s; cursor:pointer; text-decoration:none; display:block; }
.post-card:hover { transform:translateY(-4px); border-color:rgba(255,107,0,0.3); }
.post-card-image { height:180px; display:flex; align-items:center; justify-content:center; font-size:56px; position:relative; overflow:hidden; }
.post-card-image::after { content:''; position:absolute; bottom:0; left:0; right:0; height:40px; background:linear-gradient(transparent, var(--card)); }
.post-card-body { padding:20px; }
.post-category { font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--orange); margin-bottom:10px; }
.post-title { font-size:17px; font-weight:500; line-height:1.4; margin-bottom:10px; color:var(--text); }
.post-excerpt { font-size:13px; color:var(--muted); line-height:1.7; margin-bottom:16px; }
.post-meta { display:flex; align-items:center; justify-content:space-between; font-size:12px; color:var(--muted); padding-top:14px; border-top:1px solid var(--border); }
.post-read-time { display:flex; align-items:center; gap:6px; }

/* FEATURED POST */
.featured-post { background:var(--card); border:1px solid var(--border); border-radius:20px; overflow:hidden; margin-bottom:40px; display:grid; grid-template-columns:1fr 1fr; transition:border-color 0.2s; cursor:pointer; text-decoration:none; }
.featured-post:hover { border-color:rgba(255,107,0,0.3); }
.featured-image { background:linear-gradient(135deg,rgba(255,107,0,0.15),rgba(106,0,255,0.15)); display:flex; align-items:center; justify-content:center; font-size:96px; min-height:300px; }
.featured-body { padding:40px; display:flex; flex-direction:column; justify-content:center; }
.featured-badge { display:inline-flex; align-items:center; gap:6px; background:rgba(255,107,0,0.1); border:1px solid rgba(255,107,0,0.2); border-radius:100px; padding:5px 14px; font-size:12px; color:var(--orange); margin-bottom:16px; width:fit-content; }
.featured-title { font-family:'Bebas Neue',sans-serif; font-size:36px; letter-spacing:1px; margin-bottom:12px; line-height:1.1; }
.featured-excerpt { font-size:15px; color:var(--muted); line-height:1.8; margin-bottom:24px; }
.btn-read { display:inline-flex; align-items:center; gap:8px; padding:12px 24px; background:linear-gradient(135deg,var(--orange),var(--purple)); color:white; border:none; border-radius:10px; font-family:'DM Sans',sans-serif; font-size:14px; font-weight:500; cursor:pointer; text-decoration:none; width:fit-content; }

/* SECTION TITLE */
.section-title { font-family:'Bebas Neue',sans-serif; font-size:32px; letter-spacing:1px; margin-bottom:24px; color:var(--text); }

/* NEWSLETTER */
.newsletter { background:linear-gradient(135deg,rgba(255,107,0,0.08),rgba(106,0,255,0.08)); border:1px solid rgba(255,107,0,0.15); border-radius:20px; padding:48px; text-align:center; margin-bottom:48px; }
.newsletter h2 { font-family:'Bebas Neue',sans-serif; font-size:40px; letter-spacing:1px; margin-bottom:12px; }
.newsletter p { font-size:16px; color:var(--muted); margin-bottom:28px; }
.newsletter-form { display:flex; gap:12px; max-width:480px; margin:0 auto; }
.newsletter-input { flex:1; padding:13px 16px; background:var(--input-bg); border:1px solid var(--border); border-radius:10px; color:var(--text); font-family:'DM Sans',sans-serif; font-size:15px; outline:none; transition:border-color 0.2s; }
.newsletter-input:focus { border-color:rgba(255,107,0,0.5); }
.newsletter-input::placeholder { color:rgba(240,238,248,0.3); }
.btn-subscribe { padding:13px 24px; background:linear-gradient(135deg,var(--orange),var(--purple)); color:white; border:none; border-radius:10px; font-family:'DM Sans',sans-serif; font-size:14px; font-weight:500; cursor:pointer; white-space:nowrap; }

/* INDIVIDUAL POST VIEW */
.post-view { display:none; max-width:760px; margin:0 auto; padding:0 48px 80px; }
.post-view.active { display:block; }
.post-view-back { display:inline-flex; align-items:center; gap:8px; color:var(--muted); font-size:14px; cursor:pointer; margin-bottom:32px; background:none; border:none; font-family:'DM Sans',sans-serif; padding:0; transition:color 0.2s; }
.post-view-back:hover { color:var(--orange); }
.post-view-category { font-size:12px; letter-spacing:2px; text-transform:uppercase; color:var(--orange); margin-bottom:12px; }
.post-view-title { font-family:'Bebas Neue',sans-serif; font-size:52px; letter-spacing:1px; line-height:1.05; margin-bottom:20px; }
.post-view-meta { display:flex; align-items:center; gap:16px; font-size:13px; color:var(--muted); margin-bottom:40px; padding-bottom:24px; border-bottom:1px solid var(--border); }
.post-view-content { font-size:17px; line-height:1.85; color:rgba(240,238,248,0.85); }
.post-view-content h2 { font-family:'Bebas Neue',sans-serif; font-size:32px; letter-spacing:1px; color:var(--text); margin:40px 0 16px; }
.post-view-content p { margin-bottom:20px; }
.post-view-content ul { padding-left:24px; margin-bottom:20px; }
.post-view-content ul li { margin-bottom:8px; }
.post-view-content strong { color:var(--text); font-weight:500; }

.comments-section { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--border); }
.comments-title { font-family: 'Bebas Neue', sans-serif; font-size: 28px; letter-spacing: 1px; margin-bottom: 24px; }
.comment-form { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 20px; margin-bottom: 28px; }
.comment-textarea { width: 100%; background: var(--input-bg); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; color: var(--text); font-family: 'DM Sans', sans-serif; font-size: 14px; resize: vertical; min-height: 90px; outline: none; transition: border-color 0.2s; box-sizing: border-box; }
.comment-textarea:focus { border-color: var(--orange); }
.comment-submit { margin-top: 10px; padding: 10px 22px; background: linear-gradient(135deg, var(--orange), var(--purple)); border: none; border-radius: 10px; color: white; font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 500; cursor: pointer; transition: opacity 0.2s; }
.comment-submit:hover { opacity: 0.9; }
.comment-submit:disabled { opacity: 0.5; cursor: not-allowed; }
.comment-login-note { font-size: 13px; color: var(--muted); margin-top: 10px; }
.comment-login-note a { color: var(--orange); text-decoration: none; }
.comments-list { display: flex; flex-direction: column; gap: 16px; }
.comment-item { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; }
.comment-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.comment-avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--orange), var(--purple)); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; flex-shrink: 0; }
.comment-author { font-size: 13px; font-weight: 500; }
.comment-date { font-size: 12px; color: var(--muted); margin-left: auto; }
.comment-body { font-size: 14px; color: rgba(240,238,248,0.8); line-height: 1.6; }
.comments-loading { text-align: center; color: var(--muted); font-size: 13px; padding: 20px 0; }
.comments-empty { text-align: center; color: var(--muted); font-size: 14px; padding: 24px 0; }

.post-view-emoji { font-size:80px; text-align:center; margin-bottom:32px; display:block; }
.post-cta { background:linear-gradient(135deg,rgba(255,107,0,0.1),rgba(106,0,255,0.1)); border:1px solid rgba(255,107,0,0.2); border-radius:16px; padding:32px; text-align:center; margin-top:48px; }
.post-cta h3 { font-family:'Bebas Neue',sans-serif; font-size:28px; margin-bottom:10px; }
.post-cta p { color:var(--muted); font-size:15px; margin-bottom:20px; }

/* FOOTER */
footer { background:var(--darker); border-top:1px solid var(--border); padding:28px 48px; text-align:center; font-size:13px; color:var(--muted); }
footer a { color:var(--orange); text-decoration:none; }

@media (max-width:900px) {
  .blog-grid { grid-template-columns:1fr; }
  .featured-post { grid-template-columns:1fr; }
  .featured-image { min-height:180px; }
  nav { padding:16px 20px; }
  .blog-hero { padding:40px 20px 32px; }
  .blog-container { padding:0 20px 60px; }
  .post-view { padding:0 20px 60px; }
  .newsletter-form { flex-direction:column; }
  .blog-hero h1 { font-size:44px; }
}