@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;src:url('./assets/dm-sans-400.ttf') format('truetype')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:500;font-display:swap;src:url('./assets/dm-sans-500.ttf') format('truetype')}
@font-face{font-family:'Nunito Sans';font-style:normal;font-weight:800;font-display:swap;src:url('./assets/nunito-sans-800.ttf') format('truetype')}
@font-face{font-family:'Nunito Sans';font-style:normal;font-weight:900;font-display:swap;src:url('./assets/nunito-sans-900.ttf') format('truetype')}
@font-face{font-family:Kalam;font-style:normal;font-weight:400;font-display:swap;src:url('./assets/kalam-400.ttf') format('truetype')}
@font-face{font-family:Kalam;font-style:normal;font-weight:700;font-display:swap;src:url('./assets/kalam-700.ttf') format('truetype')}
@font-face{font-family:Bangers;font-style:normal;font-weight:400;font-display:swap;src:url('./assets/bangers-400.ttf') format('truetype')}
@font-face{font-family:Itim;font-style:normal;font-weight:400;font-display:swap;src:url('./assets/itim-400.ttf') format('truetype')}
@font-face{font-family:'Titan One';font-style:normal;font-weight:400;font-display:swap;src:url('./assets/titan-one-400.ttf') format('truetype')}

*{box-sizing:border-box}
:root{font-family:'DM Sans',Arial,sans-serif;color-scheme:light;font-synthesis:none}
body{margin:0;min-width:280px;min-height:100svh;display:grid;place-items:center;background:var(--background);color:var(--ink)}
body[data-edition=cream]{--background:#f9f6ef;--ink:#090909;--body-ink:#272831;--accent:#575caa;--card-1:#f9c2c3;--card-2:#d1e6fd;--card-3:#cbdcbb;--card-4:#fedabb;--label-bg:#091e44;--label-ink:#fff;--cta-bg:#081a3f;--badge-bg:#3b407f;--badge-ink:white;--badge-border:#070707;--shadow:#302d2a22;--check-1:#edc1bd;--check-2:#c7e4fe;--check-3:#cddfbc;--doodle:#050505;--doodle-fill:transparent}
body[data-edition=yellow]{--background:#fee240;--ink:#030303;--body-ink:#12120d;--accent:#ff009b;--card-1:#fb56bf;--card-2:#017efc;--card-3:#40f85c;--card-4:#fd8c2e;--label-bg:#fffef8;--label-ink:#050505;--cta-bg:#050505;--badge-bg:#ff36b7;--badge-ink:#030303;--badge-border:#030303;--shadow:#9581004a;--check-1:#ff009b;--check-2:#ff009b;--check-3:#ff009b;--doodle:#030303;--doodle-fill:transparent}
body[data-edition=navy]{color-scheme:dark;--background:#0d0e3c;--ink:#fff;--body-ink:#f4f3ff;--accent:#6b60cc;--card-1:#2f3684;--card-2:#0d295b;--card-3:#4044a5;--card-4:#2a1e68;--label-bg:#fff;--label-ink:#0c0c36;--cta-bg:#0c0c3b;--badge-bg:#0e0e3b;--badge-ink:white;--badge-border:#fff;--shadow:#00000055;--check-1:#655ac5;--check-2:#655ac5;--check-3:#655ac5;--doodle:#fff;--doodle-fill:transparent}
/* Fill the browser edges instead of letterboxing the reference artboard.
   A minimum canvas height keeps short, wide windows from overlapping content. */
.page{width:100%;container-type:inline-size;position:relative;isolation:isolate;overflow:hidden}
.composition{position:relative;width:100%;height:max(100svh,47cqw)}
.page::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23000' opacity='.15' filter='url(%23n)' d='M0 0h220v220H0z'/%3E%3C/svg%3E");opacity:.2;mix-blend-mode:multiply}
[data-edition=navy] .page::before{opacity:.1}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
svg{display:block}
.backdrop{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:-1}
.wordmark{--wordmark-stroke:#050505;--wordmark-edge:var(--accent);--wordmark-stroke-width:.78cqw;--wordmark-edge-width:.12cqw;position:absolute;left:15.65%;top:6.25%;width:67%;height:16.8%;margin:0;display:flex;align-items:center;justify-content:center;white-space:nowrap;font:400 9cqw/1 'Titan One','Nunito Sans',sans-serif;letter-spacing:-.055em;color:#fff;-webkit-text-stroke:var(--wordmark-stroke-width) var(--wordmark-stroke);paint-order:stroke fill;text-shadow:0 .2cqw 0 #050505;filter:drop-shadow(var(--wordmark-edge-width) 0 0 var(--wordmark-edge)) drop-shadow(calc(0px - var(--wordmark-edge-width)) 0 0 var(--wordmark-edge)) drop-shadow(0 var(--wordmark-edge-width) 0 var(--wordmark-edge)) drop-shadow(0 calc(0px - var(--wordmark-edge-width)) 0 var(--wordmark-edge))}
[data-edition=yellow] .wordmark{--wordmark-stroke:#fffef8;--wordmark-edge:#030303;color:#030303;text-shadow:none}
.brand-underline{position:absolute;left:21.45%;top:23.3%;width:56.5%;height:4.3%;color:var(--accent)}
.brand-rays{position:absolute;left:11.5%;top:5.8%;width:7%;height:11%;color:var(--accent)}
.headline{position:absolute;top:28.1%;left:16%;width:68%;margin:0;text-align:center;font:700 2.15cqw/1.25 Kalam,cursive;letter-spacing:.035em;transform:skewX(7deg);white-space:nowrap}
.description{position:absolute;top:32.7%;left:10%;width:80%;margin:0;color:var(--body-ink);text-align:center;font-size:1.68cqw;line-height:1.4;letter-spacing:-.025em;white-space:nowrap}
.coming-soon{position:absolute;left:82.6%;top:14.8%;width:15.4%;height:20.5%;margin:0;transform:rotate(-9deg);color:var(--badge-ink)}
.coming-soon svg{width:100%;height:100%;overflow:hidden}
.badge-rays-top,.badge-rays-bottom{position:absolute;width:6%;height:6.2%;color:var(--doodle)}
.badge-rays-top{left:83.7%;top:8.8%;transform:rotate(-13deg)}
.badge-rays-bottom{left:93.8%;top:29.5%;transform:rotate(91deg)}
[data-edition=cream] .badge-rays-top,[data-edition=cream] .badge-rays-bottom{color:var(--accent);filter:drop-shadow(2px 2px 0 #050505)}
.features{position:absolute;left:4.1%;top:39.8%;width:91.9%;height:31.2%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.1%;list-style:none;margin:0;padding:0}
.feature{position:relative;min-width:0;border:.37cqw solid #080808;border-radius:1.9cqw;box-shadow:.45cqw .85cqw .05cqw var(--shadow);background:var(--card);overflow:hidden}
.feature:nth-child(1){--card:var(--card-1)}
.feature:nth-child(2){--card:var(--card-2)}
.feature:nth-child(3){--card:var(--card-3)}
.feature:nth-child(4){--card:var(--card-4)}
.feature::before{content:'';position:absolute;inset:0;border-radius:inherit;background:radial-gradient(ellipse at 55% 40%,#ffffff15,transparent 75%);pointer-events:none}
.feature-art{position:absolute;left:9%;top:5%;width:82%;height:65%;overflow:hidden}
.feature h2{position:absolute;left:6%;right:6%;bottom:7%;height:20%;margin:0;display:flex;align-items:center;justify-content:center;border-radius:8cqw;background:var(--label-bg);color:var(--label-ink);font:900 1.92cqw/1.05 'Nunito Sans',Arial,sans-serif;letter-spacing:-.045em;white-space:nowrap;padding:0 .4cqw}
.contact{position:absolute;left:22.9%;top:75.25%;width:54.35%;height:10.6%;border:.38cqw solid #070707;border-radius:2.2cqw;background:#fffefb;box-shadow:.4cqw .75cqw .05cqw var(--shadow);padding:.45cqw;display:flex;gap:.5cqw;align-items:stretch;text-decoration:none;color:#3c424c;outline-offset:.6cqw;transition:transform .15s ease,box-shadow .15s ease}
.phone{flex:1;display:flex;align-items:center;gap:1.15cqw;padding-left:1.45cqw;font-size:1.8cqw;font-weight:500;white-space:nowrap;letter-spacing:-.03em}
.whatsapp{width:2.65cqw;height:2.65cqw;flex:none;color:#101018}
.contact-action{flex:0 0 39.7%;border-radius:1.45cqw;background:var(--cta-bg);color:white;display:flex;align-items:center;justify-content:center;gap:1.2cqw;padding:0 1.4cqw;font:900 1.8cqw/1 'Nunito Sans',Arial,sans-serif;letter-spacing:-.025em;white-space:nowrap}
.contact-action svg{width:2.1cqw;flex:none}
.contact:hover{transform:translateY(-.18cqw);box-shadow:.4cqw .95cqw .05cqw var(--shadow)}
.contact:active{transform:translateY(.15cqw)}
.contact:focus-visible{outline:.3cqw solid var(--accent)}
.cta-rays{position:absolute;top:75.4%;width:3.5%;height:10.9%;color:var(--accent);overflow:visible}
.cta-rays.left{left:18.5%}
.cta-rays.right{left:79.3%;transform:scaleX(-1)}
.benefits{position:absolute;left:27.2%;top:89%;width:45%;display:flex;align-items:center;justify-content:space-between;gap:1.8cqw;padding:0;margin:0;list-style:none;white-space:nowrap}
.benefits li{display:flex;gap:.9cqw;align-items:center;font:400 1.65cqw/1.2 Kalam,cursive;color:var(--body-ink)}
.check{display:flex;justify-content:center;align-items:center;width:2.55cqw;height:2.55cqw;flex:none;border-radius:50%;background:var(--check);color:#030303}
.check svg{width:1.55cqw;height:1.55cqw}
.benefits li:nth-child(1){--check:var(--check-1)}
.benefits li:nth-child(2){--check:var(--check-2)}
.benefits li:nth-child(3){--check:var(--check-3);position:relative}
.benefit-underline{position:absolute;left:41%;top:105%;width:63%;height:36%;color:var(--accent)}
.crown{position:absolute;left:1.5%;top:76.1%;width:12.9%;height:20%;color:var(--doodle);overflow:visible}
.loop{position:absolute;right:0;bottom:3%;width:12.5%;height:20%;color:var(--doodle);overflow:visible}
.crown-rays{position:absolute;left:10.6%;top:76.4%;width:5.8%;height:7.5%;color:var(--doodle)}
.loop-rays{position:absolute;right:1.7%;top:78.4%;width:4.4%;height:5.8%;color:var(--doodle)}
[data-edition=cream] .crown-rays,[data-edition=cream] .loop-rays{color:var(--accent);filter:drop-shadow(2px 2px 0 #000)}
[data-edition=navy] .wordmark{left:15.4%;top:4.4%;width:68%;height:18.2%;text-shadow:0 .18cqw 0 #c9cbd6,0 .4cqw 0 #050505}
[data-edition=navy] .brand-underline{left:21.4%;top:22.1%;width:57%;height:6.3%;color:white}
[data-edition=navy] .brand-rays{color:white}
[data-edition=navy] .coming-soon{top:15.1%;left:82.8%;width:14.8%;height:20.2%}
[data-edition=navy] .headline{top:28.3%;font-size:2.32cqw;letter-spacing:.03em;text-shadow:-.15cqw -.15cqw #000,.15cqw .15cqw #000,.2cqw .25cqw .2cqw #000}
[data-edition=navy] .description{top:33%;font-size:1.71cqw}
[data-edition=navy] .features{left:3.5%;top:39.1%;width:93.2%;height:31.9%;gap:1.1%}
[data-edition=navy] .feature{border-radius:2.3cqw;box-shadow:inset .17cqw .21cqw .1cqw #aaa4ff70,.3cqw .8cqw .6cqw #0005}
[data-edition=navy] .feature-art{top:5%;height:67%}
[data-edition=navy] .feature h2{bottom:7.5%;height:19.5%;font-size:2cqw}
[data-edition=navy] .contact{left:21.5%;top:75.1%;width:57.3%;height:11.1%;border-radius:2.8cqw;box-shadow:.25cqw .5cqw .6cqw #524c9144;background:white}
[data-edition=navy] .contact-action{border-radius:1.9cqw}
[data-edition=navy] .cta-rays.left{left:17.2%}
[data-edition=navy] .cta-rays.right{left:80%}
[data-edition=navy] .benefits{left:26%;top:88.8%;width:47%}
[data-edition=navy] .crown{top:79%;height:17%;width:11.6%;filter:drop-shadow(.2cqw .3cqw .15cqw #000);color:white}
[data-edition=navy] .loop{filter:drop-shadow(.2cqw .3cqw .15cqw #000);color:white}
[data-edition=navy] .check{color:#0d0e3c}

/* Continuous loops bring the illustrated characters to life without
   changing layout. Only transforms/opacity animate; reduced motion is static. */
.wordmark{animation:wordmark-float 7.6s ease-in-out infinite}
.brand-underline{transform-origin:center;animation:underline-sway 7.6s ease-in-out infinite}
.feature{transform-origin:50% 80%;animation:card-float 7.8s ease-in-out infinite}
.feature:nth-child(2){animation-duration:8.6s;animation-delay:-2s}
.feature:nth-child(3){animation-duration:7.4s;animation-delay:-4s}
.feature:nth-child(4){animation-duration:9.2s;animation-delay:-1s}
.backdrop path{transform-box:fill-box;transform-origin:center;animation:backdrop-drift 16s ease-in-out infinite alternate}
.backdrop path:nth-child(even){animation-delay:-8s;animation-direction:alternate-reverse}
.contact::before{content:'';position:absolute;inset:-.7cqw;border:.14cqw solid var(--accent);border-radius:inherit;pointer-events:none;opacity:0;animation:contact-ripple 6.4s ease-out infinite}
.contact-action{position:relative;overflow:hidden;isolation:isolate}
.contact-action::after{content:'';position:absolute;inset:-70%;pointer-events:none;background:linear-gradient(110deg,transparent 40%,#fff3 50%,transparent 60%);opacity:0;transform:translateX(-90%);animation:cta-shine 8.5s ease-in-out infinite}
.coming-soon{--badge-rest:-9deg;transform-origin:50% 12%;animation:sign-swing 6.8s ease-in-out infinite}
.feature-art{transform-origin:center;will-change:transform}
.feature:nth-child(1) .feature-art{animation:camera-rock 6s ease-in-out infinite}
.feature:nth-child(2) .feature-art{animation:robot-float 4.3s ease-in-out infinite}
.feature:nth-child(3) .feature-art{animation:gear-turn 7.2s ease-in-out infinite}
.feature:nth-child(4) .feature-art{animation:growth-bounce 5.6s ease-in-out infinite}
.feature::after{content:'';position:absolute;inset:-35%;pointer-events:none;background:linear-gradient(110deg,transparent 34%,#ffffff00 42%,#ffffff38 49%,#ffffff00 56%,transparent 65%);transform:translateX(-90%);animation:card-shine 10s ease-in-out infinite}
.feature:nth-child(2)::after{animation-delay:1.5s}
.feature:nth-child(3)::after{animation-delay:3s}
.feature:nth-child(4)::after{animation-delay:4.5s}
.brand-rays path{transform-box:fill-box;transform-origin:bottom right;animation:rays-pop 3.8s ease-in-out infinite}
.badge-rays-top,.badge-rays-bottom,.crown-rays,.loop-rays{animation:doodle-twinkle 4.8s ease-in-out infinite}
.badge-rays-bottom,.loop-rays{animation-delay:1.3s}
.cta-rays path{transform-box:fill-box;transform-origin:center;animation:cta-rays-pulse 3.3s ease-in-out infinite}
.cta-rays.right path{animation-delay:.3s}
.crown{transform-origin:50% 85%;animation:crown-rock 6.2s ease-in-out infinite}
.loop{transform-origin:80% 85%;animation:loop-sway 7s ease-in-out infinite}
.contact-action svg{animation:arrow-nudge 2.8s ease-in-out infinite}
.whatsapp{transform-origin:center;animation:phone-wiggle 8s ease-in-out infinite}
.check{animation:check-pop 7.2s ease-in-out infinite}
.benefits li:nth-child(2) .check{animation-delay:.2s}
.benefits li:nth-child(3) .check{animation-delay:.4s}
@keyframes sign-swing{0%,100%{transform:rotate(calc(var(--badge-rest) - 2deg))}50%{transform:rotate(calc(var(--badge-rest) + 2deg))}}
@keyframes wordmark-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-.28cqw)}}
@keyframes underline-sway{0%,100%{transform:translateY(0) rotate(-.3deg)}50%{transform:translateY(-.15cqw) rotate(.3deg)}}
@keyframes card-float{0%,100%{transform:translateY(.12cqw) rotate(-.35deg)}50%{transform:translateY(-.32cqw) rotate(.35deg)}}
@keyframes backdrop-drift{from{transform:translate(0,0) scale(1)}to{transform:translate(1%,2%) scale(1.08)}}
@keyframes contact-ripple{0%,40%,100%{transform:scale(1);opacity:0}50%{transform:scale(1);opacity:.5}80%{transform:scale(1.035,1.2);opacity:0}}
@keyframes cta-shine{0%,55%,100%{transform:translateX(-90%);opacity:0}60%{opacity:1}82%{transform:translateX(90%);opacity:0}}
@keyframes camera-rock{0%,100%{transform:rotate(-3deg)}50%{transform:translateY(-3%) rotate(3deg)}}
@keyframes robot-float{0%,100%{transform:translateY(2%) rotate(-2deg)}50%{transform:translateY(-7%) rotate(2deg)}}
@keyframes gear-turn{0%,100%{transform:rotate(-10deg)}50%{transform:rotate(11deg)}}
@keyframes growth-bounce{0%,60%,100%{transform:translateY(0)}25%{transform:translateY(-7%) rotate(2deg)}40%{transform:translateY(-1%)}}
@keyframes card-shine{0%,55%{transform:translateX(-90%);opacity:0}60%{opacity:.6}80%,100%{transform:translateX(90%);opacity:0}}
@keyframes rays-pop{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.88);opacity:.65}}
@keyframes doodle-twinkle{0%,100%{opacity:1}50%{opacity:.5}}
@keyframes cta-rays-pulse{0%,100%{transform:scale(.9);opacity:.7}50%{transform:scale(1.14);opacity:1}}
@keyframes crown-rock{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(3deg) translateY(-2%)}}
@keyframes loop-sway{0%,100%{transform:rotate(0)}50%{transform:rotate(-4deg)}}
@keyframes arrow-nudge{0%,60%,100%{transform:translateX(0)}30%{transform:translateX(15%)}}
@keyframes phone-wiggle{0%,78%,100%{transform:rotate(0)}82%,90%{transform:rotate(-9deg)}86%,94%{transform:rotate(9deg)}}
@keyframes check-pop{0%,80%,100%{transform:scale(1)}86%{transform:scale(1.1)}92%{transform:scale(.97)}}

@media(max-width:760px){
 body{display:block}
 .page{width:100%;min-height:100svh;overflow:hidden}
 .composition{height:auto;min-height:100svh;display:flex;flex-direction:column;align-items:center;padding:30px 20px 36px;position:relative}
 header{width:100%;container-type:inline-size}
 .wordmark,[data-edition=navy] .wordmark{--wordmark-stroke-width:1.05cqw;--wordmark-edge-width:.22cqw;position:relative;top:auto;left:auto;width:100%;height:auto;min-height:14cqw;margin:12px 0 0;z-index:1;font-size:13cqw;line-height:1.1}
 .brand-rays{left:2%;top:1.5%;width:12%;height:7%;transform:translateY(-15%)}
 .brand-underline,[data-edition=navy] .brand-underline{position:relative;left:auto;top:auto;width:82%;height:18px;margin-top:2px}
 .coming-soon,[data-edition=navy] .coming-soon{position:relative;left:auto;top:auto;width:114px;height:76px;flex:none;margin:4px 0 2px auto;--badge-rest:-6deg;transform:rotate(-6deg)}
 .badge-rays-top,.badge-rays-bottom{display:none}
 .headline,[data-edition=navy] .headline{position:relative;left:auto;top:auto;width:100%;font-size:clamp(14px,4.1vw,24px);letter-spacing:0;line-height:1.5;margin:6px 0 0;white-space:normal}
 .description,[data-edition=navy] .description{position:relative;left:auto;top:auto;width:100%;max-width:36ch;font-size:15px;line-height:1.4;letter-spacing:-.025em;white-space:normal;margin:3px 0 22px;text-wrap:balance}
 .features,[data-edition=navy] .features{position:relative;left:auto;top:auto;width:100%;height:auto;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 12px}
 .feature,[data-edition=navy] .feature{border:3px solid #080808;border-radius:18px;aspect-ratio:1.14;box-shadow:3px 6px 0 var(--shadow)}
 [data-edition=navy] .feature{box-shadow:inset 2px 2px 1px #aaa4ff70,3px 6px 3px #0005}
 .feature-art,[data-edition=navy] .feature-art{left:5%;width:90%;top:3%;height:70%}
 .feature h2,[data-edition=navy] .feature h2{left:5%;right:5%;height:21%;bottom:6%;font-size:clamp(11px,3.35vw,23px);letter-spacing:-.055em;border-radius:50px;padding:0 4px}
 .contact,[data-edition=navy] .contact{position:relative;left:auto;top:auto;width:100%;height:auto;margin-top:30px;min-height:114px;padding:6px;gap:5px;flex-direction:column;border:3px solid #070707;border-radius:21px;box-shadow:4px 7px 0 var(--shadow);outline-offset:5px}
 .phone{flex:auto;justify-content:center;gap:11px;padding:7px 5px;font-size:23px;line-height:1.2}
 .whatsapp{width:28px;height:28px}
 .contact-action,[data-edition=navy] .contact-action{flex:auto;min-height:46px;border-radius:13px;gap:20px;font-size:20px;padding:10px 15px}
 .contact-action svg{width:24px}
 .contact::before{inset:-6px;border-width:2px}
 .contact:focus-visible{outline-width:3px}
 .contact:hover{transform:translateY(-2px);box-shadow:4px 9px 0 var(--shadow)}
 .cta-rays{display:none}
 .benefits,[data-edition=navy] .benefits{position:relative;left:auto;top:auto;width:auto;max-width:100%;margin-top:26px;gap:10px 17px;justify-content:center;flex-wrap:wrap}
 .benefits li{gap:7px;font-size:16px}
 .check{width:23px;height:23px}
 .check svg{width:15px;height:15px}
 .benefit-underline{height:8px;top:90%}
 .crown,[data-edition=navy] .crown{position:relative;left:auto;top:auto;width:70px;height:65px;margin-top:23px;align-self:flex-start}
 .loop{right:-8px;bottom:20px;width:86px;height:90px}
 .crown-rays{left:22%;top:auto;bottom:78px;width:32px;height:27px}
 .loop-rays{right:5%;top:auto;bottom:96px;width:27px;height:26px}
 .backdrop{height:100%;object-fit:cover}
}
@media(min-width:540px) and (max-width:760px){.composition{padding:35px 35px}.feature h2,[data-edition=navy] .feature h2{font-size:3.2vw}.description,[data-edition=navy] .description{font-size:19px;max-width:38ch}.phone{font-size:26px}.benefits li{font-size:20px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.feature-art{will-change:auto}.feature::after{display:none}}