:root { --ink:#153833; --muted:#65817a; --jade:#269b77; --coral:#f16e5f; --cream:#fcfaf3; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; min-width:320px; background:var(--cream); color:var(--ink); font-family:Arial,Helvetica,sans-serif; } main { min-height:100svh; position:relative; overflow:hidden; display:flex; flex-direction:column; isolation:isolate; } .shell { width:min(1180px,calc(100% - 64px)); margin:0 auto; }
.nav { display:flex; align-items:center; justify-content:space-between; padding:32px 0 18px; position:relative; z-index:2; }.wordmark { display:inline-flex; align-items:center; gap:9px; color:var(--ink); text-decoration:none; font:800 25px/1 Arial,sans-serif; letter-spacing:-1.5px; }.mark-mini { display:grid; place-items:center; width:28px; height:28px; border-radius:10px; background:var(--jade); color:#fff; font:700 24px/20px Arial; transform:rotate(-7deg); box-shadow:0 5px 12px #269b7733; }.nav-link { color:var(--ink); font:700 14px/1 Arial; text-decoration:none; border-bottom:1px solid #15383355; padding-bottom:4px; transition:color .25s,border-color .25s; }.nav-link:hover { color:var(--coral); border-color:var(--coral); }.nav-link span { font-size:17px; margin-left:3px; }
.hero { flex:1; display:grid; grid-template-columns:.94fr 1.06fr; align-items:center; gap:44px; padding:60px 0 48px; position:relative; z-index:1; }.copy { max-width:550px; }.eyebrow { display:flex; align-items:center; gap:9px; margin:0 0 22px; color:#347060; font:700 12px/1.3 Arial; letter-spacing:.11em; text-transform:uppercase; }.pulse { width:8px; height:8px; flex:0 0 auto; border-radius:50%; background:var(--coral); box-shadow:0 0 0 0 #f16e5f88; animation:beat 1.8s infinite; } h1 { margin:0; color:var(--ink); font:700 clamp(3.6rem,6.2vw,5.65rem)/.99 Georgia,'Times New Roman',serif; letter-spacing:-.065em; } h1 em { color:var(--jade); font-weight:400; }.intro { max-width:490px; margin:27px 0 30px; color:var(--muted); font:400 17px/1.62 Arial; }.waitlist { display:flex; padding:5px; gap:7px; max-width:490px; border:1px solid #bfded1; background:#ffffffba; border-radius:16px; box-shadow:0 12px 26px #2460510d; }.waitlist input { min-width:0; flex:1; border:0; outline:0; color:var(--ink); background:transparent; padding:0 13px; font:500 14px Arial; }.waitlist input::placeholder { color:#85a098; }.waitlist button { cursor:pointer; border:0; border-radius:11px; background:var(--ink); color:#fff; padding:15px 16px; font:700 13px Arial; transition:transform .2s,background .2s; }.waitlist button:hover { background:var(--jade); transform:translateY(-2px); }.waitlist button span { padding-left:6px; font-size:17px; }.form-note,.form-status { margin:13px 0 0 6px; color:#7c958e; font:500 12px/1.4 Arial; }.form-note span { color:var(--coral); margin-right:5px; }.form-status { color:var(--jade); min-height:17px; }
.art { position:relative; width:min(100%,590px); aspect-ratio:1/1; justify-self:end; display:grid; place-items:center; }.art-halo { position:absolute; inset:10%; border-radius:46% 54% 47% 53% / 45% 45% 55% 55%; background:#b9f0d7; animation:blob 8s ease-in-out infinite; }.logo-hero { position:relative; z-index:1; width:87%; max-width:500px; object-fit:contain; filter:drop-shadow(0 27px 24px #0c614430); animation:float 5.2s ease-in-out infinite; }.care-ring { position:absolute; z-index:0; border:1px dashed #54ad8c88; border-radius:50%; }.ring-a { inset:1%; animation:spin 30s linear infinite; }.ring-b { inset:11%; border-style:solid; border-color:#f7b2a7; opacity:.65; animation:spin 23s linear infinite reverse; }.care-ring span { position:absolute; width:100%; top:13px; text-align:center; color:#4a977d; font:700 9px Arial; letter-spacing:.17em; text-transform:uppercase; }.spark { position:absolute; z-index:2; color:var(--coral); font-size:30px; animation:twinkle 2.5s infinite ease-in-out; }.spark-a { top:9%; right:17%; }.spark-b { bottom:21%; left:4%; font-size:19px; animation-delay:-1.1s; color:var(--jade); }.status-card { position:absolute; z-index:3; right:-5%; bottom:12%; display:flex; align-items:center; gap:10px; padding:11px 15px 11px 11px; background:#fffefc; border-radius:14px; box-shadow:0 12px 30px #17483c24; animation:float-small 5.2s ease-in-out infinite; }.status-icon { display:grid; place-items:center; width:31px; height:31px; color:#fff; background:var(--coral); border-radius:10px; font-size:15px; }.status-card strong,.status-card small { display:block; white-space:nowrap; }.status-card strong { color:var(--ink); font:700 11px/1.2 Arial; }.status-card small { margin-top:3px; color:#79908a; font:500 10px/1 Arial; }
.footer { position:relative; z-index:1; display:flex; justify-content:space-between; align-items:center; padding:18px 0 26px; color:#84a098; font:500 11px/1.3 Arial; }.footer p { margin:0; }.footer-note { color:#5f877a; }.footer-note span { color:var(--coral); margin-right:4px; }.page-glow { position:absolute; z-index:-2; pointer-events:none; border-radius:50%; filter:blur(5px); }.glow-one { width:42vw; height:42vw; right:-13vw; top:8vh; background:#fbd5bf6b; }.glow-two { width:34vw; height:34vw; left:-15vw; bottom:-17vw; background:#bdf1dc7d; }.plus-mark { position:absolute; z-index:-1; color:#72c7a8; font:300 42px Arial; opacity:.27; animation:bob 6s ease-in-out infinite; }.plus-a { top:20%; left:8%; }.plus-b { top:68%; right:8%; color:#e79682; animation-delay:-2.3s; }.orbit { position:absolute; z-index:-1; border:1px solid #91d5bd59; border-radius:50%; }.orbit-one { height:31vw; width:31vw; left:-17vw; top:27%; }.orbit-two { height:20vw; width:20vw; right:-11vw; bottom:-9vw; border-color:#f2ae9b8c; }.sr-only { clip:rect(0,0,0,0); clip-path:inset(50%); height:1px; width:1px; overflow:hidden; position:absolute; white-space:nowrap; }
@keyframes float { 50% { transform:translateY(-13px) rotate(1deg); } } @keyframes float-small { 50% { transform:translateY(-9px); } } @keyframes blob { 50% { border-radius:61% 39% 56% 44% / 53% 59% 41% 47%; transform:rotate(8deg) scale(1.04); } } @keyframes spin { to { transform:rotate(360deg); } } @keyframes twinkle { 50% { opacity:.35; transform:scale(.68) rotate(20deg); } } @keyframes beat { 70% { box-shadow:0 0 0 8px #f16e5f00; } 100% { box-shadow:0 0 0 0 #f16e5f00; } } @keyframes bob { 50% { transform:translateY(-18px) rotate(18deg); } }
@media (max-width:760px) { .shell { width:min(100% - 40px,540px); }.nav { padding-top:24px; }.hero { display:flex; flex-direction:column; gap:17px; padding:40px 0 26px; text-align:center; }.copy { display:flex; flex-direction:column; align-items:center; }.eyebrow { text-align:left; font-size:10px; letter-spacing:.08em; }.intro { font-size:15px; margin:20px 0 25px; }.art { order:-1; width:min(100%,390px); }.status-card { right:-1%; bottom:8%; transform:scale(.88); transform-origin:bottom right; }.waitlist { width:100%; }.footer { padding-top:12px; }.footer-note { display:none; }.plus-a { top:14%; left:5%; }.orbit-one { width:60vw; height:60vw; left:-36vw; } } @media (max-width:410px) { .shell { width:calc(100% - 32px); }.nav-link { font-size:12px; }.hero { padding-top:29px; } h1 { font-size:3.3rem; }.waitlist { display:grid; background:none; border:0; padding:0; gap:9px; box-shadow:none; }.waitlist input { width:100%; min-height:50px; padding:0 15px; background:#fff; border:1px solid #bfded1; border-radius:13px; }.waitlist button { width:100%; min-height:49px; }.art { width:100%; }.footer { justify-content:center; text-align:center; } } @media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; } }