/* ===== Clinky landing — clean/minimal (homify structure + Sheepy softness + Clinky brand) ===== */
*{box-sizing:border-box}
:root{--cardBorder:#e9e6ec}
html{scroll-behavior:smooth}
body{margin:0;font-family:'DM Sans',system-ui,sans-serif;color:#1c1326;background:#FFF8F4;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
input,button,textarea{font-family:inherit}
::placeholder{color:#a99ea6}
a{text-decoration:none}
:focus-visible{outline:3px solid #FF4F62;outline-offset:3px}
#app{min-height:100vh}

/* rolling odometer counter — plain digits that fall from above; transform-only, tabular */
.odo{display:inline-flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums}
.odo-col{display:inline-block;height:1em;line-height:1;overflow:hidden;vertical-align:top}
.odo-strip{display:flex;flex-direction:column;will-change:transform}
.odo-cell{line-height:1;display:flex;align-items:center;justify-content:center;width:.64em}
.odo-sep{display:inline-flex;align-items:center;justify-content:center;width:.24em}
/* cards — one unified surface across the whole site: white fill + soft light-grey hairline */
.soft-card{position:relative;background:#fff;border:1px solid var(--cardBorder);border-radius:24px;box-shadow:0 12px 32px -20px rgba(255,79,98,.28);transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease}
.soft-card:hover{z-index:3;transform:translateY(-4px);box-shadow:0 24px 48px -24px rgba(255,79,98,.38)}
/* icons never stretch */
i[class*="ph-"]{flex:none}
/* reusable badge icon-in-circle */
.chip-ic{width:30px;height:30px;border-radius:50%;background:#FFE2E6;display:inline-flex;align-items:center;justify-content:center;flex:none}
/* 3D model: kill default grey progress bar + custom centred loader */
model-viewer::part(default-progress-bar){display:none}
.mv-spin{width:46px;height:46px;border-radius:50%;border:4px solid #FFE2E6;border-top-color:#FF4F62;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* feature bento (Sheepy-style) — fixed row unit keeps cards compact (big = 2 rows, small = 1) */
.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;grid-template-rows:210px 260px 310px;grid-auto-rows:220px}
.bento-card{background:#fff;border:1px solid var(--cardBorder);border-radius:24px;overflow:hidden;position:relative;box-shadow:0 12px 32px -20px rgba(255,79,98,.26);transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease}
.bento-card:hover{z-index:3;transform:translateY(-5px);box-shadow:0 24px 48px -24px rgba(255,79,98,.38)}
/* below ~1140px the absolute media (cap/widgets/charts) overlap the narrowed tiles, so simplify early */
@media(max-width:1140px){
  .bento{grid-template-columns:1fr 1fr;grid-template-rows:none !important;grid-auto-rows:auto}
  .bento-card{grid-column:auto !important;grid-row:auto !important;min-height:auto;overflow:hidden !important;padding:24px !important}
  .bento-media{display:none !important}        /* drop screenshots/3D/widgets — text-only tiles */
  .bento-head{max-width:100% !important}
}
@media(max-width:560px){.bento{grid-template-columns:1fr}}
/* process flow timeline */
.flow{position:relative;max-width:600px;margin:0 auto;display:flex;flex-direction:column}
.flow-step{position:relative;display:flex;gap:20px;padding-bottom:30px}
.flow-step:last-child{padding-bottom:0}
.flow-num{flex:none;width:48px;height:48px;border-radius:16px;background:linear-gradient(165deg,#FF8A97,#E11D48);color:#fff;display:flex;align-items:center;justify-content:center;font-family:Nunito,sans-serif;font-weight:900;font-size:18px;box-shadow:0 12px 24px -10px rgba(225,29,72,.6);position:relative;z-index:1}
.flow-step:not(:last-child)::before{content:"";position:absolute;left:23px;top:54px;bottom:6px;width:2px;background:linear-gradient(#ffd2d9,rgba(255,210,217,.2))}
.cta-btn{position:relative;overflow:hidden}
.cta-btn::after{content:"";position:absolute;top:0;left:0;width:60%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:translateX(-180%) skewX(-18deg)}
.cta-btn:hover::after{animation:shine .9s ease}

/* screens carousel */
.screens-track{display:flex;gap:20px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;justify-content:safe center;padding:92px clamp(20px,5vw,72px) 92px;-webkit-overflow-scrolling:touch}
.screens-track::-webkit-scrollbar{display:none}.screens-track{scrollbar-width:none}
.screen-card{flex:none;scroll-snap-align:center;width:260px;border-radius:32px;overflow:hidden;background:#fff;border:1px solid var(--cardBorder);box-shadow:0 18px 42px -22px rgba(255,79,98,.34);transition:transform .4s cubic-bezier(.2,.7,.2,1),opacity .4s ease,box-shadow .4s ease}
@media(hover:hover){
  /* dim only the NON-hovered siblings (so the hovered card itself grows, no specificity clash) */
  .screens-track:has(.screen-card:hover) .screen-card:not(:hover){opacity:.4;transform:scale(.9)}
  .screens-track .screen-card:hover{opacity:1;transform:scale(1.08);z-index:2;box-shadow:0 24px 50px -28px rgba(225,29,72,.5)}
}

/* floating hero mini-cards */
/* outer = position + idle bob (CSS keyframes); inner = visual pill + cursor parallax (JS transform) — separate layers so they never conflict */
.float-card{position:absolute;z-index:7;white-space:nowrap}
.float-inner{display:inline-flex;align-items:center;gap:10px;padding:12px 17px;background:#fff;border:1px solid var(--cardBorder);border-radius:16px;box-shadow:0 16px 34px -16px rgba(0,0,0,.18);font-weight:700;font-size:14.5px;color:#1c1326;transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s ease;transform-style:preserve-3d}

@keyframes shine{from{transform:translateX(-180%) skewX(-18deg)}to{transform:translateX(220%) skewX(-18deg)}}
@keyframes floatSlow{0%,100%{transform:translate(0,0)}50%{transform:translate(-14px,-20px)}}
@keyframes bobA{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-12px) rotate(-2deg)}}
@keyframes bobB{0%,100%{transform:translateY(0) rotate(2deg)}50%{transform:translateY(11px) rotate(2deg)}}
@keyframes twinkle{0%,100%{transform:scale(.62);opacity:.25}50%{transform:scale(1.4);opacity:1}}
@keyframes popIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:.6}}
@keyframes qSwap{0%{opacity:0;transform:translateY(12px) scale(.96)}100%{opacity:1;transform:none}}
@keyframes catPop{0%{transform:scale(.86);opacity:.4}100%{transform:scale(1);opacity:1}}
@keyframes pageIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes glowPulse{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.06);opacity:1}}
@keyframes eyebrowPulse{0%,100%{box-shadow:0 8px 22px -12px rgba(255,79,98,.45)}50%{box-shadow:0 12px 30px -10px rgba(255,79,98,.7)}}
@keyframes liveBlink{0%,100%{opacity:1}50%{opacity:.4}}
@keyframes liveRing{0%{transform:scale(1);opacity:.5}70%,100%{transform:scale(2.6);opacity:0}}

/* hero 3D tap reactions (app-like: gentle pop / cheers) */
@keyframes capPop{0%{transform:translateY(4px) scale(.94)}25%{transform:translateY(-10%) scale(1.06)}55%{transform:translateY(0) scale(1)}74%{transform:translateY(-3%) scale(1.02)}100%{transform:translateY(0) scale(1)}}
@keyframes cupCheers{0%{transform:translateY(4px) scale(.96) rotate(0)}35%{transform:translateY(-7%) rotate(-5deg)}62%{transform:translateY(0) rotate(3deg)}82%{transform:rotate(-1.5deg)}100%{transform:rotate(0)}}
@keyframes quickPulse{0%{transform:scale(1)}50%{transform:scale(1.05)}100%{transform:scale(1)}}

.page-in{animation:pageIn .4s ease both}

@media (max-width:960px){
  .hero-grid{flex-direction:column;gap:10px !important;max-width:560px !important}
  .hero-left{text-align:center !important;order:1}
  .hero-right{order:2;margin-top:0 !important}
  .hero-left .hero-icon{justify-content:center}
  .hero-left form{margin-left:auto !important;margin-right:auto !important}
  .hero-trust{margin-left:auto !important;margin-right:auto !important}
}
@media (max-width:900px){
  .why-grid{grid-template-columns:1fr !important;text-align:left}
  .discover-grid{grid-template-columns:1fr !important}
  .feat-grid{grid-template-columns:1fr !important}
  .pillars{grid-template-columns:1fr !important}
  .nav-legal{display:none !important}
  .float-card{display:none !important}
}
@media (max-width:640px){
  /* waitlist form: stack, full-width button + input */
  form[data-form="waitlist"]{flex-direction:column !important}
  form[data-form="waitlist"] > input,
  form[data-form="waitlist"] > button{width:100% !important;min-width:0 !important}
  .spark{display:none !important}   /* decorative sparkles clutter small screens */
}
@media (max-width:560px){
  .nav-mid{display:none !important}
  .join-cta{display:none !important}
  .nav-burger{display:flex !important}   /* show hamburger when center nav is hidden */
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;scroll-behavior:auto !important}
}