/* =========================
   Global Reset & Base Styles
   ========================= */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', sans-serif;
  line-height: 1.6;
  color: #0f172a; /* slate-900 */
  background-color: #f8fafc; /* slate-50 */
  background-image: radial-gradient(circle, rgba(0,0,0,0.03) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* =========================
   Hero Section
   ========================= */
.hero {
  background: linear-gradient(270deg, #0ea5e9, #10b981, #0ea5e9);
  background-size: 600% 600%;
  animation: gradientShift 15s ease infinite;
  color: white;
  padding: 6rem 1rem;
  text-align: center;
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.hero h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.hero p {
  font-size: 1.25rem;
  max-width: 40rem;
  margin: 0 auto 2rem auto;
}

/* =========================
   Sections
   ========================= */
.section {
  padding: 4rem 1rem;
}

.section + .section {
  border-top: 4px solid transparent;
  border-image: linear-gradient(to right, #0ea5e9, #10b981) 1;
}

.section h2 {
  font-size: 2rem;
  margin-bottom: 2rem;
  text-align: center;
  color: #0f172a;
}

/* =========================
   Grid Layout
   ========================= */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

/* =========================
   Cards
   ========================= */
.card {
  background: white;
  border-radius: 0.75rem;
  padding: 2rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  opacity: 0;
  transform: translateY(20px);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.12);
}

.card.visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* =========================
   Buttons & Links
   ========================= */
button,
a.button {
  display: inline-block;
  background: linear-gradient(to right, #0ea5e9, #10b981);
  color: white;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.25s ease;
}

button:hover,
a.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
  opacity: 0.95;
}

a {
  color: #0ea5e9;
  text-decoration: none;
}

a:hover {
  color: #10b981;
  text-decoration: underline;
}

/* =========================
   Forms
   ========================= */
.contact-form {
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.contact-form label {
  display: flex;
  flex-direction: column;
  font-weight: 500;
  color: #334155; /* slate-700 */
}

.contact-form input,
.contact-form textarea {
  padding: 0.75rem;
  border: 1px solid #cbd5e1; /* slate-300 */
  border-radius: 0.5rem;
  font-size: 1rem;
  font-family: inherit;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: #0ea5e9;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.3);
}

/* =========================
   Footer
   ========================= */
footer {
  text-align: center;
  padding: 2rem 1rem;
  background: #0f172a;
  color: #f1f5f9;
  font-size: 0.875rem;
}
/* === COMPATIBILITY PATCH: restore prior layout while keeping new polish === */

/* 1) Container width & padding like before */
.container{
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

/* 2) Nav sizing & spacing */
.nav{ position: sticky; top: 0; background: #fff; z-index: 50; border-bottom: 1px solid #e2e8f0; }
.nav-inner{ display:flex; justify-content:space-between; align-items:center; height:72px; }
.brand img{ height:36px; }
@media (min-width:1024px){ .brand img{ height:40px; } }
.nav-links{ display:flex; gap:18px; align-items:center; }
.nav-links a{ text-decoration:none; color:#0f172a; opacity:.9; }
.nav-links a:hover{ opacity:1; }

/* 3) Hero alignment & spacing (was left-aligned w/ roomy top) */
.hero{
  padding: 112px 0 64px;
  text-align: left;              /* undo center alignment */
}
.hero .lead{ color:#e2e8f0; font-size:18px; max-width:60ch; }

/* 4) Section vertical rhythm like before */
.section{
  padding: 80px 0;               /* restore taller sections */
  margin: 0;                      /* remove extra margin added by earlier patch */
  border: none;                   /* divider handled below */
}
/* keep the divider accent but make it subtle and not push layout */
.section::after{
  margin: 40px auto 0;
  width: 120px;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(to right, #10b981, #0ea5e9);
  opacity: .9;
}

/* 5) Keep your color-block sections */
#about{ background:#eef2ff; }
#insights{ background:#ffffff; }
#resources{ background:#dbeafe; }
#media{ background:#e9d5ff; }
#contact{ background:#f1f5f9; }

/* 6) Grid breakpoints for 3-up cards like before */
.grid{ display:grid; gap:18px; }
.cols-3{ grid-template-columns: 1fr; }
@media (min-width:860px){
  .cols-3{ grid-template-columns: repeat(3, 1fr); }
}

/* 7) KPI and ticker (if used) */
.kpis{ display:grid; gap:12px; grid-template-columns:repeat(3,1fr); margin-top:16px; }
.kpi{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(2,8,23,.08);
  border-radius: 12px; padding: 12px; text-align:center;
  box-shadow: 0 8px 24px rgba(2,8,23,.10);
}
.kpi b{ display:block; font-size:30px; color:#10b981; margin-bottom:6px; }
.kpi span{ color:#0f172a; font-size:15px; }

.ticker-wrap{
  margin:18px 0;
  border-top:1px solid rgba(255,255,255,.35);
  border-bottom:1px solid rgba(255,255,255,.35);
  overflow:hidden; white-space:nowrap;
}
.ticker{ display:inline-block; padding:10px 0; animation:scroll 14s linear infinite; }
.ticker span{ margin:0 22px; }
@keyframes scroll{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
/* Checkerboard pattern overlay */
.hero.checkerboard {
  /* Checkerboard pattern (stationary) */
  background-image:
    linear-gradient(45deg, rgba(255,255,255,0.05) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255,255,255,0.05) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(255,255,255,0.05) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(255,255,255,0.05) 75%),
    var(--hero-gradient); /* <-- your animated gradient */
  
  background-size:
    40px 40px, 40px 40px, 40px 40px, 40px 40px,
    200% 200%; /* gradient still animates, checkerboard is fixed */
  
  background-position:
    0 0, 0 20px, 20px -20px, -20px 0,
    0 0; /* lock pattern, animate only gradient */
  
  animation: gradientShift 12s ease infinite; /* applies only to gradient */
}
/* === Hero + Checkerboard overlay (pattern stays still, gradient moves) === */
.hero.checkerboard {
  background-image:
    /* PATTERN layers (top, stationary) */
    linear-gradient(45deg,  rgba(255,255,255,0.06) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255,255,255,0.06) 25%, transparent 25%),
    linear-gradient(45deg,  transparent 75%, rgba(255,255,255,0.06) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(255,255,255,0.06) 75%),
    /* GRADIENT (bottom, animated) */
    linear-gradient(270deg, #10b981, #0ea5e9, #38bdf8);

  background-size:
    28px 28px, 28px 28px, 28px 28px, 28px 28px, 600% 600%;
  background-position:
    0 0, 14px 14px, 0 0, 14px 14px, 0% 50%;

  animation: heroGradientShiftChecks 14s ease infinite; /* only gradient moves */
}

@keyframes heroGradientShiftChecks {
  0%   { background-position: 0 0, 14px 14px, 0 0, 14px 14px,   0% 50%; }
  50%  { background-position: 0 0, 14px 14px, 0 0, 14px 14px, 100% 50%; }
  100% { background-position: 0 0, 14px 14px, 0 0, 14px 14px,   0% 50%; }
}
/* Hero subtitle polish */
.hero p {
  font-size: 1.25rem;            /* slightly larger than normal */
  font-weight: 500;              /* medium bold */
  text-shadow: 0 2px 6px rgba(0,0,0,0.4);  /* soft lift */
  background: rgba(255,255,255,0.08); /* faint highlight pill */
  padding: 0.4em 0.8em;
  border-radius: 6px;
  display: inline-block;
}
/* === Hero: Large hinted tiles (teal left, blue right) over animated gradient === */
/* Requirements: .hero must already be position:relative or we set it here */
.hero { position: relative; overflow: hidden; }

/* Turn it on by adding class="hero tiles-hinted" */
.hero.tiles-hinted::before,
.hero.tiles-hinted::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Left overlay — TEAL (subtle, fades toward center) */
.hero.tiles-hinted::before {
  /* only cover left ~60% */
  right: 40%;
  background-image:
    /* big checker tiles */
    linear-gradient(45deg,  rgba(16,185,129,0.10) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(16,185,129,0.10) 25%, transparent 25%),
    linear-gradient(45deg,  transparent 75%, rgba(16,185,129,0.10) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(16,185,129,0.10) 75%),
    /* small secondary tiles for irregularity */
    linear-gradient(45deg,  rgba(16,185,129,0.05) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(16,185,129,0.05) 25%, transparent 25%),
    linear-gradient(45deg,  transparent 75%, rgba(16,185,129,0.05) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(16,185,129,0.05) 75%);
  background-size:
    80px 80px, 80px 80px, 80px 80px, 80px 80px,
    40px 40px, 40px 40px, 40px 40px, 40px 40px;
  background-position:
    0 0, 40px 40px, 0 0, 40px 40px,
    12px 8px, 32px 24px, -8px -6px, 20px 14px; /* offsets for non-uniform feel */
  /* fade toward center so it hints rather than blocks */
  mask-image: linear-gradient(to right, rgba(0,0,0,0.9), rgba(0,0,0,0));
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0.9), rgba(0,0,0,0));
}

/* Right overlay — BLUE (subtle, fades toward center) */
.hero.tiles-hinted::after {
  /* only cover right ~60% */
  left: 40%;
  background-image:
    /* big checker tiles */
    linear-gradient(45deg,  rgba(14,165,233,0.10) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(14,165,233,0.10) 25%, transparent 25%),
    linear-gradient(45deg,  transparent 75%, rgba(14,165,233,0.10) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(14,165,233,0.10) 75%),
    /* small secondary tiles for irregularity */
    linear-gradient(45deg,  rgba(14,165,233,0.05) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(14,165,233,0.05) 25%, transparent 25%),
    linear-gradient(45deg,  transparent 75%, rgba(14,165,233,0.05) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(14,165,233,0.05) 75%);
  background-size:
    80px 80px, 80px 80px, 80px 80px, 80px 80px,
    40px 40px, 40px 40px, 40px 40px, 40px 40px;
  background-position:
    right 0 top 0, right 40px top 40px, right 0 top 0, right 40px top 40px,
    right 12px top 8px, right 32px top 24px, right -8px top -6px, right 20px top 14px;
  /* fade toward center so it hints rather than blocks */
  mask-image: linear-gradient(to left, rgba(0,0,0,0.9), rgba(0,0,0,0));
  -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,0.9), rgba(0,0,0,0));
}

/* Accessibility: if user prefers reduced motion, animation stays off in your existing .hero rules */
/* === SIMPLE Hinted Tiles (teal left, blue right) — stationary — over animated gradient === */
.hero { position: relative; overflow: hidden; z-index: 0; }
.hero > * { position: relative; z-index: 1; }

/* Left (teal) */
.hero.tiles-hinted::before,
.hero.tiles-hinted::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  pointer-events: none;
  z-index: 0;
}

/* Left 55% */
.hero.tiles-hinted::before {
  left: 0; right: 45%;

  background:
    /* big tiles */
    linear-gradient(45deg, rgba(16,185,129,0.06) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(16,185,129,0.06) 25%, transparent 25%),
    /* small tiles */
    linear-gradient(45deg, rgba(16,185,129,0.035) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(16,185,129,0.035) 25%, transparent 25%);

  background-size:
    96px 96px, 96px 96px,
    48px 48px, 48px 48px;

  background-position:
    0 0, 48px 48px,
    12px 10px, 30px 22px;

  /* fade toward center */
  box-shadow: inset -140px 0 120px -80px rgba(255,255,255,0.85);
}

/* Right 55% */
.hero.tiles-hinted::after {
  left: 45%; right: 0;

  background:
    /* big tiles */
    linear-gradient(45deg, rgba(14,165,233,0.06) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(14,165,233,0.06) 25%, transparent 25%),
    /* small tiles */
    linear-gradient(45deg, rgba(14,165,233,0.035) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(14,165,233,0.035) 25%, transparent 25%);

  background-size:
    96px 96px, 96px 96px,
    48px 48px, 48px 48px;

  background-position:
    right 0 top 0, right 48px top 48px,
    right 12px top 10px, right 30px top 22px;

  /* fade toward center */
  box-shadow: inset 140px 0 120px -80px rgba(255,255,255,0.85);
}