/* ================================================================
   上海盛沃律师事务所 - 交通事故法律纠纷专题单页网站
   样式表 style.css
   红色主色调 | 全站无圆角（最大 3px）| 响应式布局
   纯 CSS3，无任何第三方依赖
   ================================================================ */

/* ---------- CSS 变量定义 ---------- */
:root {
    /* 红色主题色系（以红色为底色） */
    --red-950: #2b0505;
    --red-900: #450a0a;
    --red-850: #5c0d0e;
    --red-800: #711011;
    --red-700: #8f1415;
    --red-600: #a31515;
    --red-500: #bb1b1b;
    --red-400: #d33434;
    --red-300: #e87070;
    --red-100: #fdeaea;
    --red-50:  #fef4f4;
    --page-bg: #fdf6f6;

    /* 中性色 */
    --dark: #1a1a1a;
    --gray-900: #1f2937;
    --gray-800: #262626;
    --gray-700: #374151;
    --gray-600: #4b5563;
    --gray-500: #6b7280;
    --gray-400: #9ca3af;
    --gray-300: #d1d5db;
    --gray-200: #e5e7eb;
    --gray-100: #f3f4f6;
    --white: #ffffff;

    /* 金色点缀（红金搭配，克制使用） */
    --gold: #d2a24c;
    --gold-light: #ecd9a8;
    --gold-dark: #a97e2f;

    /* 圆角 — 全站锐利风格，最大 3px */
    --radius: 3px;

    /* 阴影 */
    --shadow-sm: 0 1px 2px rgba(69,10,10,.05), 0 2px 6px rgba(69,10,10,.06);
    --shadow-md: 0 4px 10px rgba(69,10,10,.06), 0 12px 28px rgba(69,10,10,.09);
    --shadow-lg: 0 10px 24px rgba(69,10,10,.08), 0 28px 56px rgba(69,10,10,.13);
    --shadow-red: 0 12px 32px rgba(163,21,21,.25), 0 4px 12px rgba(163,21,21,.15);

    /* 过渡 */
    --transition: all .25s ease;
    --transition-slow: all .45s cubic-bezier(.22,.61,.36,1);

    /* 字体 */
    --font-sans: "Microsoft YaHei","PingFang SC","HarmonyOS Sans SC","Hiragino Sans GB","Helvetica Neue",Arial,sans-serif;
    --font-serif: "Palatino Linotype","Georgia","Times New Roman","STZhongsong","SimSun",serif;

    /* 布局 */
    --container: 1200px;
    --header-h: 72px;
}

/* ---------- 全局重置 ---------- */
*,*::before,*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.7;
    color: var(--gray-800);
    background-color: var(--page-bg);
    -webkit-font-smoothing: antialiased;
}

img,svg { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; transition: var(--transition); }
ul,ol { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input,textarea,select { font-family: inherit; font-size: inherit; }

/* 锚点定位留出导航高度 */
section[id], div[id].section { scroll-margin-top: calc(var(--header-h) + 16px); }

/* ---------- 通用容器 ---------- */
.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 24px;
}

/* ---------- 通用按钮 ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 30px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    border-radius: var(--radius);
    transition: var(--transition);
    white-space: nowrap;
    user-select: none;
}
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }

.btn--primary {
    color: var(--white);
    background: linear-gradient(135deg, var(--red-600), var(--red-700));
    box-shadow: var(--shadow-red);
}
.btn--primary:hover {
    background: linear-gradient(135deg, var(--red-700), var(--red-800));
    transform: translateY(-2px);
}

.btn--ghost {
    color: var(--white);
    border: 1px solid rgba(255,255,255,.65);
    background: rgba(255,255,255,.08);
}
.btn--ghost:hover { background: rgba(255,255,255,.18); border-color: var(--white); }

.btn--gold {
    color: var(--red-900);
    background: linear-gradient(135deg, var(--gold-light), var(--gold));
}
.btn--gold:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(210,162,76,.35); }

.btn--lg { padding: 16px 38px; font-size: 17px; }

/* ================================================================
   顶部公告条
   ================================================================ */
.topbar {
    background: var(--red-900);
    color: rgba(255,255,255,.92);
    font-size: 13px;
    padding: 8px 0;
}
.topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.topbar__left,
.topbar__right {
    display: flex;
    align-items: center;
    gap: 18px;
}
.topbar__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.topbar__item svg { width: 13px; height: 13px; opacity: .85; }
.topbar__item a:hover { color: var(--gold-light); }
.topbar__phone { font-weight: 700; letter-spacing: .5px; }

/* ================================================================
   导航栏
   ================================================================ */
.navbar {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(255,255,255,.97);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--red-100);
    transition: var(--transition);
}
.navbar.is-scrolled {
    box-shadow: 0 6px 20px rgba(69,10,10,.10);
}
.navbar__inner {
    height: var(--header-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

/* 品牌 */
.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
.brand__mark {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--red-600), var(--red-800));
    border-radius: var(--radius);
    color: var(--gold-light);
    box-shadow: var(--shadow-red);
}
.brand__mark svg { width: 24px; height: 24px; }
.brand__text { line-height: 1.25; }
.brand__name {
    font-size: 18px;
    font-weight: 700;
    color: var(--red-800);
    letter-spacing: 1px;
}
.brand__sub {
    font-size: 11px;
    color: var(--gray-500);
    letter-spacing: 2.5px;
    text-transform: uppercase;
}

/* 桌面菜单 */
.navbar__menu {
    display: flex;
    align-items: center;
}
.navbar__menu ul {
    display: flex;
    align-items: center;
    gap: 4px;
}
.navbar__menu a {
    position: relative;
    display: block;
    padding: 10px 14px;
    font-size: 15px;
    color: var(--gray-700);
    font-weight: 500;
}
.navbar__menu a::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 4px;
    height: 2px;
    background: var(--red-600);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s ease;
}
.navbar__menu a:hover,
.navbar__menu li.active a { color: var(--red-600); }
.navbar__menu a:hover::after,
.navbar__menu li.active a::after { transform: scaleX(1); }

/* 导航右侧电话按钮 */
.navbar__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: linear-gradient(135deg, var(--red-600), var(--red-700));
    color: var(--white);
    font-weight: 700;
    font-size: 15px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-red);
    flex-shrink: 0;
}
.navbar__cta svg { width: 16px; height: 16px; }
.navbar__cta:hover { background: linear-gradient(135deg, var(--red-700), var(--red-800)); transform: translateY(-1px); }

/* 汉堡按钮 */
.navbar__toggle {
    display: none;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    color: var(--red-700);
}
.navbar__toggle svg { width: 26px; height: 26px; }

/* 移动端下拉菜单 */
.navbar__menu-mobile {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    z-index: 999;
    background: var(--white);
    border-top: 1px solid var(--red-100);
    box-shadow: 0 18px 36px rgba(69,10,10,.14);
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease;
}
.navbar__menu-mobile.open { max-height: 70vh; overflow-y: auto; }
.navbar__menu-mobile a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 24px;
    font-size: 15px;
    color: var(--gray-700);
    border-bottom: 1px solid var(--red-50);
}
.navbar__menu-mobile li.active a {
    color: var(--red-600);
    font-weight: 700;
    background: var(--red-50);
}
.navbar__menu-mobile a svg { width: 14px; height: 14px; color: var(--red-300); }

/* ================================================================
   Hero 首屏（红底）
   ================================================================ */
.hero {
    position: relative;
    color: var(--white);
    background:
        radial-gradient(900px 420px at 85% -10%, rgba(210,162,76,.18), transparent 60%),
        radial-gradient(700px 500px at -10% 110%, rgba(0,0,0,.28), transparent 60%),
        linear-gradient(135deg, var(--red-700) 0%, var(--red-600) 48%, var(--red-800) 100%);
    overflow: hidden;
}
/* 斜纹肌理 */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(45deg, rgba(255,255,255,.028) 0 2px, transparent 2px 14px);
    pointer-events: none;
}
.hero::after {
    content: "";
    position: absolute;
    right: -140px;
    top: -140px;
    width: 460px;
    height: 460px;
    border: 1px solid rgba(255,255,255,.10);
    pointer-events: none;
}
.hero__inner {
    position: relative;
    z-index: 1;
    padding: 84px 0 76px;
}
.hero__crumb {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: rgba(255,255,255,.78);
    letter-spacing: 2px;
    margin-bottom: 22px;
}
.hero__crumb::before {
    content: "";
    width: 34px;
    height: 2px;
    background: var(--gold);
}
.hero__title {
    font-size: clamp(30px, 5vw, 52px);
    font-weight: 800;
    line-height: 1.28;
    letter-spacing: 1px;
    max-width: 860px;
}
.hero__title em {
    font-style: normal;
    color: var(--gold-light);
}
.hero__sub {
    margin-top: 20px;
    max-width: 720px;
    font-size: clamp(15px, 1.6vw, 17px);
    line-height: 1.9;
    color: rgba(255,255,255,.88);
}
.hero__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 26px;
}
.hero__tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    font-size: 13px;
    color: var(--white);
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.22);
    border-radius: var(--radius);
}
.hero__tag svg { width: 13px; height: 13px; color: var(--gold-light); }

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 34px;
}
.hero__phone-line {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-top: 30px;
    font-size: 14px;
    color: rgba(255,255,255,.82);
}
.hero__phone-line strong {
    font-family: var(--font-serif);
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: var(--gold-light);
}
.hero__phone-line a { border-bottom: 1px dashed rgba(255,255,255,.4); }
.hero__phone-line a:hover { color: var(--white); border-color: var(--white); }

/* 首屏数据条：位于 Hero 之后的独立层，负 margin 上移骑跨红白交界
   （放在 Hero 外部，不受其 overflow:hidden 裁剪，也不受 margin 场陷影响） */
.hero-stats-band {
    position: relative;
    z-index: 5;
    margin-top: -56px;
}
.hero__stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: rgba(255,255,255,.16);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
}
.hero__stat {
    background: linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
    backdrop-filter: blur(6px);
    padding: 26px 22px;
    text-align: center;
}
.hero__stat-num {
    font-family: var(--font-serif);
    font-size: 30px;
    font-weight: 700;
    color: var(--gold-light);
    line-height: 1.2;
}
.hero__stat-label {
    margin-top: 6px;
    font-size: 13px;
    color: rgba(255,255,255,.82);
    letter-spacing: 1px;
}
.hero__stat + .hero__stat { border-left: 1px solid rgba(255,255,255,.14); }

/* ================================================================
   区块通用
   ================================================================ */
.section { padding: 96px 0; }
.section--tight { padding: 80px 0; }
.section--red {
    background:
        radial-gradient(800px 400px at 110% 0%, rgba(210,162,76,.14), transparent 55%),
        linear-gradient(150deg, var(--red-700), var(--red-800) 70%, var(--red-900));
    color: var(--white);
}
.section--tint { background: var(--red-50); }
.section--white { background: var(--white); }

/* 区块标题 */
.sec-head { text-align: center; max-width: 760px; margin: 0 auto 56px; }
.sec-head--left { text-align: left; margin-left: 0; }
.sec-head__kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 3px;
    color: var(--red-600);
}
.sec-head__kicker::before,
.sec-head__kicker::after {
    content: "";
    width: 26px;
    height: 1px;
    background: var(--gold);
}
.sec-head--left .sec-head__kicker::before { display: none; }
.section--red .sec-head__kicker { color: var(--gold-light); }
.sec-head__title {
    margin-top: 14px;
    font-size: clamp(24px, 3.2vw, 36px);
    font-weight: 800;
    color: var(--red-900);
    letter-spacing: 1px;
    line-height: 1.35;
}
.section--red .sec-head__title { color: var(--white); }
.sec-head__desc {
    margin-top: 14px;
    font-size: 15.5px;
    color: var(--gray-600);
    line-height: 1.9;
}
.section--red .sec-head__desc { color: rgba(255,255,255,.85); }

/* ================================================================
   服务范围（卡片网格）
   ================================================================ */
.svc-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}
.svc-card {
    position: relative;
    background: var(--white);
    border: 1px solid var(--red-100);
    border-top: 3px solid var(--red-600);
    border-radius: var(--radius);
    padding: 28px 26px;
    transition: var(--transition);
    box-shadow: var(--shadow-sm);
}
.svc-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-top-color: var(--red-700);
}
.svc-card__icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--red-600);
    background: var(--red-50);
    border: 1px solid var(--red-100);
    border-radius: var(--radius);
    margin-bottom: 18px;
    transition: var(--transition);
}
.svc-card:hover .svc-card__icon {
    color: var(--white);
    background: linear-gradient(135deg, var(--red-600), var(--red-800));
    border-color: var(--red-700);
}
.svc-card__icon svg { width: 24px; height: 24px; }
.svc-card__title {
    font-size: 17.5px;
    font-weight: 700;
    color: var(--red-900);
    margin-bottom: 10px;
}
.svc-card__text {
    font-size: 14px;
    color: var(--gray-600);
    line-height: 1.85;
}

/* ================================================================
   赔偿项目（表格）
   ================================================================ */
.comp-wrap {
    background: var(--white);
    border: 1px solid var(--red-100);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}
.comp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.comp-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
    font-size: 14.5px;
}
.comp-table thead th {
    background: linear-gradient(135deg, var(--red-700), var(--red-800));
    color: var(--white);
    text-align: left;
    padding: 15px 20px;
    font-size: 15px;
    letter-spacing: 1px;
    white-space: nowrap;
}
.comp-table tbody td {
    padding: 14px 20px;
    border-bottom: 1px solid var(--red-50);
    color: var(--gray-700);
    vertical-align: top;
    line-height: 1.8;
}
.comp-table tbody tr:nth-child(even) { background: var(--red-50); }
.comp-table tbody tr:last-child td { border-bottom: none; }
.comp-table .comp-name {
    font-weight: 700;
    color: var(--red-800);
    white-space: nowrap;
}
.comp-note {
    margin-top: 18px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 14px 18px;
    background: var(--red-50);
    border: 1px solid var(--red-100);
    border-left: 3px solid var(--red-600);
    border-radius: var(--radius);
    font-size: 13.5px;
    color: var(--gray-600);
    line-height: 1.8;
}
.comp-note svg { width: 17px; height: 17px; color: var(--red-600); flex-shrink: 0; margin-top: 3px; }

/* ================================================================
   服务流程（红底时间线）
   ================================================================ */
.flow-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    counter-reset: flow;
}
.flow-item {
    position: relative;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: var(--radius);
    padding: 30px 26px;
    transition: var(--transition);
}
.flow-item:hover {
    background: rgba(255,255,255,.12);
    border-color: var(--gold);
    transform: translateY(-4px);
}
.flow-item__num {
    font-family: var(--font-serif);
    font-size: 40px;
    font-weight: 700;
    color: var(--gold-light);
    line-height: 1;
    margin-bottom: 16px;
}
.flow-item__title {
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 10px;
    letter-spacing: 1px;
}
.flow-item__text {
    font-size: 13.5px;
    color: rgba(255,255,255,.82);
    line-height: 1.85;
}
.flow-item::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -22px;
    width: 12px;
    height: 12px;
    border-top: 2px solid rgba(255,255,255,.4);
    border-right: 2px solid rgba(255,255,255,.4);
    transform: translateY(-50%) rotate(45deg);
}
.flow-item:nth-child(3n)::after { display: none; }

/* ================================================================
   为什么选择（白卡）
   ================================================================ */
.why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}
.why-card {
    display: flex;
    gap: 18px;
    background: var(--white);
    border: 1px solid var(--red-100);
    border-radius: var(--radius);
    padding: 26px 24px;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}
.why-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.why-card__icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    background: linear-gradient(135deg, var(--red-600), var(--red-800));
    border-radius: var(--radius);
}
.why-card__icon svg { width: 22px; height: 22px; }
.why-card__title {
    font-size: 16.5px;
    font-weight: 700;
    color: var(--red-900);
    margin-bottom: 8px;
}
.why-card__text {
    font-size: 13.5px;
    color: var(--gray-600);
    line-height: 1.85;
}

/* ================================================================
   FAQ 手风琴
   ================================================================ */
.faq-list { max-width: 880px; margin: 0 auto; }
.faq-item {
    background: var(--white);
    border: 1px solid var(--red-100);
    border-radius: var(--radius);
    margin-bottom: 14px;
    overflow: hidden;
    transition: var(--transition);
}
.faq-item.active { border-color: var(--red-300); box-shadow: var(--shadow-sm); }
.faq-item__header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    text-align: left;
    font-size: 15.5px;
    font-weight: 700;
    color: var(--gray-800);
    line-height: 1.6;
    transition: var(--transition);
}
.faq-item__header:hover { color: var(--red-600); }
.faq-item.active .faq-item__header { color: var(--red-700); background: var(--red-50); }
.faq-item__q { display: flex; align-items: flex-start; gap: 12px; }
.faq-item__badge {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--white);
    background: var(--red-600);
    border-radius: var(--radius);
    margin-top: 2px;
}
.faq-item__arrow {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: var(--red-500);
    transition: transform .3s ease;
}
.faq-item.active .faq-item__arrow { transform: rotate(180deg); }
.faq-item__body {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease;
}
.faq-item__body-inner {
    padding: 16px 22px 20px 56px;
    font-size: 14.5px;
    color: var(--gray-600);
    line-height: 1.9;
    border-top: 1px dashed var(--red-100);
}

/* ================================================================
   法律依据
   ================================================================ */
.law-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.law-card {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    background: var(--white);
    border: 1px solid var(--red-100);
    border-left: 3px solid var(--gold);
    border-radius: var(--radius);
    padding: 22px 20px;
    transition: var(--transition);
}
.law-card:hover { border-left-color: var(--red-600); box-shadow: var(--shadow-sm); }
.law-card__icon { width: 22px; height: 22px; color: var(--gold-dark); flex-shrink: 0; margin-top: 2px; }
.law-card__name { font-size: 15px; font-weight: 700; color: var(--red-900); line-height: 1.55; }
.law-card__desc { margin-top: 6px; font-size: 13px; color: var(--gray-500); line-height: 1.75; }

/* ================================================================
   委托须知 / 风险提示
   ================================================================ */
.notice-box {
    max-width: 920px;
    margin: 0 auto;
    background: var(--white);
    border: 1px solid var(--red-100);
    border-radius: var(--radius);
    padding: 36px 38px;
    box-shadow: var(--shadow-sm);
}
.notice-box h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    color: var(--red-800);
    margin-bottom: 18px;
}
.notice-box h3 svg { width: 20px; height: 20px; color: var(--red-600); }
.notice-box ol {
    list-style: none;
    counter-reset: notice;
}
.notice-box li {
    position: relative;
    counter-increment: notice;
    padding: 10px 0 10px 44px;
    font-size: 14.5px;
    color: var(--gray-600);
    line-height: 1.85;
    border-bottom: 1px dashed var(--red-100);
}
.notice-box li:last-child { border-bottom: none; }
.notice-box li::before {
    content: counter(notice, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 12px;
    font-family: var(--font-serif);
    font-size: 15px;
    font-weight: 700;
    color: var(--red-500);
}

/* ================================================================
   CTA 横幅（红底）
   ================================================================ */
.cta-band {
    position: relative;
    color: var(--white);
    background:
        radial-gradient(700px 320px at 15% 0%, rgba(210,162,76,.20), transparent 55%),
        linear-gradient(120deg, var(--red-800), var(--red-600) 55%, var(--red-800));
    overflow: hidden;
}
.cta-band::before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(-45deg, rgba(255,255,255,.03) 0 2px, transparent 2px 12px);
    pointer-events: none;
}
.cta-band__inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    padding: 64px 0;
    flex-wrap: wrap;
}
.cta-band__title {
    font-size: clamp(22px, 3vw, 32px);
    font-weight: 800;
    letter-spacing: 1px;
    line-height: 1.4;
}
.cta-band__desc {
    margin-top: 10px;
    font-size: 15px;
    color: rgba(255,255,255,.85);
}
.cta-band__phone {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}
.cta-band__phone-num {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: var(--font-serif);
    font-size: clamp(30px, 4vw, 44px);
    font-weight: 700;
    color: var(--gold-light);
    letter-spacing: 2px;
    line-height: 1.15;
}
.cta-band__phone-num svg { width: 30px; height: 30px; color: var(--gold-light); }
.cta-band__phone-num:hover { color: var(--white); }
.cta-band__phone-btn {
    padding: 12px 32px;
    font-size: 16px;
    font-weight: 700;
    color: var(--red-900);
    background: linear-gradient(135deg, var(--gold-light), var(--gold));
    border-radius: var(--radius);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.cta-band__phone-btn svg { width: 17px; height: 17px; }
.cta-band__phone-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,.25); }

/* ================================================================
   联系我们
   ================================================================ */
.contact-wrap {
    max-width: 980px;
    margin: 0 auto;
    background: var(--white);
    border: 1px solid var(--red-100);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}
.contact-info {
    position: relative;
    color: var(--white);
    background:
        radial-gradient(500px 300px at 100% 0%, rgba(210,162,76,.16), transparent 60%),
        linear-gradient(160deg, var(--red-700), var(--red-900));
    padding: 44px 44px 48px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 40px;
}
.contact-info > div:first-child { grid-column: 1 / -1; }
.contact-info__title { font-size: 22px; font-weight: 800; letter-spacing: 1px; }
.contact-info__lead { font-size: 14px; color: rgba(255,255,255,.82); line-height: 1.9; }
.contact-line {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}
.contact-line__icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.22);
    border-radius: var(--radius);
}
.contact-line__icon svg { width: 18px; height: 18px; color: var(--gold-light); }
.contact-line__label { font-size: 12px; letter-spacing: 2px; color: rgba(255,255,255,.65); margin-bottom: 3px; }
.contact-line__value { font-size: 15px; font-weight: 600; line-height: 1.7; }
.contact-line__value a:hover { color: var(--gold-light); }
.contact-line__value strong {
    font-family: var(--font-serif);
    font-size: 24px;
    letter-spacing: 1.5px;
    color: var(--gold-light);
}

/* ================================================================
   页脚
   ================================================================ */
.footer {
    background: var(--red-950);
    color: rgba(255,255,255,.78);
    padding: 64px 0 0;
    font-size: 14px;
}
.footer__grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.4fr;
    gap: 40px;
    padding-bottom: 44px;
}
.footer__brand-name {
    font-size: 19px;
    font-weight: 800;
    color: var(--white);
    letter-spacing: 1.5px;
    margin-bottom: 14px;
}
.footer__about { line-height: 1.9; color: rgba(255,255,255,.62); font-size: 13.5px; }
.footer__title {
    font-size: 15px;
    font-weight: 700;
    color: var(--gold-light);
    letter-spacing: 2px;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,.12);
}
.footer__links li { margin-bottom: 10px; }
.footer__links a { color: rgba(255,255,255,.68); font-size: 13.5px; }
.footer__links a:hover { color: var(--gold-light); padding-left: 4px; }
.footer__contact p {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
    font-size: 13.5px;
    line-height: 1.8;
    color: rgba(255,255,255,.68);
}
.footer__contact svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 4px; color: var(--gold); }
.footer__contact a { color: rgba(255,255,255,.85); font-weight: 600; }
.footer__contact a:hover { color: var(--gold-light); }
.footer__bottom {
    border-top: 1px solid rgba(255,255,255,.10);
    padding: 20px 0;
    font-size: 12.5px;
    color: rgba(255,255,255,.45);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.footer__bottom a:hover { color: var(--gold-light); }

/* ================================================================
   移动端底部一键拨号条
   ================================================================ */
.m-callbar {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    background: linear-gradient(135deg, var(--red-700), var(--red-900));
    border-top: 1px solid rgba(255,255,255,.15);
    box-shadow: 0 -8px 24px rgba(43,5,5,.35);
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
}
.m-callbar__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.m-callbar__text { line-height: 1.35; }
.m-callbar__label { font-size: 11.5px; color: rgba(255,255,255,.75); letter-spacing: 1px; }
.m-callbar__num {
    font-family: var(--font-serif);
    font-size: 20px;
    font-weight: 700;
    color: var(--gold-light);
    letter-spacing: 1px;
}
.m-callbar__btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 22px;
    font-size: 15px;
    font-weight: 700;
    color: var(--red-900);
    background: linear-gradient(135deg, var(--gold-light), var(--gold));
    border-radius: var(--radius);
}
.m-callbar__btn svg { width: 16px; height: 16px; }

/* ================================================================
   返回顶部
   ================================================================ */
.back-to-top {
    position: fixed;
    right: 22px;
    bottom: 90px;
    z-index: 900;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    background: linear-gradient(135deg, var(--red-600), var(--red-800));
    border-radius: var(--radius);
    box-shadow: var(--shadow-red);
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px);
    transition: var(--transition);
}
.back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top svg { width: 20px; height: 20px; }
.back-to-top:hover { transform: translateY(-3px); }

/* ================================================================
   滚动进入动画（JS 启用，JS 失效时内容完整显示）
   ================================================================ */
html.js [data-animate] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1);
}
html.js [data-animate].fade-in-up {
    opacity: 1;
    transform: translateY(0);
}
html.js [data-animate][data-delay="1"] { transition-delay: .1s; }
html.js [data-animate][data-delay="2"] { transition-delay: .2s; }
html.js [data-animate][data-delay="3"] { transition-delay: .3s; }
html.js [data-animate][data-delay="4"] { transition-delay: .4s; }
html.js [data-animate][data-delay="5"] { transition-delay: .5s; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    html.js [data-animate] { opacity: 1; transform: none; transition: none; }
}

/* ================================================================
   响应式适配
   ================================================================ */
@media (max-width: 1080px) {
    .svc-grid, .why-grid, .law-grid { grid-template-columns: repeat(2, 1fr); }
    .flow-grid { grid-template-columns: repeat(2, 1fr); }
    .flow-item::after { display: none; }
    .navbar__menu { display: none; }
    .navbar__toggle { display: flex; }
    .navbar__menu-mobile { display: block; }
    .navbar__cta { display: none; }
}

@media (max-width: 860px) {
    :root { --header-h: 64px; }
    .section { padding: 72px 0; }
    .hero__inner { padding: 60px 0 84px; }
    .hero-stats-band { margin-top: -70px; }
    .hero__stats { grid-template-columns: repeat(2, 1fr); }
    .hero__stat + .hero__stat { border-left: none; }
    .hero__stat:nth-child(even) { border-left: 1px solid rgba(255,255,255,.14); }
    .hero__stat:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.14); }
    .contact-info { grid-template-columns: 1fr; }
    .cta-band__inner { flex-direction: column; align-items: flex-start; }
    .cta-band__phone { align-items: flex-start; }
    .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 640px) {
    body { font-size: 15px; }
    .container { padding: 0 18px; }
    .topbar__right { display: none; }
    .topbar__inner { justify-content: center; }
    .svc-grid, .why-grid, .law-grid, .flow-grid { grid-template-columns: 1fr; }
    .hero__actions .btn { width: 100%; }
    .hero__phone-line { flex-direction: column; gap: 4px; align-items: flex-start; }
    .section { padding: 60px 0; }
    .sec-head { margin-bottom: 40px; }
    .faq-item__body-inner { padding: 14px 18px 18px 18px; }
    .notice-box { padding: 26px 22px; }
    .contact-info { padding: 32px 26px; }
    .footer__grid { grid-template-columns: 1fr; gap: 28px; }
    .footer__bottom { justify-content: center; text-align: center; }
    .m-callbar { display: block; }
    body { padding-bottom: 68px; }
    .hero-stats-band { margin-top: -56px; }
    .back-to-top { bottom: 84px; right: 16px; width: 40px; height: 40px; }
    .brand__name { font-size: 16px; }
    .brand__sub { letter-spacing: 1.5px; }
}

@media (max-width: 380px) {
    .brand__sub { display: none; }
    .m-callbar__num { font-size: 17px; }
    .m-callbar__btn { padding: 10px 16px; font-size: 14px; }
}

/* 打印优化 */
@media print {
    .navbar, .topbar, .m-callbar, .back-to-top, .cta-band { display: none !important; }
    body { background: #fff; }
}