/* ============================================================
   LAICL 数字工作室 — laicl.cn
   视觉概念：工程图纸（辽ICP · 辽宁工业底蕴）
   图纸白 / 墨线 / 晒图蓝 / 审图红 · 系统字体栈 · 零外部依赖
   ============================================================ */

:root{
  --paper:#FAFBF9;        /* 图纸白 */
  --ink:#13202E;          /* 墨线 */
  --blue:#0F5AA8;         /* 晒图蓝 */
  --blue-soft:#EAF1F8;    /* 浅晒图 */
  --red:#C23A2B;          /* 审图红（点缀） */
  --line:#D8DEE5;         /* 细网格线 */
  --slate:#5A6B7D;        /* 底灰文字 */
  --slate-deep:#44607C;   /* 页脚可读灰蓝 */
  --grid:rgba(19,32,46,.045);
  --grid-major:rgba(19,32,46,.085);
  --mono:ui-monospace,'Cascadia Mono',Consolas,'Courier New',monospace;
  --sans:'PingFang SC','Microsoft YaHei','Noto Sans SC',system-ui,-apple-system,sans-serif;
  --pad-x:clamp(1.25rem,5vw,4.5rem);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
  padding:clamp(10px,2vw,22px);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--blue);color:#fff;}
a{color:inherit;}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;}
.mono{font-family:var(--mono);}

/* ---------- 图纸外框 ---------- */
.sheet{
  border:1.5px solid var(--ink);
  min-height:calc(100vh - 2 * clamp(10px,2vw,22px));
  display:flex;
  flex-direction:column;
  position:relative;
}
.sheet::after{ /* 图纸角标 */
  content:"";
  position:absolute;
  top:8px;left:8px;
  width:14px;height:14px;
  border-top:1.5px solid var(--red);
  border-left:1.5px solid var(--red);
  pointer-events:none;
}
main{flex:1;}

/* ---------- 顶栏 ---------- */
.site-head{
  position:sticky;top:0;z-index:10;
  display:flex;align-items:center;gap:clamp(1rem,3vw,2.5rem);
  padding:16px var(--pad-x);
  background:rgba(250,251,249,.94);
  backdrop-filter:blur(6px);
  border-bottom:1.5px solid var(--ink);
}
.brand{
  display:flex;align-items:center;gap:10px;
  text-decoration:none;font-weight:700;font-size:17px;letter-spacing:.06em;
}
.brand-mark{
  width:11px;height:11px;flex:none;
  border:2px solid var(--ink);
  transform:rotate(45deg);
  position:relative;
}
.brand-mark::after{
  content:"";position:absolute;inset:2px;background:var(--red);
}
.brand-sub{
  font-weight:400;font-size:12px;color:var(--slate);letter-spacing:.2em;
  border-left:1px solid var(--line);padding-left:10px;
}
.site-nav{display:flex;gap:clamp(1rem,2.5vw,2rem);margin-left:auto;}
.site-nav a{
  font-family:var(--mono);font-size:13px;letter-spacing:.15em;
  color:var(--slate);text-decoration:none;padding:4px 0;
  border-bottom:1.5px solid transparent;
}
.site-nav a:hover{color:var(--ink);}
.site-nav a[aria-current="true"]{color:var(--blue);border-bottom-color:var(--blue);}
.head-cta{
  font-size:13px;letter-spacing:.08em;text-decoration:none;
  border:1.5px solid var(--ink);padding:7px 16px;
  transition:background .2s,color .2s,border-color .2s;
}
.head-cta:hover{background:var(--ink);color:var(--paper);}

/* ---------- 首屏 ---------- */
.hero{
  padding:clamp(4rem,10vw,7.5rem) var(--pad-x) clamp(2.5rem,5vw,4rem);
  background-image:
    linear-gradient(var(--grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid) 1px,transparent 1px),
    linear-gradient(var(--grid-major) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-major) 1px,transparent 1px);
  background-size:16px 16px,16px 16px,80px 80px,80px 80px;
}
.eyebrow{
  font-family:var(--mono);font-size:12px;letter-spacing:.32em;
  color:var(--blue);margin-bottom:1.6rem;
}
.hero h1{
  font-size:clamp(2rem,5.6vw,3.9rem);
  line-height:1.22;font-weight:700;letter-spacing:.015em;
  max-width:18em;
}
.hero-sub{
  margin-top:1.6rem;max-width:36em;
  font-size:clamp(.95rem,1.4vw,1.08rem);color:var(--slate);
}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:2.4rem;}
.btn{
  display:inline-block;padding:13px 26px;
  font-size:14px;letter-spacing:.06em;text-decoration:none;
  border:1.5px solid var(--ink);border-radius:2px;
  transition:background .2s,color .2s,border-color .2s;
}
.btn-primary{background:var(--ink);color:var(--paper);}
.btn-primary:hover{background:var(--blue);border-color:var(--blue);}
.btn-ghost{color:var(--ink);}
.btn-ghost:hover{color:var(--blue);border-color:var(--blue);}

/* 尺寸标注线 */
.dim-line{display:flex;align-items:center;margin-top:clamp(2.5rem,6vw,4.5rem);color:var(--slate);}
.dim-tick{width:1px;height:12px;background:var(--ink);flex:none;}
.dim-label{
  flex:1;display:flex;align-items:center;gap:14px;margin:0 12px;
  font-family:var(--mono);font-size:11px;letter-spacing:.3em;
}
.dim-label::before,.dim-label::after{
  content:"";height:1px;flex:1;background:var(--ink);opacity:.45;
}

/* 图签 */
.title-block{
  border-collapse:collapse;
  margin:1.4rem 0 0 auto;
  font-size:12px;letter-spacing:.04em;
}
.title-block th,.title-block td{
  border:1px solid var(--ink);padding:6px 16px;text-align:left;
}
.title-block th{
  font-family:var(--mono);font-weight:400;
  color:var(--slate);background:rgba(19,32,46,.045);
  letter-spacing:.12em;white-space:nowrap;
}
.title-block td{min-width:9em;background:var(--paper);}

/* ---------- 分区 ---------- */
.sec{
  padding:clamp(3.5rem,8vw,6rem) var(--pad-x);
  border-top:1px solid var(--line);
}
.sec-alt{background:#F3F7FB;}
.sec-head{margin-bottom:clamp(2rem,4vw,3rem);}
.zone{
  display:inline-block;
  font-size:12px;letter-spacing:.3em;color:var(--blue);
  margin-bottom:.9rem;
  padding-left:.9em;border-left:3px solid var(--red);
}
.sec-head h2{font-size:clamp(1.5rem,3vw,2.1rem);font-weight:700;letter-spacing:.02em;}
.sec-note{margin-top:.5rem;color:var(--slate);font-size:.95rem;}

/* 业务卡片：细线分割的图纸网格 */
.cards{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;background:var(--line);
  border:1px solid var(--line);
}
.card{
  background:var(--paper);padding:clamp(1.5rem,3vw,2.2rem);
  transition:background .2s,box-shadow .2s;
}
.card:hover{background:#fff;box-shadow:inset 0 3px 0 var(--blue);}
.card-no{font-size:12px;letter-spacing:.25em;color:var(--blue);margin-bottom:1.1rem;}
.card h3{font-size:1.15rem;font-weight:700;margin-bottom:.7rem;}
.card p{font-size:.93rem;color:var(--slate);}

/* 关于 */
.about-grid{
  display:grid;grid-template-columns:1fr 1.15fr;
  gap:clamp(2rem,5vw,4rem);align-items:start;
}
.about-text p{color:var(--slate);font-size:.98rem;}
.about-text p+p{margin-top:1rem;}
.steps{list-style:none;}
.steps li{
  display:grid;grid-template-columns:auto 1fr;gap:1.2rem;
  padding:1.2rem 0;border-top:1px solid var(--line);
}
.steps li:first-child{border-top:1.5px solid var(--ink);}
.step-no{font-size:1.05rem;color:var(--blue);padding-top:2px;}
.steps h4{font-size:1rem;font-weight:700;margin-bottom:.25rem;}
.steps p{font-size:.9rem;color:var(--slate);}

/* 联系 */
.contact-body{padding-top:.5rem;}
.contact-mail{
  display:inline-block;
  font-size:clamp(1.5rem,4.5vw,3rem);font-weight:700;letter-spacing:.02em;
  color:var(--ink);text-decoration:none;
  border-bottom:3px solid var(--blue);padding-bottom:.15em;
  transition:color .2s,border-color .2s;
  word-break:break-all;
}
.contact-mail:hover{color:var(--blue);}
.contact-meta{margin-top:1.4rem;font-size:13px;letter-spacing:.1em;color:var(--slate);}

/* ---------- 页脚（备案信息） ---------- */
.site-foot{border-top:1.5px solid var(--ink);background:var(--paper);}
.foot-inner{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:10px 14px;
  padding:22px var(--pad-x);
  font-size:13px;letter-spacing:.05em;color:var(--slate);
}
.foot-sep{color:var(--line);}
.beian{
  color:var(--slate-deep);text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .2s,border-color .2s;
}
.beian:hover{color:var(--blue);border-bottom-color:var(--blue);}

/* ---------- 入场动画 ---------- */
html.js .reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease;}
html.js .reveal.is-in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  html.js .reveal{opacity:1;transform:none;transition:none;}
}

/* ---------- 响应式 ---------- */
@media (max-width:880px){
  .cards{grid-template-columns:1fr;}
  .about-grid{grid-template-columns:1fr;}
  .title-block{margin-left:0;}
}
@media (max-width:640px){
  .site-nav{display:none;}
  .brand-sub{display:none;}
  .hero{padding-top:3.2rem;}
  .title-block th,.title-block td{padding:5px 10px;}
  .title-block td{min-width:0;}
}