/**
 * Grow With Usman — Global theme styles
 */

/* TOKENS */
[data-theme="dark"]{--bg:#0D0D0D;--bg2:#141414;--bg3:#1C1C1C;--border:#262626;--border2:#333;--txt:#F0EDE6;--txt2:#888;--txt3:#444;--gold:#00D4FF;--goldL:#38E7FF;--goldD:#0090B8;--green:#4CAF7D;--red:#D05A4A;--blue:#5B8DEF;--card:rgba(255,255,255,0.03);--shadow:0 2px 12px rgba(0,0,0,.6);--shadowLg:0 8px 40px rgba(0,0,0,.7)}
[data-theme="light"]{--bg:#F7F4ED;--bg2:#ECEAE4;--bg3:#E4E0D8;--border:#D4D0C8;--border2:#C8C2B6;--txt:#1C1C1C;--txt2:#5F5F5D;--txt3:#8A8A88;--gold:#00D4FF;--goldL:#38E7FF;--goldD:#0090B8;--green:#2A7A50;--red:#A04030;--blue:#2C5FC8;--card:rgba(0,0,0,0.03);--shadow:0 2px 12px rgba(0,0,0,.08);--shadowLg:0 8px 40px rgba(0,0,0,.12)}

/* BASE */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--txt);font-family:'Inter',system-ui,sans-serif;font-size:15px;line-height:1.65;overflow-x:hidden;transition:background .3s,color .3s}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.logo img{border-radius:6px}
[data-theme="dark"] .logo-light{display:none!important}
[data-theme="dark"] .logo-dark{display:block!important}
[data-theme="light"] .logo-dark{display:none!important}
[data-theme="light"] .logo-light{display:block!important}
ul{list-style:none}
.wrap{width:min(1320px,100%);margin:0 auto;padding:0 clamp(14px,2.6vw,40px)}
.sec{padding:clamp(64px,8vw,96px) 0;border-bottom:1px solid var(--border)}
.sec:last-of-type{border-bottom:none}
h1,h2,h3{font-family:'Playfair Display',Georgia,serif;line-height:1.12;color:var(--txt)}
h1{font-size:clamp(38px,5.5vw,66px);font-weight:700;letter-spacing:-.5px}
h2{font-size:clamp(26px,3.5vw,42px);font-weight:600;letter-spacing:-.3px}
h3{font-size:17px;font-weight:600}
p{color:var(--txt2)}
.ey{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:14px}
.btn{display:inline-flex;align-items:center;gap:7px;font-family:'Inter',sans-serif;font-size:13px;font-weight:600;padding:11px 22px;border-radius:4px;border:none;cursor:pointer;letter-spacing:.01em;transition:opacity .15s,transform .15s}
.btn:hover{opacity:.85;transform:translateY(-1px)}
.btn-p{background:var(--gold);color:#0D0D0D}
[data-theme="light"] .btn-p{color:#0D0D0D}
.btn-g{background:transparent;color:var(--txt);border:1px solid var(--border)}
.btn-g:hover{border-color:var(--gold);color:var(--gold);opacity:1}
.btn-lg{padding:14px 28px;font-size:14px}

/* THEME TOGGLE */
.ttog{width:44px;height:24px;background:var(--bg3);border:1px solid var(--border);border-radius:12px;position:relative;cursor:pointer;display:flex;align-items:center;padding:2px;transition:background .3s;flex-shrink:0}
.tknob{width:18px;height:18px;border-radius:50%;background:var(--gold);display:flex;align-items:center;justify-content:center;font-size:10px;transition:transform .25s}
[data-theme="light"] .tknob{transform:translateX(20px)}

/* SCROLL REVEAL */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.25,1,.5,1),transform .7s cubic-bezier(.25,1,.5,1)}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-l{opacity:0;transform:translateX(-28px);transition:opacity .7s cubic-bezier(.25,1,.5,1),transform .7s cubic-bezier(.25,1,.5,1)}
.reveal-l.visible{opacity:1;transform:translateX(0)}
.reveal-r{opacity:0;transform:translateX(28px);transition:opacity .7s cubic-bezier(.25,1,.5,1),transform .7s cubic-bezier(.25,1,.5,1)}
.reveal-r.visible{opacity:1;transform:translateX(0)}
.delay-1{transition-delay:.1s}
.delay-2{transition-delay:.18s}
.delay-3{transition-delay:.26s}
.delay-4{transition-delay:.34s}

/* NAV */
nav{position:sticky;top:0;z-index:200;background:var(--bg);border-bottom:1px solid var(--border);transition:background .3s}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:60px}
.logo{font-family:'Playfair Display',serif;font-size:17px;font-weight:700;color:var(--txt)}
.logo span{color:var(--gold)}
.nav-links{display:flex;gap:28px;list-style:none;align-items:center}
.nav-links>li{position:relative}
.nav-links>li>a{font-size:13px;font-weight:500;color:var(--txt2);transition:color .15s;display:flex;align-items:center;gap:4px}
.nav-links>li>a:hover{color:var(--txt)}
.nav-links>li>a .arrow{font-size:8px;transition:transform .2s}
.nav-links>li:hover>a .arrow{transform:rotate(180deg)}
.sub-menu{position:absolute;top:100%;left:0;background:var(--bg2);border:1px solid var(--border);border-radius:6px;padding:8px 0;min-width:220px;opacity:0;visibility:hidden;transform:translateY(8px);transition:all .2s;z-index:300;box-shadow:var(--shadowLg)}
.nav-links>li:hover .sub-menu{opacity:1;visibility:visible;transform:translateY(0)}
.sub-menu li{list-style:none}
.sub-menu li a{display:block;padding:8px 16px;font-size:13px;font-weight:500;color:var(--txt2);transition:all .15s;white-space:nowrap}
.sub-menu li a:hover{color:var(--txt);background:var(--bg3)}
.nav-r{display:flex;align-items:center;gap:12px}
.ham{display:none;background:none;border:none;color:var(--txt);cursor:pointer;padding:4px}
.mob-menu{display:none;flex-direction:column;background:var(--bg2);border-bottom:1px solid var(--border)}
.mob-menu.open{display:flex}
.mob-menu a{padding:14px 24px;font-size:15px;color:var(--txt2);border-bottom:1px solid var(--border)}
.mob-menu a:hover{color:var(--txt);background:var(--bg3)}
.mob-sub{padding-left:20px;display:none}
.mob-sub.open{display:block}
.mob-menu .mob-sub-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;padding:14px 24px;font-size:15px;color:var(--txt2);border-bottom:1px solid var(--border);background:none;border-left:none;border-right:none;border-top:none;cursor:pointer;font-family:inherit;text-align:left}
.mob-menu .mob-sub-toggle:hover{color:var(--txt);background:var(--bg3)}
.mob-menu .mob-sub-toggle .mob-arrow{font-size:10px;transition:transform .2s}
.mob-menu .mob-sub-toggle.open .mob-arrow{transform:rotate(180deg)}

/* FOOTER */
footer{background:var(--bg2);border-top:1px solid var(--border);padding:52px 0 28px}
.ft-top{display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr;gap:28px;margin-bottom:40px;padding-bottom:40px;border-bottom:1px solid var(--border);align-items:start;text-align:left}
.ft-logo{font-family:'Playfair Display',serif;font-size:18px;font-weight:700;color:var(--txt);margin-bottom:8px}
.ft-logo img{border-radius:6px}
.ft-tag{font-size:13px;color:var(--txt2);line-height:1.6;max-width:280px;margin:0}
.ft-col h5{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:13px}
.ft-col ul{display:flex;flex-direction:column;gap:9px;list-style:none;padding:0;margin:0;align-items:flex-start}
.ft-col ul a{font-size:13px;color:var(--txt2);transition:color .15s}
.ft-col ul a:hover{color:var(--txt)}
.ft-btm{display:flex;justify-content:center;align-items:center;text-align:center;padding-top:4px}
.ft-btm p{font-size:12px;color:var(--txt3)}
.ft-highlight{color:var(--gold);font-weight:600}
.ft-social-wrap{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.ft-social-wrap .ft-social{margin:0}
.ft-social{display:flex;gap:10px;list-style:none;padding:0;margin:14px 0 0;justify-content:flex-start}
.ft-social a{width:34px;height:34px;border-radius:50%;border:1px solid var(--border);background:var(--bg3);display:flex;align-items:center;justify-content:center;color:var(--txt2);transition:all .2s ease}
.ft-social a:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-1px)}
.ft-social svg{width:15px;height:15px;display:block}

/* BLOG / SINGLE */
.blog-hero{padding:clamp(54px,7vw,72px) 0 clamp(40px,5vw,56px);border-bottom:1px solid var(--border)}
.blog-hero h1{margin-bottom:16px}
.blog-hero-sub{font-size:17px;color:var(--txt2);line-height:1.72;max-width:560px}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:clamp(48px,6vw,72px) 0}
.blog-card{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:28px 24px;display:flex;flex-direction:column;transition:border-color .25s,transform .25s,box-shadow .25s;box-shadow:var(--shadow)}
.blog-card:hover{border-color:var(--goldD);transform:translateY(-4px);box-shadow:var(--shadowLg)}
.blog-card-meta{display:flex;flex-wrap:wrap;gap:10px;font-size:11px;color:var(--txt3);margin-bottom:14px}
.blog-card h2{font-size:20px;margin-bottom:10px;line-height:1.3}
.blog-card h2 a:hover{color:var(--gold)}
.blog-card-excerpt{font-size:14px;color:var(--txt2);line-height:1.7;margin-bottom:20px;flex:1}
.blog-card-footer{display:flex;align-items:center;justify-content:space-between;padding-top:16px;border-top:1px solid var(--border)}
.blog-card-author{font-size:12px;color:var(--txt2)}
.blog-card-author strong{color:var(--txt);font-weight:600}
.blog-pagination{display:flex;justify-content:center;gap:10px;padding:40px 0;flex-wrap:wrap}
.blog-pagination a,.blog-pagination span{font-size:13px;padding:8px 16px;border-radius:4px;border:1px solid var(--border);color:var(--txt2);transition:all .15s}
.blog-pagination a:hover{border-color:var(--gold);color:var(--gold)}
.blog-pagination .current{background:var(--gold);color:#0D0D0D;border-color:var(--gold);font-weight:600}

.post-hero{padding:clamp(54px,7vw,72px) 0 clamp(40px,5vw,56px);border-bottom:1px solid var(--border)}
.post-hero h1{margin-bottom:16px}
.post-meta{display:flex;flex-wrap:wrap;gap:10px;font-size:12px;color:var(--txt3);margin-bottom:14px}
.post-excerpt{font-size:17px;color:var(--txt2);line-height:1.72;max-width:1280px}
.post-content{padding:clamp(48px,6vw,72px) 0}
.post-body{max-width:1280px;margin:0 auto}
.post-body h2{font-size:clamp(22px,3vw,32px);font-weight:600;margin:40px 0 16px}
.post-body h3{font-size:18px;font-weight:600;margin:28px 0 10px}
.post-body p{color:var(--txt2);margin-bottom:16px;line-height:1.75}
.post-body ul,.post-body ol{padding-left:20px;margin-bottom:16px;color:var(--txt2)}
.post-body li{margin-bottom:8px}
.post-body strong{color:var(--txt);font-weight:600}
.post-body blockquote{border-left:3px solid var(--gold);padding:16px 20px;margin:24px 0;background:var(--bg2);border-radius:0 8px 8px 0}
.post-body a{color:var(--gold);text-decoration:underline}
.post-body img{border-radius:8px;margin:24px 0;max-width:100%;height:auto}
.post-nav{padding:40px 0;border-top:1px solid var(--border)}
.post-nav-inner{display:flex;justify-content:space-between;gap:20px}
.related{background:var(--bg2);padding:clamp(48px,6vw,72px) 0}
.related-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}
.related-card{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:24px}

.error-page{display:flex;align-items:center;justify-content:center;min-height:60vh;text-align:center;padding:80px 0}
.error-page h1{font-size:clamp(60px,10vw,120px);color:var(--gold);opacity:.3;margin-bottom:16px}