/* ============================================
   SparkleClean Pro — 3D Animated CSS
   ============================================ */

/* ---- RESET ---- */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; overflow-x:hidden; }
body {
  font-family:'Inter', sans-serif;
  background:#060C1A;
  color:#F0F6FF;
  overflow-x:hidden;
  line-height:1.6;
}
a { text-decoration:none; color:inherit; }
img { display:block; width:100%; height:100%; object-fit:cover; }
button { cursor:pointer; border:none; background:none; font-family:inherit; }
input,select,textarea { font-family:inherit; }

/* ---- VARIABLES ---- */
:root {
  --blue:#2563EB;
  --blue-l:#3B82F6;
  --cyan:#06B6D4;
  --purple:#8B5CF6;
  --green:#10B981;
  --gold:#F59E0B;
  --red:#EF4444;
  --bg:#060C1A;
  --bg2:#0D1A2D;
  --bg3:#0F2040;
  --border:rgba(255,255,255,0.07);
  --text:#F0F6FF;
  --muted:#64748B;
  --sub:#94A3B8;
  --grad:linear-gradient(135deg,#2563EB,#06B6D4);
  --grad2:linear-gradient(135deg,#8B5CF6,#2563EB);
  --nav-h:76px;
  --r:12px;
  --r2:20px;
  --r3:32px;
  --ease:cubic-bezier(0.4,0,0.2,1);
}

/* ---- THREE.JS CANVAS ---- */
#bg3d {
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
}

/* ---- PRELOADER ---- */
#preloader {
  position:fixed; inset:0; z-index:9999;
  background:#060C1A;
  display:flex; align-items:center; justify-content:center;
  transition:opacity .6s ease, visibility .6s ease;
}
#preloader.out { opacity:0; visibility:hidden; }

.preloader-inner { text-align:center; }

/* 3D Cube */
.preloader-logo-3d {
  width:70px; height:70px;
  perspective:200px;
  margin:0 auto 1.5rem;
}
.cube {
  width:100%; height:100%;
  position:relative;
  transform-style:preserve-3d;
  animation:cubeRotate 2s linear infinite;
}
.face {
  position:absolute; width:70px; height:70px;
  background:rgba(37,99,235,0.15);
  border:1px solid rgba(37,99,235,0.4);
  display:flex; align-items:center; justify-content:center;
  color:#3B82F6;
}
.face [data-lucide] { width:28px; height:28px; }
.face.front  { transform:translateZ(35px); }
.face.back   { transform:rotateY(180deg) translateZ(35px); }
.face.left   { transform:rotateY(-90deg) translateZ(35px); }
.face.right  { transform:rotateY(90deg) translateZ(35px); }
.face.top    { transform:rotateX(90deg) translateZ(35px); }
.face.bottom { transform:rotateX(-90deg) translateZ(35px); }

@keyframes cubeRotate {
  from { transform:rotateX(-20deg) rotateY(0deg); }
  to   { transform:rotateX(-20deg) rotateY(360deg); }
}

.preloader-text {
  font-family:'Outfit',sans-serif;
  font-size:1.5rem; font-weight:800;
  margin-bottom:1.5rem; letter-spacing:-0.5px;
}
.preloader-text span {
  background:var(--grad);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}
.preloader-bar {
  width:200px; height:3px;
  background:rgba(255,255,255,0.08);
  border-radius:99px; overflow:hidden; margin:0 auto .75rem;
}
.preloader-fill {
  height:100%; width:0%;
  background:var(--grad); border-radius:99px;
  animation:pfill 1.8s ease forwards;
}
@keyframes pfill { to { width:100%; } }
.preloader-pct { font-size:.85rem; color:rgba(255,255,255,.8); }

/* ---- NAVBAR ---- */
#navbar {
  position:fixed; top:0; left:0; right:0;
  height:var(--nav-h); z-index:1000;
  transition:all .3s var(--ease);
}
#navbar.scrolled {
  background:rgba(6,12,26,0.9);
  backdrop-filter:blur(24px);
  border-bottom:1px solid var(--border);
  box-shadow:0 4px 30px rgba(0,0,0,0.4);
}
.nav-container {
  max-width:1280px; margin:0 auto;
  padding:0 2rem; height:100%;
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
}
.nav-logo {
  font-family:'Outfit',sans-serif;
  font-size:1.45rem; font-weight:800;
  display:flex; align-items:center; gap:.6rem;
  flex-shrink:0; letter-spacing:-.5px;
}
.logo-cube {
  width:34px; height:34px;
  background:var(--grad); border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 15px rgba(37,99,235,.5);
  animation:logoPulse 3s ease-in-out infinite;
}
.logo-cube [data-lucide] { width:18px; height:18px; color:#fff; }
@keyframes logoPulse {
  0%,100%{box-shadow:0 4px 15px rgba(37,99,235,.4);}
  50%{box-shadow:0 4px 25px rgba(6,182,212,.6);}
}
.logo-accent { background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

.nav-links { list-style:none; display:flex; align-items:center; gap:.2rem; }
.nav-link {
  font-size:.88rem; font-weight:500; color:rgba(255,255,255,.8);
  padding:.5rem .9rem; border-radius:99px; transition:all .25s var(--ease);
}
.nav-link:hover, .nav-link.active {
  color:var(--text); background:rgba(37,99,235,.12);
}
.btn-nav-cta {
  display:flex; align-items:center; gap:.5rem;
  font-family:'Outfit',sans-serif; font-size:.88rem; font-weight:700;
  padding:.55rem 1.4rem; background:var(--grad); color:#fff;
  border-radius:99px; transition:all .3s var(--ease);
  box-shadow:0 4px 15px rgba(37,99,235,.4); flex-shrink:0;
}
.btn-nav-cta [data-lucide] { width:15px; height:15px; }
.btn-nav-cta:hover { transform:translateY(-2px); box-shadow:0 8px 25px rgba(37,99,235,.5); }

.hamburger { display:none; flex-direction:column; gap:5px; padding:.5rem; }
.hamburger span { display:block; width:22px; height:2px; background:var(--text); border-radius:2px; transition:.3s; }

/* ---- BUTTONS ---- */
.btn-primary {
  display:inline-flex; align-items:center; gap:.7rem;
  font-family:'Outfit',sans-serif; font-size:1rem; font-weight:700;
  padding:.9rem 2rem; background:var(--grad); color:#fff;
  border-radius:99px; transition:all .3s var(--ease);
  box-shadow:0 4px 20px rgba(37,99,235,.4); position:relative; overflow:hidden;
}
.btn-primary::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg,var(--border),transparent);
  opacity:0; transition:.3s;
}
.btn-primary:hover { transform:translateY(-3px); box-shadow:0 12px 35px rgba(37,99,235,.55); }
.btn-primary:hover::before { opacity:1; }
.btn-primary [data-lucide] { width:18px; height:18px; }

.btn-glass {
  display:inline-flex; align-items:center; gap:.7rem;
  font-family:'Outfit',sans-serif; font-size:1rem; font-weight:600;
  padding:.9rem 2rem;
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);
  backdrop-filter:blur(10px);
  color:var(--text); border-radius:99px; transition:all .3s var(--ease);
}
.btn-glass:hover { border-color:var(--blue-l); color:var(--blue-l); transform:translateY(-2px); }
.btn-glass [data-lucide] { width:17px; height:17px; }

/* ---- SECTION SHARED ---- */
.section { padding:7rem 0; position:relative; z-index:1; }
.container { max-width:1280px; margin:0 auto; padding:0 2rem; }
.section-header { text-align:center; margin-bottom:4rem; }
.section-tag {
  display:inline-block; font-size:.75rem; font-weight:700;
  letter-spacing:2px; text-transform:uppercase;
  color:var(--cyan); background:rgba(6,182,212,.1);
  border:1px solid rgba(6,182,212,.25);
  padding:.4rem 1.2rem; border-radius:99px; margin-bottom:1.25rem;
}
.section-title {
  font-family:'Outfit',sans-serif;
  font-size:clamp(1.8rem,4vw,3rem);
  font-weight:800; line-height:1.15;
  letter-spacing:-.5px; margin-bottom:1rem;
}
.section-desc { font-size:1.05rem; color:rgba(255,255,255,.8); max-width:580px; margin:0 auto; }
.gradient-text {
  background:var(--grad); -webkit-background-clip:text;
  -webkit-text-fill-color:transparent; background-clip:text;
}

/* ---- HERO ---- */
.hero {
  min-height:100vh; display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center; gap:4rem;
  padding:calc(var(--nav-h) + 2rem) 2rem 4rem;
  max-width:1280px; margin:0 auto;
  position:relative; z-index:1;
}

.hero-badge {
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:.82rem; font-weight:600;
  color:var(--gold); background:rgba(245,158,11,.1);
  border:1px solid rgba(245,158,11,.25);
  padding:.45rem 1.1rem; border-radius:99px;
  margin-bottom:1.75rem;
}
.badge-pulse {
  width:8px; height:8px; border-radius:50%; background:var(--gold);
  animation:bpulse 2s ease infinite;
}
@keyframes bpulse { 0%,100%{transform:scale(1);opacity:1;} 50%{transform:scale(1.5);opacity:.5;} }
.badge-flag { width:14px; height:14px; }

.hero-title {
  font-family:'Outfit',sans-serif;
  font-size:clamp(2.4rem,5vw,4.2rem);
  font-weight:900; line-height:1.08;
  letter-spacing:-2px; margin-bottom:1.5rem;
}
.title-3d {
  display:block;
  background:var(--grad);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  filter:drop-shadow(0 0 30px rgba(37,99,235,.4));
  animation:titleShine 4s ease-in-out infinite;
}
@keyframes titleShine {
  0%,100%{filter:drop-shadow(0 0 20px rgba(37,99,235,.3));}
  50%{filter:drop-shadow(0 0 40px rgba(6,182,212,.5));}
}

.hero-subtitle { font-size:1.05rem; color:rgba(255,255,255,.8); line-height:1.8; max-width:520px; margin-bottom:2.5rem; }

.hero-actions { display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:3rem; }

.hero-stats { display:flex; gap:1.5rem; flex-wrap:wrap; }
.stat-card {
  text-align:center; padding:.75rem 1.25rem;
  background:rgba(255,255,255,.04);
  border:1px solid var(--border); border-radius:var(--r2);
  backdrop-filter:blur(10px);
  transition:.3s var(--ease);
}
.stat-card:hover { border-color:rgba(37,99,235,.4); transform:translateY(-3px); }
.stat-num {
  font-family:'Outfit',sans-serif; font-size:1.9rem; font-weight:900;
  background:var(--grad); -webkit-background-clip:text;
  -webkit-text-fill-color:transparent; background-clip:text;
}
.stat-suf {
  font-family:'Outfit',sans-serif; font-size:1.5rem; font-weight:700;
  background:var(--grad); -webkit-background-clip:text;
  -webkit-text-fill-color:transparent; background-clip:text;
}
.stat-lbl { display:block; font-size:.72rem; color:var(--muted); font-weight:500; margin-top:.15rem; letter-spacing:.5px; }

/* Hero 3D Scene */
.hero-3d-scene { position:relative; }
.scene-wrapper {
  position:relative;
  transform-style:preserve-3d;
}
.hero-img-main {
  border-radius:var(--r3); height:540px;
  object-fit:cover;
  box-shadow:0 30px 80px rgba(0,0,0,.5);
  border:1px solid var(--border);
  transition:transform .6s var(--ease);
}
.hero-3d-scene:hover .hero-img-main { transform:rotateY(-5deg) rotateX(2deg) scale(1.02); }

.img-glow {
  position:absolute; inset:-15px;
  background:radial-gradient(ellipse, rgba(37,99,235,.15), transparent 70%);
  border-radius:var(--r3); z-index:-1;
  animation:glowPulse 4s ease-in-out infinite;
}
@keyframes glowPulse {
  0%,100%{opacity:.6;} 50%{opacity:1;}
}

/* Float cards */
.float3d {
  position:absolute;
  display:flex; align-items:center; gap:.75rem;
  padding:.8rem 1.1rem;
  background:rgba(13,26,45,.9);
  backdrop-filter:blur(20px);
  border:1px solid var(--border);
  border-radius:var(--r2); box-shadow:0 10px 40px rgba(0,0,0,.4);
}
.float3d .fc-icon { width:36px; height:36px; border-radius:var(--r); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.float3d .fc-icon [data-lucide] { width:20px; height:20px; }
.star-icon   { background:rgba(245,158,11,.15); color:var(--gold); }
.star-icon [data-lucide] { color:var(--gold); fill:var(--gold); }
.leaf-icon   { background:rgba(16,185,129,.15); }
.leaf-icon [data-lucide] { color:var(--green); }
.shield-icon { background:rgba(37,99,235,.15); }
.shield-icon [data-lucide] { color:var(--blue-l); }
.float3d strong { display:block; font-size:.85rem; font-weight:700; }
.float3d small  { font-size:.72rem; color:var(--muted); }

.card-rating { top:-20px; left:-30px; animation:fc1 3.5s ease-in-out infinite; }
.card-eco    { bottom:90px; left:-30px; animation:fc1 3.5s 1.2s ease-in-out infinite; }
.card-shield { top:35%; right:-25px; animation:fc1 3.5s .6s ease-in-out infinite; }

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

/* Orbit rings */
.orbit-ring {
  position:absolute; border-radius:50%;
  border:1px dashed rgba(37,99,235,.2);
  animation:orbitSpin 20s linear infinite;
  pointer-events:none;
}
.ring-1 { width:120%; height:120%; top:-10%; left:-10%; animation-duration:25s; }
.ring-2 { width:140%; height:140%; top:-20%; left:-20%; animation-duration:35s; animation-direction:reverse; border-color:rgba(6,182,212,.1); }
@keyframes orbitSpin { from{transform:rotate(0deg);} to{transform:rotate(360deg);} }

.scroll-hint {
  position:absolute; bottom:2rem; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  color:var(--muted); font-size:.72rem; letter-spacing:1px; text-transform:uppercase;
  animation:fadeInUp .8s 1s ease both;
}
.scroll-mouse {
  width:22px; height:36px; border:2px solid rgba(255,255,255,.2);
  border-radius:11px; display:flex; justify-content:center; padding-top:5px;
}
.scroll-dot {
  width:3px; height:7px; background:var(--blue-l); border-radius:2px;
  animation:sdot 2s ease infinite;
}
@keyframes sdot { 0%,100%{transform:translateY(0);opacity:1;} 50%{transform:translateY(8px);opacity:.3;} }

/* ---- TRUST STRIP ---- */
.trust-strip {
  overflow:hidden; position:relative; z-index:1;
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  background:rgba(255,255,255,.04); padding:.8rem 0;
}
.trust-inner {
  display:flex; align-items:center; gap:2.5rem;
  white-space:nowrap;
  animation:trustScroll 30s linear infinite;
  width:max-content;
}
.trust-strip:hover .trust-inner { animation-play-state:paused; }
@keyframes trustScroll { from{transform:translateX(0);} to{transform:translateX(-50%);} }
.trust-item { display:flex; align-items:center; gap:.6rem; font-size:.85rem; font-weight:600; color:rgba(255,255,255,.8); }
.trust-item [data-lucide] { width:16px; height:16px; color:var(--cyan); }
.trust-sep { color:rgba(37,99,235,.4); font-size:.7rem; }

/* ---- SERVICES ---- */
.services-section { background:linear-gradient(180deg,transparent,rgba(37,99,235,.03),transparent); }
.services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }

.service-card-3d {
  position:relative; overflow:hidden;
  background:rgba(13,26,45,.8);
  border:1px solid var(--border); border-radius:var(--r2);
  padding:2.25rem; cursor:pointer;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
  transform-style:preserve-3d;
  backdrop-filter:blur(10px);
}
.service-card-3d::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(37,99,235,.05),transparent);
  opacity:0; transition:.4s;
}
.service-card-3d:hover { transform:translateY(-10px) rotateX(3deg); box-shadow:0 30px 60px rgba(0,0,0,.4); }
.service-card-3d:hover::before { opacity:1; }
.service-card-3d:hover { border-color:rgba(37,99,235,.3); }

.card-glow {
  position:absolute; top:-60px; right:-60px;
  width:150px; height:150px; border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb, var(--glow) 20%, transparent), transparent 70%);
  pointer-events:none;
}
.featured-card {
  border-color:rgba(139,92,246,.35);
  background:linear-gradient(135deg,rgba(37,99,235,.1),rgba(139,92,246,.06));
}
.featured-ribbon {
  position:absolute; top:1.25rem; right:1.25rem;
  font-size:.72rem; font-weight:700; color:var(--gold);
  background:rgba(245,158,11,.12); border:1px solid rgba(245,158,11,.25);
  padding:.3rem .75rem; border-radius:99px;
}

.sc-icon {
  width:56px; height:56px; border-radius:var(--r);
  background:color-mix(in srgb, var(--ic) 15%, transparent);
  border:1px solid color-mix(in srgb, var(--ic) 30%, transparent);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:1.4rem; color:var(--ic);
  transition:.4s var(--ease);
}
.service-card-3d:hover .sc-icon { transform:scale(1.1) rotate(5deg); }
.sc-icon [data-lucide] { width:26px; height:26px; }

.service-card-3d h3 { font-family:'Outfit',sans-serif; font-size:1.2rem; font-weight:700; margin-bottom:.6rem; }
.service-card-3d p  { font-size:.88rem; color:rgba(255,255,255,.8); line-height:1.7; margin-bottom:1.25rem; }
.service-card-3d ul { list-style:none; margin-bottom:1.5rem; }
.service-card-3d li {
  font-size:.83rem; color:rgba(255,255,255,.8); padding:.3rem 0;
  display:flex; align-items:center; gap:.5rem;
  border-bottom:1px solid var(--border);
}
.service-card-3d li [data-lucide] { width:13px; height:13px; color:var(--green); flex-shrink:0; }

.sc-btn {
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.85rem; font-weight:600; color:var(--blue-l);
  transition:.3s var(--ease);
}
.sc-btn [data-lucide] { width:14px; height:14px; transition:.3s var(--ease); }
.sc-btn:hover { color:var(--cyan); }
.sc-btn:hover [data-lucide] { transform:translateX(4px); }
.featured-btn {
  background:var(--grad); -webkit-background-clip:text;
  -webkit-text-fill-color:transparent; background-clip:text;
}

/* ---- ABOUT ---- */
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; }
.about-visual { position:relative; }
.about-img-wrap { border-radius:var(--r3); overflow:hidden; height:580px; position:relative; }
.about-img-wrap img { transition:.6s var(--ease); }
.about-img-wrap:hover img { transform:scale(1.05); }
.about-img-border {
  position:absolute; inset:-3px; border-radius:calc(var(--r3) + 3px);
  background:var(--grad); z-index:-1; opacity:.4;
  animation:borderGlow 3s ease-in-out infinite;
}
@keyframes borderGlow { 0%,100%{opacity:.3;} 50%{opacity:.6;} }

.about-badge-3d {
  position:absolute; bottom:-20px; right:-20px;
  background:var(--grad); border-radius:var(--r2);
  padding:1.5rem 2rem; text-align:center;
  box-shadow:0 20px 50px rgba(37,99,235,.4);
  animation:badgeFloat 3s ease-in-out infinite;
}
@keyframes badgeFloat { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-8px);} }
.ab-num { display:block; font-family:'Outfit',sans-serif; font-size:3rem; font-weight:900; color:#fff; line-height:1; }
.ab-txt { font-size:.82rem; font-weight:600; color:rgba(255,255,255,.8); line-height:1.4; }

.about-certs {
  position:absolute; top:-15px; left:-20px;
  display:flex; flex-direction:column; gap:.5rem;
}
.about-certs span {
  display:flex; align-items:center; gap:.5rem;
  font-size:.78rem; font-weight:600;
  background:rgba(13,26,45,.95);
  backdrop-filter:blur(10px);
  border:1px solid var(--border); border-radius:var(--r);
  padding:.45rem .9rem; white-space:nowrap;
}
.about-certs [data-lucide] { width:13px; height:13px; color:var(--green); }

.about-p { font-size:.97rem; color:rgba(255,255,255,.8); line-height:1.85; margin-bottom:1rem; }

.about-features-3d { display:flex; flex-direction:column; gap:1rem; margin:2rem 0; }
.af-card {
  display:flex; align-items:flex-start; gap:1rem;
  padding:1.25rem; border-radius:var(--r2);
  background:rgba(13,26,45,.8); border:1px solid var(--border);
  backdrop-filter:blur(10px); cursor:pointer;
  transition:all .3s var(--ease);
}
.af-card:hover { border-color:rgba(37,99,235,.4); transform:translateX(6px); box-shadow:0 10px 30px rgba(0,0,0,.3); }
.af-icon {
  width:44px; height:44px; min-width:44px; border-radius:var(--r);
  background:rgba(37,99,235,.12); border:1px solid rgba(37,99,235,.2);
  display:flex; align-items:center; justify-content:center; color:var(--blue-l);
}
.af-icon [data-lucide] { width:20px; height:20px; }
.af-card strong { display:block; font-size:.92rem; font-weight:700; margin-bottom:.25rem; }
.af-card span { font-size:.82rem; color:rgba(255,255,255,.8); line-height:1.5; }

/* ---- GALLERY ---- */
.gallery-3d {
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  grid-template-rows:260px 260px;
  gap:1rem;
}
.g-item {
  border-radius:var(--r2); overflow:hidden; position:relative; cursor:pointer;
  transition:.4s var(--ease);
}
.g-item:hover { transform:scale(1.02); box-shadow:0 20px 50px rgba(0,0,0,.5); z-index:2; }
.g-large { grid-row:1/3; }
.g-item img { transition:.5s var(--ease); }
.g-item:hover img { transform:scale(1.08); }
.g-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.75),transparent 55%);
  display:flex; align-items:flex-end; padding:1.25rem;
  opacity:0; transition:.3s var(--ease);
}
.g-item:hover .g-overlay { opacity:1; }
.g-overlay span { font-size:.88rem; font-weight:600; color:#fff; }

/* ---- PRICING ---- */
.pricing-section { background:linear-gradient(180deg,transparent,rgba(139,92,246,.03),transparent); }
.pricing-toggle-wrap {
  display:flex; align-items:center; justify-content:center; gap:1rem;
  margin-bottom:3rem; flex-wrap:wrap;
}
.tog-lbl { font-size:.95rem; font-weight:600; color:var(--muted); display:flex; align-items:center; gap:.5rem; transition:.3s; }
.active-tog { color:var(--text); }

.tog-switch { position:relative; width:52px; height:28px; display:inline-block; }
.tog-switch input { opacity:0; width:0; height:0; }
.tog-slider {
  position:absolute; inset:0; background:rgba(255,255,255,.04);
  border:1px solid var(--border); border-radius:99px; cursor:pointer; transition:.3s;
}
.tog-slider::before {
  content:''; position:absolute; top:3px; left:3px;
  width:20px; height:20px; background:#fff; border-radius:50%; transition:.3s;
}
.tog-switch input:checked + .tog-slider { background:var(--grad); border-color:var(--blue); }
.tog-switch input:checked + .tog-slider::before { transform:translateX(24px); }
.save-chip { font-size:.72rem; font-weight:700; color:var(--green); background:rgba(16,185,129,.12); border:1px solid rgba(16,185,129,.2); padding:.2rem .6rem; border-radius:99px; font-style:normal; }

.pricing-3d { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; align-items:start; }

.price-card-3d {
  background:rgba(13,26,45,.9); border:1px solid var(--border);
  border-radius:var(--r3); padding:2.5rem; position:relative;
  backdrop-filter:blur(10px); cursor:pointer;
  transition:all .4s var(--ease);
}
.price-card-3d:hover { transform:translateY(-8px); box-shadow:0 30px 60px rgba(0,0,0,.4); border-color:rgba(37,99,235,.35); }

.pop-card {
  border-color:rgba(139,92,246,.4);
  background:linear-gradient(135deg,rgba(37,99,235,.12),rgba(139,92,246,.08));
  transform:scale(1.04);
}
.pop-card:hover { transform:scale(1.04) translateY(-8px); }

.pop-badge {
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  font-size:.75rem; font-weight:700; color:#fff; background:var(--grad);
  padding:.4rem 1.25rem; border-radius:99px; white-space:nowrap;
  box-shadow:0 4px 15px rgba(37,99,235,.4);
  display:flex; align-items:center; gap:.4rem;
}
.pop-star { width:12px; height:12px; fill:var(--gold); color:var(--gold); }

.pc-header { display:flex; align-items:center; gap:1rem; margin-bottom:1.5rem; }
.pc-icon {
  width:48px; height:48px; min-width:48px; border-radius:var(--r);
  background:rgba(37,99,235,.12); border:1px solid rgba(37,99,235,.2);
  display:flex; align-items:center; justify-content:center; color:var(--blue-l);
}
.pop-icon { background:rgba(139,92,246,.12); border-color:rgba(139,92,246,.3); color:var(--purple); }
.pc-icon [data-lucide] { width:22px; height:22px; }
.pc-name { font-family:'Outfit',sans-serif; font-size:1.1rem; font-weight:700; }

.pc-price { display:flex; align-items:flex-start; gap:.25rem; }
.pc-cur { font-size:.8rem; font-weight:700; color:var(--muted); padding-top:.5rem; }
.pc-amt {
  font-family:'Outfit',sans-serif; font-size:3rem; font-weight:900; line-height:1;
  background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  transition:.3s var(--ease);
}
.pc-per { font-size:.82rem; color:var(--muted); margin-bottom:1.5rem; }

.pc-list { list-style:none; margin-bottom:2rem; }
.pc-list li {
  font-size:.88rem; color:rgba(255,255,255,.8); padding:.5rem 0;
  display:flex; align-items:center; gap:.5rem;
  border-bottom:1px solid var(--border);
}
.pc-list li [data-lucide] { width:14px; height:14px; flex-shrink:0; }
.pc-list li.inc [data-lucide] { color:var(--green); }
.pc-list li.exc { color:var(--muted); text-decoration:line-through; opacity:.5; }
.pc-list li.exc [data-lucide] { color:var(--red); }

.pc-btn {
  display:block; width:100%; text-align:center;
  font-family:'Outfit',sans-serif; font-size:.95rem; font-weight:700;
  padding:.9rem; border-radius:99px;
  border:1.5px solid var(--border);
  color:var(--text); transition:.3s var(--ease);
}
.pc-btn:hover { border-color:var(--blue-l); color:var(--blue-l); }
.pop-btn { background:var(--grad); border-color:transparent; color:#fff; box-shadow:0 4px 20px rgba(37,99,235,.4); }
.pop-btn:hover { box-shadow:0 8px 30px rgba(37,99,235,.5); color:#fff; }

/* ---- TESTIMONIALS ---- */
.testi-track-wrap { position:relative; overflow:hidden; padding:0 2rem; }
.testi-track { display:flex; gap:1.5rem; transition:transform .5s var(--ease); padding:.5rem 0; }

.testi-card-3d {
  width:calc(33.333% - 1rem); min-width:calc(33.333% - 1rem);
  background:rgba(13,26,45,.9); border:1px solid var(--border);
  border-radius:var(--r2); padding:2rem; flex-shrink:0;
  backdrop-filter:blur(10px);
  transition:.3s var(--ease);
}
.testi-card-3d:hover { border-color:rgba(37,99,235,.35); transform:translateY(-5px); box-shadow:0 20px 50px rgba(0,0,0,.35); }

.tc-stars { display:flex; gap:3px; margin-bottom:1rem; }
.ts { width:15px; height:15px; fill:var(--gold); color:var(--gold); }
.testi-card-3d p { font-size:.9rem; color:rgba(255,255,255,.8); line-height:1.75; margin-bottom:1.5rem; font-style:italic; }

.tc-author { display:flex; align-items:center; gap:.8rem; }
.tc-av {
  width:42px; height:42px; min-width:42px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:.82rem; font-weight:700; color:#fff;
}
.tc-author strong { display:block; font-size:.9rem; font-weight:700; }
.tc-author small { font-size:.76rem; color:var(--muted); }

.testi-btn {
  position:absolute; top:50%; transform:translateY(-50%);
  width:42px; height:42px; border-radius:50%;
  background:rgba(13,26,45,.9); border:1px solid var(--border);
  color:var(--text); backdrop-filter:blur(10px);
  display:flex; align-items:center; justify-content:center;
  transition:.3s var(--ease); z-index:10;
}
.testi-btn [data-lucide] { width:20px; height:20px; }
.tp { left:0; }
.tn { right:0; }
.testi-btn:hover { background:var(--blue); border-color:var(--blue); box-shadow:0 0 20px rgba(37,99,235,.4); }

.testi-dots { display:flex; justify-content:center; gap:.5rem; margin-top:1.75rem; }
.tdot {
  width:8px; height:8px; border-radius:50%; background:var(--muted);
  cursor:pointer; transition:.3s var(--ease);
}
.tdot.on { width:24px; border-radius:4px; background:var(--blue-l); }

/* ---- BOOKING ---- */
.booking-section { background:linear-gradient(180deg,transparent,rgba(37,99,235,.04),transparent); }
.booking-grid { display:grid; grid-template-columns:1fr 1.4fr; gap:5rem; align-items:start; }
.booking-perks { display:flex; flex-direction:column; gap:.75rem; margin:1.75rem 0; }
.perk {
  display:flex; align-items:center; gap:.75rem;
  font-size:.9rem; color:rgba(255,255,255,.8); font-weight:500;
}
.perk [data-lucide] { width:18px; height:18px; color:var(--cyan); flex-shrink:0; }

.booking-form-3d {
  background:rgba(13,26,45,.9); border:1px solid var(--border);
  border-radius:var(--r3); padding:2.5rem;
  backdrop-filter:blur(20px);
  box-shadow:0 30px 80px rgba(0,0,0,.4);
}
form { display:flex; flex-direction:column; gap:1.25rem; }
.bf-row { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; }
.bf-group { display:flex; flex-direction:column; gap:.5rem; }
.bf-group label { font-size:.8rem; font-weight:600; color:rgba(255,255,255,.8); }
.bf-group input,
.bf-group select,
.bf-group textarea {
  padding:.8rem 1rem; background:rgba(255,255,255,.04);
  border:1.5px solid var(--border); border-radius:var(--r);
  color:var(--text); font-size:.88rem; transition:.3s var(--ease); outline:none;
}
.bf-group input:focus,
.bf-group select:focus,
.bf-group textarea:focus {
  border-color:var(--blue-l);
  background:rgba(37,99,235,.06);
  box-shadow:0 0 0 3px rgba(37,99,235,.1);
}
.bf-group select option { background:var(--bg2); }
.bf-group textarea { resize:vertical; min-height:85px; }

.btn-submit-3d {
  display:flex; align-items:center; justify-content:center; gap:.75rem;
  font-family:'Outfit',sans-serif; font-size:1rem; font-weight:700;
  padding:1rem; background:var(--grad); color:#fff; border-radius:99px;
  border:none; cursor:pointer; transition:.3s var(--ease);
  box-shadow:0 4px 20px rgba(37,99,235,.4);
}
.btn-submit-3d [data-lucide] { width:18px; height:18px; }
.btn-submit-3d:hover { transform:translateY(-2px); box-shadow:0 8px 30px rgba(37,99,235,.5); }

.form-success-3d { display:none; text-align:center; padding:3rem 1rem; }
.form-success-3d.show { display:block; }
.success-anim { margin-bottom:1.5rem; animation:succBounce .5s var(--ease); }
.success-ico { width:72px; height:72px; color:var(--green); }
@keyframes succBounce { 0%{transform:scale(0);} 60%{transform:scale(1.2);} 100%{transform:scale(1);} }
.form-success-3d h3 { font-family:'Outfit',sans-serif; font-size:1.5rem; font-weight:800; margin-bottom:.75rem; }
.form-success-3d p { color:rgba(255,255,255,.8); font-size:.95rem; }

/* ---- CONTACT ---- */
.contact-grid-3d { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; }
.cc-card {
  background:rgba(13,26,45,.9); border:1px solid var(--border);
  border-radius:var(--r2); padding:2.25rem; text-align:center;
  backdrop-filter:blur(10px); cursor:pointer;
  transition:.4s var(--ease);
}
.cc-card:hover { border-color:rgba(37,99,235,.4); transform:translateY(-8px) rotateX(5deg); box-shadow:0 25px 50px rgba(0,0,0,.4); }
.cc-icon {
  width:60px; height:60px; border-radius:var(--r2); margin:0 auto 1.25rem;
  background:rgba(37,99,235,.1); border:1px solid rgba(37,99,235,.2);
  display:flex; align-items:center; justify-content:center; color:var(--blue-l);
  transition:.4s var(--ease);
}
.cc-card:hover .cc-icon { background:rgba(37,99,235,.2); transform:scale(1.1); }
.cc-icon [data-lucide] { width:26px; height:26px; }
.cc-card h3 { font-family:'Outfit',sans-serif; font-size:1.05rem; font-weight:700; margin-bottom:.5rem; }
.cc-card p  { font-size:.82rem; color:var(--muted); margin-bottom:1rem; line-height:1.5; }
.cc-card a  { font-size:.88rem; font-weight:600; color:var(--blue-l); transition:.3s; }
.cc-card a:hover { color:var(--cyan); }

/* ---- FOOTER ---- */
.footer-3d {
  position:relative; z-index:1; overflow:hidden;
  border-top:1px solid var(--border);
  padding:5rem 0 2rem;
  background:linear-gradient(180deg,transparent,rgba(6,12,26,.8));
}
.footer-glow {
  position:absolute; top:-100px; left:50%; transform:translateX(-50%);
  width:600px; height:200px;
  background:radial-gradient(ellipse,rgba(37,99,235,.08),transparent 70%);
  pointer-events:none;
}
.footer-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:3rem; margin-bottom:3rem; }
.footer-logo {
  font-family:'Outfit',sans-serif; font-size:1.4rem; font-weight:800;
  display:flex; align-items:center; gap:.6rem; margin-bottom:1rem;
}
.fl-icon { width:22px; height:22px; background:var(--grad); border-radius:6px; padding:3px; color:#fff; }
.footer-logo span { background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.footer-brand p { font-size:.85rem; color:var(--muted); line-height:1.6; margin-bottom:1.5rem; }

.footer-social { display:flex; gap:.6rem; }
.footer-social a {
  width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.05); border:1px solid var(--border);
  font-size:.95rem; color:rgba(255,255,255,.8); transition:.3s var(--ease);
}
.footer-social a:hover { transform:translateY(-3px); color:#fff; }
.social-fb:hover { background:#1877F2; border-color:#1877F2; box-shadow:0 6px 18px rgba(24,119,242,.4); }
.social-ig:hover { background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); border-color:transparent; box-shadow:0 6px 18px rgba(220,39,67,.4); }
.social-x:hover  { background:#000; border-color:#333; box-shadow:0 6px 18px rgba(0,0,0,.5); }
.social-li:hover { background:#0A66C2; border-color:#0A66C2; box-shadow:0 6px 18px rgba(10,102,194,.4); }
.social-yt:hover { background:#FF0000; border-color:#FF0000; box-shadow:0 6px 18px rgba(255,0,0,.4); }

.footer-col h4 { font-family:'Outfit',sans-serif; font-size:.9rem; font-weight:700; margin-bottom:1.25rem; }
.footer-col ul { list-style:none; }
.footer-col li { margin-bottom:.6rem; }
.footer-col a { font-size:.85rem; color:var(--muted); transition:.3s; }
.footer-col a:hover { color:var(--blue-l); padding-left:4px; }

.footer-bottom-3d {
  padding-top:2rem; border-top:1px solid var(--border);
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem;
}
.footer-bottom-3d p { font-size:.8rem; color:var(--muted); }
.footer-bottom-3d a { color:var(--blue-l); }
.footer-badges { display:flex; gap:.6rem; flex-wrap:wrap; }
.footer-badges span {
  display:inline-flex; align-items:center; gap:.35rem;
  font-size:.72rem; font-weight:600; color:rgba(255,255,255,.8);
  background:rgba(255,255,255,.04); border:1px solid var(--border);
  padding:.3rem .75rem; border-radius:99px;
}
.fb-ico { width:12px; height:12px; }

/* ---- FLOATING CTA ---- */
.fab-cta {
  position:fixed; bottom:2rem; right:2rem; z-index:500;
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:'Outfit',sans-serif; font-size:.9rem; font-weight:700;
  padding:.75rem 1.5rem; background:var(--grad); color:#fff;
  border-radius:99px; box-shadow:0 8px 30px rgba(37,99,235,.5);
  transition:.3s var(--ease); opacity:0; transform:translateY(20px);
}
.fab-cta.visible { opacity:1; transform:translateY(0); }
.fab-cta:hover { transform:translateY(-4px); box-shadow:0 16px 40px rgba(37,99,235,.6); }
.fab-cta [data-lucide] { width:16px; height:16px; }

/* ---- KEYFRAME ANIMATIONS ---- */
@keyframes fadeInUp   { from{opacity:0;transform:translateY(30px);} to{opacity:1;transform:translateY(0);} }
@keyframes fadeInRight{ from{opacity:0;transform:translateX(40px);} to{opacity:1;transform:translateX(0);} }

/* ---- RESPONSIVE ---- */
@media (max-width:1100px) {
  .services-grid { grid-template-columns:repeat(2,1fr); }
  .about-grid    { grid-template-columns:1fr; gap:3rem; }
  .about-visual  { max-width:520px; margin:0 auto; }
  .footer-grid   { grid-template-columns:1fr 1fr; gap:2rem; }
  .pricing-3d    { gap:1rem; }
  .contact-grid-3d { grid-template-columns:repeat(2,1fr); }
}

@media (max-width:900px) {
  :root { --nav-h:68px; }
  .nav-links { display:none; }
  .nav-links.open {
    display:flex; flex-direction:column;
    position:absolute; top:var(--nav-h); left:0; right:0;
    background:rgba(6,12,26,.97); backdrop-filter:blur(24px);
    padding:1rem 1.5rem 1.5rem; gap:.25rem;
    border-bottom:1px solid var(--border); z-index:100;
  }
  .nav-link { padding:.85rem 1rem; border-radius:var(--r); }
  .hamburger { display:flex; }
  .btn-nav-cta { display:none; }

  .hero { grid-template-columns:1fr; text-align:center; gap:2.5rem; padding:calc(var(--nav-h) + 1rem) 1.5rem 3rem; }
  /* Removed order:-1 so text is first */
  .hero-img-main { height:320px; }
  .hero-badge,.hero-actions,.hero-stats { justify-content:center; }
  .hero-subtitle { margin:0 auto 2rem; }
  .card-rating,.card-eco,.card-shield,.orbit-ring { display:none; }

  .section { padding:4.5rem 0; }
  .services-grid { grid-template-columns:1fr; }
  .pricing-3d    { grid-template-columns:1fr; max-width:420px; margin:0 auto; }
  .pop-card      { transform:none; }
  .pop-card:hover { transform:translateY(-8px); }
  .booking-grid  { grid-template-columns:1fr; gap:2.5rem; }
  .gallery-3d    { grid-template-columns:1fr 1fr; grid-template-rows:auto; }
  .g-large       { grid-column:1/-1; height:280px; grid-row:auto; }
  .g-item        { height:210px; }
  .about-img-wrap { height:380px; }
  .about-certs   { top:0 !important; left:0 !important; position:relative !important; flex-direction:row; flex-wrap:wrap; gap:.5rem; margin-top:2rem; justify-content:center; }
  .about-badge-3d { bottom:-20px; right:20px; }
  .testi-card-3d { width:calc(50% - .75rem); min-width:calc(50% - .75rem); }
}

@media (max-width:600px) {
  .container { padding:0 1.25rem; }
  .section   { padding:3.5rem 0; }
  .section-header { margin-bottom:2rem; }
  .section-title { font-size:1.75rem; }

  .nav-container { padding:0 2rem 0 1.25rem; }
  .nav-logo { font-size:1.15rem; }

  .hero { padding:calc(var(--nav-h) + .75rem) 1.25rem 2.5rem; gap:2rem; min-height:auto; }
  .hero-title { font-size:2rem; letter-spacing:-1px; }
  .hero-subtitle { font-size:.92rem; }
  .hero-img-main { height:220px; }
  .hero-actions { flex-direction:column; width:100%; }
  .btn-primary,.btn-glass { width:100%; justify-content:center; }
  .hero-stats { gap:.6rem; }
  .stat-card { padding:.65rem 1rem; }
  .stat-num  { font-size:1.4rem; }
  .scroll-hint { display:none; }

  .trust-strip { padding:.6rem 0; }
  .trust-item  { font-size:.78rem; }

  .services-grid { gap:1rem; }
  .service-card-3d { padding:1.5rem; }
  .sc-icon { width:46px; height:46px; }
  .sc-icon [data-lucide] { width:22px; height:22px; }

  .about-visual { max-width:100%; display:flex; flex-direction:column; align-items:center; }
  .about-img-wrap { height:260px; border-radius:var(--r2); width:100%; }
  .about-badge-3d { bottom:auto; top:-20px; right:10px; padding:.75rem 1rem; }
  .ab-num { font-size:1.75rem; }
  .about-certs { margin-top: 1.5rem; }

  .gallery-3d { grid-template-columns:1fr; gap:.75rem; }
  .g-large,.g-item { height:220px; grid-column:auto; }

  .pricing-3d { max-width:100%; }
  .price-card-3d { padding:1.6rem; }
  .pc-amt { font-size:2.5rem; }
  .pricing-toggle-wrap { gap:.6rem; }

  .testi-card-3d { width:calc(100vw - 4rem); min-width:calc(100vw - 4rem); padding:1.5rem; }
  .testi-track-wrap { padding:0; }
  .testi-btn { display:none; }
  .testi-dots { margin-top: 1rem; }

  .booking-form-3d { padding:1.5rem; }
  .bf-row { grid-template-columns:1fr; gap:1rem; }
  .bf-group label { font-size:.78rem; }
  .bf-group input,.bf-group select,.bf-group textarea { font-size:.85rem; }

  .contact-grid-3d { grid-template-columns:1fr; gap:1rem; }
  .cc-card { padding:1.75rem; }

  .footer-grid   { grid-template-columns:1fr; gap:2rem; }
  .footer-bottom-3d { flex-direction:column; align-items:flex-start; }
  .footer-bottom-3d p { font-size:.75rem; }
  .footer-badges span { font-size:.7rem; }

  .fab-cta { bottom:1.25rem; right:1.25rem; padding:.65rem 1.25rem; font-size:.85rem; }
}

@media (max-width:400px) {
  .hero-title { font-size:1.7rem; }
  .section-title { font-size:1.55rem; }
  .hero-img-main { height:190px; }
  .testi-card-3d { width:calc(100vw - 3rem); min-width:calc(100vw - 3rem); }
  .price-card-3d { padding:1.25rem; }
}