/* =========================================================
   Avori Website - Base Styles
   UI area affected: whole website foundation.
   Purpose: defines design tokens, global reset/defaults,
   base typography, default element behavior, and the shared
   .container width used by all page sections.
   Load order: first CSS file.
========================================================= */

/* Design tokens: colors, shadows, and max content width used across the UI. */
:root {
  --navy: #03182d;
  --navy-2: #061f3a;
  --ink: #071b36;
  --muted: #42536a;
  --line: #d8e0eb;
  --soft: #f5f8fc;
  --orange: #ff7600;
  --blue: #0b6eea;
  --card: #ffffff;
  --shadow: 0 18px 45px rgba(3, 24, 45, .16);
  --container: 1370px;
}
/* Global box model: keeps padding/borders inside declared element widths. */
* {
  box-sizing: border-box;
}
/* Smooth anchor scrolling for nav/footer links like #workflows and #faq. */
html {
  scroll-behavior: smooth;
}
/* Page-wide typography, text color, background, and line-height. */
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: #fff;
  line-height: 1.45;
}
/* Default link reset so navigation and CTA links inherit surrounding styling. */
a {
  color: inherit;
  text-decoration: none;
}

/* Form/button typography reset: makes controls match the site font. */
button,
input,
textarea,
select {
  font: inherit;
}

/* Button usability default: pointer cursor on clickable controls. */
button {
  cursor: pointer;
}

/* Media safety: prevents images/SVGs from overflowing their containers. */
img,
svg {
  max-width: 100%;
}

/* Image layout default: removes inline-image baseline spacing. */
img {
  display: block;
}

/* Main content canvas below the dark hero section. */
main {
  background: #fff;
}
/* Shared horizontal content wrapper used in almost every section. */
.container {
  width: min(var(--container), calc(100% - 72px));
  margin: 0 auto;
}
/* Orange text accent used in headlines and punctuation. */
.accent {
  color: var(--orange);
}
/* Hero headline typography for “Back-office work, handled.” */
h1 {
  margin: 0;
  max-width: 575px;
  font-size: clamp(48px, 4.7vw, 75px);
  line-height: .98;
  letter-spacing: -.045em;
  font-weight: 900;
}