/* =========================================================
   ROOF PLAN — GLOBAL VARIABLES
   ========================================================= */

:root {
  --bg: #05080d;
  --panel: #0b1119;
  --panel2: #0f1722;

  --line: rgba(255, 255, 255, 0.1);

  --text: #f6f8fb;
  --muted: #91a0b3;

  --blue: #48a8ff;
  --blue2: #146be8;

  --silver: #d6dde6;

  --max: 1220px;

  --accent: #4aaaff;
  --accent2: #8b5cff;
  --black: #040609;
}


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

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;

  background:
    radial-gradient(
      circle at 70% 10%,
      rgba(28, 99, 175, 0.15),
      transparent 35%
    ),
    linear-gradient(
      180deg,
      #05080d 0%,
      #070b12 45%,
      #05080d 100%
    );

  color: var(--text);

  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    "Segoe UI",
    sans-serif;

  overflow-x: hidden;
}

body.cinematic {
  background: #05070b;
}

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

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


/* =========================================================
   CONTAINER
   ========================================================= */

.container {
  width: min(
    var(--max),
    calc(100% - 40px)
  );

  margin: auto;
}


/* =========================================================
   NAVIGATION
   ========================================================= */

.nav {
  position: fixed;

  inset: 0 0 auto;

  z-index: 1000;

  background:
    linear-gradient(
      180deg,
      rgba(5, 8, 13, 0.95),
      rgba(5, 8, 13, 0.55)
    );

  backdrop-filter: blur(16px);

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

body.cinematic .nav {
  background:
    linear-gradient(
      180deg,
      rgba(4, 6, 9, 0.92),
      rgba(4, 6, 9, 0.38)
    );

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

.nav-inner {
  height: 78px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;
}

body.cinematic .nav-inner {
  height: 82px;
}


/* =========================================================
   BRAND / LOGO
   ========================================================= */

.brand {
  font-weight: 900;

  letter-spacing: 0.14em;

  font-size: 14px;
}

.brand span {
  color: var(--blue);
}

.brand-logo {
  display: flex;

  align-items: center;

  width: 155px;
  height: 44px;

  flex: 0 0 auto;
}

.brand-logo img {
  width: 155px;

  height: auto;

  max-height: 44px;

  object-fit: contain;

  object-position: left center;

  filter:
    drop-shadow(
      0 5px 16px rgba(0, 0, 0, 0.28)
    );

  /* The supplied animated logo uses a black background; screen blend keeps
     the animation visually integrated with the site's dark surfaces. */
  mix-blend-mode: screen;
}


/* Cinematic logo */

body.cinematic .brand-logo img {
  height: 30px;
  width: auto;
}


/* =========================================================
   NAV LINKS
   ========================================================= */

.nav-links {
  display: flex;

  gap: 22px;

  align-items: center;
}

.nav-links a {
  font-size: 13px;

  color: #b8c2cf;

  transition: 0.2s;
}

.nav-links a:hover,
.nav-links a.active {
  color: #fff;
}


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

.cta {
  padding: 12px 18px;

  border:
    1px solid rgba(72, 168, 255, 0.5);

  background:
    linear-gradient(
      135deg,
      rgba(72, 168, 255, 0.2),
      rgba(20, 107, 232, 0.08)
    );

  border-radius: 999px;

  font-weight: 700;

  font-size: 13px;

  box-shadow:
    0 0 30px rgba(72, 168, 255, 0.1);
}

.menu {
  display: none;
}


/* =========================================================
   HERO — BASIC
   ========================================================= */

.hero {
  min-height: 100vh;

  padding: 130px 0 70px;

  display: grid;

  grid-template-columns:
    1.05fr 0.95fr;

  gap: 30px;

  align-items: center;

  position: relative;

  overflow: hidden;
}

.hero-copy {
  position: relative;

  z-index: 2;
}

.eyebrow {
  font-size: 11px;

  letter-spacing: 0.22em;

  text-transform: uppercase;

  color: #78c0ff;

  margin-bottom: 18px;
}

.hero h1 {
  font-size:
    clamp(
      48px,
      7vw,
      90px
    );

  line-height: 0.92;

  letter-spacing: -0.055em;

  margin: 0 0 24px;

  max-width: 760px;
}

.hero h1 em {
  font-style: normal;

  color: #6abaff;
}

.hero p {
  font-size: 18px;

  line-height: 1.65;

  color: var(--muted);

  max-width: 630px;
}


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

.hero-actions {
  display: flex;

  gap: 12px;

  flex-wrap: wrap;

  margin-top: 30px;
}

.btn {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding: 14px 20px;

  border-radius: 12px;

  font-weight: 800;

  font-size: 14px;

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

  background: #0e1621;
}

.btn.primary {
  border-color:
    rgba(72, 168, 255, 0.55);

  background:
    linear-gradient(
      135deg,
      #1a7cf0,
      #0d4db9
    );

  box-shadow:
    0 14px 35px rgba(20, 107, 232, 0.25);
}

.btn.glass {
  background:
    rgba(255, 255, 255, 0.035);

  backdrop-filter: blur(12px);
}


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

.hero-meta {
  display: flex;

  gap: 28px;

  flex-wrap: wrap;

  margin-top: 34px;
}

.hero-meta strong {
  font-size: 25px;
}

.hero-meta span {
  display: block;

  color: #7f8b9b;

  font-size: 11px;

  text-transform: uppercase;

  letter-spacing: 0.15em;

  margin-top: 5px;
}


/* =========================================================
   HERO 3D EXPERIENCE
   ========================================================= */

.hero-3d {
  min-height: 100vh;

  padding: 100px 0 0;

  display: block;

  position: relative;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 70% 45%,
      rgba(43, 128, 220, 0.14),
      transparent 25%
    ),
    radial-gradient(
      circle at 15% 35%,
      rgba(80, 52, 170, 0.09),
      transparent 28%
    );
}

.hero-3d::before {
  content: "";

  position: absolute;

  inset: 0;

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

  background-size: 80px 80px;

  mask-image:
    linear-gradient(
      to bottom,
      black,
      transparent 85%
    );

  pointer-events: none;
}

.hero-copy {
  position: absolute;

  z-index: 5;

  left:
    max(
      20px,
      calc((100vw - 1220px) / 2)
    );

  top:
    clamp(
      150px,
      23vh,
      220px
    );

  width: min(620px);
}

.hero-copy h1 {
  font-size:
    clamp(
      50px,
      6.8vw,
      92px
    );

  line-height: 0.9;

  margin-bottom: 26px;

  letter-spacing: -0.065em;

  text-shadow:
    0 15px 60px rgba(0, 0, 0, 0.45);
}

.hero-copy h1 em {
  background:
    linear-gradient(
      100deg,
      #fff 10%,
      #56b5ff 48%,
      #8e65ff 95%
    );

  -webkit-background-clip: text;

  background-clip: text;

  color: transparent;
}

.hero-copy p {
  max-width: 530px;

  font-size: 17px;

  color: #9da9b8;

  line-height: 1.7;
}

.eyebrow {
  display: flex;

  align-items: center;

  gap: 10px;
}


/* =========================================================
   LIVE DOT
   ========================================================= */

.live-dot {
  width: 7px;

  height: 7px;

  border-radius: 50%;

  background: #58c7ff;

  box-shadow:
    0 0 0 5px rgba(88, 199, 255, 0.1),
    0 0 18px #58c7ff;

  animation:
    livePulse 1.8s infinite;
}

@keyframes livePulse {
  50% {
    box-shadow:
      0 0 0 9px rgba(88, 199, 255, 0),
      0 0 28px #58c7ff;
  }
}


/* =========================================================
   HERO BUTTON MOTION
   ========================================================= */

.hero-actions .btn {
  gap: 14px;

  transition:
    transform 0.25s,
    box-shadow 0.25s,
    border-color 0.25s;
}

.hero-actions .btn:hover {
  transform: translateY(-3px);
}


/* =========================================================
   OLD 3D SCENE
   ========================================================= */

.scene-wrap {
  min-height: 600px;

  display: grid;

  place-items: center;

  position: relative;
}

.scene {
  width: min(620px, 90vw);

  height: 560px;

  position: relative;

  perspective: 1200px;

  transform-style: preserve-3d;

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

.ground {
  position: absolute;

  left: 50%;

  bottom: 35px;

  width: 460px;

  height: 170px;

  transform:
    translateX(-50%)
    rotateX(72deg)
    rotateZ(-16deg);

  background:
    radial-gradient(
      ellipse at center,
      rgba(54, 119, 194, 0.28),
      transparent 66%
    );

  filter: blur(4px);
}

.building {
  position: absolute;

  left: 50%;

  bottom: 95px;

  width: 370px;

  height: 260px;

  transform:
    translateX(-50%)
    rotateX(8deg)
    rotateY(-22deg);

  transform-style: preserve-3d;

  transition:
    transform 0.2s ease-out;
}

.face {
  position: absolute;

  border:
    1px solid rgba(122, 165, 204, 0.25);

  background:
    linear-gradient(
      180deg,
      #1b2836,
      #111922
    );

  box-shadow:
    inset 0 0 60px rgba(0, 0, 0, 0.25);
}

.face.front {
  width: 370px;
  height: 260px;

  transform:
    translateZ(70px);
}

.face.back {
  width: 370px;
  height: 260px;

  transform:
    rotateY(180deg)
    translateZ(70px);
}

.face.side {
  width: 140px;
  height: 260px;

  right: -70px;

  transform:
    rotateY(90deg)
    translateZ(185px);
}


/* =========================================================
   BUILDING WINDOWS
   ========================================================= */

.window-grid {
  position: absolute;

  inset: 26px;

  display: grid;

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

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

  gap: 7px;
}

.window-grid span {
  background:
    linear-gradient(
      160deg,
      rgba(93, 184, 255, 0.75),
      rgba(15, 53, 86, 0.4)
    );

  border:
    1px solid rgba(137, 211, 255, 0.25);

  box-shadow:
    0 0 20px rgba(72, 168, 255, 0.12);
}


/* =========================================================
   ROLLER
   ========================================================= */

.roller {
  position: absolute;

  left: 38px;

  bottom: 0;

  width: 92px;

  height: 125px;

  border:
    2px solid rgba(155, 183, 208, 0.22);

  background:
    repeating-linear-gradient(
      180deg,
      rgba(137, 164, 189, 0.12) 0 5px,
      transparent 5px 9px
    );
}


/* =========================================================
   ROOF
   ========================================================= */

.roof {
  position: absolute;

  left: 50%;

  top: 70px;

  width: 430px;

  height: 150px;

  transform:
    translateX(-50%)
    rotateX(58deg)
    rotateZ(-18deg);

  transform-style: preserve-3d;
}

.roof-main {
  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      160deg,
      #2a3540,
      #0f151c
    );

  border:
    1px solid rgba(178, 195, 210, 0.22);

  box-shadow:
    0 0 50px rgba(0, 0, 0, 0.4);
}

.roof-edge {
  position: absolute;

  inset: -1px;

  border:
    2px solid #4aaaff;

  opacity: 0.55;

  filter:
    drop-shadow(
      0 0 12px rgba(72, 168, 255, 0.5)
    );

  animation:
    pulse 2.5s infinite;
}


/* =========================================================
   ROOF PANELS
   ========================================================= */

.panel {
  position: absolute;

  width: 56px;

  height: 100px;

  background:
    linear-gradient(
      160deg,
      #1f6fd0,
      #0b2d61
    );

  border:
    1px solid rgba(177, 220, 255, 0.45);

  box-shadow:
    0 0 20px rgba(31, 111, 208, 0.22);
}

.panel.p1 {
  left: 78px;
  top: 28px;

  transform:
    rotateZ(-1deg);
}

.panel.p2 {
  left: 145px;
  top: 28px;
}

.panel.p3 {
  left: 212px;
  top: 28px;
}

.panel.p4 {
  left: 279px;
  top: 28px;
}


/* =========================================================
   RINGS + SCAN
   ========================================================= */

.ring,
.ring2 {
  position: absolute;

  left: 50%;
  top: 44%;

  width: 410px;
  height: 140px;

  border:
    1px solid rgba(72, 168, 255, 0.32);

  border-radius: 50%;

  transform:
    translate(-50%, -50%)
    rotateX(70deg);

  animation:
    spin 10s linear infinite;
}

.ring2 {
  width: 290px;
  height: 95px;

  border-color:
    rgba(189, 214, 235, 0.15);

  animation-duration: 7s;

  animation-direction: reverse;
}

.scan {
  position: absolute;

  left: 50%;
  top: 48%;

  width: 440px;
  height: 2px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(72, 168, 255, 0.9),
      transparent
    );

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

  filter: blur(0.5px);

  animation:
    scan 3.2s ease-in-out infinite;
}


/* =========================================================
   TECH LABELS
   ========================================================= */

.tech-label {
  position: absolute;

  padding: 8px 10px;

  border:
    1px solid rgba(72, 168, 255, 0.22);

  background:
    rgba(5, 8, 13, 0.65);

  border-radius: 8px;

  backdrop-filter: blur(10px);

  font-size: 10px;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  color: #a9cfff;
}

.l1 {
  top: 16%;
  right: 0;
}

.l2 {
  bottom: 26%;
  left: 3%;
}

.l3 {
  bottom: 13%;
  right: 8%;
}


/* =========================================================
   BASIC SECTIONS
   ========================================================= */

.section {
  padding: 110px 0;
}

.section-head {
  display: flex;

  justify-content: space-between;

  align-items: flex-end;

  gap: 25px;

  margin-bottom: 30px;
}

.section-kicker {
  font-size: 10px;

  letter-spacing: 0.22em;

  text-transform: uppercase;

  color: #76beff;
}

.section h2 {
  margin: 10px 0 0;

  font-size:
    clamp(
      32px,
      5vw,
      58px
    );

  letter-spacing: -0.045em;
}

.section-head p {
  max-width: 520px;

  color: var(--muted);

  line-height: 1.7;
}


/* =========================================================
   CARD GRID
   ========================================================= */

.grid-3 {
  display: grid;

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

  gap: 16px;
}

.card {
  padding: 24px;

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

  background:
    linear-gradient(
      180deg,
      rgba(15, 23, 34, 0.9),
      rgba(8, 12, 18, 0.9)
    );

  border-radius: 18px;

  min-height: 220px;

  transition: 0.3s;
}

.card:hover {
  transform: translateY(-8px);

  border-color:
    rgba(72, 168, 255, 0.35);

  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.25);
}

.card small {
  color: #6bbaff;

  text-transform: uppercase;

  letter-spacing: 0.15em;

  font-size: 10px;
}

.card h3 {
  font-size: 24px;

  margin: 16px 0 8px;
}

.card p {
  color: var(--muted);

  line-height: 1.65;
}


/* =========================================================
   SPLIT / PANEL CARD
   ========================================================= */

.split {
  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 24px;

  align-items: stretch;
}

.panel-card {
  padding: 32px;

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

  border-radius: 22px;

  background:
    linear-gradient(
      180deg,
      #0e1621,
      #091018
    );
}


/* =========================================================
   METRICS
   ========================================================= */

.metric-row {
  display: grid;

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

  gap: 12px;

  margin-top: 22px;
}

.metric {
  padding: 18px;

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

  border-radius: 14px;
}

.metric strong {
  font-size: 28px;
}

.metric span {
  display: block;

  color: #8793a4;

  font-size: 11px;

  margin-top: 6px;
}


/* =========================================================
   COVERAGE PILLS
   ========================================================= */

.coverage {
  display: flex;

  flex-wrap: wrap;

  gap: 10px;

  margin-top: 20px;
}

.pill {
  padding: 10px 12px;

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

  border-radius: 999px;

  color: #bcc7d4;

  font-size: 12px;
}


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

footer {
  padding: 35px 0;

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

  color: #7c8797;

  font-size: 12px;
}

.footer-inner {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 24px;
}

.footer-inner img {
  width: 128px;

  height: auto;

  opacity: 0.9;
}


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

.page-hero {
  padding: 160px 0 85px;
}

.page-hero h1 {
  font-size:
    clamp(
      48px,
      7vw,
      80px
    );

  letter-spacing: -0.055em;

  margin: 0 0 18px;
}

.page-hero p {
  max-width: 720px;

  color: var(--muted);

  font-size: 18px;

  line-height: 1.7;
}


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

.contact-grid {
  display: grid;

  grid-template-columns:
    0.9fr 1.1fr;

  gap: 20px;
}

.form {
  display: grid;

  gap: 12px;
}

.input,
.textarea {
  width: 100%;

  padding: 14px 15px;

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

  border-radius: 12px;

  background: #08101a;

  color: #fff;

  outline: none;
}

.textarea {
  min-height: 160px;

  resize: vertical;
}


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

.project-grid {
  display: grid;

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

  gap: 16px;
}

.project {
  min-height: 320px;

  border-radius: 20px;

  overflow: hidden;

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

  position: relative;

  background:
    linear-gradient(
      160deg,
      #182432,
      #0a1119
    );
}

.project::before {
  content: "";

  position: absolute;

  inset: 0;

  background:
    radial-gradient(
      circle at 25% 20%,
      rgba(72, 168, 255, 0.23),
      transparent 30%
    ),
    linear-gradient(
      180deg,
      transparent 45%,
      rgba(0, 0, 0, 0.82) 100%
    );
}

.project .content {
  position: absolute;

  left: 22px;

  right: 22px;

  bottom: 22px;
}

.project h3 {
  margin: 6px 0 7px;

  font-size: 25px;
}

.project p {
  margin: 0;

  color: #c4cbd5;

  max-width: 650px;
}


/* =========================================================
   TIMELINE
   ========================================================= */

.timeline {
  display: grid;

  gap: 14px;
}

.step {
  display: grid;

  grid-template-columns: 64px 1fr;

  gap: 18px;

  padding: 22px;

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

  border-radius: 18px;

  background: #0a1119;
}

.num {
  width: 52px;

  height: 52px;

  border-radius: 14px;

  display: grid;

  place-items: center;

  background:
    linear-gradient(
      135deg,
      #1b7cf0,
      #0d4db9
    );

  font-weight: 900;
}


/* =========================================================
   HERO / SCENE ANIMATIONS
   ========================================================= */

@keyframes floatScene {
  0%,
  100% {
    transform:
      translateY(0)
      rotateZ(0deg);
  }

  50% {
    transform:
      translateY(-10px)
      rotateZ(0.5deg);
  }
}

@keyframes spin {
  to {
    transform:
      translate(-50%, -50%)
      rotateX(70deg)
      rotateZ(360deg);
  }
}

@keyframes scan {
  0%,
  100% {
    transform:
      translate(-50%, -50%)
      translateY(-140px);

    opacity: 0;
  }

  20%,
  70% {
    opacity: 1;
  }

  50% {
    transform:
      translate(-50%, -50%)
      translateY(140px);
  }
}

@keyframes pulse {
  50% {
    opacity: 0.9;

    filter:
      drop-shadow(
        0 0 22px rgba(72, 168, 255, 0.75)
      );
  }
}


/* =========================================================
   CINEMATIC MODEL STAGE
   ========================================================= */

.model-stage {
  position: relative;

  height:
    min(
      850px,
      calc(100vh - 82px)
    );

  min-height: 680px;

  width: 100%;

  overflow: hidden;
}

#roofCanvas {
  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  display: block;

  cursor: grab;
}

#roofCanvas:active {
  cursor: grabbing;
}

.model-ui {
  position: absolute;

  inset: 0;

  pointer-events: none;
}


/* =========================================================
   MODEL UI
   ========================================================= */

.model-top {
  position: absolute;

  right:
    max(
      24px,
      calc((100vw - 1220px) / 2)
    );

  top: 35px;

  display: flex;

  align-items: center;

  gap: 10px;

  font-size: 9px;

  letter-spacing: 0.17em;

  color: #778596;
}

.model-top i {
  width: 6px;

  height: 6px;

  border-radius: 50%;

  background: #51b9ff;

  box-shadow:
    0 0 15px #51b9ff;
}

.model-label {
  position: absolute;

  display: flex;

  align-items: center;

  gap: 10px;

  color: #9eabb9;

  font-size: 9px;

  letter-spacing: 0.15em;
}

.model-label b {
  display: grid;

  place-items: center;

  width: 27px;

  height: 27px;

  border:
    1px solid rgba(74, 170, 255, 0.5);

  border-radius: 50%;

  color: #61baff;

  background:
    rgba(5, 10, 17, 0.5);

  backdrop-filter: blur(8px);
}

.model-label::after {
  content: "";

  display: block;

  width: 55px;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      rgba(74, 170, 255, 0.55),
      transparent
    );
}

.label-roof {
  right: 11%;
  top: 31%;
}

.label-envelope {
  right: 17%;
  top: 56%;
}

.label-site {
  left: 12%;
  top: 70%;
}


/* =========================================================
   MODEL BOTTOM CONTROLS
   ========================================================= */

.model-bottom {
  position: absolute;

  bottom: 45px;

  left: 50%;

  transform: translateX(-50%);

  display: flex;

  align-items: center;

  gap: 8px;

  pointer-events: auto;

  padding: 8px;

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

  border-radius: 14px;

  background:
    rgba(4, 8, 13, 0.5);

  backdrop-filter: blur(18px);
}

.model-bottom button {
  border: 0;

  background: transparent;

  color: #7d8b9b;

  padding: 10px 14px;

  font:
    700 9px Inter;

  letter-spacing: 0.16em;

  border-radius: 9px;

  cursor: pointer;
}

.model-bottom button:hover {
  background:
    rgba(74, 170, 255, 0.1);

  color: #fff;
}

.model-bottom span {
  margin-left: 8px;

  padding: 0 10px;

  color: #536171;

  font-size: 8px;

  letter-spacing: 0.13em;
}


/* =========================================================
   MODEL LOADER
   ========================================================= */

.model-loader {
  position: absolute;

  left: 50%;

  top: 52%;

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

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 11px;

  color: #728092;

  font-size: 9px;

  letter-spacing: 0.18em;

  transition:
    opacity 0.6s,
    visibility 0.6s;
}

.model-loader span {
  width: 44px;

  height: 44px;

  border-radius: 50%;

  border:
    1px solid rgba(74, 170, 255, 0.2);

  border-top-color: #58baff;

  animation:
    spinLoader 1s linear infinite;
}

.model-loader small {
  font-size: 7px;

  color: #3e4b59;
}

.model-loader.hidden {
  opacity: 0;

  visibility: hidden;
}

@keyframes spinLoader {
  to {
    transform: rotate(360deg);
  }
}


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

.hero-orb {
  position: absolute;

  width: 600px;

  height: 600px;

  right: 12%;

  top: 15%;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(58, 157, 255, 0.08),
      transparent 64%
    );

  filter: blur(2px);

  pointer-events: none;
}


/* =========================================================
   INTRO STATEMENT
   ========================================================= */

.intro-statement {
  padding-top: 150px;
}

.statement-grid {
  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 80px;

  align-items: end;
}

.statement-grid h2 {
  font-size:
    clamp(
      46px,
      6vw,
      82px
    );

  line-height: 0.94;

  letter-spacing: -0.055em;

  margin: 12px 0 0;
}

.statement-grid h2 span {
  color: #6d7a8b;
}

.statement-grid p {
  font-size: 20px;

  line-height: 1.65;

  color: #8e9bab;

  max-width: 530px;
}


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

.service-section {
  padding-top: 90px;
}

.service-grid {
  margin-top: 45px;
}

.service-card {
  min-height: 270px;

  position: relative;

  overflow: hidden;

  transition:
    transform 0.35s,
    border-color 0.35s,
    background 0.35s;
}

.service-card:hover {
  transform: translateY(-8px);

  border-color:
    rgba(74, 170, 255, 0.35);

  background:
    linear-gradient(
      145deg,
      #101a27,
      #0a1018
    );
}

.service-card::after {
  content: "";

  position: absolute;

  right: -60px;

  bottom: -60px;

  width: 170px;

  height: 170px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(73, 157, 255, 0.12),
      transparent 70%
    );
}

.card-no {
  font-size: 10px;

  letter-spacing: 0.16em;

  color: #4eaaff;

  margin-bottom: 70px;
}

.service-card h3 {
  font-size: 26px;

  margin: 0 0 13px;

  letter-spacing: -0.03em;
}

.service-card p {
  color: #8290a0;

  line-height: 1.65;

  max-width: 310px;
}

.service-card > span {
  position: absolute;

  bottom: 25px;

  right: 25px;

  color: #668097;

  font-size: 8px;

  letter-spacing: 0.14em;
}


/* =========================================================
   VISUAL SECTION
   ========================================================= */

.visual-section {
  padding-top: 130px;
}

.visual-panel {
  display: grid;

  grid-template-columns:
    0.8fr 1.2fr;

  gap: 55px;

  align-items: center;
}

.visual-copy h2 {
  font-size:
    clamp(
      48px,
      5.5vw,
      76px
    );

  line-height: 0.94;

  letter-spacing: -0.06em;

  margin: 15px 0 24px;
}

.visual-copy h2 span {
  color: #657385;
}

.visual-copy p {
  color: #8996a5;

  line-height: 1.75;

  max-width: 460px;
}


/* =========================================================
   VISUAL TAGS / POINTS
   ========================================================= */

.visual-tag {
  display: inline-flex;

  margin-top: 14px;

  padding: 7px 10px;

  border:
    1px solid rgba(72, 168, 255, 0.2);

  border-radius: 999px;

  font-size: 9px;

  letter-spacing: 0.16em;

  color: #9acaff;

  background:
    rgba(72, 168, 255, 0.05);
}

.visual-points {
  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  margin: 18px 0 26px;
}

.visual-points span {
  padding: 9px 11px;

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

  border-radius: 999px;

  color: #7c8b9c;

  font-size: 8px;

  letter-spacing: 0.13em;
}


/* =========================================================
   VISUAL IMAGE
   ========================================================= */

.visual-image-wrap {
  height: 590px;

  position: relative;

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

  overflow: hidden;

  background: #0a1017;

  box-shadow:
    inset 0 0 0 1px rgba(72, 168, 255, 0.03),
    0 30px 70px rgba(0, 0, 0, 0.3);
}

.visual-image-wrap img {
  width: 100%;

  height: 100%;

  object-fit: cover;

  opacity: 0.72;

  filter:
    saturate(0.7)
    contrast(1.1);
}

.visual-grid {
  position: absolute;

  inset: 0;

  background-image:
    linear-gradient(
      rgba(73, 170, 255, 0.12) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(73, 170, 255, 0.12) 1px,
      transparent 1px
    );

  background-size: 45px 45px;

  mask-image:
    linear-gradient(
      90deg,
      transparent,
      black 50%,
      transparent
    );
}


/* =========================================================
   IMAGE CAPTION
   ========================================================= */

.image-caption {
  position: absolute;

  left: 18px;

  right: 18px;

  bottom: 16px;

  z-index: 3;

  display: flex;

  align-items: end;

  justify-content: space-between;

  gap: 12px;

  padding: 12px 14px;

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

  border-radius: 12px;

  background:
    linear-gradient(
      90deg,
      rgba(3, 7, 12, 0.76),
      rgba(3, 7, 12, 0.3)
    );

  backdrop-filter: blur(10px);
}

.image-caption span {
  font-size: 10px;

  letter-spacing: 0.17em;

  color: #dbe8f5;

  font-weight: 900;
}

.image-caption small {
  font-size: 10px;

  color: #91a0b1;
}


/* =========================================================
   VISUAL DRIFT
   ========================================================= */

@keyframes visualDrift {
  0% {
    transform:
      scale(1.03)
      translate3d(-1%, 0, 0);
  }

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


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

.process-section {
  padding-top: 120px;
}

.process-grid {
  display: grid;

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

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

  margin-top: 40px;
}

.process-step {
  padding:
    28px 25px 30px 0;

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

  min-height: 220px;
}

.process-step:not(:first-child) {
  padding-left: 25px;
}

.process-step:last-child {
  border-right: 0;
}

.process-step > span {
  color: #4caeff;

  font-size: 10px;

  letter-spacing: 0.14em;
}

.process-step h3 {
  font-size: 25px;

  margin: 45px 0 12px;
}

.process-step p {
  color: #7f8c9b;

  line-height: 1.6;

  font-size: 14px;

  max-width: 230px;
}


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

.final-cta {
  padding: 130px 0 160px;
}

.final-card {
  border:
    1px solid rgba(74, 170, 255, 0.18);

  background:
    radial-gradient(
      circle at 80% 20%,
      rgba(55, 144, 235, 0.13),
      transparent 35%
    ),
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.035),
      rgba(255, 255, 255, 0.01)
    );

  padding: 70px;

  display: flex;

  align-items: end;

  justify-content: space-between;

  gap: 30px;

  position: relative;

  overflow: hidden;
}

.final-card::before {
  content: "";

  position: absolute;

  width: 500px;

  height: 500px;

  right: -240px;

  bottom: -300px;

  border:
    1px solid rgba(74, 170, 255, 0.2);

  border-radius: 50%;
}

.final-card h2 {
  font-size:
    clamp(
      45px,
      5vw,
      72px
    );

  line-height: 0.94;

  letter-spacing: -0.055em;

  margin: 12px 0 0;

  position: relative;
}

.final-card h2 span {
  color: #5eb4ff;
}

.btn.big {
  padding: 18px 25px;

  min-width: 190px;

  position: relative;
}


/* =========================================================
   INTRO VIDEO
   ========================================================= */

.intro-shell {
  position: fixed;

  inset: 0;

  z-index: 3000;

  background: #020407;

  overflow: hidden;

  display: flex;

  align-items: center;

  justify-content: center;

  transition:
    opacity 1s,
    visibility 1s;

  contain: layout paint style;

  isolation: isolate;

  min-height: 100svh;

  width: 100%;
}

.intro-shell.done {
  opacity: 0;

  visibility: hidden;

  pointer-events: none;
}

.intro-backdrop {
  position: absolute;

  inset: 0;

  background:
    radial-gradient(
      circle at 70% 45%,
      rgba(32, 118, 210, 0.16),
      transparent 35%
    ),
    #020407;
}

.intro-video {
  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  max-width: none;

  max-height: none;

  display: block;

  object-fit: cover;

  object-position: 50% 50%;

  background: #000;

  opacity: 0.74;

  mix-blend-mode: screen;

  filter:
    contrast(1.08)
    saturate(0.85);

  transform:
    translate3d(0, 0, 0);

  backface-visibility: hidden;

  will-change:
    opacity,
    transform;

  image-rendering: auto;

  -webkit-transform:
    translate3d(0, 0, 0);

  transition:
    opacity 0.9s ease,
    transform 1.6s
      cubic-bezier(.22, 1, .36, 1);
}

.intro-shell.video-ready .intro-video {
  opacity: 1;
}

.intro-video-3d {
  background: #010308;
}

.intro-video-3d.done .intro-video {
  opacity: 0;

  transform:
    scale(1.035);
}


/* =========================================================
   INTRO SHADE
   ========================================================= */

.intro-shade {
  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(2, 4, 7, 0.78),
      rgba(2, 4, 7, 0.18) 60%,
      rgba(2, 4, 7, 0.68)
    ),
    linear-gradient(
      0deg,
      rgba(2, 4, 7, 0.7),
      transparent 50%,
      rgba(2, 4, 7, 0.55)
    );
}

.intro-overlay {
  position: absolute;

  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.08) 0%,
      rgba(0, 0, 0, 0) 35%,
      rgba(0, 0, 0, 0.28) 100%
    );
}


/* =========================================================
   INTRO 3D CANVAS
   ========================================================= */

.intro-three {
  position: fixed;

  inset: 0;

  background: #02070d;

  z-index: 9999;

  display: block;

  overflow: hidden;

  opacity: 1;

  visibility: visible;

  transition:
    opacity 1.1s
      cubic-bezier(.22, 1, .36, 1),
    visibility 1.1s;
}

.intro-three.done {
  opacity: 0;

  visibility: hidden;

  pointer-events: none;
}

.intro-three-canvas {
  position: absolute;

  inset: 0;

  z-index: 1;

  opacity: 0.45;

  transition:
    opacity 0.45s ease;
}

.intro-three-canvas canvas {
  display: block;

  width: 100%;

  height: 100%;
}


/* =========================================================
   INTRO 3D GLOW / VIGNETTE
   ========================================================= */

.intro-three .intro-vignette {
  position: absolute;

  inset: 0;

  z-index: 4;

  pointer-events: none;

  background:
    radial-gradient(
      circle at 52% 46%,
      rgba(45, 173, 255, 0.07),
      transparent 36%
    ),
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.05),
      rgba(0, 0, 0, 0.54)
    ),
    radial-gradient(
      ellipse at center,
      transparent 38%,
      rgba(0, 0, 0, 0.56) 100%
    );
}

.intro-video-glow {
  position: absolute;

  inset: 0;

  z-index: 3;

  pointer-events: none;

  background:
    radial-gradient(
      circle at 52% 48%,
      rgba(40, 161, 255, 0.1),
      transparent 31%
    ),
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.04),
      rgba(0, 0, 0, 0.22)
    );
}


/* =========================================================
   INTRO CORNERS
   ========================================================= */

.intro-corners {
  position: absolute;

  inset: 20px;

  z-index: 5;

  pointer-events: none;

  opacity: 0.58;
}

.intro-corners span {
  position: absolute;

  width: 42px;

  height: 42px;

  border-color:
    rgba(112, 206, 255, 0.48);

  border-style: solid;
}

.intro-corners span:nth-child(1) {
  left: 0;
  top: 0;

  border-width:
    1px 0 0 1px;
}

.intro-corners span:nth-child(2) {
  right: 0;
  top: 0;

  border-width:
    1px 1px 0 0;
}

.intro-corners span:nth-child(3) {
  left: 0;
  bottom: 0;

  border-width:
    0 0 1px 1px;
}

.intro-corners span:nth-child(4) {
  right: 0;
  bottom: 0;

  border-width:
    0 1px 1px 0;
}


/* =========================================================
   INTRO UI
   ========================================================= */

.intro-ui {
  position: absolute;

  z-index: 3;

  left:
    clamp(
      28px,
      6vw,
      110px
    );

  bottom:
    clamp(
      58px,
      10vh,
      112px
    );

  pointer-events: none;

  max-width: 600px;
}

.intro-logo {
  width:
    min(
      230px,
      40vw
    );

  height: auto;

  display: block;

  margin-bottom: 22px;

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

.intro-kicker {
  font-size: 10px;

  letter-spacing: 0.28em;

  text-transform: uppercase;

  color: #88a7bf;

  margin-bottom: 15px;
}

.intro-ui h2 {
  margin: 0;

  font-size:
    clamp(
      42px,
      6vw,
      86px
    );

  line-height: 0.9;

  letter-spacing: -0.045em;

  font-weight: 950;

  color: #fff;

  text-shadow:
    0 16px 60px rgba(0, 0, 0, 0.55);
}

.intro-ui h2 span {
  color: #68caff;
}


/* =========================================================
   INTRO LINE
   ========================================================= */

.intro-line {
  width:
    min(
      280px,
      48vw
    );

  height: 1px;

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

  margin-top: 24px;

  overflow: hidden;
}

.intro-line span {
  display: block;

  width: 28%;

  height: 100%;

  background:
    linear-gradient(
      90deg,
      transparent,
      #69caff,
      transparent
    );

  animation:
    introSweep 1.5s
      ease-in-out infinite;
}

@keyframes introSweep {
  0% {
    transform: translateX(-130%);
  }

  50% {
    transform: translateX(270%);
  }

  100% {
    transform: translateX(270%);
  }
}


/* =========================================================
   INTRO STATUS / ACTIONS
   ========================================================= */

.intro-status {
  position: absolute;

  left: 28px;

  bottom: 24px;

  z-index: 6;

  color:
    rgba(225, 241, 250, 0.66);

  font-size: 9px;

  letter-spacing: 0.22em;

  text-transform: uppercase;

  text-shadow:
    0 2px 18px rgba(0, 0, 0, 0.75);
}

.intro-actions {
  position: absolute;

  right: 30px;

  bottom: 22px;

  z-index: 7;
}

.intro-play {
  display: none;

  padding: 11px 15px;

  border-radius: 999px;

  border:
    1px solid rgba(100, 202, 255, 0.62);

  background:
    rgba(3, 9, 15, 0.74);

  color: #fff;

  letter-spacing: 0.12em;

  font-size: 10px;

  font-weight: 850;

  cursor: pointer;

  backdrop-filter: blur(14px);

  box-shadow:
    0 12px 35px rgba(0, 0, 0, 0.38);
}

.intro-play.show {
  display: block;
}


/* =========================================================
   FALLBACK BUILDING
   ========================================================= */

.intro-fallback {
  position: absolute;

  inset: 0;

  display: none;

  align-items: center;

  justify-content: center;

  pointer-events: none;
}

.fallback-building {
  position: relative;

  width:
    min(
      56vw,
      720px
    );

  height:
    min(
      35vw,
      420px
    );

  transform:
    perspective(900px)
    rotateX(56deg)
    rotateZ(-14deg)
    skewX(-8deg);

  filter:
    drop-shadow(
      0 50px 70px rgba(17, 146, 228, 0.18)
    );

  opacity: 0.92;
}

.fallback-building::before {
  content: "";

  position: absolute;

  inset:
    10% 6% 12% 10%;

  background:
    linear-gradient(
      135deg,
      #132330,
      #0a1219 52%,
      #172c3b
    );

  border:
    1px solid rgba(120, 203, 255, 0.16);

  box-shadow:
    inset 0 0 80px rgba(24, 151, 225, 0.08);
}

.fallback-building i,
.fallback-building b,
.fallback-building em {
  position: absolute;

  display: block;

  background:
    linear-gradient(
      90deg,
      rgba(97, 202, 255, 0.05),
      rgba(97, 202, 255, 0.7),
      rgba(97, 202, 255, 0.05)
    );

  box-shadow:
    0 0 18px rgba(59, 182, 255, 0.3);

  height: 2px;
}

.fallback-building i {
  left: 12%;
  right: 8%;
  top: 20%;
}

.fallback-building b {
  left: 9%;
  right: 11%;
  top: 48%;
}

.fallback-building em {
  left: 15%;
  right: 5%;
  top: 76%;
}

.fallback-building::after {
  content: "";

  position: absolute;

  left: 8%;
  right: 8%;

  top: 2%;

  height: 12%;

  transform:
    skewX(-18deg);

  background:
    repeating-linear-gradient(
      90deg,
      #233b4b 0 18px,
      #172a37 18px 36px
    );

  border:
    1px solid rgba(115, 211, 255, 0.18);

  box-shadow:
    0 -12px 35px rgba(62, 189, 255, 0.12);
}


/* =========================================================
   INTRO GRID
   ========================================================= */

.intro-grid {
  position: absolute;

  inset: 0;

  background-image:
    linear-gradient(
      rgba(94, 175, 255, 0.08) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(94, 175, 255, 0.08) 1px,
      transparent 1px
    );

  background-size: 70px 70px;

  transform:
    perspective(700px)
    rotateX(62deg)
    translateY(28%);

  transform-origin:
    center bottom;

  opacity: 0.45;
}

.intro-copy {
  position: absolute;

  left: 8vw;

  top: 50%;

  transform:
    translateY(-50%);

  z-index: 2;
}

.intro-brand {
  font-size: 14px;

  letter-spacing: 0.3em;

  font-weight: 900;
}

.intro-brand span {
  color: #63baff;
}

.intro-copy .intro-line {
  width: 110px;

  height: 1px;

  background: #5ab8ff;

  margin: 24px 0;

  box-shadow:
    0 0 20px #5ab8ff;
}

.intro-title {
  font-size:
    clamp(
      50px,
      7vw,
      105px
    );

  font-weight: 900;

  line-height: 0.87;

  letter-spacing: -0.065em;
}

.intro-title em {
  font-style: normal;

  color: #55b4ff;
}

.intro-copy .intro-status {
  position: static;

  font-size: 8px;

  color: #718091;

  letter-spacing: 0.22em;

  margin-top: 30px;
}

.intro-skip {
  position: absolute;

  right: 34px;

  bottom: 30px;

  z-index: 5;

  color: #8b98a8;

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

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

  padding: 11px 15px;

  border-radius: 999px;

  font:
    700 9px Inter;

  letter-spacing: 0.14em;

  cursor: pointer;
}

.intro-skip:hover {
  color: #fff;

  border-color:
    rgba(90, 184, 255, 0.5);
}





/* =========================================================
   SITE LOADER — THREE.JS
   ========================================================= */

.site-loader {
  position: fixed;

  inset: 0;

  z-index: 5000;

  overflow: hidden;

  isolation: isolate;

  display: grid;

  place-items: center;

  background: #03070b;

  opacity: 1;

  visibility: visible;

  transition:
    opacity 0.85s
      cubic-bezier(.22, 1, .36, 1),
    visibility 0.85s linear;
}

.site-loader.done {
  opacity: 0;

  visibility: hidden;

  pointer-events: none;
}

.site-loader canvas {
  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  display: block;
}


/* =========================================================
   LOADER VISUAL EFFECTS
   ========================================================= */

.loader-vignette {
  position: absolute;

  inset: 0;

  z-index: 1;

  pointer-events: none;

  background:
    radial-gradient(
      circle at 50% 45%,
      rgba(50, 167, 255, 0.09),
      transparent 29%
    ),
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.03),
      rgba(0, 0, 0, 0.34)
    ),
    radial-gradient(
      ellipse at center,
      transparent 32%,
      rgba(0, 0, 0, 0.68) 100%
    );
}

.loader-grid {
  position: absolute;

  z-index: 1;

  left: -15%;

  right: -15%;

  bottom: -34%;

  height: 62%;

  opacity: 0.22;

  pointer-events: none;

  background-image:
    linear-gradient(
      rgba(87, 184, 255, 0.18) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(87, 184, 255, 0.18) 1px,
      transparent 1px
    );

  background-size: 58px 58px;

  transform:
    perspective(750px)
    rotateX(65deg);

  transform-origin:
    center bottom;

  mask-image:
    linear-gradient(
      180deg,
      transparent,
      black 35%,
      transparent
    );
}


/* =========================================================
   LOADER CENTER
   ========================================================= */

.loader-center {
  position: relative;

  z-index: 3;

  width:
    min(
      560px,
      calc(100vw - 36px)
    );

  display: flex;

  align-items: center;

  flex-direction: column;

  text-align: center;

  transform:
    translateY(-1vh);
}

.loader-logo-wrap {
  position: relative;

  width:
    min(
      430px,
      82vw
    );

  aspect-ratio: 864 / 392;

  display: grid;

  place-items: center;

  filter:
    drop-shadow(
      0 25px 50px rgba(31, 155, 229, 0.13)
    );
}

.loader-logo {
  position: relative;

  z-index: 4;

  width: 100%;

  height: auto;

  object-fit: contain;

  mix-blend-mode: screen;

  filter:
    brightness(1.04)
    saturate(0.92);

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

.loader-logo-halo {
  position: absolute;

  z-index: 1;

  width: 54%;

  height: 54%;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(60, 176, 255, 0.18),
      rgba(60, 176, 255, 0.05) 42%,
      transparent 72%
    );

  filter: blur(18px);

  animation:
    loaderHalo 3.4s
      ease-in-out infinite;
}

.loader-logo-ring {
  position: absolute;

  border:
    1px solid rgba(104, 199, 255, 0.2);

  border-radius: 50%;

  box-shadow:
    0 0 28px rgba(56, 164, 237, 0.07),
    inset 0 0 22px rgba(56, 164, 237, 0.04);
}

.loader-logo-ring-a {
  z-index: 2;

  width: 68%;

  aspect-ratio: 1;

  animation:
    loaderSpin 9s linear infinite;
}

.loader-logo-ring-b {
  z-index: 2;

  width: 82%;

  aspect-ratio: 1;

  border-color:
    rgba(255, 255, 255, 0.07);

  border-style: dashed;

  animation:
    loaderSpinReverse 14s
      linear infinite;
}


/* =========================================================
   LOADER RING DOTS
   ========================================================= */

.loader-logo-ring-a::before,
.loader-logo-ring-a::after,
.loader-logo-ring-b::before,
.loader-logo-ring-b::after {
  content: "";

  position: absolute;

  width: 7px;

  height: 7px;

  border-radius: 50%;

  background: #6bc7ff;

  box-shadow:
    0 0 18px rgba(107, 199, 255, 0.85);
}

.loader-logo-ring-a::before {
  left: 50%;
  top: -4px;
}

.loader-logo-ring-a::after {
  right: 7%;
  bottom: 16%;
}

.loader-logo-ring-b::before {
  left: 16%;
  bottom: 5%;

  opacity: 0.55;
}

.loader-logo-ring-b::after {
  right: 13%;
  top: 13%;

  opacity: 0.35;
}


/* =========================================================
   LOADER STATUS
   ========================================================= */

.loader-status {
  display: flex;

  align-items: center;

  gap: 10px;

  margin-top: 20px;

  color:
    rgba(218, 239, 250, 0.66);

  font-size: 9px;

  letter-spacing: 0.25em;

  text-transform: uppercase;
}

.loader-dot {
  width: 6px;

  height: 6px;

  border-radius: 50%;

  background: #64c6ff;

  box-shadow:
    0 0 14px rgba(100, 198, 255, 0.85);

  animation:
    loaderPulse 1.1s
      ease-in-out infinite;
}


/* =========================================================
   LOADER PROGRESS
   ========================================================= */

.loader-progress {
  width:
    min(
      330px,
      68vw
    );

  height: 2px;

  margin-top: 18px;

  overflow: hidden;

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

  border-radius: 999px;
}

.loader-progress span {
  display: block;

  width: 0;

  height: 100%;

  background:
    linear-gradient(
      90deg,
      #399dff,
      #72d0ff
    );

  box-shadow:
    0 0 16px rgba(82, 186, 255, 0.55);

  border-radius: 999px;

  transition:
    width 0.28s ease;
}

.loader-progress-meta {
  width:
    min(
      330px,
      68vw
    );

  display: flex;

  justify-content: space-between;

  gap: 16px;

  margin-top: 9px;

  color:
    rgba(192, 210, 222, 0.42);

  font-size: 8px;

  letter-spacing: 0.18em;
}

.loader-progress-meta strong {
  color:
    rgba(232, 246, 253, 0.72);

  font-weight: 600;
}


/* =========================================================
   LOADER ANIMATIONS
   ========================================================= */

@keyframes loaderLogoFloat {
  0%,
  100% {
    transform:
      translateY(0)
      scale(1);
  }

  50% {
    transform:
      translateY(-7px)
      scale(1.012);
  }
}

@keyframes loaderHalo {
  0%,
  100% {
    transform: scale(0.94);

    opacity: 0.75;
  }

  50% {
    transform: scale(1.08);

    opacity: 1;
  }
}

@keyframes loaderSpin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes loaderSpinReverse {
  to {
    transform: rotate(-360deg);
  }
}

@keyframes loaderPulse {
  0%,
  100% {
    transform: scale(0.8);

    opacity: 0.52;
  }

  50% {
    transform: scale(1.22);

    opacity: 1;
  }
}


/* =========================================================
   LOGO-ONLY THREE.JS LOADER
   ========================================================= */

.site-loader .loader-logo-ring,
.site-loader .loader-logo-halo,
.site-loader .loader-logo {
  display: none !important;
}

.site-loader .loader-logo-wrap {
  position: relative;

  width:
    min(
      430px,
      82vw
    );

  aspect-ratio: 864 / 392;

  display: grid;

  place-items: center;

  filter:
    drop-shadow(
      0 25px 50px rgba(31, 155, 229, 0.13)
    );
}

.site-loader #loaderLogoCanvas {
  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  display: block;
}


/* =========================================================
   SKIP SITE LOADER
   ========================================================= */

.skip-site-loader .site-loader {
  display: none !important;
}


/* =========================================================
   PREMIUM MOTION LAYER
   ========================================================= */

html {
  scroll-behavior: auto;
}

body.loader-lock {
  overflow: hidden;

  height: 100vh;
}

.char {
  display: inline-block;

  will-change:
    transform,
    opacity;
}


/* =========================================================
   CURSOR LIGHT
   ========================================================= */

.cursor-light {
  position: fixed;

  left: 0;

  top: 0;

  width: 260px;

  height: 260px;

  border-radius: 50%;

  pointer-events: none;

  z-index: 0;

  opacity: 0.34;

  background:
    radial-gradient(
      circle,
      rgba(78, 182, 255, 0.12) 0%,
      rgba(78, 182, 255, 0.045) 32%,
      transparent 70%
    );

  transform:
    translate3d(
      -50%,
      -50%,
      0
    );

  mix-blend-mode: screen;
}


/* =========================================================
   ROUTE TRANSITION
   ========================================================= */

.route-wipe {
  position: fixed;

  inset: 0;

  z-index: 10000;

  pointer-events: none;

  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(80, 190, 255, 0.18),
      transparent 28%
    ),
    linear-gradient(
      135deg,
      #03060a 0%,
      #08111b 48%,
      #04070c 100%
    );

  transform:
    translateY(100%);
}


/* =========================================================
   BUTTON LIQUID EFFECT
   ========================================================= */

.btn {
  position: relative;

  overflow: hidden;

  isolation: isolate;
}

.btn > * {
  position: relative;

  z-index: 2;
}

.btn .liquid {
  position: absolute;

  z-index: 0;

  left: 50%;

  top: 100%;

  width: 180%;

  height: 180%;

  border-radius: 45%;

  background:
    radial-gradient(
      circle,
      rgba(130, 220, 255, 0.3),
      transparent 62%
    );

  transform:
    translate(-50%, 0);

  opacity: 0.45;

  filter: blur(5px);

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

.btn:hover .liquid {
  transform:
    translate(-50%, -62%)
    rotate(8deg);
}


/* =========================================================
   LOADER EXIT EFFECT
   ========================================================= */

.site-loader.done #loaderLogoCanvas {
  filter: blur(4px);
}

.site-loader.done .loader-center {
  transform: scale(1.035);

  opacity: 0;

  transition:
    transform 0.65s
      cubic-bezier(.22, 1, .36, 1),
    opacity 0.4s ease;
}


/* =========================================================
   LOGO PARTICLE FIELD
   ========================================================= */

.logo-particle-field {
  position: fixed;

  right: 0;

  top: 0;

  width: 50vw;

  height: 50vh;

  z-index: 0;

  pointer-events: none;

  opacity: 0.85;

  mix-blend-mode: screen;
}


/* =========================================================
   RESPONSIVE — DESKTOP / TABLET
   ========================================================= */

@media (max-width: 900px) {

  .hero {
    grid-template-columns: 1fr;

    padding-top: 120px;
  }

  .scene-wrap {
    min-height: 500px;
  }

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

  .split,
  .contact-grid,
  .project-grid {
    grid-template-columns: 1fr;
  }

  .nav-links {
    display: none;
  }

  .menu {
    display: block;

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

    padding: 9px 12px;

    border-radius: 10px;

    color: #b9c5d3;
  }

  .nav.open .nav-links {
    display: flex;

    position: absolute;

    top: 78px;

    left: 0;

    right: 0;

    padding: 18px 20px;

    background:
      rgba(5, 8, 13, 0.98);

    flex-direction: column;

    align-items: flex-start;
  }

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

  .scene {
    transform: scale(0.82);
  }


  /* Cinematic */

  .hero-copy {
    position: relative;

    left: auto;

    top: auto;

    width: auto;

    margin:
      65px 20px 0;
  }

  .hero-3d {
    padding-top: 100px;
  }

  .hero-copy h1 {
    font-size:
      clamp(
        48px,
        12vw,
        76px
      );
  }

  .model-stage {
    height: 620px;

    min-height: 620px;
  }

  .model-label {
    display: none;
  }

  .model-top {
    right: 20px;
  }

  .model-bottom {
    bottom: 25px;

    width:
      calc(100% - 30px);

    justify-content: center;
  }

  .model-bottom span {
    display: none;
  }

  .statement-grid,
  .visual-panel {
    grid-template-columns: 1fr;

    gap: 35px;
  }

  .visual-image-wrap {
    height: 430px;
  }

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

  .process-step:nth-child(2) {
    border-right: 0;
  }

  .final-card {
    padding: 45px 30px;

    align-items: flex-start;

    flex-direction: column;
  }

  .hero-image-frame {
    width: 520px;

    max-width: 110%;

    bottom: 40px;

    transform:
      translateX(-50%)
      rotateX(5deg)
      rotateY(-10deg);
  }

  .visual-panel {
    grid-template-columns: 1fr;
  }

  .visual-image-wrap {
    min-height: 280px;
  }
}


/* =========================================================
   RESPONSIVE — MOBILE
   ========================================================= */

@media (max-width: 700px) {

  .brand-logo,
  .brand-logo img {
    width: 122px;

    max-height: 38px;
  }

  .footer-inner {
    align-items: flex-start;

    flex-direction: column;
  }

  .footer-inner img {
    width: 112px;
  }

  .container {
    width:
      min(
        100% - 26px,
        var(--max)
      );
  }

  .hero {
    padding-top: 110px;
  }

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

  .section {
    padding: 80px 0;
  }

  .scene {
    transform: scale(0.68);

    transform-origin:
      center top;
  }

  .scene-wrap {
    height: 450px;

    min-height: 450px;
  }

  .nav-inner {
    height: 70px;
  }

  .intro-copy {
    left: 7vw;
  }

  .intro-title {
    font-size: 17vw;
  }

  .statement-grid p {
    font-size: 17px;
  }

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

  .process-step,
  .process-step:not(:first-child) {
    border-right: 0;

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

    padding: 25px 0;

    min-height: auto;
  }

  .process-step h3 {
    margin-top: 25px;
  }

  .final-cta {
    padding-bottom: 100px;
  }

  .loader-center {
    transform:
      translateY(-2vh);
  }

  .loader-logo-wrap {
    width:
      min(
        360px,
        88vw
      );
  }

  .loader-status {
    font-size: 8px;

    letter-spacing: 0.19em;

    margin-top: 15px;
  }

  .loader-progress {
    margin-top: 14px;
  }

  .loader-grid {
    background-size: 42px 42px;

    bottom: -29%;

    height: 54%;
  }

  .cursor-light {
    width: 180px;

    height: 180px;

    opacity: 0.2;
  }

  .intro-ui {
    left: 22px;

    right: 22px;

    bottom: 44px;
  }

  .intro-ui h2 {
    font-size: 48px;
  }

  .intro-logo {
    width: 170px;
  }

  .intro-kicker {
    font-size: 8px;

    letter-spacing: 0.2em;
  }

  .intro-line {
    margin-top: 18px;
  }

  .fallback-building {
    width: 78vw;

    height: 48vw;
  }

  .intro-corners {
    inset: 14px;
  }

  .intro-corners span {
    width: 28px;

    height: 28px;
  }

  .intro-status {
    left: 18px;

    bottom: 18px;

    font-size: 8px;
  }

  .intro-actions {
    right: 18px;

    bottom: 16px;
  }

  .intro-video {
    object-position: center center;
  }

  .site-loader .loader-logo-wrap {
    width:
      min(
        360px,
        88vw
      );
  }
}


/* =========================================================
   RESPONSIVE — SMALL MOBILE
   ========================================================= */

@media (max-width: 620px) {

  .nav-links {
    display: none;
  }

  .menu {
    display: block;

    background: transparent;

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

    color: #fff;

    padding: 9px 12px;

    border-radius: 7px;
  }

  .hero-copy {
    margin-top: 55px;
  }

  .hero-copy p {
    font-size: 15px;
  }

  .hero-actions .btn {
    padding: 13px 16px;
  }

  .model-stage {
    height: 570px;

    min-height: 570px;
  }

  .model-bottom button {
    padding: 9px 10px;

    font-size: 8px;
  }

  .intro-copy {
    left: 7vw;
  }

  .intro-title {
    font-size: 17vw;
  }

  .statement-grid p {
    font-size: 17px;
  }

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

  .process-step,
  .process-step:not(:first-child) {
    border-right: 0;

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

    padding: 25px 0;

    min-height: auto;
  }

  .process-step h3 {
    margin-top: 25px;
  }

  .final-cta {
    padding-bottom: 100px;
  }
}


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

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

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;

    animation-iteration-count: 1 !important;

    scroll-behavior: auto !important;
  }

  .intro-shell {
    transition: none !important;
  }

  .intro-video {
    transition: none !important;
  }

  .site-loader {
    transition:
      opacity 0.35s ease,
      visibility 0.35s linear;
  }

  .loader-logo,
  .loader-logo-halo,
  .loader-logo-ring-a,
  .loader-logo-ring-b,
  .loader-dot {
    animation: none !important;
  }

  .cursor-light,
  .route-wipe {
    display: none;
  }

  .char {
    transform: none !important;
  }
}


/* =========================================================
   LOADER / VIDEO FIRST FRAME OPTIMIZATION
   ========================================================= */

.intro-shell {
  contain: layout paint style;

  isolation: isolate;
}

.intro-video {
  transform:
    translateZ(0);

  backface-visibility: hidden;

  will-change: opacity;

  image-rendering: auto;
}


/* =========================================================
   HERO TITLE FIX
   ========================================================= */

.hero-title {
  position: relative;

  z-index: 20;

  opacity: 1;

  visibility: visible;

  overflow: visible;
}

.hero-title-line {
  display: inline-block;

  opacity: 1;

  visibility: visible;

  white-space: nowrap;
}

.hero-title-accent {
  display: inline-block;

  opacity: 1;

  visibility: visible;
}

.hero-char {
  display: inline-block;

  opacity: 1;

  visibility: visible;

  will-change:
    transform,
    opacity,
    filter;

  backface-visibility: hidden;

  transform-style: preserve-3d;
}

.hero-title br {
  display: block;
}

@media (max-width: 700px) {

  .hero-title-line {
    white-space: normal;
  }
}

/* =========================================================
   ROOF PLAN — BETTER MOBILE 3D + TEXT RESPONSIVE
   Put this at the VERY END of your CSS
   ========================================================= */


/* =========================================================
   TABLET — 900px
   ========================================================= */

@media (max-width: 900px) {

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

  .hero-3d {
    min-height: auto;
    padding-top: 105px;
    overflow: hidden;
  }

  .hero-copy {
    position: relative;
    left: auto;
    top: auto;
    width: min(100%, 720px);
    margin: 35px auto 0;
    padding: 0 24px;
    z-index: 10;
  }

  .hero-copy h1 {
    font-size: clamp(48px, 9vw, 76px);
    line-height: 0.92;
    letter-spacing: -0.055em;
    max-width: 700px;
  }

  .hero-copy p {
    max-width: 600px;
    font-size: 16px;
    line-height: 1.65;
  }


  /* ---------- HERO BUTTONS ---------- */

  .hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
  }

  .hero-actions .btn {
    min-height: 46px;
    padding: 12px 17px;
  }


  /* ---------- 3D MODEL STAGE ---------- */

  .model-stage {
    width: 100%;
    height: 620px;
    min-height: 620px;
    margin-top: -10px;
    overflow: hidden;
  }

  #roofCanvas {
    width: 100%;
    height: 100%;
    touch-action: none;
  }


  /* ---------- MODEL UI ---------- */

  .model-top {
    top: 24px;
    right: 22px;
    font-size: 8px;
  }

  .model-label {
    display: none;
  }


  /* ---------- MODEL CONTROL ---------- */

  .model-bottom {
    bottom: 24px;
    left: 50%;
    width: auto;
    max-width: calc(100% - 32px);

    transform: translateX(-50%);

    display: flex;
    justify-content: center;

    padding: 6px;

    border-radius: 13px;

    white-space: nowrap;
  }

  .model-bottom button {
    padding: 10px 13px;
    font-size: 8px;
  }

  .model-bottom span {
    display: none;
  }


  /* ---------- STATEMENT ---------- */

  .statement-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .statement-grid h2 {
    font-size: clamp(42px, 8vw, 68px);
  }

  .statement-grid p {
    font-size: 17px;
  }


  /* ---------- VISUAL ---------- */

  .visual-panel {
    grid-template-columns: 1fr;
    gap: 35px;
  }

  .visual-copy h2 {
    font-size: clamp(42px, 8vw, 68px);
  }

  .visual-image-wrap {
    height: 430px;
  }


  /* ---------- PROCESS ---------- */

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


  /* ---------- CTA ---------- */

  .final-card {
    padding: 45px 30px;
    align-items: flex-start;
    flex-direction: column;
  }

}


/* =========================================================
   MOBILE — 700px
   ========================================================= */

@media (max-width: 700px) {

  /* ---------- GLOBAL ---------- */

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


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

  .nav-inner {
    height: 68px;
  }

  .brand-logo {
    width: 125px;
    height: 38px;
  }

  .brand-logo img {
    width: 125px;
    max-height: 36px;
  }


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

  .hero-3d {
    padding-top: 88px;
    min-height: auto;
  }

  .hero-copy {
    width: 100%;
    margin: 22px auto 0;
    padding: 0 18px;
  }


  /* ---------- EYEBROW ---------- */

  .hero-copy .eyebrow {
    font-size: 8px;
    letter-spacing: 0.18em;
    margin-bottom: 13px;
  }

  .live-dot {
    width: 5px;
    height: 5px;
  }


  /* ---------- HERO TITLE ---------- */

  .hero-copy h1 {
    font-size: clamp(42px, 12.5vw, 62px);
    line-height: 0.9;
    letter-spacing: -0.06em;
    margin-bottom: 18px;
    max-width: 100%;
  }


  /* ---------- HERO TITLE ANIMATION ---------- */

  .hero-title {
    width: 100%;
    overflow: visible;
  }

  .hero-title-line {
    white-space: normal;
  }

  .hero-char {
    will-change: transform, opacity;
  }


  /* ---------- HERO DESCRIPTION ---------- */

  .hero-copy p {
    max-width: 100%;
    font-size: 14px;
    line-height: 1.65;
    margin: 0;
  }


  /* ---------- HERO BUTTONS ---------- */

  .hero-actions {
    width: 100%;
    margin-top: 20px;
    gap: 8px;
  }

  .hero-actions .btn {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 11px 14px;
    border-radius: 10px;
    font-size: 11px;
  }


  /* ---------- 3D MODEL ---------- */

  .model-stage {
    width: 100%;
    height: 510px;
    min-height: 510px;
    margin-top: -8px;
  }

  #roofCanvas {
    width: 100%;
    height: 100%;
    display: block;
    touch-action: none;
  }


  /* ---------- MODEL TOP ---------- */

  .model-top {
    top: 18px;
    right: 16px;
    font-size: 7px;
    letter-spacing: 0.12em;
  }

  .model-top i {
    width: 5px;
    height: 5px;
  }


  /* ---------- MODEL CONTROLS ---------- */

  .model-bottom {
    bottom: 18px;
    width: calc(100% - 24px);
    max-width: 360px;

    padding: 5px;

    gap: 3px;

    border-radius: 11px;
  }

  .model-bottom button {
    flex: 1;
    min-width: 0;

    padding: 10px 7px;

    font-size: 7px;
    letter-spacing: 0.10em;

    border-radius: 7px;
  }


  /* ---------- H2 ---------- */

  .section h2 {
    font-size: clamp(34px, 10vw, 52px);
    line-height: 0.96;
  }


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

  .section {
    padding: 75px 0;
  }


  /* ---------- VISUAL ---------- */

  .visual-copy h2 {
    font-size: clamp(40px, 10vw, 58px);
    line-height: 0.95;
  }

  .visual-copy p {
    font-size: 14px;
    line-height: 1.7;
  }

  .visual-image-wrap {
    height: 330px;
  }


  /* ---------- PROCESS ---------- */

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

  .process-step,
  .process-step:not(:first-child) {
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,.07);
    padding: 24px 0;
    min-height: auto;
  }

  .process-step h3 {
    font-size: 22px;
    margin-top: 22px;
  }


  /* ---------- CTA ---------- */

  .final-cta {
    padding: 80px 0 100px;
  }

  .final-card {
    padding: 35px 22px;
  }

  .final-card h2 {
    font-size: clamp(38px, 11vw, 58px);
  }

  .btn.big {
    width: 100%;
    min-width: 0;
  }

}


/* =========================================================
   SMALL MOBILE — 560px
   ========================================================= */

@media (max-width: 560px) {

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

  .hero-3d {
    padding-top: 82px;
  }

  .hero-copy {
    margin-top: 18px;
    padding: 0 15px;
  }


  /* ---------- TITLE ---------- */

  .hero-copy h1 {
    font-size: clamp(39px, 12.8vw, 54px);
    line-height: 0.91;
    letter-spacing: -0.065em;
  }


  /* ---------- DESCRIPTION ---------- */

  .hero-copy p {
    font-size: 13px;
    line-height: 1.65;
  }


  /* ---------- BUTTONS ---------- */

  .hero-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }

  .hero-actions .btn {
    width: 100%;
    padding: 11px 9px;
    font-size: 10px;
  }


  /* ---------- 3D MODEL ---------- */

  .model-stage {
    height: 455px;
    min-height: 455px;
    margin-top: 0;
  }

  #roofCanvas {
    width: 100%;
    height: 100%;
  }


  /* ---------- MODEL CONTROL ---------- */

  .model-bottom {
    bottom: 14px;
    width: calc(100% - 20px);
    max-width: 340px;
  }

  .model-bottom button {
    padding: 9px 5px;
    font-size: 6.5px;
  }


  /* ---------- VISUAL ---------- */

  .visual-image-wrap {
    height: 290px;
  }

}


/* =========================================================
   VERY SMALL MOBILE — 420px
   ========================================================= */

@media (max-width: 420px) {

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

  .brand-logo,
  .brand-logo img {
    width: 112px;
  }


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

  .hero-copy {
    padding: 0 13px;
  }

  .hero-copy h1 {
    font-size: clamp(36px, 13vw, 50px);
  }

  .hero-copy p {
    font-size: 12.5px;
  }


  /* ---------- BUTTONS ---------- */

  .hero-actions {
    grid-template-columns: 1fr;
  }

  .hero-actions .btn {
    width: 100%;
  }


  /* ---------- 3D MODEL ---------- */

  .model-stage {
    height: 420px;
    min-height: 420px;
  }


  /* ---------- MODEL CONTROLS ---------- */

  .model-bottom {
    bottom: 12px;
    width: calc(100% - 16px);
  }

  .model-bottom button {
    padding: 8px 4px;
    font-size: 6px;
    letter-spacing: 0.07em;
  }


  /* ---------- SECTION TEXT ---------- */

  .section h2 {
    font-size: clamp(32px, 11vw, 46px);
  }

  .statement-grid h2 {
    font-size: clamp(38px, 11vw, 52px);
  }

  .visual-copy h2 {
    font-size: clamp(38px, 11vw, 52px);
  }


  /* ---------- CARDS ---------- */

  .card {
    padding: 20px;
    min-height: 190px;
  }

  .card h3 {
    font-size: 21px;
  }


  /* ---------- FINAL CTA ---------- */

  .final-card {
    padding: 30px 18px;
  }

}


/* =========================================================
   LANDSCAPE MOBILE
   Prevent the 3D model from becoming too tall
   ========================================================= */

@media (max-width: 900px) and (orientation: landscape) {

  .hero-copy {
    margin-top: 15px;
  }

  .hero-copy h1 {
    font-size: clamp(38px, 7vw, 58px);
  }

  .hero-copy p {
    max-width: 600px;
  }

  .model-stage {
    height: 460px;
    min-height: 460px;
  }

}


/* =========================================================
   TOUCH DEVICE OPTIMIZATION
   ========================================================= */

@media (hover: none) and (pointer: coarse) {

  #roofCanvas {
    cursor: default;
  }

  .card:hover {
    transform: none;
  }

  .hero-actions .btn:hover {
    transform: none;
  }

  .service-card:hover {
    transform: none;
  }

  .model-bottom button:hover {
    background: transparent;
  }

}

/* =========================================================
   ABOUT US — 3D DIAMOND IMAGE
========================================================= */

.about-section,
.about-page-section {
  position: relative;
  overflow: hidden;
}

.about-grid,
.about-page-grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  align-items: center;
  gap: 90px;
  min-height: 720px;
}

.about-copy,
.about-page-copy {
  position: relative;
  z-index: 5;
}

.about-copy h2,
.about-page-copy h2 {
  font-size: clamp(48px, 6vw, 82px);
  line-height: .92;
  letter-spacing: -.06em;
  margin: 20px 0 30px;
}

.about-copy h2 span,
.about-page-copy h2 span {
  color: #8c98a8;
}

.about-copy p,
.about-page-copy p {
  max-width: 520px;
  color: #8995a5;
  font-size: 17px;
  line-height: 1.8;
  margin-bottom: 35px;
}

.about-visual {
  position: relative;
  min-height: 620px;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1200px;
}

.about-diamond {
  position: relative;
  width: min(500px, 70vw);
  aspect-ratio: 1;
  transform: rotate(45deg);
  transform-style: preserve-3d;
  background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.015));
  border: 1px solid rgba(255,255,255,.16);
  box-shadow:
    0 60px 120px rgba(0,0,0,.55),
    0 0 80px rgba(38,130,220,.08);
  animation: aboutDiamondFloat 7s ease-in-out infinite;
}

.about-image {
  position: absolute;
  inset: 13px;
  overflow: hidden;
  background: #070b11;
  transform: translateZ(35px);
  border: 1px solid rgba(255,255,255,.08);
}

.about-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transform: rotate(-45deg) scale(1.42);
  filter: saturate(.82) contrast(1.08) brightness(.82);
  transition:
    transform 1s cubic-bezier(.16,1,.3,1),
    filter .8s ease;
}

.about-diamond:hover .about-image img {
  transform: rotate(-45deg) scale(1.52);
  filter: saturate(1) contrast(1.08) brightness(.95);
}

.about-diamond-glow {
  position: absolute;
  inset: -80px;
  background: radial-gradient(circle, rgba(42,137,230,.16), transparent 65%);
  filter: blur(30px);
  transform: translateZ(-50px);
  pointer-events: none;
}

.about-edge {
  position: absolute;
  inset: -10px;
  border: 1px solid rgba(120,180,255,.16);
  transform: translateZ(-25px);
  box-shadow: 0 0 40px rgba(35,120,220,.08);
  pointer-events: none;
}

.about-orbit {
  position: absolute;
  width: 560px;
  height: 560px;
  border: 1px solid rgba(255,255,255,.055);
  border-radius: 50%;
  pointer-events: none;
}

.orbit-one {
  transform: rotateX(68deg) rotateZ(-18deg);
}

.orbit-two {
  width: 470px;
  height: 470px;
  transform: rotateX(68deg) rotateZ(35deg);
  border-color: rgba(70,150,230,.07);
}

.about-floating-label {
  position: absolute;
  right: 0;
  bottom: 105px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 13px 16px;
  border-left: 1px solid rgba(100,170,240,.4);
  background: rgba(4,8,14,.62);
  backdrop-filter: blur(15px);
  color: #c4ceda;
  font-size: 9px;
  letter-spacing: .18em;
}

.about-floating-label small {
  color: #657386;
  font-size: 7px;
  letter-spacing: .16em;
}

@keyframes aboutDiamondFloat {
  0%, 100% {
    transform: rotate(45deg) translateY(0);
  }

  50% {
    transform: rotate(45deg) translateY(-18px) rotateX(2deg) rotateY(-3deg);
  }
}

@media(max-width:900px) {
  .about-grid,
  .about-page-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .about-visual {
    min-height: 520px;
  }

  .about-diamond {
    width: min(430px, 72vw);
  }

  .about-floating-label {
    right: 5%;
    bottom: 60px;
  }
}

@media(max-width:620px) {
  .about-grid,
  .about-page-grid {
    gap: 10px;
  }

  .about-copy h2,
  .about-page-copy h2 {
    font-size: clamp(45px, 13vw, 65px);
  }

  .about-copy p,
  .about-page-copy p {
    font-size: 15px;
    line-height: 1.7;
  }

  .about-visual {
    min-height: 430px;
  }

  .about-diamond {
    width: 270px;
  }

  .about-orbit {
    width: 330px;
    height: 330px;
  }

  .orbit-two {
    width: 280px;
    height: 280px;
  }

  .about-floating-label {
    right: 0;
    bottom: 35px;
    padding: 10px 12px;
  }
}

/* =========================================================
   PERFORMANCE POLISH
   Intro loader removed — render the site immediately.
   ========================================================= */
.site-loader,
.loader-canvas,
#loaderCanvas,
#loaderLogoCanvas {
  display: none !important;
}

.model-stage canvas {
  display: block;
  width: 100%;
  height: 100%;
  contain: layout paint;
}

@media (max-width: 900px) {
  .nav { backdrop-filter: blur(8px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

/* =========================================================
   SERVICE CARDS — 3D IMAGE / PREMIUM INTERACTION
   ========================================================= */
.service-grid-3d {
  perspective: 1400px;
}

.service-card-3d {
  min-height: 520px;
  padding: 0;
  isolation: isolate;
  transform-style: preserve-3d;
  will-change: transform;
  background: #080d14;
  border: 1px solid rgba(137, 166, 196, 0.16);
  box-shadow: 0 18px 60px rgba(0,0,0,.18);
  overflow: hidden;
  transition: transform .18s ease-out, border-color .35s ease, box-shadow .35s ease;
}

.service-card-3d::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(3,7,12,.04) 0%, rgba(3,7,12,.08) 35%, rgba(3,7,12,.94) 100%);
}

.service-card-3d:hover {
  border-color: rgba(91, 178, 255, .46);
  box-shadow: 0 30px 90px rgba(0,0,0,.38), 0 0 0 1px rgba(91,178,255,.05);
}

.service-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  transform: translateZ(0);
}

.service-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transform: scale(1.035) translate3d(0,0,0);
  filter: saturate(.86) contrast(1.04) brightness(.72);
  transition: transform .8s cubic-bezier(.16,1,.3,1), filter .6s ease;
  will-change: transform;
}

.service-card-3d:hover .service-media img {
  transform: scale(1.10) translate3d(0,-1.5%,0);
  filter: saturate(.98) contrast(1.06) brightness(.82);
}

.service-shine {
  position: absolute;
  inset: -30%;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.16) 48%, transparent 61%);
  transform: translateX(-35%) rotate(8deg);
  transition: opacity .25s ease, transform .9s cubic-bezier(.16,1,.3,1);
}

.service-card-3d:hover .service-shine {
  opacity: 1;
  transform: translateX(35%) rotate(8deg);
}

.service-gridline {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: .22;
  pointer-events: none;
  background-image: linear-gradient(rgba(124,190,255,.18) 1px, transparent 1px), linear-gradient(90deg, rgba(124,190,255,.18) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.55), transparent 72%);
}

.service-content {
  position: absolute;
  inset: auto 0 0;
  z-index: 4;
  padding: 28px 28px 25px;
  transform: translateZ(35px);
}

.service-content .card-no {
  margin-bottom: 15px;
  text-shadow: 0 0 20px rgba(78,170,255,.4);
}

.service-content h3 {
  margin: 0 0 10px;
  font-size: clamp(24px, 2vw, 31px);
  line-height: 1;
  letter-spacing: -.045em;
  color: #f4f8fc;
}

.service-content p {
  margin: 0;
  max-width: 390px;
  color: rgba(221,231,241,.76);
  line-height: 1.55;
  font-size: 14px;
}

.service-link {
  position: relative !important;
  inset: auto !important;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  color: #dcecff !important;
  font-size: 9px !important;
  letter-spacing: .18em !important;
  font-weight: 700;
}

.service-link b {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(130,190,255,.35);
  border-radius: 50%;
  font-size: 12px;
  transition: transform .35s ease, background .35s ease;
}

.service-card-3d:hover .service-link b {
  transform: translate(3px,-3px) rotate(4deg);
  background: rgba(78,170,255,.12);
}

.service-card-3d.is-visible {
  animation: serviceCardIn .8s cubic-bezier(.16,1,.3,1) both;
}

@keyframes serviceCardIn {
  from { opacity: 0; transform: translateY(35px) rotateX(5deg); }
  to { opacity: 1; transform: translateY(0) rotateX(0); }
}

@media (max-width: 900px) {
  .service-card-3d { min-height: 470px; }
  .service-content { padding: 24px 22px 22px; }
}

@media (hover: none), (pointer: coarse) {
  .service-card-3d { transform: none !important; }
  .service-card-3d:hover { transform: none; }
  .service-media img { transform: scale(1.03); }
  .service-shine { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .service-card-3d,
  .service-media img,
  .service-shine,
  .service-link b { transition: none !important; animation: none !important; }
}

/* =========================================================
   PROJECT VISUAL LIBRARY — ADVANCED 3D GALLERY
   ========================================================= */
.projects-page .project-hero {
  min-height: 78vh;
  display: grid;
  align-items: center;
  overflow: hidden;
  position: relative;
}
.projects-page .project-hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  align-items: center;
  gap: 40px;
}
.projects-page .project-hero h1 {
  font-size: clamp(58px, 8vw, 128px);
  line-height: .86;
  letter-spacing: -.055em;
  margin: 24px 0;
  max-width: 900px;
}
.projects-page .project-hero h1 em { color: #8fc7ff; font-style: normal; }
.projects-page .project-hero p { max-width: 650px; color: #aeb8c7; font-size: 18px; line-height: 1.75; }
.project-hero-meta { display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.project-hero-meta span { border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.035); padding:9px 12px; border-radius:999px; color:#8d99a9; font-size:10px; letter-spacing:.16em; }
.project-hero-orb { width:330px; height:330px; border-radius:50%; border:1px solid rgba(126,190,255,.2); box-shadow: inset 0 0 80px rgba(81,157,255,.08), 0 0 120px rgba(81,157,255,.08); transform: perspective(700px) rotateX(62deg) rotateZ(-18deg); position:relative; }
.project-hero-orb::before,.project-hero-orb::after { content:""; position:absolute; inset:12%; border-radius:50%; border:1px solid rgba(255,255,255,.1); transform:translateZ(40px); }
.project-hero-orb::after { inset:27%; border-color:rgba(126,190,255,.28); box-shadow:0 0 50px rgba(126,190,255,.12); }
.project-showcase { position:relative; overflow:hidden; }
.project-showcase::before { content:""; position:absolute; width:700px; height:700px; left:-280px; top:15%; border-radius:50%; background:radial-gradient(circle,rgba(68,155,255,.08),transparent 68%); pointer-events:none; }
.project-section-head { align-items:end; margin-bottom:48px; }
.project-section-head h2 { font-size:clamp(48px,6vw,86px); line-height:.9; letter-spacing:-.05em; }
.project-section-head h2 span { color:#7fbaff; }
.project-section-head p { max-width:480px; }
.project-gallery { display:grid; grid-template-columns:repeat(12,1fr); gap:20px; perspective:1600px; }
.project-card { grid-column:span 6; min-width:0; position:relative; border:1px solid rgba(255,255,255,.11); border-radius:26px; background:linear-gradient(145deg,rgba(20,30,42,.92),rgba(7,11,17,.98)); overflow:hidden; box-shadow:0 25px 80px rgba(0,0,0,.28); transform:perspective(1200px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition:transform .45s cubic-bezier(.2,.75,.2,1),border-color .35s,box-shadow .35s; transform-style:preserve-3d; will-change:transform; }
.project-card-large { grid-column:span 7; }
.project-card-wide { grid-column:span 5; }
.project-card:hover { border-color:rgba(127,186,255,.4); box-shadow:0 35px 100px rgba(0,0,0,.42),0 0 50px rgba(70,150,255,.08); }
.project-media { height:clamp(300px,38vw,520px); position:relative; overflow:hidden; isolation:isolate; }
.project-card:not(.project-card-large):not(.project-card-wide) .project-media { height:clamp(300px,31vw,430px); }
.project-media img { width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.035); transition:transform .7s cubic-bezier(.2,.75,.2,1),filter .45s; filter:saturate(.92) contrast(1.02); will-change:transform; }
.project-card:hover .project-media img { filter:saturate(1.08) contrast(1.05); }
.project-media::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(3,7,12,.02) 30%,rgba(3,7,12,.15) 55%,rgba(3,7,12,.88) 100%); z-index:1; pointer-events:none; }
.project-scan { position:absolute; inset:0; z-index:2; opacity:var(--shine-opacity,0); background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(166,218,255,.24),transparent 22%),linear-gradient(115deg,transparent 35%,rgba(255,255,255,.08) 48%,transparent 60%); mix-blend-mode:screen; transition:opacity .35s; pointer-events:none; }
.project-media::before { content:""; position:absolute; inset:16px; border:1px solid rgba(255,255,255,.14); z-index:3; border-radius:15px; pointer-events:none; }
.project-no { position:absolute; z-index:4; top:28px; left:30px; font-size:11px; letter-spacing:.2em; color:#fff; padding:8px 10px; border:1px solid rgba(255,255,255,.18); background:rgba(4,8,13,.36); backdrop-filter:blur(12px); border-radius:8px; }
.project-corner { position:absolute; z-index:4; top:29px; right:30px; font-size:9px; letter-spacing:.16em; color:rgba(255,255,255,.68); }
.project-card-info { display:flex; justify-content:space-between; gap:22px; padding:24px 26px 28px; transform:translateZ(20px); }
.project-card-info small { font-size:9px; letter-spacing:.2em; color:#78b7ff; }
.project-card-info h3 { margin:8px 0 7px; font-size:27px; letter-spacing:-.035em; }
.project-card-info p { margin:0; color:#8f9aaa; line-height:1.65; max-width:620px; }
.project-arrow { width:44px; height:44px; flex:0 0 auto; border:1px solid rgba(255,255,255,.14); border-radius:50%; display:grid; place-items:center; color:#fff; transition:transform .35s,border-color .35s,background .35s; }
.project-card:hover .project-arrow { transform:translate(3px,-3px); border-color:rgba(127,186,255,.55); background:rgba(127,186,255,.08); }
.project-data-section { overflow:hidden; }
.project-data-grid { display:grid; grid-template-columns:1fr .9fr; gap:80px; align-items:center; }
.project-data-copy h2 { font-size:clamp(50px,6vw,88px); line-height:.9; letter-spacing:-.055em; margin:20px 0; }
.project-data-copy h2 span { color:#7fbaff; }
.project-data-copy p { max-width:600px; color:#9da8b7; line-height:1.8; font-size:17px; }
.project-data-stack { min-height:500px; position:relative; display:grid; grid-template-columns:1fr 1fr; gap:12px; align-content:center; }
.data-orbit { position:absolute; width:390px; height:390px; left:50%; top:50%; transform:translate(-50%,-50%) rotateX(68deg); border:1px solid rgba(127,186,255,.2); border-radius:50%; box-shadow:0 0 90px rgba(80,150,255,.08); pointer-events:none; }
.data-orbit::before,.data-orbit::after { content:""; position:absolute; inset:22px; border:1px solid rgba(255,255,255,.08); border-radius:50%; }
.data-orbit::after { inset:90px; border-color:rgba(127,186,255,.18); }
.data-item { position:relative; z-index:2; min-height:125px; padding:20px; border:1px solid rgba(255,255,255,.1); border-radius:18px; background:rgba(9,15,23,.78); backdrop-filter:blur(15px); box-shadow:0 20px 50px rgba(0,0,0,.22); transition:transform .35s,border-color .35s; }
.data-item:hover { transform:translateY(-5px); border-color:rgba(127,186,255,.38); }
.data-item b { font-size:10px; color:#72b4ff; letter-spacing:.16em; }
.data-item span { display:block; margin-top:12px; font-size:16px; font-weight:800; letter-spacing:.08em; }
.data-item small { display:block; margin-top:6px; color:#778394; }
@media (max-width:900px){
  .projects-page .project-hero-inner,.project-data-grid { grid-template-columns:1fr; }
  .project-hero-orb { display:none; }
  .project-card,.project-card-large,.project-card-wide { grid-column:1/-1; }
  .project-media,.project-card:not(.project-card-large):not(.project-card-wide) .project-media { height:clamp(300px,68vw,560px); }
  .project-data-grid { gap:30px; }
}
@media (max-width:640px){
  .projects-page .project-hero { min-height:70vh; }
  .projects-page .project-hero h1 { font-size:52px; }
  .project-gallery { gap:14px; }
  .project-card { border-radius:20px; }
  .project-media,.project-card:not(.project-card-large):not(.project-card-wide) .project-media { height:320px; }
  .project-card-info { padding:20px; }
  .project-card-info h3 { font-size:23px; }
  .project-data-stack { min-height:420px; }
  .data-orbit { width:300px; height:300px; }
}

/* Mobile responsive fixes for the Core Services heading/content */
@media (max-width: 900px) {
  .service-section .section-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    align-items: start;
  }

  .service-section .section-head > div,
  .service-section .section-head > p {
    min-width: 0;
    width: 100%;
    max-width: none;
  }

  .service-section .section-head h2 {
    width: 100%;
    max-width: 100%;
    margin: 0;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
    font-size: clamp(48px, 11vw, 82px);
    line-height: .92;
    letter-spacing: -.045em;
  }

  .service-section .section-head p {
    margin: 0;
    font-size: clamp(18px, 4.2vw, 24px);
    line-height: 1.55;
  }
}

@media (max-width: 600px) {
  .service-section {
    overflow: hidden;
  }

  .service-section .container {
    width: min(100% - 40px, 680px);
    margin-inline: auto;
  }

  .service-section .section-head {
    gap: 24px;
  }

  .service-section .section-kicker {
    white-space: normal;
    font-size: 12px;
    line-height: 1.35;
    letter-spacing: .18em;
  }

  .service-section .section-head h2 {
    font-size: clamp(44px, 15vw, 68px);
    line-height: .9;
    letter-spacing: -.05em;
  }

  .service-section .section-head p {
    font-size: 18px;
    line-height: 1.55;
    max-width: 34rem;
  }

  .service-section .service-grid {
    grid-template-columns: 1fr;
  }
}
/* =========================================================
   ROOF PLAN CLIENT UPDATE — SMOKE HERO / LIGHT BLUE BRAND
   ========================================================= */
:root {
  --bg: #07111b;
  --panel: #0b1723;
  --panel2: #102234;
  --blue: #55c4ff;
  --blue2: #168be8;
  --accent: #55c4ff;
  --accent2: #39aef5;
  --muted: #a8bacb;
}

body,
body.cinematic {
  background:
    radial-gradient(circle at 76% 8%, rgba(60, 177, 240, 0.16), transparent 30%),
    radial-gradient(circle at 18% 48%, rgba(32, 116, 185, 0.10), transparent 34%),
    linear-gradient(180deg, #07111b 0%, #091722 48%, #06101a 100%);
}

.nav {
  background: linear-gradient(180deg, rgba(4, 13, 21, 0.94), rgba(4, 13, 21, 0.60));
  border-bottom-color: rgba(85, 196, 255, 0.14);
}

.brand-logo {
  width: 190px;
  height: 52px;
}

.brand-logo img {
  width: 190px;
  max-height: 52px;
}

body.cinematic .brand-logo img {
  height: 38px;
  width: auto;
}

.footer-inner img {
  width: 160px;
}

.hero-3d {
  background:
    radial-gradient(circle at 75% 48%, rgba(48, 177, 239, 0.13), transparent 34%),
    linear-gradient(135deg, rgba(9, 25, 39, 0.98), rgba(4, 12, 20, 0.98));
}

.hero-3d::before {
  opacity: .35;
}

.hero-copy h1 em {
  color: #65caff;
  background: linear-gradient(90deg, #65caff, #a8e5ff);
  -webkit-background-clip: text;
  background-clip: text;
}

.eyebrow,
.section-kicker,
.visual-tag,
.hero-meta strong,
.service-link,
.process-step > span {
  color: #62caff;
}

.model-stage.smoke-stage {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 48%, rgba(67, 192, 255, .13), transparent 38%),
    #02080d;
  border: 1px solid rgba(91, 199, 255, .20);
  box-shadow: 0 35px 90px rgba(0, 0, 0, .42), inset 0 0 80px rgba(58, 180, 236, .07);
}

.smoke-intro-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: .98;
  filter: saturate(.95) contrast(1.04) brightness(.98);
  mix-blend-mode: screen;
  transform: scale(1.02);
}

.smoke-stage-glow {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 52%, rgba(70, 190, 255, .12), transparent 33%),
    linear-gradient(90deg, rgba(3, 12, 19, .44), transparent 28%, transparent 72%, rgba(3, 12, 19, .44)),
    linear-gradient(180deg, rgba(3, 10, 16, .10), transparent 55%, rgba(3, 10, 16, .50));
}

.smoke-stage-ui,
.smoke-stage-caption {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.smoke-stage-ui {
  top: 24px;
  left: 26px;
  right: 26px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  color: rgba(213, 243, 255, .82);
  font-size: 10px;
  font-weight: 800;
}

.smoke-stage-ui i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #62caff;
  box-shadow: 0 0 18px rgba(98, 202, 255, .85);
}

.smoke-stage-caption {
  left: 26px;
  bottom: 24px;
  display: grid;
  gap: 5px;
}

.smoke-stage-caption b {
  color: #f2fbff;
  font-size: 11px;
}

.smoke-stage-caption span {
  color: #76cfff;
  font-size: 9px;
  font-weight: 700;
}

.section,
.visual-panel,
.final-card,
.panel-card,
.process-step,
.service-card {
  border-color: rgba(83, 185, 236, .12);
}

.btn.primary {
  background: linear-gradient(135deg, #57c8ff, #198ce4);
  color: #03101a;
  box-shadow: 0 12px 35px rgba(55, 176, 239, .20);
}

.btn.glass {
  border-color: rgba(91, 201, 255, .28);
  background: rgba(65, 171, 222, .08);
}

@media (max-width: 700px) {
  .brand-logo,
  .brand-logo img {
    width: 145px;
    max-height: 42px;
  }

  body.cinematic .brand-logo img {
    height: 34px;
  }

  .footer-inner img {
    width: 135px;
  }

  .smoke-stage-ui {
    top: 18px;
    left: 18px;
    right: 18px;
    font-size: 8px;
  }

  .smoke-stage-caption {
    left: 18px;
    bottom: 18px;
  }
}


/* =========================================================
   PROJECTS — MOBILE-FIRST REFINEMENT
   Fixes the project-library heading collapse and improves
   spacing, readability, touch behavior and mobile rendering.
   ========================================================= */
@media (max-width: 900px) {
  .projects-page .project-showcase .project-section-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    gap: 22px;
    align-items: start;
    margin-bottom: 34px;
  }

  .projects-page .project-section-head > div,
  .projects-page .project-section-head > p {
    width: 100%;
    min-width: 0;
    max-width: none;
  }

  .projects-page .project-section-head h2 {
    width: 100%;
    max-width: none;
    font-size: clamp(50px, 11vw, 82px);
    line-height: .9;
    letter-spacing: -.055em;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }

  .projects-page .project-section-head p {
    margin: 0;
    font-size: 17px;
    line-height: 1.65;
  }

  .projects-page .project-gallery {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    perspective: none;
  }

  .projects-page .project-card,
  .projects-page .project-card-large,
  .projects-page .project-card-wide {
    grid-column: 1 / -1;
    transform: none !important;
    will-change: auto;
  }

  .projects-page .project-media,
  .projects-page .project-card:not(.project-card-large):not(.project-card-wide) .project-media {
    height: min(68vw, 460px);
    min-height: 280px;
  }

  .projects-page .project-media img {
    transform: scale(1.02) !important;
    will-change: auto;
  }

  .projects-page .project-scan {
    display: none;
  }

  .projects-page .project-media::before {
    inset: 12px;
    border-radius: 12px;
  }

  .projects-page .project-no {
    top: 20px;
    left: 20px;
    padding: 7px 9px;
    font-size: 10px;
  }

  .projects-page .project-corner {
    top: 21px;
    right: 20px;
    max-width: 48%;
    text-align: right;
    line-height: 1.35;
    font-size: 8px;
  }

  .projects-page .project-card-info {
    padding: 19px 20px 22px;
    gap: 16px;
    transform: none;
  }

  .projects-page .project-card-info small {
    font-size: 8px;
  }

  .projects-page .project-card-info h3 {
    font-size: clamp(21px, 5.8vw, 28px);
    line-height: 1.05;
    margin: 7px 0;
  }

  .projects-page .project-card-info p {
    font-size: 14px;
    line-height: 1.6;
  }

  .projects-page .project-arrow {
    width: 40px;
    height: 40px;
  }

  .projects-page .project-data-grid {
    gap: 26px;
  }

  .projects-page .project-data-copy h2 {
    font-size: clamp(48px, 11vw, 78px);
  }

  .projects-page .project-data-copy p {
    font-size: 15px;
    line-height: 1.7;
  }
}

@media (max-width: 600px) {
  .projects-page .project-showcase .container,
  .projects-page .project-data-section .container {
    width: min(100% - 32px, var(--max));
  }

  .projects-page .project-section-head {
    gap: 18px;
    margin-bottom: 28px;
  }

  .projects-page .project-section-head h2 {
    font-size: clamp(44px, 14.5vw, 68px);
    line-height: .88;
  }

  .projects-page .project-section-head p {
    font-size: 16px;
    line-height: 1.6;
  }

  .projects-page .project-gallery {
    gap: 12px;
  }

  .projects-page .project-card {
    border-radius: 18px;
  }

  .projects-page .project-media,
  .projects-page .project-card:not(.project-card-large):not(.project-card-wide) .project-media {
    height: clamp(235px, 64vw, 330px);
    min-height: 0;
  }

  .projects-page .project-media::after {
    background: linear-gradient(180deg, rgba(3,7,12,.02) 25%, rgba(3,7,12,.12) 52%, rgba(3,7,12,.82) 100%);
  }

  .projects-page .project-no {
    top: 15px;
    left: 15px;
  }

  .projects-page .project-corner {
    top: 17px;
    right: 15px;
    font-size: 7px;
  }

  .projects-page .project-media::before {
    inset: 10px;
  }

  .projects-page .project-card-info {
    padding: 17px 17px 19px;
  }

  .projects-page .project-card-info p {
    font-size: 13.5px;
    line-height: 1.55;
  }

  .projects-page .project-arrow {
    width: 36px;
    height: 36px;
    font-size: 14px;
  }

  .projects-page .project-data-stack {
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 8px 0;
  }

  .projects-page .data-orbit {
    width: min(78vw, 300px);
    height: min(78vw, 300px);
  }

  .projects-page .data-item {
    min-height: 104px;
    padding: 17px;
  }

  .projects-page .final-card {
    gap: 24px;
  }
}

@media (max-width: 420px) {
  .projects-page .project-section-head h2 {
    font-size: 42px;
  }

  .projects-page .project-media,
  .projects-page .project-card:not(.project-card-large):not(.project-card-wide) .project-media {
    height: 250px;
  }

  .projects-page .project-corner {
    max-width: 43%;
  }

  .projects-page .project-card-info {
    gap: 10px;
  }
}

@media (hover: none), (pointer: coarse) {
  .projects-page .project-card:hover {
    border-color: rgba(255,255,255,.11);
    box-shadow: 0 25px 70px rgba(0,0,0,.24);
  }

  .projects-page .project-card:hover .project-media img {
    filter: saturate(.92) contrast(1.02);
  }

  .projects-page .project-card:hover .project-arrow {
    transform: none;
    border-color: rgba(255,255,255,.14);
    background: transparent;
  }
}

/* ===== 3D GLB hero ===== */
.model-stage.smoke-stage{position:relative;overflow:hidden}
.hero-glb{position:absolute;inset:0;width:100%;height:100%;z-index:4;opacity:0;pointer-events:none;transition:opacity 1.4s cubic-bezier(.2,.7,.2,1)}
.hero-glb.ready{opacity:1}
.smoke-stage .smoke-intro-video{transition:opacity 1.6s ease,filter 1.6s ease}
.smoke-stage.glb-on .smoke-intro-video{opacity:0}
.smoke-stage .smoke-stage-ui,.smoke-stage .smoke-stage-caption{z-index:5}

/* ===== Smooth image loading ===== */
.img-smooth{opacity:0;filter:blur(14px);transform:scale(1.04);transition:opacity .9s cubic-bezier(.2,.7,.2,1),filter 1s cubic-bezier(.2,.7,.2,1),transform 1.2s cubic-bezier(.2,.7,.2,1);will-change:opacity,filter,transform}
.img-smooth.is-loaded{opacity:1;filter:none;transform:none}
.img-skeleton{position:relative;background:linear-gradient(110deg,#0c1119 30%,#161e2b 50%,#0c1119 70%);background-size:220% 100%;animation:imgShimmer 1.4s linear infinite}
@keyframes imgShimmer{to{background-position:-220% 0}}
@media (prefers-reduced-motion:reduce){.img-smooth{transition:opacity .3s;filter:none;transform:none}.img-skeleton{animation:none}}

/* ===== Match 3D stage to website palette + smoother video ===== */
.model-stage.smoke-stage{background:radial-gradient(ellipse at 50% 45%,#0b1a2b 0%,#05080d 70%)}
.hero-glb{-webkit-mask-image:radial-gradient(ellipse 78% 82% at 50% 50%,#000 55%,transparent 100%);mask-image:radial-gradient(ellipse 78% 82% at 50% 50%,#000 55%,transparent 100%)}
.smoke-stage .smoke-intro-video{filter:none;mix-blend-mode:normal;transform:translateZ(0) scale(1.02);backface-visibility:hidden;will-change:opacity;-webkit-mask-image:radial-gradient(ellipse 85% 85% at 50% 50%,#000 60%,transparent 100%);mask-image:radial-gradient(ellipse 85% 85% at 50% 50%,#000 60%,transparent 100%)}
.smoke-stage .smoke-intro-video,.hero-glb{transition:opacity 1.6s cubic-bezier(.4,0,.2,1)}


/* ===== Client changes 28 Sep ===== */
.mrc .w{color:#fff;-webkit-text-fill-color:#fff;background:none}
.mrc .b{color:#2f8cff;-webkit-text-fill-color:#2f8cff;background:none}
/* logo animation loops continuously (3D building removed) */
.smoke-stage .smoke-intro-video{opacity:.98}
.process-step p{font-size:13.5px}
.service-content p{font-size:14px;line-height:1.6}

/* longer service copy: taller cards + stronger fade so text stays readable */
.service-card-3d{min-height:640px}
.service-card-3d::before{background:linear-gradient(180deg,rgba(3,7,12,.04) 0%,rgba(3,7,12,.55) 32%,rgba(3,7,12,.96) 62%)}
.service-content p{max-width:none;font-size:13.5px;line-height:1.6}
@media (max-width:900px){.service-card-3d{min-height:680px}}
@media (max-width:520px){.service-card-3d{min-height:760px}}


/* Final landing-page hero typography */
.hero-copy h1 {
  max-width: 690px;
  font-size: clamp(46px, 5.4vw, 78px);
  line-height: 0.98;
  letter-spacing: -0.055em;
  font-weight: 800;
  color: #f7fbff;
  text-wrap: balance;
  margin: 0 0 24px;
  text-shadow: 0 10px 38px rgba(0, 0, 0, .38);
}
.hero-copy h1 em {
  display: inline;
  font-style: normal;
  color: #66caff;
  background: linear-gradient(100deg, #77d2ff 0%, #39a9f5 55%, #b6eaff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-copy p { margin-top: 0; }
@media (max-width: 900px) {
  .hero-copy h1 { font-size: clamp(42px, 8.5vw, 68px); line-height: 1.02; }
}
@media (max-width: 560px) {
  .hero-copy h1 { font-size: clamp(36px, 10vw, 52px); line-height: 1.04; letter-spacing: -.045em; }
}

/* ===== Fix: keep the hero CTA fully visible above the fold ===== */
@media (min-width: 901px) {
  .hero-3d {
    min-height: max(760px, 100svh);
    height: auto;
    padding: 0 0 60px;
    overflow: hidden;
  }

  .hero-3d .hero-copy {
    top: clamp(108px, 15vh, 148px);
    left: max(24px, calc((100vw - 1540px) / 2));
    width: min(700px, calc(50vw - 72px));
    max-width: 700px;
  }

  .hero-3d .hero-copy h1 {
    font-size: clamp(44px, 4.15vw, 66px);
    line-height: 1.02;
    letter-spacing: -0.052em;
    margin: 0 0 20px;
    max-width: 700px;
  }

  .hero-3d .hero-copy p {
    max-width: 590px;
    font-size: 16px;
    line-height: 1.6;
    margin: 0;
  }

  .hero-3d .hero-actions {
    position: relative;
    z-index: 20;
    display: flex;
    margin-top: 24px;
    padding-bottom: 8px;
  }

  .hero-3d .hero-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 15px 24px;
    font-size: 14px;
    line-height: 1.2;
    white-space: nowrap;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
}

@media (max-width: 900px) {
  .hero-3d {
    overflow: visible;
    padding-bottom: 28px;
  }

  .hero-3d .hero-copy {
    margin-bottom: 0;
  }

  .hero-3d .hero-actions {
    position: relative;
    z-index: 20;
    padding-bottom: 6px;
  }

  .hero-3d .hero-actions .btn {
    min-height: 48px;
    font-size: 13px;
    line-height: 1.2;
    opacity: 1;
    visibility: visible;
  }
}

/* FINAL CTA: keep heading words intact and prevent awkward letter wrapping */
.final-card > div:first-child {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
}

.final-card h2 {
  width: 100%;
  max-width: 100%;
  font-size: clamp(38px, 4.2vw, 64px);
  line-height: 1.08;
  letter-spacing: -0.045em;
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none;
  white-space: normal;
  text-wrap: balance;
}

.final-card > .btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

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

  .final-card > div:first-child {
    width: 100%;
  }

  .final-card h2 {
    font-size: clamp(36px, 6.2vw, 56px);
  }
}

@media (max-width: 600px) {
  .final-card h2 {
    font-size: clamp(32px, 8vw, 44px);
    line-height: 1.1;
    letter-spacing: -0.035em;
  }

  .final-card > .btn {
    max-width: 100%;
  }
}

/* ===== Final responsive typography fix: prevent mid-word wrapping ===== */
.hero-3d .hero-copy,
.hero-3d .hero-copy h1,
.final-card,
.final-card > div:first-child,
.final-card h2 {
  min-width: 0;
}

.hero-3d .hero-copy h1,
.final-card h2 {
  word-break: keep-all;
  overflow-wrap: normal;
  hyphens: none;
  -webkit-hyphens: none;
  white-space: normal;
}

/* Give the final CTA heading its own full row before the button can squeeze it. */
@media (max-width: 1100px) {
  .final-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 26px;
  }
  .final-card > div:first-child {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
  }
  .final-card h2 {
    display: block;
    width: 100%;
    max-width: 100%;
    font-size: clamp(30px, 5.4vw, 58px);
    line-height: 1.12;
    letter-spacing: -0.035em;
    text-wrap: pretty;
  }
  .final-card > .btn {
    align-self: flex-start;
    flex: 0 0 auto;
    max-width: 100%;
  }
}

@media (max-width: 600px) {
  .hero-3d .hero-copy {
    width: auto;
    max-width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }
  .hero-3d .hero-copy h1 {
    max-width: 100%;
    font-size: clamp(30px, 8.2vw, 42px);
    line-height: 1.12;
    letter-spacing: -0.03em;
    text-wrap: pretty;
  }
  .hero-3d .hero-copy p {
    max-width: 100%;
    font-size: 15px;
    line-height: 1.65;
  }
  .hero-3d .hero-actions .btn {
    max-width: 100%;
    white-space: nowrap;
  }
  .final-cta {
    padding: 64px 0 76px;
  }
  .final-card {
    padding: 28px 20px;
    gap: 22px;
  }
  .final-card h2 {
    font-size: clamp(27px, 7.6vw, 38px);
    line-height: 1.14;
    letter-spacing: -0.025em;
  }
  .final-card > .btn {
    width: auto;
    min-width: 0;
    min-height: 48px;
    padding: 14px 20px;
  }
}


/* ===== Client changes 28 Sep (2): words stay whole + smaller hero animation ===== */

/* Letters animate individually but each word is an unbreakable unit,
   so a line can only wrap between words (never mid-word). */
.char-word,
.hero-word {
  display: inline-block;
  white-space: nowrap;
}
h2 .char,
h1 .char,
.hero-char {
  display: inline-block;
}
h1, h2 {
  word-break: keep-all;
  overflow-wrap: normal;
  hyphens: none;
  -webkit-hyphens: none;
}

/* Desktop: animation sits in its own column to the right so text never overlaps it */
@media (min-width: 901px) {
  .hero-3d .model-stage.smoke-stage {
    width: min(42vw, 620px);
    height: min(560px, calc(100vh - 220px));
    min-height: 420px;
    margin: 120px max(24px, calc((100vw - 1540px) / 2)) 0 auto;
    border-radius: 28px;
  }
}

/* Tablet / phone: smaller animation below the text */
@media (max-width: 900px) {
  .hero-3d .model-stage.smoke-stage {
    width: min(100% - 40px, 460px);
    height: 300px;
    min-height: 300px;
    margin: 24px auto 0;
    border-radius: 22px;
  }
}
@media (max-width: 560px) {
  .hero-3d .model-stage.smoke-stage {
    width: calc(100% - 40px);
    height: 240px;
    min-height: 240px;
  }
  /* Slightly smaller headings so full words fit on a phone line */
  .hero-3d .hero-copy h1 {
    font-size: clamp(28px, 7.6vw, 38px);
    letter-spacing: -0.03em;
  }
  h2 {
    font-size: clamp(26px, 7.4vw, 36px);
  }
  .final-card h2 {
    font-size: clamp(25px, 7vw, 34px);
  }
}


/* About page copy and client-requested blue/white heading treatment */
.about-page-copy h2 {
  max-width: 680px;
  color: #f5f8fc;
  font-size: clamp(38px, 4.8vw, 68px);
  line-height: 1.04;
  letter-spacing: -.045em;
  text-wrap: balance;
}
.about-page-copy h2 span {
  color: #58b9ff;
}
.about-page-copy p {
  max-width: 600px;
  color: rgba(225, 234, 245, .78);
}
.about-page-visual .about-image img {
  object-position: center;
}
@media (max-width: 620px) {
  .about-page-copy h2 {
    font-size: clamp(32px, 9vw, 46px);
    line-height: 1.1;
    letter-spacing: -.035em;
  }
  .about-page-copy p {
    font-size: 15px;
    line-height: 1.65;
  }
}

/* Final client wording: blue/white Maintain / React / Create treatment */
.page-hero h1 .mrc, .about-page-copy h2 .mrc { color: inherit; }
.page-hero h1 .mrc .w, .about-page-copy h2 .mrc .w { color: #f5f8fc; }
.page-hero h1 .mrc .b, .about-page-copy h2 .mrc .b { color: #56b8ff; }