/* Premier Family Salon & Hair Spa - Global Styles (Neon Aesthetic Revamp) */
:root {
  --clr-bg: #0b0b11;
  --clr-bg-alt: #14141b;
  --clr-accent: #b646ff; /* Vivid violet */
  --clr-accent-rgb: 182,70,255;
  --clr-accent-2: #ff3fb3; /* Hot magenta */
  --clr-accent-2-rgb: 255,63,179;
  --clr-accent-3: #ff8f5a; /* Peach glow */
  --clr-accent-3-rgb: 255,143,90;
  --clr-text: #f5f5f9;
  --clr-text-muted: #b5b5c6;
  --clr-border: #26262d;
  --clr-error: #ff4d6d;
  --ff-sans: 'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --ff-serif: 'Playfair Display', Georgia, serif;
  --ff-display: 'Orbitron', 'Montserrat', 'Poppins', system-ui, sans-serif;
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-round: 50px;
  --shadow-sm: 0 2px 4px -1px rgba(0,0,0,.4);
  --shadow-md: 0 8px 26px -6px rgba(0,0,0,.55);
  --shadow-glow: 0 0 0 1px rgba(var(--clr-accent-rgb), .28), 0 4px 28px -4px rgba(var(--clr-accent-rgb), .55), 0 0 26px -4px rgba(var(--clr-accent-2-rgb), .4);
  --max-width: 1180px;
  --transition: .35s cubic-bezier(.4,.0,.2,1);
  --grad-accent: linear-gradient(135deg,var(--clr-accent),var(--clr-accent-2) 46%, var(--clr-accent-3) 78%);
  --grad-soft: linear-gradient(120deg,rgba(var(--clr-accent-rgb),.18),rgba(var(--clr-accent-2-rgb),.18) 55%, rgba(var(--clr-accent-3-rgb),.22));
  /* Hero visual tuning */
  --hero-bg-filter: brightness(.72) saturate(1.18) contrast(1.04);
  --hero-overlay-dark: rgba(11,11,15,.78);
  --hero-overlay-mid: rgba(11,11,15,.30);
  --hero-overlay-light: rgba(11,11,15,.65);
  /* Unified site-wide background image (local asset). Change here to swap globally. */
  --hero-img: url('../img/background.jpeg');
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--ff-sans);
  background:
    radial-gradient(circle at 22% 18%, #181826, transparent 60%),
    radial-gradient(circle at 78% 28%, rgba(var(--clr-accent-rgb), .12), transparent 65%),
    radial-gradient(circle at 60% 70%, rgba(var(--clr-accent-2-rgb), .10), transparent 75%),
    linear-gradient(180deg,#0b0b11,#0a0a13 55%, #0c0c16);
  color: var(--clr-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  position: relative;
}
body::before, body::after { content:''; position:fixed; inset:0; pointer-events:none; background:
  conic-gradient(from 140deg at 70% 30%, rgba(var(--clr-accent-rgb),.18), transparent 60%),
  radial-gradient(circle at 28% 72%, rgba(var(--clr-accent-2-rgb),.14), transparent 70%); mix-blend-mode:overlay; opacity:.5; z-index:-2; filter:blur(42px); }
body::after { filter:blur(68px); opacity:.35; }

img { max-width: 100%; display: block; }
a { color: var(--clr-accent-2); text-decoration: none; transition: color var(--transition); }
a:hover, a:focus-visible { color: var(--clr-accent); }

h1,h2,h3,h4 { font-family: var(--ff-display); font-weight: 600; line-height: 1.15; margin: 0 0 .6em; letter-spacing:.5px; }
.section-title { font-family: var(--ff-display); font-weight:700; letter-spacing:.65px; }
.hero h1, .services-hero h1, .products-hero h1, .contact-hero h1 { font-family: var(--ff-display); font-weight:700; letter-spacing:1px; }
p { margin: 0 0 1.2em; }

/* Layout */
.container { width: 100%; margin: 0 auto; padding: 0 1.4rem; max-width: var(--max-width); }
.flex { display: flex; gap: 1.4rem; }
.grid { display: grid; gap: 2rem; }

/* Navigation */
.site-header { position: sticky; top: 0; z-index: 50; backdrop-filter: saturate(180%) blur(16px); background: rgba(15,15,19,.75); border-bottom: 1px solid var(--clr-border); }
.navbar { display: flex; align-items: center; justify-content: space-between; min-height: 74px; }
.brand { display: inline-flex; align-items: center; line-height: 1; }
.brand img { display: block; height: 54px; width: auto; object-fit: contain; filter: drop-shadow(0 2px 6px rgba(0,0,0,.6)); transition: filter var(--transition), transform var(--transition); }
.brand:hover img { filter: drop-shadow(0 4px 14px rgba(var(--clr-accent-rgb), .55)); transform: translateY(-2px); }
.nav-links { list-style: none; display: flex; gap: 2.2rem; margin: 0; padding: 0; }
.nav-links a { position: relative; font-size: .95rem; font-weight: 500; letter-spacing: .5px; }
.nav-links a::after { content: ''; position: absolute; left: 0; bottom: -6px; width: 0; height: 2px; background: var(--grad-accent); transition: width var(--transition); border-radius: 2px; }
.nav-links a:hover::after, .nav-links a:focus-visible::after, .nav-links a.active::after { width: 100%; }

.mobile-toggle { display: none; background: none; border: 0; color: var(--clr-text); font-size: 1.6rem; cursor: pointer; }

/* Hero */
.hero { position: relative; padding: clamp(2.5rem, 5vh, 4rem) 0 clamp(2rem, 4vh, 3rem); overflow: hidden; min-height: 75vh; display:flex; align-items:center; }

/* Hero Bottom Blend Fade */
.hero-bottom-fade { position:absolute; bottom:0; left:0; right:0; height:150px; z-index:1; pointer-events:none;
  background: linear-gradient(180deg, 
    transparent 0%, 
    rgba(40,10,80,.15) 20%,
    rgba(30,8,60,.35) 40%,
    rgba(20,5,40,.55) 60%,
    rgba(15,4,25,.75) 80%,
    rgba(11,11,17,.95) 100%);
  mask-image: linear-gradient(180deg, transparent 0%, black 30%, black 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 30%, black 100%); }
.hero-bottom-fade::after { content:''; position:absolute; inset:0;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(182,70,255,.08) 40%,
    rgba(182,70,255,.15) 70%,
    rgba(182,70,255,.05) 100%);
  mix-blend-mode:screen; }
.hero-mesh { position:absolute; inset:0; z-index:-2; pointer-events:none; background:
  radial-gradient(circle at 18% 32%, rgba(var(--clr-accent-rgb),.28), transparent 62%),
  radial-gradient(circle at 82% 68%, rgba(var(--clr-accent-2-rgb),.22), transparent 70%),
  radial-gradient(ellipse at 50% 50%, rgba(var(--clr-accent-3-rgb),.18), transparent 65%);
  mix-blend-mode:screen; filter:blur(38px) saturate(140%);
  animation: mesh-drift 26s ease-in-out infinite alternate;
  opacity:.9;
  /* Hint renderer: only transform changes animate */
  will-change: transform;
}
.hero-mesh::before, .hero-mesh::after { content:""; position:absolute; inset:-20%; background:
  conic-gradient(from 45deg at 30% 40%, rgba(var(--clr-accent-rgb),.45), rgba(var(--clr-accent-2-rgb),0) 65%),
  conic-gradient(from 260deg at 70% 60%, rgba(var(--clr-accent-2-rgb),.4), rgba(var(--clr-accent-3-rgb),0) 60%);
  mix-blend-mode:overlay; filter:blur(60px) brightness(1.15) saturate(1.4);
  animation: mesh-rotate 42s linear infinite;
  opacity:.55;
}
.hero-mesh::after { animation-direction: reverse; animation-duration: 52s; opacity:.5; }
@keyframes mesh-drift { 0% { transform: translate3d(-2%,0,0) scale(1); } 50% { transform: translate3d(2%,3%,0) scale(1.05); } 100% { transform: translate3d(-1%,-2%,0) scale(1.08); } }
@keyframes mesh-rotate { to { transform: rotate(360deg); } }
.hero::before { content: ''; position: absolute; inset: 0; background:
  linear-gradient(115deg, var(--hero-overlay-dark), var(--hero-overlay-mid) 55%, var(--hero-overlay-light) 85%),
  radial-gradient(circle at 78% 28%, rgba(var(--clr-accent-rgb), .22), transparent 72%);
  mix-blend-mode: normal; z-index: 0; }
.hero--purple::before { background:
  linear-gradient(115deg, rgba(60,0,110,.36), rgba(120,0,170,.22) 55%, rgba(50,0,95,.38) 85%),
  radial-gradient(circle at 68% 32%, rgba(var(--clr-accent-rgb), .14), transparent 70%),
  radial-gradient(circle at 30% 72%, rgba(var(--clr-accent-2-rgb), .10), transparent 75%);
  z-index:0;
  mix-blend-mode: overlay;
}

/* Lighter purple palette variant */
.hero--purple-light::before { background:
  linear-gradient(115deg, rgba(120,40,200,.28), rgba(180,80,255,.18) 50%, rgba(100,30,170,.32) 85%),
  radial-gradient(circle at 62% 30%, rgba(var(--clr-accent-rgb), .12), transparent 72%),
  radial-gradient(circle at 28% 74%, rgba(var(--clr-accent-2-rgb), .08), transparent 78%);
  mix-blend-mode: overlay;
  z-index:0;
}
.hero--purple-light .hero-bg { filter: brightness(.95) saturate(1.15) contrast(1.0); }

/* Grain texture (screen blend) */
.hero--grain .hero-bg::after { content:''; position:absolute; inset:0; background:url('assets/img/noise.png'); opacity:.25; mix-blend-mode:screen; pointer-events:none; }
/* Fallback procedural noise if image missing */
.hero--grain .hero-bg::before { content:''; position:absolute; inset:0; background:
  repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 6px, rgba(0,0,0,.03) 6px 12px);
  opacity:.07; pointer-events:none; }

/* Vignette edge control */
.hero--vignette::after { content:''; position:absolute; inset:0; pointer-events:none; background:
  radial-gradient(circle at 50% 50%, rgba(0,0,0,0) 55%, rgba(0,0,0,.55) 95%);
  mix-blend-mode: multiply; }

/* Adjust when both light purple & grain applied (avoid over darkening) */
.hero--purple-light.hero--grain .hero-bg::after { opacity:.18; }
.hero--purple-light.hero--vignette::after { background:
  radial-gradient(circle at 50% 50%, rgba(0,0,0,0) 60%, rgba(0,0,0,.42) 95%); }
.hero-bg { position: absolute; inset: 0; background: var(--hero-img) center/cover; filter: var(--hero-bg-filter); animation: subtle-zoom 22s ease-in-out infinite alternate; transition: filter .8s ease, transform .3s ease-out; z-index:0; will-change: transform; }
/* Brightness boost when purple variant active */
.hero--purple .hero-bg { filter: brightness(.9) saturate(1.22) contrast(1.02); }

/* Parallax effect on mouse move - enhanced with JS */
.hero:hover .hero-bg { transform: scale(1.03); transition: transform 8s cubic-bezier(0.25, 0.46, 0.45, 0.94); }

/* Debug / fallback variant: ensure image fully visible */
.hero--image-visible .hero-mesh,
.hero--image-visible::before { display:none !important; }
.hero--image-visible .hero-bg { filter: brightness(.95) saturate(1.18) contrast(1.02) !important; }
@keyframes subtle-zoom { from { transform: scale(1); } to { transform: scale(1.08); } }
@keyframes bg-breathe {
  0%, 100% { transform: scale(1) translate(0, 0); filter: brightness(.68) saturate(1.35) contrast(1.08); }
  25% { transform: scale(1.05) translate(-1%, 0.5%); filter: brightness(.70) saturate(1.38) contrast(1.10); }
  50% { transform: scale(1.08) translate(0, 1%); filter: brightness(.72) saturate(1.40) contrast(1.12); }
  75% { transform: scale(1.05) translate(1%, 0.5%); filter: brightness(.70) saturate(1.38) contrast(1.10); }
}
.hero .content { position: relative; z-index: 2; max-width: 720px; }
.hero .content::before { content:''; position:absolute; top:-2rem; left:-1.5rem; width:220px; height:220px; background:
  radial-gradient(circle, rgba(182,70,255,.15), transparent 70%);
  border:1px solid rgba(182,70,255,.25); border-radius:50%; z-index:-1; filter:blur(2px); }
.hero .content::after { content:''; position:absolute; bottom:-3rem; right:-2rem; width:180px; height:180px;
  background: linear-gradient(135deg, rgba(255,63,179,.12), transparent);
  border:1px solid rgba(255,63,179,.2); transform:rotate(45deg); z-index:-1; }
.hero h1 { font-size: clamp(2.6rem, 6vw, 4.2rem); background: linear-gradient(120deg,#fff,var(--clr-accent-2) 45%, var(--clr-accent) 70%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p.lede { font-size: clamp(1.05rem, 1.6vw, 1.35rem); color: var(--clr-text-muted); margin-bottom: 1.2rem; max-width:640px; }

/* Modern neon hero variant: purple overlay with geometric accents */
.hero--plain::before { content:''; position:absolute; inset:0; background:
  linear-gradient(135deg, rgba(40,10,80,.88) 0%, rgba(60,15,110,.72) 20%, rgba(100,25,160,.55) 45%, rgba(140,40,200,.35) 70%, transparent 100%),
  radial-gradient(ellipse at 85% 15%, rgba(255,63,179,.45), transparent 50%),
  radial-gradient(ellipse at 15% 85%, rgba(182,70,255,.42), transparent 45%),
  radial-gradient(ellipse at 50% 50%, rgba(60,10,100,.6), transparent 80%);
  mix-blend-mode: multiply; z-index:1; pointer-events:none; }
.hero--plain::after { content:''; position:absolute; inset:0; background:
  linear-gradient(110deg, transparent 0%, rgba(182,70,255,.08) 25%, rgba(255,63,179,.15) 50%, rgba(182,70,255,.08) 75%, transparent 100%),
  radial-gradient(circle at 75% 25%, rgba(255,63,179,.25), transparent 40%),
  radial-gradient(circle at 25% 75%, rgba(182,70,255,.2), transparent 40%);
  mix-blend-mode:screen; z-index:1; pointer-events:none;
  animation: neon-pulse 4s ease-in-out infinite alternate; }
@keyframes neon-pulse {
  0% { opacity:.85; }
  100% { opacity:1; }
}
.hero--plain .hero-bg { filter: brightness(.58) saturate(1.45) contrast(1.15) !important; animation: bg-breathe 20s ease-in-out infinite alternate; }
.hero--plain .hero-mesh { display:none !important; }
.hero--plain h1 { background: linear-gradient(135deg, #fff 0%, #f0e0ff 40%, #ff3fb3 100%); -webkit-background-clip: text; background-clip: text; color:transparent; text-shadow: 0 0 40px rgba(182,70,255,.4); font-weight:700; letter-spacing:-0.02em; line-height:1.1; }
.hero--plain h1::after { content:''; display:block; width:80px; height:4px; background:linear-gradient(90deg, #b646ff, #ff3fb3); margin-top:1.2rem; box-shadow: 0 0 20px rgba(182,70,255,.6); border-radius:2px; }
.hero--plain p.lede { color:#e8e0f5; text-shadow: 0 2px 12px rgba(0,0,0,.5); }

/* Neon Edge Glow Effects */
.hero--plain .hero-grid { background-image:
    linear-gradient(rgba(182,70,255,.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(182,70,255,.12) 1px, transparent 1px);
  background-size: 60px 60px; }
.hero--plain .hero-orbs .orb-1 { background: radial-gradient(circle, rgba(182,70,255,.35), transparent 70%); }
.hero--plain .hero-orbs .orb-2 { background: radial-gradient(circle, rgba(255,63,179,.32), transparent 70%); }
.hero--plain .hero-orbs .orb-3 { background: radial-gradient(circle, rgba(140,30,200,.28), transparent 70%); }

/* Modern Hero Title Treatment */
.hero-title-modern { font-size: clamp(3rem, 8vw, 6rem); font-weight:800; letter-spacing:-0.03em; line-height:1;
  margin:0 0 1.5rem; display:flex; flex-direction:column; gap:0.15em; position:relative; }
.hero-title-modern .word-wrapper { display:flex; align-items:baseline; gap:0.15em; }
.hero-title-modern .word { position:relative; display:inline-block;
  background: linear-gradient(135deg, #ffffff 0%, #f5e6ff 25%, #ff3fb3 65%, #b646ff 100%);
  -webkit-background-clip: text; background-clip: text; color:transparent;
  text-shadow: 0 0 80px rgba(182,70,255,.7); font-weight:800;
  animation: word-reveal 1s cubic-bezier(0.77, 0, 0.175, 1) backwards;
  animation-delay: calc(var(--word, 1) * 0.15s);
  filter: drop-shadow(0 0 25px rgba(255,63,179,.4)); }
.hero-title-modern .word::before { content: attr(data-word); position:absolute; inset:0;
  background: linear-gradient(135deg, rgba(182,70,255,.6), rgba(255,63,179,.6));
  -webkit-background-clip: text; background-clip: text; color:transparent;
  filter: blur(15px); z-index:-1; opacity:1; }
.hero-title-modern .word::after { content:''; position:absolute; bottom:-8px; left:0; right:0; height:3px;
  background: linear-gradient(90deg, transparent, rgba(182,70,255,.8), rgba(255,63,179,.8), transparent);
  box-shadow: 0 0 20px rgba(182,70,255,.7), 0 0 30px rgba(255,63,179,.5); border-radius:2px; opacity:0;
  animation: underline-reveal 0.8s cubic-bezier(0.77, 0, 0.175, 1) forwards;
  animation-delay: calc(var(--word, 1) * 0.15s + 0.4s); }
.hero-title-modern .word-dot { font-size:0.9em; color:#ff3fb3; text-shadow: 0 0 25px rgba(255,63,179,1), 0 0 40px rgba(182,70,255,.8);
  animation: dot-pulse 2s ease-in-out infinite; animation-delay: calc(var(--word, 1) * 0.2s + 1s); }
@keyframes word-reveal {
  0% { opacity:0; transform: translateY(40px) rotateX(-90deg); filter:blur(10px); }
  100% { opacity:1; transform: translateY(0) rotateX(0); filter:blur(0); }
}
@keyframes underline-reveal {
  0% { opacity:0; transform: scaleX(0); }
  100% { opacity:1; transform: scaleX(1); }
}
@keyframes dot-pulse {
  0%, 100% { opacity:1; text-shadow: 0 0 25px rgba(255,63,179,1), 0 0 40px rgba(182,70,255,.8); }
  50% { opacity:.7; text-shadow: 0 0 40px rgba(255,63,179,1.2), 0 0 60px rgba(182,70,255,1), 0 0 80px rgba(255,63,179,.6); transform: scale(1.1); }
}
@media (max-width: 640px) {
  .hero-title-modern { font-size: clamp(2.2rem, 10vw, 3.5rem); gap:0.1em; }
  .hero-title-modern .word::after { height:2px; bottom:-5px; }
}

/* Modern UI Grid Overlay */
.hero-grid { position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(182,70,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(182,70,255,.08) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 0%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 0%, transparent 85%);
  opacity:.4; }

/* Floating Orbs - Animated Background Elements */
.hero-orbs { position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.orb { position:absolute; border-radius:50%; filter:blur(60px); animation: float-orb 20s ease-in-out infinite; }
.orb-1 { width:400px; height:400px; top:10%; left:5%; background: radial-gradient(circle, rgba(182,70,255,.25), transparent 70%); animation-delay:0s; animation-duration:25s; }
.orb-2 { width:300px; height:300px; top:60%; right:10%; background: radial-gradient(circle, rgba(255,63,179,.22), transparent 70%); animation-delay:-8s; animation-duration:30s; }
.orb-3 { width:250px; height:250px; bottom:15%; left:50%; background: radial-gradient(circle, rgba(200,60,255,.2), transparent 70%); animation-delay:-15s; animation-duration:28s; }
@keyframes float-orb { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(30px, -40px) scale(1.1); } 66% { transform: translate(-20px, 20px) scale(0.95); } }

/* Animated Diagonal Lines */
.hero-lines { position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.line { position:absolute; width:2px; height:200px; background: linear-gradient(180deg, transparent, rgba(182,70,255,.6), transparent); animation: move-line 15s linear infinite; }
.line-1 { top:-200px; left:20%; animation-delay:0s; box-shadow: 0 0 10px rgba(182,70,255,.4); }
.line-2 { top:-200px; right:30%; animation-delay:-7s; height:150px; background: linear-gradient(180deg, transparent, rgba(255,63,179,.5), transparent); box-shadow: 0 0 10px rgba(255,63,179,.4); }
@keyframes move-line { 0% { transform: translateY(0); opacity:0; } 10% { opacity:1; } 90% { opacity:1; } 100% { transform: translateY(calc(100vh + 200px)); opacity:0; } }

/* Floating Geometric Shapes */
.floating-shapes { position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.shape { position:absolute; opacity:.15; animation: float-shape 20s ease-in-out infinite; }
.shape-triangle { width:0; height:0; border-left:40px solid transparent; border-right:40px solid transparent; border-bottom:70px solid rgba(182,70,255,.6); top:25%; right:15%; animation-duration:18s; filter: drop-shadow(0 0 15px rgba(182,70,255,.5)); }
.shape-square { width:60px; height:60px; background: linear-gradient(135deg, rgba(255,63,179,.4), rgba(182,70,255,.4)); top:70%; left:20%; animation-duration:22s; animation-delay:-5s; transform:rotate(45deg); filter: drop-shadow(0 0 12px rgba(255,63,179,.4)); }
.shape-circle { width:50px; height:50px; border:3px solid rgba(182,70,255,.5); border-radius:50%; top:40%; right:25%; animation-duration:25s; animation-delay:-10s; box-shadow: 0 0 20px rgba(182,70,255,.3), inset 0 0 20px rgba(182,70,255,.2); }
@keyframes float-shape { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-30px) rotate(180deg); } }

/* Floating Particles System */
.hero-particles { position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.particle { position:absolute; width:4px; height:4px; background:rgba(182,70,255,.8);
  border-radius:50%; box-shadow: 0 0 10px rgba(182,70,255,.6), 0 0 20px rgba(182,70,255,.3);
  animation: particle-float calc(15s + var(--i) * 2s) ease-in-out infinite;
  left: calc(5% + var(--i) * 9%); top: calc(10% + var(--i) * 8%);
  opacity:calc(0.3 + var(--i) * 0.05); }
@keyframes particle-float {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(40px, -60px); }
  50% { transform: translate(-30px, -120px); }
  75% { transform: translate(20px, -80px); }
}

/* Light Rays */
.hero-rays { position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.ray { position:absolute; width:2px; height:100%; background: linear-gradient(180deg, transparent, rgba(182,70,255,.4), transparent);
  animation: ray-move 12s linear infinite; transform-origin: top center; }
.ray-1 { left:15%; animation-delay:0s; height:80%; top:-20%; transform:rotate(15deg);
  box-shadow: 0 0 20px rgba(182,70,255,.4); }
.ray-2 { left:60%; animation-delay:-4s; height:90%; top:-30%; transform:rotate(-10deg);
  background: linear-gradient(180deg, transparent, rgba(255,63,179,.35), transparent);
  box-shadow: 0 0 20px rgba(255,63,179,.3); }
.ray-3 { right:20%; animation-delay:-8s; height:70%; top:-10%; transform:rotate(20deg);
  background: linear-gradient(180deg, transparent, rgba(200,60,255,.3), transparent);
  box-shadow: 0 0 20px rgba(200,60,255,.3); }
@keyframes ray-move {
  0% { opacity:0; transform: translateY(0) rotate(var(--angle, 15deg)); }
  10%, 90% { opacity:1; }
  100% { opacity:0; transform: translateY(100vh) rotate(var(--angle, 15deg)); }
}

/* Curved Path Lines (SVG) */
.hero-curves { position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.hero-curves svg { position:absolute; width:100%; height:40%; }
.curve-1 { top:20%; left:0; animation: curve-drift-1 20s ease-in-out infinite; }
.curve-2 { bottom:25%; left:0; animation: curve-drift-2 25s ease-in-out infinite; }
@keyframes curve-drift-1 { 0%, 100% { transform: translateX(0) translateY(0); } 50% { transform: translateX(-5%) translateY(-3%); } }
@keyframes curve-drift-2 { 0%, 100% { transform: translateX(0) translateY(0); } 50% { transform: translateX(5%) translateY(3%); } }

/* Scanlines Effect */
.scanlines { position:absolute; inset:0; z-index:1; pointer-events:none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,0) 0px, rgba(182,70,255,.02) 1px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 4px);
  animation: scanline-move 8s linear infinite; opacity:.5; }
@keyframes scanline-move { 0% { transform: translateY(0); } 100% { transform: translateY(4px); } }

/* Noise Texture Overlay */
.noise-texture { position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image: url('data:image/svg+xml,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noiseFilter"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="3.5" numOctaves="2" /%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noiseFilter)" opacity="0.05"/%3E%3C/svg%3E');
  opacity:.3; animation: noise-shift 1s steps(2) infinite; }
@keyframes noise-shift { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(2px, 2px); } }

/* Additional Geometric Shapes */
.shape-hexagon { width:0; height:0; border-left:30px solid transparent; border-right:30px solid transparent;
  border-bottom:52px solid rgba(182,70,255,.5); top:15%; left:75%; animation-duration:20s;
  position:relative; filter: drop-shadow(0 0 15px rgba(182,70,255,.4)); }
.shape-hexagon::before { content:''; position:absolute; width:0; height:0;
  border-left:30px solid transparent; border-right:30px solid transparent;
  border-top:52px solid rgba(182,70,255,.5); top:52px; left:-30px; }
.shape-ring { width:80px; height:80px; border:4px solid rgba(255,63,179,.4); border-radius:50%;
  top:55%; left:10%; animation-duration:23s; animation-delay:-12s;
  box-shadow: 0 0 25px rgba(255,63,179,.3), inset 0 0 25px rgba(255,63,179,.15); }
.shape-ring::before { content:''; position:absolute; inset:15px; border:2px solid rgba(182,70,255,.3);
  border-radius:50%; box-shadow: 0 0 15px rgba(182,70,255,.2); }

/* Hero Badge Element */
.hero-badge { display:inline-flex; align-items:center; gap:.5rem; padding:.5rem 1rem; margin-bottom:1.2rem;
  background: linear-gradient(135deg, rgba(182,70,255,.15), rgba(255,63,179,.1));
  border:1px solid rgba(182,70,255,.3); border-radius:50px; font-size:.75rem; font-weight:600;
  letter-spacing:.5px; text-transform:uppercase; color:#e8d5ff;
  box-shadow: 0 0 20px rgba(182,70,255,.2), inset 0 1px 0 rgba(255,255,255,.1);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  animation: badge-float 3s ease-in-out infinite; }
@keyframes badge-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* 3D Perspective on Title Hover */
.hero .content:hover .hero-title-modern .word { animation-play-state: paused;
  transition: transform 0.3s ease; }
.hero .content:hover .hero-title-modern .word[data-word="1"] { transform: perspective(500px) rotateY(-2deg) translateZ(10px); }
.hero .content:hover .hero-title-modern .word[data-word="2"] { transform: perspective(500px) rotateY(0deg) translateZ(20px); }
.hero .content:hover .hero-title-modern .word[data-word="3"] { transform: perspective(500px) rotateY(2deg) translateZ(10px); }

.btn { --btn-bg: var(--clr-accent); --btn-color: #111; cursor: pointer; position: relative; display: inline-flex; align-items: center; gap: .6rem; font-weight: 600; font-size: .95rem; padding: .95rem 1.5rem; border-radius: var(--radius-round); border: 0; background: var(--grad-accent); color: var(--btn-color); letter-spacing: .5px; box-shadow: var(--shadow-glow); transition: var(--transition); }
.btn::before { content:''; position:absolute; inset:0; background: linear-gradient(135deg, rgba(255,255,255,.2), transparent 50%); border-radius:inherit; opacity:0; transition:opacity .3s; }
.btn:hover { transform: translateY(-3px); box-shadow: 0 10px 34px -8px rgba(var(--clr-accent-rgb), .6), 0 0 0 2px rgba(var(--clr-accent-2-rgb), .25), 0 0 30px rgba(182,70,255,.5); }
.btn:hover::before { opacity:1; }
.btn.outline { background: linear-gradient(135deg, rgba(22,22,28,.8), rgba(18,18,24,.8)); color: var(--clr-text);
  box-shadow: inset 0 0 0 1px rgba(182,70,255,.4), 0 0 20px rgba(182,70,255,.1);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  position:relative; overflow:hidden; }
.btn.outline::after { content:''; position:absolute; inset:-2px; background:
  linear-gradient(90deg, transparent, rgba(182,70,255,.6), transparent);
  border-radius:inherit; animation: border-flow 3s linear infinite; opacity:0; }
.btn.outline:hover { background: linear-gradient(135deg, rgba(30,30,38,.9), rgba(24,24,32,.9));
  box-shadow: inset 0 0 0 1px rgba(182,70,255,.6), 0 0 30px rgba(182,70,255,.3); }
.btn.outline:hover::after { opacity:1; }
@keyframes border-flow { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

/* WhatsApp Connect Buttons */
.btn.whatsapp-connect { --btn-color:#fff; background: linear-gradient(135deg,rgba(20,20,22,.85),rgba(24,24,27,.85) 55%); color:#fff; position:relative; border:1px solid rgba(182,70,255,.3);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 20px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.05); }
.btn.whatsapp-connect::before { content:''; position:absolute; inset:0; border-radius:inherit; padding:2px; background: var(--grad-accent); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events:none; }
.btn.whatsapp-connect .wa-icon { font-size:1.05rem; line-height:1; display:inline-flex; align-items:center; justify-content:center; margin-right:.4rem; }
.btn.whatsapp-connect:hover { transform: translateY(-3px); box-shadow: 0 8px 26px -6px rgba(var(--clr-accent-rgb), .5), 0 0 40px rgba(182,70,255,.3); border-color: rgba(var(--clr-accent-rgb), .6);
  animation: pulse-glow 2s ease-in-out infinite; }
@keyframes pulse-glow { 0%, 100% { box-shadow: 0 8px 26px -6px rgba(var(--clr-accent-rgb), .5), 0 0 40px rgba(182,70,255,.3); }
  50% { box-shadow: 0 8px 26px -6px rgba(var(--clr-accent-rgb), .7), 0 0 50px rgba(182,70,255,.5); } }

/* Utility for accessible labels */
.visually-hidden { position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0 0 0 0) !important; white-space:nowrap !important; border:0 !important; }

/* Products Page */
.products-hero { position:relative; min-height:50vh; display:flex; align-items:center; padding: clamp(4.5rem,9vh,6.5rem) 0 3.5rem; overflow:hidden; }
.products-hero-bg { position:absolute; inset:0; background: var(--hero-img) center/cover; filter: var(--hero-bg-filter); transform: scale(1.06); transition: filter .8s ease; }
.products-hero-overlay { position:absolute; inset:0; background: linear-gradient(110deg, var(--hero-overlay-dark), var(--hero-overlay-mid) 46%, var(--hero-overlay-light) 72%), radial-gradient(circle at 70% 25%, rgba(var(--clr-accent-2-rgb), .22), transparent 68%); }
.products-hero-inner { position:relative; z-index:2; }
.products-hero h1 { margin:0 0 .9rem; font-size: clamp(2.3rem,5.8vw,3.4rem); background: linear-gradient(120deg,#fff,var(--clr-accent-2) 50%, var(--clr-accent) 75%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.products-hero .hero-sub { font-size: clamp(.95rem,1.4vw,1.15rem); max-width:700px; color: var(--clr-text-muted); margin:0 0 1.6rem; }
.catalog-tools { display:flex; flex-wrap:wrap; gap:.9rem 1.2rem; align-items:center; }
.catalog-tools .tool-group { display:flex; gap:.6rem; align-items:center; }
#catalog-search { background:#1c1c21; border:1px solid var(--clr-border); color:var(--clr-text); padding:.8rem 1rem; border-radius:50px; font:inherit; width:220px; max-width:100%; transition: var(--transition); }
#catalog-search:focus { outline:none; border-color: var(--clr-accent-2); box-shadow:0 0 0 2px rgba(var(--clr-accent-2-rgb), .35); }
.tag-btn { background:#18181d; border:1px solid var(--clr-border); color:var(--clr-text-muted); font-size:.65rem; letter-spacing:.9px; text-transform:uppercase; padding:.55rem .8rem .6rem; border-radius:50px; font-weight:600; cursor:pointer; transition: var(--transition); }
.tag-btn.active, .tag-btn:hover { color:var(--clr-accent-2); border-color: rgba(var(--clr-accent-2-rgb), .5); }
.catalog-grid { --min:260px; display:grid; grid-template-columns: repeat(auto-fit,minmax(var(--min),1fr)); gap:1.6rem; margin-top:2.2rem; }
.product-card { position:relative; background: linear-gradient(180deg,#16161c,#101014); border:1px solid #1f1f24; display:flex; flex-direction:column; overflow:hidden; min-height:280px; }
.product-card .media { position:relative; width:100%; aspect-ratio:5/3; background: var(--img) center/cover; filter: brightness(.82) saturate(1.12); transition: var(--transition); }
.product-card .card-body { display:flex; flex-direction:column; gap:.5rem; padding:1rem 1rem 1.2rem; flex:1; }
.product-card .domain { font-size:.58rem; letter-spacing:1px; text-transform:uppercase; color:var(--clr-accent); font-weight:600; }
.product-card .title { margin:0; font-size:1.02rem; font-weight:600; letter-spacing:.5px; }
.product-card .excerpt { margin:0; font-size:.75rem; color:var(--clr-text-muted); line-height:1.5; }
.product-card .mini-act { align-self:flex-start; margin-top:auto; font-size:.6rem; letter-spacing:.9px; text-transform:uppercase; font-weight:600; padding:.45rem .75rem .5rem; background: rgba(var(--clr-accent-2-rgb), .16); border:1px solid rgba(var(--clr-accent-2-rgb), .55); color: var(--clr-accent-2); border-radius:50px; cursor:pointer; transition: var(--transition); }
.product-card:hover .media { transform: scale(1.06); filter: brightness(.92) saturate(1.24); }
.product-card:hover { border-color: rgba(var(--clr-accent-rgb), .45); }
.product-card .mini-act:hover { background: rgba(var(--clr-accent-2-rgb), .26); }
@media (max-width:640px){ .catalog-grid { --min:220px; } #catalog-search { width:100%; } }

/* Contact Page */
.contact-hero { position:relative; min-height:46vh; padding: clamp(4rem,8vh,6rem) 0 3.2rem; display:flex; align-items:center; overflow:hidden; }
.contact-hero-bg { position:absolute; inset:0; background: var(--hero-img) center/cover; filter: var(--hero-bg-filter); transform: scale(1.06); transition: filter .8s ease; }
.contact-hero-overlay { position:absolute; inset:0; background: linear-gradient(110deg, var(--hero-overlay-dark), var(--hero-overlay-mid) 48%, var(--hero-overlay-light) 72%), radial-gradient(circle at 68% 32%, rgba(var(--clr-accent-2-rgb), .2), transparent 74%); }
.contact-hero-inner { position:relative; z-index:2; max-width:760px; }
.contact-hero h1 { margin:0 0 1rem; font-size: clamp(2.3rem,6vw,3.4rem); background: linear-gradient(120deg,#fff,var(--clr-accent-2) 50%, var(--clr-accent) 75%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.contact-hero .hero-sub { font-size: clamp(.95rem,1.4vw,1.15rem); color: var(--clr-text-muted); max-width:640px; margin:0 0 1.3rem; }
.contact-grid { display:grid; gap:2.2rem; grid-template-columns: minmax(0,480px) 1fr; align-items:start; }
.contact-info { background: linear-gradient(180deg,#15151d,#101014); border:1px solid #202024; padding:1.8rem 1.6rem 2rem; display:flex; flex-direction:column; gap:1.1rem; position:relative; }
.contact-info h2 { margin:0; font-size:1rem; letter-spacing:.6px; text-transform:uppercase; font-weight:600; color: var(--clr-text-muted); }
.contact-list { list-style:none; margin:0; padding:0; display:grid; gap:.75rem; }
.contact-list li { font-size:.8rem; display:flex; align-items:flex-start; gap:.6rem; }
.contact-list .ci-label { font-size:.6rem; letter-spacing:1px; text-transform:uppercase; font-weight:600; color:var(--clr-accent-2); margin-top:.25rem; }
.contact-actions { display:flex; gap:.8rem; flex-wrap:wrap; margin-top:.4rem; }
.contact-actions .btn { font-size:.8rem; }
@media (max-width:980px){ .contact-grid { grid-template-columns:1fr; } }

.whatsapp-fab { position: fixed; bottom: 20px; right: 20px; width: 56px; height: 56px; background:#16161c; color:#fff; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; text-decoration:none; box-shadow: 0 6px 24px -6px rgba(0,0,0,.65); z-index: 200; transition: transform .35s cubic-bezier(.4,0,.2,1), box-shadow .35s cubic-bezier(.4,0,.2,1); isolation:isolate; }
.whatsapp-fab::before { content:''; position:absolute; inset:0; padding:2px; border-radius:inherit; background: var(--grad-accent); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events:none; }
.whatsapp-fab .fab-icon { width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center; }
.whatsapp-fab .fab-icon svg { display:block; width:100%; height:100%; }
.whatsapp-fab:hover, .whatsapp-fab:focus-visible { transform: translateY(-5px); box-shadow: 0 14px 36px -10px rgba(0,0,0,.7), 0 0 0 2px rgba(var(--clr-accent-rgb), .4); }
@media (max-width: 640px) { .whatsapp-fab { width:52px; height:52px; bottom:16px; right:16px; } .whatsapp-fab .fab-icon { width:26px; height:26px; } }

/* Sections */
.section { padding: clamp(3.5rem, 8vh, 5.5rem) 0; position: relative; }
.section-title { font-size: clamp(1.9rem, 4.2vw, 2.8rem); margin-bottom: .8rem; }
.section-lede { max-width: 640px; color: var(--clr-text-muted); margin: 0 0 3rem; }

/* Service Cards */
.cards { --min: 260px; display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit,minmax(var(--min),1fr)); }
.card { position: relative; background: linear-gradient(145deg,#16161c,#121218 60%); border: 1px solid var(--clr-border); border-radius: 18px; padding: 1.6rem 1.6rem 1.9rem; overflow: hidden; display: flex; flex-direction: column; gap: .9rem; min-height: 260px; box-shadow: var(--shadow-sm); transition: var(--transition); isolation: isolate; }
.card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 30% 20%, rgba(var(--clr-accent-2-rgb), .25), transparent 70%); opacity: 0; transition: var(--transition); z-index: -1; }
.card:hover { transform: translateY(-6px); border-color: rgba(var(--clr-accent-rgb), .55); box-shadow: var(--shadow-md); }
.card:hover::before { opacity: 1; }
.card h3 { font-size: 1.15rem; letter-spacing: .5px; margin: 0; }
.card p { font-size: .9rem; color: var(--clr-text-muted); }
.card .price { margin-top: auto; font-weight: 600; font-size: .95rem; background: var(--grad-accent); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Testimonials */
.testimonials { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); }
.testimonial { background: #14141c; border: 1px solid var(--clr-border); padding: 1.4rem 1.6rem 1.6rem; border-radius: 16px; position: relative; }
.testimonial p { font-size: .92rem; }
.testimonial .author { font-size: .8rem; letter-spacing: .5px; color: var(--clr-text-muted); margin-top: .6rem; }

/* Products Grid */
.product-grid { --min: 200px; display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit,minmax(var(--min),1fr)); }
.product-card { background: #14141c; border: 1px solid var(--clr-border); padding: 1.5rem; border-radius: 16px; text-align: center; position: relative; }
.product-card h3 { margin: .6rem 0 .4rem; font-size: 1rem; }
.product-card span { font-size: .75rem; letter-spacing: .5px; text-transform: uppercase; color: var(--clr-text-muted); }
.product-card .desc { font-size: .75rem; color: var(--clr-text-muted); margin: 0 0 .9rem; }
.product-img { width: 100%; aspect-ratio: 4/3; background-size: cover; background-position: center; border-radius: 12px; margin: 0 0 1rem; filter: brightness(.82) saturate(1.1); transition: var(--transition); position: relative; }
.product-card:hover .product-img { transform: scale(1.04); filter: brightness(.95) saturate(1.25); }
.price-tag { font-size: .7rem; font-weight: 700; letter-spacing: 1px; display: inline-block; padding: .4rem .7rem; border-radius: var(--radius-round); background: rgba(var(--clr-accent-2-rgb), .18); color: var(--clr-accent-2); box-shadow: 0 0 0 1px rgba(var(--clr-accent-2-rgb), .4); }

/* Category Showcase */
.category-showcase { --min: 240px; display: grid; grid-template-columns: repeat(auto-fit,minmax(var(--min),1fr)); gap: 1.6rem; margin-top: 1rem; }
.cat-tile { position: relative; display: block; min-height: 250px; background: #14141c; border: 1px solid var(--clr-border); overflow: hidden; text-decoration: none; color: inherit; background-image: var(--img); background-size: cover; background-position: center; }
.cat-tile::before { content: ''; position: absolute; inset: 0; background: var(--img) center/cover no-repeat; filter: brightness(.78) saturate(1.22) contrast(1.05); transform: scale(1.08); transition: var(--transition); }
.cat-overlay { position: absolute; inset: 0; background: linear-gradient(160deg, rgba(11,11,15,.85), rgba(11,11,15,.25)), radial-gradient(circle at 40% 35%, rgba(255,255,255,.18), transparent 55%); mix-blend-mode: normal; pointer-events: none; }
.cat-content { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.4rem 1.4rem 1.6rem; z-index: 2; }
.cat-title { font-size: 1.65rem; line-height: 1.05; letter-spacing: .5px; font-weight: 600; margin: 0 0 .2rem; font-family: var(--ff-serif); }
.cat-sub { font-size: .85rem; opacity: .85; margin-top: .6rem; text-transform: uppercase; letter-spacing: 1px; font-weight: 500; }
.cat-tile:hover::before, .cat-tile:focus-visible::before { transform: scale(1.18); filter: brightness(.9) saturate(1.3) contrast(1.08); }
@media (hover:none) { .cat-tile::before { transform: none; } }
@media (max-width: 600px) { .cat-title { font-size: 1.4rem; } .cat-tile { min-height: 200px; } }

/* Services Grid */
.svc-grid { --min: 250px; display: grid; grid-template-columns: repeat(auto-fit,minmax(var(--min),1fr)); gap: 1.4rem; margin-top: .5rem; }
.svc-item { position: relative; background: linear-gradient(180deg,#15151d,#101014); border: 1px solid #1f1f24; padding: 1.4rem 1.3rem 1.55rem; display: flex; flex-direction: column; gap: .65rem; min-height: 190px; overflow: hidden; }
.svc-item h3 { margin: 0; font-size: 1rem; letter-spacing: .5px; font-weight: 600; background: linear-gradient(90deg,var(--clr-accent),var(--clr-accent-2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.svc-item p { margin: 0; font-size: .78rem; line-height: 1.5; color: var(--clr-text-muted); }
.price-pill { margin-top: auto; align-self: flex-start; font-size: .6rem; letter-spacing: 1px; text-transform: uppercase; font-weight: 600; padding: .4rem .55rem; background: rgba(var(--clr-accent-2-rgb), .18); color: var(--clr-accent-2); }
.svc-item::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 85% 15%, rgba(var(--clr-accent-2-rgb), .22), transparent 70%); opacity: 0; transition: opacity .5s ease; }
.svc-item:hover::after, .svc-item:focus-within::after { opacity: 1; }
.svc-item:hover { border-color: rgba(var(--clr-accent-rgb), .5); }

/* Category imagery */
section#hair { --cat-img: var(--hero-img); }
section#skin { --cat-img: var(--hero-img); }
section#makeup { --cat-img: var(--hero-img); }
section#hand-feet { --cat-img: var(--hero-img); }
section#hair, section#skin, section#makeup, section#hand-feet { position: relative; }
section#hair::before, section#skin::before, section#makeup::before, section#hand-feet::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: clamp(180px,24%,300px); background: var(--cat-img) center/cover; filter: brightness(.6) saturate(1.25) contrast(1.08); opacity: .32; mix-blend-mode: lighten; pointer-events: none; }
section#skin::before { content:''; position:absolute; top:0; right:0; bottom:0; width: clamp(180px,24%,300px); background: var(--cat-img) center/cover no-repeat; filter: brightness(.66) saturate(1.28) contrast(1.08); opacity:.38; mix-blend-mode: lighten; pointer-events:none; }
@media (max-width: 980px) { section#hair::before, section#skin::before, section#makeup::before, section#hand-feet::before { display: none; } }

/* Form */
.form-grid { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); }
.form-field { display: flex; flex-direction: column; gap: .4rem; }
.form-field label { font-size: .75rem; letter-spacing: .5px; text-transform: uppercase; color: var(--clr-text-muted); font-weight: 600; }
.form-field input, .form-field select, .form-field textarea { background: #1c1c21; border: 1px solid var(--clr-border); color: var(--clr-text); padding: .9rem 1rem; font: inherit; border-radius: 10px; resize: vertical; min-height: 54px; transition: var(--transition); }
.form-field textarea { min-height: 150px; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: none; border-color: var(--clr-accent-2); box-shadow: 0 0 0 2px rgba(var(--clr-accent-2-rgb), .35); }
.form-note { font-size: .7rem; color: var(--clr-text-muted); letter-spacing: .5px; margin-top: .6rem; }
.error-msg { color: var(--clr-error); font-size: .7rem; margin-top: .3rem; display: none; }

/* Footer */
.site-footer { background: #101014; border-top: 1px solid var(--clr-border); padding: 3rem 0 2rem; }
.footer-grid { display: grid; gap: 3rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-bottom: 2rem; }
.footer-col { line-height: 1.6; }
.footer-col h4 { 
  font-size: .9rem; 
  font-weight: 600;
  letter-spacing: .8px; 
  text-transform: uppercase; 
  margin: 0 0 1.2rem;
  color: var(--clr-text);
  background: linear-gradient(135deg, var(--clr-accent), var(--clr-accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.footer-col p { 
  margin: 0; 
  font-size: .85rem; 
  line-height: 1.7;
  color: var(--clr-text-muted); 
}
.footer-col ul { 
  list-style: none; 
  margin: 0; 
  padding: 0; 
  display: flex;
  flex-direction: column;
  gap: .7rem; 
}
.footer-col ul li { line-height: 1.6; }
.footer-col a { 
  font-size: .85rem; 
  color: var(--clr-text-muted); 
  transition: color .25s ease;
}
.footer-col a:hover { color: var(--clr-accent-2); }
.divider { 
  height: 1px; 
  background: linear-gradient(90deg, transparent, var(--clr-border), transparent); 
  margin: 2rem 0; 
}
.copyright { 
  text-align: center; 
  color: #666; 
  font-size: .75rem; 
  letter-spacing: .5px;
  padding: 1rem 0;
  margin: 0;
}

/* Social Links */
.social-links { gap: .8rem !important; }
.social-links a { 
  display: inline-flex; 
  align-items: center; 
  gap: .6rem; 
  padding: .6rem 1rem;
  background: linear-gradient(135deg, rgba(182, 70, 255, .08), rgba(255, 63, 179, .08));
  border: 1px solid rgba(182, 70, 255, .2);
  border-radius: 24px;
  transition: all .3s ease;
  font-weight: 500;
}
.social-links a:hover {
  background: linear-gradient(135deg, rgba(182, 70, 255, .15), rgba(255, 63, 179, .15));
  border-color: rgba(182, 70, 255, .4);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(182, 70, 255, .2);
}
.social-links i {
  font-size: 1.1rem;
  background: linear-gradient(135deg, var(--clr-accent), var(--clr-accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Utilities */
.divider { height: 1px; background: linear-gradient(90deg, transparent, var(--clr-border), transparent); margin: 2.5rem 0; }
.center { text-align: center; }
.mw-small { max-width: 560px; }
.badge { display: inline-block; padding: .4rem .8rem; font-size: .65rem; letter-spacing: 1px; font-weight: 600; border-radius: var(--radius-round); text-transform: uppercase; background: rgba(var(--clr-accent-2-rgb), .2); color: var(--clr-accent-2); margin-bottom: 1rem; }

/* Service Sections with Right Side Background Images */
section#hair, section#skin, section#makeup, section#hand-feet {
  overflow: hidden;
}

section#hair::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 45%;
  height: 100%;
  background-image: url('https://images.pexels.com/photos/3760851/pexels-photo-3760851.jpeg?auto=compress&cs=tinysrgb&w=1200');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
  opacity: 0.15;
}

section#skin::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 45%;
  height: 100%;
  background-image: url('https://images.pexels.com/photos/5938286/pexels-photo-5938286.jpeg?auto=compress&cs=tinysrgb&w=1200');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
  opacity: 0.15;
}

section#makeup::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 45%;
  height: 100%;
  background-image: url('https://images.pexels.com/photos/415829/pexels-photo-415829.jpeg?auto=compress&cs=tinysrgb&w=1200');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
  opacity: 0.15;
}

section#hand-feet::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 45%;
  height: 100%;
  background-image: url('https://images.pexels.com/photos/8534276/pexels-photo-8534276.jpeg?auto=compress&cs=tinysrgb&w=1200');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
  opacity: 0.15;
}

section#hair > .container, section#skin > .container, section#makeup > .container, section#hand-feet > .container {
  position: relative;
  z-index: 2;
}

@media (max-width: 980px) {
  section#hair::before, section#skin::before, section#makeup::before, section#hand-feet::before {
    width: 100%;
    opacity: 0.08;
  }
}

/* Featured Services */
.service-showcase { --min: 240px; display: grid; grid-template-columns: repeat(auto-fit,minmax(var(--min),1fr)); gap: 1.6rem; margin-top: 1rem; }
.svc-tile { position: relative; display: block; min-height: 250px; background: #14141c; border: 1px solid #1f1f24; overflow: hidden; text-decoration: none; color: inherit; }
.svc-tile::before { content: ''; position: absolute; inset: 0; background: var(--img) center/cover; filter: brightness(.57) saturate(1.18); transform: scale(1.08); transition: transform .9s cubic-bezier(.25,.6,.3,1), filter .9s; }
.svc-tile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(11,11,15,.85), rgba(11,11,15,.15)); mix-blend-mode: multiply; }
.svc-content { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.4rem 1.3rem 1.55rem; gap: .55rem; }
.svc-content h3 { margin: 0; font-size: 1.05rem; letter-spacing: .6px; font-weight: 600; background: linear-gradient(90deg,var(--clr-accent),var(--clr-accent-2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.svc-content p { margin: 0; font-size: .75rem; line-height: 1.45; color: var(--clr-text-muted); }
.svc-tag { align-self: flex-start; font-size: .58rem; letter-spacing: 1px; text-transform: uppercase; background: rgba(var(--clr-accent-2-rgb), .2); color: var(--clr-accent-2); padding: .4rem .55rem; font-weight: 600; }
.svc-tile:hover::before, .svc-tile:focus-visible::before { transform: scale(1.18); filter: brightness(.74) saturate(1.3); }
.svc-tile:hover, .svc-tile:focus-visible { border-color: rgba(var(--clr-accent-rgb), .5); }

/* Quotes / Testimonials */
.quotes-grid { --min: 280px; display: grid; grid-template-columns: repeat(auto-fit,minmax(var(--min),1fr)); gap: 1.6rem; margin-top: 1.4rem; }
.quote { background: linear-gradient(180deg,#15151d,#111114); border: 1px solid #1f1f24; padding: 1.6rem 1.5rem 1.55rem; display: flex; flex-direction: column; gap: .9rem; position: relative; }
.quote blockquote { margin: 0; font-size: .9rem; line-height: 1.55; font-style: italic; color: var(--clr-text); }
.quote figcaption { font-size: .6rem; letter-spacing: 1px; text-transform: uppercase; font-weight: 600; background: linear-gradient(90deg,var(--clr-accent),var(--clr-accent-2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.quote::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 85% 20%, rgba(var(--clr-accent-2-rgb), .18), transparent 70%); opacity: 0; transition: opacity .6s ease; }
.quote:hover::after, .quote:focus-within::after { opacity: 1; }
.quote:hover { border-color: rgba(var(--clr-accent-rgb), .45); }

/* Impressions */
.impressions-grid { --min: 260px; display: grid; grid-template-columns: repeat(auto-fit,minmax(var(--min),1fr)); gap: 1.4rem; margin-top: 1.4rem; }
.impression { position: relative; background: linear-gradient(185deg,#15151d,#101014); border: 1px solid #1f1f24; padding: 1.4rem 1.3rem 1.5rem; display: flex; flex-direction: column; gap: .9rem; min-height: 240px; }
.impression::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 80% 20%, rgba(var(--clr-accent-rgb), .18), transparent 70%); opacity: 0; transition: opacity .5s ease; }
.impression:hover::after, .impression:focus-within::after { opacity: 1; }
.imp-head { display: flex; gap: .9rem; align-items: center; }
.avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(var(--clr-accent-2-rgb), .45); box-shadow: 0 2px 9px -2px rgba(0,0,0,.6); }
.meta { display: flex; flex-direction: column; gap: .2rem; }
.name { margin: 0; font-size: .95rem; letter-spacing: .5px; font-weight: 600; }
.role { margin: 0; font-size: .6rem; letter-spacing: 1px; text-transform: uppercase; color: var(--clr-text-muted); font-weight: 600; }
.rating { font-size: .7rem; letter-spacing: 2px; color: var(--clr-accent-2); text-shadow: 0 0 6px rgba(var(--clr-accent-2-rgb), .45); }
.imp-quote { margin: 0; font-size: .82rem; line-height: 1.55; font-style: italic; color: var(--clr-text); }
@media (max-width: 640px) { .impressions-grid { --min: 100%; } }

/* CTA Panel */
.cta-panel { background: linear-gradient(110deg,#15151d,#101014 55%); border: 1px solid #202024; padding: 2.6rem 2.4rem 2.8rem; position: relative; overflow: hidden; }
.cta-panel::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 70% 20%, rgba(var(--clr-accent-2-rgb), .22), transparent 70%); opacity: .55; pointer-events: none; }
.cta-panel h2 { margin-top: 0; }
.cta-panel .btn { margin-top: .6rem; }
#cta-services .guidance-panel { text-align: left; }
#cta-services .cta-content { max-width: 780px; }
#cta-services .cta-points { list-style: none; margin: 1.2rem 0 1.6rem; padding: 0; display: grid; gap: .65rem; }
#cta-services .cta-points li { font-size: .7rem; letter-spacing: .9px; text-transform: uppercase; font-weight: 600; display: flex; align-items: flex-start; gap: .6rem; background: rgba(var(--clr-accent-rgb), .08); padding: .55rem .75rem .6rem; border: 1px solid rgba(var(--clr-accent-rgb), .35); }
#cta-services .point-icon { width: 18px; height: 18px; display: inline-grid; place-items: center; font-size: .7rem; font-weight: 700; background: var(--grad-accent); color: #111; border-radius: 50%; box-shadow: 0 0 0 1px rgba(var(--clr-accent-rgb), .4); }
@media (max-width: 640px) { #cta-services .cta-points { gap: .55rem; } #cta-services .cta-points li { font-size: .62rem; } }

/* Sharp edges in some panels */
.service-showcase .svc-tile, .quotes-grid .quote, .cta-panel { border-radius: 0; }

/* CTA Layout refinement */
#cta .cta-panel.layout { text-align: left; display: flex; justify-content: center; }
#cta .cta-content { max-width: 760px; width: 100%; position: relative; }
#cta .accent-bar { width: 62px; height: 4px; background: var(--grad-accent); margin: 0 0 1.4rem; }
#cta .section-title { margin-bottom: .9rem; }
#cta .section-lede { margin: 0 0 1.8rem; }
#cta .cta-actions { display: flex; gap: 1rem; flex-wrap: wrap; }
@media (max-width: 640px) { #cta .cta-panel.layout { padding: 2.2rem 1.6rem 2.4rem; } #cta .accent-bar { width: 54px; } }

/* About Section */
#about { --gap: 2.8rem; }
.about-grid { display: grid; grid-template-columns: minmax(0,420px) 1fr; gap: var(--gap); align-items: start; }
.about-intro { position: relative; padding-right: 1rem; }
.about-meta { display: flex; gap: 2.4rem; flex-wrap: wrap; margin: 2.2rem 0 1.2rem; }
.about-meta .metric { display: block; font-family: var(--ff-serif); font-size: clamp(1.9rem,3.4vw,2.6rem); line-height: 1; background: linear-gradient(90deg,#fff,var(--clr-accent-2) 60%, var(--clr-accent)); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 600; letter-spacing: .5px; }
.about-meta .label { font-size: .65rem; letter-spacing: 1px; text-transform: uppercase; color: var(--clr-text-muted); font-weight: 600; margin-top: .4rem; display: inline-block; }
.small-note { font-size: .6rem; letter-spacing: .8px; text-transform: uppercase; color: #666; }
.features-grid { --min: 240px; display: grid; grid-template-columns: repeat(auto-fit,minmax(var(--min),1fr)); gap: 1.4rem; align-content: start; }
.feature { position: relative; background: linear-gradient(180deg,#15151d,#0e0e14); border: 1px solid #1f1f24; padding: 1.55rem 1.5rem 1.7rem; display: flex; flex-direction: column; gap: .75rem; min-height: 210px; overflow: hidden; }
.feature .bar { width: 38px; height: 3px; background: var(--grad-accent); margin-bottom: .2rem; }
.feature h3 { margin: 0; font-size: 1.05rem; letter-spacing: .6px; font-weight: 600; }
.feature p { margin: 0; font-size: .8rem; line-height: 1.5; color: var(--clr-text-muted); }
.feature .tag { margin-top: auto; display: inline-block; font-size: .6rem; letter-spacing: 1px; font-weight: 600; text-transform: uppercase; padding: .35rem .55rem; background: rgba(var(--clr-accent-2-rgb),.15); color: var(--clr-accent-2); }
.feature::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 80% 15%, rgba(var(--clr-accent-rgb), .18), transparent 70%); opacity: 0; transition: opacity .5s ease; }
.feature:hover::after, .feature:focus-within::after { opacity: 1; }
.feature:hover { border-color: rgba(var(--clr-accent-rgb), .45); }

#about .feature, #about .feature .tag { border-radius: 0; }

@media (max-width: 980px) { .about-grid { grid-template-columns: 1fr; } .about-intro { padding-right: 0; } .about-meta { gap: 1.8rem; } }

/* Brands Section - Modern 3-Column Design */
.brands-section {
  position: relative;
  background: var(--clr-bg);
  padding: clamp(4.5rem, 9vh, 7rem) 0;
  overflow: hidden;
}

/* Premium Offers Section */
.offers-premium { position: relative; }
.offers-header { margin-bottom: 2.4rem; }
.offers-premium-grid { 
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); 
  gap: 2rem; 
  margin-top: 1.6rem; 
}

/* Premium Card Base */
.premium-card { 
  position: relative; 
  background: linear-gradient(185deg, #16161f, #0f0f13); 
  border: 1px solid #202028; 
  overflow: hidden; 
  display: flex; 
  flex-direction: column;
  transition: all .45s cubic-bezier(.4,0,.2,1); 
}
.premium-card::before { 
  content: ''; 
  position: absolute; 
  inset: 0; 
  background: radial-gradient(circle at 85% 15%, rgba(var(--clr-accent-rgb), .2), transparent 65%); 
  opacity: 0; 
  transition: opacity .55s ease; 
}
.premium-card:hover::before { opacity: 1; }
.premium-card:hover { 
  border-color: rgba(var(--clr-accent-rgb), .55); 
  transform: translateY(-4px); 
  box-shadow: 0 12px 32px rgba(0,0,0,.4); 
}

/* Card Media */
.card-media { 
  position: relative; 
  width: 100%; 
  aspect-ratio: 4/3; 
  overflow: hidden; 
}
.card-media img { 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
  display: block; 
  filter: brightness(.95) saturate(1.3) contrast(1.05); 
  transition: all .7s cubic-bezier(.4,0,.2,1); 
}
.premium-card:hover .card-media img { 
  filter: brightness(1.05) saturate(1.4) contrast(1.08); 
  transform: scale(1.08); 
}
.media-overlay { 
  position: absolute; 
  inset: 0; 
  background: linear-gradient(180deg, rgba(11,11,15,.35) 0%, rgba(11,11,15,.1) 50%, rgba(11,11,15,.45) 100%); 
  pointer-events: none; 
}

/* Floating Badges */
.premium-badge, .loyalty-tier-badge, .referral-badge { 
  position: absolute; 
  top: 1rem; 
  right: 1rem; 
  z-index: 2; 
  display: flex; 
  align-items: center; 
  gap: .4rem; 
  padding: .55rem .85rem; 
  font-size: .68rem; 
  font-weight: 700; 
  letter-spacing: 1px; 
  text-transform: uppercase; 
  background: rgba(11,11,15,.85); 
  backdrop-filter: blur(8px); 
  border: 1px solid rgba(var(--clr-accent-rgb), .4); 
  box-shadow: 0 4px 16px rgba(0,0,0,.4); 
}
.premium-badge { 
  background: linear-gradient(135deg, var(--clr-accent-2), var(--clr-accent)); 
  color: #fff; 
  border: none; 
  font-size: .75rem; 
}
.loyalty-tier-badge .tier-icon, .referral-badge .badge-icon { 
  font-size: 1rem; 
  background: linear-gradient(135deg, var(--clr-accent), var(--clr-accent-2)); 
  -webkit-background-clip: text; 
  background-clip: text; 
  color: transparent; 
}

/* Card Content */
.card-content { 
  padding: 1.8rem 1.6rem 2rem; 
  display: flex; 
  flex-direction: column; 
  gap: .9rem; 
  position: relative; 
}
.card-title { 
  margin: 0; 
  font-size: 1.15rem; 
  letter-spacing: .7px; 
  font-weight: 600; 
  background: linear-gradient(90deg, var(--clr-accent), var(--clr-accent-2)); 
  -webkit-background-clip: text; 
  background-clip: text; 
  color: transparent; 
}
.card-intro { 
  margin: 0; 
  font-size: .82rem; 
  line-height: 1.55; 
  color: var(--clr-text-muted); 
}

/* Card Features List */
.card-features { 
  list-style: none; 
  margin: .4rem 0; 
  padding: 0; 
  display: flex; 
  flex-direction: column; 
  gap: .65rem; 
}
.card-features li { 
  display: flex; 
  align-items: center; 
  gap: .6rem; 
  font-size: .76rem; 
  letter-spacing: .4px; 
  color: var(--clr-text); 
  padding: .6rem .75rem; 
  background: rgba(var(--clr-accent-rgb), .08); 
  border: 1px solid rgba(var(--clr-accent-rgb), .25); 
  border-radius: 8px; 
}
.feature-icon { 
  width: 18px; 
  height: 18px; 
  flex-shrink: 0; 
  color: var(--clr-accent); 
}

/* Tier Showcase (horizontal layout) */
.tier-showcase { 
  display: flex; 
  align-items: center; 
  gap: 1rem; 
  padding: 1rem 0; 
  margin: .4rem 0 .6rem; 
}
.tier-item { 
  flex: 1; 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  text-align: center; 
  gap: .5rem; 
}
.tier-num { 
  width: 40px; 
  height: 40px; 
  display: grid; 
  place-items: center; 
  font-size: .85rem; 
  font-weight: 700; 
  background: linear-gradient(135deg, rgba(var(--clr-accent-rgb), .25), rgba(var(--clr-accent-2-rgb), .25)); 
  border: 2px solid rgba(var(--clr-accent-rgb), .5); 
  border-radius: 50%; 
  color: var(--clr-accent); 
}
.tier-benefit { 
  margin: 0; 
  font-size: .65rem; 
  letter-spacing: .5px; 
  line-height: 1.4; 
  color: var(--clr-text-muted); 
}
.tier-divider { 
  width: 1px; 
  height: 36px; 
  background: linear-gradient(180deg, transparent, rgba(var(--clr-accent-rgb), .35), transparent); 
}

/* Loyalty Perks */
.loyalty-perks { 
  display: flex; 
  gap: .8rem; 
  flex-wrap: wrap; 
  margin: .4rem 0 .6rem; 
}
.perk-badge { 
  display: flex; 
  align-items: center; 
  gap: .45rem; 
  padding: .5rem .75rem; 
  font-size: .68rem; 
  font-weight: 600; 
  letter-spacing: .6px; 
  background: rgba(var(--clr-accent-2-rgb), .12); 
  border: 1px solid rgba(var(--clr-accent-2-rgb), .35); 
  border-radius: 20px; 
  color: var(--clr-text); 
}
.perk-icon { 
  width: 14px; 
  height: 14px; 
  color: var(--clr-accent-2); 
}

/* Card Label */
.card-label { 
  margin-top: auto; 
  align-self: flex-start; 
  font-size: .6rem; 
  letter-spacing: 1px; 
  text-transform: uppercase; 
  font-weight: 600; 
  padding: .4rem .6rem; 
  background: rgba(var(--clr-accent-2-rgb), .2); 
  color: var(--clr-accent-2); 
  border-radius: 4px; 
}

/* Actions */
.offers-actions { 
  display: flex; 
  gap: 1.2rem; 
  flex-wrap: wrap; 
  margin-top: 2.4rem; 
  justify-content: center; 
}
@media (max-width:768px) { 
  .offers-premium-grid { 
    grid-template-columns: 1fr; 
    gap: 1.5rem; 
  }
  .tier-showcase { 
    flex-direction: column; 
    gap: .8rem; 
  }
  .tier-divider { 
    width: 40px; 
    height: 1px; 
    background: linear-gradient(90deg, transparent, rgba(var(--clr-accent-rgb), .35), transparent); 
  }
  .offers-actions { 
    flex-direction: column; 
    align-items: stretch; 
  }
}

/* Modern Loyalty Card */
.loyalty-card-modern { 
  display: flex; 
  flex-direction: column; 
  gap: 1.2rem; 
  padding: 2rem 1.8rem 2.2rem;
  min-height: auto;
}
.loyalty-media { 
  position: relative; 
  width: 100%; 
  aspect-ratio: 16/9;
  border-radius: 16px; 
  overflow: hidden; 
  isolation: isolate;
  margin: -2rem -1.8rem 0;
}
.loyalty-media img { 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
  display: block; 
  filter: brightness(.68) saturate(1.25); 
  transition: filter .7s ease, transform .7s ease; 
}
.loyalty-card-modern:hover .loyalty-media img { 
  filter: brightness(.82) saturate(1.3) contrast(1.05); 
  transform: scale(1.06); 
}
.loyalty-media::before { 
  content: ''; 
  position: absolute; 
  inset: 0; 
  background: linear-gradient(180deg, rgba(11,11,15,.75) 0%, rgba(11,11,15,.25) 40%, rgba(11,11,15,.65) 100%); 
  mix-blend-mode: multiply; 
}
.loyalty-card-modern .offer-title { 
  margin: .4rem 0 .3rem;
  font-size: 1.15rem;
}
.loyalty-card-modern .offer-desc { 
  margin: 0 0 .6rem;
  font-size: .82rem;
  line-height: 1.55;
}
.loyalty-progress-bar { 
  position: relative; 
  background: #1a1a21; 
  border: 1px solid #24242b; 
  height: 18px; 
  border-radius: 30px; 
  margin: 0 0 1.2rem; 
  overflow: hidden; 
  font-size: .65rem; 
  letter-spacing: .8px; 
  text-transform: uppercase; 
  font-weight: 600; 
  display: flex; 
  align-items: center; 
}
.loyalty-progress-bar .lp-fill { 
  position: absolute; 
  inset: 0; 
  width: var(--progress); 
  background: linear-gradient(90deg, var(--clr-accent), var(--clr-accent-2)); 
  box-shadow: 0 0 0 1px rgba(var(--clr-accent-rgb), .4); 
  border-radius: inherit; 
  animation: progress-grow 1.2s cubic-bezier(.4,0,.2,1) both; 
}
@keyframes progress-grow { 
  from { width: 0; } 
  to { width: var(--progress); } 
}
.lp-label { 
  position: relative; 
  padding: 0 .9rem; 
  z-index: 2; 
  color: var(--clr-text); 
  font-size: .68rem;
}
.loyalty-tiers { 
  display: flex; 
  flex-direction: column; 
  gap: .7rem; 
  margin: 0 0 1rem;
}
.loyalty-tiers .tier { 
  display: flex; 
  gap: .75rem; 
  align-items: center; 
  background: rgba(21,21,29,.6); 
  border: 1px solid #202024; 
  padding: .75rem .85rem; 
  border-radius: 12px; 
  position: relative; 
  overflow: hidden; 
}
.loyalty-tiers .tier::before { 
  content: ''; 
  position: absolute; 
  inset: 0; 
  background: radial-gradient(circle at 80% 20%, rgba(var(--clr-accent-rgb), .18), transparent 70%); 
  opacity: 0; 
  transition: opacity .55s ease; 
}
.loyalty-tiers .tier:hover::before { 
  opacity: 1; 
}
.loyalty-tiers .tier:hover { 
  border-color: rgba(var(--clr-accent-rgb), .45); 
}
.loyalty-tiers .tier-badge { 
  width: 32px; 
  height: 32px; 
  min-width: 32px;
  display: grid; 
  place-items: center; 
  font-size: .7rem; 
  font-weight: 700; 
  letter-spacing: 1px; 
  border-radius: 50%; 
  background: linear-gradient(135deg, var(--clr-accent), var(--clr-accent-2)); 
  color: #111; 
  box-shadow: 0 0 0 1px rgba(var(--clr-accent-rgb), .5), 0 4px 18px -6px rgba(var(--clr-accent-rgb), .6); 
}
.loyalty-tiers .tier-text { 
  margin: 0; 
  flex: 1; 
  font-size: .75rem; 
  line-height: 1.4;
  color: var(--clr-text-muted); 
}
.loyalty-gallery { 
  display: flex; 
  gap: .65rem; 
  margin: 0 0 .8rem;
  justify-content: center;
}
.loyalty-gallery img { 
  width: 72px; 
  height: 72px; 
  object-fit: cover; 
  border-radius: 14px; 
  border: 2px solid #24242b; 
  filter: brightness(.75) saturate(1.2); 
  transition: filter .5s ease, transform .5s ease, border-color .5s ease; 
}
.loyalty-gallery img:hover { 
  filter: brightness(.92) saturate(1.3) contrast(1.05); 
  transform: translateY(-4px); 
  border-color: rgba(var(--clr-accent-rgb), .4);
}
.loyalty-card-modern .benefits {
  margin: 0 0 .5rem;
}
.loyalty-card-modern .offer-tag {
  align-self: center;
  margin-top: .4rem;
}
@media (max-width: 780px) { 
  .loyalty-media { 
    aspect-ratio: 4/3; 
  } 
  .loyalty-gallery {
    gap: .5rem;
  }
  .loyalty-gallery img {
    width: 60px;
    height: 60px;
  }
}
@media (prefers-reduced-motion: reduce) { 
  .loyalty-gallery img, 
  .loyalty-media img { 
    transition: none; 
  } 
  .loyalty-progress-bar .lp-fill { 
    animation: none; 
  } 
}

.brands-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(3rem, 6vh, 4.5rem);
}

.brands-grid-modern {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  position: relative;
  z-index: 1;
}

.brand-tile {
  position: relative;
  background: linear-gradient(135deg, #15151d 0%, #101014 100%);
  border: 1px solid #202024;
  padding: clamp(2rem, 4vh, 2.8rem) clamp(1.5rem, 3vw, 2rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.brand-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(182, 70, 255, .12), transparent 65%);
  opacity: 0;
  transition: opacity 0.5s ease;
}

.brand-tile::after {
  content: '';
  position: absolute;
  top: 0;

/* Highlighted offer with subtle animated shimmer */
.offer-card.highlight {
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 0 0 4px rgba(255,255,255,0.02), 0 8px 32px -12px var(--accent-dark);
}
.offer-card.highlight .discount-badge {
  animation: pulseSoft 3.4s ease-in-out infinite;
}

@keyframes pulseSoft {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.06); filter: brightness(1.15); }
}

.discount-badge {
  position: absolute;
  top: .85rem;
  right: .85rem;
  background: conic-gradient(from 140deg at 50% 50%, var(--accent) 0deg, var(--accent-dark) 160deg, var(--accent) 320deg);
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .5px;
  padding: .55rem .7rem .5rem;
  border-radius: 0.65rem;
  box-shadow: 0 3px 14px -4px var(--accent);
  text-shadow: 0 1px 0 rgba(0,0,0,0.4);
  line-height: 1;
}

.offer-points {
  list-style: none;
  margin: 0;
  padding: 0 0 .25rem;
  display: flex;
  flex-direction: column;
  gap: .45rem;
  font-size: .75rem;
  color: var(--text-muted);
}
.offer-points li {
  position: relative;
  padding-left: 1rem;
}
.offer-points li::before {
  content: '•';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent);
  font-weight: 600;
}

/* Loyalty Progress Tiers */
.loyalty-progress {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  margin: .35rem 0 .5rem;
  position: relative;
}
.loyalty-progress::before {
  content: '';
  position: absolute;
  left: 1.15rem;
  top: .4rem;
  bottom: .4rem;
  width: 2px;
  background: linear-gradient(to bottom, var(--accent), rgba(255,255,255,0.05));
  border-radius: 2px;
}
.tier {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  position: relative;
}
.tier-badge {
  width: 26px;
  height: 26px;
  min-width: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .7rem;
  font-weight: 700;
  background: linear-gradient(160deg, var(--accent-dark), var(--accent));
  color: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 10px -4px var(--accent);
  position: relative;
}
.tier-badge::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  padding: 2px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.35), transparent 70%);
  mix-blend-mode: overlay;
}
.tier-text {
  font-size: .8rem;
  line-height: 1.25;
  color: var(--text-muted);
}
.tier:hover .tier-badge { box-shadow: 0 0 0 2px rgba(255,255,255,0.05), 0 3px 14px -4px var(--accent); }
.tier:hover .tier-text { color: var(--text); }

@media (prefers-reduced-motion: reduce) {
  .offer-card.highlight .discount-badge { animation: none; }
}
  left: 0;
  right: 0;
  height: 3px;
  background: var(--grad-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.brand-icon {
  position: relative;
  width: 100%;
  max-width: 180px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
}

.brand-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.75;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.brand-name {
  margin: 0;
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #fff;
  transition: color 0.5s ease;
}

.brand-desc {
  margin: 0;
  font-size: clamp(0.8rem, 1.5vw, 0.9rem);
  line-height: 1.5;
  color: var(--clr-text-muted);
  transition: color 0.5s ease;
}

.brand-tile:hover {
  transform: translateY(-6px);
  border-color: rgba(182, 70, 255, .4);
  background: linear-gradient(135deg, #1a1a24 0%, #13131a 100%);
  box-shadow: 
    0 12px 40px -8px rgba(182, 70, 255, .25),
    0 0 0 1px rgba(182, 70, 255, .15) inset;
}

.brand-tile:hover::before {
  opacity: 1;
}

.brand-tile:hover::after {
  transform: scaleX(1);
}

.brand-tile:hover .brand-icon img {
  opacity: 1;
  filter: brightness(0) invert(1) drop-shadow(0 0 16px rgba(182, 70, 255, .5));
  transform: scale(1.08);
}

.brand-tile:hover .brand-name {
  color: var(--clr-accent-2);
}

.brand-tile:hover .brand-desc {
  color: rgba(255, 255, 255, 0.85);
}

@media (max-width: 840px) {
  .brands-grid-modern {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .brands-grid-modern {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }
  
  .brand-tile {
    padding: 1.8rem 1.5rem;
  }
  
  .brands-section {
    padding: clamp(3.5rem, 7vh, 5rem) 0;
  }
}

/* Media Queries */
@media (max-width: 840px) { .nav-links { position: fixed; top:0; right:0; bottom:0; left:30%; background: rgba(11,11,15,.96); flex-direction: column; padding: 7rem 2rem 4rem; backdrop-filter: blur(20px); transform: translateX(100%); transition: var(--transition); gap: 2rem; } .nav-links.open { transform: translateX(0); } .mobile-toggle { display: block; } }
@media (max-width: 560px) { .hero h1 { font-size: clamp(2.3rem, 9vw, 3.2rem); } .cards { gap: 1.4rem; } .hero { padding: 4.5rem 0 4rem; } .brand img { height: 48px; } }
@media (prefers-reduced-motion: reduce) { .services-hero-bg { transform: none; } .cat-tile::before, .svc-tile::before { transition: none; } }
@media (prefers-reduced-motion: reduce) { .hero-mesh, .hero-mesh::before, .hero-mesh::after { animation: none; filter: blur(50px) saturate(120%); } }

/* Services Hero */
.services-hero { position: relative; min-height: 60vh; display: flex; align-items: stretch; padding: clamp(4.5rem,9vh,7rem) 0 clamp(3.5rem,6vh,4.5rem); overflow: hidden; }
.services-hero-bg { position: absolute; inset: 0; background: var(--hero-img) center/cover; filter: var(--hero-bg-filter); transform: scale(1.06); transition: filter .8s ease; }
.services-hero-overlay { position: absolute; inset: 0; background: linear-gradient(115deg, var(--hero-overlay-dark), var(--hero-overlay-mid) 48%, var(--hero-overlay-light) 74%), radial-gradient(circle at 72% 26%, rgba(var(--clr-accent-2-rgb), .2), transparent 68%); mix-blend-mode: normal; pointer-events: none; }
.services-hero .hero-inner { position: relative; display: grid; grid-template-columns: minmax(0,560px) minmax(0,380px); gap: clamp(2.8rem,5vw,4rem); align-items: start; }
.services-hero .hero-content { display: flex; flex-direction: column; gap: 1.2rem; }
.services-hero h1 { margin: 0; font-size: clamp(2.4rem, 6vw, 3.8rem); background: linear-gradient(120deg,#fff,var(--clr-accent-2) 45%, var(--clr-accent) 70%); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: .5px; }
.hero-sub { font-size: clamp(1rem,1.5vw,1.25rem); line-height: 1.55; color: var(--clr-text-muted); max-width: 640px; margin: 0; }
.hero-highlights { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .55rem; }
.hero-highlights li { font-size: .75rem; letter-spacing: .8px; text-transform: uppercase; font-weight: 600; display: flex; align-items: flex-start; gap: .6rem; background: rgba(var(--clr-accent-rgb), .14); padding: .55rem .8rem .6rem; border: 1px solid rgba(var(--clr-accent-rgb), .35); }
.hl-icon { font-size: .75rem; line-height: 1; color: var(--clr-accent-2); filter: drop-shadow(0 0 4px rgba(var(--clr-accent-2-rgb), .55)); }
.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: .8rem; }
.hero-actions .btn { font-size: .85rem; }
.hero-card { position: relative; background: linear-gradient(180deg,#15151d,#101014); border: 1px solid #202024; padding: 1.8rem 1.6rem 2rem; display: flex; flex-direction: column; gap: 1.2rem; box-shadow: 0 4px 26px -6px rgba(0,0,0,.6); }
.hero-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 78% 18%, rgba(var(--clr-accent-2-rgb), .24), transparent 70%); opacity: .5; pointer-events: none; }
.card-heading { margin: 0; font-size: .9rem; letter-spacing: 1px; text-transform: uppercase; color: var(--clr-text-muted); font-weight: 600; }
.card-grid { display: grid; gap: 1.2rem; }
.card-line { display: flex; flex-direction: column; gap: .45rem; }
.card-line .mini { margin: 0; font-size: .95rem; letter-spacing: .6px; font-weight: 600; }
.card-line p { margin: 0; font-size: .75rem; line-height: 1.5; color: var(--clr-text-muted); }
@media (max-width: 980px) { .services-hero .hero-inner { grid-template-columns: 1fr; } .hero-card { margin-top: 2.2rem; } }
@media (max-width: 640px) { .hero-highlights { grid-template-columns: 1fr; } .hero-highlights li { font-size: .65rem; } .services-hero { padding: 4rem 0 3rem; } .services-hero h1 { font-size: clamp(2.2rem,8vw,3rem); } }

/* Scroll Animations */
[data-animate] { opacity: 0; transform: translateY(32px); transition: opacity .8s ease, transform .8s ease; }
[data-animate].in { opacity: 1; transform: none; }

/* Accessibility focus */
:focus-visible { outline: 2px solid var(--clr-accent-2); outline-offset: 2px; }

/* Print minimal */
@media print { .mobile-toggle, .nav-links, .hero-bg, .hero::before { display: none !important; } body { background: #fff; color: #000; } }

/* ============================================
   CAREERS PAGE STYLES
   ============================================ */

/* Careers Hero */
.careers-hero {
  position: relative;
  background: 
    linear-gradient(180deg, rgba(11,11,15,.85) 0%, rgba(11,11,15,.45) 45%, rgba(11,11,15,.75) 100%),
    url('https://images.pexels.com/photos/3993443/pexels-photo-3993443.jpeg?auto=compress&cs=tinysrgb&w=1600') center/cover;
  min-height: 70vh;
  display: flex;
  align-items: center;
  padding: 6rem 0 4rem;
}

.careers-hero .hero-content {
  position: relative;
  z-index: 2;
  max-width: 900px;
}

.careers-hero .hero-title {
  font-size: clamp(2.5rem, 6vw, 4rem);
  line-height: 1.15;
  margin: 1rem 0 1.5rem;
}

.careers-hero .hero-lede {
  font-size: 1.1rem;
  line-height: 1.7;
  max-width: 700px;
  margin: 0 0 2rem;
}

.careers-hero .hero-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Career Benefits Grid */
.career-benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 2.5rem;
  align-items: stretch;
}

.benefit-card {
  background: linear-gradient(185deg, #16161f, #0f0f13);
  border: 1px solid #202028;
  padding: 2rem 1.8rem 2.2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: all .45s cubic-bezier(.4,0,.2,1);
  position: relative;
  overflow: hidden;
  height: 100%;
  border-radius: 12px;
}

.benefit-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(var(--clr-accent-rgb), .15), transparent 65%);
  opacity: 0;
  transition: opacity .55s ease;
}

.benefit-card:hover::before {
  opacity: 1;
}

.benefit-card:hover {
  border-color: rgba(var(--clr-accent-rgb), .5);
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,.4);
}

.benefit-icon-box {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(var(--clr-accent-rgb), .2), rgba(var(--clr-accent-2-rgb), .2));
  border: 2px solid rgba(var(--clr-accent-rgb), .4);
  border-radius: 12px;
}

.benefit-icon-box svg {
  width: 28px;
  height: 28px;
  color: var(--clr-accent);
}

.benefit-card h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: .5px;
  background: linear-gradient(90deg, var(--clr-accent), var(--clr-accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.benefit-card p {
  margin: 0;
  font-size: .82rem;
  line-height: 1.6;
  color: var(--clr-text-muted);
}

/* Programs Grid */
.programs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 2.5rem;
  margin-top: 2.5rem;
  align-items: stretch;
}

.program-card {
  background: linear-gradient(185deg, #16161f, #0f0f13);
  border: 1px solid #202028;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all .45s cubic-bezier(.4,0,.2,1);
  position: relative;
  height: 100%;
  border-radius: 12px;
}

.program-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 85% 15%, rgba(var(--clr-accent-rgb), .18), transparent 65%);
  opacity: 0;
  transition: opacity .55s ease;
  z-index: 1;
  pointer-events: none;
}

.program-card:hover::before {
  opacity: 1;
}

.program-card:hover {
  border-color: rgba(var(--clr-accent-rgb), .55);
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0,0,0,.45);
}

.featured-program {
  border: 2px solid rgba(var(--clr-accent-2-rgb), .4);
}

.featured-program:hover {
  border-color: rgba(var(--clr-accent-2-rgb), .7);
  box-shadow: 0 16px 48px rgba(var(--clr-accent-2-rgb), .25);
}

/* Program Media */
.program-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16/10;
  overflow: hidden;
}

.program-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(.9) saturate(1.25) contrast(1.05);
  transition: all .7s cubic-bezier(.4,0,.2,1);
}

.program-card:hover .program-media img {
  filter: brightness(1) saturate(1.35) contrast(1.08);
  transform: scale(1.08);
}

.program-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11,11,15,.4) 0%, rgba(11,11,15,.15) 50%, rgba(11,11,15,.65) 100%);
  pointer-events: none;
}

.program-badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem .8rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  background: linear-gradient(135deg, var(--clr-accent), var(--clr-accent-2));
  color: #fff;
  border-radius: 20px;
  box-shadow: 0 4px 16px rgba(0,0,0,.4);
}

.skincare-badge {
  background: linear-gradient(135deg, #ff3fb3, #ff8f5a);
}

.complete-badge {
  background: linear-gradient(135deg, #ffd700, #ff8f5a);
}

.program-badge .badge-icon {
  font-size: 1rem;
}

/* Program Content */
.program-content {
  padding: 1.8rem 1.6rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: relative;
  flex: 1;
}

.program-title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: .6px;
  background: linear-gradient(90deg, var(--clr-accent), var(--clr-accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.program-intro {
  margin: 0;
  font-size: .82rem;
  line-height: 1.55;
  color: var(--clr-text-muted);
}

.program-highlights {
  list-style: none;
  margin: .6rem 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .7rem;
}

.program-highlights li {
  display: flex;
  align-items: center;
  gap: .65rem;
  font-size: .76rem;
  color: var(--clr-text);
  padding: .6rem .8rem;
  background: rgba(var(--clr-accent-rgb), .08);
  border: 1px solid rgba(var(--clr-accent-rgb), .22);
  border-radius: 8px;
}

.highlight-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--clr-accent);
}

/* Program Footer */
.program-footer {
  margin-top: auto;
  padding-top: 1.2rem;
  border-top: 1px solid #202028;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.program-price {
  display: flex;
  flex-direction: column;
  gap: .2rem;
}

.price-label {
  font-size: .68rem;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--clr-text-muted);
  font-weight: 600;
}

.price-amount {
  font-size: 1.3rem;
  font-weight: 700;
  background: linear-gradient(90deg, var(--clr-accent), var(--clr-accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.price-save {
  font-size: .7rem;
  color: #4ade80;
  font-weight: 600;
}

.btn-program {
  padding: .65rem 1.3rem;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .6px;
  text-transform: uppercase;
  background: linear-gradient(135deg, var(--clr-accent), var(--clr-accent-2));
  color: #fff;
  border: none;
  border-radius: 24px;
  text-decoration: none;
  transition: all .35s ease;
  white-space: nowrap;
}

.btn-program:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(var(--clr-accent-rgb), .4);
}

/* Process Timeline */
.process-timeline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
  margin-top: 2.5rem;
  position: relative;
  align-items: stretch;
}

.process-step {
  text-align: center;
  padding: 2.2rem 1.8rem 2.4rem;
  background: linear-gradient(185deg, #16161f, #0f0f13);
  border: 1px solid #202028;
  position: relative;
  transition: all .45s cubic-bezier(.4,0,.2,1);
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  border-radius: 12px;
}

.process-step:hover {
  border-color: rgba(var(--clr-accent-rgb), .5);
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,.4);
}

.step-number {
  width: 64px;
  height: 64px;
  margin: 0 auto 1.2rem;
  display: grid;
  place-items: center;
  font-size: 1.4rem;
  font-weight: 700;
  background: linear-gradient(135deg, rgba(var(--clr-accent-rgb), .25), rgba(var(--clr-accent-2-rgb), .25));
  border: 3px solid rgba(var(--clr-accent-rgb), .5);
  border-radius: 50%;
  color: var(--clr-accent);
}

.step-title {
  margin: 0 0 .8rem;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: .5px;
  color: var(--clr-text);
  width: 100%;
}

.step-desc {
  margin: 0;
  font-size: .82rem;
  line-height: 1.6;
  color: var(--clr-text-muted);
  width: 100%;
}

/* Career Form */
.form-wrapper {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 4rem;
  align-items: start;
  max-width: 1200px;
  margin: 0 auto;
}

.form-intro {
  position: sticky;
  top: 100px;
}

.form-benefits {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .8rem;
}

.form-benefit {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .82rem;
  color: var(--clr-text);
  padding: .6rem .8rem;
  background: rgba(var(--clr-accent-rgb), .08);
  border: 1px solid rgba(var(--clr-accent-rgb), .22);
  border-radius: 8px;
}

.form-benefit svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--clr-accent);
}

.career-form {
  background: linear-gradient(185deg, #16161f, #0f0f13);
  border: 1px solid #202028;
  padding: 2.5rem 2.2rem 2.8rem;
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0,0,0,.3);
}

.form-group {
  margin-bottom: 1.4rem;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
}

.form-group label {
  display: block;
  margin-bottom: .5rem;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .4px;
  color: var(--clr-text);
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: .8rem 1rem;
  font-size: .85rem;
  font-family: inherit;
  background: #0b0b11;
  border: 1px solid #26262d;
  color: var(--clr-text);
  border-radius: 8px;
  transition: all .3s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--clr-accent);
  box-shadow: 0 0 0 3px rgba(var(--clr-accent-rgb), .15);
}

.form-group textarea {
  resize: vertical;
  min-height: 100px;
}

.form-actions {
  margin-top: 2rem;
  text-align: center;
}

.btn-submit {
  width: 100%;
  padding: 1rem 2rem;
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .8px;
  text-transform: uppercase;
  background: linear-gradient(135deg, var(--clr-accent), var(--clr-accent-2));
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all .35s ease;
}

.btn-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(var(--clr-accent-rgb), .4);
}

.form-note {
  margin-top: 1rem;
  font-size: .72rem;
  color: var(--clr-text-muted);
  text-align: center;
}

/* Success Stories */
.success-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2.5rem;
  margin-top: 2.5rem;
  align-items: stretch;
}

.success-card {
  background: linear-gradient(185deg, #16161f, #0f0f13);
  border: 1px solid #202028;
  overflow: hidden;
  transition: all .45s cubic-bezier(.4,0,.2,1);
  height: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
}

.success-card:hover {
  border-color: rgba(var(--clr-accent-rgb), .5);
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,.4);
}

.success-card img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  display: block;
  filter: brightness(.85) saturate(1.2);
  transition: filter .7s ease;
}

.success-card:hover img {
  filter: brightness(.95) saturate(1.3);
}

.success-content {
  padding: 1.8rem 1.6rem 2rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.success-content h4 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--clr-text);
}

.success-role {
  margin: 0;
  font-size: .72rem;
  letter-spacing: .6px;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--clr-accent-2);
  padding-bottom: .8rem;
  border-bottom: 1px solid #202028;
}

.success-quote {
  margin: 0;
  font-size: .82rem;
  line-height: 1.65;
  color: var(--clr-text-muted);
  font-style: italic;
}

/* FAQs */
.faq-grid {
  max-width: 900px;
  margin: 2rem auto 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.faq-item {
  background: linear-gradient(185deg, #16161f, #0f0f13);
  border: 1px solid #202028;
  border-radius: 8px;
  overflow: hidden;
  transition: all .35s ease;
}

.faq-item[open] {
  border-color: rgba(var(--clr-accent-rgb), .4);
}

.faq-question {
  padding: 1.2rem 1.4rem;
  font-size: .92rem;
  font-weight: 600;
  letter-spacing: .4px;
  color: var(--clr-text);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all .3s ease;
}

.faq-question::-webkit-details-marker {
  display: none;
}

.faq-question::after {
  content: '+';
  font-size: 1.5rem;
  color: var(--clr-accent);
  transition: transform .3s ease;
}

.faq-item[open] .faq-question::after {
  transform: rotate(45deg);
}

.faq-question:hover {
  color: var(--clr-accent);
}

.faq-answer {
  padding: 0 1.4rem 1.2rem;
}

.faq-answer p {
  margin: 0;
  font-size: .82rem;
  line-height: 1.65;
  color: var(--clr-text-muted);
}

/* Responsive - Careers Page */
@media (max-width: 1024px) {
  .programs-grid {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
  }
}

@media (max-width: 900px) {
  .form-wrapper {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  
  .form-intro {
    position: static;
  }
  
  .career-benefits-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
  }
}

@media (max-width: 768px) {
  .success-grid {
    grid-template-columns: 1fr;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
  }
  
  .process-timeline {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

@media (max-width: 640px) {
  .programs-grid {
    grid-template-columns: 1fr;
    gap: 1.8rem;
  }
  
  .form-row {
    grid-template-columns: 1fr;
    gap: 1.4rem;
  }
  
  .careers-hero {
    min-height: 60vh;
  }
  
  .career-benefits-grid {
    grid-template-columns: 1fr;
  }
  
  .benefit-card,
  .program-card,
  .process-step,
  .success-card {
    max-width: 100%;
  }
  
  .form-wrapper {
    gap: 2rem;
  }
  
  .career-form {
    padding: 2rem 1.5rem 2.2rem;
  }
}

/* Modern Contact Page */
.contact-hero-modern {
  position: relative;
  padding: 6rem 0 4rem;
  border-bottom: 1px solid var(--clr-border);
  overflow: hidden;
}

.hero-bg-image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: brightness(0.4) saturate(1.2);
  transform: scale(1.05);
  z-index: 0;
}

.hero-bg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(182, 70, 255, 0.3), rgba(255, 63, 179, 0.2));
  mix-blend-mode: multiply;
  z-index: 1;
}

.contact-hero-modern .container {
  position: relative;
  z-index: 2;
}

.contact-hero-content {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 3rem;
}

.contact-hero-content h1 {
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  margin: 0.5rem 0 1rem;
  color: #fff;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}

.hero-lead {
  font-size: 1.1rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);
}

.contact-quick-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  max-width: 1000px;
  margin: 0 auto;
}

.quick-action-card {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1.8rem 1.5rem;
  background: linear-gradient(135deg, rgba(20, 20, 28, 0.8), rgba(15, 15, 20, 0.9));
  border: 1px solid var(--clr-border);
  border-radius: 16px;
  text-decoration: none;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.quick-action-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(182, 70, 255, 0.05), rgba(255, 63, 179, 0.05));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.quick-action-card:hover::before {
  opacity: 1;
}

.quick-action-card:hover {
  border-color: rgba(182, 70, 255, 0.4);
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(182, 70, 255, 0.15);
}

.action-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(182, 70, 255, 0.1), rgba(255, 63, 179, 0.1));
  border: 1px solid rgba(182, 70, 255, 0.2);
  border-radius: 12px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.action-icon svg {
  color: var(--clr-accent-2);
}

.action-content {
  flex: 1;
  position: relative;
  z-index: 1;
}

.action-content h3 {
  font-size: 1.1rem;
  margin: 0 0 0.3rem;
  color: var(--clr-text);
}

.action-content p {
  font-size: 0.9rem;
  margin: 0;
  color: var(--clr-text-muted);
}

.whatsapp-card .action-icon {
  background: linear-gradient(135deg, rgba(37, 211, 102, 0.1), rgba(37, 211, 102, 0.15));
  border-color: rgba(37, 211, 102, 0.2);
}

.whatsapp-card .action-icon svg {
  color: #25D366;
}

.whatsapp-card:hover {
  border-color: rgba(37, 211, 102, 0.4);
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.15);
}

.contact-main-section {
  padding: 5rem 0;
}

.contact-layout {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 3rem;
  align-items: start;
}

.contact-form-panel,
.contact-info-panel {
  background: linear-gradient(180deg, rgba(20, 20, 28, 0.6), rgba(15, 15, 20, 0.8));
  border: 1px solid var(--clr-border);
  border-radius: 20px;
  padding: 2.5rem;
  backdrop-filter: blur(10px);
}

.panel-header {
  margin-bottom: 2rem;
}

.panel-header h2 {
  font-size: 1.8rem;
  margin: 0.5rem 0 0.8rem;
  background: linear-gradient(135deg, var(--clr-accent), var(--clr-accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.panel-header p {
  color: var(--clr-text-muted);
  margin: 0;
  line-height: 1.6;
}

.modern-contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-group label {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--clr-text);
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.required {
  color: var(--clr-accent-2);
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.9rem 1rem;
  background: rgba(11, 11, 17, 0.8);
  border: 1px solid #26262d;
  border-radius: 10px;
  color: var(--clr-text);
  font-size: 0.95rem;
  font-family: inherit;
  transition: all 0.3s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--clr-accent);
  box-shadow: 0 0 0 3px rgba(182, 70, 255, 0.1);
  background: rgba(11, 11, 17, 1);
}

.form-group textarea {
  resize: vertical;
  min-height: 100px;
}

.btn-primary-large {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  padding: 1rem 2rem;
  background: linear-gradient(135deg, var(--clr-accent), var(--clr-accent-2));
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 0.5rem;
}

.btn-primary-large:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(182, 70, 255, 0.3);
}

.btn-primary-large svg {
  transition: transform 0.3s ease;
}

.btn-primary-large:hover svg {
  transform: translateX(4px);
}

.form-disclaimer {
  font-size: 0.8rem;
  color: var(--clr-text-muted);
  text-align: center;
  margin: 0.5rem 0 0;
  line-height: 1.5;
}

.contact-info-panel {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  position: sticky;
  top: 100px;
}

.info-card {
  background: rgba(15, 15, 20, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  padding: 1.8rem;
}

.info-card h3 {
  font-size: 1.2rem;
  margin: 0 0 1.2rem;
  color: var(--clr-text);
}

.info-items {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.info-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.info-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(182, 70, 255, 0.1), rgba(255, 63, 179, 0.1));
  border-radius: 10px;
  flex-shrink: 0;
}

.info-icon svg {
  color: var(--clr-accent-2);
}

.info-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--clr-text-muted);
  margin: 0 0 0.3rem;
}

.info-value {
  font-size: 0.95rem;
  color: var(--clr-text);
  margin: 0;
  line-height: 1.6;
}

.info-value a {
  color: var(--clr-text);
  text-decoration: none;
  transition: color 0.3s ease;
}

.info-value a:hover {
  color: var(--clr-accent-2);
}

.hours-list {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.hours-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.8rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 0.9rem;
}

.hours-item:last-child {
  border-bottom: none;
}

.hours-time {
  color: var(--clr-accent-2);
  font-weight: 500;
}

.hours-item.closed .hours-time {
  color: var(--clr-text-muted);
}

.map-card {
  padding: 1.5rem;
}

.map-container {
  width: 100%;
  height: 200px;
  border-radius: 12px;
  overflow: hidden;
  margin: 1rem 0;
  border: 1px solid var(--clr-border);
}

.btn-map {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.8rem 1.2rem;
  background: rgba(182, 70, 255, 0.1);
  border: 1px solid rgba(182, 70, 255, 0.3);
  color: var(--clr-text);
  text-decoration: none;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 0.3s ease;
}

.btn-map:hover {
  background: rgba(182, 70, 255, 0.15);
  border-color: rgba(182, 70, 255, 0.5);
  transform: translateY(-2px);
}

/* Responsive - Contact Page */
@media (max-width: 1024px) {
  .contact-layout {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  
  .contact-info-panel {
    position: static;
  }
}

@media (max-width: 768px) {
  .contact-hero-modern {
    padding: 4rem 0 3rem;
  }
  
  .contact-quick-actions {
    grid-template-columns: 1fr;
  }
  
  .contact-form-panel,
  .contact-info-panel {
    padding: 2rem 1.5rem;
  }
  
  .form-row {
    grid-template-columns: 1fr;
  }
  
  .contact-main-section {
    padding: 3rem 0;
  }
}

@media (max-width: 640px) {
  .quick-action-card {
    padding: 1.5rem 1.2rem;
  }
  
  .action-icon {
    width: 48px;
    height: 48px;
  }
  
  .panel-header h2 {
    font-size: 1.5rem;
  }
}