/* Гарантия — щит с галочкой (плоская 2D-версия).
   Никакого 3D: ни preserve-3d, ни translateZ, ни rotateX/rotateY, ни backface-visibility — именно они давали мерцание
   на iPhone и Mac (слои спорят друг с другом по глубине). Глубина нарисована внутри SVG (толщина, орбиты «впереди/позади» щита).
   Движение: парение щита, дыхание ореола, волны на полу, искры (transform/opacity — на GPU); блик и спутники — внутри SVG. */

.wr-stage { --s: 1.25; perspective: none; }
.wr-stage::after { display: none; }              /* виньетка не нужна: свечение и так гаснет внутри сцены */

.ws { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: scale(var(--s)); }
.ws > * { position: absolute; }

/* мягкий ореол за щитом */
.ws-halo { left: -230px; top: -230px; width: 460px; height: 460px; border-radius: 50%;
  background: radial-gradient(circle, rgba(227,195,156,.34), rgba(201,160,108,.14) 38%, transparent 68%);
  animation: wsHalo 4.5s ease-in-out infinite alternate; will-change: opacity; }
@keyframes wsHalo { from { opacity: .55; } to { opacity: 1; } }

/* щит: один SVG, парит вверх-вниз */
.ws-float { left: -100px; top: -122px; width: 200px; height: 240px; animation: wsFloat 5s cubic-bezier(.45,.05,.55,.95) infinite alternate; will-change: transform; }
@keyframes wsFloat { from { transform: translate3d(0,-9px,0); } to { transform: translate3d(0,11px,0); } }
.ws-shield { display: block; width: 100%; height: 100%; overflow: visible; }
.ws-yr { font: 800 34px var(--sf-pro); letter-spacing: .02em; }
.ws-sub { font: 600 8.6px var(--mono); letter-spacing: .15em; fill: #a9a9ae; }
.ws-sweep { animation: wsSweep 4.6s ease-in-out infinite; }
@keyframes wsSweep { 0% { transform: translateX(0); } 55%, 100% { transform: translateX(330px); } }

/* орбиты: задняя половина — за щитом, передняя — перед ним */
.ws-orbits { left: -300px; top: -240px; width: 600px; height: 480px; overflow: visible; }

/* волны защиты на «полу»: плоские эллипсы (обычное 2D-сжатие, без 3D) */
.ws-floor { left: 0; top: 168px; width: 0; height: 0; transform: scaleY(.26); }
.ws-floor:before { content: ""; position: absolute; left: -170px; top: -170px; width: 340px; height: 340px; border-radius: 50%;
  background: radial-gradient(circle, rgba(201,160,108,.38), transparent 68%); }
.ws-floor i { position: absolute; left: -180px; top: -180px; width: 360px; height: 360px; border-radius: 50%;
  border: 4px solid rgba(227,195,156,.75); opacity: 0; animation: wsPulse 3.6s ease-out infinite; will-change: transform, opacity; }
.ws-floor i:nth-child(2) { animation-delay: 1.2s; }
.ws-floor i:nth-child(3) { animation-delay: 2.4s; }
@keyframes wsPulse { from { transform: scale(.3); opacity: .9; } to { transform: scale(1.1); opacity: 0; } }

/* искры */
.ws-spk { left: 0; top: 0; width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); display: block;
  background: #f3d9b8; box-shadow: 0 0 10px 2px rgba(243,217,184,.65);
  transform: translate3d(var(--x), var(--y), 0) rotate(45deg); animation: wsSpk var(--d) ease-in-out infinite alternate; }
@keyframes wsSpk {
  from { transform: translate3d(var(--x), calc(var(--y) - 12px), 0) rotate(45deg); opacity: .35; }
  to   { transform: translate3d(var(--x), calc(var(--y) + 12px), 0) rotate(135deg); opacity: 1; }
}

/* масштаб под ширину колонки */
@media (max-width: 1320px) { .wr-stage { --s: 1.1; } }
@media (max-width: 1100px) { .wr-stage { --s: .95; } }
@media (max-width: 960px)  { .wr-stage { --s: .82; } }
@media (max-width: 820px)  { .wr-stage { --s: 1.2; } .ws-spk:nth-of-type(n+4), .ws-floor i:nth-child(3) { display: none; } }
@media (max-width: 640px)  { .wr-stage { --s: .98; } }
@media (max-width: 480px)  { .wr-stage { --s: .7; } }
@media (max-width: 400px)  { .wr-stage { --s: .6; } }

/* слабые устройства: меньше искр и волн */
html.perf-lite .ws-spk, html.perf-lite .ws-floor i:nth-child(3) { display: none; }
html.perf-min .ws-halo, html.perf-min .ws-sweep, html.perf-min .ws-floor i { animation: none; }
html.perf-min .ws-floor i { opacity: .35; transform: scale(.7); }

@media (prefers-reduced-motion: reduce) {
  .ws-float, .ws-halo, .ws-sweep, .ws-floor i, .ws-spk { animation: none; }
  .ws-floor i { opacity: .4; transform: scale(.7); }
}

/* ===== Блок «Гарантия на технику»: заголовок в две строки + 3D iPhone ===== */
.tr-adv-head { min-width: 0; display: flex; flex-direction: column; }
.tr-adv .tr-adv-head h2 span { display: block; }

.gm-stage { --s: 1; position: relative; height: 430px; margin-top: 12px; perspective: 1400px; perspective-origin: 50% 40%;
  display: flex; align-items: center; justify-content: center; pointer-events: none; }
.gm-glow { position: absolute; left: 50%; top: 46%; width: 380px; height: 380px; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(201,160,108,.22), transparent 66%); }
.gm-world { position: absolute; left: 50%; top: 46%; width: 0; height: 0; transform-style: preserve-3d;
  transform: scale(var(--s)) rotateX(-10deg); }
.gm-float { position: absolute; left: 0; top: 0; transform-style: preserve-3d; animation: gmFloat 4.6s ease-in-out infinite alternate; }
@keyframes gmFloat { from { transform: translate3d(0,-10px,0); } to { transform: translate3d(0,10px,0); } }

/* орбита и волны на полу */
.gm-ring { position: absolute; left: -150px; top: -150px; width: 300px; height: 300px; border-radius: 50%; border: 1.5px dashed rgba(227,195,156,.4);
  transform: rotateX(78deg); animation: gmRing 12s linear infinite; }
@keyframes gmRing { from { transform: rotateX(78deg) rotateZ(0); } to { transform: rotateX(78deg) rotateZ(360deg); } }
.gm-ring .sat { position: absolute; left: 50%; top: -6px; width: 12px; height: 12px; margin-left: -6px; display: block; background: var(--ea-grad);
  transform: rotate(45deg); box-shadow: 0 0 14px 3px rgba(227,195,156,.8); }
.gm-floor { position: absolute; left: 50%; top: 46%; width: 0; height: 0; transform-style: preserve-3d; transform: translate3d(0, 190px, 0) rotateX(90deg); }
.gm-floor i { position: absolute; left: -130px; top: -130px; width: 260px; height: 260px; border-radius: 50%; border: 2px solid rgba(227,195,156,.6);
  box-shadow: 0 0 16px rgba(227,195,156,.3); opacity: 0; animation: wrPulse 3.6s ease-out infinite; }
.gm-floor i:nth-child(2) { animation-delay: 1.2s; }
.gm-floor i:nth-child(3) { animation-delay: 2.4s; }

@media (max-width: 820px) { .gm-stage { height: 400px; --s: .95; } }
@media (max-width: 480px) { .gm-stage { height: 340px; --s: .78; } }
@media (prefers-reduced-motion: reduce) {
  .gm-float, .gm-sway, .gm-halo, .gm-card, .gm-ring, .gm-floor i, .gm-front .glare, .gm-back .gl, .gm-sway .spk { animation: none; }
  .gm-floor i { opacity: .35; transform: scale(.7); }
}

/* Заголовок: акцентная часть — фирменный золотой градиент (как на остальных страницах) */
.contact-block.sc-hero .display span { display: inline-block; padding-bottom: .08em;
  background: var(--ea-grad);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }

/* Текст под заголовком — SF Pro SemiBold */
#warranty .contact-info > p { font-weight: 500 !important; }

/* Метка «ГАРАНТИЯ» над заголовком — чуть крупнее */
#warranty .section-label { font-size: 14px; letter-spacing: .2em; margin-bottom: 22px; }
@media (max-width: 820px) { #warranty .section-label { font-size: 12px; margin-bottom: 16px; } }

/* Заголовок: «Мы отвечаем» — белым, «за качество» — фирменным градиентом (span) */
#warranty h1.display { color: #fff; }

/* ---------- «Гарантия на технику»: та же сетка, что у блока «Мы отвечаем за качество» ---------- */
.tr-adv.wr-adv { padding-inline: 8vw; gap: clamp(32px, 5vw, 80px); }
@media (max-width: 820px) {
  .tr-adv.wr-adv { padding-inline: 6vw; }
  body .tr-adv.wr-adv h2 { text-align: left; }
}
@media (min-width: 428px) and (max-width: 820px) { .tr-adv.wr-adv { padding-inline: 7vw; } }
@media (max-width: 360px) { .tr-adv.wr-adv { padding-inline: 5vw; } }

/* ===== iPhone «Гарантия»: детали задней крышки, парящие стеклянные карточки, ореол ===== */
.gm-card { position: absolute; left: 0; top: 0; width: 132px; margin: -27px 0 0 -66px; padding: 11px 13px 12px; border-radius: 17px;
  background: linear-gradient(145deg, rgba(70,53,32,.82), rgba(18,14,10,.86)); border: 1px solid rgba(227,195,156,.38);
  box-shadow: 0 16px 32px rgba(0,0,0,.5), 0 0 22px rgba(201,160,108,.12), inset 0 1px 0 rgba(255,255,255,.2);
  transform: translate3d(var(--x), var(--y), var(--z)); animation: gmCard var(--d) ease-in-out infinite alternate; }
@keyframes gmCard { from { transform: translate3d(var(--x), calc(var(--y) - 7px), var(--z)); } to { transform: translate3d(var(--x), calc(var(--y) + 7px), var(--z)); } }
.gm-card b { display: block; font: 700 22px/1.05 var(--sf-pro); letter-spacing: -.01em; background: var(--ea-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gm-card span { display: block; margin-top: 5px; font: 500 10.5px/1.3 var(--sf-pro); color: #cfcac0; }
@media (max-width: 480px) { .gm-stage { --s: .7; } .gm-card { width: 118px; margin-left: -59px; padding: 9px 11px 10px; } }

/* ===== iPhone «Гарантия» v3: «разобранный» телефон слоями. Не вращается — фиксированная поза, слои плывут по глубине, наклон за курсором ===== */
.gm-tilt { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-style: preserve-3d; will-change: transform; }
.gm-sway { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-style: preserve-3d; will-change: transform; animation: gmSway 10s cubic-bezier(.45,.05,.55,.95) infinite alternate; }
@keyframes gmSway { from { transform: rotateY(-2.5deg) rotateX(1deg); } to { transform: rotateY(2.5deg) rotateX(-1deg); } }
.gm-phone { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-style: preserve-3d; transform: rotateY(-32deg) rotateX(5deg) rotateZ(-3deg); }

.ly { position: absolute; left: -80px; top: -165px; width: 160px; height: 330px; border-radius: 38px; display: block;
  transform: translateZ(var(--z)); will-change: transform; animation: gmLayer var(--d, 6s) cubic-bezier(.45,.05,.55,.95) infinite alternate; }
@keyframes gmLayer { from { transform: translateZ(calc(var(--z) - 7px)); } to { transform: translateZ(calc(var(--z) + 7px)); } }
.ly b, .ly u, .ly i, .ly span { display: block; position: absolute; }

/* золотые направляющие между слоями */
.gm-rail { position: absolute; left: 0; top: 0; width: 192px; height: 1px; transform-origin: 0 0; transform: translate3d(var(--x), var(--y), -120px) rotateY(-90deg);
  background: repeating-linear-gradient(90deg, rgba(227,195,156,.6) 0 5px, transparent 5px 11px); }

/* 1. задняя крышка + блок камер */
.ly-back { --z: -120px; --d: 6.4s; overflow: hidden;
  background: linear-gradient(155deg, #e9cfa8 0%, #c9a06c 38%, #a67c3c 70%, #d4ae7c 100%);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.25), 0 0 44px rgba(201,160,108,.28); }
.ly-back .cam { left: 72px; top: 12px; width: 76px; height: 76px; border-radius: 22px; background: linear-gradient(145deg, #e3c39c, #b98a45);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.35), 0 2px 6px rgba(0,0,0,.35); }
.ly-back .cam u { width: 28px; height: 28px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #4a5568 0%, #11151c 45%, #000 100%);
  box-shadow: 0 0 0 3px #2a2118, inset 0 0 0 1.5px rgba(255,255,255,.18); }
.ly-back .cam u:nth-child(1) { right: 8px; top: 8px; } .ly-back .cam u:nth-child(2) { right: 8px; bottom: 8px; } .ly-back .cam u:nth-child(3) { left: 8px; top: 24px; }
.ly-back .sh { inset: 0; overflow: hidden; }
.ly-back .sh:before, .ly-screen .glare:before { content: ""; position: absolute; top: -10%; bottom: -10%; left: 0; width: 55%;
  background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,.4) 50%, transparent 100%);
  transform: translateX(-130%) skewX(-14deg); animation: wrSweep 5.5s ease-in-out infinite; will-change: transform; }

/* 2. «начинка»: чип и аккумулятор светятся изнутри */
.ly-core { --z: -78px; --d: 5.4s; }
.ly-core .chip { left: 84px; top: 40px; width: 52px; height: 52px; border-radius: 12px; border: 1.5px solid #e3c39c;
  background: repeating-linear-gradient(0deg, rgba(227,195,156,.4) 0 1px, transparent 1px 6px), repeating-linear-gradient(90deg, rgba(227,195,156,.4) 0 1px, transparent 1px 6px), radial-gradient(circle, #6b4f24, #1b140a);
  box-shadow: 0 0 14px rgba(227,195,156,.45), inset 0 0 12px rgba(0,0,0,.6); }
.ly-core .chip:after { content: ""; position: absolute; inset: -2px; border-radius: 13px; box-shadow: 0 0 34px rgba(227,195,156,.9);
  opacity: .3; animation: gmChip 2.4s ease-in-out infinite alternate; will-change: opacity; }
@keyframes gmChip { from { opacity: .3; } to { opacity: 1; } }
.ly-core .batt { left: 22px; top: 140px; width: 116px; height: 150px; border-radius: 16px; border: 1.5px solid rgba(227,195,156,.6);
  background: repeating-linear-gradient(90deg, rgba(227,195,156,.3) 0 2px, transparent 2px 20px), linear-gradient(180deg, rgba(201,160,108,.38), rgba(201,160,108,.06));
  box-shadow: 0 0 28px rgba(201,160,108,.35); }
.ly-core .tr { height: 2px; background: linear-gradient(90deg, transparent, #e3c39c); }
.ly-core .tr.a { left: 36px; top: 66px; width: 48px; } .ly-core .tr.b { left: 110px; top: 92px; width: 2px; height: 48px; background: linear-gradient(180deg, #e3c39c, transparent); }

/* 3. титановая рамка с кнопками */
.ly-frame { --z: -38px; --d: 5.8s; }
.ly-frame .rg { inset: 0; border-radius: 38px; padding: 6px; background: linear-gradient(145deg, #f3d9b8, #a67c3c 45%, #e3c39c);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; }
.ly-frame .bt { width: 5px; border-radius: 3px; background: linear-gradient(90deg, #a67c3c, #e3c39c); }
.ly-frame .bt.l1 { left: -5px; top: 84px; height: 26px; } .ly-frame .bt.l2 { left: -5px; top: 124px; height: 44px; } .ly-frame .bt.r1 { right: -5px; top: 138px; height: 64px; }

/* 4. экран */
.ly-screen { --z: 0px; --d: 7s; left: -76px; top: -161px; width: 152px; height: 322px; border-radius: 34px; overflow: hidden;
  background: radial-gradient(120% 70% at 50% 0%, rgba(58,44,26,.94) 0%, rgba(20,16,11,.94) 55%, rgba(7,7,7,.94) 100%);
  box-shadow: inset 0 0 0 2px #000, 0 0 0 1px rgba(227,195,156,.4), 0 0 36px rgba(201,160,108,.2); }
.ly-screen .isl { left: 50%; top: 11px; width: 46px; height: 13px; margin-left: -23px; border-radius: 9px; background: #000; }
.ly-screen .clk { left: 0; right: 0; top: 54px; text-align: center; color: #fff; font-family: var(--sf-pro); }
.ly-screen .clk small { position: static; font: 600 9px var(--sf-pro); letter-spacing: .16em; color: #c9a06c; margin-bottom: 4px; }
.ly-screen .clk b { position: static; font: 300 52px/1 var(--sf-pro); letter-spacing: -.02em; background: var(--ea-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ly-screen .note { left: 10px; right: 10px; bottom: 26px; display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 16px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.12); font: 500 9px/1.3 var(--sf-pro); color: #c9c9ce; }
.ly-screen .note svg { flex: none; width: 24px; height: 24px; padding: 5px; border-radius: 8px; background: var(--ea-grad); }
.ly-screen .note span { position: static; } .ly-screen .note span b { position: static; display: block; color: #fff; font-weight: 700; font-size: 10px; }
.ly-screen .glare { inset: 0; overflow: hidden; }
.ly-screen .glare:before { opacity: .45; animation-duration: 6s; }

/* 5. голографический щит «гарантия» перед экраном */
.ly-shield { --z: 72px; --d: 4.6s; left: -60px; top: -50px; width: 120px; height: 146px; border-radius: 0; }
.ly-shield:before { content: ""; position: absolute; inset: -22%; border-radius: 50%; background: radial-gradient(closest-side, rgba(227,195,156,.38), transparent); }
.ly-shield svg { position: relative; }
.ly-shield svg { width: 100%; height: 100%; display: block; overflow: visible; }
.ly-shield .scan { left: 6%; right: 6%; top: 8%; height: 2px; background: linear-gradient(90deg, transparent, #fff3dc, transparent); box-shadow: 0 0 12px 2px rgba(255,236,200,.8); animation: gmScan 3.2s ease-in-out infinite; will-change: transform, opacity; }
@keyframes gmScan { 0% { transform: translateY(0); opacity: 0; } 15%, 85% { opacity: 1; } 100% { transform: translateY(124px); opacity: 0; } }

@media (prefers-reduced-motion: reduce) { .ly, .gm-sway, .ly-core .chip, .ly-shield .scan, .ly-back .sh, .ly-screen .glare:before, .ly-back .sh:before, .ly-core .chip:after { animation: none; } }

/* Облегчённый режим для разобранного iPhone (блок «Гарантия на технику») */
@media (max-width: 820px) { .gm-floor i:nth-child(3) { display: none; } }
html.perf-lite .gm-floor i:nth-child(3) { display: none; }
html.perf-lite .ly-back .sh:before, html.perf-lite .ly-screen .glare:before, html.perf-lite .ly-shield .scan,
html.perf-lite .ly-core .chip:after { animation: none; }

/* Заголовок блока — того же размера, что «Мы отвечаем за качество» / «Доставим быстро» в первом экране */
body .tr-adv.wr-adv h2 { font-size: clamp(44px, 5.4vw, 80px) !important; line-height: 1.04 !important; }
@media (max-width: 820px) { body .tr-adv.wr-adv h2 { font-size: clamp(34px, 10vw, 44px) !important; line-height: 1.04 !important; } }

/* Общие правила для сцены «Гарантия на технику» (разобранный iPhone) */
.spk { position: absolute; left: 0; top: 0; width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); display: block;
  background: #f3d9b8; box-shadow: 0 0 10px 2px rgba(243,217,184,.65);
  transform: translate3d(var(--x), var(--y), var(--z)) rotate(45deg);
  animation: wrSpk var(--d) ease-in-out infinite alternate; }
@keyframes wrSpk {
  from { transform: translate3d(var(--x), calc(var(--y) - 12px), var(--z)) rotate(45deg); opacity: .35; }
  to   { transform: translate3d(var(--x), calc(var(--y) + 12px), var(--z)) rotate(135deg); opacity: 1; }
}
@keyframes wrPulse { from { transform: scale(.3); opacity: .9; } to { transform: scale(1.1); opacity: 0; } }
@keyframes wrSweep { 0% { transform: translateX(-130%) skewX(-14deg); } 55%, 100% { transform: translateX(300%) skewX(-14deg); } }