@font-face{font-family:Manrope;src:url('assets/manrope-400.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Manrope;src:url('assets/manrope-500.ttf') format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:Manrope;src:url('assets/manrope-600.ttf') format('truetype');font-weight:600;font-display:swap}
@font-face{font-family:Manrope;src:url('assets/manrope-700.ttf') format('truetype');font-weight:700;font-display:swap}
:root{color-scheme:dark;--canvas:#050505;--surface:#111112;--red:#ee292f;--red-hover:#ca1721;--text:#f5f5f4;--muted:#a7a7ac;--line:#2b2b2e;--ease:cubic-bezier(.22,1,.36,1);--container:1280px}
*{box-sizing:border-box;letter-spacing:0}
html{scroll-behavior:smooth;scroll-padding-top:100px;overflow-x:hidden;overflow-x:clip}
body{margin:0;background:var(--canvas);color:var(--text);font-family:Manrope,Arial,sans-serif;font-size:16px;line-height:1.7;overflow-x:hidden;overflow-x:clip}
button,input,textarea,select{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{cursor:pointer}img{display:block;max-width:100%;height:auto}svg{width:22px;height:22px;flex-shrink:0;stroke-width:1.7}button{color:inherit}h1,h2,h3,p{margin:0}h1,h2,h3{font-weight:600;line-height:1.12}ul,ol{padding:0;margin:0;list-style:none}::selection{background:var(--red);color:#fff}:focus-visible{outline:2px solid #ff6569;outline-offset:6px}[hidden]{display:none!important}
.container{width:min(var(--container),calc(100% - 112px));margin-inline:auto}.section-space{padding-block:112px}.skip-link{position:fixed;z-index:100;top:12px;left:20px;transform:translateY(-180%);padding:12px 20px;background:#fff;color:#000}.skip-link:focus{transform:none}.section-label{font-size:13px;font-weight:600;color:#b8b8bd;margin-bottom:22px;display:flex;align-items:center;gap:12px}.section-label::before{content:'';width:20px;height:2px;background:var(--red);flex-shrink:0}h2{font-size:48px}.section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:56px}.section-heading>p{max-width:37ch;color:var(--muted);font-size:15px;line-height:1.8;padding-bottom:4px}
.site-header{position:absolute;inset:0 0 auto;z-index:20;border-bottom:1px solid #ffffff18}.header-inner{height:96px;display:flex;align-items:center;gap:32px}.brand{display:block;width:200px;height:48px;position:relative;overflow:hidden;flex-shrink:0}.brand img{position:absolute;width:100%;max-width:none;top:50%;transform:translateY(-50%)}.desktop-nav{display:flex;align-items:center;gap:30px;margin-left:auto}.desktop-nav a{font-size:13px;font-weight:500;color:#c4c4c7;transition:color .2s}.desktop-nav a:hover{color:#fff}.header-cta{font-size:13px;display:inline-flex;gap:18px;align-items:center;min-height:44px;margin-left:14px}.header-cta svg{width:18px}.header-cta:hover{color:#ff797d}.icon-button{width:44px;height:44px;padding:10px;border:1px solid #686868;background:transparent;display:inline-grid;place-items:center}.menu-toggle{display:none}.mobile-nav{padding:16px 24px 26px;background:#0b0b0c;border-bottom:1px solid var(--line)}.mobile-nav a{display:block;padding:13px 0;font-size:17px}.mobile-nav a:last-child{color:#ff7378}
.hero{position:relative;isolation:isolate;min-height:700px;height:calc(100svh - 72px);max-height:880px;display:flex;align-items:center;padding-top:96px;overflow:hidden}.hero-art{position:absolute;z-index:-3;inset:0;overflow:hidden}.hero-art img{width:100%;height:100%;object-fit:cover;object-position:center;transform:scale(1.035);will-change:transform}.hero-shade{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,rgba(0,0,0,.65),rgba(0,0,0,.29) 47%,transparent 75%),linear-gradient(0deg,#050505,transparent 25%)}.hero-content{padding-block:56px 96px}.hero-intro{font-size:13px;display:flex;align-items:center;gap:12px;color:#d3d3d5;margin-bottom:24px}.brand-tick{display:block;width:17px;height:12px;border-left:4px solid var(--red);border-right:4px solid var(--red);transform:skew(-30deg)}h1{font-size:88px;font-weight:600;line-height:1.05;max-width:11ch}.hero-description{max-width:44ch;margin-top:28px;color:#c1c1c6;line-height:1.85;font-size:16px}.hero-actions{display:flex;align-items:center;gap:32px;margin-top:34px}.button{min-height:56px;display:inline-flex;align-items:center;justify-content:center;gap:24px;padding:16px 24px;border:0;border-radius:3px;font-size:14px;font-weight:600;transition:background .2s,transform .3s var(--ease);text-align:center}.button svg{width:20px}.button-red{background:var(--red);color:white}.button-red:hover{background:var(--red-hover);transform:translateY(-2px)}.text-link{font-size:13px;font-weight:500;display:inline-flex;align-items:center;gap:14px;min-height:44px}.text-link svg{width:18px;transition:transform .3s var(--ease)}.text-link:hover svg{transform:translate(2px,-2px)}.hero-note{margin-top:23px;color:#9b9ba1;font-size:11px}.hero-bottom{position:absolute;bottom:30px;left:0;right:0;display:flex;align-items:center;justify-content:space-between;color:#909095;font-size:11px}.hero-bottom span:last-child{display:flex;align-items:center;gap:20px}.hero-bottom svg{width:15px}
.work-section{padding-top:76px}.work-heading{margin-bottom:48px}.work-grid{display:grid;grid-template-columns:1fr 1fr;gap:34px}.project{display:block;min-width:0}.project-image{overflow:hidden;border-radius:6px;position:relative;aspect-ratio:1.43;background:#222;border:1px solid #303033}.browser-bar{height:29px;background:#1c1c1e;display:flex;align-items:center;justify-content:space-between;padding-inline:13px;color:#929296;font-size:9px;position:relative;z-index:2}.browser-bar svg{width:10px;height:10px}.browser-dots{display:flex;gap:4px}.browser-dots b{width:5px;height:5px;border-radius:50%;background:#656568}.browser-dots b:first-child{background:#ac5c5b}.project-image>img{width:100%;height:calc(100% - 29px);object-fit:cover;object-position:top;transition:transform .8s var(--ease)}.project:hover .project-image>img{transform:scale(1.025)}.project-info{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-top:24px}.project-category{font-size:11px;color:var(--muted);display:block;margin-bottom:6px}.project-info h3{font-size:23px}.project-open{display:grid;place-items:center;width:42px;height:42px;border:1px solid #55555a;border-radius:50%;transition:background .2s,transform .3s var(--ease)}.project:hover .project-open{background:var(--red);border-color:var(--red);transform:rotate(5deg)}.project-caption{color:var(--muted);font-size:13px;margin-top:12px;max-width:54ch}.work-disclosure{display:flex;align-items:flex-start;gap:10px;color:#8e8e96;font-size:11px;margin-top:40px;max-width:90ch}.work-disclosure svg{width:15px;height:17px}
.services-section{background:#101011;border-top:1px solid #202023;border-bottom:1px solid #202023}.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:72px}.service{padding-inline:38px;border-left:1px solid #303033;display:flex;flex-direction:column;align-items:flex-start}.service:first-child{padding-left:0;border-left:0}.service:last-child{padding-right:0}.service-icon{width:34px;height:34px;margin-bottom:33px;color:#d7d7da;stroke-width:1.3}.service-featured>.service-icon{color:#ff4b53}.service-context{font-size:11px;color:#98989f;margin-bottom:16px}.service h3{font-size:29px;line-height:1.25;margin-bottom:22px}.service>p:not(.service-context){font-size:13px;line-height:1.9;color:var(--muted);max-width:39ch}.check-list{margin-top:26px;display:grid;gap:10px}.check-list li{display:flex;align-items:center;gap:10px;color:#d3d3d7;font-size:12px}.check-list svg{width:14px;height:14px;color:#95959d}.service-link{margin-top:auto;padding-top:30px;font-size:12px;font-weight:600;display:flex;align-items:center;gap:12px;min-height:60px}.service-link svg{width:17px}.service-link:hover{color:#ff797d}.service-footnote{max-width:102ch;font-size:10px;line-height:1.8;color:#919199;margin-top:48px}
.redesign-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:72px;align-items:center}.redesign-copy h2{font-size:40px;line-height:1.2}.redesign-copy>p:not(.section-label){font-size:14px;line-height:1.85;color:var(--muted);margin-top:27px;max-width:38ch}.redesign-copy .text-link{margin-top:24px}/* isolation: keeps the slider on top for hit testing while the panel tilts in 3D (edges were hitting the image). */
.comparison{position:relative;isolation:isolate;width:100%;aspect-ratio:1.44;border-radius:5px;overflow:hidden;background:#242426;border:1px solid #38383c}.comparison-base,.comparison-before,.comparison-before img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}.comparison-before{overflow:hidden;transform:translateX(calc(var(--compare) - 100%));will-change:transform}.comparison-before img{transform:translateX(calc(100% - var(--compare)));will-change:transform}.compare-label{position:absolute;top:16px;background:#050505dd;color:#fff;padding:6px 12px;border-radius:3px;font-size:10px;pointer-events:none;z-index:2}.compare-old{left:14px}.compare-new{right:14px}.compare-divider{position:absolute;inset:0;pointer-events:none;z-index:3;transform:translateX(calc(var(--compare) - 50%));will-change:transform}.compare-divider::before{content:'';position:absolute;top:0;bottom:0;left:calc(50% - 1px);width:2px;background:#fff;box-shadow:0 0 14px #0007}.compare-slider{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0;z-index:4;touch-action:pan-y}.comparison:focus-within{outline:2px solid #ff6569;outline-offset:6px}.comparison-caption{font-size:10px;color:#919199;margin-top:15px;text-align:center}
.approach-section{border-top:1px solid #242426}.process-list{display:grid;grid-template-columns:repeat(3,1fr);gap:46px;margin-top:66px;counter-reset:process}.process-list li{position:relative;padding-top:30px;border-top:1px solid #444448}.step-number{font-size:12px;color:#ff676c;display:block;margin-bottom:45px}.process-list h3{font-size:21px;margin-bottom:18px}.process-list p{font-size:13px;line-height:1.9;color:var(--muted);max-width:42ch}.process-list li>svg{position:absolute;right:0;top:29px;width:20px;color:#a2a2aa}.faq-section{background:#101011;border-top:1px solid #232326;border-bottom:1px solid #232326}.faq-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:72px}.faq-intro{font-size:14px;color:var(--muted);margin-top:26px}.faq-list details{border-bottom:1px solid #37373b}.faq-list details:first-child{border-top:1px solid #37373b}.faq-list summary{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:25px;font-size:14px;font-weight:500;cursor:pointer;list-style:none}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary svg{width:18px;transition:transform .25s var(--ease);color:#c5c5cb}.faq-list details[open] summary svg{transform:rotate(45deg);color:#ff7176}.faq-list details p{font-size:13px;color:#ababaf;line-height:1.9;padding:0 32px 27px 0}.faq-list summary:hover{color:#ffb0b3}
.contact-section{position:relative;overflow:hidden;padding-block:124px 112px}.contact-layout{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:start}.contact-copy h2{font-size:62px;line-height:1.08}.contact-copy>p:not(.section-label){font-size:14px;line-height:1.9;color:var(--muted);margin-top:28px}.contact-person{display:inline-flex;align-items:center;gap:15px;margin-top:34px}.person-monogram{background:#29292d;border-radius:50%;display:grid;place-items:center;width:46px;height:46px;font-size:18px;color:#eee}.contact-person strong{display:block;font-size:12px;font-weight:600}.contact-person small{font-size:11px;color:#a5a5af}.contact-person>svg{width:17px;margin-left:10px}.contact-person:hover strong{color:#ff8389}.contact-form{padding-top:4px}.contact-form fieldset{border:0;padding:0;margin:0 0 30px}.contact-form legend{font-size:14px;font-weight:500;margin-bottom:16px}.service-options{display:flex;flex-wrap:wrap;gap:8px}.service-options label{cursor:pointer;position:relative}.service-options input{position:absolute;width:1px;height:1px;opacity:0}.service-options span{min-height:43px;display:flex;align-items:center;gap:9px;font-size:11px;padding:9px 13px;border:1px solid #68686f;border-radius:3px;background:#0d0d0e;transition:background .2s,border-color .2s}.service-options svg{width:15px;height:15px}.service-options input:checked+span{border-color:#fa444e;background:#271114;color:#ffb9bd}.service-options input:focus-visible+span{outline:2px solid #ff6569;outline-offset:4px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}.field{min-width:0;margin-bottom:22px}.field label{font-size:12px;display:block;margin-bottom:10px;color:#e0e0e3}.field label span{font-size:10px;color:#9999a2}.field input{min-width:0;width:100%;height:51px;background:#111113;border:1px solid #59595f;border-radius:3px;color:#fff;padding:14px 13px;font-size:12px}.field input::placeholder{color:#98989f}.field input:focus{border-color:#ff6569;outline:2px solid #ff656950;outline-offset:2px}.form-submit{width:100%;justify-content:space-between;margin-top:4px}.form-submit img{filter:brightness(0) invert(1)}.form-note{font-size:10px;color:#92929c;line-height:1.9;margin-top:16px;max-width:62ch}.form-note a{text-decoration:underline;text-underline-offset:3px}.form-status{font-size:12px;color:#bdbdc5;margin-top:16px}.form-status a{color:#ff8e94;text-decoration:underline}
.site-footer{border-top:1px solid #2b2b30;padding-block:52px 32px}.footer-main{display:flex;align-items:center;gap:64px;margin-bottom:44px}.footer-brand{width:218px;height:54px}.footer-main p{font-size:12px;color:#a2a2aa;line-height:1.8}.footer-main>.text-link{margin-left:auto}.footer-bottom{display:flex;gap:24px;align-items:center;border-top:1px solid #222226;padding-top:27px;font-size:10px;color:#8e8e97}.footer-bottom span:last-child{margin-left:auto}.footer-bottom a{min-height:44px;display:inline-flex;align-items:center}.footer-bottom a:hover{color:#fff}.whatsapp-float{position:fixed;right:27px;bottom:26px;z-index:30;display:flex;align-items:center;gap:14px}.whatsapp-float>span:first-child{background:#171719;color:#e0e0e5;border:1px solid #48484e;padding:8px 13px;border-radius:5px;font-size:11px;box-shadow:0 5px 20px #0005;transition:opacity .2s,transform .2s}.whatsapp-bubble{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:#25d366;box-shadow:0 5px 26px #0008;border:1px solid #55ec8c;transition:transform .3s var(--ease),background .2s}.whatsapp-bubble img{filter:brightness(0) invert(1)}.whatsapp-float:hover .whatsapp-bubble{transform:translateY(-4px);background:#1fc45d}.contact-visible .whatsapp-float>span:first-child{opacity:0;transform:translateX(5px);pointer-events:none}
.reveal-ready .section-heading,.reveal-ready .redesign-copy,.reveal-ready .process-list li{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .8s var(--ease)}.reveal-ready .in-view{opacity:1;transform:none}.hero-content{animation:hero-arrive .85s var(--ease) both}@keyframes hero-arrive{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.legal-main{padding-block:150px 100px;min-height:80svh}.legal-main .container{max-width:850px}.legal-main h1{font-size:48px;max-width:none;margin-bottom:32px}.legal-main h2{font-size:23px;margin-block:36px 14px}.legal-main p,.legal-main li{color:#b9b9c0;font-size:15px;margin-block:14px}.legal-main a{text-decoration:underline;text-underline-offset:3px}.legal-main ul{padding-left:24px;list-style:disc}
@media(min-width:1700px){:root{--container:1440px}h1{font-size:104px}.hero-description{font-size:17px}.hero{max-height:940px}.project-image{aspect-ratio:1.52}}
@media(max-width:1199px){.container{width:calc(100% - 72px)}.desktop-nav{gap:19px}.brand{width:170px}.header-inner{gap:24px}h1{font-size:76px}.hero{min-height:660px}.hero-actions{gap:22px}.section-space{padding-block:88px}h2{font-size:41px}.service{padding-inline:25px}.service h3{font-size:25px}.redesign-layout,.faq-layout{gap:42px}.redesign-copy h2{font-size:33px}.contact-layout{gap:55px}.contact-copy h2{font-size:54px}.form-row{grid-template-columns:1fr;gap:0}.process-list{gap:32px}.footer-bottom span:last-child{display:none}}
@media(max-width:959px){.desktop-nav{display:none}.header-cta{margin-left:auto}.menu-toggle{display:inline-grid}.header-inner{height:84px}.hero{padding-top:84px;min-height:650px}.hero-art img{object-position:63% center}.hero-shade{background:linear-gradient(90deg,#000b,#0004 70%),linear-gradient(0deg,#050505,transparent 30%)}h1{font-size:69px}.section-heading{align-items:flex-start;gap:30px}.section-heading>p{max-width:29ch}.work-grid{gap:25px}.services-grid{grid-template-columns:1fr;margin-top:44px}.service{position:relative;padding:34px 0 34px 76px!important;border:0;border-top:1px solid #38383c;display:grid;grid-template-columns:1fr 1fr;gap:0 34px}.service-icon{position:absolute;top:39px;left:0;width:29px}.service-context,.service h3,.service>p:not(.service-context){grid-column:1}.service h3 br{display:none}.service>p:not(.service-context){max-width:46ch}.check-list{grid-column:2;grid-row:2 / span 2;margin-top:0;align-content:center}.service-link{grid-column:1 / -1;padding-top:18px}.service-footnote{margin-top:16px}.redesign-layout{grid-template-columns:1fr;gap:36px}.redesign-copy h2{font-size:41px}.redesign-copy>p:not(.section-label){max-width:60ch}.comparison-wrap{width:100%;max-width:800px}.process-list{grid-template-columns:1fr;gap:0;margin-top:40px}.process-list li{padding:27px 50px 30px 70px;min-height:140px}.step-number{position:absolute;left:0;top:29px}.process-list p{max-width:65ch}.process-list h3{font-size:21px;margin-bottom:12px}.faq-layout{grid-template-columns:1fr;gap:38px}.faq-intro br{display:none}.contact-layout{gap:36px}.contact-copy h2{font-size:44px}.footer-main{gap:30px}.footer-brand{width:180px}.whatsapp-float>span:first-child{display:none}.work-section{padding-top:60px}}
@media(max-width:639px){.container{width:calc(100% - 40px)}.header-inner{height:76px;gap:16px}.brand{width:162px;height:40px}.header-cta{font-size:11px;gap:7px;margin-left:auto}.header-cta svg{width:15px}.menu-toggle{width:38px;height:38px;padding:8px;border-color:#666}.hero{padding-top:76px;height:calc(100svh - 40px);min-height:710px;max-height:800px;align-items:flex-start}.hero-content{padding-block:80px 60px}.hero-art img{object-position:67% center;transform:scale(1.025)}.hero-shade{background:linear-gradient(90deg,#000c,#0005),linear-gradient(0deg,#050505 2%,transparent 60%)}.hero-intro{font-size:11px;margin-bottom:24px;gap:10px}h1{font-size:53px;line-height:1.09}.hero-description{font-size:14px;max-width:35ch;margin-top:24px;line-height:1.9}.hero-actions{flex-direction:column;align-items:flex-start;gap:13px;margin-top:28px}.button{font-size:12px;min-height:53px;padding:15px 21px;gap:26px}.hero-note{font-size:9px;max-width:31ch;margin-top:17px;line-height:1.8}.hero-bottom{bottom:24px;font-size:9px}.hero-bottom span:last-child{display:none}.hero-bottom span:first-child{color:#a5a5ad}.section-space{padding-block:64px}h2{font-size:35px;line-height:1.16}.section-heading{display:block;margin-bottom:33px}.section-label{font-size:11px;margin-bottom:18px;gap:9px}.section-label::before{width:16px}.section-heading>p{margin-top:20px;font-size:13px;max-width:42ch}.section-heading>p br{display:none}.work-section{padding-top:44px}.work-grid{grid-template-columns:1fr;gap:39px}.project-image{aspect-ratio:1.39}.browser-bar{height:25px;font-size:8px}.project-image>img{height:calc(100% - 25px)}.project-info{margin-top:17px}.project-info h3{font-size:21px}.project-category{font-size:10px}.project-caption{font-size:12px;max-width:40ch}.work-disclosure{margin-top:28px;font-size:10px;line-height:1.8}.services-grid{margin-top:33px}.service{display:flex;padding:29px 0 30px 49px!important;gap:0}.service-icon{top:31px;width:25px}.service-context{font-size:10px;margin-bottom:13px}.service h3{font-size:25px;margin-bottom:15px}.service>p:not(.service-context){font-size:12px;line-height:1.85}.check-list{margin-top:19px;gap:8px}.check-list li{font-size:11px}.service-link{font-size:11px;padding-top:19px;min-height:45px}.service-footnote{font-size:9px;margin-top:6px}.redesign-copy h2{font-size:34px}.redesign-copy>p:not(.section-label){font-size:13px;margin-top:21px}.redesign-copy .text-link{margin-top:16px;font-size:12px}.redesign-layout{gap:28px}.compare-label{top:9px;font-size:9px;padding:4px 9px}.compare-old{left:8px}.compare-new{right:8px}.comparison-caption{font-size:9px}.process-list li{padding-left:42px;padding-right:24px}.process-list h3{font-size:19px;max-width:22ch}.process-list p{font-size:12px}.process-list li>svg{width:17px;top:31px}.step-number{font-size:11px}.faq-intro{font-size:13px;margin-top:19px}.faq-layout{gap:30px}.faq-list summary{font-size:12px;padding-block:22px;gap:18px}.faq-list details p{font-size:12px;padding-right:0;padding-bottom:22px}.contact-layout{grid-template-columns:1fr;gap:42px}.contact-copy h2{font-size:44px}.contact-copy h2 br:last-child{display:none}.contact-copy>p:not(.section-label){font-size:13px;margin-top:23px}.contact-person{margin-top:24px}.contact-form legend{font-size:13px}.service-options span{font-size:10px;padding:9px 10px;gap:7px}.form-row{grid-template-columns:1fr}.field input{font-size:16px;height:53px}.field input::placeholder{font-size:12px}.form-submit{font-size:13px}.form-note{font-size:10px}.site-footer{padding-top:35px;padding-bottom:102px}.footer-main{flex-wrap:wrap;gap:19px;margin-bottom:24px}.footer-brand{width:178px;height:48px}.footer-main p{font-size:10px;margin-left:auto}.footer-main>.text-link{margin-left:0;font-size:11px}.footer-bottom{display:flex;flex-wrap:wrap;gap:0 16px;padding-top:18px;font-size:9px}.footer-bottom>span{flex-basis:100%}.whatsapp-float{right:18px;bottom:20px;bottom:max(20px,env(safe-area-inset-bottom))}.whatsapp-bubble{width:60px;height:60px}.whatsapp-bubble img{width:31px;height:31px}.legal-main{padding-top:118px}.legal-main h1{font-size:36px}.legal-main h2{font-size:21px}.legal-main p,.legal-main li{font-size:14px}}
@media(max-width:374px){.container{width:calc(100% - 32px)}.brand{width:142px}.header-cta{display:none}.menu-toggle{margin-left:auto}h1{font-size:47px}.hero{min-height:700px}.hero-content{padding-top:71px}.hero-description{font-size:13px}.hero-note{max-width:30ch}h2{font-size:31px}.redesign-copy h2{font-size:30px}.contact-copy h2{font-size:39px}.footer-main p{margin-left:0}.service-options span{font-size:10px}.service{padding-left:42px!important}}
@media(max-height:650px) and (min-width:640px){.hero{min-height:660px;height:auto}.hero-content{padding-block:65px 100px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important;transition-delay:0s!important}.hero-art img{transform:none!important;will-change:auto}.reveal-ready .section-heading,.reveal-ready .redesign-copy,.reveal-ready .process-list li{opacity:1;transform:none}.project:hover .project-image>img,.button:hover,.whatsapp-float:hover .whatsapp-bubble{transform:none}}
.project-demo-badge{position:absolute;z-index:3;right:13px;top:40px;padding:8px 12px;border:1px solid #ff737b;border-radius:4px;background:#d91f32e8;box-shadow:0 8px 18px #0007;color:#fff;font-size:11px;font-weight:600;line-height:1.2;pointer-events:none}

/* Keep the complete first message and a glimpse of the work in the first viewport. */
.brand{mix-blend-mode:screen}
.site-header{background:#000}
.button-red{background:#df202a}
.hero{height:calc(100svh - 170px);min-height:640px}
.reveal-ready .process-list li.in-view{opacity:1;transform:none}
@media(max-width:1199px) and (min-width:640px){.hero{min-height:630px}}
@media(max-width:959px) and (min-width:640px){.hero{height:calc(100svh - 140px);min-height:650px}}
@media(max-width:639px){
  .header-cta{white-space:nowrap;font-size:10px}
  .header-inner{gap:12px}
  .hero{height:calc(100svh - 104px);min-height:560px;max-height:740px}
  .hero-content{padding-block:46px 52px}
  h1{font-size:44px;max-width:none;line-height:1.1}
  .hero-intro{margin-bottom:21px}
  .hero-description{margin-top:20px;font-size:13px;line-height:1.85;max-width:38ch}
  .hero-actions{margin-top:24px;gap:8px}
  .hero-note{max-width:none;margin-top:12px}
  .hero-bottom{bottom:20px}
}
@media(max-width:639px) and (max-height:730px){.hero-content{padding-top:30px}.hero-note,.hero-bottom{display:none}}
@media(max-width:374px){h1{font-size:39px}.hero{min-height:570px}.hero-description{font-size:12px}.hero-content{padding-top:39px}.hero-note{display:none}}

/* Kokonut UI: Flow Field, Spotlight Cards and Card Flip, adapted for CAT N'CLAW. */
:root{--ease-flip:cubic-bezier(.77,0,.175,1)}
.hero{display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:20px;height:auto;min-height:730px;max-height:none;padding-bottom:28px;background:#050505}
.hero-flow{position:absolute;inset:0;width:100%;height:100%;z-index:-2;pointer-events:none;mix-blend-mode:screen;opacity:.95;mask-image:linear-gradient(90deg,#0002,#0007 42%,#000 66%)}
.hero-shade{z-index:-1;background:radial-gradient(ellipse 64% 74% at 58% 45%,transparent 8%,#050505a8 80%),linear-gradient(90deg,#050505d4,#0505053b 54%,#05050572),linear-gradient(0deg,#050505,transparent 34%)}
.hero-content{padding-block:42px 18px}
.hero h1{font-size:80px}
.hero-description{max-width:46ch;font-size:15px;line-height:1.8;margin-top:24px}
.hero-actions{margin-top:28px}
.spotlight-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;perspective:900px}
.spotlight-card{position:relative;isolation:isolate;display:flex;align-items:center;gap:16px;padding:20px;min-height:96px;border:1px solid #ffffff26;border-radius:6px;background:#111113e8;overflow:hidden;transition:opacity .2s,transform .3s var(--ease),border-color .2s}
.spotlight-card::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 10% 0%,#ee292f27,transparent 70%);opacity:.45;transition:opacity .25s}
.spotlight-card::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(110deg,transparent 15%,#ffffff0d 45%,transparent 70%);transform:translateX(-120%);transition:transform .65s var(--ease)}
.spotlight-icon{display:grid;place-items:center;flex-shrink:0;width:38px;height:38px;color:#ff6e73;background:#ee292f12;border:1px solid #ee292f30;border-radius:6px}
.spotlight-icon svg{width:19px;height:19px}
.spotlight-card h2{font-size:14px;line-height:1.4;margin-bottom:4px}
.spotlight-card p{font-size:11px;line-height:1.6;color:#aaaab2;max-width:30ch}
.spotlight-arrow{width:15px;height:15px;margin-left:auto;color:#a3a3ad}
.spotlight-card:focus-visible{border-color:#fa6a73}
.spotlight-card:focus-visible::before{opacity:1}
.services-section{background:#0b0b0d;padding-block:60px 68px}
.services-section .section-heading{margin-bottom:36px}
.services-section h2{font-size:42px}
.service-flips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:stretch}
.flip-card{perspective:1600px;min-width:0}
.flip-inner{position:relative;height:100%;transform-style:preserve-3d;transition:transform .6s var(--ease-flip)}
.flip-ready .flip-inner{display:grid;height:auto;min-height:458px;will-change:transform;transform-style:flat}
/* 3D only while a card turns or shows its back: at rest the front looks identical flat, and the
   animated LED edge is then far cheaper to draw while the page scrolls. */
.flip-ready.is-turning .flip-inner,.flip-ready.is-flipped .flip-inner{transform-style:preserve-3d}
.flip-ready.is-flipped .flip-inner{transform:rotateY(180deg)}
.flip-front,.flip-back{border-radius:8px;background:#121214;-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden}
.flip-ready .flip-front,.flip-ready .flip-back{grid-area:1 / 1;min-height:450px;margin:4px}
.flip-front{position:relative;display:flex;flex-direction:column}
.flip-ready .flip-front{transform:translateZ(1px)}
.flip-back{--flip-pad:30px;--close-size:36px;position:relative;padding:var(--flip-pad);display:flex;flex-direction:column;align-items:flex-start;background:#09090b}
.flip-ready .flip-back{transform:rotateY(180deg) translateZ(1px)}
.flip-back>:not(.flip-gradient,.flip-close){position:relative;z-index:1}
/* Soft blobs drawn as radial gradients: same look as a blurred layer, without a blur filter repainting every frame of the flip. */
.flip-gradient{position:absolute;z-index:0;inset:-62%;overflow:hidden;pointer-events:none;background:linear-gradient(120deg,#10070a,#09090b 55%,#12080b);opacity:.82}
/* No blend mode either: lighter colors give the same pink as "screen" without an extra compositing pass per blob. */
.gradient-blob{position:absolute;display:block;width:76%;height:76%;border-radius:50%;opacity:.86;background:radial-gradient(circle closest-side,var(--blob) 60%,color-mix(in srgb,var(--blob) 60%,transparent) 82%,transparent)}
.gradient-one{top:5%;left:-18%;--blob:#ec5c62;animation:gradient-vertical 30s ease infinite}
.gradient-two{top:15%;right:-22%;--blob:#ff9ea5;animation:gradient-circle 20s reverse infinite}
.gradient-three{bottom:-20%;left:5%;--blob:#c54b56;animation:gradient-circle 40s linear infinite}
.gradient-four{right:0;bottom:-12%;--blob:#f7727b;animation:gradient-horizontal 40s ease infinite}
.gradient-five{top:30%;left:32%;width:60%;height:60%;--blob:#b3424d;animation:gradient-circle 20s ease infinite}
/* While a card turns nothing inside it animates, so the flip only moves finished layers. */
.flip-card:not(.is-flipped) .gradient-blob,.flip-card.is-flipped .flip-frame-sheet,.flip-card.is-turning .gradient-blob,.flip-card.is-turning .flip-frame-sheet,.service-flips.is-offscreen .gradient-blob,.service-flips.is-offscreen .flip-frame-sheet,.redesign-tilt-scene.is-offscreen .flip-frame-sheet{animation-play-state:paused}
@keyframes gradient-horizontal{0%,100%{transform:translateX(-50%) translateY(-10%)}50%{transform:translateX(50%) translateY(10%)}}
@keyframes gradient-circle{0%{transform:rotate(0deg)}50%{transform:rotate(180deg)}100%{transform:rotate(360deg)}}
@keyframes gradient-vertical{0%,100%{transform:translateY(-50%)}50%{transform:translateY(50%)}}
/* Aceternity Background Gradient: 4px animated edge plus glow, one frame per card between the two faces.
   It turns with the card and fades out on the way to the back, which has its own gradient. */
.service-flips{--gradient-a:#ee292f;--gradient-b:#ff9aa2;--gradient-c:#7a0f1d;--gradient-d:#ff3d4a}
.flip-frame{display:none}
.flip-ready .flip-frame{display:block;position:relative;grid-area:1 / 1;border-radius:12px;pointer-events:none;box-shadow:0 0 26px 2px #ee292f59,0 0 60px 8px #ff6b7424;transition:opacity .25s linear .35s,visibility 0s linear .35s}
.flip-ready.is-flipped .flip-frame{opacity:0;visibility:hidden;transition:opacity .25s linear,visibility 0s linear .25s}
.flip-frame-edge{position:absolute;inset:0;overflow:hidden;border-radius:inherit}
.flip-frame-sheet{position:absolute;top:0;left:0;width:400%;height:100%;background-image:radial-gradient(circle farthest-side at 0 100%,var(--gradient-a),transparent),radial-gradient(circle farthest-side at 100% 0,var(--gradient-b),transparent),radial-gradient(circle farthest-side at 100% 100%,var(--gradient-c),transparent),radial-gradient(circle farthest-side at 0 0,var(--gradient-d),#141316);background-size:100% 400%;background-position:0 50%;animation:background-gradient 5s ease-in-out infinite}
@keyframes background-gradient{0%,100%{transform:translateX(0)}50%{transform:translateX(-75%)}}
.flip-card:not(.flip-ready) .flip-front,.flip-card:not(.flip-ready) .flip-close{display:none}
.service-visual{position:relative;height:235px;flex-shrink:0;overflow:hidden;background:#19191d;border-bottom:1px solid #ffffff0b}
.service-visual::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,#121214 0%,transparent 50%)}
.visual-caption{position:absolute;bottom:20px;left:26px;z-index:1;color:#b3b3bf;font-size:10px}
.redesign-preview{display:flex;position:absolute;left:30px;right:30px;top:28px;height:176px;transform:rotate(-6deg);border:1px solid #66666d;border-radius:3px;overflow:hidden}
.redesign-preview img{width:50%;height:100%;object-fit:cover;object-position:left top}
.redesign-preview img+img{object-position:right top;border-left:2px solid #f7555e}
.redesign-preview>span{position:absolute;inset:0;display:grid;place-items:center}
.redesign-preview svg{width:30px;height:30px;padding:5px;background:#ed2637;border-radius:50%;color:white}
.website-preview{position:absolute;top:27px;left:40px;right:-24px;transform:rotate(-7deg);height:215px;border:1px solid #686871;border-radius:5px;overflow:hidden;box-shadow:0 18px 36px #0008}
.website-preview img{width:100%;height:100%;object-fit:cover;object-position:top}
.preview-chrome{height:17px;display:flex;gap:4px;align-items:center;padding:0 8px;background:#27272b}
.preview-chrome span{width:4px;height:4px;border-radius:50%;background:#80808c}
.visual-local{background:#18181c}
.map-lines{position:absolute;inset:-80px;background:repeating-linear-gradient(0deg,transparent 0 62px,#77778424 62px 65px),repeating-linear-gradient(90deg,transparent 0 94px,#77778424 94px 98px);transform:rotate(-25deg)}
.map-marker{position:absolute;left:calc(50% - 25px);top:25px;display:grid;place-items:center;width:50px;height:58px;color:#fa4352}
.map-marker svg{width:50px;height:50px;stroke-width:1.2;fill:#36131b}
.local-preview{position:absolute;top:102px;left:25px;right:25px;display:flex;align-items:center;gap:12px;padding:17px 14px;background:#252529;border:1px solid #65656d;border-radius:5px;box-shadow:0 10px 28px #0005}
.local-preview strong{display:block;font-size:13px;font-weight:500}
.local-preview small{display:block;font-size:9px;color:#aaaab5;margin-top:3px}
.local-initial{width:34px;height:34px;display:grid;place-items:center;background:#ee292f19;color:#fa7a82;border-radius:4px}
.local-initial svg{width:19px;height:19px}
.local-preview>svg{margin-left:auto;color:#abaeb8;width:19px}
.flip-heading{position:relative;padding:22px 28px 30px;margin-top:auto}
.service-number{display:block;font-size:10px;font-weight:600;color:#ff727b;margin-bottom:22px}
.flip-heading .service-context{font-size:11px;margin-bottom:10px;color:#aaaab3}
.flip-heading h3{font-size:27px;line-height:1.2;padding-right:38px}
.flip-hint{position:absolute;bottom:29px;right:25px;width:38px;height:38px;display:grid;place-items:center;color:#ff7a83;border:1px solid #87414a;border-radius:50%;background:#2c161b}
.flip-hint svg{width:17px;height:17px}
.flip-trigger{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:8px;background:transparent;color:inherit}
.flip-trigger:focus-visible{outline-offset:-4px;outline:2px solid #ff7a83}
.flip-back h3{font-size:25px;line-height:1.2;margin:7px 0 22px;max-width:19ch}
.flip-back>.service-number{margin:0 0 18px var(--close-size)}
.flip-back>p{font-size:13px;color:#b5b5be;line-height:1.85}
.flip-back .check-list{margin:24px 0 28px;gap:10px}
.flip-back .check-list li{font-size:11px;line-height:1.6;align-items:flex-start}
.flip-back .check-list svg{color:#ff6975;margin-top:3px}
.flip-back .service-link{width:100%;border-top:1px solid #34343c;padding-top:20px;font-size:12px;justify-content:space-between;line-height:1.6}
.flip-close{position:absolute;z-index:2;top:calc(var(--flip-pad) + 8px - var(--close-size) / 2);left:calc(var(--flip-pad) - 10px);width:var(--close-size);height:var(--close-size);border:1px solid #6b6b75;border-radius:50%;padding:8px}
.flip-close svg{width:17px;height:17px}
.flip-back .check-list li{transition:transform .35s var(--ease),opacity .35s}
.flip-ready:not(.is-flipped) .flip-back .check-list li{opacity:0;transform:translateX(-10px)}
.is-flipped .check-list li:nth-child(1){transition-delay:.14s}
.is-flipped .check-list li:nth-child(2){transition-delay:.19s}
.is-flipped .check-list li:nth-child(3){transition-delay:.24s}
.services-section .service-footnote{margin-top:24px;max-width:110ch}
.claw-signature{position:relative;overflow:hidden;background:#101011;border-block:1px solid #25252a;padding-block:34px}
.claw-signature-inner{display:grid;grid-template-columns:1.2fr .8fr;gap:72px;align-items:center}
.claw-signature-art{position:relative;order:1;overflow:hidden;aspect-ratio:1.78;border:1px solid #3e3e44;border-radius:6px;background:#070707;box-shadow:0 20px 70px #0008}
.claw-signature-art::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#05050500 45%,#050505a8),linear-gradient(0deg,#050505b8,transparent 42%)}
.claw-signature-art img{width:100%;height:100%;object-fit:cover;object-position:center;opacity:.78}
.claw-signature-copy{order:2}
.claw-signature-copy h2{font-size:48px;line-height:1.08}
.claw-signature-copy>p:not(.section-label){max-width:34ch;color:#b3b3bb;font-size:14px;line-height:1.9;margin-top:24px}
.claw-signature-copy .text-link{margin-top:26px;font-size:12px}
.attract-target{position:relative;isolation:isolate;overflow:visible}
.attract-target> :not(.attract-particles){position:relative;z-index:1}
.attract-particles{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:visible}
.attract-particle{position:absolute;top:50%;left:50%;width:4px;height:4px;border-radius:50%;background:currentColor;color:#ff6670;opacity:.46;box-shadow:0 0 10px currentColor;transform:translate(var(--particle-x),var(--particle-y));transition:transform .55s var(--ease),opacity .2s,scale .55s var(--ease)}
.attract-target.is-attracting .attract-particle{opacity:1;transform:translate(0,0) scale(.62)}
.button-red.attract-target{overflow:visible}
.form-submit.attract-target{overflow:visible}
.whatsapp-float.attract-target{overflow:visible}
.matrix-line{display:inline-block;white-space:nowrap}
.matrix-visual{display:inline-flex;align-items:baseline}
.matrix-char{display:inline-block;transition:color .1s ease,text-shadow .1s ease}
.matrix-char.is-decoding{color:#ff4d59;text-shadow:0 0 17px #ee292f;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-variant-numeric:tabular-nums}
.matrix-char.is-decoding::selection{color:#fff}
@media(hover:hover) and (pointer:fine){
  .spotlight-grid.has-focus .spotlight-card:not(.is-active){opacity:.55}
  .spotlight-card.is-active{border-color:#ae4d59}
  .spotlight-card.is-active::before{opacity:1}
  .spotlight-card.is-active::after{transform:translateX(120%)}
}
@media(min-width:1700px){.hero{min-height:790px}.hero h1{font-size:96px}.hero-content{padding-block:50px 24px}}
@media(max-width:1199px){
  .hero{min-height:700px}.hero h1{font-size:72px}
  .spotlight-card{padding:17px;gap:12px}.spotlight-card h2{font-size:13px}.spotlight-card p{font-size:10px}.spotlight-arrow{display:none}
  .service-flips{gap:16px}.flip-back{--flip-pad:24px}.flip-back h3{font-size:23px}.flip-heading{padding:22px}.flip-heading h3{font-size:24px}.local-preview{left:15px;right:15px;padding:15px 10px;gap:8px}.local-preview small{font-size:8px}.flip-back .check-list li{font-size:10px}.claw-signature-inner{gap:42px}.claw-signature-copy h2{font-size:41px}
}
@media(max-width:959px){
  .hero{min-height:680px}.hero h1{font-size:66px}.hero-description{font-size:14px;max-width:44ch}.hero-content{padding-top:40px}
  .spotlight-card{flex-direction:column;align-items:flex-start;padding:16px;gap:10px}.spotlight-icon{width:30px;height:30px}.spotlight-icon svg{width:16px;height:16px}
  .services-section h2{font-size:36px}.service-flips{grid-template-columns:repeat(2,minmax(0,1fr))}.flip-card:last-child{grid-column:1/-1;max-width:calc(50% - 8px);width:100%}.flip-back .check-list{grid-column:auto;grid-row:auto}.flip-back .check-list li{font-size:11px}.flip-back .service-link{grid-column:auto}
}
@media(max-width:639px){
  .hero{min-height:0;height:auto;max-height:none;padding-bottom:22px;gap:14px}
  .hero h1{font-size:44px;line-height:1.1}.hero-content{padding-top:40px;padding-bottom:12px}.hero-intro{font-size:10px;padding-right:24px;margin-bottom:20px}
  .hero-description{font-size:13px;line-height:1.85;margin-top:20px;max-width:38ch}.hero-actions{margin-top:24px;gap:8px}
  .hero-flow{mask-image:linear-gradient(90deg,#0005,#000);opacity:.75}
  .hero-shade{background:linear-gradient(90deg,#050505bd,#0505058c 70%,#05050545),linear-gradient(0deg,#050505,transparent 36%)}
  .spotlight-grid{gap:8px}.spotlight-card{min-height:94px;padding:12px 8px;gap:9px;align-items:center;text-align:center}.spotlight-card h2{font-size:10px;line-height:1.4;margin:0}.spotlight-card p{display:none}.spotlight-icon{width:29px;height:29px}
  .services-section{padding-block:42px 48px}.services-section h2{font-size:33px}.services-section .section-heading{margin-bottom:28px}.services-section .section-heading>p{font-size:12px;margin-top:16px}
  .service-flips{grid-template-columns:1fr;gap:20px}.flip-card:last-child{grid-column:auto;max-width:none}.flip-ready .flip-front,.flip-ready .flip-back{min-height:545px}
  .flip-heading{padding:24px}.flip-heading h3{font-size:28px}.service-number{margin-bottom:20px}.flip-heading .service-context{font-size:11px}.service-visual{height:238px}.flip-back{--flip-pad:26px;--close-size:44px}.flip-back h3{font-size:26px;max-width:20ch}.flip-back .check-list li{font-size:12px}.flip-back .service-link{font-size:12px;padding-top:22px;min-height:50px}.flip-back>p{font-size:13px}
  .local-preview{left:28px;right:28px;padding:17px 14px;gap:12px}.local-preview small{font-size:9px}.services-section .service-footnote{font-size:10px;margin-top:24px}
  .claw-signature{padding-block:28px 32px}.claw-signature-inner{grid-template-columns:1fr;gap:25px}.claw-signature-copy{order:1}.claw-signature-art{order:2;aspect-ratio:1.55}.claw-signature-copy h2{font-size:35px}.claw-signature-copy>p:not(.section-label){font-size:13px;margin-top:19px}.claw-signature-copy .text-link{margin-top:18px;font-size:11px}.attract-particle{width:3px;height:3px}
}
@media(max-width:374px){.hero h1{font-size:39px}.hero-content{padding-top:36px}.hero-intro{font-size:9px}.hero-description{font-size:12px}.spotlight-card h2{font-size:9px}.spotlight-card{padding-inline:5px}.flip-back{--flip-pad:24px}.flip-back h3{font-size:24px}.flip-back .check-list li{font-size:11px}.flip-heading h3{font-size:25px}}
@media(pointer:coarse){.flip-back{--close-size:44px}}
@media(prefers-reduced-motion:reduce){
  .spotlight-card{transform:none!important}.flip-ready .flip-inner,.flip-ready .flip-front,.flip-ready .flip-back{transform:none!important}
  .flip-ready .flip-back{visibility:hidden}.flip-ready.is-flipped .flip-back{visibility:visible}.flip-ready.is-flipped .flip-front{visibility:hidden}
  .attract-particles{display:none}.matrix-char{transition:none}.matrix-char.is-decoding{color:inherit;text-shadow:none;font-family:inherit}
}

/* Final composition: keep the motion field on the quiet side of the mark. */
.hero-art{z-index:-3}
.hero-art img{opacity:.92;object-fit:cover;object-position:center center;transform:none}
.hero{height:100svh;min-height:720px;max-height:none;padding-top:40px;padding-bottom:40px;justify-content:space-between}
.hero-content{padding-block:64px 0}
.hero-shade{background:linear-gradient(90deg,#050505b8 0%,#05050555 45%,#05050518 100%),linear-gradient(0deg,#050505,transparent 36%)}
.services-section{position:relative;isolation:isolate;overflow:hidden}
.services-section>.container{position:relative;z-index:1}
.services-section::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,#0b0b0dcc 0%,#0b0b0d4d 50%,#0b0b0db3 100%),linear-gradient(0deg,#0b0b0d 0%,transparent 40%)}
/* Ghost Fibers: the canvas sticks to the viewport while the section scrolls, so it never draws more than one screen. */
.services-fibers{position:absolute;inset:0;z-index:-2;pointer-events:none}
.services-fibers canvas{position:sticky;top:0;display:block;width:100%;height:min(100%,100svh)}
.whatsapp-float.attract-target{position:fixed;right:27px;bottom:26px;width:max-content;max-width:calc(100vw - 36px);height:64px;min-height:0;display:flex;flex:0 0 auto;align-items:center;gap:14px;z-index:50;isolation:isolate;overflow:visible}
.whatsapp-bubble{position:relative;isolation:isolate}
.whatsapp-bubble>img{position:relative;z-index:1}
.whatsapp-bubble .attract-particles{inset:-34px}
.whatsapp-float .attract-particle{color:#25d366;background:currentColor;box-shadow:0 0 11px currentColor}
@media(max-width:639px){
  .hero-art img{opacity:.68;object-fit:cover;object-position:center center}
  .hero{height:100svh;min-height:650px;padding-top:76px;padding-bottom:22px}
  .hero-content{padding-block:70px 0}
  .whatsapp-float.attract-target{right:18px;bottom:max(20px,env(safe-area-inset-bottom));height:60px;gap:0}
  .whatsapp-float.attract-target .attract-particles{display:none}
}

/* Aceternity 3D Card: one perspective surface, with raised content. */
.redesign-tilt-scene{perspective:2000px}
.redesign-tilt-surface{position:relative;padding:42px;border:1px solid #333336;border-radius:8px;background:#0d0d0f;transition:transform 200ms linear;gap:44px}
.redesign-tilt-surface.is-3d,.redesign-tilt-surface.is-3d>.redesign-copy,.redesign-tilt-surface.is-3d>.comparison-wrap{transform-style:preserve-3d}
/* Calm take on the card gradient: darker reds, 2px edge, slower loop. It tilts with the panel. */
.tilt-frame{position:absolute;inset:-1px;z-index:-1;border-radius:9px;pointer-events:none;box-shadow:0 0 36px #ee292f1c;--gradient-a:#a51c24;--gradient-b:#e0343b;--gradient-c:#4a0b11;--gradient-d:#7d131c}
.tilt-frame::after{content:'';position:absolute;inset:2px;border-radius:7px;background:#0d0d0f}
.tilt-frame .flip-frame-edge{opacity:.8}
.tilt-frame .flip-frame-sheet{animation-duration:9s}
.redesign-tilt-surface>.redesign-copy,.redesign-tilt-surface>.comparison-wrap{transition:transform 200ms linear,opacity .7s var(--ease)}
.redesign-tilt-surface.is-tilted>.redesign-copy{transform:translateZ(30px)}
.redesign-tilt-surface.is-tilted>.comparison-wrap{transform:translateZ(55px)}
.redesign-tilt-surface .redesign-copy h2{font-size:36px}
.redesign-tilt-surface .redesign-copy>p:not(.section-label){font-size:13px}
@media(max-width:959px){.redesign-tilt-surface{padding:28px;gap:28px}}
@media(max-width:639px){.redesign-tilt-surface{padding:20px;gap:26px}.redesign-tilt-surface .redesign-copy h2{font-size:29px}}
@media(prefers-reduced-motion:reduce){.redesign-tilt-surface,.redesign-tilt-surface.is-tilted>.redesign-copy,.redesign-tilt-surface.is-tilted>.comparison-wrap{transform:none!important}}

/* Aceternity Macbook Scroll: the display opens on its hinge and the view zooms into it. */
.macbook-intro{text-align:center;margin:0 auto 42px;max-width:680px}
.macbook-intro .section-label{justify-content:center}
.macbook-intro>p:last-child{margin-top:20px;color:var(--muted);font-size:14px}
.macbook-showcase{position:relative}
.macbook-stage{position:relative}
.macbook-screen{position:relative;width:100%;margin-inline:auto;background:#080809;border:2px solid #242426;border-radius:8px}
/* The screen lays out by its own width (container queries), not the viewport's: inside the notebook a phone gets the same
   two-column page as a computer, scaled down to fit, instead of a cropped mobile layout. */
.macbook-screen-content{container:macbook-screen / inline-size;color:var(--text)}
.macbook-screen-page{padding:32px}
.macbook-page-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:28px}
.macbook-page-heading .section-label{font-size:13px;margin-bottom:14px}
.macbook-page-heading h3{font-size:40px;max-width:13ch}
.macbook-page-heading>p{font-size:12px;color:var(--muted);max-width:29ch;line-height:1.8}
.macbook-screen .work-grid{grid-template-columns:1fr 1fr;gap:24px}
.macbook-screen .project-image{aspect-ratio:1.43}
.macbook-screen .browser-bar{height:29px;font-size:9px}
.macbook-screen .project-image>img{height:calc(100% - 29px)}
.macbook-screen .project-demo-badge{font-size:12px;padding:9px 12px}
/* The demo brands are fictional, so the button to open each model carries the card. */
.macbook-project-link{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:50px;margin-top:18px;padding:13px 22px;border-radius:3px;background:var(--red);color:#fff;font-size:15px;font-weight:600;box-shadow:0 10px 26px #ee292f3d;transition:background .2s,transform .3s var(--ease),box-shadow .3s var(--ease)}
.macbook-project-link svg{width:18px;height:18px}
.project:hover .macbook-project-link{background:var(--red-hover);transform:translateY(-2px);box-shadow:0 14px 32px #ee292f5c}
.macbook-screen .work-disclosure{font-size:11px;line-height:1.7;margin-top:28px;max-width:none;color:#b1b1b9}
.macbook-base{display:none}
.macbook-showcase.is-enhanced .macbook-stage{position:sticky;top:0;height:100svh}
.macbook-showcase.is-enhanced .macbook-device{position:absolute;top:0;left:0;width:calc(512px*var(--k));transform-origin:0 0;perspective:calc(800px*var(--k));perspective-origin:50% calc(384px*var(--k))}
.macbook-showcase.is-enhanced .macbook-display{position:relative;z-index:2;height:calc(384px*var(--k));padding:calc(8px*var(--k));border-radius:calc(16px*var(--k));background:#010101;box-shadow:inset 0 0 0 calc(1px*var(--k)) #1c1c1f;transform-origin:50% 100%}
.macbook-showcase.is-enhanced .macbook-screen{height:100%;border:0;border-radius:calc(8px*var(--k));overflow:hidden}
.macbook-showcase.is-enhanced .macbook-screen-content{display:flex;flex-direction:column;justify-content:center;height:100%;transform-origin:0 0}
.macbook-showcase.is-enhanced .macbook-base{display:block;position:relative;z-index:1;zoom:var(--k)}
.macbook-base{width:512px;height:352px;border-radius:16px;background:#272729;overflow:hidden}
.macbook-hinge{position:relative;height:40px}
.macbook-hinge::after{content:'';position:absolute;top:0;left:10%;width:80%;height:16px;background:#050505}
.macbook-keyboard-area{display:flex}
.macbook-speaker{width:10%;height:160px;margin-top:8px;background-image:radial-gradient(circle,#08080a .5px,transparent .5px);background-size:3px 3px}
.macbook-keyboard{width:calc(80% - 8px);margin-inline:4px;padding:4px;border-radius:6px;background:#050505}
.macbook-key-row{display:flex;gap:2px;margin-bottom:2px}
.macbook-key{flex:none;padding:.5px;border-radius:4px;background:#ffffff33;box-shadow:0 10px 14px -8px #ffffff26}
.macbook-keycap{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:3.5px;background:#0a090d;box-shadow:inset 0 -.5px 2px #0d0d0f,inset -.5px 0 2px #0d0d0f}
.macbook-keycap.is-start{align-items:flex-end;justify-content:flex-start;padding:0 0 2px 4px}
.macbook-keycap.is-end{align-items:flex-end;justify-content:flex-end;padding:0 4px 2px 0}
.macbook-key-label{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;color:#fff;font-size:5px;font-weight:500;line-height:1.25;white-space:nowrap}
.macbook-keycap.is-start .macbook-key-label{align-items:flex-start}
.macbook-keycap.is-end .macbook-key-label{align-items:flex-end}
.macbook-key-label svg{width:6px;height:6px}
.macbook-fn-text{margin-top:4px}
.macbook-key-label.is-split{height:100%;justify-content:space-between;padding-block:4px}
.macbook-key-label.is-split>span{display:flex;width:100%;justify-content:flex-start;padding-left:4px}
.macbook-key-label.is-split>.is-right{justify-content:flex-end;padding:0 4px 0 0}
.macbook-touch-id{width:16px;height:16px;padding:1px;border-radius:50%;background:linear-gradient(#171717 20%,#000 50%,#171717 95%)}
.macbook-touch-id::after{content:'';display:block;width:100%;height:100%;border-radius:50%;background:#000}
.macbook-arrows{display:flex;flex:none;flex-direction:column;align-items:center;justify-content:flex-end;width:78.4px;height:24px;margin-top:2px;padding:.5px}
.macbook-arrows-row{display:flex}
.macbook-arrows .macbook-keycap{height:12px}
.macbook-caret{width:5px;height:4px;background:#fff;clip-path:polygon(50% 0,100% 100%,0 100%)}
.macbook-caret.is-left{transform:rotate(-90deg)}
.macbook-caret.is-down{transform:rotate(180deg)}
.macbook-caret.is-right{transform:rotate(90deg)}
.macbook-trackpad{width:40%;height:128px;margin:4px auto;border-radius:12px;box-shadow:inset 0 0 1px 1px #00000020}
.macbook-notch{position:absolute;bottom:0;left:calc(50% - 40px);width:80px;height:8px;border-radius:24px 24px 0 0;background:linear-gradient(to top,#272729,#050505)}
.macbook-sticker{position:absolute;bottom:16px;left:16px;width:64px;height:64px;padding:0;border:1px solid #626264;border-radius:5px;background:#101011;transform:rotate(-8deg);box-shadow:0 .5px 1px #0009,inset 0 0 .5px #ffffff40;overflow:hidden}
.macbook-sticker img{width:100%;height:100%;object-fit:contain;border-radius:4px;background:#000;filter:brightness(.92) saturate(.9)}
.macbook-sticker::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(125deg,#ffffff12,transparent 42%,#ffffff03 70%,#00000012);box-shadow:inset 0 .5px .5px #ffffff24;border-radius:4px}
/* Before/after handle: the drag instruction lives on the handle itself, and a one-time sweep shows what it does.
   Everything that moves here is a transform, so it never repaints the screenshots. */
.compare-handle{position:absolute;left:50%;top:50%;display:flex;align-items:center;gap:6px;height:48px;padding:0 14px 0 10px;border:2px solid #fff;border-radius:999px;background:var(--red);color:#fff;font-size:15px;font-weight:700;letter-spacing:.01em;white-space:nowrap;box-shadow:0 10px 30px #000a,0 0 0 6px #ee292f33;transform:translate(-50%,-50%);transition:transform .35s var(--ease),box-shadow .35s var(--ease);will-change:transform}
.compare-handle svg{width:20px;height:20px;stroke-width:2.6}
.compare-handle::after{content:'';position:absolute;inset:-2px;border:2px solid #ff5c63;border-radius:inherit;opacity:0;pointer-events:none}
.comparison.is-hinting .compare-handle::after{animation:compare-pulse 1.5s var(--ease) 2}
@keyframes compare-pulse{0%{opacity:.95;transform:scale(1)}100%{opacity:0;transform:scale(1.45)}}
@media(hover:hover) and (pointer:fine){.comparison:hover .compare-handle{transform:translate(-50%,-50%) scale(1.07);box-shadow:0 12px 34px #000b,0 0 0 8px #ee292f40}}
.comparison:active .compare-handle{transform:translate(-50%,-50%) scale(.96)}
.comparison:focus-within .compare-handle{box-shadow:0 10px 30px #000a,0 0 0 4px #fff}
.compare-label{font-size:14px;font-weight:700;letter-spacing:.01em;padding:9px 15px;border:1px solid #ff6d73;border-radius:4px;background:#ba1e29;color:#fff;box-shadow:0 5px 18px #0008}
/* Aceternity Moving Border on the two main calls to action: a light travels around a 2px edge.
   The button's red face sits on top of the light, which only moves with transform. */
.moving-border-button{position:relative;isolation:isolate;overflow:hidden;background:#8f1118}
.moving-border-button.button-red:hover{background:#8f1118}
.moving-border-button::before{content:'';position:absolute;inset:2px;z-index:-1;border-radius:1px;background:var(--red);transition:background .2s}
.moving-border-button:hover::before{background:var(--red-hover)}
.moving-border-light{position:absolute;top:0;left:0;z-index:-2;width:80px;height:80px;margin:-40px 0 0 -40px;border-radius:50%;background:radial-gradient(#fff4f5 0,#ffa3a9 28%,#ff4d56 42%,transparent 62%);pointer-events:none;will-change:transform}
@media(max-width:639px){.moving-border-button::before{background:#df202a}}
/* Aceternity Sidebar. Computer: a 72px rail that opens to 264px on hover or keyboard focus, drawn with
   transforms and opacity only. Phone and tablet: a floating menu button and a panel that slides in. */
.sidebar-logo{position:relative;display:block;width:100%;height:72px;flex:none}
.sidebar-mark{position:absolute;left:16px;top:16px;width:40px;height:40px;border-radius:10px;pointer-events:none;transition:opacity .25s,transform .35s var(--ease)}
.sidebar-wordmark{position:absolute;left:14px;top:14px;width:184px;height:44px;overflow:hidden;opacity:0;pointer-events:none;transition:opacity .25s}
.sidebar-wordmark img{position:absolute;left:0;top:50%;width:100%;max-width:none;transform:translateY(-50%);mix-blend-mode:screen}
.sidebar-nav{display:flex;flex-direction:column;gap:4px;margin-top:24px}
.sidebar-nav a{position:relative;display:flex;align-items:center;height:50px;color:#b9b9c0;font-size:14px;font-weight:500;white-space:nowrap;transition:color .2s}
.sidebar-nav a svg{flex:none;width:22px;height:22px;margin:0 25px;stroke-width:1.8}
.sidebar-nav a span{pointer-events:none;transition:opacity .2s,transform .3s var(--ease)}
.sidebar-nav a::before{content:'';position:absolute;left:0;top:13px;bottom:13px;width:3px;border-radius:0 3px 3px 0;background:var(--red);opacity:0;transform:scaleY(.3);transition:opacity .2s,transform .3s var(--ease)}
.sidebar-nav a:hover,.sidebar-nav a.is-current{color:#fff}
.sidebar-nav a:hover::before,.sidebar-nav a.is-current::before{opacity:1;transform:none}
.sidebar-nav a:focus-visible{outline:2px solid #ff7378;outline-offset:-4px}
.sidebar-nav .sidebar-cta{color:#ff7a80}
.sidebar-nav .sidebar-cta svg{color:#ff4d56}
.sidebar-nav .sidebar-cta:hover{color:#ffb2b6}
.sidebar-note{display:none}
.sidebar-close,.sidebar-toggle{display:none}
@media(min-width:960px){
  body{padding-left:72px}
  .site-sidebar{position:fixed;left:0;top:0;bottom:0;z-index:60;width:72px}
  .site-sidebar:hover,.site-sidebar:has(:focus-visible){width:264px}
  .sidebar-scrim{display:none}
  /* The panel follows the rail's real width (72px closed), so the closed rail never blocks clicks on the page. */
  .sidebar-panel{position:absolute;inset:0;padding-top:4px}
  .sidebar-panel::before{content:'';position:absolute;inset:0 auto 0 0;width:264px;z-index:-1;pointer-events:none;background:#08080a;transform:scaleX(.2727);transform-origin:0 50%;transition:transform .35s var(--ease)}
  .sidebar-panel::after{content:'';position:absolute;top:0;bottom:0;left:0;width:1px;pointer-events:none;background:#ffffff14;box-shadow:24px 0 48px #0000;transform:translateX(71px);transition:transform .35s var(--ease),box-shadow .35s}
  .site-sidebar:hover .sidebar-panel::before,.site-sidebar:has(:focus-visible) .sidebar-panel::before{transform:none}
  .site-sidebar:hover .sidebar-panel::after,.site-sidebar:has(:focus-visible) .sidebar-panel::after{transform:translateX(263px);box-shadow:24px 0 48px #000a}
  .sidebar-nav a span{opacity:0;transform:translateX(-10px)}
  .site-sidebar:hover .sidebar-nav a span,.site-sidebar:has(:focus-visible) .sidebar-nav a span{opacity:1;transform:none;transition-delay:.06s}
  .site-sidebar:hover .sidebar-nav a:hover span{transform:translateX(4px);transition-delay:0s}
  .site-sidebar:hover .sidebar-mark,.site-sidebar:has(:focus-visible) .sidebar-mark{opacity:0;transform:scale(.8)}
  .site-sidebar:hover .sidebar-wordmark,.site-sidebar:has(:focus-visible) .sidebar-wordmark{opacity:1;transition-delay:.08s}
}
@media(max-width:959px){
  .sidebar-toggle{position:fixed;top:14px;left:14px;z-index:90;display:grid;place-items:center;width:46px;height:46px;padding:0;border:1px solid #ffffff26;border-radius:12px;background:#0b0b0de8;color:#fff;box-shadow:0 8px 24px #0007}
  .sidebar-toggle svg{width:22px;height:22px}
  .sidebar-toggle:focus-visible{outline:2px solid #ff7378;outline-offset:3px}
  .site-sidebar{position:fixed;inset:0;z-index:100;visibility:hidden;pointer-events:none;transition:visibility 0s linear .38s}
  .site-sidebar.is-open{visibility:visible;pointer-events:auto;transition-delay:0s}
  .sidebar-scrim{position:absolute;inset:0;background:#000000b3;opacity:0;transition:opacity .38s}
  .site-sidebar.is-open .sidebar-scrim{opacity:1}
  .sidebar-panel{position:absolute;inset:0 auto 0 0;display:flex;flex-direction:column;width:min(100%,380px);padding:14px 18px max(26px,env(safe-area-inset-bottom));border-right:1px solid #ffffff14;background:#08080a;transform:translateX(-100%);transition:transform .38s var(--ease)}
  .site-sidebar.is-open .sidebar-panel{transform:none}
  .sidebar-logo{margin-left:-14px}
  .sidebar-mark{opacity:0}
  .sidebar-wordmark{opacity:1}
  .sidebar-nav{gap:6px;margin-top:22px}
  .sidebar-nav a{height:58px;font-size:19px;border-bottom:1px solid #ffffff0d}
  .sidebar-nav a svg{margin:0 18px 0 6px}
  .sidebar-nav a::before{top:17px;bottom:17px;left:-18px}
  .sidebar-note{display:flex;align-items:center;gap:12px;margin-top:auto;color:#8d8d95;font-size:12px}
  .sidebar-close{position:absolute;top:14px;right:14px;display:grid;place-items:center;width:46px;height:46px;padding:0;border:1px solid #ffffff26;border-radius:12px;background:transparent;color:#fff}
  .sidebar-close svg{width:22px;height:22px}
  .sidebar-close:focus-visible{outline:2px solid #ff7378;outline-offset:3px}
  html.menu-open{overflow:hidden}
}
@media(prefers-reduced-motion:reduce){.moving-border-light{display:none}}
@container macbook-screen (max-width:959px) and (min-width:640px){
  .macbook-screen-page{padding:24px}
  .macbook-page-heading h3{font-size:32px}
  .macbook-screen .project-demo-badge{font-size:10px;padding:7px 8px;right:8px}
  .macbook-project-link{min-height:44px;margin-top:14px;padding:11px 18px;font-size:14px}
}
@container macbook-screen (max-width:639px){
  .macbook-screen-page{padding:18px}
  .macbook-page-heading{display:block;margin-bottom:18px}
  .macbook-page-heading .section-label{font-size:10px;margin-bottom:10px}
  .macbook-page-heading h3{font-size:28px;max-width:16ch}
  .macbook-page-heading>p{font-size:11px;margin-top:12px;max-width:none}
  .macbook-page-heading>p br{display:none}
  .macbook-screen .work-grid{grid-template-columns:1fr;gap:20px}
  .macbook-screen .project-demo-badge{top:31px;right:7px;font-size:10px;padding:6px 8px}
  .macbook-screen .browser-bar{height:23px;font-size:7px}
  .macbook-screen .project-image>img{height:calc(100% - 23px)}
  .macbook-project-link{min-height:46px;margin-top:12px;padding:11px 18px;font-size:14px}
  .macbook-screen .work-disclosure{font-size:10px;line-height:1.6;margin-top:18px;gap:7px}
}
@media(max-width:639px){
  .macbook-intro{margin-bottom:24px}
  .macbook-intro h2{font-size:32px}
  .macbook-intro>p:last-child{font-size:13px}
  .compare-handle{height:36px;gap:2px;padding:0 10px 0 6px;font-size:12px;box-shadow:0 8px 22px #000a,0 0 0 4px #ee292f33}
  .compare-handle svg{width:16px;height:16px}
  .compare-label{font-size:11px;padding:7px 10px}
}
@media(max-height:720px) and (min-width:640px){
  .macbook-screen-page{padding:20px}
  .macbook-page-heading{margin-bottom:16px}
  .macbook-page-heading h3{font-size:28px}
  .macbook-page-heading .section-label{font-size:10px;margin-bottom:8px}
  .macbook-page-heading>p{font-size:10px}
  .macbook-project-link{min-height:42px;margin-top:12px;padding:10px 18px;font-size:13px}
  .macbook-screen .project-demo-badge{font-size:10px;padding:7px 9px}
  .macbook-screen .work-disclosure{margin-top:16px;font-size:10px}
}
/* Short phones without the notebook (reduced motion or no JavaScript): tighter spacing, photos still whole. */
@media(max-width:639px) and (max-height:740px){
  .macbook-showcase:not(.is-enhanced) .macbook-screen-page{padding:14px}
  .macbook-showcase:not(.is-enhanced) .macbook-page-heading{margin-bottom:14px}
  .macbook-showcase:not(.is-enhanced) .macbook-page-heading .section-label{margin-bottom:6px}
  .macbook-showcase:not(.is-enhanced) .macbook-page-heading h3{font-size:24px;max-width:none}
  .macbook-showcase:not(.is-enhanced) .macbook-page-heading>p{margin-top:8px}
  .macbook-showcase:not(.is-enhanced) .macbook-screen .work-grid{gap:14px}
  .macbook-showcase:not(.is-enhanced) .macbook-screen .work-disclosure{margin-top:14px}
}
@media(prefers-reduced-motion:reduce){
  .gradient-blob{animation:none}
}