:root{--primary:#0F172A;--accent:#2563EB;--bg:#F8FAFC}*{box-sizing:border-box}body{margin:0;background:var(--bg);font-family:Arial,sans-serif;color:#111} .top{padding:18px}.brand h1{margin:0;font-size:2rem}.brand span{color:#2563EB}.hero{margin:12px;background:linear-gradient(135deg,#001b4d,#0b2d7a);color:#fff;padding:24px;border-radius:24px}.badge{display:inline-block;background:#16A34A;padding:8px 12px;border-radius:20px}.rate{font-size:4rem;font-weight:700}.panel{background:#fff;margin:12px;padding:18px;border-radius:22px;box-shadow:0 6px 20px rgba(0,0,0,.08)}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.qcard{border:1px solid #cfd8e8;border-radius:14px;padding:12px;text-align:center;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.06)}.qcard.active{border:2px solid #2563EB;box-shadow:0 0 0 3px rgba(37,99,235,.15)}.resultbox,.bigresult{margin-top:12px;padding:14px;border-radius:14px;background:#f3f6fb;font-weight:700}.bigresult{font-size:2rem;color:#16A34A}.arrow{text-align:center;font-size:2rem;padding:8px}input{width:100%;padding:14px;border-radius:12px;border:1px solid #ccc}footer{text-align:center;padding:20px}@media(max-width:380px){.grid{grid-template-columns:repeat(2,1fr)}.rate{font-size:3rem}}
.quicknav{display:flex;gap:10px;justify-content:center;margin:12px 0}
.quicknav a{text-decoration:none;background:#2563EB;color:#fff;padding:10px 14px;border-radius:12px}
.resultbox,.selected-result{background:#e5e7eb;border:2px solid #2563EB;border-radius:16px;padding:14px;margin-top:10px;font-weight:bold}
.badge{padding:4px 10px !important;font-size:12px !important}
footer{padding:20px 0;border-top:1px solid #ddd;font-weight:600}

/* BUILD 004 refinements */
.quicknav{margin-top:12px;margin-bottom:18px}
.quicknav a{background:#0F172A !important;color:#fff !important}
.resultbox,.selected-result{
  background:#eef2f7 !important;
  border:2px solid #2563EB !important;
  text-align:center;
}
.calc input{margin-bottom:8px}
.calc #result{margin-top:4px !important;padding:12px;border-radius:12px;background:#eef2f7}
footer{background:#f3f4f6;border-radius:16px;padding:18px}

.quicknav{display:flex;justify-content:center;gap:12px;margin:16px 0 20px}
.section-title,.quick h2,.calc h2{
 text-align:center;
 background:#eef4ff;
 border:1px solid #dbe7ff;
 padding:10px 14px;
 border-radius:14px;
 color:#0F172A;
 font-weight:700;
 letter-spacing:.4px;
}

body{scroll-behavior:smooth;}
.hero{margin-bottom:10px!important}
.quicknav{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:8px 12px 12px}
.quicknav a{
 text-align:center;
 background:#eef4ff!important;
 color:#0F172A!important;
 border:1px solid #dbe7ff;
 padding:12px;
 border-radius:16px;
 font-weight:700;
 box-shadow:0 4px 10px rgba(0,0,0,.05);
}
.sectionhead{
 text-align:center;
 margin:-4px -4px 12px -4px;
 padding:12px;
 border-radius:14px;
 background:#eef4ff;
 color:#0b2d7a;
 font-size:1rem;
 letter-spacing:.5px;
}
.panel{padding:14px!important;margin:10px 12px!important}
.resultbox{margin-top:8px!important}
.bigresult{margin-top:6px!important;padding:10px!important}
footer{padding:14px!important}

.quick2{grid-template-columns:repeat(2,1fr)!important}
.qcard{padding:10px!important;font-weight:700}
.qcard .bsvalue{display:none}
.resultbox{background:transparent!important;border:none!important;font-size:1.2rem;color:#16A34A;font-weight:800}
.sectionhead{text-align:center}

.top{text-align:center}
.hero .rate{font-size:4rem!important}
.sectionhead{text-align:center;font-weight:800;letter-spacing:1px;background:#eef4ff;padding:10px;border-radius:12px}
.resultbox{font-size:1.1rem;text-align:center}
.resultbox .usd{color:#16A34A;font-weight:700}
.resultbox .bs{color:#2563EB;font-weight:800}
.quick2{grid-template-columns:1fr 1fr!important}
.quick2 button{min-height:48px}
.mode-label{text-align:center;margin-bottom:8px;font-size:.9rem}
.mode-switch{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
.mode{padding:10px;border-radius:12px}
.mode.active{border:2px solid #2563EB;box-shadow:0 0 0 2px rgba(37,99,235,.15)}

.sectionhead{font-size:1.15rem!important;font-weight:900!important;border-bottom:3px solid #2563EB}
.usd{color:#16A34A;font-weight:800}
.bs{color:#2563EB;font-weight:900}

.hero{padding:16px!important;position:relative;overflow:hidden;margin-top:4px!important}
.hero:after{content:'';position:absolute;right:10px;top:20px;width:140px;height:140px;background:url('../assets/HCS.png') center/contain no-repeat;opacity:.14;filter:blur(.5px);transform:rotate(-18deg);}
.quick2{grid-template-columns:repeat(3,1fr)!important}
.resultbox{font-size:1.25rem!important;white-space:nowrap}
.resultbox .usd{color:#16A34A;font-weight:700;display:inline}
.resultbox .bs{color:#2563EB;font-weight:800;display:inline}
.sectionhead{font-weight:900!important}
footer{background:#0B2D7A!important;color:#fff!important;border-radius:0!important}

.top{padding-bottom:4px!important}
.hero{margin-top:2px!important;padding:18px!important;position:relative;overflow:hidden}
.hero:after{content:'';position:absolute;right:20px;top:20px;width:120px;height:120px;background:url('../assets/HCS.png') center/contain no-repeat;opacity:.12;filter:drop-shadow(0 0 10px rgba(0,255,255,.3));}
.quick2,.grid{grid-template-columns:repeat(3,1fr)!important}
.sectionhead{white-space:nowrap}
footer{background:#0B2D7A!important;color:#fff!important}

/* BUILD_016 Hero enhancement */
.hero::after{
 content:'';
 position:absolute;
 right:10px;
 top:10px;
 bottom:10px;
 width:38%;
 background:url('HCS.png') center/contain no-repeat;
 opacity:.328;
 filter:none;
 transform:none;
 pointer-events:none;
}


/* BUILD_017 HERO REWORK */
.hero{position:relative;overflow:hidden;}
.hero::before{
 content:'';
 position:absolute;
 right:-8px;
 top:8px;
 width:120px;
 height:120px;
 background:url('HCS.png') center/contain no-repeat;
 opacity:.35;
 z-index:0;
}
.hero > *{position:relative;z-index:1;}

.hero{position:relative;overflow:hidden;padding:20px 24px;}
.hero-hcs{position:absolute;right:8px;top:8px;bottom:8px;width:42%;display:flex;align-items:center;justify-content:center;opacity:.32}
.hero-hcs img{max-height:92%;max-width:100%;object-fit:contain}
.rate,.badge,.sub,.meta{position:relative;z-index:2}

/* BUILD021 */
.hero-hcs{opacity:.42 !important;}
.hero .rate{font-size:3.5rem !important;}