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

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

/* ==================================================
   BODY
================================================== */

body{

  background:#030303;

  color:#ffffff;

  overflow-x:hidden;

  font-family:'Poppins', sans-serif;

  position:relative;
}

/* ==================================================
   BOOT / INTRO SCREEN
   (plays once per session — see script.js)
================================================== */

.boot-screen{

  position:fixed;

  inset:0;

  display:flex;

  align-items:center;

  justify-content:center;

  background:#030303;

  z-index:99999;

  transition:
    opacity 0.6s ease,
    visibility 0.6s ease;
}

.boot-screen.boot-hidden{

  opacity:0;

  visibility:hidden;

  pointer-events:none;
}

.boot-inner{

  display:flex;

  flex-direction:column;

  align-items:center;

  gap:22px;

  width:min(320px, 82vw);
}

.boot-logo{

  font-family:'Orbitron', sans-serif;

  font-size:22px;

  letter-spacing:6px;

  color:#ffffff;

  text-shadow:
    0 0 16px rgba(0,140,255,0.5);
}

.boot-bar{

  width:100%;

  height:3px;

  background:rgba(255,255,255,0.08);

  border-radius:2px;

  overflow:hidden;
}

.boot-fill{

  width:0%;

  height:100%;

  background:
    linear-gradient(to right, #008cff, #c81018);

  animation:bootFill 1.1s ease-in-out forwards;
}

@keyframes bootFill{

  from{

    width:0%;
  }

  to{

    width:100%;
  }
}

.boot-status{

  font-family:'Orbitron', sans-serif;

  font-size:11px;

  letter-spacing:2px;

  color:rgba(255,255,255,0.45);
}

/* ==================================================
   CINEMATIC STAR BACKGROUND
   (a twinkling starfield with bold, frequent
   shooting stars — driven from script.js —
   "shooting for the stars" as a visual signature,
   framed by a hard vignette for cinematic depth)
================================================== */

.bg-stars{

  position:fixed;

  inset:0;

  width:100%;
  height:100%;

  z-index:-6;

  pointer-events:none;
}

/* HARD VIGNETTE
   (crushes the edges to black, like a stage spot —
   sits above the starfield, pulls focus to center) */

.bg-vignette{

  position:fixed;

  inset:0;

  z-index:-2;

  pointer-events:none;

  background:
    radial-gradient(
      ellipse 85% 75% at 50% 42%,
      transparent 35%,
      rgba(0,0,0,0.85) 100%
    );
}

/* ==================================================
   GRAIN / NOISE OVERLAY
================================================== */

.bg-noise{

  position:fixed;

  inset:0;

  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  opacity:0.05;

  mix-blend-mode:overlay;

  z-index:-1;

  pointer-events:none;
}

/* CURSOR RETICLE
   (a circuit-style targeting ring instead of a
   soft ambient blob) */

.cursor-glow{

  position:fixed;

  top:0;
  left:0;

  width:30px;
  height:30px;

  border-radius:50%;

  border:1.5px solid rgba(0,140,255,0.6);

  box-shadow:
    0 0 14px rgba(0,140,255,0.35),
    inset 0 0 8px rgba(0,140,255,0.2);

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

  pointer-events:none;

  z-index:9999;

  transition:
    width 0.25s ease,
    height 0.25s ease,
    border-color 0.25s ease;
}

.cursor-glow::after{

  content:"";

  position:absolute;

  top:50%;
  left:50%;

  width:4px;
  height:4px;

  border-radius:50%;

  background:#008cff;

  box-shadow:
    0 0 8px rgba(0,140,255,0.8);

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

/* ACTIVE STATE (hovering a link/button) */

.cursor-glow.cursor-active{

  width:50px;
  height:50px;

  border-color:rgba(200,16,24,0.65);
}

.cursor-glow.cursor-active::after{

  background:#c81018;

  box-shadow:
    0 0 10px rgba(200,16,24,0.85);
}

/* ==================================================
   NAVBAR
================================================== */

.navbar{

  width:100%;

  height:100px;

  display:flex;

  align-items:center;

  justify-content:space-between;

  padding:0 70px;

  position:relative;

  z-index:50;

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

  backdrop-filter:blur(12px);

  background:
    rgba(0,0,0,0.18);

  transition:
    background 0.3s ease,
    border-color 0.3s ease;
}

/* SCROLLED STATE */

.navbar.scrolled{

  background:
    rgba(3,3,3,0.75);

  border-bottom-color:
    rgba(255,255,255,0.1);
}

/* NAV LOGO */

.nav-logo{

  width:230px;

  filter:
    drop-shadow(0 0 14px rgba(0,94,255,0.25));
}

/* NAVIGATION */

nav{

  display:flex;

  gap:38px;
}

nav a{

  position:relative;

  display:inline-block;

  padding-bottom:8px;

  color:#ffffff;

  text-decoration:none;

  font-family:'Space Grotesk', sans-serif;

  font-size:14px;

  font-weight:700;

  letter-spacing:1.5px;

  transition:color 0.3s ease;
}

/* ANIMATED UNDERLINE */

nav a::after{

  content:"";

  position:absolute;

  left:0;
  bottom:0;

  width:0;
  height:2px;

  background:
    linear-gradient(to right, #008cff, #c81018);

  transition:width 0.3s ease;
}

nav a:hover{

  color:#008cff;
}

nav a:hover::after,
nav a.active::after{

  width:100%;
}

/* ACTIVE PAGE */

nav a.active{

  color:#008cff;

  text-shadow:
    0 0 12px rgba(0,140,255,0.45);
}

/* NAV SOCIAL */

.nav-social{

  display:flex;

  align-items:center;

  color:#ffffff;

  transition:0.3s ease;
}

.nav-social svg{

  width:22px;
  height:22px;
}

.nav-social:hover{

  color:#008cff;
}

/* NAV BUTTON */

.nav-button{

  padding:14px 28px;

  border:
    1px solid #008cff;

  clip-path:
    polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);

  color:#ffffff;

  text-decoration:none;

  font-family:'Space Grotesk', sans-serif;

  font-size:14px;

  font-weight:700;

  letter-spacing:1px;

  transition:0.3s ease;

  box-shadow:
    0 0 20px rgba(0,140,255,0.18);
}

.nav-button:hover{

  background:#008cff;

  color:#000000;
}

/* ==================================================
   GLOBAL BUTTONS
================================================== */

.primary-btn,
.secondary-btn{

  position:relative;

  padding:18px 50px 18px 36px;

  clip-path:
    polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);

  text-decoration:none;

  font-family:'Orbitron', sans-serif;

  font-size:13px;

  font-weight:800;

  letter-spacing:2px;

  transition:0.3s ease;
}

/* SLIDING ARROW */

.primary-btn::after,
.secondary-btn::after{

  content:"→";

  position:absolute;

  top:50%;
  right:22px;

  transform:translateY(-50%);

  transition:transform 0.3s ease;
}

.primary-btn:hover::after,
.secondary-btn:hover::after{

  transform:translateY(-50%) translateX(4px);
}

/* PRIMARY */

.primary-btn{

  background:#005eff;

  color:#ffffff;

  box-shadow:
    0 0 26px rgba(0,94,255,0.30);
}

.primary-btn:hover{

  transform:translateY(-3px);

  background:#008cff;
}

/* SECONDARY */

.secondary-btn{

  border:
    1px solid rgba(255,255,255,0.14);

  color:#ffffff;

  backdrop-filter:blur(12px);
}

.secondary-btn:hover{

  transform:translateY(-3px);

  border-color:#c81018;

  box-shadow:
    0 0 18px rgba(200,16,24,0.22);
}

/* ==================================================
   ANIMATED GRADIENT BORDER (CARDS)
================================================== */

.stat-card::after,
.service-box::after,
.contact-info-box::after{

  content:"";

  position:absolute;

  inset:0;

  border-radius:inherit;

  padding:2px;

  background:
    linear-gradient(
      135deg,
      #008cff,
      #c81018,
      #008cff
    );

  background-size:200% 200%;

  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);

  -webkit-mask-composite:xor;

  mask-composite:exclude;

  opacity:0;

  transition:opacity 0.3s ease;

  animation:
    borderFlow 4s linear infinite;

  pointer-events:none;
}

.stat-card:hover::after,
.service-box:hover::after,
.contact-info-box:hover::after{

  opacity:1;
}

@keyframes borderFlow{

  0%{

    background-position:0% 0%;
  }

  100%{

    background-position:200% 200%;
  }
}

/* ==================================================
   GLITCH FLICKER
   (chromatic-aberration style flicker that plays
   briefly every few seconds on gradient headlines)
================================================== */

.glitch-text{

  position:relative;

  display:inline-block;
}

.glitch-text::before,
.glitch-text::after{

  content:attr(data-text);

  position:absolute;

  top:0;
  left:0;

  width:100%;
  height:100%;

  opacity:0;

  pointer-events:none;
}

.glitch-text::before{

  color:#00e5ff;

  clip-path:inset(0 0 100% 0);

  animation:glitchFlicker 6s ease-in-out infinite;
}

.glitch-text::after{

  color:#ff1840;

  clip-path:inset(100% 0 0 0);

  animation:glitchFlickerAlt 6s ease-in-out infinite;

  animation-delay:0.08s;
}

@keyframes glitchFlicker{

  0%, 92%, 100%{

    opacity:0;

    clip-path:inset(0 0 100% 0);

    transform:translate(0,0);
  }

  93%{

    opacity:0.85;

    clip-path:inset(10% 0 65% 0);

    transform:translate(-4px,0);
  }

  95%{

    opacity:0.85;

    clip-path:inset(55% 0 15% 0);

    transform:translate(4px,0);
  }

  97%{

    opacity:0.5;

    clip-path:inset(30% 0 40% 0);

    transform:translate(-2px,0);
  }
}

@keyframes glitchFlickerAlt{

  0%, 92%, 100%{

    opacity:0;

    clip-path:inset(100% 0 0 0);

    transform:translate(0,0);
  }

  93%{

    opacity:0.85;

    clip-path:inset(60% 0 10% 0);

    transform:translate(4px,0);
  }

  95%{

    opacity:0.85;

    clip-path:inset(15% 0 55% 0);

    transform:translate(-4px,0);
  }

  97%{

    opacity:0.5;

    clip-path:inset(40% 0 30% 0);

    transform:translate(2px,0);
  }
}

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

  .glitch-text::before,
  .glitch-text::after{

    animation:none;

    opacity:0;
  }
}

/* ==================================================
   SERVICES TICKER
   (infinite scrolling band, sits under the navbar)
================================================== */

.ticker{

  width:100%;

  overflow:hidden;

  position:relative;

  z-index:20;

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

  background:
    rgba(0,0,0,0.25);
}

.ticker-track{

  display:flex;

  align-items:center;

  gap:28px;

  width:max-content;

  white-space:nowrap;

  padding:14px 0;

  animation:tickerScroll 22s linear infinite;
}

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

  .ticker-track{

    animation:none;
  }
}

.ticker-track span{

  font-family:'Orbitron', sans-serif;

  font-size:12px;

  letter-spacing:2px;

  color:rgba(255,255,255,0.5);
}

.ticker-dot{

  width:6px;
  height:6px;

  flex-shrink:0;

  border-radius:50%;

  background:#008cff;
}

.ticker-dot.red{

  background:#c81018;
}

@keyframes tickerScroll{

  from{

    transform:translateX(0);
  }

  to{

    transform:translateX(-50%);
  }
}

/* ==================================================
   CORNER FRAME ACCENT
   (PCB-style corner brackets, echoes the logo's
   circuit corner pads instead of a soft glass edge)
================================================== */

.corner-frame{

  position:relative;
}

.corner-frame::before,
.corner-frame::after{

  content:"";

  position:absolute;

  width:34px;
  height:34px;

  pointer-events:none;

  z-index:6;
}

.corner-frame::before{

  top:-6px;
  left:-6px;

  border-top:2px solid #008cff;
  border-left:2px solid #008cff;
}

.corner-frame::after{

  bottom:-6px;
  right:-6px;

  border-bottom:2px solid #c81018;
  border-right:2px solid #c81018;
}

/* ==================================================
   HOME PAGE HERO
================================================== */

.hero{

  min-height:
    calc(100vh - 146px);

  display:flex;

  align-items:center;

  justify-content:space-between;

  padding:0 90px;

  position:relative;
}

/* HERO LEFT */

.hero-left{

  width:52%;

  position:relative;

  z-index:10;
}

/* SMALL TEXT (shared "eyebrow" label across pages) */

.eyebrow-text{

  display:inline-block;

  color:#008cff;

  font-family:'Orbitron', sans-serif;

  font-size:13px;

  letter-spacing:2px;

  margin-bottom:28px;

  position:relative;
}

.eyebrow-line::after{

  content:"";

  width:220px;
  height:2px;

  background:
    linear-gradient(
      to right,
      #008cff,
      #c81018
    );

  position:absolute;

  top:50%;
  left:115%;
}

/* HERO TITLE */

.hero h1{

  font-family:'Orbitron', sans-serif;

  font-size:100px;

  line-height:1.04;

  letter-spacing:2px;

  margin-bottom:34px;
}

.hero h1 span{

  background:
    linear-gradient(to right, #008cff, #c81018);

  -webkit-background-clip:text;

  background-clip:text;

  color:transparent;

  filter:
    drop-shadow(0 0 18px rgba(0,140,255,0.45));
}

/* HERO TEXT */

.hero p{

  max-width:650px;

  color:#d0d0d0;

  font-size:20px;

  line-height:1.9;

  margin-bottom:42px;
}

/* HERO BUTTONS */

.hero-buttons{

  display:flex;

  flex-wrap:wrap;

  gap:22px;
}

/* HERO RIGHT */

.hero-right{

  width:48%;

  display:flex;

  justify-content:center;

  align-items:center;

  position:relative;
}

/* ==================================================
   3D LOGO CUBE
   (a real CSS 3D cube, not a flat image — slowly
   auto-rotating, circuit-textured sides, the JT
   mark on the front face, glowing pedestal beneath)
================================================== */

.cube-stage{

  --cube-size:240px;

  position:relative;

  width:100%;

  height:440px;

  display:flex;

  align-items:center;

  justify-content:center;

  perspective:1400px;

  z-index:5;
}

.cube-pedestal{

  position:absolute;

  bottom:64px;
  left:50%;

  width:calc(var(--cube-size) * 1.1);
  height:46px;

  transform:translateX(-50%);

  border-radius:50%;

  background:
    radial-gradient(
      ellipse at center,
      rgba(0,140,255,0.55),
      rgba(200,16,24,0.3) 55%,
      transparent 80%
    );

  filter:blur(20px);
}

.cube-float{

  animation:
    floatLogo 6s ease-in-out infinite;
}

.cube{

  width:var(--cube-size);
  height:var(--cube-size);

  position:relative;

  transform-style:preserve-3d;

  animation:cubeSpin 16s linear infinite;
}

@keyframes cubeSpin{

  from{ transform:rotateX(-16deg) rotateY(0deg); }
  to{ transform:rotateX(-16deg) rotateY(360deg); }
}

.cube-face{

  position:absolute;

  inset:0;

  width:var(--cube-size);
  height:var(--cube-size);

  display:flex;

  align-items:center;

  justify-content:center;

  border:
    1px solid rgba(120,170,255,0.25);

  background-color:#030303;

  background-image:url("images/logo.png");

  background-size:contain;

  background-repeat:no-repeat;

  background-position:center;

  box-shadow:
    inset 0 0 40px rgba(0,140,255,0.12);

  backface-visibility:hidden;
}

.cube-front{

  transform:
    translateZ(calc(var(--cube-size) / 2));
}

.cube-back{

  transform:
    translateZ(calc(var(--cube-size) / -2)) rotateY(180deg);
}

.cube-right{

  transform:
    rotateY(90deg) translateZ(calc(var(--cube-size) / 2));
}

.cube-left{

  transform:
    rotateY(-90deg) translateZ(calc(var(--cube-size) / 2));
}

.cube-top{

  transform:
    rotateX(90deg) translateZ(calc(var(--cube-size) / 2));
}

.cube-bottom{

  transform:
    rotateX(-90deg) translateZ(calc(var(--cube-size) / 2));
}

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

  .cube-float,
  .cube{

    animation:none;
  }
}

/* FLOAT */

@keyframes floatLogo{

  0%,100%{

    transform:translateY(0px);
  }

  50%{

    transform:translateY(-14px);
  }
}

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

.about-hero{

  width:100%;

  min-height:
    calc(100vh - 146px);

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:40px;

  padding:80px;

  position:relative;

  overflow:hidden;
}

/* ABOUT LEFT */

.about-left{

  width:50%;

  position:relative;

  z-index:5;
}

/* ABOUT TITLE */

.about-left h1{

  font-family:'Orbitron', sans-serif;

  font-size:100px;

  line-height:1.04;

  margin-bottom:34px;
}

.about-left h1 span{

  background:
    linear-gradient(to right, #008cff, #c81018);

  -webkit-background-clip:text;

  background-clip:text;

  color:transparent;

  filter:
    drop-shadow(0 0 18px rgba(0,140,255,0.45));
}

/* ABOUT TEXT */

.about-left p{

  color:#d0d0d0;

  font-size:20px;

  line-height:2;

  margin-bottom:28px;

  max-width:650px;
}

/* ABOUT BUTTONS */

.about-buttons{

  display:flex;

  flex-wrap:wrap;

  gap:22px;

  margin-top:40px;
}

/* ABOUT RIGHT */

.about-right{

  width:44%;

  display:flex;

  justify-content:center;

  align-items:center;

  position:relative;
}

/* STATS SECTION */

.stats-section{

  width:90%;

  margin:auto;

  display:grid;

  grid-template-columns:
    repeat(auto-fit,minmax(300px,1fr));

  gap:30px;

  padding-bottom:120px;
}

/* STAT CARD */

.stat-card{

  padding:50px;

  border:
    1px solid rgba(255,255,255,0.08);

  border-radius:8px;

  background:
    rgba(255,255,255,0.03);

  backdrop-filter:blur(14px);

  text-align:center;

  transition:0.3s ease;

  position:relative;

  overflow:hidden;
}

.stat-card::before{

  content:"";

  position:absolute;

  inset:0;

  background:

    linear-gradient(
      135deg,
      rgba(0,94,255,0.08),
      rgba(200,16,24,0.04)
    );

  pointer-events:none;
}

.stat-card:hover{

  transform:translateY(-10px);

  border-color:#008cff;

  box-shadow:
    0 0 40px rgba(0,140,255,0.14);
}

.stat-card h2{

  font-family:'Orbitron', sans-serif;

  color:#008cff;

  font-size:34px;

  margin-bottom:18px;

  position:relative;

  z-index:2;
}

.stat-card span{

  color:#d0d0d0;

  font-size:18px;

  position:relative;

  z-index:2;
}

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

.services-hero{

  width:100%;

  text-align:center;

  padding:140px 25px 90px;

  position:relative;
}

/* TITLE */

.services-hero h1{

  font-family:'Orbitron', sans-serif;

  font-size:100px;

  line-height:1.04;

  margin-bottom:28px;
}

.services-hero h1 span{

  background:
    linear-gradient(to right, #008cff, #c81018);

  -webkit-background-clip:text;

  background-clip:text;

  color:transparent;

  filter:
    drop-shadow(0 0 18px rgba(0,140,255,0.45));
}

/* TEXT */

.services-hero p{

  color:#d0d0d0;

  font-size:20px;

  line-height:1.9;

  max-width:700px;

  margin:auto;
}

/* SERVICES SECTION */

.services-section{

  width:90%;

  margin:auto;

  display:grid;

  grid-template-columns:
    repeat(auto-fit,minmax(320px,1fr));

  gap:35px;

  padding-bottom:120px;
}

/* BENTO LAYOUT (desktop only) */

@media(min-width:901px){

  .services-section{

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

  .service-box:nth-child(1){

    grid-column:1 / 3;
  }

  .service-box:nth-child(4){

    grid-column:2 / 4;
  }
}

/* SERVICE BOX */

.service-box{

  position:relative;

  padding:50px;

  border:
    1px solid rgba(255,255,255,0.08);

  border-radius:8px;

  background:
    rgba(255,255,255,0.03);

  backdrop-filter:blur(16px);

  overflow:hidden;

  transition:0.35s ease;
}

.service-box::before{

  content:"";

  position:absolute;

  inset:0;

  background:

    linear-gradient(
      135deg,
      rgba(0,94,255,0.08),
      rgba(200,16,24,0.04)
    );

  pointer-events:none;
}

.service-box:hover{

  transform:translateY(-10px);

  border-color:#008cff;

  box-shadow:
    0 0 45px rgba(0,140,255,0.15);
}

/* NUMBER */

.service-number{

  font-family:'Orbitron', sans-serif;

  font-size:72px;

  color:
    rgba(255,255,255,0.06);

  position:absolute;

  top:20px;
  right:30px;
}

/* TITLE */

.service-box h2{

  font-family:'Orbitron', sans-serif;

  color:#008cff;

  font-size:28px;

  margin-bottom:24px;

  position:relative;

  z-index:2;
}

/* TEXT */

.service-box p{

  color:#d0d0d0;

  font-size:18px;

  line-height:1.9;

  position:relative;

  z-index:2;
}

/* CTA */

.services-cta{

  width:90%;

  margin:auto;

  text-align:center;

  padding:100px 40px;

  border-radius:10px;

  position:relative;

  background:
    linear-gradient(rgba(3,3,3,0.75), rgba(3,3,3,0.75)),
    url("images/CTA.png");

  background-size:cover;

  background-position:center;

  margin-bottom:140px;
}

.services-cta h2,
.services-cta a{

  position:relative;

  z-index:2;
}

.services-cta h2{

  font-family:'Orbitron', sans-serif;

  font-size:52px;

  line-height:1.3;

  margin-bottom:40px;
}

/* ==================================================
   CONTACT PAGE
================================================== */

.contact-hero{

  width:100%;

  min-height:
    calc(100vh - 146px);

  display:flex;

  align-items:center;

  justify-content:space-between;

  padding:80px;

  gap:70px;

  position:relative;

  overflow:hidden;
}

/* CONTACT LEFT */

.contact-left{

  width:45%;

  position:relative;

  z-index:5;
}

/* TITLE */

.contact-left h1{

  font-family:'Orbitron', sans-serif;

  font-size:92px;

  line-height:1.04;

  margin-bottom:34px;
}

.contact-left h1 span{

  background:
    linear-gradient(to right, #008cff, #c81018);

  -webkit-background-clip:text;

  background-clip:text;

  color:transparent;

  filter:
    drop-shadow(0 0 18px rgba(0,140,255,0.45));
}

/* TEXT */

.contact-left p{

  color:#d0d0d0;

  font-size:20px;

  line-height:2;

  margin-bottom:50px;

  max-width:620px;
}

/* INFO GRID */

.contact-info-grid{

  display:flex;

  flex-direction:column;

  gap:24px;
}

/* INFO BOX */

.contact-info-box{

  padding:28px;

  border:
    1px solid rgba(255,255,255,0.08);

  border-radius:8px;

  background:
    rgba(255,255,255,0.03);

  backdrop-filter:blur(14px);

  position:relative;

  overflow:hidden;

  transition:0.3s ease;
}

.contact-info-box::before{

  content:"";

  position:absolute;

  inset:0;

  background:

    linear-gradient(
      135deg,
      rgba(0,94,255,0.08),
      rgba(200,16,24,0.04)
    );

  pointer-events:none;
}

.contact-info-box:hover{

  transform:translateY(-6px);

  border-color:#008cff;

  box-shadow:
    0 0 35px rgba(0,140,255,0.12);
}

.contact-info-box h3{

  color:#008cff;

  font-family:'Orbitron', sans-serif;

  font-size:14px;

  margin-bottom:12px;

  position:relative;

  z-index:2;
}

.contact-info-box span{

  color:#d0d0d0;

  font-size:17px;

  position:relative;

  z-index:2;
}

.contact-info-box span.location-sub{

  display:block;

  margin-top:4px;

  font-size:13px;

  color:#8a8a8a;
}

/* INSTAGRAM LINK */

.contact-info-link{

  color:#d0d0d0;

  text-decoration:none;

  transition:0.3s ease;
}

.contact-info-link:hover{

  color:#008cff;
}

/* CONTACT RIGHT */

.contact-right{

  width:55%;

  display:flex;

  justify-content:center;

  margin-top:80px;
}

/* FORM */

.contact-form{

  width:100%;

  max-width:850px;

  display:flex;

  flex-direction:column;

  gap:30px;
}

/* INPUTS */

.contact-form input,
.contact-form textarea{

  width:100%;

  padding:32px;

  background:
    rgba(255,255,255,0.05);

  border:
    1px solid rgba(255,255,255,0.10);

  border-radius:10px;

  color:#ffffff;

  font-size:18px;

  outline:none;

  transition:0.3s ease;

  backdrop-filter:blur(14px);

  font-family:'Poppins', sans-serif;

  box-shadow:
    inset 0 0 20px rgba(255,255,255,0.02);
}

/* PLACEHOLDER */

.contact-form input::placeholder,
.contact-form textarea::placeholder{

  color:#9ca3af;
}

/* FOCUS */

.contact-form input:focus,
.contact-form textarea:focus{

  border-color:#008cff;

  box-shadow:
    0 0 35px rgba(0,140,255,0.20);
}

/* TEXTAREA */

.contact-form textarea{

  min-height:340px;

  resize:none;
}

/* BUTTON */

.contact-form button{

  width:100%;

  padding:28px;

  border:none;

  border-radius:10px;

  background:
    linear-gradient(
      to right,
      #005eff,
      #008cff
    );

  color:#ffffff;

  font-family:'Orbitron', sans-serif;

  font-size:15px;

  letter-spacing:1px;

  cursor:pointer;

  transition:0.3s ease;

  box-shadow:
    0 0 35px rgba(0,94,255,0.25);
}

.contact-form button:hover{

  transform:translateY(-4px);

  box-shadow:
    0 0 45px rgba(0,140,255,0.35);
}

/* ==================================================
   STATUS PAGES (404 / THANK YOU)
================================================== */

.status-page{

  width:100%;

  min-height:
    calc(100vh - 146px);

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  text-align:center;

  padding:80px 25px;

  position:relative;
}

.status-page h1{

  font-family:'Orbitron', sans-serif;

  font-size:100px;

  line-height:1.04;

  margin-bottom:28px;
}

.status-page h1 span{

  background:
    linear-gradient(to right, #008cff, #c81018);

  -webkit-background-clip:text;

  background-clip:text;

  color:transparent;

  filter:
    drop-shadow(0 0 18px rgba(0,140,255,0.45));
}

.status-page p{

  color:#d0d0d0;

  font-size:20px;

  line-height:1.9;

  max-width:600px;

  margin-bottom:42px;
}

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

@media(max-width:1200px){

  .hero,
  .about-hero,
  .contact-hero,
  .status-page{

    flex-direction:column;

    text-align:center;

    padding:60px 25px;
  }

  .hero-left,
  .hero-right,
  .about-left,
  .about-right,
  .contact-left,
  .contact-right{

    width:100%;
  }

  .hero h1,
  .about-left h1,
  .contact-left h1,
  .services-hero h1,
  .status-page h1{

    font-size:58px;

    line-height:1.08;
  }

  .hero p,
  .about-left p,
  .contact-left p{

    margin-left:auto;
    margin-right:auto;
  }

  .hero-buttons,
  .about-buttons{

    justify-content:center;
  }

  .cube-stage{

    --cube-size:160px;

    height:320px;

    margin-top:90px;
  }

  .eyebrow-line::after{

    display:none;
  }

  .navbar{

    flex-direction:column;

    height:auto;

    gap:20px;

    padding:25px;
  }

  nav{

    flex-wrap:wrap;

    justify-content:center;
  }

  .services-hero p,
  .services-cta h2{

    font-size:18px;
  }
}

/* =========================
   HERO ENTRANCE ANIMATION
========================= */

@keyframes fadeUpIn{

  from{

    opacity:0;

    transform:translateY(30px);
  }

  to{

    opacity:1;

    transform:translateY(0);
  }
}

.hero-left > *,
.about-left > *,
.contact-left > *,
.services-hero > *{

  opacity:0;

  animation:fadeUpIn 0.8s ease forwards;
}

.hero-left > *:nth-child(1),
.about-left > *:nth-child(1),
.contact-left > *:nth-child(1),
.services-hero > *:nth-child(1){

  animation-delay:0.1s;
}

.hero-left > *:nth-child(2),
.about-left > *:nth-child(2),
.contact-left > *:nth-child(2),
.services-hero > *:nth-child(2){

  animation-delay:0.25s;
}

.hero-left > *:nth-child(3),
.about-left > *:nth-child(3),
.contact-left > *:nth-child(3),
.services-hero > *:nth-child(3){

  animation-delay:0.4s;
}

.hero-left > *:nth-child(4),
.about-left > *:nth-child(4),
.contact-left > *:nth-child(4){

  animation-delay:0.55s;
}

.about-left > *:nth-child(5){

  animation-delay:0.7s;
}

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

.hidden{

  opacity:0;

  transform:translateY(40px);

  transition:
    opacity 1s ease,
    transform 1s ease;
}

.show{

  opacity:1;

  transform:translateY(0);
}

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

.footer{

  width:90%;

  margin:auto;

  margin-top:120px;

  padding:70px 0;

  display:flex;

  justify-content:space-between;

  gap:60px;

  border-top:
    1px solid rgba(255,255,255,0.08);
}

/* LEFT */

.footer-left{

  width:40%;
}

/* LOGO */

.footer-logo{

  width:220px;

  height:54px;

  object-fit:cover;

  object-position:center;

  margin-bottom:24px;

  filter:
    drop-shadow(0 0 14px rgba(0,94,255,0.18));
}

/* TEXT */

.footer-left p{

  color:#9ca3af;

  line-height:1.9;

  max-width:420px;
}

/* LINKS + CONTACT */

.footer-links,
.footer-contact{

  display:flex;

  flex-direction:column;

  gap:16px;
}

/* TITLES */

.footer-links h3,
.footer-contact h3{

  position:relative;

  color:#008cff;

  font-family:'Space Grotesk', sans-serif;

  font-size:17px;

  font-weight:700;

  letter-spacing:1.5px;

  padding-bottom:12px;

  margin-bottom:14px;
}

.footer-links h3::after,
.footer-contact h3::after{

  content:"";

  position:absolute;

  left:50%;
  bottom:0;

  width:28px;
  height:2px;

  transform:translateX(-50%);

  background:
    linear-gradient(to right, #008cff, #c81018);
}

/* LINKS */

.footer-links a{

  color:#d0d0d0;

  text-decoration:none;

  font-family:'Space Grotesk', sans-serif;

  font-size:13px;

  font-weight:600;

  letter-spacing:0.5px;

  transition:0.3s ease;
}

.footer-links a:hover{

  color:#008cff;
}

/* CONTACT */

.footer-contact span{

  color:#9ca3af;
}

/* SOCIAL */

.footer-social{

  display:inline-flex;

  align-items:center;

  gap:8px;

  color:#9ca3af;

  font-family:'Space Grotesk', sans-serif;

  font-size:13px;

  font-weight:600;

  text-decoration:none;

  margin-top:4px;

  transition:0.3s ease;
}

.footer-social svg{

  width:14px;
  height:14px;
}

.footer-social:hover{

  color:#008cff;
}

/* BOTTOM */

.footer-bottom{

  width:90%;

  margin:auto;

  padding:30px 0 60px;

  text-align:center;

  color:#6b7280;

  font-family:'Space Grotesk', sans-serif;

  font-size:12px;

  font-weight:600;

  letter-spacing:1.5px;

  border-top:
    1px solid rgba(255,255,255,0.05);
}

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

@media(max-width:1000px){

  .footer{

    flex-direction:column;

    text-align:center;

    align-items:center;
  }

  .footer-left{

    width:100%;
  }

  .footer-left p{

    margin:auto;
  }
}