:root{--bg:#07111f;--panel:#102038;--text:#f7fbff;--muted:#9fb0c7;--line:rgba(255,255,255,.11);--blue:#229ed9;--green:#25d366}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 15% 10%,rgba(34,158,217,.18),transparent 35%),radial-gradient(circle at 90% 20%,rgba(37,211,102,.12),transparent 30%),var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans KR",Arial,sans-serif}
a{text-decoration:none;color:inherit}.wrap{width:min(1100px,calc(100% - 30px));margin:auto}
header{position:sticky;top:0;z-index:10;background:rgba(7,17,31,.86);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav{min-height:66px;display:flex;align-items:center;justify-content:space-between;gap:14px}.brand{font-size:21px;font-weight:900;display:flex;align-items:center;gap:9px}.logo{width:37px;height:37px;border-radius:12px;background:linear-gradient(135deg,var(--blue),var(--green));display:grid;place-items:center}
.langs{display:flex;gap:6px;overflow-x:auto}.langs a{padding:8px 10px;border:1px solid var(--line);border-radius:10px;font-size:13px;white-space:nowrap}.langs .active{background:#fff;color:#07111f}
.hero{padding:72px 0 38px}.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:38px;align-items:center}.badge{display:inline-block;padding:8px 12px;border:1px solid rgba(37,211,102,.3);border-radius:999px;color:#cbffdc;background:rgba(37,211,102,.07)}
h1{font-size:clamp(42px,7vw,72px);line-height:1.03;letter-spacing:-2px;margin:22px 0 18px}.lead{font-size:18px;color:var(--muted);line-height:1.7;max-width:680px}
.cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}.btn{padding:15px 18px;border-radius:14px;font-weight:800;border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center}.telegram{background:linear-gradient(135deg,#2aabee,#168bd0)}.ghost{background:rgba(255,255,255,.04)}
.card{background:linear-gradient(180deg,#132641,#0d1b30);border:1px solid var(--line);border-radius:24px;padding:23px;box-shadow:0 28px 60px rgba(0,0,0,.26)}.card-head{display:flex;justify-content:space-between}.live{font-size:12px;color:#c9ffda}.row{display:flex;justify-content:space-between;padding:16px 0;border-top:1px solid var(--line);margin-top:14px}.row small{display:block;color:var(--muted);margin-top:4px}.note{font-size:12px;color:var(--muted);line-height:1.5}
section{padding:54px 0}.title{text-align:center;max-width:720px;margin:0 auto 28px}.title h2{font-size:34px;margin:0 0 10px}.title p{color:var(--muted);line-height:1.7}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.feature,.step{background:rgba(255,255,255,.035);border:1px solid var(--line);border-radius:19px;padding:21px}.feature h3,.step h3{margin:12px 0 8px}.feature p,.step p{margin:0;color:var(--muted);line-height:1.65}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}.num{width:31px;height:31px;border-radius:10px;background:rgba(34,158,217,.18);display:grid;place-items:center;color:#8fd4ff;font-weight:900}
.currencies{display:flex;flex-wrap:wrap;gap:9px;justify-content:center}.currency{padding:11px 14px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.04)}
.notice{padding:17px;border-radius:17px;border:1px solid rgba(255,214,107,.25);background:rgba(255,214,107,.06);color:#ffeeb4;line-height:1.65}
.bottom{text-align:center;padding:38px;border:1px solid var(--line);border-radius:25px;background:linear-gradient(135deg,rgba(34,158,217,.14),rgba(37,211,102,.09))}
footer{border-top:1px solid var(--line);padding:30px 0 90px;color:var(--muted);font-size:13px}.floating{display:none;position:fixed;left:14px;right:14px;bottom:14px;z-index:20}.floating .btn{width:100%;box-shadow:0 14px 30px rgba(0,0,0,.35)}
@media(max-width:800px){.nav{align-items:flex-start;flex-direction:column;padding:12px 0}.langs{width:100%}.hero{padding-top:45px}.hero-grid{grid-template-columns:1fr}.card{order:-1}.grid3{grid-template-columns:1fr}.steps{grid-template-columns:1fr 1fr}.floating{display:block}}
@media(max-width:520px){h1{letter-spacing:-1px}.lead{font-size:16px}.steps{grid-template-columns:1fr}.cta .btn{width:100%}}

/* HongPayU real logo */
.brand-logo{display:block;width:210px;max-width:52vw;height:auto;object-fit:contain;background:#fff;border-radius:10px;padding:4px}
.brand-text-fallback{display:none}
@media(max-width:520px){.brand-logo{width:180px;max-width:64vw}}
.rate-error{color:#ffb4b4;font-size:12px;margin-top:10px}
.rate-value{font-variant-numeric:tabular-nums}

/* polished HongPayU branding */
.brand{min-width:0}
.brand-logo{
  display:block!important;
  width:240px!important;
  max-width:58vw!important;
  height:58px!important;
  object-fit:contain!important;
  object-position:left center!important;
  background:transparent!important;
  border-radius:0!important;
  padding:0!important;
}
.hero-brand-card{display:none}
@media(max-width:800px){
  .hero-grid{display:flex!important;flex-direction:column!important}
  .hero-grid>div:first-child{order:1!important}
  .hero-grid>.card{order:2!important}
  .brand-logo{width:210px!important;height:52px!important;max-width:72vw!important}
}
@media(max-width:520px){
  .brand-logo{width:190px!important;height:48px!important}
  .nav{gap:10px!important}
}
.rate-value{white-space:nowrap}
.rate-error{display:block;margin-top:8px;color:#ffb8b8;font-size:12px}

/* Make HongPayU logo clearly visible on dark header */
.brand{
  background:#ffffff;
  border:1px solid rgba(255,255,255,.35);
  border-radius:16px;
  padding:8px 12px;
  box-shadow:0 10px 26px rgba(0,0,0,.20);
  width:max-content;
}
.brand-logo{
  width:250px!important;
  max-width:70vw!important;
  height:64px!important;
  filter:none!important;
  opacity:1!important;
}
@media(max-width:520px){
  .brand{
    padding:7px 10px;
    border-radius:14px;
  }
  .brand-logo{
    width:220px!important;
    max-width:76vw!important;
    height:58px!important;
  }
}