.hero-mockup{isolation:isolate;--mockup-brand:var(--primary,#4f46e7);width:100%;max-width:none;margin:0 auto;padding:40px 52px 48px 44px;position:relative;overflow:visible}.hero-mockup-core:before{content:"";z-index:0;pointer-events:none;background:radial-gradient(ellipse 42% 38% at 18% 42%, color-mix(in oklab, var(--mockup-brand) 14%, transparent), transparent 70%), radial-gradient(ellipse 38% 36% at 82% 58%, #6366f11f, transparent 72%);filter:blur(28px);opacity:.85;position:absolute;inset:-4% -2%}@supports (color:lab(0% 0 0)){.hero-mockup-core:before{background:radial-gradient(ellipse 42% 38% at 18% 42%, color-mix(in oklab, var(--mockup-brand) 14%, transparent), transparent 70%), radial-gradient(ellipse 38% 36% at 82% 58%, lab(49.0485% 30.3448 -71.8736/.12), transparent 72%)}}.hero-mockup-core{z-index:1;width:100%;min-width:0;position:relative}.hero-mockup .mockup-window{z-index:1;aspect-ratio:16/11;--mockup-lift:0px;width:100%;min-width:0;min-height:clamp(280px,34vw,400px);transform:translateY(var(--mockup-lift));border-radius:22px;flex-direction:column;transition:transform .45s cubic-bezier(.4,0,.2,1),box-shadow .4s,border-color .4s,background .4s;display:flex;position:relative;overflow:hidden}.hero-mockup:hover .mockup-window,.hero-mockup-core:hover .mockup-window{--mockup-lift:-4px}.dark .hero-mockup .mockup-window{border:1px solid color-mix(in oklab, var(--mockup-brand) 22%, transparent);background:linear-gradient(155deg, var(--surface-elevated) 0%, var(--card) 55%, color-mix(in oklab, var(--mockup-brand) 4%, transparent) 100%);box-shadow:0 28px 72px #00000061, 0 0 0 1px color-mix(in oklab, var(--mockup-brand) 14%, transparent), inset 0 1px 0 #ffffff0a}.dark .hero-mockup:hover .mockup-window,.dark .hero-mockup-core:hover .mockup-window{box-shadow:0 32px 72px #0006, 0 0 0 1px color-mix(in oklab, var(--mockup-brand) 18%, transparent), inset 0 1px 0 #ffffff0a}html:not(.dark) .hero-mockup .mockup-window{border:1px solid color-mix(in oklab, var(--mockup-brand) 14%, transparent);background:linear-gradient(155deg, #fff 0%, #f8f6ff 55%, color-mix(in oklab, var(--mockup-brand) 3%, transparent) 100%);box-shadow:0 20px 56px #0f172a1a, 0 0 0 1px color-mix(in oklab, var(--mockup-brand) 10%, transparent), inset 0 1px 0 #ffffffe6}html:not(.dark) .hero-mockup:hover .mockup-window,html:not(.dark) .hero-mockup-core:hover .mockup-window{box-shadow:0 26px 64px #0f172a24, 0 0 0 1px color-mix(in oklab, var(--mockup-brand) 14%, transparent), inset 0 1px 0 #ffffffe6}.hero-mockup .mockup-toolbar{border-bottom:1px solid var(--border);text-align:left;direction:ltr;flex-direction:row-reverse;flex-shrink:0;justify-content:space-between;align-items:center;gap:12px;padding:13px 18px;display:flex}.hero-mockup .mockup-traffic{flex-shrink:0;align-items:center;gap:8px;display:flex}.dark .hero-mockup .mockup-toolbar{background:color-mix(in oklab, var(--mockup-brand) 8%, var(--card))}html:not(.dark) .hero-mockup .mockup-toolbar{background:color-mix(in oklab, var(--mockup-brand) 5%, transparent);border-bottom-color:color-mix(in oklab, var(--mockup-brand) 10%, transparent)}.hero-mockup .mockup-dot{background:color-mix(in oklab, var(--mockup-brand) 35%, transparent);border-radius:50%;width:10px;height:10px}.hero-mockup .mockup-dot:nth-child(2){background:#f59e0b73}.hero-mockup .mockup-dot:nth-child(3){background:#10b98173}.hero-mockup .mockup-url{text-overflow:ellipsis;white-space:nowrap;min-width:0;max-width:min(55%,11rem);color:var(--muted-foreground);text-align:left;direction:ltr;border-radius:999px;flex-shrink:1;margin:0;padding:4px 12px;font-size:.72rem;overflow:hidden}.dark .hero-mockup .mockup-url{background:var(--card)}html:not(.dark) .hero-mockup .mockup-url{color:var(--muted-foreground);border:1px solid color-mix(in oklab, var(--mockup-brand) 10%, transparent);background:#ffffffd9}.hero-mockup .mockup-body{flex:1;grid-template-columns:46px minmax(0,1fr);min-height:0;display:grid}.hero-mockup .mockup-sidebar{border-inline-end:1px solid var(--border);flex-direction:column;gap:12px;padding:14px 8px;display:flex}.dark .hero-mockup .mockup-sidebar{background:color-mix(in oklab, var(--mockup-brand) 6%, var(--card))}html:not(.dark) .hero-mockup .mockup-sidebar{background:color-mix(in oklab, var(--mockup-brand) 4%, transparent);border-inline-end-color:color-mix(in oklab, var(--mockup-brand) 8%, transparent)}.hero-mockup .mockup-nav-item{background:color-mix(in oklab, var(--mockup-brand) 8%, var(--muted));border-radius:8px;height:10px}.hero-mockup .mockup-nav-item.active{background:linear-gradient(90deg, var(--mockup-brand), #6366f1);height:28px}.hero-mockup .mockup-main{flex:1;grid-template-rows:auto minmax(0,1fr);gap:14px;min-width:0;min-height:0;padding:16px 18px 18px;display:grid}.hero-mockup .mockup-stats-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;min-width:0;display:grid}.hero-mockup .mockup-stat-card{color:var(--muted-foreground);border:1px solid color-mix(in oklab, var(--mockup-brand) 14%, transparent);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;border-radius:12px;flex-direction:column;justify-content:center;gap:3px;min-width:0;padding:10px 12px;font-size:.65rem;line-height:1.3;display:flex}.dark .hero-mockup .mockup-stat-card{background:color-mix(in oklab, var(--mockup-brand) 6%, transparent)}html:not(.dark) .hero-mockup .mockup-stat-card{border-color:color-mix(in oklab, var(--mockup-brand) 12%, transparent);background:#ffffffe6}.hero-mockup .mockup-stat-value{color:var(--mockup-brand);letter-spacing:-.02em;font-size:1rem;font-weight:800;line-height:1.15;display:block}.dark .hero-mockup .mockup-stat-value{color:#a5b4fc}.hero-mockup .mockup-stat-label{line-height:1.25;display:block}.hero-mockup .mockup-stat-label--compact{display:none}.hero-mockup .mockup-chart{border:1px solid color-mix(in oklab, var(--mockup-brand) 16%, transparent);border-radius:14px;height:100%;min-height:clamp(148px,24vw,240px);position:relative;overflow:hidden}.dark .hero-mockup .mockup-chart{background:linear-gradient(180deg, color-mix(in oklab, var(--mockup-brand) 10%, transparent) 0%, transparent 42%), repeating-linear-gradient(0deg, color-mix(in oklab, var(--mockup-brand) 6%, transparent) 0, color-mix(in oklab, var(--mockup-brand) 6%, transparent) 1px, transparent 1px, transparent 28px), repeating-linear-gradient(90deg, color-mix(in oklab, var(--mockup-brand) 10%, transparent) 0, color-mix(in oklab, var(--mockup-brand) 10%, transparent) 1px, transparent 1px, transparent 32px);box-shadow:inset 0 1px #ffffff08}html:not(.dark) .hero-mockup .mockup-chart{border-color:color-mix(in oklab, var(--mockup-brand) 12%, transparent);background:linear-gradient(180deg, color-mix(in oklab, var(--mockup-brand) 6%, transparent) 0%, transparent 42%), repeating-linear-gradient(0deg, color-mix(in oklab, var(--mockup-brand) 5%, transparent) 0, color-mix(in oklab, var(--mockup-brand) 5%, transparent) 1px, transparent 1px, transparent 28px), repeating-linear-gradient(90deg, color-mix(in oklab, var(--mockup-brand) 7%, transparent) 0, color-mix(in oklab, var(--mockup-brand) 7%, transparent) 1px, transparent 1px, transparent 32px);box-shadow:inset 0 1px #ffffff80}.hero-mockup .mockup-chart:before{content:"";background:radial-gradient(ellipse 80% 60% at 50% 100%, color-mix(in oklab, var(--mockup-brand) 12%, transparent), transparent 70%);pointer-events:none;position:absolute;inset:0}.hero-mockup .mockup-chart:after{content:"";background:linear-gradient(to top, color-mix(in oklab, var(--mockup-brand) 62%, transparent) 0%, #6366f161 45%, #2563eb1f 100%);clip-path:polygon(0% 78%,10% 62%,22% 68%,34% 44%,48% 52%,62% 28%,76% 36%,88% 18%,100% 8%,100% 100%,0% 100%);filter:drop-shadow(0 4px 16px color-mix(in oklab, var(--mockup-brand) 20%, transparent));border-radius:10px;position:absolute;inset:14% 7% 10%}@supports (color:lab(0% 0 0)){.hero-mockup .mockup-chart:after{background:linear-gradient(to top, color-mix(in oklab, var(--mockup-brand) 62%, transparent) 0%, lab(49.0485% 30.3448 -71.8736/.38) 45%, lab(44.7906% 21.0478 -75.5989/.12) 100%)}}.hero-mockup .shimmer-panel:before{content:"";pointer-events:none;background:linear-gradient(90deg,#0000,#ffffff0f,#0000);animation:3s ease-in-out infinite hero-mockup-shimmer;position:absolute;inset:0}html:not(.dark) .hero-mockup .shimmer-panel:before{background:linear-gradient(90deg, transparent, color-mix(in oklab, var(--mockup-brand) 6%, transparent), transparent)}@keyframes hero-mockup-shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.hero-mockup .hero-float-shell{z-index:3;pointer-events:none;position:absolute}.hero-mockup .hero-float-card{text-align:center;width:100%;color:var(--muted-foreground);border:1px solid color-mix(in oklab, var(--mockup-brand) 22%, transparent);background:var(--glass-card-bg);box-shadow:var(--shadow-subtle);-webkit-backdrop-filter:none;-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;border-radius:14px;padding:10px 16px;font-size:.78rem;font-weight:600;line-height:1.4;position:relative;transform:none}.hero-mockup .hero-float-card__emoji{margin-inline-end:.25rem}.hero-mockup .hero-float-card__label--compact{display:none}.dark .hero-mockup .hero-float-card{box-shadow:0 10px 28px #00000038}html:not(.dark) .hero-mockup .hero-float-card{color:var(--foreground);border-color:color-mix(in oklab, var(--mockup-brand) 16%, transparent);box-shadow:0 12px 32px #0f172a1a}.hero-mockup .hero-float-shell--top{width:9.25rem;margin-left:-4.625rem;top:-2px;left:56%}.hero-mockup .hero-float-shell--right{width:8.25rem;top:44%;right:-12px}.hero-mockup .hero-float-shell--bottom{width:9.75rem;margin-left:-4.875rem;bottom:-2px;left:50%}.hero-mockup .hero-float-shell--left{width:8.25rem;top:32%;left:-12px}@media (hover:hover) and (prefers-reduced-motion:no-preference){.hero-mockup .hero-float-shell--top{animation:5.2s ease-in-out infinite hero-float-shell-y}.hero-mockup .hero-float-shell--right{animation:5.2s ease-in-out .5s infinite hero-float-shell-y}.hero-mockup .hero-float-shell--bottom{animation:5.2s ease-in-out 1s infinite hero-float-shell-y}.hero-mockup .hero-float-shell--left{animation:5.2s ease-in-out 1.5s infinite hero-float-shell-y}}@keyframes hero-float-shell-y{0%,to{translate:0}50%{translate:0 -7px}}@media (max-width:640px){.hero-mockup{padding:28px 20px 32px 16px}.hero-mockup-core:before{display:none}.hero-mockup .mockup-window{aspect-ratio:auto;min-height:300px;transform:none!important}.hero-mockup .hero-float-shell{animation:none!important;translate:none!important}.hero-mockup .hero-float-card{color:var(--foreground);-webkit-font-smoothing:subpixel-antialiased;text-rendering:auto;padding:8px 10px;font-size:.75rem;font-weight:700;line-height:1.35;box-shadow:0 4px 14px #0f172a1f}.dark .hero-mockup .hero-float-card{box-shadow:0 6px 18px #00000059}.hero-mockup .hero-float-card__emoji{vertical-align:middle;font-size:.875rem;line-height:1;display:inline}.hero-mockup .hero-float-card__label--full{display:none}.hero-mockup .hero-float-card__label--compact{display:block}.hero-mockup .hero-float-shell--top{width:7.25rem;margin-left:-3.625rem;top:0;left:50%}.hero-mockup .hero-float-shell--right{width:7.5rem;top:46%;right:-4px}.hero-mockup .hero-float-shell--left{width:6.5rem;top:30%;left:-4px}.hero-mockup .hero-float-shell--bottom{width:7rem;margin-left:-3.5rem;bottom:0;left:50%}.hero-mockup .mockup-body{grid-template-columns:34px minmax(0,1fr)}.hero-mockup .mockup-sidebar{gap:8px;padding:10px 5px}.hero-mockup .mockup-nav-item.active{height:22px}.hero-mockup .mockup-main{gap:8px;padding:10px 10px 12px}.hero-mockup .mockup-chart{min-height:118px}.hero-mockup .mockup-stats-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.hero-mockup .mockup-stat-card{text-align:center;-webkit-font-smoothing:subpixel-antialiased;flex-direction:column;justify-content:center;align-items:center;gap:2px;padding:6px 3px;font-size:.5625rem}.hero-mockup .mockup-stat-value{font-size:.8125rem;line-height:1.1}.hero-mockup .mockup-stat-label--full{display:none}.hero-mockup .mockup-stat-label--compact{overflow-wrap:anywhere;max-width:100%;line-height:1.25;display:block}.hero-mockup .mockup-url{max-width:min(100%,9.5rem);padding:3px 10px;font-size:.6875rem}.hero-mockup .mockup-toolbar{padding:10px 12px}}@media (prefers-reduced-motion:reduce){.hero-mockup .hero-float-shell,.hero-mockup .shimmer-panel:before{animation:none}.hero-mockup .mockup-window{transition:none}}