/* ─────────────────────────────────────────────────────────
   NIO TECH · Cinematic Build
   Brand baseline (matches WordPress theme):
     navy #1A1A2E · navy-light #22223A · cyan #29ABE2 · cyan-hover #1E8FBF
   Typography: Montserrat (headings) / Open Sans (body)
   Custom easings tuned for filmic motion.
   ───────────────────────────────────────────────────────── */

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

:root {
  --navy:           #0E0E1A;
  --navy-mid:       #1A1A2E;
  --navy-light:     #22223A;
  --navy-glass:     rgba(26,26,46,.72);
  --cyan:           #29ABE2;
  --cyan-soft:      #5EC3EE;
  --cyan-hover:     #1E8FBF;
  --cyan-glow:      0 0 32px rgba(41,171,226,.45);
  --white:          #FFFFFF;
  --offwhite:       #E9EEF5;
  --gray:           #5C6478;
  --gray-light:     #B5BCCB;
  --line:           rgba(255,255,255,.10);

  --font-heading:   'Montserrat', system-ui, sans-serif;
  --font-body:      'Open Sans', system-ui, sans-serif;

  /* Cinematic easings */
  --ease-cinema:    cubic-bezier(.16, .84, .34, 1);
  --ease-glide:     cubic-bezier(.22, .61, .36, 1);
  --ease-stage:     cubic-bezier(.7, 0, .15, 1);
  --ease-bloom:     cubic-bezier(.34, 1.56, .64, 1);

  /* Reveal timing */
  --t-slow:         1.2s;
  --t-mid:          .8s;
  --t-fast:         .45s;

  --container:      1240px;
  --radius:         14px;
}

html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; }
body {
  font-family:var(--font-body);
  color:var(--offwhite);
  line-height:1.65;
  background:var(--navy);
  overflow-x:hidden;
  cursor:default;
}

img { max-width:100%; height:auto; display:block; }
a { color:inherit; text-decoration:none; }

/* ── Selection ── */
::selection { background:var(--cyan); color:var(--navy); }

/* ── Custom scrollbar ── */
::-webkit-scrollbar { width:10px; }
::-webkit-scrollbar-track { background:var(--navy); }
::-webkit-scrollbar-thumb { background:linear-gradient(var(--cyan-hover),var(--cyan)); border-radius:10px; }

.container { max-width:var(--container); margin:0 auto; padding:0 28px; position:relative; }

/* ─────────────────────────────────────────────────────────
   GLOBAL CINEMATIC OVERLAY (fixed)
   ───────────────────────────────────────────────────────── */
.cine-overlay { position:fixed; inset:0; pointer-events:none; z-index:90; mix-blend-mode:normal; }

/* Film grain — animated SVG noise as data-URI */
.cine-grain {
  position:absolute; inset:-50%;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .4 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size:240px 240px;
  opacity:.10;
  mix-blend-mode:overlay;
  animation:grainShift 1.2s steps(5) infinite;
  will-change:transform;
}
@keyframes grainShift {
  0%   { transform:translate(0,0); }
  20%  { transform:translate(-3%,-2%); }
  40%  { transform:translate(2%,-4%); }
  60%  { transform:translate(-2%,3%); }
  80%  { transform:translate(3%,1%); }
  100% { transform:translate(0,0); }
}

/* Vignette */
.cine-vignette {
  position:absolute; inset:0;
  background:radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.55) 100%);
}

/* Letterbox bars — slide in on load, then retract */
.cine-letterbox {
  position:absolute; left:0; right:0; height:80px;
  background:#000;
  z-index:91;
}
.cine-letterbox--top    { top:0;    transform:translateY(-100%); animation:letterboxIn 1.6s var(--ease-stage) .15s forwards; }
.cine-letterbox--bottom { bottom:0; transform:translateY(100%);  animation:letterboxIn 1.6s var(--ease-stage) .15s forwards; }
@keyframes letterboxIn {
  0%   { transform:translateY(var(--from,-100%)); }
  35%  { transform:translateY(0); }
  75%  { transform:translateY(0); }
  100% { transform:translateY(var(--from,-100%)); }
}
.cine-letterbox--bottom { --from:100%; }
.cine-letterbox--top    { --from:-100%; }

/* ─────────────────────────────────────────────────────────
   TYPOGRAPHY HELPERS
   ───────────────────────────────────────────────────────── */
.section-label {
  font-family:var(--font-heading);
  font-size:12px; font-weight:700; letter-spacing:4px;
  text-transform:uppercase; color:var(--cyan);
  display:inline-flex; align-items:center; gap:10px;
  margin-bottom:14px;
}
.section-label::before {
  content:""; width:32px; height:1px; background:var(--cyan); display:inline-block;
}
.section-label.center { text-align:center; }

.section-title {
  font-family:var(--font-heading);
  font-size:clamp(34px,4.4vw,56px);
  font-weight:800; line-height:1.08; letter-spacing:-.5px;
  color:var(--white); margin-bottom:18px;
}
.section-title span { color:var(--cyan); font-style:italic; font-weight:800; }
.section-title.white { color:var(--white); }

.section-subtitle {
  font-size:17px; color:var(--gray-light); max-width:620px; line-height:1.7;
}
.section-subtitle.light { color:rgba(255,255,255,.78); }

/* Buttons */
.btn {
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 30px;
  font-family:var(--font-heading);
  font-size:12px; font-weight:700; letter-spacing:1.8px; text-transform:uppercase;
  border-radius:6px;
  border:1.5px solid transparent;
  transition:transform .35s var(--ease-glide), box-shadow .35s var(--ease-glide), background-color .25s, color .25s, border-color .25s;
  position:relative; overflow:hidden;
  isolation:isolate;
}
.btn::after {
  content:""; position:absolute; inset:0; background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.35) 50%, transparent 100%);
  transform:translateX(-110%); transition:transform .9s var(--ease-glide);
  z-index:-1;
}
.btn:hover::after { transform:translateX(110%); }
.btn:hover { transform:translateY(-2px); }

.btn-primary { background:var(--cyan); color:var(--white); border-color:var(--cyan); box-shadow:0 8px 30px rgba(41,171,226,.35); }
.btn-primary:hover { background:var(--cyan-hover); border-color:var(--cyan-hover); box-shadow:0 14px 40px rgba(41,171,226,.5); }

.btn-outline { background:transparent; color:var(--white); border-color:rgba(255,255,255,.55); }
.btn-outline:hover { background:rgba(255,255,255,.08); border-color:var(--white); }

.btn-white { background:var(--white); color:var(--cyan); border-color:var(--white); }
.btn-white:hover { background:var(--cyan); color:var(--white); border-color:var(--cyan); }

/* Skip link */
.skip-link {
  position:fixed; top:-100px; left:16px;
  background:var(--cyan); color:var(--white);
  padding:12px 22px; font-weight:700; font-family:var(--font-heading);
  z-index:200; border-radius:0 0 6px 6px; transition:top .25s;
}
.skip-link:focus { top:0; outline:3px solid var(--white); }

/* ─────────────────────────────────────────────────────────
   HEADER
   ───────────────────────────────────────────────────────── */
.header {
  position:fixed; top:0; left:0; right:0; z-index:80;
  padding:14px 0;
  background:linear-gradient(180deg, rgba(14,14,26,.82) 0%, rgba(14,14,26,0) 100%);
  backdrop-filter:blur(0px);
  transition:background .4s var(--ease-glide), backdrop-filter .4s, padding .35s var(--ease-glide);
}
.header.is-scrolled {
  background:rgba(14,14,26,.86);
  backdrop-filter:blur(14px) saturate(140%);
  padding:8px 0;
  border-bottom:1px solid var(--line);
}
.header .container { display:flex; align-items:center; justify-content:space-between; }
.logo {
  font-family:var(--font-heading);
  font-size:22px; font-weight:800; letter-spacing:1.5px;
  color:var(--white);
  position:relative;
}
.logo em { color:var(--cyan); font-style:normal; }
.logo::after {
  content:""; position:absolute; left:0; bottom:-6px; height:2px; width:0;
  background:var(--cyan); transition:width .5s var(--ease-cinema);
}
.logo:hover::after { width:100%; }

.main-nav { display:flex; align-items:center; gap:0; }
.main-nav > a, .nav-trigger {
  font-family:var(--font-body);
  font-size:12px; font-weight:600; text-transform:uppercase;
  letter-spacing:1px;
  color:rgba(255,255,255,.78);
  padding:26px 11px;
  position:relative;
  transition:color .25s;
  display:inline-flex; align-items:center; gap:5px;
  background:none; border:none; cursor:pointer;
  white-space:nowrap;
}
.main-nav > a::before, .nav-trigger::before {
  content:""; position:absolute; left:50%; bottom:18px;
  width:0; height:1px; background:var(--cyan);
  transform:translateX(-50%);
  transition:width .4s var(--ease-cinema);
}
.main-nav > a:hover, .nav-trigger:hover { color:var(--white); }
.main-nav > a:hover::before, .nav-dropdown:hover .nav-trigger::before { width:24px; }
.main-nav > a.is-active { color:var(--cyan); }
.main-nav > a.is-active::before { width:24px; }

/* ── Mega menu ── */
.nav-dropdown { position:relative; }
/* When this dropdown contains a wide mega-menu, escape the trigger's
   positioning context so the menu can center on the viewport instead of
   getting cut off near the screen edge */
.nav-dropdown:has(.mega-menu) { position:static; }
.nav-trigger svg { width:10px; height:10px; transition:transform .3s var(--ease-cinema); }
.nav-dropdown:hover .nav-trigger svg { transform:rotate(180deg); }

.mega-menu, .dropdown-menu {
  position:absolute; top:100%;
  background:rgba(14,14,26,.96);
  backdrop-filter:blur(20px) saturate(140%);
  border:1px solid rgba(41,171,226,.25);
  border-radius:14px;
  box-shadow:0 30px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(41,171,226,.1) inset;
  opacity:0; visibility:hidden;
  transform:translateY(8px);
  transition:opacity .35s var(--ease-cinema), transform .35s var(--ease-cinema), visibility .35s;
  pointer-events:none;
}
.nav-dropdown:hover .mega-menu,
.nav-dropdown:hover .dropdown-menu,
.nav-dropdown:focus-within .mega-menu,
.nav-dropdown:focus-within .dropdown-menu {
  opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto;
}
.mega-menu {
  /* Now positioned relative to .header (its nearest positioned ancestor)
     because .nav-dropdown:has(.mega-menu) is static. Center on viewport: */
  left:50%; transform:translateX(-50%) translateY(8px);
  display:grid; grid-template-columns:repeat(3, minmax(220px, 1fr));
  gap:8px;
  padding:24px;
  width:min(900px, calc(100vw - 40px));
  max-height:calc(100vh - 100px);
  overflow:auto;
}
.nav-dropdown:has(.mega-menu):hover .mega-menu { transform:translateX(-50%) translateY(0); }
.mega-col-title {
  font-family:var(--font-heading);
  font-size:11px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase;
  color:var(--cyan); margin-bottom:8px; padding:0 12px;
}
.mega-menu a {
  display:flex; align-items:flex-start; gap:12px;
  padding:12px;
  border-radius:8px;
  font-family:var(--font-body);
  color:rgba(255,255,255,.78);
  transition:background .25s, color .25s, transform .25s;
}
.mega-menu a:hover {
  background:rgba(41,171,226,.10);
  color:var(--white);
  transform:translateX(2px);
}
.mega-menu a svg {
  width:22px; height:22px; flex-shrink:0; color:var(--cyan); margin-top:2px;
}
.mega-menu a > div { display:flex; flex-direction:column; gap:2px; }
.mega-menu a b { font-size:13px; font-weight:600; }
.mega-desc { font-size:11px; color:rgba(255,255,255,.5); font-weight:400; }

.dropdown-menu {
  left:50%; transform:translateX(-50%) translateY(8px);
  min-width:240px;
  padding:12px;
}
.nav-dropdown:hover .dropdown-menu { transform:translateX(-50%) translateY(0); }
.dropdown-menu a {
  display:flex; align-items:center; gap:10px;
  padding:10px 14px;
  font-size:13px; color:rgba(255,255,255,.78);
  border-radius:8px;
  transition:all .2s;
}
.dropdown-menu a:hover { background:rgba(41,171,226,.10); color:var(--white); }
.dropdown-menu a svg { width:16px; height:16px; color:var(--cyan); flex-shrink:0; }
.dropdown-divider { height:1px; background:var(--line); margin:6px 8px; }

.nav-right { display:flex; align-items:center; gap:14px; flex-shrink:0; }
.nav-phone {
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-heading); font-size:13px; font-weight:700;
  color:var(--cyan); padding:8px 10px; border-radius:6px;
  transition:color .25s, transform .25s;
  white-space:nowrap;
}
.nav-phone:hover { transform:translateY(-1px); color:var(--cyan-soft); }
.nav-cta { padding:11px 20px; font-size:11px; white-space:nowrap; }

/* Employee portal pill (auto-injected by cinematic.js) */
.nav-portal-link {
  display:inline-flex; align-items:center; gap:6px;
  padding:9px 14px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.14);
  border-radius:50px;
  font-family:var(--font-heading);
  font-size:11px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase;
  color:rgba(255,255,255,.85);
  text-decoration:none;
  transition:color .2s, background .2s, border-color .2s, transform .2s;
  margin-right:6px;
}
.nav-portal-link:hover {
  background:rgba(41,171,226,.12);
  border-color:rgba(41,171,226,.4);
  color:var(--cyan-soft);
  transform:translateY(-1px);
}
.nav-portal-link svg { width:13px; height:13px; }
@media (max-width:1100px) { .nav-portal-link span { display:none; } .nav-portal-link { padding:8px 10px; } }

@media (max-width:1240px) {
  .main-nav { display:none; }
  .mobile-menu-toggle { display:inline-flex !important; }
}
@media (max-width:1100px) {
  .nav-phone .phone-text { display:none; }
}
@media (max-width:600px) {
  .nav-phone .phone-text { display:none; }
  .nav-phone { padding:8px; }
  .nav-cta { padding:10px 16px; font-size:10px; letter-spacing:1.2px; }
  .logo { font-size:18px; letter-spacing:1px; }
}

/* ── Mobile menu toggle (hamburger) ── */
.mobile-menu-toggle {
  display:none;
  align-items:center; justify-content:center;
  width:44px; height:44px;
  margin-left:8px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--line);
  border-radius:8px;
  color:var(--white);
  cursor:pointer;
  transition:background .25s, border-color .25s, transform .25s;
}
.mobile-menu-toggle:hover { background:rgba(41,171,226,.1); border-color:rgba(41,171,226,.4); }
.mobile-menu-toggle .bar {
  width:18px; height:2px; background:currentColor;
  transition:transform .35s var(--ease-cinema), opacity .25s, top .35s var(--ease-cinema);
  position:relative;
}
.mobile-menu-toggle .bar::before,
.mobile-menu-toggle .bar::after {
  content:""; position:absolute; left:0; width:18px; height:2px; background:currentColor;
  transition:transform .35s var(--ease-cinema), top .35s var(--ease-cinema);
}
.mobile-menu-toggle .bar::before { top:-6px; }
.mobile-menu-toggle .bar::after  { top: 6px; }
.mobile-menu-toggle.is-open .bar { background:transparent; }
.mobile-menu-toggle.is-open .bar::before { top:0; transform:rotate(45deg); }
.mobile-menu-toggle.is-open .bar::after  { top:0; transform:rotate(-45deg); }

/* ── Mobile drawer ── */
.mobile-drawer {
  position:fixed; top:0; right:0; bottom:0;
  width:min(380px, 88vw);
  background:rgba(14,14,26,.97);
  backdrop-filter:blur(20px) saturate(140%);
  border-left:1px solid var(--line);
  z-index:95;
  transform:translateX(100%);
  transition:transform .55s var(--ease-cinema);
  overflow-y:auto;
  padding:90px 28px 40px;
  box-shadow:-30px 0 80px rgba(0,0,0,.5);
}
.mobile-drawer.is-open { transform:translateX(0); }

.mobile-drawer-backdrop {
  position:fixed; inset:0;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(6px);
  z-index:94;
  opacity:0; visibility:hidden;
  transition:opacity .35s, visibility .35s;
}
.mobile-drawer-backdrop.is-open { opacity:1; visibility:visible; }

.mobile-drawer-section {
  padding:14px 0;
  border-bottom:1px solid var(--line);
}
.mobile-drawer-section:last-child { border-bottom:none; }
.mobile-drawer-title {
  font-family:var(--font-heading);
  font-size:11px; font-weight:700;
  letter-spacing:2.5px; text-transform:uppercase;
  color:var(--cyan);
  margin-bottom:10px;
}
.mobile-drawer a {
  display:flex; align-items:center; gap:10px;
  padding:11px 8px;
  font-family:var(--font-body); font-size:15px;
  color:rgba(255,255,255,.85);
  border-radius:6px;
  transition:background .2s, color .2s, padding-left .25s;
}
.mobile-drawer a:hover, .mobile-drawer a.is-active {
  color:var(--white);
  background:rgba(41,171,226,.10);
  padding-left:14px;
}
.mobile-drawer a svg { width:18px; height:18px; color:var(--cyan); flex-shrink:0; }
.mobile-drawer .drawer-cta {
  margin-top:18px;
  display:flex; flex-direction:column; gap:10px;
}
.mobile-drawer .drawer-cta .btn { justify-content:center; padding:14px 24px; }

/* ─────────────────────────────────────────────────────────
   HERO — Cinematic depth stack
   ───────────────────────────────────────────────────────── */
.hero {
  position:relative;
  min-height:100vh;
  display:flex; align-items:center;
  isolation:isolate;
  overflow:hidden;
  padding:120px 0 80px;
}

/* BG plate (video + grade) — slowest parallax */
.hero-plate {
  position:absolute; inset:-8%;
  z-index:0;
  will-change:transform;
}
.hero-video {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover;
  transform:scale(1.08);
  animation:heroBreath 14s var(--ease-cinema) infinite alternate;
}
@keyframes heroBreath {
  0%   { transform:scale(1.08) translate3d(0,0,0); filter:saturate(1.05) contrast(1.05); }
  100% { transform:scale(1.18) translate3d(-1.5%,-1%,0); filter:saturate(1.1) contrast(1.1); }
}
.hero-grade {
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 30% 50%, rgba(41,171,226,.20) 0%, transparent 55%),
    linear-gradient(180deg, rgba(14,14,26,.45) 0%, rgba(14,14,26,.65) 50%, rgba(14,14,26,.92) 100%),
    linear-gradient(90deg, rgba(14,14,26,.7) 0%, rgba(14,14,26,.15) 50%, rgba(14,14,26,.7) 100%);
}
.hero-light-flare {
  position:absolute; top:-20%; right:-10%;
  width:80vmin; height:80vmin;
  background:radial-gradient(circle, rgba(41,171,226,.22) 0%, transparent 60%);
  filter:blur(40px);
  animation:flareDrift 18s var(--ease-cinema) infinite alternate;
  pointer-events:none;
}
@keyframes flareDrift {
  0%   { transform:translate(0,0) scale(1); opacity:.7; }
  100% { transform:translate(-15%, 8%) scale(1.15); opacity:1; }
}

/* Mid layer orbs — medium parallax */
.hero-mid {
  position:absolute; inset:0; pointer-events:none; z-index:1;
}
.orb {
  position:absolute; border-radius:50%;
  filter:blur(60px);
  will-change:transform;
}
.orb-1 { top:18%; left:8%;  width:380px; height:380px; background:radial-gradient(circle, rgba(41,171,226,.45), transparent 65%); }
.orb-2 { bottom:20%; right:12%; width:480px; height:480px; background:radial-gradient(circle, rgba(94,195,238,.35), transparent 65%); }
.orb-3 { top:55%; left:55%; width:300px; height:300px; background:radial-gradient(circle, rgba(255,255,255,.18), transparent 65%); }

/* Foreground floating cards (cut-out depth) — strongest parallax */
.hero-foreground {
  position:absolute; inset:0; z-index:3; pointer-events:none;
}
.float-card {
  position:absolute;
  display:flex; align-items:center; gap:12px;
  padding:13px 18px 13px 14px;
  background:rgba(14,14,26,.65);
  backdrop-filter:blur(18px) saturate(140%);
  border:1px solid rgba(255,255,255,.14);
  border-radius:12px;
  color:#fff;
  box-shadow:0 18px 50px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);
  font-family:var(--font-heading);
  will-change:transform;
  opacity:0;
  animation:floatIn 1.4s var(--ease-cinema) forwards;
  animation-delay:1.2s;
}
.float-card svg { width:22px; height:22px; color:var(--cyan); flex-shrink:0; }
.float-card span { display:flex; flex-direction:column; line-height:1.2; }
.float-card b { font-size:13px; font-weight:700; letter-spacing:.3px; }
.float-card i { font-style:normal; font-size:10px; font-weight:500; color:var(--gray-light); letter-spacing:.4px; margin-top:2px; }
.float-card .pulse {
  width:8px; height:8px; border-radius:50%; background:#3DDC84;
  box-shadow:0 0 0 0 rgba(61,220,132,.7);
  animation:pulseDot 1.6s ease-out infinite;
  margin-left:6px;
}
@keyframes pulseDot {
  0%   { box-shadow:0 0 0 0 rgba(61,220,132,.6); }
  70%  { box-shadow:0 0 0 12px rgba(61,220,132,0); }
  100% { box-shadow:0 0 0 0 rgba(61,220,132,0); }
}
@keyframes floatIn {
  to { opacity:1; }
}

.float-card--cam  { top:18%;  right:6%;  animation-delay:1.0s; }
.float-card--lock { bottom:26%; left:5%; animation-delay:1.4s; }
.float-card--wifi { top:48%;  right:14%; animation-delay:1.8s; }

/* Hover bob */
.float-card { animation:floatIn 1.4s var(--ease-cinema) forwards, floatBob 6s ease-in-out infinite; }
.float-card--cam  { animation-delay:1.0s, 0s; }
.float-card--lock { animation-delay:1.4s, .8s; }
.float-card--wifi { animation-delay:1.8s, 1.6s; }
@keyframes floatBob {
  0%,100% { translate: 0 0; }
  50%     { translate: 0 -6px; }
}

/* Tablet: tuck floating cards into corners so they don't crowd hero copy */
@media (max-width:980px) {
  .float-card {
    padding:10px 14px 10px 12px;
    transform:scale(.85);
    transform-origin:top right;
  }
  .float-card--cam  { top:14%;  right:4%; }
  .float-card--lock { bottom:14%; left:3%; transform-origin:bottom left; }
  .float-card--wifi { display:none; }
}

/* Mobile: hide floating cards entirely — they overlap the hero title/subtitle */
@media (max-width:720px) {
  .hero-foreground { display:none; }
}

/* Hero content */
.hero-content { position:relative; z-index:5; max-width:780px; }
.hero-label {
  font-family:var(--font-heading);
  font-size:13px; font-weight:700; letter-spacing:3px; text-transform:uppercase;
  color:var(--cyan);
  margin-bottom:24px;
  display:inline-flex; align-items:center; gap:14px;
  padding:8px 16px;
  background:rgba(41,171,226,.10);
  border:1px solid rgba(41,171,226,.35);
  border-radius:50px;
}
.hero-label::before {
  content:""; width:8px; height:8px; border-radius:50%; background:var(--cyan);
  box-shadow:0 0 12px var(--cyan);
  animation:pulseDot 2s ease-out infinite;
}

.hero-title {
  font-family:var(--font-heading);
  font-size:clamp(46px, 7.6vw, 110px);
  font-weight:900; line-height:.96; letter-spacing:-2.5px;
  color:var(--white); margin-bottom:28px;
}
.hero-title .line {
  display:block;
  background:linear-gradient(180deg, #fff 0%, #cfd9e6 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-title .line i {
  font-style:italic; font-weight:800;
  background:linear-gradient(180deg, var(--cyan-soft) 0%, var(--cyan) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.hero-sub {
  font-size:18px; color:rgba(255,255,255,.82); max-width:580px;
  line-height:1.7; margin-bottom:36px;
}
.hero-buttons { display:flex; gap:14px; flex-wrap:wrap; }

/* Mask reveal animation for hero text */
[data-mask-reveal] {
  opacity:0;
  transform:translateY(40px);
  filter:blur(8px);
  animation:maskRise 1.4s var(--ease-cinema) forwards;
  animation-delay:var(--d, 0s);
}
@keyframes maskRise {
  0%   { opacity:0; transform:translateY(40px); filter:blur(8px); }
  60%  { opacity:1; }
  100% { opacity:1; transform:translateY(0); filter:blur(0); }
}

/* Scroll cue */
.scroll-cue {
  position:absolute; left:50%; bottom:36px; transform:translateX(-50%);
  width:24px; height:40px;
  border:2px solid rgba(255,255,255,.5);
  border-radius:14px;
  z-index:5;
  opacity:0; animation:fadeIn .8s var(--ease-cinema) 2.4s forwards;
}
.scroll-cue span {
  position:absolute; left:50%; top:8px; width:3px; height:8px;
  background:var(--cyan);
  border-radius:2px;
  transform:translateX(-50%);
  animation:scrollDot 1.8s var(--ease-cinema) infinite;
}
@keyframes fadeIn { to { opacity:1; } }
@keyframes scrollDot {
  0%   { opacity:0; transform:translate(-50%, 0); }
  30%  { opacity:1; }
  100% { opacity:0; transform:translate(-50%, 14px); }
}

/* ─────────────────────────────────────────────────────────
   SECTION TRANSITIONS — fade-edges between sections
   ───────────────────────────────────────────────────────── */
[data-scene-fade] { position:relative; isolation:isolate; }
[data-scene-fade]::before,
[data-scene-fade]::after {
  content:""; position:absolute; left:0; right:0; height:120px;
  pointer-events:none; z-index:2;
}
[data-scene-fade]::before { top:0; background:linear-gradient(180deg, var(--navy) 0%, transparent 100%); }
[data-scene-fade]::after  { bottom:0; background:linear-gradient(0deg, var(--navy) 0%, transparent 100%); }

/* ─────────────────────────────────────────────────────────
   TRUST BAR — marquee
   ───────────────────────────────────────────────────────── */
.trust-bar {
  background:var(--navy);
  padding:48px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.trust-bar-label {
  text-align:center;
  font-family:var(--font-heading); font-size:11px; font-weight:700;
  letter-spacing:3px; text-transform:uppercase;
  color:var(--gray-light); margin-bottom:24px;
}
.trust-marquee {
  position:relative; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
}
.trust-track {
  display:flex; gap:56px;
  width:max-content;
  animation:marquee 40s linear infinite;
}
.trust-marquee:hover .trust-track { animation-play-state:paused; }
.brand {
  font-family:var(--font-heading); font-size:14px; font-weight:800;
  letter-spacing:3px; color:rgba(255,255,255,.45);
  white-space:nowrap;
  transition:color .3s, transform .3s;
}
.brand:hover { color:var(--cyan); transform:scale(1.06); }
@keyframes marquee {
  to { transform:translateX(-50%); }
}

/* ─────────────────────────────────────────────────────────
   SERVICES
   ───────────────────────────────────────────────────────── */
.services {
  padding:140px 0 120px;
  background:var(--navy);
  position:relative;
}
.bg-mesh {
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(circle at 15% 20%, rgba(41,171,226,.10), transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(41,171,226,.08), transparent 40%);
}
.services-header { text-align:center; margin-bottom:64px; }
.services-header .section-label { display:inline-flex; }
.services-header .section-subtitle { margin:0 auto; }

.services-grid {
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:24px;
}
.service-card {
  position:relative;
  padding:36px 30px 32px;
  background:linear-gradient(180deg, rgba(34,34,58,.6) 0%, rgba(26,26,46,.6) 100%);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  transform-style:preserve-3d;
  transition:transform .6s var(--ease-cinema), border-color .4s, box-shadow .6s var(--ease-cinema);
  cursor:pointer;
  isolation:isolate;
}
.service-card::before {
  content:""; position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(41,171,226,.18) 0%, transparent 50%);
  opacity:0; transition:opacity .5s var(--ease-cinema);
  z-index:-1;
}
.service-card:hover {
  border-color:rgba(41,171,226,.45);
  box-shadow:0 30px 80px rgba(0,0,0,.5), 0 0 0 1px rgba(41,171,226,.2), 0 0 60px rgba(41,171,226,.15);
}
.service-card:hover::before { opacity:1; }

/* Animated shine that follows mouse via JS-set CSS vars */
.card-shine {
  position:absolute; inset:0;
  background:radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(41,171,226,.35), transparent 60%);
  opacity:0; transition:opacity .35s;
  pointer-events:none;
  mix-blend-mode:plus-lighter;
}
.service-card:hover .card-shine { opacity:1; }

.service-icon {
  width:56px; height:56px; border-radius:14px;
  display:grid; place-items:center;
  background:linear-gradient(135deg, var(--cyan) 0%, var(--cyan-hover) 100%);
  color:var(--white);
  margin-bottom:22px;
  box-shadow:0 12px 30px rgba(41,171,226,.35), inset 0 1px 0 rgba(255,255,255,.18);
  transform:translateZ(40px);
  transition:transform .6s var(--ease-cinema), box-shadow .6s var(--ease-cinema);
}
.service-card:hover .service-icon {
  transform:translateZ(60px) translateY(-4px);
  box-shadow:0 20px 45px rgba(41,171,226,.55);
}
.service-card h3 {
  font-family:var(--font-heading); font-size:21px; font-weight:700;
  color:var(--white); margin-bottom:12px;
  transform:translateZ(20px);
}
.service-card p {
  color:var(--gray-light); font-size:15px; line-height:1.65;
  margin-bottom:20px;
  transform:translateZ(10px);
}
.service-link {
  font-family:var(--font-heading); font-size:12px; font-weight:700;
  letter-spacing:1.5px; text-transform:uppercase;
  color:var(--cyan);
  display:inline-flex; align-items:center; gap:8px;
  transition:gap .35s var(--ease-cinema), color .25s;
}
.service-link i { font-style:normal; transition:transform .35s var(--ease-cinema); }
.service-card:hover .service-link { color:var(--cyan-soft); gap:14px; }
.service-card:hover .service-link i { transform:translateX(4px); }

@media (max-width:980px) { .services-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px) { .services-grid { grid-template-columns:1fr; } }

/* ─────────────────────────────────────────────────────────
   WHY CHOOSE — bg image with parallax + gradient grade
   ───────────────────────────────────────────────────────── */
.why-choose {
  position:relative;
  padding:160px 0 140px;
  overflow:hidden;
  isolation:isolate;
}
.why-bg-image {
  position:absolute; inset:-12%;
  background-size:cover; background-position:center;
  z-index:0;
  filter:saturate(.6) contrast(1.05);
  will-change:transform;
}
.why-bg-grade {
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(90deg, rgba(14,14,26,.96) 0%, rgba(14,14,26,.85) 35%, rgba(14,14,26,.5) 70%, rgba(14,14,26,.3) 100%),
    linear-gradient(180deg, rgba(14,14,26,.6) 0%, rgba(14,14,26,.85) 100%);
}
.why-choose .container { position:relative; z-index:2; }
.why-grid { display:grid; grid-template-columns:1fr; max-width:680px; }
.stats { margin-top:42px; display:grid; gap:22px; }
.stat-item {
  display:flex; align-items:flex-start; gap:18px;
  padding:18px 22px;
  background:rgba(14,14,26,.5);
  border:1px solid var(--line);
  border-radius:12px;
  backdrop-filter:blur(10px);
  transition:transform .5s var(--ease-cinema), border-color .4s, background .4s;
}
.stat-item:hover {
  transform:translateX(8px);
  border-color:rgba(41,171,226,.35);
  background:rgba(41,171,226,.06);
}
.stat-icon {
  width:42px; height:42px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(41,171,226,.15);
  color:var(--cyan);
  flex-shrink:0;
  border:1px solid rgba(41,171,226,.4);
}
.stat-text h4 {
  font-family:var(--font-heading); font-size:18px; font-weight:700;
  color:var(--white); margin-bottom:4px;
}
.stat-text p { color:var(--gray-light); font-size:14px; }

/* ─────────────────────────────────────────────────────────
   TESTIMONIALS
   ───────────────────────────────────────────────────────── */
.testimonials {
  padding:140px 0;
  background:var(--navy);
}
.testimonials-header { text-align:center; margin-bottom:64px; }
.testimonials-header .section-label { display:inline-flex; }
.testimonials-header .section-subtitle { margin:0 auto; }

.testimonials-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
}
.testimonial-card {
  position:relative;
  padding:38px 32px 32px;
  background:linear-gradient(180deg, rgba(34,34,58,.7) 0%, rgba(26,26,46,.7) 100%);
  border:1px solid var(--line);
  border-radius:var(--radius);
  transition:transform .6s var(--ease-cinema), border-color .4s, box-shadow .6s;
  isolation:isolate;
  overflow:hidden;
}
.testimonial-card::before {
  content:""; position:absolute; left:32px; top:30px; bottom:30px; width:3px;
  background:linear-gradient(180deg, var(--cyan), transparent);
  border-radius:3px;
}
.testimonial-card:hover {
  transform:translateY(-6px);
  border-color:rgba(41,171,226,.4);
  box-shadow:0 30px 70px rgba(0,0,0,.5), 0 0 50px rgba(41,171,226,.12);
}
.quote-mark {
  position:absolute; top:6px; right:18px;
  font-family:Georgia, serif;
  font-size:140px; line-height:1;
  color:rgba(41,171,226,.10);
  pointer-events:none;
  font-weight:700;
}
.stars { color:#FFC83D; font-size:16px; letter-spacing:2px; margin-bottom:18px; padding-left:18px; }
.testimonial-card blockquote {
  font-size:16px; line-height:1.75; color:var(--offwhite);
  margin-bottom:22px; padding-left:18px;
  font-style:italic;
}
.testimonial-card figcaption { padding-left:18px; }
.testimonial-card figcaption b { display:block; color:var(--white); font-weight:700; font-family:var(--font-heading); font-size:15px; }
.testimonial-card figcaption i { font-style:normal; color:var(--cyan); font-size:13px; letter-spacing:.5px; }

@media (max-width:980px) { .testimonials-grid { grid-template-columns:1fr; gap:18px; } }

/* ─────────────────────────────────────────────────────────
   PORTFOLIO — Ken Burns parallax tiles with depth frame
   ───────────────────────────────────────────────────────── */
.portfolio {
  padding:140px 0;
  background:var(--navy-mid);
  position:relative;
}
.portfolio-header { text-align:center; margin-bottom:60px; }
.portfolio-header .section-label { display:inline-flex; }
.portfolio-header .section-subtitle { margin:0 auto; }

.portfolio-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:20px;
}
.portfolio-item {
  position:relative;
  aspect-ratio:4/3;
  border-radius:var(--radius);
  overflow:hidden;
  cursor:pointer;
  isolation:isolate;
  transform-style:preserve-3d;
  transition:transform .7s var(--ease-cinema), box-shadow .7s var(--ease-cinema);
}
.portfolio-item:hover {
  transform:translateY(-6px) scale(1.005);
  box-shadow:0 40px 80px rgba(0,0,0,.6);
}

/* The image is its own scaling layer for Ken Burns */
.portfolio-img {
  position:absolute; inset:-6%;
  background-size:cover;
  background-position:center;
  filter:saturate(.85) contrast(1.05) brightness(.85);
  transition:transform 1.4s var(--ease-cinema), filter .8s;
  will-change:transform;
}
/* Continuous slow Ken Burns drift, direction set per-tile */
.portfolio-img[data-pan="left"]  { animation:kenLeft  18s var(--ease-cinema) infinite alternate; }
.portfolio-img[data-pan="right"] { animation:kenRight 18s var(--ease-cinema) infinite alternate; }
.portfolio-img[data-pan="up"]    { animation:kenUp    18s var(--ease-cinema) infinite alternate; }
.portfolio-img[data-pan="down"]  { animation:kenDown  18s var(--ease-cinema) infinite alternate; }
@keyframes kenLeft  { from { transform:scale(1.10) translate3d( 2%,0,0); } to { transform:scale(1.18) translate3d(-2%,-1%,0); } }
@keyframes kenRight { from { transform:scale(1.10) translate3d(-2%,0,0); } to { transform:scale(1.18) translate3d( 2%, 1%,0); } }
@keyframes kenUp    { from { transform:scale(1.10) translate3d(0, 2%,0); } to { transform:scale(1.18) translate3d(-1%,-2%,0); } }
@keyframes kenDown  { from { transform:scale(1.10) translate3d(0,-2%,0); } to { transform:scale(1.18) translate3d( 1%, 2%,0); } }

.portfolio-item:hover .portfolio-img {
  transform:scale(1.22);
  filter:saturate(1.1) contrast(1.05) brightness(.95);
}

/* Inner frame — gives the tile a "device viewport" feel */
.portfolio-frame {
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(14,14,26,0) 30%, rgba(14,14,26,.88) 100%);
  z-index:1;
}
.portfolio-frame::before {
  content:""; position:absolute; inset:10px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:10px;
  transition:border-color .5s;
}
.portfolio-item:hover .portfolio-frame::before {
  border-color:rgba(41,171,226,.5);
}

.portfolio-overlay {
  position:absolute; left:0; right:0; bottom:0; padding:24px 26px;
  z-index:2;
  transform:translateY(8px);
  transition:transform .6s var(--ease-cinema);
}
.portfolio-item:hover .portfolio-overlay { transform:translateY(0); }
.portfolio-overlay .tag {
  display:inline-block;
  font-family:var(--font-heading); font-size:10px; font-weight:700;
  letter-spacing:2px; text-transform:uppercase;
  padding:4px 10px;
  background:var(--cyan); color:var(--navy);
  border-radius:50px;
  margin-bottom:10px;
}
.portfolio-overlay h4 {
  font-family:var(--font-heading); font-size:20px; font-weight:700;
  color:var(--white); margin-bottom:4px;
}
.portfolio-overlay p {
  color:rgba(255,255,255,.75); font-size:13px; letter-spacing:.5px;
}

@media (max-width:980px) { .portfolio-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px) { .portfolio-grid { grid-template-columns:1fr; } }

/* ─────────────────────────────────────────────────────────
   CTA Banner
   ───────────────────────────────────────────────────────── */
.cta-banner {
  position:relative;
  padding:120px 0;
  overflow:hidden;
  isolation:isolate;
}
.cta-bg {
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(41,171,226,.45) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 50%, rgba(41,171,226,.30) 0%, transparent 55%),
    linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
}
.cta-bg::after {
  content:""; position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:40px 40px;
  mask:radial-gradient(ellipse at center, #000 0%, transparent 70%);
}
.cta-banner .container { text-align:center; max-width:780px; }
.cta-banner h2 {
  font-family:var(--font-heading);
  font-size:clamp(34px, 5vw, 56px);
  font-weight:800; line-height:1.1; letter-spacing:-1px;
  color:var(--white); margin-bottom:18px;
}
.cta-banner p {
  font-size:18px; color:rgba(255,255,255,.85); margin-bottom:36px; line-height:1.6;
}
.cta-banner-buttons { display:inline-flex; gap:14px; flex-wrap:wrap; justify-content:center; }

/* ─────────────────────────────────────────────────────────
   FAQ
   ───────────────────────────────────────────────────────── */
.niotech-faq {
  padding:140px 0 120px;
  background:var(--navy);
}
.faq-container { max-width:840px; margin:0 auto; padding:0 28px; }
.faq-section-title {
  font-family:var(--font-heading);
  font-size:clamp(34px, 4.5vw, 48px); font-weight:800;
  text-align:center; color:var(--white); margin-bottom:50px;
  letter-spacing:-.5px;
}
.faq-section-title span { color:var(--cyan); font-style:italic; }
.faq-list { display:grid; gap:14px; }
.faq-item {
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(34,34,58,.5) 0%, rgba(26,26,46,.5) 100%);
  border-radius:12px;
  overflow:hidden;
  transition:border-color .4s, background .4s;
}
.faq-item[open] {
  border-color:rgba(41,171,226,.4);
  background:linear-gradient(180deg, rgba(41,171,226,.08) 0%, rgba(26,26,46,.6) 100%);
}
.faq-item summary {
  padding:22px 28px;
  font-family:var(--font-heading); font-size:16px; font-weight:600;
  color:var(--white);
  cursor:pointer;
  list-style:none;
  display:flex; justify-content:space-between; align-items:center; gap:18px;
  transition:color .25s;
}
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after {
  content:""; width:20px; height:20px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2329ABE2' stroke-width='2.5' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>") center/contain no-repeat;
  flex-shrink:0;
  transition:transform .4s var(--ease-cinema);
}
.faq-item[open] summary::after { transform:rotate(180deg); }
.faq-item p {
  padding:0 28px 24px;
  color:var(--gray-light); font-size:15px; line-height:1.75;
  animation:faqOpen .55s var(--ease-cinema);
}
@keyframes faqOpen {
  from { opacity:0; transform:translateY(-8px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ─────────────────────────────────────────────────────────
   FOOTER
   ───────────────────────────────────────────────────────── */
.footer {
  background:#070710;
  padding:80px 0 30px;
  border-top:1px solid var(--line);
}
.footer-grid {
  display:grid; grid-template-columns:1.4fr repeat(3, 1fr);
  gap:48px; margin-bottom:50px;
}
.footer-brand {
  font-family:var(--font-heading); font-size:24px; font-weight:800;
  color:var(--white); letter-spacing:1.5px; margin-bottom:14px;
}
.footer-brand em { color:var(--cyan); font-style:normal; }
.footer-desc { color:var(--gray-light); font-size:14px; line-height:1.7; max-width:330px; }
.footer-col h4 {
  font-family:var(--font-heading); font-size:13px; font-weight:700;
  letter-spacing:2px; text-transform:uppercase;
  color:var(--white); margin-bottom:18px;
}
.footer-col a {
  display:block;
  color:var(--gray-light); font-size:14px;
  padding:5px 0;
  transition:color .25s, transform .25s;
}
.footer-col a:hover { color:var(--cyan); transform:translateX(4px); }
.footer-col p { color:var(--gray-light); font-size:14px; line-height:1.7; margin-bottom:6px; }
.footer-col .hours { font-size:12px; color:var(--gray); margin-top:14px; }
.footer-bottom {
  border-top:1px solid var(--line);
  padding-top:24px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px;
  color:var(--gray); font-size:12px; letter-spacing:.5px;
}
@media (max-width:880px) {
  .footer-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:560px) {
  .footer-grid { grid-template-columns:1fr; gap:32px; }
}

/* ─────────────────────────────────────────────────────────
   REVEAL ANIMATIONS (IntersectionObserver-driven)
   ───────────────────────────────────────────────────────── */
[data-reveal] {
  opacity:0;
  transform:translateY(36px);
  filter:blur(6px);
  transition:opacity 1s var(--ease-cinema), transform 1.1s var(--ease-cinema), filter .9s var(--ease-cinema);
  transition-delay:var(--d, 0s);
}
[data-reveal].is-in {
  opacity:1; transform:translateY(0); filter:blur(0);
}

/* ─────────────────────────────────────────────────────────
   SCROLL PROGRESS BAR + CANVAS PARTICLE LAYER
   ───────────────────────────────────────────────────────── */
.scroll-progress {
  position:fixed; top:0; left:0;
  height:3px; width:0;
  background:linear-gradient(90deg, var(--cyan-soft), var(--cyan), var(--cyan-hover));
  box-shadow:0 0 18px var(--cyan);
  z-index:99;
  transition:width .12s linear;
}

/* Magnetic button base */
.btn[data-magnetic] { will-change:transform; }

/* ─────────────────────────────────────────────────────────
   PAGE HERO (used on inner pages — smaller than home hero)
   ───────────────────────────────────────────────────────── */
.page-hero {
  position:relative; min-height:60vh;
  padding:160px 0 80px;
  display:flex; align-items:center;
  isolation:isolate;
  overflow:hidden;
}
.page-hero-bg {
  position:absolute; inset:-8%;
  background-size:cover; background-position:center;
  filter:saturate(.6) contrast(1.05) brightness(.55);
  z-index:0;
  will-change:transform;
  animation:heroBreath 18s var(--ease-cinema) infinite alternate;
}
.page-hero::before {
  content:""; position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(ellipse at 30% 50%, rgba(41,171,226,.18) 0%, transparent 55%),
    linear-gradient(180deg, rgba(14,14,26,.55) 0%, rgba(14,14,26,.92) 100%);
}
.page-hero .container { position:relative; z-index:3; }
.page-hero-content { max-width:780px; }
.page-hero h1 {
  font-family:var(--font-heading);
  font-size:clamp(40px,6vw,82px);
  font-weight:900; line-height:1.02; letter-spacing:-1.5px;
  color:var(--white); margin:14px 0 18px;
}
.page-hero h1 span {
  background:linear-gradient(180deg, var(--cyan-soft), var(--cyan));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  font-style:italic;
}
.page-hero p {
  font-size:18px; color:rgba(255,255,255,.8);
  max-width:600px; line-height:1.7;
}
.breadcrumbs {
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-heading); font-size:11px; font-weight:700;
  letter-spacing:2.5px; text-transform:uppercase;
  color:rgba(255,255,255,.55);
  margin-bottom:8px;
}
.breadcrumbs a { color:var(--cyan); }
.breadcrumbs span { color:rgba(255,255,255,.4); }

/* ─────────────────────────────────────────────────────────
   TIMELINE / VALUES / COUNTERS (about page)
   ───────────────────────────────────────────────────────── */
.split {
  display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;
}
.split img, .split .split-img {
  width:100%; aspect-ratio:4/3; border-radius:var(--radius);
  background-size:cover; background-position:center;
  box-shadow:0 30px 80px rgba(0,0,0,.5);
  position:relative;
}
.split .split-img::after {
  content:""; position:absolute; inset:0; border-radius:var(--radius);
  background:linear-gradient(180deg, transparent 60%, rgba(14,14,26,.5));
}
@media (max-width:880px) { .split { grid-template-columns:1fr; gap:40px; } }

.values-grid {
  display:grid; grid-template-columns:repeat(3, 1fr); gap:24px;
}
.value-card {
  padding:34px 26px;
  background:linear-gradient(180deg, rgba(34,34,58,.6) 0%, rgba(26,26,46,.6) 100%);
  border:1px solid var(--line);
  border-radius:var(--radius);
  transition:transform .55s var(--ease-cinema), border-color .4s, box-shadow .55s;
}
.value-card:hover {
  transform:translateY(-4px);
  border-color:rgba(41,171,226,.4);
  box-shadow:0 20px 50px rgba(0,0,0,.4);
}
.value-card .num {
  font-family:var(--font-heading); font-size:38px; font-weight:900;
  background:linear-gradient(180deg, var(--cyan-soft), var(--cyan));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  margin-bottom:8px; line-height:1;
}
.value-card h4 { color:var(--white); font-family:var(--font-heading); font-size:18px; margin-bottom:8px; }
.value-card p { color:var(--gray-light); font-size:14px; line-height:1.7; }
@media (max-width:880px) { .values-grid { grid-template-columns:1fr; } }

.counters {
  display:grid; grid-template-columns:repeat(4, 1fr); gap:24px;
  padding:40px 0;
}
.counter {
  text-align:center;
  padding:20px;
  border-right:1px solid var(--line);
}
.counter:last-child { border-right:none; }
.counter-num {
  font-family:var(--font-heading); font-size:54px; font-weight:900;
  color:var(--white);
  line-height:1;
  background:linear-gradient(180deg, #fff, #9CA9C0);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.counter-num i { color:var(--cyan); font-style:normal; }
.counter-label {
  font-family:var(--font-heading); font-size:11px; font-weight:700;
  letter-spacing:2px; text-transform:uppercase;
  color:var(--gray-light); margin-top:8px;
}
@media (max-width:760px) {
  .counters { grid-template-columns:repeat(2, 1fr); }
  .counter:nth-child(2n) { border-right:none; }
}

/* ─────────────────────────────────────────────────────────
   GALLERY FILTER + MASONRY
   ───────────────────────────────────────────────────────── */
.gallery-filter {
  display:flex; flex-wrap:wrap; gap:8px;
  justify-content:center; margin-bottom:40px;
}
.filter-btn {
  font-family:var(--font-heading); font-size:11px; font-weight:700;
  letter-spacing:1.8px; text-transform:uppercase;
  padding:10px 20px;
  background:transparent;
  border:1px solid var(--line);
  border-radius:50px;
  color:rgba(255,255,255,.7);
  cursor:pointer;
  transition:all .35s var(--ease-cinema);
}
.filter-btn:hover { color:var(--white); border-color:rgba(41,171,226,.5); }
.filter-btn.is-active {
  background:var(--cyan); border-color:var(--cyan);
  color:var(--navy);
  box-shadow:0 8px 24px rgba(41,171,226,.35);
}

.gallery-masonry {
  column-count:3; column-gap:18px;
}
.gallery-item {
  display:block;
  margin-bottom:18px;
  break-inside:avoid;
  border-radius:var(--radius);
  overflow:hidden;
  position:relative;
  cursor:pointer;
  transition:transform .55s var(--ease-cinema), box-shadow .55s, opacity .35s, scale .35s;
  isolation:isolate;
}
.gallery-item.is-hidden { display:none; }
.gallery-item img {
  width:100%; display:block;
  filter:saturate(.85) brightness(.9);
  transition:filter .6s, transform 1.2s var(--ease-cinema);
}
.gallery-item:hover { transform:translateY(-6px); box-shadow:0 30px 60px rgba(0,0,0,.55); }
.gallery-item:hover img { filter:saturate(1.05) brightness(1); transform:scale(1.06); }
.gallery-item-overlay {
  position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 50%, rgba(14,14,26,.92) 100%);
  display:flex; align-items:flex-end;
  padding:24px;
  opacity:0; transition:opacity .35s var(--ease-cinema);
}
.gallery-item:hover .gallery-item-overlay { opacity:1; }
.gallery-item-overlay h4 {
  font-family:var(--font-heading); font-size:18px; color:var(--white); font-weight:700;
}
.gallery-item-overlay p { font-size:13px; color:var(--cyan); }
@media (max-width:980px) { .gallery-masonry { column-count:2; } }
@media (max-width:600px) { .gallery-masonry { column-count:1; } }

/* ─────────────────────────────────────────────────────────
   CONTACT FORM + INFO
   ───────────────────────────────────────────────────────── */
.contact-grid {
  display:grid; grid-template-columns:1.1fr 1fr; gap:60px;
}
.contact-info {
  padding:42px 38px;
  background:linear-gradient(180deg, rgba(34,34,58,.6) 0%, rgba(26,26,46,.6) 100%);
  border:1px solid var(--line);
  border-radius:var(--radius);
}
.contact-info h3 { color:var(--white); font-family:var(--font-heading); font-size:22px; margin-bottom:24px; }
.contact-info-item {
  display:flex; align-items:flex-start; gap:16px; padding:16px 0;
  border-bottom:1px solid var(--line);
}
.contact-info-item:last-child { border-bottom:none; }
.contact-info-item .icon {
  width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(41,171,226,.15);
  color:var(--cyan); flex-shrink:0;
  border:1px solid rgba(41,171,226,.4);
}
.contact-info-item .text h5 {
  font-family:var(--font-heading); font-size:13px;
  color:var(--cyan); letter-spacing:1.5px; text-transform:uppercase;
  margin-bottom:4px;
}
.contact-info-item .text p, .contact-info-item .text a {
  color:var(--white); font-size:15px; line-height:1.6;
}
.contact-info-item .text a:hover { color:var(--cyan); }

.contact-form {
  padding:42px 38px;
  background:linear-gradient(180deg, rgba(34,34,58,.6) 0%, rgba(26,26,46,.6) 100%);
  border:1px solid var(--line);
  border-radius:var(--radius);
}
.contact-form h3 { color:var(--white); font-family:var(--font-heading); font-size:22px; margin-bottom:24px; }
.field { margin-bottom:18px; }
.field label {
  display:block;
  font-family:var(--font-heading); font-size:11px; font-weight:700;
  letter-spacing:1.5px; text-transform:uppercase;
  color:var(--cyan); margin-bottom:8px;
}
.field input, .field textarea, .field select {
  width:100%;
  padding:14px 16px;
  background:rgba(14,14,26,.5);
  border:1px solid var(--line);
  border-radius:8px;
  color:var(--white);
  font-family:var(--font-body); font-size:15px;
  transition:border-color .25s, background .25s, box-shadow .25s;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline:none;
  border-color:rgba(41,171,226,.6);
  background:rgba(14,14,26,.7);
  box-shadow:0 0 0 4px rgba(41,171,226,.12);
}
.field textarea { resize:vertical; min-height:140px; }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:600px) { .field-row { grid-template-columns:1fr; } }
@media (max-width:880px) { .contact-grid { grid-template-columns:1fr; } }

/* ─────────────────────────────────────────────────────────
   GENERIC SECTION
   ───────────────────────────────────────────────────────── */
.section {
  padding:120px 0;
  position:relative;
}
.section--dark { background:var(--navy-mid); }
.section-head {
  text-align:center; max-width:720px; margin:0 auto 60px;
}
.section-head .section-label { display:inline-flex; }
.section-head .section-subtitle { margin:0 auto; }

/* ─────────────────────────────────────────────────────────
   Reduced motion
   ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  html { scroll-behavior:auto; }
  .cine-grain, .hero-video { animation:none !important; }
  [data-reveal] { opacity:1 !important; transform:none !important; filter:none !important; }
  [data-mask-reveal] { opacity:1 !important; transform:none !important; filter:none !important; animation:none !important; }
}