:root{--dark-gray:#2C2C2C;--light-gray:#F2F2F2;--accent:#FF9147;--accent-hover:#FF7F2A;--bg-color:white;--text-color:#333;--card-bg:white;--card-text:#666;--nav-bg:white;--nav-shadow:rgba(0,0,0,0.1);--card-shadow:rgba(0,0,0,0.2);--overlay-color:rgba(0,0,0,0.5)}@media (prefers-color-scheme:dark){:root{--bg-color:#1e1e1e;--text-color:#f4f4f4;--card-bg:#2b2b2b;--card-text:#999;--nav-bg:#2b2b2b;--nav-shadow:rgba(0,0,0,0.3);--card-shadow:rgba(0,0,0,0.3);--overlay-color:rgba(0,0,0,0.7)}}body{font-family:'Helvetica Neue',Arial,sans-serif;margin:0;padding:0;color:#333;color:var(--text-color);background-color:var(--bg-color)}.hero{position:relative;padding:5rem 5%;text-align:center;background-image:url('../assets/img/metronome_bg.jpg');background-size:cover;background-position:center;background-repeat:no-repeat;color:white}.hero::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:var(--overlay-color);z-index:1}.hero>*{position:relative;z-index:2}.container{background-color:var(--bg-color);max-width:1200px;margin:0 auto;padding:40px 20px}.app-icon{width:120px;height:120px;border-radius:20px;margin-bottom:20px;box-shadow:0 4px 15px rgba(0,0,0,0.2)}.hero h1{margin-bottom:1rem;font-size:2.5rem;text-shadow:0 2px 4px rgba(0,0,0,0.3)}.hero p{margin-bottom:2rem;font-size:1.2rem;text-shadow:0 2px 4px rgba(0,0,0,0.3)}.features{display:grid;grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));gap:30px;margin-top:50px}.feature-card{background:var(--card-bg);box-shadow:0 2px 10px var(--card-shadow);padding:25px;border-radius:15px;transition:transform .3s ease}.feature-card:hover{transform:translateY(-5px)}.feature-card h3{color:var(--text-color);margin-bottom:1rem;font-size:1.3rem}.feature-card p{color:var(--card-text);font-size:1rem;line-height:1.6}.cta-button{display:inline-block;background-color:var(--accent);color:white;padding:15px 30px;border-radius:25px;text-decoration:none;margin-top:20px;font-weight:bold;transition:background-color .3s ease;box-shadow:0 4px 15px rgba(0,0,0,0.2)}.cta-button:hover{background-color:var(--accent-hover)}.store-badges{display:flex;gap:20px;justify-content:center;align-items:center;margin-top:20px}.store-badge{height:60px;transition:opacity .3s ease}.store-badge:hover{opacity:.8}.store-badge.coming-soon{opacity:.5;cursor:default;position:relative}.coming-soon-text{position:absolute;top:-20px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,0.7);color:white;padding:4px 12px;border-radius:12px;font-size:.8rem;white-space:nowrap}nav{background:var(--nav-bg);box-shadow:0 2px 10px var(--nav-shadow);padding:1.2rem 5%;display:flex;justify-content:space-between;align-items:center}.logo a{font-size:1.5rem;font-weight:bold;color:var(--text-color);text-decoration:none}.contact-btn{background:var(--accent);color:white;border:none;padding:.8rem 1.5rem;border-radius:4px;font-weight:500;cursor:pointer;transition:background .3s ease}footer{background:var(--dark-gray);color:white;padding:3rem 5%;margin-top:auto}.footer-content{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;gap:2rem}.footer-left{flex:1}.footer-logo a{font-size:1.2rem;font-weight:bold;margin-bottom:1rem;color:var(--text-color);text-decoration:none}.footer-address{color:#999;font-size:.9rem;line-height:1.6}.footer-right{flex:1;text-align:right}.footer-links{margin-bottom:1.5rem}.footer-links a{color:white;text-decoration:none;margin-left:1.5rem;font-size:.9rem;transition:color .3s ease}.footer-links a:hover{color:var(--accent)}.copyright{color:#999;font-size:.8rem}@media (max-width:768px){.footer-content{flex-direction:column;text-align:center}.footer-right{text-align:center}.footer-links{display:flex;flex-direction:column;gap:1rem;margin-bottom:2rem}.footer-links a{margin:0}}body{min-height:100vh}.manual-section{margin-top:2rem;text-align:center}.manual-link{display:inline-block;padding:1rem 2rem;margin-bottom:2rem;background-color:var(--accent);color:white;text-decoration:none;border-radius:25px;font-weight:bold;transition:background-color .3s ease;box-shadow:0 4px 15px rgba(0,0,0,0.2)}.manual-link:hover{background-color:var(--accent-hover)}.manual-icon{margin-right:.5rem}@media (prefers-color-scheme:dark){.app-icon{box-shadow:0 4px 15px var(--card-shadow)}.feature-card:hover{box-shadow:0 4px 20px var(--card-shadow)}.cta-button{box-shadow:0 4px 15px var(--card-shadow)}.manual-link{box-shadow:0 4px 15px var(--card-shadow)}.store-badge.coming-soon .coming-soon-text{background:rgba(0,0,0,0.9)}}