/* ===== BestQR — Tools landing page ===== */

/* Hero */
.tools-hero{position:relative;overflow:hidden;border-bottom:1px solid var(--border)}
.tools-hero::before{content:"";position:absolute;inset:0;z-index:0;background:
  radial-gradient(820px 400px at 82% -12%,#eef0ff,transparent 60%),
  radial-gradient(680px 360px at 10% -6%,#fdeef4,transparent 55%),
  radial-gradient(560px 320px at 52% 118%,#e6f8ee,transparent 60%)}
.tools-hero-inner{position:relative;z-index:1;text-align:center;max-width:760px;margin:0 auto;padding:74px 0 60px}
.tools-hero .eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--accent-600);background:#fff;border:1px solid var(--border);padding:7px 14px;border-radius:100px;box-shadow:var(--shadow-sm);margin-bottom:22px}
.tools-hero h1{font-family:var(--display);font-weight:700;font-size:clamp(36px,5.4vw,58px);line-height:1.04;letter-spacing:-.03em;margin:0 0 18px}
.tools-hero h1 em{font-style:normal;background:linear-gradient(90deg,#e1306c,#833ab4 40%,#4f46e5 72%,#1db954);-webkit-background-clip:text;background-clip:text;color:transparent}
.tools-hero .lede{font-size:18px;color:var(--muted);margin:0 auto 28px;max-width:600px;line-height:1.62}
.tools-hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.hero-stats{display:flex;gap:34px;justify-content:center;flex-wrap:wrap;margin-top:40px;padding-top:30px;border-top:1px solid var(--border)}
.hero-stats .hs b{display:block;font-family:var(--display);font-weight:700;font-size:26px;letter-spacing:-.02em;color:var(--text)}
.hero-stats .hs span{font-size:13px;color:var(--muted)}

.btn-dark{display:inline-flex;align-items:center;gap:8px;background:var(--text);color:#fff;padding:13px 22px;border-radius:12px;font-size:15px;font-weight:600;border:none;transition:transform .15s,background .15s}
.btn-dark:hover{background:#000;transform:translateY(-1px)}
.btn-ghost{display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--text);padding:13px 22px;border-radius:12px;font-size:15px;font-weight:600;border:1px solid var(--border-strong);transition:transform .15s,border-color .15s}
.btn-ghost:hover{border-color:var(--muted-2);transform:translateY(-1px)}

/* Section heading */
.tools-sec{padding:72px 0}
.tools-sec.alt{background:var(--surface);border-block:1px solid var(--border)}
.sec-head{text-align:center;max-width:640px;margin:0 auto 44px}
.sec-head .kicker{display:inline-block;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-600);margin-bottom:12px}
.sec-head h2{font-family:var(--display);font-weight:700;font-size:clamp(26px,3.4vw,38px);letter-spacing:-.02em;margin:0 0 12px;line-height:1.1}
.sec-head p{font-size:16.5px;color:var(--muted);margin:0;line-height:1.6}

/* Tools grid */
.tools-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:1000px){.tools-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.tools-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.tools-grid{grid-template-columns:1fr}}

.tool-card{position:relative;display:flex;flex-direction:column;gap:14px;padding:24px 22px 22px;background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);transition:transform .18s,box-shadow .18s,border-color .18s;overflow:hidden}
.tool-card::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--brand);opacity:.9}
.tool-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--border-strong)}
.tool-ic{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:var(--brand-soft)}
.tool-ic svg{width:30px;height:30px;display:block}
.tool-card h3{font-family:var(--display);font-weight:700;font-size:18px;letter-spacing:-.01em;margin:0}
.tool-card p{font-size:13.5px;color:var(--muted);margin:0;line-height:1.55;flex:1}
.tool-go{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;color:var(--brand);margin-top:2px}
.tool-go .icon{width:15px;height:15px;transition:transform .18s}
.tool-card:hover .tool-go .icon{transform:translateX(3px)}

/* Features band */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:860px){.feat-grid{grid-template-columns:1fr}}
.feat{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:26px 24px;box-shadow:var(--shadow-sm)}
.feat .feat-ic{width:46px;height:46px;border-radius:12px;background:var(--accent-soft);color:var(--accent-600);display:grid;place-items:center;margin-bottom:16px}
.feat .feat-ic .icon{width:22px;height:22px}
.feat h3{font-family:var(--display);font-weight:700;font-size:17.5px;margin:0 0 8px;letter-spacing:-.01em}
.feat p{font-size:14.5px;color:var(--muted);margin:0;line-height:1.6}

/* Steps */
.steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;counter-reset:s}
@media(max-width:860px){.steps3{grid-template-columns:1fr}}
.step3{position:relative;padding:26px 24px;background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.step3 .n{font-family:var(--mono);font-size:13px;color:var(--accent-600);font-weight:500}
.step3 h3{font-family:var(--display);font-weight:700;font-size:17.5px;margin:10px 0 8px;letter-spacing:-.01em}
.step3 p{font-size:14.5px;color:var(--muted);margin:0;line-height:1.6}

/* CTA */
.tools-cta{padding:76px 0;text-align:center}
.tools-cta .box{position:relative;overflow:hidden;background:var(--text);color:#fff;border-radius:26px;padding:58px 30px;box-shadow:var(--shadow-lg)}
.tools-cta .box::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 300px at 20% -20%,rgba(225,48,108,.4),transparent 60%),radial-gradient(600px 300px at 85% 120%,rgba(29,185,84,.34),transparent 60%);opacity:.6}
.tools-cta .box>*{position:relative;z-index:1}
.tools-cta h2{font-family:var(--display);font-weight:700;font-size:clamp(26px,3.4vw,38px);letter-spacing:-.02em;margin:0 0 12px}
.tools-cta p{font-size:16.5px;color:rgba(255,255,255,.72);margin:0 auto 26px;max-width:480px}
.btn-light{display:inline-flex;align-items:center;gap:9px;background:#fff;color:var(--text);padding:14px 24px;border-radius:12px;font-size:15px;font-weight:700;border:none;transition:transform .15s}
.btn-light:hover{transform:translateY(-2px)}

/* pointer to the design & print tools page */
.tools-more{margin:26px 0 0;text-align:center;color:var(--muted);font-size:15px}
.tools-more a{color:var(--accent-600);font-weight:600}

/* design & print hub: grouped tools */
.dt-group { margin: 0 0 44px; }
.dt-title { font-family: var(--display); font-size: 24px; letter-spacing: -.02em; margin: 0 0 6px; }
.dt-intro { margin: 0 0 18px; color: var(--muted); max-width: 640px; }

.dt-jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 30px; }
.dt-jump a { font-size: 14px; font-weight: 600; padding: 8px 14px; border-radius: 99px; border: 1px solid var(--border); background: #fff; color: var(--text); }
.dt-jump a:hover { border-color: var(--accent); color: var(--accent-600, #4338ca); }