/* ===== base ===== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background:#0a1020;
  color:rgba(235,242,255,.92);
}

/* ===== app ===== */
.app{
  min-height:100%;
  display:grid;
  place-items:center;
  gap:18px;
  padding:46px 16px;
  background:
    radial-gradient(1200px 700px at 20% 10%, rgba(124,247,212,.10), rgba(124,247,212,0) 60%),
    radial-gradient(900px 600px at 80% 30%, rgba(138,181,255,.12), rgba(138,181,255,0) 60%),
    #0a1020;
}
.app__header{width:min(860px,100%); padding:8px 10px}
.app__header h1{margin:0 0 8px; font-size:clamp(28px,4vw,44px)}
.app__header p{margin:0; color:rgba(235,242,255,.70); line-height:1.5}
.app__card{
  width:min(860px,100%);
  padding:22px;
  border-radius:18px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 30px 90px rgba(0,0,0,.40);
  backdrop-filter: blur(10px);
}
.app__card h2{margin:0 0 8px}
.app__card p{margin:0 0 14px; color:rgba(235,242,255,.70)}
.btn{
  border:0;
  padding:12px 14px;
  border-radius:12px;
  cursor:pointer;
  font-weight:800;
  color:#0a1020;
  background: linear-gradient(135deg, #7CF7D4, #8AB5FF);
}

/* ===== intro ===== */
:root{
  --dur: 3s;
  --teal:#7CF7D4;
  --blue:#8AB5FF;
  --amber:#FFD37C;
  --glass: rgba(255,255,255,.06);
}

.intro{
  position:fixed; inset:0; z-index:9999;
  display:grid; place-items:center;
  background:
    radial-gradient(1100px 650px at 50% 35%, rgba(124,247,212,.12), rgba(124,247,212,0) 58%),
    radial-gradient(900px 600px at 58% 55%, rgba(138,181,255,.14), rgba(138,181,255,0) 62%),
    rgba(6,10,20,.92);
  animation: introOut var(--dur) ease forwards;
}
@keyframes introOut{
  0%, 84%{opacity:1; visibility:visible}
  100%{opacity:0; visibility:hidden}
}

.intro__wrap{
  width:min(1020px, 95vw);
  padding: clamp(16px, 2.6vw, 24px);
  border-radius: 24px;
  background: var(--glass);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 40px 140px rgba(0,0,0,.55);
  backdrop-filter: blur(14px);
  overflow:hidden;
  position:relative;
}
.intro__wrap::before{
  content:"";
  position:absolute; inset:-2px;
  background: linear-gradient(120deg, rgba(124,247,212,.16), rgba(138,181,255,.16), rgba(255,211,124,.10));
  filter: blur(22px);
  opacity:.55;
  pointer-events:none;
}

/* topbar */
.topbar{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:16px;
}
.logo{
  display:flex;
  align-items:center;
  gap:12px;
  color: #4a4f57;
}
.logo__mark{
  width:44px;
  height:44px;
  color: currentColor;
  filter: drop-shadow(0 16px 28px rgba(0,0,0,.35));
}
.logo .mk.stroke{
  fill:none;
  stroke: currentColor;
  stroke-width:4.2;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:.96;
}
.logo .mk.dot{
  fill: currentColor;
  opacity:.9;
}
.logo__text{display:flex; flex-direction:column; gap:2px}
.logo__text strong{font-size:16px; letter-spacing:.2px; color: currentColor}
.logo__text em{font-style:normal; font-size:12px; color:#5f646d}

.status{display:flex; align-items:center; gap:10px}
.status__chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 10px;
  border-radius:999px;
  background: rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.10);
  color:rgba(235,242,255,.75);
  font-size:12px;
}
.pulse{
  width:8px; height:8px; border-radius:999px;
  background: var(--blue);
  box-shadow:0 0 0 0 rgba(138,181,255,.35);
  animation: pulse 1.1s ease-in-out infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(138,181,255,.35)}
  70%{box-shadow:0 0 0 10px rgba(138,181,255,0)}
  100%{box-shadow:0 0 0 0 rgba(138,181,255,0)}
}
.status__pct{
  font-weight:800;
  color:rgba(235,242,255,.88);
  padding:8px 10px;
  border-radius:12px;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
}

/* stage layout */
.stage{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns: 1.25fr .75fr;
  gap:16px;
  align-items:stretch;
}
@media (max-width: 900px){
  .stage{grid-template-columns:1fr}
}

/* sheet */
.sheet{
  position:relative;
  border-radius:22px;
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 30px 90px rgba(0,0,0,.40);
  min-height: 420px;
  overflow:hidden;

  opacity:0;
  transform: translateY(12px) scale(.99);
  animation: sheetIn var(--dur) cubic-bezier(.2,.9,.2,1) forwards;
}
@keyframes sheetIn{
  0%{opacity:0; transform: translateY(18px) scale(.985)}
  14%{opacity:1}
  24%{transform: translateY(0) scale(1)}
  84%{opacity:1}
  100%{opacity:0; transform: translateY(-8px) scale(.995)}
}

.sheet__grid{
  position:absolute; inset:18px;
  border-radius:16px;
  background:
    linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity:.9;
  mask-image: radial-gradient(circle at 45% 40%, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 62%, rgba(0,0,0,0) 100%);
}

/* feed conveyor */
.feed{
  position:absolute;
  left:18px; right:18px;
  bottom:18px;
  height:86px;
  border-radius:16px;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  overflow:hidden;
}
.feed::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.08) 20%, rgba(255,255,255,0) 40%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.06) 14px, rgba(255,255,255,0) 14px, rgba(255,255,255,0) 26px);
  opacity:.65;
  animation: belt var(--dur) linear forwards;
}
@keyframes belt{
  0%{transform: translateX(0)}
  84%{transform: translateX(-180px)}
  100%{transform: translateX(-180px)}
}
.feed__part{
  position:absolute;
  top:18px;
  height:50px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 14px 30px rgba(0,0,0,.35);
  background: linear-gradient(135deg, rgba(124,247,212,.22), rgba(138,181,255,.18));
  opacity:0;
}
.feed__part::after{
  content:""; position:absolute; inset:8px;
  border-radius:12px;
  border:1px dashed rgba(255,255,255,.28);
  opacity:.55;
}
.p1{width:64px; left: 40px;  animation: feed1 var(--dur) cubic-bezier(.2,.9,.2,1) forwards;}
.p2{width:92px; left: 140px; animation: feed2 var(--dur) cubic-bezier(.2,.9,.2,1) forwards;}
.p3{width:74px; left: 270px; animation: feed3 var(--dur) cubic-bezier(.2,.9,.2,1) forwards;}
.p4{width:110px;left: 380px; animation: feed4 var(--dur) cubic-bezier(.2,.9,.2,1) forwards; background: linear-gradient(135deg, rgba(255,211,124,.22), rgba(138,181,255,.16));}

@keyframes feed1{0%{opacity:0; transform:translateX(0)} 18%{opacity:1} 40%{transform:translateX(140px)} 100%{opacity:0; transform:translateX(140px)}}
@keyframes feed2{0%{opacity:0; transform:translateX(0)} 22%{opacity:1} 46%{transform:translateX(160px)} 100%{opacity:0; transform:translateX(160px)}}
@keyframes feed3{0%{opacity:0; transform:translateX(0)} 26%{opacity:1} 52%{transform:translateX(170px)} 100%{opacity:0; transform:translateX(170px)}}
@keyframes feed4{0%{opacity:0; transform:translateX(0)} 30%{opacity:1} 58%{transform:translateX(150px)} 100%{opacity:0; transform:translateX(150px)}}

/* packed parts (snap in with overshoot) */
.packed .part{
  position:absolute;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 18px 42px rgba(0,0,0,.35);
  background: linear-gradient(135deg, rgba(124,247,212,.22), rgba(138,181,255,.18));
  opacity:0;
}
.packed .part::after{
  content:""; position:absolute; inset:8px;
  border-radius: 14px;
  border:1px dashed rgba(255,255,255,.26);
  opacity:.55;
}
.part.a{width:140px; height:86px; left:74px;  top:76px;  animation: snapA var(--dur) cubic-bezier(.2,.9,.2,1) forwards;}
.part.b{width:110px; height:150px;left:230px; top:76px;  border-radius:20px; animation: snapB var(--dur) cubic-bezier(.2,.9,.2,1) forwards;}
.part.c{width:240px; height:70px; left:74px;  top:176px; animation: snapC var(--dur) cubic-bezier(.2,.9,.2,1) forwards;}
.part.d{width:150px; height:120px;left:74px;  top:266px; border-radius:22px; animation: snapD var(--dur) cubic-bezier(.2,.9,.2,1) forwards; background: linear-gradient(135deg, rgba(255,211,124,.22), rgba(138,181,255,.16));}
.part.e{width:180px; height:120px;left:360px; top:216px; border-radius:22px; animation: snapE var(--dur) cubic-bezier(.2,.9,.2,1) forwards;}

@keyframes snapA{
  0%, 22%{opacity:0; transform:translate(0,220px) rotate(8deg) scale(.92)}
  34%{opacity:1; transform:translate(0,0) rotate(-3deg) scale(1)}
  38%{transform:translate(6px,6px) rotate(0) scale(1.04)}
  44%{transform:translate(4px,4px) rotate(0) scale(1)}
  84%{opacity:1}
  100%{opacity:0; transform:translate(4px,-6px) scale(.995)}
}
@keyframes snapB{
  0%, 26%{opacity:0; transform:translate(260px,180px) rotate(-10deg) scale(.92)}
  40%{opacity:1; transform:translate(0,0) rotate(4deg) scale(1)}
  44%{transform:translate(6px,6px) rotate(0) scale(1.04)}
  50%{transform:translate(4px,4px) rotate(0) scale(1)}
  84%{opacity:1}
  100%{opacity:0; transform:translate(4px,-6px) scale(.995)}
}
@keyframes snapC{
  0%, 30%{opacity:0; transform:translate(-120px,80px) rotate(6deg) scale(.92)}
  46%{opacity:1; transform:translate(0,0) rotate(-2deg) scale(1)}
  50%{transform:translate(6px,6px) rotate(0) scale(1.04)}
  56%{transform:translate(4px,4px) rotate(0) scale(1)}
  84%{opacity:1}
  100%{opacity:0; transform:translate(4px,-6px) scale(.995)}
}
@keyframes snapD{
  0%, 34%{opacity:0; transform:translate(-80px,-40px) rotate(12deg) scale(.92)}
  52%{opacity:1; transform:translate(0,0) rotate(-3deg) scale(1)}
  56%{transform:translate(6px,6px) rotate(0) scale(1.04)}
  62%{transform:translate(4px,4px) rotate(0) scale(1)}
  84%{opacity:1}
  100%{opacity:0; transform:translate(4px,-6px) scale(.995)}
}
@keyframes snapE{
  0%, 38%{opacity:0; transform:translate(220px,20px) rotate(-10deg) scale(.92)}
  58%{opacity:1; transform:translate(0,0) rotate(3deg) scale(1)}
  62%{transform:translate(6px,6px) rotate(0) scale(1.04)}
  68%{transform:translate(4px,4px) rotate(0) scale(1)}
  84%{opacity:1}
  100%{opacity:0; transform:translate(4px,-6px) scale(.995)}
}

/* cutting path */
.path{
  position:absolute;
  inset:18px;
  width: calc(100% - 36px);
  height: calc(100% - 36px);
  pointer-events:none;
  opacity:0;
  animation: pathIn var(--dur) ease forwards;
}
@keyframes pathIn{
  0%, 54%{opacity:0}
  60%{opacity:1}
  84%{opacity:1}
  100%{opacity:0}
}
.path__stroke{
  fill:none;
  stroke: rgba(138,181,255,.85);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
  animation: draw var(--dur) ease forwards;
  filter: drop-shadow(0 10px 18px rgba(138,181,255,.18));
}
@keyframes draw{
  0%, 58%{stroke-dashoffset: 900}
  80%{stroke-dashoffset: 0}
  100%{stroke-dashoffset: 0}
}
.tool{
  fill: var(--teal);
  opacity:0;
  filter: drop-shadow(0 10px 18px rgba(124,247,212,.22));
  animation: toolMove var(--dur) linear forwards;
}
@keyframes toolMove{
  0%, 58%{opacity:0; transform: translate(0,0)}
  60%{opacity:1}
  66%{transform: translate(180px,0)}
  72%{transform: translate(180px,120px)}
  76%{transform: translate(30px,200px)}
  80%{transform: translate(210px,290px)}
  84%{opacity:1; transform: translate(430px,180px)}
  100%{opacity:0; transform: translate(430px,180px)}
}

/* efficiency badge */
.badge{
  position:absolute;
  right:18px; top:18px;
  width:112px; height:112px;
  border-radius:24px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  display:grid; place-items:center;
  overflow:hidden;
  opacity:0;
  transform: scale(.96);
  animation: badgeIn var(--dur) cubic-bezier(.2,.9,.2,1) forwards;
}
@keyframes badgeIn{
  0%, 40%{opacity:0; transform:scale(.92)}
  52%{opacity:1; transform:scale(1)}
  84%{opacity:1}
  100%{opacity:0; transform:scale(.98)}
}
.badge__ring{
  position:absolute; inset:-20px;
  background: conic-gradient(from 90deg, rgba(124,247,212,.92), rgba(138,181,255,.92), rgba(255,211,124,.85), rgba(124,247,212,.92));
  opacity:.26;
  animation: spin 1.8s linear infinite;
}
@keyframes spin{to{transform: rotate(360deg)}}
.badge__txt{position:relative; text-align:center}
.badge__big{display:block; font-weight:900; font-size:26px}
.badge__small{display:block; font-size:12px; color:rgba(235,242,255,.70)}

/* shine sweep */
.shine{
  position:absolute; inset:-30%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.22), rgba(255,255,255,0) 55%);
  transform: rotate(18deg) translateX(-40%);
  opacity:0;
  animation: shine var(--dur) ease forwards;
}
@keyframes shine{
  0%{opacity:0; transform: rotate(18deg) translateX(-55%)}
  18%{opacity:.35}
  44%{opacity:.25; transform: rotate(18deg) translateX(35%)}
  84%{opacity:.18}
  100%{opacity:0; transform: rotate(18deg) translateX(55%)}
}

/* panel */
.panel{
  border-radius:22px;
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 30px 90px rgba(0,0,0,.35);
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:12px;

  opacity:0;
  transform: translateY(10px);
  animation: panelIn var(--dur) ease forwards;
}
@keyframes panelIn{
  0%{opacity:0; transform: translateY(14px)}
  16%{opacity:1; transform: translateY(0)}
  84%{opacity:1}
  100%{opacity:0; transform: translateY(-6px)}
}
.panel__title{font-weight:900; letter-spacing:.2px}
.steps{display:flex; flex-direction:column; gap:8px}
.step{
  display:flex; align-items:center; gap:10px;
  padding:10px 10px;
  border-radius:14px;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  color: rgba(235,242,255,.72);
  font-size:13px;
}
.step .dot{
  width:10px; height:10px; border-radius:999px;
  background: rgba(255,255,255,.18);
  box-shadow:0 0 0 3px rgba(255,255,255,.06);
}
.s1 .dot{animation: dot1 var(--dur) ease forwards;}
.s2 .dot{animation: dot2 var(--dur) ease forwards;}
.s3 .dot{animation: dot3 var(--dur) ease forwards;}
.s4 .dot{animation: dot4 var(--dur) ease forwards;}
@keyframes dot1{0%, 18%{background:rgba(255,255,255,.18)} 22%{background:rgba(124,247,212,.95)} 100%{background:rgba(124,247,212,.55)}}
@keyframes dot2{0%, 30%{background:rgba(255,255,255,.18)} 36%{background:rgba(138,181,255,.95)} 100%{background:rgba(138,181,255,.55)}}
@keyframes dot3{0%, 56%{background:rgba(255,255,255,.18)} 62%{background:rgba(255,211,124,.95)} 100%{background:rgba(255,211,124,.55)}}
@keyframes dot4{0%, 74%{background:rgba(255,255,255,.18)} 80%{background:rgba(235,242,255,.92)} 100%{background:rgba(235,242,255,.72)}}

.meter{
  height:10px;
  border-radius:999px;
  background: rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.10);
  overflow:hidden;
}
.meter__fill{
  height:100%;
  width:0%;
  border-radius:999px;
  background: linear-gradient(90deg, var(--teal), rgba(138,181,255,.95));
  animation: fill var(--dur) cubic-bezier(.2,.9,.2,1) forwards;
  box-shadow:0 10px 24px rgba(124,247,212,.15);
}
@keyframes fill{
  0%{width:4%}
  18%{width:26%}
  42%{width:58%}
  68%{width:86%}
  84%{width:100%}
  100%{width:100%}
}
.note{font-size:12px; color:rgba(235,242,255,.62); line-height:1.35}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .intro, .sheet, .panel, .feed::before, .feed__part, .packed .part, .path, .path__stroke, .tool, .badge, .badge__ring, .shine, .meter__fill, .pulse, .step .dot{animation:none !important}
  .intro{opacity:0; visibility:hidden}
}

/* ===== LIGHT THEME OVERRIDES (dopisz na końcu pliku) ===== */
:root{
  /* możesz zostawić kolory akcentów jak są */
  --glass: rgba(10,16,32,.04);
}

/* baza */
body{
  background:#f6f8fc;
  color:rgba(10,16,32,.92);
}

/* app tło */
.app{
  background:
    radial-gradient(1200px 700px at 20% 10%, rgba(124,247,212,.18), rgba(124,247,212,0) 60%),
    radial-gradient(900px 600px at 80% 30%, rgba(138,181,255,.20), rgba(138,181,255,0) 60%),
    #f6f8fc;
}

.app__header p,
.app__card p{
  color: rgba(10,16,32,.70);
}

.app__card{
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(10,16,32,.10);
  box-shadow: 0 30px 90px rgba(10,16,32,.14);
  backdrop-filter: blur(10px);
}

/* intro overlay: jasne tło zamiast ciemnej maski */
.intro{
  background:
    radial-gradient(1100px 650px at 50% 35%, rgba(124,247,212,.20), rgba(124,247,212,0) 58%),
    radial-gradient(900px 600px at 58% 55%, rgba(138,181,255,.22), rgba(138,181,255,0) 62%),
    rgba(246,248,252,.92);
}

/* kontener intro */
.intro__wrap{
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(10,16,32,.10);
  box-shadow: 0 40px 140px rgba(10,16,32,.18);
}
.intro__wrap::before{
  opacity:.35; /* delikatniejsza poświata na jasnym tle */
}

/* topbar teksty */
.logo__text em{ color: rgba(10,16,32,.62); }
.status__chip{
  background: rgba(10,16,32,.04);
  border: 1px solid rgba(10,16,32,.10);
  color: rgba(10,16,32,.70);
}
.status__pct{
  color: rgba(10,16,32,.88);
  background: rgba(10,16,32,.03);
  border: 1px solid rgba(10,16,32,.08);
}

/* „szkło” na jasnym tle */
.sheet,
.panel{
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(10,16,32,.10);
  box-shadow: 0 30px 90px rgba(10,16,32,.14);
}

/* siatka bardziej „techniczna” na jasnym tle */
.sheet__grid{
  background:
    linear-gradient(rgba(10,16,32,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,16,32,.10) 1px, transparent 1px);
  opacity: .9;
}

/* elementy panelu */
.step{
  background: rgba(10,16,32,.03);
  border: 1px solid rgba(10,16,32,.08);
  color: rgba(10,16,32,.72);
}
.note{ color: rgba(10,16,32,.60); }

.meter{
  background: rgba(10,16,32,.06);
  border: 1px solid rgba(10,16,32,.10);
}

/* feed */
.feed{
  background: rgba(10,16,32,.03);
  border: 1px solid rgba(10,16,32,.08);
}
.feed::before{
  background:
    linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(10,16,32,.06) 20%, rgba(255,255,255,0) 40%),
    repeating-linear-gradient(90deg, rgba(10,16,32,.05), rgba(10,16,32,.05) 14px, rgba(255,255,255,0) 14px, rgba(255,255,255,0) 26px);
}

/* badge */
.badge{
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(10,16,32,.10);
}
.badge__small{ color: rgba(10,16,32,.62); }