/* Motion layer for the home page. Only active when js/motion.js adds .m to <html> (never for reduced motion). */

/* Split words: each word rises out of its own mask. */
.split .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.split .wi{display:inline-block}
.m .split .wi{transform:translateY(105%);opacity:0;transition:transform .7s var(--ease),opacity .5s ease;transition-delay:calc(var(--i)*55ms)}
.m .split.in .wi,.m.ready .hero h1 .wi{transform:none;opacity:1}
.m .split.rv{opacity:1;transform:none}
.m.ready .hero h1 .wi{transition-delay:calc(.15s + var(--i)*70ms)}
/* Inner pages: title words, then the kicker and intro line. */
.m.ready .phead h1 .wi{transform:none;opacity:1;transition-delay:calc(.1s + var(--i)*70ms)}
.m .phead .kick{animation:upIn .6s var(--ease) both}
.m .phead .sub{animation:upIn .6s var(--ease) .45s both}

/* Hero entrance: one thing after another. */
@keyframes upIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes botIn{from{opacity:0;transform:translateY(28px) scale(.9)}to{opacity:1;transform:none}}
.m .hero .eyebrow{animation:upIn .6s var(--ease) both}
.m .hero p.lead{animation:upIn .6s var(--ease) .55s both}
.m .hero .cta{animation:upIn .6s var(--ease) .75s both}
.m #hero8 .hc{animation:botIn .6s var(--ease) both;animation-delay:calc(.9s + var(--i)*80ms)}
.m .hero .scrollhint{animation:upIn .6s var(--ease) 1.8s both}

/* Hero scroll-out depth (--hp goes 0 → 1 over the first screen). */

/* Cursor light in the hero. */
.hglow{position:absolute;left:-300px;top:-300px;width:600px;height:600px;border-radius:50%;pointer-events:none;
 background:radial-gradient(circle,rgba(97,196,202,.22),rgba(44,153,183,.08) 40%,transparent 70%);will-change:transform}

/* Magnetic buttons: smooth return to rest. */
.btn.mag{transition:transform .35s cubic-bezier(.2,.8,.2,1),background .15s ease,box-shadow .15s ease}

/* Card spotlight + tilt. */
.spot{position:relative;transition:opacity .6s var(--ease),transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .2s ease,border-color .2s ease}
.spot:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s ease;
 background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(97,196,202,.16),transparent 45%)}
.spot:hover:after{opacity:1}
.spot:hover{border-color:var(--accent)}

@media (prefers-reduced-motion:reduce){.hglow{display:none}}
/* Lenis does the smoothing; the browser's own CSS smoothing would fight it (Lenis README). */
html.lenis{scroll-behavior:auto!important}

/* ===== UI v3.1 (ideas from React Bits / Kokonut UI / showcase sites; brand colours only) ===== */

/* Floating glass pill header once you scroll (on inner pages it is always the pill). */
.nv{transition:height .4s var(--ease),margin .4s var(--ease),padding .4s var(--ease),background .4s ease,box-shadow .4s ease,border-color .4s ease;border:1px solid transparent;border-radius:18px}
header.sc,body.inner header{background:transparent;box-shadow:none;backdrop-filter:none}
header.sc .nv{height:56px;margin-top:10px;padding:0 8px 0 18px;background:rgba(255,255,255,.86);backdrop-filter:blur(14px);border-color:var(--line);box-shadow:0 12px 32px rgba(30,60,97,.12)}

/* Sliding highlight under the active menu link. */
.nv nav{position:relative}
.nv nav a{position:relative;z-index:1}
.npill{position:absolute;left:0;top:50%;height:34px;margin-top:-17px;width:0;border-radius:10px;background:rgba(255,255,255,.16);opacity:0;transition:transform .5s var(--ease),width .5s var(--ease),opacity .3s ease}
header.sc .npill{background:var(--chip)}
.nv nav a[aria-current="page"]{background:transparent}
.nv nav a.act,.nv nav a[aria-current="page"]{color:#fff}
header.sc .nv nav a.act,header.sc .nv nav a[aria-current="page"]{color:var(--ink)}

/* Back to top, with a ring that fills as you read. */
.totop{position:fixed;right:22px;bottom:22px;z-index:54;width:50px;height:50px;border-radius:50%;border:0;padding:0;background:#fff;box-shadow:0 12px 30px rgba(30,60,97,.18);cursor:pointer;opacity:0;transform:translateY(16px) scale(.9);pointer-events:none;transition:opacity .35s ease,transform .45s var(--ease)}
.totop.on{opacity:1;transform:none;pointer-events:auto}
.totop:hover{transform:translateY(-3px)}
.totop svg{width:50px;height:50px;display:block;transform:rotate(-90deg)}
.totop circle{fill:none;stroke-width:3}.totop .trk{stroke:var(--line)}
.totop .ring{stroke:var(--brand-2);stroke-linecap:round;stroke-dasharray:132;stroke-dashoffset:132}
.totop path{fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transform:rotate(90deg);transform-origin:24px 24px}
.buddy{right:auto;left:22px} /* the bot helper peeks in on the left, the button sits on the right */

/* Giant wordmark at the bottom of every page, letters rise in. */
footer.site{overflow:hidden}
.bigmark{margin-top:34px;font-weight:800;letter-spacing:-.045em;line-height:.85;white-space:nowrap;font-size:clamp(3.6rem,15.5vw,13.5rem);user-select:none}
.bigmark span{display:inline-block;background:linear-gradient(180deg,var(--brand-2),var(--accent) 55%,transparent 98%);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.22}
.bigmark.rv{opacity:1;transform:none}
.m .bigmark span{transform:translateY(60%);opacity:0;transition:transform .9s var(--ease),opacity .9s ease;transition-delay:calc(var(--i)*60ms)}
.m .bigmark.in span{transform:none;opacity:.22}

/* FAQ: a plus that turns into a cross, answers fade in, height glides (js in site.js). */
.faq details{overflow:hidden;transition:border-color .2s ease,box-shadow .2s ease}
.faq details[open]{border-color:var(--accent);box-shadow:var(--sh-hover)}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--chip);color:var(--brand-2);font-weight:700;font-size:1.15rem;line-height:1;transition:transform .4s var(--ease),background .3s ease,color .3s ease}
.faq details[open] summary::after{transform:rotate(45deg);background:var(--brand-2);color:#fff}
.faq details.opening p{animation:upIn .45s var(--ease) .08s both}

/* Shimmer: a soft light sweeps across buttons on hover. */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.32) 50%,transparent 70%);transform:translateX(-130%);transition:transform .8s var(--ease);pointer-events:none}
.btn.g::after,.hero .btn::after,.cta2 .btn:not(.gl)::after,header:not(.sc) .btn::after{background:linear-gradient(110deg,transparent 30%,rgba(97,196,202,.28) 50%,transparent 70%)}
.btn:hover::after{transform:translateX(130%)}

/* Border beam: a light travels around the "Most picked" plan and the final call-to-action. */
@property --ang{syntax:'<angle>';initial-value:0deg;inherits:false}
.plan.hot::before,.cta2::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:2px;pointer-events:none;
 background:conic-gradient(from var(--ang),transparent 0 62%,var(--accent) 78%,var(--brand-2) 88%,transparent 96%);
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:beam 5s linear infinite}
.cta2{position:relative}
@keyframes beam{to{--ang:360deg}}
@media (prefers-reduced-motion:reduce){.plan.hot::before,.cta2::before{animation:none}}
.plan{position:relative}