/* ==========================================================================
   TEA14888 — 响应式样式
   断点：1200 / 1024 / 900（导航切换）/ 768 / 480
   ========================================================================== */

/* ---------- ≤1200px ---------- */
@media (max-width: 1200px) {
  :root { --container: 100%; }
  .container { padding: 0 24px; }
  .main-nav { gap: 18px; }
  .main-nav a { padding: 9px 12px; font-size: 14.5px; }
}

/* ---------- ≤1024px ---------- */
@media (max-width: 1024px) {
  .hero { padding: calc(var(--header-h) + 72px) 0 78px; }
  .hero-title { font-size: 52px; }
  .section { padding: 82px 0; }

  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }

  .about-inner { grid-template-columns: 1fr; gap: 46px; }
  .about-visual { min-height: 260px; order: -1; }
  .about-orb { width: 240px; height: 240px; }

  .contact-grid { grid-template-columns: 1fr; gap: 34px; }
}

/* ---------- ≤900px：导航切换为抽屉 ---------- */
@media (max-width: 900px) {
  .menu-btn { display: flex; }

  .main-nav {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 895;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: min(320px, 84vw);
    height: 100dvh;
    padding: calc(var(--header-h) + 20px) 24px 34px;
    background: var(--c-cream);
    box-shadow: -18px 0 50px rgba(18, 40, 31, 0.18);
    transform: translateX(105%);
    transition: transform .36s var(--ease);
    overflow-y: auto;
  }

  .main-nav.is-open { transform: translateX(0); }

  .main-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    margin-bottom: 26px;
  }

  .main-nav a {
    padding: 14px 12px;
    font-size: 16px;
    border-radius: var(--radius-sm);
    border-bottom: 1px solid var(--c-line);
  }

  .main-nav a::after { display: none; }

  .main-nav a.active {
    background: rgba(64, 145, 108, 0.10);
    color: var(--c-green-700);
  }

  .nav-actions { margin-top: auto; }

  .lang-toggle {
    width: 100%;
    justify-content: center;
    padding: 12px;
    font-size: 14px;
  }
}

/* ---------- ≤768px ---------- */
@media (max-width: 768px) {
  body { font-size: 15.5px; }

  .container { padding: 0 20px; }

  :root { --header-h: 68px; }

  .brand-mark { width: 40px; height: 40px; }
  .brand-text strong { font-size: 17px; }
  .brand-text em { font-size: 9.5px; }

  .hero { padding: calc(var(--header-h) + 56px) 0 64px; }
  .hero-title { font-size: 40px; }
  .hero-sub { font-size: 16px; margin-bottom: 28px; }
  .hero-btns { gap: 12px; margin-bottom: 34px; }
  .btn { padding: 13px 26px; font-size: 15px; }
  .hero-points { gap: 18px 24px; }

  .section { padding: 68px 0; }
  .section-head { margin-bottom: 40px; }
  .section-head h2 { font-size: 29px; }
  .section-head p { font-size: 15.5px; }

  .product-card { padding: 22px 20px 26px; }
  .product-thumb { height: 112px; margin-bottom: 16px; }
  .product-card h3 { font-size: 19px; }

  .feature { padding: 26px 22px; }

  .about-text h2 { font-size: 29px; }
  .about-text p { font-size: 15.5px; }

  .contact-form { padding: 26px 22px; }

  .back-top { right: 18px; bottom: 18px; width: 42px; height: 42px; }
}

/* ---------- ≤600px：产品/优势单列 ---------- */
@media (max-width: 600px) {
  .product-grid { grid-template-columns: 1fr; }
  .feature-grid { grid-template-columns: 1fr; }
}

/* ---------- ≤480px ---------- */
@media (max-width: 480px) {
  .container { padding: 0 16px; }

  .hero-title { font-size: 32px; line-height: 1.22; }
  .hero-sub { font-size: 15px; }
  .hero-tag { font-size: 12px; padding: 6px 13px; }

  .hero-btns { flex-direction: column; align-items: stretch; }
  .hero-btns .btn { width: 100%; }

  .hero-points { flex-direction: column; gap: 10px; }

  .section { padding: 56px 0; }
  .section-head h2 { font-size: 25px; }
  .about-text h2 { font-size: 25px; }

  .about-orb { width: 190px; height: 190px; }

  .contact-form { padding: 22px 18px; }
  .field input, .field textarea { padding: 12px 14px; font-size: 16px; } /* 16px 防 iOS 自动放大 */

  .footer-nav { gap: 16px; }
  .footer-nav a { font-size: 13.5px; }
}

/* ---------- 横屏矮屏（手机横放） ---------- */
@media (max-height: 480px) and (orientation: landscape) {
  .hero { padding: calc(var(--header-h) + 32px) 0 40px; }
  .hero-title { font-size: 34px; }
  .main-nav { padding-top: calc(var(--header-h) + 8px); }
}

/* ---------- 深色模式（跟随系统） ---------- */
@media (prefers-color-scheme: dark) {
  .site-header {
    background: rgba(24, 32, 28, 0.86);
    border-bottom-color: rgba(255, 255, 255, 0.08);
  }
  .site-header.is-scrolled { background: rgba(24, 32, 28, 0.97); }

  .brand-text strong { color: #dff0e4; }
  .brand-text em { color: rgba(223, 240, 228, 0.6); }

  .main-nav a { color: #d9e5dc; }
  .main-nav a.active { color: #95d5b2; }
  .main-nav a:hover { color: #95d5b2; }

  .lang-toggle {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.14);
    color: #d9e5dc;
  }
  .lang-opt { color: rgba(217, 229, 220, 0.62); }
  .lang-opt.active { color: #95d5b2; }

  .menu-btn span { background: #dff0e4; }

  .hero { background: linear-gradient(165deg, #16211c 0%, #131a17 60%, #171d19 100%); }
  .hero-title { color: #e6f2e9; }
  .hero-sub { color: rgba(220, 234, 224, 0.72); }
  .hero-tag {
    color: #95d5b2;
    background: rgba(64, 145, 108, 0.16);
    border-color: rgba(64, 145, 108, 0.32);
  }
  .hero-points li { color: rgba(220, 234, 224, 0.68); }

  .btn-ghost { color: #cfe6d7; border-color: rgba(255, 255, 255, 0.22); }
  .btn-ghost:hover { background: rgba(255, 255, 255, 0.08); border-color: #95d5b2; }

  .section-alt { background: #1a231e; }
  .section-head h2, .about-text h2 { color: #dff0e4; }
  .section-head p, .about-text p { color: rgba(220, 234, 224, 0.68); }
  .section-note { color: rgba(220, 234, 224, 0.55); }

  .product-card {
    background: #1e2823;
    border-color: rgba(255, 255, 255, 0.09);
  }
  .product-card h3 { color: #cfe6d7; }
  .product-card p { color: rgba(220, 234, 224, 0.62); }
  .product-more { color: #95d5b2; }
  .product-thumb { background: linear-gradient(150deg, #223029, #1b2620); }

  .feature { background: #1e2823; }
  .feature:hover { background: #243029; border-color: rgba(255, 255, 255, 0.10); }
  .feature h3 { color: #cfe6d7; }
  .feature p { color: rgba(220, 234, 224, 0.62); }

  .main-nav { background: #18211c; }
  .main-nav a { border-bottom-color: rgba(255, 255, 255, 0.08); }
  .main-nav a.active { background: rgba(64, 145, 108, 0.18); color: #95d5b2; }

  .site-footer { background: #101815; }
}