@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Work+Sans:wght@400;500;600;700;800&display=swap');

:root{
  --track-bg: #141b28;
  --panel-bg: rgba(255,255,255,0.02);
  --lane-alt: rgba(255,255,255,0.02);
  --cream: #f5f0e6;
  --cream-dim: #a9a6a0;
  --gold: #ffb627;
  --line: #3a465e;
  --c1: #ff6b5b;
  --c2: #2ec4b6;
  --c3: #9b72cf;
  --c4: #4fa8e0;
  --c5: #a8d46b;
  --c6: #e85d8a;
  --radius-lg: 18px;
  --radius-md: 12px;
  --radius-sm: 8px;
}

*{ box-sizing: border-box; }

html,body{
  margin:0;
  background: radial-gradient(ellipse at top, #1c2740 0%, var(--track-bg) 60%);
  background-attachment: fixed;
  color: var(--cream);
  font-family: 'Work Sans', sans-serif;
  min-height: 100vh;
}

a{ color: inherit; }

.wrap{ max-width: 980px; margin: 0 auto; padding: 0 20px; }

/* --- Site header / nav --- */
.site-header{
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  margin-bottom: 10px;
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;
}
.brand{
  font-family:'Archivo Black', sans-serif;
  font-size: 20px;
  text-decoration:none;
  display:flex; align-items:center; gap:8px;
}
.brand .dot{ color: var(--gold); }
nav.site-nav{ display:flex; gap:6px; flex-wrap:wrap; }
nav.site-nav a{
  text-decoration:none;
  font-size: 13px; font-weight:700;
  color: var(--cream-dim);
  padding: 8px 12px;
  border-radius: 8px;
}
nav.site-nav a:hover, nav.site-nav a.active{
  color: var(--cream);
  background: rgba(255,255,255,0.05);
}

/* --- Page header block used on tool pages and home --- */
.page-header{ text-align:center; padding: 26px 0 10px; }
.eyebrow{
  font-size:12px; letter-spacing:3px; font-weight:700;
  color: var(--gold); text-transform:uppercase;
}
h1{
  font-family:'Archivo Black', sans-serif;
  font-size: clamp(28px, 5.5vw, 46px);
  margin: 6px 0 0;
}
.sub{ color: var(--cream-dim); font-size:14px; margin-top:8px; max-width: 560px; margin-left:auto; margin-right:auto; }

/* --- Panels / cards --- */
.panel{
  background: var(--panel-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px;
}

.tool-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
  margin: 28px 0;
}
.tool-card{
  display:block;
  background: var(--panel-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 22px;
  text-decoration:none;
  transition: transform .12s ease, border-color .12s ease;
}
.tool-card:hover{ transform: translateY(-3px); border-color: var(--gold); }
.tool-card .icon{ font-size: 30px; margin-bottom: 10px; display:block; }
.tool-card h3{ font-family:'Archivo Black', sans-serif; font-size: 17px; margin: 0 0 6px; }
.tool-card p{ color: var(--cream-dim); font-size: 13px; margin:0; line-height:1.5; }

/* --- Buttons --- */
button, .btn{
  font-family:'Work Sans', sans-serif; font-weight:700; border:none; border-radius:10px;
  padding: 12px 20px; cursor:pointer; font-size:14px; text-decoration:none; display:inline-block;
  transition: transform .08s ease, filter .15s ease;
}
button:active, .btn:active{ transform: scale(0.96); }
.btn-gold{ background: var(--gold); color:#1a1305; }
.btn-gold:hover{ filter: brightness(1.08); }
.btn-ghost{ background: transparent; color: var(--cream); border: 1px solid var(--line); }
.btn-ghost:hover{ background: rgba(255,255,255,0.04); }
.btn-row{ display:flex; gap:10px; justify-content:center; margin-top: 20px; flex-wrap:wrap; }

/* --- Footer --- */
.site-footer{
  margin-top: 60px; padding: 24px 0; border-top: 1px solid var(--line);
  text-align:center; color: var(--cream-dim); font-size: 12px;
}
.site-footer a{ color: var(--cream-dim); text-decoration: underline; }

.hint{ text-align:center; color: var(--cream-dim); font-size:13px; margin-top:16px; }

/* --- Tool description content (SEO + AdSense content requirement) --- */
.info-section{ margin-top: 40px; }
.info-section h2{ font-family:'Archivo Black', sans-serif; font-size: 19px; margin: 0 0 14px; }
.info-section p{ color: var(--cream-dim); font-size: 14px; line-height: 1.75; margin: 0 0 14px; }
.info-section p:last-child{ margin-bottom: 0; }

@media (max-width: 640px){
  nav.site-nav{ justify-content:center; width:100%; }
}