:root{--ink:#02061d;--navy:#070b56;--blue:#0b6fff;--cyan:#13dff2;--white:#f7fbff;--muted:#aab6d5;--line:rgba(255,255,255,.14)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden!important;max-width:100vw!important;background:#02061d!important;background-color:#02061d!important}
body{margin:0;background:#02061d!important;background-color:#02061d!important;color:var(--white);font-family:'Alexandria',Arial,sans-serif;overflow-x:hidden!important;max-width:100vw!important;width:100%!important}

/* BUBBLE BACKGROUND SITS SAFELY BEHIND CONTENT */


/* CONTAINER - STRICT FIT NO OVERFLOW */
.cv-wrap{width:100%!important;max-width:1320px!important;margin:0 auto!important;padding:0 20px!important;box-sizing:border-box!important}

/* REMOVE UNWANTED BACKGROUND OVERLAYS ON HOMEPAGE SECTIONS ONLY */
.cv-section,
.cv-section.blue,
.cv-marquee,
.cv-proof,
#technologies,
#portfolio,
#services,
#process,
.guidelines-section,
.cv-cta,
.cv-section:before,
.cv-section:after,
.cv-hero:before,
.hero-bg-overlay,
#technologies:before,
#technologies:after,
#portfolio:before,
#portfolio:after,
#services:before,
#services:after,
#process:before,
#process:after,
.guidelines-section:before,
.guidelines-section:after{
  background-color:transparent!important;
}
.cv-hero:before,.hero-bg-overlay{display:none!important}

/* HERO SECTION - SPACIOUS & LUXURY */
.cv-hero{min-height:82svh;position:relative;display:grid;align-items:end;padding:140px 0 70px;box-sizing:border-box}
.cv-hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(0.75) contrast(1.1)}
.cv-hero:after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 90%, rgba(2,5,22,0.4) 0%, rgba(2,5,22,0.92) 100%);pointer-events:none;display:block!important}
.cv-hero-copy{position:relative;z-index:2;max-width:850px}
.cv-hero-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 16px;border-radius:99px;background:rgba(0,240,255,0.09);border:1px solid rgba(0,240,255,0.3);color:#00f0ff;font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;margin-bottom:18px}
.cv-hero-badge span{width:6px;height:6px;border-radius:50%;background:#00f0ff;box-shadow:0 0 10px #00f0ff}
.eyebrow{color:var(--cyan);font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase}
.cv-hero h1{font-size:clamp(36px,5.4vw,72px);line-height:1.02;letter-spacing:-.03em;margin:16px 0 20px;font-weight:900}
.cv-hero h1 span{color:transparent;-webkit-text-stroke:1.8px #00f0ff;text-shadow:0 0 35px rgba(0,240,255,0.4)}
.cv-hero p{font-size:clamp(15px,1.4vw,18.5px);line-height:1.65;color:#d8e2fd;max-width:640px;margin:0}
.cv-actions{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:10px;padding:12px 26px;border-radius:99px;text-decoration:none;font-weight:700;font-size:13.5px;letter-spacing:0.04em;transition:all .3s ease}
.btn-primary{background:#00f0ff;color:#020516;box-shadow:0 4px 25px rgba(0,240,255,0.35)}
.btn-primary:hover{background:#38f3ff;transform:translateY(-2px);box-shadow:0 8px 35px rgba(0,240,255,0.5);color:#020516}
.btn-ghost{border:1px solid rgba(255,255,255,0.2);color:#fff;background:rgba(255,255,255,0.05);backdrop-filter:blur(10px)}
.btn-ghost:hover{background:rgba(255,255,255,0.14);border-color:rgba(255,255,255,0.4);color:#fff;transform:translateY(-2px)}

/* MARQUEE */
.cv-marquee{overflow:hidden;border-block:1px solid rgba(255,255,255,0.08);padding:16px 0;background:rgba(2,5,22,0.85)!important;backdrop-filter:blur(10px)}
.cv-marquee div{display:flex;width:max-content;gap:36px;animation:marquee 26s linear infinite;font-size:11.5px;font-weight:700;letter-spacing:.18em;color:#c1cef2}
.cv-marquee span:before{content:"✦";color:var(--cyan);margin-right:36px}
@keyframes marquee{to{transform:translateX(-50%)}}

/* CV SECTIONS - GENEROUS & BREATHABLE PADDING */
.cv-section{padding:95px 0 85px!important;position:relative;box-sizing:border-box}

/* SECTION HEADINGS - CENTERED LUXURY EDITORIAL HIERARCHY */
.cv-head{display:flex!important;justify-content:space-between!important;align-items:flex-end!important;gap:36px!important;margin-bottom:28px!important}
.cv-head h2{font-size:clamp(22px,2.4vw,32px)!important;line-height:1.15!important;letter-spacing:-.02em!important;color:#fff!important;margin:6px 0 0!important;font-weight:800!important}
.cv-head p{color:#aab8dd!important;font-size:13.5px!important;line-height:1.6!important;max-width:520px!important;margin:0!important}
.cv-head-center{text-align:center;max-width:820px;margin:0 auto 36px;display:flex;flex-direction:column;align-items:center}
.cv-pill-tag{display:inline-flex;align-items:center;gap:8px;padding:6px 18px;border-radius:999px;background:rgba(0,240,255,0.08);border:1px solid rgba(0,240,255,0.25);color:#00f0ff;font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;margin-bottom:16px}
.cv-head-center h2{font-size:clamp(22px,2.4vw,32px)!important;line-height:1.15!important;letter-spacing:-.025em!important;color:#fff!important;margin:0 0 12px!important;font-weight:800!important}
.cv-head-center h2 span{color:#00f0ff;background:linear-gradient(135deg,#00f0ff 0%,#0099ff 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.cv-head-center p{color:#aab8dd!important;font-size:14px!important;line-height:1.6!important;max-width:600px!important;margin:0 auto!important}

/* FULL-PAGE VISUAL FEATURE & IMPACT SHOWCASE */
.cv-showcase-section{position:relative;padding:120px 0 110px;margin:40px 0;overflow:hidden;background:#02071d;border-top:1px solid rgba(0,240,255,0.18);border-bottom:1px solid rgba(0,240,255,0.18);box-shadow:0 0 80px rgba(0,10,50,0.9) inset}
.cv-showcase-bg{position:absolute;inset:0;z-index:1;overflow:hidden}
.cv-showcase-img{width:100%;height:100%;object-fit:cover;object-position:center 30%;opacity:0.38;filter:saturate(1.2) contrast(1.1);transform:scale(1.03);transition:transform 10s ease-out}
.cv-showcase-section:hover .cv-showcase-img{transform:scale(1.08)}
.cv-showcase-overlay{position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(2,6,29,0.65) 0%,rgba(2,6,29,0.94) 80%,#02061d 100%);pointer-events:none}
.cv-showcase-content{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center}
.cv-showcase-inner{max-width:960px;margin:0 auto;display:flex;flex-direction:column;align-items:center}
.cv-showcase-title{font-size:clamp(32px,5vw,62px);line-height:1.02;font-weight:900;letter-spacing:-.03em;color:#fff;margin:16px 0 20px;text-transform:uppercase}
.cv-showcase-title span{color:transparent;-webkit-text-stroke:1.6px #00f0ff;text-shadow:0 0 35px rgba(0,240,255,0.4)}
.cv-showcase-lead{font-size:clamp(15px,1.3vw,18px);line-height:1.7;color:#d1dcff;max-width:760px;margin:0 auto 48px;font-weight:400}
.cv-metrics-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;width:100%;margin-bottom:45px}
.cv-metric-card{background:rgba(4,12,38,0.72);border:1px solid rgba(255,255,255,0.12);border-radius:18px;padding:24px 18px;backdrop-filter:blur(12px);text-align:left;transition:all .3s ease}
.cv-metric-card:hover{border-color:rgba(0,240,255,0.5);background:rgba(6,18,55,0.85);transform:translateY(-4px);box-shadow:0 12px 30px rgba(0,240,255,0.15)}
.cv-metric-num{font-size:32px;font-weight:900;color:#00f0ff;letter-spacing:-.02em;line-height:1;margin-bottom:8px;font-family:'Alexandria',sans-serif}
.cv-metric-title{font-size:14px;font-weight:700;color:#fff;margin-bottom:6px}
.cv-metric-sub{font-size:12px;color:#92a4cb;line-height:1.45}
.cv-showcase-actions{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}

/* SERVICES SECTION - SPACIOUS 3x2 GRID */
.service-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:16px!important;background:transparent!important;border:none!important;border-radius:0!important;overflow:visible!important}
.service{padding:32px 26px!important;background:linear-gradient(180deg,rgba(5,14,42,0.68) 0%,rgba(2,7,28,0.88) 100%)!important;border:1px solid rgba(255,255,255,0.1)!important;border-radius:18px!important;backdrop-filter:blur(12px)!important;min-height:205px!important;transition:all .35s ease!important;position:relative;overflow:hidden}
.service:hover{background:linear-gradient(180deg,rgba(8,24,68,0.88) 0%,rgba(4,12,42,0.95) 100%)!important;border-color:rgba(0,240,255,0.5)!important;transform:translateY(-5px)!important;box-shadow:0 18px 40px rgba(0,240,255,0.18)!important}
.service i{display:inline-block;color:#00f0ff!important;font-size:11px!important;letter-spacing:.2em!important;font-weight:800!important;text-transform:uppercase;margin-bottom:8px;font-style:normal}
.service h3{font-size:19.5px!important;color:#fff!important;font-weight:700!important;margin:8px 0 10px!important;letter-spacing:-.01em}
.service p{color:#a6b6dc!important;font-size:13.5px!important;line-height:1.65!important;margin:0!important}

/* PROCESS SECTION - REFINED */
.guidelines-section#process{padding:100px 0!important}
.staggered-step{background:linear-gradient(180deg,rgba(5,14,40,0.7) 0%,rgba(2,6,26,0.9) 100%)!important;border:1px solid rgba(255,255,255,0.12)!important;border-radius:18px!important;backdrop-filter:blur(10px)!important;padding:28px 22px!important;transition:all .3s ease!important}
.staggered-step:hover{border-color:#00f0ff!important;transform:translateY(-4px)!important;box-shadow:0 14px 34px rgba(0,240,255,0.18)!important}

/* CTA */
.cv-cta{padding:100px 0!important;text-align:center;background:transparent!important;position:relative}
.cv-cta h2{font-size:clamp(30px,4.2vw,52px);line-height:1.1;margin:16px auto 28px;max-width:820px;font-weight:800}
.cv-footer{padding:36px 0;border-top:1px solid rgba(255,255,255,.1);color:var(--muted);font-size:12.5px;background:transparent!important}
.cv-footer .cv-wrap{display:flex;justify-content:space-between;gap:18px}
.reveal{opacity:0;transform:translateY(22px);transition:.7s}
.reveal.in{opacity:1;transform:none}

/* RESPONSIVE - STRICTLY FIT SCREEN, NO OVERFLOW */
@media(max-width:1200px){
  .tech-grid{grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:10px!important}
  .tech-card{height:165px!important;min-height:165px!important;max-height:165px!important}
  .tech-card img{height:116px!important}
  .tech-card b{font-size:11.5px!important;padding:7px 8px!important}
  .cv-metrics-grid{grid-template-columns:repeat(2,1fr);gap:14px}
}
@media(max-width:950px){
  .cv-head{flex-direction:column!important;align-items:flex-start!important;gap:14px!important;margin-bottom:24px!important}
  .cv-head-center{margin-bottom:30px}
  .tech-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:10px!important}
  .tech-card{height:160px!important;min-height:160px!important;max-height:160px!important}
  .service-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important}
  .cv-metrics-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .cv-showcase-section{padding:90px 0 80px}
}
@media(max-width:650px){
  .cv-wrap{width:100%!important;padding:0 16px!important}
  .cv-hero{padding:110px 0 45px;min-height:auto}
  .cv-hero h1{font-size:34px}
  .cv-section{padding:65px 0 55px!important}
  .cv-head-center h2{font-size:24px!important}
  .tech-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  .tech-card{height:152px!important;min-height:152px!important;max-height:152px!important;border-radius:12px!important}
  .tech-card img{height:108px!important}
  .tech-card b{font-size:11px!important;padding:6px 8px!important}
  .service-grid{grid-template-columns:1fr!important;gap:12px!important}
  .cv-metrics-grid{grid-template-columns:1fr;gap:12px}
  .cv-showcase-section{padding:70px 0 65px}
  .cv-showcase-title{font-size:28px}
  .cv-footer .cv-wrap{flex-direction:column;text-align:center}
  .cv-actions{flex-wrap:wrap}
}

.cv-cases, .cv-statement { display: none !important; }
/* ── MASTER TRANSPARENT NAVBAR & HIDE ON SCROLL DOWN ── */
#navbar,
#navbar.scrolled {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 99999 !important;
  height: 80px !important;
  background: transparent !important;
  background-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease !important;
  will-change: transform, opacity;
}

#navbar.nav-hidden {
  transform: translateY(-115%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.cv-hero {
  padding-top: 180px !important;
}

.nav-inner {
  height: 80px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  max-width: 1400px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  position: relative !important;
  width: 100% !important;
}

.nav-logo-wrap {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer !important;
}

.nav-logo {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-decoration: none !important;
}

.nav-logo-img {
  height: 36px !important;
  width: auto !important;
  object-fit: contain !important;
  filter: drop-shadow(0 2px 10px rgba(0, 240, 255, 0.3)) !important;
}

.nav-logo-text {
  font-family: 'Alexandria', sans-serif !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
  color: #fff !important;
  text-transform: uppercase !important;
}

.brand-switcher-chevron {
  font-size: 10px !important;
  color: #00f0ff !important;
  cursor: pointer !important;
  padding: 4px !important;
  transition: transform 0.3s ease !important;
  user-select: none !important;
}

.nav-logo-wrap.open .brand-switcher-chevron {
  transform: rotate(180deg) !important;
}

/* Ecosystem Brand Switcher Dropdown */
.brand-switcher-menu {
  display: none !important;
  position: absolute !important;
  top: calc(100% + 14px) !important;
  left: 0 !important;
  width: 290px !important;
  background: #090b14 !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 18px !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.95), 0 0 30px rgba(0, 240, 255, 0.15) !important;
  backdrop-filter: blur(25px) !important;
  -webkit-backdrop-filter: blur(25px) !important;
  padding: 10px !important;
  z-index: 100000 !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.brand-switcher-menu::before {
  content: '' !important;
  position: absolute !important;
  top: -24px !important;
  left: 0 !important;
  right: 0 !important;
  height: 24px !important;
  background: transparent !important;
  display: block !important;
}

.nav-logo-wrap:hover .brand-switcher-menu,
.nav-logo-wrap.open .brand-switcher-menu,
.brand-switcher-menu.open {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  animation: navFadeIn 0.2s ease forwards !important;
}

@keyframes navFadeIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.brand-switcher-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 12px !important;
  border-radius: 12px !important;
  text-decoration: none !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid transparent !important;
  transition: all 0.2s ease !important;
}

.brand-switcher-item:hover,
.brand-switcher-item.current {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(0, 240, 255, 0.3) !important;
}

.brand-switcher-logo-img {
  width: 26px !important;
  height: 26px !important;
  object-fit: contain !important;
}

.brand-switcher-name {
  font-family: 'Alexandria', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #fff !important;
  letter-spacing: 0.5px !important;
}

.brand-switcher-item.current .brand-switcher-name {
  color: #00f0ff !important;
}

/* Nav Main Desktop Links */
.nav-main {
  display: flex !important;
  align-items: center !important;
  gap: 28px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.nav-main li {
  list-style: none !important;
  margin: 0 !important;
}

.nav-main a {
  color: rgba(255, 255, 255, 0.78) !important;
  font-family: 'Alexandria', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  letter-spacing: 0.4px !important;
  padding: 6px 0 !important;
  position: relative !important;
  transition: color 0.25s ease !important;
}

.nav-main a:hover,
.nav-main a.active {
  color: #00f0ff !important;
}

.nav-main a.active::after,
.nav-main a:hover::after {
  content: '' !important;
  position: absolute !important;
  bottom: -2px !important;
  left: 0 !important;
  width: 100% !important;
  height: 2px !important;
  background: #00f0ff !important;
  box-shadow: 0 0 10px rgba(0, 240, 255, 0.6) !important;
  border-radius: 2px !important;
}

/* Right CTA Button */
.nav-right {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.nav-cta-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 22px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #00c6f3, #087be8) !important;
  color: #fff !important;
  text-decoration: none !important;
  font-family: 'Alexandria', sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  box-shadow: 0 4px 20px rgba(0, 198, 243, 0.35) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

.nav-cta-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 30px rgba(0, 198, 243, 0.55) !important;
}

/* Hamburger button */
.hamburger {
  display: none;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 5px !important;
  width: 42px !important;
  height: 42px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  padding: 0 !important;
}

.hamburger span {
  display: block !important;
  width: 20px !important;
  height: 2px !important;
  background: #fff !important;
  border-radius: 2px !important;
  transition: transform 0.25s ease, opacity 0.25s ease !important;
}

.hamburger.active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg) !important;
}

.hamburger.active span:nth-child(2) {
  opacity: 0 !important;
}

.hamburger.active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg) !important;
}

/* Mobile Nav Drawer */
.mobile-nav {
  display: none;
}

@media (max-width: 900px) {
  #navbar,
  #navbar.scrolled {
    height: 70px !important;
  }
  .nav-inner {
    height: 70px !important;
    padding: 0 16px !important;
  }
  .nav-main {
    display: none !important;
  }
  .nav-cta-btn {
    display: none !important;
  }
  .hamburger {
    display: flex !important;
  }

  .mobile-nav {
    position: fixed !important;
    top: 70px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(3, 7, 24, 0.98) !important;
    backdrop-filter: blur(25px) !important;
    -webkit-backdrop-filter: blur(25px) !important;
    z-index: 99998 !important;
    overflow-y: auto !important;
    padding: 24px 20px 48px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
  }

  .mobile-nav.open {
    display: block !important;
  }

  .mobile-nav-inner {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  .mobile-nav a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 14px 18px !important;
    color: #fff !important;
    text-decoration: none !important;
    font-family: 'Alexandria', sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    transition: background 0.2s ease !important;
  }

  .mobile-nav a:hover,
  .mobile-nav a.active {
    background: rgba(0, 240, 255, 0.12) !important;
    border-color: rgba(0, 240, 255, 0.3) !important;
    color: #00f0ff !important;
  }

  .mobile-nav .mobile-nav-cta {
    margin-top: 12px !important;
    background: linear-gradient(135deg, #00c6f3, #087be8) !important;
    color: #fff !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    justify-content: center !important;
    border: none !important;
    box-shadow: 0 4px 20px rgba(0, 198, 243, 0.4) !important;
  }

  .brand-switcher-menu {
    width: 280px !important;
    max-width: calc(100vw - 32px) !important;
  }
}

@media (min-width: 901px) {
  .hamburger {
    display: none !important;
  }
  .mobile-nav {
    display: none !important;
  }
  .nav-main {
    display: flex !important;
  }
}

.portfolio-stage{min-height:560px;display:grid;grid-template-columns:1.15fr 1fr 1fr;grid-template-rows:repeat(2,265px);gap:18px;place-items:stretch}.orbit{display:none}.portfolio-core{grid-column:1;grid-row:1/3;width:auto;aspect-ratio:auto;border-radius:28px;padding:58px;text-align:left;place-content:center;background:linear-gradient(145deg,#1016a6,#050735);box-shadow:none}.portfolio-core h2{margin:14px 0}.work-card,.work-card:nth-child(1),.work-card:nth-child(2),.work-card:nth-child(3),.work-card:nth-child(4){position:relative;inset:auto;width:auto;height:auto;border-radius:24px;transform:none}.work-card:nth-of-type(2){background:url('thumbs/thumb_glambot_arm.jpg') center/cover}.work-card:nth-of-type(3){background:url('thumbs/thumb_holobox.webp') center/cover}.work-card video{display:none}.work-card:hover{transform:translateY(-6px);box-shadow:0 18px 50px rgba(6,30,240,.35)}
@media(max-width:1000px){.portfolio-stage{grid-template-columns:repeat(2,1fr);grid-template-rows:auto}.portfolio-core{grid-column:1/-1;grid-row:auto}.work-card{height:280px!important}}
.work-card:after{color:#fff!important;text-shadow:0 2px 14px rgba(0,0,0,.9)}

/* ═══════════════════════════════════════════════════
   PREVIOUS ENGINEERING PROCESS (STAGGERED ROUTE)
   ═══════════════════════════════════════════════════ */
.guidelines-section {
  padding: 85px 0;
  position: relative;
  background: var(--ink);
}

.guidelines-header.section-header-center {
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 45px !important;
  position: relative !important;
}

.sec-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 2.5px !important;
  color: #00e5ff !important;
  text-transform: uppercase !important;
  background: rgba(0, 138, 214, 0.12) !important;
  border: 1px solid rgba(0, 138, 214, 0.35) !important;
  padding: 6px 16px !important;
  border-radius: 30px !important;
  margin-bottom: 12px !important;
  box-shadow: 0 0 15px rgba(0, 138, 214, 0.2) !important;
  position: relative;
  overflow: hidden;
}

.sec-label::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 229, 255, 0.3), transparent);
  animation: labelShine 3s ease infinite;
  pointer-events: none;
}

@keyframes labelShine {
  0%   { left: -100%; }
  50%  { left: 150%; }
  100% { left: 150%; }
}

.sec-title {
  font-size: clamp(32px, 4vw, 42px) !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  margin: 10px 0 16px !important;
  letter-spacing: -0.5px !important;
  line-height: 1.25 !important;
  text-align: center !important;
}

.sec-title span {
  background: linear-gradient(135deg, #00e5ff 0%, #008cd6 40%, #00e5ff 70%, #9d00ff 100%);
  background-size: 250% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: heroTextGlowFlow 4s ease infinite;
  display: inline-block;
  font-weight: 900;
  position: relative;
}

@keyframes heroTextGlowFlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.sec-desc {
  font-size: 15px !important;
  color: rgba(255, 255, 255, 0.7) !important;
  max-width: 680px !important;
  line-height: 1.7 !important;
  margin: 0 auto !important;
  text-align: center !important;
}

.staggered-route-container {
  position: relative;
  width: 100%;
  max-width: 1320px;
  margin: 60px auto 0;
}

.staggered-route-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  position: relative;
  z-index: 2;
}

.staggered-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
}

.staggered-step.step-1, .staggered-step.step-3 {
  margin-top: 0;
}

.staggered-step.step-2 {
  margin-top: 50px;
}

.staggered-step.step-4 {
  margin-top: 45px;
}

.staggered-icon-node {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: rgba(0, 15, 60, 0.95);
  border: 2.5px solid var(--blue, #008ad6);
  box-shadow: 0 0 30px rgba(0, 138, 214, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  color: #00e5ff;
  transition: all 0.35s ease;
  cursor: pointer;
  margin-bottom: 20px;
}

.staggered-step:hover .staggered-icon-node {
  background: #008ad6;
  color: #ffffff;
  transform: scale(1.12);
  box-shadow: 0 0 45px rgba(0, 229, 255, 0.85);
}

.staggered-step-num {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 2px;
  color: #00e5ff;
  background: rgba(0, 138, 214, 0.18);
  border: 1px solid rgba(0, 138, 214, 0.45);
  padding: 5px 14px;
  border-radius: 16px;
  margin-bottom: 16px;
  text-transform: uppercase;
}

.staggered-title {
  font-size: 24px;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 12px;
  line-height: 1.3;
}

.staggered-desc {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.65;
  max-width: 290px;
}

@keyframes laserPulseFlow {
  0% { stroke-dashoffset: 48; }
  100% { stroke-dashoffset: 0; }
}

@media (max-width: 1024px) {
  .staggered-route-grid { grid-template-columns: repeat(2, 1fr); gap: 40px; }
  .staggered-step.step-1, .staggered-step.step-2, .staggered-step.step-3, .staggered-step.step-4 { margin-top: 0; }
  .process-svg-route { display: none; }
}

@media (max-width: 600px) {
  .staggered-route-grid { grid-template-columns: 1fr; }
}



/* LUXURY TECH CARDS FLUSH 5X2 GRID */
/* LUXURY TECH CARDS FLUSH 6X2 GRID - STRICTLY 2 ROWS */
.tech-grid {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.tech-card {
  --tone: #0aa8ff;
  position: relative !important;
  height: 172px !important;
  min-height: 172px !important;
  max-height: 172px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: #040a22 !important;
  display: flex !important;
  flex-direction: column !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease !important;
  transform: none !important;
  box-sizing: border-box !important;
}
.tech-card:nth-child(2n) {
  transform: none !important;
}
.tech-card:hover, .tech-card:nth-child(2n):hover {
  transform: translateY(-5px) scale(1.02) !important;
  border-color: var(--tone) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.7), 0 0 20px color-mix(in srgb, var(--tone) 35%, transparent) !important;
}
.tech-card img {
  position: relative !important;
  width: 100% !important;
  height: 122px !important;
  top: 0 !important;
  left: 0 !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 0 !important;
  display: block !important;
  filter: brightness(0.96) !important;
  transition: transform 0.4s ease, filter 0.3s ease !important;
}
.tech-card:hover img {
  transform: scale(1.07) !important;
  filter: brightness(1.05) !important;
}
.tech-card b {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  padding: 8px 10px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  background: linear-gradient(180deg, rgba(6, 14, 38, 0.92) 0%, rgba(2, 6, 20, 0.98) 100%) !important;
  flex: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  letter-spacing: -0.01em !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.tech-card a {
  position: absolute !important;
  inset: 0 !important;
  z-index: 10 !important;
}


/* ═══════════════════════════════════════════════════
   CREOVA SVG GOOEY BUBBLE BACKGROUND FIX
   ═══════════════════════════════════════════════════ */
:root {
  --first-color: 0, 138, 214;
  --second-color: 0, 75, 180;
  --third-color: 0, 240, 255;
  --fourth-color: 3, 22, 85;
  --fifth-color: 14, 65, 175;
  --sixth-color: 0, 180, 255;
}

#bubble-bg-container, .bubble-bg-root {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 0 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: none !important;
  background: linear-gradient(135deg, #020412 0%, #050b28 50%, #01020d 100%) !important;
}

/* Make content sections sit transparently on z-index 1 above bubbles */
body {
  background: #02061d !important;
  color: #fff !important;
}

main, section,
.tech-dedicated-hero,
.holobox-spotlight-wrap,
.use-cases-section,
.tech-specs-section,
.other-techs-section,
.dark-intro-section,
.kiosk-action-section,
.activation-flow-section,
.service-detail-hero,
.cv-section {
  background: transparent !important;
  background-color: transparent !important;
  position: relative;
  z-index: 1;
}
/* Responsive catalogue: keep these after the desktop card overrides. */
@media (max-width: 1024px) {
  .tech-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 600px) {
  .tech-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
  .tech-card { height: auto !important; min-height: 184px !important; max-height: none !important; }
  .tech-card img { height: auto !important; aspect-ratio: 4 / 3; }
  .tech-card b { white-space: normal !important; font-size: 14px !important; line-height: 1.4; min-height: 54px; }
  .portfolio-stage { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .portfolio-core { padding: 28px 22px; }
  .msd-read-more-btn { display: inline-flex !important; align-items: center; min-height: 44px; padding: 10px 20px !important; }
  .msd-duo-desc { font-size: 15px !important; line-height: 1.65 !important; }
  input, select, textarea { font-size: 16px !important; }
  #mobile-nav { max-height: calc(100dvh - 70px); overscroll-behavior: contain; padding-bottom: max(24px, env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-left, .reveal-right { opacity: 1 !important; transform: none !important; }
}
/* CREOVA hero: solid typography and a quiet reading area over the existing reel. */
.cv-hero {
  min-height: min(760px, 88svh);
  align-items: center;
  padding: 150px 0 90px !important;
  isolation: isolate;
}
.cv-hero:after {
  background: linear-gradient(90deg, rgba(2,6,23,.96) 0%, rgba(2,6,23,.8) 40%, rgba(2,6,23,.25) 100%), linear-gradient(0deg,#020617 0%,transparent 35%);
}
.cv-hero video { filter: brightness(.8); object-position: center; }
.cv-hero h1 {
  max-width: 850px;
  font-size: clamp(40px, 4.7vw, 72px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.025em;
  margin: 22px 0 26px;
}
.cv-hero h1 span {
  color: #5dd8f0;
  -webkit-text-stroke: 0;
  -webkit-text-fill-color: #5dd8f0;
  text-shadow: none;
}
.cv-hero .eyebrow, .cv-hero-badge {
  color: #8fd9ef;
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: .12em;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
}
.cv-hero p { max-width: 580px; font-size: 18px; line-height: 1.75; color: #d4deec; font-weight: 400; }
.cv-hero .cv-actions { gap: 16px; margin-top: 32px; }
.cv-hero .btn { min-height: 50px; padding: 14px 24px; font-size: 14px; border-radius: 10px; box-shadow: none; letter-spacing: 0; text-transform: none; }
.cv-hero .btn-primary { background: #008ad6; color: #fff; }
.cv-hero .btn-primary:hover { background: #0079bf; color: #fff; box-shadow: none; }
.cv-hero .btn-ghost { background: rgba(9,20,42,.5); border: 1px solid #64748b; color: #fff; backdrop-filter: none; }
@media(max-width:600px) {
  .cv-hero { min-height: 620px; min-height: min(720px, 92svh); padding: 120px 0 60px !important; }
  .cv-hero h1 { font-size: clamp(30px, 8vw, 46px); line-height: 1.18; letter-spacing: -.025em; }
  .cv-hero p { font-size: 16px; line-height: 1.7; }
  .cv-hero:after { background: linear-gradient(90deg,#020617ec,#020617a6),linear-gradient(0deg,#020617,transparent); }
  .cv-hero .cv-actions { flex-direction: column; align-items: stretch; gap: 12px; margin-top: 26px; }
  .cv-hero .btn { justify-content: center; width: 100%; }
}