/* ============================================================================
   TITANOM.AI · DESIGN TOKENS v1.0 (16 Oct 2026)
   The ONE source of truth for every funnel, tool, deck and platform screen.
   Palette lifted from ../titancodeos-brand-pack/assets/tokens.css (itself lifted
   from the live product), with two accessibility fixes: --teal-text and
   --l-muted were darkened so they pass WCAG AA (4.5:1) on mist as well as white.
   Paste or @import this. Never hard-code a hex in a page.
   ============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800&family=Poppins:wght@300;400;500;600&display=swap');

:root {
  /* --- core ------------------------------------------------------------- */
  --tt-teal:        #6B9B9B;  /* the spine. fills, marks, rules. Not body text on light */
  --tt-teal-bright: #8AB5B5;  /* accents and text on dark, the glowbar */
  --tt-teal-text:   #457575;  /* teal as text on light (5.2 on white, 4.6 on mist) */
  --tt-yellow:      #FFDD00;  /* THE yellow. Highlight + primary CTA only. Never text on light */
  --tt-ink:         #0F0F0F;
  --tt-white:       #FFFFFF;
  --tt-mist:        #EDF1F1;

  /* --- dark ground (hero theme) ---------------------------------------- */
  --tt-d-page:   #0A0A0A;
  --tt-d-card:   #161616;
  --tt-d-panel:  #1C1C1C;
  --tt-d-raised: #232323;
  --tt-d-line:   #2A2A2A;
  --tt-d-ink:    #F4F5F5;
  --tt-d-soft:   #CFD2D2;
  --tt-d-muted:  #8B9090;

  /* --- light ground ----------------------------------------------------- */
  --tt-l-page:   #EDF1F1;
  --tt-l-card:   #FFFFFF;
  --tt-l-panel:  #F6F9F9;
  --tt-l-line:   #E1E8E8;
  --tt-l-ink:    #101615;
  --tt-l-soft:   #4A5A59;
  --tt-l-muted:  #646D6C;

  /* --- status (KPI health) --------------------------------------------- */
  --tt-green: #22C55E;
  --tt-amber: #F59E0B;
  --tt-red:   #EF4444;

  /* --- signature -------------------------------------------------------- */
  --tt-glowbar: linear-gradient(90deg, #6B9B9B 0%, #8AB5B5 100%);
  --tt-glow:    0 0 18px -2px rgba(138,181,181,.7);
  --tt-hero:    linear-gradient(100deg, #FFFFFF 28%, #8AB5B5 74%, #FFDD00 100%);

  /* --- type ------------------------------------------------------------- */
  --tt-font-display: 'Archivo', system-ui, sans-serif;  /* headlines, figures */
  --tt-font-body:    'Poppins', system-ui, sans-serif;  /* body, UI, buttons */
  --tt-display: 88px; --tt-h1: 64px; --tt-h2: 44px; --tt-h3: 28px;
  --tt-body-l: 20px;  --tt-body: 17px; --tt-small: 14px; --tt-label: 12px;
  --tt-stat: 72px;

  /* --- space and shape -------------------------------------------------- */
  --tt-s1: 4px;  --tt-s2: 8px;  --tt-s3: 12px; --tt-s4: 16px; --tt-s5: 24px;
  --tt-s6: 32px; --tt-s7: 48px; --tt-s8: 64px; --tt-s9: 96px; --tt-s10: 128px;
  --tt-r-sm: 8px; --tt-r-md: 12px; --tt-r-lg: 18px; --tt-r-xl: 26px; --tt-r-pill: 999px;
  --tt-max: 1200px;
  --tt-btn-h: 52px;
  --tt-shadow-panel: 0 1px 0 rgba(255,255,255,.04) inset, 0 24px 60px -24px rgba(0,0,0,.7);
  --tt-ease: cubic-bezier(.2,.7,.2,1); --tt-dur: 220ms;
}

@media (max-width: 767px) {
  :root {
    --tt-display: 56px; --tt-h1: 44px; --tt-h2: 32px; --tt-h3: 22px;
    --tt-body-l: 18px;  --tt-body: 16px; --tt-small: 13px; --tt-stat: 48px;
  }
}

/* dark mode (default for hero, social, platform) */
.tt-dark {
  --bg: var(--tt-d-page); --bg-alt: var(--tt-d-card); --panel: var(--tt-d-panel);
  --fg: var(--tt-d-ink); --fg-soft: var(--tt-d-soft); --fg-muted: var(--tt-d-muted);
  --line: var(--tt-d-line); --accent: var(--tt-teal-bright); --cta: var(--tt-yellow); --cta-fg: var(--tt-ink);
  --focus: var(--tt-teal-bright);
  background: var(--bg); color: var(--fg);
}
/* light mode (default for guides, docs, thank-you, legal) */
.tt-light {
  --bg: var(--tt-l-page); --bg-alt: var(--tt-l-card); --panel: var(--tt-l-panel);
  --fg: var(--tt-l-ink); --fg-soft: var(--tt-l-soft); --fg-muted: var(--tt-l-muted);
  --line: var(--tt-l-line); --accent: var(--tt-teal-text); --cta: var(--tt-ink); --cta-fg: var(--tt-white);
  --focus: var(--tt-teal-text);
  background: var(--bg); color: var(--fg);
}

/* components */
.tt-btn {
  display: inline-flex; align-items: center; gap: 10px; height: var(--tt-btn-h); padding: 0 28px;
  border-radius: var(--tt-r-pill); border: 0; cursor: pointer;
  font: 600 16px/1 var(--tt-font-body); background: var(--cta); color: var(--cta-fg);
  transition: transform var(--tt-dur) var(--tt-ease);
}
.tt-btn:hover { transform: translateY(-1px); }
.tt-btn:focus-visible, .tt-input:focus { outline: 2px solid var(--focus); outline-offset: 2px; }
.tt-btn--ghost { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 1px var(--line); }
.tt-input {
  height: var(--tt-btn-h); width: 100%; padding: 0 18px; border-radius: var(--tt-r-md);
  border: 1px solid var(--line); background: var(--bg-alt); color: var(--fg); font: 400 16px var(--tt-font-body);
}
.tt-card { background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--tt-r-lg); padding: var(--tt-s6); }
.tt-glowbar { height: 3px; border-radius: 3px; background: var(--tt-glowbar); box-shadow: var(--tt-glow); }
.tt-label { font: 600 var(--tt-label)/16px var(--tt-font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.tt-demo-chip {
  display: inline-flex; align-items: center; font: 600 11px var(--tt-font-body); letter-spacing: .08em;
  text-transform: uppercase; color: var(--tt-ink); background: var(--tt-yellow); padding: 4px 9px; border-radius: var(--tt-r-pill);
}

/* --- signatures (Brand Guidelines 1.0, pages 18-19) ---------------------- */
.tt-dark  { --grid: rgba(255,255,255,.045); --muted: #8B9090; }
.tt-light { --grid: rgba(15,15,15,.055);    --muted: #646D6C; }

/* The marker: one phrase per headline. Highlighter on light, solid block on dark */
.mk { background: linear-gradient(transparent 58%, var(--tt-yellow) 58% 92%, transparent 92%); padding: 0 .12em;
      -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.tt-dark .mk { background: var(--tt-yellow); color: var(--tt-ink); border-radius: 8px; padding: 0 .16em .02em; }
.tt-dark .tt-light .mk { background: linear-gradient(transparent 58%, var(--tt-yellow) 58% 92%, transparent 92%); color: inherit; border-radius: 0; padding: 0 .12em; }

/* The grid: 48px hairlines, fading at the edges. Put on every section */
.gridbg { position: relative; }
.gridbg::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 48px 48px; background-position: -1px -1px;
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, #000 30%, transparent 85%);
          mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, #000 30%, transparent 85%); }

/* One soft teal glow per section, from one corner */
.glow-tl::after, .glow-tr::after, .glow-br::after, .glow-bl::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.glow-tl::after { background: radial-gradient(ellipse 55% 60% at 8% 0%,   rgba(107,155,155,.30), transparent 70%); }
.glow-tr::after { background: radial-gradient(ellipse 55% 60% at 95% 0%,  rgba(107,155,155,.30), transparent 70%); }
.glow-br::after { background: radial-gradient(ellipse 55% 60% at 95% 100%, rgba(107,155,155,.28), transparent 70%); }
.glow-bl::after { background: radial-gradient(ellipse 55% 60% at 5% 100%,  rgba(107,155,155,.28), transparent 70%); }

/* The label: // CAPS with a teal dot */
.eb { display: inline-flex; align-items: center; gap: 10px; font: 600 13px/1 var(--tt-font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.eb i { width: 7px; height: 7px; border-radius: 50%; background: var(--tt-teal-bright); box-shadow: 0 0 10px rgba(138,181,181,.8); }
.tt-light .eb i { background: var(--tt-teal); box-shadow: none; }

/* Primary button on dark: yellow pill with a soft glow */
.tt-dark .tt-btn { box-shadow: 0 12px 34px -12px rgba(255,221,0,.55); }

/* Photography: sharp rectangle with four teal corner ticks. <div class="tt-shot"><img><i></i><i></i><i></i><i></i></div> */
.tt-shot { position: relative; }
.tt-shot > img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.tt-shot > i { position: absolute; width: 26px; height: 26px;
  background: linear-gradient(var(--accent),var(--accent)) center/1px 100% no-repeat, linear-gradient(var(--accent),var(--accent)) center/100% 1px no-repeat; }
.tt-shot > i:nth-of-type(1) { top: -13px; left: -13px; }  .tt-shot > i:nth-of-type(2) { top: -13px; right: -13px; }
.tt-shot > i:nth-of-type(3) { bottom: -13px; left: -13px; } .tt-shot > i:nth-of-type(4) { bottom: -13px; right: -13px; }