:root{
  --bg:#0d0e10; --fg:#f5f7ff;;
  --blue-1:#5f83ff; --blue-2:#3e62ff; --blue-3:#2f4ae8;
  --muted:#aab3d9; --brand:#eaf0ff;

  --nav-progress:0; --nav-opacity:0; --nav-blur:0px; --nav-shadow:0;
  --card:#12141a; --stroke:rgba(255,255,255,.06);

  /* dynamics */
  --px: 0px;
  --vid-x: 0px; --vid-y: 0px;
  --vid-alpha: 0; --vid-right-alpha: 0;

  --v2-alpha: 0;
  --v2-x: 0vw;
  --v2-left-alpha: 0;
  --v2-right-alpha: 0;

  /* carousel */
  --car-shadow: 0 12px 30px rgba(0,0,0,.35);
  --car-radius: 18px;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Arial,sans-serif;line-height:1.5}

/* NAV */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  height:64px; padding:0 clamp(16px,4vw,32px);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  background: transparent; border-bottom: none;
}
.nav::before{
  content:""; position:absolute; inset:0;
  background-color: rgba(16,18,22, var(--nav-opacity));
  backdrop-filter: blur(var(--nav-blur)); -webkit-backdrop-filter: blur(var(--nav-blur));
  box-shadow: 0 2px 12px rgba(0,0,0, var(--nav-shadow));
  pointer-events: none;
  transition: background-color .25s ease, box-shadow .25s ease;
}
.brand-link{position:relative; z-index:1; display:inline-flex; align-items:center; gap:10px; color:#fff; text-decoration:none}
.brandmark{width:36px; height:36px; object-fit:contain; display:block; filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}
.brandname{font-weight:800; letter-spacing:.06em; text-transform:uppercase; font-size:18px}
.nav-links{position:relative; z-index:1; list-style:none; display:flex; align-items:center; gap:clamp(16px,3vw,32px); margin:0; padding:0}
.nav-links a{color:var(--fg); text-decoration:none; opacity:0.9}
.nav-links a:hover{opacity:1}
.nav-toggle{display:none; background:transparent; border:0; color:var(--fg); font-size:24px; width:40px; height:40px; border-radius:8px; position:relative; z-index:1}

.page{display:flex; flex-direction:column; min-height:100dvh}

/* ===== FULL-HEIGHT WAVE BANNER ===== */
.waveband{
  position: relative; width:100%;
  height: 100vh; height: 100svh;
  overflow:hidden;
  background: radial-gradient(120% 100% at 20% 0%, var(--blue-1) 0%, var(--blue-2) 60%, var(--blue-3) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
  z-index: 0;
  backface-visibility:hidden; transform:translateZ(0);
}
.parallax{position:absolute; inset:0; transform: translate3d(0,var(--px),0); will-change: transform}

.wave{position:absolute; inset:-2px; z-index:0}
.wave span{
  position:absolute; width:220%; height:220%;
  left:50%; top:0; transform:translate(-50%,-82%);
  mix-blend-mode:multiply; will-change:transform;
}
.wave span:nth-child(1){border-radius:48%; background:rgba(15,15,15,.92); animation:spin 32s linear infinite}
.wave span:nth-child(2){border-radius:44%; background:rgba(0,0,0,.35); animation:spin 64s linear infinite}
.wave span:nth-child(3){border-radius:46%; background:rgba(0,0,0,.30); animation:spin 96s linear infinite}
@keyframes spin{0%{transform:translate(-50%,-82%) rotate(0deg)}100%{transform:translate(-50%,-82%) rotate(360deg)}}
.wave--bottom{display:none; transform: rotate(180deg)}

/* Ribbon ticker */
.ribbon{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:1; pointer-events:none}
.ribbon .frame{display:flex; align-items:center; gap:10px; font-weight:800; text-transform:uppercase; color:#fff; text-shadow:0 1px 1px rgba(0,0,0,.25), 0 10px 30px rgba(0,0,0,.35); letter-spacing:.10em; opacity:.88}
.ribbon .window{
  width: min(82vw, 1200px);
  height: clamp(34px, 6.2vw, 64px);
  overflow:hidden; position:relative; padding-block:2px;
  mask-image: linear-gradient(to right, transparent 0, black 8%, black 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 8%, black 92%, transparent 100%);
}
.ribbon .ticker{
  position:absolute; left:0; top:50%;
  transform:translateY(-50%);
  white-space:nowrap; will-change:transform;
  animation: tickerMoveX 18s linear infinite;
}
.ribbon .item{
  display:inline-block;
  padding:0 1.25ch;
  font-size: clamp(22px, 5.2vw, 48px);
  line-height:1.15;
  white-space:nowrap;
}
@keyframes tickerMoveX{0%{transform:translate3d(0,-50%,0)}100%{transform:translate3d(-50%,-50%,0)}}
@media (min-width:1400px){
  .ribbon .window{width: min(64vw, 1400px); -webkit-mask-image: linear-gradient(to right, transparent 0, black 12%, black 88%, transparent 100%); mask-image: linear-gradient(to right, transparent 0, black 12%, black 88%, transparent 100%)}
  .ribbon .item{font-size: clamp(26px, 3.6vw, 56px)}
}

/* ===== FIRST PINNED VIDEO ===== */
.video-stage{position: relative; height: 300vh; margin-top:0; z-index: 1}
@media (min-width: 1024px){ .video-stage{ height: 240vh } }
.video-sticky{position: sticky; top: 0; height: 100svh; overflow: hidden; background:#000; isolation:isolate; opacity: var(--vid-alpha); will-change: opacity}
.video-frame{position:absolute; inset:0; transform: translate3d(var(--vid-x), var(--vid-y), 0); will-change: transform; backface-visibility:hidden; transform-style:preserve-3d}
.video-frame video{position:absolute; left:50%; top:50%; transform: translate(-50%,-50%); width:112vw; height:112vh; object-fit:cover; filter: brightness(1) contrast(1.02)}
.video-right{
  position:absolute; top:50%; right: clamp(16px,4vw,48px);
  transform: translateY(-50%);
  width: min(42vw, 560px);
  background: rgba(13,14,16, .55);
  border: 1px solid var(--stroke);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.03);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  padding: clamp(16px,2.8vw,28px);
  color:#eaf0ff;
  opacity: var(--vid-right-alpha);
  transition: opacity .15s linear;
  pointer-events:none;
}
.video-right h3{margin:0 0 8px; font-size: clamp(18px,3.6vw,26px)}
.video-right p{margin:0; color:#cfd6ff; opacity:.9}

/* ===== SCROLLING BANNER (between videos) ===== */
.banner{
  position: relative;
  z-index: 1;
  background:#fff; color:#000;
  border-top: 1px solid rgba(0,0,0,.06);
  border-bottom: 1px solid rgba(0,0,0,.06);
  overflow: hidden;
}
.banner .viewport{
  width:100%;
  height: clamp(44px, 8vw, 64px);
  overflow:hidden;
  position:relative;
}
.banner .belt{
  display:flex;
  width:max-content;
  will-change:transform;
  animation: beltScroll 16s linear infinite;
}
@keyframes beltScroll{
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.banner .track{
  display:flex;
  white-space: nowrap;
  font-weight:800; text-transform:uppercase; letter-spacing:.08em;
  font-size: clamp(18px, 5vw, 28px);
  line-height:1;
  padding-block: clamp(8px,1.2vw,12px);
}
.banner .item{ padding:0 .6ch }

/* ===== SECOND PINNED SEQUENCE ===== */
.video-stage2{position: relative; height: 260vh; z-index: 1}
@media (min-width: 1024px){ .video-stage2{ height: 220vh } }
.video-sticky2{
  position: sticky; top:0; height:100svh; overflow:hidden;
  background:#282828;
  isolation:isolate;
  opacity: var(--v2-alpha); transition: opacity .2s linear; will-change:opacity;
}
.v2-canvas-wrap{
  position:absolute; inset:0;
  transform: translate3d(var(--v2-x), 0, 0);
  will-change: transform; backface-visibility:hidden; transform-style:preserve-3d;
}
#v2canvas{
  position:absolute; left:50%; top:50%;
  transform: translate(-50%,-50%);
  max-width:100vw; max-height:100vh;
  display:block;
  image-rendering:auto;
}
.v2-left, .v2-right{
  position:absolute; top:50%;
  transform: translateY(-50%);
  width:min(42vw, 560px);
  background: rgba(13,14,16,.55);
  border: 1px solid var(--stroke);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.03);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  padding: clamp(16px,2.8vw,28px);
  color:#eaf0ff;
  pointer-events:none;
}
.v2-left{ left: clamp(16px,4vw,48px); opacity: var(--v2-left-alpha) }
.v2-right{ right: clamp(16px,4vw,48px); opacity: var(--v2-right-alpha) }
.v2-left h3, .v2-right h3{margin:0 0 8px; font-size: clamp(18px,3.6vw,26px)}
.v2-left p, .v2-right p{margin:0; color:#cfd6ff; opacity:.9}

/* ====== 3D COVERFLOW CAROUSEL ====== */
.carousel{
  position:relative; z-index:2; background: var(--bg);
  width:min(1200px, 94vw);
  margin: clamp(24px,6vw,72px) auto;
}
.coverflow .car-viewport{
  position: relative;
  width: 100vw;
  margin-left:  calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  height: clamp(280px, 46vw, 520px);
  overflow: hidden;
  perspective: 1200px;
  display: flex;
  align-items: center;
  justify-content: center;
  contain: paint;
}
.car-stage{
  position:relative; width:100%; height:100%;
  margin:0; padding:0; list-style:none;
}
.car-slide{
  position:absolute; top:0; left:50%;
  width:min(74%, 840px); height:100%;
  transform-origin: 50% 50%;
  will-change: transform, opacity, z-index, filter;
  transition: transform .7s cubic-bezier(.22,.61,.36,1), opacity .7s linear, filter .7s linear;
  border-radius: 16px; overflow:hidden; box-shadow: var(--car-shadow);
  pointer-events:none;
  filter: saturate(0.9) contrast(0.98);
}
.car-figure{margin:0; position:relative; width:100%; height:100%}
.car-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.car-caption{
  position:absolute; left:0; right:0; bottom:0;
  padding: clamp(10px, 2.2vw, 18px);
  color:#eaf0ff; background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0));
  font-weight:600; letter-spacing:.01em;
  text-shadow: 0 2px 10px rgba(0,0,0,.6);
}

/* Dots */
.car-dots{display:flex; justify-content:center; gap:8px; padding:12px 0 10px}
.car-dot{
  width:9px; height:9px; border-radius:999px; border:1px solid var(--stroke);
  background: rgba(255,255,255,.06); cursor:pointer; text-indent:-9999px;
}
.car-dot.is-active{background:#fff}

/* CONTENT (base) */
.section{position:relative; z-index:2; background: var(--bg); width:min(1100px,92vw); margin: clamp(24px,6vw,72px) auto}
.section-title{font-size: clamp(22px,4.5vw,32px); margin:0 0 16px; color:#e8ebff; letter-spacing:.02em; font-weight:700}
.section-lead{margin:0 0 28px; color:#cfd6ff; opacity:.9}

.about-grid{display:grid; grid-template-columns: 1.2fr 1fr; gap: clamp(16px,3vw,28px)}
.card{background: var(--card); border:1px solid var(--stroke); border-radius:16px; overflow:hidden; box-shadow: 0 10px 30px rgba(0,0,0,.35)}
.card-body{padding: clamp(16px,3.2vw,28px)}
.h3{margin:0 0 10px; font-size: clamp(18px,3.5vw,24px); color:#f0f3ff}
.muted{color: var(--muted)}
.pillrow{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px}
.pill{padding:6px 10px; border-radius:999px; border:1px solid var(--stroke); background: rgba(255,255,255,.03); font-size:13px; color:#dfe5ff}

.media{position:relative; background:#0c0f16}
.media::after{content:""; position:absolute; inset:auto 12px 12px 12px; color:#9aa5c7; font-size:12px; letter-spacing:.06em; text-transform:uppercase; opacity:.8}
.media img{display:block; width:100%; height:100%; object-fit:cover}
.ratio-16x9{aspect-ratio:16/9}
.ratio-1x1{aspect-ratio:1/1}

.contact-grid{display:grid; grid-template-columns: 1fr 1fr; gap: clamp(16px,3vw,28px)}
.contact-card .item{display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px dashed rgba(255,255,255,.06)}
.contact-card .item:last-child{border-bottom:none}
.cta-row{display:flex; gap:12px; flex-wrap:wrap; margin-top:12px}
.btn{display:inline-block; padding:10px 14px; border-radius:10px; border:1px solid var(--stroke); background: rgba(255,255,255,.04); color:#fff; text-decoration:none; font-weight:600}
.btn:hover{background: rgba(255,255,255,.07)}
.field{display:flex; flex-direction:column; gap:6px}
.input, .textarea{width:100%; border-radius:10px; border:1px solid var(--stroke); background:#0f1218; color:#eaf0ff; padding:12px 12px}
.textarea{min-height:120px; resize:vertical}

.reveal{opacity:0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease}
.reveal.is-visible{opacity:1; transform: translateY(0)}
.reveal[data-delay="1"]{transition-delay:.08s}
.reveal[data-delay="2"]{transition-delay:.16s}
.reveal[data-delay="3"]{transition-delay:.24s}

.footer{position:relative; z-index:1; margin-top:auto; padding:32px 0 48px; text-align:center; color:#aab3d9; font-size:14px; opacity:.9; background: var(--bg)}

/* ====== NEW: About / Contact redesign ====== */
.about-split{
  display:grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(16px,3vw,28px);
}

.list-check{
  list-style:none;
  padding:0; margin:14px 0 0;
  display:grid; gap:10px;
}
.list-check li{
  position:relative; padding-left:26px; color:#dfe5ff;
}
.list-check li::before{
  content:""; position:absolute; left:0; top:8px;
  width:12px; height:12px; border-radius:50%;
  background: linear-gradient(180deg, var(--blue-1), var(--blue-3));
  box-shadow: 0 0 0 2px rgba(255,255,255,.06);
}

.steps{
  counter-reset: s; list-style:none; padding:0; margin:16px 0 0;
  display:grid; gap:10px;
}
.steps li{
  display:grid; grid-template-columns: auto 1fr; align-items:start; column-gap:10px;
  color:#dfe5ff; background: rgba(255,255,255,.03);
  border:1px solid var(--stroke); border-radius:12px; padding:10px 12px;
}
.steps li span{
  display:inline-block; min-width:32px; text-align:center; font-weight:800;
  color:#eaf0ff; background: rgba(255,255,255,.06);
  border:1px solid var(--stroke); border-radius:8px; padding:4px 6px; margin-right:4px;
}
.steps li strong{ display:block; color:#f0f3ff; }
.steps li em{ opacity:.8; font-style:normal; }

.contact-split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px,3vw,28px);
}
.contact-items{ margin-top:6px; }
.contact-items .item{
  display:flex; align-items:center; gap:12px;
  padding:12px 0; border-bottom:1px dashed rgba(255,255,255,.06);
}
.contact-items .item:last-child{ border-bottom:none; }
.sla{ margin-top:14px; }

.form-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap:12px;
}
.field--wide{ grid-column: 1 / -1; }

/* ====== MOBILE OVERRIDES ====== */
@media (max-width:768px){
  .brandname{display:none}
  .brand-link{gap:0}

  .ribbon .window{
    width:min(86vw, 680px);
    height: clamp(72px, 25vw, 120px);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, black 20%, black 80%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, black 20%, black 80%, transparent 100%);
  }
  .ribbon .ticker{
    left:50%; top:0; transform: translateX(-50%);
    white-space: normal; display:flex; flex-direction:column;
    animation: tickerMoveY 7s linear infinite;
  }
  .ribbon .item{
    display:block; text-align:center; padding:.15em 0;
    font-size: clamp(22px, 7.6vw, 36px); line-height:1.2; white-space:nowrap;
  }
  @keyframes tickerMoveY{ 0%{transform:translate(-50%,0)} 100%{transform:translate(-50%,-50%)} }

  .video-right{left:50%; right:auto; top:62%; transform: translate(-50%,-50%); width:min(90vw, 560px); text-align:center}

  #v2canvas{ width:100vw; height:100vh; }

  .carousel{ width:100%; }
  .coverflow .car-viewport{
    width: 100vw;
    margin-left:  calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    height: 66vh;   /* fallback */
    height: 66svh;  /* stable viewport */
    height: 66dvh;  /* dynamic viewport */
  }
  .car-slide{ width: 92%; }
  .car-caption{ font-size: 13px; padding: 10px 12px; }

  /* stack About & Contact on mobile */
  .about-grid,
  .contact-grid,
  .about-split,
  .contact-split{ grid-template-columns: 1fr; gap: clamp(14px, 4vw, 20px); }

  .about-grid .card,
  .contact-grid .card{ width: 100%; }

  .card-body{ padding: clamp(14px, 4vw, 22px); }

  /* form stacks to single column */
  .form-grid{ grid-template-columns: 1fr; }

  /* logo banner (taller on mobile) */
  .logo-ticker .logo-window{
    height: clamp(80px, 22vw, 140px);
    padding-block: clamp(12px, 3vw, 18px);
  }
  .logo-ticker .logo-track{
    height: 100%;
    gap: clamp(24px, 8vw, 42px);
  }
  .logo-ticker .logo{
    height: clamp(64px, 14vw, 120px);
    width: auto;
    flex: 0 0 auto;
  }
}

@media (max-width:900px){
  /* earlier stack breakpoint to feel roomy on tablets */
  .about-split{ grid-template-columns: 1fr; }
  .contact-split{ grid-template-columns: 1fr; }
  .form-grid{ grid-template-columns: 1fr; }
}

@media (max-width:480px){
  .wave--bottom{display:block}
}

@media (prefers-reduced-motion:reduce){
  .wave span{animation:none}
  .ribbon .ticker{animation:none}
  .banner .belt{animation:none}
  .reveal{opacity:1; transform:none}
}

/* ===== Scrolling logo banner (seamless loop) ===== */
.logo-ticker{
  position: relative;
  z-index: 1;
  background: #0b0f16;           /* or var(--bg) */
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
  padding-block: clamp(10px, 2vw, 16px);
  margin: clamp(12px, 4vw, 28px) 0;   /* ensures it's AFTER the first banner */
}
.logo-window{
  width: 100%;
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(to right, transparent 0, black 8%, black 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 8%, black 92%, transparent 100%);
}
/* belt contains two identical tracks for a seamless loop */
.logo-belt{
  display: flex;
  width: max-content;
  will-change: transform;
  animation: logoBelt 24s linear infinite;
}
.logo-track{
  display: inline-flex;
  align-items: center;
  gap: clamp(18px, 4vw, 42px);
  padding-inline: clamp(12px, 2vw, 20px);
  height: clamp(36px, 5vw, 64px);
}
.logo{
  height: clamp(22px, 3.6vw, 42px);
  width: auto;
  object-fit: contain;
  opacity: .95;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.25));
}
@keyframes logoBelt {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.logo-disclaimer{
  display:block; text-align:center; color:#aab3d9;
  font-size:12px; opacity:.75; margin-top:8px;
}
/* ===== SOCIAL LINKS SECTION ===== */
.socials {
  text-align: center;
  background: var(--bg);
  border-top: 1px solid rgba(255,255,255,.06);
  padding: clamp(32px, 6vw, 64px) 0;
}

.socials-title {
  font-size: clamp(18px, 3vw, 24px);
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--fg);
  margin-bottom: 20px;
  text-transform: uppercase;
  opacity: .9;
}

.socials-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(18px, 3vw, 42px);
}

.social-link img {
  width: clamp(28px, 5vw, 44px);
  height: clamp(28px, 5vw, 44px);
  filter: brightness(1) invert(1);
  opacity: .85;
  transition: opacity .3s ease, transform .3s ease, filter .3s ease;
}

.social-link:hover img {
  opacity: 1;
  transform: scale(1.1);
  filter: brightness(1.2) drop-shadow(0 0 6px rgba(255,255,255,.3));
}

/* MOBILE: tighter spacing */
@media (max-width: 600px){
  .socials-row {
    gap: clamp(12px, 6vw, 24px);
  }
}