/* ======================================================
   VARIABLES
====================================================== */

:root{

  --purple:#2b1b74;
  --purple-2:#3c278d;
  --purple-3:#5944a9;
  --purple-dark:#160d46;
  --purple-black:#0c0728;

  --red:#e5261f;
  --red-light:#ff534d;
  --red-dark:#bd1814;

  --white:#ffffff;

  --bg:#f5f6f9;
  --bg2:#eeeff5;

  --text:#1c2230;
  --muted:#707783;
  --line:#e2e4eb;

  --shadow:0 24px 70px rgba(28,18,83,.10);

}


/* ======================================================
   RESET
====================================================== */

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

html{
  scroll-behavior:smooth;
}

body{
  font-family:Inter,sans-serif;
  background:#fff;
  color:var(--text);
  overflow-x:hidden;
}

body.menu-open{
  overflow:hidden;
}

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

button{
  font:inherit;
}

img{
  display:block;
  width:100%;
}

svg{
  display:block;
}

.container{
  width:min(1320px,calc(100% - 56px));
  margin:auto;
}


/* ======================================================
   HEADER
====================================================== */

.site-header{

  position:fixed;
  left:0;
  right:0;
  top:0;

  z-index:1000;

  transition:
    background .35s ease,
    box-shadow .35s ease;

}

.site-header.scrolled{

  background:rgba(22,13,70,.94);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);

  box-shadow:
    0 10px 40px rgba(10,5,40,.18);

}

.header-inner{

  min-height:84px;

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

  gap:40px;

}

.logo{

  color:white;

  font-family:Manrope;
  font-size:26px;
  font-weight:800;

  letter-spacing:-1px;

  display:flex;
  align-items:center;

}

.logo span{
  color:var(--red);
}

.logo-mark{

  width:9px;
  height:9px;

  background:var(--red);

  margin-left:10px;

  transform:rotate(45deg);

}

.main-nav{

  display:flex;
  align-items:center;

  gap:30px;

}

.main-nav a{

  position:relative;

  font-size:12px;

  color:rgba(255,255,255,.72);

  transition:.25s;

}

.main-nav a:hover{
  color:white;
}

.main-nav a:not(.nav-cta):after{

  content:"";

  position:absolute;

  left:0;
  bottom:-10px;

  width:0;
  height:2px;

  background:var(--red);

  transition:.3s;

}

.main-nav a:hover:after{
  width:100%;
}

.lang{

  padding-left:22px;

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

}

.nav-cta{

  padding:12px 19px;

  border-radius:6px;

  background:var(--red);

  color:white!important;

  font-weight:600;

  box-shadow:
    0 8px 25px rgba(229,38,31,.2);

}

.nav-cta:hover{

  background:var(--red-dark);

  transform:translateY(-1px);

}

.menu-btn{

  display:none;

  width:46px;
  height:46px;

  border:0;
  border-radius:50%;

  background:rgba(255,255,255,.08);

  color:white;

  cursor:pointer;

}


/* ======================================================
   MOBILE NAV
====================================================== */

.mobile-nav{

  position:fixed;
  inset:0;

  z-index:900;

  background:var(--purple-dark);

  padding:120px 28px 50px;

  opacity:0;
  visibility:hidden;

  transform:translateY(-20px);

  transition:.4s cubic-bezier(.2,.75,.2,1);

}

.mobile-nav.open{

  opacity:1;
  visibility:visible;

  transform:none;

}

.mobile-nav a{

  display:block;

  padding:18px 0;

  color:#fff;

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

  font-family:Manrope;

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

  letter-spacing:-2px;

}


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

.hero{

  position:relative;

  min-height:850px;

  overflow:hidden;

  color:white;

  background:

    radial-gradient(
      circle at 78% 45%,
      rgba(88,67,169,.42),
      transparent 29%
    ),

    linear-gradient(
      120deg,
      #120a3b 0%,
      #21135e 50%,
      #2d1c78 100%
    );

}

.hero-grid-pattern{

  position:absolute;

  inset:0;

  opacity:.13;

  background-image:

    linear-gradient(
      rgba(255,255,255,.09) 1px,
      transparent 1px
    ),

    linear-gradient(
      90deg,
      rgba(255,255,255,.09) 1px,
      transparent 1px
    );

  background-size:72px 72px;

  mask-image:
    linear-gradient(
      90deg,
      #000 0%,
      rgba(0,0,0,.7) 55%,
      transparent 95%
    );

}

.hero-noise{

  position:absolute;
  inset:0;

  pointer-events:none;

  opacity:.25;

  background:
    radial-gradient(
      circle at 20% 70%,
      rgba(229,38,31,.12),
      transparent 25%
    );

}

.hero-inner{

  position:relative;

  z-index:3;

  min-height:850px;

  display:grid;

  grid-template-columns:
    1.05fr .95fr;

  align-items:center;

  gap:60px;

  padding-top:100px;

}


/* HERO COPY */

.hero-eyebrow{

  display:flex;

  align-items:center;

  gap:14px;

  color:#ff7872;

  font-size:10px;

  font-weight:700;

  letter-spacing:2px;

  text-transform:uppercase;

}

.hero-eyebrow:before{

  content:"";

  display:block;

  width:42px;
  height:2px;

  background:var(--red);

}

.hero-title{

  margin-top:28px;

  max-width:800px;

  font-family:Manrope;

  font-size:
    clamp(58px,6.7vw,104px);

  font-weight:700;

  line-height:.91;

  letter-spacing:-6px;

}

.hero-title span{
  color:var(--red-light);
}

.hero-text{

  margin-top:31px;

  max-width:640px;

  color:rgba(255,255,255,.62);

  font-size:16px;

  line-height:1.8;

}

.hero-buttons{

  display:flex;

  gap:14px;

  margin-top:37px;

}

.btn{

  min-height:52px;

  display:inline-flex;

  align-items:center;

  justify-content:center;

  gap:12px;

  padding:0 23px;

  border-radius:6px;

  font-size:12px;
  font-weight:600;

  transition:
    transform .3s,
    background .3s,
    color .3s,
    border .3s;

}

.btn svg{

  width:17px;
  height:17px;

  transition:.3s;

}

.btn:hover svg{
  transform:translateX(4px);
}

.btn-red{

  background:var(--red);

  color:#fff;

}

.btn-red:hover{

  background:var(--red-dark);

  transform:translateY(-2px);

}

.btn-light{

  color:white;

  background:rgba(255,255,255,.05);

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

  backdrop-filter:blur(10px);

}

.btn-light:hover{

  background:#fff;
  color:var(--purple-dark);

}

.hero-meta{

  display:flex;

  margin-top:52px;

}

.hero-meta-item{

  min-width:155px;

  padding-right:28px;

  margin-right:28px;

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

}

.hero-meta-item:last-child{
  border:0;
}

.hero-meta strong{

  display:block;

  font-family:Manrope;

  font-size:17px;

}

.hero-meta small{

  display:block;

  margin-top:5px;

  color:
    rgba(255,255,255,.36);

  font-size:9px;

  letter-spacing:.8px;

  text-transform:uppercase;

}


/* ======================================================
   SOPHISTICATED CSS 3D HERO
====================================================== */

.hero-visual{

  position:relative;

  height:650px;

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

  perspective:1500px;

}

.model-stage{

  position:relative;

  width:520px;
  height:520px;

  transform-style:preserve-3d;

  transition:
    transform .15s ease-out;

}


/* technical rings */

.tech-ring{

  position:absolute;

  left:50%;
  top:50%;

  border-radius:50%;

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

  transform-style:preserve-3d;

}

.tech-ring.ring-1{

  width:480px;
  height:480px;

  margin:-240px;

  transform:rotateX(72deg);

  animation:ring1 24s linear infinite;

}

.tech-ring.ring-2{

  width:400px;
  height:400px;

  margin:-200px;

  border-color:
    rgba(229,38,31,.24);

  transform:rotateY(75deg);

  animation:ring2 19s linear infinite;

}

@keyframes ring1{

  to{
    transform:
      rotateX(72deg)
      rotateZ(360deg);
  }

}

@keyframes ring2{

  to{
    transform:
      rotateY(75deg)
      rotateZ(-360deg);
  }

}

.ring-node{

  position:absolute;

  top:-5px;
  left:50%;

  width:10px;
  height:10px;

  border-radius:50%;

  background:var(--red);

  box-shadow:
    0 0 24px rgba(255,66,58,.8);

}


/* building / structural model */

.structure{

  position:absolute;

  left:50%;
  top:50%;

  width:300px;
  height:340px;

  margin-left:-150px;
  margin-top:-170px;

  transform-style:preserve-3d;

  transform:
    rotateX(-10deg)
    rotateY(-24deg)
    rotateZ(2deg);

  animation:
    structureFloat
    7s ease-in-out infinite;

}

@keyframes structureFloat{

  0%,100%{
    transform:
      translateY(0)
      rotateX(-10deg)
      rotateY(-24deg);
  }

  50%{
    transform:
      translateY(-15px)
      rotateX(-7deg)
      rotateY(-17deg);
  }

}


/* floors */

.floor{

  position:absolute;

  left:0;

  width:300px;
  height:170px;

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

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.035),
      rgba(86,66,164,.06)
    );

  transform-style:preserve-3d;

}

.floor:nth-child(1){
  top:0;
  transform:rotateX(72deg) translateZ(0);
}

.floor:nth-child(2){
  top:55px;
  transform:rotateX(72deg) translateZ(10px);
}

.floor:nth-child(3){
  top:110px;
  transform:rotateX(72deg) translateZ(20px);
}

.floor:nth-child(4){
  top:165px;
  transform:rotateX(72deg) translateZ(30px);
}

.floor:nth-child(5){
  top:220px;
  transform:rotateX(72deg) translateZ(40px);
}


/* columns */

.column{

  position:absolute;

  width:2px;
  height:280px;

  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,.15),
      rgba(255,255,255,.65),
      rgba(255,255,255,.15)
    );

  transform-origin:top;

}

.c1{
  left:0;
  top:34px;
}

.c2{
  left:74px;
  top:34px;
}

.c3{
  left:149px;
  top:34px;
}

.c4{
  left:224px;
  top:34px;
}

.c5{
  right:0;
  top:34px;
}


/* diagonal beams */

.beam{

  position:absolute;

  width:290px;
  height:1px;

  left:5px;

  background:
    rgba(229,38,31,.65);

  transform-origin:left center;

  box-shadow:
    0 0 10px
    rgba(229,38,31,.15);

}

.b1{
  top:100px;
  transform:rotate(27deg);
}

.b2{
  top:210px;
  transform:rotate(-27deg);
}

.b3{

  width:170px;

  left:68px;
  top:150px;

  transform:rotate(90deg);

  background:
    rgba(255,255,255,.25);

}


/* center glass core */

.core{

  position:absolute;

  width:110px;
  height:250px;

  left:95px;
  top:40px;

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

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.05),
      rgba(91,68,180,.15)
    );

  backdrop-filter:blur(1px);

}

.core:after{

  content:"";

  position:absolute;

  inset:20px;

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

}


/* red structural nodes */

.struct-node{

  position:absolute;

  width:8px;
  height:8px;

  border-radius:50%;

  background:var(--red-light);

  box-shadow:
    0 0 18px
    rgba(255,66,58,.7);

}

.node1{
  left:-3px;
  top:70px;
}

.node2{
  right:-3px;
  top:120px;
}

.node3{
  left:145px;
  bottom:15px;
}


/* technical labels */

.tech-label{

  position:absolute;

  color:
    rgba(255,255,255,.37);

  font-family:
    "Courier New",monospace;

  font-size:9px;

  line-height:1.55;

  letter-spacing:.7px;

  text-transform:uppercase;

}

.tech-label strong{

  display:block;

  color:
    rgba(255,255,255,.75);

  font-weight:400;

}

.tech-label.a{

  left:-2%;
  top:16%;

}

.tech-label.b{

  right:-3%;
  top:22%;

  text-align:right;

}

.tech-label.c{

  right:4%;
  bottom:15%;

  text-align:right;

}

.tech-cross{

  position:absolute;

  width:40px;
  height:40px;

  left:3%;
  bottom:20%;

}

.tech-cross:before,
.tech-cross:after{

  content:"";

  position:absolute;

  background:
    rgba(255,255,255,.25);

}

.tech-cross:before{

  width:40px;
  height:1px;

  top:20px;

}

.tech-cross:after{

  width:1px;
  height:40px;

  left:20px;

}


/* ======================================================
   TRUST BAR
====================================================== */

.trust-bar{

  position:relative;
  z-index:20;

  background:#fff;

  box-shadow:
    0 18px 55px
    rgba(23,14,68,.08);

}

.trust-grid{

  display:grid;

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

}

.trust-item{

  min-height:104px;

  display:flex;
  align-items:center;

  gap:16px;

  padding:25px 22px;

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

}

.trust-item:last-child{
  border:0;
}

.icon-box{

  width:47px;
  height:47px;

  flex:none;

  display:grid;
  place-items:center;

  border-radius:12px;

  background:
    rgba(43,27,116,.07);

  color:var(--purple);

  transition:.3s;

}

.icon-box svg{

  width:22px;
  height:22px;

}

.trust-item:hover .icon-box{

  color:white;
  background:var(--purple);

  transform:
    rotate(-5deg)
    scale(1.05);

}

.trust-item strong{

  display:block;

  color:var(--purple-dark);

  font-family:Manrope;

  font-size:14px;

}

.trust-item span{

  display:block;

  margin-top:4px;

  color:var(--muted);

  font-size:10px;

}


/* ======================================================
   GENERAL SECTIONS
====================================================== */

section.section{
  padding:120px 0;
}

.section-kicker{

  color:var(--red);

  font-size:10px;

  font-weight:700;

  letter-spacing:1.8px;

  text-transform:uppercase;

  margin-bottom:15px;

}

.section-heading{

  display:flex;

  justify-content:space-between;
  align-items:flex-end;

  gap:60px;

  margin-bottom:60px;

}

.section-heading h2{

  max-width:750px;

  color:var(--purple-dark);

  font-family:Manrope;

  font-size:
    clamp(40px,4vw,59px);

  font-weight:600;

  line-height:1.04;

  letter-spacing:-3px;

}

.section-heading > p{

  max-width:460px;

  color:var(--muted);

  line-height:1.75;

  font-size:14px;

}


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

.about{
  background:var(--bg);
}

.about-grid{

  display:grid;

  grid-template-columns:
    1fr 1fr;

  gap:80px;

  align-items:center;

}

.about-image{

  position:relative;

  padding:
    0 25px 25px 0;

}

.about-image:before{

  content:"";

  position:absolute;

  right:0;
  bottom:0;

  width:70%;
  height:70%;

  background:var(--red);

}

.about-image img{

  position:relative;

  z-index:2;

  height:540px;

  object-fit:cover;

  box-shadow:var(--shadow);

}

.about-badge{

  position:absolute;

  z-index:4;

  right:-10px;
  top:45px;

  width:165px;

  padding:22px;

  background:var(--purple);

  color:white;

  box-shadow:
    0 15px 45px
    rgba(25,14,76,.24);

}

.about-badge strong{

  display:block;

  font-family:Manrope;

  font-size:36px;

}

.about-badge span{

  display:block;

  margin-top:3px;

  color:
    rgba(255,255,255,.62);

  font-size:10px;

  line-height:1.6;

}

.about-content h2{

  color:var(--purple-dark);

  font-family:Manrope;

  font-size:
    clamp(39px,4vw,54px);

  line-height:1.06;

  letter-spacing:-3px;

}

.about-content > p{

  margin-top:23px;

  max-width:620px;

  color:var(--muted);

  line-height:1.8;

}

.disciplines{

  display:grid;

  grid-template-columns:1fr 1fr;

  gap:0 28px;

  margin-top:32px;

}

.discipline{

  display:flex;

  align-items:center;

  gap:11px;

  padding:15px 0;

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

  color:var(--purple-dark);

  font-size:12px;

  font-weight:600;

}

.discipline svg{

  width:17px;
  height:17px;

  stroke:var(--red);

}


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

.services-grid{

  display:grid;

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

  gap:20px;

}

.service{

  position:relative;

  min-height:340px;

  overflow:hidden;

  padding:34px;

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

  background:#fff;

  transition:
    transform .4s,
    box-shadow .4s,
    border .4s;

}

.service:after{

  content:"";

  position:absolute;

  width:210px;
  height:210px;

  right:-150px;
  top:-150px;

  border-radius:50%;

  background:
    rgba(43,27,116,.06);

  transition:.5s;

}

.service:hover{

  transform:translateY(-8px);

  border-color:transparent;

  box-shadow:
    0 26px 65px
    rgba(30,19,84,.11);

}

.service:hover:after{
  transform:scale(2.4);
}

.service-top{

  display:flex;

  justify-content:space-between;
  align-items:start;

}

.service-icon{

  width:55px;
  height:55px;

  position:relative;

  z-index:2;

  display:grid;
  place-items:center;

  border-radius:14px;

  background:
    rgba(43,27,116,.07);

  color:var(--purple);

  transition:.35s;

}

.service-icon svg{

  width:25px;
  height:25px;

}

.service:hover .service-icon{

  background:var(--purple);

  color:white;

  transform:
    rotate(-5deg)
    scale(1.07);

}

.service-num{

  color:#b9b8c3;

  font-size:10px;
  font-weight:700;

}

.service h3{

  position:relative;
  z-index:2;

  margin-top:36px;

  color:var(--purple-dark);

  font-family:Manrope;

  font-size:22px;

}

.service p{

  position:relative;
  z-index:2;

  margin-top:14px;

  color:var(--muted);

  line-height:1.7;

  font-size:12px;

}

.service-link{

  position:absolute;

  z-index:3;

  left:34px;
  bottom:30px;

  display:flex;
  align-items:center;

  gap:8px;

  color:var(--red);

  font-size:10px;

  font-weight:700;

  text-transform:uppercase;

  letter-spacing:.5px;

}

.service-link svg{

  width:15px;
  height:15px;

  transition:.3s;

}

.service:hover .service-link svg{
  transform:translateX(5px);
}


/* ======================================================
   PROJECTS
====================================================== */

.projects{

  color:white;

  background:

    radial-gradient(
      circle at 90% 10%,
      rgba(83,62,169,.38),
      transparent 28%
    ),

    var(--purple-dark);

}

.projects .section-heading h2{
  color:white;
}

.projects .section-heading > p{
  color:rgba(255,255,255,.51);
}

.project-grid{

  display:grid;

  grid-template-columns:
    1.2fr .8fr;

  grid-template-rows:
    repeat(2,305px);

  gap:20px;

}

.project{

  position:relative;

  overflow:hidden;

  background:#160e42;

  cursor:pointer;

}

.project:first-child{
  grid-row:span 2;
}

.project img{

  height:100%;

  object-fit:cover;

  transition:
    transform .8s
    cubic-bezier(.2,.7,.2,1);

}

.project:hover img{
  transform:scale(1.055);
}

.project-overlay{

  position:absolute;

  inset:0;

  background:
    linear-gradient(
      180deg,
      transparent 32%,
      rgba(12,6,37,.9)
    );

  transition:.4s;

}

.project:hover .project-overlay{

  background:
    linear-gradient(
      180deg,
      rgba(23,13,67,.05),
      rgba(12,6,37,.96)
    );

}

.project-content{

  position:absolute;

  z-index:3;

  left:30px;
  right:30px;
  bottom:28px;

  transition:.35s;

}

.project:hover .project-content{
  transform:translateY(-5px);
}

.project-type{

  color:#ff716a;

  font-size:9px;

  text-transform:uppercase;

  letter-spacing:1.5px;

}

.project h3{

  margin-top:9px;

  max-width:550px;

  font-family:Manrope;

  font-size:27px;

  line-height:1.1;

}

.project-arrow{

  position:absolute;

  z-index:4;

  top:24px;
  right:24px;

  width:44px;
  height:44px;

  display:grid;
  place-items:center;

  border-radius:50%;

  background:
    rgba(255,255,255,.12);

  color:white;

  backdrop-filter:blur(10px);

  opacity:0;

  transform:
    translateY(8px);

  transition:.35s;

}

.project-arrow svg{

  width:18px;
  height:18px;

}

.project:hover .project-arrow{

  opacity:1;

  transform:none;

}


/* ======================================================
   PROCESS
====================================================== */

.process{
  background:#fff;
}

.process-track{

  position:relative;

  display:grid;

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

}

.process-track:before{

  content:"";

  position:absolute;

  left:6%;
  right:6%;
  top:29px;

  height:2px;

  background:var(--line);

}

.process-progress{

  position:absolute;

  left:6%;
  top:29px;

  height:2px;
  width:0;

  background:var(--red);

  transition:
    width 1.4s ease;

}

.process.animated
.process-progress{

  width:88%;

}

.process-step{

  position:relative;

  z-index:2;

  padding:0 28px;

}

.process-number{

  width:60px;
  height:60px;

  display:grid;
  place-items:center;

  border-radius:50%;

  margin-bottom:28px;

  color:var(--purple);

  background:white;

  border:
    2px solid var(--line);

  font-size:11px;
  font-weight:700;

  transition:.5s;

}

.process.animated
.process-number{

  color:white;

  background:var(--red);

  border-color:var(--red);

  box-shadow:
    0 0 0 7px
    rgba(229,38,31,.06);

}

.process-step h3{

  color:var(--purple-dark);

  font-family:Manrope;

  font-size:21px;

}

.process-step p{

  margin-top:11px;

  color:var(--muted);

  font-size:12px;

  line-height:1.7;

}


/* ======================================================
   NUMBERS
====================================================== */

.numbers{
  background:var(--bg);
}

.numbers-grid{

  display:grid;

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

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

  background:#fff;

}

.number{

  min-height:185px;

  padding:34px;

  display:flex;

  flex-direction:column;

  justify-content:space-between;

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

}

.number:last-child{
  border:0;
}

.number strong{

  color:var(--purple-dark);

  font-family:Manrope;

  font-size:
    clamp(43px,4vw,60px);

  font-weight:600;

  letter-spacing:-3px;

}

.number .accent{
  color:var(--red);
}

.number span.label{

  color:var(--muted);

  font-size:11px;

}


/* ======================================================
   INTEGRATED SYSTEM / TECH GRAPHIC
====================================================== */

.integration{

  background:white;

}

.integration-grid{

  display:grid;

  grid-template-columns:
    .85fr 1.15fr;

  gap:100px;

  align-items:center;

}

.integration-copy h2{

  margin-top:17px;

  color:var(--purple-dark);

  font-family:Manrope;

  font-size:
    clamp(43px,4.5vw,67px);

  line-height:1;

  letter-spacing:-4px;

}

.integration-copy p{

  max-width:570px;

  margin-top:25px;

  color:var(--muted);

  line-height:1.8;

}

.system-visual{

  position:relative;

  min-height:580px;

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

}

.system-ring{

  position:relative;

  width:440px;
  height:440px;

  border-radius:50%;

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

}

.system-ring:before,
.system-ring:after{

  content:"";

  position:absolute;

  border-radius:50%;

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

}

.system-ring:before{
  inset:65px;
}

.system-ring:after{
  inset:135px;
}

.system-center{

  position:absolute;

  left:50%;
  top:50%;

  transform:
    translate(-50%,-50%);

  width:120px;
  height:120px;

  display:flex;

  flex-direction:column;

  justify-content:center;
  align-items:center;

  border-radius:50%;

  color:white;

  background:var(--purple);

  text-align:center;

  font-family:Manrope;

  font-size:12px;

  box-shadow:
    0 20px 50px
    rgba(43,27,116,.2);

}

.system-center small{

  display:block;

  margin-top:4px;

  color:
    rgba(255,255,255,.55);

  font-size:8px;

}

.system-node{

  position:absolute;

  width:100px;
  height:100px;

  border-radius:50%;

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

  text-align:center;

  background:#fff;

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

  color:var(--purple-dark);

  font-size:10px;
  font-weight:600;

  box-shadow:
    0 10px 35px
    rgba(25,17,72,.06);

  transition:.3s;

}

.system-node:hover{

  color:white;

  background:var(--red);

  border-color:var(--red);

  transform:scale(1.08);

}

.sn1{
  left:50%;
  top:-50px;
  transform:translateX(-50%);
}

.sn1:hover{
  transform:
    translateX(-50%)
    scale(1.08);
}

.sn2{
  right:-42px;
  top:76px;
}

.sn3{
  right:5px;
  bottom:0;
}

.sn4{
  left:5px;
  bottom:0;
}

.sn5{
  left:-42px;
  top:76px;
}

.sn6{
  left:50%;
  bottom:65px;
  transform:translateX(-50%);
}

.sn6:hover{
  transform:
    translateX(-50%)
    scale(1.08);
}


/* connecting lines */

.system-line{

  position:absolute;

  width:165px;
  height:1px;

  left:50%;
  top:50%;

  transform-origin:left;

  background:
    linear-gradient(
      90deg,
      var(--purple),
      transparent
    );

  opacity:.25;

  animation:
    linePulse
    2.6s ease-in-out infinite;

}

.sl1{
  transform:rotate(-90deg);
}

.sl2{
  transform:rotate(-28deg);
}

.sl3{
  transform:rotate(34deg);
}

.sl4{
  transform:rotate(146deg);
}

.sl5{
  transform:rotate(207deg);
}

.sl6{
  transform:rotate(90deg);
}

@keyframes linePulse{

  0%,100%{
    opacity:.13;
  }

  50%{
    opacity:.6;
  }

}


/* ======================================================
   NEWS
====================================================== */

.news{
  background:var(--bg);
}

.news-grid{

  display:grid;

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

  gap:22px;

}

.news-card{

  background:white;

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

  transition:.35s;

}

.news-card:hover{

  transform:translateY(-7px);

  border-color:transparent;

  box-shadow:var(--shadow);

}

.news-image{

  overflow:hidden;

}

.news-image img{

  height:225px;

  object-fit:cover;

  transition:.6s;

}

.news-card:hover img{
  transform:scale(1.05);
}

.news-content{
  padding:25px;
}

.news-date{

  color:var(--red);

  font-size:9px;

  font-weight:700;

  letter-spacing:.7px;

  text-transform:uppercase;

}

.news-card h3{

  margin-top:13px;

  color:var(--purple-dark);

  font-family:Manrope;

  font-size:18px;

  line-height:1.3;

}


/* ======================================================
   CTA
====================================================== */

.cta{

  position:relative;

  overflow:hidden;

  color:white;

  background:
    linear-gradient(
      115deg,
      var(--purple-dark),
      var(--purple)
    );

}

.cta:before{

  content:"";

  position:absolute;

  width:500px;
  height:500px;

  right:-180px;
  top:-230px;

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

  border-radius:50%;

}

.cta:after{

  content:"";

  position:absolute;

  width:300px;
  height:300px;

  right:-80px;
  top:-130px;

  border:
    1px solid rgba(229,38,31,.4);

  border-radius:50%;

}

.cta-inner{

  position:relative;

  z-index:2;

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

  gap:50px;

}

.cta h2{

  font-family:Manrope;

  font-size:
    clamp(37px,4vw,52px);

  letter-spacing:-3px;

}

.cta p{

  margin-top:10px;

  color:
    rgba(255,255,255,.55);

  font-size:13px;

}


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

footer{

  color:white;

  background:var(--purple-black);

  padding:75px 0 28px;

}

.footer-grid{

  display:grid;

  grid-template-columns:
    2fr 1fr 1fr;

  gap:70px;

}

.footer-logo{

  font-family:Manrope;

  font-size:27px;

  font-weight:800;

}

.footer-logo span{
  color:var(--red);
}

.footer-text{

  max-width:400px;

  margin-top:17px;

  color:
    rgba(255,255,255,.38);

  font-size:11px;

  line-height:1.8;

}

footer h4{

  margin-bottom:18px;

  color:
    rgba(255,255,255,.34);

  font-size:9px;

  letter-spacing:1.4px;

  text-transform:uppercase;

}

footer ul{
  list-style:none;
}

footer li{

  margin-bottom:10px;

  color:
    rgba(255,255,255,.65);

  font-size:11px;

}

.footer-bottom{

  margin-top:60px;

  padding-top:22px;

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

  display:flex;

  justify-content:space-between;

  color:
    rgba(255,255,255,.25);

  font-size:9px;

}


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

.reveal{

  opacity:0;

  transform:
    translateY(28px);

  transition:

    opacity .75s ease,

    transform .75s
    cubic-bezier(.2,.75,.2,1);

}

.reveal.visible{

  opacity:1;

  transform:none;

}

.delay-1{
  transition-delay:.08s;
}

.delay-2{
  transition-delay:.16s;
}

.delay-3{
  transition-delay:.24s;
}


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

@media(max-width:1100px){

  .main-nav{
    display:none;
  }

  .menu-btn{
    display:grid;
    place-items:center;
  }

  .hero-inner{

    grid-template-columns:1fr;

    padding-top:145px;

  }

  .hero-content{

    max-width:850px;

  }

  .hero-visual{

    height:500px;

    margin-top:-40px;

  }

  .model-stage{
    transform:scale(.8);
  }

  .trust-grid{
    grid-template-columns:1fr 1fr;
  }

  .about-grid,
  .integration-grid{

    grid-template-columns:1fr;

  }

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

  .project-grid{

    grid-template-columns:1fr;

    grid-template-rows:auto;

  }

  .project,
  .project:first-child{

    grid-row:auto;

    height:460px;

  }

  .system-visual{
    margin-top:20px;
  }

}


@media(max-width:780px){

  .container{
    width:calc(100% - 34px);
  }

  .header-inner{
    min-height:70px;
  }

  .hero{
    min-height:auto;
  }

  .hero-inner{

    min-height:auto;

    padding-top:130px;
    padding-bottom:60px;

  }

  .hero-title{

    font-size:
      clamp(52px,14vw,75px);

    letter-spacing:-4px;

  }

  .hero-text{
    font-size:14px;
  }

  .hero-buttons{

    flex-direction:column;

    align-items:flex-start;

  }

  .hero-meta{

    flex-direction:column;

    gap:15px;

  }

  .hero-meta-item{

    border:0;

    margin:0;

    padding:0;

  }

  .hero-visual{

    height:400px;

    margin-top:-25px;

  }

  .model-stage{
    transform:scale(.62);
  }

  .tech-label{
    display:none;
  }

  .trust-grid{
    grid-template-columns:1fr;
  }

  .trust-item{

    border-right:0;

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

  }

  section.section{
    padding:90px 0;
  }

  .section-heading{

    display:block;

  }

  .section-heading > p{

    margin-top:20px;

  }

  .about-image img{
    height:420px;
  }

  .about-badge{

    right:5px;
    top:30px;

  }

  .disciplines{
    grid-template-columns:1fr;
  }

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

  .service{
    min-height:320px;
  }

  .process-track{

    grid-template-columns:1fr;

    gap:35px;

  }

  .process-track:before{

    top:0;
    bottom:0;

    left:29px;

    width:2px;
    height:auto;

  }

  .process-progress{

    left:29px;
    top:0;

    width:2px!important;
    height:0;

    transition:height 1.3s;

  }

  .process.animated
  .process-progress{

    height:90%;

  }

  .process-step{

    padding-left:90px;

  }

  .process-number{

    position:absolute;

    left:0;
    top:0;

  }

  .numbers-grid{
    grid-template-columns:1fr 1fr;
  }

  .news-grid{
    grid-template-columns:1fr;
  }

  .cta-inner{

    flex-direction:column;

    align-items:flex-start;

  }

}


@media(max-width:520px){

  .logo{
    font-size:22px;
  }

  .hero-visual{
    height:330px;
  }

  .model-stage{
    transform:scale(.48);
  }

  .about-image{
    padding:0 14px 14px 0;
  }

  .about-image img{
    height:360px;
  }

  .about-badge{

    width:145px;

    padding:18px;

  }

  .about-badge strong{
    font-size:30px;
  }

  .project,
  .project:first-child{

    height:390px;

  }

  .numbers-grid{
    grid-template-columns:1fr;
  }

  .number{

    border-right:0;

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

  }

  .system-visual{

    min-height:430px;

    transform:scale(.7);

    margin:
      -60px -80px;

  }

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

  .footer-bottom{

    display:block;

    line-height:1.8;

  }

}


/* ======================================================
   ACCESSIBILITY
====================================================== */

@media(prefers-reduced-motion:reduce){

  *,
  *:before,
  *:after{

    animation-duration:.001ms!important;

    animation-iteration-count:1!important;

    transition-duration:.001ms!important;

    scroll-behavior:auto!important;

  }

}

/* ======================================================
   MOBILE NAV — compact responsive drawer (v2.11.7)
====================================================== */
@media (max-width: 980px){
  .mobile-nav{
    inset:0 0 0 auto;
    width:min(420px,100vw);
    height:100dvh;
    padding:92px 22px 28px;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    transform:translateX(24px);
  }

  .mobile-nav.open{
    transform:none;
  }

  .mobile-nav > a,
  .mobile-nav > .nav-item > a{
    padding:13px 0;
    font-size:24px;
    line-height:1.15;
    letter-spacing:-.7px;
  }

  .mobile-nav .nav-sub,
  .mobile-nav .nav-mega{
    padding:0 0 8px 12px;
  }

  .mobile-nav .nav-sub a{
    padding:9px 0;
    font-size:15px;
    line-height:1.35;
    letter-spacing:-.2px;
  }

  .mobile-nav .nav-mega .mega-item{
    gap:10px;
    padding:9px 0;
  }

  .mobile-nav .nav-mega .mega-ic{
    flex-basis:28px;
    width:28px;
    height:28px;
    border-radius:8px;
  }

  .mobile-nav .nav-mega .mega-ic svg{
    width:14px;
    height:14px;
  }

  .mobile-nav .nav-mega .mega-tx strong{
    display:block;
    font-size:14px;
    line-height:1.3;
    letter-spacing:-.15px;
  }

  .mobile-nav .nav-mega .mega-tx small{
    display:none;
  }

  .mobile-nav .mobile-lang{
    margin-top:18px;
    padding-top:14px;
    border-top:1px solid rgba(255,255,255,.12);
  }
}

@media (max-width: 480px){
  .mobile-nav{
    width:100vw;
    padding:84px 20px 24px;
  }

  .mobile-nav > a,
  .mobile-nav > .nav-item > a{
    padding:11px 0;
    font-size:22px;
  }

  .mobile-nav .nav-sub a{
    padding:8px 0;
    font-size:14px;
  }

  .mobile-nav .nav-mega .mega-item{
    padding:8px 0;
  }

  .mobile-nav .nav-mega .mega-tx strong{
    font-size:13.5px;
  }
}


/* ======================================================
   MOBILE NAV — accordion submenus (v2.11.8)
====================================================== */
.mobile-submenu-toggle{
  display:none;
}

@media (max-width:980px){
  .mobile-nav .nav-item.has-children{
    position:relative;
  }

  .mobile-nav .nav-item.has-children > a{
    padding-right:48px;
  }

  .mobile-nav .nav-item > a .nav-caret{
    display:none;
  }

  .mobile-nav .mobile-submenu-toggle{
    position:absolute;
    top:6px;
    right:0;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:center;
    width:38px;
    height:38px;
    padding:0;
    border:1px solid rgba(255,255,255,.10);
    border-radius:10px;
    background:rgba(255,255,255,.06);
    color:#fff;
    cursor:pointer;
  }

  .mobile-nav .mobile-submenu-toggle svg{
    transition:transform .2s ease;
  }

  .mobile-nav .nav-item.submenu-open > .mobile-submenu-toggle svg{
    transform:rotate(180deg);
  }

  .mobile-nav .nav-item.has-children > .nav-sub{
    display:none;
    padding-top:2px;
  }

  .mobile-nav .nav-item.has-children.submenu-open > .nav-sub{
    display:block;
  }
}

/* v2.11.10 — Real breathing room below homepage hero stats.
   The space belongs to the hero section itself (not the centered inner grid),
   so it remains visible before the following white section. */
.home .hero{
  padding-bottom:36px;
}

@media (max-width:980px){
  .home .hero{
    padding-bottom:32px;
  }
}

@media (max-width:600px){
  .home .hero{
    padding-bottom:28px;
  }
}