/* ==========================================================================
   THE XYRA STUDIO — style.css
   Luxury minimalism · matte black · glassmorphism · mint accent
   ========================================================================== */

:root {
  --bg: #050505;
  --surface: #101010;
  --mint: #4EEDB0;
  --white: #FFFFFF;
  --gray: #BDBDBD;
}

* { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

html, body { background: var(--bg); }

::selection { background: var(--mint); color: #050505; }

/* Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--mint); }

/* Focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ===================== PRELOADER (boot-style) ===================== */
#preloader {
  position: fixed; inset: 0; z-index: 999; background: #000;
  display: grid; place-items: center;
  transition: opacity .9s cubic-bezier(.4,0,.2,1) .15s, visibility 0s linear 1.05s;
}
#preloader.loaded { opacity: 0; visibility: hidden; pointer-events: none; }
.boot { display: flex; flex-direction: column; align-items: center; }
.boot-logo {
  width: clamp(72px, 14vw, 104px); height: auto;
  opacity: 0; transform: scale(.9);
  filter: drop-shadow(0 0 18px rgba(78,237,176,.55)) drop-shadow(0 0 48px rgba(78,237,176,.3));
  animation: bootIn 1.1s cubic-bezier(.22,1,.36,1) .1s forwards, bootGlow 3s ease-in-out 1.2s infinite;
  transition: transform .9s cubic-bezier(.4,0,.2,1), opacity .7s ease;
}
.boot-bar {
  width: 148px; height: 3px; margin-top: 56px; border-radius: 99px;
  background: rgba(255,255,255,.14); overflow: hidden;
  opacity: 0; animation: bootBarIn .7s ease .7s forwards;
  transition: opacity .4s ease;
}
#preloaderFill {
  height: 100%; width: 0; border-radius: inherit;
  background: #fff; box-shadow: 0 0 10px rgba(78,237,176,.6);
}
#preloader.loaded .boot-logo { transform: scale(1.12); opacity: 0; }
#preloader.loaded .boot-bar { opacity: 0; animation: none; }
@keyframes bootIn { to { opacity: 1; transform: scale(1); } }
@keyframes bootBarIn { to { opacity: 1; } }
@keyframes bootGlow {
  0%,100% { filter: drop-shadow(0 0 16px rgba(78,237,176,.5)) drop-shadow(0 0 40px rgba(78,237,176,.25)); }
  50% { filter: drop-shadow(0 0 24px rgba(78,237,176,.85)) drop-shadow(0 0 64px rgba(78,237,176,.45)); }
}
@media (prefers-reduced-motion: reduce) {
  .boot-logo { animation: none; opacity: 1; transform: none; }
  .boot-bar { animation: none; opacity: 1; }
}

/* ===================== PAGE TRANSITION ===================== */
body { transition: opacity 0.18s ease; }
body.page-leaving { opacity: 0; }

/* ===================== CURSOR GLOW ===================== */
.cursor-glow {
  position: fixed;
  top: 0; left: 0;
  width: 420px; height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(78,237,176,0.09) 0%, rgba(78,237,176,0) 70%);
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 1;
  will-change: transform;
}

/* ===================== NAVBAR ===================== */
/* IMPORTANT: #navbar itself must NEVER receive a transform / filter /
   backdrop-filter / will-change:transform. Any of those on this element
   creates a new containing block for its position:fixed children — and
   #mobileMenu lives inside #navbar. That containing-block switch was the
   root cause of the "hamburger sits on top of the open menu while
   scrolling" bug: once .scrolled applied backdrop-filter to #navbar, the
   fixed mobile menu silently became "fixed" relative to the navbar's own
   (short) box instead of the viewport, so it stopped covering the screen
   and page content bled through underneath it.
   The blur/tint now lives on a decoupled ::before layer instead. */
#navbar { backdrop-filter: none; z-index: 40; }
#navbar::before {
  content: '';
  position: absolute; inset: 0;
  z-index: -1;
  opacity: 0;
  background: rgba(5,5,5,0.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: opacity 0.4s ease;
  pointer-events: none;
}
#navbar.scrolled::before { opacity: 1; }
#navbar::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(78,237,176,0.5), transparent);
  background-size: 200% 100%;
  opacity: 0;
  transition: opacity 0.4s ease;
  animation: navGlowSweep 6s linear infinite;
  pointer-events: none;
}
#navbar.scrolled::after { opacity: 1; }
@keyframes navGlowSweep {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) { #navbar::after { animation: none; } }
.nav-link {
  position: relative;
  transition: color 0.3s ease;
}
.nav-link:hover, .nav-link.active { color: var(--white); }
.nav-link::after {
  content: '';
  position: absolute; left: 0; bottom: -4px;
  width: 0; height: 1px;
  background: var(--mint);
  transition: width 0.3s ease;
}
.nav-link:hover::after, .nav-link.active::after { width: 100%; }
.nav-link.active { color: var(--mint); }

/* Logo mark (uploaded logo image) — navbar / footer / loader / 404 */
.logo-mark {
  height: 30px;
  width: auto;
  display: block;
  transition: transform 0.4s ease;
}
.logo-mark:hover { transform: rotate(-6deg) scale(1.06); }
.logo-lockup { display: inline-flex; align-items: center; gap: 0.6rem; }
.logo-wordmark { font-family: 'Space Grotesk', sans-serif; letter-spacing: -0.02em; }

.mobile-menu {
  position: fixed;
  inset: 0;
  background: rgba(5,5,5,0.98);
  backdrop-filter: blur(16px);
  z-index: 100; /* always above the navbar (40) and any other page chrome */
  transform: translateX(100%);
  transition: transform 0.5s cubic-bezier(0.65,0,0.35,1), visibility 0.5s;
  visibility: hidden;
  overscroll-behavior: contain;
  contain: layout style paint; /* the blurred overlay repaints itself only, never the page underneath */
}
.mobile-menu.open { transform: translateX(0); visibility: visible; will-change: transform; }
.mobile-link {
  color: var(--white);
  transition: color 0.3s ease, transform 0.4s cubic-bezier(0.2,0.8,0.2,1), opacity 0.4s ease;
  opacity: 0; transform: translateY(14px);
}
.mobile-link:hover { color: var(--mint); }
/* Staggered entrance for each link once the panel is open */
.mobile-menu.open .mobile-link {
  opacity: 1; transform: translateY(0);
  transition-delay: calc(var(--i, 0) * 0.05s + 0.15s);
}

/* Locks body scroll (position:fixed technique) without the iOS
   rubber-band / background-scroll-through that plain overflow:hidden allows */
body.menu-open {
  position: fixed;
  left: 0; right: 0;
  width: 100%;
}

/* ===================== ANIMATED HAMBURGER ===================== */
.hamburger {
  position: relative;
  width: 24px; height: 18px;
  z-index: 110; /* stays above the menu it controls */
}
.hamburger .bar {
  position: absolute; left: 0;
  width: 100%; height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: transform 0.4s cubic-bezier(0.65,0,0.35,1), opacity 0.3s ease, top 0.4s cubic-bezier(0.65,0,0.35,1);
}
.hamburger .bar:nth-child(1) { top: 0; }
.hamburger .bar:nth-child(2) { top: 8px; }
.hamburger .bar:nth-child(3) { top: 16px; }
.hamburger.is-open .bar:nth-child(1) { top: 8px; transform: rotate(45deg); }
.hamburger.is-open .bar:nth-child(2) { opacity: 0; }
.hamburger.is-open .bar:nth-child(3) { top: 8px; transform: rotate(-45deg); }

/* ===================== BUTTONS ===================== */
.btn-primary, .btn-primary-sm {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--mint);
  color: #050505;
  font-weight: 600;
  padding: 0.9rem 1.7rem;
  border-radius: 999px;
  font-size: 0.9rem;
  transition: transform 0.15s ease-out, box-shadow 0.35s ease, background 0.3s ease;
  position: relative;
  overflow: hidden;
}
.btn-primary-sm { padding: 0.7rem 1.4rem; font-size: 0.85rem; }
.btn-primary:hover, .btn-primary-sm:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 40px -6px rgba(78,237,176,0.5);
}

.btn-glass, .btn-glass-sm {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(8px);
  color: var(--white);
  padding: 0.9rem 1.7rem;
  border-radius: 999px;
  font-size: 0.9rem;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.15s ease-out;
}
.btn-glass-sm { padding: 0.65rem 1.3rem; font-size: 0.85rem; }
.btn-glass:hover, .btn-glass-sm:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(78,237,176,0.5);
  transform: translateY(-2px);
}

/* Ripple */
.btn-primary, .btn-glass, .btn-primary-sm, .btn-glass-sm { position: relative; }
.btn-primary:hover, .btn-glass:hover, .btn-primary-sm:hover, .btn-glass-sm:hover,
.glass-card:hover, .price-card:hover { will-change: transform; }

/* ===================== TOUCH / PRESS FEEDBACK ===================== */
/* Driven by Pointer Events in JS rather than CSS :active — iOS Safari
   doesn't reliably trigger :active without a touchstart listener present,
   which is what made taps feel unresponsive. Pointer Events fire on the
   same frame as the physical touch on every platform. */
.btn-primary.is-pressed, .btn-glass.is-pressed,
.btn-primary-sm.is-pressed, .btn-glass-sm.is-pressed,
.service-card.is-pressed:not(.is-expanded),
.price-card.is-pressed, .glass-card.is-pressed {
  transform: scale(0.97) !important;
  transition: transform 0.08s ease-out !important;
}
/* Applied for ~280ms right after release for a soft spring settle */
.is-springing {
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  transform: scale(0);
  animation: ripple-anim 0.6s ease-out;
  pointer-events: none;
}
@keyframes ripple-anim {
  to { transform: scale(3); opacity: 0; }
}

/* ===================== GLASS UTILITIES ===================== */
.glass {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.glass-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 1.25rem;
  transition: border-color 0.4s ease, transform 0.4s ease;
}

/* ===================== HERO ===================== */

/* Seamless hero-to-next-section transition */
.hero-section {
  position: relative;
  isolation: isolate;
  overflow: visible;
}
.hero-section > .grain {
  overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
  .aurora-blob { animation: none !important; }
}

.aurora {
  /* One continuous glow layer: no overflow clipping, no blur filters (those get
     cut at the box edge), layered radial gradients and a long radial mask so the
     glow keeps fading behind the sections below the hero. */
  position: absolute;
  top: 0; left: 0; right: 0;
  height: max(1100px, 190svh);
  z-index: 0;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 100% 100% at 50% 28%, #000 30%, rgba(0,0,0,.5) 60%, transparent 100%);
  mask-image: radial-gradient(ellipse 100% 100% at 50% 28%, #000 30%, rgba(0,0,0,.5) 60%, transparent 100%);
}
.aurora-blob { position: absolute; border-radius: 50%; filter: none; will-change: transform; }
.blob-1 {
  width: 90vw; height: 70vw; max-width: 1300px; max-height: 1000px;
  background: radial-gradient(closest-side, rgba(78,237,176,.34), rgba(78,237,176,.12) 55%, transparent 100%);
  top: -10%; left: -6%;
  animation: drift1 22s ease-in-out infinite alternate;
}
.blob-2 {
  width: 80vw; height: 60vw; max-width: 1100px; max-height: 900px;
  background: radial-gradient(closest-side, rgba(47,214,160,.26), rgba(47,214,160,.08) 55%, transparent 100%);
  top: 22%; right: -6%;
  animation: drift2 26s ease-in-out infinite alternate;
}
.blob-3 {
  width: 100vw; height: 60vw; max-width: 1500px; max-height: 900px;
  background: radial-gradient(closest-side, rgba(78,237,176,.12), transparent 100%);
  top: 38%; left: 0;
  animation: drift3 18s ease-in-out infinite alternate;
}
@keyframes drift1 { from { transform: translate(0,0); } to { transform: translate(6%, 8%); } }
@keyframes drift2 { from { transform: translate(0,0); } to { transform: translate(-8%, -6%); } }
@keyframes drift3 { from { transform: translate(0,0) scale(1); } to { transform: translate(4%, -10%) scale(1.15); } }

.grain {
  position: absolute; inset: 0; z-index: 1;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  pointer-events: none;
}

.hero-heading { letter-spacing: -0.02em; }
.reveal-line { display: block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; }
.reveal-line span { display: inline-block; }

/* ===================== SHARED SECTION TEXT ===================== */
.eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mint);
  font-weight: 600;
}

/* ===================== STATS ===================== */
.stat-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 1.25rem;
  padding: 2rem 1.5rem;
  transition: border-color 0.4s ease;
}
.stat-card:hover { border-color: rgba(78,237,176,0.4); }
.stat-number {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(2rem, 4vw, 2.75rem);
  color: var(--white);
}
.stat-label { color: var(--gray); font-size: 0.85rem; margin-top: 0.4rem; }

/* ===================== SERVICE CARDS ===================== */
.service-card {
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 1.5rem;
  padding: 2.25rem;
  overflow: hidden;
  transition: transform 0.45s cubic-bezier(0.2,0.8,0.2,1), border-color 0.45s ease;
}
.service-card:hover {
  transform: translateY(-6px);
  border-color: rgba(78,237,176,0.45);
}
.service-glow {
  position: absolute;
  top: -40%; right: -30%;
  width: 60%; height: 60%;
  background: radial-gradient(circle, rgba(78,237,176,0.25), transparent 70%);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
.service-card:hover .service-glow { opacity: 1; }

/* ===================== SERVICE ICON MICRO-ANIMATIONS ===================== */
/* One-shot on hover (not infinite loops) — desktop pointer only, and the
   global prefers-reduced-motion rule above already zeroes these out. */
.service-icon { transform-origin: center; }
@media (hover: hover) and (pointer: fine) {
  .service-card[data-service="seo"]:hover .service-icon { animation: iconSeoSpin 0.6s ease; }
  .service-card[data-service="google-ads"]:hover .service-icon { animation: iconPulse 1s ease-in-out; }
  .service-card[data-service="meta-ads"]:hover .service-icon { animation: iconFloat 1.4s ease-in-out; }
  .service-card[data-service="video"]:hover .service-icon { animation: iconBounce 0.7s ease; }
  .service-card[data-service="branding"]:hover .service-icon { animation: iconSlowSpin 1.1s ease-in-out; }
  .service-card[data-service="web"]:hover .service-icon { animation: iconGlowPulse 1s ease-in-out; }
  .service-card[data-service="content"]:hover .service-icon { animation: iconWrite 0.6s ease-in-out; }
  .service-card[data-service="social"]:hover .service-icon { animation: iconNode 1s ease-in-out; }
}
@keyframes iconSeoSpin { 0%,100% { transform: rotate(0) scale(1); } 50% { transform: rotate(-16deg) scale(1.15); } }
@keyframes iconPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.14); } }
@keyframes iconFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes iconBounce { 0%,100% { transform: translateY(0); } 30% { transform: translateY(-9px); } 55% { transform: translateY(0); } 75% { transform: translateY(-3px); } }
@keyframes iconSlowSpin { from { transform: rotate(0); } to { transform: rotate(180deg); } }
@keyframes iconGlowPulse { 0%,100% { filter: drop-shadow(0 0 0 rgba(78,237,176,0)); } 50% { filter: drop-shadow(0 0 7px rgba(78,237,176,0.75)); } }
@keyframes iconWrite { 0%,100% { transform: translateX(0) rotate(0); } 25% { transform: translateX(-2px) rotate(-8deg); } 75% { transform: translateX(2px) rotate(8deg); } }
@keyframes iconNode { 0%,100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.1) rotate(10deg); } }

/* ===================== EXPANDABLE SERVICE CARDS (Dynamic Island) ===================== */
/* will-change only while a card is actually moving (hovered or mid-Flip) —
   leaving it on all 8 cards permanently was forcing 8 idle GPU layers. */
.service-card { cursor: pointer; }
.service-card:hover, .service-card.is-animating { will-change: transform; }
.service-card:focus-visible { outline: 2px solid var(--mint); outline-offset: 4px; }

.service-scrim {
  position: fixed; inset: 0;
  background: rgba(3,3,3,0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 85;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.24s ease, visibility 0.24s;
  contain: strict; /* the one blurred overlay — contained so it never forces the rest of the page to repaint */
}
.service-scrim.visible { opacity: 1; visibility: visible; }

/* Collapsed state: only the compact summary is visible/hittable */
.service-expanded-content {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}

/* ---------------------------------------------------------------------
   Service modal — a single, dedicated fixed panel that always opens
   dead-center in the viewport, regardless of which card was clicked or
   where that card sits in the grid. The clicked card's expanded content
   is moved into this panel (not cloned, so the close button/links inside
   it keep working) and moved back on close.

   GPU-friendly: only transform + opacity are animated. will-change is
   applied only while the panel is actually transitioning.
--------------------------------------------------------------------- */
.service-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  width: min(90vw, 900px);
  max-height: 85vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  z-index: 90;
  padding: 2.5rem 2.5rem 3rem;
  background: linear-gradient(180deg, rgba(20,20,20,0.98), rgba(10,10,10,0.98));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 1.75rem;
  box-shadow: 0 40px 120px -20px rgba(0,0,0,0.7), 0 0 80px -10px rgba(78,237,176,0.12);
  contain: layout paint;

  transform: translate(-50%, -50%) scale(0.95);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform 0.26s cubic-bezier(0.22,1,0.36,1),
              opacity 0.22s cubic-bezier(0.22,1,0.36,1),
              visibility 0s linear 0.26s;
}
.service-modal.open {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  will-change: transform, opacity;
  transition: transform 0.26s cubic-bezier(0.22,1,0.36,1),
              opacity 0.22s cubic-bezier(0.22,1,0.36,1),
              visibility 0s;
}
.service-modal .service-expanded-content {
  max-height: none;
  opacity: 1;
  overflow: visible;
  pointer-events: auto;
}
.service-modal .service-glow { opacity: 1; }

.service-close {
  position: sticky; top: 0; float: right;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--white);
  transition: background 0.3s ease, transform 0.3s ease;
  z-index: 2;
}
.service-close:hover { background: rgba(255,255,255,0.14); transform: rotate(90deg); }

.swipe-handle {
  display: none;
  width: 40px; height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,0.2);
  margin: 0 auto 1.25rem;
}

.service-expanded-icon { width: 44px; height: 44px; color: var(--mint); display: block; margin-bottom: 1.25rem; }
.service-expanded-title { font-size: clamp(1.5rem, 4vw, 2rem); margin-bottom: 0.4rem; }
.service-expanded-subtitle { color: var(--mint); font-size: 0.95rem; margin-bottom: 1.5rem; }
.service-divider { height: 1px; background: rgba(255,255,255,0.1); margin-bottom: 1.5rem; }
.service-expanded-desc { color: var(--gray); line-height: 1.75; margin-bottom: 1.75rem; }

.service-benefits { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem 1rem; margin-bottom: 2rem; list-style: none; }
.service-benefits li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; color: var(--white); }

.service-meta { display: grid; gap: 1.25rem; margin-bottom: 2rem; }
.service-meta h4 { font-family: 'Space Grotesk', sans-serif; font-size: 0.8rem; color: var(--mint); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.4rem; }
.service-meta p { color: var(--gray); font-size: 0.9rem; line-height: 1.6; }

@media (max-width: 640px) {
  .service-modal {
    width: min(94vw, 900px);
    padding: 1.75rem 1.5rem 2.5rem;
  }
  .swipe-handle { display: block; }
  .service-benefits { grid-template-columns: 1fr; }
}

/* ===================== WHY CARDS ===================== */
.why-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 1.25rem;
  padding: 1.75rem;
  transition: transform 0.4s ease, border-color 0.4s ease;
}
.why-card:hover { transform: translateY(-4px); border-color: rgba(78,237,176,0.4); }

/* ===================== PORTFOLIO ===================== */
.filter-btn {
  font-size: 0.8rem;
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--gray);
  background: transparent;
  transition: all 0.3s ease;
}
.filter-btn:hover { color: var(--white); border-color: rgba(255,255,255,0.3); }
.filter-btn.active { background: var(--mint); color: #050505; border-color: var(--mint); font-weight: 600; }

.portfolio-card {
  position: relative;
  border-radius: 1.25rem;
  overflow: hidden;
  aspect-ratio: 4/3;
  border: 1px solid rgba(255,255,255,0.08);
  cursor: pointer;
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.2,0.8,0.2,1);
}
.portfolio-card.hide { display: none; }
.portfolio-media { position: absolute; inset: 0; transition: transform 0.6s cubic-bezier(0.2,0.8,0.2,1); }
.portfolio-card:hover .portfolio-media { transform: scale(1.08); }
.grad-1 { background: linear-gradient(135deg,#101010,#1b2f27,#4EEDB0 140%); }
.grad-2 { background: linear-gradient(135deg,#101010,#16221e,#2fd6a0 150%); }
.grad-3 { background: linear-gradient(135deg,#0c0c0c,#1a1a1a,#4EEDB0 160%); }
.grad-4 { background: linear-gradient(135deg,#101010,#183028,#3fe3ab 140%); }
.grad-5 { background: linear-gradient(135deg,#0d0d0d,#182420,#4EEDB0 150%); }
.grad-6 { background: linear-gradient(135deg,#101010,#1a2a24,#37d8a2 145%); }

.portfolio-info {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.25rem;
  background: linear-gradient(to top, rgba(0,0,0,0.75), transparent);
}
.portfolio-info span { font-size: 0.7rem; color: var(--mint); text-transform: uppercase; letter-spacing: 0.1em; }
.portfolio-info h3 { font-family: 'Space Grotesk', sans-serif; font-size: 1.05rem; margin-top: 0.3rem; }

.portfolio-featured-badge {
  position: absolute; top: 1rem; right: 1rem; z-index: 2;
  font-size: 0.65rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 0.3rem 0.65rem; border-radius: 999px;
  background: var(--mint); color: #050505;
  box-shadow: 0 4px 16px -4px rgba(78,237,176,0.5);
}

/* ---------------------------------------------------------------------
   Portfolio detail modal — same always-centered fixed panel pattern as
   the service modal, built dynamically per project by cms.js.
--------------------------------------------------------------------- */
.portfolio-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  width: min(92vw, 960px);
  max-height: 88vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  z-index: 90;
  background: linear-gradient(180deg, rgba(20,20,20,0.98), rgba(10,10,10,0.98));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 1.75rem;
  box-shadow: 0 40px 120px -20px rgba(0,0,0,0.7), 0 0 80px -10px rgba(78,237,176,0.12);
  contain: layout paint;

  transform: translate(-50%, -50%) scale(0.95);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform 0.26s cubic-bezier(0.22,1,0.36,1),
              opacity 0.22s cubic-bezier(0.22,1,0.36,1),
              visibility 0s linear 0.26s;
}
.portfolio-modal.open {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  will-change: transform, opacity;
  transition: transform 0.26s cubic-bezier(0.22,1,0.36,1),
              opacity 0.22s cubic-bezier(0.22,1,0.36,1),
              visibility 0s;
}
.portfolio-modal-media {
  width: 100%; aspect-ratio: 16/9; border-radius: 1.25rem 1.25rem 0 0;
  overflow: hidden; background-size: cover; background-position: center;
}
.portfolio-modal-body { padding: 2rem 2.25rem 2.5rem; }
.portfolio-modal-close {
  position: sticky; top: 1rem; float: right; margin-right: 1rem;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--white);
  transition: background 0.3s ease, transform 0.3s ease;
  z-index: 3;
}
.portfolio-modal-close:hover { background: rgba(0,0,0,0.65); transform: rotate(90deg); }
.portfolio-modal-eyebrow { font-size: 0.75rem; color: var(--mint); text-transform: uppercase; letter-spacing: 0.1em; }
.portfolio-modal-title { font-size: clamp(1.5rem, 4vw, 2.1rem); margin-top: 0.4rem; margin-bottom: 1rem; }
.portfolio-modal-desc { color: var(--gray); line-height: 1.75; margin-bottom: 1.75rem; }

.portfolio-modal-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1.25rem; margin-bottom: 1.75rem; }
.portfolio-modal-meta h4 { font-family: 'Space Grotesk', sans-serif; font-size: 0.75rem; color: var(--mint); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.35rem; }
.portfolio-modal-meta p { color: var(--white); font-size: 0.9rem; }

.portfolio-tech-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.75rem; }
.portfolio-tech-tag { font-size: 0.75rem; padding: 0.3rem 0.75rem; border-radius: 999px; border: 1px solid rgba(255,255,255,0.12); color: var(--gray); }

.portfolio-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.75rem; margin-bottom: 1.75rem; }
.portfolio-gallery img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 0.85rem; border: 1px solid rgba(255,255,255,0.08); }

.portfolio-before-after { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-bottom: 1.75rem; }
.portfolio-before-after figure { margin: 0; }
.portfolio-before-after img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 0.85rem; border: 1px solid rgba(255,255,255,0.08); }
.portfolio-before-after figcaption { font-size: 0.7rem; color: var(--gray); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 0.4rem; text-align: center; }

.portfolio-modal-links { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 0.5rem; }

@media (max-width: 640px) {
  .portfolio-modal-body { padding: 1.5rem 1.25rem 2rem; }
  .portfolio-before-after { grid-template-columns: 1fr; }
}

/* ===================== PRICING ===================== */
.price-card {
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 1.5rem;
  padding: 2.25rem;
  display: flex; flex-direction: column;
  transition: transform 0.4s ease, border-color 0.4s ease;
}
.price-card:hover { transform: translateY(-6px); border-color: rgba(78,237,176,0.35); }
.price-card.popular { border-color: var(--mint); background: linear-gradient(180deg, rgba(78,237,176,0.08), rgba(255,255,255,0.02)); }
.popular-badge {
  position: absolute; top: -0.85rem; left: 50%; transform: translateX(-50%);
  background: var(--mint); color: #050505; font-size: 0.7rem; font-weight: 700;
  padding: 0.3rem 0.9rem; border-radius: 999px; letter-spacing: 0.03em;
}
.price-amount { font-family: 'Space Grotesk', sans-serif; font-size: 2.2rem; margin-top: 1.5rem; color: var(--white); }
.price-amount span { font-size: 2.2rem; }
.price-list { margin-top: 1.75rem; display: flex; flex-direction: column; gap: 0.85rem; flex: 1; }
.price-list li { display: flex; align-items: center; gap: 0.6rem; font-size: 0.88rem; color: var(--gray); }

/* ===================== TESTIMONIALS ===================== */
.testimonial-card { padding: 2.75rem; text-align: center; }
.avatar-ring {
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(78,237,176,0.12);
  border: 1px solid rgba(78,237,176,0.4);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Space Grotesk', sans-serif; font-size: 0.8rem; color: var(--mint);
}
.swiper-pagination-bullet { background: var(--gray); opacity: 0.4; }
.swiper-pagination-bullet-active { background: var(--mint); opacity: 1; }

/* ===================== FAQ ===================== */
.faq-item {
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 1rem;
  background: rgba(255,255,255,0.02);
  overflow: hidden;
}
.faq-question {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.4rem 1.6rem;
  text-align: left;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1rem;
}
.faq-icon { transition: transform 0.35s ease; color: var(--mint); flex-shrink: 0; }
.faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.4s ease;
  padding: 0 1.6rem;
  color: var(--gray);
  font-size: 0.92rem;
  line-height: 1.7;
}
.faq-item.open .faq-answer { padding: 0 1.6rem 1.4rem; }

/* ===================== CONTACT ===================== */
.contact-link {
  display: flex; align-items: center; gap: 0.75rem;
  color: var(--gray);
  font-size: 0.92rem;
  transition: color 0.3s ease, transform 0.3s ease;
  width: fit-content;
}
.contact-link:hover { color: var(--white); transform: translateX(4px); }

.field { display: flex; flex-direction: column; gap: 0.5rem; }
.field label { font-size: 0.78rem; color: var(--gray); }
.field input, .field select, .field textarea {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  color: var(--white);
  font-size: 0.9rem;
  transition: border-color 0.3s ease, background 0.3s ease;
}
.field input::placeholder, .field textarea::placeholder { color: #6b6b6b; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--mint);
  background: rgba(255,255,255,0.06);
  outline: none;
}
.field select option { background: #101010; }

/* ===================== FOOTER ===================== */
.footer-link { transition: color 0.3s ease; }
.footer-link:hover { color: var(--mint); }
.social-icon {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.12);
  display: flex; align-items: center; justify-content: center;
  color: var(--gray);
  transition: all 0.3s ease;
  flex: 0 0 38px;
  text-decoration: none;
}
.social-icon .brand-social-svg { width: 18px; height: 18px; display: block; overflow: visible; }
.social-icon:hover { border-color: var(--mint); color: var(--mint); background: rgba(78,237,176,0.08); transform: translateY(-3px); }
.social-icon:focus-visible { outline: 2px solid var(--mint); outline-offset: 4px; }
/* Hero aurora fade is shared across all breakpoints. */
.newsletter-input {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 0.75rem 0 0 0.75rem;
  padding: 0.7rem 1rem;
  font-size: 0.85rem;
  color: var(--white);
  flex: 1;
  min-width: 0;
}
.newsletter-input:focus { outline: none; border-color: var(--mint); }
.newsletter-btn {
  background: var(--mint);
  color: #050505;
  padding: 0 1rem;
  border-radius: 0 0.75rem 0.75rem 0;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.3s ease;
}
.newsletter-btn:hover { transform: translateX(2px); }

/* ===================== SCROLL REVEAL ===================== */
[data-reveal] { opacity: 0; transform: translateY(28px); }
[data-reveal].revealed {
  opacity: 1; transform: translateY(0);
  transition: opacity 0.9s cubic-bezier(0.2,0.7,0.2,1), transform 0.9s cubic-bezier(0.2,0.7,0.2,1);
}

/* ===================== 404 PAGE ===================== */
.error-code {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(5rem, 18vw, 11rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--white);
}

/* ===================== MOBILE PERFORMANCE ===================== */
/* Heavy blur/backdrop-filter is the biggest GPU cost on phones — trim it down
   below the tablet breakpoint so scrolling and transitions stay smooth. */
@media (max-width: 768px) {
  .aurora { height: max(900px, 170svh); }
  .glass, .glass-card, .service-card, .price-card, .stat-card, #navbar.scrolled {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  .grain { display: none; }
  .cursor-glow { display: none !important; }
  .service-card:hover, .why-card:hover, .stat-card:hover, .price-card:hover {
    transform: none;
  }
}

/* The Xyra Studio additions */
.xyra-whatsapp-float{position:fixed;right:22px;bottom:22px;z-index:9999;display:flex;align-items:center;gap:9px;padding:13px 17px;border-radius:999px;background:#4EEDB0;color:#04110b;font-weight:700;box-shadow:0 10px 35px #0008;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease}
.xyra-whatsapp-float:hover{transform:translateY(-3px);box-shadow:0 14px 40px #4EEDB055}.xyra-whatsapp-float svg{width:20px;height:20px}
.xyra-service-logo{width:38px;height:38px;object-fit:contain;display:block;border-radius:7px}.xyra-service-logo-expanded{width:52px;height:52px;object-fit:contain;display:block;margin:8px 0 16px}
@media(max-width:640px){.xyra-whatsapp-float{right:14px;bottom:14px;padding:12px}.xyra-whatsapp-float span{display:none}}

.home-service summary{list-style:none;cursor:pointer}.home-service summary::-webkit-details-marker{display:none}.home-service[open]{border-color:#4EEDB0}.home-service-detail{margin-top:18px;padding-top:16px;border-top:1px solid #ffffff22;color:#bdbdbd;font-size:13px;line-height:1.7}

.about-cms-image{max-width:520px;width:100%;max-height:320px;object-fit:cover;border-radius:18px;margin:32px auto 0;border:1px solid #ffffff22}

.about-cms-image[hidden]{display:none}

/* Glow may extend to the viewport edge but never creates sideways scroll. */
html, body { overflow-x: clip; }

/* ===================== v3: uniform service icons, card interactions, menu ===================== */
/* One icon system: 44px tile, same border/background, same stroke weight */
.service-card > svg.lucide, .service-card > i[data-lucide], .service-compact > svg.lucide, .service-compact > i[data-lucide],
.home-service summary > svg.lucide, .home-service summary > i[data-lucide],
.service-card > img.xyra-service-logo, .service-compact > img.xyra-service-logo, .home-service summary > img.xyra-service-logo {
  width: 44px; height: 44px; box-sizing: border-box; display: block; flex: none;
  margin: 0 0 1.1rem; border-radius: 12px;
  border: 1px solid rgba(78,237,176,.22); background: rgba(78,237,176,.06);
  color: var(--mint, #4EEDB0); stroke-width: 1.75;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .35s ease, box-shadow .35s ease;
}
.service-card svg.lucide, .service-compact svg.lucide, .home-service summary svg.lucide { padding: 10px; }
.service-card img.xyra-service-logo, .home-service summary img.xyra-service-logo { padding: 0; object-fit: contain; background: rgba(78,237,176,.06); }
.xyra-service-logo-expanded, .service-expanded-icon { width: 52px !important; height: 52px !important; border-radius: 14px; border: 1px solid rgba(78,237,176,.22); background: rgba(78,237,176,.06); object-fit: contain; }
svg.service-expanded-icon { padding: 12px; background: rgba(78,237,176,.06); }

/* Clickable cards: arrow, lift, glow */
.service-card, .home-service { position: relative; cursor: pointer; }
.service-card::after, .home-service::after {
  content: "\2197"; position: absolute; top: 18px; right: 20px; font-size: 18px; line-height: 1;
  color: var(--mint, #4EEDB0); opacity: .55; transform: translate(0,0);
  transition: opacity .3s ease, transform .3s ease; pointer-events: none;
}
.service-card:hover, .home-service:hover, .service-card:focus-visible, .home-service:focus-within {
  border-color: rgba(78,237,176,.55); box-shadow: 0 0 0 1px rgba(78,237,176,.25), 0 10px 40px -12px rgba(78,237,176,.35);
}
.service-card:hover::after, .home-service:hover::after { opacity: 1; transform: translate(3px,-3px); }
.service-card:hover svg.lucide, .service-card:hover img.xyra-service-logo, .home-service:hover svg.lucide, .home-service:hover img.xyra-service-logo { transform: translateY(-3px); border-color: rgba(78,237,176,.6); }
.service-card:focus-visible { outline: 2px solid var(--mint, #4EEDB0); outline-offset: 3px; }
.home-service summary { list-style: none; padding-right: 1.5rem; }
.home-service-detail { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.svc-link { color: var(--mint, #4EEDB0); font-size: 13px; text-decoration: none; }
.svc-link:hover { text-decoration: underline; }
.btn-xl { padding: 1.1rem 2rem; font-size: 1rem; letter-spacing: .04em; max-width: 100%; text-align: center; }

/* Mobile menu: hamburger is the ONLY close control; 44px tap target */
.hamburger::before { content: ""; position: absolute; inset: -14px -10px; }
.mobile-menu { overflow-y: auto; }

/* Layout: desktop 4 / tablet 2 / mobile 1 column, never clipped */
#homeServicesGrid, #servicesGrid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { #homeServicesGrid, #servicesGrid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1024px) { #homeServicesGrid { grid-template-columns: repeat(4, minmax(0,1fr)); } #servicesGrid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
#homeServicesGrid > *, #servicesGrid > * { min-width: 0; }
@media (prefers-reduced-motion: reduce) { .service-card, .home-service, .service-card *, .home-service * { transition: none !important; animation: none !important; } }

/* Contain decorative glow horizontally at its own layer so nothing can widen the page */
.aurora, main { overflow-x: clip; }

.home-pricing-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; align-items: stretch; }
@media (min-width: 768px) { .home-pricing-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1024px) { .home-pricing-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.home-pricing-grid > * { min-width: 0; }

.home-pricing-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; align-items: stretch; }
@media (min-width: 768px) { .home-pricing-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1024px) { .home-pricing-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.home-pricing-grid > * { min-width: 0; }