@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Mulish:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* ================================================
   OVO HERO — CSS VARIABLES
================================================== */
#ovo-hero-wrapper {
  --color--page-color: #060910;
  --main-font: Mulish, sans-serif;
  --paragraph-font: Inter, sans-serif;
  --color--button-text: #cac4da;
  --color--brand-color: #f66f14;
  --color--elements-bg: #2121214d;
  --color--elements-stroke: #f7721826;
  --color--inner-shadow-color: #f670142e;
  --color--gradient-color-01: #ffad75;
  --color--hovered-color: #21212166;
  --color--gradient-color-02: #f66f1400;

  /* one scale for the hero's vertical rhythm, so the block breathes
     with the viewport instead of at three hard breakpoints */
  --hero-gap-s: clamp(0.5rem, 0.8vw, 0.75rem);
  --hero-gap-m: clamp(0.9rem, 1.3vw, 1.25rem);
  --hero-gap-l: clamp(1.25rem, 2vw, 1.75rem);

  font-family: var(--main-font);
  color: #fff;
  position: relative;
  z-index: 1;
  overflow: hidden;
  background-color: var(--color--page-color);
}

/* Atmosphere: a warm "dawn" wash from the top (it reads as the same light
   source as the sphere below) plus a vignette that pulls the eye to the
   centre column. Behind everything — the container sits at z-index 3. */
#ovo-hero-wrapper::before,
#ovo-hero-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

#ovo-hero-wrapper::before {
  background:
    radial-gradient(120% 62% at 50% -14%, rgba(246, 111, 20, 0.16), rgba(246, 111, 20, 0) 62%),
    radial-gradient(75% 40% at 50% -6%, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 70%);
}

#ovo-hero-wrapper::after {
  background: radial-gradient(90% 55% at 50% 32%, rgba(0, 0, 0, 0) 38%, rgba(0, 0, 0, 0.5) 100%);
}

/* ================================================
   BASE RESETS
================================================== */
#ovo-hero-wrapper *,
#ovo-hero-wrapper *::before,
#ovo-hero-wrapper *::after {
  box-sizing: border-box;
}

#ovo-hero-wrapper a {
  background-color: transparent;
  text-decoration: none;
  color: #fff;
  font-family: var(--paragraph-font);
}

#ovo-hero-wrapper a:active,
#ovo-hero-wrapper a:hover {
  outline: 0;
}

#ovo-hero-wrapper img {
  border: 0;
  vertical-align: middle;
  max-width: 100%;
  display: inline-block;
}

#ovo-hero-wrapper p {
  font-family: var(--paragraph-font);
  color: #9e9e9e;
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
}

#ovo-hero-wrapper h1 {
  font-family: var(--main-font);
  font-size: 65px;
  font-weight: 500;
  line-height: 1.15;
  margin: 0 0 10px;
  letter-spacing: -0.02em;
}

/* ================================================
   LAYOUT CONTAINERS
================================================== */
#ovo-hero-wrapper .container {
  z-index: 3;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding: 2em;
  position: relative;
}

#ovo-hero-wrapper .container.no-paddings {
  padding: 0 2em;
}

/* ================================================
   HERO SECTION
================================================== */
#ovo-hero-wrapper .hero-section {
  z-index: 1;
  position: relative;
  /* clears the fixed navbar (its inner ends ~71px down) with air to spare */
  padding-top: clamp(64px, 7vh, 88px);
}

#ovo-hero-wrapper .hero-section-center-holder {
  z-index: 2;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding-top: 0;
  display: flex;
  position: relative;
}

#ovo-hero-wrapper .hero-content {
  z-index: 1;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
  position: relative;
}

/* ================================================
   BADGE (Whats New pill)
================================================== */
#ovo-hero-wrapper .badge-wrapper {
  margin-bottom: var(--hero-gap-l);
}

#ovo-hero-wrapper .ease-badge {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  border: 1px solid var(--color--elements-stroke);
  background-color: var(--color--elements-bg);
  box-shadow: inset 0 -8px 24px 0 var(--color--inner-shadow-color);
  border-radius: 60px;
  justify-content: center;
  align-items: center;
  padding: 1px 16px 1px 1px;
  font-size: 14px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.78);
  display: inline-flex;
  transition: transform 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
  cursor: pointer;
}

#ovo-hero-wrapper .ease-badge:hover {
  transform: translateY(-1px);
  color: #fff;
  box-shadow: inset 0 -8px 24px 0 var(--color--inner-shadow-color), 0 0 24px #f6701438;
}

/* the arrow leans into the hover instead of the whole pill scaling */
#ovo-hero-wrapper .ease-badge:hover .ease-badge-icon {
  transform: translateX(3px);
}

#ovo-hero-wrapper .whats-new {
  background-color: var(--color--brand-color);
  background-image: radial-gradient(circle farthest-corner at 50% 100%, var(--color--gradient-color-01), var(--color--gradient-color-02) 59%);
  border: 1px solid #ffc9a133;
  border-radius: 40px;
  padding: 7px 13px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #fff;
}

#ovo-hero-wrapper .ease-badge-icon {
  width: 6px;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ================================================
   HERO TITLE & PARAGRAPH
================================================== */
/* max-width MUST stay a plain length. With `min(720px, 100%)` the percentage
   is indeterminate during intrinsic sizing, so .animate-on-load-02 stretched
   to the full column and the title sat flush left inside it — 200px off the
   centre every other block was on. margin-inline is the belt to that brace. */
#ovo-hero-wrapper .home-hero {
  text-align: center;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  max-width: 720px;
  margin-inline: auto;
  padding-bottom: var(--hero-gap-s);
  display: flex;
}

#ovo-hero-wrapper .hero-title {
  /* fluid instead of three hard breakpoints */
  font-size: clamp(2.05rem, 5.2vw + 0.4rem, 4.3rem);
  line-height: 1.06;
  letter-spacing: -0.028em;
  font-weight: 500;
  margin: 0;
  text-wrap: balance;
  /* the old 180deg white → 70% white washed the *second line* out to grey;
     0.86 keeps the falloff as depth, not as a fade */
  background: linear-gradient(178deg, #ffffff 0%, #ffffffdb 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* the payoff clause carries the same light as the sphere below it */
#ovo-hero-wrapper .hero-title_accent {
  background: linear-gradient(96deg, #ffd0a8 0%, #ff9a4d 42%, #f66f14 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

#ovo-hero-wrapper .center-hero-paragraph-holder {
  text-align: center;
  max-width: 620px;
}

#ovo-hero-wrapper .center-hero-paragraph-holder.smaller {
  max-width: 600px;
}

/* Three ranks instead of four identical grey blocks:
   qualifier → promise → method. */
#ovo-hero-wrapper .hero-kicker {
  max-width: 46ch;
  margin: 0 auto var(--hero-gap-m);
  font-size: 0.94rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.5);
  text-wrap: balance;
}

#ovo-hero-wrapper .hero-lead {
  font-size: clamp(1.02rem, 0.75vw + 0.62rem, 1.2rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.87);
  margin: 0 auto var(--hero-gap-m);
}

#ovo-hero-wrapper .hero-support {
  max-width: 48ch;
  margin: 0 auto;
  font-size: 0.94rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.52);
  text-wrap: balance;
}

#ovo-hero-wrapper .center-hero-paragraph-holder strong {
  color: #fff;
  font-weight: 600;
}

/* ================================================
   BUTTONS
================================================== */
#ovo-hero-wrapper .hero-button-holder {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  margin-top: var(--hero-gap-l);
  display: flex;
}

/* PRIMARY. Was a ghost button while the navbar's CTA was solid orange —
   the most important click on the page ranked below the nav. */
#ovo-hero-wrapper .button-glow {
  grid-column-gap: 8px;
  background-color: var(--color--brand-color);
  background-image: linear-gradient(180deg, #ff9d4d 0%, #f66f14 58%, #e05f0a 100%);
  font-family: var(--paragraph-font);
  color: #fff;
  border: 1px solid #ffb37a4d;
  border-radius: 14px;
  flex: 0 auto;
  justify-content: center;
  align-items: center;
  padding: 13px 24px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.005em;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: box-shadow .4s cubic-bezier(.16, 1, .3, 1),
    transform .4s cubic-bezier(.16, 1, .3, 1);
  display: inline-flex;
  box-shadow:
    inset 0 1px 0 #ffffff59,
    inset 0 -10px 18px #a53d0033,
    0 8px 24px #f6701440,
    0 0 44px #f6701426;
}

/* light sweeps across the face on hover */
#ovo-hero-wrapper .button-glow::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 32%, #ffffff5c 48%, transparent 64%);
  transform: translateX(-120%);
  transition: transform .7s cubic-bezier(.16, 1, .3, 1);
}

#ovo-hero-wrapper .button-glow:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 #ffffff73,
    inset 0 -10px 18px #a53d0033,
    0 12px 30px #f6701459,
    0 0 60px #f6701440;
}

#ovo-hero-wrapper .button-glow:hover::after {
  transform: translateX(120%);
}

#ovo-hero-wrapper .button-glow:hover .button-arrow {
  transform: translateX(3px);
}

/* SECONDARY — deliberately quiet next to the primary */
#ovo-hero-wrapper .button-simple {
  grid-column-gap: 8px;
  border: 1px solid #ffffff1f;
  background-color: #ffffff08;
  font-family: var(--paragraph-font);
  color: rgba(255, 255, 255, 0.82);
  background-image: none;
  border-radius: 14px;
  flex: 0 auto;
  justify-content: center;
  align-items: center;
  padding: 13px 22px;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: box-shadow .375s ease, border-color .375s ease, color .375s ease,
    background-color .375s ease, transform .375s cubic-bezier(.16, 1, .3, 1);
  display: inline-flex;
  box-shadow: inset 0 -9px 24px #f6701421;
}

#ovo-hero-wrapper .button-simple:hover {
  border-color: #f6701466;
  background-color: #ffffff0f;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: inset 0 -8px 28px #f670143d, inset 0 0 12px #ffffff14, 0 10px 26px #00000040;
}

/* the caret nods downward — the link scrolls down to the live agent */
#ovo-hero-wrapper .button-caret {
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform .375s cubic-bezier(.16, 1, .3, 1);
}

#ovo-hero-wrapper .button-simple:hover .button-caret {
  transform: rotate(45deg) translate(1px, 1px);
}

#ovo-hero-wrapper .button-arrow {
  width: 11px;
  height: auto;
  transition: transform .375s cubic-bezier(.16, 1, .3, 1);
}

/* keyboard users get the same affordance the mouse gets */
#ovo-hero-wrapper .button-glow:focus-visible,
#ovo-hero-wrapper .button-simple:focus-visible,
#ovo-hero-wrapper .ease-badge:focus-visible,
#ovo-hero-wrapper .hero-subcta:focus-visible {
  outline: 2px solid #ff9a4d;
  outline-offset: 3px;
}

/* ================================================
   TRUST CHIPS (the risk-reversal line)
================================================== */
#ovo-hero-wrapper .hero-trust {
  list-style: none;
  margin: var(--hero-gap-m) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.4rem 1.15rem;
  font-family: var(--paragraph-font);
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.62);
}

#ovo-hero-wrapper .hero-trust li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* checkmark, drawn in CSS so it costs nothing */
#ovo-hero-wrapper .hero-trust li::before {
  content: "";
  width: 9px;
  height: 5px;
  border-left: 1.5px solid var(--color--brand-color);
  border-bottom: 1.5px solid var(--color--brand-color);
  transform: rotate(-45deg) translateY(-1px);
  flex-shrink: 0;
}

#ovo-hero-wrapper .hero-trust strong {
  color: #fff;
  font-weight: 600;
}

/* ================================================
   APP IMAGE / DASHBOARD MOCKUP
================================================== */
/* The sphere is pinned to the top of this wrapper, and the dashboard sits
   `padding-top` below it. Pulling the wrapper up lets the sphere's glow
   crest into the fold — the whole visual used to start ~700px down, so a
   1280x720 visitor never saw it without scrolling. */
#ovo-hero-wrapper .home-app-wrapper {
  perspective: 1500px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  margin-top: clamp(-5rem, -3.4vw, -1.5rem);
  margin-left: auto;
  margin-right: auto;
  padding-top: clamp(210px, 23vw, 320px);
  display: flex;
  position: relative;
}

#ovo-hero-wrapper .app-wrapper {
  z-index: 2;
  position: relative;
  width: 100%;
}

#ovo-hero-wrapper .app-holder {
  z-index: 2;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background-color: #0b1017;
  border: 1px solid #ffffff14;
  border-radius: 14px;
  width: 100%;
  padding: 8px;
  position: relative;
  box-shadow:
    inset 0 1px 0 #ffffff1a,
    inset 0 24px 48px #c7d3ea0d,
    0 40px 80px -20px #00000073;
}

/* warm rim on the top edge, so the frame catches the sphere's light */
#ovo-hero-wrapper .app-holder::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(180deg, #ffb37a5c, #ffffff00 42%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

#ovo-hero-wrapper .app-image {
  z-index: 1;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-radius: 8px;
  width: 100%;
  position: relative;
}

/* ================================================
   CIRCLE VISUAL / SPHERE
================================================== */
#ovo-hero-wrapper .circle-wrapper {
  z-index: 0;
  pointer-events: none;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
  position: absolute;
  top: 0;
  width: 100%;
}

#ovo-hero-wrapper .circle-container {
  width: 100%;
  position: relative;
}

#ovo-hero-wrapper .circle-bg-image {
  z-index: 1;
  width: 100%;
  position: relative;
}

#ovo-hero-wrapper .red-glow {
  opacity: .6;
  filter: blur(13px);
  width: 100%;
  position: absolute;
  inset: -15% 0% auto;
}

#ovo-hero-wrapper .white-glow {
  z-index: -1;
  opacity: .84;
  width: 100%;
  position: absolute;
  inset: 0% 0% auto;
}

#ovo-hero-wrapper .red-circle-center {
  z-index: 1;
  justify-content: center;
  align-items: flex-start;
  padding-top: 177px;
  display: flex;
  position: absolute;
  inset: 0%;
}

#ovo-hero-wrapper .red-circle {
  background-image: radial-gradient(circle farthest-corner at 50% 50%, var(--color--brand-color) 36%, #f66f1400 62%);
  opacity: .75;
  filter: blur(16px);
  border-radius: 1000px;
  width: 80%;
  height: 60%;
}

/* Fade gradient over the app screenshot */
#ovo-hero-wrapper .fade {
  z-index: 1;
  background-image: linear-gradient(180deg, #06091000 0%, var(--color--page-color) 90%);
  height: 200px;
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
}

#ovo-hero-wrapper .sphere-fade {
  display: none;
}

/* ================================================
   LIGHT RAYS
================================================== */
/* The -30deg tilt lives on the WRAPPER, not on .lights-holder: the mouse
   parallax in auren-ui.js writes `transform: translate(...)` straight onto
   .lights-holder, which used to wipe out its rotate() on the first mouse
   move and snap the rays upright. */
#ovo-hero-wrapper .light-wrapper {
  opacity: .6;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0%;
  overflow: visible;
  pointer-events: none;
  transform: rotate(-30deg);
}

#ovo-hero-wrapper .lights-holder {
  grid-column-gap: 96px;
  opacity: .34;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
  top: -217px;
  left: -60px;
}

#ovo-hero-wrapper .light {
  opacity: .4;
  filter: blur(34px);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 18%, rgba(255, 255, 255, 0) 78%);
  width: 150px;
  height: 1000px;
}

#ovo-hero-wrapper .light.middle {
  width: 220px;
  opacity: .3;
}

/* ================================================
   TRUSTED BY / COMPANY LOGOS
================================================== */


/* ================================================
   ENTRANCE ANIMATIONS
================================================== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 30px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes circleRotate {
  from {
    transform: rotate(-360deg) scale(0.7);
    opacity: 0;
  }
  to {
    transform: rotate(0deg) scale(1);
    opacity: 1;
  }
}

/* Split in two on purpose. A single keyframe set that ended on
   `transform: translate3d(0,0,0)` with fill-mode:forwards outranked the
   inline transform the parallax writes (animations beat inline styles in
   the cascade), so the glow layers never actually reacted to the mouse.
   The drift half now runs with fill-mode:none and hands `transform` back. */
@keyframes glowFadeIn {
  from {
    opacity: 0;
    filter: blur(20px);
  }
  to {
    opacity: 0.65;
    filter: blur(13px);
  }
}

@keyframes glowDriftIn {
  from {
    transform: translate3d(-248px, 95px, 0) scale3d(0.9, 0.9, 1) rotateZ(-26deg);
  }
  to {
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotateZ(0deg);
  }
}

@keyframes appSlideUp {
  from {
    opacity: 0;
    transform: translate3d(0, -120px, 0) scale3d(1.15, 1.15, 1);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
  }
}

@keyframes lightGrow {
  from {
    height: 0;
    opacity: 0;
  }
  to {
    height: 1000px;
    opacity: 0.4;
  }
}

/* Staggered fade-in-up animations */
#ovo-hero-wrapper .animate-on-load-01 {
  opacity: 0;
  animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 0.1s;
}

#ovo-hero-wrapper .animate-on-load-02 {
  opacity: 0;
  animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 0.2s;
}

#ovo-hero-wrapper .animate-on-load-03 {
  opacity: 0;
  animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 0.35s;
}

#ovo-hero-wrapper .animate-on-load-04 {
  opacity: 0;
  animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 0.45s;
}

#ovo-hero-wrapper .animate-on-load-05 {
  z-index: 2;
  width: 100%;
  position: relative;
  opacity: 0;
  animation: fadeInUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 0.55s;
}

/* Circle spin-in */
#ovo-hero-wrapper .circle-container {
  opacity: 0;
  transform-origin: center;
  animation: circleRotate 2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 0.6s;
}

/* Red glow & white glow fade-in */
#ovo-hero-wrapper .red-glow,
#ovo-hero-wrapper .white-glow {
  opacity: 0;
  animation:
    glowFadeIn 2.5s ease-out 0.8s forwards,
    glowDriftIn 2.5s ease-out 0.8s;
}

/* App holder slide-up */
#ovo-hero-wrapper .app-holder {
  opacity: 0;
  animation: appSlideUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 0.7s;
}

/* Light rays grow */
#ovo-hero-wrapper .light {
  opacity: 0;
  height: 0;
  animation: lightGrow 2s ease-out forwards;
  animation-delay: 1s;
}

/* ================================================
   FADE-IN ON SCROLL (trusted-by section)
================================================== */
#ovo-hero-wrapper .fade-in-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 1.2s;
}

/* ================================================
   RESPONSIVE — TABLET
================================================== */
@media (max-width: 991px) {
  /* .hero-title is fluid (clamp) — no hard step needed here anymore */

  #ovo-hero-wrapper .app-wrapper {
    display: none !important;
  }

  /* This box is the window onto the sphere: the sphere itself is ~1.03x its
     own width tall (500px+ on a phone), so #ovo-hero-wrapper's
     `overflow: hidden` always cuts it — the question is only where. The
     height has to leave the whole bright rim (the top ~25% of the artwork)
     ABOVE where .sphere-fade starts, or the veil dims the one thing worth
     showing. 360/300/240 keeps rim and veil out of each other's way. */
  #ovo-hero-wrapper .home-app-wrapper {
    padding-top: 0;
    margin-top: 0;
    height: 360px;
    overflow: visible;
  }

  /* .sphere-fade is what makes the cut invisible, so it has to reach the
     exact line the clip happens on. It didn't: .section's 20px of
     padding-bottom sat below .home-app-wrapper, so a strip of raw bright
     sphere survived under the veil and got sliced hard against the white
     section below. Drop the padding so veil and clip line coincide. */
  #ovo-hero-wrapper.section {
    padding-bottom: 0;
  }

  #ovo-hero-wrapper .sphere-fade {
    display: block !important;
    z-index: 5;
    /* opaque at 88%, not at 100%: a ramp that only lands on the page colour
       at its very last pixel is still translucent over the pixel above it,
       and over a glow that bright the difference reads as an edge */
    background-image: linear-gradient(180deg,
        rgba(6, 9, 16, 0) 0%,
        rgba(6, 9, 16, 0.45) 38%,
        rgba(6, 9, 16, 0.86) 66%,
        var(--color--page-color) 88%);
    height: 185px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    pointer-events: none;
  }

  #ovo-hero-wrapper .container {
    padding: 1.5em;
  }

  #ovo-hero-wrapper .trusted-by {
    padding-top: 50px;
    padding-bottom: 60px;
  }

  /* fixed navbar (burger visible below 992px) ends ~76px down —
     keep the badge clear of it */
  #ovo-hero-wrapper .hero-section {
    padding-top: 88px;
  }
}

/* ================================================
   RESPONSIVE — MOBILE LANDSCAPE
================================================== */
@media (max-width: 767px) {
  #ovo-hero-wrapper p {
    font-size: 14px;
    line-height: 1.6;
  }

  #ovo-hero-wrapper .hero-kicker,
  #ovo-hero-wrapper .hero-support {
    font-size: 0.875rem;
  }

  /* .section contributes 40px of horizontal padding and .container another
     32px on top — on a 375px screen that left a 231px column and forced
     every line to wrap two or three words at a time. One 20px gutter. */
  #ovo-hero-wrapper.section {
    padding-left: 0;
    padding-right: 0;
  }

  #ovo-hero-wrapper .container,
  #ovo-hero-wrapper .container.no-paddings {
    padding-left: 20px;
    padding-right: 20px;
  }

  #ovo-hero-wrapper .hero-section-center-holder,
  #ovo-hero-wrapper .hero-content {
    width: 100%;
  }

  #ovo-hero-wrapper .app-wrapper {
    display: none !important;
  }

  #ovo-hero-wrapper .home-app-wrapper {
    padding-top: 0;
    margin-top: 0;
    height: 300px;
    width: 100vw;
    left: 50%;
    transform: translateX(-50%);
    position: relative;
    overflow: visible;
  }

  /* shorter band of sphere on show here, so the veil scales with it —
     the ramp itself is inherited from the 991px rule */
  #ovo-hero-wrapper .sphere-fade {
    display: block !important;
    z-index: 5;
    height: 150px;
  }

  #ovo-hero-wrapper .hero-button-holder {
    margin-top: var(--hero-gap-l);
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  #ovo-hero-wrapper .button-glow,
  #ovo-hero-wrapper .button-simple {
    justify-content: center;
    padding: 15px 20px;
    font-size: 15px;
    width: 100%;
  }

  /* one chip per row would eat the fold; keep them on 1–2 tight rows */
  #ovo-hero-wrapper .hero-trust {
    gap: 0.45rem 0.9rem;
    font-size: 0.8rem;
  }

  #ovo-hero-wrapper .company-logo-wrapper {
    height: 24px;
    padding-left: 20px;
    padding-right: 20px;
  }

  #ovo-hero-wrapper .trusted-by {
    padding-top: 40px;
    padding-bottom: 45px;
  }

  #ovo-hero-wrapper .hero-section {
    padding-top: 84px;
  }

  /* Dashboard — hide sidebar, stack grids */
  .coded-db-sidebar {
    display: none !important;
  }
  .coded-db-grid {
    grid-template-columns: 1fr !important;
  }
  .coded-db-grid.bottom {
    grid-template-columns: 1fr !important;
  }

  /* Dashboard — show more content */
  .coded-dashboard {
    aspect-ratio: auto !important;
    overflow: visible !important;
  }

  .coded-db-main {
    overflow: visible !important;
  }

  /* Circle — expand to full viewport width */
  #ovo-hero-wrapper .circle-wrapper {
    width: 120%;
    left: 50%;
    transform: translateX(-50%);
  }

  /* Fade — blend bottom edge of sphere is styled via sphere-fade */
}

/* ================================================
   RESPONSIVE — MOBILE PORTRAIT
================================================== */
@media (max-width: 479px) {
  #ovo-hero-wrapper .hero-title {
    line-height: 1.12;
    letter-spacing: -0.018em;
  }

  #ovo-hero-wrapper p {
    font-size: 14px;
    line-height: 1.65;
  }

  #ovo-hero-wrapper .container {
    width: 100%;
  }

  /* Keep everything centered for visual balance */
  #ovo-hero-wrapper .hero-section-center-holder {
    text-align: center;
    justify-content: center;
    align-items: center;
  }

  #ovo-hero-wrapper .center-hero-paragraph-holder {
    text-align: center;
  }

  #ovo-hero-wrapper .hero-content {
    justify-content: flex-start;
    align-items: center;
  }

  #ovo-hero-wrapper .home-hero {
    text-align: center;
    align-items: center;
    padding-bottom: 8px;
  }

  /* Buttons — stack vertically, full width */
  #ovo-hero-wrapper .hero-button-holder {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 10px;
    margin-top: var(--hero-gap-l);
  }

  #ovo-hero-wrapper .button-glow,
  #ovo-hero-wrapper .button-simple {
    justify-content: center;
    padding: 15px 16px;
    font-size: 15px;
    width: 100%;
    border-radius: 12px;
  }

  /* The label has to survive on one line inside the narrow hero column. */
  #ovo-hero-wrapper .button-glow>div,
  #ovo-hero-wrapper .button-simple>div {
    white-space: nowrap;
  }

  /* App holder */
  #ovo-hero-wrapper .app-holder {
    border-radius: 6px;
    padding: 4px;
  }

  /* Badge — auto-width, centered. The sizes are tuned so
     "Ново: AI служител за българския бизнес" holds ONE line at 360px. */
  #ovo-hero-wrapper .badge-wrapper {
    width: auto;
    display: flex;
    justify-content: center;
    margin-bottom: var(--hero-gap-m);
  }

  #ovo-hero-wrapper .ease-badge {
    width: auto;
    font-size: 11.5px;
    grid-column-gap: 7px;
    padding: 1px 11px 1px 1px;
  }

  #ovo-hero-wrapper .whats-new {
    font-size: 11px;
    padding: 6px 9px;
  }

  /* the promise stays the biggest line of body copy, but 16px+ over seven
     lines pushed the CTA off a 375px screen */
  #ovo-hero-wrapper .hero-lead {
    font-size: 1rem;
    line-height: 1.5;
  }

  #ovo-hero-wrapper .hero-kicker,
  #ovo-hero-wrapper .hero-support {
    font-size: 0.85rem;
    line-height: 1.5;
  }

  /* Reduce circle/sphere space above dashboard */
  #ovo-hero-wrapper .home-app-wrapper {
    padding-top: 0;
    margin-top: 20px;
    height: 240px;
    width: 100vw;
    left: 50%;
    transform: translateX(-50%);
    position: relative;
    overflow: visible;
  }

  #ovo-hero-wrapper .app-wrapper {
    display: none !important;
  }

  /* Fade — blend bottom edge of sphere */
  #ovo-hero-wrapper .sphere-fade {
    display: block !important;
    z-index: 5;
    height: 120px;
  }

  /* Dashboard — expand to show all content */
  .coded-dashboard {
    aspect-ratio: auto !important;
    min-height: 500px;
    flex-direction: column;
    overflow: visible !important;
  }

  .coded-db-main {
    padding: 1rem;
    gap: 0.75rem;
    overflow: visible !important;
  }

  .coded-db-main::-webkit-scrollbar {
    display: none;
  }

  .coded-db-header {
    flex-direction: row;
    gap: 0.5rem;
  }

  .coded-db-title {
    font-size: 1rem;
  }

  .coded-db-metric {
    font-size: 1.15rem;
  }

  .coded-db-card {
    padding: 0.85rem;
    gap: 0.5rem;
    border-radius: 8px;
  }

  .coded-db-card-title {
    font-size: 0.7rem;
  }

  .coded-db-chart-bars {
    height: 60px;
  }

  .coded-db-bar {
    width: 0.5rem;
  }

  .coded-db-bar-label {
    font-size: 0.55rem;
  }

  .coded-db-perf-item {
    font-size: 0.7rem;
  }

  .coded-db-agent-row {
    font-size: 0.7rem;
  }

  .coded-db-agent-avatar {
    width: 1.2rem;
    height: 1.2rem;
    font-size: 0.55rem;
  }

  .coded-db-activity-item {
    font-size: 0.65rem;
  }

  .coded-db-activity-icon-wrap {
    width: 1rem;
    height: 1rem;
  }

  .coded-db-activity-icon {
    width: 0.5rem;
    height: 0.5rem;
  }

  #ovo-hero-wrapper .company-logo-wrapper {
    height: 21px;
    padding-left: 12px;
    padding-right: 12px;
  }

  /* Circle — full viewport width, edge to edge */
  #ovo-hero-wrapper .circle-wrapper {
    width: 130%;
    left: 50%;
    transform: translateX(-50%);
  }

  #ovo-hero-wrapper .circle-container {
    width: 100%;
  }

  #ovo-hero-wrapper .red-circle-center {
    padding-top: 80px;
  }

  #ovo-hero-wrapper .red-circle {
    width: 95%;
    height: 70%;
  }

  /* Reduce light rays visual noise */
  #ovo-hero-wrapper .lights-holder {
    opacity: 0.25;
  }
}

/* ================================================
   REDUCED MOTION
================================================== */
@media (prefers-reduced-motion: reduce) {
  #ovo-hero-wrapper .button-glow::after {
    display: none;
  }

  #ovo-hero-wrapper .button-glow,
  #ovo-hero-wrapper .button-simple,
  #ovo-hero-wrapper .ease-badge,
  #ovo-hero-wrapper .button-arrow,
  #ovo-hero-wrapper .button-caret,
  #ovo-hero-wrapper .ease-badge-icon {
    transition-duration: 0.01s;
  }

  #ovo-hero-wrapper .button-glow:hover,
  #ovo-hero-wrapper .button-simple:hover,
  #ovo-hero-wrapper .ease-badge:hover {
    transform: none;
  }
}

/* ================================================
   OVERFLOW SECTION WRAPPER
================================================== */
#ovo-hero-wrapper .section.overflow-hidden {
  overflow: hidden;
}

/* ================================================
   CODED DASHBOARD MOCKUP
================================================== */
.coded-dashboard {
  display: flex;
  background-color: #080d14;
  border-radius: 8px;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  font-family: Inter, sans-serif;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Sidebar */
.coded-db-sidebar {
  width: 22%;
  background-color: #05080c;
  border-right: 1px solid rgba(255, 255, 255, 0.05);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.coded-db-logo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-bottom: 0.25rem;
}

.coded-db-logo-img {
  height: 1.1rem;
  width: auto;
  object-fit: contain;
}

.coded-db-icon {
  width: 0.95rem;
  height: 0.95rem;
  flex-shrink: 0;
  stroke: currentColor;
}

.coded-db-activity-icon-wrap {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background-color: rgba(246, 111, 20, 0.1);
  color: #f66f14;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.coded-db-activity-icon {
  width: 0.7rem;
  height: 0.7rem;
  stroke: currentColor;
}

.coded-db-menu {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.coded-db-menu-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  font-size: 0.85rem;
  color: #9e9e9e;
  cursor: pointer;
  transition: all 0.2s ease;
}

.coded-db-menu-item.active {
  background-color: rgba(246, 111, 20, 0.15);
  color: #f66f14;
  font-weight: 500;
}

.coded-db-menu-item:hover:not(.active) {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.03);
}

/* Main Content */
.coded-db-main {
  flex: 1;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  overflow-y: auto;
}

.coded-db-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.coded-db-title {
  font-size: 1.25rem;
  font-weight: 600;
}

.coded-db-user {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: #9e9e9e;
}

.coded-db-avatar {
  width: 1.5rem;
  height: 1.5rem;
  background-color: #333;
  border-radius: 50%;
  background-image: linear-gradient(135deg, #f66f14, #ffad75);
}

/* Grid Layout */
.coded-db-grid {
  display: grid;
  grid-template-columns: 2fr 1.1fr;
  gap: 1.25rem;
}

.coded-db-grid.bottom {
  grid-template-columns: 1.2fr 1fr;
}

/* Widget Card */
.coded-db-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px);
  border-radius: 10px;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.coded-db-card-title {
  font-size: 0.85rem;
  color: #9e9e9e;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.coded-db-metric {
  font-size: 1.5rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.coded-db-trend {
  font-size: 0.75rem;
  color: #4caf50;
  background-color: rgba(76, 175, 80, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
}

/* Chart visualization */
.coded-db-chart-bars {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  height: 100px;
  padding-top: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.coded-db-bar-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  flex: 1;
  gap: 0.25rem;
  height: 100%; /* bars use % heights — wrapper must have a resolved height */
}

.coded-db-bar {
  width: 0.75rem;
  background: linear-gradient(180deg, #ffad75, #f66f14);
  border-radius: 4px 4px 0 0;
  transition: height 0.5s ease;
  height: 0px; /* will set in html inline */
}

.coded-db-bar-label {
  font-size: 0.65rem;
  color: #666;
}

/* AI Agents list */
.coded-db-agent-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.coded-db-agent-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.coded-db-agent-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.coded-db-agent-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.coded-db-agent-avatar {
  width: 1.5rem;
  height: 1.5rem;
  background-color: rgba(246, 111, 20, 0.1);
  border: 1px solid rgba(246, 111, 20, 0.2);
  color: #f66f14;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: bold;
}

.coded-db-status {
  font-size: 0.7rem;
  padding: 1px 6px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.coded-db-status.running {
  background-color: rgba(76, 175, 80, 0.1);
  color: #4caf50;
}

.coded-db-status.idle {
  background-color: rgba(158, 158, 158, 0.1);
  color: #9e9e9e;
}

.coded-db-status-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
}

.coded-db-status.running .coded-db-status-dot {
  background-color: #4caf50;
  box-shadow: 0 0 4px #4caf50;
}

.coded-db-status.idle .coded-db-status-dot {
  background-color: #9e9e9e;
}

/* Recent activity */
.coded-db-activity-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.coded-db-activity-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.75rem;
}

.coded-db-activity-text {
  flex: 1;
}

.coded-db-activity-user {
  font-weight: 500;
  color: #fff;
}

.coded-db-activity-desc {
  color: #9e9e9e;
}

.coded-db-activity-time {
  color: #666;
  font-size: 0.65rem;
}

/* Performance list */
.coded-db-perf-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.coded-db-perf-item {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
}

.coded-db-perf-value {
  font-weight: 600;
  color: #f66f14;
}

/* Animations */
@keyframes barGrow {
  from {
    height: 0%;
  }
}

.coded-db-bar {
  animation: barGrow 1.5s cubic-bezier(0.17, 0.84, 0.44, 1) forwards;
}

@keyframes itemFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.coded-db-activity-item {
  opacity: 0;
  animation: itemFadeIn 0.8s cubic-bezier(0.17, 0.84, 0.44, 1) forwards;
}

.coded-db-activity-item:nth-child(1) { animation-delay: 0.2s; }
.coded-db-activity-item:nth-child(2) { animation-delay: 0.4s; }
.coded-db-activity-item:nth-child(3) { animation-delay: 0.6s; }

.coded-db-agent-row {
  opacity: 0;
  animation: itemFadeIn 0.8s cubic-bezier(0.17, 0.84, 0.44, 1) forwards;
}

.coded-db-agent-row:nth-child(1) { animation-delay: 0.3s; }
.coded-db-agent-row:nth-child(2) { animation-delay: 0.5s; }
.coded-db-agent-row:nth-child(3) { animation-delay: 0.7s; }

/* Responsive adjustments */
@media (max-width: 991px) {
  .coded-db-sidebar {
    width: 25%;
  }
}