:root{
  --bg:#0f172a;         /* slate-900 */
  --card:#111827;       /* gray-900 */
  --muted:#94a3b8;      /* slate-400 */
  --text:#e5e7eb;       /* gray-200 */
  --accent:#fbbf24;     /* amber-400 */
  --link:#60a5fa;       /* blue-400 */
  --ok:#34d399;         /* emerald-400 */
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;background:var(--bg);color:var(--text);}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1100px;margin:0 auto;padding:24px}
.nav{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 0}
.brand{display:flex;align-items:center;gap:12px;font-weight:700;font-size:1.1rem}
.brand .dot{width:10px;height:10px;border-radius:50%;background:var(--accent)}
.nav ul{display:flex;gap:18px;list-style:none;margin:0;padding:0}
.nav li a{padding:8px 10px;border-radius:10px}
.nav li a:hover{background:var(--card);}
.hero{display:grid;grid-template-columns:1.1fr 0.9fr;gap:28px;align-items:center;padding:32px 0}
.hero h1{font-size:3rem;line-height:1.05;margin:0}
.tagline{font-size:1.125rem;color:var(--muted);margin-top:8px}
.cta{margin-top:20px;display:flex;gap:12px;flex-wrap:wrap}
.btn{background:var(--accent);color: #ffffff;padding:12px 16px;border-radius:12px;font-weight:700;border:none;cursor:pointer}
.btn.secondary{background: #78350f;color: #ffffff;}
.grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:18px}
.card{background:linear-gradient(180deg,#111827, #0b1220);border:1px solid #1f2937;border-radius:16px;padding:18px}
.card h3{margin:0 0 6px 0}
.card p{margin:8px 0 0 0;color:var(--muted)}
.section{padding:24px 0}
.section h2{margin:0 0 12px 0;font-size:1.5rem}
.kicker{color:var(--ok);text-transform:uppercase;letter-spacing:.08em;font-size:.8rem}
.footer{margin-top:36px;padding:24px 0;border-top:1px solid #1f2937;color:var(--muted)}
.meta{display:flex;gap:12px;align-items:center;color:var(--muted);font-size:.9rem}
.badge{padding:6px 10px;background:#fbbf24;border-radius:999px;border:1px solid #f59e0b;color:#111827;font-weight:600;}
.list{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.list li{background:var(--card);border:1px solid #1f2937;padding:12px;border-radius:12px}
input[type="email"]{width:100%;padding:12px;border-radius:12px;border:1px solid #223049;background:var(--card);color:var(--text)}
.subscribe{display:grid;grid-template-columns:2fr 1fr;gap:12px}
small.disclaimer{color:var(--muted);display:block;margin-top:6px}
.note{font-size:.95rem;color:var(--muted)}
@media (max-width: 980px){
  .hero{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 640px){
  .grid{grid-template-columns:1fr}
  .list{grid-template-columns:1fr}
  .hero h1{font-size:2.2rem}
}


/* Brand-forward hero title */
.site-title{
  font-size: clamp(2.2rem, 6vw, 4rem);
  line-height: 1.05;
  letter-spacing: .02em;
  font-weight: 800;
  margin: 0 0 8px 0;
  color: var(--text);
  text-shadow: 0 1px 0 rgba(0,0,0,.1);
}
.site-subtitle{
  font-size: clamp(1rem, 2.4vw, 1.35rem);
  color: var(--muted);
  margin-top: 2px;
}
/* Optional accent underline */
.title-accent{
  display:inline-block;
  height:6px;
  width:72px;
  border-radius:6px;
  background: linear-gradient(90deg, var(--accent), #ffd166);
  margin: 14px 0 6px 0;
}

/* Single-column hero layout */
.hero.hero-single{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:60vh;
  text-align:center;
  padding:48px 0;
  gap: 0;
}
.hero.hero-single .meta{justify-content:center}
.hero.hero-single .cta{justify-content:center}


/* NAV ALIGNMENT FIX */
.nav{display:flex;justify-content:center;align-items:center;gap:0;padding:16px 0}
.nav ul{display:flex;gap:22px;list-style:none;margin:0;padding:0;justify-content:center;align-items:center}
.nav li a{padding:10px 12px;border-radius:10px}
.nav li a:hover{background:var(--card);}

/* === Accessibility & Performance Enhancements === */
:root{
  --text:#1f2937;           /* near-slate-800 */
  --bg:#ffffff;
  --muted:#6b7280;          /* slate-500 */
  --accent:#0f766e;         /* teal-700 (good contrast on white) */
  --accent-contrast:#ffffff;
  --card:#fafaf9;           /* warm off-white */
  --border:#e5e7eb;
}
html{color:var(--text); background:var(--bg); line-height:1.6;}
*{box-sizing:border-box;}
/* Better focus visibility */
:focus-visible{outline:3px solid var(--accent); outline-offset:3px;}
/* Skip link */
.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  position:fixed; left:16px; top:16px; width:auto; height:auto; padding:10px 14px;
  background:var(--accent); color:var(--accent-contrast); border-radius:8px; z-index:9999;
}
/* Nav and links */
.nav a{padding:8px 12px; border-radius:8px;}
.nav a:focus-visible, .nav a:hover{background:var(--card);}
/* Buttons */
.btn{display:inline-block; padding:12px 18px; border-radius:12px; border:1px solid var(--border);
     background:var(--accent); color: #ffffff; font-weight:600; cursor:pointer;}
.btn:hover, .btn:focus-visible{filter:brightness(0.95);}
/* Cards & sections */
.section{padding:24px 0;}
.card{background:var(--card); padding:20px; border:1px solid var(--border); border-radius:14px;}
/* Improve text sizing on small screens */
@media (max-width:640px){
  body{font-size:18px;}
  h1{font-size:1.8rem;}
  h2{font-size:1.4rem;}
}
/* Reduced motion preference */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important;}
}
/* Images lazy behavior hint if any added later */
img{max-width:100%; height:auto;}


/* === Button Contrast Fix (WCAG AA) === */
button, .btn, .button, a.btn, .cta button, .cta .btn, .hero .btn, .hero button {
  background-color: var(--accent) !important;   /* dark teal */
  color: var(--accent-contrast) !important;     /* white text */
  border: 1px solid var(--accent) !important;
  font-weight: 700;
  padding: 12px 18px;
  border-radius: 12px;
  letter-spacing: 0.2px;
  text-decoration: none;
}
button:hover, .btn:hover, .button:hover,
a.btn:hover, .cta .btn:hover, .hero .btn:hover, .hero button:hover,
button:focus-visible, .btn:focus-visible, .button:focus-visible,
a.btn:focus-visible, .cta .btn:focus-visible, .hero .btn:focus-visible, .hero button:focus-visible {
  filter: brightness(0.95);
}
/* If any button was using a light/yellow background inline, enforce readable text */
button[style*="background"], .btn[style*="background"], .button[style*="background"] {
  color: #111 !important; /* fallback for light backgrounds */
}
/* Ensure link-styled buttons are not low-contrast */
a.button, .link-button {
  background-color: var(--accent) !important;
  color: var(--accent-contrast) !important;
  border: 1px solid var(--accent) !important;
}


/* === Button Readability Hotfix v2 === */
a.btn, .btn { 
  background: var(--accent) !important;
  color: #ffffff;
  border: 1px solid var(--accent) !important;
}
a.btn.secondary, .btn.secondary {
  background: #78350f; /* very dark slate for strong contrast */
  color: #ffffff;
  border: 1px solid #0f172a !important;
}
a.btn:visited, .btn:visited { color: #ffffff !important; }


/* === Gold CTA Button Palette (Accessible Contrast) === */
a.btn, .btn {
  background-color: #b45309 !important; /* dark gold for contrast */
  color: #ffffff;
  border: 1px solid #92400e !important;
  font-weight: 700;
  padding: 12px 18px;
  border-radius: 12px;
  letter-spacing: 0.3px;
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease;
}
a.btn:hover, .btn:hover, a.btn:focus-visible, .btn:focus-visible {
  background-color: #92400e !important; /* deeper gold on hover */
  color: #ffffff !important;
}
a.btn.secondary, .btn.secondary {
  background-color: #78350f !important;
  border: 1px solid #78350f !important;
  color: #ffffff;
}


/* === FINAL OVERRIDE: Accessible Gold Buttons Everywhere === */
body .hero a, body .buttons a, body a.btn, body .btn, body .button, body button {
  background-color: #d97706 !important; /* warm gold */
  color: #ffffff !important;            /* white text */
  border: 1px solid #b45309 !important; /* bronze border */
  font-weight: 700;
  text-decoration: none !important;
}
body .hero a:hover, body .buttons a:hover, 
body a.btn:hover, body .btn:hover, body .button:hover, body button:hover,
body .hero a:focus-visible, body .buttons a:focus-visible, 
body a.btn:focus-visible, body .btn:focus-visible, body .button:focus-visible, body button:focus-visible {
  background-color: #b45309 !important; /* deeper bronze on hover/focus */
  color: #ffffff !important;
}
/* Secondary variant: if explicitly marked .secondary, make it lighter gold with dark text */
body a.btn.secondary, body .btn.secondary, body .button.secondary {
  background-color: #fbbf24 !important; /* light gold */
  color: #111827 !important;            /* near-black text for contrast */
  border: 1px solid #f59e0b !important; /* amber border */
}
body a.btn.secondary:hover, body .btn.secondary:hover,
body .button.secondary:hover {
  background-color: #f59e0b !important; /* darker amber on hover */
  color: #111827 !important;
}
/* Ensure visited links keep readable color */
body a.btn:visited, body .btn:visited, body .button:visited {
  color: #ffffff !important;
}