* {
    box-sizing: border-box;
}

body {
    margin: 0;
    overflow-x: hidden;
    min-height: 100vh;
    font-family: "Inter", sans-serif;
}

.headerShell {
    padding: 16px 32px;
    background: #ffffff;
}

.headerRound {
    max-width: 1500px;
    margin: 0 auto;
    border-radius: 32px;
    background: linear-gradient(135deg, #ffffff 0%, #f5eefb 60%, #fce8f3 100%);
    box-shadow: 0 10px 48px 1px rgba(132, 10, 188, 0.11);
    overflow: hidden;
    position: relative;
}

.headerRound::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #840ABC 0%, #F12784 50%, #41E5F0 100%);
    border-radius: 32px 32px 0 0;
    pointer-events: none;
}

.headerTop {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 32px 48px 16px 48px;
    gap: 32px;
}

.brandZone {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.logoFrame {
    border-top: 2px solid #840ABC;
    border-bottom: 2px solid #840ABC;
    padding: 8px 12px;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 2px 4px 1px rgba(132, 10, 188, 0.05), 0 5px 18px 1px rgba(132, 10, 188, 0.09);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 88px;
}

.logoFrame img {
    width: 65px;
    height: 72px;
    object-fit: contain;
    display: block;
}

.brandLabel {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: #840ABC;
    text-transform: lowercase;
}

.headerAction {
    padding-top: 8px;
}

.headerAction a {
    display: inline-block;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #ffffff;
    background: linear-gradient(135deg, #840ABC 0%, #F12784 100%);
    border-radius: 10px;
    padding: 12px 32px;
    text-decoration: none;
    box-shadow: 0 5px 18px 1px rgba(132, 10, 188, 0.09);
    transition: box-shadow 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.5s ease;
    outline-offset: 4px;
}

.headerAction a:hover {
    box-shadow: 0 10px 48px 1px rgba(132, 10, 188, 0.11);
    opacity: 0.92;
}

.headerAction a:focus-visible {
    outline: 2px solid #840ABC;
    outline-offset: 4px;
}

.headerBottom {
    padding: 0 48px 32px 48px;
}

.mainMenu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid rgba(132, 10, 188, 0.12);
    padding-top: 16px;
}

.mainMenu li a {
    display: inline-block;
    font-size: 16px;
    font-weight: 500;
    color: #2d1040;
    text-decoration: none;
    padding: 12px 16px;
    border-radius: 6px;
    letter-spacing: -0.01em;
    line-height: 1.4;
    transition: color 0.5s ease, background 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    outline-offset: 4px;
}

.mainMenu li a:hover {
    color: #840ABC;
    background: rgba(132, 10, 188, 0.06);
}

.mainMenu li a:focus-visible {
    outline: 2px solid #840ABC;
    outline-offset: 4px;
}

.mainMenu li a[aria-current="page"] {
    color: #840ABC;
    font-weight: 600;
}

.footerShell {
    background: #f5eefb;
    padding: 48px 32px 16px 32px;
    border-top: 1px solid rgba(132, 10, 188, 0.10);
}

.footerInner {
    max-width: 1500px;
    margin: 0 auto;
}

.footerGrid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 48px;
    padding-bottom: 48px;
    border-bottom: 1px solid rgba(132, 10, 188, 0.10);
}

.footerBrand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.footerLogoFrame {
    border-top: 2px solid #840ABC;
    border-bottom: 2px solid #840ABC;
    padding: 8px 12px;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 2px 4px 1px rgba(132, 10, 188, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 88px;
}

.footerLogoFrame img {
    width: 65px;
    height: 72px;
    object-fit: contain;
    display: block;
}

.footerBrandName {
    font-size: 16px;
    font-weight: 700;
    color: #840ABC;
    text-transform: lowercase;
    letter-spacing: -0.01em;
    line-height: 1.15;
    text-align: center;
}

.footerNavCol {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footerNavHead {
    font-size: 16px;
    font-weight: 700;
    color: #2d1040;
    letter-spacing: -0.01em;
    line-height: 1.4;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.footerNavCol a {
    font-size: 16px;
    font-weight: 400;
    color: #4a2060;
    text-decoration: none;
    line-height: 1.6;
    padding: 4px 0;
    transition: color 0.55s ease;
    outline-offset: 4px;
}

.footerNavCol a:hover {
    color: #840ABC;
}

.footerNavCol a:focus-visible {
    outline: 2px solid #840ABC;
    outline-offset: 4px;
}

.footerContact {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footerContactHead {
    font-size: 16px;
    font-weight: 700;
    color: #2d1040;
    letter-spacing: -0.01em;
    line-height: 1.4;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.footerContactItem {
    font-size: 16px;
    font-weight: 400;
    color: #4a2060;
    line-height: 1.6;
}

.footerContactItem a {
    color: #4a2060;
    text-decoration: none;
    transition: color 0.55s ease;
    outline-offset: 4px;
}

.footerContactItem a:hover {
    color: #F12784;
}

.footerContactItem a:focus-visible {
    outline: 2px solid #840ABC;
    outline-offset: 4px;
}

.footerContactLabel {
    font-weight: 600;
    color: #2d1040;
    display: block;
    font-size: 16px;
    line-height: 1.4;
}

.footerBottom {
    padding-top: 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.footerCopy {
    font-size: 16px;
    font-weight: 400;
    color: #7a5090;
    line-height: 1.6;
}

.footerLegal {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.footerLegal li a {
    font-size: 16px;
    font-weight: 400;
    color: #7a5090;
    text-decoration: none;
    line-height: 1.6;
    transition: color 0.5s ease;
    outline-offset: 4px;
}

.footerLegal li a:hover {
    color: #840ABC;
}

.footerLegal li a:focus-visible {
    outline: 2px solid #840ABC;
    outline-offset: 4px;
}

.cookieBar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1200;
    background: #ffffff;
    border-top: 2px solid rgba(132, 10, 188, 0.15);
    box-shadow: 0 -5px 18px 1px rgba(132, 10, 188, 0.09);
    padding: 16px 32px;
    transform: translateX(100%);
    transition: transform 0.18s ease;
}

.cookieBar[data-visible="true"] {
    transform: translateX(0);
}

.cookieBarInner {
    max-width: 1500px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.cookieText {
    font-size: 16px;
    font-weight: 400;
    color: #2d1040;
    line-height: 1.6;
    flex: 1;
    min-width: 200px;
}

.cookieActions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.cookieAccept {
    font-size: 16px;
    font-weight: 600;
    color: #840ABC;
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: underline;
    padding: 8px 0;
    line-height: 1.4;
    transition: color 0.5s ease;
    outline-offset: 4px;
    min-height: 44px;
}

.cookieAccept:hover {
    color: #F12784;
}

.cookieAccept:focus-visible {
    outline: 2px solid #840ABC;
    outline-offset: 4px;
}

.cookieDecline {
    font-size: 16px;
    font-weight: 400;
    color: #7a5090;
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: underline;
    padding: 8px 0;
    line-height: 1.4;
    transition: color 0.5s ease;
    outline-offset: 4px;
    min-height: 44px;
}

.cookieDecline:hover {
    color: #840ABC;
}

.cookieDecline:focus-visible {
    outline: 2px solid #840ABC;
    outline-offset: 4px;
}

@media (max-width: 900px) {
    .headerTop {
        padding: 24px 24px 12px 24px;
        flex-wrap: wrap;
    }

    .headerBottom {
        padding: 0 24px 24px 24px;
    }

    .footerGrid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .footerBrand {
        align-items: flex-start;
    }

    .footerBottom {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 600px) {
    .headerShell {
        padding: 12px 8px;
    }

    .footerShell {
        padding: 32px 16px 12px 16px;
    }

    .mainMenu li a {
        padding: 12px 12px;
    }
}

.roz-policy-container {
    max-width: 1500px;
    margin: 0 auto;
    padding: 48px 32px;
    color: #2d2d2d;
    line-height: 1.6;
    font-size: 16px;
}

.roz-policy-container ul,
.roz-policy-container ol {
    margin: 16px 0;
    padding-left: 32px;
}

.roz-policy-container ul ul,
.roz-policy-container ol ol,
.roz-policy-container ul ol,
.roz-policy-container ol ul {
    margin: 8px 0;
    padding-left: 32px;
}

.roz-policy-container ul {
    list-style-type: disc;
}

.roz-policy-container ol {
    list-style-type: decimal;
}

.roz-policy-container li {
    margin: 8px 0;
    padding-left: 4px;
    line-height: 1.6;
    font-size: 16px;
    color: #2d2d2d;
}

.roz-policy-container li::marker {
    color: #840ABC;
}

.roz-policy-container strong,
.roz-policy-container b {
    font-weight: 700;
    color: #1e1e1e;
}

.roz-policy-container a {
    color: #840ABC;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), text-decoration-color 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.roz-policy-container a:hover {
    color: #F12784;
    text-decoration-color: #41E5F0;
}

.roz-policy-container a:visited {
    color: #6a0099;
}

.roz-policy-container table {
    width: 100%;
    border-collapse: collapse;
    margin: 32px 0;
    font-size: 16px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 18px 1px rgba(132, 10, 188, 0.09);
}

.roz-policy-container thead {
    background: linear-gradient(135deg, #840ABC 0%, #F12784 100%);
}

.roz-policy-container thead th {
    color: #ffffff;
    font-weight: 700;
    font-size: 16px;
    padding: 16px;
    text-align: left;
    letter-spacing: -0.01em;
    line-height: 1.4;
}

.roz-policy-container tbody tr {
    border-bottom: 1px solid rgba(132, 10, 188, 0.08);
    transition: background-color 0.5s ease;
}

.roz-policy-container tbody tr:last-child {
    border-bottom: none;
}

.roz-policy-container tbody tr:nth-child(even) {
    background-color: rgba(65, 229, 240, 0.05);
}

.roz-policy-container tbody tr:hover {
    background-color: rgba(132, 10, 188, 0.04);
}

.roz-policy-container th,
.roz-policy-container td {
    padding: 16px;
    text-align: left;
    line-height: 1.6;
    vertical-align: top;
}

.roz-policy-container td {
    color: #2d2d2d;
    font-size: 16px;
}

.roz-policy-container hr {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(132, 10, 188, 0.25) 20%, rgba(241, 39, 132, 0.25) 80%, transparent 100%);
    margin: 48px 0;
}

@media (max-width: 768px) {
    .roz-policy-container {
        padding: 32px 16px;
    }

    .roz-policy-container table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 6px;
    }

    .roz-policy-container th,
    .roz-policy-container td {
        padding: 12px;
        min-width: 120px;
    }

    .roz-policy-container ul,
    .roz-policy-container ol {
        padding-left: 16px;
    }
}

.contUs {
    max-width: 1500px;
    margin: 0 auto;
    overflow-x: clip;
}

.contUs .reachBlock {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 600px;
    position: relative;
}

.contUs .reachLeft {
    background: linear-gradient(142deg, #840ABC 0%, transparent 100%);
    padding: 48px 48px 72px 48px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}

.contUs .reachLeft::before {
    content: '"';
    position: absolute;
    top: -32px;
    left: 24px;
    font-size: 320px;
    line-height: 1.15;
    color: #fff;
    opacity: 0.05;
    pointer-events: none;
    user-select: none;
}

.contUs .reachImg {
    width: 100%;
    height: 260px;
    object-fit: cover;
    border-radius: 10px;
    filter: saturate(0.7);
    transition: filter 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 10px 48px 1px rgba(132, 10, 188, 0.11);
    display: block;
}

.contUs .reachImg:hover {
    filter: saturate(0);
}

.contUs .reachTagline {
    margin-top: 32px;
}

.contUs .reachTagline h1 {
    font-size: 62px;
    line-height: 1.15;
    letter-spacing: -0.03em;
    color: #fff;
    margin: 0 0 16px 0;
}

.contUs .reachTagline p {
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.82);
    margin: 0 0 32px 0;
    max-width: 380px;
}

.contUs .contactMeta {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.contUs .metaRow {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
}

.contUs .metaIcon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 2px;
}

.contUs .metaText {
    font-size: 16px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.9);
}

.contUs .metaText a {
    color: #41E5F0;
    text-decoration: none;
    transition: color 0.5s ease;
}

.contUs .metaText a:hover {
    color: #fff;
}

.contUs .reachRight {
    background: #fff;
    padding: 48px 48px 72px 48px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.contUs .formHead {
    margin-bottom: 32px;
}

.contUs .formHead h2 {
    font-size: 32px;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: #1a0d26;
    margin: 0 0 8px 0;
}

.contUs .formHead p {
    font-size: 16px;
    line-height: 1.6;
    color: #3d3050;
    margin: 0;
}

.contUs .contactForm {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.contUs .fieldRow {
    display: flex;
    flex-direction: row;
    gap: 16px;
}

.contUs .fieldGroup {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.contUs .fieldGroup label {
    font-size: 16px;
    line-height: 1.4;
    color: #2a1540;
    font-weight: 600;
}

.contUs .fieldGroup input[type="text"],
.contUs .fieldGroup input[type="email"] {
    padding: 12px 16px;
    border: 1.5px solid #d0c8dc;
    border-radius: 6px;
    font-size: 16px;
    line-height: 1.4;
    color: #1a0d26;
    background: #fdf9ff;
    box-shadow: inset 0 2px 4px 1px rgba(132, 10, 188, 0.05);
    transition: border-color 0.6s ease, box-shadow 0.6s ease;
    outline: none;
    width: 100%;
    box-sizing: border-box;
}

.contUs .fieldGroup input[type="text"]::placeholder,
.contUs .fieldGroup input[type="email"]::placeholder {
    color: rgba(132, 10, 188, 0.35);
}

.contUs .fieldGroup input[type="text"]:focus,
.contUs .fieldGroup input[type="email"]:focus {
    border-color: #840ABC;
    box-shadow: inset 0 2px 4px 1px rgba(132, 10, 188, 0.05), 0 0 0 3px rgba(132, 10, 188, 0.1);
}

.contUs .checkGroup {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.contUs .checkGroup legend {
    font-size: 16px;
    line-height: 1.4;
    color: #2a1540;
    font-weight: 600;
    margin-bottom: 8px;
    display: block;
}

.contUs .checkGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.contUs .checkItem {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border: 1.5px solid #d0c8dc;
    border-radius: 6px;
    background: #fdf9ff;
    cursor: pointer;
    transition: border-color 0.5s ease, background 0.5s ease;
    box-shadow: inset 0 2px 4px 1px rgba(132, 10, 188, 0.05);
}

.contUs .checkItem:hover {
    border-color: #840ABC;
    background: #f5eeff;
}

.contUs .checkItem input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #840ABC;
    cursor: pointer;
    flex-shrink: 0;
}

.contUs .checkItem span {
    font-size: 16px;
    line-height: 1.4;
    color: #2a1540;
}

.contUs .privacyRow {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    border-radius: 6px;
    background: rgba(132, 10, 188, 0.04);
    border: 1.5px solid rgba(132, 10, 188, 0.12);
}

.contUs .privacyRow input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #840ABC;
    cursor: pointer;
    flex-shrink: 0;
    margin-top: 2px;
}

.contUs .privacyRow label {
    font-size: 16px;
    line-height: 1.6;
    color: #3d3050;
    cursor: pointer;
}

.contUs .privacyRow label a {
    color: #840ABC;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.5s ease;
}

.contUs .privacyRow label a:hover {
    color: #F12784;
}

.contUs .submitBtn {
    padding: 16px 32px;
    background: #840ABC;
    color: #fff;
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    align-self: flex-start;
    box-shadow: 0 5px 18px 1px rgba(132, 10, 188, 0.09);
    transition: background 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.contUs .submitBtn:hover {
    background: #F12784;
    box-shadow: 0 10px 48px 1px rgba(241, 39, 132, 0.11);
}

.contUs .submitBtn:focus {
    outline: 3px solid rgba(132, 10, 188, 0.4);
    outline-offset: 3px;
}

.contUs .submitBtn:active {
    background: #6a0899;
}

.contUs .dividerLine {
    height: 4px;
    background: linear-gradient(90deg, rgba(132, 10, 188, 0.15) 0%, rgba(132, 10, 188, 0.6) 40%, #840ABC 100%);
    border: none;
    margin: 0;
}

.contUs .infoBlock {
    background: linear-gradient(160deg, #f7f0ff 0%, rgba(65, 229, 240, 0.08) 50%, #fff 100%);
    padding: 72px 48px 48px 48px;
    display: grid;
    grid-template-columns: 260px 1fr 1fr;
    gap: 48px;
    align-items: start;
}

.contUs .infoAside {
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
}

.contUs .asideNum {
    font-size: 72px;
    line-height: 1.15;
    color: rgba(132, 10, 188, 0.07);
    font-weight: 900;
    letter-spacing: -0.04em;
    position: absolute;
    top: -16px;
    left: -8px;
    pointer-events: none;
    user-select: none;
}

.contUs .asideLabel {
    font-size: 16px;
    line-height: 1.4;
    color: #840ABC;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    position: relative;
    z-index: 1;
    padding-top: 48px;
}

.contUs .asideNote {
    font-size: 16px;
    line-height: 1.6;
    color: #3d3050;
    position: relative;
    z-index: 1;
}

.contUs .infoCard {
    background: #fff;
    border-radius: 10px;
    padding: 32px;
    box-shadow: 0 5px 18px 1px rgba(132, 10, 188, 0.09);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.contUs .infoCard h4 {
    font-size: 16px;
    line-height: 1.4;
    color: #840ABC;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0;
}

.contUs .infoDetail {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.contUs .infoLine {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
}

.contUs .infoLineSvg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 2px;
}

.contUs .infoLineText {
    font-size: 16px;
    line-height: 1.6;
    color: #1a0d26;
}

.contUs .infoLineText a {
    color: #1a0d26;
    text-decoration: none;
    transition: color 0.55s ease;
}

.contUs .infoLineText a:hover {
    color: #840ABC;
}

.contUs .imgCard {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 10px 48px 1px rgba(132, 10, 188, 0.11);
    position: relative;
}

.contUs .imgCard img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    display: block;
    filter: saturate(0.8);
    transition: filter 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.contUs .imgCard:hover img {
    filter: saturate(0);
}

.contUs .imgCardOverlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px;
    background: linear-gradient(0deg, rgba(132, 10, 188, 0.75) 0%, transparent 100%);
}

.contUs .imgCardOverlay p {
    font-size: 16px;
    line-height: 1.4;
    color: #fff;
    margin: 0;
}

.contUs .zoomReveal {
    animation: zoomSettle 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes zoomSettle {
    from {
        transform: scale(1.06);
        opacity: 0.4;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.contUs .zoomRevealDelay {
    animation: zoomSettle 0.8s 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@media (max-width: 1024px) {
    .contUs .reachBlock {
        grid-template-columns: 1fr;
    }

    .contUs .reachLeft {
        padding: 48px 32px 48px 32px;
    }

    .contUs .reachRight {
        padding: 48px 32px 48px 32px;
    }

    .contUs .infoBlock {
        grid-template-columns: 1fr 1fr;
        padding: 48px 32px;
    }

    .contUs .infoAside {
        grid-column: 1 / -1;
    }
}

@media (max-width: 768px) {
    .contUs .reachTagline h1 {
        font-size: 44px;
    }

    .contUs .fieldRow {
        flex-direction: column;
    }

    .contUs .checkGrid {
        grid-template-columns: 1fr;
    }

    .contUs .infoBlock {
        grid-template-columns: 1fr;
        padding: 48px 16px;
        gap: 32px;
    }

    .contUs .reachLeft,
    .contUs .reachRight {
        padding: 32px 16px;
    }

    .contUs .submitBtn {
        align-self: stretch;
        text-align: center;
    }
}

.aboutUs {
    max-width: 1500px;
    margin: 0 auto;
    overflow-x: clip;
}

.aboutUs .gridPulse {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(132, 10, 188, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(132, 10, 188, 0.07) 1px, transparent 1px);
    background-size: 48px 48px;
    animation: gridBrighten 6s ease infinite;
    pointer-events: none;
    z-index: 0;
}

@keyframes gridBrighten {

    0%,
    100% {
        opacity: 0.4;
    }

    50% {
        opacity: 1;
    }
}

.aboutUs .splitHero {
    position: relative;
    display: flex;
    flex-direction: row;
    min-height: 640px;
}

.aboutUs .splitHero .heroLeft {
    width: 40%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 48px 32px 48px 48px;
    background: #fff;
    z-index: 1;
}

.aboutUs .splitHero .heroRight {
    width: 60%;
    position: relative;
    background: linear-gradient(138deg, #f7f0fd 0%, #fff 60%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 48px 48px 48px 32px;
    z-index: 1;
}

.aboutUs .splitHero .heroRight .gridPulse {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(132, 10, 188, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(132, 10, 188, 0.06) 1px, transparent 1px);
    background-size: 48px 48px;
    animation: gridBrighten 6s ease infinite;
    pointer-events: none;
    z-index: 0;
}

.aboutUs .splitHero .cornerDeco {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 120px;
    height: 120px;
    pointer-events: none;
    z-index: 0;
}

.aboutUs .splitHero .cornerDeco circle {
    fill: none;
    stroke: rgba(132, 10, 188, 0.12);
    stroke-width: 1;
}

.aboutUs .splitHero .cornerDecoLeft {
    position: absolute;
    bottom: 24px;
    left: 24px;
    width: 80px;
    height: 80px;
    pointer-events: none;
    z-index: 0;
}

.aboutUs .splitHero .cornerDecoLeft line {
    stroke: rgba(65, 229, 240, 0.25);
    stroke-width: 1;
}

.aboutUs .heroLabel {
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: 0.12em;
    color: #840ABC;
    text-transform: uppercase;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
}

.aboutUs .heroH1 {
    font-size: 62px;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: #18041f;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
}

.aboutUs .heroH1 em {
    font-style: normal;
    color: #840ABC;
}

.aboutUs .heroDivider {
    width: 48px;
    height: 3px;
    background: linear-gradient(90deg, #840ABC, transparent);
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
}

.aboutUs .heroDesc {
    font-size: 16px;
    line-height: 1.6;
    color: #2d1a38;
    max-width: 360px;
    position: relative;
    z-index: 1;
}

.aboutUs .heroImgWrap {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 520px;
}

.aboutUs .heroImgWrap img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: 10px;
    filter: saturate(1);
    transition: filter 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 10px 48px 1px rgba(132, 10, 188, 0.11);
}

.aboutUs .heroImgWrap img:hover {
    filter: saturate(0);
}

.aboutUs .heroImgWrap .imgAccent {
    position: absolute;
    bottom: -12px;
    right: -12px;
    width: 100%;
    height: 100%;
    border: 2px solid rgba(132, 10, 188, 0.18);
    border-radius: 10px;
    z-index: -1;
    box-shadow: 0 5px 18px 1px rgba(132, 10, 188, 0.09);
}

.aboutUs .heroStats {
    display: flex;
    flex-direction: row;
    gap: 32px;
    margin-top: 32px;
    position: relative;
    z-index: 2;
}

.aboutUs .heroStats .statItem {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.aboutUs .heroStats .statNum {
    font-size: 32px;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: #840ABC;
}

.aboutUs .heroStats .statLbl {
    font-size: 16px;
    line-height: 1.4;
    color: #5a3a6b;
}

.aboutUs .sectionDivider {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0;
    padding: 0 48px;
    overflow: hidden;
}

.aboutUs .sectionDivider .divLine {
    flex: 1;
    height: 1px;
    background: rgba(132, 10, 188, 0.15);
    position: relative;
}

.aboutUs .sectionDivider .divTick {
    width: 1px;
    height: 8px;
    background: rgba(132, 10, 188, 0.3);
    margin: 0 32px;
    flex-shrink: 0;
}

.aboutUs .missionBlock {
    position: relative;
    padding: 48px 48px;
    display: flex;
    flex-direction: row;
    gap: 48px;
    align-items: flex-start;
    background: #fff;
}

.aboutUs .missionBlock .missionAside {
    width: 220px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 8px;
}

.aboutUs .missionBlock .asideNote {
    font-size: 16px;
    line-height: 1.6;
    color: #840ABC;
    border-top: 2px solid #840ABC;
    padding-top: 12px;
}

.aboutUs .missionBlock .asideYear {
    font-size: 16px;
    line-height: 1.4;
    color: #8a6a9a;
}

.aboutUs .missionBlock .missionMain {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.aboutUs .missionBlock .missionH2 {
    font-size: 44px;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: #18041f;
    position: relative;
}

.aboutUs .missionBlock .missionH2 .fadeNum {
    position: absolute;
    left: -16px;
    top: -8px;
    font-size: 72px;
    line-height: 1.15;
    color: rgba(132, 10, 188, 0.06);
    font-weight: 700;
    pointer-events: none;
    z-index: 0;
    letter-spacing: -0.04em;
}

.aboutUs .missionBlock .missionH2 span {
    position: relative;
    z-index: 1;
}

.aboutUs .missionBlock .missionPara {
    font-size: 16px;
    line-height: 1.6;
    color: #2d1a38;
    max-width: 640px;
}

.aboutUs .missionGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 16px;
}

.aboutUs .missionGrid .mgCard {
    background: #fff;
    border-radius: 10px;
    padding: 32px;
    box-shadow: inset 0 2px 8px rgba(132, 10, 188, 0.05), 0 5px 18px 1px rgba(132, 10, 188, 0.09);
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: box-shadow 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.aboutUs .missionGrid .mgCard:hover {
    box-shadow: inset 0 2px 8px rgba(132, 10, 188, 0.08), 0 10px 48px 1px rgba(132, 10, 188, 0.11);
}

.aboutUs .missionGrid .mgCard .cardIco {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.aboutUs .missionGrid .mgCard h4 {
    font-size: 16px;
    line-height: 1.4;
    color: #18041f;
    letter-spacing: -0.01em;
}

.aboutUs .missionGrid .mgCard p {
    font-size: 16px;
    line-height: 1.6;
    color: #5a3a6b;
}

.aboutUs .missionImgWrap {
    width: 340px;
    flex-shrink: 0;
    position: relative;
}

.aboutUs .missionImgWrap img {
    width: 100%;
    height: 480px;
    object-fit: cover;
    object-position: center;
    border-radius: 10px;
    display: block;
    filter: saturate(1);
    transition: filter 0.7s ease;
    box-shadow: 0 10px 48px 1px rgba(132, 10, 188, 0.11);
}

.aboutUs .missionImgWrap img:hover {
    filter: saturate(0);
}

.aboutUs .missionImgWrap .imgOffset {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 100%;
    height: 100%;
    border: 2px solid rgba(241, 39, 132, 0.2);
    border-radius: 10px;
    z-index: -1;
}

.aboutUs .diagBlock {
    position: relative;
    padding: 48px 48px;
    overflow: hidden;
}

.aboutUs .diagBlock .diagBg {
    position: absolute;
    inset: 0;
    background: linear-gradient(158deg, #f7f0fd 45%, #e8f9fb 100%);
    z-index: 0;
    pointer-events: none;
}

.aboutUs .diagBlock .diagContent {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: row;
    gap: 48px;
    align-items: flex-start;
}

.aboutUs .diagBlock .diagLeft {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.aboutUs .diagBlock .diagH2 {
    font-size: 44px;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: #18041f;
    position: relative;
}

.aboutUs .diagBlock .diagH2 .fadeNum {
    position: absolute;
    left: -12px;
    top: -8px;
    font-size: 72px;
    line-height: 1.15;
    color: rgba(65, 229, 240, 0.12);
    font-weight: 700;
    pointer-events: none;
    z-index: 0;
    letter-spacing: -0.04em;
}

.aboutUs .diagBlock .diagH2 span {
    position: relative;
    z-index: 1;
}

.aboutUs .diagBlock .diagPara {
    font-size: 16px;
    line-height: 1.6;
    color: #2d1a38;
    max-width: 480px;
}

.aboutUs .diagBlock .teamGrid {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 16px;
}

.aboutUs .diagBlock .teamCard {
    display: flex;
    flex-direction: row;
    gap: 16px;
    align-items: flex-start;
    background: #fff;
    border-radius: 10px;
    padding: 16px;
    box-shadow: 0 2px 4px 1px rgba(132, 10, 188, 0.05), 0 5px 18px 1px rgba(132, 10, 188, 0.09);
    transition: box-shadow 0.5s ease;
}

.aboutUs .diagBlock .teamCard:hover {
    box-shadow: 0 5px 18px 1px rgba(132, 10, 188, 0.09), 0 10px 48px 1px rgba(132, 10, 188, 0.11);
}

.aboutUs .diagBlock .teamCard .portrait {
    width: 72px;
    flex-shrink: 0;
}

.aboutUs .diagBlock .teamCard .portrait img {
    width: 72px;
    height: 100px;
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: 6px;
    filter: saturate(1);
    transition: filter 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.aboutUs .diagBlock .teamCard .portrait img:hover {
    filter: saturate(0);
}

.aboutUs .diagBlock .teamCard .tcInfo {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.aboutUs .diagBlock .teamCard .tcInfo h5 {
    font-size: 16px;
    line-height: 1.4;
    color: #18041f;
}

.aboutUs .diagBlock .teamCard .tcInfo .tcRole {
    font-size: 16px;
    line-height: 1.4;
    color: #840ABC;
}

.aboutUs .diagBlock .teamCard .tcInfo p {
    font-size: 16px;
    line-height: 1.6;
    color: #5a3a6b;
}

.aboutUs .diagBlock .diagRight {
    width: 420px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.aboutUs .diagBlock .funnelWrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    background: #fff;
    border-radius: 10px;
    padding: 32px 16px;
    box-shadow: 0 5px 18px 1px rgba(132, 10, 188, 0.09);
}

.aboutUs .diagBlock .funnelTitle {
    font-size: 16px;
    line-height: 1.4;
    color: #840ABC;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.aboutUs .diagBlock .funnelStep {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.aboutUs .diagBlock .funnelBar {
    border-radius: 6px;
    height: 44px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1.4;
    color: #fff;
    transition: opacity 0.6s ease;
}

.aboutUs .diagBlock .funnelBar:hover {
    opacity: 0.85;
}

.aboutUs .diagBlock .funnelBar.f1 {
    width: 100%;
    background: #840ABC;
}

.aboutUs .diagBlock .funnelBar.f2 {
    width: 82%;
    background: linear-gradient(90deg, #840ABC, #F12784);
}

.aboutUs .diagBlock .funnelBar.f3 {
    width: 64%;
    background: #F12784;
}

.aboutUs .diagBlock .funnelBar.f4 {
    width: 46%;
    background: linear-gradient(90deg, #F12784, #41E5F0);
}

.aboutUs .diagBlock .funnelBar.f5 {
    width: 30%;
    background: #41E5F0;
    color: #18041f;
}

.aboutUs .diagBlock .funnelArrow {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid rgba(132, 10, 188, 0.15);
    margin: 4px 0;
}

.aboutUs .diagBlock .concCircles {
    position: absolute;
    bottom: -40px;
    right: -40px;
    width: 200px;
    height: 200px;
    pointer-events: none;
    z-index: 0;
    opacity: 0.35;
}

.aboutUs .diagBlock .concCircles circle {
    fill: none;
    stroke: rgba(65, 229, 240, 0.4);
    stroke-width: 1;
}

.aboutUs .diagBlock .diagImgWrap {
    position: relative;
}

.aboutUs .diagBlock .diagImgWrap img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    object-position: center;
    border-radius: 10px;
    display: block;
    filter: saturate(1);
    transition: filter 0.65s ease;
    box-shadow: 0 5px 18px 1px rgba(132, 10, 188, 0.09);
}

.aboutUs .diagBlock .diagImgWrap img:hover {
    filter: saturate(0);
}

.aboutUs .diagBlock .diagImgWrap .imgOffsetSmall {
    position: absolute;
    top: 8px;
    right: -8px;
    width: 100%;
    height: 100%;
    border: 2px solid rgba(132, 10, 188, 0.2);
    border-radius: 10px;
    z-index: -1;
}

.aboutUs .svgBullet {
    display: inline-block;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-top: 2px;
}

.aboutUs .bulletList {
    display: flex;
    flex-direction: column;
    gap: 12px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.aboutUs .bulletList li {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 8px;
    font-size: 16px;
    line-height: 1.6;
    color: #2d1a38;
}

@media (max-width: 1024px) {
    .aboutUs .splitHero {
        flex-direction: column;
    }

    .aboutUs .splitHero .heroLeft,
    .aboutUs .splitHero .heroRight {
        width: 100%;
        padding: 32px;
    }

    .aboutUs .missionBlock {
        flex-direction: column;
        padding: 32px;
    }

    .aboutUs .missionBlock .missionAside {
        width: 100%;
    }

    .aboutUs .missionImgWrap {
        width: 100%;
    }

    .aboutUs .missionImgWrap img {
        height: 300px;
    }

    .aboutUs .diagBlock .diagContent {
        flex-direction: column;
    }

    .aboutUs .diagBlock .diagRight {
        width: 100%;
    }

    .aboutUs .missionGrid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .aboutUs .heroH1 {
        font-size: 44px;
    }

    .aboutUs .missionBlock .missionH2,
    .aboutUs .diagBlock .diagH2 {
        font-size: 32px;
    }

    .aboutUs .heroStats {
        flex-direction: column;
        gap: 16px;
    }

    .aboutUs .missionBlock {
        padding: 32px 16px;
    }

    .aboutUs .diagBlock {
        padding: 32px 16px;
    }

    .aboutUs .sectionDivider {
        padding: 0 16px;
    }
}

.srvpg {
    max-width: 100%;
    overflow-x: hidden;
}

.srvpg .pgwrap {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 32px;
}

.srvpg .reveal {
    opacity: 0;
    transform: rotate(-3deg) translateY(24px);
    animation: revealIn 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.srvpg .reveal-delay1 {
    animation-delay: 0.1s;
}

.srvpg .reveal-delay2 {
    animation-delay: 0.22s;
}

.srvpg .reveal-delay3 {
    animation-delay: 0.36s;
}

.srvpg .reveal-delay4 {
    animation-delay: 0.5s;
}

@keyframes revealIn {
    to {
        opacity: 1;
        transform: rotate(0deg) translateY(0);
    }
}

.srvpg .titleblock {
    padding: 48px 0;
    background: linear-gradient(175deg, #f5f0fa 0%, #ffffff 100%);
}

.srvpg .titleblock .split {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 48px;
}

.srvpg .imgcard {
    flex: 0 0 38%;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 10px 48px 1px rgba(132, 10, 188, 0.11);
}

.srvpg .imgcard img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    object-position: center;
    display: block;
    filter: saturate(1);
    transition: filter 0.6s ease;
}

.srvpg .imgcard:hover img {
    filter: saturate(0);
}

.srvpg .imgcard .dof-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 120px;
    background: linear-gradient(to top, rgba(132, 10, 188, 0.18), transparent);
    pointer-events: none;
}

.srvpg .imgcard .counter-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: #840ABC;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.15;
    width: 48px;
    height: 48px;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    letter-spacing: -0.5px;
}

.srvpg .imgcard .counter-badge span {
    font-size: 16px;
    line-height: 1.15;
}

.srvpg .imgcard .counter-badge small {
    font-size: 16px;
    line-height: 1.15;
    opacity: 0.8;
    font-weight: 400;
}

.srvpg .txtzone {
    flex: 0 0 58%;
    position: relative;
    padding: 32px 0;
}

.srvpg .txtzone .bigquote {
    position: absolute;
    top: -16px;
    left: -24px;
    font-size: 160px;
    line-height: 1.15;
    color: #840ABC;
    opacity: 0.07;
    font-weight: 900;
    pointer-events: none;
    user-select: none;
    z-index: 0;
}

.srvpg .txtzone .txtin {
    position: relative;
    z-index: 1;
}

.srvpg .txttag {
    display: inline-block;
    font-size: 16px;
    line-height: 1.4;
    color: #840ABC;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.srvpg .h1main {
    font-size: 62px;
    line-height: 1.15;
    letter-spacing: -1.5px;
    color: #1a0033;
    margin: 0 0 16px;
    font-weight: 800;
}

.srvpg .h1main .gradword {
    background: linear-gradient(120deg, #840ABC 0%, transparent 160%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.srvpg .titlepar {
    font-size: 16px;
    line-height: 1.6;
    color: #3d2052;
    margin: 0 0 32px;
    max-width: 480px;
}

.srvpg .titlepar+.titlepar {
    margin-top: -16px;
}

.srvpg .cta-row {
    display: flex;
    flex-direction: row;
    gap: 16px;
    align-items: center;
}

.srvpg .btn-pri {
    display: inline-block;
    background: #840ABC;
    color: #fff;
    font-size: 16px;
    line-height: 1.4;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 12px 32px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 5px 18px 1px rgba(132, 10, 188, 0.09);
    transition: background 0.6s ease, box-shadow 0.5s ease;
}

.srvpg .btn-pri:hover {
    background: #F12784;
    box-shadow: 0 10px 48px 1px rgba(132, 10, 188, 0.11);
    color: #fff;
    text-decoration: none;
}

.srvpg .btn-sec {
    display: inline-block;
    background: transparent;
    color: #840ABC;
    font-size: 16px;
    line-height: 1.4;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 12px 32px;
    border-radius: 6px;
    border: 2px solid #840ABC;
    cursor: pointer;
    text-decoration: none;
    transition: border-color 0.55s ease, color 0.55s ease;
}

.srvpg .btn-sec:hover {
    border-color: #F12784;
    color: #F12784;
    text-decoration: none;
}

.srvpg .diamond-accent {
    position: absolute;
    bottom: 32px;
    right: -16px;
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #41E5F0 0%, transparent 100%);
    transform: rotate(45deg);
    border-radius: 0px;
    pointer-events: none;
    opacity: 0.7;
}

.srvpg .svclist {
    padding: 48px 0;
    background: linear-gradient(180deg, #ffffff 0%, #fdf6ff 100%);
    position: relative;
}

.srvpg .svclist .zigzag-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.srvpg .svclist .zigzag-bg svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.04;
}

.srvpg .svclist .listrelin {
    position: relative;
    z-index: 1;
}

.srvpg .seclabel {
    font-size: 16px;
    line-height: 1.4;
    color: #F12784;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.srvpg .h2sec {
    font-size: 44px;
    line-height: 1.15;
    letter-spacing: -1px;
    color: #1a0033;
    font-weight: 800;
    margin: 0 0 48px;
    max-width: 560px;
}

.srvpg .svcgrid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 32px;
}

.srvpg .svccard {
    background: #fff;
    border-radius: 10px;
    padding: 32px;
    box-shadow: 0 2px 4px 1px rgba(132, 10, 188, 0.05);
    position: relative;
    transition: box-shadow 0.6s ease, transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow: hidden;
}

.srvpg .svccard:hover {
    box-shadow: 0 10px 48px 1px rgba(132, 10, 188, 0.11);
    transform: translateY(-4px);
}

.srvpg .svccard .fadenum {
    position: absolute;
    top: -8px;
    right: 16px;
    font-size: 72px;
    line-height: 1.15;
    font-weight: 900;
    color: #840ABC;
    opacity: 0.06;
    pointer-events: none;
    user-select: none;
    letter-spacing: -2px;
}

.srvpg .svccard .svciconbox {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: linear-gradient(135deg, #840ABC 0%, transparent 180%);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    box-shadow: inset 0 2px 4px 1px rgba(132, 10, 188, 0.09);
}

.srvpg .svccard .svciconbox svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: #fff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.srvpg .svccard .svcname {
    font-size: 32px;
    line-height: 1.15;
    letter-spacing: -0.5px;
    color: #1a0033;
    font-weight: 700;
    margin: 0 0 12px;
}

.srvpg .svccard .svctext {
    font-size: 16px;
    line-height: 1.6;
    color: #3d2052;
    margin: 0 0 16px;
}

.srvpg .svccard .svclist-items {
    list-style: none;
    padding: 0;
    margin: 0;
}

.srvpg .svccard .svclist-items li {
    font-size: 16px;
    line-height: 1.6;
    color: #3d2052;
    padding: 4px 0 4px 24px;
    position: relative;
}

.srvpg .svccard .svclist-items li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    background: none;
}

.srvpg .svccard .svclist-items li .lisvg {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
}

.srvpg .svccard.featured {
    background: linear-gradient(160deg, #840ABC 0%, #5a0880 100%);
    box-shadow: 0 10px 48px 1px rgba(132, 10, 188, 0.11);
}

.srvpg .svccard.featured .svcname {
    color: #fff;
}

.srvpg .svccard.featured .svctext {
    color: rgba(255, 255, 255, 0.85);
}

.srvpg .svccard.featured .svclist-items li {
    color: rgba(255, 255, 255, 0.85);
}

.srvpg .svccard.featured .fadenum {
    color: #fff;
    opacity: 0.08;
}

.srvpg .svccard.featured .svciconbox {
    background: rgba(255, 255, 255, 0.2);
    box-shadow: inset 0 2px 4px 1px rgba(255, 255, 255, 0.1);
}

.srvpg .svccard.featured:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 48px 1px rgba(132, 10, 188, 0.18) !important;
}

.srvpg .socialproof {
    padding: 48px 0;
    background: linear-gradient(170deg, #0d0020 0%, #1a0040 100%);
    position: relative;
}

.srvpg .socialproof .pgwrap {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 32px;
}

.srvpg .proofgrid {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 48px;
    align-items: start;
}

.srvpg .proofside .seclabel-lt {
    font-size: 16px;
    line-height: 1.4;
    color: #41E5F0;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.srvpg .proofside .h2lt {
    font-size: 44px;
    line-height: 1.15;
    letter-spacing: -1px;
    color: #fff;
    font-weight: 800;
    margin: 0 0 32px;
}

.srvpg .statsrow {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.srvpg .statitem {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: inset 0 2px 4px 1px rgba(132, 10, 188, 0.09);
    transition: background 0.6s ease;
}

.srvpg .statitem:hover {
    background: rgba(255, 255, 255, 0.1);
}

.srvpg .statnum {
    font-size: 44px;
    line-height: 1.15;
    font-weight: 900;
    letter-spacing: -1px;
    color: #41E5F0;
    min-width: 80px;
    text-align: center;
}

.srvpg .statlabel {
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
}

.srvpg .testimside {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.srvpg .testimcard {
    background: rgba(255, 255, 255, 0.07);
    border-radius: 10px;
    padding: 32px;
    box-shadow: 0 5px 18px 1px rgba(241, 39, 132, 0.09);
    transition: background 0.55s ease;
}

.srvpg .testimcard:hover {
    background: rgba(255, 255, 255, 0.12);
}

.srvpg .testimquote {
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.88);
    margin: 0 0 16px;
    font-style: italic;
}

.srvpg .testimauthor {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

.srvpg .testimportrait {
    width: 48px;
    height: 48px;
    border-radius: 32px;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 2px 4px 1px rgba(132, 10, 188, 0.05);
}

.srvpg .testimportrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: filter 0.7s ease;
}

.srvpg .testimportrait:hover img {
    filter: saturate(0);
}

.srvpg .authorinfo .aname {
    font-size: 16px;
    line-height: 1.4;
    color: #fff;
    font-weight: 700;
    margin: 0 0 4px;
}

.srvpg .authorinfo .arole {
    font-size: 16px;
    line-height: 1.4;
    color: #41E5F0;
    margin: 0;
}

.srvpg .faqblock {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    padding: 32px;
    box-shadow: inset 0 2px 4px 1px rgba(132, 10, 188, 0.09);
}

.srvpg .faqblock .faqq {
    font-size: 16px;
    line-height: 1.4;
    color: #41E5F0;
    font-weight: 700;
    margin: 0 0 12px;
    letter-spacing: 0.2px;
}

.srvpg .faqblock .faqa {
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.82);
    margin: 0;
}

.srvpg .imgfull {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 10px 48px 1px rgba(132, 10, 188, 0.11);
    margin-top: 32px;
}

.srvpg .imgfull img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    object-position: center;
    display: block;
    filter: saturate(1);
    transition: filter 0.65s ease;
}

.srvpg .imgfull:hover img {
    filter: saturate(0);
}

.srvpg .imgfull .darkov {
    position: absolute;
    inset: 0;
    background: rgba(13, 0, 32, 0.72);
    opacity: 0;
    transition: opacity 0.6s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}

.srvpg .imgfull:hover .darkov {
    opacity: 1;
}

.srvpg .imgfull .darkov .ovtext {
    font-size: 16px;
    line-height: 1.6;
    color: #fff;
    text-align: center;
    padding: 0 32px;
}

@media (max-width: 1024px) {
    .srvpg .svcgrid {
        grid-template-columns: 1fr 1fr;
    }

    .srvpg .proofgrid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .srvpg .h1main {
        font-size: 44px;
    }
}

@media (max-width: 768px) {
    .srvpg .titleblock .split {
        flex-direction: column;
        gap: 32px;
    }

    .srvpg .imgcard {
        flex: 0 0 auto;
        width: 100%;
    }

    .srvpg .txtzone {
        flex: 0 0 auto;
        width: 100%;
    }

    .srvpg .svcgrid {
        grid-template-columns: 1fr;
    }

    .srvpg .h1main {
        font-size: 32px;
    }

    .srvpg .h2sec {
        font-size: 32px;
    }

    .srvpg .proofside .h2lt {
        font-size: 32px;
    }

    .srvpg .cta-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .srvpg .pgwrap {
        padding: 0 16px;
    }

    .srvpg .statsrow {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .srvpg .statitem {
        flex: 1 1 calc(50% - 8px);
    }
}

.prm {
    max-width: 100%;
    overflow-x: hidden;
}

.prm .prmWrap {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 32px;
}

.prm .titleBlock {
    padding: 48px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    background: #fff;
}

.prm .titleBlock .shapeLeft {
    position: absolute;
    left: 0;
    top: 48px;
    width: 180px;
    height: 180px;
    border-radius: 0 0 32px 0;
    background: linear-gradient(135deg, rgba(132, 10, 188, 0.07), transparent);
    pointer-events: none;
}

.prm .titleBlock .shapeRight {
    position: absolute;
    right: 0;
    top: 32px;
    width: 140px;
    height: 140px;
    border-radius: 32px 0 0 32px;
    background: linear-gradient(225deg, rgba(241, 39, 132, 0.06), transparent);
    pointer-events: none;
}

.prm .titleBlock .shapeBottom {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 320px;
    height: 4px;
    background: linear-gradient(90deg, transparent, rgba(65, 229, 240, 0.4), transparent);
    pointer-events: none;
}

.prm .titleText {
    position: relative;
    z-index: 1;
    margin-bottom: 48px;
}

.prm .titleText .fadedLabel {
    font-size: 72px;
    line-height: 1.15;
    font-weight: 900;
    letter-spacing: -2px;
    color: rgba(132, 10, 188, 0.06);
    position: absolute;
    top: -24px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
}

.prm .titleText h1 {
    font-size: 62px;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -1.5px;
    color: #1a0030;
    margin: 0 0 16px;
    position: relative;
}

.prm .titleText h1 span {
    color: #840ABC;
}

.prm .titleText .sub {
    font-size: 16px;
    line-height: 1.6;
    color: #3d2050;
    max-width: 560px;
    margin: 0 auto;
}

.prm .titleImgRow {
    display: flex;
    flex-direction: row;
    gap: 16px;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    max-width: 1100px;
}

.prm .titleImgMain {
    width: 520px;
    height: 340px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 10px 48px 1px rgba(132, 10, 188, 0.11);
    flex-shrink: 0;
}

.prm .titleImgMain img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: filter 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.prm .titleImgMain:hover img {
    filter: saturate(0);
}

.prm .titleImgSide {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.prm .titleImgSide .imgSmall {
    width: 220px;
    height: 156px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 18px 1px rgba(132, 10, 188, 0.09);
}

.prm .titleImgSide .imgSmall img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: filter 0.7s ease;
}

.prm .titleImgSide .imgSmall:hover img {
    filter: saturate(0);
}

.prm .titleBadge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(65, 229, 240, 0.1);
    border: 1px solid rgba(65, 229, 240, 0.3);
    border-radius: 6px;
    padding: 4px 16px;
    font-size: 16px;
    color: #1a0030;
    margin-bottom: 16px;
}

.prm .titleBadge .dot {
    width: 8px;
    height: 8px;
    border-radius: 32px;
    background: #41E5F0;
    flex-shrink: 0;
}

.prm .afterBlock {
    background: #f5eeff;
    padding: 48px 32px;
    position: relative;
}

.prm .afterBlock::before {
    content: "";
    display: block;
    position: absolute;
    top: -28px;
    left: 0;
    width: 100%;
    height: 30px;
    background: #f5eeff;
    clip-path: ellipse(52% 100% at 50% 100%);
    pointer-events: none;
}

.prm .afterBlock .prmWrap {
    display: flex;
    flex-direction: row;
    gap: 48px;
    align-items: flex-start;
}

.prm .afterBlock .afterNote {
    width: 200px;
    flex-shrink: 0;
    padding-top: 8px;
}

.prm .afterBlock .afterNote .noteLabel {
    font-size: 16px;
    line-height: 1.6;
    color: #840ABC;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.prm .afterBlock .afterNote .noteDesc {
    font-size: 16px;
    line-height: 1.6;
    color: #3d2050;
    margin-top: 8px;
}

.prm .afterBlock .afterMain {
    flex: 1;
}

.prm .afterBlock .afterMain h2 {
    font-size: 44px;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -1px;
    color: #1a0030;
    margin: 0 0 32px;
    position: relative;
}

.prm .afterBlock .afterMain h2 .bgNum {
    font-size: 72px;
    font-weight: 900;
    color: rgba(132, 10, 188, 0.05);
    position: absolute;
    top: -16px;
    left: -8px;
    line-height: 1;
    pointer-events: none;
    user-select: none;
}

.prm .outcomeGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.prm .outcomeCard {
    background: #fff;
    border-radius: 10px;
    padding: 32px;
    box-shadow: inset 0 2px 4px 1px rgba(132, 10, 188, 0.05), 0 2px 4px 1px rgba(132, 10, 188, 0.05);
    border: 1px dashed rgba(132, 10, 188, 0.18);
    position: relative;
    overflow: hidden;
    transition: box-shadow 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.prm .outcomeCard:hover {
    box-shadow: inset 0 2px 4px 1px rgba(132, 10, 188, 0.08), 0 10px 48px 1px rgba(132, 10, 188, 0.11);
}

.prm .outcomeCard .cardNum {
    font-size: 44px;
    font-weight: 900;
    color: rgba(132, 10, 188, 0.07);
    line-height: 1;
    position: absolute;
    top: 8px;
    right: 16px;
    pointer-events: none;
    user-select: none;
}

.prm .outcomeCard h4 {
    font-size: 16px;
    font-weight: 700;
    color: #1a0030;
    margin: 0 0 8px;
    line-height: 1.4;
}

.prm .outcomeCard p {
    font-size: 16px;
    line-height: 1.6;
    color: #3d2050;
    margin: 0;
}

.prm .outcomeCard .slideLabel {
    position: absolute;
    left: -120px;
    bottom: 12px;
    background: #840ABC;
    color: #fff;
    font-size: 16px;
    padding: 4px 12px;
    border-radius: 0 6px 6px 0;
    font-weight: 600;
    transition: left 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    pointer-events: none;
}

.prm .outcomeCard:hover .slideLabel {
    left: 0;
}

.prm .teamBlock {
    background: #fff;
    padding: 48px 32px;
    position: relative;
}

.prm .teamBlock::after {
    content: "";
    display: block;
    position: absolute;
    bottom: -28px;
    left: 0;
    width: 100%;
    height: 30px;
    background: #fff;
    clip-path: ellipse(52% 100% at 50% 0%);
    pointer-events: none;
    z-index: 1;
}

.prm .teamBlock .prmWrap {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 48px;
    align-items: start;
}

.prm .teamBlock .teamText h2 {
    font-size: 44px;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -1px;
    color: #1a0030;
    margin: 0 0 32px;
    position: relative;
}

.prm .teamBlock .teamText h2 .bgNum {
    font-size: 72px;
    font-weight: 900;
    color: rgba(241, 39, 132, 0.05);
    position: absolute;
    top: -16px;
    left: -8px;
    line-height: 1;
    pointer-events: none;
    user-select: none;
}

.prm .teamBlock .teamText p {
    font-size: 16px;
    line-height: 1.6;
    color: #3d2050;
    margin: 0 0 16px;
}

.prm .teamProfiles {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.prm .profileCard {
    display: flex;
    flex-direction: row;
    gap: 16px;
    align-items: flex-start;
    padding: 16px;
    border-radius: 10px;
    border: 1px solid rgba(132, 10, 188, 0.1);
    box-shadow: 0 2px 4px 1px rgba(132, 10, 188, 0.05);
    transition: box-shadow 0.65s ease;
}

.prm .profileCard:hover {
    box-shadow: 0 5px 18px 1px rgba(132, 10, 188, 0.09);
}

.prm .profileImg {
    width: 80px;
    height: 112px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
}

.prm .profileImg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: filter 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.prm .profileImg:hover img {
    filter: saturate(0);
}

.prm .profileInfo h5 {
    font-size: 16px;
    font-weight: 700;
    color: #1a0030;
    margin: 0 0 4px;
}

.prm .profileInfo .role {
    font-size: 16px;
    color: #840ABC;
    font-weight: 600;
    margin: 0 0 8px;
}

.prm .profileInfo p {
    font-size: 16px;
    line-height: 1.6;
    color: #3d2050;
    margin: 0;
}

.prm .teamQualList {
    list-style: none;
    padding: 0;
    margin: 32px 0 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.prm .teamQualList li {
    display: flex;
    flex-direction: row;
    gap: 12px;
    align-items: flex-start;
    font-size: 16px;
    line-height: 1.6;
    color: #3d2050;
}

.prm .teamQualList li .qIcon {
    flex-shrink: 0;
    margin-top: 4px;
}

.prm .teamQualList li .qIcon svg {
    display: block;
}

.prm .gapBlock {
    background: linear-gradient(160deg, #1a0030 0%, #2d004d 100%);
    padding: 48px 32px;
    margin-top: 32px;
    position: relative;
}

.prm .gapBlock .prmWrap {
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.prm .gapBlock .gapTop {
    display: flex;
    flex-direction: row;
    gap: 48px;
    align-items: flex-start;
}

.prm .gapBlock .gapHeading {
    flex: 1;
}

.prm .gapBlock .gapHeading h2 {
    font-size: 44px;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -1px;
    color: #fff;
    margin: 0 0 16px;
}

.prm .gapBlock .gapHeading h2 em {
    color: #41E5F0;
    font-style: normal;
}

.prm .gapBlock .gapHeading p {
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.75);
    margin: 0;
}

.prm .gapBlock .gapImg {
    width: 380px;
    height: 260px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 10px 48px 1px rgba(241, 39, 132, 0.11);
}

.prm .gapBlock .gapImg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: filter 0.8s ease;
}

.prm .gapBlock .gapImg:hover img {
    filter: saturate(0);
}

.prm .gapSteps {
    display: flex;
    flex-direction: row;
    gap: 16px;
}

.prm .gapStep {
    flex: 1;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 32px;
    border: 1px solid rgba(65, 229, 240, 0.15);
    position: relative;
    overflow: hidden;
    transition: background 0.6s ease;
}

.prm .gapStep:hover {
    background: rgba(255, 255, 255, 0.1);
}

.prm .gapStep .stepNum {
    font-size: 44px;
    font-weight: 900;
    color: rgba(65, 229, 240, 0.12);
    line-height: 1;
    position: absolute;
    top: 8px;
    right: 12px;
    pointer-events: none;
    user-select: none;
}

.prm .gapStep h5 {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 8px;
}

.prm .gapStep p {
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

.prm .gapStep .slideLabel {
    position: absolute;
    left: -160px;
    bottom: 12px;
    background: #F12784;
    color: #fff;
    font-size: 16px;
    padding: 4px 12px;
    border-radius: 0 6px 6px 0;
    font-weight: 600;
    transition: left 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    pointer-events: none;
}

.prm .gapStep:hover .slideLabel {
    left: 0;
}

.prm .supportBlock {
    background: #fdf0f8;
    padding: 48px 32px;
    position: relative;
}

.prm .supportBlock::before {
    content: "";
    display: block;
    position: absolute;
    top: -28px;
    left: 0;
    width: 100%;
    height: 30px;
    background: #fdf0f8;
    clip-path: ellipse(52% 100% at 50% 100%);
    pointer-events: none;
}

.prm .supportBlock .prmWrap {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 48px;
    align-items: start;
}

.prm .supportBlock .suppImg {
    width: 340px;
    height: 460px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 10px 48px 1px rgba(241, 39, 132, 0.11);
}

.prm .supportBlock .suppImg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: filter 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.prm .supportBlock .suppImg:hover img {
    filter: saturate(0);
}

.prm .supportBlock .suppText h2 {
    font-size: 44px;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -1px;
    color: #1a0030;
    margin: 0 0 16px;
    position: relative;
}

.prm .supportBlock .suppText h2 .bgNum {
    font-size: 72px;
    font-weight: 900;
    color: rgba(241, 39, 132, 0.05);
    position: absolute;
    top: -16px;
    left: -8px;
    line-height: 1;
    pointer-events: none;
    user-select: none;
}

.prm .supportBlock .suppText p {
    font-size: 16px;
    line-height: 1.6;
    color: #3d2050;
    margin: 0 0 16px;
}

.prm .suppChannels {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 32px;
}

.prm .suppChannel {
    display: flex;
    flex-direction: row;
    gap: 16px;
    align-items: flex-start;
    background: #fff;
    border-radius: 10px;
    padding: 16px;
    border: 1px solid rgba(241, 39, 132, 0.12);
    box-shadow: 0 2px 4px 1px rgba(241, 39, 132, 0.05);
    transition: box-shadow 0.6s ease;
    position: relative;
    overflow: hidden;
}

.prm .suppChannel:hover {
    box-shadow: 0 5px 18px 1px rgba(241, 39, 132, 0.09);
}

.prm .suppChannel .chIcon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(132, 10, 188, 0.1), rgba(241, 39, 132, 0.08));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.prm .suppChannel .chText h6 {
    font-size: 16px;
    font-weight: 700;
    color: #1a0030;
    margin: 0 0 4px;
}

.prm .suppChannel .chText p {
    font-size: 16px;
    line-height: 1.4;
    color: #3d2050;
    margin: 0;
}

.prm .suppChannel .slideLabel {
    position: absolute;
    left: -140px;
    bottom: 8px;
    background: #F12784;
    color: #fff;
    font-size: 16px;
    padding: 4px 12px;
    border-radius: 0 6px 6px 0;
    font-weight: 600;
    transition: left 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    pointer-events: none;
}

.prm .suppChannel:hover .slideLabel {
    left: 0;
}

.prm .valueBlock {
    background: #fff;
    padding: 48px 32px;
    position: relative;
}

.prm .valueBlock .prmWrap {
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.prm .valueBlock .valTop {
    display: flex;
    flex-direction: row;
    gap: 48px;
    align-items: flex-start;
}

.prm .valueBlock .valHead {
    flex: 1;
}

.prm .valueBlock .valHead h2 {
    font-size: 44px;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -1px;
    color: #1a0030;
    margin: 0 0 16px;
    position: relative;
}

.prm .valueBlock .valHead h2 .bgNum {
    font-size: 72px;
    font-weight: 900;
    color: rgba(65, 229, 240, 0.1);
    position: absolute;
    top: -16px;
    left: -8px;
    line-height: 1;
    pointer-events: none;
    user-select: none;
}

.prm .valueBlock .valHead p {
    font-size: 16px;
    line-height: 1.6;
    color: #3d2050;
    margin: 0 0 16px;
}

.prm .valueBlock .valNote {
    width: 240px;
    flex-shrink: 0;
    background: #f5eeff;
    border-radius: 10px;
    padding: 32px;
    border: 1px dashed rgba(132, 10, 188, 0.2);
    box-shadow: inset 0 2px 4px 1px rgba(132, 10, 188, 0.05);
}

.prm .valueBlock .valNote p {
    font-size: 16px;
    line-height: 1.6;
    color: #3d2050;
    margin: 0;
}

.prm .valueBlock .valNote .noteTag {
    font-size: 16px;
    font-weight: 700;
    color: #840ABC;
    margin-bottom: 8px;
    display: block;
}

.prm .valCards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.prm .valCard {
    border-radius: 10px;
    padding: 32px;
    background: #f5eeff;
    border: 1px solid rgba(132, 10, 188, 0.1);
    box-shadow: inset 0 2px 4px 1px rgba(132, 10, 188, 0.05);
    position: relative;
    overflow: hidden;
    transition: box-shadow 0.55s ease;
}

.prm .valCard:hover {
    box-shadow: inset 0 2px 4px 1px rgba(132, 10, 188, 0.08), 0 10px 48px 1px rgba(132, 10, 188, 0.11);
}

.prm .valCard .cardNum {
    font-size: 62px;
    font-weight: 900;
    color: rgba(132, 10, 188, 0.06);
    line-height: 1;
    position: absolute;
    top: 4px;
    right: 12px;
    pointer-events: none;
    user-select: none;
}

.prm .valCard h4 {
    font-size: 16px;
    font-weight: 700;
    color: #1a0030;
    margin: 0 0 8px;
    line-height: 1.4;
}

.prm .valCard p {
    font-size: 16px;
    line-height: 1.6;
    color: #3d2050;
    margin: 0;
}

.prm .valCard .slideLabel {
    position: absolute;
    left: -160px;
    bottom: 12px;
    background: #840ABC;
    color: #fff;
    font-size: 16px;
    padding: 4px 12px;
    border-radius: 0 6px 6px 0;
    font-weight: 600;
    transition: left 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    pointer-events: none;
}

.prm .valCard:hover .slideLabel {
    left: 0;
}

.prm .valCta {
    display: flex;
    flex-direction: row;
    gap: 16px;
    align-items: center;
}

.prm .valCta a {
    display: inline-block;
    padding: 16px 32px;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    transition: background 0.55s ease, color 0.55s ease, box-shadow 0.55s ease;
}

.prm .valCta a.primary {
    background: #840ABC;
    color: #fff;
    box-shadow: 0 5px 18px 1px rgba(132, 10, 188, 0.09);
}

.prm .valCta a.primary:hover {
    background: #6a0899;
    box-shadow: 0 10px 48px 1px rgba(132, 10, 188, 0.11);
}

.prm .valCta a.secondary {
    background: transparent;
    color: #840ABC;
    border: 2px solid #840ABC;
}

.prm .valCta a.secondary:hover {
    background: rgba(132, 10, 188, 0.07);
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-48px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(48px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.prm .titleText {
    animation: slideInLeft 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.prm .titleImgRow {
    animation: slideInRight 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s both;
}

.prm .afterBlock .afterNote {
    animation: slideInLeft 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.05s both;
}

.prm .afterBlock .afterMain {
    animation: slideInRight 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s both;
}

@media (max-width: 1024px) {
    .prm .titleImgMain {
        width: 380px;
        height: 260px;
    }

    .prm .titleImgSide .imgSmall {
        width: 160px;
        height: 120px;
    }

    .prm .afterBlock .prmWrap {
        flex-direction: column;
        gap: 32px;
    }

    .prm .afterBlock .afterNote {
        width: 100%;
    }

    .prm .outcomeGrid {
        grid-template-columns: 1fr;
    }

    .prm .teamBlock .prmWrap {
        grid-template-columns: 1fr;
    }

    .prm .gapBlock .gapTop {
        flex-direction: column;
        gap: 32px;
    }

    .prm .gapBlock .gapImg {
        width: 100%;
    }

    .prm .gapSteps {
        flex-direction: column;
    }

    .prm .supportBlock .prmWrap {
        grid-template-columns: 1fr;
    }

    .prm .supportBlock .suppImg {
        width: 100%;
        height: 280px;
    }

    .prm .valueBlock .valTop {
        flex-direction: column;
        gap: 32px;
    }

    .prm .valueBlock .valNote {
        width: 100%;
    }

    .prm .valCards {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 640px) {
    .prm .titleText h1 {
        font-size: 44px;
    }

    .prm .titleImgRow {
        flex-direction: column;
        align-items: center;
    }

    .prm .titleImgMain {
        width: 100%;
        height: 220px;
    }

    .prm .titleImgSide {
        flex-direction: row;
        width: 100%;
    }

    .prm .titleImgSide .imgSmall {
        flex: 1;
        width: auto;
        height: 100px;
    }

    .prm .afterBlock .afterMain h2 {
        font-size: 32px;
    }

    .prm .teamBlock .teamText h2 {
        font-size: 32px;
    }

    .prm .gapBlock .gapHeading h2 {
        font-size: 32px;
    }

    .prm .supportBlock .suppText h2 {
        font-size: 32px;
    }

    .prm .valueBlock .valHead h2 {
        font-size: 32px;
    }

    .prm .valCards {
        grid-template-columns: 1fr;
    }

    .prm .valCta {
        flex-direction: column;
        align-items: flex-start;
    }

    .prm .prmWrap {
        padding: 0 16px;
    }

    .prm .titleBlock {
        padding: 32px 16px;
    }

    .prm .afterBlock {
        padding: 32px 16px;
    }

    .prm .teamBlock {
        padding: 32px 16px;
    }

    .prm .gapBlock {
        padding: 32px 16px;
    }

    .prm .supportBlock {
        padding: 32px 16px;
    }

    .prm .valueBlock {
        padding: 32px 16px;
    }
}

.lrnprog {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
    background: #ffffff;
}

.lrnprog .pg-inner {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 32px;
}

.lrnprog .eyebrow {
    display: inline-block;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #840ABC;
    margin-bottom: 16px;
    line-height: 1.4;
}

.lrnprog .zigzag-divider {
    width: 100%;
    display: block;
    line-height: 0;
}

.lrnprog .tri-divider {
    width: 100%;
    display: block;
    line-height: 0;
}

.lrnprog .titleblock {
    padding: 48px 0 0;
    position: relative;
}

.lrnprog .titleblock-row {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 0;
    min-height: 480px;
}

.lrnprog .titleblock-imgstrip {
    width: 320px;
    flex-shrink: 0;
    position: relative;
    border-radius: 10px 0 0 10px;
    overflow: hidden;
}

.lrnprog .titleblock-imgstrip img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    filter: saturate(0.7) brightness(0.95);
    transition: filter 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.lrnprog .titleblock-imgstrip:hover img {
    filter: saturate(0.3) brightness(0.9);
}

.lrnprog .imgstrip-overlay {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(0deg,
            transparent,
            transparent 3px,
            rgba(132, 10, 188, 0.06) 3px,
            rgba(132, 10, 188, 0.06) 4px);
    pointer-events: none;
}

.lrnprog .imgstrip-deco {
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(132, 10, 188, 0.18) 0%, transparent 60%);
    pointer-events: none;
}

.lrnprog .titleblock-text {
    flex: 1;
    padding: 48px 48px 48px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: linear-gradient(112deg, #f7f0ff 0%, #ffffff 100%);
    border-radius: 0 10px 10px 0;
    position: relative;
}

.lrnprog .titleblock-text .tb-h1 {
    font-size: 62px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.03em;
    color: #1a0030;
    margin: 0 0 16px;
    max-width: 720px;
}

.lrnprog .titleblock-text .tb-h1 em {
    font-style: normal;
    color: #840ABC;
}

.lrnprog .tb-meta {
    display: flex;
    flex-direction: row;
    gap: 32px;
    margin-top: 32px;
    flex-wrap: wrap;
}

.lrnprog .tb-metaitem {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.lrnprog .tb-metaitem .metanum {
    font-size: 32px;
    font-weight: 800;
    color: #840ABC;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.lrnprog .tb-metaitem .metalabel {
    font-size: 16px;
    color: #4a3060;
    line-height: 1.4;
}

.lrnprog .titleblock-text::before {
    content: "";
    position: absolute;
    top: 24px;
    right: 24px;
    width: 120px;
    height: 120px;
    border: 2px solid rgba(132, 10, 188, 0.08);
    border-radius: 10px;
    pointer-events: none;
}

.lrnprog .titleblock-text::after {
    content: "";
    position: absolute;
    top: 30px;
    right: 30px;
    width: 120px;
    height: 120px;
    border: 4px solid rgba(132, 10, 188, 0.12);
    border-radius: 10px;
    pointer-events: none;
}

.lrnprog .zigzag-top {
    margin-top: 48px;
}

.lrnprog .modules-section {
    background: #f7f0ff;
    padding: 48px 0;
    position: relative;
}

.lrnprog .modules-section .pg-inner {
    position: relative;
}

.lrnprog .sec-heading {
    font-size: 44px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.025em;
    color: #1a0030;
    margin: 0 0 8px;
}

.lrnprog .sec-sub {
    font-size: 16px;
    color: #4a3060;
    line-height: 1.6;
    max-width: 560px;
    margin: 0 0 48px;
}

.lrnprog .modules-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 32px;
}

.lrnprog .modcard {
    background: #ffffff;
    border-radius: 10px;
    padding: 32px;
    box-shadow: 0 5px 18px 1px rgba(132, 10, 188, 0.09);
    position: relative;
    overflow: hidden;
    transition: box-shadow 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    cursor: default;
}

.lrnprog .modcard:hover {
    box-shadow: 0 10px 48px 1px rgba(132, 10, 188, 0.11);
    transform: translateY(-4px);
}

.lrnprog .modcard-num {
    font-size: 72px;
    font-weight: 900;
    line-height: 1.15;
    color: rgba(132, 10, 188, 0.06);
    position: absolute;
    top: 8px;
    right: 16px;
    letter-spacing: -0.04em;
    pointer-events: none;
    user-select: none;
}

.lrnprog .modcard-icon {
    width: 40px;
    height: 40px;
    margin-bottom: 16px;
    flex-shrink: 0;
}

.lrnprog .modcard-h {
    font-size: 16px;
    font-weight: 700;
    color: #1a0030;
    line-height: 1.4;
    margin: 0 0 8px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.lrnprog .modcard-p {
    font-size: 16px;
    color: #4a3060;
    line-height: 1.6;
    margin: 0 0 16px;
}

.lrnprog .modcard-topics {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lrnprog .modcard-topics li {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 8px;
    font-size: 16px;
    color: #2d1a45;
    line-height: 1.4;
}

.lrnprog .modcard-topics li .svg-bullet {
    flex-shrink: 0;
    margin-top: 3px;
}

.lrnprog .modcard-reveal {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(132, 10, 188, 0.04) 0%, transparent 60%);
    clip-path: inset(0 100% 0 0);
    transition: clip-path 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    pointer-events: none;
}

.lrnprog .modcard:hover .modcard-reveal {
    clip-path: inset(0 0% 0 0);
}

.lrnprog .modules-section .bkgrid-texture {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(132, 10, 188, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(132, 10, 188, 0.04) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
    border-radius: 0;
}

.lrnprog .tri-down {
    display: block;
    width: 100%;
    line-height: 0;
}

.lrnprog .outcomes-section {
    background: #ffffff;
    padding: 48px 0;
}

.lrnprog .outcomes-row {
    display: flex;
    flex-direction: row;
    gap: 48px;
    align-items: flex-start;
}

.lrnprog .outcomes-aside {
    width: 220px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.lrnprog .aside-note {
    font-size: 16px;
    color: #840ABC;
    line-height: 1.6;
    font-weight: 600;
    border-top: 2px solid #840ABC;
    padding-top: 12px;
}

.lrnprog .aside-note2 {
    font-size: 16px;
    color: #4a3060;
    line-height: 1.6;
}

.lrnprog .outcomes-main {
    flex: 1;
}

.lrnprog .outcomes-main .sec-heading {
    margin-bottom: 32px;
}

.lrnprog .datatbl {
    width: 100%;
    border-collapse: collapse;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 4px 1px rgba(132, 10, 188, 0.05);
    margin-bottom: 32px;
}

.lrnprog .datatbl thead tr {
    background: #840ABC;
    color: #ffffff;
}

.lrnprog .datatbl thead th {
    padding: 16px;
    font-size: 16px;
    font-weight: 700;
    text-align: left;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.lrnprog .datatbl tbody tr {
    background: #ffffff;
    transition: background 0.5s ease;
}

.lrnprog .datatbl tbody tr:nth-child(even) {
    background: #f7f0ff;
}

.lrnprog .datatbl tbody tr:hover {
    background: #ede0ff;
}

.lrnprog .datatbl tbody td {
    padding: 16px;
    font-size: 16px;
    color: #2d1a45;
    line-height: 1.4;
    border-bottom: 1px solid rgba(132, 10, 188, 0.06);
}

.lrnprog .datatbl tbody td .skill-tag {
    display: inline-block;
    background: rgba(65, 229, 240, 0.15);
    color: #0a7a80;
    font-size: 16px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 6px;
}

.lrnprog .datatbl tbody td .level-dot {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.lrnprog .datatbl tbody td .level-dot span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.lrnprog .dot-active {
    background: #840ABC;
}

.lrnprog .dot-inactive {
    background: rgba(132, 10, 188, 0.15);
}

.lrnprog .testimonials-row {
    display: flex;
    flex-direction: row;
    gap: 32px;
    margin-top: 32px;
}

.lrnprog .tcard {
    flex: 1;
    background: #f7f0ff;
    border-radius: 10px;
    padding: 32px;
    box-shadow: 0 2px 4px 1px rgba(132, 10, 188, 0.05);
    position: relative;
    transition: box-shadow 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.lrnprog .tcard:hover {
    box-shadow: 0 10px 48px 1px rgba(241, 39, 132, 0.11);
}

.lrnprog .tcard-quote {
    font-size: 44px;
    font-weight: 900;
    line-height: 1.15;
    color: rgba(132, 10, 188, 0.12);
    position: absolute;
    top: 16px;
    left: 24px;
    pointer-events: none;
    user-select: none;
    font-style: italic;
}

.lrnprog .tcard-text {
    font-size: 16px;
    color: #2d1a45;
    line-height: 1.6;
    margin: 0 0 16px;
    padding-top: 24px;
}

.lrnprog .tcard-person {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

.lrnprog .tcard-portrait {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.lrnprog .tcard-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    filter: saturate(0.8);
    transition: filter 0.6s ease;
}

.lrnprog .tcard-portrait img:hover {
    filter: saturate(0.3);
}

.lrnprog .tcard-name {
    font-size: 16px;
    font-weight: 700;
    color: #1a0030;
    line-height: 1.4;
}

.lrnprog .tcard-role {
    font-size: 16px;
    color: #840ABC;
    line-height: 1.4;
}

.lrnprog .tcard-noportrait {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #840ABC 0%, #F12784 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.lrnprog .tcard-noportrait .initials {
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1;
}

.lrnprog .zigzag-bottom {
    margin-top: 0;
}

.lrnprog .cta-section {
    background: linear-gradient(112deg, #2d0045 0%, #1a0030 100%);
    padding: 48px 0;
    position: relative;
    overflow: hidden;
}

.lrnprog .cta-section .bkgrid-dark {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(65, 229, 240, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(65, 229, 240, 0.05) 1px, transparent 1px);
    background-size: 48px 48px;
    pointer-events: none;
}

.lrnprog .cta-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: row;
    gap: 48px;
    align-items: center;
}

.lrnprog .cta-text {
    flex: 1;
}

.lrnprog .cta-h {
    font-size: 44px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.025em;
    color: #ffffff;
    margin: 0 0 16px;
}

.lrnprog .cta-h em {
    font-style: normal;
    color: #41E5F0;
}

.lrnprog .cta-p {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.6;
    margin: 0;
    max-width: 480px;
}

.lrnprog .cta-actions {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex-shrink: 0;
    align-items: flex-start;
}

.lrnprog .btn-primary {
    display: inline-block;
    padding: 16px 32px;
    background: #840ABC;
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 5px 18px 1px rgba(132, 10, 188, 0.09);
    transition: background 0.5s ease, box-shadow 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.lrnprog .btn-primary:hover {
    background: #6a0899;
    box-shadow: 0 10px 48px 1px rgba(132, 10, 188, 0.11);
    color: #ffffff;
    text-decoration: none;
}

.lrnprog .btn-primary:focus {
    outline: 3px solid #41E5F0;
    outline-offset: 3px;
}

.lrnprog .btn-secondary {
    display: inline-block;
    padding: 16px 32px;
    background: transparent;
    color: #41E5F0;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: 6px;
    border: 2px solid #41E5F0;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.5s ease, color 0.5s ease;
}

.lrnprog .btn-secondary:hover {
    background: rgba(65, 229, 240, 0.12);
    color: #41E5F0;
    text-decoration: none;
}

.lrnprog .btn-secondary:focus {
    outline: 3px solid #ffffff;
    outline-offset: 3px;
}

.lrnprog .cta-deco {
    position: absolute;
    right: -60px;
    top: -60px;
    width: 320px;
    height: 320px;
    border: 2px solid rgba(65, 229, 240, 0.06);
    border-radius: 50%;
    pointer-events: none;
}

.lrnprog .cta-deco2 {
    position: absolute;
    right: -30px;
    top: -30px;
    width: 240px;
    height: 240px;
    border: 4px solid rgba(65, 229, 240, 0.09);
    border-radius: 50%;
    pointer-events: none;
}

.lrnprog .modcard-reveal-border {
    position: absolute;
    inset: 0;
    border-radius: 10px;
    border: 2px solid transparent;
    transition: border-color 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    pointer-events: none;
}

.lrnprog .modcard:hover .modcard-reveal-border {
    border-color: rgba(132, 10, 188, 0.2);
}

@keyframes rowwave {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.lrnprog .modcard {
    animation: rowwave 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.lrnprog .modcard:nth-child(1) {
    animation-delay: 0.1s;
}

.lrnprog .modcard:nth-child(2) {
    animation-delay: 0.25s;
}

.lrnprog .modcard:nth-child(3) {
    animation-delay: 0.4s;
}

.lrnprog .modcard:nth-child(4) {
    animation-delay: 0.55s;
}

.lrnprog .modcard:nth-child(5) {
    animation-delay: 0.7s;
}

.lrnprog .modcard:nth-child(6) {
    animation-delay: 0.85s;
}

.lrnprog .datatbl tbody tr {
    animation: rowwave 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.lrnprog .datatbl tbody tr:nth-child(1) {
    animation-delay: 0.1s;
}

.lrnprog .datatbl tbody tr:nth-child(2) {
    animation-delay: 0.2s;
}

.lrnprog .datatbl tbody tr:nth-child(3) {
    animation-delay: 0.3s;
}

.lrnprog .datatbl tbody tr:nth-child(4) {
    animation-delay: 0.4s;
}

.lrnprog .datatbl tbody tr:nth-child(5) {
    animation-delay: 0.5s;
}

.lrnprog .titleblock-row {
    animation: rowwave 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    animation-delay: 0.05s;
}

@media (max-width: 1100px) {
    .lrnprog .modules-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 900px) {
    .lrnprog .titleblock-row {
        flex-direction: column;
        min-height: auto;
    }

    .lrnprog .titleblock-imgstrip {
        width: 100%;
        height: 260px;
        border-radius: 10px 10px 0 0;
    }

    .lrnprog .titleblock-text {
        border-radius: 0 0 10px 10px;
        padding: 32px;
    }

    .lrnprog .titleblock-text .tb-h1 {
        font-size: 44px;
    }

    .lrnprog .outcomes-row {
        flex-direction: column;
        gap: 32px;
    }

    .lrnprog .outcomes-aside {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 16px;
    }

    .lrnprog .cta-inner {
        flex-direction: column;
        gap: 32px;
    }

    .lrnprog .cta-h {
        font-size: 32px;
    }

    .lrnprog .testimonials-row {
        flex-direction: column;
    }
}

@media (max-width: 700px) {
    .lrnprog .pg-inner {
        padding: 0 16px;
    }

    .lrnprog .modules-grid {
        grid-template-columns: 1fr;
    }

    .lrnprog .titleblock-text .tb-h1 {
        font-size: 32px;
    }

    .lrnprog .sec-heading {
        font-size: 32px;
    }

    .lrnprog .tb-meta {
        gap: 16px;
    }

    .lrnprog .datatbl thead th,
    .lrnprog .datatbl tbody td {
        padding: 12px 8px;
        font-size: 16px;
    }
}

.successPage {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 16px;
    background: #ffffff;
}

.successPage .successWrap {
    max-width: 560px;
    width: 100%;
    text-align: center;
}

.successPage .successIconRing {
    width: 80px;
    height: 80px;
    border-radius: 32px;
    background: linear-gradient(135deg, rgba(132, 10, 188, 0.08) 0%, transparent 100%);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin: 0 auto 32px;
    box-shadow: 0 5px 18px 1px rgba(132, 10, 188, 0.09);
}

.successPage .successIconRing svg {
    display: block;
}

.successPage .successHeading {
    font-size: 44px;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: #1b0033;
    margin: 0 0 16px;
}

.successPage .successSub {
    font-size: 16px;
    line-height: 1.6;
    color: #3d3d3d;
    margin: 0 0 32px;
}

.successPage .successDivider {
    width: 48px;
    height: 3px;
    border-radius: 6px;
    background: linear-gradient(90deg, #840ABC 0%, #F12784 100%);
    margin: 0 auto 32px;
}

.successPage .successCard {
    border-radius: 10px;
    padding: 32px;
    background: #f7f0fc;
    box-shadow: inset 0 2px 4px 1px rgba(132, 10, 188, 0.05);
    margin-bottom: 32px;
    text-align: left;
}

.successPage .successCard .cardLabel {
    font-size: 16px;
    line-height: 1.4;
    color: #840ABC;
    font-weight: 600;
    margin: 0 0 8px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.successPage .successCard .cardText {
    font-size: 16px;
    line-height: 1.6;
    color: #2a2a2a;
    margin: 0;
}

.successPage .successActions {
    display: flex;
    flex-direction: row;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.successPage .btnPrimary {
    display: inline-block;
    padding: 16px 32px;
    border-radius: 10px;
    background: #840ABC;
    color: #ffffff;
    font-size: 16px;
    line-height: 1.15;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    border: none;
    cursor: pointer;
    box-shadow: 0 5px 18px 1px rgba(132, 10, 188, 0.09);
    transition: background 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.5s ease;
    outline-offset: 4px;
}

.successPage .btnPrimary:hover {
    background: #6a0899;
    box-shadow: 0 10px 48px 1px rgba(132, 10, 188, 0.11);
}

.successPage .btnPrimary:focus-visible {
    outline: 2px solid #840ABC;
}

.successPage .btnSecondary {
    display: inline-block;
    padding: 16px 32px;
    border-radius: 10px;
    background: transparent;
    color: #840ABC;
    font-size: 16px;
    line-height: 1.15;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    border: 2px solid #840ABC;
    cursor: pointer;
    transition: background 0.7s ease, color 0.7s ease;
    outline-offset: 4px;
}

.successPage .btnSecondary:hover {
    background: rgba(132, 10, 188, 0.06);
    color: #6a0899;
}

.successPage .btnSecondary:focus-visible {
    outline: 2px solid #840ABC;
}

.successPage .successNote {
    margin-top: 32px;
    font-size: 16px;
    line-height: 1.6;
    color: #555555;
}

.successPage .successNote a {
    color: #840ABC;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.5s ease;
}

.successPage .successNote a:hover {
    color: #F12784;
}

@media (max-width: 600px) {
    .successPage .successHeading {
        font-size: 32px;
    }

    .successPage .successActions {
        flex-direction: column;
        align-items: stretch;
    }

    .successPage .btnPrimary,
    .successPage .btnSecondary {
        text-align: center;
    }
}