/* Generated from Figma variables. Do not edit by hand — re-sync & regenerate from the Tokens tab. */

:root {
  /* Colors */
  --black3: #1c1c1c;
  --black1: #737373;
  --white: #ffffff;
  --brand: #0253be;
  --light2: #dfdbdb;
  --icon-color: #0253be;
  --text-white: #FFFFFF;
  --white-text: #FFFCFC;
  --light1: #f2f4f5;
  --black2: #212220;
  --light3: #c0c2c3;
  --dark-graphite: #252525;

  /* Spacing */
  --padding-horizontal: 24px;
  --padding-vertical: 24px;
  --cards-gap: 20px;
  --section-gap: 48px;
  --section-padding: 100px;

  /* Radius */
  --border-radius: 24px;
}

/* Section vertical rhythm — the ONE canonical top/bottom padding every <section>
   uses (padding-block: var(--section-pad-block)). A single site-wide ladder keeps
   the gaps between sections identical and steps them down on tablet/phone. Desktop
   seeds from the Figma --section-padding token when present, else 96px. */
:root { --section-pad-block: var(--section-padding, 96px); }
@media (max-width: 1023px) { :root { --section-pad-block: calc(var(--section-padding, 96px) * 0.7); } }
@media (max-width: 767px)  { :root { --section-pad-block: calc(var(--section-padding, 96px) * 0.5); } }

/* Typography */
.text-16px-text {
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 22.4px;
}

.text-18-px-button {
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 23.4px;
  letter-spacing: -0.02em;
}

.text-56px-title {
  font-family: "Poppins", sans-serif;
  font-size: 56px;
  font-weight: 700;
  line-height: 70.4px;
  letter-spacing: -0.02em;
}

.text-18px-text {
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 23.4px;
}

.text-20px-title {
  font-family: "Poppins", sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 26px;
}

.text-14px-text {
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
}

.text-28px-title {
  font-family: "Poppins", sans-serif;
  font-size: 28px;
  font-weight: 700;
  line-height: 27.4px;
  letter-spacing: -0.02em;
}

.text-48px-title {
  font-family: "Poppins", sans-serif;
  font-size: 48px;
  font-weight: 700;
  line-height: 57.6px;
  letter-spacing: -0.02em;
}

.text-24px-title {
  font-family: "Poppins", sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 31.2px;
  letter-spacing: -0.02em;
}

.text-32px-title {
  font-family: "Poppins", sans-serif;
  font-size: 32px;
  font-weight: 700;
  line-height: 38.4px;
  letter-spacing: -0.02em;
}

.text-20px-text {
  font-family: "Poppins", sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 26px;
}

.text-40px-title {
  font-family: "Poppins", sans-serif;
  font-size: 40px;
  font-weight: 700;
  line-height: 48px;
  letter-spacing: -0.02em;
}

/* UI signature — derived from the Allgips design; every component honours these:
   1) Primary CTA is a FLAT solid brand-blue (#0253be / var(--brand)) FULL PILL with a WHITE
      label and ZERO shadow — hierarchy is carried by fill, not elevation; its trailing arrow
      rides in its own WHITE CIRCULAR DISC at the pill's end (hero "wyślij wycenę") and nudges
      right on hover.
   2) Secondary shares the EXACT same pill silhouette but is OUTLINE-only: transparent fill,
      2px solid brand-blue border, brand-blue label ("więcej usług"). The brand has ONE button
      shape — primary vs secondary differ only by fill-vs-outline, NEVER by radius.
   3) Cards/tiles are large-radius (24px, all four corners) rounded rectangles carrying a soft
      grey AMBIENT shadow 0 8px 24px rgba(149,157,165,0.2) AT REST (never a hard offset) — plus a
      DARK-card variant (#1c1c1c) with brand-blue numerals for the process/stat panels that sit
      inside light sections.
   4) Content/feature icons are single-colour brand-blue line glyphs, recoloured via --icon-color
      (mask-driven), turning white on dark/blue surfaces so a dark-on-dark icon can never ship.
   5) Form fields are full-width soft-rounded (~10px) boxes with a hairline light-grey border on
      white, placeholder-as-label, focusing to a brand-blue border + soft blue ring; the form's
      submit is the SAME flat-blue pill (full-width) with the white circular arrow disc. */

:root {
  /* Accent = the design's PRIMARY CTA colour (the solid blue pill) = --brand. */
  --accent: var(--brand);
  --accent-2: var(--brand);            /* CTA is SOLID (no gradient) → = --accent */
  --accent-contrast: var(--white);
  --btn-shadow: none;                  /* the flat blue pill carries NO shadow (signature #1) */

  /* Radius scale — derived per element from the design (NOT one flat radius). */
  --radius-sm: 10px;                   /* form fields / small chips */
  --radius-md: 16px;                   /* medium tiles */
  --radius-lg: var(--border-radius, 24px); /* cards / panels — the design's 24px */
  --radius-pill: 999px;                /* buttons + icon buttons (design draws FULL pills) */

  /* Buttons — ONE shape site-wide. */
  --btn-radius: var(--radius-pill);    /* primary CTA is a full pill; also shapes Slider arrows */
  --btn-height: 56px;                  /* single site-wide button height */
  --btn-height-sm: 40px;               /* the one deliberate compact height */

  /* The design's signature card shadow (soft grey ambient). */
  --card-shadow: 0 8px 24px 0 rgba(149, 157, 165, 0.2);
}

/* ==========================================================================
   Buttons — .btn + .btn-primary / .btn-secondary / .btn-ghost / .btn-icon
   ONE silhouette; primary = solid fill, secondary = outline, both full pills.
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-sizing: border-box;
  min-height: var(--btn-height, 56px); /* height fixed here — NOT re-derived from padding */
  padding-block: 0;                    /* vertical centring is min-height + align-items */
  padding-inline: 32px;                /* the design's 32px horizontal button padding */
  border: 2px solid transparent;       /* 2px so the outline secondary matches the silhouette */
  border-radius: var(--btn-radius, var(--radius-pill, 999px));
  font-family: "Poppins", sans-serif;  /* the design's "18 PX BUTTON" type token */
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease,
              border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}
.btn:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Primary — flat solid brand-blue pill, white label, NO shadow (signature #1). */
.btn-primary {
  background: var(--btn-bg, var(--accent, var(--brand)));
  color: var(--btn-fg, var(--accent-contrast, var(--white)));
  border-color: transparent;
  box-shadow: var(--btn-shadow, none);
}
@media (hover: hover) {
  .btn-primary:hover {
    transform: translateY(-2px);
    filter: brightness(0.94);          /* darken, not a shadow — keeps the flat signature */
  }
}
.btn-primary:active { transform: translateY(0); filter: none; }

/* Secondary — same pill, OUTLINE only: 2px brand border + brand label (signature #2). */
.btn-secondary {
  background-color: var(--btn-bg, transparent);
  color: var(--btn-accent, var(--accent, var(--brand)));
  border-color: var(--btn-accent, var(--accent, var(--brand)));
}
@media (hover: hover) {
  .btn-secondary:hover {
    background-color: var(--btn-accent, var(--accent, var(--brand)));
    color: var(--btn-fg, var(--accent-contrast, var(--white)));
    transform: translateY(-2px);
  }
}
.btn-secondary:active { transform: translateY(0); }

/* Ghost / text — the card "Zobacz więcej →" affordance; no chrome until hover. */
.btn-ghost {
  background-color: transparent;
  color: var(--btn-fg, var(--accent, var(--brand)));
  border-color: transparent;
  padding-inline: 10px;
}
.btn-ghost:hover {
  background-color: color-mix(in srgb, var(--btn-accent, var(--accent, var(--brand))) 10%, transparent);
}

/* Icon button — square/circular; slider arrows, lightbox close, hero arrow disc. */
.btn-icon {
  width: 48px;
  height: 48px;
  min-height: 0;
  padding: 0;
  border-radius: var(--radius-pill, 999px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--btn-bg, var(--accent, var(--brand)));
  color: var(--btn-fg, var(--accent-contrast, var(--white)));
  border: none;
  cursor: pointer;
  transition: transform 200ms ease, background-color 200ms ease;
}
@media (hover: hover) { .btn-icon:hover { transform: scale(1.08); } }
.btn-icon:active { transform: scale(0.96); }
.btn-icon:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* Slotted icon/SVG — sized to the square & centred (without this a raw <svg> renders unsized). */
.btn-icon > svg, .btn-icon > img { width: 42%; height: 42%; display: block; }

/* Small size — the ONE deliberate smaller button; only height + inline padding shrink. */
.btn--sm {
  min-height: var(--btn-height-sm, 40px);
  padding-inline: 20px;
  font-size: 16px;
}

/* ==========================================================================
   Hover vocabulary — reusable utilities (combine them per component)
   ========================================================================== */

/* 1. Powiększenie — scale up */
.hover-scale { transition: transform 200ms ease; }
@media (hover: hover) { .hover-scale:hover { transform: scale(1.04); } }
.hover-scale:active { transform: scale(0.99); }

/* Image-in-a-fixed-frame zoom (portfolio tile, gallery) — zoom the image, clip the box. */
.media { overflow: hidden; border-radius: var(--radius-lg, var(--border-radius, 24px)); }
.media img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform 400ms ease;
}
@media (hover: hover) { .media:hover img { transform: scale(1.06); } }

/* 2. Uniesienie — lift (translateY + shadow). Default for cards, tiles, primary buttons. */
.hover-lift {
  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 200ms ease;
}
@media (hover: hover) {
  .hover-lift:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 36px -8px rgba(149, 157, 165, 0.35);
  }
}
.hover-lift:active { transform: translateY(-2px); }

/* 3. Zmiana koloru — colour swap */
.hover-fill { transition: background-color 200ms ease, color 200ms ease; }
@media (hover: hover) {
  .hover-fill:hover {
    background-color: var(--accent, var(--brand));
    color: var(--accent-contrast, var(--white));
  }
}
.hover-tint { transition: color 200ms ease, border-color 200ms ease; }
@media (hover: hover) {
  .hover-tint:hover { color: var(--accent, var(--brand)); border-color: var(--accent, var(--brand)); }
}

/* 4. Ruchoma strzałka — moving arrow (only the arrow moves) */
.with-arrow { display: inline-flex; align-items: center; gap: 10px; }
.with-arrow .arrow { display: inline-flex; align-items: center; transition: transform 200ms ease; }
@media (hover: hover) { .with-arrow:hover .arrow { transform: translateX(4px); } }

/* signature #1 — the hero CTA's trailing arrow rides in its own WHITE CIRCULAR DISC.
   Opt-in (add `arrow-disc` beside `with-arrow`) so plain-chevron CTAs keep a bare arrow. */
.arrow-disc .arrow {
  width: 1.9em;
  height: 1.9em;
  justify-content: center;
  border-radius: var(--radius-pill, 999px);
  background: var(--accent-contrast, var(--white));
  color: var(--accent, var(--brand));
}

/* Continuous loop indicator (scroll hint) — keep subtle. */
.arrow-loop { animation: arrow-nudge 1.4s ease-in-out infinite; }
@keyframes arrow-nudge {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(6px); }
}

/* 5. Dodanie podkreślenia — animated underline (nav + inline links) */
.link-underline {
  position: relative;
  text-decoration: none;
  color: inherit;
  background-image: linear-gradient(var(--accent, var(--brand)), var(--accent, var(--brand)));
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 2px;
  transition: background-size 220ms ease, color 200ms ease;
  padding-bottom: 2px;
}
@media (hover: hover) {
  .link-underline:hover { background-size: 100% 2px; color: var(--accent, var(--brand)); }
}
.link-underline:focus-visible { background-size: 100% 2px; outline: none; }
.link-underline[aria-current="page"] { background-size: 100% 2px; color: var(--accent, var(--brand)); }
.link-underline-center { background-position: 50% 100%; }

/* ==========================================================================
   Cards / tiles — 24px all corners, soft grey ambient shadow at rest (signature #3)
   ========================================================================== */
.card {
  position: relative;
  z-index: 1;
  background: var(--white);
  border-radius: var(--radius-lg, var(--border-radius, 24px));
  overflow: hidden;
  box-shadow: var(--card-shadow, 0 8px 24px 0 rgba(149, 157, 165, 0.2));
  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 200ms ease;
}
@media (hover: hover) {
  .card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 36px -8px rgba(149, 157, 165, 0.35);
  }
  .card:hover img { transform: scale(1.05); }
  .card:hover .arrow { transform: translateX(4px); }
}
.card img { transition: transform 400ms ease; }
.card a:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Padded inner wrapper — content placed directly in .card would be flush to the edges. */
.card-body { padding: var(--padding-vertical, 24px) var(--padding-horizontal, 24px); }

/* Dark panel variant — process "etapy" panel / about stat card: near-black, blue numerals. */
.card--dark {
  background: var(--black3, #1c1c1c);
  color: var(--white);
}

/* ==========================================================================
   Inputs (contact form) — signature #5
   ========================================================================== */
.field {
  width: 100%;
  box-sizing: border-box;
  padding: 14px 16px;
  border: 1px solid var(--light3, #c0c2c3);
  border-radius: var(--radius-sm, 10px);
  background: var(--white);
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  line-height: 22.4px;
  color: var(--black3, #1c1c1c);
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.field::placeholder { color: var(--black1, #737373); }
.field:hover { border-color: var(--accent, var(--brand)); }
.field:focus {
  outline: none;
  border-color: var(--accent, var(--brand));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, var(--brand)) 25%, transparent);
}
.field:user-invalid { border-color: #e5484d; }

/* ==========================================================================
   Content icons (monochrome, recolourable) — .svc-icon (signature #4)
   Paint EXCLUSIVELY via --icon-color; the mask handles SVG + webp identically.
   ========================================================================== */
.svc-icon {
  display: inline-block;
  width: 40px;
  height: 40px;
  background-color: var(--icon-color, var(--accent, var(--brand)));
  -webkit-mask: var(--icon) center / contain no-repeat;
          mask: var(--icon) center / contain no-repeat;
  transition: background-color 200ms ease;
}
/* Recolour per band by SETTING --icon-color (dark/accent tile → light icon; light → accent). */
.card--dark .svc-icon { --icon-color: var(--accent-contrast, var(--white)); }

/* ==========================================================================
   Step number badge — .step-badge / .step-num (numbered process steps)
   ========================================================================== */
.step-badge {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-pill, 999px);
}
.step-num {
  line-height: 1;
  letter-spacing: 0;
  font-variant-numeric: lining-nums tabular-nums;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  color: var(--accent, var(--brand));
}

/* ==========================================================================
   Missing-data placeholder — .data-placeholder
   ========================================================================== */
.data-placeholder {
  opacity: 0.55;
  font-style: italic;
  font-weight: inherit;
}

/* ==========================================================================
   Reduced-motion guard
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}