/* Premium Marketing Hero CTAs | 2026-10-24
   Scoped to two existing hero links. Keeps URLs, keyboard access, RTL and layout. */
.hero .hero-actions {
  isolation:isolate;
  gap:15px!important;
}
.hero .hero-actions a.hero-btn {
  position:relative!important;
  isolation:isolate;
  overflow:hidden;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:64px!important;
  height:auto!important;
  padding:10px 17px!important;
  border-radius:19px!important;
  font-family:"Cairo",system-ui,sans-serif!important;
  font-size:14px!important;
  line-height:1.65!important;
  font-weight:900!important;
  text-decoration:none!important;
  transform:translate3d(0,0,0);
  transition:
    transform .35s cubic-bezier(.2,.85,.2,1),
    box-shadow .35s ease,
    border-color .35s ease,
    background .35s ease!important;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.hero .hero-actions a.hero-btn > :is(.hero-btn-text,.hero-icon) {
  position:relative;
  z-index:2;
}
.hero .hero-actions a.hero-btn .hero-btn-text {
  display:block!important;
  white-space:normal!important;
  line-height:1.5!important;
  letter-spacing:0!important;
  text-shadow:none;
}
.hero .hero-actions a.hero-btn-primary {
  flex-direction:row!important;
  min-width:236px!important;
  gap:17px!important;
  border:1px solid rgba(255,239,202,.67)!important;
  color:#0a203b!important;
  background:
    linear-gradient(125deg,#fff1bd 0%,#f5d38a 27%,#e3ad55 70%,#f5d290 100%)!important;
  box-shadow:
    0 15px 33px rgba(217,155,56,.24),
    0 0 0 1px rgba(255,255,255,.25) inset,
    0 1px 0 rgba(255,255,255,.8) inset!important;
}
.hero .hero-actions a.hero-btn-primary::before {
  content:"";
  position:absolute;
  z-index:1;
  pointer-events:none;
  top:-60%;
  bottom:-60%;
  left:-65%;
  width:36%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.68),transparent);
  transform:skewX(-24deg);
  animation:tyz-cta-sheen 6.8s ease-in-out 1.2s infinite;
}
.hero .hero-actions a.hero-btn-primary .primary-icon {
  flex:0 0 41px!important;
  width:41px!important;
  height:41px!important;
  border:1px solid rgba(255,255,255,.13)!important;
  border-radius:13px!important;
  background:linear-gradient(135deg,#14385b,#071b33)!important;
  color:#f9d791!important;
  box-shadow:0 5px 12px rgba(13,30,54,.2)!important;
  font-size:19px!important;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease!important;
}
.hero .hero-actions a.hero-btn-secondary {
  flex-direction:row-reverse!important;
  min-width:177px!important;
  gap:13px!important;
  border:1px solid rgba(235,191,111,.52)!important;
  color:#f9f8f4!important;
  background:linear-gradient(120deg,rgba(17,44,70,.92),rgba(9,29,55,.84))!important;
  -webkit-backdrop-filter:blur(16px) saturate(1.3)!important;
  backdrop-filter:blur(16px) saturate(1.3)!important;
  box-shadow:
    0 15px 32px rgba(0,0,0,.22),
    0 1px 0 rgba(255,255,255,.12) inset,
    0 0 0 1px rgba(243,202,131,.07) inset!important;
}
.hero .hero-actions a.hero-btn-secondary::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:radial-gradient(circle at 90% 0%,rgba(243,193,101,.20),transparent 55%);
  opacity:.72;
  transition:opacity .35s ease;
}
.hero .hero-actions a.hero-btn-secondary .secondary-icon {
  flex:0 0 41px!important;
  width:41px!important;
  height:41px!important;
  display:grid!important;
  place-items:center!important;
  border:1px solid rgba(233,186,104,.4)!important;
  border-radius:13px!important;
  background:linear-gradient(140deg,rgba(232,186,105,.18),rgba(239,191,109,.045))!important;
  color:#ffde9e!important;
  box-shadow:0 3px 11px rgba(0,0,0,.12)!important;
  font-size:18px!important;
  transition:transform .35s ease,background .35s ease!important;
}
@media (hover:hover) and (pointer:fine) {
  .hero .hero-actions a.hero-btn-primary:hover {
    transform:translate3d(0,-4px,0)!important;
    box-shadow:
      0 21px 48px rgba(224,170,68,.36),
      0 0 24px rgba(243,200,117,.18),
      0 1px 0 rgba(255,255,255,.7) inset!important;
  }
  .hero .hero-actions a.hero-btn-primary:hover .primary-icon {
    transform:translate3d(-3px,-3px,0)!important;
    box-shadow:0 8px 16px rgba(10,32,60,.25)!important;
  }
  .hero .hero-actions a.hero-btn-secondary:hover {
    transform:translate3d(0,-4px,0)!important;
    border-color:rgba(250,210,140,.85)!important;
    background:linear-gradient(120deg,rgba(24,60,88,.96),rgba(12,39,72,.9))!important;
    box-shadow:
      0 19px 44px rgba(0,0,0,.32),
      0 0 22px rgba(238,182,86,.16),
      0 1px 0 rgba(255,255,255,.2) inset!important;
  }
  .hero .hero-actions a.hero-btn-secondary:hover::before {opacity:1}
  .hero .hero-actions a.hero-btn-secondary:hover .secondary-icon {
    transform:translate3d(0,3px,0)!important;
    background:rgba(235,185,91,.22)!important;
  }
}
.hero .hero-actions a.hero-btn:active {
  transform:translate3d(0,1px,0) scale(.985)!important;
  transition-duration:.12s!important;
}
.hero .hero-actions a.hero-btn:focus-visible {
  outline:3px solid #fff0c0!important;
  outline-offset:4px!important;
}
@keyframes tyz-cta-sheen {
  0%,66% {left:-65%;opacity:0}
  73% {opacity:.88}
  87%,100% {left:125%;opacity:0}
}
@media(max-width:650px){
  .hero .hero-actions {gap:12px!important}
  .hero .hero-actions a.hero-btn {
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    min-height:57px!important;
    padding:9px 14px!important;
    font-size:14px!important;
    border-radius:16px!important;
    justify-content:center!important;
  }
  .hero .hero-actions a.hero-btn .hero-icon {
    width:38px!important;height:38px!important;flex-basis:38px!important;
    border-radius:11px!important;
  }
  .hero .hero-actions a.hero-btn-primary::before {animation-duration:9s}
}
@media(max-width:359px){
  .hero .hero-actions a.hero-btn {font-size:13px!important;padding-inline:10px!important}
}
@media(prefers-reduced-motion:reduce){
  .hero .hero-actions a.hero-btn,
  .hero .hero-actions a.hero-btn *,
  .hero .hero-actions a.hero-btn::before {
    animation:none!important;
    transition:none!important;
  }
}