/* =========================================================
   ThinkTrail Solutions — Corporate Site
   Aesthetic reference: ServiceNow
   Palette: deep navy primary, accent green, generous whitespace
   ========================================================= */

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: #1b2a36;
  background: #ffffff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { max-width: 100%; height: auto; display: block; }
a { color: #0a6e6e; text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  font-family: 'Inter', sans-serif;
  color: #051f2c;
  letter-spacing: -0.02em;
  margin: 0 0 0.6em;
  font-weight: 700;
  line-height: 1.15;
}
h1 { font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 800; }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.55rem); }
h4 { font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.08em; color: #0a6e6e; font-weight: 700; }

p { margin: 0 0 1.1em; }
.lede { font-size: clamp(1.1rem, 1.6vw, 1.35rem); color: #3a4d5c; line-height: 1.55; max-width: 62ch; }

.eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #0a6e6e;
  margin-bottom: 1rem;
}

/* ---------- Layout containers ---------- */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 28px;
}
section { padding: 96px 0; }
section.tight { padding: 64px 0; }
.section-head { max-width: 720px; margin-bottom: 56px; }
.bg-light { background: #f5f7f9; }
.bg-dark { background: #051f2c; color: #d8e3eb; }
.bg-dark h1, .bg-dark h2, .bg-dark h3 { color: #ffffff; }
.bg-dark h4 { color: #62d8a5; }
.bg-dark .lede { color: #a9bccb; }
.bg-dark a { color: #62d8a5; }

/* ---------- Top nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.96);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid #e3e8ec;
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  height: 72px;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 800; font-size: 1.05rem; color: #051f2c; letter-spacing: -0.01em;
}
.brand:hover { text-decoration: none; }
/* Accent color for the "Trail" portion of the ThinkTrail Solutions wordmark.
   Used inline as <span class="brand-accent">Trail</span> wherever the brand
   appears in body copy, headers, footers, and copyright lines. */
.brand-accent { color: #62d8a5; }
.brand-mark {
  width: 28px; height: 28px; border-radius: 6px;
  background: linear-gradient(135deg, #051f2c 0%, #0a6e6e 60%, #62d8a5 100%);
  display: inline-block;
}
.nav-links { display: flex; gap: 28px; align-items: center; }
.nav-links a {
  color: #1b2a36; font-weight: 500; font-size: 0.96rem;
}
.nav-links a:hover { color: #0a6e6e; text-decoration: none; }
.nav-cta {
  background: #051f2c; color: #fff !important;
  padding: 10px 18px; border-radius: 6px; font-weight: 600 !important;
  transition: background 0.15s;
}
.nav-cta:hover { background: #0a6e6e; }

.nav-toggle {
  display: none;
  background: none; border: 0; cursor: pointer;
  width: 40px; height: 40px;
  padding: 8px;
}
.nav-toggle span {
  display: block; width: 100%; height: 2px; background: #051f2c; margin: 5px 0;
  transition: transform 0.2s;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block; padding: 14px 26px; border-radius: 6px;
  font-weight: 600; font-size: 1rem; letter-spacing: 0.01em;
  cursor: pointer; border: 0; transition: all 0.18s;
  text-decoration: none;
}
.btn-primary {
  background: #62d8a5; color: #051f2c;
}
.btn-primary:hover { background: #4ec491; text-decoration: none; }
.btn-secondary {
  background: transparent; color: #051f2c; border: 1.5px solid #051f2c;
}
.btn-secondary:hover { background: #051f2c; color: #fff; text-decoration: none; }
.btn-on-dark {
  background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,0.5);
}
.btn-on-dark:hover { background: #fff; color: #051f2c; text-decoration: none; }

/* ---------- Button overrides inside dark sections ----------
   Without these, .bg-dark a { color: #62d8a5; } wins on specificity over
   .btn-primary's color, making the primary button's text the same accent
   green as its background (invisible until hover). The rules below scope
   the correct text color back into every button variant that can appear
   inside a .bg-dark section. */
.bg-dark .btn-primary,
.bg-dark .btn-primary:hover { color: #051f2c; }
.bg-dark .btn-on-dark { color: #fff; }
.bg-dark .btn-on-dark:hover { color: #051f2c; }
.bg-dark .btn-secondary { color: #fff; border-color: rgba(255,255,255,0.5); }
.bg-dark .btn-secondary:hover { background: #fff; color: #051f2c; }

/* ---------- Hero ---------- */
.hero {
  padding: 120px 0 110px;
  background: linear-gradient(180deg, #051f2c 0%, #0a3145 80%, #0a3145 100%);
  color: #d8e3eb;
  position: relative; overflow: hidden;
}
.hero::before {
  content: ''; position: absolute;
  top: -20%; right: -10%; width: 60%; height: 140%;
  background: radial-gradient(closest-side, rgba(98,216,165,0.18), transparent 70%);
  pointer-events: none;
}
.hero h1 { color: #fff; max-width: 18ch; }
.hero .lede { color: #a9bccb; max-width: 60ch; margin-top: 16px; }
.hero-actions { margin-top: 36px; display: flex; gap: 14px; flex-wrap: wrap; }
.hero-meta {
  margin-top: 56px; display: flex; gap: 48px; flex-wrap: wrap;
  border-top: 1px solid rgba(255,255,255,0.12); padding-top: 32px;
}
.hero-meta-item { color: #a9bccb; font-size: 0.92rem; max-width: 220px; }
.hero-meta-item strong { display: block; color: #fff; font-size: 1.1rem; margin-bottom: 4px; font-weight: 700; }

/* ---------- Value props (3-up) ---------- */
.grid-3 {
  display: grid; gap: 32px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.grid-2 {
  display: grid; gap: 40px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  align-items: start;
}
.card {
  background: #fff; border: 1px solid #e3e8ec; border-radius: 10px;
  padding: 32px 28px;
  transition: transform 0.18s, box-shadow 0.18s;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -18px rgba(5,31,44,0.25);
}
.card h3 { margin-bottom: 12px; }
.card p:last-child { margin-bottom: 0; }
/* Email-address headings inside contact cards: keep them smaller than a
   standard h3 and allow aggressive wrapping so long addresses like
   sales@thinktrailsolutions.com never overflow the card edge at narrow
   viewports. */
.card h3.email-address {
  font-size: clamp(0.95rem, 1.6vw, 1.15rem);
  word-break: break-all;
  overflow-wrap: anywhere;
  letter-spacing: -0.005em;
  line-height: 1.35;
}
.card-icon {
  width: 44px; height: 44px; border-radius: 8px;
  background: linear-gradient(135deg, #0a6e6e, #62d8a5);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px; color: #051f2c; font-weight: 800;
}

/* ---------- Capability strip ---------- */
.capabilities {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-top: 32px;
}
.capability {
  padding: 18px 20px; background: #fff; border-radius: 8px;
  border: 1px solid #e3e8ec;
  font-weight: 600; color: #051f2c;
  display: flex; align-items: center; gap: 12px;
}
.capability::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: #62d8a5; flex-shrink: 0;
}

/* ---------- Two-column content ---------- */
.split {
  display: grid; gap: 56px;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }
.mock {
  border-radius: 12px; overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(5,31,44,0.4);
  background: #fff; border: 1px solid #e3e8ec;
}
.mock-chrome {
  display: flex; gap: 6px; padding: 12px 14px; background: #051f2c;
}
.mock-chrome span { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.25); }

/* ---------- Tables (security/roles) ---------- */
.table {
  width: 100%; border-collapse: collapse; background: #fff;
  border: 1px solid #e3e8ec; border-radius: 10px; overflow: hidden;
}
.table th, .table td {
  text-align: left; padding: 16px 20px; border-bottom: 1px solid #e3e8ec;
  font-size: 0.95rem; vertical-align: top;
}
.table th {
  background: #f5f7f9; font-weight: 700; color: #051f2c;
  font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.06em;
}
.table tr:last-child td { border-bottom: 0; }

/* ---------- Status pills ---------- */
.pill {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
}
.pill-live { background: #d8f4e7; color: #075a3a; }
.pill-design { background: #e2efff; color: #0a4b80; }
.pill-roadmap { background: #fff3d9; color: #7a5300; }

/* ---------- Form ---------- */
.form-grid {
  display: grid; gap: 18px;
  grid-template-columns: 1fr 1fr;
  max-width: 720px;
}
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.field label {
  display: block; font-weight: 600; font-size: 0.88rem; color: #051f2c;
  margin-bottom: 6px; letter-spacing: 0.02em;
}
.field input, .field select, .field textarea {
  width: 100%; padding: 12px 14px;
  font-family: inherit; font-size: 1rem;
  background: #fff; border: 1px solid #c8d3dc; border-radius: 6px;
  color: #1b2a36; transition: border 0.15s, box-shadow 0.15s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 0; border-color: #0a6e6e;
  box-shadow: 0 0 0 3px rgba(10,110,110,0.15);
}
.field textarea { min-height: 140px; resize: vertical; }
.form-note {
  margin-top: 20px; padding: 14px 18px; background: #f5f7f9;
  border-left: 3px solid #0a6e6e; border-radius: 4px;
  font-size: 0.92rem; color: #3a4d5c;
}

/* ---------- Roadmap list ---------- */
.roadmap-list { list-style: none; padding: 0; margin: 0; }
.roadmap-list li {
  padding: 18px 0; border-bottom: 1px solid #e3e8ec;
  display: flex; gap: 18px; align-items: start;
}
.roadmap-list li:last-child { border-bottom: 0; }
.roadmap-list strong { display: block; color: #051f2c; margin-bottom: 4px; }
.roadmap-list .pill { flex-shrink: 0; margin-top: 2px; }

/* ---------- Footer ---------- */
.site-footer {
  background: #051f2c; color: #a9bccb; padding: 64px 0 32px;
  font-size: 0.92rem;
}
.site-footer h4 { color: #62d8a5; font-size: 0.8rem; margin-bottom: 14px; }
.footer-grid {
  display: grid; gap: 40px;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
}
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
.footer-grid a { color: #a9bccb; display: block; padding: 4px 0; }
.footer-grid a:hover { color: #fff; text-decoration: none; }
.footer-brand { color: #fff; font-weight: 800; font-size: 1.1rem; margin-bottom: 14px; display: block; }
.footer-bottom {
  margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.08);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 0.85rem; color: #7c93a3;
}

/* ---------- Helpers ---------- */
.center { text-align: center; }
.mw-720 { max-width: 720px; margin-left: auto; margin-right: auto; }
.mt-32 { margin-top: 32px; }

/* ---------- Mobile nav ---------- */
@media (max-width: 760px) {
  .nav-links {
    position: absolute; top: 72px; left: 0; right: 0;
    background: #fff; border-bottom: 1px solid #e3e8ec;
    flex-direction: column; align-items: stretch;
    gap: 0; padding: 12px 24px 20px;
    display: none;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 14px 0; border-bottom: 1px solid #f1f4f6; }
  .nav-cta { text-align: center; margin-top: 8px; }
  .nav-toggle { display: block; }
}