/* ============================================================
   Aura Tools — Shared Stylesheet (all pages link to this)
   THEME SWITCH: change the values in :root below.
   For a WHITE theme, use the commented values on the right.
   ============================================================ */
:root{
  --bg:#000000;          /* white: #f7f8fa  */
  --bg2:#0a0a0a;         /* white: #ffffff  */
  --card:#111111;        /* white: #ffffff  */
  --card-hover:#1a1a1a;  /* white: #f1f3f7  */
  --text:#ffffff;        /* white: #0f172a  */
  --muted:#a1a1aa;       /* white: #64748b  */
  --border:#27272a;      /* white: #e5e9f0  */
  --glass:rgba(255,255,255,.05);   /* white: #f7f8fa */
  --glassb:rgba(255,255,255,.15);  /* white: #e5e9f0 */
  --accent:#8b5cf6;
  --accent-2:#8b5cf6;
  --radius:14px; --max:1140px;

  /* Type scale — the only sizes any component may use.
     Ad-hoc font-size values elsewhere are a bug, not a variant. */
  --fs-2xs:11px;   /* badges, eyebrows            */
  --fs-xs:12.5px;  /* card meta, fine print       */
  --fs-sm:14px;    /* body small, card copy       */
  --fs-md:15px;    /* body, section standfirst    */
  --fs-lg:18px;    /* card titles, FAQ questions  */
  --fs-xl:23px;    /* card icons                  */
  --fs-h2:clamp(22px,3.6vw,32px);
  --fs-h1:clamp(32px,6vw,56px);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--bg);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--max);margin:0 auto;padding:0 22px}

/* Header */
header.site{position:sticky;top:0;z-index:50;background:rgba(0,0,0,.72);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--border)}
.hbar{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:var(--fs-lg);letter-spacing:-.3px}
.brand .mk{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:#fff;color:#000;font-size:var(--fs-md)}
.nav{display:flex;gap:4px;align-items:center}
.nav a{padding:8px 9px;border-radius:9px;font-size:14.5px;font-weight:500;color:var(--muted);transition:.15s;white-space:nowrap}
.nav a:hover,.nav a.active{color:#fff;background:var(--glass)}
.nav a.cta{background:#fff;color:#000;font-weight:600}
/* .burger is styled in the responsive layer injected into each page */

/* Buttons */
.btn{display:inline-block;padding:13px 26px;border-radius:11px;font-weight:600;font-size:var(--fs-md);cursor:pointer;border:none;font-family:inherit;transition:.15s}
.btn-w{background:#fff;color:#000}.btn-w:hover{background:#e4e4e7;transform:translateY(-2px)}
.btn-o{background:var(--glass);color:#fff;border:1px solid var(--glassb)}.btn-o:hover{border-color:#fff}

/* Hero */
.hero{text-align:center;padding:80px 0 48px}
.hero .tag{display:inline-block;background:var(--glass);border:1px solid var(--glassb);color:var(--muted);font-size:var(--fs-xs);padding:7px 16px;border-radius:30px;margin-bottom:24px}
.hero h1{font-size:var(--fs-h1);font-weight:900;letter-spacing:-2px;line-height:1.06;margin-bottom:18px}
.hero h1 .g{color:var(--muted)}
.hero p{font-size:clamp(15px,2.2vw,18px);color:var(--muted);max-width:600px;margin:0 auto 28px}
.search{max-width:560px;margin:0 auto;display:flex;gap:10px}
/* Hero call-to-action row: its own class, centred on the page axis. */
.hero-cta{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px}
.search input{flex:1;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:14px 18px;color:#fff;font-size:15px;font-family:inherit}
.search input:focus{outline:none;border-color:var(--accent)}

/* Section headings */
section{padding:46px 0}
.sh{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:28px;flex-wrap:wrap;gap:10px}
.sh h2{font-size:var(--fs-h2);font-weight:800;letter-spacing:-.6px}
.sh a{color:var(--accent);font-size:var(--fs-sm);font-weight:600}
.sh p{color:var(--muted);font-size:var(--fs-md);width:100%}

/* Grids */
.grid{display:grid;gap:18px}
.g-4{grid-template-columns:repeat(4,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-2{grid-template-columns:repeat(2,1fr)}
/* CSS grid cannot centre a partial final row. For counts that do not
   divide evenly (5 tools across 3 columns) use this flex variant:
   same 3-up rhythm, but the orphan row centres instead of hugging left. */
.grid.g-fluid{display:flex;flex-wrap:wrap;justify-content:center}
.grid.g-fluid>*{flex:1 1 calc((100% - 36px)/3);max-width:calc((100% - 36px)/3)}

/* Cards */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:24px;transition:.18s;display:block}
.card:hover{background:var(--card-hover);border-color:var(--glassb);transform:translateY(-4px)}
.card .ic{width:50px;height:50px;border-radius:12px;display:grid;place-items:center;font-size:var(--fs-xl);background:var(--glass);border:1px solid var(--glassb);margin-bottom:15px}
.card h3{font-size:var(--fs-lg);font-weight:700;margin-bottom:7px}
.card p{color:var(--muted);font-size:var(--fs-sm);margin-bottom:12px}
.card .meta{font-size:var(--fs-xs);color:var(--accent);font-weight:600}
.badge{display:inline-block;font-size:var(--fs-2xs);font-weight:600;color:var(--accent);background:rgba(139,92,246,.12);padding:3px 9px;border-radius:20px;margin-bottom:10px}

/* Article (blog) */
.article{max-width:760px;margin:0 auto}
.article h1{font-size:clamp(28px,4.5vw,42px);font-weight:900;letter-spacing:-1px;line-height:1.15;margin-bottom:14px}
.article .byline{color:var(--muted);font-size:14px;margin-bottom:30px;padding-bottom:20px;border-bottom:1px solid var(--border)}
.article h2{font-size:24px;font-weight:800;margin:34px 0 12px}
.article h3{font-size:19px;font-weight:700;margin:24px 0 8px}
.article p{color:#d4d4d8;font-size:16px;margin-bottom:16px}
.article a{color:var(--accent);font-weight:500;text-decoration:underline}
.article ul,.article ol{color:#d4d4d8;font-size:16px;margin:0 0 16px 22px}
.article li{margin-bottom:8px}
.article .toolitem{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:18px 20px;margin-bottom:14px}
.article .toolitem h3{margin-top:0}

/* Footer */
footer{border-top:1px solid var(--border);margin-top:50px;padding:44px 0 26px;background:var(--bg2)}
.fg{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:28px;margin-bottom:28px}
.fb p{color:var(--muted);font-size:var(--fs-sm);margin-top:3px;max-width:320px}
.fc h2,.fc h5{font-size:var(--fs-xs);font-weight:800;margin-bottom:12px;text-transform:uppercase;letter-spacing:.08em;color:#fff}
.fc a{display:block;color:var(--muted);font-size:var(--fs-sm);padding:4px 0}
.fc a:hover{color:#fff}
.fbot{border-top:1px solid var(--border);padding-top:28px;text-align:center;color:var(--muted);font-size:var(--fs-xs)}

@media(max-width:900px){.g-4{grid-template-columns:repeat(2,1fr)}.g-3{grid-template-columns:repeat(2,1fr)}
  .grid.g-fluid>*{flex-basis:calc((100% - 18px)/2);max-width:calc((100% - 18px)/2)}}
@media(max-width:680px){
  .g-4,.g-3,.g-2{grid-template-columns:1fr}
  .fg{grid-template-columns:1fr 1fr}.search{flex-direction:column}
  .grid.g-fluid>*{flex-basis:100%;max-width:100%}
}

/* AdSense Placeholders for CLS Prevention */
.ad-slot { display: flex; align-items: center; justify-content: center; background: var(--card); border: 1px dashed var(--border); border-radius: 8px; margin: 24px auto; color: var(--muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; overflow: hidden; }
/* An ad slot with nothing in it is just an empty dashed box labelled
   "Advertisement", which looks broken and reserves space for nothing.
   Hide slots until real ad code is actually placed inside them. */
.ad-slot:empty { display: none !important; }
.ad-header { width: 100%; max-width: 728px; min-height: 90px; }
.ad-in-article { width: 100%; min-height: 250px; margin: 32px 0; }
.ad-sidebar { width: 100%; max-width: 300px; min-height: 250px; }

/* ---- FAQ: proximity, so each question binds to its own answer ---- */
.faq{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:8px 24px}
.faq-item{padding:22px 0;border-top:1px solid var(--border)}
.faq-item:first-child{border-top:none}
.faq-item h3{font-size:var(--fs-lg);font-weight:700;margin-bottom:6px}
.faq-item p{color:var(--muted);font-size:var(--fs-sm);margin:0}

/* ---- Guide cards: match the breathing room of the tool cards ---- */
.card.card-guide{padding:26px 24px}
.card-guide h3{font-size:var(--fs-lg);margin-bottom:8px}
.card-guide p{font-size:var(--fs-sm);margin-bottom:0}

/* ---- "Why choose" block ---- */
.why-h2{text-align:center;margin-bottom:30px;font-size:var(--fs-h2);font-weight:800}
.why-h3{display:flex;align-items:center;gap:8px;font-size:var(--fs-lg);font-weight:700;margin-bottom:7px}
.why-p{color:var(--muted);font-size:var(--fs-sm)}

/* ---- Small button variant (replaces one-off inline sizing) ---- */
.btn-sm{padding:8px 16px;font-size:var(--fs-xs)}