/* =========================================================
   Syncro AI Systems — styles
   Palette, type scale, and layout primitives live at the top.
   Sections follow the order of index.html.
   ========================================================= */

:root {
  --bg:            #07080d;
  --bg-alt:        #0a0c13;
  --panel:         #0e111a;
  --panel-2:       #121620;
  --line:          rgba(255, 255, 255, .08);
  --line-strong:   rgba(255, 255, 255, .14);

  --text:          #e9edf6;
  --muted:         #939cb2;
  --dim:           #6b7386;

  --blue:          #4f7cff;
  --cyan:          #12d8b8;
  --grad:          linear-gradient(100deg, #4f7cff 0%, #12d8b8 100%);

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;

  --wrap: 1180px;
  --pad: 24px;

  --ease: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth; scroll-padding-top: 90px;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 { line-height: 1.12; letter-spacing: -.025em; margin: 0; font-weight: 700; }
h1 { font-size: clamp(2rem, 5.4vw, 4rem); font-weight: 800; }
h2 { font-size: clamp(1.85rem, 3.4vw, 2.7rem); }
h3 { font-size: 1.16rem; letter-spacing: -.015em; }
p  { margin: 0; }
a  { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }

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

.grad {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.skip-link {
  position: absolute; left: -9999px; top: 12px; z-index: 100;
  background: var(--blue); color: #fff; padding: 10px 18px; border-radius: var(--r-sm);
}
.skip-link:focus { left: 16px; }

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

/* ---------- Background layers ---------- */
.bg-grid {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 20%, transparent 78%);
}
.bg-glow {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(680px 420px at 12% -6%,  rgba(79,124,255,.20), transparent 65%),
    radial-gradient(620px 400px at 88% 4%,   rgba(18,216,184,.13), transparent 62%);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 26px; border-radius: 999px;
  font-size: .96rem; font-weight: 600; letter-spacing: -.01em;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .2s var(--ease), box-shadow .25s var(--ease), background .2s, border-color .2s;
  white-space: nowrap;
}
.btn--primary {
  background: var(--grad); color: #05070c;
  box-shadow: 0 6px 24px -8px rgba(79,124,255,.7);
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 14px 34px -10px rgba(79,124,255,.85); }
.btn--ghost { border-color: var(--line-strong); color: var(--text); background: rgba(255,255,255,.02); }
.btn--ghost:hover { border-color: rgba(18,216,184,.6); background: rgba(18,216,184,.07); transform: translateY(-2px); }
.btn--sm { padding: 10px 18px; font-size: .88rem; }
.btn--full { width: 100%; margin-top: 22px; }

/* ---------- Shared section furniture ---------- */
/* Every section carries its own top rule, so each boundary gets exactly one
   line — including between two plain sections in a row. */
.section { padding: clamp(72px, 10vw, 118px) 0; position: relative; border-top: 1px solid var(--line); }
.section--alt { background: var(--bg-alt); }

.section__head { max-width: 660px; margin-bottom: 54px; }
.section__lede { color: var(--muted); font-size: 1.06rem; margin-top: 16px; }

.kicker {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .74rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--cyan); margin-bottom: 14px;
}

/* =========================================================
   NAV
   ========================================================= */
.nav {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  background: rgba(7,8,13,.62);
  border-bottom: 1px solid transparent;
  transition: background .3s, border-color .3s;
}
.nav.is-stuck { background: rgba(7,8,13,.88); border-bottom-color: var(--line); }

.nav__inner { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 20px; }

.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: -.02em; font-size: 1.05rem; }
.brand__accent { color: var(--muted); font-weight: 500; }

/* Logo mark. Height is fixed and width follows the image's own aspect ratio,
   so swapping in a wider wordmark later needs no other changes. */
.brand__logo { height: 36px; width: auto; display: block; }
.brand__logo--footer { height: 40px; margin-bottom: 10px; }
@media (max-width: 760px) { .brand__logo { height: 30px; } }

.nav__links { display: flex; align-items: center; gap: 24px; }
.nav__links a { font-size: .93rem; color: var(--muted); font-weight: 500; transition: color .2s; }
.nav__links a:hover { color: var(--text); }
.nav__links a.btn { color: #05070c; }
.nav__links a.is-active { color: var(--text); }

.nav__toggle {
  display: none; flex-direction: column; gap: 5px; justify-content: center;
  width: 42px; height: 42px; border: 1px solid var(--line-strong);
  border-radius: var(--r-sm); background: transparent; cursor: pointer; padding: 0 10px;
}
.nav__toggle span { display: block; height: 2px; background: var(--text); border-radius: 2px; transition: transform .25s var(--ease), opacity .2s; }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* =========================================================
   HERO
   ========================================================= */
.hero { padding: clamp(56px, 8vw, 96px) 0 clamp(60px, 8vw, 100px); }
.hero__inner {
  display: grid; grid-template-columns: 1.06fr .94fr;
  gap: clamp(36px, 5vw, 72px); align-items: center;
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  border: 1px solid var(--line-strong); border-radius: 999px; padding: 7px 15px;
  background: rgba(255,255,255,.03); margin-bottom: 26px;
}
.pulse {
  width: 7px; height: 7px; border-radius: 50%; background: var(--cyan);
  box-shadow: 0 0 0 0 rgba(18,216,184,.7); animation: pulse 2.4s infinite;
}
@keyframes pulse {
  70%  { box-shadow: 0 0 0 9px rgba(18,216,184,0); }
  100% { box-shadow: 0 0 0 0 rgba(18,216,184,0); }
}

.hero__sub { color: var(--muted); font-size: 1.1rem; margin-top: 24px; max-width: 56ch; }
.hero__sub strong { color: var(--text); font-weight: 600; }

.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

.hero__proof { margin-top: 34px; display: grid; gap: 10px; }
.hero__proof li {
  position: relative; padding-left: 26px; color: var(--dim); font-size: .92rem;
}
.hero__proof li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 12px; height: 2px; background: var(--grad); border-radius: 2px;
}

/* ---- Hero diagram ---- */
.hero__visual { position: relative; }
.diagram {
  padding: 22px 20px 24px; border: 1px solid var(--line); border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.008));
  box-shadow: 0 30px 70px -40px rgba(0,0,0,.9);
}

/* Rows converge on the core. Each .pair is display:contents, so its three
   children drop straight into the shared 3-column grid — that's what keeps
   every problem locked to its fix on the same row, whatever the text length. */
.pairs {
  position: relative;
  display: grid;
  grid-template-columns: 1fr clamp(62px, 13vw, 96px) 1fr;
  gap: 8px 9px;
}
.pair { display: contents; }

/* Empty spacer — reserves the middle column for the core to sit in */
.pair__link { display: block; }

/* The core, centred over the middle column */
.spine {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: grid; place-items: center; pointer-events: none;
}
.core {
  position: relative; display: grid; place-items: center;
  width: clamp(62px, 13vw, 96px); aspect-ratio: 1;
}
.core::before {
  content: ""; position: absolute; inset: 22%; border-radius: 50%;
  background: var(--grad); filter: blur(13px); opacity: .55;
}
.core__ring {
  position: absolute; inset: 6%; border-radius: 50%;
  border: 1px solid rgba(79,124,255,.5); animation: spin 9s linear infinite;
  border-top-color: var(--cyan);
}
.core__ring--2 { inset: 19%; animation-duration: 6s; animation-direction: reverse; border-top-color: var(--blue); border-color: rgba(18,216,184,.35); }
@keyframes spin { to { transform: rotate(360deg); } }
.core__label {
  position: relative; text-align: center; font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: clamp(.46rem, 1.3vw, .58rem); letter-spacing: .14em; line-height: 1.4; color: #eaf3ff;
}
.core__label span { color: rgba(234,243,255,.6); }

.node {
  font-size: .72rem; line-height: 1.35; padding: 9px 11px;
  border-radius: 8px; text-align: center; border: 1px solid var(--line);
  display: grid; place-items: center;
}
.node--messy { color: var(--dim); background: rgba(255,255,255,.02); border-style: dashed; }
.node--clean {
  color: #d8fff6; background: rgba(18,216,184,.09); border-color: rgba(18,216,184,.35);
  animation: nodeIn 3.6s var(--ease) infinite;
}
.pair:nth-child(1) .node--clean { animation-delay: 0s; }
.pair:nth-child(2) .node--clean { animation-delay: .28s; }
.pair:nth-child(3) .node--clean { animation-delay: .56s; }
.pair:nth-child(4) .node--clean { animation-delay: .84s; }
.pair:nth-child(5) .node--clean { animation-delay: 1.12s; }
@keyframes nodeIn {
  0%, 62%, 100% { box-shadow: 0 0 0 0 rgba(18,216,184,0); }
  18%           { box-shadow: 0 0 16px -2px rgba(18,216,184,.55); }
}

.diagram__caption {
  text-align: center; margin-top: 18px; color: var(--dim); font-size: .88rem;
}
.diagram__caption strong { color: var(--muted); font-weight: 600; }

/* =========================================================
   RESULT LINE (closes the process section)
   ========================================================= */
.flow__result {
  display: flex; align-items: baseline; justify-content: center;
  flex-wrap: wrap; gap: 0 10px; text-align: center;
  margin: clamp(28px, 4vw, 40px) auto 0; max-width: 760px;
  padding: 18px 30px; border: 1px solid var(--line-strong); border-radius: 999px;
  background: rgba(255,255,255,.02);
  font-size: clamp(1rem, 2vw, 1.16rem); color: var(--muted);
}
.flow__result strong { color: var(--text); font-weight: 600; }
.flow__arrow { color: var(--cyan); font-size: 1.1rem; }

/* =========================================================
   SERVICES
   ========================================================= */
/* Six tracks so cards can span 2 (= 3 per row). With five cards, the last two
   are pulled inward so the final row centres instead of leaving a gap. */
.cards { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; }
.card { grid-column: span 2; }
.card:nth-child(4) { grid-column: 2 / span 2; }
.card:nth-child(5) { grid-column: 4 / span 2; }

.card {
  padding: 30px 28px 32px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: linear-gradient(180deg, var(--panel), rgba(14,17,26,.4));
  position: relative; overflow: hidden;
  transition: transform .3s var(--ease), border-color .3s, background .3s;
}
.card::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: var(--grad); opacity: 0; transition: opacity .3s;
}
.card:hover { transform: translateY(-4px); border-color: var(--line-strong); background: linear-gradient(180deg, var(--panel-2), rgba(18,22,32,.5)); }
.card:hover::after { opacity: .9; }

.card__icon {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(79,124,255,.12); border: 1px solid rgba(79,124,255,.25);
  color: var(--cyan); margin-bottom: 20px;
}
.card h3 { margin-bottom: 10px; }
.card p { color: var(--muted); font-size: .95rem; }

/* =========================================================
   PROCESS
   ========================================================= */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: step; }
.step { position: relative; padding: 28px 24px; border: 1px solid var(--line); border-radius: var(--r-md); background: rgba(255,255,255,.018); }
.step__n {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .85rem; font-weight: 500;
  background: var(--grad); color: #05070c; margin-bottom: 18px;
}
.step h3 { margin-bottom: 8px; }
.step p { color: var(--muted); font-size: .93rem; }

/* connector line between steps */
.step:not(:last-child)::after {
  content: ""; position: absolute; top: 45px; right: -12px; width: 12px; height: 1px;
  background: var(--line-strong);
}

/* =========================================================
   INDUSTRIES
   ========================================================= */
.chips { display: flex; flex-wrap: wrap; gap: 11px; margin-bottom: 60px; }
.chips li {
  padding: 11px 20px; border-radius: 999px; border: 1px solid var(--line);
  background: rgba(255,255,255,.02); font-size: .92rem; color: var(--muted);
  transition: border-color .25s, color .25s, background .25s;
}
.chips li:hover { border-color: rgba(18,216,184,.45); color: var(--text); background: rgba(18,216,184,.06); }

.list { display: grid; gap: 12px; }
.list li { position: relative; padding-left: 30px; color: var(--muted); font-size: .96rem; }
.list li::before {
  position: absolute; left: 0; top: 0;
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .9rem;
}
.list--yes li::before  { content: "→"; color: var(--cyan); }
.list--check li::before { content: "✓"; color: var(--cyan); }

/* =========================================================
   ABOUT
   ========================================================= */
.about { max-width: 760px; }

/* Avatar sits beside the name, like a profile header */
.about__head { display: flex; align-items: center; gap: 24px; margin-bottom: 30px; }
.about__photo {
  flex: none; width: 124px; height: 124px;
  border-radius: 50%; object-fit: cover; display: block;
  border: 1px solid var(--line-strong);
  box-shadow: 0 14px 34px -18px rgba(0,0,0,.9);
}
.about__head .kicker { margin-bottom: 8px; }
.about__copy h2 { margin-bottom: 16px; }
.about__body { color: var(--muted); font-size: 1rem; margin-top: 16px; }

/* =========================================================
   PRICING
   ========================================================= */
.price { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.price__item {
  padding: 30px 28px 32px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: rgba(255,255,255,.018);
  display: flex; flex-direction: column;
}
.price__item--main {
  border-color: rgba(18,216,184,.4);
  background: linear-gradient(180deg, rgba(18,216,184,.07), rgba(255,255,255,.01));
  box-shadow: 0 26px 60px -44px rgba(18,216,184,.7);
}
.price__label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--cyan); margin-bottom: 14px;
}
.price__amount {
  font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; letter-spacing: -.03em;
  color: var(--text); line-height: 1.15; margin-bottom: 12px;
}
.price__amount span { font-size: .95rem; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.price__note { color: var(--muted); font-size: .93rem; }

/* =========================================================
   FAQ
   ========================================================= */
.faq { display: grid; gap: 12px; max-width: 860px; }
.faq__item {
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: rgba(255,255,255,.018);
  transition: border-color .25s, background .25s;
}
.faq__item[open] { border-color: var(--line-strong); background: rgba(255,255,255,.03); }
.faq__item summary {
  cursor: pointer; list-style: none;
  padding: 20px 56px 20px 26px; position: relative;
  font-weight: 600; font-size: 1.02rem; letter-spacing: -.01em;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+"; position: absolute; right: 24px; top: 50%;
  transform: translateY(-50%); color: var(--cyan);
  font-size: 1.3rem; font-weight: 400; line-height: 1;
  transition: transform .25s var(--ease);
}
.faq__item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq__item p { padding: 0 26px 22px; color: var(--muted); font-size: .96rem; max-width: 72ch; }

/* =========================================================
   WORK SHOWCASE — tabbed, so three projects fit in one screen
   ========================================================= */
.showcase {
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
  background: var(--panel);
  box-shadow: 0 40px 90px -60px rgba(0,0,0,.95);
}

/* Columns are generated from however many tabs exist, so adding or removing
   a project needs no CSS change. */
.showcase__tabs {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.02);
}
.showcase__tab {
  position: relative; display: grid; gap: 3px; justify-items: start;
  padding: 18px 24px 20px; text-align: left; cursor: pointer;
  background: transparent; border: 0; border-right: 1px solid var(--line);
  font-family: inherit; color: var(--muted);
  transition: background .25s, color .25s;
}
.showcase__tab:last-child { border-right: 0; }
.showcase__tab:hover { background: rgba(255,255,255,.03); color: var(--text); }
.showcase__tab.is-active { background: rgba(18,216,184,.05); color: var(--text); }
/* active underline */
.showcase__tab::after {
  content: ""; position: absolute; inset: auto 0 -1px 0; height: 2px;
  background: var(--grad); opacity: 0; transition: opacity .25s;
}
.showcase__tab.is-active::after { opacity: 1; }

.showcase__tabn {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .68rem; letter-spacing: .16em; color: var(--cyan);
}
.showcase__tabname { font-size: 1rem; font-weight: 600; letter-spacing: -.015em; }
.showcase__tabtype { font-size: .8rem; color: var(--dim); }

/* Stage keeps a stable height so switching tabs doesn't make the page jump */
.showcase__stage { min-height: 400px; }
.showcase__panel {
  display: grid; grid-template-columns: 1fr 1fr;
  animation: panelIn .35s var(--ease);
}
.showcase__panel[hidden] { display: none; }
@keyframes panelIn { from { opacity: 0; transform: translateY(6px); } }

/* Left half of a panel — holds the client quote, or a status note if the
   build isn't finished yet. */
.showcase__aside {
  position: relative; min-height: 400px; display: grid; place-items: center;
  padding: 40px 42px;
  background:
    linear-gradient(135deg, rgba(79,124,255,.16), rgba(18,216,184,.10)),
    var(--panel-2);
  border-right: 1px solid var(--line);
}

.quote { margin: 0; max-width: 34ch; }
.quote blockquote {
  margin: 0; position: relative;
  font-size: clamp(1.06rem, 1.7vw, 1.32rem); line-height: 1.5;
  letter-spacing: -.015em; color: var(--text);
}
/* Oversized opening quote mark, set behind the text */
.quote blockquote::before {
  content: "\201C"; position: absolute; top: -.34em; left: -.42em;
  font-size: 4.2rem; line-height: 1; color: rgba(18,216,184,.20);
  pointer-events: none;
}
.quote figcaption {
  margin-top: 20px; color: var(--muted); font-size: .88rem; font-weight: 500;
}

.status { text-align: center; max-width: 32ch; }
.status__badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--cyan); border: 1px solid rgba(18,216,184,.32);
  background: rgba(18,216,184,.07); border-radius: 999px; padding: 7px 15px;
}
.status__dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--cyan);
  box-shadow: 0 0 0 0 rgba(18,216,184,.7); animation: pulse 2.4s infinite;
}
.status__note { margin-top: 18px; color: var(--muted); font-size: .93rem; }

.showcase__body { padding: 38px 40px; display: grid; align-content: center; }
.showcase__body h3 { font-size: 1.42rem; margin-bottom: 22px; }

.showcase__facts { display: grid; gap: 4px; margin: 0; }
.showcase__facts dt {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: .66rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--cyan); margin-top: 14px;
}
.showcase__facts dt:first-child { margin-top: 0; }
.showcase__facts dd { margin: 0; color: var(--muted); font-size: .95rem; }

.showcase__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.showcase__tags li {
  font-size: .74rem; padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--line-strong); color: var(--dim);
}

/* =========================================================
   CONTACT
   ========================================================= */
.section--contact { background: var(--bg-alt); }
.contact {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(32px, 5vw, 64px); align-items: center;
}
.contact__copy .list { margin-top: 30px; }

.contact__card {
  padding: 32px 30px 30px; border: 1px solid var(--line-strong); border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  box-shadow: 0 40px 90px -50px rgba(0,0,0,.95);
}
.contact__row {
  display: flex; flex-direction: column; gap: 3px;
  padding: 16px 0; border-bottom: 1px solid var(--line);
  transition: padding-left .25s var(--ease);
}
.contact__row:first-child { padding-top: 0; }
a.contact__row:hover { padding-left: 8px; }
.contact__label {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .68rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--dim);
}
.contact__value { font-size: 1.06rem; font-weight: 600; letter-spacing: -.01em; }
a.contact__row:hover .contact__value { color: var(--cyan); }
.contact__row--static .contact__value { font-weight: 500; font-size: .95rem; color: var(--muted); }
.contact__fine { margin-top: 14px; text-align: center; color: var(--dim); font-size: .84rem; }

/* =========================================================
   FOOTER
   ========================================================= */
.footer { border-top: 1px solid var(--line); padding: 54px 0 32px; background: var(--bg); }
.footer__inner { display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.footer__brand p { color: var(--dim); font-size: .9rem; margin-top: 8px; max-width: 38ch; }
.footer__links { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.footer__links a { color: var(--muted); font-size: .92rem; }
.footer__links a:hover { color: var(--cyan); }
.footer__bottom {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--line);
  color: var(--dim); font-size: .82rem;
}
.footer__mono { font-family: 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .1em; }

/* =========================================================
   SCROLL REVEAL
   ========================================================= */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1000px) {
  /* Stacked hero order: headline → diagram → explanation → buttons.
     display:contents dissolves .hero__copy so its children and the diagram
     become siblings in one column and can be ordered against each other.
     Spacing comes from each element's own margins, so the grid gap goes to 0. */
  .hero__inner { grid-template-columns: 1fr; gap: 0; }
  .hero__copy { display: contents; }

  .eyebrow      { order: 1; }
  .hero__title  { order: 2; }
  .hero__sub    { order: 3; }
  .hero__cta    { order: 4; }
  .hero__visual { order: 5; max-width: 560px; margin: 40px auto 0; }
  .hero__proof  { order: 6; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .card, .card:nth-child(4), .card:nth-child(5) { grid-column: auto; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .step:nth-child(2)::after { display: none; }
  .contact { grid-template-columns: 1fr; }

  .price { grid-template-columns: 1fr; }

  .showcase__panel { grid-template-columns: 1fr; }
  .showcase__aside { min-height: 220px; border-right: 0; border-bottom: 1px solid var(--line); padding: 34px 28px; }
  .showcase__stage { min-height: 0; }
  .showcase__body { padding: 30px 28px 34px; }

  .about__head { gap: 18px; }
  .about__photo { width: 96px; height: 96px; }
}

/* Nav collapses earlier than the rest of the layout — eight items plus the
   button need more room than the other sections do. */
@media (max-width: 980px) {
  .nav__toggle { display: flex; }
  .nav__links {
    position: absolute; top: 72px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 4px;
    background: rgba(9,11,17,.97); backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--line); padding: 14px var(--pad) 22px;
    transform: translateY(-8px); opacity: 0; pointer-events: none;
    transition: opacity .22s, transform .22s var(--ease);
  }
  .nav__links.is-open { opacity: 1; transform: none; pointer-events: auto; }
  .nav__links a { padding: 12px 4px; font-size: 1rem; }
  .nav__links a.btn { margin-top: 10px; justify-content: center; }
}

@media (max-width: 760px) {
  body { font-size: 16px; }

  .eyebrow { font-size: .62rem; letter-spacing: .1em; padding: 6px 13px; }
  .hero__sub { font-size: 1.02rem; }


  .cards, .steps { grid-template-columns: 1fr; }
  .step::after { display: none !important; }

  /* Tabs stack into a scannable list on phones */
  .showcase__tabs { grid-auto-flow: row; grid-auto-columns: auto; }
  .showcase__tab { border-right: 0; border-bottom: 1px solid var(--line); padding: 14px 20px 16px; }
  .showcase__tab:last-child { border-bottom: 0; }
  .showcase__tab::after { inset: auto auto 0 0; width: 3px; height: auto; top: 0; }


  /* Pairs stay side-by-side at every width — the before/after link is the point.
     Only the type and padding tighten up. */
  .diagram { padding: 18px 14px 20px; }
  .node { font-size: .68rem; padding: 8px 8px; }
  .pairs { gap: 6px 7px; }
  .diagram__caption { font-size: .84rem; }

  .btn { padding: 13px 22px; }
  .hero__cta .btn { flex: 1 1 auto; }
}

/* =========================================================
   MOTION / PRINT
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}