:root{
  --bg:#ffffff; --bg-2:#fbfcff; --ink:#1d2a3a; --muted:#5f6f86;
  --gold-1:#ffd26a; --gold-2:#d4a11d; --border:rgba(8,21,40,.10);
  --shadow:0 12px 30px rgba(24,39,75,.10); --radius:18px;
  --ok:#18a957; --accent:#ffbf40;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"PingFang TC","Microsoft JhengHei",sans-serif;color:var(--ink);
  background:
    radial-gradient(1200px 680px at 85% -10%, rgba(255,216,124,.36), transparent 60%),
    radial-gradient(900px 500px at -10% 25%, rgba(255,243,211,.60), transparent 55%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}

/* 顶部阳光动效 */
.top-ribbon{position:fixed;inset:0 0 auto 0;height:220px;pointer-events:none;z-index:0;
  background:conic-gradient(from 210deg at 10% 50%, rgba(255,214,102,.45), rgba(255,240,182,.35), rgba(255,214,102,.45));
  filter:blur(36px) saturate(120%);opacity:.65;mask:linear-gradient(#000,transparent);animation:drift 16s ease-in-out infinite alternate}
@keyframes drift{from{transform:translateY(-8px)}to{transform:translateY(8px)}}
@keyframes ping{
  0%   { transform: translate(-50%, -50%) scale(0.6); opacity:.8; }
  70%  { opacity:.15; }
  100% { transform: translate(-50%, -50%) scale(1.8); opacity:0; }
}

/* 底部金色波浪 */
.bottom-waves{position:fixed;inset:auto 0 -1px 0;height:180px;z-index:0;overflow:hidden;pointer-events:none}
.wave{position:absolute;left:-5%;width:110%;height:120px;border-radius:50% 50% 0 0;opacity:.18;filter:blur(1.5px)}
.wave.w1{bottom:-18px;background:linear-gradient(90deg,var(--gold-1),var(--gold-2));animation:wave 14s linear infinite}
.wave.w2{bottom:-38px;background:linear-gradient(90deg,#fff0c9,var(--gold-1));animation:wave 18s linear infinite reverse;opacity:.14}
.wave.w3{bottom:-56px;background:linear-gradient(90deg,#ffe9a1,var(--gold-1));animation:wave 22s linear infinite;opacity:.10}
@keyframes wave{from{transform:translateX(0)}to{transform:translateX(-10%)}}

header{position:sticky;top:0;z-index:10;backdrop-filter:saturate(140%) blur(8px);
  background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.65));border-bottom:1px solid var(--border)}
.nav{max-width:1200px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;gap:16px}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:.2px}
.brand-badge{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--gold-1),var(--gold-2));box-shadow:0 8px 22px rgba(212,161,29,.35)}
.nav-spacer{margin-left:auto}
.cta{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:12px;font-weight:800;border:1px solid var(--border);
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.7));box-shadow:var(--shadow);white-space:nowrap}

/* 标题强化 */
h1,h2{font-family:Poppins,Inter,system-ui,sans-serif;font-weight:800;letter-spacing:.2px}
h1{text-shadow:0 6px 18px rgba(212,161,29,.20), 0 1px 0 #fff}
h2{ text-shadow:0 4px 14px rgba(212,161,29,.16) }

/* Hero */
.hero{position:relative;z-index:1;max-width:1200px;margin:36px auto 0;padding:36px 20px 10px;display:grid;grid-template-columns:1.2fr 1fr;gap:28px}
.hero-visual{position:relative;isolation:isolate}
.sun-blob{width:100%;aspect-ratio:16/10;border-radius:22px;background:
  radial-gradient(120% 120% at 10% 10%, rgba(255,223,137,.9), rgba(255,223,137,.6) 26%, transparent 56%),
  linear-gradient(135deg,#fff5d6,#ffe9a1);
  box-shadow:0 20px 50px rgba(212,161,29,.20), inset 0 0 0 1px rgba(8,21,40,.06);position:relative;overflow:hidden}
.float-badge{position:absolute;right:14px;top:14px;padding:8px 12px;border-radius:999px;font-weight:700;font-size:12px;background:#fff;border:1px solid var(--border);box-shadow:var(--shadow)}
.rays{position:absolute;inset:-40% -10% auto -10%;height:160%;background:conic-gradient(from 0deg, rgba(255,214,102,.45), transparent 30% 60%, rgba(255,214,102,.35));
  filter:blur(18px);mix-blend:multiply;animation:spin 28s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.hero-copy h1{font-size:clamp(28px,2.6vw,48px);line-height:1.12;margin:10px 0 14px}
.hero-copy p{color:var(--muted);font-size:clamp(14px,1.1vw,16px)}
.btn{padding:12px 18px;border-radius:12px;font-weight:800;letter-spacing:.2px;border:1px solid var(--border);
  background:linear-gradient(135deg, var(--gold-1) 0%, var(--gold-2) 70%);color:#3a2a00;box-shadow:0 12px 34px rgba(212,161,29,.28);white-space:nowrap}
.btn:hover{filter:brightness(1.05)}
.hero-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);display:grid;gap:14px}
.kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.kpi{background:linear-gradient(180deg,#fff,#fff7e1);border:1px solid rgba(212,161,29,.26);border-radius:14px;padding:14px;box-shadow:0 8px 20px rgba(212,161,29,.10)}
.kpi b{font-size:clamp(18px,2.1vw,28px)}.kpi small{display:block;color:var(--muted)}
/* Hero 图片（无文字，轻微浮动动效） */
.hero-img{position:absolute;inset:auto 0 0 0;width:100%;height:100%;object-fit:cover;opacity:.85;mix-blend:multiply;animation:hoverFloat 6s ease-in-out infinite alternate}
@keyframes hoverFloat{from{transform:translateY(4px) scale(1.02)}to{transform:translateY(-4px) scale(1.03)}}

/* Sections / Cards */
.section{position:relative;z-index:1;max-width:1200px;margin:30px auto;padding:10px 20px 40px}
.section h2{font-size:clamp(22px,2vw,32px);margin:10px 0 18px}
.features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.card-visual{aspect-ratio:16/9;background:linear-gradient(135deg,#fff3c2,#ffe9a1);display:flex;align-items:center;justify-content:center}
.card-visual img{width:100%;height:100%;object-fit:cover}
.card-body{padding:18px}
.card h3{margin:6px 0 8px;font-weight:800}.card p{color:var(--muted);margin:0}

/* FAQ */
.faq{position:relative;z-index:1;max-width:1200px;margin:10px auto 30px;padding:0 20px}
.faq h2{font-size:clamp(20px,1.8vw,28px);margin:6px 0 12px}
.faq-item{background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);margin:10px 0;overflow:hidden}
.faq-q{width:100%;text-align:left;background:linear-gradient(180deg,#fff,#fff9e9);padding:14px 16px;border:0;font-weight:800;display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer}
.faq-q .ico{flex:0 0 auto;width:18px;height:18px;display:inline-block;position:relative}
.faq-q .ico::before,.faq-q .ico::after{content:"";position:absolute;background:#a37300;border-radius:2px}
.faq-q .ico::before{width:18px;height:2px;top:8px;left:0}
.faq-q .ico::after{width:2px;height:18px;top:-1px;left:8px;transition:.2s}
.faq-q[aria-expanded="true"] .ico::after{transform:scaleY(0)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .28s ease;background:#fff}
.faq-a-inner{padding:0 16px 14px;color:var(--muted)}

/* Testimonials */
.t-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.t-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;display:grid;gap:12px}
.t-head{display:flex;gap:12px;align-items:center}
.t-ava{width:44px;height:44px;border-radius:50%;object-fit:cover}
.t-name{font-weight:800}
.t-role{font-size:12px;color:var(--muted)}
.t-body{color:var(--ink)}
@media (max-width:1080px){.t-grid{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.t-grid{grid-template-columns:1fr}}

/* 悬浮申请按钮（滚动后显示） */
.apply-float{position:fixed;right:18px;bottom:80px;z-index:11;
  opacity:0;transform:translateY(10px);pointer-events:none;transition:.28s ease}
.apply-float.show{opacity:1;transform:translateY(0);pointer-events:auto}
.apply-btn{display:flex;align-items:center;gap:10px;padding:14px 18px;border-radius:16px 16px 16px 6px;font-weight:800;letter-spacing:.3px;box-shadow:0 12px 34px rgba(212,161,29,.35);
  background:linear-gradient(135deg,var(--gold-1) 0%, var(--gold-2) 70%);border:none;cursor:pointer;color:#3a2a00;white-space:nowrap}
/* 让 ping 与图标叠在一起 */
.ico-wrap{position: relative;width: 22px;height: 22px;display: inline-flex;align-items: center;justify-content: center;margin-right: 8px;}
.ico-wrap svg{position: relative;z-index: 2;display: block;}
.apply-btn .ping{position: absolute;width: 10px;height: 10px;left: 50%;top: 50%;transform: translate(-50%, -50%);}
.ico-wrap .ping::before{content:"";position:absolute;inset:-10px;border-radius:50%;border:2px solid rgba(212,161,29,.55);animation: ping 1.6s ease-out infinite;}
.cta .ico-wrap{ margin-right: 10px; }

/* 模态（申请 + 成功） —— 原样式 */
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.35);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;z-index:20}
.modal{width:min(560px,92vw);background:linear-gradient(180deg,#ffffff,#fffdf5);border:1px solid var(--border);border-radius:18px;box-shadow:0 30px 70px rgba(212,161,29,.25);overflow:hidden;transform:translateY(8px) scale(.98);opacity:0;transition:.25s ease}
.modal.open{transform:translateY(0) scale(1);opacity:1}
.modal-head{display:flex;align-items:center;justify-content:center;padding:16px 18px;border-bottom:1px solid var(--border);background:linear-gradient(180deg,#fff,#fff8e6)}
.modal-title{font-weight:800}
.modal-body{padding:18px;display:grid;gap:14px}
.modal .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field{display:grid;gap:6px}
label{font-size:13px;color:var(--muted);font-weight:700}
input[type="text"],input[type="tel"],input[type="number"],select{padding:12px 12px;border-radius:12px;border:1px solid var(--border);outline:none;color:var(--ink);background:#fff}
.id-options{display:grid;gap:8px;padding:10px;border:1px dashed var(--border);border-radius:12px;background:#fffef4}
.id-options label{display:flex;gap:10px;align-items:flex-start;cursor:pointer;color:#394b63}
.modal-foot{display:flex;justify-content: flex-start;gap:10px;padding:16px 18px;border-top:1px solid var(--border);background:linear-gradient(180deg,#fff,#fff8e6)}
.btn.ghost{background:#fff;border:1px solid var(--border);color:#1d2a3a}

/* 成功弹窗 —— 原样式 */
.success-hero{
  position:relative;height:150px;background:
    radial-gradient(600px 200px at 20% 10%, rgba(255,231,170,.9), transparent 60%),
    linear-gradient(135deg,#fff4cc,#ffe29a,#ffd26a 70%);
  border-bottom:1px solid var(--border);overflow:hidden;
}
.success-hero::after{
  content:"";position:absolute;inset:-40% -20% auto -20%;height:220%;
  background:conic-gradient(from 0deg, rgba(255,214,102,.55), transparent 30% 60%, rgba(255,214,102,.45));
  filter:blur(22px);animation:spin 26s linear infinite
}
.ok-mark{position:absolute;left:50%;top:55%;transform:translate(-50%,-50%);width:110px;height:110px}
.ok-mark svg{width:100%;height:100%}
.ok-mark .circle{stroke:var(--ok);stroke-width:6;fill:none;stroke-linecap:round;stroke-dasharray:283;stroke-dashoffset:283;animation:draw 1s ease forwards .1s;filter:drop-shadow(0 6px 16px rgba(24,169,87,.35))}
.ok-mark .tick{stroke:var(--ok);stroke-width:6;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:60;stroke-dashoffset:60;animation:draw .8s ease forwards .4s}
@keyframes draw{to{stroke-dashoffset:0}}

.confetti{position:absolute;inset:0;pointer-events:none}
.confetti i{position:absolute;width:8px;height:14px;border-radius:2px;background:linear-gradient(180deg,#fff,#ffd26a);animation:drop 1.8s linear infinite;opacity:.9}
.confetti i:nth-child(odd){background:linear-gradient(180deg,#fff,#ffcd7a)}
@keyframes drop{from{transform:translateY(-20px) rotate(0)}to{transform:translateY(180px) rotate(180deg)}}

.success-headline{font-family:Poppins,Inter,sans-serif;font-weight:800;text-align:center;margin:12px 0 4px;font-size:22px;text-shadow:0 4px 12px rgba(0,0,0,.06)}
.success-sub{color:var(--muted);text-align:center;margin:0 18px}
.success-list{padding:16px 24px 0;color:var(--ink)}
.success-list b{font-weight:800}

.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:rgba(0,0,0,.75);color:#fff;padding:12px 16px;border-radius:999px;display:none;z-index:30}

/* 页脚 —— 两列布局（无空白列） */
footer{position:relative;z-index:1;border-top:1px solid var(--border);background:linear-gradient(180deg,rgba(255,255,255,.8),rgba(255,255,255,.6));margin-top:40px}
.footer-wrap{max-width:1200px;margin:0 auto;padding:28px 20px;display:grid;grid-template-columns:1fr 2fr;gap:18px;align-items:center}
.footer small{color:var(--muted)}
.footer .cta{white-space:nowrap;display:inline-flex;align-items:center}

/* 响应式 */
@media (max-width:1080px){
  .hero{grid-template-columns:1fr}
  .hero-card{order:-1}
  .features{grid-template-columns:1fr 1fr}
  .modal .row{grid-template-columns:1fr}
  .footer-wrap{grid-template-columns:1fr}
}
@media (max-width:620px){
  .features{grid-template-columns:1fr}
  .apply-btn{border-radius:16px;padding:14px}
  .footer .cta{padding:10px 14px;font-size:14px}
}
@media (max-width:420px){
  .footer .cta{padding:8px 12px;font-size:13px}
}

/* 如果你的页里已经有 @keyframes ping，可跳过这段；否则保留即可 */
@keyframes ping {
  0%   { transform: translate(-50%, -50%) scale(0.6); opacity:.8; }
  70%  { opacity:.15; }
  100% { transform: translate(-50%, -50%) scale(1.8); opacity:0; }
}

/* 包一层容器：让 ping 可以相对容器做绝对定位 */
.ico-wrap{position: relative;width: 22px; height: 22px;display: inline-flex;align-items: center; justify-content: center;margin-right: 8px;}
/* 图标永远在上层，脉冲在下面铺开 */
.ico-wrap svg{position: relative;z-index: 2;display: block;}
/* 只影响图标容器里的 ping，不改动其它地方的 .ping */
.apply-btn .ico-wrap .ping,.cta .ico-wrap .ping{position: absolute;left: 50%; top: 50%;width: 26px; height: 26px;transform: translate(-50%, -50%);border-radius: 50%;pointer-events: none;z-index: 1;}
/* 用 ::before 画扩散环，动画即“脉冲” */
.apply-btn .ico-wrap .ping::before,.cta .ico-wrap .ping::before{content: "";position: absolute;left: 50%; top: 50%;width: 100%; height: 100%;transform: translate(-50%, -50%) scale(0.6);border-radius: 50%;border: 2px solid rgba(212,161,29,.55);animation: ping 1.6s ease-out infinite;}
/* 如你的旧样式曾给 .apply-btn .ping 设过尺寸/定位，这里强制覆盖 */
.apply-btn > .ping,.cta > .ping{position: static !important;width: auto !important;height: auto !important;transform: none !important;}

/* ==== Pre-question cards (Yes/No) ==== */
.qcard{
  background:#fff; border:1px solid var(--border); border-radius:14px;
  box-shadow: var(--shadow); padding:14px; display:grid; gap:10px;
}
.qcard > legend{
  font-weight:800; color:#26354a; padding:0 2px; margin-bottom:2px;
}
.yn-group{ display:flex; gap:10px; flex-wrap:wrap; }
.yn{ position:relative; display:inline-flex; }
.yn input{ position:absolute; inset:0; opacity:0; pointer-events:none; }
.yn span{
  display:inline-flex; align-items:center; justify-content:center;
  padding:9px 16px; border-radius:999px; border:1px solid var(--border);
  background:linear-gradient(180deg,#fff,#f7fbff);
  color:#2b3b52; font-weight:800; letter-spacing:.2px;
  box-shadow:0 6px 16px rgba(8,21,40,.06);
  transition:.18s ease;
}
.yn input:checked + span{
  background:linear-gradient(135deg, var(--gold-1), var(--gold-2) 70%);
  color:#3a2a00; border-color: rgba(212,161,29,.55);
  box-shadow:0 10px 26px rgba(212,161,29,.28);
}
.yn input:focus-visible + span{
  outline:3px solid rgba(56,133,255,.25);
  outline-offset:2px;
}

/* === 成功弹窗自定义展示（号码池卡片） === */
#successBox{display:none;padding:16px 18px}
.success-card{background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);padding:16px;display:grid;gap:12px;text-align:center}
.success-card .num{font-size:20px;letter-spacing:.5px}
.success-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.success-actions .copy{border:1px dashed var(--border);background:#fff;border-radius:12px;padding:10px 14px;cursor:pointer}
.success-actions .copy.ok{border-color:#9ad5b0;background:#f2fff7}

/* === 防溢出覆盖修复：不破坏原样式，只在末尾覆盖关键属性 === */
.modal-backdrop{ padding:16px; overflow:auto; align-items:flex-start; }
.modal{ display:flex; flex-direction:column; max-height:calc(100vh - 24px); }
@supports (height:100dvh){ .modal{ max-height:calc(100dvh - 24px); } }
.modal-body{ flex:1 1 auto; overflow:auto; min-height:0; }
.body-locked{ overflow:hidden !important; height:100vh; }
@media (max-width:420px){ .success-hero{ height:110px; } }


.num-wrap {
  margin-top: 6px;          /* 和上面文字拉开间距 */
}

.num-wrap .num {
  display: block;           /* 强制换行 */
  font-size: 22px;          /* 字号更大 */
  font-weight: 800;
  color: #2b3b52;           /* 深色 */
  letter-spacing: 1px;
}
/* ===== 成功卡片文案与层级优化 ===== */
.hl-badge{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(212,161,29,.35);
  background:linear-gradient(180deg,#fff,#fff7e1);
  color:#7a5400;
  font-weight:800;
  font-size:12px;
  letter-spacing:.2px;
  box-shadow:0 6px 14px rgba(212,161,29,.14);
  margin:0 auto 6px;
}
.success-title{
  margin:6px 0 6px;
  font-size:18px;
  line-height:1.35;
  font-weight:800;
  color:#253347;
}
.success-subtle{
  margin:0 auto 2px;
  color:var(--muted);
}
.success-subtle .hl{
  font-weight:800;
  color:#2b3b52;
}

.benefits{
  list-style:none;
  margin:10px 0 0;
  padding:0;
  display:grid;
  gap:6px;
}
.benefits li{
  display:flex; align-items:center; gap:8px;
  color:#2b3b52;
}
.benefits li::before{
  content:"";
  width:8px; height:8px; border-radius:50%;
  background:linear-gradient(135deg,var(--gold-1),var(--gold-2));
  box-shadow:0 2px 8px rgba(212,161,29,.35);
  flex:0 0 auto;
}

.contact-block{
  margin-top:10px;
  border:1px dashed var(--border);
  background:#fffef7;
  border-radius:12px;
  padding:12px;
  text-align:left;
}
.contact-block .label{
  font-size:12px;
  color:#7a889e;
  font-weight:700;
  letter-spacing:.2px;
}
.contact-block .value{
  font-size:15px;
  font-weight:800;
  color:#2b3b52;
  margin-top:2px;
}

/* 号码独立一行且更显眼 */
.num-wrap{ margin-top:6px; }
.num-wrap .num{
  display:block;
  font-size:22px;
  font-weight:800;
  color:#182538;
  letter-spacing:1px;
}

/* 操作区与提示 */
.success-actions{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:12px; }
.success-card .tips{
  font-size:12px; color:#8997ac; margin:4px 0 0;
}
/* === 修复：成功头图里的 OK 圈在不同屏幕下遮挡/变形 === */
/* 1) 让头图高度自适应（而不是固定 150px），小屏不挤，大屏也不空 */
.success-hero{
  position: relative;
  height: clamp(120px, 32vw, 200px);   /* 随视口缩放 */
  overflow: hidden;                    /* 保持干净的切边 */
}
/* 默认：保持原尺寸 & 居中，但强制正方形，避免被拉伸成椭圆 */
.ok-mark{
  top: 50%;                             /* 居中更稳 */
  transform: translate(-50%, -50%);     /* 防位移偏差 */
  height: auto;                         /* 由宽度驱动高度 */
  aspect-ratio: 1 / 1;                  /* 强制 1:1，杜绝“变扁” */
}
.ok-mark svg{
  width: 100%;
  height: 100%;
  display: block;                       /* 去掉 inline 造成的奇怪挤压 */
}
/* 让描边在缩放时不变粗细（SVG 圈与对勾更顺眼） */
.ok-mark .circle,
.ok-mark .tick{
  vector-effect: non-scaling-stroke;
}

/* 480px 以下的小屏：用视口宽度自适应尺寸，并稍微上移避免贴底 */
@media (max-width: 480px){
  .success-hero{
    height: clamp(120px, 36vw, 160px);  /* 头图高度也跟着自适应，避免压缩 */
    padding-block: 8px;
    overflow: hidden;
  }
  .ok-mark{
    width: clamp(72px, 26vw, 110px);    /* 圈的尺寸随屏幕缩放 */
    /* aspect-ratio 仍然保证正圆，不会“变扁” */
    top: 50%;
    transform: translate(-50%, -52%);   /* 轻微上移，让视觉更居中 */
  }
}

/* 极小屏（≤360px）：再收一档，防止遮挡下面的标题/文案 */
@media (max-width: 360px){
  .success-hero{
    height: clamp(120px, 38vw, 160px);
    padding-block: 10px;
  }
  .ok-mark{
    width: clamp(64px, 28vw, 96px);
    transform: translate(-50%, -53%);
  }
}

/* 修复 iPhone 点击输入框页面自动放大 */
input,
select,
textarea {
  font-size: 16px;
}
button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}