:root{
  --navy:#0B1345;
  --blue:#2E4BFF;
  --blue-dark:#1E37D6;
  --paper:#F5F6FB;
  --surface:#FFFFFF;
  --ink:#10142B;
  --muted:#5C6484;
  --line:#E1E4F0;
  --green:#1F9A4C;
  --green-soft:#E4F6EA;
  --mint:#16A34A;
  --err:#C6392F;
  --red:#DC2626;
  --red-dark:#B91C1C;
  --blue-soft:#EEF1FF;
  --sky:#5B7CFF;      /* jasny niebieski: słowo mPasażer w nagłówku */
  --shadow: 0 10px 30px -16px rgba(11,19,69,0.18);
  --content:1080px;   /* szerokość bloku z treścią */
  --gutter:24px;      /* margines boczny strony */
}
/* Strona zawsze jasna — zgodnie z pozostałymi landing page'ami DelayFix,
   niezależnie od trybu ciemnego w systemie odwiedzającego. */

*{ box-sizing:border-box; }
html,body{ margin:0; }
body{
  font-family:'Inter', ui-sans-serif, system-ui, sans-serif;
  background:var(--paper);
  color:var(--ink);
  line-height:1.5;
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  padding-inline:var(--gutter);
  position:relative;
  overflow-x:hidden;
}
h1,h2,h3{
  font-family:'Sora', ui-sans-serif, system-ui, sans-serif;
  color:var(--navy);
  margin:0;
  letter-spacing:-0.01em;
}
a{ color:var(--blue-dark); }
:focus-visible{ outline:3px solid var(--blue); outline-offset:2px; }

/* ---- tło na całą stronę ----
   Domyślnie: widok z okna samolotu (assets/bg-okno.webp, proporcje 3:2).
   Zdjęcie jest o ~22% szersze od ekranu i dosunięte do prawej krawędzi,
   więc cały kadr jest przesunięty w lewo (lewa część ramy okna wychodzi poza
   ekran, skrzydło wypada bliżej środka). Wysokość zawsze pokrywa cały ekran. */
.bg-photo{
  position:fixed; inset:0;
  z-index:-2;
  background:var(--paper) url('bg-okno.webp') no-repeat;
  background-size:max(122vw, 150.5vh) auto;
  background-position:100% 55%;
}

/* Wariant z poprzednim zdjęciem (samolot od frontu, assets/bg-photo.webp).
   Żeby wrócić: w index.html dopisz klasę → <div class="bg-photo bg-photo--samolot" ...>
   Zdjęcie skaluje się tak, żeby kadłub zawsze wypadał przy lewej krawędzi tekstu.
   Liczby 0.770, 1.872 i 0.47 wynikają z proporcji tego zdjęcia (2000×757 px). */
.bg-photo.bg-photo--samolot{
  --L: max(var(--gutter), calc((100vw - var(--content)) / 2));
  --H: max(100vh, calc((100vw - var(--L)) / 1.872), calc(var(--L) / 0.47));
  background-image:url('bg-photo.webp');
  background-size:auto var(--H);
  background-position:calc(var(--L) - var(--H) * 0.770) center;
}
.bg-photo::after{
  content:"";
  position:absolute; inset:0;
  background:rgba(238,241,255,0.75); /* lekko błękitna nakładka, 75% krycia */
}

/* ---- top bar: ta sama szerokość co blok treści, logo wyrównane do lewej krawędzi ---- */
.topbar{
  max-width:var(--content);
  margin:0 auto;
  width:100%;
  padding:20px 0 6px;
  flex:none;
  display:flex; align-items:center;
}
.logo{ display:flex; align-items:center; }
.logo-img{ height:26px; width:auto; display:block; }

/* ---- main: rośnie razem z treścią (nic się nie nakłada przy małym oknie) ---- */
main{
  flex:1 0 auto;
  display:flex;
  align-items:center;
  padding-block:24px 32px;
}
.wrap{
  max-width:var(--content);
  margin:0 auto;
  width:100%;
  display:grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  /* górny rząd: treść | formularz; dolny rząd: ocena + social | "dane bezpieczne"
     — dolne ramki po obu stronach mają zawsze tę samą wysokość */
  grid-template-areas:
    "pitch card"
    "trust security";
  column-gap:56px;
  row-gap:14px;
  align-items:stretch;
}

/* blok od znaczka mPasażer do ostatniego kroku — wyśrodkowany w pionie względem formularza */
.pitch{ grid-area:pitch; display:flex; flex-direction:column; justify-content:center; min-width:0; }

/* znaczek mPasażer: granatowy, bez tła; szerokość = napis + padding */
.pitch .eyebrow{
  display:inline-flex; align-items:center; gap:6px;
  align-self:flex-start;
  width:fit-content;
  font-family:'Sora', sans-serif; font-weight:700; font-size:12px;
  color:var(--navy);
  background:none;
  border:1.5px solid var(--navy);
  border-radius:999px;
  padding:5px 12px;
  margin:0 0 14px;
}
.pitch .eyebrow svg{ width:13px; height:13px; flex:none; }
.pitch h1{
  line-height:1.22;
  font-weight:700;
}
.pitch h1 .h1-line1{
  display:block;
  font-size:clamp(24px, 2.6vw, 30px);
}
.pitch h1 .h1-line2{
  display:block;
  font-size:85%;
  margin-top:2px;
}
.pitch h1 .brand-word{ color:var(--sky); }
.pitch__lead{
  margin-top:14px;
  font-size:15.5px;
  color:var(--muted);
  max-width:46ch;
}

/* ---- process tracker: pionowo, proste linie ---- */
.steps{
  display:flex; flex-direction:column;
  margin-top:40px;
}
.step{ display:flex; align-items:center; gap:15px; }
.step .num{
  width:33px; height:33px; border-radius:50%;
  background:var(--surface); border:1.5px solid var(--blue); color:var(--blue);
  display:flex; align-items:center; justify-content:center;
  font-family:'Sora', sans-serif; font-weight:700; font-size:14px;
  flex:none;
  box-shadow:0 4px 10px -4px rgba(46,75,255,0.35);
}
.step-text{ display:flex; flex-direction:column; }
.step .label{ font-size:14.3px; font-weight:700; color:var(--ink); line-height:1.3; }
.step .sub{ font-size:12.5px; color:var(--muted); margin-top:2px; line-height:1.3; }
.step-connector{
  height:42px;
  margin-left:15.5px;
  border-left:2px dashed var(--line);
}

/* ---- dowód społeczny: ocena Google + social media (dolny rząd, lewa strona) ---- */
.trust-row{
  grid-area:trust;
  display:flex; flex-wrap:wrap; gap:12px;
  align-items:stretch;
  min-width:0;
}
.trust-card{
  display:flex; flex-direction:column; justify-content:center; gap:4px;
  padding:10px 14px;
  background:var(--surface);
  border-radius:12px;
  box-shadow:var(--shadow);
}
.rating-badge__top{ display:flex; align-items:center; gap:7px; }
.rating-score{
  font-family:'Sora', sans-serif; font-weight:700; font-size:15px; color:var(--ink);
}
.rating-stars{ display:flex; gap:1px; }
.rating-stars svg{ width:14px; height:14px; }
.rating-stars--gold{ color:#F5A623; }
.trust-card__label{ margin:0; font-size:11.5px; color:var(--muted); }

.social-links{ display:flex; gap:8px; }
.social-btn{
  width:32px; height:32px;
  border-radius:8px;
  background:var(--navy);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  text-decoration:none;
  transition:background .15s ease, transform .15s ease;
}
.social-btn svg{ height:15px; width:auto; fill:currentColor; }
.social-btn:hover{ background:var(--blue); transform:translateY(-1px); }

/* ---- registration form card ---- */
.card{
  grid-area:card;
  min-width:0;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:var(--shadow);
}
.card-head{
  display:flex; align-items:center; gap:12px;
  padding:18px 22px;
  background:var(--blue-soft);
  border-bottom:1px solid var(--line);
  border-radius:14px 14px 0 0;
}
.card-head .icon{
  width:34px; height:34px; border-radius:9px;
  background:var(--surface);
  display:flex; align-items:center; justify-content:center;
  flex:none;
}
.card-head .icon svg{ width:17px; height:17px; color:var(--navy); }
.card-head h2{ font-size:16.5px; font-weight:700; }
.card-head p{ margin:2px 0 0; font-size:12px; color:var(--muted); }

/* Pola formularza dopasowują się do szerokości samej karty (container query),
   a nie całego okna — dzięki temu nic się nie ściska w wąskiej kolumnie. */
.card-body{ padding:18px 22px 20px; container-type:inline-size; }
.grid2{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0 12px; }
.grid3{ display:grid; grid-template-columns:minmax(0,0.8fr) minmax(0,1.1fr) minmax(0,1fr); gap:0 12px; }
@container (max-width: 470px){
  .grid3{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .grid3 > .field:first-child{ grid-column:1 / -1; }
}
@container (max-width: 340px){
  .grid2, .grid3{ grid-template-columns:minmax(0,1fr); }
  .grid3 > .field:first-child{ grid-column:auto; }
}
.field{ margin-bottom:12px; min-width:0; }
.field label{
  display:block; font-size:12.5px; font-weight:600; color:var(--ink);
  margin-bottom:6px;
}

.input-wrap{ position:relative; }
.field-icon{
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  width:15px; height:15px; color:var(--muted);
  pointer-events:none;
}
.input-wrap::after{
  content:"";
  position:absolute; left:34px; top:8px; bottom:8px;
  width:1px; background:var(--line);
  pointer-events:none;
}
.field input{
  width:100%; min-width:0; padding:10px 12px 10px 44px; border-radius:8px;
  border:1.5px solid var(--line); background:var(--surface); color:var(--ink);
  font-family:'Inter',sans-serif; font-size:14.5px;
  text-overflow:ellipsis;
}
.field input[type="date"],
.field input[type="time"]{ padding-right:8px; min-height:43px; cursor:pointer; }
.field input::placeholder{ color:var(--muted); opacity:.6; }
.field input:focus{ border-color:var(--blue); }
.input-wrap:focus-within .field-icon{ color:var(--blue); }
.form-error{
  font-size:12.5px; color:var(--err); margin:-6px 0 10px; display:none;
}
.form-error.show{ display:block; }

/* ---- podświetlenie pustych/niepoprawnych pól na czerwono ---- */
.field.field--invalid label{ color:var(--err); }
.field.field--invalid input,
.field.field--invalid select{ border-color:var(--err); }
.field.field--invalid .input-wrap--phone{ border-color:var(--err); }
.checkbox-row.field--invalid{ color:var(--err); }

/* ---- telefon: flaga + numer kierunkowy (domyślnie Polska +48, do zmiany) ----
   Widoczna jest flaga i kod; pod spodem leży przezroczysty natywny <select>,
   więc lista krajów działa jak zwykła lista w każdej przeglądarce i na telefonie. */
.input-wrap--phone{
  display:flex; align-items:stretch;
  border:1.5px solid var(--line); border-radius:8px;
  background:var(--surface); overflow:hidden;
}
.input-wrap--phone::after{ content:none; }
.phone-country{
  position:relative; flex:none;
  display:flex; align-items:center; gap:6px;
  padding:0 6px 0 12px;
  cursor:pointer;
}
.phone-flag{
  width:18px; height:18px; flex:none; display:block;
  border-radius:5px;                       /* kwadrat z zaokrąglonymi rogami */
  box-shadow:0 0 0 1px rgba(11,19,69,0.12); /* delikatna obwódka — biała część flagi nie ginie */
  object-fit:cover;
}
.phone-code{ font-family:'Inter',sans-serif; font-size:13.5px; color:var(--ink); font-variant-numeric:tabular-nums; }
.phone-caret{ width:12px; height:12px; color:var(--muted); flex:none; }
.phone-country .phone-prefix{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:0; cursor:pointer;
  font-size:16px; /* bez automatycznego zoomu na iOS */
  border:none; appearance:none; -webkit-appearance:none;
}
.phone-country:focus-within .phone-caret{ color:var(--blue); }
.phone-country:has(.phone-prefix:focus-visible){ outline:2px solid var(--blue); outline-offset:-4px; border-radius:6px; }
.input-wrap--phone .phone-divider{
  width:1px; align-self:stretch; margin:8px 2px; background:var(--line); flex:none;
}
.input-wrap--phone input{
  border:none; border-radius:0; padding:10px 12px 10px 10px; background:transparent;
}
.input-wrap--phone:focus-within{ border-color:var(--blue); }

/* ---- podpowiedzi lotnisk (przewijana lista) ---- */
.airport-suggest{
  position:absolute; left:0; top:calc(100% + 4px);
  width:max(100%, 300px);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:10px;
  box-shadow:0 14px 34px -12px rgba(11,19,69,0.28);
  max-height:260px; overflow-y:auto; overscroll-behavior:contain;
  z-index:30;
  display:none;
}
.field:nth-child(2) .airport-suggest{ left:auto; right:0; }
.airport-suggest.show{ display:block; }
.airport-suggest button{
  all:unset; box-sizing:border-box;
  display:flex; flex-direction:column; gap:1px;
  width:100%; padding:8px 12px; cursor:pointer;
  border-bottom:1px solid var(--paper);
}
.airport-suggest button:hover,
.airport-suggest button.active{ background:var(--blue-soft); }
.airport-suggest .a-top{ display:flex; align-items:baseline; gap:8px; min-width:0; }
.airport-suggest .a-code{
  font-family:'Sora', sans-serif; font-weight:700; font-size:13px; color:var(--navy);
  flex:none; min-width:32px;
}
.airport-suggest .a-city{ font-size:13px; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.airport-suggest .a-country{ font-size:11.5px; color:var(--muted); margin-left:auto; flex:none; }
.airport-suggest .a-meta{ font-size:11.5px; color:var(--muted); padding-left:40px; }

.checkbox-row{
  display:flex; gap:9px; align-items:flex-start;
  font-size:12px; color:var(--muted); line-height:1.45;
  margin:8px 0 12px;
}
.checkbox-row input{ margin-top:2px; flex:none; width:16px; height:16px; accent-color:var(--blue); }
.checkbox-row a{ color:var(--blue-dark); text-decoration:underline; }

.hp-field{ position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }

.btn-primary{
  width:100%; border:none; border-radius:9px;
  background:var(--red); color:#fff;
  font-family:'Sora',sans-serif; font-weight:600; font-size:15px;
  padding:12px 16px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:8px;
  transition:background .15s ease;
}
.btn-primary svg{ width:17px; height:19px; flex:none; }
.btn-primary:hover{ background:var(--red-dark); }
.btn-primary:disabled{ opacity:.6; cursor:default; }

/* ---- animacja wysyłania: "Dodajemy Twój lot do bazy…" ---- */
#formFields.is-hidden{ display:none; }
.sending-state{ display:none; text-align:center; padding:26px 4px 18px; }
.sending-state.show{ display:flex; flex-direction:column; justify-content:center; animation:fade-in .25s ease; }
.sending-state h3{ font-size:16.5px; margin:18px 0 6px; }
.sending-state p{ font-size:13px; color:var(--muted); margin:0; }
.flight-track{ position:relative; height:34px; width:100%; max-width:260px; margin:0 auto; }
.track-line{
  position:absolute; left:10px; right:10px; top:50%;
  border-top:2px dashed var(--line);
}
.track-dot{
  position:absolute; top:50%; width:10px; height:10px; margin-top:-5px;
  border-radius:50%; background:var(--surface); border:2px solid var(--blue);
}
.track-dot--start{ left:0; }
.track-dot--end{ right:0; border-color:var(--green); }
.track-plane{
  position:absolute; top:50%; left:0;
  width:30px; height:30px; margin-top:-15px;
  display:flex; align-items:center; justify-content:center;
  color:var(--navy);
  animation:fly 1.6s cubic-bezier(.45,.05,.55,.95) infinite;
}
.track-plane svg{ width:22px; height:22px; transform:rotate(90deg); }
@keyframes fly{
  0%   { left:0; opacity:0; }
  12%  { opacity:1; }
  85%  { opacity:1; }
  100% { left:calc(100% - 30px); opacity:0; }
}
.dots span{ animation:blink 1.2s infinite both; }
.dots span:nth-child(2){ animation-delay:.2s; }
.dots span:nth-child(3){ animation-delay:.4s; }
@keyframes blink{ 0%, 80%, 100%{ opacity:.15; } 40%{ opacity:1; } }
@keyframes fade-in{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){
  .track-plane{ animation:none; left:calc(50% - 15px); }
  .dots span{ animation:none; opacity:1; }
}

.success-state{ display:none; text-align:center; padding:14px 4px; }
.success-state.show{ display:flex; flex-direction:column; justify-content:center; animation:fade-in .25s ease; }
.success-icon{
  width:44px; height:44px; border-radius:50%; margin:0 auto 12px;
  background:var(--green-soft); color:var(--green);
  display:flex; align-items:center; justify-content:center;
}
.success-state h3{ font-size:16.5px; margin-bottom:6px; }
.success-state p{ font-size:13px; color:var(--muted); margin:0; }

/* ---- APRA badge, bottom of the form card ---- */
.card-badge{
  display:flex; align-items:center; justify-content:center; gap:6px; flex-wrap:wrap;
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid var(--line);
  font-family:'Sora', sans-serif; font-size:12.5px;
  color:var(--ink);
}
.card-badge strong{ font-weight:700; }
.card-badge svg{ width:15px; height:15px; flex:none; color:var(--green); }

/* ---- security box, under the form card ---- */
.security-box{
  grid-area:security;
  display:flex; align-items:center; gap:10px;
  padding:12px 16px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:var(--shadow);
}
.security-box svg{ width:19px; height:19px; flex:none; margin-top:0; color:var(--green); }
.security-box p{ margin:0; font-size:12.5px; color:var(--muted); line-height:1.5; }

/* ---- footer strip ---- */
footer{
  flex:none;
  padding-block:14px;
  padding-bottom:calc(14px + env(safe-area-inset-bottom, 0px));
  border-top:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:6px;
  font-size:11px; color:var(--muted);
  max-width:var(--content); margin:0 auto; width:100%;
}
footer a{ color:var(--muted); text-decoration:underline; text-underline-offset:2px; }

/* ---- średnie ekrany ---- */
@media (max-width: 1100px){
  .wrap{ gap:36px; }
}
/* ---- tablet pionowo / telefon: jedna kolumna ---- */
@media (max-width: 880px){
  .wrap{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas: "pitch" "trust" "card" "security";
    row-gap:20px; max-width:620px;
  }
  .trust-row{ margin-bottom:8px; }
  .security-box{ margin-top:-6px; }
  .topbar, footer{ max-width:620px; }
  main{ align-items:flex-start; padding-block:14px 24px; }
  .pitch__lead{ max-width:none; }
  .steps{ margin-top:30px; }
  .bg-photo{ --content:620px; }
}
@media (max-width: 480px){
  :root{ --gutter:16px; }
  .card-head, .card-body{ padding-inline:16px; }
  .step-connector{ height:30px; }
  .trust-row > .trust-card{ flex:1 1 auto; }
}