@font-face{font-family:"Outfit";font-style:normal;font-weight:300;font-display:swap;src:url("../fonts/outfit-300.woff2") format("woff2")}
@font-face{font-family:"Outfit";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/outfit-400.woff2") format("woff2")}
@font-face{font-family:"Outfit";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/outfit-500.woff2") format("woff2")}
@font-face{font-family:"Outfit";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/outfit-700.woff2") format("woff2")}
:root{--navy:#011333;--violet:#4B2BF4;--accent:#6B5CF7;--white:#FFFFFF;--line:rgba(255,255,255,.5);--error:#FF8A7A;color-scheme:dark}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;min-height:100%;background:var(--navy);color:var(--white);font-family:"Outfit",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;overflow-x:clip}
.page{position:relative;overflow:hidden;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;padding:52px 24px}
#field-bg{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;-webkit-mask-image:radial-gradient(ellipse 48% 40% at 50% 50%,rgba(0,0,0,.35),#000 85%);mask-image:radial-gradient(ellipse 48% 40% at 50% 50%,rgba(0,0,0,.35),#000 85%)}
.glow{position:absolute;left:50%;top:48%;width:min(1100px,140vw);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(75,43,244,.2),rgba(75,43,244,0));pointer-events:none}
.logo{position:relative;display:block;width:176px;height:auto}
.logo .bbn-ink{fill:var(--white)}.logo .bbn-accent{fill:var(--accent)}
main{position:relative;flex:1;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:56px;text-align:center;padding-bottom:40px}
h1{margin:0;font-size:clamp(40px,5.4vw,80px);max-width:17ch;line-height:1.02;font-weight:700;letter-spacing:-.035em;text-wrap:balance}
h1 .l1{display:block}
h1 .l2{display:block;color:var(--accent)}
h1 .w{display:inline-block;animation:word .7s cubic-bezier(.2,.7,.2,1) both}
.act{display:flex;flex-direction:column;align-items:center;gap:22px;width:100%}
.act p{margin:0;font-size:clamp(17px,1.4vw,20px);line-height:1.45;font-weight:300;color:rgba(255,255,255,.78)}
.act p span{display:block;margin-top:2px;color:var(--accent);font-weight:500}
form{width:560px;max-width:100%;margin:0}
.field{display:flex;align-items:center;gap:10px;height:66px;padding:0 6px 0 26px;border:1.5px solid var(--line);border-radius:999px;background:rgba(255,255,255,.02);transition:border-color .25s,box-shadow .25s,background .25s}
.field:focus-within{border-color:var(--accent);box-shadow:0 0 0 6px rgba(107,92,247,.16);background:rgba(255,255,255,.035)}
.field.bad{border-color:var(--error);animation:shake .4s ease}
.field.sent{border-color:var(--accent)}
input{flex:1;min-width:0;height:100%;border:0;background:transparent;color:var(--white);font:inherit;font-size:17px;outline:none}
input::placeholder{color:rgba(255,255,255,.58)}
button{flex:none;width:54px;height:54px;border:0;border-radius:50%;background:var(--accent);display:grid;place-items:center;cursor:pointer;padding:0;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
button svg{width:22px;height:22px;fill:none;stroke:var(--white);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
button:hover{transform:scale(1.06)}
button:hover svg,button:focus-visible svg{transform:rotate(-90deg)}
button:focus-visible{outline:2px solid var(--white);outline-offset:3px}
button.sent{animation:pulse .9s ease-out 1}
button.sent svg{transform:none;animation:launch .7s cubic-bezier(.5,0,.2,1) 1}
.r{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@keyframes rise{from{opacity:.001;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes word{from{opacity:.001;transform:translateY(.35em)}to{opacity:1;transform:none}}
@keyframes drift{0%,100%{transform:translateY(0)}50%{transform:translateY(-18px)}}
@keyframes launch{0%{transform:translateY(0);opacity:1}45%{transform:translateY(-46px);opacity:0}46%{transform:translateY(30px);opacity:0}100%{transform:translateY(0);opacity:1}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(107,92,247,.45)}100%{box-shadow:0 0 0 22px rgba(107,92,247,0)}}
@keyframes shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}

/* Fast. Easy. */
h1 .l2{position:relative}
.fast,.easy{display:inline-block;position:relative;cursor:default}
.fast{animation:whip .5s cubic-bezier(.2,.9,.2,1) .45s both;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.fast::before{content:"";position:absolute;right:100%;top:22%;width:0;height:56%;margin-right:.08em;background:repeating-linear-gradient(to bottom,var(--accent) 0 3px,transparent 3px 11px);opacity:0;border-radius:2px;transition:width .35s cubic-bezier(.2,.8,.2,1),opacity .35s;-webkit-mask-image:linear-gradient(to left,#000,transparent);mask-image:linear-gradient(to left,#000,transparent)}
.fast:hover{transform:skewX(-12deg) translateX(.06em)}
.fast:hover::before{width:.9em;opacity:.7}
.easy{animation:floatin 1.4s cubic-bezier(.25,.6,.3,1) .9s both;transition:letter-spacing .6s cubic-bezier(.3,.7,.3,1)}
.easy:hover{letter-spacing:.03em;animation:bob 2.4s ease-in-out infinite}
.stop{position:relative;display:inline-block}
.stop .dot{display:inline-block;animation:dotswap 1.9s ease-in-out 2.5s both}
.stop .arr{position:absolute;left:50%;bottom:.14em;width:.42em;height:auto;margin-left:-.21em;fill:currentColor;opacity:0;transform-origin:50% 100%;animation:arrlift 1.9s cubic-bezier(.3,.7,.2,1) 2.5s both}
.done .stop .dot,.easy:hover .stop .dot{animation:dotswap 1.9s ease-in-out both}
.done .stop .arr,.easy:hover .stop .arr{animation:arrlift2 1.9s cubic-bezier(.3,.7,.2,1) both}
@keyframes whip{0%{opacity:.001;transform:translateX(1.4em) skewX(-20deg);filter:blur(8px)}65%{opacity:1;transform:translateX(-.06em) skewX(5deg);filter:blur(0)}100%{opacity:1;transform:none;filter:none}}
@keyframes floatin{0%{opacity:.001;transform:translateY(.35em);filter:blur(4px)}100%{opacity:1;transform:none;filter:none}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-.05em)}}
@keyframes dotswap{0%,100%{transform:none;opacity:1}18%,78%{transform:scale(0);opacity:0}}
@keyframes arrlift{0%{opacity:0;transform:translateY(.1em) scale(.3)}22%{opacity:1;transform:translateY(-.28em) scale(1)}78%{opacity:1;transform:translateY(-.28em) scale(1)}100%{opacity:0;transform:translateY(0) scale(.3)}}
@keyframes arrlift2{0%{opacity:0;transform:translateY(.1em) scale(.3)}22%{opacity:1;transform:translateY(-.28em) scale(1)}78%{opacity:1;transform:translateY(-.28em) scale(1)}100%{opacity:0;transform:translateY(0) scale(.3)}}
@media (max-width:560px){.page{padding:36px 24px}.logo{width:150px}main{gap:40px;padding-bottom:24px}.act{gap:18px}.field{height:60px;padding-left:22px}input{font-size:16px}button{width:50px;height:50px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}