.hero{background:linear-gradient(180deg,var(--bg) 0,var(--primary-light) 100%);display:flex;min-height:100vh;overflow:hidden;padding:10rem 3rem 6rem}.hero,.hero-container{align-items:center;margin:0 auto;position:relative}.hero-container{display:grid;gap:4rem;grid-template-columns:1fr 1fr;max-width:var(--max-width);width:100%;z-index:10}.hero-content{max-width:520px}.hero h1{color:var(--text);font-size:clamp(2rem,5vw,3.5rem);font-weight:700;letter-spacing:-.03em;line-height:1.15;margin-bottom:2rem;white-space:nowrap}.hero-title{background:linear-gradient(135deg,var(--primary) 0,var(--accent) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:gradientShift 8s ease-in-out infinite;background-clip:text;background-size:200% 200%}.hero .subtitle{color:var(--text-light);font-size:clamp(1rem,2.5vw,1.25rem);font-weight:400;line-height:1.8;margin-bottom:3rem}.hero-actions{display:flex;gap:1.25rem}.hero-visual{height:500px}.hero-visual,.visual-content{align-items:center;display:flex;justify-content:center;position:relative}.visual-content{height:100%;width:100%}.devices-stage{margin:0 auto;max-width:700px}.devices-container,.devices-stage{height:100%;position:relative;width:100%}.device-wrapper{position:absolute}.mac-wrapper{animation:floatMac 4s ease-in-out infinite;left:10%;top:50%;transform:translateY(-50%);z-index:1}.iphone-wrapper{animation:floatPhone 4s ease-in-out infinite;animation-delay:-2s;bottom:15%;right:10%;z-index:2}.device-image{filter:drop-shadow(0 20px 40px rgba(30,58,138,.2)) drop-shadow(0 40px 80px rgba(30,58,138,.1));transition:transform .4s cubic-bezier(.4,0,.2,1);will-change:transform}.mac-image{width:450px}.iphone-image,.mac-image{display:block;height:auto;-o-object-fit:contain;object-fit:contain}.iphone-image{width:110px}.hero-visual:hover .mac-wrapper{transform:translateY(-50%) translateX(-10px) scale(1.02)}.hero-visual:hover .iphone-wrapper{transform:translateX(10px) scale(1.02)}@keyframes floatMac{0%,to{transform:translateY(-50%)}50%{transform:translateY(calc(-50% - 15px))}}@keyframes floatPhone{0%,to{transform:translateY(0)}50%{transform:translateY(-20px)}}.recording-indicator{align-items:center;background:#fff;border:1px solid var(--border);border-radius:100px;box-shadow:0 4px 12px rgba(0,0,0,.08);display:inline-flex;gap:.75rem;padding:.75rem 1.5rem}.recording-indicator span{color:var(--text);font-size:.875rem;font-weight:500}.rec-dot{animation:pulse 2s infinite;background:#f44;border-radius:50%;height:8px;width:8px}.waveform{align-items:center;background:#fff;border-radius:15px;box-shadow:var(--shadow-sm);display:flex;gap:4px;height:60px;margin:2rem 0;padding:1rem}.wave-bar{animation:wave 1.5s ease-in-out infinite;background:linear-gradient(180deg,var(--primary),var(--accent));border-radius:3px;flex:1;opacity:.8}.wave-bar:nth-child(odd){animation-delay:.1s}.wave-bar:nth-child(2n){animation-delay:.3s}#hero-canvas-container{height:100%;left:0;opacity:.6;pointer-events:none;position:absolute;top:0;width:100%;z-index:1}@keyframes gradientShift{0%,to{background-position:0 50%}50%{background-position:100% 50%}}.hero-cta{overflow:hidden;position:relative}.hero-cta:before{background:linear-gradient(90deg,transparent,hsla(0,0%,100%,.3),transparent);content:"";height:100%;left:-100%;position:absolute;top:0;transition:left .5s ease;width:100%}.hero-cta:hover:before{left:100%}