/*--------------------------------------------------------------
# Premium Redesign — Phase 1: Header, Navigation, Hero
# Loaded after main.css. Scoped only to .header / .navmenu / .hero
# so it does not affect sections handled in later phases.
--------------------------------------------------------------*/

:root {
  --brand-gradient: linear-gradient(135deg, #5d57f4 0%, #7c6ffa 45%, #35c1ff 100%);
  --brand-gradient-soft: linear-gradient(135deg, rgba(93, 87, 244, 0.12), rgba(53, 193, 255, 0.12));
  /* Darker-stop gradient for anything with white TEXT on top (buttons).
     --brand-gradient's light cyan end (#35c1ff) only gives ~2:1 contrast
     for white text, well under WCAG AA's 4.5:1. This keeps the same
     purple-to-blue diagonal motif but stays >=4.5:1 across every stop. */
  --brand-gradient-cta: linear-gradient(135deg, #4f46e5 0%, #5d57f4 45%, #1565c0 100%);
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-border: rgba(255, 255, 255, 0.45);
  --shadow-soft: 0 10px 40px -12px rgba(31, 41, 55, 0.18);
  --shadow-lift: 0 22px 45px -15px rgba(93, 87, 244, 0.38);
  /* Shared rest/hover shadow pair for every gradient CTA pill
     (Hero, Products, Trust, Contact) — one source of truth so the
     lift shadow reads identically everywhere it's reused. */
  --shadow-cta: 0 14px 30px -10px rgba(93, 87, 244, 0.55);
  --shadow-cta-hover: 0 20px 40px -12px rgba(93, 87, 244, 0.6);
  --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
}

/*--------------------------------------------------------------
# Global accessibility — AOS reduced-motion fix (site-wide)
# main.js calls AOS.init() with no reduced-motion handling, and
# vendor/aos/aos.css's own [data-aos] rules (100px slide + fade,
# used on nearly every element on every page via data-aos="fade-up"
# etc.) are not gated by prefers-reduced-motion anywhere in the
# codebase. This neutralizes AOS's entrance transform/transition
# and shows content immediately for anyone who has reduced motion
# turned on, without touching main.js or the vendor AOS files.
--------------------------------------------------------------*/
@media (prefers-reduced-motion: reduce) {
  [data-aos] {
    transform: none !important;
    transition: opacity 200ms linear !important;
    opacity: 1 !important;
  }
}

/*--------------------------------------------------------------
# Header — glass surface with scroll transition
# Reuses the existing body.scrolled toggle already applied by main.js
--------------------------------------------------------------*/
.header {
  background-color: transparent;
  padding: 26px 0;
  border-bottom: 1px solid transparent;
  transition: background-color 0.4s var(--ease-premium), padding 0.4s var(--ease-premium),
    box-shadow 0.4s var(--ease-premium), border-color 0.4s var(--ease-premium);
}

body.scrolled .header {
  background-color: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border-bottom: 1px solid rgba(93, 87, 244, 0.1);
  box-shadow: 0 8px 30px -12px rgba(15, 23, 42, 0.15);
  padding: 14px 0;
}

/* A backdrop-filter on .header makes it the containing block for any
   position:fixed descendant (CSS Filter Effects spec) — including the
   mobile nav overlay (.mobile-nav-active .navmenu, position:fixed;
   inset:0) that lives inside <header>. Once scrolled, that collapsed
   the "full-viewport" overlay down to just the header's own short box.
   The header is fully covered by the nav's own dark overlay while the
   menu is open anyway, so dropping the blur here is invisible — it
   only restores the overlay's fixed positioning to the real viewport.
   Must stay textually after body.scrolled .header to win the tie
   when both classes are present (equal selector specificity). */
body.mobile-nav-active .header {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.header .logo img {
  transition: max-height 0.4s var(--ease-premium);
}

body.scrolled .header .logo img {
  max-height: 46px;
}

/*--------------------------------------------------------------
# Navigation — brand-color links with animated underline
--------------------------------------------------------------*/
@media (min-width: 1200px) {
  .navmenu a,
  .navmenu a:focus {
    position: relative;
  }

  .navmenu a::after {
    content: "";
    position: absolute;
    left: 15px;
    right: 15px;
    bottom: 12px;
    height: 2px;
    border-radius: 2px;
    background: var(--brand-gradient);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s var(--ease-premium);
  }

  .navmenu li:hover > a,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--accent-color);
  }

  .navmenu li:hover > a::after,
  .navmenu .active::after,
  .navmenu .active:focus::after {
    transform: scaleX(1);
  }
}

/* Mobile nav — frosted glass panel */
@media (max-width: 1199px) {
  .mobile-nav-toggle {
    transition: color 0.3s, transform 0.3s var(--ease-premium);
  }

  .mobile-nav-active .mobile-nav-toggle:hover {
    transform: rotate(90deg);
  }

  .mobile-nav-active .navmenu {
    background: linear-gradient(160deg, rgba(20, 18, 55, 0.85), rgba(8, 8, 20, 0.9));
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }

  .navmenu ul {
    background-color: var(--glass-bg);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-soft);
  }

  .navmenu .active,
  .navmenu .active:focus {
    background: var(--brand-gradient-soft);
    border-radius: 8px;
  }
}

/*--------------------------------------------------------------
# Hero Section — gradient background, glass badge, floating elements
--------------------------------------------------------------*/
.hero {
  background: linear-gradient(180deg, #f8f8fd 0%, #f2f6f9 55%, #eef1ff 100%);
}

.hero::before,
.hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.55;
  z-index: 0;
  pointer-events: none;
}

.hero::before {
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(93, 87, 244, 0.35), transparent 70%);
  top: -200px;
  right: -140px;
  animation: heroFloat1 16s ease-in-out infinite;
}

.hero::after {
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(53, 193, 255, 0.3), transparent 70%);
  bottom: -180px;
  left: -160px;
  animation: heroFloat2 18s ease-in-out infinite;
}

.hero .container {
  position: relative;
  z-index: 1;
}

@keyframes heroFloat1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-30px, 30px) scale(1.08); }
}

@keyframes heroFloat2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(25px, -20px) scale(1.06); }
}

/* Badge — glassmorphism */
.hero .badge-wrapper .d-inline-flex {
  background: var(--glass-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(93, 87, 244, 0.18);
  box-shadow: 0 4px 16px -4px rgba(93, 87, 244, 0.18);
}

.hero .badge-wrapper .d-inline-flex .icon-circle {
  background: var(--brand-gradient);
}

.hero .badge-wrapper .d-inline-flex .icon-circle i {
  color: #fff;
}

/* Heading — tighter tracking + gradient accent */
.hero .hero-title {
  letter-spacing: -0.02em;
}

/* Shared utility — gradient text accent, reused across phases.
   Uses its own darker-stop gradient (not --brand-gradient) because
   --brand-gradient's light cyan end (#35c1ff) only reaches ~2:1
   contrast against white as text — well under WCAG's 3:1 minimum
   for large text. --brand-gradient itself is left untouched since
   it drives buttons/icons/borders in already-approved sections. */
.text-gradient {
  background: linear-gradient(135deg, #4f46e5 0%, #5d57f4 45%, #1c7ed6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Primary CTA — gradient pill with icon micro-interaction.
   Uses --brand-gradient-cta (darker stops) so the white label text
   keeps >=4.5:1 WCAG AA contrast everywhere on the pill — see :root. */
.hero .cta-wrapper .btn-primary {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--brand-gradient-cta);
  border: none;
  border-radius: 999px;
  padding: 0.9rem 2rem;
  box-shadow: var(--shadow-cta);
  transition: transform 0.3s var(--ease-premium), box-shadow 0.3s var(--ease-premium);
}

.hero .cta-wrapper .btn-primary i {
  transition: transform 0.3s var(--ease-premium);
}

.hero .cta-wrapper .btn-primary:hover {
  background: var(--brand-gradient-cta);
  transform: translateY(-3px);
  box-shadow: var(--shadow-cta-hover), 0 0 32px 4px rgba(93, 87, 244, 0.35);
}

.hero .cta-wrapper .btn-primary:hover i {
  transform: translateX(4px);
}

.hero .cta-wrapper .btn-primary:focus-visible {
  outline: 2px solid #1565c0;
  outline-offset: 3px;
}

/* Press ripple — same CSS-only technique as .services .service-link::after */
.hero .cta-wrapper .btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.55) 0%, transparent 65%);
  opacity: 0;
  transform: scale(0.4);
  transition: transform 450ms var(--ease-premium), opacity 450ms var(--ease-premium);
  pointer-events: none;
}

.hero .cta-wrapper .btn-primary:active::after {
  transform: scale(1.6);
  opacity: 1;
  transition: transform 0s, opacity 0s;
}

/*--------------------------------------------------------------
# Hero dashboard — animated SaaS dashboard illustration, replaces
# the old static hero photo. Built from three nested layers so the
# three different motion sources never fight over the same
# `transform` property (an animation and an inline style can't both
# drive one element's transform at once):
#   .hero-dashboard-parallax  — JS-driven mouse parallax (--px/--py)
#   .hero-dashboard-float     — continuous CSS keyframe float/rotate
#   .dashboard-panel / floats — their own hover lift / bob / pulse
# Purely decorative (aria-hidden="true" on .hero-visual in the
# markup) — the numbers on it are illustrative, not real Workzio
# financials, same category as the stock photo it replaces.
--------------------------------------------------------------*/
.hero-visual {
  position: relative;
  min-height: 460px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-dashboard-parallax {
  --px: 0px;
  --py: 0px;
  position: relative;
  width: 100%;
  max-width: 480px;
  transform: translate3d(var(--px), var(--py), 0);
  transition: transform 0.2s ease-out;
}

.hero-dashboard-float {
  position: relative;
  animation: dashboardFloat 9s ease-in-out infinite;
}

.hero-dashboard-float::before {
  content: "";
  position: absolute;
  inset: -20px;
  background: var(--brand-gradient);
  border-radius: 36px;
  opacity: 0.18;
  filter: blur(36px);
  z-index: -1;
}

@keyframes dashboardFloat {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-14px) rotate(0.6deg); }
}

/* Main panel */
.dashboard-panel {
  position: relative;
  z-index: 2;
  border-radius: 24px;
  background: var(--glass-bg);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  transition: transform 0.4s var(--ease-premium), box-shadow 0.4s var(--ease-premium);
}

.dashboard-panel:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lift);
}

.dashboard-panel-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--glass-border);
}

.dashboard-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--default-color), transparent 65%);
}

.dashboard-panel-title {
  margin-left: 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--heading-color);
}

.dashboard-live {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #16a34a;
}

.dashboard-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #16a34a;
  animation: dashboardPulse 1.8s ease-in-out infinite;
}

.dashboard-panel-body {
  padding: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

/* Stat row — Revenue + Active Users, numbers count up via premium.js */
.dashboard-stats {
  display: flex;
  gap: 0.75rem;
}

.dashboard-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.65rem 0.75rem;
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent-color), transparent 94%);
}

.dashboard-stat-label {
  font-size: 0.7rem;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.dashboard-stat-value {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--heading-color);
  font-variant-numeric: tabular-nums;
}

.dashboard-stat-delta {
  font-size: 0.72rem;
  font-weight: 700;
  color: #16a34a;
}

/* Bar chart — grows from 0 on load via scaleY, staggered per bar */
.dashboard-bars {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 78px;
  padding: 0 0.1rem;
}

.dashboard-bars span {
  flex: 1;
  height: 100%;
  border-radius: 6px 6px 2px 2px;
  background: color-mix(in srgb, var(--accent-color), transparent 78%);
  transform-origin: bottom;
  transform: scaleY(var(--bar-h));
  animation: barGrow 900ms var(--ease-premium) both;
}

.dashboard-bars span:nth-child(1) { animation-delay: 0.05s; }
.dashboard-bars span:nth-child(2) { animation-delay: 0.12s; }
.dashboard-bars span:nth-child(3) { animation-delay: 0.19s; }
.dashboard-bars span:nth-child(4) { animation-delay: 0.26s; }
.dashboard-bars span:nth-child(5) { animation-delay: 0.33s; }
.dashboard-bars span:nth-child(6) {
  animation-delay: 0.4s;
  background: var(--brand-gradient);
}
.dashboard-bars span:nth-child(7) { animation-delay: 0.47s; }

@keyframes barGrow {
  from { transform: scaleY(0); }
  to { transform: scaleY(var(--bar-h)); }
}

/* Line/area chart + pie chart, side by side */
.dashboard-mini-row {
  display: flex;
  gap: 0.75rem;
  align-items: stretch;
}

.dashboard-line {
  flex: 1.4;
  position: relative;
  height: 84px;
  border-radius: 14px;
  overflow: hidden;
  background: color-mix(in srgb, var(--accent-color), transparent 95%);
}

/* Tiny browser-chrome dots — reads as a "website preview" pane
   without adding a whole separate widget for it */
.dashboard-line-chrome {
  position: absolute;
  top: 6px;
  left: 8px;
  z-index: 1;
  display: flex;
  gap: 3px;
}

.dashboard-line-chrome span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent-color), transparent 45%);
}

.dashboard-line-fill {
  position: absolute;
  inset: 0;
  transform-origin: left;
  animation: lineReveal 1.1s var(--ease-premium) both;
  animation-delay: 0.5s;
  background: linear-gradient(180deg, rgba(93, 87, 244, 0.4), rgba(53, 193, 255, 0.05));
  clip-path: polygon(0% 78%, 14% 62%, 28% 70%, 42% 46%, 56% 55%, 70% 30%, 84% 40%, 100% 18%, 100% 100%, 0% 100%);
}

@keyframes lineReveal {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.dashboard-pie {
  flex: 1;
  position: relative;
  width: 84px;
  height: 84px;
  margin: 0 auto;
}

.dashboard-pie-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(var(--accent-color) 0% 72%, color-mix(in srgb, var(--accent-color), transparent 85%) 72% 100%);
  animation: pieWobble 7s ease-in-out infinite;
}

.dashboard-pie-ring::before {
  content: "";
  position: absolute;
  inset: 15px;
  border-radius: 50%;
  background: var(--surface-color, #fff);
}

@keyframes pieWobble {
  0%, 100% { transform: rotate(-4deg); }
  50% { transform: rotate(4deg); }
}

.dashboard-pie-label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.1;
}

.dashboard-pie-label strong {
  font-size: 0.95rem;
  color: var(--heading-color);
}

.dashboard-pie-label span {
  font-size: 0.6rem;
  color: color-mix(in srgb, var(--default-color), transparent 35%);
}

/* Floating widget card — Messages */
.dashboard-float {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 0.9rem;
  border-radius: 16px;
  background: var(--glass-bg);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-soft);
}

.dashboard-float--messages {
  /* Floats above the panel's top-right corner, mirroring the cloud
     badge's top-left placement — was at top:8%, which sat directly
     over the panel header and clipped the "Live" status text. */
  top: -12%;
  right: -8%;
  animation: dashboardBob 6.5s ease-in-out infinite;
}

.dashboard-float--code {
  top: 46%;
  left: -14%;
  animation: dashboardBob 7.2s ease-in-out infinite reverse;
}

.dashboard-float--code .dashboard-float-icon {
  background: color-mix(in srgb, #16a34a, transparent 85%);
  color: #16a34a;
}

.dashboard-float-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--brand-gradient-soft);
  color: var(--accent-color);
  font-size: 1rem;
  flex-shrink: 0;
}

.dashboard-float-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.dashboard-float-text strong {
  font-size: 0.85rem;
  color: var(--heading-color);
}

.dashboard-float-text small {
  font-size: 0.68rem;
  color: color-mix(in srgb, var(--default-color), transparent 35%);
}

/* Floating icon badges — Cloud (slow bob) + Security (pulse ring) */
.dashboard-badge {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  /* Solid-ish background instead of backdrop-filter — at 52px the
     blur-behind effect is barely visible, and dropping it here cuts
     three of the seven backdrop-filter surfaces this hero was
     otherwise compositing (confirmed measurably cheaper via a
     controlled Lighthouse A/B against the pre-dashboard hero). */
  background: color-mix(in srgb, var(--glass-bg), #fff 20%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-soft);
  font-size: 1.3rem;
  color: var(--accent-color);
}

.dashboard-badge--cloud {
  top: -10%;
  left: -6%;
  animation: dashboardBob 8s ease-in-out infinite reverse;
}

.dashboard-badge--security {
  bottom: 10%;
  left: -9%;
}

.dashboard-badge--security i {
  animation: securityPulse 2.4s ease-in-out infinite;
}

.dashboard-badge--security::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid var(--accent-color);
  animation: securityRing 2.4s ease-out infinite;
  pointer-events: none;
}

.dashboard-badge--integrations {
  top: 58%;
  right: -10%;
  animation: dashboardBob 5.8s ease-in-out infinite;
}

.dashboard-badge--integrations i {
  animation: securityPulse 3.2s ease-in-out infinite;
}

@keyframes securityPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}

@keyframes securityRing {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.5); opacity: 0; }
}

@keyframes dashboardBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes dashboardPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.8); }
}

/* Notification card — fades/slides in once settled, then bobs gently */
.dashboard-notify {
  position: absolute;
  z-index: 3;
  bottom: -8%;
  right: 4%;
  opacity: 0;
  transform: translate(16px, 10px) scale(0.92);
  animation: notifyIn 700ms var(--ease-premium) both;
  animation-delay: 1.1s;
}

.dashboard-notify-inner {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 0.9rem;
  border-radius: 16px;
  background: var(--glass-bg);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-lift);
  animation: dashboardBob 5.5s ease-in-out infinite;
  animation-delay: 1.1s;
}

.dashboard-notify-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--brand-gradient);
  color: #fff;
  font-size: 1rem;
  flex-shrink: 0;
}

.dashboard-notify-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.dashboard-notify-text strong {
  font-size: 0.82rem;
  color: var(--heading-color);
}

.dashboard-notify-text small {
  font-size: 0.68rem;
  color: color-mix(in srgb, var(--default-color), transparent 35%);
}

@keyframes notifyIn {
  from { opacity: 0; transform: translate(16px, 10px) scale(0.92); }
  to { opacity: 1; transform: translate(0, 0) scale(1); }
}

@media (max-width: 991.98px) {
  .hero-visual {
    min-height: 420px;
    margin-top: 1rem;
  }
}

@media (max-width: 767.98px) {
  /* .hero (and every .section) has overflow:hidden (main.css), so
     nothing here may extend past .hero-visual's own box — every
     offset below keeps floating widgets flush with the panel's
     edges instead of bleeding beyond them. */
  .hero-dashboard-parallax {
    max-width: 300px;
  }

  .dashboard-float,
  .dashboard-badge {
    transform: scale(0.8);
  }

  .dashboard-float--messages {
    top: -18%;
    right: 0;
  }

  .dashboard-float--code {
    left: 0;
  }

  .dashboard-badge--cloud {
    top: -4%;
    left: 0;
  }

  .dashboard-badge--security {
    bottom: 8%;
    left: 0;
  }

  .dashboard-badge--integrations {
    right: 0;
  }

  .dashboard-notify {
    bottom: 0;
    right: 0;
  }
}

@media (max-width: 400px) {
  /* Densest two badges — keep the composition legible instead of
     stacking every widget on a ~300px-wide panel. */
  .dashboard-badge--cloud,
  .dashboard-badge--integrations {
    display: none;
  }
}

/* Feature boxes — glass cards with gradient icon on hover */
.hero .feature-boxes .feature-box {
  background: var(--glass-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  box-shadow: var(--shadow-soft);
  transition: transform 0.4s var(--ease-premium), box-shadow 0.4s var(--ease-premium), border-color 0.4s var(--ease-premium);
}

.hero .feature-boxes .feature-box:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lift);
  border-color: rgba(93, 87, 244, 0.25);
}

.hero .feature-boxes .feature-box .feature-icon {
  background: var(--brand-gradient-soft);
  transition: transform 0.4s var(--ease-premium), background 0.4s var(--ease-premium);
}

.hero .feature-boxes .feature-box:hover .feature-icon {
  background: var(--brand-gradient);
  transform: rotate(-6deg) scale(1.08);
}

.hero .feature-boxes .feature-box .feature-icon i {
  transition: color 0.3s var(--ease-premium);
}

.hero .feature-boxes .feature-box:hover .feature-icon i {
  color: #fff;
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .hero::before,
  .hero::after,
  .hero .cta-wrapper .btn-primary,
  .hero .cta-wrapper .btn-primary::after,
  .hero .feature-boxes .feature-box,
  .hero .feature-boxes .feature-box .feature-icon,
  .mobile-nav-active .mobile-nav-toggle,
  .hero-dashboard-parallax,
  .hero-dashboard-float,
  .dashboard-panel,
  .dashboard-live-dot,
  .dashboard-bars span,
  .dashboard-line-fill,
  .dashboard-pie-ring,
  .dashboard-float,
  .dashboard-badge,
  .dashboard-badge--security i,
  .dashboard-badge--security::after,
  .dashboard-badge--integrations i,
  .dashboard-notify,
  .dashboard-notify-inner {
    animation: none !important;
    transition: none !important;
  }

  /* These elements rely on their animation's end state to be visible
     at all (entrance fade/slide) rather than just looping in place —
     without the animation running they'd be stuck at their pre-
     animation starting values, so the final state is pinned directly. */
  .dashboard-notify {
    opacity: 1 !important;
    transform: none !important;
  }
}

/*--------------------------------------------------------------
# Premium Redesign — Phase 2: Services Section
# Scoped to #services / .services .service-item only.
# Markup: .service-item now wraps a .service-item-glow (the
# rotating gradient ring) and a .service-item-inner (the actual
# glass card surface) — see index.html. This overrides several
# main.css rules for the same selectors (later source order wins);
# main.css itself is left untouched.
--------------------------------------------------------------*/

/* Soft gradient wash behind the whole section */
#services.services.section {
  position: relative;
  background:
    radial-gradient(900px 420px at 10% 0%, rgba(93, 87, 244, 0.07), transparent 60%),
    radial-gradient(900px 420px at 100% 100%, rgba(53, 193, 255, 0.07), transparent 60%),
    var(--background-color);
    padding-top: 60px;
    padding-bottom: 40px;
}

/* Premium section heading accent */
#services .section-title h2::after {
  background: var(--brand-gradient);
}

/* Outer wrapper: now just a positioning/stacking context.
   Neutralize main.css's own background/padding/shadow/hover here
   so only the inner surface (below) drives the visible card. */
.services .service-item {
  display: block;
  background: none;
  box-shadow: none;
  padding: 0;
  border-radius: 24px;
  overflow: visible;
  transition: none;
}

.services .service-item::before {
  display: none;
}

.services .service-item:hover {
  box-shadow: none;
  transform: none;
}

/* Rotating gradient ring, built from a real thin ring (via mask,
   not a filled rectangle) inside its own tightly-clipped wrapper.
   The clip wrapper is separate from .service-item so the card's
   hover-lift (on .service-item-inner) is never cut off by it. */
.services .service-item-glow-clip {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

.services .service-item-glow {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(from 0deg, #5d57f4, #35c1ff, #7c6ffa, #5d57f4);
  -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;
  opacity: 0;
  transition: opacity 300ms var(--ease-premium);
  animation: servicesGlowSpin 4s linear infinite;
  animation-play-state: paused;
}

.services .service-item:hover .service-item-glow {
  opacity: 1;
  animation-play-state: running;
}

@keyframes servicesGlowSpin {
  to {
    transform: rotate(360deg);
  }
}

/* Inner glass card surface — the real visible card */
.services .service-item-inner {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --lift: 0px;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  height: 100%;
  padding: 2.75rem 2.25rem;
  background: var(--glass-bg);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid var(--glass-border);
  border-radius: 22px;
  box-shadow: var(--shadow-soft);
  cursor: default;
  transform: perspective(900px) translateY(var(--lift)) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transition: transform 300ms var(--ease-premium), box-shadow 300ms var(--ease-premium), border-color 300ms var(--ease-premium);
}

.services .service-item:hover .service-item-inner {
  --lift: -8px;
  box-shadow: var(--shadow-lift);
  border-color: rgba(93, 87, 244, 0.25);
}

/* Large premium icon badge */
.services .service-icon {
  width: 84px;
  height: 84px;
  border-radius: 20px;
  background: var(--brand-gradient-soft);
  color: var(--accent-color);
  margin-right: 1.5rem;
  transition: transform 350ms var(--ease-premium), background 350ms var(--ease-premium);
}

.services .service-icon i {
  font-size: 2.25rem;
  transition: transform 350ms var(--ease-premium), color 300ms var(--ease-premium);
}

.services .service-item:hover .service-icon {
  background: var(--brand-gradient);
  transform: scale(1.1) rotate(8deg);
}

.services .service-item:hover .service-icon i {
  color: #fff;
  transform: scale(1.08);
}

/* Modern typography for card content */
.services .service-content h3 {
  font-size: 1.35rem;
  letter-spacing: -0.01em;
}

.services .service-content p {
  font-size: 1rem;
  line-height: 1.7;
}

/* CTA pill — real "Get a Quote" link with hover + CSS ripple */
.services .service-link {
  position: relative;
  overflow: hidden;
  gap: 0.4rem;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  background: var(--brand-gradient-soft);
  color: var(--accent-color);
  white-space: nowrap;
  transition: background 300ms var(--ease-premium), color 300ms var(--ease-premium), transform 300ms var(--ease-premium);
}

.services .service-link:hover {
  background: var(--brand-gradient);
  color: #fff;
  transform: translateY(-2px);
}

.services .service-link:hover i {
  transform: translateX(4px);
}

/* Lightweight CSS-only ripple: pops on press, settles back on release.
   Centered pulse rather than click-position tracking, since that
   requires JS — kept CSS-only to avoid adding more script for a
   micro-interaction that doesn't need pixel-accurate positioning. */
.services .service-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.7) 0%, transparent 65%);
  opacity: 0;
  transform: scale(0.4);
  transition: transform 450ms var(--ease-premium), opacity 450ms var(--ease-premium);
  pointer-events: none;
}

.services .service-link:active::after {
  transform: scale(1.6);
  opacity: 1;
  transition: transform 0s, opacity 0s;
}

/* Mobile — reduce visual intensity, keep touch-friendly spacing */
@media (max-width: 767.98px) {
  .services .service-item-inner {
    padding: 2rem 1.5rem;
  }

  .services .service-icon {
    width: 64px;
    height: 64px;
    margin-right: 1rem;
  }

  .services .service-icon i {
    font-size: 1.75rem;
  }
}

@media (max-width: 575.98px) {
  .services .service-item-inner {
    flex-direction: column;
    text-align: center;
  }

  .services .service-icon {
    margin-right: 0;
    margin-bottom: 1.25rem;
  }

  /* Rotating glow ring is a hover-only affordance; touch devices
     don't hover reliably, so skip the extra paint/rotation cost. */
  .services .service-item-glow-clip {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .services .service-item-inner,
  .services .service-icon,
  .services .service-icon i,
  .services .service-item-glow,
  .services .service-link,
  .services .service-link::after {
    animation: none !important;
    transition: none !important;
  }

  .services .service-item-inner {
    transform: none !important;
  }
}

/*--------------------------------------------------------------
# Premium Redesign — Phase 3: About + How We Work
# Scoped to #about and #how-we-work only. No new JS — the
# process-line "draw" reuses AOS's existing .aos-animate class
# (already added/removed by main.js's AOS.init(), see main.js)
# instead of writing a scroll listener.
--------------------------------------------------------------*/

/* Floating ambient background shapes, same technique as the Hero */
#about.about.section {
  position: relative;
  overflow: hidden;
}

#about::before,
#about::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.4;
  z-index: 0;
  pointer-events: none;
}

#about::before {
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(93, 87, 244, 0.3), transparent 70%);
  top: -120px;
  left: -160px;
  animation: aboutFloat1 17s ease-in-out infinite;
}

#about::after {
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, rgba(53, 193, 255, 0.28), transparent 70%);
  bottom: -140px;
  right: -140px;
  animation: aboutFloat2 19s ease-in-out infinite;
}

@keyframes aboutFloat1 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(25px, 20px); }
}

@keyframes aboutFloat2 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-20px, -25px); }
}

#about .container {
  position: relative;
  z-index: 1;
}

/* Heading */
#about .content h3 {
  letter-spacing: -0.01em;
}

/* Glass highlight card (replaces the old single-item checklist) */
#about .about-highlight {
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
  margin-top: 1.5rem;
  padding: 1.75rem;
  background: var(--glass-bg);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  box-shadow: var(--shadow-soft);
}

#about .about-highlight i {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--brand-gradient-soft);
  color: var(--accent-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
}

#about .about-highlight p {
  margin: 0;
  line-height: 1.7;
  color: color-mix(in srgb, var(--default-color), transparent 15%);
}

/* Image frames — modern presentation of the existing illustrations */
#about .about-image-frame {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-soft);
  background: var(--glass-bg);
  transition: transform 400ms var(--ease-premium), box-shadow 400ms var(--ease-premium);
}

#about .about-image-frame:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lift);
}

#about .about-image-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#about .about-image-frame--tall {
  aspect-ratio: 3 / 4;
}

#about .about-image-frame--wide {
  aspect-ratio: 16 / 10;
}

/* whatsapp.jpg has a lot of empty canvas on its left; anchor the
   crop to the right where the actual artwork sits */
#about .about-image-frame--whatsapp img {
  object-position: right center;
}

/*--------------------------------------------------------------
# How We Work — vertical connecting timeline
--------------------------------------------------------------*/
#how-we-work.how-we-work.section {
  position: relative;
  overflow: hidden;
  padding-top: 60px;
  padding-bottom: 40px;
}

#how-we-work::before {
  content: "";
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(93, 87, 244, 0.08), transparent 70%);
  top: -100px;
  right: -180px;
  filter: blur(60px);
  z-index: 0;
  pointer-events: none;
}

#how-we-work .container {
  position: relative;
  z-index: 1;
}

#how-we-work .section-title h2::after {
  background: var(--brand-gradient);
}

.how-we-work .process-item {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 1.75rem;
  padding-bottom: 2rem;
}

.how-we-work .process-item:last-child {
  padding-bottom: 0;
}

/* Node + connecting line */
.how-we-work .process-marker {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 64px;
}

.how-we-work .process-node {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--brand-gradient);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  box-shadow: var(--shadow-soft);
  flex-shrink: 0;
  z-index: 1;
  transition: transform 350ms var(--ease-premium), box-shadow 350ms var(--ease-premium);
}

.how-we-work .process-line {
  flex: 1;
  width: 3px;
  min-height: 24px;
  margin: 6px 0;
  background: linear-gradient(var(--accent-color), rgba(93, 87, 244, 0.12));
  border-radius: 3px;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 700ms var(--ease-premium);
}

.how-we-work .process-item:last-child .process-line {
  display: none;
}

/* Line "draws" in and the node pops once AOS reveals the step —
   reuses AOS's own .aos-animate class, no extra scroll listener */
.how-we-work .process-item.aos-animate .process-line {
  transform: scaleY(1);
}

.how-we-work .process-item.aos-animate .process-node {
  animation: processNodePop 500ms var(--ease-premium);
}

@keyframes processNodePop {
  0% { transform: scale(0.7); }
  60% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* Card — glass surface, interactive hover */
.how-we-work .process-item .content {
  flex: 1;
  background: var(--glass-bg);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  box-shadow: var(--shadow-soft);
  transition: transform 350ms var(--ease-premium), box-shadow 350ms var(--ease-premium), border-color 350ms var(--ease-premium);
}

.how-we-work .process-item .content:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lift);
  border-color: rgba(93, 87, 244, 0.22);
}

.how-we-work .process-item .content:hover ~ .process-marker .process-node,
.how-we-work .process-item:hover .process-node {
  transform: scale(1.06);
}

.how-we-work .process-item .step-index {
  display: inline-block;
  margin-bottom: 0.5rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-color);
}

.how-we-work .process-item .step-content h3 {
  letter-spacing: -0.01em;
}

/* Mobile — reduce intensity, keep touch-friendly spacing */
@media (max-width: 767.98px) {
  .how-we-work .process-item {
    gap: 1.1rem;
  }

  .how-we-work .process-marker {
    width: 52px;
  }

  .how-we-work .process-node {
    width: 52px;
    height: 52px;
    font-size: 1.25rem;
  }

  #about::before,
  #about::after {
    opacity: 0.25;
  }
}

@media (prefers-reduced-motion: reduce) {
  #about::before,
  #about::after,
  .how-we-work .process-line,
  .how-we-work .process-node,
  .how-we-work .process-item .content,
  .about-image-frame {
    animation: none !important;
    transition: none !important;
  }

  .how-we-work .process-item.aos-animate .process-line {
    transform: scaleY(1);
  }
}

/*--------------------------------------------------------------
# Premium Redesign — Phase 4: Products Section
# Scoped to #products only. No new JS — reveal stagger reuses AOS
# (data-aos-delay on each card), gradient-ring hover reuses the
# same mask-composite technique introduced in Phase 2 for Services.
--------------------------------------------------------------*/

#products.products.section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1000px 460px at 100% 0%, rgba(93, 87, 244, 0.06), transparent 60%),
    radial-gradient(1000px 460px at 0% 100%, rgba(53, 193, 255, 0.06), transparent 60%),
    var(--background-color);
  padding-top: 60px;
  padding-bottom: 40px;
}

/* Generous, premium rhythm between title, subtitle and cards
   (scoped to #products so the shared .section-title default
   elsewhere on the site is untouched) */
#products .section-title {
  padding-bottom: 90px;
}

#products .section-title h2 {
  margin-bottom: 28px;
}

@media (max-width: 991.98px) {
  #products.products.section {
    padding-top: 120px;
    padding-bottom: 120px;
  }

  #products .section-title {
    padding-bottom: 72px;
  }
}

#products::before {
  content: "";
  position: absolute;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(93, 87, 244, 0.1), transparent 70%);
  top: 10%;
  left: -160px;
  filter: blur(70px);
  z-index: 0;
  pointer-events: none;
  animation: productsFloat 20s ease-in-out infinite;
}

@keyframes productsFloat {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(30px, -25px); }
}

#products .container {
  position: relative;
  z-index: 1;
}

#products .section-title h2::after {
  background: var(--brand-gradient);
}

/* Card shell + rotating gradient ring on hover (same pattern as
   Services cards in Phase 2, kept in its own clip wrapper so the
   card's hover-lift below is never clipped by it) */
.product-card {
  position: relative;
  border-radius: 28px;
  height: 100%;
}

.product-card-glow-clip {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

.product-card-glow {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(from 0deg, #5d57f4, #35c1ff, #7c6ffa, #5d57f4);
  -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;
  opacity: 0;
  transition: opacity 300ms var(--ease-premium);
  animation: productGlowSpin 5s linear infinite;
  animation-play-state: paused;
}

.product-card:hover .product-card-glow {
  opacity: 1;
  animation-play-state: running;
}

@keyframes productGlowSpin {
  to { transform: rotate(360deg); }
}

/* Card surface — enterprise-grade glass panel */
.product-card-inner {
  position: relative;
  z-index: 1;
  height: 100%;
  padding: 3rem 2.5rem;
  background: var(--glass-bg);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid var(--glass-border);
  border-radius: 26px;
  box-shadow: var(--shadow-soft);
  transition: transform 350ms var(--ease-premium), box-shadow 350ms var(--ease-premium), border-color 350ms var(--ease-premium);
}

.product-card:hover .product-card-inner {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lift);
  border-color: rgba(93, 87, 244, 0.25);
}

.product-badge {
  display: inline-block;
  margin-bottom: 1.25rem;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  background: var(--brand-gradient-soft);
  color: var(--accent-color);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.product-icon {
  width: 88px;
  height: 88px;
  margin-bottom: 1.5rem;
  border-radius: 22px;
  background: var(--brand-gradient-soft);
  color: var(--accent-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  transition: transform 400ms var(--ease-premium), background 400ms var(--ease-premium);
}

.product-card:hover .product-icon {
  background: var(--brand-gradient);
  color: #fff;
  transform: scale(1.08) rotate(-6deg);
}

.product-card-inner h3 {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 0.9rem;
  color: var(--heading-color);
}

.product-card-inner > p {
  font-size: 1rem;
  line-height: 1.7;
  color: color-mix(in srgb, var(--default-color), transparent 15%);
  margin-bottom: 1.5rem;
}

.product-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
}

.product-tags li {
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-color), transparent 92%);
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 80%);
  color: var(--heading-color);
  font-size: 0.85rem;
  font-weight: 600;
}

/* Premium CTA — uses the WCAG-safe gradient, same as the Hero CTA */
.product-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.75rem;
  border-radius: 999px;
  background: var(--brand-gradient-cta);
  color: #fff;
  font-weight: 600;
  box-shadow: var(--shadow-cta);
  transition: transform 300ms var(--ease-premium), box-shadow 300ms var(--ease-premium);
}

.product-cta i {
  transition: transform 300ms var(--ease-premium);
}

.product-cta:hover {
  color: #fff;
  transform: translateY(-3px);
  box-shadow: var(--shadow-cta-hover);
}

.product-cta:hover i {
  transform: translateX(4px);
}

.product-cta:focus-visible {
  outline: 2px solid #1565c0;
  outline-offset: 3px;
}

/* Mobile — reduce visual intensity, keep touch-friendly spacing */
@media (max-width: 767.98px) {
  #products.products.section {
    padding-top: 88px;
    padding-bottom: 88px;
  }

  #products .section-title {
    padding-bottom: 56px;
  }

  #products .section-title h2 {
    margin-bottom: 20px;
  }

  .product-card-inner {
    padding: 2.25rem 1.75rem;
  }

  .product-icon {
    width: 68px;
    height: 68px;
    font-size: 2rem;
  }

  .product-card-inner h3 {
    font-size: 1.35rem;
  }

  #products::before {
    opacity: 0.5;
  }
}

@media (max-width: 575.98px) {
  .product-card-glow-clip {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  #products::before,
  .product-card-glow,
  .product-card-inner,
  .product-icon,
  .product-cta {
    animation: none !important;
    transition: none !important;
  }
}

/*--------------------------------------------------------------
# Premium Redesign — Phase 5: Trust, Statistics (Highlights), FAQ
# Scoped to #trust, #highlights, #faq only.
#
# Bug fix note: #trust reuses the .services .service-item CSS from
# Phase 2, which expects a .service-item-glow-clip + .service-item-inner
# wrapper (Services/Products already use it). #trust's markup didn't
# have that wrapper yet, so Phase 2's rules (background:none, padding:0,
# overflow:visible on .service-item) were silently stripping the Trust
# cards' visuals. Fixed by updating #trust's markup to match — see
# index.html. No new CSS selectors were needed for that part, it just
# needed the same structure Services/Products already use.
#
# Phase 7 catch: every other .section-title in the system (Services,
# How We Work, Products, Highlights, FAQ, Contact) overrides the
# ::after underline to the brand gradient — #trust was the one
# section that shipped without it, so its heading rule was still
# falling back to main.css's flat navy underline. Added below.
--------------------------------------------------------------*/

#trust .section-title h2::after {
  background: var(--brand-gradient);
}

/* Trust CTA — same accessible gradient as the Hero/Products CTAs */
.trust-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 2rem;
  border-radius: 999px;
  background: var(--brand-gradient-cta);
  color: #fff;
  font-weight: 600;
  box-shadow: var(--shadow-cta);
  transition: transform 300ms var(--ease-premium), box-shadow 300ms var(--ease-premium);
}

.trust-cta i {
  transition: transform 300ms var(--ease-premium);
}

.trust-cta:hover {
  color: #fff;
  transform: translateY(-3px);
  box-shadow: var(--shadow-cta-hover);
}

.trust-cta:hover i {
  transform: translateX(4px);
}

.trust-cta:focus-visible {
  outline: 2px solid #1565c0;
  outline-offset: 3px;
}

/*--------------------------------------------------------------
# Highlights (Statistics) — animated capability chips, not counters.
# No numbers are invented here; every label matches a real,
# already-published Workzio service (homepage Services section,
# Products section, and the "WhatsApp Automation" service named in
# terms.html / the "How Workzio Helps You" block).
--------------------------------------------------------------*/
#highlights.highlights.section {
  position: relative;
  overflow: hidden;
}

#highlights::before {
  content: "";
  position: absolute;
  width: 440px;
  height: 440px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(53, 193, 255, 0.09), transparent 70%);
  bottom: -160px;
  left: -160px;
  filter: blur(70px);
  z-index: 0;
  pointer-events: none;
  animation: highlightsFloat 18s ease-in-out infinite;
}

@keyframes highlightsFloat {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(25px, -20px); }
}

#highlights .container {
  position: relative;
  z-index: 1;
}

#highlights .section-title h2::after {
  background: var(--brand-gradient);
}

.highlight-chip {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  height: 100%;
  padding: 1.1rem 1.25rem;
  background: var(--glass-bg);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  box-shadow: var(--shadow-soft);
  transition: transform 300ms var(--ease-premium), box-shadow 300ms var(--ease-premium), border-color 300ms var(--ease-premium);
}

.highlight-chip:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lift);
  border-color: rgba(93, 87, 244, 0.25);
}

.highlight-chip i {
  flex-shrink: 0;
  font-size: 1.4rem;
  color: var(--accent-color);
  transition: transform 300ms var(--ease-premium);
}

.highlight-chip:hover i {
  transform: scale(1.15);
}

.highlight-chip span {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--heading-color);
  line-height: 1.3;
}

@media (max-width: 767.98px) {
  .highlight-chip {
    padding: 0.9rem 1rem;
  }

  .highlight-chip span {
    font-size: 0.85rem;
  }
}

/*--------------------------------------------------------------
# FAQ — premium glass accordion, reusing main.js's existing
# .faq-active toggle (no duplicate toggle logic added). The only
# new JS (in premium.js) keeps aria-expanded in sync and adds
# Enter/Space keyboard support on top of that same click event.
--------------------------------------------------------------*/
#faq.faq.section {
  position: relative;
  overflow: hidden;
}

#faq::before {
  content: "";
  position: absolute;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(93, 87, 244, 0.07), transparent 70%);
  top: -140px;
  right: -180px;
  filter: blur(70px);
  z-index: 0;
  pointer-events: none;
}

#faq .container {
  position: relative;
  z-index: 1;
}

#faq .section-title h2::after {
  background: var(--brand-gradient);
}

.faq-accordion {
  max-width: 820px;
  margin: 0 auto;
}

.faq .faq-item {
  background: var(--glass-bg);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  box-shadow: var(--shadow-soft);
  transition: transform 350ms var(--ease-premium), box-shadow 350ms var(--ease-premium), border-color 350ms var(--ease-premium);
}

.faq .faq-item:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
  border-color: rgba(93, 87, 244, 0.2);
}

.faq .faq-item .faq-header {
  cursor: pointer;
}

.faq .faq-item .faq-header h3,
.faq .faq-item h3.faq-header span {
  font-size: 1.05rem;
}

/* The chevron sits inside the same clickable header as the question
   text. Without this, a click landing exactly on the icon glyph would
   fire two listeners at once (main.js's own h3/.faq-toggle/.faq-header
   selectors all match here) and cancel itself out. Making the icon
   pointer-events:none routes every click to the header, so it always
   toggles exactly once. */
.faq .faq-item .faq-toggle {
  pointer-events: none;
  color: var(--accent-color);
}

.faq .faq-item.faq-active .faq-header {
  color: var(--accent-color);
}

.faq .faq-item.faq-active .faq-content {
  max-height: 400px;
}

.faq .faq-item .faq-content {
  transition: max-height 400ms var(--ease-premium);
}

.faq .faq-item .faq-header:focus-visible {
  outline: 2px solid #1565c0;
  outline-offset: -2px;
  border-radius: 12px;
}

.faq-more {
  margin-top: 2.5rem;
  color: color-mix(in srgb, var(--default-color), transparent 15%);
}

.faq-more a {
  color: var(--accent-color);
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  #highlights::before,
  .highlight-chip,
  #faq::before,
  .faq .faq-item,
  .faq .faq-item .faq-content,
  .trust-cta {
    animation: none !important;
    transition: none !important;
  }
}

/*--------------------------------------------------------------
# Premium Redesign — Phase 6: Contact Section
# Scoped to #contact only. No new JS for the form itself:
# - Floating labels are pure CSS (input placeholder=" " + the
#   :not(:placeholder-shown) sibling selector).
# - Loading / success / error visuals key off the existing
#   .loading / .error-message / .sent-message elements and the
#   .d-block class that assets/js/contact-form.js already toggles
#   on submit — that file, the form's `action`, and every `name`
#   attribute are untouched. This phase is presentation only.
# - The spinner itself reuses main.css's .loading:before /
#   @keyframes php-email-form-loading; only its color is retinted.
--------------------------------------------------------------*/

#contact.contact.section {
  position: relative;
  overflow: hidden;
}

#contact::before,
#contact::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(75px);
  opacity: 0.35;
  z-index: 0;
  pointer-events: none;
}

#contact::before {
  width: 460px;
  height: 460px;
  background: radial-gradient(circle, rgba(93, 87, 244, 0.28), transparent 70%);
  top: -160px;
  right: -140px;
  animation: contactFloat1 19s ease-in-out infinite;
}

#contact::after {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(53, 193, 255, 0.25), transparent 70%);
  bottom: -160px;
  left: -140px;
  animation: contactFloat2 21s ease-in-out infinite;
}

@keyframes contactFloat1 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-25px, 25px); }
}

@keyframes contactFloat2 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(20px, -20px); }
}

#contact .container {
  position: relative;
  z-index: 1;
}

#contact .section-title h2::after {
  background: var(--brand-gradient);
}

/* Contact info cards — Email / Phone */
.contact-info-grid {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.contact-info-card {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  height: 100%;
  padding: 1.75rem 2rem;
  background: var(--glass-bg);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  box-shadow: var(--shadow-soft);
  text-decoration: none;
  transition: transform 300ms var(--ease-premium), box-shadow 300ms var(--ease-premium), border-color 300ms var(--ease-premium);
}

.contact-info-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lift);
  border-color: rgba(93, 87, 244, 0.25);
}

.contact-info-card:focus-visible {
  outline: 2px solid #1565c0;
  outline-offset: 3px;
  border-radius: 20px;
}

.contact-info-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  border-radius: 16px;
  background: var(--brand-gradient-soft);
  color: var(--accent-color);
  font-size: 1.5rem;
  transition: transform 350ms var(--ease-premium), background 350ms var(--ease-premium);
}

.contact-info-card:hover .contact-info-icon {
  background: var(--brand-gradient);
  color: #fff;
  transform: scale(1.08) rotate(-6deg);
}

.contact-info-body {
  flex: 1;
  min-width: 0;
}

.contact-info-body h3 {
  margin: 0 0 0.2rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--heading-color);
}

.contact-info-body p {
  margin: 0;
  font-size: 0.95rem;
  color: color-mix(in srgb, var(--default-color), transparent 15%);
  overflow-wrap: break-word;
}

.contact-info-arrow {
  flex-shrink: 0;
  font-size: 1.1rem;
  color: var(--accent-color);
  opacity: 0;
  transform: translate(-6px, 6px);
  transition: opacity 300ms var(--ease-premium), transform 300ms var(--ease-premium);
}

.contact-info-card:hover .contact-info-arrow,
.contact-info-card:focus-visible .contact-info-arrow {
  opacity: 1;
  transform: translate(0, 0);
}

/* Form — premium glass card */
.contact .form-wrapper {
  max-width: 920px;
  margin: 0 auto;
  padding: 3rem;
  background: var(--glass-bg);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid var(--glass-border);
  border-radius: 28px;
  box-shadow: var(--shadow-soft);
}

/* Floating-label fields */
.form-field {
  position: relative;
}

.form-field .form-field-icon {
  position: absolute;
  left: 1.1rem;
  top: 1.55rem;
  font-size: 1.05rem;
  color: color-mix(in srgb, var(--default-color), transparent 35%);
  pointer-events: none;
  transition: color 250ms var(--ease-premium);
  z-index: 1;
}

.form-field--textarea .form-field-icon {
  top: 1.75rem;
}

.contact .form-field .form-control {
  width: 100%;
  padding: 1.5rem 1rem 0.5rem 2.85rem;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  font-size: 0.95rem;
  color: var(--heading-color);
  box-shadow: none;
  transition: border-color 250ms var(--ease-premium), box-shadow 250ms var(--ease-premium), background 250ms var(--ease-premium);
}

.contact .form-field textarea.form-control {
  padding-top: 1.85rem;
  min-height: 150px;
  resize: vertical;
}

.contact .form-field .form-control::placeholder {
  color: transparent;
}

.contact .form-field .form-control:focus {
  outline: none;
  border-color: var(--accent-color);
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 0 4px rgba(93, 87, 244, 0.12);
}

.form-field:focus-within .form-field-icon {
  color: var(--accent-color);
}

/* Label — rests over the field until focused or filled, then floats up */
.contact .form-field label {
  position: absolute;
  left: 2.85rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.95rem;
  font-weight: 500;
  color: color-mix(in srgb, var(--default-color), transparent 25%);
  pointer-events: none;
  transition: top 250ms var(--ease-premium), transform 250ms var(--ease-premium), font-size 250ms var(--ease-premium), color 250ms var(--ease-premium);
}

.form-field--textarea label {
  top: 1.85rem;
  transform: translateY(0);
}

.contact .form-field .form-control:focus + label,
.contact .form-field .form-control:not(:placeholder-shown) + label {
  top: 0.65rem;
  transform: translateY(0);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--accent-color);
}

/* Native validation feedback — only once a value is present and the
   field has lost focus, so nothing turns red on first paint or while
   the visitor is still mid-keystroke. */
.contact .form-field .form-control:invalid:not(:placeholder-shown):not(:focus) {
  border-color: #e5484d;
  animation: contactFieldInvalid 350ms var(--ease-premium);
}

.contact .form-field .form-control:invalid:not(:placeholder-shown):not(:focus) + label {
  color: #e5484d;
}

.contact .form-field .form-control:valid:not(:placeholder-shown) {
  border-color: rgba(34, 197, 94, 0.45);
}

@keyframes contactFieldInvalid {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* Status region — loading / success / error */
.contact .form-status .loading,
.contact .form-status .error-message,
.contact .form-status .sent-message {
  display: none;
  align-items: center;
  border-radius: 14px;
  padding: 0.85rem 1.1rem;
  font-size: 0.92rem;
  font-weight: 600;
}

.contact .form-status .loading.d-block,
.contact .form-status .error-message.d-block,
.contact .form-status .sent-message.d-block {
  display: flex;
  animation: contactStatusIn 350ms var(--ease-premium);
}

.contact .form-status .loading {
  background: color-mix(in srgb, var(--accent-color), transparent 92%);
  color: var(--heading-color);
}

.contact .form-status .loading:before {
  border-color: var(--accent-color);
  border-top-color: transparent;
}

.contact .form-status .error-message {
  background: color-mix(in srgb, #e5484d, transparent 88%);
  color: #b3261e;
}

.contact .form-status .error-message::before {
  content: "\f33b";
  font-family: bootstrap-icons, sans-serif;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  margin-right: 0.6rem;
  font-size: 1.1rem;
}

.contact .form-status .sent-message {
  background: color-mix(in srgb, #22c55e, transparent 88%);
  color: #15803d;
}

.contact .form-status .sent-message::before {
  content: "\f26b";
  font-family: bootstrap-icons, sans-serif;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  margin-right: 0.6rem;
  font-size: 1.1rem;
}

@keyframes contactStatusIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Submit button — gradient pill with icon micro-interaction, same
   accessible gradient as the Hero/Products/Trust CTAs */
.contact .form-wrapper button.contact-submit-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.95rem 2.5rem;
  border: none;
  border-radius: 999px;
  background: var(--brand-gradient-cta);
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
  box-shadow: var(--shadow-cta);
  transition: transform 300ms var(--ease-premium), box-shadow 300ms var(--ease-premium);
}

.contact-submit-btn i {
  transition: transform 300ms var(--ease-premium);
}

.contact .form-wrapper button.contact-submit-btn:hover {
  background: var(--brand-gradient-cta);
  color: #fff;
  transform: translateY(-3px);
  box-shadow: var(--shadow-cta-hover);
}

.contact .form-wrapper button.contact-submit-btn:hover i {
  transform: translateX(4px);
}

.contact .form-wrapper button.contact-submit-btn:active {
  transform: translateY(-1px) scale(0.98);
}

.contact .form-wrapper button.contact-submit-btn:focus-visible {
  outline: 2px solid #1565c0;
  outline-offset: 3px;
}

/* Mobile — reduce visual intensity, keep touch-friendly spacing */
@media (max-width: 767.98px) {
  .contact .form-wrapper {
    padding: 2rem 1.5rem;
  }

  .contact-info-card {
    padding: 1.5rem;
  }

  #contact::before,
  #contact::after {
    opacity: 0.22;
  }
}

@media (max-width: 575.98px) {
  .contact .form-wrapper button.contact-submit-btn {
    width: 100%;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  #contact::before,
  #contact::after,
  .contact-info-card,
  .contact-info-icon,
  .contact-info-arrow,
  .contact .form-field .form-control,
  .contact .form-field label,
  .contact .form-field .form-control:invalid:not(:placeholder-shown):not(:focus),
  .contact .form-status .loading.d-block,
  .contact .form-status .error-message.d-block,
  .contact .form-status .sent-message.d-block,
  .contact .form-wrapper button.contact-submit-btn,
  .contact-submit-btn i {
    animation: none !important;
    transition: none !important;
  }
}

/*--------------------------------------------------------------
# Premium Redesign — Phase 7: Services Alt, Footer, Global Chrome
# Final polish pass. No new tokens, no new easing, no new gradient —
# every value below reuses --brand-gradient(-cta/-soft), --glass-bg,
# --glass-border, --shadow-soft/-lift/-cta(-hover), --ease-premium
# and the icon-badge / gradient-CTA-pill / hover-lift patterns
# already established in Phases 1-6.
#
# #services-alt ("How Workzio Helps You") was the one section no
# earlier phase ever touched — it was still 100% stock template
# CSS (old #60aad7 blue, flat outline icons, plain .btn). Brought
# up to the same system here instead of being redesigned as a new
# language. Everything else in this block is light retouching of
# already-completed chrome (footer, scroll-top, preloader).
--------------------------------------------------------------*/

/* Ambient wash — same technique as Products/Highlights, just lighter */
#services-alt.services-alt.section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(900px 420px at 100% 0%, rgba(93, 87, 244, 0.05), transparent 60%),
    var(--background-color);
    padding-top: 60px;
    padding-bottom: 40px;
}

#services-alt .container {
  position: relative;
  z-index: 1;
}

.services-alt .content-block .subtitle {
  color: var(--accent-color);
}

.services-alt .content-block .title {
  letter-spacing: -0.01em;
}

/* Row list — recolor off the legacy blue and add the same
   hover-lift/background-wash language used by every other card in
   the system, without turning the list into a grid of cards */
.services-alt .services-list .service-item {
  border-bottom-color: color-mix(in srgb, var(--default-color), transparent 90%);
  border-radius: 14px;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  margin: 0 -0.75rem;
  transition: background 300ms var(--ease-premium), transform 300ms var(--ease-premium);
}

.services-alt .services-list .service-item:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 96%);
  transform: translateX(4px);
}

.services-alt .services-list .service-icon {
  border: none;
  border-radius: 18px;
  background: var(--brand-gradient-soft);
  transition: transform 350ms var(--ease-premium), background 350ms var(--ease-premium);
}

.services-alt .services-list .service-item:hover .service-icon {
  background: var(--brand-gradient);
  transform: scale(1.08) rotate(-6deg);
}

.services-alt .services-list .service-icon i {
  color: var(--accent-color);
  transition: color 300ms var(--ease-premium);
}

.services-alt .services-list .service-item:hover .service-icon i {
  color: #fff;
}

.services-alt .services-list .service-content h4 a {
  display: inline-block;
  transition: color 300ms var(--ease-premium), transform 300ms var(--ease-premium);
}

.services-alt .services-list .service-item:hover .service-content h4 a {
  color: var(--accent-color);
  transform: translateX(2px);
}

@media (prefers-reduced-motion: reduce) {
  .services-alt .services-list .service-item,
  .services-alt .services-list .service-icon,
  .services-alt .services-list .service-icon i,
  .services-alt .services-list .service-content h4 a {
    animation: none !important;
    transition: none !important;
  }
}

/*--------------------------------------------------------------
# Footer — glass-consistent recolor of the stock template footer.
# Markup unchanged apart from removing the dead LinkedIn icon and
# fixing the empty .sitename span (see index.html and the other
# static pages); every rule here just retargets existing selectors.
--------------------------------------------------------------*/
.footer {
  position: relative;
  background: var(--background-color);
}

.footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: var(--brand-gradient);
  opacity: 0.5;
}

.footer .footer-top {
  padding-top: 64px;
}

.footer h4 {
  position: relative;
  padding-bottom: 16px;
  letter-spacing: -0.01em;
}

.footer h4::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 36px;
  height: 3px;
  border-radius: 3px;
  background: var(--brand-gradient);
}

.footer .footer-contact p strong {
  color: var(--heading-color);
}

.footer .footer-links ul a {
  transition: color 250ms var(--ease-premium), transform 250ms var(--ease-premium);
}

.footer .footer-links ul a:hover {
  color: var(--accent-color);
  transform: translateX(4px);
}

/* Social icons — glass circle with gradient fill on hover, same
   lift/scale language as every other icon badge in the system */
.footer .social-links a {
  background: var(--glass-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border);
  color: var(--accent-color);
  transition: transform 300ms var(--ease-premium), background 300ms var(--ease-premium), color 300ms var(--ease-premium), border-color 300ms var(--ease-premium);
}

.footer .social-links a:hover {
  background: var(--brand-gradient);
  border-color: transparent;
  color: #fff;
  transform: translateY(-4px);
}

.footer .social-links a:focus-visible {
  outline: 2px solid #1565c0;
  outline-offset: 2px;
}

.footer .copyright {
  border-top-color: var(--glass-border);
}

.footer .copyright .sitename {
  color: var(--heading-color);
}

.footer .credits a {
  color: var(--accent-color);
}

@media (prefers-reduced-motion: reduce) {
  .footer .footer-links ul a,
  .footer .social-links a {
    animation: none !important;
    transition: none !important;
  }
}

/*--------------------------------------------------------------
# Global chrome — scroll-top button + preloader retinted off the
# legacy #60aad7 blue onto the current brand gradient. Structure,
# JS, and main.css's own keyframes are untouched.
--------------------------------------------------------------*/
.scroll-top {
  background: var(--brand-gradient-cta);
  border-radius: 12px;
  box-shadow: var(--shadow-cta);
  /* Stacked above the WhatsApp button below (60px tall, bottom:24px)
     with a 16px gap, so the two fixed corner buttons never overlap. */
  right: 24px;
  bottom: 100px;
  transition: transform 300ms var(--ease-premium), box-shadow 300ms var(--ease-premium), opacity 0.4s, visibility 0.4s, bottom 0.4s, right 0.4s;
}

.scroll-top:hover {
  background: var(--brand-gradient-cta);
  transform: translateY(-4px);
  box-shadow: var(--shadow-cta-hover);
}

.scroll-top:focus-visible {
  outline: 2px solid #1565c0;
  outline-offset: 2px;
}

#preloader {
  background: var(--background-color);
}

#preloader:before {
  border-color: var(--accent-color) transparent var(--accent-color) transparent;
}

/*--------------------------------------------------------------
# WhatsApp floating chat button — official WhatsApp green, fixed
# bottom-right corner. The scroll-top button (above) is repositioned
# to stack directly above it rather than the reverse, since that's
# the only spatially coherent way to honor an exact bottom:24/
# right:24 pin for this button while guaranteeing zero overlap with
# the existing 40px scroll-top button.
--------------------------------------------------------------*/
.whatsapp-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 99999;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  font-size: 1.85rem;
  box-shadow: 0 10px 28px -8px rgba(37, 211, 102, 0.55), var(--shadow-soft);
  transition: transform 300ms var(--ease-premium), box-shadow 300ms var(--ease-premium), background 300ms var(--ease-premium);
  animation: whatsappPulse 3.6s ease-in-out infinite;
}

.whatsapp-float:hover {
  background: #20bd5a;
  color: #fff;
  transform: translateY(-4px) scale(1.04);
  box-shadow: 0 16px 34px -8px rgba(37, 211, 102, 0.6), var(--shadow-lift);
}

.whatsapp-float:focus-visible {
  outline: 2px solid #1565c0;
  outline-offset: 3px;
}

.whatsapp-float i {
  position: relative;
  z-index: 1;
}

/* Expanding ring — same technique as the hero's security badge pulse */
.whatsapp-float::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid #25d366;
  animation: whatsappRing 3.6s ease-out infinite;
  pointer-events: none;
}

/* Press ripple — same CSS-only technique used across the site's CTAs */
.whatsapp-float::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.6) 0%, transparent 65%);
  opacity: 0;
  transform: scale(0.4);
  transition: transform 450ms var(--ease-premium), opacity 450ms var(--ease-premium);
  pointer-events: none;
}

.whatsapp-float:active::after {
  transform: scale(1.6);
  opacity: 1;
  transition: transform 0s, opacity 0s;
}

/* Gentle pulse "every few seconds" rather than a continuous breathe —
   the scale change is compressed into the last ~15% of a long cycle,
   with a still hold for the rest. */
@keyframes whatsappPulse {
  0%, 85% { transform: scale(1); }
  90% { transform: scale(1.08); }
  95% { transform: scale(0.98); }
  100% { transform: scale(1); }
}

@keyframes whatsappRing {
  0%, 80% { transform: scale(1); opacity: 0; }
  85% { opacity: 0.5; }
  100% { transform: scale(1.35); opacity: 0; }
}

@media (max-width: 767.98px) {
  .whatsapp-float {
    width: 56px;
    height: 56px;
    bottom: 16px;
    right: 16px;
    font-size: 1.7rem;
  }

  .scroll-top {
    right: 16px;
    bottom: 84px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .whatsapp-float,
  .whatsapp-float::before,
  .whatsapp-float::after {
    animation: none !important;
    transition: opacity 0.4s, visibility 0.4s !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-top {
    transition: opacity 0.4s, visibility 0.4s;
  }

  /* Loading spinner is a functional progress indicator, not a
     decorative flourish, so it isn't removed entirely — just slowed
     down, matching the spirit of reduced-motion without hiding that
     the page is still loading. */
  #preloader:before {
    animation-duration: 3s;
  }
}

/*--------------------------------------------------------------
# Product pages (product-billing.html / product-hotel.html) — the
# two intro CTA buttons were raw Bootstrap .btn-primary / .btn-
# outline-primary. axe flagged the outline button's default
# #0d6efd-on-page-background text at 4.14:1, under WCAG AA's 4.5:1
# (the filled button was borderline-passing but visually inconsistent
# with every other CTA on the site). Scoped by href so index.html's
# own already-styled hero button (href="#contact", handled in Phase 1)
# is untouched — reuses the same accessible gradient pill everywhere
# else in the system.
--------------------------------------------------------------*/
a.btn.btn-primary[href$="index.html#contact"] {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--brand-gradient-cta);
  border: none;
  border-radius: 999px;
  color: #fff;
  font-weight: 600;
  box-shadow: var(--shadow-cta);
  transition: transform 300ms var(--ease-premium), box-shadow 300ms var(--ease-premium);
}

a.btn.btn-primary[href$="index.html#contact"]:hover {
  background: var(--brand-gradient-cta);
  color: #fff;
  transform: translateY(-3px);
  box-shadow: var(--shadow-cta-hover);
}

a.btn.btn-outline-primary[href$="index.html#contact"] {
  border-radius: 999px;
  border-color: var(--accent-color);
  color: var(--accent-color);
  font-weight: 600;
  transition: color 300ms var(--ease-premium), background 300ms var(--ease-premium), border-color 300ms var(--ease-premium), transform 300ms var(--ease-premium);
}

a.btn.btn-outline-primary[href$="index.html#contact"]:hover {
  background: var(--accent-color);
  border-color: var(--accent-color);
  color: #fff;
  transform: translateY(-3px);
}

a.btn.btn-primary[href$="index.html#contact"]:focus-visible,
a.btn.btn-outline-primary[href$="index.html#contact"]:focus-visible {
  outline: 2px solid #1565c0;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  a.btn.btn-primary[href$="index.html#contact"],
  a.btn.btn-outline-primary[href$="index.html#contact"] {
    transition: none !important;
  }
}

/*--------------------------------------------------------------
# Responsive image sizing — was a duplicated inline <style> block
# pasted into every page's <head> (index.html, privacy.html,
# terms.html, datadeletioninstructions.html, product-billing.html,
# product-hotel.html). Same rules, centralized here so there's one
# copy instead of six, consistent with "one design system" instead
# of six independently-maintained inline blocks.
--------------------------------------------------------------*/
@media (max-width: 767px) {
  .img-fluid {
    max-width: 100%;
    height: auto;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .img-fluid {
    max-width: 80%;
    height: auto;
  }
}