:root {
                --bg: #020b14;
                --panel: #071522;
                --blue: #00a6ff;
                --text: #f5f8fb;
                --muted: #b6c2cd;
                --line: rgba(0, 166, 255, 0.35);
            }
            * {
                box-sizing: border-box;
            }
            html {
                scroll-behavior: smooth;
            }
            body {
                margin: 0;
                background: linear-gradient(180deg, #020910, #020b14);
                color: var(--text);
                font-family:
                    Inter,
                    Segoe UI,
                    Arial,
                    sans-serif;
            }
            a {
                color: inherit;
                text-decoration: none;
            }
            .nav {
                position: fixed;
                inset: 0 0 auto;
                z-index: 20;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 18px 5vw;
                background: linear-gradient(180deg, rgba(2, 11, 20, 0.95), rgba(2, 11, 20, 0.45), transparent);
                backdrop-filter: blur(8px);
            }
            .brand {
                display: flex;
                align-items: center;
                gap: 12px;
                font-weight: 800;
                letter-spacing: 0.12em;
                text-transform: uppercase;
            }
            .mark {
                width: 38px;
                height: 38px;
                border: 2px solid var(--blue);
                border-radius: 10px;
                display: grid;
                place-items: center;
                color: var(--blue);
            }
            .links {
                display: flex;
                gap: 26px;
                color: var(--muted);
                font-size: 14px;
            }
            .links a:hover {
                color: var(--blue);
            }
            .hero {
                min-height: 100vh;
                display: grid;
                grid-template-columns: 1.05fr 0.95fr;
                position: relative;
            }
            .hero:before {
                content: "";
                position: absolute;
                inset: 0;
                z-index: -1;
                background: linear-gradient(
                    90deg,
                    #020b14 0%,
                    rgba(2, 11, 20, 0.97) 44%,
                    rgba(2, 11, 20, 0.22) 76%,
                    rgba(2, 11, 20, 0.62) 100%
                );
            }
            .copy {
                padding: 150px 6vw 70px;
                display: flex;
                flex-direction: column;
                justify-content: center;
            }
            .eyebrow {
                color: var(--blue);
                text-transform: uppercase;
                letter-spacing: 0.28em;
                font-size: 13px;
                font-weight: 800;
                margin-bottom: 20px;
            }
            h1 {
                font-size: clamp(60px, 8vw, 112px);
                line-height: 0.88;
                letter-spacing: -0.055em;
                margin: 0 0 28px;
                text-transform: uppercase;
            }
            h1 span {
                display: block;
                color: var(--blue);
            }
            .tag {
                font-size: clamp(18px, 2vw, 26px);
                letter-spacing: 0.18em;
                text-transform: uppercase;
                margin-bottom: 30px;
            }
            .tag strong {
                color: var(--blue);
            }
            .lead {
                max-width: 760px;
                color: var(--muted);
                font-size: clamp(17px, 1.45vw, 21px);
                line-height: 1.72;
            }
            .lead strong {
                color: #fff;
            }
            .actions {
                display: flex;
                gap: 14px;
                flex-wrap: wrap;
                margin-top: 34px;
            }
            .btn {
                padding: 14px 22px;
                border-radius: 999px;
                border: 1px solid var(--line);
                font-weight: 800;
            }
            .primary {
                background: var(--blue);
                color: #00101a;
                border-color: var(--blue);
            }
           .visual {

                min-height: 100vh;
                position: relative;
                overflow: hidden;
                clip-path: polygon(12% 0,100% 0,100% 100%,0 100%);
            
            }
        .visual::before{
    
                content:"";
                position:absolute;
                inset:0;
                width:120%;
                background-image:
                linear-gradient(
                        180deg,
                        rgba(2,11,20,.03),
                        rgba(2,11,20,.72)
                    ),
                    url("images/cover.png");
            
                background-size:cover;
                background-repeat:no-repeat;
                background-position:center center;
                animation:coverMove 45s linear infinite alternate;
                will-change:transform;

}

            .metrics {
                width: min(1180px, calc(100% - 40px));
                margin: -65px auto 0;
                display: grid;
                grid-template-columns: repeat(5, 1fr);
                background: rgba(4, 16, 27, 0.96);
                border: 1px solid var(--line);
                border-radius: 22px;
                overflow: hidden;
                position: relative;
                z-index: 3;
                box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
            }
            .metric {
                text-align: center;
                padding: 28px 20px;
                border-right: 1px solid rgba(255, 255, 255, 0.08);
            }
            .metric:last-child {
                border-right: 0;
            }
            .metric strong {
                display: block;
                color: var(--blue);
                font-size: clamp(30px, 4vw, 50px);
                line-height: 1;
                margin-bottom: 10px;
            }
            .metric span {
                color: var(--muted);
                font-size: 12px;
                text-transform: uppercase;
                letter-spacing: 0.12em;
            }
            section {
                padding: 105px 6vw;
            }
            .wrap {
                width: min(1220px, 100%);
                margin: auto;
            }
            .title {
                font-size: clamp(38px, 5.2vw, 72px);
                letter-spacing: -0.04em;
                margin: 0 0 18px;
            }
            .title span {
                color: var(--blue);
            }
            .intro {
                max-width: 820px;
                color: var(--muted);
                font-size: 18px;
                line-height: 1.7;
                margin-bottom: 52px;
            }
            .purpose {
                display: grid;
                grid-template-columns: 0.85fr 1.15fr;
                gap: 40px;
                align-items: center;
                padding: 38px;
                border: 1px solid var(--line);
                border-radius: 22px;
                background: radial-gradient(circle at 100% 0, rgba(0, 166, 255, 0.17), transparent 28%),
                    rgba(6, 20, 33, 0.88);
            }
            .purpose strong {
                color: var(--blue);
                font-size: clamp(30px, 4vw, 56px);
                line-height: 1.02;
                text-transform: uppercase;
            }
            .purpose p {
                color: #d7e0e8;
                font-size: 21px;
                line-height: 1.65;
                margin: 0;
            }
            .cards {
                display: grid;
                grid-template-columns: repeat(4, 1fr);
                gap: 18px;
            }
            .card {
                background: linear-gradient(180deg, rgba(10, 31, 49, 0.82), rgba(5, 17, 28, 0.96));
                border: 1px solid rgba(0, 166, 255, 0.18);
                border-radius: 18px;
                padding: 26px;
                min-height: 205px;
            }
            .card:hover {
                transform: translateY(-5px);
                border-color: rgba(0, 166, 255, 0.6);
            }
            .icon {
                font-size: 31px;
                color: var(--blue);
                margin-bottom: 20px;
            }
            .card h3 {
                margin: 0 0 10px;
            }
            .card p {
                margin: 0;
                color: var(--muted);
                line-height: 1.6;
            }
            .timeline {
                display: grid;
                grid-template-columns: repeat(5, 1fr);
                gap: 16px;
            }
            .step {
                padding: 24px;
                border-top: 2px solid var(--blue);
                background: rgba(7, 21, 34, 0.62);
                border-radius: 0 0 16px 16px;
            }
            .year {
                color: var(--blue);
                font-weight: 900;
                margin-bottom: 8px;
            }
            .step p {
                color: var(--muted);
                line-height: 1.55;
                font-size: 15px;
            }
            footer {
                padding: 36px 6vw;
                border-top: 1px solid rgba(255, 255, 255, 0.08);
                color: var(--muted);
            }
            .foot {
                width: min(1220px, 100%);
                margin: auto;
                display: flex;
                justify-content: space-between;
                gap: 20px;
                flex-wrap: wrap;
            }
            @media (max-width: 980px) {
                .hero {
                    grid-template-columns: 1fr;
                }
                .visual {
                    position: absolute;
                    inset: 0;
                    z-index: -2;
                    clip-path: none;
                    opacity: 0.38;
                }
                .hero:before {
                    background: linear-gradient(90deg, rgba(2, 11, 20, 0.98), rgba(2, 11, 20, 0.75));
                }
                .metrics {
                    grid-template-columns: repeat(2, 1fr);
                }
                .metric:nth-child(2n) {
                    border-right: 0;
                }
                .metric:last-child {
                    grid-column: 1/-1;
                }
                .cards {
                    grid-template-columns: repeat(2, 1fr);
                }
                .timeline {
                    grid-template-columns: 1fr;
                }
                .purpose {
                    grid-template-columns: 1fr;
                }
            }
            @media (max-width: 620px) {
                .links {
                    display: none;
                }
                .copy {
                    padding-top: 125px;
                }
                .metrics,
                .cards {
                    grid-template-columns: 1fr;
                }
                .metric {
                    border-right: 0;
                    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
                }
                .metric:last-child {
                    grid-column: auto;
                }
                h1 {
                    font-size: 52px;
                }
            }

            .lang-selector {
                position: relative;
            }
            .lang-button {
                display: flex;
                align-items: center;
                gap: 8px;
                padding: 10px 14px;
                border: 1px solid var(--line);
                border-radius: 999px;
                background: rgba(7, 21, 34, 0.78);
                color: var(--text);
                font-weight: 800;
                cursor: pointer;
            }
            .lang-button:hover {
                border-color: rgba(0, 166, 255, 0.7);
            }
            .lang-menu {
                position: absolute;
                right: 0;
                top: calc(100% + 10px);
                min-width: 170px;
                padding: 8px;
                background: rgba(4, 16, 27, 0.98);
                border: 1px solid var(--line);
                border-radius: 14px;
                box-shadow: 0 18px 55px rgba(0, 0, 0, 0.42);
                display: none;
            }
            .lang-menu.open {
                display: block;
            }
            .lang-option {
                width: 100%;
                border: 0;
                background: transparent;
                color: var(--muted);
                padding: 10px 12px;
                text-align: left;
                border-radius: 10px;
                cursor: pointer;
                font-weight: 700;
            }
            .lang-option:hover,
            .lang-option.active {
                background: rgba(0, 166, 255, 0.12);
                color: var(--blue);
            }
            @media (max-width: 620px) {
                .lang-button {
                    padding: 9px 12px;
                }
                .lang-button span.label {
                    display: none;
                }
            }

.nav-right {
    display: flex;
    align-items: center;
    gap: 22px;
}
@keyframes coverMove{

    from{

        transform:translateX(0);

    }

    to{

        transform:translateX(-15%);

    }

}