/* styles.css - minimal local fallback layer
   Purpose: Provide readable, accessible baseline if Tailwind CDN fails or user is offline.
   This does NOT attempt to replicate full Tailwind utility coverage; it ensures text visibility,
   font usage, and basic layout integrity. */

/* Font family fallbacks */
body,html { margin:0; padding:0; font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif; }
*, *::before, *::after { box-sizing: border-box; }

/* Color variables matching theme */
:root {
  --color-base:#0a0a0a;
  --color-neon:#D7FF00;
  --color-ink:#e5e7eb;
  --color-panel:#18181b;
  --color-border:#27272a;
}

body { background:var(--color-base); color:var(--color-ink); -webkit-font-smoothing:antialiased; }

/* Fluid media fallbacks */
img, video, canvas, svg { max-width: 100%; height: auto; }
iframe { max-width: 100%; }

/* Headings readable */
h1,h2,h3,h4,h5,h6 { color:#fff; font-weight:700; line-height:1.15; letter-spacing:.5px; }

/* Links */
a { color:var(--color-ink); text-decoration:none; }
a:hover, a:focus { color:var(--color-neon); }

/* Utility-ish minimal set (only what we rely on visually if Tailwind missing) */
.text-neon { color:var(--color-neon) !important; }
.text-white { color:#ffffff !important; }
.text-zinc-100 { color:#f4f4f5 !important; }
.text-zinc-200 { color:#e5e7eb !important; }
.text-zinc-300 { color:#d4d4d8 !important; }
.text-zinc-400 { color:#a1a1aa !important; }
.text-zinc-500 { color:#71717a !important; }
.bg-base { background:var(--color-base) !important; }
.border { border:1px solid var(--color-border); }
.border-zinc-800 { border-color:var(--color-border) !important; }
.rounded-xl { border-radius:1rem; }
.rounded-lg { border-radius:.75rem; }
.rounded-md { border-radius:.5rem; }

/* Basic flex/grid fallbacks */
.flex { display:flex; }
.grid { display:grid; }
.items-center { align-items:center; }
.justify-between { justify-content:space-between; }
.justify-center { justify-content:center; }
.gap-3 { gap:.75rem; }
.gap-4 { gap:1rem; }
.gap-6 { gap:1.5rem; }

/* Spacing (only few) */
.p-4 { padding:1rem; }
.p-8 { padding:2rem; }
.py-6 { padding-top:1.5rem; padding-bottom:1.5rem; }
.mx-auto { margin-left:auto; margin-right:auto; }

/* Width helpers */
.w-full { width:100%; }
.max-w-6xl { max-width:72rem; }
.max-w-7xl { max-width:80rem; }

/* Typography helpers */
.uppercase { text-transform:uppercase; }
.font-semibold { font-weight:600; }
.font-bold { font-weight:700; }
.tracking-wide { letter-spacing:.05em; }
.tracking-wider { letter-spacing:.08em; }
.text-xs { font-size:.75rem; }
.text-sm { font-size:.875rem; }
.text-base { font-size:1rem; }
.text-lg { font-size:1.125rem; }
.text-xl { font-size:1.25rem; }
.text-2xl { font-size:1.5rem; }
.text-3xl { font-size:1.875rem; }
.text-4xl { font-size:2.25rem; }
.text-5xl { font-size:3rem; }
.text-6xl { font-size:3.75rem; }
.leading-relaxed { line-height:1.6; }

/* Buttons baseline */
button { cursor:pointer; font-family:inherit; }
button:focus-visible, a:focus-visible { outline:2px solid var(--color-neon); outline-offset:2px; }

/* Simple neon accent */
.bg-neon { background:var(--color-neon); color:#000; }
.bg-neon\/90 { background:rgba(215,255,0,0.9); }
.bg-neon\/20 { background:rgba(215,255,0,0.2); }

/* Transitional placeholders if Tailwind missing */
.transition-colors, .transition-all { transition:all .25s ease; }

/* Active nav link highlight */
.nav-active { border-color: var(--color-neon) !important; color: #fff !important; }

/* Hide desktop nav on small screens (keep mobile menu) */
@media (max-width: 767px){
  header nav:not(#mobileMenu nav) { display:none !important; }
  #mobileMenuToggle { display:grid !important; }
}

/* Show desktop nav on medium+ screens */
@media (min-width: 768px){
  header nav:not(#mobileMenu nav) { display:flex !important; }
  #mobileMenuToggle { display:none !important; }
}

/* Boutique section grid fallback */
#boutique .grid { display:grid; grid-template-columns:1fr; gap:1.5rem; }
@media (min-width:768px){ #boutique .grid { grid-template-columns:1fr 1fr; gap:2rem; } }

/* Gallery controls spacing on mobile */
@media (max-width:640px){
  #work .flex.items-center.gap-3, 
  #work .flex.flex-wrap.items-center.justify-center.gap-2 { 
    gap:.5rem; 
  }
  #pageIndicator { 
    margin-left:.5rem; 
    font-size: 0.7rem;
  }
  .video-item { 
    margin-bottom: 0.5rem; 
  }
}

/* Better mobile video gallery */
@media (max-width:767px){
  #videoGallery {
    gap: 1rem;
  }
}

/* Hero starburst fallback positioning/visibility */
.hero-starburst { position:absolute; top:-1rem; right:-1rem; width:6rem; height:6rem; display:none; }
@media (min-width:768px){ .hero-starburst { display:block; top:-1.5rem; right:-5.5rem; width:7rem; height:7rem; } }

/* Video aspect fallback */
.aspect-video { position:relative; width:100%; padding-top:56.25%; }
.aspect-video > * { position:absolute; inset:0; }

/* Hide if Tailwind provides more complex states */
.hidden { display:none !important; }

/* Basic container layout */
header, section, footer { width:100%; }

/* Scroll behavior fallback */
html { scroll-behavior:smooth; }

/* Selection */
::selection { background:var(--color-neon); color:#000; }

/* Ensure overlays readable */
.bg-black\/20 { background:rgba(0,0,0,0.2); }
.bg-black\/40 { background:rgba(0,0,0,0.4); }
.bg-zinc-900\/60 { background:rgba(24,24,27,0.6); }

/* Minimal responsive tweak */
@media (max-width:640px){ .text-5xl { font-size:2.5rem; } }

/* Hero badges visibility fallbacks (independent of Tailwind) */
.hero-badges-mobile { display:flex !important; }
.hero-badges-desktop { display:none !important; }
@media (min-width:640px){
  .hero-badges-mobile { display:none !important; }
  .hero-badges-desktop { display:flex !important; }
}

/* Hero badges layout fallbacks (independent of Tailwind) */
.hero-badges-wrap {
  display: inline-flex;
  align-items: center;
  border-radius: 0.5rem;
  background: var(--neon, #a8ff00);
  color: #000;
  max-width: 100%;
}
.hero-badges-inner {
  padding: 0.75rem 1.25rem; /* bumped padding for prominence */
  font-weight: 700; /* font-bold */
  text-transform: uppercase;
  letter-spacing: 0.08em; /* tracking-wide */
}
.hero-badges-desktop {
  align-items: center;
  column-gap: 0.5rem; /* gap-2 */
  white-space: nowrap;
}
@media (min-width: 768px) {
  .hero-badges-desktop { column-gap: 0.75rem; }
}
.hero-badges-desktop .h-2.w-2.rounded-full.bg-black,
.hero-badges-desktop .dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background: #000;
}
.hero-badges-mobile {
  row-gap: 0.5rem; /* gap-2 */
  text-align: center;
}

/* Fallback font sizes for badges */
.hero-badges-desktop { font-size: 0.75rem; }
@media (min-width: 768px) { .hero-badges-desktop { font-size: 0.875rem; } }
@media (min-width: 1024px) { .hero-badges-desktop { font-size: 1.125rem; } }

/* Very small devices polish */
@media (max-width: 360px){
  .headline { font-size: clamp(20px, 6.2vw, 28px); }
  p { font-size: 0.875rem; }
  .brand-name { font-size: 0.9rem; }
  .brand-mark { width: 24px; height: 24px; }
  .process-step .bg-zinc-900\/60 {
    min-height: 240px !important;
  }
}

/* Extra small phones */
@media (max-width: 320px){
  .headline { font-size: 18px !important; }
  .headline-sub { font-size: 14px !important; }
  .hero-badges-mobile { font-size: 0.65rem; }
}

/* Phone-specific centering and spacing for hero badges */
@media (max-width: 640px){
  .hero-badges-wrap { 
    display: flex !important; /* override inline-flex to allow centering via margins */
    margin-left: auto; 
    margin-right: auto; 
    justify-content: center;
    width: 100%;
    max-width: 280px;
  }
  .hero-badges-inner { 
    padding: 0.625rem 1rem; /* tighten padding */
    width: 100%;
  }
  .hero-badges-mobile { 
    row-gap: 0.5rem; 
    width: 100%;
  }
  .hero-badges-mobile span { 
    line-height: 1.3; 
  }
}

/* Tablet adjustments */
@media (min-width: 641px) and (max-width: 1023px){
  .hero-badges-desktop {
    font-size: 0.75rem;
  }
  .hero-badges-desktop .h-2.w-2 {
    width: 0.375rem;
    height: 0.375rem;
  }
}

/* Note: For full fidelity, keep Tailwind CDN. This file only guards against invisibility issues. */
/* --- Extracted custom component & animation styles from inline HTML --- */
html { scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html { scroll-behavior:auto; } }
.ph { background:linear-gradient(180deg,#d4d4d8 0%,#bdbdc5 100%); }
.headline { font-size:clamp(24px,4.5vw,48px); line-height:1.2; overflow-wrap:break-word; word-break:break-word; }
@media (max-width:767px){ .headline { font-size:clamp(22px,6vw,32px); } }
.subline { font-size:clamp(28px,5.5vw,60px); line-height:1; }
.headline-sub { display:block; font-size:clamp(18px,3.2vw,36px); line-height:1.1; }
.chunky { letter-spacing:.02em; }
.dash { position:relative; padding-left:1.125rem; }
.dash:before { content:""; position:absolute; left:0; top:50%; width:12px; height:2px; background:currentColor; transform:translateY(-50%); }

/* Video gallery items */
.video-item { transition:opacity .3s ease-in-out, transform .2s ease, box-shadow .3s ease; }
@media (hover:hover){ .video-item:hover { transform:translateY(-4px); box-shadow:0 8px 24px rgba(215,255,0,.15); } }
.video-item:active { transform:scale(.98); }
#videoGallery { min-height:350px; }
@media (max-width:767px){ #videoGallery { min-height:280px; } }
@media (min-width:768px) and (max-width:1023px){ #videoGallery { min-height:320px; } }

/* Better touch targets for mobile */
@media (max-width:767px){
  button, a[role="button"] {
    min-height: 44px;
    min-width: 44px;
  }
  .whatsapp-button {
    width: 56px;
    height: 56px;
  }
}

/* Improve text readability on all devices */
body {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Prevent horizontal scrolling */
body, html {
  overflow-x: hidden;
  width: 100%;
}

/* Better section spacing on mobile */
@media (max-width: 640px){
  section {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  footer {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  footer .flex {
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
  }
}

/* Journey section responsive improvements */
@media (max-width: 1023px){
  #journey .lg\:col-span-4,
  #journey .lg\:col-span-5,
  #journey .lg\:col-span-3 {
    text-align: center;
  }
  #journey .lg\:mx-0 {
    margin-left: auto;
    margin-right: auto;
  }
}

/* Clients testimonial responsive */
@media (max-width: 1023px){
  #clients .lg\:col-span-2,
  #clients .lg\:col-span-3 {
    text-align: center;
  }
  #testimonialImageWrap {
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Process cards equal height */
.process-step .bg-zinc-900\/60 {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Navigation button disabled state */
.nav-btn-disabled { opacity:.4; cursor:not-allowed; pointer-events:none; }
.nav-btn-disabled:hover { color:inherit !important; border-color:inherit !important; }

/* WhatsApp widget */
.whatsapp-widget { position:fixed; bottom:20px; right:20px; z-index:999; }
.whatsapp-button { display:flex; align-items:center; justify-content:center; width:56px; height:56px; background:#25D366; border-radius:50%; box-shadow:0 4px 12px rgba(37,211,102,.4); cursor:pointer; transition:all .3s ease; animation:pulse-whatsapp 2s infinite; }
.whatsapp-button:hover { transform:scale(1.1); box-shadow:0 6px 20px rgba(37,211,102,.6); }
.whatsapp-button svg { width:32px; height:32px; fill:#fff; }
@keyframes pulse-whatsapp { 0%,100% { box-shadow:0 4px 12px rgba(37,211,102,.4);} 50% { box-shadow:0 4px 20px rgba(37,211,102,.7);} }
.whatsapp-tooltip { position:absolute; right:75px; bottom:15px; background:#fff; color:#0a0a0a; padding:10px 16px; border-radius:8px; white-space:nowrap; font-size:14px; font-weight:500; box-shadow:0 4px 12px rgba(0,0,0,.15); opacity:0; transform:translateX(10px); transition:all .3s ease; pointer-events:none; }
.whatsapp-tooltip:after { content:""; position:absolute; right:-6px; top:50%; transform:translateY(-50%); width:0; height:0; border-left:6px solid #fff; border-top:6px solid transparent; border-bottom:6px solid transparent; }
.whatsapp-widget:hover .whatsapp-tooltip { opacity:1; transform:translateX(0); }
@media (max-width:640px){ .whatsapp-widget { bottom:80px; right:16px; } .whatsapp-button { width:52px; height:52px; } .whatsapp-button svg { width:26px; height:26px; } .whatsapp-tooltip { display:none; } }

/* Modal tweaks */
#videoModal { backdrop-filter:blur(8px); }
@media (max-width:640px){ 
  #videoModal .max-w-4xl { 
    margin:0; 
    max-width:100%; 
    height: 100vh;
    display: flex;
    align-items: center;
  } 
  #closeModal { 
    top:12px; 
    right:12px; 
    background: rgba(0,0,0,0.7);
  }
  #videoModal .relative.bg-zinc-900 {
    border-radius: 0;
    height: auto;
    max-height: 100vh;
  }
}

/* Better modal on tablets */
@media (min-width: 641px) and (max-width: 1023px){
  #videoModal .max-w-4xl {
    max-width: 90%;
  }
}

/* Accessibility & interaction */
@media (prefers-reduced-motion:reduce){ .process-step { animation:none !important; opacity:1 !important; transform:none !important; } }
@media (hover:none){ button:active, a:active { opacity:.7; transform:scale(.98); } }
button:focus-visible, a:focus-visible { outline:2px solid var(--color-neon); outline-offset:2px; }

/* Screen reader only class */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.sr-only:focus,
.sr-only:active {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* Focus visible for skip link */
a.sr-only:focus {
  position: fixed !important;
  z-index: 9999;
}

/* Enhanced focus states */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--color-neon);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px rgba(215, 255, 0, 0.2);
}

/* Cookie consent banner animation */
#cookieConsent {
  transition: transform 0.3s ease-out;
}

/* Legal modal scrolling */
#privacy-policy,
#terms-of-service,
#cookie-policy,
#refund-policy {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Focus trap for modals */
.modal-open {
  overflow: hidden;
}

/* Keyframes (deduped) */
@keyframes slideUp { from { opacity:0; transform:translateY(1.5rem);} to { opacity:1; transform:translateY(0);} }
@keyframes fadeIn { from { opacity:0;} to { opacity:1;} }
@keyframes pulse-slow { 0%,100% { opacity:1;} 50% { opacity:.5;} }
@keyframes bounce-slow { 0%,100% { transform:translateY(0);} 50% { transform:translateY(-4px);} }
@keyframes spin-slow { from { transform:rotate(0deg);} to { transform:rotate(360deg);} }

/* Animation utility classes */
.animate-pulse-slow { animation:pulse-slow 2s ease-in-out infinite; }
.animate-bounce-slow { animation:bounce-slow 2s ease-in-out infinite; }
.animate-spin-slow { animation:spin-slow 4s linear infinite; }
.animate-fade-in { animation:fadeIn .8s ease-out forwards; }
.animate-fade-in-delay { animation:fadeIn .8s ease-out .3s forwards; }

/* Reveal on scroll (subtle and professional) */
.reveal { opacity:0; transform:translateY(12px); transition:opacity .9s ease, transform .9s cubic-bezier(0.22, 1, 0.36, 1); transition-delay:var(--reveal-delay, 0ms); will-change: opacity, transform; }
.reveal.is-visible { opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){ .reveal { opacity:1 !important; transform:none !important; transition:none !important; } }

/* Neon text enforce */
.text-neon, h4.text-neon { color:#D7FF00 !important; }

/* Process step hover (from second inline block) */
.process-step:hover .bg-zinc-900\/60 { transform:translateY(-4px); }

/* --- Thumbnails carousel --- */
.thumb-viewport { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.thumb-viewport::-webkit-scrollbar { display: none; }
.thumb-track { display: flex; gap: 12px; scroll-snap-type: x mandatory; padding-bottom: 6px; }
.thumb-item { flex: 0 0 auto; width: 120px; aspect-ratio: 9 / 16; border-radius: 8px; overflow: hidden; scroll-snap-align: start; background: #111; border: 1px solid var(--color-border); }
.thumb-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 768px) { .thumb-item { width: 140px; } }
@media (min-width: 1024px) { .thumb-item { width: 160px; } }

/* --- Text Logo (Xplanimation) --- */
.logo { font-weight: 900; letter-spacing: .04em; text-transform: uppercase; line-height: 1; position: relative; }
.logo-x { color: var(--color-neon); text-shadow: 0 0 6px rgba(215,255,0,.35); display: inline-block; transform: skewX(-6deg); }
.logo-rest { color: #fff; display: inline-block; }
.logo::after { content: ""; display: block; height: 2px; background: linear-gradient(90deg, var(--color-neon), transparent); transform: scaleX(0); transform-origin: left; transition: transform .3s ease; margin-top: 2px; }
.logo:hover::after { transform: scaleX(1); }
.logo:hover .logo-x { text-shadow: 0 0 10px rgba(215,255,0,.6); }

/* --- Brand mark + wordmark --- */
.brand { font-weight: 800; letter-spacing: .04em; text-transform: uppercase; line-height: 1; }
.brand-name { color:#fff; }
.brand-mark { position: relative; width: 28px; height: 28px; border:2px solid var(--color-neon); border-radius: 8px; display:inline-flex; align-items:center; justify-content:center; background: linear-gradient(180deg, rgba(215,255,0,.10), rgba(215,255,0,0)); box-shadow: 0 0 0 0 rgba(215,255,0,.0); transition: box-shadow .25s ease, background .25s ease, transform .2s ease; }
.brand-x { color: var(--color-neon); font-weight:900; transform: translateY(-1px); font-size: 15px; }
.brand-play { position:absolute; right:2px; bottom:2px; width:12px; height:12px; fill: currentColor; color: var(--color-neon); opacity:.75; filter: drop-shadow(0 0 6px rgba(215,255,0,.35)); transition: opacity .2s ease; }
.brand:hover .brand-mark { box-shadow: 0 6px 18px rgba(215,255,0,.25); background: linear-gradient(180deg, rgba(215,255,0,.16), rgba(215,255,0,0)); transform: translateY(-1px); }
.brand:hover .brand-play { opacity: 1; }
@media (max-width:640px){ .brand { letter-spacing: .02em; } .brand-mark { width:26px; height:26px; } .brand-x { font-size:14px; } }