/* =========================================================================
   Layout + components. Follows the reference component patterns:
   8px radius on every interactive element, 24px cards, three-layer blue
   shadows on elevated surfaces, product visuals offset against a decorative
   blob, 64px sticky nav, 48-64px section gaps, 1200px max width.
   ========================================================================= */

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

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-height) + 24px); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--cloud);
  color: var(--ink-navy);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { margin: 0; color: var(--ink-navy); font-weight: 700; letter-spacing: -.01em; }
p  { margin: 0; color: var(--slate-gray); }
ul { margin: 0; padding: 0; list-style: none; }
img, svg { max-width: 100%; display: block; }

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

:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-small); }

.wrap { width: 100%; max-width: var(--max-width); margin-inline: auto; padding-inline: var(--sp-24); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink-navy); color: #fff; padding: 12px 20px;
  border-radius: 0 0 var(--r-button) 0; font-weight: 600;
}
.skip:focus { left: 0; }

/* ---- Type helpers -------------------------------------------------------- */
.display { font-size: clamp(40px, 6.2vw, var(--text-display));    line-height: var(--lh-display);    font-weight: 700; }
.h2      { font-size: clamp(30px, 4.2vw, var(--text-heading));    line-height: var(--lh-heading);    font-weight: 700; }
.h3      { font-size: clamp(26px, 3.2vw, var(--text-heading-sm)); line-height: var(--lh-heading-sm); font-weight: 700; }
.h4      { font-size: var(--text-subheading); line-height: var(--lh-subheading); font-weight: 600; }
.lead    { font-size: var(--text-body-lg); line-height: var(--lh-body-lg); font-weight: 500; }
.small   { font-size: var(--text-body-sm); line-height: var(--lh-body-sm); }
.caption { font-size: var(--text-caption); line-height: var(--lh-caption); font-weight: 500; }
.eyebrow {
  font-size: var(--text-caption); font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--slate-gray);
}
.ink { color: var(--ink-navy); }

/* ---- Badge (pill) -------------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent-soft); color: var(--accent-ink);
  font-size: var(--text-caption); font-weight: 500; line-height: 1.5;
  padding: 6px 12px; border-radius: var(--r-pill);
}
.badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }

/* ---- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: inherit; font-size: var(--text-button); font-weight: 600;
  line-height: var(--lh-button); padding: 10px 24px;
  border-radius: var(--r-button); border: 1px solid transparent;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--accent); }
.btn-primary:hover { background: var(--accent-strong); }
.btn-dark { background: var(--ink-navy); }
.btn-dark:hover { background: #082943; }
/* Doubled class, so a descendant selector such as `.nav-links a` (0,1,1)
   cannot outrank it and leave dark text on a filled button. */
.btn.btn-primary, .btn.btn-dark { color: #fff; }
.btn-outline { background: transparent; color: var(--ink-navy); border-color: var(--hairline); }
.btn-outline:hover { border-color: var(--mist-gray); background: var(--paper); }
.btn-ghost { background: transparent; color: var(--ink-navy); padding-inline: 8px; }
.btn-ghost:hover { color: var(--accent); }
.btn-sm { font-size: var(--text-body-sm); padding: 8px 16px; }
.btn-block { width: 100%; }

/* ---- Navigation (64px, sticky) ------------------------------------------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  height: var(--nav-height);
  background: rgba(248, 249, 251, .86);
  backdrop-filter: saturate(1.6) blur(10px);
  border-bottom: 1px solid var(--hairline);
}
.nav-inner { display: flex; align-items: center; gap: var(--sp-16); height: var(--nav-height); }
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 20px; color: var(--ink-navy); letter-spacing: -.02em;
}
.brand:hover { text-decoration: none; }
.brand-mark { width: 32px; height: 32px; border-radius: var(--r-button); flex: none; }
/* The language switcher and the CTA sit outside .nav-links on purpose, so
   the descendant rule below can never reach them and repaint a filled
   button. */
.nav-links { display: flex; align-items: center; gap: var(--sp-24); margin-left: auto; }
.nav-links a { color: var(--slate-gray); font-size: var(--text-body-sm); font-weight: 500; }
.nav-links a:hover { color: var(--ink-navy); text-decoration: none; }
.nav-cta { flex: none; }

/* ---- Language switcher ----------------------------------------------------
   One link, not a pair of two letter codes. The pair set EN beside TR at
   caption size, which ran together into a single string rather than reading
   as two choices, and it left the visitor to work out which half was the
   page they were already on. This names the other language, written in that
   language, so the label says what following it does. The globe marks the
   control as a language choice rather than a fifth section link.
   -------------------------------------------------------------------------- */
.lang { display: inline-flex; flex: none; }
.lang a {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border: 1px solid var(--hairline);
  border-radius: var(--r-button); background: var(--paper);
  font-size: var(--text-body-sm); font-weight: 600;
  color: var(--slate-gray); line-height: 1.4; white-space: nowrap;
}
.lang a:hover {
  color: var(--ink-navy); background: var(--pebble);
  border-color: var(--slate-gray); text-decoration: none;
}
.lang-globe { width: 15px; height: 15px; flex: none; }

/* ---- Sections ------------------------------------------------------------ */
.section { padding-block: var(--section-gap); }
.section-tight { padding-block: var(--sp-48); }
.section-head { max-width: 720px; display: grid; gap: var(--sp-16); margin-bottom: var(--sp-48); }

/* ---- Hero ---------------------------------------------------------------- */
.hero { padding-top: var(--sp-72); padding-bottom: var(--sp-64); }
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-64); align-items: center;
}
.hero-copy { display: grid; gap: var(--sp-24); justify-items: start; }
.hero-copy .lead { max-width: 34em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-16); }
.hero-note { display: flex; flex-wrap: wrap; gap: var(--sp-16) var(--sp-24); }
.hero-note li { display: flex; align-items: center; gap: 8px; font-size: var(--text-body-sm); color: var(--slate-gray); }

/* ---- Decorative wash (atmosphere only, never a functional fill) ----------
   Kept far weaker than the reference. A strong blurred gradient behind every
   product shot is the single most recognisable trait of a generated landing
   page, so this reads as a tint on the paper rather than an effect.
   -------------------------------------------------------------------------- */
.visual { position: relative; }
.visual::before, .visual::after {
  content: ""; position: absolute; z-index: 0;
  border-radius: 50%; filter: blur(80px); opacity: .14; pointer-events: none;
}
.visual::before { width: 300px; height: 300px; background: var(--blob-a); top: -40px; right: -32px; }
.visual::after  { width: 240px; height: 240px; background: var(--blob-b); bottom: -48px; left: -24px; opacity: .10; }
.visual > * { position: relative; z-index: 1; }

/* ---- Cards --------------------------------------------------------------- */
.card {
  background: var(--paper); border: 1px solid var(--hairline);
  border-radius: var(--r-card); padding: var(--card-padding);
}
.product-card {
  background: var(--paper); border-radius: var(--r-product);
  box-shadow: var(--shadow-md); overflow: hidden;
}

/* ---- Trust strip (monochrome) --------------------------------------------
   Note: the reference assigns Mist Gray to labels of this kind, but at
   1.87:1 on Cloud that fails WCAG AA. Every text usage here takes Slate Gray
   (5.6:1) instead; Mist Gray is kept for borders and inert dots only.
   -------------------------------------------------------------------------- */
.trust { border-block: 1px solid var(--hairline); background: var(--paper); }
.trust-inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-16) var(--sp-40); padding-block: var(--sp-24); }
.trust-label { font-size: var(--text-caption); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--slate-gray); }
.trust-item { font-size: var(--text-body-sm); font-weight: 600; color: var(--slate-gray); letter-spacing: .01em; }

/* ---- Split sections (alternating) ---------------------------------------- */
.split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-64); align-items: center;
}
.split + .split { margin-top: var(--sp-96); }
.split-copy { display: grid; gap: var(--sp-16); align-content: start; }
.split.reverse .split-copy { order: 2; }
.split.reverse .visual { order: 1; }

.checks { display: grid; gap: var(--sp-16); margin-top: var(--sp-8); }
.checks li {
  display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start;
  font-size: var(--text-body); color: var(--slate-gray);
}
.checks strong { color: var(--ink-navy); font-weight: 600; }
.check-icon { width: 20px; height: 20px; margin-top: 3px; color: var(--accent); flex: none; }

/* ---- Plain two-column list ------------------------------------------------
   Replaces the usual grid of icon-in-a-rounded-square cards. Rules and plain
   headings look like a company writing down what its product does; the card
   grid looks like a template.
   -------------------------------------------------------------------------- */
.plainlist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-64); }
.plainlist > div { padding: var(--sp-24) 0; border-top: 1px solid var(--hairline); }
.plainlist h3 { font-size: var(--text-body-lg); font-weight: 600; line-height: 1.3; margin-bottom: 8px; }
.plainlist p { font-size: var(--text-body); line-height: 1.6; }

/* Two columns of running prose, used where a term list was cut. It keeps the
   measure of the list it replaces, so the section does not turn into one long
   line of text the width of the page, and it carries the same rule above so
   the page still reads as one system. */
.afterword {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--sp-64); row-gap: var(--sp-24);
  margin-top: var(--sp-64); padding-top: var(--sp-24);
  border-top: 1px solid var(--hairline);
}
.afterword p { font-size: var(--text-body); line-height: 1.6; }

/* ---- Stat row ------------------------------------------------------------ */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-24); }
.stat { display: grid; gap: 4px; }
.stat b { font-size: var(--text-heading-sm); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }
.stat span { font-size: var(--text-body-sm); color: var(--slate-gray); }

/* ---- Deploy / code ------------------------------------------------------- */
.deploy { background: var(--ink-navy); border-radius: var(--r-card); padding: var(--sp-48); color: #fff; }
.deploy h2, .deploy h3 { color: #fff; }
.deploy p { color: #b8cbdf; }
.deploy-grid {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: var(--sp-48); align-items: center;
}
.code {
  background: #082943; border: 1px solid rgba(255, 255, 255, .10);
  border-radius: var(--r-product); overflow: hidden;
}
.code-head {
  display: flex; align-items: center; gap: 8px;
  padding: 12px var(--sp-16); border-bottom: 1px solid rgba(255, 255, 255, .10);
  font-size: var(--text-caption); color: #8fadc9; font-weight: 500;
}
.code-dots { display: flex; gap: 6px; margin-right: 4px; }
.code-dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .18); }
.code pre {
  margin: 0; padding: var(--sp-16); overflow-x: auto;
  font-family: var(--font-mono); font-size: 13px; line-height: 1.7; color: #dce9f5;
}
.code .c { color: #7f9db8; }
.code .k { color: #8ecbff; }
.copy-btn {
  margin-left: auto; background: rgba(255, 255, 255, .08); color: #dce9f5;
  border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--r-small);
  font-family: inherit; font-size: var(--text-caption); font-weight: 600;
  padding: 4px 10px; cursor: pointer;
}
.copy-btn:hover { background: rgba(255, 255, 255, .16); }

/* ---- Contact / CTA ------------------------------------------------------- */
.cta-card {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-64); align-items: start;
  box-shadow: var(--shadow-md); border: none; padding: var(--sp-48);
}
.form { display: grid; gap: var(--sp-16); }
.field { display: grid; gap: 6px; }
.field label { font-size: var(--text-body-sm); font-weight: 600; color: var(--ink-navy); }
.field input, .field textarea, .field select {
  width: 100%; font-family: inherit; font-size: var(--text-body); color: var(--ink-navy);
  background: var(--paper); border: 1px solid var(--hairline);
  border-radius: var(--r-input); padding: 12px 14px;
}
.field textarea { resize: vertical; min-height: 120px; }
.field input::placeholder, .field textarea::placeholder { color: var(--slate-gray); }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--accent); box-shadow: var(--focus-ring);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-16); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.consent {
  display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start;
  font-size: var(--text-body-sm); color: var(--slate-gray);
}
.consent input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--accent); }
.form-msg { font-size: var(--text-body-sm); border-radius: var(--r-button); padding: 12px 14px; display: none; }
.form-msg.show { display: block; }
.form-msg.ok  { background: var(--accent-soft); color: var(--accent-ink); }
.form-msg.err { background: #fdecec; color: #8f1a1f; }

/* ---- Footer -------------------------------------------------------------- */
.footer { background: var(--cloud); border-top: 1px solid var(--hairline); padding-block: var(--sp-48); }
.footer-grid { display: flex; flex-wrap: wrap; gap: var(--sp-24); align-items: center; justify-content: space-between; }
.footer p, .footer a { font-size: var(--text-body-sm); }
.footer a { color: var(--slate-gray); }
.footer a:hover { color: var(--ink-navy); }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--sp-24); }
/* The two notices have their own row at the foot of the page, under a
   hairline, rather than trailing the end of a sentence about the product.
   That is where a visitor looks for them, and it keeps a legal document out
   of a list that otherwise only jumps between sections of this page. */
.footer-legal {
  display: flex; flex-wrap: wrap; gap: var(--sp-8) var(--sp-24);
  margin-top: var(--sp-32); padding-top: var(--sp-24);
  border-top: 1px solid var(--hairline);
}

/* =========================================================================
   Product mockups - hand-built, no screenshots
   ========================================================================= */
.mock { font-size: var(--text-body-sm); }
.mock-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 14px var(--sp-16); border-bottom: 1px solid var(--hairline);
  background: var(--paper);
}
.mock-bar b { font-size: var(--text-body-sm); font-weight: 700; }
.mock-bar .caption { color: var(--slate-gray); margin-left: auto; }
.mock-body { padding: var(--sp-16); display: grid; gap: 10px; }
.mock-row {
  display: grid; grid-template-columns: 10px 1fr auto; gap: 12px; align-items: center;
  padding: 12px; border: 1px solid var(--hairline); border-radius: var(--r-button);
}
.mock-row.is-quiet { background: var(--cloud); }
/* Both sit inside an inline <span> wrapper, so they must be blockified to
   stack instead of running together on one line. */
.mock-row-title { display: block; font-weight: 600; color: var(--ink-navy); line-height: 1.3; }
.mock-row-sub { display: block; font-size: var(--text-caption); color: var(--slate-gray); line-height: 1.45; }
.dot { width: 10px; height: 10px; border-radius: 50%; }
.dot-on   { background: #16a34a; box-shadow: 0 0 0 3px rgba(22, 163, 74, .14); }
.dot-off  { background: var(--mist-gray); }
.dot-warn { background: #d97706; box-shadow: 0 0 0 3px rgba(217, 119, 6, .14); }
.tag {
  font-size: var(--text-caption); font-weight: 600; padding: 3px 8px;
  border-radius: var(--r-pill); background: var(--pebble); color: var(--slate-gray);
}
.tag-accent { background: var(--accent-soft); color: var(--accent-ink); }

.meter { height: 6px; border-radius: var(--r-pill); background: var(--pebble); overflow: hidden; }
.meter i { display: block; height: 100%; border-radius: var(--r-pill); background: var(--accent); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font-size: var(--text-caption); font-weight: 600; color: var(--slate-gray);
  border: 1px solid var(--hairline); border-radius: var(--r-button);
  padding: 6px 10px; background: var(--paper);
}
.chip-on { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent-ink); }

.term {
  background: #082943; border-radius: var(--r-button); padding: 12px var(--sp-16);
  font-family: var(--font-mono); font-size: 12px; line-height: 1.9; color: #dce9f5;
}
.term span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.term .t { color: #7f9db8; }
.term .ok { color: #6ee7a8; }

/* Bar chart */
.chart { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; align-items: end; height: 120px; }
.chart i { display: block; background: var(--accent); border-radius: 3px 3px 0 0; opacity: .85; }
.chart i:nth-child(even) { opacity: .55; }
.chart-x { display: flex; justify-content: space-between; margin-top: 8px; }

/* Zone / layout editor */
.zones {
  display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr auto;
  gap: 8px; height: 220px;
}
.zone {
  border: 1.5px dashed var(--hairline); border-radius: var(--r-small);
  display: grid; place-items: center; text-align: center;
  font-size: var(--text-caption); font-weight: 600; color: var(--slate-gray);
  background: var(--cloud);
}
.zone-main {
  grid-row: 1 / 3; background: var(--accent-soft); border-color: var(--accent-line);
  color: var(--accent-ink); border-style: solid;
}
.zone-ticker { grid-column: 1 / 3; background: var(--pebble); }

/* Floating secondary card, offset over the main product card.

   It used to be absolutely positioned against .visual at right -24px and
   bottom -32px. That anchored its bottom edge and let its own height decide
   how far up into the card it reached, which came to 147px on Lima and 138px
   on Saga. Both hero mockups are shorter than that, so the card landed over
   the status tags of the last two rows: Distribution center and Meeting room
   B on Lima, modules 2 and 3 on Saga. The overlap is meant to break the
   corner of the product card and it read as breakage instead.

   The card is in flow now and is pulled up by a fixed 32px rather than by
   whatever is left after its own height. The overlap is the same 32px
   whatever the mockup above it holds, so no row can be covered by it again,
   and the mockup body under it carries enough bottom padding that the 32px
   lands on the card surface. The 24px hang past the right edge is unchanged
   and still matches the page padding exactly, so the card reaches the
   viewport edge at 1200px and never past it. */
.float {
  position: relative; z-index: 2; background: var(--paper);
  border-radius: var(--r-product); box-shadow: var(--shadow-lg);
  padding: var(--sp-16); display: grid; gap: 10px; width: 260px;
  margin-top: -32px;
}
.float-br { margin-left: auto; margin-right: -24px; }
.float-bl { margin-right: auto; margin-left: -24px; }

/* The two hero mockups are the only ones a floating card sits on, so they are
   the only ones that need room under the last row for it. 48px against the
   32px the card overlaps leaves 16px of clear surface between the two. */
.hero-grid .mock-body { padding-bottom: var(--sp-48); }

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 1040px) {
  .deploy-grid { grid-template-columns: 1fr; gap: var(--sp-32); }
}
@media (max-width: 900px) {
  :root { --section-gap: 48px; }
  .hero-grid, .split, .cta-card { grid-template-columns: 1fr; gap: var(--sp-40); }
  .split.reverse .split-copy, .split.reverse .visual { order: 0; }
  .split + .split { margin-top: var(--sp-64); }
  .nav-links { display: none; }
  .nav-inner { gap: var(--sp-16); justify-content: space-between; }
  .lang { margin-left: auto; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .deploy, .cta-card { padding: var(--sp-32); }
  .plainlist { grid-template-columns: 1fr; column-gap: 0; }
  .afterword { grid-template-columns: 1fr; column-gap: 0; }
  /* Under 900px the card stops floating and stacks under the mockup, so the
     negative margins and the auto side margin are reset together. Nothing
     overlaps the hero mockup here either, so it goes back to the same bottom
     padding every other mockup on the page has. */
  .float { width: auto; margin: var(--sp-16) 0 0; }
  .hero-grid .mock-body { padding-bottom: var(--sp-16); }
}
@media (max-width: 560px) {
  .plainlist { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .hero-actions .btn { width: 100%; }
}
/* The header button is dropped on the narrowest phones. Brand, switcher and
   button fit at 390px with nothing to spare, and at 360px the button loses
   its last word off the right edge. 420px keeps a margin over that. Nothing
   is lost by dropping it: the same call to action is the first thing in the
   hero, at full width, within the same screen. Measured in a 360px frame,
   because headless Chrome will not open a window below about 500px and a
   screenshot taken at a smaller size is a crop of a 500px page, not a phone. */
@media (max-width: 420px) {
  .nav-cta { display: none; }
}