a:hover {
text-decoration: none
}

.kicker {
font-weight: 700;
color: #93a1b3;
letter-spacing: .06em;
text-transform: uppercase;
font-size: .8rem
}

/* ===================== HERO ===================== */

.hero-wally {
    position: relative;
    background-color: var(--bg, #f8f9fa);
    overflow: hidden;
}

.hero-wally-inner {
    position: relative;
    padding: 32px 0;
    overflow: hidden;

}
.hero-wally-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 1;
}

.hero-wally-inner:before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 80%);
    backdrop-filter: blur(0.2px);
}
.hero-wally-inner > .container {
    position: relative;
    z-index: 3;
}

.hero-slider-wrapper {
    position: absolute;
    z-index: 3; 
    right: max(24px, env(safe-area-inset-right));
    top: 50%;
    transform: translateY(-50%);
    width: 350px; 
    height:380px;
    overflow:hidden;
    display: none;
    mask-image: linear-gradient(to right, transparent, #000 2%, #000 98%, transparent)}


@media (min-width: 992px) {
    .hero-slider-wrapper {
        display: block;
    }
}
@media (min-width: 1200px) {
    .hero-slider-wrapper {
        width: 400px; 
        right: clamp(24px, 4vw, 60px);
    }
}

.hero-product-card {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; 
    align-items: center;
    cursor: pointer; 
}

.hero-product-card img {
    position: relative; 
    display: block;
    max-width: 100%;
    height: auto;
    aspect-ratio: 1/1; 
    object-fit: contain; 
    object-position: center bottom; 
    z-index: 1; 
   filter:drop-shadow(0px 3px 3px rgba(0, 0, 0, 0.4)) saturate(.75);
    transition: filter 0.4s ease, transform 0.4s ease;
}

.hero-product-card:hover img {
   filter:drop-shadow(0px 4px 5px rgba(0, 0, 0, 0.5))
}

.hero-product-card__label {
    position: absolute; 
    bottom:24px;
    z-index: 2; 
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 1) 100%);
    backdrop-filter: blur(5px); 
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
    color: var(--ink);
    padding: 10px 18px;
    text-align: center;
    font-size: 0.95rem; 
    font-weight: 700; 
    text-transform: uppercase; 
    letter-spacing: 0.05em; 
    border-radius: 999px; 
    transition: all 0.3s ease;
}

.hero-product-card:hover .hero-product-card__label {
    transform: translateY(-4px); 
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}


.hero-slider-wrapper .f-carousel {
    height: 380px;
}

.hero-slider-wrapper .f-carousel__viewport {
    height: 100%;
    overflow: hidden; 
    border-radius: inherit; 
}

.hero-slider-wrapper .f-carousel__track {
    display: flex;
    height: 100%;
    align-items: center;
}


.hero-slider-wrapper .f-carousel__slide {
    width: 100%; 
    flex-shrink: 0; 
    height: 100%; 
    display: flex; 
    justify-content: center;
    align-items: center;
    padding:0
}

.hero-slider-wrapper .f-carousel.has-dots {margin-bottom:0}

.hero-slider-wrapper .f-carousel__dots {
    display: flex;
    gap: 8px;
    justify-content: center;
    bottom:0
}

.hero-slider-wrapper .f-carousel__dot {
    background: var(--border);
    border: none;
    padding: 0;
    margin: 0;
    transition: all 0.3s ease;
    cursor: pointer;
}

.hero-slider-wrapper .f-carousel__dot:hover {
    background: var(--muted);
}

.hero-slider-wrapper .f-carousel__dot.is-selected {
    background: var(--primary);
    transform: scale(1.2);
}

@media (min-width: 992px) {
     .hero-wally-inner{padding: 64px 0 72px}
    .hero-wally-inner > .container {
        max-width: 55%; 
        margin-left:10px;
    }
}
@media (min-width: 1200px) {
     .hero-wally-inner > .container {
        max-width: 50%;
    }
}


.hero-chip {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .85rem;
    border-radius: 999px;
    background: var(--surface, #f8f9fa); 
    border: 1px solid var(--border, #e5e7eb);
    box-shadow: var(--shadow-sm, 0 2px 8px rgba(0, 0, 0, .05));
    
    font-weight: 600;
    color: var(--ink); 
}
.hero-chip::before {
    content: "";
    width: 18px;
    height: 12px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: inline-block;
    transform: translateY(-1px);
    background-image: url('/img/icons/flag-pl.svg');
}

.hero-wally h1 {
    font-size: clamp(34px, 4.6vw, 46px);
    margin: .6rem 0 .35rem;
    color: var(--ink);
    text-shadow: none; 
}

.hero-sub {
    font-size: clamp(18px, 2.2vw, 20px);
    color: var(--muted);
    max-width: 62ch;
    text-shadow: none; 
}

.hero-cta {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 18px;
}

.hero-proof {
    margin: 10px 0 0;
    color: var(--muted);
}


.btn-shine,.btn-light {
  overflow: hidden;
  position:relative;
}

.btn-shine::after,.btn-light::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(120deg, transparent 0, rgba(255, 255, 255, .55) 22%, transparent 42%);
  transform: translateX(-140%);
  transition: transform .6s ease;
}

.btn-shine:hover::after,.btn-light:hover::after {
  transform: translateX(140%)
}
/* ===================== WHY ===================== */
.why-wally {
position: relative;
padding: 64px 0;
margin:35px 0 50px;
background: radial-gradient(800px 360px at 18% 10%, rgba(149, 193, 43, .18), transparent 60%), radial-gradient(600px 260px at 86% 100%, rgba(149, 193, 43, .12), transparent 60%), var(--why-bg);
color: var(--why-text);
isolation: isolate
}

.why-head {
position: relative;
z-index: 1;
text-align: center;
max-width: 900px;
margin: 0 auto 22px
}

.why-head h2 {
font-size: clamp(26px, 3.2vw, 36px);
margin: .2rem 0;
color: var(--why-head)
}

.why-sub {
color: var(--why-muted);
margin: .25rem 0 1rem
}

.why-stats {
display: grid;
gap: 16px;
grid-template-columns: repeat(3, minmax(130px, 160px));
padding: 0;
justify-content: center
}

.why-stats li {
display: grid;
gap: 2px;
place-items: center;
background: var(--why-stats-bg);
border: 1px solid #475063;
border-radius: 12px;
padding: 10px 14px;
min-width: 120px;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .03)
}

.why-stats strong {
font-size: 1.1rem;
color: var(--accent-600)
}

.why-grid {
position: relative;
z-index: 1;
display: grid;
gap: 18px;
margin-top: 20px;
grid-template-columns: repeat(5, minmax(0, 1fr))
}

@media (max-width:1199.98px) {
.why-grid {
grid-template-columns: repeat(3, 1fr)
}
}

@media (max-width:767.98px) {
.why-grid {
grid-template-columns: repeat(2, 1fr)
}
}

@media (max-width:479.98px) {

.why-grid,
.why-stats {
grid-template-columns: 1fr
}
}

.why-card {
background: var(--why-card-bg);
border: 1px solid var(--why-card-border);
border-radius: 18px;
padding: 18px;
text-align: left;
box-shadow: 0 10px 24px rgba(0, 0, 0, .25);
transition: transform .2s, box-shadow .2s, border-color .2s;
color: var(--why-text)
}

.why-card:hover {
transform: translateY(-2px);
box-shadow: 0 16px 34px rgba(0, 0, 0, .32);
border-color: #2b3546
}

.why-card h3 {
font-size: 1.05rem;
margin: 1rem 0 1.5rem;
position: relative;
color: #f1f5fb
}

.why-card h3::after {
content: "";
position: absolute;
left: 0;
bottom: -6px;
height: 2px;
width: 100%;
background: var(--accent);
transform: scaleX(.35);
transform-origin: left;
transition: transform .25s ease;
}

.why-card:hover h3::after {
transform: scaleX(1)
}

.why-card p {
color: var(--why-muted);
max-width: 40ch
}

.icon-circle {
width: 64px;
height: 64px;
border-radius: 50%;
display: grid;
place-items: center;
color: #cce28a;
background: linear-gradient(180deg, #2b3240, #2a303c);
border: 1px solid #445066;
box-shadow: inset 0 0 0 6px rgba(160, 209, 46, .1), 0 10px 22px rgba(0, 0, 0, .25), 0 0 0 2px rgba(255, 255, 255, .03);
position: relative
}

.icon-circle .i-stroke {
width: 28px;
height: 28px;
stroke: var(--why-stroke);
fill: none;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 120;
stroke-dashoffset: 0;
opacity: .92;
transition: transform .35s ease, opacity .35s ease
}

.icon-circle .orbit {
position: absolute;
inset: -6px;
border-radius: inherit;
border: 2px dashed var(--why-orbit);
animation: orbit 12s linear infinite;
pointer-events: none;
opacity: .75
}

@keyframes orbit {
to {
transform: rotate(360deg)
}
}

.why-card:hover .i-stroke {
opacity: 1;
transform: scale(1.05)
}

.why-cta {
display: flex;
gap: 10px;
justify-content: center;
margin-top: 22px
}

.why-cta .btn--ghost {
background: #2b3340;
border: 1px solid #445066;
color: #e8eef8
}

.why-cta .btn--ghost:hover {
background: #323a48
}

/* ===================== LOGOS ===================== */
.logos-marquee {
overflow: hidden;
mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent)
}

.logos-track {
display: flex;
gap: 48px;
animation: marquee 28s linear infinite
}

@keyframes marquee {
from {
transform: translateX(0)
}

to {
transform: translateX(-50%)
}
}

.logos-track img {
height: 36px
}

@media (prefers-reduced-motion:reduce) {
.logos-track {
animation: none
}
}

.logos-segments {
display: grid;
gap: 18px
}

@media (min-width:768px) {
.logos-segments {
grid-template-columns: repeat(3, 1fr)
}
}

.segment {
background: #fff;
border: 1px solid var(--border);
border-radius: 16px;
padding: 14px;
box-shadow: var(--shadow-sm)
}

.segment h4 {
font-size: 1rem;
color: #556070;
letter-spacing: .04em;
text-transform: uppercase;
margin-top: .5rem
}

.logo-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
margin-top: 8px
}

.logo-row img {
height: 28px;
margin: auto
}

/* ===================== FINAL CTA –===================== */
.cta-luxe {
position: relative;
background:
radial-gradient(600px 220px at 8% 0, rgba(0, 0, 0, .03), transparent 60%),
radial-gradient(600px 220px at 96% 100%, rgba(0, 0, 0, .025), transparent 60%),
#fff;
padding: 32px 24px;
border: 1px solid var(--border);
border-radius: 18px;
box-shadow: 0 8px 28px rgba(0, 0, 0, .06);
}

.cta-luxe-head {
display: flex;
gap: 16px;
align-items: center;
justify-content: space-between;
flex-wrap: wrap
}


.cta-luxe-head .h2 span {
color: var(--primary-600)
}

.cta-luxe-rating {
display: inline-flex;
align-items: center;
gap: .5rem;
padding: 8px 12px;
border-radius: 999px;
background: #fff;
border: 1px solid var(--border);
box-shadow: 0 3px 12px rgba(0, 0, 0, .06);
font-weight: 800;
color: #1d232b
}

.cta-luxe-sub {
margin: 10px 0 6px;
color: #5b616b;
font-size: clamp(15px, 2vw, 17px)
}

.cta-luxe-pills {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
list-style: none;
margin: 14px 0 18px;
padding: 0
}

@media(max-width:991.98px) {
.cta-luxe-pills {
grid-template-columns: 1fr
}
}

.cta-luxe-pills li {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: 12px;
background: #fff;
border: 1px solid var(--border);
box-shadow: 0 6px 18px rgba(0, 0, 0, .04);
transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease;
}

.cta-luxe-pills li:hover {
border-color: color-mix(in srgb, var(--primary-600) 35%, var(--border));
box-shadow: 0 10px 24px rgba(0, 0, 0, .06);
transform: translateY(-1px);
}

.cta-luxe-pills .dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--primary-600);
box-shadow: 0 0 0 0 rgba(149, 193, 43, .45);
animation: dotPulse 2.4s infinite;
}

@keyframes dotPulse {
0% {
box-shadow: 0 0 0 0 rgba(149, 193, 43, .45)
}

70% {
box-shadow: 0 0 0 8px rgba(149, 193, 43, 0)
}

100% {
box-shadow: 0 0 0 0 rgba(149, 193, 43, 0)
}
}

.btn-x {
position: relative;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 18px;
border-radius: 14px;
border: 1px solid transparent;
font-weight: 800;
text-decoration: none;
transition: .2s ease;
will-change: transform, box-shadow, border-color, background
}

.btn-x .i {
width: 20px;
height: 20px;
stroke: currentColor;
fill: none
}

.btn-x-primary {
color: #0c1400;
background: var(--primary-600);
box-shadow: 0 10px 22px rgba(149, 193, 43, .28);
}

.btn-x-primary::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0), inset 0 0 0 0 rgba(255, 255, 255, 0);
transition: box-shadow .35s ease;
}

.btn-x-primary:hover::before {
box-shadow: 0 0 0 2px rgba(255, 255, 255, .5), inset 0 0 0 8px rgba(255, 255, 255, .08);
}

.btn-x-ghost {
color: #1d232b;
background: #fff;
border-color: var(--border);
box-shadow: 0 6px 16px rgba(0, 0, 0, .06)
}

.btn-x:hover {
transform: translateY(-1px)
}

.btn-shine {
overflow: hidden
}

.btn-shine::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
background: linear-gradient(120deg, transparent 0, rgba(255, 255, 255, .55) 22%, transparent 42%);
transform: translateX(-140%);
transition: transform .6s ease;
}

.btn-shine:hover::after {
transform: translateX(140%)
}

.cta-luxe-actions {
display: flex;
gap: 10px;
flex-wrap: wrap
}

@media(max-width:575.98px) {
.btn-x {
width: 100%;
justify-content: center
}
}

.cta-luxe-note {
margin-top: 10px;
color: #606975;
font-size: .95rem
}

/* motion prefs */
@media(prefers-reduced-motion:reduce) {

.btn-shine::after,
.cta-luxe-pills li,
.btn-x {
transition: none
}

.cta-luxe-pills .dot {
animation: none
}
}

/* ===================== MOTION PREFS ===================== */
@media (prefers-reduced-motion:reduce) {

.btn,
.btn-shine::after,
.icon-circle .orbit,
.product-card .thumb,
.product-card .foto img,
.why-card,
.why-card h3::after,
.final-cta,
.final-cta-proof::after,
.btn-cta-primary::before,
.btn-cta-primary::after {
transition: none !important;
animation: none !important
}
}