/* ---------- Tokens ---------- */
html{--acc:#1f7bff;--acci:#ffffff;scroll-behavior:smooth}
html,html[data-theme=dark]{--bg:#0b0b0c;--bg2:#121315;--card:#151619;--fg:#eceef1;--mut:#a0a3a9;--line:rgba(255,255,255,.08);--line2:rgba(255,255,255,.16);--acct:color-mix(in oklch,var(--acc) 70%,#fff);--dot:rgba(255,255,255,.11)}
html[data-theme=light]{--bg:#f4f5f7;--bg2:#e9ebee;--card:#ffffff;--fg:#0e0f12;--mut:#575a61;--line:rgba(0,0,0,.08);--line2:rgba(0,0,0,.16);--acct:color-mix(in oklch,var(--acc) 82%,#000);--dot:rgba(0,0,0,.13)}

:root{--ease:cubic-bezier(.2,.7,.2,1);--display:'Bricolage Grotesque',system-ui,sans-serif;--mono:'JetBrains Mono',ui-monospace,monospace;--sans:'Instrument Sans',system-ui,sans-serif}

/* ---------- Base ---------- */
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);-webkit-font-smoothing:antialiased;transition:background .5s,color .5s;overflow-x:hidden}
a{color:var(--fg);text-decoration:none;transition:color .2s}
a:hover{color:var(--acct)}
::selection{background:var(--acc);color:#fff}
img{display:block;max-width:100%}
.shot{width:100%;height:100%;object-fit:cover;object-position:top center}

/* ---------- Language / breakpoints ---------- */
html[data-lang=en] [data-l=hr],html[data-lang=hr] [data-l=en],html:not([data-lang]) [data-l=hr]{display:none!important}
html[data-lang=en] [data-lb=en],html[data-lang=hr] [data-lb=hr]{background:var(--fg)!important;color:var(--bg)!important}
@media(max-width:860px){[data-desk]{display:none!important}}
@media(min-width:861px){[data-mob]{display:none!important}}

/* ---------- Motion ---------- */
[data-rv]{opacity:0;transform:translateY(36px);transition:opacity 1s var(--ease),transform 1s var(--ease),padding .4s}
[data-rv][data-in]{opacity:1;transform:none}
[data-w]{display:inline-block;transform:translateY(110%);transition:transform 1.1s cubic-bezier(.16,.84,.3,1)}
[data-w][data-in]{transform:none}
html[data-motion=off] *{animation:none!important}
html[data-motion=off] [data-rv],html[data-motion=off] [data-w]{opacity:1;transform:none;transition:none}
html:not(.js) [data-rv],html:not(.js) [data-w]{opacity:1;transform:none}
[data-mag]{transition:transform .3s var(--ease)}
[data-tilt]{transition:transform .5s var(--ease)}

@keyframes drift{to{background-position:96px 96px,96px 96px,24px 24px}}
@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in oklch,var(--acc) 70%,transparent)}100%{box-shadow:0 0 0 12px transparent}}
@keyframes float{50%{transform:translateY(-14px)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes bob{50%{transform:translateY(6px)}}

/* ---------- Shared ---------- */
.wrap{max-width:1240px;margin:0 auto}
.h2{font-family:var(--display);font-weight:700;font-size:clamp(40px,7vw,96px);line-height:.95;letter-spacing:-.04em;margin:0}
.accent-i{color:var(--acct);font-style:italic;font-weight:600}
.sec-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:clamp(48px,7vw,90px)}
.sec-head p{max-width:36ch;color:var(--mut);font-size:17px;line-height:1.55;margin:0}
.btn-acc{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border-radius:999px;background:var(--acc);color:#fff;font-weight:600}
.btn-acc:hover{color:#fff}

/* ---------- Progress bar ---------- */
.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:60;background:var(--acc);transform-origin:0 50%;transform:scaleX(var(--sp,0))}

/* ---------- Header ---------- */
.header{position:fixed;top:0;left:0;right:0;z-index:50;padding:14px clamp(12px,3vw,32px)}
.nav{max-width:1240px;margin:0 auto;display:flex;align-items:center;gap:10px;padding:8px 8px 8px 10px;border-radius:999px;border:1px solid var(--line);background:color-mix(in oklch,var(--bg) 72%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.brand{display:flex;align-items:center;gap:10px;margin-right:auto}
.brand img{width:36px;height:36px;border-radius:50%;border:1px solid var(--line2)}
.brand span{font-family:var(--display);font-weight:700;font-size:18px;letter-spacing:-.02em}
.brand i,.footer-mark i{font-style:normal;color:var(--acc)}
.nav-links{display:flex;gap:2px;font-size:14px;font-weight:500}
.nav-links a{padding:8px 14px;border-radius:999px}
.nav-links a:hover{background:var(--line)}
.lang{display:flex;padding:3px;border:1px solid var(--line);border-radius:999px;font-family:var(--mono);font-size:11px}
.lang button{border:0;background:transparent;color:var(--mut);padding:7px 9px;border-radius:999px;cursor:pointer;font:inherit;transition:background .3s}
.theme-btn{width:38px;height:38px;flex:none;border-radius:50%;border:1px solid var(--line);background:transparent;display:grid;place-items:center;cursor:pointer;transition:transform .6s var(--ease)}
.theme-btn:hover{transform:rotate(180deg)}
.theme-btn span{width:16px;height:16px;border-radius:50%;border:2px solid var(--fg);background:linear-gradient(90deg,var(--fg) 50%,transparent 50%)}
.nav-cta{padding:11px 20px;border-radius:999px;background:var(--acc);color:#fff;font-weight:600;font-size:14px}
.nav-cta:hover{color:#fff}
.menu-btn{width:38px;height:38px;flex:none;border-radius:50%;border:0;background:var(--fg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer}
.menu-btn span{width:14px;height:2px;background:var(--bg)}
.menu{margin:8px auto 0;max-width:1240px;border-radius:24px;border:1px solid var(--line);background:var(--bg2);padding:12px;display:flex;flex-direction:column;font-family:var(--display);font-size:30px;font-weight:600;letter-spacing:-.02em}
.menu[hidden]{display:none}
.menu a{padding:12px 14px}
.menu .menu-cta{padding:16px;margin-top:8px;border-radius:16px;background:var(--acc);color:#fff;font-size:20px;text-align:center}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;padding:130px clamp(20px,4vw,40px) 90px}
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px),radial-gradient(var(--dot) 1.2px,transparent 1.4px);background-size:96px 96px,96px 96px,24px 24px;animation:drift 18s linear infinite;-webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 30%,transparent 80%);mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 30%,transparent 80%)}
.hero-glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(560px circle at var(--mx,72%) var(--my,35%),color-mix(in oklch,var(--acc) 26%,transparent),transparent 65%)}
.hero-orbit{position:absolute;right:-140px;top:12%;width:clamp(260px,36vw,500px);aspect-ratio:1;border-radius:50%;border:1px dashed var(--line2);animation:spin 60s linear infinite;pointer-events:none}
.hero-orbit::before{content:"";position:absolute;top:-8px;left:50%;width:16px;height:16px;border-radius:4px;transform:rotate(-12deg);background:var(--acc)}
.hero-inner{position:relative;max-width:1240px;width:100%;margin:0 auto}
.badge{display:inline-flex;align-items:center;gap:10px;padding:8px 14px 8px 10px;border:1px solid var(--line2);border-radius:999px;font-family:var(--mono);font-size:12px;color:var(--mut);background:color-mix(in oklch,var(--bg) 70%,transparent)}
.badge-dot{width:8px;height:8px;border-radius:50%;background:var(--acc);animation:pulse 1.8s infinite}
.hero h1{font-family:var(--display);font-weight:700;font-size:clamp(46px,9.2vw,140px);line-height:.93;letter-spacing:-.045em;margin:28px 0 0;max-width:12ch}
.wm{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.07em}
.hero-foot{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:32px;margin-top:40px}
.hero-foot p{font-size:clamp(17px,1.6vw,21px);line-height:1.5;color:var(--mut);max-width:36ch;margin:0;text-wrap:pretty}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px}
.btn-solid,.btn-ghost{padding:18px 28px;border-radius:999px;font-weight:600;font-size:16px}
.btn-solid{display:flex;align-items:center;gap:10px;background:var(--fg);color:var(--bg)}
.btn-solid:hover{color:var(--bg)}
.btn-solid .bob{display:inline-block;animation:bob 1.6s ease-in-out infinite}
.btn-ghost{border:1px solid var(--line2);transition:transform .3s var(--ease),background .3s}
.btn-ghost:hover{background:var(--line)}

/* ---------- Marquee ---------- */
.marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;padding:22px 0;background:var(--bg2)}
.marquee-track{display:flex;width:max-content;animation:marquee 40s linear infinite;font-family:var(--display);font-size:clamp(22px,3vw,36px);font-weight:600;letter-spacing:-.02em;white-space:nowrap}
.marquee-item{display:flex;align-items:center;gap:32px;padding-right:32px}
.marquee-item::after{content:"";width:12px;height:12px;border-radius:3px;transform:rotate(-12deg);background:var(--acc)}

/* ---------- Work ---------- */
.work{padding:clamp(90px,12vw,160px) clamp(16px,4vw,40px) 40px}
.feature{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));gap:clamp(48px,5vw,72px);align-items:center;padding:clamp(22px,4vw,56px);border-radius:32px;background:var(--card);border:1px solid var(--line);margin-bottom:28px}
.feature-media{position:relative;margin-bottom:6%}
.feature-media.cms{margin-bottom:8%}
.browser{border-radius:16px;overflow:hidden;border:1px solid var(--line2);background:var(--bg2);box-shadow:0 40px 80px -30px rgba(0,0,0,.45)}
.browser-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;border-bottom:1px solid var(--line)}
.browser-bar i{width:9px;height:9px;border-radius:50%;background:var(--line2)}
.browser-bar span{margin-left:10px;font-family:var(--mono);font-size:11px;color:var(--mut)}
.ratio-desk{aspect-ratio:1308/945}
.phone{aspect-ratio:9/19;border-radius:22px;border:5px solid var(--fg);overflow:hidden;background:var(--bg2)}
.feature-phone{position:absolute;right:-3%;bottom:-12%;width:26%;box-shadow:0 30px 60px -20px rgba(0,0,0,.5);animation:float 6s ease-in-out infinite}
.feature-cms{position:absolute;right:-3%;bottom:-14%;width:44%;border-radius:12px;overflow:hidden;border:1px solid var(--line2);background:var(--card);box-shadow:0 30px 60px -20px rgba(0,0,0,.5);animation:float 7s ease-in-out infinite}
.feature-cms-bar{display:flex;align-items:center;gap:6px;padding:7px 10px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:10px;color:var(--acct)}
.feature-cms-bar::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--acc)}
.kicker{display:flex;align-items:center;gap:14px;font-family:var(--mono);font-size:12px;color:var(--mut)}
.kicker b{font-weight:400;color:var(--acct)}
.kicker hr{height:1px;width:40px;margin:0;border:0;background:var(--line2)}
.feature h3{font-family:var(--display);font-weight:700;font-size:clamp(34px,4.6vw,60px);line-height:1;letter-spacing:-.035em;margin:18px 0 16px}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px;font-size:13px}
.tags>span{padding:6px 12px;border-radius:999px;border:1px solid var(--line2)}
.feature-desc{color:var(--mut);font-size:17px;line-height:1.6;margin:0 0 24px;max-width:46ch;text-wrap:pretty}
.bullets{display:grid;gap:10px;margin:0 0 30px;padding:0;list-style:none;font-size:15px}
.bullets li{display:flex;gap:12px;align-items:center}
.bullets li::before{content:"";flex:none;width:8px;height:8px;border-radius:2px;background:var(--acc)}

.apps-head{display:flex;align-items:center;gap:16px;margin:clamp(64px,8vw,110px) 0 28px}
.apps-head h3{font-family:var(--display);font-weight:700;font-size:clamp(28px,3.4vw,44px);letter-spacing:-.03em;margin:0}
.apps-head .rule{flex:1;height:1px;background:var(--line2)}
.apps-head .count{font-family:var(--mono);font-size:12px;color:var(--mut)}
.apps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:28px}
.app{border-radius:32px;background:var(--card);border:1px solid var(--line);padding:clamp(22px,3.4vw,40px);overflow:hidden;display:flex;flex-direction:column}
.app-stage{display:flex;justify-content:center;gap:16px;padding:32px 0 40px;border-radius:22px;background:radial-gradient(circle at 50% 75%,color-mix(in oklch,var(--acc) 30%,transparent),transparent 65%),var(--bg2);margin-bottom:28px}
.app-stage .phone{width:38%;background:var(--bg)}
.tilt-l{transform:translateY(24px) rotate(-4deg)}
.tilt-r{transform:translateY(24px) rotate(4deg)}
.float-6{animation:float 6s ease-in-out infinite}
.float-65{animation:float 6.5s ease-in-out infinite}
.app-kicker{font-family:var(--mono);font-size:12px;color:var(--acct)}
.app h4{font-family:var(--display);font-weight:700;font-size:clamp(28px,3.2vw,40px);letter-spacing:-.03em;margin:12px 0}
.app p{color:var(--mut);font-size:16px;line-height:1.6;margin:0 0 24px;text-wrap:pretty;flex:1}
.app-link{font-weight:600;align-self:flex-start;border-bottom:1px solid currentColor;padding-bottom:3px}

/* ---------- Services ---------- */
.services{padding:clamp(90px,12vw,160px) clamp(20px,4vw,40px)}
.services .h2{margin-bottom:clamp(40px,6vw,72px);max-width:14ch}
.svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));column-gap:32px;border-top:1px solid var(--line2)}
.svc{padding:30px 0 36px;border-bottom:1px solid var(--line2);display:flex;flex-direction:column;gap:12px}
.svc:hover{padding-left:14px}
.num{font-family:var(--mono);font-size:12px;color:var(--acct)}
.svc h3{font-family:var(--display);font-weight:600;font-size:clamp(23px,2.2vw,28px);letter-spacing:-.025em;margin:0}
.svc p{margin:0;color:var(--mut);font-size:15px;line-height:1.6;max-width:34ch}

/* ---------- Process ---------- */
.process{padding:clamp(90px,12vw,160px) clamp(20px,4vw,40px);background:var(--fg);color:var(--bg);border-radius:clamp(28px,4vw,48px);margin:0 clamp(8px,1.5vw,20px)}
.process .sec-head p{max-width:34ch;color:inherit;opacity:.75}
.proc-line{position:relative;height:2px;background:color-mix(in oklch,var(--bg) 18%,transparent);margin-bottom:36px}
.proc-line::after{content:"";position:absolute;inset:0;background:var(--acc);transform-origin:0 50%;transform:scaleX(var(--pp,0))}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:40px}
.step{display:flex;flex-direction:column;gap:14px}
.step-n{font-family:var(--display);font-size:64px;font-weight:700;line-height:1;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.5px var(--bg)}
.step h3{font-family:var(--display);font-weight:600;font-size:26px;letter-spacing:-.02em;margin:0}
.step p{margin:0;font-size:15px;line-height:1.6;opacity:.75}

/* ---------- FAQ ---------- */
.faq{padding:clamp(90px,12vw,160px) clamp(20px,4vw,40px) 0}
.faq-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:clamp(32px,6vw,80px);align-items:start}
.faq-list{border-top:1px solid var(--line2)}
.faq-item{border-bottom:1px solid var(--line2)}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 0;border:0;background:transparent;color:var(--fg);font:600 clamp(18px,1.8vw,21px) var(--sans);text-align:left;cursor:pointer}
.faq-icon{flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--line2);display:grid;place-items:center;font-size:18px;font-weight:400;transition:transform .4s var(--ease),background .3s}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.faq-a>div{overflow:hidden}
.faq-a p{margin:0;padding:0 50px 24px 0;color:var(--mut);font-size:16px;line-height:1.65}
.faq-item.open .faq-a{grid-template-rows:1fr}
.faq-item.open .faq-icon{transform:rotate(45deg);background:var(--acc);color:#fff;border-color:var(--acc)}

/* ---------- Contact ---------- */
.contact{position:relative;padding:clamp(100px,13vw,180px) clamp(16px,4vw,40px) clamp(60px,8vw,100px);overflow:hidden}
.contact-dots{position:absolute;inset:0;background-image:radial-gradient(var(--dot) 1.2px,transparent 1.4px);background-size:24px 24px;-webkit-mask-image:radial-gradient(ellipse 60% 60% at 30% 40%,#000,transparent 75%);mask-image:radial-gradient(ellipse 60% 60% at 30% 40%,#000,transparent 75%)}
.contact-grid{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:clamp(40px,6vw,80px);align-items:start}
.contact h2{font-family:var(--display);font-weight:700;font-size:clamp(44px,7.6vw,112px);line-height:.92;letter-spacing:-.045em;margin:0 0 28px}
.contact-lead{color:var(--mut);font-size:18px;line-height:1.55;max-width:38ch;margin:0 0 36px}
.contact-links{display:flex;flex-direction:column;border-top:1px solid var(--line2)}
.contact-links a{display:flex;justify-content:space-between;gap:16px;padding:20px 0;border-bottom:1px solid var(--line2);font-size:clamp(17px,2vw,22px);font-weight:500}
.form{display:flex;flex-direction:column;gap:14px;padding:clamp(22px,3.4vw,40px);border-radius:28px;background:var(--card);border:1px solid var(--line)}
.form-label{font-family:var(--mono);font-size:12px;color:var(--mut)}
.types{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:6px}
.type{padding:10px 16px;border-radius:999px;border:1px solid var(--line2);background:transparent;color:var(--fg);font:500 14px var(--sans);cursor:pointer;transition:all .25s}
.type[aria-pressed=true]{border-color:var(--acc);background:var(--acc);color:#fff}
.field{padding:16px 18px;border-radius:14px;border:1px solid var(--line2);background:transparent;color:var(--fg);font:16px var(--sans);outline:none;transition:border-color .2s}
.field:focus{border-color:var(--acc)}
textarea.field{resize:vertical}
.submit{margin-top:6px;padding:18px;border-radius:999px;border:0;background:var(--acc);color:#fff;font:600 16px var(--sans);cursor:pointer}
.sent{font-size:14px;color:var(--acct);text-align:center}
.sent[hidden]{display:none}

/* ---------- Footer ---------- */
.footer{padding:0 clamp(20px,4vw,40px) 28px;overflow:hidden}
.footer-mark{font-family:var(--display);font-weight:800;font-size:clamp(64px,19vw,280px);line-height:.85;letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1.5px var(--line2);text-align:center;padding:20px 0 36px;user-select:none}
.footer-mark i{-webkit-text-stroke:0}
.footer-bar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;padding-top:24px;border-top:1px solid var(--line);font-family:var(--mono);font-size:12px;color:var(--mut)}
.footer-bar a{color:var(--mut)}

/* ---------- Sub-pages ---------- */
.nav-links a[aria-current]{background:var(--line)}
.page-hero{position:relative;padding:clamp(140px,16vw,200px) clamp(16px,4vw,40px) clamp(40px,6vw,72px);overflow:hidden}
.page-hero .hero-grid{-webkit-mask-image:radial-gradient(ellipse 70% 80% at 20% 0%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse 70% 80% at 20% 0%,#000 20%,transparent 75%)}
.page-hero .wrap{position:relative}
.page-title{font-family:var(--display);font-weight:700;font-size:clamp(52px,10vw,150px);line-height:.92;letter-spacing:-.05em;margin:24px 0 0}
.page-title sup{font-family:var(--mono);font-size:.14em;font-weight:400;letter-spacing:0;color:var(--acct);vertical-align:top;margin-left:.4em}
.page-lead{max-width:44ch;margin:28px 0 0;color:var(--mut);font-size:clamp(17px,1.6vw,20px);line-height:1.55;text-wrap:pretty}
.back{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;color:var(--mut)}

/* ---------- Work index ---------- */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-top:40px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;border:1px solid var(--line2);background:transparent;color:var(--fg);font:500 14px var(--sans);cursor:pointer;transition:all .25s}
.chip sup{font-family:var(--mono);font-size:10px;color:var(--mut)}
.chip[aria-pressed=true]{background:var(--fg);border-color:var(--fg);color:var(--bg)}
.chip[aria-pressed=true] sup{color:inherit;opacity:.6}
.work-all{padding:0 clamp(16px,4vw,40px) clamp(80px,10vw,140px)}
.work-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,480px),1fr));gap:28px}
.wcard{display:flex;flex-direction:column;border-radius:32px;background:var(--card);border:1px solid var(--line);padding:clamp(18px,2.6vw,28px);transition:border-color .3s}
.wcard[hidden]{display:none}
.wcard:hover{border-color:var(--line2)}
.wcard-media{position:relative;display:block;border-radius:20px;overflow:hidden;background:var(--bg2);aspect-ratio:16/11;margin-bottom:26px}
.wcard-media>.browser{position:absolute;left:7%;right:7%;top:9%;box-shadow:0 30px 60px -24px rgba(0,0,0,.5);transition:transform .6s var(--ease)}
.wcard:hover .wcard-media>.browser{transform:translateY(-8px)}
.wcard-media .app-stage{position:absolute;inset:0;margin:0;padding:28px 0 0;border-radius:0;align-items:flex-start}
.wcard-media .app-stage .phone{width:30%}
.tag-new{position:absolute;top:14px;right:14px;z-index:2;padding:6px 10px;border-radius:999px;background:var(--acc);color:#fff;font-family:var(--mono);font-size:11px}
.wcard .kicker{margin-bottom:14px}
.wcard h2{font-family:var(--display);font-weight:700;font-size:clamp(28px,3.2vw,40px);line-height:1;letter-spacing:-.03em;margin:0 0 14px}
.wcard h2 a:hover{color:var(--fg)}
.wcard p{color:var(--mut);font-size:16px;line-height:1.6;margin:0 0 22px;text-wrap:pretty;flex:1}
.wcard .tags{margin-bottom:24px}
.wcard-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:18px}

/* ---------- Before / after ---------- */
.ba{--pos:50%;position:relative;aspect-ratio:1308/945;overflow:hidden;user-select:none;touch-action:pan-y}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;pointer-events:none}
.ba .ba-before{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ba-line{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;background:#fff;pointer-events:none;box-shadow:0 0 20px rgba(0,0,0,.35)}
.ba-line::after{content:"\2039\00a0\203A";position:absolute;top:50%;left:50%;width:46px;height:46px;transform:translate(-50%,-50%);border-radius:50%;background:#fff;color:#111;display:grid;place-items:center;font:600 18px var(--mono);box-shadow:0 10px 30px -6px rgba(0,0,0,.5)}
.ba input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.ba input:focus-visible~.ba-line::after{outline:3px solid var(--acc);outline-offset:3px}
.ba-tag{position:absolute;top:14px;z-index:1;padding:6px 10px;border-radius:999px;background:rgba(0,0,0,.6);color:#fff;font-family:var(--mono);font-size:11px;pointer-events:none;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.ba-tag.l{left:14px}
.ba-tag.r{right:14px;background:var(--acc)}
.wcard-media .ba{position:absolute;inset:0;aspect-ratio:auto}
.wcard-media .ba-tag.r{right:auto;left:calc(50% + 14px)}

/* ---------- Case study ---------- */
.cs-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:24px;margin:clamp(40px,6vw,64px) 0 0;padding-top:28px;border-top:1px solid var(--line2)}
.cs-meta dt{font-family:var(--mono);font-size:11px;color:var(--mut);margin-bottom:8px;text-transform:uppercase;letter-spacing:.06em}
.cs-meta dd{margin:0;font-size:16px;font-weight:500;line-height:1.45}
.cs-sec{padding:clamp(40px,6vw,80px) clamp(16px,4vw,40px)}
.cs-stage{border-radius:32px;background:var(--card);border:1px solid var(--line);padding:clamp(14px,3vw,36px)}
.cs-stage .browser{box-shadow:0 40px 80px -40px rgba(0,0,0,.5)}
.cs-stage-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin-bottom:clamp(16px,2.4vw,28px)}
.cs-stage-head p{margin:0;font-family:var(--mono);font-size:12px;color:var(--mut)}
.cs-stage-head .filters{margin:0}
.cs-stage [data-panel][hidden]{display:none}
.cs-split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:clamp(32px,6vw,80px);align-items:start}
.cs-split h2{font-family:var(--display);font-weight:700;font-size:clamp(34px,4.6vw,60px);line-height:1;letter-spacing:-.035em;margin:16px 0 0}
.cs-text p{color:var(--mut);font-size:17px;line-height:1.65;margin:0 0 18px;text-wrap:pretty}
.cs-list{display:grid;margin:0;padding:0;list-style:none;border-top:1px solid var(--line2)}
.cs-list li{display:grid;grid-template-columns:44px 1fr;gap:6px 12px;padding:22px 0;border-bottom:1px solid var(--line2)}
.cs-list li>span{grid-row:span 2;font-family:var(--mono);font-size:12px;color:var(--acct);padding-top:5px}
.cs-list b{font-family:var(--display);font-weight:600;font-size:21px;letter-spacing:-.02em}
.cs-list p{margin:0;color:var(--mut);font-size:15px;line-height:1.6}
.cs-list.old li>span{color:var(--mut)}
.cs-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));gap:28px}
.cs-gallery figure{margin:0}
.cs-gallery figcaption{margin-top:14px;font-family:var(--mono);font-size:12px;color:var(--mut)}
.cs-phones{display:flex;justify-content:center;gap:clamp(20px,6vw,80px);padding:clamp(28px,5vw,56px) 0;border-radius:22px;background:radial-gradient(circle at 50% 70%,color-mix(in oklch,var(--acc) 26%,transparent),transparent 65%),var(--bg2)}
.cs-phones figure{margin:0;width:min(40%,260px);display:flex;flex-direction:column;align-items:center;gap:16px}
.cs-phones .phone{width:100%;background:var(--bg)}
.cs-phones figcaption{font-family:var(--mono);font-size:12px;color:var(--mut)}
.cs-phones figure:last-child figcaption{color:var(--acct)}
.cs-next{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:clamp(24px,4vw,48px);border-radius:32px;border:1px solid var(--line2);transition:background .3s}
.cs-next:hover{background:var(--card);color:var(--fg)}
.cs-next small{display:block;font-family:var(--mono);font-size:12px;color:var(--mut);margin-bottom:10px}
.cs-next strong{font-family:var(--display);font-weight:700;font-size:clamp(30px,5vw,64px);letter-spacing:-.04em;line-height:1}
.cs-next .arrow{width:clamp(48px,6vw,64px);aspect-ratio:1;flex:none;border-radius:50%;background:var(--acc);color:#fff;display:grid;place-items:center;font-size:22px;transition:transform .4s var(--ease)}
.cs-next:hover .arrow{transform:translateX(6px)}

/* ---------- CTA band ---------- */
.cta-band{position:relative;overflow:hidden;padding:clamp(80px,10vw,140px) clamp(16px,4vw,40px);text-align:center}
.cta-band h2{position:relative;font-family:var(--display);font-weight:700;font-size:clamp(44px,7vw,104px);line-height:.92;letter-spacing:-.045em;margin:0 auto 32px;max-width:12ch}
.cta-band .contact-dots{-webkit-mask-image:radial-gradient(ellipse 50% 60% at 50% 50%,#000,transparent 75%);mask-image:radial-gradient(ellipse 50% 60% at 50% 50%,#000,transparent 75%)}
.cta-band .hero-ctas{position:relative;justify-content:center}
.all-work{display:flex;justify-content:center;margin-top:clamp(48px,6vw,72px)}
.cs-media .feature-media{margin:0 4% 12% 0}
.cs-media .app-stage{padding:clamp(28px,5vw,56px) 0 clamp(40px,6vw,72px)}
.cs-media .app-stage .phone{width:min(34%,280px)}