:root{
  --bg:#031022;
  --bg2:#06162c;
  --panel:rgba(7,25,52,.74);
  --panel2:rgba(10,34,68,.70);
  --line:rgba(99,184,255,.22);
  --line2:rgba(255,255,255,.10);
  --text:#f5f9ff;
  --muted:#9db0ca;
  --cyan:#29d8ff;
  --blue:#2477ff;
  --blue2:#0f4fd8;
  --violet:#8a6cff;
  --pink:#ff77d8;
  --green:#58e8b5;
  --shadow:0 22px 70px rgba(0,0,0,.32);
  --radius:22px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--text);
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
  background:
    radial-gradient(circle at 80% 8%,rgba(30,101,255,.13),transparent 25%),
    radial-gradient(circle at 13% 19%,rgba(41,216,255,.08),transparent 20%),
    linear-gradient(180deg,#020b18 0%,#041226 55%,#031022 100%);
  min-height:100vh;
}
body::before{
  content:"";
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background-image:
    linear-gradient(rgba(95,165,255,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(95,165,255,.055) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:linear-gradient(to bottom,black 0 70%,transparent 100%);
}
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(110deg,transparent 30%,rgba(37,115,255,.035) 50%,transparent 70%);
}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit}
.container{width:min(1220px,92vw);margin:auto}
.topbar{
  position:sticky;top:0;z-index:60;
  background:rgba(2,9,22,.78);
  border-bottom:1px solid var(--line2);
  backdrop-filter:blur(16px);
}
.nav{
  height:70px;display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.brand-icon{
  width:42px;height:42px;border-radius:11px;
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  border:1px solid rgba(82,205,255,.58);
  background:
    linear-gradient(145deg,rgba(62,208,255,.32),transparent 40%),
    linear-gradient(325deg,rgba(69,85,255,.42),transparent 50%),
    #071b3f;
  box-shadow:inset 0 0 20px rgba(34,160,255,.24),0 0 22px rgba(21,154,255,.20);
  overflow:hidden;
}
.brand-icon::before{
  content:"";position:absolute;width:52px;height:12px;left:-20px;top:6px;
  background:rgba(47,220,255,.45);transform:rotate(-38deg);filter:blur(.2px);
}
.brand-icon::after{
  content:"";position:absolute;width:55px;height:13px;right:-24px;bottom:5px;
  background:rgba(91,99,255,.40);transform:rotate(-38deg);
}
.brand-icon span{
  position:relative;z-index:2;line-height:.93;
  font-size:15px;font-weight:900;
  font-family:"Microsoft YaHei","PingFang SC","Noto Sans CJK SC",sans-serif;
  color:white;text-shadow:0 0 9px rgba(80,210,255,.5);
}
.brand-name{font-weight:850;font-size:18px;white-space:nowrap}
.navlinks{display:flex;align-items:center;gap:30px;color:#cfdaeb;font-size:14px}
.navlinks a{transition:.2s}
.navlinks a:hover,.navlinks a.active{color:white}
.mobile-menu{display:none;background:none;border:0;color:white;font-size:24px;cursor:pointer}
.btn{
  border:1px solid rgba(125,190,255,.35);
  color:white;padding:12px 20px;border-radius:999px;
  background:rgba(5,22,50,.50);cursor:pointer;display:inline-flex;align-items:center;gap:10px;
  transition:.25s;justify-content:center;
}
.btn:hover{transform:translateY(-2px);border-color:rgba(88,209,255,.7)}
.btn.primary{
  background:linear-gradient(100deg,#155cff,#1ec8ff);
  border-color:rgba(92,221,255,.72);
  box-shadow:0 10px 28px rgba(20,118,255,.27),inset 0 1px rgba(255,255,255,.30);
  font-weight:760;
}
.btn.small{padding:9px 15px;font-size:13px}
.btn.disabled{opacity:.55;cursor:not-allowed;pointer-events:none}
.badge{
  display:inline-flex;align-items:center;gap:8px;padding:7px 11px;border-radius:999px;
  border:1px solid var(--line);background:rgba(7,30,63,.56);color:#bcd3f4;font-size:12px;
}
.badge-dot{width:7px;height:7px;background:var(--cyan);border-radius:50%;box-shadow:0 0 12px var(--cyan)}
.hero{
  min-height:620px;display:grid;grid-template-columns:1.02fr .98fr;align-items:center;
  gap:36px;padding:74px 0 48px;position:relative;
}
.hero-copy h1{
  margin:18px 0 18px;
  font-size:clamp(52px,6.1vw,86px);line-height:1.02;letter-spacing:-3px;
  background:linear-gradient(180deg,#fff 5%,#d7edff 65%,#77c9ff 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 40px rgba(61,165,255,.08);
}
.hero-copy p{color:#b7c5da;font-size:18px;line-height:1.9;margin:0;max-width:690px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
.hero-art{position:relative;height:500px;display:flex;align-items:center;justify-content:center}
.globe-wrap{position:relative;width:min(500px,44vw);aspect-ratio:1}
.globe-glow{
  position:absolute;inset:4%;border-radius:50%;
  background:radial-gradient(circle,rgba(31,139,255,.28),rgba(31,139,255,.02) 58%,transparent 70%);
  filter:blur(18px);
}
.globe{
  position:absolute;inset:10%;border-radius:50%;
  border:1px solid rgba(72,182,255,.5);
  background:
    radial-gradient(circle at 35% 25%,rgba(85,221,255,.20),transparent 13%),
    radial-gradient(circle at 55% 50%,rgba(31,92,211,.22),transparent 56%),
    linear-gradient(135deg,rgba(12,68,153,.5),rgba(2,11,31,.78));
  box-shadow:inset -38px -50px 90px rgba(0,0,0,.6),inset 20px 20px 65px rgba(38,192,255,.12),0 0 70px rgba(33,111,255,.30);
  overflow:hidden;
}
.globe .lat,.globe .lon{position:absolute;inset:0;border:1px solid rgba(74,189,255,.23);border-radius:50%}
.globe .lat:nth-child(1){transform:scaleY(.30)}
.globe .lat:nth-child(2){transform:scaleY(.60)}
.globe .lat:nth-child(3){transform:scaleY(.82)}
.globe .lon:nth-child(4){transform:scaleX(.30)}
.globe .lon:nth-child(5){transform:scaleX(.60)}
.globe .lon:nth-child(6){transform:scaleX(.82)}
.globe .land{
  position:absolute;left:27%;top:27%;width:48%;height:42%;
  opacity:.82;filter:drop-shadow(0 0 8px rgba(66,203,255,.8));
}
.orbit{
  position:absolute;left:50%;top:50%;border:1px solid rgba(91,190,255,.50);border-radius:50%;
  transform:translate(-50%,-50%) rotate(-18deg);box-shadow:0 0 20px rgba(45,148,255,.17);
}
.orbit.o1{width:104%;height:31%}
.orbit.o2{width:116%;height:44%;transform:translate(-50%,-50%) rotate(21deg)}
.orbit.o3{width:88%;height:26%;transform:translate(-50%,-50%) rotate(64deg)}
.satellite{position:absolute;width:8px;height:8px;border-radius:50%;background:#d8fbff;box-shadow:0 0 14px #4ce3ff}
.s1{top:17%;right:15%}.s2{bottom:23%;left:2%}.s3{top:48%;right:0}
.horizon{
  height:1px;background:linear-gradient(90deg,transparent,#219cff 25%,#7feaff 50%,#219cff 75%,transparent);
  box-shadow:0 0 22px #1478ff;
}
.section{padding:72px 0}
.section-title{text-align:center;margin-bottom:30px}
.section-title h2{font-size:42px;margin:0 0 10px;letter-spacing:-1.2px}
.section-title p{margin:0;color:var(--muted);line-height:1.7}
.world-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.world-card{
  min-height:228px;border:1px solid rgba(66,164,255,.38);border-radius:18px;overflow:hidden;
  background:linear-gradient(135deg,rgba(5,25,55,.94),rgba(5,21,45,.75));
  position:relative;padding:28px;box-shadow:inset 0 1px rgba(255,255,255,.03);transition:.28s;
}
.world-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:rgba(61,201,255,.65)}
.world-card h3{font-size:30px;margin:0 0 3px}
.world-card .sub{font-size:17px;color:#3bdcff;font-weight:760}
.world-card p{color:#a9b9ce;max-width:46%;line-height:1.75;font-size:14px}
.world-card .art{position:absolute;right:0;top:0;width:57%;height:100%;overflow:hidden}
.arrow-circle{
  position:absolute;right:18px;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;
  border:1px solid rgba(60,194,255,.55);display:flex;align-items:center;justify-content:center;color:#8deaff;
  background:rgba(4,32,69,.65);z-index:3;
}
.data-lines::before{
  content:"";position:absolute;left:-10%;right:-5%;top:44%;height:2px;
  background:linear-gradient(90deg,transparent,#2e8cff 18%,#6df5ff 45%,#3a8fff 80%,transparent);
  box-shadow:
    0 -24px 0 -1px rgba(31,119,255,.32),
    0 24px 0 -1px rgba(70,213,255,.27),
    0 -52px 0 -1px rgba(41,101,255,.18),
    0 52px 0 -1px rgba(41,101,255,.18);
  transform:rotate(-7deg);
}
.data-lines::after{
  content:"";position:absolute;inset:20% 12%;
  background-image:radial-gradient(circle,#74efff 0 2px,transparent 3px);
  background-size:40px 35px;opacity:.58;
}
.twin-city{perspective:500px}
.twin-city::before{
  content:"";position:absolute;left:14%;right:13%;bottom:13%;height:58%;
  background:
    linear-gradient(90deg,transparent 0 8%,rgba(64,186,255,.45) 8% 12%,transparent 12% 22%,rgba(64,186,255,.28) 22% 29%,transparent 29% 44%,rgba(64,186,255,.50) 44% 52%,transparent 52% 62%,rgba(64,186,255,.35) 62% 70%,transparent 70% 82%,rgba(64,186,255,.48) 82% 89%,transparent 89%);
  clip-path:polygon(0 100%,0 68%,8% 68%,8% 42%,16% 42%,16% 62%,25% 62%,25% 12%,36% 12%,36% 55%,46% 55%,46% 28%,56% 28%,56% 64%,66% 64%,66% 2%,78% 2%,78% 51%,88% 51%,88% 34%,100% 34%,100% 100%);
  border-bottom:1px solid #66dfff;filter:drop-shadow(0 0 10px rgba(55,161,255,.32));
}
.twin-city::after{
  content:"";position:absolute;left:9%;right:8%;bottom:2%;height:36%;
  background:
    repeating-linear-gradient(90deg,rgba(70,185,255,.22) 0 1px,transparent 1px 24px),
    repeating-linear-gradient(0deg,rgba(70,185,255,.20) 0 1px,transparent 1px 24px);
  transform:rotateX(67deg);transform-origin:bottom;
}
.gen-wave::before,.gen-wave::after{
  content:"";position:absolute;left:3%;right:4%;top:45%;height:32%;
  border-radius:50%;
  border-top:14px solid rgba(76,174,255,.62);
  filter:drop-shadow(0 0 13px rgba(79,178,255,.6));
  transform:rotate(-7deg);
}
.gen-wave::after{
  top:27%;border-top-color:rgba(240,91,222,.58);transform:rotate(8deg);
  filter:drop-shadow(0 0 12px rgba(218,87,255,.45));
}
.soft-panels::before{
  content:"";position:absolute;width:95px;height:70px;right:33%;top:33%;
  border:1px solid rgba(97,214,255,.65);border-radius:10px;background:rgba(38,121,255,.18);
  box-shadow:
    48px -25px 0 -1px rgba(38,121,255,.16),
    96px -5px 0 -1px rgba(100,95,255,.18),
    -48px 25px 0 -1px rgba(27,198,255,.13),
    48px 36px 0 -1px rgba(51,178,255,.11);
  transform:skewY(-7deg);
}
.soft-panels::after{
  content:"";position:absolute;left:18%;right:10%;top:20%;bottom:18%;
  background:
    linear-gradient(35deg,transparent 49%,rgba(89,216,255,.38) 50%,transparent 51%),
    linear-gradient(-25deg,transparent 49%,rgba(112,112,255,.28) 50%,transparent 51%);
  opacity:.7;
}
.closing{
  text-align:center;padding:82px 20px 110px;position:relative;overflow:hidden
}
.closing::before{
  content:"";position:absolute;left:5%;right:5%;bottom:-160px;height:260px;border-radius:50% 50% 0 0;
  border-top:2px solid rgba(59,177,255,.75);
  box-shadow:0 -18px 55px rgba(19,119,255,.35);
}
.closing h2{font-size:clamp(34px,5vw,58px);margin:0 0 14px;letter-spacing:-1px}
.closing p{color:var(--muted)}
.footer{border-top:1px solid var(--line2);padding:28px 0 42px;color:#8193ab;font-size:13px}
.footer-row{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.page-hero{padding:88px 0 36px;text-align:center}
.page-hero h1{font-size:48px;margin:0 0 14px}
.page-hero p{max-width:720px;margin:auto;color:var(--muted);line-height:1.8}
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.product-card,.price-card,.content-card{
  border:1px solid var(--line);border-radius:var(--radius);padding:25px;background:var(--panel);box-shadow:inset 0 1px rgba(255,255,255,.025)
}
.product-card h3,.price-card h3{margin:16px 0 8px;font-size:22px}
.product-card p,.price-card p,.content-card p{color:var(--muted);line-height:1.75}
.product-icon{
  width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(145deg,rgba(41,216,255,.25),rgba(57,79,255,.25));border:1px solid var(--line);
  font-size:22px
}
.price{font-size:38px;font-weight:850;margin:20px 0 4px}
.price small{font-size:14px;font-weight:500;color:var(--muted)}
.features{list-style:none;padding:0;margin:18px 0 24px;color:#b5c4d7;line-height:2}
.features li::before{content:"✓";color:#5de4c1;margin-right:8px}
.checkout-grid{display:grid;grid-template-columns:1fr .85fr;gap:22px;align-items:start}
.form-card,.summary-card{
  border:1px solid var(--line);border-radius:var(--radius);padding:26px;background:var(--panel)
}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{margin-bottom:16px}
.field label{display:block;font-size:13px;color:#b9c7d9;margin-bottom:7px}
.field input,.field select{
  width:100%;border:1px solid rgba(116,169,227,.28);border-radius:12px;padding:12px 13px;
  color:white;background:#07172e;outline:none
}
.field input:focus,.field select:focus{border-color:#2dd7ff;box-shadow:0 0 0 3px rgba(45,215,255,.08)}
.summary-line{display:flex;justify-content:space-between;gap:20px;padding:10px 0;color:#aebdd0;border-bottom:1px dashed rgba(255,255,255,.08)}
.summary-line.total{font-size:21px;color:white;border-bottom:0;padding-top:18px}
.notice{
  border:1px solid rgba(255,208,91,.27);background:rgba(120,83,13,.15);color:#e5c77e;
  border-radius:13px;padding:12px 14px;font-size:13px;line-height:1.6
}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.legal{max-width:900px;margin:auto}
.legal h2{margin-top:36px}.legal p,.legal li{color:#b0bed0;line-height:1.85}
.toast{
  position:fixed;right:22px;bottom:22px;z-index:100;padding:13px 16px;border-radius:12px;
  background:#0c2448;border:1px solid rgba(60,198,255,.45);color:white;box-shadow:var(--shadow);
  opacity:0;transform:translateY(10px);pointer-events:none;transition:.25s
}
.toast.show{opacity:1;transform:translateY(0)}
@media(max-width:900px){
  .navlinks{display:none;position:absolute;left:0;right:0;top:70px;background:rgba(3,12,27,.98);padding:18px 4vw;flex-direction:column;align-items:flex-start}
  .navlinks.open{display:flex}.mobile-menu{display:block}
  .hero{grid-template-columns:1fr;padding-top:58px}.hero-art{height:410px}
  .globe-wrap{width:min(430px,85vw)}
  .world-grid,.cards3,.checkout-grid,.two-col{grid-template-columns:1fr}
  .world-card p{max-width:54%}
  .brand-name{font-size:16px}
}
@media(max-width:560px){
  .hero-copy h1{font-size:47px;letter-spacing:-2px}
  .hero-copy p{font-size:16px}.hero-art{height:350px}
  .world-card{min-height:250px}.world-card p{max-width:65%}.world-card .art{opacity:.72;width:66%}
  .form-row{grid-template-columns:1fr}.page-hero h1{font-size:38px}
}