:root{--hero-blue:#2924ff;--hero-pink:#f53ce5;--header-h:90px}
html{scroll-behavior:smooth}.site-header{height:var(--header-h);position:relative;z-index:10;background:var(--hero-blue)}
.main-nav{height:100%;width:73.9%;max-width:1250px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:24px;padding-right:3%}
.brand{display:block;flex-shrink:0}.brand img{display:block;width:46px;height:57px}.menu-link{border:0;padding:10px 0;background:transparent;color:#fff;font-size:24px;font-weight:400;white-space:nowrap;cursor:pointer}.menu-link:hover{color:#ffcafa}.plans-link{border:0;background:var(--hero-pink);color:white;font-family:var(--pixel);font-size:34px;line-height:1;padding:3px 23px 6px;cursor:pointer;transition:background .2s;text-decoration:none}.plans-link:hover{background:#d81dcb}
a:focus-visible{outline:3px solid var(--hero-pink);outline-offset:6px}.plans-link:focus-visible{outline-color:white}
.hero{position:relative;isolation:isolate;height:calc(100svh - var(--header-h));min-height:640px;overflow:hidden;background:white;color:var(--hero-blue);scroll-margin-top:0}
.hero-title{position:absolute;z-index:3;left:12.25%;top:9.7%;margin:0;font-weight:350;letter-spacing:.005em;font-size:clamp(36px,3.7vw,64px);line-height:.965}
.hero-services{position:absolute;left:0;top:41%;width:37.2%;background:var(--hero-blue);color:white;padding:23px 20px 25px 12.75%;z-index:3;transform-origin:left center}
.hero-services ul{list-style:none;padding:0;margin:0;font:30px/1.07 var(--pixel);white-space:nowrap}
.start-link{position:absolute;left:0;top:69.8%;width:37.2%;height:58px;display:flex;align-items:center;justify-content:center;gap:23px;background:var(--hero-pink);color:white;text-decoration:none;font:30px/1 var(--pixel);z-index:3;transition:background .2s}
.start-link:hover{background:#dc23cf}.start-arrow{width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:11px solid white;transition:transform .2s}.start-link:hover .start-arrow{transform:translateX(5px)}
/* Shared image coordinates keep the rotation pivot on the eye at all sizes. */
.hero-art{position:absolute;z-index:2;left:43.5%;top:35%;width:38.5%;aspect-ratio:1614/974;--eye-x:55.45%;--eye-y:18.9%;pointer-events:none}
.mascot{position:relative;z-index:2;width:100%;height:auto;display:block;image-rendering:pixelated}
.aura-anchor{position:absolute;left:var(--eye-x);top:var(--eye-y);width:77.5%;aspect-ratio:81584.02/81638.57;transform:translate(-50%,-50%);z-index:1}
.aura{display:block;width:100%;height:100%;animation:aura-orbit 35s linear infinite;transform-origin:50% 50%;will-change:transform}
.sara-ribbon{position:absolute;z-index:0;left:81.8%;top:0;bottom:0;width:15%;overflow:hidden;pointer-events:none}
.sara-ribbon-track{display:flex;flex-direction:column;width:100%;animation:sara-rise 48s linear infinite;will-change:transform}
.sara-ribbon img{display:block;width:100%;height:auto;flex-shrink:0}
.page-loader{display:none}.js .page-loader{position:fixed;inset:0;z-index:100;background:var(--hero-blue);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .45s ease,visibility .45s}
.js.is-loading .page-loader{opacity:1;visibility:visible}.page-loader img{width:60px;height:auto}.loader-track{width:96px;height:4px;background:#ffffff38;overflow:hidden}.loader-track span{display:block;width:40%;height:100%;background:var(--hero-pink);animation:loading-slide .8s ease-in-out infinite alternate}
.js.is-loading .hero-title,.js.is-loading .hero-services,.js.is-loading .start-link,.js.is-loading .hero-art{opacity:0}
.js.is-ready .hero-title{animation:hero-reveal .8s .12s cubic-bezier(.16,1,.3,1) both}.js.is-ready .hero-services{animation:rail-reveal .85s .24s cubic-bezier(.16,1,.3,1) both}.js.is-ready .start-link{animation:rail-reveal .85s .34s cubic-bezier(.16,1,.3,1) both}.js.is-ready .hero-art{animation:hero-reveal 1s .25s cubic-bezier(.16,1,.3,1) both}
.js.is-loading .aura,.js.is-loading .sara-ribbon-track,.hero.is-offscreen .aura,.hero.is-offscreen .sara-ribbon-track{animation-play-state:paused}
.skip-link{position:fixed;top:8px;left:8px;z-index:120;padding:12px;background:white;color:var(--hero-blue);transform:translateY(-150%)}.skip-link:focus{transform:translateY(0)}
.pending-dialog{position:fixed;max-width:min(460px,90vw);border:0;padding:38px;color:var(--hero-blue);box-shadow:10px 10px 0 var(--hero-pink)}.pending-dialog::backdrop{background:#10095570}.pending-dialog h2{margin:0 20px 20px 0;font-weight:500;font-size:28px}.pending-dialog p{font-size:18px;line-height:1.5}.dialog-close{position:absolute;right:12px;top:8px;border:0;background:none;font-size:30px;color:var(--hero-blue);cursor:pointer}.dialog-back{border:0;background:var(--hero-blue);padding:12px 24px;color:white;font:22px var(--pixel);cursor:pointer}
@keyframes aura-orbit{to{transform:rotate(360deg)}}
@keyframes sara-rise{to{transform:translateY(-50%)}}
@keyframes loading-slide{from{transform:translateX(-100%)}to{transform:translateX(250%)}}
@keyframes hero-reveal{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}
@keyframes rail-reveal{from{opacity:0;transform:translateX(-55px)}to{opacity:1;transform:translateX(0)}}
/* Compact desktop composition, aligned to the same 960px content column. */
:root{--header-h:97px;--content-left:max(32px,calc((100% - 960px)/2))}
.main-nav{width:calc(100% - 64px);max-width:960px;padding:0;gap:24px}
.brand img{width:43px;height:53px}.menu-link{font-size:20px}.plans-link{font-size:30px;padding:4px 20px 6px}
.hero{min-height:660px}.hero-title{left:var(--content-left);top:14.3%;font-size:clamp(32px,3.05vw,48px);line-height:.98}
.hero-services{top:41%;width:39.3%;padding:37px 20px 39px var(--content-left)}.hero-services ul{font-size:28px;line-height:1}
.start-link{width:39.3%;height:62px;font-size:28px;padding-left:var(--content-left);justify-content:flex-start;gap:22px}
.hero-art{left:43.5%;top:35%;width:37.5%}
.mobile-break,.mobile-aura,.menu-toggle{display:none}
.mobile-menu{position:absolute;top:100%;left:0;right:0;background:var(--hero-blue);padding:16px 24px 24px;box-shadow:0 12px 0 #f53ce5;z-index:20}
.mobile-menu[hidden]{display:none}.mobile-menu button{display:block;width:100%;padding:13px 0;text-align:left;background:none;border:0;color:white;font-size:18px;cursor:pointer}
@media(min-width:601px) and (max-width:1000px){.main-nav{gap:18px}.menu-link{font-size:16px}.plans-link{font-size:27px}.hero-services{width:42%;padding-top:30px;padding-bottom:30px}.hero-services ul{font-size:25px}.start-link{width:42%}.hero-art{left:43%;width:43%;top:41%}.hero-title{font-size:clamp(30px,3.5vw,35px)}}
@media(max-width:600px){
  :root{--header-h:clamp(92px,23.5vw,128px)}
  .main-nav{width:100%;max-width:none;padding:0 5%;display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
  .brand{justify-self:start}.brand img{width:clamp(32px,7.9vw,43px);height:auto}
  .main-nav .menu-link{display:none}.plans-link{grid-column:2;justify-self:center;font-size:clamp(25px,5vw,29px);padding:4px 14px 6px}
  .menu-toggle{display:flex;grid-column:3;justify-self:end;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:2px;border:0;background:none;cursor:pointer}
  .menu-toggle span{display:block;width:100%;height:5px;background:white}.menu-toggle:focus-visible{outline-color:white}
  .hero{height:calc(100svh - var(--header-h));min-height:calc(144vw + 40px);border-bottom:clamp(40px,10.3vw,56px) solid var(--hero-blue)}
  .hero-title{left:5.5%;top:8.2%;font-size:clamp(29px,7.7vw,46px);line-height:1.02;letter-spacing:0}
  .mobile-break{display:block}.desktop-space{display:none}
  .hero-services{top:37%;width:70.3%;padding:clamp(18px,4.8vw,27px) 12px clamp(18px,4.8vw,27px) 7.5%;z-index:1}
  .hero-services ul{font-size:clamp(23px,5.15vw,29px);line-height:1}
  .hero-art{left:10.5%;top:53%;width:80%;z-index:3}
  .hero-art .aura-anchor{display:none}
  .mobile-aura{display:block;position:absolute;z-index:1;left:75.5%;top:11.5%;width:39%;aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none}
  .start-link{top:88%;width:70.3%;height:clamp(46px,10.7vw,58px);padding:0;justify-content:center;font-size:clamp(27px,5.6vw,32px);gap:20px;z-index:4}
  .sara-ribbon{left:73%;width:25%;opacity:1}.sara-ribbon-track{animation-duration:38s}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.aura,.sara-ribbon-track,.loader-track span,.js.is-ready .hero-title,.js.is-ready .hero-services,.js.is-ready .start-link,.js.is-ready .hero-art{animation:none}.page-loader{transition:none}.start-arrow{transition:none}}