.hero{align-items:center;background:radial-gradient(ellipse at top,rgba(59,130,246,.05),transparent 50%),var(--color-bg);display:flex;flex-direction:column;overflow:hidden;padding:var(--space-xl) var(--space-md) var(--space-2xl);position:relative;text-align:center;width:100%}.hero:after,.hero:before{content:"";pointer-events:none;position:absolute}.hero:before{animation:floatOrbs 30s ease-in-out infinite;background:radial-gradient(circle at 20% 30%,rgba(59,130,246,.15) 0,transparent 40%),radial-gradient(circle at 80% 70%,rgba(16,185,129,.1) 0,transparent 40%);height:200%;left:-25%;mix-blend-mode:multiply;opacity:.3;top:-50%;width:150%}@keyframes floatOrbs{0%,to{transform:translate(0) rotate(0)}33%{transform:translate(30px,-30px) rotate(120deg)}66%{transform:translate(-20px,20px) rotate(240deg)}}.hero:after{animation:scanlines 8s linear infinite;background-image:linear-gradient(rgba(37,99,235,.05) 1px,transparent 0),linear-gradient(90deg,rgba(37,99,235,.05) 1px,transparent 0),repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(37,99,235,.01) 0,rgba(37,99,235,.01) 4px);background-size:100px 100px,100px 100px,100% 4px;bottom:0;height:100%;left:0;opacity:.7;right:0;transform:perspective(500px) rotateX(60deg);transform-origin:bottom}@keyframes scanlines{0%{background-position:0 0,0 0,0 0}to{background-position:0 0,0 0,0 8px}}.hero__badge{align-items:center;animation:slideDown .6s ease-out;backdrop-filter:blur(10px);background:linear-gradient(135deg,#fffffff2,#f8fafce6);background-clip:padding-box;border:2px solid transparent;border-radius:var(--radius-full);box-shadow:0 4px 12px #00000014,inset 0 1px #fffc;display:inline-flex;gap:var(--space-xs);margin-bottom:var(--space-lg);padding:var(--space-xs) var(--space-md);position:relative}.hero__badge:before{background:linear-gradient(135deg,var(--color-primary),var(--color-success));border-radius:var(--radius-full);content:"";inset:0;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.5;padding:2px;position:absolute}@keyframes slideDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.hero__badge-dot{animation:pulse 2s infinite;background:var(--color-success);border-radius:50%;height:8px;width:8px}@keyframes pulse{0%,to{box-shadow:0 0 #10b98166;transform:scale(1)}50%{box-shadow:0 0 0 10px #10b98100;transform:scale(1.2)}}.hero__badge-text{color:var(--color-text);font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);letter-spacing:var(--letter-spacing-wider);text-transform:uppercase}.hero__badge-link{align-items:center;color:inherit;display:inline-flex;gap:var(--space-xs);text-decoration:none;transition:opacity .2s ease}.hero__badge-link:hover{opacity:.8}.hero__title{background:linear-gradient(135deg,#2563eb,#3b82f6 25%,#1e40af,#3730a3 75%,#2563eb);-webkit-background-clip:text;background-size:200% 200%;font-size:clamp(2rem,4.5vw,4rem);font-weight:var(--font-weight-extrabold);line-height:var(--line-height-tight);margin:0 auto var(--space-lg);max-width:1000px;padding:0 var(--space-lg);-webkit-text-fill-color:transparent;animation:fadeInUp .8s ease-out .2s backwards,shimmer 3s ease-in-out infinite;background-clip:text;position:relative;text-shadow:0 0 40px rgba(59,130,246,.3);text-wrap:balance;text-wrap:pretty;z-index:1}@keyframes shimmer{0%,to{background-position:0 50%}50%{background-position:100% 50%}}.hero__title:before{background:var(--gradient-primary);-webkit-background-clip:text;content:attr(data-text);inset:0;position:absolute;-webkit-text-fill-color:transparent;background-clip:text;filter:blur(20px);opacity:.5;z-index:-1}.hero__subtitle{animation:fadeInUp .8s ease-out .1s backwards;color:var(--color-text-light);font-size:clamp(1.125rem,2vw,1.25rem);font-weight:var(--font-weight-normal);line-height:var(--line-height-relaxed);margin:0 auto var(--space-lg);max-width:900px;padding:0 var(--space-lg);text-align:center;text-wrap:balance;width:100%}.hero__description{animation:fadeInUp .8s ease-out .4s backwards;color:var(--color-text-light);font-size:clamp(1.125rem,2vw,1.25rem);line-height:var(--line-height-relaxed);margin:0 auto var(--space-xl);max-width:800px;position:relative;text-wrap:balance;z-index:1}.hero__description code{background:var(--color-primary-lighter);border:1px solid var(--color-primary-light);border-radius:var(--radius-md);color:var(--color-primary-dark);font-family:var(--font-family-mono);font-size:.9em;padding:var(--space-xs) var(--space-sm);white-space:nowrap}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.hero__actions{animation:fadeInUp .8s ease-out .6s backwards;display:flex;flex-wrap:wrap;gap:var(--space-md);justify-content:center;margin-top:var(--space-xl);position:relative;z-index:1}.hero__action{align-items:center;border-radius:var(--radius-lg);display:inline-flex;font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);gap:var(--space-sm);overflow:hidden;padding:var(--space-md) var(--space-xl);position:relative;text-decoration:none;transform:translateZ(0);transition:all var(--transition-base)}.hero__action-icon{animation:bounce 2s infinite;display:inline-flex;font-size:1.25em}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-3px)}}@media (max-width:767px){.hero{padding:var(--space-lg) var(--space-md) var(--space-xl)}.hero__subtitle{font-size:var(--font-size-base);padding:0 var(--space-md)}.hero__description{padding:0 var(--space-md)}.hero__actions{flex-direction:column;margin-left:auto;margin-right:auto;max-width:300px;width:100%}.hero__action{justify-content:center;width:100%}}@media (min-width:768px) and (max-width:1023px){.hero__title{font-size:2.25rem;letter-spacing:-.02em;line-height:1.15;max-width:700px;padding:0 var(--space-lg)}}@media (width:768px){.hero__title{font-size:2.1rem;padding:0 var(--space-md)}}@media (min-width:768px) and (max-width:820px){.hero__title{font-size:2.2rem}}@media (min-width:1024px){.hero{padding:var(--space-2xl) 0 var(--space-2xl)}.hero__title{font-size:clamp(3rem,5vw,4.5rem)}}.dark-mode .hero{background:var(--color-bg)}.dark-mode .hero:before{opacity:.08}.dark-mode .hero__badge{background:#0000004d;border-color:#fff3;box-shadow:0 2px 8px #0003}.dark-mode .hero__description code{background:var(--color-bg-tertiary);border-color:var(--color-border);color:var(--color-primary-light)}
