/* ==============================================================
   BASE — reset, variables, typography, header, hero, layout
   ============================================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* Smooth scroll for in-page nav links; offset accounts for the 62px
   sticky header so anchors don't land hidden under it. */
html{scroll-behavior:smooth}
#builder,#titleCard,#tagCard,#allTools{scroll-margin-top:78px}
:root{
  /* IndexWolf purple — matches the brand logo. Variable names kept
     legacy (--orange / --blue from the CropWolf-orange original) so we
     don't have to rename every rule across all three CSS files. */
  --orange:#7c3aed;--orange-dark:#6d28d9;--orange-bg:#f5f3ff;
  --blue:#7c3aed;--blue-dark:#6d28d9;
  --green:#15803d;--green-bg:#dcfce7;
  --red:#dc2626;--red-bg:#fee2e2;
  --bg:#faf8f5;--card:#fff;--preview-bg:#f8fafe;
  --border:#e2e6ee;--border-strong:#c8cfdb;
  --text:#1f2937;--text-mute:#52606d;--text-faint:#94a3b8;
  --radius:14px;--radius-sm:8px;
}
html,body{height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background:var(--bg);color:var(--text);font-size:14px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:none;background:none}
input,select,textarea{outline:none;background:var(--card)}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}

/* ──────────────────────────────────────────────────────────────
   HEADER — modern SaaS-style sticky bar.
   Layout: brand block (logo + wordmark + tagline) · nav · made-by credit
   ────────────────────────────────────────────────────────────── */
header.site{
  background:rgba(255,255,255,.85);backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--border);
  padding:0 28px;display:flex;align-items:stretch;gap:20px;
  position:sticky;top:0;z-index:100;
  height:62px;
}
.brand{
  display:flex;align-items:center;gap:10px;letter-spacing:-.3px;
  font-size:18px;font-weight:800;text-decoration:none;
}
.brand-logo{height:32px;width:auto;display:block;flex-shrink:0}
.brand-name{display:inline-flex;line-height:1}
.brand-name-index{color:#5c544a}
.brand-name-wolf{color:var(--orange)} /* IndexWolf purple */
.brand-sub{
  font-size:10.5px;font-weight:700;color:var(--text-faint);
  text-transform:uppercase;letter-spacing:.7px;
  padding-left:12px;margin-left:4px;border-left:1px solid var(--border);
  align-self:center;line-height:1.2;
}

/* Modern nav: absolutely centered in the header regardless of brand or
   credit widths. Active link gets a purple underline bar tracing the
   bottom of the header. Hover lifts to dark text — no color flash. */
.nav{
  display:flex;gap:4px;align-items:stretch;
  position:absolute;left:50%;top:0;bottom:0;
  transform:translateX(-50%);
}
.nav a{
  display:inline-flex;align-items:center;
  padding:0 14px;
  font-size:13px;font-weight:600;color:var(--text-mute);
  letter-spacing:.1px;
  position:relative;
  transition:color .15s;
}
.nav a:hover{color:#3d3832;text-decoration:none}
.nav a.active{color:#3d3832;font-weight:700}
.nav a.active::after{
  content:"";position:absolute;left:14px;right:14px;bottom:-1px;
  height:2px;background:var(--orange);border-radius:2px 2px 0 0;
}

.site-actions{margin-left:auto;display:flex;align-items:center}

/* "Made by CropWolf" credit — discoverable, never competes with IndexWolf.
   No pill background; just inline text + small wolf icon on hover-friendly
   underline. */
.by-credit{
  font-size:11.5px;font-weight:600;color:var(--text-faint);
  text-decoration:none;transition:color .15s;
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 4px;
}
.by-credit:hover{color:var(--orange);text-decoration:none}
.by-credit-logo{height:18px;width:auto;display:block;opacity:.85;transition:opacity .15s}
.by-credit:hover .by-credit-logo{opacity:1}
.by-credit-arrow{
  font-size:10px;opacity:.5;transition:transform .15s;display:inline-block;
}
.by-credit:hover .by-credit-arrow{transform:translateX(2px);opacity:1}

/* Demo banner */
.demo-banner{
  background:linear-gradient(90deg,#fef3c7,#fde68a);
  color:#92400e;padding:8px 24px;font-size:12px;font-weight:700;text-align:center;
  border-bottom:1px solid #fcd34d;
}
.demo-banner code{background:rgba(0,0,0,.08);padding:1px 6px;border-radius:4px;font-size:11px}

/* ──────────────────────────────────────────────────────────────
   HERO — modern, tight, single column of focused content.
   Subtle gradient + radial glow under the H1 for depth.
   ────────────────────────────────────────────────────────────── */
.hero{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,#f5f3ff 0%,var(--bg) 100%);
  padding:48px 24px 28px;text-align:center;border-bottom:1px solid var(--border);
}
.hero::before{
  content:"";position:absolute;left:50%;top:-40px;
  width:520px;height:200px;transform:translateX(-50%);
  background:radial-gradient(ellipse at center,rgba(124,58,237,.13),transparent 70%);
  pointer-events:none;
}
.hero > *{position:relative;z-index:1}
.hero-eyebrow{
  display:inline-block;font-size:11px;font-weight:700;letter-spacing:.8px;
  text-transform:uppercase;color:var(--orange);
  background:rgba(124,58,237,.08);border:1px solid rgba(124,58,237,.18);
  padding:5px 12px;border-radius:20px;margin-bottom:14px;
}
.hero h1{
  font-size:38px;font-weight:800;color:#1f2937;line-height:1.1;
  margin-bottom:10px;letter-spacing:-.8px;
}
.hero h1 .accent{
  color:var(--orange);
  background:linear-gradient(180deg,transparent 60%,rgba(124,58,237,.18) 60%);
  padding:0 4px;
}
.hero-platforms{
  /* width:max-content + auto-margins keeps the pill capsule snug around
     its 3 children AND centers it as its own block — so it sits on its
     own row above the chips, not inline next to them. */
  display:flex;gap:4px;flex-wrap:wrap;justify-content:center;
  margin:14px auto 16px;width:max-content;max-width:100%;
  padding:4px;background:#fff;border:1px solid var(--border);border-radius:24px;
  box-shadow:0 1px 3px rgba(0,0,0,.04);
}
.hero-platform-pill{
  background:transparent;border:none;border-radius:18px;
  padding:7px 16px;font-size:13px;font-weight:600;color:var(--text-mute);
  cursor:pointer;transition:all .15s;
}
.hero-platform-pill:hover{color:#3d3832}
.hero-platform-pill.active{
  background:var(--orange);color:#fff;font-weight:700;
  box-shadow:0 2px 8px rgba(124,58,237,.3);
}
.hero p.sub{
  font-size:15px;color:var(--text-mute);max-width:580px;
  margin:0 auto 16px;line-height:1.55;
}
.hero .chips{display:flex;gap:18px;flex-wrap:wrap;justify-content:center}
.chip{
  display:inline-flex;align-items:center;gap:6px;
  background:transparent;border:none;padding:0;
  font-size:12px;font-weight:600;color:var(--text-mute);
}
.chip .dot{
  color:var(--green);font-weight:900;font-size:13px;
  display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;border-radius:50%;background:var(--green-bg);
}
@media (max-width:540px){
  .hero{padding:32px 16px 22px}
  .hero h1{font-size:26px}
  .hero .chips{gap:12px}
}

/* SEO intro content — sits between hero and main tool. Each landing
   page writes its own unique copy here so Google reads each URL as
   distinct content (avoids duplicate-content penalties). */
.intro-content{
  max-width:780px;margin:0 auto;padding:28px 24px 8px;
  font-size:14.5px;line-height:1.65;color:var(--text-mute);
}
.intro-content p{margin-bottom:12px}
.intro-content p:last-child{margin-bottom:0}
.intro-content strong{color:#3d3832;font-weight:700}

/* Main layout */
main{padding:20px;max-width:1320px;margin:0 auto}
.builder{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:flex-start}

/* ──────────────────────────────────────────────────────────────
   FOOTER — three sections: link rows, brand attribution, legal.
   Designed for the SHIPPED site, not just this demo.
   ────────────────────────────────────────────────────────────── */
footer.site{
  background:#fff;border-top:1px solid var(--border);
  padding:36px 24px 28px;margin-top:48px;
}
.footer-inner{
  max-width:1100px;margin:0 auto;
  display:flex;flex-direction:column;gap:28px;
}

/* Section 1 — link rows */
.footer-links{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
  padding-bottom:24px;border-bottom:1px solid var(--border);
}
.footer-links-group{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.footer-links-label{
  font-size:10.5px;font-weight:800;color:var(--text-faint);
  text-transform:uppercase;letter-spacing:.7px;margin-bottom:2px;
}
.footer-links-group a{
  font-size:13px;font-weight:600;color:var(--text-mute);
  text-decoration:none;transition:color .15s;
}
.footer-links-group a:hover{color:var(--orange);text-decoration:none}
.footer-sister{display:inline-flex;align-items:center;gap:8px}
.footer-sister-logo{height:18px;width:auto;display:block;opacity:.85}
.footer-sister:hover .footer-sister-logo{opacity:1}
.footer-tools-list{
  font-size:11px;color:var(--text-faint);font-weight:600;
  line-height:1.55;margin-top:2px;
}

/* Section 2 — fine print (centered) */
.footer-legal{
  font-size:11.5px;color:var(--text-faint);line-height:1.6;
  text-align:center;
}
.footer-legal p{margin-bottom:4px}
.footer-legal a{color:var(--text-mute);font-weight:600}
.footer-legal a:hover{color:var(--orange)}
.footer-legal-fine{
  margin-top:10px;padding-top:10px;border-top:1px dashed var(--border);
  font-size:11px;line-height:1.55;
}

/* Mobile — stack the link columns */
@media (max-width:640px){
  footer.site{padding:28px 16px 22px}
  .footer-links{grid-template-columns:1fr;gap:20px}
}

/* Mobile — .discovery-grid responsive rules live in components.css now */
@media (max-width:920px){
  .builder{grid-template-columns:1fr}
  .preview-card{position:relative;top:0}
  .nav{display:none}
}
@media (max-width:540px){
  .hero h1{font-size:24px}
  .selectors{grid-template-columns:1fr}
  .style-chips{grid-template-columns:1fr}
  main{padding:14px}
}