25.10 (Marius: „pe laptop cum facem să adăugăm și asta?”): stilurile contorului sunt comune; telefonul și laptopul au doar așezarea lor.
   Laptop (Marius 25.10, „A, clar”): titlul în stânga, contorul în dreapta, ca „Scoatem jignirile”; varianta centrată e în backup-inainte-pb-laptop-2026-10-25/. */
.pb{display:none}
.pb-in{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;width:100%;max-width:360px}
.pb-bg.hx-bg{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.pb-bg.hx-bg path.hx-dots{stroke:#C9C0B5}
.pb .pb-bg{display:none}
.pb::before{content:"";position:absolute;left:50%;top:50%;width:min(150vw,980px);height:min(150vw,980px);transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(233,114,50,.18),rgba(233,114,50,.06) 45%,rgba(233,114,50,0) 72%);pointer-events:none}
.pb-acc{color:var(--accent-h)}
.pb .nw{white-space:nowrap}
.pb-pe{margin:0 0 12px;font-size:17px;line-height:1.2;font-weight:500;letter-spacing:-.01em;color:var(--text-2)}

.pb-ct{position:relative;width:100%;margin:0;padding:18px 16px 16px;border-radius:10px;overflow:hidden;
  background:linear-gradient(180deg,var(--mt-bak1),var(--mt-bak2));border:1px solid #B9B2A9;
  box-shadow:0 0 0 5px var(--mt-rim),0 0 0 6px #6B6764,inset 0 1px 0 var(--mt-cast-hi),inset 0 -2px 0 var(--mt-cast-lo),0 18px 40px -16px rgba(26,25,25,.5)}
.pb-gr{position:absolute;inset:0;width:100%;height:100%;opacity:.06;pointer-events:none;mix-blend-mode:multiply}
.pb-sr{position:absolute;width:7px;height:7px;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--mt-screw1),var(--mt-screw2));box-shadow:0 1px 1px rgba(0,0,0,.35),inset 0 0 0 .5px rgba(0,0,0,.2)}
.pb-sr::after{content:"";position:absolute;left:1px;right:1px;top:50%;height:1px;background:rgba(40,30,20,.7);transform:translateY(-50%) rotate(var(--a,0deg))}
.pb-sr:nth-of-type(1){top:8px;left:8px}.pb-sr:nth-of-type(2){top:8px;right:8px}.pb-sr:nth-of-type(3){bottom:8px;left:8px}.pb-sr:nth-of-type(4){bottom:8px;right:8px}
.pb-fata{position:relative;display:flex;align-items:center;justify-content:center}
.pb-drums{position:relative;display:flex;gap:2px;padding:5px;border-radius:10px;background:#141313;box-shadow:0 0 0 2px var(--mt-rim),inset 0 2px 5px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,249,232,.35),inset 0 -1px 0 var(--mt-cast-lo),0 1px 0 #FFFFFF}
.pb-drums::after{content:"";position:absolute;inset:0;right:47px;border-radius:10px 0 0 10px;background:linear-gradient(112deg,var(--mt-glass) 0 22%,transparent 22.5%);pointer-events:none}
.pb-fanta::after{content:"";position:absolute;inset:0;background:linear-gradient(112deg,var(--mt-glass) 0 22%,transparent 22.5%);pointer-events:none}
.pb-dr:nth-child(1),.pb-dr:nth-child(3){top:.5px}.pb-dr:nth-child(2),.pb-dr:nth-child(4){top:-.5px}
.pb-dr{position:relative;width:40px;height:58px;overflow:hidden;border-radius:3px;background:#1E1D1C;
  box-shadow:inset 0 6px 8px rgba(0,0,0,.75),inset 0 -6px 8px rgba(0,0,0,.75)}
.pb-dr:last-child{background:var(--accent-h);box-shadow:inset 0 6px 8px rgba(110,40,8,.6),inset 0 -6px 8px rgba(110,40,8,.6)}
.pb-dr>div{display:flex;flex-direction:column;transition:transform .32s cubic-bezier(.3,.9,.3,1.1)}
.pb-dr span{display:block;height:58px;line-height:58px;font-size:40px;font-weight:600;color:#FFFFFF;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.pb-unit{position:absolute;left:calc(50% + 96px);top:50%;transform:translateY(-50%);font-size:17px;font-weight:500;color:var(--text);letter-spacing:-.01em}
.pb-fanta{position:relative;height:14px;width:220px;margin:16px auto 0;border-radius:4px;overflow:hidden;background:linear-gradient(180deg,var(--mt-al1),var(--mt-al2) 55%,var(--mt-al3));box-shadow:0 0 0 2px var(--mt-rim),inset 0 2px 3px rgba(0,0,0,.45),0 1px 0 #FFFFFF}
.pb-fanta::before{content:"";position:absolute;inset:2px 0;width:calc(100% + 3px);
  background:repeating-linear-gradient(90deg,var(--mt-brush) 0 1px,transparent 1px 3px);opacity:.18}
.pb.is-viu .pb-fanta::before{animation:pb-grad 1.1s linear infinite}
.pb-fanta i{position:absolute;top:2px;bottom:2px;left:0;width:7px;border-radius:1px;background:var(--accent);box-shadow:0 0 0 1px var(--accent-h);transform:translateX(-10px)}
.pb.is-viu .pb-fanta i{animation:pb-disc 7s linear infinite}
.pb.is-viu .pb-ct{animation:none}
.pb.is-off .pb-ct,.pb.is-off .pb-fanta i,.pb.is-off .pb-fanta::before{animation-play-state:paused}
.pb-made{position:relative;margin:16px 0 0;padding:9px 24px 10px;font-size:13px;line-height:1.2;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--mt-plate-t);
  background:linear-gradient(180deg,var(--mt-plate1),var(--mt-plate2));border:1px solid var(--mt-plate-b);border-radius:3px;box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 1px 0 rgba(255,255,255,.45),inset 0 -1px 0 rgba(0,0,0,.08)}
.pb-made i{position:absolute;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--mt-screw1),var(--mt-screw2));box-shadow:0 .5px 1px rgba(0,0,0,.4)}
.pb-made i:first-child{left:7px}.pb-made i:last-child{right:7px}

.pb-cum{margin:18px 0 0;max-width:280px;font-size:13px;line-height:1.35;letter-spacing:0;color:var(--text-2)}
.pb-cum .brand{color:var(--text)}

.pb .pb-up{opacity:0;transform:translateY(12px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.pb.is-viu .pb-up{opacity:1;transform:none}
.pb.is-viu .pb-up:nth-child(2){transition-delay:.1s}
.pb.is-viu .pb-up:nth-child(3){transition-delay:.2s}
.pb.is-viu .pb-up:nth-child(4){transition-delay:.3s}

@media (max-width:760px){
  .pb{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center;align-items:center;
    min-height:calc(100vh - 61px);min-height:calc(100lvh - 61px);padding:36px 16px 32px;text-align:center;background:var(--bg);scroll-snap-align:start}
  .pb .h2{margin:0 0 26px;font-size:40px;line-height:1.02;letter-spacing:-.045em;font-weight:500}
  .pb-sub,.pb-lap,.pb-la2{display:none}
  .pb-dot{color:var(--accent)}
  .pb-pe{display:none}
}

@media (min-width:761px){
  .pb{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;
    min-height:calc(100vh - 65px);min-height:calc(100svh - 65px);padding:48px 24px;text-align:center;background:var(--bg)}
  .pb-in{max-width:640px}
  .pb .h2{margin:0 0 36px;font-size:56px;line-height:1.05;letter-spacing:-.04em}
  .pb-tel,.pb-la2,.pb-cum{display:none}
  .pb-dot{color:var(--accent);filter:none}
  .pb-ct{width:380px}
  .pb-pe{font-size:24px;margin-bottom:10px}
  .pb-sub{order:1;margin:22px 0 0;max-width:420px;font-size:14px;line-height:1.4;letter-spacing:0;color:var(--text-2)}
  .pb-ct{width:532px;padding:25px 22px 20px;border-radius:14px;
    box-shadow:0 0 0 7px var(--mt-rim),0 0 0 8px #6B6764,inset 0 1px 0 var(--mt-cast-hi),inset 0 -2px 0 var(--mt-cast-lo),0 25px 56px -22px rgba(26,25,25,.5)}
  .pb-sr{width:10px;height:10px}
  .pb-sr:nth-of-type(1){top:11px;left:11px}.pb-sr:nth-of-type(2){top:11px;right:11px}.pb-sr:nth-of-type(3){bottom:11px;left:11px}.pb-sr:nth-of-type(4){bottom:11px;right:11px}
  .pb-drums::after{right:66px;border-radius:14px 0 0 14px}
  .pb-pe{font-size:28px;margin-bottom:14px}
  .pb-drums{gap:3px;padding:7px;border-radius:14px}
  .pb-dr{width:56px;height:81px;border-radius:4px}
  .pb-dr span{height:81px;line-height:81px;font-size:56px}
  .pb-unit{left:calc(50% + 134px);font-size:28px}
  .pb-fanta{width:308px;height:20px;margin-top:22px}
  .pb-fanta i{width:10px}
  .pb.is-viu .pb-fanta i{animation-name:pb-disc-l}
  .pb-made{margin:22px 0 0;padding:13px 30px 14px;font-size:15px}
  .pb-made i{width:7px;height:7px;margin-top:-3.5px}.pb-made i:first-child{left:10px}.pb-made i:last-child{right:10px}
  .pb-sub{font-size:17px}
}
@keyframes pb-disc-l{0%{transform:translateX(-14px)}100%{transform:translateX(312px)}}
@keyframes pb-disc{0%{transform:translateX(-10px)}100%{transform:translateX(222px)}}
@keyframes pb-grad{0%{transform:translateX(0)}100%{transform:translateX(3px)}}
@keyframes pb-hum{0%{transform:translate(0,0)}20%{transform:translate(.6px,-.4px)}40%{transform:translate(-.5px,.5px)}60%{transform:translate(.4px,.6px)}80%{transform:translate(-.6px,-.3px)}100%{transform:translate(0,0)}}
@media (max-width:760px) and (max-height:720px){
  .pb .h2{font-size:36px}
  .pb-cum{margin-top:14px}
}
@media (max-width:760px) and (max-height:600px){
  .pb{padding-top:28px}
  .pb .h2{font-size:32px}
  .pb-dr{width:34px;height:50px}
  .pb-dr span{height:50px;line-height:50px;font-size:34px}
}
@media (prefers-reduced-motion:reduce){
  .pb .pb-up{opacity:1;transform:none;transition:none}
  .pb-dr>div{transition:none}
  .pb.is-viu .pb-fanta i{animation:none;transform:translateX(106px)}
  .pb.is-viu .pb-fanta::before{animation:none}
  .pb.is-viu .pb-ct{animation:none}
}
@media (min-width:761px) and (prefers-reduced-motion:reduce){.pb.is-viu .pb-fanta i{transform:translateX(149px)}}

@media (max-width:760px){ .pb-cum{margin-top:16px;max-width:300px;font-size:15px;line-height:1.4} }

@media (min-width:1100px){
  .pb{text-align:left}
  .pb-in{display:grid;grid-template-columns:minmax(0,460px) 532px;column-gap:72px;align-items:center;justify-content:center;width:100%;max-width:1180px}
  .pb .h2{grid-column:1;grid-row:1;align-self:end;margin:0}
  .pb .pb-sub{grid-column:1;grid-row:2;align-self:start;order:0;margin:24px 0 0;max-width:400px}
  .pb-ct{grid-column:2;grid-row:1 / span 2;text-align:center}
}

.pb-fata2{display:none}
@media (min-width:761px){
  .pb-fata2{display:flex;margin-bottom:16px}
  .pb-drums2{left:59px}
  .pb-pe{margin-bottom:16px}
}

.pb-dcol{width:100%}
.pb-peste{display:none}
@media (min-width:761px){
  #problema .pb-fata2,#problema .pb-pe{display:none}
  .pb .pb-t1,.pb .pb-t2,.pb .pb-t3{display:block}
  .pb .pb-t1{font-size:96px;line-height:.98;letter-spacing:-.05em;white-space:nowrap}
  .pb .pb-t2{margin-top:10px;font-size:48px;line-height:1.05;letter-spacing:-.04em}
  .pb .pb-t3{margin-top:6px;font-size:36px;line-height:1.1;letter-spacing:-.035em}
  .pb-dcol{width:auto}
  .pb-peste{display:block;margin:0 0 16px;font-size:24px;line-height:1.2;font-weight:500;letter-spacing:-.02em;color:var(--text);text-align:left}

  #problema .pb-ct{width:460px;padding:30px 32px 26px;border-radius:20px;background:#FFFFFF;border:1px solid var(--line);
    box-shadow:0 24px 48px -32px rgba(26,25,25,.28)}
  #problema .pb-gr,#problema .pb-sr,#problema .pb-drums::after,#problema .pb-fanta::after{display:none}
  #problema .pb-drums{gap:6px;padding:0;border-radius:0;background:none;box-shadow:none}
  #problema .pb-dr{width:52px;height:72px;border-radius:10px;background:#F4F1ED;box-shadow:inset 0 0 0 1px var(--line-3)}
  #problema .pb-dr:last-child{background:var(--accent);box-shadow:none}
  #problema .pb-dr span{height:72px;line-height:72px;font-size:44px;font-weight:500;color:var(--text)}
  #problema .pb-dr:last-child span{color:#FFFFFF}
  #problema .pb-unit{left:calc(50% + 124px);font-size:22px;color:var(--text-2)}
  #problema .pb-fanta{width:244px;height:6px;margin-top:24px;border-radius:999px;background:#EEEAE4;box-shadow:none}
  #problema .pb-fanta::before{opacity:.08}
  #problema .pb-fanta i{top:0;bottom:0;width:6px;border-radius:999px;box-shadow:none}
  #problema .pb-made{margin:20px 0 0;padding:0;border:0;background:none;box-shadow:none;font-size:11px;letter-spacing:.18em;color:var(--text-3,#9C968F)}
  #problema .pb-made i{display:none}
}
@keyframes pb-disc-s{0%{transform:translateX(-8px)}100%{transform:translateX(248px)}}
@media (min-width:761px){ #problema.pb.is-viu .pb-fanta i{animation-name:pb-disc-s} }
@media (min-width:1100px){
  .pb-dcol{grid-column:2;grid-row:1 / span 2}
  .pb-in{grid-template-columns:minmax(0,500px) 460px;column-gap:96px}
  .pb .pb-sub{margin-top:28px}
}
@media (min-width:761px){
  #problema .pb-unit{position:static;transform:none;margin-left:14px}
}

@media (min-width:761px){
  #problema .pb-cum{display:block;margin:18px 0 0;max-width:none;font-size:17px;line-height:1.4;color:var(--text-2);text-align:center}
  #problema .h2{font-size:72px;line-height:1.02;letter-spacing:-.045em}
}
@media (min-width:1100px){
  #problema .h2{grid-column:1;grid-row:1 / span 2;align-self:center;margin:0;max-width:500px}
}
@media (max-width:760px){ #problema .pb-cum{margin-left:auto;margin-right:auto} }

@media (min-width:761px){
  #problema .h2 .pb-lf{display:block;margin-top:10px;font-size:.58em;line-height:1.05;letter-spacing:-.03em;color:var(--text-2)}

  #problema .pb-ct{width:460px;padding:36px 38px 28px;border-radius:26px;border:1px solid #E3DDD5;
    background:linear-gradient(180deg,#FFFFFF 0%,#FAF8F5 100%);
    box-shadow:inset 0 1px 0 #FFFFFF,0 0 0 8px rgba(255,255,255,.65),0 0 0 9px #E6E0D8,0 34px 64px -34px rgba(26,25,25,.38),0 2px 6px -2px rgba(26,25,25,.08)}
  #problema .pb-sr{display:block;width:7px;height:7px;background:radial-gradient(circle at 35% 30%,#F4F0EA,#CFC7BC);box-shadow:inset 0 0 0 .5px rgba(26,25,25,.18)}
  #problema .pb-sr::after{background:rgba(26,25,25,.28)}
  #problema .pb-sr:nth-of-type(1){top:14px;left:14px}#problema .pb-sr:nth-of-type(2){top:14px;right:14px}
  #problema .pb-sr:nth-of-type(3){bottom:14px;left:14px}#problema .pb-sr:nth-of-type(4){bottom:14px;right:14px}

  #problema .pb-drums{gap:6px;padding:8px;border-radius:16px;background:#EFEBE5;
    box-shadow:inset 0 1px 3px rgba(26,25,25,.14),inset 0 0 0 1px #E2DBD2,0 1px 0 #FFFFFF}
  #problema .pb-dr{width:56px;height:80px;border-radius:9px;background:linear-gradient(180deg,#FFFFFF 0%,#F5F2EE 49.6%,#EDE9E4 50.4%,#F7F4F0 100%);
    box-shadow:0 0 0 1px #E0D9D0,0 1px 2px rgba(26,25,25,.10),inset 0 1px 0 #FFFFFF}
  #problema .pb-dr:last-child{background:linear-gradient(180deg,#F38A50 0%,#EC7438 49.6%,#DC6528 50.4%,#E9713A 100%);
    box-shadow:0 0 0 1px #D2602A,0 2px 6px -1px rgba(233,114,50,.45),inset 0 1px 0 rgba(255,255,255,.35)}
  #problema .pb-dr span{height:80px;line-height:80px;font-size:48px;font-weight:500;letter-spacing:-.02em;color:var(--text)}
  #problema .pb-dr:last-child span{color:#FFFFFF}
  #problema .pb-unit{margin-left:16px;font-size:22px;font-weight:500;color:var(--text-2)}

  #problema .pb-fanta{width:258px;height:6px;margin-top:26px;border-radius:999px;background:#ECE7E0;box-shadow:inset 0 1px 2px rgba(26,25,25,.12),0 1px 0 #FFFFFF}
  #problema .pb-made{display:flex;align-items:center;justify-content:center;gap:12px;margin:22px 0 0;font-size:11px;font-weight:600;letter-spacing:.22em;color:#A39C94;
    text-shadow:0 1px 0 #FFFFFF}
  #problema .pb-made::before,#problema .pb-made::after{content:"";width:28px;height:1px;background:#DDD6CD}

  #problema .pb-cum{margin-top:26px;font-size:16px}
}
@keyframes pb-disc-s2{0%{transform:translateX(-8px)}100%{transform:translateX(262px)}}
@media (min-width:761px){ #problema.pb.is-viu .pb-fanta i{animation-name:pb-disc-s2} }
@media (min-width:1100px){
  #problema .pb-in{grid-template-columns:minmax(0,520px) 460px;grid-template-rows:auto auto;column-gap:96px;align-items:center}
  #problema .pb-dcol{display:contents}
  #problema .h2{grid-column:1;grid-row:1;align-self:center}
  #problema .pb-ct{grid-column:2;grid-row:1;align-self:center}
  #problema .pb-cum{grid-column:2;grid-row:2;align-self:start}
}
@media (min-width:1100px){
  #problema .pb-in{width:992px;max-width:none;grid-template-columns:minmax(0,1fr) 460px;column-gap:32px}
}

@media (min-width:761px){
  #problema .h2{font-size:80px;line-height:1;letter-spacing:-.045em}
  #problema .h2 .pb-ro{display:block;margin:0 0 14px;font-size:.36em;line-height:1.1;font-weight:500;letter-spacing:-.02em;color:var(--text-2)}
  #problema .h2 .pb-ci{display:block}
  #problema .h2 .pb-lf{display:block;margin-top:12px;font-size:.52em;line-height:1.05;letter-spacing:-.03em;color:var(--text-2)}
}
@media (min-width:761px){
  #problema .h2 .pb-ro,#problema .h2 .pb-lf{font-size:.45em;line-height:1.1;font-weight:500;letter-spacing:-.025em;color:var(--text-2)}
  #problema .h2 .pb-ro{margin:0 0 12px}
  #problema .h2 .pb-lf{margin:12px 0 0}
}
@media (min-width:1100px){ #problema .h2{top:0!important} #problema .pb-in{top:0!important} }

@media (min-width:761px){
  #problema .pb-in{display:flex;flex-direction:column;align-items:center;width:auto;max-width:none;text-align:center}
  #problema .pb-dcol{display:contents}
  #problema .h2{margin:0 0 44px;max-width:none;text-align:center;align-self:center}
  #problema .pb-ct{margin:0;align-self:center}
  #problema .pb-cum{margin:24px 0 0;text-align:center;align-self:center}
}

@media (min-width:761px){
  #problema .h2{font-size:64px;line-height:1.05;letter-spacing:-.04em}
  #problema .h2 .pb-ro{display:inline;margin:0;font-size:1em;line-height:inherit;letter-spacing:inherit;color:var(--text-2)}
  #problema .h2 .pb-ci{display:inline}
  #problema .h2 .pb-lf{display:block;margin:10px 0 0;font-size:.5em;line-height:1.1}
  #problema .h2{margin-bottom:40px}
}