:root{--bg-primary:#ead5ce;--bg-secondary:#e2ccc4;--bg-elevated:#f5ebe7;--bg-card:hsla(0,0%,100%,.85);--accent-primary:#8b4557;--accent-secondary:#a35567;--accent-tertiary:#6b3344;--accent-glow:#8b4557;--text-primary:#2d2d2d;--text-secondary:#4a4a4a;--text-tertiary:#5a5a5a;--border-subtle:rgba(139,69,87,.12);--border-light:rgba(139,69,87,.2);--gradient-accent:linear-gradient(135deg,var(--accent-primary) 0%,var(--accent-secondary) 100%);--gradient-glow:radial-gradient(circle,var(--accent-primary) 0%,transparent 70%);--gradient-card:linear-gradient(180deg,hsla(0,0%,100%,.3),transparent);--space-xs:4px;--space-sm:8px;--space-md:16px;--space-lg:24px;--space-xl:32px;--space-2xl:48px;--space-3xl:64px;--space-4xl:96px;--font-display:"Instrument Serif",Georgia,serif;--font-body:"Syne",-apple-system,BlinkMacSystemFont,sans-serif;--ease-out-expo:cubic-bezier(.16,1,.3,1);--ease-out-quart:cubic-bezier(.25,1,.5,1)}*,:after,:before{box-sizing:border-box;margin:0;padding:0}img{height:auto;max-width:100%}html{scroll-behavior:smooth}body{background:var(--bg-primary);color:var(--text-primary);font-family:var(--font-body);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}::-moz-selection{background:var(--accent-primary);color:#fff}::selection{background:var(--accent-primary);color:#fff}.container{margin:0 auto;max-width:1200px;padding:0 var(--space-lg)}.landing-page{overflow-x:hidden;position:relative}.ambient-glow{animation-delay:.5s;animation-fill-mode:forwards;border-radius:50%;filter:blur(150px);opacity:0;pointer-events:none;position:fixed;will-change:transform,opacity;z-index:0}@keyframes fadeInGlow{to{opacity:.25}}.glow-1{animation:fadeInGlow .5s ease-out .5s forwards,float 20s ease-in-out 1s infinite;background:#d4b5a9;height:600px;right:-100px;top:-200px;width:600px}.glow-2{animation:fadeInGlow .5s ease-out .6s forwards,float 25s ease-in-out 1.1s infinite reverse;background:#c9a598;bottom:20%;height:500px;left:-150px;width:500px}.glow-3{animation:fadeInGlow .5s ease-out .7s forwards,float 18s ease-in-out 1.2s infinite;background:#bfa094;height:400px;right:-100px;top:50%;width:400px}@keyframes float{0%,to{transform:translate(0) scale(1)}33%{transform:translate(30px,-30px) scale(1.05)}66%{transform:translate(-20px,20px) scale(.95)}}.grain-overlay{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cfilter id='a'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='4' stitchTiles='stitch' type='fractalNoise'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");height:100%;opacity:.03;pointer-events:none;width:100%;z-index:1000}.grain-overlay,.nav{left:0;position:fixed;top:0}.nav{padding:var(--space-md) 0;right:0;transition:all .4s var(--ease-out-expo);z-index:100}.nav.scrolled{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#ead4cde6;border-bottom:1px solid var(--border-subtle)}.nav-container{justify-content:space-between}.logo,.nav-container{align-items:center;display:flex}.logo{gap:var(--space-sm);position:relative}.logo-glow{background:var(--accent-primary);border-radius:50%;filter:blur(25px);height:60px;left:-10px;opacity:.3;position:absolute;width:60px}.logo-icon{border-radius:10px;height:36px;width:36px}.logo-icon,.logo-text{position:relative;z-index:1}.logo-text{font-family:var(--font-display);font-size:1.25rem;font-weight:400;letter-spacing:-.02em}.nav-cta{align-items:center;background:var(--border-subtle);border:1px solid var(--border-light);border-radius:100px;color:var(--text-primary);display:flex;font-size:.875rem;font-weight:500;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);text-decoration:none;transition:all .3s var(--ease-out-expo)}.nav-cta:hover{background:var(--border-light);transform:translateY(-2px)}.nav-cta svg{transition:transform .3s var(--ease-out-expo)}.nav-cta:hover svg{transform:translate(2px,-2px)}.hero{align-items:center;display:flex;min-height:100vh;padding:120px 0 80px;position:relative}.hero-content{align-items:center;display:grid;gap:var(--space-4xl);grid-template-columns:1fr 1fr}.hero-eyebrow{align-items:center;color:var(--accent-primary);display:flex;font-size:.75rem;font-weight:600;gap:var(--space-md);letter-spacing:.15em;margin-bottom:var(--space-lg);text-transform:uppercase}.eyebrow-line{background:var(--gradient-accent);height:2px;width:40px}.hero-title{font-family:var(--font-display);font-size:clamp(3rem,8vw,5.5rem);font-weight:400;letter-spacing:-.03em;line-height:1;margin-bottom:var(--space-xl)}.title-line{display:block}.title-accent{background:var(--gradient-accent);-webkit-background-clip:text;font-style:italic;-webkit-text-fill-color:transparent;background-clip:text}.hero-subtitle{color:var(--text-secondary);font-size:1.125rem;line-height:1.7;margin-bottom:var(--space-2xl);max-width:480px}.hero-actions{display:flex;gap:var(--space-md);margin-bottom:var(--space-3xl)}.btn-primary{align-items:center;background:var(--gradient-accent);border-radius:100px;box-shadow:0 4px 24px #8b455740;color:#fff;display:inline-flex;font-size:.9375rem;font-weight:600;gap:var(--space-sm);padding:var(--space-md) var(--space-xl);text-decoration:none;transition:all .3s var(--ease-out-expo)}.btn-primary:hover{box-shadow:0 8px 32px #8b455759;transform:translateY(-2px)}.btn-icon-wrap{align-items:center;display:flex;justify-content:center}.btn-ghost{align-items:center;background:transparent;border:1px solid var(--border-light);border-radius:100px;color:var(--text-primary);display:inline-flex;font-size:.9375rem;font-weight:500;gap:var(--space-sm);padding:var(--space-md) var(--space-lg);text-decoration:none;transition:all .3s var(--ease-out-expo)}.btn-ghost:hover{background:var(--border-subtle);border-color:var(--border-light)}.btn-ghost svg{animation:bounce 2s ease-in-out infinite}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(3px)}}.hero-stats{align-items:center;display:flex;gap:var(--space-xl)}.stat{display:flex;flex-direction:column;gap:var(--space-xs)}.stat-value{font-family:var(--font-display);font-size:1.5rem;font-weight:400;letter-spacing:-.02em}.stat-label{color:var(--text-tertiary);font-size:.75rem;letter-spacing:.05em;text-transform:uppercase}.stat-divider{background:var(--border-subtle);height:40px;width:1px}.hero-visual{align-items:center;display:flex;justify-content:center;position:relative}.phone-container{position:relative;width:280px}.phone-glow{background:var(--accent-primary);border-radius:50%;filter:blur(80px);height:400px;left:50%;opacity:.15;position:absolute;top:50%;transform:translate(-50%,-50%);width:300px;z-index:0}.phone-frame{border-radius:45px;box-shadow:0 50px 100px #00000026,0 0 0 8px #2d2d2d,0 0 0 10px #1a1a1a;overflow:hidden;position:relative;width:280px;z-index:2}.phone-notch{background:#1a1a1a;border-radius:16px;height:24px;left:50%;position:absolute;top:8px;transform:translate(-50%);width:100px;z-index:10}.phone-screenshot{border-radius:37px;display:block;height:auto;width:100%}.floating-card{align-items:center;animation:floatCard 6s ease-in-out infinite;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#ffffffe6;border:1px solid var(--border-light);border-radius:12px;box-shadow:0 4px 20px #00000014;color:var(--text-secondary);display:flex;font-size:.75rem;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);position:absolute;z-index:10}.card-1{animation-delay:0s;right:-20px;top:15%}.card-2{animation-delay:2s;bottom:20%;left:-30px}@keyframes floatCard{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.card-icon{align-items:center;background:#4caf5033;border-radius:6px;color:#4caf50;display:flex;height:24px;justify-content:center;width:24px}.card-icon.theme-icon{background:#ff6b3533;color:var(--accent-primary)}.card-avatar-stack{display:flex}.mini-avatar{background:var(--gradient-accent);border:2px solid #fff;border-radius:50%;height:20px;margin-left:-6px;width:20px}.mini-avatar:first-child{margin-left:0}.hero-scroll-indicator{align-items:center;bottom:var(--space-2xl);color:var(--text-tertiary);display:flex;flex-direction:column;font-size:.75rem;gap:var(--space-sm);left:50%;letter-spacing:.05em;position:absolute;transform:translate(-50%)}.scroll-line{animation:scrollPulse 2s ease-in-out infinite;background:linear-gradient(to bottom,var(--text-tertiary),transparent);height:40px;width:1px}@keyframes scrollPulse{0%,to{opacity:.3;transform:scaleY(1)}50%{opacity:1;transform:scaleY(1.2)}}.features{padding:var(--space-4xl) 0;position:relative;z-index:1}.section-header{margin:0 auto var(--space-4xl);max-width:600px;text-align:center}.section-tag{background:#8b455726;border-radius:100px;color:#6b3344;display:inline-block;font-size:.75rem;font-weight:600;letter-spacing:.1em;padding:var(--space-xs) var(--space-md);text-transform:uppercase}.section-tag,.section-title{margin-bottom:var(--space-lg)}.section-title{font-family:var(--font-display);font-size:clamp(2.5rem,5vw,3.5rem);font-weight:400;letter-spacing:-.02em;line-height:1.1}.section-subtitle{color:var(--text-secondary);font-size:1.125rem;line-height:1.6}.bento-grid{display:grid;gap:var(--space-lg);grid-template-columns:repeat(3,1fr)}.bento-card{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:24px;box-shadow:0 4px 20px #0000000a;overflow:hidden;padding:var(--space-xl);position:relative;transition:all .4s var(--ease-out-expo)}.bento-card:before{background:var(--gradient-card);content:"";inset:0;opacity:0;position:absolute;transition:opacity .4s var(--ease-out-expo)}.bento-card:hover{border-color:var(--border-light);box-shadow:0 8px 30px #00000014;transform:translateY(-4px)}.bento-card:hover:before{opacity:1}.bento-large{display:flex;flex-direction:column;grid-row:span 2}.bento-large,.bento-wide{grid-column:span 2}.bento-visual{border-radius:24px 24px 0 0;flex:1;margin:calc(var(--space-xl)*-1);margin-bottom:var(--space-xl);min-height:200px;overflow:hidden;position:relative}.visual-gradient{background:linear-gradient(135deg,var(--accent-primary) 0,var(--accent-secondary) 50%,var(--accent-tertiary) 100%);inset:0;opacity:.15;position:absolute}.visual-themes{background:linear-gradient(135deg,var(--bg-secondary) 0,var(--bg-primary) 100%)}.theme-swatches{display:flex;flex-direction:column;gap:var(--space-sm);left:var(--space-xl);position:absolute;top:50%;transform:translateY(-50%)}.swatch{border-radius:12px;box-shadow:0 4px 12px #0000004d;height:48px;transition:transform .3s var(--ease-out-expo);width:48px}.swatch:hover{transform:scale(1.1)}.swatch-1{background:linear-gradient(135deg,#ff6b35,#f72585)}.swatch-2{background:linear-gradient(135deg,#4cc9f0,#4361ee)}.swatch-3{background:linear-gradient(135deg,#06d6a0,#118ab2)}.swatch-4{background:linear-gradient(135deg,#ffd60a,#ff9500)}.swatch-5{background:linear-gradient(135deg,#e0e0e0,#9e9e9e)}.visual-widgets{align-items:center;background:linear-gradient(180deg,var(--bg-secondary) 0,transparent 100%);display:flex;justify-content:center;padding:var(--space-xl)}.widget-preview{align-items:flex-end;display:flex;gap:var(--space-md)}.widget{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffffe6;border:1px solid var(--border-subtle);border-radius:16px;box-shadow:0 4px 15px #0000000d;padding:var(--space-md)}.widget-small{align-items:center;display:flex;height:72px;justify-content:center;width:72px}.widget-small .widget-album{background:var(--gradient-accent);border-radius:8px;height:48px;width:48px}.widget-medium{align-items:center;display:flex;gap:var(--space-sm);height:72px;width:160px}.widget-medium .widget-album{background:var(--gradient-accent);border-radius:8px;flex-shrink:0;height:48px;width:48px}.widget-medium .widget-info{display:flex;flex:1;flex-direction:column;gap:4px}.widget-title{background:var(--text-primary);border-radius:5px;height:10px;width:80%}.widget-artist{background:var(--text-tertiary);border-radius:4px;height:8px;width:60%}.widget-large{display:flex;flex-direction:column;gap:var(--space-sm);height:160px;width:160px}.widget-large .widget-album{background:var(--gradient-accent);border-radius:8px;height:80px;width:100%}.widget-large .widget-info{display:flex;flex-direction:column;gap:4px}.widget-controls{background:var(--border-subtle);border-radius:12px;height:24px;margin-top:var(--space-xs)}.feature-icon-large{align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fffc;border-radius:20px;bottom:var(--space-xl);color:var(--accent-primary);display:flex;height:80px;justify-content:center;position:absolute;right:var(--space-xl);width:80px}.bento-content{position:relative;z-index:1}.bento-tag{background:var(--gradient-accent);border-radius:6px;display:inline-block;font-size:.625rem;font-weight:700;letter-spacing:.05em;padding:var(--space-xs) var(--space-sm);text-transform:uppercase}.bento-card h3,.bento-tag{margin-bottom:var(--space-md)}.bento-card h3{font-family:var(--font-display);font-size:1.75rem;font-weight:400;letter-spacing:-.01em}.bento-card h4{font-size:1.125rem;font-weight:600;margin-bottom:var(--space-sm)}.bento-card p{color:var(--text-secondary);font-size:.9375rem;line-height:1.6}.bento-icon{align-items:center;background:var(--border-subtle);border-radius:12px;color:var(--accent-primary);display:flex;height:48px;justify-content:center;margin-bottom:var(--space-lg);width:48px}.bento-icon.apple-music-icon{background:transparent;height:48px;width:48px}.bento-icon.apple-music-icon svg{border-radius:10px;height:48px;width:48px}.bento-icon.lastfm-icon{background:transparent;height:48px;width:48px}.bento-icon.lastfm-icon svg{height:48px;width:48px}.bento-badge{background:#4caf5026;color:#4caf50}.bento-badge,.bento-tag-small{border-radius:6px;display:inline-block;font-size:.6875rem;font-weight:600;letter-spacing:.05em;margin-top:var(--space-md);padding:var(--space-xs) var(--space-sm);text-transform:uppercase}.bento-tag-small{background:#ff6b3526;color:var(--accent-primary)}.visual-stats{background:linear-gradient(180deg,var(--bg-secondary) 0,transparent 100%);justify-content:center;padding:var(--space-xl)}.stats-preview,.visual-stats{align-items:flex-end;display:flex}.stats-preview{gap:var(--space-sm);height:120px}.stat-bar{animation:statGrow 2s var(--ease-out-expo) infinite alternate;background:var(--gradient-accent);border-radius:4px;height:var(--height);width:20px}@keyframes statGrow{0%{opacity:.6;transform:scaleY(.8)}to{opacity:1;transform:scaleY(1)}}.screenshots{padding:var(--space-4xl) 0;position:relative;z-index:1}.screenshots-grid{align-items:flex-end;display:flex;flex-wrap:wrap;gap:var(--space-lg);justify-content:center}.screenshot-item{align-items:center;display:flex;flex-direction:column;transition:transform .4s var(--ease-out-expo)}.screenshot-item:hover{transform:translateY(-8px)}.screenshot-frame{border-radius:32px;box-shadow:0 25px 60px #0000001f,0 0 0 6px #2d2d2d,0 0 0 8px #1a1a1a;overflow:hidden;transition:box-shadow .4s var(--ease-out-expo)}.screenshot-item:hover .screenshot-frame{box-shadow:0 35px 80px #0000002e,0 0 0 6px #2d2d2d,0 0 0 8px #1a1a1a}.screenshot-img{border-radius:26px;display:block;height:auto;width:200px}.featured-screenshot .screenshot-img{width:240px}.featured-screenshot .screenshot-frame{box-shadow:0 30px 70px #8b455733,0 0 0 6px #2d2d2d,0 0 0 8px #1a1a1a}.screenshot-label{margin-top:var(--space-lg);text-align:center}.screenshot-label h3{color:var(--text-primary);font-size:1rem;font-weight:600;margin-bottom:var(--space-xs)}.screenshot-label p{color:var(--text-tertiary);font-size:.8125rem}@media (max-width:1024px){.screenshots-grid{gap:var(--space-xl)}.screenshot-img{width:160px}.featured-screenshot .screenshot-img{width:200px}}@media (max-width:768px){.screenshots-grid{gap:var(--space-lg)}.screenshot-img{width:140px}.featured-screenshot .screenshot-img{width:180px}}@media (max-width:480px){.screenshots-grid{align-items:center;flex-direction:column}.screenshot-img{width:200px}.featured-screenshot .screenshot-img{width:240px}}.pricing{padding:var(--space-4xl) 0;position:relative;z-index:1}.pricing-grid{display:grid;gap:var(--space-xl);grid-template-columns:repeat(2,1fr);margin:0 auto;max-width:800px}.price-card{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:24px;box-shadow:0 4px 20px #0000000a;padding:var(--space-2xl);position:relative;transition:all .4s var(--ease-out-expo)}.price-card:hover{border-color:var(--border-light);box-shadow:0 8px 30px #00000014;transform:translateY(-4px)}.price-card.featured{background:linear-gradient(180deg,rgba(139,69,87,.08) 0,var(--bg-card) 100%);border-color:var(--accent-primary)}.featured-badge{background:var(--gradient-accent);border-radius:100px;font-size:.6875rem;font-weight:700;left:50%;letter-spacing:.05em;padding:var(--space-xs) var(--space-md);position:absolute;text-transform:uppercase;top:-12px;transform:translate(-50%);white-space:nowrap}.price-header{border-bottom:1px solid var(--border-subtle);margin-bottom:var(--space-xl);padding-bottom:var(--space-xl);text-align:center}.price-header h3{color:var(--text-secondary);font-size:1.25rem;font-weight:600;margin-bottom:var(--space-md)}.price-amount{align-items:flex-start;display:flex;gap:2px;justify-content:center;margin-bottom:var(--space-sm)}.currency{color:var(--text-secondary);font-size:1.5rem;font-weight:500;margin-top:8px}.amount{font-size:4rem;letter-spacing:-.03em;line-height:1}.amount,.cents{font-family:var(--font-display);font-weight:400}.cents{font-size:2rem;margin-top:8px}.period{font-size:1rem;margin-bottom:12px;margin-left:4px;margin-top:auto}.period,.price-desc{color:var(--text-tertiary)}.price-desc{font-size:.875rem}.price-features{list-style:none;margin-bottom:var(--space-xl)}.price-features li{align-items:center;color:var(--text-secondary);display:flex;font-size:.9375rem;gap:var(--space-sm);padding:var(--space-sm) 0}.price-features svg{color:var(--accent-primary);flex-shrink:0}.btn-outline{background:transparent;border:1px solid var(--border-light);border-radius:12px;color:var(--text-primary);display:block;font-size:.9375rem;font-weight:600;padding:var(--space-md);text-align:center;text-decoration:none;transition:all .3s var(--ease-out-expo);width:100%}.btn-outline:hover{background:var(--border-subtle);border-color:var(--text-tertiary)}.price-card .btn-primary{border-radius:12px;display:block;text-align:center;width:100%}.cta{overflow:hidden;padding:var(--space-4xl) 0;position:relative;z-index:1}.cta-glow{background:var(--accent-primary);border-radius:50%;filter:blur(150px);height:600px;left:50%;opacity:.08;position:absolute;top:50%;transform:translate(-50%,-50%);width:600px}.cta-content{margin:0 auto;max-width:600px;position:relative;text-align:center;z-index:1}.cta-content h2{font-family:var(--font-display);font-size:clamp(2.5rem,5vw,3.5rem);font-weight:400;letter-spacing:-.02em;line-height:1.1;margin-bottom:var(--space-lg)}.cta-content p{color:var(--text-secondary);font-size:1.125rem;margin-bottom:var(--space-2xl)}.app-store-badge{display:inline-block;transition:all .3s var(--ease-out-expo)}.app-store-badge img{height:54px;width:auto}.app-store-badge:hover{opacity:.9;transform:translateY(-2px)}.cta-note{color:var(--text-secondary);display:block;font-size:.8125rem;margin-top:var(--space-lg)}.footer{border-top:1px solid var(--border-subtle);padding:var(--space-3xl) 0 var(--space-xl);position:relative;z-index:1}.footer-content{justify-content:space-between;margin-bottom:var(--space-2xl)}.footer-brand,.footer-content{align-items:center;display:flex}.footer-brand{gap:var(--space-sm)}.footer-icon{border-radius:8px;height:28px;width:28px}.footer-brand span{font-family:var(--font-display);font-size:1rem}.footer-links{display:flex;gap:var(--space-xl)}.footer-links a{color:var(--text-tertiary);font-size:.875rem;text-decoration:none;transition:color .2s}.footer-links a:hover{color:var(--text-primary)}.footer-bottom{border-top:1px solid var(--border-subtle);padding-top:var(--space-xl);text-align:center}.footer-bottom p{color:var(--text-tertiary);font-size:.8125rem}@media (max-width:1024px){.bento-grid{grid-template-columns:repeat(2,1fr)}.bento-large{grid-column:span 2;grid-row:span 1}}@media (max-width:768px){.hero-content{gap:var(--space-3xl);grid-template-columns:1fr;text-align:center}.hero-subtitle{margin:0 auto var(--space-2xl)}.hero-actions{align-items:center;flex-direction:column}.hero-stats{justify-content:center}.phone-container{transform:scale(.9)}.floating-card{display:none}.bento-grid{grid-template-columns:1fr}.bento-large,.bento-wide{grid-column:span 1}.pricing-grid{grid-template-columns:1fr}.footer-content{flex-direction:column;gap:var(--space-lg);text-align:center}}@media (max-width:480px){.hero{padding:100px 0 60px}.hero-stats{flex-wrap:wrap;gap:var(--space-lg)}.nav-cta span,.stat-divider{display:none}.phone-container{transform:scale(.8)}}