/* ==========================================================
   Working Tools Box — Premium Theme
   ========================================================== */

:root{
  --grad-a:#7c3aed;
  --grad-b:#c026d3;
  --grad-c:#ec4899;
  --gradient: linear-gradient(90deg, var(--grad-a), var(--grad-b), var(--grad-c));
  --ink:#2a1f4d;
  --muted:#6b5b95;
  --border:#ecd5f5;
  --surface:rgba(255,255,255,.84);
  --surface-soft:#fbf3ff;
  --shadow-sm: 0 2px 8px rgba(124,58,237,.07);
  --shadow-md: 0 10px 26px rgba(168,85,247,.18);
  --shadow-lg: 0 22px 48px rgba(192,38,211,.22);
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:100px;background:#fbf0fc}
body{
  margin:0;
  position:relative;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:transparent;
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
img,svg{display:block}

.container{width:min(1160px,calc(100% - 40px));margin:auto}

.text-gradient{
  background:var(--gradient);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* ---------- Focus & accessibility ---------- */
a:focus-visible,
button:focus-visible{
  outline:3px solid #c084fc;
  outline-offset:2px;
  border-radius:8px;
}

/* ---------- Buttons ---------- */
.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius:999px;
  padding:12px 22px;
  font-weight:700;
  font-size:14.5px;
  border:1px solid transparent;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
  white-space:nowrap;
}
.button-primary{
  background:var(--gradient);
  color:#fff;
  box-shadow:var(--shadow-md);
}
.button-primary:hover{transform:translateY(-1px);box-shadow:var(--shadow-lg)}
.button-secondary{
  background:var(--surface);
  color:var(--ink);
  border-color:var(--border);
}
.button-secondary:hover{border-color:var(--grad-a);color:var(--grad-a)}

.button-open{
  background:var(--gradient);
  color:#fff;
  width:100%;
  padding:13px 18px;
  border-radius:12px;
  box-shadow:var(--shadow-sm);
}
.button-open:hover{transform:translateY(-1px);box-shadow:var(--shadow-md)}

/* ---------- Hero ---------- */
.hero{
  padding:64px 0 56px;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:40px;
  align-items:center;
}
.eyebrow{
  display:inline-block;
  margin:0 0 14px;
  font-size:12px;
  font-weight:800;
  letter-spacing:1.2px;
  color:#7c3aed;
  background:linear-gradient(90deg,#f3e8ff,#fce7f3);
  padding:6px 12px;
  border-radius:999px;
}
h1,h2,h3,h4{line-height:1.15;letter-spacing:-.6px;margin:0}
h1{font-size:clamp(34px,4.6vw,52px);margin:0 0 18px;color:var(--ink)}
h2{font-size:clamp(26px,3.4vw,36px)}
h3.category-heading{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:20px;
  margin:36px 0 18px;
}
h4{font-size:19px;color:var(--ink)}
.category-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:10px;
  background:var(--gradient);
  flex-shrink:0;
}

.hero-text{
  font-size:17px;
  color:var(--muted);
  max-width:520px;
  margin:0 0 30px;
}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px}

.hero-visual{
  position:relative;
  min-height:280px;
}
.hero-visual svg{width:100%;height:auto}
.float-chip{animation:float 5s ease-in-out infinite}
.float-chip-a{animation-delay:.2s}
.float-chip-b{animation-delay:.9s}
.float-chip-c{animation-delay:1.5s}
@keyframes float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
}
@media (prefers-reduced-motion: reduce){
  .float-chip{animation:none}
}

/* ---------- Tools section ---------- */
.section{padding:20px 0 100px}
.section-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:8px;
  flex-wrap:wrap;
}
.section-subtext{color:var(--muted);font-size:15px;margin:10px 0 0}
.tool-count{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  font-weight:700;
  color:var(--ink);
  background:var(--surface-soft);
  border:1px solid var(--border);
  padding:9px 16px;
  border-radius:999px;
}

.tool-grid{
  display:grid;
  gap:20px;
}

.tool-card{
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  background:var(--surface);
  padding:26px;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:20px;
  box-shadow:var(--shadow-sm);
  transition:box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
.tool-card:hover{
  box-shadow:var(--shadow-lg);
  border-color:#e6b1f3;
  transform:translateY(-4px);
}

.tool-card-main{
  display:flex;
  gap:18px;
  align-items:flex-start;
  min-width:0;
}

.tool-icon{
  flex-shrink:0;
  width:56px;
  height:56px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:var(--shadow-sm);
}
.icon-blue{background:linear-gradient(135deg,#3b82f6,#2563eb)}
.icon-pink{background:linear-gradient(135deg,#f472b6,#db2777)}
.icon-green{background:linear-gradient(135deg,#34d399,#059669)}
.icon-orange{background:linear-gradient(135deg,#fb923c,#ea580c)}
.icon-indigo{background:linear-gradient(135deg,#818cf8,#4f46e5)}
.icon-red{background:linear-gradient(135deg,#f87171,#dc2626)}

.tool-info{min-width:0}
.tool-title-row{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:6px;
}
.tool-info p{margin:0 0 12px;color:var(--muted);font-size:14.5px}

.badge{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:11.5px;
  font-weight:800;
  padding:5px 11px;
  border-radius:999px;
  white-space:nowrap;
}
.badge-green{background:#dcfce7;color:#166534}
.badge-blue{background:#dbeafe;color:#1d4ed8}
.badge-purple{background:#f3e8ff;color:#6d28d9}
.badge-gray{background:#f5ecfb;color:#5b4a7d}

.tag-list{display:flex;flex-wrap:wrap;gap:8px}
.tag-list li{
  font-size:12px;
  font-weight:700;
  color:#4a3a73;
  background:#fbf3ff;
  border:1px solid var(--border);
  padding:5px 11px;
  border-radius:999px;
}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .hero{grid-template-columns:1fr;padding:44px 0 40px}
  .hero-visual{order:-1;max-width:440px;margin:0 auto}
}

@media (max-width:640px){
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-actions .button{width:100%}
  .section-heading{flex-direction:column;align-items:flex-start}
  .tool-card{grid-template-columns:1fr;align-items:stretch}
  .tool-card-main{flex-direction:column}
  .tool-title-row{justify-content:space-between}
}

@media (min-width:641px) and (max-width:900px){
  .tool-card{grid-template-columns:1fr;align-items:stretch}
  .button-open{width:auto;align-self:flex-start;margin-top:6px}
}


/* ==========================================================
   Soft purple-pink theme + light animation
   Built to stay smooth on phones: only 2 background layers,
   transform-only motion, fixed sizes (no resize while scrolling),
   fancy effects only on desktop with a mouse.
   ========================================================== */

/* Layer 1: soft colour clouds that drift slowly */
body::before{
  content:"";
  position:fixed;
  left:-8vw;
  top:-8vh;
  width:116vw;
  height:116vh;
  height:116lvh;
  z-index:-2;
  pointer-events:none;
  background:
    radial-gradient(38% 34% at 18% 22%, rgba(196,150,255,.55), transparent 70%),
    radial-gradient(34% 32% at 82% 18%, rgba(255,160,220,.50), transparent 70%),
    radial-gradient(40% 36% at 72% 80%, rgba(160,175,255,.45), transparent 70%),
    radial-gradient(36% 32% at 20% 85%, rgba(255,190,235,.46), transparent 70%),
    linear-gradient(160deg,#fdf3fc 0%,#f6ecff 50%,#fdeefa 100%);
  will-change:transform;
  animation:wtb-drift 32s ease-in-out infinite alternate;
}
@keyframes wtb-drift{
  from{transform:translate3d(-3vw,-2vh,0)}
  to  {transform:translate3d(3vw,3vh,0)}
}

/* Layer 2: tiny bubbles floating slowly up */
body::after{
  content:"";
  position:fixed;
  left:0;
  top:0;
  width:100%;
  height:calc(100vh + 640px);
  height:calc(100lvh + 640px);
  z-index:-1;
  pointer-events:none;
  background-image:
    radial-gradient(circle, rgba(217,70,239,.30) 0 5px, transparent 6px),
    radial-gradient(circle, rgba(139,92,246,.27) 0 4px, transparent 5px),
    radial-gradient(circle, rgba(236,72,153,.24) 0 7px, transparent 8px),
    radial-gradient(circle, rgba(96,165,250,.28) 0 3px, transparent 4px);
  background-size:360px 640px, 610px 640px, 530px 640px, 450px 320px;
  background-position:40px 80px, 260px 330px, 90px 470px, 150px 40px;
  will-change:transform;
  animation:wtb-rise 60s linear infinite;
}
@keyframes wtb-rise{
  from{transform:translate3d(0,0,0)}
  to  {transform:translate3d(0,-640px,0)}
}

/* Hero picture glow breathes softly (one small element) */
.hero-visual::before{
  content:"";
  position:absolute;
  inset:6% 4%;
  border-radius:50%;
  z-index:0;
  background:radial-gradient(circle, rgba(217,70,239,.30), rgba(139,92,246,.18) 45%, transparent 72%);
  animation:wtb-pulse 6s ease-in-out infinite;
}
.hero-visual svg{position:relative;z-index:1}
@keyframes wtb-pulse{
  0%,100%{transform:scale(.94);opacity:.8}
  50%    {transform:scale(1.06);opacity:1}
}

/* Shine on the main hero button only */
.button-primary,
.button-open{position:relative;overflow:hidden}
.button-primary::after,
.button-open::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(110deg, transparent 35%, rgba(255,255,255,.45) 50%, transparent 65%);
  transform:translateX(-130%);
}
.button-primary::after{animation:wtb-sheen 5s ease-in-out infinite}
@keyframes wtb-sheen{
  0%,55%{transform:translateX(-130%)}
  100%  {transform:translateX(130%)}
}
@keyframes wtb-sheen-once{
  from{transform:translateX(-130%)}
  to  {transform:translateX(130%)}
}

.tool-icon{transition:transform .25s ease}

/* Extra polish only for desktop / laptop with a mouse */
@media (hover:hover) and (pointer:fine){
  .text-gradient{
    background:linear-gradient(90deg,#7c3aed,#c026d3,#ec4899,#7c3aed);
    background-size:200% 100%;
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    animation:wtb-shine 8s linear infinite;
  }
  .category-icon{animation:wtb-bob 5s ease-in-out infinite}
  .tool-card:hover .tool-icon{transform:rotate(-8deg) scale(1.08)}
  .button-open:hover::after{animation:wtb-sheen-once .9s ease}
}
@keyframes wtb-shine{
  from{background-position:0% 0}
  to  {background-position:200% 0}
}
@keyframes wtb-bob{
  0%,100%{transform:translateY(0)}
  50%    {transform:translateY(-3px)}
}

/* Cards float into view while scrolling (desktop browsers that support it) */
@media (hover:hover) and (pointer:fine){
  @supports (animation-timeline: view()){
    .tool-card{
      animation:wtb-reveal linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 38%;
    }
    @keyframes wtb-reveal{
      from{opacity:0;translate:0 28px;scale:.97}
      to  {opacity:1;translate:0 0;scale:1}
    }
  }
}

/* People who prefer no motion get a calm page */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  body::before,
  body::after,
  .text-gradient,
  .hero-visual::before,
  .category-icon,
  .tool-card{animation:none!important}
  .button-primary::after,
  .button-open::after{display:none}
}