: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 sunshine ribbon */
    .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: scale(0.6); opacity:.85; }
      70%  { opacity:.15; }
      100% { transform: scale(1.8); opacity:0; }
    }

    /* Bottom golden waves */
    .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-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}}

    /* Floating Apply button (right) */
    .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;
    }

    /* 图标容器：作为脉冲定位参照，避免行高干扰 */
    .ico-wrap{
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 22px;
      height: 22px;
      flex: 0 0 22px;
      line-height: 0;
      margin-right: 8px;
    }
    .ico-wrap svg{ position: relative; z-index: 2; display:block; }

    /* 脉冲：直接用 .ping 自己画圆，并在 ico-wrap 里绝对居中 */
    .apply-btn .ping{
      position:absolute;
      inset:0;                /* 填满父容器 */
      margin:auto;            /* 在父容器中水平/垂直居中 */
      width:24px; height:24px;
      border-radius:50%;
      border:2px solid rgba(212,161,29,.55);
      animation: ping 1.6s ease-out infinite;
      z-index:1;              /* 在 SVG 下方，避免挡住图标 */
      pointer-events:none;
    }
    /* 关闭旧的 ::before 实现，防止叠加导致偏移 */
    .ico-wrap .ping::before{ content:none !important; }

    @supports (padding: max(0px)) {
      /* 右侧安全区，避免刘海/圆角挤压 */
      .apply-float { right: max(18px, env(safe-area-inset-right)); }
    }

    /* Modals */
    .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);position: sticky; bottom: 0; z-index: 1; padding-bottom: max(12px, env(safe-area-inset-bottom));}

    /* Success modal */
    .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 */
    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}

    /* Responsive */
    @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}
    }

    /* ---- Mobile anti-zoom & better mobile form UX ---- */
    html { -webkit-text-size-adjust: 100%; }
    input, select, textarea, button { font-size:16px; } /* critical: avoid iOS auto-zoom */
    .modal { max-height: 92svh; }
    .modal-body { overflow:auto; max-height: min(62svh, 600px); }
    
    
    
    /* ==== 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;
}