/* ============================================================
   TweeLabs Digital — Global Design System
   Palette (4 colors only):
     1. Deep Navy  #0a1628
     2. Indigo     #4f46e5
     3. Cyan       #06b6d4
     4. Light      #f8fafc
   No red. No orange.
============================================================ */
:root {
  --color-dark:         #0f172a; /* Slate 900 */
  --color-mid:          #f1f5f9; /* Slate 100 */
  --color-indigo:       #4f46e5; /* Indigo 600 */
  --color-indigo-hover: #4338ca; /* Indigo 700 */
  --color-cyan:         #06b6d4; /* Cyan 500 */
  --color-cyan-hover:   #0891b2; /* Cyan 600 */
  --color-light:        #ffffff; /* White */

  /* Backward-compat aliases */
  --agency-primary:       var(--color-indigo);
  --agency-primary-hover: var(--color-indigo-hover);
  --agency-secondary:     var(--color-cyan);
  --agency-accent:        var(--color-cyan);

  /* Neutrals for Light Mode */
  --bg-body:        #f8fafc; /* Slate 50 */
  --bg-surface:     #ffffff; /* White */
  --bg-surface-alt: #f1f5f9; /* Slate 100 */
  --bg-glass:       rgba(255, 255, 255, 0.75);
  --bg-glass-hover: rgba(255, 255, 255, 0.95);

  /* Text for Light Mode */
  --text-main:   #0f172a; /* Slate 900 */
  --text-muted:  #475569; /* Slate 600 */
  --text-light:  #64748b; /* Slate 500 */
  --text-body:   var(--text-muted);
  --text-invert: #ffffff; /* White text on dark elements */

  /* Borders */
  --border-light:  rgba(15, 23, 42, 0.08);
  --border-strong: rgba(15, 23, 42, 0.15);

  /* Typography */
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-heading: 'Outfit', var(--font-sans);

  /* Shadows for Light Mode */
  --shadow-sm:    0 1px 3px rgba(15, 23, 42, 0.05);
  --shadow-md:    0 4px 6px -1px rgba(15, 23, 42, 0.05), 0 2px 4px -1px rgba(15, 23, 42, 0.03);
  --shadow-lg:    0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -2px rgba(15, 23, 42, 0.04);
  --shadow-glow:  0 0 25px rgba(79, 70, 229, 0.15);
  --shadow-xl:    0 20px 25px -5px rgba(15, 23, 42, 0.08), 0 10px 10px -5px rgba(15, 23, 42, 0.03);

  /* Transitions */
  --transition-fast: 0.15s ease-in-out;
  --transition-base: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);

  /* Radii */
  --radius-sm:   0.5rem;
  --radius-md:   0.75rem;
  --radius-lg:   1.25rem;
  --radius-xl:   1.75rem;
  --radius-pill: 9999px;
}

/* === Reset === */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  color: var(--text-main);
  background-color: var(--bg-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  padding-top: 80px;
}

/* Prevent logo from ever being clipped by overflow */
.tl-logo { white-space: nowrap; overflow: visible; }
.tl-header-inner { overflow: visible; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-main);
  margin-bottom: 1rem;
}

/* Clean white theme for page hero segments */
.page-hero h1,/* -- Page Hero (Subpages) -- */
.page-hero {
  background: #ffffff !important; /* Clean white background */
  padding: 160px 0 100px;
  text-align: center;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.page-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: radial-gradient(circle at 50% 50%, rgba(79, 70, 229, 0.06) 0%, transparent 70%);
  pointer-events: none;
}

.page-hero .container {
  position: relative;
  z-index: 2;
}

.page-hero h1 {
  font-size: clamp(2.5rem, 8vw, 4rem);
  font-weight: 800;
  margin-bottom: 20px;
  color: #0f172a !important; /* Force dark slate */
  letter-spacing: -1px;
}

.page-hero p {
  color: #475569 !important; /* Force muted slate */
  max-width: 700px;
  margin: 0 auto;
  font-size: 1.15rem;
  line-height: 1.6;
}
/* Force white text only on explicitly marked .bg-dark containers */
.bg-dark h1, .bg-dark h2, .bg-dark p {
  color: #fff !important;
}

/* Text selection — always readable */
::selection {
  background: rgba(79, 70, 229, 0.25);
  color: #0f172a;
}
::-moz-selection {
  background: rgba(79, 70, 229, 0.25);
  color: #0f172a;
}

p {
  margin-bottom: 1.5rem;
  color: var(--text-muted);
}

a {
  color: var(--color-indigo);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover { color: var(--color-indigo-hover); }

ul, ol {
  padding-left: 1.5rem;
  margin-bottom: 1.5rem;
}

img { max-width: 100%; height: auto; display: block; }

/* === SVG Icon utility === */
.tw-icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

/* === Buttons === */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 12px 28px;
  border-radius: var(--radius-md);
  cursor: pointer;
  border: 2px solid transparent;
  transition: all var(--transition-base);
  text-decoration: none;
  line-height: 1;
}

.btn-primary {
  background: var(--color-indigo);
  color: #fff;
  border-color: var(--color-indigo);
}
.btn-primary:hover {
  background: var(--color-indigo-hover);
  border-color: var(--color-indigo-hover);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--shadow-glow);
}

.btn-outline {
  background: transparent;
  color: var(--color-indigo);
  border-color: var(--color-indigo);
}
.btn-outline:hover {
  background: var(--color-indigo);
  color: #fff;
}

.btn-cyan {
  background: var(--color-cyan);
  color: var(--color-dark);
  border-color: var(--color-cyan);
}
.btn-cyan:hover {
  background: var(--color-cyan-hover);
  color: #fff;
}