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

    :root {
      --dsm-font-body: 'Manrope', ui-sans-serif, system-ui, sans-serif;
      --dsm-font-display: 'Space Grotesk', 'Manrope', ui-sans-serif, system-ui, sans-serif;
    }

    html { scroll-behavior: smooth; }
    html, body {
      width: 100%; min-height: 100%; overflow-x: hidden; overflow-y: auto;
      background: #000;
      font-family: var(--dsm-font-body);
      -webkit-font-smoothing: antialiased;
      color: #fff;
    }

    h1, h2, h3, h4,
    .lbl-title,
    .svc-title,
    .svc-h3 {
      font-family: var(--dsm-font-display);
    }

    /* The shared navbar is sourced from dsm-theme.css and relies on the theme's
       font variables. This page intentionally overrides --dsm-font-* for its
       hero/detail content, so we re-anchor those variables on the navbar subtree
       to the theme defaults — keeping the navbar identical to every other page. */
    .dsm-nav {
      --dsm-font-body: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
      --dsm-font-display: 'Barlow Condensed', 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
    }

    /* Stage carries perspective so the child stage's rotateX/Y produces a true
       3D tilt. We deliberately skip preserve-3d on descendants because CSS
       opacity transitions break it — depth is achieved via differential lateral
       translation instead (same visual result, no browser rendering quirks).    */
    #parallax-root {
      position: fixed; inset: 0;
      overflow: hidden; z-index: 0;
      perspective: 920px;
      perspective-origin: 50% 50%;
    }
    #stage {
      position: absolute; inset: 0;
      will-change: transform;
      transform-origin: center center;
    }

    /* Scene cross-fade */
    .scene {
      position: absolute; inset: 0;
      transition: opacity 1.3s cubic-bezier(0.42, 0, 0.28, 1);
    }
    .scene[data-active="true"]  { opacity: 1; }
    .scene[data-active="false"] { opacity: 0; pointer-events: none; }

    /* Individual depth layers */
    .layer {
      position: absolute;
      will-change: transform;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
    }

    /* Specular surface highlight — moves opposite cursor, mix-blend-mode:screen
       so it additively brightens without washing out colour.                    */
    #specular {
      position: fixed; top: -50vh; left: -50vw; width: 200vw; height: 200vh; z-index: 3;
      pointer-events: none;
      background: radial-gradient(circle 600px at 50% 50%, rgba(255,255,255,0.1), transparent 50%);
      mix-blend-mode: screen;
      will-change: transform;
    }

    /* Subtle film grain — adds photographic physicality to the scene */
    #grain {
      position: fixed; inset: 0; z-index: 4;
      pointer-events: none; opacity: 0.035;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      background-size: 256px 256px;
    }

    /* Atmospheric gradients */
    #grad-top {
      position: fixed; inset-inline: 0; top: 0; height: 30%;
      background: linear-gradient(to bottom, rgba(0,0,0,0.56) 0%, transparent 100%);
      z-index: 5; pointer-events: none;
    }
    #grad-bottom {
      position: fixed; inset-inline: 0; bottom: 0; height: 55%;
      background: linear-gradient(to top, rgba(0,0,0,0.86) 0%, rgba(0,0,0,0.34) 55%, transparent 100%);
      z-index: 5; pointer-events: none;
    }

    /* Scroll mask */
    #scroll-mask {
      position: fixed; inset: 0; z-index: 11;
      background: #060606;
      opacity: 0; pointer-events: none;
      will-change: opacity;
    }

    /* Label wrapper */
    #labels-wrap {
      position: relative; width: 100%; height: 100vh;
      z-index: 12;
      pointer-events: none;
    }

    /* Scroll down hint */
    #scroll-down-hint {
      position: absolute; top: calc(100vh - 140px); left: 50%; width: 200px;
      margin-left: -100px;
      display: flex; flex-direction: column; align-items: center; gap: 8px;
      opacity: 0.7; pointer-events: none; z-index: 15;
      animation: bounce-hint 2s infinite ease-in-out;
    }
    #scroll-down-hint span { font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; }
    #scroll-down-hint svg { width: 24px; height: 24px; }
    @keyframes bounce-hint {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(8px); }
    }

    /* Details Section */
    #details-section {
      position: relative; width: 100%; min-height: 100vh;
      z-index: 20; color: #fff;
      padding: 120px 7vw 220px 7vw;
    }
    /* Soft ambient that echoes the hero glow and smooths the seam from the
       cinematic scene into the glass panels below. */
    #details-section::before {
      content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
      background:
        radial-gradient(1100px circle at 50% -4%, rgba(1,172,73,0.10), transparent 55%),
        radial-gradient(900px circle at 90% 18%, rgba(1,172,73,0.05), transparent 50%);
    }
    .detail-pane {
      display: none; opacity: 0;
      max-width: 1400px;
      margin: 0 auto;
    }
    .detail-pane[data-vis="true"] {
      display: block; animation: fadeUpDetail 0.7s cubic-bezier(0.42, 0, 0.28, 1) forwards;
    }
    @keyframes fadeUpDetail {
      from { opacity: 0; transform: translateY(40px); }
      to { opacity: 1; transform: translateY(0); }
    }
    /* ===================================================================
       LIQUID-GLASS SERVICE DETAIL SYSTEM
       Translucent acrylic panels, calm motion — seamless with the hero,
       inspired by the macOS Tahoe "Liquid Glass" material.
       =================================================================== */

    /* Section intro */
    .svc-intro { max-width: 900px; margin-bottom: 72px; }
    .svc-eyebrow {
      display: inline-flex; align-items: center; gap: 12px;
      font-family: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
      font-size: 11px; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase;
      color: #01ac49; margin-bottom: 24px;
    }
    .svc-eyebrow::before {
      content: ''; width: 10px; height: 10px;
      border: 1.5px solid #01ac49; border-right-color: transparent; border-bottom-color: transparent;
    }
    .svc-title {
      font-size: clamp(2.6rem, 6vw, 4.5rem); font-weight: 800;
      letter-spacing: -0.015em; line-height: 1.04; margin: 0 0 24px; color: #fff; text-transform: uppercase;
      text-shadow: 0 10px 60px rgba(0,0,0,0.45);
    }
    .svc-lead {
      font-size: 1.22rem; line-height: 1.64; color: rgba(255,255,255,0.7);
      max-width: 760px; margin: 0 0 30px;
    }
    .svc-value {
      padding-left: 22px; border-left: 2px solid rgba(1,172,73,0.6);
      font-size: 1.05rem; line-height: 1.6; color: rgba(255,255,255,0.9);
      font-weight: 500; max-width: 720px;
    }

    /* Editorial 12-column composition */
    .svc-layout { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; }
    .svc-span-4  { grid-column: span 4; }
    .svc-span-5  { grid-column: span 5; }
    .svc-span-7  { grid-column: span 7; }
    .svc-span-8  { grid-column: span 8; }
    .svc-span-12 { grid-column: span 12; }

    /* Liquid-glass base panel — angular tactical-HUD notch + acrylic */
    .glass {
      position: relative; overflow: hidden;
      --gcut: 18px;
      clip-path: polygon(var(--gcut) 0, 100% 0, 100% calc(100% - var(--gcut)), calc(100% - var(--gcut)) 100%, 0 100%, 0 var(--gcut));
      background: linear-gradient(155deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.015) 100%), rgba(8,8,10,0.34);
      border: 1px solid rgba(255,255,255,0.08);
      backdrop-filter: blur(26px) saturate(1.8); -webkit-backdrop-filter: blur(26px) saturate(1.8);
      box-shadow: 0 24px 60px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.06);
      transition: transform 0.5s cubic-bezier(0.22,1,0.36,1), border-color 0.4s ease, box-shadow 0.4s ease;
    }
    /* Mirror the notch on alternating top-level panels so the grid isn't repetitive */
    .svc-layout > .glass:nth-child(even) {
      clip-path: polygon(0 0, calc(100% - var(--gcut)) 0, 100% var(--gcut), 100% 100%, var(--gcut) 100%, 0 calc(100% - var(--gcut)));
    }
    /* Soft refractive top sheen */
    .glass::before {
      content: ''; position: absolute; inset: 0; pointer-events: none;
      background: linear-gradient(180deg, rgba(255,255,255,0.07) 0%, transparent 24%);
      animation: svcGlassIdle 7s ease-in-out infinite;
    }
    /* Gentle green->cyan edge glow on hover */
    .glass::after {
      content: ''; position: absolute; inset: 0; pointer-events: none;
      background: radial-gradient(620px circle at 50% -10%, rgba(1,172,73,0.14), rgba(255,255,255,0.06) 32%, transparent 56%);
      opacity: 0; transition: opacity 0.5s ease;
    }
    .glass:hover {
      border-color: rgba(1,172,73,0.26); transform: translateY(-2px);
      box-shadow: 0 28px 62px rgba(0,0,0,0.44), 0 0 18px rgba(1,172,73,0.08), inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .glass:hover::after { opacity: 1; animation: svcGlassSheen 1.15s cubic-bezier(0.42, 0, 0.28, 1) 1; }
    .svc-layout > .glass:nth-child(even) { animation-duration: 8.4s; animation-delay: -1.8s; }
    @keyframes svcGlassIdle {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-1px); }
    }
    @keyframes svcGlassSheen {
      0% { filter: brightness(1); }
      50% { filter: brightness(1.06); }
      100% { filter: brightness(1); }
    }

    /* Calm staggered fade-up entrance (matches hero label motion) */
    .detail-pane[data-vis="true"] .glass {
      animation: fadeUpGlass 0.7s cubic-bezier(0.22,1,0.36,1) backwards;
    }
    .detail-pane[data-vis="true"] .svc-layout > *:nth-child(1) .glass,
    .detail-pane[data-vis="true"] .svc-layout > .glass:nth-child(1) { animation-delay: 0.05s; }
    .detail-pane[data-vis="true"] .svc-layout > *:nth-child(2) .glass,
    .detail-pane[data-vis="true"] .svc-layout > .glass:nth-child(2) { animation-delay: 0.12s; }
    .detail-pane[data-vis="true"] .svc-layout > *:nth-child(3) .glass,
    .detail-pane[data-vis="true"] .svc-layout > .glass:nth-child(3) { animation-delay: 0.19s; }
    .detail-pane[data-vis="true"] .svc-layout > *:nth-child(4) .glass,
    .detail-pane[data-vis="true"] .svc-layout > .glass:nth-child(4) { animation-delay: 0.26s; }
    .detail-pane[data-vis="true"] .svc-layout > *:nth-child(5) .glass,
    .detail-pane[data-vis="true"] .svc-layout > .glass:nth-child(5) { animation-delay: 0.33s; }
    @keyframes fadeUpGlass {
      0%   { opacity: 0; transform: translateY(16px); }
      100% { opacity: 1; transform: translateY(0); }
    }

    /* Featured panel */
    .svc-feature { padding: 48px; display: flex; flex-direction: column; height: 100%; }
    .svc-icon {
      width: 56px; height: 56px; padding: 14px; color: #01ac49;
      clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
      background: linear-gradient(135deg, rgba(1,172,73,0.16) 0%, rgba(1,172,73,0.04) 100%);
      border: 1px solid rgba(1,172,73,0.3); box-shadow: 0 8px 24px rgba(1,172,73,0.1);
      margin-bottom: 26px; transition: transform 0.5s cubic-bezier(0.22,1,0.36,1);
    }
    .glass:hover .svc-icon { transform: scale(1.05); }
    .svc-h3 { font-size: 1.55rem; font-weight: 700; letter-spacing: -0.01em; color: #fff; margin: 0 0 14px; }
    .svc-p { font-size: 1.02rem; line-height: 1.62; color: rgba(255,255,255,0.62); margin: 0; }
    .svc-feature .svc-p { flex-grow: 1; }

    /* Capability list */
    .svc-capabilities { padding: 44px; }
    .svc-cap-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
    .svc-cap-label { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.45); }
    .svc-cap-list { list-style: none; padding: 0; margin: 0; }
    .svc-cap-list li {
      display: flex; align-items: center; gap: 14px; padding: 13px 4px;
      border-bottom: 1px solid rgba(255,255,255,0.06);
      font-size: 0.98rem; color: rgba(255,255,255,0.82);
      transition: padding-left 0.3s ease, color 0.3s ease;
    }
    .svc-cap-list li:last-child { border-bottom: none; }
    .svc-cap-list li:hover { padding-left: 10px; color: #fff; }
    .svc-cap-list svg { width: 18px; height: 18px; color: #01ac49; flex-shrink: 0; }

    /* Telemetry / metric strip */
    .svc-metrics { padding: 36px 44px; display: flex; flex-wrap: wrap; gap: 36px 48px; align-items: flex-end; }
    .svc-metric { display: flex; flex-direction: column; gap: 8px; min-width: 150px; flex: 1; }
    .svc-metric .m-label { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.45); }
    .svc-metric .m-value { font-size: 2rem; font-weight: 800; color: #fff; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }
    .svc-metric .m-value span { color: #59bfb7; font-size: 0.5em; vertical-align: super; font-weight: 700; }
    .svc-metric .m-sub { font-size: 0.82rem; color: rgba(255,255,255,0.5); }
    .svc-metric .m-bar { height: 4px; background: rgba(255,255,255,0.1); overflow: hidden; position: relative; }
    .svc-metric .m-fill { height: 100%; background: linear-gradient(90deg, #017a35, #01ac49); box-shadow: 0 0 8px rgba(1,172,73,0.34); }

    /* Supporting cards row */
    .svc-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
    .svc-card { padding: 34px; display: flex; flex-direction: column; gap: 12px; }
    .svc-card .c-num { font-family: ui-monospace, 'SF Mono', monospace; font-size: 11px; letter-spacing: 0.12em; color: #59bfb7; }
    .svc-card h4 { font-size: 1.18rem; font-weight: 700; color: #fff; margin: 0; }
    .svc-card p { font-size: 0.94rem; line-height: 1.55; color: rgba(255,255,255,0.6); margin: 0; }

    /* Process / workflow row */
    .svc-process { padding: 44px; }
    .svc-proc-label { display: block; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.45); margin-bottom: 28px; }
    .svc-steps { display: flex; gap: 0; flex-wrap: wrap; }
    .svc-step { flex: 1; min-width: 170px; position: relative; padding-right: 26px; }
    .svc-step:not(:last-child)::after {
      content: ''; position: absolute; top: 11px; left: 34px; right: 14px; height: 1px;
      background: linear-gradient(90deg, rgba(1,172,73,0.55), rgba(255,255,255,0.06));
    }
    .svc-step .s-dot {
      width: 26px; height: 26px; border: 1.5px solid #01ac49;
      clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
      background: rgba(1,172,73,0.12); display: flex; align-items: center; justify-content: center;
      font-family: ui-monospace, 'SF Mono', Menlo, monospace;
      font-size: 10px; font-weight: 800; color: #01ac49; margin-bottom: 16px;
    }
    .svc-step h5 { font-size: 1rem; font-weight: 700; color: #fff; margin: 0 0 6px; }
    .svc-step p { font-size: 0.85rem; line-height: 1.5; color: rgba(255,255,255,0.55); margin: 0; padding-right: 18px; }

    @media (max-width: 1024px) {
      .svc-span-4, .svc-span-5, .svc-span-7, .svc-span-8 { grid-column: span 12; }
      .svc-feature, .svc-capabilities { padding: 32px; }
      .svc-cards { grid-template-columns: 1fr; }
    }
    @media (max-width: 640px) {
      .svc-metrics { gap: 26px 32px; padding: 26px; }
      .svc-metric { min-width: 130px; }
      .svc-steps { gap: 26px; }
      .svc-step { padding-right: 0; min-width: 100%; }
      .svc-step:not(:last-child)::after { display: none; }
    }
    .lbl {
      position: absolute; inset: 0;
      box-sizing: border-box;
      padding: clamp(100px, 15vh, 180px) 7vw 120px 7vw;
      display: flex;
      justify-content: space-between;
      align-items: center;
      text-align: left;
      transition: opacity 0.72s cubic-bezier(0.42, 0, 0.28, 1),
                  filter  0.72s cubic-bezier(0.42, 0, 0.28, 1);
    }
    .lbl[data-vis="true"]  { opacity: 1; filter: blur(0px); }
    .lbl[data-vis="false"] { opacity: 0; filter: blur(5px);  pointer-events: none; }

    .lbl-main {
      flex: 1;
      max-width: 640px;
    }

    /* Each sub-element is its own parallax plane */
    .lbl-eyebrow, .lbl-title, .lbl-sub, .lbl-cta {
      display: block;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
    }

    .lbl-eyebrow {
      font-family: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
      font-size: 11px; font-weight: 700;
      letter-spacing: 0.28em; text-transform: uppercase;
      color: rgba(255,255,255,0.65);
      margin-bottom: 20px;
    }
    .lbl-title {
      font-size: clamp(4rem, 11vw, 10rem);
      font-weight: 900;
      letter-spacing: -0.015em; line-height: 0.95;
      text-transform: uppercase;
      color: #fff;
      text-shadow: 0 10px 80px rgba(0,0,0,0.5), 0 2px 4px rgba(0,0,0,0.3);
    }
    .lbl-sub {
      margin-top: 24px;
      font-size: 16px; font-weight: 400; line-height: 1.6;
      color: rgba(255,255,255,0.85);
      max-width: 520px; margin-left: 0;
      text-shadow: 0 2px 8px rgba(0,0,0,0.4);
    }
    .lbl-features {
      display: flex; gap: 16px; justify-content: flex-start; flex-wrap: wrap;
      margin-top: 32px;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
    }
    .feature-item {
      background: rgba(4, 4, 4, 0.32);
      border: 1px solid rgba(255, 255, 255, 0.08);
      padding: 16px 20px;
      clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
      backdrop-filter: blur(24px) saturate(1.8); -webkit-backdrop-filter: blur(24px) saturate(1.8);
      text-align: left;
      min-width: 140px;
      transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease, border-color 0.3s ease;
      box-shadow: 0 12px 40px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.05);
    }
    .feature-item:hover {
      background: rgba(20, 20, 20, 0.46);
      border-color: rgba(1, 172, 73, 0.26);
      transform: translateY(-2px) scale(1.01);
    }
    .feature-item:nth-child(odd):hover { transform: translateY(-2px) scale(1.01); }
    .feature-item:nth-child(even):hover { transform: translateY(-2px) scale(1.01); }
    .feature-item strong {
      display: flex; align-items: center; gap: 6px;
      font-family: ui-monospace, 'SF Mono', Menlo, monospace;
      font-size: 10px; font-weight: 700;
      letter-spacing: 0.12em; text-transform: uppercase;
      color: #01ac49;
      margin-bottom: 6px;
    }
    .feature-item strong svg {
      width: 12px; height: 12px;
    }
    .feature-item span {
      display: block;
      font-size: 15px; font-weight: 500;
      color: #fff;
    }
    .lbl-cta {
      display: inline-flex; align-items: center; gap: 8px;
      margin-top: 36px;
      padding: 12px 24px;
      clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
      background: rgba(0, 240, 208, 0.12);
      border: 1px solid rgba(1, 172, 73, 0.38);
      backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
      font-family: ui-monospace, 'SF Mono', Menlo, monospace;
      font-size: 11px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase;
      color: #d9f7e7;
      cursor: pointer; pointer-events: auto;
      text-decoration: none;
      transition: all 0.3s ease;
      outline: none;
    }
    .lbl-cta:hover { 
      color: #fff; 
      background: rgba(1, 172, 73, 0.18); 
      border-color: #01ac49; 
      box-shadow: 0 0 20px rgba(1,172,73,0.24);
    }
    .lbl-cta:active { transform: scale(0.97); }
    .lbl-cta:focus-visible { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #01ac49; }
    .lbl-cta svg   { width: 12px; height: 12px; transition: transform 0.3s ease; }
    .lbl-cta:hover svg { transform: translateX(4px); }

    /* Side Telemetry Panel */
    .lbl-side {
      width: 320px;
      display: flex; flex-direction: column; gap: 14px;
      background: rgba(4, 4, 4, 0.3);
      border: 1px solid rgba(255, 255, 255, 0.08);
      padding: 24px;
      clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
      backdrop-filter: blur(24px) saturate(1.8); -webkit-backdrop-filter: blur(24px) saturate(1.8);
      box-shadow: 0 24px 60px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05);
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      flex-shrink: 0;
      transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.3s ease;
    }
    .lbl-side:hover {
      border-color: rgba(1, 172, 73, 0.26);
    }
    .side-header {
      font-family: ui-monospace, 'SF Mono', Menlo, monospace;
      font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
      color: rgba(255,255,255,0.4); border-bottom: 1px solid rgba(255,255,255,0.1);
      padding-bottom: 12px; margin-bottom: 4px;
    }
    .stat-group {
      display: flex; justify-content: space-between; align-items: flex-end;
    }
    .stat-label { font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.75); }
    .stat-value { font-size: 20px; font-weight: 700; color: #fff; line-height: 1; display: flex; align-items: baseline; gap: 4px; }
    .stat-value.highlight { color: #59bfb7; }
    .stat-unit { font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.3); text-transform: uppercase; }
    .progress-track {
      height: 4px; background: rgba(255,255,255,0.1); overflow: hidden;
      margin-bottom: 8px;
    }
    .progress-fill {
      height: 100%; background: linear-gradient(90deg, #017a35, #01ac49);
      box-shadow: 0 0 8px rgba(1, 172, 73, 0.34);
    }
    .mini-grid {
      display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px;
    }
    .mini-card {
      background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.05);
      padding: 12px 14px;
      clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
    }
    .mini-card div:first-child { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 9px; font-weight: 700; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 6px;}
    .mini-card div:last-child { font-size: 15px; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums;}

    /* Toggle */
    #toggle-wrap {
      position: fixed; bottom: 44px; left: 50%;
      transform: translateX(-50%);
      z-index: 20; will-change: transform;
    }
    .toggle-track {
      position: relative; display: inline-flex; align-items: center;
      background: rgba(4, 4, 4, 0.5);
      backdrop-filter: blur(24px) saturate(1.8);
      -webkit-backdrop-filter: blur(24px) saturate(1.8);
      border: 1px solid rgba(255,255,255,0.08);
      clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
      padding: 5px;
      box-shadow: 0 24px 60px rgba(0,0,0,0.64),
                  0  1px  1px rgba(255,255,255,0.05) inset;
      transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .toggle-track:hover { transform: scale(1.02); }
    #toggle-pill {
      position: absolute; top: 5px;
      height: calc(100% - 10px);
      clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
      background: linear-gradient(135deg, #01ac49 0%, #01943f 100%);
      box-shadow: 0 0 32px rgba(1, 148, 63,0.60), 0 2px 12px rgba(1, 148, 63,0.28);
      z-index: 0;
      transition: left  0.55s cubic-bezier(0.34, 1.56, 0.64, 1),
                  width 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .toggle-btn {
      position: relative; z-index: 1;
      background: none; border: none; cursor: pointer; outline: none;
      padding: 16px 36px;
      font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 12px; font-weight: 700;
      letter-spacing: 0.10em; text-transform: uppercase;
      transition: color 0.3s ease, transform 0.2s ease;
      user-select: none; white-space: nowrap;
    }
    .toggle-btn:focus-visible {
      box-shadow: inset 0 0 0 2px #fff;
    }
    .toggle-btn[data-active="true"]  { color: #fff; }
    .toggle-btn[data-active="false"] { color: rgba(255,255,255,0.45); }
    .toggle-btn[data-active="false"]:hover { color: rgba(255,255,255,0.85); }
    .toggle-btn:active { transform: scale(0.96); }

    /* Shared navbar styles/behavior are sourced from assets/css/dsm-theme.css and assets/js/dsm-hero.js */

    /* Cursor hint */
    #cursor-hint {
      position: fixed; bottom: 50px; right: 44px;
      z-index: 15; pointer-events: none;
      display: flex; align-items: center; gap: 10px;
      opacity: 0.26; transition: opacity 2s ease;
    }
    #cursor-hint svg { width: 16px; height: 16px; animation: gentle-bounce 2s infinite ease-in-out; }
    #cursor-hint span {
      font-size: 10px; font-weight: 600;
      letter-spacing: 0.30em; text-transform: uppercase;
    }
    @keyframes gentle-bounce {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-4px); }
    }
    
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
      }
      .lbl { filter: none !important; transition: opacity 0.3s ease !important; }
      .lbl[data-vis="false"] { filter: none !important; }
    }
    
    @media (max-width: 1024px) {
      .lbl {
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        padding-top: clamp(80px, 12vh, 120px);
        gap: 32px;
      }
      .lbl-side {
        display: none; /* Hide telemetry on smaller screens for cleaner view */
      }
    }
    
    @media (max-width: 600px) {
      .lbl {
        align-items: center;
        text-align: center;
      }
      .lbl-main {
        max-width: 100%;
      }
      .lbl-title {
        font-size: clamp(3rem, 15vw, 4rem); /* Slightly smaller on very small screens */
      }
      .lbl-features {
        flex-direction: column;
        gap: 12px;
        align-items: center;
      }
      .feature-item {
        width: 100%;
        max-width: 280px;
        text-align: center;
      }
      .feature-item strong {
        justify-content: center;
      }
      
      /* Mobile Toggle Adjustments */
      #toggle-wrap {
        width: calc(100% - 32px); /* Edge-to-edge with safe margin */
        bottom: 32px;
      }
      .toggle-track {
        width: 100%;
        display: flex;
        justify-content: space-between;
        padding: 4px;
      }
      .toggle-btn {
        flex: 1;
        padding: 12px 0;
        font-size: 10px;
        letter-spacing: 0.05em;
      }
      #toggle-pill {
        height: calc(100% - 8px);
        top: 4px;
      }
    }
    /* Wave Element Hexagonal Grid Pulse */
    .ring-hex {
      position: absolute;
      width: 160px; height: 174px;
      margin-left: -80px; margin-top: -87px;
      opacity: 0; pointer-events: none;
      will-change: opacity, transform;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-38 -38 160 174'%3E%3Cdefs%3E%3Cfilter id='halo' x='-50%25' y='-50%25' width='200%25' height='200%25'%3E%3CfeGaussianBlur stdDeviation='10'/%3E%3C/filter%3E%3Cfilter id='coreGlow' x='-50%25' y='-50%25' width='200%25' height='200%25'%3E%3CfeGaussianBlur stdDeviation='3'/%3E%3C/filter%3E%3C/defs%3E%3Cpolygon points='42,0 84,24.5 84,73.5 42,98 0,73.5 0,24.5' fill='none' stroke='%23ffffff' stroke-width='8' filter='url(%23halo)' opacity='0.7' stroke-linejoin='round'/%3E%3Cpolygon points='42,0 84,24.5 84,73.5 42,98 0,73.5 0,24.5' fill='none' stroke='%23ffffff' stroke-width='3' filter='url(%23coreGlow)' opacity='0.9' stroke-linejoin='round'/%3E%3Cpolygon points='42,0 84,24.5 84,73.5 42,98 0,73.5 0,24.5' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E");
      background-size: 100% 100%;
    }
    @keyframes hexLightUp {
      0% {
        opacity: 0;
        transform: scale(0.85);
      }
      15% {
        opacity: calc(var(--max-op) * 1.0);
        transform: scale(1.05);
      }
      75% {
        opacity: calc(var(--max-op) * 0.8);
        transform: scale(1.0);
      }
      100% {
        opacity: 0;
        transform: scale(0.98);
      }
    }