/* PROprostu V28 — HOME + ONLINE UX patch 2026-08-20
   Scope: homepage navigator/search/Club and top-level ONLINE service pages.
   Rule: preserve current Frosted Midnight typography, radii, button shapes and card language;
   only rebalance layout, contain motion and add restrained ONLINE-blue signalling. */

:root{
  --pro28-online-blue:#72e6ff;
  --pro28-online-blue-soft:#9fdcff;
  --pro28-online-glow:rgba(114,230,255,.18);
  --pro28-online-line:rgba(114,230,255,.24);
}

/* HOME — keep the interactive navigator physically self-contained. */
body[data-cms-page="/"] .pro14-navigator{
  overflow:hidden!important;
  isolation:isolate;
}
body[data-cms-page="/"] .pro19-tech-navigator:before{
  content:"PRO / DECISION SYSTEM"!important;
  position:absolute!important;
  left:22px!important;
  top:19px!important;
  right:auto!important;
  bottom:auto!important;
  width:auto!important;
  height:auto!important;
  inset:auto!important;
  z-index:7!important;
  background:none!important;
  animation:none!important;
  transform:none!important;
  filter:none!important;
  opacity:1!important;
  color:rgba(199,211,234,.42)!important;
  font-family:var(--ak-mono)!important;
  font-size:7px!important;
  line-height:1!important;
  font-weight:900!important;
  letter-spacing:.14em!important;
  white-space:nowrap;
  pointer-events:none;
}
body[data-cms-page="/"] .pro19-scanline{
  z-index:1!important;
  top:0!important;
  bottom:0!important;
  left:-42%!important;
  right:auto!important;
  width:34%!important;
  height:auto!important;
  opacity:0;
  background:linear-gradient(90deg,transparent 0%,rgba(114,230,255,.025) 18%,rgba(114,230,255,.16) 48%,rgba(255,216,90,.035) 62%,transparent 100%)!important;
  box-shadow:0 0 52px rgba(114,230,255,.07)!important;
  filter:blur(1px);
  animation:pro28NavigatorSweep 7.6s cubic-bezier(.45,0,.2,1) infinite!important;
  transform:translate3d(0,0,0);
  pointer-events:none;
}
@keyframes pro28NavigatorSweep{
  0%,8%{transform:translate3d(0,0,0);opacity:0}
  16%{opacity:.88}
  82%{opacity:.78}
  92%,100%{transform:translate3d(430%,0,0);opacity:0}
}

/* HOME — cards retain their shape; only the problematic tiles are rebalanced. */
body[data-cms-page="/"] .pro14-nav-business{
  width:184px!important;
  min-height:108px!important;
  padding:15px!important;
  left:8%!important;
  top:40%!important;
}
body[data-cms-page="/"] .pro14-nav-business small{
  font-size:9px!important;
  line-height:1.35!important;
  max-width:17ch;
}
body[data-cms-page="/"] .pro14-nav-shop{
  right:1.5%!important;
  top:34%!important;
  width:176px!important;
  min-height:108px!important;
}
body[data-cms-page="/"] .pro14-nav-online{
  box-shadow:var(--ak-shadow-card),inset 0 0 0 1px rgba(114,230,255,.16),inset 0 24px 48px rgba(114,230,255,.035)!important;
}
body[data-cms-page="/"] .pro14-nav-online span{color:var(--pro28-online-blue)!important}
body[data-cms-page="/"] .pro14-nav-online:hover{
  box-shadow:inset 0 0 0 1px rgba(114,230,255,.38),inset 0 26px 56px rgba(114,230,255,.07),0 26px 70px rgba(0,0,0,.34)!important;
}

/* HOME — Club panel: same visual language, more even proportions and readable line length. */
body[data-cms-page="/"] .pro14-club-panel{
  grid-template-columns:minmax(150px,176px) minmax(0,1fr)!important;
  gap:30px!important;
  align-items:center!important;
  padding:30px 34px!important;
}
body[data-cms-page="/"] .pro14-club-logo{
  width:100%;
  height:154px!important;
  min-height:154px;
}
body[data-cms-page="/"] .pro14-club-panel h2{
  max-width:28ch!important;
  font-size:clamp(30px,3vw,39px)!important;
  line-height:1.05!important;
  margin:8px 0 10px!important;
}
body[data-cms-page="/"] .pro14-club-panel p{
  max-width:78ch!important;
  margin:0!important;
  line-height:1.65!important;
}
body[data-cms-page="/"] .pro14-club-panel .actions{margin-top:20px!important}

/* ONLINE identity — blue is a restrained system accent; brand-yellow CTA stays intact. */
body[data-pro-area="online"] .blue-pulse{
  position:relative;
  background:var(--pro28-online-blue)!important;
  box-shadow:0 0 16px rgba(114,230,255,.55)!important;
  isolation:isolate;
}
body[data-pro-area="online"] .blue-pulse:before,
body[data-pro-area="online"] .blue-pulse:after{
  content:"";
  position:absolute;
  left:50%;top:50%;
  width:100%;height:100%;
  border:1px solid rgba(114,230,255,.52);
  border-radius:50%;
  transform:translate(-50%,-50%) scale(1);
  opacity:0;
  pointer-events:none;
  animation:pro28BlueSignal 2.4s ease-out infinite;
}
body[data-pro-area="online"] .blue-pulse:after{animation-delay:1.2s}
@keyframes pro28BlueSignal{
  0%{transform:translate(-50%,-50%) scale(1);opacity:.72}
  70%,100%{transform:translate(-50%,-50%) scale(4.1);opacity:0}
}
body[data-pro-area="online"] .pro15-subnav a.active{
  color:#eaf9ff!important;
  background:rgba(114,230,255,.11)!important;
  border-color:rgba(114,230,255,.42)!important;
  box-shadow:inset 0 0 0 1px rgba(114,230,255,.08),0 0 24px rgba(114,230,255,.08)!important;
}
body[data-pro-area="online"] .pro15-subnav a:hover{border-color:rgba(114,230,255,.28)!important}

/* ONLINE hub hero — shorter headline, stronger hierarchy, same typography and component shapes. */
body[data-cms-page="/online/"] .pro19-online-hero{
  background:radial-gradient(ellipse 45% 34% at 76% 38%,rgba(114,230,255,.075),transparent 72%),transparent!important;
}
body[data-cms-page="/online/"] .pro19-online-hero-grid{
  grid-template-columns:minmax(0,1.02fr) minmax(390px,.98fr)!important;
  gap:58px!important;
  align-items:center!important;
}
body[data-cms-page="/online/"] .pro19-online-hero h1{
  max-width:13ch!important;
  font-size:clamp(47px,4.9vw,68px)!important;
  line-height:.98!important;
}
body[data-cms-page="/online/"] .pro19-online-hero h1 em{
  color:var(--pro28-online-blue-soft)!important;
  text-shadow:0 0 34px rgba(114,230,255,.08);
}
body[data-cms-page="/online/"] .pro19-online-hero .pro14-lead{
  max-width:690px!important;
  font-size:17px!important;
  line-height:1.68!important;
}
body[data-cms-page="/online/"] .pro28-online-command{
  min-height:360px!important;
  padding:27px!important;
  box-shadow:var(--ak-shadow-float),inset 0 0 0 1px rgba(114,230,255,.15)!important;
}
body[data-cms-page="/online/"] .pro28-online-command:before,
body[data-pro-area="online"] .pro19-price-console:before,
body[data-pro-area="online"] .pro19-command:before{
  inset:0 auto 0 -44%!important;
  width:36%!important;
  height:auto!important;
  background:linear-gradient(90deg,transparent,rgba(114,230,255,.10),rgba(255,216,90,.025),transparent)!important;
  transform:translate3d(0,0,0);
  animation:pro28ContainedBeam 7.4s cubic-bezier(.45,0,.2,1) infinite!important;
  opacity:0;
  pointer-events:none;
}
@keyframes pro28ContainedBeam{
  0%,8%{transform:translate3d(0,0,0);opacity:0}
  15%{opacity:.75}
  82%{opacity:.62}
  92%,100%{transform:translate3d(440%,0,0);opacity:0}
}
body[data-cms-page="/online/"] .pro19-command-head i:first-child{background:var(--pro28-online-blue)!important;box-shadow:0 0 12px rgba(114,230,255,.45)}
body[data-cms-page="/online/"] .pro19-command-body>small{color:rgba(159,220,255,.76)!important}
body[data-cms-page="/online/"] .pro19-command-body a{
  position:relative;
  overflow:hidden;
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease!important;
}
body[data-cms-page="/online/"] .pro19-command-body a b{color:var(--pro28-online-blue)!important}
body[data-cms-page="/online/"] .pro19-command-body a:hover,
body[data-cms-page="/online/"] .pro19-command-body a:focus-visible,
body[data-cms-page="/online/"] .pro19-command-body a.is-active{
  background:linear-gradient(90deg,rgba(114,230,255,.105),rgba(114,230,255,.025))!important;
  box-shadow:inset 0 0 0 1px rgba(114,230,255,.28),0 10px 30px rgba(0,0,0,.18)!important;
  transform:translateX(3px)!important;
}
body[data-cms-page="/online/"] .pro28-command-live{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  gap:9px;
  min-height:34px;
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid rgba(114,230,255,.12);
  color:#8999aa;
  font-size:9px;
  line-height:1.45;
}
body[data-cms-page="/online/"] .pro28-command-live i{
  flex:0 0 auto;
  width:6px;height:6px;
  border-radius:50%;
  background:var(--pro28-online-blue);
  box-shadow:0 0 14px rgba(114,230,255,.5);
}

/* ONLINE hub story layer. */
.pro28-online-story{position:relative}
.pro28-story-intro{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(300px,.65fr);
  gap:42px;
  align-items:end;
  margin-bottom:28px;
}
.pro28-story-intro h2{font-size:clamp(34px,4.2vw,54px);line-height:1.02;margin:8px 0 0;max-width:17ch}
.pro28-story-intro p{color:var(--ak-muted);font-size:14px;line-height:1.72;margin:0;max-width:58ch}
.pro28-route-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.pro28-route-card{
  position:relative;
  min-height:300px;
  padding:28px;
  border-radius:var(--ak-card-radius);
  background:linear-gradient(180deg,rgba(186,214,247,.04),rgba(186,214,247,.018));
  box-shadow:var(--ak-shadow-card),inset 0 0 0 1px var(--ak-line);
  overflow:hidden;
}
.pro28-route-card:after{
  content:"";
  position:absolute;
  width:210px;height:210px;
  right:-90px;top:-100px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(114,230,255,.095),transparent 68%);
  pointer-events:none;
}
.pro28-route-card>span{font-family:var(--ak-mono);font-size:9px;font-weight:900;letter-spacing:.12em;color:var(--pro28-online-blue)}
.pro28-route-card h3{font-size:clamp(25px,3vw,34px);line-height:1.05;margin:24px 0 11px;max-width:18ch}
.pro28-route-card p{color:var(--ak-muted);font-size:12px;line-height:1.68;max-width:62ch;margin:0}
.pro28-route-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}
.pro28-route-actions a{
  display:inline-flex;
  align-items:center;
  min-height:36px;
  padding:8px 11px;
  border-radius:var(--ak-pill);
  color:#d8ecf8;
  text-decoration:none;
  font-size:10px;
  font-weight:800;
  background:rgba(114,230,255,.055);
  box-shadow:inset 0 0 0 1px rgba(114,230,255,.14);
}
.pro28-route-actions a:hover{background:rgba(114,230,255,.11);box-shadow:inset 0 0 0 1px rgba(114,230,255,.32)}
.pro28-tool-example{
  margin-top:14px;
  display:grid;
  grid-template-columns:minmax(210px,.72fr) 1fr;
  gap:28px;
  align-items:center;
  padding:26px 28px;
  border-radius:var(--ak-card-radius);
  background:linear-gradient(100deg,rgba(114,230,255,.065),rgba(186,214,247,.018));
  box-shadow:var(--ak-shadow-card),inset 0 0 0 1px rgba(114,230,255,.13);
}
.pro28-tool-example>div:first-child span{font-family:var(--ak-mono);font-size:9px;font-weight:900;color:var(--pro28-online-blue);letter-spacing:.12em}
.pro28-tool-example h3{font-size:25px;margin:8px 0 0;line-height:1.08}
.pro28-tool-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.pro28-tool-steps div{padding:14px 15px;border-radius:12px;background:rgba(5,6,15,.48);box-shadow:inset 0 0 0 1px rgba(186,215,247,.10)}
.pro28-tool-steps b{display:block;font-family:var(--ak-mono);font-size:9px;color:var(--pro28-online-blue);margin-bottom:6px}
.pro28-tool-steps span{display:block;color:var(--ak-soft);font-size:10px;line-height:1.5}

/* ONLINE catalog — blue selection signal, yellow remains the CTA accent. */
body[data-cms-page="/online/"] .pro19-service-filters button.active{
  color:#eaf9ff!important;
  background:rgba(114,230,255,.12)!important;
  border-color:rgba(114,230,255,.42)!important;
  box-shadow:0 0 22px rgba(114,230,255,.08)!important;
}
body[data-cms-page="/online/"] .pro19-service-card:hover{box-shadow:inset 0 0 0 1px rgba(114,230,255,.21),0 24px 58px rgba(0,0,0,.30)!important}
body[data-cms-page="/online/"] .pro19-card-code{color:var(--pro28-online-blue)!important}

/* ONLINE subpages — fix oversized hero copy versus undersized visual/price card without changing component shapes. */
body[data-pro-area="online"] .pro14-service-hero .pro14-service-hero-grid,
body[data-pro-area="online"] .pro19-service-hero .pro19-service-grid{
  grid-template-columns:minmax(0,1fr) minmax(350px,.72fr)!important;
  gap:54px!important;
  align-items:center!important;
}
body[data-pro-area="online"] .pro14-service-hero h1,
body[data-pro-area="online"] .pro19-service-hero h1{
  max-width:17ch!important;
  font-size:clamp(43px,4.7vw,66px)!important;
  line-height:1.01!important;
}
body[data-pro-area="online"] .pro14-service-hero .pro14-lead,
body[data-pro-area="online"] .pro19-service-hero .pro14-lead{
  max-width:720px!important;
  font-size:16.5px!important;
  line-height:1.7!important;
}
body[data-pro-area="online"] .pro14-service-price,
body[data-pro-area="online"] .pro19-browser-visual,
body[data-pro-area="online"] .pro19-price-console,
body[data-pro-area="online"] .pro19-command{
  width:100%;
  min-height:300px;
  box-shadow:var(--ak-shadow-card),inset 0 0 0 1px rgba(114,230,255,.13)!important;
}
body[data-pro-area="online"] .pro14-service-price small{color:var(--pro28-online-blue)!important}
body[data-pro-area="online"] .pro14-service-price a{color:var(--pro28-online-blue-soft)!important}
body[data-pro-area="online"] .pro19-browser-visual .screen em{color:var(--pro28-online-blue)!important}

/* Subscription hero — references already use the desired blue language; only rebalance proportions. */
body[data-cms-page="/online/strona-na-abonament/"] .pro20-hero-grid{
  grid-template-columns:minmax(0,1fr) minmax(390px,.84fr)!important;
  gap:54px!important;
  align-items:center!important;
}
body[data-cms-page="/online/strona-na-abonament/"] .pro20-hero-copy h1{
  max-width:14.5ch!important;
  font-size:clamp(46px,5vw,68px)!important;
  line-height:.99!important;
}
body[data-cms-page="/online/strona-na-abonament/"] .pro20-hero-copy>p{font-size:17px!important;max-width:710px!important}
body[data-cms-page="/online/strona-na-abonament/"] .pro20-hero-card{
  min-height:330px;
  box-shadow:var(--ak-shadow-float),inset 0 0 0 1px rgba(114,230,255,.16)!important;
}

@media(max-width:1100px){
  body[data-cms-page="/online/"] .pro19-online-hero-grid,
  body[data-pro-area="online"] .pro14-service-hero .pro14-service-hero-grid,
  body[data-pro-area="online"] .pro19-service-hero .pro19-service-grid,
  body[data-cms-page="/online/strona-na-abonament/"] .pro20-hero-grid{grid-template-columns:1fr!important;gap:34px!important}
  body[data-cms-page="/online/"] .pro28-online-command,
  body[data-pro-area="online"] .pro14-service-price,
  body[data-pro-area="online"] .pro19-browser-visual,
  body[data-pro-area="online"] .pro19-price-console,
  body[data-pro-area="online"] .pro19-command,
  body[data-cms-page="/online/strona-na-abonament/"] .pro20-hero-card{max-width:720px}
  .pro28-story-intro{grid-template-columns:1fr;gap:16px;align-items:start}
}
@media(max-width:760px){
  body[data-cms-page="/"] .pro14-navigator{overflow:hidden!important}
  body[data-cms-page="/"] .pro19-tech-navigator:before{display:none!important}
  body[data-cms-page="/"] .pro14-nav-business,
  body[data-cms-page="/"] .pro14-nav-shop{width:auto!important;min-height:112px!important;padding:17px!important;position:static!important;transform:none!important}
  body[data-cms-page="/"] .pro14-nav-business small{max-width:none}
  body[data-cms-page="/"] .pro14-club-panel{grid-template-columns:1fr!important;padding:23px!important}
  body[data-cms-page="/"] .pro14-club-logo{height:146px!important}
  .pro28-route-grid{grid-template-columns:1fr}
  .pro28-route-card{min-height:0;padding:22px}
  .pro28-tool-example{grid-template-columns:1fr;padding:22px}
  .pro28-tool-steps{grid-template-columns:1fr}
  body[data-cms-page="/online/"] .pro19-online-hero h1,
  body[data-pro-area="online"] .pro14-service-hero h1,
  body[data-pro-area="online"] .pro19-service-hero h1,
  body[data-cms-page="/online/strona-na-abonament/"] .pro20-hero-copy h1{max-width:none!important}
}
@media(prefers-reduced-motion:reduce){
  body[data-cms-page="/"] .pro19-scanline,
  body[data-pro-area="online"] .blue-pulse:before,
  body[data-pro-area="online"] .blue-pulse:after,
  body[data-pro-area="online"] .pro19-price-console:before,
  body[data-pro-area="online"] .pro19-command:before{animation:none!important}
}

/* ========================================================================== */
/* PROprostu V29 — approved lighting/composition implementation                */
/* 2026-08-20: real CSS/JS effect, no baked concept graphics.                  */
/* ========================================================================== */

/* HOME / DECISION SYSTEM --------------------------------------------------- */
body[data-cms-page="/"] .pro14-navigator{
  --pro29-nav-x:50%;
  --pro29-nav-y:48%;
  overflow:hidden!important;
  isolation:isolate!important;
  background:
    radial-gradient(ellipse 48% 38% at var(--pro29-nav-x) var(--pro29-nav-y),rgba(93,164,255,.145) 0%,rgba(53,123,221,.075) 34%,transparent 72%),
    radial-gradient(ellipse 54% 26% at 50% 103%,rgba(76,154,255,.11) 0%,rgba(45,112,214,.045) 40%,transparent 76%),
    radial-gradient(circle at 50% 48%,rgba(152,192,239,.085),transparent 37%),
    rgba(186,214,247,.018)!important;
  box-shadow:
    inset 0 0 0 1px rgba(186,215,247,.08),
    inset 0 70px 120px rgba(168,216,245,.024),
    0 34px 90px rgba(0,0,0,.28)!important;
}
body[data-cms-page="/"] .pro14-navigator:after{
  content:""!important;
  position:absolute!important;
  inset:-14%!important;
  border-radius:36%!important;
  pointer-events:none!important;
  z-index:0!important;
  background:
    radial-gradient(ellipse 34% 30% at var(--pro29-nav-x) var(--pro29-nav-y),rgba(174,220,255,.105),rgba(98,164,255,.045) 42%,transparent 72%),
    radial-gradient(ellipse 42% 22% at 50% 86%,rgba(87,166,255,.10),transparent 72%)!important;
  filter:blur(22px)!important;
  opacity:.95!important;
  transform:none!important;
}

/* every outer tile uses one physical footprint; only placement differs */
body[data-cms-page="/"] .pro14-nav-tile{
  width:190px!important;
  height:112px!important;
  min-height:112px!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
  padding:17px!important;
  background:
    linear-gradient(145deg,rgba(120,177,255,.045),rgba(11,14,25,.82) 36%,rgba(8,11,20,.86))!important;
  box-shadow:
    0 20px 46px rgba(0,0,0,.26),
    0 2px 18px rgba(51,126,225,.025),
    inset 0 0 0 1px rgba(186,215,247,.10),
    inset 0 1px 0 rgba(221,239,255,.025)!important;
}
body[data-cms-page="/"] .pro14-nav-tile:hover{
  box-shadow:
    0 26px 58px rgba(0,0,0,.34),
    0 0 34px rgba(69,151,255,.09),
    inset 0 0 0 1px rgba(125,195,255,.29),
    inset 0 20px 44px rgba(93,164,255,.055)!important;
}
body[data-cms-page="/"] .pro14-nav-tile small{
  line-height:1.34!important;
}
body[data-cms-page="/"] .pro14-nav-business{
  left:3.6%!important;
  top:41%!important;
  width:190px!important;
  height:112px!important;
  min-height:112px!important;
  padding:17px!important;
  transform:rotate(2deg)!important;
}
body[data-cms-page="/"] .pro14-nav-business:hover{
  transform:rotate(1deg) translateY(-7px)!important;
}
body[data-cms-page="/"] .pro14-nav-business small{
  max-width:19ch!important;
  font-size:9px!important;
  line-height:1.3!important;
}
body[data-cms-page="/"] .pro14-nav-shop{
  right:2.8%!important;
  top:35.5%!important;
  width:190px!important;
  height:112px!important;
  min-height:112px!important;
  padding:17px!important;
}

/* central module: same shape, more convincing light interaction */
body[data-cms-page="/"] .pro14-nav-center{
  position:absolute!important;
  overflow:visible!important;
  box-shadow:
    0 28px 62px rgba(0,0,0,.42),
    0 0 0 1px rgba(125,190,255,.13),
    0 0 44px rgba(61,139,247,.11),
    inset 0 0 0 1px rgba(186,215,247,.095),
    inset 0 20px 54px rgba(85,151,244,.035)!important;
}
body[data-cms-page="/"] .pro14-nav-center:after{
  content:"";
  position:absolute;
  left:12%;right:12%;bottom:-34px;
  height:58px;
  border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(71,154,255,.30) 0%,rgba(53,132,243,.12) 38%,transparent 72%);
  filter:blur(17px);
  opacity:.76;
  pointer-events:none;
  z-index:-1;
}

/* smooth moving light volume. It is born outside the clipped module and dies outside. */
body[data-cms-page="/"] .pro19-scanline{
  position:absolute!important;
  z-index:1!important;
  top:-30%!important;
  bottom:auto!important;
  left:-88%!important;
  right:auto!important;
  width:66%!important;
  height:160%!important;
  opacity:0!important;
  pointer-events:none!important;
  border-radius:50%!important;
  background:
    linear-gradient(98deg,
      transparent 0%,
      rgba(48,118,220,.00) 17%,
      rgba(72,151,255,.045) 34%,
      rgba(169,219,255,.16) 47%,
      rgba(226,244,255,.23) 50%,
      rgba(105,181,255,.095) 55%,
      rgba(58,129,231,.025) 70%,
      transparent 100%)!important;
  box-shadow:none!important;
  filter:blur(17px) saturate(115%)!important;
  mix-blend-mode:screen!important;
  transform:translate3d(0,0,0) rotate(-6deg)!important;
  transform-origin:center!important;
  will-change:transform,opacity!important;
  animation:pro29RaySweep 8.8s cubic-bezier(.42,0,.2,1) infinite!important;
}
body[data-cms-page="/"] .pro19-scanline:before{
  content:"";
  position:absolute;
  left:27%;top:7%;
  width:46%;height:86%;
  border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(183,225,255,.12),rgba(75,154,255,.055) 38%,transparent 72%);
  filter:blur(22px);
  opacity:.9;
}
body[data-cms-page="/"] .pro19-scanline:after{
  content:"";
  position:absolute;
  left:43%;top:4%;
  width:11%;height:92%;
  border-radius:50%;
  background:linear-gradient(180deg,transparent,rgba(222,243,255,.17) 30%,rgba(127,194,255,.20) 50%,rgba(219,241,255,.15) 70%,transparent);
  filter:blur(9px);
}
@keyframes pro29RaySweep{
  0%{transform:translate3d(0,0,0) rotate(-6deg);opacity:0}
  8%{opacity:0}
  18%{opacity:.44}
  50%{opacity:.70}
  82%{opacity:.38}
  92%{opacity:0}
  100%{transform:translate3d(410%,0,0) rotate(-6deg);opacity:0}
}

/* SUBSCRIPTION HERO -------------------------------------------------------- */
body[data-cms-page="/online/strona-na-abonament/"] .pro20-hero{
  --pro29-hero-x:72%;
  --pro29-hero-y:42%;
  background:
    radial-gradient(ellipse 44% 52% at var(--pro29-hero-x) var(--pro29-hero-y),rgba(47,126,226,.13),rgba(24,76,146,.035) 46%,transparent 76%),
    radial-gradient(ellipse 38% 18% at 78% 96%,rgba(65,145,255,.09),transparent 72%),
    linear-gradient(180deg,#080a0d,#0b0e13)!important;
}
body[data-cms-page="/online/strona-na-abonament/"] .pro20-hero-grid{
  grid-template-columns:minmax(0,.96fr) minmax(500px,1.04fr)!important;
  gap:clamp(46px,5.3vw,82px)!important;
  align-items:center!important;
}
body[data-cms-page="/online/strona-na-abonament/"] .pro20-hero-copy{
  min-width:0;
}
body[data-cms-page="/online/strona-na-abonament/"] .pro20-hero-copy h1{
  max-width:10.9ch!important;
  font-size:clamp(48px,4.7vw,66px)!important;
  line-height:.985!important;
  letter-spacing:-.052em!important;
  text-wrap:balance;
}
body[data-cms-page="/online/strona-na-abonament/"] .pro20-hero-copy h1 em{
  display:block!important;
  margin-top:.06em;
}
body[data-cms-page="/online/strona-na-abonament/"] .pro20-hero-copy>p{
  max-width:610px!important;
  font-size:16.5px!important;
  line-height:1.63!important;
}
body[data-cms-page="/online/strona-na-abonament/"] .pro20-price-promise{
  width:min(100%,600px)!important;
}

body[data-cms-page="/online/strona-na-abonament/"] .pro20-hero-card{
  --pro29-panel-x:50%;
  --pro29-panel-y:50%;
  position:relative!important;
  isolation:isolate!important;
  justify-self:end!important;
  width:min(100%,600px)!important;
  min-height:0!important;
  aspect-ratio:1.38 / 1!important;
  border:0!important;
  border-radius:25px!important;
  overflow:hidden!important;
  background:
    linear-gradient(145deg,rgba(64,134,217,.055),rgba(7,10,14,.80) 30%,rgba(5,8,13,.86))!important;
  box-shadow:
    0 34px 90px rgba(0,0,0,.43),
    0 36px 52px -28px rgba(63,151,255,.52),
    0 18px 46px -25px rgba(103,196,255,.32),
    inset 0 0 0 1px rgba(125,205,255,.28),
    inset 0 1px 0 rgba(226,245,255,.055),
    inset 0 -22px 54px rgba(34,97,177,.035)!important;
  transition:box-shadow .28s ease,filter .28s ease,transform .18s ease!important;
}
body[data-cms-page="/online/strona-na-abonament/"] .pro20-hero-card:hover{
  box-shadow:
    0 38px 100px rgba(0,0,0,.47),
    0 42px 62px -28px rgba(67,157,255,.65),
    0 16px 50px -22px rgba(122,207,255,.38),
    inset 0 0 0 1px rgba(143,215,255,.42),
    inset 0 1px 0 rgba(235,248,255,.075),
    inset 0 -26px 62px rgba(51,121,209,.05)!important;
}
/* moving specular volume clipped to the panel */
body[data-cms-page="/online/strona-na-abonament/"] .pro20-hero-card:before{
  content:"";
  position:absolute;
  z-index:0;
  left:-82%;top:-34%;
  width:62%;height:170%;
  border-radius:48%;
  pointer-events:none;
  background:
    linear-gradient(100deg,
      transparent 0%,
      rgba(73,145,235,.015) 20%,
      rgba(110,190,255,.065) 40%,
      rgba(223,244,255,.18) 49%,
      rgba(145,207,255,.10) 55%,
      rgba(71,148,240,.025) 72%,
      transparent 100%);
  filter:blur(15px) saturate(120%);
  mix-blend-mode:screen;
  opacity:0;
  transform:translate3d(0,0,0) rotate(-5deg);
  will-change:transform,opacity;
  animation:pro29PanelSweep 9.6s cubic-bezier(.42,0,.2,1) infinite;
}
body[data-cms-page="/online/strona-na-abonament/"] .pro20-hero-card:after{
  content:"";
  position:absolute;
  z-index:1;
  inset:-1px;
  border-radius:inherit;
  pointer-events:none;
  background:
    radial-gradient(circle 170px at var(--pro29-panel-x) var(--pro29-panel-y),rgba(148,211,255,.12) 0%,rgba(83,162,255,.052) 37%,transparent 72%),
    linear-gradient(180deg,rgba(208,236,255,.015),transparent 27%,transparent 72%,rgba(72,151,255,.026));
  mix-blend-mode:screen;
}
@keyframes pro29PanelSweep{
  0%{transform:translate3d(0,0,0) rotate(-5deg);opacity:0}
  10%{opacity:0}
  21%{opacity:.42}
  50%{opacity:.72}
  79%{opacity:.38}
  91%{opacity:0}
  100%{transform:translate3d(430%,0,0) rotate(-5deg);opacity:0}
}
body[data-cms-page="/online/strona-na-abonament/"] .pro20-terminal-head,
body[data-cms-page="/online/strona-na-abonament/"] .pro20-terminal-body{
  position:relative;
  z-index:2;
}
body[data-cms-page="/online/strona-na-abonament/"] .pro20-terminal-head{
  height:54px!important;
  padding:0 20px!important;
  background:linear-gradient(180deg,rgba(221,240,255,.026),rgba(255,255,255,.012))!important;
  border-bottom-color:rgba(148,190,229,.13)!important;
}
body[data-cms-page="/online/strona-na-abonament/"] .pro20-terminal-body{
  padding:30px 34px 31px!important;
}
body[data-cms-page="/online/strona-na-abonament/"] .pro20-terminal-body>b{
  font-size:clamp(26px,2.35vw,32px)!important;
  margin:10px 0 22px!important;
}
body[data-cms-page="/online/strona-na-abonament/"] .pro20-terminal-body ul{
  grid-template-columns:1fr 1fr!important;
  gap:10px 12px!important;
}
body[data-cms-page="/online/strona-na-abonament/"] .pro20-terminal-body li{
  min-height:43px;
  display:flex;
  align-items:center;
  padding:11px 13px!important;
  background:linear-gradient(180deg,rgba(198,226,255,.026),rgba(255,255,255,.012))!important;
  border-color:rgba(186,215,247,.13)!important;
  box-shadow:inset 0 1px 0 rgba(235,248,255,.018);
  transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease;
}
body[data-cms-page="/online/strona-na-abonament/"] .pro20-terminal-body li:hover{
  transform:translateY(-1px);
  border-color:rgba(121,204,255,.34)!important;
  background:linear-gradient(180deg,rgba(74,153,242,.075),rgba(255,255,255,.016))!important;
  box-shadow:0 7px 22px rgba(0,0,0,.16),inset 0 0 0 1px rgba(104,188,255,.045);
}
body[data-cms-page="/online/strona-na-abonament/"] .pro20-terminal-body>span{
  margin-top:19px!important;
}

@media(max-width:1180px){
  body[data-cms-page="/online/strona-na-abonament/"] .pro20-hero-grid{
    grid-template-columns:minmax(0,.94fr) minmax(430px,1.06fr)!important;
    gap:38px!important;
  }
  body[data-cms-page="/online/strona-na-abonament/"] .pro20-hero-copy h1{
    font-size:clamp(46px,5vw,61px)!important;
  }
}
@media(max-width:1100px){
  body[data-cms-page="/online/strona-na-abonament/"] .pro20-hero-grid{
    grid-template-columns:1fr!important;
    gap:38px!important;
  }
  body[data-cms-page="/online/strona-na-abonament/"] .pro20-hero-copy h1{
    max-width:12ch!important;
  }
  body[data-cms-page="/online/strona-na-abonament/"] .pro20-hero-card{
    justify-self:start!important;
    width:min(100%,620px)!important;
  }
}
@media(max-width:760px){
  body[data-cms-page="/"] .pro14-nav-tile,
  body[data-cms-page="/"] .pro14-nav-business,
  body[data-cms-page="/"] .pro14-nav-shop{
    width:auto!important;
    height:auto!important;
    min-height:112px!important;
  }
  body[data-cms-page="/online/strona-na-abonament/"] .pro20-hero-card{
    aspect-ratio:auto!important;
  }
  body[data-cms-page="/online/strona-na-abonament/"] .pro20-terminal-body{
    padding:24px!important;
  }
}
@media(max-width:560px){
  body[data-cms-page="/online/strona-na-abonament/"] .pro20-terminal-body ul{
    grid-template-columns:1fr!important;
  }
}
@media(prefers-reduced-motion:reduce){
  body[data-cms-page="/"] .pro19-scanline,
  body[data-cms-page="/online/strona-na-abonament/"] .pro20-hero-card:before{
    animation:none!important;
    display:none!important;
  }
}