/* ============================================================
   AllInOne — shared stylesheet
   Light theme, brand green, fully responsive (mobile/tablet/desktop)
   ============================================================ */
:root{
  --green:#10b981; --green-dark:#059669; --green-darker:#046c4e;
  --teal:#14b8a6; --cyan:#06b6d4; --sky:#0ea5e9;
  --violet:#8b5cf6; --amber:#f59e0b; --pink:#ec4899;
  --brand-grad:linear-gradient(135deg,#10b981 0%,#06b6d4 100%);
  --brand-grad-soft:linear-gradient(135deg,rgba(16,185,129,.13),rgba(6,182,212,.13));
  --glow:0 10px 26px -8px rgba(16,185,129,.55),0 4px 12px -6px rgba(6,182,212,.35);
  --green-soft:#d7fbe8; --green-ring:rgba(16,185,129,.35);
  --ink:#152030; --muted:#5b6b82; --faint:#93a1b8;
  --bg:#f4faf7; --surface:#ffffff; --surface-2:#f2faf6;
  --border:#e2ece7; --border-soft:#edf4f0;
  --shadow:0 1px 2px rgba(16,24,40,.05),0 10px 28px -14px rgba(16,24,40,.14);
  --shadow-lg:0 2px 6px rgba(16,24,40,.06),0 22px 50px -18px rgba(16,24,40,.20);
  --radius:16px; --radius-sm:10px;
  --font:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --maxw:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:var(--green-dark);text-decoration:none}
a:hover{color:var(--green-darker)}
.container{max-width:var(--maxw);margin:0 auto;padding:0 20px}
::selection{background:var(--green);color:#fff}

/* ---------- announcement bar ---------- */
.announce{background:linear-gradient(90deg,var(--green-darker),var(--green));color:#fff;font-size:.85rem;text-align:center;padding:8px 16px}
.announce strong{font-weight:700}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:200;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.header-inner{display:flex;align-items:center;gap:14px;height:68px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.35rem;color:var(--ink);letter-spacing:-.02em;white-space:nowrap}
.brand:hover{color:var(--ink)}
.brand-mark{width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,var(--green),var(--green-dark));display:grid;place-items:center;color:#fff;font-size:1.25rem;flex:none}
.brand small{display:block;font-size:.62rem;font-weight:600;color:var(--muted);letter-spacing:.02em;line-height:1.2}
.main-nav{display:flex;align-items:center;gap:4px;margin-left:8px}
.main-nav a{padding:9px 13px;border-radius:10px;font-weight:600;font-size:.93rem;color:#374151;white-space:nowrap}
.main-nav a:hover{background:var(--green-soft);color:var(--green-darker)}
.nav-dropdown{position:relative}
.nav-dropdown>button{background:none;border:0;font:inherit;font-weight:600;font-size:.93rem;color:#374151;padding:9px 13px;border-radius:10px;cursor:pointer;display:flex;align-items:center;gap:6px;white-space:nowrap}
.nav-dropdown>button:hover{background:var(--green-soft);color:var(--green-darker)}
.dropdown-menu{position:absolute;top:calc(100% + 6px);left:0;min-width:240px;background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-lg);padding:8px;display:none}
.nav-dropdown.open .dropdown-menu{display:block}
.dropdown-menu a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;font-size:.9rem}
.dropdown-menu a span.ic{width:28px;height:28px;border-radius:8px;background:var(--green-soft);display:grid;place-items:center;font-size:.95rem;flex:none}
.header-actions{margin-left:auto;display:flex;align-items:center;gap:10px;flex:none}
.header-actions .btn{white-space:nowrap;flex:none}
.icon-btn{width:42px;height:42px;border-radius:12px;border:1px solid var(--border);background:#fff;display:grid;place-items:center;font-size:1.1rem;cursor:pointer;color:#374151}
.icon-btn:hover{border-color:var(--green);color:var(--green-dark)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-family:var(--font);border:0;cursor:pointer;border-radius:12px;padding:12px 22px;font-size:.95rem;transition:transform .08s ease,box-shadow .15s ease,background .15s ease}
.btn:active{transform:translateY(1px)}
.btn-primary{background:linear-gradient(135deg,var(--green),var(--green-dark));color:#fff;box-shadow:0 6px 16px -6px rgba(5,150,105,.5)}
.btn-primary:hover{background:linear-gradient(135deg,var(--green-dark),var(--green-darker));color:#fff}
.btn-secondary{background:#fff;border:1px solid var(--border);color:#374151}
.btn-secondary:hover{border-color:var(--green);color:var(--green-dark)}
.btn-sm{padding:9px 16px;font-size:.87rem;border-radius:10px}
.btn-block{width:100%}
.hamburger{display:none}
/* search overlay */
.search-overlay{position:fixed;inset:0;z-index:400;background:rgba(17,24,39,.5);backdrop-filter:blur(3px);display:none;padding:18px}
.search-overlay.open{display:block}
.search-panel{max-width:640px;margin:8vh auto 0;background:#fff;border-radius:20px;box-shadow:var(--shadow-lg);overflow:hidden;animation:pop .18s ease}
@keyframes pop{from{transform:translateY(10px) scale(.99);opacity:0}to{transform:none;opacity:1}}
.search-panel input{width:100%;border:0;outline:0;font:inherit;font-size:1.05rem;padding:20px 22px;border-bottom:1px solid var(--border)}
.search-results{max-height:52vh;overflow:auto;padding:8px}
.search-hit{display:flex;gap:12px;align-items:center;padding:11px 12px;border-radius:12px;color:var(--ink)}
.search-hit:hover{background:var(--green-soft)}
.search-hit .ic{width:36px;height:36px;border-radius:10px;background:var(--green-soft);display:grid;place-items:center;font-size:1.05rem;flex:none}
.search-hit b{font-size:.93rem;display:block}
.search-hit small{color:var(--muted);font-size:.78rem}
.search-empty{padding:26px;text-align:center;color:var(--muted);font-size:.92rem}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;background:linear-gradient(180deg,#eefcf4 0%,#f7fdf9 60%,var(--bg) 100%)}
.hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(5,150,105,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(5,150,105,.07) 1px,transparent 1px);background-size:34px 34px;mask-image:radial-gradient(ellipse 90% 80% at 50% 20%,#000 30%,transparent 75%)}
.hero-inner{position:relative;text-align:center;padding:72px 20px 56px;max-width:860px;margin:0 auto}
.pill-badge{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--border);border-radius:999px;padding:8px 16px;font-size:.83rem;font-weight:700;color:var(--green-darker);box-shadow:var(--shadow);margin-bottom:20px}
.pill-badge .dot{width:8px;height:8px;border-radius:50%;background:var(--green);animation:blink 1.8s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.35}}
.hero h1{font-size:clamp(2rem,5vw,3.3rem);line-height:1.12;letter-spacing:-.03em;margin-bottom:16px}
.hero h1 .hl{color:var(--green-dark)}
.hero p.sub{font-size:1.08rem;color:var(--muted);max-width:620px;margin:0 auto 28px}
.hero-search{display:flex;gap:10px;max-width:600px;margin:0 auto 22px;background:#fff;border:1px solid var(--border);border-radius:18px;padding:8px;box-shadow:var(--shadow-lg)}
.hero-search input{flex:1;border:0;outline:0;font:inherit;font-size:1rem;padding:10px 14px;background:transparent;min-width:0}
.hero-search .btn{border-radius:12px;white-space:nowrap}
.trust-row{display:flex;justify-content:center;gap:22px;flex-wrap:wrap;font-size:.88rem;color:var(--muted);font-weight:600}
.trust-row span{display:flex;align-items:center;gap:7px}
.trust-row .tick{color:var(--green);font-weight:800}
.chip-row{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:26px}
.chip{background:#fff;border:1px solid var(--border);border-radius:999px;padding:8px 16px;font-size:.85rem;font-weight:600;color:#374151}
.chip:hover{border-color:var(--green);color:var(--green-dark);transform:translateY(-1px)}

/* ---------- sections ---------- */
.section{padding:56px 0}
.section-head{text-align:center;max-width:680px;margin:0 auto 34px}
.eyebrow{display:inline-block;font-size:.75rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--green-dark);background:var(--green-soft);border-radius:999px;padding:6px 14px;margin-bottom:14px}
.section-head h2{font-size:clamp(1.5rem,3.4vw,2.1rem);letter-spacing:-.02em;margin-bottom:10px}
.section-head p{color:var(--muted)}

/* category cards */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.cat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow);transition:transform .15s ease,box-shadow .15s ease;display:block;color:var(--ink)}
.cat-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);color:var(--ink)}
.cat-card .ic{width:52px;height:52px;border-radius:14px;background:linear-gradient(135deg,var(--green-soft),#d9f7e8);display:grid;place-items:center;font-size:1.6rem;margin-bottom:14px}
.cat-card h3{font-size:1.08rem;margin-bottom:6px;letter-spacing:-.01em}
.cat-card p{font-size:.88rem;color:var(--muted);margin-bottom:12px;min-height:2.6em}
.cat-card .meta{display:flex;justify-content:space-between;align-items:center;font-size:.83rem;font-weight:700}
.cat-card .count{color:var(--muted);font-weight:600}
.cat-card .go{color:var(--green-dark)}

/* tool cards */
.tool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:18px}
.tool-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow);transition:transform .15s ease,box-shadow .15s ease;display:flex;flex-direction:column;gap:8px;color:var(--ink);position:relative}
.tool-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);color:var(--ink)}
.tool-card .top{display:flex;align-items:center;gap:12px}
.tool-card .ic{width:46px;height:46px;border-radius:13px;background:var(--green-soft);display:grid;place-items:center;font-size:1.35rem;flex:none}
.tool-card .cat{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--green-dark)}
.tool-card h3{font-size:1.02rem;letter-spacing:-.01em}
.tool-card p{font-size:.87rem;color:var(--muted);flex:1}
.tool-card .foot{display:flex;justify-content:space-between;align-items:center;margin-top:6px}
.stars{color:#f59e0b;font-size:.82rem;letter-spacing:1px}
.tool-card .launch{font-size:.85rem;font-weight:700;color:var(--green-dark)}
.fav-btn{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:10px;border:1px solid var(--border);background:#fff;cursor:pointer;font-size:1rem;display:grid;place-items:center;color:var(--faint)}
.fav-btn.saved{color:#ef4444;border-color:#fecaca;background:#fef2f2}

/* steps */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:18px;counter-reset:step}
.step{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:26px 22px;box-shadow:var(--shadow);position:relative}
.step::before{counter-increment:step;content:counter(step);position:absolute;top:-16px;left:20px;width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--green),var(--green-dark));color:#fff;font-weight:800;display:grid;place-items:center;font-size:.95rem;box-shadow:0 4px 10px -2px rgba(5,150,105,.5)}
.step h3{margin:8px 0 6px;font-size:1.02rem}
.step p{font-size:.88rem;color:var(--muted)}
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.feature{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}
.feature .ic{font-size:1.7rem;margin-bottom:10px}
.feature h3{font-size:1rem;margin-bottom:6px}
.feature p{font-size:.87rem;color:var(--muted)}

/* CTA banner */
.cta-banner{background:linear-gradient(120deg,var(--green-darker),var(--green) 65%,#10b981);border-radius:22px;color:#fff;padding:48px 32px;text-align:center;box-shadow:var(--shadow-lg);position:relative;overflow:hidden}
.cta-banner::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 85% 20%,rgba(255,255,255,.18),transparent 45%)}
.cta-banner h2{font-size:clamp(1.4rem,3vw,2rem);letter-spacing:-.02em;margin-bottom:10px;position:relative;z-index:1}
.cta-banner p{opacity:.92;margin-bottom:22px;position:relative;z-index:1}
.cta-banner .btn{position:relative;z-index:1;background:#fff;color:var(--green-darker)}
.cta-banner .btn:hover{background:#f0fdf4;color:var(--green-darker)}

/* FAQ */
.faq{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.faq-item{background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden}
.faq-q{width:100%;background:none;border:0;font:inherit;font-weight:700;font-size:.96rem;text-align:left;padding:18px 20px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;color:var(--ink)}
.faq-q .pm{flex:none;width:28px;height:28px;border-radius:50%;background:var(--green-soft);color:var(--green-dark);display:grid;place-items:center;font-weight:800;font-size:1.1rem}
.faq-a{max-height:0;overflow:hidden;transition:max-height .25s ease}
.faq-a p{padding:0 20px 18px;font-size:.9rem;color:var(--muted)}
.faq-item.open .faq-a{max-height:300px}

/* ---------- footer ---------- */
.site-footer{background:#0f172a;color:#cbd5e1;margin-top:64px}
.footer-grid{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:28px;padding:52px 0 36px}
.footer-brand .brand{color:#fff;margin-bottom:12px}
.footer-brand p{font-size:.88rem;color:#94a3b8;margin-bottom:16px;max-width:300px}
.footer-badges{display:flex;flex-wrap:wrap;gap:8px}
.footer-badges span{font-size:.75rem;font-weight:700;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:5px 12px;color:#e2e8f0}
.footer-col h4{color:#fff;font-size:.92rem;margin-bottom:14px;letter-spacing:.02em}
.footer-col a{display:block;font-size:.88rem;color:#94a3b8;padding:5px 0}
.footer-col a:hover{color:#fff}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding:20px 0;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;font-size:.82rem;color:#64748b}
.footer-bottom .legal{display:flex;gap:18px;flex-wrap:wrap}
.footer-bottom a{color:#94a3b8}
.footer-bottom a:hover{color:#fff}

/* ---------- breadcrumbs / page head ---------- */
.breadcrumb{display:flex;align-items:center;gap:8px;font-size:.85rem;color:var(--muted);padding:22px 0 6px;flex-wrap:wrap}
.breadcrumb a{color:var(--muted)}
.breadcrumb a:hover{color:var(--green-dark)}
.breadcrumb .sep{color:var(--faint)}
.page-head{padding:6px 0 26px}
.page-head h1{font-size:clamp(1.7rem,4vw,2.5rem);letter-spacing:-.025em;margin-bottom:10px}
.page-head h1 .dot{color:var(--green)}
.page-head p{color:var(--muted);max-width:720px}
.stat-badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.stat-badges span{font-size:.8rem;font-weight:700;background:var(--green-soft);color:var(--green-darker);border-radius:999px;padding:6px 14px}

/* ---------- all-tools page ---------- */
.tools-toolbar{position:sticky;top:68px;z-index:100;background:rgba(247,248,249,.94);backdrop-filter:blur(8px);padding:16px 0;border-bottom:1px solid var(--border);margin-bottom:26px}
.toolbar-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.search-input{flex:1;min-width:220px;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--border);border-radius:12px;padding:0 14px}
.search-input input{flex:1;border:0;outline:0;font:inherit;font-size:.95rem;padding:12px 0;background:transparent;min-width:0}
.search-input:focus-within{border-color:var(--green);box-shadow:0 0 0 3px var(--green-ring)}
.filter-chips{display:flex;gap:8px;overflow-x:auto;padding:4px 2px;scrollbar-width:thin}
.fchip{flex:none;border:1px solid var(--border);background:#fff;border-radius:999px;padding:8px 16px;font:inherit;font-size:.85rem;font-weight:600;color:#4b5563;cursor:pointer;white-space:nowrap}
.fchip:hover{border-color:var(--green);color:var(--green-dark)}
.fchip.active{background:var(--green-dark);border-color:var(--green-dark);color:#fff}
.result-count{font-size:.85rem;color:var(--muted);font-weight:600}
.cat-section{margin-bottom:44px}
.cat-section>h2{font-size:1.35rem;letter-spacing:-.01em;margin-bottom:4px;display:flex;align-items:center;gap:10px}
.cat-section>h2 .n{font-size:.78rem;font-weight:700;background:var(--green-soft);color:var(--green-darker);border-radius:999px;padding:3px 12px}
.cat-section>.desc{font-size:.88rem;color:var(--muted);margin-bottom:16px}

/* ---------- tool page ---------- */
.tool-hero{background:#fff;border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow);padding:30px;margin-bottom:24px}
.tool-hero-top{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.tool-actions{display:flex;gap:8px}
.status-badge{display:inline-flex;align-items:center;gap:7px;font-size:.75rem;font-weight:800;letter-spacing:.06em;color:var(--green-darker);background:var(--green-soft);border-radius:999px;padding:6px 14px;margin-bottom:10px}
.status-badge .dot{width:8px;height:8px;border-radius:50%;background:var(--green);animation:blink 1.8s infinite}
.tool-hero h1{font-size:clamp(1.6rem,4vw,2.3rem);letter-spacing:-.02em;margin-bottom:8px}
.tool-hero .lede{color:var(--muted);font-size:1rem;max-width:700px}
.tool-hero .updated{font-size:.8rem;color:var(--faint);margin-top:10px}
.widget-wrap{background:#fff;border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow);padding:30px;margin-bottom:24px;scroll-margin-top:90px}
.widget-wrap h2{font-size:1.15rem;margin-bottom:18px;letter-spacing:-.01em}
.rate-block{background:#fff;border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow);padding:26px;margin-bottom:24px;display:flex;gap:26px;align-items:center;flex-wrap:wrap}
.rate-score{font-size:2.6rem;font-weight:800;letter-spacing:-.02em}
.rate-score small{font-size:1rem;color:var(--muted);font-weight:600}
.rate-meta{font-size:.85rem;color:var(--muted)}
.star-input{display:flex;gap:6px;font-size:1.7rem;cursor:pointer}
.star-input span{color:#e5e7eb;transition:color .1s}
.star-input span.lit,.star-input span:hover,.star-input span:hover~span{color:#f59e0b}
.star-input:hover span{color:#f59e0b}
.star-input span:hover~span{color:#e5e7eb}
.rate-note{font-size:.82rem;color:var(--muted);width:100%}
.content-card{background:#fff;border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow);padding:30px;margin-bottom:24px}
.content-card h2{font-size:1.25rem;margin:0 0 12px;letter-spacing:-.01em}
.content-card h2:not(:first-child){margin-top:26px}
.content-card p,.content-card li{font-size:.93rem;color:#4b5563}
.content-card ul,.content-card ol{padding-left:22px;margin:8px 0}
.content-card li{margin-bottom:6px}
.related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.share-menu{position:relative}
.share-pop{position:absolute;right:0;top:calc(100% + 8px);background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-lg);padding:8px;min-width:220px;display:none;z-index:50}
.share-menu.open .share-pop{display:block}
.share-pop a,.share-pop button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:10px 12px;border-radius:10px;font:inherit;font-size:.88rem;font-weight:600;color:#374151;background:none;border:0;cursor:pointer}
.share-pop a:hover,.share-pop button:hover{background:var(--green-soft)}

/* ---------- widget form primitives ---------- */
.f-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:16px}
.f-field{display:flex;flex-direction:column;gap:7px}
.f-field label{font-size:.83rem;font-weight:700;color:#374151}
.f-field input[type=text],.f-field input[type=number],.f-field input[type=date],.f-field input[type=time],.f-field select,.f-field textarea{font:inherit;font-size:.95rem;padding:12px 14px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface-2);color:var(--ink);width:100%;outline:0;transition:border .12s,box-shadow .12s,background .12s}
.f-field textarea{min-height:130px;resize:vertical;font-family:var(--mono);font-size:.85rem;line-height:1.55}
.f-field input:focus,.f-field select:focus,.f-field textarea:focus{border-color:var(--green);background:#fff;box-shadow:0 0 0 3px var(--green-ring)}
.f-field input[type=checkbox],.f-field input[type=radio]{width:18px;height:18px;accent-color:var(--green-dark)}
.check-row{display:flex;align-items:center;gap:9px;font-size:.9rem;font-weight:600;color:#374151;padding:6px 0}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0}
.result-panel{background:var(--green-soft);border:1px solid #a7f3d0;border-radius:var(--radius);padding:22px;margin-top:18px;display:none}
.result-panel.show{display:block;animation:pop .2s ease}
.result-panel h3{font-size:.95rem;color:var(--green-darker);margin-bottom:12px;letter-spacing:.02em}
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
.kpi{background:#fff;border:1px solid var(--border);border-radius:12px;padding:14px;text-align:center}
.kpi .v{font-family:var(--mono);font-size:1.35rem;font-weight:700;color:var(--green-darker);word-break:break-word}
.kpi .l{font-size:.75rem;color:var(--muted);font-weight:600;margin-top:4px}
.big-result{font-family:var(--mono);font-size:clamp(1.6rem,5vw,2.6rem);font-weight:700;color:var(--green-darker);text-align:center;letter-spacing:-.02em;margin-bottom:14px;word-break:break-word}
.mono-out{font-family:var(--mono);font-size:.85rem;background:#0f172a;color:#e2e8f0;border-radius:12px;padding:16px;overflow:auto;max-height:320px;white-space:pre-wrap;word-break:break-word;line-height:1.6}
.copy-row{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.hint{font-size:.82rem;color:var(--muted)}
.error-msg{display:none;background:#fef2f2;border:1px solid #fecaca;color:#b91c1c;border-radius:var(--radius-sm);padding:12px 16px;font-size:.88rem;font-weight:600;margin-top:14px}
.error-msg.show{display:block}
input[type=range]{width:100%;accent-color:var(--green-dark)}
.range-val{font-family:var(--mono);font-weight:700;color:var(--green-darker)}
textarea.code{font-family:var(--mono)}
.qr-box{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.qr-box img{border:1px solid var(--border);border-radius:12px;background:#fff;padding:8px}
.swatch{width:100%;height:64px;border-radius:12px;border:1px solid var(--border);margin-bottom:10px}
.progress{height:10px;background:var(--border-soft);border-radius:999px;overflow:hidden;margin:10px 0}
.progress i{display:block;height:100%;background:linear-gradient(90deg,var(--green),#10b981);border-radius:999px;transition:width .3s}
.file-drop{border:2px dashed var(--border);border-radius:var(--radius);padding:28px;text-align:center;background:var(--surface-2);cursor:pointer;transition:border .15s,background .15s}
.file-drop:hover,.file-drop.drag{border-color:var(--green);background:var(--green-soft)}
.file-drop input{display:none}
.file-drop p{font-size:.9rem;color:var(--muted)}
.preview-img{max-width:220px;border-radius:12px;border:1px solid var(--border);margin-top:12px}

/* ---------- responsive ---------- */
@media(max-width:1320px){
  .main-nav{gap:2px;margin-left:4px}
  .main-nav a{padding:8px 10px;font-size:.87rem}
  .nav-dropdown>button{padding:8px 10px;font-size:.87rem}
  .brand{font-size:1.18rem}
  .header-actions{gap:8px}
  .icon-btn{width:38px;height:38px}
}
@media(max-width:1150px){
  .main-nav{display:none}
  .hamburger{display:grid}
}
@media(max-width:1020px){
  .main-nav{display:none}
  .hamburger{display:grid}
  .footer-grid{grid-template-columns:1fr 1fr}
  .mobile-nav{position:fixed;inset:0;z-index:400;display:none}
  .mobile-nav.open{display:block}
  .mobile-nav .scrim{position:absolute;inset:0;background:rgba(17,24,39,.5)}
  .mobile-nav .panel{position:absolute;top:0;right:0;bottom:0;width:min(340px,86vw);background:#fff;padding:22px;overflow:auto;box-shadow:var(--shadow-lg);animation:slidein .2s ease}
  @keyframes slidein{from{transform:translateX(30px);opacity:0}to{transform:none;opacity:1}}
  .mobile-nav .panel a.mlink{display:flex;align-items:center;gap:10px;padding:12px;border-radius:12px;font-weight:700;color:var(--ink)}
  .mobile-nav .panel a.mlink:hover{background:var(--green-soft)}
  .mobile-nav .panel .mhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
}
@media(min-width:1021px){.mobile-nav{display:none!important}}
@media(max-width:640px){
  .header-inner{height:60px;gap:10px}
  .brand{font-size:1.15rem}
  .brand small{display:none}
  .header-actions .btn-primary span.lbl{display:none}
  .header-actions .btn-primary span.mob{display:inline!important}
  .header-actions .btn-primary{padding:11px 15px}
  .hero-inner{padding:52px 20px 40px}
  .hero-search{flex-direction:column;border-radius:16px}
  .hero-search .btn{width:100%}
  .section{padding:40px 0}
  .widget-wrap,.tool-hero,.content-card,.rate-block{padding:20px;border-radius:16px}
  .tools-toolbar{top:60px}
  .footer-grid{grid-template-columns:1fr;gap:24px}
  .cta-banner{padding:36px 22px}
  .f-grid{grid-template-columns:1fr}
  .kpi-grid{grid-template-columns:repeat(2,1fr)}
}

/* ============================================================
   ============================================================ */

/* ---------- collections ---------- */
.col-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.col-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow);transition:transform .15s ease,box-shadow .15s ease;display:block;color:var(--ink);position:relative;overflow:hidden}
.col-card::after{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--green),#34d399);opacity:0;transition:opacity .15s ease}
.col-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);color:var(--ink)}
.col-card:hover::after{opacity:1}
.col-card .ic{width:56px;height:56px;border-radius:16px;background:linear-gradient(135deg,var(--green-soft),#d9f7e8);display:grid;place-items:center;font-size:1.7rem;margin-bottom:14px}
.col-card h3{font-size:1.12rem;margin-bottom:4px;letter-spacing:-.01em}
.col-card .tag{font-size:.88rem;color:var(--muted);margin-bottom:14px}
.col-card .meta{display:flex;justify-content:space-between;align-items:center;font-size:.83rem;font-weight:700}
.col-card .count{color:var(--muted);font-weight:600}
.col-card .go{color:var(--green-dark)}
.col-hero-ic{width:76px;height:76px;border-radius:22px;background:linear-gradient(135deg,var(--green-soft),#d9f7e8);display:grid;place-items:center;font-size:2.4rem;margin:0 auto 18px}
.col-more{margin:48px 0 8px}
.col-more h3{font-size:1.25rem;margin-bottom:18px;letter-spacing:-.01em}

/* ---------- richer hero: split layout + live demo ---------- */
.hero-split{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center;max-width:1180px;text-align:left}
.hero-copy .hero-search{margin:0 0 16px}
.hero-copy .trust-row{justify-content:flex-start}
.trend-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 18px;font-size:.85rem}
.trend-label{color:var(--muted);font-weight:700}
.trend-pill{background:#fff;border:1px solid var(--border);border-radius:999px;padding:6px 14px;font-size:.82rem;font-weight:600;color:#374151;cursor:pointer;font-family:var(--font)}
.trend-pill:hover{border-color:var(--green);color:var(--green-dark);transform:translateY(-1px)}
.demo-card{background:#fff;border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow-lg);padding:22px;position:relative;overflow:hidden}
.demo-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--green),#34d399)}
.demo-head{display:flex;align-items:center;gap:8px;font-size:.82rem;font-weight:700;color:var(--muted);margin-bottom:12px}
.demo-head a{margin-left:auto;color:var(--green-dark);font-size:.8rem;white-space:nowrap}
.demo-dot{width:10px;height:10px;border-radius:50%;background:#22c55e;animation:blink 1.8s infinite;flex:none}
.demo-card textarea{width:100%;border:1px solid var(--border);border-radius:12px;padding:12px;font:inherit;font-size:.9rem;resize:vertical;min-height:96px;background:var(--surface-2);color:var(--ink)}
.demo-card textarea:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px var(--green-ring)}
.demo-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.demo-stats div{background:var(--green-soft);border-radius:12px;padding:10px 6px;text-align:center}
.demo-stats b{display:block;font-size:1.3rem;color:var(--green-darker);line-height:1.2}
.demo-stats span{font-size:.72rem;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.06em}
@media(max-width:920px){
  .hero-split{grid-template-columns:1fr;text-align:center;gap:32px}
  .hero-copy .hero-search{margin:0 auto 16px}
  .hero-copy .trust-row{justify-content:center}
  .trend-row{justify-content:center}
  .hero-demo{max-width:520px;margin:0 auto;width:100%}
}

/* ---------- bento category grid (distinctive layout) ---------- */
@media(min-width:720px){
  .cat-grid{grid-template-columns:repeat(4,1fr)}
  .cat-grid .cat-card:nth-child(1),.cat-grid .cat-card:nth-child(8){grid-column:span 2}
  .cat-grid .cat-card:nth-child(1) p,.cat-grid .cat-card:nth-child(8) p{min-height:0}
}
@media(max-width:719px){
  .cat-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .cat-grid .cat-card{padding:18px}
  .cat-grid .cat-card p{display:none}
  .cat-grid .cat-card .ic{width:42px;height:42px;font-size:1.3rem;margin-bottom:10px}
  .cat-grid .cat-card h3{font-size:.95rem}
}

/* ---------- before/after comparison slider ---------- */
.ba-wrap{margin-top:14px}
.ba-slider{position:relative;border-radius:14px;overflow:hidden;--x:50%;cursor:ew-resize;touch-action:pan-y;background:var(--surface-2);border:1px solid var(--border)}
.ba-slider .ba-after{display:block;width:100%;height:auto}
.ba-before{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--x)) 0 0)}
.ba-before img{position:absolute;inset:0;width:100%;height:100%}
.ba-line{position:absolute;top:0;bottom:0;left:var(--x);width:3px;background:#fff;transform:translateX(-50%);box-shadow:0 0 10px rgba(0,0,0,.45);pointer-events:none}
.ba-grip{position:absolute;top:50%;left:var(--x);transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;background:#fff;display:grid;place-items:center;font-size:1rem;color:#111;box-shadow:0 2px 12px rgba(0,0,0,.4);pointer-events:none;font-weight:800}
.ba-tag{position:absolute;top:10px;font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;background:rgba(0,0,0,.55);color:#fff;padding:4px 10px;border-radius:999px;pointer-events:none}
.ba-tag.left{left:10px}
.ba-tag.right{right:10px}
.ba-range{width:100%;margin-top:10px;accent-color:var(--green)}

/* ---------- legal / info pages ---------- */
.legal-doc{max-width:820px;margin:0 auto;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:40px 44px;margin-bottom:56px}
.legal-doc .lead{font-size:1.06rem;color:var(--ink);background:var(--green-soft);border-radius:12px;padding:18px 20px;margin-bottom:8px}
.legal-doc h2{font-size:1.25rem;margin:30px 0 10px;letter-spacing:-.01em}
.legal-doc h2:first-of-type{margin-top:18px}
.legal-doc p{color:var(--muted);margin-bottom:12px}
.legal-doc .lead,.legal-doc li{color:var(--ink)}
.legal-doc p,.legal-doc li{line-height:1.7}
.legal-doc ul{margin:0 0 12px 22px;color:var(--muted)}
.legal-doc li{margin-bottom:6px}
.legal-doc a{color:var(--green-dark);font-weight:600}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:24px 0 8px}
.contact-card{background:var(--surface-2);border:1px solid var(--border);border-radius:14px;padding:22px}
.contact-card .ic{font-size:1.8rem;margin-bottom:8px}
.contact-card h3{font-size:1.05rem;margin-bottom:6px}
.contact-card p{margin-bottom:6px}
@media(max-width:640px){.legal-doc{padding:26px 22px}.contact-grid{grid-template-columns:1fr}}

/* ---------- highlighted PDF nav link ---------- */
.main-nav a.nav-pdf{background:var(--green-soft);color:var(--green-darker);border-radius:999px;padding:8px 15px;margin-left:2px}
.main-nav a.nav-pdf:hover{background:var(--green);color:#fff}

/* ============================================================
   MODERN REDESIGN LAYER — aurora gradients, glass, glow
   (appended last so it wins the cascade; base code untouched)
   ============================================================ */
:root{
  --grad:linear-gradient(135deg,#10b981 0%,#06b6d4 100%);
  --grad-soft:linear-gradient(135deg,rgba(16,185,129,.14),rgba(6,182,212,.14));
  --glow:0 10px 30px -10px rgba(16,185,129,.65);
  --ink:#0a1424;
  --bg:#f2f7f5;
  --radius:20px;
  --shadow:0 1px 2px rgba(10,20,36,.05),0 14px 34px -18px rgba(10,20,36,.16);
  --shadow-lg:0 2px 6px rgba(10,20,36,.06),0 28px 64px -22px rgba(10,20,36,.24);
}
body{
  background:
    radial-gradient(1000px 520px at 8% -6%,rgba(16,185,129,.13),transparent 62%),
    radial-gradient(860px 460px at 94% 4%,rgba(6,182,212,.12),transparent 62%),
    radial-gradient(760px 520px at 50% 112%,rgba(16,185,129,.07),transparent 62%),
    var(--bg);
  background-attachment:fixed;
}
/* ---------- header : frosted glass ---------- */
.site-header{background:rgba(255,255,255,.68);backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);border-bottom:1px solid rgba(16,185,129,.16)}
.brand-mark{background:var(--grad);box-shadow:var(--glow);border-radius:13px}
.main-nav a{border-radius:12px;position:relative}
.main-nav a:hover{background:rgba(16,185,129,.1)}
.main-nav a.nav-pdf{background:var(--grad-soft);border:1px solid rgba(16,185,129,.3);color:#047857;border-radius:999px}
.main-nav a.nav-pdf:hover{background:var(--grad);color:#fff;border-color:transparent;box-shadow:var(--glow)}
.icon-btn{background:rgba(255,255,255,.8);backdrop-filter:blur(8px);border:1px solid rgba(16,185,129,.18)}
.icon-btn:hover{box-shadow:var(--glow)}
/* ---------- announcement : animated sheen ---------- */
.announce{background:linear-gradient(90deg,#065f46,#059669,#06b6d4,#065f46);background-size:220% 100%;font-weight:600}
@keyframes sheen{to{background-position:220% 0}}
/* ---------- hero : aurora ---------- */
.hero{background:transparent;overflow:hidden}
.hero::before{background-image:linear-gradient(rgba(5,150,105,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(5,150,105,.06) 1px,transparent 1px);background-size:38px 38px;mask-image:radial-gradient(ellipse 85% 75% at 50% 18%,#000 25%,transparent 78%);opacity:.7}
.aurora{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.aurora i{position:absolute;border-radius:50%;filter:blur(100px);opacity:.55;animation:drift 16s ease-in-out infinite alternate}
.aurora .a1{width:520px;height:520px;left:-140px;top:-180px;background:#6ee7b7}
.aurora .a2{width:440px;height:440px;right:-110px;top:-60px;background:#67e8f9;animation-delay:-6s}
.aurora .a3{width:400px;height:400px;left:36%;bottom:-240px;background:#a7f3d0;animation-delay:-11s}
@keyframes drift{from{transform:translate(0,0) scale(1)}to{transform:translate(70px,44px) scale(1.14)}}
.hero h1{font-size:clamp(2.5rem,5.8vw,4.1rem);letter-spacing:-.045em;font-weight:800;line-height:1.05}
.hero h1 .hl{background:linear-gradient(115deg,#059669 10%,#06b6d4 90%);-webkit-background-clip:text;background-clip:text;color:transparent}
.pill-badge{background:rgba(255,255,255,.75);backdrop-filter:blur(10px);border:1px solid rgba(16,185,129,.28);box-shadow:var(--shadow);padding:9px 18px}
.hero-search{background:rgba(255,255,255,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.95);box-shadow:var(--shadow-lg);border-radius:22px}
.hero-search .btn{border-radius:14px}
.trend-pill{background:rgba(255,255,255,.75);backdrop-filter:blur(8px);border:1px solid rgba(16,185,129,.2)}
.trend-pill:hover{box-shadow:var(--glow);transform:translateY(-2px)}
.chip{background:rgba(255,255,255,.75);backdrop-filter:blur(8px);border:1px solid rgba(16,185,129,.16)}
.chip:hover{box-shadow:var(--glow)}
/* ---------- buttons ---------- */
.btn{border-radius:14px;letter-spacing:-.01em}
.btn-primary{background:linear-gradient(135deg,#10b981,#06b6d4);box-shadow:0 12px 28px -10px rgba(16,185,129,.7)}
.btn-primary:hover{background:linear-gradient(135deg,#0da271,#0899b8);color:#fff;transform:translateY(-2px);box-shadow:0 18px 36px -10px rgba(16,185,129,.8)}
.btn-secondary{background:rgba(255,255,255,.8);backdrop-filter:blur(8px);border:1px solid rgba(16,185,129,.22)}
.btn-secondary:hover{box-shadow:var(--glow)}
/* ---------- sections ---------- */
.eyebrow{background:var(--grad-soft);border:1px solid rgba(16,185,129,.3);color:#047857;letter-spacing:.14em}
.section-head h2{letter-spacing:-.032em;font-weight:800;font-size:clamp(1.65rem,3.6vw,2.35rem)}
/* ---------- cards : glass + glow ---------- */
.cat-card,.tool-card,.col-card{background:rgba(255,255,255,.78);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(16,185,129,.13);border-radius:var(--radius)}
.cat-card:hover,.tool-card:hover,.col-card:hover{transform:translateY(-6px);box-shadow:0 26px 54px -22px rgba(16,185,129,.5);border-color:rgba(16,185,129,.38)}
.cat-card .ic,.col-card .ic{background:linear-gradient(135deg,#d1fae5,#cffafe);box-shadow:inset 0 0 0 1px rgba(255,255,255,.8),0 6px 14px -8px rgba(16,185,129,.6)}
.tool-card .ic{background:linear-gradient(135deg,#d1fae5,#cffafe);box-shadow:inset 0 0 0 1px rgba(255,255,255,.8)}
.tool-card .cat{background:linear-gradient(115deg,#059669,#06b6d4);-webkit-background-clip:text;background-clip:text;color:transparent}
.col-card::after{background:var(--grad)}
.demo-card{background:rgba(255,255,255,.8);backdrop-filter:blur(16px);border:1px solid rgba(16,185,129,.2);box-shadow:var(--shadow-lg)}
.demo-card::before{background:var(--grad)}
.demo-stats div{background:var(--grad-soft);border:1px solid rgba(16,185,129,.18)}
.demo-stats b{background:linear-gradient(115deg,#059669,#06b6d4);-webkit-background-clip:text;background-clip:text;color:transparent}
/* ---------- footer : premium dark ---------- */
.site-footer{background:linear-gradient(180deg,#07120e 0%,#0a2018 100%);color:#a9bfb6;border-top:1px solid rgba(16,185,129,.22);position:relative;overflow:hidden}
.site-footer::before{content:"";position:absolute;inset:0;background:radial-gradient(700px 280px at 20% 0%,rgba(16,185,129,.14),transparent 65%),radial-gradient(600px 260px at 85% 20%,rgba(6,182,212,.1),transparent 65%);pointer-events:none}
.site-footer .container{position:relative}
.footer-col h4{color:#fff}
.footer-col a{color:#a9bfb6}
.footer-col a:hover{color:#6ee7b7}
.footer-bottom{color:#7d938a;border-top:1px solid rgba(255,255,255,.08)}
.footer-bottom a{color:#a9bfb6}
.footer-brand p{color:#a9bfb6}
.footer-badges span{background:rgba(16,185,129,.12);border:1px solid rgba(16,185,129,.25);color:#a7f3d0}
/* ---------- cta banner ---------- */
.cta-banner{background:linear-gradient(120deg,#059669,#06b6d4);position:relative;overflow:hidden;border:0;box-shadow:0 30px 60px -24px rgba(6,182,212,.55)}
.cta-banner::before{content:"";position:absolute;inset:0;background:radial-gradient(500px 260px at 15% 20%,rgba(255,255,255,.22),transparent 60%),radial-gradient(420px 240px at 88% 85%,rgba(255,255,255,.14),transparent 60%)}
.cta-banner>*{position:relative}
.cta-banner .btn{background:#fff;color:#047857}
.cta-banner .btn:hover{color:#047857;transform:translateY(-2px)}
/* ---------- misc modern touches ---------- */
.search-panel{border:1px solid rgba(16,185,129,.2);box-shadow:0 30px 70px -20px rgba(10,20,36,.35)}
.search-hit:hover{background:rgba(16,185,129,.08)}
.fchip.active{background:var(--grad);border-color:transparent;box-shadow:var(--glow)}
.stat-badges span{background:var(--grad-soft);border:1px solid rgba(16,185,129,.25)}
.ba-grip{box-shadow:0 4px 16px rgba(0,0,0,.4),0 0 0 6px rgba(16,185,129,.25)}
.legal-doc{border:1px solid rgba(16,185,129,.14);box-shadow:var(--shadow-lg)}
.page-head h1{letter-spacing:-.035em;font-weight:800}
.tool-hero{background:rgba(255,255,255,.78);backdrop-filter:blur(10px);border:1px solid rgba(16,185,129,.14)}
.widget-wrap{background:rgba(255,255,255,.82);backdrop-filter:blur(10px);border:1px solid rgba(16,185,129,.14)}
.content-card{background:rgba(255,255,255,.78);backdrop-filter:blur(10px);border:1px solid rgba(16,185,129,.14)}
/* ---------- scroll reveal ---------- */
.reveal{opacity:0;transform:translateY(28px)}
.tool-card.reveal,.cat-card.reveal,.col-card.reveal{transition:opacity .65s ease,transform .65s cubic-bezier(.16,1,.3,1),box-shadow .15s ease,border-color .15s ease}
.reveal.in{opacity:1;transform:none}
.tool-card.reveal.in,.cat-card.reveal.in,.col-card.reveal.in{transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1!important;transform:none!important;transition:none!important}.aurora i{animation:none}}


/* ---------- hero mascot : 3D character ---------- */
.hero-demo{position:relative}
.hero-mascot{position:absolute;top:-168px;right:-6px;width:224px;z-index:6;pointer-events:none;filter:drop-shadow(0 18px 24px rgba(10,20,36,.22))}
.hero-mascot img{display:block;width:100%;height:auto;transform-origin:50% 88%;animation:mascotLife 4.6s ease-in-out infinite}
@keyframes mascotLife{
  0%,100%{transform:translateY(0) rotate(-1.4deg) scale(1)}
  28%{transform:translateY(-9px) rotate(1.4deg) scale(1.012)}
  52%{transform:translateY(-3px) rotate(-.7deg) scale(.996)}
  68%{transform:translateY(-8px) rotate(.9deg) scale(1.006)}
  84%{transform:translateY(-2px) rotate(-.4deg) scale(1)}
}
@media(max-width:920px){.hero-demo{margin-top:120px}.hero-mascot{width:172px;top:-136px;right:0}}
@media(prefers-reduced-motion:reduce){.hero-mascot img{animation:none}}

/* ---------- guides ---------- */
.guide-article{max-width:820px;margin:26px auto}
.guide-kicker{font-size:.8rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--green-darker);margin:0 0 6px}
.guide-article h1{font-size:2rem;line-height:1.2;margin:0 0 12px;letter-spacing:-.02em}
.guide-article .lead{font-size:1.08rem;color:var(--muted);margin:0 0 20px}
.guide-cta{display:flex;align-items:center;justify-content:space-between;gap:16px;background:linear-gradient(135deg,rgba(16,185,129,.14),rgba(34,211,238,.12));border:1px solid rgba(16,185,129,.3);border-radius:16px;padding:18px 20px;margin:22px 0}
.guide-cta strong{font-size:1.05rem}
.guide-cta p{margin:4px 0 0;color:var(--muted);font-size:.92rem}
.guide-steps{counter-reset:gs;margin:0 0 22px;padding:0;list-style:none;display:grid;gap:10px}
.guide-steps li{counter-increment:gs;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:12px 14px 12px 52px;position:relative;font-size:.96rem}
.guide-steps li::before{content:counter(gs);position:absolute;left:14px;top:12px;width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,#10b981,#22d3ee);color:#fff;font-weight:800;font-size:.85rem;display:flex;align-items:center;justify-content:center}
.guide-tips{background:rgba(245,158,11,.09);border:1px solid rgba(245,158,11,.3);border-radius:14px;padding:16px 20px;margin:22px 0}
.guide-tips h2{margin-top:0;font-size:1.15rem}
.guide-tips ul{margin:0;padding-left:20px;display:grid;gap:8px}
.guide-article h2{font-size:1.35rem;margin:26px 0 10px;letter-spacing:-.01em}
.guide-article p{line-height:1.7;color:var(--ink)}
.guide-article ul:not(.guide-steps ul):not(.guide-tips ul){padding-left:22px;display:grid;gap:8px;line-height:1.65}
@media(max-width:640px){.guide-cta{flex-direction:column;align-items:stretch;text-align:center}.guide-article h1{font-size:1.55rem}}

/* ============================================================
   VIBRANT COLOR SYSTEM — vivid accents for light + dark themes
   ============================================================ */
/* primary buttons: vivid gradient + glow */
.btn-primary{background:var(--brand-grad);color:#fff;text-shadow:0 1px 2px rgba(4,60,40,.35);box-shadow:var(--glow)}
.btn-primary:hover{background:linear-gradient(135deg,#34d399,#22d3ee);color:#fff;transform:translateY(-2px);box-shadow:0 14px 32px -8px rgba(16,185,129,.65),0 6px 16px -6px rgba(6,182,212,.45)}
/* announcement bar: rich gradient + sheen */
.announce{background:linear-gradient(90deg,#047857,#10b981 45%,#06b6d4);color:#fff;position:relative;overflow:hidden}
.announce::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);animation:sheen 6s ease-in-out infinite}
@keyframes sheen{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}
/* brand mark: vivid + glow */
.brand-mark{background:var(--brand-grad);box-shadow:0 6px 16px -4px rgba(16,185,129,.6)}
/* hero headline accent: vivid gradient text */
.hero h1 .hl{background:linear-gradient(120deg,#10b981 10%,#06b6d4 60%,#0ea5e9 90%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
/* aurora: richer, more saturated */
.aurora i{opacity:.7}
.aurora .a1{background:#34d399}
.aurora .a2{background:#22d3ee}
.aurora .a3{background:#a78bfa;width:340px;height:340px;left:38%;bottom:-160px;top:auto;opacity:.45}
/* cards: glow on hover */
.cat-card:hover,.tool-card:hover,.col-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:rgba(16,185,129,.45)}
/* category icon tiles: rotating vibrant gradients */
.cat-card .ic{background:var(--brand-grad);color:#fff;box-shadow:0 6px 14px -4px rgba(16,185,129,.5)}
.cat-grid>.cat-card:nth-child(6n+2) .ic{background:linear-gradient(135deg,#0ea5e9,#22d3ee);box-shadow:0 6px 14px -4px rgba(14,165,233,.5)}
.cat-grid>.cat-card:nth-child(6n+3) .ic{background:linear-gradient(135deg,#8b5cf6,#d946ef);box-shadow:0 6px 14px -4px rgba(139,92,246,.5)}
.cat-grid>.cat-card:nth-child(6n+4) .ic{background:linear-gradient(135deg,#f59e0b,#f97316);box-shadow:0 6px 14px -4px rgba(245,158,11,.5)}
.cat-grid>.cat-card:nth-child(6n+5) .ic{background:linear-gradient(135deg,#ec4899,#f43f5e);box-shadow:0 6px 14px -4px rgba(236,72,153,.5)}
.cat-grid>.cat-card:nth-child(6n+6) .ic{background:linear-gradient(135deg,#14b8a6,#06b6d4);box-shadow:0 6px 14px -4px rgba(20,184,166,.5)}
/* pills + badges: saturated */
.pill-badge{background:linear-gradient(135deg,rgba(16,185,129,.16),rgba(6,182,212,.16));border:1px solid rgba(16,185,129,.4);color:var(--green-darker)}
.pill-badge .dot{background:var(--brand-grad);box-shadow:0 0 8px rgba(16,185,129,.8)}
.stat-badges span{background:var(--brand-grad-soft);border:1px solid rgba(16,185,129,.35)}
.trend-pill:hover{border-color:var(--green);color:var(--green-darker);box-shadow:0 4px 12px -4px rgba(16,185,129,.4)}
/* section eyebrows: gradient text */
.eyebrow{background:linear-gradient(120deg,#10b981,#06b6d4);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;border-color:rgba(16,185,129,.4)}
/* nav: vivid hover + active PDF pill */
.main-nav a:hover{background:var(--brand-grad-soft);color:var(--green-darker)}
.nav-pdf{background:var(--brand-grad-soft)!important;border:1px solid rgba(16,185,129,.45)!important;color:var(--green-darker)!important;box-shadow:0 4px 12px -6px rgba(16,185,129,.5)}
/* demo card + guide CTA: vivid gradient edge */
.demo-card{box-shadow:var(--shadow-lg),0 0 0 1px rgba(16,185,129,.12)}
.guide-cta{background:var(--brand-grad-soft);border:1px solid rgba(16,185,129,.4)}
.guide-steps li::before{background:var(--brand-grad);box-shadow:0 4px 10px -2px rgba(16,185,129,.6)}
/* links */
a{color:#0b9e6d}
a:hover{color:#047857}
/* footer: vivid top edge */
.site-footer{border-top:3px solid transparent;border-image:linear-gradient(90deg,#10b981,#06b6d4,#8b5cf6) 1}
/* ---------- dark theme vibrancy ---------- */
@media(prefers-reduced-motion:reduce){.announce::after{animation:none}}

/* ============================================================
   DARK THEME READABILITY — clear surfaces, strong contrast
   ============================================================ */

/* native date/time/color controls respect dark theme */

/* ---------- polished calc results ---------- */
.result-panel{background:linear-gradient(180deg,rgba(16,185,129,.10),rgba(6,182,212,.06)),var(--surface);border:1px solid rgba(16,185,129,.35);border-radius:20px;padding:26px;margin-top:20px;position:relative;overflow:hidden}
.result-panel::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--brand-grad)}
.result-panel h3{font-size:.78rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--green-darker);margin-bottom:16px}
.big-result-label{text-align:center;font-size:.8rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 6px}
.big-result{font-family:var(--mono);font-size:clamp(2rem,6vw,3.2rem);font-weight:700;text-align:center;letter-spacing:-.02em;margin:0 0 18px;word-break:break-word;background:linear-gradient(120deg,#10b981,#06b6d4);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;filter:drop-shadow(0 4px 12px rgba(16,185,129,.25))}
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.kpi{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px 14px;text-align:center;transition:transform .15s ease,box-shadow .15s ease;position:relative;overflow:hidden}
.kpi::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--brand-grad);opacity:.7}
.kpi:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.kpi .v{font-family:var(--mono);font-size:1.45rem;font-weight:700;word-break:break-word;background:linear-gradient(120deg,#10b981,#06b6d4);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.kpi .l{font-size:.76rem;color:var(--muted);font-weight:700;margin-top:6px;text-transform:uppercase;letter-spacing:.04em}

/* ---------- helpful feedback ---------- */
.helpful-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:14px 18px;margin:0 0 24px;box-shadow:var(--shadow)}
.helpful-row .hq{font-weight:700;font-size:.95rem}
.hbtn{border:1px solid var(--border);background:var(--surface-2);border-radius:999px;padding:8px 18px;font-weight:700;cursor:pointer;font-family:var(--font);font-size:.9rem;transition:all .15s ease}
.hbtn:hover{border-color:var(--green);transform:translateY(-1px)}
.hbtn.on{background:var(--brand-grad);color:#fff;border-color:transparent;box-shadow:0 4px 12px rgba(16,185,129,.35)}
.hreport{margin-left:auto;font-size:.88rem;font-weight:600;color:var(--green-darker);white-space:nowrap}
/* ---------- request-a-tool box ---------- */
.request-box{background:linear-gradient(135deg,rgba(16,185,129,.09),rgba(6,182,212,.09)),var(--surface);border:1px solid rgba(16,185,129,.3);border-radius:20px;padding:28px;margin:48px 0;display:flex;flex-direction:column;gap:16px}
.request-box h3{margin:0 0 6px;font-size:1.25rem}
.request-box p{margin:0;color:var(--muted)}
.request-row{display:flex;gap:10px;flex-wrap:wrap}
.request-row input{flex:1;min-width:200px;padding:12px 16px;border:1px solid var(--border);border-radius:12px;font-family:var(--font);font-size:.95rem;background:var(--surface);color:var(--ink)}
/* ---------- PWA install banner ---------- */
.pwa-banner{position:fixed;left:16px;right:16px;bottom:16px;z-index:600;display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid rgba(16,185,129,.4);border-radius:16px;padding:14px 16px;box-shadow:0 12px 40px rgba(2,12,27,.25);max-width:520px;margin:0 auto;animation:slideup .3s ease}
.pwa-banner[hidden]{display:none}
.pwa-txt{flex:1;min-width:0}
.pwa-txt strong{font-size:.95rem}
.pwa-txt p{margin:2px 0 0;font-size:.82rem;color:var(--muted)}
@keyframes slideup{from{transform:translateY(20px);opacity:0}}

/* ---------- hero glow-up ---------- */
.hero h1 .hl{background:linear-gradient(110deg,#059669,#06b6d4,#8b5cf6,#06b6d4,#059669);background-size:220% auto;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:hlshine 5s linear infinite;filter:drop-shadow(0 6px 18px rgba(16,185,129,.30));padding-right:.06em}
@keyframes hlshine{to{background-position:220% center}}
.pill-badge{position:relative;background:rgba(255,255,255,.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid transparent;background-clip:padding-box;box-shadow:0 10px 28px rgba(16,185,129,.18),inset 0 1px 0 rgba(255,255,255,.85);color:#065f46;padding:10px 20px}
.pill-badge::before{content:"";position:absolute;inset:-1px;border-radius:999px;padding:1.5px;background:linear-gradient(135deg,#10b981,#06b6d4,#8b5cf6);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.pill-badge .dot{width:9px;height:9px;background:radial-gradient(circle at 35% 35%,#6ee7b7,#059669);animation:dotpulse 2.2s infinite}
@keyframes dotpulse{0%{box-shadow:0 0 0 0 rgba(16,185,129,.55)}70%{box-shadow:0 0 0 10px rgba(16,185,129,0)}100%{box-shadow:0 0 0 0 rgba(16,185,129,0)}}
#heroCount{background:linear-gradient(120deg,#059669,#06b6d4);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;font-weight:800}
.hero h1{position:relative}
.hero h1::before,.hero h1::after{position:absolute;pointer-events:none;color:#f59e0b;filter:drop-shadow(0 2px 8px rgba(245,158,11,.45));animation:sparklefloat 3.6s ease-in-out infinite;z-index:1}
.hero h1::before{content:"\2726";font-size:1.5rem;top:-.55em;right:6%}
.hero h1::after{content:"\2737";font-size:1.05rem;bottom:-.35em;left:1%;animation-delay:1.4s}
@keyframes sparklefloat{0%,100%{transform:translateY(0) rotate(0deg);opacity:.95}50%{transform:translateY(-11px) rotate(18deg);opacity:.45}}
.hero-copy .pill-badge{animation:heroup .7s cubic-bezier(.16,1,.3,1) both}
.hero-copy h1{animation:heroup .7s .12s cubic-bezier(.16,1,.3,1) both}
.hero-copy .sub{animation:heroup .7s .24s cubic-bezier(.16,1,.3,1) both}
.hero-copy .hero-search{animation:heroup .7s .36s cubic-bezier(.16,1,.3,1) both}
.hero-copy .trend-row{animation:heroup .7s .48s cubic-bezier(.16,1,.3,1) both}
.hero-copy .trust-row{animation:heroup .7s .6s cubic-bezier(.16,1,.3,1) both}
@keyframes heroup{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.hero h1 .hl{animation:none}.pill-badge .dot{animation:none}.hero h1::before,.hero h1::after{display:none}.hero-copy .pill-badge,.hero-copy h1,.hero-copy .sub,.hero-copy .hero-search,.hero-copy .trend-row,.hero-copy .trust-row{animation:none}}
/* ---------- HTML sitemap ---------- */
.sitemap-links{list-style:none;margin:0;padding:0;columns:3;column-gap:24px}
.sitemap-links li{break-inside:avoid;margin-bottom:6px}
.sitemap-links a{font-size:.9rem}
@media(max-width:800px){.sitemap-links{columns:2}}
@media(max-width:520px){.sitemap-links{columns:1}}

/* ---------- page transitions ---------- */
#page{transition:opacity .2s ease,transform .2s ease}
#page.page-leave{opacity:0;transform:translateY(10px)}
#page.page-enter{animation:pageIn .38s ease}
@keyframes pageIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
/* ---------- back-to-top ---------- */
.to-top{position:fixed;right:20px;bottom:20px;z-index:550;width:48px;height:48px;border-radius:50%;border:0;cursor:pointer;background:var(--brand-grad);color:#fff;font-size:1.35rem;font-weight:800;line-height:1;box-shadow:0 10px 28px rgba(16,185,129,.45);opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity .25s ease,transform .25s ease}
.to-top.show{opacity:1;transform:none;pointer-events:auto}
.to-top.show:hover{transform:translateY(-3px)}
/* ---------- button ripple ---------- */
.btn{position:relative;overflow:hidden}
.ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.45);transform:scale(0);animation:rip .55s ease-out;pointer-events:none}
@keyframes rip{to{transform:scale(3);opacity:0}}
/* ---------- card icon wiggle ---------- */
.tool-card:hover .ic,.cat-card:hover .ic,.col-card:hover .ic{animation:wiggle .5s ease}
@keyframes wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-14deg) scale(1.15)}60%{transform:rotate(11deg) scale(1.15)}}
/* ---------- branded scrollbar + selection ---------- */
::selection{background:#a7f3d0;color:#065f46}
html{scrollbar-width:thin;scrollbar-color:#10b981 #eef2f7}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:#eef2f7}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#10b981,#06b6d4);border-radius:8px;border:2.5px solid #eef2f7}
::-webkit-scrollbar-thumb:hover{background:#059669}
@media(prefers-reduced-motion:reduce){#page{transition:none}#page.page-enter{animation:none}.ripple{display:none}.tool-card:hover .ic,.cat-card:hover .ic,.col-card:hover .ic{animation:none}.to-top{transition:none}}