/*
 * Agrobex Landing - style landingu.
 *
 * Przeniesione 1:1 z source/global.css prototypu. Zmiany świadome:
 *  - rodziny fontów nazwane agx-display / agx-text (prototyp aliasował pliki Silka),
 *  - checkbox zgody to natywny input (działa bez JS) stylowany na wygląd z prototypu,
 *  - selektory zależne od tekstu zastąpione atrybutami data-* (niezależność od języka),
 *  - dodane :focus-visible i [hidden] (wymagane w produkcji wg specyfikacji, §6).
 */

@font-face{font-family:'agx-display';src:url('../fonts/Silka-SemiBold.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'agx-display';src:url('../fonts/Silka-RegularItalic.woff2') format('woff2');font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:'agx-text';src:url('../fonts/Silka-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'agx-text';src:url('../fonts/Silka-Medium.woff2') format('woff2');font-weight:500;font-display:swap}

html,body{margin:0;height:100%;background:#F4F1EB}
body{color:#353B66;font-family:'agx-text',system-ui,sans-serif;font-size:15.5px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow:hidden}
*{box-sizing:border-box}
a{color:inherit;text-decoration:none;transition:color .4s}
a:hover{color:#86A0C6}
::selection{background:#353B66;color:#F4F1EB}
input,button{font:inherit;color:inherit}
input:focus{outline:none;border-bottom-color:#353B66 !important}
::placeholder{color:rgba(53,59,102,.4)}
[hidden]{display:none !important}

/* Regułę trybu „tylko landing" (body.agx-solo) generuje PHP w AGX_Assets,
   bo zawiera listę wyjątków z ustawień. */
/* Treść tylko dla czytników ekranu (gwiazdka sama nie mówi, co oznacza). */
.screen-reader-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
	/* Bez tego etykieta pisana kapitalikami trafia do czytnika jako wersaliki,
	   a część z nich literuje wtedy słowo zamiast je przeczytać. */
	text-transform:none;letter-spacing:normal}
img{max-width:100%}

/* Ken burns. Skala 1.12 zamiast 1.07 i przebieg liniowy: przy ease-in-out
   pierwsze 10 s to było zaledwie 1% przybliżenia, więc na wejściu obraz
   wyglądał na nieruchomy. Teraz dryf jest równomierny i widoczny od razu,
   a „alternate" sprawia, że kadr oddycha w obie strony bez przeskoku. */
@keyframes kb{0%{transform:scale(1)}100%{transform:scale(1.12)}}
@keyframes galIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
@keyframes softIn{0%{opacity:0;transform:translateY(12px)}100%{opacity:1;transform:none}}
@keyframes riseIn{0%{transform:translateY(112%)}100%{transform:none}}
@keyframes fade{0%{opacity:0}100%{opacity:1}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(157,180,168,.6)}70%{box-shadow:0 0 0 10px rgba(157,180,168,0)}}

[data-hov="cta"]:hover{background:#141833 !important}
[data-hov="link"]:hover{color:#353B66 !important;border-color:#353B66 !important}
[data-hov="thumb"]:hover{opacity:1 !important}

/* Hover przycisku galerii: podkreślenie + powiększenie miniatury (tylko urządzenia z hoverem). */
@media (hover:hover){
[data-ng-galbtn]:hover [data-ng-galtxt] > span{transform:scaleX(1) !important}
[data-ng-galbtn]:hover [data-agx-galthumb]{transform:scale(1.08)}
[data-agx-galthumb]{transition:transform .45s cubic-bezier(.16,1,.3,1)}
}

/* Checkbox zgody - natywny input o wyglądzie z prototypu. */
[data-agx-consent]::after{content:'✓';font-size:11px;line-height:1;color:#F4F1EB;opacity:0;transition:opacity .2s}
[data-agx-consent]:checked{background:#353B66 !important;border-color:#353B66 !important}
[data-agx-consent]:checked::after{opacity:1}

/* Fokus klawiaturowy - wymóg produkcyjny, w prototypie nie występował.
   Pola tekstowe świadomie pominięte: ramka wokół pola z podkreśleniem wygląda
   jak obcy element, a sygnałem fokusu jest tam ciemniejsza i grubsza kreska
   pod polem (reguły w sekcji mikrointerakcji). Checkbox zgody, przyciski
   i linki ramkę zachowują - bez niej nie byłoby po czym poznać fokusu. */
[data-ng-root] a:focus-visible,
[data-ng-root] button:focus-visible,
[data-ng-root] input[type="checkbox"]:focus-visible,
[data-agx-gallery] button:focus-visible,
[data-ng-overlay] button:focus-visible{outline:2px solid #86A0C6;outline-offset:3px;border-radius:4px}
[data-agx-field] input:focus,
[data-agx-field] input:focus-visible{outline:none}
/* Potwierdzenie dostaje fokus tylko po to, by czytnik ekranu je odczytał
   (tabindex="-1" plus focus() z JS). Ramka wokół całej karty niczego tu nie
   komunikuje widzącemu użytkownikowi, więc ją zdejmujemy. */
[data-agx-success]:focus,
[data-agx-success]:focus-visible{outline:none}

/* --------------------------------------------- mikrointerakcje formularza */

/* Podkreślenie pola „dorysowuje się" od lewej przy wejściu w pole. Osobna
   warstwa nad border-bottom, żeby linia bazowa nie migała. */
[data-agx-underline]{position:absolute;left:0;right:0;bottom:0;height:2px;background:#353B66;
	transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.16,1,.3,1);pointer-events:none}
[data-agx-field]:focus-within [data-agx-underline]{transform:scaleX(1)}

/* Znak poprawnego adresu - pojawia się dopiero, gdy e-mail wygląda sensownie. */
[data-agx-check]{position:absolute;right:0;top:50%;width:18px;height:18px;margin-top:-9px;
	border-radius:50%;background:#9DB4A8;color:#F4F1EB;font-size:10px;line-height:18px;text-align:center;
	opacity:0;transform:scale(.4);transition:opacity .3s,transform .4s cubic-bezier(.34,1.56,.64,1);pointer-events:none}
[data-agx-field][data-agx-valid] [data-agx-check]{opacity:1;transform:scale(1)}

/* Chipy metrażu i przycisk wysyłki reagują na dotknięcie. */
[data-agx-size]:active{transform:scale(.97)}
[data-agx-submit]:active{transform:scale(.99)}

/* Ptaszek zgody „wskakuje" zamiast pojawiać się skokowo. */
[data-agx-consent]:checked::after{animation:tick .32s cubic-bezier(.34,1.56,.64,1) both}
@keyframes tick{0%{transform:scale(.2)}100%{transform:scale(1)}}

/* Stan wysyłania: podpis ustępuje miejsca kręcącemu się wskaźnikowi. */
[data-agx-spinner]{display:none;width:15px;height:15px;border-radius:50%;
	border:1.5px solid rgba(244,241,235,.35);border-top-color:#F4F1EB}
[data-agx-form][data-agx-busy] button[type=submit]{cursor:progress}
[data-agx-form][data-agx-busy] [data-agx-submit]{display:inline-flex;align-items:center;justify-content:center;gap:12px}
[data-agx-form][data-agx-busy] [data-agx-spinner]{display:block;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Podziękowanie pojawia się etapami - od odznaki, przez tekst, do przycisku. */
[data-agx-success]:not([hidden]){animation:softIn .6s cubic-bezier(.16,1,.3,1) both}
[data-agx-success]:not([hidden]) [data-agx-success-mark]{animation:markIn .7s cubic-bezier(.34,1.56,.64,1) .1s both}
[data-agx-success]:not([hidden]) [data-agx-success-title]{animation:softIn .6s cubic-bezier(.16,1,.3,1) .22s both}
[data-agx-success]:not([hidden]) [data-agx-success-text]{animation:softIn .6s cubic-bezier(.16,1,.3,1) .32s both}
[data-agx-success]:not([hidden]) [data-agx-success-note]{animation:softIn .6s cubic-bezier(.16,1,.3,1) .42s both}
[data-agx-success]:not([hidden]) [data-agx-success-cta]{animation:softIn .6s cubic-bezier(.16,1,.3,1) .5s both}
@keyframes markIn{0%{opacity:0;transform:scale(.5)}100%{opacity:1;transform:none}}

/* Jednorazowa fala wokół odznaki - potwierdza, że coś się właśnie stało. */
[data-agx-success-ring]{position:absolute;inset:-1px;border-radius:50%;border:1.5px solid #353B66;opacity:0}
[data-agx-success]:not([hidden]) [data-agx-success-ring]{animation:ring 1.1s cubic-bezier(.16,1,.3,1) .3s both}
@keyframes ring{0%{opacity:.5;transform:scale(1)}100%{opacity:0;transform:scale(1.5)}}

/* Karuzela zalet na desktopie: żadnego przycięcia.
   Wcześniej karta była ucinana ok. 50 px PRZED krawędzią ciemnej kolumny, czyli
   w powietrzu. Teraz JavaScript dobiera szerokość karty tak, by w kolumnie
   mieściła się całkowita liczba kart, a do kolejnych prowadzą strzałki obok
   przełącznika „Poznaj zalety". Karty są przy tym wyraźnie szersze (262-420 px
   zamiast 220-260 px), więc tekst ma więcej miejsca.
   Mrożenie zostaje - nie używamy mask-image, która wyłącza backdrop-filter. */
@media (min-width:901px){
	[data-ng-hl]{padding-right:0 !important}
}
[data-agx-hlnav] button:hover:not(:disabled){border-color:rgba(244,241,235,.6);background:rgba(11,15,34,.55)}
[data-agx-hlnav] button:disabled{opacity:.3;cursor:default}

@media (max-width:900px){
html,body{overflow:auto;overflow-x:hidden;-webkit-text-size-adjust:100%}
/* Zjazd do formularza z przycisku „Chcę wiedzieć pierwszy" ma być płynny,
   a nie skokowy. Własność musi być na BODY, nie tylko na html: przez
   height:100% i overflow:auto to body jest kontenerem przewijania na mobile,
   więc scroll-behavior na html nie robi tu nic. */
html,body{scroll-behavior:smooth}
[data-ng-root]{grid-template-columns:1fr !important;height:auto !important;overflow:visible !important}
[data-ng-left]{height:auto !important;min-height:0 !important;grid-template-rows:auto auto auto !important}
[data-ng-left] img{animation-duration:40s !important}
[data-ng-top]{padding:calc(53px + env(safe-area-inset-top, 0px)) max(20px,env(safe-area-inset-right)) 18px max(20px,env(safe-area-inset-left)) !important;flex-wrap:nowrap !important}
[data-ng-top] [data-agx-devlogo]{width:104px !important}
[data-ng-top] > span:first-child{gap:12px !important}
[data-ng-top] > span:first-child > span{height:20px !important}
[data-ng-mid]{padding:22px 20px 20px !important;gap:14px !important;align-content:start !important}
[data-ng-h1]{font-size:clamp(42px,13.2vw,64px) !important;margin-bottom:6px !important}
[data-ng-logo]{height:20px !important}
[data-ng-lead]{font-size:16.5px !important}
[data-ng-desc]{font-size:14.5px !important;line-height:1.55 !important}
/* Schowany bloczek ma stykać się z krawędzią ekranu. Ujemny margines musi
   być na [data-agx-hl-wrap] (accordion), nie na [data-ng-hlwrap]: ten drugi
   siedzi w overflow:hidden animacji zwijania i był przycinany 20 px przed
   krawędzią. Mrożenie zostaje - nie używamy mask-image. */
[data-agx-hl-wrap]{margin-right:calc(-1 * max(20px, env(safe-area-inset-right)))}
[data-ng-hlwrap]{margin-right:0}
[data-ng-hl]{gap:8px !important;margin:0 !important;padding:8px 20px 4px 0 !important;scroll-padding-left:0}
[data-ng-hl] > div:first-child{scroll-snap-align:start}
[data-ng-left],[data-ng-mid]{overflow-x:clip}
[data-agx-hlnav]{display:none !important}
[data-ng-hl] > div{width:min(72vw,260px) !important}
[data-ng-bottom]{padding:0 20px calc(57px + env(safe-area-inset-bottom, 0px)) !important}
[data-ng-mcta]{display:flex !important;margin-bottom:22px !important}
[data-ng-bars]{gap:8px !important}
[data-ng-bars] button{display:block !important;padding:12px 0 !important;min-height:44px}
[data-ng-bars] button > span:last-child{display:none !important}
[data-ng-word]{display:flex !important}
[data-ng-right]{height:auto !important;overflow:visible !important;padding:41px 20px 24px !important;grid-template-rows:auto auto auto !important;gap:26px}
[data-ng-rhead]{flex-wrap:wrap;gap:12px 16px !important}
[data-ng-form]{padding:0 !important;gap:22px !important}
[data-ng-form] h2{font-size:clamp(30px,8.6vw,40px) !important}
[data-ng-form] button,[data-ng-form] a{min-height:44px}
[data-ng-form] button[type=submit]{padding:18px 24px !important;position:sticky;bottom:12px;box-shadow:0 12px 30px -14px rgba(11,15,34,.5)}
[data-ng-right] > div:last-child{padding-top:18px !important;gap:12px 18px !important}
[data-ng-overlay]{place-items:end center !important;padding:0 !important}
[data-ng-sheet] [data-agx-modal-close]{width:44px !important;height:44px !important}
[data-ng-right] > div:last-child button{min-height:44px}
/* Dopisek „nieobowiązkowe" schodzi na drugą linię w obu etykietach naraz -
   inaczej „Nazwisko" zawijało się samo i nagłówki pól były nierówne. */
[data-agx-names] label > span:first-child > span{flex-basis:100%}
[data-ng-form] [data-agx-consent]{width:18px !important;height:18px !important;min-height:0 !important;margin-top:2px !important}
[data-ng-form] label{min-height:0 !important}
/* Przycisk galerii na mobile. Miniatura stoi przy napisie (nie na końcu
   wiersza) i jest większa, a podkreślenie jest widoczne od razu - na ekranach
   dotykowych nie ma hoveru, który odsłaniałby je na desktopie. */
[data-ng-mlink]{display:inline-flex !important;flex:0 0 100% !important;justify-content:flex-start !important;gap:14px !important;order:1;font-size:10.5px !important}
[data-ng-mlink] [data-ng-galtxt] > span{transform:scaleX(1) !important}
[data-ng-mlink] [data-agx-galthumb]{width:44px !important;height:44px !important}
[data-ng-right] > div:last-child{flex-direction:row;flex-wrap:wrap;align-items:center !important;justify-content:space-between}
[data-ng-right] > div:last-child > span{white-space:nowrap}
[data-ng-right] > div:last-child > span:first-child{order:2}
[data-ng-right] > div:last-child > span:last-child{order:3}
[data-ng-mid],[data-ng-bottom],[data-ng-right]{padding-left:max(20px,env(safe-area-inset-left)) !important;padding-right:max(20px,env(safe-area-inset-right)) !important}
[data-ng-sheet]{width:100% !important;max-height:92svh !important;border-radius:18px 18px 0 0 !important;padding:22px 20px calc(24px + env(safe-area-inset-bottom)) !important}
[data-ng-hide]{display:none !important}
/* Sterowanie galerią na mobile. Strzałki wracają, ale nie nad zdjęciem -
   siedzą w jednym rzędzie z kropkami, więc nie zasłaniają wizualizacji
   i od razu widać, że zdjęcia można przewijać (obok gestu palcem). */
[data-agx-gallery] [data-agx-gal-prev],
[data-agx-gallery] [data-agx-gal-next]{display:grid !important;position:fixed !important;
	top:auto !important;bottom:calc(max(22px,env(safe-area-inset-bottom)) - 18px) !important;
	transform:none !important;width:44px !important;height:44px !important;font-size:17px !important}
[data-agx-gallery] [data-agx-gal-prev]{left:max(16px,env(safe-area-inset-left)) !important}
[data-agx-gallery] [data-agx-gal-next]{right:max(16px,env(safe-area-inset-right)) !important}
}
@media (max-width:900px) and (max-height:520px){
[data-ng-left]{min-height:auto !important}
}
@media (max-width:420px){
[data-ng-h1]{font-size:clamp(38px,12.2vw,52px) !important}
[data-ng-logo]{height:18px !important}
[data-ng-top] [data-agx-devlogo]{width:96px !important}
}
[data-ng-hl]::-webkit-scrollbar{display:none}
@media (max-height:720px) and (min-width:901px){[data-ng-short]{display:none !important}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
html,body{scroll-behavior:auto !important}}