/* ═══════════════════════════════════════════════════════════
   WORDIFY ENGLISH — MASTER STYLESHEET
   Edit variables in :root to change colors/fonts site-wide
   ═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap');

/* ── VARIABLES ─────────────────────────────────────────────── */
:root {
  --bg:          #0b0b1c;
  --bg2:         #13132b;
  --bg3:         #1c1c3a;
  --bg4:         #090918;
  --purple:      #7f77dd;
  --purple2:     #a09ae8;
  --purple3:     #534ab7;
  --purple-glow: rgba(127,119,221,0.12);
  --border:      rgba(127,119,221,0.16);
  --border2:     rgba(127,119,221,0.32);
  --text:        #e4e4f4;
  --muted:       #8888aa;
  --faint:       #44446a;
  --green:       #5dcaa5;
  --amber:       #f0b429;
  --coral:       #f08060;
  --blue:        #70b8f0;
  --pink:        #e899bb;
  --font-display:'Space Grotesk', sans-serif;
  --font-body:   'Inter', sans-serif;
  --max-w:       1200px;
  --post-w:      740px;
  --radius:      10px;
  --radius-lg:   16px;
  --radius-xl:   22px;
  --shadow:      0 8px 40px rgba(0,0,0,0.5);
}

/* ── RESET ─────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:var(--font-body);background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
button{font-family:inherit;cursor:pointer;border:none;background:none}
ul,ol{padding-left:1.4rem}

/* ── UTILITY ───────────────────────────────────────────────── */
.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* ═══════════════════════════════════════════
   TICKER BAR
   ═══════════════════════════════════════════ */
.ticker-wrap{
  background:var(--bg4);
  border-bottom:1px solid var(--border);
  padding:9px 0;
  overflow:hidden;
  position:relative;
}
.ticker-wrap::before,.ticker-wrap::after{
  content:'';position:absolute;top:0;bottom:0;
  width:80px;z-index:2;pointer-events:none;
}
.ticker-wrap::before{left:0;background:linear-gradient(to right,var(--bg4) 50%,transparent)}
.ticker-wrap::after{right:0;background:linear-gradient(to left,var(--bg4) 50%,transparent)}
.ticker-track{
  display:flex;
  width:max-content;
  animation:ticker-scroll 45s linear infinite;
}
.ticker-track:hover{animation-play-state:paused}
@keyframes ticker-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ticker-item{
  display:flex;align-items:center;gap:8px;
  padding:0 22px;font-size:12.5px;
  color:#9999bb;white-space:nowrap;
  font-family:var(--font-display);
}
.ticker-dot{width:5px;height:5px;border-radius:50%;background:var(--purple);flex-shrink:0}
.ticker-new-badge{
  font-size:9px;background:var(--purple3);color:#c8c4ff;
  padding:1px 7px;border-radius:20px;font-weight:700;
  letter-spacing:.4px;text-transform:uppercase;
}

/* ═══════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════ */
.site-header{
  position:sticky;top:0;z-index:200;
  background:rgba(11,11,28,0.97);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--border);
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 28px;max-width:var(--max-w);margin:0 auto;gap:16px;
}
.logo{
  font-family:var(--font-display);font-size:20px;font-weight:700;
  color:var(--text);letter-spacing:-.5px;white-space:nowrap;flex-shrink:0;
}
.logo em{color:var(--purple2);font-style:normal}
.logo-dot{color:var(--purple)}
.header-search{
  display:flex;align-items:center;gap:8px;
  background:var(--bg2);border:1px solid var(--border);
  border-radius:24px;padding:7px 16px;
  flex:1;max-width:280px;transition:border-color .2s;
}
.header-search:focus-within{border-color:var(--purple)}
.header-search svg{color:var(--muted);flex-shrink:0}
.header-search input{
  background:none;border:none;outline:none;
  font-family:var(--font-body);font-size:13px;color:var(--text);width:100%;
}
.header-search input::placeholder{color:var(--faint)}

/* ═══════════════════════════════════════════
   COURSE PROMOTION BANNER
   Set ads.banner.enabled = false in config.js to hide
   ═══════════════════════════════════════════ */
.course-banner{
  background:linear-gradient(135deg,#160d4e 0%,#21166a 50%,#130b40 100%);
  border-bottom:1px solid rgba(127,119,221,0.28);
  padding:11px 28px;
}
.course-banner-inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;max-width:var(--max-w);margin:0 auto;flex-wrap:wrap;
}
.course-banner-text{
  font-family:var(--font-display);font-size:13.5px;
  color:#c0baff;font-weight:500;
}
.course-banner-text strong{color:#fff}
.banner-price{
  background:var(--purple);color:#fff;
  padding:1px 10px;border-radius:20px;
  font-size:12px;font-weight:700;margin-left:6px;
}
.banner-old-price{
  color:var(--faint);text-decoration:line-through;
  font-size:11px;margin-left:6px;
}
.course-banner-btn{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--purple);color:#fff;
  padding:7px 20px;border-radius:24px;
  font-family:var(--font-display);font-size:12.5px;font-weight:600;
  white-space:nowrap;transition:background .2s,transform .15s;
  text-decoration:none;
}
.course-banner-btn:hover{background:var(--purple2);transform:scale(1.02);color:#fff}
.course-banner-close{
  color:rgba(192,186,255,0.4);font-size:20px;line-height:1;
  padding:0 0 0 8px;flex-shrink:0;transition:color .2s;
}
.course-banner-close:hover{color:#c0baff}

/* ═══════════════════════════════════════════
   FILTER / CATEGORY BAR
   ═══════════════════════════════════════════ */
.filter-bar{
  background:var(--bg);border-bottom:1px solid var(--border);
  overflow-x:auto;scrollbar-width:none;
}
.filter-bar::-webkit-scrollbar{display:none}
.filter-bar-inner{
  display:flex;align-items:center;gap:8px;
  padding:12px 28px;max-width:var(--max-w);
  margin:0 auto;width:max-content;min-width:100%;
}
.filter-btn{
  font-family:var(--font-display);font-size:13px;font-weight:500;
  padding:6px 16px;border-radius:24px;border:1px solid var(--border);
  background:transparent;color:var(--muted);cursor:pointer;
  white-space:nowrap;transition:all .2s;
  display:flex;align-items:center;gap:6px;
}
.filter-btn:hover{border-color:var(--purple);color:var(--purple2)}
.filter-btn.active{background:var(--purple3);border-color:var(--purple3);color:#fff}
.filter-count{
  font-size:11px;background:var(--bg3);
  padding:1px 6px;border-radius:10px;color:var(--faint);
  transition:all .2s;
}
.filter-btn.active .filter-count{background:rgba(255,255,255,.15);color:rgba(255,255,255,.7)}

/* ═══════════════════════════════════════════
   HOMEPAGE LAYOUT
   ═══════════════════════════════════════════ */
.page-main{max-width:var(--max-w);margin:0 auto;padding:32px 28px 80px}

/* Section headings */
.section-head{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.section-head h2{
  font-family:var(--font-display);font-size:15px;font-weight:600;
  color:var(--text);letter-spacing:-.2px;white-space:nowrap;
}
.section-eyebrow{
  font-size:10.5px;color:var(--purple);font-family:var(--font-display);
  font-weight:700;letter-spacing:.5px;text-transform:uppercase;white-space:nowrap;
}
.section-line{flex:1;height:1px;background:var(--border)}

/* ── HERO CARD ──────────────────────────────── */
.hero-card{
  display:block;background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:32px 36px;margin-bottom:40px;
  position:relative;overflow:hidden;cursor:pointer;
  transition:border-color .25s,transform .2s;text-decoration:none;
}
.hero-card::before{
  content:'';position:absolute;left:0;top:0;bottom:0;
  width:4px;background:var(--purple);border-radius:4px 0 0 4px;
}
.hero-card::after{
  content:'';position:absolute;top:-80px;right:-80px;
  width:340px;height:340px;
  background:radial-gradient(circle,rgba(127,119,221,.1) 0%,transparent 70%);
  pointer-events:none;
}
.hero-card:hover{border-color:var(--border2);transform:translateY(-2px)}
.hero-eyebrow{display:flex;align-items:center;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.hero-title{
  font-family:var(--font-display);font-size:28px;font-weight:700;
  color:#fff;letter-spacing:-.5px;line-height:1.3;margin-bottom:10px;
}
.hero-desc{font-size:14.5px;color:var(--muted);line-height:1.7;max-width:580px;margin-bottom:18px}
.hero-meta{
  display:flex;align-items:center;gap:18px;
  font-size:12px;color:var(--faint);font-family:var(--font-display);flex-wrap:wrap;
}
.hero-meta span{display:flex;align-items:center;gap:4px}
.hero-cta{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--purple);color:#fff;
  padding:9px 22px;border-radius:24px;
  font-family:var(--font-display);font-size:13px;font-weight:600;
  margin-top:20px;transition:background .2s;text-decoration:none;
  border:none;cursor:pointer;
}
.hero-card:hover .hero-cta{background:var(--purple2)}

/* ── FEATURED GRID ──────────────────────────── */
.featured-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:16px;margin-bottom:44px;
}

/* ── BLOG CARD ──────────────────────────────── */
.blog-card{
  display:flex;flex-direction:column;
  background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:20px 22px;
  text-decoration:none;position:relative;overflow:hidden;
  transition:border-color .2s,transform .2s,background .2s;
}
.blog-card::before{
  content:'';position:absolute;left:0;top:0;bottom:0;
  width:3px;background:var(--purple);
  transform:scaleY(0);transform-origin:bottom;
  transition:transform .25s;border-radius:3px 0 0 3px;
}
.blog-card:hover{border-color:var(--border2);background:var(--bg3);transform:translateY(-3px)}
.blog-card:hover::before{transform:scaleY(1)}
.blog-card:hover .card-title{color:var(--purple2)}
.card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;flex-wrap:wrap;gap:6px}
.card-badges{display:flex;gap:6px;flex-wrap:wrap}
.card-title{
  font-family:var(--font-display);font-size:15px;font-weight:600;
  color:var(--text);line-height:1.45;margin-bottom:8px;transition:color .2s;
}
.card-desc{
  font-size:13px;color:var(--muted);line-height:1.65;
  margin-bottom:14px;flex:1;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.card-footer{
  display:flex;align-items:center;justify-content:space-between;
  font-size:11.5px;color:var(--faint);font-family:var(--font-display);
  margin-top:auto;padding-top:12px;border-top:1px solid var(--border);flex-wrap:wrap;gap:6px;
}
.card-author{display:flex;align-items:center;gap:6px}
.author-avatar{
  width:22px;height:22px;border-radius:50%;
  background:var(--purple3);color:#c8c4ff;
  font-size:10px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);flex-shrink:0;
}
.card-meta-right{display:flex;gap:10px;align-items:center}

/* ── ALL POSTS GRID ─────────────────────────── */
.all-posts-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:14px;
}
.results-bar{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:16px;flex-wrap:wrap;gap:8px;
}
.results-text{font-size:13px;color:var(--muted);font-family:var(--font-display)}
.results-text strong{color:var(--purple2)}
.clear-filters-btn{
  font-size:12px;color:var(--purple);
  border:1px solid var(--border);border-radius:20px;
  padding:4px 12px;cursor:pointer;
  font-family:var(--font-display);font-weight:500;
  transition:all .2s;background:transparent;
}
.clear-filters-btn:hover{border-color:var(--purple);background:rgba(127,119,221,.1)}
.empty-state{text-align:center;padding:60px 20px;grid-column:1/-1}
.empty-icon{font-size:40px;margin-bottom:12px}
.empty-state h3{font-family:var(--font-display);font-size:17px;color:var(--text);margin-bottom:6px}
.empty-state p{font-size:13px;color:var(--muted)}
.empty-state button{
  background:none;border:none;color:var(--purple);
  cursor:pointer;font-size:13px;font-family:var(--font-display);
  font-weight:500;text-decoration:underline;
}

/* ═══════════════════════════════════════════
   BADGES & CATEGORY PILLS
   ═══════════════════════════════════════════ */
.badge{
  font-family:var(--font-display);font-size:10.5px;font-weight:600;
  padding:3px 10px;border-radius:20px;letter-spacing:.3px;white-space:nowrap;
  display:inline-block;
}
.badge-featured{background:rgba(127,119,221,.18);color:var(--purple2);border:1px solid rgba(127,119,221,.25)}
.badge-new{background:rgba(29,158,117,.15);color:var(--green);border:1px solid rgba(29,158,117,.25)}
.badge-popular{background:rgba(240,180,41,.15);color:var(--amber);border:1px solid rgba(240,180,41,.2)}
/* Category colors */
.cat-grammar   {background:rgba(127,119,221,.15);color:#a09ae8}
.cat-vocabulary{background:rgba(29,158,117,.15); color:var(--green)}
.cat-writing   {background:rgba(240,180,41,.15); color:var(--amber)}
.cat-speaking  {background:rgba(240,128,96,.15); color:var(--coral)}
.cat-reading   {background:rgba(212,83,126,.15); color:var(--pink)}
.cat-ielts     {background:rgba(112,184,240,.15);color:var(--blue)}
.cat-general   {background:rgba(136,135,168,.15);color:var(--muted)}

/* ═══════════════════════════════════════════
   POST PAGE
   ═══════════════════════════════════════════ */
.post-page-wrap{max-width:var(--post-w);margin:0 auto;padding:40px 28px 80px}

/* Breadcrumb */
.post-breadcrumb{
  font-size:12.5px;color:var(--faint);font-family:var(--font-display);
  margin-bottom:24px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;
}
.post-breadcrumb a{color:var(--purple);transition:color .15s}
.post-breadcrumb a:hover{color:var(--purple2)}

/* Post header */
.post-badges{display:flex;align-items:center;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.post-title-main{
  font-family:var(--font-display);font-size:32px;font-weight:700;
  color:#fff;line-height:1.28;letter-spacing:-.6px;margin-bottom:16px;
}
.post-meta-bar{
  display:flex;align-items:center;gap:14px;
  font-size:12.5px;color:var(--faint);font-family:var(--font-display);
  flex-wrap:wrap;margin-bottom:32px;
  padding-bottom:20px;border-bottom:1px solid var(--border);
}
.post-meta-bar .author-chip{display:flex;align-items:center;gap:7px;color:var(--muted)}
.post-meta-bar .author-chip .author-avatar{width:26px;height:26px;font-size:11px}

/* ── ARTICLE BODY ───────────────────────────── */
.post-body{line-height:1.82;font-size:16.5px;color:#d4d4ec}
.post-body h2{
  font-family:var(--font-display);font-size:22px;font-weight:700;
  color:#fff;margin:44px 0 14px;letter-spacing:-.3px;
  padding-bottom:10px;border-bottom:1px solid var(--border);
}
.post-body h3{
  font-family:var(--font-display);font-size:18px;font-weight:600;
  color:var(--text);margin:30px 0 10px;letter-spacing:-.2px;
}
.post-body h4{
  font-family:var(--font-display);font-size:15px;font-weight:600;
  color:var(--purple2);margin:20px 0 8px;
}
.post-body p{margin-bottom:18px}
.post-body ul,.post-body ol{margin:0 0 18px 20px}
.post-body li{margin-bottom:9px;line-height:1.7}
.post-body strong{color:var(--text);font-weight:600}
.post-body em{color:var(--purple2);font-style:italic}
.post-body a{color:var(--purple);text-decoration:underline;text-underline-offset:3px}
.post-body a:hover{color:var(--purple2)}
.post-body blockquote{
  margin:28px 0;padding:16px 22px;
  border-left:3px solid var(--purple);
  background:var(--bg2);border-radius:0 var(--radius) var(--radius) 0;
  font-style:italic;color:var(--muted);font-size:15.5px;
}
.post-body blockquote strong{color:var(--purple2)}
.post-body code{
  background:var(--bg3);color:var(--purple2);
  padding:2px 7px;border-radius:5px;
  font-size:14.5px;font-family:'Courier New',monospace;
}
.post-body table{width:100%;border-collapse:collapse;margin:22px 0;font-size:14px;overflow-x:auto;display:block}
.post-body thead th{
  background:var(--bg3);color:var(--text);
  padding:10px 16px;text-align:left;
  font-family:var(--font-display);font-weight:600;
  border-bottom:2px solid var(--purple3);
}
.post-body tbody td{
  padding:10px 16px;border-bottom:1px solid var(--border);color:var(--muted);
  vertical-align:top;
}
.post-body tr:hover td{background:rgba(127,119,221,.04)}

/* Info / Tip / Warning boxes */
.info-box{
  background:rgba(127,119,221,.08);border:1px solid rgba(127,119,221,.18);
  border-radius:var(--radius);padding:16px 20px;margin:24px 0;
}
.info-box-title{
  font-family:var(--font-display);font-size:12px;font-weight:700;
  color:var(--purple2);margin-bottom:8px;
  text-transform:uppercase;letter-spacing:.4px;
}
.tip-box{background:rgba(29,158,117,.07);border-color:rgba(29,158,117,.18)}
.tip-box .info-box-title{color:var(--green)}
.warn-box{background:rgba(240,180,41,.07);border-color:rgba(240,180,41,.18)}
.warn-box .info-box-title{color:var(--amber)}
.info-box p,.info-box li{font-size:14.5px;margin-bottom:6px}
.info-box ul{margin:6px 0 0 16px}

/* ═══════════════════════════════════════════
   SHARE BUTTONS
   ═══════════════════════════════════════════ */
.share-section{
  margin:40px 0;padding:24px 28px;
  background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--radius-lg);text-align:center;
}
.share-section h3{
  font-family:var(--font-display);font-size:15px;font-weight:600;
  color:var(--text);margin-bottom:16px;
}
.share-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.share-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 20px;border-radius:24px;
  font-family:var(--font-display);font-size:13px;font-weight:600;
  border:1px solid var(--border);background:transparent;
  cursor:pointer;transition:all .2s;text-decoration:none;
  white-space:nowrap;
}
.share-btn:hover{transform:translateY(-2px)}
.share-whatsapp{color:#25d366;border-color:rgba(37,211,102,.25)}
.share-whatsapp:hover{background:rgba(37,211,102,.1);border-color:rgba(37,211,102,.4)}
.share-facebook{color:#1877f2;border-color:rgba(24,119,242,.25)}
.share-facebook:hover{background:rgba(24,119,242,.1);border-color:rgba(24,119,242,.4)}
.share-instagram{color:#e1306c;border-color:rgba(225,48,108,.25)}
.share-instagram:hover{background:rgba(225,48,108,.1);border-color:rgba(225,48,108,.4)}
.share-copy{color:var(--muted);border-color:var(--border)}
.share-copy:hover{background:var(--bg3);color:var(--text)}

/* ═══════════════════════════════════════════
   RELATED POSTS
   ═══════════════════════════════════════════ */
.related-section{margin:0 0 50px}
.related-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:14px;
}
.related-card{
  display:block;background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--radius);padding:16px 18px;text-decoration:none;
  transition:border-color .2s,transform .2s,background .2s;
  position:relative;overflow:hidden;
}
.related-card::before{
  content:'';position:absolute;left:0;top:0;bottom:0;
  width:3px;background:var(--purple);border-radius:3px 0 0 3px;
  transform:scaleY(0);transition:transform .2s;transform-origin:bottom;
}
.related-card:hover{border-color:var(--border2);background:var(--bg3);transform:translateY(-2px)}
.related-card:hover::before{transform:scaleY(1)}
.related-card:hover .related-title{color:var(--purple2)}
.related-cat{
  font-size:10px;font-family:var(--font-display);font-weight:600;
  margin-bottom:7px;display:inline-block;
  padding:2px 9px;border-radius:20px;
}
.related-title{
  font-family:var(--font-display);font-size:13.5px;font-weight:600;
  color:var(--text);line-height:1.4;margin-bottom:7px;transition:color .2s;
}
.related-meta{font-size:11px;color:var(--faint);font-family:var(--font-display)}

/* ═══════════════════════════════════════════
   COURSE READING POPUP
   Appears while reading — auto-dismisses
   Controlled by config.js → ads.readingPopup
   ═══════════════════════════════════════════ */
.course-popup{
  position:fixed;bottom:24px;right:24px;z-index:600;
  width:300px;background:var(--bg2);
  border:1px solid var(--border2);border-radius:var(--radius-xl);
  padding:22px 22px 18px;box-shadow:var(--shadow);
  transform:translateY(20px);opacity:0;pointer-events:none;
  transition:transform .35s ease,opacity .35s ease;
}
.course-popup.visible{transform:translateY(0);opacity:1;pointer-events:all}
.popup-close-btn{
  position:absolute;top:10px;right:12px;
  color:var(--faint);font-size:20px;line-height:1;
  padding:2px;transition:color .15s;cursor:pointer;
}
.popup-close-btn:hover{color:var(--muted)}
.popup-eyebrow{
  font-size:10px;color:var(--purple);font-family:var(--font-display);
  font-weight:700;letter-spacing:.5px;text-transform:uppercase;margin-bottom:6px;
}
.popup-title{
  font-family:var(--font-display);font-size:16px;font-weight:700;
  color:#fff;line-height:1.35;margin-bottom:6px;padding-right:20px;
}
.popup-desc{font-size:12.5px;color:var(--muted);line-height:1.55;margin-bottom:14px}
.popup-price{
  font-family:var(--font-display);font-size:24px;font-weight:700;
  color:var(--amber);margin-bottom:12px;
}
.popup-price small{font-size:14px;color:var(--faint);text-decoration:line-through;margin-left:8px;font-weight:400}
.popup-cta{
  display:block;background:var(--purple);color:#fff;
  text-align:center;padding:11px;border-radius:var(--radius);
  font-family:var(--font-display);font-size:13.5px;font-weight:600;
  text-decoration:none;transition:background .2s;
}
.popup-cta:hover{background:var(--purple2);color:#fff}
.popup-timer-bar{
  position:absolute;bottom:0;left:0;
  height:3px;background:var(--purple);
  border-radius:0 0 0 var(--radius-xl);
  animation:timer-shrink linear forwards;
}
@keyframes timer-shrink{from{width:100%}to{width:0%}}

/* ═══════════════════════════════════════════
   SOCIAL PROOF POPUP (enrollment notifications)
   Controlled by config.js → socialProof
   ═══════════════════════════════════════════ */
.sp-popup{
  position:fixed;bottom:24px;left:24px;z-index:600;
  background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:13px 16px;
  display:flex;align-items:center;gap:12px;
  box-shadow:0 4px 24px rgba(0,0,0,.4);
  transform:translateY(12px);opacity:0;pointer-events:none;
  transition:transform .3s ease,opacity .3s ease;max-width:270px;
}
.sp-popup.visible{transform:translateY(0);opacity:1;pointer-events:all}
.sp-avatar{
  width:36px;height:36px;border-radius:50%;
  background:var(--purple3);color:#c8c4ff;
  font-family:var(--font-display);font-weight:700;font-size:13px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.sp-text{flex:1;min-width:0}
.sp-name{font-family:var(--font-display);font-size:12.5px;font-weight:600;color:var(--text)}
.sp-city{font-size:11px;color:var(--faint);font-weight:400}
.sp-action{font-size:11.5px;color:var(--muted);margin-top:2px}

/* ═══════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════ */
.site-footer{
  text-align:center;padding:20px 24px;
  border-top:1px solid var(--border);
  font-size:12px;color:var(--faint);
  font-family:var(--font-display);
}
.site-footer a{color:var(--purple)}

/* ═══════════════════════════════════════════
   SCROLLBAR
   ═══════════════════════════════════════════ */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--bg3);border-radius:10px}
::-webkit-scrollbar-thumb:hover{background:var(--purple3)}

/* ═══════════════════════════════════════════
   RESPONSIVE — TABLET
   ═══════════════════════════════════════════ */
@media(max-width:900px){
  .hero-title{font-size:24px}
  .post-title-main{font-size:27px}
  .featured-grid{grid-template-columns:1fr 1fr}
}

/* ═══════════════════════════════════════════
   RESPONSIVE — MOBILE
   ═══════════════════════════════════════════ */
@media(max-width:640px){
  .header-inner{padding:12px 16px}
  .filter-bar-inner{padding:10px 16px}
  .page-main{padding:22px 16px 60px}
  .post-page-wrap{padding:28px 16px 60px}
  .hero-card{padding:22px 20px}
  .hero-title{font-size:20px}
  .hero-desc{font-size:13.5px}
  .post-title-main{font-size:22px}
  .post-body{font-size:15.5px}
  .post-body h2{font-size:19px}
  .post-body h3{font-size:16px}
  .featured-grid,.all-posts-grid{grid-template-columns:1fr}
  .related-grid{grid-template-columns:1fr 1fr}
  .course-popup{width:calc(100vw - 28px);right:14px;bottom:14px}
  .sp-popup{left:14px;bottom:calc(100px);max-width:calc(100vw - 28px)}
  .share-btns{gap:8px}
  .share-btn{padding:8px 14px;font-size:12px}
  .course-banner{padding:10px 16px}
  .logo{font-size:17px}
}
@media(max-width:380px){
  .related-grid{grid-template-columns:1fr}
  .header-search{max-width:160px}
}

/* ═══════════════════════════════════════════
   REDUCED MOTION (accessibility)
   ═══════════════════════════════════════════ */
@media(prefers-reduced-motion:reduce){
  .ticker-track{animation:none}
  .blog-card,.hero-card,.related-card{transition:none}
  .blog-card::before,.related-card::before{transform:scaleY(1)}
  .course-popup,.sp-popup{transition:none}
}

/* ═══════════════════════════════════════════
   PRINT
   ═══════════════════════════════════════════ */
@media print{
  .ticker-wrap,.site-header,.filter-bar,.course-banner,
  .course-popup,.sp-popup,.share-section,
  .related-section,.site-footer{display:none!important}
  body{background:#fff;color:#000}
  .post-body{color:#111;font-size:14px;line-height:1.7}
  .post-body h2,.post-body h3,.post-title-main{color:#000}
  .post-breadcrumb{color:#555}
  .post-page-wrap{padding:20px 0;max-width:100%}
}