/* ============================================================
   SKLEPY INTERNETOWE — CodeScriptum
   Paleta: Amber / Gold / Rose / Deep Navy
   WOW Edition — animations & effects for e-commerce
   ============================================================ */

/* ── Reset & Variables ──────────────────────────────────────── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  --amber:        #F59E0B;
  --amber-dark:   #D97706;
  --gold:         #FBBF24;
  --gold-light:   #FDE68A;
  --rose:         #F43F5E;
  --rose-light:   #FB7185;
  --violet:       #7C3AED;
  --violet-light: #A78BFA;

  --dark:         #0F172A;
  --dark-card:    #1E293B;
  --dark-surface: #334155;
  --gray-100:     #F8FAFC;
  --gray-200:     #E2E8F0;
  --gray-300:     #CBD5E1;
  --gray-400:     #94A3B8;
  --gray-500:     #64748B;
  --white:        #FFFFFF;

  --danger:       #EF4444;
  --danger-bg:    rgba(239,68,68,.08);
  --success:      #10B981;

  --font:         'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  --section-py:   100px;
  --container:    1200px;
  --radius:       16px;
  --radius-sm:    10px;
}

html{scroll-behavior:smooth;scroll-padding-top:80px}
body{font-family:var(--font);color:var(--gray-100);background:var(--dark);line-height:1.7;overflow-x:hidden}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}

.container{max-width:var(--container);margin:0 auto;padding:0 24px}

/* ── Scroll progress bar ────────────────────────────────────── */
.scroll-progress{
  position:fixed;top:0;left:0;height:3px;z-index:10001;
  background:linear-gradient(90deg,var(--rose),var(--amber),var(--gold));
  width:0%;transition:width .1s linear;
  box-shadow:0 0 10px var(--amber),0 0 20px rgba(245,158,11,.4);
}

/* ── Cursor glow (desktop only) ─────────────────────────────── */
.cursor-glow{
  position:fixed;width:400px;height:400px;border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle,rgba(245,158,11,.06) 0%,transparent 70%);
  transform:translate(-50%,-50%);
  transition:left .15s ease,top .15s ease;
  display:none;
}
@media(hover:hover){.cursor-glow{display:block}}

/* ── Gradient text ──────────────────────────────────────────── */
.gradient-text{
  background:linear-gradient(135deg,var(--gold),var(--amber),var(--rose));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
  background-size:200% 200%;
  animation:gradientShift 4s ease-in-out infinite;
}
@keyframes gradientShift{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}
.text-danger{color:var(--rose)}

/* ── Buttons ────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:14px 32px;border-radius:50px;font-weight:600;font-size:.95rem;
  cursor:pointer;border:none;transition:all .3s ease;font-family:var(--font);
  position:relative;overflow:hidden;
}
.btn::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.15),transparent);
  opacity:0;transition:opacity .3s;
}
.btn:hover::after{opacity:1}
.btn--primary{
  background:linear-gradient(135deg,var(--amber),var(--rose));
  color:#fff;box-shadow:0 4px 24px rgba(245,158,11,.35);
}
.btn--primary:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 8px 40px rgba(245,158,11,.55)}
.btn--ghost{color:var(--gold);border:1px solid rgba(251,191,36,.3);background:transparent}
.btn--ghost:hover{background:rgba(251,191,36,.08);border-color:var(--gold);transform:translateY(-2px)}
.btn--outline{color:var(--amber);border:2px solid var(--amber);background:transparent}
.btn--outline:hover{background:var(--amber);color:#fff}
.btn--glow{animation:btnGlow 2.5s ease-in-out infinite}
.btn--full{width:100%;justify-content:center}
.btn--sm{padding:10px 20px;font-size:.85rem}
.btn__loader{display:none}
.btn--loading .btn__text{display:none}
.btn--loading .btn__loader{display:inline-flex;align-items:center;gap:8px}

@keyframes btnGlow{
  0%,100%{box-shadow:0 4px 24px rgba(245,158,11,.35)}
  50%{box-shadow:0 4px 40px rgba(245,158,11,.65),0 0 80px rgba(245,158,11,.2)}
}

/* ── Ripple effect on buttons ───────────────────────────────── */
.btn .ripple{
  position:absolute;border-radius:50%;
  background:rgba(255,255,255,.3);
  transform:scale(0);animation:rippleAnim .6s ease-out;
  pointer-events:none;
}
@keyframes rippleAnim{to{transform:scale(4);opacity:0}}

/* ── Section base ───────────────────────────────────────────── */
.section{padding:var(--section-py) 0;position:relative;overflow:hidden}
.section--dark{background:var(--dark)}
.section--light{background:var(--gray-100);color:var(--dark)}
.section--gradient{
  background:linear-gradient(180deg,var(--dark) 0%,var(--dark-card) 50%,#1a0f2e 100%);
}
.section--light-warm{
  background:linear-gradient(180deg,#FFF7ED 0%,#FFFBF5 50%,#FEF3E2 100%);
  color:var(--dark);
}
.section__particles{
  position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.4;
}
.section__title{
  font-size:clamp(1.8rem,4vw,2.8rem);font-weight:800;text-align:center;margin-bottom:12px;
  position:relative;z-index:1;
}
.section__title--light{color:#fff}
.section__subtitle{
  text-align:center;font-size:1.1rem;color:var(--gray-400);max-width:640px;margin:0 auto 56px;
  position:relative;z-index:1;
}
.section__subtitle--light{color:rgba(255,255,255,.6)}
.section--light .section__title{color:var(--dark)}
.section--light .section__subtitle{color:var(--gray-500)}

/* ── Header ─────────────────────────────────────────────────── */
.header{
  position:fixed;top:0;left:0;width:100%;z-index:1000;
  background:rgba(15,23,42,.85);backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(245,158,11,.1);
  transition:all .4s ease;
}
.header--scrolled{background:rgba(15,23,42,.96);box-shadow:0 4px 30px rgba(0,0,0,.4)}
.header__inner{display:flex;align-items:center;justify-content:space-between;height:72px}
.nav__logo{display:flex;align-items:center;gap:8px;transition:transform .3s}
.nav__logo:hover{transform:scale(1.05)}
.nav__logo img{height:34px;width:auto}
.nav__menu{display:flex;align-items:center;gap:28px}
.nav__link{
  color:rgba(255,255,255,.7);font-size:.9rem;font-weight:500;
  transition:all .3s;position:relative;
}
.nav__link::after{
  content:'';position:absolute;bottom:-4px;left:0;width:0;height:2px;
  background:var(--gold);transition:width .3s ease;
}
.nav__link:hover{color:#fff}
.nav__link:hover::after{width:100%}
.nav__link--cta{
  background:linear-gradient(135deg,var(--amber),var(--rose));
  color:#fff !important;padding:10px 22px;border-radius:50px;font-weight:600;
}
.nav__link--cta::after{display:none}
.nav__link--cta:hover{opacity:.9;transform:translateY(-1px)}
.nav__toggle{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:4px}
.nav__toggle-bar{width:24px;height:2px;background:#fff;border-radius:2px;transition:all .3s}
.nav__toggle--active .nav__toggle-bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav__toggle--active .nav__toggle-bar:nth-child(2){opacity:0;transform:scaleX(0)}
.nav__toggle--active .nav__toggle-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ── Hero ───────────────────────────────────────────────────── */
.hero{
  position:relative;min-height:100vh;display:flex;align-items:center;
  padding:120px 0 80px;overflow:hidden;
}
.hero__bg{position:absolute;inset:0;z-index:0}
.hero__canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.65}
.hero__grid-overlay{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(245,158,11,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(245,158,11,.03) 1px,transparent 1px);
  background-size:60px 60px;
  animation:gridPulse 8s ease-in-out infinite;
}
@keyframes gridPulse{
  0%,100%{opacity:.6}
  50%{opacity:1}
}
.hero__orb{position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none}
.hero__orb--1{width:600px;height:600px;background:var(--amber);top:-200px;right:-100px;opacity:.15;animation:orbFloat1 12s ease-in-out infinite}
.hero__orb--2{width:400px;height:400px;background:var(--rose);bottom:-100px;left:-100px;opacity:.12;animation:orbFloat2 10s ease-in-out infinite}
.hero__orb--3{width:300px;height:300px;background:var(--violet);top:50%;left:50%;transform:translate(-50%,-50%);opacity:.1;animation:orbFloat3 14s ease-in-out infinite}
@keyframes orbFloat1{0%,100%{transform:translate(0,0)}50%{transform:translate(-40px,30px)}}
@keyframes orbFloat2{0%,100%{transform:translate(0,0)}50%{transform:translate(30px,-20px)}}
@keyframes orbFloat3{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.15)}}

.hero__inner{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1fr 1.15fr;
  gap:40px;align-items:center;
}
.hero__content{text-align:left}
.hero__badge{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.25);
  padding:8px 20px;border-radius:50px;font-size:.85rem;color:var(--gold-light);margin-bottom:24px;
  animation:badgePulse 3s ease-in-out infinite;
}
@keyframes badgePulse{
  0%,100%{box-shadow:0 0 0 0 rgba(245,158,11,.2)}
  50%{box-shadow:0 0 0 12px rgba(245,158,11,0)}
}
.hero__title{
  font-size:clamp(1.9rem,4.2vw,3rem);font-weight:900;line-height:1.2;margin-bottom:20px;color:#fff;
}
.hero__cursor{
  display:inline-block;
  color:var(--gold);margin-left:2px;font-weight:400;
  animation:blink 1s step-end infinite;
}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}

.hero__subtitle{font-size:1.15rem;color:rgba(255,255,255,.65);max-width:640px;margin:0 0 36px;line-height:1.8}
.hero__stats{
  display:flex;gap:48px;margin-bottom:36px;
  flex-wrap:wrap;
}
.hero__stat{text-align:center;position:relative}
.hero__stat-number{font-size:2.4rem;font-weight:900;color:#fff}
.hero__stat-suffix{font-size:1.5rem;font-weight:800;color:var(--gold)}
.hero__stat-label{display:block;font-size:.8rem;color:rgba(255,255,255,.5);margin-top:4px}
.hero__stat .burst{
  position:absolute;top:50%;left:50%;width:4px;height:4px;border-radius:50%;
  pointer-events:none;opacity:0;
}

.hero__actions{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:40px}
.hero__platforms-strip{
  display:flex;gap:24px;flex-wrap:wrap;
}
.hero__platform-item{
  display:inline-flex;align-items:center;gap:6px;
  font-size:.85rem;color:rgba(255,255,255,.45);font-family:var(--font-mono);
  transition:all .5s ease;
  animation:techFloat 3s ease-in-out infinite;
}
.hero__platform-item:nth-child(2){animation-delay:.3s}
.hero__platform-item:nth-child(3){animation-delay:.6s}
.hero__platform-item:nth-child(4){animation-delay:.9s}
.hero__platform-item:nth-child(5){animation-delay:1.2s}
@keyframes techFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-4px)}
}
.hero__platform-item:hover{color:var(--gold);transform:scale(1.15) !important}
.hero__platform-item i{font-size:1.1rem;color:rgba(255,255,255,.3);transition:color .3s}
.hero__platform-item:hover i{color:var(--gold)}

.hero__visual{display:flex;justify-content:center;align-items:center;position:relative;min-height:540px}
.hero__visual-canvas{
  width:100%;height:100%;min-height:540px;
  border-radius:0;
  background:transparent;
}

/* ── Platform cards ────────────────────────────────────────── */
.platforms__grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;
  margin-bottom:48px;position:relative;z-index:1;
}
.platform-card{
  background:var(--dark-card);border:1px solid rgba(245,158,11,.1);
  border-radius:var(--radius);padding:32px 28px;
  position:relative;overflow:hidden;
  transition:all .5s cubic-bezier(.25,.8,.25,1);
}
.platform-card::before{
  content:'';position:absolute;inset:-1px;border-radius:var(--radius);
  background:linear-gradient(135deg,var(--amber),var(--rose),var(--violet));
  opacity:0;z-index:-1;transition:opacity .4s;
}
.platform-card:hover::before{opacity:1}
.platform-card:hover{
  transform:translateY(-10px);
  box-shadow:0 25px 80px rgba(245,158,11,.12);
  border-color:transparent;
}
.platform-card--featured{border-color:rgba(245,158,11,.3)}
.platform-card--featured::after{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--amber),var(--rose));
}
.platform-card__badge{
  position:absolute;top:16px;right:16px;
  background:linear-gradient(135deg,var(--amber),var(--rose));
  color:#fff;padding:4px 12px;border-radius:50px;font-size:.7rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.5px;
}
.platform-card__icon{
  width:56px;height:56px;border-radius:14px;
  background:rgba(245,158,11,.08);color:var(--amber);
  display:flex;align-items:center;justify-content:center;
  font-size:1.5rem;margin-bottom:18px;
  transition:all .4s ease;
}
.platform-card:hover .platform-card__icon{
  background:linear-gradient(135deg,var(--amber),var(--rose));
  color:#fff;transform:scale(1.1) rotate(5deg);
}
.platform-card h3{font-size:1.2rem;font-weight:700;color:#fff;margin-bottom:10px}
.platform-card p{font-size:.88rem;color:var(--gray-400);line-height:1.7;margin-bottom:16px}
.platform-card__features{list-style:none;display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.platform-card__features li{
  font-size:.83rem;color:var(--gray-400);display:flex;align-items:center;gap:8px;
}
.platform-card__features li i{color:var(--success);font-size:.75rem}
.platform-card__best{
  font-size:.78rem;color:var(--gold);font-weight:600;
  padding:8px 14px;background:rgba(245,158,11,.06);border-radius:var(--radius-sm);
  border:1px solid rgba(245,158,11,.12);
}
.platforms__cta{
  text-align:center;position:relative;z-index:1;
  background:var(--dark-card);border:1px solid rgba(245,158,11,.1);
  border-radius:var(--radius);padding:36px;
}
.platforms__cta-text{
  font-size:1rem;color:var(--gray-300);margin-bottom:20px;
  display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
}

/* ── Problem cards ──────────────────────────────────────────── */
.problems__grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;
}
.problem-card{
  background:#fff;border:1px solid var(--gray-200);
  border-radius:var(--radius);padding:32px 28px;
  transition:all .4s cubic-bezier(.25,.8,.25,1);position:relative;overflow:hidden;
}
.problem-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--rose),transparent);
  transition:height .4s ease;
}
.problem-card:hover::before{height:4px}
.problem-card:hover{transform:translateY(-8px);box-shadow:0 20px 60px rgba(244,63,94,.08)}
.problem-card__icon{
  width:52px;height:52px;border-radius:12px;
  background:rgba(244,63,94,.06);color:var(--rose);
  display:flex;align-items:center;justify-content:center;font-size:1.3rem;margin-bottom:16px;
  transition:all .4s ease;
}
.problem-card:hover .problem-card__icon{transform:scale(1.1) rotate(-5deg)}
.problem-card__stat{
  position:absolute;top:20px;right:20px;
  font-size:2rem;font-weight:900;color:rgba(244,63,94,.1);
  font-family:var(--font-mono);line-height:1;
}
.problem-card h3{font-size:1.1rem;font-weight:700;color:var(--dark);margin-bottom:10px}
.problem-card p{font-size:.88rem;color:var(--gray-500);line-height:1.7}

/* ── Service cards ─────────────────────────────────────────── */
.services__grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:28px;
}
.service-card{
  background:var(--dark-card);border:1px solid rgba(245,158,11,.1);
  border-radius:var(--radius);padding:36px 30px;
  position:relative;overflow:hidden;
  transition:all .5s cubic-bezier(.25,.8,.25,1);
}
.service-card::before{
  content:'';position:absolute;inset:-1px;border-radius:var(--radius);
  background:linear-gradient(135deg,var(--amber),var(--rose),var(--violet));
  opacity:0;z-index:-1;transition:opacity .4s;
}
.service-card:hover::before{opacity:1}
.service-card:hover{transform:translateY(-8px);border-color:transparent;box-shadow:0 20px 60px rgba(245,158,11,.1)}
.service-card__number{
  position:absolute;top:16px;right:20px;
  font-size:2.4rem;font-weight:900;font-family:var(--font-mono);
  background:linear-gradient(135deg,rgba(245,158,11,.1),rgba(244,63,94,.06));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;opacity:.5;line-height:1;
}
.service-card__icon{
  width:56px;height:56px;border-radius:14px;
  background:linear-gradient(135deg,var(--amber),var(--rose));
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:1.2rem;margin-bottom:16px;
  transition:all .4s ease;box-shadow:0 4px 20px rgba(245,158,11,.3);
}
.service-card:hover .service-card__icon{transform:scale(1.12) rotate(8deg);box-shadow:0 8px 32px rgba(245,158,11,.5)}
.service-card h3{font-size:1.15rem;font-weight:700;color:#fff;margin-bottom:8px}
.service-card p{font-size:.9rem;color:var(--gray-400);line-height:1.7;margin-bottom:14px}
.service-card__tags{display:flex;flex-wrap:wrap;gap:6px}
.service-card__tags .tag{
  background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.15);
  color:var(--gold);padding:4px 12px;border-radius:50px;font-size:.72rem;font-weight:600;
  transition:all .3s;
}
.service-card__tags .tag:hover{background:rgba(245,158,11,.2);transform:translateY(-1px)}

/* ── Results section ───────────────────────────────────────── */
.results__grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
  margin-bottom:56px;
}
.result-card{
  background:var(--dark-card);border:1px solid rgba(245,158,11,.1);
  border-radius:var(--radius);padding:28px 24px;text-align:center;
  transition:all .4s cubic-bezier(.25,.8,.25,1);
  position:relative;overflow:hidden;
}
.result-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--amber),var(--rose));
  transform:scaleX(0);transform-origin:left;transition:transform .6s ease;
}
.result-card.visible::before{transform:scaleX(1)}
.result-card:hover{transform:translateY(-6px);border-color:rgba(245,158,11,.25);box-shadow:0 12px 40px rgba(245,158,11,.1)}
.result-card__icon{
  font-size:1.5rem;color:var(--amber);margin-bottom:12px;
  transition:transform .4s ease;
}
.result-card:hover .result-card__icon{transform:scale(1.2) rotate(-5deg)}
.result-card__value{
  font-size:2.2rem;font-weight:900;color:#fff;margin-bottom:4px;
}
.result-card__value span{color:var(--gold)}
.result-card__label{font-size:.82rem;color:var(--gray-400);margin-bottom:14px}
.result-card__bar{
  width:100%;height:4px;background:rgba(245,158,11,.1);border-radius:2px;overflow:hidden;
}
.result-card__bar-fill{
  height:100%;width:0%;
  background:linear-gradient(90deg,var(--amber),var(--rose));
  border-radius:2px;
  transition:width 2s cubic-bezier(.25,.8,.25,1);
}

/* Chart wrapper */
.results__chart-wrapper{
  max-width:900px;margin:0 auto;
  background:var(--dark-card);border:1px solid rgba(245,158,11,.12);
  border-radius:var(--radius);padding:32px;
}
.results__chart-title{
  font-size:1.1rem;font-weight:700;color:#fff;text-align:center;margin-bottom:20px;
}
.results__chart-canvas{width:100%;height:auto;display:block}

/* Light-warm section styles for results */
.section--light-warm .result-card{
  background:#fff;
  border:1px solid rgba(245,158,11,.15);
  box-shadow:0 4px 20px rgba(245,158,11,.06);
}
.section--light-warm .result-card__value{color:var(--dark)}
.section--light-warm .result-card__value span{color:var(--amber-dark)}
.section--light-warm .result-card__label{color:var(--gray-500)}
.section--light-warm .section__title{color:var(--dark)}
.section--light-warm .section__subtitle{color:var(--gray-500)}
.section--light-warm .results__chart-wrapper{
  background:#fff;
  border-color:rgba(245,158,11,.12);
  box-shadow:0 4px 24px rgba(245,158,11,.06);
}
.section--light-warm .results__chart-title{color:var(--dark)}

/* ── Portfolio cards ────────────────────────────────────────── */
.portfolio__grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:28px;
}
.portfolio-card{
  background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius);
  overflow:hidden;transition:all .5s cubic-bezier(.25,.8,.25,1);
}
.portfolio-card:hover{transform:translateY(-10px);box-shadow:0 25px 80px rgba(245,158,11,.1)}
.portfolio-card__image{
  position:relative;overflow:hidden;height:220px;
}
.portfolio-card__image img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .6s ease;
}
.portfolio-card:hover .portfolio-card__image img{transform:scale(1.08)}
.portfolio-card__overlay{
  position:absolute;bottom:0;left:0;right:0;
  padding:12px 16px;
  background:linear-gradient(transparent,rgba(15,23,42,.8));
}
.portfolio-card__platform{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(245,158,11,.9);color:#fff;
  padding:4px 12px;border-radius:50px;font-size:.75rem;font-weight:600;
}
.portfolio-card__content{padding:24px 28px}
.portfolio-card__content h3{font-size:1.1rem;font-weight:700;color:var(--dark);margin-bottom:8px}
.portfolio-card__content p{font-size:.88rem;color:var(--gray-500);line-height:1.6;margin-bottom:16px}
.portfolio-card__results{display:flex;gap:12px;flex-wrap:wrap}
.portfolio-card__result{
  flex:1;min-width:120px;
  background:rgba(245,158,11,.04);border:1px solid rgba(245,158,11,.1);
  border-radius:var(--radius-sm);padding:10px 14px;text-align:center;
  transition:all .3s ease;
}
.portfolio-card__result:hover{background:rgba(245,158,11,.08);transform:translateY(-2px)}
.portfolio-card__result-value{display:block;font-size:1.1rem;font-weight:800;color:var(--amber-dark);margin-bottom:2px}
.portfolio-card__result span{font-size:.75rem;color:var(--gray-500)}

/* CTA portfolio card */
.portfolio-card--cta{
  background:var(--dark-card);border:1px solid rgba(245,158,11,.15);
  display:flex;align-items:center;justify-content:center;min-height:400px;
}
.portfolio-card--cta:hover{border-color:var(--amber);background:var(--dark-surface)}
.portfolio-card__cta-inner{
  text-align:center;padding:40px;
}
.portfolio-card__cta-inner i{
  font-size:3rem;color:rgba(245,158,11,.25);margin-bottom:16px;
  transition:all .4s ease;
}
.portfolio-card--cta:hover .portfolio-card__cta-inner i{color:var(--amber);transform:scale(1.2) rotate(90deg)}
.portfolio-card__cta-inner h3{color:#fff;font-size:1.3rem;margin-bottom:10px}
.portfolio-card__cta-inner p{color:var(--gray-400);font-size:.9rem;margin-bottom:20px}

/* ── Comparison table ───────────────────────────────────────── */
.compare__table{
  max-width:900px;margin:0 auto;
  background:var(--dark-card);border:1px solid rgba(245,158,11,.12);
  border-radius:var(--radius);overflow:hidden;
}
.compare__row{
  display:grid;grid-template-columns:1.2fr 1fr 1fr;border-bottom:1px solid rgba(245,158,11,.06);
  transition:background .3s ease;
}
.compare__row:hover{background:rgba(245,158,11,.02)}
.compare__row:last-child{border-bottom:none}
.compare__row--header{background:rgba(245,158,11,.06)}
.compare__row--header:hover{background:rgba(245,158,11,.06)}
.compare__row--header .compare__cell{font-weight:700;font-size:.9rem;color:#fff}
.compare__cell{padding:16px 20px;font-size:.88rem;display:flex;align-items:center;gap:8px}
.compare__cell--feature{color:var(--gray-300);font-weight:600}
.compare__cell--bad{color:rgba(244,63,94,.7)}
.compare__cell--bad i{color:var(--rose)}
.compare__cell--good{color:rgba(16,185,129,.8)}
.compare__cell--good i{color:var(--success)}
.compare__row--header .compare__cell--bad{color:var(--rose-light)}
.compare__row--header .compare__cell--good{color:var(--gold)}

/* ── Testimonials ───────────────────────────────────────────── */
.testimonials__grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:28px;
}
.testimonial-card{
  background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius);
  padding:36px 30px;transition:all .5s cubic-bezier(.25,.8,.25,1);
}
.testimonial-card:hover{transform:translateY(-6px);box-shadow:0 16px 50px rgba(245,158,11,.08)}
.testimonial-card__stars{color:#FBBF24;font-size:.9rem;margin-bottom:16px;display:flex;gap:2px}
.testimonial-card blockquote{
  font-size:.95rem;color:var(--gray-500);line-height:1.8;margin-bottom:20px;
  font-style:italic;border-left:3px solid var(--amber);padding-left:16px;
}
.testimonial-card__author{display:flex;align-items:center;gap:12px}
.testimonial-card__avatar{
  width:44px;height:44px;border-radius:50%;
  background:linear-gradient(135deg,var(--amber),var(--rose));
  color:#fff;display:flex;align-items:center;justify-content:center;font-size:1rem;
}
.testimonial-card__author strong{display:block;font-size:.9rem;color:var(--dark)}
.testimonial-card__author span{font-size:.8rem;color:var(--gray-400)}

/* ── FAQ ────────────────────────────────────────────────────── */
.faq__list{max-width:760px;margin:0 auto}
.faq-item{border-bottom:1px solid rgba(245,158,11,.1)}
.faq-item__question{
  width:100%;padding:20px 0;background:none;border:none;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  font-size:1rem;font-weight:600;color:#fff;text-align:left;font-family:var(--font);
  transition:all .3s ease;
}
.faq-item__question:hover{color:var(--gold);padding-left:8px}
.faq-item__icon{transition:transform .3s ease;color:var(--amber);font-size:.85rem}
.faq-item--open .faq-item__icon{transform:rotate(45deg)}
.faq-item__answer{
  max-height:0;overflow:hidden;transition:max-height .5s cubic-bezier(.25,.8,.25,1),padding .3s ease;
}
.faq-item--open .faq-item__answer{max-height:400px;padding-bottom:20px}
.faq-item__answer p{font-size:.92rem;color:var(--gray-400);line-height:1.7}

/* ── Contact ────────────────────────────────────────────────── */
.contact__grid{
  display:grid;grid-template-columns:1.4fr 1fr;gap:48px;align-items:start;
}
.contact-form{
  background:var(--dark-card);border:1px solid rgba(245,158,11,.12);
  border-radius:var(--radius);padding:40px;
  transition:all .4s ease;
}
.contact-form:hover{border-color:rgba(245,158,11,.2);box-shadow:0 8px 40px rgba(245,158,11,.06)}
.contact-form__row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.contact-form__group{display:flex;flex-direction:column;gap:6px;margin-bottom:4px}
.contact-form__group label{font-size:.85rem;font-weight:600;color:rgba(255,255,255,.7)}
.contact-form__group label small{font-weight:400;color:var(--gray-400)}
.contact-form__group input,
.contact-form__group textarea,
.contact-form__group select{
  background:rgba(255,255,255,.04);border:1px solid rgba(245,158,11,.15);
  border-radius:var(--radius-sm);padding:12px 16px;color:#fff;font-size:.9rem;
  font-family:var(--font);transition:all .3s ease;
}
.contact-form__group input:focus,
.contact-form__group textarea:focus,
.contact-form__group select:focus{
  outline:none;border-color:var(--amber);
  box-shadow:0 0 0 3px rgba(245,158,11,.15),0 0 20px rgba(245,158,11,.08);
}
.contact-form__group select{cursor:pointer}
.contact-form__group select option{background:var(--dark-card);color:#fff}
.contact-form__group textarea{resize:vertical;min-height:100px}
.contact-form__error{font-size:.78rem;color:var(--danger);min-height:18px}
.contact-form__rodo{margin:16px 0 20px}
.contact-form__checkbox{display:flex;align-items:flex-start;gap:10px;cursor:pointer;font-size:.82rem;color:var(--gray-400)}
.contact-form__checkbox input{display:none}
.contact-form__checkmark{
  width:20px;height:20px;min-width:20px;border-radius:4px;
  border:2px solid rgba(245,158,11,.3);display:flex;align-items:center;justify-content:center;
  transition:all .3s ease;margin-top:2px;
}
.contact-form__checkbox input:checked ~ .contact-form__checkmark{
  background:var(--amber);border-color:var(--amber);
  box-shadow:0 0 12px rgba(245,158,11,.4);
}
.contact-form__checkbox input:checked ~ .contact-form__checkmark::after{
  content:'\2713';color:#fff;font-size:.7rem;font-weight:bold;
}
.contact-form__checkbox a{color:var(--gold);text-decoration:underline}

.contact-info{display:flex;flex-direction:column;gap:20px}
.contact-info__card{
  background:var(--dark-card);border:1px solid rgba(245,158,11,.12);
  border-radius:var(--radius);padding:28px;
  transition:all .4s cubic-bezier(.25,.8,.25,1);
}
.contact-info__card:hover{
  border-color:var(--amber);transform:translateY(-4px) translateX(4px);
  box-shadow:0 12px 40px rgba(245,158,11,.1);
}
.contact-info__card i{
  font-size:1.5rem;color:var(--gold);margin-bottom:12px;display:block;
  transition:transform .4s ease;
}
.contact-info__card:hover i{transform:scale(1.2) rotate(-5deg)}
.contact-info__card h3{font-size:1rem;font-weight:700;color:#fff;margin-bottom:6px}
.contact-info__card p{font-size:.88rem;color:var(--gray-400)}
.contact-info__card a{color:var(--gold)}

/* ── Form toast ─────────────────────────────────────────────── */
.form-toast{
  position:fixed;bottom:30px;right:30px;z-index:9999;
  transform:translateY(120%);opacity:0;transition:all .5s cubic-bezier(.25,.8,.25,1);
}
.form-toast--visible{transform:translateY(0);opacity:1}
.form-toast__inner{
  background:var(--dark-card);border:1px solid rgba(16,185,129,.3);
  border-radius:var(--radius);padding:20px 24px;display:flex;align-items:center;gap:16px;
  box-shadow:0 12px 40px rgba(0,0,0,.4);
}
.form-toast__icon{font-size:1.8rem;color:var(--success)}
.form-toast__content strong{display:block;color:#fff;font-size:.95rem}
.form-toast__content p{font-size:.82rem;color:var(--gray-400);margin-top:2px}
.form-toast__close{
  background:none;border:none;color:var(--gray-400);cursor:pointer;font-size:1rem;
  padding:4px;transition:color .3s;
}
.form-toast__close:hover{color:#fff}

/* ── Footer ─────────────────────────────────────────────────── */
.footer{
  background:var(--dark);border-top:1px solid rgba(245,158,11,.08);
  padding:48px 0 32px;
}
.footer__inner{display:flex;flex-direction:column;align-items:center;gap:24px;text-align:center}
.footer__brand p{font-size:.9rem;color:var(--gray-400);margin-top:8px}
.footer__links{display:flex;gap:24px;flex-wrap:wrap;justify-content:center}
.footer__links a{color:var(--gray-400);font-size:.85rem;transition:all .3s}
.footer__links a:hover{color:var(--gold);transform:translateY(-2px)}
.footer__legal{font-size:.8rem;color:var(--gray-500);display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.footer__legal a{color:var(--gray-400);transition:color .3s}
.footer__legal a:hover{color:var(--gold)}

/* ── Cookie banner / modal ──────────────────────────────────── */
.cookie-banner{
  position:fixed;bottom:0;left:0;width:100%;z-index:9998;
  background:var(--dark-card);border-top:1px solid rgba(245,158,11,.15);
  padding:20px 0;
}
.cookie-banner__inner{max-width:var(--container);margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.cookie-banner__inner p{flex:1;font-size:.88rem;color:var(--gray-300)}
.cookie-banner__actions{display:flex;gap:10px;flex-wrap:wrap}
.cookie-modal{
  position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.6);
  display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(4px);
}
.cookie-modal__inner{
  background:var(--dark-card);border:1px solid rgba(245,158,11,.15);
  border-radius:var(--radius);padding:36px;max-width:480px;width:90%;
}
.cookie-modal__inner h3{font-size:1.2rem;font-weight:700;color:#fff;margin-bottom:20px}
.cookie-modal__option{margin-bottom:12px;color:var(--gray-300);font-size:.9rem}
.cookie-modal__option small{color:var(--gray-400)}
.cookie-modal__option input{margin-right:8px}
.cookie-modal__actions{margin-top:20px}

/* ── Staggered animations ───────────────────────────────────── */
[data-animate]{opacity:0;transform:translateY(40px);transition:all .7s cubic-bezier(.25,.8,.25,1)}
[data-animate].visible{opacity:1;transform:translateY(0)}
[data-animate]:nth-child(2){transition-delay:.08s}
[data-animate]:nth-child(3){transition-delay:.16s}
[data-animate]:nth-child(4){transition-delay:.24s}
[data-animate]:nth-child(5){transition-delay:.32s}
[data-animate]:nth-child(6){transition-delay:.40s}

/* ── Responsive ─────────────────────────────────────────────── */
@media(max-width:1024px){
  .compare__row{grid-template-columns:1fr}
  .compare__cell--feature{background:rgba(245,158,11,.04);font-weight:700}
  .contact__grid{grid-template-columns:1fr}
}

@media(max-width:768px){
  :root{--section-py:72px}
  .nav__menu{
    position:fixed;top:0;left:0;width:100%;height:100vh;
    background:rgba(15,23,42,.97);backdrop-filter:blur(20px);
    flex-direction:column;align-items:center;justify-content:center;
    gap:24px;z-index:999;
    opacity:0;pointer-events:none;
    transition:opacity .35s ease;
  }
  .nav__menu--open{opacity:1;pointer-events:auto}
  .nav__menu .nav__link{font-size:1.2rem;padding:10px 0}
  .nav__menu .nav__link--cta{margin-top:8px;font-size:1rem; padding:10px 20px;}
  .nav__toggle{display:flex;z-index:1001}
  .hero__inner{grid-template-columns:1fr;text-align:center;gap:32px}
  .hero__content{text-align:center}
  .hero__subtitle{margin-left:auto;margin-right:auto}
  .hero__stats{justify-content:center;gap:24px}
  .hero__stat-number{font-size:1.8rem}
  .hero__actions{justify-content:center}
  .hero__platforms-strip{justify-content:center}
  .contact-form__row{grid-template-columns:1fr}
  .contact-form{padding:28px 20px}
  .platforms__grid{grid-template-columns:1fr}
  .services__grid{grid-template-columns:1fr}
  .portfolio__grid{grid-template-columns:1fr}
  .testimonials__grid{grid-template-columns:1fr}
  .results__grid{grid-template-columns:repeat(2,1fr)}
  .cursor-glow{display:none !important}
}

@media(max-width:480px){
  :root{--section-py:56px}
  .hero__title{font-size:1.9rem}
  .hero__stats{flex-direction:row;gap:16px}
  .hero__actions{flex-direction:column;align-items:stretch}
  .btn{justify-content:center}
  .problems__grid{grid-template-columns:1fr}
  .results__grid{grid-template-columns:1fr}
  .hero__visual{min-height:320px}
  .hero__visual-canvas{min-height:320px}
}