:root{
  --bg:#07111f;
  --bg2:#0c1d35;
  --panel:#101d31;
  --panel2:rgba(255,255,255,.05);
  --line:rgba(173,212,255,.16);
  --text:#f6fbff;
  --muted:#b6c7db;
  --soft:#8ccfff;
  --soft2:#d8edff;
  --accent:#6bb7ff;
  --shadow:0 30px 80px rgba(0,0,0,.28);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"PingFang SC","Microsoft YaHei",Arial,sans-serif;
  background:
    radial-gradient(circle at 85% 10%, rgba(116,186,255,.18), transparent 18%),
    radial-gradient(circle at 88% 58%, rgba(92,164,255,.12), transparent 20%),
    linear-gradient(180deg,#06101d 0%, #09172a 42%, #07111f 100%);
  color:var(--text);
}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.header{
  position:sticky; top:0; z-index:10;
  backdrop-filter: blur(14px);
  background:rgba(6,16,29,.72);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.header-inner{
  max-width:1280px; margin:0 auto; padding:16px 28px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.brand{
  display:flex; align-items:center; gap:12px;
}
.brand-mark{
  width:34px; height:34px; border-radius:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12);
  display:grid; place-items:center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
.brand-mark::before{
  content:"";
  width:16px; height:18px;
  background:linear-gradient(180deg,#d8efff,#7dc5ff);
  clip-path:path("M 8 0 C 11 -3 15 -2 16 1 C 13 2 11 4 9 7 C 11 8 13 10 13 14 C 13 18 10 20 8 20 C 5 20 3 18 3 14 C 3 10 5 8 7 7 C 6 4 5 2 8 0 Z");
  opacity:.92;
}
.brand-text{display:flex; flex-direction:column; line-height:1.1}
.brand-title{font-size:18px; font-weight:800; letter-spacing:.5px}
.brand-sub{font-size:11px; color:var(--muted)}

.nav{display:flex; align-items:center; gap:26px; color:#dfeaf6; font-size:14px}
.nav a{opacity:.9}
.nav a:hover{opacity:1; color:#fff}

.page{
  max-width:1280px; margin:0 auto; padding:0 28px 80px;
}

.hero{
  min-height:620px;
  display:grid; grid-template-columns:1.05fr .95fr;
  align-items:center; gap:36px;
  padding:46px 0 18px;
}
.hero-copy small{
  display:inline-block; margin-bottom:18px;
  color:#cde4fb; font-size:13px; letter-spacing:1.6px;
  padding:8px 12px; border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
}
.hero-copy h1{
  margin:0 0 18px;
  font-size:72px; line-height:1.05; font-weight:800; letter-spacing:-1.6px;
}
.hero-copy p{
  margin:0 0 24px; max-width:640px;
  color:#d0deee; font-size:20px; line-height:1.9;
}
.hero-tags{
  display:flex; flex-wrap:wrap; gap:12px; margin-bottom:28px;
}
.hero-tag{
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  color:#dbe8f7; padding:10px 14px; border-radius:14px; font-size:14px;
}
.actions{display:flex; gap:14px; flex-wrap:wrap}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:136px; height:50px; padding:0 24px; border-radius:14px;
  font-weight:700; font-size:15px; transition:.2s ease;
}
.btn-primary{
  color:#07111f;
  background:linear-gradient(180deg,#eef8ff,#cfe8ff);
  box-shadow:0 16px 28px rgba(106,181,255,.16);
}
.btn-secondary{
  color:#fff; border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.02);
}
.btn:hover{transform:translateY(-1px)}

.hero-visual{
  position:relative; min-height:500px; display:flex; align-items:center; justify-content:center;
}
.visual-orb{
  position:absolute; width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle at 40% 40%, rgba(153,214,255,.34), rgba(89,150,255,.08) 42%, rgba(0,0,0,0) 66%);
  filter:blur(10px);
}
.visual-card{
  position:absolute;
  width:300px; height:190px; border-radius:34px;
  border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.04));
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.12);
  backdrop-filter: blur(12px);
}
.visual-card.left{transform:translate(-58px,36px) rotate(-7deg)}
.visual-card.right{transform:translate(76px,-32px) rotate(10deg)}
.visual-device{
  position:relative; width:220px; height:420px; border-radius:48px;
  border:2px solid rgba(255,255,255,.18);
  background:
    radial-gradient(circle at 35% 24%, rgba(144,206,255,.18), transparent 32%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)),
    linear-gradient(180deg,#0b1730,#081120);
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.15);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px;
  z-index:2;
}
.visual-notch{
  position:absolute; top:14px; width:94px; height:24px; border-radius:20px; background:rgba(0,0,0,.36);
}
.visual-fruit{
  width:74px; height:88px;
  background:linear-gradient(180deg,#dbf0ff,#7dc5ff);
  clip-path:path("M 37 6 C 48 -2 62 0 67 8 C 59 11 52 17 46 26 C 58 31 66 44 66 58 C 66 80 52 92 37 92 C 21 92 8 80 8 58 C 8 43 16 31 28 26 C 23 18 21 11 37 6 Z");
  filter:drop-shadow(0 8px 28px rgba(125,197,255,.35));
  position:relative;
}
.visual-fruit::after{
  content:"";
  position:absolute; left:-2px; top:26px; width:22px; height:22px; border-radius:50%;
  background:#0b1730;
}
.visual-lines{display:flex; flex-direction:column; gap:10px}
.visual-lines span{
  display:block; height:10px; border-radius:999px;
  background:linear-gradient(90deg, rgba(150,207,255,.86), rgba(150,207,255,.22));
}
.visual-lines span:nth-child(1){width:86px}
.visual-lines span:nth-child(2){width:112px}
.visual-lines span:nth-child(3){width:70px}
.visual-chip{
  width:86px; height:52px; border-radius:14px;
  border:1px solid rgba(150,207,255,.34);
  background:linear-gradient(180deg, rgba(118,187,255,.35), rgba(118,187,255,.14));
}

.section-title{
  margin:18px 0 20px; font-size:18px; font-weight:700; color:#dce8f7; letter-spacing:1.4px;
}
.service-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
}
.service-card{
  min-height:210px; border-radius:28px; padding:28px;
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  transition:.2s ease;
  display:flex; flex-direction:column;
}
.service-card:hover{transform:translateY(-2px); border-color:rgba(140,207,255,.28)}
.service-icon{
  width:46px;height:46px;border-radius:14px;
  display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(140,207,255,.09);
  color:#8ccfff; font-size:24px; font-weight:800;
}
.service-card h3{
  margin:22px 0 12px; font-size:28px; font-weight:800; color:#fff;
}
.service-card p{
  margin:0; font-size:16px; line-height:1.85; color:var(--muted);
}
.service-enter{
  margin-top:auto; padding-top:24px; color:#8ccfff; font-size:15px; font-weight:700;
}

.flow{
  margin-top:26px; border-top:1px solid rgba(255,255,255,.06);
  padding:18px 0 10px; display:flex; gap:20px; align-items:center; flex-wrap:wrap;
  color:#cad8e8; font-size:14px;
}
.flow b{color:#fff; font-size:14px}
.flow span{color:#dfeaf6}
.flow em{font-style:normal; color:#8ccfff}

.sub-hero{
  padding:40px 0 16px;
}
.breadcrumb{
  color:#c0d0e2; font-size:14px; margin-bottom:18px;
}
.back-link{
  display:inline-flex; align-items:center; gap:8px; color:#8ccfff; font-size:14px; margin-bottom:18px;
}
.page-head{
  margin:0 0 10px; font-size:56px; line-height:1.08; font-weight:800;
}
.page-desc{
  margin:0 0 24px; color:var(--muted); font-size:18px; line-height:1.9;
}

.product-grid-2{
  display:grid; grid-template-columns:repeat(2,1fr); gap:22px;
}
.product-grid-3{
  display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
}
.product-card{
  border-radius:28px; padding:28px;
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  min-height:280px;
  display:flex; flex-direction:column;
}
.product-top{
  display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px;
}
.product-badge{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:72px; height:30px; padding:0 12px;
  border-radius:999px; background:rgba(140,207,255,.12); color:#8ccfff; font-size:12px; font-weight:700;
}
.product-card h3{
  margin:0; font-size:30px; line-height:1.25; font-weight:800;
}
.product-card .price{
  margin:16px 0 10px; font-size:46px; color:#8ccfff; font-weight:800; letter-spacing:-1px;
}
.product-card .price small{font-size:20px}
.product-card p{
  margin:0 0 16px; color:var(--muted); line-height:1.9; font-size:16px;
}
.feature-list{
  margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:10px;
}
.feature-list li{color:#dce7f5; position:relative; padding-left:18px; line-height:1.8}
.feature-list li::before{
  content:""; position:absolute; left:0; top:12px; width:7px; height:7px; border-radius:50%; background:#8ccfff;
}
.product-action{margin-top:auto; padding-top:22px; display:flex; gap:12px; flex-wrap:wrap}

.platform-mark{
  width:52px;height:52px;border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  display:grid; place-items:center;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  color:#ffffff; font-weight:800; font-size:22px;
}
.platform-sub{
  color:#cfe0f3; font-size:14px; margin-top:8px;
}

.query-wrap{
  display:grid; grid-template-columns:1fr .95fr; gap:22px;
}
.query-card{
  border-radius:28px; padding:28px;
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
}
.input{
  width:100%; height:54px; border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.03); color:#fff; padding:0 18px; font-size:15px;
}
.helper{font-size:14px; color:var(--muted); line-height:1.8}
.status-list{display:grid; gap:12px}
.status-pill{
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px; padding:14px 16px; background:rgba(255,255,255,.03);
  color:#dce8f6; font-size:14px;
}
.sample{
  margin-top:18px; display:grid; gap:14px;
}
.sample-row{display:flex; justify-content:space-between; gap:16px; padding-bottom:12px; border-bottom:1px solid rgba(255,255,255,.06)}
.sample-row span{color:var(--muted)}
.sample-row b{font-weight:700}

@media (max-width:1100px){
  .hero{grid-template-columns:1fr; padding-top:36px}
  .hero-copy h1{font-size:58px}
  .service-grid,.product-grid-3{grid-template-columns:repeat(2,1fr)}
  .query-wrap{grid-template-columns:1fr}
}
@media (max-width:720px){
  .header-inner{padding:14px 18px}
  .nav{gap:14px; font-size:13px; flex-wrap:wrap; justify-content:flex-end}
  .page{padding:0 18px 56px}
  .hero-copy h1,.page-head{font-size:40px}
  .hero-copy p,.page-desc{font-size:16px}
  .service-grid,.product-grid-2,.product-grid-3{grid-template-columns:1fr}
  .visual{transform:scale(.92)}
}