:root{
    --blue:#29a7e0;
    --blue-d:#1f8dc0;
    --ink:#333;
    --ink-2:#666;
    --line:#dcdcdc;
    --bg:#eef4f9;
  }
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  html,body{margin:0;padding:0}
  body{
    font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
    color:var(--ink);background:#fff;
    -webkit-font-smoothing:antialiased;
    font-size:15px;line-height:1.5;
  }
  img,svg{display:block}

  /* ---------- 加载层 ---------- */
  .boot{
    position:fixed;inset:0;z-index:9999;background:#fff;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;
    transition:opacity .32s ease,visibility .32s;
  }
  .boot.hide{opacity:0;visibility:hidden}
  .boot-logo{width:clamp(132px,42vw,210px);height:clamp(132px,42vw,210px);
    animation:bootIn .5s ease both}
  @keyframes bootIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
  .boot-track{width:clamp(104px,30vw,150px);height:3px;border-radius:3px;background:#e3eef6;overflow:hidden}
  .boot-track span{
    display:block;width:40%;height:100%;border-radius:3px;
    background:linear-gradient(90deg,#5cb4e8,#29a7e0);
    animation:bootRun 1.05s ease-in-out infinite;
  }
  @keyframes bootRun{0%{transform:translateX(-110%)}100%{transform:translateX(320%)}}

  /* ---------- 容器：移动端满宽 / 桌面居中卡片 ---------- */
  .page{max-width:720px;margin:0 auto;background:#fff}

  /* ---------- 顶部横幅 ---------- */
  .banner{
    position:relative;overflow:hidden;
    display:flex;align-items:center;gap:clamp(10px,3vw,18px);
    padding:clamp(30px,7.6vw,40px) clamp(14px,4vw,28px) clamp(18px,4.6vw,26px);
    background:linear-gradient(155deg,#86d0f2 0%,#5cb4e8 48%,#469fd8 100%);
  }
  /* 顶部悬挂圆点串 */
  .banner::before{
    content:"";position:absolute;left:0;right:0;top:0;height:34px;
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='34'%3E%3Cline x1='14' y1='0' x2='14' y2='13' stroke='%232a6ea8' stroke-width='1.2' opacity='.45'/%3E%3Ccircle cx='14' cy='19' r='7' fill='%232a6ea8' opacity='.5'/%3E%3C/svg%3E");
    background-repeat:repeat-x;background-size:28px 34px;
    background-position:center top;pointer-events:none;
  }
  /* 背景装饰气泡 */
  .bubble{position:absolute;border-radius:50%;background:rgba(255,255,255,.13);pointer-events:none}
  .bubble.b1{width:120px;height:120px;left:-38px;bottom:-46px}
  .bubble.b2{width:74px;height:74px;right:-18px;bottom:-30px;background:rgba(255,255,255,.10)}
  .bubble.b3{width:150px;height:150px;right:14%;top:-86px;background:rgba(255,255,255,.08)}

  .brand{position:relative;display:flex;align-items:center;gap:clamp(10px,2.6vw,16px);width:100%}
  .logo{width:clamp(66px,18vw,94px);height:clamp(66px,18vw,94px);flex:0 0 auto;
        filter:drop-shadow(0 2px 5px rgba(10,60,95,.28))}
  .brand-txt{min-width:0;flex:1 1 auto}
  .brand-txt h1{
    margin:0;color:#fff;font-weight:800;
    font-size:clamp(21px,6.2vw,34px);letter-spacing:.06em;line-height:1.15;
    text-shadow:2px 2px 0 rgba(18,78,120,.32),0 2px 8px rgba(10,60,95,.22);
    white-space:nowrap;
  }
  .brand-txt p{
    margin:clamp(6px,1.6vw,10px) 0 0;
    color:rgba(255,255,255,.95);font-size:clamp(10px,2.9vw,13px);letter-spacing:.05em;
    padding-top:clamp(6px,1.4vw,8px);
    border-top:1px solid rgba(255,255,255,.35);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }

  /* ---------- 顶部导航（三个页面共用） ---------- */
  .tabs{display:flex;background:#fff;border-bottom:1px solid #e6e6e6}
  .tab{
    flex:1 1 0;text-align:center;padding:11px 0;font-size:clamp(14px,3.7vw,16px);
    color:#2f96cd;position:relative;font-weight:500;text-decoration:none;
    -webkit-tap-highlight-color:transparent;transition:color .15s;
  }
  a.tab:hover{color:#1f8bc7}
  .tab.active{color:#222;font-weight:700}
  .tab.active::after{
    content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;
    background:var(--blue);border-radius:2px 2px 0 0;
  }

  /* 页内分段切换（需求列表 / 需求填报） */
  .seg{
    display:flex;gap:4px;background:#eef6fc;border-radius:999px;
    padding:4px;margin:clamp(12px,3.2vw,16px) clamp(14px,4vw,22px) 0;
  }
  .seg button{
    flex:1 1 0;border:0;background:none;font-family:inherit;cursor:pointer;
    font-size:clamp(13.5px,3.5vw,15px);color:#4a6b82;padding:8px 0;border-radius:999px;
    transition:background .15s,color .15s;
  }
  .seg button.active{background:#fff;color:#1f8bc7;font-weight:700;box-shadow:0 1px 4px rgba(21,72,110,.12)}

  /* ---------- 表单 ---------- */
  .form{padding:clamp(16px,4.4vw,26px) clamp(16px,4.6vw,26px) clamp(10px,3vw,16px)}
  .field{margin-bottom:clamp(15px,3.6vw,22px)}
  .field > label,.lab{
    display:block;font-size:clamp(15px,3.9vw,17px);color:#2b2b2b;font-weight:600;
    margin-bottom:clamp(8px,2vw,10px);
  }
  .req{color:#e60012;font-weight:700;margin-left:1px;font-size:.85em;vertical-align:super}
  .opt{color:#999;font-weight:400;font-size:.8em;margin-left:4px}

  input[type=text],input[type=tel],input[type=email],textarea{
    display:block;width:100%;border:1px solid var(--line);border-radius:3px;
    background:#fff;color:#333;font-family:inherit;font-size:16px;
    padding:9px 10px;outline:none;transition:border-color .16s,box-shadow .16s;
  }
  textarea{min-height:clamp(160px,26vw,200px);resize:vertical;line-height:1.6}
  input::placeholder,textarea::placeholder{color:#b9b9b9}
  input:focus,textarea:focus{border-color:#7cc4ea;box-shadow:0 0 0 3px rgba(41,167,224,.12)}
  .field.err input,.field.err textarea{border-color:#e6707a;box-shadow:0 0 0 3px rgba(230,112,122,.1)}
  .tip{display:none;color:#e0505e;font-size:13px;margin-top:6px}
  .field.err .tip{display:block}

  /* 单选：建议 / 投诉 */
  .radios{display:flex;gap:clamp(18px,5vw,28px);align-items:center;padding-top:2px}
  .radio{display:inline-flex;align-items:center;gap:7px;cursor:pointer;font-size:16px;color:#333;user-select:none}
  .radio input{position:absolute;opacity:0;width:0;height:0}
  .radio i{
    width:20px;height:20px;flex:0 0 20px;border-radius:50%;
    border:1.5px solid #b5b5b5;background:#fff;position:relative;transition:.15s;
  }
  .radio input:checked + i{background:#22b14c;border-color:#22b14c}
  .radio input:checked + i::after{
    content:"";position:absolute;left:5px;top:3px;width:6px;height:10px;
    border:2px solid #fff;border-top:0;border-left:0;transform:rotate(42deg);
  }
  .radio input:focus-visible + i{box-shadow:0 0 0 3px rgba(34,177,76,.2)}

  /* ---------- 提示 + 提交 ---------- */
  .notice{text-align:center;color:#666;font-size:clamp(13px,3.4vw,14px);line-height:1.9;padding:2px 0 clamp(12px,3vw,16px)}
  .notice .req{vertical-align:baseline;font-size:1em;font-weight:700}
  .notice .sub{color:#7d7d7d}

  .submit{
    display:block;width:100%;border:0;border-radius:0;cursor:pointer;
    background:var(--blue);color:#fff;font-family:inherit;font-weight:500;
    font-size:clamp(17px,4.4vw,19px);letter-spacing:.24em;text-indent:.24em;
    padding:clamp(12px,3.2vw,15px) 0;transition:background .15s;
  }
  .submit:hover{background:#2199cf}
  .submit:active{background:var(--blue-d)}
  .submit[disabled]{opacity:.6;cursor:not-allowed}
  .btn-wrap{margin:0 calc(clamp(16px,4.6vw,26px) * -1)}

  /* ---------- 成功态 ---------- */
  .done{display:none;padding:clamp(38px,10vw,64px) 20px clamp(30px,8vw,48px);text-align:center}
  .done.show{display:block;animation:fade .26s ease}
  @keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
  .done .circle{
    width:64px;height:64px;border-radius:50%;background:#22b14c;margin:0 auto 18px;
    position:relative;box-shadow:0 6px 18px rgba(34,177,76,.28)
  }
  .done .circle::after{
    content:"";position:absolute;left:23px;top:17px;width:14px;height:24px;
    border:3.5px solid #fff;border-top:0;border-left:0;transform:rotate(42deg);border-radius:2px;
  }
  .done h2{margin:0 0 8px;font-size:19px;color:#222;font-weight:700}
  .done p{margin:0 0 22px;color:#888;font-size:14px}
  .again{
    background:#fff;border:1px solid #cfd8e0;color:#2f96cd;border-radius:22px;
    padding:9px 22px;font-size:15px;font-family:inherit;cursor:pointer
  }
  .again:hover{border-color:#9fcbe6;background:#f6fbfe}

  .toast{
    position:fixed;left:50%;bottom:22px;transform:translate(-50%,14px);
    background:rgba(40,44,48,.92);color:#fff;font-size:14px;padding:10px 18px;border-radius:6px;
    opacity:0;pointer-events:none;transition:.24s;z-index:99;max-width:82vw;text-align:center
  }
  .toast.show{opacity:1;transform:translate(-50%,0)}

  /* ================= 底部宣传版块 ================= */
  .foot{
    --u:1vw;                 /* 移动端：页脚宽度 = 视口宽度，calc(1 * var(--u)) = 1% */
    position:relative;overflow:hidden;
    aspect-ratio:1500/880;
    background:linear-gradient(158deg,#79aaff 0%,#5f95ff 42%,#4c83f4 100%);
    font-family:inherit;
    isolation:isolate;
  }
  .foot .deco{position:absolute;pointer-events:none}

  /* 右侧斜切亮带 */
  .foot .band{
    right:calc(-14 * var(--u));top:-22%;width:calc(52 * var(--u));height:150%;
    background:rgba(255,255,255,.13);
    transform:rotate(23deg);
  }
  .foot .band::after{
    content:"";position:absolute;left:0;top:0;bottom:0;width:calc(.35 * var(--u));
    background:rgba(255,255,255,.5);
  }
  /* 左上同心圆环 */
  .foot .ring1,.foot .ring2{border-radius:50%;border:calc(1.6 * var(--u)) solid rgba(255,255,255,.3)}
  .foot .ring1{width:calc(36 * var(--u));height:calc(36 * var(--u));left:calc(-12 * var(--u));top:-8%}
  .foot .ring2{width:calc(24 * var(--u));height:calc(24 * var(--u));left:calc(-6 * var(--u));top:-1%;border-width:calc(1.1 * var(--u));border-color:rgba(255,255,255,.22)}
  /* 二维码后的大圆环 */
  .foot .qring{
    width:calc(48 * var(--u));height:calc(48 * var(--u));border-radius:50%;
    right:calc(-6 * var(--u));top:18%;
    border:calc(.55 * var(--u)) solid rgba(255,255,255,.35);
  }
  /* 二维码后的柔光 */
  .foot .glow{
    width:calc(56 * var(--u));height:calc(56 * var(--u));right:calc(2 * var(--u));top:10%;border-radius:50%;
    background:radial-gradient(circle,rgba(255,255,255,.26) 0%,rgba(255,255,255,.16) 52%,rgba(255,255,255,0) 72%);
  }
  /* 云 */
  .foot .cloud{
    left:-1 * var(--u);top:36%;width:calc(7.4 * var(--u));height:calc(2.6 * var(--u));
    border-radius:calc(3 * var(--u));
    background:rgba(255,255,255,.42);
    box-shadow:calc(4.6 * var(--u)) calc(-1.4 * var(--u)) 0 calc(-0.2 * var(--u)) rgba(255,255,255,.42),
               calc(2.4 * var(--u)) calc(-2.6 * var(--u)) 0 calc(-.35 * var(--u)) rgba(255,255,255,.42);
  }
  /* 闪电 */
  .foot .bolt{left:calc(4.6 * var(--u));top:47%;width:calc(4 * var(--u));height:calc(7 * var(--u));filter:drop-shadow(calc(.3 * var(--u)) calc(.3 * var(--u)) 0 rgba(38,52,74,.55))}
  /* 波浪 */
  .foot .wave{left:calc(58 * var(--u));top:52%;width:calc(9 * var(--u));height:calc(3.6 * var(--u))}
  /* 城市剪影 */
  .foot .city{left:0;bottom:0;width:calc(30 * var(--u));height:calc(14 * var(--u));opacity:.9}
  /* 小黄点 */
  .foot .dot{
    left:calc(58.6 * var(--u));top:81.5%;width:calc(3.1 * var(--u));height:calc(3.1 * var(--u));border-radius:50%;
    background:#ffd95e;box-shadow:0 0 0 calc(.32 * var(--u)) rgba(38,52,74,.85);
  }
  /* 右下胶囊 */
  .foot .pill{height:calc(1.5 * var(--u));border-radius:calc(1 * var(--u));background:rgba(255,255,255,.45)}
  .foot .pill.p1{right:calc(-1.2 * var(--u));bottom:9.6%;width:calc(6.6 * var(--u));height:calc(1.2 * var(--u))}
  .foot .pill.p2{right:calc(6.6 * var(--u));bottom:9.3%;width:calc(1.7 * var(--u));height:calc(1.7 * var(--u));border-radius:50%}
  /* 顶部等距面板 */
  .foot .iso{left:calc(44 * var(--u));top:2%;width:calc(20 * var(--u));height:calc(13 * var(--u));opacity:.9}

  /* 标语牌 */
  .foot .tag{
    position:absolute;display:inline-block;
    font-size:calc(4.15 * var(--u));line-height:1;font-weight:800;letter-spacing:.04em;
    color:#22304a;white-space:nowrap;
    padding:calc(1.15 * var(--u)) calc(1.9 * var(--u));
    border:calc(.42 * var(--u)) solid #22304a;
    transform:skewX(-2deg);
  }
  .foot .tag.a{left:calc(13 * var(--u));top:22.3%;background:#fff;box-shadow:calc(-.9 * var(--u)) calc(.9 * var(--u)) 0 #22304a}
  .foot .tag.b{left:calc(22.2 * var(--u));top:43.9%;background:#fff;box-shadow:calc(-.9 * var(--u)) calc(.9 * var(--u)) 0 #22304a}
  .foot .tag.c{left:calc(10.8 * var(--u));top:63.3%;background:#ffd95e;box-shadow:calc(-.9 * var(--u)) calc(.9 * var(--u)) 0 #22304a}
  .foot .tag.d{left:calc(34.4 * var(--u));top:81.8%;background:#ffd95e;box-shadow:calc(-.9 * var(--u)) calc(.9 * var(--u)) 0 #22304a}
  /* 小尾巴 */
  .foot .tag.a::after,
  .foot .tag.b::before{
    content:"";position:absolute;width:0;height:0;
    border-style:solid;
  }
  .foot .tag.a::after{
    right:calc(1.5 * var(--u));bottom:calc(-1.35 * var(--u));
    border-width:calc(1.5 * var(--u)) calc(1.1 * var(--u)) 0 0;
    border-color:#fff transparent transparent transparent;
    filter:drop-shadow(0 calc(.4 * var(--u)) 0 #22304a);
  }
  .foot .tag.b::before{
    left:55%;top:calc(-1.35 * var(--u));
    border-width:0 calc(1.1 * var(--u)) calc(1.5 * var(--u)) calc(1.1 * var(--u));
    border-color:transparent transparent #fff transparent;
    filter:drop-shadow(0 calc(-.4 * var(--u)) 0 #22304a);
  }

  /* 二维码组合 */
  .foot .qrwrap{position:absolute;right:calc(8.4 * var(--u));top:24.5%;width:calc(17.6 * var(--u))}
  .foot .qr-panel{
    position:relative;background:#fff;padding:calc(1.1 * var(--u));
    border:calc(.42 * var(--u)) solid #22304a;
    box-shadow:calc(-.9 * var(--u)) calc(.9 * var(--u)) 0 #22304a;
  }
  .foot .qr-panel img{width:100%;height:auto;display:block}
  /* 中心徽标 */
  .foot .qr-mark{
    position:absolute;left:50%;top:50%;width:34%;height:34%;
    transform:translate(-50%,-50%);
    background:#fff;border-radius:50%;
    padding:2%;
    box-shadow:0 0 0 calc(.18 * var(--u)) rgba(255,255,255,.9);
  }
  .foot .qr-mark svg{width:100%;height:100%}
  /* 吊线 */
  .foot .qr-leg{position:absolute;top:100%;width:calc(.62 * var(--u));height:calc(5.2 * var(--u));background:#22304a}
  .foot .qr-leg.l{left:24%}
  .foot .qr-leg.r{right:24%}
  /* 扫码关注 */
  .foot .qr-label{
    position:absolute;left:50%;top:calc(100% + calc(4.6 * var(--u)));transform:translateX(-50%) skewX(-2deg);
    display:inline-block;background:#fff;white-space:nowrap;
    font-size:calc(3.5 * var(--u));line-height:1;font-weight:800;color:#22304a;
    padding:calc(1 * var(--u)) calc(1.3 * var(--u));border:calc(.36 * var(--u)) solid #22304a;
    box-shadow:calc(-.7 * var(--u)) calc(.7 * var(--u)) 0 #22304a;
  }

  /* 公众号名字 */
  .foot .mp{
    position:absolute;right:calc(4.6 * var(--u));bottom:3.4%;
    display:flex;align-items:center;gap:calc(1.1 * var(--u));
    margin:0;color:#3a5a8c;font-size:calc(2.75 * var(--u));letter-spacing:.02em;
  }
  .foot .mp svg{width:calc(2.9 * var(--u));height:calc(2.9 * var(--u));flex:0 0 auto;opacity:.75}

  /* 桌面端 */
  @media (min-width:768px){
    body{
      background:var(--bg);
      background-image:radial-gradient(circle at 12% 0%,#dfeefa 0,transparent 45%),radial-gradient(circle at 88% 100%,#e4f1fb 0,transparent 45%);
      min-height:100vh;padding:40px 20px;
    }
    .page{
      border-radius:14px;overflow:hidden;
      box-shadow:0 18px 46px rgba(21,72,110,.14),0 2px 6px rgba(21,72,110,.06);
    }
    .banner{padding:30px 32px 24px}
    .tabs{border-bottom:1px solid #ececec}
    .tab{flex:1 1 0;padding:13px 0;font-size:16px}
    .tab.active::after{left:22%;right:22%}
    .form{padding:28px 32px 4px}
    input[type=text],input[type=tel],input[type=email],textarea{font-size:15px;padding:10px 12px;border-radius:4px}
    textarea{min-height:190px}
    .notice{font-size:14px}
    .btn-wrap{margin:6px -32px 0}
    .submit{border-radius:0;font-size:17px;padding:14px 0}
    .foot{--u:7.2px}
  }
  @media (prefers-reduced-motion:reduce){
    *{animation:none!important;transition:none!important}
    .boot-track span{width:100%;transform:none}
  }