:root {

    --background: #050914;

    --background-soft: #091222;

    --panel: rgba(10, 18, 34, 0.72);

    --panel-strong: rgba(7, 13, 26, 0.94);

    --text: #f5f7fb;

    --text-muted: #9aa8bc;

    --line: rgba(135, 161, 202, 0.18);

    --blue: #5266ff;

    --blue-light: #7396ff;

    --green: #aaff00;

    --green-soft: #7adf00;

    --red: #ff2e3f;

    --header-height: 82px;

    --content-width: var(--cms-content-width,1240px);

    --radius-large: 30px;

    --radius-medium: 20px;

    --shadow: 0 30px 90px rgba(0, 0, 0, 0.45);

}



* {

    box-sizing: border-box;

}



html {

    scroll-behavior: smooth;

    scroll-padding-top: calc(var(--header-height) + 20px);

}



body {

    min-width: 320px;

    margin: 0;

    overflow-x: hidden;

    color: var(--text);

    background: var(--background);

    font-family: Inter, "Segoe UI", Arial, sans-serif;

    line-height: 1.6;

}

.lightbox-nav{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:56px;
    height:56px;
    border:none;
    border-radius:50%;
    cursor:pointer;
    font-size:32px;
    z-index:20;
}

.lightbox-prev{
    left:25px;
}

.lightbox-next{
    right:25px;
}


body.menu-open {

    overflow: hidden;

}



a {

    color: inherit;

}



button,

a {

    -webkit-tap-highlight-color: transparent;

}



.page-background {

    position: fixed;

    inset: 0;

    z-index: -10;

    overflow: hidden;

    background:

        radial-gradient(circle at 50% 0%, rgba(34, 63, 110, 0.25), transparent 42%),

        linear-gradient(180deg, #07101d 0%, #050914 55%, #040712 100%);

}



.background-grid {

    position: absolute;

    inset: 0;

    opacity: 0.16;

    background-image:

        linear-gradient(rgba(87, 117, 167, 0.14) 1px, transparent 1px),

        linear-gradient(90deg, rgba(87, 117, 167, 0.14) 1px, transparent 1px);

    background-size: 64px 64px;

    mask-image: linear-gradient(to bottom, black, transparent 85%);

}



.background-glow {

    position: absolute;

    width: 520px;

    height: 520px;

    border-radius: 50%;

    filter: blur(110px);

    opacity: 0.14;

}



.background-glow-blue {

    top: 8%;

    right: -170px;

    background: var(--blue);

}



.background-glow-green {

    bottom: 2%;

    left: -220px;

    background: var(--green);

}



.site-header {

    position: fixed;

    top: 0;

    right: 0;

    left: 0;

    z-index: 1000;

    height: var(--header-height);

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 32px;

    width: 100%;

    max-width: none;

    padding: 0 max(var(--rwd-gutter, 28px), calc((100vw - var(--cms-content-width, 1180px)) / 2));

    border-bottom: 1px solid transparent;

    transition:

        background 180ms ease,

        border-color 180ms ease,

        backdrop-filter 180ms ease;

}



.site-header.scrolled {

    border-color: var(--line);

    background: rgba(5, 9, 20, 0.78);

    backdrop-filter: blur(20px);

}



.brand {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    text-decoration: none;

}



.brand-mark {

    display: grid;

    width: 42px;

    height: 42px;

    place-items: center;

    color: var(--text);

    border: 1px solid rgba(103, 132, 255, 0.5);

    border-radius: 13px;

    background:

        linear-gradient(145deg, rgba(81, 101, 255, 0.34), rgba(9, 16, 31, 0.75));

    box-shadow:

        inset 0 0 18px rgba(82, 102, 255, 0.22),

        0 0 24px rgba(82, 102, 255, 0.12);

    font-size: 24px;

    font-weight: 800;

    font-style: italic;

}



.brand-name {

    color: #f3f5f8;

    font-size: 20px;

    font-weight: 650;

    letter-spacing: 0.2px;

}



.brand-name span {

    color: var(--green);

}



.brand-name em {

    color: var(--red);

    font-family: "Segoe Script", cursive;

    font-size: 0.82em;

    font-weight: 500;

}



.main-navigation {

    display: flex;

    align-items: center;

    gap: 5px;

}



.main-navigation a {

    position: relative;

    padding: 10px 14px;

    color: #c6d0de;

    border-radius: 10px;

    text-decoration: none;

    font-size: 14px;

    font-weight: 600;

    transition:

        color 160ms ease,

        background 160ms ease;

}



.main-navigation a:hover,

.main-navigation a:focus-visible {

    color: #ffffff;

    background: rgba(255, 255, 255, 0.06);

    outline: none;

}



.main-navigation a::after {

    position: absolute;

    right: 15px;

    bottom: 5px;

    left: 15px;

    height: 1px;

    content: "";

    opacity: 0;

    background: linear-gradient(90deg, var(--blue), var(--green));

    transform: scaleX(0);

    transition:

        opacity 160ms ease,

        transform 160ms ease;

}



.main-navigation a:hover::after {

    opacity: 1;

    transform: scaleX(1);

}



.menu-toggle {

    display: none;

    width: 46px;

    height: 46px;

    padding: 0;

    cursor: pointer;

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

    border-radius: 12px;

    background: rgba(255, 255, 255, 0.04);

}



.menu-toggle span {

    display: block;

    width: 20px;

    height: 2px;

    margin: 5px auto;

    background: var(--text);

    transition: 180ms ease;

}



.hero {

    position: relative;

    min-height: 100svh;

    display: grid;

    grid-template-columns: minmax(320px, 0.82fr) minmax(420px, 1.18fr);

    align-items: center;

    gap: clamp(40px, 6vw, 100px);

    width: min(calc(100% - (2 * var(--rwd-gutter,28px))), var(--content-width));

    margin: 0 auto;

    padding: calc(var(--header-height) + 48px) 0 72px;

}



.hero-copy {

    position: relative;

    z-index: 2;

}



.eyebrow {

    margin: 0 0 12px;

    color: var(--green);

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 0.16em;

    text-transform: uppercase;

}



.hero h1,

.section-heading h2,

.security-copy h2,

.download-card h2 {

    margin: 0;

    line-height: 1.04;

    letter-spacing: -0.045em;

}



.hero h1 {

    max-width: 680px;

    font-size: clamp(42px, 5.5vw, 78px);

    font-weight: 750;

}



.hero h1 span {

    display: block;

    color: transparent;

    background: linear-gradient(90deg, #ffffff 3%, #aebfff 48%, var(--green) 100%);

    background-clip: text;

    -webkit-background-clip: text;

}



.hero-description {

    max-width: 590px;

    margin: 26px 0 0;

    color: var(--text-muted);

    font-size: clamp(17px, 1.6vw, 20px);

}



.hero-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 14px;

    margin-top: 34px;

}



.button {

    display: inline-flex;

    min-height: 52px;

    align-items: center;

    justify-content: center;

    gap: 11px;

    padding: 13px 23px;

    border: 1px solid transparent;

    border-radius: 14px;

    text-decoration: none;

    font-size: 15px;

    font-weight: 750;

    transition:

        transform 160ms ease,

        box-shadow 160ms ease,

        background 160ms ease,

        border-color 160ms ease;

}



.button:hover {

    transform: translateY(-2px);

}



.button-primary {

    color: #071000;

    background: linear-gradient(135deg, #c2ff2c 0%, var(--green) 50%, #79df00 100%);

    box-shadow:

        0 15px 40px rgba(145, 255, 0, 0.16),

        inset 0 1px 0 rgba(255, 255, 255, 0.55);

}



.button-primary:hover {

    box-shadow:

        0 18px 48px rgba(145, 255, 0, 0.26),

        0 0 28px rgba(145, 255, 0, 0.14);

}



.button-secondary {

    color: #eef3fb;

    border-color: var(--line);

    background: rgba(255, 255, 255, 0.045);

    backdrop-filter: blur(12px);

}



.button-secondary:hover {

    border-color: rgba(111, 141, 255, 0.45);

    background: rgba(83, 103, 255, 0.08);

}



.button-icon {

    font-size: 20px;

    line-height: 1;

}



.button-large {

    min-width: 230px;

    min-height: 58px;

    font-size: 17px;

}



.hero-status {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-top: 24px;

    color: #8493a8;

    font-size: 13px;

}



.status-dot {

    width: 8px;

    height: 8px;

    border-radius: 50%;

    background: var(--green);

    box-shadow: 0 0 14px rgba(170, 255, 0, 0.8);

}



.hero-visual {

    min-width: 0;

    text-align: center;

}



.logo-stage {

    position: relative;

    width: min(100%, 760px);

    margin: 0 auto;

    border: 1px solid rgba(128, 153, 204, 0.16);

    border-radius: 34px;

    background:

        radial-gradient(circle at center, rgba(27, 43, 78, 0.23), transparent 66%),

        rgba(3, 8, 17, 0.45);

    box-shadow:

        var(--shadow),

        inset 0 0 70px rgba(48, 76, 130, 0.08);

    overflow: hidden;

    transform: translateZ(0);

}



.logo-stage::before {

    position: absolute;

    inset: 0;

    z-index: 2;

    pointer-events: none;

    content: "";

    border-radius: inherit;

    box-shadow:

        inset 0 0 34px rgba(82, 102, 255, 0.06),

        inset 0 0 80px rgba(0, 0, 0, 0.22);

}



.hero-logo {

    display: block;

    width: 100%;

    height: auto;

    object-fit: contain;

    transform: scale(0.93);

    transition:

        transform 500ms cubic-bezier(.2, .8, .2, 1),

        filter 500ms ease;

}



.logo-stage:hover .hero-logo {

    filter: saturate(1.08) contrast(1.03);

    transform: scale(0.96);

}



.logo-hotspot {

    position: absolute;

    z-index: 4;

    display: block;

    border: 1px solid transparent;

    border-radius: 24px;

    text-decoration: none;

    transition:

        border-color 180ms ease,

        background 180ms ease,

        box-shadow 180ms ease,

        transform 180ms ease;

}



.logo-hotspot span {

    position: absolute;

    z-index: 5;

    left: 50%;

    bottom: calc(100% + 12px);

    min-width: max-content;

    padding: 8px 12px;

    color: #eff5ff;

    border: 1px solid rgba(115, 145, 255, 0.35);

    border-radius: 9px;

    opacity: 0;

    background: rgba(6, 13, 27, 0.94);

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);

    font-size: 12px;

    font-weight: 750;

    pointer-events: none;

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

    transition:

        opacity 160ms ease,

        transform 160ms ease;

}



.logo-hotspot:hover,

.logo-hotspot:focus-visible {

    outline: none;

    transform: scale(1.025);

}



.logo-hotspot:hover span,

.logo-hotspot:focus-visible span {

    opacity: 1;

    transform: translate(-50%, 0);

}



.hotspot-shield {

    top: 17%;

    left: 13%;

    width: 25%;

    height: 46%;

}



.hotspot-shield:hover,

.hotspot-shield:focus-visible {

    border-color: rgba(83, 105, 255, 0.52);

    background: rgba(71, 95, 255, 0.05);

    box-shadow:

        inset 0 0 45px rgba(80, 104, 255, 0.13),

        0 0 34px rgba(72, 98, 255, 0.13);

}



.hotspot-form {

    top: 39%;

    left: 39%;

    width: 36%;

    height: 29%;

}



.hotspot-form:hover,

.hotspot-form:focus-visible {

    border-color: rgba(170, 255, 0, 0.48);

    background: rgba(153, 255, 0, 0.04);

    box-shadow:

        inset 0 0 45px rgba(153, 255, 0, 0.11),

        0 0 34px rgba(153, 255, 0, 0.1);

}



.hotspot-pen {

    top: 18%;

    right: 10%;

    width: 23%;

    height: 42%;

    transform: rotate(-3deg);

}



.hotspot-pen:hover,

.hotspot-pen:focus-visible {

    border-color: rgba(141, 255, 0, 0.48);

    background: rgba(153, 255, 0, 0.04);

    box-shadow:

        inset 0 0 45px rgba(153, 255, 0, 0.1),

        0 0 34px rgba(82, 102, 255, 0.12);

    transform: rotate(-3deg) scale(1.025);

}



.visual-hint {

    margin: 14px 0 0;

    color: #718098;

    font-size: 12px;

}



.scroll-indicator {

    position: absolute;

    bottom: 24px;

    left: 50%;

    display: flex;

    align-items: center;

    gap: 10px;

    color: #7f8da2;

    text-decoration: none;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 0.12em;

    text-transform: uppercase;

    transform: translateX(-50%);

}



.scroll-indicator i {

    position: relative;

    width: 28px;

    height: 40px;

    border: 1px solid rgba(172, 190, 216, 0.3);

    border-radius: 20px;

}



.scroll-indicator i::after {

    position: absolute;

    top: 8px;

    left: 50%;

    width: 4px;

    height: 7px;

    content: "";

    border-radius: 4px;

    background: var(--green);

    transform: translateX(-50%);

    animation: scrollDot 1.8s ease-in-out infinite;

}



@keyframes scrollDot {

    0%,

    100% {

        opacity: 0.25;

        transform: translate(-50%, 0);

    }



    50% {

        opacity: 1;

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

    }

}



.content-section {

    width: min(calc(100% - (2 * var(--rwd-gutter,28px))), var(--content-width));

    margin: 0 auto;

    padding: 120px 0;

}



.section-heading {

    max-width: 760px;

    margin-bottom: 50px;

}



.section-heading h2,

.security-copy h2,

.download-card h2 {

    font-size: clamp(36px, 4.8vw, 62px);

}



.section-heading > p:last-child,

.security-copy > p,

.download-card > div > p {

    margin: 22px 0 0;

    color: var(--text-muted);

    font-size: 18px;

}



.feature-grid {

    display: grid;

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

    gap: 20px;

}



.feature-card {

    min-height: 270px;

    padding: 30px;

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

    border-radius: var(--radius-medium);

    background:

        linear-gradient(150deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018));

    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.16);

    transition:

        transform 180ms ease,

        border-color 180ms ease,

        background 180ms ease;

}



.feature-card:hover {

    border-color: rgba(96, 126, 255, 0.34);

    background:

        linear-gradient(150deg, rgba(82, 102, 255, 0.09), rgba(255, 255, 255, 0.02));

    transform: translateY(-5px);

}



.feature-icon {

    display: grid;

    width: 58px;

    height: 58px;

    place-items: center;

    margin-bottom: 46px;

    color: var(--green);

    border: 1px solid rgba(170, 255, 0, 0.28);

    border-radius: 16px;

    background: rgba(170, 255, 0, 0.06);

    box-shadow: inset 0 0 24px rgba(170, 255, 0, 0.04);

    font-size: 17px;

    font-weight: 850;

}



.feature-card h3,

.function-row h3 {

    margin: 0;

    font-size: 22px;

}



.feature-card p,

.function-row p {

    margin: 12px 0 0;

    color: var(--text-muted);

}



.section-dark {

    position: relative;

}



.section-dark::before {

    position: absolute;

    top: 0;

    right: 50%;

    z-index: -1;

    width: 100vw;

    height: 100%;

    content: "";

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

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

    background:

        radial-gradient(circle at 75% 40%, rgba(82, 102, 255, 0.11), transparent 34%),

        rgba(7, 13, 25, 0.53);

    transform: translateX(50%);

}



.function-list {

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

}



.function-row {

    display: grid;

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

    gap: 28px;

    padding: 30px clamp(28px, 3vw, 48px);

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

}



.function-number {

    color: var(--green);

    font-size: 25px;

    font-weight: 850;

    letter-spacing: 0.14em;

}



.security-section {

    padding-top: 140px;

    padding-bottom: 140px;

}



.security-panel {

    display: grid;

    grid-template-columns: 340px 1fr;

    align-items: center;

    gap: clamp(50px, 8vw, 110px);

    padding: clamp(34px, 6vw, 78px);

    border: 1px solid rgba(90, 121, 255, 0.22);

    border-radius: var(--radius-large);

    background:

        radial-gradient(circle at 15% 50%, rgba(74, 100, 255, 0.18), transparent 35%),

        linear-gradient(145deg, rgba(12, 23, 45, 0.9), rgba(5, 11, 22, 0.92));

    box-shadow: var(--shadow);

}



.security-symbol {

    position: relative;

    width: 240px;

    height: 270px;

    margin: auto;

    border: 6px solid var(--blue);

    border-top-width: 7px;

    border-radius: 120px 120px 85px 85px;

    opacity: 0.9;

    filter: drop-shadow(0 0 20px rgba(82, 102, 255, 0.32));

    clip-path: polygon(50% 0, 100% 18%, 100% 68%, 50% 100%, 0 68%, 0 18%);

}



.security-symbol::before {

    position: absolute;

    top: 84px;

    left: 50%;

    width: 74px;

    height: 63px;

    content: "";

    border: 5px solid var(--blue-light);

    border-radius: 14px;

    transform: translateX(-50%);

}



.security-symbol::after {

    position: absolute;

    top: 45px;

    left: 50%;

    width: 45px;

    height: 50px;

    content: "";

    border: 5px solid var(--blue-light);

    border-bottom: 0;

    border-radius: 30px 30px 0 0;

    transform: translateX(-50%);

}



.security-symbol span {

    position: absolute;

    top: 109px;

    left: 50%;

    width: 9px;

    height: 26px;

    border-radius: 8px;

    background: var(--green);

    box-shadow: 0 0 16px rgba(170, 255, 0, 0.65);

    transform: translateX(-50%);

}



.security-copy {

    max-width: 660px;

}



.text-link {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-top: 28px;

    color: var(--green);

    text-decoration: none;

    font-weight: 750;

}



.text-link span {

    transition: transform 160ms ease;

}



.text-link:hover span {

    transform: translateX(5px);

}



.download-section {

    width: min(calc(100% - (2 * var(--rwd-gutter,28px))), var(--content-width));

    margin: 0 auto;

    padding: 20px 0 120px;

}



.download-card {

    display: grid;

    grid-template-columns: 1fr auto;

    align-items: center;

    gap: 60px;

    padding: clamp(34px, 6vw, 74px);

    border: 1px solid rgba(170, 255, 0, 0.2);

    border-radius: var(--radius-large);

    background:

        linear-gradient(135deg, rgba(170, 255, 0, 0.08), transparent 36%),

        rgba(8, 16, 29, 0.9);

    box-shadow: var(--shadow);

}



.download-details {

    display: flex;

    flex-wrap: wrap;

    gap: 12px 28px;

    margin: 26px 0 0;

    padding: 0;

    color: #aeb9c9;

    list-style: none;

    font-size: 14px;

}



.download-details li::before {

    margin-right: 9px;

    color: var(--green);

    content: "✓";

}



.download-actions {

    display: flex;

    min-width: 250px;

    flex-direction: column;

    align-items: center;

}



.centered-link {

    margin-top: 17px;

}



.contact-grid {

    display: grid;

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

    gap: 18px;

}



.contact-card {

    position: relative;

    display: flex;

    min-height: 160px;

    flex-direction: column;

    justify-content: flex-end;

    padding: 27px;

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

    border-radius: var(--radius-medium);

    background: rgba(255, 255, 255, 0.035);

    text-decoration: none;

    transition:

        border-color 180ms ease,

        background 180ms ease,

        transform 180ms ease;

}



.contact-card:hover {

    border-color: rgba(170, 255, 0, 0.3);

    background: rgba(170, 255, 0, 0.045);

    transform: translateY(-4px);

}



.contact-label {

    margin-bottom: 8px;

    color: var(--text-muted);

    font-size: 12px;

    font-weight: 750;

    letter-spacing: 0.12em;

    text-transform: uppercase;

}



.contact-card strong {

    font-size: 18px;

}



.contact-arrow {

    position: absolute;

    top: 24px;

    right: 26px;

    color: var(--green);

    font-size: 24px;

    transition: transform 160ms ease;

}



.contact-card:hover .contact-arrow {

    transform: translateX(5px);

}



.site-footer {

    display: grid;

    grid-template-columns: 1fr auto 1fr;

    align-items: center;

    gap: 30px;

    width: min(calc(100% - (2 * var(--rwd-gutter,28px))), var(--content-width));

    margin: 0 auto;

    padding: 34px 0 44px;

    color: #78869a;

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

    font-size: 13px;

}



.footer-brand {

    justify-self: start;

    transform: scale(0.88);

    transform-origin: left center;

}



.site-footer p {

    margin: 0;

    text-align: center;

}



.footer-links {

    display: flex;

    flex-wrap: wrap;

    justify-self: end;

    gap: 18px;

}



.footer-links a {

    color: #8b99ab;

    text-decoration: none;

}



.footer-links a:hover {

    color: var(--text);

}



@media (max-width: 1050px) {

    .hero {

        grid-template-columns: 1fr;

        padding-top: calc(var(--header-height) + 74px);

        text-align: center;

    }



    .hero-copy {

        max-width: 760px;

        margin: 0 auto;

    }



    .hero h1,

    .hero-description {

        margin-right: auto;

        margin-left: auto;

    }



    .hero-actions,

    .hero-status {

        justify-content: center;

    }



    .hero-visual {

        width: min(100%, 760px);

        margin: 0 auto;

    }



    .scroll-indicator {

        display: none;

    }



    .feature-grid,

    .contact-grid {

        grid-template-columns: 1fr 1fr;

    }



    .feature-card:last-child,

    .contact-card:last-child {

        grid-column: 1 / -1;

    }



    .security-panel {

        grid-template-columns: 250px 1fr;

    }



    .security-symbol {

        width: 200px;

        height: 230px;

    }



    .download-card {

        grid-template-columns: 1fr;

    }



    .download-actions {

        align-items: flex-start;

    }

}



@media (max-width: 820px) {

    :root {

        --header-height: 72px;

    }



    .site-header {

        padding-right: 22px;

        padding-left: 22px;

    }



    .brand-name {

        font-size: 18px;

    }



    .menu-toggle {

        display: block;

        z-index: 1002;

    }



    .menu-toggle[aria-expanded="true"] span:nth-child(1) {

        transform: translateY(7px) rotate(45deg);

    }



    .menu-toggle[aria-expanded="true"] span:nth-child(2) {

        opacity: 0;

    }



    .menu-toggle[aria-expanded="true"] span:nth-child(3) {

        transform: translateY(-7px) rotate(-45deg);

    }



    .main-navigation {

        position: fixed;

        inset: 0;

        z-index: 1001;

        display: flex;

        flex-direction: column;

        align-items: stretch;

        justify-content: center;

        gap: 6px;

        padding: 90px 28px 40px;

        visibility: hidden;

        opacity: 0;

        background: rgba(4, 8, 17, 0.97);

        backdrop-filter: blur(26px);

        transform: translateY(-12px);

        transition:

            opacity 180ms ease,

            visibility 180ms ease,

            transform 180ms ease;

    }



    .main-navigation.open {

        visibility: visible;

        opacity: 1;

        transform: translateY(0);

    }



    .main-navigation a {

        padding: 16px 18px;

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

        font-size: 19px;

        text-align: center;

    }



    .hero,

    .content-section,

    .download-section,

    .site-footer {

        width: min(calc(100% - (2 * var(--rwd-gutter,18px))), var(--content-width));

    }



    .hero {

        gap: 50px;

    }



    .feature-grid,

    .contact-grid {

        grid-template-columns: 1fr;

    }



    .feature-card:last-child,

    .contact-card:last-child {

        grid-column: auto;

    }



    .security-panel {

        grid-template-columns: 1fr;

        text-align: center;

    }



    .security-copy {

        margin: 0 auto;

    }



    .security-symbol {

        width: 180px;

        height: 205px;

    }



    .site-footer {

        grid-template-columns: 1fr;

        justify-items: center;

        text-align: center;

    }



    .footer-brand,

    .footer-links {

        justify-self: center;

    }

}



@media (max-width: 560px) {

    .brand-name {

        display: none;

    }



    .hero {

        padding-top: calc(var(--header-height) + 50px);

    }



    .hero h1 {

        font-size: clamp(38px, 12vw, 56px);

    }



    .hero-actions {

        flex-direction: column;

    }



    .button {

        width: 100%;

    }



    .logo-stage {

        border-radius: 22px;

    }



    .visual-hint {

        display: none;

    }



    .logo-hotspot span {

        display: none;

    }



    .content-section {

        padding-top: 90px;

        padding-bottom: 90px;

    }



    .function-row {

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

        gap: 16px;

        padding: 26px 22px;

    }



    .security-panel,

    .download-card {

        padding: 28px 22px;

        border-radius: 22px;

    }



    .download-actions,

    .download-actions .button {

        width: 100%;

        align-items: stretch;

    }



    .centered-link {

        align-self: center;

    }



    .download-details {

        flex-direction: column;

        gap: 8px;

    }

}



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

    html {

        scroll-behavior: auto;

    }



    *,

    *::before,

    *::after {

        scroll-behavior: auto !important;

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;

    }

}





/* Formularzyk CMS v3 - część 2: inteligentna galeria */

.smart-gallery .screenshot-grid{grid-template-columns:repeat(var(--gallery-cols-desktop,3),minmax(0,1fr));gap:var(--gallery-gap,20px)}

.smart-gallery .screenshot-card{border-radius:var(--gallery-radius,18px);overflow:hidden}.smart-gallery .screenshot-card img{width:var(--gallery-image-width,100%);margin-inline:auto;display:block}.smart-gallery .screenshot-card.has-border{border:1px solid rgba(148,163,184,.35)}.gallery-shadow-none .screenshot-card{box-shadow:none}.gallery-shadow-small .screenshot-card{box-shadow:0 4px 14px rgba(15,23,42,.08)}.gallery-shadow-medium .screenshot-card{box-shadow:0 10px 28px rgba(15,23,42,.13)}.gallery-shadow-large .screenshot-card{box-shadow:0 18px 48px rgba(15,23,42,.19)}.smart-gallery .screenshot-card em{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;opacity:.65;font-style:normal;margin-bottom:4px}.gallery-animation-fade .screenshot-card{animation:cmsFade .45s ease both}.gallery-animation-slide .screenshot-card{animation:cmsSlide .45s ease both}.gallery-animation-zoom .screenshot-card{animation:cmsZoom .4s ease both}@keyframes cmsFade{from{opacity:0}to{opacity:1}}@keyframes cmsSlide{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}@keyframes cmsZoom{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}@media(max-width:900px){.smart-gallery .screenshot-grid{grid-template-columns:repeat(var(--gallery-cols-tablet,2),minmax(0,1fr))}}@media(max-width:600px){.smart-gallery .screenshot-grid{grid-template-columns:repeat(var(--gallery-cols-mobile,1),minmax(0,1fr))}}





/* Formularzyk CMS v3 — część 3: motyw konfigurowalny */

html,body{background:var(--cms-bg,#060b16);color:var(--cms-text,#f4f7fb)}

body{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}

.content-section,.site-footer,.hero,.subpage-wrap {
    width: min(calc(100% - (2 * var(--rwd-gutter,28px))), var(--cms-content-width,1180px));
    margin: 0 auto;
}.site-header{width:100%;max-width:none}

.site-header.is-sticky{position:sticky;top:0;z-index:1000}

.brand-mark{overflow:hidden;display:inline-grid;place-items:center}.brand-mark img{width:100%;height:100%;object-fit:contain}.brand-mark b{display:none}

.brand-name{color:var(--cms-text,#fff)}

.feature-card,.screenshot-card,.download-card,.download-entry,.faq-item,.function-row{border-radius:var(--cms-radius,18px);border-color:var(--cms-border,#263449);background-color:var(--cms-surface,#101827)}

.button-primary{background:var(--cms-primary,#2f81f7)}.eyebrow,.brand-name span,.brand-name em{color:var(--cms-secondary,#2dd4bf)}

p,.hero-description,.section-heading>p{color:var(--cms-muted,#aab7c8)}

.cookie-banner{position:fixed;left:20px;right:20px;bottom:20px;z-index:5000;display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:900px;margin:auto;padding:18px 20px;border:1px solid var(--cms-border);border-radius:var(--cms-radius);background:var(--cms-surface);box-shadow:0 20px 60px rgba(0,0,0,.35)}

.cookie-banner p{margin:0}.cookie-banner button{border:0;border-radius:10px;padding:10px 16px;background:var(--cms-primary);color:white;cursor:pointer}

@media(max-width:700px){.cookie-banner{align-items:stretch;flex-direction:column}.cookie-banner button{width:100%}}



/* Własne sekcje strony głównej */

.custom-home-section{position:relative;border-radius:var(--cms-radius);margin:32px auto;overflow:hidden}.custom-home-section .section-heading{max-width:900px;margin-inline:auto}.custom-home-text{font-size:1.05rem;line-height:1.8;white-space:normal}.custom-home-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.8fr);gap:48px;align-items:center}.custom-home-split.image-left .custom-home-copy{order:2}.custom-home-split.image-left .custom-home-image{order:1}.custom-home-image{width:100%;max-height:520px;object-fit:cover;border-radius:var(--cms-radius);border:1px solid var(--cms-border)}.custom-home-copy .button{margin-top:22px}.custom-home-cta{display:flex;align-items:center;justify-content:space-between;gap:32px;padding:12px 0}.custom-home-cta>div{max-width:760px}.custom-home-html{width:100%}@media(max-width:800px){.custom-home-split{grid-template-columns:1fr}.custom-home-split.image-left .custom-home-copy,.custom-home-split.image-left .custom-home-image{order:initial}.custom-home-cta{align-items:flex-start;flex-direction:column}}





/* v5: automatyczna responsywność i nadpisania sekcji */

.hero-logo{display:block;max-width:100%;margin:auto}.logo-stage{display:grid;place-items:center;overflow:hidden}.custom-home-section.has-responsive-override{padding-top:var(--section-pad-desktop)!important;padding-bottom:var(--section-pad-desktop)!important}.custom-home-section.has-responsive-override .custom-home-split{grid-template-columns:minmax(0,1fr) minmax(240px,var(--section-image-desktop))}.hide-desktop{display:none!important}@media(max-width:1024px){.hide-desktop{display:block!important}.hide-tablet{display:none!important}.custom-home-section.has-responsive-override{padding-top:var(--section-pad-tablet)!important;padding-bottom:var(--section-pad-tablet)!important}.custom-home-section.has-responsive-override .custom-home-split{grid-template-columns:minmax(0,1fr) minmax(220px,var(--section-image-tablet))}}@media(max-width:640px){.hide-tablet{display:block!important}.hide-mobile{display:none!important}.custom-home-section.has-responsive-override{padding-top:var(--section-pad-mobile)!important;padding-bottom:var(--section-pad-mobile)!important}.custom-home-section.has-responsive-override .custom-home-split{grid-template-columns:1fr!important}.custom-home-section.has-responsive-override .custom-home-image{width:var(--section-image-mobile);margin-inline:auto}.custom-home-section.mobile-layout-image_first .custom-home-image{order:1}.custom-home-section.mobile-layout-image_first .custom-home-copy{order:2}.custom-home-section.mobile-layout-text_first .custom-home-copy{order:1}.custom-home-section.mobile-layout-text_first .custom-home-image{order:2}}



/* Page Builder v7: niezależne sekcje podstron */
.image-text-block{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center}.image-text-block.image-right .image-text-media{order:2}.image-text-media img{display:block;width:100%;height:auto;border-radius:var(--cms-radius,18px)}.image-text-copy .button{margin-top:18px}.local-gallery-grid,.builder-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gallery-gap,20px)}.local-gallery-card,.builder-card{overflow:hidden;border:1px solid var(--color-border,#263449);border-radius:var(--gallery-radius,18px);background:var(--color-surface,#101827);text-align:left}.local-gallery-card{padding:0;color:inherit;cursor:pointer}.local-gallery-card img,.builder-card>img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover}.local-gallery-card span,.builder-card-copy{display:block;padding:18px}.local-gallery-card strong,.local-gallery-card small{display:block}.local-gallery-card small{margin-top:6px;color:var(--color-muted,#aab7c8)}.builder-card-copy h3{margin:0 0 10px}.builder-card-copy p{margin:0 0 18px}.video-frame{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:var(--cms-radius,18px)}.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}.video-block video{display:block;width:100%;max-height:75vh;border-radius:var(--cms-radius,18px)}.builder-separator hr{border:0;border-top:1px solid var(--color-border,#263449);margin:clamp(28px,5vw,70px) 0}.custom-html-block{overflow-wrap:anywhere}@media(max-width:900px){.local-gallery-grid,.builder-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:640px){.image-text-block{grid-template-columns:1fr}.image-text-block.image-right .image-text-media{order:0}.local-gallery-grid,.builder-card-grid{grid-template-columns:1fr}}

/* Page Builder v8: spis treści podstron i kotwice bloków */
.page-toc{margin-top:clamp(28px,5vw,64px);margin-bottom:clamp(10px,2vw,28px);padding:clamp(20px,3vw,30px);border:1px solid var(--cms-border,#263449);border-radius:var(--cms-radius,18px);background:color-mix(in srgb,var(--cms-surface,#101827) 88%,transparent);box-shadow:0 18px 44px rgba(0,0,0,.16)}
.page-toc-heading{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.page-toc-heading span{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:color-mix(in srgb,var(--cms-primary,#2f81f7) 18%,transparent);color:var(--cms-primary,#2f81f7);font-weight:900}
.page-toc-heading h2{margin:0;font-size:clamp(1.25rem,2.5vw,1.7rem)}
.page-toc ol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 24px;margin:0;padding-left:24px}
.page-toc a{display:inline-block;padding:5px 0;color:var(--cms-text,#f4f7fb);text-decoration:none;border-bottom:1px solid transparent}
.page-toc a:hover,.page-toc a:focus-visible{color:var(--cms-secondary,#2dd4bf);border-bottom-color:currentColor}
.subpage-hero[id],.subpage-section[id],.builder-separator[id],.download-section[id]{scroll-margin-top:110px}
@media(max-width:700px){.page-toc ol{grid-template-columns:1fr}.page-toc{padding:20px}}