:root {

                --bg: #fff;

                --alt: #f1f7fc;

                --ink: #0f2740;

                --mute: #5b6f84;

                --pri: #1672c9;

                --pri2: #0f5ba3;

                --acc: #19b5a5;

                --line: #dbe6f0;

                --card: #fff;

                color-scheme: light;

                box-sizing: border-box;

                padding-top: env(safe-area-inset-top, 0px);

                padding-bottom: env(safe-area-inset-bottom, 0px);

            }

            @media (prefers-color-scheme: dark) {

                :root:not([data-theme="light"]) {

                    --bg: #0c1a2a;

                    --alt: #102338;

                    --ink: #eaf2fa;

                    --mute: #9bb2c8;

                    --line: #223a52;

                    --card: #112940;

                    --pri: #4a9ae8;

                    --pri2: #2f86dc;

                    color-scheme: dark;

                }

            }

            :root[data-theme="dark"] {

                --bg: #0c1a2a;

                --alt: #102338;

                --ink: #eaf2fa;

                --mute: #9bb2c8;

                --line: #223a52;

                --card: #112940;

                --pri: #4a9ae8;

                --pri2: #2f86dc;

                color-scheme: dark;

            }

            html {

                scroll-behavior: smooth;

                scroll-padding-top: 90px;

            }

            \* {

                box-sizing: border-box;

            }

            body {

                margin: 0;

                background: var(--bg);

                color: var(--ink);

                font:

                    400 16px/1.65 "Manrope",

                    Helvetica,

                    Arial,

                    sans-serif;

            }

            .w {

                max-width: 1180px;

                margin: 0 auto;

                padding: 0 24px;

            }

            a {

                color: inherit;

                text-decoration: none;

            }

            h1,

            h2,

            h3 {

                margin: 0;

                line-height: 1.12;

                font-weight: 800;

            }

            h2 {

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

                margin-bottom: 14px;

            }

            .lead {

                color: var(--mute);

                max-width: 620px;

                margin: 0 0 40px;

            }

            .eyebrow {

                display: inline-block;

                color: var(--pri);

                font-weight: 800;

                font-size: 13px;

                letter-spacing: 0.12em;

                text-transform: uppercase;

                margin-bottom: 10px;

            }

            .btn {

                display: inline-block;

                background: var(--pri);

                color: #fff;

                padding: 14px 28px;

                border-radius: 999px;
                margin: 10px 0px;

                font-weight: 700;

                border: 0;

                cursor: pointer;

                font-size: 16px;

                font-family: inherit;

                transition: 0.2s;

            }

            .btn:hover {

                background: var(--pri2);

                transform: translateY(-2px);

            }

            .btn.o {

                background: transparent;

                color: var(--pri);

                border: 2px solid var(--pri);

            }

            .btn.o:hover {

                background: var(--pri);

                color: #fff;

            }

            .top {

                background: var(--pri2);

                color: #fff;

                font-size: 13px;

            }

            .top .w {

                display: flex;

                justify-content: space-between;

                padding: 9px 24px;

                gap: 16px;

                flex-wrap: wrap;

            }

            header {

                position: sticky;

                top: env(safe-area-inset-top, 0px);

                z-index: 40;

                background: var(--bg);

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

            }

            header .w {

                display: flex;

                align-items: center;

                justify-content: space-between;

                height: 76px;

            }

            .logo {

                display: flex;

                align-items: center;

                gap: 10px;

                font-weight: 800;

                font-size: 21px;

            }

            .logo svg {

                width: 36px;

                height: 36px;

            }

            nav {

                display: flex;

                gap: 28px;

                font-weight: 600;

                font-size: 15px;

            }

            nav a:hover {

                color: var(--pri);

            }

            .hero {

                background: linear-gradient(120deg, var(--alt) 55%, transparent 55%);

                padding: 60px 0 70px;

            }

            .hero .w {

                display: grid;

                grid-template-columns: 1.05fr 1fr;

                gap: 50px;

                align-items: center;

            }

            .hero h1 {

                font-size: clamp(38px, 5.2vw, 62px);

                margin-bottom: 18px;

            }

            .hero h1 b {

                color: var(--pri);

            }

            .ticks {

                list-style: none;

                padding: 0;

                margin: 0 0 30px;

                display: grid;

                gap: 10px;

            }

            .ticks li {

                padding-left: 30px;


                position: relative;

                font-weight: 600;

            }

            .ticks li:before {

                content: "";

                position: absolute;

                left: 0;

                top: 5px;

                width: 18px;

                height: 18px;

                border-radius: 50%;

                background: var(--acc);

            }

            .ticks li:after {

                content: "";

                position: absolute;

                left: 6px;

                top: 8px;

                width: 5px;

                height: 9px;

                border: solid #fff;

                border-width: 0 2px 2px 0;

                transform: rotate(40deg);

            }

            .himg {

                position: relative;

            }

            .himg .img {

                height: 500px;

                border-radius: 200px 200px 24px 24px;

            }

            .badge {

                position: absolute;

                background: var(--card);

                border-radius: 16px;

                padding: 14px 18px;

                box-shadow: 0 14px 40px rgba(15, 39, 64, 0.18);

                font-size: 14px;

                font-weight: 600;

            }

            .badge b {

                display: block;

                font-size: 22px;

                color: var(--pri);

            }

            .img {

                background: var(--alt);

                overflow: hidden;

                position: relative;

            }

            .img img, img.img {
                width: 100%;
                height: 100%;
                display: block;
                object-fit: cover;
                object-position: center;
            }

            .img svg {
                width: 100%;
                height: 100%;
                display: block;
            }

            .strip {

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

            }

            .strip .w {

                display: grid;

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

                text-align: center;

                padding: 34px 24px;

            }

            .strip b {

                display: block;

                font-size: 34px;

                color: var(--pri);

                font-weight: 800;

            }

            .strip span {

                color: var(--mute);

                font-size: 14px;

            }

            section {

                padding: 90px 0;

            }

            .alt {

                background: var(--alt);

            }

            .svc {

                display: grid;

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

                gap: 26px;

            }

            .sc {

                background: var(--card);

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

                border-radius: 20px;

                overflow: hidden;

                transition: 0.25s;

                cursor: pointer;

            }

            .sc:hover {

                transform: translateY(-6px);

                box-shadow: 0 18px 40px rgba(15, 39, 64, 0.12);

            }

            .sc .img {

                height: 200px;

            }

            .sc div.b {

                padding: 22px;

            }

            .sc h3 {

                font-size: 21px;

                margin-bottom: 6px;

            }

            .sc p {

                margin: 0 0 14px;

                color: var(--mute);

                font-size: 15px;

            }

            .sc em {

                font-style: normal;

                font-weight: 800;

                color: var(--pri);

            }

            .ba {

                display: grid;

                grid-template-columns: 1fr 1.1fr;

                gap: 56px;

                align-items: center;

            }

            .slider {

                position: relative;

                height: 420px;

                border-radius: 24px;

                overflow: hidden;

                user-select: none;

                touch-action: none;

                cursor: ew-resize;

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

            }

            .slider > div {

                position: absolute;

                inset: 0;

            }

            .slider svg {

                width: 100%;

                height: 100%;

                display: block;

            }

            #before img, #after img {
                width: 100%;
                height: 100%;
                display: block;
                object-fit: cover;
                object-position: center;
            }

            #after {
                clip-path: inset(0 0 0 50%);
            }

            .knob {

                position: absolute;

                top: 0;

                bottom: 0;

                left: 50%;

                width: 3px;

                background: #fff;

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

            }

            .knob:after {

                content: "< >";

                position: absolute;

                top: 50%;

                left: 50%;

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

                width: 46px;

                height: 46px;

                border-radius: 50%;

                background: #fff;

                color: var(--pri);

                display: grid;

                place-items: center;

                font-weight: 800;

                box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);

                font-size: 13px;

                letter-spacing: 2px;

            }

            .tag {

                position: absolute;

                top: 16px;

                background: rgba(15, 39, 64, 0.75);

                color: #fff;

                padding: 5px 14px;

                border-radius: 99px;

                font-size: 12px;

                font-weight: 700;

                letter-spacing: 0.08em;

            }

            .team {

                display: grid;

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

                gap: 22px;

            }

            .tm .img {

                height: 300px;

                border-radius: 20px;

                margin-bottom: 14px;

            }

            .tm h3 {

                font-size: 19px;

            }

            .tm span {

                color: var(--mute);

                font-size: 14px;

            }

            .gal {

                display: grid;

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

                grid-auto-rows: 190px;

                gap: 14px;

            }

            .gal .img {

                border-radius: 16px;

                transition: 0.3s;

            }

            .gal .img:hover {

                transform: scale(1.02);

            }

            .gal .img:nth-child(1) {

                grid-column: span 2;

                grid-row: span 2;

            }

            .gal .img:nth-child(4) {

                grid-column: span 2;

            }

            .steps {

                display: grid;

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

                gap: 26px;

            }

            .st {

                background: var(--card);

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

                border-radius: 20px;

                padding: 30px;

            }

            .st i {

                font-style: normal;

                display: grid;

                place-items: center;

                width: 46px;

                height: 46px;

                border-radius: 50%;

                background: var(--pri);

                color: #fff;

                font-weight: 800;

                margin-bottom: 16px;

            }

            .st p {

                color: var(--mute);

                margin: 8px 0 0;

            }

            .tst {

                display: grid;

                grid-template-columns: 1fr 1.3fr;

                gap: 50px;

                align-items: center;

            }

            .tq {

                background: var(--card);

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

                border-radius: 24px;

                padding: 38px;

                min-height: 260px;

                display: flex;

                flex-direction: column;

                justify-content: space-between;

            }

            .tq p {

                font-size: 21px;

                font-weight: 600;

                margin: 0 0 20px;

                line-height: 1.45;

            }

            .dots {

                display: flex;

                gap: 8px;

                margin-top: 20px;

            }

            .dots button {

                width: 11px;

                height: 11px;

                border-radius: 50%;

                border: 0;

                background: var(--line);

                cursor: pointer;

                padding: 0;

            }

            .dots button.on {

                background: var(--pri);

                width: 30px;

                border-radius: 6px;

            }

            .pay {

                display: grid;

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

                gap: 22px;

                margin-top: 10px;

            }

            .pc {

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

                border-radius: 20px;

                padding: 28px;

                background: var(--card);

            }

            .pc.f {

                background: var(--pri);

                color: #fff;

                border-color: var(--pri);

            }

            .pc.f p {

                color: #e0eefb;

            }

            .pc p {

                color: var(--mute);

                margin: 8px 0 0;

            }

            .pc h3 {

                font-size: 22px;

            }

            .faq {

                max-width: 800px;

                margin: 0 auto;

            }

            .q {

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

            }

            .q button {

                width: 100%;

                background: none;

                border: 0;

                text-align: left;

                font:

                    700 18px "Manrope",

                    sans-serif;

                color: var(--ink);

                padding: 22px 0;

                display: flex;

                justify-content: space-between;

                cursor: pointer;

            }

            .q button:after {

                content: "+";

                color: var(--pri);

                font-size: 26px;

                line-height: 1;

            }

            .q.o button:after {

                content: "\2212";

            }

            .q div {

                max-height: 0;

                overflow: hidden;

                transition: max-height 0.3s;

                color: var(--mute);

            }

            .q.o div {

                max-height: 160px;

                padding-bottom: 20px;

            }

            .book {

                background: var(--pri2);

                color: #fff;

            }

            .book .w {

                display: grid;

                grid-template-columns: 1fr 1fr;

                gap: 56px;

                align-items: center;

            }

            .book .lead {

                color: #cfe3f7;

            }

            .form {

                background: var(--card);

                color: var(--ink);

                border-radius: 24px;

                padding: 34px;

                display: grid;

                gap: 16px;

            }

            .form label {

                font-weight: 700;

                font-size: 13px;

                display: block;

                margin-bottom: 6px;

            }

            .form input,

            .form select {

                width: 100%;

                padding: 13px 14px;

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

                border-radius: 12px;

                background: var(--bg);

                color: var(--ink);

                font:

                    500 15px "Manrope",

                    sans-serif;

            }

            .form input:focus,

            .form select:focus {

                outline: 2px solid var(--pri);

            }

            .days {

                display: flex;

                gap: 8px;

                flex-wrap: wrap;

            }

            .days button {

                padding: 10px 14px;

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

                border-radius: 12px;

                background: var(--bg);

                color: var(--ink);

                font:

                    600 13px "Manrope",

                    sans-serif;

                cursor: pointer;

            }

            .days button.on {

                background: var(--pri);

                color: #fff;

                border-color: var(--pri);

            }

            #ok {

                font-weight: 700;

                color: var(--acc);

                min-height: 22px;

            }

            .map {

                height: 200px;

                border-radius: 16px;

                margin-top: 26px;

            }

            footer {

                background: #0b1c2e;

                color: #a9bdd1;

                padding: 50px 0 30px;

                font-size: 14px;

            }

            footer .w {

                display: grid;

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

                gap: 30px;

            }

            footer b {

                color: #fff;

                display: block;

                margin-bottom: 8px;

            }

            .sticky {

                position: fixed;

                right: 20px;

                bottom: calc(20px + env(safe-area-inset-bottom, 0px));

                z-index: 50;

                box-shadow: 0 10px 30px rgba(22, 114, 201, 0.45);

            }

            @media (max-width: 900px) {

                nav {

                    display: none;

                }

                .hero {

                    background: var(--alt);

                }

                .hero .w,

                .ba,

                .tst,

                .book .w,

                footer .w {

                    grid-template-columns: 1fr;

                }

                .himg .img {

                    height: 380px;

                }

                .strip .w {

                    grid-template-columns: 1fr 1fr;

                    gap: 20px;

                }

                .svc,

                .steps,

                .pay {

                    grid-template-columns: 1fr;

                }

                .team {

                    grid-template-columns: 1fr 1fr;

                }

                .gal {

                    grid-template-columns: 1fr 1fr;

                    grid-auto-rows: 150px;

                }

                .gal .img:nth-child(1) {

                    grid-row: span 2;

                }

                .gal .img:nth-child(4) {

                    grid-column: span 1;

                }

                .top span:last-child {

                    display: none;

                }

            }