/* MoveMySpa — Professional theme with tasteful animations */
:root{
  --bg: #f7fbff;
  --bg-2: #f0faff;
  --surface: #ffffff;
  --ink: #1f2937;
  --muted: #6b7280;
  --brand: #3eb2e6;
  --brand-dark: #2a90bf;
  --accent: #2dd4bf;
  --border: #e5e7eb;
  --shadow: 0 12px 38px rgba(2, 12, 27, 0.08);
  --radius: 16px;
  --radius-sm: 12px;
  --space: clamp(16px, 2vw, 24px);
  --ease: cubic-bezier(.2,.8,.2,1);
}

*{box-sizing:border-box}
html,body{margin:0;height:100%;scroll-behavior:smooth}
body{font:16px/1.6 Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; color:var(--ink); background:var(--bg)}

img{max-width:100%; display:block}
a{color:var(--brand); text-decoration:none}
a:hover{color:var(--brand-dark)}

.container{width:min(1180px, 100% - 2*var(--space)); margin-inline:auto}
.section{padding: clamp(48px, 7vw, 96px) 0}
.section.muted{background:linear-gradient(180deg, rgba(62,178,230,0.06), rgba(45,212,191,0.04))}
.section-title{font-size: clamp(28px, 4vw, 40px); margin:0 0 .6em}
.section-intro{margin-top:-.2em; color:var(--muted)}

.skip-link{position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden}
.skip-link:focus{left:var(--space); top:var(--space); width:auto; height:auto; z-index:999; background:#fff; padding:8px 12px; border-radius:8px; box-shadow:var(--shadow)}

/* Header */
.site-header{position:sticky; top:0; backdrop-filter:saturate(180%) blur(14px); background:rgba(255,255,255,.65); border-bottom:1px solid transparent; z-index:50; transition: box-shadow .4s var(--ease), border-color .4s var(--ease)}
.site-header.scrolled{box-shadow: var(--shadow); border-color: var(--border)}
.header-inner{display:grid; grid-template-columns: auto 1fr auto auto; align-items:center; gap:12px; padding:12px 0}
.brand img{display:block}
.nav{justify-self:center; display:flex; gap: clamp(12px, 2vw, 24px); align-items:center; font-weight:600}
.nav a{color:var(--ink)}
.contact-mini{display:flex; gap:10px; align-items:center; font-size:14px}
.contact-mini .dot{width:4px; height:4px; background:#cbd5e1; border-radius:50%}
.hamburger{display:none; background:transparent; border:0; width:42px; height:42px; border-radius:10px; position:relative}
.hamburger span{position:absolute; left:9px; right:9px; height:2px; background:#111827; transform-origin: center; transition: transform .35s var(--ease), top .35s var(--ease), opacity .35s var(--ease)}
.hamburger span:nth-child(1){top:14px}
.hamburger span:nth-child(2){top:20px}
.hamburger span:nth-child(3){top:26px}
.hamburger.active span:nth-child(1){top:20px; transform:rotate(45deg)}
.hamburger.active span:nth-child(2){opacity:0}
.hamburger.active span:nth-child(3){top:20px; transform:rotate(-45deg)}

/* Hero */
.hero{position:relative; padding: clamp(56px, 9vw, 120px) 0; overflow:hidden; background: radial-gradient(1800px 800px at 80% -10%, rgba(62,178,230,.18), transparent) , radial-gradient(1200px 600px at -10% 30%, rgba(45,212,191,.14), transparent)}
.bg-waves{position:absolute; inset:auto 0 0 0; height:180px; opacity:.5}
.bg-waves svg{width:100%; height:100%}
.hero-inner{display:grid; grid-template-columns: 1.2fr .8fr; gap: clamp(24px, 4vw, 48px)}
.hero-copy h1{font-size: clamp(30px, 5vw, 52px); line-height:1.1; margin:0 0 .3em}
.hero-copy p{color:var(--muted); margin:0 0 1em}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap}
.stats{display:flex; gap: clamp(12px, 3vw, 28px); margin-top:18px}
.stat{display:flex; flex-direction:column; gap:4px; background:var(--surface); padding:14px 16px; border:1px solid var(--border); border-radius:12px; box-shadow: var(--shadow)}
.stat strong{font-size:22px}
.stat span:last-child{color:var(--muted); font-size:12px}
.hero-card{min-height:320px; border-radius:var(--radius); border:1px solid var(--border); background:linear-gradient(180deg,#fff,#f1fbff); box-shadow: var(--shadow); position:relative; transform: perspective(900px) rotateY(-6deg) rotateX(2deg)}
.hero-card .sparkle,.hero-card .splash,.hero-card .frame{position:absolute; inset:0; border-radius:inherit}
.hero-card .sparkle{background: radial-gradient(120px 80px at 20% 30%, rgba(62,178,230,.25), transparent), radial-gradient(120px 80px at 80% 70%, rgba(45,212,191,.25), transparent); animation: float 8s var(--ease) infinite alternate}
.hero-card .splash{mask: radial-gradient(180px 120px at 80% -20%, #000 30%, transparent); background: conic-gradient(from 200deg at 60% 0%, rgba(62,178,230,.35), transparent 40%); animation: drift 12s linear infinite}
.hero-card .frame{border:1px dashed #dbeafe; mix-blend-mode:multiply;}

@keyframes float{from{transform: translateY(-6px)} to{transform: translateY(6px)}}
@keyframes drift{to{transform: rotate(360deg)}}

/* Cards & steps */
.cards{display:grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 22px)}
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding: clamp(18px, 2vw, 22px); box-shadow: var(--shadow); transform: translateY(6px); transition: transform .35s var(--ease), box-shadow .35s var(--ease)}
.card:hover{transform: translateY(0); box-shadow: 0 18px 48px rgba(62,178,230,.18)}
.card h3{margin:0 0 8px}
.card p{margin:0; color:var(--muted)}
.card-icon{font-size:24px; filter: drop-shadow(0 6px 12px rgba(62,178,230,.25))}

.steps{display:grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 22px); margin:0; padding:0; counter-reset:step}
.steps li{list-style:none; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding: clamp(18px, 2vw, 22px); box-shadow: var(--shadow); position:relative}
.steps li::before{counter-increment: step; content: counter(step); position:absolute; top:-12px; left:-12px; width:36px; height:36px; border-radius:50%; background:var(--brand); color:#fff; display:grid; place-items:center; font-weight:700; box-shadow:0 6px 16px rgba(62,178,230,.35)}

.banner{border:1px solid var(--border); border-radius:12px; padding:12px 14px; margin-top:16px}
.banner.notice{background: #fff7ed; border-color:#fed7aa}
.banner.subtle{background:#f8fafc}

/* Form & stepper */
.form{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding: clamp(18px, 2vw, 22px); box-shadow: var(--shadow)}
.form fieldset{border:0; padding:0; margin: 0 0 18px}
.form legend{font-weight:700; margin: 0 0 10px}
.grid{display:grid; gap: clamp(12px, 2vw, 16px); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr))}
label{display:flex; flex-direction:column; gap:6px; font-weight:600}
input[type="text"],input[type="email"],input[type="tel"],input[type="date"],input[type="number"],select,textarea{border:1px solid var(--border); border-radius:10px; padding:12px 12px; font:inherit; background:#fff; transition: box-shadow .2s var(--ease), border-color .2s var(--ease)}
textarea{resize:vertical}
input:focus,select:focus,textarea:focus{outline:3px solid rgba(62,178,230,.35); border-color: var(--brand); box-shadow: 0 0 0 4px rgba(62,178,230,.12)}

.checkbox{display:flex; align-items:center; gap:10px; font-weight:500}
.checkbox input{width:18px; height:18px}

.dropzone{border:2px dashed #bfdbfe; border-radius:12px; padding:18px; text-align:center; background:#f8fbff; transition: background .25s var(--ease), border-color .25s var(--ease)}
.dropzone.dragover{background:#eff6ff; border-color:#60a5fa}
.dropzone input[type=file]{display:none}
.linklike{cursor:pointer; text-decoration:underline}

.previews{display:grid; grid-template-columns: repeat(auto-fit, minmax(120px,1fr)); gap:12px; margin-top:12px}
.preview-item{border:1px solid var(--border); border-radius:10px; padding:6px; display:flex; flex-direction:column; gap:6px; background:#fff; box-shadow: var(--shadow)}
.preview-item img{width:100%; height:100px; object-fit:cover; border-radius:8px}
.preview-meta{font-size:12px; color:var(--muted)}

.stepper{position:relative}
.stepper-nav{display:grid; grid-template-columns: repeat(7, 1fr); gap:8px; list-style:none; padding:0; margin:0 0 14px}
.stepper-nav li{background:#eff6ff; color:#1e40af; border:1px solid #dbeafe; border-radius:999px; text-align:center; padding:8px 10px; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; opacity:.65; transform:translateY(4px); transition: all .35s var(--ease)}
.stepper-nav li.active{background:#3b82f6; color:#fff; border-color:#3b82f6; opacity:1; transform:translateY(0)}
.step{display:none; animation: slideUp .45s var(--ease)}
.step.active{display:block}
@keyframes slideUp{from{opacity:0; transform: translateY(10px)} to{opacity:1; transform: translateY(0)}}
.stepper-actions{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:16px}

.actions{display:flex; align-items:center; gap:18px; margin-top:8px}
.fine-print{font-size:12px; color:var(--muted)}

.btn{display:inline-block; padding:10px 16px; border-radius:999px; border:1px solid var(--border); font-weight:700; position:relative; overflow:hidden; transform: translateZ(0); transition: transform .1s var(--ease), box-shadow .2s var(--ease)}
.btn:active{transform: translateY(1px)}
.btn::after{content:""; position:absolute; inset:0; background: radial-gradient(120px 60px at var(--x,50%) var(--y,50%), rgba(255,255,255,.5), transparent 60%); opacity:0; transition:opacity .4s var(--ease)}
.btn:hover::after{opacity:1}
.btn-lg{padding:14px 20px}
.btn-primary{background:var(--brand); color:#fff; border-color:transparent; box-shadow:0 12px 26px rgba(62,178,230,.35)}
.btn-primary:hover{background:var(--brand-dark)}
.btn-ghost{background:#fff}
.btn-ghost:hover{background:#f5fbff}

/* Footer */
.site-footer{border-top:1px solid var(--border); background: #fff}
.footer-inner{padding:22px 0; text-align:center}
.footer-contact{margin-bottom:8px}
.footer-contact .dot{display:inline-block; width:4px; height:4px; background:#cbd5e1; border-radius:50%; margin:0 8px}

/* Floating CTA */
.floating-cta{position:fixed; right:16px; bottom:16px; display:flex; gap:10px; z-index:80; transform: translateY(20px); opacity:0; transition: all .4s var(--ease)}
.floating-cta.visible{transform: translateY(0); opacity:1}

/* Reveal animations */
[data-reveal]{opacity:0; transform: translateY(10px); transition: opacity .6s var(--ease), transform .6s var(--ease)}
[data-reveal].visible{opacity:1; transform: translateY(0)}
[data-reveal="fade"]{transform:none}
[data-reveal="up"]{transform: translateY(16px)}

/* Utilities */
.centered{display:grid; place-items:center; min-height:100dvh; background: radial-gradient(1200px 600px at 90% -10%, rgba(62,178,230,.12), transparent)}
.thankyou{background:#fff; padding:28px; border:1px solid var(--border); border-radius:var(--radius); text-align:center; box-shadow: var(--shadow)}
.thankyou h1{margin-top:10px}

.noscript{margin-top:12px; color:var(--muted)}
.sr-only{position:absolute; left:-9999px}
.mt{margin-top:14px}
.mt-s{margin-top:8px}

/* Responsive */
@media (max-width: 980px){
  .hero-inner{grid-template-columns: 1fr}
  .nav{display:none}
  .hamburger{display:block}
  .cards{grid-template-columns: 1fr; gap:14px}
  .steps{grid-template-columns: 1fr}
  .contact-mini{display:none}
}


/* Gallery */
.gallery-grid{display:grid; grid-template-columns: repeat(4, 1fr); gap: clamp(10px, 2vw, 14px); margin-top:10px}
.gallery-item{position:relative; overflow:hidden; border-radius:14px; border:1px solid var(--border); background:#0b1220; box-shadow: var(--shadow)}
.gallery-item img{width:100%; height:240px; object-fit:cover; display:block; transform:scale(1.02); transition: transform .35s ease, opacity .35s ease}
.gallery-item:hover img{transform:scale(1.06); opacity:.95}

@media (max-width: 1000px){
  .gallery-grid{grid-template-columns: repeat(2, 1fr)}
  .gallery-item img{height:220px}
}
@media (max-width: 580px){
  .gallery-grid{grid-template-columns: 1fr}
  .gallery-item img{height:220px}
}

/* Lightbox */
.lb{position:fixed; inset:0; display:none; align-items:center; justify-content:center; background: rgba(0,10,20,.75); z-index:60}
.lb.is-open{display:flex}
.lb-inner{position:relative; width:min(1100px, 92vw); max-height:88vh; display:grid; place-items:center}
.lb-inner img{max-width:100%; max-height:88vh; border-radius:12px; border:1px solid var(--border); box-shadow:0 20px 60px rgba(0,0,0,.6)}
.lb-close{position:absolute; top:-44px; right:0; background:#0f182c; border:1px solid var(--border); color:var(--ink); border-radius:999px; padding:8px 12px; cursor:pointer}
.lb-scrim{position:absolute; inset:0}