/* ============================================================
   LumaCogent AI — main.css
   Shared across all pages. No hardcoded hex — always use tokens.
   ============================================================ */

/* ── DESIGN TOKENS ── */
:root {
  --color-void:           #0E0E14;
  --color-deep-charcoal:  #1A1A24;
  --color-slate:          #2C2C3A;
  --color-white:          #FFFFFF;
  --color-parchment:      #F7F7F5;
  --color-fog:            #E8E8E4;
  --color-turquoise:      #1DD3B0;
  --color-turquoise-dark: #17A98D;
  --color-cream:          #F5F4F0;
  --color-stone:          #8B8B9A;
  --color-body-dark:      #BEBECE;
  --color-ink:            #0E0E14;
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-sans:  'Manrope', system-ui, sans-serif;
  --text-display: 48px;
  --text-h1:      36px;
  --text-h2:      28px;
  --text-h3:      22px;
  --text-lead:    18px;
  --text-body:    16px;
  --text-small:   14px;
  --text-eyebrow: 10px;
  --text-button:  13px;
  --tracking-display: -1.5px;
  --tracking-h1:      -1px;
  --tracking-h2:      -0.5px;
  --tracking-h3:      -0.3px;
  --tracking-eyebrow:  2px;
  --tracking-stat:    -1px;
  --tracking-button:   0.2px;
  --lh-display: 1.26;
  --lh-h1:      1.32;
  --lh-h2:      1.44;
  --lh-h3:      1.56;
  --lh-lead:    1.92;
  --lh-body:    2.04;
  --lh-small:   1.92;
  --lh-eyebrow: 1.68;
  --section-pad-v:     120px;
  --section-pad-h:     48px;
  --section-pad-short: 80px;
  --card-pad:          28px;
  --nav-height:        64px;
  --border-dark:    0.5px solid var(--color-slate);
  --border-light:   0.5px solid var(--color-fog);
  --border-nav-cta: 0.5px solid rgba(29, 211, 176, 0.4);
  --radius-card: 6px;
  --radius-btn:  4px;
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; }
body { font-family: var(--font-sans); font-size: var(--text-body); line-height: var(--lh-body); color: var(--color-ink); background: var(--color-void); margin: 0; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; }
p { margin: 0; }
ul { list-style: none; margin: 0; padding: 0; }

/* ── GLOBAL NAV ── */
.lc-nav { position: fixed; top: 0; left: 0; right: 0; height: var(--nav-height); background: var(--color-void); border-bottom: var(--border-dark); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--section-pad-h); z-index: 1000; }
.lc-nav__logo img { height: 32px; width: auto; display: block; }
.lc-nav__links { display: flex; align-items: center; gap: 28px; }
.lc-nav__link { font-family: var(--font-sans); font-size: 13px; font-weight: 500; color: var(--color-stone); transition: color 0.2s; }
.lc-nav__link:hover, .lc-nav__link.is-active { color: var(--color-cream); }
.lc-nav__link.is-active { border-bottom: 0.5px solid var(--color-turquoise); padding-bottom: 2px; }
.lc-nav__cta { font-family: var(--font-sans); font-size: var(--text-button); font-weight: 700; color: var(--color-turquoise); letter-spacing: var(--tracking-button); padding: 7px 16px; border: var(--border-nav-cta); border-radius: var(--radius-btn); background: transparent; transition: background 0.2s, border-color 0.2s; }
.lc-nav__cta:hover { background: rgba(29, 211, 176, 0.06); border-color: var(--color-turquoise); }
.lc-nav__hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; background: none; border: none; padding: 4px; }
.lc-nav__hamburger span { display: block; width: 24px; height: 1.5px; background: var(--color-cream); transition: transform 0.3s, opacity 0.3s; }
.lc-nav__mobile { display: none; position: fixed; top: var(--nav-height); right: 0; width: 280px; height: calc(100vh - var(--nav-height)); background: var(--color-void); border-left: var(--border-dark); flex-direction: column; padding: 32px 24px; gap: 24px; z-index: 999; transform: translateX(100%); transition: transform 0.3s ease; }
.lc-nav__mobile.is-open { transform: translateX(0); }
.lc-nav__mobile .lc-nav__link { font-size: 16px; }
.lc-nav__mobile .lc-nav__cta { width: 100%; text-align: center; margin-top: auto; display: block; padding: 12px 16px; }
@media (max-width: 768px) { .lc-nav { padding: 0 24px; } .lc-nav__links { display: none; } .lc-nav__hamburger { display: flex; } .lc-nav__mobile { display: flex; } }

/* ── PAGE WRAPPER ── */
.lc-page { padding-top: var(--nav-height); }

/* ── SECTION WRAPPERS ── */
.section { padding: var(--section-pad-v) var(--section-pad-h); }
.section--dark  { background: var(--color-void); }
.section--light { background: var(--color-white); }
.section--short { padding: var(--section-pad-short) var(--section-pad-h); }
.section__inner { max-width: 1200px; margin: 0 auto; }
@media (max-width: 768px) { .section { padding: 80px 24px; } .section--short { padding: 60px 24px; } }

/* ── EYEBROW ── */
.eyebrow { font-family: var(--font-sans); font-size: var(--text-eyebrow); font-weight: 600; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; line-height: var(--lh-eyebrow); margin-bottom: 20px; display: block; }
.eyebrow--dark  { color: var(--color-turquoise); }
.eyebrow--light { color: var(--color-stone); }

/* ── HEADLINES ── */
.display { font-family: var(--font-serif); font-size: var(--text-display); font-weight: 400; letter-spacing: var(--tracking-display); line-height: var(--lh-display); color: var(--color-cream); margin: 0; }
.display em { font-style: italic; }
.h2 { font-family: var(--font-serif); font-size: var(--text-h2); font-weight: 400; letter-spacing: var(--tracking-h2); line-height: var(--lh-h2); margin: 0; }
.h2--dark  { color: var(--color-cream); }
.h2--light { color: var(--color-ink); }
.h3 { font-family: var(--font-serif); font-size: var(--text-h3); font-weight: 400; letter-spacing: var(--tracking-h3); line-height: var(--lh-h3); margin: 0; }
.h3--dark  { color: var(--color-cream); }
.h3--light { color: var(--color-ink); }
.h4 { font-family: var(--font-sans); font-size: 15px; font-weight: 600; line-height: 1.62; margin: 0 0 10px; }
.h4--dark  { color: var(--color-cream); }
.h4--light { color: var(--color-ink); }

/* ── BODY COPY ── */
.lead { font-family: var(--font-sans); font-size: var(--text-lead); font-weight: 400; line-height: var(--lh-lead); color: var(--color-stone); max-width: 500px; margin-top: 20px; }
.body-copy { font-family: var(--font-sans); font-size: var(--text-body); font-weight: 400; line-height: var(--lh-body); color: var(--color-stone); max-width: 480px; }
.body-copy + .body-copy { margin-top: 16px; }

/* ── BUTTONS ── */
.btn { font-family: var(--font-sans); font-size: var(--text-button); font-weight: 700; letter-spacing: var(--tracking-button); padding: 12px 24px; border-radius: var(--radius-btn); border: none; display: inline-block; text-decoration: none; cursor: pointer; transition: background 0.2s; }
.btn-primary-dark { color: var(--color-ink); background: var(--color-turquoise); }
.btn-primary-dark:hover { background: var(--color-turquoise-dark); }
.btn-primary-light { color: var(--color-cream); background: var(--color-ink); }
.btn-primary-light:hover { background: var(--color-deep-charcoal); }
.btn-text { font-family: var(--font-sans); font-size: var(--text-button); font-weight: 500; color: var(--color-stone); text-decoration: none; padding: 12px 0; display: inline-block; transition: color 0.2s; }
.btn-text:hover { color: var(--color-cream); }
.cta-row { display: flex; align-items: center; gap: 20px; margin-top: 36px; flex-wrap: wrap; }

/* ── STATS ── */
.stats-grid { display: flex; gap: 48px; margin-top: 64px; padding-top: 40px; border-top: var(--border-dark); flex-wrap: wrap; }
.stat-number { font-family: var(--font-sans); font-size: 32px; font-weight: 700; color: var(--color-turquoise); letter-spacing: var(--tracking-stat); line-height: 1; }
.stat-label { font-family: var(--font-sans); font-size: 12px; font-weight: 400; color: var(--color-stone); margin-top: 6px; line-height: 1.8; max-width: 140px; }

/* ── CARDS ── */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; }
.segment-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 40px; }
.card { border-radius: var(--radius-card); padding: var(--card-pad); }
.card--light { background: var(--color-parchment); border: var(--border-light); }
.card--dark  { background: var(--color-deep-charcoal); border: var(--border-dark); }
.card .h3 { margin-bottom: 12px; }
.card .body-copy { max-width: 100%; }
.card-link { display: block; font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--color-ink); margin-top: 20px; transition: color 0.2s; }
.card-link:hover { color: var(--color-turquoise); }
@media (max-width: 900px) { .card-grid { grid-template-columns: 1fr; } .segment-grid { grid-template-columns: 1fr; } }

/* ── STAGE NUM ── */
.stage-num { font-family: var(--font-sans); font-size: var(--text-eyebrow); font-weight: 600; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--color-turquoise); margin-bottom: 16px; display: block; }

/* ── DIFF CHIPS ── */
.diff-chips { margin-top: 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.diff-chip { padding: 20px 24px; background: var(--color-deep-charcoal); border: var(--border-dark); border-radius: var(--radius-btn); }
.diff-chip + .diff-chip { margin-top: 0; }
.diff-chip__label { font-family: var(--font-sans); font-size: var(--text-eyebrow); font-weight: 600; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--color-turquoise); margin-bottom: 6px; display: block; }
.diff-chip__body { font-size: 14px; color: var(--color-body-dark); line-height: 1.92; }
.diff-chip--light { background: var(--color-fog); border-left: 2px solid var(--color-turquoise); }
.diff-chip--light .diff-chip__label { color: var(--color-ink); }
.diff-chip--light .diff-chip__body { color: var(--color-stone); }
@media (max-width: 768px) { .diff-chips { grid-template-columns: 1fr; } .diff-chip + .diff-chip { margin-top: 12px; } }

/* ── TRANSITION LINE ── */
.transition-line { font-family: var(--font-serif); font-size: var(--text-h3); font-weight: 400; font-style: italic; color: var(--color-turquoise); margin-top: 48px; letter-spacing: var(--tracking-h3); }

/* ── PROCESS STEPS ── */
.process-steps { margin-top: 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.process-step { padding: var(--card-pad); background: var(--color-fog); border-radius: var(--radius-card); border: 1px solid rgba(139,139,154,0.2); }
.process-step__label { font-family: var(--font-sans); font-size: var(--text-eyebrow); font-weight: 600; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--color-turquoise); margin-bottom: 12px; display: block; }
.process-step__body { font-size: var(--text-body); color: var(--color-stone); line-height: var(--lh-body); }
@media (max-width: 768px) { .process-steps { grid-template-columns: 1fr; } }

/* ── DELIVERABLES ── */
.deliverables { margin-top: 32px; max-width: 540px; }
.deliverables__title { font-family: var(--font-sans); font-size: 15px; font-weight: 600; color: var(--color-ink); margin-bottom: 12px; }
.deliverables li { font-size: var(--text-small); color: var(--color-stone); line-height: var(--lh-body); padding: 6px 0; padding-left: 16px; position: relative; }
.deliverables li::before { content: '—'; position: absolute; left: 0; color: var(--color-turquoise); }

/* ── CALLOUT ── */
.callout { padding: 24px 28px; margin-top: 32px; border-radius: var(--radius-btn); max-width: 540px; }
.callout--light { background: var(--color-parchment); border-left: 2px solid var(--color-turquoise); }
.callout--dark  { background: var(--color-deep-charcoal); border-left: 2px solid var(--color-ink); }

/* ── FAQ ── */
.faq-list { margin-top: 40px; }
.faq-item { border-bottom: var(--border-dark); }
.faq-item:first-child { border-top: var(--border-dark); }
.faq-item summary { font-family: var(--font-serif); font-size: var(--text-h3); font-weight: 400; letter-spacing: var(--tracking-h3); color: var(--color-cream); cursor: pointer; list-style: none; padding: 24px 0; display: flex; justify-content: space-between; align-items: center; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; color: var(--color-turquoise); font-family: var(--font-sans); font-weight: 300; font-size: 20px; flex-shrink: 0; margin-left: 16px; }
.faq-item[open] summary::after { content: '−'; }
.faq-answer { font-size: var(--text-body); color: var(--color-stone); line-height: var(--lh-body); max-width: 640px; padding-bottom: 24px; }

/* ── PROOF BLOCKS ── */
.proof-statement { font-family: var(--font-serif); font-size: 22px; font-weight: 400; font-style: italic; color: var(--color-ink); max-width: 600px; margin: 48px auto; padding: 32px; border-top: var(--border-light); border-bottom: var(--border-light); text-align: center; line-height: 1.68; }
.proof-block { background: var(--color-deep-charcoal); border-left: 1px solid var(--color-turquoise); padding: 24px 28px; max-width: 600px; margin-top: 40px; }
.proof-block__text { font-size: var(--text-body); color: var(--color-stone); line-height: var(--lh-body); font-style: italic; }
.proof-block__attr { font-size: var(--text-small); color: var(--color-stone); margin-top: 12px; font-family: var(--font-sans); font-weight: 400; }

/* ── CTA BLOCK ── */
.cta-block { margin-top: 48px; padding-top: 32px; border-top: var(--border-light); }
.cta-block--dark { border-top: var(--border-dark); }

/* ── CONTACT ── */
.contact-steps { display: flex; flex-direction: column; gap: 32px; margin-top: 40px; max-width: 560px; }
.contact-step { display: flex; gap: 24px; align-items: flex-start; }
.contact-step__num { font-family: var(--font-sans); font-size: 24px; font-weight: 700; color: var(--color-turquoise); line-height: 1; flex-shrink: 0; width: 32px; }
.contact-step__content { flex: 1; }
.contact-form { max-width: 480px; margin-top: 32px; }
.form-field { margin-bottom: 20px; }
.form-field label { display: block; font-size: var(--text-small); font-weight: 600; color: var(--color-ink); margin-bottom: 6px; font-family: var(--font-sans); }
.form-field input, .form-field select, .form-field textarea { width: 100%; padding: 10px 14px; border: var(--border-light); border-radius: var(--radius-btn); font-family: var(--font-sans); font-size: var(--text-body); color: var(--color-ink); background: var(--color-white); appearance: none; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: none; border-color: var(--color-turquoise); }

/* ── FOUNDER / TEAM ── */
.founder-grid { display: grid; grid-template-columns: 40% 60%; gap: 64px; align-items: start; margin-top: 40px; }
.founder-photo { aspect-ratio: 1/1; border-radius: var(--radius-card); background: var(--color-fog); overflow: hidden; max-width: 360px; }
.founder-photo img { width: 100%; height: 100%; object-fit: cover; }
.founder-photo__placeholder { width: 100%; height: 100%; min-height: 360px; display: flex; align-items: center; justify-content: center; font-family: var(--font-sans); font-size: var(--text-small); color: var(--color-stone); }
.founder-name { font-family: var(--font-serif); font-size: var(--text-h2); font-weight: 400; letter-spacing: var(--tracking-h2); color: var(--color-ink); margin: 0 0 4px; }
.founder-title { font-family: var(--font-sans); font-size: var(--text-small); font-weight: 400; color: var(--color-stone); margin-bottom: 24px; }
.team-block__role { font-family: var(--font-sans); font-size: var(--text-eyebrow); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-turquoise); }
.team-block__title { font-size: 14px; color: var(--color-stone); margin-top: 4px; }
.advisor-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.advisor-card { padding: 24px; background: var(--color-fog); border: 1px solid rgba(139,139,154,0.2); border-radius: var(--radius-card); }
.advisor-card__title { font-size: 13px; color: var(--color-turquoise); margin-top: 4px; font-weight: 500; }
.about-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
@media (max-width: 900px) { .advisor-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 768px) { .founder-grid { grid-template-columns: 1fr; gap: 32px; } .about-two-col { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .advisor-grid { grid-template-columns: 1fr; } }

/* ── USE CASE GRID ── */
.usecase-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 24px; margin-top: 48px; }
.usecase-card { grid-column: span 2; padding: var(--card-pad); border-radius: var(--radius-card); display: flex; flex-direction: column; gap: 12px; }
.usecase-grid:not(.usecase-grid--2col) .usecase-card:nth-child(4) { grid-column: 2 / 4; }
.usecase-grid:not(.usecase-grid--2col) .usecase-card:nth-child(5) { grid-column: 4 / 6; }
.usecase-card--light { background: var(--color-fog); border: 1px solid rgba(139,139,154,0.2); }
.usecase-card--dark  { background: var(--color-slate); border: 1px solid rgba(255,255,255,0.08); }
.usecase-grid--2col  { grid-template-columns: repeat(2, 1fr); }
.usecase-grid--2col .usecase-card, .usecase-grid--2col .usecase-card:nth-child(n) { grid-column: span 1; }
.usecase-card__descriptor { font-family: var(--font-sans); font-size: var(--text-small); font-style: italic; color: var(--color-stone); margin: 0; }
.usecase-card__descriptor--dark { color: rgba(255,255,255,0.5); }
.usecase-card__list { font-family: var(--font-sans); font-size: var(--text-body); color: var(--color-ink); line-height: 1.7; padding-left: 20px; margin: 0; list-style-type: disc; }
.usecase-card__list--dark { color: rgba(255,255,255,0.75); }
.usecase-card__list li { margin-bottom: 4px; display: list-item; list-style-type: disc; }
@media (max-width: 900px) { .usecase-grid { grid-template-columns: repeat(2, 1fr); } .usecase-card, .usecase-grid .usecase-card:nth-child(4), .usecase-grid .usecase-card:nth-child(5) { grid-column: span 1; } .usecase-grid--2col { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) { .usecase-grid, .usecase-grid--2col { grid-template-columns: 1fr; } .usecase-card, .usecase-card:nth-child(n) { grid-column: span 1; } }

/* ── NAP ── */
.nap-block { margin-top: 32px; }
.nap-line { font-family: var(--font-sans); font-size: var(--text-body); font-weight: 400; color: var(--color-stone); line-height: 1.8; }
.nap-line a { color: var(--color-stone); }
.nap-line a:hover { color: var(--color-turquoise); }

/* ── AGENT PLACEHOLDER ── */
.agent-placeholder { position: fixed; bottom: 32px; right: 32px; z-index: 999; opacity: 0; transform: translateY(8px); transition: opacity 0.4s ease, transform 0.4s ease; pointer-events: none; }
.agent-placeholder--visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.agent-placeholder__btn { font-family: var(--font-sans); font-size: var(--text-button); font-weight: 700; color: var(--color-ink); background: var(--color-turquoise); padding: 10px 18px; border-radius: 999px; text-decoration: none; display: block; box-shadow: 0 4px 16px rgba(29,211,176,0.25); transition: background 0.2s; }
.agent-placeholder__btn:hover { background: var(--color-turquoise-dark); }
@media (max-width: 768px) { .agent-placeholder { bottom: 20px; right: 16px; } }

/* ── FOOTER ── */
.lc-footer { background: var(--color-void); border-top: var(--border-dark); padding: 48px var(--section-pad-h); }
.lc-footer__top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 40px; flex-wrap: wrap; gap: 24px; }
.lc-footer__logo img { height: 28px; width: auto; opacity: 0.85; }
.lc-footer__nav { display: flex; gap: 24px; flex-wrap: wrap; align-items: center; }
.lc-footer__link { font-family: var(--font-sans); font-size: 13px; font-weight: 500; color: var(--color-stone); transition: color 0.2s; }
.lc-footer__link:hover { color: var(--color-cream); }
.lc-footer__divider { padding-top: 24px; border-top: var(--border-dark); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.lc-footer__tagline { font-family: var(--font-serif); font-size: 14px; font-weight: 400; font-style: italic; color: var(--color-stone); }
.lc-footer__meta { font-family: var(--font-sans); font-size: 12px; color: var(--color-stone); }
@media (max-width: 768px) { .lc-footer { padding: 40px 24px; } .lc-footer__top { flex-direction: column; } .lc-footer__divider { flex-direction: column; align-items: flex-start; } }

/* ── HERO VIDEO ── */
.hero--video { position: relative; overflow: hidden; }
.hero__video-wrap { position: absolute; inset: 0; z-index: 0; }
.hero__video { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.hero__overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(14,14,20,0.50) 0%, rgba(14,14,20,0.68) 100%); }
.hero__content { position: relative; z-index: 1; }

/* ── BODY TEXT ON DARK ── */
.section--dark .lead,
.section--dark .body-copy,
.section--dark .faq-answer,
.section--dark .process-step__body,
.section--dark .diff-chip__body,
.section--dark .proof-block__text,
.section--dark .proof-block__attr,
.section--dark .deliverables li,
.section--dark .nap-line,
.section--dark .nap-line a { color: var(--color-body-dark); }

/* ── UTILITIES ── */
.mt-4  { margin-top: 4px; }
.mt-8  { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.mt-40 { margin-top: 40px; }
.mt-48 { margin-top: 48px; }
.mt-64 { margin-top: 64px; }
.text-stone  { color: var(--color-stone) !important; }
.text-small  { font-size: var(--text-small); }
.text-italic { font-style: italic; }