/* Programmed hero infographic for the public homepage. Scoped to avoid touching global site cards/buttons. */

/* Hero layout tuning for the programmed infographic. */
.hero-grid--infographic {
    grid-template-columns: minmax(0, 0.82fr) minmax(720px, 1.32fr);
    gap: 24px;
}

.offerist-hero-infographic {
    --w: 1664;
    --h: 928;
    --hero-bg: #020816;
    --hero-card: #081631;
    --hero-card-2: #061229;
    --hero-text: #f7fbff;
    --hero-muted: #b9c4dc;
    --hero-violet: #b957ff;
    --hero-cyan: #22f3e3;
    --hero-blue: #168cff;
    --hero-gold: #ffb92e;
    position: relative;
    width: min(100%, 1120px);
    aspect-ratio: 1664 / 928;
    margin-left: auto;
    overflow: visible;
    color: var(--hero-text);
    font-family: Inter, system-ui, -apple-system, Segoe UI, Arial, sans-serif;
    filter: drop-shadow(0 34px 90px rgba(0, 0, 0, .32));
}
.offerist-hero-infographic * { box-sizing: border-box; }
.offerist-hero-infographic__scale {
    position: absolute;
    left: 0;
    top: 0;
    width: 1664px;
    height: 928px;
    transform-origin: left top;
}
.hero-infographic-holder {
    position: relative;
    min-height: 640px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    pointer-events: none;
}
.hero-infographic-holder .offerist-hero-infographic { pointer-events: auto; }
@media (max-width: 1080px) {
    .hero-grid--infographic { grid-template-columns: 1fr; gap: 30px; }
    .hero-infographic-holder { min-height: auto; justify-content: center; }
    .hero-infographic-holder .offerist-hero-infographic { width: min(100%, 960px); margin: 0 auto; }
}
@media (max-width: 760px) {
    .hero-infographic-holder { display: none; }
}

.offerist-hero-infographic .stage {
    position: relative;
    width: 1664px;
    height: 928px;
    overflow: hidden;
    border-radius: 0;
    background: transparent;
}.offerist-hero-infographic .stage:before,
.offerist-hero-infographic .stage:after {
    content: none;
    display: none;
}.offerist-hero-infographic .card,
.offerist-hero-infographic .doc,
.offerist-hero-infographic .timer,
.offerist-hero-infographic .coin,
.offerist-hero-infographic .star {
    position: absolute;
}.offerist-hero-infographic .card {
    background: linear-gradient(180deg, rgba(12, 24, 53, 0.93), rgba(4, 13, 32, 0.95));
    border-radius: 22px;
    box-shadow:
        0 22px 60px rgba(0, 0, 0, 0.36),
        inset 0 0 0 1px rgba(255, 255, 255, 0.045);
    backdrop-filter: blur(8px);
    z-index: 4;
}.offerist-hero-infographic .card h3 {
    margin: 0;
    font-size: 26px;
    line-height: 1.06;
    font-weight: 900;
    letter-spacing: -0.035em;
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.16);
}.offerist-hero-infographic .products {
    left: 26px;
    top: 26px;
    width: 445px;
    height: 286px;
    padding: 25px 27px;
    border: 1.5px solid var(--hero-violet);
    box-shadow:
        0 0 28px rgba(185, 87, 255, 0.45),
        inset 0 0 34px rgba(185, 87, 255, 0.08);
}.offerist-hero-infographic .clients {
    left: 26px;
    top: 328px;
    width: 445px;
    height: 272px;
    padding: 24px 28px;
    border: 1.5px solid var(--hero-cyan);
    box-shadow:
        0 0 28px rgba(34, 243, 227, 0.34),
        inset 0 0 34px rgba(34, 243, 227, 0.08);
}.offerist-hero-infographic .templates {
    left: 26px;
    top: 612px;
    width: 445px;
    height: 310px;
    padding: 21px 26px;
    border: 1.5px solid var(--hero-blue);
    box-shadow:
        0 0 28px rgba(22, 140, 255, 0.34),
        inset 0 0 34px rgba(22, 140, 255, 0.08);
}.offerist-hero-infographic .grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 11px;
    margin-top: 17px;
}.offerist-hero-infographic .tile {
    height: 88px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: linear-gradient(180deg, rgba(28, 43, 84, 0.9), rgba(8, 19, 44, 0.92));
    box-shadow: inset 0 0 0 1px rgba(130, 158, 220, 0.18);
    font-size: 50px;
}.offerist-hero-infographic .tile svg {
    width: 66px;
    height: 66px;
    filter: drop-shadow(0 8px 8px rgba(0, 0, 0, 0.34));
}.offerist-hero-infographic .client-list {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}.offerist-hero-infographic .client {
    height: 58px;
    border-radius: 13px;
    background: rgba(5, 24, 49, 0.86);
    box-shadow: inset 0 0 0 1px rgba(34, 243, 227, 0.14);
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 16px;
}.offerist-hero-infographic .avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: radial-gradient(circle at 35% 25%, #7df7f4 0 27%, #24b4d8 28% 100%);
    box-shadow: 0 0 14px rgba(34, 243, 227, 0.42);
    flex: 0 0 auto;
}.offerist-hero-infographic .avatar svg {
    width: 32px;
    height: 32px;
}.offerist-hero-infographic .name {
    font-size: 19px;
    font-weight: 900;
    color: #39ffe9;
    line-height: 1.05;
}.offerist-hero-infographic .sub {
    font-size: 17px;
    color: #fff;
    line-height: 1.1;
    margin-top: 3px;
}.offerist-hero-infographic .tpl-list {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}.offerist-hero-infographic .tpl {
    height: 52px;
    border-radius: 12px;
    background: rgba(5, 22, 48, 0.86);
    box-shadow: inset 0 0 0 1px rgba(65, 145, 255, 0.18);
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 7px 12px;
}.offerist-hero-infographic .tpl-ico {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: linear-gradient(145deg, #0b6dc7, #074b87);
    display: grid;
    place-items: center;
    flex: 0 0 auto;
}.offerist-hero-infographic .tpl-ico svg {
    width: 28px;
    height: 28px;
}.offerist-hero-infographic .tpl-t {
    font-size: 17px;
    line-height: 1.06;
    color: #fff;
}.offerist-hero-infographic .doc {
    z-index: 5;
    left: 617px;
    top: 43px;
    width: 538px;
    height: 663px;
    border-radius: 22px;
    padding: 38px 41px 32px;
    background: linear-gradient(145deg, #fbfdff, #e9eef7 70%, #f7fbff);
    color: #07132e;
    box-shadow:
        0 0 36px rgba(115, 182, 255, 0.2),
        0 28px 70px rgba(0, 0, 0, 0.28);
}.offerist-hero-infographic .doc h2 {
    margin: 0;
    font-size: 31px;
    line-height: 1.05;
    font-weight: 900;
    letter-spacing: -0.04em;
}.offerist-hero-infographic .logo {
    position: absolute;
    right: 35px;
    top: 32px;
    width: 122px;
    height: 57px;
    border: 1.6px solid #162344;
    border-radius: 7px;
    display: grid;
    place-items: center;
    font-size: 26px;
    font-weight: 900;
    background: rgba(255, 255, 255, 0.35);
}.offerist-hero-infographic .doc-top {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-top: 50px;
}.offerist-hero-infographic .product-photo {
    width: 133px;
    height: 111px;
    border-radius: 10px;
    background: #d9e2f2;
    display: grid;
    place-items: center;
}.offerist-hero-infographic .product-photo svg {
    width: 92px;
    height: 72px;
}.offerist-hero-infographic .lines {
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1;
}.offerist-hero-infographic .line {
    height: 9px;
    border-radius: 99px;
    background: #aeb8ce;
}.offerist-hero-infographic .l1 {
    width: 100%;
}.offerist-hero-infographic .l2 {
    width: 84%;
}.offerist-hero-infographic .l3 {
    width: 68%;
}.offerist-hero-infographic .table {
    margin-top: 22px;
    height: 210px;
    border-radius: 9px;
    overflow: hidden;
    background: #dfe6f2;
    box-shadow: inset 0 0 0 1px rgba(80, 96, 130, 0.16);
}.offerist-hero-infographic .row {
    display: grid;
    grid-template-columns: 1.22fr 1fr 1fr 1fr;
    height: 43px;
}.offerist-hero-infographic .row.head {
    height: 39px;
    background: #cdd7e8;
    font-size: 14px;
    font-weight: 700;
    color: #24314f;
}.offerist-hero-infographic .cell {
    border-right: 1px solid rgba(87, 103, 137, 0.16);
    border-bottom: 1px solid rgba(87, 103, 137, 0.13);
    display: flex;
    align-items: center;
    padding-left: 14px;
}.offerist-hero-infographic .cell:last-child {
    border-right: 0;
}.offerist-hero-infographic .stub {
    width: 47px;
    height: 8px;
    border-radius: 8px;
    background: #adb8ce;
}.offerist-hero-infographic .footer {
    position: absolute;
    left: 41px;
    right: 41px;
    bottom: 36px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}.offerist-hero-infographic .terms {
    font-size: 14px;
    font-weight: 800;
    color: #22304e;
    margin-bottom: 8px;
}.offerist-hero-infographic .sig {
    position: relative;
    width: 133px;
    height: 50px;
    border-bottom: 2px solid #111b36;
}.offerist-hero-infographic .sig svg {
    position: absolute;
    left: -3px;
    top: -8px;
    width: 120px;
    height: 54px;
}.offerist-hero-infographic .total {
    text-align: right;
    font-weight: 900;
    line-height: 1;
}.offerist-hero-infographic .total small {
    display: block;
    font-size: 22px;
}.offerist-hero-infographic .total b {
    display: block;
    margin-top: 4px;
    font-size: 29px;
    letter-spacing: -0.04em;
}.offerist-hero-infographic .pdf {
    position: absolute;
    right: -67px;
    bottom: -25px;
    width: 92px;
    height: 65px;
    border-radius: 12px;
    background: linear-gradient(145deg, #c25eff, #8e31ff);
    box-shadow: 0 0 26px rgba(184, 87, 255, 0.85);
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 30px;
    font-weight: 900;
}.offerist-hero-infographic .right {
    left: 1274px;
    width: 308px;
}.offerist-hero-infographic .receive {
    top: 26px;
    height: 343px;
    padding: 28px 29px;
    border: 1.5px solid var(--hero-blue);
    box-shadow:
        0 0 28px rgba(22, 140, 255, 0.42),
        inset 0 0 34px rgba(22, 140, 255, 0.08);
}.offerist-hero-infographic .pay {
    top: 379px;
    height: 313px;
    padding: 28px 34px;
    border: 1.5px solid var(--hero-gold);
    box-shadow:
        0 0 30px rgba(255, 185, 46, 0.42),
        inset 0 0 44px rgba(255, 185, 46, 0.09);
}.offerist-hero-infographic .receive h3 {
    font-size: 27px;
    line-height: 1.05;
}.offerist-hero-infographic .mail {
    margin: 21px 0 18px;
    width: 126px;
    height: 73px;
    position: relative;
    border: 3px solid #00ceff;
}.offerist-hero-infographic .mail:before,
.offerist-hero-infographic .mail:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(145deg, transparent 48%, #00ceff 49%, #00ceff 51%, transparent 52%);
}.offerist-hero-infographic .mail:after {
    background: linear-gradient(35deg, transparent 48%, #00ceff 49%, #00ceff 51%, transparent 52%);
}.offerist-hero-infographic .mail-ok {
    position: absolute;
    right: -44px;
    top: 33px;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    border: 3px solid #11dfff;
	background-color: #09142d;
}.offerist-hero-infographic .mail-ok:after {
    content: "";
    position: absolute;
    left: 9px;
    top: 1px;
    width: 19px;
    height: 30px;
    border-right: 6px solid #11f5e4;
    border-bottom: 6px solid #11f5e4;
    transform: rotate(42deg);
}.offerist-hero-infographic .check {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 17px 0;
    font-size: 21px;
}.offerist-hero-infographic .check:before {
    content: "✓";
    width: 26px;
    height: 26px;
    border: 2px solid #10dfff;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #10f5e4;
    font-weight: 900;
    font-size: 19px;
}.offerist-hero-infographic .pay h3 {
    color: #ffe685;
    font-size: 27px;
    line-height: 1.05;
}.offerist-hero-infographic .ruble {
    font-size: 96px;
    text-align: center;
    font-weight: 900;
    color: #ffc63f;
    line-height: 1;
    margin: 20px 0;
    text-shadow: 0 0 24px rgba(255, 185, 46, 0.65);
}.offerist-hero-infographic .pay p {
    font-size: 18px;
    line-height: 1.2;
    text-align: center;
    color: #ffe9aa;
}.offerist-hero-infographic .timer {
    left: 560px;
    top: 734px;
    width: 570px;
    height: 160px;
    border-radius: 36px;
    background: linear-gradient(180deg, rgba(38, 12, 68, 0.96), rgba(20, 8, 43, 0.98));
    border: 1.5px solid var(--hero-violet);
    box-shadow:
        0 0 38px rgba(185, 87, 255, 0.55),
        inset 0 0 34px rgba(185, 87, 255, 0.1);
    display: flex;
    align-items: center;
    padding: 28px 48px;
    z-index: 4;
}.offerist-hero-infographic .timer b {
    line-height: 0.9;
    position: absolute;
    top: 20px;
    left: 41px;
    font-size: 118px;
}.offerist-hero-infographic .timer strong {
    font-size: 70px;
    margin-left: 18px;
    position: absolute;
    left: 110px;
    top: 8px;
}.offerist-hero-infographic .timer span {
    position: absolute;
    left: 130px;
    bottom: 36px;
    font-size: 21px;
}.offerist-hero-infographic .bolt {
    margin-left: auto;
    width: 105px;
    height: 105px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, rgba(203, 90, 255, 0.55), rgba(85, 22, 150, 0.85));
    display: grid;
    place-items: center;
    color: #d669ff;
    font-size: 72px;
    text-shadow: 0 0 17px rgba(214, 105, 255, 0.8);
}.offerist-hero-infographic .coins {
    position: absolute;
    left: 1256px;
    top: 666px;
    width: 315px;
    height: 230px;
    z-index: 3;
}.offerist-hero-infographic .coin {
    position: absolute;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: radial-gradient(circle at 32% 24%, #fff2a1 0 8%, #ffd65a 9% 36%, #df8d1b 37% 76%, #ffca43 77% 100%);
    border: 5px solid #ffc852;
    box-shadow: 0 0 20px rgba(255, 198, 63, 0.72);
    animation: offeristHeroCoin 4.5s ease-in-out infinite;
}.offerist-hero-infographic .coin:before {
    content: "₽";
    font-size: 38px;
    font-weight: 900;
    color: #7b4300;
}.offerist-hero-infographic .c1 {
    left: 22px;
    top: 67px;
}.offerist-hero-infographic .c2 {
    left: 102px;
    top: 122px;
    animation-delay: 0.4s;
}.offerist-hero-infographic .c3 {
    left: 183px;
    top: 100px;
    animation-delay: 0.9s;
}.offerist-hero-infographic .c4 {
    left: 222px;
    top: 23px;
    animation-delay: 1.4s;
}.offerist-hero-infographic .c5 {
    left: 70px;
    top: 168px;
    animation-delay: 1.9s;
}.offerist-hero-infographic .star {
    position: absolute;
    color: #ffd45a;
    font-size: 24px;
    text-shadow: 0 0 12px #ffd45a;
    animation: offeristHeroTw 2.5s ease-in-out infinite;
}.offerist-hero-infographic .s1 {
    left: 10px;
    top: 153px;
}.offerist-hero-infographic .s2 {
    left: 143px;
    top: 80px;
    animation-delay: 0.5s;
}.offerist-hero-infographic .s3 {
    left: 283px;
    top: 80px;
    animation-delay: 1s;
}.offerist-hero-infographic .flows {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}.offerist-hero-infographic .flows svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}.offerist-hero-infographic .flow {
    fill: none;
    stroke-width: 6;
    stroke-linecap: round;
    stroke-dasharray: 14 14;
    filter: drop-shadow(0 0 8px currentColor);
    animation: offeristHeroDash 2.2s linear infinite;
}.offerist-hero-infographic .v {
    stroke: #b957ff;
    color: #b957ff;
}.offerist-hero-infographic .c {
    stroke: #22f3e3;
    color: #22f3e3;
}.offerist-hero-infographic .b {
    stroke: #168cff;
    color: #168cff;
}.offerist-hero-infographic .g {
    stroke: #ffb92e;
    color: #ffb92e;
}.offerist-hero-infographic .float {
    animation: offeristHeroFloat 5.5s ease-in-out infinite;
}.offerist-hero-infographic .delay1 {
    animation-delay: 0.7s;
}.offerist-hero-infographic .delay2 {
    animation-delay: 1.2s;
}
@keyframes offeristHeroDash {
    to {
        stroke-dashoffset: -56;
    }
}
@keyframes offeristHeroCoin {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}
@keyframes offeristHeroTw {
    0%,
    100% {
        opacity: 0.35;
        transform: scale(0.8);
    }
    50% {
        opacity: 1;
        transform: scale(1.15);
    }
}
@keyframes offeristHeroFloat {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-6px);
    }
}