/* ============================================================
   MoneyTrellis — style.css  (light + dark, ~35KB)
   Fonts: Plus Jakarta Sans (loaded via HTML <link>)
   ============================================================ */

/* ---------- THEME VARIABLES ---------- */
:root{
    --bg:#ffffff;
    --bg-alt:#f4f7fb;
    --card:#ffffff;
    --heading:#0b1f3a;
    --ink:#1a2b45;
    --body:#5b6b84;
    --muted:#93a1b6;
    --line:#e3eaf4;
    --field-bg:#f8fafd;
    --header-bg:rgba(255,255,255,.92);
    --navy:#0b1f3a;
    --navy-2:#12294a;
    --green:#10b981;
    --green-d:#0d9668;
    --gold:#f5b841;
    --red:#e5484d;
    --radius:16px;
    --shadow:0 10px 30px rgba(11,31,58,.08);
    --shadow-lg:0 24px 60px rgba(11,31,58,.14);
    --grid-line:rgba(11,31,58,.035);
    --font:"Plus Jakarta Sans","Segoe UI",system-ui,-apple-system,sans-serif;
    --max:1140px;
}

html[data-theme="dark"]{
    --bg:#0b1220;
    --bg-alt:#101a2e;
    --card:#14203a;
    --heading:#eef3fb;
    --ink:#d9e2f2;
    --body:#9dabc6;
    --muted:#7f8fb0;
    --line:#233250;
    --field-bg:#0f1830;
    --header-bg:rgba(11,18,32,.92);
    --green:#2ecc96;
    --green-d:#25b485;
    --shadow:0 10px 30px rgba(0,0,0,.35);
    --shadow-lg:0 24px 60px rgba(0,0,0,.5);
    --grid-line:rgba(255,255,255,.045);
    color-scheme:dark;
}

/* ---------- RESET ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background .35s ease,color .35s ease}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
ul{list-style:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font-family:inherit;font-size:1rem}

.container{width:100%;max-width:var(--max);margin:0 auto;padding:0 20px}
.narrow{max-width:820px}
.section{padding:80px 0;transition:background .35s ease}
.section-alt{background:var(--bg-alt)}
.section-head{text-align:center;max-width:700px;margin:0 auto 42px}
.section-head .search-box{margin:24px auto 0}
.section-head p{color:var(--body);margin-top:10px}
h1,h2,h3,h4{font-family:var(--font);line-height:1.22;color:var(--heading);font-weight:800;letter-spacing:-.4px}
h1{font-size:clamp(2.1rem,5vw,3.3rem);letter-spacing:-1.2px}
h2{font-size:clamp(1.7rem,3.5vw,2.4rem)}
h3{font-size:1.2rem}
.highlight{color:var(--green)}
.eyebrow{display:inline-block;font-size:.78rem;font-weight:800;letter-spacing:2.5px;text-transform:uppercase;color:var(--green);margin-bottom:12px}
.lead{font-size:1.1rem;color:var(--body);max-width:560px;margin:18px 0 26px}
.lead-sm{color:var(--body);margin:14px 0 22px}

/* ---------- BUTTONS ---------- */
.btn{display:inline-block;padding:11px 24px;border-radius:50px;font-weight:700;font-size:.95rem;transition:transform .25s,box-shadow .25s,background .25s,color .25s,border-color .25s;border:2px solid transparent;text-align:center}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-lg{padding:14px 30px;font-size:1rem}
.btn-block{display:block;width:100%}
.btn-primary{background:var(--green);color:#fff;box-shadow:0 8px 20px rgba(16,185,129,.3)}
.btn-primary:hover{background:var(--green-d);box-shadow:0 12px 26px rgba(16,185,129,.4)}
.btn-outline{border-color:var(--heading);color:var(--heading)}
.btn-outline:hover{background:var(--heading);color:var(--bg)}
.btn-light{background:#fff;color:#0b1f3a}
.btn-ghost{border-color:rgba(255,255,255,.5);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.12)}

/* ---------- HEADER ---------- */
.header{position:sticky;top:0;z-index:100;background:var(--header-bg);backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:.3s}
.header.scrolled{box-shadow:0 4px 20px rgba(0,0,0,.1);border-color:var(--line)}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;height:68px;gap:16px}
.logo{font-size:1.4rem;font-weight:800;color:var(--heading);letter-spacing:-.6px;display:flex;align-items:center;gap:8px}
.logo span{color:var(--green)}
.logo-icon{width:34px;height:34px;background:linear-gradient(135deg,var(--navy),var(--green));color:#fff !important;border-radius:9px;display:grid;place-items:center;font-size:1.1rem;font-weight:800}
.logo.light{color:#fff}
.nav{display:flex;align-items:center;gap:24px}
.nav-link{font-size:.93rem;font-weight:600;color:var(--ink);position:relative;padding:6px 0;transition:.2s}
.nav-link::after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--green);transition:.3s;border-radius:2px}
.nav-link:hover,.nav-link.active{color:var(--green)}
.nav-link:hover::after,.nav-link.active::after{width:100%}
.nav-actions{display:flex;align-items:center;gap:8px}
.theme-btn{width:40px;height:40px;border-radius:50%;border:1.5px solid var(--line);background:var(--card);font-size:1.05rem;display:grid;place-items:center;transition:.3s}
.theme-btn:hover{border-color:var(--green);transform:rotate(20deg) scale(1.06)}
.hamburger{display:none;flex-direction:column;gap:5px;padding:8px}
.hamburger span{width:24px;height:2.5px;background:var(--heading);border-radius:3px;transition:.3s}
.hamburger.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* ---------- READING PROGRESS (article pages) ---------- */
.progress{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--green),var(--gold));z-index:200;transition:width .1s linear}

/* ---------- AD SLOTS (generic — ad network code yahan paste karein) ---------- */
.ad-slot{background:var(--bg-alt);border:1px dashed var(--line);border-radius:12px;min-height:100px;display:flex;flex-direction:column;align-items:center;justify-content:center;margin:24px auto;max-width:var(--max);width:calc(100% - 40px);overflow:hidden;position:relative;padding:24px 8px 8px}
.ad-slot iframe,.ad-slot ins,.ad-slot embed,.ad-slot object,.ad-slot img,.ad-slot script{max-width:100%}
.ad-banner{min-height:95px}
.ad-rect{min-height:260px;max-width:340px}
.ad-label{font-size:.63rem;letter-spacing:2px;text-transform:uppercase;color:var(--muted);position:absolute;top:6px;left:10px;z-index:0}
/* Ad code paste hone ke baad placeholder hata sakte hain: .ad-slot:empty{display:none} */

/* ---------- HERO ---------- */
.hero{
    padding:72px 0 62px;position:relative;overflow:hidden;
    background:
        radial-gradient(900px 400px at 85% -10%,rgba(16,185,129,.18),transparent 60%),
        radial-gradient(700px 350px at -10% 20%,rgba(245,184,65,.14),transparent 60%),
        linear-gradient(180deg,var(--bg-alt),var(--bg));
}
html[data-theme="dark"] .hero{
    background:
        radial-gradient(900px 400px at 85% -10%,rgba(46,204,150,.14),transparent 60%),
        radial-gradient(700px 350px at -10% 20%,rgba(245,184,65,.08),transparent 60%),
        linear-gradient(180deg,#0d1730,var(--bg));
}
.hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(circle at 50% 40%,#000,transparent 78%)}
.hero::after{content:"";position:absolute;right:-140px;top:-160px;width:560px;height:560px;background:radial-gradient(circle,rgba(16,185,129,.13),transparent 66%);border-radius:50%;animation:blobMove 14s ease-in-out infinite alternate;pointer-events:none}
@keyframes blobMove{from{transform:translate(0,0) scale(1)}to{transform:translate(-40px,30px) scale(1.08)}}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:50px;align-items:center;position:relative;z-index:1}
.badge{display:inline-block;background:rgba(16,185,129,.12);color:var(--green-d);font-size:.85rem;font-weight:700;padding:7px 16px;border-radius:50px;border:1px solid rgba(16,185,129,.25);animation:floatY 4s ease-in-out infinite}
.hero-stats{display:flex;gap:34px;margin-top:34px;flex-wrap:wrap}
.h-stat strong{display:block;font-size:1.7rem;font-weight:800;background:linear-gradient(135deg,var(--green),var(--green-d));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--green)}
.h-stat span{font-size:.85rem;color:var(--body)}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

/* Search */
.search-box{display:flex;gap:10px;background:var(--card);border:1.5px solid var(--line);border-radius:50px;padding:6px 6px 6px 20px;max-width:530px;box-shadow:var(--shadow);transition:.25s}
.search-box:focus-within{border-color:var(--green);box-shadow:0 0 0 4px rgba(16,185,129,.12)}
.search-box input{flex:1;border:none;outline:none;background:none;font-size:.95rem;color:var(--ink);min-width:0}
.search-box .btn{padding:11px 22px}

/* Hero visual cards */
.hero-visual{position:relative;display:flex;flex-direction:column;align-items:flex-end;gap:16px}
.glass-card{background:var(--card);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-lg);padding:24px;transition:background .35s,border-color .35s,transform .3s}
.tip-card-hero{position:relative;z-index:2;max-width:380px;width:100%;overflow:hidden}
.tip-card-hero:hover{transform:translateY(-4px);border-color:rgba(16,185,129,.35)}
.tip-card-hero::before{content:"";position:absolute;top:0;left:0;width:5px;height:100%;background:linear-gradient(180deg,var(--green),var(--gold))}
.tip-tag{display:inline-block;background:rgba(16,185,129,.12);color:var(--green-d);font-size:.72rem;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;padding:5px 12px;border-radius:50px;margin-bottom:14px}
.tip-card-hero h3{font-size:1.35rem;margin-bottom:10px;transition:opacity .3s}
.tip-card-hero p{color:var(--body);font-size:.95rem;transition:opacity .3s}
@keyframes tipIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.tip-swap{animation:tipIn .5s ease}
.tip-foot{display:flex;justify-content:space-between;margin-top:18px;padding-top:14px;border-top:1px dashed var(--line);font-size:.8rem;color:var(--muted)}
.mini-row{display:flex;gap:14px;width:100%;max-width:380px}
.mini-card{flex:1;display:flex;gap:12px;align-items:center;padding:14px 18px;min-width:0;animation:floatY 5s ease-in-out infinite}
.mini-card-2{animation-delay:1.2s}
.mini-icon{width:42px;height:42px;flex-shrink:0;border-radius:12px;background:rgba(245,184,65,.16);display:grid;place-items:center;font-size:1.2rem}
.mini-icon.green{background:rgba(16,185,129,.14)}
.mini-card p{font-size:.75rem;color:var(--muted)}
.mini-card strong{font-size:.95rem;color:var(--heading)}

/* ---------- CATEGORY STRIP ---------- */
.trust{padding:42px 0;background:linear-gradient(180deg,var(--card),var(--bg-alt));border-top:1px solid var(--line);border-bottom:1px solid var(--line);transition:background .35s}
.trust-title{display:flex;align-items:center;justify-content:center;gap:16px;font-size:.8rem;font-weight:800;letter-spacing:3.5px;text-transform:uppercase;margin-bottom:24px;background:linear-gradient(90deg,#10b981,#3b82f6);-webkit-background-clip:text;background-clip:text;color:transparent}
.trust-title .trust-line{flex:0 0 70px;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,#10b981)}
.trust-title .trust-line:last-child{background:linear-gradient(90deg,#3b82f6,transparent)}
.trust-logos{display:flex;justify-content:center;gap:16px;flex-wrap:wrap}
.topic-pill{display:inline-flex;align-items:center;gap:10px;padding:11px 24px;border:1px solid var(--line);border-radius:50px;background:var(--card);font-weight:800;font-size:.82rem;letter-spacing:2px;color:var(--ink);box-shadow:0 6px 18px rgba(11,31,58,.06);cursor:default;transition:opacity .7s ease,transform .3s,box-shadow .3s,border-color .3s,color .3s}
.topic-pill i{display:block;width:9px;height:9px;border-radius:50%;background:rgba(var(--tc),1);box-shadow:0 0 2px rgba(var(--tc),.8);animation:dotGlow 2.6s ease-in-out infinite}
.topic-pill:hover{transform:translateY(-4px);border-color:rgba(var(--tc),.65);color:var(--heading);box-shadow:0 14px 28px rgba(11,31,58,.12),0 0 14px rgba(var(--tc),.18)}
.topic-pill:hover i{animation-play-state:paused;box-shadow:0 0 7px 2px rgba(var(--tc),.85)}
.trust.reveal .trust-title{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.trust.reveal.visible .trust-title{opacity:1;transform:none}
.trust.reveal .topic-pill{opacity:0}
.trust.reveal.visible .topic-pill{opacity:1}
.trust.reveal.visible .topic-pill:nth-child(1){transition-delay:.08s,0s,0s,0s,0s}
.trust.reveal.visible .topic-pill:nth-child(2){transition-delay:.18s,0s,0s,0s,0s}
.trust.reveal.visible .topic-pill:nth-child(3){transition-delay:.28s,0s,0s,0s,0s}
.trust.reveal.visible .topic-pill:nth-child(4){transition-delay:.38s,0s,0s,0s,0s}
.trust.reveal.visible .topic-pill:nth-child(5){transition-delay:.48s,0s,0s,0s,0s}
@keyframes dotGlow{0%,100%{box-shadow:0 0 1px rgba(var(--tc),.7);transform:scale(1)}50%{box-shadow:0 0 7px 2px rgba(var(--tc),.75);transform:scale(1.3)}}

/* ---------- FILTER CHIPS ---------- */
.filter-chips{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.chip{padding:9px 20px;border-radius:50px;border:1.5px solid var(--line);background:var(--card);color:var(--body);font-size:.9rem;font-weight:700;transition:.22s}
.chip:hover{border-color:var(--green);color:var(--green);transform:translateY(-2px)}
.chip.active{background:var(--navy);border-color:var(--navy);color:#fff}
html[data-theme="dark"] .chip.active{background:var(--green);border-color:var(--green);color:#06131f}
.filter-info{text-align:center;font-size:.85rem;color:var(--muted);margin-bottom:30px}
.no-results{text-align:center;color:var(--body);background:var(--bg-alt);border:1px dashed var(--line);border-radius:14px;padding:34px 20px;margin-top:10px}

/* ---------- GRID + GUIDE CARDS ---------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.blog-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:transform .3s,box-shadow .3s,border-color .3s,background .35s;display:flex;flex-direction:column}
.blog-card:hover{transform:translateY(-7px);box-shadow:var(--shadow-lg);border-color:transparent}
.blog-card.hidden{display:none}
.blog-thumb{height:130px;display:grid;place-items:center;position:relative;overflow:hidden}
.blog-thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.25) 50%,transparent 70%);transform:translateX(-100%);transition:.6s}
.blog-card:hover .blog-thumb::after{transform:translateX(100%)}
.blog-thumb span{background:rgba(255,255,255,.92);color:#0b1f3a;font-weight:800;font-size:.76rem;padding:6px 14px;border-radius:50px;letter-spacing:1px;text-transform:uppercase;position:absolute;left:14px;bottom:12px;z-index:1;transition:transform .25s}
.blog-card:hover .blog-thumb span{transform:translateY(-2px)}
.thumb-art{position:absolute;right:8px;top:50%;transform:translateY(-50%);height:106px;z-index:0;transition:transform .45s ease}
.blog-card:hover .thumb-art{transform:translateY(-50%) scale(1.07)}
@keyframes fw-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes fw-drop{0%{transform:translateY(0);opacity:0}20%{opacity:.8}100%{transform:translateY(16px);opacity:0}}
@keyframes fw-pulse{0%,100%{opacity:.8}50%{opacity:1}}
@keyframes fw-roll{to{transform:rotate(360deg)}}
.ic-coin{animation:fw-bob 2.6s ease-in-out infinite}
.ic-drop{animation:fw-drop 2.4s linear infinite}
.ic-pulse{animation:fw-pulse 2.2s ease-in-out infinite}
.ic-roll{transform-box:fill-box;transform-origin:center;animation:fw-roll 9s linear infinite}
.blog-card:hover .ic-donut{transform-box:fill-box;transform-origin:center;animation:fw-roll 8s linear infinite}
@media (prefers-reduced-motion: reduce){.thumb-art,.thumb-art *{animation:none !important}.topic-pill i{animation:none !important}.trust.reveal .trust-title,.trust.reveal .topic-pill{transition:none !important;opacity:1 !important;transform:none !important}}
.thumb-1{background:linear-gradient(135deg,#0b1f3a,#1d5fa8)}
.thumb-2{background:linear-gradient(135deg,#0d9668,#10b981 60%,#7ee2c0)}
.thumb-3{background:linear-gradient(135deg,#8a6112,#f5b841)}
.thumb-4{background:linear-gradient(135deg,#12294a,#3b82f6)}
.thumb-5{background:linear-gradient(135deg,#7f1d1d,#e5484d)}
.thumb-6{background:linear-gradient(135deg,#334155,#64748b)}
.thumb-7{background:radial-gradient(circle at 82% 18%,rgba(255,255,255,.25),transparent 42%),linear-gradient(135deg,#065f46,#10b981)}
.thumb-8{background:radial-gradient(circle at 82% 18%,rgba(255,255,255,.2),transparent 42%),linear-gradient(135deg,#0c4a6e,#0ea5e9)}
.thumb-9{background:radial-gradient(circle at 82% 18%,rgba(255,255,255,.2),transparent 42%),linear-gradient(135deg,#4c1d95,#8b5cf6)}
.thumb-10{background:radial-gradient(circle at 82% 18%,rgba(255,255,255,.2),transparent 42%),linear-gradient(135deg,#7c2d12,#f97316)}
.thumb-11{background:radial-gradient(circle at 82% 18%,rgba(255,255,255,.2),transparent 42%),linear-gradient(135deg,#164e63,#06b6d4)}
.thumb-12{background:radial-gradient(circle at 82% 18%,rgba(255,255,255,.22),transparent 42%),linear-gradient(135deg,#831843,#ec4899)}
.see-more{display:flex;justify-content:center;margin-top:36px}
.see-more .btn{padding:13px 32px;font-size:1rem}
.see-more .btn span{display:inline-block;transition:transform .25s}
.see-more .btn:hover span{transform:translateX(4px)}
.blog-body{padding:22px;display:flex;flex-direction:column;flex:1}
.blog-meta{font-size:.76rem;color:var(--muted);text-transform:uppercase;letter-spacing:1.2px;margin-bottom:8px;font-weight:700}
.blog-body h3{font-size:1.05rem;margin-bottom:10px}
.blog-body>p{color:var(--body);font-size:.92rem;margin-bottom:16px;flex:1}
.card-link{color:var(--green);font-weight:700;font-size:.92rem;transition:.2s;display:inline-flex;align-items:center;gap:6px}
.card-link:hover{gap:10px;color:var(--green-d)}

/* ---------- ARTICLE PAGE ---------- */
.breadcrumb{font-size:.85rem;color:var(--muted);padding-top:30px}
.breadcrumb a{color:var(--green);font-weight:600}
.breadcrumb a:hover{text-decoration:underline}
.article-header{padding:16px 0 6px;max-width:780px}
.article-header .eyebrow{margin-bottom:10px}
.article-meta{display:flex;gap:16px;flex-wrap:wrap;color:var(--muted);font-size:.85rem;margin-top:16px;font-weight:600}
.article-meta span{display:flex;align-items:center;gap:6px}
.article-body{max-width:780px;margin:0 auto;font-size:1.03rem;line-height:1.85;color:var(--body)}
.article-body h2{font-size:1.55rem;margin:40px 0 14px;scroll-margin-top:90px}
.article-body h3{font-size:1.13rem;margin:26px 0 10px}
.article-body p{margin-bottom:17px}
.article-body strong{color:var(--heading);font-weight:700}
.article-body a{color:var(--green);font-weight:600;text-decoration:underline}
.article-body ul,.article-body ol{margin:0 0 20px 24px}
.article-body ul li{list-style:disc;margin-bottom:9px;padding-left:4px}
.article-body ol li{list-style:decimal;margin-bottom:9px;padding-left:4px}
.article-body blockquote{border-left:4px solid var(--green);background:var(--bg-alt);padding:16px 20px;border-radius:0 12px 12px 0;margin:24px 0;font-style:italic}
.article-body table{width:100%;border-collapse:collapse;margin:22px 0;font-size:.93rem;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.article-body th{background:var(--navy);color:#fff;padding:12px 14px;text-align:left;font-weight:700}
.article-body td{padding:11px 14px;border-top:1px solid var(--line);background:var(--card)}
.article-body tr:nth-child(even) td{background:var(--bg-alt)}

.tip-box{background:linear-gradient(135deg,rgba(16,185,129,.1),rgba(245,184,65,.07));border-left:4px solid var(--green);border-radius:0 14px 14px 0;padding:18px 22px;margin:26px 0}
.tip-box strong{display:block;color:var(--heading);margin-bottom:6px;font-weight:800}
.tip-box p{margin:0;font-size:.96rem}
.warn-box{background:linear-gradient(135deg,rgba(245,184,65,.12),rgba(245,184,65,.05));border-left:4px solid var(--gold);border-radius:0 14px 14px 0;padding:18px 22px;margin:26px 0}
.warn-box strong{display:block;color:var(--heading);margin-bottom:6px}
.warn-box p{margin:0;font-size:.96rem}

.toc{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px 24px;margin:30px 0;box-shadow:var(--shadow)}
.toc h4{font-size:.8rem;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.toc a{display:block;padding:7px 0;color:var(--body);font-size:.94rem;font-weight:600;transition:.2s;border-bottom:1px dashed var(--line)}
.toc a:last-child{border-bottom:none}
.toc a:hover{color:var(--green);transform:translateX(5px)}
.toc a::before{content:"→ ";color:var(--green)}

.takeaways{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:28px;margin:36px 0;box-shadow:var(--shadow)}
.takeaways h3{margin-bottom:14px}
.takeaways ul li{list-style:none;display:flex;gap:10px;align-items:flex-start;padding:8px 0;color:var(--body);font-size:.96rem}
.takeaways ul li::before{content:"✓";flex:0 0 22px;height:22px;background:rgba(16,185,129,.14);color:var(--green-d);border-radius:50%;display:grid;place-items:center;font-size:.75rem;font-weight:800;margin-top:3px}

.article-cta{background:linear-gradient(135deg,var(--navy),#16406e 70%,#0d9668 160%);border-radius:20px;padding:34px;color:#fff;text-align:center;margin:44px 0 0}
.article-cta h3{color:#fff;margin-bottom:8px}
.article-cta p{color:#c9d7ec;font-size:.95rem;margin-bottom:18px}
.related{padding-top:10px}
.related h2{font-size:1.5rem;margin-bottom:24px}

/* ---------- CALCULATOR ---------- */
.calc-box{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:34px;box-shadow:var(--shadow);transition:background .35s}
.calc-tabs{display:flex;gap:10px;justify-content:center;margin-bottom:28px;flex-wrap:wrap}
.calc-tab{padding:11px 26px;border-radius:50px;border:1.5px solid var(--line);background:var(--bg-alt);color:var(--body);font-weight:700;font-size:.93rem;transition:.25s}
.calc-tab:hover{border-color:var(--green);color:var(--green)}
.calc-tab.active{background:var(--green);border-color:var(--green);color:#fff;box-shadow:0 8px 18px rgba(16,185,129,.3)}
.calc-grid{display:grid;grid-template-columns:1fr 1fr;gap:34px}
.mode-fields.hidden{display:none}
.field{margin-bottom:18px}
.field label{display:block;font-size:.85rem;font-weight:700;color:var(--heading);margin-bottom:7px}
.field input,.field textarea{width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:11px;background:var(--field-bg);transition:.2s;font-size:.98rem;color:var(--ink)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 4px rgba(16,185,129,.12)}
.field.invalid input,.field.invalid textarea{border-color:var(--red)}
.error{display:block;color:var(--red);font-size:.78rem;margin-top:5px;min-height:1em}
.field-row-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.calc-note{font-size:.76rem;color:var(--muted);text-align:center;margin-top:12px}
.calc-results{display:flex;flex-direction:column;gap:14px;justify-content:center}
.result-card{background:var(--bg-alt);border:1px solid var(--line);border-radius:14px;padding:18px 20px;transition:background .35s}
.result-card p{font-size:.78rem;color:var(--body);text-transform:uppercase;letter-spacing:1.2px;font-weight:700}
.result-card strong{font-size:1.5rem;color:var(--heading);font-weight:800}
.result-card strong.green{color:var(--green)}
.result-card.main{background:linear-gradient(135deg,var(--navy),#16406e);border:none}
.result-card.main p{color:#a9bad4}
.result-card.main strong{color:#fff;font-size:2rem;display:block;margin-top:4px}
.calc-bar{display:flex;height:36px;border-radius:10px;overflow:hidden;font-size:.72rem;font-weight:700}
.calc-bar>div{display:flex;align-items:center;justify-content:center;transition:width .6s cubic-bezier(.4,0,.2,1);min-width:0;white-space:nowrap;overflow:hidden}
.bar-invested{background:var(--navy);color:#fff}
.bar-gain{background:var(--green);color:#fff}
.year-table-wrap{margin-top:28px;max-height:260px;overflow:auto;border:1px solid var(--line);border-radius:14px}
.year-table{width:100%;border-collapse:collapse;font-size:.9rem}
.year-table th{position:sticky;top:0;background:var(--navy);color:#fff;padding:11px 14px;text-align:left;font-size:.82rem;letter-spacing:.5px}
.year-table td{padding:10px 14px;border-top:1px solid var(--line);color:var(--ink)}
.year-table tbody tr:nth-child(even){background:var(--bg-alt)}
.year-table tbody tr:hover{background:rgba(16,185,129,.07)}
.year-table td:last-child{font-weight:700;color:var(--green)}

/* ---------- MONEY FACTS ---------- */
.facts-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:34px;align-items:start}
.table-wrap{background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--shadow);transition:background .35s}
.data-table{width:100%;border-collapse:collapse;font-size:.95rem}
.data-table th{background:var(--navy);color:#fff;padding:15px 16px;text-align:left;font-size:.9rem}
.data-table th span{display:block;font-weight:400;font-size:.72rem;color:#a9bad4}
.data-table td{padding:13px 16px;border-top:1px solid var(--line);color:var(--ink)}
.data-table tbody tr:nth-child(even){background:var(--bg-alt)}
.data-table tbody tr:hover{background:rgba(16,185,129,.07)}
.data-table td:first-child{font-weight:800;color:var(--heading)}
.table-note{font-size:.76rem;color:var(--muted);padding:14px 16px;background:var(--bg-alt)}
.quick-tips{background:linear-gradient(160deg,var(--navy),var(--navy-2));border-radius:18px;padding:30px 26px;color:#c4d1e4}
.quick-tips h3{color:#fff;margin-bottom:16px}
.quick-tips .check-list li{border-color:rgba(255,255,255,.12);color:#dbe5f4}
.quick-tips .check-list li span{background:rgba(16,185,129,.22);color:#7ee2c0}

/* ---------- GLOSSARY ---------- */
.glossary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.gloss-item{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px;transition:.3s}
.gloss-item:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--green)}
.gloss-item strong{display:block;color:var(--heading);font-size:.98rem;margin-bottom:6px;font-weight:800}
.gloss-item p{font-size:.87rem;color:var(--body);line-height:1.55}

/* ---------- CHECK LIST ---------- */
.check-list li{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-bottom:1px dashed var(--line);color:var(--ink);font-size:.97rem}
.check-list li span{flex:0 0 24px;height:24px;background:rgba(16,185,129,.14);color:var(--green-d);border-radius:50%;display:grid;place-items:center;font-size:.8rem;font-weight:800}

/* ---------- FAQ ---------- */
.faq-list{display:flex;flex-direction:column;gap:14px}
.faq-item{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:.25s}
.faq-item.open{box-shadow:var(--shadow);border-color:rgba(16,185,129,.4)}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:14px;padding:18px 22px;font-size:1rem;font-weight:700;color:var(--heading);text-align:left}
.faq-toggle{flex:0 0 28px;height:28px;border-radius:50%;background:rgba(16,185,129,.12);color:var(--green-d);display:grid;place-items:center;font-size:1.15rem;transition:.3s}
.faq-item.open .faq-toggle{transform:rotate(45deg);background:var(--green);color:#fff}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease}
.faq-a p{padding:0 22px 20px;color:var(--body);font-size:.95rem}

/* ---------- CTA ---------- */
.cta-box{background:linear-gradient(135deg,var(--navy) 0%,#16406e 70%,#0d9668 160%);border-radius:24px;padding:52px 46px;color:#fff;display:flex;justify-content:space-between;align-items:center;gap:34px;flex-wrap:wrap;box-shadow:var(--shadow-lg);position:relative;overflow:hidden}
.cta-box::after{content:"";position:absolute;right:-60px;top:-60px;width:240px;height:240px;border-radius:50%;background:rgba(255,255,255,.06);animation:floatY 6s ease-in-out infinite}
.cta-box h2{color:#fff;max-width:520px;position:relative}
.cta-box p{color:#c9d7ec;margin-top:10px;max-width:520px;position:relative}
.cta-actions{display:flex;gap:14px;flex-wrap:wrap;position:relative}

/* ---------- CONTACT ---------- */
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:50px;align-items:start}
.contact-list{margin-top:26px;display:flex;flex-direction:column;gap:14px}
.contact-list li{display:flex;gap:12px;align-items:center;background:var(--card);border:1px solid var(--line);padding:13px 16px;border-radius:12px;font-size:.95rem;transition:.25s}
.contact-list li:hover{border-color:var(--green);transform:translateX(4px)}
.contact-list span{font-size:1.1rem}
.contact-list a{color:var(--green);font-weight:700}
.contact-list a:hover{text-decoration:underline}
.contact-form{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:32px;box-shadow:var(--shadow);transition:background .35s}
.form-success{display:none;background:rgba(16,185,129,.1);color:var(--green-d);border:1px solid rgba(16,185,129,.3);border-radius:11px;padding:12px 16px;font-size:.9rem;font-weight:600;margin-top:16px}
.form-success.show{display:block}
.form-note{font-size:.76rem;color:var(--muted);margin-top:10px;text-align:center}

/* ---------- PRIVACY ---------- */
.privacy{padding:56px 0;background:var(--bg-alt)}
.privacy h2{font-size:1.4rem;margin-bottom:18px}
.privacy p{color:var(--body);font-size:.89rem;margin-bottom:12px}
.privacy h3{font-size:1.02rem;margin:20px 0 8px}

/* ---------- FOOTER ---------- */
.footer{background:var(--navy);color:#c4d1e4;padding-top:60px}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;padding-bottom:44px}
.footer-brand p{font-size:.92rem;margin:16px 0 20px;color:#9fb1cb;max-width:290px}
.logo.light span{color:var(--green)}
.socials{display:flex;gap:10px}
.socials a{width:36px;height:36px;border-radius:9px;background:rgba(255,255,255,.08);display:grid;place-items:center;font-weight:700;color:#fff;transition:.25s;font-size:.9rem}
.socials a:hover{background:var(--green);transform:translateY(-3px)}
.footer-col h4{color:#fff;font-size:1rem;margin-bottom:18px;letter-spacing:.5px}
.footer-col a{display:block;font-size:.92rem;color:#9fb1cb;padding:6px 0;transition:.2s}
.footer-col a:hover{color:var(--green);transform:translateX(4px)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding:20px 0}
.footer-bottom .container{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.85rem;color:#8fa2be}
.footer-bottom a{color:#8fa2be}
.footer-bottom a:hover{color:var(--green)}
.footer-legal{display:flex;gap:20px}

/* ---------- BACK TO TOP ---------- */
.back-top{position:fixed;right:22px;bottom:80px;width:46px;height:46px;border-radius:50%;background:var(--navy);color:#fff;font-size:1.2rem;box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;transform:translateY(14px);transition:.3s;z-index:90}
.back-top.show{opacity:1;visibility:visible;transform:translateY(0)}
.back-top:hover{background:var(--green)}

/* ---------- COOKIE BAR ---------- */
.cookie-bar{position:fixed;left:16px;right:16px;bottom:16px;z-index:150;background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);padding:16px 20px;display:none;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;animation:slideUp .5s ease}
.cookie-bar.show{display:flex}
.cookie-bar p{font-size:.86rem;color:var(--body);max-width:640px}
.cookie-bar p a{color:var(--green);font-weight:700;text-decoration:underline}
.cookie-actions{display:flex;gap:10px}
.cookie-actions .btn{padding:9px 22px;font-size:.88rem}
.btn-accept{background:var(--green);color:#fff}
.btn-decline{border-color:var(--line);color:var(--body)}
@keyframes slideUp{from{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}

/* ---------- REVEAL ANIMATIONS ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}
.reveal.visible{opacity:1;transform:none}
.fade-in{animation:fadeIn .5s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* ---- LOOK POLISH: scrollbar + selection ---- */
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:var(--green)}
::selection{background:rgba(16,185,129,.25)}

@media (max-width:1024px){
    .glossary-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:960px){
    .hero-grid,.contact-grid,.calc-grid,.facts-grid{grid-template-columns:1fr}
    .grid-3{grid-template-columns:repeat(2,1fr)}
    .footer-grid{grid-template-columns:1fr 1fr}
    .hero-visual{margin-top:10px;align-items:center}
    .tip-card-hero,.mini-row{margin-left:auto;margin-right:auto}
    .nav{position:fixed;top:68px;right:0;width:min(320px,85vw);height:calc(100vh - 68px);background:var(--card);flex-direction:column;align-items:flex-start;gap:4px;padding:24px;border-left:1px solid var(--line);box-shadow:-10px 0 40px rgba(0,0,0,.15);transform:translateX(105%);transition:.35s;overflow-y:auto}
    .nav.open{transform:translateX(0)}
    .nav-link{width:100%;padding:13px 4px;border-bottom:1px solid var(--line)}
    .hamburger{display:flex}
    .article-body{font-size:1rem}
}
@media (max-width:640px){
    .section{padding:56px 0}
    .grid-3,.footer-grid,.field-row-2,.glossary-grid{grid-template-columns:1fr}
    .hero{padding:44px 0 40px}
    .hero-stats{gap:22px}
    .h-stat strong{font-size:1.4rem}
    .search-box{flex-direction:column;border-radius:16px;padding:14px}
    .search-box .btn{width:100%}
    .cta-box{padding:36px 26px;text-align:center}
    .cta-actions{justify-content:center}
    .contact-form,.calc-box{padding:24px 20px}
    .mini-row{flex-direction:column}
    .mini-card,.mini-card-2{animation:none}
    .hero-visual{min-height:auto}
    .back-top{right:14px;bottom:76px}
    .result-card.main strong{font-size:1.6rem}
    .data-table th,.data-table td{padding:10px;font-size:.83rem}
    .article-header h1{font-size:1.75rem}
    .article-body h2{font-size:1.3rem}
    .cookie-bar{padding:14px 16px}
    .cookie-actions{width:100%}
    .cookie-actions .btn{flex:1}
}

/* Free-site notice (homepage, below header) */
.free-note{max-width:780px;margin:16px auto 0;padding:0 20px;text-align:center;font-size:.95rem;line-height:1.6;color:var(--muted)}
.free-note strong{color:var(--ink);font-weight:700}

/* Wide tables: horizontal scroll on small screens (wrapper added by script.js) */
.table-scroll{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}