/* ============================================================
   FINANCE WAVE — Aqua Wave design system (shared, all pages)
   Edit tokens here; every page & component reads them.
   ============================================================ */
:root{
  --bg:#eef4f4; --surface:#ffffff; --surface-2:#e5eeee; --border:#d3e0e1;
  --text:#0b1e22; --text-muted:#51666b;
  --accent:#0bbfa6; --accent-strong:#08917f; --accent-soft:#d3f4ee;
  --secondary:#ff6f59;
  --success:#16a34a; --warning:#f59e0b; --error:#ef4444; --info:#0ea5e9;
  --ring:rgba(11,191,166,.35);
  --wave-gradient:linear-gradient(120deg,#0bd1c1 0%,#1fa2ff 55%,#7c5cff 100%);
  --glass:rgba(255,255,255,.62); --glass-brd:rgba(11,191,166,.16);
  --shadow-s:0 1px 2px rgba(11,30,34,.06); --shadow-m:0 8px 24px rgba(11,30,34,.09);
  --shadow-l:0 24px 60px rgba(11,30,34,.14);
  --r:16px; --r-s:11px; --r-l:22px;
  --fast:150ms; --base:250ms; --slow:450ms; --ease:cubic-bezier(.22,1,.36,1);
  --aurora-1:#0bd1c1; --aurora-2:#1fa2ff; --aurora-3:#7c5cff; --aurora-4:#ff6f59;
  --font-display:"Sora",system-ui,sans-serif; --font-body:"Manrope",system-ui,sans-serif; --font-mono:"JetBrains Mono",ui-monospace,monospace;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#07171a; --surface:#0e2327; --surface-2:#143035; --border:#21454b;
  --text:#eaf6f5; --text-muted:#8ab0b2;
  --accent:#2de2c5; --accent-strong:#5eead4; --accent-soft:#0f3b37;
  --secondary:#ff8a65;
  --success:#22c55e; --warning:#fbbf24; --error:#f87171; --info:#38bdf8;
  --ring:rgba(45,226,197,.40);
  --wave-gradient:linear-gradient(120deg,#0bd1c1 0%,#1fa2ff 55%,#7c5cff 100%);
  --glass:rgba(14,35,39,.55); --glass-brd:rgba(45,226,197,.18);
  --shadow-s:0 1px 2px rgba(0,0,0,.4); --shadow-m:0 10px 30px rgba(0,0,0,.5); --shadow-l:0 28px 70px rgba(0,0,0,.6);
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --bg:#07171a; --surface:#0e2327; --surface-2:#143035; --border:#21454b;
  --text:#eaf6f5; --text-muted:#8ab0b2;
  --accent:#2de2c5; --accent-strong:#5eead4; --accent-soft:#0f3b37;
  --secondary:#ff8a65;
  --success:#22c55e; --warning:#fbbf24; --error:#f87171; --info:#38bdf8;
  --ring:rgba(45,226,197,.40);
  --wave-gradient:linear-gradient(120deg,#0bd1c1 0%,#1fa2ff 55%,#7c5cff 100%);
  --glass:rgba(14,35,39,.55); --glass-brd:rgba(45,226,197,.18);
  --shadow-s:0 1px 2px rgba(0,0,0,.4); --shadow-m:0 10px 30px rgba(0,0,0,.5); --shadow-l:0 28px 70px rgba(0,0,0,.6);
  color-scheme:dark;
}}

/* ---------- CYBERPUNK MODE (Section 11B) ---------- */
:root[data-theme="cyber"]{
  --bg:#0a0613; --surface:#140a24; --surface-2:#1d0f34; --border:#3a2668;
  --text:#eafcff; --text-muted:#a596d6;
  --accent:#00f0ff; --accent-strong:#7bf9ff; --accent-soft:rgba(0,240,255,.12);
  --secondary:#ff2bd6;
  --success:#3bf0a0; --warning:#ffd02b; --error:#ff4d6d; --info:#00f0ff;
  --ring:rgba(0,240,255,.45);
  --wave-gradient:linear-gradient(120deg,#00f0ff 0%,#7c5cff 50%,#ff2bd6 100%);
  --glass:rgba(20,10,36,.55); --glass-brd:rgba(0,240,255,.28);
  --shadow-s:0 1px 2px rgba(0,0,0,.5); --shadow-m:0 8px 30px rgba(124,92,255,.30); --shadow-l:0 26px 70px rgba(255,43,214,.28);
  --aurora-1:#00f0ff; --aurora-2:#7c5cff; --aurora-3:#ff2bd6; --aurora-4:#00f0ff;
  --font-display:"Orbitron","Sora",system-ui,sans-serif;
  color-scheme:dark;
}
/* neon glow on key surfaces + scanlines overlay */
:root[data-theme="cyber"] body::after{content:""; position:fixed; inset:0; z-index:1; pointer-events:none; mix-blend-mode:overlay; opacity:.5;
  background:repeating-linear-gradient(0deg,rgba(0,240,255,.05) 0 1px,transparent 1px 3px)}
:root[data-theme="cyber"] h1,:root[data-theme="cyber"] h2{letter-spacing:.01em}
:root[data-theme="cyber"] .grad-text{text-shadow:0 0 18px rgba(0,240,255,.5)}
:root[data-theme="cyber"] .btn-primary{box-shadow:0 0 20px rgba(0,240,255,.45),0 6px 18px rgba(255,43,214,.35)}
:root[data-theme="cyber"] .card:hover,:root[data-theme="cyber"] .tcard:hover{box-shadow:0 0 0 1px var(--accent),0 0 26px rgba(0,240,255,.28)}
:root[data-theme="cyber"] .site-header,:root[data-theme="cyber"] .hdr-inner{box-shadow:0 1px 0 rgba(0,240,255,.25)}
:root[data-theme="cyber"] input:focus,:root[data-theme="cyber"] textarea:focus,:root[data-theme="cyber"] select:focus{box-shadow:0 0 0 3px var(--ring),0 0 18px rgba(0,240,255,.3)}
:root[data-theme="cyber"] .result .big{text-shadow:0 0 14px rgba(0,240,255,.4)}
@media (prefers-reduced-motion:reduce){ :root[data-theme="cyber"] body::after{opacity:.28} }

/* ---------- theme menu popup ---------- */
.fw-thememenu{position:absolute; top:calc(100% + 8px); right:0; z-index:80; min-width:184px; padding:6px;
  background:var(--surface); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow-l)}
.fw-thememenu[hidden]{display:none}
.fw-thememenu button{display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:9px 11px; border:none;
  background:none; color:var(--text); border-radius:9px; cursor:pointer; font-size:.9rem}
.fw-thememenu button:hover,.fw-thememenu button:focus-visible{background:var(--accent-soft); outline:none}
.fw-thememenu button .ck{margin-left:auto; color:var(--accent-strong); opacity:0}
.fw-thememenu button[aria-checked="true"] .ck{opacity:1}
.fw-thememenu .sw{width:16px; height:16px; border-radius:5px; flex:none; border:1px solid var(--border)}
.sw-light{background:#eef4f4} .sw-dark{background:#07171a} .sw-cyber{background:linear-gradient(135deg,#00f0ff,#ff2bd6)} .sw-system{background:linear-gradient(135deg,#eef4f4 50%,#07171a 50%)}
.fw-theme-wrap{position:relative; display:inline-flex}

/* ---------- arcade link (revealed only in cyber mode) ---------- */
.fw-arcade-link{display:none !important}
:root[data-theme="cyber"] .fw-arcade-link{display:inline-flex !important}
:root[data-theme="cyber"] a.fw-arcade-link{color:var(--accent-strong); text-shadow:0 0 10px rgba(0,240,255,.5)}

.unit-wrap{display:flex; gap:8px}
.unit-wrap input{flex:1; min-width:0}
.unit-wrap .unit-sel{width:auto; min-width:88px; flex:none; -webkit-appearance:menulist}
.nl-form{display:flex; gap:8px; margin-top:16px; max-width:340px; flex-wrap:wrap}
.nl-form .nl-email{flex:1; min-width:150px}
.nl-cta{margin:44px 0; padding:32px 26px; border-radius:var(--r-l); text-align:center;
  background:linear-gradient(135deg,var(--accent-soft),var(--surface)); border:1px solid var(--glass-brd)}
.nl-cta h2{font-size:clamp(1.5rem,3.5vw,2rem); margin-bottom:8px}
.nl-cta p{color:var(--text-muted); max-width:52ch; margin:0 auto 4px}
.nl-cta .nl-form{margin:18px auto 0; justify-content:center; max-width:420px}
:root[data-theme="cyber"] .nl-cta{box-shadow:0 0 26px rgba(0,240,255,.2)}

.kw-chips{display:flex; flex-wrap:wrap; gap:9px}
.kw-chip{display:inline-block; padding:7px 13px; border-radius:999px; font-size:.85rem; color:var(--text-muted);
  background:var(--surface-2); border:1px solid var(--border); transition:color var(--fast),border-color var(--fast)}
.kw-chip:hover{color:var(--accent-strong); border-color:var(--accent)}
:root[data-theme="cyber"] .kw-chip:hover{box-shadow:0 0 14px rgba(0,240,255,.25)}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--text); font-family:var(--font-body); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; min-height:100vh; display:flex; flex-direction:column}
body::before{content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.03;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}
h1,h2,h3,h4{font-family:var(--font-display); line-height:1.14; text-wrap:balance; margin:0}
a{color:var(--accent-strong); text-decoration:none}
p{margin:0 0 1em}
.mono{font-family:var(--font-mono); font-variant-numeric:tabular-nums}
.wrap{max-width:1200px; margin:0 auto; padding:0 20px; width:100%}
.grad-text{background:var(--wave-gradient); -webkit-background-clip:text; background-clip:text; color:transparent}
button{font-family:inherit}
:focus-visible{outline:none; box-shadow:0 0 0 3px var(--ring); border-radius:8px}
main{position:relative; z-index:2; flex:1}
img{max-width:100%}

/* buttons + inputs */
.btn{display:inline-flex; align-items:center; gap:8px; border:none; cursor:pointer; font-weight:700; font-size:.95rem; padding:12px 20px; border-radius:var(--r-s); transition:transform var(--base) var(--ease), box-shadow var(--base), background var(--base), border-color var(--base)}
.btn-primary{background:var(--wave-gradient); color:#04231f; box-shadow:0 6px 18px rgba(11,191,166,.35)}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 12px 28px rgba(31,162,255,.45)}
.btn-ghost{background:var(--surface-2); color:var(--text); border:1px solid var(--border)}
.btn-ghost:hover{transform:translateY(-2px); border-color:var(--accent); color:var(--accent-strong)}
.btn-sm{padding:8px 14px; font-size:.85rem}
input,textarea,select{font-family:inherit; font-size:1rem; color:var(--text); background:var(--surface); border:1px solid var(--border); border-radius:var(--r-s); padding:11px 13px; width:100%; transition:border-color var(--base), box-shadow var(--base)}
input:focus,textarea:focus,select:focus{border-color:var(--accent); box-shadow:0 0 0 3px var(--ring)}
label{display:block; font-weight:600; font-size:.85rem; margin:0 0 6px; color:var(--text-muted)}
textarea{resize:vertical; min-height:90px}

/* header */
#site-header{position:sticky; top:0; z-index:60; transition:box-shadow var(--base), background var(--base)}
.hdr-inner{display:flex; align-items:center; gap:14px; padding:12px 20px; max-width:1240px; margin:0 auto}
#site-header.scrolled{background:var(--glass); backdrop-filter:blur(14px) saturate(1.4); -webkit-backdrop-filter:blur(14px) saturate(1.4); box-shadow:var(--shadow-m); border-bottom:1px solid var(--glass-brd)}
.logo{display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800; font-size:1.2rem; letter-spacing:-.02em; color:var(--text)}
.logo svg{width:34px; height:34px; flex:none}
.logo:hover .wv{animation:pulseWave 1.1s var(--ease)}
@keyframes pulseWave{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.5)}}
.nav-main{display:flex; align-items:center; gap:4px; margin-left:6px}
.nav-main a,.nav-main button.navlink{background:none; border:none; cursor:pointer; color:var(--text); font-weight:600; font-size:.95rem; padding:9px 12px; border-radius:9px; transition:background var(--fast), color var(--fast)}
.nav-main a:hover,.nav-main button.navlink:hover,.nav-main a.active{background:var(--accent-soft); color:var(--accent-strong)}
.hdr-search{margin-left:auto; position:relative; display:flex; align-items:center; min-width:200px}
.hdr-search input{padding-left:36px; background:var(--surface-2)}
.hdr-search svg{position:absolute; left:11px; width:16px; height:16px; color:var(--text-muted)}
.fw-cur,.fw-lang{width:auto; min-width:92px; padding:9px 10px; border-radius:11px; border:1px solid var(--border); background:var(--surface-2); color:var(--text); font-size:.85rem; font-weight:600; cursor:pointer; flex:none; -webkit-appearance:menulist}
.fw-lang{min-width:104px; max-width:130px}
.fw-cur:hover,.fw-lang:hover{border-color:var(--accent)}
@media (max-width:520px){ .fw-cur{min-width:74px; font-size:.78rem; padding:8px 6px} .fw-lang{min-width:88px; max-width:108px; font-size:.78rem; padding:8px 6px} }
/* RTL polish */
[dir="rtl"] .crumbs,[dir="rtl"] .tool-actions,[dir="rtl"] .kw-chips{direction:rtl}
[dir="rtl"] .result .rows>div{flex-direction:row-reverse}
[dir="rtl"] #toTop{right:auto; left:22px}
.icon-btn{display:grid; place-items:center; width:42px; height:42px; border-radius:11px; border:1px solid var(--border); background:var(--surface-2); color:var(--text); cursor:pointer; flex:none; transition:transform var(--fast), border-color var(--fast)}
.icon-btn:hover{transform:translateY(-2px); border-color:var(--accent)}
.hamburger{display:none}
.mega{position:fixed; left:0; right:0; top:66px; z-index:55; max-height:0; overflow:hidden; transition:max-height var(--slow) var(--ease), opacity var(--base); opacity:0}
.mega.open{max-height:76vh; opacity:1}
.mega-inner{margin:6px auto 0; max-width:1240px; background:var(--glass); backdrop-filter:blur(16px) saturate(1.5); -webkit-backdrop-filter:blur(16px) saturate(1.5); border:1px solid var(--glass-brd); border-radius:var(--r-l); box-shadow:var(--shadow-l); padding:18px; overflow:auto; max-height:72vh}
.mega-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:4px}
.mega-cat{border-radius:12px; padding:9px 11px}
.mega-cat h4{font-size:.8rem; text-transform:uppercase; letter-spacing:.05em; color:var(--accent-strong); margin:0 0 5px; display:flex; align-items:center; gap:7px}
.mega-cat .cc{font-size:.68rem; background:var(--accent-soft); color:var(--accent-strong); padding:1px 7px; border-radius:20px; font-weight:700}
.mega-cat a{display:block; font-size:.83rem; color:var(--text-muted); padding:3px 6px; border-radius:7px}
.mega-cat a:hover{background:var(--accent-soft); color:var(--text)}
.mega-cat .more{color:var(--accent-strong); font-weight:600}

/* footer */
#site-footer{position:relative; z-index:2; margin-top:40px; background:var(--surface); border-top:1px solid var(--border)}
.foot-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:34px; padding:52px 0 32px; position:relative}
.foot-col.reveal-io{opacity:0; transform:translateY(20px); transition:opacity var(--slow) var(--ease), transform var(--slow) var(--ease)}
.foot-col.in{opacity:1; transform:none}
.foot-col h5{font-family:var(--font-display); font-size:.9rem; text-transform:uppercase; letter-spacing:.06em; margin:0 0 14px; color:var(--text)}
.foot-col a{display:block; color:var(--text-muted); font-size:.9rem; padding:5px 0; position:relative; width:fit-content; transition:color var(--fast)}
.foot-col a::after{content:""; position:absolute; left:0; bottom:2px; width:0; height:1.5px; background:var(--accent); transition:width var(--base) var(--ease)}
.foot-col a:hover{color:var(--accent-strong)} .foot-col a:hover::after{width:100%}
.foot-about{color:var(--text-muted); font-size:.9rem; margin:14px 0 18px; max-width:38ch}
.socials{display:flex; flex-wrap:wrap; gap:10px}
.soc{width:40px; height:40px; border-radius:11px; display:grid; place-items:center; background:var(--surface-2); border:1px solid var(--border); color:var(--text-muted); cursor:pointer; position:relative; transition:transform var(--base) var(--ease), background var(--base), color var(--base), box-shadow var(--base)}
.soc svg{width:19px; height:19px}
.soc:hover{transform:translateY(-4px) scale(1.08); color:#fff}
.soc[data-b="fb"]:hover{background:#1877F2; box-shadow:0 8px 18px rgba(24,119,242,.5)}
.soc[data-b="x"]:hover{background:#000; box-shadow:0 8px 18px rgba(0,0,0,.4)}
:root[data-theme="dark"] .soc[data-b="x"]:hover{background:#fff; color:#000}
.soc[data-b="ig"]:hover{background:linear-gradient(45deg,#405DE6,#5851DB,#833AB4,#C13584,#E1306C,#FD1D1D,#F56040,#FCAF45); box-shadow:0 8px 18px rgba(193,53,132,.5)}
.soc[data-b="yt"]:hover{background:#FF0000; box-shadow:0 8px 18px rgba(255,0,0,.5)}
.soc[data-b="in"]:hover{background:#0A66C2; box-shadow:0 8px 18px rgba(10,102,194,.5)}
.soc[data-b="pin"]:hover{background:#E60023; box-shadow:0 8px 18px rgba(230,0,35,.5)}
.soc[data-b="wa"]:hover{background:#25D366; box-shadow:0 8px 18px rgba(37,211,102,.5)}
.soc[data-b="tg"]:hover{background:#229ED9; box-shadow:0 8px 18px rgba(34,158,217,.5)}
.soc .tip{position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%) translateY(4px); opacity:0; background:var(--text); color:var(--bg); font-size:.7rem; font-weight:700; padding:3px 8px; border-radius:6px; white-space:nowrap; pointer-events:none; transition:opacity var(--fast), transform var(--fast)}
.soc:hover .tip{opacity:1; transform:translateX(-50%)}
.foot-bar{border-top:1px solid var(--border); padding:18px 0; display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; font-size:.82rem; color:var(--text-muted)}
.foot-bar .lk{display:flex; gap:16px; flex-wrap:wrap}
.foot-bar .lk a{color:var(--text-muted)} .foot-bar .lk a:hover{color:var(--accent-strong)}

/* back to top + toast + cookie */
#toTop{position:fixed; right:22px; bottom:22px; z-index:70; width:46px; height:46px; border-radius:14px; border:none; background:var(--wave-gradient); color:#04231f; cursor:pointer; box-shadow:var(--shadow-l); display:grid; place-items:center; opacity:0; pointer-events:none; transform:translateY(12px); transition:all var(--base) var(--ease)}
#toTop.show{opacity:1; pointer-events:auto; transform:none}
#toast{position:fixed; left:50%; bottom:30px; z-index:99; transform:translateX(-50%) translateY(24px); opacity:0; background:var(--text); color:var(--bg); font-weight:700; font-size:.88rem; padding:11px 20px; border-radius:12px; box-shadow:var(--shadow-l); transition:all var(--base) var(--ease); pointer-events:none}
#toast.show{opacity:1; transform:translateX(-50%)}
#cookie{position:fixed; left:16px; right:16px; bottom:16px; z-index:80; max-width:540px; margin:0 auto; background:var(--glass); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border:1px solid var(--glass-brd); border-radius:var(--r); box-shadow:var(--shadow-l); padding:16px 18px; display:flex; gap:14px; align-items:center; flex-wrap:wrap; transform:translateY(160%); transition:transform var(--slow) var(--ease)}
#cookie.show{transform:none}
#cookie p{margin:0; font-size:.84rem; color:var(--text-muted); flex:1; min-width:210px}

/* drawer */
.drawer-bg{position:fixed; inset:0; z-index:90; background:rgba(4,20,23,.5); opacity:0; pointer-events:none; transition:opacity var(--base)}
.drawer-bg.open{opacity:1; pointer-events:auto}
.drawer{position:fixed; top:0; right:0; bottom:0; z-index:91; width:min(330px,86vw); background:var(--surface); border-left:1px solid var(--border); box-shadow:var(--shadow-l); transform:translateX(100%); transition:transform var(--slow) var(--ease); padding:18px; overflow:auto}
.drawer.open{transform:none}
.drawer .dh{display:flex; justify-content:space-between; align-items:center; margin-bottom:14px}
.drawer .acc{border-bottom:1px solid var(--border)}
.drawer .acc>button{width:100%; text-align:left; background:none; border:none; cursor:pointer; color:var(--text); font-weight:600; padding:13px 4px; display:flex; justify-content:space-between; font-size:.95rem}
.drawer .acc .inner{display:none; padding:0 4px 12px} .drawer .acc.open .inner{display:block}
.drawer .acc .inner a{display:block; color:var(--text-muted); padding:6px 0; font-size:.88rem}

/* ad slots */
.ad{display:flex; align-items:center; justify-content:center; min-height:96px; margin:32px auto; max-width:970px; border:1px dashed var(--border); border-radius:14px; color:var(--text-muted); font-size:.76rem; letter-spacing:.08em; text-transform:uppercase; background:repeating-linear-gradient(45deg,transparent,transparent 12px,var(--surface-2) 12px,var(--surface-2) 24px)}
.ad-label{font-size:.62rem; color:var(--text-muted); text-align:center; text-transform:uppercase; letter-spacing:.12em; margin:2px 0}

/* generic sections */
section.blk{padding:52px 0; position:relative; z-index:2}
.sec-head{margin-bottom:24px}
.sec-head .k{font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--accent-strong)}
.sec-head h2{font-size:clamp(1.6rem,3.5vw,2.3rem); font-weight:700; letter-spacing:-.02em; margin:6px 0}
.sec-head p{color:var(--text-muted); max-width:62ch; margin:0}

/* cards + grids */
.card{position:relative; background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:20px; box-shadow:var(--shadow-s); transition:transform var(--base) var(--ease), box-shadow var(--base), border-color var(--base); overflow:hidden}
.card:hover{transform:translateY(-5px); box-shadow:var(--shadow-l); border-color:var(--accent)}
.tool-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px}
.tcard{display:block; background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:16px 17px; transition:all var(--base) var(--ease)}
.tcard:hover{border-color:var(--accent); transform:translateY(-3px); box-shadow:var(--shadow-m)}
.tcard .rc{font-size:.7rem; color:var(--accent-strong); font-weight:700; text-transform:uppercase; letter-spacing:.04em}
.tcard h3,.tcard h4{font-size:.98rem; margin:4px 0 4px; color:var(--text)}
.tcard p{font-size:.82rem; color:var(--text-muted); margin:0}
.cats{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px}
.cat{display:flex; gap:12px; align-items:flex-start; background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:15px; transition:all var(--base) var(--ease)}
.cat:hover{border-color:var(--accent); transform:translateY(-3px); box-shadow:var(--shadow-m)}
.cat .ci{width:40px; height:40px; flex:none; border-radius:11px; display:grid; place-items:center; font-size:1.15rem; background:var(--accent-soft)}
.cat h3,.cat h4{font-size:.95rem; margin:0 0 2px; color:var(--text)}
.cat span{font-size:.78rem; color:var(--text-muted)}

/* breadcrumbs */
.crumbs{font-size:.82rem; color:var(--text-muted); padding:18px 0 2px; display:flex; gap:7px; flex-wrap:wrap}
.crumbs a{color:var(--text-muted)} .crumbs a:hover{color:var(--accent-strong)}
.crumbs span{color:var(--accent-strong)}

/* tool UI */
.tool-hero{padding:10px 0 6px}
.tool-hero h1{font-size:clamp(1.7rem,4vw,2.5rem); letter-spacing:-.02em; margin:6px 0 10px}
.tool-lead{color:var(--text-muted); font-size:1.05rem; max-width:65ch; margin:0 0 8px}
.tool-shell{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-l); box-shadow:var(--shadow-m); padding:24px; margin:18px 0}
.field-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; margin-bottom:16px}
.tool-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:6px}
.error{color:var(--error); font-weight:600; font-size:.92rem; margin:14px 0 0; padding:11px 14px; border-radius:10px; background:color-mix(in srgb,var(--error) 12%, transparent); border:1px solid color-mix(in srgb,var(--error) 30%, transparent)}
.result{margin-top:18px; padding:18px; border-radius:var(--r); background:var(--accent-soft); border:1px solid var(--glass-brd); animation:rise .35s var(--ease)}
.result .big{font-family:var(--font-mono); font-weight:700; font-size:1.9rem; color:var(--accent-strong); word-break:break-word}
.result .sub{font-size:.85rem; color:var(--text-muted); margin-top:2px}
.result .rows{display:grid; gap:6px; margin-top:12px; font-size:.9rem}
.result .rows div{display:flex; justify-content:space-between; gap:12px; border-bottom:1px dashed var(--border); padding-bottom:4px}
.result .rows b{font-family:var(--font-mono)}
.result pre{white-space:pre-wrap; word-break:break-word; font-family:var(--font-mono); font-size:.9rem; margin:0}
@keyframes rise{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}
.chips{display:flex; gap:8px; flex-wrap:wrap; margin:4px 0 0}
.chip{background:var(--surface-2); border:1px solid var(--border); color:var(--text); padding:7px 13px; border-radius:20px; cursor:pointer; font-size:.85rem; font-weight:600; transition:all var(--fast)}
.chip:hover,.chip.active{border-color:var(--accent); color:var(--accent-strong); background:var(--accent-soft)}
.privacy-note{background:var(--accent-soft); border:1px solid var(--glass-brd); border-radius:12px; padding:11px 15px; font-size:.82rem; color:var(--accent-strong); margin:16px 0; display:flex; gap:9px; align-items:center}
.rangewrap{display:flex; align-items:center; gap:10px}
input[type=range]{padding:0; accent-color:var(--accent)}
input[type=checkbox],input[type=radio]{width:auto}
.inline-check{display:flex; gap:6px; align-items:center; margin:0; font-weight:600; color:var(--text); font-size:.9rem}

/* article content on tool/category pages */
.prose{max-width:70ch}
.prose h2{font-size:1.4rem; margin:28px 0 10px}
.prose h3{font-size:1.1rem; margin:20px 0 8px}
.prose p,.prose li{color:var(--text-muted)}
.prose ol,.prose ul{padding-left:22px}
.faq{border:1px solid var(--border); border-radius:12px; overflow:hidden; margin:8px 0}
.faq details{border-bottom:1px solid var(--border)} .faq details:last-child{border-bottom:none}
.faq summary{cursor:pointer; padding:14px 16px; font-weight:600; color:var(--text); list-style:none; display:flex; justify-content:space-between; gap:10px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--accent-strong); font-weight:800}
.faq details[open] summary::after{content:"–"}
.faq .a{padding:0 16px 15px; color:var(--text-muted); font-size:.92rem}
.related{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:10px}

/* hero + aurora (home) */
.hero{position:relative; overflow:hidden; padding:60px 0 120px}
.hero .wrap{position:relative; z-index:5}
.aurora{position:absolute; inset:-20% -10% auto -10%; height:130%; z-index:0; filter:blur(70px); opacity:.55; pointer-events:none}
.blob{position:absolute; border-radius:50%; mix-blend-mode:screen}
.b1{width:46vw; height:46vw; left:-4vw; top:-8vw; background:var(--aurora-1); animation:drift1 22s var(--ease) infinite alternate}
.b2{width:40vw; height:40vw; right:-2vw; top:-4vw; background:var(--aurora-2); animation:drift2 26s var(--ease) infinite alternate}
.b3{width:38vw; height:38vw; left:26vw; top:14vw; background:var(--aurora-3); animation:drift3 30s var(--ease) infinite alternate}
.b4{width:22vw; height:22vw; right:14vw; top:20vw; background:var(--aurora-4); opacity:.5; animation:drift1 28s var(--ease) infinite alternate-reverse}
@keyframes drift1{to{transform:translate(6vw,4vw) scale(1.12)}}
@keyframes drift2{to{transform:translate(-5vw,5vw) scale(1.08)}}
@keyframes drift3{to{transform:translate(4vw,-4vw) scale(1.14)}}
.waves{position:absolute; left:0; right:0; bottom:-2px; z-index:1; width:100%; height:150px; pointer-events:none}
.waves use{animation:swell 9s ease-in-out infinite}
.waves use:nth-child(1){animation-delay:-2s; opacity:.30}
.waves use:nth-child(2){animation-delay:-4s; opacity:.20}
.waves use:nth-child(3){animation-delay:-6s; opacity:.45}
@keyframes swell{0%,100%{transform:translate(-90px,0)}50%{transform:translate(85px,-6px)}}
.eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:.8rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--accent-strong); background:var(--accent-soft); padding:6px 13px; border-radius:30px; border:1px solid var(--glass-brd)}
.hero h1{font-size:clamp(2.3rem,6vw,4.1rem); font-weight:800; letter-spacing:-.03em; margin:18px 0 12px; max-width:15ch}
.hero p.sub{font-size:clamp(1.05rem,2.4vw,1.35rem); color:var(--text-muted); max-width:44ch; margin:0 0 26px}
.reveal{opacity:0; transform:translateY(18px); animation:riseIn .8s var(--ease) forwards}
.reveal.d1{animation-delay:.05s}.reveal.d2{animation-delay:.18s}.reveal.d3{animation-delay:.32s}.reveal.d4{animation-delay:.46s}
@keyframes riseIn{to{opacity:1; transform:none}}
.hero-search{display:flex; gap:10px; max-width:560px; margin-bottom:14px}
.hero-search .field{position:relative; flex:1}
.hero-search .field svg{position:absolute; left:14px; top:50%; transform:translateY(-50%); width:19px; height:19px; color:var(--text-muted)}
.hero-search input{padding:15px 15px 15px 44px; font-size:1.05rem; box-shadow:var(--shadow-m)}
.suggest{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:34px; font-size:.85rem; color:var(--text-muted)}
.suggest button{background:var(--surface); border:1px solid var(--border); color:var(--text-muted); padding:5px 12px; border-radius:20px; cursor:pointer; font-size:.82rem; transition:all var(--fast)}
.suggest button:hover{border-color:var(--accent); color:var(--accent-strong); transform:translateY(-1px)}
.stats{display:flex; gap:30px; flex-wrap:wrap}
.stat .n{font-family:var(--font-display); font-weight:800; font-size:2.1rem; line-height:1}
.stat .l{font-size:.82rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.05em; margin-top:4px}
.bento{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.bento .card .ico{width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent-strong); margin-bottom:12px; font-size:1.2rem}
.bento .card h3{font-size:1.05rem; font-weight:700; margin-bottom:5px; color:var(--text)}
.bento .card p{font-size:.86rem; color:var(--text-muted); margin:0}
.bento .card .badge{position:absolute; top:14px; right:14px; font-size:.66rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; background:var(--secondary); color:#2a0d06; padding:3px 8px; border-radius:20px}
.bento .big{grid-column:span 2; grid-row:span 2; background:linear-gradient(160deg,var(--surface),var(--surface-2))}
.bento .wide{grid-column:span 2}
.bento .feat{background:linear-gradient(150deg,rgba(11,209,193,.14),rgba(124,92,255,.10)); border-color:var(--glass-brd)}
.cta-in{margin-top:14px; font-weight:700; font-size:.88rem; color:var(--accent-strong); display:inline-flex; gap:6px; align-items:center}
.card:hover .cta-in{gap:10px; transition:gap var(--base)}
.count-pill{display:inline-block; background:var(--surface-2); border:1px solid var(--border); border-radius:8px; padding:2px 9px; font-size:.8rem; color:var(--text-muted); font-weight:600}
.empty{color:var(--text-muted); padding:20px 0}

@media (max-width:860px){
  .nav-main a,.nav-main .navlink{display:none}
  .hdr-search{display:none} .hamburger{display:grid}
  .bento{grid-template-columns:repeat(2,1fr)} .bento .big{grid-column:span 2; grid-row:span 1}
  .foot-grid{grid-template-columns:1fr 1fr; gap:24px}
}
@media (max-width:520px){ .bento{grid-template-columns:1fr} .bento .wide,.bento .big{grid-column:span 1} .foot-grid{grid-template-columns:1fr} .stats{gap:22px} }

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important}
  .blob,.waves use{animation:none !important}
  .reveal{opacity:1; transform:none}
}