@import "tailwindcss";

:root {
  --ink: #071735;
  --blue: #0f5cff;
  --cyan: #25d7ff;
  --muted: #67728b;
  --line: rgba(15, 92, 255, .16);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #f7faff; color: var(--ink); font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif; }
a { color: inherit; text-decoration: none; }
main { overflow: hidden; }
.nav { height: 76px; padding: 0 clamp(24px, 6vw, 96px); display: flex; align-items: center; justify-content: space-between; position: fixed; inset: 0 0 auto; z-index: 20; background: rgba(247,250,255,.86); backdrop-filter: blur(18px); border-bottom: 1px solid rgba(15,92,255,.08); }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: .04em; }
.brand-mark { width: 34px; height: 34px; display: grid; place-items: center; border: 2px solid var(--blue); border-radius: 50%; color: var(--blue); box-shadow: inset -7px 0 0 #c8f6ff; }
.brand-product { color: var(--blue); }
.nav nav { display: flex; gap: 34px; font-size: 14px; color: #44506b; }
.nav nav a:hover { color: var(--blue); }
.nav-cta, .primary, .contact a { background: var(--blue); color: white; border-radius: 999px; padding: 12px 22px; font-weight: 700; box-shadow: 0 12px 30px rgba(15,92,255,.22); }
.hero { min-height: 780px; padding: 160px clamp(24px, 7vw, 112px) 90px; display: grid; grid-template-columns: 1.04fr .96fr; align-items: center; gap: 48px; position: relative; background: radial-gradient(circle at 75% 28%, rgba(37,215,255,.18), transparent 27%), linear-gradient(135deg,#f8fbff 0%,#e9f2ff 55%,#f7fbff 100%); }
.hero:before { content: ""; position: absolute; inset: 0; opacity: .22; background-image: linear-gradient(rgba(15,92,255,.1) 1px, transparent 1px), linear-gradient(90deg,rgba(15,92,255,.1) 1px, transparent 1px); background-size: 44px 44px; mask-image: linear-gradient(to right, transparent 0%, black 75%); }
.hero-copy, .hero-visual { position: relative; z-index: 1; }
.eyebrow { color: var(--blue); font-size: 12px; letter-spacing: .22em; font-weight: 800; margin: 0 0 20px; }
h1 { font-size: clamp(46px, 5vw, 76px); line-height: 1.12; letter-spacing: -.045em; margin: 0; }
h1 span { color: var(--blue); }
.hero-lead { max-width: 650px; font-size: 19px; line-height: 1.85; color: #4f5d78; margin: 30px 0; }
.hero-actions { display: flex; gap: 14px; align-items: center; }
.secondary { padding: 12px 22px; border: 1px solid var(--line); border-radius: 999px; color: var(--blue); font-weight: 700; background: rgba(255,255,255,.65); }
.hero-proof { margin-top: 42px; display: flex; gap: 28px; color: #72809a; font-size: 13px; }
.hero-proof b { color: var(--ink); display: block; font-size: 18px; margin-bottom: 3px; }
.hero-visual { height: 560px; border-radius: 50%; }
.orbit { position: absolute; border: 1px solid rgba(15,92,255,.22); border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%,-50%); }
.orbit-one { width: 430px; height: 430px; }
.orbit-two { width: 560px; height: 560px; border-style: dashed; animation: spin 26s linear infinite; }
@keyframes spin { to { transform: translate(-50%,-50%) rotate(360deg); } }
.core { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 210px; height: 210px; border-radius: 50%; color: white; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(circle at 35% 25%, #45ddff, #0f5cff 62%, #07309d); box-shadow: 0 32px 80px rgba(15,92,255,.36), inset 0 0 0 8px rgba(255,255,255,.1); }
.core small { letter-spacing: .28em; font-weight: 800; opacity: .8; }
.core strong { font-size: 29px; margin: 4px 0; }
.core em { font-style: normal; font-size: 9px; letter-spacing: .2em; opacity: .72; }
.node { position: absolute; width: 118px; height: 62px; border: 1px solid rgba(15,92,255,.2); background: rgba(255,255,255,.88); box-shadow: 0 18px 40px rgba(31,70,138,.12); border-radius: 14px; display: flex; align-items: center; gap: 10px; padding: 12px; font-weight: 700; }
.node span { color: var(--blue); font-size: 11px; }
.node-1 { left: 8%; top: 16%; }.node-2 { right: 3%; top: 20%; }.node-3 { left: 2%; bottom: 18%; }.node-4 { right: 8%; bottom: 13%; }
.pulse-card { position: absolute; right: 2%; top: 48%; width: 150px; padding: 16px; border-radius: 14px; background: #071735; color: white; box-shadow: 0 18px 40px rgba(7,23,53,.24); }
.pulse-card span,.pulse-card i { display: block; color: #9fb1d0; font-size: 11px; font-style: normal; }.pulse-card b { display: block; color: #57edb1; margin: 6px 0; }
.section { padding: 110px clamp(24px, 7vw, 112px); }
.section-head { max-width: 780px; text-align: center; margin: 0 auto 58px; }
.section-head.left { text-align: left; margin-left: 0; }
h2 { font-size: clamp(34px, 4vw, 56px); line-height: 1.18; letter-spacing: -.035em; margin: 0 0 20px; }
.section-head > p:last-child,.solution-intro > p:last-child,.architecture-copy > p,.contact > p { color: var(--muted); font-size: 17px; line-height: 1.75; }
.problem { background: white; }
.problem-grid { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.problem-grid article { min-height: 250px; padding: 38px 28px; border-right: 1px solid var(--line); }
.problem-grid article:last-child { border-right: 0; }
.problem-grid span,.capability-grid span { font: 800 12px/1 Arial; color: var(--blue); letter-spacing: .15em; }
.problem-grid h3,.capability-grid h3 { font-size: 23px; margin: 44px 0 12px; }
.problem-grid p,.capability-grid p,.loop p,.value-list p { color: var(--muted); line-height: 1.7; margin: 0; }
.solution { background: #071735; color: white; display: grid; grid-template-columns: .8fr 1.2fr; gap: 80px; align-items: center; }
.solution .eyebrow { color: var(--cyan); }
.solution-intro > p:last-child { color: #9fb1d0; }
.loop { display: grid; grid-template-columns: repeat(5,1fr); }
.loop article { padding: 30px 18px; border-left: 1px solid rgba(255,255,255,.12); min-height: 260px; }
.loop article:first-child { border-left: 0; }
.loop span { color: var(--cyan); font-size: 11px; }
.loop h3 { font-size: 24px; margin: 54px 0 16px; }
.loop p { color: #aab8d0; font-size: 13px; }
.architecture { display: grid; grid-template-columns: .82fr 1.18fr; gap: 64px; align-items: center; background: linear-gradient(180deg,#f7faff,#edf4ff); }
.architecture-copy ul { margin: 32px 0 0; padding: 0; list-style: none; }
.architecture-copy li { padding: 15px 0 15px 28px; border-top: 1px solid var(--line); position: relative; color: #45526c; }
.architecture-copy li:before { content: "↗"; color: var(--blue); position: absolute; left: 2px; font-weight: 900; }
.image-frame,.screen { background: white; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; box-shadow: 0 24px 70px rgba(32,75,145,.13); }
.image-frame img,.screen img { display: block; width: 100%; height: auto; }
.platform { background: white; }
.capability-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
.capability-grid article { padding: 30px; min-height: 235px; background: #f4f8ff; border-radius: 16px; border: 1px solid #e4edff; }
.capability-grid h3 { margin-top: 48px; }
.product-showcase { margin-top: 80px; min-height: 560px; position: relative; }
.main-screen { width: 78%; }
.secondary-screen { width: 47%; position: absolute; right: 0; bottom: 0; border: 6px solid white; }
.value { color: white; background: linear-gradient(135deg,#0f5cff,#063292 68%,#061b45); }
.value .eyebrow { color: #7deaff; }
.value { display: grid; grid-template-columns: .8fr 1.2fr; gap: 80px; align-items: start; }
.value-list { display: grid; grid-template-columns: repeat(2,1fr); }
.value-list div { padding: 30px; border-left: 1px solid rgba(255,255,255,.18); border-bottom: 1px solid rgba(255,255,255,.18); }
.value-list b { display: block; font-size: 24px; margin-bottom: 12px; }
.value-list p { color: #c7d6f1; }
.contact { text-align: center; background: radial-gradient(circle at 50% 0, rgba(37,215,255,.22), transparent 35%),#071735; color: white; padding-top: 130px; padding-bottom: 130px; }
.contact .eyebrow { color: var(--cyan); }.contact > p { color: #aab8d0; margin-bottom: 36px; }.contact a { display: inline-block; }
.lead-form { max-width: 520px; margin: 44px auto 0; padding: 38px 36px; border-radius: 16px; background: #fff; box-shadow: 0 20px 44px rgba(0,0,0,.18); text-align: left; color: #1a2e3f; }
.lead-form h3 { margin: 0 0 8px; text-align: center; font-size: 20px; }.lead-form-description { margin: 0 0 26px !important; color: #4f6d9a !important; text-align: center; font-size: 14px !important; }
.lead-form label { display: grid; gap: 8px; margin-bottom: 16px; color: #173965; font-size: 14px; font-weight: 700; }
.lead-form label span { color: #0f5cff; }
.lead-form input,.lead-form textarea { width: 100%; box-sizing: border-box; border: 1px solid #d7e1ef; border-radius: 9px; padding: 12px 14px; color: #1a2e3f; background: #f8fafc; font: inherit; outline: none; }
.lead-form textarea { min-height: 96px; resize: vertical; }
.lead-form input:focus,.lead-form textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(15,92,255,.12); }
.lead-form input::placeholder,.lead-form textarea::placeholder { color: #7d8da7; }
.lead-form button { width: 100%; border: 0; border-radius: 999px; padding: 14px 23px; color: white; background: #0a9658; box-shadow: 0 10px 22px rgba(10,150,88,.25); font: inherit; font-weight: 700; cursor: pointer; }
.lead-form button:disabled { cursor: wait; opacity: .7; }
.lead-form-status { margin: 16px 0 0; font-size: 14px; }.lead-form-status.success { color: #7cf1bd; }.lead-form-status.error { color: #ffb9b9; }
.lead-form small { display: block; margin-top: 14px; color: #6c83a6; font-size: 12px; text-align: center; }
.business-contact { margin-top: 24px; padding-top: 20px; border-top: 1px solid #d7e1ef; text-align: center; }
.business-contact p { margin: 0 0 12px !important; color: #173965 !important; font-size: 15px !important; font-weight: 700; }
.business-contact img { display: block; width: 168px; height: 168px; margin: 0 auto; border-radius: 10px; background: #fff; }
footer { padding: 25px clamp(24px,7vw,112px); display: flex; justify-content: space-between; color: #8290aa; background: #041025; font-size: 12px; }

@media (max-width: 980px) {
  .nav nav { display: none; }
  .hero { grid-template-columns: 1fr; padding-top: 130px; }
  .hero-visual { height: 500px; }
  .problem-grid,.capability-grid { grid-template-columns: repeat(2,1fr); }
  .solution,.architecture,.value { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .nav { height: 66px; }.nav-cta { display: none; }
  .hero { min-height: auto; padding-top: 118px; }
  .hero-visual { transform: scale(.72); margin: -60px -80px; }
  .hero-proof { flex-wrap: wrap; }
  .section { padding-top: 78px; padding-bottom: 78px; }
  .problem-grid,.capability-grid,.loop { grid-template-columns: 1fr; }
  .problem-grid article { border-right: 0; border-bottom: 1px solid var(--line); }
  .loop article { border-left: 0; border-top: 1px solid rgba(255,255,255,.12); min-height: auto; }
  .product-showcase { min-height: 420px; }.main-screen { width: 100%; }.secondary-screen { width: 72%; }
  .value-list { grid-template-columns: 1fr; }
  .lead-form { padding: 30px 24px; }
  footer { flex-direction: column; gap: 8px; text-align: center; }
}