/* home.css — additions for the lptrdigital. homepage */

/* ---- Stack (what runs under the hood) ------------------- */
.stack-list {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 24px;
  overflow: hidden;
}
.stack-row {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 32px;
  padding: 32px;
  align-items: start;
  border-top: 1px solid var(--border);
}
.stack-row:first-child { border-top: 0; }
.stack-row:hover { background: var(--ink-50); }

.stack-meta { display: flex; flex-direction: column; gap: 10px; }
.stack-layer {
  font: 500 12px/1 var(--font-mono);
  color: var(--orange-500);
  letter-spacing: 0.08em;
}
.stack-name {
  font: 600 28px/1 var(--font-display);
  letter-spacing: -0.025em;
  color: var(--fg);
}
.stack-meta p {
  margin: 4px 0 0;
  font: var(--t-body);
  color: var(--ink-600);
  max-width: 44ch;
}

.stack-items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 6px;
  justify-content: flex-start;
}
.stack-chip {
  font: 500 13px/1 var(--font-mono);
  color: var(--ink-700);
  background: var(--canvas);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 9px 14px;
}

@media (max-width: 880px) {
  .stack-row { grid-template-columns: 1fr; gap: 16px; padding: 24px; }
}

/* ---- Section linking offset ----------------------------- */
section[id], div[id] { scroll-margin-top: 96px; }

/* ---- About --------------------------------------------- */
.about {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  align-items: start;
}
.about-copy h2 {
  margin: 8px 0 24px;
  font: 600 44px/1.08 var(--font-display);
  letter-spacing: -0.025em;
  max-width: 18ch;
}
.about-copy p {
  margin: 0 0 16px;
  font: var(--t-body);
  color: var(--ink-700);
  max-width: 56ch;
}
.about-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}
.about-pill {
  font: 500 12px/1 var(--font-mono);
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--ink-700);
}

.about-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 12px 24px;
}
.about-card-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
  align-items: baseline;
}
.about-card-row.last { border-bottom: 0; }
.about-k {
  font: 500 13px/1 var(--font-mono);
  color: var(--orange-500);
  letter-spacing: 0.04em;
}
.about-v {
  font: var(--t-body-sm);
  color: var(--ink-700);
}

@media (max-width: 880px) {
  .about { grid-template-columns: 1fr; gap: 32px; }
}

/* ---- Slight Hero h1 width relax for Dutch -------------- */
.hero h1 { max-width: 16ch; }

/* ---- Active-on-load polish ------------------------------ */
.hd nav a { transition: color 140ms var(--ease-out), background 140ms var(--ease-out); }

/* ---- Subtle fade-up for sections ------------------------ */
.fade-in {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
}
.fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Hero diagram on narrow viewports ------------------- */
@media (max-width: 720px) {
  .hero h1 { font-size: 56px; }
  .gapviz { grid-template-columns: 1fr; }
  .gapviz .bridge { transform: rotate(90deg); justify-self: start; }
  .gapviz .col:last-child { text-align: left !important; }
  .section-head { grid-template-columns: 1fr; }
  .svc-grid { grid-template-columns: 1fr; }
  .brands { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; padding: 32px; }
  .contact { grid-template-columns: 1fr; padding: 28px; }
  .ft-inner { grid-template-columns: 1fr 1fr; padding: 32px; }
  .hd nav { display: none; }
}

/* ---- Anti-wrap fixes for Dutch copy --------------------- */
.hd nav a,
.hd .btn,
.brand-tile .badge,
.about-pill,
.stack-chip {
  white-space: nowrap;
}

/* Stats: align label baselines, give numbers consistent baseline */
.stats {
  align-items: start;
}
.stats h2 { align-self: end; }
.stats .stat {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 8px;
  min-height: 140px;
}
.stats .stat .label {
  min-height: 1.4em;
  align-content: start;
}
.stats .stat .v { margin-top: 0; }

/* Header pill: a touch more breathing room for NL labels */
.hd nav { gap: 2px; }
.hd nav a { padding: 8px 12px; }

/* ---- Enhanced hover lifts (GSAP-compatible) ------------ */
body { overflow-x: hidden; }

.svc {
  will-change: transform;
  transition: border-color 220ms var(--ease-out), box-shadow 220ms var(--ease-out), transform 320ms var(--ease-out);
}
.svc:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-5px);
}

.brand-tile {
  will-change: transform;
  transition: transform 350ms var(--ease-out), box-shadow 350ms var(--ease-out);
}
.brand-tile:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

.stack-row {
  transition: background 200ms var(--ease-out), padding-left 240ms var(--ease-out);
}
.stack-row:hover { padding-left: 40px; }

.stack-chip {
  transition: background 160ms var(--ease-out), border-color 160ms var(--ease-out), transform 160ms var(--ease-out);
}
.stack-chip:hover {
  background: var(--orange-50);
  border-color: var(--orange-200);
  transform: translateY(-1px);
}

.btn { transition: background 140ms var(--ease-out), transform 160ms var(--ease-spring), box-shadow 160ms var(--ease-out); }
.btn:hover { box-shadow: var(--shadow-sm); }
.btn.lg:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn.lg:active { transform: scale(0.97) translateY(0); }