/* ============================================================
   Elton DataUtils — public site foundation.

   Shared by every marketing/landing page under `templates/site_base.html`.
   Page-specific components live in their own stylesheet (e.g.
   `static/home/home.css`) and are loaded *after* this one.

   These pages do NOT load FAB's Bootstrap/Font Awesome — the admin console
   chrome has no place on a page anonymous visitors see — so this file is
   self-contained, reset included.

   Tokens sampled from the Figma file "Elton DataUltils":
     #394CFF  primary blue   (logo tile, buttons, chart series)
     #121D8D  deep indigo    (closing CTA band)
     #F4F4F4  alt surface    (Grayscale/Dark6)
     #E1E1E1  hairline       (Other/Line 1)
   The site commits to the light brand world of the design — every surface and
   text colour is painted explicitly, nothing inherits an ambient ground.
   ============================================================ */

:root {
  --blue:       #394CFF;
  --blue-hover: #2A3BE6;
  --blue-deep:  #121D8D;
  --blue-050:   #F2F4FF;
  --blue-100:   #DFE4FF;
  --blue-200:   #C2CBFF;

  --ink:        #0A0A0A;
  --ink-soft:   #3D3D3D;
  --muted:      #737373;
  --muted-soft: #9A9A9A;

  --white:      #FFFFFF;
  --surface:    #F4F4F4;
  --line:       #E1E1E1;
  --line-soft:  #EFEFEF;

  --teal:       #2FCF9E;
  --amber:      #F5B740;

  /* Display face reads as a geometric sans in the Figma (Poppins family).
     Font CDNs are blocked here, so this is the closest system stack.
     Swap in the licensed brand face when one is available. */
  --font-display: "Poppins", "Avenir Next", "Futura", "Century Gothic",
                  ui-rounded, system-ui, -apple-system, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  --page:   1140px;
  --gutter: 24px;
}

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

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; height: auto; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px;
}

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

/* Visually hidden but reachable — used by the skip link. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip-link:focus-visible {
  position: fixed;
  top: 12px; left: 12px;
  width: auto; height: auto;
  clip-path: none;
  z-index: 100;
  background: var(--white);
  padding: 10px 16px;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(10,14,40,.18);
}

/* ---------- Type scale ---------- */

h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
  letter-spacing: -0.02em;
}

h1 { font-size: 60px; line-height: 1.14; font-weight: 700; }
h2 { font-size: 40px; line-height: 1.22; font-weight: 700; }
h3 { font-size: 18px; line-height: 1.45; font-weight: 600; letter-spacing: -0.005em; }

.lead {
  font-size: 18px;
  line-height: 1.65;
  color: var(--muted);
  margin: 0;
  max-width: 62ch;
}

/* Bullet lists — small round marker, generous leading. */
.bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.bullets li {
  position: relative;
  padding-left: 22px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--muted);
}
.bullets li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 11px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted-soft);
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  padding: 12px 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  appearance: none;   /* .btn is on <button> too — drop the UA chrome */
  transition: background-color .18s ease, color .18s ease, transform .18s ease;
}
.btn-primary { background: var(--blue); color: var(--white); }
.btn-primary:hover { background: var(--blue-hover); }
.btn-light { background: var(--white); color: var(--blue-deep); padding: 15px 34px; font-size: 16px; }
.btn-light:hover { background: var(--blue-050); }
.btn-ghost { background: transparent; color: var(--muted); border-color: var(--line); }
.btn-ghost:hover { background: var(--surface); color: var(--ink); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .6; cursor: default; }
.btn[disabled]:active { transform: none; }

/* ---------- Site nav (Figma: 1440×80, space-between, 40px inline padding) ---------- */

/* min-height, not height: a fixed height lets a long brand or button label
   spill out of the bar instead of growing it. Nothing in here wraps, so the
   bar stays 80px until the labels themselves are shrunk at the breakpoints
   below. */
.nav {
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 40px;
  border-bottom: 1px solid var(--line);
  background: var(--white);
  position: sticky;
  top: 0;
  z-index: 20;
  transition: box-shadow .2s ease;
}
/* Set by site.js once the page scrolls, so the sticky bar separates from
   content that slides under it. */
.nav.is-scrolled { box-shadow: 0 6px 20px rgba(10,14,40,.07); }

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-decoration: none;
  color: var(--ink);
  white-space: nowrap;
}
.brand svg { flex: none; }

.nav-actions { display: flex; align-items: center; gap: 14px; flex: none; }

/* ---------- Language switcher ---------- */

.lang { position: relative; }
.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: 0;
  padding: 9px 10px;
  border-radius: 8px;
  font: inherit;
  font-size: 14px;
  color: var(--ink-soft);
  cursor: pointer;
  white-space: nowrap;
}
.lang-btn svg { flex: none; }
.lang-btn:hover { background: var(--surface); }

/* The trigger shows the full language name, and drops to the two-letter code
   once the bar gets tight. The menu always spells both out in full. */
.lang-short { display: none; }
.lang-caret { transition: transform .18s ease; }
.lang.open .lang-caret { transform: rotate(180deg); }

.lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 160px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(10,14,40,.12);
  display: none;
  z-index: 30;
}
.lang.open .lang-menu { display: block; }
.lang-menu a {
  display: block;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--ink-soft);
  text-decoration: none;
}
.lang-menu a:hover { background: var(--surface); }
.lang-menu a[aria-current="true"] { color: var(--blue); font-weight: 600; }

/* ---------- Section rhythm ---------- */

.section { padding-block: 100px; background: var(--white); }
.section--tint { background: var(--surface); }
.section--ruled { border-bottom: 1px solid var(--line); }
.section--tight { padding-block: 80px; }

.section-head { text-align: center; max-width: 760px; margin-inline: auto; }
.section-head .lead { margin-inline: auto; margin-top: 18px; text-align: center; }

/* Two-column feature row. Add `split--media-first` when the media column
   should stay above the copy once the row stacks. */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.split-copy { display: flex; flex-direction: column; gap: 26px; }

/* Three-up caption grid */
.trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: 56px;
}
.trio-item { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.trio-art {
  width: 100%;
  max-width: 320px;   /* keeps the art from ballooning once the trio stacks */
  aspect-ratio: 3 / 2;
  display: grid;
  place-items: center;
}
/* Artwork sizes itself and the box follows. `max-height: 100%` cannot do this
   job: the box's height comes from `aspect-ratio`, so a percentage height is
   cyclic, resolves to none, and the art overflows the box it sits in. */
.trio-art:has(img) { aspect-ratio: auto; }
.trio-art img {
  display: block;
  width: 100%;
  max-width: 240px;
  height: auto;
}
.trio-item p {
  margin: 0;
  text-align: center;
  font-size: 16px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 30ch;
}

/* ---------- Product-screenshot shells ---------- */
/* `device` is the tinted rounded frame; `card` is a white panel inside it. */

.device {
  background: var(--surface);
  border-radius: 28px;
  padding: 22px;
}
.card {
  background: var(--white);
  border-radius: 18px;
  padding: 22px;
  border: 1px solid var(--line-soft);
}
.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.card-head h3 { font-size: 17px; }
.card-head .dots { color: var(--muted-soft); letter-spacing: 2px; font-size: 15px; }

/* Small labelled progress meter. */
.meter { display: flex; align-items: center; gap: 10px; }
.meter-track { flex: 1; height: 7px; border-radius: 999px; background: var(--blue-100); overflow: hidden; }
.meter-fill { height: 100%; border-radius: 999px; background: var(--blue); }
.meter span { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---------- Closing CTA band ---------- */

.cta {
  position: relative;
  background: var(--blue-deep);
  color: var(--white);
  text-align: center;
  padding: 96px 24px 104px;
  overflow: hidden;
}
.cta-pattern { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .5; }
.cta-inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: 18px; }
/* Optional embed above the closing copy. `aspect-ratio` on the wrapper keeps
   the band's height stable before the iframe loads, so the CTA does not jump. */
.cta-video {
  width: min(100%, 905px);
  aspect-ratio: 16 / 9;
  margin-bottom: 26px;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(0,0,0,.25);
}
.cta-video iframe { display: block; width: 100%; height: 100%; border: 0; }
.cta h2 { color: var(--white); max-width: 26ch; }
.cta p { margin: 0; font-size: 16px; color: var(--blue-200); }
.cta .btn-light { margin-top: 14px; }

/* ---------- Demo request dialog ---------- */

/* Native <dialog>: the focus trap, Esc handling, backdrop and background
   `inert` all come from the element, so the script only opens, validates and
   posts. The UA stylesheet centres it and gives it a border and padding we do
   not want, hence the reset. */
.dlg {
  width: min(100% - 32px, 620px);
  max-height: min(88vh, 780px);
  padding: 0;
  border: 0;
  border-radius: 18px;
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 30px 80px rgba(10, 14, 40, .28);
  overflow: hidden;
}
.dlg::backdrop { background: rgba(10, 14, 40, .55); }

/* The panel scrolls, not the dialog, so the header and footer stay put while
   a long form moves under them. */
.dlg-panel { display: flex; flex-direction: column; max-height: inherit; }
/* `[hidden]` is only `display: none` in the UA stylesheet, which the author
   `display: flex` above outranks — so this has to say it again. */
.dlg-panel[hidden] { display: none; }

.dlg-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px 18px;
  border-bottom: 1px solid var(--line);
}
.dlg-head h2 { font-size: 22px; margin: 0; }

.dlg-close {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  appearance: none;
}
.dlg-close:hover { background: var(--surface); color: var(--ink); }

.dlg-body { padding: 22px 24px; overflow-y: auto; }
.dlg-intro { margin: 0 0 20px; font-size: 15px; line-height: 1.6; color: var(--muted); }

.dlg-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.dlg-field { display: block; margin-bottom: 16px; }
.dlg-row .dlg-field { margin-bottom: 16px; }
.dlg-field > span {
  display: block;
  margin-bottom: 7px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.dlg-field em { font-style: normal; color: var(--blue); }
.dlg-field small { font-weight: 400; color: var(--muted-soft); }

.dlg-field input,
.dlg-field textarea {
  display: block;
  width: 100%;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
  appearance: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.dlg-field textarea { resize: vertical; min-height: 64px; }
.dlg-field input::placeholder,
.dlg-field textarea::placeholder { color: var(--muted-soft); }
.dlg-field input:focus,
.dlg-field textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-100);
}
/* Applied by the script after a failed submit, never by :invalid on its own —
   :invalid would mark every required field red before the visitor has typed. */
.dlg-field input.is-invalid,
.dlg-field textarea.is-invalid { border-color: #D93A3A; }
.dlg-field input.is-invalid:focus { box-shadow: 0 0 0 3px rgba(217, 58, 58, .18); }

.dlg-error {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: #C42B2B;
}

.dlg-foot {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 24px 20px;
  border-top: 1px solid var(--line);
}
.dlg-foot--center { justify-content: center; }

.dlg-done { text-align: center; }
.dlg-done .dlg-body { padding: 40px 28px 26px; }
.dlg-done h2 { font-size: 22px; margin: 18px 0 10px; }
.dlg-done p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--muted); }
.dlg-tick { color: var(--blue); }

@media (max-width: 560px) {
  /* Two-up fields have nowhere to go at this width. */
  .dlg-row { grid-template-columns: 1fr; gap: 0; }
  .dlg-foot { flex-direction: column-reverse; }
  .dlg-foot .btn { width: 100%; }
}

/* ---------- Site footer (mirrors eltondata.com) ---------- */

.footer {
  background: var(--white);
  border-top: 1px solid var(--line);
  padding-block: 56px 44px;
}
.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.footer p { margin: 0; }
.footer-company { font-weight: 700; font-size: 16px; color: var(--ink); }
.footer-address,
.footer-registration { font-size: 15px; color: var(--ink-soft); max-width: 80ch; }

/* The badge SVG draws its own outlined box, so no border here. */
.footer-badge { display: inline-flex; margin-block: 12px; }
.footer-badge img { display: block; }

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px 18px;
  font-size: 15px;
}
.footer-links a { color: var(--blue); text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }
/* Pipe separators between links, matching eltondata.com. The pipe hangs off
   the left of its own link, so it only reads as a separator while the row is a
   single line — once the row wraps, the first link on each new line drags a
   stray leading pipe onto it. Below the width where the row still fits, the
   separators go and the gap does the work instead.

   The breakpoint is measured, not guessed: the longest row is Vietnamese at
   552px, plus the 24px `.wrap` gutters, so it needs a 600px viewport. 700px
   leaves headroom. Adding a footer link means re-checking that number. */
.footer-links a + a { position: relative; }
.footer-links a + a::before {
  content: "|";
  position: absolute;
  left: -11px;
  color: var(--muted-soft);
  text-decoration: none;
}
@media (max-width: 700px) {
  .footer-links { gap: 12px 22px; }
  .footer-links a + a::before { content: none; }
}

.footer-copyright { font-size: 14px; color: var(--muted); margin-top: 4px; }

/* ---------- Responsive ---------- */

@media (max-width: 980px) {
  h1 { font-size: 42px; }
  h2 { font-size: 32px; }
  .section { padding-block: 72px; }
  .nav { padding-inline: 20px; }
  .split { grid-template-columns: 1fr; gap: 44px; }
  .split .split-media { order: -1; }
  .split--media-first .split-media { order: 0; }
  .trio { grid-template-columns: 1fr; gap: 40px; }
  .device { max-width: 520px; margin-inline: auto; }
}

/* Below this the three nav items stop fitting side by side at full size, so
   the labels shrink rather than wrap. */
@media (max-width: 620px) {
  /* The device frame nested inside a card costs 88px of padding at full size.
     On a narrow screen that is ~40% of the available width taken from the
     content column, so the decorative nesting gives way to the copy. */
  .device { padding: 10px; border-radius: 20px; }
  .card { padding: 14px; border-radius: 14px; }

  .nav { padding-inline: 16px; gap: 10px; }
  .brand { font-size: 17px; gap: 8px; }
  .brand svg { width: 24px; height: 19px; }
  .nav-actions { gap: 2px; }
  .lang-btn { padding: 8px; gap: 5px; }
  .lang-full { display: none; }
  .lang-short { display: inline; }
  .nav .btn { padding: 11px 16px; font-size: 14px; }
}

/* Tighten the chrome before sacrificing any label — this buys back the ~14px
   that keeps the wordmark on a 375px iPhone SE. */
@media (max-width: 400px) {
  .nav { padding-inline: 12px; gap: 8px; }
  .nav-actions { gap: 0; }
  .lang-btn { padding: 6px; }
}

/* Narrowest phones: the wordmark finally gives way to the mark alone, so the
   demo button — the one thing the bar exists for — keeps its full label. */
@media (max-width: 368px) {
  .brand-name { display: none; }
}

@media (max-width: 560px) {
  h1 { font-size: 33px; }
  h2 { font-size: 26px; }
  .lead, .bullets li { font-size: 16px; }
  .section { padding-block: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}