.lp .hx { max-width: 1280px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 80px);
          align-items: center; padding-top: clamp(28px, 5vw, 64px); padding-bottom: clamp(48px, 6vw, 96px); }
.hx-copy { display: flex; flex-direction: column; gap: 24px; }
.hx .hero-save { font-size: 14px; }
.hx-title { font-size: clamp(38px, 4.6vw, 70px); line-height: 1.02; font-weight: 500; letter-spacing: -.048em; text-wrap: balance; }
.hx-lead { font-size: clamp(16px, 1.45vw, 19px); line-height: 1.6; color: var(--muted); max-width: 520px; text-wrap: pretty; }
.hx-proof { display: flex; align-items: center; gap: 14px; }
.hx-proof .faces { display: flex; }
.hx-proof .faces .face { border: 2.5px solid var(--bg); border-radius: 50%; margin-left: -10px; }
.hx-proof .faces .face:first-child { margin-left: 0; }
.hx-proof b { display: block; font-size: 14.5px; font-weight: 600; }
.hx-proof small { font-size: 13px; color: var(--muted); }
.hx .hero-save { align-self: flex-start; }

.hx-stage { position: relative; height: clamp(540px, 52vw, 700px); }
.hx-photo { position: absolute; top: 0; right: 0; bottom: 0; width: 80%; margin: 0; border-radius: 36px; overflow: hidden;
            background: #E6DDD0; box-shadow: 0 50px 90px -50px rgba(60, 40, 20, .55); }
.hx-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.04); }
.js .hx-photo img { animation: hxZoom 2.2s cubic-bezier(.2, .7, .2, 1) both; }
.hx-photo::after { content: ""; position: absolute; inset: 0; pointer-events: none;
                   background: linear-gradient(180deg, rgba(20, 14, 10, .28) 0%, rgba(20, 14, 10, 0) 38%, rgba(20, 14, 10, 0) 70%, rgba(20, 14, 10, .18) 100%); }
@keyframes hxZoom { from { transform: scale(1.16); } to { transform: scale(1.04); } }

.js .hx-phone { animation: hxPhone 1.2s .15s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes hxPhone { from { opacity: 0; transform: translateY(40px) rotate(-8deg); } to { opacity: 1; transform: rotate(-3.5deg); } }

.lp .brands-run { max-width: none; padding: 18px 0; overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
                  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
                  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.br-track { display: flex; gap: 12px; width: max-content; animation: brRun 45s linear infinite; }
.brands-run:hover .br-track { animation-play-state: paused; }
@keyframes brRun { to { transform: translateX(calc(-50% - 6px)); } }

.lp .st { padding-top: clamp(72px, 9vw, 128px); }
.st-wrap { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(32px, 6vw, 96px); position: relative; }
.st-step { min-height: 86vh; display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: 6vh 0;
           opacity: .22; transition: opacity .5s ease; }
.st-step.on { opacity: 1; }
.st-step h3 { font-size: clamp(28px, 3.3vw, 46px); line-height: 1.05; font-weight: 500; letter-spacing: -.038em; text-wrap: balance; }
.st-step p { font-size: 17px; line-height: 1.6; color: var(--muted); max-width: 470px; text-wrap: pretty; }
.st-step .fnum { font-size: 13px; }
.st-stage { position: sticky; top: calc(34px + 12vh); height: min(680px, 76vh); align-self: start; }
.st-back { position: absolute; inset: 4% 6%; border-radius: 40px;
           background: radial-gradient(60% 55% at 50% 42%, #F3EADF 0%, rgba(243, 234, 223, 0) 72%), linear-gradient(160deg, #EFE9E1, #E5DDD1); }
.st-real { position: absolute; left: 50%; top: calc(4% + 16px); transform: translateX(-50%); z-index: 2; display: inline-flex; align-items: center;
           gap: 7px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .8); font-size: 12.5px; font-weight: 500;
           color: var(--ink-2); white-space: nowrap; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.st-real i { width: 7px; height: 7px; border-radius: 50%; background: var(--g); box-shadow: 0 0 0 3px rgba(47, 107, 69, .15); }
.st-more { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 12px; padding: 26px 30px;
           border-radius: 24px; background: #fff; border: 1px solid var(--line); }
.st-more p { font-size: 17px; line-height: 1.55; color: var(--ink-2); max-width: 720px; text-wrap: pretty; }
.st-dots { position: absolute; left: -26px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 2; }
.st-dots i { width: 5px; height: 5px; border-radius: 3px; background: #CFC9BF; transition: height .45s cubic-bezier(.2, .7, .2, 1), background .3s; }
.st-dots i.on { height: 28px; background: var(--ink); }

@media (max-width: 920px) {
  .lp .hx { grid-template-columns: minmax(0, 1fr); }
  .hx-stage { height: 600px; }
    .st-wrap { display: flex; flex-direction: column; gap: 0; }
  .st-stage { order: -1; align-self: stretch; position: sticky; top: 60px; z-index: 3; height: min(480px, 56vh);
              margin: 0 calc(-1 * var(--pad)); background: linear-gradient(180deg, var(--bg) 90%, rgba(246, 245, 241, 0)); }
  .st-back { inset: 8px var(--pad) 18px; border-radius: 28px; }
  .st-real { top: 18px; font-size: 11.5px; padding: 5px 10px; }
  .lp .st-phone { top: 50px; bottom: 32px; }
  .st-dots { left: auto; right: calc(var(--pad) + 14px); top: auto; bottom: 30px; transform: none; flex-direction: column; gap: 5px; }
  .st-step { min-height: 58vh; justify-content: flex-start; padding: 22px 0 40px; gap: 12px; }
  .st-step h3 { font-size: 26px; }
  .st-step p { font-size: 16px; }
  .st-more { flex-direction: column; align-items: flex-start; padding: 22px; }
}
@media (max-width: 640px) {
  .hx-stage { height: 520px; margin: 0 -4px; }
  .hx-photo { width: 88%; border-radius: 28px; }
  }
@media (prefers-reduced-motion: reduce) {
  .br-track, .js .hx-photo img, .js .hx-phone { animation: none; }
  .st-scr { transition: none; }
}

.lp section.dusk { max-width: none; padding: 0; height: 200vh; position: relative; margin-top: clamp(40px, 6vw, 80px);
                   background: linear-gradient(180deg, var(--bg) 0%, var(--bg) 14%, #0F1114 58%, #0F1114 100%); }
.dusk + .agents, .lp section.dusk + section.agents { margin-top: 0; }
.dusk-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; display: grid; place-items: center; }
.dusk-photo { position: absolute; inset: 0; margin: 0; background: #0B0F22;
              clip-path: inset(calc(var(--c, 1) * 16%) calc(var(--c, 1) * 12%) round calc(var(--c, 1) * 36px)); }
.dusk-photo picture { display: block; width: 100%; height: 100%; }
.dusk-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(calc(1.14 - var(--p, 0) * .12)); }
.dusk-photo::after { content: ""; position: absolute; inset: 0; opacity: var(--t, 0);
                     background: linear-gradient(180deg, rgba(15, 17, 20, .35) 0%, rgba(15, 17, 20, .55) 55%, rgba(15, 17, 20, .92) 100%); }
.dusk-copy { position: relative; z-index: 2; max-width: 860px; padding: 0 var(--pad); text-align: center; color: #fff;
             opacity: var(--t, 0); transform: translateY(calc((1 - var(--t, 0)) * 34px)); }
.dusk-copy h2 { font-size: clamp(36px, 5.4vw, 76px); line-height: 1.01; font-weight: 500; letter-spacing: -.045em; text-wrap: balance; }
.dusk-copy p { margin: 20px auto 0; max-width: 600px; font-size: clamp(16px, 1.5vw, 19px); line-height: 1.6; color: rgba(255, 255, 255, .8); text-wrap: pretty; }
.dusk-ping { position: absolute; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 16px; color: #fff;
             background: rgba(18, 22, 44, .6); border: 1px solid rgba(255, 255, 255, .12);
             backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
             opacity: var(--t2, 0); transform: translateY(calc((1 - var(--t2, 0)) * 18px)); }
.dusk-ping .face { border-radius: 50%; flex-shrink: 0; }
.dusk-ping b { display: block; font-size: 13px; font-weight: 600; }
.dusk-ping small { font-size: 12.5px; color: rgba(255, 255, 255, .72); }
.dusk-ping.p1 { left: 7%; bottom: 13%; } .dusk-ping.p2 { right: 7%; bottom: 24%; }

.lp section.dawn { max-width: 1280px; padding-top: clamp(80px, 10vw, 140px); }
.dawn-in { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.dawn-photo { grid-column: 1; grid-row: 1; margin: 0; border-radius: 32px; overflow: hidden; aspect-ratio: 3 / 2;
              box-shadow: 0 50px 90px -50px rgba(60, 40, 20, .5); }
.dawn-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dawn-msgs { grid-column: 1; grid-row: 1; align-self: end; justify-self: end; width: min(350px, 62%); margin: 0 -36px -40px 0; z-index: 2; }
.dawn-copy { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.dawn-copy h2 { font-size: clamp(30px, 3.6vw, 50px); line-height: 1.04; font-weight: 500; letter-spacing: -.038em; text-wrap: balance; }
.dawn-copy p { font-size: 17px; line-height: 1.6; color: var(--muted); text-wrap: pretty; }
.dawn-copy .btn { margin-top: 6px; }
.tgm { position: relative; background: #fff; border-radius: 18px 18px 18px 6px; padding: 11px 14px 8px; font-size: 13.5px; line-height: 1.45;
       color: var(--ink); box-shadow: 0 24px 48px -22px rgba(20, 14, 10, .45); }
.tgm + .tgm { margin-top: 10px; }
.tgm p { margin-top: 6px; }
.tgm small { display: block; text-align: right; font-size: 11px; color: var(--muted); margin-top: 2px; }
.tgk { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 8px -6px -2px; }
.tgk span { text-align: center; padding: 8px 6px; border-radius: 10px; background: rgba(36, 117, 184, .1); color: #2475B8; font-weight: 500; font-size: 13px; }
.js .dawn-msgs.reveal { transition-delay: .25s; }

.kd-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-top: 28px; }
.kd { position: relative; margin: 0; border-radius: 20px; overflow: hidden; aspect-ratio: 3 / 4; background: #EDE6DA; }
.kd img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.kd:hover img { transform: scale(1.06); }
.kd figcaption { position: absolute; left: 10px; bottom: 10px; padding: 6px 10px; border-radius: 10px; font-size: 13.5px; font-weight: 500;
                 background: rgba(255, 255, 255, .88); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.kinds2 .kind-row { margin-top: 16px; }

@media (max-width: 920px) {
  .lp section.dusk { height: 170vh; }
  .dusk-ping.p1 { left: 5%; bottom: 8%; } .dusk-ping.p2 { right: 5%; bottom: 19%; }
  .dawn-in { grid-template-columns: minmax(0, 1fr); }
  .dawn-photo, .dawn-msgs, .dawn-copy { grid-column: 1; }
  .dawn-copy { grid-row: 2; }
  .dawn-msgs { width: min(340px, 86%); margin: 0 12px -28px 0; }
  .kd-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .dusk-photo { clip-path: inset(calc(var(--c, 1) * 12%) calc(var(--c, 1) * 5%) round calc(var(--c, 1) * 26px)); }
  .dusk-ping { max-width: 88%; }
  .dawn-photo { border-radius: 24px; aspect-ratio: 4 / 3; }
  .dawn-msgs { grid-row: 2; align-self: start; justify-self: end; width: 92%; margin: -56px 6px 0 0; }
  .dawn-copy { grid-row: 3; margin-top: 8px; }
  .kd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.lp-top { transition: border-color .2s, background-color .35s; }
.lp-top.dark { background: rgba(15, 17, 20, .72); border-bottom-color: rgba(255, 255, 255, .08); }
.lp-top.dark .logo, .lp-top.dark .lp-nav a, .lp-top.dark .lp-login { color: rgba(255, 255, 255, .88); }
.lp-top.dark .lp-nav a:hover, .lp-top.dark .lp-login:hover { color: #fff; }
.lp-top.dark .lang-pick summary { background: rgba(255, 255, 255, .1); color: #fff; }
.lp-top.dark .btn { background: #fff; color: var(--ink); }

.lp section.dawn { padding-bottom: clamp(64px, 8vw, 110px); }
.lp section.kinds2 { padding-bottom: clamp(56px, 7vw, 96px); }

.lp section.deliv { max-width: 1280px; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 5vw, 72px);
                    align-items: center; padding-top: clamp(64px, 8vw, 112px); padding-bottom: clamp(24px, 4vw, 48px); }
.deliv-photo { margin: 0; border-radius: 32px; overflow: hidden; aspect-ratio: 3 / 2; box-shadow: 0 50px 90px -50px rgba(60, 40, 20, .5); }
.deliv-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.deliv-copy { display: flex; flex-direction: column; gap: 18px; }
.deliv-copy h2 { font-size: clamp(30px, 3.6vw, 50px); line-height: 1.04; font-weight: 500; letter-spacing: -.038em; text-wrap: balance; }
.deliv-copy p { font-size: 17px; line-height: 1.6; color: var(--muted); text-wrap: pretty; }
.deliv-pts { display: flex; flex-wrap: wrap; gap: 8px; }
.deliv-pts span { padding: 9px 13px; border-radius: 12px; background: #fff; border: 1px solid var(--line); font-size: 14px; }
@media (max-width: 920px) {
  .lp section.deliv { grid-template-columns: minmax(0, 1fr); }
}

.brief { width: 100%; background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 6px 18px; }
.brief-h { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; font-size: 13.5px; font-weight: 600; border-bottom: 1px solid var(--line-2); }
.brief-h em { font-style: normal; font-weight: 500; color: var(--muted); font-size: 12.5px; }
.brief-row { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 11px 0; }
.brief-row + .brief-row { border-top: 1px solid var(--line-2); }
.brief-row b { font-size: 19px; font-weight: 600; letter-spacing: -.02em; white-space: nowrap; }
.brief-row span { font-size: 14px; color: var(--muted); line-height: 1.4; }
@media (max-width: 560px) { .brief-row { grid-template-columns: 104px minmax(0, 1fr); } .brief-row b { font-size: 17px; } }

.io .th.real { background: #fff; overflow: hidden; padding: 0; }
.io .th.real img { width: 100%; height: 100%; object-fit: contain; display: block; }
.io b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

.cmp { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 14px; }
.cmp-col { border-radius: 24px; padding: 24px 26px; display: flex; flex-direction: column; gap: 14px; }
.cmp-col.hire { background: #fff; border: 1px solid var(--line); }
.cmp-col.dukon { background: var(--ink); color: #fff; justify-content: center; }
.cmp-l { font-size: 13.5px; font-weight: 500; color: var(--muted); }
.cmp-col.dukon .cmp-l { color: rgba(255, 255, 255, .6); }
.cmp ul { list-style: none; margin: 0; padding: 0; }
.cmp li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; font-size: 15px; border-bottom: 1px dashed var(--line); }
.cmp li b { font-weight: 500; white-space: nowrap; color: var(--ink-2); }
.cmp-sum { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 4px; }
.cmp-sum span { font-size: 14px; color: var(--muted); }
.cmp-sum s { font-size: clamp(22px, 2.4vw, 30px); font-weight: 600; letter-spacing: -.02em; color: #9A948B; text-decoration-color: var(--acc); text-decoration-thickness: 2px; white-space: nowrap; }
.cmp-price { font-size: clamp(34px, 3.8vw, 48px); font-weight: 600; letter-spacing: -.035em; line-height: 1; }
.cmp-col.dukon small { font-size: 14px; color: rgba(255, 255, 255, .7); }
.cmp-col.dukon .faces { display: flex; margin-top: 6px; }
.cmp-col.dukon .faces .face { border: 2px solid var(--ink); border-radius: 50%; margin-left: -8px; }
.cmp-col.dukon .faces .face:first-child { margin-left: 0; }
.cmp-keep { margin-top: 14px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 16px; padding: 22px 26px; border-radius: 24px;
            background: #E4F1E7; color: #1F4D30; }
.cmp-keep span { font-size: 15px; font-weight: 500; }
.cmp-keep b { font-size: clamp(26px, 3vw, 38px); font-weight: 600; letter-spacing: -.03em; }
.cmp-keep small { flex-basis: 100%; font-size: 14px; color: #3E6B4C; }
.cmp-calc { margin-top: 14px; border: 1px solid var(--line); border-radius: 20px; background: #fff; }
.cmp-calc summary { list-style: none; cursor: pointer; padding: 16px 22px; font-weight: 500; display: flex; justify-content: space-between; }
.cmp-calc summary::-webkit-details-marker { display: none; }
.cmp-calc summary::after { content: "+"; font-size: 20px; line-height: 1; color: var(--muted); }
.cmp-calc[open] summary::after { content: "–"; }
.cmp-calc .sv-table { margin: 0 12px; }
.cmp-calc .sv-row { grid-template-columns: minmax(0, 1fr) 170px; }
.cmp-calc .sv-result { margin: 12px; }
.sv2 .sv-note { margin-top: 16px; }
@media (max-width: 760px) {
  .cmp { grid-template-columns: minmax(0, 1fr); }
  .cmp-col { padding: 20px; }
  .cmp li { font-size: 14px; }
  .cmp-calc .sv-row { grid-template-columns: minmax(0, 1fr) 130px; }
}

.st-more-btns { display: flex; gap: 10px; flex-wrap: wrap; flex-shrink: 0; }

@media (max-width: 640px) {
  .lp .mx-grid, .lp .ch-grid, .lp .kd-grid {
    display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin-left: calc(-1 * var(--pad)); margin-right: calc(-1 * var(--pad)); padding: 2px var(--pad) 10px; scrollbar-width: none; }
  .lp .mx-grid::-webkit-scrollbar, .lp .ch-grid::-webkit-scrollbar, .lp .kd-grid::-webkit-scrollbar { display: none; }
  .lp .mx-grid > *, .lp .ch-grid > * { flex: 0 0 76%; scroll-snap-align: start; }
  .lp .kd-grid > * { flex: 0 0 44%; scroll-snap-align: start; }
  .st-more-btns { width: 100%; }
  .st-more-btns .btn { flex: 1 1 100%; }
}

.iph { position: relative; aspect-ratio: 0.4816; container-type: inline-size; padding: 0.7%; border-radius: 15.5% / 7.45%;
       background: linear-gradient(145deg, #9a9aa0 0%, #4a4a4f 22%, #7d7d83 48%, #3b3b40 74%, #8b8b91 100%);
       box-shadow: 0 40px 70px -40px rgba(25, 18, 10, .5), 0 12px 24px -16px rgba(25, 18, 10, .3); }
.iph::before, .iph::after { content: ""; position: absolute; width: 1.3%; border-radius: 2px; background: #6d6d72; }
.iph::before { right: -1.1%; top: 27%; height: 11%; }
.iph::after { left: -1.1%; top: 20%; height: 7%; box-shadow: 0 9cqw 0 #6d6d72, 0 18cqw 0 #6d6d72; }
.iph-bz { height: 100%; padding: 1.8%; border-radius: 15% / 7.2%; background: #0a0a0b; }
.iph-in { position: relative; height: 100%; border-radius: 13.4% / 6.4%; overflow: hidden; background: #F7F5F1; }
.iph-sb { position: absolute; inset: 0 0 auto; height: 11.5cqw; z-index: 2; display: flex; align-items: center; justify-content: space-between;
          padding: 1.2cqw 7.5cqw 0 10cqw; background: #F7F5F1; color: #111; font-size: 4.1cqw; }
.iph-sb b { font-weight: 600; letter-spacing: -.01em; }
.iph-ic { display: flex; align-items: center; gap: 1.4cqw; }
.iph-ic svg { height: 3.1cqw; width: auto; fill: currentColor; }
.iph-isl { position: absolute; top: 2.3cqw; left: 50%; z-index: 3; width: 29cqw; height: 8.2cqw; border-radius: 99px; background: #000; transform: translateX(-50%); }
.iph-view { position: absolute; inset: 11.5cqw 0 0; }
.iph-view img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.iph-in::after { content: ""; position: absolute; left: 50%; bottom: 1.8cqw; z-index: 3; width: 33cqw; height: 1.3cqw; border-radius: 9px; background: rgba(0, 0, 0, .78); transform: translateX(-50%); }

.lp .hx-phone { position: absolute; left: 0; bottom: -2%; width: 236px; height: auto; z-index: 2; transform: rotate(-3.5deg); }
.js .hx-phone { animation: hxPhone 1.2s .15s cubic-bezier(.2, .7, .2, 1) both; }
.hx-rev { position: absolute; right: -3%; bottom: 7%; z-index: 3; width: 250px; margin: 0; padding: 6px; border-radius: 22px; background: #fff;
          box-shadow: 0 40px 70px -30px rgba(25, 18, 10, .5); }
.hx-rev img { width: 100%; height: auto; display: block; border-radius: 16px; }
.hx-rev figcaption { display: flex; align-items: center; gap: 6px; padding: 7px 8px 3px; font-size: 12px; color: var(--muted); }
.hx-rev figcaption i { width: 6px; height: 6px; border-radius: 50%; background: var(--g); }
.js .hx-rev { animation: hxRev 1s .9s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes hxRev { from { opacity: 0; transform: translateY(26px) scale(.96); } to { opacity: 1; transform: none; } }

.lp .st-phone { position: absolute; left: 50%; top: calc(4% + 58px); bottom: 8%; transform: translateX(-50%); width: auto; height: auto; }
.st-phone .st-scr { opacity: 0; transform: scale(1.035); transition: opacity .5s ease, transform .9s cubic-bezier(.2, .7, .2, 1); }
.st-phone .st-scr.on { opacity: 1; transform: none; }

.urg { position: sticky; top: 0; z-index: 21; display: flex; align-items: center; justify-content: center; gap: 10px; height: 38px; padding: 0 16px;
       background: #151617; color: #fff; font-size: 13.5px; text-decoration: none; }
.urg:hover { color: #fff; }
.urg-dot { width: 8px; height: 8px; border-radius: 50%; background: #E5484D; box-shadow: 0 0 0 0 rgba(229, 72, 77, .6); animation: urgPulse 1.6s infinite; }
@keyframes urgPulse { 70% { box-shadow: 0 0 0 7px rgba(229, 72, 77, 0); } 100% { box-shadow: 0 0 0 0 rgba(229, 72, 77, 0); } }
.urg-t { color: rgba(255, 255, 255, .8); }
.urg .cd { font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: .03em; min-width: 62px; }
.urg em { font-style: normal; font-weight: 600; color: #fff; margin-left: 6px; padding-left: 12px; border-left: 1px solid rgba(255, 255, 255, .2); }
.urg.hot { background: #A3242A; }
.lp.has-urg .lp-top { top: 38px; }
.mcta-t { display: block; text-align: center; margin-bottom: 7px; font-size: 13px; color: var(--ink-2); }
.mcta-t .cd { font-variant-numeric: tabular-nums; font-weight: 700; color: #A3242A; }
.ot2 { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 20px 24px; margin-bottom: 18px; border-radius: 22px;
       background: #151617; color: #fff; }
.ot2-l b { display: block; font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.ot2-l small { display: block; margin-top: 4px; font-size: 14px; color: rgba(255, 255, 255, .65); }
.ot2-t { display: flex; align-items: flex-start; gap: 6px; flex-shrink: 0; }
.ot2-t span { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ot2-t b { min-width: 58px; padding: 8px 0; border-radius: 12px; background: rgba(255, 255, 255, .1); text-align: center;
           font-size: 30px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.ot2-t i { font-style: normal; font-size: 11px; color: rgba(255, 255, 255, .55); }
.ot2-t em { font-style: normal; font-size: 26px; line-height: 50px; color: rgba(255, 255, 255, .4); }
.ot2.hot { background: #7E1D22; }
.tier li.soon em, li.soon em { font-style: normal; font-size: 11px; font-weight: 600; padding: 2px 7px; margin-left: 4px; border-radius: 99px;
                                 background: rgba(255, 255, 255, .16); vertical-align: 1px; }

.lp section.adm { max-width: 1280px; padding-top: clamp(72px, 9vw, 120px); }
.adm-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; }
.adm-tabs button { font: inherit; font-size: 14.5px; font-weight: 500; padding: 9px 16px; border-radius: 999px; cursor: pointer;
                   border: 1px solid var(--line); background: #fff; color: var(--ink-2); transition: background .2s, color .2s; }
.adm-tabs button.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.adm-stage { position: relative; padding-right: 150px; }
.adm-view img, .adm-phone .iph-view img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top;
                                          opacity: 0; transition: opacity .45s ease; }
.adm-view img.on, .adm-phone .iph-view img.on { opacity: 1; }
.lp .adm-phone { position: absolute; right: 0; bottom: -40px; width: 250px; z-index: 2; }
.adm-caps { position: relative; min-height: 56px; margin-top: 30px; max-width: 760px; }
.adm-caps p { position: absolute; inset: 0; font-size: 18px; line-height: 1.5; color: var(--ink-2); opacity: 0; transition: opacity .35s; }
.adm-caps p.on { opacity: 1; position: relative; }

.loss { padding: clamp(24px, 3vw, 36px); margin-bottom: 14px; border-radius: 26px; background: #FBEDEC; border: 1px solid #F1D3D1; }
.loss-l { font-size: 16px; font-weight: 500; color: #7A2A2E; }
.loss-n { display: block; margin: 6px 0 10px; font-size: clamp(48px, 7vw, 92px); line-height: 1; font-weight: 600; letter-spacing: -.045em; color: #B0262E; }
.loss p { max-width: 640px; font-size: 16px; line-height: 1.55; color: #6B3A3C; }
.cmp-sum .neg { font-size: clamp(22px, 2.4vw, 30px); font-weight: 600; letter-spacing: -.02em; color: #B0262E; white-space: nowrap; }
.cmp-col.dukon .btn { margin-top: 10px; align-self: flex-start; }

@media (max-width: 920px) {
  .adm-stage { padding-right: 0; }
  .lp .adm-phone { position: relative; right: auto; bottom: auto; width: min(290px, 74vw); margin: 0 auto; }
  .adm-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: calc(-1 * var(--pad)); margin-right: calc(-1 * var(--pad));
              padding: 0 var(--pad) 4px; }
  .adm-tabs::-webkit-scrollbar { display: none; }
  .adm-tabs button { flex-shrink: 0; }
  .adm-caps { margin-top: 22px; text-align: center; min-height: 80px; }
  .adm-caps p { font-size: 16px; }
  .urg { position: relative; }
  .lp.has-urg .lp-top { top: 0; }
}
@media (max-width: 640px) {
  .lp .hx-phone { width: 176px; }
  .hx-rev { width: 178px; right: 0; bottom: 4%; padding: 4px; border-radius: 16px; }
  .hx-rev figcaption { font-size: 10.5px; padding: 5px 6px 2px; }
  .urg { height: auto; min-height: 36px; flex-wrap: wrap; padding: 7px 12px; gap: 6px; font-size: 12.5px; }
  .urg em { display: none; }
  .ot2 { flex-direction: column; align-items: flex-start; }
  .ot2-t b { min-width: 52px; font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) { .urg-dot { animation: none; } .js .hx-rev { animation: none; } }
.mcta-t { display: table; margin: 0 auto 8px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .94);
          box-shadow: 0 8px 24px -10px rgba(20, 14, 10, .35); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

.mbp { position: relative; }
.mbp-lid { margin: 0 7%; padding: 1.4% 1.4% 2%; border-radius: 20px 20px 6px 6px; background: #1d222a;
           box-shadow: inset 0 0 0 1.5px #414958, inset 0 0 0 5px #1d222a, inset 0 0 0 6px #0b0d10; }
.mbp-scr { position: relative; aspect-ratio: 1.54; border-radius: 10px 10px 3px 3px; overflow: hidden; background: #fff; }
.mbp-notch { position: absolute; top: 0; left: 50%; z-index: 2; width: 10%; height: 3.4%; border-radius: 0 0 8px 8px; background: #0b0d10; transform: translateX(-50%); }
.adm-view { position: absolute; inset: 3.4% 0 0; background: #F6F5F1; }
.mbp-base { position: relative; height: clamp(10px, 1.5vw, 20px); border-radius: 3px 3px 18px 18px / 3px 3px 100% 100%;
            background: linear-gradient(180deg, #5a6272 0%, #2c323c 35%, #1a1e25 100%); box-shadow: 0 34px 50px -28px rgba(10, 12, 20, .55); }
.mbp-base i { position: absolute; top: 0; left: 50%; width: 13%; height: 42%; border-radius: 0 0 10px 10px; background: #14171c; transform: translateX(-50%); }
.adm-stage { padding-right: 0; }
.lp .adm-phone { right: 2%; bottom: -34px; width: 23%; max-width: 250px; }
.adm-phone-cap { position: absolute; right: 2%; bottom: -70px; width: 23%; max-width: 250px; text-align: center; font-size: 13.5px; color: var(--muted); }
.adm-caps { margin-top: 64px; }
.loss-nums { display: flex; flex-wrap: wrap; gap: 8px 48px; margin: 8px 0 14px; }
.loss-nums > div { display: flex; flex-direction: column; }
.loss-nums .loss-n { margin: 0; }
.loss-nums small { font-size: 14.5px; color: #7A2A2E; }
@media (max-width: 920px) {
  .lp .adm-phone { position: absolute; right: 0; bottom: -26px; width: 30%; margin: 0; }
  .adm-phone-cap { right: 0; bottom: -58px; width: 30%; font-size: 11.5px; }
  .mbp-lid { margin: 0 4%; border-radius: 12px 12px 4px 4px; }
  .adm-caps { margin-top: 74px; }
  .loss-nums .loss-n { font-size: clamp(40px, 12vw, 60px); }
}

/* «Как это работает» на телефоне: аппарат закреплён сверху под шапкой, шаги идут под ним обычной прокруткой —
   поэтому всё плавно, как раньше. Текст читается целиком: у блока с телефоном сплошной фон, неактивный шаг лишь бледнее. */
.st-pin { display: contents; }
@media (max-width: 920px) {
  .lp .st-wrap { display: flex; flex-direction: column; gap: 0; }
  .lp .st-stage { display: block; order: -1; position: sticky; top: var(--pin-top, 60px); z-index: 3; align-self: stretch;
                  height: min(440px, 50svh); margin: 0 calc(-1 * var(--pad)); background: var(--bg); }
  .lp .st-stage::after { content: ""; position: absolute; left: 0; right: 0; bottom: -20px; height: 20px; pointer-events: none;
                         background: linear-gradient(var(--bg), rgba(246, 245, 241, 0)); }
  .st-back { inset: 6px var(--pad) 8px; border-radius: 28px; }
  .st-real { top: 16px; font-size: 11.5px; padding: 5px 10px; }
  .lp .st-phone { top: 46px; bottom: 16px; }
  .st-dots { left: auto; right: calc(var(--pad) + 14px); top: auto; bottom: 24px; transform: none; gap: 5px; }
  .st-step { min-height: 46svh; justify-content: flex-start; padding: 28px 0 30px; gap: 10px; opacity: .4; transition: opacity .35s ease; }
  .st-step.on { opacity: 1; }
  .st-step:last-child { min-height: 54svh; }
  .st-step h3 { font-size: 24px; line-height: 1.12; }
  .st-step p { font-size: 15.5px; line-height: 1.55; }
  .lp.st-active .mcta { opacity: 0; transform: translateY(24px); pointer-events: none; }
}

/* ---------- AI-команда на настоящих экранах ---------- */
.lp .nx { padding-top: clamp(72px, 9vw, 128px); }
.nx-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.nx-list { display: flex; flex-direction: column; }
.nx-item { all: unset; box-sizing: border-box; display: flex; flex-direction: column; gap: 6px; padding: 18px 0 18px 24px;
           border-left: 2px solid var(--line); cursor: pointer; transition: border-color .3s ease; }
.nx-item:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 4px; }
.nx-item.on { border-left-color: var(--ink); }
.nx-tab { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--acc); }
.nx-title { font-size: clamp(20px, 1.9vw, 25px); line-height: 1.22; font-weight: 500; letter-spacing: -.02em; color: #8D8F94; transition: color .3s ease; }
.nx-item:hover .nx-title, .nx-item.on .nx-title { color: var(--ink); }
.nx-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s cubic-bezier(.2, .7, .2, 1); }
.nx-item.on .nx-body { grid-template-rows: 1fr; }
.nx-in { overflow: hidden; display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.nx-text { display: block; padding-top: 6px; font-size: 16px; line-height: 1.6; color: var(--muted); text-wrap: pretty; }
.nx-ticks { display: flex; flex-direction: column; gap: 7px; }
.nx-ticks span { display: flex; gap: 9px; align-items: flex-start; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.nx-ticks svg { flex: none; color: var(--g); margin-top: 1px; }
.nx-stage { position: relative; height: min(700px, 82vh); }
.nx-back { position: absolute; inset: 3% 9%; border-radius: 40px;
           background: radial-gradient(60% 55% at 50% 42%, #F3EADF 0%, rgba(243, 234, 223, 0) 72%), linear-gradient(160deg, #EFE9E1, #E5DDD1); }
.lp .nx-phone { position: absolute; left: 50%; top: 7%; bottom: 7%; transform: translateX(-50%); width: auto; height: auto; }
.nx-phone .nx-scr { opacity: 0; transition: opacity .45s ease; }
.nx-phone .nx-scr.on { opacity: 1; }
.nx-cards, .nx-dots { display: none; }
.nx-also { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: clamp(28px, 4vw, 48px); font-size: 14px; color: var(--muted); }
.nx-also em { font-style: normal; padding: 7px 13px; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--ink-2); }
@media (max-width: 920px) {
  .nx-wrap { display: none; }
  .nx-cards { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
              margin: 0 calc(-1 * var(--pad)); padding: 4px var(--pad) 6px; scroll-padding: 0 var(--pad); scrollbar-width: none; }
  .nx-cards::-webkit-scrollbar { display: none; }
  .nx-card { flex: 0 0 86%; scroll-snap-align: center; display: flex; flex-direction: column; gap: 8px; padding: 18px 18px 22px;
             border-radius: 26px; background: #fff; border: 1px solid var(--line); }
  .lp .nx-cphone { width: 64%; margin: 0 auto 12px; }
  .nx-card .nx-title { color: var(--ink); font-size: 21px; }
  .nx-card .nx-text { padding-top: 0; font-size: 15px; }
  .nx-card .nx-ticks { display: none; }          /* на телефоне — только главное: заголовок и пара строк */
  .nx-dots { display: flex; justify-content: center; gap: 6px; margin-top: 16px; }
  .nx-dots i { width: 6px; height: 6px; border-radius: 3px; background: #CFC9BF; transition: width .3s ease, background .3s ease; }
  .nx-dots i.on { width: 22px; background: var(--ink); }
}
.mx-ico.brand-tg { background: #229ED9; color: #fff; }
.mx-ico.brand-tg svg { fill: #fff; }
.mx-ico.mx-wide { width: auto; padding: 0 14px; }
.mx-ico.mx-dark { background: #151617; }
.mx-ico.mx-wide img { display: block; }
.mx-logos { display: flex; align-items: center; gap: 12px; min-height: 40px; flex-wrap: wrap; }
.mx-logos img { display: block; width: auto; border-radius: 6px; }

.tier-pick { display: none; }
@media (max-width: 920px) {
  .tier-pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 22px 0 14px; }
  .tp { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0; padding: 17px 4px 12px;
    border-radius: 18px; font: inherit; text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: transform .2s ease, box-shadow .2s ease; }
  .tp .emb { width: 30px; height: 30px; margin-bottom: 4px; filter: drop-shadow(0 3px 5px rgba(0,0,0,.14)); }
  .tp b { font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
  .tp s { margin-top: 3px; font-size: 11px; opacity: .55; }
  .tp-sum { font-size: 16.5px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; white-space: nowrap; }
  .tp small { font-size: 10.5px; opacity: .7; line-height: 1.2; }
  .tp-tag { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 2px 8px;
    border-radius: 99px; font-size: 10px; font-weight: 700; line-height: 1.5; }
  .tp.t-start { background: linear-gradient(165deg, #FFF9F3, #F7E7D7); border: 1px solid #E6C7A8; color: #7E4119; }
  .tp.t-business { background: linear-gradient(165deg, #FFFCEE, #FBE39A); border: 1px solid #E3B84A; color: #6E4B00; }
  .tp.t-business .tp-tag { background: linear-gradient(135deg, #2A1F00, #5A4000); color: #FFE08A; }
  .tp.t-pro { background: linear-gradient(165deg, #151A3A, #0B0E22); border: 1px solid #5F5AB8; color: #EEF3FF; }
  .tp.t-pro .tp-sum { background: linear-gradient(90deg, #C9F7FF, #D8CCFF 50%, #FFC6EC); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .tp.t-pro .tp-tag { background: linear-gradient(135deg, #A8F4FF, #B6A2FF, #FF9FDF); color: #120F2E; }
  .tp.on { transform: translateY(-3px); box-shadow: 0 0 0 2.5px #151617, 0 14px 26px -14px rgba(0,0,0,.45); }
  .tp.t-pro.on { box-shadow: 0 0 0 2.5px #B6A2FF, 0 14px 26px -12px rgba(70,60,190,.7); }
  .price-grid .price-card { display: none; }
  .price-grid .price-card.on { display: flex; }
  .price-grid .price-card .price-tag, .price-grid .price-card .spark.s2, .price-grid .price-card .spark.s4 { display: none; }
  .price-grid .price-card .spark.s1 { top: 14px; right: 18px; }
  .price-grid .price-card .spark.s3 { top: 34px; right: 46px; bottom: auto; }
}
@media (max-width: 360px) { .tp-sum { font-size: 14.5px; } .tp b { font-size: 15px; } }

.price-next { margin-top: -6px; font-size: 13.5px; font-weight: 500; opacity: .72; }

/* ===== первый экран: подзаголовок-позиционирование ===== */
.hx-eyebrow { display: inline-flex; align-self: flex-start; padding: 6px 12px; border-radius: 99px; background: #F1EEE6; color: var(--ink-2); font-size: 13.5px; font-weight: 500; letter-spacing: -.005em; margin-bottom: -6px; }

/* ===== по-старому / с Dukon ===== */
.lp section.oldnew { margin-top: clamp(72px, 9vw, 128px); }
.on-table { max-width: 980px; margin: 0 auto; border: 1px solid var(--line); border-radius: 22px; overflow: hidden; background: #fff; }
.on-h, .on-row { display: grid; grid-template-columns: 1fr 1fr; }
.on-h span { padding: 16px 24px; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.on-h span + span { background: var(--ink); color: #fff; }
.on-row { border-top: 1px solid var(--line); }
.on-row p { margin: 0; padding: 18px 24px; font-size: 16px; line-height: 1.45; }
.on-old { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(0,0,0,.18); }
.on-new { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; color: var(--ink); background: #FAF9F6; }
.on-new svg { flex: none; margin-top: 3px; }
@media (max-width: 720px) {
  .on-h { display: none; }
  .on-row { grid-template-columns: 1fr; }
  .on-row p { padding: 14px 18px; font-size: 15px; }
  .on-row .on-old { padding-bottom: 4px; font-size: 14px; }
  .on-row .on-new { padding-top: 10px; }
}

/* ===== Студия Дины ===== */
.lp section.studio-lp { margin-top: clamp(72px, 9vw, 128px); display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.sl-tag { display: inline-block; padding: 5px 11px; border-radius: 99px; background: #ECE7FF; color: #4A3BB5; font-size: 13px; font-weight: 600; margin-bottom: 14px; }
.sl-copy h2 { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.06; font-weight: 500; letter-spacing: -.035em; text-wrap: balance; margin: 0 0 16px; }
.sl-copy > p { font-size: 17px; line-height: 1.6; color: var(--muted); margin: 0 0 18px; text-wrap: pretty; }
.sl-copy ul { list-style: none; padding: 0; margin: 0 0 26px; display: grid; gap: 10px; }
.sl-copy li { display: flex; gap: 10px; align-items: flex-start; font-size: 15.5px; line-height: 1.45; }
.sl-copy li svg { flex: none; margin-top: 3px; }
.sl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sl-grid figure { margin: 0; position: relative; border-radius: 18px; overflow: hidden; background: #F1EEE6; box-shadow: 0 18px 40px -26px rgba(20, 14, 10, .5); }
.sl-grid img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.sl-grid figcaption { position: absolute; left: 10px; bottom: 10px; padding: 5px 10px; border-radius: 99px; background: rgba(255,255,255,.92); font-size: 12.5px; font-weight: 500; color: var(--ink); }
.sl-grid figure:nth-child(2), .sl-grid figure:nth-child(4) { transform: translateY(22px); }
.sl-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.95); font-style: normal; font-size: 18px; padding-left: 4px; box-sizing: border-box; box-shadow: 0 10px 24px -10px rgba(0,0,0,.5); }
@media (max-width: 900px) {
  .lp section.studio-lp { grid-template-columns: 1fr; }
  .sl-grid figure:nth-child(2), .sl-grid figure:nth-child(4) { transform: none; }
}

/* 08.10: призыв после раздела возможностей и подсказка, какой тариф выбрать */
.sec-cta { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 34px auto 0; text-align: center; }
.sec-cta small { color: var(--muted, #6b6e74); font-size: 13px; }
.plan-help { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 980px; margin: 0 auto 22px; }
.plan-help div { padding: 12px 14px; border: 1px solid var(--line, #e7e4dd); border-radius: 14px; font-size: 14px; line-height: 1.45; background: #fff; }
.plan-help div.on { border-color: #151617; box-shadow: 0 0 0 1px #151617; }
.plan-help b { font-weight: 650; }
.plan-help span { color: var(--muted, #6b6e74); }
@media (max-width: 760px) { .plan-help { grid-template-columns: 1fr; padding: 0 16px; } }

/* ============ AI-агенты и AI-офис ============ */
.lp section.aio { margin-top: clamp(72px, 9vw, 128px); }
.aio-kicker { align-self: center; font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--dk, #1f5fd1); background: #EAF1FF; padding: 6px 12px; border-radius: 999px; }
.aio-stage { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(20px, 3vw, 40px); align-items: center; }
.aio-frame { border-radius: 18px; overflow: hidden; background: #0F1114; box-shadow: 0 30px 60px -30px rgba(15, 17, 20, .45), 0 0 0 1px rgba(15, 17, 20, .08); }
.aio-tog { position: absolute; z-index: 2; top: 12px; right: 12px; display: inline-flex; background: rgba(20, 22, 27, .72); backdrop-filter: blur(6px); border-radius: 999px; padding: 3px; }
.aio-tog button { border: 0; background: none; color: #D5D8DE; font: 500 13px/1 inherit; padding: 7px 13px; border-radius: 999px; cursor: pointer; }
.aio-tog button.on { background: #fff; color: #0F1114; }
.aio-pic { position: relative; aspect-ratio: 1400 / 860; }
.aio-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s; }
.aio-pic img.on { opacity: 1; }
.aio-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 22px; }
.aio-points li { display: flex; gap: 12px; font-size: 15px; line-height: 1.5; color: var(--muted); }
.aio-points li svg { flex-shrink: 0; margin-top: 2px; color: #1f9d55; }
.aio-points b { display: block; color: var(--ink); font-weight: 600; margin-bottom: 2px; }
.aio-team { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: clamp(28px, 4vw, 48px); }
.aio-ag { flex: 0 1 calc(25% - 9px); display: flex; gap: 12px; padding: 16px; border-radius: 16px; background: #fff; border: 1px solid var(--line); }
.aio-ag .face { border-radius: 12px; flex-shrink: 0; }
.aio-ag b { display: block; font-size: 15px; color: var(--ink); }
.aio-ag small { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 6px; }
.aio-ag p { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
@media (max-width: 1000px) { .aio-stage { grid-template-columns: minmax(0, 1fr); } .aio-ag { flex-basis: calc(50% - 6px); } }
@media (max-width: 560px) { .aio-team { display: flex; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; margin-left: calc(-1 * var(--pad)); margin-right: calc(-1 * var(--pad)); padding: 0 var(--pad) 6px; scrollbar-width: none; } .aio-team::-webkit-scrollbar { display: none; } .aio-ag { flex: 0 0 80%; scroll-snap-align: center; } }
.st-real i { display: none; }
.float { animation: pop .5s cubic-bezier(.23, 1, .32, 1) forwards; }
.pin { animation: none; }
.urg-dot { animation: none; box-shadow: none; }
::selection { background: color-mix(in srgb, var(--acc, #1f5fd1) 22%, transparent); color: inherit; }
a:focus-visible, button:focus-visible, .btn:focus-visible { outline: 2px solid var(--ink, #151617); outline-offset: 3px; }
.btn { transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .16s cubic-bezier(.23, 1, .32, 1); }
.btn:active { transform: scale(.97); }
@media (prefers-reduced-motion: reduce) { .btn:active { transform: none; } }