:root {
    --gold:   #C9A020;
    --dark:   #111111;
    --cream:  #F7F4EE;
    --border: #E8E8E8;
    --muted:  #888888;
}

* { box-sizing: border-box; }
a { text-decoration: none; color: inherit; }
html { overflow-x: clip; }
body { overflow-x: clip; }
body { font-family: 'Poppins', sans-serif; color: var(--dark); background: #fff; margin: 0; }

/* CURSOR TRAIL */
.cursor-trail {
    position:fixed;
    width:7px; height:7px;
    border-radius:50%;
    background:var(--gold);
    pointer-events:none;
    z-index:9999;
    transform:translate(-50%,-50%);
    animation:trailFade .65s ease forwards;
}
@keyframes trailFade {
    0%   { opacity:.75; transform:translate(-50%,-50%) scale(1); }
    100% { opacity:0;   transform:translate(-50%,-50%) scale(0); }
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }

/* TOP BAR */
.topbar { background:#111; border-bottom:1px solid #222; font-size:10.5px; color:#aaa; padding:9px 0; letter-spacing:.6px; text-transform:uppercase; }
.btn-submit-top { border:1.5px solid #aaa; color:#aaa; font-size:10px; font-weight:500; letter-spacing:.5px; padding:4px 16px; border-radius:20px; background:transparent; cursor:pointer; font-family:'Poppins',sans-serif; }
.btn-submit-top:hover { background:#aaa; color:#111; }

/* NAVBAR */
.main-nav { border-bottom:1px solid var(--border); padding:12px 0; background:#fff; position:sticky; top:0; z-index:1000; box-shadow:0 1px 4px rgba(0,0,0,.05); }
.brand { font-family:'Poppins',sans-serif; font-size:26px; color:var(--dark); letter-spacing:-.3px; white-space:nowrap; }
.brand .light { font-weight:800; color:var(--dark); }
.brand .bold  { font-weight:400; color:var(--gold); }
.nav-lnk { font-size:10.5px; font-weight:600; letter-spacing:.7px; text-transform:uppercase; color:#444; padding:4px 8px; white-space:nowrap; transition:color .2s; }
.nav-lnk:hover { color:var(--gold); }
.nav-date { font-size:10px; color:#aaa; font-weight:400; white-space:nowrap; letter-spacing:.2px; }
.btn-login { background:var(--gold); color:#fff; font-size:11px; font-weight:600; padding:7px 18px; border-radius:3px; border:none; white-space:nowrap; cursor:pointer; font-family:'Poppins',sans-serif; }
.btn-login:hover { background:#a88010; }
.btn-featured { display:inline-flex; align-items:center; gap:5px; background:#fff; color:var(--dark); font-size:11px; font-weight:700; padding:8px 15px; border-radius:4px; border:1.5px solid var(--gold); white-space:nowrap; cursor:pointer; font-family:'Poppins',sans-serif; text-decoration:none; letter-spacing:.3px; transition:all .2s; }
.btn-featured:hover { background:var(--gold); color:#111; border-color:var(--gold); }
.btn-featured i { font-size:9px; }
@media (max-width:575px) { .btn-featured { font-size:10px; padding:6px 10px; } .btn-featured i { display:none; } }
.btn-nav-wa { display:inline-flex; align-items:center; gap:5px; background:#25D366; color:#fff; font-size:11px; font-weight:700; padding:8px 13px; border-radius:4px; white-space:nowrap; font-family:'Poppins',sans-serif; text-decoration:none; letter-spacing:.2px; opacity:0; pointer-events:none; max-width:0; overflow:hidden; padding-left:0; padding-right:0; transition:opacity .3s, max-width .35s, padding .35s; }
.btn-nav-wa.visible { opacity:1; pointer-events:all; max-width:160px; padding:8px 13px; }
.btn-nav-wa.wa-shake { animation:waShake .65s ease; }
.btn-nav-wa:hover { background:#1aab52; color:#fff; }
.btn-nav-wa i { font-size:13px; flex-shrink:0; }

/* MOBILE NAV ROW */
.mobile-nav-row { display:flex; gap:4px; overflow-x:auto; scrollbar-width:none; padding-bottom:6px; flex-wrap:nowrap; }
.mobile-nav-row::-webkit-scrollbar { display:none; }

/* HERO */
.hero { padding:28px 16px 22px; text-align:center; overflow:hidden; }
.hero h1 { font-size:clamp(22px,3.2vw,44px); font-weight:700; line-height:1.1; color:var(--dark); margin-bottom:10px; white-space:nowrap; }
.hero h1 em { color:var(--gold); font-style:italic; }
.hero .sub { font-size:12px; color:var(--muted); white-space:nowrap; margin:0 auto 20px; line-height:1.5; }
.btn-dark-solid { background:var(--dark); color:#fff; font-size:11px; font-weight:600; letter-spacing:.8px; text-transform:uppercase; padding:12px 26px; border-radius:3px; border:none; cursor:pointer; transition:background .2s; display:inline-block; font-family:'Poppins',sans-serif; }
.btn-dark-solid:hover { background:#333; color:#fff; }
.btn-dark-outline { background:transparent; color:var(--dark); font-size:11px; font-weight:600; letter-spacing:.8px; text-transform:uppercase; padding:12px 26px; border-radius:3px; border:1.5px solid var(--dark); cursor:pointer; transition:all .2s; display:inline-block; font-family:'Poppins',sans-serif; }
.btn-dark-outline:hover { background:var(--dark); color:#fff; }

/* SECTION HEADER */
.sec-head { margin-bottom:12px; border-bottom:1px solid #e0e0e0; padding-bottom:7px; }
.sec-head h2 { font-size:13px; font-weight:600; margin:0; letter-spacing:.2px; }

/* SECTION HEADER + SLIDER ARROWS */
.sec-head-flex { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; border-bottom:1px solid #e0e0e0; padding-bottom:7px; gap:12px; }
.sec-head-flex h2 { font-size:13px; font-weight:600; margin:0; letter-spacing:.2px; }
.sec-head-flex h2 em { color:var(--gold); font-style:italic; }
.sec-head-flex p  { font-size:11px; color:var(--muted); margin:3px 0 0; }
.slider-btns { display:flex; gap:6px; flex-shrink:0; }
.slider-btn { width:28px; height:28px; border-radius:50%; border:1px solid #ddd; background:#f5f5f5; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:12px; color:#888; transition:all .2s; line-height:1; }
.slider-btn:hover { border-color:#aaa; background:#eee; color:#444; }
.slider-btn.next { border-color:#ddd; background:#f5f5f5; color:#888; }
.slider-btn.next:hover { border-color:var(--gold); background:var(--gold); color:#fff; }

/* FEATURED THIS WEEK - HORIZONTAL SCROLL */
.fw-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.fw-scroll::-webkit-scrollbar { display:none; }
.fw-row { display:flex; gap:14px; padding-bottom:4px; }
.fw-card { flex-shrink:0; width:190px; cursor:pointer; color:inherit; display:block; }
.fw-card .art-img { width:100%; aspect-ratio:3/2; border-radius:6px; margin-bottom:8px; transition:opacity .2s; object-fit:cover; object-position:center top; display:block; }
.fw-card:hover .art-img { opacity:.86; }

/* RANKED MAGAZINE SECTION */
.top10-section { background:#fff; padding:14px 0 18px; }
.top10-head { display:flex; align-items:center; justify-content:space-between; padding-bottom:10px; border-bottom:1px solid #e0e0e0; margin-bottom:14px; }
.top10-head h2 { font-size:13px; font-weight:600; color:#111; margin:0; letter-spacing:.2px; }
.top10-btn { background:#f5f5f5 !important; border-color:#ddd !important; color:#888 !important; }
.top10-btn:hover { border-color:#aaa !important; background:#eee !important; color:#444 !important; }

.top10-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.top10-scroll::-webkit-scrollbar { display:none; }
.top10-row { display:flex; align-items:flex-end; padding-bottom:4px; }

.top10-item { display:flex; align-items:flex-end; flex-shrink:0; margin-right:12px; }

/* Bold outlined number — on white background use light stroke */
.top10-num {
    font-size:150px;
    font-weight:900;
    line-height:1;
    color:transparent;
    -webkit-text-stroke:3px #c8c8c8;
    width:100px;
    min-width:100px;
    text-align:right;
    user-select:none;
    letter-spacing:-6px;
    margin-right:-10px;
    position:relative;
    z-index:1;
    font-family:'Arial Black','Arial Bold',Impact,sans-serif;
}

.top10-card {
    width:115px;
    min-width:115px;
    aspect-ratio:2/3;
    border-radius:6px;
    overflow:hidden;
    position:relative;
    z-index:2;
    display:block;
    color:inherit;
    text-decoration:none;
    flex-shrink:0;
    box-shadow:0 4px 16px rgba(0,0,0,.15);
    transition:transform .25s;
}
.top10-card:hover { transform:scale(1.04); }
.top10-card img { width:100%; height:100%; object-fit:cover; display:block; }
.top10-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.88) 0%,rgba(0,0,0,0) 55%); display:flex; flex-direction:column; justify-content:flex-end; padding:8px 9px; }
.top10-vol { font-size:7px; text-transform:uppercase; letter-spacing:1.2px; color:var(--gold); margin-bottom:3px; font-weight:600; }
.top10-title { font-size:10.5px; font-weight:700; color:#fff; line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* EDITOR'S PICK */
.ep-card { border:1px solid var(--border); border-radius:8px; overflow:hidden; }
.ep-img { height:100%; min-height:320px; object-fit:cover; width:100%; }
.ep-body { padding:40px 36px; display:flex; flex-direction:column; justify-content:center; }
.tag-gold { display:inline-block; background:var(--gold); color:#fff; font-size:9px; font-weight:600; letter-spacing:1px; text-transform:uppercase; padding:3px 10px; border-radius:20px; margin-bottom:14px; }
.ep-title { font-size:clamp(20px,2.5vw,30px); font-weight:700; line-height:1.25; color:var(--dark); margin-bottom:14px; }
.ep-desc { font-size:14px; color:#555; line-height:1.72; margin-bottom:14px; }
.ep-author { font-size:12px; color:var(--muted); margin-bottom:22px; }
.read-lnk { font-size:12px; font-weight:600; color:var(--gold); text-transform:uppercase; letter-spacing:.5px; }
.read-lnk:hover { color:var(--dark); }

/* ARTICLE CARD */
.art-card { cursor:pointer; }
.art-img { width:100%; aspect-ratio:3/2; object-fit:cover; object-position:center top; border-radius:6px; margin-bottom:10px; transition:opacity .2s; display:block; }
.art-card:hover .art-img { opacity:.86; }
.art-cat { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.9px; color:var(--gold); margin-bottom:5px; }
.art-title { font-size:11.5px; font-weight:600; line-height:1.35; color:#222; margin-bottom:3px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.art-date { font-size:10px; color:#aaa; font-weight:400; }
.art-author { font-size:11px; color:var(--muted); }

/* TRENDING */
.trending-item { display:flex; align-items:flex-start; gap:14px; padding:14px 0; border-bottom:1px solid #f0f0f0; }
.t-num { font-size:28px; font-weight:700; color:#e0e0e0; line-height:1; min-width:36px; }
.t-cat { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.9px; color:var(--gold); margin-bottom:4px; }
.t-title { font-size:14px; font-weight:600; color:var(--dark); line-height:1.35; margin-bottom:4px; }
.t-author { font-size:11px; color:var(--muted); }
.t-thumb { width:70px; height:65px; object-fit:cover; border-radius:5px; flex-shrink:0; }

/* QUOTE SECTION */
.quote-sec { background:var(--cream); padding:86px 0; text-align:center; }
.why-label { font-size:10px; font-weight:600; letter-spacing:2.5px; text-transform:uppercase; color:#666; margin-bottom:28px; }
.big-quote { font-size:clamp(20px,3vw,36px); font-weight:400; line-height:1.5; color:var(--dark); max-width:780px; margin:0 auto 18px; }
.big-quote em { font-style:italic; font-weight:600; border-bottom:2px solid var(--dark); }
.quote-tagline { font-size:15px; color:#555; }

/* RISING STARS */
.rs-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.rs-scroll::-webkit-scrollbar { display:none; }
.rs-row { display:flex; gap:20px; padding-bottom:4px; justify-content:flex-start; }
.rs-item { text-align:center; flex-shrink:0; min-width:110px; }
.rs-img { width:88px; height:88px; border-radius:50%; object-fit:cover; margin:0 auto 8px; box-shadow:0 3px 12px rgba(0,0,0,.13); }
.rs-sector { font-size:8.5px; font-weight:700; text-transform:uppercase; letter-spacing:1.2px; color:var(--gold); margin-bottom:3px; }
.rs-name { font-size:13px; font-weight:700; color:var(--dark); margin-bottom:2px; }
.rs-company { font-size:11px; color:var(--muted); }

/* FOUNDER VOICES */
.fv-card { padding:26px 22px; border-radius:8px; height:100%; display:flex; flex-direction:column; }
.fv-mark { font-size:48px; line-height:1; margin-bottom:4px; opacity:.4; }
.fv-text { font-size:13px; line-height:1.65; font-style:italic; margin-bottom:14px; flex-grow:1; }
.fv-name { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; }
.fv-role { font-size:11px; opacity:.65; }

/* NEWSLETTER */
.nl-sec { background:linear-gradient(160deg,#0a0f1a 0%,#1a2744 55%,#2a1f0a 100%); border-top:2px solid rgba(201,160,32,.3); color:#fff; padding:86px 0; text-align:center; }
.nl-sec h2 { font-size:clamp(24px,4vw,48px); font-weight:700; color:#fff; line-height:1.2; margin-bottom:8px; }
.nl-sec h2 em { color:var(--gold); font-style:italic; }
.nl-sub { font-size:12px; color:#aaa; margin-bottom:30px; }
.nl-input { background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.15); border-right:none; color:#fff; padding:13px 16px; font-size:13px; border-radius:3px 0 0 3px; min-width:0; flex:1; outline:none; font-family:'Poppins',sans-serif; }
.nl-input::placeholder { color:#888; }
.nl-input:focus { border-color:rgba(201,160,32,.5); background:rgba(255,255,255,.1); }
.nl-btn { background:#8a6a10; color:#fff; border:none; font-size:11px; font-weight:600; letter-spacing:.8px; text-transform:uppercase; padding:13px 20px; border-radius:0 3px 3px 0; white-space:nowrap; cursor:pointer; font-family:'Poppins',sans-serif; }
.nl-btn:hover { background:#6e5410; }

/* ARCHIVE */
.art-card { cursor:pointer; display:block; text-decoration:none; color:inherit; }
.arc-img-wrap { border-radius:8px; overflow:hidden; margin-bottom:9px; }
.arc-img { width:100%; height:190px; object-fit:cover; display:block; transition:transform .4s ease; }
.art-card:hover .arc-img { transform:scale(1.06); }
.art-card:hover .arc-img-wrap { box-shadow:0 8px 24px rgba(201,160,32,.22); }
.arc-cat { font-size:9px; font-weight:700; color:#8a6a10; text-transform:uppercase; letter-spacing:.7px; margin-bottom:4px; }
.arc-title { font-size:17px; font-weight:500; line-height:1.32; color:var(--dark); }

/* SUBMIT STORY */
.submit-sec { background:var(--cream); padding:60px 0; }
.submit-sec .eyebrow { font-size:10px; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:#666; margin-bottom:12px; }
.submit-sec h2 { font-size:clamp(22px,3.5vw,38px); font-weight:700; margin-bottom:8px; }
.submit-sec p { font-size:14px; color:#666; margin:0; }
.submit-lnk { font-size:13px; font-weight:600; color:var(--dark); border-bottom:2px solid var(--dark); padding-bottom:2px; white-space:nowrap; }
.submit-lnk:hover { color:var(--gold); border-color:var(--gold); }

/* FOOTER */
.site-footer { background:linear-gradient(145deg,#0d1117 0%,#1a2744 100%); border-top:2px solid rgba(201,160,32,.25); color:#888; padding:48px 0 26px; }
.ft-row { display:flex; flex-wrap:wrap; gap:36px 64px; }
.ft-about { flex:1 1 320px; }
.ft-col { flex:0 0 auto; min-width:150px; }
.ft-brand { display:inline-block; font-size:30px; margin-bottom:14px; text-decoration:none; }
.ft-brand-inc { color:#fff; font-weight:800; }
.ft-brand-biz { color:var(--gold); font-weight:400; }
.ft-desc { font-size:13.5px; line-height:1.7; color:#9aa3b2; max-width:340px; margin:0; }
.ft-head { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1.2px; color:#fff; margin-bottom:18px; }
.ft-links { list-style:none; padding:0; margin:0; }
.ft-links li { margin-bottom:11px; }
.ft-links a { font-size:13.5px; color:#9aa3b2; text-decoration:none; transition:color .2s; }
.ft-links a i { margin-right:6px; }
.ft-links a:hover { color:var(--gold); }
.ft-bottom { border-top:1px solid rgba(255,255,255,.08); margin-top:36px; padding-top:18px; font-size:12px; color:#6b7385; }
.ft-bottom a { color:#555; }
.ft-bottom a:hover { color:var(--gold); }

/* ============ WHATSAPP CTA BANNER ============ */
.wa-banner { background:linear-gradient(145deg,#0d1117 0%,#1a2744 100%); border-bottom:1px solid rgba(201,160,32,.25); }
.wa-banner-inner { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 20px; max-width:1320px; margin:0 auto; }
.wa-banner-left { display:flex; align-items:center; gap:12px; flex:1; min-width:0; }
.wa-icon { width:34px; height:34px; background:#25D366; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; animation:waPulse 2s ease-in-out infinite; }
.wa-icon i { color:#fff; font-size:17px; }
@keyframes waPulse {
    0%,100% { box-shadow:0 0 0 0 rgba(37,211,102,.5); }
    50%      { box-shadow:0 0 0 8px rgba(37,211,102,0); }
}
@keyframes waShake {
    0%,100% { transform:translateX(0) rotate(0); }
    15%     { transform:translateX(-5px) rotate(-2deg); }
    30%     { transform:translateX(5px) rotate(2deg); }
    45%     { transform:translateX(-4px) rotate(-1deg); }
    60%     { transform:translateX(4px) rotate(1deg); }
    75%     { transform:translateX(-2px); }
    88%     { transform:translateX(2px); }
}
.wa-cta.wa-shake { animation:waShake .65s ease; }
.wa-text { display:flex; align-items:center; gap:10px; flex-wrap:wrap; min-width:0; }
.wa-tag { background:var(--gold); color:#111; font-size:8.5px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; padding:2px 7px; border-radius:3px; flex-shrink:0; }
.wa-msg { font-size:12.5px; color:#ccc; line-height:1.3; }
.wa-msg strong { color:#fff; }
.wa-cta { background:#15803d; color:#fff; font-size:11px; font-weight:700; padding:8px 16px; border-radius:6px; text-decoration:none; white-space:nowrap; display:flex; align-items:center; gap:6px; flex-shrink:0; transition:background .2s; letter-spacing:.3px; }
.wa-cta:hover { background:#0f6b30; color:#fff; }
.wa-close { background:none; border:none; color:#555; font-size:18px; cursor:pointer; padding:2px 4px; flex-shrink:0; line-height:1; transition:color .2s; }
.wa-close:hover { color:#fff; }

@media (max-width:767px) {
    .wa-banner-inner { padding:9px 14px; gap:8px; }
    .wa-tag { display:none; }
    .wa-msg { font-size:11.5px; }
    .wa-cta { padding:7px 11px; font-size:10px; }
    .wa-cta .bi-arrow-right { display:none; }
}

/* ============ HAMBURGER BUTTON ============ */
.hbg-btn { background:none; border:none; cursor:pointer; padding:6px; display:flex; flex-direction:column; justify-content:center; gap:5px; width:36px; height:36px; }
.hbg-btn span { display:block; width:22px; height:2px; background:var(--dark); border-radius:2px; transition:transform .3s, opacity .3s; }

/* ============ DRAWER OVERLAY ============ */
.hbg-overlay { position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:1040; opacity:0; pointer-events:none; transition:opacity .3s; }
.hbg-overlay.open { opacity:1; pointer-events:all; }

/* ============ SLIDE DRAWER ============ */
.hbg-drawer { position:fixed; top:0; left:0; height:100dvh; width:290px; max-width:85vw; background:#fff; z-index:1050; transform:translateX(-100%); transition:transform .35s cubic-bezier(.25,.46,.45,.94); display:flex; flex-direction:column; box-shadow:6px 0 40px rgba(0,0,0,.18); }
.hbg-drawer.open { transform:translateX(0); }

.hbg-drawer-head { display:flex; align-items:center; justify-content:space-between; padding:18px 20px 14px; border-bottom:1px solid var(--border); flex-shrink:0; }
.hbg-logo { font-size:19px; letter-spacing:-.3px; }
.hbg-light { font-weight:800; color:var(--dark); }
.hbg-bold { font-weight:400; color:var(--gold); }

.hbg-close { background:none; border:1px solid var(--border); border-radius:6px; font-size:13px; cursor:pointer; color:#666; padding:5px 9px; line-height:1; }
.hbg-close:hover { background:var(--dark); color:#fff; border-color:var(--dark); }

.hbg-nav { flex:1; overflow-y:auto; padding:8px 0; }
.hbg-lnk { display:flex; align-items:center; gap:12px; padding:14px 20px; font-size:14px; font-weight:500; color:#333; text-decoration:none; border-bottom:1px solid #f7f7f7; transition:background .15s, color .15s; }
.hbg-lnk i { font-size:15px; color:#bbb; width:18px; text-align:center; flex-shrink:0; }
.hbg-lnk:hover { background:var(--cream); color:var(--dark); }
.hbg-lnk:hover i { color:var(--gold); }

.hbg-footer { padding:16px 20px; border-top:1px solid var(--border); flex-shrink:0; background:#fff; }
.hbg-login-btn { width:100%; padding:13px; background:var(--gold); color:#111; border:none; border-radius:7px; font-size:14px; font-weight:700; cursor:pointer; font-family:inherit; letter-spacing:.3px; transition:background .2s; display:flex; align-items:center; justify-content:center; gap:7px; text-decoration:none; box-shadow:0 0 0 3px rgba(201,160,32,.2); }
.hbg-login-btn:hover { background:#b38a15; color:#111; }

/* ============ SCROLL REVEAL ============ */
.reveal {
    opacity:0;
    transform:translateY(24px);
    transition:opacity .55s ease, transform .55s ease;
}
.reveal.revealed {
    opacity:1;
    transform:translateY(0);
}

/* ============ SIDEBAR: ABOUT US ============ */
.hm-about { background:var(--cream); border-radius:10px; padding:18px 16px; border-left:3px solid var(--gold); }
.hm-about-logo { font-size:20px; margin-bottom:10px; letter-spacing:-.5px; }
.hm-about-light { color:var(--dark); font-weight:800; }
.hm-about-bold { color:var(--gold); font-weight:400; }
.hm-about-desc { font-size:11.5px; color:#555; line-height:1.65; margin-bottom:12px; }
.hm-about-lnk { font-size:10.5px; font-weight:700; color:var(--dark); text-decoration:none; display:inline-flex; align-items:center; gap:5px; letter-spacing:.3px; }
.hm-about-lnk:hover { color:var(--gold); }

/* ============ SIDEBAR: RISING STARS WITH CIRCLES ============ */
.hm-side-rs-item { display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid #222; text-decoration:none; color:inherit; }
.hm-side-rs-item:last-of-type { border-bottom:none; }
.hm-side-rs-img { width:36px; height:36px; border-radius:50%; object-fit:cover; flex-shrink:0; border:1.5px solid rgba(201,160,32,.4); }
.hm-side-rs-info { flex:1; min-width:0; }
.hm-side-rs-name { font-size:12px; font-weight:600; color:#e8e8e8; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hm-side-rs-co { font-size:10px; color:#777; margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ============ SIDEBAR: EDITOR'S PICK ============ */
.hm-side-pick { background:#fff; border:1px solid var(--border); border-radius:10px; padding:14px; }
.hm-side-pick-label { font-size:9px; font-weight:800; letter-spacing:2px; text-transform:uppercase; color:var(--gold); margin-bottom:10px; }
.hm-side-pick-img-wrap { position:relative; border-radius:7px; overflow:hidden; aspect-ratio:16/9; margin-bottom:10px; }
.hm-side-pick-img-wrap img { width:100%; height:100%; object-fit:cover; transition:transform .35s; display:block; }
.hm-side-pick:hover .hm-side-pick-img-wrap img { transform:scale(1.05); }
.hm-side-pick-cat { position:absolute; bottom:8px; left:8px; background:var(--gold); color:#111; font-size:7px; font-weight:800; letter-spacing:1px; text-transform:uppercase; padding:3px 7px; border-radius:3px; }
.hm-side-pick-title { font-size:13px; font-weight:700; color:var(--dark); line-height:1.35; margin-bottom:6px; }
.hm-side-pick-excerpt { font-size:11px; color:var(--muted); line-height:1.5; margin-bottom:10px; }
.hm-side-pick-lnk { font-size:10px; font-weight:700; color:var(--dark); text-decoration:none; letter-spacing:.5px; display:flex; align-items:center; gap:5px; }
.hm-side-pick-lnk:hover { color:var(--gold); }

/* ============ SIDEBAR: TOPICS ============ */
.hm-side-topics { background:var(--cream); border-radius:10px; padding:14px 16px; }
.hm-side-topics-head { font-size:9px; font-weight:800; letter-spacing:2px; text-transform:uppercase; color:var(--muted); margin-bottom:12px; }
.hm-topics-wrap { display:flex; flex-wrap:wrap; gap:7px; }
.hm-topic { display:inline-block; padding:5px 11px; border-radius:20px; background:#fff; border:1px solid var(--border); font-size:10.5px; font-weight:500; color:#444; text-decoration:none; transition:all .2s; white-space:nowrap; }
.hm-topic:hover { background:var(--dark); color:#fff; border-color:var(--dark); }
.hm-topic-gold { background:var(--gold); color:#111 !important; border-color:var(--gold) !important; font-weight:700; }
.hm-topic-gold:hover { background:#b38a15; border-color:#b38a15; }

/* ============ SIDEBAR: NEWSLETTER ============ */
.hm-side-nl { background:linear-gradient(160deg,#0a0f1a 0%,#1a2744 55%,#2a1f0a 100%); border-radius:10px; padding:18px 16px; text-align:center; border-top:2px solid rgba(201,160,32,.5); }
.hm-side-nl-icon { font-size:24px; margin-bottom:8px; }
.hm-side-nl-title { font-size:14px; font-weight:700; color:#fff; margin-bottom:4px; }
.hm-side-nl-sub { font-size:11px; color:#aaa; line-height:1.5; margin-bottom:14px; }
.hm-side-nl-input { width:100%; padding:9px 12px; border-radius:6px; border:1px solid #333; background:#1e1e1e; color:#fff; font-size:11.5px; margin-bottom:8px; outline:none; font-family:inherit; }
.hm-side-nl-input::placeholder { color:#666; }
.hm-side-nl-input:focus { border-color:var(--gold); }
.hm-side-nl-btn { width:100%; padding:9px; border-radius:6px; background:var(--gold); color:#111; font-size:11px; font-weight:800; letter-spacing:1px; border:none; cursor:pointer; text-transform:uppercase; transition:opacity .2s; font-family:inherit; }
.hm-side-nl-btn:hover { opacity:.85; }

/* GET FEATURED sidebar card */
.hm-side-gf { background:linear-gradient(145deg,#fff8e8 0%,#fff3d0 100%); border:1.5px solid rgba(201,160,32,.35); border-radius:10px; padding:20px 16px; text-align:center; }
.hm-side-gf-star { font-size:22px; color:var(--gold); margin-bottom:10px; }
.hm-side-gf-title { font-size:15px; font-weight:800; color:#111; letter-spacing:.3px; margin-bottom:6px; }
.hm-side-gf-sub { font-size:11px; color:#666; line-height:1.6; margin-bottom:14px; }
.hm-side-gf-btn { display:inline-flex; align-items:center; gap:6px; background:var(--dark); color:var(--gold); font-size:11px; font-weight:700; padding:9px 20px; border-radius:5px; text-decoration:none; letter-spacing:.3px; transition:all .2s; border:1.5px solid var(--dark); }
.hm-side-gf-btn:hover { background:var(--gold); color:#111; border-color:var(--gold); }

/* UTILS */
.bg-off { background:#fafafa; }

/* TABLET */
@media (max-width:991px) {
    .ep-body { padding:24px 22px; }
    .ep-img { min-height:240px; }
    .rs-img { width:130px; height:130px; }
    .rs-row { gap:20px; }
}

/* ============ TWO-COLUMN HOMEPAGE ============ */
.hm-wrap { padding:28px 0 32px; }
.hm-label { font-size:9.5px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase; color:var(--muted); margin-bottom:6px; }
.hm-sec-head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:16px; border-bottom:1px solid var(--border); padding-bottom:8px; }
.hm-sec-title { font-size:22px; font-weight:700; margin:0; color:var(--dark); }
.hm-see-all { font-size:9.5px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:#8a6a10; text-decoration:none; white-space:nowrap; }
.hm-see-all:hover { color:var(--dark); }

/* Magazine grid: 5 columns */
.hm-mags-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:32px; }
.hm-mag-card { display:block; color:inherit; text-decoration:none; animation:hmFadeUp .5s ease both; }
.hm-mag-card:nth-child(1) { animation-delay:.05s; }
.hm-mag-card:nth-child(2) { animation-delay:.12s; }
.hm-mag-card:nth-child(3) { animation-delay:.19s; }
.hm-mag-card:nth-child(4) { animation-delay:.26s; }
.hm-mag-card:nth-child(5) { animation-delay:.33s; }
@keyframes hmFadeUp {
    from { opacity:0; transform:translateY(22px); }
    to   { opacity:1; transform:translateY(0); }
}
.hm-mag-img-wrap { position:relative; border-radius:10px; overflow:hidden; margin-bottom:10px; transition:box-shadow .25s; }
.hm-mag-img-wrap img { width:100%; height:auto; transition:transform .4s ease; display:block; }
.hm-mag-card:hover .hm-mag-img-wrap { box-shadow:0 10px 28px rgba(0,0,0,.18); }
.hm-mag-card:hover .hm-mag-img-wrap img { transform:scale(1.07); }
.hm-mag-badge { position:absolute; top:12px; left:12px; background:rgba(0,0,0,.55); backdrop-filter:blur(4px); color:#fff; font-size:9px; font-weight:700; letter-spacing:1px; text-transform:uppercase; padding:4px 8px; border-radius:3px; }
.hm-mag-rank { position:absolute; bottom:8px; right:12px; font-size:68px; font-weight:900; color:rgba(255,255,255,.15); line-height:1; font-family:'Arial Black',Impact,sans-serif; }
.hm-mag-foot { padding:0 2px; }
.hm-mag-title { font-size:14.5px; font-weight:700; color:var(--dark); margin-bottom:6px; line-height:1.3; }
.hm-mag-meta { display:flex; justify-content:space-between; align-items:center; }
.hm-mag-cat { font-size:10.5px; font-weight:600; letter-spacing:.8px; text-transform:uppercase; color:var(--muted); }
.hm-mag-date { font-size:10.5px; color:var(--gold); font-weight:600; }

/* Stories grid: 3 columns using archive card style */
.hm-stories-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }

/* Latest news list: compact rows — small thumb left, kicker + title + byline right */
.hm-news-list { display:grid; grid-template-columns:repeat(3,1fr); gap:24px 20px; }
.hm-news-row { display:flex; gap:12px; align-items:flex-start; padding-bottom:20px; border-bottom:1px solid var(--border); text-decoration:none; color:inherit; }
.hm-news-thumb { width:104px; flex-shrink:0; border-radius:8px; overflow:hidden; background:#f0f0f0; }
.hm-news-thumb img { width:100%; height:82px; object-fit:cover; display:block; transition:transform .4s ease; }
.hm-news-row:hover .hm-news-thumb img { transform:scale(1.06); }
.hm-news-body { min-width:0; }
.hm-news-kicker { font-size:9.5px; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:var(--dark); margin-bottom:5px; }
.hm-news-title { font-size:15px; font-weight:700; line-height:1.32; color:var(--dark); margin:0 0 6px; }
.hm-news-row:hover .hm-news-title { color:#8a6a10; }
.hm-news-meta { font-size:11.5px; color:var(--muted); }

/* SIDEBAR CARDS */
.hm-side-card { background:linear-gradient(145deg,#0d1117 0%,#1a2744 100%); border-radius:10px; padding:18px 16px; border-top:2px solid rgba(201,160,32,.35); }
.hm-side-head { display:flex; justify-content:space-between; align-items:center; font-size:10.5px; font-weight:800; letter-spacing:2px; color:#fff; margin-bottom:14px; }
.hm-side-dot { width:7px; height:7px; border-radius:50%; background:var(--gold); flex-shrink:0; }

/* Rising Stars sidebar */
.hm-rs-item { display:flex; justify-content:space-between; align-items:center; padding:11px 0; border-bottom:1px solid #222; text-decoration:none; color:inherit; }
.hm-rs-item:last-of-type { border-bottom:none; }
.hm-rs-title { font-size:12.5px; font-weight:600; color:#e8e8e8; line-height:1.3; }
.hm-rs-num { font-size:10px; font-weight:700; color:var(--gold); flex-shrink:0; margin-left:10px; }

/* Trending sidebar */
.hm-trend-item { display:flex; gap:10px; align-items:flex-start; padding:11px 0; border-bottom:1px solid #222; text-decoration:none; color:inherit; }
.hm-trend-item:last-of-type { border-bottom:none; }
.hm-trend-num { font-size:13px; font-weight:800; color:var(--gold); flex-shrink:0; min-width:22px; line-height:1.3; }
.hm-trend-title { font-size:12px; font-weight:400; color:#bbb; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* Explore All button */
.hm-side-btn { display:block; margin-top:14px; background:var(--gold); color:#111 !important; text-align:center; padding:10px; border-radius:6px; font-size:9.5px; font-weight:800; letter-spacing:1.5px; text-decoration:none !important; text-transform:uppercase; transition:opacity .2s; }
.hm-side-btn:hover { opacity:.85; }

/* Responsive */
@media (max-width:991px) {
    .hm-mags-grid { grid-template-columns:repeat(3,1fr); }
    .hm-stories-grid { grid-template-columns:repeat(2,1fr); }
    .hm-sec-title { font-size:18px; }
    /* Tablet: keep the 3-column news grid, just tighten gaps and thumb size */
    .hm-news-list { gap:20px 14px; }
    .hm-news-thumb { width:84px; }
    .hm-news-thumb img { height:66px; }
    .hm-news-title { font-size:13.5px; }
    .hm-news-kicker { font-size:9px; }
    .hm-news-meta { font-size:10.5px; }
}
@media (max-width:767px) {
    .hm-wrap { padding:16px 0 20px; }
    /* Magazines: horizontal scroll on mobile — 2 full + half of 3rd visible */
    .hm-mags-grid { display:flex; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; gap:10px; padding-bottom:6px; grid-template-columns:unset; padding-right:12px; }
    .hm-mags-grid::-webkit-scrollbar { display:none; }
    .hm-mags-grid .hm-mag-card { width:calc((100vw - 58px) / 2.5); min-width:calc((100vw - 58px) / 2.5); flex-shrink:0; }
    /* Stories: 1 column on mobile */
    .hm-stories-grid { grid-template-columns:repeat(2,1fr); gap:10px; }
    .hm-sec-title { font-size:17px; }
    /* Phone: back to a single-column list with a bigger, full-width-style thumb */
    .hm-news-list { grid-template-columns:1fr; gap:0; }
    .hm-news-row { gap:12px; padding:14px 0; border-bottom:1px solid var(--border); }
    .hm-news-thumb { width:112px; border-radius:8px; }
    .hm-news-thumb img { height:76px; }
    .hm-news-kicker { font-size:9.5px; margin-bottom:4px; }
    .hm-news-title { font-size:14.5px; margin-bottom:5px; }
    .hm-news-meta { font-size:11px; }
}

/* MOBILE */
@media (max-width:767px) {
    .hero { padding:24px 16px 20px; }
    .hero h1 { white-space:normal; font-size:clamp(22px,6vw,36px); }
    .hero .sub { white-space:normal; text-align:center; }
    .ep-img { min-height:220px; }
    .quote-sec, .nl-sec { padding:56px 0; }

    /* Tighten section vertical padding so 3 sections fit above fold */
    .sec-home-tight { padding-top:10px !important; padding-bottom:10px !important; }

    /* Featured cards: slightly narrower on mobile */
    .fw-card { width:145px; }

    /* Ranked magazines: scale down on mobile */
    .top10-num { font-size:100px; width:68px; min-width:68px; margin-right:-8px; -webkit-text-stroke:2px #c8c8c8; }
    .top10-card { width:78px; min-width:78px; }
    .top10-item { margin-right:6px; }

    /* Rising Stars: compact but name visible */
    .rs-img { width:64px; height:64px; }
    .rs-name { font-size:11px; }
    .rs-company { display:none; }
    .rs-row { gap:10px; justify-content:flex-start; }
    .rs-item { min-width:72px; }

    /* Archive: portrait on mobile */
    .arc-img { height:160px; }
    .arc-title { font-size:15px; }
}

/* ── MOBILE APP-STYLE TAB BAR (below 992px) ── */
.app-tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040;
    display: flex; background: #fff; border-top: 1px solid var(--border);
    box-shadow: 0 -4px 18px rgba(0,0,0,.06);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
}
.app-tab {
    flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 4px 2px; color: #777; text-decoration: none; font-size: 10.5px; font-weight: 600;
    line-height: 1.15; text-align: center; border-radius: 10px; transition: color .15s;
}
.app-tab i { font-size: 20px; line-height: 1; }
.app-tab span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.app-tab.active, .app-tab:hover { color: var(--dark); }
.app-tab.active i { color: var(--gold); }
@media (max-width: 991px) {
    /* Room for the tab bar inside the dark footer, so no white strip shows below it */
    .site-footer { padding-bottom: calc(28px + 64px + env(safe-area-inset-bottom)); }
    .back-to-top-btn { bottom: calc(78px + env(safe-area-inset-bottom)) !important; }
}

/* ── LISTING PAGES (News, Stories, AI Tools) ── */
.lst-wrap { padding: 26px 0 56px; }
.lst-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
.lst-card { display: flex; gap: 16px; padding: 18px 0; border-top: 1px solid var(--border); color: inherit; text-decoration: none; }
.lst-grid > .lst-card:nth-child(-n+2) { border-top: none; padding-top: 4px; }
.lst-card-img { width: 200px; aspect-ratio: 16 / 10; height: auto; flex-shrink: 0; border-radius: 8px; object-fit: cover; background: #f0f0f0; align-self: flex-start; }
.lst-card-img.is-designed-cover { object-position: left center; }

/* Guide cards (AI Tools list / homepage): gold-framed cover, title, summary, byline */
.gc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.gc-card { display: flex; flex-direction: column; background: #fff; border: 1px solid #e4e4e4; border-radius: 6px; overflow: hidden; color: inherit; text-decoration: none; transition: transform .2s, box-shadow .2s, border-color .2s; }
/* Hover lift only where there is a real hover (mouse/trackpad). On touch screens a hover
   style on the first tap made phones need a second tap to open the post. */
@media (hover: hover) and (pointer: fine) {
    .gc-card:hover { transform: translateY(-3px); border-color: var(--gold); box-shadow: 0 12px 28px rgba(20,26,46,.10); }
    .gc-card:hover .gc-title { color: #8a6a10; }
}
/* No 300ms double-tap-zoom wait on links and buttons */
a, button { touch-action: manipulation; }
.gc-img { border: 3px solid var(--gold); border-radius: 6px 6px 0 0; overflow: hidden; background: #eef4fc; } /* cover runs edge to edge */
.gc-img picture { display: block; }
.gc-img img { display: block; width: 100%; aspect-ratio: 1200 / 630; height: auto; object-fit: cover; }
.gc-body { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.gc-title { font-size: clamp(20px, 1.7vw, 24px); font-weight: 600; line-height: 1.25; color: var(--dark); margin: 0 0 12px; }
.gc-sum { font-size: 16px; font-weight: 400; line-height: 1.4; color: #555; margin: 0 0 16px; max-height: 2.8em; overflow: hidden; }
.gc-meta { margin-top: auto; font-size: 12.5px; color: #888; }
@media (max-width: 991px)  { .gc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
@media (max-width: 575px)  { .gc-grid { grid-template-columns: 1fr; gap: 18px; } } /* keep the cover's left-aligned title in the crop */
.lst-card-body { min-width: 0; padding-top: 2px; }
.lst-title { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 16px; line-height: 1.35; color: var(--dark); margin: 0 0 6px; transition: color .15s; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.lst-card:hover .lst-title { color: var(--gold); }
.lst-summary { font-size: 13px; color: #777; line-height: 1.5; margin: 0 0 6px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.lst-meta { font-size: 11px; color: #b5b5b5; white-space: nowrap; }
.lst-empty { text-align: center; padding: 56px 16px; color: #999; font-size: 14px; border: 1px dashed var(--border); border-radius: 12px; }
.lst-empty i { font-size: 28px; display: block; margin-bottom: 8px; opacity: .5; }
.lst-pager { margin-top: 26px; }

/* Category filter chips pinned under the header — one horizontally scrolling row */
.lst-filters { position: sticky; top: 63px; z-index: 990; background: #fff; border-bottom: 1px solid var(--border); }
.lst-filters-row { display: flex; gap: 8px; overflow-x: auto; padding: 10px 0; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.lst-filters-row::-webkit-scrollbar { display: none; }
.lst-chip { flex-shrink: 0; font-size: 12.5px; font-weight: 500; padding: 7px 15px; border-radius: 20px; border: 1px solid var(--border); color: #777; background: #fff; text-decoration: none; white-space: nowrap; transition: all .15s; }
.lst-chip:hover { border-color: #bbb; color: #444; }
.lst-chip.active { background: #333; border-color: #333; color: #fff; }

.nav-lnk.active { color: var(--gold); }

@media (max-width: 991px) {
    .lst-grid { grid-template-columns: 1fr; }
    .lst-grid > .lst-card:nth-child(2) { border-top: 1px solid var(--border); padding-top: 18px; }
}
@media (max-width: 575px) {
    .lst-wrap { padding: 18px 0 32px; }
    .lst-card { gap: 12px; padding: 14px 0; }
    .lst-card-img { width: 112px; aspect-ratio: 4 / 3; }
    .lst-title { font-size: 14.5px; -webkit-line-clamp: 3; }
    .lst-summary { font-size: 12.5px; }
    .lst-filters { top: 59px; }
}
.lst-results { transition: opacity .18s ease; }
.lst-results.is-loading { opacity: .35; }
@media (max-width: 767px) {
    /* Show every filter at once: an even 4-column grid of small chips */
    .lst-filters-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; gap: 6px; padding: 8px 0; }
    .lst-chip { font-size: 10.5px; padding: 5px 4px; text-align: center; overflow: hidden; text-overflow: ellipsis; }
}