*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#191127;--fg:#f0ece4;--accent:#883CF0;--muted:#d6d6d6;
  --warm:#e8ddd0;--glass:#23133a;
  --serif:'Instrument Serif',Georgia,serif;
  --sans:'DM Sans',system-ui,sans-serif;
  --mono:'JetBrains Mono',monospace;
}
html{scroll-behavior:smooth;overflow-x:hidden;font-size:16px}
body{background:var(--bg);color:var(--fg);font-family:var(--sans);overflow-x:hidden;cursor:default}
::selection{background:var(--accent);color:var(--bg)}

/* CURSOR FOLLOWER */
.cursor{position:fixed;width:18px;height:18px;border:1.5px solid var(--accent);border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:width .3s,height .3s,border-color .3s,background .3s;mix-blend-mode:difference}
.cursor.hover{width:56px;height:56px;background:var(--accent);border-color:var(--accent)}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:1.5rem 3rem;display:flex;justify-content:space-between;align-items:center;backdrop-filter:blur(20px);background:#180f26;border-bottom:1px solid #3a1c63;transition:transform .4s}
nav.hide{transform:translateY(-100%)}
.logo{font-family:var(--mono);font-size:.9rem;letter-spacing:.15em;text-transform:uppercase;color:var(--accent)}
.logo span{color:var(--fg)}
.nav-links{display:flex;gap:2.5rem;list-style:none}
.nav-links a{color:var(--muted);text-decoration:none;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;transition:color .3s;font-weight:500}
.nav-links a:hover{color:var(--fg)}
.nav-cta{padding:.6rem 1.6rem;border:1px solid var(--accent);color:var(--accent);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;transition:all .3s;font-family:var(--sans);font-weight:500}
.nav-cta:hover{background:var(--accent);color:var(--bg)}

/* HERO */
.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative;padding:8rem 3rem 4rem;overflow:hidden}
.hero::before{content:'';position:absolute;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(174, 43, 255, 0.06),transparent 70%);top:10%;right:-10%;animation:pulse 8s ease-in-out infinite}
.hero::after{content:'';position:absolute;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,rgba(220, 43, 255, 0.04),transparent 70%);bottom:10%;left:-5%;animation:pulse 10s ease-in-out infinite reverse}
@keyframes pulse{0%,100%{transform:scale(1);opacity:.6}50%{transform:scale(1.15);opacity:1}}

.hero-label{font-family:var(--mono);font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);margin-bottom:2rem;display:flex;align-items:center;gap:1rem}
.hero-label::before{content:'';width:40px;height:1px;background:var(--muted)}

.hero h1{font-family:var(--serif);font-size:clamp(3rem,9vw,9rem);line-height:.95;text-align:center;max-width:1100px;font-weight:400;position:relative}
.hero h1 em{font-style:italic;color:var(--accent);display:inline-block;transition:transform .4s}
.hero h1 em:hover{transform:rotate(-3deg) scale(1.05)}

.hero-sub{margin-top:2.5rem;font-size:1.1rem;color:var(--muted);max-width:500px;text-align:center;line-height:1.7;font-weight:300}
.hero-scroll{position:absolute;bottom:3rem;display:flex;flex-direction:column;align-items:center;gap:.6rem;color:var(--muted);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;animation:bob 2s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}
.hero-scroll .line{width:1px;height:40px;background:linear-gradient(to bottom,var(--muted),transparent)}

/* STATS MARQUEE */
.marquee-wrap{border-top:1px solid #3a1c63;border-bottom:1px solid #3a1c63;padding:1.8rem 0;overflow:hidden}
.marquee{display:flex;gap:4rem;animation:scroll 25s linear infinite;width:max-content}
.marquee-item{display:flex;align-items:center;gap:1.2rem;white-space:nowrap}
.marquee-item .num{font-family:var(--serif);font-size:2.2rem;color:var(--accent)}
.marquee-item .txt{font-size:.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:.12em;line-height:1.4}
@keyframes scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* SECTIONS GENERIC */
section{padding:8rem 3rem}
.section-label{font-family:var(--mono);font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:var(--accent);margin-bottom:1.5rem;display:flex;align-items:center;gap:1rem}
.section-label::before{content:'';width:24px;height:1px;background:var(--accent)}
.section-title{font-family:var(--serif);font-size:clamp(2rem,5vw,4.5rem);line-height:1.05;max-width:900px;font-weight:400}

/* SERVICES */
.services{display:grid;grid-template-columns:1fr 1fr;gap:6rem;max-width:1400px;margin:0 auto}
.services-left{position:sticky;top:8rem;align-self:start}
.services-right{display:flex;flex-direction:column;gap:2rem}
.service-card{padding:2.5rem;border:1px solid #3a1c63;border-radius:2px;background:var(--glass);transition:all .5s;position:relative;overflow:hidden}
.service-card::before{content:'';position:absolute;top:0;left:0;width:3px;height:0;background:var(--accent);transition:height .5s}
.service-card:hover{border-color:#5e309d;background:#1f1232;transform:translateX(8px)}
.service-card:hover::before{height:100%}
.service-num{font-family:var(--mono);font-size:.7rem;color:var(--muted);letter-spacing:.15em;margin-bottom:1rem}
.service-card h3{font-family:var(--serif);font-size:1.8rem;margin-bottom:.8rem;font-weight:400}
.service-card p{color:var(--muted);font-size:.9rem;line-height:1.7;font-weight:300}

/* PROCESS */
.process{background:#191127;border-top:1px solid #3a1c63;border-bottom:1px solid #3a1c63}
.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;margin-top:4rem;max-width:1400px;margin-left:auto;margin-right:auto}
.process-step{padding:3rem 2rem;background:var(--glass);position:relative;transition:all .5s;overflow:hidden}
.process-step::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--accent);transform:scaleX(0);transition:transform .6s;transform-origin:left}
.process-step:hover::after{transform:scaleX(1)}
.process-step:hover{background:#1f1232}
.step-num{font-family:var(--serif);font-size:3.5rem;color:rgba(163, 43, 255, 0.15);font-weight:400;line-height:1}
.step-title{font-family:var(--serif);font-size:1.4rem;margin:1rem 0 .8rem;font-weight:400}
.step-desc{color:var(--muted);font-size:.85rem;line-height:1.7;font-weight:300}

/* SHOWCASE */
.showcase-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:4rem;max-width:1400px;margin-left:auto;margin-right:auto}
.showcase-card{aspect-ratio:4/5;position:relative;overflow:hidden;border-radius:3px;cursor:pointer;border:1px solid #3a1c63}
.showcase-card .bg{position:absolute;inset:0;transition:transform .8s cubic-bezier(.25,.1,.25,1)}
.showcase-card:hover .bg{transform:scale(1.08)}
.showcase-card .overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(10, 10, 10, 0.95) 0%,rgba(10, 10, 10, 0.2) 50%,transparent 100%);display:flex;flex-direction:column;justify-content:flex-end;padding:2rem;transition:all .5s}
.showcase-card:hover .overlay{background:linear-gradient(to top,rgba(10,10,10,.98) 0%,rgba(10,10,10,.4) 60%,rgba(10,10,10,.1) 100%)}
.showcase-tag{font-family:var(--mono);font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:.6rem}
.showcase-card h3{font-family:var(--serif);font-size:1.5rem;font-weight:400;margin-bottom:.4rem}
.showcase-card p{font-size:.8rem;color:var(--muted);transform:translateY(10px);opacity:0;transition:all .5s;font-weight:300}
.showcase-card:hover p{transform:translateY(0);opacity:1}

.bg-1{background:linear-gradient(135deg,#23133a,#312245,#362d43)}
.bg-2{background:linear-gradient(135deg,#1f1232,#291c3c,#342b42)}
.bg-3{background:linear-gradient(135deg,#2a1647,#392655,#746688)}

/* TESTIMONIAL */
.testimonial{text-align:center;max-width:900px;margin:0 auto}
.testimonial blockquote{font-family:var(--serif);font-size:clamp(1.6rem,3.5vw,2.8rem);line-height:1.4;font-weight:400;font-style:italic;position:relative;padding:0 2rem}
.testimonial blockquote::before{content:'\201C';position:absolute;top:-2rem;left:-1rem;font-size:8rem;color:rgba(142, 43, 255, 0.1);font-family:var(--serif);line-height:1}
.testimonial cite{display:block;margin-top:2rem;font-style:normal;font-size:.85rem;color:var(--muted);letter-spacing:.1em}
.testimonial cite strong{color:var(--fg);font-weight:500}

/* INTERACTIVE BEFORE/AFTER */
.transform-section{max-width:1400px;margin:0 auto}
.slider-container{position:relative;margin-top:4rem;width:100%;aspect-ratio:16/9;border-radius:4px;overflow:hidden;cursor:col-resize;border:1px solid rgba(255,255,255,0.06)}
.slider-side{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:clamp(1.5rem,4vw,3rem)}
.slider-before{background:linear-gradient(135deg,#23133a 0%,#3b2b53 100%);clip-path:inset(0 50% 0 0)}
.slider-after{background:linear-gradient(135deg,#1f1232 0%,#392a4e 50%,#6f6283 100%)}
.slider-before-content,.slider-after-content{display:flex;flex-direction:column;align-items:center;gap:1rem;pointer-events:none}
.slider-before-content .mock,.slider-after-content .mock{width:clamp(200px,40vw,500px);padding:2rem;border-radius:8px;text-align:left}
.mock-before{background:#1f1232;border:1px solid #3a1c63}
.mock-after{background:#2a1647;border:1px solid #5e309d;box-shadow:0 20px 60px rgba(191, 43, 255, 0.05)}
.mock h4{font-family:var(--serif);font-size:1rem;margin-bottom:.6rem;font-weight:400}
.mock-before h4{color:#fff}
.mock-after h4{color:var(--accent)}
.mock .bar{height:6px;border-radius:3px;margin-bottom:.4rem}
.mock-before .bar{background:#333333}
.mock-after .bar{background:linear-gradient(90deg,rgba(160, 43, 255, 0.3),rgba(206, 43, 255, 0.1))}
.mock .bar:nth-child(2){width:80%}.mock .bar:nth-child(3){width:60%}.mock .bar:nth-child(4){width:90%}.mock .bar:nth-child(5){width:40%}
.slider-handle{position:absolute;top:0;bottom:0;width:3px;background:var(--accent);left:50%;transform:translateX(-50%);z-index:10;pointer-events:none}
.slider-handle::before{content:'⟨  ⟩';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:48px;height:48px;background:var(--accent);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--bg);font-size:.8rem;font-family:var(--mono)}
.slider-label{position:absolute;top:1.5rem;font-family:var(--mono);font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;z-index:5;pointer-events:none}
.slider-label.left{left:1.5rem;color:#666}
.slider-label.right{right:1.5rem;color:var(--accent)}

/* CTA SECTION */
.cta{text-align:center;position:relative;overflow:hidden}
.cta::before{content:'';position:absolute;width:800px;height:800px;border-radius:50%;background:radial-gradient(circle,rgba(181, 43, 255, 0.04),transparent 60%);top:50%;left:50%;transform:translate(-50%,-50%)}
.cta h2{font-family:var(--serif);font-size:clamp(2.5rem,7vw,6rem);line-height:1;max-width:800px;margin:0 auto 2rem;font-weight:400}
.cta h2 em{font-style:italic;color:var(--accent)}
.cta p{color:var(--muted);font-size:1.1rem;margin-bottom:3rem;font-weight:300}
.cta-btn{display:inline-flex;align-items:center;gap:1rem;padding:1.2rem 3rem;background:var(--accent);color:var(--bg);font-family:var(--sans);font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;font-weight:700;border:none;cursor:pointer;transition:all .4s;position:relative;overflow:hidden}
.cta-btn::after{content:'';position:absolute;inset:0;background:#fff;transform:translateX(-101%);transition:transform .4s}
.cta-btn:hover::after{transform:translateX(0)}
.cta-btn span{position:relative;z-index:1}
.cta-btn .arrow{transition:transform .3s;position:relative;z-index:1}
.cta-btn:hover .arrow{transform:translateX(6px)}

/* FOOTER */
footer{padding:3rem;border-top:1px solid #3a1c63;display:flex;justify-content:space-between;align-items:center;font-size:.75rem;color:var(--muted)}
footer a{color:var(--muted);text-decoration:none;transition:color .3s}
footer a:hover{color:var(--accent)}
.footer-links{display:flex;gap:2rem}

/* REVEAL ANIMATIONS */
.reveal{opacity:0;transform:translateY(40px);transition:opacity .8s cubic-bezier(.25,.1,.25,1),transform .8s cubic-bezier(.25,.1,.25,1)}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-delay-1{transition-delay:.15s}
.reveal-delay-2{transition-delay:.3s}
.reveal-delay-3{transition-delay:.45s}

/* RESPONSIVE */
@media(max-width:1024px){
  .services{grid-template-columns:1fr;gap:3rem}
  .services-left{position:static}
  .process-grid{grid-template-columns:1fr 1fr}
  .showcase-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
  nav{padding:1rem 1.5rem}
  .nav-links{display:none}
  section{padding:5rem 1.5rem}
  .process-grid{grid-template-columns:1fr}
  .showcase-grid{grid-template-columns:1fr}
  .hero{padding:6rem 1.5rem 4rem}
  .cursor{display:none}
}