:root {
    --bg: #06131d;
    --bg-deep: #041019;
    --panel: #091827;
    --panel-soft: #0b1d2b;

    --text: #f2f5f7;
    --muted: #84919f;

    --green: #18b783;
    --green-soft: #20c491;

    --blue: #5b8ff0;
    --blue-soft: #6d9df4;

    --line: rgba(255,255,255,.08);

    --radius: 34px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;

    background:
        radial-gradient(circle at 50% 22%,
            rgba(26,183,131,.07),
            transparent 34%),
        linear-gradient(
            180deg,
            #041019 0%,
            #06131d 48%,
            #041019 100%
        );

    color: var(--text);

    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

.ambient {
    position: fixed;
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
}

.ambient-one {
    width: 430px;
    height: 430px;
    left: -150px;
    top: 90px;

    background: rgba(15,62,66,.16);
}

.ambient-two {
    width: 520px;
    height: 520px;

    right: -220px;
    bottom: -100px;

    background: rgba(20,55,91,.15);
}


.header {
    max-width: 1220px;
    margin: auto;

    height: 92px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 28px;
}

.brand {
    font-size: 27px;
    letter-spacing: .18em;
    font-weight: 500;
}

.nav {
    display: flex;
    gap: 32px;

    color: var(--muted);

    font-size: 14px;
}

.nav a {
    transition: .2s;
}

.nav a:hover {
    color: var(--text);
}

.header-download {
    border: 1px solid rgba(24,183,131,.55);
    border-radius: 50px;

    padding: 11px 21px;

    color: var(--green-soft);
}


main {
    max-width: 1220px;
    margin: auto;
    padding: 0 28px;
}


.hero {
    min-height: 670px;

    display: grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(420px,.9fr);

    align-items: center;

    gap: 40px;
}


.hero-copy {
    padding-left: 4%;
}


.eyebrow,
.section-label {
    color: var(--muted);

    font-size: 12px;

    letter-spacing: .45em;

    text-transform: uppercase;
}


.hero h1 {
    margin: 20px 0;

    font-size: clamp(52px,7vw,93px);

    line-height: .95;

    letter-spacing: .09em;

    font-weight: 500;

    background:
        linear-gradient(
            110deg,
            var(--blue-soft),
            #edf6ff 48%,
            var(--green-soft)
        );

    -webkit-background-clip: text;
    color: transparent;
}


.hero-description {
    max-width: 590px;

    color: #a9b3bd;

    font-size: 18px;

    line-height: 1.7;
}


.hero-actions {
    display: flex;
    align-items: center;
    gap: 24px;

    margin-top: 35px;
}


.primary-button {
    display: inline-flex;
    align-items: center;

    gap: 11px;

    min-height: 54px;

    padding: 0 27px;

    border-radius: 40px;

    background:
        linear-gradient(
            135deg,
            #159c77,
            #1bc18d
        );

    color: white;

    font-weight: 600;

    box-shadow:
        0 13px 38px rgba(24,183,131,.17);

    transition:
        transform .2s,
        box-shadow .2s;
}

.primary-button:hover {
    transform: translateY(-2px);

    box-shadow:
        0 18px 45px rgba(24,183,131,.27);
}


.android-symbol {
    font-size: 12px;
}


.version {
    color: var(--muted);
    font-size: 13px;
}


.vpn-visual {
    position: relative;

    width: min(520px,86vw);
    aspect-ratio: 1;

    margin: auto;

    display: grid;
    place-items: center;
}


.orbit {
    position: absolute;
    border-radius: 50%;
}


.orbit-outer {
    inset: 1%;

    border:
        7px dashed
        rgba(24,183,131,.25);

    animation:
        rotateOrbit 35s linear infinite;
}


.orbit-middle {
    inset: 6%;

    border:
        5px solid
        rgba(24,183,131,.15);

    border-right-color:
        rgba(24,183,131,.58);

    border-bottom-color:
        rgba(24,183,131,.5);

    animation:
        rotateReverse 22s linear infinite;
}


.vpn-circle {
    width: 78%;
    height: 78%;

    border-radius: 50%;

    display: grid;
    place-items: center;

    position: relative;

    background:
        radial-gradient(
            circle at 45% 35%,
            #20bf8f,
            #16a979 58%,
            #0d8e69 100%
        );

    box-shadow:
        0 0 70px rgba(22,185,134,.16),
        inset 0 1px 1px rgba(255,255,255,.2);

    animation:
        vpnBreath 4s ease-in-out infinite;
}


.shield {
    width: 45%;

    fill:
        rgba(240,255,251,.94);

    stroke:
        rgba(255,255,255,.95);

    stroke-width: 5;

    filter:
        drop-shadow(
            0 8px 14px
            rgba(255,255,255,.12)
        );
}


.shield line {
    stroke: rgba(24,183,131,.22);
    stroke-width: 5;
}


.connected-check {
    position: absolute;

    right: 7%;
    bottom: 9%;

    width: 82px;
    height: 82px;

    background: white;

    border-radius: 50%;

    display: grid;
    place-items: center;

    box-shadow:
        0 10px 25px
        rgba(0,0,0,.18);
}


.connected-check span {
    width: 31px;
    height: 17px;

    border-left:
        5px solid var(--green);

    border-bottom:
        5px solid var(--green);

    transform:
        rotate(-45deg)
        translateY(-3px);
}


.particles span {
    position: absolute;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background:
        rgba(128,255,217,.24);
}

.particles span:nth-child(1) {
    top: 18%;
    left: 21%;
}

.particles span:nth-child(2) {
    top: 24%;
    right: 20%;
}

.particles span:nth-child(3) {
    bottom: 17%;
    left: 16%;
}

.particles span:nth-child(4) {
    right: 8%;
    bottom: 42%;
}

.particles span:nth-child(5) {
    left: 46%;
    bottom: 7%;
}


.status-card {
    max-width: 810px;

    margin:
        -20px auto
        95px;

    padding:
        25px 34px;

    display: flex;
    align-items: center;

    gap: 20px;

    border-radius: 30px;

    background:
        rgba(9,24,39,.83);

    border:
        1px solid
        rgba(24,183,131,.12);

    backdrop-filter: blur(12px);
}


.status-icon {
    flex: 0 0 48px;

    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background:
        rgba(24,183,131,.12);

    color: var(--green);

    font-size: 24px;
}


.status-small {
    color: var(--muted);

    font-size: 11px;

    letter-spacing: .25em;
}


.status-main {
    margin-top: 4px;

    color: var(--green-soft);

    font-size: 23px;

    font-weight: 600;
}


.features {
    display: grid;

    grid-template-columns:
        repeat(3,1fr);

    gap: 18px;

    margin-bottom: 130px;
}


.feature {
    min-height: 265px;

    padding: 31px;

    border-radius: var(--radius);

    background:
        linear-gradient(
            145deg,
            rgba(13,31,45,.9),
            rgba(7,22,33,.74)
        );

    border:
        1px solid var(--line);
}


.feature-number {
    color: var(--green);

    font-size: 12px;

    letter-spacing: .18em;
}


.feature h2 {
    margin-top: 44px;

    font-size: 22px;

    font-weight: 500;
}


.feature p {
    color: #8f9ba6;

    line-height: 1.7;
}


.technology {
    padding: 70px;

    margin-bottom: 120px;

    display: grid;

    grid-template-columns:
        1fr .85fr;

    gap: 70px;

    border-radius: 42px;

    background:
        rgba(8,23,35,.78);

    border:
        1px solid var(--line);
}


.technology h2,
.cta h2 {
    margin:
        18px 0;

    max-width: 590px;

    font-size:
        clamp(32px,4vw,49px);

    line-height: 1.1;

    font-weight: 500;
}


.technology p,
.cta p {
    max-width: 590px;

    color: #929eaa;

    line-height: 1.8;
}


.text-link {
    display: inline-block;

    margin-top: 16px;

    color: var(--green);
}


.connection-flow {
    display: flex;
    flex-direction: column;

    justify-content: center;
}


.flow-item {
    display: flex;
    align-items: center;

    gap: 16px;

    padding: 14px;

    color: #8f9aa5;
}


.flow-item span {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: #0d2030;

    font-size: 11px;
}


.flow-item.active span {
    color: var(--blue);

    box-shadow:
        inset 0 0 0 1px
        rgba(91,143,240,.35);
}


.flow-item.connected {
    color: var(--green-soft);
}


.flow-item.connected span {
    color: var(--green);

    box-shadow:
        inset 0 0 0 1px
        rgba(24,183,131,.4);
}


.flow-line {
    height: 22px;

    margin-left: 32px;

    border-left:
        1px dashed
        rgba(255,255,255,.13);
}


.cta {
    margin-bottom: 90px;

    padding: 60px;

    border-radius: 42px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 40px;

    background:
        radial-gradient(
            circle at 85% 50%,
            rgba(24,183,131,.12),
            transparent 35%
        ),
        #081724;

    border:
        1px solid
        rgba(24,183,131,.16);
}


footer {
    max-width: 1220px;

    margin: auto;

    padding:
        35px 28px
        50px;

    border-top:
        1px solid var(--line);

    display: flex;
    justify-content: space-between;

    color: var(--muted);

    font-size: 13px;
}


.footer-brand {
    letter-spacing: .18em;

    color: var(--text);
}


.footer-links {
    display: flex;

    gap: 25px;
}


@keyframes rotateOrbit {
    from {
        transform: rotate(0);
    }

    to {
        transform: rotate(360deg);
    }
}


@keyframes rotateReverse {
    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0);
    }
}


@keyframes vpnBreath {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.012);
    }
}


@media (max-width: 900px) {

    .nav {
        display: none;
    }

    .hero {
        grid-template-columns: 1fr;

        text-align: center;

        padding-top: 55px;
    }

    .hero-copy {
        padding-left: 0;
    }

    .hero-description {
        margin:
            0 auto;
    }

    .hero-actions {
        justify-content: center;
    }

    .vpn-visual {
        width: min(490px,90vw);
    }

    .features {
        grid-template-columns: 1fr;
    }

    .technology {
        grid-template-columns: 1fr;

        padding: 45px 30px;
    }

    .cta {
        flex-direction: column;

        align-items: flex-start;

        padding: 45px 30px;
    }
}


@media (max-width: 560px) {

    .header {
        height: 74px;

        padding:
            0 18px;
    }

    .brand {
        font-size: 21px;
    }

    .header-download {
        padding:
            8px 15px;

        font-size: 13px;
    }

    main {
        padding:
            0 17px;
    }

    .hero {
        min-height: 0;

        padding-top: 45px;
    }

    .hero h1 {
        font-size: 47px;
    }

    .hero-description {
        font-size: 16px;
    }

    .hero-actions {
        flex-direction: column;

        gap: 14px;
    }

    .vpn-visual {
        margin-top: 20px;
    }

    .connected-check {
        width: 64px;
        height: 64px;
    }

    .status-card {
        margin-top: 18px;

        padding:
            20px;

        border-radius: 25px;
    }

    .status-main {
        font-size: 18px;
    }

    .feature {
        min-height: 220px;
    }

    .technology {
        margin-bottom: 70px;
    }

    .cta {
        margin-bottom: 55px;
    }

    footer {
        flex-direction: column;

        gap: 22px;
    }

    .footer-links {
        flex-wrap: wrap;
    }
}


/* SERGVPN HERO TITLE SIZE FIX */
@media (min-width: 901px) {
    .hero h1 {
        font-size: clamp(52px, 5.6vw, 76px);
        letter-spacing: .065em;
        max-width: 680px;
    }
}

@media (min-width: 901px) and (max-width: 1100px) {
    .hero h1 {
        font-size: clamp(48px, 5.3vw, 66px);
    }
}


/* =========================================================
   SERGVPN SUPPORT
   ========================================================= */

.nav-active {
    color: var(--text) !important;
}


.support-hero {
    max-width: 760px;

    padding:
        110px 0
        65px;
}


.support-hero h1 {
    margin:
        18px 0
        22px;

    font-size:
        clamp(44px,6vw,76px);

    line-height: 1;

    font-weight: 500;

    letter-spacing: -.025em;

    background:
        linear-gradient(
            115deg,
            #edf6ff,
            var(--blue-soft) 48%,
            var(--green-soft)
        );

    -webkit-background-clip: text;
    color: transparent;
}


.support-hero p {
    max-width: 650px;

    color: #98a4af;

    font-size: 18px;

    line-height: 1.75;
}


.support-layout {
    display: grid;

    grid-template-columns:
        .75fr
        1.25fr;

    gap: 25px;

    margin-bottom: 80px;
}


.support-info {
    display: grid;
    gap: 15px;
}


.support-card {
    padding: 27px;

    border-radius: 28px;

    background:
        rgba(9,24,39,.78);

    border:
        1px solid var(--line);
}


.support-card-icon {
    width: 40px;
    height: 40px;

    border-radius: 50%;

    display: grid;
    place-items: center;

    color: var(--green);

    background:
        rgba(24,183,131,.1);

    border:
        1px solid
        rgba(24,183,131,.16);
}


.support-card h2 {
    margin:
        20px 0
        9px;

    font-size: 18px;

    font-weight: 550;
}


.support-card p {
    margin: 0;

    color: #8996a1;

    line-height: 1.65;

    font-size: 14px;
}


.feedback-panel {
    padding: 42px;

    border-radius: 36px;

    background:
        linear-gradient(
            145deg,
            rgba(12,31,44,.96),
            rgba(7,20,31,.92)
        );

    border:
        1px solid
        rgba(91,143,240,.12);
}


.feedback-heading h2 {
    margin:
        13px 0
        5px;

    font-size: 31px;

    font-weight: 500;
}


.feedback-heading p {
    margin:
        0 0
        32px;

    color: var(--muted);
}


.support-form {
    display: grid;

    gap: 21px;
}


.support-form label {
    display: grid;

    gap: 9px;

    color: #aab4bd;

    font-size: 13px;
}


.support-form input,
.support-form select,
.support-form textarea {

    width: 100%;

    border: 1px solid
        rgba(255,255,255,.09);

    outline: none;

    border-radius: 16px;

    background:
        rgba(4,16,25,.72);

    color: var(--text);

    padding:
        15px 17px;

    font: inherit;

    transition:
        border-color .2s,
        box-shadow .2s;
}


.support-form textarea {
    resize: vertical;

    min-height: 155px;
}


.support-form input:focus,
.support-form select:focus,
.support-form textarea:focus {

    border-color:
        rgba(91,143,240,.5);

    box-shadow:
        0 0 0 3px
        rgba(91,143,240,.07);
}


.support-form select option {
    background: #071722;
}


.form-row {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 16px;
}


.support-submit {
    border: 0;
    cursor: pointer;

    width: fit-content;
}


.support-status {
    color: #6f7c87;

    font-size: 12px;

    line-height: 1.5;
}


.support-note {
    margin-bottom: 100px;

    padding:
        25px 30px;

    display: flex;
    align-items: center;

    gap: 19px;

    border-radius: 27px;

    background:
        rgba(24,183,131,.045);

    border:
        1px solid
        rgba(24,183,131,.1);
}


.support-note strong {
    font-size: 15px;
}


.support-note p {
    margin:
        5px 0 0;

    color: #84919d;

    font-size: 14px;
}


@media (max-width: 900px) {

    .support-layout {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 560px) {

    .support-hero {
        padding:
            70px 0
            45px;
    }

    .support-hero h1 {
        font-size: 46px;
    }

    .feedback-panel {
        padding:
            30px 20px;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

}


/* SUPPORT FORM STATES */

.support-submit:disabled {
    opacity: .55;
    cursor: wait;
    transform: none;
}

.support-status[data-state="success"] {
    color: var(--green-soft);
}

.support-status[data-state="error"] {
    color: #ff8a8a;
}


/* SERGVPN DONATE NAV LINK */

.sergvpn-donate-link {
    color: #20c491 !important;
}

.sergvpn-donate-link:hover {
    color: #f2f5f7 !important;
}


/* =========================================================
   SERGVPN CLEAN RESPONSIVE HEADER
   ========================================================= */

.header {
    position: relative;
    z-index: 1000;
}

.srg-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    flex-shrink: 0;
}


/* DONATE BUTTON */

.srg-donate-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 44px;

    padding: 0 17px;

    gap: 7px;

    border-radius: 999px;

    border:
        1px solid
        rgba(32,196,145,.35);

    background:
        rgba(24,183,131,.035);

    color: #20c491;

    text-decoration: none;

    white-space: nowrap;

    font-size: 13px;
    font-weight: 500;

    transition:
        background .2s ease,
        border-color .2s ease,
        color .2s ease;
}

.srg-donate-button:hover {
    color: #f3fffb;

    background:
        rgba(24,183,131,.10);

    border-color:
        rgba(32,196,145,.55);
}


/* MOBILE MENU IS COMPLETELY HIDDEN ON DESKTOP */

.srg-mobile-menu {
    display: none;
    position: relative;
}

.srg-mobile-menu > summary {
    list-style: none;
}

.srg-mobile-menu > summary::-webkit-details-marker {
    display: none;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {

    .header > .nav {
        display: none !important;
    }

    .srg-mobile-menu {
        display: block;
    }

    .srg-mobile-menu-button {
        width: 44px;
        height: 44px;

        padding: 0;

        display: flex;
        flex-direction: column;

        align-items: center;
        justify-content: center;

        gap: 5px;

        cursor: pointer;

        border-radius: 14px;

        border:
            1px solid
            rgba(255,255,255,.09);

        background:
            rgba(9,24,39,.88);
    }

    .srg-mobile-menu-button span {
        display: block;

        width: 18px;
        height: 2px;

        flex: 0 0 2px;

        border-radius: 10px;

        background: #dce6ed;
    }


    .srg-mobile-panel {
        position: absolute;

        top: calc(100% + 13px);
        right: 0;

        width: min(
            360px,
            calc(100vw - 32px)
        );

        padding: 16px;

        border-radius: 22px;

        background:
            rgba(5,18,28,.98);

        border:
            1px solid
            rgba(255,255,255,.08);

        box-shadow:
            0 25px 80px
            rgba(0,0,0,.45);

        backdrop-filter:
            blur(20px);
    }


    .srg-mobile-links {
        display: grid;
        gap: 3px;
    }

    .srg-mobile-links a {
        display: flex;
        align-items: center;

        min-height: 46px;

        padding: 0 14px;

        border-radius: 12px;

        color: #9ba8b3;

        text-decoration: none;

        font-size: 14px;
    }

    .srg-mobile-links a:hover {
        color: #fff;

        background:
            rgba(255,255,255,.045);
    }


    .srg-mobile-actions {
        display: grid;

        grid-template-columns:
            1fr 1fr;

        gap: 9px;

        margin-top: 12px;
        padding-top: 12px;

        border-top:
            1px solid
            rgba(255,255,255,.06);
    }


    .srg-mobile-donate,
    .srg-mobile-download {
        min-height: 46px;

        display: flex;
        align-items: center;
        justify-content: center;

        padding: 0 11px;

        border-radius: 13px;

        text-align: center;

        text-decoration: none;

        font-size: 12px;
        font-weight: 500;
    }


    .srg-mobile-donate {
        color: #22cc96;

        background:
            rgba(24,183,131,.07);

        border:
            1px solid
            rgba(32,196,145,.20);
    }


    .srg-mobile-download {
        color: #edf4fa;

        background:
            rgba(91,143,240,.13);

        border:
            1px solid
            rgba(91,143,240,.20);
    }


    /*
     * Hero уже был адаптивным в исходном сайте.
     * Здесь лишь гарантируем отсутствие горизонтального выезда.
     */

    .hero {
        max-width: 100%;
    }

    .hero-copy {
        min-width: 0;
    }

}


/* =========================================================
   PHONE
   ========================================================= */

@media (max-width: 700px) {

    .header {
        padding-left: 17px !important;
        padding-right: 17px !important;
    }


    /*
     * На телефоне в шапке оставляем только
     * SERGVPN + hamburger.
     */

    .srg-header-actions > .srg-donate-button,
    .srg-header-actions > .header-download {
        display: none !important;
    }


    .srg-mobile-actions {
        grid-template-columns: 1fr;
    }


    .srg-mobile-panel {
        position: fixed;

        top: 72px;
        left: 12px;
        right: 12px;

        width: auto;
    }


    .hero h1 {
        max-width: 100% !important;

        font-size:
            clamp(38px,12vw,55px) !important;

        line-height:
            1 !important;

        letter-spacing:
            .035em !important;
    }


    .hero p {
        max-width: 100% !important;

        font-size:
            15px !important;

        line-height:
            1.65 !important;
    }


    footer {
        flex-wrap: wrap;
    }

}


/* VERY SMALL PHONES */

@media (max-width: 420px) {

    .brand {
        font-size: 17px !important;
        letter-spacing: .20em !important;
    }

    .hero h1 {
        font-size:
            clamp(34px,11vw,46px) !important;
    }

}


/* GENERAL RESPONSIVE PROTECTION */

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

img,
video {
    max-width: 100%;
    height: auto;
}


/* =========================================================
   SERGVPN FINAL HEADER + LEFT MOBILE DRAWER
   ========================================================= */

:root {
    --srg-drawer-width: min(82vw, 320px);
}


/* ---------- DESKTOP ---------- */

.srg-menu-toggle {
    display: none !important;
}


.srg-header-actions {
    display: flex !important;
    align-items: center !important;

    gap: 11px !important;

    margin-left: auto !important;

    flex-shrink: 0 !important;
}


.srg-donate-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-height: 44px !important;

    padding: 0 18px !important;

    border-radius: 999px !important;

    color: #20c491 !important;

    background:
        rgba(24,183,131,.035) !important;

    border:
        1px solid
        rgba(32,196,145,.35) !important;

    text-decoration: none !important;

    white-space: nowrap !important;

    font-size: 13px !important;
    font-weight: 500 !important;
}


.srg-donate-button:hover {
    color: #f2fffb !important;

    background:
        rgba(24,183,131,.10) !important;
}


/*
 * Drawer полностью спрятан на desktop.
 */

.srg-mobile-drawer,
.srg-drawer-overlay {
    display: none;
}


/* =========================================================
   TABLET + MOBILE
   ========================================================= */

@media (max-width: 980px) {

    body {
        overflow-x: hidden;
    }


    /*
     * Основное desktop-меню скрывается.
     */

    .header > .nav {
        display: none !important;
    }


    /*
     * Desktop-кнопки тоже уходят в drawer.
     */

    .srg-header-actions {
        display: none !important;
    }


    /*
     * Hamburger слева.
     */

    .srg-menu-toggle {
        display: flex !important;

        width: 43px !important;
        height: 43px !important;

        flex: 0 0 43px !important;

        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;

        gap: 5px !important;

        margin-right: 5px !important;

        padding: 0 !important;

        border: 0 !important;

        border-radius: 13px !important;

        background:
            rgba(9,27,38,.82) !important;

        cursor: pointer !important;
    }


    .srg-menu-toggle span {
        display: block !important;

        width: 20px !important;
        height: 2px !important;

        min-height: 2px !important;

        border-radius: 5px !important;

        background:
            #aab8c4 !important;

        transition:
            transform .25s ease,
            opacity .25s ease,
            background .25s ease;
    }


    .srg-menu-toggle:hover span {
        background:
            #20c491 !important;
    }


    /*
     * LEFT DRAWER
     */

    .srg-mobile-drawer {
        display: flex;

        position: fixed;

        z-index: 5000;

        top: 0;
        left: 0;
        bottom: 0;

        width: var(--srg-drawer-width);

        flex-direction: column;

        padding:
            24px 20px;

        background:
            linear-gradient(
                180deg,
                #071722 0%,
                #041019 100%
            );

        border-right:
            1px solid
            rgba(32,196,145,.11);

        box-shadow:
            25px 0 70px
            rgba(0,0,0,.35);

        transform:
            translateX(-105%);

        transition:
            transform .28s
            cubic-bezier(.22,.61,.36,1);

        overflow-y: auto;
    }


    body.srg-drawer-open
    .srg-mobile-drawer {

        transform:
            translateX(0);
    }


    /*
     * Затемнение справа от меню.
     */

    .srg-drawer-overlay {
        display: block;

        position: fixed;

        z-index: 4900;

        inset: 0;

        background:
            rgba(0,8,14,.48);

        opacity: 0;

        visibility: hidden;

        transition:
            opacity .28s ease,
            visibility .28s ease;
    }


    body.srg-drawer-open
    .srg-drawer-overlay {

        opacity: 1;

        visibility: visible;
    }


    /*
     * Страница немного сдвигается вправо.
     */

    .header,
    main,
    footer {

        transition:
            transform .28s
            cubic-bezier(.22,.61,.36,1);
    }


    body.srg-drawer-open .header,
    body.srg-drawer-open main,
    body.srg-drawer-open footer {

        transform:
            translateX(
                var(--srg-drawer-width)
            );
    }


    body.srg-drawer-open {
        overflow: hidden;
    }


    /* HEADER DRAWER */

    .srg-drawer-head {
        display: flex;

        align-items: center;
        justify-content: space-between;

        min-height: 47px;

        margin-bottom: 28px;
    }


    .srg-drawer-brand {
        color: #f1f5f7;

        font-size: 18px;

        font-weight: 650;

        letter-spacing: .23em;
    }


    .srg-drawer-close {
        position: relative;

        width: 40px;
        height: 40px;

        padding: 0;

        border: 0;

        border-radius: 12px;

        background:
            rgba(255,255,255,.035);

        cursor: pointer;
    }


    .srg-drawer-close span {
        position: absolute;

        left: 11px;
        top: 19px;

        width: 18px;
        height: 2px;

        border-radius: 3px;

        background: #84939e;
    }


    .srg-drawer-close span:first-child {
        transform: rotate(45deg);
    }


    .srg-drawer-close span:last-child {
        transform: rotate(-45deg);
    }


    /* NAVIGATION */

    .srg-drawer-nav {
        display: grid;

        gap: 5px;
    }


    .srg-drawer-nav a {
        position: relative;

        display: flex;

        align-items: center;

        min-height: 49px;

        padding:
            0 16px;

        border-radius: 13px;

        text-decoration: none;

        color: #8d9ba6;

        font-size: 15px;

        transition:
            color .17s ease,
            background .17s ease,
            padding-left .17s ease;
    }


    .srg-drawer-nav a::before {
        content: "";

        width: 5px;
        height: 5px;

        margin-right: 12px;

        border-radius: 50%;

        background:
            rgba(32,196,145,.30);

        transition:
            background .17s ease,
            box-shadow .17s ease;
    }


    .srg-drawer-nav a:hover {
        color: #eef7f4;

        padding-left: 20px;

        background:
            rgba(24,183,131,.055);
    }


    .srg-drawer-nav a:hover::before {
        background: #20c491;

        box-shadow:
            0 0 10px
            rgba(32,196,145,.45);
    }


    /* ACTIONS AT BOTTOM */

    .srg-drawer-actions {
        display: grid;

        gap: 10px;

        margin-top: auto;

        padding-top: 28px;
    }


    .srg-drawer-donate,
    .srg-drawer-download {
        min-height: 49px;

        display: flex;

        align-items: center;
        justify-content: center;

        border-radius: 14px;

        text-align: center;

        text-decoration: none;

        font-size: 13px;
        font-weight: 550;
    }


    .srg-drawer-donate {
        color: #22cc96;

        background:
            rgba(24,183,131,.065);

        border:
            1px solid
            rgba(32,196,145,.22);
    }


    .srg-drawer-download {
        color: #edf4f7;

        background:
            rgba(91,143,240,.12);

        border:
            1px solid
            rgba(91,143,240,.19);
    }


    /*
     * Tablet hero.
     */

    .hero {
        grid-template-columns:
            1fr !important;

        min-height:
            auto !important;

        gap:
            30px !important;

        padding-top:
            55px !important;

        padding-bottom:
            55px !important;
    }


    .hero-copy {
        max-width:
            760px !important;

        min-width:
            0 !important;
    }


    .hero-visual {
        width:
            min(100%,520px) !important;

        margin:
            0 auto !important;
    }

}


/* =========================================================
   MOBILE PHONE
   ========================================================= */

@media (max-width: 640px) {

    :root {
        --srg-drawer-width:
            min(84vw, 300px);
    }


    .header {
        padding-left:
            15px !important;

        padding-right:
            15px !important;
    }


    .srg-menu-toggle {
        width:
            40px !important;

        height:
            40px !important;

        flex-basis:
            40px !important;
    }


    .brand {
        font-size:
            17px !important;
    }


    .hero {
        padding-top:
            42px !important;

        padding-bottom:
            48px !important;
    }


    .hero-copy {
        padding-left:
            0 !important;
    }


    .hero h1 {
        max-width:
            100% !important;

        font-size:
            clamp(
                38px,
                12vw,
                54px
            ) !important;

        line-height:
            .99 !important;

        letter-spacing:
            .035em !important;
    }


    .hero p {
        max-width:
            100% !important;

        font-size:
            15px !important;

        line-height:
            1.65 !important;
    }


    footer {
        flex-direction:
            column !important;

        align-items:
            flex-start !important;

        gap:
            17px !important;
    }

}


/* =========================================================
   SERGVPN FINAL MOBILE DRAWER OVERRIDE
   ========================================================= */

/*
 * На desktop drawer и hamburger всегда скрыты.
 */

.srg-menu-toggle {
    display: none !important;
}

.srg-mobile-drawer {
    display: none !important;
}

.srg-drawer-overlay {
    display: none !important;
}


/* =========================================================
   TABLET + MOBILE
   ========================================================= */

@media screen and (max-width: 980px) {

    /*
     * Desktop navigation/actions disappear.
     */

    header.header > nav.nav {
        display: none !important;
    }

    header.header > .srg-header-actions {
        display: none !important;
    }


    /*
     * Header layout:
     * hamburger LEFT, then SERGVPN.
     */

    header.header {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;

        gap: 12px !important;

        padding-left: 15px !important;
        padding-right: 15px !important;
    }


    /*
     * Hamburger: three horizontal lines.
     */

    header.header > .srg-menu-toggle {
        display: flex !important;

        width: 42px !important;
        height: 42px !important;

        min-width: 42px !important;
        min-height: 42px !important;

        flex: 0 0 42px !important;

        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;

        gap: 5px !important;

        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;
        outline: 0 !important;

        border-radius: 12px !important;

        background:
            rgba(9,27,38,.72) !important;

        appearance: none !important;
        -webkit-appearance: none !important;

        cursor: pointer !important;
    }


    header.header > .srg-menu-toggle span {
        display: block !important;

        position: static !important;

        width: 20px !important;
        height: 2px !important;

        min-width: 20px !important;
        min-height: 2px !important;

        max-width: 20px !important;
        max-height: 2px !important;

        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;

        border-radius: 4px !important;

        background: #a9b9c4 !important;

        transform: none !important;
    }


    /*
     * Drawer exists, but is OUTSIDE screen until opened.
     */

    body > .srg-mobile-drawer {
        display: flex !important;

        position: fixed !important;

        z-index: 10000 !important;

        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;

        width: min(82vw, 310px) !important;
        height: 100dvh !important;

        flex-direction: column !important;

        margin: 0 !important;
        padding: 22px 18px !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;

        background:
            linear-gradient(
                180deg,
                #071923 0%,
                #041018 100%
            ) !important;

        border: 0 !important;

        border-right:
            1px solid rgba(32,196,145,.13) !important;

        box-shadow:
            20px 0 60px rgba(0,0,0,.45) !important;

        transform:
            translate3d(-105%,0,0) !important;

        visibility: hidden !important;

        transition:
            transform .28s ease,
            visibility .28s ease !important;
    }


    /*
     * Only when body gets this class from JS,
     * menu slides in.
     */

    body.srg-drawer-open > .srg-mobile-drawer {
        transform:
            translate3d(0,0,0) !important;

        visibility: visible !important;
    }


    /*
     * Overlay.
     */

    body > .srg-drawer-overlay {
        display: block !important;

        position: fixed !important;

        z-index: 9999 !important;

        inset: 0 !important;

        margin: 0 !important;

        background:
            rgba(0,7,12,.50) !important;

        opacity: 0 !important;
        visibility: hidden !important;

        pointer-events: none !important;

        transition:
            opacity .28s ease,
            visibility .28s ease !important;
    }


    body.srg-drawer-open > .srg-drawer-overlay {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }


    /*
     * Drawer title.
     */

    .srg-drawer-head {
        display: flex !important;

        align-items: center !important;
        justify-content: space-between !important;

        width: 100% !important;

        margin: 0 0 25px !important;
        padding: 0 !important;
    }


    .srg-drawer-brand {
        display: block !important;

        color: #f0f5f7 !important;

        font-size: 17px !important;
        font-weight: 650 !important;

        letter-spacing: .20em !important;

        white-space: nowrap !important;
    }


    /*
     * Close X.
     */

    .srg-drawer-close {
        display: block !important;

        position: relative !important;

        width: 38px !important;
        height: 38px !important;

        min-width: 38px !important;

        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;

        border-radius: 11px !important;

        background:
            rgba(255,255,255,.04) !important;

        cursor: pointer !important;
    }


    .srg-drawer-close span {
        display: block !important;

        position: absolute !important;

        left: 10px !important;
        top: 18px !important;

        width: 18px !important;
        height: 2px !important;

        margin: 0 !important;

        background: #8797a2 !important;

        border-radius: 3px !important;
    }


    .srg-drawer-close span:first-child {
        transform: rotate(45deg) !important;
    }

    .srg-drawer-close span:last-child {
        transform: rotate(-45deg) !important;
    }


    /*
     * Navigation STRICTLY one link per row.
     */

    .srg-drawer-nav {
        display: flex !important;

        width: 100% !important;

        flex-direction: column !important;

        align-items: stretch !important;

        gap: 5px !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    .srg-drawer-nav a {
        display: flex !important;

        width: 100% !important;
        min-height: 48px !important;

        align-items: center !important;

        box-sizing: border-box !important;

        margin: 0 !important;
        padding: 0 15px !important;

        border-radius: 12px !important;

        color: #93a2ad !important;

        background:
            transparent !important;

        text-decoration: none !important;

        font-size: 15px !important;
        font-weight: 400 !important;

        line-height: 1 !important;
    }


    .srg-drawer-nav a::before {
        content: "" !important;

        display: block !important;

        width: 5px !important;
        height: 5px !important;

        min-width: 5px !important;

        margin-right: 12px !important;

        border-radius: 50% !important;

        background:
            rgba(32,196,145,.38) !important;
    }


    .srg-drawer-nav a:hover,
    .srg-drawer-nav a:active {

        color: #effaf7 !important;

        background:
            rgba(24,183,131,.07) !important;
    }


    /*
     * Donate and Download at drawer bottom.
     */

    .srg-drawer-actions {
        display: flex !important;

        width: 100% !important;

        flex-direction: column !important;

        gap: 9px !important;

        margin-top: auto !important;

        padding-top: 25px !important;
    }


    .srg-drawer-donate,
    .srg-drawer-download {

        display: flex !important;

        width: 100% !important;
        min-height: 48px !important;

        align-items: center !important;
        justify-content: center !important;

        box-sizing: border-box !important;

        margin: 0 !important;
        padding: 0 12px !important;

        border-radius: 13px !important;

        text-decoration: none !important;

        text-align: center !important;

        font-size: 13px !important;
        font-weight: 500 !important;
    }


    .srg-drawer-donate {
        color: #25cf99 !important;

        background:
            rgba(24,183,131,.07) !important;

        border:
            1px solid rgba(32,196,145,.20) !important;
    }


    .srg-drawer-download {
        color: #eef5f8 !important;

        background:
            rgba(91,143,240,.12) !important;

        border:
            1px solid rgba(91,143,240,.18) !important;
    }


    /*
     * Shift BODY content a little to the right
     * while drawer is opened.
     */

    header.header,
    main,
    footer {

        transition:
            transform .28s ease !important;
    }


    body.srg-drawer-open header.header,
    body.srg-drawer-open main,
    body.srg-drawer-open footer {

        transform:
            translateX(55px) !important;
    }


    body.srg-drawer-open {
        overflow: hidden !important;
    }

}


/* =========================================================
   PHONE
   ========================================================= */

@media screen and (max-width: 640px) {

    header.header .brand {
        margin: 0 !important;

        font-size: 17px !important;

        letter-spacing:
            .18em !important;
    }


    .hero {
        padding-top:
            42px !important;
    }

}


/* =========================================================
   SERGVPN DOWNLOAD PAGE
   ========================================================= */

.download-page {
    padding-bottom: 40px;
}


/* HERO */

.download-hero {

    min-height: 670px;

    display: grid;

    grid-template-columns:
        minmax(0,1.05fr)
        minmax(380px,.95fr);

    gap: 60px;

    align-items: center;

    padding:
        80px 0
        70px;
}


.download-hero-copy {
    min-width: 0;
}


.download-hero h1 {

    margin:
        18px 0
        24px;

    font-size:
        clamp(62px,7vw,96px);

    line-height: .92;

    letter-spacing: -.045em;

    font-weight: 500;

    color: #edf3f7;
}


.download-hero h1 span {

    background:
        linear-gradient(
            95deg,
            #78a7ff,
            #e8f4f4 48%,
            #49d5ae
        );

    -webkit-background-clip: text;
    color: transparent;
}


.download-lead {

    max-width: 630px;

    margin: 0;

    color: #99a7b2;

    font-size: 18px;

    line-height: 1.75;
}


.download-version-row {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 13px;

    margin-top: 34px;
}


.download-version-badge {

    display: flex;

    align-items: center;

    gap: 13px;

    min-height: 62px;

    padding:
        10px 20px;

    border-radius: 18px;

    background:
        rgba(8,27,39,.80);

    border:
        1px solid
        rgba(32,196,145,.13);
}


.download-version-dot {

    width: 9px;
    height: 9px;

    border-radius: 50%;

    background: #20c491;

    box-shadow:
        0 0 14px
        rgba(32,196,145,.55);
}


.download-version-badge small {

    display: block;

    margin-bottom: 3px;

    color: #637682;

    font-size: 9px;

    letter-spacing: .14em;
}


.download-version-badge strong {

    display: block;

    color: #e8eff3;

    font-size: 16px;
}


.download-platform {

    display: flex;

    align-items: center;

    min-height: 62px;

    padding:
        0 22px;

    border-radius: 18px;

    color: #8496a2;

    background:
        rgba(9,24,39,.42);

    border:
        1px solid
        rgba(255,255,255,.055);

    font-size: 14px;
}


/* PHONE VISUAL */

.download-hero-panel {

    position: relative;

    display: grid;

    place-items: center;

    min-height: 540px;
}


.download-hero-panel::before {

    content: "";

    position: absolute;

    width: 470px;
    height: 470px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(24,183,131,.14),
            rgba(91,143,240,.07) 46%,
            transparent 70%
        );
}


.download-phone {

    position: relative;

    z-index: 2;

    width: 260px;
    height: 510px;

    padding: 9px;

    border-radius: 42px;

    background:
        linear-gradient(
            145deg,
            #253846,
            #07131c 38%,
            #142632
        );

    box-shadow:
        0 30px 80px
        rgba(0,0,0,.38),
        0 0 55px
        rgba(32,196,145,.08);

    transform:
        rotate(-4deg);
}


.download-phone-screen {

    position: relative;

    width: 100%;
    height: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    border-radius: 34px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 38%,
            rgba(17,70,73,.78),
            #06151f 48%,
            #041019 100%
        );

    border:
        1px solid
        rgba(255,255,255,.055);
}


.download-phone-camera {

    position: absolute;

    z-index: 5;

    top: 18px;
    left: 50%;

    width: 9px;
    height: 9px;

    transform:
        translateX(-50%);

    border-radius: 50%;

    background: #02080c;

    border:
        1px solid
        rgba(255,255,255,.12);
}


.download-phone-ring {

    width: 150px;
    height: 150px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    color: #dffaf2;

    background:
        rgba(25,183,132,.75);

    border:
        2px solid
        rgba(57,221,172,.32);

    box-shadow:
        0 0 0 15px
        rgba(24,183,131,.055),
        0 0 0 32px
        rgba(32,196,145,.025),
        0 0 50px
        rgba(32,196,145,.20);
}


.download-phone-ring svg {

    width: 70px;
    height: 70px;

    fill: none;

    stroke: currentColor;

    stroke-width: 2.7;

    stroke-linecap: round;
    stroke-linejoin: round;
}


.download-phone-status {

    margin-top: 65px;

    color: #8598a4;

    font-size: 11px;

    letter-spacing: .20em;
}


.download-phone-line {

    width: 105px;
    height: 4px;

    margin-top: 12px;

    border-radius: 20px;

    background:
        rgba(32,196,145,.45);
}


.download-floating-card {

    position: absolute;

    z-index: 5;

    right: 0;
    bottom: 80px;

    min-width: 205px;

    display: flex;

    align-items: center;

    gap: 13px;

    padding: 17px;

    border-radius: 19px;

    background:
        rgba(8,24,36,.92);

    border:
        1px solid
        rgba(91,143,240,.16);

    box-shadow:
        0 18px 50px
        rgba(0,0,0,.25);
}


.download-floating-icon {

    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    border-radius: 13px;

    color: #29d3a0;

    background:
        rgba(24,183,131,.10);

    font-size: 21px;
}


.download-floating-card small {

    display: block;

    margin-bottom: 3px;

    color: #647682;

    font-size: 9px;

    letter-spacing: .14em;
}


.download-floating-card strong {

    font-size: 13px;

    color: #dfe8ed;
}


/* APK PANEL */

.apk-panel {

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 35px;

    margin:
        20px 0
        110px;

    padding:
        34px 38px;

    border-radius: 30px;

    background:
        linear-gradient(
            135deg,
            rgba(9,31,42,.96),
            rgba(7,19,30,.94)
        );

    border:
        1px solid
        rgba(32,196,145,.12);
}


.apk-main {

    display: flex;

    align-items: center;

    gap: 25px;

    min-width: 0;
}


.apk-icon {

    flex:
        0 0 68px;

    width: 68px;
    height: 68px;

    display: grid;
    place-items: center;

    border-radius: 21px;

    color: #27cf9a;

    background:
        rgba(24,183,131,.075);

    border:
        1px solid
        rgba(32,196,145,.15);
}


.apk-icon svg {

    width: 33px;
    height: 33px;

    fill: none;

    stroke: currentColor;

    stroke-width: 3;

    stroke-linecap: round;
    stroke-linejoin: round;
}


.apk-info h2 {

    margin:
        8px 0
        8px;

    font-size: 25px;

    font-weight: 520;
}


.apk-info p {

    max-width: 640px;

    margin: 0;

    color: #84929d;

    font-size: 14px;

    line-height: 1.6;
}


.apk-action {

    flex-shrink: 0;

    display: grid;

    justify-items: center;

    gap: 8px;
}


.apk-button-disabled {

    min-width: 155px;
    min-height: 50px;

    display: flex;

    align-items: center;
    justify-content: center;

    padding:
        0 25px;

    border-radius: 15px;

    color: #74838e;

    background:
        rgba(255,255,255,.035);

    border:
        1px solid
        rgba(255,255,255,.065);

    cursor: not-allowed;

    font-size: 14px;
}


.apk-action small {

    color: #596a76;

    font-size: 10px;
}


/* INSTALL STEPS */

.download-section {

    margin-bottom: 110px;
}


.download-section-heading {

    max-width: 670px;

    margin-bottom: 38px;
}


.download-section-heading h2,
.download-requirements h2 {

    margin:
        14px 0
        14px;

    font-size:
        clamp(37px,4vw,54px);

    line-height: 1.05;

    font-weight: 500;

    letter-spacing: -.03em;
}


.download-section-heading p {

    margin: 0;

    color: #84929d;

    line-height: 1.65;
}


.download-steps {

    display: grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap: 16px;
}


.download-step {

    min-height: 230px;

    padding: 29px;

    border-radius: 26px;

    background:
        rgba(8,24,36,.68);

    border:
        1px solid
        rgba(255,255,255,.055);
}


.download-step-number {

    display: block;

    margin-bottom: 47px;

    color: #20c491;

    font-size: 11px;

    letter-spacing: .16em;
}


.download-step h3 {

    margin:
        0 0
        11px;

    font-size: 19px;

    font-weight: 520;
}


.download-step p {

    margin: 0;

    color: #7f8d98;

    font-size: 14px;

    line-height: 1.65;
}


/* REQUIREMENTS */

.download-requirements {

    display: grid;

    grid-template-columns:
        .75fr
        1.25fr;

    gap: 70px;

    margin-bottom: 100px;
}


.requirements-list {

    display: grid;

    gap: 12px;
}


.requirement-item {

    display: grid;

    grid-template-columns:
        42px 1fr;

    gap: 17px;

    align-items: start;

    padding:
        21px 23px;

    border-radius: 20px;

    background:
        rgba(8,24,36,.58);

    border:
        1px solid
        rgba(255,255,255,.045);
}


.requirement-check {

    width: 36px;
    height: 36px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    color: #2ad39f;

    background:
        rgba(24,183,131,.08);

    border:
        1px solid
        rgba(32,196,145,.14);
}


.requirement-item strong {

    display: block;

    margin-bottom: 5px;

    color: #dde6eb;

    font-size: 15px;
}


.requirement-item p {

    margin: 0;

    color: #778691;

    font-size: 13px;

    line-height: 1.55;
}


/* SECURITY NOTE */

.download-security-note {

    display: flex;

    align-items: center;

    gap: 20px;

    margin-bottom: 80px;

    padding:
        24px 27px;

    border-radius: 23px;

    background:
        rgba(24,183,131,.04);

    border:
        1px solid
        rgba(32,196,145,.10);
}


.security-note-icon {

    flex:
        0 0 48px;

    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    color: #29d09c;

    border-radius: 15px;

    background:
        rgba(24,183,131,.07);
}


.security-note-icon svg {

    width: 27px;
    height: 27px;

    fill: none;

    stroke: currentColor;

    stroke-width: 2.7;

    stroke-linecap: round;
    stroke-linejoin: round;
}


.download-security-note strong {

    display: block;

    margin-bottom: 5px;

    font-size: 14px;
}


.download-security-note p {

    margin: 0;

    color: #7e8c97;

    font-size: 13px;

    line-height: 1.55;
}


/* =========================================================
   DOWNLOAD TABLET
   ========================================================= */

@media screen and (max-width: 980px) {

    .download-hero {

        min-height: auto;

        grid-template-columns:
            1fr;

        gap: 45px;

        padding-top: 65px;
    }


    .download-hero-copy {

        max-width: 720px;
    }


    .download-hero-panel {

        min-height: 520px;
    }


    .download-floating-card {

        right:
            max(10%,45px);
    }


    .download-steps {

        grid-template-columns: 1fr;
    }


    .download-step {

        min-height: 0;
    }


    .download-step-number {

        margin-bottom: 25px;
    }


    .download-requirements {

        grid-template-columns:
            1fr;

        gap: 30px;
    }

}


/* =========================================================
   DOWNLOAD MOBILE
   ========================================================= */

@media screen and (max-width: 640px) {

    .download-hero {

        padding:
            48px 0
            45px;

        gap: 30px;
    }


    .download-hero h1 {

        font-size:
            clamp(48px,15vw,68px);

        line-height: .95;
    }


    .download-lead {

        font-size: 15px;
    }


    .download-version-row {

        align-items: stretch;

        flex-direction: column;
    }


    .download-version-badge,
    .download-platform {

        width: 100%;

        box-sizing: border-box;
    }


    .download-hero-panel {

        min-height: 430px;
    }


    .download-phone {

        width: 205px;
        height: 405px;

        border-radius: 35px;
    }


    .download-phone-screen {

        border-radius: 28px;
    }


    .download-phone-ring {

        width: 120px;
        height: 120px;
    }


    .download-phone-ring svg {

        width: 56px;
        height: 56px;
    }


    .download-floating-card {

        right: 4px;
        bottom: 35px;

        min-width: 175px;

        padding: 13px;
    }


    .apk-panel {

        align-items: stretch;

        flex-direction: column;

        padding:
            26px 22px;

        margin-bottom: 80px;
    }


    .apk-main {

        align-items: flex-start;

        flex-direction: column;
    }


    .apk-action {

        justify-items: stretch;
    }


    .apk-button-disabled {

        width: 100%;

        box-sizing: border-box;
    }


    .download-section {

        margin-bottom: 80px;
    }


    .download-step {

        padding:
            25px 22px;
    }


    .download-requirements {

        margin-bottom: 75px;
    }


    .requirement-item {

        grid-template-columns:
            37px 1fr;

        padding:
            19px;
    }


    .download-security-note {

        align-items: flex-start;

        padding:
            21px;
    }

}


/* =========================================================
   SERGVPN DOWNLOAD CLEAN PAGE
   namespace: srgdl-
   ========================================================= */

.srgdl-page {

    width: min(1180px, calc(100% - 48px));

    margin: 0 auto;

    padding:
        105px 0
        60px;
}


/* HERO */

.srgdl-hero {

    width: 100%;

    max-width: 850px;

    margin:
        0 0
        90px;

    padding: 0;
}


.srgdl-kicker {

    color: #758792;

    font-size: 11px;

    font-weight: 500;

    letter-spacing: .28em;

    text-transform: uppercase;
}


.srgdl-hero h1 {

    margin:
        22px 0
        27px;

    padding: 0;

    font-size:
        clamp(62px,8vw,104px);

    font-weight: 500;

    line-height: .90;

    letter-spacing: .025em;

    color: #edf3f6;
}


.srgdl-hero h1 span {

    display: block;

    background:
        linear-gradient(
            90deg,
            #74a6ff 0%,
            #e7f0f2 48%,
            #53d9b3 100%
        );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}


.srgdl-intro {

    max-width: 700px;

    margin: 0;

    color: #94a3ad;

    font-size: 18px;

    line-height: 1.7;
}


.srgdl-meta {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 36px;
}


.srgdl-meta-item {

    min-width: 135px;

    padding:
        15px 18px;

    border-radius: 17px;

    background:
        rgba(8,25,37,.70);

    border:
        1px solid
        rgba(255,255,255,.055);
}


.srgdl-meta-item small {

    display: block;

    margin-bottom: 5px;

    color: #5f707c;

    font-size: 9px;

    letter-spacing: .16em;
}


.srgdl-meta-item strong {

    color: #e4ecef;

    font-size: 15px;

    font-weight: 500;
}


.srgdl-status {

    border-color:
        rgba(32,196,145,.12);
}


.srgdl-status strong {

    color: #20c491;
}


/* APK */

.srgdl-apk-card {

    width: 100%;

    box-sizing: border-box;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 40px;

    margin:
        0 0
        100px;

    padding:
        34px 38px;

    border-radius: 28px;

    background:
        linear-gradient(
            135deg,
            rgba(8,29,40,.92),
            rgba(6,19,29,.92)
        );

    border:
        1px solid
        rgba(32,196,145,.10);
}


.srgdl-apk-copy {

    min-width: 0;

    max-width: 680px;
}


.srgdl-apk-copy h2 {

    margin:
        10px 0
        10px;

    color: #eaf0f3;

    font-size: 27px;

    font-weight: 500;
}


.srgdl-apk-copy p {

    margin: 0;

    color: #81909a;

    font-size: 14px;

    line-height: 1.65;
}


.srgdl-apk-action {

    flex-shrink: 0;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 8px;
}


.srgdl-disabled-button {

    min-width: 155px;

    min-height: 50px;

    display: flex;

    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    padding:
        0 24px;

    border-radius: 15px;

    color: #75858e;

    background:
        rgba(255,255,255,.035);

    border:
        1px solid
        rgba(255,255,255,.065);

    font-size: 14px;
}


.srgdl-apk-action small {

    color: #52636f;

    font-size: 10px;
}


/* BLOCKS */

.srgdl-block {

    margin:
        0 0
        100px;

    padding: 0;
}


.srgdl-heading {

    max-width: 650px;

    margin-bottom: 32px;
}


.srgdl-heading h2 {

    margin:
        13px 0
        0;

    color: #e9eff2;

    font-size:
        clamp(37px,4vw,52px);

    font-weight: 500;

    line-height: 1.05;

    letter-spacing: -.025em;
}


.srgdl-grid {

    display: grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap: 14px;
}


.srgdl-card {

    min-height: 205px;

    box-sizing: border-box;

    padding: 27px;

    border-radius: 24px;

    background:
        rgba(8,24,35,.62);

    border:
        1px solid
        rgba(255,255,255,.05);
}


.srgdl-number {

    display: block;

    margin-bottom: 42px;

    color: #20c491;

    font-size: 10px;

    letter-spacing: .16em;
}


.srgdl-card h3 {

    margin:
        0 0
        9px;

    color: #e0e8ec;

    font-size: 18px;

    font-weight: 500;
}


.srgdl-card p {

    margin: 0;

    color: #7e8d97;

    font-size: 13px;

    line-height: 1.65;
}


/* REQUIREMENTS */

.srgdl-requirements {

    display: grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap: 13px;
}


.srgdl-requirement {

    display: grid;

    grid-template-columns:
        16px minmax(0,1fr);

    gap: 14px;

    padding:
        21px;

    border-radius: 20px;

    background:
        rgba(8,24,35,.55);

    border:
        1px solid
        rgba(255,255,255,.045);
}


.srgdl-requirement > span {

    width: 7px;
    height: 7px;

    margin-top: 7px;

    border-radius: 50%;

    background: #20c491;

    box-shadow:
        0 0 10px
        rgba(32,196,145,.30);
}


.srgdl-requirement strong {

    display: block;

    margin-bottom: 6px;

    color: #dfe7eb;

    font-size: 14px;

    font-weight: 500;
}


.srgdl-requirement p {

    margin: 0;

    color: #74848f;

    font-size: 13px;

    line-height: 1.55;
}


/* NOTE */

.srgdl-note {

    display: grid;

    grid-template-columns:
        42px minmax(0,1fr);

    gap: 17px;

    align-items: start;

    margin:
        0 0
        50px;

    padding:
        22px 24px;

    border-radius: 20px;

    background:
        rgba(24,183,131,.035);

    border:
        1px solid
        rgba(32,196,145,.09);
}


.srgdl-note-mark {

    width: 38px;
    height: 38px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    color: #20c491;

    background:
        rgba(24,183,131,.08);

    font-size: 17px;

    font-weight: 600;
}


.srgdl-note strong {

    display: block;

    margin-bottom: 5px;

    color: #dfe8eb;

    font-size: 14px;

    font-weight: 500;
}


.srgdl-note p {

    margin: 0;

    color: #75858f;

    font-size: 13px;

    line-height: 1.55;
}


/* =========================================================
   TABLET
   ========================================================= */

@media screen and (max-width: 980px) {

    .srgdl-page {

        width:
            min(100% - 40px, 820px);

        padding-top:
            75px;
    }


    .srgdl-hero {

        margin-bottom:
            65px;
    }


    .srgdl-apk-card {

        margin-bottom:
            75px;
    }


    .srgdl-grid,
    .srgdl-requirements {

        grid-template-columns:
            1fr;
    }


    .srgdl-card {

        min-height: 0;
    }


    .srgdl-number {

        margin-bottom:
            24px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media screen and (max-width: 640px) {

    .srgdl-page {

        width:
            calc(100% - 30px);

        padding:
            50px 0
            35px;
    }


    .srgdl-hero {

        margin-bottom:
            50px;
    }


    .srgdl-hero h1 {

        margin-top:
            18px;

        font-size:
            clamp(49px,15vw,67px);

        line-height:
            .92;

        letter-spacing:
            .015em;
    }


    .srgdl-intro {

        font-size:
            15px;

        line-height:
            1.65;
    }


    .srgdl-meta {

        display: grid;

        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap: 9px;

        margin-top:
            27px;
    }


    .srgdl-meta-item {

        min-width: 0;

        box-sizing: border-box;

        padding:
            14px;
    }


    .srgdl-status {

        grid-column:
            1 / -1;
    }


    .srgdl-apk-card {

        flex-direction:
            column;

        align-items:
            stretch;

        gap: 25px;

        margin-bottom:
            65px;

        padding:
            25px 21px;

        border-radius:
            23px;
    }


    .srgdl-apk-copy h2 {

        font-size:
            23px;
    }


    .srgdl-apk-action {

        align-items:
            stretch;
    }


    .srgdl-disabled-button {

        width: 100%;
    }


    .srgdl-block {

        margin-bottom:
            65px;
    }


    .srgdl-heading {

        margin-bottom:
            22px;
    }


    .srgdl-heading h2 {

        font-size:
            34px;
    }


    .srgdl-card {

        padding:
            23px 20px;

        border-radius:
            20px;
    }


    .srgdl-requirement {

        padding:
            19px;
    }


    .srgdl-note {

        padding:
            19px;

        grid-template-columns:
            36px minmax(0,1fr);
    }


    .srgdl-note-mark {

        width: 34px;
        height: 34px;
    }

}


/* =========================================================
   SERGVPN DOWNLOAD BLUE SHIELD
   ========================================================= */

.srgdl-hero {
    position: relative;
    padding-right: 190px;
}


.srgdl-shield-mark {

    position: absolute;

    top: 8px;
    right: 0;

    width: 145px;
    height: 145px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(56,198,255,.15) 0%,
            rgba(77,139,255,.08) 48%,
            rgba(5,20,31,0) 72%
        );
}


.srgdl-shield-mark::before {

    content: "";

    position: absolute;

    inset: 4px;

    border-radius: 50%;

    border:
        1px dashed
        rgba(73,184,255,.28);
}


.srgdl-shield-mark::after {

    content: "";

    position: absolute;

    inset: 16px;

    border-radius: 50%;

    border:
        1px solid
        rgba(84,205,255,.16);
}


.srgdl-shield-ring {

    position: relative;

    z-index: 2;

    width: 108px;
    height: 108px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            rgba(59,132,255,.78),
            rgba(45,210,225,.72)
        );

    box-shadow:
        0 0 40px
        rgba(54,175,255,.19),
        inset 0 0 26px
        rgba(255,255,255,.06);
}


.srgdl-shield-ring svg {

    width: 63px;
    height: 63px;

    overflow: visible;

    fill:
        rgba(226,248,255,.15);

    stroke:
        #e8fbff;

    stroke-width: 2.4;

    stroke-linecap: round;
    stroke-linejoin: round;

    filter:
        drop-shadow(
            0 0 8px
            rgba(158,228,255,.22)
        );
}


.srgdl-shield-ring
.srgdl-shield-line {

    stroke:
        rgba(181,238,255,.75);
}


.srgdl-shield-status {

    position: absolute;

    z-index: 4;

    right: 9px;
    bottom: 14px;

    width: 36px;
    height: 36px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    color: #0b6f99;

    background: #edfaff;

    border:
        3px solid
        #071923;

    font-size: 17px;
    font-weight: 700;

    box-shadow:
        0 7px 20px
        rgba(0,0,0,.24);
}


/* TABLET */

@media screen and (max-width: 980px) {

    .srgdl-hero {
        padding-right: 155px;
    }

    .srgdl-shield-mark {

        width: 120px;
        height: 120px;

        top: 5px;
    }

    .srgdl-shield-ring {

        width: 90px;
        height: 90px;
    }

    .srgdl-shield-ring svg {

        width: 52px;
        height: 52px;
    }

}


/* MOBILE */

@media screen and (max-width: 640px) {

    .srgdl-hero {
        padding-right: 0;
    }


    .srgdl-shield-mark {

        position: relative;

        top: auto;
        right: auto;

        width: 105px;
        height: 105px;

        margin:
            27px 0
            4px;
    }


    .srgdl-shield-ring {

        width: 78px;
        height: 78px;
    }


    .srgdl-shield-ring svg {

        width: 45px;
        height: 45px;
    }


    .srgdl-shield-status {

        width: 30px;
        height: 30px;

        right: 3px;
        bottom: 9px;

        font-size: 14px;
    }

}


/* =========================================================
   SERGVPN DOWNLOAD HERO
   HOMEPAGE-STYLE BLUE VISUAL
   ========================================================= */

.srgdl-hero {

    position: relative !important;

    max-width: none !important;

    min-height: 500px !important;

    box-sizing: border-box !important;

    display: flex !important;

    flex-direction: column !important;
    justify-content: center !important;

    padding-right: 500px !important;
}


/* =========================================================
   COMPLETE VISUAL
   ========================================================= */

.srgdl-main-visual {

    position: absolute;

    top: 50%;
    right: 10px;

    width: 425px;
    height: 425px;

    transform:
        translateY(-50%);

    border-radius: 50%;
}


/* ---------------------------------------------------------
   OUTER DASHED ORBIT
   --------------------------------------------------------- */

.srgdl-main-orbit-dashed {

    position: absolute;

    inset: 0;

    border-radius: 50%;

    border:
        7px dashed
        rgba(69,170,255,.30);

    box-sizing: border-box;

    animation:
        srgdlOrbitClockwise
        20s linear infinite;
}


/* ---------------------------------------------------------
   INNER ORBIT
   --------------------------------------------------------- */

.srgdl-main-orbit-solid {

    position: absolute;

    inset: 24px;

    border-radius: 50%;

    border:
        4px solid
        rgba(64,179,255,.34);

    box-shadow:
        0 0 30px
        rgba(50,151,255,.08);

    animation:
        srgdlOrbitCounter
        28s linear infinite;
}


/* ---------------------------------------------------------
   BLUE CORE
   --------------------------------------------------------- */

.srgdl-main-core {

    position: absolute;

    inset: 50px;

    display: grid;

    place-items: center;

    overflow: hidden;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 42% 32%,
            #55d8ef 0%,
            #409bdc 37%,
            #387dd1 72%,
            #306ab7 100%
        );

    border:
        1px solid
        rgba(163,229,255,.22);

    box-shadow:
        inset 0 0 55px
        rgba(255,255,255,.035),

        0 0 60px
        rgba(62,151,255,.13);

    animation:
        srgdlCoreBreath
        4.8s ease-in-out infinite;
}


/* subtle inner glow */

.srgdl-main-core::before {

    content: "";

    position: absolute;

    inset: 0;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(255,255,255,.06),
            transparent 58%
        );

    pointer-events: none;
}


/* =========================================================
   SHIELD
   ========================================================= */

.srgdl-main-shield {

    position: relative;

    z-index: 3;

    width: 145px;
    height: 175px;

    overflow: visible;

    fill:
        rgba(235,252,255,.84);

    stroke:
        rgba(246,255,255,.96);

    stroke-width: 3;

    stroke-linejoin: round;

    filter:
        drop-shadow(
            0 0 13px
            rgba(220,250,255,.16)
        );
}


.srgdl-main-shield-center {

    fill: none;

    stroke:
        rgba(100,207,235,.38);

    stroke-width: 3;
}


/* =========================================================
   LITTLE PARTICLES INSIDE CIRCLE
   ========================================================= */

.srgdl-main-dot {

    position: absolute;

    z-index: 2;

    width: 9px;
    height: 9px;

    border-radius: 50%;

    background:
        rgba(133,226,250,.34);

    animation:
        srgdlParticlePulse
        3.7s ease-in-out infinite;
}


.srgdl-main-dot-1 {

    top: 23%;
    left: 23%;

    animation-delay: -.8s;
}


.srgdl-main-dot-2 {

    top: 29%;
    right: 21%;

    width: 8px;
    height: 8px;

    animation-delay: -2s;
}


.srgdl-main-dot-3 {

    bottom: 22%;
    left: 18%;

    width: 7px;
    height: 7px;

    animation-delay: -1.4s;
}


.srgdl-main-dot-4 {

    bottom: 30%;
    right: 15%;

    width: 8px;
    height: 8px;

    animation-delay: -2.8s;
}


/* =========================================================
   CHECK BADGE
   ========================================================= */

.srgdl-main-check {

    position: absolute;

    z-index: 8;

    right: 36px;
    bottom: 53px;

    width: 70px;
    height: 70px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background:
        #f8fcff;

    box-shadow:
        0 13px 30px
        rgba(0,0,0,.20),

        0 0 26px
        rgba(74,179,255,.12);

    animation:
        srgdlCheckFloat
        3.4s ease-in-out infinite;
}


.srgdl-main-check svg {

    width: 40px;
    height: 40px;

    fill: none;

    stroke:
        #358bd4;

    stroke-width: 4;

    stroke-linecap: round;
    stroke-linejoin: round;
}


/* =========================================================
   ANIMATION
   ========================================================= */

@keyframes srgdlOrbitClockwise {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


@keyframes srgdlOrbitCounter {

    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }

}


@keyframes srgdlCoreBreath {

    0%,
    100% {

        transform:
            scale(1);

        box-shadow:
            inset 0 0 55px
            rgba(255,255,255,.035),

            0 0 50px
            rgba(62,151,255,.10);
    }


    50% {

        transform:
            scale(1.018);

        box-shadow:
            inset 0 0 65px
            rgba(255,255,255,.05),

            0 0 75px
            rgba(62,151,255,.18);
    }

}


@keyframes srgdlCheckFloat {

    0%,
    100% {

        transform:
            translateY(0);
    }


    50% {

        transform:
            translateY(-7px);
    }

}


@keyframes srgdlParticlePulse {

    0%,
    100% {

        opacity: .35;

        transform:
            scale(.85);
    }


    50% {

        opacity: .9;

        transform:
            scale(1.3);
    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media screen and (max-width: 980px) {

    .srgdl-hero {

        min-height: 0 !important;

        padding-right:
            0 !important;
    }


    .srgdl-main-visual {

        position: relative;

        top: auto;
        right: auto;

        width:
            min(420px,72vw);

        height: auto;

        aspect-ratio: 1;

        margin:
            55px auto
            0;

        transform: none;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media screen and (max-width: 640px) {

    .srgdl-main-visual {

        width:
            min(330px,88vw);

        margin-top:
            40px;
    }


    .srgdl-main-orbit-dashed {

        border-width: 5px;
    }


    .srgdl-main-orbit-solid {

        inset: 19px;

        border-width: 3px;
    }


    .srgdl-main-core {

        inset: 39px;
    }


    .srgdl-main-shield {

        width: 108px;
        height: 132px;
    }


    .srgdl-main-check {

        right: 27px;
        bottom: 39px;

        width: 56px;
        height: 56px;
    }


    .srgdl-main-check svg {

        width: 31px;
        height: 31px;
    }

}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .srgdl-main-orbit-dashed,
    .srgdl-main-orbit-solid,
    .srgdl-main-core,
    .srgdl-main-check,
    .srgdl-main-dot {

        animation: none !important;
    }

}


/* =========================================================
   SERGVPN HOW IT WORKS
   namespace: srghow-
   ========================================================= */

.srghow-page {

    width:
        min(1180px,calc(100% - 48px));

    margin:
        0 auto;

    padding:
        85px 0
        55px;
}


.srghow-kicker {

    color: #71838f;

    font-size: 10px;

    font-weight: 500;

    letter-spacing:
        .27em;
}


/* =========================================================
   HERO
   ========================================================= */

.srghow-hero {

    display: grid;

    grid-template-columns:
        minmax(0,1.05fr)
        minmax(380px,.95fr);

    gap: 70px;

    align-items: center;

    min-height: 610px;

    margin-bottom:
        100px;
}


.srghow-copy {

    min-width: 0;
}


.srghow-copy h1 {

    margin:
        21px 0
        27px;

    color: #edf3f6;

    font-size:
        clamp(55px,6.3vw,87px);

    font-weight: 500;

    line-height:
        .93;

    letter-spacing:
        -.025em;
}


.srghow-copy h1 span {

    background:
        linear-gradient(
            92deg,
            #76a6ff,
            #dfeff2 50%,
            #52d8b1
        );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}


.srghow-copy p {

    max-width: 650px;

    margin: 0;

    color: #92a1ab;

    font-size: 18px;

    line-height: 1.7;
}


/* =========================================================
   HERO VISUAL
   ========================================================= */

.srghow-visual {

    position: relative;

    width:
        min(100%,500px);

    aspect-ratio: 1;

    margin-left: auto;
}


.srghow-orbit {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}


.srghow-orbit-one {

    inset: 2%;

    border:
        2px dashed
        rgba(67,170,245,.16);

    animation:
        srghowRotate
        25s linear infinite;
}


.srghow-orbit-two {

    inset: 15%;

    border:
        1px solid
        rgba(32,196,145,.16);

    animation:
        srghowRotateReverse
        30s linear infinite;
}


.srghow-node-phone {

    position: absolute;

    left: 5%;
    top: 33%;

    width: 88px;
    height: 150px;

    border-radius: 20px;

    background:
        linear-gradient(
            150deg,
            #0b2635,
            #06131d
        );

    border:
        1px solid
        rgba(91,143,240,.20);

    box-shadow:
        0 0 28px
        rgba(91,143,240,.06);
}


.srghow-phone-line {

    position: absolute;

    left: 19px;
    right: 19px;
    bottom: 31px;

    height: 3px;

    border-radius: 10px;

    background:
        rgba(32,196,145,.40);
}


.srghow-phone-dot {

    position: absolute;

    left: 50%;
    bottom: 13px;

    width: 5px;
    height: 5px;

    transform:
        translateX(-50%);

    border-radius: 50%;

    background:
        #20c491;
}


.srghow-server {

    position: absolute;

    left: 50%;
    top: 50%;

    width: 96px;

    transform:
        translate(-50%,-50%);

    display: grid;

    gap: 7px;
}


.srghow-server span {

    display: block;

    height: 35px;

    border-radius: 10px;

    background:
        linear-gradient(
            90deg,
            #0b2635,
            #102e40
        );

    border:
        1px solid
        rgba(91,143,240,.18);

    box-shadow:
        inset 0 0 14px
        rgba(91,143,240,.03);
}


.srghow-server span::after {

    content: "";

    display: block;

    width: 5px;
    height: 5px;

    margin:
        14px 0
        0 73px;

    border-radius: 50%;

    background:
        #4f9ce8;

    box-shadow:
        0 0 8px
        rgba(79,156,232,.45);
}


.srghow-shield {

    position: absolute;

    right: 3%;
    top: 33%;

    width: 135px;
    height: 135px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(24,183,131,.17),
            rgba(24,183,131,.025) 68%
        );

    border:
        1px solid
        rgba(32,196,145,.13);

    animation:
        srghowPulse
        4s ease-in-out infinite;
}


.srghow-shield-shape {

    width: 76px;
    height: 88px;

    display: grid;

    place-items: center;

    color: #eafff8;

    font-size: 27px;
    font-weight: 600;

    background:
        linear-gradient(
            160deg,
            #24c998,
            #158ca1
        );

    clip-path:
        polygon(
            50% 0,
            91% 17%,
            91% 54%,
            80% 76%,
            64% 91%,
            50% 100%,
            36% 91%,
            20% 76%,
            9% 54%,
            9% 17%
        );

    filter:
        drop-shadow(
            0 0 14px
            rgba(32,196,145,.18)
        );
}


.srghow-flow-line {

    position: absolute;

    height: 2px;

    transform-origin:
        left center;

    background:
        linear-gradient(
            90deg,
            rgba(91,143,240,.15),
            #4fa8e8,
            rgba(32,196,145,.20)
        );

    overflow: hidden;
}


.srghow-flow-line::after {

    content: "";

    position: absolute;

    top: -2px;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background:
        #6ec7ff;

    box-shadow:
        0 0 10px
        rgba(110,199,255,.55);

    animation:
        srghowPacket
        2.2s linear infinite;
}


.srghow-flow-a {

    width: 120px;

    left: 21%;
    top: 46%;

    transform:
        rotate(-5deg);
}


.srghow-flow-b {

    width: 105px;

    left: 22%;
    top: 55%;

    transform:
        rotate(6deg);
}


.srghow-flow-b::after {
    animation-delay:
        -1.1s;
}


.srghow-flow-c {

    width: 110px;

    left: 58%;
    top: 50%;
}


.srghow-flow-c::after {
    animation-delay:
        -.5s;
}


.srghow-particle {

    position: absolute;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        rgba(55,206,170,.46);

    animation:
        srghowParticle
        4s ease-in-out infinite;
}


.srghow-particle-1 {

    top: 18%;
    left: 43%;
}


.srghow-particle-2 {

    right: 22%;
    bottom: 19%;

    animation-delay:
        -1.2s;
}


.srghow-particle-3 {

    left: 29%;
    bottom: 19%;

    background:
        rgba(91,143,240,.48);

    animation-delay:
        -2.1s;
}


/* =========================================================
   PROCESS
   ========================================================= */

.srghow-process {

    margin-bottom:
        110px;
}


.srghow-section-head {

    max-width:
        750px;

    margin-bottom:
        38px;
}


.srghow-section-head h2,
.srghow-auto-copy h2,
.srghow-cta h2 {

    margin:
        14px 0
        0;

    color: #e8eff2;

    font-size:
        clamp(37px,4.5vw,56px);

    line-height:
        1.05;

    font-weight:
        500;

    letter-spacing:
        -.035em;
}


.srghow-process-grid {

    display: grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap:
        14px;
}


.srghow-process-card {

    position: relative;

    min-height:
        235px;

    box-sizing:
        border-box;

    padding:
        27px;

    overflow:
        hidden;

    border-radius:
        24px;

    background:
        rgba(8,24,35,.62);

    border:
        1px solid
        rgba(255,255,255,.05);
}


.srghow-number {

    display: block;

    margin-bottom:
        44px;

    color:
        #667986;

    font-size:
        10px;

    letter-spacing:
        .16em;
}


.srghow-card-dot {

    position: absolute;

    right: 24px;
    top: 25px;

    width: 7px;
    height: 7px;

    border-radius:
        50%;

    background:
        #20c491;

    box-shadow:
        0 0 12px
        rgba(32,196,145,.40);
}


.srghow-process-card h3 {

    margin:
        0 0
        10px;

    color:
        #dfe7eb;

    font-size:
        18px;

    font-weight:
        500;
}


.srghow-process-card p {

    margin: 0;

    color:
        #7d8c97;

    font-size:
        13px;

    line-height:
        1.65;
}


.srghow-process-final {

    border-color:
        rgba(32,196,145,.10);
}


/* =========================================================
   AUTOMATION
   ========================================================= */

.srghow-auto {

    display: grid;

    grid-template-columns:
        .9fr 1.1fr;

    gap:
        70px;

    align-items:
        start;

    margin-bottom:
        110px;
}


.srghow-auto-copy p {

    max-width:
        530px;

    margin:
        20px 0
        0;

    color:
        #82919c;

    font-size:
        15px;

    line-height:
        1.7;
}


.srghow-auto-list {

    display: grid;

    gap:
        11px;
}


.srghow-auto-item {

    display: grid;

    grid-template-columns:
        48px 1fr;

    gap:
        17px;

    align-items:
        center;

    min-height:
        80px;

    box-sizing:
        border-box;

    padding:
        16px 20px;

    border-radius:
        18px;

    background:
        rgba(8,24,35,.55);

    border:
        1px solid
        rgba(255,255,255,.045);
}


.srghow-auto-item > span {

    color:
        #20c491;

    font-size:
        11px;

    letter-spacing:
        .12em;
}


.srghow-auto-item strong {

    color:
        #dfe7ea;

    font-size:
        14px;

    font-weight:
        500;
}


.srghow-auto-item p {

    margin:
        4px 0
        0;

    color:
        #758590;

    font-size:
        12px;
}


/* =========================================================
   CTA
   ========================================================= */

.srghow-cta {

    display: flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        40px;

    margin-bottom:
        55px;

    padding:
        38px 40px;

    border-radius:
        28px;

    background:
        linear-gradient(
            135deg,
            rgba(8,30,40,.92),
            rgba(7,19,30,.92)
        );

    border:
        1px solid
        rgba(32,196,145,.10);
}


.srghow-cta h2 {

    font-size:
        clamp(31px,4vw,47px);
}


.srghow-cta-button {

    flex-shrink: 0;

    min-height:
        52px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    box-sizing:
        border-box;

    padding:
        0 23px;

    border-radius:
        15px;

    color:
        #f1fbf8;

    background:
        linear-gradient(
            90deg,
            #159d85,
            #1fc697
        );

    text-decoration:
        none;

    font-size:
        14px;

    font-weight:
        550;
}


/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes srghowRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


@keyframes srghowRotateReverse {

    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }

}


@keyframes srghowPacket {

    from {
        left: -7px;
    }

    to {
        left: 100%;
    }

}


@keyframes srghowPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.035);
    }

}


@keyframes srghowParticle {

    0%,
    100% {
        opacity: .3;
        transform: translateY(0);
    }

    50% {
        opacity: .9;
        transform: translateY(-8px);
    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media screen and (max-width: 980px) {

    .srghow-page {

        width:
            min(100% - 40px,820px);

        padding-top:
            70px;
    }


    .srghow-hero {

        grid-template-columns:
            1fr;

        gap:
            35px;

        min-height:
            0;

        margin-bottom:
            80px;
    }


    .srghow-visual {

        width:
            min(500px,80vw);

        margin:
            0 auto;
    }


    .srghow-process-grid {

        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }


    .srghow-auto {

        grid-template-columns:
            1fr;

        gap:
            35px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media screen and (max-width: 640px) {

    .srghow-page {

        width:
            calc(100% - 30px);

        padding:
            48px 0
            35px;
    }


    .srghow-hero {

        margin-bottom:
            65px;
    }


    .srghow-copy h1 {

        font-size:
            clamp(43px,13vw,62px);

        line-height:
            .95;
    }


    .srghow-copy p {

        font-size:
            15px;
    }


    .srghow-visual {

        width:
            min(350px,92vw);
    }


    .srghow-node-phone {

        width:
            63px;

        height:
            110px;
    }


    .srghow-server {

        width:
            72px;
    }


    .srghow-server span {

        height:
            27px;
    }


    .srghow-server span::after {

        margin:
            10px 0
            0 53px;
    }


    .srghow-shield {

        width:
            98px;

        height:
            98px;
    }


    .srghow-shield-shape {

        width:
            55px;

        height:
            65px;

        font-size:
            20px;
    }


    .srghow-process {

        margin-bottom:
            70px;
    }


    .srghow-process-grid {

        grid-template-columns:
            1fr;
    }


    .srghow-process-card {

        min-height:
            0;

        padding:
            23px 20px;
    }


    .srghow-number {

        margin-bottom:
            26px;
    }


    .srghow-auto {

        margin-bottom:
            70px;
    }


    .srghow-cta {

        align-items:
            stretch;

        flex-direction:
            column;

        padding:
            28px 23px;
    }


    .srghow-cta-button {

        width:
            100%;
    }

}


/* Reduced motion */

@media (prefers-reduced-motion: reduce) {

    .srghow-orbit,
    .srghow-flow-line::after,
    .srghow-shield,
    .srghow-particle {

        animation:
            none !important;
    }

}


/* =========================================================
   SERGVPN SECURITY
   namespace: srgsec-
   ========================================================= */

.srgsec-page {

    width:
        min(1180px,calc(100% - 48px));

    margin:
        0 auto;

    padding:
        85px 0
        55px;
}


.srgsec-kicker {

    color: #71838f;

    font-size: 10px;

    font-weight: 500;

    letter-spacing: .27em;
}


/* HERO */

.srgsec-hero {

    min-height: 610px;

    display: grid;

    grid-template-columns:
        minmax(0,1.05fr)
        minmax(380px,.95fr);

    align-items: center;

    gap: 70px;

    margin-bottom: 100px;
}


.srgsec-copy h1 {

    margin:
        21px 0
        27px;

    color: #edf3f6;

    font-size:
        clamp(58px,6.5vw,90px);

    line-height: .92;

    font-weight: 500;

    letter-spacing: -.025em;
}


.srgsec-copy h1 span {

    background:
        linear-gradient(
            92deg,
            #72a4ff,
            #dff3f5 48%,
            #53d9b1
        );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}


.srgsec-copy p {

    max-width: 650px;

    margin: 0;

    color: #92a1ab;

    font-size: 18px;

    line-height: 1.7;
}


/* VISUAL */

.srgsec-visual {

    position: relative;

    width:
        min(100%,470px);

    aspect-ratio: 1;

    margin-left: auto;
}


.srgsec-orbit {

    position: absolute;

    border-radius: 50%;
}


.srgsec-orbit-outer {

    inset: 0;

    border:
        7px dashed
        rgba(70,166,255,.23);

    animation:
        srgsecRotate 23s linear infinite;
}


.srgsec-orbit-inner {

    inset: 26px;

    border:
        3px solid
        rgba(32,196,145,.22);

    animation:
        srgsecReverse 31s linear infinite;
}


.srgsec-core {

    position: absolute;

    inset: 54px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 38% 30%,
            #53d5e5 0%,
            #388fd4 45%,
            #247f9c 73%,
            #187f75 100%
        );

    border:
        1px solid
        rgba(173,239,255,.18);

    box-shadow:
        0 0 65px
        rgba(50,158,220,.12);

    animation:
        srgsecBreath 4.5s ease-in-out infinite;
}


.srgsec-shield {

    width: 150px;
    height: 178px;

    fill:
        rgba(234,252,255,.89);

    stroke:
        rgba(248,255,255,.96);

    stroke-width: 3;

    stroke-linejoin: round;

    filter:
        drop-shadow(
            0 0 15px
            rgba(218,250,255,.17)
        );
}


.srgsec-shield-center {

    fill: none;

    stroke:
        rgba(96,202,220,.38);

    stroke-width: 3;
}


.srgsec-lock {

    position: absolute;

    width: 47px;
    height: 54px;

    display: none;
}


.srgsec-ok {

    position: absolute;

    z-index: 5;

    right: 34px;
    bottom: 48px;

    width: 72px;
    height: 72px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    color: #2386ad;

    background: #f5fdff;

    font-size: 30px;

    font-weight: 650;

    box-shadow:
        0 13px 30px rgba(0,0,0,.22);

    animation:
        srgsecFloat 3.5s ease-in-out infinite;
}


.srgsec-light {

    position: absolute;

    z-index: 4;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #6bdcff;

    box-shadow:
        0 0 13px rgba(107,220,255,.55);

    animation:
        srgsecLight 3.5s ease-in-out infinite;
}


.srgsec-light-one {
    top: 15%;
    left: 30%;
}


.srgsec-light-two {

    top: 39%;
    right: 4%;

    animation-delay: -1.2s;
}


.srgsec-light-three {

    bottom: 13%;
    left: 24%;

    background: #38d0a0;

    animation-delay: -2.1s;
}


/* PROTECTION */

.srgsec-protection {

    margin-bottom: 110px;
}


.srgsec-heading {

    max-width: 700px;

    margin-bottom: 37px;
}


.srgsec-heading h2,
.srgsec-flow-copy h2,
.srgsec-cta h2 {

    margin:
        14px 0
        15px;

    color: #e8eff2;

    font-size:
        clamp(37px,4.5vw,55px);

    line-height: 1.05;

    font-weight: 500;

    letter-spacing: -.035em;
}


.srgsec-heading p,
.srgsec-flow-copy p {

    max-width: 650px;

    margin: 0;

    color: #81909a;

    font-size: 15px;

    line-height: 1.7;
}


.srgsec-grid {

    display: grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap: 14px;
}


.srgsec-card {

    min-height: 215px;

    box-sizing: border-box;

    padding: 27px;

    border-radius: 24px;

    background:
        rgba(8,24,35,.62);

    border:
        1px solid
        rgba(255,255,255,.05);
}


.srgsec-card-number {

    display: block;

    margin-bottom: 39px;

    color: #20c491;

    font-size: 10px;

    letter-spacing: .16em;
}


.srgsec-card h3 {

    margin:
        0 0
        10px;

    color: #dfe7eb;

    font-size: 19px;

    font-weight: 500;
}


.srgsec-card p {

    max-width: 470px;

    margin: 0;

    color: #7d8c97;

    font-size: 13px;

    line-height: 1.65;
}


/* FLOW */

.srgsec-flow {

    display: grid;

    grid-template-columns:
        .9fr 1.1fr;

    gap: 75px;

    align-items: start;

    margin-bottom: 100px;
}


.srgsec-flow-list {

    display: grid;

    padding-top: 8px;
}


.srgsec-flow-item {

    display: grid;

    grid-template-columns:
        18px minmax(0,1fr);

    gap: 15px;

    align-items: start;
}


.srgsec-flow-dot {

    width: 10px;
    height: 10px;

    margin-top: 9px;

    border-radius: 50%;

    background: #20c491;

    box-shadow:
        0 0 13px
        rgba(32,196,145,.35);
}


.srgsec-flow-item small {

    display: block;

    margin-bottom: 7px;

    color: #60727e;

    font-size: 9px;

    letter-spacing: .15em;
}


.srgsec-flow-item strong {

    display: block;

    color: #dce5e9;

    font-size: 16px;

    font-weight: 500;
}


.srgsec-flow-item p {

    margin:
        6px 0
        0;

    color: #758590;

    font-size: 13px;

    line-height: 1.55;
}


.srgsec-flow-line {

    width: 1px;
    height: 42px;

    margin:
        6px 0
        6px 4px;

    background:
        linear-gradient(
            #20c491,
            rgba(91,143,240,.15)
        );
}


/* NOTE */

.srgsec-note {

    display: grid;

    grid-template-columns:
        42px minmax(0,1fr);

    gap: 17px;

    align-items: start;

    margin-bottom: 90px;

    padding: 23px 25px;

    border-radius: 21px;

    background:
        rgba(91,143,240,.035);

    border:
        1px solid
        rgba(91,143,240,.09);
}


.srgsec-note-mark {

    width: 38px;
    height: 38px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    color: #72adf5;

    background:
        rgba(91,143,240,.09);

    font-weight: 600;
}


.srgsec-note strong {

    display: block;

    margin-bottom: 6px;

    color: #dfe7eb;

    font-size: 14px;

    font-weight: 500;
}


.srgsec-note p {

    max-width: 800px;

    margin: 0;

    color: #768690;

    font-size: 13px;

    line-height: 1.6;
}


/* CTA */

.srgsec-cta {

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 40px;

    margin-bottom: 55px;

    padding: 38px 40px;

    border-radius: 28px;

    background:
        linear-gradient(
            135deg,
            rgba(8,29,40,.92),
            rgba(6,19,29,.92)
        );

    border:
        1px solid
        rgba(32,196,145,.10);
}


.srgsec-cta h2 {

    max-width: 650px;

    margin-bottom: 0;

    font-size:
        clamp(30px,4vw,46px);
}


.srgsec-cta-button {

    flex-shrink: 0;

    min-height: 52px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    padding: 0 24px;

    border-radius: 15px;

    color: #f2fbf8;

    background:
        linear-gradient(
            90deg,
            #198fa7,
            #1fc193
        );

    text-decoration: none;

    font-size: 14px;

    font-weight: 550;
}


/* ANIMATION */

@keyframes srgsecRotate {

    to {
        transform: rotate(360deg);
    }

}


@keyframes srgsecReverse {

    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }

}


@keyframes srgsecBreath {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.018);
    }

}


@keyframes srgsecFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-7px);
    }

}


@keyframes srgsecLight {

    0%,
    100% {
        opacity: .3;
        transform: scale(.8);
    }

    50% {
        opacity: 1;
        transform: scale(1.35);
    }

}


/* TABLET */

@media screen and (max-width: 980px) {

    .srgsec-page {

        width:
            min(100% - 40px,820px);

        padding-top: 70px;
    }


    .srgsec-hero {

        grid-template-columns: 1fr;

        gap: 40px;

        min-height: 0;

        margin-bottom: 80px;
    }


    .srgsec-visual {

        width:
            min(460px,78vw);

        margin:
            0 auto;
    }


    .srgsec-flow {

        grid-template-columns: 1fr;

        gap: 35px;
    }

}


/* MOBILE */

@media screen and (max-width: 640px) {

    .srgsec-page {

        width:
            calc(100% - 30px);

        padding:
            48px 0
            35px;
    }


    .srgsec-copy h1 {

        font-size:
            clamp(46px,14vw,64px);

        line-height: .94;
    }


    .srgsec-copy p {

        font-size: 15px;
    }


    .srgsec-visual {

        width:
            min(340px,92vw);
    }


    .srgsec-orbit-outer {
        border-width: 5px;
    }


    .srgsec-orbit-inner {
        inset: 20px;
    }


    .srgsec-core {
        inset: 41px;
    }


    .srgsec-shield {

        width: 105px;
        height: 128px;
    }


    .srgsec-ok {

        width: 54px;
        height: 54px;

        right: 27px;
        bottom: 37px;

        font-size: 23px;
    }


    .srgsec-protection {

        margin-bottom: 70px;
    }


    .srgsec-grid {

        grid-template-columns: 1fr;
    }


    .srgsec-card {

        min-height: 0;

        padding:
            23px 20px;
    }


    .srgsec-card-number {

        margin-bottom: 25px;
    }


    .srgsec-flow {

        margin-bottom: 70px;
    }


    .srgsec-note {

        margin-bottom: 65px;

        padding: 19px;
    }


    .srgsec-cta {

        align-items: stretch;

        flex-direction: column;

        padding:
            28px 23px;
    }


    .srgsec-cta-button {

        width: 100%;
    }

}


/* REDUCED MOTION */

@media (prefers-reduced-motion: reduce) {

    .srgsec-orbit,
    .srgsec-core,
    .srgsec-ok,
    .srgsec-light {

        animation: none !important;
    }

}


/* =========================================================
   FINAL SECURITY GREEN SHIELD
   ========================================================= */

.srgsec-core {
    background:
        radial-gradient(
            circle at 38% 30%,
            #4be0a9 0%,
            #25c993 30%,
            #159a72 62%,
            #0b6f57 100%
        ) !important;

    border:
        1px solid rgba(110,255,202,.24) !important;

    box-shadow:
        0 0 45px rgba(32,196,145,.18),
        0 0 90px rgba(32,196,145,.08),
        inset 0 0 50px rgba(255,255,255,.035) !important;

    animation:
        securityGreenBreath 4s ease-in-out infinite !important;
}


.srgsec-orbit-outer {
    border-color:
        rgba(32,196,145,.38) !important;

    animation:
        securityGreenRotate 17s linear infinite !important;
}


.srgsec-orbit-inner {
    border-color:
        rgba(75,224,169,.30) !important;

    box-shadow:
        0 0 25px rgba(32,196,145,.06) !important;

    animation:
        securityGreenRotateReverse 25s linear infinite !important;
}


.srgsec-shield {
    fill:
        rgba(245,255,251,.93) !important;

    stroke:
        #f4fffb !important;

    filter:
        drop-shadow(
            0 0 15px rgba(215,255,240,.22)
        ) !important;
}


.srgsec-shield-center {
    stroke:
        rgba(25,155,112,.42) !important;
}


.srgsec-ok {
    color:
        #13835f !important;

    background:
        #f5fffb !important;

    border:
        3px solid #0a382a !important;

    box-shadow:
        0 12px 28px rgba(0,0,0,.22),
        0 0 25px rgba(32,196,145,.20) !important;

    animation:
        securityGreenCheck 3s ease-in-out infinite !important;
}


.srgsec-light {
    background:
        #51e7b3 !important;

    box-shadow:
        0 0 12px rgba(81,231,179,.70),
        0 0 24px rgba(32,196,145,.30) !important;

    animation:
        securityGreenParticle 3s ease-in-out infinite !important;
}


/* two expanding waves */

.srgsec-visual::before,
.srgsec-visual::after {
    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: 64%;
    height: 64%;

    border-radius: 50%;

    border:
        1px solid rgba(32,196,145,.28);

    transform:
        translate(-50%,-50%) scale(.75);

    opacity: 0;

    pointer-events: none;

    animation:
        securityGreenWave 4.5s ease-out infinite;
}


.srgsec-visual::after {
    animation-delay:
        2.25s;
}


/* moving highlight */

.srgsec-core::before {
    content: "";

    position: absolute;

    z-index: 2;

    width: 170%;
    height: 45%;

    left: -35%;
    top: -50%;

    transform:
        rotate(-28deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(220,255,243,.13),
            transparent
        );

    animation:
        securityGreenSweep 5s ease-in-out infinite;

    pointer-events: none;
}


@keyframes securityGreenRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


@keyframes securityGreenRotateReverse {

    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }

}


@keyframes securityGreenBreath {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.025);
    }

}


@keyframes securityGreenCheck {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }

}


@keyframes securityGreenParticle {

    0%,
    100% {
        opacity: .25;
        transform: scale(.75);
    }

    50% {
        opacity: 1;
        transform: scale(1.4);
    }

}


@keyframes securityGreenWave {

    0% {
        transform:
            translate(-50%,-50%)
            scale(.72);

        opacity: .42;
    }

    100% {
        transform:
            translate(-50%,-50%)
            scale(1.45);

        opacity: 0;
    }

}


@keyframes securityGreenSweep {

    0% {
        top: -55%;
        opacity: 0;
    }

    25% {
        opacity: .8;
    }

    100% {
        top: 115%;
        opacity: 0;
    }

}


@media (prefers-reduced-motion: reduce) {

    .srgsec-core,
    .srgsec-orbit,
    .srgsec-ok,
    .srgsec-light,
    .srgsec-visual::before,
    .srgsec-visual::after,
    .srgsec-core::before {
        animation: none !important;
    }

}


/* =========================================================
   SERGVPN FAQ
   namespace: srgfaq-
   ========================================================= */

.srgfaq-page {

    width:
        min(1050px,calc(100% - 48px));

    margin: 0 auto;

    padding:
        90px 0
        55px;
}


.srgfaq-kicker {

    color: #71838f;

    font-size: 10px;

    font-weight: 500;

    letter-spacing: .27em;
}


/* HERO */

.srgfaq-hero {

    position: relative;

    min-height: 430px;

    box-sizing: border-box;

    padding:
        45px 300px
        60px 0;

    margin-bottom: 80px;
}


.srgfaq-hero h1 {

    margin:
        20px 0
        25px;

    color: #edf3f6;

    font-size:
        clamp(60px,7vw,94px);

    font-weight: 500;

    line-height: .91;

    letter-spacing: -.015em;
}


.srgfaq-hero h1 span {

    background:
        linear-gradient(
            92deg,
            #74a7ff,
            #e4f2f4 50%,
            #53d9b1
        );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}


.srgfaq-hero > p {

    max-width: 620px;

    margin: 0;

    color: #92a1ab;

    font-size: 17px;

    line-height: 1.7;
}


/* FAQ HERO MARK */

.srgfaq-hero-mark {

    position: absolute;

    top: 30px;
    right: 20px;

    width: 230px;
    height: 230px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    border:
        2px dashed
        rgba(91,143,240,.19);

    animation:
        srgfaqOrbit
        24s linear infinite;
}


.srgfaq-hero-ring {

    width: 160px;
    height: 160px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 38% 30%,
            #46d4b1,
            #278fac 60%,
            #255f9b
        );

    box-shadow:
        0 0 45px
        rgba(44,175,188,.13);

    animation:
        srgfaqBreath
        4s ease-in-out infinite;
}


.srgfaq-hero-ring span {

    color: #efffff;

    font-size: 82px;

    line-height: 1;

    font-weight: 300;

    text-shadow:
        0 0 18px
        rgba(255,255,255,.13);
}


.srgfaq-dot {

    position: absolute;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #45d3ac;

    box-shadow:
        0 0 12px
        rgba(69,211,172,.50);

    animation:
        srgfaqDot
        3.2s ease-in-out infinite;
}


.srgfaq-dot-one {

    top: 19px;
    left: 62px;
}


.srgfaq-dot-two {

    top: 80px;
    right: 4px;

    background: #68b6ff;

    animation-delay: -1s;
}


.srgfaq-dot-three {

    bottom: 13px;
    left: 73px;

    animation-delay: -2s;
}


/* SECTIONS */

.srgfaq-section {

    margin-bottom: 85px;
}


.srgfaq-section-head {

    margin-bottom: 27px;
}


.srgfaq-section-head h2,
.srgfaq-support h2 {

    margin:
        12px 0
        0;

    color: #e8eff2;

    font-size:
        clamp(34px,4vw,48px);

    line-height: 1.05;

    font-weight: 500;

    letter-spacing: -.03em;
}


/* FAQ LIST */

.srgfaq-list {

    display: grid;

    gap: 10px;
}


.srgfaq-item {

    overflow: hidden;

    border-radius: 19px;

    background:
        rgba(8,24,35,.60);

    border:
        1px solid
        rgba(255,255,255,.05);

    transition:
        border-color .2s ease,
        background .2s ease;
}


.srgfaq-item[open] {

    background:
        rgba(8,27,38,.78);

    border-color:
        rgba(32,196,145,.12);
}


/* Completely remove browser triangle */

.srgfaq-item > summary {

    list-style: none !important;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;

    min-height: 74px;

    box-sizing: border-box;

    padding:
        19px 22px;

    cursor: pointer;

    user-select: none;
}


.srgfaq-item > summary::-webkit-details-marker {
    display: none !important;
}


.srgfaq-item > summary::marker {
    content: "" !important;
}


.srgfaq-question {

    color: #dce5e9;

    font-size: 15px;

    font-weight: 500;

    line-height: 1.4;
}


/* CUSTOM + */

.srgfaq-plus {

    position: relative;

    flex: 0 0 34px;

    width: 34px;
    height: 34px;

    border-radius: 50%;

    background:
        rgba(91,143,240,.07);

    border:
        1px solid
        rgba(91,143,240,.10);

    transition:
        background .2s ease,
        transform .25s ease;
}


.srgfaq-plus::before,
.srgfaq-plus::after {

    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: 13px;
    height: 1.5px;

    border-radius: 4px;

    background: #77a9e8;

    transform:
        translate(-50%,-50%);
}


.srgfaq-plus::after {

    transform:
        translate(-50%,-50%)
        rotate(90deg);

    transition:
        transform .22s ease,
        opacity .22s ease;
}


.srgfaq-item[open]
.srgfaq-plus {

    background:
        rgba(32,196,145,.09);

    transform:
        rotate(180deg);
}


.srgfaq-item[open]
.srgfaq-plus::before {

    background: #33ca9b;
}


.srgfaq-item[open]
.srgfaq-plus::after {

    opacity: 0;
}


/* ANSWER */

.srgfaq-answer {

    padding:
        0 70px
        23px 22px;
}


.srgfaq-answer p {

    max-width: 790px;

    margin: 0;

    color: #7f8f99;

    font-size: 14px;

    line-height: 1.72;
}


.srgfaq-answer a {

    color: #5fcfae;

    text-decoration: none;
}


/* SUPPORT CTA */

.srgfaq-support {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 40px;

    margin:
        20px 0
        55px;

    padding:
        35px 38px;

    border-radius: 27px;

    background:
        linear-gradient(
            135deg,
            rgba(8,29,40,.92),
            rgba(6,19,29,.92)
        );

    border:
        1px solid
        rgba(32,196,145,.10);
}


.srgfaq-support h2 {

    font-size:
        clamp(29px,4vw,43px);
}


.srgfaq-support p {

    max-width: 570px;

    margin:
        13px 0
        0;

    color: #7f8e98;

    font-size: 14px;

    line-height: 1.6;
}


.srgfaq-support-button {

    flex-shrink: 0;

    min-height: 50px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding:
        0 22px;

    border-radius: 15px;

    color: #f0fbf7;

    background:
        linear-gradient(
            90deg,
            #158f7d,
            #20bf93
        );

    text-decoration: none;

    font-size: 13px;

    font-weight: 550;
}


/* ANIMATIONS */

@keyframes srgfaqOrbit {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


@keyframes srgfaqBreath {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.025);
    }

}


@keyframes srgfaqDot {

    0%,
    100% {
        opacity: .3;
        transform: scale(.8);
    }

    50% {
        opacity: 1;
        transform: scale(1.35);
    }

}


/* TABLET */

@media screen and (max-width: 980px) {

    .srgfaq-page {

        width:
            min(100% - 40px,820px);

        padding-top: 70px;
    }


    .srgfaq-hero {

        min-height: 0;

        padding:
            20px 250px
            45px 0;

        margin-bottom: 60px;
    }


    .srgfaq-hero-mark {

        width: 190px;
        height: 190px;

        right: 0;
    }


    .srgfaq-hero-ring {

        width: 130px;
        height: 130px;
    }


    .srgfaq-hero-ring span {

        font-size: 66px;
    }

}


/* MOBILE */

@media screen and (max-width: 640px) {

    .srgfaq-page {

        width:
            calc(100% - 30px);

        padding:
            48px 0
            35px;
    }


    .srgfaq-hero {

        padding:
            0;

        margin-bottom:
            65px;
    }


    .srgfaq-hero h1 {

        font-size:
            clamp(48px,15vw,66px);

        line-height: .93;
    }


    .srgfaq-hero > p {

        font-size: 15px;
    }


    .srgfaq-hero-mark {

        position: relative;

        top: auto;
        right: auto;

        width: 180px;
        height: 180px;

        margin:
            38px auto
            0;
    }


    .srgfaq-hero-ring {

        width: 123px;
        height: 123px;
    }


    .srgfaq-hero-ring span {

        font-size: 62px;
    }


    .srgfaq-section {

        margin-bottom: 62px;
    }


    .srgfaq-item > summary {

        min-height: 68px;

        gap: 15px;

        padding:
            17px 17px;
    }


    .srgfaq-question {

        font-size: 14px;
    }


    .srgfaq-plus {

        flex-basis: 31px;

        width: 31px;
        height: 31px;
    }


    .srgfaq-answer {

        padding:
            0 17px
            20px;
    }


    .srgfaq-answer p {

        font-size: 13px;
    }


    .srgfaq-support {

        align-items: stretch;

        flex-direction: column;

        padding:
            27px 22px;
    }


    .srgfaq-support-button {

        width: 100%;

        box-sizing: border-box;
    }

}


/* REDUCED MOTION */

@media (prefers-reduced-motion: reduce) {

    .srgfaq-hero-mark,
    .srgfaq-hero-ring,
    .srgfaq-dot {

        animation: none !important;
    }

}


/* =========================================================
   SERGVPN FAQ HERO ICON SIZE UPGRADE
   ========================================================= */

/* DESKTOP */

.srgfaq-hero {
    padding-right: 370px !important;
    min-height: 500px !important;
}


.srgfaq-hero-mark {

    width: 310px !important;
    height: 310px !important;

    top: 15px !important;
    right: 5px !important;

    border-width: 3px !important;

    box-shadow:
        0 0 55px
        rgba(61,170,214,.06);
}


.srgfaq-hero-ring {

    width: 215px !important;
    height: 215px !important;

    box-shadow:
        0 0 55px
        rgba(44,175,188,.18),
        0 0 100px
        rgba(55,143,210,.07) !important;
}


.srgfaq-hero-ring span {

    font-size: 108px !important;

    font-weight: 300 !important;

    transform:
        translateY(-2px);
}


.srgfaq-dot {

    width: 10px !important;
    height: 10px !important;
}


.srgfaq-dot-one {

    top: 27px !important;
    left: 82px !important;
}


.srgfaq-dot-two {

    top: 105px !important;
    right: 5px !important;
}


.srgfaq-dot-three {

    bottom: 21px !important;
    left: 94px !important;
}


/* TABLET */

@media screen and (max-width: 980px) {

    .srgfaq-hero {

        padding-right:
            300px !important;

        min-height:
            430px !important;
    }


    .srgfaq-hero-mark {

        width:
            245px !important;

        height:
            245px !important;

        top:
            15px !important;
    }


    .srgfaq-hero-ring {

        width:
            170px !important;

        height:
            170px !important;
    }


    .srgfaq-hero-ring span {

        font-size:
            86px !important;
    }


    .srgfaq-dot-one {

        top: 22px !important;
        left: 65px !important;
    }


    .srgfaq-dot-two {

        top: 83px !important;
        right: 4px !important;
    }


    .srgfaq-dot-three {

        bottom: 17px !important;
        left: 75px !important;
    }

}


/* MOBILE */

@media screen and (max-width: 640px) {

    .srgfaq-hero {

        padding-right:
            0 !important;

        min-height:
            0 !important;
    }


    .srgfaq-hero-mark {

        width:
            min(235px,72vw) !important;

        height:
            auto !important;

        aspect-ratio:
            1 !important;

        margin:
            42px auto 0 !important;
    }


    .srgfaq-hero-ring {

        width:
            68% !important;

        height:
            68% !important;
    }


    .srgfaq-hero-ring span {

        font-size:
            clamp(78px,25vw,96px) !important;
    }


    .srgfaq-dot-one {

        top: 9% !important;
        left: 27% !important;
    }


    .srgfaq-dot-two {

        top: 34% !important;
        right: 1% !important;
    }


    .srgfaq-dot-three {

        bottom: 7% !important;
        left: 31% !important;
    }

}


/* =========================================================
   SERGVPN SUPPORT
   namespace: srgsup-
   ========================================================= */

.srgsup-page {

    width:
        min(1100px,calc(100% - 48px));

    margin: 0 auto;

    padding:
        90px 0
        60px;
}


.srgsup-kicker {

    color: #71838f;

    font-size: 10px;

    font-weight: 500;

    letter-spacing: .27em;
}


/* =========================================================
   HERO
   ========================================================= */

.srgsup-hero {

    position: relative;

    min-height: 500px;

    box-sizing: border-box;

    padding:
        45px 370px
        60px 0;

    margin-bottom: 75px;
}


.srgsup-copy h1 {

    margin:
        20px 0
        26px;

    color: #edf3f6;

    font-size:
        clamp(60px,7vw,94px);

    font-weight: 500;

    line-height: .91;

    letter-spacing: -.018em;
}


.srgsup-copy h1 span {

    background:
        linear-gradient(
            92deg,
            #73a9ff,
            #dff4f3 48%,
            #55d8ae
        );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}


.srgsup-copy p {

    max-width: 630px;

    margin: 0;

    color: #92a1ab;

    font-size: 17px;

    line-height: 1.7;
}


/* =========================================================
   SUPPORT HERO ICON
   ========================================================= */

.srgsup-visual {

    position: absolute;

    top: 15px;
    right: 5px;

    width: 310px;
    height: 310px;

    border-radius: 50%;
}


.srgsup-orbit {

    position: absolute;

    border-radius: 50%;
}


.srgsup-orbit-one {

    inset: 0;

    border:
        3px dashed
        rgba(87,162,255,.27);

    animation:
        srgsupRotate
        21s linear infinite;
}


.srgsup-orbit-two {

    inset: 23px;

    border:
        2px solid
        rgba(57,213,173,.22);

    animation:
        srgsupRotateReverse
        29s linear infinite;
}


.srgsup-core {

    position: absolute;

    inset: 48px;

    display: grid;

    place-items: center;

    overflow: hidden;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 37% 29%,
            #65c8f3 0%,
            #428fd4 38%,
            #277ca9 64%,
            #168c83 100%
        );

    border:
        1px solid
        rgba(191,241,255,.18);

    box-shadow:
        0 0 55px
        rgba(71,166,225,.13);

    animation:
        srgsupBreath
        4.2s ease-in-out infinite;
}


.srgsup-core::before {

    content: "";

    position: absolute;

    width: 160%;
    height: 42%;

    left: -30%;
    top: -48%;

    transform:
        rotate(-27deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(226,255,250,.12),
            transparent
        );

    animation:
        srgsupSweep
        5.2s ease-in-out infinite;
}


.srgsup-message-icon {

    position: relative;

    z-index: 2;

    width: 120px;
    height: 110px;

    overflow: visible;

    fill:
        rgba(241,253,255,.90);

    stroke:
        rgba(249,255,255,.98);

    stroke-width: 3;

    stroke-linejoin: round;

    filter:
        drop-shadow(
            0 0 13px
            rgba(221,250,255,.18)
        );
}


.srgsup-message-icon circle {

    fill: #348eb2;

    stroke: none;
}


.srgsup-check {

    position: absolute;

    z-index: 6;

    right: 23px;
    bottom: 34px;

    width: 64px;
    height: 64px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    color: #168663;

    background: #f5fffb;

    border:
        3px solid #092c28;

    font-size: 27px;

    font-weight: 650;

    box-shadow:
        0 12px 27px rgba(0,0,0,.22),
        0 0 24px rgba(32,196,145,.16);

    animation:
        srgsupCheck
        3.2s ease-in-out infinite;
}


.srgsup-particle {

    position: absolute;

    z-index: 5;

    width: 9px;
    height: 9px;

    border-radius: 50%;

    background: #65c4ff;

    box-shadow:
        0 0 12px rgba(101,196,255,.55);

    animation:
        srgsupParticle
        3.4s ease-in-out infinite;
}


.srgsup-particle-one {

    top: 19px;
    left: 88px;
}


.srgsup-particle-two {

    top: 110px;
    right: 3px;

    background: #52deae;

    animation-delay: -1.2s;
}


.srgsup-particle-three {

    bottom: 15px;
    left: 82px;

    background: #48d6ad;

    animation-delay: -2.1s;
}


/* two soft communication waves */

.srgsup-visual::before,
.srgsup-visual::after {

    content: "";

    position: absolute;

    z-index: 0;

    left: 50%;
    top: 50%;

    width: 62%;
    height: 62%;

    border-radius: 50%;

    border:
        1px solid
        rgba(83,184,230,.20);

    transform:
        translate(-50%,-50%)
        scale(.75);

    opacity: 0;

    animation:
        srgsupWave
        4.8s ease-out infinite;
}


.srgsup-visual::after {

    animation-delay: 2.4s;
}


/* =========================================================
   CONTENT
   ========================================================= */

.srgsup-content {

    display: grid;

    grid-template-columns:
        minmax(0,1.5fr)
        minmax(270px,.7fr);

    gap: 28px;

    align-items: start;

    margin-bottom: 60px;
}


.srgsup-form-wrap {

    padding:
        34px;

    border-radius: 27px;

    background:
        rgba(8,24,35,.62);

    border:
        1px solid
        rgba(255,255,255,.05);
}


.srgsup-section-head {

    margin-bottom: 29px;
}


.srgsup-section-head h2 {

    margin:
        12px 0
        12px;

    color: #e8eff2;

    font-size:
        clamp(32px,4vw,46px);

    line-height: 1.06;

    font-weight: 500;

    letter-spacing: -.03em;
}


.srgsup-section-head p {

    max-width: 620px;

    margin: 0;

    color: #7e8e98;

    font-size: 14px;

    line-height: 1.65;
}


/* =========================================================
   FORM
   ========================================================= */

.srgsup-form {

    display: grid;

    gap: 19px;
}


.srgsup-form-row {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 15px;
}


.srgsup-field {

    display: grid;

    gap: 8px;
}


.srgsup-field label {

    color: #91a0aa;

    font-size: 11px;

    font-weight: 500;

    letter-spacing: .05em;
}


.srgsup-field input,
.srgsup-field select,
.srgsup-field textarea {

    width: 100%;

    box-sizing: border-box;

    border:
        1px solid
        rgba(255,255,255,.07);

    outline: none;

    border-radius: 14px;

    background: #071722;

    color: #dfe8ec;

    font: inherit;

    font-size: 14px;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}


.srgsup-field input,
.srgsup-field select {

    height: 50px;

    padding:
        0 15px;
}


.srgsup-field textarea {

    min-height: 180px;

    resize: vertical;

    padding:
        15px;

    line-height: 1.55;
}


.srgsup-field input::placeholder,
.srgsup-field textarea::placeholder {

    color: #536570;
}


.srgsup-field input:focus,
.srgsup-field select:focus,
.srgsup-field textarea:focus {

    border-color:
        rgba(56,197,158,.34);

    box-shadow:
        0 0 0 3px
        rgba(32,196,145,.045);
}


.srgsup-submit-row {

    display: flex;

    align-items: center;

    gap: 18px;

    flex-wrap: wrap;

    margin-top: 2px;
}


.srgsup-submit {

    min-height: 51px;

    box-sizing: border-box;

    padding:
        0 24px;

    border: 0;

    border-radius: 15px;

    cursor: pointer;

    color: #f2fbf8;

    background:
        linear-gradient(
            90deg,
            #168da1,
            #20bf91
        );

    font: inherit;

    font-size: 14px;

    font-weight: 550;

    transition:
        transform .15s ease,
        opacity .15s ease;
}


.srgsup-submit:hover {

    transform:
        translateY(-1px);
}


.srgsup-submit:disabled {

    cursor: wait;

    opacity: .65;

    transform: none;
}


.srgsup-form-status {

    color: #84949e;

    font-size: 12px;

    line-height: 1.45;
}


.srgsup-form-status.srgsup-success {
    color: #43d7a8;
}


.srgsup-form-status.srgsup-error {
    color: #e48d8d;
}


/* =========================================================
   SIDE INFO
   ========================================================= */

.srgsup-info {

    display: grid;

    gap: 11px;
}


.srgsup-info-card {

    padding:
        21px;

    border-radius: 19px;

    background:
        rgba(8,24,35,.55);

    border:
        1px solid
        rgba(255,255,255,.045);
}


.srgsup-info-number {

    display: block;

    margin-bottom: 19px;

    color: #42cfa4;

    font-size: 9px;

    letter-spacing: .15em;
}


.srgsup-info-card strong {

    display: block;

    margin-bottom: 7px;

    color: #dce5e9;

    font-size: 14px;

    font-weight: 500;
}


.srgsup-info-card p {

    margin: 0;

    color: #74848f;

    font-size: 12px;

    line-height: 1.6;
}


.srgsup-faq-link {

    display: block;

    padding:
        21px;

    border-radius: 19px;

    text-decoration: none;

    background:
        rgba(76,143,220,.045);

    border:
        1px solid
        rgba(91,143,240,.09);
}


.srgsup-faq-link span {

    display: block;

    margin-bottom: 8px;

    color: #72838e;

    font-size: 11px;
}


.srgsup-faq-link strong {

    color: #74acef;

    font-size: 13px;

    font-weight: 500;
}


/* =========================================================
   ANIMATION
   ========================================================= */

@keyframes srgsupRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


@keyframes srgsupRotateReverse {

    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }

}


@keyframes srgsupBreath {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.025);
    }

}


@keyframes srgsupSweep {

    0% {
        top: -50%;
        opacity: 0;
    }

    25% {
        opacity: .8;
    }

    100% {
        top: 115%;
        opacity: 0;
    }

}


@keyframes srgsupCheck {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-7px);
    }

}


@keyframes srgsupParticle {

    0%,
    100% {
        opacity: .3;
        transform: scale(.8);
    }

    50% {
        opacity: 1;
        transform: scale(1.35);
    }

}


@keyframes srgsupWave {

    0% {

        transform:
            translate(-50%,-50%)
            scale(.72);

        opacity: .38;
    }

    100% {

        transform:
            translate(-50%,-50%)
            scale(1.47);

        opacity: 0;
    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media screen and (max-width: 980px) {

    .srgsup-page {

        width:
            min(100% - 40px,820px);

        padding-top: 70px;
    }


    .srgsup-hero {

        min-height: 430px;

        padding:
            20px 300px
            45px 0;

        margin-bottom: 60px;
    }


    .srgsup-visual {

        width: 245px;
        height: 245px;

        top: 15px;
        right: 0;
    }


    .srgsup-core {
        inset: 38px;
    }


    .srgsup-message-icon {

        width: 95px;
        height: 88px;
    }


    .srgsup-check {

        width: 52px;
        height: 52px;

        right: 18px;
        bottom: 26px;

        font-size: 22px;
    }


    .srgsup-content {

        grid-template-columns: 1fr;

        gap: 18px;
    }


    .srgsup-info {

        grid-template-columns:
            repeat(3,minmax(0,1fr));
    }


    .srgsup-faq-link {

        grid-column:
            1 / -1;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media screen and (max-width: 640px) {

    .srgsup-page {

        width:
            calc(100% - 30px);

        padding:
            48px 0
            35px;
    }


    .srgsup-hero {

        min-height: 0;

        padding: 0;

        margin-bottom: 65px;
    }


    .srgsup-copy h1 {

        font-size:
            clamp(49px,15vw,67px);

        line-height: .93;
    }


    .srgsup-copy p {

        font-size: 15px;
    }


    .srgsup-visual {

        position: relative;

        top: auto;
        right: auto;

        width:
            min(235px,72vw);

        height: auto;

        aspect-ratio: 1;

        margin:
            42px auto 0;
    }


    .srgsup-core {

        inset: 15%;
    }


    .srgsup-message-icon {

        width: 43%;
        height: auto;
    }


    .srgsup-check {

        width: 48px;
        height: 48px;

        right: 7%;
        bottom: 10%;

        font-size: 20px;
    }


    .srgsup-form-wrap {

        padding:
            25px 19px;

        border-radius: 22px;
    }


    .srgsup-form-row {

        grid-template-columns: 1fr;
    }


    .srgsup-submit-row {

        align-items: stretch;

        flex-direction: column;
    }


    .srgsup-submit {

        width: 100%;
    }


    .srgsup-info {

        grid-template-columns: 1fr;
    }


    .srgsup-faq-link {

        grid-column: auto;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .srgsup-orbit,
    .srgsup-core,
    .srgsup-core::before,
    .srgsup-check,
    .srgsup-particle,
    .srgsup-visual::before,
    .srgsup-visual::after {

        animation: none !important;
    }

}


/* SERGVPN SUPPORT FIELD HINT */

.srgsup-field-hint {
    margin-top: -2px;
    color: #586a75;
    font-size: 10px;
    line-height: 1.4;
}



/* =========================================================
   SERGVPN PRIVACY
   namespace: srgpriv-
   ========================================================= */

.srgpriv-page {
    width: min(1080px,calc(100% - 48px));
    margin: 0 auto;
    padding: 90px 0 60px;
}

.srgpriv-kicker {
    color: #71838f;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .27em;
}


/* HERO */

.srgpriv-hero {
    position: relative;
    min-height: 520px;
    box-sizing: border-box;
    padding: 45px 370px 60px 0;
    margin-bottom: 70px;
}

.srgpriv-copy h1 {
    margin: 20px 0 26px;
    color: #edf3f6;
    font-size: clamp(55px,6.5vw,88px);
    font-weight: 500;
    line-height: .92;
    letter-spacing: -.02em;
}

.srgpriv-copy h1 span {
    background:
        linear-gradient(
            92deg,
            #72a7f7,
            #ddf4ee 48%,
            #4fd3a6
        );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.srgpriv-copy p {
    max-width: 640px;
    margin: 0;
    color: #92a1ab;
    font-size: 17px;
    line-height: 1.7;
}

.srgpriv-date {
    margin-top: 25px;
    color: #566a75;
    font-size: 11px;
}


/* ICON */

.srgpriv-visual {
    position: absolute;
    top: 15px;
    right: 5px;
    width: 310px;
    height: 310px;
    border-radius: 50%;
}

.srgpriv-orbit {
    position: absolute;
    border-radius: 50%;
}

.srgpriv-orbit-one {
    inset: 0;
    border: 3px dashed rgba(32,196,145,.29);
    animation: srgprivRotate 22s linear infinite;
}

.srgpriv-orbit-two {
    inset: 23px;
    border: 2px solid rgba(83,166,236,.21);
    animation: srgprivReverse 30s linear infinite;
}

.srgpriv-core {
    position: absolute;
    inset: 48px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 50%;

    background:
        radial-gradient(
            circle at 38% 29%,
            #46d6a8,
            #20b28d 42%,
            #167f7e 70%,
            #17627a 100%
        );

    box-shadow:
        0 0 60px rgba(32,196,145,.13);

    animation:
        srgprivBreath 4.3s ease-in-out infinite;
}

.srgpriv-core::before {
    content: "";
    position: absolute;
    width: 170%;
    height: 42%;
    left: -35%;
    top: -50%;
    transform: rotate(-28deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(232,255,248,.12),
            transparent
        );

    animation:
        srgprivSweep 5.2s ease-in-out infinite;
}


/* LOCK */

.srgpriv-lock {
    position: relative;
    z-index: 2;
    width: 105px;
    height: 125px;
}

.srgpriv-lock-loop {
    position: absolute;
    left: 50%;
    top: 5px;

    width: 64px;
    height: 67px;

    transform: translateX(-50%);

    box-sizing: border-box;

    border: 13px solid rgba(247,255,252,.93);
    border-bottom: 0;

    border-radius:
        38px 38px
        0 0;
}

.srgpriv-lock-body {
    position: absolute;
    left: 50%;
    bottom: 3px;

    width: 102px;
    height: 75px;

    transform: translateX(-50%);

    display: grid;
    place-items: center;

    border-radius: 16px;

    background:
        rgba(245,255,252,.94);

    box-shadow:
        0 0 16px rgba(227,255,246,.16);
}

.srgpriv-lock-body i {
    position: relative;
    width: 12px;
    height: 23px;

    border-radius:
        8px 8px
        5px 5px;

    background: #168a73;
}

.srgpriv-lock-body i::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -8px;

    width: 14px;
    height: 14px;

    transform: translateX(-50%);

    border-radius: 50%;

    background: #168a73;
}


/* CHECK */

.srgpriv-check {
    position: absolute;
    z-index: 6;

    right: 23px;
    bottom: 34px;

    width: 64px;
    height: 64px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    color: #15845f;
    background: #f6fffb;

    border: 3px solid #092d27;

    font-size: 27px;
    font-weight: 650;

    box-shadow:
        0 12px 28px rgba(0,0,0,.21),
        0 0 24px rgba(32,196,145,.15);

    animation:
        srgprivCheck 3.2s ease-in-out infinite;
}


/* PARTICLES */

.srgpriv-particle {
    position: absolute;
    z-index: 5;

    width: 9px;
    height: 9px;

    border-radius: 50%;

    background: #4bdaad;

    box-shadow:
        0 0 12px rgba(75,218,173,.55);

    animation:
        srgprivParticle 3.4s ease-in-out infinite;
}

.srgpriv-particle-one {
    top: 20px;
    left: 89px;
}

.srgpriv-particle-two {
    top: 106px;
    right: 3px;
    background: #68b9f0;
    animation-delay: -1.2s;
}

.srgpriv-particle-three {
    bottom: 15px;
    left: 82px;
    animation-delay: -2.1s;
}


/* SUMMARY */

.srgpriv-summary {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 13px;
    margin-bottom: 90px;
}

.srgpriv-summary-card {
    min-height: 175px;
    box-sizing: border-box;
    padding: 24px;

    border-radius: 21px;

    background: rgba(8,24,35,.60);
    border: 1px solid rgba(255,255,255,.05);
}

.srgpriv-summary-card > span {
    display: block;
    margin-bottom: 28px;

    color: #36c99b;

    font-size: 9px;
    letter-spacing: .15em;
}

.srgpriv-summary-card strong {
    display: block;
    margin-bottom: 8px;

    color: #dfe7eb;

    font-size: 15px;
    font-weight: 500;
}

.srgpriv-summary-card p {
    margin: 0;
    color: #778792;
    font-size: 12px;
    line-height: 1.6;
}


/* POLICY */

.srgpriv-policy {
    display: grid;
    gap: 12px;
    margin-bottom: 70px;
}

.srgpriv-block {
    display: grid;
    grid-template-columns: 55px minmax(0,1fr);
    gap: 22px;

    padding: 29px 30px;

    border-radius: 22px;

    background: rgba(8,24,35,.54);

    border:
        1px solid rgba(255,255,255,.045);
}

.srgpriv-google {
    border-color:
        rgba(91,143,240,.10);

    background:
        linear-gradient(
            135deg,
            rgba(10,27,39,.73),
            rgba(7,23,33,.60)
        );
}

.srgpriv-number {
    color: #28c493;
    font-size: 10px;
    letter-spacing: .14em;
    padding-top: 6px;
}

.srgpriv-block h2 {
    margin: 0 0 14px;

    color: #e1e9ed;

    font-size:
        clamp(23px,3vw,30px);

    line-height: 1.15;

    font-weight: 500;

    letter-spacing: -.02em;
}

.srgpriv-block p {
    max-width: 830px;

    margin:
        0 0
        12px;

    color: #7f8f99;

    font-size: 14px;

    line-height: 1.72;
}

.srgpriv-block p:last-child {
    margin-bottom: 0;
}

.srgpriv-block a {
    display: inline-block;
    margin-top: 4px;

    color: #66cfae;

    font-size: 13px;

    text-decoration: none;
}


/* NOTE */

.srgpriv-note {
    display: grid;
    grid-template-columns: 42px minmax(0,1fr);
    gap: 17px;

    align-items: start;

    margin-bottom: 55px;

    padding: 23px 25px;

    border-radius: 21px;

    background: rgba(32,196,145,.035);

    border:
        1px solid rgba(32,196,145,.09);
}

.srgpriv-note-mark {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    color: #40cca0;
    background: rgba(32,196,145,.08);

    font-weight: 600;
}

.srgpriv-note strong {
    display: block;
    margin-bottom: 6px;

    color: #dfe8eb;

    font-size: 14px;
    font-weight: 500;
}

.srgpriv-note p {
    max-width: 850px;

    margin: 0;

    color: #75858f;

    font-size: 13px;

    line-height: 1.6;
}


/* ANIMATION */

@keyframes srgprivRotate {
    to {
        transform: rotate(360deg);
    }
}

@keyframes srgprivReverse {
    from {
        transform: rotate(360deg);
    }
    to {
        transform: rotate(0deg);
    }
}

@keyframes srgprivBreath {
    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.025);
    }
}

@keyframes srgprivSweep {
    0% {
        top: -50%;
        opacity: 0;
    }

    25% {
        opacity: .8;
    }

    100% {
        top: 115%;
        opacity: 0;
    }
}

@keyframes srgprivCheck {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-7px);
    }
}

@keyframes srgprivParticle {
    0%,
    100% {
        opacity: .3;
        transform: scale(.8);
    }

    50% {
        opacity: 1;
        transform: scale(1.35);
    }
}


/* TABLET */

@media screen and (max-width: 980px) {

    .srgpriv-page {
        width: min(100% - 40px,820px);
        padding-top: 70px;
    }

    .srgpriv-hero {
        min-height: 440px;
        padding: 20px 300px 45px 0;
    }

    .srgpriv-visual {
        width: 245px;
        height: 245px;
        right: 0;
    }

    .srgpriv-core {
        inset: 38px;
    }

    .srgpriv-lock {
        transform: scale(.78);
    }

    .srgpriv-check {
        width: 52px;
        height: 52px;

        right: 17px;
        bottom: 25px;

        font-size: 22px;
    }

}


/* MOBILE */

@media screen and (max-width: 640px) {

    .srgpriv-page {
        width: calc(100% - 30px);
        padding: 48px 0 35px;
    }

    .srgpriv-hero {
        min-height: 0;
        padding: 0;
        margin-bottom: 65px;
    }

    .srgpriv-copy h1 {
        font-size:
            clamp(43px,13vw,61px);

        line-height: .94;
    }

    .srgpriv-copy p {
        font-size: 15px;
    }

    .srgpriv-visual {
        position: relative;

        top: auto;
        right: auto;

        width: min(235px,72vw);
        height: auto;

        aspect-ratio: 1;

        margin: 42px auto 0;
    }

    .srgpriv-core {
        inset: 15%;
    }

    .srgpriv-lock {
        transform: scale(.68);
    }

    .srgpriv-check {
        width: 48px;
        height: 48px;

        right: 7%;
        bottom: 10%;

        font-size: 20px;
    }

    .srgpriv-summary {
        grid-template-columns: 1fr;
        margin-bottom: 65px;
    }

    .srgpriv-summary-card {
        min-height: 0;
    }

    .srgpriv-block {
        grid-template-columns: 1fr;
        gap: 13px;

        padding: 23px 20px;
    }

    .srgpriv-number {
        padding-top: 0;
    }

    .srgpriv-block p {
        font-size: 13px;
    }

    .srgpriv-note {
        padding: 19px;
    }

}


/* REDUCED MOTION */

@media (prefers-reduced-motion: reduce) {

    .srgpriv-orbit,
    .srgpriv-core,
    .srgpriv-core::before,
    .srgpriv-check,
    .srgpriv-particle {

        animation: none !important;
    }

}


/* =========================================================
   PRIVACY HERO FINAL LAYOUT FIX
   ========================================================= */


/* немного шире контейнер, как на остальных страницах */

.srgpriv-page {
    width:
        min(1180px,calc(100% - 48px)) !important;
}


/* нормальная двухколоночная сетка */

.srgpriv-hero {

    display: grid !important;

    grid-template-columns:
        minmax(0,1fr)
        310px !important;

    align-items: center !important;

    gap: 70px !important;

    min-height: 540px !important;

    padding:
        35px 0
        55px !important;

    margin-bottom:
        70px !important;
}


.srgpriv-copy {

    min-width: 0 !important;
}


/* длинное слово больше не заходит под иконку */

.srgpriv-copy h1 {

    max-width: 100% !important;

    margin:
        20px 0
        26px !important;

    font-size:
        clamp(50px,4.25vw,69px) !important;

    line-height:
        .94 !important;

    letter-spacing:
        -.025em !important;
}


/* иконка теперь занимает собственную колонку */

.srgpriv-visual {

    position: relative !important;

    top: auto !important;
    right: auto !important;

    width: 310px !important;
    height: 310px !important;

    margin:
        0 0
        0 auto !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media screen and (max-width: 980px) {

    .srgpriv-page {

        width:
            min(100% - 40px,820px) !important;
    }


    .srgpriv-hero {

        grid-template-columns:
            minmax(0,1fr)
            245px !important;

        gap:
            40px !important;

        min-height:
            430px !important;

        padding:
            20px 0
            45px !important;
    }


    .srgpriv-copy h1 {

        font-size:
            clamp(43px,6vw,57px) !important;
    }


    .srgpriv-visual {

        width:
            245px !important;

        height:
            245px !important;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media screen and (max-width: 640px) {

    .srgpriv-page {

        width:
            calc(100% - 30px) !important;
    }


    .srgpriv-hero {

        display: flex !important;

        flex-direction:
            column !important;

        align-items:
            stretch !important;

        gap:
            0 !important;

        min-height:
            0 !important;

        padding:
            0 !important;

        margin-bottom:
            65px !important;
    }


    .srgpriv-copy h1 {

        font-size:
            clamp(40px,12vw,54px) !important;

        line-height:
            .95 !important;
    }


    .srgpriv-visual {

        width:
            min(235px,72vw) !important;

        height:
            auto !important;

        aspect-ratio:
            1 !important;

        margin:
            42px auto 0 !important;
    }

}


/* =========================================================
   PRIVACY MOBILE LONG TITLE FIX
   ========================================================= */

@media screen and (max-width: 640px) {

    .srgpriv-copy {
        width: 100% !important;
        min-width: 0 !important;
    }


    .srgpriv-copy h1 {

        width: 100% !important;
        max-width: 100% !important;

        overflow: visible !important;

        font-size:
            clamp(42px,12vw,54px) !important;

        line-height:
            .96 !important;
    }


    /*
     * Long second line must fit even on narrow phones.
     */

    .srgpriv-copy h1 span {

        display: block !important;

        width: 100% !important;

        margin-top: 5px !important;

        font-size:
            clamp(24px,7.7vw,34px) !important;

        line-height:
            1.05 !important;

        letter-spacing:
            -.025em !important;

        white-space:
            nowrap !important;
    }


    .srgpriv-copy p {

        width: 100% !important;

        max-width: 100% !important;
    }


    .srgpriv-date {

        width: 100% !important;
    }


    .srgpriv-visual {

        position: relative !important;

        width:
            min(235px,72vw) !important;

        height: auto !important;

        aspect-ratio:
            1 !important;

        margin:
            42px auto 0 !important;
    }

}


/* Extra narrow phones */

@media screen and (max-width: 360px) {

    .srgpriv-copy h1 span {

        font-size:
            clamp(22px,7.4vw,27px) !important;
    }


    .srgpriv-visual {

        width:
            min(220px,74vw) !important;
    }

}


/* =========================================================
   SERGVPN LANGUAGE SELECTOR
   ========================================================= */

.srg-lang-selector {

    position: relative;

    z-index: 200;
}


.srg-lang-button {

    height: 46px;

    min-width: 64px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 8px;

    padding: 0 15px;

    box-sizing: border-box;

    border-radius: 23px;

    border:
        1px solid
        rgba(91,143,240,.15);

    background:
        rgba(6,19,29,.76);

    color:
        #93a3ad;

    cursor: pointer;

    font: inherit;

    font-size: 12px;

    font-weight: 550;

    letter-spacing: .08em;

    transition:
        border-color .2s ease,
        color .2s ease,
        background .2s ease;
}


.srg-lang-button:hover {

    color:
        #e8f0f3;

    border-color:
        rgba(32,196,145,.28);
}


.srg-lang-chevron {

    width: 6px;
    height: 6px;

    border-right:
        1.5px solid currentColor;

    border-bottom:
        1.5px solid currentColor;

    transform:
        translateY(-2px)
        rotate(45deg);

    transition:
        transform .2s ease;
}


.srg-lang-selector.is-open
.srg-lang-chevron {

    transform:
        translateY(2px)
        rotate(225deg);
}


.srg-lang-menu {

    position: absolute;

    top:
        calc(100% + 10px);

    right: 0;

    width: 205px;

    box-sizing: border-box;

    padding: 7px;

    display: none;

    border-radius: 18px;

    background:
        rgba(5,18,27,.98);

    border:
        1px solid
        rgba(255,255,255,.07);

    box-shadow:
        0 18px 50px
        rgba(0,0,0,.30);

    backdrop-filter:
        blur(18px);
}


.srg-lang-selector.is-open
.srg-lang-menu {

    display: grid;
}


.srg-lang-option {

    width: 100%;

    min-height: 42px;

    display: grid;

    grid-template-columns:
        36px 1fr;

    align-items: center;

    gap: 7px;

    padding:
        0 11px;

    border: 0;

    border-radius: 11px;

    background:
        transparent;

    color:
        #8999a3;

    cursor: pointer;

    text-align: left;

    font: inherit;

    transition:
        background .15s ease,
        color .15s ease;
}


.srg-lang-option:hover {

    color:
        #e6eef1;

    background:
        rgba(255,255,255,.035);
}


.srg-lang-option.is-active {

    color:
        #48d4a7;

    background:
        rgba(32,196,145,.06);
}


.srg-lang-option-code {

    color:
        #647985;

    font-size: 9px;

    letter-spacing: .11em;
}


.srg-lang-option.is-active
.srg-lang-option-code {

    color:
        #35c89a;
}


.srg-lang-option-label {

    font-size: 13px;

    white-space: nowrap;
}


/*
 * Mobile drawer version.
 */

.srg-drawer-language {

    margin-top: 5px;

    padding-top: 15px;

    border-top:
        1px solid
        rgba(255,255,255,.05);
}


.srg-drawer-language
.srg-lang-button {

    width: 100%;

    justify-content:
        space-between;

    border-radius:
        13px;
}


.srg-drawer-language
.srg-lang-menu {

    position: static;

    width: 100%;

    margin-top: 8px;

    box-shadow: none;

    background:
        rgba(255,255,255,.018);
}


@media screen and (max-width: 980px) {

    /*
     * Desktop selector will later be hidden
     * together with the desktop navigation.
     */

    .srg-header-language {
        display: none !important;
    }

}


/* RTL preparation */

html[dir="rtl"] {

    direction: rtl;
}


html[dir="rtl"]
.srg-lang-menu {

    right: auto;
    left: 0;
}


html[dir="rtl"]
.srg-lang-option {

    text-align: right;
}



/* =========================================================
   SERGVPN KOREAN
   ========================================================= */

html[lang="ko"] body {

    font-family:
        system-ui,
        -apple-system,
        "Apple SD Gothic Neo",
        "Noto Sans KR",
        "Malgun Gothic",
        "Segoe UI",
        sans-serif;
}


html[lang="ko"] [class*="kicker"] {

    letter-spacing:
        .10em !important;
}


html[lang="ko"] h1,
html[lang="ko"] h2,
html[lang="ko"] h3 {

    word-break:
        keep-all;

    overflow-wrap:
        break-word;
}


html[lang="ko"] p,
html[lang="ko"] .srgfaq-question,
html[lang="ko"] .srgfaq-answer {

    word-break:
        keep-all;

    overflow-wrap:
        break-word;
}


/* Korean hero titles can be slightly more compact */

html[lang="ko"] .hero h1,
html[lang="ko"] .srgdl-hero h1,
html[lang="ko"] .srghow-copy h1,
html[lang="ko"] .srgsec-copy h1,
html[lang="ko"] .srgfaq-hero h1,
html[lang="ko"] .srgsup-copy h1,
html[lang="ko"] .srgpriv-copy h1 {

    letter-spacing:
        -.035em !important;
}



/* =========================================================
   SERGVPN GERMAN
   ========================================================= */

html[lang="de"] h1,
html[lang="de"] h2,
html[lang="de"] h3,
html[lang="de"] p,
html[lang="de"] .srgfaq-question {

    overflow-wrap:
        break-word;

    hyphens:
        auto;
}


html[lang="de"] [class*="kicker"] {

    letter-spacing:
        .16em !important;
}


/* Slightly tighter desktop navigation */

html[lang="de"]
.header .nav {

    gap:
        19px;
}


html[lang="de"]
.header .nav a {

    font-size:
        12px;
}


/* Long hero words */

html[lang="de"]
.srgpriv-copy h1 {

    font-size:
        clamp(48px,4vw,66px) !important;
}


@media screen and (max-width: 640px) {

    html[lang="de"]
    .srgpriv-copy h1 {

        font-size:
            clamp(38px,11vw,51px)
            !important;
    }


    html[lang="de"]
    .srgpriv-copy h1 span {

        white-space:
            normal !important;

        font-size:
            .78em !important;
    }

}


/* =========================================================
   SERGVPN SIMPLIFIED CHINESE
   ========================================================= */

html[lang="zh-CN"] body {

    font-family:
        system-ui,
        -apple-system,
        "PingFang SC",
        "Microsoft YaHei",
        "Noto Sans CJK SC",
        "Source Han Sans SC",
        Arial,
        sans-serif;
}


html[lang="zh-CN"] h1,
html[lang="zh-CN"] h2,
html[lang="zh-CN"] h3,
html[lang="zh-CN"] p {

    word-break:
        normal;

    overflow-wrap:
        break-word;
}


html[lang="zh-CN"] [class*="kicker"] {

    letter-spacing:
        .08em !important;
}


html[lang="zh-CN"] .hero h1,
html[lang="zh-CN"] .srgdl-hero h1,
html[lang="zh-CN"] .srghow-copy h1,
html[lang="zh-CN"] .srgsec-copy h1,
html[lang="zh-CN"] .srgfaq-hero h1,
html[lang="zh-CN"] .srgsup-copy h1,
html[lang="zh-CN"] .srgpriv-copy h1 {

    letter-spacing:
        -.02em !important;
}


/* Chinese navigation can be slightly tighter */

html[lang="zh-CN"] .header .nav {

    gap:
        24px;
}


html[lang="zh-CN"] .header .nav a {

    letter-spacing:
        0 !important;
}


/* Mobile Chinese privacy title */

@media screen and (max-width: 640px) {

    html[lang="zh-CN"]
    .srgpriv-copy h1 span {

        white-space:
            nowrap !important;

        font-size:
            1em !important;
    }

}



/* =========================================================
   SERGVPN SPANISH
   ========================================================= */

html[lang="es"] h1,
html[lang="es"] h2,
html[lang="es"] h3,
html[lang="es"] p,
html[lang="es"] .srgfaq-question {

    overflow-wrap:
        break-word;
}


html[lang="es"] [class*="kicker"] {

    letter-spacing:
        .13em !important;
}


/* Spanish navigation contains longer labels */

html[lang="es"] .header .nav {

    gap:
        18px;
}


html[lang="es"] .header .nav a {

    font-size:
        12px;
}


html[lang="es"] .srgpriv-copy h1 {

    font-size:
        clamp(48px,4.1vw,67px)
        !important;
}


@media screen and (max-width: 640px) {

    html[lang="es"] .srgpriv-copy h1 {

        font-size:
            clamp(38px,11vw,52px)
            !important;
    }

}



/* =========================================================
   SERGVPN FINAL LANGUAGE SWITCHER
   ========================================================= */

.srg-lang-selector {
    position: relative;
    flex: 0 0 auto;
    z-index: 250;
}


.srg-lang-button {
    height: 40px;
    min-width: 62px;
    padding: 0 13px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    border: 1px solid rgba(255,255,255,.12);
    border-radius: 12px;

    background:
        rgba(9,24,39,.82);

    color:
        #f2f5f7;

    font-family:
        inherit;

    font-size:
        12px;

    font-weight:
        800;

    letter-spacing:
        .08em;

    line-height:
        1;

    cursor:
        pointer;

    transition:
        border-color .18s ease,
        background .18s ease,
        transform .18s ease;
}


.srg-lang-button:hover {
    border-color:
        rgba(91,143,240,.48);

    background:
        rgba(11,29,43,.98);
}


.srg-lang-button:active {
    transform:
        translateY(1px);
}


.srg-lang-arrow {
    display: inline-block;

    color:
        #84919f;

    font-size:
        15px;

    line-height:
        1;

    transform:
        translateY(-1px);

    transition:
        transform .18s ease;
}


.srg-lang-selector.is-open
.srg-lang-arrow {
    transform:
        rotate(180deg)
        translateY(1px);
}


.srg-lang-menu {
    position: absolute;

    top:
        calc(100% + 10px);

    right:
        0;

    width:
        210px;

    padding:
        7px;

    border:
        1px solid
        rgba(255,255,255,.10);

    border-radius:
        15px;

    background:
        rgba(6,19,29,.98);

    box-shadow:
        0 18px 50px
        rgba(0,0,0,.38);

    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;

    transform:
        translateY(-5px);

    transition:
        opacity .16s ease,
        visibility .16s ease,
        transform .16s ease;
}


.srg-lang-selector.is-open
.srg-lang-menu {
    opacity:
        1;

    visibility:
        visible;

    pointer-events:
        auto;

    transform:
        translateY(0);
}


.srg-lang-option {
    width:
        100%;

    min-height:
        42px;

    padding:
        8px 10px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        14px;

    border-radius:
        10px;

    color:
        #c7d0d9;

    text-decoration:
        none;

    font-size:
        13px;

    font-weight:
        650;

    line-height:
        1.25;

    transition:
        color .15s ease,
        background .15s ease;
}


.srg-lang-option:hover {
    color:
        #ffffff;

    background:
        rgba(91,143,240,.10);
}


.srg-lang-option.is-active {
    color:
        #20c491;

    background:
        rgba(32,196,145,.08);
}


.srg-lang-option-code {
    flex:
        0 0 auto;

    color:
        #697887;

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        .08em;
}


.srg-lang-option.is-active
.srg-lang-option-code {
    color:
        #20c491;
}


.srg-header-language {
    margin:
        0 10px;
}


html[dir="rtl"]
.srg-lang-menu {
    right:
        auto;

    left:
        0;
}


html[dir="rtl"]
.srg-lang-option {
    text-align:
        right;
}


/* =========================================================
   MOBILE DRAWER LANGUAGE SELECTOR
   ========================================================= */

.srg-drawer-language {
    display:
        none;
}


@media screen and (max-width: 980px) {

    .srg-header-language {
        display:
            none !important;
    }


    .srg-drawer-language {
        display:
            block;

        width:
            auto;

        margin:
            18px 18px 14px;

        padding:
            0;
    }


    .srg-drawer-language
    .srg-lang-button {
        width:
            100%;

        height:
            44px;

        justify-content:
            space-between;

        padding:
            0 14px;
    }


    .srg-drawer-language
    .srg-lang-menu {
        position:
            static;

        width:
            100%;

        margin-top:
            8px;

        transform:
            none;

        box-shadow:
            none;
    }


    .srg-drawer-language.is-open
    .srg-lang-menu {
        transform:
            none;
    }


    .srg-drawer-language
    .srg-lang-option {
        min-height:
            40px;
    }

}



/* =========================================================
   SERGVPN TERMS OF SERVICE
   ========================================================= */

.srgterms-page {
    width: min(1180px, calc(100% - 48px));
    margin: 0 auto;
    padding: 72px 0 90px;
}

.srgterms-hero {
    min-height: 420px;

    display: grid;
    grid-template-columns: minmax(0,1fr) 310px;
    align-items: center;
    gap: 70px;

    padding-bottom: 65px;
}

.srgterms-kicker {
    margin-bottom: 18px;

    color: #20c491;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: .17em;
}

.srgterms-copy h1 {
    margin: 0;

    color: #f2f5f7;

    font-size: clamp(52px,5vw,76px);
    font-weight: 900;
    line-height: .98;
    letter-spacing: -.045em;
}

.srgterms-copy h1 span {
    color: #5b8ff0;
}

.srgterms-updated {
    margin-top: 25px;

    color: #84919f;

    font-size: 14px;
}

.srgterms-visual {
    width: 310px;
    height: 310px;

    display: grid;
    place-items: center;

    position: relative;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(32,196,145,.20),
            rgba(91,143,240,.08) 48%,
            transparent 70%
        );
}

.srgterms-visual::before,
.srgterms-visual::after {
    content: "";

    position: absolute;

    border-radius: 50%;
}

.srgterms-visual::before {
    inset: 25px;

    border:
        1px dashed rgba(32,196,145,.32);

    animation:
        srgtermsRotate 18s linear infinite;
}

.srgterms-visual::after {
    inset: 48px;

    border:
        1px solid rgba(91,143,240,.23);

    animation:
        srgtermsRotateReverse 14s linear infinite;
}

.srgterms-document {
    width: 126px;
    height: 158px;

    position: relative;
    z-index: 2;

    padding: 35px 22px 20px;

    border:
        2px solid rgba(255,255,255,.88);

    border-radius: 16px;

    background:
        linear-gradient(
            145deg,
            rgba(242,250,247,.97),
            rgba(213,249,235,.90)
        );

    box-shadow:
        0 0 40px rgba(32,196,145,.36);
}

.srgterms-document span {
    display: block;

    height: 6px;

    margin-bottom: 12px;

    border-radius: 99px;

    background:
        rgba(6,19,29,.23);
}

.srgterms-document span:nth-child(2) {
    width: 76%;
}

.srgterms-document span:nth-child(3) {
    width: 87%;
}

.srgterms-document span:nth-child(4) {
    width: 58%;
}

.srgterms-check {
    width: 46px;
    height: 46px;

    position: absolute;

    right: -19px;
    bottom: -19px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: #20c491;

    color: #fff;

    font-size: 25px;
    font-weight: 900;

    box-shadow:
        0 0 28px rgba(32,196,145,.55);
}

.srgterms-content {
    display: grid;
    gap: 18px;
}

.srgterms-block {
    padding: 27px 30px;

    border:
        1px solid rgba(255,255,255,.07);

    border-radius: 18px;

    background:
        rgba(9,24,39,.70);
}

.srgterms-block h2 {
    margin: 0 0 11px;

    color: #f2f5f7;

    font-size: 20px;
}

.srgterms-block p {
    margin: 0;

    color: #9ba8b5;

    font-size: 15px;
    line-height: 1.72;
}


@keyframes srgtermsRotate {
    to {
        transform: rotate(360deg);
    }
}

@keyframes srgtermsRotateReverse {
    to {
        transform: rotate(-360deg);
    }
}


/* Arabic */

html[dir="rtl"] .srgterms-page,
html[dir="rtl"] .srgterms-block {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] .srgterms-copy h1,
html[dir="rtl"] .srgterms-copy p {
    text-align: right;
}


/* Tablet */

@media screen and (max-width: 980px) {

    .srgterms-page {
        width:
            min(100% - 36px, 1000px);
    }

    .srgterms-hero {
        grid-template-columns:
            minmax(0,1fr) 245px;

        gap:
            40px;
    }

    .srgterms-visual {
        width: 245px;
        height: 245px;
    }

}


/* Mobile */

@media screen and (max-width: 640px) {

    .srgterms-page {
        width: calc(100% - 30px);

        padding-top: 45px;
    }

    .srgterms-hero {
        display: flex;
        flex-direction: column;
        align-items: stretch;

        min-height: 0;

        gap: 32px;

        padding-bottom: 45px;
    }

    .srgterms-copy h1 {
        font-size:
            clamp(39px,12vw,56px);
    }

    .srgterms-visual {
        width: 235px;
        height: 235px;

        margin: 0 auto;
    }

    .srgterms-document {
        transform: scale(.83);
    }

    .srgterms-block {
        padding: 22px 20px;
    }

    .srgterms-block h2 {
        font-size: 18px;
    }

}



/* =========================================================
   SERGVPN RELEASE DOWNLOAD COMPONENT
   ========================================================= */

.sergvpn-release-download {
    width: min(760px, calc(100% - 32px));

    margin:
        20px auto 58px;

    padding:
        42px 34px;

    position: relative;

    overflow: hidden;

    text-align: center;

    border:
        1px solid rgba(32,196,145,.24);

    border-radius:
        24px;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(32,196,145,.15),
            transparent 55%
        ),
        rgba(8,22,35,.88);

    box-shadow:
        0 20px 70px rgba(0,0,0,.24);
}


.sergvpn-release-download::before {
    content: "";

    width: 230px;
    height: 230px;

    position: absolute;

    left: 50%;
    top: -170px;

    transform:
        translateX(-50%);

    border-radius:
        50%;

    background:
        rgba(32,196,145,.20);

    filter:
        blur(55px);

    pointer-events:
        none;
}


.sergvpn-release-badge {
    margin-bottom:
        14px;

    color:
        #20c491;

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        .16em;
}


.sergvpn-release-download h2 {
    margin:
        0 0 10px;

    color:
        #f4f8fa;

    font-size:
        clamp(30px,5vw,46px);

    font-weight:
        900;

    letter-spacing:
        -.035em;
}


.sergvpn-release-status {
    margin:
        0 0 27px;

    color:
        #98a7b4;

    font-size:
        15px;
}


.sergvpn-release-button {
    min-width:
        230px;

    min-height:
        54px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0 28px;

    border-radius:
        14px;

    background:
        linear-gradient(
            135deg,
            #20c491,
            #18a97d
        );

    color:
        #04140f !important;

    text-decoration:
        none !important;

    font-size:
        15px;

    font-weight:
        900;

    box-shadow:
        0 12px 35px
        rgba(32,196,145,.25);

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        filter .18s ease;
}


.sergvpn-release-button:hover {
    transform:
        translateY(-2px);

    box-shadow:
        0 16px 40px
        rgba(32,196,145,.34);

    filter:
        brightness(1.06);
}


.sergvpn-release-button:active {
    transform:
        translateY(0);
}


.sergvpn-release-note {
    margin:
        16px 0 0;

    color:
        #667783;

    font-size:
        12px;
}


html[dir="rtl"] .sergvpn-release-download {
    direction:
        rtl;
}


@media screen and (max-width: 640px) {

    .sergvpn-release-download {
        width:
            calc(100% - 30px);

        margin-bottom:
            40px;

        padding:
            34px 20px;
    }


    .sergvpn-release-button {
        width:
            100%;

        min-width:
            0;
    }

}



/* =========================================================
   SERGVPN ACTIVE APK CONTROLS
   ========================================================= */

.srgdl-meta-download {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition:
        border-color .18s ease,
        background .18s ease,
        transform .18s ease;
}

.srgdl-meta-download:hover {
    border-color: rgba(32,196,145,.42);
    background: rgba(32,196,145,.07);
    transform: translateY(-2px);
}

.srgdl-meta-download strong {
    color: #20c491;
}


.srgdl-download-active {
    cursor: pointer;

    color: #04140f !important;

    text-decoration: none !important;

    background:
        linear-gradient(
            135deg,
            #2bd6a0,
            #20b889
        ) !important;

    border-color:
        rgba(65,235,179,.60) !important;

    opacity: 1 !important;

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        filter .18s ease;
}

.srgdl-download-active:hover {
    transform: translateY(-2px);

    filter: brightness(1.06);

    box-shadow:
        0 12px 32px
        rgba(32,196,145,.25);
}

.srgdl-download-active:active {
    transform: translateY(0);
}