.hero{padding-block:clamp(2.5rem,6vw,4.5rem) clamp(3rem,6vw,4.5rem);background:linear-gradient(180deg,var(--brand-50),var(--surface) 70%)}.hero__inner{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(2rem,5vw,3.5rem);align-items:center}.hero h1{margin:0;font-size:clamp(2.4rem,1.6rem + 3vw,3.6rem);line-height:1.08;letter-spacing:-.03em}.hero h1 em{font-style:normal;color:var(--brand-600)}.hero__kicker{display:block;margin-bottom:.875rem;font-size:.95rem;font-weight:600;line-height:1.4;letter-spacing:0;color:var(--brand-700)}.hero__lede{max-width:34em;margin:1.25rem 0 0;font-size:1.125rem;color:var(--ink-600)}.hero__actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.75rem}.hero__note{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;margin:1.5rem 0 0;font-size:.92rem;color:var(--ink-600)}.hero__note span{display:inline-flex;align-items:center;gap:.375rem}.hero__note svg{color:var(--ok-600)}.hero__device{position:relative;margin:0}.hero__screen{overflow:hidden;border:10px solid #1d2235;border-bottom-width:14px;border-radius:16px 16px 6px 6px;background:var(--surface);box-shadow:var(--sh-lg)}.hero__screen img{display:block;width:100%;height:auto}.hero__base{height:14px;margin:0 -6%;border-radius:0 0 14px 14px;background:linear-gradient(#d9dde7,#b9c0cf)}.hero__float{position:absolute;padding:.75rem 1rem;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);box-shadow:var(--sh-md);font-size:.85rem;color:var(--ink-600);animation:hero-bob 6s ease-in-out infinite}.hero__float strong{display:block;font-size:1.35rem;line-height:1.2;color:var(--ink-900)}.hero__float--a{top:44%;left:-1.75rem}.hero__float--b{right:-1.125rem;bottom:-1.375rem;display:flex;gap:.625rem;align-items:center;animation-delay:3s}.hero__float--b strong{font-size:.95rem}.hero__tick{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#e7f6ee;color:var(--ok-600)}@keyframes hero-bob{50%{transform:translateY(-6px)}}@media (max-width: 900px){.hero__inner{grid-template-columns:1fr}.hero__float--a{left:.5rem}.hero__float--b{right:.5rem}}@media (max-width: 560px){.hero__float--a{display:none}.hero__float--b{right:.25rem;bottom:-1.875rem;padding:.5rem .75rem}}