:root{--bg: #f7f9fc;--surface: #ffffff;--ink: #0f172a;--muted: #5b6b81;--line: #e5e9f0;--brand: #4f46e5;--brand-ink: #3730a3;--accent: #0ea5e9;--ok: #16a34a;--danger: #dc2626;--shadow-sm: 0 1px 2px rgba(15, 23, 42, .05), 0 1px 3px rgba(15, 23, 42, .06);--shadow-lg: 0 10px 28px rgba(15, 23, 42, .12);--radius: 16px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}img{display:block}.wrap{max-width:1140px;margin:0 auto;padding:0 1.5rem}.container{max-width:1200px;margin:0 auto;padding:0 24px}header{position:sticky;top:0;z-index:40;background:#ffffffdb;backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}.bar{display:flex;align-items:center;justify-content:space-between;height:68px;gap:1rem}.brand{display:flex;align-items:center;gap:.6rem;font-weight:800;font-size:1.08rem;letter-spacing:-.01em}.brand-mark{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--brand),var(--accent));display:grid;place-items:center}.brand-mark svg{width:20px;height:20px;stroke:#fff}.brand b{color:var(--brand-ink)}nav.desktop{display:flex;gap:1.75rem;color:var(--muted);font-weight:500;font-size:.94rem}nav.desktop a:hover{color:var(--ink)}.head-right{display:flex;align-items:center;gap:.75rem}.cart-btn{display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;font-weight:600;font-size:.9rem;border-radius:999px;padding:.5rem 1rem .5rem .7rem;cursor:pointer;box-shadow:var(--shadow-sm);transition:border-color .15s,transform .15s}.cart-btn:hover{border-color:#c7cde0}.cart-btn svg{width:18px;height:18px}.cart-badge{background:var(--brand);color:#fff;border-radius:999px;font-size:.72rem;font-weight:700;min-width:20px;height:20px;display:inline-grid;place-items:center;padding:0 5px}.cart-total{color:var(--ink);font-weight:700}.hero{position:relative;overflow:hidden;background:radial-gradient(900px 420px at 85% -10%,rgba(14,165,233,.14),transparent 60%),radial-gradient(700px 380px at 10% 0%,rgba(79,70,229,.12),transparent 60%),var(--surface);border-bottom:1px solid var(--line)}.hero .container{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:3rem;padding-top:4.5rem;padding-bottom:4rem}.eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--brand-ink);background:#eef0ff;border:1px solid #dfe1ff;border-radius:999px;padding:.35rem .85rem;margin-bottom:1.1rem}.eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--ok)}.hero h1{margin:0;font-size:clamp(2.1rem,4.6vw,3.1rem);line-height:1.08;letter-spacing:-.025em}.hero h1 span{background:linear-gradient(120deg,var(--brand),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}.hero p.lede{margin:1.1rem 0 1.6rem;color:var(--muted);font-size:1.08rem;line-height:1.65;max-width:52ch}.cta-row{display:flex;gap:.8rem;flex-wrap:wrap}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border-radius:12px;padding:.8rem 1.4rem;font:inherit;font-weight:700;font-size:.95rem;cursor:pointer;border:1px solid transparent;transition:transform .12s,box-shadow .12s,background .12s}.btn:active{transform:translateY(1px)}.btn-primary{background:var(--brand);color:#fff;box-shadow:0 6px 16px #4f46e559}.btn-primary:hover{background:#4338ca}.btn-ghost{background:var(--surface);color:var(--ink);border-color:var(--line);box-shadow:var(--shadow-sm)}.btn-ghost:hover{border-color:#c7cde0}.trust-row{display:flex;gap:1.4rem;flex-wrap:wrap;margin-top:2.1rem;font-size:.88rem;font-weight:600;color:var(--muted)}.trust-row span{display:inline-flex;align-items:center;gap:.45rem}.trust-row svg{width:17px;height:17px;stroke:var(--ok)}.hero-art{position:relative;border-radius:20px;overflow:hidden;box-shadow:var(--shadow-lg);border:1px solid var(--line);background:linear-gradient(160deg,#eef2ff,#f0f9ff);aspect-ratio:4 / 3;display:grid;place-items:center}.hero-art img{width:78%;height:auto;filter:drop-shadow(0 24px 30px rgba(15,23,42,.22))}.hero-chip{position:absolute;display:flex;align-items:center;gap:.55rem;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-lg);padding:.65rem .9rem;font-size:.82rem;font-weight:700}.hero-chip small{font-weight:500;color:var(--muted);display:block}.hero-chip.stock{left:1rem;bottom:1rem}.hero-chip.stock .dot{width:9px;height:9px;border-radius:50%;background:var(--ok)}.hero-chip.order{right:1rem;top:1rem}.ticker{border-bottom:1px solid var(--line);background:var(--surface);overflow:hidden}.ticker-inner{display:flex;gap:3rem;padding:.85rem 0;font-size:.85rem;font-weight:600;color:var(--muted);white-space:nowrap;animation:slide 22s linear infinite}.ticker-inner span{display:inline-flex;align-items:center;gap:.55rem}.ticker-inner .sep{color:var(--brand)}@keyframes slide{to{transform:translate(-50%)}}section{padding:3.75rem 0}.sec-head{max-width:560px;margin-bottom:2.2rem}.sec-head h2{margin:0 0 .5rem;font-size:clamp(1.5rem,3vw,2rem);letter-spacing:-.02em}.sec-head p{margin:0;color:var(--muted);line-height:1.6}.kicker{font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--brand);margin-bottom:.5rem}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}.step{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem 1.5rem;box-shadow:var(--shadow-sm);position:relative}.step .num{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,var(--brand),var(--accent));color:#fff;font-weight:800;font-size:1.05rem;margin-bottom:.9rem}.step h3{margin:0 0 .4rem;font-size:1.05rem}.step p{margin:0;color:var(--muted);font-size:.92rem;line-height:1.55}.shop{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.items{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.5rem}.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;transition:transform .15s,box-shadow .15s;position:relative}.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}.card .imgbox{aspect-ratio:4 / 3;background:linear-gradient(160deg,#eef2ff,#f0f9ff);position:relative;overflow:hidden}.card .imgbox img{width:100%;height:100%;object-fit:cover;transition:transform .25s}.card:hover .imgbox img{transform:scale(1.03)}.card .body{padding:1.05rem 1.15rem 1.2rem;display:flex;flex-direction:column;gap:.55rem;flex:1}.card .tag-row{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.cat-pill{font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--brand-ink);background:#eef0ff;border-radius:999px;padding:.2rem .6rem}.live-pill{font-size:.7rem;font-weight:700;color:var(--ok);display:inline-flex;align-items:center;gap:.3rem}.live-pill .dot{width:7px;height:7px;border-radius:50%;background:var(--ok);animation:pulse 2s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.35}}.card h3{margin:0;font-size:1.12rem;letter-spacing:-.01em}.card .desc{margin:0;color:var(--muted);font-size:.88rem;line-height:1.5}.price{font-weight:800;font-size:1.2rem}.stock-in{color:var(--ok);font-size:.78rem;font-weight:700}.stock-out{color:var(--danger);font-size:.78rem;font-weight:700}.pickers{display:flex;gap:.6rem;margin-top:auto;padding-top:.35rem}select.qty,input.qty{font:inherit;font-size:.95rem;border:1px solid var(--line);border-radius:10px;padding:.62rem .7rem;background:#fbfcfe;color:var(--ink);min-width:0}select{flex:1}.btn-add{flex:none;background:var(--ink);color:#fff;border:none;border-radius:10px;font:inherit;font-weight:700;font-size:.92rem;padding:.62rem 1.1rem;cursor:pointer;transition:background .12s}.btn-add:hover{background:var(--brand)}.btn-add:disabled{opacity:.45;cursor:not-allowed}.empty{color:var(--muted);padding:3.5rem 0;text-align:center;grid-column:1 / -1}.skel{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff}.skel:after{content:"";display:block;position:absolute;inset:0;transform:translate(-100%);background:linear-gradient(90deg,transparent,rgba(148,163,184,.12),transparent);animation:shimmer 1.4s infinite}@keyframes shimmer{to{transform:translate(100%)}}.skel .im{aspect-ratio:4 / 3;background:#edf1f7}.skel .ln{margin:.9rem 1.1rem;height:13px;border-radius:6px;background:#edf1f7}.skel .ln.w50{width:55%}.skel .ln.w80{width:80%}.skel .ln.w35{width:35%}.notice{display:none;margin:0 0 1.5rem;padding:.9rem 1.1rem;border-radius:12px;font-size:.92rem;line-height:1.5;background:#eef0ff;border:1px solid #dfe1ff}.notice.error{color:#991b1b;border-color:#fecaca;background:#fef2f2}.notice.show{display:block}.notice code{background:#fff9;padding:.1rem .4rem;border-radius:5px}.why{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem}.why .tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem 1.3rem;box-shadow:var(--shadow-sm)}.why .tile svg{width:24px;height:24px;stroke:var(--brand);margin-bottom:.8rem}.why .tile h3{margin:0 0 .35rem;font-size:1rem}.why .tile p{margin:0;color:var(--muted);font-size:.87rem;line-height:1.5}.cta-band{border-radius:22px;background:linear-gradient(120deg,#4f46e5,#0ea5e9);color:#fff;padding:3rem 2.5rem;display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap}.cta-band h2{margin:0 0 .35rem;font-size:clamp(1.4rem,3vw,1.9rem);letter-spacing:-.02em}.cta-band p{margin:0;opacity:.9;line-height:1.5}.btn-white{background:#fff;color:var(--brand-ink);box-shadow:0 6px 16px #0000002e}.btn-white:hover{background:#f1f2ff}footer{background:#0f172a;color:#cbd5e1;margin-top:0;padding:3.25rem 0 2rem}.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:2.5rem}footer h4{color:#fff;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;margin:0 0 .9rem}footer p{margin:0 0 1rem;font-size:.9rem;line-height:1.6;color:#94a3b8}footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55rem;font-size:.92rem}footer ul a:hover{color:#fff}.foot-bottom{margin-top:2.5rem;padding-top:1.4rem;border-top:1px solid rgba(148,163,184,.18);display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem;font-size:.82rem;color:#64748b}footer .brand{color:#fff;margin-bottom:1rem}.backdrop{position:fixed;inset:0;background:#0f172a73;z-index:50;opacity:0;pointer-events:none;transition:opacity .25s}.backdrop.show{opacity:1;pointer-events:auto}.drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,92vw);z-index:51;background:#fff;box-shadow:-18px 0 40px #0f172a29;transform:translate(105%);transition:transform .28s cubic-bezier(.22,1,.36,1);display:flex;flex-direction:column}.drawer.show{transform:translate(0)}.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 1.4rem;border-bottom:1px solid var(--line)}.drawer-head h2{margin:0;font-size:1.15rem}.icon-btn{border:1px solid var(--line);background:#fff;border-radius:10px;width:36px;height:36px;display:grid;place-items:center;cursor:pointer;color:var(--muted)}.icon-btn:hover{color:var(--ink);border-color:#c7cde0}.drawer-body{flex:1;overflow-y:auto;padding:1.2rem 1.4rem;display:flex;flex-direction:column;gap:1rem}.line{display:grid;grid-template-columns:64px 1fr auto;gap:.9rem;align-items:center;padding-bottom:1rem;border-bottom:1px solid #f1f3f8}.line img{width:64px;height:64px;border-radius:12px;object-fit:cover;border:1px solid var(--line)}.line .nm{font-weight:700;font-size:.95rem}.line .vn{color:var(--muted);font-size:.82rem;margin-top:.15rem}.stepper{display:inline-flex;align-items:center;gap:.55rem;border:1px solid var(--line);border-radius:999px;padding:.2rem .4rem;margin-top:.5rem}.stepper button{border:none;background:none;font:inherit;font-size:1.05rem;font-weight:700;width:24px;height:24px;border-radius:50%;cursor:pointer;color:var(--muted)}.stepper button:hover{background:#eef0f4;color:var(--ink)}.stepper b{min-width:22px;text-align:center;font-size:.9rem}.line .sub{font-weight:700;font-size:.95rem}.line .rm{grid-column:3;justify-self:end;border:none;background:none;color:var(--muted);font-size:.78rem;cursor:pointer;text-decoration:underline}.line .rm:hover{color:var(--danger)}.cart-empty{text-align:center;color:var(--muted);padding:3rem 0;font-size:.95rem}.drawer-foot{border-top:1px solid var(--line);padding:1.1rem 1.4rem 1.4rem;background:#fff}.sub-row{display:flex;justify-content:space-between;margin-bottom:.9rem;font-size:.95rem;color:var(--muted)}.sub-row b{color:var(--ink);font-size:1.2rem}.drawer-foot .btn{width:100%}.drawer-foot .hint{text-align:center;margin-top:.7rem;font-size:.78rem;color:var(--muted)}.order-box{display:none}.order-box.show{display:flex;flex-direction:column;align-items:center;text-align:center;padding:2.5rem 0 1.5rem;gap:.7rem}.order-box .tick{width:60px;height:60px;border-radius:50%;background:#dcfce7;color:var(--ok);display:grid;place-items:center;font-size:1.7rem}.order-box h2{margin:0;font-size:1.15rem}.order-box p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.5}.order-box code{background:#eef0f4;padding:.15rem .45rem;border-radius:6px;font-size:.85em}@media (max-width: 900px){.hero .container{grid-template-columns:1fr;padding-top:3rem}.hero-art{max-width:420px}.steps,.why{grid-template-columns:1fr 1fr}}@media (max-width: 620px){nav.desktop{display:none}.steps,.why{grid-template-columns:1fr}.cta-band{padding:2rem 1.5rem}.foot-grid{grid-template-columns:1fr;gap:1.75rem}}