/* OndaFlix — rhythm, light surfaces and the Contaí glass-button material.
   Reference examined: https://contaiassessor.com/, .ct-btn family.
   Material and edge lighting retained; accent adapted to OndaFlix ocean blue.
   Decorative section waves are static SVGs; no scroll listeners or shaders. */

:root {
  --glass-spring: cubic-bezier(.2,.8,.2,1);
  --ocean-light: #eef6fa;
}

.button,
.hero .button,
.plan-card .button,
.mobile-offer > .button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 999px;
  gap: 10px;
  background: linear-gradient(rgba(75,220,255,.96),rgba(15,187,237,.94));
  color: #042338;
  border: 1px solid rgba(8,34,48,.12);
  box-shadow: 0 12px 34px -10px rgba(16,189,237,.55);
  backdrop-filter: blur(8px) brightness(1.06);
  -webkit-backdrop-filter: blur(8px) brightness(1.06);
  transition: transform .3s var(--glass-spring),box-shadow .3s,
    background .25s,border-color .25s;
}

.button::before,
.button::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
}

.button::before {
  box-shadow:
    inset 2px -2px 1px -1px rgba(255,255,255,.65),
    inset -2px 2px 1px -1px rgba(255,255,255,.65),
    inset 6px -6px 1px -6px rgba(255,255,255,.38),
    inset -6px 6px 1px -6px rgba(255,255,255,.38),
    inset 0 0 2px rgba(0,0,0,.4);
}

.button::after {
  opacity: .5;
  filter: blur(7px);
  background: linear-gradient(45deg,rgba(255,255,255,.75),transparent 16%,
    transparent 84%,rgba(255,255,255,.75));
  transition: opacity .25s linear,transform .25s linear;
}

.button:active { transform: scale(.98); }
.button svg { transition: transform .3s var(--glass-spring); }

.button.button-outline,
.hero .button.button-outline,
.plan-card .button.button-outline {
  color: #eef7fd;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.23);
  box-shadow: 0 8px 22px -14px rgba(0,0,0,.45);
}

.hero-actions .button { min-height: 58px; font-size: 13px; }
.plan-card .button { font-size: 12px; padding-inline: 18px; }
.button-small { font-size: 12px; }
.mobile-offer > .button { font-size: 12px; }

/* Three light pauses: introduction, device guidance and the buying decision. */
.light-band {
  --text: #0b2a40;
  --muted: #466477;
  --line: rgba(24,74,104,.16);
  --cyan: #007b9f;
  color: var(--text);
  position: relative;
  z-index: 1;
  isolation: isolate;
  background: var(--ocean-light);
}

/* The waves overlap only the generous empty margins of adjacent sections. */
.light-band::before,
.light-band::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 96px;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0 66C240 112 360 20 650 45S1090 120 1440 48V120H0Z' fill='%23eef6fa'/%3E%3Cpath d='M0 51C240 97 360 5 650 30S1090 105 1440 33' fill='none' stroke='%231cc2e9' stroke-opacity='.17' stroke-width='1'/%3E%3Cpath d='M0 39C240 85 360-7 650 18S1090 93 1440 21' fill='none' stroke='%2368d7ed' stroke-opacity='.09' stroke-width='1'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}
.light-band::before { top: -94px; }
.light-band::after { bottom: -94px; transform: rotate(180deg); }
.light-band h2 span { color: #007d9f; }
.light-band .eyebrow { color: #007b9f; }
.light-band .text-link { color: #006f92; }
.light-band .text-link:hover { color: #03445d; }
.light-band .live-dot { background: #008ab0; box-shadow: 0 0 10px #008ab025; }
.light-band :focus-visible { outline: 3px solid #075e7a; outline-offset: 5px; }
.light-band .featured :focus-visible,
.light-band .vsl-stage :focus-visible { outline-color: #70e6ff; }

.light-band .button.button-outline {
  color: #123b52;
  border-color: #adc5d3;
  background: rgba(255,255,255,.58);
  box-shadow: 0 8px 22px -14px rgba(20,53,73,.32);
}

.light-band .presentation { padding-block: 90px 105px; }
.light-band .presentation-copy > p { color: #466477; }
.light-band .vsl-caption { color: #466477; }
.light-band .vsl-caption strong { color: #14374e; }
.light-band .vsl-stage {
  color: #f4f8fc;
  border-color: #8aafc4;
  box-shadow: 0 30px 65px -25px #103e5a45,0 1px 0 #fff;
}

.light-band .devices { padding-block: 110px 105px; }
.light-band .device-tabs {
  background: #deecf4;
  border-color: #bdcfdb;
  box-shadow: inset 0 1px 3px #173e5010;
}
.light-band .device-tabs button { color: #355d75; }
.light-band .device-tabs button[aria-selected="true"] {
  color: #0b354d;
  background: #fff;
  box-shadow: 0 3px 8px #244b6310,inset 0 1px 0 #fff;
}
.light-band .device-panel > span { color: #496b83; }
.light-band .device-note { color: #466477; }
.light-band .tv-screen,
.light-band .phone-mock { color: #f4f8fc; }
.light-band .tv-screen { border-color: #1f384b; box-shadow: 0 25px 55px -20px #193e5d60; }
.light-band .phone-mock { box-shadow: 0 15px 35px -10px #173a5460; }
.light-band .device-orbit { background: radial-gradient(ellipse at 45% 50%,#26c5ed22,transparent 67%); }

.light-band .pricing { padding-block: 90px 100px; }
.light-band .pricing-selection { color: #49667a; background: #ffffff70; border-color: #c7dbe6; }
.light-band .plan-card {
  background: linear-gradient(160deg,#ffffff,#f7fbfd);
  border-color: #c4d8e4;
  box-shadow: 0 12px 32px -24px #1d557b40,inset 0 1px 0 #fff;
}
.light-band .plan-kicker { color: #506c80; }
.light-band .plan-description { color: #49667a; }
.light-band .price-period { color: #536f82; }
.light-band .plan-card li { color: #3e5c70; }
.light-band .plan-bottom { color: #49667a; }
.light-band .plan-ribbon {
  color: #062c40;
  background: linear-gradient(#62e0fb,#27c7ee);
  box-shadow: inset 0 1px 0 #ffffffa0,0 6px 18px -8px #109dc05a;
  border-radius: 999px;
}
.light-band .plan-card.featured {
  --text: #f4f8fc;
  --muted: #b2cbdc;
  --line: rgba(162,210,235,.2);
  --cyan: #43d6fb;
  color: #f4f8fc;
  background: radial-gradient(ellipse at 100% 0%,#17658a66,transparent 65%),#0b2639;
  border-color: #2c819f;
  box-shadow: 0 18px 40px -20px #06456960;
}
.light-band .featured .plan-kicker { color: #8bcee4; }
.light-band .featured .plan-description,
.light-band .featured .price-period,
.light-band .featured .plan-card li,
.light-band .featured li,
.light-band .featured .plan-bottom { color: #b2cbdc; }
.light-band .pricing-note { color: #4e6a7e; }
.light-band .pricing-trial > span { color: #436174; }
.light-band .pricing-trial strong { color: #12364e; }

/* Same background tones meet under the fluid light/dark transitions. */
.servers-section,.trial-section,.final-section { border-block: 0; }
.servers-section { padding-block: 135px; }
.trial-inner { padding-block: 115px; }
.faq-section { padding-top: 130px; }

/* Motion uses small distances, opacity and transforms. Never hijack scrolling. */
.js-motion .reveal {
  transform: translateY(14px);
  transition: opacity .52s ease,transform .52s cubic-bezier(.2,.8,.2,1);
}
.js-motion .reveal.visible { transform: none; }

@media (hover:hover) and (pointer:fine) {
  .button:hover,
  .hero .button:hover,
  .plan-card .button:hover,
  .mobile-offer > .button:hover {
    transform: translateY(-2px);
    background: linear-gradient(rgba(100,229,255,.98),rgba(29,198,244,.97));
    box-shadow: 0 18px 38px -12px rgba(16,189,237,.66);
  }
  .button:hover::after { opacity: .9; transform: scale(1.04); }
  .button:hover svg { transform: translateX(3px); }
  .button.button-outline:hover,
  .hero .button.button-outline:hover,
  .plan-card .button.button-outline:hover {
    background: rgba(255,255,255,.1);
    border-color: #afdaed;
    box-shadow: 0 8px 22px -14px rgba(0,0,0,.45);
  }
  .light-band .button.button-outline:hover {
    background: rgba(255,255,255,.9);
    border-color: #59869f;
  }
}

@media (max-width:800px) {
  .light-band .presentation { padding-block: 80px 90px; }
  .light-band .devices { padding-block: 100px 90px; }
  .hero-actions .button { min-height: 54px; font-size: 13px; }
  .plan-card .button { padding-inline: 14px; font-size: 11px; }
  .faq-section { padding-top: 120px; }
}
@media (max-width:600px) {
  .light-band::before,.light-band::after { height: 56px; }
  .light-band::before { top: -54px; }
  .light-band::after { bottom: -54px; }
  .light-band .presentation { padding-block: 58px 65px; }
  .light-band .devices { padding-block: 70px 65px; }
  .light-band .pricing { padding-block: 65px; }
  .servers-section { padding-block: 100px 105px; }
  .trial-inner { padding-block: 80px; }
  .faq-section { padding-top: 100px; }
  .hero-actions .button { min-height: 54px; font-size: 13px; }
  .plan-card .button { min-height: 50px; font-size: 12px; }
  .mobile-offer > .button { font-size: 11px; }
  .light-band .pricing-note { font-size: 10px; }
}
@media (hover:none), (pointer:coarse) {
  .button,.hero .button,.plan-card .button,.mobile-offer > .button {
    backdrop-filter: blur(4px) brightness(1.06);
    -webkit-backdrop-filter: blur(4px) brightness(1.06);
  }
  .button:hover,.server-card:hover { transform: none; }
  .poster:hover img { transform: none; }
  .poster-live:hover img { transform: scale(1.05); }
}
@media (prefers-reduced-motion:reduce) {
  .button,.button::after,.button svg,.js-motion .reveal { transition: none; }
  .js-motion .reveal { opacity: 1; transform: none; }
}
.reduce-motion .button,
.reduce-motion .button::after,
.reduce-motion .button svg { transition: none!important; }