:root{--black:#070707;--black2:#0b0b0b;--panel:#111;--paper:#f2f2f2;--paper2:#e8e8e8;--ink:#0f0f0f;--muted:#8a8a8a;--muted2:#b9b9b9;--orange:#fd9e22;--orange-deep:#ef7900;--container:85rem;--section-y:clamp(6rem,8vw,8rem);--ease:cubic-bezier(.16,1,.3,1)} *{box-sizing:border-box}html{scroll-behavior:smooth;background:#070707}body{margin:0;font-family:"Instrument Sans",Inter,Arial,sans-serif;background:#070707;color:#f5f5f5;-webkit-font-smoothing:antialiased;overflow-x:hidden}img{max-width:100%;display:block}a{text-decoration:none;color:inherit}button{font:inherit}.container{width:min(calc(100% - 48px),var(--container));margin-inline:auto}.eyebrow{font-size:10px;letter-spacing:.3em;text-transform:uppercase;font-weight:500;color:#a4a4a4;margin:0}.display{font-size:clamp(3.75rem,6vw,6.45rem);line-height:1.01;letter-spacing:-.061em;font-weight:500;margin:0}.h1{font-size:clamp(2.7rem,4.7vw,5rem);line-height:1.02;letter-spacing:-.052em;font-weight:500;margin:0}.h2{font-size:clamp(1.8rem,2.7vw,3rem);line-height:1.08;letter-spacing:-.035em;font-weight:500;margin:0}.copy{font-size:clamp(1rem,1.3vw,1.25rem);line-height:1.55;color:#b8b8b8}.wa{width:20px;height:20px;fill:currentColor;flex:0 0 auto}.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:60px;padding:0 30px;border-radius:14px;font-weight:600;border:1px solid transparent;transition:.35s var(--ease);cursor:pointer}.btn:hover{transform:translateY(-2px)}.btn-orange{background:var(--orange);color:#080808;box-shadow:0 15px 45px rgba(253,158,34,.18)}.btn-orange:hover{box-shadow:0 18px 55px rgba(253,158,34,.32)}.btn-white{background:#fff;color:#080808}.btn-black{background:#090909;color:#fff}.section{padding:clamp(6rem,10vw,10rem) 0}.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}.reveal.in{opacity:1;transform:none} /* custom cursor */ .cursor{position:fixed;width:40px;height:40px;border:1px solid rgba(255,255,255,.55);border-radius:50%;pointer-events:none;z-index:200;transform:translate(-50%,-50%);transition:width .25s var(--ease),height .25s var(--ease),background .25s;mix-blend-mode:difference}.cursor.big{width:62px;height:62px;background:rgba(255,255,255,.08)} /* HERO */ .hero{min-height:100svh;position:relative;isolation:isolate;overflow:hidden;background:#000;border-radius:0 0 42px 42px}.hero-bg{position:absolute;inset:0;z-index:-4;background:url("media/img-6b860ce15e1b48.webp") 74% center/cover no-repeat}.hero-overlay{position:absolute;inset:0;z-index:-3;background:linear-gradient(90deg,rgba(0,0,0,.99) 0%,rgba(0,0,0,.96) 27%,rgba(0,0,0,.83) 44%,rgba(0,0,0,.38) 63%,rgba(0,0,0,.04) 100%)}.hero header{height:146px;display:flex;justify-content:space-between;align-items:flex-start;padding-top:46px}.hero-logo{width:220px}.hero-main{min-height:calc(100svh - 146px);display:flex;align-items:center;padding:28px 0 84px}.hero-copy{width:min(760px,51vw)}.hero .eyebrow{margin-bottom:32px}.hero .display{max-width:11ch}.hero .display em{font-style:italic;font-weight:600;white-space:nowrap;color:var(--orange)}.line-mask{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.04em}.line-mask>span{display:block;animation:heroLine .95s var(--ease) both}.line-mask:nth-child(1)>span{animation-delay:.08s}.line-mask:nth-child(2)>span{animation-delay:.17s}.line-mask:nth-child(3)>span{animation-delay:.26s}.hero-desc{max-width:700px;margin:34px 0 0;color:#d0d0d0;font-size:clamp(1.05rem,1.38vw,1.34rem);line-height:1.5}.hero-actions{margin-top:36px}.hero-proof{margin-top:34px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}.client-logos{display:flex;align-items:center;gap:10px}.client-logo{width:68px;height:68px;border-radius:50%;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);display:grid;place-items:center;flex:0 0 auto}.client-logo img{width:78%;height:78%;object-fit:contain}.client-logo:nth-child(1) img{width:84%;height:84%}.client-logo:nth-child(2) img{width:76%;height:76%}.client-logo:nth-child(3) img{width:64%;height:64%}.hero-proof p{margin:0;max-width:250px;color:#ededed;font-size:15px;line-height:1.24}.header-cta{min-height:62px;border-radius:18px;padding-inline:34px}.header-controls{display:flex;align-items:center;gap:12px;margin-left:auto}.header-langs{display:flex;gap:4px}.header-langs button{min-width:38px;height:36px;padding:0 11px;border-radius:999px;background:rgba(14,14,14,.55);border:1px solid rgba(255,255,255,.14);color:#bcbcbc;font-size:11px;font-weight:600;letter-spacing:.06em;backdrop-filter:blur(10px)}.header-langs button.active{background:#fff;color:#080808;border-color:#fff}.header-instagram{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(255,255,255,.16);background:rgba(14,14,14,.48);backdrop-filter:blur(10px);transition:transform .35s var(--ease),background .3s ease,border-color .3s ease}.header-instagram:hover{transform:translateY(-2px);background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3)}.instagram-icon{width:19px;height:19px;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} /* benefit loop */ .benefit-loop{background:#f2f2f2;padding:12px 0;overflow:hidden;border-bottom:1px solid #d5d5d5}.benefit-track{display:flex;width:max-content;animation:benefit 30s linear infinite}.benefit-group{display:flex;gap:20px;padding-right:20px}.pill{height:42px;padding:0 26px;border-radius:999px;background:#dedede;color:#222;display:flex;align-items:center;white-space:nowrap;font-weight:600;font-size:14px} /* section 02 */ .showcase-loop{background:#070707;padding:var(--section-y) 0;overflow:hidden}.showcase-head{text-align:center;max-width:850px;margin:0 auto 56px}.showcase-head .h1{max-width:18ch;margin-inline:auto}.showcase-head p{font-size:13px;color:#9b9b9b;margin:25px auto 0;max-width:48ch;line-height:1.55}.project-marquee{display:grid;gap:14px;margin-top:25px}.project-row{overflow:hidden}.project-track{display:flex;gap:14px;width:max-content}.project-row.a .project-track{animation:projectsA 38s linear infinite}.project-row.b .project-track{animation:projectsB 42s linear infinite}.project-placeholder{width:300px;height:220px;border-radius:12px;border:1px solid #2a2a2a;background:linear-gradient(135deg,#101010,#171717);position:relative;overflow:hidden}.project-placeholder:after{content:"";position:absolute;inset:14px;border:1px dashed #303030;border-radius:8px} .project-placeholder.has-image{background-size:cover;background-position:center;background-repeat:no-repeat;border-color:#1f1f1f;box-shadow:0 10px 24px rgba(0,0,0,.22)}.project-placeholder.has-image:after{display:none}.project-placeholder.has-image:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(0,0,0,.05) 100%);pointer-events:none} .showcase-cta{display:flex;justify-content:center;margin-top:38px}.cta-shell{background:#0d0d0d;border:1px solid #242424;border-radius:26px;padding:14px;width:min(560px,calc(100% - 40px))}.cta-shell .btn{width:100%;min-height:50px;border-radius:7px} /* section03 */ .objective{background:#070707;padding:var(--section-y) 0}.objective-head{text-align:center;max-width:780px;margin:0 auto 62px}.objective-head .eyebrow{margin-bottom:25px}.circled{position:relative;display:inline-block;padding:0 .08em}.circled:after{content:"";position:absolute;left:-8%;right:-8%;top:-13%;bottom:-18%;border:4px solid #f5f5f5;border-radius:50%;transform:rotate(5deg)}.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.feature-card{min-height:300px;border:1px solid #2c2c2c;border-radius:18px;background:#111;padding:32px;display:flex;flex-direction:column;transition:.4s var(--ease)}.feature-card:hover{transform:translateY(-6px);border-color:#444}.feature-icon{width:45px;height:45px;border-radius:50%;border:1px solid #343434;display:grid;place-items:center;font-size:20px;margin-bottom:32px}.feature-icon img{width:24px;height:24px;object-fit:contain;display:block}.feature-card h3{font-size:24px;margin:0 0 16px;font-weight:500;letter-spacing:-.03em}.feature-card p{margin:0;color:#aaa;line-height:1.55}.feature-arrow{margin-top:auto;align-self:flex-end;color:#777;font-size:24px}.objective .showcase-cta{margin-top:44px} /* section04 */ .cred{background:#070707;padding:var(--section-y) 0}.cred-box{border:1px solid #232323;border-radius:0 0 30px 30px;min-height:380px;padding:58px 60px;display:flex;align-items:flex-start}.cred-title{font-size:clamp(3.4rem,5.7vw,6rem);line-height:.99;letter-spacing:-.06em;font-weight:500;max-width:18ch;margin:0}.cred-cards{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:62px}.cred-card{min-height:128px;border-radius:22px;padding:28px 40px;display:flex;align-items:center;justify-content:space-between;font-size:clamp(1.8rem,2.8vw,3.2rem);letter-spacing:-.045em}.cred-card.dark{background:#111;border:1px solid #2d2d2d;color:#f5f5f5}.cred-card.light{background:#f3f3f3;color:#111}.cred-card .arrow{font-size:34px;font-weight:300} /* section05 */ .practice{background:#f2f2f2;color:#111;padding:var(--section-y) 0}.practice-title{font-size:clamp(3rem,5.3vw,5.4rem);margin:0 0 55px;letter-spacing:-.06em;font-weight:500}.practice-title:before{content:"•";font-size:.6em;margin-right:32px}.practice-grid{display:grid;grid-template-columns:1.03fr 1fr;gap:58px;align-items:start}.practice-visual{min-height:580px;border-radius:26px;background:#fff;padding:26px;position:sticky;top:30px;display:flex;align-items:center;justify-content:center;overflow:hidden}.browser-placeholder{width:100%;height:74%;border-radius:15px;background:#0a0a0a;border:1px solid #333;box-shadow:0 35px 80px rgba(0,0,0,.18);display:flex;align-items:center;justify-content:center;color:#707070;font-size:11px;letter-spacing:.22em;text-transform:uppercase}.visual-caption{position:absolute;left:28px;bottom:25px;color:#fff}.visual-caption small{display:block;font-size:10px;letter-spacing:.18em;color:#aaa;margin-bottom:8px}.visual-caption strong{font-size:23px;font-weight:500}.service-accordion{padding-top:18px}.acc-item{border-bottom:1px solid #ccc}.acc-head{width:100%;display:grid;grid-template-columns:38px 1fr 34px;align-items:center;gap:4px;padding:18px 0;border:0;background:transparent;color:#111;text-align:left;cursor:pointer}.acc-num{font-size:13px;color:#888}.acc-head strong{font-size:24px;font-weight:500;letter-spacing:-.025em}.acc-toggle{width:28px;height:28px;border-radius:50%;background:#0b0b0b;color:#fff;display:grid;place-items:center}.acc-body{height:auto;max-height:0;overflow:hidden;transition:max-height .55s var(--ease)}.acc-body p{margin:0 0 26px 38px;color:#656565;font-size:19px;line-height:1.55;max-width:46ch}.acc-item.active .acc-body{height:auto;max-height:190px}.acc-item.active .acc-toggle{background:#111}.practice .cta-shell{margin:10px auto 0;background:#1a1a1a;border-color:#222} /* full service grid */ .full-services{background:#0a0a0a;padding:var(--section-y) 0;color:#f5f5f5}.full-services-head{text-align:center;max-width:780px;margin:0 auto 52px}.full-services-head .eyebrow{color:var(--orange);margin-bottom:10px}.full-services-head h2{font-size:clamp(2.4rem,4.4vw,4.1rem);letter-spacing:-.05em;line-height:1.02;margin:0}.full-services-head p{color:#aaa;line-height:1.6}.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.service-card{background:#121212;border:1px solid #303030;border-radius:15px;padding:28px 26px;min-height:350px;display:flex;flex-direction:column;position:relative;overflow:hidden;transition:.35s var(--ease)}.service-card:hover{transform:translateY(-5px);border-color:#4a4a4a}.service-card.featured{border-color:var(--orange);background:linear-gradient(145deg,rgba(253,158,34,.16),#121212 50%)}.badge{position:absolute;left:22px;top:-1px;background:var(--orange);color:#090909;border-radius:0 0 8px 8px;padding:7px 12px;font-size:9px;font-weight:700;letter-spacing:.08em}.service-card.featured{padding-top:48px}.service-card h3{font-size:21px;letter-spacing:-.03em;margin:0 0 11px}.service-card>p{font-size:13px;color:#8e8e8e;line-height:1.5;margin:0}.service-card hr{border:0;border-top:1px solid #2b2b2b;width:100%;margin:22px 0 15px}.checks{list-style:none;margin:0;padding:0;display:grid;gap:8px;color:#bbb;font-size:13px}.checks li:before{content:"✓";color:var(--orange);margin-right:8px}.service-button{margin-top:auto;padding-top:22px}.service-button .btn{min-height:48px;width:100%;font-size:13px;border:1px solid #4b4b4b;background:#1a1a1a;color:#fff;border-radius:8px}.featured .service-button .btn{background:var(--orange);color:#080808;border-color:var(--orange)}.signature-symbol{position:absolute;width:180px;right:-58px;bottom:-58px;opacity:.055;pointer-events:none}.service-benefits{display:grid;grid-template-columns:repeat(3,1fr);margin-top:70px;border:1px solid #303030;border-radius:16px;overflow:hidden}.service-benefit{min-height:135px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:18px;border-right:1px solid #303030}.service-benefit:last-child{border-right:0}.service-benefit .mini-icon{width:38px;height:38px;border:1px solid rgba(253,158,34,.55);background:rgba(253,158,34,.08);color:var(--orange);border-radius:8px;display:grid;place-items:center;margin-bottom:15px}.service-benefit strong{font-size:14px} /* section06 24h */ .always{background:#0a0a0a;padding:var(--section-y) 0;position:relative}.always:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent)}.always-card{position:relative;width:min(70rem,calc(100% - 48px));margin:auto;border:1px solid #252525;background:#050505;border-radius:30px;min-height:710px;padding:62px 54px;overflow:hidden}.always-card h2{font-size:clamp(2.8rem,4.7vw,4.7rem);line-height:1.03;letter-spacing:-.055em;text-align:center;max-width:18ch;margin:0 auto}.device-scene{height:390px;position:relative;margin-top:50px;display:flex;align-items:flex-end;justify-content:center}.laptop{width:min(530px,70vw);height:315px;border:8px solid #202020;border-bottom-width:14px;border-radius:18px;background:#111;transform:rotate(-6deg);box-shadow:0 40px 80px rgba(0,0,0,.4);position:relative}.laptop:after{content:"";position:absolute;left:-45px;right:-45px;bottom:-25px;height:20px;background:#292929;border-radius:0 0 55% 55%}.laptop-screen{position:absolute;inset:10px;background:#f2f2f2;border-radius:7px}.phone{width:145px;height:280px;border:7px solid #242424;border-radius:32px;background:#111;position:absolute;left:58%;bottom:0;transform:rotate(5deg);box-shadow:0 30px 65px rgba(0,0,0,.45)}.phone-screen{position:absolute;inset:7px;border-radius:22px;background:#f2f2f2}.sale-note{position:absolute;background:#fff;color:#111;border-radius:10px;padding:10px 14px;font-size:12px;box-shadow:0 14px 35px rgba(0,0,0,.25);animation:floatNote 4.5s ease-in-out infinite}.sale-note.n1{left:26%;top:15%}.sale-note.n2{right:18%;bottom:7%;animation-delay:-2.2s} /* section07 */ .portfolio{background:#070707;padding:var(--section-y) 0}.portfolio-head{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:end;margin-bottom:48px}.portfolio-head .h1{max-width:10ch}.portfolio-head .copy{max-width:46ch;margin:0}.portfolio-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.project-card{min-width:0}.project-image{aspect-ratio:1.38/1;background:#111;border:1px solid #242424;border-radius:24px;position:relative;overflow:hidden;transition:.6s var(--ease)}.project-image:after{content:"";position:absolute;inset:16px;border:1px dashed #2d2d2d;border-radius:16px}.project-card:hover .project-image{transform:scale(1.015)}.project-arrow{position:absolute;right:14px;top:14px;width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.25);display:grid;place-items:center;color:#ddd;z-index:2}.project-info{padding-top:18px}.project-type{font-size:9px;letter-spacing:.24em;color:#777}.project-info h3{font-size:22px;margin:8px 0 9px;font-weight:500}.project-info p{color:#9d9d9d;margin:0;line-height:1.55;font-size:14px}.portfolio .showcase-cta{margin-top:54px;position:relative}.portfolio .watermark{position:absolute;width:140px;opacity:.035;right:23%;bottom:-20px} /* section08 */ .beforeafter{height:180vh;background:#f2f2f2}.beforeafter-sticky{height:100vh;position:sticky;top:0;display:flex;align-items:center;transition:background .25s,color .25s;overflow:hidden}.ba-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;align-items:center}.ba-copy{position:relative;min-height:330px}.ba-state{position:absolute;inset:0;transition:opacity .25s,transform .25s}.ba-before{color:#111}.ba-after{color:#f5f5f5;opacity:0;transform:translateY(30px)}.ba-state .eyebrow{margin-bottom:22px}.ba-state .h1{max-width:13ch}.ba-state p:last-child{max-width:38ch;line-height:1.55;color:#777;font-size:18px}.ba-after p:last-child{color:#b8b8b8}.notebook{width:min(620px,92%);aspect-ratio:16/10;margin:auto;position:relative;transform:scale(.84) translateY(35px) rotateX(3deg);transform-style:preserve-3d;transition:transform .1s linear}.notebook-screen{position:absolute;left:3%;right:3%;top:0;height:88%;background:#0c0c0c;border:8px solid #131313;border-radius:17px;box-shadow:0 45px 90px rgba(0,0,0,.2);overflow:hidden}.screen-empty{position:absolute;inset:9px;border-radius:9px;background:#151515;border:1px solid #262626}.notebook-base{position:absolute;left:-4%;right:-4%;height:9%;bottom:2%;background:#242424;border-radius:0 0 50% 50%;transform:perspective(400px) rotateX(55deg)} /* section09 */ .competitor-cta{background:#070707;min-height:760px;display:flex;align-items:center;position:relative}.competitor-inner{text-align:center;max-width:68.75rem;margin:auto}.competitor-cta h2{font-size:clamp(3.2rem,5.8vw,6.1rem);line-height:1.02;letter-spacing:-.06em;font-weight:500;margin:0 auto;max-width:17ch}.competitor-cta p{color:#aaa;font-size:18px;margin:35px 0 38px}.competitor-cta .btn{min-width:220px} /* Linkefy signature CTA */ .signature-wrap{background:#111;padding:64px 0}.signature-card{position:relative;overflow:hidden;border-radius:28px;min-height:360px;background:linear-gradient(110deg,var(--orange),#ec7000);color:#090909;padding:58px 64px;display:flex;align-items:center;justify-content:space-between;gap:40px}.signature-card h2{font-size:clamp(2.7rem,4.4vw,4.7rem);line-height:1.01;letter-spacing:-.055em;margin:0;max-width:16ch}.signature-card p{font-size:19px;line-height:1.55;max-width:48ch;margin:22px 0 0}.signature-card .btn{min-width:278px;position:relative;z-index:2}.signature-card .big-symbol{position:absolute;width:330px;right:-80px;bottom:-105px;opacity:.14;filter:brightness(.4)} /* footer */ .footer{background:#090909;border-top:1px solid #191919;color:#aaa}.footer-main{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:8vw;padding:62px 0 68px}.footer-logo{width:155px;margin-bottom:22px}.footer-brand p{max-width:340px;line-height:1.55;margin:0}.footer-col h4{color:var(--orange);font-size:14px;letter-spacing:.12em;text-transform:uppercase;margin:0 0 20px}.footer-col p,.footer-col a{display:block;color:#b7b7b7;margin:0 0 11px;line-height:1.45}.footer-bottom{border-top:1px solid #1d1d1d;padding:24px 0;display:flex;justify-content:space-between;align-items:center;font-size:13px;color:#707070}.langs{display:flex;gap:8px}.langs button{border:1px solid #2c2c2c;background:#111;color:#999;border-radius:999px;padding:6px 10px;cursor:pointer}.langs button.active{background:var(--orange);color:#090909;border-color:var(--orange)} /* floating cta */ .float-cta{position:fixed;z-index:90;left:50%;bottom:16px;transform:translate(-50%,130%);width:min(520px,calc(100% - 30px));padding:10px;border-radius:18px;background:rgba(8,8,8,.9);backdrop-filter:blur(12px);border:1px solid #252525;transition:.5s var(--ease)}.float-cta.show{transform:translate(-50%,0)}.float-cta .btn{width:100%;min-height:54px} @keyframes heroLine{from{transform:translateY(112%)}to{transform:none}}@keyframes benefit{to{transform:translateX(-50%)}}@keyframes projectsA{to{transform:translateX(-50%)}}@keyframes projectsB{from{transform:translateX(-50%)}to{transform:translateX(0)}}@keyframes floatNote{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}} @media(max-width:62.5rem){:root{--section-y:96px}.hero-logo{width:180px}.header-controls{gap:8px}.header-langs button{min-width:34px;padding:0 8px}.header-instagram{width:38px;height:38px}.hero-copy{width:62vw}.display{font-size:clamp(3.4rem,6.8vw,5.6rem)}.cards3,.services-grid,.portfolio-cards{grid-template-columns:1fr 1fr}.practice-grid{grid-template-columns:1fr}.practice-visual{position:relative;top:auto}.service-benefits{grid-template-columns:1fr}.service-benefit{border-right:0;border-bottom:1px solid #303030}.service-benefit:last-child{border-bottom:0}.portfolio-head{grid-template-columns:1fr;gap:28px}.ba-grid{grid-template-columns:1fr}.ba-copy{min-height:300px}.signature-card{align-items:flex-start;flex-direction:column}.footer-main{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}} @media(max-width:760px){:root{--section-y:76px}.container{width:calc(100% - 40px)}.cursor{display:none}.hero{border-radius:0 0 26px 26px}.hero-bg{background-position:68% top;background-size:auto 58%;background-color:#000}.hero-overlay{background:linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.30) 27%,rgba(0,0,0,.86) 52%,#000 78%)}.hero header{height:96px;padding-top:24px}.hero-logo{width:145px}.header-controls{gap:7px}.header-langs{gap:2px}.header-langs button{min-width:31px;height:32px;padding:0 7px;font-size:10px}.header-instagram{width:34px;height:34px}.instagram-icon{width:17px;height:17px}.header-cta{display:none}.hero-main{min-height:calc(100svh - 96px);align-items:flex-end;padding:200px 0 50px}.hero-copy{width:100%}.display{font-size:clamp(3rem,13vw,4.35rem);line-height:1.03}.hero-desc{font-size:1rem;margin-top:28px}.hero-actions .btn{width:100%}.hero-proof{align-items:center;gap:14px}.client-logo{width:56px;height:56px}.hero-proof p{font-size:14px;max-width:220px}.benefit-loop{padding:10px 0}.pill{height:40px;padding:0 22px;font-size:13px}.showcase-loop{padding:var(--section-y) 0}.project-placeholder{width:220px;height:165px}.cards3,.cred-cards,.services-grid,.portfolio-cards{grid-template-columns:1fr}.feature-card{min-height:240px}.cred-box{padding:36px 26px;min-height:300px}.cred-title{font-size:clamp(2.8rem,12vw,4.4rem)}.practice-title:before{margin-right:14px}.practice-visual{min-height:390px}.acc-head strong{font-size:21px}.acc-body p{font-size:16px}.acc-item.active .acc-body{height:auto;max-height:220px}.service-card{min-height:320px}.always-card{width:calc(100% - 28px);padding:44px 20px;min-height:620px}.device-scene{height:330px}.laptop{width:85%;height:240px}.phone{width:115px;height:225px;left:58%}.sale-note.n1{left:7%}.sale-note.n2{right:2%}.portfolio-cards{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:16px;margin-right:-20px}.project-card{flex:0 0 86vw;scroll-snap-align:start}.beforeafter{height:160vh}.beforeafter-sticky{align-items:flex-start;padding-top:95px}.ba-grid{gap:28px}.ba-state .h1{font-size:2.5rem}.notebook{width:92%}.competitor-cta{min-height:680px}.competitor-cta h2{font-size:clamp(3rem,12vw,4.3rem)}.signature-wrap{padding:40px 0}.signature-card{padding:38px 28px;min-height:420px}.signature-card .btn{width:100%;min-width:0}.footer-main{grid-template-columns:1fr;gap:42px}.footer-brand{grid-column:auto}.footer-bottom{gap:16px;align-items:flex-start;flex-direction:column}.float-cta{bottom:10px}} @media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition-duration:.001ms!important}.reveal{opacity:1;transform:none}.beforeafter{height:auto}.beforeafter-sticky{position:relative;height:auto;padding:90px 0}.ba-state{position:relative;opacity:1!important;transform:none!important}.ba-after{margin-top:60px}.notebook{transform:none!important}} /* ========================================================= INTERACTION PASS : reference-inspired motion system ========================================================= */ @media (hover:hover) and (pointer:fine){ body{cursor:none} a,button,.feature-card,.service-card,.project-card,.cred-card,.client-logo,.pill,.signature-card,.always-card,.practice-visual{cursor:none} } /* Cursor with Bernardo-like ring + center dot */ .cursor{left:-100px;top:-100px;will-change:left,top,width,height,opacity,transform;border-color:rgba(255,255,255,.62);background:rgba(255,255,255,0);box-shadow:0 0 0 1px rgba(0,0,0,.02);transition:width .34s var(--ease),height .34s var(--ease),background-color .3s ease,border-color .3s ease,opacity .25s ease} .cursor:after{content:"";position:absolute;left:50%;top:50%;width:4px;height:4px;border-radius:50%;background:#fff;transform:translate(-50%,-50%);transition:transform .3s var(--ease),opacity .3s ease} .cursor.big{width:66px;height:66px;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.82)} .cursor.big:after{transform:translate(-50%,-50%) scale(.65)} .cursor.is-down{width:34px;height:34px} /* Magnetic buttons */ .btn{--mx:0px;--my:0px;--lift:0px;transform:translate3d(var(--mx),calc(var(--my) + var(--lift)),0);will-change:transform,box-shadow;position:relative;overflow:hidden} .btn:before{content:"";position:absolute;inset:-1px;background:linear-gradient(110deg,transparent 22%,rgba(255,255,255,.18) 48%,transparent 72%);transform:translateX(-135%);transition:transform .7s var(--ease);pointer-events:none} .btn:hover{--lift:-2px} .btn:hover:before{transform:translateX(135%)} .btn .wa{transition:transform .36s var(--ease)} .btn:hover .wa{transform:translate(2px,-1px) rotate(-5deg) scale(1.05)} .btn-orange:hover{background:#ffa62e} .btn-white:hover{background:#f7f7f7;box-shadow:0 14px 40px rgba(0,0,0,.14)} .btn-black:hover{background:#151515;box-shadow:0 16px 42px rgba(0,0,0,.24)} .header-cta:hover{box-shadow:0 20px 58px rgba(253,158,34,.34)} /* Logo / hero micro-motion */ .hero-logo{transition:transform .55s var(--ease),opacity .35s ease;transform-origin:left center} .hero-logo:hover{transform:scale(1.025);opacity:.94} .hero-bg{will-change:transform;transform:scale(1.015);transition:transform .12s linear} .client-logo{transition:transform .45s var(--ease),border-color .35s ease,background-color .35s ease,box-shadow .35s ease} .client-logo:hover{transform:translateY(-5px) scale(1.055);border-color:rgba(253,158,34,.55);background:rgba(253,158,34,.08);box-shadow:0 14px 32px rgba(0,0,0,.2)} /* Moving benefit pills */ .benefit-loop:hover .benefit-track{animation-play-state:paused} .pill{transition:transform .42s var(--ease),background-color .35s ease,color .35s ease,box-shadow .35s ease} .pill:hover{transform:translateY(-4px);background:#111;color:#fff;box-shadow:0 14px 35px rgba(0,0,0,.12)} /* Project loop cards */ .project-row:hover .project-track{animation-play-state:paused} .project-placeholder{transition:transform .55s var(--ease),border-color .4s ease,background .4s ease;will-change:transform} .project-placeholder:hover{transform:translateY(-7px) scale(1.018);border-color:#4a4a4a;background:linear-gradient(135deg,#151515,#202020)} .project-placeholder:after{transition:border-color .35s ease,opacity .35s ease} .project-placeholder:hover:after{border-color:rgba(253,158,34,.45);opacity:.75} /* Spotlight card family */ .feature-card,.service-card,.cred-card,.always-card,.signature-card{isolation:isolate} .feature-card:before,.service-card:before,.cred-card:before,.always-card:after,.signature-card:after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(440px circle at var(--spot-x,50%) var(--spot-y,50%),rgba(255,255,255,.085),transparent 48%);transition:opacity .35s ease;z-index:-1} .feature-card:hover:before,.service-card:hover:before,.cred-card:hover:before,.always-card:hover:after,.signature-card:hover:after{opacity:1} .feature-card{position:relative;will-change:transform} .feature-card:hover{border-color:#505050;box-shadow:0 24px 56px rgba(0,0,0,.18)} .feature-icon{transition:transform .5s var(--ease),background-color .35s ease,border-color .35s ease,color .35s ease} .feature-card:hover .feature-icon{transform:rotate(9deg) scale(1.07);border-color:rgba(253,158,34,.55);background:rgba(253,158,34,.08);color:var(--orange)} .feature-arrow{transition:transform .4s var(--ease),color .35s ease} .feature-card:hover .feature-arrow{transform:translate(5px,-5px);color:#fff} /* Credibility cards */ .cred-card{position:relative;overflow:hidden;transition:transform .5s var(--ease),box-shadow .45s ease,border-color .4s ease} .cred-card:hover{transform:translateY(-7px);box-shadow:0 24px 58px rgba(0,0,0,.2)} .cred-card.dark:hover{border-color:#444} .cred-card.light:hover{box-shadow:0 22px 55px rgba(0,0,0,.13)} .cred-card .arrow{transition:transform .45s var(--ease)} .cred-card:hover .arrow{transform:translateY(-6px)} /* Practice accordion */ .practice-visual{transition:transform .65s var(--ease),box-shadow .55s ease} .practice-visual:hover{transform:translateY(-4px);box-shadow:0 28px 70px rgba(0,0,0,.12)} .browser-placeholder{transition:transform .7s var(--ease),border-color .4s ease} .practice-visual:hover .browser-placeholder{transform:scale(1.012);border-color:#4a4a4a} .acc-head{transition:padding-left .42s var(--ease),color .35s ease} .acc-head:hover{padding-left:7px} .acc-head strong{transition:transform .42s var(--ease)} .acc-head:hover strong{transform:translateX(3px)} .acc-toggle{transition:transform .45s var(--ease),background-color .35s ease} .acc-head:hover .acc-toggle{transform:rotate(90deg)} .acc-item.active .acc-toggle{transform:rotate(180deg);background:var(--orange);color:#090909} .acc-item.active .acc-head strong{color:#000} /* Full services cards */ .service-card{will-change:transform;transform-style:preserve-3d} .service-card:hover{box-shadow:0 26px 60px rgba(0,0,0,.22)} .service-card h3{transition:color .35s ease,transform .45s var(--ease)} .service-card:hover h3{color:#fff;transform:translateY(-2px)} .service-card .checks li{transition:transform .4s var(--ease),color .3s ease} .service-card:hover .checks li{color:#ddd} .service-card:hover .checks li:nth-child(1){transform:translateX(2px)} .service-card:hover .checks li:nth-child(2){transform:translateX(4px)} .service-card:hover .checks li:nth-child(3){transform:translateX(6px)} .service-card:hover .checks li:nth-child(4){transform:translateX(8px)} .service-card .service-button .btn{transition:transform .35s var(--ease),background .35s ease,color .35s ease,border-color .35s ease} .service-card:hover .service-button .btn{border-color:#555} .service-card.featured:hover{border-color:var(--orange);box-shadow:0 28px 70px rgba(253,158,34,.12)} /* 24h seller block */ .always-card{will-change:transform;transition:transform .7s var(--ease),border-color .4s ease,box-shadow .5s ease} .always-card:hover{border-color:#353535;box-shadow:0 36px 90px rgba(0,0,0,.32)} .device-scene{perspective:62.5rem} .laptop,.phone{transition:transform .22s ease-out;will-change:transform} .sale-note{transition:box-shadow .4s ease} .always-card:hover .sale-note{box-shadow:0 18px 42px rgba(0,0,0,.34)} /* Portfolio */ .project-card{transition:transform .55s var(--ease);will-change:transform} .project-card[href]{display:block;color:inherit;text-decoration:none} .project-card:hover{transform:translateY(-5px)} .project-image{transition:transform .8s var(--ease),border-color .45s ease,box-shadow .5s ease;background-position:center;background-size:cover} .project-card:hover .project-image{transform:scale(1.045);border-color:#3a3a3a;box-shadow:0 28px 65px rgba(0,0,0,.25)} .project-image:before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.07) 48%,transparent 75%);transform:translateX(-130%);transition:transform .9s var(--ease);z-index:1} .project-card:hover .project-image:before{transform:translateX(130%)} .project-image:after{transition:opacity .4s ease,border-color .4s ease} .project-card:hover .project-image:after{opacity:.55;border-color:#454545} .project-arrow{transition:transform .5s var(--ease),background-color .35s ease,color .35s ease,border-color .35s ease} .project-card:hover .project-arrow{transform:translate(3px,-3px) rotate(7deg);background:#f5f5f5;color:#111;border-color:#f5f5f5} .project-info h3{transition:transform .45s var(--ease),color .35s ease} .project-card:hover .project-info h3{transform:translateX(4px);color:#fff} /* Before/after + CTA */ .notebook-screen{transition:box-shadow .45s ease,border-color .4s ease} .beforeafter-sticky:hover .notebook-screen{box-shadow:0 50px 105px rgba(0,0,0,.28);border-color:#1e1e1e} .competitor-cta:hover /* Linkefy signature card */ .signature-card{transition:transform .65s var(--ease),box-shadow .55s ease;background-size:120% 120%} .signature-card:hover{transform:translateY(-4px);box-shadow:0 34px 88px rgba(0,0,0,.28)} .signature-card .big-symbol{transition:transform .7s var(--ease),opacity .5s ease;will-change:transform} .signature-card:hover .big-symbol{opacity:.19} /* CTA shells and footer */ .cta-shell{transition:transform .5s var(--ease),border-color .4s ease,box-shadow .45s ease} .cta-shell:hover{transform:translateY(-3px);border-color:#3a3a3a;box-shadow:0 22px 55px rgba(0,0,0,.2)} .footer-col a{transition:color .3s ease,transform .4s var(--ease)} .footer-col a:hover{color:#fff;transform:translateX(5px)} .langs button{transition:transform .35s var(--ease),background .3s ease,color .3s ease,border-color .3s ease} .langs button:hover{transform:translateY(-2px);border-color:#555;color:#fff} .langs button.active:hover{color:#090909;border-color:var(--orange)} /* Staggered reveal polish */ .reveal{will-change:opacity,transform} .reveal.in{animation:revealSettle .9s var(--ease) both} @keyframes revealSettle{0%{filter:blur(5px)}100%{filter:blur(0)}} @media(prefers-reduced-motion:reduce){ .btn,.hero-bg,.client-logo,.pill,.project-placeholder,.feature-card,.feature-icon,.feature-arrow,.cred-card,.cred-card .arrow,.practice-visual,.browser-placeholder,.acc-head,.acc-head strong,.acc-toggle,.service-card,.service-card h3,.service-card .checks li,.always-card,.laptop,.phone,.project-card,.project-image,.project-arrow,.project-info h3,.signature-card,.signature-card .big-symbol,.cta-shell,.footer-col a,.langs button{transform:none!important;transition-duration:.001ms!important} .btn:before,.project-image:before{display:none!important} } /* Scroll-build experience : reference-inspired */ .scroll-build-item{ opacity:0; transform:translate3d(0,54px,0); filter:blur(8px); clip-path:inset(0 0 8% 0 round 0); transition: opacity .78s var(--ease), transform 1.05s var(--ease), filter .86s var(--ease), clip-path 1.05s var(--ease); transition-delay:var(--build-delay,0ms); will-change:opacity,transform,filter,clip-path; } .scroll-build-item.build-left{transform:translate3d(-54px,18px,0)} .scroll-build-item.build-right{transform:translate3d(54px,18px,0)} .scroll-build-item.build-scale{transform:translate3d(0,28px,0) scale(.955)} .scroll-build-item.build-clip{transform:none;filter:none;clip-path:inset(0 0 100% 0 round 24px)} .scroll-build-item.build-soft{transform:translate3d(0,24px,0);filter:blur(4px)} .scroll-build-item.built{ opacity:1; transform:translate3d(0,0,0) scale(1); filter:blur(0); clip-path:inset(0 0 0 0 round 0); } /* preserve card rounding while revealing */ .project-image.scroll-build-item.build-clip, .practice-visual.scroll-build-item.build-clip, .always-card.scroll-build-item.build-clip{clip-path:inset(0 0 100% 0 round 26px)} .project-image.scroll-build-item.built, .practice-visual.scroll-build-item.built, .always-card.scroll-build-item.built{clip-path:inset(0 0 0 0 round 26px)} /* title masks: the section seems to assemble as it reaches the viewport */ .build-title-mask{overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em} .build-title-mask>.build-title-inner{ display:block; transform:translateY(112%); opacity:.15; transition:transform 1.02s var(--ease),opacity .75s ease; } .build-title-mask.title-built>.build-title-inner{transform:none;opacity:1} /* rows approach from opposite directions before their continuous loop takes over */ .project-row.scroll-build-item{filter:none;clip-path:none} .project-row.a.scroll-build-item{transform:translate3d(-70px,0,0)} .project-row.b.scroll-build-item{transform:translate3d(70px,0,0)} .project-row.scroll-build-item.built{transform:none} /* Replayable title construction without DOM wrapping, so language switching stays intact */ .scroll-build-title{opacity:0;transform:translate3d(0,44px,0);clip-path:inset(0 0 100% 0);filter:blur(5px);transition:opacity .72s var(--ease),transform 1.02s var(--ease),clip-path 1.02s var(--ease),filter .8s var(--ease);will-change:opacity,transform,clip-path,filter} .scroll-build-title.title-built{opacity:1;transform:none;clip-path:inset(0 0 0 0);filter:blur(0)} /* subtle section-edge reveal gives the same 'constructed while scrolling' rhythm */ .build-divider{position:relative} .build-divider:after{content:"";position:absolute;left:50%;bottom:0;width:min(85rem,calc(100% - 48px));height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.09),transparent);transform:translateX(-50%) scaleX(0);transform-origin:center;transition:transform 1.25s var(--ease)} .build-divider.build-divider-in:after{transform:translateX(-50%) scaleX(1)} .practice.build-divider:after{background:linear-gradient(90deg,transparent,rgba(10,10,10,.12),transparent)} @media(max-width:760px){ .scroll-build-item{transform:translate3d(0,28px,0);filter:blur(4px)} .scroll-build-item.build-left{transform:translate3d(-28px,12px,0)} .scroll-build-item.build-right{transform:translate3d(28px,12px,0)} .scroll-build-item.build-scale{transform:translate3d(0,20px,0) scale(.97)} .project-row.a.scroll-build-item{transform:translate3d(-34px,0,0)} .project-row.b.scroll-build-item{transform:translate3d(34px,0,0)} } @media(prefers-reduced-motion:reduce){ .scroll-build-item,.scroll-build-item.built{opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important;transition:none!important} .build-title-mask>.build-title-inner{transform:none!important;opacity:1!important;transition:none!important} .build-divider:after{transform:translateX(-50%) scaleX(1)!important;transition:none!important} } .service-benefit .mini-icon img{width:25px;height:25px;object-fit:contain;display:block} @media(min-width:62.5625rem){.automation-card{grid-column:3 / 4;grid-row:2}} /* Replayable scroll build: overrides legacy reveal state while a section is armed */ .reveal.scroll-build-item{opacity:0} .reveal.scroll-build-item.built{opacity:1} .service-benefit .mini-icon{width:40px;height:40px;border-radius:9px} .service-benefit .mini-icon img{width:24px;height:24px;object-fit:contain;display:block} /* Service practice image gallery */ .browser-placeholder.has-service-image{height:auto;min-height:0;aspect-ratio:1200/880;background:#e9e9e9;border-color:#d8d8d8;display:block;overflow:hidden;position:relative;box-shadow:0 32px 72px rgba(0,0,0,.16)} .browser-placeholder.has-service-image img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;transition:opacity .28s ease,transform .7s var(--ease);will-change:opacity,transform} .browser-placeholder.has-service-image.is-switching img{opacity:.15;transform:scale(.988)} .practice-visual:hover .browser-placeholder.has-service-image img{transform:scale(1.012)} .practice-visual:hover .browser-placeholder.has-service-image.is-switching img{transform:scale(.988)} .practice-visual .visual-caption{left:42px;bottom:42px;background:rgba(7,7,7,.82);padding:12px 16px;border-radius:12px;backdrop-filter:blur(12px);box-shadow:0 12px 28px rgba(0,0,0,.18)} .practice-visual .visual-caption small{color:#c8c8c8}.practice-visual .visual-caption strong{color:#fff} @media(max-width:760px){.browser-placeholder.has-service-image{aspect-ratio:1200/880}.practice-visual{min-height:0;padding:14px}.practice-visual .visual-caption{left:25px;bottom:25px;padding:10px 12px}.practice-visual .visual-caption strong{font-size:16px}} /* Latest image applications */ .project-image.has-image{background-size:cover;background-position:center;background-repeat:no-repeat;border-color:#252525}.project-image.has-image:after{display:none}.project-image.has-image:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 60%,rgba(0,0,0,.14));pointer-events:none;z-index:1}.project-image.has-image .project-arrow{z-index:3;background:rgba(5,5,5,.55);backdrop-filter:blur(8px)} .ba-screen-stack{position:absolute;inset:9px;border-radius:9px;overflow:hidden;background:#ececec}.ba-screen-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;background:#ececec;transition:opacity .12s linear,transform .12s linear}.ba-screen-after{opacity:0;background:#111}.ba-screen-before{opacity:1}.notebook-screen{background:#0c0c0c} /* ===== V7: objective headline + replayable section construction ===== */ .objective-head{ max-width:67.5rem; padding-inline:24px; margin-bottom:72px; } .objective-head .h1{ max-width:62.5rem; margin-inline:auto; font-size:clamp(2.75rem,4.65vw,4.95rem); line-height:1.08; letter-spacing:-.05em; overflow:visible; padding:.04em .18em .34em; text-wrap:balance; } .objective-head .h1.scroll-build-title, .objective-head .h1.scroll-build-title.title-built{ clip-path:none!important; overflow:visible!important; } .objective-head .circled{ position:relative; display:inline-block; white-space:nowrap; padding:0 .09em .02em; z-index:2; } .objective-head .circled:after{ left:-10%; right:-10%; top:-8%; bottom:-12%; border-width:4px; z-index:-1; pointer-events:none; } /* Build system should always render above section clipping. */ .objective,.objective .container,.objective-head{overflow:visible} @media(max-width:68.75rem){ .objective-head{max-width:900px} .objective-head .h1{font-size:clamp(2.65rem,5.8vw,4.4rem);padding-inline:.12em} } @media(max-width:760px){ .objective-head{max-width:none;padding-inline:0;margin-bottom:48px} .objective-head .h1{font-size:clamp(2.45rem,11.2vw,3.75rem);line-height:1.07;letter-spacing:-.045em;padding:0 .06em .34em} .objective-head .circled:after{left:-8%;right:-8%;top:-6%;bottom:-10%;border-width:3px} } /* ===== V8: objective headline : no clipping at any zoom ===== */ #sec03,.objective,.objective .container,.objective-head,.objective-head .h1,.objective-head .h1 *{ overflow:visible!important; } .objective-head{ max-width:72.5rem!important; padding-inline:28px!important; margin-inline:auto!important; margin-bottom:76px!important; } .objective-head .h1{ max-width:67.5rem!important; margin:0 auto!important; font-size:clamp(2.7rem,4.45vw,4.8rem)!important; line-height:1.115!important; letter-spacing:-.048em!important; padding:.08em .24em .52em!important; text-wrap:balance; clip-path:none!important; } .objective-head .h1.scroll-build-title, .objective-head .h1.scroll-build-title.title-built{ clip-path:none!important; overflow:visible!important; filter:none; } .objective-head .circled{ display:inline-block!important; position:relative!important; white-space:nowrap!important; padding:0 .11em .05em!important; line-height:1.03!important; } .objective-head .circled:after{ left:-9%!important; right:-9%!important; top:-8%!important; bottom:-13%!important; z-index:0!important; } .objective-head .circled{z-index:1!important} .objective-head .circled:after{z-index:-1!important} @media(max-width:760px){ .objective-head{padding-inline:0!important;margin-bottom:50px!important} .objective-head .h1{font-size:clamp(2.35rem,10.7vw,3.65rem)!important;line-height:1.105!important;padding:0 .03em .56em!important} .objective-head .circled:after{left:-7%!important;right:-7%!important;top:-6%!important;bottom:-11%!important;border-width:3px!important} } /* ===== Working pass: service width, media fit and signature quality ===== */ @media (min-width:62.5625rem){ .services-grid .service-card.featured{grid-column:span 2;min-height:390px;padding-left:34px;padding-right:34px} .services-grid .service-card.featured>p{max-width:78ch;font-size:14px;line-height:1.6} .services-grid .service-card.featured .checks{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px;row-gap:10px} } /* Preserve the complete LOA page inside the notebook instead of cropping its header/logo. */ #sec06 .laptop-screen{background-size:contain!important;background-position:center top!important;background-repeat:no-repeat!important;background-color:#f6f6f6!important} /* Match the before/after notebook to the 7:5 screenshots so the website fills the screen naturally. */ #sec08 .notebook{aspect-ratio:7/5;width:min(650px,94%)} #sec08 .notebook-screen{left:2.5%;right:2.5%;top:1%;height:91%;border-width:8px} #sec08 .screen-empty{inset:7px} #sec08 .ba-screen-img{width:100%;height:100%;object-fit:cover!important;object-position:center top!important;background:transparent!important} /* High-quality vector signature symbol. */ .signature-card .big-symbol{display:block!important;position:absolute;width:190px;right:-28px;bottom:-34px;opacity:.16;filter:none!important;pointer-events:none;z-index:1} .signature-card>div,.signature-card .btn{position:relative;z-index:2} @media(max-width:62.5rem){.services-grid .service-card.featured{grid-column:auto}.signature-card .big-symbol{width:150px;right:-24px;bottom:-24px;opacity:.14}} /* Desktop portfolio headline: prevent final word clipping */ @media(min-width:62.5625rem){ .portfolio-head>div{min-width:0;overflow:visible} .portfolio-head .h1{max-width:14ch!important;line-height:1.07!important;overflow:visible!important;padding:0 .08em .16em 0!important;text-wrap:balance} .portfolio-head .h1.scroll-build-title,.portfolio-head .h1.scroll-build-title.title-built{clip-path:none!important;overflow:visible!important} } /* ===== MOBILE OPTIMIZATION V12 ===== */ /* Responsive pass tuned for 320–62.5rem. Keeps the desktop composition untouched. */ @media(max-width:62.5rem){ html,body{overflow-x:hidden} .container{max-width:none} .h1,.h2,.display,.cred-title,.practice-title,.full-services-head h2,.always-card h2,.competitor-cta h2,.signature-card h2{overflow-wrap:anywhere} .portfolio-head .h1{max-width:none!important} .service-card,.feature-card,.cred-card,.project-card,.practice-visual,.always-card,.signature-card{min-width:0} .scroll-build-title{clip-path:inset(-.18em -.22em -.30em -.22em)!important;overflow:visible!important} .build-title-mask{overflow:visible!important;padding-bottom:.18em!important;margin-bottom:0!important} } @media(min-width:761px) and (max-width:62.5rem){ :root{--section-y:84px} .container{width:calc(100% - 56px)} .display{font-size:clamp(3.25rem,7.4vw,4.9rem);line-height:1.02} .h1{font-size:clamp(2.6rem,6vw,4rem);line-height:1.04} .hero-main{padding-bottom:60px} .practice-title{font-size:clamp(2.7rem,6.4vw,4rem)} .full-services-head h2{font-size:clamp(2.5rem,6vw,3.8rem)} .always-card h2{font-size:clamp(2.6rem,5.9vw,3.8rem)} .competitor-cta h2{font-size:clamp(2.8rem,6.2vw,4.1rem)} .signature-card h2{font-size:clamp(2.6rem,5.8vw,3.8rem)} .services-grid{grid-template-columns:1fr 1fr} .services-grid .service-card.featured{grid-column:1/-1} .automation-card{grid-column:auto!important;grid-row:auto!important} .portfolio-cards{grid-template-columns:repeat(2,minmax(0,1fr))} .portfolio-cards .project-card:last-child{grid-column:1/-1;max-width:calc(50% - 11px)} .ba-grid{gap:42px} } @media(max-width:760px){ :root{--section-y:64px} html{scroll-padding-top:14px} body{font-size:15px} .container{width:calc(100% - 32px)} main>section{min-width:0} /* Global type scale */ .display{font-size:clamp(2.55rem,11.2vw,3.25rem)!important;line-height:1.01!important;letter-spacing:-.055em!important} .h1{font-size:clamp(2.15rem,9.3vw,2.8rem)!important;line-height:1.045!important;letter-spacing:-.048em!important} .h2{font-size:clamp(1.75rem,7.5vw,2.25rem)!important;line-height:1.08!important} .copy{font-size:15px;line-height:1.55} .eyebrow{font-size:9px;letter-spacing:.22em} .btn{min-height:50px;padding:0 20px;border-radius:12px;font-size:13px;gap:9px} .btn .wa{width:17px;height:17px} /* Hero */ .hero{min-height:auto;border-radius:0 0 22px 22px} .hero header{height:82px;padding-top:16px;gap:10px} .hero-logo{width:116px} .header-controls{gap:5px;flex:0 0 auto} .header-langs{gap:2px} .header-langs button{min-width:28px;height:29px;padding:0 6px;font-size:9px} .header-instagram{width:31px;height:31px} .instagram-icon{width:15px;height:15px} .hero-bg{background-position:70% top;background-size:auto 52%} .hero-overlay{background:linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.27) 25%,rgba(0,0,0,.88) 51%,#000 74%)} .hero-main{min-height:calc(100svh - 82px);padding:142px 0 82px;align-items:flex-end} .hero-copy{width:100%;max-width:none} .hero-desc{font-size:14px;line-height:1.5;margin-top:20px;max-width:36ch} .hero-actions{margin-top:22px} .hero-actions .btn{width:100%} .hero-proof{margin-top:24px;gap:11px;align-items:center;flex-wrap:wrap} .client-logo{width:46px;height:46px} .hero-proof p{font-size:12px;line-height:1.35;max-width:170px} /* Benefit strip + projects loop */ .benefit-loop{padding:8px 0} .pill{height:36px;padding:0 18px;font-size:12px} .showcase-head{margin-bottom:32px;padding-inline:0} .showcase-head .h1{max-width:14ch;margin-inline:auto} .showcase-head p{font-size:12px;margin-top:16px;max-width:38ch;padding-inline:8px} .project-marquee{gap:10px;margin-top:18px} .project-track{gap:10px} .project-placeholder{width:190px;height:136px;border-radius:10px} /* Objective */ .objective-head{padding-inline:0!important;margin-bottom:38px!important;max-width:none!important} .objective-head .eyebrow{margin-bottom:16px} .objective-head .h1{font-size:clamp(2.05rem,9vw,2.65rem)!important;line-height:1.08!important;letter-spacing:-.045em!important;padding:0 .02em .42em!important;max-width:15ch!important;text-wrap:balance} .objective-head .circled{padding:0 .08em .03em!important} .objective-head .circled:after{left:-6%!important;right:-6%!important;top:-5%!important;bottom:-9%!important;border-width:2.5px!important} .cards3{gap:12px} .feature-card{min-height:205px;padding:24px 22px;border-radius:15px} .feature-icon{width:41px;height:41px;margin-bottom:24px} .feature-card h3{font-size:19px;line-height:1.15;margin-bottom:12px} .feature-card p{font-size:14px;line-height:1.5} .feature-arrow{font-size:20px} /* Credibility */ .cred-box{padding:30px 22px;min-height:0;border-radius:0 0 22px 22px} .cred-title{font-size:clamp(2.35rem,10.2vw,3.1rem)!important;line-height:1.01!important;letter-spacing:-.055em!important;max-width:14ch} .cred-cards{gap:12px;margin-top:28px} .cred-card{min-height:92px;border-radius:15px;padding:20px 22px;font-size:clamp(1.35rem,6.4vw,1.8rem)} .cred-card .arrow{font-size:25px} /* Practice / accordion */ .practice-title{font-size:clamp(2.25rem,9.5vw,2.9rem)!important;line-height:1.03;letter-spacing:-.05em;margin-bottom:32px} .practice-title:before{font-size:.45em;margin-right:9px;vertical-align:.23em} .practice-grid{gap:30px} .practice-visual{min-height:285px;padding:14px;border-radius:18px;position:relative;top:auto} .browser-placeholder{height:auto;aspect-ratio:7/5;border-radius:12px} .visual-caption{left:18px;bottom:16px;right:18px} .visual-caption strong{font-size:17px;line-height:1.15} .visual-caption small{font-size:8px} .service-accordion{padding-top:0} .acc-head{grid-template-columns:30px minmax(0,1fr) 28px;padding:16px 0;gap:5px} .acc-num{font-size:11px} .acc-head strong{font-size:17px!important;line-height:1.2} .acc-toggle{width:26px;height:26px} .acc-body p{font-size:14px!important;line-height:1.5;margin:0 0 16px} .acc-item.active .acc-body{max-height:260px} /* Full services */ .full-services-head{margin-bottom:34px;padding-inline:4px} .full-services-head .eyebrow{margin-bottom:9px} .full-services-head h2{font-size:clamp(2.15rem,9.2vw,2.75rem)!important;line-height:1.04!important;letter-spacing:-.047em!important;text-wrap:balance} .full-services-head p{font-size:14px;line-height:1.5;margin:14px auto 0;max-width:34ch} .services-grid{grid-template-columns:1fr!important;gap:12px} .services-grid .service-card,.services-grid .service-card.featured{grid-column:auto!important;grid-row:auto!important;min-height:0!important;padding:24px 22px!important;border-radius:14px} .services-grid .service-card.featured{padding-top:42px!important} .service-card h3{font-size:19px;line-height:1.15} .service-card>p{font-size:13px;line-height:1.55} .service-card hr{margin:18px 0 14px} .checks{font-size:12px;gap:7px} .service-card.featured .checks{grid-template-columns:1fr!important} .service-button{padding-top:18px} .service-button .btn{min-height:46px} .badge{left:18px;padding:6px 10px;font-size:8px} .signature-symbol{width:130px;right:-40px;bottom:-40px} .service-benefits{margin-top:32px;grid-template-columns:1fr;border-radius:14px} .service-benefit{min-height:94px;padding:16px 20px;flex-direction:row;justify-content:flex-start;text-align:left;gap:14px;border-right:0;border-bottom:1px solid #303030} .service-benefit:last-child{border-bottom:0} .service-benefit .mini-icon{margin-bottom:0;flex:0 0 40px} .service-benefit strong{font-size:13px;line-height:1.35} /* 24h section */ .always-card{width:calc(100% - 24px);min-height:0;padding:34px 18px 40px;border-radius:22px} .always-card h2{font-size:clamp(2.05rem,8.8vw,2.65rem)!important;line-height:1.035!important;letter-spacing:-.048em!important;max-width:14ch;text-wrap:balance} .device-scene{height:300px;margin-top:30px;overflow:visible} .laptop{width:84%;height:205px;border-width:6px;border-bottom-width:10px;border-radius:13px;transform:rotate(-4deg)} .laptop:after{left:-22px;right:-22px;bottom:-18px;height:14px} .laptop-screen{inset:7px} .phone{width:92px;height:184px;left:auto;right:7%;bottom:3px;border-width:5px;border-radius:23px;transform:rotate(4deg)} .phone-screen{inset:5px;border-radius:16px} .sale-note{font-size:10px;padding:8px 10px;border-radius:8px;line-height:1.2} .sale-note.n1{left:4%;top:7%} .sale-note.n2{right:0;bottom:2%} /* Portfolio */ .portfolio-head{display:block;margin-bottom:30px} .portfolio-head .h1{font-size:clamp(2.35rem,9.6vw,2.95rem)!important;line-height:1.02!important;max-width:12ch!important;padding:0 .04em .18em 0!important;text-wrap:balance} .portfolio-head .copy{font-size:14px;line-height:1.5;margin-top:16px;max-width:34ch} .portfolio-cards{display:flex!important;gap:14px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;padding:2px 16px 18px 0;margin-right:-16px;scrollbar-width:none;-webkit-overflow-scrolling:touch} .portfolio-cards::-webkit-scrollbar{display:none} .project-card{flex:0 0 min(84vw,330px);scroll-snap-align:start} .project-image{aspect-ratio:7/5;border-radius:18px} .project-arrow{width:38px;height:38px;right:10px;top:10px} .project-info{padding-top:14px} .project-info h3{font-size:20px;margin:6px 0 7px} .project-info p{font-size:13px;line-height:1.48} /* Before / after sticky scene */ .beforeafter{height:140vh} .beforeafter-sticky{height:100svh;min-height:620px;padding:56px 0 64px;align-items:center;overflow:hidden} .ba-grid{grid-template-columns:1fr!important;gap:24px;align-items:center} .ba-copy{min-height:220px} .ba-state .eyebrow{margin-bottom:14px} .ba-state .h1{font-size:clamp(2.25rem,9.5vw,2.9rem)!important;line-height:1.035!important;letter-spacing:-.048em!important;max-width:12ch!important} .ba-state p:last-child{font-size:14px;line-height:1.5;max-width:34ch;margin-top:15px} #sec08 .notebook{width:min(340px,94%)!important;aspect-ratio:7/5!important;transform:scale(.94) translateY(8px) rotateX(1deg)} #sec08 .notebook-screen{left:2.5%;right:2.5%;top:1%;height:91%;border-width:6px;border-radius:12px} #sec08 .screen-empty{inset:5px;border-radius:6px} #sec08 .ba-screen-img{object-fit:cover!important;object-position:center top!important} /* Final dark CTA */ .competitor-cta{min-height:560px;padding:64px 0} .competitor-inner{max-width:none} .competitor-cta h2{font-size:clamp(2.35rem,9.7vw,3rem)!important;line-height:1.035!important;letter-spacing:-.05em!important;max-width:14ch;text-wrap:balance} .competitor-cta p{font-size:15px;margin:24px 0 28px} .competitor-cta .btn{min-width:0;width:min(100%,230px)} /* Orange signature CTA */ .signature-wrap{padding:32px 0} .signature-card{padding:30px 24px 34px;min-height:0;border-radius:21px;gap:26px;align-items:stretch!important} .signature-card h2{font-size:clamp(2.15rem,9.1vw,2.75rem)!important;line-height:1.025!important;letter-spacing:-.05em!important;max-width:12.5ch} .signature-card p{font-size:14px;line-height:1.5;margin-top:16px;max-width:31ch} .signature-card .btn{width:100%;min-width:0;min-height:50px} .signature-card .big-symbol{width:115px!important;right:-24px!important;bottom:-22px!important;opacity:.13!important} /* Footer */ .footer-main{grid-template-columns:1fr;gap:30px;padding:44px 0 48px} .footer-logo{width:132px;margin-bottom:15px} .footer-brand p{font-size:14px;max-width:32ch} .footer-col h4{font-size:12px;margin-bottom:14px} .footer-col p,.footer-col a{font-size:14px;line-height:1.45} .footer-bottom{padding:18px 0;font-size:11px} .footer-bottom>.container{gap:14px!important;align-items:flex-start!important} .langs button{padding:5px 8px;font-size:10px} /* Floating CTA: smaller and less intrusive on touch screens */ .float-cta{width:calc(100% - 24px);bottom:8px;padding:6px;border-radius:14px} .float-cta .btn{min-height:46px;font-size:12px} /* Keep scroll build on mobile, but prevent text clipping and heavy blur. */ .scroll-build-item{filter:blur(2px)!important;clip-path:none!important;transform:translate3d(0,20px,0)!important;transition-duration:.72s!important} .scroll-build-item.build-left{transform:translate3d(-18px,8px,0)!important} .scroll-build-item.build-right{transform:translate3d(18px,8px,0)!important} .scroll-build-item.build-scale{transform:translate3d(0,14px,0) scale(.98)!important} .scroll-build-item.build-clip{clip-path:inset(0 0 100% 0 round 18px)!important;transform:none!important;filter:none!important} .scroll-build-item.built{opacity:1!important;transform:none!important;filter:none!important;clip-path:inset(0 0 0 0 round 0)!important} .practice-visual.scroll-build-item.build-clip,.always-card.scroll-build-item.build-clip,.project-image.scroll-build-item.build-clip{clip-path:inset(0 0 100% 0 round 18px)!important} .practice-visual.scroll-build-item.built,.always-card.scroll-build-item.built,.project-image.scroll-build-item.built{clip-path:inset(0 0 0 0 round 18px)!important} .scroll-build-title{transform:translate3d(0,24px,0)!important;filter:blur(2px)!important;clip-path:none!important;overflow:visible!important;transition-duration:.75s!important} .scroll-build-title.title-built{transform:none!important;filter:none!important;opacity:1!important} } @media(max-width:420px){ .container{width:calc(100% - 28px)} .display{font-size:clamp(2.35rem,10.9vw,2.85rem)!important} .h1{font-size:clamp(2rem,8.9vw,2.55rem)!important} .hero-logo{width:108px} .header-langs button{min-width:27px;padding:0 5px} .header-instagram{width:30px;height:30px} .showcase-head .h1{max-width:15ch} .objective-head .h1{font-size:clamp(1.95rem,8.7vw,2.45rem)!important;max-width:15ch!important} .cred-title{font-size:clamp(2.2rem,9.7vw,2.75rem)!important} .practice-title{font-size:clamp(2.1rem,9vw,2.6rem)!important} .full-services-head h2{font-size:clamp(2.05rem,8.8vw,2.55rem)!important} .always-card h2{font-size:clamp(1.95rem,8.5vw,2.45rem)!important} .competitor-cta h2{font-size:clamp(2.15rem,9vw,2.7rem)!important} .signature-card h2{font-size:clamp(2rem,8.6vw,2.5rem)!important} } @media(max-width:350px){ .container{width:calc(100% - 24px)} .hero-logo{width:96px} .header-langs button{min-width:25px;height:27px;font-size:8px} .header-instagram{width:28px;height:28px} .display{font-size:2.2rem!important} .h1{font-size:1.92rem!important} .btn{padding-inline:16px} .project-card{flex-basis:88vw} .sale-note.n2{right:-4px} } /* ===== END MOBILE OPTIMIZATION V12 ===== */ .project-image.has-image>img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;transition:transform .8s var(--ease)}.project-card:hover .project-image.has-image>img{transform:scale(1.035)} /* ===== MOBILE HERO + BEFORE/AFTER SPACING FIX V14 ===== */ @media(max-width:760px){ /* Move the complete hero content higher so headline, copy and CTA overlap the hero artwork slightly. */ .hero-main{padding:112px 0 138px!important;align-items:flex-end!important} /* Shorter mobile scroll scene and dark parent background prevent a blank strip before the next dark section. */ .beforeafter{height:125svh!important;background:#070707!important;margin-bottom:0!important} .beforeafter-sticky{height:100svh!important;min-height:0!important} #sec09{margin-top:0!important} } @media(max-width:420px){ .hero-main{padding:106px 0 132px!important} } @media(max-width:350px){ .hero-main{padding:96px 0 120px!important} } /* ===== END MOBILE HERO + BEFORE/AFTER SPACING FIX V14 ===== */ /* Audit 100: semantic contact form + legal links */ .contact-form-head strong{font-size:14px}.contact-form-head span{font-size:12px;opacity:.68}.contact-form label{display:flex;flex-direction:column;gap:7px;font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}.contact-form input{width:100%;min-height:48px;border-radius:11px;border:1px solid rgba(0,0,0,.18);background:rgba(255,255,255,.68);padding:0 13px;color:#111;font:500 14px/1.2 "Instrument Sans",sans-serif;outline:0;transition:border-color .25s ease,box-shadow .25s ease}.contact-form input:focus{border-color:rgba(0,0,0,.55);box-shadow:0 0 0 3px rgba(0,0,0,.06)}.contact-submit{grid-column:1/-1;justify-self:start;min-height:48px}.form-honeypot{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden!important}.footer-legal{display:flex;gap:16px;flex-wrap:wrap;font-size:11px}.footer-legal a{opacity:.72;transition:opacity .25s ease}.footer-legal a:hover{opacity:1}@media(max-width:760px){.contact-form-head,.contact-form-wide,.contact-submit{grid-column:1}.contact-submit{width:100%;justify-self:stretch}.footer-legal{width:100%;order:3}} /* Final audit QA: prevent any transformed marquee/cursor from widening the document */ html,body{overflow-x:clip} .signature-card h2{overflow:visible;padding-bottom:.12em} @media(min-width:1001px){ .contact-submit{grid-column:auto;justify-self:stretch;min-width:180px} } /* ===== FINAL LOGO PROPORTION FIX ===== */ .hero-logo, .footer-logo { height: auto !important; object-fit: contain !important; object-position: left center !important; aspect-ratio: 415 / 130; flex: 0 0 auto; } .signature-card .big-symbol { height: auto !important; object-fit: contain !important; } /* Restore final CTA card composition: no injected form. */ .signature-card { flex-wrap: nowrap !important; } @media (max-width: 760px) { .hero-logo, .footer-logo { height: auto !important; object-fit: contain !important; } .signature-card { flex-wrap: nowrap !important; } }