:root {

  --g-tint:      rgba(255,255,255,.32);
  --g-tint-2:    rgba(255,255,255,.44);
  --g-tint-3:    rgba(255,255,255,.60);

  --g-a-top:   .32;
  --g-a-stuck: .82;
  --g-a-dark:  .97;
  --g-scroll:  1;
  --g-line:      rgba(255,255,255,.55);
  --g-blur:      saturate(215%) blur(30px);
  --g-blur-sm:   saturate(185%) blur(16px);

  --g-rim: linear-gradient(145deg,
    rgba(255,255,255,1)    0%,
    rgba(120,230,255,.85) 13%,
    rgba(255,255,255,.34) 29%,
    rgba(43,58,232,.62)   51%,
    rgba(255,150,205,.50) 71%,
    rgba(2,139,139,.72)  100%);

  --g-edge:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(43,58,232,.16),
    inset 1px 0 0 rgba(255,255,255,.5),
    inset -1px 0 0 rgba(255,255,255,.5),
    inset 0 -14px 26px -18px rgba(2,139,139,.35),

    inset 0 -22px 30px -24px rgba(255,255,255,.55);

  --g-drop:    0 1px 2px rgba(12,17,45,.05), 0 16px 38px rgba(10,17,87,.14);
  --g-drop-lg: 0 2px 4px rgba(12,17,45,.06), 0 22px 46px rgba(10,17,87,.16), 0 52px 96px rgba(10,17,87,.13);

  --g-tint-dark: rgba(255,255,255,.10);
  --g-line-dark: rgba(255,255,255,.20);
  --g-edge-dark: inset 0 1px 0 rgba(255,255,255,.24), inset 0 -1px 0 rgba(255,255,255,.07),
                 inset 0 -20px 28px -22px rgba(168,192,240,.22);

  --ink-3: #5F6785;

  --r-lg: 24px;
  --r-xl: 32px;
}

html { scroll-padding-top: 104px; }

:root { --audit-sticky-top: 108px; }

.ambient {
  position: fixed; inset: 0; z-index: -3;
  pointer-events: none; overflow: hidden;
  contain: strict;
}
.ambient span {
  position: absolute; display: block; border-radius: 50%;
  will-change: transform;
}
.ambient span:nth-child(1) {
  width: 78vw; height: 78vw; max-width: 1100px; max-height: 1100px;
  top: -28vw; left: -18vw;

  background: radial-gradient(circle at 50% 50%, rgba(46,104,240,.46) 0%, rgba(46,104,240,.17) 45%, transparent 70%);
  animation: ambient-a 34s ease-in-out infinite alternate;
}
.ambient span:nth-child(2) {
  width: 66vw; height: 66vw; max-width: 900px; max-height: 900px;

  top: 34vh; right: -26vw;
  background: radial-gradient(circle at 50% 50%, rgba(2,139,139,.32) 0%, rgba(2,139,139,.11) 45%, transparent 70%);
  animation: ambient-b 42s ease-in-out infinite alternate;
}
.ambient span:nth-child(3) {
  width: 90vw; height: 70vw; max-width: 1200px; max-height: 900px;
  bottom: -26vw; left: 8vw;
  background: radial-gradient(circle at 50% 50%, rgba(46,104,240,.26) 0%, rgba(2,139,139,.12) 48%, transparent 72%);
  animation: ambient-c 52s ease-in-out infinite alternate;
}
@keyframes ambient-a { to { transform: translate3d(7vw, 5vh, 0) scale(1.08); } }
@keyframes ambient-b { to { transform: translate3d(-6vw, -7vh, 0) scale(1.1); } }
@keyframes ambient-c { to { transform: translate3d(5vw, -4vh, 0) scale(1.06); } }

@media (pointer: coarse) {
  .ambient span { animation: none; will-change: auto; }
}

body { background: #F2F5FD; }

.site-header {
  background: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border-bottom: 0;
  padding: 10px var(--gutter);
}
.site-header.is-stuck { border-bottom-color: transparent; box-shadow: none; }

.site-header__in {
  max-width: var(--wrap); margin-inline: auto;
  padding-inline: 16px; min-height: 66px;
  border-radius: 26px;

  background-color: rgba(255,255,255,
    calc(var(--g-a-top) + (var(--g-a-stuck) - var(--g-a-top)) * var(--g-scroll)));
  border: 1px solid var(--g-line);
  -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
  box-shadow: var(--g-edge), var(--g-drop);

  transition: background-color .18s linear, box-shadow .3s cubic-bezier(.2,.7,.2,1), border-color .3s ease;
}
.site-header.is-stuck .site-header__in {

  box-shadow: var(--g-edge), var(--g-drop-lg);
}

.site-header.is-dark .site-header__in {

  background-color: rgba(11,16,48,
    calc(var(--g-a-top) + (var(--g-a-dark) - var(--g-a-top)) * var(--g-scroll)));
  border-color: var(--g-line-dark);
  box-shadow: var(--g-edge-dark), var(--g-drop-lg);

  --g-rim: linear-gradient(145deg,
    rgba(255,255,255,.85)   0%,
    rgba(150,240,255,.95)  13%,
    rgba(255,255,255,.28)  31%,
    rgba(120,140,255,.72)  52%,
    rgba(255,170,215,.62)  72%,
    rgba(40,215,205,.82)  100%);
}
.site-header.is-dark .logo__name    { color: #fff; }
.site-header.is-dark .logo__sub     { color: rgba(255,255,255,.70); }
.site-header.is-dark .nav a         { color: rgba(255,255,255,.90); }
.site-header.is-dark .nav a:hover   { background: rgba(255,255,255,.14); color: #fff; }
.site-header.is-dark .header-phone  { color: #fff; }
.site-header.is-dark .burger        { border-color: rgba(255,255,255,.34); }
.site-header.is-dark .burger span   { background: #fff; }

.site-header .logo__name, .site-header .logo__sub,
.site-header .nav a, .site-header .header-phone {
  transition: color .25s ease;
}

@media (min-width: 1081px) {
  .nav { gap: 2px; }
  .nav a { padding: 9px 12px; white-space: nowrap; }
  .nav > .btn { display: none; }
  .header-phone { white-space: nowrap; }
  .header-cta { gap: 14px; }
}

.nav a { transition: background-color .15s ease, color .15s ease, box-shadow .15s ease; }
.nav a:hover,
.nav a:focus-visible {
  background: var(--blue-050);
  box-shadow: inset 0 0 0 1px rgba(43,58,232,.20), inset 0 1px 0 rgba(255,255,255,.9);
  color: var(--blue-700);
}

.burger {
  border-color: rgba(43,58,232,.22);
  background: rgba(255,255,255,.5);
  -webkit-backdrop-filter: var(--g-blur-sm); backdrop-filter: var(--g-blur-sm);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
}

.btn--primary {

  background: linear-gradient(180deg, #049A9A 0%, var(--teal) 52%, #017878 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 8px 22px rgba(2,139,139,.30);
}
.btn--primary:hover {
  background: linear-gradient(180deg, var(--teal) 0%, #016060 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 12px 30px rgba(2,139,139,.36);
}
.btn--blue {
  background: linear-gradient(180deg, var(--blue) 0%, var(--blue-600) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 8px 22px rgba(43,58,232,.3);
}

.btn--ghost {
  background: var(--g-tint-3);

  border-color: rgba(43,58,232,.30);
  color: var(--ink);
  -webkit-backdrop-filter: var(--g-blur-sm); backdrop-filter: var(--g-blur-sm);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 6px 18px rgba(10,17,87,.12);
}
.btn--ghost:hover {
  background: rgba(255,255,255,.9);
  border-color: rgba(43,58,232,.45);
  color: var(--blue-700);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 10px 26px rgba(10,17,87,.14);
}
.btn--ghost-inv {
  background: var(--g-tint-dark);
  border-color: var(--g-line-dark);
  -webkit-backdrop-filter: var(--g-blur-sm); backdrop-filter: var(--g-blur-sm);
  box-shadow: var(--g-edge-dark);
}

.site-header__in, .about__panel, .contact-form { position: relative; }

.site-header__in::before,
.hero-card::before,
.card::before,
.calc::before,
.about__panel::before,
.contact-form::before,
.nav.is-open::before {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit; pointer-events: none; z-index: 1;

  padding: 1.8px;
  background: var(--g-rim);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}

.hero-card,
.card,
.calc,
.about__panel,
.contact-form,
.faq details,
.scope,
.result__cta {
  background: var(--g-tint-2);

  border-color: rgba(255,255,255,.42);
  -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
  box-shadow: var(--g-edge), var(--g-drop);
}

.hero-card {
  background: var(--g-tint);
  border-radius: var(--r-xl);
  box-shadow: var(--g-edge), var(--g-drop-lg);
}
.hero-card::after {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit; pointer-events: none;

  background:
    radial-gradient(150% 120% at -5% -25%,
      rgba(255,255,255,.62) 0%,
      rgba(255,255,255,.42) 14%,
      rgba(255,255,255,.26) 28%,
      rgba(255,255,255,.13) 42%,
      rgba(255,255,255,.05) 58%,
      rgba(255,255,255,0) 78%),
    linear-gradient(118deg,
      rgba(255,255,255,0) 26%,
      rgba(255,255,255,.05) 40%,
      rgba(255,255,255,.11) 50%,
      rgba(255,255,255,.05) 60%,
      rgba(255,255,255,0) 74%);
  opacity: .95;
  transition: opacity .3s ease, transform .35s cubic-bezier(.2,.7,.2,1);
}

.card {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.56) 0%, rgba(255,255,255,.34) 100%);
}
.card:hover {
  transform: translateY(-5px);
  border-color: rgba(255,255,255,.95);
  box-shadow: var(--g-edge), var(--g-drop-lg);
}

.card:hover { background: linear-gradient(180deg, rgba(255,255,255,.68) 0%, rgba(255,255,255,.42) 100%); }

.card__icon {

  background: linear-gradient(160deg, rgba(43,58,232,.44) 0%, rgba(43,58,232,.22) 100%);
  border: 1px solid rgba(43,58,232,.34);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 4px 12px rgba(10,17,87,.12);
  color: var(--blue-700);
}

.cards > .card:nth-child(3n+2) .card__icon {
  background: linear-gradient(160deg, rgba(2,139,139,.42) 0%, rgba(2,139,139,.2) 100%);
  border-color: rgba(2,139,139,.36);
  color: var(--teal-700);
}
.cards > .card:nth-child(3n) .card__icon {
  background: linear-gradient(160deg, rgba(43,58,232,.62) 0%, rgba(10,17,87,.34) 100%);
  border-color: rgba(10,17,87,.34);
  color: var(--blue-900);
}

.promo:hover,
.ai-cta:hover { transform: none; background: linear-gradient(180deg, rgba(255,255,255,.56) 0%, rgba(255,255,255,.34) 100%); }
.promo__code { background: rgba(2,139,139,.10); border-color: rgba(2,139,139,.34); }
.promo__copy { background: rgba(255,255,255,.75); }
.res-promo { background: rgba(2,139,139,.10); border-color: rgba(2,139,139,.30); }

.hero-card__badge {
  z-index: 2;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 8px 20px rgba(2,139,139,.36);
}

.trust {
  background: transparent;
  border-block-color: rgba(43,58,232,.16);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.trust__item { font-variant-numeric: tabular-nums; }

.area {
  background: transparent;
  border-color: rgba(255,255,255,.6);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}

.contact-form {

  --g-rim: linear-gradient(145deg,
    rgba(255,255,255,.98)  0%,
    rgba(120,230,255,.55)  9%,
    rgba(255,255,255,.35) 42%,
    rgba(43,58,232,.34)  100%);
  background: var(--g-tint-3);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 1px 0 0 rgba(255,255,255,.5),
    inset -1px 0 0 rgba(255,255,255,.5),
    var(--g-drop-lg);
}

.contact-list__ico {
  background: rgba(2,139,139,.12);
  border: 1px solid rgba(2,139,139,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
}

.chip {
  background: rgba(255,255,255,.62);
  border-color: rgba(43,58,232,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
.chip--teal { background: rgba(2,139,139,.1); border-color: rgba(2,139,139,.26); }

.faq details[open] { background: var(--g-tint-3); border-color: rgba(255,255,255,.9); box-shadow: var(--g-edge), var(--g-drop); }

.eyebrow {
  background: rgba(255,255,255,.42);
  border-color: rgba(255,255,255,.7);
  -webkit-backdrop-filter: var(--g-blur-sm); backdrop-filter: var(--g-blur-sm);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 4px 14px rgba(10,17,87,.08);
}
.eyebrow--blue { color: var(--blue-700); }

.eyebrow--night {
  background: rgba(2,139,139,.22);
  border-color: rgba(2,139,139,.46);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
  color: #DFF3F3;
}
.contact-list__ico {
  background: rgba(2,139,139,.14);
  border: 1px solid rgba(255,255,255,.6);
  -webkit-backdrop-filter: var(--g-blur-sm); backdrop-filter: var(--g-blur-sm);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
}

.calc { border-radius: var(--r-xl); box-shadow: var(--g-edge), var(--g-drop-lg); }
.calc__head {
  background: linear-gradient(180deg, rgba(43,58,232,.16) 0%, rgba(255,255,255,.12) 100%);
  border-bottom-color: rgba(255,255,255,.75);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
.progress { background: rgba(43,58,232,.18); box-shadow: inset 0 1px 2px rgba(10,17,87,.12); }
.progress__bar { box-shadow: inset 0 1px 0 rgba(255,255,255,.45); }
.calc__nav { border-top-color: rgba(255,255,255,.75); }

.opt__box {
  background: rgba(255,255,255,.40);
  border-color: rgba(43,58,232,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
  -webkit-backdrop-filter: var(--g-blur-sm); backdrop-filter: var(--g-blur-sm);
}
.opt__box:hover {
  background: rgba(255,255,255,.66);
  border-color: rgba(43,58,232,.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 8px 20px rgba(10,17,87,.12);
}
.opt input:checked + .opt__box {
  background: linear-gradient(180deg, rgba(2,139,139,.16) 0%, rgba(2,139,139,.08) 100%);
  border-color: var(--teal);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 0 0 3px rgba(2,139,139,.16);
}
.opt__tick { background: rgba(255,255,255,.8); border-color: rgba(43,58,232,.32); }

.field input, .field textarea, .field select {
  background-color: #FFFFFF;
  border-color: var(--line-strong);
  box-shadow: inset 0 1px 2px rgba(10,17,87,.06);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.field input:hover, .field textarea:hover, .field select:hover {
  border-color: rgba(43,58,232,.45);
}
.field input:focus, .field textarea:focus, .field select:focus {
  background-color: #FFFFFF;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(2,139,139,.18);
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); }

.price-box {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), var(--g-drop-lg);
  border: 1px solid rgba(255,255,255,.18);
}
.price-box__val { font-variant-numeric: tabular-nums; }
.scope__head { background: rgba(255,255,255,.45); border-bottom-color: rgba(255,255,255,.8); }
.scope__list li { border-bottom-color: rgba(43,58,232,.12); }
.scope__val { font-variant-numeric: tabular-nums; }
.result__cta { background: linear-gradient(180deg, rgba(43,58,232,.14) 0%, rgba(255,255,255,.55) 100%); border-color: rgba(255,255,255,.8); }

.audit-form {
  background: var(--g-tint-dark);
  border-color: var(--g-line-dark);
  -webkit-backdrop-filter: saturate(170%) blur(26px); backdrop-filter: saturate(170%) blur(26px);
  box-shadow: var(--g-edge-dark), 0 24px 60px rgba(0,0,0,.35);
}
.audit-form .field input {
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.22);
  box-shadow: var(--g-edge-dark);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.audit-done__icon { background: rgba(2,139,139,.24); box-shadow: var(--g-edge-dark), 0 10px 26px rgba(2,139,139,.25); }

.mobile-bar {

  background: rgba(255,255,255,.97);
  -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
  border-top: 1px solid rgba(255,255,255,.8);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 -8px 28px rgba(10,17,87,.12);
}

@media (max-width: 1080px) {

  .site-header.is-dark .nav.is-open {

    background-color: rgba(21,28,70,.94);
    border-color: var(--g-line-dark);
  }
  .nav.is-open {
    top: calc(100% + 8px);

    background-color: rgba(255,255,255,.92);
    border: 1px solid var(--g-line);
    border-radius: 24px;
    -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
    box-shadow: var(--g-edge), var(--g-drop-lg);
    padding: 14px;
  }
  .site-header__in { padding-inline: 14px; }
}

.soczewki { position: absolute; width: 0; height: 0; overflow: hidden; }

.ambient::after {
  content: ""; position: absolute; inset: 0;
  background: url("media/tlo-jasne.svg") center / cover no-repeat;
  opacity: .9;
}

@media (max-aspect-ratio: 1/1) {
  .ambient::after {
    background-size: 100% auto;
    background-position: top center;
  }
}

.audit {
  --audit-foto: url("media/tlo-audyt.webp");

  --audit-wash:
    radial-gradient(76% 88% at 20% 48%, rgba(11,16,48,.60) 0%, rgba(11,16,48,.22) 60%, transparent 78%),
    linear-gradient(100deg,
      rgba(11,16,48,.90) 0%, rgba(11,16,48,.80) 34%,
      rgba(11,16,48,.55) 70%, rgba(11,16,48,.42) 100%);
  background:
    var(--audit-wash),
    var(--audit-foto) center / cover no-repeat,
    radial-gradient(48% 55% at 12% 8%, rgba(43,58,232,.4) 0%, transparent 58%),
    radial-gradient(44% 50% at 88% 86%, rgba(2,139,139,.34) 0%, transparent 60%),
    var(--night);
}

@media (max-width: 900px) {
  .audit {
    --audit-foto: url("media/tlo-audyt-900.webp");
    --audit-wash: linear-gradient(180deg, rgba(11,16,48,.94) 0%, rgba(11,16,48,.88) 100%);
  }
}

@media (prefers-reduced-data: reduce) {
  .audit { --audit-foto: url("media/tlo-ciemne.svg"); }
}

.site-header__in, .hero-card, .calc, .contact-form, .mobile-bar,
.nav.is-open {
  background-image: linear-gradient(90deg,
    rgba(255,255,255,0) 4%,
    rgba(255,255,255,.85) 24%,
    rgba(255,255,255,.35) 50%,
    rgba(255,255,255,.9) 78%,
    rgba(255,255,255,0) 96%);
  background-repeat: no-repeat;
  background-size: 100% 1.5px;
  background-position: top center;
}
.audit-form {

  background-image: linear-gradient(90deg,
    rgba(255,255,255,0) 6%,
    rgba(255,255,255,.5) 28%,
    rgba(255,255,255,.18) 50%,
    rgba(255,255,255,.55) 74%,
    rgba(255,255,255,0) 94%);
  background-repeat: no-repeat;
  background-size: 100% 1.4px;
  background-position: top center;
}

@media (min-width: 901px) {

  .hero-card {
    -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
  }
  .calc {

    background-color: var(--g-tint-2);
    -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
  }
  .contact-form {
    -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
  }
}

::selection { background: rgba(43,58,232,.24); color: var(--ink); }
html { caret-color: var(--teal); scrollbar-width: thin; scrollbar-color: rgba(43,58,232,.42) transparent; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(43,58,232,.38);
  border: 3px solid transparent; background-clip: padding-box;
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(43,58,232,.62); background-clip: padding-box; }

@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  .site-header__in, .hero-card, .card, .calc, .about__panel, .contact-form,
  .faq details, .scope, .result__cta, .mobile-bar, .btn--ghost, .opt__box,
  .field input, .field textarea, .field select, .area, .nav.is-open {
    background: #FFFFFF;
    border-color: var(--line);
  }
  .audit-form, .audit-form .field input { background: rgba(255,255,255,.1); }
  .ambient { opacity: .5; }

  .ambient::after { opacity: .55; }
}

@media (prefers-reduced-transparency: reduce) {
  .site-header__in, .hero-card, .card, .calc, .about__panel, .contact-form,
  .faq details, .scope, .mobile-bar, .btn--ghost, .opt__box,
  .field input, .field textarea, .field select, .area, .nav.is-open {
    background: #FFFFFF;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    border-color: var(--line);
  }
  .result__cta { background: var(--blue-050); }
  .ambient { display: none; }

  .site-header.is-dark .site-header__in {
    background-color: var(--night-2);
    border-color: rgba(255,255,255,.28);
  }

  .site-header__in, .hero-card, .calc, .contact-form, .audit-form {
    background-image: none;
  }
  .hero-card::after, .card::after { display: none; }
  .site-header__in::before, .hero-card::before, .card::before,
  .calc::before, .about__panel::before, .contact-form::before,
  .nav.is-open::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ambient span { animation: none; }
}

@media print {
  .ambient { display: none !important; }
}