/* =========================================================
   ALTERA V2 — BLOCK 01 MOTION ONLY
   No geometry/layout changes. All later blocks stay static.
   ========================================================= */

:root{
  --b1-ease:cubic-bezier(.22,.61,.36,1);
}

.hero{
  overflow:hidden;
}

/* Portal glow: one controlled ignition on load. */
.hero::before{
  content:"";
  position:absolute;
  z-index:0;
  left:63%;
  top:42%;
  width:34vw;
  aspect-ratio:1;
  transform:translate(-50%,-50%) scale(.55);
  border-radius:50%;
  pointer-events:none;
  opacity:0;
  background:
    radial-gradient(circle,
      rgba(96,240,255,.20) 0%,
      rgba(54,186,255,.13) 23%,
      rgba(42,99,255,.05) 46%,
      transparent 68%);
  filter:blur(5px);
}

/* Diagonal light sweep through the whole hero. */
.hero::after{
  content:"";
  position:absolute;
  z-index:1;
  top:-28%;
  left:-30%;
  width:18%;
  height:160%;
  pointer-events:none;
  opacity:0;
  transform:rotate(19deg);
  background:
    linear-gradient(90deg,
      transparent,
      rgba(112,239,255,.05) 28%,
      rgba(112,239,255,.24) 50%,
      rgba(112,239,255,.06) 72%,
      transparent);
  filter:blur(7px);
}

html.b1-ready .hero.b1-play::before{
  animation:b1PortalIgnite 1500ms var(--b1-ease) 120ms 1 both;
}
html.b1-ready .hero.b1-play::after{
  animation:b1LightSweep 1550ms var(--b1-ease) 260ms 1 both;
}

@keyframes b1PortalIgnite{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.55)}
  40%{opacity:1}
  72%{opacity:.72;transform:translate(-50%,-50%) scale(1.08)}
  100%{opacity:.24;transform:translate(-50%,-50%) scale(1)}
}
@keyframes b1LightSweep{
  0%{left:-30%;opacity:0}
  15%{opacity:1}
  72%{opacity:.86}
  100%{left:118%;opacity:0}
}

/* Background itself stays in place. Only cinematic grading changes. */
.hero-art{
  transform:none!important;
  transition:filter 1300ms var(--b1-ease)!important;
}
html.b1-ready .hero .hero-art{
  filter:saturate(.80) contrast(1.03) brightness(.70);
}
html.b1-ready .hero.b1-play .hero-art{
  filter:saturate(.96) contrast(1.05) brightness(.82);
}

/* Grid wakes up after the portal. */
html.b1-ready .hero-grid{
  opacity:.02;
  transition:opacity 1000ms var(--b1-ease);
}
html.b1-ready .hero.b1-play .hero-grid{
  opacity:.12;
}

/* Text reveal by mask. No moving boxes, no layout shifts. */
html.b1-ready .hero .eyebrow,
html.b1-ready .hero h1,
html.b1-ready .hero .hero-lead,
html.b1-ready .hero .feature-row,
html.b1-ready .hero .hero-actions{
  clip-path:inset(0 100% 0 0);
  opacity:0;
}

html.b1-ready .hero.b1-play .eyebrow,
html.b1-ready .hero.b1-play h1,
html.b1-ready .hero.b1-play .hero-lead,
html.b1-ready .hero.b1-play .feature-row,
html.b1-ready .hero.b1-play .hero-actions{
  clip-path:inset(0 0 0 0);
  opacity:1;
  transition:
    clip-path 780ms var(--b1-ease),
    opacity 240ms ease;
}

html.b1-ready .hero.b1-play .eyebrow{transition-delay:120ms}
html.b1-ready .hero.b1-play h1{transition-delay:240ms}
html.b1-ready .hero.b1-play .hero-lead{transition-delay:420ms}
html.b1-ready .hero.b1-play .feature-row{transition-delay:580ms}
html.b1-ready .hero.b1-play .hero-actions{transition-delay:760ms}

/* Feature icon "charge". */
html.b1-ready .hero .feature-icon{
  position:relative;
  overflow:visible;
}
html.b1-ready .hero .feature-icon::after{
  content:"";
  position:absolute;
  inset:-6px;
  border:1px solid rgba(76,234,255,.58);
  border-radius:50%;
  opacity:0;
  transform:scale(.72);
  pointer-events:none;
}
html.b1-ready .hero.b1-play .feature:nth-child(1) .feature-icon::after{
  animation:b1IconCharge 700ms var(--b1-ease) 760ms 1 both;
}
html.b1-ready .hero.b1-play .feature:nth-child(2) .feature-icon::after{
  animation:b1IconCharge 700ms var(--b1-ease) 880ms 1 both;
}
html.b1-ready .hero.b1-play .feature:nth-child(3) .feature-icon::after{
  animation:b1IconCharge 700ms var(--b1-ease) 1000ms 1 both;
}
@keyframes b1IconCharge{
  0%{opacity:0;transform:scale(.72)}
  45%{opacity:1}
  100%{opacity:0;transform:scale(1.38)}
}

/* CTA gets a single premium sheen. */
.hero .btn-primary{
  position:relative;
  overflow:hidden;
}
.hero .btn-primary::after{
  content:"";
  position:absolute;
  top:-40%;
  left:-45%;
  width:26%;
  height:180%;
  transform:rotate(18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  opacity:0;
  pointer-events:none;
}
html.b1-ready .hero.b1-play .btn-primary::after{
  animation:b1ButtonSheen 900ms var(--b1-ease) 1250ms 1 both;
}
@keyframes b1ButtonSheen{
  0%{left:-45%;opacity:0}
  18%{opacity:.65}
  100%{left:125%;opacity:0}
}

/* Side-note and bottom rail arrive independently and calmly. */
html.b1-ready .hero-side-note,
html.b1-ready .hero-bottom{
  opacity:0;
  transition:opacity 700ms var(--b1-ease);
}
html.b1-ready .hero.b1-play .hero-side-note{
  opacity:1;
  transition-delay:950ms;
}
html.b1-ready .hero.b1-play .hero-bottom{
  opacity:1;
  transition-delay:1080ms;
}

/* Bottom handoff toward block 02. */
.hero .hero-bottom .line{
  transform-origin:left center;
  transform:scaleX(.10);
  opacity:.25;
}
html.b1-ready .hero.b1-play .hero-bottom .line{
  transform:scaleX(1);
  opacity:1;
  transition:
    transform 950ms var(--b1-ease) 1080ms,
    opacity 500ms ease 1080ms;
}

/* Scroll response: content recedes slightly while geometry stays locked. */
html.b1-ready .hero-content,
html.b1-ready .hero-side-note,
html.b1-ready .hero-bottom{
  transition:
    opacity 260ms linear,
    filter 260ms linear;
}
html.b1-ready .hero.b1-scrollout .hero-content,
html.b1-ready .hero.b1-scrollout .hero-side-note,
html.b1-ready .hero.b1-scrollout .hero-bottom{
  opacity:.58;
  filter:blur(.35px);
}

/* Micro interactions only after entrance. */
.hero .btn,
.hero .feature{
  transition:
    transform 180ms ease,
    filter 180ms ease,
    box-shadow 180ms ease;
}
.hero .btn:hover{
  transform:translateY(-2px);
  filter:brightness(1.06);
}
.hero .feature:hover{
  transform:translateY(-2px);
}

/* Mobile: keep it calmer and avoid heavy overlays. */
@media(max-width:760px){
  .hero::before{
    left:70%;
    top:38%;
    width:70vw;
  }
  .hero::after{
    width:28%;
  }
}

/* Accessibility */
@media(prefers-reduced-motion:reduce){
  .hero::before,
  .hero::after,
  .hero .feature-icon::after,
  .hero .btn-primary::after{
    display:none!important;
  }
  .hero-art{
    filter:saturate(.92) contrast(1.05) brightness(.82)!important;
  }
  html.b1-ready .hero .eyebrow,
  html.b1-ready .hero h1,
  html.b1-ready .hero .hero-lead,
  html.b1-ready .hero .feature-row,
  html.b1-ready .hero .hero-actions,
  html.b1-ready .hero-side-note,
  html.b1-ready .hero-bottom{
    clip-path:none!important;
    opacity:1!important;
    transition:none!important;
  }
  .hero .hero-bottom .line{
    transform:none!important;
    opacity:1!important;
  }
}


/* =========================================================
   BLOCK 01 V1.1 — HOVER / FOCUS MICRO-INTERACTIONS
   Only interaction polish. Layout and entrance motion unchanged.
   ========================================================= */

/* Main CTA: lift + stronger cyan glow + moving sheen */
.hero .btn-primary{
  position:relative;
  isolation:isolate;
  will-change:transform,box-shadow,filter;
}
.hero .btn-primary:hover,
.hero .btn-primary:focus-visible{
  transform:translate3d(0,-3px,0) scale(1.015);
  filter:brightness(1.07) saturate(1.06);
  box-shadow:
    0 12px 28px rgba(0,0,0,.22),
    0 0 0 1px rgba(111,241,255,.48),
    0 0 26px rgba(50,225,255,.28);
}
.hero .btn-primary:hover::after,
.hero .btn-primary:focus-visible::after{
  animation:b1ButtonHoverSheen 720ms var(--b1-ease) 1 both;
}
@keyframes b1ButtonHoverSheen{
  0%{left:-45%;opacity:0}
  20%{opacity:.75}
  100%{left:128%;opacity:0}
}

/* Secondary CTA: subtle nudge + border ignition */
.hero .btn-secondary{
  position:relative;
  overflow:hidden;
}
.hero .btn-secondary::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  opacity:0;
  background:radial-gradient(circle at 20% 50%,rgba(72,232,255,.18),transparent 48%);
  transition:opacity 180ms ease;
}
.hero .btn-secondary:hover,
.hero .btn-secondary:focus-visible{
  transform:translate3d(3px,-2px,0);
  border-color:rgba(89,236,255,.78);
  box-shadow:
    0 10px 24px rgba(0,0,0,.18),
    0 0 18px rgba(52,221,255,.14);
}
.hero .btn-secondary:hover::before,
.hero .btn-secondary:focus-visible::before{
  opacity:1;
}

/* Feature chips / icons: charge + tiny directional movement */
.hero .feature{
  position:relative;
  border-radius:14px;
  transition:
    transform 180ms ease,
    filter 180ms ease,
    box-shadow 180ms ease,
    background-color 180ms ease;
}
.hero .feature:hover,
.hero .feature:focus-within{
  transform:translate3d(4px,-3px,0);
  filter:brightness(1.06);
}
.hero .feature:hover .feature-icon,
.hero .feature:focus-within .feature-icon{
  color:#7bf3ff;
  border-color:rgba(88,236,255,.82);
  box-shadow:
    0 0 0 4px rgba(68,229,255,.08),
    0 0 20px rgba(60,225,255,.24);
}
.hero .feature:hover .feature-icon::after,
.hero .feature:focus-within .feature-icon::after{
  animation:b1FeatureHoverRing 720ms var(--b1-ease) 1 both;
}
@keyframes b1FeatureHoverRing{
  0%{opacity:0;transform:scale(.82)}
  42%{opacity:1}
  100%{opacity:0;transform:scale(1.48)}
}

/* Arrow / icon movement inside buttons when available */
.hero .btn:hover svg,
.hero .btn:focus-visible svg,
.hero .btn:hover .arrow,
.hero .btn:focus-visible .arrow{
  transform:translateX(4px);
}
.hero .btn svg,
.hero .btn .arrow{
  transition:transform 180ms ease;
}

/* Keep keyboard focus premium and obvious */
.hero .btn:focus-visible{
  outline:none;
  box-shadow:
    0 0 0 2px rgba(3,14,22,.95),
    0 0 0 4px rgba(87,236,255,.90),
    0 0 26px rgba(55,225,255,.22);
}

/* Touch devices should not get fake hover states */
@media (hover:none){
  .hero .btn-primary:hover,
  .hero .btn-secondary:hover,
  .hero .feature:hover{
    transform:none;
    filter:none;
    box-shadow:none;
  }
}

/* Reduced motion: keep only static state changes */
@media(prefers-reduced-motion:reduce){
  .hero .btn-primary:hover,
  .hero .btn-primary:focus-visible,
  .hero .btn-secondary:hover,
  .hero .btn-secondary:focus-visible,
  .hero .feature:hover,
  .hero .feature:focus-within{
    transform:none!important;
  }
  .hero .btn-primary:hover::after,
  .hero .btn-primary:focus-visible::after,
  .hero .feature:hover .feature-icon::after,
  .hero .feature:focus-within .feature-icon::after{
    animation:none!important;
  }
}


/* =========================================================
   BLOCK 01 V1.2 — PULSE ICONS + CALMER HOVER
   Requested refinement:
   - feature circles do NOT move on hover
   - slow continuous circular waves around feature icons
   - buttons only glow and scale slightly
   ========================================================= */

/* Cancel movement from V1.1 feature hover. */
.hero .feature:hover,
.hero .feature:focus-within{
  transform:none !important;
  filter:brightness(1.04);
}

/* Two soft rings create a continuous slow pulse around each icon. */
.hero .feature-icon{
  position:relative;
  isolation:isolate;
}
.hero .feature-icon::before,
.hero .feature-icon::after{
  content:"";
  position:absolute;
  inset:-7px;
  z-index:-1;
  border:1px solid rgba(80,235,255,.48);
  border-radius:50%;
  pointer-events:none;
  opacity:0;
  transform:scale(.86);
}

html.b1-ready .hero.b1-play .feature-icon::before{
  animation:b1SlowPulse 3.8s cubic-bezier(.22,.61,.36,1) infinite;
}
html.b1-ready .hero.b1-play .feature-icon::after{
  animation:b1SlowPulse 3.8s cubic-bezier(.22,.61,.36,1) 1.9s infinite;
}

/* Slight staggering between the three indicators so they don't pulse in lockstep. */
html.b1-ready .hero.b1-play .feature:nth-child(2) .feature-icon::before{
  animation-delay:.55s;
}
html.b1-ready .hero.b1-play .feature:nth-child(2) .feature-icon::after{
  animation-delay:2.45s;
}
html.b1-ready .hero.b1-play .feature:nth-child(3) .feature-icon::before{
  animation-delay:1.10s;
}
html.b1-ready .hero.b1-play .feature:nth-child(3) .feature-icon::after{
  animation-delay:3s;
}

@keyframes b1SlowPulse{
  0%{
    opacity:0;
    transform:scale(.86);
    border-color:rgba(80,235,255,.44);
  }
  16%{
    opacity:.62;
  }
  68%{
    opacity:.16;
  }
  100%{
    opacity:0;
    transform:scale(1.56);
    border-color:rgba(80,235,255,.08);
  }
}

/* Hover doesn't move the icon. It simply intensifies the light. */
.hero .feature:hover .feature-icon,
.hero .feature:focus-within .feature-icon{
  transform:none !important;
  color:#8af5ff;
  border-color:rgba(95,241,255,.92);
  box-shadow:
    0 0 0 4px rgba(68,229,255,.08),
    0 0 22px rgba(60,225,255,.28);
}

/* Buttons: no positional shift. Only a tiny scale + illumination. */
.hero .btn-primary:hover,
.hero .btn-primary:focus-visible{
  transform:scale(1.025) !important;
  filter:brightness(1.10) saturate(1.06);
  box-shadow:
    0 10px 28px rgba(0,0,0,.20),
    0 0 0 1px rgba(111,241,255,.52),
    0 0 30px rgba(50,225,255,.32) !important;
}

.hero .btn-secondary:hover,
.hero .btn-secondary:focus-visible{
  transform:scale(1.018) !important;
  filter:brightness(1.06);
  border-color:rgba(89,236,255,.84);
  box-shadow:
    0 8px 24px rgba(0,0,0,.16),
    0 0 20px rgba(52,221,255,.16) !important;
}

/* Stop arrow translation inherited from V1.1. */
.hero .btn:hover svg,
.hero .btn:focus-visible svg,
.hero .btn:hover .arrow,
.hero .btn:focus-visible .arrow{
  transform:none !important;
}

/* Touch devices: no sticky scale state. */
@media (hover:none){
  .hero .btn-primary:hover,
  .hero .btn-secondary:hover{
    transform:none !important;
    filter:none;
    box-shadow:none !important;
  }
}

/* Accessibility: remove continuous waves for reduced motion. */
@media(prefers-reduced-motion:reduce){
  .hero .feature-icon::before,
  .hero .feature-icon::after{
    animation:none !important;
    opacity:0 !important;
  }
  .hero .btn-primary:hover,
  .hero .btn-primary:focus-visible,
  .hero .btn-secondary:hover,
  .hero .btn-secondary:focus-visible{
    transform:none !important;
  }
}


/* =========================================================
   BLOCK 01 V1.3 — CONSTANT PULSE + GLASS BUTTON HOVER
   ========================================================= */

/* --- Feature icons: ALWAYS pulse, NEVER react to hover --- */
.hero .feature,
.hero .feature:hover,
.hero .feature:focus-within{
  transform:none !important;
  filter:none !important;
  box-shadow:none !important;
  background:transparent !important;
}

.hero .feature-icon,
.hero .feature:hover .feature-icon,
.hero .feature:focus-within .feature-icon{
  transform:none !important;
  color:inherit !important;
  border-color:inherit !important;
  box-shadow:none !important;
}

/* Rebuild the two pulse rings with a slow endless rhythm. */
.hero .feature-icon::before,
.hero .feature-icon::after{
  content:"";
  position:absolute;
  inset:-8px;
  z-index:-1;
  border:1px solid rgba(83,236,255,.42);
  border-radius:50%;
  pointer-events:none;
  opacity:0;
  transform:scale(.86);
  animation:b1ConstantPulse 4.4s cubic-bezier(.22,.61,.36,1) infinite !important;
}
.hero .feature-icon::after{
  animation-delay:2.2s !important;
}

/* Keep the three circles a little asynchronous. */
.hero .feature:nth-child(2) .feature-icon::before{animation-delay:.7s !important}
.hero .feature:nth-child(2) .feature-icon::after{animation-delay:2.9s !important}
.hero .feature:nth-child(3) .feature-icon::before{animation-delay:1.4s !important}
.hero .feature:nth-child(3) .feature-icon::after{animation-delay:3.6s !important}

@keyframes b1ConstantPulse{
  0%{
    opacity:0;
    transform:scale(.86);
    border-color:rgba(83,236,255,.40);
  }
  14%{
    opacity:.56;
  }
  62%{
    opacity:.14;
  }
  100%{
    opacity:0;
    transform:scale(1.62);
    border-color:rgba(83,236,255,.04);
  }
}

/* --- Buttons: no clipping, no movement, just scale + inner/outer glow --- */
.hero .hero-actions{
  overflow:visible !important;
}
.hero .btn{
  position:relative;
  overflow:hidden !important;
  transform-origin:center;
  will-change:transform,filter,box-shadow;
  backface-visibility:hidden;
}

/* Prevent parent containers from clipping the scaled button/glow. */
.hero .hero-content,
.hero .hero-actions,
.hero .btn-row{
  overflow:visible !important;
}

/* Glass layer shared by both buttons. */
.hero .btn::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  opacity:0;
  background:
    linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.02) 46%,rgba(255,255,255,.00)),
    radial-gradient(circle at 30% 10%,rgba(190,251,255,.20),transparent 44%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(255,255,255,.04);
  transition:opacity 180ms ease;
}

/* Moving light wave inside button. */
.hero .btn::after{
  content:"";
  position:absolute;
  top:-60%;
  left:-48%;
  width:34%;
  height:220%;
  pointer-events:none;
  opacity:0;
  transform:rotate(16deg);
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(255,255,255,.04) 18%,
      rgba(214,252,255,.58) 50%,
      rgba(255,255,255,.06) 82%,
      transparent 100%
    );
  filter:blur(1px);
}

/* Main CTA hover. */
.hero .btn-primary:hover,
.hero .btn-primary:focus-visible{
  transform:scale(1.028) !important;
  filter:brightness(1.08) saturate(1.04);
  box-shadow:
    0 0 0 1px rgba(124,243,255,.38),
    0 12px 30px rgba(0,0,0,.18),
    0 0 26px rgba(51,224,255,.28),
    0 0 44px rgba(42,201,255,.10) !important;
}
.hero .btn-primary:hover::before,
.hero .btn-primary:focus-visible::before{
  opacity:1;
}
.hero .btn-primary:hover::after,
.hero .btn-primary:focus-visible::after{
  animation:b1ButtonGlassWave 850ms var(--b1-ease) 1 both !important;
}

/* Secondary CTA hover: same logic, slightly calmer. */
.hero .btn-secondary:hover,
.hero .btn-secondary:focus-visible{
  transform:scale(1.022) !important;
  filter:brightness(1.06);
  border-color:rgba(96,236,255,.80) !important;
  box-shadow:
    0 0 0 1px rgba(94,235,255,.22),
    0 10px 26px rgba(0,0,0,.16),
    0 0 22px rgba(50,221,255,.18) !important;
}
.hero .btn-secondary:hover::before,
.hero .btn-secondary:focus-visible::before{
  opacity:.92;
}
.hero .btn-secondary:hover::after,
.hero .btn-secondary:focus-visible::after{
  animation:b1ButtonGlassWave 900ms var(--b1-ease) 1 both !important;
}

@keyframes b1ButtonGlassWave{
  0%{
    left:-48%;
    opacity:0;
  }
  15%{
    opacity:.78;
  }
  100%{
    left:122%;
    opacity:0;
  }
}

/* No arrow motion. */
.hero .btn:hover svg,
.hero .btn:focus-visible svg,
.hero .btn:hover .arrow,
.hero .btn:focus-visible .arrow{
  transform:none !important;
}

/* Prevent clipping on common wrappers around the hero CTAs. */
.hero,
.hero-inner,
.hero-content,
.hero-actions,
.hero-actions > *,
.hero .btn-row{
  overflow:visible;
}

/* Touch devices: keep the entrance motion but disable hover-only effects. */
@media (hover:none){
  .hero .btn-primary:hover,
  .hero .btn-secondary:hover{
    transform:none !important;
    filter:none !important;
    box-shadow:none !important;
  }
  .hero .btn:hover::before,
  .hero .btn:hover::after{
    opacity:0 !important;
    animation:none !important;
  }
}

/* Reduced motion: no endless rings, but keep static hover glow. */
@media(prefers-reduced-motion:reduce){
  .hero .feature-icon::before,
  .hero .feature-icon::after{
    animation:none !important;
    opacity:0 !important;
  }
  .hero .btn-primary:hover,
  .hero .btn-primary:focus-visible,
  .hero .btn-secondary:hover,
  .hero .btn-secondary:focus-visible{
    transform:none !important;
  }
  .hero .btn:hover::after,
  .hero .btn:focus-visible::after{
    animation:none !important;
  }
}


/* =========================================================
   BLOCK 01 V1.4 — BUTTONS FINAL POLISH
   - no clipping
   - stronger glass effect
   - moving light wave on BOTH buttons
   - blue primary stays blue, secondary stays outlined
   ========================================================= */

/* Give the scaled buttons real breathing room.
   The previous versions were still being clipped by nearby wrappers. */
.hero-actions{
  overflow:visible !important;
  padding:12px 12px 14px !important;
  margin:-12px -12px -14px !important;
}
.hero-actions,
.hero-actions > *,
.hero-content,
.hero-inner,
.hero-shell,
.hero-copy{
  overflow:visible !important;
}

/* Keep the buttons themselves clipped internally only,
   so the glass wave stays inside the button while outer glow stays visible
   through a wrapper-safe drop shadow. */
.hero .btn{
  isolation:isolate;
  overflow:hidden !important;
  transform-origin:center center;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}

/* External glow uses filter drop-shadow to avoid getting cut by the button box. */
.hero .btn-primary:hover,
.hero .btn-primary:focus-visible{
  transform:scale(1.035) !important;
  filter:
    brightness(1.10)
    saturate(1.08)
    drop-shadow(0 0 10px rgba(71,231,255,.44))
    drop-shadow(0 0 22px rgba(38,201,255,.25)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -1px 0 rgba(255,255,255,.08),
    0 0 0 1px rgba(143,247,255,.34) !important;
}

/* Secondary gets the SAME glass/wave logic, but retains outlined styling. */
.hero .btn-secondary:hover,
.hero .btn-secondary:focus-visible{
  transform:scale(1.035) !important;
  filter:
    brightness(1.12)
    saturate(1.05)
    drop-shadow(0 0 10px rgba(67,228,255,.28))
    drop-shadow(0 0 20px rgba(39,188,255,.17)) !important;
  border-color:rgba(98,240,255,.92) !important;
  background:
    linear-gradient(180deg,rgba(18,49,68,.72),rgba(5,21,35,.82)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(255,255,255,.04),
    0 0 0 1px rgba(96,235,255,.12) !important;
}

/* Stronger glass layer for both buttons. */
.hero .btn::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  border-radius:inherit;
  pointer-events:none;
  opacity:0;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.18) 0%,
      rgba(255,255,255,.06) 30%,
      rgba(255,255,255,.015) 60%,
      rgba(255,255,255,.00) 100%
    ),
    radial-gradient(circle at 24% 10%,rgba(210,253,255,.20),transparent 48%);
  transition:opacity 160ms ease;
}
.hero .btn-primary:hover::before,
.hero .btn-primary:focus-visible::before,
.hero .btn-secondary:hover::before,
.hero .btn-secondary:focus-visible::before{
  opacity:1 !important;
}

/* Brighter moving light wave on BOTH buttons. */
.hero .btn::after{
  content:"";
  position:absolute;
  z-index:2;
  top:-70%;
  left:-58%;
  width:34%;
  height:240%;
  pointer-events:none;
  opacity:0;
  transform:rotate(17deg);
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(255,255,255,.04) 18%,
      rgba(226,253,255,.30) 35%,
      rgba(255,255,255,.86) 50%,
      rgba(216,252,255,.28) 66%,
      rgba(255,255,255,.04) 82%,
      transparent 100%
    );
  filter:blur(.5px);
}

.hero .btn-primary:hover::after,
.hero .btn-primary:focus-visible::after,
.hero .btn-secondary:hover::after,
.hero .btn-secondary:focus-visible::after{
  animation:b1ButtonGlassWaveStrong 930ms var(--b1-ease) 1 both !important;
}

@keyframes b1ButtonGlassWaveStrong{
  0%{
    left:-58%;
    opacity:0;
  }
  12%{
    opacity:.88;
  }
  88%{
    opacity:.72;
  }
  100%{
    left:128%;
    opacity:0;
  }
}

/* Keep text/icons above the glass and wave. */
.hero .btn > *{
  position:relative;
  z-index:3;
}

/* No directional movement, ever. */
.hero .btn:hover svg,
.hero .btn:focus-visible svg,
.hero .btn:hover .arrow,
.hero .btn:focus-visible .arrow{
  transform:none !important;
}

/* Touch: no sticky hover enlargement. */
@media (hover:none){
  .hero .btn-primary:hover,
  .hero .btn-secondary:hover{
    transform:none !important;
    filter:none !important;
  }
  .hero .btn:hover::before,
  .hero .btn:hover::after{
    opacity:0 !important;
    animation:none !important;
  }
}

/* Reduced motion keeps only the static glow, no sweep. */
@media(prefers-reduced-motion:reduce){
  .hero .btn-primary:hover,
  .hero .btn-primary:focus-visible,
  .hero .btn-secondary:hover,
  .hero .btn-secondary:focus-visible{
    transform:none !important;
  }
  .hero .btn-primary:hover::after,
  .hero .btn-primary:focus-visible::after,
  .hero .btn-secondary:hover::after,
  .hero .btn-secondary:focus-visible::after{
    animation:none !important;
    opacity:0 !important;
  }
}


/* =========================================================
   BLOCK 01 V1.5 — BUTTON POSITION + ROUNDED GLOW FIX
   ========================================================= */

/* Remove the negative margins from V1.4 that pulled the buttons upward
   into the feature row. Keep real spacing between features and CTAs. */
.hero .hero-actions{
  overflow:visible !important;
  margin:18px 0 0 !important;
  padding:8px 12px 14px !important;
  position:relative;
  z-index:4;
}

.hero .feature-row{
  position:relative;
  z-index:3;
  margin-bottom:0 !important;
}

/* Do not use filter/drop-shadow: it created a square-looking light blob.
   Rounded box-shadows respect the button radius. */
.hero .btn-primary:hover,
.hero .btn-primary:focus-visible{
  transform:scale(1.025) !important;
  filter:brightness(1.08) saturate(1.05) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -1px 0 rgba(255,255,255,.08),
    0 0 0 1px rgba(142,247,255,.38),
    0 0 14px rgba(66,231,255,.34),
    0 0 28px rgba(42,201,255,.18),
    0 12px 26px rgba(0,0,0,.18) !important;
}

.hero .btn-secondary:hover,
.hero .btn-secondary:focus-visible{
  transform:scale(1.025) !important;
  filter:brightness(1.08) !important;
  border-color:rgba(103,241,255,.92) !important;
  background:
    linear-gradient(180deg,rgba(17,47,65,.68),rgba(5,20,33,.84)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(255,255,255,.05),
    0 0 0 1px rgba(96,235,255,.22),
    0 0 13px rgba(66,229,255,.24),
    0 0 25px rgba(42,190,255,.13),
    0 10px 24px rgba(0,0,0,.16) !important;
}

/* Rounded glass wash, same shape as each button. */
.hero .btn::before{
  border-radius:inherit !important;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.18) 0%,
      rgba(255,255,255,.07) 28%,
      rgba(255,255,255,.018) 58%,
      rgba(255,255,255,0) 100%
    ),
    radial-gradient(circle at 24% 12%,rgba(220,254,255,.18),transparent 44%) !important;
}

/* Light wave stays clipped INSIDE the rounded button only. */
.hero .btn{
  overflow:hidden !important;
  border-radius:inherit;
}

/* Give the row enough air so scaling never collides with the feature circles. */
@media (min-width:761px){
  .hero .hero-actions{
    margin-top:22px !important;
  }
}

/* On small screens keep a little less spacing, but still no overlap. */
@media (max-width:760px){
  .hero .hero-actions{
    margin-top:16px !important;
    padding-top:6px !important;
  }
}