/* ==========================================================================
   EDL Marketing Group LLC
   Palette is deliberately quiet: the five client screenshots carry all the
   colour (orange, red, teal, blue), so the parent brand stays on ink + copper.
   ========================================================================== */

:root {
  --ink:       #0C0F13;
  --ink-deep:  #080B0E;
  --carbon:    #14181E;
  --edge:      #232B35;
  --edge-soft: #1A2028;
  --copper:    #C0703A;
  --copper-hi: #E08B4E;
  --patina:    #46A08C;
  --bone:      #ECE7DF;
  --ash:       #8B939E;

  --display: 'Archivo', system-ui, sans-serif;
  --body:    'Instrument Sans', system-ui, sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, monospace;

  --wrap: 1200px;
  --gut:  clamp(20px, 4vw, 40px);
  --rad:  14px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--copper-hi);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--copper);
  color: #12151A;
  padding: 10px 16px;
  font-weight: 600;
  z-index: 99;
}
.skip:focus { left: 12px; top: 12px; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.dot {
  display: inline-block;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: currentColor;
  vertical-align: middle;
  margin-inline: 9px;
  opacity: .55;
}

/* ---------- shared type ---------- */

.kicker {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--copper);
  margin: 0 0 18px;
}

.h2 {
  font-family: var(--display);
  font-variation-settings: 'wdth' 112, 'wght' 800;
  font-size: clamp(1.9rem, 4vw, 3.05rem);
  line-height: 1.04;
  letter-spacing: -.025em;
  margin: 0 0 20px;
  max-width: 20ch;
}

.lede {
  color: var(--ash);
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  max-width: 62ch;
  margin: 0 0 16px;
}

.link {
  font-family: var(--mono);
  font-size: .9rem;
  color: var(--copper-hi);
  text-decoration: none;
  border-bottom: 1px solid rgba(224,139,78,.35);
  padding-bottom: 2px;
}
.link:hover { border-bottom-color: var(--copper-hi); }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: .5ch;
  background: var(--copper);
  color: #12151A;
  font-family: var(--body);
  font-weight: 600;
  font-size: .98rem;
  letter-spacing: -.01em;
  text-decoration: none;
  padding: 14px 24px;
  border-radius: 999px;
  border: 1px solid var(--copper);
  transition: background .18s ease, transform .18s ease;
  white-space: nowrap;
}
.btn:hover { background: var(--copper-hi); border-color: var(--copper-hi); transform: translateY(-1px); }

.btn--ghost {
  background: transparent;
  color: var(--bone);
  border-color: var(--edge);
}
.btn--ghost:hover { background: transparent; border-color: var(--ash); }

.btn--sm { padding: 9px 17px; font-size: .9rem; }
.btn__label { display: none; }

/* ---------- header ---------- */

.bar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(12,15,19,.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--edge-soft);
}

.bar__in {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 68px;
}

/* Wordmark only, no icon. */
.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  text-decoration: none;
  margin-right: auto;
  font-family: var(--display);
  line-height: 1;
}
.brand__name {
  font-variation-settings: 'wdth' 120, 'wght' 850;
  font-size: 1.32rem;
  letter-spacing: .005em;
  color: var(--bone);
}
.brand__sub {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ash);
}

.nav { display: none; gap: 30px; }
.nav a {
  text-decoration: none;
  color: var(--ash);
  font-size: .93rem;
  transition: color .18s ease;
}
.nav a:hover { color: var(--bone); }

/* ---------- hero ---------- */

.hero {
  position: relative;
  padding: clamp(64px, 12vw, 132px) 0 clamp(48px, 7vw, 84px);
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  inset: -30% 30% 40% -20%;
  background: radial-gradient(closest-side, rgba(192,112,58,.16), transparent 72%);
  pointer-events: none;
}
.hero__in { position: relative; }

.eyebrow {
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ash);
  margin: 0 0 26px;
}

.hero__h {
  font-family: var(--display);
  font-variation-settings: 'wdth' 116, 'wght' 850;
  font-size: clamp(2.6rem, 7.4vw, 5.4rem);
  line-height: .96;
  letter-spacing: -.035em;
  margin: 0 0 28px;
}

.hero__p {
  color: var(--ash);
  font-size: clamp(1.02rem, 1.7vw, 1.2rem);
  max-width: 56ch;
  margin: 0 0 34px;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: clamp(52px, 8vw, 92px);
}

/* ---------- signature: the measured chain ---------- */

.chain {
  position: relative;
  border-top: 1px solid var(--edge-soft);
  padding-top: 26px;
}

.chain__track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 22px 18px;
}

.chain__step {
  position: relative;
  padding-top: 18px;
  opacity: 0;
  transform: translateY(8px);
  animation: chain-in .5s ease forwards;
}
.chain__step::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--edge);
  box-shadow: 0 0 0 3px var(--ink);
}
.chain__step::after {
  content: '';
  position: absolute;
  top: 3px; left: 7px; right: -18px;
  height: 1px;
  background: var(--edge-soft);
}
.chain__step:last-child::after { display: none; }
.chain__step--end::before { background: var(--copper); }

.chain__n {
  display: block;
  font-family: var(--display);
  font-variation-settings: 'wdth' 108, 'wght' 700;
  font-size: .98rem;
  letter-spacing: -.01em;
  margin-bottom: 3px;
}
.chain__d {
  display: block;
  font-size: .84rem;
  line-height: 1.45;
  color: var(--ash);
}

.chain__step:nth-child(1) { animation-delay: .05s }
.chain__step:nth-child(2) { animation-delay: .16s }
.chain__step:nth-child(3) { animation-delay: .27s }
.chain__step:nth-child(4) { animation-delay: .38s }
.chain__step:nth-child(5) { animation-delay: .49s }
.chain__step:nth-child(6) { animation-delay: .60s }

@keyframes chain-in {
  to { opacity: 1; transform: none; }
}

.chain__pulse {
  position: absolute;
  top: 23px; left: 0;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--patina);
  box-shadow: 0 0 0 3px var(--ink), 0 0 14px rgba(70,160,140,.75);
  animation: chain-run 5.2s cubic-bezier(.6,0,.4,1) .7s infinite;
}
@keyframes chain-run {
  0%        { left: 0;     opacity: 0; }
  6%        { opacity: 1; }
  86%       { left: 100%;  opacity: 1; }
  96%, 100% { left: 100%;  opacity: 0; }
}

/* ---------- bands ---------- */

.band { padding: clamp(64px, 9vw, 118px) 0; }
.band--dark { background: var(--ink-deep); }

/* ---------- services grid ---------- */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1px;
  background: var(--edge-soft);
  border: 1px solid var(--edge-soft);
  border-radius: var(--rad);
  overflow: hidden;
  margin-top: 44px;
}

.card {
  background: var(--ink);
  padding: 32px 28px 34px;
}
.card p {
  color: var(--ash);
  font-size: .96rem;
  margin: 0;
}
.card__h {
  font-family: var(--display);
  font-variation-settings: 'wdth' 108, 'wght' 750;
  font-size: 1.16rem;
  letter-spacing: -.015em;
  line-height: 1.2;
  margin: 0 0 12px;
}
.card--quiet { background: var(--carbon); }
.card--quiet .link { display: inline-block; margin-top: 16px; }

/* ---------- work deck (3D carousel) ---------- */

.deck {
  /* One source of truth: the stage height is derived from the card width so the
     absolutely-positioned slides never overflow into the next section. */
  --card-w: min(660px, 74vw);
  margin-top: 54px;
  user-select: none;
  /* The fan is meant to bleed off both edges; clipping here keeps that bleed
     from turning into a horizontal scrollbar on the page. */
  overflow: hidden;
}

.deck__stage {
  position: relative;
  height: calc(var(--card-w) * 0.625 + 108px);
  perspective: 1700px;
  perspective-origin: 50% 42%;
  touch-action: pan-y;
  cursor: grab;
}
.deck__stage.is-drag { cursor: grabbing; }

.slide {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--card-w);
  margin-left: calc(var(--card-w) / -2);
  transform-style: preserve-3d;
  transition: transform .55s cubic-bezier(.22,.68,.24,1), opacity .55s ease;
  will-change: transform, opacity;
}
.deck__stage.is-drag .slide { transition: none; }

.frame {
  border-radius: 12px;
  overflow: hidden;
  background: var(--carbon);
  border: 1px solid var(--edge);
  box-shadow: 0 34px 70px -30px rgba(0,0,0,.9);
}

.frame__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 34px;
  padding: 0 13px;
  background: #171C23;
  border-bottom: 1px solid var(--edge);
}
.frame__lights { display: flex; gap: 6px; flex: none; }
.frame__lights i {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #2E3742;
  display: block;
}
.frame__url {
  font-family: var(--mono);
  font-size: .68rem;
  color: var(--ash);
  background: #0E1218;
  border-radius: 5px;
  padding: 3px 11px;
  flex: 1;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.frame__shot {
  /* height:auto is load-bearing. Without it the img height attribute wins and
     object-fit crops the screenshot sideways. */
  width: 100%;
  height: auto;
  aspect-ratio: 1440 / 900;
  object-fit: cover;
  object-position: top center;
  background: var(--carbon);
}

.slide__meta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 14px;
  padding: 18px 2px 0;
  opacity: 0;
  transition: opacity .4s ease;
}
.slide.is-live .slide__meta { opacity: 1; }

.slide__name {
  font-family: var(--display);
  font-variation-settings: 'wdth' 110, 'wght' 750;
  font-size: 1.02rem;
  letter-spacing: -.015em;
}
.slide__trade { font-size: .87rem; color: var(--ash); margin-right: auto; }
.slide__tag {
  font-family: var(--mono);
  font-size: .72rem;
  color: var(--patina);
  border: 1px solid rgba(70,160,140,.32);
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}

.deck__ui {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 30px;
}

.deck__arrow {
  width: 42px; height: 42px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--edge);
  background: transparent;
  color: var(--bone);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
}
.deck__arrow:hover { border-color: var(--copper); background: rgba(192,112,58,.1); }
.deck__arrow svg { width: 19px; height: 19px; }

.deck__dots { display: flex; gap: 9px; }
.deck__dots button {
  width: 8px; height: 8px;
  padding: 0;
  border-radius: 50%;
  border: none;
  background: var(--edge);
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.deck__dots button[aria-selected='true'] {
  background: var(--copper);
  transform: scale(1.4);
}

.deck__hint {
  text-align: center;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #5A626C;
  margin: 16px 0 0;
}

/* ---------- app section ---------- */

.app__in {
  display: grid;
  gap: clamp(40px, 6vw, 72px);
  align-items: start;
}

.feat {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: grid;
  gap: 26px;
}
.feat li { border-left: 2px solid var(--edge); padding-left: 20px; }
.feat h3 {
  font-family: var(--display);
  font-variation-settings: 'wdth' 106, 'wght' 720;
  font-size: 1.04rem;
  letter-spacing: -.015em;
  margin: 0 0 6px;
}
.feat p { color: var(--ash); font-size: .94rem; margin: 0; }

.app__panel { position: relative; align-self: center; }

.login {
  margin-top: 44px;
  padding-top: 32px;
  border-top: 1px solid var(--edge);
  position: relative;
}
.login::before {
  content: '';
  position: absolute;
  top: -1px; left: 0;
  width: 84px; height: 2px;
  background: linear-gradient(90deg, var(--copper), var(--patina));
}

.phone__cap {
  text-align: center;
  font-family: var(--mono);
  font-size: .7rem;
  color: #5A626C;
  margin: 4px 0 0;
}

/* ---------- phone mockup: the tracker's leads screen ---------- */

.phone {
  --screen-w: 292px;
  width: calc(var(--screen-w) + 22px);
  margin: 0 auto;
}
.phone__body {
  border-radius: 46px;
  padding: 11px;
  background: linear-gradient(155deg, #39424E, #171C23 42%, #0E1319);
  box-shadow: 0 40px 70px -32px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.05);
}
.phone__screen {
  position: relative;
  width: var(--screen-w);
  aspect-ratio: 390 / 844;
  border-radius: 36px;
  overflow: hidden;
  background: #0E1116;
  display: flex;
  flex-direction: column;
}
.phone__island {
  position: absolute;
  top: 9px; left: 50%;
  transform: translateX(-50%);
  width: 78px; height: 21px;
  border-radius: 999px;
  background: #05070A;
  z-index: 4;
}

.ui {
  flex: 1;
  min-height: 0;
  padding: 42px 13px 0;
  font-size: 10px;
  line-height: 1.45;
  overflow: hidden;
}
.ui__brand {
  display: flex; align-items: center; gap: 5px;
  font-family: var(--display);
  font-variation-settings: 'wdth' 108, 'wght' 800;
  font-size: 12px;
  margin: 0 0 12px;
}
.ui__brand em { color: #F2A93B; font-style: normal; }
.ui__brandDot { width: 8px; height: 8px; border-radius: 2px; background: #F2A93B; }
.ui__eyebrow { color: #F2A93B; font-size: 9px; margin: 0 0 2px; }
.ui__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.ui__head h4 {
  font-family: var(--display);
  font-variation-settings: 'wdth' 112, 'wght' 800;
  font-size: 20px;
  letter-spacing: -.02em;
  margin: 0;
}
.ui__count { font-family: var(--mono); font-size: 9px; color: var(--ash); }
.ui__label {
  font-family: var(--mono);
  font-size: 7.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #F2A93B;
  margin: 0 0 7px;
}
.ui__chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 11px; }
.ui__chip {
  border: 1px solid #262E38;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 8.5px;
  color: var(--ash);
  white-space: nowrap;
}
.ui__chip b { font-family: var(--mono); color: var(--bone); font-weight: 500; }
.ui__chip.is-on { border-color: rgba(242,169,59,.5); }
.ui__chip.is-on b { color: #F2A93B; }

.lead {
  position: relative;
  background: #161B22;
  border-radius: 10px;
  padding: 9px 10px;
  margin-bottom: 7px;
  overflow: hidden;
}
.lead--won::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: #F2A93B;
}
.lead__top { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.lead__num { font-family: var(--mono); font-size: 11.5px; letter-spacing: -.02em; }
.lead__when { font-family: var(--mono); font-size: 8px; color: #6B737D; white-space: nowrap; }
.lead__repeat { display: block; color: #F2A93B; font-size: 8.5px; margin-top: 1px; }
.lead__stat {
  display: flex; align-items: center; gap: 5px;
  font-family: var(--mono);
  font-size: 8.5px;
  color: #56C08D;
  margin: 3px 0 0;
}
.lead__stat b { font-weight: 500; }
.lead__dot { width: 5px; height: 5px; border-radius: 50%; background: #56C08D; flex: none; }
.lead__co { color: var(--ash); font-size: 9px; margin: 4px 0 0; }
.lead__src {
  display: inline-block;
  margin-top: 6px;
  background: rgba(242,169,59,.14);
  color: #F2A93B;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 8px;
}

.ui__nav {
  display: flex;
  justify-content: space-between;
  gap: 2px;
  margin: 0 9px 9px;
  padding: 8px 7px;
  background: #171D25;
  border-radius: 14px;
  font-size: 7.5px;
  color: #6B737D;
  text-align: center;
}
.ui__nav .is-on { color: #F2A93B; }

.panel__kicker {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--patina);
  margin: 0 0 12px;
}
.panel__h {
  font-family: var(--display);
  font-variation-settings: 'wdth' 110, 'wght' 800;
  font-size: 1.5rem;
  letter-spacing: -.02em;
  margin: 0 0 12px;
}
.panel__p { color: var(--ash); font-size: .96rem; margin: 0 0 22px; }
.panel__list { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 12px; }
.panel__list li {
  position: relative;
  padding-left: 26px;
  font-size: .94rem;
  color: var(--bone);
}
.panel__list li::before {
  content: '';
  position: absolute;
  left: 4px; top: .62em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--patina);
}
.panel__note {
  font-family: var(--mono);
  font-size: .74rem;
  color: var(--ash);
  border-top: 1px solid var(--edge);
  padding-top: 18px;
  margin: 0;
}

/* ---------- company ---------- */

.company { display: grid; gap: clamp(40px, 6vw, 72px); align-items: start; }

.ident {
  font-style: normal;
  background: var(--carbon);
  border: 1px solid var(--edge);
  border-radius: var(--rad);
  padding: 30px;
}
.ident dl { margin: 0; display: grid; gap: 22px; }
.ident dt {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--ash);
  margin-bottom: 7px;
}
.ident dd {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
}
.ident a { color: var(--copper-hi); text-decoration: none; }
.ident a:hover { text-decoration: underline; }

/* ---------- footer ---------- */

.foot {
  border-top: 1px solid var(--edge-soft);
  padding: 32px 0 44px;
}
.foot__in {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  align-items: center;
  justify-content: space-between;
}
.foot p { margin: 0; font-size: .88rem; color: var(--ash); }
.foot a { color: var(--ash); text-decoration: none; }
.foot a:hover { color: var(--bone); }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (min-width: 720px) {
  .btn__label { display: inline; }
  .app__in   { grid-template-columns: 1.35fr 1fr; }
  .company   { grid-template-columns: 1.3fr 1fr; }
  .feat      { grid-template-columns: 1fr 1fr; gap: 30px 34px; }
}

@media (min-width: 960px) {
  .nav { display: flex; }
  /* Six cards, three across: no dead cells at the end of the grid. */
  .grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 719px) {
  .deck { --card-w: 86vw; }
}

@media (max-width: 479px) {
  /* Keep "Tulsa, Oklahoma" on one line instead of splitting the city. */
  .eyebrow { font-size: .66rem; letter-spacing: .12em; }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .chain__pulse { display: none; }
  .chain__step { opacity: 1; transform: none; animation: none; }
  .slide { transition: none; }
  .btn { transition: none; }
  .slide__meta { transition: none; }
}