:root {
      --bg: #050816;
      --panel: rgba(15, 23, 43, 0.84);
      --panel-strong: rgba(10, 16, 31, 0.94);
      --stroke: rgba(255, 255, 255, 0.10);
      --text: #f5f8ff;
      --muted: #9ca9c7;
      --muted-strong: #d8def0;
      --accent: #74d2ff;
      --accent-2: #98f1d4;
      --accent-3: #7f8cff;
      --shadow: 0 24px 70px rgba(0, 0, 0, 0.38);
      --radius-xl: 32px;
      --radius-lg: 22px;
      --radius-md: 16px;
    }

    * {
      box-sizing: border-box;
    }

    html,
    body {
      margin: 0;
      width: 100%;
      height: 100%;
      min-height: 100%;
      background:
        radial-gradient(circle at top left, rgba(80, 133, 255, 0.18), transparent 32%),
        radial-gradient(circle at 80% 20%, rgba(116, 210, 255, 0.14), transparent 25%),
        #050816;
      color: var(--text);
      font-family: "Manrope", sans-serif;
      overflow: hidden;
    }

    body::before,
    body::after {
      content: "";
      position: fixed;
      z-index: 0;
      pointer-events: none;
      border-radius: 999px;
      filter: blur(90px);
      opacity: 0.45;
    }

    body::before {
      top: -120px;
      left: -120px;
      width: 320px;
      height: 320px;
      background: rgba(120, 137, 255, 0.25);
      animation: drift 16s ease-in-out infinite;
    }

    body::after {
      right: -140px;
      bottom: -140px;
      width: 380px;
      height: 380px;
      background: rgba(116, 210, 255, 0.18);
      animation: drift 20s ease-in-out infinite reverse;
    }

    .reveal-viewport,
    .reveal {
      position: relative;
      width: 100vw;
      height: 100vh;
      z-index: 1;
      background:
        radial-gradient(circle at top left, rgba(80, 133, 255, 0.18), transparent 32%),
        radial-gradient(circle at 80% 20%, rgba(116, 210, 255, 0.14), transparent 25%),
        #050816;
      color: var(--text);
      font-family: "Manrope", sans-serif;
    }

    .reveal .slides {
      width: 100vw !important;
      height: 100vh !important;
      text-align: left;
    }

    .reveal .slides section {
      width: 100vw !important;
      height: 100%;
      padding: 0 !important;
    }

    .reveal .controls,
    .reveal .progress {
      color: var(--accent);
    }

    .slide-shell {
      position: relative;
      width: 100vw;
      min-height: 100vh;
      height: 100vh;
      padding: 40px 46px;
      overflow: hidden;
      border-radius: 0;
      border: 0;
      background: linear-gradient(145deg, rgba(14, 22, 42, 0.90), rgba(7, 11, 22, 0.95));
      box-shadow: none;
    }

    .slide-shell::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px);
      background-size: 110px 110px;
      mask-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.35), transparent 88%);
      opacity: 0.24;
      pointer-events: none;
    }

    .slide-shell::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 20% 20%, rgba(116, 210, 255, 0.12), transparent 28%),
        radial-gradient(circle at 80% 18%, rgba(127, 140, 255, 0.10), transparent 22%),
        linear-gradient(180deg, transparent, rgba(2, 6, 16, 0.42));
      pointer-events: none;
    }

    .content-layer {
      position: relative;
      z-index: 2;
      height: 100%;
    }

    .video-backdrop,
    .media-video {
      position: absolute;
      inset: 0;
      overflow: hidden;
    }

    .video-backdrop video,
    .media-video video {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .video-backdrop::after,
    .media-video::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(
        125deg,
        rgba(4, 8, 19, 0.84),
        rgba(6, 10, 22, 0.60) 45%,
        rgba(5, 8, 17, 0.92)
      );
    }

    .hero-slide .video-backdrop video {
      filter: brightness(0.62) saturate(0.92);
    }

    .services-slide .video-backdrop video,
    .operations-slide .video-backdrop video {
      filter: brightness(0.40) saturate(0.88);
      transform: scale(1.02);
    }

    .visual-slide .media-video video,
    .closing-slide .video-backdrop video,
    .automation-slide .video-backdrop video {
      filter: brightness(0.60) saturate(0.90);
    }

    .hero-grid,
    .two-column-grid {
      display: grid;
      grid-template-columns: 1.08fr 0.92fr;
      gap: 24px;
      align-items: center;
      height: 100%;
    }

    .closing-grid {
      display: grid;
      grid-template-columns: 1.12fr 0.88fr;
      gap: 24px;
      align-items: end;
      height: 100%;
    }

    .hero-expanded-layout {
      display: grid;
      grid-template-columns: 1.04fr 0.96fr;
      gap: 24px;
      align-items: center;
      height: 100%;
    }

    .hero-expanded-content {
      justify-content: center;
    }

    .hero-slide-expanded .lead {
      max-width: 920px;
    }

    .hero-reveal-column {
      display: grid;
      gap: 14px;
      align-content: center;
    }

    .hero-reveal-card {
      padding: 20px;
    }

    .hero-reveal-card small {
      display: block;
      margin-bottom: 8px;
      color: var(--muted);
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .hero-reveal-card strong {
      display: block;
      margin-bottom: 8px;
      font-family: "Sora", sans-serif;
      font-size: 1.4rem;
      line-height: 1.1;
    }

    .hero-reveal-card p {
      margin: 0;
      color: #d0daf0;
      line-height: 1.52;
    }

    .stack {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 12px;
      color: var(--accent-2);
      font-size: 0.88rem;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }

    .eyebrow::before {
      content: "";
      width: 46px;
      height: 1px;
      background: linear-gradient(90deg, var(--accent-2), transparent);
    }

    h1,
    h2,
    h3 {
      margin: 0;
      font-family: "Sora", sans-serif;
      letter-spacing: -0.04em;
    }

    .hero-title {
      max-width: 720px;
      font-size: clamp(2.25rem, 4vw, 4rem);
      line-height: 1.03;
    }

    .section-title {
      max-width: 860px;
      font-size: clamp(2rem, 3.5vw, 3.2rem);
      line-height: 1.08;
    }

    .closing-title {
      max-width: 720px;
      font-size: clamp(2.7rem, 4.3vw, 4.4rem);
      line-height: 1.04;
    }

    .lead {
      max-width: 790px;
      margin: 0;
      color: var(--muted-strong);
      font-size: 1rem;
      line-height: 1.58;
    }

    .chips,
    .signals,
    .audience {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .chip,
    .signal,
    .audience span {
      display: inline-flex;
      align-items: center;
      padding: 8px 12px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.10);
      background: rgba(255, 255, 255, 0.05);
      color: #d6def4;
      font-size: 0.84rem;
      font-weight: 600;
    }

    .signal {
      background: rgba(116, 210, 255, 0.08);
      border-color: rgba(116, 210, 255, 0.18);
    }

    .hero-note,
    .note {
      padding: 16px 18px;
      border-radius: 18px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      background: rgba(255, 255, 255, 0.04);
      color: #e5ecfb;
      line-height: 1.58;
      backdrop-filter: blur(18px);
    }

    .impact-grid,
    .cards-grid,
    .ops-grid {
      display: grid;
      gap: 14px;
    }

    .impact-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      margin-top: 4px;
    }

    .cards-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .cards-grid.two-up {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .impact-card,
    .service-card,
    .summary-card,
    .media-card {
      position: relative;
      overflow: hidden;
      border-radius: var(--radius-lg);
      border: 1px solid var(--stroke);
      background: linear-gradient(180deg, rgba(18, 29, 56, 0.72), rgba(8, 13, 26, 0.84));
      backdrop-filter: blur(18px);
      box-shadow: 0 18px 44px rgba(0, 0, 0, 0.24);
    }

    .impact-card::before,
    .service-card::before,
    .summary-card::before {
      content: "";
      position: absolute;
      top: 0;
      left: -35%;
      width: 35%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
      transform: skewX(-18deg);
      animation: shine 8s ease-in-out infinite;
      pointer-events: none;
    }

    .impact-card {
      min-height: 138px;
      padding: 16px 18px;
    }

    .impact-card strong {
      display: block;
      margin-bottom: 8px;
      color: var(--accent-2);
      font-size: 1.08rem;
      letter-spacing: -0.02em;
    }

    .impact-card span {
      color: var(--muted);
      font-size: 0.93rem;
      line-height: 1.55;
    }

    .service-card {
      display: flex;
      flex-direction: column;
      gap: 12px;
      min-height: 220px;
      padding: 18px;
    }

    .card-topline {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
    }

    .card-index {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 36px;
      height: 36px;
      padding: 0 12px;
      border-radius: 999px;
      border: 1px solid rgba(116, 210, 255, 0.28);
      background: rgba(116, 210, 255, 0.12);
      color: var(--accent);
      font-size: 0.90rem;
      font-weight: 800;
    }

    .card-label {
      color: var(--muted);
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .service-card h3 {
      font-size: 1.15rem;
      line-height: 1.24;
    }

    .service-card p {
      margin: 0;
      color: #d0daf0;
      font-size: 0.92rem;
      line-height: 1.52;
    }

    .detail-box {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-top: auto;
    }

    .detail-box small {
      color: var(--muted);
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .detail {
      color: var(--accent-2);
      font-size: 1rem;
      font-weight: 800;
      line-height: 1.35;
    }

    .ops-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      margin-top: 6px;
    }

    .ops-item {
      padding: 18px;
      border-radius: 18px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      background: rgba(10, 17, 31, 0.68);
      backdrop-filter: blur(16px);
    }

    .ops-item strong {
      display: block;
      margin-bottom: 8px;
    }

    .ops-item span {
      color: var(--muted);
      line-height: 1.52;
    }

    .media-card {
      min-height: 100%;
      padding: 24px;
    }

    .media-copy {
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      min-height: 400px;
      height: 100%;
    }

    .media-card h3,
    .summary-card h3 {
      margin-bottom: 10px;
      font-size: 1.35rem;
      line-height: 1.24;
    }

    .media-card p,
    .summary-card p {
      margin: 0 0 16px;
      color: #d0daf0;
      line-height: 1.58;
    }

    .section-panel {
      padding: 24px;
    }

    .summary-list {
      margin: 0;
      padding: 0;
      list-style: none;
      display: grid;
      gap: 12px;
    }

    .summary-list li {
      position: relative;
      padding-left: 20px;
      color: #dce5f8;
      line-height: 1.54;
    }

    .summary-list li::before {
      content: "";
      position: absolute;
      top: 10px;
      left: 0;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--accent), var(--accent-2));
      box-shadow: 0 0 18px rgba(116, 210, 255, 0.35);
    }

    .device-stage {
      position: relative;
      min-height: 540px;
      perspective: 1800px;
      --tilt-x: 0deg;
      --tilt-y: 0deg;
    }

    .device-halo {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 320px;
      height: 320px;
      border-radius: 50%;
      transform: translate(-50%, -58%);
      background:
        radial-gradient(circle, rgba(116, 210, 255, 0.24), transparent 62%),
        radial-gradient(circle at 30% 30%, rgba(127, 140, 255, 0.28), transparent 28%);
      filter: blur(20px);
      animation: pulse 8s ease-in-out infinite;
    }

    .ring {
      position: absolute;
      top: 52%;
      left: 50%;
      border-radius: 50%;
      border: 1px solid rgba(116, 210, 255, 0.22);
      transform: translate(-50%, -50%) rotateX(76deg);
    }

    .ring.one {
      width: 360px;
      height: 360px;
      animation: spin 12s linear infinite;
    }

    .ring.two {
      width: 460px;
      height: 460px;
      border-color: rgba(152, 241, 212, 0.18);
      animation: spin 18s linear infinite reverse;
    }

    .ring.three {
      width: 240px;
      height: 240px;
      border-color: rgba(127, 140, 255, 0.20);
      animation: spin 9s linear infinite;
    }

    .device-shell {
      position: absolute;
      top: 50%;
      left: 50%;
      width: min(420px, 100%);
      transform:
        translate(-50%, -50%)
        rotateX(calc(var(--tilt-y) * -1))
        rotateY(var(--tilt-x))
        rotateZ(-7deg);
      transform-style: preserve-3d;
      transition: transform 160ms ease-out;
      animation: panel 8s ease-in-out infinite;
    }

    .device-frame {
      position: relative;
      padding: 18px;
      border-radius: 34px;
      background: linear-gradient(160deg, rgba(245, 248, 255, 0.22), rgba(255, 255, 255, 0.04));
      box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.24);
      transform: translateZ(24px);
      backdrop-filter: blur(18px);
    }

    .device-screen {
      display: flex;
      flex-direction: column;
      gap: 18px;
      min-height: 420px;
      padding: 22px;
      border-radius: 26px;
      border: 1px solid rgba(255, 255, 255, 0.10);
      background:
        radial-gradient(circle at top right, rgba(116, 210, 255, 0.18), transparent 22%),
        linear-gradient(180deg, rgba(9, 15, 29, 0.96), rgba(4, 8, 18, 0.98));
      overflow: hidden;
    }

    .screen-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 14px;
    }

    .screen-dots {
      display: flex;
      gap: 8px;
    }

    .screen-dots span {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.22);
    }

    .screen-pill {
      padding: 8px 12px;
      border-radius: 999px;
      border: 1px solid rgba(116, 210, 255, 0.22);
      background: rgba(116, 210, 255, 0.08);
      color: #d7f2ff;
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .screen-metric {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .screen-metric strong {
      font-family: "Sora", sans-serif;
      font-size: clamp(2.4rem, 4vw, 3.6rem);
      line-height: 1;
    }

    .screen-metric span {
      color: #d2dbf1;
      line-height: 1.5;
    }

    .screen-chart {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      align-items: end;
      gap: 12px;
      min-height: 170px;
      padding: 18px;
      border-radius: 20px;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01)),
        rgba(9, 16, 30, 0.7);
    }

    .screen-chart .bar {
      width: 100%;
      height: var(--bar-height, 40%);
      border-radius: 999px 999px 12px 12px;
      background: linear-gradient(180deg, rgba(116, 210, 255, 0.95), rgba(127, 140, 255, 0.42));
      box-shadow: 0 0 24px rgba(116, 210, 255, 0.18);
      animation: float 5s ease-in-out infinite;
    }

    .screen-chart .bar:nth-child(2) {
      animation-delay: 0.25s;
    }

    .screen-chart .bar:nth-child(3) {
      animation-delay: 0.5s;
    }

    .screen-chart .bar:nth-child(4) {
      animation-delay: 0.75s;
    }

    .screen-chart .bar:nth-child(5) {
      animation-delay: 1s;
    }

    .screen-chart .bar:nth-child(6) {
      animation-delay: 1.25s;
    }

    .screen-bottom {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      margin-top: auto;
    }

    .screen-pane {
      padding: 14px;
      border-radius: 18px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      background: rgba(255, 255, 255, 0.04);
    }

    .screen-pane small {
      display: block;
      margin-bottom: 8px;
      color: var(--muted);
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .screen-pane strong {
      display: block;
      margin-bottom: 6px;
      font-size: 1rem;
    }

    .screen-pane span {
      color: #d0daf0;
      font-size: 0.92rem;
      line-height: 1.48;
    }

    .floating-card {
      position: absolute;
      min-width: 180px;
      padding: 14px 16px;
      border-radius: 18px;
      border: 1px solid rgba(255, 255, 255, 0.10);
      background: rgba(12, 19, 35, 0.72);
      backdrop-filter: blur(14px);
      box-shadow: 0 20px 48px rgba(0, 0, 0, 0.28);
      animation: float 7s ease-in-out infinite;
    }

    .floating-card small {
      display: block;
      margin-bottom: 6px;
      color: var(--muted);
      letter-spacing: 0.10em;
      text-transform: uppercase;
    }

    .floating-card strong {
      display: block;
      margin-bottom: 4px;
      font-size: 1.25rem;
      font-family: "Sora", sans-serif;
    }

    .floating-card span {
      color: #d0daf0;
      font-size: 0.9rem;
      line-height: 1.42;
    }

    .floating-card.top-left {
      top: 44px;
      left: 10px;
      animation-delay: 0.2s;
    }

    .floating-card.mid-right {
      top: 180px;
      right: 0;
      animation-delay: 0.7s;
    }

    .floating-card.bottom-left {
      bottom: 36px;
      left: 26px;
      animation-delay: 1.2s;
    }

    .mini-bars {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 6px;
      align-items: end;
      margin-top: 10px;
      min-height: 42px;
    }

    .mini-bars span {
      height: var(--mini-height, 50%);
      border-radius: 999px 999px 8px 8px;
      background: linear-gradient(180deg, rgba(152, 241, 212, 0.95), rgba(116, 210, 255, 0.28));
    }

    .perspective-grid {
      position: absolute;
      inset: 60px;
      border-radius: 30px;
      background:
        linear-gradient(90deg, rgba(116, 210, 255, 0.08) 1px, transparent 1px),
        linear-gradient(rgba(116, 210, 255, 0.08) 1px, transparent 1px);
      background-size: 42px 42px;
      transform: rotateX(78deg) translateZ(-60px);
      transform-origin: center bottom;
      opacity: 0.45;
      animation: gridPulse 6s ease-in-out infinite;
    }

    .media-card .eyebrow,
    .summary-card .eyebrow {
      margin-bottom: 10px;
    }

    @keyframes drift {
      0%,
      100% {
        transform: translate3d(0, 0, 0) scale(1);
      }

      50% {
        transform: translate3d(24px, -18px, 0) scale(1.08);
      }
    }

    @keyframes pulse {
      0%,
      100% {
        transform: translate(-50%, -58%) scale(1);
        opacity: 0.72;
      }

      50% {
        transform: translate(-50%, -58%) scale(1.12);
        opacity: 1;
      }
    }

    @keyframes spin {
      from {
        transform: translate(-50%, -50%) rotateX(76deg) rotateZ(0deg);
      }

      to {
        transform: translate(-50%, -50%) rotateX(76deg) rotateZ(360deg);
      }
    }

    @keyframes float {
      0%,
      100% {
        transform: translateY(0);
      }

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

    @keyframes panel {
      0%,
      100% {
        transform:
          translate(-50%, -50%)
          rotateX(calc(var(--tilt-y) * -1))
          rotateY(var(--tilt-x))
          rotateZ(-7deg);
      }

      50% {
        transform:
          translate(-50%, -52%)
          rotateX(calc(var(--tilt-y) * -1))
          rotateY(var(--tilt-x))
          rotateZ(-5deg);
      }
    }

    @keyframes gridPulse {
      0%,
      100% {
        opacity: 0.28;
      }

      50% {
        opacity: 0.56;
      }
    }

    @keyframes shine {
      0% {
        transform: translateX(-220%) skewX(-18deg);
      }

      30%,
      100% {
        transform: translateX(420%) skewX(-18deg);
      }
    }

    @media (max-width: 1180px) {
      .hero-grid,
      .hero-expanded-layout,
      .two-column-grid,
      .closing-grid {
        grid-template-columns: 1fr;
      }

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

      .cards-grid,
      .cards-grid.two-up,
      .impact-grid,
      .ops-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 760px) {
      .slide-shell {
        padding: 28px 24px 36px;
      }

      .hero-title,
      .section-title,
      .closing-title {
        max-width: none;
      }

      .cards-grid,
      .cards-grid.two-up,
      .impact-grid,
      .ops-grid,
      .screen-bottom {
        grid-template-columns: 1fr;
      }

      .floating-card {
        position: static;
        min-width: 0;
      }

      .device-stage {
        display: grid;
        gap: 12px;
        min-height: auto;
      }

      .device-shell {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        transform: none;
        animation: none;
      }

      .device-halo,
      .ring,
      .perspective-grid {
        display: none;
      }
    }
.mini-height-35 {
  --mini-height: 35%;
}

.mini-height-62 {
  --mini-height: 62%;
}

.mini-height-78 {
  --mini-height: 78%;
}

.mini-height-95 {
  --mini-height: 95%;
}

.bar-height-28 {
  --bar-height: 28%;
}

.bar-height-44 {
  --bar-height: 44%;
}

.bar-height-58 {
  --bar-height: 58%;
}

.bar-height-74 {
  --bar-height: 74%;
}

.bar-height-88 {
  --bar-height: 88%;
}

.bar-height-100 {
  --bar-height: 100%;
}