/* ─── Fonts ────────────────────────────────────────────────────────────────── */
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;500;600;700&display=swap");

/* ─── Design tokens ────────────────────────────────────────────────────────── */
:root {
  /* Brand · Deploy Blue */
  --blue-50:  #EEF4FF;
  --blue-100: #DCE8FE;
  --blue-200: #BAD2FD;
  --blue-300: #8DB2FA;
  --blue-400: #5A8AF5;
  --blue-500: #3168EC;
  --blue-600: #1F4FDB;
  --blue-700: #1B40B2;
  --blue-800: #1A368B;
  --blue-900: #182E6C;

  /* Brand · Cursor Cyan */
  --cyan-300: #67E8F9;
  --cyan-400: #22D3EE;
  --cyan-500: #06B6D4;
  --cyan-600: #0891B2;

  /* Neutros · Ink */
  --ink-0:   #FFFFFF;
  --ink-25:  #FAFBFD;
  --ink-50:  #F4F6FA;
  --ink-100: #E9EDF4;
  --ink-200: #D8DEE9;
  --ink-300: #B9C2D3;
  --ink-400: #8D99B0;
  --ink-500: #65728C;
  --ink-600: #49566E;
  --ink-700: #344056;
  --ink-800: #1E2A3F;
  --ink-900: #121C2E;
  --ink-950: #0B1220;

  /* Status */
  --green-100: #DCFAE9;
  --green-600: #149055;
  --green-700: #0F7747;
  --amber-100: #FDF0D2;
  --amber-600: #B45309;
  --amber-700: #92400E;
  --red-100:   #FDE3E3;
  --red-600:   #D92D2D;
  --red-700:   #B42424;

  /* Semantic aliases — light theme */
  --bg-page:        var(--ink-25);
  --bg-sunken:      var(--ink-50);
  --surface-card:   var(--ink-0);
  --surface-raised: var(--ink-0);
  --surface-dark:   var(--ink-950);
  --surface-dark-2: var(--ink-900);

  --text-heading:       var(--ink-950);
  --text-body:          var(--ink-700);
  --text-muted:         var(--ink-500);
  --text-faint:         var(--ink-400);
  --text-inverse:       #F3F6FC;
  --text-inverse-muted: #93A1BC;
  --text-link:          var(--blue-600);
  --text-on-accent:     #FFFFFF;

  --accent:        var(--blue-600);
  --accent-hover:  var(--blue-700);
  --accent-press:  var(--blue-800);
  --accent-soft:   var(--blue-50);
  --accent-cursor: var(--cyan-400);

  --border-subtle:  var(--ink-100);
  --border-default: var(--ink-200);
  --border-strong:  var(--ink-300);
  --border-focus:   var(--blue-500);

  --status-success-bg: var(--green-100);
  --status-success-fg: var(--green-700);
  --status-warning-bg: var(--amber-100);
  --status-warning-fg: var(--amber-700);
  --status-danger-bg:  var(--red-100);
  --status-danger-fg:  var(--red-700);
  --status-info-bg:    var(--blue-50);
  --status-info-fg:    var(--blue-700);

  /* Spacing — 4px base */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Radii */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 999px;

  /* Layout */
  --container-max: 1160px;
  --control-h-sm:  32px;
  --control-h-md:  38px;
  --control-h-lg:  46px;

  /* Typography */
  --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-body:    "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", "SF Mono", Consolas, monospace;

  --text-display-1: 60px;
  --text-display-2: 48px;
  --text-h1: 38px;
  --text-h2: 30px;
  --text-h3: 22px;
  --text-h4: 18px;
  --text-body-lg: 18px;
  --text-body-md: 16px;
  --text-body-sm: 15px;
  --text-caption: 13px;
  --text-mono-md: 15px;
  --text-mono-sm: 13px;

  --leading-display: 1.06;
  --leading-heading: 1.18;
  --leading-body:    1.55;
  --leading-mono:    1.6;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --tracking-display: -0.02em;
  --tracking-heading: -0.01em;
  --tracking-caps:    0.08em;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(11, 18, 32, 0.06);
  --shadow-sm: 0 1px 3px rgba(11, 18, 32, 0.07), 0 1px 2px rgba(11, 18, 32, 0.05);
  --shadow-md: 0 4px 12px rgba(11, 18, 32, 0.08), 0 1px 3px rgba(11, 18, 32, 0.06);
  --shadow-lg: 0 12px 32px rgba(11, 18, 32, 0.14), 0 2px 6px rgba(11, 18, 32, 0.08);
  --shadow-glow-cyan: 0 0 0 1px rgba(34, 211, 238, 0.35), 0 0 24px rgba(34, 211, 238, 0.18);

  --focus-ring: 0 0 0 3px rgba(49, 104, 236, 0.28);

  /* Motion */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 120ms;
  --duration-base: 180ms;
  --duration-slow: 280ms;

  /* Grid blueprint motif */
  --grid-line-dark: rgba(141, 153, 176, 0.08);
  --grid-bg-dark:
    linear-gradient(var(--grid-line-dark) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line-dark) 1px, transparent 1px);
  --grid-size: 32px 32px;
}

/* ─── Dark theme ───────────────────────────────────────────────────────────── */
[data-theme="dark"] {
  --bg-page:        var(--ink-950);
  --bg-sunken:      #070D18;
  --surface-card:   var(--ink-900);
  --surface-raised: var(--ink-800);
  --surface-dark:   #070D18;
  --surface-dark-2: var(--ink-900);

  --text-heading:       #F3F6FC;
  --text-body:          #C4CEE0;
  --text-muted:         #8D99B0;
  --text-faint:         #65728C;
  --text-link:          var(--blue-300);

  --accent:       var(--blue-500);
  --accent-hover: var(--blue-400);
  --accent-press: var(--blue-600);
  --accent-soft:  rgba(49, 104, 236, 0.16);

  --border-subtle:  rgba(255, 255, 255, 0.07);
  --border-default: rgba(255, 255, 255, 0.12);
  --border-strong:  rgba(255, 255, 255, 0.22);

  --status-success-bg: rgba(20, 144, 85, 0.18);
  --status-success-fg: #4ADE94;
  --status-warning-bg: rgba(180, 83, 9, 0.18);
  --status-warning-fg: #FBBF54;
  --status-danger-bg:  rgba(217, 45, 45, 0.18);
  --status-danger-fg:  #F87171;
  --status-info-bg:    rgba(49, 104, 236, 0.18);
  --status-info-fg:    #8DB2FA;
}

/* ─── Base reset ───────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  line-height: var(--leading-body);
  color: var(--text-body);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--text-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  margin: 0;
}

code, pre, kbd { font-family: var(--font-mono); }

a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; }

::selection { background: rgba(34, 211, 238, 0.3); }

/* ─── Components ───────────────────────────────────────────────────────────── */

/* Button */
.lmh-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2); border-radius: var(--radius-sm);
  font-family: var(--font-body); font-weight: var(--weight-medium);
  border: 1px solid transparent; cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
  white-space: nowrap; text-decoration: none;
}
.lmh-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.lmh-btn--sm {
  height: var(--control-h-sm); padding: 0 var(--space-3);
  font-size: var(--text-body-sm);
}
.lmh-btn--md {
  height: var(--control-h-md); padding: 0 var(--space-4);
  font-size: var(--text-body-sm);
}
.lmh-btn--lg {
  height: var(--control-h-lg); padding: 0 var(--space-5);
  font-size: var(--text-body-md);
}

.lmh-btn--primary {
  background: var(--accent); color: var(--text-on-accent);
}
.lmh-btn--primary:hover { background: var(--accent-hover); }
.lmh-btn--primary:active { background: var(--accent-press); }

.lmh-btn--secondary {
  background: transparent;
  border-color: var(--border-default);
  color: var(--text-body);
}
.lmh-btn--secondary:hover { border-color: var(--border-strong); color: var(--text-heading); }

[data-theme="dark"] .lmh-btn--secondary {
  border-color: rgba(255, 255, 255, 0.18);
  color: var(--text-body);
}
[data-theme="dark"] .lmh-btn--secondary:hover {
  border-color: rgba(255, 255, 255, 0.35);
  color: var(--text-heading);
}

/* Badge */
.lmh-badge {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 9px; border-radius: var(--radius-full);
  font: 500 11px/1 var(--font-mono); letter-spacing: 0.04em; white-space: nowrap;
}
.lmh-badge--caps { text-transform: uppercase; letter-spacing: var(--tracking-caps); font-size: 10px; }
.lmh-badge--accent { background: var(--ink-950); color: var(--cyan-400); }

/* Card */
.lmh-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out);
}
.lmh-card--hover:hover { box-shadow: var(--shadow-md); border-color: var(--border-strong); }

/* Stat */
.lmh-stat { display: grid; gap: 6px; font-family: var(--font-body); }
.lmh-stat__label {
  font: 500 11px/1 var(--font-mono);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--text-faint);
}
.lmh-stat__value {
  font: 600 26px/1.1 var(--font-mono);
  color: var(--text-heading); letter-spacing: -0.01em;
}

/* CodeBlock — terminal */
.lmh-code {
  background: var(--surface-dark);
  border-radius: var(--radius-lg);
  font-family: var(--font-mono);
  overflow: hidden;
}
.lmh-code--glow { box-shadow: var(--shadow-glow-cyan); }
.lmh-code__bar {
  display: flex; align-items: center; gap: 8px; padding: 10px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.lmh-code__dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.14); flex: none;
}
.lmh-code__title {
  margin-left: 6px;
  font: 500 11px/1 var(--font-mono);
  letter-spacing: 0.04em; color: var(--text-inverse-muted);
}
.lmh-code__body {
  padding: 14px 16px;
  font-size: var(--text-mono-sm); line-height: var(--leading-mono);
  color: #E2E8F2;
}
.lmh-code__line { display: block; white-space: pre-wrap; }
.lmh-code__line--comment { color: var(--text-inverse-muted); }
.lmh-code__line--ok { color: #4ADE94; }
.lmh-code__prompt { color: var(--cyan-400); user-select: none; }
.lmh-code__cursor {
  display: inline-block; width: 7px; height: 13px;
  background: var(--cyan-400); border-radius: 1px;
  vertical-align: -2px; animation: lmh-blink 1.1s steps(2) infinite;
}
@keyframes lmh-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .lmh-code__cursor { animation: none; } }

/* Lucide icon wrapper */
.licon {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
}

/* ─── Page layout ──────────────────────────────────────────────────────────── */

.lmhome {
  --sec-pad: 96px;
  --hero-pad: 104px;
  --card-pad: 24px;
  --grid-gap: 24px;
}

.lmhome .container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

/* Topbar */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250, 251, 253, 0.85);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border-subtle);
}
.topbar__inner {
  display: flex; align-items: center; justify-content: space-between; height: 80px;
}
.topbar__brand { display: flex; align-items: center; }
.topbar__brand img { height: 64px; display: block; }
.topbar__right { display: flex; align-items: center; gap: var(--space-8); }
.topbar__nav { display: flex; align-items: center; gap: var(--space-6); }
.topbar__nav a {
  font-size: var(--text-body-sm); font-weight: var(--weight-medium);
  color: var(--text-body);
}
.topbar__nav a:hover { color: var(--text-heading); text-decoration: none; }

/* Hero */
.hero {
  background-color: var(--ink-950);
  background-image: var(--grid-bg-dark);
  background-size: var(--grid-size);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.hero__inner {
  display: grid; grid-template-columns: 1.04fr 0.96fr;
  gap: var(--space-16); align-items: center;
  padding-top: var(--hero-pad); padding-bottom: var(--hero-pad);
}
.hero__copy {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-6);
}
.hero__title {
  font-size: var(--text-display-1); line-height: var(--leading-display);
  letter-spacing: var(--tracking-display); font-weight: var(--weight-bold);
  color: var(--text-heading); text-wrap: pretty; margin: 0;
}
.hero__sub {
  font-size: var(--text-body-lg); color: var(--text-body);
  max-width: 46ch; margin: 0; text-wrap: pretty;
}
.hero__ctas { display: flex; align-items: center; gap: var(--space-3); }
.hero__stats {
  display: grid; grid-template-columns: repeat(2, max-content);
  column-gap: var(--space-20); row-gap: var(--grid-gap);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  padding-top: var(--space-8); padding-bottom: var(--space-10);
}

/* Section scaffolding */
.sec { padding-top: var(--sec-pad); padding-bottom: var(--sec-pad); }
.sec__head {
  display: flex; flex-direction: column; gap: var(--space-3);
  max-width: 60ch; margin-bottom: var(--space-12);
}
.sec__label {
  font-family: var(--font-mono); font-size: var(--text-mono-sm);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--text-muted);
}
.sec__label::before { content: "## "; color: var(--accent-cursor); }
.sec__title {
  font-size: var(--text-display-2); letter-spacing: var(--tracking-display);
  font-weight: var(--weight-bold); margin: 0; text-wrap: pretty;
}
.sec__lead { font-size: var(--text-body-lg); color: var(--text-muted); margin: 0; text-wrap: pretty; }

/* Serviços */
.servicos { background: var(--bg-page); }
.servicos__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--grid-gap); }
.servico { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--card-pad); }
.servico__icon {
  width: 44px; height: 44px; border-radius: var(--radius-md);
  background: var(--accent-soft); color: var(--blue-600);
  display: flex; align-items: center; justify-content: center; flex: none;
}
.servico__title { font-size: var(--text-h4); font-weight: var(--weight-semibold); margin: 0; }
.servico__desc { font-size: var(--text-body-sm); color: var(--text-muted); margin: 0; text-wrap: pretty; }

/* Processo */
.processo {
  background: var(--surface-card);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}
.processo__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--grid-gap); }
.passo {
  display: flex; flex-direction: column; gap: var(--space-3);
  border-top: 1px solid var(--border-default); padding-top: var(--space-5);
}
.passo__num {
  font-family: var(--font-mono); font-size: var(--text-mono-sm);
  color: var(--blue-600); letter-spacing: var(--tracking-caps);
}
.passo__title { font-size: var(--text-h4); font-weight: var(--weight-semibold); margin: 0; }
.passo__desc { font-size: var(--text-body-sm); color: var(--text-muted); margin: 0; text-wrap: pretty; }

/* CTA final */
.ctafinal {
  background-color: var(--ink-950);
  background-image: var(--grid-bg-dark);
  background-size: var(--grid-size);
}
.ctafinal__inner {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: var(--space-6);
  padding-top: var(--sec-pad); padding-bottom: var(--sec-pad);
}
.ctafinal__comment {
  font-family: var(--font-mono); font-size: var(--text-mono-md);
  color: var(--text-muted);
}
.ctafinal__title {
  font-size: var(--text-display-2); letter-spacing: var(--tracking-display);
  font-weight: var(--weight-bold); color: var(--text-heading);
  margin: 0; max-width: 24ch; text-wrap: pretty;
}
.ctafinal__sub {
  font-size: var(--text-body-lg); color: var(--text-body);
  margin: 0; max-width: 48ch; text-wrap: pretty;
}
.ctafinal__actions {
  display: flex; align-items: center; gap: var(--space-5); margin-top: var(--space-2);
}
.ctafinal__mail {
  font-family: var(--font-mono); font-size: var(--text-mono-md); color: var(--text-body);
}
.ctafinal__mail:hover { color: var(--text-heading); text-decoration: none; }

/* Footer */
.footer { background: var(--bg-page); }
.footer__inner {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: var(--space-8); padding-bottom: var(--space-8);
}
.footer__left { display: flex; align-items: center; gap: var(--space-5); }
.footer__left img { height: 52px; display: block; }
.footer__copy { font-size: var(--text-caption); color: var(--text-faint); }
.footer__egg {
  font-family: var(--font-mono); font-size: var(--text-mono-sm); color: var(--text-faint);
}

/* ─── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .hero__inner { grid-template-columns: 1fr; gap: var(--space-10); }
  .servicos__grid, .processo__grid { grid-template-columns: repeat(2, 1fr); }
  .topbar__nav { display: none; }
  .hero__title { font-size: var(--text-display-2); }
  .sec__title, .ctafinal__title { font-size: var(--text-h1); }
}

@media (max-width: 600px) {
  .lmhome { --sec-pad: 56px; --hero-pad: 56px; }
  .lmhome .container { padding: 0 var(--space-5); }
  .servicos__grid, .processo__grid { grid-template-columns: 1fr; }
  .hero__stats { grid-template-columns: 1fr; row-gap: var(--space-6); }
  .hero__title { font-size: var(--text-h1); }
  .sec__title, .ctafinal__title { font-size: var(--text-h1); }
  .hero__sub, .sec__lead, .ctafinal__sub { font-size: var(--text-body-lg); }
  .hero__ctas { flex-wrap: wrap; }
  .ctafinal__actions { flex-direction: column; gap: var(--space-4); }
  .footer__inner { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
}