/* RSoftware landing — page styles on top of the Nocturne design system.
   Every color, font and radius comes from the tokens in nocturne.css; the
   values written here are the page's own layout rhythm (the terminal hero,
   the process grid, the sectors band). */

:root { --mono: ui-monospace, SFMono-Regular, Menlo, "Cascadia Mono", monospace; }

body {
  margin: 0;
  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);
  text-wrap: pretty;
}

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

/* The page column: 1200px of content with the same gutter the nav uses. */
.shell { max-width: 1200px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 72px); }

/* — nav — */
.nav {
  padding-inline: max(clamp(20px, 5vw, 72px), calc((100% - 1200px) / 2 + clamp(20px, 5vw, 72px)));
  gap: 20px;
}
.nav a, .nav .nav-brand { white-space: nowrap; color: var(--color-text); font-family: var(--mono); }
.nav .nav-brand { letter-spacing: -0.02em; }
.nav a:hover { color: var(--color-accent); }
.lang-seg { margin-left: auto; }
.btn, .input, .input::placeholder, .seg-opt { font-family: var(--mono); }
/* Each language is its own URL, so the segmented control is links rather than
   radios — it works with JavaScript off and search engines can follow it. The
   current language keeps the checked look through aria-current. */
.lang-seg .seg-opt { color: var(--color-text); text-decoration: none; }
.lang-seg .seg-opt[aria-current] { color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); }
.lang-seg a.seg-opt:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); color: var(--color-text); }
/* Phone nav: the section links drop out, and what's left wraps to a second row
   rather than squeezing the language control down to nothing. */
@media (max-width: 720px) {
  .nav a:not(.btn) { display: none; }
  .nav { flex-wrap: wrap; row-gap: 12px; }
  .lang-seg { flex: none; }
  .nav .btn { margin-left: auto; }
}

/* — hero — */
.hero { padding: 112px 0 84px; }
.hero-prompt {
  font-family: var(--mono); font-size: 13px; line-height: 28px;
  letter-spacing: 0.04em; color: var(--color-accent); margin: 0 0 28px;
}
.hero-title {
  font-family: var(--mono); font-weight: 500;
  font-size: clamp(28px, 3.6vw, 44px); line-height: 1.38;
  letter-spacing: -0.03em; margin: 0;
}
.hero-title .type-l2 { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.hero-sub {
  font-size: 17px; line-height: 28px; max-width: 58ch; margin: 36px 0 0;
  color: var(--color-text); text-box: trim-both cap alphabetic;
}
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }

/* — the typed headline —
   Each line is a fixed-width box that grows from 0 to the exact character
   count of the copy showing, so the text appears to be typed. --l1ch / --l2ch
   are set per language on <html> by build.mjs, so the effect needs no
   JavaScript at all. */
@keyframes typeL1 { from { width: 0; } to { width: min(var(--l1ch, 36ch), 100%); } }
@keyframes typeL2 { from { width: 0; } to { width: min(var(--l2ch, 14ch), 100%); } }
@keyframes caretOff { to { border-color: transparent; } }
@keyframes blink { 50% { border-color: transparent; } }
@keyframes riseIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.type-l1, .type-l2 {
  display: block; width: 0; overflow: hidden; white-space: nowrap;
  border-right: 3px solid var(--color-accent);
}
/* Timing is deliberately shorter than the prototype's (1.9s after a 0.5s wait):
   the headline is this page's Largest Contentful Paint, so every millisecond
   the typing spends is a millisecond added to the LCP search engines measure.
   For the same reason the headline no longer takes the hero's fade-in —
   starting at opacity 0 delays that same paint. */
.hero-title .type-l1 { animation: typeL1 1.25s steps(30, end) .15s both, blink .8s step-end .15s 2, caretOff 0s linear 1.45s forwards; }
.hero-title .type-l2 { animation: typeL2 .55s steps(13, end) 1.5s both, blink .9s step-end 2.05s infinite; }

.nav, .hero-sub, .hero-cta { animation: riseIn .7s cubic-bezier(.2, .7, .2, 1) both; }
.hero-sub { animation-delay: .18s; }
.hero-cta { animation-delay: .27s; }
.btn, .nav a, .seg-opt, .footer a { transition: color .18s ease, border-color .18s ease, background-color .18s ease; }

/* The typed lines are a single unwrapped row clipped to an animating width, so
   they only work where the whole line fits. Below 720px (and whenever reduced
   motion is asked for) the headline is shown whole instead: wrapping, caret
   off, no typing. */
@media (prefers-reduced-motion: reduce) {
  .nav, .hero-sub, .hero-cta { animation: none; opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce), (max-width: 720px) {
  .hero-title .type-l1, .hero-title .type-l2 {
    width: auto; white-space: normal; overflow: visible;
    animation: none; border-right-color: transparent;
  }
}

/* — section furniture — */
/* The kicker is a heading where it names a section (services, FAQ) and a
   paragraph where it's an eyebrow over one — hence the explicit weight, so
   both render identically. */
.kicker {
  display: block; font-family: var(--mono); font-size: 13px; line-height: 14px;
  font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-accent); margin: 0 0 42px;
}

/* Visible only once focused, so keyboard users can jump the nav. */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 10;
  font-family: var(--mono); font-size: 13px;
  padding: 8px 14px; border-radius: var(--radius-md);
  background: var(--color-surface); color: var(--color-accent);
  box-shadow: var(--shadow-md);
}
.skip:focus { left: 12px; top: 12px; }
/* Nocturne's rules fade out over 48px at each end rather than stopping clean. */
.rule {
  height: 1px;
  background: linear-gradient(to right, transparent, var(--color-neutral-700) 48px calc(100% - 48px), transparent);
}
.rule-divider {
  height: 1px; border: 0; margin: 0;
  background: linear-gradient(to right, transparent, var(--color-divider) 48px calc(100% - 48px), transparent);
}
.item-title {
  font-family: var(--font-heading); font-weight: 500; font-size: 24px;
  line-height: 28px; letter-spacing: -0.01em; margin: 0;
  text-box: trim-both cap alphabetic;
}
.lead {
  font-family: var(--font-heading); font-weight: 500;
  font-size: clamp(24px, 2.4vw, 32px); line-height: 42px; letter-spacing: -0.012em;
  margin: 0; max-width: 30ch; text-box: trim-both cap alphabetic;
}
.lead-body {
  font-size: 15.5px; line-height: 28px; margin: 16px 0 0; max-width: 52ch;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
  text-box: trim-both cap alphabetic;
}

/* — services — */
.services { padding: 28px 0 56px; }
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 28px clamp(24px, 4vw, 56px);
}
.item-body {
  font-size: 15.5px; line-height: 28px; margin: 16px 0 0;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
  max-width: 44ch; text-box: trim-both cap alphabetic;
}

/* — sectors band —
   One line between two hairlines: no ground of its own, so it doesn't read as
   the odd section out. */
.band { padding: 14px 0 0; }
.band-inner { padding: 28px 0; }
.band-title {
  font-family: var(--font-heading); font-weight: 500; font-size: 20px;
  line-height: 28px; letter-spacing: -0.01em; margin: 0; max-width: 34ch;
  text-box: trim-both cap alphabetic;
}
.band-sectors {
  display: flex; flex-wrap: wrap; gap: 8px 16px;
  font-family: var(--mono); font-size: 13px; line-height: 28px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-accent); margin: 12px 0 0;
}
.band-sep { color: var(--color-neutral-600); }

/* — process — */
.process { padding: 56px 0 70px; }
.process-title {
  font-family: var(--font-heading); font-weight: 500;
  font-size: clamp(28px, 3.4vw, 44px); line-height: 1.18; letter-spacing: -0.014em;
  margin: 0 0 28px; max-width: 26ch; text-box: trim-both cap alphabetic;
}
.step {
  display: grid;
  grid-template-columns: minmax(64px, 120px) minmax(0, 300px) minmax(0, 1fr);
  gap: 28px clamp(24px, 4vw, 72px);
  align-items: baseline; padding: 42px 0;
}
.step-num {
  font-family: var(--mono); font-weight: 500; font-size: 14px; line-height: 28px;
  color: var(--color-accent); margin: 0; text-box: trim-both cap alphabetic;
}
.step-body {
  font-size: 15.5px; line-height: 28px; margin: 0;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
  max-width: 52ch; text-box: trim-both cap alphabetic;
}
/* — FAQ —
   Same three-column rhythm as the process, with the accent mark standing in
   for the step numeral. The questions are also emitted as FAQPage structured
   data, which is what search engines and assistants quote. */
.faq { padding: 56px 0 70px; }
.qa {
  display: grid;
  grid-template-columns: minmax(64px, 120px) minmax(0, 300px) minmax(0, 1fr);
  gap: 28px clamp(24px, 4vw, 72px);
  align-items: baseline; padding: 42px 0;
}
.qa-mark {
  font-family: var(--mono); font-weight: 500; font-size: 14px; line-height: 28px;
  color: var(--color-accent); margin: 0; text-box: trim-both cap alphabetic;
}

/* Three columns don't fit a phone — the mark, the title and the body stack,
   keeping the same 42px band of air around each row. This has to come after
   both grids are defined, or the three-column rule wins on source order. */
@media (max-width: 720px) {
  .step, .qa { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .step-num, .qa-mark { line-height: 20px; }
}

/* — team / contact — */
.team { padding: 70px 0; }
.contact { padding: 70px 0 56px; }
.contact-body { max-width: 56ch; }
.contact-form {
  display: flex; flex-direction: column; gap: 12px;
  max-width: 420px; margin-top: 28px;
}
.contact-form .input { width: 100%; min-height: 36px; }
.contact-form .btn { min-height: 36px; align-self: flex-start; }
.contact-form .input[aria-invalid="true"] { border-color: var(--color-accent-400); }
.form-status {
  font-size: 13px; line-height: 28px; margin: 12px 0 0; max-width: 56ch;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
}
.form-status[data-state="error"] { color: var(--color-accent-300); }
.form-status[data-state="sent"] { color: var(--color-accent); }

/* — footer — */
.footer {
  font-family: var(--mono); padding: 56px 0;
  display: flex; gap: 28px; flex-wrap: wrap;
  justify-content: space-between; align-items: baseline;
  font-size: 13px; line-height: 28px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.footer-links { display: flex; gap: 24px; flex-wrap: wrap; }