:root{--navy:#061a31;
      --navy2:#031225;
      --blue:#087ff5;
      --blue2:#23a1ff;
      --gold:#f2b24b;
      --white:#fff;--ink:#0b2342;
      --muted:#657589;
      --line:#e6edf5;
      --soft:#f4f8fc}

    *{box-sizing:border-box;
     margin:0;padding:0}

     html{scroll-behavior:auto}

body{font-family:Inter,
     Arial,sans-serif;
     color:var(--ink);
     background:#fff;
     line-height:1.6;overflow-x:hidden}

body.loading{overflow:hidden}

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

button,input{font:inherit}

.container{width:min(1180px,92%);margin:auto}

 .loader{position:fixed;
         inset:0;
         background:var(--navy2);
         z-index:5000;display:grid;
         place-content:center;gap:28px}

 .loader-logo{display:flex;
             align-items:center;
             gap:10px;color:#fff;
             font-size:22px}

.loader-logo span{color:var(--blue)}

.loader-line{height:2px;
             width:180px;
             background:#ffffff18;
             overflow:hidden}
    
.loader-line span{display:block;
                  width:40%;
                  height:100%;
                  background:var(--blue);
                  transform:translateX(-100%)}
    
.logo{display:flex !important;
      align-items:center;
      justify-content: start;
      gap:9px;
      color:#fff;
      font-size:18px;
      letter-spacing:-.5px}


    
.logo span:not(.logo-mark){color:var(--blue2)}

.logo-mark{width:29px;
           height:29px;
           /* border:5px solid var(--blue);
           border-radius:50%; */
           position:relative;
           display:inline-block}
    
.logo-mark:after{content:"";
                 position:absolute;
                 width:14px;
                 height:5px;
                 background:var(--gold);
                 right:-9px;
                 bottom:-2px;
                 transform:rotate(45deg);
                 border-radius:4px}
    
.logo-mark i{position:absolute;
             width:7px;
             height:7px;
             background:#fff;
             border-radius:50%;
             left:6px;top:6px}
    
.site-header{position:fixed;
             top:0;
             left:0;
             width:100%;
             height:78px;
             z-index:1000;
             transition:.35s}
    
.site-header.scrolled{background:#041a31eF;
                      backdrop-filter:blur(16px);
                      box-shadow:0 12px 35px #0003}

.nav-wrap{height:100%;
          display:flex;
          align-items:center;
          justify-content:space-between}
        
.nav{display:flex;
     align-items:center;
     gap:28px;color:#fff;
     font-size:12px;
     font-weight:600}
            
 .nav a{opacity:.88;
       transition:.25s}
       
.nav a:hover{color:var(--blue2);
             opacity:1}
             
.nav-cta{background:var(--blue);
         padding:12px 19px;
         border-radius:9px;
         box-shadow:0 8px 22px #087ff533}
         
.menu-btn{display:none;
          border:0;background:transparent}
          
.menu-btn span{display:block;
               width:25px;
               height:2px;
               background:#fff;margin:5px}
               
.cursor,.cursor-dot{position:fixed;
                    pointer-events:none;
                    z-index:6000;
                    transform:translate(-50%,-50%);
                    display:none}

.cursor{width:34px;
        height:34px;
        border:1px solid #23a1ff80;
        border-radius:50%}
        
.cursor-dot{width:5px;
            height:5px;
            background:var(--blue2);
            border-radius:50%}
    
.hero{min-height:760px;
      position:relative;
      background:radial-gradient(circle at 80% 25%,#0b3f76 0,#071f3b 35%,#031225 78%);
      color:#fff;overflow:hidden}
    
.hero-grid{position:absolute;
           inset:0;
           opacity:.16;
           background-image:linear-gradient(#fff 1px,transparent 1px),linear-gradient(90deg,#fff 1px,transparent 1px);
           background-size:70px 70px;
           mask-image:linear-gradient(to right,transparent,#000 35%,#000 100%)}
           
.hero-orb{position:absolute;
          border-radius:50%;
          filter:blur(90px);
          opacity:.28}
          
.orb-one{width:430px;
    height:430px;
    background:var(--blue);right:10%;top:20%}
    
.orb-two{width:280px;
         height:280px;
         background:#4f2cff;
         left:5%;bottom:-100px}
         
.hero-inner{min-height:760px;
            padding-top:105px;
            display:grid;
            grid-template-columns:1fr 1fr;
            align-items:center;
            gap:55px;position:relative;
            z-index:2}
            
.eyebrow{font-size:10px;
         letter-spacing:1.6px;
         font-weight:800;
         color:var(--blue);
         margin-bottom:14px}
    
.hero .eyebrow{color:#69b9ff}

.hero-title{font-family:Manrope,Inter,sans-serif;
            font-size:clamp(45px,5.5vw,74px);
            line-height:1.02;letter-spacing:-3.5px;max-width:700px}
            
.hero-title span{color:#fff}

.hero-title em{font-style:normal;
               color:var(--blue2)}
               
.hero-lead{color:#b6c9dd;
           max-width:560px;
           font-size:14px;
           margin:24px 0 29px}
           
.hero-actions{display:flex;
              align-items:center;
              gap:25px}
              
.btn{display:inline-flex;
     align-items:center;
     justify-content:center;
     gap:12px;
     padding:13px 22px;
     border-radius:9px;
     font-size:12px;
     font-weight:800;
     transition:.3s}
    
.btn-blue{background:var(--blue);
           color:#fff;
           box-shadow:0 14px 35px #087ff540}
              
.btn-blue:hover{background:var(--blue2);
    transform:translateY(-2px)}
    
.btn-white{background:#fff;
           color:var(--blue)}
           
.text-link{font-size:12px;
           font-weight:700;
           color:#fff}
           
.text-link span{color:var(--blue2);
                margin-left:8px}
    
.hero-meta{display:flex;
           align-items:center;
           gap:10px;color:#89a0b8;
           font-size:10px;
           margin-top:35px}
           
.meta-line{width:32px;
           height:1px;
           background:var(--gold)}
           
.dot{color:var(--gold)}

.hero-media{position:relative;
            height:520px}
            
.image-frame{height:520px;
             border-radius:45% 7% 7% 45%;
             overflow:hidden;
             border:1px solid #23a1ff77;
             box-shadow:0 35px 80px #0007;
             transform:rotate(1deg)}
             
.image-frame img{width:100%;
                 height:100%;
                 object-fit:cover;
                 filter:saturate(.88)}
                 
.image-frame:after{content:"";
                   position:absolute;
                   inset:0;
                   background:linear-gradient(90deg,#061a31aa,transparent 45%)}
                   
.image-ring{position:absolute;
            border:1px solid var(--blue);
            border-radius:50%;
            pointer-events:none}
            
.ring-a{width:500px;
        height:500px;
        right:-90px;
        top:10px}
        
.ring-b{width:560px;
        height:560px;
        right:-125px;
        top:-20px;
        border-color:#f2b24b66}
        
.floating-note{position:absolute;
               right:-25px;
               bottom:25px;
               display:flex;
               align-items:center;
               gap:12px;
               background:#06294ceF;
               border:1px solid #ffffff1a;
               padding:13px 17px;
               border-radius:12px;
               box-shadow:0 18px 45px #0005}
               
.note-icon{width:30px;
           height:30px;
           border-radius:50%;
           display:grid;
           place-items:center;
           background:#087ff5;
           color:#fff}
           
.floating-note b,.floating-note small{display:block}

.floating-note b{font-size:11px}

.floating-note small{font-size:9px;color:#8fa5bb}

.scroll-cue{position:absolute;
            bottom:28px;left:50%;
            transform:translateX(-50%);
            display:flex;
            flex-direction:column;
            align-items:center;
            gap:9px;
            color:#7890aa;
            font-size:8px;
            letter-spacing:2px}
            
.scroll-cue i{display:block;
              width:1px;
              height:34px;
              background:linear-gradient(var(--blue),transparent)}
              
.service-pills{position:relative;margin-top:-52px;z-index:5}

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

.pill-card{background:#fff;
           border:1px solid var(--line);
           box-shadow:0 18px 50px #08203c14;
           border-radius:13px;padding:23px;
           display:grid;
           grid-template-columns:45px 1fr auto;
           align-items:center;gap:14px}
           
.pill-icon{width:42px;
           height:42px;
           border-radius:50%;
           background:#ebf6ff;
           color:var(--blue);
           display:grid;
           place-items:center;
           font-size:22px}
           
.pill-card h3{font-size:13px;
              margin-bottom:4px}
              
.pill-card p{font-size:10px;
             color:var(--muted)}
             
.pill-card>span{font-size:10px;
                color:#a6b7c8}
                
.section{padding:105px 0}

.about-layout{display:grid;
              grid-template-columns:.8fr 1.4fr;
              gap:90px;align-items:center}
              
.about-copy h2,.section-head h2{font-family:Manrope,Inter,sans-serif;
                                font-size:40px;line-height:1.12;
                                letter-spacing:-1.8px}
                                
.about-copy h2 span,.section-head h2 span{color:var(--blue)}

.about-copy p{font-size:13px;
              color:var(--muted);
              margin:20px 0 25px;
              max-width:490px}
              
.arrow-btn{display:inline-flex;
           gap:13px;align-items:center;
           color:var(--blue);
           font-size:11px;
           font-weight:800;
           border-bottom:1px solid #087ff550;
           padding-bottom:5px}
           
.benefit-grid{display:grid;
              grid-template-columns:repeat(2,1fr);gap:0}
              
.benefit{padding:24px 25px;
         border-left:1px solid var(--line);
         border-bottom:1px solid var(--line);
         position:relative;min-height:205px}
         
.benefit:nth-child(2n){border-right:1px solid var(--line)}

.benefit:nth-child(n+3){border-bottom:0}

.number{font-size:9px;color:#9eb0c1;
        letter-spacing:1px}
        
.big-icon{font-size:34px;
          color:var(--blue);
          margin:15px 0}
          
.benefit h3{font-size:13px;
            margin-bottom:8px}

.benefit p{font-size:10px;
           color:var(--muted)}

.dark-section{background:var(--navy2);
              color:#fff;
              position:relative;
              overflow:hidden}
              
.dark-section:before{content:"";
                     position:absolute;
                     width:550px;
                     height:550px;
                     border-radius:50%;
                     border:1px solid #087ff522;
                     right:-280px;
                     top:-240px}
                     
.section-head{margin-bottom:45px}

.section-head.center{text-align:center;
                     max-width:800px;
                     margin-left:auto;
                     margin-right:auto}
                     
.section-head p{font-size:12px;
                color:var(--muted);
                max-width:600px}

.dark-section .section-head p{color:#91a8c0;
                              margin:auto}
                              
.gold{color:var(--gold)}

.why-grid{display:grid;
grid-template-columns:repeat(4,1fr);
border-top:1px solid #ffffff18}

.why-card{padding:28px 25px 15px;
    border-right:1px solid #ffffff18;
    position:relative;min-height:255px}
    
.why-card:last-child{border-right:0}

.why-no{position:absolute;
    right:18px;top:22px;
    color:#55708c;
    font-size:9px}
    
.why-symbol{font-size:34px;
    color:var(--blue);
    margin-bottom:25px}
    
.why-card h3{font-size:13px;
    margin-bottom:10px}
    
.why-card p{font-size:10px;
    color:#8ea5bd}
    
.services .section-head{display:grid;
    grid-template-columns:1fr 1.2fr;gap:50px;
    align-items:end}
    
.services .section-head p{align-self:end}

.services-grid{display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:0;border-top:1px solid var(--line);
    border-left:1px solid var(--line)}
    
.service-card{position:relative;
    min-height:270px;
    padding:27px;
    border-right:1px solid var(--line);
    border-bottom:1px solid var(--line);
    transition:.35s;overflow:hidden}
    
.service-card:before{content:"";
    position:absolute;
    width:140px;
    height:140px;
    border-radius:50%;
    background:#087ff50c;
    right:-50px;
    top:-50px;
    transition:.4s}
    
    .service-card:hover{background:#f8fbfe}
    
    .service-card:hover:before{transform:scale(1.8)}
    
    .service-no{position:absolute;
        right:24px;
        top:25px;
        color:#a7b7c7;
        font-size:9px}
        
    .service-icon{width:45px;
        height:45px;
        border-radius:11px;
        background:#edf7ff;
        color:var(--blue);
        display:grid;
        place-items:center;
        font-size:22px;
        margin-bottom:25px;
        position:relative}
        
    .service-card h3{font-size:14px;
        margin-bottom:11px}
        
    .service-card p{font-size:11px;
        color:var(--muted);
        max-width:280px}
        
    .service-card a{display:inline-flex;
        gap:8px;color:var(--blue);
        font-size:10px;font-weight:800;
        margin-top:25px}
        
    .insight-banner{background:linear-gradient(110deg,#06203c,#073d73);
        color:#fff;
        padding:100px 0;
        position:relative;
        overflow:hidden}
        
    .insight-banner:after{content:"";
        position:absolute;width:500px;
        height:500px;border-radius:50%;
        border:1px solid #23a1ff33;
        right:-180px;top:-130px}


.insight-layout{display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;gap:60px}

.insight-copy h2{font-family:Manrope;
    font-size:43px;
    line-height:1.1;
    letter-spacing:-1.8px;
    max-width:620px}

.insight-copy h2 span{color:var(--blue2)}

.insight-copy p{color:#9eb4ca;
    font-size:13px;
    max-width:520px;
    margin-top:20px}

.insight-visual{height:360px;
    position:relative;
    display:grid;
    place-items:center}

.insight-circle{width:130px;
    height:130px;
    border-radius:50%;
    background:linear-gradient(145deg,var(--blue),#0458b2);
    display:grid;
    place-items:center;
    font-family:Manrope;
    font-size:35px;
    font-weight:800;
    box-shadow:0 0 70px #087ff566;
    position:relative;z-index:3}

.orbit{position:absolute;
    border:1px solid #23a1ff45;
    border-radius:50%;display:grid;
    place-items:start center;padding-top:10px;
    color:#a8c3dc;
    font-size:9px;
    letter-spacing:1px}

.orbit span{background:#062a4d;
    padding:5px 9px;
    border-radius:20px}

.orbit-1{width:210px;
    height:210px}
    
.orbit-2{width:290px;
    height:290px}

.orbit-3{width:370px;
    height:370px}

.process-track{display:grid;
    grid-template-columns:1fr auto 1fr auto 1fr auto 1fr auto 1fr;
    align-items:center;
    gap:12px}

.process-track>i{font-style:normal;
    color:#a8b8c9;
    font-size:22px}

.process-card{text-align:center}

.process-card b{display:grid;
    place-items:center;
    width:52px;
    height:52px;
    margin:0 auto 15px;
    border-radius:50%;
    background:#eaf6ff;
    color:var(--blue);
    font-size:11px}

.process-card h3{font-size:12px;
    margin-bottom:8px}

.process-card p{font-size:10px;
    color:var(--muted)}

.brand-section{background:var(--navy2);
    color:#fff;
    padding:0;
    overflow:hidden}

.brand-layout{display:grid;
    grid-template-columns:280px 1fr 290px;
    gap:45px;
    align-items:center;
    min-height:310px}

.brand-photo{height:230px;
    border-radius:50% 12px 12px 50%;
    overflow:hidden;
    border:1px solid #087ff5}

.brand-photo img{width:100%;
    height:100%;
    object-fit:cover}

.brand-copy h2{font-family:Manrope;
    font-size:37px;
    letter-spacing:-1.5px}

.brand-copy h2 span{color:var(--blue2)}

.brand-copy p{color:#9db2c8;
    font-size:11px;
    margin:15px 0}

.brand-tags{display:flex;
    gap:7px;
    flex-wrap:wrap}

.brand-tags span{border:1px solid #ffffff1d;
    border-radius:20px;
    padding:6px 10px;
    font-size:8px;
    color:#b7c9da}

.language-box{border-left:1px solid #ffffff1a;
    padding-left:30px}

.language{display:flex;
    align-items:center;
    gap:11px;
    border:1px solid #ffffff1c;
    border-radius:10px;
    padding:10px 12px;
    margin-top:10px}

.language b{font-size:20px}

.language strong,.language small{display:block}

.language strong{font-size:11px}

.language small{font-size:8px;
    color:#91a8c0}

.improvement-grid{display:grid;
    grid-template-columns:repeat(4,1fr);gap:20px}

.improve{padding:25px;
    border:1px solid var(--line);
    border-radius:12px;
    transition:.3s}

.improve:hover{transform:translateY(-5px);
    box-shadow:0 18px 45px #0b234210}

.improve b{width:42px;height:42px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#eaf6ff;
    color:var(--blue);
    font-size:10px;
    margin-bottom:20px}

.improve h3{font-size:13px;
    margin-bottom:10px}

.improve p{font-size:10px;
    color:var(--muted)}

.contact-cta{padding:0 0 90px}

.cta-inner{background:linear-gradient(105deg,#0668d0,#0b8cff);
    border-radius:15px;
    padding:30px 38px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    color:#fff;
    box-shadow:0 25px 60px #087ff52b}

.cta-inner>div{display:flex;
    gap:20px;
    align-items:center}

.cta-icon{font-size:42px}

.cta-inner .eyebrow{color:#b9e0ff;
    margin-bottom:5px}

.cta-inner h2{font-family:Manrope;
    font-size:22px;
    line-height:1.2}

.cta-inner h2 span{color:#fff}

.cta-inner p{font-size:10px;
    color:#d8eeff;
    margin-top:7px}

.footer{background:#021022;
    color:#fff;
    padding:70px 0 22px}

.footer-grid{display:grid;
    grid-template-columns:1.45fr 1fr 1.25fr 1.15fr 1.3fr;gap:35px}

.footer-about>p{font-size:10px;
    color:#8298ae;
    max-width:280px;
    margin:18px 0}

.footer h4{font-size:11px;
    margin-bottom:16px}

.footer-grid>div>a,.footer-grid>div>p{display:block;
    font-size:9px;
    color:#8298ae;
    margin:9px 0}

.socials{display:flex;
    gap:8px}

.socials a{width:28px!important;
    height:28px;
    border:1px solid #ffffff19;
    border-radius:50%;
    display:grid!important;
    place-items:center;
    color:#9cb0c4!important;
    margin:0!important}

.footer-mail{color:var(--blue2)!important}

.copyright{border-top:1px solid #ffffff12;
    margin-top:50px;padding-top:18px;
    color:#5f748a;font-size:8px;
    display:flex;
    justify-content:space-between}

.cursor{display:none}

.reveal{opacity:0;transform:translateY(28px)}

@media(min-width:1100px){.cursor,.cursor-dot{display:block}}

@media(max-width:1000px){.hero-inner{grid-template-columns:1fr}

.hero-media{display:none}

.hero{min-height:680px}

.hero-inner{min-height:680px}

.pills-grid{grid-template-columns:1fr}

.about-layout{grid-template-columns:1fr;gap:50px}

.why-grid{grid-template-columns:1fr 1fr}

.services .section-head{grid-template-columns:1fr}

.services-grid{grid-template-columns:1fr 1fr}

.insight-layout{grid-template-columns:1fr}

.insight-visual{margin-top:-20px}

.process-track{grid-template-columns:1fr;
    gap:25px}

.process-track>i{display:none}

.brand-layout{grid-template-columns:220px 1fr}

.language-box{grid-column:1/-1;
    border-left:0;
    border-top:1px solid #ffffff1a;
    padding:25px 0 35px}

.improvement-grid{grid-template-columns:1fr 1fr}

.footer-grid{grid-template-columns:1.5fr 1fr 1fr}}

@media(max-width:720px){.site-header{height:68px}

.menu-btn{display:block}

.nav{display:none;
    position:absolute;
    top:68px;
    left:4%;
    right:4%;
    padding:18px;
    background:#041a31;
    flex-direction:column;
    align-items:stretch;
    border:1px solid #ffffff14;
    border-radius:12px;
    box-shadow:0 20px 45px #0005}

.nav.open{display:flex}

.nav-cta{text-align:center}

.hero-title{font-size:45px;
    letter-spacing:-2.4px}

.hero-inner{padding-top:105px}

.hero-actions{flex-wrap:wrap}

.service-pills{margin-top:-30px}

.about-layout{gap:35px}

.benefit-grid{grid-template-columns:1fr}

.benefit{border-right:1px solid var(--line)!important;
    border-bottom:1px solid var(--line)!important}

.benefit:last-child{border-bottom:0!important}

.why-grid{grid-template-columns:1fr}

.why-card{border-right:0;border-bottom:1px solid #ffffff18}

.why-card:last-child{border-bottom:0}

.services-grid{grid-template-columns:1fr}

.insight-copy h2{font-size:35px}

.insight-visual{height:300px}

.orbit-3{width:300px;
    height:300px}

.brand-layout{grid-template-columns:1fr}

.brand-photo{height:230px;
    border-radius:20px}

.language-box{grid-column:auto}

.improvement-grid{grid-template-columns:1fr}

.cta-inner{display:block;
    padding:27px}

.cta-inner>div{margin-bottom:24px}

.footer-grid{grid-template-columns:1fr 1fr}

.footer-about{grid-column:1/-1;}

.copyright{display:block;line-height:2}

.copyright span{display:block}

.floating-note{right:5px}

.scroll-cue{display:none}}

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

