/* ============================================================
   BC Binance — Coinbase-style skin
   Palette: white bg + Coinbase blue #0052FF + near-black ink.
   No Binance gold. Skeleton mirrors coinbase.com home.
   ============================================================ */
:root{
  --blue:#0052ff;--blue-d:#0040cc;--blue-soft:#eef3ff;--blue-soft2:#dbe6ff;
  --ink:#0a0b0d;--ink-2:#141519;
  --bg:#ffffff;--bg-soft:#f5f7f9;--bg-soft2:#eef0f3;
  --dark:#0a0b0d;--dark-2:#16181d;
  --txt:#0a0b0d;--muted:#5b616e;--muted-2:#8a909c;
  --line:#e3e6ea;--line-2:#eef0f3;
  --green:#0a9981;--red:#cf202f;
  --maxw:1180px;--r:24px;--r-s:16px;--r-pill:999px;
  --sh:0 18px 50px rgba(10,11,13,.10);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:"Inter","Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",system-ui,sans-serif;color:var(--txt);background:var(--bg);line-height:1.55;overflow-wrap:break-word;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;width:100%}

/* ---------- buttons (Coinbase: pill blue / black / outline) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:16px;border:0;cursor:pointer;border-radius:var(--r-pill);padding:13px 26px;min-height:48px;transition:transform .14s,box-shadow .14s,background .14s,color .14s,border-color .14s;font-family:inherit;line-height:1;white-space:nowrap}
.btn-pri{background:var(--blue);color:#fff}
.btn-pri:hover{background:var(--blue-d)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:#2b2d33}
.btn-soft{background:var(--blue-soft);color:var(--blue)}
.btn-soft:hover{background:var(--blue-soft2)}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
.btn-ghost:hover{border-color:var(--ink)}
.btn-light{background:#fff;color:var(--ink)}
.btn-light:hover{background:#f0f2f5}
.btn-on-blue{background:#fff;color:var(--blue)}
.btn-on-blue:hover{background:#eaf0ff}
.btn-line-light{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.55)}
.btn-line-light:hover{border-color:#fff;background:rgba(255,255,255,.10)}

/* ---------- announcement bar ---------- */
.topbar{background:#fff;border-bottom:1px solid var(--line-2);font-size:13.5px;color:var(--ink)}
.topbar .wrap{display:flex;justify-content:center;align-items:center;gap:8px;min-height:42px;text-align:center}
.topbar a{color:var(--blue);font-weight:600}
.topbar a:hover{text-decoration:underline}

/* ---------- header / top nav ---------- */
.hdr{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);border-bottom:1px solid var(--line-2)}
.nav{display:flex;align-items:center;height:72px;gap:18px}
.brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:19px;color:var(--ink)}
.brand img{height:30px;width:auto}
.menu{display:flex;gap:26px;align-items:center;margin-left:34px}
.menu a{color:var(--ink);font-weight:500;font-size:15px}
.menu a:hover{color:var(--blue)}
.nav-cta{display:flex;gap:8px;align-items:center;margin-left:auto}
.nav-ico{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--ink)}
.nav-ico:hover{background:var(--bg-soft)}
.nav-ico svg{width:20px;height:20px}
.lang{font-size:14px;color:var(--ink);font-weight:600;border:1px solid var(--line);border-radius:var(--r-pill);padding:7px 14px}
.lang:hover{border-color:var(--blue);color:var(--blue)}
.nav-cta .btn{padding:10px 20px;min-height:42px;font-size:14.5px}
.btn-text{background:transparent;color:var(--ink);font-weight:600;font-size:14.5px;padding:10px 12px;min-height:42px}
.btn-text:hover{color:var(--blue)}

/* ---------- hero (left copy + product card right) ---------- */
.hero{background:var(--bg);padding:72px 0 56px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--blue);font-weight:600;font-size:14px;margin-bottom:18px}
.hero h1{font-size:clamp(40px,5.8vw,68px);line-height:1.02;font-weight:800;color:var(--ink);letter-spacing:-2px}
.hero h1 .hl{color:var(--blue)}
.hero p.lead{font-size:18px;color:var(--muted);margin:22px 0 26px;max-width:500px}
.signup{display:flex;gap:10px;flex-wrap:wrap;max-width:500px}
.signup input{flex:1;min-width:200px;height:54px;border:1.5px solid var(--line);border-radius:14px;padding:0 18px;font-size:16px;font-family:inherit;color:var(--ink);background:#fff;transition:border-color .14s}
.signup input:focus{outline:none;border-color:var(--blue)}
.signup .btn{height:54px;padding:0 28px}
.hero-note{margin-top:14px;font-size:13.5px;color:var(--muted-2)}
.hero-stats{display:flex;gap:34px;margin-top:38px;flex-wrap:wrap}
.hero-stats .s b{display:block;font-size:26px;font-weight:800;color:var(--ink);letter-spacing:-.5px}
.hero-stats .s span{font-size:13px;color:var(--muted)}
/* product card */
.prod-card{background:var(--bg-soft);border-radius:28px;padding:22px;position:relative}
.pc-panel{background:#fff;border:1px solid var(--line-2);border-radius:18px;padding:18px;box-shadow:0 10px 30px rgba(10,11,13,.06)}
.pc-search{display:flex;align-items:center;gap:8px;background:var(--bg-soft);border-radius:12px;padding:9px 13px;font-size:13.5px;color:var(--muted-2);margin-bottom:16px}
.pc-search svg{width:15px;height:15px;flex:0 0 auto}
.pc-bal{font-size:13px;color:var(--muted)}
.pc-bal b{display:block;font-size:30px;font-weight:800;color:var(--ink);letter-spacing:-1px;margin:2px 0 4px}
.pc-bal .up{font-size:13px;font-weight:600}
.pc-rows{margin-top:16px;display:grid;gap:12px}
.pc-row{display:flex;align-items:center;gap:11px}
.pc-row .ic{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;flex:0 0 auto}
.pc-row .nm{flex:1;font-size:13.5px;font-weight:600;color:var(--ink)}
.pc-row .vl{font-size:13.5px;font-weight:600;color:var(--ink)}
.pc-row .vl span{display:block;font-size:11.5px;font-weight:600;text-align:right}
.pc-buy{margin-top:16px;background:var(--blue);color:#fff;border-radius:14px;padding:14px 16px}
.pc-buy .t{font-size:12.5px;opacity:.85}
.pc-buy .v{font-size:18px;font-weight:700;margin-top:2px}
.pc-float{position:absolute;background:#fff;border:1px solid var(--line-2);border-radius:14px;box-shadow:var(--sh);padding:12px 14px;font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:9px}
.pc-float .d{width:26px;height:26px;border-radius:8px;background:var(--blue-soft);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.pc-float.f1{left:-14px;bottom:54px}
.pc-float.f2{right:-10px;top:34px}

/* ---------- generic section ---------- */
section{padding:64px 0}
.sec-soft{background:var(--bg-soft)}
.sec-head{max-width:760px;margin:0 0 36px}
.sec-head.center{text-align:center;margin-left:auto;margin-right:auto}
.sec-head h2{font-size:clamp(30px,4.4vw,52px);font-weight:800;color:var(--ink);letter-spacing:-1.4px;line-height:1.04}
.sec-head p{color:var(--muted);font-size:18px;margin-top:14px}
.kicker{display:block;color:var(--blue);font-weight:600;font-size:14px;margin-bottom:12px}

/* ---------- promo carousel (dark banner) ---------- */
.promo{padding:48px 0}
.promo-card{position:relative;background:linear-gradient(120deg,#0a0b0d,#1a2742);color:#fff;border-radius:28px;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center;padding:54px 56px;min-height:300px}
.promo-art{display:flex;align-items:center;justify-content:center}
.promo-copy h2{font-size:clamp(26px,3vw,36px);font-weight:800;letter-spacing:-1px}
.promo-copy p{color:#b9c0cc;font-size:16px;margin:14px 0 24px;max-width:420px}
.promo-dots{display:flex;align-items:center;gap:14px;margin-top:26px}
.promo-dots .dots{display:flex;gap:7px}
.promo-dots .dots i{width:8px;height:8px;border-radius:50%;background:var(--line);display:block}
.promo-dots .dots i.on{width:24px;border-radius:8px;background:var(--ink)}
.promo-dots .arrows{display:flex;gap:8px;margin-left:auto}
.promo-dots .arrows b{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--ink);font-size:15px}

/* ---------- local / split feature (left art card, right checklist) ---------- */
.feat{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.feat.flip .feat-art{order:2}
.feat-art{background:#fff;border:1px solid var(--line);border-radius:24px;padding:24px;min-height:300px;display:flex;align-items:center;justify-content:center}
.feat h2{font-size:clamp(26px,3.4vw,40px);font-weight:800;color:var(--ink);letter-spacing:-1px;line-height:1.08}
.feat p{color:var(--muted);font-size:17px;margin:14px 0 22px}
.checklist{list-style:none;display:grid;gap:14px;margin-bottom:24px}
.checklist li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;color:var(--ink)}
.checklist li::before{content:"";flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:var(--ink);margin-top:1px;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/14px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/14px no-repeat}
.placeholder{background:var(--bg-soft2);border-radius:24px;min-height:340px;width:100%}

/* ---------- explore: dark asset price panel ---------- */
.assets{background:var(--dark);color:#fff;border-radius:24px;padding:14px 26px;width:100%}
.assets-tabs{display:flex;gap:10px;padding:18px 4px 8px;flex-wrap:wrap}
.assets-tabs b{font-size:14px;font-weight:600;color:#9aa0ac;padding:8px 14px;border-radius:var(--r-pill)}
.assets-tabs b.on{background:rgba(255,255,255,.10);color:#fff}
.arow{display:flex;align-items:center;gap:14px;padding:16px 4px;border-top:1px solid rgba(255,255,255,.07)}
.arow .ic{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;color:#fff;flex:0 0 auto}
.arow .nm{flex:1;min-width:0}
.arow .nm b{display:block;font-size:18px;font-weight:600}
.arow .nm span{font-size:12.5px;color:#8a909c}
.arow .pr{text-align:right}
.arow .pr b{display:block;font-size:18px;font-weight:600}
.arow .pr span{font-size:12.5px}
.up{color:var(--green)}.down{color:var(--red)}
.assets .up{color:#3fcf8e}.assets .down{color:#ff6b6b}

/* ---------- trusted: heading + 2x2 trust grid ---------- */
.trust{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:8px}
.tcard{background:var(--bg-soft);border-radius:24px;padding:32px}
.tcard .ti{width:56px;height:56px;border-radius:16px;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.tcard .ti svg{width:30px;height:30px}
.tcard h3{font-size:20px;color:var(--ink);font-weight:700;letter-spacing:-.3px;margin-bottom:8px}
.tcard p{color:var(--muted);font-size:15px}

/* ---------- testimonial (left big art, right heading) ---------- */
.testi{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.testi h2{font-size:clamp(26px,3.6vw,42px);font-weight:800;color:var(--ink);letter-spacing:-1px;line-height:1.08}
.testi p{color:var(--muted);font-size:17px;margin-top:16px}
.testi-art{background:var(--bg-soft);border-radius:24px;min-height:360px;padding:24px;display:flex;align-items:center;justify-content:center}

/* ---------- blue CTA (download app) ---------- */
.cta-blue{background:var(--blue);color:#fff;padding:80px 0}
.cta-blue .cb-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.cta-blue h2{font-size:clamp(32px,4.6vw,56px);font-weight:800;letter-spacing:-1.6px;line-height:1.02}
.cta-blue p{color:#dbe6ff;font-size:17px;margin-bottom:22px;max-width:420px}
.cta-blue .dl-btns{display:flex;gap:12px;flex-wrap:wrap}
.cta-blue .dl-mini{display:flex;gap:22px;margin-top:22px;flex-wrap:wrap;font-size:13.5px;color:#cfe0ff}

/* ---------- FAQ: heading + 3-col cards w/ accordion ---------- */
.qa-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.qa{background:var(--bg-soft);border-radius:20px;overflow:hidden}
.qa-img{background:var(--bg-soft2);border-radius:16px;margin:18px 18px 0;min-height:170px;display:flex;align-items:center;justify-content:center}
.qa summary{cursor:pointer;list-style:none;padding:20px 18px 8px;font-weight:700;color:var(--ink);font-size:18px;letter-spacing:-.3px}
.qa summary::-webkit-details-marker{display:none}
.qa .a{padding:0 18px 18px;color:var(--muted);font-size:14.5px}
.qa .more{display:inline-block;margin:4px 18px 18px;font-size:13.5px;font-weight:600;color:var(--blue)}

/* ---------- legal disclaimer (small print) ---------- */
.legal{padding:30px 0 50px;background:var(--bg-soft)}
.legal .wrap{max-width:980px}
.legal p{font-size:12px;color:var(--muted-2);line-height:1.7;margin-bottom:12px;display:flex;gap:6px}
.legal a{color:var(--muted);text-decoration:underline}

/* ---------- mega footer ---------- */
.ft{background:var(--bg-soft);color:var(--muted);padding:56px 0 32px}
.ft-top{margin-bottom:34px}
.ft-logo img{height:34px}
.ft-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:28px;margin-bottom:40px}
.ft-col h4{color:var(--ink);font-size:14px;margin-bottom:16px;font-weight:700}
.ft-col h4+h4{margin-top:26px}
.ft-col ul{list-style:none;display:grid;gap:11px;margin-bottom:6px}
.ft-col ul a{font-size:13.5px;color:var(--muted)}
.ft-col ul a:hover{color:var(--blue)}
.risk{font-size:12px;color:var(--muted-2);line-height:1.7;border-top:1px solid var(--line);padding-top:22px;margin-bottom:18px;max-width:960px}
.ft-bot{border-top:1px solid var(--line);padding-top:22px;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;align-items:center;font-size:13px;color:var(--muted-2)}
.ft-bot .links{display:flex;gap:18px;flex-wrap:wrap}
.ft-bot .links a:hover{color:var(--blue)}
.ft-region{display:flex;gap:14px;align-items:center}

/* ---------- responsive ---------- */
@media(max-width:980px){
  .hero-grid,.feat,.testi,.cta-blue .cb-grid,.promo-card{grid-template-columns:1fr;gap:34px}
  .feat.flip .feat-art{order:0}
  .trust,.qa-grid{grid-template-columns:1fr 1fr}
  .ft-grid{grid-template-columns:repeat(3,1fr);gap:24px}
  .menu{display:none}
  .promo-card{padding:36px}
  section{padding:48px 0}
  .hero{padding:48px 0 40px}
}
@media(max-width:640px){
  .wrap{padding:0 18px}
  .hero{padding:36px 0 32px}
  .hero h1{letter-spacing:-1px}
  .hero-stats{gap:22px}
  .signup input,.signup .btn{width:100%}
  .trust,.qa-grid{grid-template-columns:1fr}
  .ft-grid{grid-template-columns:1fr 1fr}
  .nav-cta .btn-text,.nav-ico{display:none}
  .cta-blue{padding:54px 0}
  .promo-card,.feat-art,.assets,.testi-art,.tcard{padding:24px}
  .pc-float{display:none}
  .topbar .wrap{font-size:12.5px}
  .ft-bot{flex-direction:column;align-items:flex-start}
}