/* Incas landing — layout only. Colours, type, spacing and radii come from tokens.css;
   buttons, fields, cards, alerts and the diamond loader from incas-components.css. */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; }
h1, h2, h3, p, ul, dl, dd { margin: 0; }
ul[role="list"] { list-style: none; padding: 0; }
:target { scroll-margin-top: var(--space-6); }
a { color: var(--link); }
a:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 2px; }

.container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 var(--space-10); }

.skip-link { position: absolute; left: var(--space-4); top: -100px; z-index: 10; padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); background: var(--accent); color: var(--on-accent); font-weight: 500; }
.skip-link:focus { top: var(--space-4); }

/* ---------- Header ---------- */
.header { position: relative; z-index: 2; display: flex; align-items: center; gap: var(--space-8); height: 96px; }
.header__logo { display: inline-flex; flex: none; }
.header__logo img { display: block; height: 32px; width: auto; }
.header__cta { margin-left: auto; }

/* Brandbook navigation: lowercase, divided by "/", the current item and its slashes in the accent */
.slash-nav { display: flex; align-items: center; gap: var(--space-3); margin-left: auto; font-size: 14px; line-height: 20px; }
.slash-nav a { color: var(--on-brand-muted); text-decoration: none; padding: var(--space-1) 0; }
.slash-nav a:hover { color: var(--on-brand); }
.slash-nav a.is-active { color: var(--accent); }
.slash-nav__sep { color: var(--on-brand-muted); }
.slash-nav__sep.is-active { color: var(--accent); }
.slash-nav + .header__cta { margin-left: var(--space-4); }

/* ---------- Hero ---------- */
/* Dark ground with a purple glow behind the glass mark; the canvas is sized by the hero height
   so the mark keeps its proportions at every width. */
.hero {
  --hero-h: max(100svh, 680px);
  position: relative; display: flex; flex-direction: column; height: var(--hero-h); overflow: hidden;
  background: radial-gradient(52% 68% at 24% 50%, color-mix(in srgb, var(--purple) 55%, transparent) 0%, transparent 72%), var(--surface);
  color: var(--ink);
}
.hero__glass {
  position: absolute; z-index: 0; left: 0; top: 0; width: calc(var(--hero-h) * 950 / 792); height: 100%;
  display: block; pointer-events: none; opacity: 0; transition: opacity 1.2s ease; will-change: transform;
}
.hero.is-ready .hero__glass { opacity: 1; }
.hero__fallback { display: none; position: absolute; z-index: 0; left: -4%; top: 50%; width: min(52vw, 760px); height: auto; transform: translateY(-50%); pointer-events: none; }
.hero.no-gpu .hero__glass { display: none; }
.hero.no-gpu .hero__fallback { display: block; }
@media (prefers-reduced-motion: reduce) { .hero__glass { transition: none; } }

.hero__body { position: relative; z-index: 1; flex: 1; display: flex; align-items: center; justify-content: flex-end; padding-bottom: var(--space-12); }
.hero__text { display: flex; flex-direction: column; align-items: flex-end; max-width: min(660px, 52vw); text-align: right; }
.eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-6); font-size: 14px; line-height: 20px; font-weight: 500; color: var(--on-brand-muted); }
.eyebrow__dot { width: 10px; height: 10px; fill: var(--accent); }
.hero__title { font-family: var(--font-brand); font-size: clamp(44px, 4.4vw, 64px); line-height: 1.07; font-weight: 500; letter-spacing: -0.02em; color: var(--ink); }
.hero__title > span { display: block; }
.hero__title .hl { color: var(--accent); }
.hero__lead { margin-top: var(--space-6); max-width: 460px; font-size: 18px; line-height: 28px; color: var(--ink-muted); }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-4) var(--space-6); margin-top: var(--space-10); }
.hero__link { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 16px; line-height: 24px; font-weight: 500; color: var(--ink); text-decoration: none; transition: opacity .15s ease; }
.hero__link:hover { opacity: .75; }

.stats { display: grid; grid-template-columns: repeat(3, max-content); justify-content: end; gap: var(--space-10); margin-top: var(--space-12); padding-top: var(--space-5); border-top: 1px solid var(--border); }
.stats__item { display: flex; flex-direction: column-reverse; align-items: flex-end; gap: var(--space-1); }
.stats dt { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.stats dd { font-size: 32px; line-height: 40px; font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: var(--ink); }

/* ---------- Sections ---------- */
.section { position: relative; padding: var(--space-20) 0; background: var(--surface); color: var(--ink); }
.section--muted { background: var(--surface-muted); }
.section-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); align-items: end; gap: var(--space-6) var(--space-12); margin-bottom: var(--space-12); }
.kicker { margin-bottom: var(--space-3); font-size: 14px; line-height: 20px; font-variant-numeric: tabular-nums; color: var(--ink-subtle); }
.section-title { font-size: 40px; line-height: 48px; font-weight: 600; letter-spacing: -0.01em; }
.section-lead { font-size: 18px; line-height: 28px; color: var(--ink-muted); }

/* ---------- Solutions ---------- */
.solutions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.solution { display: flex; flex-direction: column; gap: var(--space-3); transition: border-color 0.15s ease; }
.solution:hover { border-color: var(--border-strong); }
.solution__icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-bottom: var(--space-5); border-radius: var(--radius-md); background: var(--surface-selected); color: var(--purple); }
.solution__title { font-size: 20px; line-height: 28px; font-weight: 600; }
.solution__text { font-size: 14px; line-height: 20px; color: var(--ink-muted); }

/* ---------- Advantages ---------- */
.advantages { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: var(--space-4); }
.advantage { display: flex; flex-direction: column; min-height: 400px; }
.advantage__top { display: flex; align-items: flex-start; justify-content: space-between; color: var(--black); }
.advantage__icon { color: var(--accent); }
.advantage__metric { margin-top: auto; padding-top: var(--space-10); font-family: var(--font-brand); font-size: 48px; line-height: 52px; font-weight: 500; letter-spacing: -0.015em; font-variant-numeric: tabular-nums; }
.advantage__metric span { font-family: var(--font-sans); font-size: 16px; line-height: 24px; font-weight: 500; letter-spacing: 0; }
.advantage__title { margin-top: var(--space-4); font-size: 24px; line-height: 32px; font-weight: 600; }
.advantage__text { margin-top: var(--space-2); font-size: 16px; line-height: 24px; }
.advantage__link { align-self: flex-start; margin-top: var(--space-6); }
.in-card--accent .advantage__metric { color: var(--on-accent); }
.in-card--brand .advantage__metric { color: var(--accent); }
.in-card--brand .advantage__metric span { color: var(--on-brand-muted); }
.in-card--brand .advantage__text { color: var(--on-brand-muted); }

/* ---------- Coverage ---------- */
.coverage { overflow: hidden; }
.coverage__bg { position: absolute; top: 50%; right: -18%; width: min(1100px, 90vw); height: auto; transform: translateY(-50%); pointer-events: none; opacity: 0.9; }
.coverage__inner { position: relative; }
.regions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--space-8); }
.region { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: var(--space-1) var(--space-3); padding: var(--space-6) 0; border-top: 1px solid var(--border); }
.region__dot { width: 12px; height: 12px; fill: var(--accent); align-self: center; }
.region__name { font-size: 20px; line-height: 28px; font-weight: 600; }
.region__count { grid-column: 2; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.totals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); margin-top: var(--space-12); padding-top: var(--space-10); border-top: 1px solid var(--border); }
.totals__item { display: flex; flex-direction: column-reverse; gap: var(--space-1); }
.totals dt { font-size: 16px; line-height: 24px; color: var(--ink-muted); }
.totals dd { font-family: var(--font-brand); font-size: 64px; line-height: 68px; font-weight: 500; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--accent); }

/* ---------- Contact ---------- */
.contact { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-16); align-items: start; }
.contact .section-lead { margin-top: var(--space-4); max-width: 440px; }
.contact__links { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-10); }
.contact__links a { display: inline-flex; align-items: center; gap: var(--space-3); font-size: 20px; line-height: 28px; font-weight: 500; color: var(--ink); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 6px; text-decoration-color: var(--border-strong); }
.contact__links a:hover { text-decoration-color: currentColor; }
.contact__links .in-icon { color: var(--purple); text-decoration: none; }
.contact__hint { display: inline-block; font-size: 14px; font-weight: 400; color: var(--ink-subtle); text-decoration: none; }
.lead-form { display: flex; flex-direction: column; gap: var(--space-5); }
.lead-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.optional { font-weight: 400; color: var(--ink-subtle); }
.in-field__control--area { height: auto; align-items: stretch; padding-top: var(--space-3); padding-bottom: var(--space-3); }
.in-field__control--area .in-field__input { min-height: 120px; resize: vertical; }
.lead-form .in-btn { margin-top: var(--space-1); }

/* ---------- Footer ---------- */
.footer { background: var(--surface); color: var(--ink); }
.footer__pattern { height: 120px; background: var(--surface-brand) url("../assets/incas-pattern-tile.svg") 0 0 / 64.69px 44.25px repeat; }
.footer__grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-10); padding-top: var(--space-16); padding-bottom: var(--space-12); }
.footer__brand img { display: block; height: 32px; width: auto; }
.footer__brand p { margin-top: var(--space-5); max-width: 360px; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.footer__heading { margin-bottom: var(--space-4); font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink-subtle); }
.footer__col ul { display: flex; flex-direction: column; gap: var(--space-2); }
.footer__col a { font-size: 16px; line-height: 24px; color: var(--ink); text-decoration: none; }
.footer__col a:hover { color: var(--link); }
.footer__legal { padding-top: var(--space-6); padding-bottom: var(--space-10); border-top: 1px solid var(--border); font-size: 12px; line-height: 18px; color: var(--ink-subtle); }
.footer__legal p + p { margin-top: var(--space-1); }

/* ---------- Responsive ---------- */
/* Stacked hero: the glass mark above the copy (tablets, phones, square windows) */
@media (max-width: 1100px), (max-aspect-ratio: 4/3) {
  .hero { height: auto; }
  .hero__glass, .hero__fallback { position: relative; order: 1; left: auto; top: auto; transform: none; width: 100%; height: clamp(360px, 56vh, 620px); }
  .hero__fallback { width: min(560px, 90%); height: auto; margin: 0 auto; }
  .hero > .header { order: 0; }
  .hero__body { order: 2; justify-content: flex-start; padding-top: var(--space-4); padding-bottom: var(--space-16); }
  .hero__text { align-items: flex-start; max-width: 640px; text-align: left; }
  .hero__actions { justify-content: flex-start; }
  .stats { justify-content: start; }
  .stats__item { align-items: flex-start; }
}

@media (max-width: 1100px) {
  .solutions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .advantages { grid-template-columns: 1fr 1fr; }
  .advantage--lead { grid-column: 1 / -1; min-height: 0; }
}
@media (max-width: 900px) {
  .container { padding: 0 var(--space-5); }
  .slash-nav { display: none; }
  .header { height: 80px; }
  .section { padding: var(--space-16) 0; }
  .section-head { grid-template-columns: 1fr; margin-bottom: var(--space-8); }
  .regions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact { grid-template-columns: 1fr; gap: var(--space-10); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
  .coverage__bg { right: -50%; width: 160vw; opacity: 0.6; }
}
@media (max-width: 600px) {
  .hero__lead { font-size: 16px; line-height: 24px; }
  .hero__actions .in-btn { flex: 1 1 100%; }
  .stats { gap: var(--space-6); }
  .stats dd { font-size: 28px; line-height: 36px; }
  .section-title { font-size: 32px; line-height: 40px; }
  .section-lead { font-size: 16px; line-height: 24px; }
  .solutions, .advantages, .lead-form__row { grid-template-columns: 1fr; }
  .advantage { min-height: 0; }
  .regions { grid-template-columns: 1fr; }
  .totals { grid-template-columns: 1fr; gap: var(--space-6); }
  .totals dd { font-size: 48px; line-height: 52px; }
  .contact__links a { font-size: 18px; }
  .in-card--pad-l { padding: var(--space-6); }
  .footer__pattern { height: 80px; }
}

[hidden] { display: none !important; }