/* ===== 律师网站建设 · 深蓝鎏金高端主题 ===== */
:root{
    --ls-navy:#0a1430;
    --ls-navy-2:#0e1c40;
    --ls-navy-3:#14264f;
    --ls-gold:#c9a86a;
    --ls-gold-2:#e3c489;
    --ls-grad:linear-gradient(135deg,#d8b878 0%,#c9a86a 50%,#b8924f 100%);
    --ls-gold-soft:rgba(201,168,106,.12);
    --ls-ink:#1c2438;
    --ls-sub:#5c6580;
    --ls-line:#e9ecf3;
    --ls-white:#fff;
    --ls-radius:18px;
    --ls-shadow:0 18px 40px rgba(14,28,64,.10);
    --ls-shadow-lg:0 26px 60px rgba(14,28,64,.18);
}
*{box-sizing:border-box;}
body{font-family:"Microsoft YaHei","PingFang SC","Helvetica Neue",Arial,sans-serif;color:var(--ls-ink);background:#fff;}

/* ===== 通用 ===== */
.ls-sec{position:relative;padding:100px 0;}
.ls-sec.alt{background:#f6f7fb;}
.ls-wrap{width:100%;max-width:none;margin:0 auto;padding:0 clamp(20px,5vw,90px);}
.ls-head{text-align:center;max-width:760px;margin:0 auto 56px;}
.ls-eyebrow{
    display:inline-flex;align-items:center;gap:8px;
    font-size:13px;font-weight:700;letter-spacing:2px;
    color:var(--ls-gold);text-transform:uppercase;margin-bottom:14px;
}
.ls-eyebrow.c{color:var(--ls-gold);}
.ls-head h2{margin:0 0 14px;font-size:clamp(26px,3.4vw,40px);font-weight:800;color:var(--ls-ink);letter-spacing:.5px;}
.ls-head p{margin:0;font-size:15px;line-height:1.8;color:var(--ls-sub);}

/* ===== 面包屑导航 ===== */
.service-tags{
    width:100%;padding:26px 0;background:#fff;
    border-bottom:1px solid var(--ls-line);
    box-shadow:0 8px 26px rgba(14,28,64,.05);position:relative;z-index:3;
}
.service-tags .wrap{max-width:none;padding:0 clamp(20px,5vw,90px);}
.service-tags .tags-container{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;}
.service-tags .tag-item{
    padding:10px 24px;background:#f4f6fb;border:1px solid var(--ls-line);
    border-radius:999px;font-size:14px;color:var(--ls-sub);text-decoration:none;transition:.3s;
}
.service-tags .tag-item:hover{background:var(--ls-grad);color:#fff;border-color:transparent;transform:translateY(-2px);}
.service-tags .tag-item.active{background:var(--ls-grad);color:#fff;border-color:transparent;box-shadow:0 8px 20px rgba(201,168,106,.4);}

/* ===== Hero 横幅（非全屏） ===== */
.ls-hero{position:relative;overflow:hidden;background:radial-gradient(120% 120% at 50% 0%,var(--ls-navy-3) 0%,var(--ls-navy-2) 45%,var(--ls-navy) 100%);padding:180px 20px 110px;}
.ls-hero-bg{position:absolute;inset:0;overflow:hidden;}
.ls-hero-bg .ls-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:54px 54px;mask-image:radial-gradient(80% 70% at 50% 35%,#000 30%,transparent 100%);opacity:.6;}
.ls-blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;}
.ls-blob-1{width:420px;height:420px;background:#c9a86a;top:-120px;right:-80px;opacity:.35;}
.ls-blob-2{width:360px;height:360px;background:#1f3a78;bottom:-140px;left:-60px;}
.ls-blob-3{width:280px;height:280px;background:#7a5cc0;top:40%;left:55%;opacity:.25;}
.ls-watermark{position:absolute;right:6%;top:50%;transform:translateY(-50%);font-size:min(42vw,520px);color:rgba(201,168,106,.06);z-index:0;}
.ls-hero-inner{position:relative;z-index:2;max-width:1040px;margin:0 auto;text-align:center;color:#fff;}
.ls-eyebrow{color:var(--ls-gold-2);}
.ls-hero-title{margin:0 0 20px;font-size:clamp(32px,5.4vw,58px);font-weight:800;line-height:1.2;letter-spacing:1px;}
.ls-hero-title span{background:var(--ls-grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
.ls-hero-sub{margin:0 auto 38px;max-width:680px;font-size:clamp(15px,1.8vw,18px);line-height:1.9;color:rgba(255,255,255,.78);}
.ls-hero-stats{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;margin-bottom:40px;}
.ls-stat{flex:1;min-width:150px;max-width:230px;padding:22px 18px;background:rgba(255,255,255,.06);border:1px solid rgba(201,168,106,.25);border-radius:16px;backdrop-filter:blur(6px);}
.ls-stat strong{display:block;font-size:34px;font-weight:800;background:var(--ls-grad);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1.1;}
.ls-stat span{font-size:13.5px;color:rgba(255,255,255,.7);margin-top:6px;display:block;}
.ls-hero-btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;}
.ls-btn-primary,.ls-btn-outline{display:inline-flex;align-items:center;gap:10px;padding:15px 36px;border-radius:999px;font-size:16px;font-weight:700;text-decoration:none;transition:.35s cubic-bezier(.2,.7,.2,1);cursor:pointer;border:none;}
.ls-btn-primary{background:var(--ls-grad);color:#1a1206;box-shadow:0 14px 32px rgba(201,168,106,.4);}
.ls-btn-primary:hover{transform:translateY(-3px);box-shadow:0 20px 44px rgba(201,168,106,.55);}
.ls-btn-outline{background:transparent;color:#fff;border:1.5px solid rgba(201,168,106,.55);}
.ls-btn-outline:hover{background:rgba(201,168,106,.15);border-color:var(--ls-gold);transform:translateY(-3px);}

/* ===== 核心优势 ===== */
.ls-why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;}
.ls-why-card{position:relative;background:#fff;border:1px solid var(--ls-line);border-radius:var(--ls-radius);padding:38px 30px 32px;transition:.4s cubic-bezier(.2,.7,.2,1);overflow:hidden;}
.ls-why-card::before{content:'';position:absolute;left:0;top:0;width:100%;height:3px;background:var(--ls-grad);transform:scaleX(0);transform-origin:left;transition:.4s;}
.ls-why-card:hover{transform:translateY(-8px);box-shadow:var(--ls-shadow-lg);border-color:transparent;}
.ls-why-card:hover::before{transform:scaleX(1);}
.ls-why-ic{width:64px;height:64px;margin-bottom:20px;display:flex;align-items:center;justify-content:center;font-size:26px;color:var(--ls-gold);border-radius:16px;background:var(--ls-gold-soft);border:1px solid rgba(201,168,106,.25);transition:.4s;}
.ls-why-card:hover .ls-why-ic{background:var(--ls-grad);color:#1a1206;border-color:transparent;transform:rotate(-6deg) scale(1.05);}
.ls-why-card h3{margin:0 0 12px;font-size:19px;font-weight:800;color:var(--ls-ink);}
.ls-why-card p{margin:0;font-size:13.5px;line-height:1.8;color:var(--ls-sub);}

/* ===== 核心服务 ===== */
.ls-service-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;}
.ls-service-card{position:relative;background:#fff;border:1px solid var(--ls-line);border-radius:var(--ls-radius);padding:34px 28px 28px;transition:.4s cubic-bezier(.2,.7,.2,1);display:flex;flex-direction:column;}
.ls-service-card:hover{transform:translateY(-8px);box-shadow:var(--ls-shadow-lg);border-color:rgba(201,168,106,.5);}
.ls-service-ic{width:60px;height:60px;margin-bottom:18px;display:flex;align-items:center;justify-content:center;font-size:24px;color:var(--ls-gold);border-radius:15px;background:var(--ls-gold-soft);border:1px solid rgba(201,168,106,.22);}
.ls-service-card h3{margin:0 0 18px;font-size:20px;font-weight:800;color:var(--ls-ink);}
.ls-check{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:11px;flex:1;}
.ls-check li{position:relative;padding-left:26px;font-size:13.5px;color:#46506a;line-height:1.5;}
.ls-check li::before{content:'\f00c';font-family:'Font Awesome 7 Free';font-weight:900;position:absolute;left:0;top:1px;width:18px;height:18px;display:flex;align-items:center;justify-content:center;font-size:10px;color:#fff;background:var(--ls-grad);border-radius:50%;}
.ls-service-foot{display:flex;align-items:center;justify-content:space-between;padding-top:18px;border-top:1px dashed var(--ls-line);}
.ls-price{font-size:24px;font-weight:800;color:var(--ls-ink);}
.ls-price small{font-size:13px;font-weight:600;color:var(--ls-sub);margin-left:3px;}
.ls-service-foot a{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:700;color:var(--ls-gold);text-decoration:none;transition:.3s;}
.ls-service-foot a:hover{gap:11px;}

/* ===== 为什么要建网站 ===== */
.ls-whybuild-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;}
.ls-whybuild-item{display:flex;gap:22px;align-items:flex-start;background:#fff;border:1px solid var(--ls-line);border-radius:var(--ls-radius);padding:32px 30px;transition:.4s cubic-bezier(.2,.7,.2,1);}
.ls-whybuild-item:hover{transform:translateY(-6px);box-shadow:var(--ls-shadow-lg);border-color:rgba(201,168,106,.4);}
.ls-wnum{font-size:42px;font-weight:800;line-height:1;background:var(--ls-grad);-webkit-background-clip:text;background-clip:text;color:transparent;flex-shrink:0;}
.ls-wbody h3{margin:0 0 10px;font-size:18px;font-weight:800;color:var(--ls-ink);}
.ls-wbody p{margin:0;font-size:13.5px;line-height:1.8;color:var(--ls-sub);}

/* ===== 建站流程（横向步骤条 + 移动端竖向时间轴） ===== */
.ls-sec.ls-flow{background:#f4f5f7;padding:120px 0 100px;}
.ls-flow{position:relative;display:flex;justify-content:center;width:100%;max-width:none;margin:0 auto;padding:14px 0 4px;}
.ls-flow-step{position:relative;flex:1;padding:0 14px;text-align:center;}
.ls-flow-node{position:relative;z-index:2;display:flex;justify-content:center;margin-bottom:26px;}
.ls-flow-num{width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:23px;font-weight:800;font-style:italic;color:#1a1206;background:var(--ls-grad);box-shadow:0 16px 32px rgba(201,168,106,.42),0 0 0 9px #fff,0 0 0 10px rgba(201,168,106,.25);transition:.45s cubic-bezier(.2,.7,.2,1);}
.ls-flow-card{position:relative;background:#fff;border:1px solid var(--ls-line);border-radius:18px;padding:26px 22px 24px;box-shadow:var(--ls-shadow);transition:.45s cubic-bezier(.2,.7,.2,1);}
.ls-flow-ic{width:52px;height:52px;margin:0 auto 16px;display:flex;align-items:center;justify-content:center;font-size:21px;color:var(--ls-gold);border-radius:14px;background:var(--ls-gold-soft);border:1px solid rgba(201,168,106,.22);transition:.45s cubic-bezier(.2,.7,.2,1);}
.ls-flow-card h4{margin:0 0 10px;font-size:18px;font-weight:800;color:var(--ls-ink);}
.ls-flow-card p{margin:0;font-size:13px;line-height:1.8;color:var(--ls-sub);}
.ls-flow-card:hover{transform:translateY(-8px);border-color:rgba(201,168,106,.5);box-shadow:var(--ls-shadow-lg);}
.ls-flow-step:hover .ls-flow-num{transform:scale(1.08) rotate(-4deg);}
.ls-flow-card:hover .ls-flow-ic{background:var(--ls-grad);color:#1a1206;transform:rotate(-6deg) scale(1.05);}

/* ===== 成功案例 ===== */
.ls-case-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;}
.ls-case-card{background:#fff;border:1px solid var(--ls-line);border-radius:var(--ls-radius);overflow:hidden;transition:.4s cubic-bezier(.2,.7,.2,1);}
.ls-case-card:hover{transform:translateY(-10px);box-shadow:var(--ls-shadow-lg);border-color:transparent;}
.ls-case-cover{position:relative;height:180px;overflow:hidden;display:flex;align-items:flex-end;padding:18px;}
.ls-cv-1{background:linear-gradient(135deg,#14264f,#264d8f);}
.ls-cv-2{background:linear-gradient(135deg,#1d2b1c,#3c6b3a);}
.ls-cv-3{background:linear-gradient(135deg,#2a1d3d,#5b3c8f);}
.ls-cv-4{background:linear-gradient(135deg,#3a2a14,#8f6b2f);}
.ls-case-cover::after{content:'';position:absolute;inset:0;background:radial-gradient(120% 80% at 80% 0%,rgba(255,255,255,.18),transparent 60%);}
.ls-case-cat{position:relative;z-index:2;display:inline-flex;align-items:center;gap:7px;padding:7px 15px;border-radius:999px;font-size:13px;font-weight:700;color:#1a1206;background:var(--ls-grad);}
.ls-case-no{position:absolute;top:14px;right:20px;z-index:2;font-size:40px;font-weight:800;color:rgba(255,255,255,.35);font-style:italic;}
.ls-case-body{padding:24px 22px 26px;}
.ls-case-body h3{margin:0 0 8px;font-size:18px;font-weight:800;color:var(--ls-ink);}
.ls-case-desc{margin:0 0 16px;font-size:13px;line-height:1.7;color:var(--ls-sub);}
.ls-case-stats{display:flex;gap:14px;padding:14px 0;margin-bottom:14px;border-top:1px solid var(--ls-line);border-bottom:1px solid var(--ls-line);}
.ls-case-stats div{flex:1;text-align:center;}
.ls-case-stats strong{display:block;font-size:19px;font-weight:800;background:var(--ls-grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
.ls-case-stats span{font-size:12px;color:var(--ls-sub);}
.ls-case-tags{display:flex;flex-wrap:wrap;gap:8px;}
.ls-case-tags span{padding:5px 13px;font-size:12px;font-weight:600;color:var(--ls-gold);background:var(--ls-gold-soft);border-radius:999px;}

/* ===== 常见问题 ===== */
.ls-faq-list{max-width:880px;margin:0 auto;display:grid;gap:16px;}
.ls-faq-item{background:#fff;border:1px solid var(--ls-line);border-radius:14px;overflow:hidden;transition:.3s;}
.ls-faq-item[open]{border-color:rgba(201,168,106,.5);box-shadow:var(--ls-shadow);}
.ls-faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 26px;font-size:16px;font-weight:700;color:var(--ls-ink);}
.ls-faq-item summary::-webkit-details-marker{display:none;}
.ls-faq-item summary i{font-size:14px;color:var(--ls-gold);transition:.3s;flex-shrink:0;}
.ls-faq-item[open] summary i{transform:rotate(180deg);}
.ls-faq-ans{padding:0 26px 22px;font-size:14px;line-height:1.85;color:var(--ls-sub);}

/* ===== CTA ===== */
.ls-cta{position:relative;overflow:hidden;background:radial-gradient(120% 120% at 50% 100%,var(--ls-navy-3) 0%,var(--ls-navy-2) 45%,var(--ls-navy) 100%);padding:100px 20px;}
.ls-cta-bg{position:absolute;inset:0;overflow:hidden;}
.ls-cta-bg .ls-blob-1{width:380px;height:380px;background:#c9a86a;top:-120px;left:-80px;opacity:.3;}
.ls-cta-bg .ls-blob-2{width:340px;height:340px;background:#1f3a78;bottom:-120px;right:-60px;opacity:.6;}
.ls-cta-content{position:relative;z-index:2;max-width:760px;margin:0 auto;text-align:center;color:#fff;}
.ls-cta-content h2{margin:0 0 14px;font-size:clamp(24px,3.4vw,36px);font-weight:800;letter-spacing:.5px;}
.ls-cta-content p{margin:0 0 34px;font-size:16px;color:rgba(255,255,255,.78);}
.ls-cta-btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-bottom:34px;}
.ls-cta-contact{display:flex;gap:30px;justify-content:center;flex-wrap:wrap;}
.ls-contact-item{display:inline-flex;align-items:center;gap:10px;font-size:14px;color:rgba(255,255,255,.8);}
.ls-contact-item i{color:var(--ls-gold-2);font-size:16px;}

/* ===== 滚动揭示动画 ===== */
.ls-reveal{opacity:0;transform:translateY(34px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);}
.ls-reveal.in{opacity:1;transform:none;}

/* ===== 响应式 ===== */
@media (max-width:1100px){
    .ls-why-grid,.ls-service-grid,.ls-whybuild-grid,.ls-case-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:768px){
    .ls-sec{padding:64px 16px;}
    .ls-head{margin-bottom:40px;}
    .ls-hero{padding:96px 18px 72px;}
    .ls-stat strong{font-size:28px;}
    .ls-why-grid,.ls-service-grid,.ls-whybuild-grid,.ls-case-grid{grid-template-columns:1fr;}
    .ls-flow{flex-direction:column;max-width:440px;margin:0 auto;padding-left:0;gap:6px;}
    .ls-flow-step{flex:none;padding:0 0 26px 78px;text-align:left;}
    .ls-flow-node{position:absolute;left:0;top:0;margin:0;}
    .ls-flow-num{width:56px;height:56px;font-size:19px;box-shadow:0 12px 24px rgba(201,168,106,.42),0 0 0 8px #fff,0 0 0 9px rgba(201,168,106,.25);}
    .ls-flow-ic{margin:0 0 14px;}
    .service-tags{padding:20px 0;}
    .service-tags .tags-container{gap:10px;}
    .service-tags .tag-item{padding:8px 16px;font-size:13px;}
    .ls-cta{padding:72px 18px;}
}
@media (max-width:480px){
    .ls-hero-stats{gap:12px;}
    .ls-stat{min-width:120px;padding:18px 12px;}
    .ls-cta-contact{gap:16px;flex-direction:column;}
}