/* Original Oil Connect styling extracted from the supplied script. */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600;700;800&family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@300;400;500;600;700&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: oklch(7% 0.02 240); color: oklch(95% 0.008 240); font-family: 'Space Grotesk', sans-serif; overflow-x: hidden; }

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.3; transform: scale(0.75); }
}
@keyframes amber-breathe {
  0%, 100% { opacity: 0.10; }
  50% { opacity: 0.18; }
}

@media (max-width: 1024px) {
  .oc-sec { padding-left: 36px !important; padding-right: 36px !important; }
  .oc-navlinks { display: none !important; }
  .oc-hero-grid { grid-template-columns: 1fr !important; gap: 52px !important; }
  .oc-spotlight { grid-template-columns: 1fr !important; gap: 44px !important; }
  .oc-feat-grid { grid-template-columns: repeat(2,1fr) !important; }
  .oc-prod-grid { grid-template-columns: repeat(2,1fr) !important; }
  .oc-pricing { grid-template-columns: 1fr !important; max-width: 520px; margin-left: auto !important; margin-right: auto !important; }
  .oc-cards3 { grid-template-columns: 1fr !important; }
  .oc-footer-grid { grid-template-columns: repeat(2,1fr) !important; }
  .oc-steps { grid-template-columns: 1fr !important; gap: 36px !important; }
  .oc-steps-line { display: none !important; }
  .oc-step { padding: 0 !important; border: none !important; }
}
@media (max-width: 620px) {
  .oc-sec { padding-left: 20px !important; padding-right: 20px !important; }
  .oc-feat-grid { grid-template-columns: 1fr !important; }
  .oc-prod-grid { grid-template-columns: 1fr !important; }
  .oc-stats-grid { grid-template-columns: repeat(2,1fr) !important; }
  .oc-footer-grid { grid-template-columns: 1fr !important; }
  .oc-hero-h1 { font-size: 56px !important; }
}


/* Mobile navbar: keeps the original visual system, font stack, and colors while making the menu usable on phones and tablets. */
.oc-mobile-panel { display: flex; align-items: center; flex: 1; min-width: 0; }
.oc-mobile-menu-toggle { display: none; }
.oc-mobile-menu-toggle:hover { border-color: oklch(36% 0.03 240) !important; color: oklch(97% 0.004 240) !important; }
.oc-navbar.is-open .oc-mobile-menu-toggle { border-color: oklch(70% 0.17 65) !important; }
.oc-navbar.is-open .oc-menu-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.oc-navbar.is-open .oc-menu-bar:nth-child(2) { opacity: 0; }
.oc-navbar.is-open .oc-menu-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1024px) {
  .oc-navbar { padding-left: 28px !important; padding-right: 28px !important; justify-content: space-between !important; }
  .oc-brand { margin-right: 0 !important; }
  .oc-mobile-menu-toggle { display: flex !important; margin-left: auto !important; }
  .oc-mobile-panel { display: none !important; position: absolute !important; top: 68px !important; left: 0 !important; right: 0 !important; z-index: 210 !important; background: oklch(7% 0.02 240 / 0.985) !important; border-bottom: 1px solid oklch(20% 0.025 240) !important; padding: 18px 28px 24px !important; flex-direction: column !important; align-items: stretch !important; gap: 18px !important; box-shadow: 0 24px 60px oklch(0% 0 0 / 0.38) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; }
  .oc-navbar.is-open .oc-mobile-panel { display: flex !important; }
  .oc-navbar.is-open .oc-navlinks { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 0 !important; flex: unset !important; }
  .oc-navbar.is-open .oc-navlinks a { padding: 15px 0 !important; border-bottom: 1px solid oklch(18% 0.022 240) !important; color: oklch(74% 0.01 240) !important; }
  .oc-navbar.is-open .oc-navlinks a:hover { color: oklch(96% 0.006 240) !important; }
  .oc-navbar.is-open .oc-nav-actions { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px !important; margin-left: 0 !important; width: 100% !important; }
  .oc-navbar.is-open .oc-nav-actions a { text-align: center !important; }
  .oc-navbar.is-open .oc-nav-actions a:first-child { border: 1px solid oklch(22% 0.024 240) !important; border-radius: 3px !important; padding: 10px 16px !important; }
}

@media (max-width: 620px) {
  .oc-navbar { padding-left: 18px !important; padding-right: 18px !important; height: 64px !important; }
  .oc-mobile-panel { top: 64px !important; padding: 14px 18px 20px !important; }
  .oc-navbar.is-open .oc-nav-actions { grid-template-columns: 1fr !important; }
  .oc-brand span { font-size: 20px !important; }
}