/* =====================================================================
   Visual polish: ambient colour, richer headers and cards, the home
   "why" grid and developer spotlight. Loaded after the other sheets.
   ===================================================================== */

/* ---------- ambient background: soft colour pools behind every page ---------- */
body { position: relative; isolation: isolate; }
body::before {
  content: ''; position: fixed; inset: -20vh -10vw auto; height: 90vh; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40vw 30vh at 15% 20%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%),
    radial-gradient(36vw 28vh at 85% 10%, color-mix(in srgb, var(--image) 9%, transparent), transparent 70%),
    radial-gradient(30vw 26vh at 60% 60%, color-mix(in srgb, var(--calc) 7%, transparent), transparent 70%);
  filter: blur(10px);
}

/* ---------- header ---------- */
.logo span { background: linear-gradient(100deg, var(--ink) 30%, var(--accent) 70%, var(--image)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.main-nav a { position: relative; transition: color .15s, background .15s; }
.main-nav a[aria-current]::after {
  content: ''; position: absolute; left: 12px; right: 12px; bottom: 1px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--image));
}

/* ---------- "New" badge on tool cards ---------- */
.tc-name { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.tc-new {
  font: 600 10.5px/1 var(--font); letter-spacing: .06em; text-transform: uppercase; padding: 4px 7px; border-radius: 99px;
  color: #fff; background: linear-gradient(120deg, var(--dev), var(--pdf));
  box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--dev) 70%, transparent);
}
.tool-grid.compact .tc-new { padding: 3px 6px; font-size: 9.5px; }

/* ---------- category headers ---------- */
.cat-head h2 { background: linear-gradient(100deg, var(--ink) 40%, color-mix(in srgb, var(--c) 85%, var(--ink))); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- tool page: a glowing header card ---------- */
.tool-head {
  position: relative; overflow: hidden; isolation: isolate; padding: 28px; border-radius: 24px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 9%, var(--surface)), var(--surface) 60%);
  border: 1px solid color-mix(in srgb, var(--c) 22%, var(--line));
  box-shadow: var(--shadow-panel);
}
.tool-head::before {
  content: ''; position: absolute; z-index: -1; width: 340px; height: 340px; right: -90px; top: -170px; border-radius: 50%;
  background: var(--c); opacity: .16; filter: blur(60px);
}
.tool-head::after { /* dot texture in the corner */
  content: ''; position: absolute; z-index: -1; inset: 0 0 0 55%; pointer-events: none;
  background-image: radial-gradient(color-mix(in srgb, var(--c) 30%, transparent) 1px, transparent 1px); background-size: 16px 16px;
  mask-image: linear-gradient(90deg, transparent, #000); -webkit-mask-image: linear-gradient(90deg, transparent, #000);
  opacity: .5;
}
.tool-head .t-icon.big {
  color: #fff; background: linear-gradient(140deg, color-mix(in srgb, var(--c) 72%, #fff), var(--c));
  box-shadow: 0 12px 24px -10px color-mix(in srgb, var(--c) 80%, transparent);
}
.tool-head h1 { background: linear-gradient(100deg, var(--ink) 45%, color-mix(in srgb, var(--c) 80%, var(--ink))); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tool-badges { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; }
.tool-badges li {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 99px; font-size: 13.5px; font-weight: 500;
  color: var(--ink-2); background: color-mix(in srgb, var(--surface) 80%, transparent); border: 1px solid var(--line);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.tool-badges li .ico { color: var(--c); }
.tool-badges li.privacy-line { color: var(--ok); }
.tool-badges li.privacy-line .ico { color: var(--ok); }

/* ---------- tool box: a thin category light along the top ---------- */
.tool-box { position: relative; }
.tool-box::before {
  content: ''; position: absolute; top: -1px; left: 40px; right: 40px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), var(--image), transparent); opacity: .6;
}

/* primary buttons get a little depth and colour on hover */
.btn:not(.secondary):hover { background: linear-gradient(180deg, color-mix(in srgb, var(--ink) 88%, var(--accent)), var(--ink)); }

/* numbered steps: gradient chips */
.steps li::before { color: #fff; border: 0; background: linear-gradient(140deg, var(--accent), var(--image)); box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--accent) 70%, transparent); }
.faq details { transition: background .2s; border-radius: 10px; }
.faq summary:hover { color: var(--accent); }

/* ---------- home: why grid ---------- */
.why { padding: 72px 0 8px; text-align: center; }
.why h2 { font-size: clamp(28px, 4vw, 44px); letter-spacing: -0.035em; max-width: 20ch; margin: 0 auto; text-wrap: balance; }
.why-grid { list-style: none; padding: 0; margin: 36px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; text-align: left; }
.why-card {
  position: relative; overflow: hidden; padding: 24px; border-radius: var(--r-panel); background: var(--surface);
  border: 1px solid var(--line); box-shadow: var(--shadow-panel); transition: transform .25s cubic-bezier(.2, .7, .2, 1), border-color .2s, box-shadow .2s;
}
.why-card::after { content: ''; position: absolute; width: 160px; height: 160px; right: -60px; bottom: -80px; border-radius: 50%; background: var(--c); opacity: .1; filter: blur(30px); transition: opacity .25s; }
.why-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--c) 45%, var(--line)); box-shadow: 0 20px 40px -20px color-mix(in srgb, var(--c) 55%, transparent); }
.why-card:hover::after { opacity: .25; }
.why-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; margin-bottom: 14px; color: #fff; background: linear-gradient(140deg, color-mix(in srgb, var(--c) 72%, #fff), var(--c)); box-shadow: 0 10px 20px -10px color-mix(in srgb, var(--c) 80%, transparent); }
.why-card h3 { font-size: 18px; margin-bottom: 6px; }
.why-card p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.55; }

/* ---------- home: developer spotlight ---------- */
.dev-spot {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 36px; align-items: center; margin: 64px 0 8px; padding: 40px;
  border-radius: 28px; color: #f4f6fb; position: relative; overflow: hidden; isolation: isolate;
  --ink: #f4f6fb; --muted: #a7afc6; --faint: #7d86a0;
  background:
    radial-gradient(520px 320px at 0% 0%, rgba(247, 107, 21, .25), transparent 65%),
    radial-gradient(520px 320px at 100% 100%, rgba(142, 78, 198, .28), transparent 65%),
    #0b0e1a;
  box-shadow: 0 40px 80px -40px rgba(11, 14, 26, .8), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.dev-spot::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, .09) 1px, transparent 1px); background-size: 22px 22px;
  mask-image: radial-gradient(ellipse at 30% 50%, #000, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at 30% 50%, #000, transparent 75%);
}
.dev-spot .eyebrow { color: #ffb37a; }
.dev-spot h2 { font-size: clamp(26px, 3.4vw, 38px); letter-spacing: -0.035em; color: #fff; text-wrap: balance; }
.dev-spot p { color: var(--muted); margin: 14px 0 22px; font-size: 16.5px; }
.ds-links { display: flex; flex-wrap: wrap; gap: 8px; }
.ds-term { border-radius: 18px; background: #0d1120; border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 30px 60px -30px rgba(247, 107, 21, .45); overflow: hidden; transform: perspective(1200px) rotateY(-8deg) rotateX(4deg); transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.dev-spot:hover .ds-term { transform: none; }
.ds-term pre { margin: 0; padding: 20px 22px 24px; font: 13px/1.7 var(--mono); color: #c9cfe2; white-space: pre-wrap; word-break: break-all; }
.ds-term .jp0 { color: #ff6369; } .ds-term .jp1 { color: #bf7af0; } .ds-term .jp2 { color: #0bd8b6; }
.ds-term b { color: #9fb0ff; font-weight: 500; } .ds-term em { color: #7ef0c6; font-style: normal; } .ds-term i { color: #ffb37a; font-style: normal; }
.t-dim { color: #6b7391; } .t-ok { color: #3ccf91; font-weight: 600; }

/* ---------- footer ---------- */
.site-footer { position: relative; border-top: 0; }
.site-footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), var(--image), var(--dev), transparent); opacity: .5; }

@media (max-width: 960px) {
  .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dev-spot { grid-template-columns: 1fr; padding: 28px; }
  .ds-term { transform: none; }
}
@media (max-width: 760px) {
  .tool-head { padding: 20px; border-radius: 18px; margin-left: -6px; margin-right: -6px; }
  .why { padding-top: 52px; }
  .why-grid { grid-template-columns: 1fr; gap: 10px; }
  .why-card { padding: 20px; }
  .dev-spot { padding: 22px; border-radius: 22px; margin: 44px -6px 8px; }
}