@import url("https://fonts.googleapis.com/css2?family=Rubik+Wet+Paint&display=swap");
.tr-lite-scope:root{--bg:#0f0f0f;--panel:#0f0f0f;--text:#e8e8e8;--muted:#b9b9b9;--line:#262626;--accent:#19e06f;--soft:rgba(25,224,111,.25)}
.tr-lite-scope.totem-section{position:relative;overflow:visible;padding:2rem 2rem;background:var(--bg);margin:0 calc(50% - 50vw);width:100vw;margin-bottom:-4px}
.tr-lite-scope .totem-container{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1.4fr);gap:3rem;align-items:start;max-width:1100px;margin:0 auto;position:relative;z-index:2}
.tr-lite-scope .totem-card{text-align:left}
.tr-lite-scope .totem-title{line-height:1.1;margin:-1.4rem 0 .85rem;font-size:clamp(2.4rem,3.8vw,3.6rem)}
.tr-lite-scope .totem-title.grunge-title{font-family:"Rubik Wet Paint",system-ui,sans-serif;color:#19e06f;-webkit-text-stroke:1px #000;text-shadow:0 0 14px var(--soft),0 2px 0 #000;letter-spacing:.5px}

/* Mini okładka + animacja tilt prawo-lewo */
@keyframes trTilt { 
  0%   { transform: rotate(-7deg); } 
  50%  { transform: rotate(2deg); } 
  100% { transform: rotate(-7deg); } 
}
.tr-lite-scope .totem-qmark{
  position:relative;
  width: min(260px, 60%); aspect-ratio:1/1;
  border-radius:28px; background:#000; color:#26f079;
  font-size: clamp(66px, 8.6vw, 118px);
  font-weight:900; display:flex; align-items:center; justify-content:center;
  margin:.8rem 0 1.0rem; transform: rotate(-5deg);
  animation: trTilt 9s ease-in-out infinite;
  box-shadow: 0 24px 46px rgba(0,0,0,.45), inset 0 0 0 1px #0b0b0b;
  text-shadow:
    0 0 12px rgba(38,240,121,.65),
    0 0 28px rgba(38,240,121,.45),
    0 0 60px rgba(38,240,121,.35);
}
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .tr-lite-scope .totem-qmark{ animation: none; }
}

.tr-lite-scope .totem-qmark::before{
  content:""; position:absolute; inset:0; border-radius:28px; pointer-events:none;
  box-shadow:
    0 0 0 2px rgba(38,240,121,.85) inset,
    0 0 28px rgba(38,240,121,.45) inset,
    0 0 60px rgba(38,240,121,.35) inset;
}
.tr-lite-scope .totem-qmark::after{
  content:""; position:absolute; inset:-12px; border-radius:34px; pointer-events:none;
  background: radial-gradient(closest-side, rgba(38,240,121,.22), transparent 70%);
  filter: blur(7px);
}

.tr-lite-scope .totem-desc{color:var(--muted);font-size:1.05rem;line-height:1.6;max-width:42ch}

/* Jak to działa? po lewej */
.tr-lite-scope .totem-how{margin-top:.8rem}
.tr-lite-scope .totem-how h4{color:#19e06f;margin:0 0 .3rem;font-size:1.05rem;letter-spacing:.2px}
.tr-lite-scope .totem-how p{color:#d7d7d7;line-height:1.7;margin:0}

.tr-lite-scope .totem-form .hp{position:absolute;left:-9999px}
.tr-lite-scope .totem-form label{display:block;margin:.6rem 0 .35rem;font-weight:700;color:var(--text)}
.tr-lite-scope .totem-form select{
  width:100%; background:#fff; color:#111; border:1px solid #d9d9d9; border-radius:.6rem;
  padding:.7rem 2.4rem .7rem .8rem; font-size:1rem; line-height:1.2; min-height:48px;
  outline:none; transition:border-color .2s, box-shadow .2s;
}
.tr-lite-scope .totem-form input,.tr-lite-scope .totem-form textarea{
  width:100%; background:#fff; color:#111; border:1px solid #d9d9d9; border-radius:.6rem;
  padding:.7rem .8rem; font-size:1rem; outline:none; transition:border-color .2s, box-shadow .2s;
}
.tr-lite-scope .totem-form input:focus,.tr-lite-scope .totem-form select:focus,.tr-lite-scope .totem-form textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--soft)}
.tr-lite-scope .totem-form textarea{resize:vertical}
.tr-lite-scope .totem-prices,.tr-lite-scope .totem-media{display:grid;gap:.45rem;margin-top:.25rem}
.tr-lite-scope .totem-prices label,.tr-lite-scope .totem-media label{display:flex;align-items:center;gap:.55rem;color:#e8e8e8;font-weight:600}
.tr-lite-scope .totem-prices input[type=radio],.tr-lite-scope .totem-media input[type=radio]{appearance:auto;width:18px;height:18px;accent-color:#19e06f;cursor:pointer;margin:0}

.tr-lite-scope .totem-btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-width: 160px;
  background:#19e06f; color:#072817; border:0;
  border-radius:.9rem; padding:1rem 1.6rem; font-weight:900; letter-spacing:.3px; font-size:1rem;
  margin-top:1.2rem; cursor:pointer;
  transition:transform .15s, box-shadow .2s, filter .2s;
  box-shadow:0 12px 34px rgba(25,224,111,.35), 0 0 0 2px rgba(0,0,0,.4) inset;
}
.tr-lite-scope .totem-btn:hover{ transform:translateY(-2px); filter:saturate(1.06); }
.tr-lite-scope .totem-msg{margin-top:.6rem;color:#e8e8e8}

/* Mały zapis prawny */
.tr-lite-scope .totem-legal{
  margin-top:.5rem;
  font-size:.78rem;
  line-height:1.4;
  color:#a9b2ad;
}
.tr-lite-scope .totem-legal strong{color:#cfead8;font-weight:700}

@media (max-width:900px){
  .tr-lite-scope .totem-container{grid-template-columns:1fr;gap:2rem}
  .tr-lite-scope .totem-qmark{margin-bottom:1rem}
}

.tr-lite-scope.totem-section::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-4px;
  height:56px;
  background:url('tn-brush.png') center bottom repeat-x;
  background-size:cover;
  transform:scaleY(-1);
  pointer-events:none;
  z-index:1;
}
.tr-lite-scope.totem-section::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:52px;
  background:url('tn-brush.png') center bottom repeat-x;
  background-size:cover;
  pointer-events:none;
  z-index:1;
}


/* === custom heading layout: question mark next to title === */
.tr-lite-scope .totem-card {
  position: relative;
}

.tr-lite-scope .totem-heading {
  display: flex;
  align-items: flex-start;
  gap: clamp(0.75rem, 1.8vw, 1.4rem);
}

.tr-lite-scope .totem-title {
  margin-bottom: 0.4rem;
}

/* Question mark without rectangle, gently tilting */
.tr-lite-scope .totem-qmark {
  position: relative;
  width: auto;
  aspect-ratio: auto;
  margin: 0;
  padding: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(66px, 8.6vw, 118px);
  font-weight: 900;
  color: #26f079;
  transform-origin: 50% 50%;
  animation: trTilt 9s ease-in-out infinite;
  text-shadow:
    0 0 12px rgba(38,240,121,.65),
    0 0 28px rgba(38,240,121,.45),
    0 0 60px rgba(38,240,121,.35);
}

/* Disable old glowing rectangle around question mark */
.tr-lite-scope .totem-qmark::before,
.tr-lite-scope .totem-qmark::after {
  content: none !important;
}

@media (prefers-reduced-motion: reduce){
  .tr-lite-scope .totem-qmark { animation: none; }
}