*{box-sizing:border-box;margin:0;padding:0}
:root{--cream:#FFF8E7;--lime:#C4FF3D;--ink:#1E0B55;--sky:linear-gradient(180deg,#3D1FD1 0%,#6B4DFF 42%,#AE98FF 78%,#EEE8FF 100%)}
html,body{width:100vw;height:100vh;height:100dvh;overflow:hidden}
body{font-family:Sora,sans-serif;color:var(--cream);background:var(--sky)}
a{color:var(--cream)}
a:hover{color:#FFD84A}

.grain{position:fixed;inset:0;z-index:6;pointer-events:none;opacity:.18;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
canvas{position:fixed;inset:0;z-index:2;pointer-events:none}

.page{position:relative;z-index:5;width:100vw;height:100vh;height:100dvh;display:grid;grid-template-rows:auto 1fr auto;padding:24px 50px}
header{display:flex;justify-content:space-between;align-items:center}
.logo{display:block;height:44px;width:auto}
.pill{position:relative;display:flex;align-items:center;height:40px;padding:0 18px;font-size:13px;letter-spacing:.02em;white-space:nowrap;background:rgba(255,255,255,.22);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}

main{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;padding-top:54px;text-align:center}
h1{font-family:Michroma,sans-serif;font-weight:400;font-size:clamp(38px,min(7.1vw,11.5vh),125px);line-height:.92;letter-spacing:-.04em;text-shadow:0 2px 30px rgba(11,42,102,.18);perspective:800px}
h1 em{font-style:italic}
h1 .w{display:inline-block;white-space:nowrap}
h1 .ch{display:inline-block;opacity:0;transform-origin:50% 100%;animation:rise 1.1s cubic-bezier(.2,.9,.2,1) both;animation-delay:calc(.25s + var(--i) * 45ms)}
.sub{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:54px;font-size:clamp(15px,1.4vw,20px);line-height:1;letter-spacing:.02em;white-space:nowrap;color:#fff;text-shadow:0 1px 12px rgba(11,42,102,.25)}
.sub i{font-style:normal;opacity:.6}

footer{display:flex;justify-content:center;padding-bottom:10vh}
.cta-wrap{filter:drop-shadow(0 18px 34px rgba(20,8,60,.35))}
.cta{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:14px;height:62px;padding:0 34px;background:var(--lime);color:var(--ink);font-weight:500;font-size:16px;line-height:1;letter-spacing:.01em;text-decoration:none;white-space:nowrap;clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);transition:color .35s,transform .15s}
.cta::before{content:"";position:absolute;inset:0;background:var(--cream);transform:translateX(-101%);transition:transform .5s cubic-bezier(.7,0,.2,1)}
.cta:hover{color:var(--ink)}
.cta:hover::before{transform:none}
.cta:active{transform:translateY(1px)}
.cta span,.cta b{position:relative}
.cta b{display:flex;align-items:center;transition:transform .45s cubic-bezier(.3,1.6,.5,1)}
.cta b svg{width:24px;height:24px;display:block}
.cta:hover b{transform:translate(3px,-3px)}

.edge{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.edge polygon{fill:none;stroke-width:1.5}
.edge .base{stroke:rgba(255,255,255,.45);transition:stroke .3s}
.edge .run{stroke:#fff;stroke-dasharray:0 var(--len);filter:drop-shadow(0 0 4px rgba(255,255,255,.9))}
.cta .edge .base{stroke:transparent}
.framed:hover .edge .base,.framed:focus-within .edge .base{stroke:rgba(255,255,255,.75)}
.framed:hover .edge .run,.framed:focus-within .edge .run{stroke-dasharray:calc(var(--len) * .28) calc(var(--len) * .72);animation:run 1.8s linear infinite}
.cta:hover .edge .run{stroke:var(--ink);filter:none}

.fade{opacity:0;animation:fade .9s cubic-bezier(.2,.8,.2,1) both}
body:not(.ready) h1 .ch,body:not(.ready) .fade{animation:none;opacity:0}

#loader{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:var(--sky);transition:opacity .7s ease .15s,visibility 0s linear .9s}
#loader canvas{position:absolute;inset:0;z-index:0}
#progress{position:relative;z-index:1;font-size:14px;letter-spacing:.14em;color:#fff;font-variant-numeric:tabular-nums}
body.loaded #loader{opacity:0;visibility:hidden}

@keyframes rise{0%{opacity:0;transform:translateY(.55em) rotateX(-80deg);filter:blur(14px)}60%{opacity:1;filter:blur(0)}100%{opacity:1;transform:none;filter:blur(0)}}
@keyframes fade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes run{from{stroke-dashoffset:0}to{stroke-dashoffset:calc(var(--len) * -1)}}

@media (max-width:1024px){
  main{padding-top:0}
  .sub{font-size:16px}
}
@media (max-width:600px){
  .page{padding:18px 20px}
  .logo{height:32px}
  .pill{height:34px;padding:0 14px}
  h1{font-size:clamp(30px,10.4vw,46px);line-height:1.05}
  .sub{flex-direction:column;gap:10px;margin-top:32px;white-space:normal}
  .sub i{display:none}
  footer{padding-bottom:40px}
  .cta-wrap{width:100%;display:flex;justify-content:center}
  .cta{width:100%;max-width:360px;height:58px;padding:0 20px;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  h1 .ch,.fade{animation:none;opacity:1}
  .cta b{transition:none}
  .framed:hover .edge .run{animation:none}
}