/* ============================================================
   WARM TECH v3 — Neeraj Shah / Titan AI Design System
   Version 3.0 · 24 July 2026
   Drop-in stylesheet. Tokens + components.
   Governed by: titan-ai-brand-guidelines-master-v3.md
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root{
  /* Core palette */
  --wt-sand:#FAF3E3;          /* canvas — never white */
  --wt-ink:#1A1A1A;           /* type/structure — never pure black */
  --wt-ember:#E2611E;         /* THE accent: CTAs, numbers, emphasis */
  --wt-ember-deep:#C94E12;    /* hover + small orange text on cream */
  --wt-deep:#1A1712;          /* dark section register */
  --wt-amber:#F8C889;         /* soft highlight, stats on dark */

  /* Product badges (legacy accents — chips only, never CTAs) */
  --wt-mist:#E5F5F9;          /* Titan AI */
  --wt-sage:#D2ECD0;          /* Unlock LinkedIn with AI */
  --wt-rose:#F3C1C0;          /* Done-For-You */

  /* Derived */
  --wt-sand-ghost:rgba(250,243,227,.72);
  --wt-ink-soft:rgba(26,26,26,.75);
  --wt-line:rgba(26,26,26,.14);
  --wt-line-dark:rgba(250,243,227,.16);
  --wt-card-fill:rgba(255,255,255,.35);
  --wt-card-fill-dark:rgba(250,243,227,.05);

  /* Type */
  --wt-display:'Space Grotesk',sans-serif;
  --wt-body:'Inter',sans-serif;
  --wt-mono:'JetBrains Mono',monospace;

  /* Scale */
  --wt-radius:14px;
  --wt-radius-lg:16px;
  --wt-radius-pill:100px;
  --wt-section-y:96px;
  --wt-maxw:1120px;
  --wt-gutter:28px;
}

/* Fonts:
   https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;600&display=swap */

/* ---------- 2. BASE ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--wt-body);background:var(--wt-sand);color:var(--wt-ink);line-height:1.6;font-size:17px}
h1,h2,h3{font-family:var(--wt-display);line-height:1.08;letter-spacing:-.02em;font-weight:700}
h1{font-size:clamp(2.6rem,5.6vw,4.2rem)}
h2{font-size:clamp(2rem,4.4vw,3.1rem);margin-bottom:22px}
h3{font-size:1.25rem}
h1 em,h2 em,h3 em{font-style:normal;color:var(--wt-ember)}
.wt-dark h1 em,.wt-dark h2 em{color:var(--wt-amber)}
a{color:inherit}

/* ---------- 3. LAYOUT ---------- */
.wt-wrap{max-width:var(--wt-maxw);margin:0 auto;padding:0 var(--wt-gutter)}
.wt-section{padding:var(--wt-section-y) 0}
.wt-dark{background:var(--wt-deep);color:var(--wt-sand)}
.wt-dark p{color:var(--wt-sand-ghost)}
/* Page rhythm: dark hero → sand → dark proof → sand offer → dark close */

.wt-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.wt-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.wt-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.wt-split{display:grid;grid-template-columns:1.2fr .8fr;gap:56px;align-items:center}

/* ---------- 4. TYPOGRAPHY UTILITIES ---------- */
.wt-mono{font-family:var(--wt-mono);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase}
.wt-kicker{font-family:var(--wt-mono);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--wt-ember);display:block;margin-bottom:20px}
.wt-dark .wt-kicker,.wt-dark .wt-mono{color:var(--wt-amber)}
.wt-lede{font-size:1.15rem;max-width:680px;color:var(--wt-ink-soft)}
.wt-dark .wt-lede{color:var(--wt-sand-ghost)}
.wt-statement{font-family:var(--wt-display);font-weight:700;font-size:1.4rem;max-width:820px}
.wt-statement em{font-style:normal;color:var(--wt-ember)}
.wt-dark .wt-statement em{color:var(--wt-amber)}

/* ---------- 5. WORDMARK ---------- */
.wt-wordmark{font-family:var(--wt-display);font-weight:700;font-size:1.15rem;color:var(--wt-ember)}
/* Always all-Ember. Never split-colour, never ink, never pastel. */

/* ---------- 6. BUTTONS ---------- */
.wt-btn{display:inline-block;font-family:var(--wt-display);font-weight:700;font-size:1.02rem;
  padding:17px 34px;border-radius:10px;text-decoration:none;transition:.18s;border:2px solid transparent;cursor:pointer}
.wt-btn--ember{background:var(--wt-ember);color:var(--wt-ink)}
.wt-btn--ember:hover{background:var(--wt-ember-deep);color:var(--wt-sand);transform:translateY(-2px)}
.wt-btn--ghost{border-color:var(--wt-ink);color:var(--wt-ink)}
.wt-btn--ghost:hover{background:var(--wt-ink);color:var(--wt-sand)}
.wt-dark .wt-btn--ghost{border-color:var(--wt-sand);color:var(--wt-sand)}
.wt-dark .wt-btn--ghost:hover{background:var(--wt-sand);color:var(--wt-ink)}
.wt-btn--sm{padding:13px 26px;font-size:.95rem}
.wt-btn--block{display:block;width:100%;text-align:center}

/* ---------- 7. NAV ---------- */
.wt-nav{position:sticky;top:0;background:var(--wt-sand);border-bottom:1px solid var(--wt-line);z-index:50}
.wt-nav__in{display:flex;align-items:center;justify-content:space-between;padding:16px var(--wt-gutter);max-width:var(--wt-maxw);margin:0 auto}
.wt-nav__links{display:flex;gap:26px;align-items:center}
.wt-nav__links a{text-decoration:none;font-size:.92rem}
.wt-nav__links a:hover{color:var(--wt-ember)}
.wt-nav__cta{background:var(--wt-ember);color:var(--wt-ink);padding:10px 20px;border-radius:8px;font-weight:600}
.wt-nav__cta:hover{background:var(--wt-ember-deep);color:var(--wt-sand)!important}

/* ---------- 8. CARDS ---------- */
.wt-card{border:1px solid var(--wt-line);border-radius:var(--wt-radius);padding:30px 26px;background:var(--wt-card-fill)}
.wt-card h3{margin-bottom:10px}
.wt-card p{font-size:.95rem;color:var(--wt-ink-soft)}
.wt-card__num{font-family:var(--wt-mono);color:var(--wt-ember);font-size:.78rem;display:block;margin-bottom:14px}
.wt-dark .wt-card{background:var(--wt-card-fill-dark);border-color:var(--wt-line-dark)}
.wt-dark .wt-card h3{color:var(--wt-amber)}
.wt-dark .wt-card p{color:var(--wt-sand-ghost)}
.wt-card--hover{transition:.18s}
.wt-card--hover:hover{border-color:var(--wt-ember);transform:translateY(-3px)}

/* ---------- 9. PILLS & CHIPS ---------- */
.wt-pill{display:inline-block;font-family:var(--wt-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  padding:7px 16px;border-radius:var(--wt-radius-pill);color:var(--wt-ink);margin-bottom:16px}
.wt-pill--titan{background:var(--wt-mist)}
.wt-pill--linkedin{background:var(--wt-sage)}
.wt-pill--dfy{background:var(--wt-rose)}
.wt-chip{font-family:var(--wt-mono);font-size:.8rem;border:1px solid var(--wt-line);border-radius:var(--wt-radius-pill);padding:10px 18px;display:inline-block}
.wt-dark .wt-chip{border-color:var(--wt-line-dark);color:var(--wt-sand)}
.wt-dark .wt-chip b{color:var(--wt-amber);font-weight:600}
.wt-chips{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- 10. STATS ---------- */
.wt-stat b{font-family:var(--wt-mono);font-size:2.2rem;color:var(--wt-ember);display:block;line-height:1}
.wt-stat small{display:block;margin-top:10px;font-size:.85rem;color:var(--wt-ink-soft)}
.wt-dark .wt-stat b{color:var(--wt-amber)}
.wt-dark .wt-stat small{color:var(--wt-sand-ghost)}
.wt-statband{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.wt-statband .wt-stat{border:1px solid var(--wt-line);border-radius:var(--wt-radius);padding:34px 28px;text-align:center}
.wt-dark .wt-statband .wt-stat{border-color:var(--wt-line-dark)}

/* ---------- 11. COMPARISON TABLE (the "us" column always glows) ---------- */
.wt-table{width:100%;border-collapse:collapse;border:1px solid var(--wt-line);border-radius:var(--wt-radius);overflow:hidden;background:rgba(255,255,255,.4)}
.wt-table th{font-family:var(--wt-display);text-align:left;padding:18px 22px;font-size:1.02rem}
.wt-table th:first-child{background:rgba(26,26,26,.06);color:rgba(26,26,26,.6)}
.wt-table th:last-child{background:var(--wt-ember);color:var(--wt-ink)}
.wt-table td{padding:15px 22px;border-top:1px solid var(--wt-line);font-size:.95rem}
.wt-table td:first-child{color:rgba(26,26,26,.62)}
.wt-table td:last-child{font-weight:500;border-left:1px solid var(--wt-line)}

/* ---------- 12. CALLOUT ---------- */
.wt-callout{border-left:4px solid var(--wt-ember);background:rgba(248,200,137,.25);padding:26px 30px;border-radius:0 var(--wt-radius) var(--wt-radius) 0}
.wt-callout--ink{border-left-color:var(--wt-ink);background:rgba(26,26,26,.05)}

/* ---------- 13. TICKER ---------- */
.wt-ticker-wrap{overflow:hidden;border-top:1px solid var(--wt-line);border-bottom:1px solid var(--wt-line);padding:16px 0;white-space:nowrap}
.wt-ticker{display:inline-block;animation:wt-scroll 50s linear infinite}
.wt-ticker span{margin-right:56px;font-size:.95rem}
.wt-ticker b{color:var(--wt-ember-deep)}
@keyframes wt-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.wt-ticker{animation:none}}

/* ---------- 14. PRICING ---------- */
.wt-price{border:2px solid var(--wt-ember);border-radius:var(--wt-radius-lg);padding:36px;background:rgba(255,255,255,.5)}
.wt-price__figure{font-family:var(--wt-display);font-size:2.6rem;font-weight:700}
.wt-price__figure small{font-size:1rem;font-weight:400}
.wt-guarantee{background:rgba(248,200,137,.3);border-radius:12px;padding:20px 22px;font-size:.95rem;margin-top:22px}
.wt-list-arrow{list-style:none}
.wt-list-arrow li{padding:14px 0;border-bottom:1px solid var(--wt-line);font-size:.97rem}
.wt-list-arrow li::before{content:'›';color:var(--wt-ember);font-weight:700;margin-right:12px}

/* ---------- 15. CASE STUDY BLOCK ---------- */
.wt-case{border:1px solid var(--wt-line-dark);border-radius:var(--wt-radius-lg);padding:36px;background:var(--wt-card-fill-dark)}
.wt-case__metrics{display:flex;gap:34px;flex-wrap:wrap;margin:18px 0}
.wt-case__metrics b{font-family:var(--wt-mono);color:var(--wt-amber);font-size:1.4rem;display:block}
.wt-case__metrics small{color:var(--wt-sand-ghost);font-size:.8rem}
.wt-quote{font-style:italic;margin-top:16px}

/* ---------- 16. FAQ ---------- */
.wt-faq{border-bottom:1px solid var(--wt-line);padding:22px 0}
.wt-faq summary{font-family:var(--wt-display);font-weight:700;font-size:1.08rem;cursor:pointer;list-style:none;display:flex;justify-content:space-between}
.wt-faq summary::after{content:'+';color:var(--wt-ember);font-size:1.4rem;line-height:1}
.wt-faq[open] summary::after{content:'–'}
.wt-faq p{margin-top:14px;color:var(--wt-ink-soft);font-size:.97rem;max-width:820px}

/* ---------- 17. MEDIA ---------- */
.wt-photo{border-radius:var(--wt-radius);border:1px solid var(--wt-line-dark);background-size:cover;background-position:center}
.wt-photo--portrait{aspect-ratio:4/5}
.wt-photo--wide{aspect-ratio:16/10}
.wt-photo--tint{background-blend-mode:normal;box-shadow:inset 0 -80px 120px -40px rgba(26,23,18,.55)}
/* Imagery is proof, never decoration. No stock photography. */

/* ---------- 18. FOOTER ---------- */
.wt-footer{background:var(--wt-deep);color:var(--wt-sand-ghost);border-top:1px solid var(--wt-line-dark);padding:34px 0;font-size:.85rem}
.wt-footer a{color:var(--wt-sand-ghost);text-decoration:none;margin-left:20px}
.wt-footer a:hover{color:var(--wt-amber)}

/* ---------- 19. RESPONSIVE ---------- */
@media(max-width:880px){
  .wt-split,.wt-grid-3,.wt-grid-4{grid-template-columns:1fr 1fr}
  .wt-split{gap:36px}
  .wt-nav__links a:not(.wt-nav__cta){display:none}
  :root{--wt-section-y:64px}
}
@media(max-width:560px){
  .wt-grid-2,.wt-grid-3,.wt-grid-4,.wt-statband{grid-template-columns:1fr}
}