/* =====================================================
   丸子商城官网 - 统一样式（高端现代风格）
   ===================================================== */
:root{
    --of-primary:#6d5efc; --of-primary-2:#8b7cff; --of-primary-3:#4f46e5;
    --of-dark:#0d0d12; --of-dark-2:#15151d; --of-dark-3:#1d1d28;
    --of-text:#1a1a22; --of-muted:#6b7280;
    --of-line:#ececf1; --of-bg:#f7f7fb;
    --of-radius:16px;
    --of-shadow:0 10px 40px rgba(20,16,70,.10);
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",Roboto,sans-serif;color:var(--of-text);background:#fff;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.of-container{max-width:1180px;margin:0 auto;padding:0 20px}

/* ---------- 顶部导航 ---------- */
.of-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.88);backdrop-filter:blur(12px);border-bottom:1px solid var(--of-line)}
.of-header-inner{display:flex;align-items:center;justify-content:space-between;height:68px}
.of-brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px;letter-spacing:-.02em}
.of-brand-logo{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--of-primary),var(--of-primary-3));display:flex;align-items:center;justify-content:center;color:#fff;font-size:16px;box-shadow:0 6px 16px rgba(79,70,229,.35)}
.of-nav{display:flex;align-items:center;gap:8px}
.of-nav>a{color:var(--of-muted);font-size:14px;padding:8px 14px;border-radius:10px;transition:all .2s}
.of-nav>a:hover{color:var(--of-text);background:#f2f2f8}
.of-btn{display:inline-block;font-size:14px;font-weight:600;padding:9px 20px;border-radius:12px;transition:all .2s;border:1px solid transparent}
.of-btn-ghost{color:var(--of-text);border-color:var(--of-line);background:#fff}
.of-btn-ghost:hover{border-color:var(--of-primary);color:var(--of-primary)}
.of-btn-primary{background:linear-gradient(135deg,var(--of-primary),var(--of-primary-3));color:#fff;box-shadow:0 6px 18px rgba(79,70,229,.3)}
.of-btn-primary:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(79,70,229,.42)}
.of-btn-lg{padding:14px 32px;font-size:16px;border-radius:14px}

/* ---------- Hero ---------- */
.of-hero{position:relative;background:radial-gradient(1200px 500px at 20% -10%,rgba(109,92,252,.22),transparent 60%),radial-gradient(900px 400px at 90% 0%,rgba(255,140,66,.14),transparent 55%),linear-gradient(180deg,#f7f7ff 0%,#ffffff 100%);padding:80px 0 60px;overflow:hidden}
.of-hero-inner{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.of-hero-badge{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--of-line);border-radius:999px;padding:6px 14px;font-size:13px;color:var(--of-muted);box-shadow:var(--of-shadow)}
.of-hero-badge b{color:var(--of-primary)}
.of-hero h1{font-size:46px;line-height:1.16;font-weight:900;letter-spacing:-.03em;margin:20px 0 18px}
.of-hero h1 em{font-style:normal;background:linear-gradient(120deg,var(--of-primary),#ff8c42);-webkit-background-clip:text;background-clip:text;color:transparent}
.of-hero p.sub{font-size:17px;color:var(--of-muted);line-height:1.8;max-width:520px}
.of-hero-cta{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap}
.of-hero-note{font-size:13px;color:var(--of-muted);margin-top:16px}
.of-hero-note i{color:var(--of-primary);font-style:normal}
.of-hero-visual{position:relative}
.of-hero-visual .of-shot-main{width:100%;border-radius:20px;box-shadow:0 30px 80px rgba(20,16,70,.25);border:1px solid rgba(255,255,255,.6)}
.of-float-card{position:absolute;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border:1px solid var(--of-line);border-radius:14px;box-shadow:var(--of-shadow);padding:14px 18px;font-size:13px}
.of-float-card b{font-size:16px;display:block;color:var(--of-text)}
.of-float-card span{color:var(--of-muted)}
.of-float-1{top:-18px;right:-10px}
.of-float-2{bottom:-20px;left:-12px}
.of-float-2 b{color:var(--of-primary)}

/* ---------- 数据带 ---------- */
.of-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:44px 0 0}
.of-stat{background:#fff;border:1px solid var(--of-line);border-radius:var(--of-radius);padding:22px;text-align:center;box-shadow:0 4px 18px rgba(20,16,70,.05)}
.of-stat b{font-size:28px;font-weight:900;color:var(--of-text)}
.of-stat span{display:block;margin-top:4px;color:var(--of-muted);font-size:13px}

/* ---------- 通用区块 ---------- */
.of-section{padding:72px 0}
.of-section.alt{background:var(--of-bg)}
.of-section-head{text-align:center;max-width:680px;margin:0 auto 46px}
.of-section-head .eyebrow{display:inline-block;font-size:13px;font-weight:700;color:var(--of-primary);letter-spacing:.06em;text-transform:uppercase}
.of-section-head h2{font-size:34px;font-weight:900;letter-spacing:-.02em;margin:10px 0 14px}
.of-section-head p{color:var(--of-muted);font-size:15px;line-height:1.8}

/* ---------- 功能卡片 ---------- */
.of-features{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.of-feature{background:#fff;border:1px solid var(--of-line);border-radius:var(--of-radius);padding:26px;transition:all .22s}
.of-feature:hover{transform:translateY(-4px);box-shadow:var(--of-shadow);border-color:transparent}
.of-feature .ic{width:48px;height:48px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:16px}
.of-feature h3{font-size:17px;margin-bottom:8px}
.of-feature p{font-size:13.5px;color:var(--of-muted);line-height:1.7}
.ic-1{background:#eef2ff;color:#4f46e5}.ic-2{background:#fff1f2;color:#e11d48}.ic-3{background:#fef3c7;color:#d97706}
.ic-4{background:#d1fae5;color:#059669}.ic-5{background:#e0f2fe;color:#0284c7}.ic-6{background:#f3e8ff;color:#9333ea}
.ic-7{background:#fee2e2;color:#dc2626}.ic-8{background:#dbeafe;color:#2563eb}.ic-9{background:#fce7f3;color:#db2777}

/* ---------- 截图轮播 ---------- */
.of-shots{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.of-shot{background:#fff;border:1px solid var(--of-line);border-radius:var(--of-radius);overflow:hidden;box-shadow:0 8px 30px rgba(20,16,70,.08);transition:all .22s}
.of-shot:hover{transform:translateY(-4px)}
.of-shot img{width:100%;height:auto}
.of-shot .cap{padding:14px 18px;font-size:14px;font-weight:600}

/* ---------- 步骤 ---------- */
.of-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;counter-reset:step}
.of-step{position:relative;background:#fff;border:1px solid var(--of-line);border-radius:var(--of-radius);padding:28px 22px 24px}
.of-step::before{counter-increment:step;content:counter(step);position:absolute;top:-14px;left:22px;width:30px;height:30px;border-radius:10px;background:linear-gradient(135deg,var(--of-primary),var(--of-primary-3));color:#fff;font-weight:800;font-size:15px;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 14px rgba(79,70,229,.35)}
.of-step h3{font-size:16px;margin-bottom:8px}
.of-step p{font-size:13px;color:var(--of-muted);line-height:1.7}

/* ---------- 价格 ---------- */
.of-price-wrap{display:flex;justify-content:center}
.of-price{width:100%;max-width:440px;background:linear-gradient(160deg,#15151d,#23232f);color:#fff;border-radius:24px;padding:40px;text-align:center;position:relative;overflow:hidden}
.of-price::after{content:'';position:absolute;top:-60px;right:-60px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(109,92,252,.5),transparent 70%)}
.of-price .tag{display:inline-block;background:rgba(109,92,252,.22);color:#b9b0ff;border:1px solid rgba(109,92,252,.5);font-size:12px;font-weight:700;padding:4px 12px;border-radius:999px;margin-bottom:18px}
.of-price .amount{font-size:60px;font-weight:900;letter-spacing:-.03em}
.of-price .amount small{font-size:20px;font-weight:600;margin-right:4px;color:#b9b0ff}
.of-price .once{color:#9ca3af;font-size:14px;margin:4px 0 24px}
.of-price ul{list-style:none;text-align:left;margin:0 0 26px;display:grid;gap:12px}
.of-price ul li{font-size:14px;color:#e5e7eb;display:flex;gap:10px;align-items:flex-start}
.of-price ul li i{color:#34d399;font-style:normal;font-weight:800}
.of-price .of-btn-primary{width:100%;text-align:center}

/* ---------- 推广横幅 ---------- */
.of-ref-banner{background:linear-gradient(120deg,#fff7ed,#ffedd5);border:1px solid #fed7aa;color:#9a3412;border-radius:14px;padding:14px 20px;margin-bottom:28px;font-size:14px}
.of-ref-banner b{color:#c2410c}

/* ---------- 页面头部（内页） ---------- */
.of-page-hero{background:linear-gradient(135deg,#f5f3ff,#eef2ff);padding:56px 0 44px;text-align:center}
.of-page-hero h1{font-size:30px;font-weight:900;letter-spacing:-.02em}
.of-page-hero p{color:var(--of-muted);margin-top:10px;font-size:15px}

/* ---------- 卡片/表单 ---------- */
.of-card{background:#fff;border:1px solid var(--of-line);border-radius:var(--of-radius);padding:28px;box-shadow:0 6px 24px rgba(20,16,70,.05)}
.of-grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.of-form label{display:block;font-size:14px;font-weight:600;margin-bottom:8px}
.of-form .inp{width:100%;padding:12px 14px;border:1px solid var(--of-line);border-radius:12px;font-size:15px;outline:none;transition:all .2s;background:#fff;color:var(--of-text)}
.of-form .inp:focus{border-color:var(--of-primary);box-shadow:0 0 0 3px rgba(109,92,252,.12)}
.of-form .hint{font-size:12.5px;color:var(--of-muted);margin-top:6px;display:block;line-height:1.6}
.of-form .field{margin-bottom:18px}
.of-alert{border-radius:12px;padding:13px 16px;font-size:14px;margin-bottom:18px;line-height:1.6}
.of-alert.ok{background:#ecfdf5;border:1px solid #a7f3d0;color:#047857}
.of-alert.err{background:#fef2f2;border:1px solid #fecaca;color:#b91c1c}
.of-alert.info{background:#eff6ff;border:1px solid #bfdbfe;color:#1d4ed8}

/* ---------- 账户中心 ---------- */
.of-balance{background:linear-gradient(135deg,#4f46e5,#7c3aed);color:#fff;border-radius:20px;padding:28px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}
.of-balance .v{font-size:40px;font-weight:900}
.of-balance .l{font-size:14px;opacity:.85}
.of-list{width:100%;border-collapse:collapse;font-size:14px}
.of-list th{text-align:left;padding:10px 12px;color:var(--of-muted);font-weight:600;border-bottom:1px solid var(--of-line);background:#fafaff}
.of-list td{padding:12px;border-bottom:1px solid var(--of-line)}
.of-badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600}
.of-badge.g{background:#ecfdf5;color:#059669}.of-badge.o{background:#fff7ed;color:#ea580c}.of-badge.b{background:#eff6ff;color:#2563eb}.of-badge.r{background:#fef2f2;color:#dc2626}
.of-key{font-family:Monaco,Consolas,monospace;background:#f4f4f8;padding:3px 8px;border-radius:6px;font-size:12.5px}
.of-copy-btn{cursor:pointer}

/* ---------- 部署成功 ---------- */
.of-success{background:#fff;border:1px solid var(--of-line);border-radius:20px;padding:34px;box-shadow:var(--of-shadow);margin-top:24px}
.of-success h2{font-size:22px;margin-bottom:14px}
.of-steps-ol{margin:14px 0 6px;padding-left:20px;display:grid;gap:10px;color:var(--of-muted);font-size:14.5px;line-height:1.8}
.of-steps-ol b{color:var(--of-text)}

/* ---------- 页脚 ---------- */
.of-footer{background:#0d0d12;color:#9ca3af;padding:48px 0 28px;margin-top:20px}
.of-footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:30px;margin-bottom:32px}
.of-footer-title{color:#fff;font-weight:700;margin-bottom:14px}
.of-footer a{display:block;color:#9ca3af;font-size:14px;margin-bottom:8px}
.of-footer a:hover{color:#fff}
.of-footer-desc{font-size:13.5px;line-height:1.8;max-width:340px}
.of-footer-copy{border-top:1px solid #23232f;padding-top:20px;text-align:center;font-size:13px;color:#6b7280}

/* ---------- 响应式 ---------- */
@media(max-width:900px){
    .of-hero-inner{grid-template-columns:1fr;gap:40px}
    .of-hero h1{font-size:34px}
    .of-features,.of-shots{grid-template-columns:1fr 1fr}
    .of-stats{grid-template-columns:repeat(2,1fr)}
    .of-steps{grid-template-columns:1fr 1fr}
    .of-grid2{grid-template-columns:1fr}
    .of-nav .of-btn span{display:none}
    .of-footer-grid{grid-template-columns:1fr}
}
@media(max-width:560px){
    .of-features,.of-shots,.of-steps{grid-template-columns:1fr}
    .of-hero{padding:52px 0 40px}
    .of-hero h1{font-size:28px}
    .of-nav>a:not(.of-btn){display:none}
}