/* =========================================================
   TOOLKIT — Design System
   Display: Space Grotesk | Body: Inter | Data: JetBrains Mono
   Ink #10182B | Paper #F7F8FA | Accent Teal #0E8F79 | Amber #FFB627
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  --ink:#10182B;
  --ink-soft:#3C4560;
  --muted:#6B7280;
  --paper:#F7F8FA;
  --paper-raised:#FFFFFF;
  --line:#E4E7EE;
  --teal:#0E8F79;
  --teal-deep:#0A6B58;
  --teal-tint:#E4F4F0;
  --amber:#FFB627;
  --amber-tint:#FFF4DC;
  --radius:10px;
  --shadow: 0 1px 2px rgba(16,24,43,.04), 0 8px 24px -12px rgba(16,24,43,.12);
  --maxw:1120px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Inter',system-ui,sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:'Space Grotesk',sans-serif;
  color:var(--ink);
  line-height:1.15;
  margin:0 0 .5em;
  letter-spacing:-0.01em;
}
p{margin:0 0 1em;color:var(--ink-soft);}
a{color:var(--teal-deep);text-decoration:none;}
a:hover{text-decoration:underline;}
code,.mono{font-family:'JetBrains Mono',monospace;}
img{max-width:100%;display:block;}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}

/* ---------- Header ---------- */
.site-header{
  border-bottom:1px solid var(--line);
  background:var(--paper-raised);
  position:sticky;top:0;z-index:50;
}
.site-header .wrap{
  display:flex;align-items:center;justify-content:space-between;
  height:68px;
}
.brand{
  display:flex;align-items:center;gap:8px;
  font-family:'Space Grotesk',sans-serif;
  font-weight:700;font-size:1.3rem;color:#fff;
}
.brand img{flex-shrink:0;}
.brand:hover{text-decoration:none;}
.brand-mark{
  width:34px;height:34px;border-radius:8px;
  background:linear-gradient(135deg,var(--teal) 0%, var(--teal-deep) 100%);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-family:'JetBrains Mono',monospace;font-weight:600;font-size:.85rem;
  flex-shrink:0;
}
.nav-links{display:flex;gap:28px;align-items:center;}
.nav-links a{color:var(--ink-soft);font-weight:500;font-size:.95rem;}
.nav-links a:hover{color:var(--teal-deep);text-decoration:none;}

/* ---------- Hero ---------- */
.hero{padding:64px 0 40px;border-bottom:1px solid var(--line);}
.hero .eyebrow{
  font-family:'JetBrains Mono',monospace;
  font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--teal-deep);background:var(--teal-tint);
  display:inline-block;padding:5px 12px;border-radius:100px;
  margin-bottom:18px;font-weight:600;
}
.hero h1{font-size:clamp(2rem,4.5vw,3rem);max-width:14ch;}
.hero p.lead{font-size:1.1rem;max-width:52ch;}
.search-box{
  margin-top:28px;max-width:520px;
  display:flex;gap:8px;
  background:var(--paper-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:6px;box-shadow:var(--shadow);
}
.search-box input{
  flex:1;border:0;background:none;padding:10px 12px;
  font-family:'Inter',sans-serif;font-size:.95rem;color:var(--ink);outline:none;
}
.search-box button{
  border:0;background:var(--ink);color:#fff;border-radius:6px;
  padding:10px 18px;font-weight:600;font-size:.9rem;cursor:pointer;
  font-family:'Inter',sans-serif;
}
.search-box button:hover{background:var(--teal-deep);}

/* ---------- Tool grid / categories ---------- */
.section{padding:48px 0;}
.section-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:24px;gap:16px;flex-wrap:wrap;}
.section-head h2{font-size:1.5rem;margin:0;}
.section-head .count{font-family:'JetBrains Mono',monospace;color:var(--muted);font-size:.85rem;}

.tool-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:16px;
}
.tool-card{
  background:var(--paper-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:20px;
  display:flex;flex-direction:column;gap:10px;
  transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.tool-card:hover{
  text-decoration:none;
  border-color:var(--teal);
  transform:translateY(-2px);
  box-shadow:var(--shadow);
}
.tool-card .tool-index{
  font-family:'JetBrains Mono',monospace;
  font-size:.75rem;color:var(--teal-deep);
  background:var(--teal-tint);
  width:28px;height:28px;border-radius:7px;
  display:flex;align-items:center;justify-content:center;
  font-weight:600;
}
.tool-card h3{font-size:1.05rem;margin:0;color:var(--ink);}
.tool-card p{font-size:.88rem;margin:0;color:var(--muted);}
.tool-card .tag{
  font-family:'JetBrains Mono',monospace;font-size:.7rem;
  color:var(--muted);text-transform:uppercase;letter-spacing:.05em;
}

/* ---------- Tool workspace page ---------- */
.tool-header{padding:36px 0 8px;}
.breadcrumb{font-size:.85rem;color:var(--muted);margin-bottom:14px;}
.breadcrumb a{color:var(--muted);}
.tool-header h1{font-size:1.9rem;}
.tool-header .tool-desc{max-width:60ch;color:var(--ink-soft);}

.workspace{
  display:grid;grid-template-columns:1fr 1fr;gap:20px;
  padding:24px 0 56px;align-items:start;
}
@media (max-width: 860px){ .workspace{grid-template-columns:1fr;} }

.panel{
  background:var(--paper-raised);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
}
.panel-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 18px;border-bottom:1px solid var(--line);
  background:#FBFBFD;
}
.panel-head .label{
  font-family:'JetBrains Mono',monospace;font-size:.75rem;
  text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600;
}
.panel-body{padding:18px;}

textarea, .out-box{
  width:100%;min-height:220px;
  border:1px solid var(--line);border-radius:8px;
  padding:14px;font-family:'JetBrains Mono',monospace;font-size:.9rem;
  color:var(--ink);resize:vertical;background:var(--paper);
}
textarea:focus{outline:2px solid var(--teal);outline-offset:1px;border-color:transparent;}
.out-box{white-space:pre-wrap;word-break:break-word;overflow:auto;}

.field{margin-bottom:14px;}
.field label{
  display:block;font-size:.82rem;font-weight:600;color:var(--ink-soft);margin-bottom:6px;
}
.field input[type=text], .field input[type=number], .field input[type=url], .field select{
  width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:7px;
  font-family:'Inter',sans-serif;font-size:.92rem;background:var(--paper);color:var(--ink);
}
.field input[type=color]{width:56px;height:38px;border:1px solid var(--line);border-radius:7px;padding:2px;background:var(--paper);}
.row{display:flex;gap:10px;flex-wrap:wrap;}
.row .field{flex:1;min-width:120px;}

.btn{
  display:inline-flex;align-items:center;gap:6px;
  border:0;border-radius:7px;padding:11px 20px;
  font-family:'Inter',sans-serif;font-weight:600;font-size:.9rem;
  cursor:pointer;background:var(--teal);color:#fff;
}
.btn:hover{background:var(--teal-deep);}
.btn.secondary{background:var(--paper);color:var(--ink);border:1px solid var(--line);}
.btn.secondary:hover{background:#EFF1F5;}
.btn-row{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap;}

.stat-row{display:flex;gap:20px;flex-wrap:wrap;margin-top:16px;}
.stat{
  background:var(--paper);border:1px solid var(--line);border-radius:8px;
  padding:10px 16px;min-width:90px;
}
.stat .num{font-family:'JetBrains Mono',monospace;font-weight:600;font-size:1.3rem;color:var(--teal-deep);}
.stat .lab{font-size:.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;}

.checkbox-row{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:14px;}
.checkbox-row label{display:flex;align-items:center;gap:6px;font-size:.88rem;color:var(--ink-soft);cursor:pointer;}

.swatch{
  width:100%;height:70px;border-radius:8px;border:1px solid var(--line);margin-bottom:14px;
}

.info-block{
  margin-top:36px;padding-top:28px;border-top:1px solid var(--line);
  max-width:70ch;
}
.info-block h2{font-size:1.15rem;}
.info-block p{font-size:.92rem;}

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid var(--line);background:var(--paper-raised);margin-top:40px;}
.site-footer .wrap{padding:32px 24px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;}
.site-footer p{margin:0;font-size:.85rem;color:var(--muted);}
.footer-links{display:flex;gap:18px;flex-wrap:wrap;}
.footer-links a{font-size:.85rem;color:var(--muted);}
.footer-links a:hover{color:var(--teal-deep);}

.badge-live{
  display:inline-flex;align-items:center;gap:5px;
  font-family:'JetBrains Mono',monospace;font-size:.7rem;color:var(--teal-deep);
  background:var(--teal-tint);padding:3px 9px;border-radius:100px;font-weight:600;
}
.badge-live::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--teal);display:inline-block;}

.copy-toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--ink);color:#fff;padding:10px 18px;border-radius:8px;
  font-size:.85rem;opacity:0;transition:all .2s ease;pointer-events:none;z-index:100;
}
.copy-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* =========================================================
   V3 ADDITIONS — Colored header, icon cards, feature strip,
   category cards, why-use row, FAQ accordion
   ========================================================= */

/* ---- Colored header (fixes "plain/invisible" header) ---- */
.site-header{
  background: linear-gradient(90deg, var(--ink) 0%, #1B2A4A 100%);
  border-bottom: 3px solid var(--teal);
}
.site-header .brand{ color:#fff; }
.site-header .brand-mark{
  background: linear-gradient(135deg, var(--teal) 0%, var(--amber) 100%);
  color:#0A1220;
}
.site-header .nav-links a{ color:#C7CEDD; }
.site-header .nav-links a:hover{ color:#fff; }

/* ---- Feature strip (100% Free / Instant / etc) ---- */
.feature-strip{
  background:var(--paper-raised);
  border-bottom:1px solid var(--line);
}
.feature-strip .wrap{
  display:flex;flex-wrap:wrap;gap:0;
  padding:18px 24px;
}
.feature-item{
  display:flex;align-items:center;gap:8px;
  flex:1;min-width:170px;padding:6px 16px;
  border-right:1px solid var(--line);
}
.feature-item:last-child{border-right:none;}
.feature-item .ficon{
  width:34px;height:34px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.05rem;flex-shrink:0;
  background:var(--teal-tint);
}
.feature-item .flabel{font-weight:700;font-size:.85rem;color:var(--ink);display:block;}
.feature-item .fsub{font-size:.75rem;color:var(--muted);}

/* ---- Icon tool cards (replace numbered cards) ---- */
.tool-card{ position:relative; }
.tool-card .tool-icon{
  width:44px;height:44px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;
  margin-bottom:2px;
}
.tool-card .badge-new{
  position:absolute;top:14px;right:14px;
  font-family:'JetBrains Mono',monospace;
  font-size:.62rem;font-weight:700;letter-spacing:.04em;
  background:var(--amber);color:#3A2A00;
  padding:2px 7px;border-radius:100px;
}
.tool-card .btn-usenow{
  margin-top:4px;display:inline-block;
  background:var(--teal);color:#fff;
  font-size:.8rem;font-weight:700;
  padding:7px 14px;border-radius:6px;text-align:center;
}
.tool-card:hover .btn-usenow{background:var(--teal-deep);}

/* ---- Category browse cards ---- */
.cat-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:18px;
}
.cat-card{
  background:var(--paper-raised);border:1px solid var(--line);
  border-radius:var(--radius);padding:22px;
}
.cat-card h3{
  display:flex;align-items:center;gap:8px;font-size:1.05rem;margin-bottom:12px;
}
.cat-card ul{list-style:none;margin:0 0 16px;padding:0;}
.cat-card li{
  font-size:.88rem;color:var(--ink-soft);padding:5px 0;
  display:flex;align-items:center;gap:7px;
}
.cat-card li::before{content:'✓';color:var(--teal);font-weight:700;}
.cat-card li a{color:var(--ink-soft);}
.cat-card li a:hover{color:var(--teal-deep);}
.cat-card .btn.secondary{width:100%;text-align:center;justify-content:center;}

/* ---- Why-use icon row ---- */
.why-row{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:20px;text-align:center;
}
.why-item .wicon{
  width:52px;height:52px;border-radius:50%;
  background:var(--teal-tint);color:var(--teal-deep);
  display:flex;align-items:center;justify-content:center;
  font-size:1.5rem;margin:0 auto 10px;
}
.why-item h4{font-size:.92rem;margin:0 0 4px;}
.why-item p{font-size:.8rem;margin:0;}

/* ---- FAQ accordion ---- */
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 20px;}
@media (max-width:760px){ .faq-grid{grid-template-columns:1fr;} }
.faq-item{
  background:var(--paper-raised);border:1px solid var(--line);
  border-radius:8px;overflow:hidden;
}
.faq-q{
  padding:14px 16px;font-weight:600;font-size:.92rem;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;gap:10px;
}
.faq-q::after{content:'+';font-size:1.2rem;color:var(--teal);flex-shrink:0;}
.faq-item.open .faq-q::after{content:'−';}
.faq-a{max-height:0;overflow:hidden;transition:max-height .2s ease;padding:0 16px;}
.faq-item.open .faq-a{max-height:300px;padding:0 16px 14px;}
.faq-a p{font-size:.87rem;margin:0;}

/* ---- Section subtitle band used on homepage ---- */
.section-divider{
  text-align:center;padding:8px 0 28px;
  font-family:'Space Grotesk',sans-serif;font-weight:600;color:var(--ink);
  position:relative;
}

/* ---- Resume template (English, maroon banded) ---- */
.resume-doc{background:#fff;border:1px solid var(--line);padding:20px;font-family:'Inter',sans-serif;color:#222;}
.resume-doc .r-title{
  background:#8C1F3F;color:#fff;text-align:center;font-weight:700;
  font-size:1.15rem;padding:10px;letter-spacing:.04em;
}
.resume-doc .r-top{display:flex;justify-content:space-between;gap:14px;margin:12px 0;align-items:flex-start;}
.resume-doc .r-photo{width:100px;height:120px;border:1px solid #999;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:.7rem;color:#999;overflow:hidden;}
.resume-doc .r-photo img{width:100%;height:100%;object-fit:cover;}
.resume-doc .r-section{background:#8C1F3F;color:#fff;font-weight:700;font-size:.85rem;padding:6px 10px;margin-top:14px;}
.resume-doc table{width:100%;border-collapse:collapse;font-size:.82rem;}
.resume-doc td, .resume-doc th{border:1px solid #ccc;padding:6px 8px;text-align:left;}
.resume-doc th{background:#f4e9ec;font-weight:700;}

/* ---- PDF tool drop zone ---- */
.drop-zone{
  border:2px dashed var(--line);border-radius:10px;padding:28px;
  text-align:center;color:var(--muted);cursor:pointer;font-size:.88rem;
  transition:border-color .15s ease, background .15s ease;
}
.drop-zone:hover{border-color:var(--teal);background:var(--teal-tint);}
.file-list{margin-top:12px;}
.file-list-item{
  display:flex;justify-content:space-between;align-items:center;
  padding:8px 12px;background:var(--paper);border:1px solid var(--line);
  border-radius:6px;margin-bottom:6px;font-size:.85rem;
}
.file-list-item button{border:0;background:none;color:#C0392B;cursor:pointer;font-size:.9rem;}

/* =========================================================
   V5 — MOBILE FIXES
   ========================================================= */

/* ---- Hamburger menu for mobile nav ---- */
.nav-toggle{ display:none; background:none; border:0; color:#fff; font-size:1.5rem; cursor:pointer; padding:4px 8px; }
@media (max-width: 860px){
  .site-header .wrap{ flex-wrap:wrap; height:auto; padding:12px 20px; }
  .nav-toggle{ display:block; }
  .nav-links{
    display:none; width:100%; flex-direction:column; gap:0;
    border-top:1px solid rgba(255,255,255,0.15); margin-top:12px; padding-top:8px;
  }
  .nav-links.open{ display:flex; }
  .nav-links a{ padding:10px 4px; border-bottom:1px solid rgba(255,255,255,0.08); }
}

/* ---- Tighter grids on small phones ---- */
@media (max-width: 420px){
  .tool-grid{ grid-template-columns:1fr; }
  .cat-grid{ grid-template-columns:1fr; }
  .why-row{ grid-template-columns:repeat(2,1fr); }
  .feature-item{ min-width:100%; border-right:none; border-bottom:1px solid var(--line); }
  .hero{ padding:40px 0 28px; }
  .stat-row{ gap:10px; }
  .stat{ min-width:80px;padding:8px 12px; }
}

/* ---- Reorder move buttons (touch-friendly alt to drag) ---- */
.move-btns{ display:flex; flex-direction:row; gap:3px; position:absolute; bottom:2px; left:2px; right:2px; justify-content:space-between; }
.move-btns button{
  width:24px;height:22px;font-size:.7rem;border:0;border-radius:3px;
  background:var(--ink);color:#fff;cursor:pointer;line-height:1;
}