/* ============================================================
   CodebyCarter — personalities.css
   Each section gets its own brand DNA so scrolling feels like
   touring 10 different companies' websites.
   ============================================================ */

/* ---- 01 · HERO — editorial typographic studio ----
   Already restrained / italic-serif accent. Keep. */

/* ---- 02 · SERVICES — architectural minimalist firm ---- */
#services .eyebrow{
  font-family:'Space Grotesk',system-ui,sans-serif;font-weight:500;
  background:none;border:0;border-bottom:1px solid currentColor;
  padding:0 0 8px;border-radius:0;letter-spacing:.22em;
}
#services .eyebrow::before{display:none}
#services .section-title{letter-spacing:-.04em;font-weight:500}
#services .svc-h{font-weight:500;letter-spacing:-.025em}
#services .svc-num{font-family:'JetBrains Mono',monospace;font-weight:500}

/* ---- 03 · DEMOS — developer-tools company ---- */
#demos .eyebrow{
  font-family:'JetBrains Mono',monospace;letter-spacing:.04em;font-weight:700;
  background:rgba(132,204,22,.08);border-color:rgba(132,204,22,.3);
  color:#84CC16;
}
#demos .eyebrow::before{
  content:">_";width:auto;height:auto;border-radius:0;background:none;box-shadow:none;
  font-family:'JetBrains Mono',monospace;font-weight:700;color:#84CC16;animation:none;
}
#demos .section-title{font-weight:600;letter-spacing:-.025em}
#demos .section-title::before{
  content:"// ";font-family:'JetBrains Mono',monospace;color:#5A5A66;
  font-size:.5em;font-weight:400;vertical-align:0.4em;letter-spacing:-.02em;
}

/* ---- 04 · STYLE LAB — design playground ---- */
#lab .eyebrow{font-family:'JetBrains Mono',monospace;font-weight:600}
#lab .section-title .ital{
  background:linear-gradient(135deg,#A855F7,#EC4899,#FB923C,#06B6D4);
  background-size:200% 200%;animation:hue 6s linear infinite;
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ---- 05 · PROCESS — fashion magazine editorial ---- */
#process .eyebrow{
  font-family:'Instrument Serif',serif;font-style:italic;font-size:15px;
  text-transform:none;letter-spacing:.02em;font-weight:400;
  background:none;border:0;padding:0;color:#FB923C;
}
#process .eyebrow::before{
  content:"—  ";width:auto;height:auto;background:none;box-shadow:none;
  color:#FB923C;font-style:normal;font-family:'Instrument Serif',serif;
  border-radius:0;animation:none;
}
#process .section-title{
  font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;letter-spacing:-.015em;
}
#process .section-title .ital{font-family:inherit}

/* ---- 06 · PRICING — SaaS landing ---- */
#pricing .eyebrow{font-weight:600;letter-spacing:.15em}
#pricing .section-title{font-weight:600;letter-spacing:-.03em}
#pricing .tier-name{font-weight:700;letter-spacing:.14em}

/* ---- 07 · ROI — financial dashboard ---- */
#roi .eyebrow{
  font-family:'JetBrains Mono',monospace;letter-spacing:.06em;font-weight:700;
  background:rgba(132,204,22,.08);border-color:rgba(132,204,22,.3);color:#84CC16;
}
#roi .eyebrow::before{
  content:"$";color:#84CC16;background:none;width:auto;height:auto;box-shadow:none;
  font-family:'JetBrains Mono',monospace;font-weight:800;font-size:14px;animation:none;border-radius:0;
}
#roi .section-title{font-weight:700;letter-spacing:-.035em}

/* ---- 08 · FAQ — quiet documentation ---- */
#faq .eyebrow{
  font-family:'Space Grotesk',system-ui,sans-serif;font-weight:500;letter-spacing:.12em;
  background:rgba(6,182,212,.08);border-color:rgba(6,182,212,.25);color:#06B6D4;
}
#faq .eyebrow::before{
  content:"?";color:#06B6D4;background:none;width:auto;height:auto;box-shadow:none;
  font-weight:700;font-size:14px;animation:none;border-radius:0;
}
#faq .section-title{font-weight:500;letter-spacing:-.025em}

/* ---- 09 · CONTACT — creative agency maximalist ---- */
#contact .eyebrow{
  background:linear-gradient(135deg,rgba(168,85,247,.22),rgba(236,72,153,.12));
  border:1px solid rgba(168,85,247,.35);font-weight:600;
}
#contact .eyebrow::before{
  background:linear-gradient(135deg,#A855F7,#EC4899,#FB923C);
  box-shadow:0 0 20px #EC4899;width:8px;height:8px;
}
#contact .section-title{letter-spacing:-.04em;font-weight:600}

/* ---- 10 · FINALE — bold signature ---- */
.finale .finale-eyebrow{
  background:none;border:0;padding:0;font-size:14px;font-weight:700;
  font-family:'Instrument Serif',serif;font-style:italic;letter-spacing:.01em;
  text-transform:none;color:#EC4899;
}
.finale .finale-eyebrow::before{
  background:none;width:auto;height:auto;box-shadow:none;
  content:"✦ ";color:#FB923C;font-style:normal;animation:none;border-radius:0;
}

/* ---- FOOTER — settled, signed ---- */
.footer-brand{
  font-family:'Instrument Serif',serif;font-style:italic;font-size:18px;font-weight:400;
  background:linear-gradient(135deg,#F5F5F7,#A855F7);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ---- Cross-section detail: section identity badge in the eyebrow ---- */
/* Small section-counter chip in monospace inside each eyebrow tells visitors
   they're in a different aesthetic. */

/* ---- Subtle "section divider" hint ---- */
section + section{position:relative}

/* ---- Add small decorative ornament before each section title ---- */
/* Each section gets a unique tiny decorative mark — like a brand monogram */
#services .section-title::before{
  content:"";display:inline-block;width:24px;height:1.5px;background:currentColor;
  vertical-align:middle;margin-right:14px;opacity:.6;
}
#pricing .section-title::before{
  content:"$ ";font-family:'JetBrains Mono',monospace;color:#06B6D4;font-weight:700;font-size:.6em;
}
#contact .section-title::before{
  content:"✦ ";color:#EC4899;font-size:.6em;vertical-align:middle;
}
#faq .section-title::before{
  content:"";display:inline-block;width:8px;height:8px;border-radius:50%;
  border:1.5px solid currentColor;vertical-align:middle;margin-right:14px;
}

/* ---- The "demo-note" inside cards (reframing as examples) ---- */
.demo-note{
  padding:16px 24px;
  background:linear-gradient(135deg,rgba(168,85,247,.08),rgba(236,72,153,.04));
  border-top:1px solid rgba(168,85,247,.20);
  font-size:13.5px;color:#A0A0B0;line-height:1.6;
  font-family:'Space Grotesk',system-ui,sans-serif;
}
.demo-note b{color:#F5F5F7;font-weight:600}
.demo-note em{
  font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;
  background:linear-gradient(135deg,#A855F7,#EC4899);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}