:root {
            --navy: #0B2A6B;
            --blue: #1F5FE0;
            --orange: #FF6A13;
            --amber: #FFB43B;
            --teal: #12A58A;
            --red: #F0502A;
            --bg: #FBF8F4;
            --card: #fff;
            --ink: #14213D;
            --mut: #55607A;
            --line: #E6E9F0;
            box-sizing: border-box;
            padding-top: env(safe-area-inset-top, 0px);
            padding-bottom: env(safe-area-inset-bottom, 0px)
        }

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

        @media(prefers-color-scheme:dark) {
            :root:not([data-theme="light"]) {
                --bg: #0A1226;
                --card: #121C38;
                --ink: #F2F5FF;
                --mut: #A9B4D0;
                --line: #243055;
                --navy: #9DBBFF
            }
        }

        :root[data-theme="dark"] {
            --bg: #0A1226;
            --card: #121C38;
            --ink: #F2F5FF;
            --mut: #A9B4D0;
            --line: #243055;
            --navy: #9DBBFF
        }

        html {
            scroll-padding-top: 90px;
            scroll-behavior: smooth
        }

        * {
            box-sizing: border-box
        }

        body {
            margin: 0;
            background: var(--bg);
            color: var(--ink);
            font: 400 16px/1.6 'Plus Jakarta Sans', system-ui, sans-serif
        }

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

        :focus-visible {
            outline: 3px solid var(--orange);
            outline-offset: 3px
        }

        .w {
            max-width: 1180px;
            margin: 0 auto;
            padding: 0 24px
        }

        .bar {
            height: 6px;
            background: linear-gradient(90deg, var(--blue), #8DB6F2, #FFD9A0, var(--orange))
        }

        header {
            --ink: #14213D;
            --line: #E6E9F0;
            --navy: #0B2A6B;
            position: sticky;
            top: env(safe-area-inset-top, 0px);
            z-index: 9;
            background: rgba(255, 255, 255, .96);
            color: #14213D;
            backdrop-filter: blur(10px);
            border-bottom: 1px solid var(--line)
        }

        .nav {
            display: flex;
            align-items: center;
            gap: 32px;
            height: 84px
        }

        header .brand {
            color: #0B2A6B
        }

        .brand {
            display: flex;
            align-items: center;
            gap: 12px;
            font-weight: 800;
            font-size: 22px;
            line-height: 1;
            color: #0B2A6B;
            letter-spacing: .01em
        }

        .brand img {
            height: 50px;
            width: auto
        }

        nav {
            display: flex;
            gap: 30px;
            margin-left: 12px;
            flex: 1
        }

        nav a {
            font-weight: 500;
            font-size: 15px;
            padding: 30px 0 27px;
            border-bottom: 3px solid transparent
        }

        nav a.on,
        nav a:hover {
            color: var(--blue);
            border-color: var(--blue)
        }

        .social-links {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap
        }

        .social-link {
            width: 40px !important;
            height: 40px !important;
            min-width: 40px;
            max-width: 40px;
            min-height: 40px;
            max-height: 40px;
            display: inline-grid;
            place-items: center;
            overflow: hidden;
            border: 1px solid rgba(31, 95, 224, .16);
            border-radius: 50%;
            background: rgba(255, 255, 255, .78);
            color: #0B2A6B;
            flex: none;
            line-height: 1;
            transition: transform .2s, border-color .2s, background .2s, color .2s
        }

        .social-link:hover {
            transform: translateY(-2px);
            border-color: var(--orange);
            background: #fff;
            color: var(--blue)
        }

        .social-link img {
            width: 22px;
            height: 22px;
            object-fit: contain
        }

        .social-link svg,
        .social-link .social-icon {
            display: block !important;
            width: 22px !important;
            height: 22px !important;
            min-width: 22px;
            max-width: 22px;
            min-height: 22px;
            max-height: 22px;
            fill: currentColor;
            flex: none
        }

        .btn {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 15px 30px;
            border-radius: 99px;
            font-weight: 600;
            font-size: 16px;
            border: 1.5px solid transparent;
            cursor: pointer;
            transition: transform .15s, box-shadow .15s
        }

        .btn.o {
            background: linear-gradient(135deg, #FF8A1F, var(--orange) 60%, #F0502A);
            color: #fff;
            box-shadow: 0 10px 24px -8px rgba(255, 106, 19, .6)
        }

        .btn.o:hover {
            transform: translateY(-2px)
        }

        .btn.l {
            border-color: var(--blue);
            color: var(--blue);
            background: rgba(255, 255, 255, .55)
        }

        .hero .btn.l {
            border-color: rgba(255, 255, 255, .72);
            color: #fff;
            background: rgba(255, 255, 255, .16);
            backdrop-filter: blur(8px)
        }

        .btn.s {
            padding: 11px 24px;
            font-size: 15px
        }

        .hero {
            position: relative;
            overflow: hidden;
            background: #0B2A6B;
            min-height: 600px;
            color: #fff
        }

        .hero::before {
            content: "";
            position: absolute;
            inset: 0;
            z-index: 1;
            background: linear-gradient(90deg, rgba(5, 18, 48, .84), rgba(5, 18, 48, .62) 44%, rgba(5, 18, 48, .22) 78%), linear-gradient(0deg, rgba(11, 42, 107, .46), rgba(11, 42, 107, .06));
            pointer-events: none
        }

        .hero-bg {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 0;
            transform: scale(1.04);
            transition: opacity .7s ease, transform 6s ease
        }

        .hero-bg.on {
            opacity: 1;
            transform: scale(1)
        }

        .hero-bg.hayat {
            object-position: center 52%
        }

        .hero-bg.trafik {
            object-position: center 50%
        }

        .hero-bg.dask {
            object-position: center 54%
        }

        .hero .big {
            position: absolute;
            right: 6%;
            top: 40px;
            height: 560px;
            opacity: .33;
            mix-blend-mode: multiply
        }

        .sky {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            height: 260px
        }

        .hero .w {
            position: relative;
            z-index: 2;
            padding-top: 92px;
            padding-bottom: 150px
        }

        .kick {
            display: flex;
            align-items: center;
            gap: 14px;
            font-weight: 700;
            font-size: 13px;
            letter-spacing: .28em;
            color: #DCE8FF
        }

        .kick::before {
            content: "";
            width: 40px;
            height: 4px;
            border-radius: 4px;
            background: var(--orange)
        }

        h1 {
            font-size: clamp(42px, 6.4vw, 76px);
            line-height: 1.03;
            letter-spacing: -.025em;
            margin: 22px 0;
            font-weight: 800;
            color: #0B2A6B
        }

        h1 .b {
            color: var(--blue)
        }

        h1 .or {
            color: var(--orange)
        }

        .hero h1 {
            color: #fff;
            text-shadow: 0 2px 18px rgba(0, 0, 0, .28)
        }

        .hero h1 .b {
            color: #9FC2FF
        }

        .hero h1 .or {
            color: #FFB43B
        }

        .hero p {
            max-width: 520px;
            font-size: 20px;
            color: #EEF4FF;
            margin: 0 0 34px;
            text-shadow: 0 1px 12px rgba(0, 0, 0, .24)
        }

        .slides {
            display: grid
        }

        .slide {
            grid-area: 1/1;
            opacity: 0;
            visibility: hidden;
            transform: translateX(28px);
            transition: opacity .5s, transform .5s, visibility 0s .5s
        }

        .slide.on {
            opacity: 1;
            visibility: visible;
            transform: none;
            transition: opacity .5s, transform .5s
        }

        .arr {
            position: absolute;
            top: 46%;
            z-index: 3;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            border: 0;
            background: #fff;
            color: #0B2A6B;
            font-size: 20px;
            cursor: pointer;
            box-shadow: 0 8px 20px -6px rgba(11, 42, 107, .4)
        }

        .arr:hover {
            background: var(--orange);
            color: #fff
        }

        .arr.pv {
            left: 24px
        }

        .arr.nx {
            right: 24px
        }

        .cta {
            display: flex;
            gap: 16px;
            flex-wrap: wrap
        }

        .dots {
            display: flex;
            gap: 10px;
            margin-top: 44px
        }

        .dots button {
            width: 28px;
            height: 8px;
            border-radius: 8px;
            border: 0;
            padding: 0;
            cursor: pointer;
            background: rgba(255, 255, 255, .42);
            transition: width .3s, background .3s
        }

        .dots button.on {
            width: 44px;
            background: var(--orange)
        }

        .strip {
            position: relative;
            margin-top: -72px;
            z-index: 2
        }

        .strip .in {
            background: var(--card);
            border-radius: 28px;
            box-shadow: 0 24px 60px -24px rgba(11, 42, 107, .35);
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            padding: 30px 12px
        }

        .f {
            display: flex;
            gap: 16px;
            align-items: center;
            padding: 6px 22px;
            border-right: 1px solid var(--line)
        }

        .f:last-child {
            border: 0
        }

        .ic {
            flex: none;
            width: 62px;
            height: 62px;
            border-radius: 50%;
            display: grid;
            place-items: center;
            color: #fff;
            box-shadow: 0 10px 20px -8px currentColor
        }

        .ic svg {
            width: 28px;
            height: 28px;
            stroke: #fff;
            fill: none;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round
        }

        .f b {
            display: block;
            font-size: 16px;
            color: var(--navy)
        }

        .f span {
            font-size: 14px;
            color: var(--mut);
            line-height: 1.4;
            display: block
        }

        section {
            position: relative;
            padding: 96px 0
        }

        section::before {
            content: "";
            position: absolute;
            top: 0;
            left: 50%;
            width: min(1132px, calc(100% - 48px));
            height: 1px;
            transform: translateX(-50%);
            background: linear-gradient(90deg, transparent, rgba(31, 95, 224, .18), rgba(255, 106, 19, .28), transparent)
        }

        .band::before {
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .42), rgba(255, 180, 59, .5), transparent)
        }

        h2 {
            font-size: clamp(30px, 4vw, 44px);
            line-height: 1.1;
            letter-spacing: -.02em;
            margin: 0 0 14px;
            font-weight: 800;
            color: var(--navy)
        }

        .lead {
            color: var(--mut);
            max-width: 560px;
            margin: 0 0 44px;
            font-size: 18px
        }

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

        .p {
            background: var(--card);
            border-radius: 26px;
            padding: 30px;
            border: 1px solid var(--line);
            position: relative;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            gap: 10px
        }

        .p::after {
            content: "";
            position: absolute;
            right: -50px;
            top: -50px;
            width: 150px;
            height: 150px;
            border-radius: 50%;
            background: var(--c);
            opacity: .14
        }

        .p .ic {
            width: 56px;
            height: 56px;
            background: var(--c);
            color: var(--c)
        }

        .p h3 {
            margin: 10px 0 0;
            font-size: 21px;
            color: var(--navy)
        }

        .p p {
            margin: 0;
            color: var(--mut);
            font-size: 15px
        }

        .p a {
            margin-top: auto;
            padding-top: 10px;
            font-weight: 700;
            color: var(--t);
            text-decoration: underline;
            text-underline-offset: 4px;
            text-decoration-thickness: 1.5px
        }

        .p:nth-child(1) {
            --t: #B83A05
        }

        .p:nth-child(2) {
            --t: #1F5FE0
        }

        .p:nth-child(3) {
            --t: #0B7A66
        }

        .p:nth-child(4) {
            --t: #C73610
        }

        .p:nth-child(5) {
            --t: #0B2A6B
        }

        .p:nth-child(6) {
            --t: #8A4F00
        }

        .post small {
            color: #B83A05
        }

        @media(prefers-color-scheme:dark) {
            :root:not([data-theme="light"]) .p:nth-child(1) {
                --t: #FFA45C
            }

            :root:not([data-theme="light"]) .p:nth-child(2) {
                --t: #7FA8FF
            }

            :root:not([data-theme="light"]) .p:nth-child(3) {
                --t: #3FD1B3
            }

            :root:not([data-theme="light"]) .p:nth-child(4) {
                --t: #FF8A6B
            }

            :root:not([data-theme="light"]) .p:nth-child(5) {
                --t: #9DBBFF
            }

            :root:not([data-theme="light"]) .p:nth-child(6) {
                --t: #FFC24A
            }

            :root:not([data-theme="light"]) .post small {
                color: #FFA45C
            }
        }

        :root[data-theme="dark"] .p:nth-child(1) {
            --t: #FFA45C
        }

        :root[data-theme="dark"] .p:nth-child(2) {
            --t: #7FA8FF
        }

        :root[data-theme="dark"] .p:nth-child(3) {
            --t: #3FD1B3
        }

        :root[data-theme="dark"] .p:nth-child(4) {
            --t: #FF8A6B
        }

        :root[data-theme="dark"] .p:nth-child(5) {
            --t: #9DBBFF
        }

        :root[data-theme="dark"] .p:nth-child(6) {
            --t: #FFC24A
        }

        :root[data-theme="dark"] .post small {
            color: #FFA45C
        }

        .band {
            background: linear-gradient(120deg, #0B2A6B, #1F5FE0 65%, #3E86F0);
            color: #fff;
            position: relative;
            overflow: hidden
        }

        .band::after {
            content: "";
            position: absolute;
            right: -120px;
            bottom: -200px;
            width: 520px;
            height: 520px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(255, 150, 40, .9), rgba(255, 106, 19, 0) 70%)
        }

        .band h2 {
            color: #fff
        }

        .band .lead {
            color: #D5E3FF
        }

        .steps {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 28px;
            position: relative;
            z-index: 1;
            counter-reset: s
        }

        .st {
            border-top: 4px solid var(--amber);
            padding-top: 20px
        }

        .st:nth-child(2) {
            border-color: #fff
        }

        .st:nth-child(3) {
            border-color: var(--orange)
        }

        .st b {
            font-size: 20px;
            display: block;
            margin-bottom: 6px
        }

        .st span {
            color: #D5E3FF
        }

        .about {
            display: grid;
            grid-template-columns: 1.1fr 1fr;
            gap: 56px;
            align-items: center
        }

        .about .lead {
            margin-bottom: 0
        }

        .nums {
            display: grid;
            gap: 16px
        }

        .num {
            background: var(--card);
            border: 1px solid var(--line);
            border-left: 6px solid var(--c);
            border-radius: 20px;
            padding: 18px 24px;
            display: flex;
            align-items: baseline;
            gap: 18px
        }

        .num b {
            font-size: 40px;
            line-height: 1;
            font-weight: 800;
            color: var(--t);
            min-width: 96px
        }

        .num span {
            color: var(--mut)
        }

        .num:nth-child(1) {
            --c: #1F5FE0;
            --t: #1F5FE0
        }

        .num:nth-child(2) {
            --c: #FF6A13;
            --t: #B83A05
        }

        .num:nth-child(3) {
            --c: #12A58A;
            --t: #0B7A66
        }

        @media(prefers-color-scheme:dark) {
            :root:not([data-theme="light"]) .num:nth-child(1) b {
                color: #7FA8FF
            }

            :root:not([data-theme="light"]) .num:nth-child(2) b {
                color: #FFA45C
            }

            :root:not([data-theme="light"]) .num:nth-child(3) b {
                color: #3FD1B3
            }
        }

        :root[data-theme="dark"] .num:nth-child(1) b {
            color: #7FA8FF
        }

        :root[data-theme="dark"] .num:nth-child(2) b {
            color: #FFA45C
        }

        :root[data-theme="dark"] .num:nth-child(3) b {
            color: #3FD1B3
        }

        @media(max-width:960px) {
            .about {
                grid-template-columns: 1fr;
                gap: 32px
            }
        }

        .cos {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            gap: 16px
        }

        .co {
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 20px;
            height: 104px;
            display: grid;
            place-items: center;
            padding: 16px;
            text-align: center;
            transition: border-color .2s, transform .2s
        }

        .co:hover {
            border-color: var(--orange);
            transform: translateY(-3px)
        }

        .co img {
            max-width: 100%;
            max-height: 68px;
            object-fit: contain
        }

        .co span {
            font-weight: 800;
            font-size: 17px;
            line-height: 1.15;
            color: var(--navy);
            letter-spacing: -.01em
        }

        @media(max-width:960px) {
            .cos {
                grid-template-columns: repeat(3, 1fr)
            }
        }

        @media(max-width:560px) {
            .cos {
                grid-template-columns: repeat(2, 1fr)
            }
        }

        .posts {
            grid-template-columns: repeat(3, 1fr)
        }

        .post {
            background: var(--card);
            border-radius: 26px;
            overflow: hidden;
            border: 1px solid var(--line);
            transition: transform .2s, border-color .2s, box-shadow .2s
        }

        .post:hover {
            border-color: var(--orange);
            box-shadow: 0 18px 36px -28px rgba(11, 42, 107, .55);
            transform: translateY(-3px)
        }

        .post .t {
            height: 170px;
            overflow: hidden;
            background: #0B2A6B
        }

        .post .t img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover
        }

        .post:nth-child(1) .t img {
            object-position: center 58%
        }

        .post:nth-child(2) .t img {
            object-position: center 52%
        }

        .post:nth-child(3) .t img {
            object-position: center 54%
        }

        .post div:last-child {
            padding: 22px 24px 26px
        }

        .post small {
            font-weight: 700
        }

        .post h3 {
            margin: 6px 0 0;
            font-size: 18px;
            line-height: 1.35;
            color: var(--navy)
        }

        .read-icon {
            display: inline-grid;
            place-items: center;
            margin-top: 14px;
            width: 42px;
            height: 42px;
            border-radius: 50%;
            background: rgba(31, 95, 224, .1);
            color: var(--blue);
            transition: background .2s, color .2s, transform .2s
        }

        .read-icon svg {
            width: 22px;
            height: 22px;
            fill: none;
            stroke: currentColor;
            stroke-width: 2.4;
            stroke-linecap: round;
            stroke-linejoin: round
        }

        .post:hover .read-icon {
            background: var(--blue);
            color: #fff;
            transform: translateX(3px)
        }

        .contact {
            display: grid;
            grid-template-columns: 1.1fr 1fr;
            gap: 32px 48px;
            align-items: center;
            background: linear-gradient(135deg, #EAF3FF 0%, #D8E8FF 52%, #C7DBFF 100%);
            border-radius: 36px;
            padding: 56px;
            color: #0B2A6B
        }

        .contact h2 {
            color: #0B2A6B
        }

        .contact p {
            margin: 0 0 24px;
            color: #3B4A70;
            font-size: 18px
        }

        .contact ul {
            list-style: none;
            margin: 0;
            padding: 0;
            display: grid;
            gap: 14px
        }

        .contact li {
            background: rgba(255, 255, 255, .75);
            border-radius: 18px;
            padding: 16px 20px;
            font-weight: 600;
            display: flex;
            justify-content: space-between;
            gap: 12px
        }

        .contact li span {
            font-weight: 400;
            color: #55607A
        }

        .contact-social {
            margin-top: 28px
        }

        .contact-social>span,
        .footer-social>span {
            display: block;
            margin-bottom: 12px;
            color: #3B4A70;
            font-weight: 800;
            font-size: 14px
        }

        .contact-social .social-link {
            background: rgba(255, 255, 255, .82);
            border-color: rgba(11, 42, 107, .12)
        }

        .map-card {
            grid-column: 1/-1;
            position: relative;
            min-height: 380px;
            border-radius: 28px;
            overflow: hidden;
            background: #fff;
            border: 1px solid rgba(255, 255, 255, .72);
            box-shadow: 0 22px 45px -28px rgba(11, 42, 107, .55)
        }

        .map-card::before {
            content: "";
            position: absolute;
            inset: 0;
            z-index: 1;
            pointer-events: none;
            box-shadow: inset 0 0 0 1px rgba(11, 42, 107, .08), inset 0 -70px 90px -95px rgba(11, 42, 107, .8)
        }

        .map-card iframe {
            display: block;
            width: 100%;
            height: 100%;
            min-height: 380px;
            border: 0;
            filter: saturate(1.05) contrast(1.02)
        }

        .wa {
            position: fixed;
            right: max(20px, env(safe-area-inset-right, 0px));
            bottom: max(20px, env(safe-area-inset-bottom, 0px));
            z-index: 20;
            display: flex;
            align-items: center;
            gap: 10px;
            background: #128A45;
            color: #fff;
            padding: 12px 22px 12px 14px;
            border-radius: 99px;
            font-weight: 700;
            font-size: 15px;
            box-shadow: 0 14px 30px -10px rgba(18, 138, 69, .7);
            transition: transform .2s, background .2s
        }

        .wa:hover {
            transform: translateY(-3px);
            background: #0E7439
        }

        .wa svg {
            width: 34px;
            height: 34px;
            flex: none
        }

        @media(max-width:560px) {
            .wa {
                padding: 12px
            }

            .wa span {
                position: absolute;
                width: 1px;
                height: 1px;
                overflow: hidden;
                clip: rect(0 0 0 0)
            }
        }

        footer {
            background: rgba(255, 255, 255, .96);
            color: #14213D;
            border-top: 1px solid #E6E9F0;
            padding: 56px 0 32px;
            font-size: 14px
        }

        footer .row {
            display: flex;
            justify-content: space-between;
            gap: 32px;
            flex-wrap: wrap
        }

        footer .brand {
            color: #0B2A6B
        }

        footer .brand img {
            height: 44px
        }

        footer nav {
            margin: 0;
            gap: 22px;
            flex: none
        }

        footer nav a {
            padding: 0;
            border: 0;
            font-size: 14px;
            color: #14213D
        }

        footer nav a:hover {
            color: var(--blue)
        }

        .footer-social {
            min-width: 180px
        }

        .footer-social>span {
            color: #55607A
        }

        .footer-social .social-links {
            justify-content: flex-start
        }

        .footer-social .social-link {
            width: 38px !important;
            height: 38px !important;
            min-width: 38px;
            max-width: 38px;
            min-height: 38px;
            max-height: 38px;
            background: #fff
        }

        footer small {
            display: block;
            margin-top: 32px;
            padding-top: 20px;
            border-top: 1px solid #E6E9F0;
            color: #55607A
        }

        @media(max-width:960px) {
            nav {
                display: none
            }

            .nav {
                justify-content: space-between
            }

            .strip .in {
                grid-template-columns: 1fr 1fr;
                gap: 18px
            }

            .f:nth-child(2) {
                border: 0
            }

            .grid,
            .posts,
            .steps {
                grid-template-columns: 1fr
            }

            .contact {
                grid-template-columns: 1fr;
                padding: 32px
            }

            .map-card,
            .map-card iframe {
                min-height: 320px
            }

            .hero .big {
                opacity: .18;
                right: -10%
            }
        }

        @media(max-width:560px) {
            .map-card {
                border-radius: 22px
            }

            .map-card,
            .map-card iframe {
                min-height: 280px
            }

            .arr {
                top: auto;
                bottom: 150px;
                width: 38px;
                height: 38px
            }

            .arr.pv {
                left: auto;
                right: 76px
            }

            .arr.nx {
                right: 24px
            }

            .strip .in {
                grid-template-columns: 1fr
            }

            .f {
                border: 0
            }

            .brand {
                font-size: 18px
            }

            .brand img {
                height: 40px
            }

            .btn.s {
                display: none
            }

            .hero .w {
                padding-top: 56px
            }
        }

        @media(prefers-reduced-motion:reduce) {
            * {
                transition: none !important;
                scroll-behavior: auto !important
            }
        }