/* CLEANING — spa-fresh: light, mint+teal, animated soap shimmer, before/after, calc, flip-cards */
body[data-niche="cleaning"] {
  --paper:#F5FAFA; --paper-2:#E8F4F1; --paper-3:#FFFFFF;
  --teal:#0E5C50; --teal-2:#0A7A6A; --teal-deep:#073D34; --mint:#6BD9C2; --mint-soft:#C7F0E2;
  --ink:#1B2A2E; --ink-2:#2D3940; --bone:#7E8A8C;
  --hairline:rgba(27,42,46,.08); --hairline-2:rgba(27,42,46,.15);
  --surface-page:var(--paper); --surface-card:var(--paper-3); --surface-soft:var(--paper-2);
  --text-primary:var(--ink); --text-secondary:var(--bone); --border-soft:var(--hairline);
  --accent:var(--teal); --accent-dark:var(--teal-deep);
  background:var(--paper); color:var(--ink); font-family:var(--font-sans);
}
body[data-niche="cleaning"] h1, body[data-niche="cleaning"] h2, body[data-niche="cleaning"] h3 {
  font-family:'Manrope', var(--font-sans); font-weight:700; color:var(--ink); line-height:1.05; letter-spacing:-0.025em;
}
body[data-niche="cleaning"] .container { max-width:1280px; margin:0 auto; padding:0 24px; }

/* TOPBAR */
.cl-top { position:absolute; top:0; left:0; right:0; z-index:30; padding:18px 0; transition:all .3s; }
.cl-top.scrolled { position:fixed; padding:12px 0; background:rgba(245,250,250,.92); backdrop-filter:saturate(160%) blur(14px); border-bottom:1px solid var(--hairline); }
.cl-top-inner { display:flex; align-items:center; justify-content:space-between; gap:24px; }
.cl-brand { display:inline-flex; align-items:center; gap:10px; }
.cl-brand-mark { width:38px; height:38px; background:var(--teal); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--mint-soft); font-weight:700; font-size:18px; position:relative; }
.cl-brand-mark::before, .cl-brand-mark::after { content:''; position:absolute; border-radius:50%; background:var(--mint); }
.cl-brand-mark::before { width:8px; height:8px; top:-2px; right:-3px; opacity:.7; }
.cl-brand-mark::after { width:5px; height:5px; bottom:0; left:-3px; opacity:.6; }
.cl-brand b { font-family:'Manrope',sans-serif; font-size:22px; font-weight:800; color:var(--ink); letter-spacing:-0.02em; }
.cl-brand span { color:var(--teal); }
.cl-nav { display:flex; gap:28px; }
.cl-nav a { color:var(--ink-2); font-size:13px; font-weight:600; transition:color .2s; }
.cl-nav a:hover { color:var(--teal); }
.cl-cta { display:inline-flex; align-items:center; gap:8px; padding:12px 22px; background:var(--teal); color:var(--paper-3); border-radius:50px; font-weight:600; font-size:13px; transition:background .25s, transform .2s; box-shadow:0 8px 18px -8px rgba(14,92,80,.5); }
.cl-cta:hover { background:var(--teal-deep); transform:translateY(-2px); }
.cl-cta.gh { background:transparent; color:var(--teal); border:2px solid var(--teal); box-shadow:none; }
.cl-cta.gh:hover { background:var(--teal); color:var(--paper-3); }
@media (max-width:840px) { .cl-nav { display:none; } }

/* HERO */
.cl-hero { position:relative; padding:140px 0 80px; overflow:hidden; }
.cl-hero::before { content:''; position:absolute; top:-200px; right:-200px; width:600px; height:600px; background:radial-gradient(circle, var(--mint-soft), transparent 65%); pointer-events:none; opacity:.7; }
.cl-hero::after { content:''; position:absolute; bottom:-160px; left:-160px; width:480px; height:480px; background:radial-gradient(circle, var(--mint), transparent 60%); pointer-events:none; opacity:.3; }
.cl-hero-inner { display:grid; grid-template-columns:1.05fr 1fr; gap:60px; align-items:center; position:relative; z-index:1; }
.cl-hero-tag { display:inline-flex; align-items:center; gap:10px; padding:8px 14px; background:var(--mint-soft); color:var(--teal-deep); font-size:11px; letter-spacing:.18em; text-transform:uppercase; font-weight:700; margin-bottom:24px; border-radius:50px; }
.cl-hero-tag::before { content:''; width:8px; height:8px; background:var(--teal); border-radius:50%; box-shadow:0 0 0 4px rgba(14,92,80,.18); animation:cl-pulse 2s ease-in-out infinite; }
@keyframes cl-pulse { 50% { box-shadow:0 0 0 8px rgba(14,92,80,0); } }
.cl-hero h1 { font-size:clamp(48px, 7.2vw, 96px); margin:0 0 22px; }
.cl-hero h1 .a { color:var(--teal); }
.cl-hero h1 .underline { position:relative; display:inline-block; }
.cl-hero h1 .underline::after { content:''; position:absolute; left:0; right:0; bottom:6px; height:14px; background:var(--mint); z-index:-1; opacity:.5; }
.cl-hero p { color:var(--bone); font-size:clamp(16px, 1.3vw, 19px); line-height:1.65; max-width:54ch; margin:0 0 32px; }
.cl-hero-row { display:flex; gap:14px; flex-wrap:wrap; align-items:center; margin-bottom:48px; }
.cl-hero-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:0; padding-top:32px; border-top:1px solid var(--hairline); }
.cl-hero-stat strong { display:block; font-family:'Manrope',sans-serif; font-size:clamp(28px, 3.4vw, 38px); color:var(--teal); font-weight:800; line-height:1; margin-bottom:6px; letter-spacing:-0.02em; }
.cl-hero-stat span { color:var(--bone); font-size:12px; letter-spacing:.04em; }
.cl-hero-photo { position:relative; aspect-ratio:4/5; background-size:cover; background-position:center; background-color:var(--paper-2); border-radius:32px; overflow:hidden; box-shadow:0 32px 64px -32px rgba(14,92,80,.32); }
.cl-hero-photo::before {
  content:''; position:absolute; top:0; left:-100%; width:200%; height:100%;
  background:linear-gradient(115deg, transparent 35%, rgba(255,255,255,.4) 50%, transparent 65%);
  animation:cl-shimmer 5s ease-in-out infinite; pointer-events:none;
}
@keyframes cl-shimmer { 0%,30% {transform:translateX(-50%);} 70%,100% {transform:translateX(50%);} }
.cl-hero-photo-card { position:absolute; left:24px; bottom:24px; right:24px; background:rgba(255,255,255,.95); backdrop-filter:blur(12px); padding:18px 22px; border-radius:18px; display:flex; align-items:center; gap:16px; }
.cl-hero-photo-card-icon { width:46px; height:46px; background:var(--teal); color:var(--mint-soft); border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0; }
.cl-hero-photo-card b { display:block; font-family:'Manrope',sans-serif; font-size:14px; font-weight:700; color:var(--ink); margin-bottom:2px; }
.cl-hero-photo-card span { color:var(--bone); font-size:12px; }
@media (max-width:980px) { .cl-hero-inner { grid-template-columns:1fr; gap:40px; } .cl-hero-photo { max-width:480px; margin:0 auto; } }
@media (max-width:540px) { .cl-hero-stats { grid-template-columns:1fr 1fr; gap:18px 0; } }

/* SECTIONS */
.cl-sec { padding:clamp(72px, 9vw, 120px) 0; position:relative; }
.cl-sec.bg2 { background:var(--paper-2); }
.cl-sec.dark { background:linear-gradient(160deg, var(--teal-deep) 0%, var(--teal) 100%); color:var(--paper); }
.cl-sec.dark h2 { color:var(--paper); }
.cl-sec.dark .cl-eye { color:var(--mint); }
.cl-sec.dark .cl-lead { color:rgba(245,250,250,.8); }
.cl-eye { color:var(--teal); font-size:11px; letter-spacing:.26em; text-transform:uppercase; font-weight:800; margin-bottom:14px; display:inline-block; }
.cl-h2 { font-size:clamp(36px, 5vw, 64px); margin:0 0 16px; }
.cl-h2 .a { color:var(--teal); }
.cl-sec.dark .cl-h2 .a { color:var(--mint); }
.cl-lead { color:var(--bone); font-size:clamp(15px, 1.2vw, 17px); line-height:1.65; max-width:62ch; }

/* SERVICES — flip cards */
.cl-svc { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:48px; }
.cl-svc-card { perspective:1400px; aspect-ratio:1/1.2; }
.cl-svc-card-inner { position:relative; width:100%; height:100%; transition:transform .8s var(--ease-smooth); transform-style:preserve-3d; }
.cl-svc-card:hover .cl-svc-card-inner, .cl-svc-card.flip .cl-svc-card-inner { transform:rotateY(180deg); }
.cl-svc-face { position:absolute; inset:0; backface-visibility:hidden; border-radius:24px; padding:36px 30px; display:flex; flex-direction:column; }
.cl-svc-face.front { background:var(--paper-3); border:1px solid var(--hairline); box-shadow:0 12px 32px -16px rgba(14,92,80,.12); }
.cl-svc-face.back { background:linear-gradient(160deg, var(--teal-deep), var(--teal)); color:var(--paper); transform:rotateY(180deg); }
.cl-svc-icon { width:72px; height:72px; background:var(--mint-soft); color:var(--teal-deep); border-radius:20px; display:flex; align-items:center; justify-content:center; font-size:34px; margin-bottom:24px; transition:transform .4s var(--ease-smooth); }
.cl-svc-card:hover .cl-svc-icon { transform:rotate(-8deg) scale(1.05); }
.cl-svc-face.back .cl-svc-icon { background:rgba(245,250,250,.15); color:var(--mint-soft); }
.cl-svc-face h3 { font-size:24px; margin:0 0 10px; }
.cl-svc-face.back h3 { color:var(--paper); }
.cl-svc-face .desc { color:var(--bone); font-size:14px; line-height:1.6; margin:0 0 20px; flex:1; }
.cl-svc-face.back .desc { color:rgba(245,250,250,.85); }
.cl-svc-face .from { padding-top:16px; border-top:1px solid var(--hairline); display:flex; justify-content:space-between; align-items:flex-end; margin-top:auto; }
.cl-svc-face.back .from { border-top-color:rgba(245,250,250,.2); }
.cl-svc-face .from small { font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--bone); font-weight:700; }
.cl-svc-face.back .from small { color:rgba(245,250,250,.6); }
.cl-svc-face .from b { display:block; font-size:24px; color:var(--teal); margin-top:4px; font-weight:800; font-family:'Manrope',sans-serif; }
.cl-svc-face.back .from b { color:var(--mint); }
.cl-svc-list { list-style:none; padding:0; margin:14px 0 22px; display:flex; flex-direction:column; gap:8px; flex:1; }
.cl-svc-list li { font-size:13px; line-height:1.5; padding-left:22px; position:relative; color:rgba(245,250,250,.92); }
.cl-svc-list li::before { content:'✓'; position:absolute; left:0; top:0; width:14px; height:14px; background:var(--mint); color:var(--teal-deep); border-radius:50%; font-size:10px; font-weight:800; text-align:center; line-height:14px; }
.cl-svc-flip-hint { font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--bone); margin-top:16px; font-weight:700; }
.cl-svc-face.back .cl-svc-flip-hint { color:rgba(245,250,250,.5); }
@media (max-width:980px) { .cl-svc { grid-template-columns:1fr 1fr; } }
@media (max-width:600px)  { .cl-svc { grid-template-columns:1fr; } .cl-svc-card { aspect-ratio:1/0.85; } }

/* CALCULATOR */
.cl-calc { background:var(--paper-3); border:1px solid var(--hairline); border-radius:32px; padding:clamp(32px, 4vw, 56px); margin-top:48px; display:grid; grid-template-columns:1.1fr 1fr; gap:48px; align-items:center; box-shadow:0 32px 64px -32px rgba(14,92,80,.16); position:relative; overflow:hidden; }
.cl-calc::before { content:''; position:absolute; top:-100px; right:-100px; width:300px; height:300px; background:radial-gradient(circle, var(--mint-soft), transparent 65%); pointer-events:none; }
.cl-calc-form { position:relative; z-index:1; }
.cl-calc-form .row { margin-bottom:24px; }
.cl-calc-form label { display:flex; justify-content:space-between; font-size:12px; letter-spacing:.06em; color:var(--ink-2); margin-bottom:10px; font-weight:700; }
.cl-calc-form label b { color:var(--teal); font-weight:800; }
.cl-calc-form-tiles { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; }
.cl-calc-form-tile { padding:14px 12px; background:var(--paper-2); border:2px solid transparent; border-radius:14px; cursor:pointer; text-align:center; transition:all .2s; font-weight:600; font-size:13px; color:var(--ink-2); }
.cl-calc-form-tile.active { background:var(--teal); color:var(--paper); border-color:var(--teal-deep); }
.cl-calc-form-tile:not(.active):hover { border-color:var(--teal); background:var(--paper-3); }
.cl-calc-form-tile small { display:block; font-size:11px; opacity:.7; margin-top:2px; font-weight:500; }
.cl-calc-form input[type=range] { -webkit-appearance:none; appearance:none; width:100%; background:transparent; cursor:pointer; }
.cl-calc-form input[type=range]::-webkit-slider-runnable-track { height:6px; background:var(--paper-2); border-radius:3px; }
.cl-calc-form input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:22px; height:22px; border-radius:50%; background:var(--teal); border:3px solid var(--paper-3); margin-top:-8px; cursor:grab; box-shadow:0 4px 12px -2px rgba(14,92,80,.5); }
.cl-calc-form input[type=range]::-moz-range-track { height:6px; background:var(--paper-2); border-radius:3px; }
.cl-calc-form input[type=range]::-moz-range-thumb { width:22px; height:22px; border-radius:50%; background:var(--teal); border:3px solid var(--paper-3); cursor:grab; }
.cl-calc-result { background:linear-gradient(160deg, var(--teal-deep), var(--teal)); color:var(--paper-3); padding:36px; border-radius:24px; display:flex; flex-direction:column; gap:14px; position:relative; overflow:hidden; }
.cl-calc-result::before { content:''; position:absolute; top:-50px; right:-50px; width:180px; height:180px; background:radial-gradient(circle, rgba(107,217,194,.3), transparent 65%); pointer-events:none; }
.cl-calc-result-label { font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--mint-soft); font-weight:700; position:relative; z-index:1; }
.cl-calc-result-value { font-family:'Manrope',sans-serif; font-size:clamp(40px, 5vw, 64px); font-weight:800; line-height:1; transition:opacity .3s; position:relative; z-index:1; letter-spacing:-0.025em; }
.cl-calc-detail { display:grid; grid-template-columns:1fr 1fr; gap:14px; padding-top:14px; border-top:1px solid rgba(245,250,250,.2); position:relative; z-index:1; }
.cl-calc-detail div b { display:block; font-family:'Manrope',sans-serif; font-size:22px; font-weight:800; color:var(--mint); }
.cl-calc-detail div span { color:rgba(245,250,250,.7); font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; }
.cl-calc-result a { display:inline-block; margin-top:14px; padding:14px 20px; background:var(--paper-3); color:var(--teal-deep); font-weight:700; border-radius:50px; text-align:center; font-size:13px; transition:transform .2s; position:relative; z-index:1; }
.cl-calc-result a:hover { transform:translateY(-2px); }
@media (max-width:900px) { .cl-calc { grid-template-columns:1fr; } }

/* BEFORE / AFTER */
.cl-ba { display:grid; grid-template-columns:1fr 1fr; gap:48px; margin-top:48px; align-items:center; }
.cl-ba-info p { font-size:16px; line-height:1.7; color:var(--bone); margin:0 0 18px; }
.cl-ba-info p:first-child { font-family:'Manrope',sans-serif; font-size:clamp(18px,1.5vw,22px); color:var(--ink); font-weight:600; }
.cl-ba-photo { position:relative; aspect-ratio:1/1; border-radius:24px; overflow:hidden; cursor:ew-resize; user-select:none; box-shadow:0 24px 48px -24px rgba(14,92,80,.32); touch-action:none; }
.cl-ba-photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; -webkit-user-drag:none; user-drag:none; }
.cl-ba-photo .after { clip-path:polygon(50% 0, 100% 0, 100% 100%, 50% 100%); transition:clip-path .1s linear; }
.cl-ba-photo .label { position:absolute; top:18px; padding:8px 14px; font-family:'Manrope',sans-serif; font-size:11px; letter-spacing:.18em; text-transform:uppercase; font-weight:800; border-radius:50px; pointer-events:none; backdrop-filter:blur(10px); }
.cl-ba-photo .label.before { left:18px; background:rgba(27,42,46,.7); color:var(--paper); }
.cl-ba-photo .label.after { right:18px; background:rgba(107,217,194,.85); color:var(--teal-deep); }
.cl-ba-handle { position:absolute; left:50%; top:0; bottom:0; width:3px; background:var(--paper); transform:translateX(-50%); pointer-events:none; box-shadow:0 0 24px rgba(0,0,0,.3); }
.cl-ba-handle::after { content:'⇆'; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:48px; height:48px; background:var(--paper); border-radius:50%; color:var(--teal-deep); display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:800; box-shadow:0 8px 24px -4px rgba(14,92,80,.4); }
@media (max-width:900px) { .cl-ba { grid-template-columns:1fr; } }

/* PROCESS — 4 steps */
.cl-proc { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:48px; }
.cl-proc-step { padding:28px; background:rgba(245,250,250,.08); border:1px solid rgba(245,250,250,.12); border-radius:24px; text-align:center; transition:transform .3s, background .3s; }
.cl-proc-step:hover { transform:translateY(-6px); background:rgba(245,250,250,.14); }
.cl-proc-step-icon { width:68px; height:68px; background:var(--mint); color:var(--teal-deep); border-radius:20px; display:flex; align-items:center; justify-content:center; font-size:30px; margin:0 auto 16px; transition:transform .4s; }
.cl-proc-step:hover .cl-proc-step-icon { transform:rotate(-8deg) scale(1.06); }
.cl-proc-step-num { font-family:'Manrope',sans-serif; font-size:11px; color:var(--mint); letter-spacing:.26em; font-weight:800; margin-bottom:8px; }
.cl-proc-step h3 { font-size:18px; margin:0 0 8px; color:var(--paper); }
.cl-proc-step p { color:rgba(245,250,250,.7); font-size:13px; line-height:1.55; margin:0; }
@media (max-width:900px) { .cl-proc { grid-template-columns:1fr 1fr; } }

/* TRUST LOGOS */
.cl-trust { display:grid; grid-template-columns:repeat(6,1fr); gap:0; margin-top:36px; padding:24px 0; border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline); }
.cl-trust div { padding:18px 14px; text-align:center; border-right:1px solid var(--hairline); }
.cl-trust div:last-child { border-right:0; }
.cl-trust div b { font-family:'Manrope',sans-serif; font-size:16px; color:var(--ink-2); font-weight:800; letter-spacing:.04em; }
@media (max-width:900px) { .cl-trust { grid-template-columns:1fr 1fr 1fr; } .cl-trust div:nth-child(3n) { border-right:0; } }

/* FAQ */
.cl-faq { max-width:880px; margin:36px auto 0; }
.cl-faq details { background:var(--paper-3); border:1px solid var(--hairline); border-radius:18px; margin-bottom:10px; padding:22px 28px; transition:border-color .25s; }
.cl-faq details[open] { border-color:var(--teal); }
.cl-faq summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap:24px; font-family:'Manrope',sans-serif; font-size:17px; font-weight:700; color:var(--ink); line-height:1.3; }
.cl-faq summary::-webkit-details-marker { display:none; }
.cl-faq summary::after { content:'+'; color:var(--teal); font-size:26px; transition:transform .25s; font-weight:300; }
.cl-faq details[open] summary::after { transform:rotate(45deg); }
.cl-faq details > div { padding-top:14px; color:var(--bone); line-height:1.7; font-size:15px; }

/* FOOTER */
.cl-foot { background:var(--ink); color:var(--paper); padding:64px 0 28px; }
.cl-foot-top { display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:32px; margin-bottom:36px; }
.cl-foot-brand b { font-family:'Manrope',sans-serif; font-size:30px; color:var(--paper); display:block; font-weight:800; letter-spacing:-0.02em; }
.cl-foot-brand b span { color:var(--mint); }
.cl-foot-brand p { color:rgba(245,250,250,.65); margin:14px 0 0; max-width:34ch; line-height:1.6; font-size:13px; }
.cl-foot h5 { color:var(--mint); font-size:11px; letter-spacing:.26em; text-transform:uppercase; margin:0 0 14px; font-weight:800; }
.cl-foot a { color:rgba(245,250,250,.65); display:block; padding:4px 0; font-size:13px; }
.cl-foot a:hover { color:var(--mint); }
.cl-foot-bot { padding-top:20px; border-top:1px solid rgba(245,250,250,.1); display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px; color:rgba(245,250,250,.5); font-size:12px; }
@media (max-width:800px) { .cl-foot-top { grid-template-columns:1fr 1fr; } }
@media (max-width:540px) { .cl-foot-top { grid-template-columns:1fr; } }

body[data-niche="cleaning"] .reveal { opacity:0; transform:translateY(18px); transition:opacity 700ms var(--ease-smooth), transform 700ms var(--ease-smooth); }
body[data-niche="cleaning"] .reveal.in { opacity:1; transform:none; }