/* TreyTech Website UI Kit · global responsive type + spacing
   Standardized across desktop, iPad, iPhone.
   Breakpoints:
     desktop  ≥ 1000px
     tablet   600–999px
     mobile   < 600px
*/
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* prototype-4 editorial motion: sections rise on scroll */
@keyframes ttk-rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
section { animation: ttk-rise .8s cubic-bezier(.2,.8,.2,1) both; animation-timeline: view(); animation-range: entry 0% cover 26%; }
@media (prefers-reduced-motion: reduce) { section { animation: none; } }

/* shimmer gradient text (prototype-4 parity) */
@keyframes ttk-shimmer { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
.ttk-shimmer { background-size: 220% 100% !important; animation: ttk-shimmer 6s linear infinite; }
@media (prefers-reduced-motion: reduce) { .ttk-shimmer { animation: none; } }
body {
  margin: 0; background: #f7f8fb; color: #060a12;
  font-family: var(--font-body); -webkit-font-smoothing: antialiased;
}

.tt-wrap { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 999px) { .tt-wrap { padding: 0 28px; } }
@media (max-width: 599px) { .tt-wrap { padding: 0 20px; } }

/* universal CTA pill button */
.tt-btn {
  font-family: var(--font-display); font-weight: 500; font-size: 12px;
  letter-spacing: .22em; text-transform: uppercase;
  border-radius: 999px; padding: 14px 22px; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px; line-height: 1;
  transition: background .15s, color .15s, transform .12s;
  white-space: nowrap;
}
.tt-btn.primary { background: #38b6ff; color: #04253b; }
.tt-btn.primary:hover { background: #5cc4ff; }
.tt-btn.primary:active { background: #0d8fd9; transform: translateY(1px); }
.tt-btn.ghost-dark { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.5); }
.tt-btn.ghost-dark:hover { background: #fff; color: #060a12; border-color: #fff; }
.tt-btn.ghost-light { background: transparent; color: #060a12; border: 1.5px solid #060a12; }
.tt-btn.ghost-light:hover { background: #060a12; color: #fff; }

/* eyebrow */
.tt-eyebrow {
  font-family: var(--font-display); font-weight: 500; font-size: 11px;
  letter-spacing: .22em; text-transform: uppercase; color: #38b6ff;
}
.tt-eyebrow .num { color: inherit; opacity: .55; margin-right: 10px; }

/* section padding */
section { padding: 96px 0; }
@media (max-width: 999px) { section { padding: 72px 0; } }
@media (max-width: 599px) { section { padding: 56px 0; } }

/* responsive type defaults — apply when inline clamp() isn't used */
@media (max-width: 999px) {
  h1 { font-size: clamp(40px, 7vw, 64px) !important; line-height: 1.0 !important; }
  h2 { font-size: clamp(30px, 5vw, 48px) !important; line-height: 1.05 !important; }
  h3 { font-size: clamp(22px, 3.6vw, 32px) !important; }
}
@media (max-width: 599px) {
  h1 { font-size: clamp(34px, 9vw, 48px) !important; }
  h2 { font-size: clamp(24px, 7vw, 32px) !important; }
  h3 { font-size: 20px !important; }
  p, li { font-size: 15px !important; line-height: 1.55 !important; }
}

/* collapse multi-column grids on small screens */
@media (max-width: 999px) {
  [class*="tt-grid"], [class*="tt-cols"] { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 599px) {
  [class*="tt-grid"], [class*="tt-cols"] { grid-template-columns: 1fr !important; }
}

/* mobile header */
@media (max-width: 999px) {
  .tt-header-inner { padding: 14px 28px !important; }
  .tt-header-nav { gap: 16px !important; }
  .tt-header-cta { padding: 10px 14px !important; font-size: 11px !important; }
}
@media (max-width: 599px) {
  .tt-header-inner { padding: 12px 20px !important; }
  .tt-header-nav { display: none !important; }
  .tt-header-cta { display: none !important; }
  .tt-header-mobile { display: inline-flex !important; }
}

.banner-success {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: #060a12; color: #fff; padding: 14px 22px; border-radius: 999px;
  font-family: var(--font-display); font-weight: 500; font-size: 13px; letter-spacing: .04em;
  z-index: 200; box-shadow: 0 20px 40px rgba(0,0,0,.3);
  display: flex; align-items: center; gap: 10px;
}
.banner-success .dot { width: 8px; height: 8px; border-radius: 50%; background: #2bbf8a; }