/* WingMe website (index.html). Colours, radii, shadows and fonts come only from tokens.css.
 * Order: base · layout · components (buttons, chips, tags, phone) · header · sections in page order · footer · responsive. */

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--wm-bg); color: var(--wm-ink-2);
  font: 400 17px/1.6 var(--wm-font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img { display: block; max-width: 100%; }
h1, h2, h3 { margin: 0; color: var(--wm-ink); font-weight: 600; }
h1 { font-size: clamp(40px, 5.2vw, 68px); line-height: 1.04; letter-spacing: -.035em; }
h2 { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.1; letter-spacing: -.025em; text-wrap: balance; }
h3 { font-size: 20px; line-height: 1.3; letter-spacing: -.01em; }
p { margin: 0; }
a { color: var(--wm-blue); text-underline-offset: 3px; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--wm-blue); outline-offset: 2px; }
[hidden] { display: none !important; }
.i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

.skip { position: absolute; left: 16px; top: -100px; z-index: 100; padding: 12px 16px; border-radius: var(--wm-r); background: var(--wm-primary); color: var(--wm-bg); font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }
main:focus { outline: none; }

/* ---------- layout: container + 12-column grid ---------- */
.wrap { width: 100%; max-width: calc(var(--wm-maxw) + 2 * var(--wm-gutter)); margin: 0 auto; padding: 0 var(--wm-gutter); }
.g { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
.sec { padding: clamp(72px, 9vw, 128px) 0; }
.sec--alt { background: var(--wm-bg-2); }
.sec__head { max-width: 760px; margin-bottom: clamp(36px, 4.5vw, 56px); }
.eyebrow { margin-bottom: 16px; font: 500 12.5px/1.5 var(--wm-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--wm-muted); }
.lead { margin-top: 20px; font-size: 19px; line-height: 1.55; color: var(--wm-ink-2); max-width: 40em; }
.ph { position: relative; overflow: hidden; background: var(--wm-bg-3); }
.ph img { width: 100%; height: 100%; object-fit: cover; }
.ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--wm-r); background: var(--wm-bg); border: 1px solid var(--wm-line); color: var(--wm-ink); }
.ico .i { width: 22px; height: 22px; }

/* ---------- buttons, links, chips, tags ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 10px 18px;
  border: 1px solid transparent; border-radius: 12px; font: 600 15px/1.2 var(--wm-font); letter-spacing: -.005em;
  text-align: center; text-decoration: none; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s;
}
.btn .i { width: 18px; height: 18px; }
.btn--lg { min-height: 52px; padding: 12px 22px; font-size: 16px; }
.btn--primary { background: var(--wm-primary); color: var(--wm-bg); }
.btn--primary:hover { background: var(--wm-primary-hover); }
.btn--secondary { background: var(--wm-bg); color: var(--wm-ink); border-color: var(--wm-line); }
.btn--secondary:hover { border-color: var(--wm-ink-2); }
.btn--light { background: var(--wm-bg); color: var(--wm-ink); }
.btn--light:hover { background: var(--wm-bg-3); }
.textlink { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--wm-blue); font-weight: 600; text-decoration: none; }
.textlink:hover span { text-decoration: underline; }
.textlink .i { width: 18px; height: 18px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  min-height: 44px; padding: 8px 18px; border: 1px solid var(--wm-line); border-radius: 999px; background: var(--wm-bg);
  color: var(--wm-ink-2); font-size: 15px; font-weight: 500; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s;
}
.chip:hover { border-color: var(--wm-ink-2); color: var(--wm-ink); }
.chip[aria-pressed="true"] { background: var(--wm-blue-bg); border-color: var(--wm-blue); color: var(--wm-blue); }

.tag { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; background: var(--wm-bg-3); color: var(--wm-ink-2); font: 500 12.5px/1 var(--wm-mono); letter-spacing: .04em; text-transform: uppercase; }
.tag--blue { background: var(--wm-blue-bg); color: var(--wm-blue); }

/* language toggle: two-state segmented control */
.lang { display: inline-flex; border-radius: 999px; background: var(--wm-bg-3); }
.lang button {
  min-width: 48px; min-height: 44px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; cursor: pointer;
  color: var(--wm-muted); font: 500 13px/1 var(--wm-mono); letter-spacing: .04em;
}
.lang button:hover { color: var(--wm-ink); }
.lang button[aria-pressed="true"] { background: var(--wm-bg); color: var(--wm-ink); box-shadow: inset 0 0 0 4px var(--wm-bg-3), var(--wm-shadow-1); }

/* ---------- phone mockup (spec §7): device drawn at 1:1, scaled by --k ---------- */
.phone { --k: .66; --sb: 47px; position: relative; flex: none; width: calc(414px * var(--k)); height: calc(868px * var(--k)); }
.phone__device {
  position: absolute; top: 0; left: 0; width: 414px; height: 868px; padding: 12px; border-radius: 62px;
  background: var(--wm-ink); transform: scale(var(--k)); transform-origin: 0 0;
  box-shadow: inset 0 0 0 2px var(--wm-ink-2), var(--wm-shadow-3);
}
.phone__screen { position: relative; width: 390px; height: 844px; overflow: hidden; border-radius: 50px; background: var(--wm-bg); }
.phone__status {
  position: absolute; top: 0; left: 0; right: 0; z-index: 2; height: var(--sb); padding: 0 30px 0 44px;
  display: flex; align-items: center; justify-content: space-between; background: var(--wm-bg); color: var(--wm-ink);
}
.phone__time { font: 600 16px/1 var(--wm-font); letter-spacing: -.01em; }
.phone__island { position: absolute; top: 11px; left: 50%; width: 122px; height: 35px; margin-left: -61px; border-radius: 20px; background: var(--wm-ink); }
.phone__sys { display: flex; align-items: center; gap: 6px; }
.phone__sys svg { display: block; fill: currentColor; }
.phone__app { position: absolute; top: var(--sb); left: 0; width: 390px; height: calc(844px - var(--sb)); border: 0; background: var(--wm-bg); }

/* ---------- header ---------- */
.hdr { position: sticky; top: 0; z-index: 50; background: var(--wm-bg); border-bottom: 1px solid transparent; transition: border-color .2s; }
.hdr.is-scrolled, .hdr.is-open { border-bottom-color: var(--wm-line); }
.hdr__in { display: flex; align-items: center; gap: 24px; height: 72px; }
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--wm-ink); text-decoration: none; }
.brand img { width: 32px; height: 32px; }
.brand__word { font: 600 23px/1 var(--wm-font); letter-spacing: -.04em; }
.hdr__nav { margin-left: auto; }
.nav { display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; }
.nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 10px; color: var(--wm-ink-2); font-size: 15px; font-weight: 500; text-decoration: none; }
.nav a:hover { color: var(--wm-ink); background: var(--wm-bg-2); }
.hdr__tools { display: flex; align-items: center; gap: 12px; }
.hdr__menu {
  display: none; align-items: center; gap: 8px; min-width: 44px; min-height: 44px; padding: 0 14px; border: 1px solid var(--wm-line);
  border-radius: 12px; background: var(--wm-bg); color: var(--wm-ink); font-size: 15px; font-weight: 500; cursor: pointer;
}
.mnav { position: absolute; top: 100%; left: 0; right: 0; max-height: calc(100vh - 72px); overflow-y: auto; padding: 8px var(--wm-gutter) 24px; background: var(--wm-bg); border-bottom: 1px solid var(--wm-line); box-shadow: var(--wm-shadow-2); }
.mnav__list { margin: 0 0 16px; padding: 0; list-style: none; }
.mnav__list a { display: flex; align-items: center; min-height: 52px; border-bottom: 1px solid var(--wm-line-2); color: var(--wm-ink); font-size: 18px; font-weight: 500; text-decoration: none; }
.mnav__cta { width: 100%; }

/* ---------- hero: copy on the left, photo with the live phone on the right ---------- */
.hero { padding: clamp(16px, 2.2vw, 32px) 0 clamp(72px, 9vw, 128px); }
.hero__grid { --hang: 88px; align-items: center; }
.hero__text { grid-column: 1 / span 5; grid-row: 1; padding: 24px 0 var(--hang); }
/* the copy column is 5 of 12 columns here, so the h1 is a step smaller than the global scale to keep it at 4 lines in HR and EN */
.hero h1 { font-size: clamp(40px, 4.2vw, 62px); text-wrap: balance; }
.hero .lead { margin-top: 24px; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.facts { display: grid; gap: 12px; margin: 36px 0 0; padding: 24px 0 0; border-top: 1px solid var(--wm-line); list-style: none; }
.facts li { display: flex; align-items: flex-start; gap: 12px; color: var(--wm-ink); font-size: 15.5px; line-height: 1.45; font-weight: 500; }
.facts .i { width: 22px; height: 22px; margin-top: -1px; color: var(--wm-blue); }
.hero__visual { position: relative; grid-column: 6 / -1; grid-row: 1; align-self: stretch; display: flex; flex-direction: column; padding-bottom: var(--hang); }
.hero__photo { flex: 1 0 auto; min-height: 640px; min-height: clamp(560px, calc(100svh - 160px), 760px); border-radius: var(--wm-r-xl); }
.hero__photo img { position: absolute; inset: 0; object-position: 25% 45%; }
.hero__phone { position: absolute; left: clamp(20px, 2.4vw, 40px); bottom: 0; z-index: 2; }
.hero__phone .phone { --k: .66; }

/* ---------- why (problem → solution) ---------- */
.why { align-items: center; row-gap: 40px; }
.why__text { grid-column: 1 / span 5; }
.why__body { margin-top: 16px; }
.why__cmp { grid-column: 6 / span 7; }
.cmp__cap { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; color: var(--wm-ink); font-weight: 600; font-size: 16px; }
.cmp__cap .i { color: var(--wm-sea); }
.cmp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.cmp__card { display: flex; flex-direction: column; padding: 28px; border: 1px solid var(--wm-line); border-radius: var(--wm-r-l); background: var(--wm-bg); }
.cmp__card--wm { border-color: var(--wm-ink); box-shadow: var(--wm-shadow-2); }
.cmp__card .tag { align-self: flex-start; }
.cmp__card h3 { margin-top: 16px; }
.cmp__price { margin-top: 6px; color: var(--wm-ink); font-size: 28px; line-height: 1.15; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.seats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-width: 264px; margin: 22px 0 0; padding: 0; list-style: none; }
.seat { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.seat__box { display: grid; place-items: center; width: 100%; aspect-ratio: 1 / .9; border-radius: var(--wm-r); border: 1px solid var(--wm-line); background: var(--wm-bg-2); }
.seat__box .i { width: 24px; height: 24px; }
.seat--you .seat__box { background: var(--wm-ink); border-color: var(--wm-ink); color: var(--wm-bg); }
.seat--other .seat__box { background: var(--wm-blue-bg); border-color: var(--wm-blue-bg); color: var(--wm-blue); }
.seat--empty .seat__box { border-style: dashed; border-color: var(--wm-muted); background: var(--wm-bg); }
.seat__lbl { color: var(--wm-muted); font-size: 12.5px; line-height: 1.3; text-align: center; overflow-wrap: anywhere; }
.cmp__list { margin: 22px 0 0; padding: 0; list-style: none; }
.cmp__list li { padding: 11px 0; border-top: 1px solid var(--wm-line); color: var(--wm-ink); font-size: 15.5px; font-variant-numeric: tabular-nums; }
.cmp__note { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--wm-line); color: var(--wm-muted); font-size: 14px; }

/* ---------- how it works ---------- */
.how__main { grid-column: 1 / span 6; }
.how__aside { grid-column: 8 / span 5; }
.how__sticky { position: sticky; top: 96px; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.how__sticky .phone { --k: .72; }
.how__note { color: var(--wm-muted); font-size: 14px; text-align: center; }
.steps { margin: 0; padding: 0; list-style: none; }
/* room after the last step so the sticky phone stays pinned while step 4 is active */
.how__main .steps { padding-bottom: 18vh; }
.step { position: relative; min-height: 28vh; padding: 28px 0 28px 32px; border-left: 2px solid var(--wm-line); cursor: pointer; transition: border-color .2s; }
.step + .step { margin-top: 0; }
.step::before { content: ""; position: absolute; top: 33px; left: -8px; width: 14px; height: 14px; border: 2px solid var(--wm-line); border-radius: 999px; background: var(--wm-bg); transition: border-color .2s, background-color .2s; }
.step.is-active { border-left-color: var(--wm-blue); }
.step.is-active::before { border-color: var(--wm-blue); background: var(--wm-blue); box-shadow: 0 0 0 4px var(--wm-blue-bg); }
.step__label { font: 500 12.5px/1.5 var(--wm-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--wm-muted); }
.step.is-active .step__label { color: var(--wm-blue); }
.step h3 { margin-top: 8px; font-size: 24px; line-height: 1.25; letter-spacing: -.015em; }
.step__btn { display: block; width: 100%; padding: 7px 0; margin: -7px 0; border: 0; background: none; color: var(--wm-muted); font: inherit; letter-spacing: inherit; text-align: left; cursor: pointer; transition: color .2s; }
.step.is-active .step__btn, .step:hover .step__btn { color: var(--wm-ink); }
.step__body { margin-top: 10px; max-width: 32em; color: var(--wm-muted); transition: color .2s; }
.step.is-active .step__body { color: var(--wm-ink-2); }
.pager { display: flex; gap: 8px; }
.pager button { width: 44px; height: 44px; border: 1px solid var(--wm-line); border-radius: 999px; background: var(--wm-bg); color: var(--wm-ink-2); font: 500 14px/1 var(--wm-mono); cursor: pointer; }
.pager button:hover { border-color: var(--wm-ink-2); }
.pager button[aria-pressed="true"] { background: var(--wm-blue); border-color: var(--wm-blue); color: var(--wm-bg); }

/* ---------- flights ---------- */
.flt__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.flt__count { color: var(--wm-muted); font: 500 13px/1.4 var(--wm-mono); letter-spacing: .04em; text-transform: uppercase; }
.flt__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.flt__empty { padding: 48px 0; color: var(--wm-muted); text-align: center; }
.fcard { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--wm-line); border-radius: var(--wm-r-l); background: var(--wm-bg); transition: box-shadow .2s; }
.fcard:hover { box-shadow: var(--wm-shadow-2); }
.fcard__media { aspect-ratio: 3 / 2; }
.fcard__badges { position: absolute; top: 14px; left: 14px; right: 14px; display: flex; flex-wrap: wrap; gap: 6px; }
.badge { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 999px; background: var(--wm-bg); color: var(--wm-ink); font: 500 12.5px/1 var(--wm-mono); box-shadow: var(--wm-shadow-1); }
.badge .i { width: 15px; height: 15px; }
.badge--ink { background: var(--wm-ink); color: var(--wm-bg); font-family: var(--wm-font); }
.fcard__body { display: flex; flex: 1; flex-direction: column; padding: 22px 24px 24px; }
.fcard__info { flex: 1; }
.fcard__hub { display: flex; align-items: center; gap: 6px; color: var(--wm-muted); font-size: 14px; }
.fcard__hub .i { width: 16px; height: 16px; }
.fcard h3 { margin-top: 8px; }
.fcard__sum { margin-top: 8px; font-size: 15.5px; line-height: 1.55; }
.fcard__meta { display: flex; flex-direction: column; gap: 4px; margin: 14px 0 0; padding: 0; list-style: none; color: var(--wm-muted); font-size: 14px; }
.fcard__meta li { display: flex; align-items: center; gap: 8px; }
.fcard__meta .i { width: 16px; height: 16px; }
.fcard__foot { display: grid; gap: 16px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--wm-line); }
.fcard__foot .btn { width: 100%; }
.price { display: flex; align-items: baseline; gap: 8px; }
.price strong { color: var(--wm-ink); font-size: 24px; line-height: 1.1; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.price span { color: var(--wm-muted); font-size: 14px; }

/* ---------- who ---------- */
.who { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.wcard__media { aspect-ratio: 4 / 5; border-radius: var(--wm-r-l); }
.wcard h3 { margin-top: 20px; }
.wcard p { margin-top: 8px; max-width: 30em; }

/* ---------- safety ---------- */
.safety { align-items: start; row-gap: 40px; }
.safety__media { grid-column: 1 / span 5; position: sticky; top: 96px; }
.safety__photo { aspect-ratio: 4 / 5; border-radius: var(--wm-r-xl); }
.safety__text { grid-column: 7 / span 6; }
.points { margin: 36px 0 0; padding: 0; list-style: none; }
.point { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 18px; padding: 22px 0; border-top: 1px solid var(--wm-line); }
.point h3 { font-size: 18px; }
.point p { margin-top: 4px; font-size: 16px; }
.note { display: flex; align-items: flex-start; gap: 12px; margin-top: 12px; padding: 16px 18px; border: 1px solid var(--wm-line); border-radius: var(--wm-r); background: var(--wm-bg); color: var(--wm-ink-2); font-size: 14.5px; line-height: 1.5; }
.note .i { margin-top: 1px; color: var(--wm-blue); }

/* ---------- prices ---------- */
.eq { margin: 0; padding: clamp(24px, 3vw, 36px); border: 1px solid var(--wm-line); border-radius: var(--wm-r-l); background: var(--wm-bg); }
.eq__cap { margin-bottom: 24px; color: var(--wm-ink); font-weight: 600; }
.eq__row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px 24px; }
.eq__term { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.eq__val { color: var(--wm-ink); font-size: clamp(30px, 3.6vw, 48px); line-height: 1; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.eq__lbl { color: var(--wm-muted); font-size: 14px; line-height: 1.35; }
.eq__op { padding-top: .1em; color: var(--wm-muted); font: 400 clamp(26px, 3vw, 40px)/1 var(--wm-mono); }
.eq__term--result { margin: -14px 0; padding: 14px 18px; border-radius: var(--wm-r); background: var(--wm-bg-2); box-shadow: inset 0 0 0 1px var(--wm-line); }
.eq__term--result .eq__lbl { color: var(--wm-ink-2); }
.eq__fine { margin-top: 20px; color: var(--wm-muted); font-size: 14px; }
.eq__nohidden { display: flex; align-items: flex-start; gap: 12px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--wm-line); color: var(--wm-ink); font-weight: 500; }
.eq__nohidden .i { margin-top: 3px; color: var(--wm-ok); }
.ptable-wrap { margin-top: clamp(40px, 5vw, 64px); }
.ptable { width: 100%; border-collapse: collapse; font-size: 16px; }
.ptable caption { padding-bottom: 14px; color: var(--wm-ink); font-size: 20px; font-weight: 600; text-align: left; }
.ptable th, .ptable td { padding: 16px 14px; border-bottom: 1px solid var(--wm-line); text-align: left; vertical-align: baseline; }
.ptable th:first-child, .ptable td:first-child { padding-left: 0; }
.ptable th:last-child, .ptable td:last-child { padding-right: 0; }
.ptable thead th { padding-top: 12px; padding-bottom: 12px; border-bottom-color: var(--wm-ink); color: var(--wm-muted); font: 500 12px/1.4 var(--wm-mono); letter-spacing: .06em; text-transform: uppercase; }
.ptable tbody th { color: var(--wm-ink); font-weight: 600; }
.ptable .n { text-align: right; font-family: var(--wm-mono); font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; word-spacing: -.3em; }
.ptable thead .n { font-size: 12px; }
.ptable .c-seat { color: var(--wm-ink); font-weight: 500; }
.ptable tbody tr:hover { background: var(--wm-bg-2); }

/* ---------- app (dark band) ---------- */
.sec--ink { --on-ink-2: color-mix(in srgb, var(--wm-bg) 74%, var(--wm-ink)); --on-ink-line: color-mix(in srgb, var(--wm-bg) 16%, var(--wm-ink)); background: var(--wm-ink); color: var(--on-ink-2); }
.sec--ink h2 { color: var(--wm-bg); }
.sec--ink .eyebrow, .sec--ink .lead { color: var(--on-ink-2); }
.sec--ink :focus-visible { outline-color: var(--wm-blue-bg); }
.appsec { align-items: center; row-gap: 48px; }
.appsec__text { grid-column: 1 / span 5; }
.appsec__media { position: relative; grid-column: 7 / span 6; padding-bottom: 48px; }
.appsec__photo { aspect-ratio: 5 / 4; border-radius: var(--wm-r-xl); background: var(--wm-ink-2); }
/* decorative ticket screen: straddles the photo's left edge, inside the empty 6th column */
.appsec__phone { position: absolute; left: -72px; bottom: 0; z-index: 2; }
.appsec__phone .phone { --k: .5; }
.appsec__phone .phone__device { box-shadow: inset 0 0 0 2px var(--wm-muted), var(--wm-shadow-3); }
.appsec__phone .phone__app { pointer-events: none; }
.features { margin: 32px 0 36px; padding: 0; list-style: none; }
.features li { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; border-top: 1px solid var(--on-ink-line); color: var(--wm-bg); font-size: 16px; }
.features li:last-child { border-bottom: 1px solid var(--on-ink-line); }
.features .i { margin-top: 2px; color: var(--on-ink-2); }
.appsec__note { margin-top: 16px; font-size: 14px; }

/* ---------- operators ---------- */
.ops__banner { aspect-ratio: 3 / 1; margin-bottom: clamp(40px, 5vw, 64px); border-radius: var(--wm-r-xl); }
.ops { row-gap: 40px; align-items: start; }
.ops__main { grid-column: 1 / span 6; }
.ops__aside { grid-column: 8 / span 5; }
.vgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 28px; margin: 0 0 28px; padding: 0; list-style: none; }
.vgrid h3 { margin-top: 16px; font-size: 18px; }
.vgrid p { margin-top: 6px; font-size: 16px; }
.formcard { padding: clamp(24px, 3vw, 36px); border: 1px solid var(--wm-line); border-radius: var(--wm-r-l); background: var(--wm-bg); box-shadow: var(--wm-shadow-2); }
.formcard h3 { font-size: 22px; }
.formcard__lead { margin-top: 6px; color: var(--wm-muted); font-size: 15.5px; }
.field { display: flex; flex-direction: column; gap: 6px; margin-top: 18px; }
.field label { color: var(--wm-ink); font-size: 14.5px; font-weight: 500; }
.field__opt { color: var(--wm-muted); font-weight: 400; }
.field input, .field textarea {
  width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--wm-line); border-radius: 10px;
  background: var(--wm-bg); color: var(--wm-ink); font: 400 16px/1.4 var(--wm-font); transition: border-color .15s;
}
.field textarea { min-height: 112px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--wm-muted); }
.field input:hover, .field textarea:hover { border-color: var(--wm-faint); }
.field input:focus-visible, .field textarea:focus-visible { border-color: var(--wm-blue); outline-offset: 0; }
.field [aria-invalid="true"] { border-color: var(--wm-bad); background: var(--wm-bad-bg); }
.field__err { color: var(--wm-bad); font-size: 13.5px; }
.form__summary { margin-top: 18px; padding: 12px 14px; border-radius: 10px; background: var(--wm-bad-bg); color: var(--wm-bad); font-size: 14.5px; }
.form__submit { width: 100%; margin-top: 24px; }
.form-ok { padding: 8px 0; }
.form-ok:focus { outline: none; }
.form-ok__ico { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 18px; border-radius: 999px; background: var(--wm-ok-bg); color: var(--wm-ok); }
.form-ok__ico .i { width: 24px; height: 24px; }
.form-ok h3 { font-size: 22px; }
.form-ok p { margin: 8px 0 24px; }

/* ---------- FAQ ---------- */
.faq { row-gap: 32px; align-items: start; }
.faq__head { grid-column: 1 / span 4; position: sticky; top: 96px; }
.faq__list { grid-column: 6 / span 7; border-bottom: 1px solid var(--wm-line); }
.faq details { border-top: 1px solid var(--wm-line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 44px; padding: 22px 0; color: var(--wm-ink); font-size: 18px; line-height: 1.4; font-weight: 600; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .i { width: 22px; height: 22px; color: var(--wm-muted); transition: transform .2s; }
.faq details[open] summary .i { transform: rotate(45deg); }
.faq summary:hover .i { color: var(--wm-ink); }
.faq details p { max-width: 40em; padding: 0 44px 26px 0; margin-top: -6px; }

/* ---------- footer ---------- */
.ftr { padding: clamp(56px, 7vw, 88px) 0 32px; border-top: 1px solid var(--wm-line); background: var(--wm-bg-2); font-size: 15px; }
.ftr__top { row-gap: 40px; }
.ftr__brand { grid-column: 1 / span 4; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.ftr__tag { max-width: 22em; }
.ftr__col--1 { grid-column: 6 / span 2; }
.ftr__col--2 { grid-column: 8 / span 2; }
.ftr__col--3 { grid-column: 10 / span 3; }
.ftr__h { margin-bottom: 12px; color: var(--wm-muted); font: 500 12px/1.5 var(--wm-mono); letter-spacing: .08em; text-transform: uppercase; }
.ftr__col ul { margin: 0; padding: 0; list-style: none; }
.ftr__col a { display: inline-flex; align-items: center; min-height: 44px; color: var(--wm-ink); text-decoration: none; }
.ftr__col a:hover { color: var(--wm-blue); text-decoration: underline; }
.ftr__demo { display: flex; align-items: flex-start; gap: 12px; margin-top: 48px; padding: 16px 18px; border: 1px solid var(--wm-line); border-radius: var(--wm-r); background: var(--wm-bg); color: var(--wm-ink); font-weight: 500; }
.ftr__demo .i { margin-top: 2px; color: var(--wm-warn); }
.ftr__credits { margin-top: 40px; color: var(--wm-muted); font-size: 13.5px; }
.ftr__credits .ftr__h { margin-bottom: 4px; }
.credits { columns: 3 260px; column-gap: 32px; margin: 16px 0 0; padding: 0; list-style: none; }
.credits li { break-inside: avoid; padding: 3px 0; color: var(--wm-ink-2); overflow-wrap: anywhere; }
.credits a { margin-left: 4px; color: var(--wm-blue); }
.ftr__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--wm-line); color: var(--wm-muted); font-size: 14px; }

/* ---------- responsive ---------- */
@media (min-width: 1680px) {
  :root { --wm-maxw: 1320px; }
  .hero__phone .phone { --k: .72; }
  .how__sticky .phone { --k: .8; }
  .appsec__phone .phone { --k: .56; }
  .flt__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-height: 820px) and (min-width: 900px) {
  .how__sticky .phone { --k: .64; }
}
@media (max-width: 1180px) {
  .hdr__nav { display: none; }
  .hdr__menu { display: inline-flex; }
  .hdr__tools { margin-left: auto; }
}
@media (max-width: 1279px) {
  .hero__phone .phone { --k: .6; }
}
/* hero stacks: copy on top, photo full width with the phone in its lower-left corner */
@media (max-width: 1099px) {
  .hero__text { grid-column: 1 / -1; max-width: 760px; padding: 36px 0 0; }
  .hero h1 { font-size: clamp(40px, 5.2vw, 68px); }
  .hero .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .hero__visual { grid-column: 1 / -1; grid-row: 2; margin-top: 48px; }
  .hero__photo { flex: none; min-height: 0; aspect-ratio: 16 / 9; }
}
@media (max-width: 1100px) {
  .how__sticky .phone { --k: .64; }
  .flt__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .why__text { grid-column: 1 / -1; }
  .why__cmp { grid-column: 1 / -1; }
  .why__text .lead, .why__body { max-width: 40em; }
}
@media (max-width: 899px) {
  .g { grid-template-columns: minmax(0, 1fr); }
  .g > * { grid-column: 1 / -1 !important; }
  /* phone sits centred below the photo and overlaps its lower part (clear of the aircraft) */
  .hero__visual { align-items: center; margin-top: 40px; padding-bottom: 0; }
  .hero__photo { width: 100%; aspect-ratio: 4 / 3; border-radius: var(--wm-r-l); }
  .hero__phone { position: relative; left: auto; bottom: auto; margin-top: -30%; }
  .hero__phone .phone { --k: .62; }
  .how__aside { margin-top: 40px; }
  .how__sticky { position: static; }
  .how__main .steps { padding-bottom: 0; }
  .step { min-height: 0; }
  /* no scroll-driven phone on small screens: every step stays fully readable */
  .step .step__btn { color: var(--wm-ink); }
  .step .step__body { color: var(--wm-ink-2); }
  .safety__media { position: static; }
  .safety__photo { aspect-ratio: 4 / 3; border-radius: var(--wm-r-l); }
  .faq__head { position: static; }
  .appsec__photo, .ops__banner { aspect-ratio: 4 / 3; border-radius: var(--wm-r-l); }
  .appsec__media { padding-bottom: 0; }
  .appsec__phone { display: none; }
  .who { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .wcard__media { aspect-ratio: 4 / 3; }
  .ftr__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ftr__brand { grid-column: 1 / -1 !important; }
  .ftr__col { grid-column: auto !important; }
}
@media (max-width: 899px), (hover: none) {
  .phone__app { pointer-events: none; }
}
@media (max-width: 720px) {
  .hero .facts { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .flt__grid { grid-template-columns: minmax(0, 1fr); }
  .vgrid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  /* price equation → one line per term, operator in its own column */
  .eq__row { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 14px 6px; align-items: baseline; }
  .eq__op { grid-column: 1; padding: 0; font-size: 24px; }
  .eq__term { grid-column: 2; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
  .eq__val { font-size: 30px; }
  .eq__term--result { margin: 0 0 0 -12px; padding: 12px; }
}
@media (max-width: 640px) {
  .hdr__in { height: 64px; gap: 12px; }
  .hdr__cta { display: none; }
  .mnav { max-height: calc(100vh - 64px); }
  html { scroll-padding-top: 76px; }
  .lead { font-size: 18px; }
  .hero__ctas .btn { flex: 1 1 100%; }
  .cmp { grid-template-columns: minmax(0, 1fr); }
  .cmp__card { padding: 24px; }
  .faq summary { font-size: 17px; }
  .faq details p { padding-right: 0; }
  /* price table → one block per flight */
  .ptable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ptable tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 12px; padding: 16px 0; border-bottom: 1px solid var(--wm-line); }
  .ptable tbody tr:hover { background: none; }
  .ptable th, .ptable td { padding: 0 !important; border: 0; text-align: left !important; }
  .ptable tbody th { grid-column: 1 / span 2; font-size: 16px; }
  .ptable .c-seat { grid-column: 3; grid-row: 1; text-align: right !important; font-size: 16px; }
  .ptable .c-hub, .ptable .c-dur, .ptable .c-air { grid-row: 2; font-size: 14px; color: var(--wm-muted); }
  .ptable .c-hub { font-family: var(--wm-font); }
  .ptable td[data-label]::before { content: attr(data-label); display: block; color: var(--wm-muted); font: 500 11px/1.5 var(--wm-mono); letter-spacing: .06em; word-spacing: normal; text-transform: uppercase; }
  .ptable .c-seat::before { text-align: right; }
}
@media (max-width: 480px) {
  .hdr__menu-t { display: none; }
  .hdr__menu { padding: 0; width: 44px; justify-content: center; }
  .hero__phone .phone { --k: .58; }
  .brand__word { font-size: 21px; }
  .credits { columns: 1; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* The Galešnjak photo has a caption burned into its bottom-left corner: crop it out. */
img[data-slot="dest_galesnjak"] { transform: scale(1.14); transform-origin: 50% 15%; }