/* ================================================================
   Home page — tools/index.html
   Dark hero, quick-test, stats ticker, tool card grid, fail cases
   ================================================================ */

/* ===== Hero (dark) ===== */
.hero{background:linear-gradient(170deg,#1a1410 0%,#2b1a1a 50%,#1a1410 100%);color:#fff;padding:72px 0 56px;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;top:-80px;right:-80px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(200,16,46,.12),transparent 70%);pointer-events:none}
.hero::after{content:"";position:absolute;bottom:-60px;left:-60px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(184,137,58,.08),transparent 70%);pointer-events:none}
.hero-kicker{display:inline-flex;font-family:-apple-system,"Segoe UI",sans-serif;font-size:11px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--gold-light);background:rgba(184,137,58,.12);border:1px solid rgba(184,137,58,.25);border-radius:999px;padding:5px 14px;margin-bottom:20px}
.hero h1 .gold{color:var(--gold-light)}
.hero-sub{font-family:-apple-system,"Segoe UI",sans-serif;font-size:17px;color:rgba(255,255,255,.55);max-width:640px;margin:0 auto 36px;line-height:1.6}

/* Quick test input */
.qt-box{max-width:560px;margin:0 auto;position:relative}
.qt-input-wrap{display:flex;gap:0;border-radius:16px;overflow:hidden;background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.12);box-shadow:0 0 30px rgba(184,137,58,.08),0 4px 20px rgba(0,0,0,.3);transition:border-color .2s,box-shadow .2s}
.qt-input-wrap:focus-within{border-color:rgba(184,137,58,.4);box-shadow:0 0 40px rgba(184,137,58,.15),0 4px 20px rgba(0,0,0,.3)}
.qt-input-wrap input{flex:1;background:transparent;border:none;outline:none;color:#fff;font-family:Georgia,"Songti SC",serif;font-size:22px;padding:18px 20px;min-width:0}
.qt-input-wrap input::placeholder{color:rgba(255,255,255,.3)}
.qt-btn{border:none;background:var(--red);color:#fff;font-family:-apple-system,"Segoe UI",sans-serif;font-weight:800;font-size:15px;padding:0 28px;cursor:pointer;transition:.15s;white-space:nowrap;letter-spacing:.3px}
.qt-btn:hover{background:var(--red2)}
.qt-hint{font-family:-apple-system,"Segoe UI",sans-serif;font-size:12px;color:rgba(255,255,255,.3);margin-top:12px}
.qt-chips{display:flex;justify-content:center;gap:8px;margin-top:14px;flex-wrap:wrap}
.qt-chip{font-family:-apple-system,"Segoe UI",sans-serif;font-size:12px;color:rgba(255,255,255,.5);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:999px;padding:5px 12px;cursor:pointer;transition:.15s}
.qt-chip:hover{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.2)}

/* Quick test result */
.qt-result{max-width:560px;margin:24px auto 0;display:none;animation:qtPop .3s ease}
.qt-result.show{display:block}
@keyframes qtPop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.qt-result-card{border-radius:16px;padding:24px;text-align:center;position:relative;overflow:hidden}
.qt-result-card.safe{background:rgba(29,134,80,.15);border:1px solid rgba(29,134,80,.3)}
.qt-result-card.warn{background:rgba(217,138,0,.15);border:1px solid rgba(217,138,0,.3)}
.qt-result-card.danger{background:rgba(200,16,46,.15);border:1px solid rgba(200,16,46,.3)}
.qt-score{font-family:-apple-system,"Segoe UI",sans-serif;font-size:56px;font-weight:900;line-height:1;margin-bottom:4px}
.qt-result-card.safe .qt-score{color:#4ade80}
.qt-result-card.warn .qt-score{color:#fbbf24}
.qt-result-card.danger .qt-score{color:#f87171}
.qt-label{font-family:-apple-system,"Segoe UI",sans-serif;font-size:13px;font-weight:700;letter-spacing:1px;text-transform:uppercase;margin-bottom:10px}
.qt-result-card.safe .qt-label{color:rgba(74,222,128,.7)}
.qt-result-card.warn .qt-label{color:rgba(251,191,36,.7)}
.qt-result-card.danger .qt-label{color:rgba(248,113,113,.7)}
.qt-text{font-family:-apple-system,"Segoe UI",sans-serif;font-size:14px;color:rgba(255,255,255,.7);line-height:1.5;margin-bottom:16px}
.qt-cta{display:inline-flex;align-items:center;gap:6px;font-family:-apple-system,"Segoe UI",sans-serif;font-size:13px;font-weight:700;color:var(--gold-light);background:rgba(184,137,58,.15);border:1px solid rgba(184,137,58,.3);border-radius:999px;padding:8px 18px;cursor:pointer;text-decoration:none;transition:.15s}
.qt-cta:hover{background:rgba(184,137,58,.25);color:#fff}

/* ===== Extended result info (API response) ===== */
.qt-issues,.qt-suggestions,.qt-cached{font-family:-apple-system,"Segoe UI",sans-serif;font-size:12px;color:rgba(255,255,255,.6);text-align:left;margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.08)}
.qt-issues b,.qt-suggestions b{color:rgba(255,255,255,.85);font-size:11px;letter-spacing:.5px;text-transform:uppercase;display:block;margin-bottom:6px}
.qt-issue-tag{display:inline-block;padding:2px 8px;margin:2px 4px 2px 0;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:999px;font-size:11px;color:rgba(255,255,255,.75)}
.qt-suggestions div{margin-top:2px;color:rgba(255,255,255,.7)}
.qt-cached{text-align:center;color:rgba(255,255,255,.4);font-size:11px;padding-top:8px;border-top:none;margin-top:6px}

/* ===== Hero "read a playbook first" fallback link ===== */
.hero-read-link{margin-top:18px;text-align:center;font-family:-apple-system,"Segoe UI",sans-serif;font-size:13px;color:rgba(255,255,255,.45)}
.hero-read-link a{color:var(--gold-light);text-decoration:none;font-weight:700;transition:color .15s}
.hero-read-link a:hover{color:#fff;text-decoration:underline}

/* ===== Stats ticker ===== */
.stats{background:var(--dark2);padding:28px 0;border-top:1px solid rgba(255,255,255,.06)}
.stats-inner{display:flex;justify-content:center;gap:40px;flex-wrap:wrap;font-family:-apple-system,"Segoe UI",sans-serif}
.stat{display:flex;align-items:center;gap:8px;color:rgba(255,255,255,.5);font-size:13px}
.stat b{color:var(--gold-light);font-size:20px;font-weight:900;font-variant-numeric:tabular-nums}

/* ===== Tool cards ===== */
.tools-section{padding:64px 0 48px}
.tools-section h2{text-align:center;font-size:32px;margin-bottom:8px}
.tools-sub{text-align:center;color:var(--muted);font-family:-apple-system,"Segoe UI",sans-serif;font-size:16px;margin-bottom:36px;max-width:600px;margin-left:auto;margin-right:auto}
.tool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.tool-card{background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s;cursor:pointer;text-decoration:none;color:inherit;display:block}
.tool-card:hover{transform:translateY(-4px);box-shadow:0 16px 48px rgba(40,25,10,.15)}
.tool-card-bar{height:4px}
.tool-card-bar.red{background:var(--red)}
.tool-card-bar.gold{background:var(--gold)}
.tool-card-bar.blue{background:var(--blue)}
.tool-card-body{padding:22px 24px 24px}
.tool-card-icon{font-size:32px;margin-bottom:12px;font-family:"Songti SC",serif;font-weight:700}
.tool-card-icon.red{color:var(--red)}
.tool-card-icon.gold{color:var(--gold)}
.tool-card-icon.blue{color:var(--blue)}
.tool-card h3{font-size:20px;margin-bottom:6px}
.tool-card p{font-family:-apple-system,"Segoe UI",sans-serif;font-size:14px;color:var(--muted);line-height:1.55;margin-bottom:14px}
.tool-card-tags{display:flex;gap:6px;flex-wrap:wrap}
.tool-tag{font-family:-apple-system,"Segoe UI",sans-serif;font-size:11px;border-radius:999px;padding:3px 9px;font-weight:600}
.tool-tag.free{background:#e7f5ec;color:var(--green)}
.tool-tag.paid{background:#fff2db;color:var(--amber)}
.tool-tag.arrow{background:var(--paper2);color:var(--muted);margin-left:auto}

/* ===== Playbooks (long-form articles, sits between tool cards and fails) ===== */
.playbooks-section{padding:64px 0 48px;background:var(--paper2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.playbooks-section h2{text-align:center;font-size:32px;margin-bottom:8px}
.playbooks-section .tools-sub{margin-bottom:32px}
.playbook-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.playbook-card{background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s;cursor:pointer;text-decoration:none;color:inherit;display:flex;flex-direction:column}
.playbook-card:hover{transform:translateY(-4px);box-shadow:0 16px 48px rgba(40,25,10,.15)}
.playbook-card .pc-bar{height:4px}
.playbook-card .pc-bar.red{background:var(--red)}
.playbook-card .pc-bar.gold{background:var(--gold)}
.playbook-card .pc-bar.blue{background:var(--blue)}
.playbook-card .pc-cover{height:140px;display:grid;place-items:center;position:relative;overflow:hidden;color:#fff}
.playbook-card .pc-cover.red{background:linear-gradient(160deg,#1a1410 0%,#3a1520 60%,#8b0d22 100%)}
.playbook-card .pc-cover.gold{background:linear-gradient(160deg,#1a1410 0%,#3a2814 50%,#7a5a1e 100%)}
.playbook-card .pc-cover.blue{background:linear-gradient(160deg,#0d1a2b 0%,#143660 60%,#2558a6 100%)}
.playbook-card .pc-cover::before{content:"";position:absolute;top:-30px;right:-30px;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.08),transparent 70%);pointer-events:none}
.playbook-card .pc-icon{font-family:"Songti SC","Kaiti SC",serif;font-size:60px;line-height:1;position:relative;z-index:1;text-shadow:0 4px 20px rgba(0,0,0,.3)}
.playbook-card .pc-tool{position:absolute;bottom:10px;left:14px;font-family:-apple-system,"Segoe UI",sans-serif;font-size:10.5px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:#fff;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:3px 9px;z-index:1}
.playbook-card .pc-body{padding:20px 22px 22px;flex:1;display:flex;flex-direction:column}
.playbook-card .pc-meta{display:flex;flex-wrap:wrap;gap:10px;font-family:-apple-system,"Segoe UI",sans-serif;font-size:11.5px;color:var(--muted);margin-bottom:8px}
.playbook-card .pc-meta b{color:var(--ink);font-weight:700}
.playbook-card h3{font-size:18px;line-height:1.3;margin-bottom:8px;color:var(--ink)}
.playbook-card p{font-family:-apple-system,"Segoe UI",sans-serif;font-size:13.5px;color:var(--muted);line-height:1.5;margin-bottom:14px;flex:1}
.playbook-card .pc-cta{font-family:-apple-system,"Segoe UI",sans-serif;font-size:12.5px;font-weight:800;color:var(--red);display:inline-flex;align-items:center;gap:5px;align-self:flex-start}
.playbook-card .pc-cta::after{content:"→";transition:transform .15s}
.playbook-card:hover .pc-cta::after{transform:translateX(3px)}

@media (max-width:780px){
  .playbooks-section{padding:40px 0 32px}
  .playbooks-section h2{font-size:24px}
  .playbook-grid{grid-template-columns:1fr;gap:16px}
  .playbook-card .pc-cover{height:120px}
  .playbook-card .pc-icon{font-size:52px}
}

/* ===== Fail cases ===== */
.fails{padding:56px 0;background:var(--paper)}
.fails h2{text-align:center;font-size:28px;margin-bottom:8px}
.fails-sub{text-align:center;color:var(--muted);font-family:-apple-system,"Segoe UI",sans-serif;font-size:15px;margin-bottom:32px}
.fail-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.fail-card{background:#fef7f7;border:1px solid #f5d5d5;border-radius:14px;padding:18px 20px;display:flex;gap:14px;align-items:flex-start}
.fail-icon{width:36px;height:36px;border-radius:10px;background:#fbeaec;display:grid;place-items:center;font-size:18px;flex-shrink:0;color:var(--red)}
.fail-card h4{font-size:14px;margin-bottom:4px;color:var(--red2)}
.fail-card p{font-family:-apple-system,"Segoe UI",sans-serif;font-size:13px;color:var(--muted);line-height:1.5}
.fail-card .fail-fix{font-family:-apple-system,"Segoe UI",sans-serif;font-size:12px;color:var(--green);font-weight:700;margin-top:8px;display:block}

/* ===== Home responsive ===== */
@media(max-width:780px){
  .hero{padding:48px 0 40px}
  .hero-sub{font-size:15px}
  .qt-input-wrap input{font-size:18px;padding:14px 16px}
  .qt-btn{padding:0 18px;font-size:14px}
  .stats-inner{gap:20px}
  .stat b{font-size:17px}
  .tools-section{padding:40px 0 32px}
  .tools-section h2{font-size:24px}
  .tool-grid{grid-template-columns:1fr}
  .fails{padding:40px 0}
  .fails h2{font-size:22px}
  .fail-grid{grid-template-columns:1fr}
}
@media(max-width:420px){
  .hero h1{font-size:27px}
  .qt-input-wrap{flex-direction:column;border-radius:14px}
  .qt-btn{padding:14px;border-radius:0 0 12px 12px}
  .stats-inner{flex-direction:column;align-items:center;gap:12px}
  .tool-card-body{padding:18px 18px 20px}
}