*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
    a { text-decoration: none; color: inherit; }
    html { scroll-behavior:auto; }
    body {
      font-family: 'Inter', sans-serif;
      background: #f0f0ec;
      color: #0a0a14;
      overflow-x: clip;
    }
    ::-webkit-scrollbar { width:4px; }
    ::-webkit-scrollbar-track { background:#f0f0ec; }
    ::-webkit-scrollbar-thumb { background:#0a0a14; border-radius:2px; }

    /* ══ 3-D TUBE CANVAS (fixed behind everything) ══ */
    #tube-bg {
      position:fixed; top:0; left:0;
      width:100%; height:100%;
      z-index:0; pointer-events:none;
    }
    /* All page content sits above the tube */
    #root { position:relative; z-index:1; }

    /* ── UNIVERSAL GRID TEXTURE ── */
    .grid-bg {
      background-image:
        linear-gradient(rgba(0,0,0,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,0.05) 1px, transparent 1px);
      background-size: 80px 80px;
    }
    .grid-bg-sm {
      background-image:
        linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px);
      background-size: 40px 40px;
    }

    /* ── ANIMATED GRID CANVAS (hero) ── */
    #hero-grid-canvas {
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
      z-index: 0;
      pointer-events: none;
      will-change: transform;
    }
    #home { position: relative; overflow: hidden; }

    /* ── SECTION BANDS — semi-transparent so tube shows through ── */
    .bg-white { background: rgba(255,255,255,0.82) !important; backdrop-filter:blur(20px) !important; }
    .bg-off   { background: rgba(240,240,236,0.80) !important; backdrop-filter:blur(20px) !important; }

    /* ── HERO OVERRIDE ── */
    #home { background: rgba(245,245,241,0.88) !important; }

    /* ══════════════
       NAVBAR
    ══════════════ */
    .navbar {
      position: fixed; top:0; width:100%; z-index:1000;
      padding: 0 5%;
      transition: all 0.35s;
    }
    .navbar.scrolled {
      background: rgba(242,242,238,0.94);
      backdrop-filter: blur(20px);
      border-bottom: 1px solid rgba(0,0,0,0.07);
    }
    .nav-inner {
      max-width:1260px; margin:0 auto;
      display:flex; align-items:center; justify-content:space-between;
      height:66px;
    }
    .logo { display:flex; align-items:center; gap:9px; cursor:pointer; text-decoration:none; }
    .logo-mark {
      width:32px; height:32px; border-radius:9px;
      background:#0a0a14;
      display:flex; align-items:center; justify-content:center;
    }
    .logo-text { font-weight:800; font-size:1rem; letter-spacing:-0.03em; color:#0a0a14; }
    .logo-dot { color:#888; font-weight:300; }
    .nav-links { display:flex; align-items:center; gap:2px; }
    .nav-link {
      font-size:0.83rem; font-weight:500; color:#555;
      text-decoration:none; transition:color 0.2s;
      padding:8px 14px; border-radius:8px; display:flex; align-items:center; gap:4px;
      cursor:pointer; background:transparent; border:none; font-family:'Inter',sans-serif;
    }
    .nav-link:hover, .nav-link.active { color:#0a0a14; background:rgba(0,0,0,0.05); }
    .nav-link-chevron { font-size:0.6rem; transition:transform 0.2s; }
    .nav-link.active .nav-link-chevron { transform:rotate(180deg); }
    .nav-cta {
      display:inline-flex; align-items:center; gap:7px;
      background:#0a0a14; color:white;
      padding:9px 20px; border-radius:99px;
      font-size:0.82rem; font-weight:600;
      border:none; cursor:pointer; transition:all 0.25s;
    }
    .nav-cta:hover { background:#333; transform:translateY(-1px); }
    .nav-menu-btn {
      width:38px; height:38px; border-radius:50%;
      background:#0a0a14; color:white;
      display:none; align-items:center; justify-content:center;
      border:none; cursor:pointer; font-size:0.95rem;
    }

    /* ── DARK HERO NAVBAR ── */
    .navbar.nav-dark-mode { background: rgba(10,10,20,0.15) !important; }
    .navbar.nav-dark-mode .nav-link { color: rgba(255,255,255,0.82); }
    .navbar.nav-dark-mode .nav-link:hover,
    .navbar.nav-dark-mode .nav-link.active { color: #fff; background: rgba(255,255,255,0.08); }
    .navbar.nav-dark-mode .nav-cta {
      background: rgba(255,255,255,0.12);
      color: #fff;
      border: 1px solid rgba(255,255,255,0.18);
    }
    .navbar.nav-dark-mode .nav-cta:hover { background: rgba(255,255,255,0.22); transform: translateY(-1px); }
    .navbar.nav-dark-mode .hdr-logo { filter: brightness(0) invert(1); }
    .navbar.nav-dark-mode .nav-menu-btn { background: rgba(255,255,255,0.12); }

    /* ══════════════
       MEGA MENU
    ══════════════ */
    .mega-overlay {
      position:fixed; inset:0; top:66px; z-index:997;
      pointer-events:none;
    }
    .mega-overlay.open { pointer-events:all; }
    .mega-panel {
      position:fixed; top:66px; left:0; right:0; z-index:998;
      background: rgba(252,252,249,0.98);
      backdrop-filter: blur(32px);
      border-bottom:1px solid rgba(0,0,0,0.07);
      box-shadow: 0 24px 80px rgba(0,0,0,0.10), 0 4px 16px rgba(0,0,0,0.05);
      opacity:0; transform:translateY(-12px);
      pointer-events:none;
      transition: opacity 0.28s cubic-bezier(0.23,1,0.32,1),
                  transform 0.28s cubic-bezier(0.23,1,0.32,1);
    }
    .mega-panel.open {
      opacity:1; transform:translateY(0); pointer-events:all;
    }
    .mega-inner {
      max-width:1260px; margin:0 auto; padding:40px 5% 44px;
    }

    /* ── SERVICES MEGA ─────────────────────────────────────── */
    .mega-svc-grid {
      display:grid; grid-template-columns:260px 1fr; gap:0;
    }
    .mega-svc-left {
      border-right:1px solid rgba(0,0,0,0.07);
      padding-right:36px;
      display:flex; flex-direction:column; gap:16px;
    }
    .mega-label {
      font-size:0.65rem; font-weight:700; letter-spacing:0.14em;
      text-transform:uppercase; color:#aaa;
      margin-bottom:16px;
      display:flex; align-items:center; gap:10px;
    }
    .mega-label::after { content:''; flex:1; height:1px; background:rgba(0,0,0,0.07); }
    .mega-svc-featured {
      background:linear-gradient(135deg,rgba(14,165,233,0.08),rgba(16,185,129,0.05));
      border:1px solid rgba(14,165,233,0.2);
      border-radius:18px; padding:22px; cursor:pointer;
      transition:all 0.25s; flex:1;
    }
    .mega-svc-featured:hover {
      background:linear-gradient(135deg,rgba(14,165,233,0.14),rgba(16,185,129,0.1));
      border-color:rgba(14,165,233,0.4);
      transform:translateY(-2px);
    }
    .mega-svc-featured-icon {
      width:42px; height:42px; border-radius:12px;
      background:rgba(14,165,233,0.12); border:1px solid rgba(14,165,233,0.2);
      display:flex; align-items:center; justify-content:center;
      font-size:1.2rem; margin-bottom:14px;
    }
    .mega-svc-featured-title {
      font-weight:800; font-size:0.95rem; color:#0a0a14; margin-bottom:7px; letter-spacing:-0.02em;
    }
    .mega-svc-featured-desc {
      font-size:0.78rem; color:#888; line-height:1.65;
    }
    .mega-svc-featured-cta {
      margin-top:16px; font-size:0.75rem; font-weight:700;
      color:#0ea5e9; display:flex; align-items:center; gap:6px;
    }
    .mega-svc-stat {
      padding:16px 18px;
      background:#f8f8f5;
      border:1px solid rgba(0,0,0,0.07);
      border-radius:14px;
    }
    .mega-svc-stat-label { font-size:0.68rem; font-weight:600; color:#aaa; margin-bottom:4px; }
    .mega-svc-stat-value { font-size:1.5rem; font-weight:900; letter-spacing:-0.05em; color:#0a0a14; }
    .mega-svc-stat-sub { font-size:0.7rem; color:#aaa; margin-top:2px; }

    .mega-svc-items {
      display:grid; grid-template-columns:repeat(3,1fr); gap:6px;
      padding-left:36px;
    }
    .mega-svc-item {
      display:flex; align-items:flex-start; gap:12px;
      padding:14px 16px; border-radius:14px; cursor:pointer;
      transition:all 0.2s; text-decoration:none;
      border:1px solid transparent;
    }
    .mega-svc-item:hover {
      background:#f5f5f2;
      border-color:rgba(0,0,0,0.06);
      transform:translateY(-1px);
    }
    .mega-svc-icon {
      width:38px; height:38px; min-width:38px; border-radius:11px;
      display:flex; align-items:center; justify-content:center;
      font-size:1.1rem; border:1px solid rgba(0,0,0,0.06);
      flex-shrink:0;
    }
    .mega-svc-name { font-size:0.84rem; font-weight:600; color:#0a0a14; margin-bottom:4px; }
    .mega-svc-desc { font-size:0.74rem; color:#aaa; line-height:1.5; }

    /* ── PRODUCTS MEGA ─────────────────────────────────────── */
    .mega-prod-header {
      display:flex; justify-content:space-between; align-items:center;
      margin-bottom:28px; padding-bottom:20px;
      border-bottom:1px solid rgba(0,0,0,0.07);
    }
    .mega-prod-header-eyebrow {
      font-size:0.65rem; font-weight:700; letter-spacing:0.14em;
      text-transform:uppercase; color:#aaa; margin-bottom:5px;
    }
    .mega-prod-header-title {
      font-size:1.15rem; font-weight:800; letter-spacing:-0.03em; color:#0a0a14;
    }
    .mega-prod-grid-new {
      display:grid; grid-template-columns:repeat(4,1fr); gap:10px;
    }
    .mega-prod-card {
      display:flex; align-items:center; gap:12px;
      padding:14px 16px; border-radius:14px; cursor:pointer;
      background:#f8f8f5;
      border:1px solid rgba(0,0,0,0.07);
      transition:all 0.2s;
    }
    .mega-prod-card:hover {
      background:#f0f0ec;
      border-color:rgba(0,0,0,0.12);
      transform:translateY(-2px);
      box-shadow:0 6px 20px rgba(0,0,0,0.07);
    }
    .mega-prod-card-icon {
      width:36px; height:36px; min-width:36px; border-radius:10px;
      background:#fff; border:1px solid rgba(0,0,0,0.08);
      display:flex; align-items:center; justify-content:center;
      font-size:1rem; flex-shrink:0;
    }
    .mega-prod-card-name {
      font-size:0.82rem; font-weight:600; color:#0a0a14;
      line-height:1.3; flex:1;
    }
    .mega-prod-badge {
      font-size:0.58rem; font-weight:700; letter-spacing:0.06em;
      background:linear-gradient(135deg,#0ea5e9,#10b981);
      color:white; padding:2px 7px; border-radius:99px;
      margin-left:auto; flex-shrink:0; text-transform:uppercase;
    }

    /* ── INSIGHTS + CAREERS MEGA ───────────────────────────── */
    .mega-simple-grid {
      display:grid; grid-template-columns:repeat(3,1fr); gap:12px;
    }
    .mega-article {
      border:1px solid rgba(0,0,0,0.07); border-radius:14px;
      padding:18px; cursor:pointer; transition:all 0.22s;
    }
    .mega-article:hover {
      border-color:rgba(0,0,0,0.14);
      transform:translateY(-2px);
      background:#f8f8f5;
      box-shadow:0 8px 24px rgba(0,0,0,0.06);
    }
    .mega-art-tag {
      font-size:0.63rem; font-weight:700; letter-spacing:0.1em;
      text-transform:uppercase; color:#aaa; margin-bottom:8px;
    }
    .mega-art-title { font-size:0.85rem; font-weight:700; color:#0a0a14; line-height:1.45; margin-bottom:6px; }
    .mega-art-meta { font-size:0.73rem; color:#aaa; }
    .mega-job {
      border:1px solid rgba(0,0,0,0.07); border-radius:12px;
      padding:14px 16px; cursor:pointer; transition:all 0.2s;
      display:flex; align-items:center; justify-content:space-between;
    }
    .mega-job:hover { background:#f8f8f5; border-color:rgba(0,0,0,0.12); }
    .mega-job-title { font-size:0.84rem; font-weight:600; color:#0a0a14; margin-bottom:3px; }
    .mega-job-meta { font-size:0.73rem; color:#aaa; }
    .mega-job-badge { font-size:0.7rem; font-weight:600; background:#f0f0ec; color:#555; padding:3px 10px; border-radius:99px; white-space:nowrap; }

    /* ══════════════
       HERO  — Brucira editorial style
    ══════════════ */
    #home {
      position:relative; background:rgba(240,240,236,0.75);
      min-height:100vh; overflow:hidden;
      display:flex; flex-direction:column;
    }
    #home::before {
      content:'';
      position:absolute; inset:0;
      background-image:
        linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px);
      background-size: 80px 80px;
      z-index:0; pointer-events:none;
    }
    .hero-content {
      position:relative; z-index:2;
      padding:88px 5% 72px;
      max-width:1260px; margin:0 auto; width:100%;
      display:flex; flex-direction:column; justify-content:space-between; flex:1;
    }

    /* BEYOND SECTION */
    .beyond-section {
      position: relative;
      height: 420vh;
      background: #050505;
      color: #f5f1ea;
      overflow: clip;
      border-top: 1px solid rgba(255,255,255,0.08);
      border-bottom: 1px solid rgba(255,255,255,0.08);
    }
    .beyond-sticky {
      position: sticky;
      top: 0;
      height: 100vh;
      overflow: hidden;
      background:
        radial-gradient(circle at 20% 20%, rgba(255,255,255,0.05), transparent 28%),
        radial-gradient(circle at 80% 70%, rgba(255,255,255,0.04), transparent 30%),
        #050505;
    }
    .beyond-frame {
      position: relative;
      height: 100%;
      padding: 76px 32px 0;
    }
    .beyond-topbar {
      position: relative;
      z-index: 3;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 18px;
    }
    .beyond-kicker {
      font-size: 0.95rem;
      font-weight: 500;
      color: rgba(245,241,234,0.82);
      letter-spacing: -0.03em;
    }
    .beyond-pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: none;
      border-radius: 999px;
      padding: 12px 22px;
      background: #fff;
      color: #050505;
      font-family: 'Inter', sans-serif;
      font-size: 0.82rem;
      font-weight: 700;
      text-transform: uppercase;
      cursor: pointer;
    }
    .beyond-copy {
      position: relative;
      z-index: 3;
      display: flex;
      justify-content: flex-end;
      margin-bottom: 4vh;
      pointer-events: none;
    }
    .beyond-lead {
      max-width: 360px;
      font-size: 1rem;
      line-height: 1.7;
      color: rgba(245,241,234,0.72);
    }
    .beyond-marquee {
      --beyond-progress: 0;
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      gap: 0;
      padding: 5vh 0 0;
      transform: translateY(calc(var(--beyond-progress) * -58vh));
      will-change: transform;
    }
    .beyond-line {
      white-space: nowrap;
      font-size: clamp(4.8rem, 12vw, 11rem);
      line-height: 0.9;
      font-weight: 800;
      letter-spacing: -0.08em;
      color: #f7f3ee;
      padding: 0 2vw;
      transform-origin: center center;
      opacity: 0.98;
      text-transform: uppercase;
      will-change: transform, opacity;
    }
    .beyond-line:nth-child(even) {
      --offset: 1.2;
    }
    .beyond-line:nth-child(odd) {
      --offset: -1;
    }
    .beyond-line::after {
      content: "";
      display: block;
      width: 100%;
      height: 1px;
      margin-top: 0.08em;
      background: rgba(255,255,255,0.08);
    }
    .beyond-line-main {
      margin-top: 0;
    }
    @media(max-width:900px) {
      .beyond-section {
        height: 320vh;
      }
      .beyond-frame {
        padding: 74px 18px 0;
      }
      .beyond-copy {
        justify-content: flex-start;
        margin-bottom: 8vh;
      }
      .beyond-lead {
        max-width: 280px;
        font-size: 0.92rem;
      }
      .beyond-marquee {
        padding: 8vh 0 0;
        transform: translateY(calc(var(--beyond-progress) * -34vh));
      }
      .beyond-line {
        font-size: clamp(3.8rem, 16vw, 7rem);
        padding: 0 12px;
      }
    }
    @media(max-width:600px) {
      .beyond-section {
        height: 200vh;
      }
      .beyond-frame {
        padding: 0;
      }
      .beyond-marquee {
        padding: 0;
        justify-content: flex-start;
        gap: 0;
        transform: translateY(calc(var(--beyond-progress) * -18vh));
      }
      .beyond-line {
        font-size: clamp(3rem, 18vw, 4.5rem);
      }
    }

    /* Top meta bar */
    .hero-meta {
      display:flex; justify-content:space-between; align-items:center;
      margin-bottom:52px; flex-wrap:wrap; gap:12px;
    }
    .hero-badge {
      display:inline-flex; align-items:center; gap:7px;
      background:#0a0a14; color:#f0f0ec;
      padding:6px 14px 6px 8px; border-radius:99px;
      font-size:0.71rem; font-weight:700; letter-spacing:0.04em;
    }
    .hero-badge-dot {
      width:20px; height:20px; border-radius:50%;
      background:rgba(255,255,255,0.15);
      display:flex; align-items:center; justify-content:center;
      font-size:0.6rem;
    }
    .hero-avail {
      display:flex; align-items:center; gap:8px;
      font-size:0.78rem; font-weight:600; color:#0a0a14;
    }
    .hero-avail::before {
      content:''; width:7px; height:7px; border-radius:50%;
      background:#22c55e; display:block;
      box-shadow:0 0 0 3px rgba(34,197,94,0.2);
    }

    /* Big editorial headline */
    .bh1 {
      font-size: clamp(3.8rem,9vw,9.2rem);
      line-height: 0.93;
      letter-spacing: -0.04em;
      margin-bottom: 0;
    }
    .bh1-light  { font-weight:200; color:#aaa; display:block; }
    .bh1-bold   {
      font-weight:900; display:block;
      background: linear-gradient(90deg, #0a0a14 0%, #0a0a14 30%, #888 45%, #c0c0c0 50%, #888 55%, #0a0a14 70%, #0a0a14 100%) !important;
      background-size: 300% 100% !important;
      -webkit-background-clip: text !important; background-clip: text !important;
      -webkit-text-fill-color: transparent !important;
      animation: silverShimmer 4s ease-in-out infinite !important;
    }
    @keyframes silverShimmer {
      0%   { background-position: 100% 50%; }
      100% { background-position: -100% 50%; }
    }
    .bh1-italic { font-weight:300; font-style:italic; color:#666; display:block; }
    .bh1-outline {
      font-weight:900; color:transparent;
      -webkit-text-stroke:2px #0a0a14;
      display:block;
    }

    /* Bottom hero row */
    .hero-bottom {
      display:flex; justify-content:space-between; align-items:flex-end;
      margin-top:52px; flex-wrap:wrap; gap:32px;
    }
    .hero-desc {
      max-width:420px;
    }
    .hero-desc p { font-size:0.96rem; color:#666; line-height:1.75; margin-bottom:28px; }
    .hero-actions { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
    .hero-stat-box {
      text-align:right;
    }
    .hero-stat-num {
      font-size:clamp(2.8rem,5vw,4.8rem); font-weight:900;
      letter-spacing:-0.05em; line-height:1; color:#0a0a14;
    }
    .hero-stat-lbl { font-size:0.78rem; color:#aaa; margin-top:4px; font-weight:500; }

    /* Floating award card */
    .hero-award {
      position:absolute; top:100px; right:5%; z-index:4;
      background:rgba(255,255,255,0.92); backdrop-filter:blur(14px);
      border:1px solid rgba(0,0,0,0.08);
      border-radius:16px; padding:16px 20px;
      box-shadow:0 8px 40px rgba(0,0,0,0.08);
      transition:transform 0.35s cubic-bezier(0.23,1,0.32,1),box-shadow 0.35s;
      transform-style:preserve-3d; width:210px;
    }
    .hero-award-icon { font-size:1.6rem; margin-bottom:8px; }
    .hero-award-title { font-size:0.82rem; font-weight:700; color:#0a0a14; margin-bottom:4px; }
    .hero-award-sub { font-size:0.73rem; color:#aaa; line-height:1.5; }
    .hero-award-tag {
      margin-top:12px; display:inline-flex; align-items:center; gap:5px;
      font-size:0.65rem; font-weight:700; color:#22c55e; letter-spacing:0.06em;
      text-transform:uppercase;
    }

    /* ── 3D Floating Geometric Shapes ── */
    .hero-shapes { position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
    .hero-shape {
      position:absolute;
      transform-style:preserve-3d;
      animation:shapeFloat 12s ease-in-out infinite;
    }
    .hero-shape-inner {
      width:100%; height:100%;
      transform-style:preserve-3d;
      animation:shapeSpin 20s linear infinite;
    }
    .hero-shape--cube { width:60px; height:60px; top:15%; right:18%; animation-delay:-2s; }
    .hero-shape--cube .hero-shape-inner { animation-duration:25s; }
    .hero-shape--pyramid { width:50px; height:50px; top:65%; right:12%; animation-delay:-5s; }
    .hero-shape--pyramid .hero-shape-inner { animation-duration:18s; animation-direction:reverse; }
    .hero-shape--ring { width:80px; height:80px; top:30%; left:8%; animation-delay:-8s; }
    .hero-shape--ring .hero-shape-inner { animation-duration:30s; }
    .hero-shape--octa { width:45px; height:45px; bottom:20%; left:15%; animation-delay:-3s; }
    .hero-shape--octa .hero-shape-inner { animation-duration:22s; animation-direction:reverse; }
    .hero-shape--cross { width:40px; height:40px; top:12%; left:35%; animation-delay:-7s; }
    .hero-shape--cross .hero-shape-inner { animation-duration:28s; }

    /* Cube faces */
    .cube-face {
      position:absolute; width:60px; height:60px;
      border:1.5px solid rgba(10,10,20,0.08);
      background:rgba(10,10,20,0.015);
      backdrop-filter:blur(2px);
    }
    .cube-face:nth-child(1) { transform:translateZ(30px); }
    .cube-face:nth-child(2) { transform:rotateY(180deg) translateZ(30px); }
    .cube-face:nth-child(3) { transform:rotateY(90deg) translateZ(30px); }
    .cube-face:nth-child(4) { transform:rotateY(-90deg) translateZ(30px); }
    .cube-face:nth-child(5) { transform:rotateX(90deg) translateZ(30px); }
    .cube-face:nth-child(6) { transform:rotateX(-90deg) translateZ(30px); }

    /* Pyramid (tetrahedron approximation with CSS triangles) */
    .pyramid-face {
      position:absolute; width:0; height:0;
      border-left:25px solid transparent;
      border-right:25px solid transparent;
      border-bottom:43px solid rgba(10,10,20,0.06);
    }
    .pyramid-face:nth-child(1) { transform:translateX(0) translateY(0); }
    .pyramid-face:nth-child(2) { transform:rotateY(120deg) translateZ(14px); }
    .pyramid-face:nth-child(3) { transform:rotateY(240deg) translateZ(14px); }

    /* Ring (torus approximation) */
    .shape-ring-el {
      position:absolute; top:50%; left:50%;
      width:70px; height:70px;
      border:1.5px solid rgba(10,10,20,0.07);
      border-radius:50%;
      transform:translate(-50%,-50%);
    }
    .shape-ring-el:nth-child(2) { transform:translate(-50%,-50%) rotateX(60deg); }
    .shape-ring-el:nth-child(3) { transform:translate(-50%,-50%) rotateX(120deg); }
    .shape-ring-el:nth-child(4) { transform:translate(-50%,-50%) rotateY(60deg); }

    /* Octahedron */
    .octa-face {
      position:absolute; width:0; height:0;
      border-left:22px solid transparent;
      border-right:22px solid transparent;
      border-bottom:38px solid rgba(10,10,20,0.05);
    }
    .octa-face:nth-child(1) { transform:translateX(0) rotateZ(0deg); }
    .octa-face:nth-child(2) { transform:rotateZ(90deg); }
    .octa-face:nth-child(3) { transform:rotateZ(180deg); }
    .octa-face:nth-child(4) { transform:rotateZ(270deg); }

    /* 3D Cross */
    .cross-bar {
      position:absolute; top:50%; left:50%;
      width:40px; height:6px;
      background:rgba(10,10,20,0.06);
      border-radius:3px;
      transform:translate(-50%,-50%);
    }
    .cross-bar:nth-child(2) { transform:translate(-50%,-50%) rotateZ(90deg); }
    .cross-bar:nth-child(3) { transform:translate(-50%,-50%) rotateX(90deg); }

    @keyframes shapeFloat {
      0%,100% { transform:translateY(0) translateX(0); }
      25% { transform:translateY(-20px) translateX(8px); }
      50% { transform:translateY(-8px) translateX(-6px); }
      75% { transform:translateY(-25px) translateX(4px); }
    }
    @keyframes shapeSpin {
      from { transform:rotateX(0) rotateY(0) rotateZ(0); }
      to { transform:rotateX(360deg) rotateY(360deg) rotateZ(180deg); }
    }

    /* Shape entrance stagger */
    .hero-shape { opacity:0; animation:shapeFloat 12s ease-in-out infinite, shapeAppear 1.2s cubic-bezier(.16,1,.3,1) forwards; }
    .hero-shape--cube { animation-delay: -2s, 1.5s; }
    .hero-shape--pyramid { animation-delay: -5s, 1.8s; }
    .hero-shape--ring { animation-delay: -8s, 2.1s; }
    .hero-shape--octa { animation-delay: -3s, 2.4s; }
    .hero-shape--cross { animation-delay: -7s, 2.7s; }
    @keyframes shapeAppear {
      from { opacity:0; transform:scale(0.3) translateY(40px); }
      to { opacity:1; transform:scale(1) translateY(0); }
    }

    /* ── Cursor Glow Orb ── */
    .hero-glow-orb {
      position:absolute; z-index:1; pointer-events:none;
      width:350px; height:350px;
      border-radius:50%;
      background:radial-gradient(circle, rgba(14,165,233,0.08) 0%, rgba(14,165,233,0.03) 35%, transparent 70%);
      transform:translate(-50%,-50%);
      transition:left 0.3s ease-out, top 0.3s ease-out;
      filter:blur(20px);
      mix-blend-mode:multiply;
    }

    /* ── Orbit keywords ring ── */
    .hero-orbit {
      position:relative; width:200px; height:200px;
      margin-left:auto;
    }
    .hero-orbit-ring {
      position:absolute; inset:0;
      border:1px dashed rgba(10,10,20,0.1);
      border-radius:50%;
      animation:orbitSpin 20s linear infinite;
    }
    .hero-orbit-keyword {
      position:absolute;
      font-size:0.6rem; font-weight:700; letter-spacing:0.08em;
      text-transform:uppercase; color:rgba(10,10,20,0.35);
      background:rgba(255,255,255,0.7); backdrop-filter:blur(6px);
      padding:4px 10px; border-radius:99px;
      border:1px solid rgba(10,10,20,0.06);
      white-space:nowrap;
      animation:orbitSpin 20s linear infinite reverse;
    }
    .hero-orbit-center {
      position:absolute; top:50%; left:50%;
      transform:translate(-50%,-50%);
      text-align:center;
    }
    @keyframes orbitSpin { from{transform:rotate(0)} to{transform:rotate(360deg)} }

    /* Scroll cue */
    .scroll-ind {
      position:absolute; bottom:36px; left:5%; z-index:4;
      display:flex; align-items:center; gap:8px;
      color:#aaa; font-size:0.78rem; font-weight:500; letter-spacing:0.04em;
      cursor:pointer; transition:color 0.2s;
    }
    .scroll-ind:hover { color:#0a0a14; }
    .scroll-arrow {
      width:28px; height:28px; border-radius:50%;
      border:1px solid rgba(0,0,0,0.15);
      display:flex; align-items:center; justify-content:center;
      font-size:0.65rem;
    }

    /* ══════════════
       MARQUEE  — client/service ticker
    ══════════════ */
    .marquee-wrap {
      overflow:hidden; background:#0a0a14;
      padding:16px 0; border-top:1px solid rgba(0,0,0,0.1);
      position:relative; z-index:2;
    }
    .marquee-track {
      display:flex; gap:0;
      animation:marquee 35s linear infinite;
      white-space:nowrap; width:max-content;
    }
    .marquee-track:hover { animation-play-state:paused; }
    .marquee-item {
      display:inline-flex; align-items:center; gap:20px;
      padding:0 32px;
      font-size:0.73rem; font-weight:700;
      letter-spacing:0.12em; text-transform:uppercase;
      color:rgba(240,240,236,0.5);
    }
    .marquee-sep {
      width:4px; height:4px; border-radius:50%;
      background:rgba(240,240,236,0.2); flex-shrink:0;
    }
    @keyframes marquee {
      from { transform:translateX(0); }
      to   { transform:translateX(-50%); }
    }

    /* ══════════════
       SERVICES  — scroll-snap sticky-stacking cards
    ══════════════ */
    .svc-cards {
      display: flex;
      flex-direction: column;
      gap: 0;
      position: relative;
    }

    .svc-card {
      position: sticky;
      background: #0a0a14;
      border-radius: 24px;
      overflow: hidden;
      will-change: transform, filter;
      box-shadow: 0 -4px 40px rgba(0,0,0,0.3);
      filter: brightness(1);
      transform: scale(1);
      transition: transform 0.6s cubic-bezier(0.22,1,0.36,1),
                  filter 0.6s cubic-bezier(0.22,1,0.36,1),
                  box-shadow 0.4s ease;
    }
    .svc-card:hover {
      box-shadow: 0 -4px 60px rgba(0,0,0,0.45);
    }

    /* ── Stacked state: scale down + dim ── */
    .svc-card.stacked {
      transform: scale(0.96);
      filter: brightness(0.5);
    }

    /* ── Stacked card body: clip via height + fade ── */
    .svc-card .svc-card-body-wrap {
      display: grid;
      grid-template-rows: 1fr;
      transition: grid-template-rows 0.6s cubic-bezier(0.22,1,0.36,1),
                  opacity 0.4s cubic-bezier(0.22,1,0.36,1);
      opacity: 1;
    }
    .svc-card.stacked .svc-card-body-wrap {
      grid-template-rows: 0fr;
      opacity: 0;
    }
    .svc-card .svc-card-body-wrap > .svc-card-body {
      overflow: hidden;
      min-height: 0;
    }

    .svc-card.stacked .svc-card-accent {
      opacity: 0;
    }
    .svc-card-accent {
      transition: opacity 0.4s ease;
    }

    /* Stacked header tab — hidden by default, shown only when stacked */
    .svc-card-tab {
      height: 0;
      opacity: 0;
      display: flex;
      align-items: center;
      padding: 0 32px;
      gap: 12px;
      border-bottom: 1px solid rgba(255,255,255,0.06);
      position: relative;
      z-index: 3;
      overflow: hidden;
      transition: height 0.5s cubic-bezier(0.22,1,0.36,1),
                  opacity 0.45s cubic-bezier(0.22,1,0.36,1);
    }
    .svc-card.stacked .svc-card-tab {
      height: 40px;
      opacity: 1;
    }
    .svc-card-tab-num {
      font-size: 0.62rem;
      font-weight: 700;
      color: rgba(255,255,255,0.2);
      letter-spacing: 0.08em;
      min-width: 22px;
    }
    .svc-card-tab-name {
      font-size: 0.72rem;
      font-weight: 600;
      color: rgba(255,255,255,0.35);
      letter-spacing: 0.02em;
      text-transform: lowercase;
    }
    .svc-card-tab-dot {
      width: 4px; height: 4px;
      border-radius: 50%;
      margin-left: auto;
      transition: background 0.3s;
    }

    /* Card body — main content area */
    .svc-card-body {
      padding: 40px 52px 48px;
      display: grid;
      grid-template-columns: 1fr 240px;
      align-items: center;
      gap: 48px;
      min-height: calc(100vh - 180px);
      position: relative;
    }

    /* Subtle gradient glow on each card */
    .svc-card-body::before {
      content: '';
      position: absolute;
      top: -40%; right: -15%;
      width: 400px; height: 400px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255,255,255,0.035) 0%, transparent 70%);
      pointer-events: none;
    }

    /* Grid lines overlay */
    .svc-card::after {
      content: '';
      position: absolute; inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
      background-size: 80px 80px;
      pointer-events: none;
      border-radius: 24px;
    }

    .svc-card-idx {
      font-size: 0.68rem; font-weight: 700;
      color: rgba(255,255,255,0.18);
      letter-spacing: 0.1em;
      margin-bottom: 12px;
    }
    .svc-card-title {
      font-size: clamp(1.6rem, 3vw, 2.4rem);
      font-weight: 800;
      color: #fff;
      line-height: 1.15;
      letter-spacing: -0.03em;
      margin-bottom: 14px;
    }
    .svc-card-desc {
      font-size: 0.88rem;
      color: rgba(255,255,255,0.4);
      line-height: 1.75;
      max-width: 480px;
      margin-bottom: 28px;
    }
    .svc-card-tags {
      display: flex; gap: 8px; flex-wrap: wrap;
      margin-bottom: 28px;
    }
    .svc-card-tag {
      padding: 6px 16px;
      border-radius: 99px;
      font-size: 0.72rem;
      font-weight: 600;
      color: rgba(255,255,255,0.5);
      border: 1px solid rgba(255,255,255,0.08);
      background: rgba(255,255,255,0.03);
      transition: all 0.25s;
    }
    .svc-card:hover .svc-card-tag {
      border-color: rgba(255,255,255,0.18);
      color: rgba(255,255,255,0.7);
    }
    .svc-card-cta {
      display: inline-flex; align-items: center; gap: 10px;
      color: #fff; font-size: 0.84rem; font-weight: 600;
      text-decoration: none;
      cursor: pointer;
    }
    .svc-card-cta-arrow {
      width: 32px; height: 32px; border-radius: 50%;
      background: rgba(255,255,255,0.08);
      display: flex; align-items: center; justify-content: center;
      font-size: 0.65rem;
      transition: all 0.3s;
    }
    .svc-card:hover .svc-card-cta-arrow {
      background: #fff; color: #0a0a14;
      transform: rotate(-45deg);
    }

    /* 3D icon image — right side */
    .svc-card-img {
      width: 240px; height: 240px;
      object-fit: contain;
      filter: drop-shadow(0 20px 48px rgba(0,0,0,0.55));
      transition: all 0.5s cubic-bezier(0.23,1,0.32,1);
      position: relative;
      z-index: 2;
    }
    .svc-card:hover .svc-card-img {
      transform: scale(1.06) rotate(-2deg);
      filter: drop-shadow(0 28px 64px rgba(0,0,0,0.65));
    }

    /* Accent line */
    .svc-card-accent {
      position: absolute;
      bottom: 0; left: 52px;
      width: 60px; height: 3px;
      border-radius: 2px;
    }

    @media(max-width:860px){
      .svc-card-body {
        grid-template-columns: 1fr;
        padding: 28px 24px 36px;
        min-height: calc(100vh - 200px);
      }
      .svc-card-img { width: 160px; height: 160px; margin: 0 auto; }
      .svc-card-desc { max-width: 100%; }
      .svc-card-tags { justify-content: center; }
      .svc-card-tab { padding: 0 20px; }
    }

    /* ══════════════
       SERVICES NEW — glassmorphism dark cards
    ══════════════ */
    @keyframes svcOrb1 {
      0%,100% { transform: translate(0,0) scale(1); }
      50%     { transform: translate(30px,-40px) scale(1.1); }
    }
    @keyframes svcOrb2 {
      0%,100% { transform: translate(0,0) scale(1); }
      50%     { transform: translate(-30px,40px) scale(1.2); }
    }
    .svc-new-orb-1 {
      position:absolute; top:-10%; left:-10%;
      width:40%; height:40%; border-radius:50%;
      background:rgba(14,165,233,0.1); filter:blur(120px);
      animation:svcOrb1 15s ease-in-out infinite; pointer-events:none;
    }
    .svc-new-orb-2 {
      position:absolute; top:40%; right:-10%;
      width:40%; height:50%; border-radius:50%;
      background:rgba(59,130,246,0.1); filter:blur(120px);
      animation:svcOrb2 20s ease-in-out infinite; pointer-events:none;
    }
    .svc-new-bgtext {
      font-size:clamp(5rem,18vw,28rem); font-weight:900;
      line-height:1; letter-spacing:-0.05em;
      -webkit-background-clip:text; background-clip:text; color:transparent;
      background-image:linear-gradient(to bottom, white, transparent);
      opacity:0.03; white-space:nowrap; pointer-events:none; user-select:none;
    }
    .svc-new-header-anim {
      transition:opacity 0.8s ease, transform 0.8s ease;
    }
    .svc-new-header-anim.svc-hidden { opacity:0; transform:translateY(40px); }
    .svc-new-header-anim.svc-visible { opacity:1; transform:translateY(0); }
    /* Card wrap doubles as the animated entry element */
    .svc-new-card-wrap {
      position:relative; display:flex; flex-direction:row;
      min-height:360px; border-radius:24px; align-items:stretch;
      transform-style:preserve-3d;
      /* entrance animation + tilt share the same transition */
      transition:opacity 0.45s ease, transform 0.45s cubic-bezier(0.23,1,0.32,1);
    }
    .svc-new-card-wrap.svc-hidden { opacity:0; transform:translateY(50px) scale(0.97); }
    /* svc-visible: no extra transform so JS tilt can freely set it */
    .svc-new-card-wrap.svc-visible { opacity:1; }
    @media(max-width:768px){ .svc-new-card-wrap { flex-direction:column; } }
    .svc-new-card-bg {
      position:absolute; inset:0; border-radius:24px; overflow:hidden;
      background:rgba(0,0,0,1);
      border:1px solid rgba(255,255,255,0.3);
      transition:border-color 0.5s, background 0.5s, box-shadow 0.5s;
    }
    .svc-new-card-bg::before {
      content:''; position:absolute; inset:0;
      background:linear-gradient(135deg,rgba(255,255,255,0.12) 0%,rgba(255,255,255,0.05) 50%,rgba(255,255,255,0.02) 100%);
      backdrop-filter:blur(20px);
    }
    .svc-new-card-bg::after {
      content:''; position:absolute; inset:0;
      background:linear-gradient(135deg,rgba(255,255,255,0.15),transparent);
      opacity:0; transition:opacity 0.7s; pointer-events:none;
    }
    .svc-new-card-wrap:hover .svc-new-card-bg {
      background:rgba(0,0,0,0.9);
      border-color:rgba(255,255,255,0.5);
      box-shadow:inset 0 0 80px rgba(255,255,255,0.1);
    }
    .svc-new-card-wrap:hover .svc-new-card-bg::after { opacity:1; }
    .svc-new-tag-pill {
      padding:6px 12px; font-size:0.72rem; font-weight:600;
      color:rgba(255,255,255,0.9);
      background:rgba(255,255,255,0.15);
      border:1px solid rgba(255,255,255,0.3); border-radius:999px;
      transition:all 0.3s;
    }
    .svc-new-card-wrap:hover .svc-new-tag-pill {
      background:rgba(255,255,255,0.2); border-color:rgba(255,255,255,0.4);
    }
    .svc-new-cta-link {
      display:inline-flex; align-items:center; gap:8px;
      padding:10px 20px; font-size:0.875rem; font-weight:600;
      letter-spacing:0.03em; color:white;
      background:rgba(255,255,255,0.1);
      border:1px solid rgba(255,255,255,0.3); border-radius:999px;
      text-decoration:none; transition:all 0.3s;
    }
    .svc-new-cta-link:hover { background:rgba(255,255,255,0.18); border-color:rgba(255,255,255,0.5); }
    .svc-new-img-frame {
      position:relative; width:53vh !important; height:53vh !important;
      border-radius:16px; overflow:hidden;
      border:1px solid rgba(255,255,255,0.25);
      box-shadow:0 20px 60px rgba(0,0,0,0.6);
      transition:all 0.5s; flex-shrink:0; align-self:center;
    }
    @media(max-width:900px){ .svc-new-img-frame { width:100%; max-width:100%; aspect-ratio:16/9; } }
    .svc-new-card-wrap:hover .svc-new-img-frame {
      transform:scale(1.05); box-shadow:0 30px 80px rgba(0,0,0,0.8);
    }
    .svc-new-img-overlay {
      position:absolute; inset:0; z-index:2;
      background:linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.4) 50%, transparent 100%);
    }
    .svc-new-view-btn {
      background:none; border:none; cursor:pointer;
      display:inline-flex; align-items:center; gap:8px;
      font-size:0.875rem; font-weight:700; letter-spacing:0.05em;
      color:#a1a1aa; font-family:inherit; transition:color 0.2s;
    }
    .svc-new-view-btn:hover { color:white; }

    /* SERVICE CARD LAYOUT CLASSES */
    .svc-card-wrapper { position:sticky; width:100%; padding-bottom:60vh; }
    .svc-card-wrapper:nth-child(1) { z-index:10; top:calc(15vh + 0px); }
    .svc-card-wrapper:nth-child(2) { z-index:11; top:calc(15vh + 30px); }
    .svc-card-wrapper:nth-child(3) { z-index:12; top:calc(15vh + 60px); }
    .svc-card-wrapper:nth-child(4) { z-index:13; top:calc(15vh + 90px); }
    .svc-card-wrapper:nth-child(5) { z-index:14; top:calc(15vh + 120px); }
    .svc-card-wrapper:nth-child(6) { z-index:15; top:calc(15vh + 150px); padding-bottom:0; }
    .svc-new-content { position:relative; flex:1; padding:44px 48px; display:flex; flex-direction:column; justify-content:center; gap:20px; z-index:10; }
    .svc-new-label { font-size:0.72rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:rgba(255,255,255,0.45); margin-bottom:12px; }
    .svc-new-title { font-size:3rem; font-weight:700; margin-bottom:14px; color:#fff; line-height:1.15; }
    .svc-new-tags { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
    .svc-new-desc { color:rgba(255,255,255,0.75); font-size:0.95rem; line-height:1.75; max-width:28rem; }
    .svc-new-visual { position:relative; padding:32px; display:flex; align-items:center; justify-content:center; z-index:10; }
    .svc-new-video { width:100%; height:100%; object-fit:cover; display:block; }
    .svc-new-cta-icon { font-size:0.8rem; color:rgba(255,255,255,0.7); }
    @media (max-width:900px) {
      .svc-new-content { padding:32px 28px; gap:16px; }
      .svc-new-title { font-size:2rem; }
      .svc-new-visual { padding:20px 28px 28px; }
    }
    @media (max-width:600px) {
      html{font-size: 14px;}
      .svc-card-wrapper { padding-bottom:40vh; }
      .svc-card-wrapper:nth-child(6) { padding-bottom:0; }
      .svc-new-content { padding:28px 20px; }
      .svc-new-title { font-size:1.6rem; }
      .svc-new-desc {         font-size: 0.68rem;
        line-height: 1.3; }
        .svc-new-label{display: none;}
    }

    /* ══════════════
       STATS STRIP
    ══════════════ */
    .stats-strip {
      display:grid; grid-template-columns:repeat(4,1fr);
      border:1px solid rgba(0,0,0,0.08); border-radius:20px; overflow:hidden;
      background:rgba(255,255,255,0.88); backdrop-filter:blur(14px);
    }
    .stats-cell {
      padding:36px 28px; border-right:1px solid rgba(0,0,0,0.08);
      text-align:center;
    }
    .stats-cell:last-child { border-right:none; }
    .stats-big { font-size:clamp(2rem,4vw,3.2rem); font-weight:900; letter-spacing:-0.04em; color:#0a0a14; }
    .stats-lbl { font-size:0.76rem; color:#aaa; font-weight:500; margin-top:5px; }

    /* keep old names for backward compat */
    .hero-float-card { display:none; }
    .mission-card    { display:none; }
    .card-divider    { height:1px; background:#ebebeb; margin:10px 0; }
    .info-num        { display:none; }
    .mission-pill    { display:none; }

    /* ══════════════
       SHARED SECTION STYLES
    ══════════════ */
    .section-wrap { padding:100px 5%; }
    .section-inner { max-width:1200px; margin:0 auto; }

    .sec-eyebrow {
      display:inline-flex; align-items:center; gap:6px;
      font-size:0.7rem; font-weight:700; letter-spacing:0.12em;
      text-transform:uppercase; color:#888;
      margin-bottom:14px;
    }
    .sec-eyebrow::before {
      content:''; display:inline-block;
      width:18px; height:1.5px; background:#ccc; border-radius:1px;
    }
    .sec-h {
      font-size:clamp(1.9rem,3.2vw,2.7rem);
      font-weight:800; line-height:1.15; letter-spacing:-0.03em;
      color:#0a0a14;
    }
    .sec-sub { color:#888; font-size:0.95rem; line-height:1.75; }

    /* White card — slightly frosted to let tube depth show */
    .wcard {
      background: rgba(255,255,255,0.88);
      border-radius:20px;
      border:1px solid rgba(0,0,0,0.07);
      box-shadow: 0 2px 16px rgba(0,0,0,0.05);
      backdrop-filter: blur(14px);
      transform-style: preserve-3d;
      will-change: transform;
    }
    .wcard:hover { border-color:rgba(0,0,0,0.13); box-shadow:0 8px 32px rgba(0,0,0,0.09); }

    /* Alt bg for alternating sections — see above overrides */

    /* ── Buttons ── */
    .btn-blk {
      display:inline-flex; align-items:center; gap:8px;
      background:#0a0a14; color:white;
      padding:12px 26px; border-radius:12px;
      font-weight:600; font-size:0.87rem;
      border:none; cursor:pointer;
      transition:all 0.25s; font-family:'Inter',sans-serif;
    }
    .btn-blk:hover { background:#1a1a2e; transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,0.18); }
    .btn-out {
      display:inline-flex; align-items:center; gap:8px;
      background:transparent; color:#0a0a14;
      padding:11px 26px; border-radius:12px;
      font-weight:600; font-size:0.87rem;
      border:1.5px solid rgba(0,0,0,0.2); cursor:pointer;
      transition:all 0.25s; font-family:'Inter',sans-serif;
    }
    .btn-out:hover { background:#0a0a14; color:white; border-color:#0a0a14; transform:translateY(-2px); }

    /* ── Tags ── */
    .tag-blk {
      padding:3px 10px; border-radius:99px; font-size:0.7rem; font-weight:600;
      background:#f0f0ec; color:#444; border:1px solid rgba(0,0,0,0.1);
    }

    /* ── Service icon ── */
    .svc-icon { width:48px; height:48px; border-radius:13px; display:flex; align-items:center; justify-content:center; font-size:1.35rem; flex-shrink:0; }

    /* ── Progress bar ── */
    .pbar { height:4px; background:#ebebeb; border-radius:2px; overflow:hidden; }
    .pfill { height:100%; background:#0a0a14; border-radius:2px; }

    /* ── Portfolio filter ── */
    .fb {
      padding:7px 18px; border-radius:99px; font-size:0.81rem; font-weight:600;
      background:rgba(255,255,255,0.75); border:1px solid rgba(0,0,0,0.12); color:#666;
      cursor:pointer; transition:all 0.25s; backdrop-filter:blur(8px);
    }
    .fb.on, .fb:hover { background:#0a0a14; color:white; border-color:#0a0a14; }

    /* ── Testimonial stars ── */
    .stars { color:#0a0a14; font-size:0.85rem; letter-spacing:1px; }

    /* ── CTA BAND (inverted / black) ── */
    .cta-band {
      background:#0a0a14;
      position:relative; overflow:hidden;
    }
    .cta-band::before {
      content:'';
      position:absolute; inset:0;
      background-image:
        linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
      background-size:80px 80px;
    }
    .btn-wht {
      display:inline-flex; align-items:center; gap:8px;
      background:white; color:#0a0a14;
      padding:12px 28px; border-radius:12px;
      font-weight:700; font-size:0.87rem;
      border:none; cursor:pointer;
      transition:all 0.25s; font-family:'Inter',sans-serif;
    }
    .btn-wht:hover { background:#f0f0ec; transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,0.3); }
    .btn-wht-out {
      display:inline-flex; align-items:center; gap:8px;
      background:transparent; color:white;
      padding:11px 28px; border-radius:12px;
      font-weight:600; font-size:0.87rem;
      border:1.5px solid rgba(255,255,255,0.25); cursor:pointer;
      transition:all 0.25s; font-family:'Inter',sans-serif;
    }
    .btn-wht-out:hover { background:rgba(255,255,255,0.08); transform:translateY(-2px); }

    /* ── Products Section ── */
    .prod-filter-bar {
      display:flex; gap:6px; flex-wrap:wrap; margin-bottom:36px;
    }
    .prod-grid {
      display:grid; grid-template-columns:repeat(5,1fr); gap:14px;
    }
    @media(max-width:1200px){ .prod-grid{grid-template-columns:repeat(4,1fr);} }
    @media(max-width:900px){ .prod-grid{grid-template-columns:repeat(3,1fr);} }
    @media(max-width:640px){ .prod-grid{grid-template-columns:repeat(2,1fr);} }
    .prod-card {
      border:1px solid rgba(0,0,0,0.08); border-radius:14px; padding:18px 16px;
      background:rgba(255,255,255,0.82); cursor:pointer; transition:all 0.22s;
      display:flex; flex-direction:column; gap:10px; backdrop-filter:blur(12px);
    }
    /* Sticky horizontal-scroll products section */
    #products-scroll-outer { position:relative; }
    #products { position:sticky !important; top:0; height:100vh; overflow:hidden; padding:0 !important; }
    #products .section-inner { max-width:none !important; height:100%; display:flex; flex-direction:column; padding:80px 5% 32px; box-sizing:border-box; }
    .product-runway { flex:1; min-height:0; display:flex; flex-direction:column; gap:20px; }
    .product-runway-intro { flex-shrink:0; padding:0; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:16px 36px; }
    .product-runway-intro > div:first-child { grid-column:1; }
    .product-runway-intro .sec-h { font-size:clamp(1.4rem,2.6vw,2.2rem); margin-top:4px; }
    .product-runway-intro > .sec-sub { grid-column:2; margin:0; font-size:0.88rem; max-width:420px; }
    .product-runway-stats { display:none; }
    .product-runway-intro > .btn-blk { grid-column:3; }
    .product-runway-track-wrap { flex:1; min-height:0; overflow:hidden; }
    .product-runway-track { display:flex; flex-direction:row; gap:20px; height:100%; overflow:visible; padding:0; }
    .product-runway-card { width:calc(50vw - 42px); flex-shrink:0; min-width:unset; min-height:unset; height:100%; padding:0; border-radius:28px; box-shadow:0 24px 80px rgba(0,0,0,0.10); transition:box-shadow 0.25s ease, border-color 0.25s ease; overflow:hidden; display:grid;  gap:0; position:relative; border:1px solid rgba(0,0,0,0.06); }
    .product-runway-card::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg, rgba(255,255,255,0.10), transparent 38%); pointer-events:none; z-index:1; }
    .product-runway-index { position:relative; z-index:2; display:none; align-items:flex-start; justify-content:center; padding-top:34px; font-size:1rem; font-weight:800; letter-spacing:0.22em; color:rgba(255,255,255,0.66); border-right:1px solid rgba(255,255,255,0.12); background:rgba(8,10,18,0.18); }
    .product-runway-body {    position: relative;
    z-index: 2;
    padding: 4vw 4vw;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: linear-gradient(45deg, black, #ffffff00);
    color: #ffffff; }
    .product-runway-visual { position:relative; min-height:360px; overflow:hidden; display:flex; align-items:center; justify-content:center; padding:24px; }
    .product-runway-grid { position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,0.09) 1px, transparent 1px),linear-gradient(90deg, rgba(255,255,255,0.09) 1px, transparent 1px); background-size:48px 48px; opacity:0.22; }
    .product-runway-orb { position:absolute; width:220px; height:220px; border-radius:50%; filter:blur(40px); opacity:0.9; }
    .product-runway-panel { position:relative; z-index:2; width:min(100%,320px); aspect-ratio:4/5; border-radius:24px; border:1px solid rgba(255,255,255,0.18); background:rgba(8,10,18,0.36); backdrop-filter:blur(10px); box-shadow:0 26px 60px rgba(0,0,0,0.22); overflow:hidden; }
    .product-runway-panel-top { display:flex; gap:8px; padding:14px 16px; border-bottom:1px solid rgba(255,255,255,0.08); }
    .product-runway-panel-body { padding:18px; display:grid; grid-template-rows:auto auto 1fr; gap:14px; height:calc(100% - 47px); }
    .product-screen-dot { width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,0.55); }
    .product-runway-stat-big { height:110px; border-radius:20px; background:rgba(255,255,255,0.10); display:flex; align-items:center; justify-content:center; font-size:4rem; }
    .product-runway-lines { display:flex; flex-direction:column; gap:10px; }
    .product-runway-lines span { display:block; height:12px; border-radius:999px; background:rgba(255,255,255,0.12); position:relative; overflow:hidden; }
    .product-runway-lines span::after { content:''; position:absolute; inset:0; width:72%; background:rgba(255,255,255,0.74); border-radius:inherit; }
    .product-runway-lines span:nth-child(2)::after { width:48%; }
    .product-runway-lines span:nth-child(3)::after { width:86%; }
    .product-runway-wave { border-radius:18px; background:linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.04)); position:relative; overflow:hidden; }
    .product-runway-wave::after { content:''; position:absolute; left:10%; right:10%; bottom:20%; height:2px; background:linear-gradient(90deg, transparent, rgba(255,255,255,0.7), transparent); box-shadow:22px -14px 0 0 rgba(255,255,255,0.48), 68px -5px 0 0 rgba(255,255,255,0.32), 112px -24px 0 0 rgba(255,255,255,0.72); }
    .product-runway-head { display:flex; align-items:center; gap:10px; margin-bottom:16px; flex-wrap:wrap; }
    .product-runway-title { font-size:clamp(2.27em,2vw,2.8rem); line-height:0.93; letter-spacing:-0.07em; font-weight:800; margin-bottom:10px; }
    .product-runway-tagline { font-size:1rem; line-height:1.6; color:rgba(245,242,236,0.82); margin-bottom:12px; max-width:520px; }
    .product-runway-summary { font-size:0.9rem; line-height:1.75; color:rgba(245,242,236,0.58); max-width:520px; margin-bottom:22px; }
    .product-runway-stack { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:24px; }
    .product-stack-pill { padding:8px 14px; border-radius:999px; border:1px solid rgba(255,255,255,0.14); background:rgba(255,255,255,0.06); color:#f5f2ec; font-size:0.72rem; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; }
    .product-runway-foot { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:auto; }
    .product-foot-label { font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase; color:rgba(245,242,236,0.46); }
    .product-runway-arrow { width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.14); color:#fff; }
    .product-badge { font-size:0.64rem; font-weight:800; background:#fff; color:#0a0a14; padding:4px 9px; border-radius:999px; }
    .theme-violet { background:linear-gradient(135deg, #2f1e65 0%, #12131d 44%, #090a12 100%); }
    .theme-violet .product-runway-orb { background:radial-gradient(circle, rgba(142,95,255,0.7), rgba(142,95,255,0)); }
    .theme-ice { background:linear-gradient(135deg, #dcecff 0%, #a7c9ff 18%, #0b1322 54%, #090a12 100%); }
    .theme-ice .product-runway-orb { background:radial-gradient(circle, rgba(100,161,255,0.7), rgba(100,161,255,0)); }
    .theme-mint { background:linear-gradient(135deg, #c6ffe6 0%, #7addb4 18%, #091310 54%, #090a12 100%); }
    .theme-mint .product-runway-orb { background:radial-gradient(circle, rgba(42,208,148,0.75), rgba(42,208,148,0)); }
    .theme-amber { background:linear-gradient(135deg, #ffe1b1 0%, #ffb347 18%, #171008 54%, #090a12 100%); }
    .theme-amber .product-runway-orb { background:radial-gradient(circle, rgba(255,183,71,0.72), rgba(255,183,71,0)); }
    .theme-rose { background:linear-gradient(135deg, #ffd7e6 0%, #ff7bab 18%, #1a0a12 54%, #090a12 100%); }
    .theme-rose .product-runway-orb { background:radial-gradient(circle, rgba(255,82,143,0.72), rgba(255,82,143,0)); }
    .theme-sky { background:linear-gradient(135deg, #daf2ff 0%, #74d3ff 18%, #08131a 54%, #090a12 100%); }
    .theme-sky .product-runway-orb { background:radial-gradient(circle, rgba(70,196,255,0.72), rgba(70,196,255,0)); }
    .theme-sand { background:linear-gradient(135deg, #fff0d8 0%, #ffc07a 18%, #181007 54%, #090a12 100%); }
    .theme-sand .product-runway-orb { background:radial-gradient(circle, rgba(255,161,68,0.72), rgba(255,161,68,0)); }
    .prod-card:hover { border-color:rgba(0,0,0,0.16); box-shadow:0 12px 32px rgba(0,0,0,0.09); }
    .prod-cat-tag { font-size:0.63rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:#888; background:#f5f5f2; padding:2px 8px; border-radius:99px; display:inline-block; align-self:flex-start; }
    @media(max-width:980px){ .product-runway-card{grid-template-columns:1fr;} .product-runway-index{border-right:none;border-bottom:1px solid rgba(255,255,255,0.12);padding:18px 24px;justify-content:flex-start;} .product-runway-visual{min-height:180px;order:-1;} .product-runway-body{padding: 30px 30px;} .product-runway-title{font-size:clamp(1.6rem,6vw,2.4rem);} }
    @media(max-width:700px){ #products .section-inner{padding:72px 4% 20px;} .product-runway-intro{grid-template-columns:1fr auto;} .product-runway-intro>.sec-sub{display:none;} .product-runway-card{width:calc(85vw - 32px);} }

    /* ── Insights Section ── */
    .insights-grid {
      display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
    }
    @media(max-width:900px){ .insights-grid{grid-template-columns:1fr 1fr;} }
    @media(max-width:640px){ .insights-grid{grid-template-columns:1fr;} }
    .insight-card {
      border:1px solid rgba(0,0,0,0.08); border-radius:16px; overflow:hidden;
      background:rgba(255,255,255,0.82); backdrop-filter:blur(12px); cursor:pointer; transition:all 0.22s;
    }
    .insight-card:hover { transform:translateY(-4px); box-shadow:0 16px 48px rgba(0,0,0,0.10); border-color:rgba(0,0,0,0.14); }
    .insight-thumb {
      height:160px; display:flex; align-items:center; justify-content:center; font-size:3.2rem;
    }
    .insight-body { padding:20px; }
    .insight-tag { font-size:0.65rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:#888; margin-bottom:9px; }
    .insight-title { font-size:0.93rem; font-weight:700; color:#0a0a14; line-height:1.45; margin-bottom:8px; }
    .insight-meta { font-size:0.74rem; color:#bbb; display:flex; align-items:center; gap:8px; }

    /* ── Careers Section ── */
    .careers-list { display:flex; flex-direction:column; gap:12px; }
    .career-row {
      display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px;
      padding:22px 26px; border:1px solid rgba(0,0,0,0.08); border-radius:14px;
      background:rgba(255,255,255,0.82); backdrop-filter:blur(12px); cursor:pointer; transition:all 0.22s;
    }
    .career-row:hover { border-color:rgba(0,0,0,0.16); transform:translateX(4px); box-shadow:0 6px 24px rgba(0,0,0,0.07); }
    .career-title { font-size:0.96rem; font-weight:700; color:#0a0a14; margin-bottom:4px; }
    .career-meta { font-size:0.78rem; color:#aaa; display:flex; gap:14px; flex-wrap:wrap; }
    .career-badge { font-size:0.74rem; font-weight:600; padding:5px 14px; border-radius:99px; white-space:nowrap; }
    .badge-full { background:#e8f5e9; color:#2e7d32; }
    .badge-part { background:#fff3e0; color:#e65100; }
    .badge-remote { background:#e3f2fd; color:#1565c0; }
    .badge-intern { background:#f3e5f5; color:#7b1fa2; }

    /* ── Contact input ── */
    .ci {
      width:100%; background:rgba(255,255,255,0.90); border:1px solid rgba(0,0,0,0.12);
      color:#0a0a14; border-radius:11px; padding:12px 15px;
      font-size:0.87rem; font-family:'Inter',sans-serif;
      transition:all 0.25s; outline:none; backdrop-filter:blur(8px);
    }
    .ci:focus { border-color:#0a0a14; box-shadow:0 0 0 3px rgba(0,0,0,0.07); }
    .ci::placeholder { color:#bbb; }

    /* ── Footer ── */
    .footer-wrap { background:#0a0a14; color:#f2f2ee; position:relative; z-index:10; isolation:isolate; }
    .fl { color:rgba(242,242,238,0.42); font-size:0.83rem; text-decoration:none; display:block; margin-bottom:10px; transition:color 0.25s; }
    .fl:hover { color:#f2f2ee; }
    .soc { width:36px; height:36px; border-radius:8px; background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.1); display:inline-flex; align-items:center; justify-content:center; color:rgba(242,242,238,0.5); font-size:0.85rem; cursor:pointer; transition:all 0.25s; text-decoration:none; }
    .soc:hover { background:white; color:#0a0a14; transform:translateY(-2px); }

    /* ── Grids ── */
    .g2  { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
    .g3  { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
    .g4  { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
    .ghero { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }

    /* ══════════════
       WORKS SECTION — Brucira-inspired staggered portfolio
    ══════════════ */
    .works-section {
      padding: 100px 5% 120px;
      position: relative;
    }
    .works-inner {
      max-width: 1300px;
      margin: 0 auto;
    }
    .works-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      flex-wrap: wrap;
      gap: 20px;
      margin-bottom: 72px;
    }
    .works-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 32px 40px;
    }
    .works-col-right {
      margin-top: 120px;
    }
    .work-card {
      margin-bottom: 56px;
      cursor: pointer;
    }
    .work-img-wrap {
      position: relative;
      border-radius: 20px;
      overflow: hidden;
      background: #e8e8e4;
      margin-bottom: 24px;
    }
    .work-img-wrap img {
      width: 100%;
      height: auto;
      display: block;
      transition: transform 0.7s cubic-bezier(0.23,1,0.32,1);
    }
    .work-card:hover .work-img-wrap img {
      transform: scale(1.04);
    }
    .work-img-wrap::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(to bottom, transparent 60%, rgba(0,0,0,0.04));
      pointer-events: none;
    }
    .work-location {
      position: absolute;
      bottom: 14px;
      right: 14px;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      background: rgba(255,255,255,0.92);
      backdrop-filter: blur(8px);
      padding: 5px 12px;
      border-radius: 99px;
      font-size: 0.68rem;
      font-weight: 700;
      color: #333;
      letter-spacing: 0.04em;
      z-index: 2;
    }
    .work-location::before {
      content: '';
      width: 6px; height: 6px;
      border-radius: 50%;
      background: #22c55e;
    }
    .work-title {
      font-size: clamp(1.15rem, 2vw, 1.55rem);
      font-weight: 800;
      color: #0a0a14;
      line-height: 1.35;
      letter-spacing: -0.025em;
      margin-bottom: 14px;
      transition: color 0.2s;
    }
    .work-card:hover .work-title {
      color: #555;
    }
    .work-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }
    .work-tag {
      padding: 4px 13px;
      border-radius: 99px;
      font-size: 0.7rem;
      font-weight: 600;
      color: #666;
      background: transparent;
      border: 1px solid rgba(0,0,0,0.12);
      transition: all 0.2s;
    }
    .work-card:hover .work-tag {
      border-color: rgba(0,0,0,0.22);
      color: #0a0a14;
    }
    .works-cta-float {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: #0a0a14;
      color: white;
      padding: 12px 28px;
      border-radius: 99px;
      font-size: 0.85rem;
      font-weight: 700;
      border: none;
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.23,1,0.32,1);
      box-shadow: 0 8px 32px rgba(0,0,0,0.15);
    }
    .works-cta-float:hover {
      background: #1a1a2e;
      transform: translateY(-3px) scale(1.04);
      box-shadow: 0 16px 48px rgba(0,0,0,0.2);
    }
    .work-card-enter {
      opacity: 0;
      transform: translateY(60px);
      transition: opacity 0.9s cubic-bezier(0.16,1,0.3,1),
                  transform 0.9s cubic-bezier(0.16,1,0.3,1);
    }
    .work-card-enter.on {
      opacity: 1;
      transform: translateY(0);
    }

    /* ══ WORK VIDEO PREVIEW OVERLAY ══ */
    .work-video-canvas {
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
      z-index: 1;
      opacity: 0;
      transition: opacity 0.6s cubic-bezier(0.23,1,0.32,1);
      pointer-events: none;
    }
    .work-img-wrap.playing .work-video-canvas {
      opacity: 1;
    }
    .work-play-indicator {
      position: absolute;
      top: 16px; left: 16px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: rgba(0,0,0,0.65);
      backdrop-filter: blur(8px);
      padding: 5px 12px 5px 8px;
      border-radius: 99px;
      z-index: 3;
      opacity: 0;
      transform: translateY(-6px);
      transition: opacity 0.4s, transform 0.4s cubic-bezier(0.23,1,0.32,1);
    }
    .work-img-wrap.playing .work-play-indicator {
      opacity: 1;
      transform: translateY(0);
    }
    .work-play-dot {
      width: 8px; height: 8px;
      border-radius: 50%;
      background: #ef4444;
      animation: playPulse 1.4s ease infinite;
    }
    @keyframes playPulse {
      0%,100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.6; transform: scale(0.75); }
    }
    .work-play-label {
      font-size: 0.62rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: white;
    }
    .work-img-wrap.playing img {
      transform: scale(1.02);
      filter: brightness(0.85);
    }
    /* video progress bar */
    .work-video-progress {
      position: absolute;
      bottom: 0; left: 0;
      width: 0%;
      height: 3px;
      background: linear-gradient(90deg, #0ea5e9, #10b981, #0ea5e9);
      z-index: 4;
      transition: none;
      border-radius: 0 2px 2px 0;
    }
    .work-img-wrap.playing .work-video-progress {
      transition: width 0.1s linear;
    }
    /* video timer */
    .work-video-timer {
      position: absolute;
      top: 16px; right: 16px;
      font-size: 0.68rem;
      font-weight: 700;
      color: white;
      background: rgba(0,0,0,0.55);
      backdrop-filter: blur(6px);
      padding: 3px 10px;
      border-radius: 99px;
      z-index: 3;
      opacity: 0;
      font-variant-numeric: tabular-nums;
      transition: opacity 0.4s;
    }
    .work-img-wrap.playing .work-video-timer {
      opacity: 1;
    }

    @media(max-width:768px){
      .works-grid { grid-template-columns: 1fr; }
      .works-col-right { margin-top: 0; }
    }
    @media(max-width:1024px){ .g4{grid-template-columns:repeat(2,1fr);} .g3{grid-template-columns:repeat(2,1fr);} }
    @media(max-width:768px){
      .g2,.g3,.g4,.ghero{grid-template-columns:1fr;}
      .nav-links{display:none!important;} .nav-cta{display:none!important;} .nav-menu-btn{display:flex!important;}
      .hero-float-card,.mission-card,.scroll-ind{display:none!important;}
      .hero-thin,.hero-medium,.hero-bold{font-size:clamp(2rem,8vw,3rem)!important;}
    }

    /* ── Divider line ── */
    .rule { height:1px; background:rgba(0,0,0,0.08); }

    /* ── Animated count ── */
    .stat-num { font-size:2.6rem; font-weight:900; letter-spacing:-0.04em; line-height:1; color:#0a0a14; }

    /* ══════════════════════════════════════
       MICRO-ANIMATIONS  &  SCROLL REVEAL
    ══════════════════════════════════════ */

    /* ── Scroll reveal base ── */
    .reve   { opacity:0; transform:translateY(32px);  transition:opacity .72s cubic-bezier(.16,1,.3,1),transform .72s cubic-bezier(.16,1,.3,1); }
    .reve-l { opacity:0; transform:translateX(-40px); transition:opacity .72s cubic-bezier(.16,1,.3,1),transform .72s cubic-bezier(.16,1,.3,1); }
    .reve-r { opacity:0; transform:translateX(40px);  transition:opacity .72s cubic-bezier(.16,1,.3,1),transform .72s cubic-bezier(.16,1,.3,1); }
    .reve-s { opacity:0; transform:scale(.88);        transition:opacity .65s cubic-bezier(.16,1,.3,1),transform .65s cubic-bezier(.16,1,.3,1); }
    .reve.on,.reve-l.on,.reve-r.on,.reve-s.on { opacity:1; transform:none; }
    .d1{transition-delay:.07s}.d2{transition-delay:.14s}.d3{transition-delay:.21s}
    .d4{transition-delay:.28s}.d5{transition-delay:.35s}.d6{transition-delay:.42s}
    .d7{transition-delay:.49s}.d8{transition-delay:.56s}.d9{transition-delay:.63s}

    /* ── Hero headline word-by-word entrance (dramatic stagger) ── */
    @keyframes heroWord {
      from { opacity:0; transform:translateY(60px) skewY(5deg) rotateX(15deg); filter:blur(8px); }
      to   { opacity:1; transform:none; filter:blur(0); }
    }
    .bh1-light  { animation:heroWord 1.1s cubic-bezier(.16,1,.3,1) 0.3s both; }
    .bh1-bold   { animation:heroWord 1.1s cubic-bezier(.16,1,.3,1) 0.6s both; }
    .bh1-italic { animation:heroWord 1.1s cubic-bezier(.16,1,.3,1) 0.9s both; }
    .bh1-outline{ animation:heroWord 1.1s cubic-bezier(.16,1,.3,1) 1.2s both; }

    /* ── Hero meta + bottom slide-in (delayed for drama) ── */
    @keyframes metaIn { from{opacity:0;transform:translateY(-16px);filter:blur(4px)} to{opacity:1;transform:none;filter:blur(0)} }
    .hero-meta   { animation:metaIn .8s cubic-bezier(.16,1,.3,1) 0.1s  both; }
    .hero-bottom { animation:metaIn 1s cubic-bezier(.16,1,.3,1) 1.8s both; }

    /* ── Award card entrance + float loop ── */
    @keyframes floatY { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
    @keyframes awardEnter { from{opacity:0;transform:translateX(60px) scale(0.8) rotateY(-15deg);filter:blur(6px)} to{opacity:1;transform:none;filter:blur(0)} }
    .hero-award { animation:awardEnter 1s cubic-bezier(.16,1,.3,1) 2.5s both, floatY 5s ease-in-out 3.5s infinite; }
    .hero-award:hover { animation-play-state:paused; }

    /* ── Availability green dot pulse ── */
    @keyframes pulseGreen {
      0%,100%{ box-shadow:0 0 0 0 rgba(34,197,94,.55); }
      60%    { box-shadow:0 0 0 8px rgba(34,197,94,0); }
    }
    .hero-avail::before { animation:pulseGreen 2.3s ease infinite; }

    /* ── Scroll arrow bounce ── */
    @keyframes bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(5px)} }
    .scroll-ind i { animation:bounce 1.8s ease infinite; }

    /* ── Marquee items fade cycle ── */
    @keyframes mqFade { 0%,100%{opacity:.42} 50%{opacity:.92} }
    .marquee-item:nth-child(odd)  { animation:mqFade 3.4s ease infinite; }
    .marquee-item:nth-child(even) { animation:mqFade 3.4s ease 1.7s infinite; }

    /* ── Service rows staggered entrance ── */
    .svc-row {
      opacity:0; transform:translateX(-22px);
      transition:opacity .55s cubic-bezier(.16,1,.3,1),
                 transform .55s cubic-bezier(.16,1,.3,1),
                 background .22s, padding .22s, box-shadow .22s;
    }
    .svc-row.on { opacity:1; transform:none; }

    /* ── Service row index number pop ── */
    @keyframes idxPop { from{opacity:0;transform:translateX(-6px)} to{opacity:1;transform:none} }
    .svc-row.on .svc-idx { animation:idxPop .4s ease both; }

    /* ── Stats cell number spring-in ── */
    @keyframes statPop {
      0%  { opacity:0; transform:translateY(22px) scale(.78); }
      65% { transform:translateY(-3px) scale(1.06); }
      100%{ opacity:1; transform:none; }
    }
    .stats-cell { opacity:0; transform:translateY(24px); transition:opacity .65s cubic-bezier(.16,1,.3,1),transform .65s cubic-bezier(.16,1,.3,1); }
    .stats-cell.on { opacity:1; transform:none; }
    .stats-cell.on .stats-big { animation:statPop .7s cubic-bezier(.16,1,.3,1) both; }
    .stats-cell.on:nth-child(2) .stats-big { animation-delay:.1s; }
    .stats-cell.on:nth-child(3) .stats-big { animation-delay:.2s; }
    .stats-cell.on:nth-child(4) .stats-big { animation-delay:.3s; }

    /* ── Skill bar wipe-in ── */
    @keyframes barWipe { from{width:0!important} to{} }
    .pfill.on { animation:barWipe 1.15s cubic-bezier(.16,1,.3,1) both; }

    /* ── Button click ripple ── */
    .btn-blk,.btn-out,.btn-wht,.nav-cta { position:relative; overflow:hidden; }
    .btn-blk::after,.btn-out::after,.btn-wht::after,.nav-cta::after {
      content:''; position:absolute; inset:0;
      background:rgba(255,255,255,.24); border-radius:inherit;
      transform:scale(0); opacity:1; pointer-events:none;
      transition:transform .48s ease,opacity .48s ease;
    }
    .btn-blk:active::after,.btn-out:active::after,
    .btn-wht:active::after,.nav-cta:active::after { transform:scale(2.6); opacity:0; }

    /* ── Nav link underline slide ── */
    .nav-link { position:relative; }
    .nav-link::after {
      content:''; position:absolute; bottom:2px; left:50%; right:50%;
      height:1.5px; background:#0a0a14; border-radius:1px;
      transition:left .22s cubic-bezier(.23,1,.32,1),right .22s cubic-bezier(.23,1,.32,1);
    }
    .nav-link:hover::after { left:14px; right:14px; }

    /* ── Card shimmer on hover ── */
    .wcard,.prod-card,.insight-card,.career-row { position:relative; overflow:hidden; }
    .wcard::before,.prod-card::before,.insight-card::before,.career-row::before {
      content:''; position:absolute; top:0; left:-120%; width:55%; height:100%;
      background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
      transition:left .58s ease; pointer-events:none; z-index:2;
    }
    .wcard:hover::before,.prod-card:hover::before,
    .insight-card:hover::before,.career-row:hover::before { left:160%; }

    /* ── Sec eyebrow letter-space entrance ── */
    @keyframes eyeSlide { from{opacity:0;letter-spacing:.3em} to{opacity:1;letter-spacing:.12em} }
    .sec-eyebrow.on { animation:eyeSlide .85s cubic-bezier(.16,1,.3,1) both; }

    /* ── CTA band grid pulse ── */
    @keyframes gridPulse { 0%,100%{opacity:.04} 50%{opacity:.1} }
    .cta-band::before { animation:gridPulse 4.2s ease infinite; }

    /* ── Footer link underline ── */
    .fl { position:relative; }
    .fl::after { content:''; position:absolute; bottom:-1px; left:0; width:0; height:1px; background:rgba(242,242,238,.6); transition:width .24s ease; }
    .fl:hover::after { width:100%; }

    /* ── Scroll-indicator appear ── */
    @keyframes scrollIn { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:none} }
    .scroll-ind { animation:scrollIn .8s cubic-bezier(.16,1,.3,1) 3.2s both; }

    /* ── Hero badge entrance ── */
    @keyframes badgeIn { from{opacity:0;transform:scale(.85) translateY(-10px);filter:blur(4px)} to{opacity:1;transform:scale(1);filter:blur(0)} }
    .hero-badge { animation:badgeIn .7s cubic-bezier(.16,1,.3,1) .1s both; }

    /* ══════════════════════════════════════
       CUSTOM CURSOR SYSTEM
    ══════════════════════════════════════ */

    /* ══════════════════════════════════════
       SCROLL PROGRESS BAR
    ══════════════════════════════════════ */
    .scroll-progress {
      position: fixed;
      top: 0; left: 0;
      height: 3px;
      background: linear-gradient(90deg, #0a0a14, #0ea5e9, #0a0a14);
      background-size: 200% 100%;
      animation: progressShimmer 3s linear infinite;
      z-index: 10001;
      transform-origin: left;
      transition: none;
    }
    @keyframes progressShimmer {
      0%   { background-position: 200% 0; }
      100% { background-position: -200% 0; }
    }

    /* ══════════════════════════════════════
       PARALLAX HORIZONTAL SCROLL TEXT
    ══════════════════════════════════════ */
    .parallax-text-wrap {
      overflow: hidden;
      position: relative;
      padding: 20px 0;
      pointer-events: none;
      user-select: none;
    }
    .parallax-text {
      font-size: clamp(4rem, 10vw, 10rem);
      font-weight: 900;
      letter-spacing: -0.04em;
      color: transparent;
      -webkit-text-stroke: 1.5px rgba(0,0,0,0.06);
      white-space: nowrap;
      will-change: transform;
      line-height: 1;
    }

    /* ══════════════════════════════════════
       HEADING CLIP-PATH WIPE REVEAL
    ══════════════════════════════════════ */
    .clip-reveal {
      clip-path: inset(0 100% 0 0);
      transition: clip-path 1.1s cubic-bezier(0.16,1,0.3,1);
    }
    .clip-reveal.on {
      clip-path: inset(0 0% 0 0);
    }

    /* ══════════════════════════════════════
       COUNTER ANIMATION STYLES
    ══════════════════════════════════════ */
    .count-up {
      display: inline-block;
      font-variant-numeric: tabular-nums;
    }

    /* ══════════════════════════════════════
       MAGNETIC BUTTON EFFECT
    ══════════════════════════════════════ */
    .magnetic-btn {
      transition: transform 0.35s cubic-bezier(0.23,1,0.32,1);
    }

    /* ══════════════════════════════════════
       ENHANCED CARD SCROLL ANIMATIONS
    ══════════════════════════════════════ */
    .card-3d-enter {
      opacity: 0;
      transform: perspective(800px) rotateY(8deg) translateY(40px) scale(0.92);
      transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1),
                  transform 0.8s cubic-bezier(0.16,1,0.3,1);
    }
    .card-3d-enter.on {
      opacity: 1;
      transform: perspective(800px) rotateY(0deg) translateY(0) scale(1);
    }

    /* ══════════════════════════════════════
       TEXT SCRAMBLE on hover
    ══════════════════════════════════════ */
    .sec-eyebrow {
      transition: letter-spacing 0.3s ease;
    }
    .sec-eyebrow:hover {
      letter-spacing: 0.2em;
    }

    /* ══════════════════════════════════════
       SMOOTH SECTION DIVIDER ANIMATION
    ══════════════════════════════════════ */
    .section-divider {
      width: 100%;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(0,0,0,0.12), transparent);
      transform: scaleX(0);
      transition: transform 1.2s cubic-bezier(0.16,1,0.3,1);
    }
    .section-divider.on {
      transform: scaleX(1);
    }

    /* ══════════════════════════════════════
       FLOATING PARTICLES on scroll
    ══════════════════════════════════════ */
    .scroll-particle {
      position: fixed;
      width: 4px; height: 4px;
      border-radius: 50%;
      background: rgba(10,10,20,0.08);
      pointer-events: none;
      z-index: 5;
      transition: opacity 0.5s;
    }

    /* ══════════════════════════════════════
       ENHANCED HERO TEXT GLOW
    ══════════════════════════════════════ */
    .bh1-bold {
      text-shadow: 0 0 0 transparent;
      transition: text-shadow 0.6s;
    }
    .bh1-bold:hover {
      text-shadow: 0 4px 60px rgba(10,10,20,0.1);
    }

    /* ══════════════════════════════════════
       SMOOTH NAVBAR SCROLL RAMP
    ══════════════════════════════════════ */
    .navbar {
      background: rgba(242,242,238,0.12);
      backdrop-filter: blur(3px);
    }

/* Generated Inline Style Classes: Start */
.u-inline-1 { position:fixed; top:0; left:0; width:100%; height:100%; z-index:0; pointer-events:none; }
.u-inline-2 { color:white; font-size:0.8rem; }
.u-inline-3 { display:flex; align-items:center; gap:8px; }
.u-inline-4 { font-size:0.75rem; }
.u-inline-5 { display:none; position:fixed; inset:0; top:66px; z-index:996; }
.u-inline-6 {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 999;
  background: #fff;
  flex-direction: column;
  padding: 0 7% 40px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.mob-menu-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 66px;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(0,0,0,0.07);
  margin-bottom: 8px;
}
.mob-menu-brand {
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  color: #0a0a14;
}
.mob-menu-close {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: #f0f0ec;
  border: none;
  color: #0a0a14;
  font-size: 1rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s;
}
.mob-menu-close:hover { background: #e4e4e0; }
.mob-menu-nav {
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: center;
  gap: 4px;
  padding: 24px 0;
}
.mob-menu-link {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: clamp(1.6rem, 7vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: rgba(10,10,20,0.8);
  text-decoration: none;
  padding: 8px 0;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  transition: color 0.2s, padding-left 0.25s;
  cursor: pointer;
  background: none;
  border-left: none;
  border-right: none;
  border-top: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.mob-menu-link:last-child { border-bottom: none; }
.mob-menu-link:hover { color: #0a0a14; padding-left: 8px; }
.mob-menu-num {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(0,0,0,0.2);
  width: 28px;
  flex-shrink: 0;
  padding-top: 4px;
}
.mob-menu-chevron {
  margin-left: auto;
  font-size: 0.75rem;
  color: rgba(0,0,0,0.3);
  transition: transform 0.25s;
  flex-shrink: 0;
}
.mob-menu-link.open .mob-menu-chevron { transform: rotate(180deg); }
.mob-sub {
  display: none;
  flex-direction: column;
  gap: 2px;
  padding: 8px 0 12px 44px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.mob-sub.open { display: flex; }
.mob-sub-item {
  font-size: 0.88rem;
  font-weight: 600;
  color: #444;
  text-decoration: none;
  padding: 9px 14px;
  border-radius: 10px;
  transition: background 0.15s, color 0.15s;
  display: block;
}
.mob-sub-item:hover { background: #f5f5f2; color: #0a0a14; }
.mob-sub-desc {
  font-size: 0.72rem;
  font-weight: 400;
  color: #aaa;
  margin-top: 1px;
}
.mob-menu-footer {
  flex-shrink: 0;
  padding-top: 24px;
  border-top: 1px solid rgba(0,0,0,0.07);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.mob-menu-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: #0a0a14;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  border-radius: 999px;
  text-decoration: none;
  transition: opacity 0.2s;
}
.mob-menu-cta:hover { opacity: 0.85; }
.mob-menu-tagline {
  font-size: 0.75rem;
  color: rgba(0,0,0,0.25);
  font-style: italic;
  text-align: right;
}
.u-inline-9 { transition:transform 0.15s ease-out; transform-style:preserve-3d; }
.u-inline-10 { font-size:0.55rem; color:white; }
.u-inline-11 { transition:transform 0.2s cubic-bezier(0.23,1,0.32,1); }
.u-inline-12 { min-height:4.5em; }
.u-inline-13 { left:95%; top:50%; transform:translate(-50%,-50%) rotate(0deg); }
.u-inline-14 { left:73.3%; top:4.7%; transform:translate(-50%,-50%) rotate(-60deg); }
.u-inline-15 { left:26.7%; top:4.7%; transform:translate(-50%,-50%) rotate(-120deg); }
.u-inline-16 { left:5%; top:50%; transform:translate(-50%,-50%) rotate(-180deg); }
.u-inline-17 { left:26.7%; top:95.3%; transform:translate(-50%,-50%) rotate(-240deg); }
.u-inline-18 { left:73.3%; top:95.3%; transform:translate(-50%,-50%) rotate(-300deg); }
.u-inline-19 { display:inline-block; width:6px; height:6px; border-radius:50%; background:#22c55e; }
.u-inline-20 { font-size:0.6rem; }
.u-inline-21 { transition-delay:0s; }
.u-inline-22 { transition-delay:0.3s; }
.u-inline-23 { transition-delay:0.1s; }
.u-inline-24 { transition-delay:0.25s; }
.u-inline-25 { --svc-bg-rgb:240,240,236; --svc-text:#0a0a14; --svc-muted:#71717a; --svc-sub:#5f6672; --svc-dot:10,10,20; position:relative; background:rgb(var(--svc-bg-rgb)); width:100%; color:var(--svc-text); padding-top:100px; padding-bottom:100px; font-family:'Inter',sans-serif; transition:background-color 0.18s linear,color 0.18s linear; }
.u-inline-26 { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.u-inline-27 { position:absolute; top:0; left:50%; transform:translateX(-50%); width:100%; display:flex; justify-content:center; pointer-events:none; z-index:0; overflow:hidden; }
.u-inline-28 { position:relative; z-index:10; max-width:80rem; margin:0 auto; padding:0 24px; }
.u-inline-29 { display:flex; flex-direction:row; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:32px; margin-bottom:60px; }
.u-inline-30 { max-width:42rem; }
.u-inline-31 { font-size:0.75rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--svc-muted); margin-bottom:16px; display:flex; align-items:center; gap:8px; }
.u-inline-32 { width:8px; height:8px; border-radius:50%; background:rgb(var(--svc-dot)); box-shadow:0 0 10px rgba(var(--svc-dot),0.45); display:inline-block; }
.u-inline-33 { font-size:clamp(2rem,5vw,3.75rem); font-weight:700; letter-spacing:-0.025em; color:var(--svc-text); line-height:1.1; margin:0; }
.u-inline-34 { max-width:28rem; text-align:right; }
.u-inline-35 { color:var(--svc-sub); font-size:1.05rem; margin-bottom:20px; line-height:1.6; }
.u-inline-36 { position:relative; z-index:20; width:100%; margin-top:60px; }
.u-inline-37 { margin-bottom:72px; }
.u-inline-38 { gap:64px; }
.u-inline-39 { padding:36px; position:relative; overflow:hidden; }
.u-inline-40 { position:absolute; top:-40px; right:-40px; width:160px; height:160px; border-radius:50%; background:rgba(0,0,0,0.025); }
.u-inline-41 { display:flex; align-items:center; gap:12px; margin-bottom:28px; }
.u-inline-42 { width:44px; height:44px; border-radius:12px; background:#0a0a14; display:flex; align-items:center; justify-content:center; font-size:1.3rem; }
.u-inline-43 { font-weight:800; font-size:1rem; color:#0a0a14; }
.u-inline-44 { color:#aaa; font-size:0.76rem; margin-top:2px; }
.u-inline-45 { display:flex; gap:10px; margin-top:28px; padding:16px; background:#f8f8f5; border-radius:14px; border:1px solid rgba(0,0,0,0.06); }
.u-inline-46 { flex:1; text-align:center; font-size:0.7rem; font-weight:600; color:#555; line-height:1.4; }
.u-inline-47 { margin-bottom:8px; }
.u-inline-48 { height:2px; width:48px; background:#0a0a14; border-radius:1px; margin-bottom:24px; }
.u-inline-49 { color:#777; line-height:1.8; margin-bottom:18px; font-size:0.93rem; }
.u-inline-50 { color:#777; line-height:1.8; margin-bottom:32px; font-size:0.93rem; }
.u-inline-51 { gap:10px; margin-bottom:34px; }
.u-inline-52 { display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:20px; margin-bottom:40px; }
.u-inline-53 { max-width:380px; }
.u-inline-54 { display:flex; gap:24px; margin-bottom:32px; flex-wrap:wrap; }
.u-inline-55 { font-weight:900; font-size:1.25rem; letter-spacing:-0.04em; color:#0a0a14; }
.u-inline-56 { font-size:0.75rem; color:#aaa; font-weight:500; }
.u-inline-57 { color:#ddd; margin-left:8px; }
.u-inline-58 { text-align:center; margin-top:44px; }
.u-inline-59 { color:#aaa; font-size:0.85rem; margin-bottom:16px; }
.u-inline-60 { display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:20px; margin-bottom:48px; }
.u-inline-61 { max-width:340px; }
.u-inline-62 { display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:20px; margin-bottom:52px; }
.u-inline-63 { max-width:360px; }
.u-inline-64 { margin-bottom:16px; }
.u-inline-65 { display:flex; gap:10px; flex-wrap:wrap; }
.u-inline-66 { font-size:0.72rem; font-weight:600; background:#0a0a14; color:white; padding:4px 12px; border-radius:99px; }
.u-inline-67 { position:relative; z-index:1; max-width:1200px; margin:0 auto; }
.u-inline-68 { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:32px; }
.u-inline-69 { max-width:580px; }
.u-inline-70 { font-size:0.7rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:rgba(242,242,238,0.45); margin-bottom:16px; display:flex; align-items:center; gap:8px; }
.u-inline-71 { display:inline-block; width:18px; height:1px; background:rgba(242,242,238,0.3); }
.u-inline-72 { font-size:clamp(2rem,3.5vw,3rem); font-weight:900; letter-spacing:-0.04em; line-height:1.1; color:#f2f2ee; margin-bottom:14px; }
.u-inline-73 { color:rgba(242,242,238,0.5); font-size:0.93rem; line-height:1.75; }
.u-inline-74 { display:flex; flex-direction:column; gap:12px; min-width:220px; }
.u-inline-75 { display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:20px; margin-bottom:56px; }
.u-inline-76 { gap:44px; }
.u-inline-77 { display:flex; flex-direction:column; gap:11px; margin-bottom:28px; }
.u-inline-78 { display:flex; align-items:flex-start; gap:13px; padding:13px 15px; border-radius:13px; background:white; border:1px solid rgba(0,0,0,0.07); box-shadow:0 1px 8px rgba(0,0,0,0.03); transition-delay:0s; }
.u-inline-79 { width:36px; height:36px; min-width:36px; border-radius:9px; background:#f5f3ff; border:1px solid rgba(0,0,0,0.07); display:flex; align-items:center; justify-content:center; }
.u-inline-80 { color:#333; font-size:0.85rem; }
.u-inline-81 { font-size:0.69rem; font-weight:700; text-transform:uppercase; letter-spacing:0.09em; color:#bbb; margin-bottom:2px; }
.u-inline-82 { font-size:0.86rem; font-weight:500; color:#333; }
.u-inline-83 { display:flex; align-items:flex-start; gap:13px; padding:13px 15px; border-radius:13px; background:white; border:1px solid rgba(0,0,0,0.07); box-shadow:0 1px 8px rgba(0,0,0,0.03); transition-delay:0.08s; }
.u-inline-84 { width:36px; height:36px; min-width:36px; border-radius:9px; background:#f0faf6; border:1px solid rgba(0,0,0,0.07); display:flex; align-items:center; justify-content:center; }
.u-inline-85 { display:flex; align-items:flex-start; gap:13px; padding:13px 15px; border-radius:13px; background:white; border:1px solid rgba(0,0,0,0.07); box-shadow:0 1px 8px rgba(0,0,0,0.03); transition-delay:0.16s; }
.u-inline-86 { width:36px; height:36px; min-width:36px; border-radius:9px; background:#fff5f9; border:1px solid rgba(0,0,0,0.07); display:flex; align-items:center; justify-content:center; }
.u-inline-87 { display:flex; align-items:flex-start; gap:13px; padding:13px 15px; border-radius:13px; background:white; border:1px solid rgba(0,0,0,0.07); box-shadow:0 1px 8px rgba(0,0,0,0.03); transition-delay:0.24s; }
.u-inline-88 { width:36px; height:36px; min-width:36px; border-radius:9px; background:#fffbee; border:1px solid rgba(0,0,0,0.07); display:flex; align-items:center; justify-content:center; }
.u-inline-89 { font-size:0.75rem; font-weight:600; color:#aaa; margin-bottom:11px; text-transform:uppercase; letter-spacing:0.08em; }
.u-inline-90 { display:flex; gap:7px; }
.u-inline-91 { padding:34px; }
.u-inline-92 { display:none; text-align:center; padding:48px 20px; }
.u-inline-93 { font-size:3rem; margin-bottom:14px; }
.u-inline-94 { font-weight:700; margin-bottom:7px; color:#0a0a14; }
.u-inline-95 { color:#888; font-size:0.88rem; }
.u-inline-96 { gap:13px; margin-bottom:13px; }
.u-inline-97 { font-size:0.74rem; font-weight:600; color:#888; display:block; margin-bottom:5px; text-transform:uppercase; letter-spacing:0.06em; }
.u-inline-98 { margin-bottom:20px; }
.u-inline-99 { resize:vertical; }
.u-inline-100 { width:100%; justify-content:center; padding:13px; font-size:0.91rem; }
.u-inline-101 { padding:56px 5% 0; }
.u-inline-102 { max-width:1200px; margin:0 auto; }
.u-inline-103 { padding-bottom:44px; }
.u-inline-104 { display:flex; align-items:center; gap:9px; margin-bottom:14px; }
.u-inline-105 { width:30px; height:30px; border-radius:8px; background:white; display:flex; align-items:center; justify-content:center; }
.u-inline-106 { color:#0a0a14; font-size:0.75rem; }
.u-inline-107 { font-weight:800; font-size:0.95rem; color:#f2f2ee; }
.u-inline-108 { color:rgba(242,242,238,0.3); font-weight:300; }
.u-inline-109 { color:rgba(242,242,238,0.38); font-size:0.81rem; line-height:1.72; margin-bottom:18px; }
.u-inline-110 { color:rgba(242,242,238,0.6); font-weight:700; font-size:0.82rem; margin-bottom:15px; text-transform:uppercase; letter-spacing:0.07em; }
.u-inline-111 { color:rgba(242,242,238,0.38); font-size:0.81rem; line-height:1.85; }
.u-inline-112 { display:flex; gap:8px; margin-bottom:10px; }
.u-inline-113 { color:rgba(242,242,238,0.5); margin-top:2px; }
.u-inline-114 { color:rgba(242,242,238,0.5); }
.u-inline-115 { display:flex; gap:8px; }
.u-inline-116 { height:1px; background:rgba(255,255,255,0.07); margin-bottom:22px; }
.u-inline-117 { padding-bottom:22px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; }
.u-inline-118 { color:rgba(242,242,238,0.25); font-size:0.77rem; }
.u-inline-119 { display:flex; gap:18px; }
.u-inline-120 { color:rgba(242,242,238,0.25); font-size:0.77rem; text-decoration:none; }
/* Generated Inline Style Classes: End */


.ftr-logo{
  height: 50px;
  filter: invert(1);
}

.nf-wrap {

  background: #0a0a14;
  padding: 48px 24px 0;
  position: relative;
  overflow: hidden;
}
.nf-wrap::before,
.nf-wrap::after {
  content: '';
  position: absolute;
  width: 260px;
  height: 260px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cg fill='none' stroke='%23333333' stroke-width='1.5' opacity='0.55'%3E%3Cellipse cx='130' cy='130' rx='110' ry='50' transform='rotate(0 130 130)'/%3E%3Cellipse cx='130' cy='130' rx='110' ry='50' transform='rotate(40 130 130)'/%3E%3Cellipse cx='130' cy='130' rx='110' ry='50' transform='rotate(80 130 130)'/%3E%3Cellipse cx='130' cy='130' rx='110' ry='50' transform='rotate(120 130 130)'/%3E%3Cellipse cx='130' cy='130' rx='110' ry='50' transform='rotate(160 130 130)'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
  z-index: 0;
}
.nf-wrap::before { bottom: 0; left: -60px; }
.nf-wrap::after  { bottom: 0; right: -60px; }
.nf-card {
  position: relative;
  z-index: 1;
     background: #10101d;
    border: 1px solid #1f1f38;
  border-radius: 20px;
  padding: 40px 36px 0;
  max-width: 1200px;
  margin: 0 auto;
}
.nf-top {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 36px;
}
.nf-col-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 18px;
}
.nf-link-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.nf-link-list li a {
  text-decoration: none;
  color: #aaaaaa;
  font-size: 0.92rem;
  transition: color .2s;
}
.nf-link-list li a:hover { color: #ffffff; }
.nf-contact-item {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  font-size: 0.92rem;
  color: #aaaaaa;
}
.nf-icon-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid #555;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.85rem;
  color: #aaaaaa;
}
.nf-newsletter-form {
  display: flex;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #3a3a3a;
  margin-bottom: 28px;
  background: #2a2a2a;
}
.nf-newsletter-form input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 12px 14px;
  font-size: 0.88rem;
  outline: none;
  color: #cccccc;
}
.nf-newsletter-form button {
  background: #ffffff;
  color: #111111;
  border: none;
  padding: 12px 20px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  border-radius: 0 7px 7px 0;
}
.nf-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.nf-brand-icon {
  width: 40px;
  height: 40px;
}
.nf-brand-name {
  font-size: 1.25rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.1;
}
.nf-brand-name span {
  display: block;
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 2px;
  color: #888888;
  text-transform: uppercase;
}
.nf-address {
  font-size: 0.85rem;
  color: #888888;
  line-height: 1.65;
}
.nf-bottom {
  border-top: 1px solid #2a2a2a;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  padding: 32px 0 36px;
  align-items: center;
}
.nf-career-contacts {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
}
.nf-social-row {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  align-items: center;
}
.nf-social-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1.5px solid #555;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #aaaaaa;
  font-size: 0.85rem;
  transition: background .2s, color .2s;
}
.nf-social-btn:hover { background: #ffffff; color: #111111; }
.nf-copy-bar {
  border-top: 1px solid #2a2a2a;
  text-align: center;
  padding: 16px 0;
  font-size: 0.8rem;
  color: #666666;
}
@media (max-width: 768px) {
  .nf-top { grid-template-columns: 1fr; }
  .nf-bottom { grid-template-columns: 1fr; }
  .nf-social-row { justify-content: flex-start; }
}

/* ── FLOATING ACTION BUTTONS ── */
.fab-bar {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
}
.fab-glass {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 8px 10px;
  border-radius: 99px;
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,0.35);
  box-shadow: 0 8px 32px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.5);
  position: relative;
  overflow: hidden;
  animation: fab-shine 5s ease-in-out infinite;
}
.fab-glass::before {
  content: '';
  position: absolute;
  top: 0; left: -75%;
  width: 50%; height: 100%;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.55) 50%, transparent 100%);
  transform: skewX(-20deg);
  animation: fab-sweep 5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes fab-sweep {
  0%   { left: -75%; opacity: 0; }
  10%  { opacity: 1; }
  40%  { left: 125%; opacity: 0; }
  100% { left: 125%; opacity: 0; }
}
@keyframes fab-shine {
  0%,100% { box-shadow: 0 8px 32px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.5); }
  20%      { box-shadow: 0 8px 40px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.8), 0 0 24px rgba(255,255,255,0.18); }
  40%      { box-shadow: 0 8px 32px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.5); }
}
.fab-divider {
  width: 1px;
  height: 28px;
  background: rgba(255,255,255,0.35);
  margin: 0 6px;
  flex-shrink: 0;
}
.fab-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 99px;
  font-size: 0.88rem;
  font-weight: 700;
  color: #fff;
  transition: transform 0.2s, filter 0.2s;
  white-space: nowrap;
  position: relative;
  z-index: 1;
}
.fab-btn:hover { transform: translateY(-2px); filter: brightness(1.1); }
.fab-btn i { font-size: 1.1rem; }
.fab-wa { background: #25d366; box-shadow: 0 3px 12px rgba(37,211,102,0.4); border-radius: 99px; }
.fab-tg { background: #0088cc; box-shadow: 0 3px 12px rgba(0,136,204,0.4); border-radius: 99px; }

@media (max-width: 600px) {
  .svc-new-img-frame {
    width: 35vh !important;
    height: 35vh !important;}
  .fab-bar { bottom: 16px; }
  .fab-glass { padding: 6px 8px; }
  .fab-btn { padding: 9px 14px; font-size: 0.8rem; }
  .product-runway-intro > .btn-blk{
    width: 150px;
  }
}

.hdr-logo{
  display: block;
  height:36px;
  width:auto
}

.sec-eyebrow{display: none;}

html, body{
  width:100%;
  max-width: 100%;
  overflow-x: clip;
}
.pb-0{
  padding-bottom:0px;
}