:root {
    --pri: #00A651; 
    --sec: #4CAF50; 
    --blue: #2196F3; 
    --red: #FF5722;
    --light: #F1FDF7; 
    --glass: rgba(255,255,255,0.92); 
    --shadow: 0 8px 32px rgba(0,166,81,0.18);
}
* { margin:0; padding:0; box-sizing:border-box; font-family:'Hind Siliguri',Arial,sans-serif; }
html { scroll-behavior: smooth; }
body { 
    background: linear-gradient(to bottom, #E8F5E8, #C8E6C9); 
    min-height:100vh; 
    line-height:1.6;
}

/* Blink Topbar */
.blink { animation: blink 1.5s infinite; }
@keyframes blink { 0%,100% { opacity:1; } 50% { opacity:0.7; } }
.topbar {
    background: linear-gradient(135deg, var(--red), #FF7043);
    color:#fff; text-align:center; padding:14px 12px;
    font-weight:bold; font-size:18px; position:fixed; top:0; width:100%; z-index:999;
    box-shadow: 0 4px 20px rgba(255,87,34,0.35);
}

/* Main Container */
.container { 
    max-width:560px; margin:0 auto; padding:16px; padding-top:90px; 
}

/* Hero Section */
.hero {
    background: linear-gradient(135deg, var(--pri), var(--sec));
    color:#fff; padding:36px 20px; border-radius:26px; text-align:center;
    box-shadow: var(--shadow); margin-bottom:22px;
}
.hero h1 { 
    font-size:26px; margin-bottom:12px; line-height:1.3; 
}
.badge { 
    background:var(--blue); padding:11px 28px; border-radius:50px; 
    font-size:18px; display:inline-block; margin:14px 0; 
}

/* All Cards */
.benefit, .testimonial, .limited, .form-box, .guarantee {
    background:var(--glass); padding:24px 20px; border-radius:20px; margin:20px 0;
    box-shadow: var(--shadow); backdrop-filter: blur(12px);
}
.benefit li { 
    font-size:18px; padding:10px 0; list-style:none; 
}
.benefit li:before { 
    content:"✓"; color:var(--pri); font-weight:bold; margin-right:10px; font-size:22px; 
}
.testimonial { 
    border-left:6px solid var(--blue); text-align:center; font-style:italic; font-size:18px; 
}
.limited { 
    background: linear-gradient(135deg,#FFF3E0,#FFE0B2); color:#D84315; 
    text-align:center; font-weight:bold; font-size:18px; padding:20px;
}

/* Form Box */
.form-box h2 { 
    text-align:center; color:var(--pri); font-size:26px; margin-bottom:18px; 
}
input, select {
    width:100%; padding:17px 16px; margin:12px 0; 
    border:2px solid #E8F5E8; border-radius:14px; font-size:17px;
    background:rgba(255,255,255,0.9); transition:all 0.3s;
}
input:focus, select:focus { 
    border-color:var(--blue); outline:none; transform:translateY(-2px);
    box-shadow:0 0 12px rgba(33,150,243,0.2);
}

/* Apply Button */
.btn-apply {
    background: linear-gradient(135deg, var(--red), #FF7043);
    color:#fff; padding:20px; font-size:24px; font-weight:bold;
    border:none; border-radius:18px; width:100%; cursor:pointer;
    box-shadow:0 10px 30px rgba(255,87,34,0.4); transition:all 0.3s; margin-top:12px;
}
.btn-apply:hover, .btn-apply:active { 
    transform:translateY(-4px); box-shadow:0 15px 40px rgba(255,87,34,0.55); 
}

/* Progress Bar */
.progress-bar { 
    height:6px; background:#E0E0E0; border-radius:3px; overflow:hidden; margin:14px 0; 
}
.progress-fill { 
    height:100%; width:0%; background:linear-gradient(90deg,var(--pri),var(--sec)); 
    transition:width 0.5s ease; 
}
.guarantee { 
    border:3px solid var(--pri); text-align:center; font-size:17px; padding:22px 18px; 
}

/* Ultra Mobile Responsive – 95% Bangladesh Users */
@media (max-width: 480px) {
    .topbar { font-size:17px; padding:13px 10px; }
    .container { padding:12px; padding-top:85px; }
    .hero { padding:32px 18px; border-radius:22px; }
    .hero h1 { font-size:24px; }
    .badge { font-size:17px; padding:10px 24px; }
    .benefit, .testimonial, .limited, .form-box, .guarantee { 
        padding:20px 18px; margin:18px 0; border-radius:18px; 
    }
    .benefit li, .testimonial, .limited, .guarantee p { font-size:17px; }
    .form-box h2 { font-size:24px; }
    input, select { padding:16px 14px; font-size:16.5px; margin:10px 0; }
    .btn-apply { padding:19px; font-size:23px; border-radius:16px; }
}

@media (max-width: 380px) {
    .hero h1 { font-size:22px; }
    .badge { font-size:16px; padding:9px 20px; }
    .form-box h2 { font-size:23px; }
    input, select { font-size:16px; padding:15px 14px; }
    .btn-apply { font-size:22px; padding:18px; }
    .benefit li, p { font-size:16.5px; }
}

@media (max-width: 360px) {
    .topbar { font-size:16px; }
    .hero h1 { font-size:21px; }
    .btn-apply { font-size:21px; }
}