/* VICKEL STUDIOS — edit colors/fonts here */
:root{--bg:#efeaf8;--ink:#1a0833;--p:#5b21d6;--lime:#c8ff00;--accent:var(--p);--pad:clamp(20px,4vw,56px);--f1:"Inter",Helvetica,Arial,sans-serif;--f2:"Bricolage Grotesque","Inter",Arial,sans-serif}
*{box-sizing:border-box;margin:0}html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font:400 17px/1.55 var(--f1)}
a{color:inherit;text-decoration:none}img{display:block;width:100%;height:100%;object-fit:cover}
.nav{position:fixed;inset:0 0 auto;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:18px var(--pad)}
.brand{font:700 15px var(--f2);letter-spacing:.12em}.links{display:flex;gap:28px}.links a{font-size:14px;position:relative}
.links a:after{content:"";position:absolute;left:0;bottom:-3px;height:1px;width:100%;background:currentColor;transform:scaleX(0);transform-origin:left;transition:.4s}
.links a:hover:after,.links a[aria-current]:after{transform:scaleX(1)}
.cta{background:var(--lime);color:var(--ink);border:0;padding:10px 20px;border-radius:99px;font:500 14px var(--f1);cursor:pointer}
.burger{display:none;background:none;border:0;width:36px;height:24px;position:relative;z-index:25}.burger span{position:absolute;left:4px;right:4px;height:2px;background:var(--ink);transition:.4s}.burger span:first-child{top:7px}.burger span:last-child{top:15px}
.menu{position:fixed;inset:0;z-index:15;background:var(--p);color:var(--lime);display:flex;align-items:flex-end;padding:var(--pad);clip-path:inset(0 0 100% 0);transition:clip-path .7s cubic-bezier(.7,0,.2,1)}
.menu nav{display:flex;flex-direction:column}.menu a{font:700 clamp(40px,12vw,80px)/1.1 var(--f2);letter-spacing:-.03em}
body.open .menu{clip-path:inset(0)}body.open .burger span{background:var(--lime)}body.open .nav{background:none;color:var(--lime)}body.open .brand{position:relative;z-index:25}body.open .burger span:first-child{top:11px;transform:rotate(45deg)}body.open .burger span:last-child{top:11px;transform:rotate(-45deg)}
.h1,.mega{font:700 clamp(44px,9vw,148px)/.95 var(--f2);letter-spacing:-.045em;max-width:14ch}
.mega{font-size:clamp(40px,8vw,120px)}
.herobg{margin-top:48px;aspect-ratio:21/9;overflow:hidden;}.herobg img{animation:zoom 2.4s cubic-bezier(.2,.7,.2,1) both}
@keyframes zoom{from{transform:scale(1.2)}}
.link{border-bottom:1px solid;padding-bottom:2px;display:inline-block}
.sec{padding:clamp(70px,12vw,170px) var(--pad) 0}main>.sec:first-child{padding-top:150px}.h2{font:700 clamp(28px,4vw,56px) var(--f2);letter-spacing:-.03em;margin-bottom:40px}
.works{display:grid;grid-template-columns:repeat(12,1fr);gap:60px 28px;margin-bottom:50px}
.proj{display:block}.p0{grid-column:1/8}.p1{grid-column:9/13;margin-top:140px}.p2{grid-column:2/6}.p3{grid-column:7/13}
.proj .img{overflow:hidden;aspect-ratio:4/5}.p0 .img,.p3 .img{aspect-ratio:7/5}.proj img{transition:transform 1s cubic-bezier(.2,.7,.2,1)}.proj:hover img{transform:scale(1.06)}
.proj h3{font:700 22px var(--f2);margin-top:14px}.proj span{font-size:14px;opacity:.7}.proj.hide{display:none}
.svc{list-style:none}.svc li{border-top:1px solid #2a101933}.svc a,.big li{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:22px 0;transition:padding .4s,color .4s}
.svc b{font:700 clamp(26px,5vw,72px)/1 var(--f2);letter-spacing:-.03em}.svc span{font-size:15px;opacity:.7;text-align:right}.svc a:hover{padding-left:24px;color:var(--accent)}
.quote p{font:700 clamp(30px,6vw,88px)/1.05 var(--f2);letter-spacing:-.035em;max-width:18ch;margin-left:auto;color:var(--p)}
.founder{display:grid;grid-template-columns:5fr 6fr;gap:6vw;align-items:center}.founder .img{aspect-ratio:4/5;overflow:hidden}.founder h3{font:700 24px var(--f2);margin-bottom:16px}.founder p{margin-bottom:14px;max-width:46ch}
.two{display:grid;grid-template-columns:1fr 1fr;gap:6vw;margin-top:60px}
.filters{display:flex;gap:10px;flex-wrap:wrap;margin:40px 0 60px}.filters button{border:1px solid;background:none;border-radius:99px;padding:8px 16px;font:inherit;cursor:pointer}.filters .on{background:var(--p);border-color:var(--p);color:var(--lime)}
.fade{opacity:0;transform:translateY(30px);transition:1s cubic-bezier(.2,.7,.2,1)}.fade.vis{opacity:1;transform:none}
.rev{clip-path:inset(0 0 100% 0);transition:clip-path 1.2s cubic-bezier(.7,0,.2,1)}.rev.vis{clip-path:inset(0)}
.split .w{display:inline-block;overflow:hidden;vertical-align:top}.split .w i{display:inline-block;font-style:normal;transform:translateY(105%);transition:transform 1s cubic-bezier(.2,.7,.2,1)}.split.vis .w i{transform:none}
@media(max-width:820px){.links,.nav>.cta{display:none}.burger{display:block}.founder,.two{grid-template-columns:1fr}
.works{display:flex;flex-direction:column;gap:44px}.p1{margin-top:0}.svc a,.big li{flex-direction:column;gap:6px}.svc span{text-align:left}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}.fade,.rev,.split .w i{opacity:1;transform:none;clip-path:none}}

.nav{transition:background .4s,color .4s}.nav .brand,.nav .links a{color:inherit}
.hero-dark .nav{background:linear-gradient(#f4effb,#e3d8f3);color:var(--ink)}
.nav.scrolled{background:var(--bg);color:var(--ink)}.nav.scrolled .burger span{background:var(--ink)}
.proj:hover h3{color:var(--p)}.svc a:hover{color:var(--p)}

/* HERO: full-bleed image, centred headline, stacked pill buttons */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:space-between;text-align:center;color:#fff;padding:150px var(--pad) 70px;overflow:hidden}
.hero>img{position:absolute;inset:0;z-index:-2;animation:zoom 2.4s cubic-bezier(.2,.7,.2,1) both} /* assets/images/hero.jpg */
.hero:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(rgba(20,5,45,.15),rgba(20,5,45,.2) 45%,rgba(10,2,25,.9))}
@keyframes zoom{from{transform:scale(1.15)}}
.hero h1{font:700 clamp(46px,9vw,140px)/1 var(--f2);letter-spacing:-.04em;max-width:12ch;margin:auto 0}
.hero h1 em{display:block;font:italic 400 1.05em/1 "Instrument Serif",Georgia,serif;letter-spacing:-.01em;color:var(--lime)}
.hero .pills{display:flex;gap:16px;width:100%;max-width:560px;flex-direction:column}
.pill{display:block;background:#efeaf8;color:var(--ink);border-radius:99px;padding:22px;font-size:19px;transition:background .3s,transform .3s}
.pill:hover{background:var(--lime);transform:translateY(-3px)}
@media(min-width:821px){.hero .pills{flex-direction:row}.pill{flex:1}}
/* FOOTER: soft rounded card, copyright + social icons */
footer{margin-top:clamp(80px,12vw,170px);padding:0 var(--pad) var(--pad)}
.fcard{background:#e2d8f1;border-radius:36px;padding:40px 24px 44px;text-align:center;display:grid;gap:50px;justify-items:center}
.fcard p{color:#4a2a8a;font-size:clamp(16px,2.4vw,22px)}
.social{display:flex;gap:16px}.social a{width:56px;height:56px;border-radius:18px;background:#000;display:grid;place-items:center;transition:transform .3s}
.social a:hover{transform:translateY(-4px)}.social svg{width:28px;height:28px;stroke:var(--lime);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* MOBILE MENU: drops below the header, full-width rows, current page filled */
:root{--navh:66px}
.menu{align-items:stretch;padding:var(--navh) 0 0;background:var(--bg);color:var(--ink);clip-path:inset(0 0 100% 0)}
.menu nav{width:100%;flex-direction:column}
.menu a{font:500 22px/1 var(--f1);letter-spacing:.02em;text-transform:uppercase;text-align:center;padding:34px 0;flex:0 0 auto;transition:background .3s,color .3s}
.menu a:last-child{display:none}.menu a[aria-current]{background:var(--p);color:var(--lime)}
body.open .nav{background:linear-gradient(#f4effb,#e3d8f3);color:var(--ink)}body.open .burger span{background:var(--ink)}body.open .brand{color:var(--ink)}
@media(min-width:821px){.menu{display:none}}
/* CONTACT */
.cband{background:var(--ink);color:#e6dcf7;text-align:center;padding:140px var(--pad) 70px}
.cband p{letter-spacing:.2em;text-transform:uppercase;font-size:15px;margin-bottom:10px}
.cband h1{font:700 clamp(48px,9vw,120px)/1 var(--f2);letter-spacing:-.04em}.cband em{font:italic 400 1em "Instrument Serif",Georgia,serif;color:#9b7bf0}
.cwrap{display:grid;grid-template-columns:1fr 1fr;gap:6vw;align-items:start;padding-top:80px!important}
.lab{letter-spacing:.2em;text-transform:uppercase;font-size:14px;font-weight:600;margin-bottom:18px}
.form{display:grid;gap:16px;margin-top:10px}
.form input,.form select,.form textarea{background:#fbf9ff;border:1px solid #d9cdee;border-radius:20px;padding:20px 24px;font:inherit;outline:0}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--p)}
.form .cta{justify-self:start;padding:18px 34px;font-size:16px}
.cimg{border-radius:28px;overflow:hidden;aspect-ratio:4/5}.cinfo{background:#fbf9ff;border-radius:28px;padding:40px 32px;margin-top:24px}
.cinfo h3{font:700 clamp(32px,5vw,52px) var(--f2);letter-spacing:-.03em;color:var(--p);margin-bottom:30px}
.crow{display:flex;gap:20px;align-items:center;margin-bottom:24px}.crow small{display:block;font-size:17px;opacity:.8}.crow b{font-size:clamp(18px,3vw,26px);font-weight:500;word-break:break-word}
.ico{flex:0 0 68px;height:68px;border-radius:20px;background:#e2d8f1;display:grid;place-items:center}.ico svg{width:30px;height:30px;stroke:var(--p);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:820px){.cwrap{grid-template-columns:1fr}}
/* FLOATING WHATSAPP */
.wa{position:fixed;right:18px;bottom:18px;z-index:18;width:62px;height:62px;border-radius:50%;background:var(--p);border:3px solid #fff;display:grid;place-items:center;box-shadow:0 6px 20px rgba(26,8,51,.3);transition:transform .3s}
.wa:hover{transform:scale(1.08)}.wa svg{width:32px;height:32px;stroke:var(--lime);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* WHATSAPP: real logo, green */
.wa{background:#25d366;border:3px solid #fff}.wa svg{fill:#fff;stroke:none;width:34px;height:34px}
/* STATS */
.stats{background:var(--p);color:var(--lime);border-radius:28px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:clamp(30px,5vw,64px) clamp(20px,4vw,56px)}
.stats b{display:block;font:700 clamp(36px,7vw,96px)/1 var(--f2);letter-spacing:-.04em}.stats span{display:block;margin-top:10px;font-size:clamp(13px,1.6vw,18px);color:#fff}
@media(max-width:820px){.stats{grid-template-columns:1fr;text-align:left}}
/* REVIEWS */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;align-items:start}.reviews figure:nth-child(2){margin-top:60px}
.reviews figure{background:#fbf9ff;border-radius:24px;padding:32px}.stars{color:var(--p);letter-spacing:4px;margin-bottom:16px}
.reviews blockquote{font:500 clamp(18px,2vw,24px)/1.35 var(--f2);letter-spacing:-.01em;margin-bottom:24px}
.reviews figcaption b{display:block}.reviews figcaption span{opacity:.7;font-size:14px}
@media(max-width:820px){.reviews{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;margin:0 calc(var(--pad)*-1);padding:0 var(--pad)}.reviews figure{flex:0 0 84%;scroll-snap-align:start;margin-top:0!important}}
/* CTA BAND (all pages) */
.ctaband{background:var(--p);color:#fff;margin:clamp(80px,12vw,170px) 0 0;padding:clamp(60px,9vw,130px) var(--pad);display:flex;flex-direction:column;align-items:flex-start;gap:40px}
.ctaband h2{font:700 clamp(34px,6.5vw,96px)/1 var(--f2);letter-spacing:-.04em;max-width:16ch}
.btn-lime{background:var(--lime);color:var(--ink);padding:20px 38px;border-radius:99px;font-weight:500;font-size:18px;transition:transform .3s}.btn-lime:hover{transform:translateY(-3px)}
.ctaband+footer{margin-top:0;padding-top:var(--pad)}

/* LOGO-ONLY HEADER */
.brand{display:block}.brand img{height:38px;width:auto}
.fcard p.credit{font-size:12px;letter-spacing:.14em;text-transform:uppercase;opacity:.8}
/* STATS: grid */
.stats{grid-template-columns:repeat(4,1fr)}
@media(max-width:820px){.stats{grid-template-columns:repeat(2,1fr);gap:28px 16px}}
/* REVIEWS: auto-scrolling carousel */
.reviews{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}.reviews::-webkit-scrollbar{display:none}
.reviews figure,.reviews figure:nth-child(2){flex:0 0 min(420px,84%);scroll-snap-align:start;margin-top:0}

.fcard p.credit{font-size:11px;letter-spacing:.06em;text-transform:none;opacity:.75;margin-top:-26px}

/* SERVICE ICONS */
.svc{padding:0}
.si{flex:0 0 auto;width:64px;height:64px;border-radius:18px;background:#e2d8f1;display:grid;place-items:center;transition:background .3s}
.si svg{width:28px;height:28px;stroke:var(--p);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:stroke .3s}
.svc a,.big li{align-items:center;gap:24px}.svc b{flex:1}
.svc a:hover .si,.big li:hover .si{background:var(--p)}.svc a:hover .si svg,.big li:hover .si svg{stroke:var(--lime)}
@media(max-width:820px){.svc a,.big li{display:grid;grid-template-columns:56px 1fr;column-gap:18px;row-gap:4px;align-items:center}
.si{width:56px;height:56px;grid-row:1/3}.svc b{font-size:clamp(24px,7vw,34px)}.svc span{grid-column:2}}

.seemore{display:flex;justify-content:center;margin-top:30px}
.btn-purple{background:var(--p);color:var(--lime);padding:20px 44px;border-radius:99px;font-weight:500;font-size:18px;transition:transform .3s}.btn-purple:hover{transform:translateY(-3px)}

/* FAQ */
.faq .h1{max-width:none;margin-bottom:18px}.faq-intro{opacity:.65;font-size:clamp(18px,2.4vw,26px);line-height:1.4;max-width:30ch;margin-bottom:50px}
.faq details{border-bottom:1px solid #1a083333}.faq summary{display:flex;justify-content:space-between;align-items:center;gap:20px;list-style:none;cursor:pointer;padding:30px 0;font:600 clamp(18px,2.4vw,28px)/1.3 var(--f1)}
.faq summary::-webkit-details-marker{display:none}.faq summary:after{content:"";flex:0 0 auto;border:9px solid transparent;border-top:11px solid var(--p);border-bottom:0;transition:transform .3s}
.faq details[open] summary:after{transform:rotate(180deg)}.faq details p{padding:0 0 30px;max-width:60ch;opacity:.8;animation:faqin .4s ease}
@keyframes faqin{from{opacity:0;transform:translateY(-8px)}}

/* HOME SERVICES: auto-scrolling squares */
.svcrow{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}.svcrow::-webkit-scrollbar{display:none}
.sq{flex:0 0 min(300px,72%);aspect-ratio:1;scroll-snap-align:start;background:#e2d8f1;padding:28px;display:flex;flex-direction:column;justify-content:space-between;transition:background .4s,color .4s}
.sq .si{background:#fbf9ff;width:60px;height:60px}.sq b{display:block;font:700 clamp(22px,2.4vw,28px)/1.1 var(--f2);letter-spacing:-.02em;margin-bottom:8px}.sq span{font-size:15px;opacity:.75}
.sq:hover{background:var(--p);color:var(--lime)}.sq:hover .si svg{stroke:var(--p)}
@media(max-width:820px){.svcrow{margin:0 calc(var(--pad)*-1);padding:0 var(--pad)}}

/* SERVICE SQUARES: rounded, continuous marquee */
.svcrow{overflow:hidden;scroll-snap-type:none}
.svcrow .track{display:flex;width:max-content;animation:marq 45s linear infinite}
.svcrow:hover .track{animation-play-state:paused}
.sq{flex:0 0 auto;width:min(290px,72vw);margin-right:16px;border-radius:28px}
@keyframes marq{to{transform:translateX(-50%)}}
@media(max-width:820px){.svcrow{padding:0}}
@media(prefers-reduced-motion:reduce){.svcrow{overflow-x:auto}.svcrow .track{animation:none}}

/* HOW IT WORKS */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.step{border-top:1px solid #1a083344;padding-top:24px}.step b{display:block;font:700 clamp(48px,7vw,96px)/1 var(--f2);letter-spacing:-.04em;color:var(--p);margin-bottom:20px}
.step h3{font:700 clamp(22px,2.6vw,32px)/1.15 var(--f2);letter-spacing:-.02em;margin-bottom:12px}.step p{opacity:.75;max-width:34ch}.stepcta{margin-top:50px}
@media(max-width:820px){.steps{grid-template-columns:1fr}}
/* MISSION & VISION */
.mv{display:grid;grid-template-columns:1fr 1fr;gap:6vw}.mv>div{border-top:1px solid #1a083344;padding-top:24px}
.mvtext{font:600 clamp(24px,3.4vw,46px)/1.15 var(--f2);letter-spacing:-.025em}
@media(max-width:820px){.mv{grid-template-columns:1fr;gap:50px}}

/* HOW IT WORKS: scroll-driven, steps appear one after another (and hide again when scrolling back) */
.stepscroll{height:200vh;margin-top:clamp(70px,10vw,140px)}
.stepsticky{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;padding:90px var(--pad) 40px}
.stepsticky .h2{margin-bottom:clamp(24px,4vw,50px);max-width:20ch}
.step{opacity:.1;transform:translateY(30px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.step.on{opacity:1;transform:none}
.stepcta{margin-top:clamp(24px,4vw,50px);opacity:0;transition:opacity .6s}.stepcta.on{opacity:1}
@media(max-width:820px){.steps{gap:18px}.step{display:flex;gap:18px;align-items:flex-start;padding-top:16px}.step b{font-size:52px;margin:0;flex:0 0 auto;min-width:76px}.step h3{font-size:21px;margin-bottom:4px}.step p{font-size:15px}}
@media(prefers-reduced-motion:reduce){.stepscroll{height:auto}.stepsticky{position:static;height:auto}.step,.stepcta{opacity:1;transform:none}}
/* MISSION & VISION: rounded squares */
.mv{gap:24px}
.mv>div{border-top:0;aspect-ratio:1;border-radius:32px;padding:clamp(24px,4vw,56px);display:flex;flex-direction:column;justify-content:space-between;background:#e2d8f1}
.mv>div:nth-child(2){background:var(--p);color:var(--lime)}
.mv .lab{margin:0}.mvtext{font-size:clamp(21px,2.8vw,38px)}
@media(max-width:820px){.mv{gap:20px}}

/* MV: icon on top, text at bottom; auto height on mobile so nothing feels empty */
.mv .si{width:72px;height:72px;background:var(--p);flex:0 0 auto}.mv .si svg{width:32px;height:32px;stroke:var(--lime)}
.mv>div:nth-child(2) .si{background:var(--lime)}.mv>div:nth-child(2) .si svg{stroke:var(--p)}
.mv .lab{margin-bottom:14px}
@media(max-width:820px){.mv>div{aspect-ratio:auto;gap:44px;justify-content:flex-start;padding:30px}.mvtext{font-size:clamp(22px,6vw,28px)}}

/* HERO v3: dark, centred, social-proof row, highlighted headline */
.hero{background:#130626;color:#fff;min-height:100svh;justify-content:center;align-items:center;text-align:center;gap:28px;padding:130px var(--pad) 70px;overflow:visible}
.hero:before{display:none}
.hero>*{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}.hero>:nth-child(2){animation-delay:.1s}.hero>:nth-child(3){animation-delay:.2s}.hero>:nth-child(4){animation-delay:.3s}
@keyframes rise{from{opacity:0;transform:translateY(24px)}}
.proof{display:flex;align-items:center;gap:18px;text-align:left}
.avs{display:flex}.avs img{width:56px;height:56px;border-radius:16px;object-fit:cover;border:3px solid #130626;margin-left:-16px}.avs img:first-child{margin-left:0}
.rate{display:flex;flex-direction:column;gap:2px;font-size:clamp(15px,2.2vw,19px);color:rgba(255,255,255,.7)}.stars{color:var(--lime);font-size:24px;letter-spacing:3px;line-height:1}
.hero h1{font:700 clamp(42px,11.5vw,124px)/1.02 var(--f2);letter-spacing:-.045em;max-width:13ch;margin:0}
.hero h1 em{display:inline;font:inherit;letter-spacing:inherit;color:var(--lime)}
.lead{max-width:40ch;font-size:clamp(17px,2.4vw,22px);line-height:1.5;color:rgba(255,255,255,.7)}.lead b{color:rgba(255,255,255,.95);font-weight:600}
.hero .pills{margin-top:12px}
.pill.fill{background:var(--lime);color:var(--ink)}.pill.fill:hover{background:#fff}
.pill.ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.4)}.pill.ghost:hover{background:#fff;color:var(--ink)}
@media(prefers-reduced-motion:reduce){.hero>*{animation:none}}

/* message box: not resizable */
.form textarea{resize:none}

/* contact info: social row */
.cfollow{margin-top:34px;padding-top:28px;border-top:1px solid #1a083322}.cfollow small{display:block;font-size:17px;opacity:.8;margin-bottom:14px}
.cfollow .social{justify-content:flex-start}

/* contact page footer has no icons: pull credit up under copyright */
body:has(.cwrap) .fcard{gap:16px}body:has(.cwrap) .fcard p.credit{margin-top:0}

/* v2: bolder hero buttons */
.pill{font-weight:600}

/* v2: desktop nav — links sit on the right, next to the CTA */
@media(min-width:821px){.nav .links{margin-left:auto;margin-right:28px}}

/* v2: stats card — cleaner grid with hairline dividers, numbers lead, labels quieter */
.stats{gap:0;padding:clamp(6px,1.5vw,20px) clamp(20px,4vw,56px)}
.stats>div{padding:28px 0}
.stats b{font-size:clamp(46px,7vw,96px);font-variant-numeric:tabular-nums;min-width:2ch}
.stats span{margin-top:8px;line-height:1.3;color:rgba(255,255,255,.85);font-size:clamp(14px,1.6vw,18px)}
@media(max-width:820px){
.stats{grid-template-columns:repeat(2,1fr)}
.stats>div:nth-child(odd){padding-right:14px}
.stats>div:nth-child(even){padding-left:20px;border-left:1px solid rgba(200,255,0,.25)}
.stats>div:nth-child(n+3){border-top:1px solid rgba(200,255,0,.25)}
}
@media(min-width:821px){
.stats>div+div{border-left:1px solid rgba(200,255,0,.25);padding-left:clamp(20px,3vw,44px)}
.stats>div:not(:last-child){padding-right:clamp(12px,2vw,28px)}
}

/* v4: DESKTOP polish (mobile untouched — everything below is >=821px) */
@media(min-width:1400px){:root{--pad:calc((100vw - 1320px)/2)}}
@media(min-width:821px){
/* tighter vertical rhythm */
.sec{padding-top:clamp(80px,8vw,130px)}
main>.sec:first-child{padding-top:150px}
/* hero: wider headline (2 lines), wider lead, tidy proof row */
.hero h1{max-width:17ch}
.hero .lead{max-width:640px;font-size:20px}
.hero .pills{max-width:520px}
.rate span{margin:0}
.proof{gap:20px}
/* selected work: clean even grid instead of staggered gaps */
.works{grid-template-columns:repeat(3,1fr);gap:56px 32px}
.works .proj,.works .p0,.works .p1,.works .p2,.works .p3{grid-column:auto;margin-top:0}
.works .proj .img,.works .p0 .img,.works .p3 .img{aspect-ratio:4/5}
.filters+.works{grid-template-columns:repeat(4,1fr)}
.proj h3{font-size:20px}
/* reviews: equal-height cards, readable stars on light cards */
.reviews{align-items:stretch}
.reviews figure{display:flex;flex-direction:column;justify-content:space-between}
.reviews .stars{color:var(--p)}
/* about / services headings */
main>.sec:first-child .h1.split{max-width:18ch}
.svc.big{margin-top:36px}
/* contact: balance the two columns */
.cimg{aspect-ratio:16/10}
.form input,.form select,.form textarea{font-size:17px}
}
@media(min-width:821px) and (max-width:1199px){.filters+.works{grid-template-columns:repeat(3,1fr)}}

/* v6: HERO BACKGROUND VIDEO (falls back to the image if the video is missing, blocked, or the visitor prefers reduced motion)
   Video files: assets/videos/hero.mp4 (+ optional hero.webm). Poster / fallback image: assets/images/hero.jpg.
   --hero-shade = darkness of the overlay (0 = none, 1 = solid) so the white text stays readable.
   --hero-pos   = which part of the picture/video stays in view (center, top, 30% 50%...). */
.hero{
  --hero-img:url("../assets/images/hero.jpg");
  --hero-shade:.6;
  --hero-pos:center;
  isolation:isolate;
  background:var(--hero-img) var(--hero-pos)/cover no-repeat,#130626;
}
.hero>.herovid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--hero-pos);z-index:-2;animation:none;pointer-events:none}
.hero:before{display:block;content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(rgba(19,6,38,calc(var(--hero-shade) - .15)),rgba(19,6,38,var(--hero-shade)) 55%,rgba(19,6,38,calc(var(--hero-shade) + .25)))}
@media(prefers-reduced-motion:reduce){.hero>.herovid{display:none}}

/* rounded picture corners */
.proj .img,.founder .img,.cimg{border-radius:24px;overflow:hidden}
.proj .img img,.founder .img img,.cimg img{border-radius:inherit}

/* hero social-proof badge: one glass pill, round overlapping avatars, stars + text that never wrap */
.hero .proof{display:inline-flex;align-items:center;gap:14px;padding:7px 20px 7px 8px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);text-align:left;max-width:100%}
.hero .avs{display:flex;flex:0 0 auto}
.hero .avs img{width:40px;height:40px;border-radius:50%;border:2px solid #1d0c3a;margin-left:-12px;object-fit:cover}
.hero .avs img:first-child{margin-left:0}
.hero .rate{display:flex;flex-direction:column;gap:3px;white-space:nowrap;font-size:14px;line-height:1.1;color:rgba(255,255,255,.88)}
.hero .rate .stars{font-size:14px;letter-spacing:2px;line-height:1;color:var(--lime);margin:0}
.hero .rate span:last-child{font-weight:500}
@media(max-width:380px){.hero .rate{font-size:13px}.hero .avs img{width:36px;height:36px}}

/* hero proof line v2: quiet editorial line instead of a badge — no pill, no fake avatars */
.hero .proof{display:flex;justify-content:center;padding:0;gap:0;background:none;border:0;border-radius:0;-webkit-backdrop-filter:none;backdrop-filter:none}
.hero .avs{display:none}
.hero .rate{flex-direction:row;align-items:center;gap:14px;font-size:12px;color:#fff}
.hero .rate .stars{font-size:13px;letter-spacing:3px}
.hero .rate span:last-child{padding-left:14px;border-left:1px solid rgba(255,255,255,.35);text-transform:uppercase;letter-spacing:.14em;font-weight:600;line-height:1.2}
@media(max-width:380px){.hero .rate{gap:10px}.hero .rate .stars{letter-spacing:2px}.hero .rate span:last-child{padding-left:10px;letter-spacing:.08em;font-size:11px}}

/* WORKS page: gallery with names + design viewer (3 pictures, arrows, description) */
.worksdesc{max-width:56ch;margin-top:20px;font-size:clamp(16px,1.6vw,19px);line-height:1.55;opacity:.75}
.works.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:26px 12px;margin-top:40px;margin-bottom:50px}
.gallery .proj{cursor:zoom-in;margin:0}
.gallery .proj h3{font:700 16px/1.25 var(--f2);margin-top:10px}
@media(min-width:821px){.works.gallery{grid-template-columns:repeat(5,1fr);gap:36px 20px;margin-top:56px}.gallery .proj h3{font-size:18px}}
.lb{position:fixed;inset:0;z-index:100;background:#0a0414;color:#fff;display:grid;grid-template-rows:minmax(0,1fr) auto auto;gap:12px;padding:68px 16px 18px}
.lb[hidden]{display:none}
.lb-stage{position:relative;min-height:0;display:flex;align-items:center;justify-content:center}
.lb-stage img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.5);-webkit-user-select:none;user-select:none}
.lb-x{position:absolute;top:max(14px,env(safe-area-inset-top));right:14px;width:46px;height:46px;border-radius:50%;border:0;background:#fff;color:#130626;font:400 30px/1 Arial,sans-serif;cursor:pointer;display:grid;place-items:center;padding:0 0 3px;z-index:2}
.lb-x:hover{background:var(--lime)}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.88);color:#130626;cursor:pointer;display:grid;place-items:center;padding:0;z-index:1}
.lb-nav svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.lb-nav:hover{background:var(--lime)}
.lb-prev{left:6px}.lb-next{right:6px}
.lb-thumbs{display:flex;justify-content:center;gap:10px}
.lb-thumbs button{width:56px;height:56px;padding:0;border-radius:12px;overflow:hidden;border:2px solid transparent;background:none;cursor:pointer;opacity:.6}
.lb-thumbs button.on{border-color:var(--lime);opacity:1}
.lb-thumbs img{width:100%;height:100%;object-fit:cover;display:block}
.lb-cap{max-width:640px;width:100%;margin:0 auto;max-height:26vh;overflow:auto}
.lb-cap h3{font:700 20px/1.2 var(--f2);margin:0 0 6px}
.lb-cap p{margin:0;font-size:15px;line-height:1.5;color:rgba(255,255,255,.8)}
.lb.single .lb-nav,.lb.single .lb-thumbs{display:none}
body.lb-open{overflow:hidden}
@media(min-width:821px){.lb{padding:40px 90px 28px}.lb-x{right:24px;top:24px}.lb-prev{left:-70px}.lb-next{right:-70px}.lb-thumbs button{width:64px;height:64px}.lb-cap{text-align:center}}

/* hero proof: rounded-square overlapping avatars + gold 4.5 stars + grey text
   --u = avatar size; stars and text are sized from it so the two sides are the same height */
.hproof{--u:clamp(32px,9.8vw,50px);display:flex;align-items:center;justify-content:center;gap:calc(var(--u)*.34);flex-wrap:nowrap;text-align:left}
.hp-av{display:flex;flex:0 0 auto}
.hp-av img{width:var(--u);height:var(--u);border-radius:28%;object-fit:cover;border:0;margin-left:calc(var(--u)*-.26);background:#2a1850}
.hp-av img:first-child{margin-left:0}
.hp-rate{display:flex;flex-direction:column;justify-content:center;gap:calc(var(--u)*.08);white-space:nowrap}
.hp-stars{display:flex;gap:calc(var(--u)*.04)}
.hp-stars svg{width:calc(var(--u)*.45);height:calc(var(--u)*.45);fill:#f5a50b;display:block}
.hp-txt{font:500 max(12px,calc(var(--u)*.39))/1.1 var(--f1);color:#a3a3a3}

/* hero proof: transparent "stroke" — each photo is cut away around the next one, so the hero shows through the gap */
.hp-av{--r:calc(var(--u)*.07)}
.hp-av img:not(:last-child){
  -webkit-mask-image:linear-gradient(#000,#000),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' rx='30' fill='%23000'/%3E%3C/svg%3E");
  mask-image:linear-gradient(#000,#000),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' rx='30' fill='%23000'/%3E%3C/svg%3E");
  -webkit-mask-size:100% 100%,calc(var(--u) + var(--r)*2) calc(var(--u) + var(--r)*2);
  mask-size:100% 100%,calc(var(--u) + var(--r)*2) calc(var(--u) + var(--r)*2);
  -webkit-mask-position:0 0,calc(var(--u)*.74 - var(--r)) calc(var(--r)*-1);
  mask-position:0 0,calc(var(--u)*.74 - var(--r)) calc(var(--r)*-1);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-composite:xor;mask-composite:exclude}
.proj[data-images]{cursor:zoom-in}

/* About page: short picture-only hero */
.abanner{background:var(--ink);padding-top:var(--navh)}
.abanner img{display:block;width:100%;height:clamp(200px,32vh,340px);object-fit:cover;object-position:center 40%}
main>.abanner+.sec{padding-top:clamp(60px,7vw,100px)}
main>.abanner+.sec .h1.split{max-width:18ch}

/* ANNOUNCEMENT POPUP (home page) */
.ann{position:fixed;inset:0;z-index:110;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(10,4,20,.7);animation:annIn .35s ease}
.ann[hidden]{display:none}
.ann-box{position:relative;display:inline-block;max-width:92vw;max-height:90vh}
.ann-box img{display:block;width:auto;height:auto;max-width:92vw;max-height:90vh;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.45)}
.ann-x{position:absolute;top:10px;right:10px;width:38px;height:38px;padding:0;border:0;border-radius:50%;background:var(--lime);color:var(--ink);cursor:pointer;display:grid;place-items:center;box-shadow:0 3px 12px rgba(0,0,0,.45)}
.ann-x svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round}
.ann-x:focus-visible{outline:3px solid #fff;outline-offset:2px}
@keyframes annIn{from{opacity:0}to{opacity:1}}

/* Services: request buttons + FAQ */
.svc.big li{position:relative}
.svc.big li .req{display:inline-block;margin-top:10px;padding:8px 14px;border-radius:999px;background:var(--lime);color:var(--ink);font-weight:700;font-size:.85rem;text-decoration:none}
.svc.big li .req:hover{filter:brightness(.95)}
.faq{margin-top:56px;max-width:820px}
.faq h2{margin:0 0 18px}
.faq details{border-top:1px solid rgba(127,127,127,.3);padding:16px 0}
.faq details:last-child{border-bottom:1px solid rgba(127,127,127,.3)}
.faq summary{cursor:pointer;font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";font-size:1.3rem;line-height:1}
.faq details[open] summary:after{content:"\2212"}
.faq p{margin:10px 0 0;opacity:.85;line-height:1.6}

/* ---- additions: availability, prices, case studies, before/after, pay, follow, dark mode ---- */
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}
.avail{display:inline-flex;align-items:center;gap:8px;padding:7px 16px;border-radius:99px;font:600 13px var(--f1);border:1px solid currentColor;margin:0 auto 18px}
.avail i{width:8px;height:8px;border-radius:50%;background:currentColor}.avail.open{color:#2ecc71}.avail.busy{color:#f5a50b}.cwrap .avail{margin:0 0 18px}
.price{display:block;font:600 14px var(--f1);color:var(--p);margin-top:6px;font-style:normal}.price:empty{display:none}
.cases{display:grid;gap:clamp(48px,8vw,96px)}.case h2{font:700 clamp(28px,4vw,48px)/1.1 var(--f2);letter-spacing:-.03em;margin-bottom:14px}
.case p{max-width:60ch;margin-bottom:12px}.case p[data-l]:before{content:attr(data-l);display:block;font:600 12px var(--f1);letter-spacing:.16em;text-transform:uppercase;color:var(--p);margin-bottom:4px}.case p:empty{display:none}
.cimgs{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:18px}.cimgs img{height:auto;aspect-ratio:4/5;border-radius:16px}
.bawrap{position:relative;max-width:720px;aspect-ratio:4/5;border-radius:20px;overflow:hidden;margin:18px 0}.bawrap>img{position:absolute;inset:0}.bafront{z-index:1}
.bawrap:after{content:"";position:absolute;z-index:2;top:0;bottom:0;left:var(--x);width:3px;background:#fff;transform:translateX(-50%);pointer-events:none}
.bawrap input{position:absolute;inset:0;z-index:3;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.balab{position:absolute;z-index:2;top:12px;background:rgba(0,0,0,.6);color:#fff;font:600 12px var(--f1);padding:4px 10px;border-radius:99px}.balab.l{left:12px}.balab.r{right:12px}
.ba figcaption{font-size:14px;opacity:.7}
.paywrap{display:grid;place-items:center}.paycard{max-width:640px;background:#fbf9ff;border-radius:28px;padding:clamp(28px,5vw,56px);display:grid;gap:18px;justify-items:start}
.paycard .bank{border-top:1px solid #d9cdee;padding-top:18px}.paycard h3{font:700 18px var(--f2);margin-bottom:6px}.paycard .small{font-size:14px;opacity:.7}
.paylink{display:inline-block;font-size:14px;text-decoration:underline;margin:0 0 8px}
.follow{text-align:center;display:grid;gap:14px;justify-items:center}.follow .pills{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}.follow .pill.ghost{color:var(--ink);border-color:var(--ink)}
.social{flex-wrap:wrap}
.cwrap>div,.cwrap .form{min-width:0}.form input,.form select,.form textarea{width:100%;min-width:0;max-width:100%}
@media(max-width:820px){.big li .price,.big li .req{grid-column:2;justify-self:start}.big li .req{white-space:nowrap;padding:10px 20px}}
.faq summary:after{border:0!important;content:"+"!important;width:auto;height:auto;transform:none!important;font-size:1.5rem;line-height:1;color:var(--p)}
.faq details[open] summary:after{content:"\2212"!important}

[hidden]{display:none!important}

/* ---- v5.4: FAQ-style arrow everywhere, contact pay button ---- */
.faq summary:after{content:""!important;flex:0 0 auto;width:0;height:0;font-size:0;border:9px solid transparent!important;border-top:11px solid var(--p)!important;border-bottom:0!important;transform:none!important;transition:transform .3s}
.faq details[open] summary:after{content:""!important;transform:rotate(180deg)!important}
.paynote{margin-top:28px;display:grid;gap:10px;justify-items:start}.paynote p{font-size:15px;opacity:.75}
.ghostcta{background:transparent;border:1px solid var(--ink);padding:14px 28px;font-size:16px}
.tl{padding-top:0}

/* ===== v7: estimate, brief, review, legal pages ===== */
.legal-links{font-size:14px!important;margin-top:-30px}.legal-links a{text-decoration:underline;text-underline-offset:3px}
.toolrow{display:flex;gap:14px;flex-wrap:wrap;margin:48px 0 0}
.formnote,.tool .small{font-size:14px;opacity:.75;margin-top:6px}.tool .small a,.formnote a{text-decoration:underline}
.tool{padding-top:clamp(40px,6vw,80px)!important}
.toolbox{max-width:760px;margin:0 auto;background:#fbf9ff;border-radius:28px;padding:clamp(22px,4vw,44px);display:grid;gap:16px}
.toolbox .lab{margin:0}.h2s{font:700 clamp(24px,3.4vw,38px)/1.1 var(--f2);letter-spacing:-.03em}
.tform input:not([type=checkbox]):not([type=radio]),.tform select,.tform textarea{background:#fff;border:1px solid #d9cdee;border-radius:20px;padding:18px 22px;font:inherit;outline:0;width:100%}
.tform input:focus,.tform select:focus,.tform textarea:focus{border-color:var(--p)}.tform textarea{resize:vertical}
.tform2{display:grid;gap:14px}.tool .cta{justify-self:start;padding:16px 30px;font-size:16px}.tool .cta[disabled]{opacity:.45;cursor:not-allowed}
.opts{display:flex;flex-wrap:wrap;gap:10px}
.opt,.chip{position:relative;display:inline-flex;align-items:center;gap:8px;border:1px solid #cdbfe8;background:#fff;border-radius:99px;padding:11px 18px;cursor:pointer;font-size:15px;user-select:none;transition:background .2s,color .2s,border-color .2s}
.opt input,.chip input{position:absolute;opacity:0;pointer-events:none}
.opt:has(input:checked),.chip:has(input:checked){background:var(--p);color:var(--lime);border-color:var(--p)}
.opt:has(input:focus-visible),.chip:has(input:focus-visible){outline:2px solid var(--p);outline-offset:2px}
.opt small{opacity:.7}.chipset{display:flex;flex-wrap:wrap;gap:8px}
.chip.sw:before{content:"";width:16px;height:16px;border-radius:50%;background:var(--c);border:1px solid #0003}
.estres{background:var(--p);color:#fff;border-radius:22px;padding:24px 26px;display:grid;gap:6px}.estres small{opacity:.75;text-transform:uppercase;letter-spacing:.1em;font-size:12px}
.estres b{font:700 clamp(26px,5vw,44px)/1.1 var(--f2);letter-spacing:-.03em;color:var(--lime)}.estres p{font-size:14px;opacity:.85}
.bnav{display:flex;gap:12px;flex-wrap:wrap}.err{color:#c0262d;font-size:14px;min-height:1em}
.thumbs{display:flex;gap:10px;flex-wrap:wrap}.thumbs .th{position:relative;width:84px;height:84px;border-radius:14px;overflow:hidden;border:1px solid #d9cdee}
.thumbs .th img{width:100%;height:100%;object-fit:cover}.thumbs .th button{position:absolute;top:3px;right:3px;width:22px;height:22px;border-radius:50%;border:0;background:#000b;color:#fff;cursor:pointer;line-height:1}
.starpick{display:flex;gap:6px}.starpick button{background:none;border:0;font-size:40px;line-height:1;color:#cdbfe8;cursor:pointer;padding:0 2px;transition:transform .15s}
.starpick button.on{color:var(--p)}.starpick button:hover{transform:scale(1.12)}
.done{text-align:left}.done p{max-width:46ch}
.legal{max-width:760px;margin:0 auto}.legal h2{font:700 clamp(20px,2.6vw,26px)/1.2 var(--f2);letter-spacing:-.02em;margin:34px 0 10px;color:var(--p)}
.legal p{margin-bottom:10px;opacity:.9}.legal .small{opacity:.65;font-size:14px}
.reviews figcaption{position:relative}.reviews .rvph{width:46px;height:46px;border-radius:50%;object-fit:cover;float:left;margin-right:12px}
.reviews .rvph[hidden]{display:none}
.bstep{display:grid;gap:16px}.bstep[hidden],.toolbox[hidden]{display:none}.upl{display:block}.upl .cta{display:inline-block}