/* static/v2/css/index.css */
html{scroll-behavior:smooth}
:root{
  --om-gap:clamp(12px,2vw,20px);
  --om-hero-h:90svh;
  --om-hero-h-fallback:90vh;

  /* JS sets these */
  --om-progress-duration:12000ms;
  --om-accent-rgb:var(--bs-primary-rgb);

  /* circuit mask tile */
  --om-circuit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27320%27%20height%3D%27320%27%20viewBox%3D%270%200%20320%20320%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%274%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20opacity%3D%271%27%3E%3Cpath%20d%3D%27M24%2080%20H120%20Q136%2080%20136%2064%20V40%20H200%20Q216%2040%20216%2056%20V112%20H296%27/%3E%3Cpath%20d%3D%27M28%20240%20H104%20Q120%20240%20120%20224%20V176%20H176%20Q192%20176%20192%20192%20V248%20H292%27/%3E%3Cpath%20d%3D%27M56%20136%20H96%20Q112%20136%20112%20120%20V96%20H152%20Q168%2096%20168%20112%20V152%20H208%20Q224%20152%20224%20136%20V104%20H264%27/%3E%3Cpath%20d%3D%27M64%20288%20V264%20Q64%20248%2080%20248%20H152%20Q168%20248%20168%20232%20V208%27/%3E%3C/g%3E%3Cg%20fill%3D%27black%27%3E%3Ccircle%20cx%3D%2724%27%20cy%3D%2780%27%20r%3D%276%27/%3E%3Ccircle%20cx%3D%27296%27%20cy%3D%27112%27%20r%3D%276%27/%3E%3Ccircle%20cx%3D%2728%27%20cy%3D%27240%27%20r%3D%276%27/%3E%3Ccircle%20cx%3D%27292%27%20cy%3D%27248%27%20r%3D%276%27/%3E%3Ccircle%20cx%3D%2756%27%20cy%3D%27136%27%20r%3D%276%27/%3E%3Ccircle%20cx%3D%27264%27%20cy%3D%27104%27%20r%3D%276%27/%3E%3Ccircle%20cx%3D%2764%27%20cy%3D%27288%27%20r%3D%276%27/%3E%3Ccircle%20cx%3D%27168%27%20cy%3D%27208%27%20r%3D%276%27/%3E%3C/g%3E%3C/svg%3E");
}

/* optional but helpful if any header becomes sticky later */
#section-hero,#section-platform,#section-order,#section-ticketing,#section-3d,#section-cta{scroll-margin-top:80px}

/* layout */
.hero{padding:var(--om-gap) 0}
.om-main{padding:var(--om-gap) 0}
.om-stack{display:flex;flex-direction:column;gap:var(--om-gap)}

/* clickable wireframes (hero + sections) */
.hero .device,.om-section .device{cursor:pointer}

/* HERO */
.hero__carousel{
  position:relative;
  min-height:var(--om-hero-h-fallback);
  min-height:var(--om-hero-h);
  max-height:100vh;
  max-height:100svh;
}
[data-bs-theme="dark"] .hero__carousel{box-shadow:0 40px 110px rgba(0,0,0,.45)}

.hero__item{
  position:relative;
  min-height:var(--om-hero-h-fallback);
  min-height:var(--om-hero-h);
  max-height:100vh;
  max-height:100svh;
  display:flex;
  align-items:center;
  overflow:hidden;
}

/* accent mapping (requested):
   - ticketing: blue (primary)
   - ordering: yellow (warning)
   - platform: info
   - 3D: success
*/
.hero__item--platform{--accent-rgb:var(--bs-info-rgb)}
.hero__item--order{--accent-rgb:var(--bs-warning-rgb)}
.hero__item--ticketing{--accent-rgb:var(--bs-primary-rgb)}
.hero__item--config{--accent-rgb:var(--bs-success-rgb)}

/* readability scrim */
.hero__item::before{
  content:"";
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,
    rgba(var(--bs-body-bg-rgb),.94) 0%,
    rgba(var(--bs-body-bg-rgb),.82) 48%,
    rgba(var(--bs-body-bg-rgb),.10) 84%,
    rgba(var(--bs-body-bg-rgb),.00) 100%);
}
@media (max-width:991.98px){
  .hero__item::before{
    background:linear-gradient(180deg,
      rgba(var(--bs-body-bg-rgb),.95) 0%,
      rgba(var(--bs-body-bg-rgb),.86) 62%,
      rgba(var(--bs-body-bg-rgb),.10) 100%);
  }
}

/* fill height for vertical centering */
.hero__container{
  position:relative;z-index:2;width:100%;
  min-height:var(--om-hero-h-fallback);
  min-height:var(--om-hero-h);
  max-height:100vh;
  max-height:100svh;
  display:flex;align-items:center;
  padding-top:clamp(1rem,2.5vh,2rem);
  padding-bottom:clamp(1rem,3vh,2.6rem);
}
.hero__row{width:100%}

/* hard fix for one-sided gap on very small screens */
@media (max-width:575.98px){
  .hero__container{padding-left:0!important;padding-right:0!important}
  .hero__row{margin-left:0!important;margin-right:0!important}
  .hero__text-col{padding-left:1rem!important;padding-right:1rem!important}
}

/* type */
.hero__kicker{letter-spacing:.10em}
.hero__title{font-size:clamp(1.75rem,2.8vw,3.1rem);line-height:1.05;margin:0}
.hero__lead{font-size:clamp(1rem,1.2vw,1.2rem);line-height:1.55}
@media (max-width:575.98px){.hero__lead{margin-bottom:.85rem!important}}
.hero__side{
  width:100%;max-width:520px;
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(12px,2.2vh,18px);
}

/* mini wireframes in hero (mobile): centered + cropped + fade */
.hero__mini-media{
  width:100%;
  display:flex;justify-content:center;align-items:center;
  margin:.75rem 0 .25rem;
  max-height:210px;
  overflow:hidden;
  position:relative;
}
.hero__mini-media .device{display:block;margin-inline:auto}
.hero__item--config .hero__mini-media{max-height:240px}

@supports ((-webkit-mask-image:linear-gradient(#000,#000)) or (mask-image:linear-gradient(#000,#000))){
  .hero__mini-media{
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 18px,#000 calc(100% - 18px),transparent 100%);
            mask-image:linear-gradient(to bottom,transparent 0,#000 18px,#000 calc(100% - 18px),transparent 100%);
  }
}
@supports not ((-webkit-mask-image:linear-gradient(#000,#000)) or (mask-image:linear-gradient(#000,#000))){
  .hero__mini-media::before,.hero__mini-media::after{
    content:"";position:absolute;left:0;right:0;height:22px;z-index:2;pointer-events:none
  }
  .hero__mini-media::before{top:0;background:linear-gradient(to bottom,rgba(var(--bs-body-bg-rgb),.92),rgba(var(--bs-body-bg-rgb),0))}
  .hero__mini-media::after{bottom:0;background:linear-gradient(to top,rgba(var(--bs-body-bg-rgb),.92),rgba(var(--bs-body-bg-rgb),0))}
}

/* numbered indicators */
.hero__indicators{gap:10px;margin:0;bottom:18px}
.hero__carousel .carousel-indicators [data-bs-target]{
  width:34px;height:34px;border-radius:999px;
  text-indent:0;margin:0;
  border:1px solid rgba(var(--bs-body-color-rgb),.18);
  background:rgba(var(--bs-body-bg-rgb),.55);
  color:rgba(var(--bs-body-color-rgb),.75);
  display:inline-flex;align-items:center;justify-content:center;
  font-weight:650;backdrop-filter:blur(10px);opacity:1;
}
[data-bs-theme="dark"] .hero__carousel .carousel-indicators [data-bs-target]{
  background:rgba(0,0,0,.35);
  border-color:rgba(255,255,255,.14);
  color:rgba(255,255,255,.78);
}
.hero__carousel .carousel-indicators [data-bs-target].active,
.hero__carousel .carousel-indicators [data-bs-target][aria-current="true"]{
  background:rgba(var(--om-accent-rgb),.22);
  border-color:rgba(var(--om-accent-rgb),.78);
  color:rgba(var(--om-accent-rgb),.98);
}
[data-bs-theme="dark"] .hero__carousel .carousel-indicators [data-bs-target].active,
[data-bs-theme="dark"] .hero__carousel .carousel-indicators [data-bs-target][aria-current="true"]{
  background:rgba(var(--om-accent-rgb),.28);
  border-color:rgba(var(--om-accent-rgb),.86);
  color:rgba(var(--om-accent-rgb),1);
}

/* carousel arrows */
.hero__nav{
  position:absolute;top:50%;transform:translateY(-50%);
  z-index:4;border:0;background:transparent;padding:.25rem;
}
.hero__nav--prev{left:.75rem}
.hero__nav--next{right:.75rem}
@media (max-width:767.98px){.hero__nav{display:none!important}}

.hero__navbtn{
  width:44px;height:44px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:1.25rem;backdrop-filter:blur(10px);
  background:rgba(var(--bs-body-bg-rgb),.55);
  box-shadow:0 16px 40px rgba(0,0,0,.16),inset 0 0 0 1px rgba(255,255,255,.08);
  color:rgba(var(--bs-body-color-rgb),.92);
}
[data-bs-theme="dark"] .hero__navbtn{
  background:rgba(0,0,0,.35);
  box-shadow:0 18px 46px rgba(0,0,0,.36),inset 0 0 0 1px rgba(255,255,255,.10);
  color:rgba(255,255,255,.92);
}
.hero__navbtn--sm{width:40px;height:40px;font-size:1.1rem}

/* pause/play bottom-left */
.hero__toggle{
  position:absolute;left:14px;bottom:14px;z-index:5;
  border:0;background:transparent;padding:0;
}
.hero__toggle:focus-visible .hero__navbtn{
  outline:2px solid rgba(var(--bs-primary-rgb),.55);
  outline-offset:2px;
}

/* progress bar */
.hero-progress{
  position:absolute;left:0;right:0;bottom:0;z-index:4;
  height:4px;background:rgba(var(--bs-body-color-rgb),.10);
}
.hero-progress__bar{
  height:100%;width:0%;
  background:rgba(var(--om-accent-rgb),.72);
  box-shadow:0 0 0 1px rgba(255,255,255,.10) inset;
}
.hero.is-progressing .hero-progress__bar{animation:hero-progress var(--om-progress-duration) linear forwards}
@keyframes hero-progress{from{width:0%}to{width:100%}}
.hero.is-paused .hero-progress__bar{animation-play-state:paused;opacity:.70}

/* background animation (mesh + circuit traces) */
.hero-bg,.om-section-bg{
  position:absolute;inset:-22%;
  z-index:0;opacity:.95;pointer-events:none;
  transform:translateZ(0);
}
.hero-bg--platform,.om-section-bg--platform{--accent-rgb:var(--bs-info-rgb)}
.hero-bg--order,.om-section-bg--order{--accent-rgb:var(--bs-warning-rgb)}
.hero-bg--ticketing,.om-section-bg--ticketing{--accent-rgb:var(--bs-primary-rgb)}
.hero-bg--config,.om-section-bg--config{--accent-rgb:var(--bs-success-rgb)}

.hero-bg::before,.hero-bg::after,.om-section-bg::before,.om-section-bg::after{
  content:"";position:absolute;inset:0;transform:translateZ(0);
}
.hero-bg::before,.om-section-bg::before{
  background-image:
    radial-gradient(circle at 18% 30%, rgba(var(--accent-rgb),.24), transparent 58%),
    radial-gradient(circle at 72% 22%, rgba(var(--accent-rgb),.16), transparent 62%),
    radial-gradient(circle at 58% 84%, rgba(var(--accent-rgb),.18), transparent 66%),
    linear-gradient(120deg, rgba(var(--accent-rgb),.08), transparent 60%);
  animation:bg-float 14s ease-in-out infinite;
}
.hero-bg::after,.om-section-bg::after{
  background-image:linear-gradient(180deg, rgba(var(--accent-rgb),.22), rgba(var(--accent-rgb),.10));
  opacity:.58;
  animation:circuit-drift 24s linear infinite;
}
@supports ((-webkit-mask-image:url("")) or (mask-image:url(""))){
  .hero-bg::after,.om-section-bg::after{
    -webkit-mask-image:var(--om-circuit-mask);
            mask-image:var(--om-circuit-mask);
    -webkit-mask-repeat:repeat;
            mask-repeat:repeat;
    -webkit-mask-size:340px 340px;
            mask-size:340px 340px;
  }
}
@supports not ((-webkit-mask-image:url("")) or (mask-image:url(""))){
  .hero-bg::after,.om-section-bg::after{
    background-image:radial-gradient(circle, rgba(var(--accent-rgb),.12) 1px, transparent 1px);
    background-size:22px 22px;
    opacity:.42;
    animation:grid-drift 22s linear infinite;
  }
}
@keyframes bg-float{
  0%{transform:translate3d(-2%,-1%,0) scale(1)}
  50%{transform:translate3d( 2%, 1%,0) scale(1.03)}
  100%{transform:translate3d(-2%,-1%,0) scale(1)}
}
@keyframes circuit-drift{
  0%{transform:translate3d(0,0,0) rotate(0deg)}
  100%{transform:translate3d(5%,-5%,0) rotate(6deg)}
}
@keyframes grid-drift{
  0%{transform:translate3d(0,0,0)}
  100%{transform:translate3d(6%,-6%,0)}
}

/* orb */
.om-orb{
  --orb-rgb:var(--bs-info-rgb);
  width:clamp(160px,22vw,220px);
  aspect-ratio:1;border-radius:999px;
  position:relative;display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  box-shadow:0 28px 80px rgba(0,0,0,.20), inset 0 0 0 1px rgba(255,255,255,.10);
  background:
    radial-gradient(circle at 30% 30%, rgba(var(--orb-rgb),.36), transparent 58%),
    radial-gradient(circle at 70% 75%, rgba(var(--orb-rgb),.22), transparent 60%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.10), rgba(0,0,0,.16));
}
[data-bs-theme="dark"] .om-orb{
  box-shadow:0 36px 110px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.12);
}
.om-orb::after{
  content:"";position:absolute;inset:-22%;
  background:
    radial-gradient(circle at 40% 40%, rgba(var(--orb-rgb),.50), transparent 45%),
    radial-gradient(circle at 70% 70%, rgba(var(--orb-rgb),.28), transparent 50%);
  filter:blur(18px);opacity:.65;
  animation:orb-glow 6.5s ease-in-out infinite;
}
@keyframes orb-glow{
  0%,100%{transform:scale(1);opacity:.58}
  50%{transform:scale(1.06);opacity:.78}
}
.om-orb__logo{position:relative;z-index:2;width:56%;height:auto;filter:drop-shadow(0 12px 30px rgba(0,0,0,.25))}
.om-orb--sm{width:clamp(120px,18vw,160px)}
.om-orb--platform{--orb-rgb:var(--bs-info-rgb)}

/* sections */
.om-section{background:rgba(var(--bs-body-bg-rgb),.72)}
@supports (backdrop-filter:blur(1px)){.om-section{backdrop-filter:blur(10px)}}
[data-bs-theme="dark"] .om-section{background:rgba(0,0,0,.26)}
.om-section__container{
  position:relative;z-index:2;
  padding-top:clamp(3rem,6vh,5rem);
  padding-bottom:clamp(1.25rem,2.6vh,2rem);
}
.om-h2{font-size:clamp(1.6rem,2.2vw,2.2rem);line-height:1.15}
.om-lead{font-size:clamp(1.02rem,1.15vw,1.15rem);line-height:1.6}
.om-points{
  list-style:none;padding-left:0;margin:0;
  display:grid;gap:.75rem;
}
.om-points li{
  display:flex;gap:.75rem;align-items:flex-start;
  color:rgba(var(--bs-body-color-rgb),.78);
}
.om-points i{margin-top:.2rem;font-size:1.05rem;color:rgba(var(--bs-body-color-rgb),.82)}

/* FAB nav (bottom-right) */
.om-fab-nav{
  position:fixed;
  right:calc(14px + env(safe-area-inset-right,0px));
  bottom:calc(14px + env(safe-area-inset-bottom,0px));
  z-index:1060;
  display:flex;flex-direction:column;gap:10px;
}
.om-fab-btn{
  width:46px;height:46px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  text-decoration:none;
  touch-action:manipulation;
  backdrop-filter:blur(10px);
  background:rgba(var(--bs-body-bg-rgb),.55);
  box-shadow:0 16px 40px rgba(0,0,0,.14), inset 0 0 0 1px rgba(255,255,255,.08);
  color:rgba(var(--bs-body-color-rgb),.92);
}
[data-bs-theme="dark"] .om-fab-btn{
  background:rgba(0,0,0,.35);
  box-shadow:0 18px 46px rgba(0,0,0,.32), inset 0 0 0 1px rgba(255,255,255,.10);
  color:rgba(255,255,255,.92);
}
.om-fab-btn:hover{transform:translateY(-1px)}
.om-fab-btn:active{transform:translateY(0)}
.om-fab-btn.is-hidden{display:none!important}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  .hero-bg::before,.hero-bg::after,.om-section-bg::before,.om-section-bg::after{animation:none!important}
  .hero.is-progressing .hero-progress__bar{animation:none!important;width:100%;opacity:.35}
  .om-orb::after{animation:none!important}
}