/* ==========================================================================
   HSEDA 官网 · 共享设计系统
   适用于产品目录页、售后登记页、联系页
   与 index.htm 同一套配色与组件规范
   ========================================================================== */

/* ---------- 设计变量 ---------- */
:root{
    --ink:#050d18;
    --navy:#08182b;
    --navy-2:#0d263f;
    --cyan:#22d3ee;
    --cyan-deep:#0b7f97;
    --blue:#2f7bf6;
    --line:#e2ebf4;
    --line-soft:#f0f5fa;
    --text:#1b2b3d;
    --text-2:#54687c;
    --text-3:#8b9db0;
    --surface:#ffffff;
    --surface-2:#f4f8fc;
    --radius:16px;
    --radius-sm:10px;
    --shadow-sm:0 2px 10px rgba(11,32,56,.05);
    --shadow-md:0 14px 34px -14px rgba(11,32,56,.28);
    --shadow-glow:0 18px 44px -18px rgba(34,211,238,.5);
    --max:1240px;
    --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

html{scroll-behavior:smooth}

body{
    font-family:"Microsoft YaHei","PingFang SC","Hiragino Sans GB","Helvetica Neue",Arial,sans-serif;
    color:var(--text);
    background:var(--surface-2);
    line-height:1.7;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
}

img{max-width:100%;display:block}
a{color:var(--blue);text-decoration:none}
ul,ol{list-style:none}
button{font-family:inherit}
table{border-collapse:collapse;width:100%}

.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:4px}

/* ---------- 顶部信息条 ---------- */
.topbar{
    background:var(--ink);
    color:rgba(255,255,255,.62);
    font-size:13px;
    border-bottom:1px solid rgba(255,255,255,.06);
}
.topbar .wrap{
    display:flex;justify-content:space-between;align-items:center;
    gap:16px;min-height:40px;flex-wrap:wrap;
}
.topbar-left{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.topbar-left span{display:inline-flex;align-items:center;gap:7px}
.topbar svg{width:14px;height:14px;fill:var(--cyan);flex:none;opacity:.9}
.topbar a{color:rgba(255,255,255,.62);transition:color .25s}
.topbar a:hover{color:var(--cyan)}
.topbar-right{display:flex;align-items:center;gap:18px}
.topbar .tb-lbl{font-style:normal}

/* ---------- 站点头部 ---------- */
.site-head{
    position:relative;
    background:
        radial-gradient(900px 320px at 12% -40%, rgba(34,211,238,.16), transparent 70%),
        linear-gradient(135deg,var(--navy) 0%,var(--navy-2) 100%);
    border-bottom:1px solid rgba(34,211,238,.16);
}
.site-head .wrap{
    display:flex;align-items:center;justify-content:space-between;
    gap:24px;padding-top:22px;padding-bottom:22px;
}
.brand{display:flex;align-items:center;gap:16px;min-width:0}
.brand-mark{
    width:50px;height:50px;flex:none;
    border-radius:13px;
    background:linear-gradient(150deg,rgba(34,211,238,.22),rgba(47,123,246,.12));
    border:1px solid rgba(34,211,238,.4);
    display:grid;place-items:center;
    box-shadow:0 0 0 6px rgba(34,211,238,.05),inset 0 0 18px rgba(34,211,238,.14);
}
.brand-mark svg{width:27px;height:27px;stroke:var(--cyan);fill:none;stroke-width:1.6}
.brand-title{
    font-size:20px;line-height:1.35;font-weight:700;color:#fff;
    letter-spacing:.6px;
}
.brand .tagline{
    font-size:12px;color:rgba(255,255,255,.5);
    letter-spacing:2px;margin-top:4px;
}
.brand .tagline b{color:var(--cyan);font-weight:600}
.head-phone{
    display:flex;align-items:center;gap:12px;
    padding:9px 18px;border-radius:12px;
    background:rgba(34,211,238,.07);
    border:1px solid rgba(34,211,238,.22);
    white-space:nowrap;
}
.head-phone svg{width:19px;height:19px;fill:var(--cyan)}
.head-phone .lbl{font-size:11px;color:rgba(255,255,255,.45);letter-spacing:2px}
.head-phone .num{
    font-size:20px;font-weight:700;color:#fff;letter-spacing:.6px;
    font-variant-numeric:tabular-nums;
}
.head-phone:hover{border-color:rgba(34,211,238,.55);background:rgba(34,211,238,.12)}

/* ---------- 主导航 ---------- */
.nav{
    position:sticky;top:0;z-index:200;
    background:rgba(6,17,30,.94);
    -webkit-backdrop-filter:blur(14px);
    backdrop-filter:blur(14px);
    border-bottom:1px solid rgba(255,255,255,.08);
    transition:box-shadow .3s;
}
.nav.is-stuck{box-shadow:0 12px 32px -16px rgba(0,0,0,.7)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px}
.nav-list{display:flex;align-items:center;gap:2px;flex:1;justify-content:center}
.nav-list a{
    position:relative;display:block;
    padding:15px 17px;
    font-size:14.5px;color:rgba(255,255,255,.72);
    letter-spacing:.4px;white-space:nowrap;
    transition:color .25s;
}
.nav-list a::after{
    content:"";position:absolute;left:50%;bottom:0;
    width:0;height:2px;border-radius:2px;
    background:linear-gradient(90deg,var(--cyan),var(--blue));
    box-shadow:0 0 12px var(--cyan);
    transform:translateX(-50%);
    transition:width .3s var(--ease);
}
.nav-list a:hover{color:#fff}
.nav-list a:hover::after,
.nav-list a.active::after{width:calc(100% - 22px)}
.nav-list a.active{color:var(--cyan)}
.nav-cta{
    display:none;
    padding:9px 18px;border-radius:999px;
    font-size:13.5px;font-weight:600;color:#04121f;
    background:linear-gradient(135deg,var(--cyan),#7dd3fc);
    box-shadow:0 8px 22px -10px rgba(34,211,238,.9);
    white-space:nowrap;
}
.nav-toggle{
    display:none;width:42px;height:42px;
    background:transparent;border:1px solid rgba(255,255,255,.16);
    border-radius:10px;cursor:pointer;padding:0;
    align-items:center;justify-content:center;
}
.nav-toggle span{
    display:block;width:18px;height:2px;background:#fff;border-radius:2px;
    box-shadow:0 -6px 0 #fff,0 6px 0 #fff;
}
.nav-toggle[aria-expanded="true"] span{
    box-shadow:none;transform:rotate(45deg);
}
.nav-toggle[aria-expanded="true"] span::after{
    content:"";display:block;width:18px;height:2px;background:#fff;
    transform:rotate(90deg);
}

/* ---------- 子页页头（深色带 + 面包屑） ---------- */
.page-hero{
    position:relative;overflow:hidden;
    background:
        radial-gradient(700px 300px at 82% 10%, rgba(34,211,238,.2), transparent 62%),
        radial-gradient(600px 320px at 6% 100%, rgba(47,123,246,.22), transparent 68%),
        linear-gradient(160deg,#050d18 0%,#08182b 58%,#0a2136 100%);
    color:#fff;
    padding:44px 0 46px;
    isolation:isolate;
}
.page-hero::before{
    content:"";position:absolute;inset:0;z-index:-1;
    background-image:
        linear-gradient(rgba(34,211,238,.07) 1px,transparent 1px),
        linear-gradient(90deg,rgba(34,211,238,.07) 1px,transparent 1px);
    background-size:48px 48px;
    mask-image:radial-gradient(circle at 30% 40%,#000 20%,transparent 78%);
    -webkit-mask-image:radial-gradient(circle at 30% 40%,#000 20%,transparent 78%);
}
.page-hero .crumbs{
    display:flex;align-items:center;gap:8px;flex-wrap:wrap;
    font-size:12.5px;color:rgba(255,255,255,.45);
    letter-spacing:.5px;margin-bottom:14px;
}
.page-hero .crumbs a{color:rgba(255,255,255,.62);transition:color .25s}
.page-hero .crumbs a:hover{color:var(--cyan)}
.page-hero .crumbs i{font-style:normal;color:rgba(255,255,255,.25)}
.page-hero h1{
    font-size:clamp(24px,3.2vw,36px);
    font-weight:800;letter-spacing:.8px;line-height:1.3;
    margin-bottom:12px;
}
.page-hero h1 em{
    font-style:normal;
    background:linear-gradient(100deg,#8ef0ff 0%,var(--cyan) 45%,#6fa8ff 100%);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;
    color:var(--cyan);
}
.page-hero .lead{
    font-size:15px;color:rgba(255,255,255,.62);
    max-width:760px;line-height:1.8;
}
.page-hero .hero-tags{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.page-hero .hero-tags span{
    font-size:12px;letter-spacing:1px;
    padding:5px 12px;border-radius:8px;
    color:rgba(255,255,255,.72);
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.1);
}

/* ---------- 页面主体 ---------- */
.page{padding:40px 0 0}
.layout{display:grid;grid-template-columns:264px minmax(0,1fr);gap:26px;align-items:start}

/* 面板 */
.panel{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:var(--shadow-sm);
    padding:28px;
}
.panel + .panel{margin-top:24px}
.panel-flush{padding:0;overflow:hidden}
.panel-head{
    display:flex;align-items:center;justify-content:space-between;gap:14px;
    padding:18px 24px;
    background:linear-gradient(120deg,var(--navy) 0%,var(--navy-2) 100%);
    color:#fff;font-size:14.5px;font-weight:700;letter-spacing:1.2px;
    position:relative;
}
.panel-head::after{
    content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;
    background:linear-gradient(90deg,var(--cyan),transparent);
}
.panel-body{padding:22px 24px}
.panel-body + .panel-body{border-top:1px solid var(--line-soft)}

/* 区块小标题 */
.sec-title{
    position:relative;
    display:flex;align-items:center;gap:11px;
    font-size:19px;font-weight:800;color:var(--navy);
    letter-spacing:.5px;
    padding-bottom:14px;margin-bottom:20px;
}
.sec-title::before{
    content:"";width:4px;height:20px;border-radius:3px;
    background:linear-gradient(180deg,var(--cyan),var(--blue));
    box-shadow:0 0 12px rgba(34,211,238,.6);
    flex:none;
}
.sec-title::after{
    content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
    background:linear-gradient(90deg,#cfe1f2,rgba(207,225,242,0));
}
.sec-title .count{
    margin-left:auto;
    font-size:12px;font-weight:600;color:var(--text-3);
    letter-spacing:1px;
    background:#f1f7fd;border:1px solid var(--line);
    padding:3px 10px;border-radius:20px;
}
.sec-desc{font-size:13.5px;color:var(--text-3);margin:-10px 0 20px}
.prose p{margin:0 0 12px;color:var(--text-2);font-size:14.5px}
.prose h2,.prose h3{color:var(--navy);margin:22px 0 10px}

/* 面包屑（浅色版） */
.crumbs{display:flex;gap:8px;align-items:center;font-size:12.5px;color:var(--text-3);margin-bottom:18px;flex-wrap:wrap}
.crumbs a{color:var(--text-2)}
.crumbs a:hover{color:var(--cyan-deep)}
.crumbs i{font-style:normal;color:#c4d2e0}

/* ---------- 产品卡 ---------- */
.p-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(226px,1fr));
    gap:20px;
}
.p-grid.cols-4{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.pcard{
    position:relative;
    display:flex;flex-direction:column;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:14px;
    overflow:hidden;
    transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s;
}
.pcard::after{
    content:"";position:absolute;left:0;right:0;top:0;height:2px;
    background:linear-gradient(90deg,var(--cyan),var(--blue));
    transform:scaleX(0);transform-origin:left;
    transition:transform .4s var(--ease);
}
.pcard:hover{
    transform:translateY(-6px);
    border-color:rgba(34,211,238,.55);
    box-shadow:var(--shadow-md),0 0 0 1px rgba(34,211,238,.16),var(--shadow-glow);
}
.pcard:hover::after{transform:scaleX(1)}
.pcard-img{
    position:relative;
    aspect-ratio:4 / 3;
    background:radial-gradient(120% 100% at 50% 0%,#ffffff 40%,#eef5fc 100%);
    overflow:hidden;
}
.pcard-img::before{
    content:"";position:absolute;inset:0;
    background-image:
        linear-gradient(rgba(47,123,246,.05) 1px,transparent 1px),
        linear-gradient(90deg,rgba(47,123,246,.05) 1px,transparent 1px);
    background-size:26px 26px;
    opacity:0;transition:opacity .4s;
}
.pcard:hover .pcard-img::before{opacity:1}
.pcard-img img{
    position:absolute;top:14px;left:14px;
    width:calc(100% - 28px);height:calc(100% - 28px);
    object-fit:contain;
    mix-blend-mode:multiply;
    transition:transform .5s var(--ease);
}
.pcard:hover .pcard-img img{transform:scale(1.05)}
.pcard-ph{
    position:absolute;inset:14px;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
    color:#b9cde0;
    border:1px dashed #d5e4f2;border-radius:10px;
    background:linear-gradient(160deg,#f8fbff,#eef5fc);
}
.pcard-ph svg{width:40px;height:40px;opacity:.75}
.pcard-ph span{font-size:11.5px;letter-spacing:.5px}
.pcard-body{
    padding:14px 16px 18px;
    display:flex;flex-direction:column;flex:1;
    border-top:1px solid var(--line-soft);
}
.pcard-name{
    font-size:14.5px;font-weight:700;color:var(--navy);
    line-height:1.5;margin-bottom:6px;
    transition:color .3s;
}
.pcard:hover .pcard-name{color:var(--cyan-deep)}
.pcard-desc{
    font-size:12.6px;color:var(--text-2);line-height:1.7;
    flex:1;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
    overflow:hidden;
}
.pcard-more{
    display:inline-flex;align-items:center;gap:6px;
    margin-top:12px;font-size:12.6px;font-weight:600;color:var(--blue);
    transition:color .25s,gap .25s;
}
.pcard-more::after{content:"→";transition:transform .25s}
.pcard:hover .pcard-more{color:var(--cyan-deep)}
.pcard:hover .pcard-more::after{transform:translateX(4px)}

/* 标签 */
.tag{
    display:inline-flex;align-items:center;gap:5px;
    font-size:11.5px;letter-spacing:.6px;
    padding:3px 9px;border-radius:6px;
    color:var(--cyan-deep);
    background:rgba(34,211,238,.1);
    border:1px solid rgba(34,211,238,.28);
    white-space:nowrap;
}
.tag.gray{color:var(--text-2);background:#f3f7fb;border-color:var(--line)}
.tag.orange{color:#c2410c;background:#fff3e9;border-color:#ffd9bf}

/* ---------- 按钮 ---------- */
.btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    padding:11px 22px;border-radius:11px;
    font-size:14px;font-weight:600;letter-spacing:.4px;
    border:1px solid transparent;cursor:pointer;
    transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s,border-color .25s,color .25s;
}
.btn-primary{
    color:#04121f;
    background:linear-gradient(135deg,#7ef0ff 0%,var(--cyan) 45%,#4ea8ff 100%);
    box-shadow:0 14px 30px -14px rgba(34,211,238,.9);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 20px 36px -14px rgba(34,211,238,1)}
.btn-ghost{
    color:var(--cyan-deep);background:#fff;
    border-color:#cfe3f2;
}
.btn-ghost:hover{border-color:var(--cyan);background:#f4fdff;transform:translateY(-2px)}
.btn-dark{
    color:#e6f4ff;background:rgba(255,255,255,.06);
    border-color:rgba(255,255,255,.2);
}
.btn-dark:hover{background:rgba(34,211,238,.12);border-color:rgba(34,211,238,.5)}

/* ---------- 表格 ---------- */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px}
.table{min-width:520px;font-size:13.5px}
.table th{
    background:#f4f9fe;color:var(--navy);
    font-weight:700;text-align:left;
    padding:12px 14px;border-bottom:1px solid var(--line);
    white-space:nowrap;
}
.table td{padding:11px 14px;border-bottom:1px solid var(--line-soft);color:var(--text-2)}
.table tr:last-child td{border-bottom:none}
.table tbody tr:hover td{background:#f9fcff}

/* ---------- 代码 / 文本块 ---------- */
.codebox{
    background:#07121f;color:#9fe7f5;
    border:1px solid rgba(34,211,238,.2);
    border-radius:10px;padding:14px 16px;
    font-family:Consolas,Monaco,Menlo,monospace;
    font-size:12.5px;line-height:1.7;
    overflow-x:auto;white-space:pre-wrap;word-break:break-all;
}

/* ---------- 表单 ---------- */
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{margin-bottom:18px}
.field label,.form-label{
    display:block;font-size:13.5px;font-weight:600;color:var(--navy);
    margin-bottom:7px;letter-spacing:.3px;
}
.field .req{color:#e11d48;margin-left:3px}
.input,.form-control,select,textarea{
    width:100%;
    padding:11px 14px;
    font-family:inherit;font-size:14px;color:var(--text);
    background:#fbfdff;
    border:1px solid #d9e6f2;border-radius:10px;
    transition:border-color .25s,box-shadow .25s,background .25s;
}
.input:focus,.form-control:focus,select:focus,textarea:focus{
    outline:none;background:#fff;
    border-color:var(--cyan);
    box-shadow:0 0 0 3px rgba(34,211,238,.15);
}
.hint,.form-hint{font-size:12.3px;color:var(--text-3);margin-top:6px;line-height:1.6}

/* ---------- 页脚 ---------- */
.footer{
    position:relative;
    margin-top:64px;
    background:linear-gradient(170deg,var(--ink) 0%,#071528 100%);
    color:rgba(255,255,255,.62);
    font-size:13.5px;
    overflow:hidden;
}
.footer::before{
    content:"";position:absolute;top:0;left:0;right:0;height:1px;
    background:linear-gradient(90deg,transparent,rgba(34,211,238,.65),transparent);
}
.footer::after{
    content:"";position:absolute;right:-120px;bottom:-160px;
    width:420px;height:420px;border-radius:50%;
    background:radial-gradient(circle,rgba(34,211,238,.12),transparent 68%);
    pointer-events:none;
}
.footer-content{
    position:relative;
    max-width:var(--max);margin:0 auto;
    padding:50px 24px 38px;
    display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px;
}
.footer-brand .fb-name{
    display:flex;align-items:center;gap:10px;
    color:#fff;font-size:15.5px;font-weight:700;letter-spacing:.5px;
    margin-bottom:12px;
}
.footer-brand .fb-name svg{width:22px;height:22px;stroke:var(--cyan);fill:none;stroke-width:1.6;flex:none}
.footer-brand p{line-height:1.9;color:rgba(255,255,255,.45);font-size:12.8px}
.footer-section h4{
    position:relative;font-size:13.5px;font-weight:700;color:#fff;
    letter-spacing:1.2px;margin-bottom:16px;padding-bottom:10px;
}
.footer-section h4::after{
    content:"";position:absolute;left:0;bottom:0;
    width:26px;height:2px;border-radius:2px;
    background:linear-gradient(90deg,var(--cyan),transparent);
}
.footer-section p{margin:0 0 9px;line-height:1.7}
.footer-section a{color:rgba(255,255,255,.55);transition:color .25s,padding-left .25s}
.footer-section a:hover{color:var(--cyan);padding-left:4px}
.footer-bottom{
    position:relative;
    border-top:1px solid rgba(255,255,255,.07);
    padding:20px 24px 24px;text-align:center;
    font-size:12.3px;color:rgba(255,255,255,.36);line-height:1.9;
}
.footer-bottom a{color:rgba(255,255,255,.5)}
.footer-bottom a:hover{color:var(--cyan)}
.footer-bottom img{display:inline-block;vertical-align:-4px;margin-right:6px;opacity:.85}
.footer-bottom .beian{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:6px}

/* ---------- QQ 客服浮标 ---------- */
.qq-cs-btn{
    position:fixed;right:24px;bottom:28px;z-index:9990;
    display:inline-flex;align-items:center;gap:9px;
    background:linear-gradient(135deg,var(--navy-2) 0%,#0e7490 55%,var(--cyan) 150%);
    color:#fff;border:1px solid rgba(34,211,238,.55);
    cursor:pointer;padding:12px 20px;border-radius:50px;
    font-size:14px;font-weight:600;letter-spacing:.6px;
    box-shadow:0 14px 34px -12px rgba(8,24,43,.85),0 0 0 1px rgba(34,211,238,.12);
    transition:transform .22s ease,box-shadow .22s ease,filter .22s ease;
}
.qq-cs-btn:hover{
    transform:translateY(-3px);filter:brightness(1.1);
    box-shadow:0 20px 40px -14px rgba(34,211,238,.75);
}
.qq-cs-ico{position:relative;display:flex;align-items:center;justify-content:center}
.qq-cs-ico::after{
    content:"";position:absolute;top:-1px;right:-2px;
    width:8px;height:8px;background:#3ddc84;
    border:2px solid #0b2b3d;border-radius:50%;
    animation:qqPulse 1.8s infinite;
}
@keyframes qqPulse{
    0%{box-shadow:0 0 0 0 rgba(61,220,132,.7)}
    70%{box-shadow:0 0 0 8px rgba(61,220,132,0)}
    100%{box-shadow:0 0 0 0 rgba(61,220,132,0)}
}
.qq-tip{
    position:fixed;right:24px;bottom:92px;z-index:9991;
    max-width:290px;background:#fff;color:var(--text);
    border:1px solid #d8e3ee;border-radius:12px;
    padding:14px 16px;font-size:13.5px;line-height:1.6;
    box-shadow:0 22px 44px -14px rgba(8,24,43,.42);
    opacity:0;visibility:hidden;transform:translateY(8px);
    transition:.25s ease;
}
.qq-tip.show{opacity:1;visibility:visible;transform:translateY(0)}
.qq-tip strong{color:var(--cyan-deep);font-size:15px}
.qq-tip-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.qq-tip a,.qq-tip button{
    font-size:12.5px;cursor:pointer;text-decoration:none;
    padding:5px 12px;border-radius:30px;
    border:1px solid var(--cyan-deep);background:transparent;
    color:var(--cyan-deep);transition:.2s;
}
.qq-tip a:hover,.qq-tip button:hover{background:var(--cyan-deep);color:#fff}

/* ---------- 动效 ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .65s var(--ease),transform .65s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ---------- 响应式 ---------- */
@media (max-width:1080px){
    .layout{grid-template-columns:1fr}
    .footer-content{grid-template-columns:1fr 1fr;gap:30px}
}
@media (max-width:900px){
    .head-phone{display:none}
    .nav-toggle{display:flex}
    .nav .wrap{padding-top:8px;padding-bottom:8px}
    .nav-list{
        position:absolute;left:0;right:0;top:100%;
        flex-direction:column;align-items:stretch;
        background:#06111e;
        border-bottom:1px solid rgba(34,211,238,.2);
        max-height:0;overflow:hidden;
        transition:max-height .35s var(--ease);
    }
    .nav-list.open{max-height:520px;overflow-y:auto}
    .nav-list a{padding:13px 24px;border-bottom:1px solid rgba(255,255,255,.05)}
    .nav-list a::after{display:none}
    .nav-cta{display:inline-flex}
    .page-hero{padding:32px 0 34px}
    .panel{padding:20px}
}
@media (max-width:640px){
    .wrap{padding:0 16px}
    .topbar{font-size:12px}
    .topbar .wrap{min-height:36px;gap:10px}
    .topbar-left{gap:14px}
    .topbar .tb-lbl{display:none}
    .topbar svg{width:13px;height:13px}
    .topbar-right{display:none}
    .site-head .wrap{padding-top:18px;padding-bottom:18px}
    .brand-title{font-size:17px}
    .brand .tagline{font-size:10.5px;letter-spacing:1px}
    .brand-mark{width:44px;height:44px;border-radius:12px}
    .brand-mark svg{width:23px;height:23px}
    .p-grid{grid-template-columns:1fr 1fr;gap:14px}
    .pcard-name{font-size:13px}
    .pcard-desc{font-size:11.8px}
    .sec-title{font-size:17px}
    .page-hero h1{font-size:21px}
    .page-hero .lead{font-size:13.5px}
    .form-row{grid-template-columns:1fr}
    .footer-content{grid-template-columns:1fr;gap:24px;padding:36px 16px 26px}
    .footer-bottom{padding-bottom:92px}
    .qq-cs-btn{right:14px;bottom:16px;padding:10px 16px;font-size:13px}
    .qq-tip{right:14px;bottom:80px;max-width:calc(100vw - 28px)}
}
@media (max-width:420px){
    .p-grid{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
    .reveal{opacity:1;transform:none}
    html{scroll-behavior:auto}
}