:root{
  --black:#090a0a;
  --graphite:#171818;
  --charcoal:#292a29;
  --silver:#8e8e8e;
  --stone:#d9d2c9;
  --ivory:#f6f5f1;
  --white:#faf9f6;
  --line:rgba(255,255,255,.14);
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--black);
  color:var(--ivory);
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Helvetica,
    Arial,
    sans-serif;
  -webkit-font-smoothing:antialiased;
}

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

.nav{
  position:absolute;
  z-index:50;
  top:0;
  left:0;
  width:100%;
  height:94px;
  padding:0 6.5vw;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
}

.brand{
  display:flex;
  align-items:center;
  gap:20px;
}

.wordmark{
  font-size:18px;
  letter-spacing:.42em;
  font-weight:500;
}

.axis-symbol{
  position:relative;
  width:38px;
  height:38px;
  display:block;
}

.axis-symbol i,
.mini-symbol i{
  position:absolute;
  width:17px;
  height:27px;
  background:var(--ivory);
  border-radius:100% 10% 100% 10%;
  transform-origin:100% 100%;
}

.axis-symbol i:nth-child(1){left:1px;top:-1px;transform:rotate(-45deg)}
.axis-symbol i:nth-child(2){right:1px;top:-1px;transform:rotate(45deg) scaleX(-1)}
.axis-symbol i:nth-child(3){left:1px;bottom:-1px;transform:rotate(45deg) scaleY(-1)}
.axis-symbol i:nth-child(4){right:1px;bottom:-1px;transform:rotate(-45deg) scale(-1)}

.nav nav{
  display:flex;
  gap:42px;
  font-size:13px;
}

.nav nav a{
  opacity:.72;
  transition:.25s;
}

.nav nav a:hover{
  opacity:1;
}

.nav-cta{
  justify-self:end;
  border:1px solid rgba(255,255,255,.5);
  border-radius:100px;
  padding:13px 22px;
  font-size:12px;
  transition:.25s;
}

.nav-cta:hover{
  background:var(--ivory);
  color:#111;
}

.hero{
  min-height:760px;
  height:100vh;
  max-height:1050px;
  position:relative;
  overflow:hidden;
  padding:180px 7vw 90px;
  display:flex;
  align-items:center;
  background:
    radial-gradient(circle at 70% 42%,rgba(217,210,201,.13),transparent 22%),
    radial-gradient(circle at 78% 20%,rgba(255,255,255,.06),transparent 28%),
    linear-gradient(115deg,#050606 0%,#0c0d0d 55%,#111212 100%);
}

.hero:after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:30%;
  background:linear-gradient(0deg,rgba(0,0,0,.72),transparent);
}

.hero-glow{
  position:absolute;
  width:720px;
  height:720px;
  border:1px solid rgba(246,245,241,.15);
  border-radius:50%;
  right:-120px;
  top:-300px;
  box-shadow:
    0 0 90px rgba(246,245,241,.08),
    inset 0 0 80px rgba(246,245,241,.04);
}

.hero-orbit{
  position:absolute;
  width:1100px;
  height:360px;
  border-top:1px solid rgba(255,255,255,.12);
  border-radius:50%;
  right:-150px;
  bottom:-160px;
  transform:rotate(-6deg);
}

.hero-copy{
  width:min(660px,55vw);
  position:relative;
  z-index:5;
}

.eyebrow{
  font-size:11px;
  letter-spacing:.42em;
  margin-bottom:24px;
  opacity:.72;
}

.eyebrow.dark{
  color:#444;
}

.hero h1{
  font-size:clamp(62px,6.3vw,112px);
  line-height:.91;
  letter-spacing:-.055em;
  font-weight:300;
  margin:0 0 30px;
}

.hero-copy>p{
  max-width:600px;
  color:#c9c9c5;
  font-size:17px;
  line-height:1.55;
}

.actions{
  display:flex;
  gap:14px;
  margin-top:35px;
  align-items:center;
  flex-wrap:wrap;
}

.btn{
  padding:15px 27px;
  border-radius:100px;
  font-size:13px;
  transition:.25s;
}

.btn.light{
  background:var(--ivory);
  color:#111;
}

.btn.ghost{
  border:1px solid rgba(255,255,255,.35);
}

.btn:hover{
  transform:translateY(-2px);
}

.hero-symbol{
  position:absolute;
  z-index:4;
  right:17vw;
  top:50%;
  width:350px;
  height:350px;
  transform:translateY(-50%) rotate(45deg);
  animation:floatSymbol 8s ease-in-out infinite;
}

.petal{
  position:absolute;
  width:135px;
  height:230px;
  background:
    linear-gradient(145deg,#faf7ef 0%,#c9c1b7 32%,#292a2a 75%,#090a0a 100%);
  box-shadow:
    inset 10px 15px 28px rgba(255,255,255,.28),
    0 20px 80px rgba(0,0,0,.5);
}

.p1{
  left:20px;
  top:0;
  border-radius:100% 8% 100% 10%;
  transform:rotate(-18deg);
}

.p2{
  right:20px;
  top:0;
  border-radius:8% 100% 10% 100%;
  transform:rotate(18deg);
}

.p3{
  left:20px;
  bottom:0;
  border-radius:10% 100% 8% 100%;
  transform:rotate(18deg);
}

.p4{
  right:20px;
  bottom:0;
  border-radius:100% 10% 100% 8%;
  transform:rotate(-18deg);
}

.core{
  position:absolute;
  width:42px;
  height:42px;
  border-radius:50%;
  left:154px;
  top:154px;
  background:#d8d0c6;
  filter:blur(5px);
  box-shadow:0 0 50px #e7ded2;
}

.hero-index{
  position:absolute;
  z-index:5;
  right:5vw;
  top:32%;
  display:flex;
  flex-direction:column;
  gap:18px;
  font-size:8px;
  letter-spacing:.42em;
  opacity:.65;
}

.hero-index strong{
  margin-top:8px;
  line-height:1.8;
  font-weight:400;
}

.scroll-indicator{
  position:absolute;
  z-index:5;
  left:7vw;
  bottom:35px;
  display:flex;
  align-items:center;
  gap:20px;
  font-size:9px;
  letter-spacing:.2em;
}

.scroll-indicator i{
  width:70px;
  height:1px;
  background:#888;
}

.belief{
  min-height:520px;
  background:var(--ivory);
  color:#111;
  padding:75px 7vw;
  display:grid;
  grid-template-columns:1.3fr .7fr 120px;
  align-items:center;
  gap:40px;
  overflow:hidden;
}

.belief h2{
  margin:0;
  font-size:clamp(42px,4.2vw,75px);
  line-height:1.02;
  font-weight:400;
  letter-spacing:-.05em;
}

.belief h2 span{
  display:block;
  color:#8a8985;
}

.belief aside{
  font-size:9px;
  line-height:2.3;
  letter-spacing:.38em;
}

.human-orb{
  height:420px;
  position:relative;
}

.orb{
  position:absolute;
  width:380px;
  height:380px;
  border-radius:50%;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  background:
    radial-gradient(circle at 40% 35%,#f8e7d8 0%,#b98e72 25%,#4e3328 55%,#17110f 75%,#080808 100%);
  box-shadow:-40px 20px 90px rgba(104,65,42,.25);
  opacity:.88;
}

.intersection{
  padding:60px 5vw 80px;
  background:#080909;
}

.section-label{
  margin:0 2vw 30px;
  font-size:10px;
  letter-spacing:.4em;
  opacity:.65;
}

.intersection-grid{
  display:grid;
  grid-template-columns:1fr .48fr 1fr;
  gap:25px;
  align-items:stretch;
}

.panel{
  min-height:390px;
  border:1px solid rgba(255,255,255,.17);
  border-radius:22px;
  padding:45px;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 80% 30%,rgba(217,210,201,.13),transparent 35%),
    linear-gradient(135deg,#171818,#090a0a);
}

.panel:after{
  content:"";
  position:absolute;
  width:260px;
  height:260px;
  border-radius:50%;
  right:-80px;
  bottom:-80px;
  border:1px solid rgba(255,255,255,.15);
  box-shadow:0 0 80px rgba(255,255,255,.05);
}

.panel-number{
  font-size:10px;
  opacity:.4;
}

.panel h3{
  font-size:42px;
  font-weight:300;
  margin:35px 0 20px;
}

.panel p{
  max-width:350px;
  color:#bbb;
  line-height:1.65;
  font-size:14px;
}

.chips{
  position:absolute;
  bottom:40px;
  left:45px;
  right:45px;
  display:flex;
  gap:7px;
  flex-wrap:wrap;
}

.chips span{
  padding:7px 11px;
  border:1px solid rgba(255,255,255,.24);
  border-radius:30px;
  font-size:9px;
}

.intersection-center{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.intersection-center h3{
  font-size:29px;
  line-height:1.05;
  font-weight:300;
  margin:25px 0 12px;
}

.intersection-center p{
  font-size:11px;
  line-height:1.6;
  color:#aaa;
}

.mini-symbol{
  width:100px;
  height:100px;
  position:relative;
  transform:scale(1.5);
}

.mini-symbol i{
  width:31px;
  height:49px;
  background:linear-gradient(135deg,#f4efe8,#595654);
}

.mini-symbol i:nth-child(1){left:18px;top:5px;transform:rotate(-45deg)}
.mini-symbol i:nth-child(2){right:18px;top:5px;transform:rotate(45deg) scaleX(-1)}
.mini-symbol i:nth-child(3){left:18px;bottom:5px;transform:rotate(45deg) scaleY(-1)}
.mini-symbol i:nth-child(4){right:18px;bottom:5px;transform:rotate(-45deg) scale(-1)}

.product{
  min-height:720px;
  background:
    radial-gradient(circle at 70% 70%,rgba(197,181,164,.35),transparent 30%),
    var(--ivory);
  color:#101111;
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  align-items:center;
  padding:85px 7vw;
  overflow:hidden;
}

.product-copy h2{
  font-size:clamp(72px,7vw,120px);
  line-height:.76;
  font-weight:350;
  letter-spacing:-.07em;
  margin:30px 0 35px;
}

.product-copy h3{
  font-size:22px;
  font-weight:400;
}

.product-copy p{
  color:#555;
  line-height:1.5;
}

.secondary{
  max-width:410px;
}

.dark-btn{
  background:#101111;
  color:white;
}

.watch{
  font-size:12px;
}

.watch span{
  display:inline-grid;
  place-items:center;
  width:31px;
  height:31px;
  border-radius:50%;
  background:#ddd8d1;
  margin-right:7px;
}

.product-ui{
  min-height:500px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}

.laptop{
  width:min(680px,50vw);
  position:relative;
}

.laptop-top{
  height:390px;
  border:8px solid #171818;
  border-radius:19px 19px 6px 6px;
  background:#111;
  overflow:hidden;
  display:grid;
  grid-template-columns:115px 1fr;
  box-shadow:0 30px 60px rgba(0,0,0,.18);
}

.sidebar{
  padding:25px 14px;
  background:#0b0c0c;
  color:#aaa;
  display:flex;
  flex-direction:column;
  gap:20px;
  font-size:9px;
}

.sidebar-logo{
  color:white;
  font-size:24px;
  margin-bottom:5px;
}

.dashboard{
  padding:30px;
  background:#e9e5de;
}

.dashboard>small{
  letter-spacing:.2em;
  font-size:8px;
}

.dashboard h4{
  font-size:26px;
  margin:7px 0 20px;
  font-weight:400;
}

.metric-main{
  display:flex;
  justify-content:space-between;
  padding:15px;
  background:#f7f5f0;
  border-radius:10px;
  font-size:11px;
}

.metric-main strong{
  font-size:25px;
}

.graph{
  height:120px;
  margin:12px 0;
  background:#f7f5f0;
  border-radius:10px;
  position:relative;
  overflow:hidden;
}

.graph i{
  position:absolute;
  width:120%;
  height:80px;
  left:-10%;
  bottom:-40px;
  border:2px solid #999;
  border-radius:50%;
  transform:rotate(-4deg);
}

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

.metrics div{
  background:#f7f5f0;
  border-radius:8px;
  padding:12px;
  min-height:65px;
}

.metrics small{
  display:block;
  font-size:7px;
  margin-bottom:8px;
}

.metrics strong{
  font-size:10px;
}

.laptop-base{
  width:110%;
  margin-left:-5%;
  height:18px;
  border-radius:2px 2px 30px 30px;
  background:linear-gradient(#aaa,#e6e3de);
}

.phone{
  position:absolute;
  right:1%;
  bottom:20px;
  width:190px;
  height:405px;
  border:7px solid #191919;
  border-radius:34px;
  background:#0b0c0c;
  color:#eee;
  padding:35px 16px 15px;
  box-shadow:0 25px 50px rgba(0,0,0,.3);
}

.phone-notch{
  position:absolute;
  top:8px;
  left:50%;
  transform:translateX(-50%);
  width:70px;
  height:18px;
  background:#181818;
  border-radius:20px;
}

.rooty-mark{
  text-align:center;
  font-size:32px;
}

.phone h4{
  text-align:center;
  font-size:18px;
  margin:5px 0;
}

.phone>small{
  display:block;
  text-align:center;
  color:#777;
}

.rooty-question{
  margin:22px 0 12px;
  padding:12px;
  border:1px solid #333;
  border-radius:12px;
  font-size:9px;
}

.phone ul{
  list-style:none;
  padding:0;
  margin:0;
}

.phone li{
  padding:9px 8px;
  border-bottom:1px solid #222;
  font-size:8px;
}

.voice{
  position:absolute;
  bottom:20px;
  left:15px;
  right:15px;
  text-align:center;
  color:#777;
  border:1px solid #222;
  border-radius:30px;
  padding:9px;
}

.labs{
  min-height:500px;
  padding:85px 7vw;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:center;
  background:
    radial-gradient(ellipse at 30% 100%,#4d4a45 0%,#191a1a 25%,#080909 60%);
}

.labs h2{
  font-size:clamp(55px,5vw,85px);
  line-height:.95;
  font-weight:300;
  letter-spacing:-.05em;
}

.research-list>p{
  color:#aaa;
  max-width:520px;
  line-height:1.6;
  font-size:13px;
  margin-bottom:30px;
}

.research-list a{
  display:grid;
  grid-template-columns:50px 1fr auto;
  padding:17px 0;
  border-top:1px solid rgba(255,255,255,.17);
  font-size:12px;
}

.research-list span{
  opacity:.45;
}

.research-list b{
  font-weight:400;
}

footer{
  min-height:260px;
  background:var(--ivory);
  color:#111;
  padding:55px 6vw 30px;
  display:grid;
  grid-template-columns:1.3fr 1fr .7fr;
  grid-template-rows:auto auto;
  gap:45px;
  align-items:start;
}

.footer-brand{
  display:flex;
  gap:18px;
  align-items:center;
}

.dark-symbol i{
  background:#111;
}

.footer-brand strong{
  display:block;
  font-size:18px;
  letter-spacing:.35em;
}

.footer-brand small{
  display:block;
  color:#888;
  margin-top:7px;
}

footer nav{
  display:flex;
  gap:28px;
  font-size:11px;
}

.footer-statement{
  font-size:12px;
  color:#666;
}

.copyright{
  grid-column:1/-1;
  border-top:1px solid #ddd;
  padding-top:20px;
  color:#999;
  font-size:9px;
}

@keyframes floatSymbol{
  0%,100%{
    transform:translateY(-50%) rotate(45deg);
  }
  50%{
    transform:translateY(-53%) rotate(47deg);
  }
}

.reveal{
  opacity:0;
  transform:translateY(30px);
  transition:
    opacity .8s ease,
    transform .8s ease;
}

.reveal.visible{
  opacity:1;
  transform:none;
}

@media(max-width:1050px){

  .nav{
    grid-template-columns:1fr auto;
  }

  .nav nav{
    display:none;
  }

  .hero-symbol{
    opacity:.65;
    right:5vw;
  }

  .hero-copy{
    width:70vw;
  }

  .hero-index{
    display:none;
  }

  .belief{
    grid-template-columns:1fr .5fr;
  }

  .belief aside{
    display:none;
  }

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

  .intersection-center{
    grid-column:1/-1;
    order:3;
    min-height:260px;
  }

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

  .product-ui{
    min-height:520px;
  }

  .laptop{
    width:80vw;
  }

}

@media(max-width:720px){

  .nav{
    height:80px;
    padding:0 6vw;
  }

  .wordmark{
    font-size:14px;
    letter-spacing:.3em;
  }

  .nav-cta{
    font-size:9px;
    padding:11px 14px;
  }

  .axis-symbol{
    transform:scale(.8);
  }

  .hero{
    min-height:760px;
    padding:150px 7vw 80px;
    align-items:flex-start;
  }

  .hero-copy{
    width:100%;
  }

  .hero h1{
    font-size:59px;
  }

  .hero-copy>p{
    font-size:15px;
    max-width:90%;
  }

  .hero-symbol{
    width:230px;
    height:230px;
    right:-35px;
    top:72%;
    transform:translateY(-50%) rotate(45deg) scale(.75);
  }

  .belief{
    display:block;
    min-height:650px;
    padding:70px 7vw;
  }

  .belief h2{
    font-size:44px;
  }

  .human-orb{
    height:300px;
  }

  .orb{
    width:290px;
    height:290px;
  }

  .intersection-grid{
    display:block;
  }

  .panel{
    margin-bottom:20px;
  }

  .intersection-center{
    min-height:350px;
  }

  .product{
    padding:75px 7vw;
  }

  .product-copy h2{
    font-size:80px;
  }

  .product-ui{
    min-height:420px;
    transform:scale(.83);
    transform-origin:center top;
  }

  .laptop{
    width:680px;
    max-width:none;
    transform:translateX(10%);
  }

  .phone{
    right:-40px;
  }

  .labs{
    grid-template-columns:1fr;
    gap:20px;
  }

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

  footer nav{
    flex-wrap:wrap;
  }

  .footer-statement{
    display:none;
  }

}

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

/* ==========================================================
   AXISMER V2 — CINEMATIC HERO
   ========================================================== */

.hero{
  min-height:760px;
  height:100vh;
  max-height:1050px;

  position:relative;
  overflow:hidden;

  padding:180px 7vw 90px;

  display:flex;
  align-items:center;

  background:
    linear-gradient(
      90deg,
      rgba(4,5,5,.96) 0%,
      rgba(4,5,5,.88) 26%,
      rgba(4,5,5,.45) 48%,
      rgba(4,5,5,.08) 72%,
      rgba(4,5,5,.12) 100%
    ),
    url('/assets/img/hero/axismer-hero-v2.webp') center center / cover no-repeat;
}


/* Atmospheric depth */
.hero::before{
  content:"";

  position:absolute;
  inset:0;

  z-index:1;

  pointer-events:none;

  background:
    radial-gradient(
      circle at 69% 42%,
      rgba(246,239,226,.09),
      transparent 23%
    ),
    linear-gradient(
      180deg,
      rgba(0,0,0,.12) 0%,
      transparent 45%,
      rgba(0,0,0,.42) 100%
    );
}


/* Lower cinematic fade */
.hero::after{
  content:"";

  position:absolute;
  left:0;
  right:0;
  bottom:0;

  height:26%;

  z-index:2;

  pointer-events:none;

  background:
    linear-gradient(
      0deg,
      rgba(3,4,4,.70),
      transparent
    );
}


/* Hide old CSS-generated emblem */
.hero-symbol{
  display:none !important;
}


/* Old artificial orbit no longer required */
.hero-orbit{
  display:none;
}


/* Old glow replaced by photographic lighting */
.hero-glow{
  display:none;
}


/* Content above image */
.hero-copy{
  position:relative;
  z-index:10;

  width:min(680px,52vw);
}


.hero .eyebrow{
  color:rgba(246,245,241,.72);

  text-shadow:
    0 1px 15px rgba(0,0,0,.6);
}


.hero h1{
  color:#f7f5f0;

  font-size:clamp(64px,6vw,108px);
  line-height:.92;

  letter-spacing:-.058em;
  font-weight:300;

  text-shadow:
    0 3px 35px rgba(0,0,0,.35);
}


.hero-copy > p{
  color:rgba(246,245,241,.78);

  max-width:570px;

  font-size:16px;
  line-height:1.65;

  text-shadow:
    0 2px 15px rgba(0,0,0,.5);
}


/* Premium buttons */

.hero .btn.light{
  background:#f6f5f1;
  color:#111;

  border:1px solid #f6f5f1;

  box-shadow:
    0 10px 35px rgba(0,0,0,.18);
}


.hero .btn.light:hover{
  background:#fff;
  transform:translateY(-2px);
}


.hero .btn.ghost{
  background:rgba(10,11,11,.16);

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

  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}


.hero .btn.ghost:hover{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.8);
}


/* Right-side philosophy index */

.hero-index{
  z-index:10;

  right:5.5vw;
  top:31%;

  padding-left:28px;

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

  text-shadow:
    0 2px 12px rgba(0,0,0,.8);
}


/* Bottom pagination */

.scroll-indicator{
  z-index:10;
}


/* Navigation refinement over cinematic image */

.nav{
  z-index:100;

  background:
    linear-gradient(
      180deg,
      rgba(4,5,5,.42),
      transparent
    );
}


.nav-cta{
  background:rgba(5,6,6,.20);

  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}


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

@media(max-width:720px){

  .hero{
    min-height:820px;
    height:100svh;

    padding:
      145px 7vw
      75px;

    align-items:flex-start;

    background:
      linear-gradient(
        180deg,
        rgba(4,5,5,.86) 0%,
        rgba(4,5,5,.50) 45%,
        rgba(4,5,5,.18) 67%,
        rgba(4,5,5,.72) 100%
      ),
      url('/assets/img/hero/axismer-hero-v2.webp')
      68% center / cover no-repeat;
  }


  .hero-copy{
    width:100%;
  }


  .hero h1{
    font-size:clamp(54px,15vw,68px);
    max-width:560px;
  }


  .hero-copy > p{
    max-width:92%;
    font-size:14px;
  }


  .hero .actions{
    gap:10px;
  }


  .hero .btn{
    padding:13px 18px;
    font-size:11px;
  }

}


/* ==========================================================
   AXISMER V2 — OUR BELIEF
   Human Intelligence
   ========================================================== */

.belief{
  position:relative;
  min-height:560px;

  padding:0;

  display:grid;
  grid-template-columns:52% 48%;
  gap:0;

  align-items:stretch;

  background:#f4f1eb;
  color:#101111;

  overflow:hidden;
}


/* LEFT — MANIFESTO */

.belief > div:first-child{
  position:relative;
  z-index:5;

  display:flex;
  flex-direction:column;
  justify-content:center;

  padding:80px 3vw 80px 7vw;

  background:
    linear-gradient(
      90deg,
      #f5f2ec 0%,
      #f5f2ec 75%,
      rgba(245,242,236,.92) 88%,
      rgba(245,242,236,.20) 100%
    );
}


.belief .eyebrow{
  margin-bottom:24px;

  color:#77736d;

  font-size:10px;
  letter-spacing:.43em;
}


.belief h2{
  position:relative;
  z-index:5;

  max-width:760px;

  margin:0;

  font-size:clamp(44px,4vw,72px);
  line-height:1.01;

  letter-spacing:-.052em;
  font-weight:400;

  color:#111;
}


.belief h2 span{
  display:block;

  color:#92908b;

  font-weight:350;
}


/* RIGHT — HUMAN VISUAL */

.human-orb{
  position:relative;

  width:100%;
  height:auto;
  min-height:560px;

  overflow:hidden;

  background:
    linear-gradient(
      90deg,
      rgba(245,242,236,.40) 0%,
      rgba(245,242,236,.04) 22%,
      rgba(0,0,0,.02) 100%
    ),
    url('/assets/img/human/axismer-belief-v2.webp')
      35% center / cover no-repeat;
}


/* Remove V1 sphere */

.human-orb .orb{
  display:none !important;
}


/* Cinematic edge blend */

.human-orb::before{
  content:"";

  position:absolute;
  inset:0;

  background:
    linear-gradient(
      90deg,
      rgba(245,242,236,.88) 0%,
      rgba(245,242,236,.28) 14%,
      transparent 35%
    );

  pointer-events:none;
}


/* Fine orbital overlay */

.human-orb::after{
  content:"";

  position:absolute;

  width:430px;
  height:430px;

  right:-115px;
  top:50%;

  transform:translateY(-50%);

  border:1px solid rgba(255,255,255,.38);
  border-radius:50%;

  box-shadow:
    0 0 0 60px rgba(255,255,255,.035),
    0 0 0 120px rgba(255,255,255,.02);

  pointer-events:none;
}


/* SIDE MESSAGE */

.belief aside{
  position:absolute;

  z-index:7;

  right:4.2vw;
  top:50%;

  transform:translateY(-50%);

  padding-left:20px;

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

  color:#fff;

  font-size:8px;
  line-height:2.3;
  letter-spacing:.42em;

  text-shadow:
    0 2px 15px rgba(0,0,0,.55);
}


/* Subtle boundary */

.belief::after{
  content:"";

  position:absolute;

  left:0;
  right:0;
  bottom:0;

  height:1px;

  background:rgba(0,0,0,.08);
}


/* ==========================================================
   BELIEF — TABLET
   ========================================================== */

@media(max-width:1050px){

  .belief{
    grid-template-columns:55% 45%;
  }

  .belief > div:first-child{
    padding-left:6vw;
  }

  .belief aside{
    display:none;
  }

}


/* ==========================================================
   BELIEF — MOBILE
   ========================================================== */

@media(max-width:720px){

  .belief{
    display:flex;
    flex-direction:column;

    min-height:auto;
  }


  .belief > div:first-child{
    min-height:430px;

    padding:
      70px 7vw
      55px;

    background:#f5f2ec;
  }


  .belief h2{
    font-size:clamp(42px,11vw,55px);
  }


  .human-orb{
    min-height:430px;

    background-position:32% center;
  }


  .human-orb::before{
    background:
      linear-gradient(
        180deg,
        #f5f2ec 0%,
        rgba(245,242,236,.25) 15%,
        transparent 40%
      );
  }


  .human-orb::after{
    width:330px;
    height:330px;

    right:-170px;
  }

}



/* ==========================================================
   AXISMER V2 — HUMAN × TECHNOLOGY
   ========================================================== */

.intersection{
  position:relative;

  min-height:760px;

  padding:
    70px 7vw
    80px;

  overflow:hidden;

  color:#f5f3ee;

  background:
    linear-gradient(
      180deg,
      rgba(3,4,4,.10) 0%,
      rgba(3,4,4,.18) 45%,
      rgba(3,4,4,.60) 100%
    ),
    url('/assets/img/technology/axismer-human-technology-v2.webp')
      center center / cover no-repeat;
}


/* Dark cinematic control layer */

.intersection::before{
  content:"";

  position:absolute;
  inset:0;

  z-index:1;

  pointer-events:none;

  background:
    linear-gradient(
      90deg,
      rgba(3,4,4,.30) 0%,
      rgba(3,4,4,.08) 25%,
      rgba(3,4,4,.18) 50%,
      rgba(3,4,4,.08) 75%,
      rgba(3,4,4,.32) 100%
    ),
    linear-gradient(
      180deg,
      rgba(3,4,4,.20),
      transparent 35%,
      rgba(3,4,4,.55)
    );
}


/* Bottom transition into Rooted Life */

.intersection::after{
  content:"";

  position:absolute;

  left:0;
  right:0;
  bottom:0;

  height:130px;

  z-index:2;

  pointer-events:none;

  background:
    linear-gradient(
      0deg,
      rgba(3,4,4,.86),
      transparent
    );
}


/* Section label */

.intersection .section-label{
  position:relative;
  z-index:5;

  margin-bottom:410px;

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

  font-size:9px;
  letter-spacing:.48em;
  font-weight:500;
}


/* Main grid */

.intersection-grid{
  position:relative;
  z-index:5;

  display:grid;

  grid-template-columns:
    minmax(250px,1fr)
    minmax(230px,.68fr)
    minmax(250px,1fr);

  gap:28px;

  align-items:end;
}


/* ==========================================================
   GLASS PANELS
   ========================================================== */

.intersection .panel{
  position:relative;

  min-height:245px;

  padding:
    30px
    32px
    28px;

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

  border-radius:22px;

  background:
    linear-gradient(
      145deg,
      rgba(18,19,19,.68),
      rgba(8,9,9,.42)
    );

  backdrop-filter:
    blur(16px)
    saturate(110%);

  -webkit-backdrop-filter:
    blur(16px)
    saturate(110%);

  box-shadow:
    0 30px 70px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.08);

  overflow:hidden;
}


/* Fine glow inside panels */

.intersection .panel::before{
  content:"";

  position:absolute;

  width:210px;
  height:210px;

  border-radius:50%;

  opacity:.14;

  filter:blur(60px);

  pointer-events:none;
}


.intersection .panel.human::before{
  right:-80px;
  top:-80px;

  background:#d7a16e;
}


.intersection .panel.technology::before{
  left:-80px;
  top:-80px;

  background:#9ed7ee;
}


/* Panel number */

.intersection .panel-number{
  display:block;

  margin-bottom:25px;

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

  font-size:8px;
  letter-spacing:.30em;
}


/* Panel titles */

.intersection .panel h3{
  position:relative;

  margin:
    0
    0
    14px;

  color:#fff;

  font-size:34px;
  line-height:1;

  letter-spacing:-.035em;
  font-weight:350;
}


/* Panel copy */

.intersection .panel p{
  position:relative;

  max-width:390px;

  margin:0 0 24px;

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

  font-size:12px;
  line-height:1.65;
}


/* Chips */

.intersection .chips{
  position:relative;

  display:flex;
  flex-wrap:wrap;

  gap:7px;
}


.intersection .chips span{
  padding:
    6px
    10px;

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

  border-radius:999px;

  background:
    rgba(0,0,0,.16);

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

  font-size:8px;
  letter-spacing:.05em;

  backdrop-filter:blur(8px);
}


/* ==========================================================
   CENTER — AXISMER
   ========================================================== */

.intersection-center{
  position:relative;

  min-height:245px;

  display:flex;
  flex-direction:column;

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

  padding:
    25px
    15px
    28px;

  text-align:center;
}


/*
  The emblem already exists in the cinematic artwork.
  Remove the old CSS-generated four-petal symbol.
*/

.intersection-center .mini-symbol{
  display:none !important;
}


.intersection-center h3{
  margin:
    0
    0
    14px;

  color:#fff;

  font-size:27px;
  line-height:1.08;

  letter-spacing:-.035em;
  font-weight:350;

  text-shadow:
    0 3px 25px rgba(0,0,0,.8);
}


.intersection-center p{
  max-width:240px;

  margin:0;

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

  font-size:10px;
  line-height:1.65;

  text-shadow:
    0 2px 15px rgba(0,0,0,.8);
}


/* Fine vertical axis */

.intersection-center::before{
  content:"";

  position:absolute;

  left:50%;
  bottom:245px;

  width:1px;
  height:85px;

  background:
    linear-gradient(
      180deg,
      transparent,
      rgba(255,255,255,.40)
    );

  opacity:.55;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media(max-width:1050px){

  .intersection{
    min-height:720px;

    padding-left:5vw;
    padding-right:5vw;

    background-position:center center;
  }


  .intersection .section-label{
    margin-bottom:350px;
  }


  .intersection-grid{
    gap:15px;

    grid-template-columns:
      1fr
      .72fr
      1fr;
  }


  .intersection .panel{
    padding:25px 22px;
  }


  .intersection .panel h3{
    font-size:28px;
  }

}


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

@media(max-width:720px){

  .intersection{
    min-height:auto;

    padding:
      55px 6vw
      65px;

    background:
      linear-gradient(
        180deg,
        rgba(3,4,4,.08),
        rgba(3,4,4,.48) 42%,
        #060707 72%
      ),
      url('/assets/img/technology/axismer-human-technology-v2.webp')
        center top / auto 440px no-repeat,
      #060707;
  }


  .intersection .section-label{
    margin-bottom:370px;
  }


  .intersection-grid{
    display:flex;
    flex-direction:column;

    gap:14px;
  }


  .intersection .panel{
    width:100%;

    min-height:auto;

    padding:27px 25px;
  }


  .intersection-center{
    order:2;

    width:100%;

    min-height:auto;

    padding:32px 20px;
  }


  .intersection .panel.human{
    order:1;
  }


  .intersection .panel.technology{
    order:3;
  }


  .intersection-center::before{
    display:none;
  }


  .intersection-center h3{
    font-size:30px;
  }

}



/* ==========================================================
   AXISMER V2 — ROOTED LIFE
   PRODUCT 01
   ========================================================== */

.product{
  position:relative;

  min-height:720px;

  display:grid;

  grid-template-columns:
    minmax(300px,34%)
    minmax(0,66%);

  align-items:center;

  gap:2vw;

  padding:
    85px 4vw
    85px 7vw;

  overflow:hidden;

  background:
    radial-gradient(
      circle at 76% 48%,
      rgba(218,209,195,.26),
      transparent 38%
    ),
    #f5f2ec;

  color:#101111;
}


/* Fine editorial line */

.product::before{
  content:"";

  position:absolute;

  left:7vw;
  right:7vw;
  top:0;

  height:1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(0,0,0,.09) 20%,
      rgba(0,0,0,.09) 80%,
      transparent
    );
}


/* ==========================================================
   COPY
   ========================================================== */

.product-copy{
  position:relative;
  z-index:5;

  max-width:440px;
}


.product .eyebrow{
  margin-bottom:28px;

  color:#77736d;

  font-size:9px;
  letter-spacing:.44em;
}


.product-copy h2{
  margin:
    0
    0
    24px;

  font-size:clamp(66px,6vw,100px);
  line-height:.73;

  letter-spacing:-.075em;
  font-weight:500;

  color:#0d0e0e;
}


.product-copy h3{
  margin:
    0
    0
    24px;

  font-size:20px;
  line-height:1.25;

  letter-spacing:-.025em;
  font-weight:450;
}


.product-copy p{
  max-width:390px;

  margin:
    0
    0
    18px;

  color:#3f403e;

  font-size:14px;
  line-height:1.62;
}


.product-copy p.secondary{
  color:#77746f;
}


/* Buttons */

.product .actions{
  margin-top:30px;
}


.product .dark-btn{
  padding:14px 22px;

  background:#0b0c0c;
  color:#fff;

  border-radius:999px;

  box-shadow:
    0 12px 30px rgba(0,0,0,.12);

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}


.product .dark-btn:hover{
  transform:translateY(-2px);

  box-shadow:
    0 16px 35px rgba(0,0,0,.17);
}


/* ==========================================================
   PRODUCT VISUAL
   ========================================================== */

.product-ui{
  position:relative;

  z-index:3;

  width:100%;
  min-height:520px;

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

  background:
    url('/assets/img/products/rooted-life-v2.webp')
    center center / contain no-repeat;

  filter:
    drop-shadow(
      0 25px 35px rgba(52,43,34,.08)
    );
}


/*
   Remove the old HTML/CSS device mockup.
   We keep the markup in place for rollback,
   but the new product artwork replaces it visually.
*/

.product-ui > *{
  display:none !important;
}


/* Ambient halo behind product */

.product-ui::before{
  content:"";

  position:absolute;

  z-index:-1;

  width:75%;
  aspect-ratio:1;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(215,205,189,.32),
      rgba(215,205,189,.08) 45%,
      transparent 70%
    );

  filter:blur(15px);
}


/* Tiny product designation */

.product-ui::after{
  content:"PERSONAL INTELLIGENCE · FAMILY · FINANCE · HEALTH · LIFE";

  position:absolute;

  right:3%;
  bottom:0;

  color:rgba(48,47,44,.46);

  font-size:7px;
  letter-spacing:.32em;

  white-space:nowrap;
}


/* ==========================================================
   ROOTED LIFE — TABLET
   ========================================================== */

@media(max-width:1050px){

  .product{
    grid-template-columns:
      minmax(260px,38%)
      minmax(0,62%);

    padding-left:6vw;
    padding-right:3vw;
  }


  .product-ui{
    min-height:430px;
  }


  .product-copy h2{
    font-size:70px;
  }

}


/* ==========================================================
   ROOTED LIFE — MOBILE
   ========================================================== */

@media(max-width:720px){

  .product{
    display:flex;
    flex-direction:column;

    min-height:auto;

    padding:
      70px 6vw
      55px;

    gap:35px;
  }


  .product-copy{
    width:100%;
    max-width:none;
  }


  .product-copy h2{
    font-size:70px;
  }


  .product-copy p{
    max-width:95%;
  }


  .product-ui{
    width:112%;

    min-height:360px;

    margin-left:-6%;
  }


  .product-ui::after{
    display:none;
  }

}


/* ==========================================================
   ROOTED LIFE V2 — SEAMLESS BACKGROUND FUSION
   ========================================================== */

.product-ui{
  position:relative;
  isolation:isolate;

  background-image:
    url('/assets/img/products/rooted-life-v2.webp');

  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;

  /*
   * The generated artwork has its own warm-white background.
   * Multiply visually merges that background with AXISMER ivory.
   */
  background-blend-mode:multiply;
}


/*
 * Softly dissolve the rectangular perimeter of the artwork
 * into the surrounding product section.
 */

.product-ui{
  -webkit-mask-image:
    linear-gradient(
      90deg,
      transparent 0%,
      #000 7%,
      #000 93%,
      transparent 100%
    );

  mask-image:
    linear-gradient(
      90deg,
      transparent 0%,
      #000 7%,
      #000 93%,
      transparent 100%
    );
}


/*
 * Additional top/bottom atmospheric blend.
 */

.product-ui::before{
  content:"";

  position:absolute;
  inset:-2px;

  z-index:2;

  pointer-events:none;

  background:
    linear-gradient(
      90deg,
      #f5f2ec 0%,
      transparent 8%,
      transparent 92%,
      #f5f2ec 100%
    ),
    linear-gradient(
      180deg,
      #f5f2ec 0%,
      transparent 10%,
      transparent 90%,
      #f5f2ec 100%
    );

  opacity:.72;
}


/*
 * Keep our small AXISMER descriptor visible.
 */

.product-ui::after{
  z-index:4;
}



/* ==========================================================
   AXISMER LABS V2
   ========================================================== */

.labs{
  position:relative;

  display:block;

  min-height:650px;

  padding:0;

  overflow:hidden;

  background:
    #050707
    url('/assets/img/labs/axismer-labs-v2.webp')
    center center / cover no-repeat;

  color:#fff;
}


/*
 * The V2 artwork contains the complete desktop editorial
 * composition. Keep HTML available semantically but remove
 * duplicate visible copy on wide screens.
 */

.labs-copy,
.labs .research-list{
  position:absolute;

  width:1px;
  height:1px;

  overflow:hidden;

  clip:rect(0 0 0 0);
  clip-path:inset(50%);

  white-space:nowrap;
}


/* Soft transitions from Rooted Life and into footer */

.labs::before{
  content:"";

  position:absolute;
  z-index:2;

  left:0;
  right:0;
  top:0;

  height:55px;

  pointer-events:none;

  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.18),
      transparent
    );
}


.labs::after{
  content:"";

  position:absolute;
  z-index:2;

  left:0;
  right:0;
  bottom:0;

  height:70px;

  pointer-events:none;

  background:
    linear-gradient(
      0deg,
      rgba(0,0,0,.22),
      transparent
    );
}


/* ==========================================================
   LABS — LARGE DESKTOP
   ========================================================== */

@media(min-width:1500px){

  .labs{
    min-height:690px;

    background-size:cover;
    background-position:center center;
  }

}


/* ==========================================================
   LABS — TABLET / MOBILE
   Restore real HTML because text embedded in an image
   should not be relied on at small sizes.
   ========================================================== */

@media(max-width:900px){

  .labs{
    min-height:auto;

    padding:
      390px 7vw
      70px;

    background:
      linear-gradient(
        180deg,
        transparent 0%,
        rgba(5,7,7,.12) 25%,
        #050707 48%,
        #050707 100%
      ),
      url('/assets/img/labs/axismer-labs-v2.webp')
      66% top / auto 430px no-repeat,
      #050707;
  }


  .labs-copy,
  .labs .research-list{
    position:relative;

    width:auto;
    height:auto;

    overflow:visible;

    clip:auto;
    clip-path:none;

    white-space:normal;
  }


  .labs-copy{
    z-index:5;

    margin-bottom:45px;
  }


  .labs-copy .eyebrow{
    margin-bottom:22px;

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

    font-size:9px;
    letter-spacing:.45em;
  }


  .labs-copy h2{
    margin:0;

    color:#fff;

    font-size:clamp(46px,10vw,72px);
    line-height:.96;

    letter-spacing:-.055em;
    font-weight:350;
  }


  .labs .research-list{
    z-index:5;

    display:flex;
    flex-direction:column;
  }


  .labs .research-list p{
    max-width:520px;

    margin:
      0
      0
      30px;

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

    font-size:13px;
    line-height:1.65;
  }


  .labs .research-list a{
    display:grid;

    grid-template-columns:
      42px
      1fr
      20px;

    gap:10px;

    align-items:center;

    min-height:55px;

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

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

    text-decoration:none;

    font-size:12px;
  }


  .labs .research-list a:last-child{
    border-bottom:
      1px solid rgba(255,255,255,.13);
  }


  .labs .research-list a span{
    color:rgba(255,255,255,.35);

    font-size:9px;
    letter-spacing:.15em;
  }


  .labs .research-list a b{
    justify-self:end;

    font-weight:400;
  }

}


/* ==========================================================
   LABS — SMALL MOBILE
   ========================================================== */

@media(max-width:560px){

  .labs{
    padding-top:320px;

    background:
      linear-gradient(
        180deg,
        transparent,
        #050707 320px
      ),
      url('/assets/img/labs/axismer-labs-v2.webp')
      61% top / auto 340px no-repeat,
      #050707;
  }

}


/* =========================================================
   AXISMER — OFFICIAL BRAND LOCKUP
   ========================================================= */

.brand{
  display:flex;
  align-items:center;
  justify-self:start;
  text-decoration:none;
}

.brand-logo{
  display:block;
  width:190px;
  height:auto;
  max-height:74px;
  object-fit:contain;
  object-position:left center;
  filter:drop-shadow(0 0 14px rgba(217,210,201,.10));
  transition:
    opacity .3s ease,
    filter .3s ease,
    transform .3s ease;
}

.brand:hover .brand-logo{
  opacity:.96;
  filter:drop-shadow(0 0 18px rgba(217,210,201,.20));
  transform:translateY(-1px);
}

@media (max-width: 900px){
  .brand-logo{
    width:155px;
    max-height:62px;
  }
}

@media (max-width: 600px){
  .brand-logo{
    width:132px;
    max-height:54px;
  }
}


/* AXISMER — final header logo sizing */
.brand-logo{
  width:215px;
}

@media (max-width:900px){
  .brand-logo{
    width:170px;
  }
}

@media (max-width:600px){
  .brand-logo{
    width:145px;
  }
}



/* ==========================================================
   AXISMER V3
   FUTURE MOTION SYSTEM
   ========================================================== */

:root{
  --axismer-pointer-x: 50%;
  --axismer-pointer-y: 50%;
}


/* ---------- HERO ATMOSPHERE ---------- */

.hero{
  isolation:isolate;
}

.hero::before{
  content:"";
  position:absolute;
  inset:-8%;
  z-index:1;
  pointer-events:none;

  background:
    radial-gradient(
      circle at var(--axismer-pointer-x) var(--axismer-pointer-y),
      rgba(226,210,187,.11) 0,
      rgba(226,210,187,.045) 11%,
      transparent 27%
    );

  opacity:.85;
  transition:opacity .5s ease;
}


/* ---------- TECHNOLOGY GRID ---------- */

.hero-glow::after{
  content:"";
  position:absolute;
  inset:-300px;
  pointer-events:none;

  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);

  background-size:70px 70px;

  mask-image:
    radial-gradient(circle at center,#000 0%,transparent 67%);

  -webkit-mask-image:
    radial-gradient(circle at center,#000 0%,transparent 67%);

  opacity:.28;

  animation:
    axismerGridDrift 32s linear infinite;
}


/* ---------- ORBIT MOTION ---------- */

.hero-orbit{
  animation:
    axismerOrbitDrift 18s ease-in-out infinite alternate;

  will-change:transform;
}


/* ---------- LIGHT PULSE ---------- */

.hero-glow{
  animation:
    axismerGlowBreath 7s ease-in-out infinite;

  will-change:
    opacity,
    filter;
}


/* ---------- HERO IMAGE DEPTH ---------- */

.hero{
  --axismer-depth-x:0px;
  --axismer-depth-y:0px;
}

.hero::after{
  transform:
    translate3d(
      var(--axismer-depth-x),
      var(--axismer-depth-y),
      0
    );

  transition:transform .15s linear;
}


/* ---------- BRAND SUBTLE LIFE ---------- */

.brand-logo{
  transform-origin:center left;
}

.brand:hover .brand-logo{
  filter:
    drop-shadow(0 0 8px rgba(255,240,216,.16))
    drop-shadow(0 0 22px rgba(216,196,168,.12));
}


/* ---------- SECTION REVEALS ---------- */

.reveal{
  opacity:0;
  transform:translate3d(0,34px,0);
  filter:blur(4px);

  transition:
    opacity 1.15s cubic-bezier(.16,1,.3,1),
    transform 1.15s cubic-bezier(.16,1,.3,1),
    filter 1.15s cubic-bezier(.16,1,.3,1);
}

.reveal.visible{
  opacity:1;
  transform:translate3d(0,0,0);
  filter:blur(0);
}


/* ---------- HUMAN × TECHNOLOGY ENERGY ---------- */

.intersection{
  isolation:isolate;
}

.intersection::before{
  animation:
    axismerIntersectionPulse 8s ease-in-out infinite;
}


/* ---------- PRODUCT AMBIENCE ---------- */

.product-ui{
  transform-origin:center center;
  transition:
    transform 1s cubic-bezier(.16,1,.3,1),
    filter 1s ease;
}

.product-ui.visible{
  filter:
    drop-shadow(0 25px 45px rgba(80,65,48,.08));
}


/* ---------- LABS TECHNOLOGY PULSE ---------- */

.labs{
  isolation:isolate;
}

.labs::before{
  animation:
    axismerLabsBreath 9s ease-in-out infinite;
}


/* ---------- RESEARCH LINKS ---------- */

.labs .research-list a{
  position:relative;
  overflow:hidden;
}

.labs .research-list a::after{
  content:"";
  position:absolute;

  left:-35%;
  bottom:0;

  width:28%;
  height:1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,230,195,.9),
      transparent
    );

  opacity:0;

  transition:
    left .75s cubic-bezier(.16,1,.3,1),
    opacity .3s ease;
}

.labs .research-list a:hover::after{
  left:108%;
  opacity:1;
}


/* ==========================================================
   KEYFRAMES
   ========================================================== */

@keyframes axismerGlowBreath{

  0%,100%{
    opacity:.68;
    filter:brightness(.9);
  }

  50%{
    opacity:1;
    filter:brightness(1.18);
  }

}


@keyframes axismerOrbitDrift{

  0%{
    transform:
      rotate(-6deg)
      translate3d(-8px,0,0);
  }

  100%{
    transform:
      rotate(-3deg)
      translate3d(18px,-8px,0);
  }

}


@keyframes axismerGridDrift{

  from{
    transform:translate3d(0,0,0);
  }

  to{
    transform:translate3d(70px,70px,0);
  }

}


@keyframes axismerIntersectionPulse{

  0%,100%{
    opacity:.72;
    filter:brightness(.9);
  }

  50%{
    opacity:1;
    filter:brightness(1.08);
  }

}


@keyframes axismerLabsBreath{

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

  50%{
    opacity:.94;
  }

}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

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

  .hero-glow,
  .hero-glow::after,
  .hero-orbit,
  .intersection::before,
  .labs::before{
    animation:none !important;
  }

  .reveal{
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
  }

}


/* ==========================================================
   MOBILE PERFORMANCE
   ========================================================== */

@media (max-width:700px){

  .hero-glow::after{
    display:none;
  }

  .hero::before{
    opacity:.45;
  }

}


/* ==========================================================
   AXISMER — LIVING EMBLEM V3
   ========================================================== */

.living-emblem{
  --emblem-x:0px;
  --emblem-y:0px;

  position:absolute;

  /*
   * Calibrated for current desktop hero artwork.
   */
  width:min(35vw,570px);
  aspect-ratio:1/1;

  right:10.7%;
  top:20.5%;

  z-index:4;

  pointer-events:none;

  transform:
    translate3d(
      var(--emblem-x),
      var(--emblem-y),
      0
    );

  transition:
    transform .18s ease-out;

  opacity:0;

  animation:
    axismerEmblemEntrance
    1.8s
    cubic-bezier(.16,1,.3,1)
    .35s
    forwards;
}


/* Actual metallic emblem */

.living-emblem-image{
  position:absolute;
  inset:8%;

  width:84%;
  height:84%;

  object-fit:contain;

  opacity:.30;

  mix-blend-mode:screen;

  filter:
    brightness(1.08)
    contrast(1.02)
    drop-shadow(0 0 12px rgba(255,224,184,.16))
    drop-shadow(0 0 32px rgba(220,186,143,.09));

  transform-origin:center;

  animation:
    axismerEmblemFloat
    7s
    ease-in-out
    2.1s
    infinite;
}


/* Central energetic halo */

.living-emblem-halo{
  position:absolute;

  width:30%;
  height:30%;

  left:35%;
  top:35%;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(255,249,230,.22) 0%,
      rgba(241,205,156,.10) 28%,
      rgba(222,181,127,.035) 50%,
      transparent 72%
    );

  filter:blur(6px);

  animation:
    axismerHaloBreath
    5.8s
    ease-in-out
    infinite;
}


/* Core */

.living-emblem-core{
  position:absolute;

  left:50%;
  top:50%;

  width:11px;
  height:11px;

  border-radius:50%;

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

  background:#fff8e9;

  box-shadow:
    0 0 8px rgba(255,255,255,.95),
    0 0 22px rgba(255,224,181,.75),
    0 0 52px rgba(226,185,132,.35);

  animation:
    axismerCorePulse
    3.8s
    ease-in-out
    infinite;
}


/* Energy rings */

.energy-ring{
  position:absolute;

  left:50%;
  top:50%;

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

  border-radius:50%;

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

  opacity:0;
}


.ring-one{
  width:19%;
  height:19%;

  animation:
    axismerEnergyRing
    5s
    ease-out
    2.4s
    infinite;
}


.ring-two{
  width:19%;
  height:19%;

  animation:
    axismerEnergyRing
    5s
    ease-out
    4.9s
    infinite;
}


/* ==========================================================
   ANIMATION
   ========================================================== */

@keyframes axismerEmblemEntrance{

  0%{
    opacity:0;

    transform:
      translate3d(
        var(--emblem-x),
        calc(var(--emblem-y) + 18px),
        0
      )
      scale(.90);

    filter:blur(10px);
  }

  55%{
    opacity:.75;
  }

  100%{
    opacity:1;

    transform:
      translate3d(
        var(--emblem-x),
        var(--emblem-y),
        0
      )
      scale(1);

    filter:blur(0);
  }

}


@keyframes axismerEmblemFloat{

  0%,100%{
    transform:
      translate3d(0,0,0)
      scale(1);
  }

  50%{
    transform:
      translate3d(0,-5px,0)
      scale(1.008);
  }

}


@keyframes axismerHaloBreath{

  0%,100%{
    opacity:.42;
    transform:scale(.88);
  }

  50%{
    opacity:.92;
    transform:scale(1.16);
  }

}


@keyframes axismerCorePulse{

  0%,100%{
    transform:
      translate(-50%,-50%)
      scale(.82);

    opacity:.78;
  }

  50%{
    transform:
      translate(-50%,-50%)
      scale(1.18);

    opacity:1;
  }

}


@keyframes axismerEnergyRing{

  0%{
    opacity:0;

    transform:
      translate(-50%,-50%)
      scale(.25);
  }

  14%{
    opacity:.42;
  }

  70%{
    opacity:.05;
  }

  100%{
    opacity:0;

    transform:
      translate(-50%,-50%)
      scale(4.6);
  }

}


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

@media(max-width:1100px){

  .living-emblem{
    width:43vw;
    right:3%;
    top:24%;
  }

}


@media(max-width:700px){

  .living-emblem{
    width:58vw;
    right:-12%;
    top:50%;
    opacity:.70;
  }

  .living-emblem-image{
    opacity:.22;
  }

}


/* Accessibility */

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

  .living-emblem,
  .living-emblem-image,
  .living-emblem-halo,
  .living-emblem-core,
  .energy-ring{
    animation:none !important;
  }

  .living-emblem{
    opacity:1;
  }

}

/* ==========================================================
   AXISMER — LIVING EMBLEM V3.1
   Remove duplicated visible emblem.
   Keep only energy effects over original hero artwork.
   ========================================================== */

.living-emblem{
  width:min(35vw,570px);
  right:10.7%;
  top:20.5%;
}

/*
 * The photographic hero already contains the AXISMER emblem.
 * Do not visually duplicate it.
 */
.living-emblem-image{
  opacity:0 !important;
  visibility:hidden;
}

/* Refined energetic center */
.living-emblem-core{
  width:8px;
  height:8px;

  background:#fffaf0;

  box-shadow:
    0 0 8px rgba(255,255,255,.95),
    0 0 18px rgba(255,225,185,.70),
    0 0 42px rgba(221,180,125,.32),
    0 0 85px rgba(221,180,125,.13);

  animation:
    axismerCorePulseV31
    4.6s
    ease-in-out
    infinite;
}

/* Very subtle breathing atmosphere */
.living-emblem-halo{
  width:36%;
  height:36%;
  left:32%;
  top:32%;

  background:
    radial-gradient(
      circle,
      rgba(255,246,226,.16) 0%,
      rgba(232,197,151,.07) 30%,
      rgba(213,171,116,.025) 53%,
      transparent 72%
    );

  filter:blur(10px);

  animation:
    axismerHaloV31
    6.8s
    ease-in-out
    infinite;
}

/* Rings become much more restrained */
.energy-ring{
  border-color:rgba(255,224,183,.14);
}

.ring-one{
  animation:
    axismerRingV31
    6.5s
    ease-out
    1.5s
    infinite;
}

.ring-two{
  animation:
    axismerRingV31
    6.5s
    ease-out
    4.75s
    infinite;
}


@keyframes axismerCorePulseV31{

  0%,100%{
    transform:translate(-50%,-50%) scale(.75);
    opacity:.62;
  }

  50%{
    transform:translate(-50%,-50%) scale(1.22);
    opacity:1;
  }

}


@keyframes axismerHaloV31{

  0%,100%{
    opacity:.25;
    transform:scale(.90);
  }

  50%{
    opacity:.65;
    transform:scale(1.10);
  }

}


@keyframes axismerRingV31{

  0%{
    opacity:0;
    transform:translate(-50%,-50%) scale(.35);
  }

  12%{
    opacity:.28;
  }

  65%{
    opacity:.05;
  }

  100%{
    opacity:0;
    transform:translate(-50%,-50%) scale(3.8);
  }

}



/* ==========================================================
   AXISMER — ORBITAL SYSTEM V4
   ========================================================== */

.orbital-system-v4{
  position:absolute;
  inset:-15%;
  pointer-events:none;
  z-index:5;

  transform-style:preserve-3d;

  opacity:0;

  animation:
    axisOrbitalArrival
    2.4s
    ease-out
    1.5s
    forwards;
}


/* ----------------------------------------------------------
   ORBITS
   ---------------------------------------------------------- */

.axis-orbit{
  position:absolute;

  left:50%;
  top:50%;

  border-radius:50%;

  transform-origin:center;

  pointer-events:none;
}


/*
 * Primary warm orbit
 */

.axis-orbit-one{
  width:116%;
  height:46%;

  left:-8%;
  top:27%;

  transform:rotate(-13deg);

  animation:
    axisOrbitOne
    14s
    linear
    infinite;
}


/*
 * Secondary orbit
 */

.axis-orbit-two{
  width:91%;
  height:61%;

  left:5%;
  top:20%;

  transform:rotate(31deg);

  animation:
    axisOrbitTwo
    21s
    linear
    infinite reverse;
}


/*
 * Small inner orbit
 */

.axis-orbit-three{
  width:54%;
  height:29%;

  left:23%;
  top:36%;

  transform:rotate(-31deg);

  animation:
    axisOrbitThree
    10.5s
    linear
    infinite;
}


/* ----------------------------------------------------------
   PARTICLES
   ---------------------------------------------------------- */

.axis-particle{
  position:absolute;

  left:50%;
  top:-2px;

  display:block;

  border-radius:50%;

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

  will-change:transform;
}


.particle-warm{
  width:6px;
  height:6px;

  background:#f6dfbd;

  box-shadow:
    0 0 5px rgba(255,247,228,.95),
    0 0 13px rgba(240,203,154,.70),
    0 0 27px rgba(213,168,111,.38);
}


.particle-white{
  width:4px;
  height:4px;

  background:#fff;

  box-shadow:
    0 0 5px rgba(255,255,255,1),
    0 0 15px rgba(255,255,255,.58),
    0 0 30px rgba(220,229,238,.24);
}


.particle-micro{
  width:3px;
  height:3px;

  background:#f9ead3;

  box-shadow:
    0 0 8px rgba(246,220,184,.72);
}


/* ----------------------------------------------------------
   CENTRAL FLARE
   ---------------------------------------------------------- */

.axis-core-flare{
  position:absolute;

  left:50%;
  top:50%;

  width:4px;
  height:4px;

  border-radius:50%;

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

  background:#fff;

  opacity:0;

  box-shadow:
    0 0 10px rgba(255,255,255,.95),
    0 0 28px rgba(255,222,178,.65),
    0 0 65px rgba(224,177,117,.28);

  animation:
    axisCoreFlare
    7s
    ease-in-out
    infinite;
}


/* ----------------------------------------------------------
   MOTION
   ---------------------------------------------------------- */

@keyframes axisOrbitalArrival{

  from{
    opacity:0;
    filter:blur(5px);
  }

  to{
    opacity:1;
    filter:blur(0);
  }

}


@keyframes axisOrbitOne{

  from{
    transform:
      rotate(-13deg)
      rotate(0deg);
  }

  to{
    transform:
      rotate(-13deg)
      rotate(360deg);
  }

}


@keyframes axisOrbitTwo{

  from{
    transform:
      rotate(31deg)
      rotate(0deg);
  }

  to{
    transform:
      rotate(31deg)
      rotate(360deg);
  }

}


@keyframes axisOrbitThree{

  from{
    transform:
      rotate(-31deg)
      rotate(0deg);
  }

  to{
    transform:
      rotate(-31deg)
      rotate(360deg);
  }

}


@keyframes axisCoreFlare{

  0%,42%,58%,100%{
    opacity:0;
    transform:
      translate(-50%,-50%)
      scale(.3);
  }

  48%{
    opacity:.35;
  }

  50%{
    opacity:.9;

    transform:
      translate(-50%,-50%)
      scale(2.3);
  }

  53%{
    opacity:.18;

    transform:
      translate(-50%,-50%)
      scale(4.5);
  }

}


/* ----------------------------------------------------------
   SUBTLE HERO DEPTH
   ---------------------------------------------------------- */

.hero{
  --axis-mouse-x:0px;
  --axis-mouse-y:0px;
}

.hero::before{
  transform:
    translate3d(
      var(--axis-mouse-x),
      var(--axis-mouse-y),
      0
    );

  transition:
    transform .7s
    cubic-bezier(.22,.61,.36,1);
}


/* ----------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------- */

@media(max-width:700px){

  .orbital-system-v4{
    opacity:.55;
  }

  .axis-orbit-three{
    display:none;
  }

}


/* ----------------------------------------------------------
   ACCESSIBILITY
   ---------------------------------------------------------- */

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

  .orbital-system-v4{
    display:none !important;
  }

  .hero::before{
    transform:none !important;
  }

}


/* ==========================================================
   AXISMER V4.1 — ALIGN ENERGY CORE WITH HERO SUN
   ========================================================== */

/*
 * The photographic emblem's luminous core sits above the
 * geometric center of the Living Emblem overlay.
 */

.living-emblem-core{
  left:50% !important;
  top:35.5% !important;
}

.living-emblem-halo{
  left:32% !important;
  top:17.5% !important;
}

.axis-core-flare{
  left:50% !important;
  top:35.5% !important;
}

/*
 * Slightly move the orbital coordinate system upward
 * so particles visually orbit the actual luminous core.
 */

.orbital-system-v4{
  transform:translateY(-14.5%);
}


/* AXISMER V4.2 — FINAL CORE MICRO ALIGNMENT */

.living-emblem-core,
.axis-core-flare{
  left:51.2% !important;
  top:34.6% !important;
}


/* ==========================================================
   AXISMER — CINEMATIC SCROLL EXPERIENCE V5
   ========================================================== */

:root{
  --axismer-scroll-ease:cubic-bezier(.16,1,.3,1);
}

/* ----------------------------------------------------------
   SCROLL-AWARE SECTIONS
   ---------------------------------------------------------- */

.belief,
.intersection,
.product,
.labs{
  --section-progress:0;
  --section-shift:0px;
}

/* ----------------------------------------------------------
   HUMANITY / BELIEF
   ---------------------------------------------------------- */

.human-orb{
  background-position:
    35%
    calc(50% + var(--belief-parallax, 0px)) !important;

  will-change:background-position;
}

.belief > div:first-child{
  transform:
    translate3d(
      0,
      var(--belief-copy-y, 0px),
      0
    );

  will-change:transform;
}

/* ----------------------------------------------------------
   HUMAN × TECHNOLOGY
   ---------------------------------------------------------- */

.intersection{
  background-position:
    center
    calc(50% + var(--intersection-parallax, 0px));

  will-change:background-position;
}

.intersection-grid{
  transform:
    translate3d(
      0,
      var(--intersection-content-y, 0px),
      0
    );

  will-change:transform;
}

.intersection .section-label{
  transform:
    translate3d(
      0,
      var(--intersection-label-y, 0px),
      0
    );

  will-change:transform;
}

/* ----------------------------------------------------------
   ROOTED LIFE
   ---------------------------------------------------------- */

.product-copy{
  transform:
    translate3d(
      0,
      var(--product-copy-y, 0px),
      0
    );

  will-change:transform;
}

.product-ui{
  transform:
    translate3d(
      0,
      var(--product-ui-y, 0px),
      0
    )
    scale(var(--product-ui-scale, 1));

  will-change:transform,filter;
}

/* Ambient movement without turning the product into a card */

.product::after{
  content:"";
  position:absolute;
  z-index:0;
  width:44vw;
  height:44vw;
  min-width:420px;
  min-height:420px;
  max-width:820px;
  max-height:820px;
  right:4%;
  top:50%;
  transform:
    translate3d(
      0,
      calc(-50% + var(--product-light-y, 0px)),
      0
    );
  border-radius:50%;
  pointer-events:none;

  background:
    radial-gradient(
      circle,
      rgba(205,185,158,.16) 0%,
      rgba(205,185,158,.055) 34%,
      transparent 68%
    );

  filter:blur(22px);
}

/* ----------------------------------------------------------
   AXISMER LABS
   ---------------------------------------------------------- */

.labs{
  background-position:
    center
    calc(50% + var(--labs-parallax, 0px));

  will-change:background-position;
}

.labs-copy{
  transform:
    translate3d(
      0,
      var(--labs-copy-y, 0px),
      0
    );

  will-change:transform;
}

.labs .research-list{
  transform:
    translate3d(
      0,
      var(--labs-list-y, 0px),
      0
    );

  will-change:transform;
}

/* ----------------------------------------------------------
   SECTION EDGE — CINEMATIC CONTINUITY
   ---------------------------------------------------------- */

.belief,
.intersection,
.product,
.labs{
  position:relative;
}

.intersection{
  box-shadow:
    inset 0 70px 100px -100px rgba(0,0,0,.8);
}

.product{
  box-shadow:
    inset 0 75px 100px -110px rgba(0,0,0,.42);
}

.labs{
  box-shadow:
    inset 0 85px 110px -110px rgba(0,0,0,.85);
}

/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media(max-width:720px){

  .human-orb,
  .intersection,
  .labs{
    background-position:center center !important;
  }

  .belief > div:first-child,
  .intersection-grid,
  .intersection .section-label,
  .product-copy,
  .product-ui,
  .labs-copy,
  .labs .research-list{
    transform:none !important;
  }

  .product::after{
    display:none;
  }
}

/* ----------------------------------------------------------
   ACCESSIBILITY
   ---------------------------------------------------------- */

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

  .human-orb,
  .intersection,
  .labs{
    background-position:center center !important;
  }

  .belief > div:first-child,
  .intersection-grid,
  .intersection .section-label,
  .product-copy,
  .product-ui,
  .labs-copy,
  .labs .research-list{
    transform:none !important;
  }

}


/* ==========================================================
   AXISMER — CINEMATIC SCROLL V5.1
   More perceptible depth
   ========================================================== */

@media(min-width:721px){

  /* HUMANITY */

  .human-orb{
    background-position:
      35%
      calc(50% + var(--belief-parallax-strong, 0px)) !important;
  }

  .belief > div:first-child{
    transform:
      translate3d(
        0,
        var(--belief-copy-strong, 0px),
        0
      ) !important;
  }


  /* HUMAN × TECHNOLOGY */

  .intersection{
    background-position:
      center
      calc(50% + var(--intersection-parallax-strong, 0px)) !important;
  }

  .intersection-grid{
    transform:
      translate3d(
        0,
        var(--intersection-grid-strong, 0px),
        0
      ) !important;
  }


  /* ROOTED LIFE */

  .product-copy{
    transform:
      translate3d(
        0,
        var(--product-copy-strong, 0px),
        0
      ) !important;
  }

  .product-ui{
    transform:
      translate3d(
        0,
        var(--product-ui-strong, 0px),
        0
      )
      scale(
        var(--product-scale-strong, 1)
      ) !important;

    filter:
      drop-shadow(
        0
        var(--product-shadow-y, 25px)
        55px
        rgba(70,55,38,.15)
      );
  }


  /* LABS */

  .labs{
    background-position:
      center
      calc(50% + var(--labs-parallax-strong, 0px)) !important;
  }

  .labs-copy{
    transform:
      translate3d(
        0,
        var(--labs-copy-strong, 0px),
        0
      ) !important;
  }

  .labs .research-list{
    transform:
      translate3d(
        0,
        var(--labs-list-strong, 0px),
        0
      ) !important;
  }

}



/* ==========================================================
   AXISMER — FOOTER BRAND FIX V1
   ========================================================== */

.footer-brand{
  display:flex;
  align-items:center;
  gap:16px;
}

.footer-brand-logo{
  display:block;
  width:44px;
  height:44px;
  object-fit:cover;
  object-position:left center;
  flex:0 0 auto;
}

.footer-brand-text{
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.footer-brand-text strong{
  display:block;
  margin:0;
  font-size:18px;
  font-weight:600;
  line-height:1;
  letter-spacing:.35em;
  color:#111;
}

.footer-brand-text small{
  display:block;
  margin-top:8px;
  font-size:12px;
  line-height:1.25;
  color:#888;
  letter-spacing:0;
}


/* old CSS-built symbol must never appear inside footer */

footer .axis-symbol{
  display:none !important;
}


@media(max-width:720px){

  .footer-brand-logo{
    width:40px;
    height:40px;
  }

  .footer-brand-text strong{
    font-size:16px;
  }

  .footer-brand-text small{
    font-size:11px;
  }

}


/* ==========================================================
   AXISMER — FOOTER EMBLEM V2
   ========================================================== */

.footer-brand-logo{
  width:38px !important;
  height:38px !important;

  object-fit:contain !important;
  object-position:center !important;

  flex:0 0 38px;

  image-rendering:auto;

  filter:
    drop-shadow(0 2px 5px rgba(0,0,0,.10));

  transform:translateZ(0);
}

.footer-brand{
  gap:15px !important;
}

@media(max-width:720px){

  .footer-brand-logo{
    width:34px !important;
    height:34px !important;
    flex-basis:34px;
  }

}



/* ==========================================================
   AXISMER — PREMIUM GLOBAL NAVIGATION / HOME
   Matches Philosophy visual language
   ========================================================== */

@media (min-width:901px){

    /* ---------- CENTRAL NAV ---------- */

    .nav > nav{
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;

        gap:38px !important;

        font-size:11px !important;
        font-weight:500 !important;

        text-transform:uppercase !important;
        letter-spacing:.19em !important;

        color:#f6f5f3 !important;
    }


    .nav > nav a{
        position:relative !important;

        display:inline-flex !important;
        align-items:center !important;

        padding:12px 2px 13px !important;

        color:rgba(246,245,243,.76) !important;
        opacity:1 !important;

        text-shadow:
            0 0 18px rgba(246,245,243,.08) !important;

        transition:
            color .35s ease,
            text-shadow .35s ease,
            transform .35s cubic-bezier(.16,1,.3,1) !important;
    }


    /* Metallic underline */

    .nav > nav a::after{
        content:"" !important;

        position:absolute !important;

        left:50% !important;
        bottom:5px !important;

        width:0 !important;
        height:1px !important;

        background:
            linear-gradient(
                90deg,
                transparent,
                #bfa47e 25%,
                #f0dfc5 50%,
                #bfa47e 75%,
                transparent
            ) !important;

        opacity:0 !important;

        transform:translateX(-50%) !important;

        box-shadow:
            0 0 9px rgba(217,190,151,.35) !important;

        transition:
            width .4s cubic-bezier(.16,1,.3,1),
            opacity .3s ease !important;
    }


    .nav > nav a:hover{
        color:#fffaf2 !important;

        transform:translateY(-1px) !important;

        text-shadow:
            0 0 16px rgba(255,240,216,.20),
            0 0 32px rgba(191,164,126,.12) !important;
    }


    .nav > nav a:hover::after{
        width:72% !important;
        opacity:1 !important;
    }


    /* ---------- ROOTED LIFE CTA ---------- */

    .nav .nav-cta{
        justify-self:end !important;

        display:inline-flex !important;
        align-items:center !important;
        justify-content:center !important;

        min-height:40px !important;

        padding:0 18px !important;

        border:1px solid rgba(217,210,201,.28) !important;
        border-radius:3px !important;

        background:
            linear-gradient(
                180deg,
                rgba(255,255,255,.045),
                rgba(255,255,255,.012)
            ) !important;

        color:#f6f5f3 !important;

        font-size:10px !important;
        font-weight:500 !important;

        text-transform:uppercase !important;
        letter-spacing:.16em !important;

        backdrop-filter:blur(12px) !important;
        -webkit-backdrop-filter:blur(12px) !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.045),
            0 8px 30px rgba(0,0,0,.10) !important;

        transition:
            border-color .35s ease,
            background .35s ease,
            color .35s ease,
            transform .35s cubic-bezier(.16,1,.3,1),
            box-shadow .35s ease !important;
    }


    .nav .nav-cta span{
        margin-left:10px !important;

        color:#d8bc94 !important;

        font-size:13px !important;

        transition:
            transform .35s cubic-bezier(.16,1,.3,1) !important;
    }


    .nav .nav-cta:hover{
        color:#fff !important;

        border-color:rgba(217,190,151,.62) !important;

        background:
            linear-gradient(
                180deg,
                rgba(217,190,151,.11),
                rgba(217,190,151,.035)
            ) !important;

        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.07),
            0 0 24px rgba(191,164,126,.08) !important;

        transform:translateY(-1px) !important;
    }


    .nav .nav-cta:hover span{
        transform:translate(2px,-2px) !important;
    }

}


/* END AXISMER PREMIUM GLOBAL NAVIGATION / HOME */


/* ==========================================================
   AXISMER — LIVING CONNECTION SYSTEM
   Human ↔ Technology
   ========================================================== */

.intersection{
    position:relative;
    overflow:hidden;
    isolation:isolate;
}


/* Animation plane */

.axismer-connection-flow{
    position:absolute;

    inset:0;

    z-index:1;

    pointer-events:none;

    overflow:hidden;

    opacity:.82;

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            transparent 2%,
            #000 15%,
            #000 88%,
            transparent 100%
        );

    mask-image:
        linear-gradient(
            to bottom,
            transparent 2%,
            #000 15%,
            #000 88%,
            transparent 100%
        );
}


.connection-svg{
    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    overflow:visible;
}


/* Keep actual content above animation */

.intersection > .section-label,
.intersection > .intersection-grid{
    position:relative;
    z-index:3;
}


/* ----------------------------------------------------------
   CONNECTION LINES
   ---------------------------------------------------------- */

.connection-path{
    fill:none;

    stroke-width:.85;

    vector-effect:non-scaling-stroke;

    stroke-linecap:round;

    opacity:.30;

    stroke-dasharray:2 10;

    animation:
        axismer-line-drift 18s linear infinite;
}


.connection-path.warm{
    stroke:url(#axismer-warm);
}


.connection-path.cool{
    stroke:url(#axismer-cool);
}


.connection-path.faint{
    opacity:.15;
    stroke-width:.65;
}


/* Very subtle secondary aura */

.connection-path.warm:not(.faint){
    filter:
        drop-shadow(0 0 5px rgba(210,164,108,.16));
}


.connection-path.cool:not(.faint){
    filter:
        drop-shadow(0 0 5px rgba(123,183,205,.14));
}


/* ----------------------------------------------------------
   PARTICLES
   ---------------------------------------------------------- */

.flow-dot{
    opacity:.95;
}


.warm-dot{
    fill:#f2d3a5;

    filter:
        drop-shadow(0 0 3px rgba(240,194,132,.95))
        drop-shadow(0 0 9px rgba(203,145,82,.50));
}


.cool-dot{
    fill:#d7f0f5;

    filter:
        drop-shadow(0 0 3px rgba(177,224,237,.90))
        drop-shadow(0 0 9px rgba(103,176,202,.48));
}


.flow-dot.small{
    opacity:.72;
}


.flow-dot.tiny{
    opacity:.50;
}


/* ----------------------------------------------------------
   CENTRAL CONVERGENCE
   ---------------------------------------------------------- */

.connection-core-ring{
    fill:none;

    stroke:rgba(229,210,182,.25);

    stroke-width:.7;

    transform-origin:800px 350px;

    animation:
        axismer-core-breathe 4.8s
        cubic-bezier(.4,0,.2,1)
        infinite;
}


.connection-core{
    fill:#f3e3ca;

    opacity:.78;

    filter:
        drop-shadow(0 0 4px rgba(242,213,170,.9))
        drop-shadow(0 0 15px rgba(218,170,111,.45));

    transform-origin:800px 350px;

    animation:
        axismer-core-pulse 3.4s
        ease-in-out
        infinite;
}


/* ----------------------------------------------------------
   MOTION
   ---------------------------------------------------------- */

@keyframes axismer-line-drift{

    from{
        stroke-dashoffset:0;
    }

    to{
        stroke-dashoffset:-120;
    }

}


@keyframes axismer-core-breathe{

    0%,100%{
        opacity:.18;
        transform:scale(.82);
    }

    50%{
        opacity:.55;
        transform:scale(1.28);
    }

}


@keyframes axismer-core-pulse{

    0%,100%{
        opacity:.55;
        transform:scale(.85);
    }

    50%{
        opacity:1;
        transform:scale(1.35);
    }

}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width:900px){

    .axismer-connection-flow{
        opacity:.48;
    }

    .flow-dot.small,
    .flow-dot.tiny,
    .connection-path.faint{
        display:none;
    }

}


/* Accessibility */

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

    .connection-path,
    .connection-core-ring,
    .connection-core{
        animation:none !important;
    }

    .flow-dot{
        display:none !important;
    }

}


/* END AXISMER LIVING CONNECTION SYSTEM */


/* ==========================================================
   AXISMER CONNECTION FLOW V2
   Energy tracers following the visual filaments
   ========================================================== */


/*
 * The SVG paths become almost invisible.
 * The background artwork remains the dominant network.
 */

.axismer-connection-flow .connection-path{
    opacity:.10 !important;
    stroke-width:.55 !important;
    stroke-dasharray:1 15 !important;
}

.axismer-connection-flow .connection-path.faint{
    opacity:.055 !important;
}


/*
 * Main particle becomes the head of the signal.
 */

.axismer-connection-flow .flow-dot{
    filter:none !important;
}

.axismer-connection-flow .warm-dot{
    fill:#ffe3b8 !important;

    filter:
        drop-shadow(0 0 2px rgba(255,231,192,1))
        drop-shadow(0 0 6px rgba(231,183,119,.95))
        drop-shadow(0 0 15px rgba(198,132,67,.65)) !important;
}

.axismer-connection-flow .cool-dot{
    fill:#dcf7ff !important;

    filter:
        drop-shadow(0 0 2px rgba(224,250,255,1))
        drop-shadow(0 0 6px rgba(155,219,238,.95))
        drop-shadow(0 0 15px rgba(91,170,201,.60)) !important;
}


/*
 * Signals are intentionally small.
 * They should look embedded in the existing network,
 * not floating over the artwork.
 */

.axismer-connection-flow .flow-dot:not(.small):not(.tiny){
    r:2.5px;
}

.axismer-connection-flow .flow-dot.small{
    r:1.8px;
}

.axismer-connection-flow .flow-dot.tiny{
    r:1.25px;
}


/*
 * The central node is restrained because the actual
 * AXISMER emblem in the artwork remains the protagonist.
 */

.axismer-connection-flow .connection-core-ring{
    opacity:.22 !important;
}

.axismer-connection-flow .connection-core{
    opacity:.70 !important;
}


/* END AXISMER CONNECTION FLOW V2 */


/* ==========================================================
   AXISMER — FIBER OPTIC CONNECTION FLOW V3
   Light travels ALONG the connection lines
   ========================================================== */


/* Hide old floating particle heads */

.axismer-connection-flow .flow-dot{
    opacity:0 !important;
}


/* Base network remains extremely subtle */

.axismer-connection-flow .connection-path{
    opacity:.16 !important;

    stroke-width:.65 !important;

    stroke-dasharray:none !important;

    animation:none !important;
}


/* HUMAN — warm connection */

.axismer-connection-flow .connection-path.warm{
    stroke:url(#axismer-warm) !important;

    filter:
        drop-shadow(0 0 3px rgba(220,170,105,.18)) !important;
}


/* TECHNOLOGY — cool connection */

.axismer-connection-flow .connection-path.cool{
    stroke:url(#axismer-cool) !important;

    filter:
        drop-shadow(0 0 3px rgba(126,192,216,.16)) !important;
}


/*
 * Moving luminous segments.
 *
 * The bright dash itself travels along the SVG path,
 * creating a fiber-optic / data transmission effect.
 */

.axismer-connection-flow .connection-path.warm{
    stroke-dasharray:
        1 18 3 32 1 48 70 900 !important;

    stroke-dashoffset:0;

    animation:
        axismer-fiber-warm 7.5s
        linear
        infinite !important;
}


.axismer-connection-flow .connection-path.cool{
    stroke-dasharray:
        1 22 2 38 1 55 70 900 !important;

    stroke-dashoffset:0;

    animation:
        axismer-fiber-cool 8.4s
        linear
        infinite !important;
}


/*
 * Secondary paths travel at different speeds.
 * This prevents the network from looking mechanical.
 */

.axismer-connection-flow #axismer-path-l2{
    animation-duration:10.8s !important;
    animation-delay:-3.2s !important;
}

.axismer-connection-flow #axismer-path-l3{
    animation-duration:13.2s !important;
    animation-delay:-7.1s !important;
}

.axismer-connection-flow #axismer-path-r2{
    animation-duration:11.6s !important;
    animation-delay:-5.4s !important;
}

.axismer-connection-flow #axismer-path-r3{
    animation-duration:14.1s !important;
    animation-delay:-8.3s !important;
}


/* Primary paths slightly more visible */

.axismer-connection-flow #axismer-path-l1,
.axismer-connection-flow #axismer-path-r1{
    opacity:.62 !important;

    stroke-width:1.15 !important;
}


/* Secondary paths */

.axismer-connection-flow #axismer-path-l2,
.axismer-connection-flow #axismer-path-r2{
    opacity:.34 !important;

    stroke-width:.85 !important;
}


/* Tertiary / atmospheric paths */

.axismer-connection-flow #axismer-path-l3,
.axismer-connection-flow #axismer-path-r3{
    opacity:.22 !important;

    stroke-width:.65 !important;
}


/* ----------------------------------------------------------
   TRAVEL DIRECTION
   ---------------------------------------------------------- */

/* Human -> AXISMER */

@keyframes axismer-fiber-warm{

    from{
        stroke-dashoffset:0;
    }

    to{
        stroke-dashoffset:-1073;
    }

}


/*
 * Technology -> AXISMER.
 * Opposite offset direction because these paths
 * originate on the right side.
 */

@keyframes axismer-fiber-cool{

    from{
        stroke-dashoffset:0;
    }

    to{
        stroke-dashoffset:-1093;
    }

}


/* ----------------------------------------------------------
   CENTRAL CONVERGENCE
   ---------------------------------------------------------- */

.axismer-connection-flow .connection-core-ring{
    stroke:rgba(234,216,190,.34) !important;

    filter:
        drop-shadow(0 0 7px rgba(222,185,135,.20)) !important;
}


.axismer-connection-flow .connection-core{
    fill:#f6e5c9 !important;

    filter:
        drop-shadow(0 0 5px rgba(255,225,181,.85))
        drop-shadow(0 0 16px rgba(207,155,91,.38)) !important;
}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width:900px){

    .axismer-connection-flow #axismer-path-l3,
    .axismer-connection-flow #axismer-path-r3{
        display:none !important;
    }

    .axismer-connection-flow .connection-path{
        stroke-width:.7 !important;
    }

}


/* ----------------------------------------------------------
   REDUCED MOTION
   ---------------------------------------------------------- */

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

    .axismer-connection-flow .connection-path{
        animation:none !important;
        stroke-dasharray:none !important;
        opacity:.18 !important;
    }

}


/* END AXISMER FIBER OPTIC CONNECTION FLOW V3 */


/* ==========================================================
   AXISMER CONNECTION FLOW V4
   Calibrated optical data packets
   ========================================================== */


/*
 * Hide original JS particle circles.
 * Motion is now generated by light packets inside each path.
 */

.axismer-connection-flow .flow-dot{
    display:none !important;
}


/* Base paths */

.axismer-connection-flow .connection-path{
    fill:none !important;

    stroke-linecap:round !important;

    vector-effect:non-scaling-stroke !important;

    animation-timing-function:linear !important;
    animation-iteration-count:infinite !important;
}


/* ----------------------------------------------------------
   HUMAN / WARM
   ---------------------------------------------------------- */

.axismer-connection-flow #axismer-path-l1{
    stroke:#e8bf86 !important;

    stroke-width:1.35 !important;

    opacity:.88 !important;

    stroke-dasharray:
        2 30
        5 55
        3 80
        82 780 !important;

    filter:
        drop-shadow(0 0 2px rgba(255,226,183,.95))
        drop-shadow(0 0 7px rgba(218,163,96,.52)) !important;

    animation:
        axismer-v4-human 6.8s linear infinite !important;
}


.axismer-connection-flow #axismer-path-l2{
    stroke:#cfa36b !important;

    stroke-width:.85 !important;

    opacity:.52 !important;

    stroke-dasharray:
        1 45
        3 70
        55 850 !important;

    filter:
        drop-shadow(0 0 5px rgba(207,156,91,.34)) !important;

    animation:
        axismer-v4-human 9.7s linear infinite -3.1s !important;
}


.axismer-connection-flow #axismer-path-l3{
    stroke:#d8b47f !important;

    stroke-width:.65 !important;

    opacity:.32 !important;

    stroke-dasharray:
        2 65
        42 900 !important;

    filter:
        drop-shadow(0 0 4px rgba(215,173,114,.25)) !important;

    animation:
        axismer-v4-human 12.4s linear infinite -6.7s !important;
}


/* ----------------------------------------------------------
   TECHNOLOGY / COOL
   ---------------------------------------------------------- */

.axismer-connection-flow #axismer-path-r1{
    stroke:#bce6ef !important;

    stroke-width:1.35 !important;

    opacity:.82 !important;

    stroke-dasharray:
        2 30
        5 55
        3 80
        82 780 !important;

    filter:
        drop-shadow(0 0 2px rgba(219,248,255,.95))
        drop-shadow(0 0 7px rgba(111,188,215,.50)) !important;

    animation:
        axismer-v4-tech 7.2s linear infinite -1.3s !important;
}


.axismer-connection-flow #axismer-path-r2{
    stroke:#8fc6d7 !important;

    stroke-width:.85 !important;

    opacity:.48 !important;

    stroke-dasharray:
        1 45
        3 70
        55 850 !important;

    filter:
        drop-shadow(0 0 5px rgba(106,183,208,.32)) !important;

    animation:
        axismer-v4-tech 10.3s linear infinite -4.4s !important;
}


.axismer-connection-flow #axismer-path-r3{
    stroke:#a7d4df !important;

    stroke-width:.65 !important;

    opacity:.30 !important;

    stroke-dasharray:
        2 65
        42 900 !important;

    filter:
        drop-shadow(0 0 4px rgba(121,192,211,.23)) !important;

    animation:
        axismer-v4-tech 13.1s linear infinite -7.8s !important;
}


/* ----------------------------------------------------------
   FLOW
   ---------------------------------------------------------- */

/* Human -> emblem */

@keyframes axismer-v4-human{

    from{
        stroke-dashoffset:0;
    }

    to{
        stroke-dashoffset:-1050;
    }

}


/*
 * Right-hand paths are drawn Technology -> center,
 * so negative movement also travels toward the emblem.
 */

@keyframes axismer-v4-tech{

    from{
        stroke-dashoffset:0;
    }

    to{
        stroke-dashoffset:-1050;
    }

}


/* ----------------------------------------------------------
   CENTER RESPONSE
   ---------------------------------------------------------- */

.axismer-connection-flow .connection-core-ring{
    r:18px !important;

    stroke:rgba(240,218,185,.32) !important;

    stroke-width:.7 !important;

    opacity:.35 !important;

    animation:
        axismer-v4-center-ring 3.6s ease-in-out infinite !important;
}


.axismer-connection-flow .connection-core{
    r:2.7px !important;

    fill:#fff0d8 !important;

    opacity:.9 !important;

    filter:
        drop-shadow(0 0 4px rgba(255,235,202,1))
        drop-shadow(0 0 13px rgba(218,167,101,.50)) !important;

    animation:
        axismer-v4-center-core 3.6s ease-in-out infinite !important;
}


@keyframes axismer-v4-center-ring{

    0%,100%{
        opacity:.16;
        transform:scale(.8);
    }

    50%{
        opacity:.48;
        transform:scale(1.22);
    }

}


@keyframes axismer-v4-center-core{

    0%,100%{
        opacity:.62;
        transform:scale(.82);
    }

    50%{
        opacity:1;
        transform:scale(1.32);
    }

}


/* ----------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------- */

@media (max-width:900px){

    .axismer-connection-flow #axismer-path-l3,
    .axismer-connection-flow #axismer-path-r3{
        display:none !important;
    }

}


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

    .axismer-connection-flow .connection-path,
    .axismer-connection-flow .connection-core,
    .axismer-connection-flow .connection-core-ring{
        animation:none !important;
    }

}


/* END AXISMER CONNECTION FLOW V4 */


/* ==========================================================
   AXISMER — NEURAL HEAD FLOW V1
   Thought / intelligence paths
   ========================================================== */


/* HUMAN HEAD -> AXISMER */

.axismer-connection-flow #axismer-path-head-human{

    fill:none !important;

    stroke:#e6bd83 !important;
    stroke-width:.8 !important;

    opacity:.52 !important;

    stroke-linecap:round !important;

    stroke-dasharray:
        1 38
        2 55
        3 72
        54 820 !important;

    filter:
        drop-shadow(0 0 2px rgba(255,225,180,.85))
        drop-shadow(0 0 7px rgba(209,153,85,.38)) !important;

    animation:
        axismer-neural-human
        8.7s
        linear
        infinite !important;
}


/* TECHNOLOGY HEAD -> AXISMER */

.axismer-connection-flow #axismer-path-head-tech{

    fill:none !important;

    stroke:#a8d9e7 !important;
    stroke-width:.8 !important;

    opacity:.50 !important;

    stroke-linecap:round !important;

    stroke-dasharray:
        1 38
        2 55
        3 72
        54 820 !important;

    filter:
        drop-shadow(0 0 2px rgba(215,246,255,.85))
        drop-shadow(0 0 7px rgba(99,181,211,.38)) !important;

    animation:
        axismer-neural-tech
        9.1s
        linear
        infinite
        -3.8s !important;
}


/*
 * Small luminous packets travel from each head
 * toward the AXISMER convergence point.
 */

@keyframes axismer-neural-human{

    from{
        stroke-dashoffset:0;
    }

    to{
        stroke-dashoffset:-1045;
    }

}


@keyframes axismer-neural-tech{

    from{
        stroke-dashoffset:0;
    }

    to{
        stroke-dashoffset:-1045;
    }

}


/*
 * Gentle breathing of the complete neural channel.
 * Keeps it secondary to the main central connection.
 */

.axismer-connection-flow .neural-head{
    vector-effect:non-scaling-stroke !important;
}


/* Mobile: preserve only one upper conceptual channel */

@media (max-width:700px){

    .axismer-connection-flow #axismer-path-head-human,
    .axismer-connection-flow #axismer-path-head-tech{
        opacity:.30 !important;
        stroke-width:.65 !important;
    }

}


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

    .axismer-connection-flow .neural-head{
        animation:none !important;
        opacity:.18 !important;
        stroke-dasharray:none !important;
    }

}


/* END AXISMER NEURAL HEAD FLOW V1 */


/* ==========================================================
   AXISMER — INTERSECTION PANEL TYPOGRAPHY FINAL
   Human / Technology
   ========================================================== */

@media (min-width:721px){

    /*
     * Description
     */

    .intersection .panel > p{
        position:relative !important;

        margin-top:10px !important;
        margin-bottom:0 !important;

        max-width:92% !important;

        line-height:1.55 !important;

        z-index:2 !important;
    }


    /*
     * REAL chip container.
     * Explicit normal document flow prevents overlap.
     */

    .intersection .panel > .chips{
        position:relative !important;

        top:auto !important;
        right:auto !important;
        bottom:auto !important;
        left:auto !important;

        transform:none !important;

        display:flex !important;
        align-items:center !important;
        flex-wrap:wrap !important;

        gap:7px !important;

        width:auto !important;
        height:auto !important;

        margin-top:18px !important;

        z-index:3 !important;
    }


    /*
     * Individual chips
     */

    .intersection .panel > .chips > span{
        position:relative !important;

        top:auto !important;
        right:auto !important;
        bottom:auto !important;
        left:auto !important;

        transform:none !important;

        display:inline-flex !important;
        align-items:center !important;
        justify-content:center !important;

        margin:0 !important;
    }

}


/* Mobile */

@media (max-width:720px){

    .intersection .panel > p{
        margin-bottom:0 !important;
        line-height:1.55 !important;
    }

    .intersection .panel > .chips{
        position:relative !important;

        top:auto !important;
        right:auto !important;
        bottom:auto !important;
        left:auto !important;

        transform:none !important;

        display:flex !important;
        flex-wrap:wrap !important;

        gap:7px !important;

        margin-top:16px !important;
    }

}


/* END AXISMER INTERSECTION PANEL TYPOGRAPHY FINAL */


/* ==========================================================
   AXISMER LABS — LIVING RESEARCH NETWORK V1
   Five research streams → one intelligence core
   ========================================================== */

.labs{
    position:relative !important;
    isolation:isolate !important;
    overflow:hidden !important;
}


/* Transparent animation plane */

.labs-energy-network{
    position:absolute;

    inset:0;

    z-index:1;

    pointer-events:none;

    overflow:hidden;
}


.labs-energy-svg{
    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    overflow:visible;
}


/*
 * Existing content stays above the animated network.
 */

.labs > .labs-copy,
.labs > .research-list{
    position:relative;
    z-index:4;
}


/* ==========================================================
   COMMON OPTICAL PATH
   ========================================================== */

.labs-flow-path{
    fill:none;

    stroke-linecap:round;

    vector-effect:non-scaling-stroke;

    stroke-width:1.15;

    stroke-dasharray:
        2 30
        4 52
        2 75
        72 950;

    opacity:.82;

    animation-timing-function:linear;
    animation-iteration-count:infinite;
}


/* ==========================================================
   01 — HUMAN-CENTERED AI / GOLD
   ========================================================== */

.labs-gold{
    stroke:#e9c38d;

    filter:
        drop-shadow(0 0 2px rgba(255,229,190,.95))
        drop-shadow(0 0 8px rgba(216,164,96,.62));

    animation:
        labsFlowGold 7.2s linear infinite;
}


/* ==========================================================
   02 — PERSONAL INTELLIGENCE / ELECTRIC BLUE
   ========================================================== */

.labs-blue{
    stroke:#8ccaff;

    filter:
        drop-shadow(0 0 2px rgba(204,236,255,.95))
        drop-shadow(0 0 9px rgba(70,158,239,.65));

    animation:
        labsFlowBlue 8.1s linear infinite -2.3s;
}


/* ==========================================================
   03 — FINANCIAL BEHAVIOR / AQUA GREEN
   ========================================================== */

.labs-aqua{
    stroke:#9ed8c8;

    filter:
        drop-shadow(0 0 2px rgba(210,255,239,.92))
        drop-shadow(0 0 8px rgba(87,181,155,.55));

    animation:
        labsFlowAqua 9.4s linear infinite -4.1s;
}


/* ==========================================================
   04 — DIGITAL IDENTITY / COPPER
   ========================================================== */

.labs-copper{
    stroke:#e2a56f;

    filter:
        drop-shadow(0 0 2px rgba(255,218,182,.95))
        drop-shadow(0 0 9px rgba(213,128,65,.58));

    animation:
        labsFlowCopper 8.7s linear infinite -5.6s;
}


/* ==========================================================
   05 — HUMAN INTELLIGENCE / DEEP BLUE
   ========================================================== */

.labs-deepblue{
    stroke:#78aef5;

    filter:
        drop-shadow(0 0 2px rgba(194,222,255,.95))
        drop-shadow(0 0 9px rgba(68,119,221,.62));

    animation:
        labsFlowDeepBlue 10.2s linear infinite -6.8s;
}


/* ==========================================================
   MOTION
   ========================================================== */

@keyframes labsFlowGold{
    from{ stroke-dashoffset:0; }
    to{ stroke-dashoffset:-1115; }
}

@keyframes labsFlowBlue{
    from{ stroke-dashoffset:0; }
    to{ stroke-dashoffset:-1115; }
}

@keyframes labsFlowAqua{
    from{ stroke-dashoffset:0; }
    to{ stroke-dashoffset:-1115; }
}

@keyframes labsFlowCopper{
    from{ stroke-dashoffset:0; }
    to{ stroke-dashoffset:-1115; }
}

@keyframes labsFlowDeepBlue{
    from{ stroke-dashoffset:0; }
    to{ stroke-dashoffset:-1115; }
}


/* ==========================================================
   CENTRAL INTELLIGENCE CORE
   ========================================================== */

.labs-core-ring{
    fill:none;

    stroke:rgba(225,215,201,.34);

    stroke-width:.8;

    transform-origin:1028px 397px;

    filter:
        drop-shadow(0 0 8px rgba(214,192,160,.25));

    animation:
        labsCoreRing 4s ease-in-out infinite;
}


.labs-core-dot{
    fill:#fff0d6;

    transform-origin:1028px 397px;

    filter:
        drop-shadow(0 0 4px rgba(255,239,214,1))
        drop-shadow(0 0 18px rgba(210,167,106,.55));

    animation:
        labsCoreDot 4s ease-in-out infinite;
}


@keyframes labsCoreRing{

    0%,100%{
        opacity:.15;
        transform:scale(.72);
    }

    50%{
        opacity:.62;
        transform:scale(1.32);
    }

}


@keyframes labsCoreDot{

    0%,100%{
        opacity:.62;
        transform:scale(.8);
    }

    50%{
        opacity:1;
        transform:scale(1.45);
    }

}


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

@media(max-width:720px){

    .labs-energy-network{
        opacity:.55;
    }

    .labs-flow-path{
        stroke-width:.8;
    }

}


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

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

    .labs-flow-path,
    .labs-core-ring,
    .labs-core-dot{
        animation:none !important;
    }

    .labs-flow-path{
        opacity:.16;
        stroke-dasharray:none;
    }

}


/* END AXISMER LABS LIVING RESEARCH NETWORK V1 */


/* ==========================================================
   AXISMER LABS — LIVING NETWORK V2
   Aligned / diffused optical signals
   ========================================================== */


/*
 * IMPORTANT:
 * We do not want to see a new continuous line.
 * Only a soft packet of light should appear to travel
 * through the filament already present in the artwork.
 */

.labs-energy-network{
    mix-blend-mode:screen !important;
    opacity:.82 !important;
}


.labs-flow-path{
    fill:none !important;

    stroke-width:1.05 !important;
    stroke-linecap:round !important;

    /*
     * Almost the entire SVG path is transparent space.
     * Only a short luminous packet travels through it.
     */
    stroke-dasharray:48 1250 !important;

    opacity:.58 !important;
}


/* 01 — GOLD */

#labs-flow-01{
    stroke:#f0c78e !important;

    filter:
        blur(.18px)
        drop-shadow(0 0 3px rgba(255,226,181,.75))
        drop-shadow(0 0 9px rgba(223,166,94,.42))
        drop-shadow(0 0 18px rgba(223,166,94,.18)) !important;

    animation:
        axismerLabsSoftFlow 7.4s linear infinite !important;
}


/* 02 — BLUE */

#labs-flow-02{
    stroke:#9ed5ff !important;

    filter:
        blur(.18px)
        drop-shadow(0 0 3px rgba(211,240,255,.76))
        drop-shadow(0 0 9px rgba(87,169,235,.42))
        drop-shadow(0 0 18px rgba(87,169,235,.18)) !important;

    animation:
        axismerLabsSoftFlow 8.2s linear infinite -2.1s !important;
}


/* 03 — AQUA */

#labs-flow-03{
    stroke:#a9ddcf !important;

    filter:
        blur(.18px)
        drop-shadow(0 0 3px rgba(218,255,243,.72))
        drop-shadow(0 0 9px rgba(91,181,157,.38))
        drop-shadow(0 0 18px rgba(91,181,157,.16)) !important;

    animation:
        axismerLabsSoftFlow 9.1s linear infinite -4.6s !important;
}


/* 04 — COPPER */

#labs-flow-04{
    stroke:#edb17b !important;

    filter:
        blur(.18px)
        drop-shadow(0 0 3px rgba(255,224,192,.74))
        drop-shadow(0 0 9px rgba(220,137,72,.40))
        drop-shadow(0 0 18px rgba(220,137,72,.17)) !important;

    animation:
        axismerLabsSoftFlow 8.6s linear infinite -5.2s !important;
}


/* 05 — DEEP BLUE */

#labs-flow-05{
    stroke:#8ebcff !important;

    filter:
        blur(.18px)
        drop-shadow(0 0 3px rgba(207,227,255,.75))
        drop-shadow(0 0 9px rgba(78,125,224,.42))
        drop-shadow(0 0 18px rgba(78,125,224,.17)) !important;

    animation:
        axismerLabsSoftFlow 9.8s linear infinite -6.3s !important;
}


/*
 * The packet travels toward the center.
 */

@keyframes axismerLabsSoftFlow{

    from{
        stroke-dashoffset:0;
    }

    to{
        stroke-dashoffset:-1298;
    }

}


/*
 * Make programmed core almost invisible.
 * The actual illuminated AXISMER core in the artwork
 * should remain dominant.
 */

.labs-core-ring{
    transform-origin:1135px 397px !important;

    opacity:.12 !important;

    stroke-width:.55 !important;

    filter:
        blur(.35px)
        drop-shadow(0 0 10px rgba(230,207,175,.18)) !important;
}


.labs-core-dot{
    transform-origin:1135px 397px !important;

    opacity:.38 !important;

    filter:
        blur(.2px)
        drop-shadow(0 0 8px rgba(255,231,198,.32)) !important;
}


/*
 * The network should disappear into the artwork,
 * never sit visibly above it.
 */

.labs-energy-svg{
    opacity:.88 !important;
}


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

    .labs-flow-path{
        animation:none !important;
        opacity:0 !important;
    }

}


/* END AXISMER LABS LIVING NETWORK V2 */


/* ==========================================================
   AXISMER LABS — SHOOTING STAR FLOW V3
   Luminous head + fading tail
   ========================================================== */


/* Do not show the programmed route itself */

.labs-flow-path{
    fill:none !important;
    stroke-linecap:round !important;

    /*
     * 4 px intense head
     * 14 px bright body
     * 34 px fading tail
     * huge invisible interval
     */
    stroke-dasharray:
        4 5
        14 8
        34 1233 !important;

    stroke-width:1.65 !important;

    opacity:.95 !important;

    mix-blend-mode:screen !important;
}


/* 01 — GOLD */

#labs-flow-01{
    stroke:#fff0c9 !important;

    filter:
        drop-shadow(0 0 2px rgba(255,255,245,1))
        drop-shadow(0 0 5px rgba(255,218,155,.95))
        drop-shadow(0 0 12px rgba(235,174,86,.72))
        drop-shadow(0 0 25px rgba(220,143,49,.30)) !important;

    animation:
        labsShootingStar 4.8s linear infinite !important;
}


/* 02 — ELECTRIC BLUE */

#labs-flow-02{
    stroke:#e5f7ff !important;

    filter:
        drop-shadow(0 0 2px rgba(255,255,255,1))
        drop-shadow(0 0 5px rgba(174,225,255,.95))
        drop-shadow(0 0 12px rgba(80,174,255,.72))
        drop-shadow(0 0 25px rgba(41,123,238,.30)) !important;

    animation:
        labsShootingStar 5.3s linear infinite -1.7s !important;
}


/* 03 — AQUA */

#labs-flow-03{
    stroke:#e4fff7 !important;

    filter:
        drop-shadow(0 0 2px rgba(255,255,255,1))
        drop-shadow(0 0 5px rgba(177,244,225,.95))
        drop-shadow(0 0 12px rgba(75,193,159,.68))
        drop-shadow(0 0 25px rgba(43,151,123,.28)) !important;

    animation:
        labsShootingStar 5.8s linear infinite -3.4s !important;
}


/* 04 — COPPER / AMBER */

#labs-flow-04{
    stroke:#ffe8ce !important;

    filter:
        drop-shadow(0 0 2px rgba(255,255,250,1))
        drop-shadow(0 0 5px rgba(255,203,153,.95))
        drop-shadow(0 0 12px rgba(238,143,72,.70))
        drop-shadow(0 0 25px rgba(210,101,35,.30)) !important;

    animation:
        labsShootingStar 5.1s linear infinite -2.8s !important;
}


/* 05 — DEEP BLUE */

#labs-flow-05{
    stroke:#e1edff !important;

    filter:
        drop-shadow(0 0 2px rgba(255,255,255,1))
        drop-shadow(0 0 5px rgba(166,201,255,.95))
        drop-shadow(0 0 12px rgba(81,130,255,.72))
        drop-shadow(0 0 25px rgba(49,82,222,.30)) !important;

    animation:
        labsShootingStar 5.6s linear infinite -4.1s !important;
}


/* The luminous packet travels along the existing route */

@keyframes labsShootingStar{

    from{
        stroke-dashoffset:0;
    }

    to{
        stroke-dashoffset:-1298;
    }

}


/* Keep the overlay transparent */

.labs-energy-network{
    opacity:1 !important;
    mix-blend-mode:screen !important;
}


/* Remove the artificial central circle.
   The real illuminated core in the artwork is enough. */

.labs-core-ring,
.labs-core-dot{
    opacity:0 !important;
}


/* Accessibility */

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

    .labs-flow-path{
        animation:none !important;
        opacity:0 !important;
    }

}


/* END AXISMER LABS SHOOTING STAR FLOW V3 */


/* ==========================================================
   AXISMER LABS — NODE SHOOTING STARS V4
   Follow existing card → node connectors
   ========================================================== */


/*
 * Shorter paths require a much shorter dash cycle.
 * This creates ONE clear shooting star per connector.
 */

.labs-flow-path{
    stroke-width:1.45 !important;

    stroke-linecap:round !important;

    /*
     * bright head + body + tail + invisible interval
     */

    stroke-dasharray:
        3 4
        9 6
        22 360 !important;

    opacity:.96 !important;

    mix-blend-mode:screen !important;
}


/* GOLD */

#labs-flow-01{

    stroke:#fff1ce !important;

    filter:
        drop-shadow(0 0 2px #fff)
        drop-shadow(0 0 5px rgba(255,220,159,.95))
        drop-shadow(0 0 12px rgba(229,168,80,.72))
        drop-shadow(0 0 22px rgba(215,140,40,.28)) !important;

    animation:
        labsNodeStar 3.8s linear infinite !important;
}


/* BLUE */

#labs-flow-02{

    stroke:#e5f7ff !important;

    filter:
        drop-shadow(0 0 2px #fff)
        drop-shadow(0 0 5px rgba(167,222,255,.95))
        drop-shadow(0 0 12px rgba(69,161,245,.72))
        drop-shadow(0 0 22px rgba(45,117,226,.28)) !important;

    animation:
        labsNodeStar 4.2s linear infinite -1.4s !important;
}


/* AQUA */

#labs-flow-03{

    stroke:#e5fff8 !important;

    filter:
        drop-shadow(0 0 2px #fff)
        drop-shadow(0 0 5px rgba(176,241,224,.92))
        drop-shadow(0 0 12px rgba(77,187,158,.68))
        drop-shadow(0 0 22px rgba(49,143,119,.25)) !important;

    animation:
        labsNodeStar 4.5s linear infinite -2.6s !important;
}


/* COPPER */

#labs-flow-04{

    stroke:#ffead3 !important;

    filter:
        drop-shadow(0 0 2px #fff)
        drop-shadow(0 0 5px rgba(255,205,158,.95))
        drop-shadow(0 0 12px rgba(235,143,72,.70))
        drop-shadow(0 0 22px rgba(203,100,37,.27)) !important;

    animation:
        labsNodeStar 4.1s linear infinite -3.1s !important;
}


/* LOWER BLUE */

#labs-flow-05{

    stroke:#e4efff !important;

    filter:
        drop-shadow(0 0 2px #fff)
        drop-shadow(0 0 5px rgba(167,203,255,.95))
        drop-shadow(0 0 12px rgba(78,128,247,.72))
        drop-shadow(0 0 22px rgba(47,82,211,.28)) !important;

    animation:
        labsNodeStar 4.4s linear infinite -.8s !important;
}


/* Shooting-star movement */

@keyframes labsNodeStar{

    from{
        stroke-dashoffset:0;
    }

    to{
        stroke-dashoffset:-404;
    }

}


/*
 * Remove the old artificial center response completely.
 */

.labs-core-ring,
.labs-core-dot{
    display:none !important;
}


/*
 * Keep the animated layer integrated with the artwork.
 */

.labs-energy-network{
    opacity:1 !important;
    mix-blend-mode:screen !important;
}


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

    .labs-flow-path{
        animation:none !important;
        opacity:0 !important;
    }

}


/* END AXISMER LABS NODE SHOOTING STARS V4 */


/* ==========================================================
   AXISMER LABS V5 — ENERGY CONVERGENCE
   Multiple shooting signals + living core
   ========================================================== */


/* ----------------------------------------------------------
   COMMON SIGNAL
   ---------------------------------------------------------- */

.labs-flow-path{
    fill:none !important;

    stroke-linecap:round !important;
    stroke-linejoin:round !important;

    stroke-width:1.35 !important;

    /*
     * Several packets instead of one.
     * Different lengths create head/tail variations.
     */
    stroke-dasharray:
        3 18
        8 34
        2 45
        18 82
        4 110
        28 330 !important;

    opacity:.94 !important;

    mix-blend-mode:screen !important;
}


/* ----------------------------------------------------------
   01 — HUMAN AI / GOLD
   ---------------------------------------------------------- */

#labs-flow-01{
    stroke:#fff0c7 !important;

    filter:
        drop-shadow(0 0 2px rgba(255,255,255,1))
        drop-shadow(0 0 5px rgba(255,221,158,.96))
        drop-shadow(0 0 12px rgba(232,171,82,.72))
        drop-shadow(0 0 24px rgba(218,142,45,.27)) !important;

    animation:
        labsEnergyIn 6.2s linear infinite !important;
}


/* ----------------------------------------------------------
   02 — PERSONAL INTELLIGENCE / BLUE
   ---------------------------------------------------------- */

#labs-flow-02{
    stroke:#e4f7ff !important;

    filter:
        drop-shadow(0 0 2px rgba(255,255,255,1))
        drop-shadow(0 0 5px rgba(168,225,255,.96))
        drop-shadow(0 0 12px rgba(72,164,249,.72))
        drop-shadow(0 0 24px rgba(42,116,225,.28)) !important;

    animation:
        labsEnergyIn 6.8s linear infinite -1.7s !important;
}


/* ----------------------------------------------------------
   03 — FINANCIAL / AQUA
   ---------------------------------------------------------- */

#labs-flow-03{
    stroke:#e3fff7 !important;

    filter:
        drop-shadow(0 0 2px rgba(255,255,255,1))
        drop-shadow(0 0 5px rgba(176,243,224,.94))
        drop-shadow(0 0 12px rgba(76,190,158,.69))
        drop-shadow(0 0 24px rgba(42,143,116,.25)) !important;

    animation:
        labsEnergyIn 7.3s linear infinite -3.8s !important;
}


/* ----------------------------------------------------------
   04 — DIGITAL IDENTITY / COPPER
   ---------------------------------------------------------- */

#labs-flow-04{
    stroke:#ffe8ce !important;

    filter:
        drop-shadow(0 0 2px rgba(255,255,255,1))
        drop-shadow(0 0 5px rgba(255,205,158,.96))
        drop-shadow(0 0 12px rgba(238,144,70,.72))
        drop-shadow(0 0 24px rgba(207,101,35,.27)) !important;

    animation:
        labsEnergyIn 6.5s linear infinite -4.9s !important;
}


/* ----------------------------------------------------------
   05 — HUMAN INTELLIGENCE / DEEP BLUE
   ---------------------------------------------------------- */

#labs-flow-05{
    stroke:#e2eeff !important;

    filter:
        drop-shadow(0 0 2px rgba(255,255,255,1))
        drop-shadow(0 0 5px rgba(165,202,255,.96))
        drop-shadow(0 0 12px rgba(78,129,250,.72))
        drop-shadow(0 0 24px rgba(46,82,216,.28)) !important;

    animation:
        labsEnergyIn 7s linear infinite -2.6s !important;
}


/* ----------------------------------------------------------
   ENERGY TRAVEL
   ---------------------------------------------------------- */

@keyframes labsEnergyIn{

    from{
        stroke-dashoffset:0;
    }

    to{
        stroke-dashoffset:-684;
    }

}


/* ==========================================================
   LIVING AXISMER CORE
   ========================================================== */


/*
 * Re-enable the core hidden by V4.
 */

.labs-core-ring,
.labs-core-dot{
    display:block !important;
}


/*
 * Outer breathing field.
 */

.labs-core-ring{
    r:31px !important;

    fill:none !important;

    stroke:rgba(255,226,187,.58) !important;
    stroke-width:1px !important;

    opacity:.45 !important;

    transform-box:fill-box !important;
    transform-origin:center !important;

    filter:
        drop-shadow(0 0 5px rgba(255,229,195,.55))
        drop-shadow(0 0 16px rgba(223,168,99,.32))
        drop-shadow(0 0 32px rgba(104,176,213,.18)) !important;

    animation:
        axismerCoreBreath 3.2s ease-in-out infinite !important;
}


/*
 * Central living point.
 */

.labs-core-dot{
    r:5px !important;

    fill:#fff8e9 !important;

    opacity:1 !important;

    transform-box:fill-box !important;
    transform-origin:center !important;

    filter:
        drop-shadow(0 0 3px rgba(255,255,255,1))
        drop-shadow(0 0 8px rgba(255,221,170,.95))
        drop-shadow(0 0 18px rgba(222,164,87,.72))
        drop-shadow(0 0 35px rgba(90,167,212,.28)) !important;

    animation:
        axismerCorePulse 1.8s ease-in-out infinite !important;
}


/* Core breath */

@keyframes axismerCoreBreath{

    0%,100%{
        opacity:.22;
        transform:scale(.72);
    }

    45%{
        opacity:.72;
        transform:scale(1.08);
    }

    60%{
        opacity:.48;
        transform:scale(.94);
    }

    75%{
        opacity:.68;
        transform:scale(1.16);
    }

}


/* Core heartbeat */

@keyframes axismerCorePulse{

    0%,100%{
        opacity:.78;
        transform:scale(.82);
    }

    40%{
        opacity:1;
        transform:scale(1.18);
    }

    48%{
        transform:scale(.94);
    }

    58%{
        opacity:1;
        transform:scale(1.32);
    }

    72%{
        transform:scale(.90);
    }

}


/*
 * Entire energy layer behaves like emitted light.
 */

.labs-energy-network{
    opacity:1 !important;
    mix-blend-mode:screen !important;
}


/* Accessibility */

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

    .labs-flow-path,
    .labs-core-ring,
    .labs-core-dot{
        animation:none !important;
    }

    .labs-flow-path{
        opacity:0 !important;
    }
}


/* END AXISMER LABS V5 ENERGY CONVERGENCE */


/* ==========================================================
   AXISMER LABS V6 — TRUE CENTER CONVERGENCE
   ========================================================== */


/*
 * All energy now terminates at the actual center
 * of the 1983 × 793 composition.
 */

.labs-core-ring,
.labs-core-dot{
    transform-box:fill-box !important;
    transform-origin:center !important;
}


/* Larger living field around the emblem */

.labs-core-ring{
    r:42px !important;

    fill:none !important;

    stroke:rgba(255,230,195,.48) !important;
    stroke-width:.8 !important;

    filter:
        drop-shadow(0 0 5px rgba(255,238,213,.55))
        drop-shadow(0 0 14px rgba(226,177,110,.38))
        drop-shadow(0 0 30px rgba(111,185,220,.20)) !important;

    animation:
        axismerTrueCoreBreath 3.8s ease-in-out infinite !important;
}


.labs-core-dot{
    r:4px !important;

    fill:#fffaf0 !important;

    filter:
        drop-shadow(0 0 3px rgba(255,255,255,1))
        drop-shadow(0 0 8px rgba(255,232,195,.95))
        drop-shadow(0 0 18px rgba(230,177,101,.75))
        drop-shadow(0 0 38px rgba(98,177,220,.32)) !important;

    animation:
        axismerTrueCoreHeartbeat 2.15s ease-in-out infinite !important;
}


@keyframes axismerTrueCoreBreath{

    0%,100%{
        opacity:.18;
        transform:scale(.68);
    }

    50%{
        opacity:.66;
        transform:scale(1.20);
    }

}


@keyframes axismerTrueCoreHeartbeat{

    0%,100%{
        opacity:.70;
        transform:scale(.78);
    }

    38%{
        opacity:1;
        transform:scale(1.15);
    }

    48%{
        transform:scale(.90);
    }

    58%{
        opacity:1;
        transform:scale(1.42);
    }

    72%{
        opacity:.82;
        transform:scale(.92);
    }

}


/*
 * More frequent luminous packets.
 * Several stars can be perceived simultaneously.
 */

.labs-flow-path{
    stroke-dasharray:
        3 14
        9 24
        2 35
        15 50
        4 72
        24 155 !important;

    stroke-width:1.35 !important;

    opacity:.96 !important;
}


/* Slightly faster flow */

#labs-flow-01{
    animation-duration:5.2s !important;
}

#labs-flow-02{
    animation-duration:5.7s !important;
}

#labs-flow-03{
    animation-duration:6.1s !important;
}

#labs-flow-04{
    animation-duration:5.5s !important;
}

#labs-flow-05{
    animation-duration:5.9s !important;
}


/* V6 movement cycle */

@keyframes labsEnergyIn{

    from{
        stroke-dashoffset:0;
    }

    to{
        stroke-dashoffset:-407;
    }

}


/* END AXISMER LABS V6 TRUE CENTER */


/* ==========================================================
   AXISMER HUMAN × TECHNOLOGY V5
   Neural Shooting Stars + Living Core
   ========================================================== */


/* ----------------------------------------------------------
   HIDE THE PROGRAMMED ROUTES
   The artwork itself supplies the visible filaments.
   ---------------------------------------------------------- */

.axismer-connection-flow .connection-path{
    stroke-opacity:0 !important;
}


/* ----------------------------------------------------------
   OLD JS PARTICLES OFF
   ---------------------------------------------------------- */

.axismer-connection-flow .flow-dot,
.axismer-old-stars{
    display:none !important;
}


/* ----------------------------------------------------------
   SHOOTING STAR HEADS
   ---------------------------------------------------------- */

.axismer-shooting-stars{
    pointer-events:none;
    mix-blend-mode:screen;
}


/* HUMAN */

.axismer-shooting-stars .warm-star{
    fill:#fff5df;

    filter:
        drop-shadow(0 0 2px rgba(255,255,255,1))
        drop-shadow(0 0 5px rgba(255,222,171,.98))
        drop-shadow(0 0 11px rgba(232,170,89,.85))
        drop-shadow(0 0 23px rgba(207,127,43,.52));

    animation:
        axismerStarHuman 1.55s ease-in-out infinite;
}


/* TECHNOLOGY */

.axismer-shooting-stars .cool-star{
    fill:#effcff;

    filter:
        drop-shadow(0 0 2px rgba(255,255,255,1))
        drop-shadow(0 0 5px rgba(189,235,250,.98))
        drop-shadow(0 0 11px rgba(100,192,222,.84))
        drop-shadow(0 0 23px rgba(54,139,186,.50));

    animation:
        axismerStarTechnology 1.7s ease-in-out infinite;
}


/* Different apparent intensities */

.axismer-shooting-stars .star-b{
    opacity:.78;
}

.axismer-shooting-stars .star-c{
    opacity:.68;
}

.axismer-shooting-stars .star-d{
    opacity:.54;
}

.axismer-shooting-stars .neural-star{
    opacity:.94;
}

.axismer-shooting-stars .neural-star-soft{
    opacity:.58;
}


/* Twinkle */

@keyframes axismerStarHuman{

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

    45%{
        opacity:1;
    }

    58%{
        opacity:.78;
    }
}


@keyframes axismerStarTechnology{

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

    48%{
        opacity:1;
    }

    63%{
        opacity:.72;
    }
}


/* ==========================================================
   LIVING CENTRAL CORE
   EXACTLY AT SVG CENTER USED BY EXISTING ROUTES: 800 / 350
   ========================================================== */

.axismer-connection-flow .connection-core-ring{
    display:block !important;

    r:27px !important;

    fill:rgba(255,226,184,.018) !important;

    stroke:rgba(255,225,185,.42) !important;
    stroke-width:.75 !important;

    transform-box:fill-box !important;
    transform-origin:center !important;

    filter:
        drop-shadow(0 0 5px rgba(255,233,203,.50))
        drop-shadow(0 0 15px rgba(220,163,91,.35))
        drop-shadow(0 0 28px rgba(104,179,207,.18)) !important;

    animation:
        axismerHumanTechCoreBreath 3.4s ease-in-out infinite !important;
}


.axismer-connection-flow .connection-core{
    display:block !important;

    r:3.8px !important;

    fill:#fff8e9 !important;

    transform-box:fill-box !important;
    transform-origin:center !important;

    filter:
        drop-shadow(0 0 3px rgba(255,255,255,1))
        drop-shadow(0 0 7px rgba(255,229,187,.96))
        drop-shadow(0 0 16px rgba(225,167,90,.72))
        drop-shadow(0 0 30px rgba(99,180,211,.25)) !important;

    animation:
        axismerHumanTechHeartbeat 2.2s ease-in-out infinite !important;
}


@keyframes axismerHumanTechCoreBreath{

    0%,100%{
        opacity:.16;
        transform:scale(.70);
    }

    50%{
        opacity:.62;
        transform:scale(1.22);
    }
}


@keyframes axismerHumanTechHeartbeat{

    0%,100%{
        opacity:.72;
        transform:scale(.80);
    }

    40%{
        opacity:1;
        transform:scale(1.22);
    }

    48%{
        transform:scale(.92);
    }

    58%{
        opacity:1;
        transform:scale(1.48);
    }

    72%{
        opacity:.82;
        transform:scale(.94);
    }
}


/* ----------------------------------------------------------
   MOBILE
   Reduce particle density
   ---------------------------------------------------------- */

@media(max-width:900px){

    .axismer-shooting-stars .star-d,
    .axismer-shooting-stars .neural-star-soft{
        display:none;
    }
}


/* ----------------------------------------------------------
   REDUCED MOTION
   ---------------------------------------------------------- */

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

    .axismer-shooting-stars{
        display:none;
    }

    .axismer-connection-flow .connection-core-ring,
    .axismer-connection-flow .connection-core{
        animation:none !important;
    }
}


/* END HUMAN × TECHNOLOGY V5 */


/* ==========================================================
   AXISMER LABS V7 — OPTICAL CORE LOCK
   ========================================================== */

/*
 * Keep the animated core restrained.
 * It must illuminate the existing emblem, not cover it.
 */

.labs-core-ring{
    r:31px !important;

    fill:rgba(255,235,205,.015) !important;

    stroke:rgba(255,230,194,.34) !important;
    stroke-width:.65 !important;

    transform-box:fill-box !important;
    transform-origin:center !important;

    filter:
        drop-shadow(0 0 5px rgba(255,241,220,.50))
        drop-shadow(0 0 14px rgba(229,177,107,.30))
        drop-shadow(0 0 28px rgba(100,182,220,.14)) !important;

    animation:
        axismerLabsV7Breath 3.3s ease-in-out infinite !important;
}


.labs-core-dot{
    r:3.6px !important;

    fill:#fffaf0 !important;

    transform-box:fill-box !important;
    transform-origin:center !important;

    filter:
        drop-shadow(0 0 3px rgba(255,255,255,1))
        drop-shadow(0 0 8px rgba(255,229,188,.95))
        drop-shadow(0 0 17px rgba(229,172,96,.70))
        drop-shadow(0 0 30px rgba(103,184,221,.20)) !important;

    animation:
        axismerLabsV7Heartbeat 2.15s ease-in-out infinite !important;
}


@keyframes axismerLabsV7Breath{
    0%,100%{
        opacity:.14;
        transform:scale(.72);
    }

    50%{
        opacity:.58;
        transform:scale(1.18);
    }
}


@keyframes axismerLabsV7Heartbeat{
    0%,100%{
        opacity:.68;
        transform:scale(.82);
    }

    42%{
        opacity:1;
        transform:scale(1.18);
    }

    52%{
        opacity:.78;
        transform:scale(.92);
    }

    62%{
        opacity:1;
        transform:scale(1.38);
    }

    76%{
        opacity:.76;
        transform:scale(.94);
    }
}


/* END AXISMER LABS V7 */


/* ==========================================================
   AXISMER — HERO TYPOGRAPHY PREMIUM V1
   ========================================================== */

.hero h1{
    max-width:760px !important;

    font-family:
        "Helvetica Neue",
        "Helvetica",
        "Arial",
        sans-serif !important;

    font-size:clamp(64px,6.25vw,96px) !important;

    font-weight:400 !important;

    line-height:.98 !important;

    letter-spacing:-.055em !important;

    color:#f5f2ec !important;

    text-wrap:balance;

    -webkit-font-smoothing:antialiased;
    text-rendering:geometricPrecision;
}


/* More editorial treatment for the eyebrow */

.hero .eyebrow{
    font-size:10px !important;

    font-weight:500 !important;

    letter-spacing:.42em !important;

    text-transform:uppercase !important;

    color:rgba(221,211,197,.72) !important;
}


/* Supporting statement */

.hero p{
    max-width:590px !important;

    font-size:16px !important;

    line-height:1.58 !important;

    font-weight:400 !important;

    letter-spacing:-.012em !important;

    color:rgba(246,245,243,.70) !important;
}


@media(max-width:900px){

    .hero h1{
        font-size:clamp(54px,10vw,76px) !important;
        letter-spacing:-.05em !important;
        line-height:.98 !important;
    }

}


/* END AXISMER HERO TYPOGRAPHY PREMIUM V1 */


/* ==========================================================
   AXISMER — HERO TYPOGRAPHY V2
   Official monumental lockup
   ========================================================== */

.hero .axismer-hero-title{
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;

    width:max-content !important;
    max-width:min(820px, 58vw) !important;

    margin:0 0 30px !important;

    font-family:
        "Helvetica Neue",
        Helvetica,
        Arial,
        sans-serif !important;

    font-size:clamp(66px, 5.75vw, 94px) !important;
    font-weight:400 !important;

    line-height:.94 !important;
    letter-spacing:-.062em !important;

    color:#f6f3ed !important;

    -webkit-font-smoothing:antialiased;
    text-rendering:geometricPrecision;
}

.hero .axismer-hero-title > span{
    display:block;
    white-space:nowrap;
}

.hero .axismer-hero-title em{
    font-style:normal;
    font-weight:400;

    color:#e9e3da;

    text-shadow:
        0 0 24px rgba(214,190,157,.055);
}


/* Preserve hierarchy with the category label */

.hero .eyebrow{
    margin-bottom:26px !important;

    font-size:9px !important;
    font-weight:500 !important;

    letter-spacing:.40em !important;

    color:rgba(217,210,201,.64) !important;
}


/* Desktop breathing room */

@media (min-width:901px){

    .hero .axismer-hero-title{
        transform:translateX(-3px);
    }

}


/* Tablet */

@media (max-width:1100px){

    .hero .axismer-hero-title{
        max-width:68vw !important;

        font-size:clamp(62px, 7.2vw, 82px) !important;
    }

}


/* Mobile */

@media (max-width:700px){

    .hero .axismer-hero-title{
        width:auto !important;
        max-width:94vw !important;

        font-size:clamp(48px, 13vw, 66px) !important;

        line-height:.91 !important;
        letter-spacing:-.057em !important;
    }

    .hero .axismer-hero-title > span{
        white-space:normal;
    }

    .hero .eyebrow{
        margin-bottom:20px !important;
        font-size:8px !important;
        letter-spacing:.34em !important;
    }

}

/* END AXISMER HERO TYPOGRAPHY V2 */


/* ==========================================================
   AXISMER — OFFICIAL FOOTER LOCKUP
   Final consolidated version
   ========================================================== */

/*
 * LEFT BRAND AREA
 * Official emblem + AXISMER artwork.
 */

footer .footer-brand{
    display:block !important;
    position:relative !important;

    width:190px !important;
    height:58px !important;

    margin:0 !important;
    padding:0 !important;

    justify-self:start !important;
    align-self:center !important;
}


/* Exact same official artwork used in Header */

footer .footer-brand-lockup{
    display:block !important;

    width:170px !important;
    height:auto !important;

    margin:0 !important;
    padding:0 !important;

    object-fit:contain !important;
    object-position:left center !important;

    filter:
        contrast(1.08)
        drop-shadow(0 1px 2px rgba(0,0,0,.08)) !important;
}


/*
 * Corporate slogan.
 * Starts directly beneath the AXISMER wordmark,
 * not beneath the emblem.
 */

footer .footer-brand-descriptor{
    display:block !important;
    position:absolute !important;

    left:42px !important;
    top:38px !important;

    width:max-content !important;

    margin:0 !important;
    padding:0 !important;

    white-space:nowrap !important;

    font-size:9px !important;
    font-weight:400 !important;
    line-height:1 !important;

    letter-spacing:.025em !important;

    color:rgba(20,20,20,.46) !important;
}


/* Obsolete reconstructed logo elements */

footer .footer-brand-logo,
footer .footer-brand-text{
    display:none !important;
}


/*
 * THREE-ZONE ARCHITECTURE
 *
 * Brand          Navigation          Signature
 * LEFT             CENTER              RIGHT
 */

footer > nav{
    justify-self:center !important;
    align-self:center !important;
}

footer .footer-statement{
    justify-self:end !important;
    align-self:center !important;
}


/* Right-side corporate signature */

footer .footer-signature{
    font-size:9px !important;
    font-weight:500 !important;

    line-height:1.4 !important;

    letter-spacing:.20em !important;
    text-transform:uppercase !important;

    color:rgba(20,20,20,.36) !important;
}


/* MOBILE */

@media(max-width:720px){

    footer .footer-brand{
        width:170px !important;
        height:54px !important;
    }

    footer .footer-brand-lockup{
        width:150px !important;
    }

    footer .footer-brand-descriptor{
        left:37px !important;
        top:34px !important;

        font-size:8px !important;
    }

}

/* END AXISMER OFFICIAL FOOTER LOCKUP */


/* ==========================================================
   AXISMER — PERFORMANCE ENGINE V1
   Preserve effects, pause expensive animation offscreen
   ========================================================== */


/*
 * Browser rendering isolation.
 * Each major visual section becomes its own rendering context.
 */

.human-tech,
.labs{
    contain:layout paint style;
}


/*
 * Allow the browser to skip rendering sections that are
 * far outside the viewport while preserving their dimensions.
 */

.human-tech,
.labs{
    content-visibility:auto;
    contain-intrinsic-size:auto 850px;
}


/*
 * When JS marks an animated section as dormant,
 * freeze all CSS animation inside it.
 */

.axismer-performance-zone.axismer-zone-paused *,
.axismer-performance-zone.axismer-zone-paused *::before,
.axismer-performance-zone.axismer-zone-paused *::after{
    animation-play-state:paused !important;
}


/*
 * SVG rendering hints
 */

.axismer-connection-flow,
.labs-energy-svg{
    transform:translateZ(0);
    backface-visibility:hidden;
}


/*
 * Main moving layers are promoted only while active.
 */

.axismer-performance-zone.axismer-zone-active
.axismer-connection-flow,

.axismer-performance-zone.axismer-zone-active
.labs-energy-svg{
    will-change:transform, opacity;
}


/*
 * Remove will-change when offscreen.
 * Keeping too many permanent compositor layers wastes memory.
 */

.axismer-performance-zone.axismer-zone-paused
.axismer-connection-flow,

.axismer-performance-zone.axismer-zone-paused
.labs-energy-svg{
    will-change:auto !important;
}


/* END AXISMER PERFORMANCE ENGINE V1 */


/* ==========================================================
   AXISMER — PERFORMANCE ENGINE V2
   Scroll-aware rendering
   ========================================================== */


/* ----------------------------------------------------------
   1. REMOVE LARGE SVG GPU LAYERS CREATED IN V1
   ---------------------------------------------------------- */

.axismer-connection-flow,
.labs-energy-svg{
    transform:none !important;
    backface-visibility:visible !important;
    will-change:auto !important;
}


/* ----------------------------------------------------------
   2. DURING SCROLL:
   preserve movement, temporarily remove expensive glow filters
   ---------------------------------------------------------- */

html.axismer-is-scrolling
.axismer-connection-flow .flow-dot,

html.axismer-is-scrolling
.axismer-connection-flow .connection-path,

html.axismer-is-scrolling
.axismer-connection-flow .connection-core,

html.axismer-is-scrolling
.axismer-connection-flow .connection-core-ring,

html.axismer-is-scrolling
.labs-energy-svg .labs-flow-path,

html.axismer-is-scrolling
.labs-energy-svg .labs-core-ring,

html.axismer-is-scrolling
.labs-energy-svg .labs-core-dot,

html.axismer-is-scrolling
.labs-energy-svg circle,

html.axismer-is-scrolling
.labs-energy-svg path{
    filter:none !important;
}


/* ----------------------------------------------------------
   3. Disable SVG filter references only while scrolling
   ---------------------------------------------------------- */

html.axismer-is-scrolling
.labs-energy-svg [filter]{
    filter:none !important;
}


/* ----------------------------------------------------------
   4. Keep animated particles crisp during movement
   ---------------------------------------------------------- */

html.axismer-is-scrolling .flow-dot,
html.axismer-is-scrolling .labs-flow-path{
    shape-rendering:optimizeSpeed;
}


/* ----------------------------------------------------------
   5. Reduce painting outside animated zones
   ---------------------------------------------------------- */

.human-tech,
.labs{
    isolation:isolate;
}


/* ----------------------------------------------------------
   6. OFFSCREEN remains completely paused
   ---------------------------------------------------------- */

.axismer-performance-zone.axismer-zone-paused *,
.axismer-performance-zone.axismer-zone-paused *::before,
.axismer-performance-zone.axismer-zone-paused *::after{
    animation-play-state:paused !important;
}


/* END AXISMER PERFORMANCE ENGINE V2 */


/* ==========================================================
   AXISMER — FOOTER MONOCHROME BRAND
   ========================================================== */

footer .footer-brand-lockup{
    filter:
        grayscale(1)
        brightness(.16)
        contrast(1.35) !important;

    opacity:.96 !important;
}

footer .footer-brand-descriptor{
    color:rgba(30,30,30,.48) !important;

    font-size:9px !important;
    font-weight:400 !important;

    letter-spacing:.015em !important;
}

/* END AXISMER FOOTER MONOCHROME BRAND */


/* ==========================================================
   AXISMER HOME — HERO TYPOGRAPHY
   Editorial monumental lockup
   ========================================================== */

.hero .axismer-hero-title{
  margin:0 !important;

  font-family:
    "Helvetica Neue",
    Helvetica,
    Arial,
    sans-serif !important;

  font-size:
    clamp(76px, 7.25vw, 118px) !important;

  font-weight:400 !important;

  line-height:.86 !important;

  letter-spacing:-.073em !important;

  text-wrap:balance;
}

.hero .axismer-hero-title > span{
  display:block !important;
}

.hero .axismer-hero-title > span:first-child{
  color:#f6f5f3 !important;
}

.hero .axismer-hero-title > span:last-child{
  color:#d9d2c9 !important;
}

.hero .axismer-hero-title em{
  color:inherit !important;
  font-style:normal !important;
  font-weight:inherit !important;

  text-shadow:none !important;
}


/* Tablet */

@media (max-width:900px){

  .hero .axismer-hero-title{
    font-size:
      clamp(66px, 10vw, 92px) !important;

    line-height:.87 !important;
    letter-spacing:-.07em !important;
  }

}


/* Mobile */

@media (max-width:600px){

  .hero .axismer-hero-title{
    font-size:
      clamp(54px, 15.5vw, 76px) !important;

    line-height:.88 !important;
    letter-spacing:-.065em !important;
  }

}