/* ============================================================
   COMPONENTS · 按钮 / 导航 / 卡片 / 反馈组件
   碳效丰笙 · 丰笙日记官网
   由 style.css 拆分而来，内容与原单文件一致
   ============================================================ */

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 28px;border-radius:999px;font-size:15px;font-weight:600;
  letter-spacing:.02em;transition:.28s cubic-bezier(.22,.61,.36,1);
  white-space:nowrap;
}
.btn-sm{padding:9px 20px;font-size:14px;}
.btn-primary{
  background:linear-gradient(135deg,var(--teal),var(--blue));
  color:#fff;box-shadow:0 8px 22px rgba(27,171,155,.30);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(27,171,155,.42);}
.btn-ghost{border:1.5px solid rgba(27,171,155,.45);color:var(--teal);background:transparent;}
.btn-ghost:hover{background:rgba(27,171,155,.09);transform:translateY(-2px);}

/* ---------- 导航 ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:900;
  transition:.3s ease;background:rgba(255,255,255,0);
  backdrop-filter:saturate(160%) blur(0);
}
.nav.scrolled{
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(14px);
  box-shadow:0 1px 0 rgba(9,60,55,.08),0 8px 26px rgba(9,60,55,.06);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:76px;gap:24px;}
.brand{display:flex;align-items:center;gap:12px;flex-shrink:0;}
.brand-logo{height:38px;width:auto;transition:.3s;}
.nav:not(.scrolled) .brand-logo{filter:brightness(0) invert(1);}
.brand-logo{height:38px;width:auto;transition:.3s;}
.brand-tag{
  font-size:11px;letter-spacing:.08em;color:var(--muted);font-weight:600;
  border-left:1px solid var(--line);padding-left:14px;line-height:1.4;
  max-width:120px;white-space:nowrap;
}
.nav:not(.scrolled) .brand-tag{color:rgba(255,255,255,.78);border-color:rgba(255,255,255,.3);}
.nav-menu{display:flex;align-items:center;gap:32px;}
.nav-menu a{
  font-size:15px;font-weight:500;color:var(--ink-2);position:relative;padding:6px 0;transition:.25s;
}
.nav:not(.scrolled) .nav-menu a{color:rgba(255,255,255,.88);}
.nav-menu a::after{
  content:"";position:absolute;left:50%;bottom:0;height:2px;width:0;
  background:linear-gradient(90deg,var(--teal),var(--blue));border-radius:2px;
  transform:translateX(-50%);transition:.3s;
}
.nav-menu a:hover::after,.nav-menu a.active::after{width:100%;}
.nav-menu a:hover,.nav-menu a.active{color:var(--teal);}
.nav:not(.scrolled) .nav-menu a:hover,.nav:not(.scrolled) .nav-menu a.active{color:#fff;}
.nav-cta-mobile{display:none;}
.nav-actions{display:flex;align-items:center;gap:14px;}
.nav:not(.scrolled) .nav-actions .btn-primary{
  background:rgba(255,255,255,.16);box-shadow:none;border:1px solid rgba(255,255,255,.45);color:#fff;
}
.nav-toggle{display:none;width:40px;height:40px;flex-direction:column;justify-content:center;align-items:center;gap:5px;}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;transition:.3s;}
.nav:not(.scrolled) .nav-toggle span{background:#fff;}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle.open span:nth-child(2){opacity:0;}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ---------- 技术 ---------- */
.tech-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.tech-card{
  background:#fff;border-radius:20px;padding:34px 28px;border:1px solid var(--line);
  box-shadow:var(--shadow-s);transition:.35s;position:relative;overflow:hidden;
}
.tech-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-l);}
.tech-card-green{background:linear-gradient(170deg,#0f3b36,#08211f);color:#fff;border-color:transparent;}
.tech-ic{
  width:56px;height:56px;border-radius:15px;display:grid;place-items:center;margin-bottom:20px;
  background:rgba(27,171,155,.11);color:var(--teal);
}
.tech-ic svg{width:28px;height:28px;}
.tech-card-green .tech-ic{background:rgba(181,232,224,.16);color:var(--teal-light);}
.tech-card h3{font-size:19.5px;font-weight:700;margin-bottom:12px;line-height:1.45;}
.tech-card p{font-size:14.8px;color:var(--muted);line-height:1.85;}
.tech-card-green p{color:rgba(255,255,255,.72);}
.tech-note{
  margin-top:18px;padding-top:16px;border-top:1px dashed var(--line);
  font-size:13px;color:var(--teal);font-weight:600;letter-spacing:.02em;
}
.tech-card-green .tech-note{border-color:rgba(255,255,255,.16);color:var(--teal-light);}

/* ---------- 回到顶部 ---------- */
.to-top{
  position:fixed;right:26px;bottom:30px;z-index:880;
  width:50px;height:50px;border-radius:50%;
  display:grid;place-items:center;
  background:linear-gradient(135deg,var(--teal),var(--blue));
  color:#fff;box-shadow:0 10px 26px rgba(27,171,155,.36);
  opacity:0;visibility:hidden;transform:translateY(16px) scale(.88);
  transition:opacity .32s ease,transform .32s cubic-bezier(.22,.61,.36,1),visibility .32s;
}
.to-top.show{opacity:1;visibility:visible;transform:none;}
.to-top:hover{box-shadow:0 14px 34px rgba(27,171,155,.48);transform:translateY(-3px);}
.to-top:active{transform:translateY(0) scale(.95);}
.to-top svg{width:22px;height:22px;position:relative;z-index:1;}
.to-top-ring{
  position:absolute;inset:0;border-radius:50%;
  border:2px solid rgba(27,171,155,.55);
  opacity:0;transform:scale(1);
}
.to-top.show .to-top-ring{animation:ringPulse 2.4s ease-out infinite;}
@keyframes ringPulse{
  0%{opacity:.7;transform:scale(1);}
  70%{opacity:0;transform:scale(1.55);}
  100%{opacity:0;transform:scale(1.55);}
}
.to-top:focus-visible{outline:3px solid var(--teal-light);outline-offset:3px;}