*,*::before,*::after {
  box-sizing:border-box;
}

html {
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  overflow-x:hidden;
}

body {
  margin:0;
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  color:#0f172a;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  background:#fff;
  min-height:100vh;
  overflow-x:hidden;
}

:root {
  --ink:#0f172a;
  --ink-2:#1e293b;
  --muted:#64748b;
  --muted-2:#94a3b8;
  --line:#e6eef7;
  --line-2:#eff5fb;
  --brand:#0ea5e9;
  --brand-2:#0284c7;
  --brand-soft:#e0f2fe;
  --shadow:0 2px 6px rgba(15,23,42,.04),0 20px 44px -26px rgba(15,23,42,.3);
  --ease:cubic-bezier(.22,1,.36,1);
}

h1,h2,h3,h4,p {
  margin:0;
}

img {
  max-width:100%;
  display:block;
}

a {
  color:inherit;
}

button {
  font:inherit;
  color:inherit;
}

.ic {
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
  display:block;
}

.t-blue {
  --fb:#e6f2ff;
  --ff:#0284c7;
  --fs:linear-gradient(135deg,#38bdf8,#0284c7);
}

.t-purple {
  --fb:#f0ebff;
  --ff:#7c3aed;
  --fs:linear-gradient(135deg,#a78bfa,#7c3aed);
}

.t-green {
  --fb:#e2f9ea;
  --ff:#059669;
  --fs:linear-gradient(135deg,#34d399,#059669);
}

.t-pink {
  --fb:#fde9f3;
  --ff:#db2777;
  --fs:linear-gradient(135deg,#f472b6,#db2777);
}

.t-orange {
  --fb:#fff0dd;
  --ff:#ea580c;
  --fs:linear-gradient(135deg,#fb923c,#ea580c);
}

.t-teal {
  --fb:#ddf6f0;
  --ff:#0d9488;
  --fs:linear-gradient(135deg,#2dd4bf,#0d9488);
}

.t-indigo {
  --fb:#e6ebff;
  --ff:#4f46e5;
  --fs:linear-gradient(135deg,#818cf8,#4f46e5);
}

.t-rose {
  --fb:#ffe9ec;
  --ff:#e11d48;
  --fs:linear-gradient(135deg,#fb7185,#e11d48);
}

.t-amber {
  --fb:#fff4d6;
  --ff:#d97706;
  --fs:linear-gradient(135deg,#fbbf24,#d97706);
}

.t-cyan {
  --fb:#d9f5fb;
  --ff:#0891b2;
  --fs:linear-gradient(135deg,#22d3ee,#0891b2);
}

.t-lime {
  --fb:#eefacb;
  --ff:#65a30d;
  --fs:linear-gradient(135deg,#a3e635,#65a30d);
}

.t-fuchsia {
  --fb:#fbe9ff;
  --ff:#c026d3;
  --fs:linear-gradient(135deg,#e879f9,#c026d3);
}

/* NAVBAR (floating popup pill) */
.nb {
  position:fixed;
  top:14px;
  left:50%;
  transform:translateX(-50%);
  width:92%;
  max-width:1180px;
  z-index:1050;
  display:flex;
  align-items:center;
  gap:16px;
  padding:8px 10px 8px 18px;
  background:rgba(255,255,255,.78);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  backdrop-filter:blur(24px) saturate(180%);
  border:1px solid rgba(255,255,255,.6);
  border-radius:50px;
  box-shadow:0 8px 32px rgba(15,23,42,.08);
  transition:.45s var(--ease);
}

.nb.scrolled {
  top:8px;
  background:rgba(255,255,255,.92);
  box-shadow:0 14px 40px rgba(15,23,42,.14);
}

.logo {
  display:flex;
  align-items:center;
  gap:9px;
  text-decoration:none;
  flex:none;
}

.logo img {
  height:34px;
  width:auto;
}

.logo b {
  font-size:19px;
  font-weight:800;
  letter-spacing:-.035em;
}

.logo b em {
  font-style:normal;
  color:var(--brand);
}

.nl {
  display:flex;
  gap:2px;
  margin:0 auto;
}

.nl a {
  text-decoration:none;
  font-size:14px;
  font-weight:600;
  color:#475569;
  padding:8px 15px;
  border-radius:50px;
  transition:.25s;
}

.nl a:hover,.nl a.active {
  background:var(--brand-soft);
  color:var(--brand-2);
}

.nb-cta {
  display:inline-flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
  background:linear-gradient(135deg,#38bdf8,#0284c7);
  color:#fff;
  font-weight:700;
  font-size:13.5px;
  padding:10px 20px;
  border-radius:50px;
  box-shadow:0 8px 20px -10px #0284c7;
  transition:.3s;
}

.nb-cta:hover {
  transform:translateY(-2px);
}

.nb-cta .ic {
  width:15px;
  height:15px;
}

.burger {
  display:none;
  width:42px;
  height:42px;
  border-radius:50%;
  border:1px solid var(--line);
  background:#fff;
  cursor:pointer;
  align-items:center;
  justify-content:center;
  margin-left:auto;
  color:var(--ink-2);
}

.burger .ic {
  width:20px;
  height:20px;
}

.ov {
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.5);
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
  z-index:2000;
  opacity:0;
  visibility:hidden;
  transition:.4s var(--ease);
}

.ov.on {
  opacity:1;
  visibility:visible;
}

.sb {
  position:fixed;
  top:0;
  right:-330px;
  width:300px;
  max-width:86vw;
  height:100vh;
  height:100dvh;
  background:#fff;
  z-index:2100;
  padding:22px 18px;
  overflow-y:auto;
  transition:right .45s var(--ease);
  box-shadow:-8px 0 40px rgba(15,23,42,.15);
}

.sb.on {
  right:0;
}

.sb-x {
  position:absolute;
  top:14px;
  right:14px;
  width:36px;
  height:36px;
  border-radius:50%;
  border:0;
  background:#f1f5f9;
  cursor:pointer;
  display:grid;
  place-items:center;
  transition:.3s;
}

.sb-x:hover {
  background:#fee2e2;
  color:#e11d48;
  transform:rotate(90deg);
}

.sb-logo {
  margin:4px 0 18px;
}

.sb a.sl {
  display:block;
  text-decoration:none;
  padding:12px 14px;
  border-radius:12px;
  font-weight:600;
  font-size:15px;
  color:#475569;
  margin-bottom:3px;
  transition:.25s;
}

.sb a.sl:hover,.sb a.sl.active {
  background:var(--brand-soft);
  color:var(--brand-2);
  padding-left:20px;
}

.sb h5 {
  margin:16px 14px 6px;
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted-2);
}

.sb hr {
  border:0;
  height:1px;
  background:var(--line);
  margin:12px 0;
}

.sb .nb-cta {
  display:flex;
  justify-content:center;
  margin-top:10px;
  padding:13px;
}

.sb .free {
  margin-top:14px;
  text-align:center;
  font-size:12.5px;
  font-weight:700;
  color:#047857;
  background:#ecfdf5;
  border:1px solid #a7f3d0;
  border-radius:50px;
  padding:8px;
}

@media(max-width:960px) {
  .nl,.nb>.nb-cta {
    display:none;
  }
  .burger {
    display:flex;
  }
  .nb {
    padding:7px 8px 7px 14px;
  }
}

/* HERO */
.hero {
  position:relative;
  overflow:hidden;
  padding:128px 24px 72px;
  background:radial-gradient(900px 480px at 86% 10%,#e0f2fe,rgba(224,242,254,0) 65%),radial-gradient(760px 420px at 8% 92%,#ede9fe,rgba(237,233,254,0) 62%),#fff;
}

.hero-in {
  position:relative;
  max-width:1280px;
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:56px;
  align-items:center;
}

.pill {
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--brand-soft);
  border:1px solid #cfe8fd;
  color:var(--brand-2);
  padding:7px 15px;
  border-radius:999px;
  font-size:12.5px;
  font-weight:700;
  margin-bottom:20px;
}

.pill .ic {
  width:14px;
  height:14px;
}

.hero h1 {
  font-size:clamp(32px,4.6vw,54px);
  line-height:1.08;
  letter-spacing:-.04em;
  font-weight:800;
}

.grad {
  background:linear-gradient(120deg,#38bdf8,#0284c7 55%,#7c3aed);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.lead {
  margin:18px 0 0;
  max-width:540px;
  font-size:clamp(15px,1.5vw,17px);
  color:var(--muted);
  line-height:1.65;
}

.hero-cta {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
  margin-top:26px;
}

.btn-primary {
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  background:linear-gradient(135deg,#38bdf8,#0284c7);
  color:#fff;
  padding:15px 26px;
  border-radius:999px;
  font-size:15px;
  font-weight:700;
  box-shadow:0 16px 34px -16px #0284c7;
  transition:.2s;
}

.btn-primary:hover {
  transform:translateY(-2px);
}

.btn-primary .ic {
  width:17px;
  height:17px;
}

.free-pill {
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:#ecfdf5;
  border:1px solid #a7f3d0;
  color:#047857;
  padding:11px 18px;
  border-radius:999px;
  font-size:13.5px;
  font-weight:700;
}

.free-pill i {
  width:8px;
  height:8px;
  border-radius:50%;
  background:#10b981;
  box-shadow:0 0 0 3px rgba(16,185,129,.2);
}

.checks {
  display:flex;
  flex-wrap:wrap;
  gap:10px 18px;
  margin-top:24px;
}

.checks span {
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:13.5px;
  color:var(--muted);
  font-weight:500;
}

.checks .ic {
  width:15px;
  height:15px;
  color:#10b981;
  stroke-width:2.4;
}

.hero-art {
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:22px 26px;
}

.hero-art::before {
  content:'';
  position:absolute;
  inset:auto 0 0 0;
  height:76%;
  border-radius:50% 50% 40% 40%/60% 60% 40% 40%;
  background:linear-gradient(160deg,#e0f2fe,#ede9fe);
}

.ba {
  position:relative;
  z-index:2;
  width:100%;
  max-width:480px;
  aspect-ratio:5/4;
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 30px 60px -26px rgba(15,23,42,.5);
  transform:rotate(-2deg);
  background:#fff;
}

.bh {
  position:absolute;
  top:0;
  bottom:0;
  width:50%;
  overflow:hidden;
}

.bh.l {
  left:0;
}

.bh.r {
  right:0;
}

.bi {
  position:absolute;
  top:0;
  height:100%;
  width:200%;
}

.bh.l .bi {
  left:0;
  filter:grayscale(.85) brightness(.9) contrast(.9);
}

.bh.r .bi {
  right:0;
  filter:saturate(1.4) contrast(1.08);
}

.bd {
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:2px;
  background:rgba(255,255,255,.9);
  z-index:3;
  box-shadow:0 0 12px #fff;
}

.bt {
  position:absolute;
  top:14px;
  z-index:4;
  background:rgba(15,23,42,.72);
  color:#fff;
  padding:5px 12px;
  border-radius:999px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.04em;
}

.bt.b {
  left:14px;
}

.bt.a {
  right:14px;
  background:linear-gradient(135deg,#38bdf8,#0284c7);
}

.sc {
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,#bae6fd 0%,#7dd3fc 38%,#0369a1 39%,#0c4a6e 56%,#0ea5e9 100%);
}

.mt {
  position:absolute;
  left:0;
  right:0;
  top:14%;
  height:34%;
  background:linear-gradient(180deg,#f8fafc,#94a3b8);
  clip-path:polygon(0 100%,12% 42%,22% 68%,34% 22%,48% 62%,60% 30%,72% 58%,84% 34%,94% 64%,100% 46%,100% 100%);
}

.sc::before {
  content:'';
  position:absolute;
  left:0;
  right:0;
  bottom:38%;
  height:44%;
  background:repeating-linear-gradient(72deg,transparent 0 12px,rgba(0,0,0,.045) 12px 13px),linear-gradient(180deg,#166534,#15803d 55%,#166534);
  clip-path:polygon(0 62%,8% 46%,16% 58%,25% 34%,36% 52%,48% 28%,60% 46%,72% 30%,84% 50%,92% 38%,100% 56%,100% 100%,0 100%);
}

.sc::after {
  content:'';
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:38%;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.24) 0 3px,transparent 3px 22px),linear-gradient(180deg,#0ea5e9,#0369a1);
  opacity:.9;
}

.mt {
  filter:drop-shadow(0 4px 8px rgba(15,23,42,.15));
}

.mt.snow {
  top:14%;
  height:22%;
  background:linear-gradient(180deg,#fff,#e2e8f0);
  opacity:.9;
}

.sp {
  position:absolute;
  color:#38bdf8;
  z-index:4;
  opacity:.9;
}

.sp.s1 {
  top:6%;
  right:12%;
  width:26px;
  height:26px;
}

.sp.s2 {
  top:22%;
  right:6%;
  width:16px;
  height:16px;
}

.sp.s3 {
  bottom:6%;
  left:8%;
  width:20px;
  height:20px;
}

.sp.s4 {
  top:44%;
  left:0;
  width:18px;
  height:18px;
  color:#a78bfa;
}

.fl {
  position:absolute;
  z-index:5;
  background:#fff;
  border-radius:16px;
  box-shadow:0 18px 40px -20px rgba(15,23,42,.55);
  display:grid;
  place-items:center;
}

.fl i {
  display:grid;
  place-items:center;
  width:100%;
  height:100%;
  border-radius:inherit;
  font-style:normal;
}

.fl.pen {
  left:0;
  top:30%;
  width:56px;
  height:56px;
}

.fl.pen i {
  background:linear-gradient(135deg,#38bdf8,#0284c7);
  color:#fff;
}

.fl.cam {
  left:4px;
  bottom:16%;
  width:54px;
  height:54px;
}

.fl.cam i {
  color:var(--brand-2);
  border:1px solid var(--line);
}

.fl.ai {
  right:0;
  bottom:10%;
  width:70px;
  height:70px;
}

.fl.ai i {
  background:linear-gradient(135deg,#a78bfa,#7c3aed);
  color:#fff;
  font-weight:800;
  font-size:19px;
}

.fl .ic {
  width:24px;
  height:24px;
}

@media(max-width:920px) {
  .hero {
    padding:104px 18px 48px;
  }
  .hero-in {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:0;
  }
  .hero-copy {
    display:contents;
    text-align:center;
  }
  .hero-in>.hero-art,.hero-copy>* {
    order:3;
  }
  .hero-copy>.pill {
    order:1;
    margin-bottom:6px;
  }
  .hero-in>.hero-art {
    order:2;
    margin-bottom:26px;
  }
  .hero-copy>.checks {
    margin-bottom:0;
  }
  .lead {
    margin-left:auto;
    margin-right:auto;
  }
  .hero-cta,.checks {
    justify-content:center;
  }
  .hero-art {
    max-width:460px;
    width:100%;
  }
}

@media(max-width:520px) {
  .hero {
    padding-top:96px;
  }
  .pill {
    font-size:11.5px;
    padding:6px 12px;
  }
  .btn-primary {
    padding:13px 22px;
    font-size:14px;
  }
  .hero-art {
    padding:16px 22px 22px;
  }
  .fl.pen {
    width:46px;
    height:46px;
    top:26%;
  }
  .fl.cam {
    width:44px;
    height:44px;
  }
  .fl.ai {
    width:56px;
    height:56px;
    font-size:16px;
  }
  .fl.ai i {
    font-size:16px;
  }
  .fl .ic {
    width:20px;
    height:20px;
  }
  .ba {
    transform:rotate(-1deg);
  }
}

/* SECTIONS */
.section {
  max-width:1280px;
  margin:0 auto;
  padding:56px 24px 0;
}

.section.tight {
  padding-top:44px;
}

.eyebrow {
  text-align:center;
  font-size:12px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--brand-2);
  margin-bottom:10px;
}

.sec-title {
  text-align:center;
  font-size:clamp(24px,3.4vw,36px);
  font-weight:800;
  letter-spacing:-.035em;
  line-height:1.15;
}

.sec-sub {
  text-align:center;
  color:var(--muted);
  font-size:15px;
  margin:14px auto 0;
  max-width:640px;
}

.sec-head-lite {
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:8px;
  flex-wrap:wrap;
}

.bar {
  width:5px;
  height:24px;
  border-radius:99px;
}

.sec-head-lite h2 {
  font-size:clamp(18px,2.2vw,22px);
  letter-spacing:-.025em;
  font-weight:800;
}

.count {
  margin-left:auto;
  font-size:11.5px;
  font-weight:700;
  color:var(--brand-2);
  background:var(--brand-soft);
  padding:5px 12px;
  border-radius:999px;
  border:1px solid #cfe8fd;
}

.sec-hint {
  font-size:13.5px;
  color:var(--muted);
  margin:0 0 16px 17px;
}

.feat-grid {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:14px;
  margin-top:34px;
}

@media(max-width:1120px) {
  .feat-grid {
    grid-template-columns:repeat(4,1fr);
  }
}

@media(max-width:880px) {
  .feat-grid {
    grid-template-columns:repeat(3,1fr);
  }
}

@media(max-width:640px) {
  .feat-grid {
    grid-template-columns:repeat(2,1fr);
    gap:10px;
  }
}

@media(max-width:400px) {
  .feat-grid {
    grid-template-columns:1fr;
  }
}

.fcard {
  position:relative;
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px;
  border-radius:16px;
  text-decoration:none;
  background:var(--fb);
  border:1px solid color-mix(in srgb,var(--ff) 12%,transparent);
  transition:.2s;
  overflow:hidden;
}

.fcard:hover {
  transform:translateY(-3px);
  box-shadow:0 20px 40px -24px var(--ff);
}

.fi {
  width:44px;
  height:44px;
  border-radius:12px;
  flex:none;
  display:grid;
  place-items:center;
  color:#fff;
  background:var(--fs);
}

.fi .ic {
  width:21px;
  height:21px;
}

.fcard b {
  display:block;
  font-size:14px;
  font-weight:700;
  line-height:1.25;
}

.fcard small {
  display:block;
  font-size:11.5px;
  color:var(--muted);
  margin-top:3px;
  line-height:1.4;
}

.arw {
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  color:var(--ff);
  opacity:.35;
}

.arw .ic {
  width:16px;
  height:16px;
}

@media(max-width:640px) {
  .fcard {
    padding:13px 12px;
    gap:10px;
  }
  .fi {
    width:38px;
    height:38px;
  }
  .fcard b {
    font-size:13px;
  }
  .fcard small {
    font-size:11px;
  }
  .arw {
    display:none;
  }
}

.trust {
  max-width:1100px;
  margin:52px auto 0;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
  background:#f8fafc;
  border:1px solid var(--line-2);
  border-radius:20px;
  padding:22px 12px;
}

@media(max-width:740px) {
  .trust {
    grid-template-columns:repeat(2,1fr);
    gap:18px 4px;
  }
}

.tb {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:0 8px;
}

.tb+.tb {
  border-left:1px solid var(--line);
}

@media(max-width:740px) {
  .tb:nth-child(odd) {
    border-left:0;
  }
}

.tbi {
  width:40px;
  height:40px;
  border-radius:12px;
  flex:none;
  background:#fff;
  border:1px solid var(--line);
  display:grid;
  place-items:center;
  color:var(--brand-2);
}

.tb b {
  display:block;
  font-size:13.5px;
  line-height:1.25;
}

.tb small {
  display:block;
  font-size:11.5px;
  color:var(--muted);
}

.cat-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(238px,1fr));
  gap:11px;
}

@media(max-width:520px) {
  .cat-grid {
    grid-template-columns:1fr 1fr;
    gap:8px;
  }
  .tool {
    padding:10px!important;
    font-size:12.5px!important;
    gap:9px!important;
  }
  .ti {
    width:32px!important;
    height:32px!important;
  }
}

.tool {
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border-radius:14px;
  background:#fff;
  border:1px solid var(--line-2);
  text-decoration:none;
  font-size:13.4px;
  font-weight:600;
  color:var(--ink-2);
  line-height:1.3;
  transition:.18s;
}

.tool:hover {
  transform:translateY(-2px);
  border-color:color-mix(in srgb,var(--ff) 35%,transparent);
  box-shadow:0 14px 28px -20px var(--ff);
}

.ti {
  width:36px;
  height:36px;
  border-radius:10px;
  flex:none;
  display:grid;
  place-items:center;
  background:var(--fb);
  color:var(--ff);
  transition:.18s;
}

.tool:hover .ti {
  background:var(--fs);
  color:#fff;
}

.ti .ic {
  width:17px;
  height:17px;
}

.tx {
  min-width:0;
}

/* SEO CONTENT */
.seo {
  max-width:1280px;
  margin:72px auto 0;
  padding:0 24px;
}

.seo-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  margin-top:30px;
}

@media(max-width:820px) {
  .seo-grid {
    grid-template-columns:1fr;
  }
}

.seo-card {
  background:#fff;
  border:1px solid var(--line);
  border-radius:22px;
  padding:28px;
  box-shadow:var(--shadow);
}

.seo-card h3 {
  font-size:20px;
  font-weight:800;
  letter-spacing:-.025em;
  margin-bottom:10px;
}

.seo-card p {
  font-size:14.2px;
  color:var(--muted);
  line-height:1.75;
  margin-bottom:12px;
}

.seo-card ul {
  margin:0 0 16px;
  padding-left:18px;
  font-size:14px;
  color:var(--muted);
  line-height:1.8;
}

.seo-card .btn-primary {
  padding:12px 22px;
  font-size:14px;
}

.chips {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:center;
  margin-top:26px;
}

.chips a {
  text-decoration:none;
  font-size:13px;
  font-weight:600;
  color:var(--brand-2);
  background:var(--brand-soft);
  border:1px solid #cfe8fd;
  padding:8px 15px;
  border-radius:999px;
  transition:.2s;
}

.chips a:hover {
  background:var(--brand-2);
  color:#fff;
}

.why {
  margin-top:72px;
  padding:0 24px;
}

.why-in {
  max-width:1280px;
  margin:0 auto;
  background:linear-gradient(160deg,#fff,#f5faff);
  border:1px solid var(--line);
  border-radius:26px;
  padding:48px 32px;
  box-shadow:var(--shadow);
}

@media(max-width:640px) {
  .why-in {
    padding:32px 18px;
    border-radius:20px;
  }
}

.why-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:14px;
  margin-top:30px;
}

.why-card {
  background:#fff;
  border:1px solid var(--line-2);
  border-radius:18px;
  padding:22px;
  transition:.2s;
}

.why-card:hover {
  transform:translateY(-3px);
  box-shadow:var(--shadow);
}

.wi {
  width:44px;
  height:44px;
  border-radius:13px;
  display:grid;
  place-items:center;
  margin-bottom:14px;
  background:var(--fb);
  color:var(--ff);
}

.wi .ic {
  width:21px;
  height:21px;
}

.why-card b {
  display:block;
  font-size:15px;
  margin-bottom:6px;
}

.why-card p {
  font-size:13.3px;
  color:var(--muted);
  line-height:1.65;
}

.faq {
  max-width:920px;
  margin:72px auto 0;
  padding:0 24px;
}

.faq h2 {
  font-size:clamp(24px,3.4vw,34px);
  text-align:center;
  font-weight:800;
  letter-spacing:-.035em;
  margin-bottom:8px;
}

.faq-sub {
  text-align:center;
  color:var(--muted);
  margin-bottom:26px;
}

.faq details {
  background:#fff;
  border:1px solid var(--line-2);
  border-radius:16px;
  margin-bottom:10px;
  overflow:hidden;
}

.faq details[open] {
  border-color:#bfe3fb;
  box-shadow:0 14px 32px -24px #0284c7;
}

.faq summary {
  cursor:pointer;
  padding:18px 22px;
  font-size:15px;
  font-weight:700;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.faq summary::-webkit-details-marker {
  display:none;
}

.faq summary::after {
  content:'';
  width:9px;
  height:9px;
  flex:none;
  border-right:2px solid var(--brand);
  border-bottom:2px solid var(--brand);
  transform:rotate(45deg);
  transition:.2s;
}

.faq details[open] summary::after {
  transform:rotate(-135deg);
}

.ans {
  padding:0 22px 20px;
  font-size:14px;
  color:var(--muted);
  line-height:1.75;
}

.cta {
  margin-top:80px;
  padding:0 24px;
}

.cta-in {
  position:relative;
  overflow:hidden;
  text-align:center;
  max-width:1280px;
  margin:0 auto;
  background:linear-gradient(135deg,#0ea5e9,#0284c7 55%,#6d28d9);
  border-radius:28px;
  padding:58px 26px;
  color:#fff;
  box-shadow:0 32px 64px -34px #0284c7;
}

.cta-in h2 {
  font-size:clamp(24px,3.6vw,36px);
  letter-spacing:-.035em;
  font-weight:800;
  line-height:1.15;
}

.cta-in p {
  margin:16px auto 0;
  max-width:560px;
  font-size:15.5px;
  color:rgba(255,255,255,.92);
}

.cta-btns {
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:28px;
}

.cta-btns a {
  text-decoration:none;
  padding:14px 26px;
  border-radius:999px;
  font-size:14.5px;
  font-weight:700;
  display:inline-flex;
  align-items:center;
  gap:9px;
  transition:.2s;
}

.cta-btns .w {
  background:#fff;
  color:#0284c7;
}

.cta-btns .g {
  background:rgba(255,255,255,.16);
  color:#fff;
  border:1px solid rgba(255,255,255,.35);
}

footer {
  margin-top:90px;
  background:#f8fafc;
  border-top:1px solid var(--line);
  padding:56px 24px 0;
}

.f-in {
  max-width:1280px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1fr;
  gap:40px;
}

@media(max-width:900px) {
  .f-in {
    grid-template-columns:1fr 1fr;
    gap:30px;
  }
}

@media(max-width:520px) {
  .f-in {
    grid-template-columns:1fr;
  }
}

.f-brand img {
  height:44px;
  margin-bottom:14px;
}

.f-brand p {
  font-size:13.5px;
  color:var(--muted);
  line-height:1.75;
  max-width:340px;
}

.f-badge {
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:16px;
  background:#ecfdf5;
  border:1px solid #a7f3d0;
  border-radius:999px;
  padding:8px 15px;
  font-size:12.5px;
  font-weight:700;
  color:#047857;
}

.f-col h4 {
  font-size:12.5px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:16px;
}

.f-col ul {
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:11px;
}

.f-col a {
  text-decoration:none;
  font-size:13.5px;
  color:var(--muted);
  font-weight:500;
}

.f-col a:hover {
  color:var(--brand-2);
}

.f-bot {
  max-width:1280px;
  margin:44px auto 0;
  padding:22px 0 30px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}

.f-bot p {
  font-size:12.5px;
  color:var(--muted-2);
}

.f-legal {
  display:flex;
  gap:18px;
}

.f-legal a {
  text-decoration:none;
  font-size:12.5px;
  color:var(--muted);
  font-weight:600;
}

.to-top {
  position:fixed;
  right:20px;
  bottom:22px;
  z-index:70;
  width:46px;
  height:46px;
  border-radius:14px;
  cursor:pointer;
  background:#fff;
  color:var(--brand-2);
  display:grid;
  place-items:center;
  box-shadow:0 14px 32px -18px rgba(15,23,42,.6);
  border:1px solid var(--line);
  opacity:0;
  visibility:hidden;
  transition:.22s;
}

.to-top.show {
  opacity:1;
  visibility:visible;
}

@media(prefers-reduced-motion:reduce) {
  * {
    transition:none!important;
    scroll-behavior:auto!important;
  }
}

/* ===== Tool pages (Free Tool Box) ===== */
.tp{max-width:1100px;margin:0 auto;padding:104px 20px 60px}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13px;color:var(--muted);margin-bottom:18px}
.crumbs a{text-decoration:none;color:var(--brand-2);font-weight:600}.crumbs b{color:var(--ink-2);font-weight:600}.crumbs span{opacity:.5}
.tp-head{text-align:center;margin-bottom:26px}
.tp-head h1{font-size:clamp(26px,4vw,40px);line-height:1.15;letter-spacing:-.035em;font-weight:800}
.tp-head p{margin:12px auto 0;max-width:640px;color:var(--muted);font-size:16px}
.box{background:#fff;border:1px solid var(--line);border-radius:22px;padding:26px;box-shadow:var(--shadow)}
.tp-seo{margin-top:56px}
.tp-seo h2{font-size:clamp(20px,2.6vw,26px);font-weight:800;letter-spacing:-.025em;margin:34px 0 12px}
.tp-seo p{color:var(--muted);line-height:1.8;font-size:15px;margin-bottom:12px}
.steps{padding-left:22px;color:var(--muted);line-height:1.9;font-size:15px}.steps li::marker{color:var(--brand-2);font-weight:800}
.faq-in details{background:#fff;border:1px solid var(--line-2);border-radius:14px;margin-bottom:10px;overflow:hidden}
.faq-in summary{cursor:pointer;padding:16px 20px;font-weight:700;font-size:15px;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq-in summary::-webkit-details-marker{display:none}
.faq-in summary::after{content:'';width:9px;height:9px;flex:none;border-right:2px solid var(--brand);border-bottom:2px solid var(--brand);transform:rotate(45deg);transition:.2s;margin-top:4px}
.faq-in details[open] summary::after{transform:rotate(-135deg)}
.faq-in .ans{padding:0 20px 18px;color:var(--muted);font-size:14.5px;line-height:1.75}
.seo-grid-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:980px){.seo-grid-3{grid-template-columns:1fr}}
.notice{background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;border-radius:12px;padding:12px 16px;font-size:14px}

/* YouTube to MP3 */
.yt{max-width:820px;margin:0 auto}
.yt-label{display:block;font-weight:700;margin-bottom:10px}
.yt-row{display:grid;grid-template-columns:1fr 150px auto;gap:10px}
.yt-row input,.yt-row select{height:52px;border:1.5px solid var(--line);border-radius:14px;padding:0 16px;font:inherit;font-size:15px;background:#fff;min-width:0}
.yt-row input:focus,.yt-row select:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-soft)}
.yt-row .btn-primary{height:52px;border:0;cursor:pointer;justify-content:center;white-space:nowrap}
.yt-row .btn-primary:disabled{opacity:.6;cursor:wait;transform:none}
@media(max-width:700px){.yt-row{grid-template-columns:1fr}}
.yt-note{font-size:12.5px;color:var(--muted);margin-top:12px;line-height:1.6}
.yt-status{margin-top:16px;padding:13px 16px;border-radius:12px;font-size:14.5px;font-weight:600}
.yt-status.work{background:var(--brand-soft);color:var(--brand-2)}.yt-status.err{background:#fff1f2;color:#be123c}
.yt-result{margin-top:18px;padding:18px;border:1px solid #a7f3d0;background:#ecfdf5;border-radius:16px;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.yt-result b{font-size:16px;word-break:break-word}.yt-result small{color:var(--muted)}
.btn-ghost{background:none;border:1px solid var(--line);border-radius:999px;padding:11px 18px;font-weight:700;cursor:pointer;color:var(--ink-2)}
[hidden]{display:none!important}