/* Cool off-white + near-black, one accent: soft mauve */
:root{--mauve:#9E768F;--at:#7d5470;--tint:rgba(158,118,143,.16);
--bg:#f1f5f9;--alt:#e6ecf1;--surface:#fff;--ink:#121212;--muted:#5d646d;--line:#dde4ea;--dot:rgba(18,18,18,.07);--shadow:rgba(60,40,55,.14);
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#121012;--alt:#1a1718;--surface:#1f1c1d;--ink:#f3f0ee;--muted:#b0a8a5;--line:#363031;--dot:rgba(255,255,255,.07);--at:#c6a0b7;--shadow:rgba(0,0,0,.5);color-scheme:dark}}
:root[data-theme="dark"]{--bg:#121012;--alt:#1a1718;--surface:#1f1c1d;--ink:#f3f0ee;--muted:#b0a8a5;--line:#363031;--dot:rgba(255,255,255,.07);--at:#c6a0b7;--shadow:rgba(0,0,0,.5);color-scheme:dark}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1rem/1.65 "Geist",system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);background:var(--bg);z-index:60}
h1,h2,h3{font-family:"Space Grotesk","Geist",system-ui,sans-serif;font-weight:400;line-height:1.05;letter-spacing:-.04em;margin:0 0 .5em}
h1{font-size:clamp(2.7rem,10vw,5.6rem);line-height:1.02}
h2{font-size:clamp(2rem,6vw,3.6rem)}
h3{font-size:1.6rem;line-height:1.15;letter-spacing:-.03em}
p{margin:0 0 1em;max-width:60ch}
a{color:inherit}
:focus-visible{outline:3px solid var(--mauve);outline-offset:3px}
.wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 1.25rem}
.blk{padding:4rem 0}
.muted{color:var(--muted)}
em{font-style:normal;color:var(--at)}
/* buttons */
.btn{display:inline-flex;align-items:center;gap:.9rem;padding:.5rem .5rem .5rem 1.3rem;border-radius:14px;background:var(--mauve);color:#17100f;font:600 1rem "Geist",sans-serif;text-decoration:none;border:0;cursor:pointer;transition:background .15s,transform .15s,box-shadow .15s}
.btn::after{content:"→";width:38px;height:38px;border-radius:10px;background:#fff;color:#121212;display:grid;place-items:center;font-size:1.15rem;transition:transform .18s}
.btn:hover{background:#b08aa2;transform:translateY(-2px);box-shadow:0 10px 24px rgba(158,118,143,.38)}
.btn:hover::after{transform:translateX(4px)}
.btn.o{background:transparent;color:var(--ink);border:1px solid var(--ink);padding:.9rem 1.4rem}
.btn.o::after{display:none}
.btn.o:hover{background:var(--ink);color:var(--bg);box-shadow:none}
/* header: transparent, becomes a floating card on scroll */
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;padding:.6rem 0}
.bar{position:relative;display:flex;align-items:center;justify-content:space-between;height:64px;padding:0 .3rem 0 .2rem;border-radius:20px;transition:background .2s,box-shadow .2s,padding .2s}
header.stuck .bar{background:var(--surface);box-shadow:0 8px 32px var(--shadow);padding:0 .7rem 0 1rem}
.logo{font:600 1.45rem "Space Grotesk",sans-serif;text-decoration:none;letter-spacing:-.05em}
.burger{width:44px;height:44px;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:12px;font-size:1.2rem;cursor:pointer}
nav{position:absolute;left:0;right:0;top:calc(100% + 8px);background:var(--surface);border-radius:20px;box-shadow:0 18px 40px var(--shadow);display:none;flex-direction:column;padding:.6rem 1.2rem 1.2rem}
nav.open{display:flex}
nav a{padding:.85rem 0;text-decoration:none;font:500 1.2rem "Space Grotesk",sans-serif;border-bottom:1px solid var(--line)}
nav a.active{color:var(--at)}
nav a.cta{margin-top:1rem;justify-content:space-between;border:0;font:600 1rem "Geist",sans-serif;color:#17100f}
/* hero + page heads */
.hero,.phead{background-image:radial-gradient(var(--dot) 1px,transparent 1.4px);background-size:22px 22px;position:relative;overflow:hidden;margin-top:-76px;padding-top:76px}
#ring{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero{padding-bottom:3.5rem}
.hg{position:relative;display:grid;gap:1.6rem;padding-top:3rem}
.label{font:500 .85rem "Space Grotesk",sans-serif;letter-spacing:.18em;text-transform:uppercase;margin-bottom:1.2rem}
.hero h1 span.ln{display:block;overflow:hidden;padding-bottom:.08em}
.hero h1 span.ln>span{display:block;animation:up .8s cubic-bezier(.2,.8,.2,1) both}
.hero h1 span.ln:nth-child(2)>span{animation-delay:.12s;color:var(--mauve)}
@keyframes up{from{transform:translateY(105%)}to{transform:none}}
.hp p{font-size:1.1rem}
.hp .row{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.4rem}
.pills{display:flex;flex-wrap:wrap;gap:.6rem;align-content:flex-end}
.pills span{padding:.65rem 1.3rem;border-radius:999px;background:var(--alt);font-size:1rem;transition:background .15s,color .15s,transform .15s;cursor:default}
.pills span:hover{background:var(--mauve);color:#17100f;transform:translateY(-2px)}
.phead{padding-bottom:2.5rem}
.phead .wrap{padding-top:3.5rem}
.phead .lead{font-size:1.15rem;color:var(--muted);max-width:56ch;margin:0}
/* cards */
.grid{display:grid;gap:1.1rem}
.cd{position:relative;background:var(--surface);border-radius:24px;padding:1.8rem;box-shadow:0 2px 12px rgba(40,30,50,.05);display:flex;flex-direction:column}
.cd:hover{transform:translateY(-6px);box-shadow:0 22px 44px var(--shadow)}
.cd.dark{color:#fff;background:radial-gradient(90% 75% at var(--mx,0%) var(--my,0%),rgba(158,118,143,.5),transparent 62%),#151213}
.cd.dark .muted,.cd.dark .for{color:#c5bdb9}
.orb{width:84px;height:84px;margin-bottom:1.6rem;border-radius:50%;background:radial-gradient(var(--at) 1.3px,transparent 1.8px) 0 0/8px 8px;-webkit-mask-image:radial-gradient(circle at 35% 35%,#000 15%,transparent 72%);mask-image:radial-gradient(circle at 35% 35%,#000 15%,transparent 72%);transition:transform .3s}
.cd:hover .orb{transform:scale(1.14) rotate(10deg)}
.dark .orb{background-image:radial-gradient(#c6a0b7 1.3px,transparent 1.8px)}
.tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:auto;padding-top:1.4rem}
.tags span{padding:.4rem 1rem;border-radius:999px;background:var(--tint);color:var(--at);font-size:.9rem;font-weight:500;transition:background .15s,color .15s}
.tags span:hover{background:var(--mauve);color:#17100f}
.dark .tags span{background:rgba(255,255,255,.07);color:#eee;border:1px solid #3d3537}
.corner{position:absolute;top:-6px;right:-6px;width:52px;height:52px;border-radius:16px;background:var(--mauve);color:#17100f;display:grid;place-items:center;font-size:1.4rem;transition:transform .2s;border:6px solid var(--bg);box-sizing:content-box;width:46px;height:46px}
.cd:hover .corner{transform:rotate(-45deg)}
/* packages */
.alt{background:var(--alt)}
.pkg h3{margin-bottom:.2rem}
.pkg .q{color:var(--at);font-weight:600;margin-bottom:.3rem}
.pkg.dark .q{color:#c6a0b7}
.pkg .for{color:var(--muted);font-size:.95rem;margin:0 0 1.1rem}
.pkg .package-includes{font-size:.9rem;font-weight:600;margin:0 0 .4rem}
.pkg .pkg-subhead{font:600 .95rem/1.3 "Geist",sans-serif;margin:.8rem 0 .1rem}
.pkg ul{list-style:none;padding:0;margin:0 0 1.6rem;flex:1}
.pkg li{padding:.55rem 0 .55rem 1.5rem;border-top:1px solid var(--line);position:relative}
.pkg.dark li{border-color:#3d3537}
.pkg li::before{content:"";position:absolute;left:0;top:1.05rem;width:.6rem;height:.6rem;border-radius:2px;background:var(--mauve)}
.pkg .btn{align-self:flex-start}
#p-packages .website-packages .pkg{padding:1.35rem}
#p-packages .website-packages .orb{width:64px;height:64px;margin-bottom:1rem}
#p-packages .website-packages .pkg h3{font-size:1.4rem}
#p-packages .website-packages .pkg .for{margin-bottom:.75rem}
#p-packages .website-packages .pkg ul{margin-bottom:1rem}
#p-packages .website-packages .pkg li{padding:.35rem 0 .35rem 1.35rem}
#p-packages .website-packages .pkg li::before{top:.9rem}
#p-packages .marketing-packages .pkg{padding:1.35rem}
#p-packages .marketing-packages .orb{width:64px;height:64px;margin-bottom:1rem}
#p-packages .marketing-packages .pkg h3{font-size:1.4rem}
#p-packages .marketing-packages .pkg .for{font-size:.9rem;line-height:1.4;margin-bottom:.75rem}
#p-packages .marketing-packages .pkg ul{margin-bottom:1rem}
#p-packages .marketing-packages .pkg li{font-size:.9rem;line-height:1.35;padding:.32rem 0 .32rem 1.3rem}
#p-packages .marketing-packages .pkg li::before{top:.78rem}
#p-packages .pkg{transition:background .2s,color .2s,transform .2s,box-shadow .2s}
#p-packages .pkg:hover{color:#fff;background:radial-gradient(90% 75% at var(--mx,0%) var(--my,0%),rgba(158,118,143,.5),transparent 62%),#151213}
#p-packages .pkg:hover .q{color:#c6a0b7}
#p-packages .pkg:hover .for{color:#c5bdb9}
#p-packages .pkg:hover li{border-color:#3d3537}
#p-packages .pkg:hover .orb{background-image:radial-gradient(#c6a0b7 1.3px,transparent 1.8px)}
#p-home .pkg,#p-home .svc{transition:background .2s,color .2s,transform .2s,box-shadow .2s}
#p-home .pkg:hover,#p-home .svc:hover{color:#fff;background:radial-gradient(90% 75% at var(--mx,0%) var(--my,0%),rgba(158,118,143,.5),transparent 62%),#151213}
#p-home .pkg:hover .q{color:#c6a0b7}
#p-home .pkg:hover .for,#p-home .svc:hover .muted{color:#c5bdb9}
#p-home .pkg:hover li{border-color:#3d3537}
#p-home .svc:hover .tags span{background:rgba(255,255,255,.07);color:#eee;border:1px solid #3d3537}
#p-home .pkg:hover .orb,#p-home .svc:hover .orb{background-image:radial-gradient(#c6a0b7 1.3px,transparent 1.8px)}
#p-home .home-services{grid-auto-rows:1fr}
#p-home .home-services .svc{height:100%;padding:1.4rem}
#p-home .home-services .orb{width:68px;height:68px;margin-bottom:1.1rem}
#p-home .home-services h3{font-size:1.5rem}
#p-home .home-services .tags{padding-top:.9rem}
.head{display:flex;flex-direction:column;gap:.8rem;margin-bottom:2.2rem}
.center{text-align:center;margin-top:2.5rem}
.grp{margin:0 0 1.6rem}
/* services cards */
#p-services .blk > .wrap.grid{max-width:1240px;grid-auto-rows:1fr}
#p-services .svc{min-width:0;height:100%}
#p-services .svc{padding:1.25rem}
#p-services .svc .orb{width:64px;height:64px;margin-bottom:1rem}
.svc h3{font-size:1.9rem}
#p-services .svc h3{font-size:1.5rem}
#p-services .svc ul{margin:.65rem 0 0}
#p-services .svc li{padding:.4rem 0}
.svc.dark li{border-color:#3d3537}
#p-services .svc{transition:background .2s,color .2s,transform .2s,box-shadow .2s}
#p-services .svc:hover{color:#fff;background:radial-gradient(90% 75% at var(--mx,0%) var(--my,0%),rgba(158,118,143,.5),transparent 62%),#151213}
#p-services .svc:hover .muted{color:#c5bdb9}
#p-services .svc:hover li{border-color:#3d3537}
#p-services .svc:hover .orb{background-image:radial-gradient(#c6a0b7 1.3px,transparent 1.8px)}
/* work */
.wk h3{font-size:1.05rem;font-weight:500;letter-spacing:0;font-family:"Geist",sans-serif;padding-bottom:.9rem;border-bottom:1px solid var(--line);margin-bottom:1rem}
.wk p{font:400 1.3rem/1.3 "Space Grotesk",sans-serif;letter-spacing:-.02em;margin-bottom:2rem}
.mk{margin-top:auto;width:44px;height:44px;border-radius:12px;background:var(--tint);color:var(--at);display:grid;place-items:center;font:600 1rem "Space Grotesk",sans-serif}
/* contact */
.field{background:var(--surface);border-radius:24px;padding:1.8rem}
label{display:block;font-weight:600;margin:1rem 0 .3rem}
input,select,textarea{width:100%;padding:.85rem 1rem;border:1px solid var(--line);border-radius:12px;background:var(--bg);color:var(--ink);font:inherit;transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--mauve);box-shadow:0 0 0 3px var(--tint)}
textarea{min-height:130px;resize:vertical}
.ok{display:none;margin-top:1rem;padding:1rem;border-radius:12px;background:var(--tint);font-weight:600}
.info h3{color:#fff}.info p{margin:.4rem 0;color:#d7d2ce}
.whatsapp-link{display:inline-flex;align-items:center;gap:.45rem}
.whatsapp-icon{width:1.15em;height:1.15em;flex:none;color:#25d366}
/* services page */
.svcs{
  --mauve:#9E768F;--at:#7d5470;--tint:rgba(158,118,143,.16);
  --bg:#f1f5f9;--surface:#fff;--ink:#121212;--muted:#5d646d;--line:#dde4ea;
  --dot:rgba(18,18,18,.07);--shadow:rgba(60,40,55,.14);
  box-sizing:border-box;background:var(--bg);color:var(--ink);
  font:400 1rem/1.65 "Geist",system-ui,sans-serif;-webkit-font-smoothing:antialiased;
  background-image:radial-gradient(var(--dot) 1px,transparent 1.4px);background-size:22px 22px;
  padding:0 0 4rem;
}
@media (prefers-color-scheme:dark){
  .svcs{--bg:#121012;--surface:#1f1c1d;--ink:#f3f0ee;--muted:#b0a8a5;--line:#363031;--dot:rgba(255,255,255,.07);--at:#c6a0b7;--shadow:rgba(0,0,0,.5)}
}
.svcs *,.svcs *::before,.svcs *::after{box-sizing:border-box}
.svcs-wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 1.25rem}
.svcs-label{font:500 .85rem "Space Grotesk",sans-serif;letter-spacing:.18em;text-transform:uppercase;margin:0 0 1.2rem}
.svcs-title{font:400 clamp(2.2rem,7vw,4.2rem)/1.03 "Space Grotesk",sans-serif;letter-spacing:-.045em;margin:0 0 1.2rem;max-width:15ch}
.svcs-title em{font-style:normal;color:var(--mauve)}
.svcs-intro{font-size:1.1rem;color:var(--muted);max-width:56ch;margin:0 0 3rem}
.svcs-grid{display:grid;gap:1.1rem}
.svcs-card{position:relative;display:flex;flex-direction:column;overflow:hidden;background:var(--surface);border-radius:24px;padding:1.8rem;min-height:260px;box-shadow:0 2px 12px rgba(40,30,50,.05);transition:background .2s ease,color .2s ease,transform .2s ease,box-shadow .2s ease}
.svcs-card:hover{transform:translateY(-6px);box-shadow:0 22px 44px var(--shadow)}
.svcs-card::before{content:"";position:absolute;top:-14px;right:-14px;width:96px;height:96px;border-radius:50%;background:radial-gradient(var(--at) 1.3px,transparent 1.8px) 0 0/8px 8px;-webkit-mask-image:radial-gradient(circle at 35% 65%,#000 10%,transparent 70%);mask-image:radial-gradient(circle at 35% 65%,#000 10%,transparent 70%);opacity:.45;transition:opacity .25s,transform .3s}
.svcs-card:hover::before{opacity:1;transform:scale(1.15) rotate(10deg)}
.svcs-num{font:400 2.6rem/1 "Space Grotesk",sans-serif;letter-spacing:-.05em;color:var(--at);margin-bottom:auto;padding-bottom:2.2rem}
.svcs-card h3{font:400 1.45rem/1.15 "Space Grotesk",sans-serif;letter-spacing:-.03em;margin:0 0 .7rem}
.svcs-card p{margin:0;color:var(--muted);font-size:.98rem}
.svcs-card:hover{color:#fff;background:radial-gradient(90% 75% at var(--mx,0%) var(--my,0%),rgba(158,118,143,.5),transparent 62%),#151213}
.svcs-card:hover p{color:#c5bdb9}
.svcs-card:hover .svcs-num{color:#c6a0b7}
.svcs-card:hover::before{background-image:radial-gradient(#c6a0b7 1.3px,transparent 1.8px)}
@media (min-width:700px){.svcs-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.svcs{padding:0 0 6rem}.svcs-grid{grid-template-columns:repeat(4,1fr)}}
@media (prefers-reduced-motion:reduce){.svcs-card,.svcs-card::before{transition:none}}
/* footer */
footer{background:#121212;color:#fff;padding:3.5rem 0 1.5rem;margin-top:2rem}
.fgrid{display:grid;gap:2rem}
.big{font:400 clamp(2.2rem,8vw,3.8rem)/1.05 "Space Grotesk",sans-serif;letter-spacing:-.045em;margin-bottom:1.4rem}
footer h3{font:600 .95rem "Geist",sans-serif;margin-bottom:.6rem;color:#c6a0b7;letter-spacing:0}
footer a:not(.btn){display:block;text-decoration:none;padding:.2rem 0;color:#c9c4c0;transition:color .15s,transform .15s}
footer a:not(.btn):hover{color:#fff;transform:translateX(4px)}
.copy{border-top:1px solid #333;margin-top:2.5rem;padding-top:1rem;font-size:.85rem;color:#a39e9a}
/* reveal on scroll */
.js .rv{opacity:0;transform:translateY(16px);transition:opacity .45s ease,transform .45s ease}
.js .rv.in{opacity:1;transform:none;transition:opacity .45s ease,transform .2s ease,box-shadow .2s ease}
.js .rv.in:hover{transform:translateY(-6px)}
@media (min-width:700px){
.grid.c2,.grid.c3,.grid.c4{grid-template-columns:repeat(2,1fr)}
.fgrid{grid-template-columns:2fr 1fr 1fr}
}
@media (min-width:960px){
.burger{display:none}
nav{position:static;display:flex;flex-direction:row;align-items:center;gap:2rem;padding:0;background:none;box-shadow:none;border-radius:0}
nav a{border:0;padding:.3rem 0;font:500 1rem "Geist",sans-serif;position:relative}
nav a:not(.cta)::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--mauve);transform:scaleX(0);transform-origin:left;transition:transform .18s}
nav a:not(.cta):hover::after,nav a.active::after{transform:scaleX(1)}
nav a.active{color:var(--ink)}
nav a.cta{margin:0;padding:.35rem .35rem .35rem 1.2rem}
nav a.cta::after{width:34px;height:34px}
.hero{padding-bottom:5rem}
.hg{grid-template-columns:1.25fr .75fr;grid-template-areas:"hl hl" "pills hp";align-items:end;min-height:600px;padding-top:4rem;gap:2rem 3rem}
.hl{grid-area:hl;align-self:start}.pills{grid-area:pills}.hp{grid-area:hp}
.blk{padding:6rem 0}
.split{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start}
.grid.c3{grid-template-columns:repeat(3,1fr)}
.grid.c4{grid-template-columns:repeat(4,1fr)}
.head{flex-direction:row;justify-content:space-between;align-items:end}
.contact{display:grid;grid-template-columns:1.2fr .8fr;gap:1.5rem}
}
@media (prefers-reduced-motion:reduce){.hero h1 span.ln>span{animation:none}.js .rv{opacity:1;transform:none;transition:none}.btn,.cd,.orb{transition:none}}