@font-face{font-family:Sora;src:url('../fonts/Sora-latin.woff2') format('woff2');font-weight:300 800;font-display:swap}@font-face{font-family:Inter;src:url('../fonts/Inter-latin.woff2') format('woff2');font-weight:300 700;font-display:swap}@font-face{font-family:JetBrains Mono;src:url('../fonts/JetBrainsMono-latin.woff2') format('woff2');font-weight:400 600;font-display:swap}
:root{--navy:#1B2A6E;--magenta:#8B0A80;--pink:#FA4B96;--orange:#FA9A28;--bg:#05061A;--bg2:#080A24;--paper:#F4F4F5;--ink:#F7F8FC;--copy:#A6AECC;--muted:#7A84A4;--line:rgba(168,182,255,.16);--wrap:1180px;--gutter:clamp(20px,5vw,56px);--radius:22px;--ease:cubic-bezier(.22,.61,.36,1)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,sans-serif;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.22;z-index:5;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");mix-blend-mode:overlay}a{color:inherit;text-decoration:none}button,input,textarea{font:inherit}h1,h2,h3,p,ul{margin:0}ul{padding:0;list-style:none}.wrap{width:min(var(--wrap),calc(100% - 2 * var(--gutter)));margin-inline:auto}.mono{font:12px 'JetBrains Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}.eyebrow{display:flex;align-items:center;gap:10px;color:#FFD9A8}.eyebrow:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--orange);box-shadow:0 0 18px var(--orange)}.skip{position:absolute;left:16px;top:-80px;z-index:100;padding:10px 14px;background:var(--pink);color:#17001a;border-radius:8px}.skip:focus{top:16px}.site-header{position:sticky;top:0;z-index:20;border-bottom:1px solid var(--line);background:rgba(5,6,26,.78);backdrop-filter:blur(18px)}.header-inner{height:70px;display:flex;align-items:center;gap:18px}.brand{display:flex;align-items:center;gap:10px;font:800 17px Sora,sans-serif;letter-spacing:-.04em}.brand img{width:27px;height:27px}.header-tag{padding-left:18px;border-left:1px solid var(--line)}.header-nav{display:flex;gap:4px;margin-left:auto}.header-nav a{padding:9px 11px;color:var(--copy);font:11px 'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase}@media(hover:hover){.header-nav a:hover,.footer a:hover{color:var(--pink)}}.header-cta,.button{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:13px 17px;border-radius:12px;background:#25d366;color:#04231a;font:700 13px Sora,sans-serif;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}@media(hover:hover){.header-cta:hover,.button:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(37,211,102,.22)}}.menu-toggle{display:none}.hero{position:relative;isolation:isolate;padding:clamp(72px,12vw,150px) 0 0;min-height:760px;background:radial-gradient(circle at 76% 30%,rgba(139,10,128,.23),transparent 33%),linear-gradient(135deg,#05061A 20%,#0a0d31 100%);overflow:hidden}.hero:after{content:"";position:absolute;inset:10% -10% auto 48%;height:75%;z-index:-1;border:1px solid rgba(250,75,150,.2);border-radius:50%;transform:rotate(-22deg);box-shadow:0 0 120px rgba(139,10,128,.2) inset}.hero h1{max-width:12ch;margin-top:22px;font:800 clamp(3.1rem,8vw,7.8rem)/.91 Sora,sans-serif;letter-spacing:-.075em}.hero-copy{display:grid;grid-template-columns:minmax(0,520px) auto;gap:40px;align-items:end;margin-top:34px}.hero-copy p{max-width:48ch;color:var(--copy);font-size:clamp(1.05rem,1.6vw,1.2rem)}.hero-actions{display:flex;flex-wrap:wrap;gap:12px}.button.secondary{background:transparent;color:var(--ink);border:1px solid var(--line);box-shadow:none}@media(hover:hover){.button.secondary:hover{border-color:var(--pink)}}.hero-note{display:flex;align-items:center;gap:12px;margin-top:48px;color:var(--muted);font-size:13px}.hero-note span{width:32px;height:1px;background:var(--pink)}.hero-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:80px;border-top:1px solid var(--line)}.metric{padding:20px 18px 26px;border-right:1px solid var(--line)}.metric:last-child{border-right:0}.metric strong{display:block;margin-top:7px;font:700 16px Sora,sans-serif}.section{padding:clamp(72px,10vw,132px) 0}.section.alt{background:#070819}.section-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,440px);gap:40px;align-items:end;margin-bottom:46px}.section h2{max-width:12ch;font:800 clamp(2.25rem,5.5vw,4.8rem)/.95 Sora,sans-serif;letter-spacing:-.065em}.section-head p{color:var(--copy);font-size:1.03rem}.services{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}.service{grid-column:span 4;min-height:250px;padding:26px;border:1px solid var(--line);border-radius:var(--radius);background:rgba(255,255,255,.035);display:flex;flex-direction:column;transition:transform .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease)}.service:first-child{grid-column:span 6;grid-row:span 2;min-height:514px;background:linear-gradient(145deg,rgba(27,42,110,.86),rgba(139,10,128,.28))}@media(hover:hover){.service:hover{transform:translateY(-4px);border-color:rgba(250,75,150,.55);background-color:rgba(250,75,150,.07)}}.service:first-child h3{font-size:clamp(1.8rem,3vw,3rem)}.service h3{margin-top:auto;font:700 clamp(1.25rem,2vw,1.7rem)/1 Sora,sans-serif;letter-spacing:-.045em}.service p{margin-top:12px;color:var(--copy);font-size:.95rem;max-width:36ch}.service a{margin-top:22px;color:#FFD9A8;font:600 12px 'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase}@media(hover:hover){.service a:hover{color:var(--pink)}}.service-mark{width:48px;height:48px;border:1px solid rgba(255,255,255,.25);border-radius:14px;display:grid;place-items:center;color:var(--pink);font:700 17px Sora,sans-serif}.reasons{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line)}.reason{padding:26px 22px 0 0;border-right:1px solid var(--line);margin-right:22px}.reason:last-child{border-right:0;margin-right:0}.reason b{display:block;color:var(--pink);font:600 12px 'JetBrains Mono',monospace}.reason h3{margin-top:22px;font:700 1.35rem/1.05 Sora,sans-serif;letter-spacing:-.045em}.reason p{margin-top:12px;color:var(--copy);font-size:.95rem}.project-list{border-top:1px solid var(--line)}.project{display:grid;grid-template-columns:1.1fr 1fr auto;gap:24px;align-items:center;padding:24px 0;border-bottom:1px solid var(--line)}.project h3{font:700 1.15rem Sora,sans-serif;letter-spacing:-.035em}.project p{color:var(--copy);font-size:.93rem}.project a{color:#FFD9A8;font:600 11px 'JetBrains Mono',monospace;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}.estimator{display:grid;grid-template-columns:1.25fr .75fr;gap:1px;background:var(--line);margin-top:30px}.estimator>div{padding:30px;background:#06071a}.estimator .readout{background:linear-gradient(145deg,#18235e,#8B0A80)}.field-label{display:block;margin:0 0 11px}.estimator textarea{width:100%;min-height:92px;resize:vertical;padding:13px;border:1px solid var(--line);border-radius:10px;background:#0a0c25;color:var(--ink)}.estimator textarea:focus{outline:2px solid var(--pink);outline-offset:2px}.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}.chip{padding:9px 12px;border:1px solid var(--line);border-radius:9px;background:transparent;color:var(--copy);font-size:13px;cursor:pointer;transition:border-color .2s,background .2s,transform .2s}@media(hover:hover){.chip:hover{border-color:var(--pink)}}.chip[aria-pressed=true]{border-color:var(--pink);background:rgba(250,75,150,.17);color:var(--ink)}.people{display:flex;align-items:center;gap:12px;margin-top:24px}.people button{width:34px;height:34px;border:1px solid var(--line);border-radius:8px;background:transparent;color:var(--ink);cursor:pointer}@media(hover:hover){.people button:hover{border-color:var(--pink)}}.people input{flex:1;accent-color:var(--pink)}.people output{min-width:90px;text-align:right;font-weight:700}.readout h3{margin-top:12px;font:800 clamp(1.8rem,3vw,2.8rem)/1 Sora,sans-serif;letter-spacing:-.055em}.readout p{color:#d6d9eb}.readout ul{margin-top:25px}.readout li{display:flex;justify-content:space-between;gap:20px;padding:13px 0;border-top:1px solid rgba(255,255,255,.18);font:12px 'JetBrains Mono',monospace}.readout li span:last-child{text-align:right;color:#fff}.readout .button{width:100%;margin-top:24px}.faq{max-width:800px;margin-left:auto;border-top:1px solid var(--line)}.faq details{border-bottom:1px solid var(--line)}.faq summary{display:flex;justify-content:space-between;gap:20px;cursor:pointer;padding:21px 0;font:700 1.1rem Sora,sans-serif}.faq summary:after{content:'+';color:var(--pink);font:400 24px Inter,sans-serif}.faq details[open] summary:after{content:'−'}.faq details p{padding:0 45px 22px 0;color:var(--copy);font-size:.95rem}.contact{padding-bottom:88px}.contact-card{display:grid;grid-template-columns:1.25fr .75fr;gap:40px;align-items:end;padding:40px;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(120deg,rgba(27,42,110,.8),rgba(139,10,128,.35))}.contact h2{max-width:11ch}.contact p{margin-top:20px;color:var(--copy);max-width:44ch}.contact-actions{display:flex;flex-direction:column;gap:12px}.contact-actions .button{width:100%}.contact-actions .button.email{background:transparent;color:var(--ink);border:1px solid var(--line);box-shadow:none}.footer{padding:28px 0;border-top:1px solid var(--line);color:var(--muted);font:11px 'JetBrains Mono',monospace}.footer-inner{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}.footer nav{display:flex;flex-wrap:wrap;gap:16px}.mobile-menu{display:none}
@media(max-width:850px){.header-tag,.header-nav{display:none}.menu-toggle{display:block;margin-left:auto;border:1px solid var(--line);background:transparent;color:var(--ink);border-radius:8px;padding:8px 10px}.mobile-menu[hidden]{display:none!important}.mobile-menu{display:block;position:absolute;top:69px;left:var(--gutter);right:var(--gutter);padding:8px;background:#080A24;border:1px solid var(--line);border-radius:14px}.mobile-menu a{display:block;padding:12px;color:var(--copy);font:12px 'JetBrains Mono',monospace;text-transform:uppercase}@media(hover:hover){.mobile-menu a:hover{color:var(--pink)}}.hero{min-height:auto;padding-top:74px}.hero-copy,.section-head,.contact-card{grid-template-columns:1fr}.hero h1{max-width:11ch}.hero-copy{gap:26px}.hero-actions{margin-top:8px}.services{grid-template-columns:1fr 1fr}.service,.service:first-child{grid-column:span 1;grid-row:auto;min-height:250px}.service:first-child h3{font-size:1.75rem}.reasons{grid-template-columns:1fr 1fr;gap:25px}.reason{border-right:0;margin-right:0;padding-right:0}.project{grid-template-columns:1fr;gap:10px}.project a{justify-self:start}.estimator{grid-template-columns:1fr}.faq{margin-left:0}}
@media(max-width:520px){.header-cta{display:none}.hero h1{font-size:clamp(2.9rem,15vw,4.6rem)}.hero-metrics{grid-template-columns:1fr}.metric{border-right:0;border-bottom:1px solid var(--line);padding-left:0}.metric:last-child{border-bottom:0}.services,.reasons{grid-template-columns:1fr}.service,.service:first-child{min-height:220px}.estimator>div{padding:22px 18px}.contact-card{padding:24px}.footer-inner{display:block}.footer nav{margin-top:18px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
:where(a,button,summary,input,textarea):focus-visible{outline:2px solid var(--pink);outline-offset:3px}

/* Visual system: abstract workflow map, not a fake product screenshot. */
.hero{min-height:820px}.hero-art{position:absolute;right:clamp(28px,7vw,120px);top:155px;width:420px;height:420px;max-width:42vw;max-height:420px;min-height:0;z-index:0;border:1px solid rgba(250,75,150,.24);border-radius:50%;background:radial-gradient(circle at 50% 48%,rgba(250,75,150,.16),transparent 22%),radial-gradient(circle at 50% 50%,rgba(27,42,110,.6),rgba(5,6,26,0) 65%);box-shadow:0 0 100px rgba(139,10,128,.22)}.hero-art:before{content:"";position:absolute;inset:11%;border:1px dashed rgba(255,217,168,.25);border-radius:50%;transform:rotate(22deg)}.hero-art:after{content:"";position:absolute;inset:25%;border:1px solid rgba(250,75,150,.25);border-radius:50%}.art-orbit{position:absolute;inset:7%;border:1px solid rgba(168,182,255,.18);border-radius:50%;transform:rotate(-27deg)}.orbit-b{inset:18%;border-color:rgba(250,154,40,.35);transform:rotate(56deg)}.art-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:116px;height:116px;border-radius:28px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:linear-gradient(145deg,#1B2A6E,#8B0A80);border:1px solid rgba(255,255,255,.38);box-shadow:0 20px 60px rgba(139,10,128,.4),inset 0 0 30px rgba(255,255,255,.1);font:800 13px Sora,sans-serif;letter-spacing:.06em}.art-core img{width:34px;height:34px}.art-node{position:absolute;display:flex;align-items:center;gap:7px;padding:9px 12px;border:1px solid rgba(255,255,255,.25);border-radius:11px;background:rgba(5,6,26,.78);box-shadow:0 12px 25px rgba(0,0,0,.24);color:var(--copy);font:11px 'JetBrains Mono',monospace;letter-spacing:.02em;white-space:nowrap}.art-node b{display:grid;place-items:center;width:23px;height:23px;border-radius:7px;background:rgba(250,75,150,.2);color:#FFD9A8;font-size:10px}.node-one{left:3%;top:27%}.node-two{right:1%;top:18%}.node-three{right:8%;bottom:20%}.art-line{position:absolute;height:1px;background:linear-gradient(90deg,rgba(250,75,150,0),rgba(250,75,150,.8),rgba(250,75,150,0));transform-origin:left center}.line-one{width:28%;left:22%;top:39%;transform:rotate(12deg)}.line-two{width:28%;right:20%;top:32%;transform:rotate(146deg)}.line-three{width:25%;right:26%;bottom:35%;transform:rotate(33deg)}.art-caption{position:absolute;left:13%;bottom:8%;color:#FFD9A8;font-size:9px}.service-mark{position:relative;width:68px;height:68px;overflow:hidden;display:grid;place-items:center;border-radius:20px;background:linear-gradient(145deg,rgba(250,75,150,.2),rgba(27,42,110,.72));border:1px solid rgba(250,75,150,.4);color:#fff;font:700 12px 'JetBrains Mono',monospace;letter-spacing:.06em}.service-mark:before,.service-mark:after{content:"";position:absolute;border:1px solid rgba(255,217,168,.5);border-radius:50%}.service-mark:before{width:29px;height:29px}.service-mark:after{width:46px;height:46px;border-color:rgba(250,75,150,.32);transform:rotate(45deg);border-radius:13px}.service-mark{box-shadow:inset 0 0 24px rgba(250,75,150,.18)}.service:first-child .service-mark{width:88px;height:88px;border-radius:26px;font-size:14px}.service:first-child .service-mark:before{width:40px;height:40px}.service:first-child .service-mark:after{width:62px;height:62px}.service h3{margin-top:24px}.service:first-child h3{margin-top:auto}.section:has(.services){background:linear-gradient(180deg,#080A24 0%,#05061A 100%)}.project-list{position:relative}.project-list:before{content:"";position:absolute;right:0;top:-28px;width:90px;height:90px;border:1px solid rgba(250,75,150,.28);border-radius:50%;box-shadow:0 0 0 14px rgba(250,75,150,.04),0 0 0 29px rgba(250,75,150,.025)}
@media(max-width:850px){.hero{min-height:auto}.hero-art{position:relative;right:auto;top:auto;width:min(420px,86vw);height:min(420px,86vw);min-height:0;margin:58px auto 0;z-index:0}.hero-note{margin-top:40px}.service:first-child .service-mark{width:68px;height:68px}.service:first-child .service-mark:before{width:29px;height:29px}.service:first-child .service-mark:after{width:46px;height:46px}}
@media(max-width:520px){.hero-art{width:86vw;height:86vw;margin-top:44px}.art-node{font-size:9px;padding:7px 8px}.art-node b{width:20px;height:20px}.node-one{left:0}.node-two{right:0}.node-three{right:0}.art-caption{font-size:8px}}

.hero .wrap>p,.hero .wrap>h1,.hero .wrap>.hero-copy,.hero .wrap>.hero-note,.hero .wrap>.hero-metrics{position:relative;z-index:2}

/* Micro-interaction: the system map reacts without distracting from the message. */
.hero-art{--mx:0px;--my:0px;transform:translate3d(var(--mx),var(--my),0);transition:transform .45s var(--ease),border-color .3s ease}.art-orbit{animation:orbit-drift 18s ease-in-out infinite;transform:rotate(-27deg) scale(1)}.orbit-b{animation:orbit-drift-reverse 24s ease-in-out infinite;transform:rotate(56deg) scale(.98)}.art-core{animation:core-breathe 4.5s ease-in-out infinite}.art-node{appearance:none;cursor:pointer;text-align:left;transition:transform .3s var(--ease),border-color .3s ease,background .3s ease,box-shadow .3s ease}@media(hover:hover){.art-node:hover{transform:translateY(-4px) scale(1.04);border-color:var(--pink);background:rgba(27,42,110,.95);box-shadow:0 0 0 4px rgba(250,75,150,.12),0 16px 30px rgba(0,0,0,.28)}}.art-node:focus-visible,.art-node[aria-pressed=true]{transform:translateY(-4px) scale(1.04);border-color:var(--pink);background:rgba(27,42,110,.95);box-shadow:0 0 0 4px rgba(250,75,150,.12),0 16px 30px rgba(0,0,0,.28)}.art-node[aria-pressed=true] b{background:var(--pink);color:#17001a}.hero-art[data-focus=operation] .orbit-a{border-color:rgba(250,75,150,.72)}.hero-art[data-focus=team] .orbit-b{border-color:rgba(250,154,40,.8)}.hero-art[data-focus=data] .art-core{box-shadow:0 0 0 8px rgba(250,75,150,.1),0 20px 70px rgba(139,10,128,.65),inset 0 0 30px rgba(255,255,255,.1)}@keyframes orbit-drift{0%,100%{transform:rotate(-27deg) scale(1)}50%{transform:rotate(-20deg) scale(1.035)}}@keyframes orbit-drift-reverse{0%,100%{transform:rotate(56deg) scale(.98)}50%{transform:rotate(48deg) scale(1.02)}}@keyframes core-breathe{0%,100%{filter:brightness(1);transform:translate(-50%,-50%) scale(1)}50%{filter:brightness(1.12);transform:translate(-50%,-50%) scale(1.035)}}
@media (prefers-reduced-motion:reduce){.hero-art{transition:none}.art-orbit,.art-core{animation:none}.art-node{transition:none}}

/* Generated visual assets are content-bearing, not decorative filler. */

/* Service cards: every offer gets a visual with a direct semantic role. */
.service{position:relative;overflow:hidden}.service-visual{height:150px;display:flex;align-items:flex-start;justify-content:flex-end;margin:-8px -4px 6px 28%;pointer-events:none}.service-visual img{width:170px;height:170px;object-fit:contain;filter:drop-shadow(0 18px 28px rgba(139,10,128,.26));transition:transform .45s var(--ease),filter .45s ease}@media(hover:hover){.service:hover .service-visual img{transform:translateY(-7px) rotate(2deg) scale(1.06);filter:drop-shadow(0 22px 34px rgba(250,75,150,.35))}}.service:focus-within .service-visual img{transform:translateY(-7px) rotate(2deg) scale(1.06);filter:drop-shadow(0 22px 34px rgba(250,75,150,.35))}.service:first-child .service-visual{height:235px;margin:-28px 0 4px 28%}.service:first-child .service-visual img{width:270px;height:270px}.service h3{position:relative;z-index:1}.service p{position:relative;z-index:1}.service a{position:relative;z-index:1}.service-mark{z-index:2}@media(max-width:850px){.service-visual{height:125px;margin:-6px 0 4px 22%}.service-visual img{width:145px;height:145px}.service:first-child .service-visual{height:190px;margin:-18px 0 4px 20%}.service:first-child .service-visual img{width:220px;height:220px}}
@media(prefers-reduced-motion:reduce){.service-visual img{transition:none}}
/* Final card composition: service artwork sits inside the card, copy remains readable above it. */
.service-visual{position:absolute;top:0;right:0;width:66%;height:190px;margin:0;z-index:0;overflow:visible;display:block;pointer-events:none}
.service-visual img{position:absolute;top:-42px;right:-58px;width:290px;height:290px;max-width:none;object-fit:contain;transform:scale(1.28);transform-origin:center;filter:drop-shadow(0 18px 28px rgba(139,10,128,.28));opacity:.96}
.service:first-child .service-visual{height:300px;width:68%;margin:0}
.service:first-child .service-visual img{top:-60px;right:-90px;width:430px;height:430px;transform:scale(1.12)}
.service-mark,.service h3,.service p,.service a{position:relative;z-index:2}
@media(max-width:850px){.service-visual{width:64%;height:150px}.service-visual img{top:-24px;right:-54px;width:235px;height:235px;transform:scale(1.18)}.service:first-child .service-visual{width:68%;height:230px}.service:first-child .service-visual img{top:-42px;right:-78px;width:340px;height:340px}}
/* Keep the generated subject inside the card bounds instead of clipping its right edge. */
.service-visual img{right:18px;transform:scale(1.08)}
.service:first-child .service-visual img{right:34px;transform:scale(1.04)}
@media(max-width:850px){.service-visual img{right:12px;transform:scale(1.02)}.service:first-child .service-visual img{right:24px;transform:scale(1.02)}}
/* Center the actual subject inside the card; generated canvases are transparent and right-weighted. */
.service-visual img{right:88px;transform:scale(1.02)}
.service:first-child .service-visual img{right:112px;transform:scale(1)}
@media(max-width:850px){.service-visual img{right:64px;transform:scale(.98)}.service:first-child .service-visual img{right:80px;transform:scale(.96)}}
.service-visual img{mix-blend-mode:screen;filter:saturate(1.25) brightness(1.35) drop-shadow(0 18px 28px rgba(139,10,128,.36));opacity:1}
.service-visual{z-index:1}.service-visual img{z-index:1;mix-blend-mode:normal;opacity:1}
.service:not(:first-child) .service-visual img{width:220px;height:220px;top:-18px;right:0;transform:scale(.94)}
@media(max-width:850px){.service:not(:first-child) .service-visual img{width:185px;height:185px;top:-8px;right:0;transform:scale(.94)}}
.service:not(:first-child) .service-visual img{width:150px;height:150px;top:-6px;right:0;transform:scale(.9)}
@media(max-width:850px){.service:not(:first-child) .service-visual img{width:132px;height:132px;top:-2px;right:0;transform:scale(.88)}}
.service:not(:first-child){min-height:300px}
.service:not(:first-child) .service-visual img{width:140px;height:140px;top:-8px;right:0;transform:scale(.9)}
@media(max-width:850px){.service:not(:first-child){min-height:270px}.service:not(:first-child) .service-visual img{width:120px;height:120px;top:-4px;right:0;transform:scale(.88)}}
/* Service card flow layout: marker, artwork band, then readable copy. */
.service-visual{position:relative;top:auto;right:auto;width:100%;height:145px;margin:0;z-index:1;overflow:visible;display:flex;align-items:flex-start;justify-content:flex-end;pointer-events:none}
.service-visual img{position:relative;top:auto;right:auto;width:155px;height:155px;max-width:100%;object-fit:contain;transform:none;filter:drop-shadow(0 18px 28px rgba(139,10,128,.34));opacity:1;mix-blend-mode:normal}
.service:first-child .service-visual{height:235px;width:100%;margin:0;justify-content:flex-end}
.service:first-child .service-visual img{top:auto;right:auto;width:275px;height:275px;transform:none}
.service:not(:first-child){min-height:300px}
.service:not(:first-child) .service-visual{height:135px}
.service:not(:first-child) .service-visual img{width:150px;height:150px;top:auto;right:auto;transform:none}
.service-mark,.service h3,.service p,.service a{position:relative;z-index:2}
@media(max-width:850px){.service-visual{height:125px}.service-visual img{width:135px;height:135px}.service:first-child .service-visual{height:190px}.service:first-child .service-visual img{width:220px;height:220px}.service:not(:first-child){min-height:270px}.service:not(:first-child) .service-visual{height:115px}.service:not(:first-child) .service-visual img{width:125px;height:125px}}
.service:not(:first-child) .service-visual{height:160px;justify-content:center}
.service:not(:first-child) .service-visual img{width:125px;height:125px}
.service:not(:first-child) h3{margin-top:10px}
@media(max-width:850px){.service:not(:first-child) .service-visual{height:135px}.service:not(:first-child) .service-visual img{width:112px;height:112px}.service:not(:first-child) h3{margin-top:8px}}

/* Full-bleed service cards: same footprint, image as the visual field, copy over contrast. */
.services{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.service,.service:first-child{grid-column:auto;grid-row:auto;min-height:360px;padding:26px;display:flex;flex-direction:column;justify-content:flex-end;isolation:isolate;background-image:linear-gradient(180deg,rgba(5,6,26,.08) 0%,rgba(5,6,26,.22) 35%,rgba(5,6,26,.94) 88%),var(--service-bg);background-size:cover;background-position:center;border-color:rgba(168,182,255,.22)}
.service:first-child h3{font-size:clamp(1.25rem,2vw,1.7rem)}
.service::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(140deg,rgba(250,75,150,.12),transparent 48%,rgba(27,42,110,.18));pointer-events:none}
.service>*{position:relative;z-index:1}.service-visual{display:none}.service-mark{margin-bottom:auto}.service h3{margin-top:auto;max-width:18ch}.service p{max-width:38ch}@media(hover:hover){.service:hover{background-position:center 48%;border-color:rgba(250,75,150,.68);transform:translateY(-4px)}}
@media(max-width:850px){.services{grid-template-columns:repeat(2,minmax(0,1fr))}.service,.service:first-child{min-height:320px}}
@media(max-width:560px){.services{grid-template-columns:1fr}.service,.service:first-child{min-height:300px}}
/* Equal-height grid final override. */
.service,.service:first-child,.service:not(:first-child){min-height:360px}
@media(max-width:850px){.service,.service:first-child,.service:not(:first-child){min-height:320px}}
@media(max-width:560px){.service,.service:first-child,.service:not(:first-child){min-height:300px}}

/* ═══ CAPA DE PLATAFORMA PARA CELULAR ═══
   Lo que separa "una web abierta en el teléfono" de algo pensado para el
   teléfono. Nada de esto se ve en el emulador del escritorio. */

html{
  /* Al tocar, iOS y Android pintan un recuadro celeste encima del elemento.
     Es el "esto es una web" más ruidoso que hay. Se apaga y se reemplaza por
     el :active de abajo, que es feedback propio. */
  -webkit-tap-highlight-color:transparent;
  /* Sin esto, el navegador agranda el texto solo al girar a horizontal. */
  -webkit-text-size-adjust:100%;
  /* Tirar hacia abajo arriba de todo dispara el "recargar" de Android y el
     rebote de iOS. En una web institucional eso no aporta: molesta. */
  overscroll-behavior-y:none;
}

button,a,[role=button],summary,label,.chip{
  /* Le dice al navegador que este elemento nunca hace zoom con doble toque,
     asi dispara el click al instante en vez de esperar 300 ms por si viene
     un segundo toque. */
  touch-action:manipulation;
  /* Mantener el dedo sobre un boton seleccionaba su texto o abria el menu de
     copiar. Un control no es texto para copiar. */
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
}

/* Pero el texto de la pagina SI se tiene que poder seleccionar: la gente copia
   el telefono, el correo y los nombres de las soluciones. */
p,h1,h2,h3,li,dd,dt,address,time{user-select:text;-webkit-user-select:text}

/* iOS hace zoom al enfocar un campo con letra menor a 16px, y no vuelve atras
   al salir. La solucion es la letra, no desactivar el zoom. */
input,textarea,select{font-size:16px}

/* ── Objetivos táctiles ──────────────────────────────────────────────────
   El dedo necesita 44x44 px. Se midieron 20 de 25 controles por debajo de eso:
   los enlaces de las tarjetas tenían 16 px de alto. */
@media (pointer:coarse){
  .service a,.project a,.footer nav a{
    min-height:44px;display:inline-flex;align-items:center;
  }
  .chip{min-height:44px;padding-inline:14px}
  .people button{width:44px;height:44px;min-width:44px;flex:0 0 44px}
  .art-node{min-height:44px}
  .menu-toggle{min-width:44px;min-height:44px}
  /* El deslizador medía 16 px de alto: imposible de agarrar. Se le da área de
     toque sin agrandar la barra, con un pulgar más grande. */
  .people input[type=range]{height:44px;background:transparent}
  .people input[type=range]::-webkit-slider-thumb{width:26px;height:26px}
  .people input[type=range]::-moz-range-thumb{width:26px;height:26px}
}

/* ── Feedback al presionar ───────────────────────────────────────────────
   Un botón nativo responde cuando el dedo baja, no cuando se levanta. Sin
   esto se siente lento aunque no lo sea. */
.button,.header-cta,.chip,.service,.people button,.menu-toggle,.art-node{
  transition:transform 120ms cubic-bezier(.2,.8,.2,1),background 120ms,border-color 120ms;
}
.button:active,.header-cta:active,.chip:active,.people button:active,
.menu-toggle:active,.art-node:active{transform:scale(.97)}
.service:active{transform:scale(.995)}

/* ── Zonas seguras ───────────────────────────────────────────────────────
   Con viewport-fit=cover la página se dibuja debajo del notch y de la barra
   de gestos. El contenido se separa de ahí con env(), no la página entera:
   así el fondo llega hasta el borde como en una app. */
.site-header{padding-top:env(safe-area-inset-top,0px)}
.wrap{
  padding-left:max(var(--gutter,16px),env(safe-area-inset-left,0px));
  padding-right:max(var(--gutter,16px),env(safe-area-inset-right,0px));
}
.footer{padding-bottom:calc(28px + env(safe-area-inset-bottom,0px))}
.mobile-menu{max-height:calc(100dvh - 90px);overflow-y:auto;overscroll-behavior:contain}

@media (prefers-reduced-motion:reduce){
  .button,.header-cta,.chip,.service,.people button,.menu-toggle,.art-node{transition:none}
  .button:active,.header-cta:active,.chip:active,.people button:active,
  .menu-toggle:active,.art-node:active,.service:active{transform:none}
}

/* ── Desborde del estimador en celular ───────────────────────────────────
   Un ítem de grid (y de flex) trae `min-width: auto`: se niega a achicarse
   por debajo de su contenido. Medido en 390px: el contenedor daba 310px y la
   columna calculaba 363, así que el bloque se salía 53px. El overflow-x:hidden
   del body lo escondía, pero igual cortaba "12 personas" contra el borde.
   minmax(0,1fr) y min-width:0 le devuelven el permiso de achicarse. */
.estimator{grid-template-columns:minmax(0,1fr)}
.estimator > div{min-width:0}

@media (min-width:851px){
  .estimator{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr)}
}

/* La fila del contador no entra en una sola línea en un teléfono angosto:
   − 44px, + 44px, el deslizador y "12 personas" suman más que el ancho
   disponible. Se parte en dos: los controles arriba, el deslizador abajo a
   todo lo ancho, que además es más cómodo de arrastrar con el pulgar. */
@media (max-width:560px){
  .people{flex-wrap:wrap;gap:10px}
  .people button:first-of-type{order:1}
  .people output{order:2;flex:1 1 auto;min-width:0;text-align:center}
  .people button:last-of-type{order:3}
  .people input[type=range]{order:4;flex:1 1 100%;min-width:0}
}

/* ── Saltos de ancla bajo el encabezado pegajoso ─────────────────────────
   El encabezado es sticky y mide 70px. Al tocar "Soluciones" en el menú, el
   navegador deja la sección justo arriba de todo... y el encabezado le tapa
   el título. scroll-margin-top le reserva ese espacio al destino.
   (El encabezado pegajoso tapaba el titulo de cada seccion al navegar.) */
:target,section[id]{scroll-margin-top:86px}
html{scroll-padding-top:86px}

/* ═══ MOVIMIENTO ═══
   Tres piezas tomadas de 21st.dev y reimplementadas en vanilla: el sitio no
   tiene build ni dependencias, y el CSP prohíbe scripts de terceros, así que de
   ahí se toma la idea, no el código.

   Una curva nueva: --ease ya existe para los hovers, pero una entrada necesita
   un ease-out fuerte. Nada de ease-in: empieza lento justo en el momento que la
   persona está mirando. */
:root{--ease-entrada:cubic-bezier(.23,1,.32,1)}

/* ── 1. Entrada del hero ──────────────────────────────────────────────────
   Animación CSS, no JS: corre fuera del hilo principal, así entra igual
   mientras el navegador todavía está ocupado parseando los scripts.

   El h1 NO se anima, a propósito. Es el elemento del LCP: arrancarlo en
   opacity:0 retrasa la métrica hasta que se pinta visible, y hoy el LCP está
   entre 620 ms y 2,6 s según caché — no hay margen para regalarle 400 ms. El
   titular queda firme y lo de alrededor se acomoda a su lado. */
.hero .eyebrow,.hero-copy p,.hero-actions{
  opacity:1;
  transform:none;
  transition:opacity .5s var(--ease-entrada),transform .5s var(--ease-entrada);
}
/* El estado oculto vive SOLO en el primer cuadro, no en la regla base. Esto no
   es un detalle de estilo: el sitio ya trae
   @media (prefers-reduced-motion:reduce){*{animation:none!important}}
   y una entrada que arranca en opacity:0 esperando una animacion se queda
   invisible para siempre cuando esa animacion no corre. Asi, el default es
   "se ve", y el navegador que no entienda @starting-style simplemente no anima. */
@starting-style{
  .hero .eyebrow,.hero-copy p,.hero-actions{opacity:0;transform:translateY(10px)}
}
.hero-copy p{transition-delay:60ms}
.hero-actions{transition-delay:120ms}

/* ── 2. Spotlight en las tarjetas de servicio ─────────────────────────────
   El artículo de 21st.dev sobre este efecto avisa que se suele enviar "a veinte
   veces su costo necesario", y la causa es un listener y un estado por tarjeta.
   Acá va UN listener en el contenedor (site.js), igual que el que ya mueve
   .hero-art.

   Y una diferencia con su receta: ellos mueven el centro del degradado, lo que
   repinta la tarjeta en cada cuadro. Acá el degradado es una mancha de tamaño
   fijo que se MUEVE CON transform — eso lo hace la GPU y no repinta nada.

   Solo existe con mouse: en el celular no hay cursor que seguir, así que no se
   paga ni un byte de trabajo. */
@media (hover:hover) and (pointer:fine){
  .service:after{
    content:"";
    position:absolute;
    top:0;left:0;
    width:420px;height:420px;
    margin:-210px 0 0 -210px;
    z-index:0;
    pointer-events:none;
    opacity:0;
    background:radial-gradient(circle closest-side,rgba(250,75,150,.16),transparent);
    transform:translate3d(var(--sx,0px),var(--sy,0px),0);
    transition:opacity .2s ease;
  }
  .service[data-luz]:after{opacity:1}
  /* El texto por encima del brillo: el ::after se genera como último hijo, así
     que sin esto pintaría arriba de lo que hay que leer. */
  .service>*{position:relative;z-index:1}
}

/* ── 3. Revelado al entrar en pantalla ────────────────────────────────────
   El estado oculto lo pone el JS (clase en <html>), NUNCA el CSS base: si el
   script no corre o el navegador no tiene IntersectionObserver, el contenido se
   ve igual. Una web institucional que se esconde sola porque falló un script es
   peor que una sin animación.

   transform + opacity en vez del clip-path de la receta: estas secciones ocupan
   todo el ancho y son altas, y un clip-path las repinta enteras. */
.js-revelar .revelar{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .6s var(--ease-entrada),transform .6s var(--ease-entrada);
}
.js-revelar .revelar[data-visible]{opacity:1;transform:none}

/* ── Movimiento reducido ──────────────────────────────────────────────────
   Menos y más suave, no cero: se conserva el fundido, que ayuda a entender que
   algo apareció, y se saca todo el desplazamiento. */
@media (prefers-reduced-motion:reduce){
  /* El hero no necesita nada: su default ya es visible y sin desplazamiento, y
     la regla global del sitio (*{transition:none!important}) apaga la entrada.
     Lo unico que hay que asegurar es que el revelado por scroll no deje nada
     escondido si el JS no llega a marcarlo. */
  .js-revelar .revelar{opacity:1;transform:none}
  .service:after{transition:none}
}

/* Las redes en el pie van en su propio nav, separadas de la navegacion del
   sitio: no son secciones de la web, son otro destino. */
.footer-social{display:flex;gap:16px;flex-wrap:wrap}
@media (max-width:760px){.footer-inner{gap:14px}}