:root{
  --bg:#f7f9ff;
  --panel:#ffffff;
  --panel-soft:#f4f8ff;
  --line:#e5ecf7;
  --text:#121a2a;
  --muted:#5f6f86;
  --green:#31e38c;
  --green2:#7cf3bd;
  --green-deep:#20bf71;
  --shadow:0 16px 45px rgba(17,35,72,.08);
  --container:1180px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.65;
}
a{color:inherit;text-decoration:none}

.bg-gradient{
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(900px 500px at 10% -5%, rgba(49,227,140,.25), transparent 55%),
    radial-gradient(900px 580px at 95% 0%, rgba(82,170,255,.16), transparent 58%),
    linear-gradient(180deg, #f9fbff 0%, #f6f8fe 40%, #f5f8ff 100%);
}

.container{width:min(100% - 40px,var(--container));margin:0 auto}

.site-header{
  position:sticky;top:0;z-index:30;
  backdrop-filter: blur(10px);
  background:rgba(247,249,255,.88);
  border-bottom:1px solid #e9eef8;
}
.header-inner{
  min-height:78px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:20px;
}
.brand img{display:block;width:130px;height:32px;object-fit:contain}
.header-nav{
  justify-self:center;
  display:flex;align-items:center;gap:28px;
}
.header-nav a{
  color:var(--muted);
  font-weight:650;
}
.header-nav a:hover{color:var(--text)}

.btn{
  border:1px solid transparent;
  border-radius:12px;
  padding:10px 16px;
  font-size:14px;
  font-weight:750;
  cursor:pointer;
  transition:.2s ease;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  text-align:center;
}
.btn-primary{
  background:linear-gradient(130deg,var(--green) 0%,var(--green2) 100%);
  color:#06341f;
  box-shadow:0 10px 25px rgba(49,227,140,.24);
}
.btn-primary:hover{background:linear-gradient(130deg,var(--green-deep) 0%,#62efad 100%)}
.btn-light{
  background:#fff;
  border-color:var(--line);
  color:var(--text);
}
.btn-outline{
  background:#fff;
  border-color:#d1ddeb;
  color:var(--text);
}

.hero{padding:56px 0 30px}
.hero-wrap{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:18px;
  align-items:stretch;
}
.hero-main{
  background:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%);
  border:1px solid var(--line);
  border-radius:24px;
  padding:34px;
  box-shadow:var(--shadow);
}
.hero-tag{
  display:inline-flex;
  padding:8px 12px;
  border-radius:999px;
  background:#ebfcf3;
  color:#0f6841;
  font-size:13px;
  font-weight:700;
}
.hero-main h1{
  margin:14px 0 0;
  font-size:52px;
  line-height:1.12;
  letter-spacing:-.9px;
}
.hero-main p{
  margin:16px 0 0;
  max-width:58ch;
  color:var(--muted);
  font-size:17px;
}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.hero-points{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:22px;
}
.hero-points span{
  display:inline-flex;
  padding:8px 12px;
  border-radius:999px;
  background:#f3f7ff;
  border:1px solid var(--line);
  color:#2c3b52;
  font-weight:650;
  font-size:13px;
}

.card-glass{
  background:linear-gradient(160deg, rgba(255,255,255,.98) 0%, rgba(247,253,249,.96) 100%);
  border:1px solid #dff2e8;
  border-radius:24px;
  padding:28px;
  box-shadow:0 16px 45px rgba(26,126,78,.08);
}
.visual-hero{padding:20px}
.visual-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:10px;
}
.search-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border-radius:999px;
  padding:8px 12px;
  font-size:12px;
  font-weight:650;
  color:#2f4f6b;
  background:#f3f8ff;
  border:1px solid #d9e7f7;
}
.search-dot{
  width:8px;height:8px;border-radius:999px;
  background:#32de88;
  box-shadow:0 0 0 5px rgba(50,222,136,.18);
}
.support-chip{
  border-radius:999px;
  padding:7px 10px;
  font-size:12px;
  font-weight:700;
  color:#0d6840;
  border:1px solid #c9f1db;
  background:#ecfdf4;
  white-space:nowrap;
}

.map-stage{
  position:relative;
  min-height:308px;
  border-radius:20px;
  overflow:hidden;
  border:1px solid #d8e8f4;
  background:
    radial-gradient(320px 180px at 15% 5%, rgba(110,211,255,.24), transparent 65%),
    radial-gradient(320px 180px at 90% 0%, rgba(49,227,140,.18), transparent 70%),
    linear-gradient(180deg,#f8fbff 0%,#eef5ff 100%);
}
.flow-bg{
  position:absolute;inset:0;
  background:
    linear-gradient(to right, rgba(125,153,195,.12) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(125,153,195,.12) 1px, transparent 1px);
  background-size:36px 36px;
  opacity:.56;
}
.flow-line{
  position:absolute;
  left:74px;
  top:78px;
  width:4px;
  height:160px;
  border-radius:999px;
  background:linear-gradient(180deg,#32de88 0%, #8adab3 100%);
  box-shadow:0 0 0 8px rgba(50,222,136,.12);
}
.flow-node{
  position:absolute;
  left:52px;
  right:22px;
  display:flex;
  align-items:center;
  gap:10px;
  border-radius:14px;
  padding:10px 12px;
  background:rgba(255,255,255,.92);
  border:1px solid #d4e6f6;
  box-shadow:0 10px 22px rgba(31,62,105,.10);
}
.node-a{top:52px}
.node-b{top:122px}
.node-c{top:192px}
.node-icon{
  width:24px;
  height:24px;
  border-radius:999px;
  display:grid;
  place-items:center;
  font-size:12px;
  font-weight:800;
  color:#0d6840;
  background:#eafdf3;
  border:1px solid #bcefd3;
}
.flow-node b{display:block;font-size:13px}
.flow-node small{display:block;font-size:12px;color:#5f7089}

.pulse{
  position:absolute;
  left:66px;top:126px;
  width:12px;height:12px;border-radius:999px;
  background:rgba(57,228,140,.32);
  box-shadow:0 0 0 10px rgba(57,228,140,.12);
}

.rider-card{
  position:absolute;
  right:16px;top:24px;
  display:flex;align-items:center;gap:10px;
  border-radius:14px;
  padding:10px 12px;
  background:#fff;
  border:1px solid #d7e6f5;
  box-shadow:0 14px 30px rgba(32,63,108,.14);
}
.rider-avatar{
  width:52px;height:52px;
  border-radius:16px;
  background:linear-gradient(180deg,#eff7ff 0%,#e9fff4 100%);
  border:1px solid #d6e9f8;
  position:relative;
}
.helmet{
  position:absolute;left:14px;top:8px;
  width:24px;height:10px;border-radius:10px 10px 6px 6px;
  background:#2fdd8a;
}
.face{
  position:absolute;left:17px;top:18px;
  width:18px;height:14px;border-radius:8px;
  background:#ffdcb8;
}
.body{
  position:absolute;left:14px;top:32px;
  width:24px;height:14px;border-radius:8px;
  background:#1f4f84;
}
.rider-text b{display:block;font-size:13px}
.rider-text small{display:block;color:#5b6d86;margin-top:2px;font-size:12px}

.stat-float{
  position:absolute;
  border-radius:12px;
  padding:10px 12px;
  background:rgba(255,255,255,.90);
  border:1px solid #d5e6f7;
  backdrop-filter:blur(4px);
}
.stat-float b{display:block;font-size:12px}
.stat-float small{display:block;color:#5d6f89;font-size:11px;margin-top:1px}
.stat-1{left:16px;bottom:16px}
.stat-2{right:24px;bottom:26px}

.section{padding:66px 0}
.section-soft{
  background:linear-gradient(180deg,#f8fbff 0%,#f6f9ff 100%);
  border-top:1px solid #e8eef8;
  border-bottom:1px solid #e8eef8;
}
.section-head{max-width:760px}
.section-head h2{
  margin:0;
  font-size:40px;
  letter-spacing:-.8px;
}
.section-head p{
  margin:12px 0 0;
  color:var(--muted);
  font-size:16px;
}

.tabs{margin-top:24px;display:flex;gap:10px;flex-wrap:wrap}
.tab{
  border:1px solid var(--line);
  background:#fff;
  color:#4d5f79;
  border-radius:999px;
  padding:10px 16px;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
}
.tab.active{
  border-color:#b7efd2;
  background:#ebfcf3;
  color:#0f6841;
}
.tab-panels{margin-top:18px}
.tab-panel{display:none}
.tab-panel.active{display:block}

.cards-3{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}
.feature-card{
  background:linear-gradient(180deg,#fff 0%,#fbfdff 100%);
  border:1px solid var(--line);
  border-radius:18px;
  padding:22px;
  box-shadow:0 10px 26px rgba(15,31,66,.05);
}
.feature-card h3{
  margin:0;
  font-size:22px;
  letter-spacing:-.3px;
}
.feature-card p{
  margin:10px 0 0;
  color:var(--muted);
  font-size:15px;
}

.split{
  margin-top:20px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
.arch-card{
  border:1px solid var(--line);
  background:#fff;
  border-radius:18px;
  padding:22px;
}
.arch-card h3{margin:0;font-size:24px;letter-spacing:-.4px}
.arch-card ul{
  margin:12px 0 0;
  padding-left:18px;
  color:var(--muted);
}
.arch-card li+li{margin-top:9px}

.pricing-grid{
  margin-top:24px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}
.price-card{
  border:1px solid var(--line);
  background:#fff;
  border-radius:20px;
  padding:24px;
}
.price-card.featured{
  border-color:#aceecb;
  background:linear-gradient(180deg,#ffffff 0%,#f7fff9 100%);
  box-shadow:0 14px 36px rgba(49,227,140,.16);
}
.plan{
  display:inline-flex;
  border-radius:999px;
  background:#f0f6ff;
  padding:6px 10px;
  font-size:13px;
  font-weight:700;
}
.price{
  margin-top:14px;
  font-size:44px;
  line-height:1;
  letter-spacing:-1px;
  font-weight:800;
}
.price span{
  margin-left:6px;
  font-size:14px;
  color:var(--muted);
}
.price-card ul{
  margin:14px 0 20px;
  padding-left:18px;
  color:var(--muted);
}
.price-card li+li{margin-top:8px}

.site-footer{
  border-top:1px solid #e8eef8;
  background:#fcfdff;
}
.footer-inner{
  min-height:74px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  color:#5f6f86;
}
.footer-inner a{font-weight:700;color:#1a2540}

.modal{
  position:fixed;
  inset:0;
  display:none;
  z-index:100;
}
.modal.open{display:block}
.modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(22,31,52,.34);
}
.modal-panel{
  position:relative;
  width:min(640px,calc(100% - 24px));
  margin:8vh auto;
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  padding:20px;
  box-shadow:var(--shadow);
}
.modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.modal-head h3{margin:0}
.close-btn{
  width:34px;height:34px;
  border-radius:10px;
  border:1px solid var(--line);
  background:#fff;
  font-size:20px;
  line-height:1;
  cursor:pointer;
}
.modal-form{
  margin-top:14px;
  display:grid;
  gap:10px;
}
.modal-form label{display:grid;gap:6px}
.modal-form span{font-size:13px;color:#6a7a93}
.modal-form input,.modal-form textarea{
  border:1px solid var(--line);
  border-radius:10px;
  padding:11px 12px;
  font:inherit;
}
.modal-form input:focus,.modal-form textarea:focus{
  outline:2px solid #cbf7e0;
  border-color:#9be7c0;
}
.form-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:4px;
}

@media (max-width: 980px){
  .header-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:66px;
    gap:12px;
  }
  .header-nav{display:none}
  .hero-wrap,.cards-3,.split,.pricing-grid{grid-template-columns:1fr}
  .hero-main{padding:24px}
  .hero-main h1{font-size:38px}
  .visual-top{flex-wrap:wrap}
  .map-stage{min-height:280px}
  .rider-card{position:relative;right:auto;top:auto;margin:12px}
  .flow-line{left:56px;top:86px;height:142px}
  .flow-node{left:38px;right:12px}
  .node-a{top:64px}
  .node-b{top:126px}
  .node-c{top:188px}
  .site-header .btn{
    padding:8px 14px;
    font-size:14px;
    border-radius:10px;
    flex:0 0 auto;
  }
  .brand img{
    width:120px;
    height:auto;
  }
}