/*
Theme Name: VPSTrading CrossConnect
Theme URI: https://www.vpstrading.net/
Author: VPSTrading.net
Author URI: https://www.vpstrading.net/
Description: Premium SEO WordPress theme for VPSTrading.net
Version: 1.3.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vpstrading
*/

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,700;12..96,800&family=Figtree:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* ════════════════════════════════════════════════════════════════
   SECTION 1 — GLOBAL BASE + HOMEPAGE COMPONENTS
   ════════════════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:'Figtree',sans-serif;background:#04080F;color:#EEF2FF;line-height:1.6;overflow-x:hidden}
:root{
  --bg:#04080F;--bg1:#080D1C;--bg2:#0C1222;--bgc:#0F1628;--bgc2:#131C30;
  --teal:#00C9A7;--teal-d:#00A388;--teal-faint:rgba(0,201,167,0.10);
  --blue:#3B82F6;--gold:#F59E0B;--gold-d:#D97706;--red:#F43F5E;--green:#10B981;
  --text:#EEF2FF;--text2:#8B9FC5;--text3:#4B5E82;
  --border:rgba(255,255,255,0.07);--border2:rgba(255,255,255,0.13);
  --display:'Bricolage Grotesque',sans-serif;--body:'Figtree',sans-serif;--mono:'JetBrains Mono',monospace;
  --radius:12px;--shadow:0 4px 32px rgba(0,0,0,0.4);
}
.container{max-width:1200px;margin:0 auto;padding:0 40px}
@media(max-width:768px){.container{padding:0 18px}}

/* ��── NAV ─── */
nav#mainNav{position:fixed;top:0;left:0;right:0;z-index:300;height:66px;display:flex;align-items:center;background:rgba(4,8,15,0.7);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-bottom:1px solid var(--border);transition:background .3s}
nav#mainNav.solid{background:rgba(4,8,15,0.97)}
.nav-inner{max-width:1200px;margin:0 auto;padding:0 40px;display:flex;align-items:center;width:100%;gap:0}
@media(max-width:768px){.nav-inner{padding:0 18px}}
.nav-logo{display:flex;align-items:center;flex-shrink:0;margin-right:36px}
.nav-logo img{height:28px;width:auto;filter:brightness(0) invert(1);opacity:.9;display:block;object-fit:contain}
.nav-links{display:flex;align-items:center;gap:26px;list-style:none;flex:1}
.nav-links a{font-size:13px;font-weight:500;color:var(--text2);text-decoration:none;transition:color .2s;white-space:nowrap}
.nav-links a:hover{color:var(--text)}
.nav-controls{display:flex;align-items:center;gap:8px;margin-left:auto;flex-shrink:0}
.currency-sw{display:flex;align-items:center;background:var(--bgc);border:1px solid var(--border2);border-radius:8px;overflow:hidden}
.currency-sw button{padding:6px 11px;background:transparent;border:none;cursor:pointer;color:var(--text2);font-family:var(--mono);font-size:11.5px;font-weight:700;transition:all .15s}
.currency-sw button.active{background:var(--teal);color:#04080F}
.currency-sw button:not(.active):hover{color:var(--text)}
.lang-sw{display:flex;align-items:center;gap:5px;background:var(--bgc);border:1px solid var(--border2);border-radius:8px;padding:6px 10px;cursor:pointer;font-size:12px;font-weight:700;color:var(--text2);position:relative;transition:all .2s}
.lang-sw:hover{border-color:var(--teal);color:var(--text)}
.lang-drop{position:absolute;top:calc(100% + 8px);right:0;background:var(--bgc2);border:1px solid var(--border2);border-radius:10px;overflow:hidden;min-width:148px;box-shadow:var(--shadow);display:none;z-index:10}
.lang-drop.open{display:block}
.lang-drop button,.lang-drop a{display:flex;align-items:center;gap:10px;width:100%;padding:10px 14px;background:transparent;border:none;cursor:pointer;font-family:var(--body);font-size:13px;font-weight:600;color:var(--text2);text-decoration:none;transition:all .15s}
.lang-drop button:hover,.lang-drop a:hover{background:var(--bgc);color:var(--text)}
.lang-drop button.active,.lang-drop a.active{color:var(--teal)}
.nav-cta{background:var(--gold);color:#04080F;font-family:var(--body);font-size:13px;font-weight:700;padding:8px 18px;border-radius:8px;text-decoration:none;border:none;cursor:pointer;transition:all .2s}
.nav-cta:hover{background:var(--gold-d);transform:translateY(-1px)}
.hamburger{display:none;flex-direction:column;gap:6px;cursor:pointer;padding:6px;margin-left:10px}
.hamburger span{width:24px;height:2px;background:var(--text2);border-radius:2px;display:block;transition:all .3s}
.hamburger.open span:first-child{transform:rotate(45deg) translate(5px,6px)}
.hamburger.open span:last-child{transform:rotate(-45deg) translate(5px,-6px)}
.mobile-nav{position:fixed;top:66px;left:0;right:0;bottom:0;z-index:250;background:rgba(4,8,15,0.98);backdrop-filter:blur(20px);padding:28px 24px;transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);overflow-y:auto}
.mobile-nav.open{transform:translateX(0)}
.mobile-nav a{display:block;font-size:17px;font-weight:600;color:var(--text2);text-decoration:none;padding:16px 0;border-bottom:1px solid var(--border);transition:color .2s}
.mobile-nav a:hover{color:var(--text)}
.mobile-nav-controls{display:flex;align-items:center;gap:10px;padding:20px 0;border-bottom:1px solid var(--border);flex-wrap:wrap}
.mobile-nav-cta{margin-top:24px;display:block;text-align:center;background:var(--gold);color:#04080F;font-size:15px;font-weight:700;padding:14px 24px;border-radius:10px;text-decoration:none}
#mLangEN,#mLangID{color:var(--text2)!important;font-weight:700!important}
#mLangEN.active,#mLangID.active{background:var(--teal)!important;color:#04080F!important}
@media(max-width:960px){.nav-links,.nav-controls{display:none}.hamburger{display:flex}}

/* ─── HERO ─── */
.hero{position:relative;overflow:hidden;min-height:100vh;display:flex;align-items:center;background:var(--bg);padding:100px 0 60px}
#heroCanvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.hero-noise{position:absolute;inset:0;z-index:1;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");background-size:256px 256px;opacity:.4}
.hero-vignette{position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(ellipse 80% 100% at 50% 100%,rgba(4,8,15,0.7) 0%,transparent 60%)}
.hero-inner{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:60px;position:relative;z-index:3;width:100%}
@media(max-width:1024px){.hero-inner{grid-template-columns:1fr}}
.live-strip{display:flex;align-items:center;gap:20px;margin-bottom:28px;flex-wrap:wrap}
.live-badge{display:inline-flex;align-items:center;gap:7px;background:rgba(0,201,167,0.08);border:1px solid rgba(0,201,167,0.22);color:var(--teal);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:5px 12px;border-radius:100px}
.live-dot{width:6px;height:6px;border-radius:50%;background:var(--teal);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(0.75)}}
.strip-stat{font-size:11.5px;color:var(--text3);font-family:var(--mono)}
.strip-stat span{color:var(--teal);font-weight:700}
.hero-title{font-family:var(--display);font-size:clamp(40px,5.2vw,66px);font-weight:800;line-height:1.0;letter-spacing:-.025em;color:var(--text);margin-bottom:22px}
.hero-title .hl{background:linear-gradient(135deg,var(--teal),#68D8C9);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-title .hl2{background:linear-gradient(135deg,var(--gold),#FCD34D);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-desc{font-size:15.5px;color:var(--text2);line-height:1.8;max-width:520px;margin-bottom:36px}
.hero-desc strong{color:var(--text);font-weight:600}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:40px}
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--body);font-size:14px;font-weight:700;padding:13px 26px;border-radius:10px;text-decoration:none;transition:all .22s;cursor:pointer;border:none}
.btn-primary{background:var(--gold);color:#04080F}
.btn-primary:hover{background:var(--gold-d);transform:translateY(-2px);box-shadow:0 8px 28px rgba(245,158,11,.3)}
.btn-secondary{background:transparent;color:var(--teal);border:1.5px solid rgba(0,201,167,.35)}
.btn-secondary:hover{background:var(--teal-faint);border-color:var(--teal)}
.hero-trust{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.trust-item{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text3)}
.trust-item .star{color:#F59E0B;font-size:13px}
.trust-sep{width:1px;height:14px;background:var(--border2)}
.hero-panel{background:var(--bgc);border:1px solid var(--border2);border-radius:20px;overflow:hidden;box-shadow:0 4px 60px rgba(0,0,0,0.5),0 0 80px rgba(0,201,167,0.04)}
.panel-bar{background:var(--bg1);padding:12px 18px;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--border)}
.p-dot{width:10px;height:10px;border-radius:50%}
.p-dot.r{background:#F43F5E}.p-dot.y{background:#F59E0B}.p-dot.g{background:#10B981}
.panel-title{margin-left:8px;font-family:var(--mono);font-size:11.5px;color:var(--text3)}
.panel-body{padding:16px}
#miniChart{width:100%;height:100px;display:block;border-radius:8px;margin-bottom:12px;background:var(--bg1)}
.panel-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.panel-stat{background:var(--bg1);border:1px solid var(--border);border-radius:8px;padding:10px 12px;text-align:center}
.panel-stat-num{font-family:var(--display);font-size:22px;font-weight:800;color:var(--teal);line-height:1;margin-bottom:2px}
.panel-stat-label{font-size:9.5px;color:var(--text3);letter-spacing:.07em;text-transform:uppercase}
.panel-rows{display:flex;flex-direction:column;gap:6px}
.p-row{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;border-radius:7px;background:rgba(255,255,255,0.02);border:1px solid var(--border)}
.p-label{font-size:11px;color:var(--text3);font-family:var(--mono)}
.p-val{font-family:var(--mono);font-size:11.5px;font-weight:600;color:var(--teal)}
.p-val.warn{color:var(--gold)}
.p-val.neutral{color:var(--text)}

/* ─── SECTIONS ─── */
.section{padding:96px 0}
.section-alt{background:var(--bg1)}
.section-tag{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--teal);margin-bottom:14px}
.section-tag::before{content:'';width:20px;height:2px;background:var(--teal);border-radius:2px}
.section-title{font-family:var(--display);font-size:clamp(30px,4vw,50px);font-weight:800;color:var(--text);line-height:1.08;letter-spacing:-.022em;margin-bottom:14px}
.section-title .hl{background:linear-gradient(135deg,var(--teal),#68D8C9);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.section-desc{font-size:15px;color:var(--text2);max-width:580px;line-height:1.8}

/* ─── SERVICES ─── */
.services-grid{display:flex;justify-content:center;align-items:flex-end;gap:16px;margin-top:52px;flex-wrap:wrap}
@media(max-width:900px){.services-grid{flex-direction:column;align-items:center}}
.svc-card{flex:1;min-width:270px;max-width:380px;background:var(--bgc);border:1px solid var(--border2);border-radius:20px;padding:36px 28px;display:flex;flex-direction:column;position:relative;overflow:hidden;transition:border-color .3s,transform .2s,box-shadow .3s;box-shadow:0 4px 32px rgba(0,0,0,0.28)}
.svc-card.grade-entry{transform:scale(0.94);transform-origin:bottom center}
.svc-card.grade-entry:hover{transform:scale(0.96);border-color:rgba(0,201,167,0.2)}
.svc-card.featured{background:linear-gradient(165deg,#071420 0%,#0A1628 100%);border-color:rgba(0,201,167,0.30);box-shadow:0 20px 60px rgba(0,0,0,0.45),0 0 60px rgba(0,201,167,0.07)}
.svc-card.featured::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--teal),transparent)}
.svc-card.featured:hover{border-color:rgba(0,201,167,0.45)}
.svc-card.institutional{background:linear-gradient(165deg,#0A0D16 0%,#100A00 100%);border-color:rgba(245,158,11,0.22);transform:scale(0.97);transform-origin:bottom center;box-shadow:0 8px 48px rgba(0,0,0,0.38),0 0 40px rgba(245,158,11,0.04)}
.svc-card.institutional::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.svc-card.institutional:hover{border-color:rgba(245,158,11,0.35);transform:scale(0.98)}
@media(max-width:900px){.svc-card.grade-entry,.svc-card.institutional{transform:none}.svc-card.grade-entry:hover,.svc-card.institutional:hover{transform:none}.svc-card{max-width:480px;width:100%}}
.svc-badge{position:absolute;top:0;left:0;right:0;font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;text-align:center;padding:5px;font-family:var(--mono)}
.svc-badge.b-teal{background:var(--teal);color:#04080F}
.svc-badge.b-gold{background:var(--gold);color:#04080F}
.svc-icon{font-size:32px;margin-bottom:18px;margin-top:8px}
.svc-card.featured .svc-icon,.svc-card.institutional .svc-icon{margin-top:20px}
.svc-tier{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:3px 10px;border-radius:100px;margin-bottom:10px;background:rgba(255,255,255,0.05);color:var(--text3);border:1px solid rgba(255,255,255,0.08)}
.svc-card.featured .svc-tier{background:rgba(0,201,167,0.1);color:var(--teal);border-color:rgba(0,201,167,0.2)}
.svc-card.institutional .svc-tier{background:rgba(245,158,11,0.1);color:var(--gold);border-color:rgba(245,158,11,0.2)}
.svc-name{font-family:var(--display);font-size:26px;font-weight:800;color:var(--text);margin-bottom:6px;line-height:1.15}
.svc-card.featured .svc-name{color:#fff}
.svc-card.institutional .svc-name{color:rgba(255,248,230,0.95)}
.svc-tagline{font-size:13px;color:var(--text2);margin-bottom:20px;line-height:1.5}
.svc-card.featured .svc-tagline{color:rgba(255,255,255,.5)}
.svc-card.institutional .svc-tagline{color:rgba(255,248,200,.4)}
.svc-price{margin-bottom:20px}
.svc-from{font-size:11px;color:var(--text3);font-family:var(--mono);margin-bottom:2px}
.svc-card.featured .svc-from{color:rgba(255,255,255,.35)}
.svc-card.institutional .svc-from{color:rgba(245,158,11,.5)}
.svc-amount{display:flex;align-items:baseline;gap:3px}
.svc-cur{font-size:14px;color:var(--text2);font-weight:600;font-family:var(--mono)}
.svc-num{font-family:var(--display);font-size:40px;font-weight:800;color:var(--text);line-height:1}
.svc-card.featured .svc-num{color:#fff}
.svc-card.featured .svc-cur{color:rgba(255,255,255,.6)}
.svc-card.institutional .svc-num{color:var(--gold)}
.svc-card.institutional .svc-cur{color:rgba(245,158,11,.7)}
.svc-period{font-size:11px;color:var(--text3);font-family:var(--mono)}
.svc-card.featured .svc-period{color:rgba(255,255,255,.4)}
.svc-card.institutional .svc-period{color:rgba(245,158,11,.4)}
.svc-divider{height:1px;background:var(--border);margin:18px 0}
.svc-card.featured .svc-divider{background:rgba(255,255,255,.08)}
.svc-card.institutional .svc-divider{background:rgba(245,158,11,.12)}
.svc-features{list-style:none;flex:1;margin-bottom:22px;display:flex;flex-direction:column;gap:9px}
.svc-features li{font-size:12.5px;color:var(--text2);display:flex;align-items:flex-start;gap:8px;line-height:1.5}
.svc-card.featured .svc-features li{color:rgba(255,255,255,.6)}
.svc-card.institutional .svc-features li{color:rgba(255,248,200,.55)}
.svc-features li::before{content:'✓';color:var(--teal);font-weight:700;flex-shrink:0;font-size:12px;margin-top:1px}
.svc-card.institutional .svc-features li::before{color:var(--gold)}
.svc-cta{display:block;text-align:center;font-size:13px;font-weight:700;padding:12px 16px;border-radius:9px;text-decoration:none;transition:all .2s;border:1.5px solid rgba(0,201,167,0.3);color:var(--teal)}
.svc-cta:hover{background:var(--teal-faint);border-color:var(--teal)}
.svc-card.featured .svc-cta{background:var(--teal);color:#04080F;border-color:var(--teal)}
.svc-card.featured .svc-cta:hover{background:var(--teal-d)}
.svc-card.institutional .svc-cta{border-color:rgba(245,158,11,0.35);color:var(--gold)}
.svc-card.institutional .svc-cta:hover{background:rgba(245,158,11,0.08);border-color:var(--gold)}

/* ─── XC BAND ─── */
.xc-band{background:linear-gradient(135deg,var(--bgc2) 0%,rgba(0,201,167,0.04) 100%);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:52px 0;position:relative}
.xc-band::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(0,201,167,0.025) 1px,transparent 1px),linear-gradient(90deg,rgba(0,201,167,0.025) 1px,transparent 1px);background-size:60px 60px;pointer-events:none}
.xc-inner{display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap;position:relative;z-index:1}
.xc-left{flex:1;min-width:260px}
.xc-label{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--teal);margin-bottom:10px;display:flex;align-items:center;gap:8px}
.xc-label::before{content:'';width:16px;height:2px;background:var(--teal);border-radius:2px}
.xc-title{font-family:var(--display);font-size:clamp(26px,3.2vw,40px);font-weight:800;color:var(--text);line-height:1.08;letter-spacing:-.02em}
.xc-title em{font-style:normal;color:var(--teal)}
.xc-stats{display:flex;gap:32px;flex-wrap:wrap;flex-shrink:0}
.xc-stat{text-align:center}
.xc-stat-num{font-family:var(--display);font-size:48px;font-weight:800;color:var(--teal);line-height:1}
.xc-stat-label{font-size:11px;color:var(--text3);letter-spacing:.05em;line-height:1.4}

/* ─── ECOSYSTEM ─── */
.eco-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:48px}
@media(max-width:900px){.eco-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:540px){.eco-grid{grid-template-columns:1fr}}
.eco-card{background:var(--bgc);border:1px solid var(--border2);border-radius:14px;padding:22px 18px;display:flex;flex-direction:column;transition:border-color .2s,transform .2s}
.eco-card:hover{border-color:rgba(0,201,167,0.25);transform:translateY(-2px)}
.eco-icon{font-size:24px;margin-bottom:12px}
.eco-name{font-size:13px;font-weight:700;color:var(--text);margin-bottom:6px}
.eco-desc{font-size:12px;color:var(--text2);line-height:1.6;flex:1}
.eco-pill{display:inline-block;margin-top:10px;font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border-radius:100px}
.pill-teal{background:rgba(0,201,167,0.1);color:var(--teal);border:1px solid rgba(0,201,167,0.2)}
.pill-gold{background:rgba(245,158,11,0.1);color:var(--gold);border:1px solid rgba(245,158,11,0.2)}

/* ─── LOCATIONS ─── */
.loc-bar{background:var(--bgc);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:28px 0}
.loc-inner{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.loc-label{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text3);white-space:nowrap}
.loc-chips{display:flex;flex-wrap:wrap;gap:6px;flex:1}
.loc-chip{font-size:10.5px;color:var(--text2);background:rgba(255,255,255,0.04);border:1px solid var(--border);border-radius:100px;padding:4px 11px;display:flex;align-items:center;gap:5px;cursor:default;transition:all .2s}
.loc-chip:hover{background:rgba(0,201,167,0.06);border-color:rgba(0,201,167,0.2);color:var(--teal)}
.loc-dot{width:5px;height:5px;border-radius:50%;background:var(--teal);animation:pulse 2s infinite}

/* ─── COMPARISON ─── */
.compare-wrap{overflow-x:auto;border-radius:16px;border:1px solid var(--border)}
table.compare{width:100%;border-collapse:collapse}
.compare th{padding:14px 18px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text3);background:var(--bgc);border-bottom:1px solid var(--border2);text-align:left}
.compare th.us-col{color:var(--teal);background:rgba(0,201,167,0.05)}
.compare td{padding:12px 18px;font-size:13px;color:var(--text2);border-bottom:1px solid var(--border);vertical-align:middle}
.compare td:first-child{color:var(--text);font-weight:500}
.compare td.us-col{background:rgba(0,201,167,0.02)}
.compare tr:last-child td{border-bottom:none}
.compare tr:hover td{background:rgba(255,255,255,0.012)}
.ck{color:var(--green);font-size:16px;font-weight:700}
.xx{color:var(--red)}

/* ─── TESTIMONIALS ─── */
.testi-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:48px}
@media(max-width:768px){.testi-grid{grid-template-columns:1fr}}
.testi-card{background:var(--bgc);border:1px solid var(--border2);border-radius:16px;padding:26px 22px;transition:border-color .2s,transform .2s}
.testi-card:hover{border-color:rgba(0,201,167,0.2);transform:translateY(-2px)}
.testi-stars{color:#F59E0B;font-size:13px;letter-spacing:2px;margin-bottom:12px}
.testi-quote{font-size:13.5px;color:var(--text2);line-height:1.75;margin-bottom:20px}
.testi-quote strong{color:var(--text);font-weight:600}
.testi-author{display:flex;align-items:center;gap:12px;padding-top:14px;border-top:1px solid var(--border)}
.testi-avatar{width:38px;height:38px;border-radius:50%;flex-shrink:0;background:rgba(0,201,167,0.1);color:var(--teal);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800}
.testi-name{font-size:13px;font-weight:700;color:var(--text)}
.testi-role{font-size:11px;color:var(--text3);margin-top:1px}

/* ─── FAQ HOMEPAGE ─── */
.faq-list{max-width:780px;margin:48px auto 0}
details.faq{border-bottom:1px solid var(--border)}
details.faq:first-child{border-top:1px solid var(--border)}
summary.faq-q{display:flex;align-items:center;justify-content:space-between;padding:19px 4px;font-size:14.5px;font-weight:600;color:var(--text);cursor:pointer;list-style:none;gap:20px;transition:color .2s}
summary.faq-q:hover{color:var(--teal)}
summary.faq-q::after{content:'+';font-size:22px;color:var(--teal);flex-shrink:0;transition:transform .3s;line-height:1;font-family:var(--mono)}
details[open] summary.faq-q::after{transform:rotate(45deg)}
.faq-a{padding:0 4px 18px;font-size:13.5px;color:var(--text2);line-height:1.8;max-width:700px}

/* ─── FINAL CTA ─── */
.final-cta{background:var(--bg);padding:96px 0;text-align:center;position:relative;overflow:hidden}
.final-cta::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(0,201,167,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(0,201,167,0.03) 1px,transparent 1px);background-size:60px 60px;pointer-events:none}
.final-cta-inner{position:relative;z-index:1}
.final-title{font-family:var(--display);font-size:clamp(38px,5vw,62px);font-weight:800;color:var(--text);line-height:1.0;letter-spacing:-.025em;margin-bottom:14px}
.final-title .hl{background:linear-gradient(135deg,var(--teal),#68D8C9);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.final-sub{font-size:15.5px;color:var(--text2);max-width:500px;margin:0 auto 36px;line-height:1.75}
.final-btns{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
.final-small{font-size:11.5px;color:var(--text3);margin-top:18px;letter-spacing:.04em}

/* ─── FOOTER ─── */
footer{background:var(--bg1);border-top:1px solid var(--border);padding:60px 0 32px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;margin-bottom:48px;padding-bottom:40px;border-bottom:1px solid var(--border)}
@media(max-width:1024px){.footer-grid{grid-template-columns:1fr 1fr;gap:28px}}
@media(max-width:540px){.footer-grid{grid-template-columns:1fr}}
.footer-logo img{height:26px;margin-bottom:12px;filter:brightness(0) invert(1);opacity:.7}
.footer-tagline{font-size:12.5px;color:var(--text3);line-height:1.65;max-width:220px}
.footer-col-title{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text3);margin-bottom:14px;font-family:var(--mono)}
.footer-links{list-style:none;display:flex;flex-direction:column;gap:9px}
.footer-links a{font-size:12.5px;color:var(--text3);text-decoration:none;transition:color .2s}
.footer-links a:hover{color:var(--text)}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.footer-copy{font-size:11.5px;color:var(--text3)}
.pay-chips{display:flex;flex-wrap:wrap;gap:5px}
.pay-chip{font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:rgba(255,255,255,0.05);border:1px solid var(--border);color:var(--text3);padding:3px 8px;border-radius:5px}

/* ─── REVEAL ANIMATIONS ─── */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.reveal.visible{opacity:1;transform:none}
.reveal-d1{transition-delay:.1s}.reveal-d2{transition-delay:.2s}.reveal-d3{transition-delay:.3s}

/* ─── LANG / CURRENCY ─── */
[data-currency="usd"] .idr-only{display:none}
[data-currency="idr"] .usd-only{display:none}

/* ─── FX VPS MODAL ─── */
.modal-overlay{position:fixed;inset:0;z-index:500;background:rgba(2,5,12,0.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);display:flex;align-items:flex-start;justify-content:center;padding:20px 16px 32px;overflow-y:auto;opacity:0;pointer-events:none;transition:opacity .3s ease}
.modal-overlay.open{opacity:1;pointer-events:all}
.modal-box{background:var(--bg1);border:1px solid var(--border2);border-radius:20px;width:100%;max-width:1120px;overflow:hidden;transform:translateY(28px);transition:transform .35s cubic-bezier(.2,.8,.3,1);margin:auto}
.modal-overlay.open .modal-box{transform:translateY(0)}
.modal-header{background:var(--bgc);border-bottom:1px solid var(--border);padding:22px 28px;display:flex;align-items:center;justify-content:space-between;gap:16px;position:sticky;top:0;z-index:2}
.modal-htag{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--teal);margin-bottom:4px}
.modal-htitle{font-family:var(--display);font-size:24px;font-weight:800;color:var(--text)}
.modal-close{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,0.06);border:1px solid var(--border2);color:var(--text2);font-size:18px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;flex-shrink:0}
.modal-close:hover{background:rgba(244,63,94,0.15);border-color:rgba(244,63,94,0.4);color:#F43F5E}
.modal-period-wrap{display:flex;align-items:center;justify-content:center;gap:14px;padding:20px 28px 16px;border-bottom:1px solid var(--border);flex-wrap:wrap}
.period-tabs{display:flex;align-items:center;background:var(--bgc);border:1px solid var(--border2);border-radius:10px;padding:4px;gap:0}
.pt-btn{font-family:var(--body);font-size:12.5px;font-weight:700;color:var(--text2);padding:9px 18px;border-radius:7px;border:none;background:transparent;cursor:pointer;transition:all .18s;white-space:nowrap;position:relative}
.pt-btn.active{background:var(--teal);color:#04080F}
.pt-btn .pt-save{position:absolute;top:-9px;right:-2px;background:var(--gold);color:#04080F;font-size:9px;font-weight:800;letter-spacing:.04em;padding:2px 6px;border-radius:100px;white-space:nowrap}
.modal-promo{display:flex;align-items:center;gap:10px;background:rgba(0,201,167,0.06);border:1px solid rgba(0,201,167,0.18);border-radius:8px;padding:8px 14px}
.modal-promo-text{font-size:12px;color:var(--text2)}
.modal-promo-text strong{color:var(--teal)}
.modal-promo-code{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--teal);background:rgba(0,201,167,0.1);border:1px solid rgba(0,201,167,0.25);padding:4px 10px;border-radius:6px;cursor:pointer}
.modal-plans-wrap{overflow-x:auto;padding:20px 28px 28px}
.modal-plans{display:grid;gap:0;background:var(--border);border:1px solid var(--border2);border-radius:16px;overflow:hidden;min-width:720px}
.mp-card{background:var(--bgc);padding:22px 16px 18px;display:flex;flex-direction:column;position:relative;transition:background .2s}
.mp-card:hover{background:var(--bgc2)}
.mp-card.mp-featured{background:linear-gradient(170deg,#0A1628 0%,#071420 100%);padding-top:30px}
.mp-card.mp-featured::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--teal),transparent)}
.mp-badge{position:absolute;top:0;left:0;right:0;font-size:8.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;text-align:center;padding:5px;font-family:var(--mono);z-index:1}
.mp-badge.b-popular{background:var(--teal);color:#04080F}
.mp-badge.b-value{background:var(--gold);color:#04080F}
.mp-tier{display:inline-block;font-size:9.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;padding:3px 9px;border-radius:100px;margin-bottom:7px;margin-top:12px;background:rgba(255,255,255,0.05);color:var(--text3);border:1px solid rgba(255,255,255,0.08)}
.mp-card.mp-featured .mp-tier{background:rgba(0,201,167,0.1);color:var(--teal);border-color:rgba(0,201,167,0.2)}
.mp-name{font-family:var(--display);font-size:20px;font-weight:800;color:var(--text);line-height:1.1;margin-bottom:2px}
.mp-card.mp-featured .mp-name{color:#fff}
.mp-mt{text-align:center;margin:10px 0 12px}
.mp-mt-num{font-family:var(--display);font-size:40px;font-weight:800;color:var(--teal);line-height:1}
.mp-mt-label{font-size:9px;color:var(--text3);letter-spacing:.07em;text-transform:uppercase;margin-top:1px}
.mp-divider{height:1px;background:var(--border);margin:10px 0}
.mp-card.mp-featured .mp-divider{background:rgba(255,255,255,.08)}
.mp-orig{font-size:10.5px;color:var(--text3);text-decoration:line-through;height:16px;margin-bottom:2px;font-family:var(--mono)}
.mp-card.mp-featured .mp-orig{color:rgba(255,255,255,.3)}
.mp-price-row{display:flex;align-items:baseline;gap:2px}
.mp-cur{font-size:12px;color:var(--text2);font-weight:600;font-family:var(--mono)}
.mp-num{font-family:var(--display);font-size:30px;font-weight:800;color:var(--text);line-height:1}
.mp-card.mp-featured .mp-num{color:#fff}
.mp-card.mp-featured .mp-cur{color:rgba(255,255,255,.6)}
.mp-period{font-size:10px;color:var(--text3);margin-top:2px;font-family:var(--mono)}
.mp-card.mp-featured .mp-period{color:rgba(255,255,255,.4)}
.mp-save-tag{display:inline-block;margin-top:6px;font-size:9.5px;font-weight:700;background:rgba(16,185,129,.12);color:var(--green);padding:2px 8px;border-radius:100px;font-family:var(--mono)}
.mp-card.mp-featured .mp-save-tag{background:rgba(0,201,167,.15);color:var(--teal)}
.mp-specs{list-style:none;flex:1;margin:12px 0 14px;display:flex;flex-direction:column;gap:5px}
.mp-specs li{font-size:10.5px;color:var(--text2);display:flex;justify-content:space-between;align-items:flex-start;gap:4px;line-height:1.4}
.mp-card.mp-featured .mp-specs li{color:rgba(255,255,255,.55)}
.mp-specs li span:last-child{color:var(--text);font-weight:700;text-align:right;font-family:var(--mono);font-size:10px}
.mp-card.mp-featured .mp-specs li span:last-child{color:#fff}
.mp-cta{display:block;text-align:center;font-size:12px;font-weight:700;padding:10px 12px;border-radius:8px;text-decoration:none;transition:all .2s;border:1.5px solid rgba(0,201,167,0.3);color:var(--teal)}
.mp-cta:hover{background:var(--teal-faint);border-color:var(--teal)}
.mp-card.mp-featured .mp-cta{background:var(--teal);color:#04080F;border-color:var(--teal)}
.mp-card.mp-featured .mp-cta:hover{background:var(--teal-d)}
@media(max-width:768px){
  .modal-header{padding:18px 20px}
  .modal-period-wrap{padding:14px 20px 12px;gap:10px}
  .pt-btn{padding:8px 12px;font-size:11.5px}
  .modal-plans-wrap{padding:14px 16px 20px}
  .section{padding:64px 0}
  .hero-ctas{flex-direction:column}
  .hero-ctas .btn{text-align:center;justify-content:center}
  .xc-stats{justify-content:center;gap:24px}
}
@media(max-width:600px){
  .xc-inner{flex-direction:column;align-items:flex-start;gap:28px}
  .xc-stats{display:grid!important;grid-template-columns:1fr 1fr;gap:20px 32px;width:100%}
  .xc-stat-num{font-size:36px}
  .xc-band{padding:44px 0 48px}
  .modal-plans-wrap{padding:12px 14px 20px;overflow-x:visible}
  .modal-plans{display:flex!important;flex-direction:column!important;min-width:unset!important;gap:8px;background:transparent;border:none;border-radius:0;overflow:visible}
  .mp-card{border-radius:12px!important;border:1px solid var(--border2)!important;padding:18px 14px 14px!important}
  .mp-card.mp-featured{border-color:rgba(0,201,167,0.35)!important;padding-top:28px!important}
  .mp-badge{border-radius:12px 12px 0 0}
  .mp-mt-num{font-size:32px}
  .mp-num{font-size:24px}
}

/* ─── LANG POPUP ─── */
.lp-overlay{position:fixed;inset:0;z-index:800;background:rgba(2,5,12,0.78);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .3s ease}
.lp-overlay.show{opacity:1;pointer-events:all}
.lp-box{position:relative;background:linear-gradient(145deg,#0C1222 0%,#071420 55%,#0A1628 100%);border:1px solid rgba(0,201,167,0.38);border-radius:24px;padding:44px 40px 36px;max-width:440px;width:100%;transform:translateY(20px) scale(.97);transition:transform .35s cubic-bezier(.2,.8,.3,1)}
.lp-overlay.show .lp-box{transform:translateY(0) scale(1)}
.lp-box::before{content:'';position:absolute;top:0;left:20%;right:20%;height:1px;background:linear-gradient(90deg,transparent,rgba(0,201,167,0.6),transparent)}
.lp-x{position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,0.05);border:1px solid var(--border);color:var(--text3);font-size:15px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s}
.lp-x:hover{background:rgba(255,255,255,0.1);color:var(--text)}
.lp-flag{font-size:54px;margin-bottom:16px;display:block;line-height:1}
.lp-title{font-family:var(--display);font-size:22px;font-weight:800;color:var(--text);margin-bottom:10px;line-height:1.2}
.lp-desc{font-size:14px;color:var(--text2);line-height:1.75;margin-bottom:28px}
.lp-desc strong{color:var(--teal)}
.lp-btns{display:flex;flex-direction:column;gap:10px}
.lp-yes{display:block;width:100%;padding:14px 24px;background:var(--teal);color:#04080F;font-family:var(--body);font-size:14px;font-weight:700;border-radius:10px;text-decoration:none;border:none;cursor:pointer;text-align:center;transition:all .2s}
.lp-yes:hover{background:var(--teal-d);transform:translateY(-1px);box-shadow:0 6px 20px rgba(0,201,167,0.3)}
.lp-or{display:flex;align-items:center;gap:12px;font-size:11px;color:var(--text3)}
.lp-or::before,.lp-or::after{content:'';flex:1;height:1px;background:var(--border)}
.lp-no{width:100%;padding:12px 24px;background:transparent;color:var(--text2);font-family:var(--body);font-size:13px;font-weight:600;border-radius:10px;border:1px solid var(--border2);cursor:pointer;transition:all .2s}
.lp-no:hover{border-color:var(--text3);color:var(--text);background:rgba(255,255,255,0.03)}

/* ─── COOKIE BAR ─── */
.ck-bar{position:fixed;bottom:0;left:0;right:0;z-index:700;background:rgba(8,13,28,0.97);border-top:1px solid rgba(0,201,167,0.15);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);padding:18px 32px;display:flex;align-items:center;gap:20px;flex-wrap:wrap;transform:translateY(100%);transition:transform .4s ease}
.ck-bar.show{transform:translateY(0)}
.ck-left{display:flex;align-items:flex-start;gap:14px;flex:1;min-width:260px}
.ck-ico{font-size:22px;flex-shrink:0;margin-top:2px}
.ck-txt{font-size:13px;color:var(--text2);line-height:1.6}
.ck-txt a{color:var(--teal);text-decoration:none}
.ck-txt a:hover{text-decoration:underline}
.ck-btns{display:flex;gap:8px;flex-shrink:0;flex-wrap:wrap}
.ck-all{padding:10px 20px;background:var(--teal);color:#04080F;font-family:var(--body);font-size:13px;font-weight:700;border-radius:8px;border:none;cursor:pointer;transition:all .2s;white-space:nowrap}
.ck-all:hover{background:var(--teal-d)}
.ck-ess{padding:10px 16px;background:transparent;color:var(--text2);font-family:var(--body);font-size:13px;font-weight:600;border-radius:8px;border:1px solid var(--border2);cursor:pointer;transition:all .2s;white-space:nowrap}
.ck-ess:hover{border-color:var(--text3);color:var(--text)}
@media(max-width:640px){.ck-bar{padding:16px 20px}.ck-btns{width:100%}.ck-all,.ck-ess{flex:1;text-align:center}}

/* ─── WhatsApp FAB ─── */
.vpt-wa-fab{position:fixed;bottom:24px;right:24px;z-index:600;width:52px;height:52px;background:#25D366;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 4px 20px rgba(37,211,102,0.4);transition:all .25s;text-decoration:none}
.vpt-wa-fab:hover{background:#20bf5b;transform:scale(1.08)}
.vpt-wa-fab svg{display:block}

/* ─── SEO AUDIT FAB + PANEL ─── */
.vpt-audit-fab{position:fixed;bottom:88px;right:24px;z-index:600;width:52px;height:52px;background:#131C30;border:1px solid rgba(255,255,255,0.13);border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;text-decoration:none;gap:2px}
.vpt-audit-fab:hover,.vpt-audit-fab.active{border-color:rgba(0,201,167,0.4);background:#0F1628}
.fab-score{font-family:var(--display);font-size:16px;font-weight:800;line-height:1}
.fab-label{font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#4B5E82;font-family:var(--mono)}
.vpt-audit-panel{position:fixed;bottom:24px;right:88px;z-index:600;width:380px;max-height:80vh;background:#080D1C;border:1px solid rgba(255,255,255,0.13);border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,0.6);display:flex;flex-direction:column;overflow:hidden}
.vpt-audit-panel[hidden]{display:none}
.ap-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;background:#0F1628;border-bottom:1px solid rgba(255,255,255,0.07);flex-shrink:0;gap:8px}
.ap-title{display:flex;align-items:center;gap:8px}
.ap-score-badge{font-size:11px;font-weight:800;padding:3px 8px;border-radius:100px;color:#04080F;font-family:var(--mono)}
.ap-header-actions{display:flex;align-items:center;gap:4px}
.ap-btn-run,.ap-btn-edit,.ap-btn-close{padding:5px 10px;border-radius:7px;font-size:11px;font-weight:700;cursor:pointer;border:1px solid rgba(255,255,255,0.07);background:#131C30;color:var(--text2);transition:all .15s}
.ap-btn-run:hover{border-color:rgba(0,201,167,.3);color:#00C9A7}
.ap-btn-close:hover{border-color:rgba(244,63,94,.3);color:#F43F5E}
.ap-body{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:8px}
.ap-score-bar{display:flex;align-items:center;gap:10px}
.ap-score-track{flex:1;height:6px;background:#04080F;border-radius:3px;overflow:hidden}
.ap-score-fill{height:100%;border-radius:3px;transition:width .6s ease}
.ap-score-bar>span{font-size:11px;font-weight:800;color:#EEF2FF;font-family:var(--mono);flex-shrink:0}
.ap-summary-pills{display:flex;flex-wrap:wrap;gap:4px}
.ap-pill{font-size:9px;font-weight:700;padding:2px 8px;border-radius:100px;letter-spacing:.04em}
.ap-pill-critical{background:rgba(244,63,94,.12);color:#F43F5E}.ap-pill-high{background:rgba(245,158,11,.12);color:#F59E0B}
.ap-pill-medium{background:rgba(234,179,8,.12);color:#EAB308}.ap-pill-low{background:rgba(59,130,246,.12);color:#3B82F6}.ap-pill-ok{background:rgba(16,185,129,.12);color:#10B981}
.ap-tabs{display:flex;background:#0F1628;border:1px solid rgba(255,255,255,0.07);border-radius:8px;overflow:hidden}
.ap-tab{flex:1;padding:6px 4px;border:none;background:transparent;cursor:pointer;font-size:11px;font-weight:700;color:#4B5E82;font-family:'Figtree',sans-serif;transition:all .15s}
.ap-tab.active{background:#00C9A7;color:#04080F}
.ap-tab-content{display:flex;flex-direction:column;gap:6px}
.ap-tab-content[hidden]{display:none}
.ap-issue{background:#0F1628;border:1px solid rgba(255,255,255,0.07);border-radius:8px;padding:10px 12px}
.ap-issue-critical{border-left:3px solid #F43F5E}.ap-issue-high{border-left:3px solid #F59E0B}.ap-issue-medium{border-left:3px solid #EAB308}.ap-issue-low{border-left:3px solid #3B82F6}.ap-issue-ok{border-left:3px solid #10B981}
.ap-issue-header{display:flex;align-items:center;gap:6px;margin-bottom:4px}
.ap-issue-icon{font-size:12px}
.ap-issue-title{font-size:11.5px;font-weight:700;color:#EEF2FF;flex:1}
.ap-issue-pts{font-size:10px;font-family:var(--mono);color:#4B5E82;flex-shrink:0}
.ap-issue-desc{font-size:11px;color:#8B9FC5;line-height:1.5;margin-bottom:4px}
.ap-issue-advice{font-size:10.5px;color:#00C9A7;line-height:1.5;background:rgba(0,201,167,0.04);padding:6px 8px;border-radius:5px}
.ap-ok-msg{font-size:12px;color:#10B981;padding:10px;text-align:center}
.ap-empty,.ap-error{font-size:12px;color:#4B5E82;text-align:center;padding:12px}
.ap-loading{font-size:12px;color:#00C9A7;text-align:center;padding:10px;animation:pulse 1.5s infinite}
.ap-ideas-section{background:#0F1628;border:1px solid rgba(255,255,255,0.07);border-radius:8px;padding:10px 12px}
.ap-ideas-label{font-size:11px;font-weight:700;color:#EEF2FF;margin-bottom:8px}
.ap-ideas-list{list-style:none;display:flex;flex-direction:column;gap:4px}
.ap-ideas-list li{font-size:11px;color:#8B9FC5;padding:4px 0;border-bottom:1px solid rgba(255,255,255,0.05);line-height:1.45}
.ap-ideas-list li:last-child{border-bottom:none}

/* === SECTION 1 END === */

/* ════════════════════════════════════════════════════════════════
   SECTION 2 — WORDPRESS OVERRIDES (dark default untuk non-single)
   ════════════════════════════════════════════════════════════════ */

/* Dark reset HANYA untuk halaman selain single post */
html,
body:not(.single-post),
body.page,
body.archive,
body.blog,
body.search,
body.error404 {
  background-color: #04080F;
  color: #EEF2FF;
}

/* Elemen layout — hanya dark di non-single post */
body:not(.single-post) #page,
body:not(.single-post) #content,
body:not(.single-post) #primary,
body:not(.single-post) #secondary,
body:not(.single-post) main,
body:not(.single-post) article,
body:not(.single-post) .site,
body:not(.single-post) .site-content,
body:not(.single-post) .content-area,
body:not(.single-post) .entry-content,
body:not(.single-post) .wp-site-blocks {
  background-color: #04080F;
  color: #EEF2FF;
}

/* WP block resets */
.has-white-background-color,
.has-background,
:where(.wp-block) {
  background: none;
}

/* WP admin bar offset */
.admin-bar nav#mainNav{top:32px}
@media screen and (max-width:782px){.admin-bar nav#mainNav{top:46px}}
.admin-bar .article-hero,
.admin-bar .page-header,
.admin-bar .vpt-blog-main{padding-top:118px}
@media screen and (max-width:782px){
  .admin-bar .article-hero,
  .admin-bar .page-header,
  .admin-bar .vpt-blog-main{padding-top:132px}
}

/* Layout containers */
.container{max-width:1200px;margin:0 auto;padding:0 40px}
.container-narrow{max-width:860px;margin:0 auto;padding:0 40px}
.container-article{max-width:1140px;margin:0 auto;padding:0 40px}
@media(max-width:768px){
  .container,.container-narrow,.container-article{padding:0 18px}
}

/* Currency helpers */
[data-currency="usd"] .idr-only{display:none !important}
[data-currency="idr"] .usd-only{display:none !important}

/* === SECTION 2 END === */

/* ════════════════════════════════════════════════════════════════
   SECTION 3 — BLOG ARCHIVE
   ════════════════════════════════════════════════════════════════ */

.vpt-blog-main{padding:86px 0 80px;background:#04080F}
.blog-layout{display:grid;grid-template-columns:1fr 300px;gap:48px}
@media(max-width:1024px){.blog-layout{grid-template-columns:1fr}}
.blog-header{margin-bottom:40px}
.blog-title{font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(28px,4vw,42px);font-weight:800;color:#EEF2FF;margin-bottom:8px}
.blog-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-bottom:48px}
@media(max-width:768px){.blog-grid{grid-template-columns:1fr}}
.blog-card{background:#0F1628;border:1px solid rgba(255,255,255,0.13);border-radius:16px;overflow:hidden;transition:border-color .2s,transform .2s}
.blog-card:hover{border-color:rgba(0,201,167,0.2);transform:translateY(-2px)}
.blog-card-img-wrap{display:block;position:relative;aspect-ratio:16/9;overflow:hidden}
.blog-card-img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.blog-card:hover .blog-card-img{transform:scale(1.03)}
.blog-card-lang-badge{position:absolute;top:10px;right:10px;background:rgba(245,158,11,0.9);color:#04080F;font-size:10px;font-weight:700;padding:3px 8px;border-radius:100px}
.blog-card-body{padding:20px}
.blog-card-cats{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.blog-card-cat{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#00C9A7;text-decoration:none}
.blog-card-title{font-family:'Bricolage Grotesque',sans-serif;font-size:17px;font-weight:800;color:#EEF2FF;line-height:1.25;margin-bottom:8px}
.blog-card-title a{text-decoration:none;color:inherit;transition:color .2s}
.blog-card-title a:hover{color:#00C9A7}
.blog-card-summary{font-size:13px;color:#8B9FC5;line-height:1.65;margin-bottom:14px}
.blog-card-footer{display:flex;align-items:center;justify-content:space-between}
.blog-card-meta{font-size:11.5px;color:#4B5E82;display:flex;align-items:center;gap:6px}
.meta-sep{color:#4B5E82}
.blog-card-score{font-size:11px;font-weight:800;font-family:'JetBrains Mono',monospace}
.blog-card-read{font-size:12px;font-weight:700;color:#00C9A7;text-decoration:none}
.blog-sidebar-area{display:flex;flex-direction:column;gap:20px}
.vpt-pagination{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}
.vpt-pagination a,.vpt-pagination span{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:36px;padding:0 10px;border-radius:8px;font-size:13px;font-weight:700;font-family:'JetBrains Mono',monospace;text-decoration:none}
.vpt-pagination a{background:#0F1628;border:1px solid rgba(255,255,255,0.13);color:#8B9FC5}
.vpt-pagination a:hover{border-color:rgba(0,201,167,0.3);color:#00C9A7}
.vpt-pagination .current{background:#00C9A7;color:#04080F;border:none}
.no-posts{color:#8B9FC5;padding:48px 0;text-align:center}

/* === SECTION 3 END === */

/* ════════════════════════════════════════════════════════════════
   SECTION 4 — SINGLE POST (LIGHT READING SURFACE)
   Semua rule di-scope ke body.single-post.
   Tidak ada konflik dengan halaman lain.
   ════════════════════════════════════════════════════════════════ */

/* ── Tokens warna light ── */
body.single-post {
  --rg-white:    #FFFFFF;
  --rg-bg:       #FFFFFF;
  --rg-bg2:      #F1F3F5;
  --rg-heading:  #0F172A;
  --rg-text:     #1A1A2E;
  --rg-text2:    #374151;
  --rg-text3:    #6B7280;
  --rg-muted:    #9CA3AF;
  --rg-border:   #E5E7EB;
  --rg-border2:  #D1D5DB;
  --rg-teal:     #00A388;
  --rg-teal-f:   rgba(0,163,136,0.08);
  background-color: var(--rg-bg) !important;
  color: var(--rg-text2) !important;
}

/* Reset seluruh elemen di single post ke transparan/light */
body.single-post *:not(nav#mainNav):not(nav#mainNav *):not(.mobile-nav):not(.mobile-nav *):not(footer):not(footer *):not(.lp-overlay):not(.lp-overlay *):not(.ck-bar):not(.ck-bar *):not(.modal-overlay):not(.modal-overlay *):not(.vpt-audit-panel):not(.vpt-audit-panel *):not(.vpt-wa-fab):not(.sidebar-cta):not(.sidebar-cta *) {
  background-color: transparent;
  color: inherit;
}

/* ── Page wrapper ── */
body.single-post #page,
body.single-post #content,
body.single-post #primary,
body.single-post main,
body.single-post .vpt-post-wrapper {
  background-color: var(--rg-bg) !important;
  color: var(--rg-text2) !important;
}

/* ── POST HEADER — dark, konsisten dengan nav ── */
body.single-post .vpt-post-header {
  background: #04080F !important;
  border-bottom: 3px solid rgba(0,201,167,0.25) !important;
  padding: 96px 0 48px !important;
  position: relative !important;
}
body.single-post .vpt-post-header::before,
body.single-post .vpt-post-header::after { display: none; }

/* Breadcrumb */
body.single-post .vpt-breadcrumb {
  display: inline-flex;
  align-items: center;
  margin-bottom: 22px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 100px;
  padding: 7px 16px;
}
body.single-post .vpt-breadcrumb ol {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  list-style: none;
}
body.single-post .vpt-breadcrumb ol li {
  display: flex;
  align-items: center;
}
body.single-post .vpt-breadcrumb a {
  font-size: 12px;
  font-weight: 500;
  color: #8B9FC5 !important;
  text-decoration: none;
  transition: color .2s;
  padding: 0 2px;
}
body.single-post .vpt-breadcrumb a:hover { color: #00C9A7 !important; }
body.single-post .bc-sep {
  font-size: 11px;
  color: #4B5E82 !important;
  margin: 0 6px;
  opacity: 0.6;
}
body.single-post .vpt-breadcrumb ol li:last-child {
  font-size: 12px;
  font-weight: 500;
  color: #EEF2FF !important;
  opacity: 0.75;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* H1 */
body.single-post .article-title {
  font-family:'Bricolage Grotesque',sans-serif !important;
  font-size:clamp(28px,4.5vw,54px) !important;
  font-weight:800 !important; color:#EEF2FF !important;
  line-height:1.08 !important; letter-spacing:-.025em !important;
  margin-bottom:24px !important; max-width:820px;
}

/* Byline */
body.single-post .article-byline {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:16px 0 0; border-top:1px solid rgba(255,255,255,0.08) !important;
}
body.single-post .byline-avatar { width:30px; height:30px; border-radius:50%; opacity:.9; }
body.single-post .byline-name { font-size:13px; font-weight:600; color:#8B9FC5 !important; }
body.single-post .byline-sep { color:#4B5E82 !important; font-size:16px; }
body.single-post .byline-date,
body.single-post .byline-read { font-size:12.5px; color:#8B9FC5 !important; }
body.single-post .byline-kw {
  font-size:11px; color:#00C9A7 !important; font-family:'JetBrains Mono',monospace;
  background:rgba(0,201,167,0.08) !important; padding:3px 9px; border-radius:100px;
  border:1px solid rgba(0,201,167,0.22) !important;
}

/* Lang switch */
body.single-post .post-lang-switch {
  display:flex; align-items:center; gap:10px; padding:12px 0; font-size:12.5px; color:#4B5E82 !important;
}
body.single-post .lang-link {
  display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600;
  padding:5px 13px; border-radius:100px; text-decoration:none; transition:all .2s;
}
body.single-post .lang-link-id {
  background: rgba(245,158,11,0.08) !important;
  color: #D97706 !important;
  border: 1px solid rgba(245,158,11,0.2) !important;
}
body.single-post .lang-link-en {
  background: var(--rg-teal-f) !important;
  color: var(--rg-teal) !important;
  border: 1px solid rgba(0,163,136,0.2) !important;
}

/* Featured image */
body.single-post .vpt-post-featured-img-wrap {
  margin-top: 32px;
  overflow: hidden;
  line-height: 0;
}
body.single-post .vpt-post-featured-img-wrap img {
  width: 100%;
  max-height: 500px;
  object-fit: cover;
  display: block;
  border-radius: 0 !important;
  border: none !important;
  margin: 0 !important;
}

/* ────────────────────────────────────────
   ARTICLE BODY LAYOUT
   ──────────────────────────────────────── */
body.single-post .vpt-article-body-wrap {
  padding-top: 52px;
  padding-bottom: 96px;
}
body.single-post .article-body {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 56px;
  align-items: start;
  background: transparent !important;
}
@media(max-width:1100px) {
  body.single-post .article-body {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* ────────────────────────────────────────
   TOC
   ──────────────────────────────────────── */
body.single-post .vpt-content-header {
  margin-bottom: 28px;
}
body.single-post .vpt-summary {
  background: rgba(0,163,136,0.05) !important;
  border: 1px solid rgba(0,163,136,0.18) !important;
  border-left: 3px solid var(--rg-teal) !important;
  border-radius: 12px;
  padding: 18px 22px;
  margin-bottom: 20px;
}
body.single-post .vpt-summary-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--rg-teal) !important;
  margin-bottom: 8px;
  font-family: 'JetBrains Mono', monospace;
}
body.single-post .vpt-summary-text {
  font-size: 14.5px;
  color: var(--rg-text) !important;
  line-height: 1.8;
}
body.single-post .vpt-toc {
  background: var(--rg-white) !important;
  border: 1px solid var(--rg-border) !important;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 32px;
}
body.single-post .vpt-toc-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  background: var(--rg-bg) !important;
  border-bottom: 1px solid var(--rg-border) !important;
  cursor: pointer;
}
body.single-post .vpt-toc-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--rg-heading) !important;
  flex: 1;
}
body.single-post .vpt-toc-toggle {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  color: var(--rg-teal) !important;
  font-family: 'JetBrains Mono', monospace;
  transition: transform .3s;
  padding: 0 4px;
}
body.single-post .vpt-toc-list {
  list-style: none;
  padding: 12px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
body.single-post .vpt-toc-h2 > a {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--rg-text2) !important;
  text-decoration: none;
  padding: 5px 8px;
  border-radius: 6px;
  transition: all .2s;
  border-left: 2px solid transparent;
}
body.single-post .vpt-toc-h2 > a:hover,
body.single-post .vpt-toc-h2 > a.active {
  color: var(--rg-teal) !important;
  background: var(--rg-teal-f) !important;
  border-left-color: var(--rg-teal) !important;
  padding-left: 12px;
}
body.single-post .vpt-toc-sub {
  list-style: none;
  padding-left: 16px;
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
body.single-post .vpt-toc-h3 a {
  display: block;
  font-size: 14px;
  color: var(--rg-text3) !important;
  text-decoration: none;
  padding: 4px 8px;
  border-radius: 5px;
  transition: all .2s;
}
body.single-post .vpt-toc-h3 a:hover,
body.single-post .vpt-toc-h3 a.active {
  color: var(--rg-teal) !important;
  background: var(--rg-teal-f) !important;
}

/* ────────────────────────────────────────
   PROSE CONTENT — font besar, line-height nyaman
   ──────────────────────────────────────── */
body.single-post .article-prose {
  font-size: 18px !important;
  color: var(--rg-text2) !important;
  line-height: 1.9 !important;
  min-width: 0;
  background: transparent !important;
}
body.single-post .article-prose h2 {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-size: clamp(20px, 2.8vw, 28px) !important;
  font-weight: 800 !important;
  color: var(--rg-heading) !important;
  margin: 2.6em 0 .75em !important;
  line-height: 1.15 !important;
  letter-spacing: -.02em;
  padding-top: 1em !important;
  border-top: 1px solid var(--rg-border) !important;
}
body.single-post .article-prose h3 {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-size: clamp(17px, 2.2vw, 22px) !important;
  font-weight: 700 !important;
  color: var(--rg-heading) !important;
  margin: 2em 0 .65em !important;
  line-height: 1.2 !important;
}
body.single-post .article-prose h4 {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--rg-text) !important;
  margin: 1.8em 0 .6em !important;
}
body.single-post .article-prose p {
  margin-bottom: 1.6em !important;
  color: var(--rg-text2) !important;
}
body.single-post .article-prose a {
  color: var(--rg-teal) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(0,163,136,0.35);
}
body.single-post .article-prose a:hover {
  text-decoration-color: var(--rg-teal);
}
body.single-post .article-prose strong {
  color: var(--rg-heading) !important;
  font-weight: 700;
}
body.single-post .article-prose em {
  color: var(--rg-text2) !important;
  font-style: italic;
}
body.single-post .article-prose ul,
body.single-post .article-prose ol {
  margin: 0 0 1.6em 1.6em !important;
}
body.single-post .article-prose li {
  margin-bottom: .5em !important;
  color: var(--rg-text2) !important;
}
body.single-post .article-prose blockquote {
  border-left: 3px solid var(--rg-teal) !important;
  margin: 2em 0 !important;
  padding: .9em 1.4em !important;
  background: rgba(0,163,136,0.05) !important;
  border-radius: 0 10px 10px 0;
  font-size: 17px !important;
  color: var(--rg-text) !important;
  line-height: 1.75 !important;
}
body.single-post .article-prose code {
  font-family: 'JetBrains Mono', monospace;
  font-size: .85em;
  background: var(--rg-bg2) !important;
  padding: 2px 7px;
  border-radius: 5px;
  color: var(--rg-teal) !important;
  border: 1px solid var(--rg-border) !important;
}
body.single-post .article-prose pre {
  background: #1E2433 !important;
  border: 1px solid #374151 !important;
  border-radius: 12px;
  padding: 20px 24px;
  overflow-x: auto;
  margin: 1.6em 0 !important;
}
body.single-post .article-prose pre code {
  background: none !important;
  border: none !important;
  padding: 0;
  color: #E2E8F0 !important;
  font-size: .88em;
}
body.single-post .article-prose img {
  max-width: 100%;
  height: auto;
  border-radius: 10px !important;
  margin: 1.5em 0 !important;
  border: 1px solid var(--rg-border) !important;
  display: block;
}
body.single-post .article-prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5em 0;
  font-size: 15px;
}
body.single-post .article-prose th {
  background: var(--rg-bg2) !important;
  padding: 11px 16px;
  border: 1px solid var(--rg-border2) !important;
  font-weight: 700;
  color: var(--rg-heading) !important;
  text-align: left;
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
}
body.single-post .article-prose td {
  padding: 11px 16px;
  border: 1px solid var(--rg-border) !important;
  color: var(--rg-text2) !important;
}
body.single-post .article-prose tr:nth-child(even) td {
  background: var(--rg-bg) !important;
}
body.single-post .article-prose hr {
  border: none !important;
  border-top: 1px solid var(--rg-border) !important;
  margin: 3em 0;
}

/* Tags */
body.single-post .article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--rg-border) !important;
}
body.single-post .article-tags a {
  font-size: 11.5px;
  font-weight: 600;
  padding: 5px 13px;
  background: var(--rg-bg2) !important;
  border: 1px solid var(--rg-border2) !important;
  border-radius: 100px;
  color: var(--rg-text3) !important;
  text-decoration: none;
  transition: all .2s;
}
body.single-post .article-tags a:hover {
  background: var(--rg-teal-f) !important;
  border-color: rgba(0,163,136,0.3) !important;
  color: var(--rg-teal) !important;
}

/* FAQ */
body.single-post .article-faq {
  margin-top: 48px;
  background: var(--rg-white) !important;
  border: 1px solid var(--rg-border) !important;
  border-radius: 16px;
  padding: 28px;
}
body.single-post .article-faq h2 {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  color: var(--rg-heading) !important;
  margin-bottom: 20px !important;
  border-top: none !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
}
body.single-post .article-faq-item {
  border-bottom: 1px solid var(--rg-bg2) !important;
}
body.single-post .article-faq-item:last-child {
  border-bottom: none !important;
}
body.single-post .article-faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--rg-text) !important;
  cursor: pointer;
  list-style: none;
  gap: 20px;
  transition: color .2s;
}
body.single-post .article-faq-q::-webkit-details-marker { display: none; }
body.single-post .article-faq-q::after {
  content: '+';
  font-family: 'JetBrains Mono', monospace;
  font-size: 18px;
  color: var(--rg-teal) !important;
  transition: transform .3s;
  flex-shrink: 0;
}
body.single-post details.article-faq-item[open] .article-faq-q {
  color: var(--rg-teal) !important;
}
body.single-post details.article-faq-item[open] .article-faq-q::after {
  transform: rotate(45deg);
}
body.single-post .article-faq-a {
  padding: 0 0 16px;
  font-size: 14px;
  color: var(--rg-text2) !important;
  line-height: 1.85;
}

/* Author box */
body.single-post .article-author-box {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  background: var(--rg-white) !important;
  border: 1px solid var(--rg-border) !important;
  border-radius: 16px;
  padding: 24px;
  margin-top: 48px;
}
body.single-post .author-box-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 2px solid var(--rg-border2) !important;
  object-fit: cover;
}
body.single-post .author-box-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--rg-teal) !important;
  font-family: 'JetBrains Mono', monospace;
  margin-bottom: 6px;
}
body.single-post .author-box-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--rg-heading) !important;
  margin-bottom: 8px;
}
body.single-post .author-box-bio {
  font-size: 13px;
  color: var(--rg-text3) !important;
  line-height: 1.7;
}

/* Post navigation */
body.single-post .post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 48px;
}
@media(max-width:600px) {
  body.single-post .post-nav { grid-template-columns: 1fr; }
}
body.single-post .post-nav-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  background: var(--rg-white) !important;
  border: 1px solid var(--rg-border) !important;
  border-radius: 14px;
  text-decoration: none;
  transition: all .2s;
}
body.single-post .post-nav-link:hover {
  border-color: rgba(0,163,136,0.3) !important;
  background: var(--rg-bg) !important;
  transform: translateY(-1px);
}
body.single-post .post-nav-next {
  justify-content: flex-end;
  text-align: right;
}
body.single-post .post-nav-arrow {
  font-size: 22px;
  color: var(--rg-teal) !important;
  flex-shrink: 0;
}
body.single-post .post-nav-label {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--rg-muted) !important;
  font-family: 'JetBrains Mono', monospace;
  margin-bottom: 5px;
}
body.single-post .post-nav-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--rg-heading) !important;
  line-height: 1.4;
}

/* Comment form */
body.single-post .comment-respond {
  background: var(--rg-white) !important;
  border: 1px solid var(--rg-border) !important;
  border-radius: 16px;
  padding: 28px;
  margin-top: 40px;
}
body.single-post .comment-respond h3,
body.single-post .comment-respond .comment-reply-title {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  color: var(--rg-heading) !important;
  margin-bottom: 24px !important;
}
body.single-post .comment-form label {
  color: var(--rg-text3) !important;
  font-size: 13px;
  font-weight: 600;
  display: block;
  margin-bottom: 6px;
}
body.single-post .comment-form input[type="text"],
body.single-post .comment-form input[type="email"],
body.single-post .comment-form input[type="url"],
body.single-post .comment-form textarea {
  background: var(--rg-white) !important;
  border: 1px solid var(--rg-border2) !important;
  color: var(--rg-text) !important;
  border-radius: 8px;
  padding: 10px 14px;
  width: 100%;
  font-family: 'Figtree', sans-serif;
  font-size: 14px;
  transition: border-color .2s, box-shadow .2s;
}
body.single-post .comment-form input:focus,
body.single-post .comment-form textarea:focus {
  outline: none;
  border-color: var(--rg-teal) !important;
  box-shadow: 0 0 0 3px rgba(0,163,136,0.12);
}
body.single-post .comment-form .submit,
body.single-post .comment-form input[type="submit"] {
  background: var(--rg-teal) !important;
  color: #fff !important;
  border: none !important;
  padding: 12px 28px;
  border-radius: 8px;
  font-weight: 700;
  font-family: 'Figtree', sans-serif;
  font-size: 14px;
  cursor: pointer;
  transition: background .2s;
}
body.single-post .comment-form .submit:hover,
body.single-post .comment-form input[type="submit"]:hover {
  background: #007a67 !important;
}
body.single-post .comment-list .comment {
  border-bottom: 1px solid var(--rg-border);
  padding: 20px 0;
}
body.single-post .comment-list .comment-body {
  background: var(--rg-bg) !important;
  border: 1px solid var(--rg-border) !important;
  border-radius: 12px;
  padding: 18px 20px;
}
body.single-post .comment-author .fn,
body.single-post .comment-author .fn a {
  color: var(--rg-heading) !important;
  font-weight: 700;
  text-decoration: none;
}
body.single-post .comment-metadata,
body.single-post .comment-metadata a {
  color: var(--rg-text3) !important;
  font-size: 12px;
  text-decoration: none;
}
body.single-post .comment-content p {
  color: var(--rg-text2) !important;
  font-size: 15px;
  line-height: 1.75;
}
body.single-post .reply a {
  color: var(--rg-teal) !important;
  font-size: 12px;
  font-weight: 600;
}

/* ───────────���────────────────────────────
   SIDEBAR
   ──────────────────────────────────────── */
body.single-post .article-sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: sticky;
  top: 86px;
}

/* CTA card — TETAP DARK sebagai focal point */
body.single-post .sidebar-cta {
  background: linear-gradient(145deg, #071420, #0A1628) !important;
  border: 1px solid rgba(0,201,167,0.25) !important;
  border-radius: 16px;
  padding: 24px;
  position: relative;
  overflow: hidden;
}
body.single-post .sidebar-cta::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #00C9A7, transparent);
}
body.single-post .sidebar-cta-tag {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #00C9A7 !important;
  margin-bottom: 10px;
  font-family: 'JetBrains Mono', monospace;
}
body.single-post .sidebar-cta-title {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-size: 19px;
  font-weight: 800;
  color: #EEF2FF !important;
  margin-bottom: 8px;
  line-height: 1.2;
}
body.single-post .sidebar-cta-desc {
  font-size: 12px;
  color: #8B9FC5 !important;
  line-height: 1.65;
  margin-bottom: 16px;
}
body.single-post .sidebar-cta-price {
  font-size: 13px;
  color: #8B9FC5 !important;
  margin-bottom: 18px;
}
body.single-post .sidebar-cta-price strong {
  color: #00C9A7 !important;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 20px;
}
body.single-post .sidebar-cta-btn {
  display: block;
  text-align: center;
  background: #00C9A7 !important;
  color: #04080F !important;
  font-family: 'Figtree', sans-serif;
  font-size: 13px;
  font-weight: 700;
  padding: 12px;
  border-radius: 10px;
  text-decoration: none;
  margin-bottom: 10px;
  transition: background .2s, transform .2s;
}
body.single-post .sidebar-cta-btn:hover {
  background: #00A388 !important;
  transform: translateY(-1px);
}
body.single-post .sidebar-wa-btn {
  display: block;
  text-align: center;
  background: rgba(37,211,102,0.08) !important;
  border: 1px solid rgba(37,211,102,0.2) !important;
  color: #25D366 !important;
  font-family: 'Figtree', sans-serif;
  font-size: 12px;
  font-weight: 600;
  padding: 10px;
  border-radius: 10px;
  text-decoration: none;
  transition: background .2s;
}
body.single-post .sidebar-wa-btn:hover {
  background: rgba(37,211,102,0.15) !important;
}

/* Related articles — light */
body.single-post .sidebar-related {
  background: var(--rg-white) !important;
  border: 1px solid var(--rg-border) !important;
  border-radius: 14px;
  padding: 20px;
}
body.single-post .sidebar-related-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--rg-muted) !important;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-family: 'JetBrains Mono', monospace;
  margin-bottom: 14px;
}
body.single-post .related-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  text-decoration: none;
  padding: 10px 0;
  border-bottom: 1px solid var(--rg-bg2) !important;
  transition: all .2s;
}
body.single-post .related-item:last-child {
  border-bottom: none !important;
  padding-bottom: 0;
}
body.single-post .related-thumb img {
  width: 56px;
  height: 42px;
  border-radius: 6px !important;
  object-fit: cover;
  flex-shrink: 0;
  border: none !important;
  margin: 0 !important;
}
body.single-post .related-title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--rg-text2) !important;
  line-height: 1.4;
  transition: color .2s;
}
body.single-post .related-item:hover .related-title {
  color: var(--rg-teal) !important;
}

/* Widget area */
body.single-post .article-sidebar .widget {
  background: var(--rg-white) !important;
  border: 1px solid var(--rg-border) !important;
  border-radius: 12px;
  padding: 18px;
}
body.single-post .article-sidebar .widget-title {
  font-family: 'Bricolage Grotesque', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--rg-heading) !important;
  margin-bottom: 14px !important;
  border: none !important;
  padding: 0 !important;
}
body.single-post .article-sidebar .widget ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
body.single-post .article-sidebar .widget li {
  padding: 6px 0;
  border-bottom: 1px solid var(--rg-bg2) !important;
  font-size: 13px;
  color: var(--rg-text2) !important;
}
body.single-post .article-sidebar .widget li:last-child {
  border-bottom: none !important;
}
body.single-post .article-sidebar .widget a {
  color: var(--rg-text3) !important;
  text-decoration: none;
  transition: color .2s;
}
body.single-post .article-sidebar .widget a:hover {
  color: var(--rg-teal) !important;
}

/* ────────────────────────────────────────
   PAGE TEMPLATE (light juga kalau ada)
   ──────────────────────────────────────── */
.page-header{background:#04080F;padding:86px 0 40px;border-bottom:1px solid rgba(255,255,255,0.07)}
.page-title{font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(28px,4.5vw,52px);font-weight:800;color:#EEF2FF;margin-top:16px;margin-bottom:12px}
.page-summary{font-size:16px;color:#8B9FC5;max-width:600px;line-height:1.75}
.page-content{padding:48px 0 80px;font-size:16px;color:#8B9FC5;line-height:1.85;background:#04080F}
.page-content h2{font-family:'Bricolage Grotesque',sans-serif;font-size:26px;font-weight:800;color:#EEF2FF;margin:2em 0 .8em}
.page-content h3{font-family:'Bricolage Grotesque',sans-serif;font-size:20px;font-weight:700;color:#EEF2FF;margin:1.8em 0 .6em}
.page-content p{margin-bottom:1.4em}
.page-content a{color:#00C9A7}
.page-content ul,.page-content ol{margin:0 0 1.4em 1.6em}
.page-content li{margin-bottom:.5em}
.page-featured-img{width:100%;height:auto;border-radius:16px;margin:32px 0;border:1px solid rgba(255,255,255,0.07)}

/* ────────────────────────────────────────
   ADMIN BAR OFFSET (single post)
   ──────────────────────────────────────── */
.admin-bar body.single-post .vpt-post-header { padding-top: 128px; }
@media screen and (max-width:782px) {
  .admin-bar body.single-post .vpt-post-header { padding-top: 142px; }
}

/* ────────────────────────────────────────
   RESPONSIVE SINGLE POST
   ──────────────────────────────────────── */
@media(max-width:768px) {
  body.single-post .vpt-post-header { padding-top: 80px; }
  body.single-post .article-prose { font-size: 16px !important; line-height: 1.85 !important; }
  body.single-post .vpt-article-body-wrap { padding-top: 32px; padding-bottom: 64px; }
  body.single-post .article-title { font-size: clamp(22px, 7vw, 36px) !important; }
}

/* === SECTION 4 END === */

/* ════════════════════════════════════════════════════════════════
   SECTION 5 — PAGE (page.php) LIGHT SURFACE
   ════════════════════════════════════════════════════════════════ */

body.page {
  --rg-white:   #FFFFFF;
  --rg-bg:      #F8F9FA;
  --rg-bg2:     #F1F3F5;
  --rg-heading: #0F172A;
  --rg-text:    #1A1A2E;
  --rg-text2:   #374151;
  --rg-text3:   #6B7280;
  --rg-muted:   #9CA3AF;
  --rg-border:  #E5E7EB;
  --rg-border2: #D1D5DB;
  --rg-teal:    #00A388;
  --rg-teal-f:  rgba(0,163,136,0.08);
  background-color: var(--rg-bg) !important;
  color: var(--rg-text2) !important;
}

/* Wrapper light */
body.page #page,
body.page #content,
body.page #primary,
body.page main,
body.page .vpt-post-wrapper {
  background-color: var(--rg-bg) !important;
  color: var(--rg-text2) !important;
}

/* ── NAV: force dark override on page ── */
body.page nav#mainNav {
  background: rgba(4,8,15,0.97) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
}
body.page nav#mainNav.solid {
  background: rgba(4,8,15,0.97) !important;
}
body.page .nav-links a { color: var(--text2) !important; }
body.page .nav-links a:hover { color: var(--text) !important; }
body.page .currency-sw {
  background: var(--bgc) !important;
  border: 1px solid var(--border2) !important;
}
body.page .currency-sw button { color: var(--text2) !important; background: transparent !important; }
body.page .currency-sw button.active { background: var(--teal) !important; color: #04080F !important; }
body.page .lang-sw {
  background: var(--bgc) !important;
  border: 1px solid var(--border2) !important;
  color: var(--text2) !important;
}
body.page .lang-sw:hover { border-color: var(--teal) !important; color: var(--text) !important; }
body.page .lang-drop {
  background: var(--bgc2) !important;
  border: 1px solid var(--border2) !important;
}
body.page .lang-drop a, body.page .lang-drop button {
  background: transparent !important;
  color: var(--text2) !important;
}
body.page .lang-drop a:hover, body.page .lang-drop button:hover {
  background: var(--bgc) !important;
  color: var(--text) !important;
}
body.page .lang-drop a.active, body.page .lang-drop button.active {
  color: var(--teal) !important;
}
body.page .nav-cta { background: var(--gold) !important; color: #04080F !important; }
body.page .nav-cta:hover { background: var(--gold-d) !important; }
body.page .hamburger span { background: var(--text2) !important; }
body.page .mobile-nav {
  background: rgba(4,8,15,0.98) !important;
}
body.page .mobile-nav a { color: var(--text2) !important; }
body.page .mobile-nav a:hover { color: var(--text) !important; }
body.page .mobile-nav-cta { background: var(--gold) !important; color: #04080F !important; }
body.page .nav-logo img { filter: brightness(0) invert(1) !important; }

/* Post header */
body.page .vpt-post-header {
  background: var(--rg-white) !important;
  border-bottom: 1px solid var(--rg-border);
  padding: 96px 0 36px;
}
body.page .vpt-post-header::before,
body.page .vpt-post-header::after { display: none; }

/* Breadcrumb */
body.page .vpt-breadcrumb ol { display:flex;align-items:center;flex-wrap:wrap;gap:4px;list-style:none;margin-bottom:16px; }
body.page .vpt-breadcrumb a { font-size:12px;color:var(--rg-text3) !important;text-decoration:none;transition:color .2s; }
body.page .vpt-breadcrumb a:hover { color:var(--rg-teal) !important; }
body.page .bc-sep { font-size:12px;color:var(--rg-muted) !important; }
body.page .vpt-breadcrumb ol li:last-child { font-size:12px;color:var(--rg-text3); }

/* H1 */
body.page .page-h1 {
  font-family:'Bricolage Grotesque',sans-serif !important;
  font-size:clamp(26px,4.5vw,52px) !important;
  font-weight:800 !important;
  color:var(--rg-heading) !important;
  line-height:1.08 !important;
  letter-spacing:-.025em !important;
  margin-bottom:16px !important;
}
body.page .page-summary-text {
  font-size:16px;color:var(--rg-text3) !important;line-height:1.75;max-width:600px;
}

/* Featured image */
body.page .page-featured-img {
  width:100%;max-height:460px;object-fit:cover;display:block;
  border-radius:12px;border:1px solid var(--rg-border) !important;
}

/* Page content */
body.page .page-content,
body.page .entry-content {
  font-size:17px;color:var(--rg-text2) !important;line-height:1.85;
  background: transparent !important;
}
body.page .page-content h2,body.page .entry-content h2 {
  font-family:'Bricolage Grotesque',sans-serif !important;
  font-size:clamp(20px,2.8vw,28px) !important;font-weight:800 !important;
  color:var(--rg-heading) !important;margin:2.4em 0 .7em !important;
  line-height:1.15 !important;padding-top:1em;border-top:1px solid var(--rg-border);
}
body.page .page-content h3,body.page .entry-content h3 {
  font-family:'Bricolage Grotesque',sans-serif !important;
  font-size:clamp(17px,2.2vw,22px) !important;font-weight:700 !important;
  color:var(--rg-heading) !important;margin:2em 0 .65em !important;
}
body.page .page-content h4,body.page .entry-content h4 {
  font-size:16px !important;font-weight:700 !important;
  color:var(--rg-text) !important;margin:1.6em 0 .5em !important;
}
body.page .page-content p,body.page .entry-content p {
  margin-bottom:1.5em !important;color:var(--rg-text2) !important;
}
body.page .page-content a,body.page .entry-content a {
  color:var(--rg-teal) !important;text-decoration:underline;
  text-underline-offset:3px;text-decoration-color:rgba(0,163,136,0.35);
}
body.page .page-content a:hover,body.page .entry-content a:hover { text-decoration-color:var(--rg-teal); }
body.page .page-content strong,body.page .entry-content strong { color:var(--rg-heading) !important;font-weight:700; }
body.page .page-content ul,body.page .page-content ol,
body.page .entry-content ul,body.page .entry-content ol { margin:0 0 1.5em 1.5em !important; }
body.page .page-content li,body.page .entry-content li { margin-bottom:.45em !important;color:var(--rg-text2) !important; }
body.page .page-content blockquote,body.page .entry-content blockquote {
  border-left:3px solid var(--rg-teal) !important;margin:1.8em 0 !important;
  padding:.9em 1.4em !important;background:rgba(0,163,136,0.05) !important;
  border-radius:0 10px 10px 0;font-size:16px !important;
  color:var(--rg-text) !important;line-height:1.75 !important;
}
body.page .page-content code,body.page .entry-content code {
  font-family:'JetBrains Mono',monospace;font-size:.85em;
  background:var(--rg-bg2) !important;padding:2px 7px;border-radius:5px;
  color:var(--rg-teal) !important;border:1px solid var(--rg-border) !important;
}
body.page .page-content pre,body.page .entry-content pre {
  background:#1E2433 !important;border:1px solid #374151 !important;
  border-radius:12px;padding:20px 24px;overflow-x:auto;margin:1.6em 0 !important;
}
body.page .page-content pre code,body.page .entry-content pre code {
  background:none !important;border:none !important;color:#e2e8f0 !important;font-size:14px !important;
}
body.page .page-content img,body.page .entry-content img { border-radius:8px;max-width:100%; }

/* Sidebar CTA tetap dark */
body.page .sidebar-cta {
  background:linear-gradient(145deg,#0C1222 0%,#071420 100%) !important;
  border:1px solid rgba(0,201,167,0.25) !important;
  border-radius:16px;padding:24px 22px;position:relative;overflow:hidden;
}
body.page .sidebar-cta::before {
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,#00C9A7,transparent);
}
body.page .sidebar-cta-tag { font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#00C9A7 !important;margin-bottom:10px; }
body.page .sidebar-cta-title { font-family:'Bricolage Grotesque',sans-serif;font-size:18px;font-weight:800;color:#fff !important;margin-bottom:8px;line-height:1.2; }
body.page .sidebar-cta-desc { font-size:12px;color:rgba(255,255,255,0.55) !important;line-height:1.6;margin-bottom:16px; }
body.page .sidebar-cta-btn {
  display:block;text-align:center;background:#00C9A7 !important;color:#04080F !important;
  font-size:13px;font-weight:700;padding:11px 18px;border-radius:9px;
  text-decoration:none;transition:background .2s,transform .2s;margin-bottom:10px;
}
body.page .sidebar-cta-btn:hover { background:#00A388 !important;transform:translateY(-1px); }

/* === SECTION 5 END === */


/* ════════════════════════════════════════════════════════════════
   SECTION 6 — ARCHIVE / BLOG INDEX LIGHT SURFACE
   Scope: body.archive, body.blog
   ════════════════════════════════════════════════════════════════ */

body.archive,
body.blog {
  --rg-white:   #FFFFFF;
  --rg-bg:      #F8F9FA;
  --rg-bg2:     #F1F3F5;
  --rg-heading: #0F172A;
  --rg-text:    #1A1A2E;
  --rg-text2:   #374151;
  --rg-text3:   #6B7280;
  --rg-muted:   #9CA3AF;
  --rg-border:  #E5E7EB;
  --rg-border2: #D1D5DB;
  --rg-teal:    #00A388;
  --rg-teal-f:  rgba(0,163,136,0.08);
  background-color: var(--rg-bg) !important;
  color: var(--rg-text2) !important;
}

/* Wrapper */
body.archive #page,body.archive #content,body.archive #primary,
body.archive main,body.archive .vpt-blog-main,
body.blog #page,body.blog #content,body.blog #primary,
body.blog main,body.blog .vpt-blog-main {
  background-color: var(--rg-bg) !important;
  color: var(--rg-text2) !important;
}

/* ── NAV: force dark override on archive/blog ── */
body.archive nav#mainNav,
body.blog nav#mainNav {
  background: rgba(4,8,15,0.97) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
}
body.archive nav#mainNav.solid,
body.blog nav#mainNav.solid {
  background: rgba(4,8,15,0.97) !important;
}
body.archive .nav-links a,body.blog .nav-links a { color: var(--text2) !important; }
body.archive .nav-links a:hover,body.blog .nav-links a:hover { color: var(--text) !important; }
body.archive .currency-sw,body.blog .currency-sw {
  background: var(--bgc) !important;border: 1px solid var(--border2) !important;
}
body.archive .currency-sw button,body.blog .currency-sw button {
  color: var(--text2) !important;background: transparent !important;
}
body.archive .currency-sw button.active,body.blog .currency-sw button.active {
  background: var(--teal) !important;color: #04080F !important;
}
body.archive .lang-sw,body.blog .lang-sw {
  background: var(--bgc) !important;border: 1px solid var(--border2) !important;color: var(--text2) !important;
}
body.archive .lang-sw:hover,body.blog .lang-sw:hover {
  border-color: var(--teal) !important;color: var(--text) !important;
}
body.archive .lang-drop,body.blog .lang-drop {
  background: var(--bgc2) !important;border: 1px solid var(--border2) !important;
}
body.archive .lang-drop a,body.archive .lang-drop button,
body.blog .lang-drop a,body.blog .lang-drop button {
  background: transparent !important;color: var(--text2) !important;
}
body.archive .lang-drop a:hover,body.archive .lang-drop button:hover,
body.blog .lang-drop a:hover,body.blog .lang-drop button:hover {
  background: var(--bgc) !important;color: var(--text) !important;
}
body.archive .lang-drop a.active,body.blog .lang-drop a.active {
  color: var(--teal) !important;
}
body.archive .nav-cta,body.blog .nav-cta { background: var(--gold) !important;color: #04080F !important; }
body.archive .nav-cta:hover,body.blog .nav-cta:hover { background: var(--gold-d) !important; }
body.archive .hamburger span,body.blog .hamburger span { background: var(--text2) !important; }
body.archive .mobile-nav,body.blog .mobile-nav { background: rgba(4,8,15,0.98) !important; }
body.archive .mobile-nav a,body.blog .mobile-nav a { color: var(--text2) !important; }
body.archive .mobile-nav a:hover,body.blog .mobile-nav a:hover { color: var(--text) !important; }
body.archive .mobile-nav-cta,body.blog .mobile-nav-cta { background: var(--gold) !important;color: #04080F !important; }
body.archive .nav-logo img,body.blog .nav-logo img { filter: brightness(0) invert(1) !important; }

/* Archive header */
body.archive .blog-header,body.blog .blog-header {
  padding:30px 0 24px;background:var(--rg-white) !important;
  border-bottom:1px solid var(--rg-border);margin-bottom:36px;
}
body.archive .blog-title,body.blog .blog-title {
  font-family:'Bricolage Grotesque',sans-serif !important;
  font-size:clamp(26px,4vw,42px) !important;font-weight:800 !important;
  color:var(--rg-heading) !important;margin-bottom:6px;
}
body.archive .archive-desc,body.blog .archive-desc {
  font-size:14px;color:var(--rg-text3) !important;line-height:1.7;margin-top:8px;max-width:600px;
}

/* Blog cards */
body.archive .blog-card,body.blog .blog-card {
  background:var(--rg-white) !important;border:1px solid var(--rg-border) !important;
  border-radius:16px;overflow:hidden;transition:border-color .2s,transform .2s,box-shadow .2s;
}
body.archive .blog-card:hover,body.blog .blog-card:hover {
  border-color:rgba(0,163,136,0.3) !important;transform:translateY(-2px);box-shadow:0 8px 32px rgba(0,0,0,0.08);
}
body.archive .blog-card-body,body.blog .blog-card-body { background:var(--rg-white) !important; }
body.archive .blog-card-cat,body.blog .blog-card-cat { color:var(--rg-teal) !important; }
body.archive .blog-card-title,body.blog .blog-card-title { color:var(--rg-heading) !important; }
body.archive .blog-card-title a,body.blog .blog-card-title a { color:var(--rg-heading) !important; }
body.archive .blog-card-title a:hover,body.blog .blog-card-title a:hover { color:var(--rg-teal) !important; }
body.archive .blog-card-summary,body.blog .blog-card-summary { color:var(--rg-text3) !important; }
body.archive .blog-card-meta,body.blog .blog-card-meta { color:var(--rg-muted) !important; }
body.archive .meta-sep,body.blog .meta-sep { color:var(--rg-border2) !important; }
body.archive .blog-card-read,body.blog .blog-card-read { color:var(--rg-teal) !important; }

/* Pagination */
body.archive .vpt-pagination a,body.blog .vpt-pagination a {
  background:var(--rg-white) !important;border:1px solid var(--rg-border2) !important;color:var(--rg-text3) !important;
}
body.archive .vpt-pagination a:hover,body.blog .vpt-pagination a:hover {
  border-color:var(--rg-teal) !important;color:var(--rg-teal) !important;
}
body.archive .vpt-pagination .current,body.blog .vpt-pagination .current {
  background:var(--rg-teal) !important;color:#fff !important;border:none !important;
}
body.archive .no-posts,body.blog .no-posts { color:var(--rg-text3) !important; }

/* Sidebar CTA tetap dark */
body.archive .sidebar-cta,body.blog .sidebar-cta {
  background:linear-gradient(145deg,#0C1222 0%,#071420 100%) !important;
  border:1px solid rgba(0,201,167,0.25) !important;
  border-radius:16px;padding:24px 22px;position:relative;overflow:hidden;
}
body.archive .sidebar-cta::before,body.blog .sidebar-cta::before {
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,#00C9A7,transparent);
}
body.archive .sidebar-cta-tag,body.blog .sidebar-cta-tag {
  font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#00C9A7 !important;margin-bottom:10px;
}
body.archive .sidebar-cta-title,body.blog .sidebar-cta-title {
  font-family:'Bricolage Grotesque',sans-serif;font-size:18px;font-weight:800;
  color:#fff !important;margin-bottom:8px;line-height:1.2;
}
body.archive .sidebar-cta-desc,body.blog .sidebar-cta-desc {
  font-size:12px;color:rgba(255,255,255,0.55) !important;line-height:1.6;margin-bottom:16px;
}
body.archive .sidebar-cta-btn,body.blog .sidebar-cta-btn {
  display:block;text-align:center;background:#00C9A7 !important;color:#04080F !important;
  font-size:13px;font-weight:700;padding:11px 18px;border-radius:9px;
  text-decoration:none;transition:background .2s,transform .2s;margin-bottom:10px;
}
body.archive .sidebar-cta-btn:hover,body.blog .sidebar-cta-btn:hover {
  background:#00A388 !important;transform:translateY(-1px);
}

/* === SECTION 6 END === */