:root{
  --teal:#4ACBD6; --teal-d:#1ba9b8; --teal-dd:#0e8a98; --teal-bg:#e8f9fb; --teal-soft:#c5eef2;
  --ink:#1a2b32; --ink2:#37505a; --gray:#6d818b; --line:#e3eaed;
  --bg:#f4f7f8; --card:#fff; --dark:#10282e; --ok:#28a745; --warn:#e0a800; --crit:#d6453d;
  --shadow:0 2px 12px rgba(16,40,46,.07); --shadow-lg:0 8px 28px rgba(16,40,46,.13);
}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:-apple-system,"PingFang SC","Microsoft YaHei",Roboto,sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;}
a{text-decoration:none;color:inherit;}

/* ===== top nav (real tp-link style) ===== */
.nav{background:var(--card);border-bottom:1px solid var(--line);height:62px;display:flex;align-items:center;padding:0 30px;gap:26px;position:sticky;top:0;z-index:100;}
.logo{display:flex;align-items:center;gap:9px;font-size:21px;font-weight:800;color:var(--ink);letter-spacing:-.5px;}
.logo .mark{width:30px;height:30px;background:var(--teal);border-radius:7px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:17px;font-weight:900;transform:rotate(-2deg);}
.logo b{color:var(--teal-dd);font-weight:800;}
.nav .menu{display:flex;gap:20px;font-size:14px;color:var(--ink2);}
.nav .menu a:hover{color:var(--teal-dd);}
.nav .crumb{font-size:13px;color:var(--gray);margin-left:4px;}
.nav .right{margin-left:auto;display:flex;align-items:center;gap:14px;}
.nav .ic{font-size:17px;color:var(--gray);cursor:pointer;}
.nav .back{font-size:13px;color:var(--teal-dd);border:1px solid var(--teal);border-radius:20px;padding:7px 15px;}
.nav .back:hover{background:var(--teal-bg);}

/* ===== page shell ===== */
.wrap{max-width:1200px;margin:0 auto;padding:28px 30px 70px;}
.phead{margin-bottom:22px;}
.phead .kick{font-size:12px;font-weight:800;color:var(--teal-dd);letter-spacing:1.5px;text-transform:uppercase;}
.phead h1{font-size:27px;color:var(--ink);margin-top:6px;letter-spacing:-.3px;}
.phead .desc{font-size:14px;color:var(--ink2);margin-top:11px;line-height:1.65;max-width:780px;}
.phead .tip{display:inline-block;font-size:12px;background:var(--teal-bg);color:var(--teal-dd);border:1px solid var(--teal-soft);border-radius:16px;padding:5px 13px;margin-top:13px;font-weight:600;}

/* ===== 更明显的功能说明 ===== */
.phead .lead{font-size:17px;color:var(--ink);margin-top:11px;line-height:1.55;max-width:800px;font-weight:600;letter-spacing:-.2px;}
.phead .lead b{color:var(--teal-dd);}
.fx{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px;}
.fx .fxcard{flex:1;min-width:240px;border:1px solid var(--line);border-radius:11px;padding:13px 16px;background:#fff;box-shadow:var(--shadow);}
.fx .fxcard .h{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;display:flex;align-items:center;gap:6px;}
.fx .fxcard.now{background:#fdf4f3;border-color:#eccdca;}
.fx .fxcard.now .h{color:var(--crit);}
.fx .fxcard.new{background:var(--teal-bg);border-color:var(--teal-soft);}
.fx .fxcard.new .h{color:var(--teal-dd);}
.fx .fxcard .b{font-size:13px;color:var(--ink2);margin-top:7px;line-height:1.6;}

/* ===== 更明显的功能演示 · 演示操作台 ===== */
.democ{background:linear-gradient(115deg,#10282e,#0e8a98);border-radius:14px;padding:17px 21px;margin:20px 0 8px;color:#fff;box-shadow:var(--shadow-lg);}
.democ .ttl{font-size:14px;font-weight:800;letter-spacing:.3px;display:flex;align-items:center;gap:8px;}
.democ .sub{font-size:12px;opacity:.82;margin-top:4px;line-height:1.5;}
.democ .btns{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px;}
.dbtn{background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.32);color:#fff;border-radius:9px;padding:9px 15px;font-size:13px;font-weight:600;cursor:pointer;transition:.15s;line-height:1.3;}
.dbtn:hover{background:rgba(74,203,214,.85);color:#10282e;border-color:var(--teal);}
.dbtn.on{background:var(--teal);color:#10282e;border-color:var(--teal);box-shadow:0 2px 8px rgba(74,203,214,.4);}
.dhint{font-size:12px;color:var(--gray);margin:14px 0 8px;font-weight:600;}
.dhint b{color:var(--teal-dd);}

.slabel{font-size:12px;color:var(--gray);font-weight:800;letter-spacing:.8px;text-transform:uppercase;margin:26px 0 13px;}

/* ===== buttons ===== */
.btn{display:inline-flex;align-items:center;gap:6px;font-size:13px;border-radius:8px;padding:9px 17px;cursor:pointer;border:1px solid var(--line);background:#fff;color:var(--ink2);transition:.15s;font-weight:500;}
.btn:hover{border-color:var(--teal);color:var(--teal-dd);}
.btn.primary{background:var(--teal-dd);color:#fff;border-color:var(--teal-dd);}
.btn.primary:hover{background:var(--teal-d);color:#fff;}
.btn.buy{background:var(--teal-dd);color:#fff;border-color:var(--teal-dd);font-weight:700;}
.btn.buy:hover{background:#0a7682;}
.btn.sm{font-size:12px;padding:6px 12px;}

/* ===== chips/tabs ===== */
.chip{display:inline-flex;align-items:center;gap:5px;font-size:13px;border:1px solid var(--line);border-radius:20px;padding:7px 15px;cursor:pointer;background:#fff;color:var(--ink2);transition:.15s;font-weight:500;}
.chip:hover{border-color:var(--teal);color:var(--teal-dd);}
.chip.active{background:var(--teal-dd);color:#fff;border-color:var(--teal-dd);}

/* ===== Deco cylinder placeholder ===== */
.deco{width:48px;height:78px;margin:0 auto;border-radius:14px;background:linear-gradient(145deg,#f0f3f4,#d3dde0);border:1px solid #c8d3d6;box-shadow:inset 0 -8px 14px rgba(0,0,0,.05),inset 0 4px 8px rgba(255,255,255,.7);position:relative;}
.deco::after{content:"";position:absolute;left:50%;top:14px;transform:translateX(-50%);width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#fff,var(--teal) 120%);opacity:.5;}
.deco.lg{width:74px;height:120px;border-radius:20px;}
.deco.sm{width:30px;height:50px;border-radius:9px;}
/* archer flat router placeholder */
.archer{width:96px;height:48px;margin:0 auto;border-radius:10px;background:linear-gradient(145deg,#1c3940,#0e252b);position:relative;box-shadow:var(--shadow);}
.archer::before{content:"";position:absolute;top:-12px;left:14px;width:3px;height:16px;background:#26464d;box-shadow:14px 0 #26464d,28px 0 #26464d,42px 0 #26464d,56px 0 #26464d;border-radius:2px;}

.card{background:var(--card);border:1px solid var(--line);border-radius:13px;box-shadow:var(--shadow);}
.note{font-size:12px;color:var(--gray);margin-top:11px;line-height:1.65;}
.note b{color:var(--teal-dd);}
.insight{background:var(--teal-bg);border:1px solid var(--teal-soft);border-radius:11px;padding:14px 18px;font-size:13px;color:var(--ink2);line-height:1.65;margin-top:16px;}
.insight b{color:var(--teal-dd);}
.foot{text-align:center;font-size:12px;color:#9fb0b6;padding:34px 0 8px;}

/* ===== index ===== */
.hero{background:linear-gradient(120deg,#10282e,#0e8a98);color:#fff;padding:48px 30px 42px;text-align:center;}
.hero h1{font-size:32px;letter-spacing:-.5px;}
.hero p{font-size:14px;opacity:.85;margin-top:11px;}
.hero .badge{display:inline-block;margin-top:16px;font-size:12px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);border-radius:16px;padding:5px 14px;}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:1120px;margin:-26px auto 0;padding:0 26px 40px;}
.gcard{background:var(--card);border:1px solid var(--line);border-radius:15px;box-shadow:var(--shadow);padding:22px;transition:.18s;display:block;position:relative;overflow:hidden;}
.gcard::before{content:"";position:absolute;left:0;top:0;width:100%;height:3px;background:var(--teal);transform:scaleX(0);transform-origin:left;transition:.2s;}
.gcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);}
.gcard:hover::before{transform:scaleX(1);}
.gcard .num{font-size:12px;color:var(--teal-dd);font-weight:800;letter-spacing:1px;}
.gcard h3{font-size:17px;margin:7px 0 4px;color:var(--ink);}
.gcard .en{font-size:11px;color:var(--gray);letter-spacing:.5px;text-transform:uppercase;}
.gcard p{font-size:13px;color:var(--ink2);margin-top:11px;line-height:1.6;}
.gcard .ly{margin-top:13px;display:flex;gap:5px;flex-wrap:wrap;}
.gcard .ly span{font-size:10px;background:var(--teal-bg);color:var(--teal-dd);border-radius:7px;padding:2px 8px;font-weight:600;}