/* ==========================================================================
   Bela Desenvolvimento — landing page
   --------------------------------------------------------------------------
   Ported from the approved Claude Design artifact. The artifact authored
   every rule as an inline style attribute; here those are lifted into
   semantic classes so they can cache, carry :hover / :focus-visible states,
   respond to media queries, and run under a CSP without 'unsafe-inline'.
   Values are reproduced as-authored — this is a port, not a redesign.

   Tokens live in tokens.css and are the place to retune the palette.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonts — self-hosted Inter, Latin subsets only.
   The artifact bundled seven WOFF2 files covering Cyrillic, Greek and
   Vietnamese ranges the copy never uses; only these two ship. One file per
   subset covers the whole 400–700 weight axis.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   Reset and base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100%;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--color-text);
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
  /* The two radial washes are what keep the flat #161826 ground from reading
     as a dead rectangle: accent bloom top-right, shadow pooling bottom-left. */
  background:
    radial-gradient(1200px 720px at 82% -160px,
      color-mix(in srgb, var(--color-accent-900) 75%, transparent), transparent 60%),
    radial-gradient(1100px 800px at -10% 100%,
      color-mix(in srgb, black 30%, transparent), transparent 55%),
    var(--color-bg);
  background-attachment: fixed;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0;
}

p { margin: 0; }

a {
  color: var(--color-accent);
  text-decoration: none;
  text-underline-offset: 3px;
}
a:hover { color: var(--color-accent-300); }

img {
  display: block;
  max-width: 100%;
}

figure { margin: 0; }

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

/* Skip link — keyboard users should not have to walk the nav on every load.
   Fixed rather than absolute: an absolute one is positioned against the
   document, so shift-tabbing back to it after scrolling puts it off-screen. */
.skip-link {
  position: fixed;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 10px 16px;
  background: var(--color-surface);
  color: var(--color-text);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}
.skip-link:focus {
  left: 12px;
  top: 12px;
}

/* Screen-reader-only, but still focusable. */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   Language switching
   --------------------------------------------------------------------------
   The artifact's mechanism, kept intact: every translated string ships in
   the HTML twice and CSS decides which is painted. Portuguese is the served
   default, so a visitor with JavaScript off gets a complete Portuguese page
   rather than both languages stacked.

   The [hidden] attribute is maintained in parallel by lang.js so assistive
   technology does not read the page twice; the CSS alone is what holds
   before the script runs.
   -------------------------------------------------------------------------- */

[data-l='en'] { display: none; }
[data-lang='en'] [data-l='en'] { display: revert; }
[data-lang='en'] [data-l='pt'] { display: none; }

/* --------------------------------------------------------------------------
   Layout primitives
   --------------------------------------------------------------------------
   Every auto-fit grid below wraps its floor in min(<floor>, 100%). Without
   it a minmax(320px, 1fr) track refuses to shrink under 320px, so at a 320px
   viewport — where the gutters leave 280px — the card pushes 20px past the
   edge and the whole page scrolls sideways. The min() lets the track fall
   back to the container width instead.
   -------------------------------------------------------------------------- */

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 72px);
}

/* The fading rule — a Nocturne signature: transparent at both ends, solid
   through the middle, 48px of ramp an end. */
.rule-fade {
  height: 1px;
  border: 0;
  background: linear-gradient(to right,
    transparent, var(--color-divider) 48px calc(100% - 48px), transparent);
}

/* Section kicker — the short accent dash plus uppercase label. */
.kicker {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
}
.kicker::before {
  content: '';
  width: 44px;
  height: 1px;
  background: var(--color-accent);
  flex: none;
}
.kicker-text {
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent);
}

/* --------------------------------------------------------------------------
   Components carried over from the Nocturne system
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  text-decoration: none;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 14px;
  line-height: 1.2;
  color: var(--color-text);
  background: transparent;
  border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: var(--radius-md);
  transition: background-color 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.btn-primary { color: var(--color-accent); border-color: var(--color-accent); }
.btn-primary:hover:not(:disabled) { background: color-mix(in srgb, var(--color-accent) 12%, transparent); color: var(--color-accent); }
.btn-primary:active:not(:disabled) { background: color-mix(in srgb, var(--color-accent) 22%, transparent); }

.btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); color: var(--color-accent); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }

.btn-block { width: 100%; margin-top: var(--space-2); }

.tag {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  letter-spacing: 0.02em;
  padding: 3px 10px;
  border-radius: calc(var(--radius-md) * 0.75);
}
.tag-accent { background: var(--color-accent-800); color: var(--color-accent-100); }
.tag-neutral { background: var(--color-neutral-800); color: var(--color-neutral-100); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }

.card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: 28px;
}
.elev-sm { box-shadow: var(--shadow-sm); }

.input {
  width: 100%;
  min-height: 36px;
  padding: 8px 10px;
  font: inherit;
  font-size: 14px;
  color: var(--color-text);
  caret-color: var(--color-accent);
  background: var(--color-bg);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  transition: border-color 0.14s ease;
}
.input::placeholder { color: color-mix(in srgb, var(--color-text) 38%, transparent); }
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
textarea.input { min-height: 90px; resize: vertical; font-family: var(--font-body); }
.input[aria-invalid='true'] { border-color: #e2725b; }

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */

.nav {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 14px clamp(20px, 5vw, 72px);
  border-bottom: 1px solid var(--color-divider);
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: color-mix(in srgb, var(--color-bg) 82%, transparent);
}

.nav-brand {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 15px;
  letter-spacing: -0.01em;
  margin-right: auto;
  white-space: nowrap;
}
.nav-brand-dot { color: var(--color-accent); }

.nav-link {
  font-size: 14px;
  color: color-mix(in srgb, var(--color-text) 72%, transparent);
  transition: color 0.14s ease;
}
.nav-link:hover { color: var(--color-accent); }

.lang-toggle {
  display: flex;
  gap: 2px;
  border: 1px solid var(--color-neutral-800);
  border-radius: var(--radius-md);
  padding: 2px;
  flex: none;
}
.lang-btn {
  font: 500 12px var(--font-body);
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  background: transparent;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  transition: background-color 0.14s ease, color 0.14s ease;
}
.lang-btn:hover { color: var(--color-text); }
.lang-btn[aria-pressed='true'] {
  background: color-mix(in srgb, var(--color-accent) 22%, transparent);
  color: var(--color-accent-200);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero { padding: clamp(56px, 10vw, 112px) 0 84px; }

.hero-title {
  font-size: clamp(40px, 6.2vw, 84px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  /* The negative left margin optically aligns the glyph edge with the text
     below it, rather than the glyph's side bearing. */
  margin: 0 0 0 -0.06em;
  max-width: 16ch;
}

.hero-lead {
  font-size: 17px;
  line-height: 1.65;
  max-width: 56ch;
  margin: 32px 0 0;
  color: color-mix(in srgb, var(--color-text) 84%, transparent);
}

.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 28px;
}

/* --------------------------------------------------------------------------
   Statistics band
   -------------------------------------------------------------------------- */

.stats {
  background:
    radial-gradient(900px 420px at 85% -40%,
      color-mix(in srgb, var(--color-section-glow) 70%, transparent), transparent 64%),
    var(--color-section);
}
.stats-inner { padding: 64px clamp(20px, 5vw, 72px); }
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  gap: 36px 24px;
}
.stat-figure {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: clamp(34px, 3.4vw, 50px);
  line-height: 1.1;
  margin: 0 0 0 -0.055em;
  font-feature-settings: 'tnum' 1;
}
.stat-label {
  font-size: 13px;
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 12px 0 0;
  color: color-mix(in srgb, var(--color-text) 72%, transparent);
}

/* --------------------------------------------------------------------------
   Products
   -------------------------------------------------------------------------- */

.products {
  padding: 96px 0 72px;
  scroll-margin-top: 72px;
}

.section-title {
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0;
  max-width: 22ch;
}

.section-lead {
  font-size: 16px;
  line-height: 1.65;
  max-width: 56ch;
  margin: 20px 0 0;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
}

.product-list {
  display: flex;
  flex-direction: column;
  margin-top: 48px;
}

.product {
  padding: 40px 0;
  border-top: 1px solid var(--color-neutral-800);
}
.product:last-child { border-bottom: 1px solid var(--color-neutral-800); }

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 24px 64px;
  align-items: start;
}

.product-heading {
  display: flex;
  align-items: baseline;
  gap: 14px;
  min-width: 0;
  margin-bottom: 10px;
}
.product-number {
  font-family: var(--font-heading);
  font-size: 15px;
  color: var(--color-accent);
  font-feature-settings: 'tnum' 1;
}
.product-name {
  font-size: 28px;
  letter-spacing: -0.01em;
  margin: 0;
}

.product-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.product-category {
  font-size: 15px;
  line-height: 1.5;
  margin: 0;
  color: color-mix(in srgb, var(--color-text) 62%, transparent);
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

.product-body {
  font-size: 16px;
  line-height: 1.65;
  margin: 0;
  max-width: 54ch;
  color: color-mix(in srgb, var(--color-text) 84%, transparent);
}
.product-note {
  font-size: 14px;
  line-height: 1.6;
  margin: 16px 0 0;
  max-width: 54ch;
  color: color-mix(in srgb, var(--color-text) 58%, transparent);
}

.shot-phone,
.shot-desktop {
  width: 100%;
  height: auto;
  box-shadow: var(--shadow-md);
}
.shot-phone {
  max-width: 210px;
  border-radius: 20px;
}
.shot-desktop {
  max-width: 460px;
  border-radius: 10px;
}

/* --------------------------------------------------------------------------
   Founders
   -------------------------------------------------------------------------- */

.founders {
  padding: 72px 0 40px;
  scroll-margin-top: 72px;
}
.founders .section-title { max-width: 24ch; }

.founder-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 28px;
  margin-top: 48px;
}

.founder-head {
  display: flex;
  gap: 20px;
  align-items: center;
}

.founder-portrait {
  width: 88px;
  height: 88px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  background: var(--color-neutral-800);
}

.founder-name {
  font-size: 22px;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
}
.founder-role {
  font-size: 14px;
  line-height: 1.4;
  margin: 0;
  color: var(--color-accent-300);
}
.founder-bio {
  font-size: 15.5px;
  line-height: 1.65;
  margin: 24px 0 0;
  color: color-mix(in srgb, var(--color-text) 84%, transparent);
}
.founder-tags { margin-top: 22px; }

/* --------------------------------------------------------------------------
   How we work
   -------------------------------------------------------------------------- */

.practice { padding: 56px 0 80px; }
.practice .rule-fade { margin-bottom: 56px; }

.practice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 32px 64px;
}
.practice-title {
  font-size: 19px;
  margin: 0 0 10px;
}
.practice-body {
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
  color: color-mix(in srgb, var(--color-text) 76%, transparent);
}

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */

.contact {
  padding: 16px 0 96px;
  scroll-margin-top: 72px;
}
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 40px 72px;
  align-items: start;
}
.contact .section-title {
  font-size: clamp(26px, 3vw, 36px);
  max-width: 18ch;
}
.contact-lead {
  font-size: 16px;
  line-height: 1.65;
  max-width: 46ch;
  margin: 20px 0 0;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.field > label {
  display: block;
  font-size: 13px;
  margin-bottom: 6px;
  color: color-mix(in srgb, var(--color-text) 72%, transparent);
}

/* The honeypot. Off-screen rather than display:none — some bots skip
   display:none fields, and a real visitor never reaches it because it is
   also removed from the tab order and hidden from assistive technology. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-status { margin: 0; }
.form-status:empty { display: none; }

.form-error {
  font-size: 14px;
  line-height: 1.5;
  color: #f0a08c;
  margin: 0;
}
.field-error {
  display: block;
  font-size: 12.5px;
  line-height: 1.4;
  margin-top: 5px;
  color: #f0a08c;
}
.field-error:empty { display: none; }

.form-success { padding: 24px 0; }
.form-success-title {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 20px;
  margin: 0 0 8px;
  color: var(--color-accent-300);
}
.form-success-body {
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
  color: color-mix(in srgb, var(--color-text) 76%, transparent);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.footer {
  padding: 32px 0 48px;
  border-top: 1px solid var(--color-divider);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  justify-content: space-between;
  font-size: 13px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}

/* --------------------------------------------------------------------------
   Narrow viewports
   --------------------------------------------------------------------------
   The auto-fit grids above already collapse on their own. What needs help is
   the nav, which would otherwise overflow 320px, and the hero's optical
   negative margin, which costs real gutter once type is small.
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
  .nav {
    gap: 12px;
    padding: 12px 20px;
    flex-wrap: wrap;
    row-gap: 8px;
  }
  .nav-brand {
    font-size: 14px;
    margin-right: auto;
  }
  .nav-link { font-size: 13px; }

  .hero-title { margin-left: 0; }
  .stat-figure { margin-left: 0; }

  .products { padding: 64px 0 48px; }
  .product { padding: 32px 0; }
  .founders { padding: 56px 0 32px; }
  .practice { padding: 40px 0 56px; }
  .contact { padding: 16px 0 64px; }
  .card { padding: 22px; }
}

@media (max-width: 380px) {
  /* At this width the three nav links plus the toggle cannot share a row
     with the brand; let the links wrap under it rather than overflow. */
  .nav { gap: 10px; }
  .nav-link { font-size: 12.5px; }
  .lang-btn { padding: 4px 8px; }
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}