/* ============================================================
   AvNad public site — the Blade marketing surface.
   Ported from the design-system marketing_site UI kit onto the
   same tokens the SPAs use. Logical properties only (no
   margin-left / padding-right): dir="rtl" must mirror for free.
   ============================================================ */
@import url('tokens/fonts.css');
@import url('tokens/colors.css');
@import url('tokens/semantic.css');
@import url('tokens/typography.css');
@import url('tokens/layout.css');
@import url('tokens/base.css');

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

body.av {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.av a { text-decoration: none; }
/* Buttons are excluded: `.av a` outranks a single-class variant like
   `.av-btn--navy` (0,1,1 vs 0,1,0), and "inherit" painted their labels the
   surrounding text colour — navy on navy on every light card. */
.av a:not([class*='av-btn']) { color: inherit; }
.av a:not([class*='av-btn']):hover { text-decoration: underline; }
.av h1, .av h2, .av h3 { font-family: var(--font-display); line-height: var(--lh-heading); margin: 0; }
.av p { margin: 0; }
.av ul { margin: 0; padding: 0; list-style: none; }

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

.av-visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.av-skip {
  position: absolute;
  inset-block-start: -3rem;
  inset-inline-start: var(--space-4);
  z-index: 60;
  padding: var(--space-2) var(--space-4);
  background: var(--white);
  color: var(--text-strong);
  border-radius: var(--radius-md);
  font-weight: var(--fw-bold);
  transition: inset-block-start var(--dur-fast) var(--ease-out);
}
.av-skip:focus { inset-block-start: var(--space-3); }

.av-container {
  max-inline-size: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-8);
}

.av-section { padding-block: var(--space-10); }

/* The platform brief beside its diagram; stacked once the row is too narrow. */
.av-brief {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-8);
}
.av-brief__art { inline-size: 100%; block-size: auto; }

/* `#how` sits under the sticky header without this. */
:target { scroll-margin-block-start: calc(var(--header-h) + var(--space-4)); }

/* ---------- brand ---------------------------------------------------- */

/* The owner's artwork: the round mark, then the wordmark (both images). */
.av-brand { display: inline-flex; align-items: center; gap: var(--space-3); flex: none; }
.av-brand__mark { inline-size: 34px; block-size: 34px; flex: none; }
.av-brand__word { inline-size: auto; block-size: 30px; flex: none; }
.av-brand--sm .av-brand__mark { inline-size: 28px; block-size: 28px; }
.av-brand--sm .av-brand__word { block-size: 24px; }

.av-eyebrow {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--brand-blue);
}
.av-eyebrow.is-inverse { color: var(--blue-300); }

/* ---------- buttons -------------------------------------------------- */

.av-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  block-size: 44px;
  padding-inline: var(--space-6);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}
.av-btn:hover { text-decoration: none; }
.av-btn--sm { block-size: 36px; padding-inline: var(--space-4); }
.av-btn--lg { block-size: 52px; padding-inline: var(--space-7); font-size: var(--fs-body); }

.av-btn--primary { background: var(--brand-blue); color: var(--text-on-brand); }
.av-btn--primary:hover { background: var(--brand-blue-hover); }

.av-btn--navy { background: var(--brand-navy); color: var(--white); }
.av-btn--navy:hover { background: var(--navy-700); }

.av-btn--ghost {
  background: transparent;
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.28);
}
.av-btn--ghost:hover { background: rgba(255, 255, 255, 0.12); }

.av-link-strong { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--text-body); }

.av-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--brand-blue);
}

/* ---------- header --------------------------------------------------- */

.av-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 30;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border-block-end: 1px solid var(--border-subtle);
}
.av-header__inner {
  block-size: var(--header-h);
  display: flex;
  align-items: center;
  gap: var(--space-7);
}
.av-header__brand { display: inline-flex; align-items: center; }
.av-header__nav { display: flex; gap: var(--space-6); flex: 1; }
/* Same 24px floor as the footer: these are the primary way into the product
   and they sit next to each other, where a mis-tap is a wrong page. */
.av-header__nav a,
.av-header__actions a {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  display: inline-flex;
  align-items: center;
  min-block-size: 24px;
}
.av-header__actions { display: flex; align-items: center; gap: var(--space-4); }

/* ---------- hero ----------------------------------------------------- */

/*
 * The two rings and the round mark share one centre, so the rings read as
 * orbits around the mark at every width. Each is placed from that centre: its
 * inset is the centre's offset minus its own radius. The centre sits halfway
 * down, with the mark's far edge on the container's content edge — the line
 * the header's Get started button ends on.
 */
.av-hero {
  /* the centre, from the inline end: the container's gutter, then the mark's radius */
  --orbit-x: calc(max(var(--space-8), (100% - var(--container-max)) / 2 + var(--space-8)) + 9rem);
  --orbit-y: 50%; /* the centre, from the top */
  position: relative;
  overflow: hidden;
  color: var(--white);
  background: radial-gradient(120% 140% at 80% -10%, var(--navy-700), var(--navy-950) 60%);
}
.av-hero::before,
.av-hero::after {
  content: '';
  position: absolute;
  border-radius: var(--radius-circle);
  pointer-events: none;
}
.av-hero::before {
  inset-inline-end: calc(var(--orbit-x) - 20rem);
  inset-block-start: calc(var(--orbit-y) - 20rem);
  inline-size: 40rem;
  block-size: 40rem;
  border: 1px solid rgba(138, 190, 250, 0.14);
}
.av-hero::after {
  inset-inline-end: calc(var(--orbit-x) - 14.375rem);
  inset-block-start: calc(var(--orbit-y) - 14.375rem);
  inline-size: 28.75rem;
  block-size: 28.75rem;
  border: 1px solid rgba(138, 190, 250, 0.1);
}
/* The mark fills the open right half only where the copy leaves it open. */
.av-hero__mark { display: none; }
@media (min-width: 75rem) {
  .av-hero__mark {
    display: block;
    position: absolute;
    inset-inline-end: calc(var(--orbit-x) - 9rem);
    inset-block-start: calc(var(--orbit-y) - 9rem);
    inline-size: 18rem;
    block-size: 18rem;
    pointer-events: none;
  }
}
.av-hero__inner { position: relative; padding-block: var(--space-10) calc(var(--space-10) + var(--space-4)); }
.av-hero__copy { max-inline-size: 45rem; }
.av-hero h1 {
  color: var(--white);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  margin-block-start: var(--space-4);
}
.av-hero__body {
  margin-block-start: var(--space-5);
  max-inline-size: 35rem;
  font-size: var(--fs-lg);
  color: var(--slate-300);
}
.av-hero__ctas { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-block-start: var(--space-8); }

/* ---------- cards ---------------------------------------------------- */

.av-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-base) var(--ease-standard),
              transform var(--dur-base) var(--ease-standard);
}
.av-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); text-decoration: none; }

.av-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
.av-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }

.av-section__head { text-align: center; max-inline-size: 40rem; margin: 0 auto var(--space-8); }
.av-section__head h2 { font-size: var(--fs-h1); margin-block-start: var(--space-3); }

.av-row__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  margin-block-end: var(--space-8);
}
.av-row__head h2 { font-size: var(--fs-h1); margin-block-start: var(--space-3); }

/* service card */
/* The design's illustrated panel: brand art on a light ground, not an icon on
   a navy gradient. */
.av-service-card__panel {
  position: relative;
  block-size: 7.375rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue-300);
  background: var(--slate-50, var(--surface-sunken));
  border-block-end: 1px solid var(--border-subtle);
}
.av-service-card__panel img { max-inline-size: 96px; max-block-size: 66px; object-fit: contain; }
/* The owner's photo fills the whole panel, at the photos' own 16:9. */
.av-service-card__panel.has-photo { block-size: auto; aspect-ratio: 16 / 9; overflow: hidden; }
.av-service-card__panel.has-photo img {
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: none;
  max-block-size: none;
  object-fit: cover;
}
/* A coming-soon line reads as a dashed reservation, not a dimmed live tile. */
.av-service-card.is-coming-soon .av-service-card__panel { border: 1px dashed var(--border-default); }
.av-service-card.is-coming-soon .av-service-card__title { color: var(--text-muted); }
.av-service-card.is-coming-soon .av-service-card__tagline { color: var(--text-faint); }
.av-service-card.is-coming-soon .av-pill {
  position: static;
  inset: auto;
}
.av-service-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
  padding: var(--space-5);
}
.av-service-card__title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h4);
  color: var(--text-strong);
  letter-spacing: var(--ls-tight);
}
.av-service-card__tagline { font-size: var(--fs-sm); color: var(--text-muted); line-height: var(--lh-snug); flex: 1; }
.av-service-card__cta {
  margin-block-start: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--brand-blue);
}
.av-service-card.is-coming-soon .av-service-card__cta { color: var(--text-faint); }

.av-pill {
  position: absolute;
  inset-block-start: var(--space-3);
  inset-inline-end: var(--space-3);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}
.av-pill--gold { background: var(--gold-500); color: var(--navy-950); }
.av-pill--inline { position: static; display: inline-block; }

/* empty-leg card */
.av-leg-card__body { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5); }
.av-leg-card__route { display: flex; align-items: center; gap: var(--space-3); }
.av-leg-card__code {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h4);
  color: var(--text-strong);
}
.av-leg-card__arrow { color: var(--blue-500); flex-shrink: 0; }
.av-leg-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.av-leg-card__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--border-subtle);
}
.av-leg-card__label {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}
.av-leg-card__price {
  font-family: var(--font-mono);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h3);
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}
.av-leg-card__currency { font-size: var(--fs-sm); color: var(--text-muted); margin-inline-end: var(--space-1); }

/* ---------- navy band (how it works) --------------------------------- */

.av-band { background: var(--navy-900); color: var(--white); }
.av-band h2, .av-band h3 { color: var(--white); }
.av-band__inner { padding-block: var(--space-10); }

.av-step__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 3.25rem;
  block-size: 3.25rem;
  border-radius: var(--radius-lg);
  background: var(--navy-700);
  color: var(--blue-300);
  margin-block-end: var(--space-4);
}
.av-step__index {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--slate-500);
  margin-block-end: var(--space-2);
}
.av-step h3 { font-size: var(--fs-h4); }
.av-step p { margin-block-start: var(--space-2); font-size: var(--fs-sm); color: var(--slate-400); line-height: var(--lh-snug); }

/* ---------- trust strip ---------------------------------------------- */

.av-trust { background: var(--surface-sunken); }
.av-trust__item { padding: var(--space-6); background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); }
.av-trust__item h3 { font-size: var(--fs-h4); color: var(--text-strong); }
.av-trust__item p { margin-block-start: var(--space-3); font-size: var(--fs-sm); color: var(--text-muted); line-height: var(--lh-snug); }

/* ---------- closing CTA ---------------------------------------------- */

.av-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-7);
  padding: var(--space-10) var(--space-9);
  border-radius: var(--radius-2xl);
  background: linear-gradient(120deg, var(--blue-700), var(--blue-500));
  color: var(--white);
}
.av-cta h2 { color: var(--white); font-size: var(--fs-h1); }
.av-cta p { margin-block-start: var(--space-3); font-size: var(--fs-lg); color: rgba(255, 255, 255, 0.85); }
.av-cta__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.av-cta-section { padding-block-end: var(--space-10); }

/* ---------- page headers (service, legal, egy lemo) ------------------ */

.av-pagehead {
  background: linear-gradient(140deg, var(--navy-800), var(--navy-950));
  color: var(--white);
}
.av-pagehead__inner { padding-block: var(--space-9); }
.av-pagehead h1 { color: var(--white); font-size: var(--fs-h1); margin-block-start: var(--space-3); }
.av-pagehead p { margin-block-start: var(--space-4); max-inline-size: 40rem; color: var(--slate-300); font-size: var(--fs-lg); }
.av-pagehead__actions { margin-block-start: var(--space-7); display: flex; flex-wrap: wrap; gap: var(--space-4); }
/* Round 2 (#34): a service page's CMS brief and header image. */
.av-pagehead p.av-pagehead__brief { color: var(--white); font-size: var(--fs-body); }
.av-service-hero { margin-block-start: var(--space-8); }
.av-service-hero__img {
  display: block;
  inline-size: 100%;
  block-size: clamp(12rem, 30vw, 22rem);
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
/* A GIF cannot be paused from CSS; a visitor who asked for less motion gets the text head. */
@media (prefers-reduced-motion: reduce) {
  .av-service-hero__img[src$=".gif"] { display: none; }
}

/* ---------- prose ---------------------------------------------------- */

.av-prose { max-inline-size: 68ch; color: var(--text-body); }
.av-prose h2 { font-size: var(--fs-h3); color: var(--text-strong); margin-block: var(--space-7) var(--space-3); }
.av-prose h2:first-child { margin-block-start: 0; }
.av-prose h3 { font-size: var(--fs-h4); color: var(--text-strong); margin-block: var(--space-5) var(--space-2); }
.av-prose p { margin-block-end: var(--space-4); }
.av-prose ul { list-style: disc; padding-inline-start: var(--space-6); margin-block-end: var(--space-4); }
.av-prose li { margin-block-end: var(--space-2); }
.av-prose a { color: var(--text-link); text-decoration: underline; }
.av-prose em { color: var(--text-muted); }
.av-prose strong { font-weight: var(--fw-bold); color: var(--text-strong); }

/* ---------- forms & alerts ------------------------------------------- */

.av-form { max-inline-size: 28rem; margin-block-start: var(--space-7); }
.av-field { display: flex; flex-direction: column; gap: var(--space-2); }
.av-field label { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-strong); }
.av-field input {
  block-size: 44px;
  padding-inline: var(--space-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  color: var(--text-body);
  background: var(--surface-card);
}
.av-field textarea {
  min-block-size: 9rem;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: var(--lh-snug);
  color: var(--text-body);
  background: var(--surface-card);
  resize: vertical;
}
.av-field__error { font-size: var(--fs-sm); color: var(--status-danger-fg); }
.av-field__optional { font-weight: var(--fw-regular, 400); color: var(--text-muted); }
.av-form__actions { margin-block-start: var(--space-5); }
/* The contact form: four fields, so wider than a single-email signup and spaced. */
.av-form--wide { max-inline-size: 36rem; margin-block-start: 0; }
.av-form--wide .av-field + .av-field { margin-block-start: var(--space-5); }

/* Honeypot: off-screen for people, present for bots. */
.av-honeypot { position: absolute; inset-inline-start: -9999px; inline-size: 1px; block-size: 1px; overflow: hidden; }

.av-alert {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
}
.av-alert--success { background: var(--status-success-bg); color: var(--status-success-fg); }

.av-empty {
  padding: var(--space-9) var(--space-6);
  text-align: center;
  background: var(--surface-card);
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-lg);
}
.av-empty p { max-inline-size: 34rem; margin-inline: auto; color: var(--text-muted); }
.av-empty .av-btn { margin-block-start: var(--space-6); }

/* ---------- footer --------------------------------------------------- */

.av-footer { background: var(--navy-950); color: var(--slate-400); }
.av-footer__cols {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: var(--space-7);
  padding-block: var(--space-9) var(--space-8);
}
.av-footer__brand p { margin-block-start: var(--space-4); max-inline-size: 18rem; font-size: var(--fs-sm); }
.av-footer__heading {
  font-family: var(--font-ui);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--slate-500);
  margin-block-end: var(--space-4);
}
.av-footer__list { display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--fs-sm); }
/*
 * A 19px line of text is a poor tap target — WCAG 2.5.8 asks for 24px and a
 * thumb wants more. Padding the anchor rather than spacing the list keeps the
 * gap the eye sees while making the area the finger hits bigger, so the column
 * does not grow taller for it.
 */
.av-footer__list a {
  display: inline-flex;
  align-items: center;
  min-block-size: 24px;
  padding-block: var(--space-1);
}
.av-footer__bar { border-block-start: 1px solid var(--border-inverse); }
.av-footer__bar-inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: space-between;
  padding-block: var(--space-4);
  font-size: var(--fs-xs);
}

/* ---------- responsive ------------------------------------------------ */

@media (max-width: 60rem) {
  .av-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .av-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .av-footer__cols { grid-template-columns: 1fr 1fr; }
  .av-hero h1 { font-size: var(--fs-h1); }
  .av-brief { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 53.75rem) {
  .av-header__nav { display: none; }
  .av-header__inner { justify-content: space-between; }
}

@media (max-width: 38.75rem) {
  .av-container { padding-inline: var(--space-5); }
  .av-grid-4,
  .av-grid-3,
  .av-footer__cols { grid-template-columns: 1fr; }
  .av-row__head { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
  .av-cta { padding: var(--space-8) var(--space-6); }
  .av-section { padding-block: var(--space-8); }
  /* The lockup is wider than the old text wordmark: it steps down on a phone
     so the brand and the two ways in still share one row, unwrapped. */
  .av-header__inner { gap: var(--space-4); }
  .av-header__actions a { white-space: nowrap; }
  .av-header .av-brand { gap: var(--space-2); }
  .av-header .av-brand__mark { inline-size: 28px; block-size: 28px; }
  .av-header .av-brand__word { block-size: 22px; }
}

@media (max-width: 22.5rem) {
  .av-header__inner { gap: var(--space-3); padding-inline: var(--space-4); }
  .av-header__actions { gap: var(--space-3); }
  .av-header .av-brand { gap: 6px; }
  .av-header .av-brand__mark { inline-size: 24px; block-size: 24px; }
  .av-header .av-brand__word { block-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
    transform: none !important;
    scroll-behavior: auto !important;
  }
}