/* =============================================
   NEW-SECTIONS.CSS — Process, Why New Site, Founding Partner
   Birdbrain Digital
   ============================================= */

/* ---- ILLUMINATE EFFECT ON BENEFIT CARDS ---- */
/* Start muted — border and shadow are dim before illuminate-on fires */
.benefit-card--illuminate {
  border-color: rgba(255,255,255,0.04);
  box-shadow: none;
  transition:
    border-color 0.6s ease,
    border-top-color 0.6s ease,
    box-shadow 0.6s ease;
}

/* Staggered glow-on per card — high specificity beats style.css nth-child rules */
.benefits__grid .benefit-card--illuminate:nth-child(1).illuminate-on {
  border-color: rgba(240, 128, 0, 0.5);
  border-top: 3px solid var(--brand-orange);
  box-shadow: 0 0 36px rgba(240, 128, 0, 0.2);
}

.benefits__grid .benefit-card--illuminate:nth-child(2).illuminate-on {
  border-color: rgba(88, 34, 160, 0.5);
  border-top: 3px solid var(--brand-purple);
  box-shadow: 0 0 36px rgba(88, 34, 160, 0.2);
}

.benefits__grid .benefit-card--illuminate:nth-child(3).illuminate-on {
  border-color: rgba(0, 208, 239, 0.5);
  border-top: 3px solid var(--brand-cyan);
  box-shadow: 0 0 36px rgba(0, 208, 239, 0.2);
}

.benefits__grid .benefit-card--illuminate:nth-child(4).illuminate-on {
  border-color: rgba(0, 208, 239, 0.35);
  border-top: 3px solid var(--brand-cyan);
  box-shadow: 0 0 28px rgba(0, 208, 239, 0.14);
}

/* ---- PUNCHY STATEMENT SECTION ---- */
.punchy-statement {
  background: var(--color-bg);
  padding: var(--space-16) 0;
}

.punchy-statement__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
  text-align: center;
}

.punchy-statement__text {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.35;
  max-width: 640px;
}

/* ---- PROCESS SECTION ---- */
.process-section {
  background: var(--color-bg);
}

.process-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-10);
}

@media (max-width: 768px) {
  .process-grid {
    grid-template-columns: 1fr;
  }
}

.process-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  position: relative;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.process-card:hover {
  border-color: var(--color-accent);
  transform: translateY(-2px);
}

.process-card__number {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-accent);
  opacity: 0.25;
  line-height: 1;
  margin-bottom: var(--space-1);
}

.process-card__label {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-1);
}

.process-card__sublabel {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--color-accent);
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}

.process-card__body {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-bottom: var(--space-4);
}

.process-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.process-card__list li {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  padding-left: var(--space-5);
  position: relative;
}

.process-card__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
}

.process-cta {
  text-align: center;
  margin-top: var(--space-12);
}

/* ---- WHY NEW SITE SECTION ---- */
.why-new-site {
  background: var(--color-surface);
}

.why-new-site__body {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: 1.8;
  max-width: 680px;
  margin: 0 auto var(--space-6);
  text-align: center;
}

.comparison-table {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-top: var(--space-8);
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 640px) {
  .comparison-table {
    grid-template-columns: 1fr;
  }
}

.comparison-col {
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  border: 1px solid var(--color-border);
}

.comparison-col--old {
  background: var(--color-bg);
  opacity: 0.7;
}

.comparison-col--new {
  background: var(--color-bg);
  border-color: var(--color-accent);
  box-shadow: 0 0 0 1px var(--color-accent);
}

.comparison-col__label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--space-5);
  color: var(--color-text-muted);
}

.comparison-col--new .comparison-col__label {
  color: var(--color-accent);
}

.comparison-col__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.comparison-col__list li {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  padding-left: var(--space-5);
  position: relative;
  line-height: 1.5;
}

.comparison-col--old .comparison-col__list li::before {
  content: '\2715';
  position: absolute;
  left: 0;
  color: #ef4444;
  font-size: 0.75rem;
  top: 1px;
}

.comparison-col--new .comparison-col__list li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  color: var(--color-accent);
  font-size: 0.85rem;
  font-weight: 700;
  top: 0;
}

/* ---- FOUNDING PARTNER SECTION ---- */
.founding-partner {
  background: var(--color-bg);
}

.founding-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-8);
}

@media (max-width: 640px) {
  .founding-grid {
    grid-template-columns: 1fr;
  }
}

.founding-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  transition: border-color 0.2s ease;
}

.founding-card:hover {
  border-color: var(--color-accent);
}

.founding-card__icon {
  color: var(--color-accent);
  margin-bottom: var(--space-1);
}

.founding-card__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text);
}

.founding-card__body {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
}

.founding-cta {
  text-align: center;
  margin-top: var(--space-8);
}

/* ---- TRY IT RIGHT NOW SECTION ---- */
.try-it {
  background: var(--color-surface);
}

.try-it .section__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.try-it__prompts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin: var(--space-10) auto var(--space-8);
  max-width: 860px;
  width: 100%;
}

@media (max-width: 768px) {
  .try-it__prompts {
    grid-template-columns: 1fr;
    max-width: 480px;
  }
}

.try-it__prompt {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  text-align: center;
  transition: border-color 0.2s ease;
}

.try-it__prompt:hover {
  border-color: var(--color-accent);
}

.try-it__prompt-label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--color-accent);
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}

.try-it__prompt-text {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.5;
  font-style: italic;
}

.try-it__outcomes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
  max-width: 780px;
  width: 100%;
  margin: 0 auto var(--space-8);
}

@media (max-width: 640px) {
  .try-it__outcomes {
    grid-template-columns: 1fr;
  }
}

.try-it__outcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  padding: var(--space-7) var(--space-6);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
}

.try-it__outcome--problem {
  background: rgba(239, 68, 68, 0.07);
  border-color: rgba(239, 68, 68, 0.22);
}

.try-it__outcome--problem .try-it__outcome-icon {
  color: #ef4444;
}

.try-it__outcome--upgrade {
  background: rgba(0, 212, 255, 0.05);
  border-color: rgba(0, 212, 255, 0.18);
}

.try-it__outcome--upgrade .try-it__outcome-icon {
  color: var(--color-accent);
}

.try-it__outcome-content {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.try-it__outcome-title {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.3;
}

.try-it__outcome-body {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.5;
}

.try-it__cta-line {
  text-align: center;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-5);
}

.try-it__local-line {
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-4);
  font-style: italic;
}

/* ── Design Philosophy Callout ───────────────────────── */
.design-philosophy {
  background: var(--color-bg);
  padding: var(--space-16) 0;
}

.design-philosophy .section__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.design-philosophy__quote {
  margin: 0;
  padding: 0;
  border: none;
}

.design-philosophy__quote p {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.4;
  margin: 0 0 var(--space-4);
}

.design-philosophy__quote cite {
  font-size: var(--text-sm);
  color: var(--color-accent);
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.design-philosophy__body {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: 1.8;
  max-width: 600px;
}


/* AI VISIBILITY CHECKER */
.checker{max-width:680px;margin:3rem auto 0;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:2.5rem}
.checker__form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
.checker__field{display:flex;flex-direction:column;gap:.5rem}
.checker__field--full{grid-column:1/-1}
.checker__label{font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.checker__input{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:8px;color:#fff;font-size:.95rem;padding:.75rem 1rem;transition:border-color .2s,box-shadow .2s;width:100%;box-sizing:border-box;font-family:inherit}
.checker__input:focus{outline:none;border-color:var(--color-accent,#00d4ff);box-shadow:0 0 0 3px rgba(0,212,255,.12)}
.checker__input option{background:#1a1d2e;color:#fff}
.checker__error{background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.3);border-radius:8px;color:#f87171;font-size:.875rem;margin-top:1rem;padding:.75rem 1rem}
.checker__submit{margin-top:1.75rem;width:100%;justify-content:center;display:flex;align-items:center;cursor:pointer}
.checker__submit:disabled{opacity:.6;cursor:not-allowed}
.checker__privacy{color:rgba(255,255,255,.35);font-size:.75rem;margin-top:.75rem;text-align:center}
.checker__loading-inner{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:2rem 0;text-align:center}
.checker__spinner{width:48px;height:48px;border:3px solid rgba(0,212,255,.15);border-top-color:var(--color-accent,#00d4ff);border-radius:50%;animation:checker-spin .8s linear infinite}
@keyframes checker-spin{to{transform:rotate(360deg)}}
.checker__loading-text{color:#fff;font-size:1rem;font-weight:500}
.checker__loading-sub{color:rgba(255,255,255,.45);font-size:.85rem}
.checker__signal-wrap{display:flex;flex-direction:column;align-items:center;gap:.75rem;margin-bottom:2rem;padding:1.75rem;background:rgba(255,255,255,.03);border-radius:12px;border:1px solid rgba(255,255,255,.06)}
.checker__signal-label{font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.4)}
.checker__signal-bars{display:flex;gap:8px;align-items:flex-end}
.checker__bar{width:28px;border-radius:4px;background:rgba(255,255,255,.1);transition:background .5s ease}
.checker__bar[data-bar="1"]{height:24px}
.checker__bar[data-bar="2"]{height:36px}
.checker__bar[data-bar="3"]{height:48px}
.checker__signal-bars[data-signal="1"] .checker__bar[data-bar="1"]{background:#ef4444}
.checker__signal-bars[data-signal="2"] .checker__bar[data-bar="1"],.checker__signal-bars[data-signal="2"] .checker__bar[data-bar="2"]{background:#f59e0b}
.checker__signal-bars[data-signal="3"] .checker__bar[data-bar="1"],.checker__signal-bars[data-signal="3"] .checker__bar[data-bar="2"],.checker__signal-bars[data-signal="3"] .checker__bar[data-bar="3"]{background:#10b981}
.checker__signal-status{font-size:1.1rem;font-weight:700;color:#fff}
.checker__ai-response{background:rgba(0,212,255,.05);border:1px solid rgba(0,212,255,.15);border-radius:12px;padding:1.25rem 1.5rem;margin-bottom:1.25rem}
.checker__ai-label{color:rgba(255,255,255,.5);font-size:.75rem;font-weight:600;letter-spacing:.06em;margin-bottom:.75rem;text-transform:uppercase}
.checker__ai-text{color:rgba(255,255,255,.85);font-size:.95rem;line-height:1.65;font-style:italic}
.checker__findings{display:flex;flex-direction:column;gap:.75rem;margin-bottom:2rem}
.checker__finding{display:flex;align-items:flex-start;gap:.875rem;padding:1rem 1.25rem;border-radius:10px}
.checker__finding--ai{background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.2)}
.checker__finding--schema{background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.2)}
.checker__finding--ai .checker__finding-icon{color:#ef4444;flex-shrink:0;margin-top:1px}
.checker__finding--schema .checker__finding-icon{color:#f59e0b;flex-shrink:0;margin-top:1px}
.checker__finding-text{color:rgba(255,255,255,.8);font-size:.9rem;line-height:1.5}
.checker__audit-cta{text-align:center;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.07)}
.checker__audit-headline{color:#fff;font-size:1.25rem;font-weight:700;margin-bottom:.5rem}
.checker__audit-body{color:rgba(255,255,255,.55);font-size:.9rem;margin-bottom:1.5rem;line-height:1.6}
.checker__local{color:rgba(255,255,255,.3);font-size:.75rem;margin-top:.75rem}
.checker__limit-inner{display:flex;flex-direction:column;align-items:center;gap:.75rem;padding:2rem 0;text-align:center}
.checker__limit-icon{color:rgba(255,255,255,.3)}
.checker__limit-text{color:rgba(255,255,255,.6);font-size:1rem}
@media(max-width:600px){.checker{padding:1.5rem}.checker__form-grid{grid-template-columns:1fr}.checker__field--full{grid-column:1}}