/* Subtle motion on a true-black canvas. All decoration stays non-interactive. */
.hero h1 > .hero-line { display: block; }
.hero h1 > .hero-line:first-child { color: #efefec; }
.hero-line { transform-origin: center bottom; }
.hero-cta { position: relative; isolation: isolate; }
.hero-cta::before {
  content: ""; position: absolute; inset: -5px; border: 1px solid #c6d5b225;
  border-radius: 12px; pointer-events: none; transition: border-color .25s, inset .25s;
}
.hero-cta:hover::before { inset: -7px; border-color: #d7e5bf65; }
.magnetic { will-change: translate; }
.magnetic .icon { translate: var(--arrow-x, 0px) 0; }
.magnetic:focus-visible { translate: 0 0 !important; }
.button { position: relative; }
.button:disabled { opacity: .8; }
.button.is-busy, .demo-button.is-busy { display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.is-busy::before {
  content: ""; display: inline-block; width: 13px; height: 13px; flex-shrink: 0;
  border: 1.5px solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: cloalink-spin .75s linear infinite;
}
.spotlight { position: relative; isolation: isolate; }
.spotlight::before, .spotlight::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit;
  pointer-events: none; opacity: 0; transition: opacity .3s; z-index: 2;
}
.spotlight::before {
  padding: 1px;
  background: radial-gradient(200px circle at var(--spot-x, 50%) var(--spot-y, 50%), #c7d5b29c, #c7d5b215 55%, transparent 80%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
}
.spotlight::after {
  inset: 0; z-index: -1;
  background: radial-gradient(300px circle at var(--spot-x, 50%) var(--spot-y, 50%), #c7d5b20a, transparent 70%);
}
.spotlight.is-lit::before, .spotlight.is-lit::after { opacity: 1; }
.mascot { perspective: 600px; }
.mascot-aura { position: absolute; inset: 4% -8% 7%; border-radius: 50%; background: radial-gradient(ellipse at 48% 43%, #a6a6b01a, #6b6b770b 42%, transparent 70%); pointer-events: none; }
.mascot-cat .watcher { filter: drop-shadow(0 7px 14px #0009); }
.mascot-cat.tiny .mascot-aura { display: none; }
.creature-head { animation: none; }
.creature-body { transform-origin: 120px 205px; animation: companion-breathe 5s ease-in-out infinite; }
.orbit { box-shadow: 0 0 55px #d4dfbd04, inset 0 0 40px #d4dfbd03; }
.orbit::before {
  content: ""; position: absolute; inset: -1px; border-radius: 50%;
  border: 1px solid transparent; border-top-color: #b5c39c38;
  animation: companion-orbit 18s linear infinite; pointer-events: none;
}
.orbit-star { animation: companion-star 5s ease-in-out infinite; }
.mascot-hello { position: absolute; inset: 7% 17% 14%; z-index: 3; border-radius: 50%; background: transparent; }
.mascot-hello:focus-visible { outline-offset: 10px; outline-color: #c6d5b260; }
.mascot-bubble {
  position: absolute; top: 13px; right: -35px; z-index: 4; padding: 8px 12px;
  border-radius: 10px 10px 10px 2px; background: #171a13; border: 1px solid #424b34;
  color: #cfdac1; font-size: 10px; letter-spacing: .4px; pointer-events: none;
  opacity: 0; translate: -7px 7px; rotate: -5deg; transition: opacity .22s, translate .35s, rotate .35s;
}
.mascot.is-happy .mascot-bubble, .mascot:has(.mascot-hello:hover) .mascot-bubble,
.mascot:has(.mascot-hello:focus-visible) .mascot-bubble { opacity: 1; translate: 0 0; rotate: 0deg; }
.mascot.is-happy .eye { animation: companion-squint .7s ease-in-out; }
.mascot.is-happy .creature-body { animation: companion-wiggle .7s ease-in-out; }
.site-header .wordmark:hover .brand-symbol { rotate: 90deg; }
.brand-symbol { transition: rotate .6s cubic-bezier(.2,.8,.2,1); }
.side-link { position: relative; transition: background .2s, color .2s; }
.side-link.active::before {
  content: ""; position: absolute; width: 2px; top: 12px; bottom: 12px;
  border-radius: 2px; left: -1px; background: #c6d5b2; box-shadow: 0 0 12px #c6d5b238;
}
.side-link:hover .icon { translate: 2px 0; }
.side-link .icon { transition: translate .2s; }
.stat-card > strong { font-variant-numeric: tabular-nums; }
.source-track > span { transform-origin: left center; }
.chart-main { position: relative; }
.traffic-chart { outline-offset: 8px; touch-action: pan-y; }
.chart-tooltip {
  position: absolute; top: -24px; width: 136px; pointer-events: none;
  padding: 13px 15px; border-radius: 8px; border: 1px solid #414733;
  background: #10110ef5; box-shadow: 0 12px 28px #0007; z-index: 4;
  opacity: 0; translate: 0 5px; transition: opacity .15s, translate .15s;
  font-size: 10px; color: #a8b096; line-height: 1.8;
}
.chart-tooltip strong { display: block; font-size: 10px; color: #eff4e5; font-weight: 500; margin-bottom: 6px; }
.chart-tooltip span { display: block; font-variant-numeric: tabular-nums; white-space: pre; }
.chart-tooltip span:last-child { color: #b7ce97; }
.chart-crosshair { opacity: 0; pointer-events: none; transition: opacity .15s; }
.chart-inspecting .chart-tooltip, .chart-inspecting .chart-crosshair { opacity: 1; translate: 0 0; }
.field input { transition: background .2s, border-color .2s, box-shadow .2s; }
.field input:focus { background: #141610; box-shadow: 0 0 0 3px #bacc9d0c; }
.theme-button { transition: border-color .2s, background .2s, translate .2s; }
.theme-button:hover { translate: 0 -2px; }
.theme-button.selected .theme-swatch { box-shadow: 0 0 0 2px #0b0c08, 0 0 0 3px #7e8d68; }
.domain-suggestion { transition: border-color .2s, background .2s, translate .2s; }
.domain-suggestion:hover { translate: 0 -2px; }
.step-dots > span { transition: background .25s, color .25s, border-color .25s; }
.step-dots > span.done { box-shadow: 0 0 18px #d6ddc912; }
.phone-preview { transition: box-shadow .35s, border-color .35s; }
.preview-column:hover .phone-preview, .onboarding-preview:hover .phone-preview { border-color: #616751; box-shadow: 0 0 0 3px #11120d, 0 20px 60px #c6d5b206; }
.toast { display: flex; align-items: center; gap: 11px; }
.toast > .icon { width: 15px; height: 15px; }
.toast.is-leaving { animation: toast-out .2s ease-in forwards; }
#modal[open] { animation: modal-enter .28s cubic-bezier(.2,.8,.2,1); }
.ready-banner {
  display: flex; align-items: center; gap: 15px; padding: 17px 20px;
  margin: -9px 0 28px; background: #10130c; border: 1px solid #343d26; border-radius: 9px;
  animation: modal-enter .5s cubic-bezier(.2,.8,.2,1);
}
.ready-banner > .ready-check {
  width: 33px; height: 33px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid #6d815044; background: #a6bc7810; color: #c6d5b2; flex-shrink: 0;
}
.ready-check .icon { stroke-dasharray: 30; animation: check-draw .55s ease-out; }
.ready-banner > div:nth-child(2) { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ready-banner strong { font-size: 12px; font-weight: 500; color: #d8e1ca; }
.ready-banner p { font-size: 10px; color: #7e8e68; line-height: 1.7; margin-top: 5px; }
.ready-banner .icon-button { color: #7e8e68; }
@keyframes cloalink-spin { to { rotate: 360deg; } }
@keyframes companion-breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.012,1.025); } }
@keyframes companion-orbit { to { rotate: 360deg; } }
@keyframes companion-star { 0%,100% { opacity: .45; scale: .8; } 50% { opacity: 1; scale: 1.1; } }
@keyframes companion-squint { 0%,100% { transform: scaleY(1); } 40%,60% { transform: scaleY(.68); } }
@keyframes companion-wiggle { 0%,100% { rotate: 0deg; } 35% { rotate: -4deg; } 65% { rotate: 3deg; } }
@keyframes modal-enter { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px); } }
@keyframes check-draw { from { stroke-dashoffset: 30; } to { stroke-dashoffset: 0; } }
@media (max-width:650px) {
  .side-link.active::before { left: 35%; right: 35%; width: auto; height: 2px; top: -1px; bottom: auto; }
  .mascot-bubble { right: -22px; font-size: 9px; }
  .ready-banner { padding: 15px 13px; gap: 10px; }
  .ready-banner strong { font-size: 11px; }
  .ready-banner p { font-size: 9px; }
  .ready-banner .button { padding: 0 10px; font-size: 10px; }
}
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .magnetic { translate: 0 0 !important; }
  .spotlight::before, .spotlight::after { display: none; }
}