/* ============================================================
   青岛铁瀚 · 企业信息导航 —— 样式表
   设计 Token 沿用铁瀚品牌（主色 #0666a4 / 辅色 #07869a）
   完整规范见 DESIGN_SPEC.md
   ============================================================ */

:root{
  /* 品牌色 */
  --th-blue-500:#1f80c0;
  --th-blue-600:#0666a4;   /* 铁瀚蓝 · 主色 */
  --th-blue-700:#055389;
  --th-teal-500:#07869a;   /* 青 · 辅色 */
  --th-teal-600:#066f80;

  /* 中性色 */
  --gray-50:#f6f8fa;
  --gray-100:#eef2f5;
  --gray-200:#dce3e8;
  --gray-400:#9aa7b1;
  --gray-600:#5b6b76;      /* 卡片次要文字，白底对比度 5.0:1 ✓AA */
  --gray-900:#0f1b24;      /* 卡片主文字，白底对比度 16:1 ✓AAA */
  --white:#ffffff;
  --alice:#eaf4fb;         /* 深底文字 */

  /* 语义色 */
  --success:#1f9d55;
  --warning:#c9760a;
  --danger:#d64545;

  /* 间距（4px 基准） */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px;
  --space-12:48px; --space-16:64px;

  /* 圆角 */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-pill:999px;

  /* 阴影 */
  --shadow-sm:0 1px 2px rgba(15,27,36,.06);
  --shadow-md:0 6px 16px rgba(15,27,36,.10);
  --shadow-lg:0 14px 30px rgba(6,102,164,.20);

  /* 字体 */
  --font-sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  /* 动效 */
  --t-fast:150ms ease;
  --t-normal:260ms cubic-bezier(.2,.7,.3,1);

  /* 布局 */
  --container:960px;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;}
body{
  font-family:var(--font-sans);
  color:var(--gray-900);
  background:var(--th-blue-700);
  min-height:100vh;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  position:relative;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none;}

/* ---------- 背景：品牌渐变 + 柔和光斑（GPU 友好，无 JS 依赖） ---------- */
.bg{
  position:fixed; inset:0; z-index:0; overflow:hidden;
  background:linear-gradient(135deg,#055389 0%,#0666a4 45%,#07869a 100%);
}
.bg::before,.bg::after{
  content:""; position:absolute; border-radius:50%;
  filter:blur(60px); opacity:.45; will-change:transform;
}
.bg::before{
  width:420px; height:420px; left:-80px; top:-60px;
  background:radial-gradient(circle,#1f80c0,transparent 70%);
  animation:float1 18s ease-in-out infinite alternate;
}
.bg::after{
  width:380px; height:380px; right:-60px; bottom:-40px;
  background:radial-gradient(circle,#0a98ad,transparent 70%);
  animation:float2 22s ease-in-out infinite alternate;
}
@keyframes float1{to{transform:translate(60px,40px) scale(1.1);}}
@keyframes float2{to{transform:translate(-50px,-30px) scale(1.08);}}

.page{
  position:relative; z-index:1;
  max-width:var(--container);
  margin:0 auto;
  padding:var(--space-10) var(--space-4) var(--space-8);
}

/* ---------- 头部 ---------- */
.hero{ text-align:center; color:var(--alice); margin-bottom:var(--space-8); }
.brand{
  display:inline-flex; align-items:center; gap:var(--space-3);
  margin-bottom:var(--space-5);
}
.brand__mark{
  width:44px; height:44px; border-radius:12px;
  display:grid; place-items:center;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.35);
  font-weight:700; font-size:18px; color:#fff;
  backdrop-filter:blur(4px);
}
.brand__name{ font-size:15px; font-weight:600; letter-spacing:.02em; }
.hero h1{
  font-size:clamp(28px,6vw,40px); font-weight:700;
  letter-spacing:.01em; margin-bottom:var(--space-3);
  color:#fff;
}
.hero p{
  font-size:clamp(14px,3.5vw,16px); color:rgba(234,244,251,.85);
  max-width:32rem; margin:0 auto;
}

/* ---------- 分组 ---------- */
.group{ margin-bottom:var(--space-8); }
.group__title{
  display:flex; align-items:center; gap:var(--space-2);
  color:var(--alice); font-size:14px; font-weight:600;
  letter-spacing:.08em;
  margin:0 var(--space-1) var(--space-4);
}
.group__title::before{
  content:""; width:4px; height:16px; border-radius:2px;
  background:rgba(255,255,255,.7);
}

/* ---------- 卡片网格（移动单列 → 桌面多列） ---------- */
.grid{
  display:grid; gap:var(--space-4);
  grid-template-columns:1fr;
}
@media (min-width:560px){ .grid{ grid-template-columns:repeat(2,1fr); } }

/* ---------- 导航卡片 ---------- */
.card{
  display:flex; align-items:center; gap:var(--space-4);
  background:var(--white);
  border:1px solid var(--gray-200);
  border-radius:var(--r-lg);
  padding:var(--space-3) var(--space-4);
  box-shadow:var(--shadow-sm);
  min-height:72px;                /* 触控目标 ≥44px ✓ */
  position:relative;
  transition:transform var(--t-normal),box-shadow var(--t-normal),border-color var(--t-fast);
}
.card::after{                       /* 左侧品牌描边（自带圆角，无需 overflow:hidden 裁切焦点环） */
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:linear-gradient(var(--th-blue-600),var(--th-teal-500));
  border-radius:var(--r-lg) 0 0 var(--r-lg);
  opacity:0; transition:opacity var(--t-fast);
}
.card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-lg);
  border-color:transparent;
}
.card:hover::after{ opacity:1; }

/* 卡片主点击区（图标+文字+箭头），整块可点 */
.card__main{
  flex:1 1 auto; min-width:0;
  display:flex; align-items:center; gap:var(--space-4);
  border-radius:var(--r-md);
  color:inherit;
}
.card__main:focus-visible{
  outline:3px solid var(--th-blue-600);
  outline-offset:-3px;
  box-shadow:0 0 0 4px rgba(31,128,192,.25);
}

.card__icon{
  flex:0 0 auto;
  width:48px; height:48px; border-radius:14px;
  display:grid; place-items:center;
  background:rgba(6,102,164,.10);
  color:var(--th-blue-600);
  transition:background var(--t-fast),color var(--t-fast);
}
.card:hover .card__icon{
  background:linear-gradient(135deg,var(--th-blue-600),var(--th-teal-500));
  color:#fff;
}
.card__icon svg{ width:24px; height:24px; }

.card__body{ flex:1 1 auto; min-width:0; }
.card__title{
  font-size:16px; font-weight:600; color:var(--gray-900);
  display:block; line-height:1.3;
}
.card__meta{
  font-size:13px; color:var(--gray-600);
  display:block; margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  font-variant-numeric:tabular-nums;
}
.card__action{
  flex:0 0 auto;
  font-size:13px; font-weight:600; color:var(--th-blue-600);
  display:inline-flex; align-items:center; gap:4px;
  transition:transform var(--t-fast),color var(--t-fast);
}
.card:hover .card__action{ transform:translateX(3px); color:var(--th-teal-600); }
.card__action svg{ width:16px; height:16px; }

/* ---------- 复制号码按钮（桌面端便捷操作；移动端用 tel: 直拨） ---------- */
.card__copy{
  flex:0 0 auto;
  display:none;                   /* 默认隐藏，≥560px 显示 */
  align-items:center;
  margin-left:var(--space-2);
  padding:8px 14px;
  min-height:36px;
  border:1px solid var(--gray-200);
  border-radius:var(--r-pill);
  background:var(--white);
  color:var(--th-blue-600);
  font:inherit; font-size:13px; font-weight:600;
  cursor:pointer;
  transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast);
}
.card__copy:hover{ background:rgba(6,102,164,.08); border-color:var(--th-blue-600); }
.card__copy:focus-visible{
  outline:3px solid var(--th-blue-600);
  outline-offset:2px;
}
.card__copy.is-copied{ background:var(--th-blue-600); color:#fff; border-color:var(--th-blue-600); }
@media (min-width:560px){ .card__copy{ display:inline-flex; } }

/* ---------- 页脚 ---------- */
.foot{
  text-align:center; color:rgba(234,244,251,.8);
  font-size:13px; margin-top:var(--space-10); line-height:1.8;
}
.foot a{ color:rgba(234,244,251,.95); text-decoration:underline; text-underline-offset:2px; }
.foot a:hover{ color:#fff; }

/* ---------- 降低动效偏好 ---------- */
@media (prefers-reduced-motion:reduce){
  .bg::before,.bg::after{ animation:none; }
  *{ transition:none !important; }
  .card:hover{ transform:none; }
}

/* ---------- 桌面微调 ---------- */
@media (min-width:1024px){
  .page{ padding-top:var(--space-16); }
}