@import url('https://fonts.googleapis.com/css2?family=Syne:wght@600;700;800&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,700;1,400&display=swap');

:root {
  --ttm-blue: #3674b5;
  --ttm-blue-light: #578fca;
  --ttm-cream: #f5f0cd;
  --ttm-yellow: #fada7a;
  --ttm-white: #ffffff;
  --ttm-black: #0d0d0d;
  --ttm-gray-100: #f8f9fa;
  --ttm-gray-200: #e9ecef;
  --ttm-gray-500: #6c757d;
  --ttm-gray-800: #2d2d2d;
  --ttm-bg: var(--ttm-cream);
  --ttm-surface: var(--ttm-white);
  --ttm-primary: var(--ttm-blue);
  --ttm-accent: var(--ttm-yellow);
  --ttm-text: var(--ttm-black);
  --ttm-muted: var(--ttm-gray-500);
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --shadow-card: 0 4px 24px rgba(54, 116, 181, 0.1);
  --shadow-hover: 0 8px 40px rgba(54, 116, 181, 0.18);
  --font-display: 'Syne', sans-serif;
  --font-body: 'DM Sans', sans-serif;
}

body.ttm-public {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--ttm-text);
  background: var(--ttm-bg);
}

h1,
h2,
h3,
.ttm-display {
  font-family: var(--font-display);
  font-weight: 700;
}

.btn-ttm-primary {
  background: var(--ttm-blue);
  color: #fff;
  border-radius: var(--radius-pill);
  padding: 12px 32px;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.5px;
  border: none;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
}

.btn-ttm-primary:hover {
  background: var(--ttm-blue-light);
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
  color: #fff;
}

.btn-ttm-accent {
  background: var(--ttm-yellow);
  color: var(--ttm-black);
  border-radius: var(--radius-pill);
  padding: 12px 28px;
  font-family: var(--font-display);
  font-weight: 600;
  border: none;
}

.ttm-card {
  background: var(--ttm-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 32px;
  border: 1px solid var(--ttm-gray-200);
  transition: box-shadow 0.2s, transform 0.2s;
  border-left: 4px solid var(--ttm-blue);
}

.ttm-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-3px);
}

.ttm-hero {
  min-height: 92vh;
  background: linear-gradient(135deg, var(--ttm-blue) 0%, #1a4a7a 100%);
  color: var(--ttm-cream);
  clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%);
}

.ttm-hero .display-3 {
  color: var(--ttm-cream);
}

.ttm-accent-text {
  color: var(--ttm-yellow);
}

.ttm-section-alt {
  background: var(--ttm-white);
}

.ttm-header {
  --bs-navbar-color: var(--ttm-black);
  --bs-navbar-hover-color: var(--ttm-blue);
  --bs-navbar-active-color: var(--ttm-blue);
  --bs-navbar-brand-color: var(--ttm-black);
  --bs-navbar-brand-hover-color: var(--ttm-blue);
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(13, 13, 13, 0.08);
  transition: background 0.25s, box-shadow 0.25s;
}

.ttm-header .nav-link {
  font-weight: 500;
}

.ttm-header.scrolled {
  background: rgba(255, 255, 255, 0.99) !important;
  box-shadow: 0 4px 20px rgba(13, 13, 13, 0.08);
}

.ttm-pricing-featured {
  background: var(--ttm-yellow) !important;
  color: var(--ttm-black) !important;
  border: none !important;
}

.ttm-pricing-featured .text-muted {
  color: var(--ttm-gray-800) !important;
}

.ttm-footer {
  background: var(--ttm-black);
  color: rgba(255, 255, 255, 0.75);
}

.ttm-footer a {
  color: rgba(255, 255, 255, 0.85);
}

.ttm-wave {
  opacity: 0.12;
  position: absolute;
  inset: 0;
  pointer-events: none;
}

#ttm-cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1080;
  display: none;
}