:root{

    --bg:#080c10;
    --bg-secondary:#0d1218;
    --surface:#121922;
    --text:#ffffff;
    --muted:#9ea9b5;
    --accent:#4fa8ff;
    --border:rgba(255,255,255,.08);
    --radius-sm:18px;
    --radius:24px;
    --radius-lg:28px;
    --transition:.35s ease;

    --container:1280px;

}

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:"Manrope",sans-serif;
    background:var(--bg);
    color:var(--text);
    overflow-x:hidden;

}

main{

    transition:opacity 0.2s ease;

}

a{

    color:inherit;
    text-decoration:none;

}

button,
input,
select,
textarea{

    font-family:inherit;

}

:focus-visible{

    outline:2px solid var(--accent);
    outline-offset:3px;
    border-radius:3px;

}

img,
video{

    display:block;
    max-width:100%;

}

.container{

    width:min(92%,var(--container));
    margin:auto;

}

/* HEADER */

.header{

    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:1000;

    transition:var(--transition);

}

.header.scrolled{

    background:rgba(8,12,16,.88);
    backdrop-filter:blur(14px);
    border-bottom:1px solid var(--border);

}

.header__container{

    display:flex;
    align-items:center;
    justify-content:space-between;

    height:84px;

}

.logo{

    display:flex;
    flex-direction:column;

}

.logo__title{

    font-size:1.5rem;
    font-weight:800;
    letter-spacing:.12em;

}

.logo__subtitle{

    font-size:.72rem;
    color:var(--muted);
    margin-top:4px;

}

.nav{

    display:flex;
    gap:42px;

}

.nav a{

    font-size:.95rem;
    transition:.3s;

}

.nav a:hover{

    color:var(--accent);

}

.header__right{

    display:flex;
    align-items:center;
    gap:20px;

}

.language-switcher{

    display:flex;
    gap:8px;

}

.lang{

    width:42px;
    height:42px;

    border:1px solid rgba(255,255,255,.15);

    background:transparent;

    color:var(--text);

    border-radius:50%;

    cursor:pointer;

    transition:var(--transition);

    font-size:13px;

    font-weight:600;

}

.lang:hover{

    border-color:var(--accent);

    color:var(--accent);

}

.lang.active{

    background:var(--accent);

    color:var(--text);

    border-color:var(--accent);

}

.lang-mobile{

    display:none;

}

.menu-button{

    display:none;

}

@media(max-width:900px){

    .menu-button{

        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items:center;
        gap:6px;
        width:42px;
        height:42px;
        background:none;
        border:none;
        cursor:pointer;
        padding:4px;

    }

    .menu-button span{

        display:block;
        width:24px;
        height:2px;
        background:var(--text);
        transition:.3s;
        border-radius:2px;

    }

    .menu-button.open span:nth-child(1){
        transform:translateY(8px) rotate(45deg);
    }

    .menu-button.open span:nth-child(2){
        opacity:0;
    }

    .menu-button.open span:nth-child(3){
        transform:translateY(-8px) rotate(-45deg);
    }

    .nav{

        display:none;
        flex-direction:column;
        position:fixed;
        top:84px;
        left:0;
        width:100%;
        background:rgba(9,12,16,.97);
        padding:24px 4%;
        gap:0;
        border-bottom:1px solid var(--border);
        z-index:99;

    }

    .nav.open{

        display:flex;

    }

    .nav a{

        padding:18px 0;
        font-size:1.1rem;
        border-bottom:1px solid var(--border);

    }

    .language-switcher{

        display:none;

    }

    .lang-mobile{

        display:flex;
        gap:8px;
        padding:20px 0;
        border-top:1px solid var(--border);

    }

}

/* HERO */

.hero{

    position:relative;

    min-height:100vh;

    display:flex;
    align-items:center;

    overflow:hidden;

}

.hero__video{

    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    transform:scale(1.08);

    filter:
        brightness(.72)
        contrast(1.1)
        saturate(.9);

}

.hero__overlay{

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            180deg,

            rgba(5,8,12,.45),

            rgba(5,8,12,.72)

        );

    z-index:1;

}

.hero__container{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:1fr 320px;

    align-items:center;

}

.hero__eyebrow{

    display:inline-block;

    color:var(--accent);

    letter-spacing:.2em;

    margin-bottom:24px;

}

.hero h1{

    font-size:clamp(70px,8vw,110px);

    line-height:.95;

    font-weight:800;

    margin-bottom:24px;

}

.hero h1 span{

    color:var(--accent);

}

.hero p{

    max-width:560px;

    font-size:1.25rem;

    color:var(--muted);

    line-height:1.8;

    margin-bottom:42px;

}

.hero__buttons{

    display:flex;

    gap:18px;

}

.button{

    padding:18px 34px;

    border-radius:999px;

    font-weight:700;

    transition:var(--transition);

}

.button--primary{

    background:var(--accent);

    color:var(--text);

}

.button--primary:hover{

    transform:translateY(-4px);

}

.button--secondary{

    border:1px solid rgba(255,255,255,.25);

}

.button--secondary:hover{

    border-color:var(--accent);

}

.hero__right{

    display:flex;
    justify-content:flex-end;

}

.hero__badge{

    width:240px;

    aspect-ratio:1;

    border-radius:50%;

    border:1px solid rgba(255,255,255,.1);

    backdrop-filter:blur(14px);

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

}

.hero__badge strong{

    font-size:72px;

    color:var(--accent);

}

.hero__badge span{

    color:var(--muted);

    text-align:center;

}

/* ==========================================
ABOUT
========================================== */

.about{

    padding:140px 0;

    background:var(--bg-secondary);

}

.about__grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

}

.about__image{

    overflow:hidden;

    border-radius:var(--radius);

}

.about__image img{

    width:100%;

    display:block;

    transition:.6s;

}

.about__image:hover img{

    transform:scale(1.05);

}

.section-tag{

    display:inline-block;

    color:var(--accent);

    font-size:.9rem;

    letter-spacing:.18em;

    margin-bottom:24px;

}

.about h2{

    font-size:56px;

    line-height:1.1;

    margin-bottom:28px;

}

.about p{

    color:var(--muted);

    font-size:18px;

    line-height:1.9;

    margin-bottom:22px;

}

.about__stats{

    margin-top:60px;

    display:grid;

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

    gap:26px;

}

.stat{

    padding:28px;

    background:var(--surface);

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

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

}

.stat strong{

    display:block;

    font-size:42px;

    color:var(--accent);

    margin-bottom:10px;

}

.stat span{

    color:var(--muted);

}
/* =====================================================
   SERVICES
===================================================== */

.services{

    padding:160px 0;
    background:var(--bg);

}

.services__header{

    max-width:760px;
    margin:0 auto 90px;
    text-align:center;

}

.services__header h2{

    margin:18px 0 24px;
    font-size:clamp(42px,5vw,64px);
    line-height:1.05;

}

.services__header p{

    color:var(--muted);
    font-size:18px;
    line-height:1.8;

}

.services__layout{

    display:grid;
    grid-template-columns:430px 1fr;
    gap:70px;
    align-items:start;

}

/* ---------- LEFT ---------- */

.services__navigation{

    display:flex;
    flex-direction:column;
    border-top:1px solid var(--border);

}

.service{

    display:flex;
    align-items:center;
    gap:26px;

    width:100%;

    padding:34px 0;

    background:none;
    border:none;
    border-bottom:1px solid var(--border);

    color:var(--text);

    cursor:pointer;

    text-align:left;

    transition:var(--transition);

}

.service span{

    width:42px;

    color:var(--accent);

    font-size:14px;

    letter-spacing:.18em;

}

.service h3{

    font-size:30px;

    margin-bottom:8px;

    transition:var(--transition);

}

.service small{

    color:var(--muted);

    font-size:15px;

}

.service:hover h3{

    color:var(--accent);

    transform:translateX(12px);

}

.service.active h3{

    color:var(--accent);

}

/* ---------- RIGHT ---------- */

.services__viewer{

    display:flex;
    flex-direction:column;

}

.services__image{

    overflow:hidden;

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

    aspect-ratio:4/3;

    margin-bottom:36px;

}

.services__image img{

    width:100%;
    height:100%;

    object-fit:cover;

    transition:
        opacity .35s,
        transform .8s;

}

.services__content{

    display:grid;

    gap:26px;

}

.services__content h3{

    font-size:46px;

}

.services__content p{

    max-width:700px;

    color:var(--muted);

    line-height:1.9;

    font-size:18px;

}

.service-meta{

    display:grid;

    grid-template-columns:260px 1fr;

    gap:60px;

    margin-top:20px;

}

.service-meta span{

    display:block;

    color:var(--accent);

    text-transform:uppercase;

    letter-spacing:.18em;

    font-size:12px;

    margin-bottom:16px;

}

.service-meta strong{

    font-size:34px;

}

.service-meta ul{

    list-style:none;

    display:grid;

    grid-template-columns:repeat(2,minmax(140px,1fr));

    gap:12px;

}

.service-meta li{

    position:relative;

    padding-left:18px;

    color:var(--muted);

}

.service-meta li::before{

    content:"";

    position:absolute;

    left:0;
    top:9px;

    width:6px;
    height:6px;

    border-radius:50%;

    background:var(--accent);

}

/* ---------- Responsive ---------- */

@media (max-width:1100px){

    .services__layout{

        grid-template-columns:1fr;

    }

}

@media (max-width:768px){

    .services{

        padding:100px 0;

    }

    .service h3{

        font-size:24px;

    }

    .service:hover h3{

        color: var(--accent);

    }

    .services__content h3{

        font-size:34px;

    }

    .service-meta{

        grid-template-columns:1fr;

        gap:30px;

    }

    .service-meta ul{

        grid-template-columns:1fr;

    }

}
/* =====================================================
   CAPABILITIES
===================================================== */

.capabilities{

    padding:160px 0;

    background:var(--bg-secondary);

}

.capabilities .container{

    display:grid;

    grid-template-columns:1fr 520px;

    gap:80px;

    align-items:center;

}

.capabilities__left{

    max-width:720px;

}

.capabilities__left h2{

    margin:20px 0 28px;

    font-size:clamp(42px,5vw,64px);

    line-height:1.05;

}

.capabilities__left p{

    color:var(--muted);

    line-height:1.9;

    font-size:18px;

    margin-bottom:60px;

}

.capabilities__numbers{

    display:grid;

    grid-template-columns:repeat(2,minmax(220px,1fr));

    gap:40px;

}

.capability-item{

    padding-bottom:26px;

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

    transition:var(--transition);

}

.capability-item:hover{

    border-color:var(--accent);

    transform:translateY(-4px);

}

.capability-item strong{

    display:block;

    font-size:40px;

    font-weight:800;

    color:var(--accent);

    margin-bottom:12px;

}

.capability-item span{

    display:block;

    color:var(--muted);

    line-height:1.7;

}

.capabilities__right{

    overflow:hidden;

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

    aspect-ratio:4/5;

}

.capabilities__right img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:transform .8s;

}

.capabilities__right:hover img{

    transform:scale(1.05);

}

@media (max-width:1100px){

    .capabilities .container{

        grid-template-columns:1fr;

    }

    .capabilities__right{

        order:-1;

        aspect-ratio:16/9;

    }

}

@media (max-width:768px){

    .capabilities{

        padding:100px 0;

    }

    .capabilities__numbers{

        grid-template-columns:1fr;

        gap:28px;

    }

    .capability-item strong{

        font-size:30px;

    }

}
/* =====================================================
WHY
===================================================== */

.why{

    padding:160px 0;

    background:var(--bg);

}

.why .container{

    display:grid;

    grid-template-columns:420px 1fr;

    gap:100px;

}

.why__left{

    position:sticky;

    top:140px;

    align-self:start;

}

.why__left h2{

    margin:20px 0 30px;

    font-size:clamp(48px,6vw,72px);

    line-height:1;

}

.why__left p{

    color:var(--muted);

    line-height:1.9;

}

.why__right{

    display:flex;

    flex-direction:column;

}

.why-item{

    display:grid;

    grid-template-columns:70px 1fr;

    gap:40px;

    padding:48px 0;

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

    transition:var(--transition);

}

.why-item span{

    color:var(--accent);

    font-size:14px;

    letter-spacing:.2em;

}

.why-item h3{

    font-size:36px;

    margin-bottom:16px;

    transition:var(--transition);

}

.why-item p{

    color:var(--muted);

    line-height:1.8;

    max-width:520px;

}

.why-item:hover{

    transform:translateX(12px);

}

.why-item:hover h3{

    color:var(--accent);

}

@media(max-width:1100px){

    .why .container{

        grid-template-columns:1fr;

        gap:60px;

    }

    .why__left{

        position:relative;

        top:0;

    }

}

@media(max-width:768px){

    .why{

        padding:100px 0;

    }

    .why-item{

        grid-template-columns:40px 1fr;

        gap:20px;

    }

    .why-item h3{

        font-size:28px;

    }

}
/* =====================================================
CONTACT
===================================================== */

.contact{

    padding:170px 0;

    background:var(--bg-secondary);

}

.contact__intro{

    text-align:center;

    max-width:760px;

    margin:0 auto 90px;

}

.contact__intro h2{

    margin:22px 0;

    font-size:clamp(48px,6vw,76px);

    line-height:1;

}

.contact__intro p{

    color:var(--muted);

    font-size:18px;

    line-height:1.9;

}

.contact__grid{

    display:grid;

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

    gap:30px;

}

.contact-card{

    padding:40px;

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

    border-radius:var(--radius);

    background:var(--surface);

    transition:var(--transition);

}

.contact-card:hover{

    transform:translateY(-8px);

    border-color:var(--accent);

}

.contact-card span{

    display:block;

    margin-bottom:20px;

    color:var(--accent);

    font-size:12px;

    letter-spacing:.18em;

}

.contact-card a{

    display:block;

    margin-bottom:14px;

    font-size:22px;

    transition:.3s;

}

.contact-card a:hover{

    color:var(--accent);

}

.contact-card address{

    font-style:normal;

    color:var(--muted);

    line-height:1.8;

}

.contact__cta{

    margin-top:80px;

    display:flex;

    justify-content:center;

}

@media(max-width:960px){

    .contact__grid{

        grid-template-columns:1fr;

    }

}

@media(max-width:768px){

    .contact{

        padding:80px 0;

    }

    .contact__intro{

        margin-bottom:48px;

    }

}
/* =====================================================
FOOTER
===================================================== */

.footer{

    padding:60px 0;

    background:var(--bg);

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

}

.footer__top{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:40px;

    margin-bottom:40px;

}

.footer__top h3{

    font-size:28px;

}

.footer__top p{

    color:var(--muted);

    margin-top:10px;

}

.footer nav{

    display:flex;

    gap:30px;

}

.footer nav a{

    transition:.3s;

}

.footer nav a:hover{

    color:var(--accent);

}

.footer__bottom{

    padding-top:30px;

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

    color:var(--muted);

}

@media(max-width:960px){

    .footer__top{

        flex-direction:column;

        align-items:flex-start;

    }

    .footer nav{

        flex-wrap:wrap;

    }

}
/* ==========================================
   ACTIVE NAV
========================================== */

.nav__link{

    position:relative;

    transition:.3s;

}

.nav__link::after{

    content:"";

    position:absolute;

    left:0;
    bottom:-8px;

    width:0;
    height:2px;

    background:var(--accent);

    transition:.3s;

}

.nav__link:hover::after,
.nav__link.active::after{

    width:100%;

}

.nav__link.active{

    color:var(--accent);

}

/* ==========================================
   SCROLL MARGIN
========================================== */

section[id]{

    scroll-margin-top:100px;

}

/* ==========================================
   REVEAL ANIMATIONS
========================================== */

.reveal{

    opacity:0;

    transform:translateY(50px);

    transition:
        opacity .8s ease,
        transform .8s ease;

}

.reveal.visible{

    opacity:1;

    transform:none;

}

/* ==========================================
   TOAST NOTIFICATION
========================================== */

.toast{

    position:fixed;
    bottom:32px;
    left:50%;
    transform:translateX(-50%) translateY(16px);

    background:var(--surface);
    color:var(--text);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);

    padding:14px 28px;
    font-size:.95rem;
    font-weight:600;

    opacity:0;
    pointer-events:none;
    z-index:9999;
    white-space:nowrap;

    transition:opacity .3s, transform .3s;

}

.toast.show{

    opacity:1;
    transform:translateX(-50%) translateY(0);

}

/* ==========================================
   SKIP LINK
========================================== */

.skip-link{

    position:absolute;
    top:-100%;
    left:24px;
    background:var(--accent);
    color:var(--bg);
    padding:12px 24px;
    border-radius:var(--radius-sm);
    font-weight:700;
    font-size:1rem;
    z-index:9999;
    transition:top .2s;

}

.skip-link:focus{

    top:24px;

}

/* ==========================================
   HERO RESPONSIVE
========================================== */

@media(max-width:900px){

    .about__grid{

        grid-template-columns:1fr;
        gap:50px;

    }

    .about h2{

        font-size:clamp(32px,7vw,56px);

    }

}

@media(max-width:768px){

    .about{

        padding:80px 0;

    }

}

@media(max-width:768px){

    .hero__container{

        grid-template-columns:1fr;

    }

    .hero__right{

        display:none;

    }

    .hero h1{

        font-size:clamp(36px,11vw,70px);

    }

    .hero p{

        font-size:1.05rem;
        margin-bottom:32px;

    }

    .hero__buttons{

        flex-wrap:wrap;

    }

    /* Safety net — long RO/RU words must wrap, not overflow */
    h1,h2,h3{

        overflow-wrap:break-word;

    }

    /* letter-spacing amplifies overflow — reduce it on mobile */
    .section-tag{

        letter-spacing:.06em;
        font-size:.8rem;

    }

    /* logo subtitle: truncate in 84px header instead of wrapping */
    .logo__subtitle{

        max-width:200px;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;

    }

    /* clamp minimums are too large — override with mobile-safe values */
    .services__header h2,
    .capabilities__left h2{

        font-size:clamp(28px,7vw,42px);

    }

    .services__content h3{

        font-size:clamp(22px,6vw,34px);

    }

    .why__left h2{

        font-size:clamp(30px,8vw,48px);

    }

    .contact__intro h2{

        font-size:clamp(26px,7vw,48px);

    }

    /* service nav buttons: reduce number glyph gap so title has more room */
    .service{

        gap:16px;

    }

    .service h3{

        font-size:clamp(16px,5vw,24px);

    }

}

@media(max-width:420px){

    /* hide logo subtitle entirely on very small screens */
    .logo__subtitle{

        display:none;

    }

}