:root{ --bg: #e6f7ff; --accent: #ff7a00; --title-yellow: #ffea00; --title-black: #000; }
html,body{height:100%;}
body{ background:var(--bg); font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; color:#0b1720; margin:0; padding-bottom:200px;
}
/* Header area */
.hero{ padding:3.5rem 1rem; text-align:center; }
.hero h1{ display:inline-block; background:linear-gradient(90deg, rgba(255,234,0,1) 0%, rgba(255,197,0,1) 100%); color:var(--title-black); padding:0.45rem 1rem; border-radius:8px; font-weight:800; font-size:clamp(1.5rem, 3.2vw, 2.6rem); box-shadow:0 6px 18px rgba(0,0,0,0.08); margin-bottom:0.6rem; }
.hero p.lead{ color:var(--title-black); font-weight:600; margin-bottom:1.25rem; }
/* Form card */
.card-lite{ border:0; border-radius:12px; box-shadow:0 6px 24px rgba(11,23,32,0.06); padding:1rem; background:rgba(255,255,255,0.9); }
.radio-row .form-check{ margin-right:1rem; }
/* Benefit columns */
.benefit-item{display:flex; align-items:flex-start; gap:.6rem; margin-bottom:.5rem;}
.benefit-item input{margin-top:.25rem}
/* Price */
.total-wrap{display:flex; align-items:center; justify-content:center; gap:1rem; margin-top:1rem;}
.total-amount{ font-size:clamp(1.4rem, 3.6vw, 2.2rem); font-weight:900; color:var(--title-black); background:rgba(255,255,255,0.85); padding:.45rem .85rem; border-radius:10px; box-shadow:0 6px 18px rgba(0,0,0,0.04); }
/* Section image placeholder */
.img-box{ width:480px; height:360px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-weight:700; color:#04314a; }
/* Footer sticky note */
.sticky-buy{ position:fixed; left:0; right:0; bottom:0; z-index:1050; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.45rem .8rem; background:linear-gradient(90deg, rgba(255,255,255,0.95), rgba(255,255,255,0.92)); box-shadow:0 -6px 30px rgba(3,20,30,0.08); border-top-left-radius:10px; border-top-right-radius:10px; max-height:90px; }
.sticky-left,.sticky-center,.sticky-right{display:flex; align-items:center; gap:.6rem;}
.sticky-left{min-width:170px;}
.timer{ font-weight:800; background:#000000; color:var(--title-yellow); padding:.35rem .6rem; border-radius:8px; font-family:monospace; }
.price-badge{ font-weight:800; font-size:1.1rem; color:#03121a; }
/* Orange rounded button */
.btn-orange{ background:var(--accent); color:#fff; border:0; border-radius:999px; padding:.6rem 1.25rem; font-weight:700; box-shadow:0 6px 18px rgba(255,122,0,0.18); transition: transform .18s ease, box-shadow .18s ease; }
.btn-orange:hover{ transform:scale(1.05); box-shadow:0 10px 28px rgba(255,122,0,0.28); }
/* Appearing text */
.redeem-note{ font-weight:700; color:#05374a; opacity:0; transform:translateY(6px); transition:opacity .4s ease, transform .4s ease; white-space:nowrap; }
.redeem-note.show{ opacity:1; transform:translateY(0); }
/* subtle responsive tweaks */
@media (max-width:767px){ .sticky-buy{flex-direction:column; gap:.5rem; align-items:stretch; padding:.6rem;} .sticky-left{justify-content:flex-start;} .sticky-right{justify-content:flex-end;} }
.curved-underline { position: relative; display: inline-block !important; padding-bottom: 10px; }
.curved-underline::after { content: ""; position: absolute; bottom: -5px; left: 0; height: 10px; width: 100%; border: solid 3px #007bff; border-color: #007bff transparent transparent transparent; border-radius: 50%; }

html, body { height: 100%; }
body { padding-bottom: 50px !important; }
.main-wrapper { min-height: 100%; padding-bottom: 50px; }