/* ============================================================
   page-domain.css —— 域名注册服务页
   布局：首屏左文右域名徽章 / 后缀三卡 / 四条建议 /
        注册备案四步 / FAQ 手风琴 / 相关服务 / CTA
   ============================================================ */

/* ---------- ① 首屏 ---------- */
.d-hero{ padding:64px 0 40px; }
.d-hero-inner{ display:grid; grid-template-columns:1.1fr .9fr; gap:44px; align-items:center; }
.d-hero-tag{ margin-bottom:16px; }
.d-hero h1{ margin:6px 0 16px; }
.d-hero-sub{ font-size:16.5px; max-width:540px; margin-bottom:24px; }
.d-hero-btns{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:14px; }
.d-hero-note{ font-size:14px; }
.d-hero-note strong{ color:var(--pink-deep); font-size:16px; }

.d-badges{ display:flex; flex-direction:column; gap:12px; align-items:flex-start; max-width:340px; justify-self:center; }
.dg{
  font-weight:800; font-size:18px; padding:12px 26px; border-radius:99px;
  box-shadow:var(--shadow-s); transition:transform .25s ease;
}
.dg:hover{ transform:translateX(8px) rotate(-1deg); }
.dg-com{ background:linear-gradient(135deg,var(--pink),var(--pink-deep)); color:#fff; }
.dg-cn{ background:linear-gradient(135deg,var(--green),var(--green-deep)); color:#fff; margin-left:34px; }
.dg-net{ background:var(--white); color:var(--ink); border:2px dashed var(--pink-mid); }
.dg-comcn{ background:linear-gradient(135deg,var(--yellow),var(--yellow-deep)); color:#fff; margin-left:20px; }

/* ---------- 通用小标题 ---------- */
.d-sec-head{ text-align:center; max-width:620px; margin:0 auto 32px; }
.d-sec-head h2{ margin:10px 0 8px; }
.d-sec-head p{ color:var(--body); }

/* ---------- ② 后缀三卡 ---------- */
.d-ext{ padding:50px 0; }
.ext-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.ext-card{
  background:var(--white); border-radius:var(--r-m); padding:26px;
  border:2px dashed var(--green-mid); position:relative;
  transition:transform .25s ease, box-shadow .25s ease;
}
.ext-card:hover{ transform:translateY(-5px); box-shadow:0 14px 34px rgba(111,191,115,.18); }
.ext-hot{ border:2px solid var(--green); background:var(--green-soft); }
.ext-card h3{ font-size:24px; color:var(--green-deep); margin-bottom:10px; }
.ext-card p{ font-size:14px; }
.ext-tag{ display:inline-block; margin-top:8px; font-size:12.5px; font-weight:800; color:var(--pink-deep); background:var(--pink-soft); padding:4px 14px; border-radius:99px; }

/* ---------- ③ 四条建议 ---------- */
.d-tips{ padding:40px 0; }
.tips-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.tip-item{
  background:var(--white); border-radius:var(--r-m); padding:22px;
  text-align:center; border-bottom:6px solid var(--yellow);
  transition:transform .25s ease;
}
.tip-item:hover{ transform:translateY(-4px); }
.tip-item b{
  display:inline-flex; width:46px; height:46px; border-radius:50%;
  align-items:center; justify-content:center; font-size:20px;
  background:var(--yellow-soft); color:var(--yellow-deep); margin-bottom:10px;
}
.tip-item p{ font-size:13.5px; margin:0; }

/* ---------- ④ 注册备案流程 ---------- */
.d-proc{ padding:40px 0; }
.d-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.ds{
  background:var(--white); border-radius:var(--r-m); padding:22px 18px;
  border-left:6px solid var(--pink);
}
.ds:nth-child(2){ border-left-color:var(--yellow); }
.ds:nth-child(3){ border-left-color:var(--green); }
.ds:nth-child(4){ border-left-color:var(--pink); }
.ds b{
  display:inline-flex; width:34px; height:34px; border-radius:12px;
  align-items:center; justify-content:center; background:var(--pink-soft);
  color:var(--pink-deep); font-size:15px; margin-bottom:10px;
}
.ds h3{ font-size:16px; margin-bottom:6px; }
.ds p{ font-size:13.5px; margin:0; }

/* ---------- ⑤ FAQ ---------- */
.d-faq{ padding:40px 0; }
.d-faq-wrap{ max-width:780px; margin:0 auto; }
.d-item{
  background:var(--white); border-radius:var(--r-m); margin-bottom:12px;
  border:2px dashed var(--yellow-soft); overflow:hidden;
}
.d-item summary{
  cursor:pointer; list-style:none; padding:18px 22px;
  font-weight:800; color:var(--ink); font-size:15.5px;
  display:flex; justify-content:space-between; align-items:center; gap:12px;
}
.d-item summary::-webkit-details-marker{ display:none; }
.d-item summary::after{
  content:"+"; flex:none; width:26px; height:26px; border-radius:50%;
  background:var(--cream-2); color:var(--yellow-deep);
  display:flex; align-items:center; justify-content:center; font-weight:800;
  transition:transform .25s ease;
}
.d-item[open] summary::after{ transform:rotate(45deg); }
.d-item summary:hover{ background:var(--cream); }
.d-item p{ padding:0 22px 18px; font-size:14px; margin:0; }
.d-item p a{ color:var(--pink-deep); font-weight:700; }

/* ---------- ⑥ 相关服务 ---------- */
.d-rel{ padding:20px 0; }
.d-rel-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.d-rel-card{
  background:var(--white); border-radius:var(--r-m); padding:20px;
  border:2px dashed var(--yellow); transition:transform .25s ease, background .25s ease;
}
.d-rel-card:hover{ transform:translateY(-4px); background:var(--cream); }
.d-rel-card b{ display:block; color:var(--ink); margin-bottom:6px; }
.d-rel-card span{ font-size:13px; color:var(--body); }

/* ---------- ⑦ CTA ---------- */
.d-cta{ padding:50px 0 70px; }
.d-cta-inner{
  background:linear-gradient(135deg,var(--yellow),var(--yellow-deep));
  border-radius:var(--r-xl); padding:50px 30px; text-align:center;
  box-shadow:var(--shadow-s);
}
.d-cta-inner h2{ color:#fff; margin-bottom:12px; }
.d-cta-inner p{ color:#FFF8E6; margin-bottom:22px; }
.d-cta-btns{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px; }

/* ---------- 响应式 ---------- */
@media (max-width:1023.98px){
  .d-hero-inner{ grid-template-columns:1fr; gap:30px; }
  .ext-grid{ grid-template-columns:1fr; }
  .tips-row{ grid-template-columns:1fr 1fr; }
  .d-steps{ grid-template-columns:1fr 1fr; }
  .d-rel-row{ grid-template-columns:1fr 1fr; }
}
@media (max-width:767.98px){
  .tips-row{ grid-template-columns:1fr; }
  .d-steps{ grid-template-columns:1fr; }
  .d-rel-row{ grid-template-columns:1fr; }
}