/* Главная: заставка с антенной, «как это работает», марки направлений, номера, табличка прокси, вопросы. */

/* ---------- заставка (перенесено из прототипа) ---------- */
.hero { position: relative; padding: clamp(20px, 4vw, 44px) 0 clamp(40px, 6vw, 80px); }
.hero h1 { font-size: clamp(54px, 7.4vw, 106px); margin-bottom: 22px; }
@media (min-width: 1100px) { .hero h1 { white-space: nowrap; } .hero-text { max-width: none; } }
.hero-text { position: relative; z-index: 1; max-width: 760px; }
.hero .lead { margin-bottom: clamp(96px, 7vw, 110px); max-width: 62ch; }
.hero .radio-wrap { position: relative; }
/* телескопическая антенна растёт из корпуса */
.antenna { position: absolute; right: 9%; bottom: calc(100% - 6px); width: 64px; height: clamp(220px, 26vw, 360px);
  transform-origin: 50% 100%; transform: rotate(16deg); pointer-events: none; color: var(--ink); }
.antenna .seg { transform-box: fill-box; transform-origin: 50% 100%; animation: extend .9s cubic-bezier(.2,.8,.2,1) both; }
.antenna .s2 { animation-delay: .12s; } .antenna .s3 { animation-delay: .24s; } .antenna .s4 { animation-delay: .36s; } .antenna .s5 { animation-delay: .48s; }
@keyframes extend { from { transform: translateY(var(--from)); } to { transform: none; } }
.steps { padding: clamp(40px, 7vw, 96px) 0 0; }
.steps h2 { margin-bottom: 36px; }
.steps ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; counter-reset: s; }
.steps li { counter-increment: s; border-top: 2px solid var(--ink); padding-top: 16px; }
.steps li::before { content: counter(s); display: block; font: 500 54px/1 var(--f-led); color: var(--enamel); margin-bottom: 10px; }
.steps li b { display: block; font: 700 28px/1.05 var(--f-display); margin-bottom: 8px; }
@media (max-width: 760px) { .steps ol { grid-template-columns: 1fr; } .antenna { right: 8%; width: 40px; height: 118px; transform: rotate(12deg); } }

/* ---------- марки: перфорация маской, гравюра маской .engr, цвет бумаги свой у каждой марки ---------- */
:root { --st-1: #EEF1E6; --st-2: #F4EAD6; --st-3: #F2E3DD; --st-4: #DDEBE6; --st-5: #E9ECD9; --st-edge: rgba(15,42,39,.2); --st-ink: var(--ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --st-1: #18251F; --st-2: #231F16; --st-3: #251A17; --st-4: #112723; --st-5: #1D2318; --st-edge: rgba(0,0,0,.5); --st-ink: #C3D1CA; } }
:root[data-theme="dark"] { --st-1: #18251F; --st-2: #231F16; --st-3: #251A17; --st-4: #112723; --st-5: #1D2318; --st-edge: rgba(0,0,0,.5); --st-ink: #C3D1CA; }

.stamps-sec .wrap { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 36px 64px; align-items: start; }
.stamps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 34px 28px; }
.stamp { --paper: var(--st-1); --ink: var(--st-ink); display: block; color: var(--ink); text-decoration: none; transform: rotate(var(--tilt, 0deg));
  filter: drop-shadow(0 1px 0 var(--st-edge)) drop-shadow(0 12px 14px rgba(15,42,39,.16)); transition: transform .2s cubic-bezier(.2,.8,.2,1); }
.stamp.p2 { --paper: var(--st-2); } .stamp.p3 { --paper: var(--st-3); } .stamp.p4 { --paper: var(--st-4); } .stamp.p5 { --paper: var(--st-5); }
.stamp:hover, .stamp:focus-visible { color: var(--ink); transform: rotate(0deg) translateY(-5px); }
.stamp:focus-visible { outline: none; }
.stamp:focus-visible .stamp-face { outline: 3px solid var(--needle); outline-offset: 3px; }
.stamp-paper {
  --r: 5px; display: block; padding: calc(var(--r) * 2 + 3px); background: var(--paper);
  -webkit-mask: radial-gradient(var(--r), #0000 97%, #000) round calc(-1.5 * var(--r)) calc(-1.5 * var(--r)) / calc(3 * var(--r)) calc(3 * var(--r)),
                linear-gradient(#000 0 0) no-repeat 50% / calc(100% - 3 * var(--r)) calc(100% - 3 * var(--r));
          mask: radial-gradient(var(--r), #0000 97%, #000) round calc(-1.5 * var(--r)) calc(-1.5 * var(--r)) / calc(3 * var(--r)) calc(3 * var(--r)),
                linear-gradient(#000 0 0) no-repeat 50% / calc(100% - 3 * var(--r)) calc(100% - 3 * var(--r));
}
.stamp-face { position: relative; display: block; padding: 5px; border: 1.5px solid currentColor; }
.stamp-art { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; }
.stamp-art .engr { position: absolute; inset: 0; opacity: 0; transition: opacity .35s ease; }
.stamp-art.ready .engr { opacity: 1; }
/* пока гравюра не пришла и вместо неё флаг: штриховка, как фон печатной марки */
.stamp-art.is-art, .stamp-art.is-flag { background: repeating-linear-gradient(-35deg, color-mix(in srgb, currentColor 14%, transparent) 0 1px, transparent 1px 6px); }
.stamp-art.ready { background: none; }
.stamp-flag { position: absolute; left: 0; top: 50%; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transform: translateY(-50%); box-shadow: 0 0 0 1.5px currentColor; filter: saturate(.88); }
.stamp-cap { display: block; padding: 8px 1px 1px; }
.stamp-name { display: block; font: 700 25px/1 var(--f-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* номинал, как на настоящей марке: в углу рисунка, на бумаге марки */
.stamp-val { position: absolute; z-index: 1; top: 5px; left: 5px; padding: 4px 8px 5px 3px; background: var(--paper); font: 500 21px/1 var(--f-led); color: var(--needle-2); white-space: nowrap; }
:root[data-theme="dark"] .stamp-val { color: var(--amber); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .stamp-val { color: var(--amber); } }
@media (max-width: 1100px) { .stamps-sec .wrap { grid-template-columns: 1fr; } .sec-head { max-width: 640px; } }
@media (max-width: 760px) { .stamps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 20px; } .stamp-name { font-size: 23px; } .stamp-val { font-size: 19px; padding: 3px 6px 4px 2px; } }

/* ---------- номера: текст слева, лента шагов справа ---------- */
.nums .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px 72px; align-items: start; }
.nums h2, .px h2 { margin-bottom: 14px; }
.nums .lead, .px .lead { margin: 0 0 4px; }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 18px; padding: 0; }
.chip { display: inline-flex; align-items: baseline; gap: 10px; min-height: 48px; padding: 11px 18px 10px; border: 2px solid var(--line); border-radius: var(--r-chip);
  background: var(--plate); color: var(--ink); font-weight: 600; text-decoration: none; }
.chip i { font: 500 22px/1 var(--f-led); font-style: normal; color: var(--enamel); white-space: nowrap; }
.chip:hover { border-color: var(--enamel); color: var(--ink); }
.tape { list-style: none; margin: 6px 0 0; padding: 0; counter-reset: t; border-top: 2px solid var(--ink); }
.tape li { counter-increment: t; position: relative; padding: 16px 0 15px 62px; border-bottom: 1px dashed var(--line); color: var(--ink-2); }
.tape li::before { content: counter(t); position: absolute; left: 0; top: 15px; font: 500 38px/1 var(--f-led); color: var(--enamel); }
.tape b { display: block; margin-bottom: 3px; color: var(--ink); font: 700 25px/1.08 var(--f-display); }
@media (max-width: 860px) { .nums .wrap { grid-template-columns: 1fr; } }

/* ---------- прокси: заводская табличка, металл одинаковый в обеих темах ---------- */
.px .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 36px 72px; align-items: center; }
.ratings { --screw: radial-gradient(circle at 4px 4px, #fff 0 1.2px, #a9b7b0 1.8px 3.2px, #4b605b 3.6px 4.6px, rgba(15,42,39,.25) 5px, transparent 5.6px);
  position: relative; padding: 16px 32px 12px; border-radius: 12px; color: #0F2A27;
  background: var(--screw) left 9px top 9px / 11px 11px no-repeat, var(--screw) right 9px top 9px / 11px 11px no-repeat,
              var(--screw) left 9px bottom 9px / 11px 11px no-repeat, var(--screw) right 9px bottom 9px / 11px 11px no-repeat,
              linear-gradient(180deg, #f5f8f5, #d3dbd6);
  box-shadow: 0 0 0 2px #9fb0a8, inset 0 1px 0 #fff, 0 16px 32px -18px rgba(15,42,39,.55); }
.rp-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 24px; padding: 16px 0; border-top: 1px solid rgba(15,42,39,.2); }
.rp-row:first-child { border-top: 0; }
.rp-row b { font: 700 28px/1.05 var(--f-display); }
.rp-row p { grid-column: 1; margin: 0; color: #4B605B; font-size: 15px; line-height: 1.45; }
.rp-p { grid-column: 2; grid-row: 1 / span 2; align-self: center; text-align: right; font: 500 30px/1 var(--f-led); color: #0E5C58; white-space: nowrap; }
.rp-p small { display: block; margin-top: 4px; font: 400 14px/1 var(--f-text); color: #4B605B; }
:root[data-theme="dark"] .ratings { background-color: #b4c1ba; background-image: var(--screw), var(--screw), var(--screw), var(--screw), linear-gradient(180deg, #d9e1dc, #b4c1ba); box-shadow: 0 0 0 2px #6f817a, inset 0 1px 0 rgba(255,255,255,.6), 0 16px 32px -18px #000; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ratings { background-image: var(--screw), var(--screw), var(--screw), var(--screw), linear-gradient(180deg, #d9e1dc, #b4c1ba); box-shadow: 0 0 0 2px #6f817a, inset 0 1px 0 rgba(255,255,255,.6), 0 16px 32px -18px #000; } }
@media (max-width: 860px) { .px .wrap { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .ratings { padding: 8px 22px 4px; } .rp-row { grid-template-columns: 1fr; } .rp-p { grid-column: 1; grid-row: auto; text-align: left; margin-top: 6px; } .rp-p small { display: inline; margin-left: 8px; } }

/* ---------- вопросы ---------- */
.faq .wrap { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 28px 64px; align-items: start; }
.faq-side h2 { margin-bottom: 16px; }
.faq-side .muted { max-width: 34ch; }
.faq-list details { border-top: 1px solid var(--line); }
.faq-list details:last-child { border-bottom: 1px solid var(--line); }
.faq-list summary { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; padding: 19px 0; cursor: pointer; list-style: none; font: 700 27px/1.08 var(--f-display); }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: ""; flex: none; width: 13px; height: 13px; margin: 6px 6px 0 0; border-right: 2.5px solid var(--enamel); border-bottom: 2.5px solid var(--enamel); transform: rotate(45deg); transition: transform .2s ease; }
.faq-list details[open] summary::after { transform: translateY(5px) rotate(225deg); }
.faq-list summary:hover { color: var(--enamel); }
.faq-list .ans { padding: 0 0 20px; color: var(--ink-2); }
.faq-list .ans p { margin: 0 0 10px; }
@media (max-width: 860px) { .faq .wrap { grid-template-columns: 1fr; } .faq-list summary { font-size: 24px; } }