.glass-nav {
  /* Transparent base + a very faint gradient for depth */
  --glass-tint: rgba(255,255,255,0.05);     /* was 0.35 — lower = more see-through */
  --glass-grad-1: rgba(255,255,255,0.12); /* was 0.12 */
  --glass-grad-2: rgba(255,255,255,0.06); /* was 0.06 */

  background:linear-gradient(180deg,rgba(11,15,20,.9),rgba(11,15,20,.75));
  backdrop-filter:saturate(1.2) blur(6px);

  /*
  background:
    linear-gradient(180deg, var(--glass-grad-1), var(--glass-grad-2)), /* subtle tint */
    , var(--glass-tint); /* overall transparency; tweak for lighter/darker */
  */

  /* Blur and saturation to get the “frosted” look */
  /* backdrop-filter: blur(12px) saturate(160%); */
  -webkit-backdrop-filter: blur(12px) saturate(160%);

  /* Soft border + shadow for separation */
  border-bottom: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);

  /* Optional rounding if your design uses it */
  /* border-radius: 16px; */
}

/* Sheen highlight: a faint light sweep along the top edge */
/*
.glass-nav::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 55%;
  opacity; 0.6;
  pointer-events: none;
  background: radial-gradient(
      120% 80% at 50% 0%,
      rgba(255,255,255,0.25) 0%,
      rgba(255,255,255,0.08) 45%,
      rgba(255,255,255,0) 70%
    );
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.9), rgba(0,0,0,0));
}
*/

/* Make sure the nav is the stacking context for ::before */
.glass-nav { position: sticky; top: 0; z-index: 1030; }
.glass-nav.fixed-top { position: fixed; } /* if you used fixed-top in HTML */

/* Tweak link colors for contrast (using navbar-dark in HTML) */
.glass-nav .nav-link {
  color: rgba(255,255,255,0.9);
}
.glass-nav .nav-link:hover,
.glass-nav .nav-link:focus {
  color: #c7f2fc;
}

/* Toggler icon visibility on translucent dark backgrounds */
.navbar-dark .navbar-toggler {
  border-color: rgba(255,255,255,0.35);
}
.navbar-dark .navbar-toggler-icon {
  background-image: var(--bs-navbar-toggler-icon-bg);
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.25));
}

/* Fallback when backdrop-filter isn’t supported: increase opacity */
@supports not ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
  .glass-nav {
    background: rgba(15, 15, 20, 0.72);
  }
}

/* Optional: reduce transparency if user prefers reduced motion/contrast */
@media (prefers-reduced-transparency: reduce) {
  .glass-nav {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(15, 15, 20, 0.75);
  }
}

/* Subtle glass for nav if not already provided by odd.css */
/*
.glass-nav{
  background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.55));
  -webkit-backdrop-filter: saturate(1.35) blur(10px);
  backdrop-filter: saturate(1.35) blur(10px);
  border-bottom: 1px solid rgba(0,0,0,.06);
}
*/
.navbar-brand-dot{width:10px;height:10px;border-radius:50%;display:inline-block;background:var(--od-accent);box-shadow:0 0 0 6px rgba(108,92,231,.15);margin-right:.5rem}

/* Buttons that pop but respect your palette */
.btn-primary{background-color:var(--od-accent);border-color:var(--od-accent)}
.btn-primary:hover{background-color:var(--od-accent-2);border-color:var(--od-accent-2)}
.btn-ghost{color:#708090;background:#fff;border:1px solid rgba(255,255,255,.65)}
.btn-ghost:hover{background:rgba(255,255,255,255);color:#708090;border-color:rgba(255,255,255,.85)}

/* Light card borders to create visual anchors on beige */
.border-soft{border:1px solid rgba(0,0,0,.08)!important}

/* Horizontal case-study rail */
.rail{display:flex;gap:1rem;overflow:auto;padding-bottom:.5rem}
.rail::-webkit-scrollbar{height:8px}
.rail::-webkit-scrollbar-thumb{background:rgba(0,0,0,.25);border-radius:999px}

/* Sticky CTA (mobile) */
.sticky-cta{position:fixed;right:1rem;bottom:1rem;z-index:1030}
@media (min-width:768px){.sticky-cta{display:none}}

/* Spacing helper for hero below fixed nav */
.pt-nav{padding-top:6.5rem}

:root{
  --bg:#708090;        /* near-black */
  --panel:#111821;     /* dark panel */
  --muted:#9fb2c8;     /* muted text */
  --text:#e8f0fa;      /* primary text */
  --od-accent:#6c5ce7; 
  --od-accent-2:#7b6df0;
  --brand:#5cc8ff;     /* accent */
  --brand-strong:#29a8e0;
  --ok:#7bd88f;
  --warn:#ffd166;
  --error:#ff6b6b;
  --ring: rgba(92,200,255,0.35);
  --radius: 16px;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --max: 1120px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif}
a{color:var(--brand);text-decoration:none}
a:hover{color:var(--brand-strong)}
/* a, a:visited, a:link { text-decoration: none; outline: none; color: white; } */
a img { border: 0 }
.wh-link a:visited { text-decoration: none; outline: none; color: white; }
.wh-link a:link { text-decoration: none; outline: none; color: white; }
.wh-link a:hover { color: var(--brand-strong) }

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

#body { background: rgb(113,4,170,11); background-image: url(bg-rtop.svg); filter: contrast(170%) brightness(1000%); }
#body { background: rgb(4,0,168); background-image: url(bg-rtop.svg); } #filter: contrast(170%) brightness(1000%); }
#body { contrast(150%) brightness(950%); background: linear-gradient(180deg, rgba(250,6,79,1), rgba(113,4,170,11)), url(/bg-rtop.svg); }
#body { background: linear-gradient(180deg, rgba(250,6,79,1), rgba(113,4,170,11)); background-image: url(/bg-rtop.svg); }
#body { background: linear-gradient(105deg, rgba(250,6,81,1), rgba(186,14,218,1), transparent); url(bg-rtop.svg); }

#header { background-color: white; border-bottom:0px solid #e9ecef; height: 100px; color: white; }
#.header { margin-top: 20px; }
header, nav > .container { background: transparent !important; }
.nav_odd { font-size: 14px; }
.header_odd { font-size: 22px; text-align: center; text-color: !important white; }
.logo { height: 40px; }
.menu-item { font-family: Rubik-Regular; font-size: 14px; }

.corners { border-radius: 12px; }
.card-odd { border: 1px solid rgba(255,255,255,.06); border-radius: 12px; }

.brand { font-weight:700; letter-spacing:.2px; color: #000; }
#.brand .accent { color:#0d6efd; }
.brand .accent { color:#ffffff; }
.important { color: red; font: bold }
.white { color: white; }
.dkbrown { color: rgb(72,66,62,1); }

#.hero { border-bottom:0px solid #e9ecef; color: #fff }
#.hero { background: rgb(4,0,168); background-image: url(bg-rtop.svg); } #filter: contrast(170%) brightness(1000%); }
#.hero { background: linear-gradient(180deg, rgba(250,6,79,1), rgba(113,4,170,11)), url(bg-rtop.svg); height: 500px; }
#.hero { background: rgba(113,4,170,11); background-image: url(/bg-rtop.svg); }
#.hero { background: rgba(87,14,218,1); background-image: url(/bg-rtop.svg); }
.hero { padding-top: 170px; padding-bottom: 100px; } 
.hero_h1 { font-family: Rubik-ExtraBold; font-size: 100px; text-align: center; color: white; }
.hero_h2 { font-family: Rubik-Bold; font-size: 45px; text-align: center; color: white; padding-top: 20px; }
.hero_head { font-size: 100px; text-align: left; color: white; font-weight: bold; }
.hero_head { font-size: 100px; font-family: Rubik-Medium; text-align: left; color: white; font-weight: bold; }
.hero_sub { font-size: 38px; font-family: Rubik-Regular; text-align: left; color: white; padding-top: 20px; font-weight: bold; }
.top { margin-top: 50px; }

.test_h1 { font-family: Nunito-ExtraBold; font-size: 45px; text-align: center; color: #48423E; }
.test_h2 { font-family: Nunito-Bold; font-size: 25px; text-align: center; color: white; padding-top: 10px; color: #48423E; }
.testlogo { width: 1584; height: 396; border: solid 1px black; }

#.hero2 { background:#4fafcc; border-bottom:1px solid #e9ecef; color: #fff }
#.hero3 { background:#8fb1cc; border-bottom:1px solid #e9ecef; color: #fff }
#.hero4 { background:#759cc9; border-bottom:1px solid #e9ecef; color: #fff }

.purpbg { background: rgba(7,4,160,1); background-image: url(/bg-rtop.svg); }
.offwhbg { background: rgba(253,246,242,1); background-image: url(/bg-rtop.svg); }
#.greybg { background: rgba(255,225,165,1); background-image: url(/bg-rtop.svg); }
.orbg { background: rgba(249,226,201,1); background-image: url(/bg-rtop.svg); }
.beigebg { background: rgba(249,232,218,1); background-image: url(/bg-rtop.svg); }
#.greybg { background: rgba(249,232,218,1); background-image: url(/bg-rtop.svg); }
.purp { background: rgba(7,4,160,1); }
.greybg { background:var(--bg); } 
.greyspbg { background: rgba(112,128,144,1); background-image: url(/bg-rtop.svg); }
.whitebg { background: rgba(240,240,240,1); background-image: url(/bg-rtop.svg); }
.whitespbg { background: rgba(251,251,251,1); background-image: url(/bg-rtop.svg); }
.whitebg { background: white; }

.intro { padding-top: 130px; }
.content1 { padding-top: 80px; padding-bottom: 80px; } 
.intro_h2 { font-family: Nunito-Bold; font-size: 40px; text-align: center; color: #0704A0; }
.intro_p { font-family: Nunito-Regular; font-size: 16px; text-align: left; color: #0704A0; }
.intro_p2 { font-family: Nunito-Regular; font-size: 24px; text-align: left; color: #0704A0; }
.intro_pw { font-family: Nunito-Bold; font-size: 30px; text-align: left; color: #0704A0; }
.text-attention { color: green; };
.copy { font-family: Nunito-Regular; font-size: 24px; text-align: left; color: #0704A0; line-height: 1.5; }
.wcopy { font-family: Roboto; font-size: 22px; font-weight: 200; text-align: left; color: #383838; line-height: 1.5; }
.wattrib { font-family: Roboto; font-size: 14px; font-weight: 200; font-style: italic; text-align: left; color: #0704A0; line-height: 1.5; }

.section { padding: 2.5rem 0; }
.muted { color:#6c757d; }
.badge-size { width:28px; display:inline-flex; align-items:center; justify-content:center; }

.catalog-intro .container-fluid .row { width: 800px; }
.table thead th { white-space:nowrap; }
.service-start { border-top:2px solid #e9ecef; }
.card-plain { border:1px solid #e9ecef; background:#fff; }
footer { border-top:1px solid #e9ecef; }

/* Container must be positioning context */
.navbar .navbar-nav {
  position: relative;
}

/* The shared bubble */
/*
.navbar .hover-bubble {
  position: absolute;
  top: 0;
  left: 0;
  height: 36px;
  width: 80px;
  background: rgba(255,255,255,.95);
  border-radius: 9999px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  transform: translate3d(0,0,0);
  transition: transform .28s cubic-bezier(.22,.61,.36,1), width .28s, height .28s, opacity .2s;
  pointer-events: none;
  opacity: 0;
  z-index: 0;
}
*/

/* Ensure links paint above bubble */
/*
.navbar .nav-link { position: relative; z-index: 1; padding: .5rem .9rem; border-radius: 9999px; }
.navbar .nav-link.bubble-active { color: #111 !important; }
*/