/* ==========================================================================
   Mario Valiente — Diseño, Desarrollo & Management.
   Stylesheet for the single-page profile. Plain CSS, no build step.
   ========================================================================== */

:root {
  --bg: #111113;
  --surface: #19191c;
  --surface-2: #202024;
  --surface-hi: rgba(255, 255, 255, 0.025);
  --border: rgba(241, 238, 248, 0.12);
  --border-hi: rgba(241, 238, 248, 0.24);
  --text: #f1eef5;
  --text-dim: #b0adb8;
  --text-faint: #98949f;
  --accent-1: #b5a0e8;
  --accent-2: #c7b5ec;
  --accent-3: #c7b5ec;
  --grad: linear-gradient(120deg, #ddd1f5, #b5a0e8);
  --grad-soft: linear-gradient(130deg, #1f1b27, #161518 75%);
  --radius: 10px;
  --font-head: "Space Grotesk", sans-serif;
  --font-body: "Inter", sans-serif;
  /* Third, utility role: spec-sheet / handoff-annotation register for reference marks,
     dates, and tags — grounded in the subject (20 years bridging design specs → dev
     handoff → production), not just a headline/body pairing. */
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --maxw: 1280px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 110px;
}
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.6;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-head);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.08;
}
h1,
h2,
h3 {
  text-wrap: balance;
}
p {
  text-wrap: pretty;
}

/* Skip link: hidden until keyboard-focused, standard accessibility pattern */
.skip-link {
  position: fixed;
  top: -60px;
  left: 16px;
  z-index: 200;
  background: var(--text);
  color: var(--bg);
  padding: 12px 18px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.9rem;
  transition: top 0.2s ease;
}
.skip-link:focus {
  top: 16px;
}

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 48px;
  position: relative;
  z-index: 1;
}

/* Breaks an element out of the padded/max-width <main> to span the full viewport width,
   without needing a second top-level <main> (only one main landmark is valid per page). */
/* margin: calc(-50vw + 50%) instead of left:50%+margin-left:-50vw — the latter
   resolves `left` against this element's containing block (main.wrap, which is
   padded and narrower than the viewport), not the true viewport, so it drifts
   out of alignment whenever a full-bleed element sits inside a padded ancestor
   (exactly our case: #ai and .marquee both live inside <main class="wrap">). */
.full-bleed {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
}

a {
  color: inherit;
  text-decoration: none;
}

.grad-text {
  background: linear-gradient(110deg, #f1eef5 35%, #c7b5ec 85%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

::selection {
  background: #c7b5ec;
  color: #111113;
}

/* Visible keyboard focus (mouse/touch clicks don't trigger :focus-visible) —
   accent-2 against --bg comfortably clears the 3:1 WCAG 2.2 minimum. */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- NAV (full-width masthead) ---------- */
header.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  padding: 0;
}
.nav-inner {
  width: 100%;
  margin: 0 auto;
  padding: 20px max(48px, calc((100vw - 1184px) / 2));
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 0;
  border-bottom: 1px solid transparent;
  background: rgba(17, 17, 19, 0.92);
  backdrop-filter: blur(12px);
  transition:
    padding 300ms var(--ease),
    border-color 300ms ease;
}
.nav.scrolled .nav-inner {
  padding-block: 12px;
  border-color: var(--border);
}
.logo {
  font-family: var(--font-head);
  font-weight: 400;
  font-size: 1.08rem;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}
.logo b {
  font-weight: 600;
}
nav.links {
  display: flex;
  gap: 28px;
  align-items: center;
}
nav.links a {
  font-size: 0.77rem;
  color: var(--text-dim);
  font-weight: 500;
  position: relative;
  padding: 12px 0;
  transition: color 0.25s ease;
}
nav.links a:not(.nav-social)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 6px;
  height: 1px;
  width: 0;
  background: var(--grad);
  transition: width 0.25s ease;
}
nav.links a:hover,
nav.links a.active {
  color: var(--text);
}
nav.links a:hover::after,
nav.links a.active::after {
  width: 100%;
}

.cta-btn {
  background: #d0bdef;
  color: #17131e;
  font-weight: 600;
  font-size: 0.8rem;
  padding: 17px 21px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  transition:
    background 200ms ease,
    transform 300ms var(--ease),
    box-shadow 300ms ease;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  line-height: 1;
}
.cta-btn:hover {
  background: #e1d5f7;
  box-shadow: 0 6px 22px #0002;
  transform: translateY(-2px);
}
.cta-btn svg {
  flex-shrink: 0;
}
.cta-btn::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-left: 16px;
  border-top: 1.5px solid;
  border-right: 1.5px solid;
  transform: rotate(0deg);
  transition: transform 300ms var(--ease);
}
.cta-btn:hover::after {
  transform: translate(2px, -2px);
}

/* Compact icon-only social link — used where a full text pill would be too heavy,
   e.g. the nav. The full .cta-btn (icon + label) is used for the actual CTAs. */
.nav-social {
  width: 38px;
  height: 38px;
  border-radius: 6px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease,
    color 0.25s ease;
}
.nav-social:hover {
  background: var(--accent-2);
  border-color: transparent;
  color: #0a0a0f;
  transform: translateY(-2px);
}

.burger {
  display: none;
  width: 44px;
  height: 44px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
}
.burger span {
  width: 20px;
  height: 2px;
  background: var(--text);
  transition:
    transform 250ms ease,
    opacity 200ms ease;
}
.burger[aria-expanded="true"] span:first-child {
  transform: translateY(7px) rotate(45deg);
}
.burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.burger[aria-expanded="true"] span:last-child {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---------- SECTION SHELL ---------- */
/* Symmetric, conventional vertical rhythm shared by every content module.
   The hero and footer opt out with their own values (page start / page end). */
section {
  position: relative;
  z-index: 1;
  padding-block: 112px;
}
.section-tag {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 0.67rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-2);
  font-weight: 400;
  margin-bottom: 18px;
}
/* Registration-mark glyph — the page's one recurring signature device, repeated
   quietly at the head of every section like a reference tick on a spec sheet. */
.section-tag::before {
  content: "+";
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1;
}
.section-title {
  font-size: clamp(2.3rem, 4.5vw, 3.6rem);
  font-weight: 500;
  line-height: 1.08;
  margin-bottom: 12px;
  max-width: 820px;
  letter-spacing: -0.055em;
}
.section-sub {
  color: var(--text-dim);
  max-width: 570px;
  font-size: 0.94rem;
  line-height: 1.8;
  margin-bottom: 0;
}

/* Section header: tag above title above (optional) sub, flush left. Unified across
   every module. */
.section-head {
  max-width: 820px;
  margin-bottom: 52px;
}
.section-head .section-tag {
  margin-bottom: 16px;
}
.section-head .section-sub {
  margin-top: 14px;
}

/* Motion (JS) drives the actual animation; this is just the pre-animation state
   so content doesn't flash visible before the script runs. JS prepares only
   offscreen elements — content already visible on load is never hidden. */
.reveal {
  opacity: 1;
  will-change: auto;
}
.reveal[data-reveal-pending] {
  opacity: 0;
  transform: translateY(12px);
}

/* ---------- HERO ---------- */
/* Generative print: a fixed decorative wash (::before) plus the animated line
   field (.hero-art) sit behind the hero; both are isolated from the rest of the
   page's stacking context so nothing here bleeds into content below. */
#hero {
  min-height: min(980px, 100svh);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 160px 0 44px;
  isolation: isolate;
}
#hero::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0 calc(50% - 50vw);
  pointer-events: none;
  background: radial-gradient(ellipse at 84% 25%, #75629a20, transparent 58%), radial-gradient(ellipse at 74% 66%, #638c9e17, transparent 54%), radial-gradient(ellipse at 16% 76%, #b48c6c0d, transparent 52%);
  mask-image: linear-gradient(180deg, transparent, #000 16%, #000 75%, transparent);
}
.hero-art {
  position: absolute;
  z-index: -1;
  width: 100vw;
  height: 100%;
  left: calc(50% - 50vw);
  top: 0;
  pointer-events: none;
  opacity: 0.8;
  background: url("hero-lines.svg") center / 100% 100% no-repeat;
  mask-image: linear-gradient(180deg, transparent, #000 12%, #000 86%, transparent), linear-gradient(90deg, #0003, #0002 42%, #0009 70%, #000d 90%, #0007);
  mask-composite: intersect;
}
.hero-art canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.hero-art.live {
  background-image: none;
}
.hero-title {
  font-size: clamp(3.5rem, 6.6vw, 4.5rem);
  font-weight: 500;
  line-height: 1.01;
  letter-spacing: -0.065em;
  max-width: 880px;
  margin-bottom: 34px;
}
.hero-lead {
  font-size: 1.18rem;
  color: var(--text);
  max-width: 565px;
  margin-bottom: 16px;
  font-weight: 400;
  line-height: 1.65;
}
.hero-sub {
  font-size: 0.93rem;
  color: var(--text-dim);
  max-width: 540px;
  margin-bottom: 28px;
  line-height: 1.75;
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin-bottom: 34px;
  list-style: none;
}
.chip {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--text-dim);
}
.chip::before {
  content: "";
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--accent-2);
}

.hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  width: 100%;
  max-width: none;
  margin-top: 62px;
  border-top: 1px solid var(--border);
  padding-top: 25px;
  list-style: none;
}
.hero-stats li {
  display: flex;
  align-items: baseline;
  gap: 16px;
}
.hero-stats li + li {
  border-left: 1px solid var(--border);
  padding-left: 32px;
}
.stat-num {
  font-family: var(--font-head);
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.06em;
}
.stat-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-faint);
  margin-top: 4px;
}

/* ---------- MARQUEE ---------- */
.marquee {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 20px 0;
  overflow: hidden;
  background: transparent;
}
.marquee-track {
  display: flex;
  gap: 44px;
  width: max-content;
  animation: marquee 55s linear infinite;
  list-style: none;
}
.marquee.offscreen .marquee-track {
  animation-play-state: paused;
}
.marquee-track li {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  display: flex;
  align-items: center;
  gap: 44px;
  white-space: nowrap;
}
.marquee-track li::after {
  content: "+";
  color: var(--accent-1);
  font-size: 0.8rem;
  opacity: 0.7;
}
@keyframes marquee {
  to {
    transform: translateX(calc(-50% - 22px));
  }
}

/* ---------- ABOUT ---------- */
#about {
  border-bottom: 1px solid var(--border);
}
.about-columns {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 24px 100px;
}
.about-text {
  margin: 0;
  font-size: 1rem;
  color: var(--text-dim);
  line-height: 1.8;
}
.about-text strong {
  color: var(--text);
  font-weight: 500;
}
.about-text.big {
  grid-row: span 2;
  font-size: 1.45rem;
  line-height: 1.6;
  margin: 0;
  letter-spacing: -0.025em;
}

/* ---------- EXPERIENCE (open, readable ledger) ---------- */
.timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  list-style: none;
}
.tl-item {
  position: relative;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  column-gap: 44px;
  padding: 34px 0;
  border-top: 1px solid var(--border);
  transition: border-color 250ms ease;
}
.tl-item.current {
  border-color: var(--border-hi);
}
.tl-head {
  grid-column: 2;
  display: block;
  margin-bottom: 16px;
}
.tl-role {
  font-family: var(--font-head);
  font-size: 1.23rem;
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.4;
}
.tl-period {
  display: block;
  margin-top: 7px;
  font-size: 0.7rem;
  color: var(--text-faint);
  font-family: var(--font-mono);
  white-space: nowrap;
}
.tl-company {
  grid-column: 1;
  grid-row: 1 / span 3;
  font-family: var(--font-head);
  font-size: 1.13rem;
  font-weight: 400;
  color: var(--text);
  margin-bottom: 14px;
}
.current .tl-company {
  color: var(--accent-2);
}
.current .tl-company::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 10px 2px 0;
  border-radius: 50%;
  background: var(--accent-2);
}
.tl-desc {
  grid-column: 2;
  color: var(--text-dim);
  font-size: 0.91rem;
  margin-bottom: 14px;
  line-height: 1.75;
}
.tl-bullets {
  grid-column: 2;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tl-bullets li {
  font-size: 0.82rem;
  color: var(--text-dim);
  padding-left: 15px;
  position: relative;
}
.tl-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--text-faint);
}

/* ---------- OFFERINGS (bento) ---------- */
#offerings {
  padding-top: 64px;
}
.cards-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  list-style: none;
}
.offer-card {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 34px 30px 38px;
  min-height: 290px;
  transition:
    border-color 300ms ease,
    background 300ms ease,
    translate 400ms var(--ease);
}
.offer-card:hover {
  border-color: rgba(124, 92, 255, 0.4);
  background: var(--surface-2);
}
.offer-card.hi {
  background: linear-gradient(140deg, #28222f, #1d1a21);
  border-color: #b5a0e838;
}
.offer-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(350px circle at var(--pointer-x, 50%) var(--pointer-y, 50%), #c7b5ec0b, transparent 70%);
  transition: opacity 350ms ease;
}
/* Content-coded reference tag, not a step number — these three offerings run in
   parallel, not in sequence, so a spec-sheet abbreviation (UX / DEV / PM) says
   something true about each card instead of implying an order that isn't there. */
.offer-num {
  font-family: var(--font-mono);
  font-size: 0.67rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--accent-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

/* One line-art visual per offering, between the reference tag and the title.
   Fully drawn at rest — the motion is a hover-only flourish (see the
   hover-capable block below), so touch and reduced motion still get the image. */
.offer-icon {
  --lavender: #cbbcf0;
  --mint: #b0d4cf;
  --peach: #e6c6ab;
  --sky: #b7c6e4;
  position: relative;
  display: flex;
  justify-content: center;
  /* The padding widens the masked area so circles can reach past the screen
     without a hard clip; the negative margin cancels it out in the layout. */
  padding: 20px 24px;
  margin: -20px -24px 0;
  /* Soft bottom fade so a larger visual settles into the card instead of
     crowding the title underneath it. */
  mask-image: linear-gradient(180deg, #000 68%, #000c 81%, #0008 88%, #0004 100%);
}
.offer-icon svg {
  position: relative;
  display: block;
  width: 100%;
  max-width: 200px;
  height: auto;
}

/* Shared screen chrome: all three visuals are the same window, so the row reads
   as one system and only what runs inside it changes. The fill is opaque so the
   circles behind it stay fully hidden until they slide out. */
.offer-icon .ico-frame {
  fill: #151517;
  stroke: var(--border);
  transition: stroke 300ms ease;
}
.offer-icon .ico-bar {
  stroke: var(--border);
  stroke-width: 1;
}
.offer-icon .ico-dot {
  fill: var(--border-hi);
}

/* Flat pastel circles wait hidden behind the screen and slide out around it on
   hover. Each card sets its own composition: --x/--y is where a circle lands. */
.ico-disc {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--size);
  height: var(--size);
  margin: calc(var(--size) / -2) 0 0 calc(var(--size) / -2);
  border-radius: 50%;
  background: var(--tone);
  transform: scale(0.5);
  transition: transform 700ms var(--ease);
  pointer-events: none;
}
.ico-disc-2 {
  transition-delay: 70ms;
}
.ico-disc-3 {
  transition-delay: 140ms;
}
.ico-disc-4 {
  transition-delay: 210ms;
}
/* UX: loose and asymmetric, one large shape anchoring a corner */
.icon-ux .ico-disc-1 {
  --size: 84px;
  --tone: var(--lavender);
  --x: -88px;
  --y: -40px;
}
.icon-ux .ico-disc-2 {
  --size: 56px;
  --tone: var(--peach);
  --x: 92px;
  --y: 30px;
}
.icon-ux .ico-disc-3 {
  --size: 30px;
  --tone: var(--mint);
  --x: 70px;
  --y: -62px;
}
/* DEV: one heavy block on the right, balanced by small satellites */
.icon-dev .ico-disc-1 {
  --size: 96px;
  --tone: var(--mint);
  --x: 92px;
  --y: -14px;
}
.icon-dev .ico-disc-2 {
  --size: 44px;
  --tone: var(--sky);
  --x: -98px;
  --y: 34px;
}
.icon-dev .ico-disc-3 {
  --size: 22px;
  --tone: var(--lavender);
  --x: -70px;
  --y: -70px;
}
/* PM: a sequence of stages rising around the board */
.icon-pm .ico-disc-1 {
  --size: 30px;
  --tone: var(--peach);
  --x: -102px;
  --y: 38px;
}
.icon-pm .ico-disc-2 {
  --size: 44px;
  --tone: var(--lavender);
  --x: -62px;
  --y: -62px;
}
.icon-pm .ico-disc-3 {
  --size: 36px;
  --tone: var(--sky);
  --x: 54px;
  --y: -66px;
}
.icon-pm .ico-disc-4 {
  --size: 70px;
  --tone: var(--mint);
  --x: 100px;
  --y: 12px;
}

/* UX / UI — a wireframe whose cursor lands on the button */
.icon-ux .ico-image {
  stroke: var(--border);
}
.icon-ux .ico-glyph {
  stroke: var(--text-faint);
  stroke-width: 1.2;
  stroke-linejoin: round;
}
.icon-ux .ico-line {
  fill: var(--border);
  opacity: 0.65;
  transition: opacity 300ms ease;
}
.icon-ux .ico-cta {
  stroke: var(--border-hi);
  transition:
    stroke 300ms ease,
    fill 300ms ease;
}
.icon-ux .ico-cursor {
  fill: var(--text-faint);
  transition:
    transform 450ms var(--ease),
    fill 300ms ease;
}

/* DEV — an editor whose source code types itself out on hover */
.icon-dev .ico-gutter {
  fill: var(--border);
  opacity: 0.5;
}
.icon-dev .ico-code {
  fill: var(--border);
  transform-box: fill-box;
  transform-origin: left center;
}
/* Two tinted lines borrow the hero field's palette, so the block reads as
   syntax rather than as four identical bars. */
.icon-dev .ico-code-1 {
  fill: #b5a0e8b3;
}
.icon-dev .ico-code-3 {
  fill: #a8b6d099;
}
.icon-dev .ico-caret {
  fill: var(--accent-2);
}
@keyframes ico-type {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
@keyframes ico-blink {
  0%,
  45% {
    opacity: 1;
  }
  50%,
  95% {
    opacity: 0.15;
  }
  100% {
    opacity: 1;
  }
}

/* PM — a product board: a marker travels the roadmap and each stage lights up
   as it passes */
.icon-pm .ico-col {
  stroke: var(--border);
  stroke-width: 1;
  stroke-dasharray: 2 3;
  opacity: 0.6;
}
.icon-pm .ico-label {
  fill: var(--border);
  transition: fill 300ms ease;
}
.icon-pm .ico-path {
  stroke: var(--border-hi);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 300ms ease;
}
.icon-pm .ico-node {
  fill: var(--border-hi);
}
.icon-pm .ico-node-end {
  fill: var(--accent-1);
}
/* offset-path repeats the geometry of .ico-path above: both `d` values have to
   stay in sync if the roadmap shape is ever retuned. */
.icon-pm .ico-travel {
  fill: var(--accent-2);
  offset-path: path("M14 39 L30 31 L46 34 L62 22");
  offset-distance: 0%;
  opacity: 0;
  transition:
    offset-distance 900ms var(--ease),
    opacity 250ms ease;
}

.offer-card h3 {
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.035em;
  text-wrap: initial;
  margin-bottom: 12px;
}
.offer-card p {
  color: var(--text-dim);
  font-size: 0.89rem;
  line-height: 1.8;
}

/* ---------- AI SECTION ---------- */
/* Header uses the shared .section-head (see SECTION SHELL) — this band has a
   colored background, so keeping the header identical to every other section
   matters more here, not less. */
#ai {
  background: var(--grad-soft);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding-block: 112px;
}

.ai-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}

/* Chrome stripped to flat, ruled rows — the tinted section background carries the
   visual weight instead of a card shell. */
.ai-panel,
.ai-panel.hi {
  padding: 0;
  border: 0;
  background: none;
  border-radius: 0;
}
.ai-panel-head {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 26px;
}
/* INPUT / OUTPUT, not 01 / 02 — the two panels are parallel categories (what feeds
   the work vs. what ships from it), not sequential steps. */
.ai-panel-num {
  font-family: var(--font-mono);
  font-size: 0.63rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--accent-2);
  border: 1px solid var(--border);
  padding: 6px 9px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: none;
}
.ai-panel-head h3 {
  font-size: 1.35rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.ai-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  list-style: none;
}
.ai-list-item {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 22px 0;
  border-top: 1px solid var(--border);
  transition:
    border-color 0.25s ease,
    background 0.25s ease;
}
.ai-list-item:hover {
  border-color: var(--border);
  background: none;
}
.ai-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 6px;
  background: #c7b5ec0c;
  border: 1px solid var(--border);
  filter: grayscale(1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
}
.ai-list-item p {
  font-size: 0.89rem;
  color: var(--text-dim);
  line-height: 1.7;
}

/* ---------- PROCESS ---------- */
.process-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  list-style: none;
}
.process-step {
  position: relative;
  border-top: 1px solid var(--border-hi);
  padding: 28px 24px 0 0;
}
.process-step + .process-step {
  padding-left: 24px;
  border-left: 1px solid var(--border);
}
.process-step .n {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--accent-2);
  opacity: 0.9;
  margin-bottom: 52px;
}
.process-step h3 {
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: -0.04em;
  margin-bottom: 8px;
}
.process-step p {
  font-size: 0.85rem;
  color: var(--text-dim);
  line-height: 1.75;
}

/* ---------- STACK ---------- */
#stack {
  border-top: 1px solid var(--border);
}
.stack-block {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 44px;
  margin-bottom: 32px;
}
.stack-block:last-child {
  margin-bottom: 0;
}
.stack-label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-faint);
  padding-top: 13px;
  margin-bottom: 16px;
}
.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  list-style: none;
}
.tag {
  border: 1px solid var(--border);
  background: none;
  padding: 10px 14px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-dim);
  transition:
    border-color 0.25s ease,
    color 0.25s ease,
    transform 0.25s ease;
  display: inline-block;
}
.tag:hover {
  border-color: var(--accent-2);
  color: var(--text);
  transform: none;
  background: var(--surface);
}

/* ---------- FOOTER / CONTACT ---------- */
footer {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--border);
  padding: 88px 0 48px;
  margin-top: 0;
  background: linear-gradient(150deg, #211c29, var(--bg) 65%);
  font-family: var(--font-mono);
}
.footer-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 80px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 48px;
  padding-top: 36px;
  border-top: 1px solid var(--border);
}
.footer-col h3 {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-faint);
  margin-bottom: 14px;
}
.footer-col a,
.footer-col p {
  display: block;
  color: var(--text-dim);
  font-size: 0.77rem;
  margin-bottom: 8px;
  transition: color 0.2s ease;
}
.footer-col a:hover {
  color: var(--accent-2);
}
.footer-bottom {
  margin-top: 60px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  color: var(--text-faint);
  font-size: 0.65rem;
  font-family: var(--font-mono);
}

.back-top {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 90;
  width: 44px;
  height: 44px;
  border-radius: 6px;
  background: #1d1b21;
  border: 1px solid var(--border);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.3s ease,
    transform 0.3s ease,
    border-color 0.3s ease;
}
.back-top.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.back-top:hover {
  border-color: var(--accent-2);
  transform: translateY(-3px);
}

/* ---------- HOVER-CAPABLE ENHANCEMENTS ---------- */
/* Lift/glow states gated behind a real pointer, so touch taps never get stuck
   in a hover state. */
@media (hover: hover) and (pointer: fine) {
  .offer-card:hover {
    translate: 0 -4px;
    border-color: #b5a0e86b;
    background-color: var(--surface-2);
  }
  .offer-card:hover::after {
    opacity: 1;
  }
  .tl-item:hover {
    border-color: var(--accent-2);
  }
  .offer-card:hover .icon-ux .ico-cursor {
    transform: translate(-28px, 8px);
    fill: var(--accent-2);
  }
  .offer-card:hover .icon-ux .ico-cta {
    stroke: var(--accent-2);
    fill: #c7b5ec14;
  }
  .offer-card:hover .icon-ux .ico-line {
    opacity: 1;
  }
  .offer-card:hover .icon-dev .ico-code {
    animation: ico-type 420ms var(--ease) both;
  }
  .offer-card:hover .icon-dev .ico-code-2 {
    animation-delay: 110ms;
  }
  .offer-card:hover .icon-dev .ico-code-3 {
    animation-delay: 220ms;
  }
  .offer-card:hover .icon-dev .ico-code-4 {
    animation-delay: 330ms;
  }
  .offer-card:hover .icon-dev .ico-caret {
    animation: ico-blink 900ms steps(1, end) infinite;
  }
  .offer-card:hover .icon-pm .ico-path {
    stroke: var(--accent-2);
  }
  .offer-card:hover .icon-pm .ico-travel {
    offset-distance: 100%;
    opacity: 1;
  }
  /* Delays track the 900ms marker so each stage lights as it is reached. */
  .offer-card:hover .icon-pm .ico-label {
    fill: var(--border-hi);
  }
  .offer-card:hover .icon-pm .ico-label-2 {
    transition-delay: 250ms;
  }
  .offer-card:hover .icon-pm .ico-label-3 {
    transition-delay: 500ms;
  }
  .offer-card:hover .icon-pm .ico-label-4 {
    fill: var(--accent-2);
    transition-delay: 750ms;
  }
  .offer-card:hover .offer-icon .ico-frame {
    stroke: var(--border-hi);
  }
  .offer-card:hover .ico-disc {
    transform: translate(var(--x), var(--y));
  }
}

/* ==========================================================================
   RESPONSIVE
   Breakpoints: 1100 (nav/content breathing room) → 880 (grids to 1-2 col) →
   760 (nav becomes a dropdown, single-column content) → 480 (small phones).
   ========================================================================== */
@media (max-width: 1100px) {
  .wrap {
    padding-inline: 32px;
  }
  .nav-inner {
    padding-inline: 32px;
  }
  nav.links {
    gap: 18px;
  }
  .hero-title {
    max-width: 740px;
  }
  .hero-art {
    opacity: 0.6;
  }
  .hero-stats li {
    display: block;
  }
  .stat-label {
    margin-top: 8px;
  }
  .about-columns {
    gap: 24px 56px;
  }
  .tl-item,
  .stack-block {
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 0 32px;
  }
  .offer-card {
    padding-inline: 24px;
  }
}

@media (max-width: 880px) {
  section,
  #ai {
    padding-block: 80px;
  }
  #hero {
    padding-top: 136px;
    min-height: auto;
  }
  .hero-title {
    font-size: clamp(3.4rem, 8vw, 4.6rem);
    max-width: 720px;
  }
  .hero-art {
    opacity: 0.5;
  }
  .section-head {
    margin-bottom: 40px;
  }
  .about-columns {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .about-text.big {
    font-size: 1.3rem;
    grid-row: auto;
    margin-bottom: 8px;
  }
  .cards-3 {
    grid-template-columns: 1fr;
  }
  .offer-card {
    min-height: auto;
    padding: 28px;
  }
  .offer-num {
    margin-bottom: 16px;
  }
  .offer-icon {
    margin-bottom: 18px;
  }
  .ai-columns {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .process-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 0;
  }
  .process-step:nth-child(3) {
    border-left: 0;
    padding-left: 0;
  }
  .process-step .n {
    margin-bottom: 28px;
  }
  footer {
    padding-bottom: 40px;
  }
}

@media (max-width: 760px) {
  html:not(.menu-ready) header.nav {
    position: relative;
  }
  html:not(.menu-ready) #hero {
    padding-top: 48px;
  }
  .wrap {
    padding-inline: 24px;
  }
  .nav-inner {
    padding: 14px 24px;
  }
  .nav.scrolled .nav-inner {
    padding-block: 10px;
  }
  .burger {
    display: none;
  }
  .menu-ready .burger {
    display: flex;
  }
  nav.links {
    position: static;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px 14px;
    max-width: 62%;
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    backdrop-filter: none;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  nav.links a {
    font-size: 0.72rem;
    padding-block: 8px;
  }
  .menu-ready nav.links {
    position: absolute;
    top: calc(100% + 8px);
    left: 16px;
    right: 16px;
    max-width: none;
    padding: 20px;
    flex-direction: column;
    align-items: stretch;
    gap: 5px;
    border: 1px solid var(--border-hi);
    border-radius: 10px;
    background: #19181d;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    pointer-events: none;
    transition:
      opacity 200ms ease,
      transform 200ms var(--ease),
      visibility 0s 200ms;
  }
  .menu-ready nav.links.open {
    transition-delay: 0s;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
  }
  .menu-ready nav.links a {
    font-size: 0.93rem;
    padding: 10px;
    min-height: 44px;
  }
  nav.links a:not(.nav-social)::after {
    display: none;
  }
  nav.links a.active {
    color: var(--accent-2);
  }
  .hero-art {
    opacity: 0.42;
    mask-image: linear-gradient(180deg, transparent, #000 12%, #000 86%, transparent), linear-gradient(90deg, #0004, #0003 35%, #0008);
  }
  .hero-title {
    max-width: 630px;
  }
  .hero-stats {
    margin-top: 48px;
    gap: 16px;
  }
  .hero-stats li + li {
    padding-left: 16px;
  }
  .stat-label {
    font-size: 0.61rem;
  }
  .tl-item {
    grid-template-columns: 1fr;
    padding-block: 28px;
  }
  .tl-company {
    grid-row: 1;
    margin-bottom: 12px;
  }
  .tl-head,
  .tl-desc,
  .tl-bullets {
    grid-column: 1;
  }
  .tl-role {
    font-size: 1.1rem;
  }
  .stack-block {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .stack-label {
    margin-bottom: 12px;
  }
  .footer-links {
    flex-direction: row;
  }
}

@media (max-width: 480px) {
  .wrap {
    padding-inline: 22px;
  }
  .nav-inner {
    padding-inline: 22px;
  }
  .logo {
    font-size: 1rem;
  }
  #hero {
    padding: 120px 0 32px;
  }
  .hero-title {
    font-size: clamp(2.75rem, 11.2vw, 3.4rem);
    letter-spacing: -0.06em;
    margin-bottom: 28px;
  }
  .hero-lead {
    font-size: 1.06rem;
  }
  .hero-sub {
    font-size: 0.87rem;
  }
  .chip-row {
    gap: 12px 16px;
    max-width: 320px;
  }
  .chip {
    font-size: 0.61rem;
  }
  .hero-actions {
    flex-direction: column;
    align-items: flex-start;
  }
  .cta-btn {
    width: auto;
    padding: 17px;
    justify-content: center;
  }
  .hero-stats {
    gap: 10px;
  }
  .hero-stats li + li {
    padding-left: 12px;
  }
  .stat-num {
    font-size: 1.85rem;
  }
  section,
  #ai {
    padding: 64px 0;
  }
  .section-title {
    font-size: 2.35rem;
  }
  .section-sub {
    font-size: 0.89rem;
  }
  .about-text {
    font-size: 0.94rem;
  }
  .about-text.big {
    font-size: 1.2rem;
  }
  .offer-card {
    padding: 26px 24px;
  }
  .ai-panel {
    padding: 0;
  }
  .process-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .process-step,
  .process-step + .process-step {
    padding: 24px 0;
    border-left: 0;
  }
  .process-step .n {
    margin-bottom: 20px;
  }
  footer {
    padding: 64px 0 28px;
  }
  .footer-cta {
    margin-bottom: 56px;
  }
  .footer-links {
    gap: 32px;
  }
  .footer-links .footer-col:first-child {
    flex-basis: 100%;
  }
  .footer-bottom {
    margin-top: 36px;
    padding-right: 44px;
  }
  .back-top {
    right: 16px;
    bottom: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .reveal[data-reveal-pending] {
    opacity: 1;
    transform: none;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  .offer-card:hover,
  .cta-btn:hover,
  .back-top:hover {
    translate: none;
    transform: none;
  }
}