/* Xander Digital V10 — final visual direction
   Precision, depth and restrained motion without adding dependencies. */

:root{
  --v10-cyan:#59dcff;
  --v10-blue:#3975ff;
  --v10-ink:#030711;
  --v10-panel:#0a1728;
  --v10-line:rgba(91,190,255,.22);
}

body{
  background:
    radial-gradient(circle at 78% 5%,rgba(40,105,255,.13),transparent 30rem),
    radial-gradient(circle at 5% 34%,rgba(45,202,255,.055),transparent 30rem),
    var(--v10-ink);
}

body::after{
  content:"";
  position:fixed;
  z-index:-1;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg,transparent 0,rgba(82,189,255,.025) 50%,transparent 100%);
  opacity:.8;
}

.header::after{
  content:"";
  position:absolute;
  inset:auto 0 -1px;
  height:1px;
  background:linear-gradient(90deg,transparent 4%,rgba(68,128,255,.2) 30%,rgba(89,220,255,.62) 50%,rgba(68,128,255,.2) 70%,transparent 96%);
  opacity:.48;
}

.section-head h2,.motion-copy h3{text-wrap:balance}
.section-head p,.motion-copy p{text-wrap:pretty}

.kicker{
  color:#77e4ff;
  text-shadow:0 0 22px rgba(73,210,255,.22);
}

.btn{
  position:relative;
  overflow:hidden;
}

.btn::after{
  content:"";
  position:absolute;
  top:-70%;
  left:-55%;
  width:38%;
  height:240%;
  transform:rotate(22deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);
  transition:left .55s ease;
  pointer-events:none;
}

.btn:hover::after{left:125%}

/* Hero: stronger first viewport, still calm and readable. */
.hero-v8{
  min-height:900px;
  padding:150px 0 92px;
}

.hero-v8::after{
  width:60rem;
  height:60rem;
  right:-22rem;
  top:-22rem;
  background:radial-gradient(circle,rgba(35,111,255,.25),rgba(57,211,255,.065) 43%,transparent 70%);
}

.hero-v8 .hero-grid{
  grid-template-columns:minmax(0,1.06fr) minmax(500px,.94fr);
  gap:66px;
}

.hero-v8 h1{
  max-width:790px;
  font-size:clamp(3.15rem,5vw,5.15rem);
  line-height:.98;
  letter-spacing:-.064em;
}

.hero-gradient-phrase{
  padding-bottom:.08em;
  background-image:linear-gradient(105deg,#fff 2%,#b8f1ff 38%,#54d7ff 66%,#4d7cff 100%);
}

.hero-v8 .hero-copy{
  max-width:690px;
  font-size:1.08rem;
  color:#bdcada;
}

.hero-v8 .availability{
  box-shadow:inset 0 1px rgba(255,255,255,.05),0 12px 35px rgba(0,0,0,.2);
}

/* V12: make the existing cinematic layer visible and turn the right-hand
   system mockup into a readable, continuous story instead of a still image. */
.hero-cinematic video{
  opacity:.34;
  filter:saturate(1.08) contrast(1.17) brightness(.9);
  animation:v12-hero-film 10s ease-in-out infinite alternate;
}

.hero-vignette{
  background:
    linear-gradient(90deg,rgba(5,9,20,.99) 0%,rgba(5,9,20,.93) 37%,rgba(5,9,20,.42) 69%,rgba(5,9,20,.66) 100%),
    linear-gradient(180deg,rgba(5,9,20,.22),rgba(5,9,20,.36) 58%,#050914 100%);
}

@keyframes v12-hero-film{
  from{transform:scale(1.18) translate3d(0,0,0)}
  to{transform:scale(1.24) translate3d(-1.2%,-.7%,0)}
}

.hero-system{
  min-height:575px;
  isolation:isolate;
}

.hero-system::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:7% -2% 6% 4%;
  border:1px solid rgba(87,190,255,.1);
  border-radius:42% 58% 46% 54%;
  background:conic-gradient(from 200deg,rgba(49,108,255,.11),transparent 28%,rgba(78,211,255,.09),transparent 67%);
  filter:blur(.2px);
  animation:v10-orbit 18s linear infinite;
}

.hero-browser,.hero-chat-card,.hero-panel-card{
  border-color:rgba(98,189,255,.36);
  box-shadow:0 38px 110px rgba(0,0,0,.58),0 0 42px rgba(54,135,255,.07),inset 0 1px rgba(255,255,255,.065);
}

.hero-browser{animation:v12-hero-browser 9s ease-in-out infinite}
.hero-chat-card{animation:v12-hero-chat 9s ease-in-out infinite}
.hero-panel-card{animation:v12-hero-panel 9s ease-in-out infinite}
.hero-browser-body>i{animation:v12-cta-pulse 3.2s ease-in-out infinite}
.hero-chat-card p{animation:v12-chat-focus 9s ease-in-out infinite}
.hero-chat-card p.answer{animation-delay:-6s}
.hero-chat-card small{animation:v12-chat-focus 9s ease-in-out -3s infinite}
.hero-panel-card .status-new{animation:v12-status-pulse 2.8s ease-in-out infinite}
.hero-panel-action{position:relative;overflow:hidden}
.hero-panel-action::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(100deg,transparent 15%,rgba(128,234,255,.18) 50%,transparent 85%);
  transform:translateX(-120%);
  animation:v12-action-scan 4.5s ease-in-out 1.7s infinite;
}

@keyframes v12-hero-browser{
  0%,100%{transform:perspective(1000px) rotateY(-7deg) rotateX(2deg) translate3d(0,0,0)}
  50%{transform:perspective(1000px) rotateY(-4deg) rotateX(1deg) translate3d(0,-11px,18px)}
}
@keyframes v12-hero-chat{
  0%,100%{transform:translate3d(0,0,12px)}
  34%{transform:translate3d(-8px,-12px,25px)}
  68%{transform:translate3d(2px,-5px,18px)}
}
@keyframes v12-hero-panel{
  0%,100%{transform:translate3d(0,0,18px)}
  42%{transform:translate3d(8px,-10px,30px)}
  74%{transform:translate3d(2px,-4px,22px)}
}
@keyframes v12-cta-pulse{
  0%,100%{box-shadow:0 0 0 rgba(55,198,255,0)}
  50%{box-shadow:0 0 0 6px rgba(55,198,255,.08),0 0 25px rgba(55,198,255,.18)}
}
@keyframes v12-chat-focus{
  0%,100%{opacity:.65;filter:saturate(.78)}
  20%,42%{opacity:1;filter:saturate(1.18);border-color:rgba(93,220,255,.48)}
  58%{opacity:.72;filter:saturate(.9)}
}
@keyframes v12-status-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(44,221,167,0)}
  50%{box-shadow:0 0 0 5px rgba(44,221,167,.08),0 0 17px rgba(44,221,167,.2)}
}
@keyframes v12-action-scan{
  0%,35%{transform:translateX(-120%)}
  68%,100%{transform:translateX(120%)}
}

.hero-browser::after{
  content:"";
  position:absolute;
  z-index:3;
  top:0;
  bottom:0;
  width:26%;
  left:-36%;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(103,220,255,.08),transparent);
  transform:skewX(-15deg);
  animation:v10-scan 8s ease-in-out infinite;
}

.hero-orbit{
  border-color:rgba(89,220,255,.38);
  color:#9db5cc;
  box-shadow:0 15px 40px rgba(0,0,0,.32),inset 0 1px rgba(255,255,255,.04);
}

@keyframes v10-orbit{to{transform:rotate(360deg)}}
@keyframes v10-scan{0%,30%{left:-36%}72%,100%{left:125%}}

/* Sections and cards: clearer depth hierarchy. */
.trustbar{
  position:relative;
  box-shadow:0 28px 70px rgba(0,0,0,.22);
}

.trustitem b{font-size:.82rem}
.trustitem span{font-size:.74rem}

.benefits-v8 .benefit,
.base-price-card,
.module-card,
.process-step{
  --mx:50%;
  --my:0%;
  background-image:
    radial-gradient(circle at var(--mx) var(--my),rgba(78,204,255,.11),transparent 12rem),
    linear-gradient(148deg,rgba(14,30,51,.98),rgba(6,15,27,.99));
}

.benefits-v8 .benefit{
  border-color:rgba(79,157,215,.26);
  box-shadow:0 30px 70px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.035);
  transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease;
}

.benefits-v8 .benefit:hover{
  transform:translateY(-7px);
  border-color:rgba(89,220,255,.48);
  box-shadow:0 40px 85px rgba(0,0,0,.32),0 0 30px rgba(73,210,255,.06);
}

.benefits-v8 .benefit-highlight{
  border-color:rgba(89,220,255,.48);
  background-image:
    radial-gradient(circle at var(--mx) var(--my),rgba(89,220,255,.18),transparent 13rem),
    linear-gradient(148deg,#102c49,#071522);
}

.benefits-v8 .benefit p{font-size:.96rem}
.benefits-v8 .benefit li{font-size:.72rem}

.modular-callout{
  border-color:rgba(74,172,233,.3);
  background:linear-gradient(120deg,rgba(10,26,45,.94),rgba(7,17,31,.96));
  box-shadow:0 24px 70px rgba(0,0,0,.18),inset 0 1px rgba(255,255,255,.025);
}

.system-v8{
  background:
    radial-gradient(circle at 52% 46%,rgba(37,107,255,.11),transparent 34rem),
    linear-gradient(180deg,#06101d,#050b15);
}

.product-stage{
  border-color:rgba(75,176,238,.34);
  box-shadow:0 45px 125px rgba(0,0,0,.42),0 0 70px rgba(31,115,224,.06),inset 0 1px rgba(255,255,255,.045);
}

/* The large process mockup stays crisp HTML, but now behaves like a short
   product film: website call-to-action -> AI exchange -> populated panel. */
.product-stage .stage-site{animation:v12-stage-site 10s ease-in-out infinite}
.product-stage .stage-phone{animation:v12-stage-phone 10s ease-in-out infinite}
.product-stage .stage-panel{animation:v12-stage-panel 10s ease-in-out infinite}
.product-stage .fake-button{animation:v12-stage-cta 3.4s ease-in-out infinite}
.product-stage .chat-bubble{animation:v12-stage-bubble 8s ease-in-out infinite}
.product-stage .chat-bubble:nth-child(3){animation-delay:0s}
.product-stage .chat-bubble:nth-child(4){animation-delay:-5.35s}
.product-stage .chat-bubble:nth-child(5){animation-delay:-2.7s}
.product-stage .panel-card{animation:v12-panel-card 8s ease-in-out -1.3s infinite}
.product-stage .panel-data>div{animation:v12-panel-data 8s ease-in-out infinite}
.product-stage .panel-data>div:nth-child(2){animation-delay:-6s}
.product-stage .panel-data>div:nth-child(3){animation-delay:-4s}
.product-stage .panel-data>div:nth-child(4){animation-delay:-2s}
.product-stage .stage-connector i::after{
  left:0;
  right:auto;
  animation:v12-data-travel 3.8s ease-in-out infinite;
}
.product-stage .connector-two i::after{animation-delay:-1.9s}

@keyframes v12-stage-site{
  0%,100%{transform:perspective(900px) rotateY(5deg) translateY(0)}
  50%{transform:perspective(900px) rotateY(3deg) translateY(-7px)}
}
@keyframes v12-stage-phone{
  0%,100%{transform:rotate(-2.7deg) translateY(0)}
  48%{transform:rotate(-1.5deg) translateY(-11px)}
}
@keyframes v12-stage-panel{
  0%,100%{transform:translateY(0)}
  58%{transform:translateY(-8px)}
}
@keyframes v12-stage-cta{
  0%,100%{box-shadow:0 0 0 0 rgba(62,205,255,0)}
  50%{box-shadow:0 0 0 7px rgba(62,205,255,.08),0 0 24px rgba(47,142,255,.3)}
}
@keyframes v12-stage-bubble{
  0%,100%{opacity:.58;transform:translateY(5px);filter:saturate(.82)}
  16%,38%{opacity:1;transform:translateY(0);filter:saturate(1.18);border-color:rgba(86,216,255,.48)}
  54%{opacity:.72;transform:translateY(0);filter:saturate(.92)}
}
@keyframes v12-panel-card{
  0%,100%{border-color:#234562;box-shadow:0 0 0 rgba(73,210,255,0)}
  26%,48%{border-color:rgba(75,220,255,.5);box-shadow:0 0 24px rgba(49,159,255,.11)}
}
@keyframes v12-panel-data{
  0%,100%{border-color:#1b344d;background:#081522}
  18%,36%{border-color:rgba(74,202,255,.42);background:#0b2032;box-shadow:inset 0 0 18px rgba(61,170,255,.06)}
}
@keyframes v12-data-travel{
  0%{left:0;opacity:0;transform:scale(.7)}
  14%{opacity:1}
  78%{left:100%;opacity:1;transform:scale(1.45)}
  100%{left:100%;opacity:0;transform:scale(.7)}
}

.product-stage::after{
  content:"";
  position:absolute;
  z-index:1;
  inset:0;
  pointer-events:none;
  background:linear-gradient(110deg,transparent 20%,rgba(85,212,255,.035) 48%,transparent 72%);
  animation:v10-stage-light 9s ease-in-out infinite alternate;
}

.stage-site,.stage-phone,.stage-panel{z-index:2}
.stage-connector{z-index:4}

@keyframes v10-stage-light{
  from{transform:translateX(-24%)}
  to{transform:translateX(24%)}
}

.system-steps article{
  position:relative;
  transition:background .25s ease;
}

.system-steps article:hover{background:rgba(35,96,154,.09)}
.system-steps h3{font-size:.96rem}
.system-steps p{font-size:.84rem}

/* Cinematic story: the entire 16:9 source is visible. */
.motion-showcase{
  position:relative;
  padding:130px 0;
  background:
    radial-gradient(circle at 50% 8%,rgba(48,121,255,.13),transparent 32rem),
    linear-gradient(180deg,#050914,#07111f 48%,#050914);
}

.motion-showcase::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:linear-gradient(rgba(82,188,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(82,188,255,.03) 1px,transparent 1px);
  background-size:76px 76px;
  mask-image:linear-gradient(to bottom,transparent,black 18%,black 82%,transparent);
}

.motion-card{
  border-color:rgba(72,165,225,.3);
  box-shadow:0 44px 120px rgba(0,0,0,.4),0 0 70px rgba(45,126,236,.055);
}

.motion-card-feature{
  width:min(1180px,100%);
  display:grid;
  grid-template-columns:1fr;
  background:linear-gradient(155deg,#0b1b2e,#06101d);
}

.motion-card-feature .motion-media{
  min-height:0;
  aspect-ratio:16/9;
  isolation:isolate;
  background:#030812;
}

.motion-media-contain::before{
  content:"";
  position:absolute;
  z-index:0;
  inset:-12px;
  background:url('design-process-poster.webp?v=20260909-v11') center/cover no-repeat;
  filter:blur(20px) saturate(.8);
  opacity:.25;
}

.motion-card-feature .motion-media video,
.motion-card.reverse .motion-media video{
  z-index:1;
  object-fit:contain;
  object-position:center;
  transform:none;
}

.motion-card-feature .motion-media::after{
  z-index:2;
  background:linear-gradient(180deg,rgba(4,9,17,.06),transparent 65%,rgba(4,9,17,.32));
}

.motion-tag,.video-brand-cover{z-index:4}

.motion-card-feature .video-brand-cover{
  right:1.5%;
  bottom:2.5%;
  width:200px;
  min-width:0;
  height:135px;
  padding:0 18px 17px;
  align-items:flex-end;
  justify-content:flex-end;
  overflow:hidden;
  border:1px solid rgba(89,220,255,.28);
  border-radius:14px;
  background:linear-gradient(145deg,rgba(5,14,26,.98),rgba(12,35,58,.98));
  box-shadow:0 18px 45px rgba(0,0,0,.48),0 0 24px rgba(73,210,255,.08);
}

.motion-card-feature .motion-copy{
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:72px;
  align-items:start;
  padding:52px 56px 56px;
  border-top:1px solid rgba(78,166,225,.2);
  background:
    radial-gradient(circle at 12% 14%,rgba(72,209,255,.08),transparent 17rem),
    linear-gradient(135deg,rgba(11,28,47,.98),rgba(5,14,26,.99));
}

.motion-card-feature .motion-copy h3{
  margin-bottom:0;
  font-size:clamp(2rem,3.5vw,3.35rem);
}

.motion-card-feature .motion-copy-detail>p{
  margin-top:0;
  color:#a9bbcd;
  font-size:1rem;
}

.motion-card-feature .motion-point{font-size:.87rem}

.motion-card.reverse{align-items:center}
.motion-card.reverse .motion-media{
  min-height:0;
  aspect-ratio:16/9;
  background:radial-gradient(circle at center,rgba(38,126,189,.18),transparent 60%),#050b14;
}

.motion-card.reverse .video-brand-cover{
  right:3.5%;
  bottom:9%;
  min-width:94px;
  height:58px;
  border-radius:12px;
}

/* Pricing: only the three public modules, presented as substantial products. */
.module-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}

.module-card{
  min-height:310px;
  padding:30px 28px;
  border-color:rgba(75,158,215,.3);
  box-shadow:0 28px 70px rgba(0,0,0,.2),inset 0 1px rgba(255,255,255,.035);
}

.module-card:hover{
  transform:translateY(-8px);
  border-color:rgba(89,220,255,.58);
  box-shadow:0 42px 90px rgba(0,0,0,.32),0 0 38px rgba(73,210,255,.07);
}

.module-card.module-ai{
  border-color:rgba(89,220,255,.52);
  background-image:
    radial-gradient(circle at var(--mx) var(--my),rgba(89,220,255,.18),transparent 13rem),
    linear-gradient(150deg,#102c48,#071522);
}

.module-card h3{font-size:1.25rem}
.module-card p{max-width:32rem;font-size:.96rem}
.module-price{font-size:.82rem}
.module-price>span{display:block;margin-bottom:2px}
.module-price strong{font-size:1.08rem}
.module-recurring{
  margin-top:11px;
  padding-top:10px;
  border-top:1px solid rgba(75,158,215,.22);
  color:#6f8ca6;
  font-size:.68rem;
  line-height:1.38;
}
.module-recurring span{display:block}
.module-recurring b{display:block;margin-top:2px;color:#b7cce0;font-weight:700}
.module-card>a{font-size:.86rem}

.base-price-card{
  border-color:rgba(70,144,201,.27);
  box-shadow:0 27px 70px rgba(0,0,0,.2),inset 0 1px rgba(255,255,255,.03);
  transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease;
}

.base-price-card:hover{
  transform:translateY(-6px);
  border-color:rgba(83,190,246,.48);
  box-shadow:0 38px 85px rgba(0,0,0,.3),0 0 34px rgba(55,135,244,.05);
}

.base-price-card.featured{
  background-image:
    radial-gradient(circle at var(--mx) var(--my),rgba(89,220,255,.15),transparent 12rem),
    linear-gradient(155deg,#102b47,#071522);
}

.base-price-card.business{
  background-image:
    radial-gradient(circle at var(--mx) var(--my),rgba(71,128,255,.13),transparent 12rem),
    linear-gradient(155deg,#111e3a,#071322);
}

.base-price-card>p{font-size:.9rem}
.base-price-card .feature-list li{font-size:.84rem}

/* Proof, brief and final close. */
.portfolio-slider{
  position:relative;
  border-color:rgba(75,168,228,.31);
  box-shadow:0 42px 120px rgba(0,0,0,.32),0 0 55px rgba(51,132,234,.05);
}

.portfolio-slider::before{
  content:"";
  position:absolute;
  z-index:2;
  inset:-1px 18% auto;
  height:1px;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--v10-cyan),transparent);
  opacity:.62;
}

.live-site img{transition:transform .7s cubic-bezier(.2,.8,.2,1),filter .5s ease}
.browser:hover .live-site img{transform:scale(1.025);filter:saturate(1.06) brightness(1.03)}

.brief-shell{
  border-color:rgba(76,169,226,.36);
  box-shadow:0 50px 130px rgba(0,0,0,.4),0 0 70px rgba(45,129,234,.05);
}

.choice label{
  border-color:rgba(73,139,194,.34);
  transition:transform .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease;
}

.choice label:hover{
  transform:translateY(-2px);
  border-color:rgba(89,220,255,.48);
}

.faq-list details{
  border-color:rgba(62,127,180,.26);
  background:linear-gradient(145deg,rgba(13,27,46,.94),rgba(7,16,29,.96));
}

.faq-list summary{font-size:.95rem}
.faq-list p{font-size:.9rem;line-height:1.7}

/* V13: krótszy rytm strony bez utraty czytelności. */
@media(min-width:981px){
  .pricing-v8,
  #realizacje,
  #proces,
  #faq{padding-block:104px}

  .pricing-heading .section-head{margin-bottom:38px}
  .pricing-manifest{margin-bottom:42px}
  .module-pricing{margin-top:40px}
  .module-card{min-height:300px}

  #realizacje .section-head,
  #proces .section-head,
  #faq .section-head{margin-bottom:38px}

  .case-study .live-site{min-height:460px}
  .case-study .work-copy{padding:38px}
  .case-list{gap:10px;margin:16px 0}
  .case-list div{padding:9px 0 9px 20px}

  #proces .motion-copy{padding:40px}
  .process-step{min-height:190px;padding:24px 22px}

  .faq-list{max-width:940px}
  .faq-list summary{padding:15px 19px}
  .faq-list p{margin:-1px 40px 16px 19px}
}

.final-cta{
  border-color:rgba(92,220,255,.72);
  box-shadow:0 38px 110px rgba(24,91,196,.23),0 0 55px rgba(73,210,255,.07),inset 0 1px rgba(255,255,255,.08);
}

@media(max-width:1180px){
  .hero-v8 .hero-grid{grid-template-columns:minmax(0,1fr) minmax(440px,.9fr);gap:36px}
  .module-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media(max-width:980px){
  .hero-v8{min-height:auto;padding-top:132px}
  .hero-v8 .hero-grid{grid-template-columns:1fr;gap:45px}
  .hero-v8 h1{max-width:850px}
  .hero-system{width:min(100%,720px)}
  .motion-card-feature .motion-copy{grid-template-columns:1fr;gap:28px;padding:42px 38px}
  .module-grid{grid-template-columns:1fr}
  .module-card{min-height:240px}
}

@media(max-width:680px){
  .hero-v8{padding-top:118px}
  .hero-v8 h1{font-size:clamp(2.65rem,12vw,3.6rem);line-height:1.01;letter-spacing:-.055em}
  .hero-v8 .hero-copy{font-size:1rem}
  .hero-system::before{display:none}
  .hero-cinematic video{opacity:.27}
  .hero-vignette{background:linear-gradient(180deg,rgba(5,9,20,.9),rgba(5,9,20,.75) 55%,#050914 100%)}
  .hero-browser{animation-name:v12-hero-browser-mobile}
  .product-stage .stage-site{animation-name:v12-stage-rise-mobile}
  .product-stage .stage-phone{animation-name:v12-stage-rise-mobile}
  .product-stage .stage-panel{animation-name:v12-stage-rise-mobile}
  .motion-showcase{padding:88px 0}
  .motion-card-feature .motion-copy{padding:31px 23px 34px}
  .motion-card-feature .motion-copy h3{font-size:2rem}
  .motion-tag{max-width:calc(100% - 94px);font-size:.58rem}
  .motion-card-feature .video-brand-cover{right:1.5%;bottom:1.5%;width:72px;min-width:0;height:48px;padding:0 7px 7px;border-radius:9px;font-size:.39rem;letter-spacing:.08em}
  .motion-card.reverse .video-brand-cover{right:2.5%;bottom:8.5%;min-width:78px;height:45px}
  .module-card{min-height:230px;padding:25px 23px}
  .module-card h3{margin-top:27px}
  .module-recurring{font-size:.7rem}
  .faq-list summary{font-size:.9rem}
  .faq-list p{font-size:.86rem}
}

@keyframes v12-hero-browser-mobile{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-7px)}
}

@keyframes v12-stage-rise-mobile{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
}

@media(max-width:390px){
  .hero-v8 h1{font-size:2.55rem}
}

@media(prefers-reduced-motion:reduce){
  .hero-cinematic video,
  .hero-system::before,.hero-browser,.hero-chat-card,.hero-panel-card,
  .hero-browser::after,.hero-browser-body>i,.hero-chat-card p,.hero-chat-card small,
  .hero-panel-card .status-new,.hero-panel-action::after,
  .product-stage::after,.product-stage .stage-site,.product-stage .stage-phone,
  .product-stage .stage-panel,.product-stage .fake-button,.product-stage .chat-bubble,
  .product-stage .panel-card,.product-stage .panel-data>div,
  .product-stage .stage-connector i::after{animation:none!important}
  .btn::after{display:none}
}

/* FINAL: accessibility, clear contact validation and complete AI controls. */
.skip-link{position:fixed;z-index:130;left:16px;top:10px;padding:10px 14px;border:1px solid #71e2ff;border-radius:9px;background:#081523;color:#fff;font:750 .78rem Manrope,Inter,sans-serif;text-decoration:none;transform:translateY(-160%);transition:transform .18s ease}
.skip-link:focus{transform:translateY(0)}
.contact-required{margin:-4px 0 17px;padding:10px 12px;border:1px solid rgba(255,109,135,.45);border-radius:8px;background:rgba(96,18,38,.25);color:#ff9caf;font-size:.72rem}
.privacy-warning{margin:-7px 0 14px;padding-left:19px;position:relative;color:#91a4bb}
.privacy-warning::before{content:"i";position:absolute;left:0;top:-1px;width:13px;height:13px;display:grid;place-items:center;border:1px solid #496889;border-radius:50%;font-size:.52rem;color:#83dfff}
.xdai-quick{flex-wrap:wrap;overflow:visible}
.xdai-quick button{max-width:100%;white-space:normal;text-align:left;line-height:1.25}
.xdai-panel[aria-busy="true"] .xdai-status-dot{animation:pulse 1s infinite}
.legal-link:focus-visible,.privacy-inline:focus-visible{outline:2px solid #79dfff;outline-offset:3px}

/* V14: czytelne linkowanie wewnętrzne do stron usługowych. */
.seo-services{padding:96px 0;background:linear-gradient(180deg,#07101e,#050914);border-block:1px solid rgba(83,169,225,.13)}
.seo-services-head{max-width:780px;margin-bottom:34px}
.seo-services-head h2{margin:12px 0 14px;font-family:Manrope,Inter,sans-serif;font-size:clamp(2rem,4vw,3.4rem);line-height:1.04;letter-spacing:-.045em;color:#f5f9ff}
.seo-services-head p{max-width:700px;color:#93a5bb;line-height:1.75}
.seo-services-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.seo-services-grid>a{display:flex;min-height:245px;padding:27px;flex-direction:column;border:1px solid rgba(76,158,216,.28);border-radius:24px;background:linear-gradient(145deg,rgba(15,32,53,.96),rgba(7,17,30,.98));color:#edf6ff;text-decoration:none;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.seo-services-grid>a:hover{transform:translateY(-4px);border-color:rgba(87,218,255,.7);box-shadow:0 26px 70px rgba(21,89,174,.18)}
.seo-services-grid span{color:#55d9ff;font:700 .74rem/1 Manrope,sans-serif;letter-spacing:.14em}
.seo-services-grid strong{margin-top:35px;font:750 1.18rem/1.25 Manrope,sans-serif}
.seo-services-grid small{margin-top:12px;color:#8fa3ba;font-size:.86rem;line-height:1.65}
.seo-services-grid b{margin-top:auto;padding-top:22px;color:#55d9ff;font-size:.79rem}
.footer-service-links{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px 18px;margin-bottom:14px}
.footer-service-links a{color:#8fa4bd;font-size:.76rem;text-decoration:none}
.footer-service-links a:hover{color:#5edcff}
@media(max-width:900px){.seo-services-grid{grid-template-columns:1fr}.seo-services-grid>a{min-height:200px}.footer-service-links{justify-content:flex-start}}
@media(max-width:680px){.seo-services{padding:72px 0}.seo-services-grid>a{min-height:185px;padding:23px}}

/* Offer simplification 2026-09-13 */
.base-pricing-grid.xander-two-prices{grid-template-columns:repeat(2,minmax(0,1fr));max-width:980px;margin-inline:auto}
.base-pricing-grid.xander-two-prices .base-price-card>p{min-height:74px}
.xander-launch-note{margin-top:10px}
@media (max-width:760px){.base-pricing-grid.xander-two-prices{grid-template-columns:1fr}}