/* ================================================================
   MuseShop v3 — editorial premium theme.
   Warm paper background, ink text, one indigo-violet accent.
   Every visual rule lives under .mx2 so nothing fights with the
   legacy unicorn styles or Bootstrap defaults.
   ================================================================ */

/* ---------- neutralize global leaks ---------- */
body {
    background: #f5f3ee !important;
    color: #17161d;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
        "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif !important;
    font-size: 15px;
    line-height: 1.6;
}
.header { padding: 0; border-bottom: none; background: transparent; }
.footer { background: transparent; padding: 0; }
.card { border: none; border-radius: 22px; box-shadow: 0 1px 3px rgba(23,20,10,.06); }
.modal-content { border: none; border-radius: 22px; overflow: hidden; }
.modal-header { border-bottom: 1px solid #efece4; padding: 18px 24px; }
.modal-body { padding: 20px 24px; font-size: 14px; line-height: 1.8; color: #3d3a33; }
.modal-footer { border-top: 1px solid #efece4; padding: 14px 24px; }
.btn { border-radius: 999px; }
.btn-secondary { background: #17161d; border-color: #17161d; padding: 8px 22px; }
.btn-dark { background: #17161d; border-color: #17161d; padding: 11px 30px; font-weight: 600; }
.btn-primary { background: #2f6df0; border-color: #2f6df0; }
.btn-primary:hover, .btn-primary:focus { background: #245cd6; border-color: #245cd6; }
.badge { border-radius: 999px; font-weight: 500; padding: 5px 11px; }
.form-control { border-radius: 12px; border-color: #e5e1d6; }
.form-control:focus { border-color: #2f6df0; box-shadow: 0 0 0 3px rgba(47,109,240,.15); }

/* ---------- scope root ---------- */
.mx2 { color: #17161d; }
.mx2 *, .mx2 *::before, .mx2 *::after { box-sizing: border-box; }
.mx2 a { text-decoration: none; }
.mx2 img { max-width: 100%; }
.mx2 .wrap { max-width: 1140px; margin: 0 auto; padding: 0 22px; }
.mx2 .serif { font-family: Georgia, "Times New Roman", "Songti SC", "STSong", "SimSun", serif; }

/* ---------- header ---------- */
.mx2 .hd {
    position: sticky; top: 0; z-index: 1030;
    background: rgba(250,249,246,.85);
    -webkit-backdrop-filter: saturate(1.5) blur(14px);
    backdrop-filter: saturate(1.5) blur(14px);
    border-bottom: 1px solid rgba(23,22,29,.08);
}
.mx2 .hd-in { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.mx2 .brand { display: flex; align-items: center; gap: 11px; }
.mx2 .mark {
    width: 40px; height: 40px; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #2f6df0, #7c5cff);
    color: #fff; font-family: Georgia, "Times New Roman", serif;
    font-size: 23px; line-height: 1; padding-bottom: 2px;
    box-shadow: 0 6px 16px rgba(80,110,255,.35);
}
.mx2 .brand-name { font-size: 17px; font-weight: 800; color: #17161d; line-height: 1.15; letter-spacing: .5px; }
.mx2 .brand-sub { font-size: 9px; letter-spacing: 3.5px; color: #a39d8f; line-height: 1.2; }
.mx2 .hd-links { display: flex; align-items: center; gap: 8px; }
.mx2 .hd-link { color: #45423a; font-size: 14px; font-weight: 500; padding: 8px 13px; border-radius: 999px; }
.mx2 .hd-link:hover { background: rgba(23,22,29,.05); color: #17161d; }
.mx2 .hd-cta {
    background: #17161d; color: #fff !important; font-size: 14px; font-weight: 600;
    padding: 9px 19px; border-radius: 999px;
    box-shadow: 0 4px 14px rgba(23,22,29,.25);
}
.mx2 .hd-cta:hover { background: #2f6df0; }

/* ---------- hero (dark stage) ---------- */
.mx2 .hero {
    position: relative; overflow: hidden;
    background: #0b0c15; color: #f2f1ec;
    padding: 72px 0 96px;
}
.mx2 .hero::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(680px 340px at 12% -80px, rgba(47,109,240,.38), rgba(47,109,240,0) 70%),
        radial-gradient(760px 380px at 88% -100px, rgba(124,92,255,.34), rgba(124,92,255,0) 70%),
        radial-gradient(500px 300px at 55% 115%, rgba(47,109,240,.16), rgba(47,109,240,0) 70%);
}
.mx2 .hero::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
    background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.22), rgba(255,255,255,0));
}
.mx2 .hero > .wrap { position: relative; z-index: 1; }
.mx2 .hero-grid { display: grid; grid-template-columns: minmax(0,1.08fr) minmax(0,.92fr); gap: 48px; align-items: center; }
.mx2 .eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16);
    color: #d7d5ee; font-size: 13px; font-weight: 600;
    padding: 6px 15px; border-radius: 999px;
}
.mx2 .eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: #3ecf7a; box-shadow: 0 0 0 3px rgba(62,207,122,.22); }
.mx2 .hero h1 {
    font-family: Georgia, "Times New Roman", "Songti SC", "STSong", "SimSun", serif;
    font-size: clamp(36px, 4.6vw, 56px); font-weight: 700; line-height: 1.28;
    letter-spacing: 1px; margin: 24px 0 16px; color: #fff;
}
.mx2 .hero h1 .grad {
    background: linear-gradient(92deg, #6ea8ff 5%, #b79cff 95%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.mx2 .hero-sub { color: rgba(235,234,244,.72); font-size: 16px; line-height: 1.85; margin: 0; max-width: 520px; }
.mx2 .hero-stats {
    display: flex; gap: 0; flex-wrap: wrap; margin-top: 34px;
    border-top: 1px solid rgba(255,255,255,.13); padding-top: 22px;
}
.mx2 .hstat {
    display: flex; flex-direction: column; gap: 2px;
    padding: 0 26px 0 0; margin-right: 26px; border-right: 1px solid rgba(255,255,255,.13);
    font-size: 12.5px; color: rgba(235,234,244,.55);
}
.mx2 .hstat:last-child { border-right: none; margin-right: 0; padding-right: 0; }
.mx2 .hstat b { color: #fff; font-weight: 700; font-size: 15px; }
.mx2 .hero-visual { position: relative; justify-self: end; width: min(400px, 100%); }
.mx2 .hero-visual .frame {
    position: relative; border-radius: 28px; padding: 10px;
    background: linear-gradient(150deg, rgba(255,255,255,.22), rgba(255,255,255,.04) 55%);
    border: 1px solid rgba(255,255,255,.18);
    box-shadow: 0 40px 80px -30px rgba(0,0,0,.65), 0 0 90px -18px rgba(124,92,255,.45);
}
.mx2 .hero-visual img { display: block; width: 100%; border-radius: 20px; }
.mx2 .chip {
    position: absolute; display: inline-flex; align-items: center; gap: 7px;
    background: rgba(16,17,28,.82); color: #fff; border: 1px solid rgba(255,255,255,.2);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    font-size: 13px; font-weight: 600; padding: 8px 15px; border-radius: 999px;
    box-shadow: 0 14px 30px -10px rgba(0,0,0,.55);
}
.mx2 .chip .cdot { width: 7px; height: 7px; border-radius: 50%; background: #3ecf7a; }
.mx2 .chip-price { left: -16px; bottom: 44px; }
.mx2 .chip-price .amt { color: #ffd166; font-weight: 800; }
.mx2 .chip-ship { right: -10px; top: 30px; }

/* ---------- notice ---------- */
.mx2 .notice {
    position: relative; z-index: 2;
    display: flex; gap: 10px; align-items: flex-start;
    background: #fdf6e3; border: 1px solid #f0e3bb; color: #6d5a1e;
    border-radius: 16px; padding: 13px 18px; font-size: 14px; line-height: 1.7;
    margin: -38px 0 0;
    box-shadow: 0 14px 30px -18px rgba(23,20,10,.25);
}
.mx2 .notice p { margin: 0; }

/* ---------- cards & layout ---------- */
.mx2 .card2 {
    background: #fff; border: 1px solid #eae6db; border-radius: 24px;
    box-shadow: 0 1px 2px rgba(23,20,10,.04), 0 20px 44px -26px rgba(23,20,10,.22);
    padding: 32px;
}
.mx2 .cols { display: grid; grid-template-columns: minmax(0,1fr) 402px; gap: 22px; align-items: start; position: relative; z-index: 2; }
.mx2 .section { padding: 26px 0 10px; }
.mx2 .lift { margin-top: -56px; }

/* product visual + intro */
.mx2 .visual {
    position: relative; border-radius: 20px; overflow: hidden; margin-bottom: 24px;
    background: linear-gradient(120deg, #0b1e3f 0%, #14498f 48%, #4a3aff 100%);
    min-height: 218px; display: flex; align-items: flex-end;
}
.mx2 .visual::before {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(420px 200px at 85% 0%, rgba(124,92,255,.45), rgba(124,92,255,0) 70%);
}
.mx2 .visual img { position: absolute; right: 22px; top: 50%; transform: translateY(-50%); width: 172px; height: 172px; object-fit: cover; border-radius: 24px; box-shadow: 0 18px 40px rgba(0,0,0,.35); }
.mx2 .visual-txt { position: relative; padding: 26px 28px; color: #fff; max-width: 62%; }
.mx2 .visual-txt .vt-k { font-size: 12px; letter-spacing: 3px; color: rgba(255,255,255,.65); font-weight: 600; }
.mx2 .visual-txt .vt-t { font-size: 27px; font-weight: 800; line-height: 1.3; margin-top: 7px; }
.mx2 .visual-txt .vt-s { font-size: 13.5px; color: rgba(255,255,255,.78); margin-top: 6px; }
.mx2 .intro-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.mx2 .intro-name { font-size: 25px; font-weight: 800; margin: 0; letter-spacing: .3px; }
.mx2 .intro-type { color: #a39d8f; font-size: 13.5px; white-space: nowrap; }
.mx2 .claims { list-style: none; padding: 0; margin: 10px 0 0; }
.mx2 .claims li { display: flex; gap: 12px; padding: 11px 0; border-bottom: 1px dashed #eee9dc; font-size: 15px; color: #3d3a33; line-height: 1.65; }
.mx2 .claims li:last-child { border-bottom: none; padding-bottom: 2px; }
.mx2 .ck {
    flex: none; width: 22px; height: 22px; margin-top: 2px; border-radius: 50%;
    background: linear-gradient(135deg, #2f6df0, #7c5cff); color: #fff;
    display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700;
    box-shadow: 0 3px 8px rgba(80,110,255,.35);
}
.mx2 .claims b { color: #17161d; }

/* order panel */
.mx2 .panel { position: sticky; top: 90px; }
.mx2 .panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.mx2 .panel-title { font-size: 16.5px; font-weight: 800; }
.mx2 .live-tag { display: inline-flex; align-items: center; gap: 6px; background: #e7f6ec; color: #1c7c43; border-radius: 999px; padding: 4px 12px; font-size: 12px; font-weight: 600; }
.mx2 .live-tag i { width: 6px; height: 6px; border-radius: 50%; background: #1c7c43; }
.mx2 .spec {
    display: flex; align-items: center; gap: 13px;
    border: 1.5px solid #e5e1d6; border-radius: 18px; padding: 16px 18px; margin-bottom: 12px;
    color: #17161d; background: #fff; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.mx2 a.spec:hover { border-color: #2f6df0; box-shadow: 0 0 0 4px rgba(47,109,240,.13); transform: translateY(-1px); color: #17161d; }
.mx2 .spec.hot { border-color: #17161d; background: linear-gradient(180deg, #fff, #faf8f2); }
.mx2 .radio-dot { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 2px solid #cfcabb; position: relative; }
.mx2 .radio-dot::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: #2f6df0; opacity: 0; transition: opacity .15s ease; }
.mx2 a.spec:hover .radio-dot { border-color: #2f6df0; }
.mx2 a.spec:hover .radio-dot::after { opacity: 1; }
.mx2 .spec-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mx2 .spec-name { font-size: 16px; font-weight: 700; }
.mx2 .spec-sub { font-size: 12.5px; color: #a39d8f; display: inline-flex; align-items: center; gap: 6px; }
.mx2 .sdot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.mx2 .sdot.ok { background: #2fbf71; }
.mx2 .sdot.low { background: #f0a020; }
.mx2 .sdot.out { background: #d8d3c6; }
.mx2 .spec-price { text-align: right; white-space: nowrap; }
.mx2 .spec-price .cur { font-size: 14px; font-weight: 700; color: #a39d8f; }
.mx2 .spec-price .num { font-size: 25px; font-weight: 800; }
.mx2 .spec-price .per { font-size: 12.5px; color: #a39d8f; display: block; margin-top: -2px; }
.mx2 .panel-note { color: #a39d8f; font-size: 13px; line-height: 1.75; margin: 4px 0 0; }
.mx2 .secure { display: flex; gap: 8px; align-items: center; margin-top: 16px; padding-top: 16px; border-top: 1px solid #efece4; color: #a39d8f; font-size: 12.5px; }

/* ---------- how it works ---------- */
.mx2 .howit { padding: 54px 0 6px; }
.mx2 .sec-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 22px; }
.mx2 .sec-head h2 { font-size: 24px; font-weight: 800; margin: 0; letter-spacing: .3px; }
.mx2 .sec-head .sec-sub { color: #a39d8f; font-size: 14px; }
.mx2 .how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.mx2 .how {
    background: #fff; border: 1px solid #eae6db; border-radius: 20px; padding: 24px 24px 20px;
}
.mx2 .how .no {
    font-family: Georgia, "Times New Roman", serif; font-size: 30px; line-height: 1;
    background: linear-gradient(120deg, #2f6df0, #7c5cff);
    -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 700;
}
.mx2 .how b { display: block; font-size: 15.5px; margin: 12px 0 6px; }
.mx2 .how span { font-size: 13.5px; color: #73707c; line-height: 1.75; display: block; }

/* ---------- FAQ ---------- */
.mx2 .faq-sec { padding: 40px 0 8px; }
.mx2 .faq { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 22px; }
.mx2 .faq details {
    background: #fff; border: 1px solid #eae6db; border-radius: 16px; padding: 16px 20px;
}
.mx2 .faq summary {
    cursor: pointer; font-size: 15px; font-weight: 600; color: #17161d; list-style: none;
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
}
.mx2 .faq summary::-webkit-details-marker { display: none; }
.mx2 .faq summary::after { content: "+"; font-size: 20px; color: #a39d8f; font-weight: 400; }
.mx2 .faq details[open ] summary::after { content: "–"; }
.mx2 .faq details p { margin: 10px 0 2px; font-size: 14px; color: #5d594f; line-height: 1.8; }

/* trust strip */
.mx2 .trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 22px; }
.mx2 .trust .t { background: #fff; border: 1px solid #eae6db; border-radius: 20px; padding: 20px 22px; }
.mx2 .trust .t b { display: block; font-size: 15px; margin-bottom: 5px; }
.mx2 .trust .t span { font-size: 13.5px; color: #73707c; line-height: 1.7; display: block; }

/* ---------- forms ---------- */
.mx2 .lbl { display: block; font-size: 14px; font-weight: 600; margin-bottom: 8px; color: #17161d; }
.mx2 .inp {
    width: 100%; height: 52px; border: 1.5px solid #e5e1d6; border-radius: 14px;
    padding: 0 16px; font-size: 15px; background: #fff; color: #17161d; outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.mx2 .inp:focus { border-color: #2f6df0; box-shadow: 0 0 0 4px rgba(47,109,240,.13); }
.mx2 .inp::placeholder { color: #bdb7a6; }
.mx2 .fld { margin-bottom: 16px; }
.mx2 .cta {
    display: block; width: 100%; border: none; cursor: pointer; text-align: center;
    background: linear-gradient(92deg, #2f6df0, #7c5cff); color: #fff;
    font-size: 16.5px; font-weight: 700; border-radius: 999px; padding: 15px 22px;
    box-shadow: 0 10px 24px -8px rgba(80,110,255,.55);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.mx2 .cta:hover { transform: translateY(-1px); filter: brightness(1.05); color: #fff; box-shadow: 0 14px 28px -8px rgba(80,110,255,.6); }
.mx2 .cta:active { transform: translateY(0); }
.mx2 .fine { color: #a39d8f; font-size: 13px; line-height: 1.75; margin: 13px 0 0; }

/* ---------- buy page ---------- */
.mx2 .buy-grid { display: grid; grid-template-columns: minmax(0,1fr) 402px; gap: 22px; align-items: start; }
.mx2 .buy-head { display: flex; gap: 18px; align-items: center; margin-bottom: 22px; }
.mx2 .buy-img { width: 84px; height: 84px; object-fit: cover; border-radius: 18px; box-shadow: 0 8px 20px rgba(23,20,10,.14); }
.mx2 .buy-name { font-size: 22px; font-weight: 800; margin: 0 0 9px; line-height: 1.35; }
.mx2 .tags { display: flex; flex-wrap: wrap; gap: 6px; }
.mx2 .tag { border-radius: 999px; padding: 3px 11px; font-size: 12px; font-weight: 500; }
.mx2 .tag-auto { background: #e7f6ec; color: #1c7c43; }
.mx2 .tag-manual { background: #fdf3e0; color: #9a6a12; }
.mx2 .tag-stock { background: #f0eee7; color: #5d594f; }
.mx2 .tag-limit { background: #fdeeee; color: #b3372f; }
.mx2 .price-row { display: flex; align-items: baseline; gap: 6px; margin: 4px 0 2px; }
.mx2 .price-cur { font-size: 20px; font-weight: 800; color: #e5484d; }
.mx2 .price-num { font-size: 46px; font-weight: 800; line-height: 1; color: #e5484d; letter-spacing: -.5px; }
.mx2 .price-per { font-size: 15px; color: #a39d8f; }
.mx2 .price-sub { color: #a39d8f; font-size: 13px; margin-bottom: 18px; }
.mx2 .amount { border-top: 1px dashed #e7e2d4; border-bottom: 1px dashed #e7e2d4; padding: 12px 0; margin-bottom: 20px; }
.mx2 .amount .r { display: flex; justify-content: space-between; font-size: 14px; color: #5d594f; padding: 3.5px 0; }
.mx2 .amount .r.total { color: #17161d; font-weight: 700; font-size: 15.5px; }
.mx2 .amount .r.total .v { color: #e5484d; }
.mx2 .pay-list { display: flex; flex-direction: column; gap: 10px; }
.mx2 .pay-opt {
    display: flex; align-items: center; gap: 11px; cursor: pointer; margin: 0;
    border: 1.5px solid #e5e1d6; border-radius: 14px; padding: 13px 16px;
    font-size: 15px; font-weight: 500; background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.mx2 .pay-opt.active { border-color: #2f6df0; box-shadow: 0 0 0 4px rgba(47,109,240,.12); }
.mx2 .pay-opt input { accent-color: #2f6df0; width: 17px; height: 17px; }
.mx2 .sale-badges { margin-bottom: 14px; }
.mx2 .sale-badges .badge { background: #17161d; margin: 0 6px 6px 0; }
.mx2 .captcha-row { display: flex; gap: 10px; align-items: stretch; }
.mx2 .captcha-row .inp { flex: 1; }
.mx2 .captcha-row img { height: 52px; border-radius: 12px; border: 1px solid #e5e1d6; cursor: pointer; }
.mx2 .desc-body { font-size: 15px; line-height: 1.9; color: #3d3a33; }
.mx2 .desc-body p { margin: 0 0 10px; }
.mx2 .side-h { font-size: 16.5px; font-weight: 800; margin: 0 0 14px; }
.mx2 .steps { list-style: none; padding: 0; margin: 0; counter-reset: st; }
.mx2 .steps li { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px dashed #eee9dc; font-size: 14.5px; color: #3d3a33; line-height: 1.7; }
.mx2 .steps li:last-child { border-bottom: none; }
.mx2 .steps .n {
    counter-increment: st; flex: none; width: 22px; height: 22px; margin-top: 2px; border-radius: 50%;
    background: #eef3fe; color: #2f6df0; font-size: 12.5px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
}
.mx2 .steps .n::before { content: counter(st); }

/* ---------- page head (search etc.) ---------- */
.mx2 .page-hero { padding: 54px 0 8px; text-align: center; position: relative; overflow: hidden; }
.mx2 .page-hero::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(560px 260px at 50% -60px, rgba(47,109,240,.15), rgba(47,109,240,0) 70%);
}
.mx2 .page-hero > .wrap { position: relative; }
.mx2 .page-hero h1 { font-size: clamp(30px, 4.6vw, 42px); font-weight: 800; margin: 18px 0 10px; }
.mx2 .page-hero .sub { color: #73707c; font-size: 15.5px; margin: 0; }
.mx2 .narrow { max-width: 620px; margin: 0 auto; }
.mx2 .tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.mx2 .tabs .nav-link {
    border-radius: 999px; color: #5d594f; font-size: 14px; font-weight: 500;
    padding: 8px 18px; border: 1.5px solid #e5e1d6; background: #fff;
}
.mx2 .tabs .nav-link:hover { color: #17161d; border-color: #cfcabb; }
.mx2 .tabs .nav-link.active { background: #17161d; border-color: #17161d; color: #fff; }

/* ---------- generic result pages (bill / orderinfo / qrpay) ---------- */
.mx2 .res-card { max-width: 720px; margin: 0 auto; }
.mx2 .kv { display: flex; justify-content: space-between; gap: 18px; padding: 8px 0; font-size: 14.5px; border-bottom: 1px dashed #efece4; }
.mx2 .kv:last-child { border-bottom: none; }
.mx2 .kv .k { color: #a39d8f; flex: none; }
.mx2 .kv .v { color: #17161d; font-weight: 500; text-align: right; word-break: break-all; }
.mx2 .kv .v.big { font-size: 19px; font-weight: 800; color: #e5484d; }
.mx2 .res-title { font-size: 20px; font-weight: 800; margin: 0 0 14px; display: flex; align-items: center; gap: 10px; }
.mx2 .res-title .ok-ic { width: 30px; height: 30px; border-radius: 50%; background: #e7f6ec; color: #1c7c43; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; }
.mx2 .secret-box {
    background: #faf8f2; border: 1.5px dashed #d5cdb8; border-radius: 14px;
    padding: 14px 16px; font-size: 14px; line-height: 1.8; word-break: break-all; color: #17161d;
    width: 100%; resize: vertical;
}
.mx2 .order-block { margin-bottom: 20px; }
.mx2 .order-block:last-child { margin-bottom: 0; }

/* ---------- footer (dark) ---------- */
.mx2 .ft { margin-top: 64px; background: #0b0c15; color: #b9bac6; padding: 46px 0 38px; }
.mx2 .ft-in { display: flex; justify-content: space-between; align-items: flex-start; gap: 28px; flex-wrap: wrap; }
.mx2 .ft-brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 16px; color: #fff; }
.mx2 .ft-brand .mark { width: 34px; height: 34px; border-radius: 10px; font-size: 19px; }
.mx2 .ft-desc { margin-top: 12px; font-size: 13px; color: rgba(220,220,232,.55); line-height: 1.8; max-width: 340px; }
.mx2 .ft-links { display: flex; gap: 22px; font-size: 14px; padding-top: 6px; }
.mx2 .ft-links a { color: #b9bac6; }
.mx2 .ft-links a:hover { color: #fff; }
.mx2 .ft-note { margin-top: 26px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.09); font-size: 12.5px; color: rgba(220,220,232,.42); display: flex; gap: 16px; flex-wrap: wrap; line-height: 1.7; }
.mx2 .ft-note a { color: rgba(220,220,232,.42); }
.mx2 .ft-note a:hover { color: #fff; }

/* ---------- responsive ---------- */
@media (max-width: 991px) {
    .mx2 .cols, .mx2 .buy-grid { grid-template-columns: 1fr; }
    .mx2 .hero-grid { grid-template-columns: 1fr; gap: 34px; }
    .mx2 .hero { padding: 48px 0 84px; }
    .mx2 .hero-visual { justify-self: center; width: min(320px, 88%); }
    .mx2 .panel { position: static; }
    .mx2 .trust, .mx2 .how-grid { grid-template-columns: 1fr; }
    .mx2 .faq { grid-template-columns: 1fr; }
    .mx2 .card2 { padding: 24px 20px; }
    .mx2 .visual img { width: 118px; height: 118px; right: 14px; }
    .mx2 .visual-txt { max-width: 58%; padding: 20px; }
    .mx2 .visual-txt .vt-t { font-size: 21px; }
    .mx2 .hd-link { display: none; }
    .mx2 .hstat { padding-right: 18px; margin-right: 18px; }
}