.hero-mockup{position:absolute;right:0;top:0;width:460px;height:360px;pointer-events:none;display:none;z-index:1}@media(min-width:1024px){.hero-mockup{display:block}}.hero-mockup__browser{position:absolute;inset:0 70px 70px 0;background:color-mix(in oklab,var(--color-cream) 92%,white);border:1px solid color-mix(in oklab,var(--color-forest) 18%,transparent);border-radius:12px;box-shadow:0 1px color-mix(in oklab,white 60%,transparent) inset,0 30px 60px -30px color-mix(in oklab,var(--color-forest) 35%,transparent);overflow:hidden}.hero-mockup__chrome{height:28px;display:flex;align-items:center;gap:6px;padding:0 12px;border-bottom:1px solid color-mix(in oklab,var(--color-forest) 10%,transparent);background:color-mix(in oklab,var(--color-cream) 90%,var(--color-forest) 10%)}.hero-mockup__dot{width:8px;height:8px;border-radius:50%;background:color-mix(in oklab,var(--color-forest) 22%,transparent)}.hero-mockup__url{margin-left:14px;font-size:9px;font-weight:500;color:color-mix(in oklab,var(--color-forest) 60%,transparent);background:color-mix(in oklab,var(--color-cream) 30%,white);padding:3px 14px;border-radius:999px;border:1px solid color-mix(in oklab,var(--color-forest) 8%,transparent);letter-spacing:.02em}.hero-mockup__viewport{position:relative;height:calc(100% - 28px);background:color-mix(in oklab,var(--color-cream) 92%,white)}.hero-mockup__layout{position:absolute;inset:0;padding:12px 14px;display:flex;flex-direction:column;gap:14px}.hero-mockup__layout--desktop{animation:mockup-desktop 7s cubic-bezier(.4,0,.2,1) infinite}.hero-mockup__layout--mobile{animation:mockup-mobile 7s cubic-bezier(.4,0,.2,1) infinite}@keyframes mockup-desktop{0%,42%{opacity:1}50%,92%{opacity:0}to{opacity:1}}@keyframes mockup-mobile{0%,42%{opacity:0}50%,92%{opacity:1}to{opacity:0}}.mock-nav{display:flex;align-items:center;justify-content:space-between;height:14px}.mock-logo{width:56px;height:6px;background:color-mix(in oklab,var(--color-forest) 50%,transparent);border-radius:2px}.mock-nav-right{display:flex;align-items:center;gap:8px}.mock-navlink{display:inline-block;width:22px;height:4px;background:color-mix(in oklab,var(--color-forest) 22%,transparent);border-radius:2px}.mock-cta{width:36px;height:10px;background:var(--color-forest);border-radius:999px}.mock-cta--lg{width:52px;height:12px}.mock-hamburger{width:12px;height:12px;border:1px solid color-mix(in oklab,var(--color-forest) 35%,transparent);border-radius:999px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1.5px}.mock-hamburger:before,.mock-hamburger:after{content:"";width:6px;height:1px;background:color-mix(in oklab,var(--color-forest) 50%,transparent)}.mock-hero{display:flex;flex-direction:column;gap:6px;padding:6px 0 2px}.mock-eyebrow{width:40px;height:3px;background:color-mix(in oklab,var(--color-muted) 50%,transparent);border-radius:999px}.mock-headline--xl{width:50%;height:10px;background:color-mix(in oklab,var(--color-forest) 35%,transparent);border-radius:999px}.mock-headline--lg{width:60%;height:8px;background:color-mix(in oklab,var(--color-forest) 35%,transparent);border-radius:999px}.mock-headline--md{width:70%;height:6px;background:color-mix(in oklab,var(--color-forest) 22%,transparent);border-radius:999px;margin-top:2px}.mock-services{display:grid;gap:8px;flex:1;min-height:0}.mock-services--desktop{grid-template-columns:1fr 1fr 1fr}.mock-services--mobile{grid-template-columns:1fr}.mock-service{background:color-mix(in oklab,var(--color-sage) 22%,transparent);border:1px solid color-mix(in oklab,var(--color-forest) 10%,transparent);border-radius:4px;min-height:28px}.hero-mockup__phone{position:absolute;right:0;bottom:0;width:110px;height:215px;background:color-mix(in oklab,var(--color-cream) 92%,white);border:1.5px solid color-mix(in oklab,var(--color-forest) 30%,transparent);border-radius:22px;padding:14px 8px;box-shadow:0 30px 60px -30px color-mix(in oklab,var(--color-forest) 45%,transparent)}.hero-mockup__phone-notch{position:absolute;top:7px;left:50%;transform:translate(-50%);width:36px;height:4px;background:color-mix(in oklab,var(--color-forest) 30%,transparent);border-radius:999px}.hero-mockup__phone-screen{margin-top:8px;background:color-mix(in oklab,var(--color-cream) 60%,white);border-radius:14px;padding:8px;height:calc(100% - 8px);overflow:hidden;position:relative}.hero-mockup__scroller{display:flex;flex-direction:column;gap:10px;animation:mockup-phone-scroll 11s cubic-bezier(.55,0,.45,1) infinite}.mock-nav--phone{height:10px;flex-shrink:0}.mock-nav--phone .mock-logo{width:38px;height:4px}.mock-nav--phone .mock-hamburger{width:9px;height:9px}.mock-nav--phone .mock-hamburger:before,.mock-nav--phone .mock-hamburger:after{width:4px}.mock-hero--phone{gap:4px;padding:0;flex-shrink:0}.mock-hero--phone .mock-eyebrow{width:26px;height:3px}.mock-hero--phone .mock-headline--lg{height:10px}.mock-hero--phone .mock-headline--md{height:7px}.mock-hero--phone .mock-cta--lg{width:38px;height:9px;margin-top:4px}.mock-service--phone{height:38px;flex-shrink:0}.mock-cta-card{background:var(--color-forest);border-radius:6px;height:60px;flex-shrink:0}@keyframes mockup-phone-scroll{0%,14%{transform:translateY(0)}55%,86%{transform:translateY(calc(-100% + 165px))}to{transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.hero-mockup__layout--desktop,.hero-mockup__layout--mobile,.hero-mockup__scroller{animation:none}.hero-mockup__layout--mobile{display:none}}
