/* ============================================================
   SUPREME PRO — TinyWow-style design layer
   Loaded after sp.css. Clean white UI, bold type, category colours,
   mega-menu header, smooth reveal / hover animations.
   ============================================================ */

:root{
  --bg:#ffffff;
  --bg-alt:#f5f6fb;
  --surface:#ffffff;
  --surface-solid:#ffffff;
  --surface-border:#e7e9f3;
  --text:#0d1026;
  --text-dim:#4f566f;
  --text-faint:#8a90a8;
  --accent:#5b3df5;
  --accent-2:#8b5cf6;
  --radius-lg:22px;
  --radius-md:16px;
  --radius-sm:12px;
  --shadow-soft:0 1px 2px rgba(16,20,50,.04),0 8px 24px rgba(16,20,50,.06);
  --shadow-lift:0 2px 4px rgba(16,20,50,.05),0 18px 44px rgba(60,50,160,.16);
  --header-h:68px;
  --font-display:'Plus Jakarta Sans','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --tw-grad:linear-gradient(135deg,#5b3df5 0%,#8b5cf6 55%,#c06bff 100%);
  --tw-ease:cubic-bezier(.22,1,.36,1);
}
:root[data-theme="dark"]{
  --bg:#0b0d1a;
  --bg-alt:#11142a;
  --surface:#141830;
  --surface-solid:#141830;
  --surface-border:#252a49;
  --text:#f2f3fb;
  --text-dim:#b3b8d4;
  --text-faint:#7b81a3;
  --accent:#8b7bff;
  --accent-2:#b18cff;
  --shadow-soft:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.35);
  --shadow-lift:0 2px 4px rgba(0,0,0,.4),0 18px 44px rgba(0,0,0,.55);
}

html{scroll-behavior:smooth}
body{
  background:var(--bg) !important;
  color:var(--text);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  animation:twPage .5s var(--tw-ease) both;
}
@keyframes twPage{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
h1,h2,h3,h4,.brand{font-family:var(--font-display);letter-spacing:-.025em}
::selection{background:color-mix(in srgb,var(--accent) 28%,transparent)}
.container{max-width:1200px}

/* ---------- Buttons ---------- */
.btn{border-radius:12px;font-weight:700;letter-spacing:-.01em;transition:transform .2s var(--tw-ease),box-shadow .2s var(--tw-ease),background .2s,border-color .2s;position:relative;overflow:hidden}
.btn-primary{background:var(--tw-grad)!important;color:#fff!important;border:0!important;box-shadow:0 6px 18px rgba(91,61,245,.32)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(91,61,245,.42)}
.btn-ghost{background:var(--surface);border:1.5px solid var(--surface-border);color:var(--text)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
.btn .tw-rip{position:absolute;border-radius:50%;background:rgba(255,255,255,.45);transform:scale(0);animation:twRip .6s ease-out;pointer-events:none}
@keyframes twRip{to{transform:scale(4);opacity:0}}

/* ---------- Header ---------- */
.site-header.tw-header{background:color-mix(in srgb,var(--bg) 88%,transparent);-webkit-backdrop-filter:saturate(180%) blur(16px);backdrop-filter:saturate(180%) blur(16px);border-bottom:1px solid transparent;transition:border-color .25s,box-shadow .25s;position:sticky;top:0;z-index:300}
.site-header.tw-header.scrolled{border-bottom-color:var(--surface-border);box-shadow:0 6px 24px rgba(16,20,50,.06)}
.tw-header .header-inner{height:var(--header-h);gap:14px}
.tw-header .brand{font-weight:800;font-size:1.18rem;flex:none}
.tw-header .brand-mark{width:34px;height:34px;border-radius:11px}
.tw-nav{display:flex;align-items:center;gap:2px;margin:0 auto 0 14px}
.tw-nav .tw-dd{position:relative}
.tw-nav .tw-dd-btn,.tw-nav .tw-link{white-space:nowrap;display:inline-flex;align-items:center;gap:5px;height:40px;padding:0 13px;border:0;background:transparent;color:var(--text);font:600 .93rem var(--font-body);border-radius:10px;cursor:pointer;text-decoration:none;transition:background .2s,color .2s}
.tw-nav .tw-dd-btn svg{transition:transform .25s var(--tw-ease);opacity:.6}
.tw-nav .tw-dd:hover .tw-dd-btn,.tw-nav .tw-dd.open .tw-dd-btn,.tw-nav .tw-link:hover{background:var(--bg-alt);color:var(--accent)}
.tw-nav .tw-dd.open .tw-dd-btn svg,.tw-nav .tw-dd:hover .tw-dd-btn svg{transform:rotate(180deg)}
.tw-nav .is-active>.tw-dd-btn,.tw-nav .tw-link.is-active{color:var(--accent)}
.tw-menu{position:absolute;top:calc(100% + 6px);left:-14px;width:min(560px,92vw);background:var(--surface-solid);border:1px solid var(--surface-border);border-radius:18px;padding:18px;box-shadow:0 24px 60px rgba(16,20,50,.18);opacity:0;visibility:hidden;transform:translateY(8px) scale(.98);transform-origin:top left;transition:opacity .22s var(--tw-ease),transform .22s var(--tw-ease),visibility .22s;z-index:50}
.tw-menu::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
.tw-dd:hover>.tw-menu,.tw-dd.open>.tw-menu{opacity:1;visibility:visible;transform:none}
.tw-menu-head{display:flex;flex-direction:column;gap:2px;padding:0 6px 12px}
.tw-menu-head strong{font:800 1rem var(--font-display)}
.tw-menu-head span{font-size:.84rem;color:var(--text-faint)}
.tw-menu-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:4px}
.tw-menu-grid a{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:12px;text-decoration:none;color:var(--text);font-weight:600;font-size:.9rem;transition:background .18s,transform .18s var(--tw-ease)}
.tw-menu-grid a:hover{background:var(--bg-alt);transform:translateX(3px)}
.tw-menu-all{display:block;margin-top:12px;padding:11px 12px;border-radius:12px;background:var(--bg-alt);color:var(--accent)!important;font-weight:700;font-size:.9rem;text-decoration:none;text-align:center;transition:background .2s,color .2s}
.tw-menu-all:hover{background:var(--accent);color:#fff!important}
.tw-menu-sm{width:330px}
.tw-menu-sm a:not(.tw-menu-all){display:grid;grid-template-columns:12px 1fr;column-gap:12px;padding:10px 12px;border-radius:12px;text-decoration:none;color:var(--text)}
.tw-menu-sm a:not(.tw-menu-all):hover{background:var(--bg-alt)}
.tw-menu-sm b{font-size:.92rem}
.tw-menu-sm small{grid-column:2;color:var(--text-faint);font-size:.8rem;line-height:1.4}
.tw-menu-sm .tw-dot{margin-top:6px}
.tw-dot{width:10px;height:10px;border-radius:50%;display:inline-block;flex:none}
.tw-ico{width:30px;height:30px;border-radius:9px;flex:none;object-fit:cover}
.tw-ico.sm{width:24px;height:24px;border-radius:7px}
.tw-emo{display:inline-flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--c,#6366f1) 16%,transparent);font-size:1rem}
.search-trigger{border-radius:12px;background:var(--bg-alt);border-color:transparent;min-width:190px;transition:box-shadow .2s,border-color .2s,background .2s}
.search-trigger:hover{background:var(--surface-solid);border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 14%,transparent)}
.icon-btn{border-radius:12px;background:var(--bg-alt);border:0;width:40px;height:40px}
.icon-btn:hover{background:color-mix(in srgb,var(--accent) 14%,var(--bg-alt))}
.header-actions{display:flex;align-items:center;gap:8px}
.hamburger{display:none!important}
@media(max-width:1060px){
  .tw-nav{display:none}
  .hamburger{display:inline-flex!important}
  .search-trigger span:nth-child(2),.search-trigger kbd{display:none}
  .search-trigger{min-width:40px;width:40px;padding:0;justify-content:center}
  .tw-header .header-inner{justify-content:space-between}
}

/* ---------- Mobile drawer ---------- */
.tw-drawer{width:min(340px,88vw);padding:18px 16px 40px;overflow-y:auto;background:var(--surface-solid)!important;gap:2px}
.tw-drawer a{padding:12px 12px;border-radius:12px;font-weight:600;color:var(--text);text-decoration:none;display:flex;align-items:center;gap:10px}
.tw-drawer a:hover{background:var(--bg-alt)}
.tw-d-label{font:700 .72rem var(--font-body);letter-spacing:.09em;text-transform:uppercase;color:var(--text-faint);padding:16px 12px 6px}
.tw-acc{border-radius:14px}
.tw-acc>summary{list-style:none;display:flex;align-items:center;gap:10px;padding:12px;border-radius:12px;font-weight:700;cursor:pointer;color:var(--text)}
.tw-acc>summary::-webkit-details-marker{display:none}
.tw-acc>summary em{margin-left:auto;font-style:normal;font-size:.78rem;color:var(--text-faint);background:var(--bg-alt);padding:2px 8px;border-radius:99px}
.tw-acc>summary::after{content:"";width:8px;height:8px;border-right:2px solid var(--text-faint);border-bottom:2px solid var(--text-faint);transform:rotate(45deg);transition:transform .2s;margin-left:6px}
.tw-acc[open]>summary::after{transform:rotate(-135deg)}
.tw-acc[open]>summary{background:var(--bg-alt)}
.tw-acc>div{padding:4px 0 8px 8px;animation:twDrop .25s var(--tw-ease)}
@keyframes twDrop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.tw-acc-all{color:var(--accent)!important}

/* ---------- Reveal animations ---------- */
.tw-js .tw-r{opacity:0;transform:translateY(22px);transition:opacity .7s var(--tw-ease),transform .7s var(--tw-ease);transition-delay:var(--d,0ms)}
.tw-js .tw-r.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  body{animation:none}
  .tw-js .tw-r{opacity:1;transform:none;transition:none}
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
}

/* ---------- HOME HERO ---------- */
.tw-hero{position:relative;overflow:hidden;padding:76px 0 64px;text-align:center;background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 7%,var(--bg)) 0%,var(--bg) 100%)}
.tw-hero .blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;pointer-events:none;animation:twFloat 14s ease-in-out infinite}
.tw-hero .b1{width:360px;height:360px;background:#7c5cff;left:-90px;top:-80px}
.tw-hero .b2{width:320px;height:320px;background:#22d3ee;right:-80px;top:40px;animation-delay:-5s;opacity:.35}
.tw-hero .b3{width:260px;height:260px;background:#f472b6;left:38%;bottom:-140px;animation-delay:-9s;opacity:.28}
@keyframes twFloat{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(30px,26px) scale(1.08)}}
.tw-hero .container{position:relative;z-index:2}
.tw-badge{display:inline-flex;align-items:center;gap:8px;padding:7px 14px 7px 8px;border-radius:99px;background:var(--surface-solid);border:1px solid var(--surface-border);box-shadow:var(--shadow-soft);font-size:.84rem;font-weight:600;color:var(--text-dim)}
.tw-badge b{background:var(--tw-grad);color:#fff;border-radius:99px;padding:3px 10px;font-size:.74rem;letter-spacing:.02em}
.tw-hero h1{font-size:clamp(2.2rem,5.4vw,4.1rem);line-height:1.08;font-weight:800;margin:22px auto 16px;max-width:900px}
.tw-rotor{display:inline-block;position:relative;color:transparent;background:var(--tw-grad);-webkit-background-clip:text;background-clip:text;white-space:nowrap}
.tw-rotor span{display:inline-block;transition:opacity .35s,transform .45s var(--tw-ease)}
.tw-rotor span.out{opacity:0;transform:translateY(-14px)}
.tw-rotor span.pre{opacity:0;transform:translateY(14px);transition:none}
.tw-hero .lead{font-size:clamp(1.02rem,1.6vw,1.2rem);color:var(--text-dim);max-width:640px;margin:0 auto 30px;line-height:1.6}
.tw-search{position:relative;max-width:680px;margin:0 auto}
.tw-search-box{display:flex;align-items:center;gap:12px;background:var(--surface-solid);border:2px solid var(--surface-border);border-radius:18px;padding:0 10px 0 20px;height:64px;box-shadow:0 18px 50px rgba(60,50,160,.14);transition:border-color .2s,box-shadow .25s}
.tw-search-box:focus-within{border-color:var(--accent);box-shadow:0 18px 50px rgba(91,61,245,.24),0 0 0 5px color-mix(in srgb,var(--accent) 14%,transparent)}
.tw-search-box svg{color:var(--text-faint);flex:none}
.tw-search-box input{flex:1;border:0;outline:0;background:transparent;font:500 1.05rem var(--font-body);color:var(--text);height:100%;min-width:0}
.tw-search-box .btn{height:46px;padding:0 22px;border-radius:13px}
.tw-suggest{position:absolute;left:0;right:0;top:calc(100% + 10px);background:var(--surface-solid);border:1px solid var(--surface-border);border-radius:18px;box-shadow:0 24px 60px rgba(16,20,50,.2);padding:8px;text-align:left;z-index:20;display:none;max-height:420px;overflow:auto}
.tw-suggest.show{display:block;animation:twDrop .22s var(--tw-ease)}
.tw-suggest a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;color:var(--text);text-decoration:none}
.tw-suggest a:hover,.tw-suggest a.act{background:var(--bg-alt)}
.tw-suggest strong{font-size:.95rem;display:block}
.tw-suggest small{color:var(--text-faint);font-size:.8rem}
.tw-suggest .none{padding:16px;color:var(--text-faint);text-align:center}
.tw-quick{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:22px}
.tw-quick span{font-size:.85rem;color:var(--text-faint);align-self:center;margin-right:4px}
.tw-quick a{display:inline-flex;align-items:center;gap:7px;padding:7px 13px 7px 8px;border-radius:99px;background:var(--surface-solid);border:1px solid var(--surface-border);color:var(--text);font-weight:600;font-size:.85rem;text-decoration:none;transition:transform .2s var(--tw-ease),box-shadow .2s,border-color .2s}
.tw-quick a:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:var(--shadow-soft)}
.tw-quick .tw-ico{width:22px;height:22px;border-radius:6px}

/* ---------- Sections ---------- */
.section{padding:72px 0}
.tw-eyebrow{display:block;font:700 .78rem var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.sec-head,.section-head{margin-bottom:34px;align-items:flex-end}
.sec-head h2,.section-head h2,.tw-h2{font-size:clamp(1.7rem,3.2vw,2.5rem);font-weight:800;letter-spacing:-.035em;line-height:1.12}
.sec-head a,.section-head a.btn{font-weight:700}
.tw-center{text-align:center}
.tw-center .tw-sub{margin:12px auto 0}
.tw-sub{color:var(--text-dim);max-width:560px;line-height:1.6;font-size:1.04rem}
.alt-band,.tw-band{background:var(--bg-alt)}

/* ---------- Category cards ---------- */
.tw-cats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.tw-cat{position:relative;display:flex;flex-direction:column;gap:10px;padding:24px;border-radius:22px;background:var(--surface-solid);border:1.5px solid var(--surface-border);text-decoration:none;color:var(--text);overflow:hidden;transition:transform .35s var(--tw-ease),box-shadow .35s var(--tw-ease),border-color .3s}
.tw-cat::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 100% 0%,color-mix(in srgb,var(--c) 22%,transparent),transparent 60%);opacity:.7;transition:opacity .3s}
.tw-cat>*{position:relative}
.tw-cat:hover{transform:translateY(-8px);box-shadow:0 22px 50px color-mix(in srgb,var(--c) 28%,transparent);border-color:var(--c)}
.tw-cat-ic{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;background:var(--c);color:#fff;font-size:1.6rem;box-shadow:0 10px 22px color-mix(in srgb,var(--c) 45%,transparent);transition:transform .4s var(--tw-ease)}
.tw-cat:hover .tw-cat-ic{transform:rotate(-8deg) scale(1.1)}
.tw-cat h3{font-size:1.2rem;font-weight:800}
.tw-cat p{font-size:.9rem;color:var(--text-dim);line-height:1.5;margin:0;flex:1}
.tw-cat-foot{display:flex;align-items:center;justify-content:space-between;font-size:.85rem;font-weight:700;color:var(--c)}
.tw-cat-foot i{font-style:normal;transition:transform .25s var(--tw-ease)}
.tw-cat:hover .tw-cat-foot i{transform:translateX(5px)}
@media(max-width:1000px){.tw-cats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.tw-cats{gap:12px}.tw-cat{padding:18px}.tw-cat p{display:none}}

/* ---------- Stats ---------- */
.tw-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding:34px;border-radius:26px;background:var(--tw-grad);color:#fff;position:relative;overflow:hidden;box-shadow:0 26px 60px rgba(91,61,245,.32)}
.tw-stats::after{content:"";position:absolute;width:420px;height:420px;border-radius:50%;background:rgba(255,255,255,.12);right:-120px;top:-200px}
.tw-stat{text-align:center;position:relative;z-index:1}
.tw-stat b{display:block;font:800 clamp(2rem,4vw,3rem) var(--font-display);letter-spacing:-.04em}
.tw-stat span{opacity:.85;font-weight:600;font-size:.95rem}
@media(max-width:700px){.tw-stats{grid-template-columns:repeat(2,1fr);padding:26px 18px;gap:22px}}

/* ---------- Pills + tool grid ---------- */
.tw-pills,.filter-bar,.chip-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:0 0 30px}
.tw-pills button,.filter-bar .chip,.blog-chips .chip,.chip-row .chip{border:1.5px solid var(--surface-border);background:var(--surface-solid);color:var(--text-dim);padding:9px 18px;border-radius:99px;font:600 .9rem var(--font-body);cursor:pointer;transition:all .22s var(--tw-ease)}
.tw-pills button:hover,.filter-bar .chip:hover,.blog-chips .chip:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
.tw-pills button.active,.filter-bar .chip.active,.blog-chips .chip.active,.chip-row .chip.active{background:var(--tw-grad);color:#fff;border-color:transparent;box-shadow:0 8px 20px rgba(91,61,245,.3)}
.tw-grid,.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.tw-tool,.tool-card{position:relative;display:flex;flex-direction:column;gap:6px;padding:18px 18px 16px;border-radius:18px;background:var(--surface-solid)!important;border:1.5px solid var(--surface-border)!important;box-shadow:none!important;text-decoration:none;color:var(--text);transition:transform .3s var(--tw-ease),box-shadow .3s var(--tw-ease),border-color .25s;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.tw-tool:hover,.tool-card:hover{transform:translateY(-5px)!important;border-color:var(--accent)!important;box-shadow:0 16px 40px rgba(91,61,245,.16)!important}
.tw-tool-top,.tool-card .card-icon{margin-bottom:6px}
.tool-card .card-icon,.game-card .card-icon{width:48px;height:48px;border-radius:14px;box-shadow:none}
.tw-tool .tw-ico{width:48px;height:48px;border-radius:14px}
.tw-tool h3,.tool-card h3{font-size:1.02rem;font-weight:700;margin:0}
.tw-tool h3 a,.tool-card h3 a{color:var(--text);text-decoration:none}
.tw-tool p,.tool-card p{font-size:.86rem;line-height:1.5;color:var(--text-dim);margin:0;flex:1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tw-tool-foot,.tool-card .card-foot{display:flex;align-items:center;justify-content:space-between;margin-top:8px}
.tw-tag,.tool-card .card-cat,.game-card .card-cat{font:700 .68rem var(--font-body);letter-spacing:.08em;color:var(--c,var(--accent));background:color-mix(in srgb,var(--c,var(--accent)) 12%,transparent);padding:4px 9px;border-radius:99px}
.tw-open,.card-open{font-size:.82rem;font-weight:700;color:var(--accent);display:inline-flex;align-items:center;gap:4px;opacity:0;transform:translateX(-6px);transition:all .25s var(--tw-ease)}
.tw-tool:hover .tw-open,.tool-card:hover .card-open,.game-card:hover .card-open{opacity:1;transform:none}
.tw-hot{position:absolute;top:14px;right:14px;font:700 .66rem var(--font-body);color:#fff;background:linear-gradient(135deg,#f97316,#ef4444);padding:3px 8px;border-radius:99px;letter-spacing:.04em}
.tw-more{display:flex;justify-content:center;margin-top:30px}

/* ---------- Feature cards ("free tools you'd usually pay for") ---------- */
.tw-feats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.tw-feat{display:flex;flex-direction:column;border-radius:22px;background:var(--surface-solid);border:1.5px solid var(--surface-border);overflow:hidden;text-decoration:none;color:var(--text);transition:transform .35s var(--tw-ease),box-shadow .35s var(--tw-ease)}
.tw-feat:hover{transform:translateY(-8px);box-shadow:var(--shadow-lift)}
.tw-feat-art{height:140px;display:grid;place-items:center;background:linear-gradient(135deg,var(--c1),var(--c2));position:relative;overflow:hidden}
.tw-feat-art::after{content:"";position:absolute;width:150px;height:150px;border-radius:50%;background:rgba(255,255,255,.18);right:-40px;bottom:-60px;transition:transform .5s var(--tw-ease)}
.tw-feat:hover .tw-feat-art::after{transform:scale(1.5)}
.tw-feat-art img,.tw-feat-art .tw-emo{width:68px;height:68px;border-radius:20px;box-shadow:0 14px 30px rgba(0,0,0,.25);position:relative;z-index:1;transition:transform .45s var(--tw-ease);font-size:2rem}
.tw-feat:hover .tw-feat-art img,.tw-feat:hover .tw-feat-art .tw-emo{transform:scale(1.14) rotate(-6deg)}
.tw-feat-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:6px;flex:1}
.tw-feat h3{font-size:1.08rem;font-weight:800}
.tw-feat p{font-size:.88rem;color:var(--text-dim);line-height:1.5;margin:0;flex:1}
.tw-feat span.go{font-weight:700;font-size:.88rem;color:var(--accent);margin-top:8px}
@media(max-width:1000px){.tw-feats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.tw-feats{grid-template-columns:1fr}}

/* ---------- Steps / why ---------- */
.tw-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;counter-reset:s}
.tw-step{padding:28px;border-radius:22px;background:var(--surface-solid);border:1.5px solid var(--surface-border);position:relative;transition:transform .3s var(--tw-ease),box-shadow .3s}
.tw-step:hover{transform:translateY(-5px);box-shadow:var(--shadow-soft)}
.tw-step::before{counter-increment:s;content:counter(s);display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--tw-grad);color:#fff;font:800 1.2rem var(--font-display);margin-bottom:16px;box-shadow:0 10px 22px rgba(91,61,245,.35)}
.tw-step h3{font-size:1.1rem;margin:0 0 6px;font-weight:800}
.tw-step p{margin:0;color:var(--text-dim);font-size:.94rem;line-height:1.55}
.tw-why{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:20px}
.tw-why>div{padding:22px;border-radius:20px;background:var(--surface-solid);border:1.5px solid var(--surface-border)}
.tw-why .e{font-size:1.6rem;display:block;margin-bottom:8px}
.tw-why strong{display:block;margin-bottom:4px;font-family:var(--font-display)}
.tw-why span.t{color:var(--text-dim);font-size:.9rem;line-height:1.5}
@media(max-width:900px){.tw-steps{grid-template-columns:1fr}.tw-why{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.tw-why{grid-template-columns:1fr}}

/* ---------- Games + blog cards ---------- */
.game-card,.blog-card{border-radius:20px!important;background:var(--surface-solid)!important;border:1.5px solid var(--surface-border)!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;transition:transform .3s var(--tw-ease),box-shadow .3s var(--tw-ease),border-color .25s!important}
.game-card:hover,.blog-card:hover{transform:translateY(-6px)!important;border-color:var(--accent)!important;box-shadow:0 18px 44px rgba(91,61,245,.16)!important}
.game-card .btn-block{border-radius:12px}

/* ---------- CTA band ---------- */
.cta-band{background:var(--tw-grad)!important;position:relative;overflow:hidden;padding:56px 0!important;margin-top:40px}
.cta-band::before,.cta-band::after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.12)}
.cta-band::before{width:320px;height:320px;left:-80px;bottom:-180px}
.cta-band::after{width:260px;height:260px;right:6%;top:-140px}
.cta-band .container{position:relative;z-index:1}
.cta-band h2{font-size:clamp(1.5rem,3vw,2.2rem)!important}
.cta-band p{color:rgba(255,255,255,.88)!important}
.cta-band .btn-primary{background:#fff!important;color:#3b2bd4!important;box-shadow:0 12px 30px rgba(0,0,0,.2)}

/* ---------- Inner page heroes (tools, games, blog, tool pages) ---------- */
.games-hero,.page-hero,.blog-hero,.about-hero,.legal-hero{position:relative;overflow:hidden;padding:54px 0 30px!important;background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 8%,var(--bg)),var(--bg))!important;text-align:center!important}
.games-hero::before,.blog-hero::before{content:"";position:absolute;width:380px;height:380px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 24%,transparent),transparent 70%);right:-100px;top:-180px;pointer-events:none}
.games-hero .container,.blog-hero .container{position:relative}
.games-hero h1,.blog-hero h1{font-size:clamp(2rem,4.4vw,3.1rem);font-weight:800}
.games-hero p,.blog-hero p{color:var(--text-dim);max-width:620px;margin-left:auto;margin-right:auto}
.hero-kicker{display:inline-block;font:700 .76rem var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent);padding:6px 14px;border-radius:99px;margin-bottom:14px}
.tool-hero{justify-content:center!important;text-align:left;flex-wrap:wrap;margin-top:6px}
.tool-hero .card-icon{width:68px;height:68px;border-radius:20px;box-shadow:0 14px 30px rgba(60,50,160,.22)}
.tool-hero h1{font-size:clamp(1.7rem,3.6vw,2.5rem)}
.tool-art{display:none}
.crumbs-lite{display:inline-flex;gap:6px;align-items:center;margin-bottom:18px;padding:6px 14px;border-radius:99px;background:var(--surface-solid);border:1px solid var(--surface-border);font-size:.82rem}
.game-search,.blog-search{max-width:640px!important;margin:0 auto 22px!important;height:56px!important;border-radius:16px!important;background:var(--surface-solid)!important;border:2px solid var(--surface-border)!important;box-shadow:0 10px 30px rgba(60,50,160,.08)!important;transition:border-color .2s,box-shadow .2s}
.game-search:focus-within,.blog-search:focus-within{border-color:var(--accent)!important;box-shadow:0 10px 30px rgba(91,61,245,.2),0 0 0 4px color-mix(in srgb,var(--accent) 14%,transparent)!important}
.ws-body{background:var(--surface-solid)!important;border:1.5px solid var(--surface-border)!important;box-shadow:0 14px 44px rgba(60,50,160,.08)!important;border-radius:24px!important;backdrop-filter:none!important}
.glass{background:var(--surface-solid);border-color:var(--surface-border)}
.rel-card{background:var(--surface-solid)!important;border:1.5px solid var(--surface-border)!important;border-radius:16px!important;box-shadow:none!important;transition:transform .25s var(--tw-ease),border-color .2s,box-shadow .25s}
.rel-card:hover{transform:translateY(-4px)!important;border-color:var(--accent)!important;box-shadow:0 12px 30px rgba(91,61,245,.14)!important}
.seo-content h2{font-family:var(--font-display);font-weight:800}
.recent-strip,.sp-recent-card{border-radius:14px}
.sp-recent-card{background:var(--surface-solid)!important;border:1.5px solid var(--surface-border)!important}

/* ---------- Footer ---------- */
.site-footer.tw-footer{background:var(--bg-alt)!important;border-top:1px solid var(--surface-border);margin-top:0;padding:60px 0 0}
.tw-foot-top{display:grid;grid-template-columns:1.1fr 2.4fr;gap:48px;padding-bottom:42px}
.tw-foot-brand .about-line{color:var(--text-dim);font-size:.92rem;line-height:1.65;max-width:340px;margin:14px 0 16px}
.tw-foot-badges{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.tw-foot-badges span{font-size:.78rem;font-weight:600;padding:6px 12px;border-radius:99px;background:var(--surface-solid);border:1px solid var(--surface-border);color:var(--text-dim)}
.tw-copylink{border:1.5px solid var(--surface-border);background:var(--surface-solid);color:var(--text);font:700 .85rem var(--font-body);padding:10px 16px;border-radius:12px;cursor:pointer;transition:all .2s}
.tw-copylink:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
.tw-foot-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.tw-footer .footer-col h5{font:800 .78rem var(--font-body);letter-spacing:.09em;text-transform:uppercase;color:var(--text);margin:0 0 14px}
.tw-footer .footer-col a{display:block;color:var(--text-dim);font-size:.9rem;padding:5px 0;text-decoration:none;transition:color .2s,transform .2s var(--tw-ease)}
.tw-footer .footer-col a:hover{color:var(--accent);transform:translateX(4px)}
.tw-footer .footer-bottom{border-top:1px solid var(--surface-border);padding:20px 0 26px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;color:var(--text-faint);font-size:.85rem}
@media(max-width:980px){.tw-foot-top{grid-template-columns:1fr;gap:30px}.tw-foot-cols{grid-template-columns:repeat(2,1fr)}}
.tw-top{position:fixed;right:18px;bottom:18px;width:46px;height:46px;border-radius:14px;border:0;background:var(--tw-grad);color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 12px 28px rgba(91,61,245,.42);opacity:0;transform:translateY(16px) scale(.9);pointer-events:none;transition:all .3s var(--tw-ease);z-index:90}
.tw-top.show{opacity:1;transform:none;pointer-events:auto}
.tw-top:hover{transform:translateY(-4px)}
.sp-share:not(.inline){bottom:76px}

/* ---------- Dark mode touch-ups ---------- */
:root[data-theme="dark"] .site-header.tw-header.scrolled{box-shadow:0 6px 24px rgba(0,0,0,.4)}
:root[data-theme="dark"] .tw-menu{box-shadow:0 24px 60px rgba(0,0,0,.6)}
:root[data-theme="dark"] .tw-hero .blob{opacity:.3}
:root[data-theme="dark"] .tw-search-box{box-shadow:0 18px 50px rgba(0,0,0,.5)}
:root[data-theme="dark"] .tw-tool:hover,:root[data-theme="dark"] .tool-card:hover{box-shadow:0 16px 40px rgba(0,0,0,.5)!important}

/* ---------- overflow guards ---------- */
html,body{overflow-x:clip}
.tw-drawer:not(.open){visibility:hidden;transition:transform .3s var(--tw-ease),visibility 0s .3s}
.tw-drawer.open{visibility:visible;transition:transform .3s var(--tw-ease)}
.games-hero .container,.blog-hero .container,.about-hero .container,.legal-hero .container{text-align:center}
.tool-hero{text-align:left}