/* ZapKitt — Category landing page → TINYWOW (clean light tool-grid · blue accent) */
/* Linked AFTER each page's inline <style> so equal/!important rules win. */
:root{
  --c-bg:#F6F8FC;--c-surface:#FFFFFF;--c-surface-hover:#FFFFFF;--c-alt:#F3F6FB;
  --c-accent:#6C3CE1;--c-accent-hover:#5527CC;--c-accent-light:#F1ECFF;--c-accent-dark:#5527CC;
  --c-text:#141A2E;--c-text2:#5B6472;--c-text3:#8A93A3;--c-border:#E7ECF3;--c-border-strong:#D9E0EA;
  --c-sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;--c-ease:cubic-bezier(.16,1,.3,1);
  --c-shadow-soft:0 1px 3px rgba(20,26,46,.05),0 1px 2px rgba(20,26,46,.04);
  --c-shadow-lg:0 20px 48px -16px rgba(20,26,46,.16),0 6px 16px -8px rgba(20,26,46,.08);
}
body{background:var(--c-bg)!important;color:var(--c-text)!important;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--c-accent);color:#fff}
html{scroll-behavior:smooth}
h1,h2,h3,h4,.logo,.logo-text,.logo b,.hero h1,.wc h4,.card h3{font-family:var(--c-sans)!important}

/* Nav */
.nav{background:rgba(255,255,255,.85)!important;backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%);border-bottom:1px solid var(--c-border)!important}
.nav-in{height:70px!important}
.logo{color:var(--c-text)!important;font-weight:800!important;letter-spacing:-.02em}
.logo svg{transition:transform .4s var(--c-ease)}
.logo:hover svg{transform:rotate(-6deg) scale(1.05)}
.nl a{color:var(--c-text2)!important;font-weight:600;transition:color .18s}
.nl a:hover{color:var(--c-accent)!important}
#topSupport{background:var(--c-surface)!important;border-bottom:1px solid var(--c-border)!important}
#topSupport span{color:var(--c-text2)!important}

/* Hero */
.hero{padding:clamp(56px,8vw,96px) 24px clamp(32px,4vw,44px)!important;max-width:820px!important;position:relative}
.hero h1{font-size:clamp(38px,6vw,64px)!important;font-weight:800!important;line-height:1.06!important;letter-spacing:-.03em!important;color:var(--c-text)!important}
.hero h1 em{font-style:normal!important;color:var(--c-accent)!important;-webkit-text-fill-color:var(--c-accent)!important;background:none!important}
.hero p{color:var(--c-text2)!important;font-size:clamp(16px,1.8vw,19px)!important;line-height:1.6!important}
.chip{background:var(--c-accent-light)!important;border:none!important;color:var(--c-accent-dark)!important;border-radius:999px!important;padding:7px 16px!important;font-size:12px!important;font-weight:700!important}
.trust{display:none!important}

/* Search bar (TinyWow) */
.tw-catsearch{max-width:760px;margin:0 auto clamp(28px,4vw,44px);padding:0 24px}
.tw-search{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--c-border);border-radius:999px;padding:10px 10px 10px 22px;box-shadow:var(--c-shadow-lg)}
.tw-search svg{width:22px;height:22px;color:var(--c-accent);flex-shrink:0}
.tw-search input{flex:1;border:none;outline:none;background:none;font-family:var(--c-sans);font-size:16px;color:var(--c-text);padding:8px 4px}
.tw-search input::placeholder{color:var(--c-text3)}
.tw-search button{background:var(--c-accent);color:#fff;border:none;border-radius:999px;padding:13px 30px;font-family:var(--c-sans);font-size:15px;font-weight:700;cursor:pointer;transition:background .2s,transform .2s}
.tw-search button:hover{background:var(--c-accent-hover);transform:translateY(-1px)}

/* Floating decorative shapes (TinyWow) */
.hero{overflow:visible}
.tw-shape{position:absolute;z-index:0;pointer-events:none;opacity:.9;animation:twFloat 7s ease-in-out infinite}
.tw-shape.s1{top:22%;left:14%;width:0;height:0;border-left:11px solid transparent;border-right:11px solid transparent;border-bottom:19px solid #FF8A3D;--r:18deg;transform:rotate(18deg)}
.tw-shape.s2{top:30%;right:12%;width:26px;height:26px;background:#F368A0;border-radius:6px;--r:24deg;transform:rotate(24deg);animation-delay:1.1s}
.tw-shape.s3{top:56%;left:9%;width:9px;height:9px;border-radius:50%;background:#E8215B;animation-delay:.6s}
.tw-shape.s4{top:40%;right:8%;width:22px;height:22px;background:#7C5CFC;border-radius:5px;--r:-16deg;transform:rotate(-16deg);animation-delay:.3s}
@keyframes twFloat{0%,100%{transform:translateY(0) rotate(var(--r,0deg))}50%{transform:translateY(-14px) rotate(var(--r,0deg))}}
@media(max-width:768px){.tw-shape{display:none}}
@media(prefers-reduced-motion:reduce){.tw-shape{animation:none}}

/* Tool cards */
.card{background:var(--c-surface)!important;border:1px solid var(--c-border)!important;border-radius:16px!important;padding:24px 22px!important;box-shadow:var(--c-shadow-soft);transition:transform .3s var(--c-ease),box-shadow .3s,border-color .3s!important}
.card:hover{transform:translateY(-6px)!important;box-shadow:var(--c-shadow-lg)!important;border-color:var(--c-border-strong)!important}
.card-icon{width:50px!important;height:50px!important;border-radius:14px!important;transition:transform .3s var(--c-ease)}
.card:hover .card-icon{transform:scale(1.08) rotate(-4deg)}
.card h3{font-size:15.5px!important;font-weight:800!important;color:var(--c-text)!important;margin-bottom:4px!important}
.card p{color:var(--c-text2)!important;font-size:12.5px!important}
.card-tag{background:var(--c-accent-light)!important;color:var(--c-accent-dark)!important;border-radius:999px!important;padding:3px 11px!important;font-weight:700!important}
/* cycling pastel icon tiles (TinyWow-style variety) */
.grid .card:nth-child(6n+1) .card-icon{background:#F1ECFF!important}.grid .card:nth-child(6n+1) .card-icon svg{stroke:#6C3CE1!important}
.grid .card:nth-child(6n+2) .card-icon{background:#F1ECFF!important}.grid .card:nth-child(6n+2) .card-icon svg{stroke:#7C5CFC!important}
.grid .card:nth-child(6n+3) .card-icon{background:#FFF1E6!important}.grid .card:nth-child(6n+3) .card-icon svg{stroke:#FF6B35!important}
.grid .card:nth-child(6n+4) .card-icon{background:#E9FBF3!important}.grid .card:nth-child(6n+4) .card-icon svg{stroke:#10B981!important}
.grid .card:nth-child(6n+5) .card-icon{background:#FDEAF0!important}.grid .card:nth-child(6n+5) .card-icon svg{stroke:#E8215B!important}
.grid .card:nth-child(6n+6) .card-icon{background:#E4F7F4!important}.grid .card:nth-child(6n+6) .card-icon svg{stroke:#17A398!important}
/* colored top-accent line + colored glow per card (premium hover) */
.grid .card{position:relative;overflow:hidden}
.grid .card::after{content:'';position:absolute;top:0;left:0;right:0;height:3px;opacity:0;transition:opacity .3s var(--c-ease);background:var(--tc,var(--c-accent))}
.grid .card:hover::after{opacity:1}
.grid .card:nth-child(6n+1){--tc:#6C3CE1}.grid .card:nth-child(6n+2){--tc:#7C5CFC}.grid .card:nth-child(6n+3){--tc:#FF6B35}.grid .card:nth-child(6n+4){--tc:#10B981}.grid .card:nth-child(6n+5){--tc:#E8215B}.grid .card:nth-child(6n+6){--tc:#17A398}
.grid .card:hover{border-color:color-mix(in srgb,var(--tc) 45%,transparent)!important;box-shadow:0 20px 42px -16px color-mix(in srgb,var(--tc) 48%,rgba(20,26,46,.32))!important}
.grid .card:nth-child(6n+1) .card-tag{background:#F1ECFF!important;color:#6C3CE1!important}
.grid .card:nth-child(6n+2) .card-tag{background:#F1ECFF!important;color:#7C5CFC!important}
.grid .card:nth-child(6n+3) .card-tag{background:#FFF1E6!important;color:#FF6B35!important}
.grid .card:nth-child(6n+4) .card-tag{background:#E9FBF3!important;color:#10B981!important}
.grid .card:nth-child(6n+5) .card-tag{background:#FDEAF0!important;color:#E8215B!important}
.grid .card:nth-child(6n+6) .card-tag{background:#E4F7F4!important;color:#17A398!important}

/* Section headers */
.why h2,.content h2,.faq h2{font-weight:800!important;letter-spacing:-.02em!important;color:var(--c-text)!important}
.why h2{font-size:clamp(26px,3.6vw,40px)!important;margin-bottom:32px!important}
.content h2{font-size:clamp(22px,2.6vw,30px)!important}
.content p{color:var(--c-text2)!important;font-size:15.5px!important;line-height:1.8!important}
.content a{color:var(--c-accent)!important}

/* Why cards */
.wc{background:var(--c-surface)!important;border:1px solid var(--c-border)!important;border-radius:16px!important;padding:26px!important;box-shadow:var(--c-shadow-soft);transition:transform .3s var(--c-ease),box-shadow .3s,border-color .3s!important}
.wc:hover{transform:translateY(-6px)!important;box-shadow:var(--c-shadow-lg)!important;border-color:var(--c-border-strong)!important}
.wc .wi{background:var(--c-accent-light)!important;color:var(--c-accent)!important;border-radius:12px!important;width:46px!important;height:46px!important}
.wc h4{font-size:16px!important;font-weight:800!important;color:var(--c-text)!important}
.wc p{color:var(--c-text2)!important;font-size:13.5px!important}

/* CTA box */
.cta-box{background:linear-gradient(135deg,var(--c-accent) 0%,#8B5CF6 100%)!important;border:none!important;border-radius:24px!important;padding:clamp(40px,6vw,64px)!important;box-shadow:0 24px 50px -18px rgba(47,136,255,.5)}
.cta-box h3{font-size:clamp(24px,3.4vw,36px)!important;font-weight:800!important;letter-spacing:-.02em;color:#fff!important}
.cta-box p{color:rgba(255,255,255,.9)!important}
.cta-btn{background:#fff!important;color:var(--c-accent)!important;border-radius:10px!important;font-weight:700!important;transition:transform .25s var(--c-ease),box-shadow .25s!important}
.cta-btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(0,0,0,.16)}

/* FAQ */
.faq h2{font-size:clamp(24px,3vw,34px)!important}
.faq details{background:var(--c-surface)!important;border:1px solid var(--c-border)!important;border-radius:14px!important;padding:16px 18px!important;box-shadow:var(--c-shadow-soft);transition:border-color .2s}
.faq details[open]{border-color:var(--c-border-strong)!important}
.faq summary{color:var(--c-text)!important;font-size:15px!important;font-weight:600}
.faq p{color:var(--c-text2)!important}

/* Explore chips + footer */
.foot{background:var(--c-surface)!important;border-top:1px solid var(--c-border)!important;color:var(--c-text2)!important}
.foot a{color:var(--c-text3)!important}
.foot a:hover{color:var(--c-accent)!important}

*:focus-visible{outline:2px solid var(--c-accent);outline-offset:2px;border-radius:4px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.card,.wc,.card-icon{transition:none!important}}