/* ================= Theme Tokens ================= */
:root{
  --accent-green:#1C6C4C; --accent-green-2:#2E8B67;
  --ivory:#E6E0CB; --ivory-2:#F7F4EC;
  --bg:var(--ivory-2); --card-bg:#fff;
  --text-dark:#1F2B24; --text-gray:#4C5B4E;
  --shadow:rgba(15,25,18,.08); --glass:rgba(255,255,255,.75);
  --radius-sm:8px; --radius-md:14px;
  --soft-green-1:#f5faf7; --soft-green-2:#ebf6ef;
}
body.dark{
  --bg:#12221A; --card-bg:#1B2B23;
  --text-dark:#E6E0CB; --text-gray:#CFC8B4; --shadow:rgba(0,0,0,.55);
  --glass:rgba(24,36,29,.5); --nav-bg:linear-gradient(90deg,#153026,#22483a);
}

/* ================= Base ================= */
*{box-sizing:border-box;transition:background-color .25s,color .25s,box-shadow .3s,border-color .3s,transform .35s}
html,body{height:100%}
body{
  margin:0;font-family:'Poppins','Noto Sans SC',sans-serif;
  background:var(--bg);color:var(--text-dark);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.7;
}
p a{color:inherit}
.indent{text-indent:2em}
.muted{color:var(--text-gray)}

/* ================= Loader (旋转绿色进度环) ================= */
#loader{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;
  z-index:9999;background:radial-gradient(circle at center, rgba(8,18,12,0.88) 0%, rgba(6,12,8,0.92) 100%);
  color:var(--ivory);transition:opacity .6s,visibility .6s;
}
#loader.hidden{opacity:0;visibility:hidden;pointer-events:none}

/* 进度环容器：呼吸效果，进度与旋转在 ::before */
.loader-ring{
  --p: 0;                 /* 0~100，由 JS 设置 */
  --thickness: 6px;       /* 环宽度 */
  position:relative;width:90px;height:90px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  animation: greenPulse 1.8s ease-in-out infinite;
}
.loader-ring::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  background: conic-gradient(var(--accent-green) calc(var(--p)*1%), rgba(230,224,203,0.18) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--thickness)), #000 0);
          mask: radial-gradient(farthest-side, transparent calc(100% - var(--thickness)), #000 0);
  animation: spin 1.2s linear infinite; /* 环旋转，文本不转 */
}
.loader-center-text{
  position:absolute;z-index:1;font-weight:800;font-size:20px;color:var(--ivory);
  text-shadow:0 0 12px rgba(28,108,76,0.9);pointer-events:none;
}
.loader-text{margin-top:12px;font-weight:600;font-size:14px;color:rgba(230,224,203,0.92)}
@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
@keyframes greenPulse{0%{box-shadow:0 0 0 0 rgba(28,108,76,.28)}70%{box-shadow:0 0 0 18px rgba(28,108,76,0)}100%{box-shadow:0 0 0 0 rgba(28,108,76,0)}}

/* ================= Particles ================= */
#particles-js{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none;background:linear-gradient(120deg,var(--bg),rgba(0,0,0,0))}

/* ================= Header & Nav ================= */
.header{position:relative;z-index:3;background:linear-gradient(90deg,var(--accent-green),var(--accent-green-2));color:var(--ivory);padding:22px 20px 8px;border-bottom:1px solid rgba(0,0,0,.04)}
body.dark .header{background:var(--nav-bg)}
.header-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:nowrap}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit;flex:1 1 auto;min-width:0}
.logo{width:64px;height:auto;border-radius:10px;display:block;opacity:.001}
.brand-text{min-width:0}
.brand-text .brand-title{font-weight:800;font-size:1.25rem;letter-spacing:1px;white-space:nowrap}
.brand-text .brand-sub{font-size:.9rem;color:rgba(255,255,255,.92);margin-top:2px}

/* 副标题：单行省略，小屏自适应，极小屏隐藏 */
#brandSub{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:clamp(180px,28vw,420px)}
@media (max-width:980px){#brandSub{max-width:34vw;font-size:.88rem}}
@media (max-width:720px){#brandSub{max-width:44vw;font-size:.82rem}}
@media (max-width:420px){#brandSub{display:none}}

.controls{display:flex;align-items:center;gap:10px}

.main-nav{display:flex;justify-content:center;gap:18px;padding:10px 0;margin-top:8px}
.main-nav a{color:var(--ivory);text-decoration:none;font-weight:700;letter-spacing:.6px;font-size:.92rem}
.main-nav.scrolled{box-shadow:0 8px 30px rgba(0,0,0,.12)}

/* ================= Sections ================= */
main{position:relative;z-index:2;max-width:1200px;margin:30px auto;padding:0 18px}
section{background:var(--glass);backdrop-filter:blur(6px);border-radius:var(--radius-md);box-shadow:0 6px 24px var(--shadow);margin:40px 0;padding:36px}
h1,h2,h3{background:linear-gradient(90deg,var(--accent-green-2),var(--accent-green));-webkit-background-clip:text;-webkit-text-fill-color:transparent}

/* ================= Hero ================= */
.hero{text-align:center;padding:64px 24px}
.hero h1{font-size:2.2rem;color:var(--accent-green);margin:0 0 12px}
.hero p{color:var(--text-gray);margin:8px 0}

/* ================= Buttons ================= */
.btn{display:inline-block;padding:11px 28px;border-radius:10px;background:linear-gradient(90deg,var(--accent-green),var(--accent-green-2));color:var(--ivory);font-weight:800;text-decoration:none;box-shadow:0 8px 22px rgba(28,108,76,.14)}
.btn:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(28,108,76,.18)}

/* ================= About ================= */
.about-grid{display:flex;gap:18px;flex-wrap:wrap}
.col{flex:1 1 300px;min-width:260px}
.about-card{background:linear-gradient(180deg,var(--soft-green-1),var(--soft-green-2));padding:22px;border-radius:12px;box-shadow:0 8px 22px var(--shadow);color:var(--text-dark);border:1px solid rgba(28,108,76,.08)}
body.dark .about-card{background:#1b2b23;border-color:rgba(255,255,255,.08)}

/* ================= Products ================= */
.products{display:flex;flex-wrap:wrap;gap:20px;justify-content:center;padding:24px 0}
.product{background:var(--card-bg);padding:22px;border-radius:12px;width:280px;text-align:center;box-shadow:0 8px 20px var(--shadow);border:1px solid rgba(28,108,76,.08)}
.product h3{color:var(--accent-green);margin:10px 0}
.price{font-size:1.05rem}

/* ================= Features ================= */
.features .feature{background:var(--card-bg);border:1px solid rgba(28,108,76,.06);padding:14px;border-radius:12px;box-shadow:0 6px 18px var(--shadow);margin:12px 0}

/* ================= Reviews ================= */
.testimonials{text-align:center;background:linear-gradient(180deg,var(--soft-green-1),var(--soft-green-2));border-radius:var(--radius-md);padding:48px 32px;box-shadow:0 6px 24px rgba(0,0,0,.06);border:1px solid rgba(28,108,76,.06)}
body.dark .testimonials{background:#1b2b23;border-color:rgba(255,255,255,.06)}
.review-grid{display:flex;flex-wrap:wrap;gap:22px;justify-content:center;margin-top:18px}
.review{background:var(--card-bg);padding:18px;border-radius:12px;box-shadow:0 6px 20px var(--shadow);width:300px;border:1px solid rgba(28,108,76,.08);will-change:transform,box-shadow}
.review:hover{transform:translateY(-6px);box-shadow:0 14px 28px rgba(28,108,76,.15)}
.review-header{display:flex;align-items:center;gap:12px;justify-content:center;margin-bottom:10px}
.review .review-header img{width:44px;height:44px;flex:0 0 44px;border-radius:50%;object-fit:cover;border:2px solid var(--accent-green-2)}
@media (min-width:768px){.review .review-header img{width:52px;height:52px;flex:0 0 52px}}
.review h4{font-weight:700;color:var(--accent-green);margin:0}
.review p{color:var(--text-gray);font-style:italic;margin:8px 0 14px}
.review > img{width:100%;height:auto;border-radius:10px;box-shadow:0 4px 12px rgba(0,0,0,.1);margin-top:8px}

/* ================= FAQ ================= */
.faq .q{cursor:pointer;font-weight:700;padding:6px 0;border-bottom:1px dashed rgba(28,108,76,.2)}
.faq p{max-height:0;overflow:hidden;opacity:0;transition:all .4s ease;margin:0}
.faq p.visible{max-height:200px;opacity:1;margin:8px 0}

/* ================= Footer ================= */
.footer{padding:22px;background:linear-gradient(90deg,var(--accent-green),var(--accent-green-2));color:var(--ivory);font-size:12px;text-align:center;box-sizing:border-box;border-top:1px solid rgba(255,255,255,.12);position:relative;z-index:2}
body.dark .footer{background:var(--nav-bg)}
.footer .footer-inner{max-width:1200px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:16px}
.footer-left p{margin:4px 0}
.footer-right{display:flex;flex-wrap:wrap;justify-content:center;gap:16px}
.footer-right a{display:flex;align-items:center;gap:6px;padding:6px 10px;background:rgba(255,255,255,.1);border-radius:6px;color:var(--ivory);text-decoration:none;transition:background .3s;font-size:12px}
.footer-right a:hover{background:rgba(255,255,255,.2)}
.footer-right .icon{font-size:14px}

/* ================= Reveal on scroll ================= */
[data-animate]{opacity:0;transform:translateY(18px)}
[data-animate].visible{opacity:1;transform:none}

/* ================= Back To Top ================= */
#backToTop{position:fixed;right:24px;bottom:28px;z-index:9999;background:linear-gradient(135deg,var(--accent-green),var(--accent-green-2));color:var(--ivory);border:none;border-radius:50%;width:45px;height:45px;cursor:pointer;display:none;box-shadow:0 8px 30px rgba(0,0,0,.12)}

/* ================= Responsive ================= */
@media (max-width:900px){.about-grid{flex-direction:column}.feature{width:100%}}
@media (max-width:768px){.hero h1{font-size:1.6rem}.product,.review{width:92%}.main-nav{flex-wrap:wrap;gap:10px}}

/* ===== Theme Toggle (胶囊风按钮，日/夜一体) ===== */
#themeToggle{
  /* 尺寸与风格可自调 */
  --h: 36px;               /* 高度 */
  --pad-x: 14px;           /* 左右内边距 */
  --radius: 999px;         /* 圆角胶囊 */
  --shadow-elev: 0 6px 18px var(--shadow);
  --shadow-elev-hover: 0 10px 24px rgba(28,108,76,.16);

  appearance: none;
  border: 1px solid rgba(28,108,76,.12);
  background: var(--card-bg);          /* 日间未按下：卡片底 */
  color: var(--text-dark);
  height: var(--h);
  padding: 0 var(--pad-x);
  border-radius: var(--radius);
  font-weight: 800;
  letter-spacing: .2px;
  cursor: pointer;
  box-shadow: var(--shadow-elev), inset 0 1px 0 rgba(255,255,255,.35);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  line-height: 1;
  transition: background .25s ease, color .25s ease, transform .18s ease, 
              box-shadow .25s ease, border-color .25s ease;
}

/* 悬浮与按下反馈 */
#themeToggle:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow-elev-hover);
}
#themeToggle:active{
  transform: translateY(0);
}

/* 按下态（一般代表“夜间”），高亮渐变 */
#themeToggle[aria-pressed="true"]{
  background: linear-gradient(90deg, var(--accent-green), var(--accent-green-2));
  color: var(--ivory);
  border-color: transparent;
  box-shadow: 0 10px 26px rgba(28,108,76,.25);
}

/* 夜间主题下：未按下也要有足够对比度（脚本可能被改动时的兜底） */
body.dark #themeToggle{
  background: rgba(24,36,29,.55);
  color: var(--ivory);
  border-color: rgba(255,255,255,.08);
  box-shadow: 0 6px 18px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05);
}

/* 夜间主题 + 按下态：保持渐变高亮 */
body.dark #themeToggle[aria-pressed="true"]{
  background: linear-gradient(90deg, var(--accent-green), var(--accent-green-2));
  color: var(--ivory);
  box-shadow: 0 12px 28px rgba(28,108,76,.38);
}

/* 键盘可达性（焦点样式） */
#themeToggle:focus{
  outline: none;
}
#themeToggle:focus-visible{
  box-shadow:
    0 0 0 3px rgba(46,139,103,.35),
    0 10px 24px rgba(28,108,76,.2);
}

/* 减少动画偏好：关闭过度动效 */
@media (prefers-reduced-motion: reduce){
  #themeToggle{
    transition: none;
  }
}

/* === Mobile 对齐修复（覆盖式，放在文件末尾） === */

/* 统一全站左右安全边距（含 iOS 安全区） */
:root{
  --gutter: clamp(16px, 5vw, 24px);
}

/* Header/主体/Footer 使用同一套左右边距 */
.header{ padding: 16px 0 8px; } /* 去掉 header 里硬编码的左右 padding */
.header-inner,
main,
.footer .footer-inner{
  max-width: 1200px;
  margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
}

/* Section 在小屏减小内边距，保证视觉留白对称 */
section{
  padding: clamp(18px, 4vw, 28px);
  margin: 24px 0;
}
.about-card{ padding: clamp(14px, 3.6vw, 20px); }

/* 列表圆点与多行文字对齐（自定义“悬挂圆点”） */
.bullets{ list-style: none; margin: .4em 0 1em; padding: 0; }
.bullets li{
  position: relative;
  display: block;
  line-height: 1.75;
  padding-left: 1.25em;     /* 控制与正文的对齐线 */
}
.bullets li::before{
  content: "";
  position: absolute;
  left: 0; top: .72em;
  width: .48em; height: .48em;
  border-radius: 50%;
  background: var(--accent-green-2);
}

/* 小屏禁用首行缩进，避免与列表/标题左边界不齐 */
@media (max-width: 600px){
  .indent{ text-indent: 0; }
}

/* 防止极少数元素把页面撑出横向滚动 */
img, video{ max-width: 100%; height: auto; }
body{ overflow-x: hidden; }

@supports (-webkit-backdrop-filter: blur(0)) {
  section h1, section h2, section h3 {   /* 仅 section 里禁用渐变 */
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: currentColor !important;
    color: var(--accent-green) !important;
  }
  body.dark section h1,
  body.dark section h2,
  body.dark section h3 { color: #DCE8E1 !important; }
}

@supports (-webkit-backdrop-filter: blur(0)) {
  section { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--card-bg); }
}


/* --- 产品区改成 Grid：天生等高，行内按钮也能对齐 --- */
.products{
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  align-items: stretch; /* 同一行等高 */
  padding: 24px 0;
}

/* 卡片用列布局，把按钮压到底部 */
.product{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* 价格在按钮上方；按钮永远靠底 */
.product .price{ margin-top: 6px; }
.product .btn{
  margin-top: auto;         /* 关键：把按钮推到底部 */
  align-self: center;       /* 按钮水平居中 */
}

/* 流量/速率固定两行：每个 span 一行，内部不拆行 */
.product .spec{
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  row-gap: 4px;
  margin: 6px 0 2px;
}
.product .spec span{
  display: block;
  white-space: nowrap;      /* “流量：50G/月”自身不被拆 */
  line-height: 1.7;
}
/* 不再在行尾加分号，视觉更整齐 */
.product .spec span:first-child::after{ content: ""; }

/* 统一页面边距（如果你已加过可以跳过这段） */
:root{
  --page-gutter: clamp(16px, 5vw, 28px);
  --grid-gap: 20px;
}
.header-inner,
main,
.footer .footer-inner{
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}
section{
  padding-block: clamp(18px, 4vw, 28px);
  padding-inline: var(--page-gutter);
}

/* === 产品网格：左右对称 + 卡片不再固定宽度 === */
.products{
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* 自适应列 */
  gap: var(--grid-gap);
  padding-inline: var(--grid-gap);      /* 外侧留白 = 内部 gap，视觉对称 */
  align-items: stretch;
  justify-items: stretch;               /* 关键：让子项充满列宽 */
}
/* 覆盖旧的固定宽度 */
.product{
  width: auto !important;               /* 移除 280px 固定值 */
  display: flex;
  flex-direction: column;
}
.product .btn{
  margin-top: auto;                     /* 按钮压到底，整齐对齐 */
  align-self: center;
}

/* 手机上一列时也保持满宽和对称 */
@media (max-width: 760px){
  .products{ grid-template-columns: 1fr; }
  .product{ width: 100% !important; }   /* 保底：单列卡片占满整列 */
}

/* 兜底：避免极小溢出造成“看起来”不对齐 */
body{ overflow-x: hidden; }