/* ================================================================
   SHARP AUTO DETAILING - DARK CINEMA
   ================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Space+Mono:wght@400;700&display=swap');

:root {
  --black: #000; --bg: #08080c; --bg2: #0e0e14; --bg3: #14141e; --bg4: #1c1c2a;
  --border: rgba(255,255,255,.06);
  --text: #8888a0; --dim: #55556a; --white: #e4e4f0; --pure: #fff;
  --blue: #00a6ff; --blue2: #40c8ff; --blue-g: rgba(0,166,255,.12);
  --head: 'Bebas Neue', Impact, sans-serif;
  --body: 'DM Sans', system-ui, sans-serif;
  --mono: 'Space Mono', monospace;
  --ease: cubic-bezier(.22,1,.36,1);
  --ease-out: cubic-bezier(0,.55,.45,1);
  --max: 1400px; --px: clamp(20px,5vw,64px);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;overflow-x:hidden;scroll-behavior:smooth}
body{font-family:var(--body);background:var(--bg);color:var(--text);line-height:1.7;overflow-x:hidden}
::selection{background:var(--blue);color:var(--pure)}
::-webkit-scrollbar{width:3px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--blue);border-radius:9px}
a{color:inherit;text-decoration:none}img{max-width:100%;display:block}
button,input,textarea,select{font-family:inherit;font-size:inherit;border:none;outline:none;background:none;color:inherit}

/* TEXTURE */
.noise{position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:.025;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:256px}
.orbs{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.orbs i{position:absolute;border-radius:50%;filter:blur(150px);opacity:.015;will-change:transform}
.orbs i:nth-child(1){width:900px;height:900px;background:var(--blue);top:-25%;left:0;animation:orb1 40s ease-in-out infinite alternate}
.orbs i:nth-child(2){width:600px;height:600px;background:#1a00ff;bottom:-20%;right:-5%;animation:orb1 50s ease-in-out infinite alternate-reverse}
.orbs i:nth-child(3){width:400px;height:400px;background:var(--blue);top:40%;left:50%;animation:orb2 35s ease-in-out infinite alternate}
@keyframes orb1{0%{transform:translate(0,0)}100%{transform:translate(80px,-60px)}}
@keyframes orb2{0%{transform:translate(-50%,-50%)}100%{transform:translate(calc(-50% + 100px),calc(-50% - 80px))}}

/* CURSOR */
.cDot,.cRing{position:fixed;top:0;left:0;pointer-events:none;z-index:99999;will-change:transform;border-radius:50%}
.cDot{width:5px;height:5px;background:var(--blue);mix-blend-mode:screen}
.cRing{width:44px;height:44px;border:1.5px solid rgba(0,166,255,.25);transition:all .15s var(--ease)}
.cRing.big{width:88px;height:88px;border-color:rgba(0,166,255,.4);background:rgba(0,166,255,.02)}
@media(pointer:coarse){.cDot,.cRing{display:none}}

/* LOADER */
.ld{position:fixed;inset:0;z-index:10000;background:var(--black);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:16px;transition:opacity .5s var(--ease),visibility .5s}
.ld.go{opacity:0;visibility:hidden;pointer-events:none}
.ld img{height:44px;border-radius:8px;opacity:0;animation:ldIn .5s .1s var(--ease) forwards}
@keyframes ldIn{from{opacity:0;transform:scale(.85) translateY(8px)}to{opacity:1;transform:none}}
.ld-bar{width:48px;height:2px;background:var(--bg3);overflow:hidden;border-radius:2px}
.ld-bar i{display:block;height:100%;background:var(--blue);width:0;animation:ldFill .5s .15s var(--ease-out) forwards}
@keyframes ldFill{to{width:100%}}

/* ================================================================
   NAVIGATION
   ================================================================ */
.nav{position:fixed;top:0;left:0;width:100%;z-index:1000;padding:20px 0;transition:all .5s var(--ease)}
.nav.stuck{padding:12px 0;background:rgba(8,8,12,.88);backdrop-filter:blur(20px) saturate(1.6);-webkit-backdrop-filter:blur(20px) saturate(1.6);border-bottom:1px solid var(--border)}
.navIn{max-width:var(--max);margin:0 auto;padding:0 var(--px);display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:10px;z-index:1001}
.logo img{height:30px;border-radius:6px}
.logo b{font-family:var(--head);font-size:16px;letter-spacing:.12em;color:var(--pure);text-transform:uppercase;font-weight:400}
.links{display:flex;align-items:center;gap:clamp(16px,2.8vw,36px);list-style:none}
.links a{font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);transition:color .3s}
.links a:hover,.links a.on{color:var(--pure)}
.bookBtn{padding:10px 24px;background:var(--blue);color:var(--pure);border-radius:6px;font-weight:700;font-size:10px;letter-spacing:.08em;text-transform:uppercase;transition:all .3s var(--ease);box-shadow:0 0 20px rgba(0,166,255,.15),0 0 60px rgba(0,166,255,.05)}
.bookBtn:hover{transform:translateY(-1px);box-shadow:0 0 30px rgba(0,166,255,.25),0 0 80px rgba(0,166,255,.08)}
.ham{display:none;cursor:pointer;z-index:1001;width:24px;height:14px;position:relative}
.ham s{position:absolute;left:0;width:100%;height:1.5px;background:var(--pure);text-decoration:none;transition:all .3s var(--ease)}
.ham s:first-child{top:0}.ham s:last-child{bottom:0}
.ham.on s:first-child{top:50%;transform:translateY(-50%) rotate(45deg)}
.ham.on s:last-child{bottom:50%;transform:translateY(50%) rotate(-45deg)}
.mob{position:fixed;inset:0;z-index:999;background:rgba(8,8,12,.97);backdrop-filter:blur(40px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;opacity:0;visibility:hidden;transition:all .4s var(--ease)}
.mob.on{opacity:1;visibility:visible}
.mob a{font-family:var(--head);font-size:clamp(36px,10vw,64px);color:var(--dim);padding:2px 0;transform:translateY(30px);opacity:0;transition:all .4s var(--ease);letter-spacing:.06em}
.mob.on a{transform:none;opacity:1}
.mob.on a:nth-child(1){transition-delay:.03s}.mob.on a:nth-child(2){transition-delay:.06s}.mob.on a:nth-child(3){transition-delay:.09s}.mob.on a:nth-child(4){transition-delay:.12s}.mob.on a:nth-child(5){transition-delay:.15s}
.mob a:hover{color:var(--blue)}
@media(max-width:900px){.links{display:none}.ham{display:block}}

/* ================================================================
   HERO - CINEMATIC BOTTOM-ALIGNED
   ================================================================ */
.hero{position:relative;height:100vh;height:100dvh;display:flex;align-items:flex-end;overflow:hidden}
.heroBg{position:absolute;inset:0;z-index:0}
.heroBg img{width:100%;height:100%;object-fit:cover;object-position:40% 50%;animation:kenBurns 25s ease-in-out infinite alternate}
@keyframes kenBurns{0%{transform:scale(1.06)}100%{transform:scale(1.12)}}
/* Minimal overlay - only bottom gradient for text readability */
.heroBg::after{content:'';position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(8,8,12,.2) 0%,transparent 15%,transparent 35%,rgba(8,8,12,.3) 55%,rgba(8,8,12,.95) 82%,var(--bg) 100%);z-index:1}

.heroC{position:relative;z-index:5;width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--px) clamp(60px,8vh,100px);text-align:left}

/* Tag with typing effect */
.heroTag{display:inline-flex;align-items:center;gap:8px;margin-bottom:20px;opacity:0;animation:fadeUp .6s var(--ease) .8s forwards}
.heroTag i{width:7px;height:7px;background:var(--blue);border-radius:50%;box-shadow:0 0 16px var(--blue),0 0 50px rgba(0,166,255,.3);animation:glow 2s ease-in-out infinite alternate}
@keyframes glow{from{box-shadow:0 0 16px var(--blue),0 0 40px rgba(0,166,255,.2)}to{box-shadow:0 0 24px var(--blue),0 0 70px rgba(0,166,255,.35)}}
.heroTag span{font-family:var(--mono);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--blue)}

/* Title with per-character stagger */
.hero h1{font-family:var(--head);font-size:clamp(56px,11vw,140px);font-weight:400;line-height:.88;letter-spacing:.03em;color:var(--pure);margin-bottom:4px;text-transform:uppercase}
.hero h1 .ln{display:block;overflow:hidden;padding:4px 0}
.hero h1 .ln span{display:inline-block;transform:translateY(110%);animation:lnUp .9s var(--ease) forwards}
.hero h1 .ln:nth-child(1) span{animation-delay:.5s}
.hero h1 .ln:nth-child(2) span{animation-delay:.65s}
@keyframes lnUp{to{transform:none}}
.hero h1 .blue{color:var(--blue);text-shadow:0 0 80px rgba(0,166,255,.3),0 0 160px rgba(0,166,255,.1)}
/* Animated underline that sweeps in */
.hero h1::after{content:'';display:none}
.heroCyclerLine{font-family:var(--head);font-size:clamp(56px,11vw,140px);font-weight:400;line-height:.88;letter-spacing:.03em;text-transform:uppercase;margin-bottom:4px;height:1.1em;position:relative;opacity:0;animation:fadeUp .8s var(--ease) .8s forwards}
.heroCyclerLine .cycler{height:1.1em;display:block}
.heroLine{width:0;height:3px;background:linear-gradient(90deg,var(--blue),var(--blue2),rgba(0,166,255,0));margin:12px 0 0;border-radius:3px;box-shadow:0 0 20px rgba(0,166,255,.3);animation:lineSweep 1.2s var(--ease) 1.3s forwards}
@keyframes lineSweep{to{width:clamp(120px,20vw,260px)}}

/* Subtitle with character fade */
.heroP{font-size:clamp(13px,1.3vw,16px);color:rgba(255,255,255,.45);max-width:420px;font-weight:300;line-height:1.9;opacity:0;animation:fadeUp .8s var(--ease) 1.3s forwards;margin-bottom:32px}
.heroBtns{display:flex;gap:14px;flex-wrap:wrap;opacity:0;animation:fadeUp .8s var(--ease) 1.5s forwards}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

/* Right-side stats floating */
.heroSide{position:absolute;right:var(--px);bottom:clamp(60px,8vh,100px);z-index:5;display:flex;flex-direction:column;gap:28px;opacity:0;animation:fadeUp .8s var(--ease) 1.7s forwards}
.heroSide .hStat{text-align:right}
.heroSide .hStat strong{font-family:var(--head);font-size:clamp(28px,3vw,40px);color:var(--pure);letter-spacing:.03em;display:block;line-height:1}
.heroSide .hStat small{font-size:8px;color:rgba(255,255,255,.2);letter-spacing:.14em;text-transform:uppercase}

/* Scroll indicator */
.scrollInd{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);z-index:5;display:flex;flex-direction:column;align-items:center;gap:6px;opacity:0;animation:fadeUp .6s var(--ease) 2.2s forwards}
.scrollInd span{font-family:var(--mono);font-size:7px;letter-spacing:.4em;text-transform:uppercase;color:rgba(255,255,255,.08)}
.scrollLine{width:1px;height:40px;position:relative;overflow:hidden}
.scrollLine::after{content:'';position:absolute;top:-100%;left:0;width:1px;height:100%;background:linear-gradient(transparent,var(--blue),transparent);animation:lineScroll 2s ease-in-out infinite}
@keyframes lineScroll{0%{top:-100%}100%{top:100%}}

/* Floating particles in hero */
.heroParts{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.heroParts i{position:absolute;width:2px;height:2px;background:rgba(0,166,255,.3);border-radius:50%;animation:float linear infinite;font-style:normal}
.heroParts i:nth-child(1){left:15%;top:20%;animation-duration:18s;animation-delay:0s;width:3px;height:3px;opacity:.4}
.heroParts i:nth-child(2){left:70%;top:35%;animation-duration:22s;animation-delay:2s;opacity:.25}
.heroParts i:nth-child(3){left:40%;top:60%;animation-duration:16s;animation-delay:4s;width:2px;height:2px;opacity:.35}
.heroParts i:nth-child(4){left:85%;top:15%;animation-duration:20s;animation-delay:1s;opacity:.2}
.heroParts i:nth-child(5){left:25%;top:80%;animation-duration:24s;animation-delay:3s;opacity:.3;width:3px;height:3px}
.heroParts i:nth-child(6){left:55%;top:10%;animation-duration:19s;animation-delay:5s;opacity:.15}
@keyframes float{0%{transform:translateY(0) translateX(0);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translateY(-100vh) translateX(30px);opacity:0}}

/* Word cycler */
.cycler{display:inline-block;position:relative;vertical-align:bottom;overflow:hidden;height:1.1em}
.cycler span{display:block;position:absolute;left:0;top:0;width:100%;white-space:nowrap;color:var(--blue);text-shadow:0 0 80px rgba(0,166,255,.3),0 0 160px rgba(0,166,255,.1);transform:translateY(100%);opacity:0}
.cycler span.show{transform:translateY(0);opacity:1}
.cycler span.enter{animation:cycIn .5s var(--ease) forwards}
.cycler span.leave{animation:cycOut .4s var(--ease) forwards}
@keyframes cycIn{0%{transform:translateY(100%);opacity:0}100%{transform:translateY(0);opacity:1}}
@keyframes cycOut{0%{transform:translateY(0);opacity:1}100%{transform:translateY(-100%);opacity:0}}

@media(max-width:768px){
  .heroSide{display:none}
  .heroC{text-align:left;padding:0 20px clamp(40px,6vh,70px)}
  .hero h1{font-size:clamp(44px,13vw,72px)}
  .heroCyclerLine{font-size:clamp(44px,13vw,72px);height:1.15em}
  .heroCyclerLine .cycler{height:1.15em}
  .heroP{font-size:14px;max-width:100%}
  .heroBtns{justify-content:flex-start}
  .heroParts{display:none}
  .scrollInd{display:none}
  .heroLine{margin:8px 0 0}
}

/* ================================================================
   BUTTONS
   ================================================================ */
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 38px;border-radius:8px;font-weight:600;font-size:10px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:all .4s var(--ease);position:relative;overflow:hidden}
.btnP{background:var(--blue);color:var(--pure);box-shadow:0 4px 24px rgba(0,166,255,.2)}
.btnP::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);transition:left .5s var(--ease)}
.btnP:hover::before{left:100%}
.btnP:hover{transform:translateY(-2px);box-shadow:0 8px 36px rgba(0,166,255,.3)}
.btnO{border:1px solid rgba(255,255,255,.1);color:var(--pure);backdrop-filter:blur(4px)}
.btnO:hover{border-color:var(--blue);background:rgba(0,166,255,.04);transform:translateY(-2px)}
.btnG{padding:4px 0;color:var(--blue);font-size:10px;letter-spacing:.1em;font-weight:600;text-transform:uppercase;display:inline-flex;align-items:center;gap:8px;transition:all .3s;position:relative}
.btnG::after{content:'';position:absolute;bottom:-2px;left:0;width:0;height:1px;background:var(--blue);transition:width .3s var(--ease)}
.btnG:hover::after{width:100%}
.btnG svg{transition:transform .3s var(--ease)}.btnG:hover svg{transform:translateX(4px)}

/* ================================================================
   STATS STRIP
   ================================================================ */
.stats{padding:20px 0;background:rgba(14,14,20,.6);border-top:1px solid var(--border);border-bottom:1px solid var(--border);backdrop-filter:blur(8px)}
.statsIn{max-width:var(--max);margin:0 auto;padding:0 var(--px);display:flex;justify-content:center;gap:clamp(28px,6vw,80px);flex-wrap:wrap}
.st{text-align:center}
.st strong{font-family:var(--head);font-size:clamp(24px,3vw,36px);color:var(--pure);letter-spacing:.04em;display:block;line-height:1}
.st small{font-size:8px;color:var(--dim);letter-spacing:.16em;text-transform:uppercase;font-weight:500}

/* ================================================================
   MARQUEE
   ================================================================ */
.mq{overflow:hidden;padding:10px 0;border-bottom:1px solid var(--border)}
.mqTrack{display:flex;will-change:transform;animation:mqScroll 20s linear infinite}
.mqTrack span{font-family:var(--head);font-size:14px;color:rgba(255,255,255,.06);white-space:nowrap;padding:0 24px;letter-spacing:.2em;text-transform:uppercase}
.mqTrack .dot{color:var(--blue);font-size:6px;vertical-align:middle;margin:0 4px;opacity:.4}
@keyframes mqScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ================================================================
   HORIZONTAL SHOWCASE - Film Strip
   ================================================================ */
.showcase{padding:clamp(48px,6vw,80px) 0;overflow:hidden}
.showcaseHead{max-width:var(--max);margin:0 auto 28px;padding:0 var(--px);display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.showcaseHead h2{font-family:var(--head);font-size:clamp(28px,3.5vw,42px);color:var(--pure);letter-spacing:.06em;text-transform:uppercase;line-height:1}
.showcaseHead h2 em{color:var(--blue);font-style:normal}
.strip{display:flex;gap:14px;will-change:transform;animation:filmStrip 55s linear infinite}
.strip:hover{animation-play-state:paused}
@keyframes filmStrip{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.frame{width:clamp(300px,32vw,440px);flex-shrink:0;border-radius:10px;overflow:hidden;position:relative;aspect-ratio:16/10;border:1px solid var(--border);transition:all .5s var(--ease);cursor:pointer}
.frame img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease),filter .5s}
.frame:hover{border-color:rgba(0,166,255,.2);transform:translateY(-4px);box-shadow:0 24px 64px -16px rgba(0,0,0,.6),0 0 40px rgba(0,166,255,.04)}
.frame:hover img{transform:scale(1.06)}
.frame figcaption{position:absolute;bottom:0;left:0;right:0;padding:20px;background:linear-gradient(transparent,rgba(0,0,0,.8));transform:translateY(100%);transition:transform .45s var(--ease);display:flex;align-items:flex-end;justify-content:space-between}
.frame:hover figcaption{transform:none}
.frame figcaption b{font-size:12px;color:var(--pure);font-weight:600;letter-spacing:.02em}
.frame figcaption small{font-family:var(--mono);font-size:8px;color:var(--blue);letter-spacing:.1em;text-transform:uppercase}

/* ================================================================
   SECTIONS
   ================================================================ */
.sec{padding:clamp(80px,10vw,140px) 0;position:relative}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--px)}
.tag{font-family:var(--mono);font-size:9px;letter-spacing:.25em;text-transform:uppercase;color:var(--blue);margin-bottom:10px;display:inline-flex;align-items:center;gap:10px}
.tag::before{content:'';width:20px;height:1px;background:var(--blue)}
.heading{font-family:var(--head);font-size:clamp(32px,5vw,56px);font-weight:400;line-height:1;color:var(--pure);margin-bottom:14px;letter-spacing:.04em;text-transform:uppercase}
.heading em{color:var(--blue);font-style:normal}
.desc{font-size:clamp(13px,1.1vw,15px);color:var(--text);max-width:440px;line-height:1.9;font-weight:300}

/* Divider glow */
.divider{height:1px;background:var(--border);position:relative}
.divider::after{content:'';position:absolute;left:50%;top:-1px;transform:translateX(-50%);width:200px;height:3px;background:var(--blue);filter:blur(12px);opacity:.15}

/* ================================================================
   SERVICE PANELS - Edge to edge with glow
   ================================================================ */
.svcGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.03)}
.svc{background:var(--bg2);padding:0;position:relative;overflow:hidden;transition:background .5s;display:flex;flex-direction:column}
.svcImg{width:100%;aspect-ratio:16/9;overflow:hidden;position:relative}
.svcImg img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.svc:hover .svcImg img{transform:scale(1.05)}
.svcBody{padding:clamp(24px,2.5vw,40px);flex:1;display:flex;flex-direction:column}
.svc::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--blue),var(--blue2));transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease);z-index:2}
.svc::after{content:'';position:absolute;inset:0;background:radial-gradient(600px circle at var(--gx,50%) var(--gy,50%),rgba(0,166,255,.04),transparent 40%);opacity:0;transition:opacity .5s;pointer-events:none}
.svc:hover{background:var(--bg3)}.svc:hover::before{transform:scaleX(1)}.svc:hover::after{opacity:1}
.svcN{font-family:var(--mono);font-size:9px;color:rgba(255,255,255,.08);letter-spacing:.2em;margin-bottom:14px}
.svcBadge{display:inline-block;padding:3px 10px;background:rgba(0,166,255,.06);border:1px solid rgba(0,166,255,.12);border-radius:100px;font-size:7px;font-weight:700;color:var(--blue);text-transform:uppercase;letter-spacing:.14em;margin-bottom:12px}
.svc h3{font-family:var(--head);font-size:clamp(22px,2.4vw,30px);color:var(--pure);margin-bottom:10px;letter-spacing:.05em;text-transform:uppercase}
.svc p{font-size:13px;color:var(--text);line-height:1.85;margin-bottom:24px;font-weight:300}
.svcList{list-style:none;margin-bottom:24px}
.svcList li{padding:6px 0;font-size:11px;color:var(--white);display:flex;align-items:center;gap:10px;border-bottom:1px solid rgba(255,255,255,.025)}
.svcList li:last-child{border:none}
.svcList i{width:4px;height:4px;border-radius:50%;background:var(--blue);flex-shrink:0;opacity:.5;font-style:normal}
@media(max-width:900px){.svcGrid{grid-template-columns:1fr}}

/* ================================================================
   PROCESS - Animated stepper with progress
   ================================================================ */
.procWrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,4vw,64px);align-items:center;max-width:1000px;margin:0 auto}
.procLeft{display:flex;flex-direction:column;gap:0}
.procItem{padding:clamp(18px,2vw,28px) clamp(18px,2vw,24px);border-left:2px solid var(--border);position:relative;cursor:pointer;transition:all .4s var(--ease)}
.procItem.on{border-left-color:var(--blue)}
.procItem.on .procBar{transform:scaleY(1)}
.procNum{font-family:var(--head);font-size:11px;color:var(--dim);letter-spacing:.15em;margin-bottom:4px;transition:color .4s}
.procItem.on .procNum{color:var(--blue)}
.procItem h4{font-size:14px;font-weight:700;color:var(--dim);margin-bottom:4px;transition:color .4s}
.procItem.on h4{color:var(--pure)}
.procItem p{font-size:12px;color:transparent;line-height:1.7;font-weight:300;max-height:0;overflow:hidden;transition:all .5s var(--ease)}
.procItem.on p{color:var(--text);max-height:80px}
.procBar{position:absolute;left:-2px;top:0;bottom:0;width:2px;background:var(--blue);transform-origin:top;transform:scaleY(0);box-shadow:0 0 10px rgba(0,166,255,.3)}
.procItem.on .procBar{animation:procFill 4s linear forwards}
@keyframes procFill{from{transform:scaleY(0)}to{transform:scaleY(1)}}

.procRight{position:relative;display:flex;align-items:center;justify-content:center}
.procCircle{width:clamp(260px,24vw,360px);height:clamp(260px,24vw,360px);border-radius:50%;border:1px solid var(--border);position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}
.procCircle::before{content:'';position:absolute;inset:-2px;border-radius:50%;border:2px solid transparent;border-top-color:var(--blue);animation:procSpin 3s linear infinite}
@keyframes procSpin{to{transform:rotate(360deg)}}
.procCircle .procIcon{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;opacity:0;transform:scale(.92);transition:all .5s var(--ease);padding:32px;text-align:center}
.procCircle .procIcon.on{opacity:1;transform:none}
.procCircle .procIcon .emoji{font-size:clamp(36px,4vw,52px);line-height:1;margin-bottom:4px}
.procCircle .procIcon strong{font-family:var(--head);font-size:clamp(16px,1.8vw,22px);color:var(--pure);letter-spacing:.06em;text-transform:uppercase}
.procCircle .procIcon span{font-size:11px;color:var(--text);font-weight:300;line-height:1.6}

/* Progress ring */
.procRing{position:absolute;inset:-1px;border-radius:50%;pointer-events:none}
.procRing svg{width:100%;height:100%;transform:rotate(-90deg)}
.procRing circle{fill:none;stroke-width:2;cx:50%;cy:50%;r:49%}
.procRing .track{stroke:rgba(255,255,255,.03)}
.procRing .fill{stroke:var(--blue);stroke-dasharray:308;stroke-dashoffset:308;stroke-linecap:round;filter:drop-shadow(0 0 6px rgba(0,166,255,.4));transition:stroke-dashoffset .1s linear}

@media(max-width:768px){.procWrap{grid-template-columns:1fr}.procRight{order:-1;margin-bottom:20px}.procCircle{width:220px;height:220px}}

/* ================================================================
   PHOTO GRID - Editorial with tilt
   ================================================================ */
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:8px}
.gi{position:relative;border-radius:10px;overflow:hidden;border:1px solid var(--border);cursor:pointer;transition:all .5s var(--ease)}
.gi img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.gi:hover img{transform:scale(1.06)}
.gi:hover{border-color:rgba(0,166,255,.15);box-shadow:0 20px 50px -12px rgba(0,0,0,.5),0 0 30px rgba(0,166,255,.03)}
.gi-cap{position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(8,8,12,.9) 100%);opacity:0;transition:opacity .4s;display:flex;align-items:flex-end;padding:16px}
.gi:hover .gi-cap{opacity:1}
.gi-cap span{font-size:11px;font-weight:600;color:var(--pure);letter-spacing:.03em}
.g7{grid-column:span 7;aspect-ratio:16/9}.g5{grid-column:span 5;aspect-ratio:4/3}.g4{grid-column:span 4;aspect-ratio:1}
@media(max-width:768px){.grid{grid-template-columns:1fr 1fr}.g7,.g5,.g4{grid-column:span 1;aspect-ratio:4/3}}
@media(max-width:480px){.grid{grid-template-columns:1fr}}

/* Gallery filters */
.filters{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:28px}
.fil{padding:8px 20px;background:var(--bg3);border:1px solid var(--border);border-radius:100px;color:var(--dim);font-size:10px;font-weight:600;cursor:pointer;transition:all .3s;text-transform:uppercase;letter-spacing:.06em}
.fil:hover{color:var(--white);border-color:rgba(255,255,255,.1)}
.fil.on{background:var(--blue);border-color:var(--blue);color:var(--pure);box-shadow:0 0 16px rgba(0,166,255,.15)}

/* ================================================================
   TESTIMONIALS
   ================================================================ */
.tGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}
.tCard{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:clamp(24px,2.5vw,36px);transition:all .5s var(--ease);position:relative;overflow:hidden}
.tCard::before{content:'';position:absolute;top:0;left:0;width:60px;height:1px;background:linear-gradient(90deg,var(--blue),transparent);opacity:0;transition:all .5s}
.tCard:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.06);box-shadow:0 16px 48px -12px rgba(0,0,0,.4)}
.tCard:hover::before{opacity:1;width:100%}
.tStars{color:#ffb800;font-size:12px;margin-bottom:12px;letter-spacing:2px}
.tCard q{display:block;font-size:14px;line-height:1.9;color:var(--white);margin-bottom:20px;font-weight:300;quotes:none}
.tWho{display:flex;align-items:center;gap:10px}
.tAv{width:32px;height:32px;border-radius:50%;background:var(--bg4);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:10px;color:var(--blue);border:1px solid rgba(0,166,255,.1)}
.tName{font-weight:700;font-size:12px;color:var(--pure)}.tCar{font-size:9px;color:var(--dim);margin-top:1px;letter-spacing:.02em}

/* ================================================================
   CTA - Spinning border + glow
   ================================================================ */
.ctaSec{padding:clamp(60px,8vw,120px) 0}
.ctaBox{position:relative;border-radius:16px;padding:clamp(48px,5vw,80px) clamp(24px,4vw,56px);text-align:center;overflow:hidden;isolation:isolate}
.ctaBox::before{content:'';position:absolute;inset:-2px;border-radius:18px;background:conic-gradient(from 0deg,var(--blue),transparent 20%,transparent 80%,var(--blue));z-index:-2;animation:borderSpin 5s linear infinite}
.ctaBox::after{content:'';position:absolute;inset:0;border-radius:16px;background:var(--bg2);z-index:-1}
@keyframes borderSpin{to{transform:rotate(360deg)}}
.ctaGlow{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:60%;height:50%;background:radial-gradient(ellipse,rgba(0,166,255,.06),transparent 60%);pointer-events:none}
.ctaBox h2{font-family:var(--head);font-size:clamp(28px,4vw,48px);color:var(--pure);margin-bottom:10px;letter-spacing:.04em;text-transform:uppercase;line-height:1;position:relative}
.ctaBox p{font-size:14px;color:var(--text);margin-bottom:28px;position:relative;font-weight:300}

/* ================================================================
   ABOUT
   ================================================================ */
.aboutGrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,72px);align-items:center}
.aboutImg{aspect-ratio:4/5;border-radius:14px;overflow:hidden;border:1px solid var(--border);position:relative}
.aboutImg img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.aboutImg:hover img{transform:scale(1.03)}
.aboutTxt h2{font-family:var(--head);font-size:clamp(28px,3.5vw,42px);color:var(--pure);margin-bottom:20px;letter-spacing:.04em;text-transform:uppercase;line-height:1}
.aboutTxt p{color:var(--text);font-size:14px;line-height:1.9;margin-bottom:14px;font-weight:300}
@media(max-width:768px){.aboutGrid{grid-template-columns:1fr}}

.vals{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.valC{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:clamp(20px,2vw,28px);text-align:center;transition:all .4s var(--ease)}
.valC:hover{transform:translateY(-3px);border-color:rgba(0,166,255,.08)}
.valC .ico{font-size:18px;margin-bottom:8px}.valC h3{font-weight:700;font-size:12px;color:var(--pure);margin-bottom:4px}.valC p{font-size:11px;color:var(--text);line-height:1.8;font-weight:300}

.tl{position:relative;max-width:520px;margin:0 auto;padding-left:32px}
.tl::before{content:'';position:absolute;left:0;top:0;bottom:0;width:1px;background:linear-gradient(180deg,var(--blue),var(--bg4),transparent)}
.tlI{position:relative;padding-bottom:36px}.tlI:last-child{padding-bottom:0}
.tlI::before{content:'';position:absolute;left:-36px;top:3px;width:6px;height:6px;background:var(--blue);border-radius:50%;box-shadow:0 0 10px rgba(0,166,255,.5)}
.tlI h4{font-weight:700;font-size:13px;color:var(--pure);margin-bottom:4px}.tlI p{font-size:12px;color:var(--text);line-height:1.85;font-weight:300}

/* ================================================================
   CONTACT
   ================================================================ */
.ctGrid{display:grid;grid-template-columns:1.3fr .7fr;gap:clamp(32px,4vw,64px)}
.fg{margin-bottom:16px}
.fl{display:block;font-size:9px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:6px}
.fi,.fsel,.fta{width:100%;padding:13px 16px;background:var(--bg3);border:1px solid var(--border);border-radius:8px;color:var(--pure);font-size:13px;transition:all .3s}
.fi::placeholder,.fta::placeholder{color:rgba(255,255,255,.08)}
.fi:focus,.fsel:focus,.fta:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,166,255,.06)}
.fta{min-height:110px;resize:vertical}
.fsel{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2355556a' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
.fsel option{background:var(--bg3)}
.ctInfo{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:clamp(22px,2vw,32px)}
.ctR{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--border)}.ctR:last-child{border:none}
.ctIco{width:32px;height:32px;background:rgba(0,166,255,.04);border:1px solid rgba(0,166,255,.08);border-radius:6px;display:flex;align-items:center;justify-content:center;color:var(--blue);font-size:11px;flex-shrink:0}
.ctL{font-size:8px;color:var(--dim);letter-spacing:.12em;text-transform:uppercase;margin-bottom:1px}
.ctV{font-size:12px;color:var(--white)}
@media(max-width:768px){.ctGrid{grid-template-columns:1fr}}

/* FAQ */
.faq{max-width:680px;margin:0 auto}
.faqI{border-bottom:1px solid var(--border)}
.faqQ{width:100%;display:flex;align-items:center;justify-content:space-between;padding:20px 0;cursor:pointer;text-align:left;font-size:14px;font-weight:500;color:var(--white);transition:color .3s}
.faqQ:hover{color:var(--blue)}
.faqX{width:16px;height:16px;position:relative;flex-shrink:0}.faqX::before,.faqX::after{content:'';position:absolute;background:var(--dim);transition:all .3s var(--ease)}
.faqX::before{width:10px;height:1px;top:50%;left:50%;transform:translate(-50%,-50%)}
.faqX::after{width:1px;height:10px;top:50%;left:50%;transform:translate(-50%,-50%)}
.faqI.on .faqX::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.faqI.on .faqQ{color:var(--pure)}
.faqA{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
.faqA div{padding:0 0 20px;color:var(--text);font-size:13px;line-height:1.9;font-weight:300}

/* ================================================================
   FOOTER
   ================================================================ */
.ft{background:var(--black);border-top:1px solid var(--border);padding:48px 0 0}
.ftGrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:clamp(16px,2.5vw,28px);padding-bottom:36px}
.ftBrand img{height:32px;border-radius:6px;margin-bottom:10px}.ftBrand p{color:var(--dim);font-size:11px;line-height:1.85;max-width:200px;font-weight:300}
.ftSoc{display:flex;gap:5px;margin-top:12px}
.ftSoc a{width:30px;height:30px;background:var(--bg3);border:1px solid var(--border);border-radius:6px;display:flex;align-items:center;justify-content:center;color:var(--dim);font-size:9px;font-weight:700;transition:all .3s}
.ftSoc a:hover{background:var(--blue);border-color:var(--blue);color:var(--pure)}
.ft h4{font-weight:700;font-size:9px;color:var(--dim);text-transform:uppercase;letter-spacing:.14em;margin-bottom:12px}
.ftL{list-style:none}.ftL li{margin-bottom:5px}
.ftL a{font-size:11px;color:rgba(255,255,255,.12);transition:color .3s}.ftL a:hover{color:var(--blue)}
.ftBot{border-top:1px solid var(--border);padding:14px 0;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:9px;color:rgba(255,255,255,.06)}
.ftBot a{color:rgba(255,255,255,.06);transition:color .3s}.ftBot a:hover{color:var(--blue)}
@media(max-width:768px){.ftGrid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.ftGrid{grid-template-columns:1fr}}

/* ================================================================
   QUOTE CALCULATOR
   ================================================================ */
.calcWrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,48px);align-items:start}
.calcForm{display:flex;flex-direction:column;gap:16px}
.calcOpt{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.calcCard{padding:clamp(14px,1.5vw,20px);background:var(--bg3);border:1.5px solid var(--border);border-radius:10px;cursor:pointer;transition:all .35s var(--ease);text-align:center}
.calcCard:hover{border-color:rgba(255,255,255,.1)}
.calcCard.sel{border-color:var(--blue);background:rgba(0,166,255,.04);box-shadow:0 0 20px rgba(0,166,255,.06)}
.calcCard .ico{font-size:20px;margin-bottom:6px;display:block}
.calcCard strong{font-size:12px;color:var(--pure);display:block;margin-bottom:2px}
.calcCard small{font-size:9px;color:var(--dim);letter-spacing:.04em}
.calcSlider{position:relative;margin:8px 0}
.calcSlider input[type=range]{width:100%;-webkit-appearance:none;appearance:none;height:3px;background:var(--bg4);border-radius:3px;outline:none}
.calcSlider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;background:var(--blue);border-radius:50%;cursor:pointer;box-shadow:0 0 12px rgba(0,166,255,.3)}
.calcSlider label{display:flex;justify-content:space-between;font-size:10px;color:var(--dim);letter-spacing:.06em;text-transform:uppercase;margin-bottom:4px}
.calcToggle{display:flex;gap:8px;flex-wrap:wrap}
.calcChip{padding:6px 14px;background:var(--bg3);border:1px solid var(--border);border-radius:100px;font-size:10px;color:var(--dim);cursor:pointer;transition:all .3s;font-weight:500}
.calcChip:hover{color:var(--white)}.calcChip.sel{background:rgba(0,166,255,.08);border-color:rgba(0,166,255,.2);color:var(--blue)}

.calcResult{background:var(--bg2);border:1px solid var(--border);border-radius:16px;padding:clamp(28px,3vw,44px);text-align:center;position:relative;overflow:hidden}
.calcResult::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--blue),transparent)}
.calcResult .priceTag{font-family:var(--head);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--blue);margin-bottom:8px}
.calcResult .price{font-family:var(--head);font-size:clamp(56px,6vw,80px);color:var(--pure);letter-spacing:.02em;line-height:1;margin-bottom:4px;transition:all .4s var(--ease)}
.calcResult .priceNote{font-size:11px;color:var(--dim);margin-bottom:24px}
.calcResult .inclHead{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:10px;font-weight:600}
.calcResult .inclList{list-style:none;text-align:left;margin-bottom:24px}
.calcResult .inclList li{padding:5px 0;font-size:11px;color:var(--white);display:flex;align-items:center;gap:8px;border-bottom:1px solid rgba(255,255,255,.025)}
.calcResult .inclList li:last-child{border:none}
.calcResult .inclList i{color:var(--blue);font-style:normal;font-size:10px}
@media(max-width:768px){.calcWrap{grid-template-columns:1fr}.calcOpt{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:480px){.calcOpt{grid-template-columns:1fr}}

/* ================================================================
   WHY CHOOSE US - Big number grid
   ================================================================ */
.whyGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.03)}
.whyCard{background:var(--bg2);padding:clamp(28px,3vw,44px);text-align:center;transition:background .4s;position:relative;overflow:hidden}
.whyCard:hover{background:var(--bg3)}
.whyCard::after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:0;height:2px;background:var(--blue);transition:width .5s var(--ease)}
.whyCard:hover::after{width:80%}
.whyCard .big{font-family:var(--head);font-size:clamp(36px,4vw,56px);color:var(--pure);letter-spacing:.03em;line-height:1;margin-bottom:6px}
.whyCard .big em{color:var(--blue);font-style:normal}
.whyCard h4{font-size:11px;color:var(--white);font-weight:600;margin-bottom:4px;letter-spacing:.02em}
.whyCard p{font-size:10px;color:var(--dim);line-height:1.7;font-weight:300}
@media(max-width:768px){.whyGrid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.whyGrid{grid-template-columns:1fr}}

/* ================================================================
   BEFORE/AFTER COMPARISON
   ================================================================ */
.baWrap{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--border);aspect-ratio:16/9;max-width:900px;margin:0 auto;cursor:col-resize;user-select:none}
.baWrap img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.baAfter{clip-path:inset(0 0 0 50%);transition:clip-path 0s}
.baLine{position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);width:2px;background:var(--blue);z-index:5;box-shadow:0 0 16px rgba(0,166,255,.4);pointer-events:none}
.baHandle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;background:var(--blue);border-radius:50%;z-index:6;display:flex;align-items:center;justify-content:center;box-shadow:0 0 24px rgba(0,166,255,.3);pointer-events:none}
.baHandle svg{width:16px;height:16px;color:var(--pure)}
.baLabel{position:absolute;top:14px;padding:4px 12px;background:rgba(0,0,0,.6);backdrop-filter:blur(8px);border-radius:100px;font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--pure);z-index:4}
.baLabel.before{left:14px}.baLabel.after{right:14px}

/* ================================================================
   INSTAGRAM CTA
   ================================================================ */
.igSec{text-align:center}
.igGrid{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;margin-bottom:28px}
.igItem{aspect-ratio:1;overflow:hidden;position:relative;cursor:pointer}
.igItem img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease),filter .3s}
.igItem:hover img{transform:scale(1.08);filter:brightness(.7)}
.igItem::after{content:'@sharpautodetailing';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;letter-spacing:.08em;color:var(--pure);opacity:0;transition:opacity .3s}
.igItem:hover::after{opacity:1}
@media(max-width:768px){.igGrid{grid-template-columns:repeat(3,1fr)}}

/* ================================================================
   SCROLL REVEALS
   ================================================================ */
.r{opacity:0;transform:translateY(30px);transition:opacity .9s var(--ease),transform .9s var(--ease)}.r.v{opacity:1;transform:none}
.rl{opacity:0;transform:translateX(-30px);transition:opacity .9s var(--ease),transform .9s var(--ease)}.rl.v{opacity:1;transform:none}
.rr{opacity:0;transform:translateX(30px);transition:opacity .9s var(--ease),transform .9s var(--ease)}.rr.v{opacity:1;transform:none}
.rs{opacity:0;transform:scale(.94);transition:opacity .9s var(--ease),transform .9s var(--ease)}.rs.v{opacity:1;transform:none}
.sg>*{opacity:0;transform:translateY(24px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.sg.v>*:nth-child(1){transition-delay:0s;opacity:1;transform:none}
.sg.v>*:nth-child(2){transition-delay:.06s;opacity:1;transform:none}
.sg.v>*:nth-child(3){transition-delay:.12s;opacity:1;transform:none}
.sg.v>*:nth-child(4){transition-delay:.18s;opacity:1;transform:none}
.sg.v>*:nth-child(5){transition-delay:.24s;opacity:1;transform:none}
.sg.v>*:nth-child(6){transition-delay:.3s;opacity:1;transform:none}

/* Page hero */
.pgHero{min-height:44vh;display:flex;align-items:flex-end;position:relative;overflow:hidden;padding-bottom:56px}
.pgHero .heroBg{position:absolute;inset:0}.pgHero .heroBg img{width:100%;height:100%;object-fit:cover;animation:none;transform:scale(1.02)}
.pgHero .heroBg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,8,12,.7),rgba(8,8,12,.4) 40%,var(--bg) 100%)}
.pgIn{position:relative;z-index:5;max-width:var(--max);margin:0 auto;padding:0 var(--px);width:100%}
.pgHero h1{font-family:var(--head);font-size:clamp(36px,7vw,72px);color:var(--pure);letter-spacing:.05em;text-transform:uppercase;line-height:.95;opacity:0;animation:fadeUp .7s var(--ease) .2s forwards}