:root {
    --sky: #c9eeff;
    --yellow: #ffe44d;
    --coral: #ff7f7f;
    --text: #2d2d2d;
    --white: #ffffff;
}

body { font-family: 'Nunito', sans-serif; background: var(--sky); margin: 0; overflow-x: hidden; }

/* REUSING YOUR CLOUD ANIMATIONS */
.hero { position: relative; padding: 50px 20px; text-align: center; overflow: hidden; background: linear-gradient(175deg, #c2eeff 0%, #fffde8 100%); }
.cloud { position: absolute; background: #fff; border-radius: 99px; opacity: 0.6; }
.cloud--1 { width: 84px; height: 26px; top: 8%; left: -10px; animation: floatCloud 12s infinite; }
@keyframes floatCloud { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(30px); } }

/* HERO VISUAL */
.hero__visual { width: min(380px, 94vw); margin: 20px auto; }
.hero__visual-frame { background: var(--white); border-radius: 28px; border: 4px solid white; box-shadow: 0 16px 48px rgba(0,0,0,0.1); overflow: hidden; }
.placeholder-image { font-size: 5rem; padding: 40px; }

/* SELECTION BOX */
.download-container { max-width: 400px; margin: 0 auto; position: relative; z-index: 10; }
.platform-selection { display: flex; gap: 10px; margin-bottom: 15px; }
.plat-btn { flex: 1; padding: 15px; border-radius: 15px; border: 2px solid #ddd; background: white; cursor: pointer; font-weight: 700; }
.plat-btn.active { border-color: #ff7f7f; background: #fff5f5; color: #ff7f7f; }

.download-trigger { 
    width: 100%; padding: 20px; border: none; border-radius: 50px; 
    background: #ff7f7f; color: white; font-weight: 900; font-size: 1.2rem; cursor: pointer;
    box-shadow: 0 6px 0 #cc5e5e; 
}
.download-trigger:disabled { background: #ccc; box-shadow: none; opacity: 0.6; }

/* FEATURES */
.features { background: white; padding: 40px 20px; text-align: center; }
.features__grid { display: flex; justify-content: center; gap: 20px; margin-top: 20px; }
.feature-card { padding: 20px; border-radius: 20px; box-shadow: 0 4px 14px rgba(0,0,0,0.05); border: 1px solid #eee; }

/* MODALS (YOUR STYLES) */
.loading-overlay, .verify-overlay {
    position: fixed; inset: 0; background: rgba(20, 40, 70, 0.95);
    display: none; align-items: center; justify-content: center; z-index: 9999; backdrop-filter: blur(8px);
}
.loading-box, .verify-modal { background: white; padding: 40px; border-radius: 28px; width: 90%; max-width: 400px; text-align: center; }

.progress-bar-wrap { width: 100%; height: 12px; background: #eee; border-radius: 10px; margin: 20px 0; overflow: hidden; }
.progress-bar { height: 100%; background: linear-gradient(90deg, var(--yellow), var(--coral)); width: 0%; }

.timer-box { font-size: 2.5rem; font-weight: 900; color: var(--coral); margin: 20px 0; }
.verify-btn { width: 100%; padding: 18px; border: none; border-radius: 50px; background: #4caf50; color: white; font-weight: 800; font-size: 1.2rem; cursor: pointer; }