.react-tools{min-height:100vh;padding:clamp(4rem,8vh,8rem) 0;background:linear-gradient(180deg,#fff,#f8fafc);color:var(--theme-text-primary, #0f172a)}.react-tools__inner{max-width:1200px;margin:0 auto;padding:0 var(--spacing-6, 1.5rem)}.react-tools__header{margin-bottom:clamp(3rem,8vh,6rem);text-align:center}.react-tools__header .section-title{margin:0 0 1.5rem;background:linear-gradient(135deg,var(--theme-brand-primary, #0d6efd),var(--theme-brand-secondary, #4e73df));-webkit-background-clip:text;background-clip:text;color:transparent;font-size:clamp(2.5rem,6vw,4rem);font-weight:800;letter-spacing:-.02em;line-height:1}.react-tools__header p{max-width:600px;margin:0 auto;color:var(--theme-text-muted, #64748b);font-size:clamp(1rem,3vw,1.25rem);line-height:1.6}.react-tools__group{margin-bottom:clamp(3rem,6vh,5rem)}.react-tools__category-title{position:relative;margin:0 0 clamp(1.5rem,3vh,2.5rem);padding-left:1rem;color:var(--theme-text-primary, #0f172a);font-size:clamp(1.5rem,4vw,2rem);font-weight:700;letter-spacing:-.01em}.react-tools__category-title:before{position:absolute;top:20%;bottom:20%;left:0;width:4px;border-radius:2px;background:linear-gradient(135deg,var(--theme-brand-primary, #0d6efd),var(--theme-brand-secondary, #4e73df));content:""}.react-tools__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(350px,100%),1fr));gap:clamp(1.5rem,4vw,2.5rem);margin-top:clamp(1rem,2vh,1.5rem);align-items:stretch}.react-tools__card{position:relative;display:flex;flex-direction:column;min-width:0;height:100%;padding:clamp(1.5rem,4vw,2.5rem);overflow:hidden;border:1px solid var(--theme-card-border, #e2e8f0);border-radius:24px;background:var(--theme-card-bg, #fff);box-shadow:0 10px 30px #00000014;transition:transform .4s cubic-bezier(.4,0,.2,1),border-color .4s,box-shadow .4s}.react-tools__card:hover,.react-tools__card:focus-within{transform:translateY(-8px) scale(1.02);border-color:var(--theme-border-focus, #0d6efd);box-shadow:0 20px 50px #007bff26}.react-tools__icon{display:block;width:clamp(60px,15vw,80px);height:clamp(60px,15vw,80px);margin-bottom:clamp(1rem,3vw,1.5rem);border-radius:16px;object-fit:contain;filter:drop-shadow(0 4px 12px rgb(59 130 246 / 20%));transition:transform .3s cubic-bezier(.4,0,.2,1),filter .3s}.react-tools__card:hover .react-tools__icon{transform:scale(1.1) rotate(5deg);filter:drop-shadow(0 8px 20px rgb(59 130 246 / 30%))}.react-tools__title{margin:0 0 clamp(.75rem,2vw,1rem);color:var(--theme-text-primary, #0f172a);font-size:clamp(1.25rem,4vw,1.5rem);font-weight:700;line-height:1.3}.react-tools__description{flex-grow:1;margin:0 0 clamp(1rem,3vw,1.5rem);color:var(--theme-text-muted, #64748b);font-size:clamp(.9rem,2.5vw,1rem);line-height:1.6}.react-tools__features{flex-grow:1;width:100%;margin:0 0 clamp(1.5rem,4vw,2rem);padding:clamp(1rem,3vw,1.5rem);border:1px solid var(--theme-border-muted, #e2e8f0);border-radius:16px;background:#f8fafccc;list-style:none}.react-tools__features li{position:relative;margin:0 0 .75rem;padding-left:2rem;color:var(--theme-text-secondary, #334155);font-size:clamp(.85rem,2.2vw,.9rem);line-height:1.5}.react-tools__features li:last-child{margin-bottom:0}.react-tools__features li:before{position:absolute;top:.1rem;left:0;display:flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:var(--theme-brand-primary, #0d6efd);box-shadow:0 2px 6px #3b82f64d;color:#fff;content:"✓";font-size:11px;font-weight:600}.react-tools__button{position:relative;display:inline-flex;align-items:center;justify-content:center;align-self:flex-start;min-width:140px;min-height:44px;margin-top:auto;padding:clamp(.75rem,2vw,1rem) clamp(1.5rem,4vw,2rem);overflow:hidden;border-radius:12px;background:linear-gradient(135deg,var(--theme-brand-primary, #0d6efd),var(--theme-brand-secondary, #4e73df));box-shadow:0 4px 15px #3b82f64d;color:#fff;font-size:clamp(.9rem,2.5vw,1rem);font-weight:600;text-decoration:none;transition:transform .3s cubic-bezier(.4,0,.2,1),box-shadow .3s}.react-tools__button:before{position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgb(255 255 255 / 20%),transparent);content:"";transition:left .5s ease}.react-tools__button:hover,.react-tools__button:focus-visible{transform:translateY(-3px);box-shadow:0 8px 25px #3b82f666;color:#fff}.react-tools__button:hover:before,.react-tools__button:focus-visible:before{left:100%}.react-tools__button:focus-visible{outline:3px solid var(--theme-border-focus, #0d6efd);outline-offset:3px}[data-theme=dark] .react-tools{background:linear-gradient(180deg,#0f172a,#1e293b)}[data-theme=dark] .react-tools__category-title{color:#93c5fdf2}[data-theme=dark] .react-tools__card{border-color:#4755694d;background:#1e293bb3;box-shadow:0 10px 30px #0000004d,inset 0 1px #ffffff1a;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}[data-theme=dark] .react-tools__card:hover,[data-theme=dark] .react-tools__card:focus-within{border-color:var(--theme-border-focus, #3b82f6);box-shadow:0 20px 50px #0006,inset 0 1px #fff3}[data-theme=dark] .react-tools__title{color:#f8fafc}[data-theme=dark] .react-tools__description,[data-theme=dark] .react-tools__features li{color:#cbd5e1}[data-theme=dark] .react-tools__features{border-color:#4755694d;background:#3341557f}@media (max-width: 768px){.react-tools{padding:clamp(3rem,6vh,5rem) 0}.react-tools__inner{padding:0 1rem}.react-tools__header{margin-bottom:clamp(2rem,5vh,3rem)}.react-tools__grid{grid-template-columns:1fr}.react-tools__card{padding:clamp(1.25rem,4vw,1.75rem)}}@media (max-width: 480px){.react-tools{padding:2.5rem 0}.react-tools__inner{padding:0 .75rem}.react-tools__header{margin-bottom:2rem}.react-tools__card{padding:1.25rem}.react-tools__features{padding:1rem}}@media (prefers-reduced-motion: reduce){.react-tools__card,.react-tools__icon,.react-tools__button,.react-tools__button:before{transition:none}.react-tools__card:hover,.react-tools__card:focus-within,.react-tools__button:hover,.react-tools__button:focus-visible,.react-tools__card:hover .react-tools__icon{transform:none}}@media (prefers-contrast: high){.react-tools__card{border-width:2px}.react-tools__button{border:2px solid currentColor}}@media (hover: none) or (pointer: coarse){.react-tools__card:hover{transform:none}}