:root{
      --bg-0:#07090c;
      --bg-1:#0b0f16;
      --bg-2:#0f1624;
      --card:#0e1522;
      --line: rgba(255,255,255,.10);
      --muted: rgba(255,255,255,.70);
      --muted2: rgba(255,255,255,.55);
      --accent:#ffffff; /* keep white for premium mono look */
      --shadow: 0 12px 40px rgba(0,0,0,.45);
      --radius: 18px;
    }

    body{
      background: radial-gradient(900px 500px at 15% 10%, rgba(255,255,255,.08), transparent 60%),
                  radial-gradient(900px 500px at 85% 10%, rgba(255,255,255,.06), transparent 60%),
                  linear-gradient(180deg, var(--bg-0), var(--bg-1));
      color:#fff;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
      overflow-x:hidden;
    }

    a{ color:#fff; }
    a:hover{ color: rgba(255,255,255,.85); }

    /* Utility */
    .text-muted-odo{ color: var(--muted) !important; }
    .text-muted-odo2{ color: var(--muted2) !important; }
    .border-odo{ border: 1px solid var(--line) !important; }
    .glass{
      background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
      border: 1px solid rgba(255,255,255,.10);
      box-shadow: var(--shadow);
      border-radius: var(--radius);
      backdrop-filter: blur(10px);
    }

    /* Top bar */
    .topbar{
      background: rgba(0,0,0,.35);
      border-bottom: 1px solid var(--line);
    }
    .topbar .small a{ text-decoration:none; color: rgba(255,255,255,.85); }
    .topbar .small a:hover{ color:#fff; }

    /* Navbar */
    .navbar{
      background: rgba(5,7,10,.65);
      border-bottom: 1px solid var(--line);
      backdrop-filter: blur(12px);
    }

    /* Tall-logo fix: circle container */
    .brand-badge{
      width: 90px; height:90px;
      border-radius: 999px;
      background: #fff;
      display:flex; align-items:center; justify-content:center;
      box-shadow: 0 10px 30px rgba(0,0,0,.35);
      border: 1px solid rgba(0,0,0,.15);
      overflow:hidden;
      flex: 0 0 auto;
    }
    .brand-badge img{
      height: 100px;  /* tall logo sits nicely */
      width: auto;
      display:block;
      filter: contrast(1.05);
    }
    .brand-title{
      line-height: 1.05;
      letter-spacing: .6px;
	  color: white;
    }
    .nav-link{
      color: rgba(255,255,255,.80) !important;
      font-weight: 600;
      letter-spacing: .2px;
    }
    .nav-link:hover{ color:#fff !important; }
    .nav-link.active{ color:#fff !important; }

    .btn-odo{
      border-radius: 999px;
      padding: .70rem 1.05rem;
      border: 1px solid rgba(255,255,255,.16);
      background: rgba(255,255,255,.10);
      color:#fff;
      box-shadow: 0 10px 25px rgba(0,0,0,.25);
    }
    .btn-odo:hover{ background: rgba(255,255,255,.16); }

    .btn-odo-solid{
      border-radius: 999px;
      padding: .75rem 1.10rem;
      background:#fff;
      color:#000;
      font-weight: 800;
      border: 1px solid rgba(255,255,255,.25);
    }
    .btn-odo-solid:hover{ filter: brightness(.92); }

    /* Hero */
    .hero{
      position:relative;
      padding: 88px 0 40px;
    }
    .hero h1{
      font-size: clamp(2rem, 3.5vw, 3.4rem);
      letter-spacing: -0.5px;
      font-weight: 900;
    }
    .hero .lead{
      color: var(--muted);
      max-width: 52ch;
    }
    .hero-visual{
      min-height: 360px;
      background:
        radial-gradient(700px 300px at 30% 20%, rgba(255,255,255,.10), transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
      border: 1px solid rgba(255,255,255,.10);
      border-radius: 24px;
      box-shadow: var(--shadow);
      position:relative;
      overflow:hidden;
    }
    .hero-visual:before{
      content:"";
      position:absolute; inset:-60px -40px auto auto;
      width:220px; height:220px;
      background: radial-gradient(circle, rgba(255,255,255,.18), transparent 60%);
      transform: rotate(25deg);
      filter: blur(2px);
    }
    .pill{
      display:inline-flex; gap:.55rem; align-items:center;
      border:1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.07);
      padding: .45rem .75rem;
      border-radius: 999px;
      color: rgba(255,255,255,.86);
      font-weight: 700;
      font-size: .92rem;
    }

    /* Section spacing */
    section{ padding: 64px 0; }
    .section-title{
      font-weight: 900;
      letter-spacing: -.3px;
    }
    .section-sub{
      color: var(--muted);
      max-width: 70ch;
    }

    /* Cards */
    .odo-card{
      background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
      border: 1px solid rgba(255,255,255,.10);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
    }
    .odo-card .icon{
      width: 44px; height:44px;
      border-radius: 14px;
      display:flex; align-items:center; justify-content:center;
      background: rgba(255,255,255,.10);
      border: 1px solid rgba(255,255,255,.12);
    }
    .odo-card p{ color: var(--muted); }

    /* Categories */
    .cat-tile{
      border-radius: 22px;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.06);
      padding: 18px;
      transition: transform .25s ease, background .25s ease;
      height: 100%;
    }
    .cat-tile:hover{
      transform: translateY(-3px);
      background: rgba(255,255,255,.09);
    }
    .cat-circle{
      width:64px; height:64px;
      border-radius: 999px;
      display:flex; align-items:center; justify-content:center;
      background: rgba(255,255,255,.10);
      border: 1px solid rgba(255,255,255,.12);
      font-size: 1.35rem;
    }

    /* Dark feature band */
    .band{
      background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(255,255,255,.03));
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }

    /* Testimonials */
    .quote{
      font-size: 1.05rem;
      color: rgba(255,255,255,.86);
    }
    .stars{ letter-spacing: 2px; color: rgba(255,255,255,.85); }

    /* Footer */
    footer{
      background: rgba(0,0,0,.35);
      border-top: 1px solid var(--line);
      padding: 44px 0;
    }
    .footer-link{
      color: rgba(255,255,255,.70);
      text-decoration:none;
    }
    .footer-link:hover{ color:#fff; }

    /* Scroll to top button */
    #toTop{
      position: fixed;
      right: 18px;
      bottom: 18px;
      width: 48px;
      height: 48px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.16);
      background: rgba(255,255,255,.12);
      color: #fff;
      display: none;
      align-items: center;
      justify-content: center;
      box-shadow: 0 14px 30px rgba(0,0,0,.35);
      z-index: 9999;
    }
    #toTop:hover{ background: rgba(255,255,255,.18); }
	
	
	/* =========================
   ODO FULL WIDTH IMAGE
========================= */

.odo-image-section {
  background-color: #000;
  overflow: hidden;
}

.odo-fullwidth-image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* Optional: smooth fade-in */
.odo-image-section {
  animation: odoFadeIn 1.2s ease-in-out both;
}

@keyframes odoFadeIn {
  from {
    opacity: 0;
    transform: scale(1.01);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
/* Hide on mobile (below 768px) */
@media (max-width: 767.98px) {
  .hide-mobile {
    display: none !important;
  }
}

/* =========================
   Dark Form Placeholder Fix
========================= */

.form-control::placeholder,
.form-control::-webkit-input-placeholder,
.form-control:-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.65);
  opacity: 1; /* Required for Firefox */
}

/* Optional: textarea placeholder */
textarea::placeholder {
  color: rgba(255, 255, 255, 0.65);
}

/* On focus – slightly dim */
.form-control:focus::placeholder {
  color: rgba(255, 255, 255, 0.35);
}
.odo-image-section {
  padding: 0 !important;
}

/* =========================
   ODO BRAND LOGO SECTION
========================= */

.odo-brands {
  background: #000;
  padding: 60px 0;
  overflow: hidden;
}

.odo-brand-title {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Slider wrapper */
.odo-logo-slider {
  position: relative;
  overflow: hidden;
  width: 100%;
}

/* Track */
.odo-logo-track {
  display: flex;
  width: calc(200px * 16);
  animation: odo-scroll 35s linear infinite;
}

/* Logo item */
.odo-logo {
  width: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 30px;
}

/* Logo image */
.odo-logo img {
  max-width: 140px;
  max-height: 60px;
  filter: grayscale(100%) brightness(0.95);
  opacity: 1;
  transition: all 0.3s ease;
}

/* Hover effect */
.odo-logo img:hover {
  filter: grayscale(0%) brightness(1);
  opacity: 1;
  transform: scale(1.05);
}

/* Pause on hover */
.odo-logo-slider:hover .odo-logo-track {
  animation-play-state: paused;
}

/* Animation */
@keyframes odo-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Mobile */
@media (max-width: 768px) {
  .odo-logo {
    width: 160px;
    padding: 0 20px;
  }

  .odo-logo img {
    max-width: 120px;
  }
}


/* Fix anchor scroll offset for sticky navbar */
section[id],
header[id] {
  scroll-margin-top: 90px; /* adjust if navbar height changes */
}