/* =========================================================
   朗朗和米家全屋智能 · 新站样式
   风格：清爽科技 · 智能家居感 · 青绿色系
   支持桌面 + 手机
   ========================================================= */

:root{
  --bg:#f5fbf9;            /* 页面背景 浅青白 */
  --card:#ffffff;
  --ink:#12211d;           /* 主文字 深青黑 */
  --muted:#5c7a72;         /* 次要文字 */
  --brand:#00b386;         /* 主色 青绿(米家系智能感) */
  --brand-dk:#008f6a;
  --accent:#ff9f43;        /* 强调 暖橙(点缀) */
  --line:#dcecea;
  --radius:18px;
  --shadow:0 10px 30px rgba(0,120,90,.10);
}
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  font-family:"PingFang SC","Microsoft YaHei","Segoe UI",system-ui,sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
a{ color:var(--brand-dk); text-decoration:none; }
.wrap{ max-width:1060px; margin:0 auto; padding:0 22px; }

/* ---------- 顶栏 ---------- */
.site-head{
  position:sticky; top:0; z-index:50;
  background:rgba(245,251,249,.85);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav{ display:flex; align-items:center; justify-content:space-between; height:64px; }
.brand{ display:flex; align-items:center; gap:10px; font-weight:800; font-size:18px; color:var(--ink); }
.brand .dot{
  width:34px;height:34px;border-radius:10px;flex:none;
  background:linear-gradient(135deg,var(--brand),#2fd4b0);
  display:grid;place-items:center;color:#fff;font-size:19px;
}
.nav-links{ display:flex; gap:6px; }
.nav-links a{
  padding:8px 14px; border-radius:10px; color:var(--ink); font-weight:600; font-size:15px;
}
.nav-links a:hover{ background:#e6f6f1; color:var(--brand-dk); }
.nav-links a.active{ background:var(--brand); color:#fff; }

/* ---------- 首页 Hero ---------- */
.hero{
  position:relative; overflow:hidden; padding:64px 0 30px;
}
.hero::before{
  content:""; position:absolute; right:-120px; top:-120px;
  width:360px;height:360px;border-radius:50%;
  background:radial-gradient(circle,#c9f4e7,#e4faf3 60%,transparent 70%);
}
.hero .wrap{ position:relative; }
.eyebrow{
  display:inline-block; padding:5px 14px; border-radius:999px;
  background:#e3f7f0; color:var(--brand-dk); font-size:13px; font-weight:700;
  margin-bottom:16px;
}
h1.site-title{
  font-size:clamp(30px,5.2vw,50px); line-height:1.16; font-weight:900; letter-spacing:.5px;
}
h1.site-title .hilite{ color:var(--brand); }
.hero-desc{ margin-top:16px; max-width:600px; color:var(--muted); font-size:17px; }
.hero-actions{ margin-top:26px; display:flex; gap:14px; flex-wrap:wrap; }
.btn{
  display:inline-flex; align-items:center; gap:8px; font-weight:700;
  padding:12px 22px; border-radius:14px; transition:.18s; cursor:pointer;
}
.btn-primary{ background:var(--brand); color:#fff; }
.btn-primary:hover{ background:var(--brand-dk); transform:translateY(-2px); }
.btn-ghost{ background:transparent; border:2px solid var(--brand); color:var(--brand-dk); }
.btn-ghost:hover{ background:#e3f7f0; }

/* ---------- 分区 ---------- */
section{ padding:42px 0; }
.sec-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:22px; }
h2.sec-title{ font-size:26px; font-weight:800; }
h2.sec-title::before{ content:"◆"; color:var(--brand); margin-right:8px; font-size:18px; }
.sec-more{ font-size:14px; color:var(--brand-dk); font-weight:600; }

/* ---------- 卡片网格 ---------- */
.grid{ display:grid; gap:20px; }
.g-3{ grid-template-columns:repeat(3,1fr); }
.g-2{ grid-template-columns:repeat(2,1fr); }
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:24px; box-shadow:var(--shadow); transition:.2s;
}
.card:hover{ transform:translateY(-4px); box-shadow:0 16px 40px rgba(0,120,90,.16); }
.card .ico{
  width:52px;height:52px;border-radius:14px;
  background:linear-gradient(135deg,#e3f7f0,#c9f4e7);
  display:grid;place-items:center;font-size:26px;margin-bottom:14px;
}
.card h3{ font-size:18px; margin-bottom:8px; }
.card p{ color:var(--muted); font-size:14.5px; }
.pill{ font-size:12px; }

/* ---------- 关于 ---------- */
.about-card{ display:flex; gap:26px; align-items:flex-start; flex-wrap:wrap; }
.avatar{
  width:140px;height:140px;border-radius:50%; object-fit:cover; flex:none;
  border:4px solid var(--brand);
}
.about-txt{ flex:1; min-width:240px; }
.about-txt p{ margin-bottom:12px; }
.about-txt ul{ padding-left:20px; color:var(--muted); }
.stat-row{ display:flex; gap:18px; flex-wrap:wrap; margin-top:14px; }
.stat{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:12px 18px; }
.stat b{ font-size:20px; color:var(--brand-dk); }

/* ---------- 常见区块共用 ---------- */
.tag{ display:inline-block; background:#eef7f4; color:var(--brand-dk); border-radius:8px;
  padding:2px 10px; font-size:12px; margin:0 6px 8px 0; font-weight:600; }

/* ---------- 页脚 ---------- */
.site-foot{ margin-top:50px; border-top:1px solid var(--line); padding:26px 0 40px; color:var(--muted); font-size:13px; text-align:center; }
.site-foot .links a{ margin:0 10px; }

/* ---------- 空状态 / 留言 ---------- */
.placeholder{
  border:1px dashed var(--line); border-radius:var(--radius); padding:34px; text-align:center; color:var(--muted);
}

/* 缩略卡片(视频/文章) */
.t-card .thumb{
  height:150px; border-radius:12px; margin-bottom:12px;
  background:linear-gradient(135deg,#d8f4ec,#b9ead9);
  display:grid;place-items:center;font-size:15px;color:var(--brand-dk);font-weight:600;
}

/* ---------- 手机适配 ---------- */
@media (max-width:720px){
  .g-3{ grid-template-columns:1fr; }
  .g-2{ grid-template-columns:1fr; }
  .nav-links a{ padding:8px 10px; font-size:14px; }
  .about-card{ flex-direction:column; align-items:center; text-align:center; }
  .about-txt ul{ text-align:left; }
  section{ padding:30px 0; }
}