/* ─── CSS Variables ─────────────────────────────────────── */
:root {
  --orange-50:#fff8eb;--orange-100:#ffecc4;--orange-200:#ffd88a;
  --orange-300:#ffc14d;--orange-400:#f5a623;--orange-500:#e0900d;
  --orange-600:#c47508;--orange-glow:rgba(245,166,35,.12);
  --orange-glow-md:rgba(245,166,35,.20);--orange-glow-lg:rgba(245,166,35,.08);
  --n-950:#06090f;--n-900:#0b1120;--n-850:#0f1629;--n-800:#141d34;
  --n-700:#1c2844;--n-600:#283756;--n-500:#3d4f6f;--n-400:#5b6b8a;
  --n-300:#8594b0;--n-200:#b0bdd4;--n-100:#d5dde9;--n-50:#eef1f6;
  --white:#fff;--bg:var(--n-950);--bg-raised:var(--n-900);
  --bg-overlay:var(--n-850);--bg-interactive:var(--n-800);
  --text:var(--n-50);--text-2:var(--n-300);--text-3:var(--n-400);
  --text-4:var(--n-500);--accent:var(--orange-400);
  --accent-hover:var(--orange-300);
  --border-subtle:rgba(255,255,255,.06);--border-medium:rgba(255,255,255,.10);
  --border-accent:rgba(245,166,35,.25);
  --f-display:'Outfit',sans-serif;--f-body:'DM Sans',sans-serif;
  --space-xs:4px;--space-sm:8px;--space-md:16px;--space-lg:24px;
  --space-xl:40px;--space-2xl:64px;--space-3xl:96px;
  --r-sm:6px;--r-md:10px;--r-lg:16px;--r-xl:24px;--r-full:9999px;
  --shadow-sm:0 1px 3px rgba(0,0,0,.3);--shadow-md:0 4px 20px rgba(0,0,0,.4);
  --shadow-lg:0 8px 40px rgba(0,0,0,.5);
  --shadow-glow:0 0 60px var(--orange-glow-lg);
  --shadow-glow-sm:0 0 30px var(--orange-glow);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --duration:.4s;--duration-slow:.7s;--max-w:1180px
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--f-body);background:var(--bg);color:var(--text);line-height:1.65;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit;transition:color var(--duration) var(--ease-out)}
button{cursor:pointer;border:0;background:0;font-family:inherit}
ul,ol{list-style:none}
input,textarea,select{font-family:inherit}

.container{width:100%;max-width:var(--max-w);margin:0 auto;padding-left:var(--space-lg);padding-right:var(--space-lg)}

/* ─── Topbar ─── */
.topbar{background:var(--accent);color:var(--n-950);text-align:center;padding:7px var(--space-md);font-size:12.5px;font-weight:600;letter-spacing:.5px;font-family:var(--f-display)}

/* ─── Nav ─── */
.nav{position:sticky;top:0;z-index:100;background:rgba(6,9,15,.8);backdrop-filter:blur(24px) saturate(1.5);-webkit-backdrop-filter:blur(24px) saturate(1.5);border-bottom:1px solid var(--border-subtle)}
.nav-inner{max-width:var(--max-w);margin:0 auto;padding:0 var(--space-lg);display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{display:flex;align-items:center;gap:10px}
.logo-icon{width:22px;height:22px;object-fit:contain;filter:invert(1)}
.logo-mark{width:36px;height:36px;border-radius:var(--r-sm);background:linear-gradient(135deg,var(--orange-400),var(--orange-500));display:grid;place-items:center;font-family:var(--f-display);font-weight:800;font-size:14px;color:var(--n-950);letter-spacing:-.5px}
.logo-text{font-family:var(--f-display);font-size:20px;font-weight:700;letter-spacing:-.5px;color:var(--white)}
.logo-text span{color:var(--accent)}
.nav-menu{display:flex;align-items:center;gap:36px}
.nav-menu a{font-family:var(--f-display);font-size:13.5px;font-weight:500;color:var(--text-3);letter-spacing:.2px;position:relative;padding:4px 0}
.nav-menu a::after{content:'';position:absolute;bottom:-2px;left:0;width:0;height:2px;background:var(--accent);border-radius:2px;transition:width var(--duration) var(--ease-out)}
.nav-menu a:hover,.nav-menu a.active{color:var(--text)}
.nav-menu a:hover::after,.nav-menu a.active::after{width:100%}
.nav-menu a.nav-cta-btn{font-family:var(--f-display);font-size:13px;font-weight:600;color:var(--n-950)!important;background:var(--accent);padding:9px 20px;border-radius:var(--r-full);letter-spacing:.2px;transition:all var(--duration) var(--ease-out);position:relative}
.nav-menu a.nav-cta-btn::after{display:none!important}
.nav-menu a.nav-cta-btn:hover{color:var(--n-950)!important;background:var(--accent-hover);box-shadow:0 0 24px var(--orange-glow-md);transform:translateY(-1px)}
.hamburger{display:none;width:28px;height:20px;flex-direction:column;justify-content:space-between;padding:0}
.hamburger span{display:block;width:100%;height:2px;background:var(--text);border-radius:2px;transition:all .3s ease;transform-origin:center}
.hamburger.open span:nth-child(1){transform:translateY(9px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}
.nav-overlay{display:none;position:fixed;inset:0;top:64px;background:rgba(6,9,15,.97);backdrop-filter:blur(20px);z-index:99;padding:var(--space-xl) var(--space-lg);flex-direction:column;gap:var(--space-lg)}
.nav-overlay.open{display:flex}
.nav-overlay a{font-family:var(--f-display);font-size:20px;font-weight:600;color:var(--text-2);padding:var(--space-md) 0;border-bottom:1px solid var(--border-subtle);transition:color .3s,padding-left .3s}
.nav-overlay a:hover{color:var(--accent);padding-left:var(--space-sm)}

/* ─── Dot grid ─── */
.dot-grid{position:absolute;inset:0;background-image:radial-gradient(circle,var(--border-subtle) 1px,transparent 1px);background-size:32px 32px;pointer-events:none;mask-image:radial-gradient(ellipse 60% 50% at 50% 50%,black 30%,transparent 100%)}

/* ─── Blog Hero ─── */
.blog-hero{position:relative;padding:var(--space-3xl) 0 var(--space-2xl);overflow:hidden;text-align:center}
.blog-hero .hero-orb{position:absolute;border-radius:50%;filter:blur(100px);pointer-events:none}
.blog-hero .hero-orb-1{width:500px;height:500px;background:var(--orange-glow-lg);top:-150px;right:-100px}
.blog-hero .hero-orb-2{width:350px;height:350px;background:rgba(245,166,35,.04);bottom:-100px;left:-80px}
.blog-hero-tag{display:inline-flex;align-items:center;gap:var(--space-sm);padding:5px 14px 5px 8px;background:var(--orange-glow);border:1px solid var(--border-accent);border-radius:var(--r-full);font-family:var(--f-display);font-size:12px;font-weight:600;color:var(--accent);letter-spacing:.5px;text-transform:uppercase;margin-bottom:var(--space-lg);opacity:0;animation:rise .7s var(--ease-out) .05s forwards}
.tag-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);animation:blink 2s ease-in-out infinite}
.blog-hero h1{font-family:var(--f-display);font-size:clamp(32px,5vw,54px);font-weight:800;line-height:1.1;letter-spacing:-1.5px;color:var(--white);margin-bottom:var(--space-md);opacity:0;animation:rise .7s var(--ease-out) .15s forwards}
.blog-hero h1 em{font-style:normal;color:var(--accent);position:relative}
.blog-hero h1 em::after{content:'';position:absolute;left:0;bottom:2px;width:100%;height:3px;background:var(--accent);border-radius:2px;opacity:.4}
.blog-hero p{font-size:16px;color:var(--text-2);line-height:1.75;max-width:560px;margin:0 auto;opacity:0;animation:rise .7s var(--ease-out) .25s forwards}

@keyframes rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}

/* ─── Post Banner (Hero Image with CTA overlay) ─── */
.post-banner{position:relative;width:100%;min-height:320px;border-radius:var(--r-xl) var(--r-xl) 0 0;overflow:hidden;display:flex;align-items:flex-end}
.post-banner-bg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:80px;opacity:.15}
.post-banner-overlay{position:absolute;inset:0;background:linear-gradient(180deg,transparent 0%,rgba(6,9,15,.5) 40%,rgba(6,9,15,.95) 100%)}
.post-banner-content{position:relative;z-index:2;padding:var(--space-xl) var(--space-2xl) var(--space-xl);width:100%}
.post-banner-tag{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;background:var(--accent);color:var(--n-950);border-radius:var(--r-full);font-family:var(--f-display);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:1px;margin-bottom:var(--space-sm)}
.post-banner-cta{font-family:var(--f-display);font-size:clamp(22px,3.5vw,36px);font-weight:800;letter-spacing:-1px;color:var(--white);line-height:1.15;margin-bottom:var(--space-sm)}
.post-banner-cta span{color:var(--accent)}
.post-banner-sub{font-size:14px;color:var(--n-200);max-width:480px}

/* ─── Search & Filter Bar ─── */
.blog-controls{padding:var(--space-xl) 0;position:relative;z-index:2}
.blog-controls-inner{display:flex;align-items:center;gap:var(--space-md);flex-wrap:wrap}
.search-wrap{flex:1;min-width:220px;position:relative}
.search-wrap input{width:100%;padding:12px 16px 12px 44px;background:var(--bg-raised);border:1px solid var(--border-subtle);border-radius:var(--r-full);color:var(--text);font-size:14px;outline:0;transition:all var(--duration)}
.search-wrap input::placeholder{color:var(--text-4)}
.search-wrap input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--orange-glow)}
.search-icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--text-4);font-size:14px;pointer-events:none}
.filter-tabs{display:flex;gap:8px;flex-wrap:wrap}
.filter-tab{font-family:var(--f-display);font-size:12.5px;font-weight:600;padding:8px 18px;border-radius:var(--r-full);border:1px solid var(--border-subtle);color:var(--text-3);background:var(--bg-raised);transition:all var(--duration);letter-spacing:.2px;cursor:pointer}
.filter-tab:hover{border-color:var(--border-accent);color:var(--accent)}
.filter-tab.active{background:var(--accent);color:var(--n-950);border-color:var(--accent)}

/* ─── Featured Post ─── */
.featured-post-wrap{margin-bottom:var(--space-2xl)}
.featured-post{display:grid;grid-template-columns:1.1fr .9fr;border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--border-subtle);background:var(--bg-raised);transition:all .45s var(--ease-out);cursor:pointer;position:relative}
.featured-post::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,var(--orange-400),var(--orange-300),var(--orange-400),transparent);z-index:2}
.featured-post:hover{border-color:var(--border-accent);transform:translateY(-4px);box-shadow:var(--shadow-lg),var(--shadow-glow)}
.fp-image{position:relative;overflow:hidden;min-height:320px}
.fp-badge{position:absolute;top:var(--space-md);left:var(--space-md);display:inline-flex;align-items:center;gap:6px;background:var(--accent);color:var(--n-950);font-family:var(--f-display);font-size:11px;font-weight:700;padding:5px 12px;border-radius:var(--r-full);letter-spacing:.5px;text-transform:uppercase;z-index:1}
.fp-content{padding:var(--space-2xl);display:flex;flex-direction:column;justify-content:center;gap:var(--space-md)}
.fp-cat{font-family:var(--f-display);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:3px;color:var(--accent)}
.fp-title{font-family:var(--f-display);font-size:clamp(22px,2.5vw,30px);font-weight:800;letter-spacing:-.5px;line-height:1.2;color:var(--white)}
.fp-excerpt{font-size:14.5px;color:var(--text-2);line-height:1.75}
.fp-meta{display:flex;align-items:center;gap:var(--space-lg);margin-top:auto;flex-wrap:wrap}
.fp-author{display:flex;align-items:center;gap:10px}
.fp-avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--orange-400),var(--orange-500));display:grid;place-items:center;font-family:var(--f-display);font-size:13px;font-weight:700;color:var(--n-950)}
.fp-author-name{font-family:var(--f-display);font-size:13.5px;font-weight:600;color:var(--white)}
.fp-author-date{font-size:12px;color:var(--text-4)}
.read-more-btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-display);font-size:13px;font-weight:600;color:var(--accent);transition:gap var(--duration) var(--ease-out)}
.read-more-btn:hover{gap:13px}
.read-more-btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ─── Blog Grid ─── */
.blog-section{padding:0 0 var(--space-3xl)}
.blog-grid-label{font-family:var(--f-display);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:3px;color:var(--text-4);margin-bottom:var(--space-lg);padding-bottom:var(--space-md);border-bottom:1px solid var(--border-subtle)}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-lg)}
.post-card{background:var(--bg-raised);border:1px solid var(--border-subtle);border-radius:var(--r-lg);overflow:hidden;cursor:pointer;transition:all .4s var(--ease-out);position:relative;display:flex;flex-direction:column}
.post-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:0;transition:opacity var(--duration)}
.post-card:hover{border-color:var(--border-accent);transform:translateY(-6px);box-shadow:var(--shadow-md),var(--shadow-glow-sm)}
.post-card:hover::before{opacity:1}
.pc-image{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--bg-overlay)}
.pc-cat-badge{position:absolute;top:12px;left:12px;font-family:var(--f-display);font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:4px 10px;border-radius:var(--r-full)}
.pc-image-placeholder{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-sm);min-height:180px;position:relative}
.pc-placeholder-icon{font-size:40px;opacity:.4}
.pc-body{padding:var(--space-lg);display:flex;flex-direction:column;flex:1;gap:10px}
.pc-title{font-family:var(--f-display);font-size:16.5px;font-weight:700;letter-spacing:-.3px;line-height:1.3;color:var(--white);transition:color var(--duration)}
.post-card:hover .pc-title{color:var(--accent)}
.pc-excerpt{font-size:13px;color:var(--text-3);line-height:1.65;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pc-footer{display:flex;align-items:center;justify-content:space-between;padding-top:var(--space-md);border-top:1px solid var(--border-subtle);margin-top:auto}
.pc-meta{font-size:12px;color:var(--text-4);display:flex;align-items:center;gap:var(--space-sm)}
.pc-dot{width:3px;height:3px;border-radius:50%;background:var(--text-4)}
.pc-read{font-family:var(--f-display);font-size:12px;font-weight:600;color:var(--accent);display:flex;align-items:center;gap:5px;transition:gap var(--duration)}
.pc-read svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ─── No results ─── */
.no-results{text-align:center;padding:var(--space-2xl);display:none;flex-direction:column;align-items:center;gap:var(--space-md)}
.no-results.show{display:flex}
.no-results-icon{font-size:48px;opacity:.3}
.no-results h3{font-family:var(--f-display);font-size:20px;color:var(--text-2)}
.no-results p{font-size:14px;color:var(--text-4)}

/* ─── Load More ─── */
.load-more-wrap{text-align:center;margin-top:var(--space-2xl)}
.btn-load{display:inline-flex;align-items:center;gap:var(--space-sm);font-family:var(--f-display);font-weight:600;font-size:14px;letter-spacing:.2px;padding:13px 32px;border-radius:var(--r-full);border:1px solid var(--border-medium);color:var(--text-2);background:rgba(255,255,255,.03);transition:all var(--duration) var(--ease-out)}
.btn-load:hover{border-color:var(--accent);color:var(--accent);background:var(--orange-glow)}
.btn-load.hidden{display:none}

/* ─── Post Modal ─── */
.post-modal{position:fixed;inset:0;z-index:10000;background:rgba(6,9,15,.96);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);display:none;overflow-y:auto;-webkit-overflow-scrolling:touch}
.post-modal.active{display:block;animation:modalFade .3s var(--ease-out)}
@keyframes modalFade{from{opacity:0}to{opacity:1}}
.modal-inner{max-width:780px;margin:0 auto;padding:var(--space-lg) var(--space-lg) var(--space-3xl)}
.modal-close{position:fixed;top:20px;right:24px;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid var(--border-medium);display:grid;place-items:center;color:var(--text-2);font-size:20px;cursor:pointer;transition:all .3s;z-index:10001}
.modal-close:hover{background:var(--accent);color:var(--n-950);border-color:var(--accent)}
.modal-back{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-display);font-size:13px;font-weight:600;color:var(--text-3);padding:var(--space-lg) 0;cursor:pointer;transition:color var(--duration)}
.modal-back:hover{color:var(--accent)}
.modal-back svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--duration)}
.modal-back:hover svg{transform:translateX(-3px)}

/* ─── Modal Banner ─── */
.modal-banner{width:100%;border-radius:var(--r-xl);overflow:hidden;margin-bottom:var(--space-xl);position:relative;min-height:260px;display:flex;align-items:flex-end}
.modal-banner-bg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:100px;opacity:.12}
.modal-banner-overlay{position:absolute;inset:0;background:linear-gradient(180deg,transparent 0%,rgba(6,9,15,.92) 100%)}
.modal-banner-text{position:relative;z-index:2;padding:var(--space-xl) var(--space-xl) var(--space-lg)}
.modal-banner-label{display:inline-block;padding:3px 12px;background:var(--accent);color:var(--n-950);border-radius:var(--r-full);font-family:var(--f-display);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:var(--space-sm)}
.modal-banner-headline{font-family:var(--f-display);font-size:clamp(20px,3vw,30px);font-weight:800;color:var(--white);letter-spacing:-.5px;line-height:1.2}
.modal-banner-headline em{font-style:normal;color:var(--accent)}

.modal-cat{font-family:var(--f-display);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:3px;color:var(--accent);margin-bottom:var(--space-sm)}
.modal-title{font-family:var(--f-display);font-size:clamp(26px,4vw,40px);font-weight:800;line-height:1.1;letter-spacing:-1px;color:var(--white);margin-bottom:var(--space-lg)}
.modal-meta-bar{display:flex;align-items:center;gap:var(--space-lg);padding:var(--space-lg) 0;border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle);margin-bottom:var(--space-xl);flex-wrap:wrap}
.modal-author{display:flex;align-items:center;gap:10px}
.modal-avatar{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--orange-400),var(--orange-500));display:grid;place-items:center;font-family:var(--f-display);font-size:14px;font-weight:700;color:var(--n-950)}
.modal-author-info .name{font-family:var(--f-display);font-size:14px;font-weight:700;color:var(--white)}
.modal-author-info .role{font-size:12px;color:var(--text-4)}
.modal-stats{display:flex;gap:var(--space-xl);margin-left:auto}
.modal-stat{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text-4);font-family:var(--f-display);font-weight:600}
.modal-stat i{color:var(--accent);font-size:13px}

/* ─── Post Content Typography ─── */
.post-content{color:var(--text-2);font-size:15.5px;line-height:1.85}
.post-content h2{font-family:var(--f-display);font-size:clamp(20px,2.5vw,26px);font-weight:700;letter-spacing:-.4px;color:var(--white);margin:var(--space-2xl) 0 var(--space-md)}
.post-content h3{font-family:var(--f-display);font-size:18px;font-weight:700;color:var(--white);margin:var(--space-xl) 0 var(--space-md)}
.post-content p{margin-bottom:var(--space-lg)}
.post-content strong{color:var(--white);font-weight:600}
.post-content a{color:var(--accent);text-decoration:underline;text-decoration-color:var(--border-accent)}
.post-content ul,.post-content ol{margin:var(--space-md) 0 var(--space-lg) var(--space-xl)}
.post-content li{margin-bottom:var(--space-sm);position:relative}
.post-content ul li::before{content:'›';color:var(--accent);font-weight:700;position:absolute;left:calc(-1 * var(--space-lg))}
.post-content blockquote{margin:var(--space-xl) 0;padding:var(--space-lg) var(--space-xl);background:var(--bg-raised);border-left:3px solid var(--accent);border-radius:0 var(--r-md) var(--r-md) 0;font-style:italic;color:var(--text-2)}
.post-content blockquote strong{color:var(--accent)}
.post-content .tip-box{background:var(--orange-glow);border:1px solid var(--border-accent);border-radius:var(--r-md);padding:var(--space-lg);margin:var(--space-xl) 0}
.post-content .tip-box .tip-label{font-family:var(--f-display);font-size:11px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:1px;margin-bottom:6px}
.post-content .tip-box p{margin-bottom:0;color:var(--text-2)}
.post-content hr{border:0;border-top:1px solid var(--border-subtle);margin:var(--space-2xl) 0}

/* ─── Tags & Share ─── */
.post-tags{display:flex;align-items:center;gap:var(--space-sm);flex-wrap:wrap;margin-top:var(--space-2xl);padding-top:var(--space-xl);border-top:1px solid var(--border-subtle)}
.tag-label{font-family:var(--f-display);font-size:12px;font-weight:600;color:var(--text-4);text-transform:uppercase;letter-spacing:1px}
.tag-pill{padding:5px 14px;border-radius:var(--r-full);background:var(--bg-overlay);border:1px solid var(--border-subtle);font-family:var(--f-display);font-size:12px;font-weight:600;color:var(--text-3);transition:all var(--duration)}
.tag-pill:hover{border-color:var(--border-accent);color:var(--accent)}
.share-bar{display:flex;align-items:center;gap:var(--space-sm);margin-top:var(--space-xl)}
.share-label{font-family:var(--f-display);font-size:12px;font-weight:600;color:var(--text-4);text-transform:uppercase;letter-spacing:1px}
.share-btn{width:38px;height:38px;border-radius:50%;border:1px solid var(--border-subtle);display:grid;place-items:center;color:var(--text-3);transition:all var(--duration);font-size:14px}
.share-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--orange-glow)}

/* ─── Related Posts ─── */
.related-section{margin-top:var(--space-2xl);padding-top:var(--space-xl);border-top:1px solid var(--border-subtle)}
.related-label{font-family:var(--f-display);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:3px;color:var(--text-4);margin-bottom:var(--space-lg)}
.related-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-md)}
.related-card{background:var(--bg-raised);border:1px solid var(--border-subtle);border-radius:var(--r-md);padding:var(--space-lg);cursor:pointer;transition:all var(--duration)}
.related-card:hover{border-color:var(--border-accent);transform:translateY(-3px);box-shadow:var(--shadow-glow-sm)}
.related-cat{font-family:var(--f-display);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:2px;color:var(--accent);margin-bottom:6px}
.related-title{font-family:var(--f-display);font-size:14px;font-weight:700;color:var(--white);line-height:1.3;margin-bottom:6px}
.related-meta{font-size:11.5px;color:var(--text-4)}

/* ─── CTA Box ─── */
.post-cta{background:linear-gradient(135deg,var(--orange-400),var(--orange-600));border-radius:var(--r-xl);padding:var(--space-xl);text-align:center;margin-top:var(--space-2xl)}
.post-cta h3{font-family:var(--f-display);font-size:22px;font-weight:800;color:var(--n-950);margin-bottom:var(--space-sm)}
.post-cta p{font-size:14px;color:rgba(6,9,15,.7);margin-bottom:var(--space-lg)}
.post-cta a{display:inline-flex;align-items:center;gap:8px;padding:12px 28px;background:var(--n-950);color:var(--white);border-radius:var(--r-full);font-family:var(--f-display);font-size:13.5px;font-weight:700;transition:all var(--duration)}
.post-cta a:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.4)}

/* ─── Footer ─── */
.footer{border-top:1px solid var(--border-subtle);background:var(--bg-raised);padding:var(--space-2xl) 0 var(--space-lg)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.5fr;gap:var(--space-xl);margin-bottom:var(--space-xl)}
.footer-brand .logo{margin-bottom:var(--space-md)}
.footer-brand>p{font-size:13.5px;color:var(--text-3);line-height:1.7;max-width:260px}
.footer-col h4{font-family:var(--f-display);font-size:13px;font-weight:700;color:var(--text);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:var(--space-md)}
.footer-col a{display:block;font-size:13.5px;color:var(--text-3);margin-bottom:8px;transition:color var(--duration),padding-left var(--duration)}
.footer-col a:hover{color:var(--accent);padding-left:4px}
.footer-bar{border-top:1px solid var(--border-subtle);padding-top:var(--space-lg);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-md)}
.footer-bar p{font-size:12.5px;color:var(--text-4)}
.footer-soc{display:flex;gap:var(--space-sm)}
.c-soc{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.04);display:grid;place-items:center;font-size:14px;transition:all var(--duration)}
.c-soc:hover{background:var(--orange-glow);color:var(--accent);transform:translateY(-2px)}

/* ─── Float WhatsApp ─── */
.float-wa{position:fixed;bottom:28px;right:24px;z-index:9998;width:56px;height:56px;border-radius:50%;background:#25d366;display:grid;place-items:center;font-size:26px;color:#fff;box-shadow:0 4px 24px rgba(37,211,102,.45);transition:transform var(--duration) var(--ease-spring),box-shadow var(--duration);text-decoration:none}
.float-wa:hover{transform:scale(1.12) translateY(-3px);box-shadow:0 8px 36px rgba(37,211,102,.6);color:#fff}
.float-wa-pulse{position:absolute;inset:0;border-radius:50%;border:2px solid #25d366;animation:waPulse 2.2s ease-out infinite;pointer-events:none}
@keyframes waPulse{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(1.6);opacity:0}}

/* ─── Reveal animation ─── */
.reveal{opacity:0;transform:translateY(36px);transition:opacity .65s var(--ease-out),transform .65s var(--ease-out)}
.reveal.vis{opacity:1;transform:none}

/* ─── Category Colors ─── */
.cat-app{background:#f5a62322;color:var(--orange-400);border:1px solid var(--border-accent)}
.cat-play{background:#3b82f622;color:#60a5fa;border:1px solid rgba(96,165,250,.25)}
.cat-web{background:#8b5cf622;color:#a78bfa;border:1px solid rgba(167,139,250,.25)}
.cat-social{background:#10b98122;color:#34d399;border:1px solid rgba(52,211,153,.25)}
.cat-tips{background:#f4364622;color:#f87171;border:1px solid rgba(248,113,113,.25)}

/* ─── Responsive ─── */
@media(max-width:1024px){
  .blog-grid{grid-template-columns:repeat(2,1fr)}
  .featured-post{grid-template-columns:1fr}
  .fp-image{min-height:240px}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
  .nav-menu{display:none}
  .hamburger{display:flex}
  .blog-grid{grid-template-columns:1fr}
  .related-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr;gap:var(--space-lg)}
  .footer-bar{flex-direction:column;text-align:center}
  .modal-stats{display:none}
  .modal-inner{padding:var(--space-lg) var(--space-md) 80px}
  .fp-content{padding:var(--space-lg)}
  .modal-banner-text{padding:var(--space-lg) var(--space-md)}
  .post-banner-content{padding:var(--space-lg) var(--space-md)}
}
@media(max-width:480px){
  .container{padding-left:var(--space-md);padding-right:var(--space-md)}
  .blog-controls-inner{flex-direction:column;align-items:stretch}
  .search-wrap{min-width:unset}
}