/* ══════════════════════════════════════════════════════════════
   TRACARTA — Shared Design System
   Single source of truth for colors, type, spacing, components.
   ══════════════════════════════════════════════════════════════ */

/* ── FONTS ─────────────────────────────────────────────────────
   Type system — two families, intentional:
     1. Saira — primary display family.
        • Saira Condensed 600 uppercase → tiny labels (eyebrows, metadata)
        • Saira Condensed 600 mixed-case → section headlines, hero phrases,
          big figures, outcome numbers
        One family doing two jobs at different widths/cases.
     2. Urbanist — humanist sans. All running prose, ledes, UI copy.
   ──────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Saira+Condensed:wght@300;400;500;600;700;800&family=Saira:ital,wght@0,300..800;1,300..800&display=swap');

@font-face {
  font-family: 'Urbanist';
  src: url('fonts/Urbanist.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ── DESIGN TOKENS ─────────────────────────────────────────── */
:root {
  /* Surfaces (near-black depth scale) */
  --bg:        #0F0F10;      /* Primary background */
  --deep:     #0A0A0B;      /* Deeper band (footer, depth moments) */
  --surface:  #17171A;      /* Cards, elevated tiles */
  --panel:    #1D1D21;      /* Hover state on surface */
  --line:     rgba(255, 255, 255, 0.08);  /* Default divider */
  --line-strong: rgba(255, 255, 255, 0.14);

  /* Brand */
  --amber:     #FFC700;      /* Primary accent — THE brand color */
  --amber-dim: rgba(255, 199, 0, 0.12);
  --amber-edge: rgba(255, 199, 0, 0.28);
  --amber-soft: rgba(255, 199, 0, 0.06);

  /* Secondary (slate-blue — quiet support) */
  --slate:     #7CB8E8;
  --slate-dim: rgba(124, 184, 232, 0.12);
  --slate-edge: rgba(124, 184, 232, 0.25);

  /* Module identity hues — reserved for Platform universe only */
  --mod-skydoc:    #FFC700;  /* amber — shares brand */
  --mod-skyledger: #7CB8E8;  /* soft blue */
  --mod-skyboard:  #6DD6C4;  /* muted teal */
  --mod-aligniq:   #B39DDB;  /* soft lavender */
  --mod-skyconnect:#F4A261;  /* warm coral */
  --mod-skylink:   #E5989B;  /* dusty rose */

  /* Text tiers */
  --white:     #F5F5F4;
  --white-80:  rgba(245, 245, 244, 0.80);
  --white-60:  rgba(245, 245, 244, 0.60);
  --white-40:  rgba(245, 245, 244, 0.40);
  --white-25:  rgba(245, 245, 244, 0.25);

  /* Type families */
  --ff-display: 'Saira Condensed', 'Impact', sans-serif;        /* Primary — compressed sans for headlines */
  --ff-label:   'Saira Condensed', 'Impact', sans-serif;        /* Same family — weight + case do the label work */
  --ff-body:    'Urbanist', -apple-system, BlinkMacSystemFont, sans-serif;
  --ff-mono:    'JetBrains Mono', 'SF Mono', Consolas, monospace;

  /* Layout */
  --wrap-max: 1280px;
  --wrap-pad: 56px;
  --nav-h:    72px;

  /* Motion */
  --ease: cubic-bezier(.25, .46, .45, .94);
}

/* ── RESET ─────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body {
  background: var(--bg);
  color: var(--white);
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--amber-edge) transparent;
  position: relative;
}

/* ── PAPER GRAIN ─────────────────────────────────────────────
   Universal background texture. A faint SVG noise pattern
   overlaid across the whole page at ~4% opacity. Makes the
   near-black read as paper rather than pure digital black.
   Sits fixed so it moves with the viewport, not content.
   Pointer-events: none so it never intercepts clicks.
   ──────────────────────────────────────────────────────────── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.08 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ── ARCHITECTURAL GRID ──────────────────────────────────────
   A broad 120px grid of very faint hairlines. Masked with a
   radial fade so the grid is atmospheric at the viewport edges
   and softer (but not invisible) in the reading zone. Reads as
   "architecture" without interfering with reading. Fixed to
   the viewport so it doesn't shift as content scrolls.
   ──────────────────────────────────────────────────────────── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image:
    linear-gradient(to right,  rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 120px 120px;
  background-position: -1px -1px;
  /* Radial mask — most visible at viewport edges, softly dimmed in reading zone
     (but still present, not erased). */
  mask-image: radial-gradient(ellipse at center,
    rgba(0, 0, 0, 0.35) 0%,
    rgba(0, 0, 0, 0.75) 50%,
    black 100%);
  -webkit-mask-image: radial-gradient(ellipse at center,
    rgba(0, 0, 0, 0.35) 0%,
    rgba(0, 0, 0, 0.75) 50%,
    black 100%);
}

/* Lift interactive layers above both texture layers */
.tc-nav, main, footer, section { position: relative; z-index: 2; }
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--amber-edge); border-radius: 99px; }
a { text-decoration: none; color: inherit; }
button { border: none; background: none; cursor: pointer; font: inherit; color: inherit; }
img, svg { display: block; max-width: 100%; }

/* ── WRAP ──────────────────────────────────────────────────── */
.wrap {
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 0 var(--wrap-pad);
}

/* ── MOTION UTILITIES ──────────────────────────────────────── */
.sr {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.sr.visible { opacity: 1; transform: translateY(0); }
.d1 { transition-delay: 0.08s; }
.d2 { transition-delay: 0.16s; }
.d3 { transition-delay: 0.24s; }
.d4 { transition-delay: 0.32s; }
.d5 { transition-delay: 0.40s; }
.d6 { transition-delay: 0.48s; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ══════════════════════════════════════════════════════════════
   NAV
   Sticky top. Logo left. Mega-menu for Platform. Simple dropdowns
   for Solutions / Industries / About. Contact CTA on the right.
   ══════════════════════════════════════════════════════════════ */
.tc-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-h);
  background: rgba(15, 15, 16, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
  z-index: 100;
  transition: background 0.3s;
}
.tc-nav-inner {
  max-width: var(--wrap-max);
  margin: 0 auto;
  height: 100%;
  padding: 0 var(--wrap-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}
.tc-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.tc-logo svg {
  height: 19px;
  width: auto;
}
.tc-nav-menu {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  flex: 1;
  justify-content: center;
}
.tc-nav-item {
  position: relative;
}
.tc-nav-link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--white-80);
  border-radius: 4px;
  transition: color 0.2s;
  position: relative;
  cursor: pointer;
}
.tc-nav-link:hover { color: var(--white); }
.tc-nav-link::after {
  content: '';
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 4px;
  height: 1px;
  background: var(--amber);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.tc-nav-link:hover::after,
.tc-nav-item:hover .tc-nav-link::after { transform: scaleX(1); }
.tc-nav-caret {
  width: 8px;
  height: 8px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.6;
  transition: transform 0.2s;
}
.tc-nav-item:hover .tc-nav-caret { transform: rotate(180deg); }

/* Contact CTA on the right */
.tc-nav-cta {
  font-family: var(--ff-body);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 11px;
  color: var(--bg);
  background: var(--amber);
  padding: 10px 20px;
  border-radius: 2px;
  transition: filter 0.2s, transform 0.15s;
  flex-shrink: 0;
}
.tc-nav-cta:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

/* Simple dropdown (Solutions, Industries, About) */
.tc-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 240px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
}
/* Invisible "bridge" between nav link and dropdown — keeps hover alive
   as the cursor crosses the 8px gap, preventing the dropdown from
   collapsing mid-traverse. */
.tc-dropdown::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 10px;
  /* invisible but hoverable */
}
.tc-nav-item:hover .tc-dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.tc-dropdown a {
  display: block;
  padding: 10px 14px;
  font-size: 14px;
  color: var(--white-80);
  border-radius: 2px;
  transition: background 0.15s, color 0.15s;
}
.tc-dropdown a:hover {
  background: var(--panel);
  color: var(--amber);
}

/* Mega-menu (Platform only) */
.tc-mega {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  width: 720px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
/* Invisible "bridge" — same purpose as on .tc-dropdown */
.tc-mega::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 10px;
}
.tc-nav-item:hover .tc-mega {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.tc-mega-item {
  display: grid;
  grid-template-columns: 10px 1fr;
  gap: 14px;
  align-items: start;
  padding: 12px;
  border-radius: 3px;
  transition: background 0.15s;
}
.tc-mega-item:hover { background: var(--panel); }
.tc-mega-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 7px;
  flex-shrink: 0;
}
.tc-mega-dot.skydoc    { background: var(--mod-skydoc); }
.tc-mega-dot.skyledger { background: var(--mod-skyledger); }
.tc-mega-dot.skyboard  { background: var(--mod-skyboard); }
.tc-mega-dot.aligniq   { background: var(--mod-aligniq); }
.tc-mega-dot.skyconnect{ background: var(--mod-skyconnect); }
.tc-mega-dot.skylink   { background: var(--mod-skylink); }
.tc-mega-dot.platform  { background: var(--white); }
.tc-mega-name {
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--white);
  line-height: 1;
  margin-bottom: 4px;
}
.tc-mega-desc {
  font-size: 12px;
  color: var(--white-60);
  line-height: 1.5;
}
.tc-mega-item:hover .tc-mega-name { color: var(--amber); }

/* Mobile hamburger (hidden until mobile) */
.tc-burger {
  display: none;
  width: 40px;
  height: 40px;
  padding: 10px;
}
.tc-burger span {
  display: block;
  width: 100%;
  height: 1.5px;
  background: var(--white);
  margin: 4px 0;
  transition: transform 0.25s, opacity 0.25s;
}

/* ══════════════════════════════════════════════════════════════
   BUTTONS
   Urbanist uppercase — more legible than Bebas at button sizes,
   while preserving the "label" character.
   ══════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ff-body);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.16em;
  padding: 16px 32px;
  border-radius: 2px;
  transition: all 0.2s var(--ease);
  cursor: pointer;
  white-space: nowrap;
}
.btn svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.2s;
}
.btn:hover svg { transform: translateX(3px); }

.btn-primary {
  background: var(--amber);
  color: var(--bg);
}
.btn-primary svg { stroke: var(--bg); }
.btn-primary:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255, 199, 0, 0.2);
}

.btn-secondary {
  color: var(--white);
  border: 1px solid var(--white-25);
  background: transparent;
}
.btn-secondary svg { stroke: var(--white); }
.btn-secondary:hover {
  border-color: var(--amber);
  color: var(--amber);
  background: var(--amber-soft);
}
.btn-secondary:hover svg { stroke: var(--amber); }

.btn-text {
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--amber);
  padding: 8px 0;
  border-bottom: 1px solid var(--amber-edge);
  border-radius: 0;
}
.btn-text:hover {
  border-bottom-color: var(--amber);
}

/* ══════════════════════════════════════════════════════════════
   SECTION PRIMITIVES
   Eyebrow (label) + Headline (editorial serif) + Lede (body).
   ══════════════════════════════════════════════════════════════ */
.section {
  position: relative;
  padding: 140px 0;
}
.section-deep { background: var(--deep); }

/* Eyebrow — small caps label. Saira Condensed 600 uppercase carries the label
   feel (compression + weight) at 12px while staying in family with the headlines. */
.eyebrow {
  font-family: var(--ff-label);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.3em;
  color: var(--amber);
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
  text-transform: uppercase;
}
.eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--amber);
}
.eyebrow.center { justify-content: center; }
.eyebrow.center::after {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--amber);
}

/* Display headline — Saira Condensed.
   Weight 600 at display size gives modern-editorial authority.
   Italic amber carries emphasis without shouting. */
.h-display {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: clamp(40px, 5.2vw, 76px);
  letter-spacing: -0.015em;
  line-height: 1.02;
  color: var(--white);
}
.h-display em {
  color: var(--amber);
  font-style: normal;
  font-weight: 600;
}

/* Body lede — Urbanist, comfortable reading size. */
.lede {
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.7;
  color: var(--white-80);
  max-width: 620px;
  margin-top: 32px;
}
.lede-lg {
  font-size: 19px;
  max-width: 680px;
}

/* ══════════════════════════════════════════════════════════════
   FOOTER
   Deep band, 4-column sitemap, amber rule, legal row.
   ══════════════════════════════════════════════════════════════ */
.tc-footer {
  background: var(--deep);
  border-top: 1px solid var(--line);
  padding: 88px 0 40px;
  position: relative;
}
.tc-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 1px;
  background: var(--amber);
}
.tc-footer-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 72px;
}
.tc-footer-brand .tc-logo {
  margin-bottom: 24px;
}
.tc-footer-brand .tc-logo svg { height: 22px; }
.tc-footer-tag {
  font-family: var(--ff-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--white-60);
  max-width: 280px;
}
.tc-footer-col-h {
  font-family: var(--ff-label);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.28em;
  color: var(--amber);
  margin-bottom: 20px;
  text-transform: uppercase;
}
.tc-footer-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tc-footer-col a {
  font-size: 14px;
  color: var(--white-60);
  transition: color 0.2s;
}
.tc-footer-col a:hover { color: var(--amber); }
.tc-footer-bottom {
  border-top: 1px solid var(--line);
  padding-top: 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.tc-footer-copy {
  font-size: 13px;
  color: var(--white-40);
  letter-spacing: 0.02em;
}
.tc-footer-legal {
  display: flex;
  gap: 24px;
  list-style: none;
  flex-wrap: wrap;
}
.tc-footer-legal a {
  font-size: 13px;
  color: var(--white-40);
  transition: color 0.2s;
}
.tc-footer-legal a:hover { color: var(--amber); }

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .tc-footer-top {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 40px;
  }
  .tc-footer-brand { grid-column: span 3; margin-bottom: 16px; }
}
@media (max-width: 900px) {
  :root { --wrap-pad: 32px; --nav-h: 64px; }

  /* Hide desktop CTA, show burger */
  .tc-nav-cta { display: none; }
  .tc-burger { display: block; position: relative; z-index: 1002; }

  /* Mobile menu: full-screen overlay panel slides down from top */
  .tc-nav-menu {
    display: flex;            /* keep flex but reposition off-screen */
    position: fixed;
    top: 0; left: 0; right: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;           /* dvh handles iOS Safari address-bar shrink */
    background: var(--bg);
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    padding: calc(var(--nav-h) + 32px) 32px 64px;
    gap: 0;
    z-index: 1001;
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.4s var(--ease), opacity 0.3s var(--ease);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .tc-nav-menu.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  /* Each top-level nav item — full width, vertical stack */
  .tc-nav-item {
    width: 100%;
    border-bottom: 1px solid var(--line);
  }
  .tc-nav-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 22px 4px;
    font-size: 18px;
    color: var(--white);
  }
  .tc-nav-link::after { display: none; }    /* no underline animation on mobile */
  .tc-nav-caret { opacity: 1; width: 12px; height: 12px; }

  /* Mega-menu and dropdown — flatten into static lists on mobile.
     No hover-to-open; the items render permanently below their parent. */
  .tc-dropdown,
  .tc-mega {
    position: static;
    transform: none;
    opacity: 1;
    pointer-events: auto;
    display: block;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0 0 16px 4px;
    width: auto;
    min-width: 0;
  }
  .tc-dropdown::before,
  .tc-mega::before { display: none; }       /* kill the hover-bridge on mobile */
  .tc-dropdown a {
    padding: 12px 0;
    font-size: 15px;
    color: var(--white-60);
    border-radius: 0;
  }
  .tc-mega-item {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr);   /* minmax(0,1fr) prevents content overflow */
    column-gap: 14px;
    padding: 12px 0;
    align-items: start;
  }
  /* The <a> contains [dot][wrapper-span]. Force the wrapper-span (anything
     that isn't the dot) into a block so name + desc stack vertically. */
  .tc-mega-item > span:not(.tc-mega-dot) {
    display: block;
    min-width: 0;            /* allow text to wrap inside the grid cell */
  }
  .tc-mega-name {
    display: block;
    font-size: 16px;
    color: var(--white);
    margin-bottom: 4px;
  }
  .tc-mega-desc {
    display: block;
    font-size: 13px;
    color: var(--white-60);
    line-height: 1.5;
  }

  /* Burger → X animation */
  .tc-burger.open span:nth-child(1) {
    transform: translateY(5.5px) rotate(45deg);
  }
  .tc-burger.open span:nth-child(2) {
    opacity: 0;
  }
  .tc-burger.open span:nth-child(3) {
    transform: translateY(-5.5px) rotate(-45deg);
  }

  /* When menu is open, lock body scroll */
  body.menu-open {
    overflow: hidden;
  }

  .section { padding: 88px 0; }
  .h-display { font-size: clamp(40px, 9vw, 60px); }
  .lede { font-size: 16px; }
}
@media (max-width: 600px) {
  :root { --wrap-pad: 22px; }
  .tc-footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
  .tc-footer-brand { grid-column: span 2; }
  .btn { padding: 14px 24px; font-size: 13px; }
  .eyebrow { font-size: 11px; letter-spacing: 0.28em; }
}