*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:Arial,Helvetica,sans-serif;background:#020712;color:white;overflow-x:hidden}

/* INTRO */

#intro{
  position:fixed;
  inset:0;
  background:
    radial-gradient(circle at center,rgba(0,130,255,.18),transparent 34%),
    #000;
  z-index:999;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  transition:1.2s ease;
  overflow:hidden;
}

#intro.hide{opacity:0;visibility:hidden}
#matrix{position:absolute;inset:0;opacity:.42}

#intro:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 62%,rgba(0,180,255,.22),transparent 25%),
    radial-gradient(circle at 20% 45%,rgba(0,120,255,.12),transparent 20%),
    radial-gradient(circle at 80% 45%,rgba(0,120,255,.12),transparent 20%);
  animation:introBreath 5s ease-in-out infinite;
}

.intro-logo{
  width:520px;
  max-width:82vw;
  z-index:4;
  mix-blend-mode:screen;
  opacity:.95;
  filter:drop-shadow(0 0 65px #00aaff);
  animation:logoFusion 8s ease forwards;
}

.intro-neural-ship{
  width:620px;
  max-width:88vw;
  z-index:3;
  margin-top:10px;
  mix-blend-mode:screen;
  filter:drop-shadow(0 0 80px #00c8ff);
  animation:shipGenerate 8s ease forwards, shipFloatSoft 5s ease-in-out infinite;
}

.intro-line{
  width:520px;
  max-width:78vw;
  height:3px;
  background:linear-gradient(90deg,transparent,#0b8cff,transparent);
  margin:20px 0 10px;
  z-index:4;
  box-shadow:0 0 28px #0b8cff;
  animation:loadingLine 8s ease forwards;
}

.intro-dynamic-text{
  z-index:4;
  max-width:980px;
  padding:0 24px;
  text-align:center;
  font-size:13px;
  letter-spacing:4px;
  color:#dff4ff;
  text-shadow:0 0 16px #00aaff;
  line-height:1.9;
}

.intro-dynamic-text span{
  display:block;
  opacity:0;
  transform:translateY(12px);
  animation:introTextReveal 1s ease forwards;
}

.intro-dynamic-text span:nth-child(1){animation-delay:.8s}
.intro-dynamic-text span:nth-child(2){animation-delay:2.2s}
.intro-dynamic-text span:nth-child(3){animation-delay:3.6s}
.intro-dynamic-text span:nth-child(4){animation-delay:5s}

/* HEADER */

header{
  height:82px;
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(2,7,18,.88);
  backdrop-filter:blur(14px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 7%;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.nav-logo{
  width:150px;
  mix-blend-mode:screen;
  filter:drop-shadow(0 0 20px rgba(0,170,255,.45));
}

nav a{
  color:#dcecff;
  text-decoration:none;
  font-size:232px;
  font-weight:800;
  margin:0 92px;
  letter-spacing:.5px;
}

nav a:hover{color:#2ab9ff}

.small-btn{
  border:1px solid #23a4ff;
  color:#ccecff;
  text-decoration:none;
  padding:12px 20px;
  border-radius:4px;
  font-size:12px;
  font-weight:800;
  box-shadow:0 0 18px rgba(0,160,255,.22);
}

/* HERO */

.hero{
  min-height:610px;
  position:relative;
  display:flex;
  align-items:center;
  padding:90px 7%;
  background:
    radial-gradient(circle at 72% 50%,rgba(0,145,255,.25),transparent 28%),
    linear-gradient(135deg,#020712,#061935 60%,#020712);
  overflow:hidden;
}

.network{
  position:absolute;
  inset:0;
  background-image:radial-gradient(#0b8cff 1px,transparent 1px);
  background-size:38px 38px;
  opacity:.22;
  animation:move 18s linear infinite;
}

.hero:after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(2,7,18,.95),rgba(2,7,18,.35),rgba(2,7,18,.75)),
    radial-gradient(circle at 70% 65%,rgba(0,190,255,.16),transparent 25%);
  pointer-events:none;
}

.hero-text{
  position:relative;
  z-index:3;
  max-width:590px;
}

.hero h1{
  font-size:52px;
  line-height:.95;
  letter-spacing:-1px;
}

.hero h1 span{color:#2098ff}

.hero p{
  margin:24px 0;
  color:#d9eaff;
  font-size:18px;
  line-height:1.5;
}

.btn{
  display:inline-block;
  background:#087dff;
  color:white;
  text-decoration:none;
  padding:16px 26px;
  border-radius:4px;
  font-size:12px;
  font-weight:900;
  margin-right:14px;
  box-shadow:0 0 25px rgba(0,140,255,.5);
}

.btn.ghost{
  background:transparent;
  border:1px solid #2098ff;
}

.hero-ship-img{
  position:absolute;
  right:5%;
  top:13%;
  width:650px;
  max-width:52vw;
  z-index:2;
  mix-blend-mode:screen;
  filter:drop-shadow(0 0 80px #00c8ff) brightness(1.08);
  animation:shipFloat 5s ease-in-out infinite, pulseGlow 4s ease-in-out infinite;
}

.hero-rings{
  position:absolute;
  right:12%;
  top:54%;
  width:480px;
  height:150px;
  border:2px solid rgba(0,190,255,.35);
  border-radius:50%;
  z-index:1;
  box-shadow:0 0 70px rgba(0,190,255,.35);
  animation:ringPulseHero 3s ease-in-out infinite;
}

/* SECTIONS */

.band{
  padding:70px 9%;
  border-top:1px solid rgba(255,255,255,.08);
  background:#020712;
  position:relative;
  overflow:hidden;
}

.band:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 30% 20%,rgba(0,140,255,.12),transparent 35%),
    repeating-radial-gradient(circle at 50% 100%,rgba(0,160,255,.14) 0 1px,transparent 1px 18px);
  opacity:.55;
  pointer-events:none;
}

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

.center{text-align:center}

.band span{
  color:#39b7ff;
  font-size:13px;
  font-weight:900;
  letter-spacing:4px;
}

.band h2{
  font-size:34px;
  margin:16px 0;
}

.band p,.band li{
  color:#d3e4f8;
  font-size:16px;
  line-height:1.55;
}

.oceanos-logo{
  width:390px;
  justify-self:center;
  mix-blend-mode:screen;
  filter:drop-shadow(0 0 48px #008cff);
  animation:logoFloat 5s ease-in-out infinite, pulseGlowSoft 4s ease-in-out infinite;
}

/* AI CARDS */

.cards{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
  margin-top:46px;
}

.cards div{
  background:rgba(7,27,55,.9);
  padding:30px;
  border-radius:10px;
  border:1px solid rgba(65,171,255,.18);
  transition:.35s;
  position:relative;
  overflow:hidden;
}

.cards div:before{
  content:"";
  position:absolute;
  width:70px;
  height:70px;
  border-radius:50%;
  top:18px;
  left:22px;
  background:radial-gradient(circle,rgba(0,170,255,.35),transparent 70%);
}

.cards div:hover{
  transform:translateY(-10px);
  box-shadow:0 0 35px rgba(0,140,255,.25);
}

.cards h3{
  font-size:18px;
  margin-bottom:12px;
  color:#fff;
}

/* ROV */

.rov-img{
  width:520px;
  max-width:100%;
  position:relative;
  z-index:3;
  mix-blend-mode:screen;
  filter:drop-shadow(0 0 55px #00aaff);
  animation:droneFloat 5s ease-in-out infinite, pulseGlowSoft 4s ease-in-out infinite;
}

ul{list-style:none}
li{margin:18px 0;padding-left:28px;position:relative}
li:before{content:"▣";position:absolute;left:0;color:#1aa5ff}

/* API */

.compact{padding-top:55px;padding-bottom:55px}

.api-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:18px;
  margin-top:38px;
}

.api-grid div{
  padding:24px 14px;
  border-radius:8px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(65,171,255,.18);
  font-size:13px;
  color:#e4f2ff;
  transition:.35s;
}

.api-grid div:hover{
  transform:translateY(-8px);
  box-shadow:0 0 28px rgba(0,170,255,.25);
}

/* TUNA */

.tuna{
  background:
    radial-gradient(circle at 78% 45%,rgba(0,140,255,.3),transparent 25%),
    #020712;

  padding-bottom:260px;
  overflow:hidden;
  position:relative;
}

.tuna-img{

  position:absolute;

  right:4%;

  bottom:40px;

  width:min(520px,42vw);

  z-index:1;

  mix-blend-mode:screen;

  filter:
    drop-shadow(0 0 60px #00aaff)
    brightness(1.08);

  animation:
    tunaSwim 7s ease-in-out infinite,
    pulseGlowSoft 4s ease-in-out infinite;

}

/* FOOTER */

footer{

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

  gap:50px;

  padding:55px 9%;

  background:#01040b;

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

  position:relative;

  z-index:10;

}

footer span{
  color:#39b7ff;
  letter-spacing:3px;
  font-size:12px;
  font-weight:900;
}

footer h2{
  font-size:24px;
  margin:14px 0;
}

.contact-info p{
  margin:8px 0;
  color:#c8def8;
}

/* ANIMATIONS */

@keyframes logoFusion{
  0%{opacity:0;transform:scale(.72);filter:blur(25px)}
  45%{opacity:.55;transform:scale(1.06);filter:blur(6px) drop-shadow(0 0 45px #00aaff)}
  100%{opacity:.95;transform:scale(1);filter:blur(0) drop-shadow(0 0 65px #00aaff)}
}

@keyframes shipGenerate{
  0%{opacity:0;transform:translateY(55px) scale(.82);filter:blur(28px)}
  50%{opacity:.6;transform:translateY(15px) scale(1.04);filter:blur(8px)}
  100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0) drop-shadow(0 0 80px #00c8ff)}
}

@keyframes loadingLine{
  0%{transform:scaleX(.05);opacity:.35}
  100%{transform:scaleX(1);opacity:1}
}

@keyframes introBreath{
  0%,100%{opacity:.65}
  50%{opacity:1}
}

@keyframes introTextReveal{
  to{
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes shipFloatSoft{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-14px)}
}

@keyframes shipFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-18px)}
}

@keyframes logoFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-12px)}
}

@keyframes droneFloat{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-16px) rotate(-1.5deg)}
}

@keyframes tunaSwim{
  0%,100%{transform:translateX(0) translateY(0)}
  50%{transform:translateX(-18px) translateY(-8px)}
}

@keyframes pulseGlow{
  0%,100%{filter:drop-shadow(0 0 50px #00aaff) brightness(1)}
  50%{filter:drop-shadow(0 0 100px #00d9ff) brightness(1.25)}
}

@keyframes pulseGlowSoft{
  0%,100%{filter:drop-shadow(0 0 35px #00aaff) brightness(1)}
  50%{filter:drop-shadow(0 0 65px #00d9ff) brightness(1.15)}
}

@keyframes ringPulseHero{
  0%,100%{opacity:.3;transform:scale(.9)}
  50%{opacity:1;transform:scale(1.08)}
}

@keyframes move{
  from{background-position:0 0}
  to{background-position:300px 300px}
}

/* MOBILE */

@media(max-width:900px){
  nav{display:none}
  .split,.cards,.api-grid,footer{grid-template-columns:1fr}
  .hero h1{font-size:42px}
  .hero-ship-img{position:relative;right:auto;top:auto;max-width:100%;width:100%;margin-top:35px}
  .hero{display:block}
  .hero-rings{display:none}
  .intro-logo{width:360px}
  .intro-neural-ship{width:420px}
  .intro-dynamic-text{font-size:10px;letter-spacing:2px}
  .tuna-img{position:relative;right:auto;top:auto;max-width:100%;width:100%;margin-top:30px}
}

@media(max-width:900px){
  #oceanos.band{
    padding:55px 7% 45px;
  }

  #oceanos.split{
    display:block;
  }

  #oceanos .oceanos-logo{
    display:block;
    width:280px;
    max-width:82vw;
    margin:35px auto 0;
  }

  #oceanos h2{
    font-size:30px;
    line-height:1.15;
  }

  #oceanos p{
    font-size:15px;
  }
}

@media(max-width:520px){
  #oceanos .oceanos-logo{
    width:230px;
  }

  #oceanos h2{
    font-size:26px;
  }
}
/* GET A QUOTE BUTTON */

.hero-buttons{
  display:flex;
  align-items:flex-start;
  gap:18px;
  flex-wrap:wrap;
  margin-top:34px;
}

.quote-wrap{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  margin-top:8px;
}

.quote-btn{
  display:inline-block;
  padding:16px 28px;
  border-radius:4px;
  text-decoration:none;
  font-size:12px;
  font-weight:900;
  letter-spacing:.5px;
  color:#fff;
  background:linear-gradient(90deg,#009dff,#004cff);
  box-shadow:0 0 30px rgba(0,170,255,.45);
  transition:.35s;
}

.quote-btn:hover{
  transform:translateY(-4px);
  box-shadow:0 0 45px rgba(0,200,255,.7);
}

.quote-wrap span{
  margin-top:10px;
  font-size:12px;
  letter-spacing:1.5px;
  color:#8ecfff;
  opacity:.9;
}

@media(max-width:900px){
  .hero-buttons{
    flex-direction:column;
    align-items:flex-start;
  }

  .quote-wrap{
    margin-top:0;
  }
}

/* RESPONSIVE TEXT */

.hero h1{
  font-size:clamp(38px,6vw,76px);
}

.hero p{
  font-size:clamp(16px,2vw,20px);
}

.band h2{
  font-size:clamp(28px,4vw,52px);
}

.band p,
.band li{
  font-size:clamp(15px,1.6vw,18px);
}

/* SCROLL REVEAL */

.reveal-section{
  opacity:0;
  transform:translateY(70px);
  transition:opacity .9s ease, transform .9s ease;
}

.reveal-section.visible{
  opacity:1;
  transform:translateY(0);
}

/* PARALLAX FEEL */

.hero-ship-img,
.oceanos-logo,
.rov-img,
.tuna-img{
  will-change:transform;
}

/* MORE PREMIUM CARDS */

.cards div,
.api-grid div{
  backdrop-filter:blur(12px);
}

.cards div:hover,
.api-grid div:hover{
  transform:translateY(-12px) scale(1.02);
}

/* BUTTON RESPONSIVE FIX */

.hero-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:18px;
}

@media(max-width:700px){
  .hero{
    padding:70px 7%;
  }

  .hero-buttons{
    flex-direction:column;
    align-items:flex-start;
  }

  .btn,
  .quote-btn{
    width:100%;
    max-width:280px;
    text-align:center;
  }

  .band{
    padding:55px 7%;
  }
}
/* 3D INTRO LOGO + NEURAL BACKGROUND */

.neural-bg{
  position:absolute;
  inset:-20%;
  z-index:1;
  background:
    radial-gradient(circle at 20% 30%,rgba(0,200,255,.35) 0 2px,transparent 3px),
    radial-gradient(circle at 75% 25%,rgba(0,150,255,.28) 0 2px,transparent 3px),
    radial-gradient(circle at 45% 70%,rgba(0,220,255,.25) 0 2px,transparent 3px),
    linear-gradient(115deg,transparent 0 35%,rgba(0,140,255,.14) 36%,transparent 37%),
    linear-gradient(65deg,transparent 0 42%,rgba(0,200,255,.11) 43%,transparent 44%),
    linear-gradient(160deg,transparent 0 50%,rgba(0,120,255,.10) 51%,transparent 52%);
  background-size:260px 260px,320px 320px,380px 380px,420px 420px,500px 500px,620px 620px;
  opacity:.75;
  filter:blur(.2px);
  transform:perspective(900px) rotateX(58deg) translateY(120px);
  animation:neuralMove 18s linear infinite;
}

.intro-3d-stage{
  position:relative;
  z-index:5;
  perspective:1200px;
  margin-bottom:12px;
}

.logo-3d-card{
  position:relative;
  width:560px;
  max-width:84vw;
  padding:34px;
  border-radius:34px;
  background:
    linear-gradient(145deg,rgba(255,255,255,.14),rgba(0,110,255,.04)),
    radial-gradient(circle at 50% 20%,rgba(0,190,255,.22),transparent 48%);
  border:1px solid rgba(90,210,255,.28);
  box-shadow:
    0 0 80px rgba(0,180,255,.38),
    inset 0 0 40px rgba(255,255,255,.06);
  transform-style:preserve-3d;
  animation:logoCard3D 8s ease forwards, logoIdle3D 5s ease-in-out infinite 8s;
  overflow:hidden;
}

.logo-3d-card:before{
  content:"";
  position:absolute;
  inset:-2px;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.32),transparent);
  transform:translateX(-120%);
  animation:shineSweep 4.5s ease-in-out infinite 2s;
}

.intro-logo-3d{
  width:100%;
  display:block;
  position:relative;
  z-index:2;
  mix-blend-mode:screen;
  filter:
    drop-shadow(0 0 28px rgba(0,200,255,.85))
    drop-shadow(0 18px 28px rgba(0,0,0,.55));
  transform:translateZ(55px);
}

.logo-glow{
  position:absolute;
  inset:20%;
  background:radial-gradient(circle,rgba(0,200,255,.38),transparent 65%);
  filter:blur(30px);
  z-index:1;
  animation:pulseLogoGlow 3.5s ease-in-out infinite;
}

@keyframes logoCard3D{
  0%{
    opacity:0;
    transform:rotateX(70deg) rotateY(-35deg) scale(.65);
    filter:blur(20px);
  }
  45%{
    opacity:.72;
    transform:rotateX(14deg) rotateY(12deg) scale(1.04);
    filter:blur(4px);
  }
  100%{
    opacity:1;
    transform:rotateX(0deg) rotateY(0deg) scale(1);
    filter:blur(0);
  }
}

@keyframes logoIdle3D{
  0%,100%{
    transform:rotateX(0deg) rotateY(0deg) translateY(0);
  }
  50%{
    transform:rotateX(4deg) rotateY(-5deg) translateY(-10px);
  }
}

@keyframes shineSweep{
  0%{transform:translateX(-120%)}
  45%{transform:translateX(120%)}
  100%{transform:translateX(120%)}
}

@keyframes pulseLogoGlow{
  0%,100%{opacity:.45;transform:scale(.95)}
  50%{opacity:1;transform:scale(1.15)}
}

@keyframes neuralMove{
  from{
    background-position:0 0,0 0,0 0,0 0,0 0,0 0;
  }
  to{
    background-position:260px 260px,-320px 320px,380px -380px,420px 420px,-500px 500px,620px -620px;
  }
}

@media(max-width:900px){
  .logo-3d-card{
    width:380px;
    padding:22px;
    border-radius:24px;
  }

  .neural-bg{
    transform:perspective(700px) rotateX(62deg) translateY(80px);
    opacity:.55;
  }
}
/* =========================
   CINEMATIC 3D SYSTEM
========================= */

body{
  background:
    radial-gradient(circle at top,#072445 0%,#020712 40%,#000 100%);
  background-attachment:fixed;
}

/* Neural animated background */

body:before{
  content:"";
  position:fixed;
  inset:0;
  background:url("assets_century/bg-neural.webp") center/cover no-repeat;
  opacity:.16;
  z-index:-3;
  animation:bgFloat 24s ease-in-out infinite alternate;
}

body:after{
  content:"";
  position:fixed;
  inset:0;
  background:
    radial-gradient(circle at 20% 20%,rgba(0,180,255,.08),transparent 20%),
    radial-gradient(circle at 80% 50%,rgba(0,180,255,.08),transparent 20%);
  z-index:-2;
  pointer-events:none;
}

/* 3D image system */

.hero-ship-img,
.oceanos-logo,
.rov-img,
.tuna-img,
.intro-logo,
.intro-neural-ship{
  transform-style:preserve-3d;
  transition:
    transform .5s ease,
    filter .5s ease,
    box-shadow .5s ease;
  will-change:transform;
}

/* mouse hover cinematic */

.hero-ship-img:hover,
.oceanos-logo:hover,
.rov-img:hover,
.tuna-img:hover{
  transform:
    perspective(1200px)
    rotateX(6deg)
    rotateY(-8deg)
    scale(1.03);

  filter:
    drop-shadow(0 0 90px #00c8ff)
    brightness(1.18);
}

/* floating particles */

.band::after{
  content:"";
  position:absolute;
  inset:0;
  background:url("assets_century/particles.webp") center/cover;
  opacity:.12;
  mix-blend-mode:screen;
  animation:particlesMove 30s linear infinite;
  pointer-events:none;
}

/* Glass cinematic panels */

.cards div,
.api-grid div{
  backdrop-filter:blur(14px);
  background:
    linear-gradient(
      135deg,
      rgba(7,27,55,.82),
      rgba(7,27,55,.55)
    );
}

/* animated glow */

.cards div:hover,
.api-grid div:hover{
  border-color:#34c3ff;
  box-shadow:
    0 0 40px rgba(0,180,255,.25),
    inset 0 0 25px rgba(0,180,255,.08);
}

/* dynamic text responsiveness */

.hero h1,
.band h2{
  font-size:clamp(34px,5vw,72px);
}

.hero p,
.band p{
  font-size:clamp(15px,1.2vw,20px);
}

/* cinematic buttons */

.btn,
.small-btn{
  position:relative;
  overflow:hidden;
}

.btn:before,
.small-btn:before{
  content:"";
  position:absolute;
  top:0;
  left:-120%;
  width:100%;
  height:100%;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.28),
      transparent
    );

  transition:.7s;
}

.btn:hover:before,
.small-btn:hover:before{
  left:120%;
}

/* scroll reveal */

.reveal{
  opacity:0;
  transform:translateY(60px);
  transition:1.2s ease;
}

.reveal.active{
  opacity:1;
  transform:translateY(0);
}

/* animations */

@keyframes bgFloat{
  0%{
    transform:scale(1) translateY(0);
  }
  100%{
    transform:scale(1.08) translateY(-20px);
  }
}

@keyframes particlesMove{
  from{
    background-position:0 0;
  }
  to{
    background-position:1000px 0;
  }
}
/* =========================
   MOUSE LIGHT
========================= */

.mouse-light{
  position:fixed;
  width:500px;
  height:500px;
  border-radius:50%;
  background:
    radial-gradient(
      circle,
      rgba(0,180,255,.16) 0%,
      rgba(0,180,255,.08) 30%,
      transparent 70%
    );

  pointer-events:none;
  z-index:-1;
  transform:translate(-50%,-50%);
  mix-blend-mode:screen;
  transition:
    width .3s ease,
    height .3s ease;
}
/* =========================
   INTRO 3D CINEMA
========================= */

#intro{
  perspective:1400px;
}

.intro-logo{
  animation:
    logoFusion 8s ease forwards,
    introRotate 10s ease-in-out infinite;
}

.intro-neural-ship{
  animation:
    shipGenerate 8s ease forwards,
    shipFloatSoft 6s ease-in-out infinite,
    introShipRotate 12s ease-in-out infinite;
}

@keyframes introRotate{

  0%,100%{
    transform:
      rotateY(-4deg)
      rotateX(2deg);
  }

  50%{
    transform:
      rotateY(4deg)
      rotateX(-2deg);
  }

}

@keyframes introShipRotate{

  0%,100%{
    transform:
      rotateY(0deg)
      translateY(0);
  }

  50%{
    transform:
      rotateY(6deg)
      translateY(-10px);
  }

}
.reveal{
  opacity:0;
  transform:translateY(80px) scale(.96);
  transition:
    opacity 1.2s ease,
    transform 1.2s ease;
}

.reveal.active{
  opacity:1;
  transform:translateY(0) scale(1);
}
.hero-ship-img,
.oceanos-logo,
.rov-img,
.tuna-img{

  width:min(100%,650px);

  transform-style:preserve-3d;

  transition:
    transform .45s ease,
    filter .45s ease;

  will-change:transform;

  cursor:pointer;
}
body{
  animation:pageEnter 1.5s ease;
}

@keyframes pageEnter{

  from{
    opacity:0;
    transform:scale(1.02);
    filter:blur(12px);
  }

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

}
/* ==================================================
   CLEAN CINEMATIC INTRO PATCH — PALANTIR STYLE
================================================== */

#intro{
  position:fixed;
  inset:0;
  z-index:9999;
  overflow:hidden;
  background:#000;
  display:flex;
  align-items:center;
  justify-content:center;
  perspective:1800px;
  transition:opacity 1.4s ease, visibility 1.4s ease;
}

#intro.hide{
  opacity:0;
  visibility:hidden;
}

#matrix{
  position:absolute;
  inset:0;
  z-index:1;
  opacity:.35;
}

.intro-cinema-bg{
  position:absolute;
  inset:-8%;
  z-index:2;
  background:
    url("assets_century/bg-neural.webp") center/cover no-repeat,
    radial-gradient(circle at center,rgba(0,190,255,.22),transparent 35%),
    #000;
  opacity:.72;
  filter:brightness(1.22) contrast(1.1);
  animation:introNetworkDrift 22s ease-in-out infinite alternate;
}

.intro-cinema-overlay{
  position:absolute;
  inset:0;
  z-index:3;
  background:
    radial-gradient(circle at center,rgba(0,210,255,.10),transparent 32%),
    linear-gradient(90deg,rgba(0,0,0,.88),rgba(0,0,0,.35),rgba(0,0,0,.88));
}

.intro-cinema-content{
  position:relative;
  z-index:6;
  width:100%;
  max-width:1100px;
  padding:0 28px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  transform-style:preserve-3d;
}

.cinema-logo-frame{
  position:relative;
  width:620px;
  max-width:82vw;
  padding:34px;
  border-radius:34px;
  background:
    linear-gradient(145deg,rgba(255,255,255,.12),rgba(0,120,255,.035)),
    radial-gradient(circle at center,rgba(0,190,255,.18),transparent 55%);
  border:1px solid rgba(90,220,255,.34);
  box-shadow:
    0 0 120px rgba(0,190,255,.35),
    0 0 240px rgba(0,120,255,.16),
    inset 0 0 34px rgba(255,255,255,.05);
  backdrop-filter:blur(18px);
  transform-style:preserve-3d;
  animation:cinemaLogoEnter 4.5s ease forwards, cinemaLogoFloat 7s ease-in-out infinite 4.5s;
  overflow:hidden;
}

.cinema-logo-frame:before{
  content:"";
  position:absolute;
  inset:-2px;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.34),transparent);
  transform:translateX(-120%);
  animation:cinemaShine 5s ease-in-out infinite 2s;
}

.cinema-logo-glow{
  position:absolute;
  inset:14%;
  z-index:1;
  background:radial-gradient(circle,rgba(0,210,255,.42),transparent 68%);
  filter:blur(38px);
  animation:cinemaPulse 3.8s ease-in-out infinite;
}

.intro-logo-3d{
  position:relative;
  z-index:4;
  width:100%;
  display:block;
  mix-blend-mode:screen;
  transform:translateZ(70px);
  filter:
    drop-shadow(0 0 40px rgba(0,220,255,.9))
    drop-shadow(0 0 100px rgba(0,160,255,.48));
}

.intro-line{
  width:620px;
  max-width:80vw;
  height:2px;
  margin:30px 0 22px;
  background:linear-gradient(90deg,transparent,#00c8ff,transparent);
  box-shadow:0 0 32px #00c8ff;
  animation:cinemaLine 2.4s ease-in-out infinite;
}

.cinema-text{
  max-width:1050px;
  font-size:clamp(15px,1.35vw,23px);
  line-height:2.05;
  letter-spacing:5px;
  font-weight:800;
  color:#e6f8ff;
  text-align:center;
  text-transform:uppercase;
  text-shadow:
    0 0 18px rgba(0,200,255,.85),
    0 0 38px rgba(0,120,255,.42);
}

.cinema-text span{
  display:block;
  opacity:0;
  transform:translateY(20px);
  animation:cinemaTextReveal 1.1s ease forwards;
}

.cinema-text span:nth-child(1){animation-delay:1s}
.cinema-text span:nth-child(2){animation-delay:2.4s}
.cinema-text span:nth-child(3){animation-delay:3.8s}
.cinema-text span:nth-child(4){animation-delay:5.2s}

/* permanent neural network below all sections */

.site-neural-backdrop{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    url("assets_century/bg-neural.webp") center/cover no-repeat,
    radial-gradient(circle at 50% 20%,rgba(0,170,255,.12),transparent 34%),
    #020712;
  opacity:.28;
  mix-blend-mode:screen;
  animation:siteNetworkMove 32s ease-in-out infinite alternate;
}

body{
  background:#020712 !important;
}

header,
.hero,
.band,
footer,
.investor-badge{
  position:relative;
  z-index:2;
}

.hero,
.band{
  background:rgba(2,7,18,.74) !important;
}

.band:before{
  opacity:.28 !important;
}

.band:after{
  opacity:.16 !important;
}

/* animations */

@keyframes introNetworkDrift{
  0%{transform:scale(1.08) translateX(0) translateY(0)}
  100%{transform:scale(1.18) translateX(18px) translateY(-22px)}
}

@keyframes cinemaLogoEnter{
  0%{
    opacity:0;
    transform:rotateX(68deg) rotateY(-28deg) scale(.62);
    filter:blur(24px);
  }
  55%{
    opacity:.86;
    transform:rotateX(10deg) rotateY(8deg) scale(1.05);
    filter:blur(4px);
  }
  100%{
    opacity:1;
    transform:rotateX(0deg) rotateY(0deg) scale(1);
    filter:blur(0);
  }
}

@keyframes cinemaLogoFloat{
  0%,100%{transform:translateY(0) rotateY(-2deg)}
  50%{transform:translateY(-12px) rotateY(2deg)}
}

@keyframes cinemaShine{
  0%{transform:translateX(-120%)}
  45%{transform:translateX(120%)}
  100%{transform:translateX(120%)}
}

@keyframes cinemaPulse{
  0%,100%{opacity:.48;transform:scale(.94)}
  50%{opacity:1;transform:scale(1.15)}
}

@keyframes cinemaLine{
  0%,100%{opacity:.45;transform:scaleX(.86)}
  50%{opacity:1;transform:scaleX(1)}
}

@keyframes cinemaTextReveal{
  to{
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes siteNetworkMove{
  0%{transform:scale(1) translateY(0)}
  100%{transform:scale(1.08) translateY(-24px)}
}

@media(max-width:900px){
  .cinema-logo-frame{
    width:390px;
    padding:22px;
    border-radius:24px;
  }

  .cinema-text{
    font-size:11px;
    letter-spacing:2.5px;
    line-height:1.8;
  }

  .intro-line{
    width:360px;
  }
}
/* FIX: remove intro completely after fade */

#intro.hide{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  transform:translateY(-120vh) !important;
}

#intro.hide *{
  opacity:0 !important;
  visibility:hidden !important;
}

@media(max-width:900px){

  .tuna{
    padding-bottom:120px;
  }

  .tuna-img{

    position:relative;

    right:auto;
    bottom:auto;

    width:100%;
    max-width:420px;

    display:block;

    margin:40px auto 0;
  }

}
.cinema-logo-frame{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  padding:0 !important;
  width:620px;
  max-width:82vw;
}

.cinema-logo-frame:before{
  display:none !important;
}

.intro-logo-3d{
  mix-blend-mode:screen;
  filter:
    drop-shadow(0 0 35px rgba(0,220,255,.95))
    drop-shadow(0 0 120px rgba(0,140,255,.55));
}
.intro-cinema-bg{
  opacity:.75 !important;
  filter:brightness(1.45) contrast(1.2) !important;
}

.intro-cinema-overlay{
  background:
    radial-gradient(circle at center,rgba(0,210,255,.05),transparent 38%),
    linear-gradient(90deg,rgba(0,0,0,.45),rgba(0,0,0,.10),rgba(0,0,0,.45)) !important;
}

/* INTRO: live 3D neural network, no static background */

#intro{
  background:#000 !important;
}

.intro-cinema-bg{
  background:transparent !important;
  opacity:0 !important;
}

#intro-vanta-net{
  position:absolute !important;
  inset:0 !important;
  z-index:1 !important;
  opacity:1 !important;
}

.intro-neural-3d{
  z-index:2 !important;
}

.intro-cinema-overlay{
  z-index:3 !important;
  background:
    radial-gradient(circle at center,rgba(0,180,255,.05),transparent 38%),
    linear-gradient(90deg,rgba(0,0,0,.55),rgba(0,0,0,.08),rgba(0,0,0,.55)) !important;
}

.intro-cinema-content{
  z-index:10 !important;
}

.cinema-logo-frame{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  padding:0 !important;
}

.cinema-logo-frame:before{
  display:none !important;
}

.intro-logo-3d{
  width:620px !important;
  max-width:82vw !important;
  display:block !important;
  mix-blend-mode:screen !important;
  filter:
    drop-shadow(0 0 40px rgba(0,220,255,.95))
    drop-shadow(0 0 120px rgba(0,140,255,.55)) !important;
}

/* intro text not bold */

.cinema-text,
.cinema-text span,
.typewriter-intro span{
  font-weight:400 !important;
}

/* page text less bold */

.band h2,
.hero-text h1:nth-of-type(2){
  font-weight:600 !important;
}

/* OceanOS image: no old box effect */

.oceanos-logo-wrap img,
.oceanos-logo{
  mix-blend-mode:screen !important;
  background:transparent !important;
  border:none !important;
}
/* FINAL FIX LOGOS + BACKGROUND GRID */

.intro-logo-3d{
  display:block !important;
  width:620px !important;
  max-width:82vw !important;
  height:auto !important;
  opacity:1 !important;
  visibility:visible !important;
  position:relative !important;
  z-index:20 !important;
  mix-blend-mode:screen !important;
  filter:
    drop-shadow(0 0 45px rgba(0,220,255,.95))
    drop-shadow(0 0 140px rgba(0,140,255,.55)) !important;
}

.cinema-logo-frame{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  padding:0 !important;
  overflow:visible !important;
}

.cinema-logo-frame:before{
  display:none !important;
}

.nav-logo{
  content:url("assets_century/oceanos_logo_finale.png");
  width:150px !important;
  height:auto !important;
  mix-blend-mode:screen !important;
  filter:drop-shadow(0 0 22px rgba(0,200,255,.75)) !important;
}

.oceanos-logo{
  content:url("assets_century/oceanos_logo_finale_big.png");
  background:transparent !important;
  border:none !important;
  mix-blend-mode:screen !important;
  filter:
    drop-shadow(0 0 45px rgba(0,200,255,.8))
    drop-shadow(0 0 120px rgba(0,140,255,.35)) !important;
}

/* bring back grid / sonar feel in sections */

.band{
  background:
    radial-gradient(circle at 68% 45%,rgba(0,180,255,.22),transparent 28%),
    linear-gradient(180deg,rgba(2,7,18,.88),rgba(2,7,18,.72)) !important;
}

.band:before{
  opacity:.55 !important;
}

.band:after{
  opacity:.18 !important;
}

.hero{
  background:
    radial-gradient(circle at 72% 50%,rgba(0,145,255,.32),transparent 30%),
    linear-gradient(135deg,rgba(2,7,18,.94),rgba(6,25,53,.75) 60%,rgba(2,7,18,.92)) !important;
}

.network{
  opacity:.28 !important;
}

.cinema-text,
.cinema-text span,
.typewriter-intro span{
  font-weight:400 !important;
}
/* ==================================================
   PATCH 09/05 — intro sequenziale, logo corretto,
   rete 3D/granulare e mobile stabile
================================================== */

#site-vanta-net,
.site-neural-granular{
  position:fixed;
  inset:0;
  pointer-events:none;
}

#site-vanta-net{
  z-index:0;
  opacity:.34;
  mix-blend-mode:screen;
}

.site-neural-granular{
  z-index:1;
  opacity:.30;
  background:
    radial-gradient(circle at 16% 22%,rgba(0,210,255,.30) 0 1px,transparent 2px),
    radial-gradient(circle at 62% 18%,rgba(0,130,255,.28) 0 1px,transparent 2px),
    radial-gradient(circle at 80% 72%,rgba(0,210,255,.22) 0 1px,transparent 2px),
    linear-gradient(118deg,transparent 0 44%,rgba(0,160,255,.16) 45%,transparent 46%),
    linear-gradient(62deg,transparent 0 38%,rgba(0,220,255,.11) 39%,transparent 40%);
  background-size:180px 180px,260px 260px,340px 340px,520px 520px,680px 680px;
  transform:perspective(900px) rotateX(58deg) scale(1.18) translateY(12vh);
  animation:granular3DMove 26s linear infinite;
}

header,.hero,.band,footer,.investor-badge{position:relative;z-index:4;}

.hero,.band{
  background-color:rgba(2,7,18,.72) !important;
  backdrop-filter:blur(1px);
}

.hero:before,
.band > .section-neural-bg{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
}

.hero:before,
.band:before{
  background:
    radial-gradient(circle at 18% 22%,rgba(0,190,255,.24) 0 2px,transparent 3px),
    radial-gradient(circle at 78% 34%,rgba(0,150,255,.22) 0 2px,transparent 3px),
    radial-gradient(circle at 46% 76%,rgba(0,220,255,.18) 0 1px,transparent 3px),
    linear-gradient(118deg,transparent 0 43%,rgba(0,170,255,.18) 44%,transparent 45%),
    linear-gradient(64deg,transparent 0 39%,rgba(0,210,255,.13) 40%,transparent 41%),
    repeating-radial-gradient(ellipse at 50% 100%,rgba(0,160,255,.14) 0 1px,transparent 1px 20px) !important;
  background-size:260px 260px,340px 340px,430px 430px,560px 560px,720px 720px,100% 100% !important;
  opacity:.52 !important;
  transform:perspective(900px) rotateX(54deg) translateY(55px) scale(1.12);
  animation:granular3DMove 34s linear infinite;
}

.hero > *, .band > *{position:relative;z-index:3;}

.nav-logo{
  content:url("assets_century/oceanos_logo_finale.png") !important;
  width:116px !important;
  max-height:58px;
  object-fit:contain;
  mix-blend-mode:screen !important;
  filter:drop-shadow(0 0 22px rgba(0,200,255,.75)) !important;
}

#intro{z-index:9999;background:#000 !important;}
#intro-vanta-net{position:absolute;inset:0;z-index:1;opacity:.95;}
.intro-neural-3d{position:absolute;inset:-12%;z-index:2;pointer-events:none;transform-style:preserve-3d;}
.neural-grid,.neural-lines,.neural-granular,.neural-sphere{position:absolute;inset:0;}
.neural-grid{
  opacity:.38;
  background:
    linear-gradient(rgba(0,180,255,.22) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,180,255,.14) 1px,transparent 1px);
  background-size:58px 58px;
  transform:perspective(850px) rotateX(62deg) translateY(25vh) scale(1.25);
  animation:introGridDrift 18s linear infinite;
}
.neural-lines{
  opacity:.42;
  background:
    linear-gradient(120deg,transparent 0 42%,rgba(0,180,255,.26) 43%,transparent 44%),
    linear-gradient(58deg,transparent 0 48%,rgba(0,120,255,.22) 49%,transparent 50%);
  background-size:430px 430px,620px 620px;
  animation:introGridDrift 22s linear infinite reverse;
}
.neural-granular{
  opacity:.62;
  background:
    radial-gradient(circle,rgba(0,230,255,.62) 0 1px,transparent 2px),
    radial-gradient(circle,rgba(0,120,255,.42) 0 1px,transparent 2px);
  background-size:42px 42px,86px 86px;
  transform:perspective(900px) rotateX(58deg) translateY(16vh) scale(1.2);
  animation:granular3DMove 20s linear infinite;
}
.neural-sphere{
  inset:18% 27%;
  border-radius:50%;
  border:1px solid rgba(0,210,255,.18);
  box-shadow:0 0 80px rgba(0,180,255,.18), inset 0 0 80px rgba(0,180,255,.08);
  transform:rotateX(64deg);
  animation:spherePulse 5s ease-in-out infinite;
}

.intro-cinema-content{z-index:10 !important;}
.cinema-logo-frame{width:min(760px,84vw) !important;max-width:84vw !important;height:340px;display:flex;align-items:center;justify-content:center;}
.cinema-logo-glow{opacity:.55;}
.intro-c-logo,
.intro-logo-3d{position:absolute;display:block;mix-blend-mode:screen;transform-style:preserve-3d;will-change:transform,opacity,filter;}
.intro-c-logo{
  width:min(270px,40vw);
  z-index:14;
  opacity:0;
  filter:drop-shadow(0 0 42px rgba(0,220,255,.96)) drop-shadow(0 0 110px rgba(0,120,255,.62));
  animation:cLogoArrival 1.65s cubic-bezier(.17,.84,.32,1) forwards,
            cLogoSpinContinuous 2.6s linear infinite 1.65s;
}
.intro-logo-3d{
  content:url("assets_century/oceanos_logo_finale.png") !important;
  width:min(690px,82vw) !important;
  height:auto !important;
  z-index:13 !important;
  opacity:0 !important;
  filter:drop-shadow(0 0 48px rgba(0,220,255,.9)) drop-shadow(0 0 130px rgba(0,140,255,.55)) !important;
  animation:fullLogoFusion 2.4s ease forwards 2.25s, logoBackgroundBreath 6s ease-in-out infinite 4.7s;
}
.intro-line{opacity:0;animation:introLineAfterLogo 1.2s ease forwards 4.8s, cinemaLine 2.8s ease-in-out infinite 6s;}

.cinema-text span,
.typewriter-intro span{
  opacity:1 !important;
  transform:none !important;
  animation:none !important;
  min-height:1.7em;
  font-weight:400 !important;
}
.typewriter-intro span.typing::after{content:"_";animation:cursorBlink .8s steps(2,end) infinite;}
.typewriter-intro span.typed::after{content:"";}
.cinema-text{font-size:clamp(13px,1.05vw,18px) !important;letter-spacing:4px;line-height:1.85;}

#intro.hide{opacity:0 !important;visibility:hidden !important;pointer-events:none !important;transform:translateY(-120vh) !important;}
#intro.hide *{pointer-events:none !important;}

@keyframes cLogoArrival{
  0%{opacity:0;transform:translateX(-42vw) rotateY(0deg) rotateZ(-18deg) scale(.52);filter:blur(14px) drop-shadow(0 0 18px #00c8ff)}
  72%{opacity:1;transform:translateX(0) rotateY(720deg) rotateZ(0deg) scale(1.06);filter:blur(0) drop-shadow(0 0 70px #00c8ff)}
  100%{opacity:.94;transform:translateX(0) rotateY(720deg) scale(1)}
}
@keyframes cLogoSpinContinuous{
  from{transform:rotateY(0deg) scale(1)}
  to{transform:rotateY(360deg) scale(1)}
}
@keyframes fullLogoFusion{
  0%{opacity:0;transform:scale(.94) translateZ(-80px);filter:blur(18px)}
  58%{opacity:.78;transform:scale(1.03) translateZ(0);filter:blur(4px)}
  100%{opacity:.92;transform:scale(1) translateZ(0);filter:blur(0)}
}
@keyframes logoBackgroundBreath{
  0%,100%{transform:scale(1);opacity:.88;}
  50%{transform:scale(1.025);opacity:.98;}
}
@keyframes introLineAfterLogo{to{opacity:1;}}
@keyframes cursorBlink{50%{opacity:0;}}
@keyframes introGridDrift{to{background-position:420px 420px,-420px 420px;}}
@keyframes granular3DMove{to{background-position:360px 360px,-260px 260px,430px -430px,560px 560px,-720px 720px;}}
@keyframes spherePulse{0%,100%{opacity:.28;transform:rotateX(64deg) scale(.92)}50%{opacity:.62;transform:rotateX(64deg) scale(1.05)}}

@media(max-width:900px){
  #site-vanta-net,#intro-vanta-net{display:none !important;}
  .site-neural-granular{opacity:.18;animation:none;transform:none;background-size:120px 120px,180px 180px,220px 220px,360px 360px,420px 420px;}
  #intro{perspective:none !important;}
  .intro-neural-3d{inset:0;opacity:.45;}
  .neural-grid{transform:none;opacity:.22;background-size:48px 48px;animation:introGridDrift 28s linear infinite;}
  .neural-lines,.neural-sphere{display:none;}
  .neural-granular{opacity:.24;transform:none;background-size:54px 54px,96px 96px;animation:none;}
  .cinema-logo-frame{height:230px;width:88vw !important;}
  .intro-c-logo{width:min(170px,42vw);animation:cLogoArrivalMobile 1.25s ease forwards, cLogoSpinContinuous 3.4s linear infinite 1.25s;}
  .intro-logo-3d{width:min(360px,84vw) !important;animation:fullLogoFusion 1.55s ease forwards 1.55s, logoBackgroundBreath 6s ease-in-out infinite 3.2s;}
  .intro-line{width:70vw;margin:16px 0 14px;animation:introLineAfterLogo .7s ease forwards 3.1s;}
  .cinema-text{font-size:10px !important;letter-spacing:2px;line-height:1.6;padding:0 14px;}
  .typewriter-intro span{min-height:1.4em;}
  .hero:before,.band:before{transform:none !important;opacity:.25 !important;animation:none !important;}
}
@keyframes cLogoArrivalMobile{
  0%{opacity:0;transform:translateX(-36vw) rotateY(0deg) scale(.58);filter:blur(10px)}
  100%{opacity:.92;transform:translateX(0) rotateY(720deg) scale(1);filter:blur(0) drop-shadow(0 0 44px #00c8ff)}
}


/* ==================================================
   FINAL PATCH — intro C -> testo -> logo, header +50%,
   nave/glow centrati, immagini drone/tuna, rete 3D sezioni
================================================== */

/* Intro: niente Vanta/rete neurale, solo gradiente + griglia 3D */
#intro-vanta-net{display:none !important;}
#intro{
  background:
    radial-gradient(circle at 50% 44%,rgba(0,170,255,.22),transparent 30%),
    radial-gradient(circle at 50% 70%,rgba(0,90,180,.24),transparent 36%),
    linear-gradient(180deg,#000 0%,#020712 48%,#000 100%) !important;
}
.intro-neural-3d{
  position:absolute !important;
  inset:-10% !important;
  z-index:2 !important;
  pointer-events:none !important;
  overflow:hidden !important;
}
.neural-sphere,
.neural-lines{display:none !important;}
.neural-grid{
  display:block !important;
  position:absolute !important;
  inset:0 !important;
  opacity:.42 !important;
  background:
    linear-gradient(rgba(0,190,255,.20) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,150,255,.14) 1px,transparent 1px),
    radial-gradient(circle at center,rgba(0,190,255,.20),transparent 42%) !important;
  background-size:62px 62px,62px 62px,100% 100% !important;
  transform:perspective(900px) rotateX(62deg) translateY(22vh) scale(1.28) !important;
  animation:introPalantirGrid 18s linear infinite !important;
}
.neural-granular{
  display:block !important;
  position:absolute !important;
  inset:0 !important;
  opacity:.34 !important;
  background:
    radial-gradient(circle,rgba(0,220,255,.55) 0 1px,transparent 2px),
    radial-gradient(circle,rgba(0,110,255,.35) 0 1px,transparent 2px) !important;
  background-size:46px 46px,94px 94px !important;
  transform:perspective(900px) rotateX(60deg) translateY(16vh) scale(1.18) !important;
  animation:introPalantirDots 22s linear infinite !important;
}
.intro-cinema-bg{display:none !important;}
.intro-cinema-overlay{
  z-index:3 !important;
  background:
    radial-gradient(circle at 50% 46%,rgba(0,210,255,.09),transparent 34%),
    linear-gradient(90deg,rgba(0,0,0,.60),rgba(0,0,0,.10),rgba(0,0,0,.60)) !important;
}
.cinema-logo-frame{
  width:min(760px,84vw) !important;
  height:315px !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  padding:0 !important;
  overflow:visible !important;
}
.cinema-logo-frame:before{display:none !important;}
.cinema-logo-glow{opacity:.38 !important;}
.intro-c-logo{
  width:min(250px,38vw) !important;
  opacity:1 !important;
  z-index:15 !important;
  filter:drop-shadow(0 0 42px rgba(0,220,255,.96)) drop-shadow(0 0 110px rgba(0,120,255,.62)) !important;
  animation:cLogoGrowSpin 3s cubic-bezier(.18,.84,.28,1) forwards,
            cLogoKeepSpin 2.8s linear infinite 3s !important;
}
#intro.text-complete .intro-c-logo{
  animation:cLogoFadeOut .65s ease forwards !important;
}
.intro-logo-3d{
  content:url("assets_century/oceanos_logo_finale.png") !important;
  width:min(720px,84vw) !important;
  opacity:0 !important;
  z-index:14 !important;
  transform:scale(.92) translateZ(0) !important;
  filter:drop-shadow(0 0 48px rgba(0,220,255,.92)) drop-shadow(0 0 130px rgba(0,140,255,.55)) !important;
  animation:none !important;
}
#intro.show-full-logo .intro-logo-3d{
  animation:fullLogoArriveFinal 1.35s ease forwards !important;
}
.intro-line{
  opacity:1 !important;
  margin:12px 0 18px !important;
  animation:cinemaLine 2.8s ease-in-out infinite !important;
}
.cinema-text,
.typewriter-intro{
  position:relative !important;
  z-index:18 !important;
}
.cinema-text span,
.typewriter-intro span{
  opacity:1 !important;
  transform:none !important;
  animation:none !important;
  min-height:1.65em !important;
  font-weight:400 !important;
}
.typewriter-intro span.typing::after{content:"_";animation:cursorBlink .8s steps(2,end) infinite;}
.typewriter-intro span.typed::after{content:"";}
#intro.text-complete .typewriter-intro,
#intro.text-complete .intro-line{
  animation:introTextFadeOut .65s ease forwards !important;
}

@keyframes cLogoGrowSpin{
  0%{opacity:0;transform:translateX(-22vw) rotateY(0deg) scale(.60);filter:blur(14px) drop-shadow(0 0 18px #00c8ff)}
  62%{opacity:1;transform:translateX(0) rotateY(540deg) scale(1.08);filter:blur(0) drop-shadow(0 0 72px #00c8ff)}
  100%{opacity:.96;transform:translateX(0) rotateY(720deg) scale(1.22);filter:blur(0) drop-shadow(0 0 90px #00d9ff)}
}
@keyframes cLogoKeepSpin{
  from{transform:rotateY(0deg) scale(1.22)}
  to{transform:rotateY(360deg) scale(1.22)}
}
@keyframes cLogoFadeOut{
  to{opacity:0;transform:rotateY(220deg) scale(.82);filter:blur(12px) drop-shadow(0 0 28px #00c8ff)}
}
@keyframes fullLogoArriveFinal{
  0%{opacity:0;transform:scale(.82) translateY(18px);filter:blur(18px)}
  62%{opacity:.92;transform:scale(1.05) translateY(0);filter:blur(3px)}
  100%{opacity:1;transform:scale(1) translateY(0);filter:blur(0)}
}
@keyframes introTextFadeOut{to{opacity:0;transform:translateY(12px)}}
@keyframes introPalantirGrid{to{background-position:420px 420px,-420px 420px,0 0}}
@keyframes introPalantirDots{to{background-position:360px 360px,-280px 280px}}
@keyframes cursorBlink{50%{opacity:0;}}

/* Header logo +50% */
header{height:96px !important;}
.nav-logo{
  content:url("assets_century/oceanos_logo_finale_big.png") !important;
  width:225px !important;
  max-height:82px !important;
  object-fit:contain !important;
  mix-blend-mode:screen !important;
  filter:drop-shadow(0 0 26px rgba(0,200,255,.78)) !important;
}

/* Hero nave: il glow resta sotto e centrato */
.hero-ship-wrap{
  position:absolute !important;
  right:5% !important;
  top:13% !important;
  width:650px !important;
  max-width:52vw !important;
  z-index:2 !important;
}
.hero-ship-img{
  position:relative !important;
  right:auto !important;
  top:auto !important;
  width:100% !important;
  max-width:100% !important;
  z-index:3 !important;
  display:block !important;
}
.hero-ship-glow{
  position:absolute !important;
  left:50% !important;
  bottom:3% !important;
  width:72% !important;
  height:26% !important;
  transform:translateX(-50%) !important;
  border-radius:50% !important;
  background:radial-gradient(ellipse at center,rgba(0,220,255,.40),rgba(0,120,255,.17) 48%,transparent 72%) !important;
  filter:blur(14px) !important;
  z-index:1 !important;
  pointer-events:none !important;
}
.hero-rings{
  right:10% !important;
  top:62% !important;
  z-index:1 !important;
}

/* Immagini aggiornate */
.rov-img{content:url("assets_century/drone_logo.png") !important;}
.tuna-img{content:url("assets_century/tuna_logo.png") !important;}

/* Rete 3D visibile nel passaggio tra sezioni */
.band{
  background:
    radial-gradient(circle at 68% 45%,rgba(0,180,255,.20),transparent 30%),
    linear-gradient(180deg,rgba(2,7,18,.84),rgba(2,7,18,.66)) !important;
}
.band:before,
.hero:before{
  opacity:.42 !important;
  mix-blend-mode:screen !important;
}
.band:after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  pointer-events:none !important;
  z-index:1 !important;
  opacity:.24 !important;
  background:
    linear-gradient(rgba(0,190,255,.13) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,150,255,.09) 1px,transparent 1px),
    radial-gradient(circle at 50% 100%,rgba(0,190,255,.15),transparent 45%) !important;
  background-size:54px 54px,54px 54px,100% 100% !important;
  transform:perspective(1000px) rotateX(60deg) translateY(78px) scale(1.18) !important;
  animation:sectionPalantirMove 30s linear infinite !important;
}
.band > *{position:relative;z-index:3;}
@keyframes sectionPalantirMove{to{background-position:360px 360px,-360px 360px,0 0;}}

@media(max-width:900px){
  header{height:76px !important;padding:0 6% !important;}
  .nav-logo{width:150px !important;max-height:62px !important;}
  .hero-ship-wrap{position:relative !important;right:auto !important;top:auto !important;max-width:100% !important;width:100% !important;margin-top:35px !important;}
  .hero-ship-glow{bottom:8%;width:74%;height:22%;filter:blur(10px) !important;}
  #intro{perspective:none !important;}
  .cinema-logo-frame{height:220px !important;width:88vw !important;}
  .intro-c-logo{width:min(170px,42vw) !important;animation:cLogoGrowSpinMobile 2.6s ease forwards,cLogoKeepSpinMobile 3.4s linear infinite 2.6s !important;}
  #intro.text-complete .intro-c-logo{animation:cLogoFadeOut .55s ease forwards !important;}
  .intro-logo-3d{width:min(380px,86vw) !important;}
  .neural-grid{transform:none !important;opacity:.24 !important;background-size:50px 50px !important;}
  .neural-granular{transform:none !important;opacity:.18 !important;}
  .band:after,.hero:before{transform:none !important;opacity:.18 !important;animation:none !important;}
}
@keyframes cLogoGrowSpinMobile{
  0%{opacity:0;transform:translateX(-28vw) rotateY(0deg) scale(.62);filter:blur(10px)}
  100%{opacity:.96;transform:translateX(0) rotateY(720deg) scale(1.12);filter:blur(0) drop-shadow(0 0 48px #00c8ff)}
}
@keyframes cLogoKeepSpinMobile{from{transform:rotateY(0deg) scale(1.12)}to{transform:rotateY(360deg) scale(1.12)}}

/* PATCH INTRO TIMING + MOBILE LOGOS */

.intro-c-logo{
  animation:
    cLogoArrival 3s cubic-bezier(.17,.84,.32,1) forwards,
    cLogoSpinContinuous 2.8s linear infinite 3s !important;
}

.intro-logo-3d{
  animation:
    fullLogoFusion 2.8s ease forwards 17s,
    logoBackgroundBreath 6s ease-in-out infinite 19.8s !important;
}

@media(max-width:900px){
  .intro-c-logo{
    opacity:1 !important;
    display:block !important;
    width:min(190px,48vw) !important;
    animation:
      cLogoArrivalMobile 3s ease forwards,
      cLogoSpinContinuous 3.2s linear infinite 3s !important;
  }

  .intro-logo-3d{
    opacity:0;
    display:block !important;
    width:min(390px,88vw) !important;
    animation:
      fullLogoFusion 2.4s ease forwards 15.5s,
      logoBackgroundBreath 6s ease-in-out infinite 18s !important;
  }
}

/* PATCH HERO SHIP GLOW UNDER BOAT */

.hero-ship-wrap{
  position:absolute;
  right:5%;
  top:13%;
  width:650px;
  max-width:52vw;
  z-index:2;
}

.hero-ship-img{
  position:relative !important;
  right:auto !important;
  top:auto !important;
  width:100% !important;
  max-width:100% !important;
  z-index:3 !important;
}

.hero-ship-glow{
  position:absolute;
  left:50%;
  bottom:4%;
  width:78%;
  height:24%;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(0,220,255,.42),rgba(0,120,255,.20) 42%,transparent 72%);
  filter:blur(18px);
  z-index:1;
  pointer-events:none;
}

@media(max-width:900px){
  .hero-ship-wrap{
    position:relative;
    right:auto;
    top:auto;
    width:100%;
    max-width:100%;
    margin-top:35px;
  }
}

/* PATCH FOOTER HEIGHT */

footer{
  padding:32px 9% !important;
  gap:28px !important;
}

footer h2{
  font-size:20px !important;
  margin:10px 0 !important;
}

.contact-info p{
  margin:5px 0 !important;
}
/* PATCH MOBILE OCEANOS LOGO */

@media(max-width:900px){
  #oceanos .oceanos-logo{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    position:relative !important;
    z-index:5 !important;
    width:min(320px,82vw) !important;
    max-width:82vw !important;
    height:auto !important;
    margin:38px auto 0 !important;
    content:url("assets_century/oceanos_logo_finale_big.png") !important;
    mix-blend-mode:screen !important;
    filter:
      drop-shadow(0 0 38px rgba(0,200,255,.85))
      drop-shadow(0 0 90px rgba(0,120,255,.38)) !important;
  }

  #oceanos.split{
    display:block !important;
  }
}

/* === SURGICAL FIX FINAL === */

/* reset menu rotto */
nav a{
  font-size:12px !important;
  margin:0 14px !important;
}

/* header normale, logo molto più grande */
header{
  height:96px !important;
  padding:0 7% !important;
}

.nav-logo{
  content:url("assets_century/oceanos_logo_finale_big.png") !important;
  width:300px !important;
  max-height:90px !important;
  object-fit:contain !important;
}

/* intro: il logo completo appare SOLO quando JS aggiunge show-full-logo */
.intro-logo-3d{
  opacity:0 !important;
  visibility:hidden !important;
  animation:none !important;
}

#intro.show-full-logo .intro-logo-3d{
  opacity:1 !important;
  visibility:visible !important;
  animation:fullLogoArriveFinal 2.4s ease forwards !important;
}

#intro.text-complete .intro-c-logo{
  animation:cLogoFadeOut .75s ease forwards !important;
}

/* mobile intro: forza C + logo */
@media(max-width:900px){
  .intro-c-logo{
    display:block !important;
    opacity:1 !important;
    visibility:visible !important;
    width:min(190px,48vw) !important;
  }

  #intro.show-full-logo .intro-logo-3d{
    display:block !important;
    opacity:1 !important;
    visibility:visible !important;
    width:min(390px,88vw) !important;
  }
}

/* nave: glow sotto la nave, non davanti */
.hero-ship-wrap{
  isolation:isolate !important;
}

.hero-ship-img{
  position:relative !important;
  z-index:5 !important;
}

.hero-ship-glow{
  z-index:0 !important;
  bottom:-4% !important;
  width:68% !important;
  height:18% !important;
  opacity:.75 !important;
  filter:blur(22px) !important;
}

.hero-rings{
  z-index:0 !important;
  right:11% !important;
  top:66% !important;
  opacity:.45 !important;
}

/* rete 3D tra sezioni più visibile desktop */
.band:after{
  display:block !important;
  opacity:.38 !important;
  z-index:1 !important;
  mix-blend-mode:screen !important;
}

/* OceanOS mobile: usa il png esistente, non il transparent se manca */
@media(max-width:900px){
  #oceanos .oceanos-logo{
    display:block !important;
    opacity:1 !important;
    visibility:visible !important;
    content:url("assets_century/oceanos_logo_finale_big.png") !important;
    width:min(330px,84vw) !important;
    max-width:84vw !important;
    height:auto !important;
    margin:38px auto 0 !important;
    position:relative !important;
    z-index:5 !important;
  }
}

/* === REAL FINAL OVERRIDE === */

/* Header: menu corretto + logo davvero grande */
nav a{
  font-size:12px !important;
  margin:0 14px !important;
}

header{
  height:96px !important;
}

.nav-logo{
  content:url("assets_century/oceanos_logo_finale.png") !important;
  width:220px !important;
  max-width:220px !important;
  max-height:88px !important;
  height:auto !important;
  object-fit:contain !important;
  display:block !important;
}

/* Intro: C prima, testo, poi logo completo */
.intro-c-logo{
  opacity:1 !important;
  visibility:visible !important;
  display:block !important;
  width:min(280px,42vw) !important;
  z-index:20 !important;
  animation:
    cLogoArrival 3.2s ease forwards,
    cLogoSpinContinuous 3s linear infinite 3.2s !important;
}

.intro-logo-3d{
  opacity:0 !important;
  visibility:hidden !important;
  display:block !important;
  width:min(720px,84vw) !important;
  z-index:25 !important;
  animation:none !important;
}

#intro.text-complete .intro-c-logo{
  animation:cLogoFadeOutFinal 1.4s ease forwards !important;
}

#intro.show-full-logo .intro-c-logo{
  opacity:0 !important;
  visibility:hidden !important;
  display:none !important;
}

#intro.show-full-logo .intro-logo-3d{
  opacity:1 !important;
  visibility:visible !important;
  animation:fullLogoFinalShow 2.2s ease forwards !important;
}

@keyframes cLogoFadeOutFinal{
  to{
    opacity:0;
    visibility:hidden;
    transform:scale(.72) rotateY(180deg);
    filter:blur(10px);
  }
}

@keyframes fullLogoFinalShow{
  0%{
    opacity:0;
    transform:scale(.82);
    filter:blur(18px) drop-shadow(0 0 20px #00c8ff);
  }
  100%{
    opacity:1;
    transform:scale(1);
    filter:blur(0) drop-shadow(0 0 80px #00c8ff);
  }
}

/* OceanOS mobile visibile */
@media(max-width:900px){
  #oceanos .oceanos-logo{
    display:block !important;
    opacity:1 !important;
    visibility:visible !important;
    content:url("assets_century/oceanos_logo_finale_big.png") !important;
    width:min(330px,86vw) !important;
    max-width:86vw !important;
    height:auto !important;
    margin:38px auto 0 !important;
    position:relative !important;
    z-index:30 !important;
    mix-blend-mode:screen !important;
  }

  .intro-c-logo{
    width:min(190px,48vw) !important;
  }

  #intro.show-full-logo .intro-logo-3d{
    width:min(390px,88vw) !important;
  }
}
/* === PATCH DESKTOP LOGO + MOBILE INTRO/OCEANOS === */

/* Desktop: logo header più grande senza ingrandire header/menu */
.nav-logo{
  width:310px !important;
  max-width:310px !important;
  height:auto !important;
  max-height:94px !important;
  object-fit:contain !important;
  transform:scale(1.35) !important;
  transform-origin:left center !important;
}

/* Mobile intro: forza C e logo sopra tutto */
@media(max-width:900px){
  .cinema-logo-frame{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    height:240px !important;
    width:90vw !important;
    position:relative !important;
    z-index:50 !important;
  }

  .intro-c-logo{
    display:block !important;
    opacity:1 !important;
    visibility:visible !important;
    position:absolute !important;
    width:190px !important;
    max-width:52vw !important;
    z-index:60 !important;
    animation:
      cLogoArrivalMobile 2.8s ease forwards,
      cLogoSpinContinuous 3s linear infinite 2.8s !important;
  }

  #intro.text-complete .intro-c-logo{
    animation:cLogoFadeOutFinal 1.4s ease forwards !important;
  }

  #intro.show-full-logo .intro-c-logo{
    display:none !important;
    opacity:0 !important;
    visibility:hidden !important;
  }

  .intro-logo-3d{
    display:block !important;
    position:absolute !important;
    opacity:0 !important;
    visibility:hidden !important;
    width:390px !important;
    max-width:88vw !important;
    z-index:70 !important;
  }

  #intro.show-full-logo .intro-logo-3d{
    opacity:1 !important;
    visibility:visible !important;
    animation:fullLogoFinalShow 2.2s ease forwards !important;
  }

  /* Mobile OceanOS: niente content, cambia direttamente src via dimensioni/visibilità */
  #oceanos{
    display:block !important;
  }

  #oceanos .oceanos-logo{
    display:block !important;
    opacity:1 !important;
    visibility:visible !important;
    position:relative !important;
    z-index:50 !important;
    width:320px !important;
    max-width:86vw !important;
    height:auto !important;
    margin:40px auto 0 !important;
    mix-blend-mode:screen !important;
    filter:drop-shadow(0 0 42px rgba(0,200,255,.85)) !important;
  }
}

/* === DESKTOP SPACING TEXT BLOCKS === */

@media(min-width:901px){

  .split .copy{
    padding-right:70px !important;
  }

  .split .copy p{
    margin-bottom:26px !important;
    line-height:1.72 !important;
  }

  .split .copy h2{
    margin-bottom:34px !important;
  }

  .split .copy .eyebrow{
    margin-bottom:22px !important;
    letter-spacing:4px !important;
  }

  .split{
    gap:90px !important;
    align-items:center !important;
  }
}

/* === DESKTOP SPACING TEXT BLOCKS === */

@media(min-width:901px){

  .split .copy{
    padding-right:70px !important;
  }

  .split .copy p{
    margin-bottom:26px !important;
    line-height:1.72 !important;
  }

  .split .copy h2{
    margin-bottom:34px !important;
  }

  .split .copy .eyebrow{
    margin-bottom:22px !important;
    letter-spacing:4px !important;
  }

  .split{
    gap:90px !important;
    align-items:center !important;
  }
}

/* === MOBILE SAFE INTRO — iPhone/Safari compatible === */

@media(max-width:900px){

  #intro{
    background:
      radial-gradient(circle at 50% 42%,rgba(0,190,255,.28),transparent 28%),
      linear-gradient(180deg,#000 0%,#020712 55%,#000 100%) !important;
    perspective:none !important;
  }

  .intro-neural-3d{
    display:block !important;
    opacity:.35 !important;
    transform:none !important;
  }

  .neural-grid{
    display:block !important;
    opacity:.22 !important;
    transform:none !important;
    background-size:44px 44px !important;
  }

  .neural-granular,
  .neural-lines,
  .neural-sphere,
  #matrix{
    display:none !important;
  }

  .intro-cinema-content{
    z-index:100 !important;
    position:relative !important;
    transform:none !important;
  }

  .cinema-logo-frame{
    height:210px !important;
    width:92vw !important;
    max-width:92vw !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    position:relative !important;
    transform:none !important;
    overflow:visible !important;
  }

  .intro-c-logo{
    display:block !important;
    opacity:1 !important;
    visibility:visible !important;
    position:absolute !important;
    width:170px !important;
    max-width:48vw !important;
    height:auto !important;
    z-index:120 !important;
    mix-blend-mode:normal !important;
    transform:none !important;
    animation:mobileCSpinSafe 4.2s linear infinite !important;
    filter:drop-shadow(0 0 36px rgba(0,210,255,.95)) !important;
  }

  #intro.text-complete .intro-c-logo{
    animation:mobileCFadeSafe 1.2s ease forwards !important;
  }

  #intro.show-full-logo .intro-c-logo{
    display:none !important;
    opacity:0 !important;
    visibility:hidden !important;
  }

  .intro-logo-3d{
    display:block !important;
    position:absolute !important;
    opacity:0 !important;
    visibility:hidden !important;
    width:360px !important;
    max-width:88vw !important;
    height:auto !important;
    z-index:130 !important;
    mix-blend-mode:normal !important;
    transform:none !important;
    animation:none !important;
    filter:drop-shadow(0 0 44px rgba(0,210,255,.9)) !important;
  }

  #intro.show-full-logo .intro-logo-3d{
    opacity:1 !important;
    visibility:visible !important;
    animation:mobileLogoShowSafe 1.8s ease forwards !important;
  }

  .intro-line{
    width:72vw !important;
    margin:14px 0 16px !important;
  }

  .cinema-text{
    font-size:10px !important;
    letter-spacing:1.7px !important;
    line-height:1.65 !important;
    padding:0 18px !important;
    z-index:140 !important;
  }
}

@keyframes mobileCSpinSafe{
  from{
    transform:rotate(0deg) scale(1);
  }
  to{
    transform:rotate(360deg) scale(1.04);
  }
}

@keyframes mobileCFadeSafe{
  to{
    opacity:0;
    visibility:hidden;
    transform:scale(.7);
  }
}

@keyframes mobileLogoShowSafe{
  from{
    opacity:0;
    transform:scale(.86);
    filter:blur(12px) drop-shadow(0 0 20px rgba(0,210,255,.7));
  }
  to{
    opacity:1;
    transform:scale(1);
    filter:blur(0) drop-shadow(0 0 44px rgba(0,210,255,.9));
  }
}
.mobile-menu-btn{
  display:none;
}

@media(max-width:900px){
  .mobile-menu-btn{
    display:block !important;
    position:absolute;
    left:18px;
    top:50%;
    transform:translateY(-50%);
    z-index:999;
    background:transparent;
    border:1px solid rgba(0,190,255,.7);
    color:#dff7ff;
    font-size:24px;
    width:44px;
    height:40px;
    border-radius:6px;
  }

  nav{
    display:none !important;
  }

  nav.open{
    display:flex !important;
    position:absolute;
    top:82px;
    left:0;
    right:0;
    flex-direction:column;
    background:rgba(1,8,20,.96);
    padding:18px 0;
    z-index:998;
  }

  nav.open a{
    padding:14px 20px;
    text-align:center;
    margin:0 !important;
    font-size:13px !important;
  }
}
.about-content{
    max-width: 620px;
}

.eyebrow{
    display:block;
    margin-bottom:24px;
    font-size:12px;
    letter-spacing:4px;
    line-height:1.8;
    color:#2da8ff;
    font-weight:600;
    text-transform:uppercase;
}

.about-content h1{
    margin:0 0 28px 0;
    font-size:64px;
    line-height:1.05;
    font-weight:700;
    color:#fff;
}

.about-content p{
    margin:0;
    font-size:24px;
    line-height:1.7;
    color:rgba(255,255,255,0.82);
    max-width:580px;
}
/* === FORCE MOBILE MENU WORKING === */

@media(max-width:900px){

  .mobile-menu-btn{
    display:flex !important;
    position:fixed !important;
    top:18px !important;
    left:18px !important;
    width:48px !important;
    height:48px !important;
    z-index:999999 !important;
    align-items:center !important;
    justify-content:center !important;
    background:rgba(0,12,28,.96) !important;
    color:#7be7ff !important;
    border:1px solid rgba(0,210,255,.65) !important;
    border-radius:10px !important;
    font-size:28px !important;
    box-shadow:0 0 24px rgba(0,180,255,.35) !important;
  }

  header .main-nav{
    display:flex !important;
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    width:82vw !important;
    height:100vh !important;
    z-index:999998 !important;

    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:flex-start !important;

    padding:110px 28px 40px !important;
    gap:22px !important;

    background:rgba(1,8,20,.98) !important;
    backdrop-filter:blur(18px) !important;
    border-right:1px solid rgba(0,190,255,.28) !important;

    transform:translateX(-105%) !important;
    transition:transform .35s ease !important;
  }

  header .main-nav.is-open{
    transform:translateX(0) !important;
  }

  header .main-nav a{
    display:block !important;
    width:100% !important;
    color:#fff !important;
    font-size:16px !important;
    letter-spacing:1.4px !important;
    text-align:left !important;
    margin:0 !important;
    padding:14px 0 !important;
    border-bottom:1px solid rgba(255,255,255,.08) !important;
  }

  header .small-btn{
    display:none !important;
  }
}

/* =========================================
   FINAL MOBILE MENU
========================================= */

.mobile-menu-btn{
  display:none;
}

@media(max-width:900px){

  .mobile-menu-btn{
    display:flex !important;
    position:fixed !important;
    top:16px !important;
    left:16px !important;

    width:46px !important;
    height:46px !important;

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

    border:none !important;
    border-radius:10px !important;

    background:rgba(0,10,25,.96) !important;

    color:#7be7ff !important;

    font-size:28px !important;

    z-index:999999 !important;

    box-shadow:
      0 0 22px rgba(0,180,255,.35);
  }

  header{
    position:relative !important;
    z-index:999998 !important;
  }

  header .main-nav{

    position:fixed !important;

    top:0 !important;
    left:0 !important;

    width:100vw !important;
    height:100vh !important;

    display:flex !important;

    flex-direction:column !important;

    align-items:center !important;

    justify-content:center !important;

    gap:26px !important;

    background:rgba(1,8,20,.98) !important;

    backdrop-filter:blur(18px) !important;

    z-index:999997 !important;

    opacity:0 !important;

    visibility:hidden !important;

    pointer-events:none !important;

    transform:translateY(-20px) !important;

    transition:
      opacity .35s ease,
      transform .35s ease,
      visibility .35s ease !important;
  }

  header .main-nav.is-open{

    opacity:1 !important;

    visibility:visible !important;

    pointer-events:auto !important;

    transform:translateY(0) !important;
  }

  header .main-nav a{

    color:#fff !important;

    font-size:18px !important;

    text-decoration:none !important;

    letter-spacing:2px !important;

    margin:0 !important;
  }

  header .small-btn{

    display:flex !important;

    position:fixed !important;

    top:18px !important;

    right:18px !important;

    z-index:999999 !important;

    padding:10px 12px !important;

    font-size:10px !important;
  }

  header .nav-logo{

    width:150px !important;

    position:relative !important;

    z-index:999998 !important;
  }
}
/* =========================
   DATA MINING VISUAL
========================= */

.data-mining-visual{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
}

.data-mining-img{

  position:relative !important;

  right:auto !important;
  top:auto !important;

  width:min(680px,48vw) !important;

  max-width:100%;

  z-index:3;

  mix-blend-mode:screen;

  filter:
    drop-shadow(0 0 70px rgba(0,200,255,.45))
    brightness(1.08);

  animation:
    shipFloat 6s ease-in-out infinite,
    pulseGlow 5s ease-in-out infinite;
}

.data-rings{

  right:10% !important;

  top:50% !important;

  width:420px !important;

  height:140px !important;

  opacity:.45;
}

/* MOBILE */

@media(max-width:900px){

  #data-mining.split{
    display:block;
  }

  .data-mining-img{

    width:100% !important;

    max-width:420px;

    margin:40px auto 0;
  }

  .data-rings{
    display:none;
  }
}
/* =========================
   CONSENSUS VISUAL
========================= */

.consensus-visual{
  position:relative !important;
  right:auto !important;
  top:auto !important;
  width:auto !important;
  max-width:100% !important;
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
}

.consensus-img{
  position:relative !important;
  right:auto !important;
  top:auto !important;
  width:min(680px,48vw) !important;
  max-width:100% !important;
  z-index:3 !important;
  mix-blend-mode:screen !important;
  filter:
    drop-shadow(0 0 70px rgba(0,200,255,.45))
    brightness(1.08) !important;
  animation:
    shipFloat 6s ease-in-out infinite,
    pulseGlow 5s ease-in-out infinite !important;
}

.consensus-rings{
  left:11% !important;
  right:auto !important;
  top:52% !important;
  width:420px !important;
  height:140px !important;
  opacity:.42 !important;
}

@media(max-width:900px){
  #consensus.split{
    display:block !important;
  }

  .consensus-img{
    width:100% !important;
    max-width:420px !important;
    margin:35px auto 0 !important;
  }

  .consensus-rings{
    display:none !important;
  }
}

/* =========================
   ABOUT / TUNA SECTION
========================= */

.about-visual{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
}

.about-img{

  position:relative !important;

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

  width:min(620px,46vw) !important;

  max-width:100%;

  z-index:3;

  mix-blend-mode:screen;

  filter:
    drop-shadow(0 0 70px rgba(0,200,255,.45))
    brightness(1.08);

  animation:
    tunaSwim 7s ease-in-out infinite,
    pulseGlowSoft 5s ease-in-out infinite;
}

.about-rings{

  right:10% !important;

  top:52% !important;

  width:420px !important;

  height:140px !important;

  opacity:.42 !important;
}

/* MOBILE FIX */

@media(max-width:900px){

  #about.split{
    display:block !important;
  }

  .about-img{

    width:100% !important;

    max-width:400px !important;

    margin:40px auto 0 !important;

    display:block !important;
  }

  .about-rings{
    display:none !important;
  }

  #about h2{
    font-size:30px !important;
    line-height:1.15 !important;
  }

  #about p{
    font-size:15px !important;
  }
}

/* FINAL INTRO TEXT-ONLY OVERRIDE */

.intro-c-logo,
.intro-logo-3d,
.cinema-logo-glow{
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
}

.cinema-logo-frame.intro-text-only{
  width:min(900px,88vw) !important;
  height:auto !important;
  min-height:220px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  padding:0 !important;
  overflow:visible !important;
}

.intro-line{
  opacity:1 !important;
  width:min(620px,78vw) !important;
  margin:0 0 24px !important;
}

.typewriter-intro{
  display:block !important;
  opacity:1 !important;
  visibility:visible !important;
  z-index:30 !important;
}

.typewriter-intro span{
  display:block !important;
  opacity:1 !important;
  visibility:visible !important;
  min-height:1.7em !important;
  color:#e6f8ff !important;
  text-shadow:
    0 0 18px rgba(0,200,255,.85),
    0 0 38px rgba(0,120,255,.42) !important;
}

.typewriter-intro span.typing::after{
  content:"_";
  animation:cursorBlink .8s steps(2,end) infinite;
}

.typewriter-intro span.typed::after{
  content:"";
}

.typewriter-intro span{
  display:block;
  min-height:1.6em;
  opacity:1 !important;
  visibility:visible !important;
  text-align:center;
}

.typewriter-intro span.typing::after{
  content:"_";
  animation:blinkCursor .8s infinite;
}

.typewriter-intro span.typed::after{
  content:"";
}

@keyframes blinkCursor{
  50%{opacity:0;}
}

.intro-dynamic-text{
  margin-top:18px;
}
/* FINAL INTRO TEXT-ONLY TYPEWRITER */

.intro-c-logo,
.intro-logo-3d,
.intro-logo,
.intro-neural-ship,
.cinema-logo-glow{
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
}

#intro{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

.cinema-logo-frame.intro-text-only{
  width:min(760px,86vw) !important;
  height:auto !important;
  min-height:180px !important;
  padding:0 !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:visible !important;
  animation:none !important;
}

.cinema-logo-frame.intro-text-only:before{
  display:none !important;
}

.intro-line{
  opacity:1 !important;
  width:min(560px,74vw) !important;
  height:2px !important;
  margin:0 0 22px !important;
  background:linear-gradient(90deg,transparent,#00c8ff,transparent) !important;
  box-shadow:0 0 32px #00c8ff !important;
  animation:cinemaLine 2.2s ease-in-out infinite !important;
}

.intro-dynamic-text,
.typewriter-intro{
  margin-top:0 !important;
  z-index:30 !important;
  text-align:center !important;
}

.typewriter-intro span{
  display:block !important;
  min-height:1.65em !important;
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
  animation:none !important;
  text-align:center !important;
  font-weight:400 !important;
  color:#e6f8ff !important;
  text-shadow:
    0 0 18px rgba(0,200,255,.85),
    0 0 38px rgba(0,120,255,.42) !important;
}

.typewriter-intro span.typing::after{
  content:"_";
  animation:blinkCursor .8s infinite;
}

.typewriter-intro span.typed::after{
  content:"";
}

@keyframes blinkCursor{
  50%{opacity:0;}
}

#intro,
.intro-sequence,
.intro-cinema-content,
.intro-cinema-bg,
.intro-cinema-overlay,
.intro-neural-3d,
#matrix{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}