/*
Theme Name: FRAXA Commerce Growth
Theme URI: https://fraxa.pl
Author: FRAXA
Description: Autorski motyw WordPress dla FRAXA — SEO, GEO i content dla e-commerce.
Version: 2.1.0
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: fraxa
*/
@import url("style-v2-core.css");

/* Pakiety: ruch wspierający hierarchię, bez przeszkadzania w czytaniu */
.plangrid{perspective:1200px}
.plan{overflow:hidden;transform-origin:50% 100%;animation:fraxa-card-in .75s cubic-bezier(.2,.72,.2,1) both;transition:transform .35s cubic-bezier(.2,.72,.2,1),box-shadow .35s ease,border-color .35s ease}
.plan:nth-child(2){animation-delay:.12s}.plan:nth-child(3){animation-delay:.24s}
.plan:before{content:"";position:absolute;z-index:0;left:-45%;top:-25%;width:42%;height:150%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.48),transparent);transform:skewX(-16deg) translateX(-180%);transition:transform .75s ease;pointer-events:none}
.plan>*{position:relative;z-index:1}
.plan:hover{transform:translateY(-10px) rotateX(1.2deg);box-shadow:0 22px 45px rgba(23,22,22,.13);border-color:var(--ink)}
.plan:hover:before{transform:skewX(-16deg) translateX(430%)}
.plan.featured{animation:fraxa-featured-in .9s .12s cubic-bezier(.2,.72,.2,1) both,fraxa-featured-float 5s 1.3s ease-in-out infinite}
.plan.featured:before{background:linear-gradient(90deg,transparent,rgba(255,179,159,.22),transparent)}
.plan>a{transition:transform .25s ease,background-color .25s ease,color .25s ease}
.plan>a:hover{transform:translateY(-3px);background:var(--acid);color:var(--ink)}
.plan.featured>a:hover{background:#fff}
.recommended{animation:fraxa-badge-pulse 3s ease-in-out infinite}
@keyframes fraxa-card-in{from{opacity:0;transform:translateY(45px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes fraxa-featured-in{from{opacity:0;transform:translateY(28px) scale(.96)}to{opacity:1;transform:translateY(-16px) scale(1)}}
@keyframes fraxa-featured-float{0%,100%{transform:translateY(-16px)}50%{transform:translateY(-23px)}}
@keyframes fraxa-badge-pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,104,72,.1)}50%{box-shadow:0 0 0 8px rgba(255,104,72,.16)}}
@media(max-width:900px){.plan.featured{animation:fraxa-card-in .75s .12s cubic-bezier(.2,.72,.2,1) both}.plan:hover{transform:translateY(-6px)}}
@media(prefers-reduced-motion:reduce){.plan,.plan.featured,.recommended{animation:none!important;transition:none!important}.plan:hover{transform:none}.plan:before{display:none}}


/* Podstrony usług: grafika, czytelny proces i kontrast */
.service-art{
  background-image:url("https://fraxa.pl/wp-content/uploads/2026/08/fraxa-service-abstract-v2.png")!important;
  background-size:cover!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
}
.service-art img{display:none!important}
.service-content .steps{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:16px!important;
  border:0!important;
}
.service-content .steps>div{
  display:grid!important;
  grid-template-columns:52px minmax(0,1fr)!important;
  grid-template-rows:auto 1fr!important;
  gap:10px 18px!important;
  min-height:210px!important;
  padding:30px!important;
  border:1px solid var(--ink)!important;
  background:var(--paper)!important;
  position:relative!important;
  overflow:hidden!important;
}
.service-content .steps>div:after{
  content:"";
  position:absolute;
  width:120px;height:120px;
  right:-55px;bottom:-70px;
  border:1px solid rgba(52,54,220,.24);
  border-radius:50%;
}
.service-content .steps b{
  grid-column:1!important;
  grid-row:1/3!important;
  width:40px;height:40px;
  display:grid!important;
  place-items:center;
  background:var(--blue);
  color:#fff!important;
}
.service-content .steps h3{
  grid-column:2!important;
  grid-row:1!important;
  margin:4px 0 0!important;
}
.service-content .steps p{
  grid-column:2!important;
  grid-row:2!important;
  margin:0!important;
  max-width:460px!important;
  color:var(--muted)!important;
}
.service-content .service-cta p,
.process .sectionhead.light>p,
.processgrid p,
.processgrid .muted,
.process .muted{color:#fff!important}
.service-content .info-card{transition:transform .25s ease,box-shadow .25s ease}
.service-content .info-card:hover{transform:translateY(-5px);box-shadow:0 16px 34px rgba(23,22,22,.1)}
@media(max-width:760px){
  .service-content .steps{grid-template-columns:1fr!important}
  .service-content .steps>div{min-height:0!important;padding:24px!important}
}


/* Podstrony usług: grafika, czytelny proces i kontrast */
.service-art{
  background-image:url("https://fraxa.pl/wp-content/uploads/2026/08/fraxa-service-abstract-v2.png")!important;
  background-size:cover!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
}
.service-art img{display:none!important}
.service-content .steps{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:16px!important;
  border:0!important;
}
.service-content .steps>div{
  display:grid!important;
  grid-template-columns:52px minmax(0,1fr)!important;
  grid-template-rows:auto 1fr!important;
  gap:10px 18px!important;
  min-height:210px!important;
  padding:30px!important;
  border:1px solid var(--ink)!important;
  background:var(--paper)!important;
  position:relative!important;
  overflow:hidden!important;
}
.service-content .steps>div:after{
  content:"";
  position:absolute;
  width:120px;height:120px;
  right:-55px;bottom:-70px;
  border:1px solid rgba(52,54,220,.24);
  border-radius:50%;
}
.service-content .steps b{
  grid-column:1!important;
  grid-row:1/3!important;
  width:40px;height:40px;
  display:grid!important;
  place-items:center;
  background:var(--blue);
  color:#fff!important;
}
.service-content .steps h3{
  grid-column:2!important;
  grid-row:1!important;
  margin:4px 0 0!important;
}
.service-content .steps p{
  grid-column:2!important;
  grid-row:2!important;
  margin:0!important;
  max-width:460px!important;
  color:var(--muted)!important;
}
.service-content .service-cta p,
.process .sectionhead.light>p,
.processgrid p,
.processgrid .muted,
.process .muted{color:#fff!important}
.service-content .info-card{transition:transform .25s ease,box-shadow .25s ease}
.service-content .info-card:hover{transform:translateY(-5px);box-shadow:0 16px 34px rgba(23,22,22,.1)}
@media(max-width:760px){
  .service-content .steps{grid-template-columns:1fr!important}
  .service-content .steps>div{min-height:0!important;padding:24px!important}
}