/* ============================================================
   MercadoNCM — Design tokens
   Ink #0A2E38 · Core #0D5C6B · Mist #3E8E9E · Paper #F7FAFA
   Signal-Green #1E8449 · Signal-Red #C0392B · Amber #E8A33D
   Display: Space Grotesk · Body: Inter · Mono: IBM Plex Mono
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root{
  --ink:#0A2E38;
  --core:#0D5C6B;
  --mist:#3E8E9E;
  --paper:#F7FAFA;
  --paper-dim:#EAF3F4;
  --line:#D7E4E5;
  --green:#1E8449;
  --red:#C0392B;
  --amber:#E8A33D;
  --amber-ink:#5C3B0A;
  --text:#1C2B2F;
  --text-dim:#5C7377;

  --display: 'Space Grotesk', system-ui, sans-serif;
  --body: 'Inter', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;

  --max: 1160px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--body);
  color:var(--text);
  background:var(--paper);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit;}
h1,h2,h3{
  font-family:var(--display);
  line-height:1.1;
  margin:0 0 .5em;
  letter-spacing:-0.01em;
}
p{margin:0 0 1em;}
.wrap{max-width:var(--max); margin:0 auto; padding:0 24px;}
.mono{font-family:var(--mono); letter-spacing:-0.02em;}

/* Focus visibility */
a:focus-visible, button:focus-visible, summary:focus-visible{
  outline:3px solid var(--amber);
  outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important;}
}

/* ---------- Nav ---------- */
.nav{
  position:sticky; top:0; z-index:40;
  background:rgba(10,46,56,0.94);
  backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.nav .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:72px;
}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none;}
.brand img{width:34px; height:34px;}
.brand span{
  font-family:var(--display); font-weight:700; font-size:19px; color:#fff;
}
.nav-links{display:flex; align-items:center; gap:28px; list-style:none; margin:0; padding:0;}
.nav-links a{
  color:#CFE6E9; text-decoration:none; font-size:14.5px; font-weight:500;
}
.nav-links a:hover{color:#fff;}
.nav-cta{
  background:var(--amber); color:var(--amber-ink) !important;
  padding:9px 18px; border-radius:8px; font-weight:700 !important;
  font-size:14px !important;
}
.nav-cta:hover{background:#f0b054;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 26px; border-radius:9px;
  font-family:var(--body); font-weight:700; font-size:15.5px;
  text-decoration:none; border:none; cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn:hover{transform:translateY(-1px);}
.btn-primary{background:var(--amber); color:var(--amber-ink);}
.btn-primary:hover{box-shadow:0 8px 22px rgba(232,163,61,.35);}
.btn-ghost{background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.35);}
.btn-ghost:hover{border-color:#fff;}
.btn-outline{background:transparent; color:var(--core); border:1.5px solid var(--core);}
.btn-outline:hover{background:var(--core); color:#fff;}

/* ---------- Hero ---------- */
.hero{
  background:linear-gradient(180deg, var(--ink) 0%, #0d3946 100%);
  color:#fff;
  padding:76px 0 96px;
}
.hero-grid{
  display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;
}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:12.5px; font-weight:600;
  color:#FFD9A8; background:rgba(232,163,61,.14);
  border:1px solid rgba(232,163,61,.35);
  padding:6px 12px; border-radius:100px; margin-bottom:22px;
}
.hero h1{font-size:44px; color:#fff; max-width:620px;}
.hero h1 em{font-style:normal; color:#7FD8CB;}
.hero p.lead{font-size:17.5px; color:#CFE6E9; max-width:520px;}
.hero-actions{display:flex; gap:14px; margin-top:30px; flex-wrap:wrap;}

/* Signature: code-diff card */
.diff-card{
  background:#0A1F26; border:1px solid rgba(255,255,255,.1);
  border-radius:14px; overflow:hidden;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.55);
}
.diff-chrome{
  display:flex; align-items:center; gap:7px;
  padding:12px 16px; background:rgba(255,255,255,.04);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.diff-chrome span{width:10px; height:10px; border-radius:50%; background:#3a4b50;}
.diff-chrome .label{
  margin-left:8px; font-family:var(--mono); font-size:12px; color:#7C9BA1;
}
.diff-body{padding:22px 20px; font-family:var(--mono); font-size:13.5px;}
.diff-line{
  display:flex; gap:12px; padding:9px 10px; border-radius:6px; margin-bottom:6px;
  align-items:baseline; flex-wrap:wrap;
}
.diff-line .tag{
  font-weight:600; font-size:11px; width:20px; flex:none;
}
.diff-line.rem{background:rgba(192,57,43,.16);}
.diff-line.rem .tag{color:#FF9C90;}
.diff-line.rem .code{color:#FFC7C0; text-decoration:line-through; text-decoration-color:rgba(255,199,192,.6);}
.diff-line.add{background:rgba(30,132,73,.18);}
.diff-line.add .tag{color:#7CE0A6;}
.diff-line.add .code{color:#BFF2D3;}
.diff-note{color:#7C9BA1; font-family:var(--body); font-size:13px; margin-top:14px;}
.diff-note strong{color:#fff;}

/* ---------- Ticker ---------- */
.ticker{
  background:var(--core); color:#DFF3F1; overflow:hidden;
  border-top:1px solid rgba(255,255,255,.12);
  border-bottom:1px solid rgba(255,255,255,.12);
}
.ticker-track{
  display:flex; gap:48px; white-space:nowrap;
  padding:12px 0; animation:scroll 32s linear infinite;
  font-family:var(--mono); font-size:13px;
}
.ticker-track span{opacity:.92;}
.ticker-track .arrow{color:#FFD9A8;}
@keyframes scroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}

/* ---------- Sections ---------- */
section{padding:88px 0;}
.section-head{max-width:640px; margin:0 0 48px;}
.kicker{
  font-family:var(--mono); font-size:12.5px; font-weight:600;
  color:var(--core); text-transform:uppercase; letter-spacing:.06em;
  margin-bottom:12px; display:block;
}
.section-head h2{font-size:32px; color:var(--ink);}
.section-head p{color:var(--text-dim); font-size:16.5px;}

/* Problem cards */
.problem-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.problem-card{
  background:#fff; border:1px solid var(--line); border-radius:14px;
  padding:28px 26px;
}
.problem-card .num{
  font-family:var(--mono); font-size:13px; color:var(--red); font-weight:600;
  display:block; margin-bottom:14px;
}
.problem-card h3{font-size:19px; color:var(--ink); margin-bottom:8px;}
.problem-card p{color:var(--text-dim); font-size:14.5px; margin:0;}

/* Feature / screenshot rows */
.feature-row{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:28px; padding:56px 0; border-top:1px solid var(--line);
}
.feature-row:first-of-type{border-top:none;}
.feature-text{max-width:640px;}
.feature-text .kicker{margin-bottom:10px;}
.feature-text h3{font-size:26px; color:var(--ink); margin-bottom:12px;}
.feature-text p{color:var(--text-dim); font-size:16px;}
.feature-shot{
  border-radius:14px; overflow:hidden; border:1px solid var(--line);
  box-shadow:0 28px 56px -24px rgba(10,46,56,.32);
  width:100%; max-width:900px;
  background:#fff;
}
.feature-shot img{width:100%; display:block; image-rendering:-webkit-optimize-contrast;}

/* Departments */
.dept-grid{
  display:grid; grid-template-columns:repeat(5,1fr); gap:16px;
}
.dept-card{
  background:#fff; border:1px solid var(--line); border-radius:12px;
  padding:22px 16px; text-align:center;
}
.dept-card .emoji{font-size:28px; display:block; margin-bottom:10px;}
.dept-card h4{font-family:var(--display); font-size:15px; color:var(--ink); margin:0 0 4px;}
.dept-card p{font-size:12.5px; color:var(--text-dim); margin:0;}

/* CTA band */
.cta-band{
  background:var(--ink); color:#fff; text-align:center;
  padding:72px 24px; border-radius:0;
}
.cta-band h2{font-size:30px; max-width:560px; margin:0 auto 14px;}
.cta-band p{color:#CFE6E9; max-width:480px; margin:0 auto 30px;}

/* Footer */
footer{background:#08222A; color:#8FA8AC; padding:48px 0 28px;}
.footer-grid{
  display:flex; justify-content:space-between; align-items:flex-start;
  flex-wrap:wrap; gap:24px; padding-bottom:28px; border-bottom:1px solid rgba(255,255,255,.08);
}
.footer-brand{display:flex; align-items:center; gap:10px;}
.footer-brand img{width:28px; height:28px;}
.footer-brand span{font-family:var(--display); font-weight:700; color:#fff; font-size:16px;}
.footer-links{display:flex; gap:32px; flex-wrap:wrap;}
.footer-links a{color:#B7CACD; text-decoration:none; font-size:14px;}
.footer-links a:hover{color:#fff;}
.footer-bottom{
  padding-top:20px; font-size:12.5px; display:flex; justify-content:space-between;
  flex-wrap:wrap; gap:10px;
}

/* Steps (page 2) */
.steps{counter-reset:step;}
.step{
  display:grid; grid-template-columns:56px 1fr; gap:22px;
  padding:30px 0; border-top:1px solid var(--line);
}
.step:first-child{border-top:none;}
.step-num{
  width:44px; height:44px; border-radius:50%;
  background:var(--paper-dim); border:1.5px solid var(--core);
  color:var(--core); font-family:var(--mono); font-weight:600;
  display:flex; align-items:center; justify-content:center; font-size:16px;
}
.step h3{font-size:19px; color:var(--ink); margin-bottom:6px;}
.step p{color:var(--text-dim); font-size:15px; margin:0;}

/* FAQ */
.faq details{
  border:1px solid var(--line); border-radius:10px; padding:18px 20px; margin-bottom:12px;
  background:#fff;
}
.faq summary{
  cursor:pointer; font-family:var(--display); font-weight:600; font-size:16px;
  color:var(--ink); list-style:none; display:flex; justify-content:space-between; align-items:center;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+"; font-size:22px; color:var(--core); font-weight:400;}
.faq details[open] summary::after{content:"–";}
.faq p{color:var(--text-dim); font-size:14.5px; margin:12px 0 0;}

/* Page hero (page 2) */
.page-hero{
  background:var(--paper-dim); padding:58px 0 48px; border-bottom:1px solid var(--line);
}
.page-hero h1{font-size:34px; color:var(--ink); max-width:640px;}
.page-hero p{color:var(--text-dim); font-size:16.5px; max-width:560px;}

/* Responsive */
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;}
  .hero h1{font-size:34px;}
  .problem-grid{grid-template-columns:1fr;}
  .feature-shot{max-width:100%;}
  .dept-grid{grid-template-columns:repeat(2,1fr);}
  .nav-links{display:none;}
}