/* ============================================================
   REVDEV 智能鱼缸管家 · 站点设计系统（方案 B「亮色清透水感」）
   assets/site.css
   —— 浅底流体渐变团 / 白玻璃卡片 / 顶部导航 / 按钮 / 页脚
   —— 动画只使用 transform / opacity
   —— 适配 360px ~ 1200px+
   ============================================================ */

/* ---------------- 设计令牌 ---------------- */
:root{
  /* 文字色 */
  --ink:#1d2733;          /* 大标题 */
  --ink-2:#22303d;        /* 卡片标题 */
  --text:#28323e;         /* 正文 */
  --muted:#54626f;        /* 主要副文 */
  --muted-2:#5c6a77;      /* 卡片副文 */
  --soft:#6c7a88;         /* 次要说明 */
  --faint:#8b98a5;        /* 弱说明 */
  --ghost:#a3b0bc;        /* 版权行 */

  /* 品牌色 */
  --aqua:#0b8f96;
  --aqua-bright:#13b9c5;
  --teal:#12c2a6;
  --lav:#6a5ae0;
  --lav-bright:#7c6cf0;
  --pink:#d6336c;
  --pink-bright:#f06ab0;
  --peach:#d9660f;

  /* 渐变 */
  --grad-brand:linear-gradient(92deg,#0fb5bb 5%,#7c6cf0 55%,#f06ab0 100%);
  --grad-duo:linear-gradient(92deg,#0fb5bb,#7c6cf0);
  --grad-cta:linear-gradient(135deg,#13b9c5 0%,#7c6cf0 100%);

  /* 玻璃与阴影 */
  --glass-bg:rgba(255,255,255,.55);
  --glass-border:rgba(255,255,255,.78);
  --shadow-card:0 8px 32px rgba(41,72,106,.08),inset 0 1px 0 rgba(255,255,255,.65);
  --shadow-float:0 10px 26px rgba(41,72,106,.12);
  --shadow-hover:0 18px 44px rgba(41,72,106,.13);

  /* 圆角与版心 */
  --radius-xl:26px;
  --radius-lg:20px;
  --radius-md:16px;
  --radius-sm:14px;
  --container:1120px;
  --pad-x:clamp(18px,4.5vw,44px);

  --font:-apple-system,BlinkMacSystemFont,"SF Pro SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Segoe UI",sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,"Cascadia Mono",Consolas,Menlo,monospace;
}

/* ---------------- 基础重置 ---------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{
  min-height:100vh;
  overflow-x:hidden;
  color:var(--text);
  font-family:var(--font);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(255,214,233,.35), transparent 60%),
    radial-gradient(1000px 700px at -10% 30%, rgba(186,235,238,.4), transparent 60%),
    linear-gradient(180deg,#fbfdff 0%,#f6f9fc 55%,#f3f7fb 100%);
  background-attachment:fixed;
}
img,svg{display:block;max-width:100%}
a{color:var(--aqua)}
::selection{background:rgba(124,108,240,.22)}
a:focus-visible,button:focus-visible,.btn:focus-visible{
  outline:3px solid rgba(19,185,197,.55);
  outline-offset:2px;
  border-radius:6px;
}

/* ---------------- 漂浮渐变团（背景层） ---------------- */
.ocean-bg{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.blob{position:absolute;border-radius:50%;filter:blur(72px);will-change:transform;opacity:.55}
.blob--pink{width:620px;height:620px;top:-180px;right:-140px;
  background:radial-gradient(circle at 32% 32%,#ffc7dd 0%,rgba(255,199,221,0) 70%);
  animation:drift-a 26s ease-in-out infinite alternate}
.blob--aqua{width:680px;height:680px;top:280px;left:-220px;
  background:radial-gradient(circle at 60% 40%,#aeeaec 0%,rgba(174,234,236,0) 70%);
  animation:drift-b 34s ease-in-out infinite alternate}
.blob--lav{width:560px;height:560px;bottom:12%;right:-120px;
  background:radial-gradient(circle at 40% 60%,#d7cffc 0%,rgba(215,207,252,0) 70%);
  animation:drift-c 30s ease-in-out infinite alternate}
.blob--peach{width:420px;height:420px;bottom:-140px;left:22%;
  background:radial-gradient(circle at 50% 40%,#ffe3c9 0%,rgba(255,227,201,0) 70%);
  opacity:.45;animation:drift-a 38s ease-in-out infinite alternate-reverse}
@keyframes drift-a{from{transform:translate(0,0) scale(1)}to{transform:translate(-70px,60px) scale(1.12)}}
@keyframes drift-b{from{transform:translate(0,0) rotate(0deg) scale(1)}to{transform:translate(90px,-50px) rotate(18deg) scale(1.08)}}
@keyframes drift-c{from{transform:translate(0,0) scale(1);opacity:.55}to{transform:translate(-60px,-80px) scale(1.15);opacity:.4}}

/* ---------------- 版心与内容层 ---------------- */
.container{position:relative;z-index:1;max-width:var(--container);margin:0 auto;padding:0 var(--pad-x)}

/* ---------------- 白玻璃卡片基底 ---------------- */
.glass{
  background:var(--glass-bg);
  -webkit-backdrop-filter:blur(24px) saturate(1.6);
  backdrop-filter:blur(24px) saturate(1.6);
  border:1px solid var(--glass-border);
  box-shadow:var(--shadow-card);
  border-radius:var(--radius-xl);
}

/* ---------------- 顶部导航 ---------------- */
.site-nav{
  position:sticky;top:0;z-index:60;
  background:rgba(255,255,255,.62);
  -webkit-backdrop-filter:blur(20px) saturate(1.6);
  backdrop-filter:blur(20px) saturate(1.6);
  border-bottom:1px solid rgba(255,255,255,.75);
  box-shadow:0 2px 16px rgba(41,72,106,.06);
}
.nav-inner{
  max-width:var(--container);margin:0 auto;padding:10px var(--pad-x);
  display:flex;align-items:center;flex-wrap:wrap;gap:8px 18px;
}
.brand{
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  color:var(--ink);font-weight:900;font-size:1.02rem;letter-spacing:.02em;
}
.brand svg{width:28px;height:28px;flex:none}
.brand-sub{font-weight:600;font-size:.8rem;color:var(--soft);letter-spacing:0}
.nav-links{margin-left:auto;display:flex;flex-wrap:wrap;gap:2px clamp(8px,2.4vw,24px)}
.nav-links a{
  font-size:.92rem;font-weight:600;color:#4d5b69;text-decoration:none;
  padding:6px 2px;border-bottom:2px solid transparent;
  transition:color .2s ease,border-color .2s ease;
}
.nav-links a:hover{color:var(--aqua)}
.nav-links a[aria-current="page"]{color:var(--aqua);border-color:rgba(19,185,197,.6)}

/* ---------------- 按钮 ---------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  border-radius:999px;border:0;cursor:pointer;text-decoration:none;
  font-family:inherit;font-weight:700;font-size:1.02rem;padding:15px 34px;
  transition:transform .22s ease,box-shadow .22s ease;
}
.btn svg{flex:none}
.btn--primary{color:#fff;background:var(--grad-cta);box-shadow:0 12px 30px rgba(110,104,240,.32)}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 16px 38px rgba(110,104,240,.4)}
.btn--ghost{
  color:#3c4a58;background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.85);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
}
.btn--ghost:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(41,72,106,.1)}
.btn--sm{padding:10px 22px;font-size:.92rem}

/* ---------------- 徽标 / 标签 / 小字 ---------------- */
.badge{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.86rem;font-weight:600;color:var(--aqua);
  background:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.8);border-radius:999px;
  padding:7px 16px;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:0 2px 12px rgba(41,72,106,.06);
}
.badge i{width:8px;height:8px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 4px rgba(18,194,166,.18);flex:none}
.tag{display:inline-flex;align-items:center;gap:6px;font-size:.76rem;font-weight:700;border-radius:999px;padding:5px 13px}
.tag--aqua{color:var(--aqua);background:rgba(34,184,207,.13)}
.tag--lav{color:var(--lav);background:rgba(124,108,240,.13)}
.tag--pink{color:var(--pink);background:rgba(240,101,149,.13)}
.tag--peach{color:var(--peach);background:rgba(255,169,110,.2)}
.fineprint{margin-top:14px;font-size:.84rem;color:var(--faint)}

/* ---------------- 区块与标题 ---------------- */
.section{padding:clamp(40px,6vw,72px) 0}
.section-title{
  text-align:center;font-size:clamp(1.55rem,3.6vw,2.35rem);
  font-weight:850;color:var(--ink);line-height:1.3;
}
.section-title em,.hero-title em,.page-head h1 em{
  font-style:normal;background:var(--grad-brand);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.section-sub{
  text-align:center;color:var(--soft);margin:12px auto 0;max-width:36em;
  font-size:clamp(.94rem,1.4vw,1.05rem);
}

/* 内页页头（download / changelog / connect 共用） */
.page-head{padding:clamp(52px,8vw,88px) 0 clamp(8px,2vw,16px);text-align:center}
.page-head h1{font-size:clamp(1.9rem,4.6vw,3rem);font-weight:900;color:var(--ink);line-height:1.22}
.page-head p{margin:14px auto 0;max-width:38em;color:var(--muted);font-size:clamp(.96rem,1.5vw,1.1rem)}

/* ---------------- Hero ---------------- */
.hero{
  display:flex;flex-wrap:wrap;align-items:center;gap:clamp(28px,4vw,56px);
  padding:clamp(64px,9vw,110px) 0 clamp(44px,6vw,80px);
}
.hero-copy{flex:1 1 400px;min-width:0}
.hero-title{
  margin-top:22px;font-size:clamp(2.15rem,5.6vw,3.85rem);
  font-weight:900;line-height:1.18;letter-spacing:.005em;color:var(--ink);
}
.hero-lead{
  margin-top:18px;font-size:clamp(1rem,1.6vw,1.18rem);color:var(--muted);max-width:34em;
}
.cta-row{margin-top:30px;display:flex;flex-wrap:wrap;gap:14px;align-items:center}

/* ---- 毛玻璃仪表盘意象 ---- */
.hero-visual{flex:1 1 380px;min-width:0;position:relative;padding:26px 6px 34px}
.dash{position:relative;padding:clamp(18px,2.6vw,26px)}
.dash-top{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.dash-dot{width:10px;height:10px;border-radius:50%;flex:none}
.dash-dot:nth-child(1){background:#ffb3c1}
.dash-dot:nth-child(2){background:#ffd9a0}
.dash-dot:nth-child(3){background:#a7e8cf}
.dash-title{margin-left:6px;font-size:.86rem;font-weight:600;color:var(--soft)}
.dash-live{
  margin-left:auto;font-size:.74rem;font-weight:700;color:var(--aqua);
  background:rgba(18,194,166,.12);border-radius:999px;padding:3px 10px;
  animation:pulse 2.6s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.55}}
.dash-chart{
  display:block;width:100%;height:auto;border-radius:var(--radius-md);
  background:rgba(255,255,255,.42);border:1px solid rgba(255,255,255,.7);
}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px}
.stat{
  background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.75);
  border-radius:var(--radius-sm);padding:10px 8px;text-align:center;
}
.stat b{display:block;font-size:clamp(.92rem,1.4vw,1.08rem);font-weight:800;color:var(--ink-2);letter-spacing:.01em}
.stat span{display:block;font-size:.7rem;color:var(--faint);margin-top:2px}
.stat--ok b{color:var(--aqua)}

/* ---- 漂浮信息片 ---- */
.chip{
  position:absolute;display:flex;align-items:center;gap:9px;
  padding:10px 16px;border-radius:18px;
  font-size:.82rem;font-weight:700;white-space:nowrap;
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.85);box-shadow:var(--shadow-float);
}
.chip small{display:block;font-weight:500;font-size:.72rem;color:var(--faint)}
.chip--alert{top:-10px;right:clamp(4px,2vw,18px);color:var(--pink);animation:bob 6s ease-in-out infinite alternate}
.chip--cam{bottom:0;left:clamp(2px,1.5vw,14px);color:var(--aqua);animation:bob 7s .8s ease-in-out infinite alternate-reverse}
.chip-icon{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;flex:none;color:#fff}
.chip--alert .chip-icon{background:linear-gradient(135deg,#ff8fab,#f06595)}
.chip--cam .chip-icon{background:linear-gradient(135deg,#38d9c3,#22b8cf)}
@keyframes bob{from{transform:translateY(0)}to{transform:translateY(-9px)}}

/* ---------------- 三档接入 ---------------- */
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:18px;margin-top:38px}
.tier{padding:26px 24px;display:flex;flex-direction:column;gap:10px;transition:transform .25s ease,box-shadow .25s ease}
.tier:hover{transform:translateY(-5px);box-shadow:var(--shadow-hover)}
.tier-no{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;color:#fff;font-weight:900;font-size:1.05rem}
.tier:nth-child(1) .tier-no{background:linear-gradient(135deg,#22b8cf,#15aabf)}
.tier:nth-child(2) .tier-no{background:linear-gradient(135deg,#9775fa,#7c6cf0)}
.tier:nth-child(3) .tier-no{background:linear-gradient(135deg,#f783ac,#f06595)}
.tier h3{font-size:1.18rem;font-weight:800;color:var(--ink-2)}
.tier p{font-size:.92rem;color:var(--muted-2);flex:1}
.tier-tag{align-self:flex-start;font-size:.76rem;font-weight:700;border-radius:999px;padding:5px 13px}
.tier:nth-child(1) .tier-tag{color:var(--aqua);background:rgba(34,184,207,.13)}
.tier:nth-child(2) .tier-tag{color:var(--lav);background:rgba(124,108,240,.13)}
.tier:nth-child(3) .tier-tag{color:var(--pink);background:rgba(240,101,149,.13)}

/* ---- 同等待遇承诺条 ---- */
.promise-bar{
  margin-top:20px;padding:18px 26px;border-radius:var(--radius-lg);
  display:flex;flex-wrap:wrap;gap:8px 22px;
  align-items:center;justify-content:center;text-align:center;
  background:rgba(255,255,255,.5);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  border:1px solid var(--glass-border);box-shadow:0 6px 24px rgba(41,72,106,.07);
}
.promise-bar b{
  font-size:.98rem;font-weight:850;background:var(--grad-brand);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.promise-bar span{display:inline-flex;align-items:center;gap:6px;font-size:.88rem;color:#4d5b69;font-weight:600}
.promise-bar svg{color:var(--teal);flex:none}

/* ---------------- 功能卡片 ---------------- */
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:18px;margin-top:38px}
.feature{padding:24px 22px;transition:transform .25s ease,box-shadow .25s ease}
.feature:hover{transform:translateY(-5px);box-shadow:var(--shadow-hover)}
.feature-icon{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;margin-bottom:14px}
.feature-icon svg{width:24px;height:24px}
.icon-aqua{background:linear-gradient(135deg,rgba(34,184,207,.16),rgba(56,217,195,.22));color:var(--aqua)}
.icon-lav{background:linear-gradient(135deg,rgba(151,117,250,.15),rgba(124,108,240,.22));color:var(--lav)}
.icon-pink{background:linear-gradient(135deg,rgba(247,131,172,.15),rgba(240,101,149,.2));color:var(--pink)}
.icon-peach{background:linear-gradient(135deg,rgba(255,169,110,.18),rgba(255,146,90,.22));color:var(--peach)}
.feature h3{font-size:1.08rem;font-weight:800;color:var(--ink-2);margin-bottom:6px}
.feature p{font-size:.9rem;color:var(--muted-2)}

/* ---------------- 代码与行内代码（开放接入页用） ---------------- */
code{
  font-family:var(--font-mono);font-size:.88em;
  color:var(--aqua);background:rgba(34,184,207,.12);
  border-radius:6px;padding:2px 7px;
}
.codeblock{
  background:#102437;color:#d7e6f2;border-radius:var(--radius-md);
  padding:18px 20px;overflow-x:auto;
  font-family:var(--font-mono);font-size:.86rem;line-height:1.6;
  box-shadow:0 12px 30px rgba(16,42,64,.22);
}
.codeblock code{background:none;color:inherit;padding:0;font-size:1em}

/* ---------------- 页脚 ---------------- */
.site-footer{
  position:relative;z-index:1;
  margin-top:clamp(30px,5vw,54px);
  border-top:1px solid rgba(120,140,160,.16);
  padding:32px 0 46px;font-size:.85rem;color:#7d8b98;
}
.footer-inner{max-width:var(--container);margin:0 auto;padding:0 var(--pad-x)}
.footer-links{display:flex;flex-wrap:wrap;gap:8px 26px;justify-content:center;margin-bottom:16px}
.footer-links a{
  color:#3c4a58;font-weight:600;text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color .2s ease,color .2s ease;
}
.footer-links a:hover{color:var(--aqua);border-color:rgba(11,143,150,.5)}
.footer-note{text-align:center;max-width:46em;margin:0 auto 10px;line-height:1.7}
.footer-copyright{text-align:center;color:var(--ghost)}

/* ---------------- 响应式 ---------------- */
@media (max-width:760px){
  .hero{padding-top:52px}
  .hero-visual{padding:20px 0 30px}
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  .chip{position:static;animation:none}
  .hero-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
}
@media (max-width:560px){
  .brand-sub{display:none}
  .btn{padding:14px 26px;font-size:.98rem}
}
@media (max-width:420px){
  .nav-inner{padding:10px 14px;gap:8px}
  .brand{font-size:.95rem;gap:7px}
  .brand svg{width:24px;height:24px}
  .nav-links a{font-size:.84rem;padding:6px 0}
  .nav-links{gap:2px 10px}
  .chip{white-space:normal}
}

/* ---------------- 动画偏好 ---------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}