:root{
      --navy-950:#01030f;
      --navy-900:#020616;
      --navy-800:#050a1b;

      --lime:#b9c85a;
      --lime-soft: rgba(185,200,90,0.14);
      --lime-soft-strong: rgba(185,200,90,0.22);

      --violet:#8b5cff;
      --violet-soft: rgba(139,92,255,0.20);
      --violet-border-soft: rgba(139,92,255,0.55);

      --blue:#4ea8ff;
      --blue-soft: rgba(78,168,255,0.18);

      --ink:#f7fbff;
      --ink-soft:#c5cee7;
      --ink-subtle:#8890aa;

      --border-subtle: rgba(255,255,255,0.08);
      --border-soft: rgba(255,255,255,0.14);

      --panel-radius-lg: 20px;
      --panel-radius-md: 16px;
      --panel-radius-sm: 12px;

      --font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      --font-display: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

      --space-xxl: 88px;
      --space-xl: 60px;
      --space-lg: 40px;
      --space-md: 28px;
      --space-sm: 18px;
      --space-xs: 10px;
    }

    *, *::before, *::after{ box-sizing: border-box; }
    html{ scroll-behavior:smooth; max-width:100%; overflow-x:hidden; }
    body{
      margin:0;
      min-height:100vh;
      font-family:var(--font-sans);
      color:var(--ink-soft);
      background: radial-gradient(circle at top, #071025 0, var(--navy-900) 32%, var(--navy-950) 100%);
      -webkit-font-smoothing: antialiased;
      text-rendering: geometricPrecision;
      max-width:100%;
      overflow-x:hidden;
    }
    a{ color:inherit; text-decoration:none; }
    img{ max-width:100%; height:auto; display:block; }
    p{ margin:0; }

    .page-shell{
      min-height:100vh;
      display:flex;
      flex-direction:column;
      opacity:0;
      animation: pageFadeIn 320ms ease-out forwards;
    }
    @keyframes pageFadeIn{
      from{ opacity:0; transform: translateY(4px); }
      to{ opacity:1; transform: translateY(0); }
    }
    @media (prefers-reduced-motion: reduce){
      .page-shell{ animation:none; opacity:1; }
    }

    .page-inner{
      max-width: 1160px;
      margin: 0 auto;
      padding: var(--space-xl) 20px var(--space-xxl);
      width:100%;
      display:flex;
      flex-direction:column;
      gap: var(--space-xxl);
    }

    /* Buttons (same language, slightly refined) */
    .btn{
      border-radius: 999px;
      border: 1px solid transparent;
      padding: 10px 18px;
      font-size: 11px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      cursor: pointer;
      font-family: var(--font-sans);
      display: inline-flex;
      align-items:center;
      justify-content:center;
      gap: 8px;
      background: transparent;
      color: var(--ink);
      transition: transform .12s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
      white-space: nowrap;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  .btn-primary {
  background:
    radial-gradient(circle at top left, var(--lime-soft-strong), transparent 55%),
    linear-gradient(135deg, #f7ffe1 0%, #dde98b 28%, var(--lime) 100%);
  color: #050509;
  border-color: rgba(0, 0, 0, 0.85);
}

.btn-primary:hover {
  transform: translateY(-1px);

    }
  .btn-ghost {
  border-color: rgba(185, 200, 90, 0.55);
  background:
    radial-gradient(circle at top left, var(--lime-soft), transparent 60%)
    rgba(3, 7, 22, 0.98);
  color: var(--ink-soft);
}

.btn-ghost:hover {
  border-color: rgba(139, 92, 255, 0.65);
  background:
    radial-gradient(circle at top left, var(--violet-soft), transparent 60%)
    rgba(5, 8, 26, 0.98);
    }

    .pill{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding: 5px 10px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,0.14);
      background: rgba(3,7,22,0.72);
      font-size: 9px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(197,206,231,0.84);
      white-space: nowrap;
      line-height: 1.1;
      user-select:none;
    }
    .pill.is-lime{ border-color: rgba(185,200,90,0.38); }
    .pill.is-violet{ border-color: rgba(139,92,255,0.38); }
    .pill.is-blue{ border-color: rgba(78,168,255,0.38); }

    /* Sections */
    .section{ width:100%; }
    .section-header{
      display:flex;
      flex-direction:column;
      gap: 10px;
      max-width: 52rem;
      margin:0;
    }
    .eyebrow{
      font-size:11px;
      text-transform: uppercase;
      letter-spacing: 0.2em;
      color: var(--ink-subtle);
      line-height: 1.25;
    }
    .section-title{
      margin:0;
      font-family: var(--font-display);
      font-size: 20px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--ink);
      line-height: 1.25;
    }
    .section-body{
      margin:0;
      font-size: 14px;
      color: var(--ink-soft);
      line-height: 1.9;
      max-width: 56rem;
    }

    /* Panels */
    .panel{
      border-radius: var(--panel-radius-lg);
      border: 1px solid var(--border-subtle);
      background:
        radial-gradient(circle at top left, rgba(139,92,255,0.18), transparent 60%),
        linear-gradient(160deg, var(--navy-800) 0, var(--navy-950) 100%);
    }

    /* HERO */
    .product-hero{
      padding-top: 26px;
      display:grid;
      grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
      gap: var(--space-lg);
      align-items: center;
    }
    .product-hero-copy{
      display:grid;
      gap: 16px;
      align-content: start;
    }
    .hero-title{
      margin:0;
      font-family: var(--font-display);
      font-size: clamp(20px, 2.2vw, 30px);
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--ink);
      line-height: 1.18;
    }
    .hero-body{
      font-size: 14px;
      color: var(--ink-soft);
      line-height: 1.95;
      max-width: 44rem;
    }
    .hero-cta-row{
      display:flex;
      flex-wrap:wrap;
      gap: 10px;
      margin-top: 6px;
    }

    .hero-snapshot{
      border-radius: var(--panel-radius-lg);
      border: 1px solid rgba(191,219,254,0.16);
      background:
        radial-gradient(circle at top left, rgba(78,168,255,0.14), transparent 58%),
        radial-gradient(circle at top left, rgba(139,92,255,0.18), transparent 62%),
        rgba(3,7,22,0.92);
      padding: 16px 16px 14px;
      overflow:hidden;
    }
    .hero-snapshot-top{
      display:flex;
      align-items:center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 12px;
    }
    .hero-snapshot-title{
      font-size: 10px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--ink-subtle);
      line-height: 1.25;
    }
    .hero-snapshot-status{
      display:inline-flex;
      align-items:center;
      gap: 8px;
      padding: 6px 10px;
      border-radius: 999px;
      border: 1px solid rgba(185,200,90,0.55);
      background:
        radial-gradient(circle at top left, rgba(185,200,90,0.10), transparent 60%),
        rgba(2,6,23,0.65);
      font-size: 9px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: rgba(197,206,231,0.92);
      white-space: nowrap;
    }
    .status-dot{
      width: 7px; height: 7px; border-radius: 999px;
      background: linear-gradient(135deg, var(--lime), var(--violet));
      box-shadow: 0 0 10px rgba(185,200,90,0.55);
    }

    .mini-dashboard{
      border-radius: var(--panel-radius-md);
      border: 1px solid rgba(255,255,255,0.12);
      background:
        radial-gradient(circle at top left, rgba(78,168,255,0.10), transparent 60%),
        rgba(1,4,14,0.92);
      padding: 12px;
      display:grid;
      gap: 10px;
      overflow:hidden;
    }
    .mini-dashboard-row{
      display:flex;
      gap: 10px;
      align-items: stretch;
      min-width: 0;
    }
    .mini-kpi{
      flex: 1 1 0;
      min-width: 0;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,0.10);
      background: rgba(3,7,22,0.74);
      padding: 10px 10px 9px;
      display:grid;
      gap: 4px;
    }
    .mini-kpi .kpi-label{
      font-size: 8px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--ink-subtle);
      white-space: nowrap;
      overflow:hidden;
      text-overflow: ellipsis;
    }
    .mini-kpi .kpi-value{
      font-size: 16px;
      color: var(--ink);
      font-weight: 500;
      white-space: nowrap;
      overflow:hidden;
      text-overflow: ellipsis;
    }

    .mini-charts{
      display:grid;
      grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.95fr);
      gap: 10px;
      align-items: stretch;
    }
    .chart-panel{
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,0.10);
      background: rgba(3,7,22,0.70);
      padding: 10px;
      overflow:hidden;
      min-width:0;
    }
    .chart-title{
      font-size: 9px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--ink-subtle);
      display:flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 8px;
      margin-bottom: 8px;
      line-height: 1.25;
    }
    .chart-title span:last-child{ color: rgba(197,206,231,0.9); white-space: nowrap; }
    .bars{
      display:flex;
      gap: 6px;
      align-items:flex-end;
      height: 54px;
      padding: 4px 2px 0;
    }
    .bar{
      flex: 1 1 0;
      border-radius: 999px;
      background: linear-gradient(180deg, rgba(78,168,255,0.92), rgba(139,92,255,0.72));
      opacity: 0.95;
      min-width: 0;
    }
    .bar.b1{ height: 18px; opacity:0.70; }
    .bar.b2{ height: 28px; opacity:0.76; }
    .bar.b3{ height: 40px; opacity:0.86; }
    .bar.b4{ height: 22px; opacity:0.72; }
    .bar.b5{ height: 48px; opacity:0.92; }
    .bar.b6{ height: 34px; opacity:0.80; }
    .bar.b7{ height: 52px; opacity:0.95; }

    .line{
      height: 54px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,0.08);
      background:
        radial-gradient(circle at 20% 40%, rgba(185,200,90,0.20), transparent 45%),
        radial-gradient(circle at 60% 30%, rgba(78,168,255,0.18), transparent 48%),
        rgba(1,4,14,0.60);
      position: relative;
      overflow:hidden;
    }
    .line::before{
      content:"";
      position:absolute;
      inset: 0;
      background:
        linear-gradient(90deg, transparent 0, rgba(255,255,255,0.04) 12%, transparent 24%, rgba(255,255,255,0.03) 36%, transparent 48%, rgba(255,255,255,0.04) 60%, transparent 72%, rgba(255,255,255,0.03) 84%, transparent 100%);
      opacity: 0.65;
    }
    .line svg{
      position:absolute;
      inset: 0;
      width:100%;
      height:100%;
    }

    .snapshot-foot{
      display:flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 10px;
      align-items:center;
    }

    /* TELEMETRY PILLARS */
    .pillars-grid{
      display:grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: var(--space-md);
      margin-top: var(--space-md);
    }
    .pillar-card{
      border-radius: var(--panel-radius-md);
      border: 1px solid rgba(255,255,255,0.14);
      background:
        radial-gradient(circle at top left, rgba(139,92,255,0.14), transparent 60%),
        rgba(4,8,20,0.92);
      padding: 18px 18px 16px;
      display:grid;
      gap: 10px;
      overflow:hidden;
      min-width: 0;
    }
    .pillar-top{
      display:flex;
      align-items:center;
      justify-content: space-between;
      gap: 10px;
      min-width: 0;
    }
    .pillar-title{
      margin:0;
      font-size: 12px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--ink);
      line-height: 1.35;
      min-width: 0;
    }
    .pillar-desc{
      font-size: 13px;
      color: var(--ink-soft);
      line-height: 1.85;
      margin:0;
    }
    .mini-list{
      margin:0;
      padding-left: 16px;
      display:grid;
      gap: 6px;
      font-size: 12px;
      line-height: 1.7;
      color: rgba(197,206,231,0.92);
    }
    .mini-list li{ min-width:0; }

    /* SURFACES — upgraded + ordered 1,2,3 */
    .surfaces-grid{
      display:grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: var(--space-md);
      margin-top: var(--space-md);
    }
    .surface-card{
      border-radius: var(--panel-radius-lg);
      border: 1px solid rgba(255,255,255,0.12);
      background:
        radial-gradient(circle at top left, rgba(185,200,90,0.10), transparent 60%),
        rgba(3,7,22,0.92);
      overflow:hidden;
      min-width:0;
      display:flex;
      flex-direction:column;
    }
    .surface-media{
      position: relative;
      padding: 14px;
      border-bottom: 1px solid rgba(255,255,255,0.06);
      background:
        radial-gradient(circle at 20% 20%, rgba(78,168,255,0.14), transparent 55%),
        radial-gradient(circle at 75% 0%, rgba(139,92,255,0.18), transparent 58%),
        rgba(2,6,23,0.82);
      overflow:hidden;
    }
    .surface-body-wrap{
      padding: 16px 18px 16px;
      display:grid;
      gap: 10px;
    }

    .surface-title{
      margin:0;
      font-size: 14px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--ink);
      line-height: 1.35;
    }
    .surface-text{
      margin:0;
      font-size: 13px;
      line-height: 1.9;
      color: rgba(197,206,231,0.92);
    }
    .surface-list{
      margin: 2px 0 0;
      padding-left: 16px;
      display:grid;
      gap: 6px;
      font-size: 12px;
      line-height: 1.75;
      color: rgba(197,206,231,0.92);
    }

    /* Surface media variants */
    .console-media .mini-dashboard{ box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02); }
    .badge-stage{
      display:grid;
      place-items:center;
      border-radius: 16px;
      border: 1px solid rgba(191,219,254,0.18);
      background:
        radial-gradient(circle at 50% 35%, rgba(78,168,255,0.18), transparent 55%),
        radial-gradient(circle at 50% 75%, rgba(185,200,90,0.10), transparent 60%),
        rgba(1,4,14,0.72);
      min-height: 180px;
      overflow:hidden;
    }
    .badge-stage::before{
      content:"";
      position:absolute;
      inset:-2px;
      background: radial-gradient(circle at top left, rgba(255,255,255,0.06), transparent 60%);
      pointer-events:none;
    }

    /* === Badge-stage background image layer (inherits box size) === */
.badge-stage{
  position: relative;  
  isolation: isolate; 
}

.badge-stage::before{
  z-index: 1;
}

.badge-stage::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  background: url("/assets/newsroom/press/press-cavbot-badge-image.png") center / cover no-repeat;

  opacity: 0.7;
  filter: saturate(0.95) contrast(1.05);

  z-index: 0;
  pointer-events:none;
}

.badge-stage > *{
  position: relative;
  z-index: 2;
}

.cavbot-badge-frame{
  width: auto;
  height: auto;
  border-radius: 0;
  border: 0;
  background: none;
  display: grid;
  place-items: center;
  overflow: visible;
}

.cavbot-cdn-slot{
  width: auto;
  height: auto;
  display: grid;
  place-items: center;
}

.cavbot-cdn-slot[data-cavbot-cdn-slot="badge"]{
  min-width: 0;
  min-height: 0;
}

.cavbot-cdn-slot [id^="cavbot-widget-root-"]{
  position: static;
}

.surface-actions--card{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  margin-top: 12px;
}

/* Lime contour / ghost */
.btn-ghost--lime{
  border-color: rgba(185,200,90,0.45);
  background:
    radial-gradient(circle at top left, rgba(185,200,90,0.12), transparent 60%),
    rgba(3,7,22,0.84);
  color: rgba(247,251,255,0.92);
}
.btn-ghost--lime:hover{
  border-color: rgba(185,200,90,0.80);
  background:
    radial-gradient(circle at top left, rgba(185,200,90,0.18), transparent 60%),
    rgba(3,7,22,0.92);
  transform: translateY(-1px);
}
    .game-shot{
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,0.14);
      background:
        radial-gradient(circle at top left, rgba(139,92,255,0.14), transparent 60%),
        rgba(1,4,14,0.68);
      overflow:hidden;
      width: 100%;
      aspect-ratio: 16 / 9;
      display:grid;
      place-items:center;
    }
    .game-shot img{
      width:100%;
      height:100%;
      object-fit: contain; /* IMPORTANT: no crop */
      background: rgba(1,4,14,0.20);
    }
    .game-shot .shot-placeholder{
      position:absolute;
      inset: 0;
      display:grid;
      place-items:center;
      padding: 14px;
      text-align:center;
      color: rgba(197,206,231,0.78);
      font-size: 11px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      line-height: 1.6;
      pointer-events:none;
    }

    /* SIGNAL PIPELINE */
    .pipeline{
      margin-top: var(--space-md);
      display:grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 12px;
    }
    .pipeline-rail{
      border-radius: var(--panel-radius-lg);
      border: 1px solid rgba(255,255,255,0.10);
      background:
        radial-gradient(circle at top left, rgba(78,168,255,0.12), transparent 60%),
        rgba(3,7,22,0.92);
      padding: 16px 16px;
      overflow:hidden;
    }
    .pipeline-grid{
      display:grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      margin-top: 12px;
    }
    .pipe-card{
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,0.10);
      background: rgba(2,6,23,0.66);
      padding: 14px 14px 12px;
      display:grid;
      gap: 8px;
      min-width: 0;
    }
    .pipe-top{
      display:flex;
      align-items:center;
      justify-content: space-between;
      gap: 10px;
      min-width: 0;
    }
    .pipe-name{
      margin:0;
      font-size: 11px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--ink);
      line-height: 1.25;
      min-width: 0;
    }
    .pipe-desc{
      margin:0;
      font-size: 12px;
      line-height: 1.85;
      color: rgba(197,206,231,0.92);
    }

    /* OUTCOMES — digitized */
    .outcomes-grid{
      margin-top: var(--space-md);
      display:grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--space-md);
      align-items: stretch;
    }
    .outcome-card{
      border-radius: var(--panel-radius-lg);
      border: 1px solid rgba(255,255,255,0.12);
      background:
        radial-gradient(circle at top left, rgba(185,200,90,0.10), transparent 60%),
        rgba(3,7,22,0.92);
      padding: 18px 18px 16px;
      display:grid;
      gap: 16px;
      height: 100%;
      min-width: 0;
      overflow:hidden;
    }
    .outcome-top{
      display:flex;
      align-items:center;
      justify-content: space-between;
      gap: 12px;
    }
    .outcome-title{
      margin:0;
      font-size: 11px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--ink);
      line-height: 1.2;
      white-space: nowrap;
      max-width: none;
    }
    .outcome-icon{
      width: 36px; height: 36px;
      border-radius: 14px;
      border: 1px solid rgba(191,219,254,0.18);
      background:
        radial-gradient(circle at top left, rgba(78,168,255,0.16), transparent 60%),
        rgba(2,6,23,0.70);
      display:grid;
      place-items:center;
      flex: 0 0 auto;
    }
    .outcome-icon svg{ width: 18px; height: 18px; opacity: 0.95; }
    .outcome-icon-glyph{
      width: 18px;
      height: 18px;
      display: block;
      opacity: 1;
      background-image: linear-gradient(
        130deg,
        rgba(247,251,255,0.98) 0%,
        rgba(185,200,90,0.98) 52%,
        rgba(78,168,255,0.95) 100%
      );
      background-size: 100% 100%;
      background-repeat: no-repeat;
      -webkit-mask-position: center;
      -webkit-mask-size: contain;
      -webkit-mask-repeat: no-repeat;
      mask-position: center;
      mask-size: contain;
      mask-repeat: no-repeat;
    }
    .outcome-icon-glyph-eye{
      -webkit-mask-image: url("/assets/icons/page/eye-svgrepo-com.svg");
      mask-image: url("/assets/icons/page/eye-svgrepo-com.svg");
    }
    .outcome-icon-glyph-chart{
      -webkit-mask-image: url("/assets/icons/page/chart-svgrepo-com.svg");
      mask-image: url("/assets/icons/page/chart-svgrepo-com.svg");
    }
    .outcome-icon-glyph-traffic{
      -webkit-mask-image: url("/assets/icons/page/traffic-analysis-circular-symbol-svgrepo-com.svg");
      mask-image: url("/assets/icons/page/traffic-analysis-circular-symbol-svgrepo-com.svg");
    }
    .outcome-icon-glyph-secure{
      -webkit-mask-image: url("/assets/icons/page/secure-svgrepo-com.svg");
      mask-image: url("/assets/icons/page/secure-svgrepo-com.svg");
    }
    .outcome-text{
      margin:0;
      font-size: 13px;
      line-height: 1.95;
      color: rgba(197,206,231,0.92);
    }
    /* PRODUCTION POSTURE — rings + audit blocks */
    .prod-grid{
      margin-top: var(--space-md);
      display:grid;
      grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
      gap: var(--space-md);
      align-items:start;
    }
    .prod-panel{
      border-radius: var(--panel-radius-lg);
      border: 1px solid rgba(255,255,255,0.10);
      background:
        radial-gradient(circle at top left, rgba(139,92,255,0.14), transparent 60%),
        rgba(3,7,22,0.92);
      padding: 18px 18px 16px;
      display:grid;
      gap: 12px;
    }
    .prod-list{
      margin:0;
      padding-left: 16px;
      display:grid;
      gap: 8px;
      font-size: 12px;
      line-height: 1.85;
      color: rgba(197,206,231,0.92);
    }
    .code-inline{
      font-family: "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      font-size: 11px;
      background: rgba(1,3,15,0.85);
      border-radius: 6px;
      padding: 2px 6px;
      border: 1px solid rgba(255,255,255,0.12);
      white-space: nowrap;
      color: rgba(247,251,255,0.92);
    }
    .prod-rings{
      border-radius: var(--panel-radius-lg);
      border: 1px solid rgba(255,255,255,0.10);
      background:
        radial-gradient(circle at top left, rgba(78,168,255,0.10), transparent 60%),
        rgba(3,7,22,0.92);
      padding: 18px 18px 16px;
      display:grid;
      gap: 12px;
      overflow:hidden;
    }
    .rings-row{
      display:grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
    }
    .ring{
      border-radius: 18px;
      border: 1px solid rgba(255,255,255,0.10);
      background: rgba(2,6,23,0.66);
      padding: 14px 12px 12px;
      display:grid;
      gap: 10px;
      place-items:center;
      text-align:center;
      min-width: 0;
    }
    .ring-dial{
      width: 78px; height: 78px;
      border-radius: 999px;
      background:
        conic-gradient(from 180deg, rgba(185,200,90,0.92) 0 72%, rgba(139,92,255,0.82) 72% 92%, rgba(255,255,255,0.10) 92% 100%);
      display:grid;
      place-items:center;
      position:relative;
    }
    .ring-dial::after{
      content:"";
      width: 62px; height: 62px;
      border-radius: 999px;
      background:
        radial-gradient(circle at top left, rgba(255,255,255,0.06), transparent 60%),
        rgba(1,4,14,0.92);
      border: 1px solid rgba(255,255,255,0.10);
      position:absolute;
      inset: 8px;
    }
    .ring-val{
      position:relative;
      z-index:2;
      font-size: 12px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: rgba(247,251,255,0.92);
      margin-top: -2px;
    }
    .ring-name{
      font-size: 10px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--ink);
      line-height: 1.25;
    }
    .ring-note{
      font-size: 11px;
      color: rgba(197,206,231,0.84);
      line-height: 1.6;
      margin:0;
    }

    .text-link{
      font-size: 11px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--ink-subtle);
      border-bottom: 1px solid rgba(139,92,255,0.8);
      padding-bottom: 1px;
      cursor: pointer;
      white-space: nowrap;
      width: fit-content;
    }
    .text-link:hover{
      color: var(--ink);
      border-bottom-color: rgba(185,200,90,0.9);
    }

    /* Responsive */
    @media (max-width: 980px){
      .product-hero{ grid-template-columns: minmax(0,1fr); }
      .hero-snapshot{ max-width: 520px; margin-inline:auto; }
      .pillars-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
      .surfaces-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
      .pipeline-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
      .outcomes-grid{ grid-template-columns: minmax(0,1fr); }
      .prod-grid{ grid-template-columns: minmax(0,1fr); }
    }
    @media (max-width: 720px){
      .page-inner{
        padding-left: 16px;
        padding-right: 16px;
        gap: var(--space-xl);
      }
      .pillars-grid,
      .surfaces-grid,
      .pipeline-grid{ grid-template-columns: minmax(0,1fr); }
      .mini-charts{ grid-template-columns: minmax(0,1fr); }
      .badge-stage{ min-height: 200px; }
      .rings-row{ grid-template-columns: minmax(0,1fr); }
    }

    /* =====================================
       HOME STYLE NORMALIZATION (PRODUCT)
       ===================================== */
    .btn-primary,
    .btn-ghost,
    .btn-ghost--lime{
      background-image: none !important;
      box-shadow: none !important;
    }
    .btn-primary{
      background-color: #b9c85a !important;
      border-color: rgba(0,0,0,0.72) !important;
      color: #050509 !important;
    }
    .btn-ghost,
    .btn-ghost--lime{
      background-color: rgba(3,7,22,0.92) !important;
      border-color: rgba(255,255,255,0.14) !important;
      color: rgba(247,251,255,0.92) !important;
    }

    .hero-snapshot-status{
      border-radius: 6px !important;
      background: rgba(3,7,22,0.92) !important;
      background-image: none !important;
      border-color: rgba(185,200,90,0.42) !important;
    }
    .status-dot{
      background: #b9c85a !important;
      box-shadow: 0 0 8px rgba(185,200,90,0.55) !important;
    }

    :is(
      .panel,
      .hero-snapshot,
      .mini-dashboard,
      .mini-kpi,
      .chart-panel,
      .line,
      .pillar-card,
      .surface-card,
      .surface-media,
      .badge-stage,
      .game-shot,
      .pipeline-rail,
      .pipe-card,
      .outcome-card,
      .outcome-icon,
      .prod-panel,
      .prod-rings,
      .ring
    ){
      background-color: rgba(3,7,22,0.96) !important;
      background-image: none !important;
      border-color: rgba(255,255,255,0.14) !important;
      box-shadow: none !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
    }

    .line::before,
    .badge-stage::before{
      display: none !important;
    }

    .bar{
      background: linear-gradient(180deg, rgba(78,168,255,0.96), rgba(139,92,255,0.84)) !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
    }

    .hero-snapshot .mini-kpi,
    .hero-snapshot .chart-panel,
    .hero-snapshot .line{
      background-color: rgba(1,4,14,0.98) !important;
      border-color: rgba(255,255,255,0.20) !important;
    }

    .product-hero .btn-primary:hover{
      background-color: #aab958 !important;
      border-color: rgba(0,0,0,0.82) !important;
      transform: translateY(-1px);
      box-shadow: 0 6px 18px rgba(0,0,0,0.28);
    }

    .product-hero .btn-ghost:hover{
      background-color: rgba(8,12,30,0.98) !important;
      border-color: rgba(185,200,90,0.56) !important;
      color: rgba(247,251,255,0.98) !important;
      transform: translateY(-1px);
      box-shadow: 0 6px 18px rgba(0,0,0,0.32);
    }

    /* Keep visible hover feedback for module/surface "Learn ..." ghost buttons. */
    .pillars-grid .btn-ghost:hover,
    .surfaces-grid .btn-ghost:hover,
    .prod-grid .btn-ghost:hover{
      background-color: rgba(8,12,30,0.98) !important;
      border-color: rgba(185,200,90,0.56) !important;
      color: rgba(247,251,255,0.98) !important;
      transform: translateY(-1px);
      box-shadow: 0 6px 18px rgba(0,0,0,0.32);
    }

    .page-inner :is(
      [class*="card"],
      [class*="panel"],
      [class*="rail"],
      [class*="surface"],
      [class*="snapshot"],
      [class*="dashboard"],
      [class*="kpi"],
      [class*="chart"],
      [class*="line"],
      [class*="pipe"],
      [class*="outcome"],
      [class*="prod"],
      [class*="ring"],
      [class*="badge"],
      [class*="game"]
    ):not(.ring-dial):not(.ring-val){
      background-image: none !important;
    }