figure{margin:0}/* =========================================================   RESET========================================================= */*{    margin:0;    padding:0;    box-sizing:border-box;}html{    scroll-behavior:smooth;}body{    font-family:        "Segoe UI",        Tahoma,        Arial,        sans-serif;    background:#f5f9fd;    color:#071b31;    overflow-x:hidden;    transition:        background .3s ease,        color .3s ease;}a{    text-decoration:none;    color:inherit;}button{    font-family:inherit;}/* =========================================================   VARIABLES========================================================= */:root{    --navy-950:#020d18;    --navy-900:#06182a;    --navy-850:#071d31;    --navy-800:#0a2742;    --navy-700:#0d3557;    --blue:#1387f5;    --blue-2:#37aaff;    --cyan:#24c8e8;    --green:#35d59a;    --orange:#ffb84d;    --red:#ff5d69;    --white:#ffffff;    --gray-50:#f7faff;    --gray-100:#eef4f9;    --gray-200:#dce6ef;    --gray-400:#91a2b2;    --gray-500:#6c7d8d;    --gray-700:#32495e;    --shadow:        0 25px 70px rgba(4,29,50,.13);}/* =========================================================   GLOBAL========================================================= */.container{    width:min(1220px,calc(100% - 50px));    margin:auto;}section{    padding:110px 0;}.section-label{    color:var(--blue);    font-size:12px;    font-weight:800;    letter-spacing:.8px;    margin-bottom:14px;}.section-title{    font-size:40px;    line-height:1.35;    color:#071b31;    margin-bottom:18px;}.section-description{    color:var(--gray-500);    font-size:14px;    line-height:2.1;}.section-header{    text-align:center;    max-width:760px;    margin:0 auto 65px;}/* =========================================================   NAVBAR========================================================= */.navbar{    position:fixed;    top:0;    left:0;    width:100%;    height:82px;    z-index:9999;    background:        rgba(2,13,24,.84);    backdrop-filter:blur(20px);    -webkit-backdrop-filter:blur(20px);    border-bottom:        1px solid rgba(255,255,255,.08);    transition:.3s;}.nav-container{    width:min(1250px,calc(100% - 50px));    height:100%;    margin:auto;    display:flex;    align-items:center;    justify-content:space-between;}/* LOGO */.logo{    display:flex;    align-items:center;    gap:12px;    color:#fff;    font-size:25px;    font-weight:900;    letter-spacing:1.5px;}.logo-icon{    width:43px;    height:43px;    border-radius:12px;    display:flex;    align-items:center;    justify-content:center;    background:        linear-gradient(            135deg,            #24a0ff,            #0759a5        );    box-shadow:        0 8px 25px rgba(20,140,255,.35);}.logo-icon span{    width:20px;    height:20px;    border:3px solid #fff;    border-radius:50%;    position:relative;}.logo-icon span:after{    content:"";    position:absolute;    width:7px;    height:7px;    background:#fff;    border-radius:50%;    top:50%;    left:50%;    transform:        translate(-50%,-50%);}/* NAV LINKS */.nav-links{    display:flex;    align-items:center;    gap:32px;    color:        rgba(255,255,255,.73);    font-size:13px;}.nav-links a{    position:relative;    transition:.25s;}.nav-links a:hover{    color:#fff;}.nav-links a:after{    content:"";    position:absolute;    width:0;    height:2px;    background:        var(--blue-2);    bottom:-9px;    right:0;    transition:.25s;}.nav-links a:hover:after{    width:100%;}/* NAV RIGHT */.nav-right{    display:flex;    align-items:center;    gap:12px;}/* LANGUAGE */.language-box{    position:relative;}.language-button{    height:39px;    padding:        0 13px;    display:flex;    align-items:center;    gap:7px;    border-radius:9px;    color:#fff;    background:        rgba(255,255,255,.07);    border:        1px solid rgba(255,255,255,.1);    cursor:pointer;    font-size:11px;}.language-menu{    position:absolute;    top:48px;    right:0;    width:130px;    padding:6px;    border-radius:12px;    background:#0a2238;    border:        1px solid rgba(255,255,255,.1);    box-shadow:        0 20px 50px rgba(0,0,0,.3);    opacity:0;    visibility:hidden;    transform:        translateY(-7px);    transition:.25s;}.language-box.open .language-menu{    opacity:1;    visibility:visible;    transform:        translateY(0);}.language-menu button{    width:100%;    border:0;    background:transparent;    color:#b5c8d9;    padding:10px;    border-radius:8px;    text-align:right;    cursor:pointer;    font-size:11px;}.language-menu button:hover{    background:        rgba(255,255,255,.07);    color:#fff;}/* NAV CTA */.nav-button{    height:39px;    padding:        0 17px;    display:flex;    align-items:center;    justify-content:center;    border-radius:9px;    color:#fff;    background:        linear-gradient(            135deg,            #188fff,            #0967c9        );    font-size:11px;    font-weight:700;    transition:.25s;}.nav-button:hover{    transform:        translateY(-2px);    box-shadow:        0 10px 25px        rgba(19,135,245,.25);}/* =========================================================   HERO========================================================= */.hero{    min-height:880px;    padding-top:82px;    position:relative;    overflow:hidden;    background:        radial-gradient(            circle at 20% 30%,            rgba(19,135,245,.19),            transparent 34%        ),        radial-gradient(            circle at 82% 70%,            rgba(36,200,232,.08),            transparent 28%        ),        var(--navy-950);    color:#fff;}/* GRID */.hero:before{    content:"";    position:absolute;    inset:0;    opacity:.14;    background-image:        linear-gradient(            rgba(255,255,255,.08) 1px,            transparent 1px        ),        linear-gradient(            90deg,            rgba(255,255,255,.08) 1px,            transparent 1px        );    background-size:55px 55px;    mask-image:        linear-gradient(            to bottom,            black,            transparent        );}/* GLOW */.hero-glow{    position:absolute;    width:600px;    height:600px;    border-radius:50%;    background:        rgba(15,126,245,.12);    filter:blur(90px);    left:-180px;    top:100px;}/* HERO CONTAINER */.hero-container{    width:min(1250px,calc(100% - 50px));    min-height:798px;    margin:auto;    display:grid;    grid-template-columns:        1fr 1.08fr;    align-items:center;    gap:60px;    position:relative;    z-index:2;}/* HERO TEXT */.hero-text{    text-align:right;}.hero-badge{    display:inline-flex;    align-items:center;    gap:8px;    padding:        8px 13px;    border-radius:50px;    background:        rgba(25,140,255,.09);    border:        1px solid        rgba(67,170,255,.22);    color:#8dccff;    font-size:11px;    margin-bottom:24px;}.hero-badge i{    width:7px;    height:7px;    border-radius:50%;    background:#3cc7ff;    box-shadow:        0 0 12px #3cc7ff;}.hero h1{    font-size:        clamp(45px,5vw,74px);    line-height:1.1;    font-weight:900;    margin-bottom:25px;}.hero h1 span{    background:        linear-gradient(            90deg,            #58c0ff,            #167cf0        );    -webkit-background-clip:text;    background-clip:text;    color:transparent;}.hero-description{    max-width:600px;    color:#a6bacd;    font-size:16px;    line-height:2.1;    margin-bottom:32px;}/* HERO BUTTONS */.hero-buttons{    display:flex;    align-items:center;    gap:12px;    flex-wrap:wrap;}.btn{    height:52px;    padding:        0 24px;    border-radius:11px;    display:inline-flex;    align-items:center;    justify-content:center;    gap:8px;    font-size:13px;    font-weight:700;    cursor:pointer;    transition:.3s;}.btn-primary{    color:#fff;    background:        linear-gradient(            135deg,            #1995ff,            #075fbe        );    box-shadow:        0 12px 35px        rgba(16,125,235,.27);}.btn-primary:hover{    transform:        translateY(-3px);    box-shadow:        0 18px 45px        rgba(16,125,235,.4);}.btn-outline{    color:#fff;    background:        rgba(255,255,255,.05);    border:        1px solid        rgba(255,255,255,.14);}.btn-outline:hover{    background:        rgba(255,255,255,.1);    transform:        translateY(-3px);}/* HERO STATS */.hero-stats{    display:flex;    gap:35px;    margin-top:48px;    padding-top:24px;    border-top:        1px solid        rgba(255,255,255,.08);}.stat strong{    display:block;    color:#fff;    font-size:23px;    margin-bottom:5px;}.stat span{    color:#71869a;    font-size:10px;}/* =========================================================   HERO DASHBOARD========================================================= */.product-area{    display:flex;    justify-content:center;    align-items:center;    position:relative;}.machine{    width:min(600px,100%);    padding:20px;    border-radius:27px;    background:        linear-gradient(            145deg,            #102f4b,            #061522        );    border:        1px solid        rgba(255,255,255,.12);    box-shadow:        0 45px 100px        rgba(0,0,0,.43);    transform:        perspective(1200px)        rotateY(-5deg)        rotateX(2deg);    animation:        machineFloat 6s ease-in-out infinite;}@keyframes machineFloat{    0%,100%{        transform:            perspective(1200px)            rotateY(-5deg)            rotateX(2deg)            translateY(0);    }    50%{        transform:            perspective(1200px)            rotateY(-5deg)            rotateX(2deg)            translateY(-11px);    }}.machine-top{    height:35px;    display:flex;    align-items:center;    gap:7px;    padding:0 10px;    border-bottom:        1px solid        rgba(255,255,255,.07);}.machine-dot{    width:8px;    height:8px;    border-radius:50%;    background:var(--green);}.machine-dot:nth-child(2){    background:var(--orange);}.machine-dot:nth-child(3){    background:var(--red);}/* DASHBOARD */.dashboard{    margin-top:15px;    display:grid;    grid-template-columns:        145px 1fr;    gap:12px;}/* SIDE */.side-panel{    background:#071a2c;    border:        1px solid        rgba(255,255,255,.07);    border-radius:13px;    padding:12px;}.side-title{    color:#7891a5;    font-size:8px;    margin-bottom:12px;}.side-item{    height:39px;    border-radius:8px;    display:flex;    align-items:center;    padding:0 9px;    margin-bottom:6px;    background:        rgba(255,255,255,.035);    color:#aebfd0;    font-size:9px;}.side-item.active{    background:        rgba(19,135,245,.14);    border:        1px solid        rgba(19,135,245,.22);    color:#5bb8ff;}/* MAIN */.main-dashboard{    background:#061727;    border:        1px solid        rgba(255,255,255,.07);    border-radius:13px;    padding:14px;}.dashboard-header{    display:flex;    align-items:center;    justify-content:space-between;    margin-bottom:14px;}.dashboard-title{    color:#fff;    font-size:12px;    font-weight:700;}.online{    display:flex;    align-items:center;    gap:5px;    color:#50d89a;    font-size:8px;}.online:before{    content:"";    width:5px;    height:5px;    border-radius:50%;    background:#40d894;}/* LEVELS */.levels{    display:grid;    grid-template-columns:        repeat(7,1fr);    gap:7px;    height:145px;    align-items:end;    padding-bottom:8px;}.level{    height:100%;    display:flex;    align-items:end;    background:        rgba(255,255,255,.045);    border-radius:5px;    overflow:hidden;}.level-fill{    width:100%;    border-radius:5px;    background:        linear-gradient(            to top,            #0d73d6,            #42b9ff        );    box-shadow:        0 0 15px        rgba(35,150,255,.25);}.level:nth-child(1).level-fill{height:65%;}.level:nth-child(2).level-fill{height:82%;}.level:nth-child(3).level-fill{height:45%;}.level:nth-child(4).level-fill{height:70%;}.level:nth-child(5).level-fill{height:58%;}.level:nth-child(6).level-fill{height:90%;}.level:nth-child(7).level-fill{height:74%;}/* MACHINE CARDS */.machine-bottom{    display:grid;    grid-template-columns:        repeat(3,1fr);    gap:7px;    margin-top:8px;}.machine-card{    padding:9px;    border-radius:8px;    background:        rgba(255,255,255,.035);}.machine-card span{    display:block;    color:#637c91;    font-size:7px;    margin-bottom:4px;}.machine-card strong{    color:#fff;    font-size:12px;}/* FLOATING */.floating-card{    position:absolute;    padding:        12px 16px;    border-radius:12px;    background:        rgba(8,28,48,.9);    backdrop-filter:blur(15px);    border:        1px solid        rgba(255,255,255,.12);    box-shadow:        0 20px 50px        rgba(0,0,0,.35);}.floating-card.one{    right:-20px;    top:17%;}.floating-card.two{    left:-20px;    bottom:11%;}.floating-card small{    display:block;    color:#718da5;    font-size:7px;    margin-bottom:4px;}.floating-card strong{    color:#fff;    font-size:14px;}/* =========================================================   INTRODUCTION========================================================= */.introduction{    background:#fff;}.intro-grid{    display:grid;    grid-template-columns:        1fr 1fr;    gap:80px;    align-items:center;}/* INTRO TEXT */.intro-content h2{    font-size:40px;    line-height:1.4;    margin-bottom:20px;}.intro-content h2 span{    color:var(--blue);}.intro-content p{    color:var(--gray-500);    font-size:14px;    line-height:2.2;    margin-bottom:17px;}/* INFO BOX */.intro-box{    margin-top:28px;    padding:20px;    border-radius:14px;    background:#f5f9fd;    border:        1px solid        #e4edf5;}.intro-box strong{    display:block;    color:#071b31;    margin-bottom:8px;    font-size:13px;}.intro-box p{    margin:0;    font-size:12px;}/* ARCHITECTURE */.architecture{    padding:30px;    border-radius:25px;    background:        linear-gradient(            145deg,            #06182a,            #0b3150        );    box-shadow:        var(--shadow);    position:relative;    overflow:hidden;}.architecture:before{    content:"";    position:absolute;    width:300px;    height:300px;    border-radius:50%;    border:        1px solid        rgba(255,255,255,.08);    right:-100px;    top:-100px;}.arch-title{    color:#fff;    font-size:15px;    margin-bottom:28px;    position:relative;    z-index:2;}.arch-step{    min-height:67px;    display:flex;    align-items:center;    gap:15px;    position:relative;    z-index:2;}.arch-icon{    width:42px;    height:42px;    flex-shrink:0;    border-radius:11px;    display:flex;    align-items:center;    justify-content:center;    color:#fff;    background:        rgba(20,143,255,.15);    border:        1px solid        rgba(40,157,255,.2);    font-size:14px;}.arch-step strong{    display:block;    color:#fff;    font-size:12px;    margin-bottom:4px;}.arch-step span{    color:#718da5;    font-size:9px;}.arch-line{    width:1px;    height:22px;    margin-right:21px;    background:        rgba(49,156,255,.25);}/* =========================================================   FEATURES========================================================= */.features{    background:#f6f9fc;}.feature-grid{    display:grid;    grid-template-columns:        repeat(3,1fr);    gap:18px;}.feature{    padding:29px;    border-radius:18px;    background:#fff;    border:        1px solid        #e5edf4;    transition:.3s;}.feature:hover{    transform:        translateY(-7px);    box-shadow:        0 20px 50px        rgba(9,42,72,.09);    border-color:        rgba(22,135,255,.2);}.feature-icon{    width:52px;    height:52px;    border-radius:13px;    display:flex;    align-items:center;    justify-content:center;    background:        linear-gradient(            135deg,            #e7f4ff,            #d7ecff        );    color:#0878db;    font-size:21px;    margin-bottom:20px;}.feature h3{    font-size:16px;    margin-bottom:11px;}.feature p{    color:#718292;    font-size:11px;    line-height:2;}/* =========================================================   BENEFITS========================================================= */.benefits{    background:#fff;}.benefit-grid{    display:grid;    grid-template-columns:        repeat(4,1fr);    gap:15px;}.benefit{    padding:25px;    min-height:185px;    border-radius:16px;    background:        #f8fbfe;    border:        1px solid        #e5edf4;    transition:.3s;}.benefit:hover{    transform:        translateY(-5px);    box-shadow:        0 15px 40px        rgba(0,30,60,.08);}.benefit-number{    color:#1687ff;    font-size:11px;    font-weight:800;    margin-bottom:30px;}.benefit h3{    font-size:15px;    margin-bottom:9px;}.benefit p{    color:#738597;    font-size:10px;    line-height:1.9;}/* =========================================================   INDUSTRIAL CONTROL========================================================= */.control-section{    background:        var(--navy-950);    color:#fff;    position:relative;    overflow:hidden;}.control-section:before{    content:"";    position:absolute;    width:600px;    height:600px;    border-radius:50%;    background:        rgba(20,120,255,.11);    filter:blur(110px);    top:-250px;    left:-100px;}.control-section .section-title{    color:#fff;}.control-section .section-description{    color:#7890a4;}.control-grid{    display:grid;    grid-template-columns:        repeat(4,1fr);    gap:15px;    position:relative;    z-index:2;}.control-card{    padding:25px;    min-height:190px;    border-radius:16px;    background:        rgba(255,255,255,.045);    border:        1px solid        rgba(255,255,255,.08);    transition:.3s;}.control-card:hover{    background:        rgba(255,255,255,.07);    transform:        translateY(-6px);}.control-number{    color:#2a99ff;    font-size:11px;    margin-bottom:30px;}.control-card h3{    font-size:15px;    margin-bottom:10px;}.control-card p{    color:#71899d;    font-size:10px;    line-height:2;}/* =========================================================   APPLICATIONS========================================================= */.applications{    background:#f5f9fd;}.application-grid{    display:grid;    grid-template-columns:        repeat(3,1fr);    gap:18px;}.application{    min-height:210px;    padding:30px;    border-radius:19px;    position:relative;    overflow:hidden;    color:#fff;    background:        linear-gradient(            145deg,            #071d31,            #0b3557        );    transition:.3s;}.application:hover{    transform:        translateY(-7px);    box-shadow:        0 25px 55px        rgba(2,24,44,.18);}.application:after{    content:"";    position:absolute;    width:150px;    height:150px;    border-radius:50%;    border:        1px solid        rgba(255,255,255,.08);    right:-45px;    bottom:-60px;}.application-icon{    font-size:25px;    margin-bottom:25px;}.application h3{    font-size:17px;    margin-bottom:10px;}.application p{    color:#8ca4b7;    font-size:11px;    line-height:2;}/* =========================================================   PRODUCT / HARDWARE========================================================= */.hardware{    background:#fff;}.hardware-grid{    display:grid;    grid-template-columns:        1fr 1fr;    gap:75px;    align-items:center;}.device-visual{    min-height:470px;    border-radius:27px;    background:        linear-gradient(            145deg,            #06182a,            #0c3454        );    display:flex;    justify-content:center;    align-items:center;    position:relative;    overflow:hidden;}.device-visual:before{    content:"";    position:absolute;    width:420px;    height:420px;    border-radius:50%;    border:        1px solid        rgba(255,255,255,.07);    box-shadow:        0 0 0 70px        rgba(255,255,255,.015),        0 0 0 140px        rgba(255,255,255,.01);}.device{    width:275px;    height:345px;    position:relative;    z-index:2;    border-radius:20px;    background:        linear-gradient(            145deg,            #f0f4f7,            #abb9c2        );    box-shadow:        0 35px 60px        rgba(0,0,0,.35);}.device-screen{    position:absolute;    top:35px;    left:30px;    right:30px;    height:100px;    border-radius:9px;    background:#061625;    border:        4px solid        #273947;    box-shadow:        inset 0 0 20px        rgba(0,0,0,.7);    padding-top:4px;}.screen-line{    height:5px;    background:#22a5ff;    border-radius:4px;    margin:13px;}.screen-line:nth-child(2){    width:60%;    background:#43d59a;}.device-buttons{    position:absolute;    left:30px;    right:30px;    bottom:43px;    display:grid;    grid-template-columns:        repeat(4,1fr);    gap:9px;}.device-buttons span{    height:32px;    border-radius:6px;    background:        linear-gradient(            #fff,            #cbd4d9        );    box-shadow:        0 3px 5px        rgba(0,0,0,.2);}/* HARDWARE CONTENT */.hardware-content h2{    font-size:39px;    line-height:1.4;    margin-bottom:20px;}.hardware-content h2 span{    color:var(--blue);}.hardware-content>p{    color:#718292;    font-size:13px;    line-height:2.2;    margin-bottom:25px;}.check-list{    list-style:none;    margin-bottom:30px;}.check-list li{    display:flex;    align-items:center;    gap:11px;    color:#344b60;    font-size:12px;    margin-bottom:13px;}.check-list li:before{    content:"✓";    width:22px;    height:22px;    flex-shrink:0;    border-radius:50%;    display:flex;    align-items:center;    justify-content:center;    background:#e4f4ff;    color:#087be2;    font-weight:bold;}/* =========================================================   CTA========================================================= */.cta{    background:#fff;    padding:        90px 0;}.cta-box{    min-height:300px;    border-radius:27px;    padding:60px;    display:flex;    align-items:center;    justify-content:space-between;    gap:40px;    position:relative;    overflow:hidden;    background:        linear-gradient(            120deg,            #06182a,            #0b3152        );    box-shadow:        var(--shadow);}.cta-box:before{    content:"";    position:absolute;    width:350px;    height:350px;    border-radius:50%;    border:        1px solid        rgba(255,255,255,.07);    left:-80px;    top:-120px;}.cta-text{    position:relative;    z-index:2;}.cta-text h2{    color:#fff;    font-size:34px;    margin-bottom:13px;}.cta-text p{    color:#8ca2b5;    font-size:12px;    line-height:2;}.cta-action{    position:relative;    z-index:2;}/* =========================================================   FOOTER========================================================= */footer{    background:#020d18;    color:#fff;    padding:        55px 0 25px;}.footer-top{    display:grid;    grid-template-columns:        1.5fr 1fr 1fr 1fr;    gap:50px;    padding-bottom:45px;    border-bottom:        1px solid        rgba(255,255,255,.07);}.footer-brand p{    color:#667b8e;    font-size:10px;    line-height:2;    max-width:340px;    margin-top:17px;}.footer-column h4{    font-size:12px;    margin-bottom:19px;}.footer-column a{    display:block;    color:#667b8e;    font-size:10px;    margin-bottom:12px;    transition:.2s;}.footer-column a:hover{    color:#3da5ff;}.footer-bottom{    padding-top:22px;    display:flex;    justify-content:space-between;    color:#4d6173;    font-size:9px;}/* =========================================================   BACK TO TOP========================================================= */.back-top{    position:fixed;    bottom:25px;    left:25px;    width:42px;    height:42px;    border-radius:11px;    border:        1px solid        rgba(255,255,255,.1);    background:        #09233b;    color:#fff;    cursor:pointer;    opacity:0;    visibility:hidden;    transition:.3s;    z-index:1000;}.back-top.show{    opacity:1;    visibility:visible;}/* =========================================================   RESPONSIVE========================================================= */@media(max-width:1050px){    .nav-links{        display:none;    }    .hero-container{        grid-template-columns:1fr;        padding:            70px 0;        text-align:center;    }    .hero-text{        text-align:center;    }    .hero-description{        margin-left:auto;        margin-right:auto;    }    .hero-buttons{        justify-content:center;    }    .hero-stats{        justify-content:center;    }    .product-area{        margin-top:30px;    }    .intro-grid,    .hardware-grid{        grid-template-columns:1fr;    }    .feature-grid{        grid-template-columns:            repeat(2,1fr);    }    .benefit-grid{        grid-template-columns:            repeat(2,1fr);    }    .control-grid{        grid-template-columns:            repeat(2,1fr);    }    .application-grid{        grid-template-columns:            repeat(2,1fr);    }    .footer-top{        grid-template-columns:            repeat(2,1fr);    }}@media(max-width:700px){    .container,    .nav-container,    .hero-container{        width:            calc(100% - 30px);    }    .nav-button{        display:none;    }    .hero{        min-height:auto;    }    .hero h1{        font-size:42px;    }    .hero-description{        font-size:13px;    }    .machine{        padding:12px;    }    .dashboard{        grid-template-columns:1fr;    }    .floating-card{        display:none;    }    .hero-stats{        gap:17px;    }    .stat strong{        font-size:18px;    }    .feature-grid,    .benefit-grid,    .control-grid,    .application-grid{        grid-template-columns:1fr;    }    .section-title{        font-size:30px;    }    .intro-content h2,    .hardware-content h2{        font-size:30px;    }    .cta-box{        padding:            40px 25px;        flex-direction:column;        text-align:center;    }    .cta-text h2{        font-size:27px;    }    .footer-top{        grid-template-columns:1fr;    }    .footer-bottom{        flex-direction:column;        gap:10px;        text-align:center;    }    .language-button{        padding:0 10px;    }}/* =========================================================   MANA SANAT AFAGH - CONTENT LAYER========================================================= */.mana-logo{    display:flex;    align-items:center;    gap:11px;    color:#fff;    font-weight:900}.mana-mark{
    width:40px;
    height:40px;
    min-width:40px;
    max-width:40px;
    border-radius:8px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    background:#fff;
    box-shadow:none;
}
.mana-mark img{
    width:100%;
    height:100%;
    display:block;
    object-fit:contain;
    object-position:center;
}.mana-logo-name{    display:flex;    flex-direction:column;    line-height:1.05}.mana-logo-name strong{    font-size:18px;    letter-spacing:0}.mana-logo-name small{    font-size:9px;    color:#8da7bb;    font-weight:500;    margin-top:5px}.hero-mana .hero-badge{    margin-bottom:20px}.hero-mana h1{    max-width:700px}.hero-mana .hero-description{    max-width:670px}.hero-product-card{    width:min(590px,100%);    min-height:430px;    border-radius:28px;    padding:28px;    position:relative;    overflow:hidden;    color:#fff;    background:linear-gradient(145deg,#0b2b47,#04121e);    border:1px solid rgba(255,255,255,.12);    box-shadow:0 45px 100px rgba(0,0,0,.43);}.hero-product-card:before{    content:"";    position:absolute;    width:420px;    height:420px;    border-radius:50%;    border:1px solid rgba(74,179,255,.14);    right:-150px;    top:-150px;    box-shadow:0 0 0 70px rgba(255,255,255,.018),0 0 0 140px rgba(255,255,255,.012)}.hero-product-content{    position:relative;    z-index:2;    height:100%;    display:flex;    flex-direction:column;    justify-content:space-between}.hero-product-top{    display:flex;    justify-content:space-between;    align-items:center;    color:#8bb3d0;    font-size:10px}.hero-product-title{    font-size:38px;    font-weight:900;    line-height:1.15;    margin:45px 0 12px}.hero-product-title span{    color:#4bb5ff}.hero-product-sub{    color:#91a9bc;    font-size:12px;    line-height:2}.hero-chip-row{    display:flex;    flex-wrap:wrap;    gap:8px;    margin-top:24px}.hero-chip{    padding:9px 12px;    border-radius:9px;    background:rgba(255,255,255,.055);    border:1px solid rgba(255,255,255,.08);    font-size:9px;    color:#c6d8e6}.section-kicker{    color:var(--blue);    font-size:11px;    font-weight:900;    letter-spacing:.5px;    margin-bottom:10px}.content-grid{    display:grid;    grid-template-columns:1.05fr .95fr;    gap:55px;    align-items:center}.content-grid.reverse{    grid-template-columns:.95fr 1.05fr}.text-block h2{    font-size:38px;    line-height:1.45;    margin-bottom:17px;    color:#071b31}.text-block h2 span{    color:var(--blue)}.text-block p{    font-size:13px;    line-height:2.25;    color:#718292;    margin-bottom:14px}.soft-box{    padding:20px;    border-radius:16px;    background:#f5f9fd;    border:1px solid #e3edf5;    margin-top:22px}.soft-box strong{    display:block;    font-size:13px;    margin-bottom:7px}.soft-box p{    margin:0;    font-size:11px}.pill-list{    display:grid;    grid-template-columns:repeat(2,1fr);    gap:10px;    margin-top:22px}.pill{    padding:13px 14px;    border-radius:12px;    background:#f7faff;    border:1px solid #e3edf5;    font-size:11px;    color:#30485e}.pill b{    color:#087be2;    margin-left:5px}.dark-panel{    background:linear-gradient(145deg,#06182a,#0b3557);    border-radius:26px;    padding:28px;    color:#fff;    box-shadow:var(--shadow)}.dark-panel h3{    font-size:16px;    margin-bottom:22px}.dark-item{    display:flex;    gap:13px;    align-items:flex-start;    padding:14px 0;    border-bottom:1px solid rgba(255,255,255,.07)}.dark-item:last-child{    border-bottom:0}.dark-num{    width:31px;    height:31px;    border-radius:9px;    display:flex;    align-items:center;    justify-content:center;    background:rgba(24,145,255,.14);    color:#62bdff;    font-size:10px;    flex-shrink:0}.dark-item strong{    display:block;    font-size:11px;    margin-bottom:5px}.dark-item span{    display:block;    color:#7891a5;    font-size:9px;    line-height:1.8}.cards-3{    display:grid;    grid-template-columns:repeat(3,1fr);    gap:16px}.service-card{    padding:26px;    border-radius:18px;    background:#fff;    border:1px solid #e4edf5;    transition:.3s;    min-height:205px}.service-card:hover{    transform:translateY(-6px);    box-shadow:0 20px 50px rgba(9,42,72,.09)}.service-icon{    width:49px;    height:49px;    border-radius:13px;    display:flex;    align-items:center;    justify-content:center;    background:linear-gradient(135deg,#e8f5ff,#d7ecff);    color:#0878db;    font-weight:900;    margin-bottom:18px}.service-card h3{    font-size:15px;    margin-bottom:9px}.service-card p{    font-size:10px;    line-height:2;    color:#738597}.service-card ul{    list-style:none;    margin-top:12px}.service-card li{    font-size:9px;    color:#718292;    margin:7px 0}.service-card li:before{    content:"✓";    color:#1687ff;    font-weight:900;    margin-left:6px}.process{    display:grid;    grid-template-columns:repeat(7,1fr);    gap:8px;    margin-top:28px}.process-step{    padding:17px 10px;    border-radius:12px;    background:#fff;    border:1px solid #e1ebf3;    text-align:center;    position:relative}.process-step b{    display:block;    color:#1487f5;    font-size:10px;    margin-bottom:8px}.process-step span{    font-size:9px;    color:#526b80;    line-height:1.7}.industry-band{    background:#06111e;    color:#fff;    position:relative;    overflow:hidden}.industry-band:before{    content:"";    position:absolute;    width:500px;    height:500px;    border-radius:50%;    background:rgba(17,126,255,.1);    filter:blur(100px);    left:-160px;    top:-180px}.industry-band .section-title{    color:#fff}.industry-band .section-description{    color:#7890a4}.industry-grid{    display:grid;    grid-template-columns:1fr 1fr;    gap:18px;    position:relative;    z-index:2}.industry-card{    padding:28px;    border-radius:20px;    background:rgba(255,255,255,.045);    border:1px solid rgba(255,255,255,.08)}.industry-card h3{    font-size:17px;    margin-bottom:10px}.industry-card p{    font-size:10px;    line-height:2;    color:#7d96a9}.media-showcase{    display:grid;    grid-template-columns:1fr 1fr;    gap:18px;    margin-top:26px;}.media-card{    background:#fff;    border:1px solid #e1eaf2;    border-radius:22px;    padding:12px;    box-shadow:0 15px 45px rgba(7,35,58,.07);}.media-card h3{    font-size:13px;    margin:10px 5px 13px;}.media-frame{    width:100%;    height:310px;    border-radius:17px;    overflow:hidden;    position:relative;    background:#071b2d;    isolation:isolate;}.media-frame img{    width:100%;    height:100%;    display:block;    object-fit:contain;    object-position:center center;}.gif-window{    width:100%;    height:100%;    position:relative;    overflow:hidden;    display:flex;    justify-content:center;    align-items:center;}.gif-window img{    width:100%;    height:100%;    object-fit:contain;    object-position:center center;    transform:scale(1.15);}.gif-window:before{    content:"";    position:absolute;    z-index:4;    right:0;    top:0;    bottom:0;    width:18%;    background:linear-gradient(        90deg,        transparent,        rgba(7,27,45,.92)    );    pointer-events:none;}.media-note{    font-size:9px;    color:#7b8fa1;    padding:0 5px 4px;}.media-placeholder{    width:100%;    height:100%;    display:flex;    align-items:center;    justify-content:center;    text-align:center;    color:#8ca7bc;    font-size:11px;    line-height:2;    padding:30px;    background:        radial-gradient(            circle at 30% 30%,            rgba(39,160,255,.17),            transparent 45%        ),        #071b2d;}.why-grid{    display:grid;    grid-template-columns:repeat(3,1fr);    gap:15px}.why-card{    padding:24px;    border-radius:17px;    background:#f7faff;    border:1px solid #e2ebf3}.why-card b{    display:block;    color:#1687ff;    font-size:11px;    margin-bottom:17px}.why-card h3{    font-size:14px;    margin-bottom:8px}.why-card p{    font-size:10px;    color:#738597;    line-height:2}.resources{    background:#f5f9fd}.resource-tags{    display:flex;    flex-wrap:wrap;    gap:10px;    margin-top:25px}.resource-tag{    padding:11px 14px;    border-radius:10px;    background:#fff;    border:1px solid #dfe9f1;    color:#506a80;    font-size:10px}.contact-grid{    display:grid;    grid-template-columns:1fr 1fr;    gap:20px}.contact-card{    padding:28px;    border-radius:22px;    background:#fff;    border:1px solid #e2ebf2}.contact-card h3{    font-size:17px;    margin-bottom:11px}.contact-card p{    font-size:11px;    line-height:2;    color:#718292}.contact-list{    list-style:none;    margin-top:18px}.contact-list li{    font-size:10px;    color:#536d82;    margin:10px 0}.contact-list li:before{    content:"•";    color:#1687ff;    font-size:18px;    vertical-align:-2px;    margin-left:7px}.section-dark{    background:#06111e;    color:#fff}.section-dark .text-block h2{    color:#fff}.section-dark .text-block p{    color:#7d96aa}.section-dark .soft-box{    background:rgba(255,255,255,.045);    border-color:rgba(255,255,255,.08)}.section-dark .soft-box strong{    color:#fff}.section-dark .soft-box p{    color:#7891a5}.brand-line{    display:flex;    flex-wrap:wrap;    gap:8px;    margin-top:18px}.brand-line span{    padding:9px 12px;    border-radius:9px;    background:#eef6fc;    color:#3c5870;    font-size:9px}.mobile-menu-btn{    display:none;    width:40px;    height:39px;    border-radius:9px;    border:1px solid rgba(255,255,255,.1);    background:rgba(255,255,255,.07);    color:#fff;    cursor:pointer}@media(max-width:1050px){    .content-grid,    .content-grid.reverse{        grid-template-columns:1fr    }    .cards-3{        grid-template-columns:repeat(2,1fr)    }    .industry-grid,    .contact-grid{        grid-template-columns:1fr    }    .process{        grid-template-columns:repeat(4,1fr)    }    .media-showcase{        grid-template-columns:1fr    }    .why-grid{        grid-template-columns:repeat(2,1fr)    }    .mobile-menu-btn{        display:block    }    .nav-right{        margin-right:auto;        margin-left:10px    }}@media(max-width:700px){    .cards-3,    .why-grid,    .pill-list{        grid-template-columns:1fr    }    .process{        grid-template-columns:repeat(2,1fr)    }    .media-frame{        height:240px    }    .hero-product-card{        min-height:350px    }    .hero-product-title{        font-size:29px    }    .text-block h2{        font-size:30px    }    .hero-mana .hero-stats{        flex-wrap:wrap    }} .contact-details{    margin-top:16px;    display:grid;    gap:9px;    font-size:11px;    color:#536d82}.contact-details div{    line-height:1.8}.contact-details strong{    color:#30485e}.contact-details a{    color:#087be2}.section-dark .contact-details{    color:#a7bdcf}.section-dark .contact-details strong{    color:#fff}.section-dark .contact-details a{    color:#62bdff}body.lang-en{    font-family:"Segoe UI",Arial,Tahoma,sans-serif;    direction:ltr;    text-align:left}body.lang-en .hero-text{    text-align:left}body.lang-en .nav-links a:after{    left:0;    right:auto}body.lang-en .language-menu{    right:0;    left:auto}body.lang-en .language-menu button{    text-align:left}body.lang-en .hero-buttons,body.lang-en .hero-stats{    justify-content:flex-start}body.lang-en .text-block,body.lang-en .intro-content,body.lang-en .contact-card,body.lang-en .footer-brand,body.lang-en .footer-column{    text-align:left}body.lang-en .pill-list,body.lang-en .brand-line{    direction:ltr}body.lang-en .contact-list{    padding-left:18px;    padding-right:0}body.lang-en .hero h1{    letter-spacing:-.5px}.language-menu button[aria-pressed="true"]{    background:rgba(19,135,245,.18);    color:#fff}@media(max-width:1050px){    body.lang-en .nav-links{        right:15px;        left:15px    }}/* =========================================================
   MOBILE NAVBAR FIX
   ========================================================= */
@media (max-width:700px){
    .navbar{height:70px;}
    .nav-container{width:calc(100% - 24px);gap:10px;}
    .mana-logo{min-width:0;flex:1 1 auto;gap:8px;overflow:hidden;}
    .mana-mark{width:36px;height:36px;min-width:36px;max-width:36px;}
    .mana-logo-name{min-width:0;overflow:hidden;}
    .mana-logo-name strong{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    .mana-logo-name small{font-size:8px;white-space:nowrap;}
    .nav-right{flex:0 0 auto;gap:7px;margin-right:0;}
    .language-box{flex:0 0 auto;}
    .language-button{height:36px;padding:0 9px;gap:5px;font-size:10px;white-space:nowrap;}
    .mobile-menu,.menu-toggle{flex:0 0 auto;}
}
@media (max-width:420px){
    .nav-container{width:calc(100% - 18px);gap:6px;}
    .mana-logo{gap:6px;}
    .mana-mark{width:32px;height:32px;min-width:32px;max-width:32px;}
    .mana-logo-name strong{font-size:13px;}
    .mana-logo-name small{display:none;}
    .language-button{padding:0 7px;font-size:9px;}
    .nav-right{gap:5px;}
}
/* Accessibility and layout fixes layered over the existing brand styles. */
html { scroll-padding-top: 88px; }
body { overflow-wrap: break-word; }
#main-content { scroll-margin-top: 88px; }
:focus-visible { outline: 3px solid #24c8e8; outline-offset: 3px; }
.skip-link { position: fixed; z-index: 10001; top: -100px; inset-inline-start: 14px;
  padding: 12px 16px; color: #06182a; background: #fff; border-radius: 8px; }
.skip-link:focus { top: 8px; }
.nav-links[hidden] { display: none !important; }
@media (max-width: 1050px) {
  .nav-links.is-open { display: flex !important; position: absolute;
    top: 100%; inset-inline: 15px; padding: 15px; flex-direction: column;
    align-items: stretch; gap: 0; background: #071b2d;
    border: 1px solid rgba(255,255,255,.08); border-radius: 14px; }
}
@media (max-width: 700px) {
  html { scroll-padding-top: 76px; }
  .nav-links.is-open { top: 100%; }
  .hero h1 { font-size: clamp(32px, 10vw, 42px); }
  .section-description, .hero-description { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important;
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; }
}