/* True Glassmorphism Design - inspired by the attached image */
:root{
  --bg:#ffffff;
  --fg:#0f172a;
  --muted:#64748b;
  --primary:#2563eb;
  --ring:#93c5fd;
  --border:#e5e7eb;
  --card:#ffffff;
  
  /* True glassmorphism variables */
  --glass-bg: rgba(255, 255, 255, 0.25);
  --glass-bg-strong: rgba(255, 255, 255, 0.4);
  --glass-border: rgba(255, 255, 255, 0.18);
  --glass-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
  --glass-shadow-hover: 0 15px 35px rgba(31, 38, 135, 0.4);
  --glass-blur: 20px;
  --glass-blur-strong: 25px;
  
  /* Depth and layering */
  --surface-1: 0 2px 8px rgba(0, 0, 0, 0.04);
  --surface-2: 0 4px 16px rgba(0, 0, 0, 0.06);
  --surface-3: 0 8px 32px rgba(0, 0, 0, 0.08);
  --surface-4: 0 16px 48px rgba(0, 0, 0, 0.12);
  
  /* Ribbon model height */
  --rb-model: 280px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;line-height:1.5}
body{
  background:
    radial-gradient(circle at 20% 50%, rgba(120, 119, 198, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 40% 80%, rgba(120, 255, 198, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 90% 90%, rgba(198, 120, 255, 0.12) 0%, transparent 50%),
    linear-gradient(135deg, #fafafa 0%, #ffffff 25%, #f8fafc 50%, #ffffff 75%, #fafafa 100%);
  overflow-x:hidden;
  min-height:100vh;
  position:relative;
}

/* Animated background particles for glassmorphism effect */
body::before{
  content:"";
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:
    radial-gradient(circle at 10% 20%, rgba(120, 119, 198, 0.08) 0%, transparent 40%),
    radial-gradient(circle at 90% 10%, rgba(255, 119, 198, 0.06) 0%, transparent 40%),
    radial-gradient(circle at 30% 90%, rgba(120, 255, 198, 0.05) 0%, transparent 40%);
  animation: float 20s ease-in-out infinite;
  z-index:-1;
}

@keyframes float{
  0%, 100%{transform:translate(0, 0) rotate(0deg)}
  33%{transform:translate(-10px, -10px) rotate(1deg)}
  66%{transform:translate(10px, -5px) rotate(-1deg)}
}
html{scroll-behavior:smooth}

.container{
  max-width:1400px;
  margin-left:auto;
  margin-right:auto;
  padding-left:32px;
  padding-right:32px;
  text-align:center;
}

main, header.container, footer.container{margin-left:auto;margin-right:auto;text-align:center}
.header{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  border-bottom:1px solid var(--glass-border);
  background:var(--glass-bg-strong);
  backdrop-filter:blur(var(--glass-blur)) saturate(180%);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(180%);
  box-shadow:var(--surface-2);
  border-radius:0 0 20px 20px;
  margin-bottom:0;
  padding:12px 20px;
}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:20px;line-height:1}
.logo{font-size:30px}
.nav{display:flex;align-items:center;gap:6px}
.nav a{color:var(--fg);text-decoration:none;margin:0 8px;font-size:16px;line-height:1.3;padding:10px 12px;border-radius:10px;transition:color .2s ease, background-color .2s ease, transform .2s ease}
.nav a:not(.btn-primary):hover{color:var(--primary);background:rgba(37,99,235,0.06)}
.nav a.btn-primary{color:#fff}
.nav a.btn-primary:hover{color:#fff}
.nav a.btn-primary:focus-visible{color:#fff}
.nav a:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
.nav .btn-primary{margin-left:6px}

.hero{display:grid;grid-template-columns:1.2fr 1fr;gap:32px;align-items:center}
.hero h1{font-size:38px;margin:0 0 12px}
.hero p{color:var(--muted)}
.hero-cta{display:flex;gap:12px;margin:16px 0 8px}
.badges{display:flex;gap:12px;list-style:none;padding:0;margin:10px 0 0;color:var(--muted);flex-wrap:wrap}
.hero-media img{width:100%;height:auto;border-radius:16px;box-shadow:var(--shadow)}
.hero-media model-viewer{width:100%;height:380px;border-radius:16px;box-shadow:var(--shadow);overflow:hidden}

/* Catering hero: carousel + block menu */
.hero-catering{grid-template-columns:1fr;gap:20px}
.hero-head{display:flex;flex-direction:column;gap:12px;text-align:center;margin-bottom:40px}
.hero-head h1{font-size:42px;font-weight:700;margin:0 0 16px}
.hero-lead{font-size:20px;color:var(--muted);margin:0;max-width:800px;margin:0 auto}
.menu-grid{display:grid;grid-template-columns:repeat(4, minmax(0,1fr));gap:12px}
.menu-tile{
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  border-radius:20px;
  box-shadow:var(--glass-shadow);
  padding:20px;
  display:flex;flex-direction:column;gap:10px;
  backdrop-filter:blur(var(--glass-blur)) saturate(180%);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(180%);
  transition:all .4s cubic-bezier(0.4, 0, 0.2, 1);
  position:relative;
  overflow:hidden;
}

.menu-tile::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  background:linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 50%, rgba(255,255,255,0.05) 100%);
  pointer-events:none;
}

.menu-tile:hover{
  transform:translateY(-4px);
  box-shadow:var(--glass-shadow-hover);
  background:var(--glass-bg-strong);
}

.menu-tile h3{margin:0 0 6px;font-weight:600;font-size:18px}
.menu-tile .desc{margin:0 0 6px;color:var(--muted);font-size:14px;line-height:1.5}
.menu-tile model-viewer{border:none;border-radius:16px;background:transparent;filter:drop-shadow(0 8px 24px rgba(15,23,42,.08))}

/* Horizontal carousel */
.h-carousel{position:relative;width:100%;overflow:hidden}
.h-track{display:grid;grid-auto-flow:column;grid-auto-columns:max-content;gap:12px;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:6px;-webkit-overflow-scrolling:touch}
.h-track::-webkit-scrollbar{height:0}
.h-slide{width:clamp(240px, 32vw, 340px);scroll-snap-align:start;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:12px;box-shadow:var(--shadow);padding:10px;backdrop-filter:blur(var(--glass-blur)) saturate(1.1);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.1)}
.h-slide model-viewer{border:1px solid var(--border);border-radius:10px;background:#f8fafc}
.slide-title{margin:8px 4px 0;color:var(--muted);font-size:14px}

/* True Glassmorphism Infinite Ribbon */
.ribbon{
  position:relative;margin:10px auto;border-radius:20px;overflow:hidden;
  --rb-gap:18px;
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  backdrop-filter:blur(var(--glass-blur)) saturate(180%);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(180%);
  box-shadow:var(--glass-shadow);
  max-width:1400px;
}

.ribbon::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  background:linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 50%, rgba(255,255,255,0.05) 100%);
  pointer-events:none;
  z-index:1;
}

.ribbon.full-bleed{border-radius:0;width:100vw;max-width:none;position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw}
.ribbon-bg{position:absolute;inset:0;display:none}
.ribbon-inner{position:relative;padding:20px 0;overflow:hidden;height:calc(var(--rb-model) + 160px)}
.ribbon-viewport{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;height:100%;overflow:hidden}
.rb-lane{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  width:max-content;
  overflow:visible;
}
.ribbon-track{
  position:relative;left:0;display:flex;gap:var(--rb-gap);
  will-change:transform;
  animation:infiniteScroll 60s linear infinite;
  width:max-content;
}

.rb-slide{
  flex:0 0 auto;width:300px;background:transparent;
  border:none;border-radius:0;box-shadow:none;
  padding:10px 6px;display:flex;flex-direction:column;align-items:center;
}

.rb-slide model-viewer{
  pointer-events:none;border:none;border-radius:16px;background:transparent;
  filter:drop-shadow(0 10px 20px rgba(15,23,42,.12));
  width:100%;height:var(--rb-model);
}

.rb-title{
  margin-top:10px;font-size:13px;color:#111827;
  background:var(--glass-bg-strong);
  padding:6px 12px;border-radius:999px;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid var(--glass-border);
}

/* True infinite scroll animation */
@keyframes infiniteScroll{
  0%{transform:translateX(0)}
  100%{transform:translateX(calc(-100% / 2))}
}

@media (max-width: 1200px){
  .container{padding-left:24px;padding-right:24px}
  .rb-slide{width:240px}
}
@media (max-width: 720px){
  .container{padding-left:16px;padding-right:16px}
  .menu-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
  .rb-slide{width:210px}
}

@media (max-width: 1200px){
  .menu-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
}
@media (max-width: 720px){
  .menu-grid{grid-template-columns:1fr}
  .h-slide{width:260px}
}

/* Enhanced section spacing for better readability */
main > section{margin:80px 0;position:relative}
main > section:first-child{margin-top:40px}
main > section:last-child{margin-bottom:40px}

/* Specific section spacing adjustments */
.hero{margin-bottom:100px}
.transition-section{margin:60px 0}
.ribbon{margin:80px 0}
.how, .benefits, .viewer, .pipeline, .pricing, .faq{margin:120px 0}

@media (max-width: 980px){
  main > section{margin:60px 0}
  .hero{margin-bottom:80px}
  .transition-section{margin:40px 0}
  .ribbon{margin:60px 0}
  .how, .benefits, .viewer, .pipeline, .pricing, .faq{margin:80px 0}
}

@media (max-width: 720px){
  main > section{margin:40px 0}
  .hero{margin-bottom:60px}
  .transition-section{margin:30px 0}
  .ribbon{margin:40px 0}
  .how, .benefits, .viewer, .pipeline, .pricing, .faq{margin:60px 0}
}
section{opacity:1;transform:translateY(0);transition:opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1)}
body.anim-init .section-hidden{opacity:0;transform:translateY(20px)}
.delay-1{transition-delay:.1s}
.delay-2{transition-delay:.2s}
.delay-3{transition-delay:.3s}
.delay-4{transition-delay:.4s}

/* Beautiful fade-in animation for sections */
main > section{position:relative}
main > section::before{content:"";position:absolute;top:-40px;left:0;right:0;height:1px;background:linear-gradient(90deg, transparent 0%, var(--glass-border) 50%, transparent 100%);opacity:0;animation:fadeInLine 1s ease .5s forwards}

/* Staggered section animations */
.hero{animation:fadeInUp 1s cubic-bezier(.2,.8,.2,1) .2s both}
.transition-section{animation:fadeInUp 1s cubic-bezier(.2,.8,.2,1) .4s both}
.ribbon{animation:fadeInScale 1.2s cubic-bezier(.2,.8,.2,1) .6s both}
.how{animation:fadeInUp 1s cubic-bezier(.2,.8,.2,1) .8s both;text-align:center}
.viewer{margin:80px 0;text-align:center}
.pricing{text-align:center}
.faq{text-align:center;max-width:900px;margin-left:auto;margin-right:auto}
.faq details{
  max-width:800px;
  margin:16px auto;
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  border-radius:16px;
  backdrop-filter:blur(var(--glass-blur));
  -webkit-backdrop-filter:blur(var(--glass-blur));
  box-shadow:var(--glass-shadow);
  padding:20px;
  text-align:left;
}
.faq summary{
  font-weight:600;
  cursor:pointer;
  color:var(--primary);
  margin-bottom:8px;
}
.faq details[open] summary{
  margin-bottom:16px;
}
.benefits{animation:fadeInUp 1s cubic-bezier(.2,.8,.2,1) 1s both}

@keyframes fadeInUp{
  from{opacity:0;transform:translateY(30px)}
  to{opacity:1;transform:translateY(0)}
}

@keyframes fadeInScale{
  from{opacity:0;transform:scale(.95)}
  to{opacity:1;transform:scale(1)}
}

@keyframes fadeInLine{
  from{opacity:0;transform:scaleX(0)}
  to{opacity:.3;transform:scaleX(1)}
}

/* Smooth hover animations */
.menu-tile, .stat-item, .b-card, .card{transition:all .3s cubic-bezier(.2,.8,.2,1)}

/* Disable animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important}
  section{opacity:1 !important;transform:none !important}
}

/* Anchor target focus animation */
:target{scroll-margin-top:80px}
.section-focus{animation:popIn .5s ease}
@keyframes popIn{from{transform:scale(.99);filter:saturate(.9)}to{transform:scale(1);filter:saturate(1)}}

.btn{
  display:inline-block;
  border:1px solid var(--glass-border);
  padding:12px 20px;
  border-radius:16px;
  text-decoration:none;
  color:var(--fg);
  background:var(--glass-bg);
  box-shadow:var(--glass-shadow);
  cursor:pointer;
  backdrop-filter:blur(var(--glass-blur)) saturate(180%);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(180%);
  transition:all .3s cubic-bezier(0.4, 0, 0.2, 1);
  font-weight:500;
  position:relative;
  overflow:hidden;
}

.btn::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  background:linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 50%, rgba(255,255,255,0.1) 100%);
  pointer-events:none;
}

.btn:hover{
  transform:translateY(-2px);
  box-shadow:var(--glass-shadow-hover);
  background:var(--glass-bg-strong);
}

.btn-primary{
  background:linear-gradient(135deg, var(--primary), #1d4ed8);
  color:#fff;
  border-color:rgba(255,255,255,0.2);
}

.btn-primary::before{
  background:linear-gradient(135deg, rgba(255,255,255,0.3) 0%, transparent 50%, rgba(255,255,255,0.1) 100%);
}

.btn-primary:focus{outline:3px solid var(--ring)}

/* Keep primary button blue on hover/focus/active (override generic .btn:hover) */
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active{
  background:linear-gradient(135deg, var(--primary), #1d4ed8);
  color:#fff;
  border-color:rgba(255,255,255,0.2);
}

/* Elegancka sekcja przejściowa między modelami a karuzelą */
.transition-section{padding:40px 0;display:grid;grid-template-columns:1fr 1.2fr;gap:40px;align-items:center;max-width:1200px;margin:0 auto;text-align:center}
.impact-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.stat-item{
  text-align:center;
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  border-radius:20px;
  padding:24px;
  backdrop-filter:blur(var(--glass-blur)) saturate(180%);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(180%);
  box-shadow:var(--glass-shadow);
  transition:all .4s cubic-bezier(0.4, 0, 0.2, 1);
  position:relative;
  overflow:hidden;
}

.stat-item::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  background:linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 50%, rgba(255,255,255,0.05) 100%);
  pointer-events:none;
}

.stat-item:hover{
  transform:translateY(-6px);
  box-shadow:var(--glass-shadow-hover);
  background:var(--glass-bg-strong);
}
.stat-number{font-size:36px;font-weight:800;color:var(--primary);margin-bottom:4px}
.stat-label{color:var(--muted);font-size:14px;font-weight:600}
.transition-text{text-align:center}
.transition-text h3{margin:0 0 12px;font-size:24px;text-align:center}
.transition-text p{margin:0;color:var(--muted);font-size:16px;line-height:1.6;text-align:center}

@media (max-width: 980px){
  .transition-section{grid-template-columns:1fr;gap:30px;text-align:center}
  .impact-stats{grid-template-columns:1fr;gap:16px}
  .stat-item{padding:16px}
  .stat-number{font-size:28px}
}

/* Pitch section between grid and ribbon */
.hero-pitch{padding:8px 0 0}
.pitch{background:linear-gradient(90deg, rgba(255,255,255,.5), rgba(255,255,255,.35));border:1px solid var(--glass-border);border-radius:999px;box-shadow:var(--shadow);padding:10px 16px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.pitch h3{margin:0 10px 0 0;display:inline-block}
.pitch ul{margin:0;display:inline-flex;gap:16px;flex-wrap:wrap;list-style:disc;color:var(--muted)}
.pitch ul li{margin-left:14px}

.how h2,.viewer h2,.pricing h2,.faq h2,.contact h2{font-size:32px;margin:40px 0 12px;text-align:center}
.how h2{text-align:center}
.viewer h2{text-align:center}
.pricing h2{text-align:center}
.faq h2{text-align:center}
.contact{text-align:center}
.contact h2{text-align:center}
.how-steps{display:grid;gap:4px;margin:0 auto;padding:0;color:var(--fg);max-width:1000px;text-align:left}
.how-steps li{
  margin:6px 0;
  padding:0 0 0 6px;
  position:relative;
  background:transparent;
  border:none;
  border-radius:0;
  box-shadow:none;
}
.how-steps li::marker{
  content:counter(list-item) ".";
  color:var(--primary);
  font-weight:800;
  font-size:18px;
}
.code-sample{background:#f8fafc;border:1px solid var(--border);padding:12px;border-radius:12px;overflow:auto;margin:20px auto;max-width:1000px}
.how-note{
  max-width:1000px;
  margin:20px auto;
  text-align:center;
  color:var(--muted);
  font-size:16px;
  line-height:1.6;
}

.viewer-toolbar{display:flex;gap:6px;align-items:center;flex-wrap:nowrap;margin:0 auto 8px auto;overflow-x:visible;white-space:nowrap;padding-bottom:4px;justify-content:center;max-width:none;width:100%}
.viewer-toolbar label{display:flex;align-items:center;gap:6px;font-size:13px}
.viewer-toolbar select,.viewer-toolbar input[type="range"],.viewer-toolbar input[type="checkbox"]{transform:scale(0.9);flex:0 0 auto}
.viewer-toolbar select{max-width:180px}
.viewer-toolbar input[type="range"]{width:140px}
.viewer-toolbar button.btn{padding:8px 10px;border-radius:10px}
#viewerCanvas{width:100%;height:620px;border:1px solid var(--glass-border);border-radius:20px;overflow:hidden;box-shadow:var(--shadow);background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur))}
.hint{color:var(--muted);font-size:14px}
.error{color:#b91c1c;background:#fee2e2;border:1px solid #fecaca;padding:10px;border-radius:10px;margin-top:10px;display:none}

.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:1000px;margin:0 auto}
.card{
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  border-radius:24px;
  box-shadow:var(--glass-shadow);
  padding:28px;
  backdrop-filter:blur(var(--glass-blur)) saturate(180%);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(180%);
  transition:all .4s cubic-bezier(0.4, 0, 0.2, 1);
  position:relative;
  overflow:hidden;
}

.card::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  background:linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 50%, rgba(255,255,255,0.05) 100%);
  pointer-events:none;
}

.card:hover{
  transform:translateY(-6px);
  box-shadow:var(--glass-shadow-hover);
  background:var(--glass-bg-strong);
}

.card h3{margin:0 0 12px;font-weight:700;font-size:22px;color:var(--fg)}
.card .price{font-weight:800;font-size:28px;margin:12px 0 16px;color:var(--primary)}
.card ul{margin:0;padding-left:20px;color:var(--muted);line-height:1.7}
.card ul li{margin-bottom:8px}

.card.featured{
  border-color:var(--primary);
  box-shadow:0 16px 48px rgba(37,99,235,.15);
  background:linear-gradient(135deg, var(--glass-bg-strong) 0%, rgba(37,99,235,0.05) 100%);
}

.card.featured::before{
  background:linear-gradient(135deg, rgba(37,99,235,0.1) 0%, transparent 50%, rgba(255,255,255,0.1) 100%);
}

.card.featured:hover{
  box-shadow:0 24px 64px rgba(37,99,235,.2);
}
.muted{color:var(--muted)}

.footer{
  border-top:1px solid var(--glass-border);
  color:var(--muted);
  font-size:16px;
  text-align:center;
  background:var(--glass-bg);
  backdrop-filter:blur(var(--glass-blur)) saturate(180%);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(180%);
  padding:60px 0;
  margin-top:120px;
  box-shadow:var(--surface-2);
  position:relative;
}

.footer::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  background:linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 50%, rgba(255,255,255,0.05) 100%);
  pointer-events:none;
}

@media (max-width: 980px){
  .hero{grid-template-columns:1fr}
  .pricing-grid{grid-template-columns:1fr}
}

/* Pipeline timeline (modern) */
.pipeline h2{font-size:28px;margin:40px 0 12px}
.tline{position:relative;padding:30px 0}
.t-track{position:absolute;left:50%;top:0;bottom:0;width:4px;transform:translateX(-50%);background:linear-gradient(180deg,#e0e7ff, #dbeafe);border-radius:2px;overflow:hidden}
.t-track::after{content:"";position:absolute;left:0;top:-20%;width:100%;height:40%;background:linear-gradient(180deg, rgba(59,130,246,.0), rgba(59,130,246,.6), rgba(59,130,246,.0));filter:blur(2px);animation:tWave 2.8s linear infinite}
@keyframes tWave{0%{top:-30%}100%{top:100%}}
.t-item{position:relative;display:grid;grid-template-columns:1fr;gap:10px;margin:26px 0;transition:all .6s cubic-bezier(.2,.8,.2,1)}
body.anim-init .t-item{opacity:0;transform:translateY(14px)}
.t-item.revealed{opacity:1;transform:translateY(0)}
/* Ensure revealed overrides the anim-init hide for timeline items */
body.anim-init .t-item.revealed{opacity:1;transform:translateY(0)}
.t-item.left{padding-right:54%}
.t-item.right{padding-left:54%}
.t-node{position:absolute;left:50%;top:10px;width:38px;height:38px;border-radius:50%;transform:translate(-50%,0);background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;box-shadow:0 10px 22px rgba(37,99,235,.25)}
.t-card{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:16px;box-shadow:var(--shadow);padding:16px;backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur))}
.t-card h3{margin:0 0 6px}
.t-card p{margin:0;color:var(--muted)}
.t-ico{position:absolute;top:10px;transform:translateY(-50%);font-size:36px;opacity:.95;filter:drop-shadow(0 6px 12px rgba(0,0,0,.08))}
.t-item.left .t-ico{right:calc(50% + 26px)}
.t-item.right .t-ico{left:calc(50% + 26px)}
.t-meta{display:flex;gap:10px;margin-top:10px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;border:1px solid var(--glass-border);background:var(--glass-bg);color:var(--muted);font-size:13px;backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur))}
.chip.time{border-color:#bfdbfe;color:#1e3a8a;background:#eff6ff}

@media (prefers-reduced-motion: reduce){
  .t-item{transition:none}
}

/* FAQ with true glassmorphism */
.faq details{
  border:1px solid var(--glass-border);
  border-radius:20px;
  background:var(--glass-bg);
  box-shadow:var(--glass-shadow);
  padding:20px 24px;
  margin:20px 0;
  transition:all .4s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter:blur(var(--glass-blur)) saturate(180%);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(180%);
  position:relative;
  overflow:hidden;
}

.faq details::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  background:linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 50%, rgba(255,255,255,0.05) 100%);
  pointer-events:none;
}

.faq details[open]{
  transform:translateY(-4px);
  box-shadow:var(--glass-shadow-hover);
  background:var(--glass-bg-strong);
}

.faq details:hover{
  transform:translateY(-2px);
  box-shadow:var(--glass-shadow-hover);
  background:var(--glass-bg-strong);
}

.faq summary{
  cursor:pointer;list-style:none;font-weight:600;font-size:18px;
  color:var(--fg);position:relative;z-index:1;
}

.faq summary::-webkit-details-marker{display:none}
.faq details p{margin:16px 0 0;color:var(--muted);line-height:1.7;position:relative;z-index:1}

/* Enhanced Benefits Section with True Glassmorphism */
.benefits{padding:120px 0;text-align:center}
.benefits-header{text-align:center;margin-bottom:80px}
.benefits-header h2{font-size:42px;font-weight:700;margin:0 0 20px;background:linear-gradient(135deg, var(--fg) 0%, var(--muted) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.benefits-subtitle{font-size:20px;color:var(--muted);margin:0;max-width:600px;margin:0 auto;line-height:1.6;font-weight:400}

.benefit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-bottom:60px}

.b-card{
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  border-radius:24px;
  padding:40px 32px;
  backdrop-filter:blur(var(--glass-blur)) saturate(180%);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(180%);
  box-shadow:var(--glass-shadow);
  transition:all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position:relative;
  overflow:hidden;
}

.b-card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 50%, rgba(255,255,255,0.05) 100%);
  pointer-events:none;
}

.b-card:hover{
  transform:translateY(-8px);
  box-shadow:var(--glass-shadow-hover);
  background:var(--glass-bg-strong);
}

.b-icon-wrapper{
  width:80px;
  height:80px;
  background:linear-gradient(135deg, rgba(37,99,235,0.1) 0%, rgba(37,99,235,0.05) 100%);
  border-radius:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:24px;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(37,99,235,0.1);
}

.b-ico{
  width:40px;
  height:40px;
  color:var(--primary);
  stroke-width:1.8;
}

.b-card h3{
  font-size:24px;
  font-weight:700;
  margin:0 0 16px;
  color:var(--fg);
}

.b-lead{
  font-size:16px;
  line-height:1.7;
  color:var(--muted);
  margin:0 0 28px;
  font-weight:400;
}

/* Unify paragraph typography inside all benefit cards */
.b-card p{
  font-size:16px;
  line-height:1.7;
  color:var(--muted);
  margin:0 0 28px;
  font-weight:400;
}

.b-benefits{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.b-benefit{
  display:flex;
  align-items:flex-start;
  gap:12px;
  font-size:16px;
  line-height:1.7;
  color:var(--muted);
}

.b-check{
  color:var(--primary);
  font-weight:700;
  flex-shrink:0;
  width:20px;
  height:20px;
  background:rgba(37,99,235,0.1);
  border:1px solid rgba(37,99,235,0.2);
  box-shadow:0 1px 2px rgba(0,0,0,.04) inset;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
}

/* Unify bullets inside benefit cards to checkmark style */
.b-card ul{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:10px;
  color:var(--muted);
  text-align:left;
}
.b-card ul li{
  display:grid;
  grid-template-columns:20px 1fr;
  align-items:flex-start;
  column-gap:6px;
  font-size:16px;
  line-height:1.7;
  color:var(--muted);
}
.b-card ul li::before{
  content:"✓";
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px;
  margin-top:2px;
  border-radius:50%;
  background:rgba(37,99,235,0.1);
  border:1px solid rgba(37,99,235,0.2);
  box-shadow:0 1px 2px rgba(0,0,0,.04) inset;
  color:var(--primary);
  font-weight:700;
  font-size:12px;
  line-height:20px;
  flex:0 0 20px;
  grid-column:1;
  grid-row:1;
  align-self:start;
}

.benefits-footer{
  text-align:center;
  padding:32px;
  background:var(--glass-bg-strong);
  border:1px solid var(--glass-border);
  border-radius:20px;
  backdrop-filter:blur(25px);
  -webkit-backdrop-filter:blur(25px);
  box-shadow:var(--surface-3);
}

.benefits-footer p{
  font-size:18px;
  margin:0;
  color:var(--muted);
}

@media (max-width: 1200px){
  .benefit-grid{grid-template-columns:repeat(2,1fr);gap:24px}
  .benefits-header h2{font-size:36px}
}

@media (max-width: 768px){
  .benefit-grid{grid-template-columns:1fr;gap:20px}
  .benefits{padding:80px 0}
  .benefits-header{margin-bottom:60px}
  .benefits-header h2{font-size:32px}
  .benefits-subtitle{font-size:18px}
  .b-card{padding:32px 24px}
  .b-icon-wrapper{width:64px;height:64px}
}

@media (max-width: 980px){
  .benefit-grid{grid-template-columns:1fr}
}

/* Benefits: 3-column glass cards with enhanced effect */
.benefit-grid{grid-template-columns:repeat(3,1fr)}

/* Timeline icons: inline SVG sizing */
.t-ico{filter:drop-shadow(0 6px 12px rgba(0,0,0,.08))}
.t-ico svg{width:36px;height:36px}

/* Fix: ensure sections from "Jak to działa" down are centered */
#jak-to-dziala.container,
#dla-kogo.container,
#viewer.container,
#pipeline.container,
#cennik.container,
#faq.container,
#kontakt.container,
footer.container{
  margin-left:auto;
  margin-right:auto;
}

/* Brand link (logo + name) style */
.brand-link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:inherit;
  text-decoration:none;
}
.brand-link:hover{opacity:.9}

/* Back-to-top floating button */
.back-to-top{
  position:fixed;
  right:18px;
  bottom:18px;
  width:44px;height:44px;
  border-radius:999px;
  border:1px solid var(--glass-border);
  background:var(--glass-bg-strong);
  color:var(--fg);
  box-shadow:var(--glass-shadow);
  backdrop-filter:blur(var(--glass-blur));
  -webkit-backdrop-filter:blur(var(--glass-blur));
  display:flex;align-items:center;justify-content:center;
  font-size:20px;font-weight:700;line-height:1;
  cursor:pointer;
  z-index:9999;
  animation:
    bounceIn 800ms cubic-bezier(.2,.8,.2,1) both,
    bounceY 2.2s ease-in-out 800ms infinite;
  transition:opacity .2s ease, transform .2s ease;
}
.back-to-top:hover{transform:translateY(-2px);box-shadow:var(--glass-shadow-hover)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@keyframes bounceIn{0%{transform:translateY(80px) scale(.9);opacity:0}60%{transform:translateY(-6px) scale(1);opacity:1}100%{transform:translateY(0)}}
@keyframes bounceY{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}