/* Totem — totemnext.com. Tokens and components from the Totem Design System. */
/* Totem — tokens as CSS variables (light theme first, dark below) */
:root, [data-theme="light"] {
  --surface: #FFFFFF;
  --surface-mist: #F5F6FA;
  --surface-cloud: #ECEEF5;
  --line: #DDE1EC;
  --line-soft: #E6E9F2;
  --ink: #0B1024;
  --ink-muted: #4A5170;
  --ink-suffix: #737D9F;
  --signal: #3552F0;
  --signal-soft: #E8ECFF;
  --on-signal: #FFFFFF;
  --midnight: #070B1A;
  --on-midnight: #EEF1FA;
  --on-midnight-muted: #B9C1DE;
  --signal-on-midnight: #9DAEFF;
  --glow: #6E86FF;
  --link: var(--signal);
  --focus-ring: 0 0 0 2px #FFFFFF, 0 0 0 4px #3552F0;
}
[data-theme="dark"] {
  --surface: #070B1A;
  --surface-mist: #0B1024;
  --surface-cloud: #121835;
  --line: #2A3358;
  --line-soft: #1A2140;
  --ink: #EEF1FA;
  --ink-muted: #B9C1DE;
  --ink-suffix: #6B7598;
  --signal: #6E86FF;
  --signal-soft: #141C45;
  --on-signal: #070B1A;
  --midnight: #121A3D;
  --link: var(--signal);
  --focus-ring: 0 0 0 2px #070B1A, 0 0 0 4px #6E86FF;
}
:root {
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px;
  --space-8: 32px; --space-12: 48px; --space-20: 80px; --space-28: 112px;
  --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px; --radius-xl: 24px; --radius-full: 9999px;
  --font-sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-wordmark: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --font-accent: "Playfair Display", Georgia, serif;
}

body { margin: 0; font-family: var(--font-sans); background: var(--surface); color: var(--ink); }
.tt-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; padding: var(--space-6); }
.tt-col { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); }

.tt-wordmark { font-family: var(--font-wordmark); font-weight: 500; letter-spacing: -0.05em; color: var(--ink); line-height: 1; white-space: nowrap; display: inline-flex; align-items: baseline; }
.tt-wordmark-b { color: var(--signal); }
.tt-wordmark-s { color: var(--ink-suffix); font-weight: 400; }
.tt-wordmark-short { font-weight: 600; letter-spacing: -0.08em; }
.tt-wordmark-short .tt-wordmark-b { font-weight: 400; }
.tt-on-midnight .tt-wordmark { color: var(--on-midnight); }
.tt-on-midnight .tt-wordmark-b { color: var(--signal-on-midnight); }

.tt-btn { font: inherit; font-size: 15px; font-weight: 500; line-height: 20px; padding: 14px 24px; border-radius: var(--radius-full); border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: var(--space-2); }
.tt-btn-primary { background: var(--signal); border-color: var(--signal); color: var(--on-signal); }
.tt-btn-dark { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.tt-btn:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); }

.tt-eyebrow { font-family: var(--font-mono); font-size: 12px; line-height: 16px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--signal); }
.tt-eyebrow-muted { color: var(--ink-muted); }

.tt-heading { margin: 0; font-family: var(--font-sans); font-weight: 500; color: var(--ink); }
.tt-heading-display { font-size: 84px; line-height: 1; letter-spacing: -0.04em; }
.tt-heading-h1 { font-size: 52px; line-height: 1.08; letter-spacing: -0.035em; }
.tt-heading-h2 { font-size: 32px; line-height: 1.18; letter-spacing: -0.025em; }
.tt-heading em { font-family: var(--font-accent); font-style: italic; font-weight: 400; letter-spacing: -0.02em; font-size: 1.08em; color: var(--signal); }

.tt-card { background: var(--surface-mist); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); padding: var(--space-8); display: flex; flex-direction: column; gap: 18px; min-height: 240px; box-sizing: border-box; position: relative; overflow: hidden; }
.tt-card-title { font-size: 26px; line-height: 1.2; font-weight: 500; letter-spacing: -0.025em; }
.tt-card-body { font-size: 16px; line-height: 1.55; color: var(--ink-muted); }
.tt-card-link { margin-top: auto; font-size: 15px; font-weight: 500; color: var(--link); text-decoration: none; }
.tt-card-engine { background: var(--midnight); border-color: var(--midnight); color: var(--on-midnight); }
.tt-card-engine .tt-eyebrow { color: var(--signal-on-midnight); }
.tt-card-engine .tt-card-body { color: var(--on-midnight-muted); }
.tt-card-engine .tt-card-link { color: var(--signal-on-midnight); }
.tt-card-glow { position: absolute; right: -60px; bottom: -80px; width: 260px; height: 260px; border-radius: 50%; background: var(--glow); opacity: 0.35; filter: blur(70px); pointer-events: none; }
.tt-card > * { position: relative; }
.tt-card > .tt-card-glow { position: absolute; }

/* ---------- Site ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: #FFFFFF; -webkit-font-smoothing: antialiased; }
img, svg { max-width: 100%; }
a { color: #3552F0; text-decoration: none; }
a:hover { color: #1F37C4; }
a:focus-visible, button:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); border-radius: 6px; }
.tt-mid a { color: #9DAEFF; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }

.tt-skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--ink); color: #FFFFFF; padding: 10px 16px; border-radius: 9999px; }
.tt-skip:focus { left: 16px; color: #FFFFFF; }

/* Header and navigation */
.tt-header { position: sticky; top: 0; z-index: 40; backdrop-filter: saturate(1.4) blur(10px); background: rgba(255,255,255,0.92) !important; }
.tt-nav a { color: #4A5170; }
.tt-nav a:hover { color: #0B1024; }
.tt-menu { display: none; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 9999px; background: var(--surface); cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.tt-menu span { display: block; width: 16px; height: 1.5px; background: var(--ink); transition: transform .2s; }
.tt-header.tt-open .tt-menu span:first-child { transform: translateY(3.25px) rotate(45deg); }
.tt-header.tt-open .tt-menu span:last-child { transform: translateY(-3.25px) rotate(-45deg); }

/* Typing wordmark in the home hero */
.tt-typed { display: inline-flex; white-space: pre; }
.tt-wm-b { color: var(--signal-on-midnight); }
.tt-wm-n { color: var(--on-midnight); }
.tt-wm-s { color: #8A94B8; font-weight: 400; }
@keyframes caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.caret { animation: caret 1s steps(1) infinite; }

/* Contact form */
.tt-field { width: 100%; font: inherit; font-size: 16px; padding: 14px 16px; border: 1px solid #DDE1EC; border-radius: 14px; background: #FFFFFF; color: #0B1024; }
.tt-field:focus { outline: 2px solid transparent; box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px #3552F0; }
.tt-field[aria-invalid="true"] { border-color: #C2263A; }
.tt-choice input { position: absolute; opacity: 0; }
.tt-choice span { display: inline-block; padding: 12px 20px; border: 1px solid #DDE1EC; border-radius: 9999px; font-size: 15px; cursor: pointer; background: #FFFFFF; }
.tt-choice input:checked + span { background: #3552F0; border-color: #3552F0; color: #FFFFFF; }
.tt-choice input:focus-visible + span { box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px #3552F0; }
.tt-form-note { font-size: 14px; color: #C2263A; }
.tt-form-done { font-size: 15px; color: var(--ink); }

/* Legal page */
.tt-legal h2 { margin: 0 0 12px; font-size: 24px; font-weight: 500; letter-spacing: -0.02em; color: #0B1024; }
.tt-legal p { margin: 0 0 14px; }
.tt-legal ul { margin: 0 0 14px; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.tt-legal section { padding: 32px 0; border-top: 1px solid #E6E9F2; }

/* Cookie consent */
.tt-consent { position: fixed; left: 24px; bottom: 24px; z-index: 60; max-width: 400px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.tt-consent[hidden] { display: none; }
.tt-consent p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-muted); }
.tt-consent-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* Phone */
@media (max-width: 760px) {
  .tt-heading-display { font-size: 46px; }
  .tt-heading-h1 { font-size: 34px; }
  .tt-wrap { padding-left: 20px !important; padding-right: 20px !important; }
  .tt-sec { padding-top: 72px !important; padding-bottom: 72px !important; }
  .tt-header { gap: 16px !important; padding-top: 14px !important; padding-bottom: 14px !important; }
  .tt-header .tt-btn { padding: 12px 18px; }
  .tt-menu { display: inline-flex; }
  .tt-nav { display: none !important; order: 10; width: 100%; flex-direction: column; gap: 4px !important; padding: 8px 0 12px; }
  .tt-nav a { padding: 12px 0; font-size: 17px; border-top: 1px solid var(--line-soft); }
  .tt-header.tt-open .tt-nav { display: flex !important; }
  .tt-consent { left: 12px; right: 12px; bottom: 12px; max-width: none; }
}