/* Reflected Studio — service landing pages (/tarjeta-fidelizacion-digital/, /pack-captacion-clientes/).
   Extends the one-page system (index.html + production.css): same tokens, shell, patterns and type scale.
   Standalone: these pages do not load production.css or app.js.
   Type scale (must stay equal to the home): H1 clamp(46px,6.4vw,104px)/.98 · H2 clamp(34px,4.6vw,64px)/1.03 ·
   card title clamp(26px,2.6vw,34px)/1.14 · question clamp(15px,1.25vw,18px)/1.4 · lead 17/1.72 (16/1.68 mobile) ·
   body 16/1.76 (15/1.72 mobile) · list line 14.5/1.6 · secondary 13–14 · eyebrow 11 mono. */

/* 1. Tokens ---------------------------------------------------------------- */
:root{color-scheme:dark;--bg:#050505;--ink:#F5F5F7;--ink-80:rgba(245,245,247,.8);--ink-66:rgba(245,245,247,.66);--ink-56:rgba(245,245,247,.56);--line:rgba(255,255,255,.09);--line-2:rgba(255,255,255,.14);--pink:#FF1F6E;--pink-2:#FF4D7D;--orange:#F0803C;--wa:#25D366;--grad:linear-gradient(90deg,#FF1F6E,#F0803C);--grad-ink:linear-gradient(96deg,#FF1F6E 0%,#FF4D7D 48%,#F0803C 100%);--card:linear-gradient(170deg,rgba(255,255,255,.05),rgba(255,255,255,.012));--pass:linear-gradient(140deg,#B80F4B 0%,#D0245F 44%,#C9482E 100%);--ease-out:cubic-bezier(.23,1,.32,1);--ease-in-out:cubic-bezier(.77,0,.175,1);--ease-expo:cubic-bezier(.16,1,.3,1);--display:Saira,sans-serif;--body:Manrope,sans-serif;--mono:'JetBrains Mono',monospace}

/* 2. Base ------------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth;scroll-padding-top:96px;scrollbar-color:#3A3A40 #050505;-webkit-text-size-adjust:100%}
body{margin:0;min-width:320px;background:var(--bg);color:var(--ink);font:400 16px/1.76 var(--body);-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;z-index:4;pointer-events:none;opacity:.05;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
img,svg{display:block;max-width:100%}
a{color:var(--pink-2);text-decoration:none}
a:hover{color:var(--orange)}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
::selection{background:#FF1F6E;color:#0A0A0B}
:focus-visible{outline:2px solid #F5F5F7;outline-offset:3px}
:where(a,button,summary):focus-visible{border-radius:6px}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ic{flex:none;width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.wa-ic{flex:none;width:19px;height:19px;fill:#FFFFFF}
.wrap{width:100%;max-width:1280px;margin-inline:auto;padding-inline:32px}
.nojs-only{display:block}
html.js .nojs-only{display:none}
html:not(.js) .js-only{display:none!important}
.skip-link{position:fixed;left:16px;top:12px;z-index:1000;transform:translateY(-160%);padding:12px 16px;border-radius:10px;background:#F5F5F7;color:#050505;font:700 14px/1 var(--body);transition:transform .18s ease}
.skip-link:hover{color:#050505}
.skip-link:focus{transform:translateY(0)}

/* 3. Header ---------------------------------------------------------------- */
.site-header{position:fixed;inset:0 0 auto;z-index:40;background:rgba(5,5,5,.88);border-bottom:1px solid rgba(255,255,255,.08);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);transition:background .4s ease,border-color .4s ease}
html.js .site-header:not(.is-scrolled){background:rgba(5,5,5,0);border-bottom-color:rgba(255,255,255,0)}
.site-header__inner{display:flex;align-items:center;gap:28px;width:100%;max-width:1280px;margin:0 auto;padding:18px 32px}
.site-header__progress{height:1.5px;background:rgba(255,255,255,.05)}
.site-header__progress>i{display:block;height:100%;background:var(--grad);transform:scaleX(var(--progress,0));transform-origin:left center}
.brand{display:flex;align-items:center;flex:0 0 auto;min-width:44px;min-height:44px}
.brand img{width:auto;height:40px}
.nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:4px 26px;margin-left:auto}
.nav__link{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;font:500 13.5px/1 var(--body);letter-spacing:.01em;color:#FFFFFF;transition:color 160ms ease}
.nav__link:hover{color:var(--pink-2)}
.nav__link[aria-current="page"],.menu__panel a[aria-current="page"]{color:var(--pink-2)}
.wa-btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 17px;border-radius:999px;background:var(--wa);color:#FFFFFF;font:700 13px/1 var(--body);letter-spacing:.01em;box-shadow:0 14px 34px -18px rgba(37,211,102,.9);transition:transform 200ms var(--ease-out),filter 200ms ease}
.wa-btn:hover{color:#FFFFFF}
.wa-btn::before,.btn--wa::before,.menu__wa::before{content:"";position:absolute;z-index:0;left:50%;top:50%;width:170%;aspect-ratio:1;background:conic-gradient(from 0deg,transparent 0 72%,rgba(117,242,154,.18) 78%,#E9FFF0 87%,#69F194 94%,transparent 100%);transform:translate3d(-50%,-50%,0) rotate(0deg);animation:edge-orbit 4.8s linear infinite;pointer-events:none}
.wa-btn::after,.btn--wa::after,.menu__wa::after{content:"";position:absolute;z-index:1;inset:2px;border-radius:inherit;background:var(--wa);pointer-events:none}
.wa-btn>*,.btn--wa>*,.menu__wa>*{position:relative;z-index:2}
.lang{position:relative;isolation:isolate;display:inline-grid;grid-template-columns:repeat(2,32px);align-items:center;flex:none;min-height:38px;padding:2px;border:1px solid rgba(255,255,255,.13);border-radius:999px;background:rgba(255,255,255,.035);box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.lang::before{content:"";position:absolute;inset:2px auto 2px 2px;z-index:0;width:calc((100% - 4px)/2);border-radius:999px;background:#F5F5F7;box-shadow:0 2px 8px rgba(0,0,0,.25);transition:transform 200ms var(--ease-in-out);pointer-events:none}
.lang[data-active="en"]::before{transform:translate3d(100%,0,0)}
.lang>.lang__opt{position:relative;z-index:1;display:grid;place-items:center;min-width:32px;min-height:32px;padding:0;border-radius:999px;background:transparent;font:600 9.5px/1 var(--mono);letter-spacing:.08em;color:rgba(245,245,247,.62);transition:color 160ms ease}
.lang>.lang__opt:hover{background:transparent;color:rgba(245,245,247,.62)}
.lang[data-active="es"]>.lang__opt:first-child,.lang[data-active="en"]>.lang__opt:last-child{color:#0B0B0F}
.lang:focus-within{border-color:rgba(245,245,247,.34)}
.menu{display:none;position:relative;margin-left:auto;flex:0 0 auto}
.menu>summary{display:grid;place-items:center;width:44px;height:44px;list-style:none;cursor:pointer;border:1px solid rgba(255,255,255,.16);border-radius:50%;background:rgba(255,255,255,.045);color:#F5F5F7;transition:border-color 240ms ease,background-color 240ms ease,transform 180ms var(--ease-out)}
.menu>summary::-webkit-details-marker{display:none}
.menu>summary:active{transform:scale(.96)}
.menu[open]>summary{border-color:rgba(255,255,255,.26);background:rgba(255,255,255,.07)}
.menu__icon{width:24px;height:24px;overflow:visible;fill:none;stroke:currentColor;stroke-width:2.8;stroke-linecap:round}
.menu__icon path{transform-box:view-box;transform-origin:12px 12px;transition:transform 260ms var(--ease-expo),opacity 160ms ease}
.menu[open] .menu__icon path:nth-child(1){transform:rotate(45deg) translateY(6px)}
.menu[open] .menu__icon path:nth-child(2){opacity:0}
.menu[open] .menu__icon path:nth-child(3){transform:rotate(-45deg) translateY(-6px)}
.menu__panel{position:absolute;top:calc(100% + 10px);right:0;width:min(318px,calc(100vw - 32px));max-height:calc(100vh - 78px);max-height:calc(100dvh - 78px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:10px;border:1px solid rgba(255,255,255,.13);border-radius:18px;background:#0B0B0D;box-shadow:0 24px 70px -24px rgba(0,0,0,.92)}
.menu[open] .menu__panel{animation:menu-in 320ms var(--ease-expo) both}
.menu__panel a{display:flex;align-items:center;min-height:46px;padding:0 14px;border-radius:10px;color:#FFFFFF;font:600 14px/1 var(--body)}
.menu__panel a:active{background:rgba(255,255,255,.08)}
.menu__langs{display:flex;align-items:center;justify-content:flex-start;margin-top:8px;padding:8px 2px 0;border-top:1px solid rgba(255,255,255,.09)}
/* Same 32 px pills as the home, with an invisible 44 px touch area in the menu. */
.menu__langs .lang__opt::after{content:"";position:absolute;inset:-6px 0 -6px -12px}
.menu__langs .lang__opt:last-child::after{inset:-6px -12px -6px 0}
/* «Servicios» submenu, the same pattern as the home. Desktop: the link keeps going to the services of the home and the
   chevron button next to it carries aria-expanded; the panel is opened by [data-open] from pages.js (hover, keyboard focus,
   the button, ArrowDown) and, without JavaScript, by hover / focus-within. It is absolutely placed, so nothing moves.
   Mobile menu: the chevron next to «Servicios» unfolds an indented list inside the scrolling panel. */
.nav__group{position:relative;display:inline-flex;align-items:center;gap:1px}
.nav__toggle{display:grid;place-items:center;flex:none;width:20px;height:28px;margin-right:-5px;padding:0;border:0;border-radius:6px;background:none;color:#FFFFFF;cursor:pointer;transition:color 160ms ease}
.nav__toggle svg,.menu__toggle svg{display:block;width:14px;height:14px;overflow:visible;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform 180ms var(--ease-out)}
.nav__toggle[aria-expanded="true"] svg,.menu__toggle[aria-expanded="true"] svg,html:not(.js) .nav__group:hover .nav__toggle svg,html:not(.js) .nav__group:focus-within .nav__toggle svg{transform:rotate(180deg)}
.nav__toggle:focus-visible{outline-offset:2px}
.nav__panel{position:absolute;top:100%;left:-14px;z-index:5;width:max-content;min-width:244px;max-width:calc(100vw - 32px);padding-top:6px;visibility:hidden;opacity:0;transform:translate3d(0,-6px,0);pointer-events:none;transition:opacity 140ms ease,transform 180ms var(--ease-out),visibility 0s linear 180ms}
.nav__group[data-open] .nav__panel,html:not(.js) .nav__group:hover .nav__panel,html:not(.js) .nav__group:focus-within .nav__panel{visibility:visible;opacity:1;transform:none;pointer-events:auto;transition-delay:0s}
.nav__sheet{display:grid;max-height:calc(100vh - 96px);max-height:calc(100dvh - 96px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:8px;border:1px solid rgba(255,255,255,.13);border-radius:16px;background:rgba(11,11,13,.97);box-shadow:0 24px 70px -24px rgba(0,0,0,.92)}
.nav__panel a{display:flex;align-items:center;min-height:38px;padding:0 12px;border-radius:9px;font:500 13.5px/1.2 var(--body);letter-spacing:.01em;white-space:nowrap;color:#FFFFFF;transition:background-color 160ms ease}
.nav__panel a[aria-current="page"]{background:rgba(255,31,110,.1);color:var(--pink-2)}
.nav__panel a:focus-visible{outline-offset:-2px;border-radius:9px;background:rgba(255,255,255,.08)}
.nav__sep{display:block;height:1px;margin:6px 12px;background:rgba(255,255,255,.12)}
.menu__row{display:flex;align-items:center;gap:4px}
.menu__row>a{flex:1 1 auto;min-width:0}
.menu__toggle{display:grid;place-items:center;flex:0 0 46px;height:46px;padding:0;border:0;border-radius:10px;background:rgba(255,255,255,.06);color:#FFFFFF;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color 160ms ease}
.menu__toggle svg{width:18px;height:18px}
.menu__toggle:active{background:rgba(255,255,255,.12)}
html:not(.js) .menu__toggle{display:none}
.menu__sublist{display:grid;margin:2px 0 6px 14px;padding-left:8px;border-left:1px solid rgba(255,255,255,.14)}
.menu__sublist[hidden]{display:none}
html:not(.js) .menu__sublist[hidden]{display:grid}
.menu__panel .menu__sublist a{min-height:44px;font-weight:500;font-size:13.5px;line-height:1.25;color:rgba(245,245,247,.88)}
.menu__panel .menu__sublist a[aria-current="page"]{color:var(--pink-2)}
.menu__subsep{display:block;height:1px;margin:6px 12px;background:rgba(255,255,255,.12)}
.menu__panel .menu__wa{position:relative;isolation:isolate;overflow:hidden;justify-content:center;gap:9px;min-height:48px;margin:7px 4px 5px;padding:0 16px;border-radius:999px;background:var(--wa);font:700 13px/1 var(--body);box-shadow:0 14px 34px -18px rgba(37,211,102,.9)}

/* 4. Shared atoms ---------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 30px;border:0;border-radius:999px;font:700 14.5px/1 var(--body);text-align:center;transition:transform 200ms var(--ease-out),filter 200ms ease,box-shadow 200ms var(--ease-out)}
.btn .ic{font-size:17px}
.btn>.ic:last-child{margin-right:-3px}
.btn:active{transform:scale(.98)}
.btn--wa{position:relative;isolation:isolate;overflow:hidden;background:var(--wa);color:#FFFFFF;text-shadow:0 1px 2px rgba(0,75,41,.45);box-shadow:0 16px 38px -18px rgba(37,211,102,.9)}
.btn--wa:hover{color:#FFFFFF}
.btn--line{border:1px solid transparent;background:linear-gradient(#131316,#131316) padding-box,linear-gradient(96deg,#FF1F6E,#F0803C) border-box;color:#FFFFFF;box-shadow:0 14px 30px -22px rgba(255,31,110,.95),inset 0 1px rgba(255,255,255,.08)}
.btn--line:hover{color:#FFFFFF}
.btn--grad{background:linear-gradient(96deg,#D41459,#C4315E 46%,#B64F20);color:#FFFFFF;box-shadow:0 16px 48px -16px rgba(255,31,110,.58),0 14px 34px -20px rgba(240,128,60,.7)}
.btn[disabled]{opacity:.42;filter:saturate(.5);box-shadow:none;cursor:not-allowed}
.pill{display:inline-flex;align-items:center;gap:11px;margin-bottom:34px;padding:8px 15px 8px 12px;border:1px solid rgba(255,255,255,.12);border-radius:999px;background:rgba(255,255,255,.03);font:500 10.5px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(245,245,247,.78)}
.pill__dot{position:relative;flex:none;width:7px;height:7px;border-radius:50%;background:var(--pink)}
.pill__dot::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--pink);animation:ping 2.6s ease-out infinite}
.opener{display:flex;align-items:baseline;gap:16px;margin-bottom:38px}
.opener__label{margin:0;font:500 11px/1.6 var(--mono);letter-spacing:.2em;text-transform:uppercase;background:var(--grad-ink);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.opener__rule{flex:1;height:1px;background:linear-gradient(90deg,rgba(255,77,125,.4),transparent)}
.h2{max-width:20ch;font:600 clamp(34px,4.6vw,64px)/1.03 var(--display);letter-spacing:-.03em;color:var(--ink);text-wrap:balance}
.cap{font:500 11px/1.6 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-66)}
.marker{position:relative;z-index:1;display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#FF1F6E 0%,#FF4D7D 48%,#F0803C 100%);box-shadow:0 9px 28px -15px rgba(255,31,110,.9);font:800 13px/1 var(--mono);letter-spacing:.02em;color:#FFFFFF}
.tick{display:grid;place-items:center;flex:none;width:17px;height:17px;border-radius:50%;background:linear-gradient(96deg,#FF1F6E,#F0803C);font-size:10px;color:#FFFFFF}
.tick .ic{stroke-width:3.4}
.tile{display:grid;place-items:center;flex:none;width:46px;height:46px;border:1px solid rgba(255,255,255,.08);border-radius:13px;background:radial-gradient(circle at 50% 42%,rgba(255,77,125,.11),rgba(255,255,255,.025) 58%,rgba(255,255,255,.01));box-shadow:inset 0 1px rgba(255,255,255,.055);font-size:20px;color:var(--pink-2)}
.tile .ic{stroke-width:1.6}
.note-rule{position:relative;max-width:60ch;padding:3px 0 4px 24px;font:500 16px/1.58 var(--body);color:var(--ink);text-wrap:pretty}
.note-rule::before{content:"";position:absolute;inset:0 auto 0 0;width:2px;background:linear-gradient(180deg,#FF1F6E,#F0803C)}
.section{position:relative;padding:128px 0 0}
.section>.wrap>.h2+*{margin-top:56px}
html.js [data-rv]{opacity:0;transform:translate3d(0,24px,0);transition:opacity .72s var(--ease-expo),transform .72s var(--ease-expo);transition-delay:var(--d,0ms)}
html.js [data-rv].is-visible{opacity:1;transform:none}
/* Shared text styles (home scale) */
.hero__sub,.piece__name,.jgoal__title{font:600 clamp(26px,2.6vw,34px)/1.14 var(--display);letter-spacing:-.025em;color:var(--ink)}
.piece__name{overflow-wrap:anywhere}
.disc__q,.strip li>span:last-child,.incl h3,.jmoment,.chart__x,.price__head,.steps h3,.work__copy strong{font:600 clamp(15px,1.25vw,18px)/1.4 var(--display);letter-spacing:-.01em;color:#FFFFFF}
.facts li,.piece__out,.demo__nojs{font:500 14.5px/1.6 var(--body)}

/* 5. Hero ------------------------------------------------------------------ */
.hero{position:relative;padding:150px 0 0}
.hero__bg{position:absolute;inset:0 0 -150px;overflow:clip;pointer-events:none;-webkit-mask-image:linear-gradient(#000 calc(100% - 280px),transparent);mask-image:linear-gradient(#000 calc(100% - 280px),transparent)}
.hero__mesh{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:76px 76px;-webkit-mask-image:radial-gradient(ellipse 90% 60% at 50% 35%,#000,transparent 75%);mask-image:radial-gradient(ellipse 90% 60% at 50% 35%,#000,transparent 75%)}
.hero__orb{position:absolute;border-radius:50%}
.hero__orb--a{top:-14%;left:-6%;width:52vw;height:52vw;filter:blur(90px);background:radial-gradient(circle,rgba(255,31,110,.5),transparent 66%);animation:drift-a 19s ease-in-out infinite}
.hero__orb--b{bottom:-24%;right:-10%;width:46vw;height:46vw;filter:blur(100px);background:radial-gradient(circle,rgba(240,128,60,.38),transparent 66%);animation:drift-b 23s ease-in-out infinite}
.hero__grid{position:relative;z-index:2;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:center;gap:64px;width:100%;max-width:1320px;margin:0 auto;padding:0 32px}
.hero__grid--pack{align-items:end}
.hero__title{max-width:12ch;font:600 clamp(46px,6.4vw,104px)/.98 var(--display);letter-spacing:-.042em;color:var(--ink)}
.hero__line{display:block;overflow-wrap:anywhere}
.hero__line--accent,.hero__num,.hero__accent{background:linear-gradient(96deg,#FF1F6E,#FF4D7D 40%,#F0803C 75%,#FF1F6E);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.hero__line--accent{margin-bottom:-.12em;padding-bottom:.12em}
.hero__num{white-space:nowrap}
.hero__lead{max-width:48ch;margin-top:26px;font:400 17px/1.72 var(--body);color:#FFFFFF;text-wrap:pretty}
.hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:34px}
.facts{display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:30px}
.facts li{display:inline-flex;align-items:center;gap:10px;color:#FFFFFF}
.hero .note-rule{margin-top:30px;color:#FFFFFF}
.hero__sub{max-width:20ch;text-wrap:balance}
.hero__side .hero__lead{margin-top:20px}
.hero__side .hero__actions{margin-top:30px}
.hero__copy>*,.hero__side>*{animation:hero-in 820ms var(--ease-out) both}
.hero__copy>:nth-child(2){animation-delay:70ms}
.hero__copy>:nth-child(3),.hero__side>:nth-child(1){animation-delay:150ms}
.hero__copy>:nth-child(4),.hero__side>:nth-child(2){animation-delay:230ms}
.hero__copy>:nth-child(5),.hero__side>:nth-child(3){animation-delay:310ms}
.hero__copy>:nth-child(n+6){animation-delay:390ms}

/* 6. Phone, notification and pass (loyalty page) --------------------------- */
.hero__visual{position:relative;display:grid;justify-items:center;perspective:1500px}
.hero__visual::before{content:"";position:absolute;inset:6% 2% auto;height:calc(clamp(264px,20vw,288px)*1.75);border-radius:50%;background:radial-gradient(circle,rgba(255,31,110,.36),transparent 64%);filter:blur(64px);pointer-events:none}
.phone{--pw:300px;position:relative;flex:none;width:var(--pw);aspect-ratio:300/628;padding:calc(var(--pw)*.034);border-radius:calc(var(--pw)*.172);background:linear-gradient(150deg,#5A5A62 0%,#1B1B1F 16%,#0B0B0D 52%,#2C2C32 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),inset 0 0 0 calc(var(--pw)*.014) #050506,0 54px 120px -44px rgba(255,31,110,.55),0 36px 76px -30px rgba(0,0,0,.95)}
.phone::before{content:"";position:absolute;right:-2px;top:24%;width:3px;height:11%;border-radius:0 3px 3px 0;background:linear-gradient(180deg,#4A4A52,#1C1C20)}
.phone__screen{position:relative;isolation:isolate;overflow:hidden;height:100%;border-radius:calc(var(--pw)*.14);background:#0B0509;container-type:inline-size}
.phone__wall{position:absolute;inset:0;z-index:-1;background:radial-gradient(120% 58% at 16% 0%,rgba(255,31,110,.6),transparent 62%),radial-gradient(96% 48% at 104% 28%,rgba(240,128,60,.44),transparent 62%),radial-gradient(130% 56% at 50% 112%,rgba(150,18,84,.62),transparent 62%),#0B0509}
.phone__island{position:absolute;z-index:3;top:3.6cqw;left:50%;width:29cqw;height:8.2cqw;margin-left:-14.5cqw;border-radius:999px;background:#000000}
.phone__status{position:absolute;z-index:3;top:5cqw;right:8cqw;display:flex;align-items:center;gap:1.7cqw;font-size:4.7cqw;color:#FFFFFF}
.phone__home{position:absolute;z-index:3;left:50%;bottom:2.5cqw;width:36cqw;height:1.5cqw;margin-left:-18cqw;border-radius:999px;background:rgba(255,255,255,.72)}
.lock{display:grid;justify-items:center;padding-top:20cqw;color:#FFFFFF}
.lock__date{font:500 5.1cqw/1.2 var(--body);color:rgba(255,255,255,.88)}
.lock__time{margin-top:.6cqw;font:600 27cqw/1 var(--display);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.notifs{position:absolute;z-index:2;top:63cqw;left:4.4cqw;right:4.4cqw}
.notif{display:grid;grid-template-columns:10.6cqw minmax(0,1fr);align-items:start;gap:3.2cqw;padding:3.6cqw 4.2cqw 3.9cqw 3.6cqw;border:1px solid rgba(255,255,255,.14);border-radius:6.4cqw;background:rgba(44,28,36,.66);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);box-shadow:0 3cqw 7cqw -4cqw rgba(0,0,0,.7);text-align:left}
.notif__icon{display:grid;place-items:center;width:10.6cqw;height:10.6cqw;border-radius:2.8cqw;background:linear-gradient(135deg,#FF1F6E,#F0803C);font-size:6cqw;color:#FFFFFF}
.notif__top{display:flex;align-items:baseline;justify-content:space-between;gap:2cqw}
.notif__app{font:700 4.35cqw/1.25 var(--body);color:#FFFFFF}
.notif__when{font:500 3.6cqw/1.25 var(--body);color:rgba(255,255,255,.66)}
.notif__text{margin-top:.6cqw;font:500 4.35cqw/1.32 var(--body);color:rgba(255,255,255,.94);overflow-wrap:anywhere}
.phone__pass{position:absolute;z-index:1;left:5cqw;right:5cqw;bottom:8cqw}
.pass{position:relative;display:block;container-type:inline-size}
.pass__face{position:relative;isolation:isolate;overflow:hidden;display:grid;gap:5.4cqw;padding:5.6cqw 6cqw 5.8cqw;border-radius:6.6cqw;background:var(--pass);color:#FFFFFF;box-shadow:inset 0 1px rgba(255,255,255,.3),inset 0 0 0 1px rgba(255,255,255,.09),0 7cqw 14cqw -8cqw rgba(0,0,0,.85)}
.pass__face::before{content:"";position:absolute;z-index:-1;inset:0;background:radial-gradient(90% 70% at 100% 0%,rgba(255,255,255,.22),transparent 58%),linear-gradient(118deg,transparent 46%,rgba(255,255,255,.09) 52%,transparent 60%)}
.pass__head{display:flex;align-items:center;gap:3.2cqw}
.pass__logo{display:grid;place-items:center;flex:none;width:11cqw;height:11cqw;border-radius:3cqw;background:rgba(255,255,255,.96);font-size:6.4cqw;color:#B80F4B}
.pass__issuer{flex:1;min-width:0;font:700 5cqw/1.15 var(--body);letter-spacing:-.005em}
.pass__kv{display:grid;gap:.9cqw;justify-items:end;text-align:right}
.pass__kv small{font:500 2.9cqw/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.86)}
.pass__kv b{font:600 6.6cqw/1 var(--display);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.pass__kv--left{justify-items:start;text-align:left}
.pass__kv--left b{font:600 4.9cqw/1.15 var(--body);letter-spacing:0}
.stamps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:3.2cqw}
.stamp{display:grid;place-items:center;aspect-ratio:1;border:.55cqw dashed rgba(255,255,255,.56);border-radius:50%;background:rgba(255,255,255,.07);font-size:6.6cqw;color:transparent}
.stamp .ic{stroke-width:2.8}
.stamp--prize{color:rgba(255,255,255,.86)}
.stamp--prize .ic{stroke-width:2}
.stamp.is-on{border-color:transparent;background:#FFFFFF;color:#C2104F;box-shadow:0 1.4cqw 3cqw -1.2cqw rgba(60,0,22,.7)}
.stamp.is-new{animation:stamp-in 460ms var(--ease-expo) both}
.pass__foot{display:flex;align-items:center;justify-content:space-between;gap:4cqw;padding-top:5cqw;border-top:1px solid rgba(255,255,255,.26)}
.pass__qr{display:grid;place-items:center;flex:none;width:17cqw;height:17cqw;border-radius:3.6cqw;background:#FFFFFF;font-size:12.4cqw;color:#0B0B0F}
.pass__qr .ic{stroke-width:1.5}
.pass.is-complete [data-pass-prize]{display:inline-flex;align-items:center;min-height:9cqw;padding:0 3.6cqw;border-radius:999px;background:#FFFFFF;color:#B80F4B;font-weight:700}
.pass.is-complete .pass__face::after{content:"";position:absolute;z-index:-1;inset:-40% -60%;background:linear-gradient(112deg,transparent 42%,rgba(255,255,255,.34) 50%,transparent 58%);animation:pass-sheen 1.1s var(--ease-out) both}
.phone--hero{--pw:clamp(264px,20vw,288px);transform:rotateY(var(--ry,-11deg)) rotateX(var(--rx,5deg)) rotateZ(1deg);transition:transform 240ms var(--ease-out);will-change:transform;animation:phone-in 1.2s var(--ease-expo) 120ms backwards}
html.js .phone--hero .notif{opacity:0;transform:translate3d(0,-14cqw,0) scale(.92);filter:blur(6px)}
html.js .phone--hero .notif.is-in{opacity:1;transform:none;filter:none;transition:opacity .5s var(--ease-out),transform .8s var(--ease-expo),filter .5s ease}
/* Official "Add to Wallet" badges as compatibility marks: flat, unmodified, equal height (48 px, Google's minimum),
   with more clear space than the guidelines ask for (8 px Google, a tenth of the height Apple). */
.wallets{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 16px;margin-top:34px}
.wallets img{flex:none;width:auto;max-width:none;height:48px}
.hero__visual .cap{position:relative;margin-top:22px;text-align:center}

/* 7. How it works + demo (loyalty page) ------------------------------------ */
.strip{display:flex;align-items:center;padding:18px 0;border-block:1px solid var(--line)}
.strip li{display:flex;align-items:center;flex:0 1 auto;gap:14px}
.strip li:not(:last-child){flex:1 1 auto}
.strip li:not(:last-child)::after{content:"";flex:1 1 24px;min-width:24px;height:2px;margin:0 20px 0 6px;border-radius:2px;background:linear-gradient(90deg,rgba(255,77,125,.75),rgba(240,128,60,.22))}
.strip li>span:last-child{text-wrap:balance}
.demo{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);align-items:center;gap:clamp(40px,6vw,88px);margin-top:44px}
.demo__controls{display:grid;gap:22px}
.demo__stage{position:relative;display:grid;justify-items:center}
.demo__stage::before{content:"";position:absolute;inset:6% 6% 10%;border-radius:50%;background:radial-gradient(circle,rgba(255,31,110,.3),rgba(240,128,60,.12) 46%,transparent 68%);filter:blur(60px);pointer-events:none}
.phone--demo{--pw:min(288px,calc(100vw - 72px))}
.composer{position:relative;display:grid;gap:20px;padding:26px 28px 28px;border:1px solid var(--line);border-radius:24px;background:var(--card)}
.field__top{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:10px}
.field__top label{font:600 14px/1.55 var(--body);color:#FFFFFF}
.field__count{font:500 11px/1.6 var(--mono);letter-spacing:.06em;font-variant-numeric:tabular-nums;color:var(--ink-66)}
.field__count.is-max{color:var(--orange)}
.field__input{display:block;width:100%;min-height:56px;padding:0 18px;border:1px solid rgba(255,255,255,.16);border-radius:14px;background:rgba(5,5,5,.5);font:500 16px/1.3 var(--body);color:#FFFFFF;caret-color:var(--pink);transition:border-color 160ms ease,box-shadow 160ms ease}
.field__input::placeholder{color:var(--ink-56);opacity:1}
.field__input:hover{border-color:rgba(255,255,255,.28)}
.field__input:focus-visible{outline:0;border-color:var(--pink-2);box-shadow:0 0 0 3px rgba(255,77,125,.28)}
.field__hint{min-height:1.62em;margin-top:8px;font:400 13px/1.62 var(--body);color:var(--ink-66)}
.field__hint.is-max{color:#F6A671}
.presets{display:flex;flex-wrap:wrap;gap:8px}
.preset{display:inline-flex;align-items:center;min-height:44px;padding:8px 16px;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:rgba(255,255,255,.03);font:600 13px/1.3 var(--body);text-align:left;color:rgba(245,245,247,.88);transition:border-color 160ms ease,background-color 160ms ease,color 160ms ease,transform 160ms var(--ease-out)}
.preset:active{transform:scale(.98)}
.preset[aria-pressed="true"]{border-color:rgba(255,77,125,.72);background:rgba(255,31,110,.13);color:#FFFFFF}
.composer .btn{justify-self:start}
.stamper{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.stamper__state{font:500 11px/1.6 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-66)}
.demo__label{display:flex;align-items:flex-start;gap:10px;max-width:56ch;font:500 14px/1.55 var(--body);color:var(--ink-80)}
.demo__label .ic{margin-top:3px;font-size:16px;color:var(--pink-2)}
.demo__nojs{padding:18px 20px;border:1px solid var(--line);border-radius:16px;color:var(--ink-80)}

/* 8. What's included (loyalty page) ---------------------------------------- */
.incl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 64px;border-top:1px solid var(--line)}
.incl li{display:flex;align-items:center;gap:18px;min-height:78px;padding:15px 0;border-bottom:1px solid var(--line)}
.aside{display:flex;align-items:flex-start;gap:10px;margin-top:22px;font:400 14px/1.55 var(--body);color:var(--ink-66)}
.aside .ic{margin-top:3px;font-size:16px;color:var(--pink-2)}

/* 8b. Price (loyalty page) --------------------------------------------------- */
.prices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.price{position:relative;overflow:hidden;padding:32px 40px 20px;border:1px solid var(--line);border-radius:24px;background:var(--card)}
.price::before{content:"";position:absolute;top:-40%;right:-20%;width:60%;height:80%;border-radius:50%;background:radial-gradient(circle,rgba(255,31,110,.22),transparent 70%);filter:blur(70px);pointer-events:none}
.price--monthly::before{background:radial-gradient(circle,rgba(240,128,60,.2),transparent 70%)}
.price__head{position:relative;display:grid;gap:10px}
.price__fig{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 12px}
.price__num{font:600 clamp(34px,4.6vw,64px)/1.03 var(--display);letter-spacing:-.03em;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink)}
.price__unit{color:var(--ink-80)}
.price__list{position:relative;margin-top:20px}
.price__list li{display:flex;align-items:flex-start;gap:12px;padding:11px 0;border-top:1px solid rgba(255,255,255,.07);font:500 14.5px/1.6 var(--body);color:var(--ink-80)}
.price__list .tick{margin-top:3px}
.prices__foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:24px}
.prices__foot .aside{margin-top:0}

/* 9. FAQ disclosure rows ---------------------------------------------------- */
.faq{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1fr);align-items:start;gap:clamp(40px,6vw,96px)}
.disc-list{border-top:1px solid var(--line)}
.disc{border-bottom:1px solid var(--line)}
.disc>summary{display:flex;align-items:center;gap:20px;padding:19px 4px;list-style:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.disc>summary::-webkit-details-marker{display:none}
.disc__q{flex:1;min-width:0;transition:color 150ms ease}
.disc__plus{display:grid;place-items:center;flex:none;width:34px;height:34px;border:1px solid rgba(255,255,255,.14);border-radius:50%;font-size:14px;color:var(--ink);transition:transform 220ms var(--ease-out),border-color 180ms ease,box-shadow 180ms ease,color 180ms ease}
.disc[open]:not(.is-closing)>summary .disc__q{color:var(--pink-2)}
.disc[open]:not(.is-closing)>summary .disc__plus{transform:rotate(45deg);border-color:rgba(255,77,125,.58);color:var(--pink-2);box-shadow:0 8px 24px -14px rgba(255,31,110,.9)}
.disc__a{max-width:62ch;padding:0 54px 26px 4px;font:400 16px/1.76 var(--body);color:rgba(245,245,247,.76);text-wrap:pretty}

/* 10. Journey (pack page) --------------------------------------------------- */
.journey{display:grid;grid-template-columns:minmax(0,1.25fr) 96px minmax(0,.82fr) 64px minmax(0,1fr);align-items:stretch}
.jsources{display:grid;grid-auto-rows:minmax(72px,1fr)}
.jsrc{position:relative;display:flex;align-items:center;padding:7px 0}
.jbox{display:flex;align-items:center;justify-content:space-between;flex:1;gap:16px;min-width:0;min-height:58px;padding:8px 12px 8px 20px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.024)}
.jmoment{display:flex;align-items:center;gap:14px;min-width:0;text-wrap:balance}
.jmoment .ic{font-size:20px;color:var(--pink-2)}
.jpiece{display:inline-flex;align-items:center;flex:none;gap:8px;min-height:34px;padding:0 13px 0 10px;border:1px solid rgba(255,255,255,.12);border-radius:999px;background:rgba(255,255,255,.045);font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;color:rgba(245,245,247,.9)}
.jpiece--text{padding:0 12px 0 13px}
.jpiece img{flex:none;width:16px;height:16px;object-fit:contain}
.jpiece img+img{margin-left:-3px}
.mark-openai{transform:scale(1.32)}
.jwires{width:100%;height:100%;min-height:288px;overflow:visible}
.jwires path{fill:none;stroke-linecap:round}
.jwires .w{stroke-width:1.5;opacity:.62}
.jwires .p{stroke:#FFD0DD;stroke-width:2.4;stroke-dasharray:9 101;stroke-dashoffset:110;opacity:0}
html.js .journey.is-in .jwires .p{opacity:1;animation:wire 2.8s linear var(--wd,0s) infinite}
.jhub{position:relative;align-self:center;display:grid;gap:14px;padding:16px;border:1px solid rgba(255,77,125,.34);border-radius:22px;background:linear-gradient(170deg,rgba(255,31,110,.09),rgba(255,255,255,.015));box-shadow:0 30px 70px -44px rgba(255,31,110,.8)}
.jhub__head{display:grid;justify-items:start;gap:10px}
.jsite{padding:1.5px;border-radius:13px;background:linear-gradient(135deg,#FF1F6E,#F0803C)}
.jsite__shell{overflow:hidden;border-radius:11.5px;background:#0A0A0B}
.jsite__bar{display:flex;align-items:center;gap:5px;padding:8px 10px;background:rgba(255,255,255,.06)}
.jsite__bar i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.22)}
.jsite__bar span{margin-left:6px;padding:3px 9px;border-radius:5px;background:rgba(0,0,0,.45);font:400 9px/1.3 var(--mono);color:rgba(245,245,247,.6)}
.jsite__screen{display:grid;gap:7px;padding:13px 14px 14px;background:#FFFFFF}
.jsite__screen b{display:block;height:7px;border-radius:4px;background:rgba(11,11,15,.14)}
.jsite__screen b:first-child{width:72%;height:11px;background:#0B0B0F}
.jsite__screen b:nth-child(3){width:58%}
.jsite__cta{display:flex;gap:6px;margin-top:5px}
.jsite__cta span{display:grid;place-items:center;height:24px;padding:0 11px;border:1px solid rgba(11,11,15,.2);border-radius:999px;font:700 9px/1 var(--body);color:#0B0B0F}
.jsite__cta span:first-child{border-color:transparent;background:#128C4B;color:#FFFFFF}
.jgoal{align-self:center;display:flex;align-items:center;gap:20px;min-width:0}
.jgoal__ring{position:relative;display:grid;place-items:center;flex:none;width:92px;height:92px;border:2px solid transparent;border-radius:50%;background:linear-gradient(#0A0A0B,#0A0A0B) padding-box,linear-gradient(135deg,#FF1F6E,#F0803C) border-box;box-shadow:0 0 0 7px rgba(255,31,110,.09),0 24px 54px -22px rgba(255,31,110,.9)}
.jgoal__ring::after{content:"";position:absolute;inset:-2px;border:2px solid var(--pink-2);border-radius:50%;opacity:0}
html.js .journey.is-in .jgoal__ring::after{animation:ring 2.8s ease-out 1.6s infinite}
.jgoal__ring span{display:flex;gap:7px;font-size:23px;color:#FFFFFF}
.jgoal__title{text-wrap:balance}
.jgoal__note{margin-top:8px;font:600 14px/1.55 var(--body);color:var(--pink-2)}
.journey-cap{margin-top:18px}

/* 11. Pieces + measurement (pack page) -------------------------------------- */
.pieces{border-top:1px solid var(--line)}
.piece{display:grid;grid-template-columns:minmax(0,430px) minmax(0,1fr) 56px;align-items:center;gap:6px 32px;padding:14px 4px 15px;border-bottom:1px solid var(--line)}
.piece__out{color:var(--ink)}
/* Every item carries its separator on the left; the list is shifted by that width and clipped, so the separator of
   the first item of each line is never shown and no line ends with one. */
.piece__list{margin:3px 0 0 -19px;font:400 13px/1.62 var(--body);color:var(--ink-66);clip-path:inset(0 0 0 19px)}
.piece__list li{position:relative;display:inline-block;max-width:100%;padding-left:19px;vertical-align:top}
.piece__list li::before{content:"";position:absolute;top:calc(.81em - 1.5px);left:8px;width:3px;height:3px;border-radius:50%;background:var(--pink-2)}
.piece__note{display:flex;align-items:flex-start;gap:8px;margin-top:8px;font:400 13px/1.62 var(--body);color:var(--ink-80)}
.piece__note .ic{margin-top:4px;font-size:14px;color:var(--pink-2)}
.piece__marks{display:flex;align-items:center;justify-content:flex-end;gap:9px;font-size:24px;color:var(--pink-2)}
.piece__marks img{width:24px;height:24px;object-fit:contain}
.piece__marks .ic{stroke-width:1.6}
.measure{display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1fr);align-items:center;gap:clamp(40px,6vw,92px)}
.points{border-top:1px solid var(--line)}
.points li{display:grid;grid-template-columns:46px minmax(0,1fr);align-items:center;gap:20px;padding:15px 0;border-bottom:1px solid var(--line)}
.points p{color:var(--ink-66);text-wrap:pretty}
.points strong{font-weight:600;color:#FFFFFF}
.measure .note-rule{margin-top:30px}
.chart{position:relative;overflow:hidden;padding:24px 28px 22px;border:1px solid var(--line);border-radius:24px;background:var(--card)}
.chart::before{content:"";position:absolute;top:-36%;right:-18%;width:62%;height:80%;border-radius:50%;background:radial-gradient(circle,rgba(255,31,110,.2),transparent 70%);filter:blur(70px);pointer-events:none}
.chart figcaption{position:relative;display:flex;align-items:flex-start;gap:9px;font:500 11px/1.6 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-80)}
.chart figcaption .ic{margin-top:2px;font-size:14px;color:var(--pink-2)}
.chart__plot{position:relative;aspect-ratio:16 / 7;margin:30px 12px 0}
.chart__plot svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.chart__grid line{stroke:rgba(255,255,255,.1);stroke-width:1;vector-effect:non-scaling-stroke}
.chart__grid line:last-child{stroke:rgba(255,255,255,.3)}
.chart__line{fill:none;stroke-width:3;stroke-linecap:round;stroke-dasharray:.1 9;vector-effect:non-scaling-stroke}
.chart__draw{clip-path:inset(-20% 0 -20% 0)}
html.js .chart__draw{clip-path:inset(-20% 100% -20% 0);transition:clip-path 1.9s var(--ease-expo) .2s}
html.js .chart.is-in .chart__draw{clip-path:inset(-20% -6% -20% 0)}
.chart__dot{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#FFFFFF;box-shadow:0 0 0 4px rgba(255,31,110,.36)}
.chart__dot--now{left:6%;top:77.27%}
.chart__dot--goal{left:94%;top:9.09%;width:20px;height:20px;margin:-10px 0 0 -10px;border:3px solid var(--orange);background:var(--bg);box-shadow:0 0 0 5px rgba(240,128,60,.22)}
html.js .chart__dot--goal{opacity:0;transform:scale(.4);transition:opacity .4s ease 1.5s,transform .7s var(--ease-expo) 1.5s}
html.js .chart.is-in .chart__dot--goal{opacity:1;transform:none}
.chart__val{position:absolute;font:600 13px/1 var(--body);white-space:nowrap;color:#FFFFFF}
.chart__val--now{left:6%;top:77.27%;transform:translate(-7px,-32px)}
.chart__val--goal{right:6%;top:9.09%;transform:translate(-20px,-50%)}
.chart__x{position:relative;display:flex;justify-content:space-between;gap:16px;margin:12px 12px 0;padding-top:12px}
.chart__x span:last-child{text-align:right}

/* 12. Final CTA, trademark note, footer ------------------------------------- */
.final{position:relative;padding:128px 0 0}
.final__panel{position:relative;isolation:isolate;overflow:hidden;padding:clamp(56px,7vw,86px);border:1px solid rgba(255,255,255,.12);border-radius:24px;background-color:#B82759;background-image:linear-gradient(118deg,#A9104B 0%,#C51B5A 24%,#D65370 48%,#CE7046 72%,#9B361F 100%);background-size:190% 190%;background-position:8% 44%;box-shadow:0 36px 100px -58px rgba(255,31,110,.76),inset 0 1px rgba(255,255,255,.14);animation:final-base 8.5s var(--ease-in-out) infinite alternate paused}
.final__panel::before{content:"";position:absolute;z-index:1;inset:0;background:radial-gradient(ellipse at 50% 42%,rgba(28,0,14,.04) 0%,rgba(24,0,12,.1) 54%,rgba(14,0,8,.18) 100%),linear-gradient(180deg,rgba(28,0,14,.08),rgba(34,0,17,.14));pointer-events:none}
.final__panel::after{content:"";position:absolute;z-index:1;inset:0;background:linear-gradient(112deg,rgba(255,255,255,.06),transparent 31%,transparent 68%,rgba(31,0,15,.11));pointer-events:none}
.final__fluid{position:absolute;z-index:0;inset:-20%;overflow:hidden;opacity:.96;filter:blur(30px) saturate(1.08);transform:translateZ(0);contain:paint;pointer-events:none}
.blob{position:absolute;display:block;border-radius:50%;animation-timing-function:var(--ease-in-out);animation-iteration-count:infinite;animation-direction:alternate;animation-play-state:paused}
.blob--pink{top:20%;left:-8%;width:55%;height:64%;background:radial-gradient(ellipse at 38% 34%,rgba(255,154,192,.98) 0%,rgba(255,31,110,.86) 28%,rgba(220,18,91,.48) 50%,rgba(220,18,91,0) 74%);animation-name:fluid-pink;animation-duration:10.2s}
.blob--orange{top:-13%;right:-8%;width:57%;height:72%;background:radial-gradient(ellipse at 42% 36%,rgba(255,226,172,.98) 0%,rgba(240,128,60,.88) 29%,rgba(210,81,52,.48) 52%,rgba(210,81,52,0) 75%);animation-name:fluid-orange;animation-duration:12.4s}
.blob--coral{bottom:-22%;left:24%;width:58%;height:67%;background:radial-gradient(ellipse at 44% 38%,rgba(255,183,161,.96) 0%,rgba(239,84,105,.82) 30%,rgba(192,28,86,.44) 53%,rgba(192,28,86,0) 76%);animation-name:fluid-coral;animation-duration:13.8s}
.blob--light{top:25%;left:36%;width:38%;height:48%;background:radial-gradient(ellipse at 48% 44%,rgba(255,247,226,.96) 0%,rgba(255,205,151,.72) 27%,rgba(255,116,132,.34) 50%,rgba(255,116,132,0) 72%);animation-name:fluid-light;animation-duration:9.2s}
.final__panel.is-in,.final__panel.is-in .blob{animation-play-state:running}
.final__layout{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:34px;max-width:980px;margin-inline:auto;text-align:center}
.final__title{max-width:17ch;margin-inline:auto;font:600 clamp(34px,4.65vw,62px)/1.02 var(--display);letter-spacing:-.03em;color:#FFFFFF;text-shadow:0 1px 12px rgba(66,0,23,.16);text-wrap:balance}
.final__text{max-width:56ch;margin:22px auto 0;font:500 16px/1.65 var(--body);color:#FFFFFF;text-wrap:pretty}
.final .btn--wa{width:min(100%,300px);min-height:54px;padding:0 34px;font-size:15px}
.site-footer{position:relative;margin-top:120px;padding:70px 0 40px;border-top:1px solid rgba(255,255,255,.08)}
.site-footer__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:48px;margin-bottom:60px}
.site-footer__logo{width:auto;height:38px;margin-bottom:20px}
.site-footer__about{max-width:32ch;font:400 14px/1.7 var(--body);color:var(--ink-56)}
.site-footer__heading{margin-bottom:17px;font:700 11px/1.6 var(--mono);letter-spacing:.2em;text-transform:uppercase}
.site-footer__heading span{display:inline-block;background:var(--grad-ink);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.site-footer__links{display:flex;flex-direction:column;align-items:flex-start;gap:11px}
.site-footer__links a{font:400 14px/1.4 var(--body);color:rgba(245,245,247,.66);transition:color 160ms ease}
.site-footer__links a:hover,.site-footer__legal a:hover,.site-footer__links a[aria-current="page"]{color:#F5F5F7}
.site-footer__meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding-top:28px;border-top:1px solid rgba(255,255,255,.07)}
.site-footer__meta>span{font:400 12.5px/1.5 var(--body);color:var(--ink-56)}
.site-footer__legal{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px}
.site-footer__legal a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;font:500 12.5px/1.5 var(--body);color:rgba(245,245,247,.66)}

/* 13. Hover (fine pointers only) ------------------------------------------- */
@media (hover:hover) and (pointer:fine){
  .wa-btn:hover{transform:translateY(-1px);filter:brightness(.96)}
  .btn--wa:hover{transform:translateY(-2px);filter:brightness(.95);box-shadow:0 20px 46px -16px rgba(37,211,102,.8)}
  .btn--line:hover,.btn--grad:not([disabled]):hover{transform:translateY(-2px);filter:brightness(1.1)}
  .preset:hover{border-color:rgba(255,77,125,.6);color:#FFFFFF}
  .disc>summary:hover{background:linear-gradient(90deg,rgba(255,31,110,.08),rgba(240,128,60,.02) 55%,transparent)}
  .menu__panel a:hover{background:rgba(255,255,255,.06);color:#FFFFFF}
  .menu__panel a[aria-current="page"]:hover{color:var(--pink-2)}
  .menu__panel .menu__wa:hover{background:var(--wa)}
  .nav__panel a:hover{background:rgba(255,255,255,.08)}
  .nav__panel a[aria-current="page"]:hover{background:rgba(255,31,110,.16)}
  .nav__toggle:hover{color:var(--pink-2)}
  .menu__toggle:hover{background:rgba(255,255,255,.1)}
}

/* 14. Keyframes ------------------------------------------------------------ */
@keyframes edge-orbit{from{transform:translate3d(-50%,-50%,0) rotate(0deg)}to{transform:translate3d(-50%,-50%,0) rotate(360deg)}}
@keyframes ping{0%{transform:scale(.9);opacity:.9}70%{transform:scale(2.4);opacity:0}100%{opacity:0}}
@keyframes drift-a{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(6%,-8%,0) scale(1.14)}}
@keyframes drift-b{0%,100%{transform:translate3d(0,0,0) scale(1.05)}50%{transform:translate3d(-8%,6%,0) scale(.9)}}
@keyframes hero-in{from{opacity:0;transform:translate3d(0,18px,0)}to{opacity:1;transform:none}}
@keyframes phone-in{from{opacity:0;transform:translate3d(0,44px,0) rotateY(-26deg) rotateX(12deg) rotateZ(1deg) scale(.94)}to{opacity:1;transform:rotateY(-11deg) rotateX(5deg) rotateZ(1deg)}}
@keyframes menu-in{from{opacity:0;transform:translate3d(0,-12px,0) scale(.975)}to{opacity:1;transform:none}}
@keyframes stamp-in{0%{opacity:0;transform:scale(1.9) rotate(-16deg)}55%{opacity:1;transform:scale(.9) rotate(3deg)}100%{opacity:1;transform:none}}
@keyframes pass-sheen{from{transform:translate3d(-60%,0,0)}to{transform:translate3d(60%,0,0)}}
@keyframes wire{to{stroke-dashoffset:0}}
@keyframes ring{0%{opacity:.9;transform:scale(1)}70%,100%{opacity:0;transform:scale(1.5)}}
@keyframes final-base{0%{background-position:8% 44%}50%{background-position:92% 58%}100%{background-position:28% 72%}}
@keyframes fluid-pink{0%{border-radius:42% 58% 63% 37% / 54% 35% 65% 46%;transform:translate3d(-18%,18%,0) rotate(-12deg) scale3d(.92,1.12,1)}34%{border-radius:64% 36% 44% 56% / 37% 62% 38% 63%;transform:translate3d(22%,-16%,0) rotate(9deg) scale3d(1.15,.9,1)}68%{border-radius:35% 65% 55% 45% / 68% 42% 58% 32%;transform:translate3d(48%,22%,0) rotate(25deg) scale3d(.96,1.2,1)}100%{border-radius:58% 42% 34% 66% / 45% 67% 33% 55%;transform:translate3d(5%,-31%,0) rotate(-15deg) scale3d(1.18,.92,1)}}
@keyframes fluid-orange{0%{border-radius:62% 38% 45% 55% / 34% 57% 43% 66%;transform:translate3d(20%,-22%,0) rotate(14deg) scale3d(1.08,.92,1)}38%{border-radius:38% 62% 66% 34% / 61% 39% 61% 39%;transform:translate3d(-34%,16%,0) rotate(-18deg) scale3d(.9,1.18,1)}72%{border-radius:55% 45% 32% 68% / 42% 66% 34% 58%;transform:translate3d(-55%,34%,0) rotate(8deg) scale3d(1.16,.94,1)}100%{border-radius:31% 69% 52% 48% / 65% 46% 54% 35%;transform:translate3d(-12%,-9%,0) rotate(23deg) scale3d(.96,1.16,1)}}
@keyframes fluid-coral{0%{border-radius:36% 64% 57% 43% / 63% 44% 56% 37%;transform:translate3d(-24%,24%,0) rotate(8deg) scale3d(1.12,.92,1)}42%{border-radius:67% 33% 39% 61% / 40% 68% 32% 60%;transform:translate3d(18%,-30%,0) rotate(-19deg) scale3d(.94,1.18,1)}76%{border-radius:47% 53% 68% 32% / 56% 33% 67% 44%;transform:translate3d(45%,-8%,0) rotate(17deg) scale3d(1.16,.9,1)}100%{border-radius:59% 41% 35% 65% / 38% 59% 41% 62%;transform:translate3d(7%,21%,0) rotate(-7deg) scale3d(.92,1.2,1)}}
@keyframes fluid-light{0%{border-radius:66% 34% 55% 45% / 40% 60% 40% 60%;transform:translate3d(-34%,-24%,0) rotate(-15deg) scale3d(.88,1.08,1)}33%{border-radius:42% 58% 32% 68% / 65% 39% 61% 35%;transform:translate3d(24%,18%,0) rotate(13deg) scale3d(1.16,.86,1)}66%{border-radius:31% 69% 62% 38% / 45% 68% 32% 55%;transform:translate3d(52%,-12%,0) rotate(28deg) scale3d(.92,1.2,1)}100%{border-radius:58% 42% 44% 56% / 34% 53% 47% 66%;transform:translate3d(4%,35%,0) rotate(-9deg) scale3d(1.18,.92,1)}}
@keyframes final-flare{0%,100%{transform:translate3d(-9%,-7%,0) scale(1.09)}25%{transform:translate3d(9%,-5%,0) scale(1.13)}50%{transform:translate3d(7%,9%,0) scale(1.1)}75%{transform:translate3d(-8%,8%,0) scale(1.14)}}

/* 15. Responsive ----------------------------------------------------------- */
@media (max-width:1180px){
  .jbox{flex-direction:column;align-items:flex-start;justify-content:center;gap:7px}
  .jsources{grid-auto-rows:minmax(92px,1fr)}
  .strip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 32px}
  .strip li:not(:last-child)::after{display:none}
}
@media (max-width:1050px),(max-height:500px){
  .site-header__inner{min-height:64px;padding:12px 24px;gap:12px}
  .nav{display:none}
  .menu{display:block}
}
@media (max-width:1050px),(max-height:500px),(pointer:coarse){
  .site-footer__links{gap:0}
  .site-footer__links a{display:inline-flex;align-items:center;min-width:44px;min-height:44px}
}
@media (min-width:761px) and (max-width:1099px){
  .site-footer__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Two-column hero where the two buttons do not fit side by side yet: stacked at one shared width. */
@media (min-width:1000px) and (max-width:1075px){
  .hero__copy>.hero__actions{display:grid;grid-template-columns:max-content;justify-content:start}
  .hero__copy>.hero__actions .btn{width:100%}
}
@media (min-width:1000px) and (max-width:1040px){
  .hero__side>.hero__actions{display:grid;grid-template-columns:max-content;justify-content:start}
  .hero__side>.hero__actions .btn{width:100%}
}
@media (min-width:1051px) and (max-width:1239px){
  .site-header__inner{min-height:64px;padding:12px 24px;gap:12px}
  .nav{display:none}
  .menu{display:block}
}
@media (min-width:761px) and (max-width:1023px){
  .hero__title{max-width:11.5ch}
}
@media (max-width:999px){
  .hero__grid{grid-template-columns:minmax(0,1fr);gap:52px}
  .hero__grid--pack{gap:34px}
  .hero__lead{max-width:64ch}
  .faq,.measure{grid-template-columns:minmax(0,1fr)}
  .faq{gap:40px}
  .demo{grid-template-columns:minmax(0,1fr);gap:26px}
  .demo__controls{display:contents}
  .composer,.demo__nojs{order:1}
  .demo__stage{order:2}
  .stamper{order:3;flex-direction:column;justify-content:center;gap:12px}
  .stamper__state{text-align:center}
  .demo__label{order:4}
  .journey{display:block}
  .jwires{display:none}
  .jsources{grid-auto-rows:auto;gap:10px}
  .jsrc{padding:0}
  .jsrc,.jhub,.jgoal{margin-left:32px}
  .jsrc::before,.jhub::before,.jgoal::before{content:"";position:absolute;z-index:0;top:-34px;bottom:0;left:-24px;width:2px;background:rgba(255,77,125,.6)}
  .jsources .jsrc:first-child::before{top:50%}
  .jgoal::before{bottom:50%}
  .jsrc::after,.jhub::after,.jgoal::after{content:"";position:absolute;z-index:1;top:50%;left:-29px;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:linear-gradient(135deg,#FF1F6E,#F0803C);box-shadow:0 0 0 5px var(--bg)}
  .jhub::before{left:-25px}
  .jhub::after{left:-30px}
  .jbox{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;min-height:0;padding:12px 14px 12px 16px}
  .jhub{max-width:420px;margin-top:30px}
  .jgoal{position:relative;margin-top:30px}
  .measure{gap:40px}
  .piece{grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;padding:15px 2px 16px}
  .piece__body{grid-column:1 / -1;grid-row:2}
  .piece__marks{grid-column:2;grid-row:1}
}
@media (max-width:860px){
  .prices{grid-template-columns:minmax(0,1fr);gap:14px}
}
@media (max-width:760px){
  html{scroll-padding-top:84px}
  .wrap{padding-inline:16px}
  .site-header__inner{padding:12px 16px}
  .brand img{height:34px}
  .section,.final{padding-top:96px}
  .section>.wrap>.h2+*{margin-top:40px}
  .opener{margin-bottom:28px}
  .hero{padding-top:122px}
  .hero__grid{padding:0 20px;gap:44px}
  .hero__grid--pack{gap:30px}
  .pill{gap:9px;margin-bottom:26px;padding:8px 13px 8px 11px;font-size:9.5px;letter-spacing:.1em}
  .hero__title{max-width:none;font-size:clamp(42px,13vw,62px);line-height:1;letter-spacing:-.045em}
  .hero__line{font-size:clamp(50px,14vw,62px);text-wrap:balance}
  .hero__lead{margin-top:22px;font-size:16px;line-height:1.68}
  .hero__actions{flex-direction:column;align-items:stretch;gap:10px;margin-top:30px}
  .hero__actions .btn{width:100%}
  .facts{gap:8px 20px;margin-top:26px}
  .hero .note-rule{margin-top:24px;padding-left:18px}
  .hero__sub{max-width:none}
  .strip{gap:14px 16px;padding:18px 0}
  .strip li{gap:11px}
  .demo{margin-top:30px}
  .composer{padding:20px 18px 22px;border-radius:22px}
  .composer .btn{justify-self:stretch}
  .presets{flex-direction:column}
  .preset{justify-content:flex-start;border-radius:14px}
  .phone--demo{--pw:min(264px,calc(100vw - 72px))}
  .incl{grid-template-columns:minmax(0,1fr)}
  .incl li{gap:14px;min-height:68px;padding:11px 0}
  .price{padding:26px 22px 14px;border-radius:22px}
  .price__list{margin-top:16px}
  .prices__foot{flex-direction:column;align-items:stretch;gap:14px;margin-top:22px}
  .prices__foot .btn{width:100%}
  .disc>summary{gap:12px;padding:17px 2px}
  .disc__plus{width:30px;height:30px;font-size:12px}
  .disc__a{padding:0 2px 22px;font-size:15px;line-height:1.72}
  .points p{font-size:15px;line-height:1.72}
  .jsite{display:none}
  .jhub{padding:14px 16px}
  .jgoal__ring{width:76px;height:76px}
  .jgoal__ring span{font-size:19px;gap:5px}
  .piece__marks{font-size:22px}
  .piece__marks img{width:22px;height:22px}
  .points li{gap:14px;padding:13px 0}
  .measure .note-rule{margin-top:26px;padding-left:18px}
  .chart{padding:20px 18px 20px;border-radius:22px}
  .chart__plot{margin:26px 8px 0;aspect-ratio:16 / 8.6}
  .chart__x{margin-inline:8px}
  .chart__x span{max-width:11ch}
  .final__panel{padding:52px 22px;background-image:radial-gradient(ellipse 78% 62% at 12% 18%,rgba(255,126,169,.72) 0%,rgba(225,35,105,.42) 42%,transparent 72%),radial-gradient(ellipse 72% 62% at 90% 16%,rgba(255,190,128,.68) 0%,rgba(240,128,60,.38) 43%,transparent 73%),radial-gradient(ellipse 84% 70% at 74% 92%,rgba(235,76,106,.64) 0%,rgba(174,22,78,.34) 46%,transparent 76%),radial-gradient(ellipse 62% 54% at 44% 50%,rgba(255,218,185,.46) 0%,rgba(255,117,144,.2) 42%,transparent 72%),linear-gradient(118deg,#A9104B 0%,#C51B5A 34%,#B95145 70%,#8E301D 100%);background-position:center;background-size:auto;animation:none}
  .final__panel::before{inset:-22%;background:radial-gradient(ellipse 42% 36% at 18% 20%,rgba(255,239,246,.5) 0%,rgba(255,84,148,.5) 34%,rgba(218,24,101,.24) 56%,transparent 74%),radial-gradient(ellipse 46% 40% at 84% 18%,rgba(255,242,207,.46) 0%,rgba(246,151,75,.5) 35%,rgba(190,61,43,.22) 58%,transparent 76%),radial-gradient(ellipse 50% 44% at 78% 84%,rgba(255,185,157,.5) 0%,rgba(239,73,101,.46) 36%,rgba(181,20,78,.2) 58%,transparent 76%),radial-gradient(ellipse 44% 38% at 24% 78%,rgba(255,119,172,.56) 0%,rgba(232,36,116,.44) 38%,rgba(151,12,66,.18) 60%,transparent 77%),linear-gradient(180deg,rgba(28,0,14,.06),rgba(34,0,17,.16));transform:translate3d(-9%,-7%,0) scale(1.09);animation:final-flare 6s var(--ease-in-out) infinite paused}
  .final__panel.is-in::before{animation-play-state:running}
  .final__fluid{display:none}
  .final__layout{gap:30px}
  .final .btn--wa{width:100%}
  .site-footer{margin-top:96px;padding-top:56px}
  .site-footer__grid{gap:36px;margin-bottom:40px}
  .site-footer__meta{align-items:flex-start}
  .site-footer__legal{width:100%;order:2}
}
@media (max-width:390px){
  .brand img{height:32px}
  .hero__grid{padding:0 18px}
}
@media (max-width:440px){
  .jbox{flex-direction:column;align-items:flex-start;gap:8px}
}
@media (max-width:439px){
  :lang(en) .strip{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:389px){
  .strip{grid-template-columns:minmax(0,1fr)}
  .pill{border-radius:15px;text-wrap:balance}
}
@media (max-height:500px){
  .hero{padding-top:104px}
  .menu__panel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:4px;width:min(420px,calc(100vw - 32px))}
  .menu__panel .menu__wa,.menu__langs,.menu__row,.menu__sublist{grid-column:1 / -1}
}

/* 16. Service pages (model: /diseno-web/) --------------------------------------
   Generic components and behaviours: the other service pages reuse them and change content only.
   Every enhanced state is added by pages.js; without it (or with reduced motion) the content is complete and static. */
[data-mode-panel][hidden],.seg[hidden],.ba__divider[hidden]{display:none}
/* Breadcrumb and direct answer */
.answer{max-width:60ch}
/* Text helpers and block rhythm */
.intro{max-width:62ch;color:var(--ink-80);text-wrap:pretty}
.section>.wrap>.h2+.intro{margin-top:var(--s-text)}
.headrow{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:24px 40px}
.headrow+*{margin-top:var(--s-block)}
.textlink{display:inline-flex;align-items:center;gap:6px;min-height:44px;font:700 14px/1.2 var(--body);text-decoration:underline;text-decoration-color:rgba(255,77,125,.7);text-decoration-thickness:1px;text-underline-offset:.32em;white-space:nowrap;color:#FFFFFF}
.textlink .ic{font-size:15px;color:var(--pink-2);transition:transform 220ms var(--ease-out)}
/* Two reading modes: a segmented control swaps the description of each item */
.seg{position:relative;isolation:isolate;display:inline-grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:5px;border:1px solid var(--line-2);border-radius:999px;background:rgba(255,255,255,.035)}
.seg__thumb{position:absolute;z-index:-1;inset:5px auto 5px 5px;width:calc(50% - 5px);border-radius:999px;background:linear-gradient(96deg,#D41459,#C4315E 46%,#B64F20);box-shadow:0 12px 28px -14px rgba(255,31,110,.7);transition:transform 340ms var(--ease-expo)}
[data-active="tech"] .seg__thumb{transform:translate3d(100%,0,0)}
.seg__opt{min-height:44px;padding:0 22px;border:0;border-radius:999px;background:none;font:700 14px/1.15 var(--body);white-space:nowrap;color:var(--ink-80);cursor:pointer;transition:color 200ms ease}
.seg__opt[aria-pressed="true"]{color:#FFFFFF}
.seg__opt:focus-visible{outline:2px solid #FFFFFF;outline-offset:2px}
/* Included list with a description per item (three columns on wide screens) */
.incl--detail{gap:0 48px}
.incl--detail li{position:relative;display:grid;grid-template-columns:46px minmax(0,1fr);align-items:start;align-content:start;gap:4px 18px;min-height:0;padding:22px 0 24px}
.incl--detail li::after{content:"";position:absolute;inset:auto 0 -1px;height:1px;background:var(--grad);transform:scaleX(0);transform-origin:left center;transition:transform .6s var(--ease-expo)}
.incl--detail .tile{grid-row:1 / span 3;transition:transform 260ms var(--ease-out),border-color 260ms ease,color 260ms ease}
.incl--detail h3{display:flex;align-items:center;min-height:46px}
.incl--detail p{grid-column:2;max-width:52ch;color:var(--ink-66);text-wrap:pretty}
.incl--detail p+p{margin-top:6px}
.modenote>*+*{margin-top:14px}
.modenote .aside{margin-top:0}
/* Copy beside a demonstration (before/after, or the own demo of another service) */
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-areas:"head stage" "tail stage";column-gap:clamp(36px,5vw,72px)}
.split__head{grid-area:head;align-self:end}
.split__stage{grid-area:stage;align-self:center}
.split__tail{grid-area:tail;align-self:start}
.split__head>.intro{margin-top:var(--s-text)}
.result{display:flex;align-items:flex-start;gap:10px;margin-top:var(--s-text);font:500 14.5px/1.6 var(--body);color:var(--ink)}
.result .tick{margin-top:3px}
/* Before/after comparator. Default: the static pair. `.is-live` (added by pages.js): one frame with a draggable divider. */
.ba{overflow:hidden;border:1px solid rgba(255,255,255,.13);border-radius:22px;background:#08090B;box-shadow:0 36px 110px -58px rgba(255,31,110,.56),inset 0 1px rgba(255,255,255,.035)}
.ba__bar{display:flex;align-items:center;gap:13px;min-height:46px;padding:0 16px;border-bottom:1px solid rgba(255,255,255,.1);background:linear-gradient(180deg,#141519,#0D0E11);font:500 10.5px/1 var(--mono);letter-spacing:.04em;color:rgba(245,245,247,.66)}
.ba__dots{display:flex;flex:none;gap:6px}
.ba__dots i{width:8px;height:8px;border-radius:50%;background:#FF5C6A}
.ba__dots i:nth-child(2){background:#F0B24A}
.ba__dots i:last-child{background:#31C66B}
.ba__url{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ba__frame{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;background:rgba(255,255,255,.14)}
.ba__media{position:relative;overflow:hidden;background:#06111B}
.ba__inner{position:relative;height:100%}
.ba__media img{width:100%;height:100%;aspect-ratio:3 / 4;object-fit:cover;object-position:top center}
.ba__tag{position:absolute;z-index:2;top:14px;left:14px;display:inline-flex;align-items:center;min-height:30px;padding:0 12px;border:1px solid rgba(255,255,255,.2);border-radius:999px;background:rgba(5,5,5,.82);font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#FFFFFF}
.ba__tag--after{right:14px;left:auto;border-color:transparent;background:linear-gradient(96deg,#D41459,#B64F20)}
.ba.is-live .ba__frame{--ba-x:50%;display:block;aspect-ratio:3 / 2;contain:layout paint;background:#06111B;cursor:ew-resize;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.ba.is-live .ba__media{position:absolute;inset:0}
.ba.is-live .ba__media img{aspect-ratio:auto;pointer-events:none}
.ba.is-live .ba__media--after{transform:translate3d(var(--ba-x),0,0)}
.ba.is-live .ba__inner{transform:translate3d(calc(var(--ba-x) * -1),0,0)}
.ba__divider{position:absolute;z-index:3;inset:0;transform:translate3d(var(--ba-x),0,0);pointer-events:none}
.ba__divider::before{content:"";position:absolute;inset:0 auto 0 -1px;width:2px;background:linear-gradient(180deg,#FF1F6E,#F0803C);box-shadow:0 0 30px rgba(255,31,110,.7)}
.ba__handle{position:absolute;top:50%;left:0;display:grid;place-items:center;width:46px;height:46px;margin:-23px 0 0 -23px;border:1px solid rgba(255,255,255,.46);border-radius:50%;background:rgba(8,8,10,.9);box-shadow:0 16px 42px -18px rgba(0,0,0,.96),0 0 0 5px rgba(8,8,10,.18);font-size:22px;color:#FFFFFF;cursor:ew-resize;pointer-events:auto;touch-action:none;transition:transform 180ms var(--ease-out),border-color 180ms ease}
.ba__handle .ic{stroke-width:1.8}
.ba__handle:focus-visible{outline:2px solid #FFFFFF;outline-offset:3px}
.ba.is-dragging .ba__handle{transform:scale(1.1);border-color:#FFFFFF}
.ba.is-dragging .ba__media--after,.ba.is-dragging .ba__inner,.ba.is-dragging .ba__divider{will-change:transform}
/* Published-work cards (real screenshot + logo, whole card links to the live site) */
.works{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.works li{display:flex;min-width:0;container-type:inline-size}
html.js .works li[data-rv]{filter:blur(5px);transform:translate3d(0,34px,0);transition:opacity .82s var(--ease-expo),transform .82s var(--ease-expo),filter .68s ease;transition-delay:var(--d,0ms)}
html.js .works li[data-rv].is-visible{filter:none;transform:none}
.work{position:relative;isolation:isolate;display:flex;flex-direction:column;width:100%;overflow:hidden;border:1px solid rgba(255,255,255,.1);border-radius:22px;background:linear-gradient(170deg,rgba(255,255,255,.055),rgba(255,255,255,.016));box-shadow:0 24px 60px -48px rgba(0,0,0,.95);color:var(--ink);transition:transform .48s var(--ease-expo),border-color .35s ease,box-shadow .48s var(--ease-expo)}
.work:hover{color:var(--ink)}
.work:focus-visible{outline:2px solid #FF4D7D;outline-offset:4px;border-radius:22px}
.work__visual{position:relative;display:block;aspect-ratio:16 / 10;overflow:hidden;background:#0A0A0B}
.work__visual::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,5,5,.02) 38%,rgba(5,5,5,.72) 100%);pointer-events:none}
.work__shot{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .7s var(--ease-expo),filter .45s ease}
.work__logo{position:absolute;z-index:1;left:16px;bottom:16px;display:grid;place-items:center;width:min(190px,calc(100% - 74px));height:68px;padding:10px 16px;overflow:hidden;border:1px solid rgba(255,255,255,.22);border-radius:14px;box-shadow:0 12px 28px -16px rgba(0,0,0,.85);transition:transform .48s var(--ease-expo)}
.work__logo--light{background:rgba(248,248,245,.96)}
.work__logo--dark{background:rgba(8,8,11,.9)}
.work__logo img{width:auto;max-width:156px;height:auto;max-height:46px;object-fit:contain}
.work__meta{display:flex;flex:1 1 auto;align-items:center;gap:16px;min-height:104px;padding:20px 22px 22px}
.work__copy{flex:1 1 auto;min-width:0}
.work__copy strong{display:block;margin-bottom:5px;text-wrap:balance}
.work__copy span{display:block;overflow-wrap:anywhere;font:500 11px/1.6 var(--mono);letter-spacing:.045em;color:var(--ink-56)}
.work__action{display:inline-flex;flex:none;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 15px;border:1px solid transparent;border-radius:999px;background:linear-gradient(#111114,#111114) padding-box,linear-gradient(96deg,#FF1F6E 0%,#FF4D7D 48%,#F0803C 100%) border-box;box-shadow:0 14px 30px -22px rgba(255,31,110,.82);font:700 13px/1 var(--body);white-space:nowrap;color:var(--ink);transition:transform .4s var(--ease-expo)}
.work__action .ic{margin-right:-2px;font-size:15px;transition:transform .4s var(--ease-expo)}
.work:focus-visible .work__shot{transform:scale(1.035)}
/* Narrow card (phones, two- and three-column tablets): name and domain above, action below. */
@container (max-width:380px){
  .work__meta{flex-direction:column;align-items:flex-start;gap:14px;min-height:0;padding:18px 20px 20px}
}
/* Process timeline: any number of steps. pages.js lights markers and connectors as the block scrolls by; static and complete otherwise. */
.steps{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
.steps li{position:relative;padding-right:clamp(16px,2vw,30px)}
.steps li:not(:last-child)::before,.steps li:not(:last-child)::after{content:"";position:absolute;top:17px;right:14px;left:50px;height:2px;border-radius:2px}
.steps li:not(:last-child)::before{background:rgba(255,255,255,.13)}
.steps li:not(:last-child)::after{background:linear-gradient(90deg,#FF4D7D,#F0803C);box-shadow:0 0 18px rgba(255,77,125,.24);transform:scaleX(var(--fill,1));transform-origin:left center}
.steps .marker{margin-bottom:var(--s-text);border:1px solid rgba(255,255,255,.22);background:#0B0B0E;box-shadow:none}
.steps .marker::before{content:"";position:absolute;z-index:-1;inset:-1px;border-radius:50%;background:linear-gradient(135deg,#FF1F6E 0%,#FF4D7D 48%,#F0803C 100%);box-shadow:0 9px 28px -13px rgba(255,31,110,.95);opacity:var(--on,1)}
.steps h3{text-wrap:balance;opacity:calc(.62 + .38 * var(--on,1))}
.steps p{margin-top:8px;font:400 14px/1.55 var(--body);color:var(--ink-66);text-wrap:pretty;opacity:calc(.8 + .2 * var(--on,1))}
/* Related services: one compact row right above the final panel */
.also__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 28px;padding-top:26px;border-top:1px solid var(--line)}
.also__label{font:500 11px/1.6 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-66)}
.also__list{display:flex;flex-wrap:wrap;gap:8px}
.also__link{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border:1px solid var(--line-2);border-radius:999px;background:rgba(255,255,255,.03);font:600 14px/1.2 var(--body);white-space:nowrap;color:var(--ink);transition:border-color 200ms ease,background-color 200ms ease}
.also__link .ic{font-size:15px;color:var(--pink-2);transition:transform 220ms var(--ease-out)}
.disc__a a{color:#FFFFFF;text-decoration:underline;text-decoration-color:rgba(255,77,125,.75);text-underline-offset:.24em}
@media (hover:hover) and (pointer:fine){
  .work:hover{transform:translateY(-7px);border-color:rgba(255,77,125,.42);box-shadow:0 38px 90px -46px rgba(255,31,110,.44)}
  .work:hover .work__shot{transform:scale(1.035);filter:saturate(1.06)}
  .work:hover .work__logo{transform:translateY(-3px)}
  .work:hover .work__action{background:linear-gradient(96deg,#D41459 0%,#C4315E 48%,#B64F20 100%) padding-box,linear-gradient(96deg,#FF1F6E 0%,#FF4D7D 48%,#F0803C 100%) border-box}
  .work:hover .work__action .ic{transform:translate3d(2px,-2px,0)}
  .incl--detail li:hover::after{transform:scaleX(1)}
  .incl--detail li:hover .tile{transform:translateY(-2px);border-color:rgba(255,77,125,.5);color:#FFFFFF}
  .seg__opt:hover{color:#FFFFFF}
  .textlink:hover{text-decoration-color:#FF4D7D;color:#FFFFFF}
  .textlink:hover .ic{transform:translate3d(2px,-2px,0)}
  .also__link:hover{border-color:rgba(255,77,125,.6);background-color:rgba(255,31,110,.09);color:#FFFFFF}
  .also__link:hover .ic{transform:translateX(3px)}
  .ba.is-live .ba__frame:hover .ba__handle{border-color:#FFFFFF}
  .disc__a a:hover{text-decoration-color:#FFFFFF;color:#FFFFFF}
}
@media (min-width:1100px){
  .incl--detail{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:999px){
  .split{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "stage" "tail";row-gap:var(--s-group)}
  .split__tail>.result{margin-top:0}
  .steps{grid-auto-flow:row;grid-auto-columns:auto}
  .steps li{display:grid;grid-template-columns:36px minmax(0,1fr);gap:0 18px;padding:0 0 28px}
  .steps li:last-child{padding-bottom:0}
  .steps li:not(:last-child)::before,.steps li:not(:last-child)::after{top:36px;right:auto;bottom:0;left:17px;width:2px;height:auto}
  .steps li:not(:last-child)::after{background:linear-gradient(180deg,#FF4D7D,#F0803C);transform:scaleY(var(--fill,1));transform-origin:center top}
  .steps .marker{grid-row:1 / span 2;margin:0}
  .steps h3{padding-top:6px}
  .steps p{grid-column:2;max-width:56ch}
}
@media (max-width:760px){
  .headrow{grid-template-columns:minmax(0,1fr);gap:var(--s-group)}
  .seg{display:grid;width:100%}
  .seg__opt{padding:6px 10px;font-size:13.5px;white-space:normal}
  .incl--detail p,.intro{font-size:15px;line-height:1.72}
  .incl--detail li{gap:4px 14px;padding:16px 0 18px}
  .incl--detail h3{min-height:0;padding-top:1px}
  .ba{border-radius:18px}
  .ba__frame{grid-template-columns:minmax(0,1fr)}
  .ba__media img{aspect-ratio:16 / 10}
  .ba.is-live .ba__frame{aspect-ratio:1 / 1}
  .ba__tag{top:10px;left:10px}
  .ba__tag--after{right:10px;left:auto}
  .also__row{flex-direction:column;align-items:flex-start;gap:12px}
}

/* Service identity. The page only declares <body data-service="…">: background pattern and glow balance come from
   these custom properties. Same palette on every service (pink #FF1F6E / #FF4D7D, orange #F0803C, on #050505). */
[data-service]{--svc-pattern:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);--svc-size:76px 76px;--svc-mask:radial-gradient(ellipse 90% 60% at 50% 35%,#000,transparent 75%);--svc-a:rgba(255,31,110,.5);--svc-a-at:-14% auto auto -6%;--svc-b:rgba(240,128,60,.38);--svc-b-at:auto -10% -24% auto}
[data-service] .hero__mesh{background-image:var(--svc-pattern);background-size:var(--svc-size);-webkit-mask-image:var(--svc-mask);mask-image:var(--svc-mask)}
[data-service] .hero__orb--a{inset:var(--svc-a-at);background:radial-gradient(circle,var(--svc-a),transparent 66%)}
[data-service] .hero__orb--b{inset:var(--svc-b-at);background:radial-gradient(circle,var(--svc-b),transparent 66%)}
/* web-design — artboard: blueprint grid (fine lines every 24 px, pink rules every 120 px), pink glow leading from the top left */
[data-service="web-design"]{--svc-pattern:linear-gradient(rgba(255,77,125,.17) 1px,transparent 1px),linear-gradient(90deg,rgba(255,77,125,.17) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);--svc-size:120px 120px,120px 120px,24px 24px,24px 24px;--svc-mask:radial-gradient(ellipse 96% 66% at 50% 34%,#000,transparent 78%);--svc-b:rgba(240,128,60,.3)}
/* development — editor: horizontal code lines with one orange gutter rule, orange glow leading from the top right */
[data-service="development"]{--svc-pattern:linear-gradient(90deg,transparent 95px,rgba(240,128,60,.2) 95px,rgba(240,128,60,.2) 96px,transparent 96px),repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0,rgba(255,255,255,.05) 1px,transparent 1px,transparent 30px);--svc-size:100% 100%,auto;--svc-a:rgba(240,128,60,.44);--svc-a-at:-16% -8% auto auto;--svc-b:rgba(255,31,110,.36);--svc-b-at:auto auto -26% -10%}
/* apps — screen grid: dots every 22 px, pink glow on the right at mid height */
[data-service="apps"]{--svc-pattern:radial-gradient(circle,rgba(255,255,255,.14) 1.1px,transparent 1.7px);--svc-size:22px 22px;--svc-a:rgba(255,31,110,.46);--svc-a-at:8% -12% auto auto;--svc-b:rgba(240,128,60,.3);--svc-b-at:auto auto -26% -8%}
/* ecommerce — shelves: wide catalogue cells (168 × 112 px) with orange uprights, orange glow leading from the top left */
[data-service="ecommerce"]{--svc-pattern:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(240,128,60,.1) 1px,transparent 1px);--svc-size:168px 112px;--svc-a:rgba(240,128,60,.46);--svc-b:rgba(255,31,110,.4)}
/* seo — search pulse: concentric rings from the top right, pink glow at their centre */
[data-service="seo"]{--svc-pattern:repeating-radial-gradient(circle at 78% 26%,transparent 0,transparent 47px,rgba(255,255,255,.06) 47px,rgba(255,255,255,.06) 48px);--svc-size:auto;--svc-mask:radial-gradient(ellipse 80% 70% at 74% 28%,#000,transparent 78%);--svc-a:rgba(255,31,110,.48);--svc-a-at:-18% -8% auto auto;--svc-b:rgba(240,128,60,.3);--svc-b-at:auto auto -24% -10%}
/* geo — answer network: diamond mesh with one pink diagonal, pink and orange glows balanced left and right */
[data-service="geo"]{--svc-pattern:repeating-linear-gradient(45deg,rgba(255,255,255,.05) 0,rgba(255,255,255,.05) 1px,transparent 1px,transparent 46px),repeating-linear-gradient(-45deg,rgba(255,77,125,.09) 0,rgba(255,77,125,.09) 1px,transparent 1px,transparent 46px);--svc-size:auto;--svc-a:rgba(255,31,110,.42);--svc-a-at:-6% auto auto -12%;--svc-b:rgba(240,128,60,.42);--svc-b-at:-6% -12% auto auto}
/* google-ads — rising columns: vertical bands that grow stronger towards the bottom, orange glow from the bottom left */
[data-service="google-ads"]{--svc-pattern:repeating-linear-gradient(90deg,rgba(255,255,255,.045) 0,rgba(255,255,255,.045) 34px,transparent 34px,transparent 68px);--svc-size:auto;--svc-mask:linear-gradient(0deg,#000 8%,transparent 82%);--svc-a:rgba(240,128,60,.46);--svc-a-at:auto auto -30% -8%;--svc-b:rgba(255,31,110,.42);--svc-b-at:-18% -8% auto auto}
/* automation — flow: slanted lines in one direction, pink on the left handing over to orange on the right */
[data-service="automation"]{--svc-pattern:repeating-linear-gradient(118deg,rgba(255,255,255,.055) 0,rgba(255,255,255,.055) 1px,transparent 1px,transparent 38px);--svc-size:auto;--svc-a:rgba(255,31,110,.44);--svc-a-at:6% auto auto -14%;--svc-b:rgba(240,128,60,.4);--svc-b-at:10% -14% auto auto}
/* maintenance — monitor: baseline rows with an orange tick every 152 px, a low and calm orange glow from the bottom right */
[data-service="maintenance"]{--svc-pattern:repeating-linear-gradient(90deg,rgba(240,128,60,.14) 0,rgba(240,128,60,.14) 1px,transparent 1px,transparent 152px),repeating-linear-gradient(0deg,rgba(255,255,255,.045) 0,rgba(255,255,255,.045) 1px,transparent 1px,transparent 38px);--svc-size:auto;--svc-a:rgba(255,31,110,.3);--svc-b:rgba(240,128,60,.44);--svc-b-at:auto -8% -20% auto}
/* Hero scene slot: one canvas and a stage indicator. Each service puts its own scene inside .scene__canvas.
   The scene root carries data-stage; pages.js turns the labels into buttons and advances them. Default = last stage. */
.hero__work{position:relative;min-width:0}
.scene{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.scene__canvas{position:relative;aspect-ratio:100 / 72;overflow:hidden;container-type:inline-size;border:1px solid var(--line-2);border-radius:22px;background:#09090B linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px) 0 0 / 100% 24px;box-shadow:0 54px 130px -54px rgba(255,31,110,.55),0 30px 70px -30px rgba(0,0,0,.92)}
.scene__canvas::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px) 0 0 / 24px 100%,radial-gradient(ellipse 70% 60% at 30% 20%,rgba(255,31,110,.2),transparent 70%)}
.stages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.stages__step{position:relative;display:flex;align-items:center;gap:10px;width:100%;min-height:46px;padding:0 2px 8px;border:0;border-radius:6px;background:none;font:600 14.5px/1.2 var(--display);letter-spacing:-.005em;text-align:left;color:#FFFFFF}
button.stages__step{cursor:pointer}
.stages__step::before,.stages__step::after{content:"";position:absolute;inset:auto 0 0;height:2px;border-radius:2px}
.stages__step::before{background:rgba(255,255,255,.14)}
.stages__step::after{background:var(--grad);transform:scaleX(var(--fill,1));transform-origin:left center}
.stages__n{display:grid;place-items:center;flex:none;width:22px;height:22px;border:1px solid transparent;border-radius:50%;background:linear-gradient(135deg,#D41459,#B64F20);font:800 10.5px/1 var(--mono);color:#FFFFFF;transition:background-color 300ms ease,border-color 300ms ease}
.stages.is-live .stages__step{--fill:0;color:var(--ink-66);transition:color 300ms ease}
.stages.is-live .stages__step:not(.is-on) .stages__n{border-color:rgba(255,255,255,.24);background:#0B0B0E}
.stages.is-live .stages__step.is-on{--fill:1;color:#FFFFFF}
.stages__step:focus-visible{outline:2px solid #FFFFFF;outline-offset:3px}
/* Technical reading mode: fewer columns, a longer measure and denser type — it reads as the in-depth version */
[data-active="tech"] .incl--detail p{max-width:64ch;font-size:15px;line-height:1.7;color:var(--ink-80)}
@media (min-width:1100px){
  [data-active="tech"] .incl--detail{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 64px}
}
/* FAQ with a side visual (service pages). The left column ends with the closed list: the visual takes the height that is left,
   up to a 2:3 portrait and never more than fits under the header; when the list is taller (rows open, narrower desktops) the
   visual stays pinned, whole on screen, while the list scrolls. */
.faq--media{grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);align-items:stretch;gap:clamp(40px,5.4vw,84px)}
.faq__side{min-width:0;contain:size}
.faq__stick{display:flex;flex-direction:column;height:100%}
.faq__intro{max-width:44ch;margin-top:var(--s-text);font:400 15.5px/1.72 var(--body);color:var(--ink-66);text-wrap:pretty}
.faq__media{position:relative;flex:0 1 auto;width:100%;min-height:200px;aspect-ratio:2 / 3;margin-top:var(--s-group);overflow:hidden;border:1px solid rgba(255,255,255,.13);border-radius:22px;background:#0A090A;box-shadow:0 30px 78px -42px rgba(255,31,110,.5)}
@media (max-width:999px){
  .faq--media{grid-template-columns:minmax(0,1fr);gap:var(--s-group)}
  .faq__side{contain:none}
  .faq__stick{height:auto}
  .faq__media{flex:none;min-height:0;aspect-ratio:16 / 10;margin-top:var(--s-group);border-radius:18px}
}
@media (max-width:760px){
  .scene{gap:14px}
  .scene__canvas{border-radius:18px}
  .stages{gap:8px}
  .stages__step{gap:8px;font-size:13.5px}
}
/* Fewer rules (service pages): the label keeps a short accent dash instead of a full-width line; lists and the
   related row are separated by space. FAQ rows keep their hairlines. */
[data-service] .opener__rule{flex:0 0 56px}
.incl--detail{border-top:0}
.incl--detail li{padding:18px 0 20px;border-bottom:0}
.also__row{padding-top:0;border-top:0}
.techs__item{display:inline-flex;align-items:center;gap:10px;font:600 15px/1.2 var(--display);letter-spacing:-.005em;white-space:nowrap;color:#FFFFFF}
.techs__mark{display:grid;place-items:center;flex:none;width:36px;height:36px;padding:5px;border:1px solid #E1E3E6;border-radius:8px;background:#FFFFFF}
.techs__mark img{width:26px;height:26px;object-fit:contain}
.techs__mark--zoom img{transform:scale(1.45)}
/* Hero scene of web design: a page is drawn, written, coloured and typeset in a design workspace, then published and resized
   to a phone. These base styles are the FINAL frame; pages.js replays how it got there from the data-sequence of the page. */
.studio{aspect-ratio:100 / 66;border-color:rgba(255,255,255,.12);background:radial-gradient(120% 90% at 26% 0%,#1B0F19 0%,#0B0B0E 52%,#070709 100%)}
.studio::before{background:radial-gradient(circle,rgba(255,255,255,.1) 1px,transparent 1.5px) 0 0 / 16px 16px;-webkit-mask-image:linear-gradient(#000,transparent 92%);mask-image:linear-gradient(#000,transparent 92%)}
.studio__all{position:absolute;inset:0}
.studio__glow{position:absolute;top:9cqw;left:2cqw;width:96cqw;height:60cqw;background:radial-gradient(closest-side,rgba(255,31,110,.36),rgba(240,128,60,.15) 58%,transparent 100%);filter:blur(3cqw)}
.studio__floor{position:absolute;right:4cqw;bottom:2cqw;left:4cqw;height:9cqw;border-radius:50%;background:radial-gradient(closest-side,rgba(255,77,125,.34),transparent);filter:blur(2.4cqw)}
.studio__bar{position:absolute;z-index:4;inset:0 0 auto;display:flex;align-items:center;gap:1cqw;height:5.2cqw;padding:0 2.2cqw;border-bottom:1px solid rgba(255,255,255,.07);background:rgba(10,10,13,.74);font:500 1.7cqw/1 var(--mono);letter-spacing:.04em;white-space:nowrap;color:rgba(245,245,247,.72)}
.studio__bar>i{flex:none;width:1.3cqw;height:1.3cqw;border-radius:50%;background:rgba(255,255,255,.2)}
.studio__bar>b{margin-left:1.2cqw;font-weight:500}
.studio__size{position:relative;width:16cqw;height:3.1cqw;margin-left:auto;overflow:hidden;border:1px solid rgba(255,255,255,.16);border-radius:3cqw;font-style:normal}
.studio__size span{position:absolute;inset:0;display:grid;place-items:center}
.studio__size span:first-child{opacity:0}
.studio__rail,.studio__panel{position:absolute;z-index:3;top:8.4cqw;border:1px solid rgba(255,255,255,.1);background:linear-gradient(180deg,rgba(30,30,37,.97),rgba(17,17,21,.97));box-shadow:0 2.4cqw 5cqw -2cqw #000,inset 0 1px rgba(255,255,255,.07);opacity:0}
.studio__rail{left:1.6cqw;display:grid;gap:1.8cqw;padding:1.4cqw 1.2cqw;border-radius:1.6cqw;color:rgba(245,245,247,.78);transform:translate3d(-8cqw,0,0)}
.studio__rail .ic{position:relative;z-index:1;width:3.6cqw;height:3.6cqw;padding:.75cqw;stroke-width:1.8}
.studio__rail b{position:absolute;top:1.4cqw;left:1.2cqw;width:3.6cqw;height:3.6cqw;border-radius:.9cqw;background:linear-gradient(135deg,#FF1F6E,#F0803C);transform:translate3d(0,21.6cqw,0)}
.studio__panel{right:1.6cqw;display:grid;align-content:start;gap:1.1cqw;width:20cqw;padding:1.8cqw;border-radius:1.8cqw;font:500 1.35cqw/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:rgba(245,245,247,.6);transform:translate3d(8cqw,0,0)}
.studio__panel>b{font-weight:500}
.studio__swatches{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1cqw;margin-bottom:1.2cqw}
.studio__swatches i{aspect-ratio:1;border:1px solid rgba(255,255,255,.18);border-radius:.9cqw;background:#FF1F6E}
.studio__swatches i:nth-child(2){background:#F0803C}
.studio__swatches i:nth-child(3){background:#F5F5F7}
.studio__swatches i:nth-child(4){background:#17171C}
.studio__type{position:relative;height:6.4cqw;margin-bottom:1.2cqw;letter-spacing:-.02em;text-transform:none;color:#FFFFFF}
.studio__type span{position:absolute;top:0;left:0;font:400 5.2cqw/1.2 var(--body)}
.studio__type span:first-child{opacity:0}
.studio__type span+span{font:600 5.6cqw/1.14 var(--display)}
.studio__parts{display:grid;gap:1cqw}
.studio__parts i{height:5.4cqw;border:1px solid rgba(255,255,255,.13);border-radius:1cqw;background:linear-gradient(170deg,rgba(255,255,255,.13),rgba(255,255,255,.045))}
.page{position:absolute;z-index:2;top:11cqw;left:10cqw;width:62cqw;height:47cqw;transform:translate3d(-4.5cqw,.5cqw,0) scale(.93);transform-origin:0 0}
.page__sheet{position:absolute;inset:0;border:1px solid rgba(255,255,255,.17);border-radius:1.8cqw;background:#101014;box-shadow:0 4cqw 9cqw -4cqw #000,0 0 0 1px rgba(255,31,110,.14),0 0 8cqw -2cqw rgba(255,31,110,.3)}
.page__frame{position:absolute;inset:0;border:1px dashed rgba(255,255,255,.55);background:linear-gradient(#FF4D7D,#FF4D7D) 0 0 / 1cqw 1cqw no-repeat,linear-gradient(#FF4D7D,#FF4D7D) 100% 0 / 1cqw 1cqw no-repeat,linear-gradient(#FF4D7D,#FF4D7D) 0 100% / 1cqw 1cqw no-repeat,linear-gradient(#FF4D7D,#FF4D7D) 100% 100% / 1cqw 1cqw no-repeat;opacity:0;transform-origin:0 0}
.page__top{position:absolute;inset:0 0 auto;height:4.6cqw;overflow:hidden;border-radius:1.8cqw 1.8cqw 0 0}
.page__chrome{display:flex;align-items:center;gap:.9cqw;height:100%;padding:0 1.6cqw;border-bottom:1px solid rgba(255,255,255,.09);background:#1B1B21}
.page__chrome i{flex:none;width:1.2cqw;height:1.2cqw;border-radius:50%;background:rgba(255,255,255,.24)}
.page__chrome b{margin-left:1cqw;padding:.5cqw 1.6cqw;border-radius:1cqw;background:rgba(0,0,0,.45);font:400 1.7cqw/1.3 var(--mono);color:rgba(245,245,247,.7)}
.page__chrome span{display:block}
.el{position:absolute;border-radius:.8cqw}
.el::before,.el::after,.el>i{content:"";position:absolute;inset:0;border-radius:inherit}
.el::before{border:1px dashed rgba(255,255,255,.55);opacity:0;transform-origin:0 0}
.el>i{background:rgba(255,255,255,.2);opacity:0;transform-origin:0 50%}
.el::after{background:var(--paint,rgba(255,255,255,.3));transform-origin:0 50%}
.el--logo{top:6.3cqw;left:3cqw;width:11cqw;height:3cqw}
.el--logo::after{display:none}
.el--logo b,.el--logo strong{position:absolute;inset:0;display:flex;align-items:center;white-space:nowrap;color:#FFFFFF}
.el--logo b{font:400 2.3cqw/1 var(--body);opacity:0}
.el--logo strong{font:600 2.6cqw/1 var(--display);letter-spacing:-.01em}
.el--links{top:7.2cqw;left:33cqw;width:15cqw;height:1.1cqw;border-radius:1cqw;--paint:linear-gradient(90deg,rgba(255,255,255,.34) 0,rgba(255,255,255,.34) 26%,transparent 26%,transparent 37%,rgba(255,255,255,.34) 37%,rgba(255,255,255,.34) 63%,transparent 63%,transparent 74%,rgba(255,255,255,.34) 74%)}
.el--cta{top:6.1cqw;left:51cqw;width:8cqw;height:3.4cqw;border-radius:3cqw;--paint:linear-gradient(96deg,#FF1F6E,#F0803C)}
.el--h1{top:13.2cqw;left:3cqw;width:25cqw;height:3.6cqw;--paint:#FFFFFF}
.el--h2{top:18cqw;left:3cqw;width:17cqw;height:3.6cqw;--paint:linear-gradient(96deg,#FF1F6E,#FF4D7D 48%,#F0803C)}
.el--p{top:23.6cqw;left:3cqw;width:22cqw;height:3.6cqw;border-radius:.6cqw;--paint:linear-gradient(rgba(255,255,255,.3),rgba(255,255,255,.3)) 0 0 / 100% 1.1cqw no-repeat,linear-gradient(rgba(255,255,255,.3),rgba(255,255,255,.3)) 0 100% / 72% 1.1cqw no-repeat}
.el--btn{top:29.6cqw;left:3cqw;width:13cqw;height:4.2cqw;border-radius:3cqw;--paint:linear-gradient(96deg,#FF1F6E,#F0803C)}
.el--media{top:12.6cqw;left:33cqw;width:26cqw;height:21.4cqw;overflow:hidden;border-radius:1.6cqw;--paint:linear-gradient(150deg,#2B0B1B,#A91F52 55%,#F0803C)}
.el--media::before{background:linear-gradient(to top right,transparent calc(50% - .6px),rgba(255,255,255,.42) calc(50% - .6px),rgba(255,255,255,.42) calc(50% + .6px),transparent calc(50% + .6px)),linear-gradient(to bottom right,transparent calc(50% - .6px),rgba(255,255,255,.42) calc(50% - .6px),rgba(255,255,255,.42) calc(50% + .6px),transparent calc(50% + .6px))}
.el--media>i{z-index:1;inset:3cqw 4cqw auto auto;width:4cqw;height:4cqw;border-radius:50%;background:rgba(255,255,255,.78);opacity:1;transform-origin:50% 50%}
.el--c1,.el--c2,.el--c3{top:37.6cqw;width:17.6cqw;height:7cqw;border-radius:1.3cqw;--paint:linear-gradient(170deg,rgba(255,255,255,.14),rgba(255,255,255,.045))}
.el--c1{left:3cqw}
.el--c2{left:22.2cqw}
.el--c3{left:41.4cqw}
.el--c1::after,.el--c2::after,.el--c3::after{transform-origin:50% 50%}
.guide{position:absolute;background:#FF4D7D;opacity:0}
.guide--x{top:-3cqw;bottom:-3cqw;left:3cqw;width:1px}
.guide--y{top:12.6cqw;right:-3cqw;left:-3cqw;height:1px}
.tagsize{position:absolute;top:-3.6cqw;right:0;padding:.5cqw 1.1cqw;border-radius:.7cqw;background:#D41459;font:500 1.5cqw/1.2 var(--mono);color:#FFFFFF;opacity:0}
.studio__drop{position:absolute;z-index:5;top:0;left:0;width:17.6cqw;height:7cqw;border:1px solid rgba(255,77,125,.9);border-radius:1.3cqw;background:rgba(40,40,48,.92);box-shadow:0 2cqw 4cqw -1cqw #000;opacity:0;transform-origin:0 0}
.studio__sweep{position:absolute;z-index:3;top:5.2cqw;bottom:0;left:30cqw;width:26cqw;background:linear-gradient(105deg,transparent,rgba(255,255,255,.13) 45%,rgba(255,77,125,.1) 55%,transparent);opacity:0;pointer-events:none}
.studio__cursor{position:absolute;z-index:6;top:0;left:0;width:3.2cqw;height:3.2cqw;opacity:0;transform:translate3d(104cqw,62cqw,0)}
.studio__cursor .ic{display:block;width:100%;height:100%;fill:#FFFFFF;stroke:#0B0B0E;stroke-width:1.6}
.studio__cursor i{position:absolute;top:-1.6cqw;left:-1.6cqw;width:3.6cqw;height:3.6cqw;border:1px solid #FFFFFF;border-radius:50%;opacity:0}
.handset{position:absolute;z-index:3;top:13.6cqw;left:69.5cqw;display:grid;align-content:start;gap:1.7cqw;width:23.5cqw;height:47.4cqw;padding:2.4cqw 2.2cqw;border:1px solid rgba(255,255,255,.27);border-radius:3.6cqw;background:#101014;box-shadow:0 4cqw 9cqw -4cqw #000,0 0 0 1px rgba(255,31,110,.16),0 0 8cqw -2cqw rgba(240,128,60,.3)}
.handset>*{display:block;border-radius:.8cqw}
.handset__top{display:flex;align-items:center;justify-content:space-between;font:600 2.2cqw/1.1 var(--display);white-space:nowrap;color:#FFFFFF}
.handset__top i{width:3.2cqw;height:2.2cqw;background:linear-gradient(#FFFFFF,#FFFFFF) 0 0 / 100% .4cqw no-repeat,linear-gradient(#FFFFFF,#FFFFFF) 0 50% / 100% .4cqw no-repeat,linear-gradient(#FFFFFF,#FFFFFF) 0 100% / 100% .4cqw no-repeat}
.handset__media{height:13.4cqw;border-radius:1.4cqw;background:radial-gradient(circle at 74% 28%,rgba(255,255,255,.75) 0,rgba(255,255,255,.75) 6.5%,transparent 7.2%),linear-gradient(150deg,#2B0B1B,#A91F52 55%,#F0803C)}
.handset__h{height:2.7cqw;background:#FFFFFF}
.handset__h--b{width:66%;background:linear-gradient(96deg,#FF1F6E,#FF4D7D 48%,#F0803C)}
.handset__p{width:86%;height:1.1cqw;background:rgba(255,255,255,.3)}
.handset__btn{height:4cqw;border-radius:3cqw;background:linear-gradient(96deg,#FF1F6E,#F0803C)}
@media (max-width:760px){
  .incl--detail li{padding:14px 0 16px}
}
/* Summary panel under the hero: key facts (the passage an assistant can lift) and the technology marks in ONE lit surface in
   the material of the page (service pattern and glows). Zones are separated by tone, spacing and alignment — no rules. */
.band{position:relative;z-index:2;display:grid;overflow:hidden;margin:var(--s-block) auto 0;border:1px solid rgba(255,255,255,.11);border-radius:24px;background:radial-gradient(70% 150% at 0% 0%,rgba(255,31,110,.24),transparent 62%),radial-gradient(55% 130% at 100% 100%,rgba(240,128,60,.15),transparent 64%),linear-gradient(180deg,#171019,#0E0C11);box-shadow:0 44px 110px -64px rgba(255,31,110,.6),inset 0 1px rgba(255,255,255,.08)}
.band::before{content:"";position:absolute;inset:0;background-image:var(--svc-pattern);background-size:var(--svc-size);opacity:.55;-webkit-mask-image:linear-gradient(100deg,#000,transparent 58%);mask-image:linear-gradient(100deg,#000,transparent 58%);pointer-events:none}
.keyfacts,.techs{position:relative}
.keyfacts__list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px 40px;margin:0}
.keyfacts dt{font:500 10.5px/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(245,245,247,.7)}
.keyfacts dd{margin:9px 0 0;font:600 clamp(17px,1.45vw,20.5px)/1.3 var(--display);letter-spacing:-.012em;color:#FFFFFF;text-wrap:balance}
.work__logo img{max-width:min(156px,100%)}
/* Hero scene: the canvas is the pause control once the sequence runs (role and label are set by pages.js) */
.scene__canvas[role="button"]{cursor:pointer;-webkit-tap-highlight-color:transparent}
.scene__canvas:focus-visible{outline:2px solid #FFFFFF;outline-offset:4px}
@media (min-width:1000px){
  .faq__media{position:sticky;top:calc(var(--bar) + 16px);max-height:max(240px,calc(100vh - var(--bar) - 32px))}
}
@media (max-width:1199px){
  .keyfacts__list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:599px){
  .keyfacts__list{grid-template-columns:minmax(0,1fr);gap:16px}
  .keyfacts dd{margin-top:5px;font-size:17px;text-wrap:pretty}
}

/* Summary panel: its title is the heading of the panel (display type), the four captions stay small; the space above the
   panel equals the space between it and the next section. */
.keyfacts{display:grid;gap:var(--s-text);padding:var(--s-group) 40px}
.keyfacts__label{font:600 clamp(25px,2.1vw,30px)/1.2 var(--display);letter-spacing:-.022em;color:#FFFFFF}
.techs{display:flex;flex-wrap:wrap;align-items:center;gap:14px 32px;padding:20px 40px;background:rgba(5,5,7,.46)}
.techs__label{font:500 11px/1.6 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:rgba(245,245,247,.7)}
/* Google review card: the anatomy of the home's review card (testimonials-preview.css) — white card, Google mark, name and
   company, five stars and the service, the text and the client's logo. One card per section here, not a carousel. */
.review{display:flex;flex-direction:column;gap:18px;width:100%;max-width:480px;min-width:0;margin:0;padding:26px;border:1px solid #FF96B9;border-radius:20px;background:#FFFFFF;color:#202124;box-shadow:0 20px 40px -22px #FF1F6E40}
.review__top{display:flex;align-items:center;gap:12px}
.review__g{flex:0 0 40px;width:40px;height:40px;object-fit:contain}
.review__who{display:block;min-height:44px;font-style:normal}
.review__who strong{display:block;font:700 14px/1.4 var(--body);color:#202124;overflow-wrap:anywhere}
.review__who span{display:block;margin-top:4px;font:500 12px/1.4 var(--body);color:#5F6368}
.review__rating{display:flex;align-items:center;gap:10px;font:400 12px/1.4 var(--body);color:#70757A}
.review__stars{font:400 18px/1.2 Arial,sans-serif;letter-spacing:2px;white-space:nowrap;color:#FABB05}
.review__tag{font-weight:600;color:#FF1F6E}
.review blockquote{margin:0}
.review blockquote p{font:400 14px/1.75 var(--body);color:#303134}
.review__brand{display:flex;align-items:center;justify-content:flex-start;width:140px;height:45px;max-width:100%;margin-top:auto;padding:4px 0;border-radius:9px;background:#FFFFFF}
.review__brand img{width:100%;height:100%;object-fit:contain;filter:brightness(0) invert(.65);pointer-events:none}
/* Review under a row of work cards: as wide as the card above it, with the section action below */
.reviewrow .review{width:min(100%,max(360px,calc((100% - 44px) / 3)))}
@media (min-width:1000px){
  .ba.is-live .ba__frame{aspect-ratio:10 / 9}
}
@media (max-width:760px){
  .keyfacts{padding:var(--s-group) 22px}
  .techs{gap:12px;padding:14px 22px 18px}
  .review{padding:22px;gap:16px}
}
/* Spacing scale of the service pages. Every vertical gap between blocks is one of these steps (desktop / up to 760 px):
   tight 16/14 · text 24/20 · group 40/28 · block 56/40 · section 128/96. --bar is the height of the fixed header (pages.js
   keeps it equal to the real one). --crumb-above / --crumb-below place the breadcrumb line with the same air (45 px, ink to
   ink) to the logo above and to the eyebrow below at every width; the logo sits at a different height in each header. */
[data-service]{--s-tight:16px;--s-text:24px;--s-group:40px;--s-block:56px;--s-section:128px;--bar:82.5px;--crumb-above:15.5px;--crumb-below:40px}
[data-service] .opener{margin-bottom:var(--s-group)}
[data-service] .site-footer{margin-top:var(--s-section)}
.hero--service{padding-top:calc(var(--bar) + var(--crumb-above))}
.hero--service .hero__grid{max-width:1280px}
.band{width:min(100% - 64px,1216px)}
.hero--service .pill{margin-bottom:var(--s-text);vertical-align:top}
.hero--service .hero__lead{margin-top:var(--s-text)}
.hero--service .hero__actions{margin-top:var(--s-group)}
.hero--service .facts{margin-top:var(--s-block)}
.hero--service+.section{padding-top:var(--s-block)}
.modenote{margin-top:var(--s-text)}
.split__tail>.review{margin-top:var(--s-text)}
.split__link{margin-top:calc(var(--s-text) - 14px)}
.reviewrow{display:grid;justify-items:center;gap:var(--s-group);margin-top:var(--s-group)}
.also{position:relative;margin-top:var(--s-section)}
.also+.final{padding-top:var(--s-block)}
/* Breadcrumb: one quiet line tucked under the header, on the left edge of the hero column */
.crumbs{position:relative;z-index:2;width:100%;max-width:1280px;margin:0 auto var(--crumb-below);padding:0 32px;font:400 12px/1.5 var(--body);color:rgba(245,245,247,.78)}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:0 8px}
.crumbs li{display:inline-flex;align-items:center;gap:8px}
.crumbs li+li::before{content:"›";content:"›" / "";color:rgba(245,245,247,.36)}
.crumbs a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;margin:-13px -7px;padding:0 7px;color:rgba(245,245,247,.6);transition:color 150ms ease}
.crumbs a:hover{color:#FFFFFF}
/* Technology marks: a set of six that stays balanced — one row, then 3 × 2, then 2 × 3 */
.techs__list{display:grid;grid-template-columns:repeat(6,auto);justify-content:start;gap:12px 26px}
.techs__mark--wide{padding:3px}
.techs__mark--wide img{width:28px;height:28px}
/* Lit visual ([data-lamp]): closed and dark at first; as it scrolls into view it opens and lights up (pages.js sets
   --lit 0→1). Click, Enter or Space switch it by hand. Each service puts its own scene inside. Without JavaScript or with
   reduced motion it is shown open and lit. */
.lamp{--lit:1;container-type:size;background:#060607;cursor:pointer;-webkit-tap-highlight-color:transparent}
.lamp::after{content:"";position:absolute;z-index:3;inset:0;background:radial-gradient(circle at 50% 40%,rgba(255,245,248,.1),transparent 44%),linear-gradient(145deg,rgba(255,31,110,.1),transparent 42%,rgba(240,128,60,.1));opacity:calc(.06 + var(--lit) * .94);pointer-events:none}
.lamp:focus-visible{outline:3px solid rgba(255,77,125,.92);outline-offset:5px}
.lamp.is-toggled::after,.lamp.is-toggled .layers>*,.lamp.is-toggled .layers>*::before,.lamp.is-toggled .layers>*::after,.lamp.is-toggled .layers i{transition:opacity .7s var(--ease-expo),transform .95s var(--ease-expo),border-color .7s ease}
.lamp.is-toggled .layers__plane--1{transition-delay:70ms}
.lamp.is-toggled .layers__plane--3{transition-delay:140ms}
.lamp.is-toggled .layers__plane--2{transition-delay:210ms}
/* Lit scene of web design: the layers of a website (structure, content, colour, interface). Closed, they rest as one dark
   slab; opening, they lift apart one after another (--o is each layer's own progress) and take colour and glow as they go. */
.layers{position:absolute;inset:0}
.layers__floor{position:absolute;bottom:5cqh;left:50%;width:88cqmin;height:22cqmin;margin-left:-44cqmin;border-radius:50%;background:radial-gradient(closest-side,rgba(255,31,110,.55),rgba(240,128,60,.22) 60%,transparent);filter:blur(3cqmin);opacity:var(--lit)}
.layers__beam{position:absolute;top:6cqh;bottom:10cqh;left:50%;width:46cqmin;margin-left:-23cqmin;background:linear-gradient(180deg,transparent,rgba(255,77,125,.2) 28%,rgba(240,128,60,.14) 72%,transparent);filter:blur(5cqmin);opacity:var(--lit)}
.layers__plane{--o:clamp(0,(var(--lit) - var(--d,0)) / .73,1);position:absolute;top:50%;left:50%;width:56cqmin;height:56cqmin;margin:-28cqmin 0 0 -28cqmin;border:1px solid rgb(255 255 255 / calc(.11 + var(--o) * .09));border-radius:3cqmin;background:rgb(11 11 14 / .95);transform:translate3d(0,calc(var(--to) * (.05 + var(--o) * .95)),0) rotateX(58deg) rotateZ(-45deg)}
.layers__plane::before{content:"";position:absolute;inset:-4cqmin;border-radius:6cqmin;background:var(--halo,rgba(255,31,110,.5));filter:blur(5cqmin);opacity:calc(var(--o) * var(--halo-on,.5))}
.layers__plane::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--on);opacity:var(--o)}
.layers__plane i{position:absolute;z-index:1;display:block;border-radius:1cqmin;background:rgba(255,255,255,.2);opacity:calc(.1 + var(--o) * .9)}
.layers__plane--echo{--to:49cqh;--d:.2;--halo-on:0;border-color:transparent;background:none;--on:linear-gradient(135deg,rgba(255,31,110,.34),rgba(240,128,60,.18));filter:blur(1.6cqmin)}
.layers__plane--1{--to:29.5cqh;--d:.09;--halo-on:.52;--on:linear-gradient(rgba(255,77,125,.55) 1px,transparent 1px) 0 0 / 100% 25%,linear-gradient(90deg,rgba(255,77,125,.55) 1px,transparent 1px) 0 0 / 25% 100%,rgba(26,12,20,.9)}
.layers__plane--2{--to:9.9cqh;--d:.27;--halo-on:.28;--halo:rgba(255,255,255,.4);--on:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.02))}
.layers__plane--2 i{top:14%;left:10%;width:52%;height:9%;background:rgba(255,255,255,.9)}
.layers__plane--2 i:nth-child(2){top:30%;width:34%}
.layers__plane--2 i:nth-child(3){top:52%;width:70%;height:4%;background:rgba(255,255,255,.5)}
.layers__plane--2 i:nth-child(4){top:62%;width:58%;height:4%;background:rgba(255,255,255,.5)}
.layers__plane--2 i:nth-child(5){top:72%;width:64%;height:4%;background:rgba(255,255,255,.5)}
.layers__plane--3{--to:-9.9cqh;--d:.18;--halo-on:.88;--halo:linear-gradient(135deg,#FF1F6E,#F0803C);--on:linear-gradient(135deg,#FF1F6E,#FF4D7D 45%,#F0803C)}
.layers__plane--4{--to:-29.5cqh;--d:0;--halo-on:.38;--on:linear-gradient(160deg,rgba(255,255,255,.13),rgba(255,255,255,.03))}
.layers__plane--4 i{top:9%;left:9%;width:22%;height:6%;background:#FFFFFF}
.layers__plane--4 i:nth-child(2){left:67%;width:24%;height:7%;border-radius:4cqmin;background:linear-gradient(96deg,#FF1F6E,#F0803C)}
.layers__plane--4 i:nth-child(3){top:28%;width:40%;height:9%}
.layers__plane--4 i:nth-child(4){top:42%;width:28%;height:9%;background:linear-gradient(96deg,#FF1F6E,#F0803C)}
.layers__plane--4 i:nth-child(5){top:62%;width:26%;height:10%;border-radius:4cqmin;background:linear-gradient(96deg,#FF1F6E,#F0803C)}
.layers__plane--4 i:nth-child(6){top:26%;left:57%;width:34%;height:48%;border-radius:2cqmin;background:linear-gradient(150deg,#2B0B1B,#A91F52 55%,#F0803C)}
@container (min-aspect-ratio:9 / 10){
  .layers__plane{width:50cqmin;height:50cqmin;margin:-25cqmin 0 0 -25cqmin}
  .layers__plane--1{--to:28cqh}
  .layers__plane--2{--to:9.4cqh}
  .layers__plane--3{--to:-9.4cqh}
  .layers__plane--4{--to:-28cqh}
}
@media (min-width:761px){
  .hero--service .hero__title{font-size:clamp(46px,6.4vw,92px)}
}
@media (min-width:1024px){
  .hero--service .hero__copy>.hero__actions{display:flex}
  .hero--service .hero__copy>.hero__actions .btn{width:auto}
}
@media (max-width:1279px){
  .techs{flex-direction:column;align-items:flex-start;padding-top:16px}
}
@media (max-width:1239px),(max-height:500px){
  [data-service]{--bar:70.5px;--crumb-above:21.5px}
}
/* Service hero in one column (from 1023 px down, like the home): the scene sits right under the title, before the lead */
@media (max-width:1023px){
  .hero--service .hero__grid{grid-template-columns:minmax(0,1fr);gap:0}
  .hero--service .hero__copy{display:contents}
  .hero--service .pill{grid-row:1;justify-self:start}
  .hero--service .hero__title{grid-row:2}
  .hero--service .hero__line{text-wrap:balance}
  .hero--service .hero__work{grid-row:3;margin-top:var(--s-group)}
  .hero--service .hero__lead{grid-row:4;max-width:64ch;margin-top:var(--s-group)}
  .hero--service .hero__copy>.hero__actions{grid-row:5;display:flex}
  .hero--service .facts{grid-row:6}
}
@media (min-width:761px) and (max-width:1239px){
  [data-service] .site-header__inner{padding-inline:32px}
}
@media (min-width:761px) and (max-width:1023px){
  .hero--service .hero__copy>.hero__actions .btn{width:auto}
}
@media (min-width:1024px) and (max-width:1119px){
  .hero--service .facts li:first-child{flex-basis:100%}
}
@media (max-width:899px){
  .techs__list{grid-template-columns:repeat(3,auto)}
}
/* Stacked demonstration on tablets: the review and the result sit side by side under it */
@media (min-width:761px) and (max-width:999px){
  .split__tail{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);grid-template-rows:1fr 1fr;grid-template-areas:"card result" "card link";gap:var(--s-tight) var(--s-group)}
  .split__tail>.review{grid-area:card;max-width:none;margin-top:0}
  .split__tail>.result{grid-area:result;align-self:end}
  .split__link{grid-area:link;align-self:start;margin-top:0}
}
/* Published-work cards: three in a row while they stay legible, then one column — never a sideways scroll */
@media (max-width:760px){
  .works{grid-template-columns:minmax(0,1fr);gap:16px}
  .reviewrow .review,.split__tail>.review{width:100%;max-width:none}
}
@media (min-width:480px) and (max-width:760px){
  .work{flex-direction:row}
  .work__visual{flex:0 0 46%;align-self:stretch}
  .work__logo{left:12px;bottom:12px;width:min(120px,calc(100% - 24px));height:44px;padding:7px 11px}
  .work__meta{flex-direction:column;align-items:flex-start;justify-content:center;gap:14px;min-height:0;padding:18px 22px}
}
@media (max-width:760px){
  [data-service]{--s-tight:14px;--s-text:20px;--s-group:28px;--s-block:40px;--s-section:96px;--crumb-above:18.5px}
  .crumbs,.hero--service .hero__grid{padding-inline:16px}
  .band{width:min(100% - 32px,1216px);border-radius:20px}
  .reviewrow .btn{justify-self:stretch}
}
@media (max-width:699px){
  .also__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
  .also__link{display:flex;justify-content:space-between}
}
@media (max-width:519px){
  .hero--service .facts li:first-child{flex-basis:100%}
}
@media (max-width:339px){
  .hero--service .hero__line{font-size:46px}
}
@media (max-width:479px){
  .techs__list{grid-template-columns:repeat(2,minmax(0,auto));gap:12px 20px}
  .techs__item{min-width:0;white-space:normal;overflow-wrap:anywhere}
  .also__list{grid-template-columns:minmax(0,1fr)}
}

/* Process row: titles of one and two lines share a row, so every description starts on the same line */
@media (min-width:1000px){
  .steps{grid-template-rows:auto auto 1fr}
  .steps li{display:grid;grid-template-rows:subgrid;grid-row:1 / span 3}
}
@supports not (grid-template-rows:subgrid){
  @media (min-width:1000px){
    .steps h3{min-height:2.8em}
  }
}
/* Logo plate of the work cards: it scales with the card, so it covers the same share of the screenshot at every size */
.work__logo{left:min(16px,4.2cqw);bottom:min(16px,4.2cqw);width:min(190px,50cqw);height:min(68px,18cqw);padding:min(10px,2.6cqw) min(16px,4.2cqw);border-radius:min(14px,3.7cqw)}
.work__logo img{max-height:min(46px,12.2cqw)}
@media (min-width:480px) and (max-width:760px){
  .work__logo{left:min(16px,2cqw);bottom:min(16px,2cqw);width:min(190px,23cqw);height:min(68px,8.3cqw);padding:min(10px,1.2cqw) min(16px,2cqw);border-radius:min(14px,1.7cqw)}
  .work__logo img{max-height:min(46px,5.6cqw)}
}
/* Paused by the visitor: a small note that exists only in that state (the canvas carries aria-pressed) */
.scene__paused{display:none;position:absolute;z-index:7;left:50%;bottom:12px;align-items:center;gap:8px;min-height:30px;padding:0 13px 0 10px;border:1px solid rgba(255,255,255,.22);border-radius:999px;background:rgba(8,8,10,.88);box-shadow:0 12px 28px -14px #000;font:500 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;color:#FFFFFF;transform:translateX(-50%);pointer-events:none}
.scene__paused .ic{font-size:13px;stroke-width:2.6}
.scene__canvas[aria-pressed="true"] .scene__paused{display:inline-flex;animation:paused-in 220ms var(--ease-out) both}
@keyframes paused-in{from{opacity:0;transform:translate(-50%,6px)}}
/* Short landscape viewports (phones on their side): the hero scene, the demonstration and the lit visual are capped to the
   height left under the header and centred, so each can be seen whole. */
@media (max-height:500px) and (orientation:landscape) and (max-width:1023px){
  .hero--service .hero__work{justify-self:center;width:min(100%,calc((100vh - var(--bar) - 32px) * 1.515));width:min(100%,calc((100svh - var(--bar) - 32px) * 1.515))}
}
@media (max-height:500px) and (orientation:landscape) and (max-width:999px){
  .split__stage{justify-self:center;width:min(100%,calc((100vh - var(--bar) - 80px) * 1.5));width:min(100%,calc((100svh - var(--bar) - 80px) * 1.5))}
  .faq--media .faq__media{align-self:center;width:min(100%,calc((100vh - var(--bar) - 32px) * 1.6));width:min(100%,calc((100svh - var(--bar) - 32px) * 1.6))}
}

/* 16b. Service pages built from the model ----------------------------------------
   Shared by every service page that follows /diseno-web/. The artwork of each page (hero scene, illustration, lit
   visual) lives in ONE <style> block in that page's <head>, with its own class prefix; this file only holds what they
   all reuse. Nothing here matches the model page or the landing pages. */
/* Long copy in the hero (.hero--long on the section): a title of more than ~40 characters takes a smaller step of the title
   scale and keeps to three lines; a primary action that does not fit beside the second one stacks with it at one shared
   width; stage labels of nine characters or more get a smaller number on phones, and under 360 px the number gives its
   place to the label. */
.hero--long .hero__title{max-width:none}
@media (min-width:761px){
  .hero--service.hero--long .hero__title{font-size:clamp(42px,5.6vw,58px);line-height:1.03;letter-spacing:-.036em}
}
@media (min-width:1024px){
  .hero--service.hero--long .hero__title{font-size:clamp(46px,4.7vw,61px)}
}
@media (max-width:760px){
  .hero--service.hero--long .hero__line{font-size:clamp(34px,10.2vw,46px)}
}
@media (min-width:1024px) and (max-width:1239px){
  .hero--service.hero--long .hero__copy>.hero__actions{display:grid;grid-template-columns:max-content;justify-content:start}
  .hero--service.hero--long .hero__copy>.hero__actions .btn{width:100%}
}
@media (max-width:430px){
  .hero--long .stages__step{gap:6px;font-size:12.5px}
  .hero--long .stages__n{width:18px;height:18px;font-size:9px}
}
@media (max-width:359px){
  .hero--long .stages__step{font-size:13px}
  .hero--long .stages__n{display:none}
  .hero--long .hero__actions .btn{padding:8px 18px;line-height:1.2}
}
/* Section title beside the reading-mode switch: a long title (.headrow--long) takes the whole row on tablets, switch below */
@media (min-width:761px) and (max-width:899px){
  .headrow--long{grid-template-columns:minmax(0,1fr);justify-items:start;gap:var(--s-group)}
}
/* Final panel: an action with a long label takes the width it needs instead of the fixed 300 px (two lines on narrow phones) */
.final .btn--fit{width:auto;min-width:min(100%,300px);max-width:100%}
@media (max-width:760px){
  .final .btn--fit{width:100%;min-width:0;padding:10px 22px;line-height:1.2}
}
/* Technology marks, other sets. Four marks: one row, then 2 × 2. Six marks with long names (Google Analytics, App Store…):
   3 × 2 and 2 × 3 a little earlier than the default set, so the row never outgrows the panel. */
.techs__list--4{grid-template-columns:repeat(4,auto)}
@media (max-width:659px){
  .techs__list--4{grid-template-columns:repeat(2,minmax(0,auto))}
}
@media (max-width:959px){
  .techs__list--long{grid-template-columns:repeat(3,auto)}
}
@media (max-width:519px){
  .techs__list--long{grid-template-columns:repeat(2,minmax(0,auto));gap:12px 20px}
}
/* Lit visual, generic hook: the scene of the page sits in .lamp__art. Every element inside gets its own opening progress
   --o (0→1) from --lit and from its own delay --d (0 to .27), and eases in that order when the visitor switches it by hand. */
.lamp__art{position:absolute;inset:0}
.lamp__art,.lamp__art *{--o:clamp(0,(var(--lit) - var(--d,0)) / .73,1)}
.lamp.is-toggled .lamp__art,.lamp.is-toggled .lamp__art *,.lamp.is-toggled .lamp__art *::before,.lamp.is-toggled .lamp__art *::after{transition:opacity .7s var(--ease-expo) calc(var(--d,0) * .8s),transform .95s var(--ease-expo) calc(var(--d,0) * .8s),border-color .7s ease}
/* Interactive illustration ([data-sim]) in the demonstration slot of .split: a framed example the visitor operates.
   Frame, stage, controls and the visible "illustration" note are shared; whatever happens inside .sim__stage belongs to
   the page. pages.js keeps the state on the root as data-<key> attributes; without it the controls stay hidden and the
   stage shows its first state. */
.sim{display:grid;grid-template-columns:minmax(0,1fr);overflow:hidden;border:1px solid rgba(255,255,255,.13);border-radius:22px;background:#08090B;box-shadow:0 36px 110px -58px rgba(255,31,110,.56),inset 0 1px rgba(255,255,255,.035)}
.sim__bar{display:flex;align-items:center;gap:13px;min-height:46px;padding:0 16px;border-bottom:1px solid rgba(255,255,255,.1);background:linear-gradient(180deg,#141519,#0D0E11);font:500 10.5px/1 var(--mono);letter-spacing:.04em;color:rgba(245,245,247,.66)}
.sim__dots{display:flex;flex:none;gap:6px}
.sim__dots i{width:8px;height:8px;border-radius:50%;background:#FF5C6A}
.sim__dots i:nth-child(2){background:#F0B24A}
.sim__dots i:last-child{background:#31C66B}
.sim__name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sim__stage{position:relative;aspect-ratio:4 / 3;overflow:hidden;container-type:inline-size;background:#0B0B0E}
.sim__stage--fluid{aspect-ratio:auto}
.sim__controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 14px;padding:14px 16px;border-top:1px solid rgba(255,255,255,.1);background:#0E0F12}
.sim__set{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.sim__seg{display:inline-flex;padding:4px;border:1px solid var(--line-2);border-radius:999px;background:rgba(255,255,255,.035)}
.sim__opt,.sim__btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;font:700 13px/1.15 var(--body);white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:color 200ms ease,background-color 200ms ease,border-color 200ms ease,opacity 200ms ease,transform 200ms var(--ease-out)}
.sim__opt{min-height:36px;padding:0 16px;border:0;background:none;color:var(--ink-80)}
.sim__opt::before{content:"";position:absolute;inset:-4px 0}
.sim__opt[aria-pressed="true"]{background:linear-gradient(96deg,#D41459,#C4315E 46%,#B64F20);color:#FFFFFF}
.sim__btn{min-height:44px;padding:0 17px;border:1px solid var(--line-2);background:rgba(255,255,255,.03);color:#FFFFFF}
.sim__btn--main{border-color:transparent;background:linear-gradient(#131316,#131316) padding-box,linear-gradient(96deg,#FF1F6E 0%,#FF4D7D 48%,#F0803C 100%) border-box;box-shadow:0 14px 30px -22px rgba(255,31,110,.82)}
.sim__btn[aria-pressed="true"]{border-color:rgba(255,77,125,.75);background:rgba(255,31,110,.16)}
.sim__btn[aria-disabled="true"]{opacity:.42;box-shadow:none;cursor:default}
.sim__btn:not([aria-disabled="true"]):active{transform:scale(.97)}
.sim__opt .ic,.sim__btn .ic{font-size:15px}
.sim__opt:focus-visible,.sim__btn:focus-visible{outline:2px solid #FFFFFF;outline-offset:2px}
.sim__note{display:flex;align-items:flex-start;gap:9px;padding:12px 16px 13px;border-top:1px solid rgba(255,255,255,.1);font:500 11px/1.55 var(--mono);letter-spacing:.03em;color:rgba(245,245,247,.74)}
.sim__note .ic{flex:none;margin-top:1.5px;font-size:14px;color:var(--pink-2)}
[data-sim-ui][hidden],[data-sim-show][hidden]{display:none!important}
/* The first time it comes into view, the main control asks for a press (three soft rings; none once it has been used) */
html.js .sim.is-in:not(.is-used) .sim__btn--main::after{content:"";position:absolute;inset:-1px;border-radius:inherit;box-shadow:0 0 0 0 rgba(255,77,125,.5);animation:sim-cue 1.5s var(--ease-out) .7s 3;pointer-events:none}
@keyframes sim-cue{to{box-shadow:0 0 0 12px rgba(255,77,125,0)}}
@media (hover:hover) and (pointer:fine){
  .sim__opt:hover{color:#FFFFFF}
  .sim__btn:not([aria-disabled="true"]):hover{border-color:rgba(255,77,125,.6);background-color:rgba(255,31,110,.1)}
  .sim__btn--main:not([aria-disabled="true"]):hover{border-color:transparent;background:linear-gradient(96deg,#D41459 0%,#C4315E 48%,#B64F20 100%) padding-box,linear-gradient(96deg,#FF1F6E 0%,#FF4D7D 48%,#F0803C 100%) border-box}
}
@media (max-width:760px){
  .sim{border-radius:18px}
  .sim__controls{padding:12px 12px 13px}
  .sim__opt{padding:0 14px}
  .sim__btn{padding:0 15px}
  .sim__note{padding:11px 14px 12px}
}
/* Demonstration slot with an illustration (.split--sim): the section title runs across the top like in the other sections;
   under it, the sentence that introduces the review and the review itself sit beside the illustration */
.split__tail>.intro+.review{margin-top:var(--s-text)}
@media (min-width:1000px){
  .split--sim{grid-template-areas:"head head" "tail stage";row-gap:var(--s-block)}
  .split--sim .split__tail{align-self:center}
}
/* …and when the section has no review (.split--solo): title, an optional line under it and the illustration across the whole
   width, on a wider stage */
.split--solo{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "stage" "tail";row-gap:var(--s-block)}
@media (min-width:1000px){
  .split--solo .sim__stage:not(.sim__stage--fluid){aspect-ratio:2 / 1}
}
@media (max-width:999px){
  .split--solo{row-gap:var(--s-group)}
}
/* Client logo of a review card, the two variants the home also has: a larger plate (WAZO, Pura Vida, Oikos) and an opaque
   logo that cannot become a silhouette (Diagnosticam) */
.review__brand--large{width:160px;height:54px}
.review__brand--opaque img{filter:grayscale(1);opacity:.55}
@media (min-width:761px) and (max-width:999px){
  .split--sim .split__tail{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);grid-template-rows:auto;grid-template-areas:"intro card";align-items:center}
  .split--sim .split__tail>.intro{grid-area:intro}
}

/* 17. WhatsApp chat (shared shell) ---------------------------------------------
   Port of the floating launcher and chat of the home (production.css, [data-rs-wa-*]): same markup hooks, same values, with
   the cascade of the home resolved. Behaviour in pages.js; every label comes from the markup. */
[data-rs-wa-shell]{position:fixed!important;right:20px!important;bottom:max(20px,env(safe-area-inset-bottom))!important;z-index:45!important;display:flex!important;flex-direction:column!important;align-items:flex-end!important;gap:10px!important;line-height:normal;opacity:0;visibility:hidden;transform:translate3d(0,8px,0);pointer-events:none!important;transition:opacity 240ms cubic-bezier(.23,1,.32,1),visibility 240ms,transform 240ms cubic-bezier(.23,1,.32,1)}
[data-rs-wa-shell].is-available{opacity:1;visibility:visible;transform:none;pointer-events:none!important}
[data-rs-wa-shell].is-available [data-rs-wa-button]{pointer-events:auto!important}
[data-rs-wa-shell].is-autonomy-paused,[data-rs-wa-shell].is-menu-suppressed,[data-rs-wa-shell].is-available.is-menu-suppressed{opacity:0!important;visibility:hidden!important;transform:translate3d(0,8px,0)!important;pointer-events:none!important;transition:none!important}
[data-rs-wa-bubble]{position:relative!important;display:grid!important;grid-template-rows:auto minmax(0,1fr) auto;width:min(344px,calc(100vw - 40px));max-height:min(580px,calc(100vh - 94px));margin:0;padding:0!important;overflow:hidden;border:0!important;border-radius:18px!important;background:#EFEAE2!important;color:#17211B;box-shadow:0 28px 76px -22px rgba(0,0,0,.78)!important;opacity:0!important;visibility:hidden;transform:translate3d(0,10px,0)!important;transform-origin:bottom right;pointer-events:none!important;transition:opacity 300ms ease,visibility 300ms ease,transform 360ms cubic-bezier(.23,1,.32,1)!important}
[data-rs-wa-bubble].is-visible{opacity:1!important;visibility:visible;transform:none!important;pointer-events:auto!important}
[data-rs-wa-bubble].is-focus-dismissed{animation:none!important;transition:none!important}
[data-rs-wa-header]{display:flex;align-items:center;gap:10px;min-height:62px;padding:9px 8px 9px 11px;border-bottom:1px solid rgba(23,33,27,.08);background:#FFFFFF;color:#17211B}
[data-rs-wa-close]{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;margin-left:auto;padding:0;border:0;border-radius:50%;background:transparent;color:#4B5650;font:400 22px/1 Manrope,sans-serif;cursor:pointer;transition:color .2s ease,background .2s ease}
[data-rs-wa-avatar]{display:grid;place-items:center;flex:0 0 38px;width:38px;height:38px;padding:5px;overflow:hidden;border:0;border-radius:50%;background:#050505;box-shadow:0 8px 20px -13px rgba(0,0,0,.82)}
[data-rs-wa-avatar] img{display:block;width:28px;height:28px;object-fit:contain}
[data-rs-wa-person-copy]{display:flex;min-width:0;flex-direction:column;gap:3px}
[data-rs-wa-person-copy] strong{font:650 13px/1.15 Manrope,sans-serif;color:#17211B}
[data-rs-wa-person-copy] small{font:500 10px/1.25 Manrope,sans-serif;color:#47544D}
[data-rs-wa-chatlog]{position:relative;min-height:218px;padding:16px 13px 18px;background-color:#EFEAE2;background-image:linear-gradient(rgba(239,234,226,.8),rgba(239,234,226,.8)),url("/assets/whatsapp-chat-doodle.webp");background-position:center,center top;background-size:auto,360px auto;background-repeat:no-repeat,repeat-y}
[data-rs-wa-day]{display:block;width:max-content;margin:0 auto 15px;padding:5px 8px;border-radius:7px;background:rgba(255,255,255,.72);box-shadow:0 4px 10px -8px rgba(0,0,0,.55);font:600 9px/1.15 'Segoe UI',Arial,Helvetica,sans-serif;letter-spacing:.02em;color:rgba(23,33,27,.56)}
[data-rs-wa-typing]{display:flex;align-items:center;gap:8px;width:max-content;min-height:42px;padding:0 13px;border-radius:4px 14px 14px 14px;background:#FFFFFF;box-shadow:0 7px 18px -14px rgba(0,0,0,.7)}
[data-rs-wa-typing-copy]{font:500 12px/1 Manrope,sans-serif;color:#53645B}
[data-rs-wa-typing-dots]{display:flex;align-items:center;gap:3px}
[data-rs-wa-typing] i{display:block;width:5px;height:5px;border-radius:50%;background:#688578;animation:rs-chat-dot 1s ease infinite}
[data-rs-wa-typing] i:nth-child(2){animation-delay:.12s}
[data-rs-wa-typing] i:nth-child(3){animation-delay:.24s}
[data-rs-wa-message]{position:relative;display:block;width:min(92%,296px);padding:11px 10px 7px 12px;overflow:visible;border-radius:4px 14px 14px 14px;background:#FFFFFF;box-shadow:0 7px 18px -14px rgba(0,0,0,.7);opacity:0;visibility:hidden}
[data-rs-wa-message]::before{content:"";position:absolute;top:0;left:-8px;width:9px;height:12px;background:#FFFFFF;clip-path:polygon(100% 0,100% 100%,0 0);pointer-events:none}
[data-rs-wa-message] p{margin:0;font:500 13px/1.46 Manrope,sans-serif;color:#17211B;white-space:pre-line;text-wrap:pretty}
[data-rs-wa-message] p::after{content:"";display:inline-block;width:48px;height:1px}
[data-rs-wa-message-meta]{position:absolute;right:9px;bottom:7px;display:inline-flex;align-items:center;gap:3px;white-space:nowrap}
[data-rs-wa-time]{display:block;color:rgba(23,33,27,.52);font:500 9px/1 'Segoe UI',Arial,Helvetica,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:.01em}
[data-rs-wa-read]{display:block;width:17px;height:12px;fill:none;stroke:#53BDEB;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:translate3d(0,2px,0);transition:opacity 420ms cubic-bezier(.4,0,.2,1) 180ms,transform 420ms cubic-bezier(.4,0,.2,1) 180ms}
[data-rs-wa-bubble].is-message-ready [data-rs-wa-typing]{display:none}
[data-rs-wa-bubble].is-message-ready [data-rs-wa-message]{visibility:visible;animation:rs-chat-message-in 300ms cubic-bezier(.23,1,.32,1) both}
[data-rs-wa-bubble].is-message-ready [data-rs-wa-read]{opacity:1;transform:none}
[data-rs-wa-form]{display:grid;grid-template-columns:minmax(0,1fr) 46px;gap:8px;margin:0;padding:9px 10px 10px;border-top:1px solid rgba(23,33,27,.06);background:#EFEAE2}
[data-rs-wa-form] input{min-width:0;width:100%;height:46px;margin:0;padding:0 15px;border:1px solid rgba(23,33,27,.08);border-radius:999px;background:#FFFFFF;color:#17211B;font:500 13px/1 Manrope,sans-serif;outline:0;box-shadow:0 5px 16px -14px rgba(0,0,0,.7);transition:border-color .2s ease,box-shadow .2s ease}
[data-rs-wa-form] input::placeholder{color:rgba(23,33,27,.5)}
[data-rs-wa-form] input:focus{border-color:#25D366;box-shadow:0 0 0 3px rgba(37,211,102,.2)}
[data-rs-wa-form] input[aria-invalid="true"]{border-color:#B42318;box-shadow:0 0 0 3px rgba(180,35,24,.13)}
[data-rs-wa-send]{display:grid;place-items:center;width:46px;height:46px;padding:0;border:0;border-radius:50%;background:#25D366;color:#FFFFFF;box-shadow:0 8px 18px -12px rgba(37,211,102,.9);cursor:pointer;transition:transform .2s ease,filter .2s ease}
[data-rs-wa-send] svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
[data-rs-wa-error]{grid-column:1/-1;min-height:0;margin:0 6px;font:600 9px/1.35 Manrope,sans-serif;color:#8A1C13}
[data-rs-wa-error]:empty{display:none}
[data-rs-wa-fallback]{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;color:#075E54;font:700 12px/1 Manrope,sans-serif}
[data-rs-wa-button]{position:relative;display:inline-grid!important;place-items:center;width:52px!important;height:52px!important;min-height:52px;padding:0!important;border:0!important;border-radius:50%!important;background:#25D366!important;color:#FFFFFF!important;text-decoration:none;box-shadow:0 15px 34px -12px rgba(37,211,102,.72),0 7px 18px -12px rgba(0,0,0,.7)!important;cursor:pointer;transition:transform .34s cubic-bezier(.16,1,.3,1),filter .28s ease!important}
[data-rs-wa-button]::after{content:"";position:absolute;inset:-4px;box-sizing:content-box;border:2px solid rgba(105,241,148,.78);border-radius:inherit;opacity:0;transform:scale(.78);pointer-events:none}
[data-rs-wa-button]:focus-visible{outline:2px solid #F5F5F7;outline-offset:3px}
[data-rs-wa-shell][data-rs-wa-attention="running"] [data-rs-wa-button]::after{animation:rs-wa-attention-ring 640ms cubic-bezier(.16,1,.3,1) both}
[data-rs-wa-shell].is-chat-visible [data-rs-wa-button]{display:none!important}
[data-rs-wa-button] > svg{display:inline;flex:0 0 28px;width:28px;height:28px;fill:#FFFFFF;filter:drop-shadow(0 1px 1px rgba(0,75,41,.28))}
[data-rs-wa-button] > [data-rs-wa-notification]{position:absolute;top:-5px;right:-3px;display:grid!important;place-items:center;min-width:18px;height:18px;padding:0 4px;border:0;border-radius:999px;background:#E5261F;color:#FFFFFF;font:800 9px/1 Manrope,sans-serif;box-shadow:0 5px 12px -7px rgba(0,0,0,.8)}
[data-rs-wa-shell].is-notification-ready [data-rs-wa-notification]{animation:rs-wa-badge-in 260ms cubic-bezier(.16,1,.3,1) both}
[data-rs-wa-button] > [data-rs-wa-notification][hidden]{display:none!important}
[data-rs-wa-bubble] :where(button,input):focus-visible{outline:2px solid #075E54!important;outline-offset:2px!important}
@keyframes rs-wa-attention-ring{0%{opacity:0;transform:scale(.78)}22%{opacity:.72}100%{opacity:0;transform:scale(1.52)}}
@keyframes rs-wa-badge-in{0%{opacity:0;transform:translate3d(4px,4px,0) scale(.35)}68%{opacity:1;transform:translate3d(0,0,0) scale(1.18)}100%{opacity:1;transform:none}}
@keyframes rs-chat-dot{0%,60%,100%{transform:translateY(0);opacity:.42}30%{transform:translateY(-4px);opacity:1}}
@keyframes rs-chat-message-in{0%{opacity:0;transform:translate3d(0,7px,0)}100%{opacity:1;transform:none}}
@media (hover:hover) and (pointer:fine){
  [data-rs-wa-button]:hover{transform:translateY(-3px);filter:brightness(1.08)}
  [data-rs-wa-send]:hover{transform:translateY(-1px);filter:brightness(.94)}
  [data-rs-wa-close]:hover{background:rgba(23,33,27,.07);color:#17211B}
}
@media (max-width:1239px),(max-height:500px){
  body:has([data-menu][open]) [data-rs-wa-shell],body:has([data-menu][open]) [data-rs-wa-shell].is-available{opacity:0!important;visibility:hidden!important;transform:translate3d(0,8px,0)!important;pointer-events:none!important;transition:none!important}
}
@media (min-width:761px) and (max-width:1023px){
  [data-rs-wa-shell]{bottom:max(28px,env(safe-area-inset-bottom))!important}
}
@media (max-width:760px){
  [data-rs-wa-shell]{right:16px!important;bottom:max(16px,env(safe-area-inset-bottom))!important}
  [data-rs-wa-bubble]{width:min(320px,calc(100vw - 32px))}
  [data-rs-wa-button]{width:50px!important;height:50px!important;min-height:50px;justify-content:center!important}
  [data-rs-wa-button] > svg{width:27px;height:27px}
  [data-rs-wa-close],[data-rs-wa-send]{min-height:44px}
}
@media (max-height:500px){
  [data-rs-wa-button]{justify-content:center!important}
}
/* The launcher floats over the last row of the footer: the legal links keep clear of it wherever the page edge is closer
   than its 76 px (the legal row stacks on the left up to 760 px and needs nothing there). */
@media (min-width:761px){
  .site-footer__meta{padding-right:max(0px,calc(96px - max(32px,(100vw - 1216px) / 2)))}
}
@media (max-height:439px) and (orientation:landscape){
  [data-rs-wa-chatlog]{min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
}

/* 18. Reduced motion -------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  html.js [data-rv],html.js .works li[data-rv],html.js .phone--hero .notif,html.js .chart__dot--goal{opacity:1;transform:none;filter:none}
  html.js .chart__draw{clip-path:inset(-20% -6% -20% 0)}
  .phone--hero{transform:rotateY(-11deg) rotateX(5deg) rotateZ(1deg)}
  .final__panel{background-position:50% 50%}
  .wa-btn::before,.btn--wa::before,.menu__wa::before{background:#69F194}
  [data-rs-wa-shell],[data-rs-wa-bubble],[data-rs-wa-bubble].is-visible{transition:none!important;transform:none!important}
  [data-rs-wa-bubble],[data-rs-wa-bubble].is-visible,[data-rs-wa-bubble].is-message-ready [data-rs-wa-message],[data-rs-wa-shell].is-notification-ready [data-rs-wa-notification]{animation:none!important}
  [data-rs-wa-button],[data-rs-wa-send],[data-rs-wa-close],[data-rs-wa-form] input{transition:none!important}
  [data-rs-wa-button]::after{display:none!important}
  [data-rs-wa-typing]{display:none!important}
  [data-rs-wa-message]{visibility:visible!important;opacity:1!important}
  [data-rs-wa-read]{opacity:1!important;transform:none!important;transition:none!important}
}

/* Footer with the eleven service destinations, as on the home: the services column lists them in two sub-columns (six rows,
   filled downwards); four columns on desktop, two by two below 1100 px (the services side a little wider below 860 px, so no
   service name has to break) and one column below 700 px. Only the grids that carry the modifier change. */
.site-footer__links--cols{display:grid;grid-template-rows:repeat(6,auto);grid-auto-flow:column;grid-auto-columns:max-content;justify-content:start;gap:11px 28px}
.site-footer__grid--services{grid-template-columns:minmax(0,1.15fr) max-content minmax(0,.8fr) minmax(0,1.25fr)}
@media (max-width:1050px),(max-height:500px),(pointer:coarse){
  .site-footer__links--cols{row-gap:0}
}
@media (max-width:1099px){
  .site-footer__grid--services{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:859px){
  .site-footer__grid--services{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
}
@media (max-width:699px){
  .site-footer__grid--services{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:419px){
  .site-footer__links--cols{grid-template-rows:none;grid-auto-flow:row}
}
@media (prefers-reduced-motion:reduce){
  .nav__panel,.nav__toggle svg,.menu__toggle svg{transition:none}
  .nav__panel{transform:none}
}

/* WhatsApp chat field: 16px on phones so iOS does not zoom the page when the field takes focus. */
@media (max-width:760px){[data-rs-wa-form] #rs-wa-message{font-size:16px!important}}