/* Vook v10: reelo-led design system. Manrope, black/white/grey only, alternating full-bleed sections. */
:root{--bg:#f2f2f2;--card:#fff;--ink:#000;--ink2:#333;--mute:#6b6b6b;--mute2:#9a9a9a;--line:rgba(0,0,0,.08);--fh:'Manrope',system-ui,sans-serif;--fb:'Manrope',system-ui,sans-serif;--w:1080px;--r:24px}
html,body.vk{background:#fff}
body.vk{font:500 16px/1.6 var(--fb);color:var(--ink);letter-spacing:0}
.wrap,.vk .e-con.wrap{--width:min(var(--w),calc(100% - 40px))}
.wrap{width:min(var(--w),calc(100% - 40px))}
/* type */
.vk h1,.vk h2,.vk h3{font-family:var(--fh);font-weight:700;color:var(--ink)}
.vk h1 em,.vk h2 em{font-family:inherit;font-style:normal;font-weight:inherit;letter-spacing:inherit;color:inherit;background:none!important;padding:0}
.head{margin-bottom:56px}
.head h2{font-size:clamp(34px,4.3vw,56px);line-height:1.1;letter-spacing:-.05em;max-width:640px;margin-top:18px}
.head p{font-size:17px;font-weight:500;color:var(--mute);margin-top:16px}
.eyebrow{display:inline-flex;align-items:center;gap:7px;background:#fff;border:0;color:var(--ink2);font:500 14px/1 var(--fb);padding:8px 14px 8px 11px;border-radius:999px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.eyebrow:before{display:none}
.eyebrow svg.i{width:14px;height:14px;stroke-width:2}
.wbg .eyebrow{background:var(--bg);box-shadow:none}
.sw-word{will-change:auto}
/* sections alternate */
.sec{padding:120px 0}
.sec.gbg{background:var(--bg)}
.sec.wbg{background:#fff}
#why,#pricing,#faq,#video,#cases{background:#fff}
#reviews,#audit{background:var(--bg)}
#pricing:before,#results:before{display:none}
/* buttons */
.cta,.nbtn,.vk .vk-cta .elementor-button,.sbtn{height:48px;padding:0 26px!important;border-radius:999px;background:#000;color:#fff;font:500 17px/1 var(--fb);letter-spacing:-.02em;border:0}
.cta.ghost,.vk .vk-cta.vk-ghost .elementor-button{background:#fff;color:#000;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.gbg .cta.ghost,.gbg .vk .vk-cta.vk-ghost .elementor-button{box-shadow:none}
.cta:hover,.vk .vk-cta .elementor-button:hover,.sbtn:hover{background:#222}
.cta.ghost:hover,.vk .vk-cta.vk-ghost .elementor-button:hover{background:#f5f5f5}
/* nav: narrow centered pill */
.nav{width:min(720px,calc(100% - 24px));height:56px;background:rgba(255,255,255,.85);border-radius:16px;padding:0 8px 0 18px;box-shadow:0 1px 3px rgba(0,0,0,.05)}
.nav ul{gap:22px;font-size:14.5px}
.nav ul a{color:#555}
.nbtn{height:40px;font-size:14.5px;padding:0 16px!important;border-radius:11px}
.logo{font:700 22px/1 var(--fh);letter-spacing:-.04em}
.mark{background:#000;border-radius:8px;width:28px;height:28px;font-size:16px}
@media(max-width:1080px){.nav{width:calc(100% - 24px)}}

/* ---------- hero (reelo) ---------- */
.hero10{padding:150px 0 0;text-align:center;background:linear-gradient(180deg,#f2f2f2 0%,#f2f2f2 70%,#fff 100%);overflow:hidden;position:relative}
.hero10:before,.hero10:after{display:none}
.hero10 .col,.vk .hero10 .e-con.col{display:flex;flex-direction:column;align-items:center;max-width:760px;margin:0 auto}
.hero10 .pill{background:#fff;border:0;box-shadow:none;gap:8px;padding:6px 14px 6px 6px;font:500 14px/1 var(--fb);color:#333}
.yt{width:24px;height:24px;border-radius:7px;background:#ff2d2d;color:#fff;display:grid;place-items:center}
.yt svg.i{width:12px;height:12px}
.hero10 h1{font-size:clamp(42px,5.4vw,72px);line-height:1.08;letter-spacing:-.055em;margin-top:22px}
.hero10 .sub{font-size:18px;font-weight:500;color:#444;max-width:520px;margin:20px auto 0;line-height:1.5}
.hero10 .ctas{margin-top:30px;justify-content:center}
.fan{position:relative;height:520px;margin-top:64px;perspective:1600px}
.ph{position:absolute;bottom:-70px;width:250px;aspect-ratio:9/19;border-radius:40px;background:#111;padding:8px;box-shadow:0 30px 60px -30px rgba(0,0,0,.35)}
.ph img{width:100%;height:100%;object-fit:cover;border-radius:33px}
.ph-c{left:50%;width:270px;transform:translateX(-50%);z-index:3}
.ph-l{left:calc(50% - 400px);transform:rotateY(28deg) rotateZ(-4deg) scale(.92);transform-origin:right bottom;z-index:2;bottom:-110px}
.ph-r{left:calc(50% + 150px);transform:rotateY(-28deg) rotateZ(4deg) scale(.92);transform-origin:left bottom;z-index:2;bottom:-110px}
.fan:after{content:'';position:absolute;left:0;right:0;bottom:0;height:200px;background:linear-gradient(180deg,rgba(255,255,255,0),#fff 85%);z-index:4;pointer-events:none}
.chip{position:absolute;z-index:5;display:inline-flex;align-items:center;gap:8px;background:#fff;border-radius:999px;padding:9px 16px 9px 12px;font:600 15px/1 var(--fb);box-shadow:0 10px 30px -10px rgba(0,0,0,.18);white-space:nowrap}
.chip svg.i{width:17px;height:17px}
.chip.c1{left:calc(50% - 300px);top:40px}.chip.c1 svg.i{color:#ff3b5c;fill:#ff3b5c}
.chip.c2{left:calc(50% + 150px);top:90px}.chip.c2 svg.i{color:#3b82f6}
.js .hero10 .ph{animation:phin 1.2s var(--eo) both}
.js .hero10 .ph-c{animation-name:phinc;animation-delay:.25s}
.js .hero10 .ph-l,.js .hero10 .ph-r{animation-delay:.4s}
@keyframes phinc{from{opacity:0;transform:translate(-50%,80px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes phin{from{opacity:0;translate:0 80px}to{opacity:1;translate:0 0}}
.js .hero10 .chip{animation:h4in .9s var(--eo) both}.js .hero10 .chip.c1{animation-delay:.8s}.js .hero10 .chip.c2{animation-delay:.95s}
.js .hero10 .r{animation:h4in 1s var(--eo) both}
.js .hero10 h1.r{animation-delay:.06s}.js .hero10 .sub.r{animation-delay:.12s}.js .hero10 .ctas.r{animation-delay:.18s}
.spills{position:relative;background:#fff;padding:26px 0 30px;overflow:hidden}
.spills:before,.spills:after{content:'';position:absolute;top:0;bottom:0;width:160px;z-index:2;pointer-events:none}
.spills:before{left:0;background:linear-gradient(90deg,#fff,rgba(255,255,255,0))}
.spills:after{right:0;background:linear-gradient(270deg,#fff,rgba(255,255,255,0))}
.spills .track{gap:12px;animation-duration:40s}
.sp{display:inline-flex;align-items:center;gap:9px;background:var(--bg);border-radius:999px;padding:10px 18px 10px 12px;font:600 16px/1 var(--fb);letter-spacing:-.02em;white-space:nowrap}
.sp svg.i{width:18px;height:18px}

/* ---------- compare (why) ---------- */
.cc{background:var(--bg);border-radius:24px;padding:32px 28px}
.cc h3{font-size:24px;letter-spacing:-.04em}
.cc .cs{font-weight:500}
.cc.win{background:#000;transform:none}
.cc.win:before{display:none}
.cc .xx{background:#fff;color:#999}
.cc .ck,.pc .ck,.lside .ck{background:transparent;color:#000;padding:0}
.cc.win .ck,.pc.pop .ck,.lside .ck{color:#fff}
.badge{background:#fff;color:#000;font:600 12px/1 var(--fb);text-transform:none;letter-spacing:0}

/* ---------- services grid ---------- */
.sgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.sc{background:var(--bg);border-radius:24px;padding:28px;min-height:250px;display:flex;flex-direction:column;position:relative}
.sc.wide{grid-column:span 2}
.sic{width:46px;height:46px;border-radius:50%;background:#fff;display:grid;place-items:center}
.sic svg.i{width:20px;height:20px}
.stags{position:absolute;right:24px;top:24px;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.stags span{background:#fff;border-radius:999px;padding:7px 14px;font-size:14px;font-weight:500}
.stags .dk{background:#000;color:#fff}
.sc h3{font-size:22px;letter-spacing:-.04em;margin-top:auto;padding-top:40px}
.sc p{color:#555;font-size:15.5px;margin-top:10px;max-width:440px}

/* ---------- process (reelo 2x2) ---------- */
.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pcard{background:#fff;border-radius:24px;padding:14px 14px 30px}
.ptag{display:inline-flex;align-items:center;gap:6px;background:var(--bg);border-radius:999px;padding:6px 12px 6px 9px;font-size:13.5px;font-weight:500;margin:4px 0 12px 4px}
.ptag svg.i{width:14px;height:14px;fill:#000}
.pvis{background:var(--bg);border-radius:16px;height:250px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:20px}
.pcard h3{font-size:24px;letter-spacing:-.04em;margin:26px 16px 0}
.pcard p{color:#555;margin:10px 16px 0;font-size:15.5px}
.ui{width:100%}
.chat{display:flex;gap:16px;align-items:center}
.cam{position:relative;width:46%;aspect-ratio:4/3;border-radius:12px;overflow:hidden;border:3px solid #fff}
.cam img{width:100%;height:100%;object-fit:cover}
.cam span{position:absolute;left:8px;bottom:8px;background:#fff;border-radius:999px;padding:4px 9px;font-size:11px;font-weight:600}
.bub{flex:1;display:flex;flex-direction:column;gap:8px}
.bub i{font-style:normal;background:#fff;border-radius:999px;padding:7px 12px;font-size:12.5px;align-self:flex-start;box-shadow:0 2px 8px rgba(0,0,0,.05)}
.bub i.me{align-self:flex-end;background:#000;color:#fff}
.board{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.board span{background:#fff;border-radius:12px;padding:14px;font-size:13px;font-weight:600}
.board .ok:before{content:'';display:inline-block;width:8px;height:8px;border-radius:50%;background:#22c55e;margin-right:8px}
.board .no{color:#999;text-decoration:line-through}
.board .no:before{content:'';display:inline-block;width:8px;height:8px;border-radius:50%;background:#ef4444;margin-right:8px}
.tl{position:relative;display:flex;flex-direction:column;gap:10px}
.tl .t{display:block;border-radius:8px;padding:9px 12px;font-size:13px;font-weight:600}
.tl .a{background:#f2b8e8;width:70%;margin-left:20%}.tl .b{background:#9fd0ff;width:55%}.tl .c{background:#c9f7c9;width:85%;margin-left:8%}
.tl .head{position:absolute;left:38%;top:-10px;bottom:-10px;width:2px;background:#000}
.tl .head:before{content:'';position:absolute;top:-6px;left:-5px;width:12px;height:12px;border-radius:50%;background:#000}
.js .pcard.in .tl .head{animation:scrub 4s ease-in-out infinite alternate}
@keyframes scrub{from{transform:translateX(-80px)}to{transform:translateX(120px)}}
.kpis3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.kpis3 span{background:#fff;border-radius:12px;padding:14px 10px;text-align:center;font-size:12.5px;color:#666}
.kpis3 b{display:block;font-size:22px;color:#000;letter-spacing:-.04em}
.kpis3 .win{grid-column:1/-1;background:#000;color:#fff;font-weight:600}

/* ---------- work (reelo cards) ---------- */
.wk{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.wkc{position:relative;aspect-ratio:3/5;border-radius:20px;overflow:hidden;background:#ddd}
.wkc>img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--eo)}
@media(hover:hover){.wkc:hover>img{transform:scale(1.04)}}
.wkm{position:absolute;left:16px;bottom:16px;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.wkm span{display:inline-flex;align-items:center;gap:7px;background:#fff;border-radius:999px;padding:6px 12px 6px 6px;font-size:14px;font-weight:600}
.wkm .who img{width:22px;height:22px;border-radius:50%;object-fit:cover}
.wkm .res{padding-left:10px}
.wkm .res svg.i{width:15px;height:15px;color:#ff3b5c;fill:#ff3b5c}
.wkmore{display:flex;justify-content:center;margin-top:40px}

/* ---------- other sections restyled ---------- */
.case{background:var(--bg)!important;border-radius:28px}
.case .cm div{background:#fff}
.cq{background:#fff}
.cat,.cbody .cn{font-family:var(--fb);font-style:normal;font-weight:600;font-size:13px}
.pc{background:transparent;border-radius:24px;padding:32px 28px}
.pc.pop{background:#000;transform:translateY(-14px)}
.pc.pop:before{display:none}
.pbtn{background:#000;color:#fff;justify-content:center;padding:0 24px}
.pbtn i{display:none}
.pc.pop .pbtn{background:#fff;color:#000}
.amt b{font:700 48px/1 var(--fh);letter-spacing:-.05em}
.pquote{background:var(--bg)}
.pquote blockquote,.cq,.mini blockquote{font-family:var(--fb);font-style:normal;font-weight:600;font-size:17px;letter-spacing:-.02em}
.rv{background:#fff;border-radius:24px}
.rv blockquote{font-weight:600;color:#111;letter-spacing:-.01em}
.faq details{background:var(--bg);border-radius:18px}
.faq summary{font-weight:600;font-size:18px;letter-spacing:-.02em}
.faq summary i{background:#fff}
.lead{background:#000;border-radius:32px}
.lead:before{display:none}
.sbtn{width:100%}
.lform{border-radius:22px}
.vf input:not([type=checkbox]),.vf select,.vf textarea{background:var(--bg);border:0;border-radius:12px}
.final{background:#000;border-radius:32px}
.final:before{display:none}
.final h2{font-size:clamp(36px,4.6vw,60px);letter-spacing:-.05em}
.vframe,.vk .e-con.vframe{border-radius:28px}
.tabs,.billing{background:var(--bg)}
.wbg .tabs,#pricing .billing{background:var(--bg)}
.lgrid{background:var(--bg)}
.bigword{font-family:var(--fh);font-weight:800}
.ihero{background:var(--bg);padding:170px 0 90px}
.ihero:before{display:none}
.ihero h1{font-size:clamp(40px,5.4vw,72px);letter-spacing:-.055em;line-height:1.08}
.stat{background:var(--bg);border-radius:24px}
.stat b,.kp2 b{font-family:var(--fh);font-weight:700;letter-spacing:-.05em}
.kp2{background:var(--bg)}
.oc{background:#161616}
.progress{background:#000}

@media(max-width:1080px){.sgrid{grid-template-columns:1fr 1fr}.sc.wide{grid-column:span 2}.pgrid{grid-template-columns:1fr}.ph-l{left:calc(50% - 330px)}.ph-r{left:calc(50% + 90px)}}
@media(max-width:720px){
 .sec{padding:84px 0}
 .hero10{padding:120px 0 0}
 .hero10 h1{font-size:clamp(36px,10.5vw,48px)}
 .hero10 .sub{font-size:16px}
 .fan{height:400px;margin-top:44px}
 .ph{width:190px;border-radius:32px;padding:6px}.ph img{border-radius:27px}
 .ph-c{width:200px}
 .ph-l{left:calc(50% - 230px)}.ph-r{left:calc(50% + 40px)}
 .chip{font-size:13px;padding:7px 12px 7px 10px}
 .chip.c1{left:4%;top:20px}.chip.c2{left:auto;right:4%;top:70px}
 .sp{font-size:14px}
 .sgrid{grid-template-columns:1fr}.sc.wide{grid-column:auto}.stags{position:static;flex-direction:row;align-items:flex-start;margin-top:16px}.sc{min-height:0}
 .sc h3{padding-top:28px}
 .wk{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -20px;padding:0 20px;scrollbar-width:none}.wkc{flex:0 0 78%;scroll-snap-align:center}
 .pvis{height:220px}
 .pc.pop{transform:none}
}

.vk .hero10 .ctas,.vk .hero10 .e-con.ctas{margin-top:32px!important}

.fan:after{left:-100vw;right:-100vw}
.hero10{background:linear-gradient(180deg,#f2f2f2 0%,#f2f2f2 55%,#fff 92%)}
.wkmore{width:100%}
.vk .wkmore a.cta{margin:0 auto}

.vk a.pbtn{color:#fff}
.vk .pc.pop a.pbtn{color:#000}

.fan{overflow:hidden}
.fan:after{left:0;right:0;height:240px}
.hero10{background:linear-gradient(180deg,#f2f2f2 0%,#f2f2f2 42%,#fff 78%)}