:root{--navy:#061523;--navy-2:#0a1d2d;--panel:rgba(13,36,53,.78);--panel-2:rgba(18,47,68,.82);--line:rgba(148,205,225,.2);--line-strong:rgba(101,228,225,.46);--ink:#e8f6f8;--muted:#9eb7c3;--cyan:#65e4e1;--blue:#5ca8df;--violet:#a49cff;--amber:#f5bd69;--green:#78e0bb;--max:1180px;--radius:22px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--navy);color:var(--ink);font-family:"PingFang SC","Noto Sans SC",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.65}a{color:inherit;text-decoration:none}button{font:inherit}img{display:block;max-width:100%}.product-ambient{position:fixed;z-index:-1;pointer-events:none;border-radius:50%;filter:blur(1px)}.product-ambient-a{width:40vw;height:40vw;right:-18vw;top:5vh;background:radial-gradient(circle,rgba(66,158,209,.18),transparent 68%)}.product-ambient-b{width:32vw;height:32vw;left:-18vw;top:52vh;background:radial-gradient(circle,rgba(117,118,255,.12),transparent 68%)}
.product-topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:30px;padding:13px clamp(18px,4vw,58px);background:rgba(6,21,35,.86);border-bottom:1px solid rgba(148,205,225,.14);backdrop-filter:blur(18px)}.product-brand{display:flex;align-items:center;gap:12px;margin-right:auto}.product-brand img{width:104px;height:auto}.product-brand span{color:var(--muted);font-size:10px;letter-spacing:.17em}.product-nav{display:flex;gap:22px;color:var(--muted);font-size:12px}.product-nav a{transition:color .2s ease}.product-nav a:hover{color:var(--cyan)}.product-back{display:inline-flex;align-items:center;gap:12px;padding:9px 14px;border:1px solid rgba(101,228,225,.36);border-radius:999px;color:var(--cyan);font-size:12px;white-space:nowrap}.product-back span{font-size:16px}.product-back:hover{background:rgba(101,228,225,.1)}
main{overflow:hidden}.product-hero,.section,.product-footer-section{width:min(calc(100% - 36px),var(--max));margin:0 auto}.product-hero{min-height:calc(100vh - 70px);display:grid;grid-template-columns:minmax(0,.9fr) minmax(420px,1.1fr);align-items:center;gap:40px;padding:90px 0 80px}.eyebrow,.section-index{margin:0;color:var(--cyan);font-size:11px;font-weight:800;letter-spacing:.15em;text-transform:uppercase}.pulse-dot{display:inline-block;width:7px;height:7px;margin-right:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 6px rgba(101,228,225,.13)}h1,h2,p{margin-top:0}h1{margin:22px 0 24px;font-size:clamp(42px,6vw,82px);line-height:1.07;letter-spacing:-.07em}h1 em,h2 em{font-style:normal;color:var(--cyan)}.hero-lede{max-width:600px;color:#bbd0d8;font-size:17px;line-height:1.9}.hero-status{display:flex;gap:12px;margin-top:38px}.hero-status div{min-width:136px;padding:13px 15px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.035)}.hero-status b{display:block;color:var(--cyan);font-size:29px;line-height:1}.hero-status span{display:block;margin-top:9px;color:var(--muted);font-size:11px}.hero-products{position:relative;min-height:470px}.hero-products:before{content:"";position:absolute;inset:6% 5% 4%;border:1px solid rgba(101,228,225,.18);border-radius:50%;transform:rotate(-11deg)}.hero-products:after{content:"";position:absolute;inset:15% 16% 13%;border:1px solid rgba(92,168,223,.18);border-radius:50%;transform:rotate(21deg)}.hero-product{position:absolute;z-index:2;width:35%;padding:12px;border:1px solid rgba(148,205,225,.26);border-radius:20px;background:linear-gradient(145deg,rgba(27,63,84,.84),rgba(7,24,39,.9));box-shadow:0 22px 50px rgba(0,0,0,.26);transform:translate3d(0,0,0);transition:transform .3s ease,border-color .3s ease}.hero-product:hover{transform:translateY(-7px);border-color:var(--cyan)}.hero-product img{width:100%;height:180px;object-fit:contain;border-radius:13px;background:#eff5f2}.hero-product span{display:block;margin-top:10px;color:var(--muted);font-size:10px;letter-spacing:.08em}.hero-product-a{left:4%;top:18%;transform:rotate(-7deg)}.hero-product-b{right:4%;top:11%;transform:rotate(7deg)}.hero-product-c{left:33%;bottom:4%;transform:rotate(-2deg)}.hero-product-a:hover{transform:rotate(-7deg) translateY(-7px)}.hero-product-b:hover{transform:rotate(7deg) translateY(-7px)}.hero-grid-mark{position:absolute;right:16%;bottom:18%;width:130px;height:130px;background:linear-gradient(90deg,rgba(101,228,225,.2) 1px,transparent 1px),linear-gradient(rgba(101,228,225,.2) 1px,transparent 1px);background-size:18px 18px;opacity:.42;mask-image:radial-gradient(circle,#000,transparent 70%)}
.section{padding:88px 0}.section-heading{max-width:790px;margin-bottom:42px}.section-heading h2{margin:12px 0 13px;font-size:clamp(30px,4vw,54px);line-height:1.16;letter-spacing:-.06em}.section-heading>p:last-child{max-width:680px;color:var(--muted);font-size:14px}.compact-heading{margin-bottom:34px}
.matrix-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.product-card{position:relative;min-height:374px;padding:15px;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(145deg,rgba(18,47,68,.82),rgba(8,25,39,.9));cursor:pointer;transition:transform .25s ease,border-color .25s ease,background .25s ease}.product-card:hover,.product-card.is-selected{transform:translateY(-5px);border-color:var(--line-strong);background:linear-gradient(145deg,rgba(23,61,84,.95),rgba(8,25,39,.94))}.product-card img{width:100%;height:188px;object-fit:contain;border-radius:15px;background:#f1f6f3}.product-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:14px 0 8px}.product-card-top span:first-child{color:var(--muted);font-size:10px;letter-spacing:.1em}.status{padding:5px 8px;border:1px solid currentColor;border-radius:999px;font-size:10px;line-height:1}.status-ready{color:var(--green)}.status-validation{color:var(--amber)}.status-ecosystem{color:var(--violet)}.product-card h3{margin:0;color:#f3ffff;font-size:19px;line-height:1.3;letter-spacing:-.04em}.product-card-copy{min-height:43px;margin:8px 0 12px;color:var(--muted);font-size:12px;line-height:1.6}.tag-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}.tag-list span{padding:5px 8px;border:1px solid rgba(101,228,225,.22);border-radius:999px;color:#bfeeed;background:rgba(101,228,225,.07);font-size:10px}.card-open{position:absolute;right:17px;bottom:15px;color:var(--cyan);font-size:16px;transition:transform .2s ease}.product-card.is-selected .card-open{transform:rotate(45deg)}
.product-detail-panel{margin-top:20px;padding:28px;border:1px solid var(--line-strong);border-radius:var(--radius);background:linear-gradient(130deg,rgba(21,57,78,.94),rgba(8,25,39,.95));animation:panelIn .35s ease}.detail-head{display:flex;align-items:flex-start;justify-content:space-between;gap:25px}.detail-kicker{color:var(--cyan);font-size:10px;font-weight:800;letter-spacing:.12em}.detail-head h3{margin:7px 0 0;font-size:30px;line-height:1.2;letter-spacing:-.05em}.detail-image{width:min(230px,100%);padding:8px;border:1px solid var(--line);border-radius:16px;background:#f1f6f3}.detail-image img{width:100%;height:140px;object-fit:contain;border-radius:10px}.detail-body{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:15px;margin-top:25px}.detail-block{min-height:150px;padding:18px;border:1px solid rgba(148,205,225,.15);border-radius:15px;background:rgba(255,255,255,.035)}.detail-block span{color:var(--cyan);font-size:10px;font-weight:800;letter-spacing:.1em}.detail-block p{margin:9px 0 0;color:#c7dce2;font-size:13px;line-height:1.78}.detail-block ul{margin:9px 0 0;padding-left:18px;color:#c7dce2;font-size:13px;line-height:1.8}.detail-close{border:0;background:transparent;color:var(--muted);font-size:20px;cursor:pointer}.detail-close:hover{color:var(--cyan)}
.ecosystem-section{position:relative}.ecosystem-architecture{position:relative;display:grid;gap:20px;padding:24px;border:1px solid var(--line);border-radius:28px;background:rgba(8,26,41,.72)}.eco-layer{position:relative;display:grid;grid-template-columns:150px repeat(4,minmax(0,1fr));gap:12px;align-items:stretch;padding:18px;border:1px solid rgba(148,205,225,.15);border-radius:20px;background:rgba(255,255,255,.025)}.layer-label{display:flex;flex-direction:column;justify-content:center;padding-right:10px}.layer-label span{color:var(--cyan);font-size:10px;letter-spacing:.12em}.layer-label b{margin-top:4px;font-size:18px}.layer-label small{margin-top:7px;color:var(--muted);font-size:10px;line-height:1.5}.eco-node-group,.system-node,.service-node{min-height:106px;padding:14px;border:1px solid rgba(101,228,225,.2);border-radius:15px;background:rgba(14,46,64,.7)}.group-label{display:block;color:#93b7c3;font-size:10px}.eco-node-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}.eco-node-list span{padding:5px 7px;border-radius:8px;background:rgba(101,228,225,.1);color:#d3f6f2;font-size:10px}.eco-layer-system{grid-template-columns:150px repeat(3,minmax(0,1fr))}.system-node strong,.service-node strong{display:block;color:#efffff;font-size:15px;line-height:1.35}.system-node small,.service-node small{display:block;margin-top:8px;color:var(--muted);font-size:11px;line-height:1.6}.system-node-agent{border-color:rgba(164,156,255,.42);background:rgba(95,81,176,.13)}.system-node-agent i{display:block;margin-top:10px;color:#c5c0ff;font-size:10px;font-style:normal}.eco-layer-service{grid-template-columns:150px repeat(3,minmax(0,1fr))}.service-node{border-color:rgba(245,189,105,.28);background:rgba(73,52,29,.24)}.eco-flow-line{height:28px;position:absolute;left:18%;right:18%;z-index:2;pointer-events:none;border-top:1px solid rgba(101,228,225,.28);overflow:hidden}.eco-flow-line:after{content:"";position:absolute;top:-2px;left:-10%;width:80px;height:2px;background:linear-gradient(90deg,transparent,var(--cyan),transparent);animation:flow 5s linear infinite}.eco-flow-one{top:36.5%}.eco-flow-two{top:64.7%}.ecosystem-caption{margin:18px 0 0;color:var(--cyan);font-size:13px;text-align:center}
.flywheel-strip{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;padding:23px;border:1px solid var(--line-strong);border-radius:22px;background:linear-gradient(90deg,rgba(101,228,225,.08),rgba(92,168,223,.08))}.flywheel-strip span{color:#dcfffc;font-size:14px;font-weight:700}.flywheel-strip i{color:var(--cyan);font-style:normal;font-size:20px}.flywheel-note{display:grid;grid-template-columns:220px 1fr;gap:18px;margin-top:18px;padding:18px 20px;border-left:2px solid var(--cyan);background:rgba(101,228,225,.06)}.flywheel-note b{color:var(--cyan);font-size:13px}.flywheel-note p{margin:0;color:var(--muted);font-size:12px}.product-footer-section{padding:40px 0 90px;text-align:center}.evidence-note{max-width:790px;margin:0 auto 54px;padding:17px 20px;border:1px solid rgba(148,205,225,.16);border-radius:16px;background:rgba(255,255,255,.025);text-align:left}.evidence-note span{color:var(--cyan);font-size:10px;font-weight:800;letter-spacing:.12em}.evidence-note p{margin:8px 0 0;color:var(--muted);font-size:12px}.closing-line{margin-bottom:26px;color:#e6ffff;font-size:clamp(20px,3vw,32px);font-weight:700;letter-spacing:-.04em}.product-back-footer{display:inline-flex}
@keyframes flow{from{transform:translateX(0)}to{transform:translateX(1550px)}}@keyframes panelIn{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:translateY(0)}}
@media (max-width:900px){.product-topbar{gap:14px;padding:11px 14px}.product-brand span,.product-back-desktop{display:none}.product-nav{width:100%;gap:18px;overflow-x:auto;white-space:nowrap;padding-bottom:2px}.product-nav a{font-size:11px}.product-hero{grid-template-columns:1fr;padding-top:64px}.hero-products{min-height:390px}.hero-product img{height:145px}.hero-status div{min-width:0;flex:1}.hero-status span{font-size:10px}.matrix-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.eco-layer,.eco-layer-system,.eco-layer-service{grid-template-columns:1fr 1fr}.layer-label{grid-column:1/-1;padding-right:0}.eco-flow-one,.eco-flow-two{left:12%;right:12%}.eco-flow-one{top:43%}.eco-flow-two{top:69%}.detail-body{grid-template-columns:1fr}.detail-image{width:180px}.flywheel-note{grid-template-columns:1fr;gap:5px}}
@media (max-width:620px){.product-hero,.section,.product-footer-section{width:min(calc(100% - 28px),var(--max))}.product-hero{min-height:auto;padding:56px 0 66px}.hero-lede{font-size:14px}.hero-status{gap:7px}.hero-status div{padding:11px 8px}.hero-status b{font-size:24px}.hero-status span{line-height:1.45}.hero-products{min-height:330px;margin-top:12px}.hero-product{width:39%;padding:8px;border-radius:15px}.hero-product img{height:112px}.hero-product-a{left:0}.hero-product-b{right:0}.hero-product-c{left:30%;bottom:0}.section{padding:62px 0}.section-heading h2{font-size:31px}.matrix-grid{grid-template-columns:1fr}.product-card{min-height:345px}.product-card img{height:182px}.product-detail-panel{padding:18px}.detail-head{gap:12px}.detail-head h3{font-size:23px}.detail-image{width:140px}.detail-image img{height:95px}.ecosystem-architecture{padding:12px}.eco-layer,.eco-layer-system,.eco-layer-service{grid-template-columns:1fr}.eco-flow-line{display:none}.eco-node-group,.system-node,.service-node{min-height:0}.flywheel-strip{justify-content:flex-start;gap:7px;padding:16px}.flywheel-strip span{font-size:11px}.flywheel-strip i{font-size:15px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.eco-flow-line:after{animation:none}.product-card,.hero-product{transition:none}}

/* Inline product detail: insert directly after the selected card so later cards move down. */
.matrix-grid{align-items:start}
.product-detail-panel{grid-column:1 / -1;width:100%;margin:0 0 6px;}
.product-card.is-selected{position:relative;z-index:2;box-shadow:0 0 0 1px rgba(101,228,225,.18),0 16px 32px rgba(0,0,0,.18)}
@media (max-width:620px){.product-detail-panel{grid-column:1;margin:0 0 6px}}

/* Smooth inline detail motion: cards stay mounted and move with FLIP instead of being rebuilt. */
.product-card,.product-detail-panel{will-change:transform}
.product-card{transform:translate3d(var(--flip-x,0px),var(--flip-y,0px),0) translateY(var(--card-lift,0px));transition:transform 1.12s cubic-bezier(.35,.15,.25,1) var(--flip-delay,0ms),border-color .28s ease,background .28s ease}
.product-card:hover{--card-lift:-5px}
.product-card.is-selected{--card-lift:0px;transform:translate3d(var(--flip-x,0px),var(--flip-y,0px),0)}
.product-card.is-flipping,.product-detail-panel.is-flipping{transition:none !important}
.product-detail-panel{box-sizing:border-box;overflow:hidden;opacity:0;transform:translate3d(var(--flip-x,0px),var(--flip-y,0px),0);animation:none;transition:opacity .38s cubic-bezier(.16,1,.3,1)}
.product-detail-panel:not(.is-open){height:0 !important;min-height:0;padding:0 !important;margin:0 !important;border-width:0;opacity:0;pointer-events:none}
.product-detail-panel.is-open{height:auto;opacity:1;pointer-events:auto}
.detail-content.is-entering{animation:detailContentIn .62s cubic-bezier(.16,1,.3,1) .06s both}
@keyframes detailContentIn{from{opacity:0;transform:translateY(10px) scale(.99)}to{opacity:1;transform:translateY(0) scale(1)}}
@media (prefers-reduced-motion:reduce){.product-card,.product-detail-panel{transition:none !important}.detail-content.is-entering{animation:none}}

/* Keep the expanded detail layer in front while the following cards travel behind it. */
.product-card{z-index:1}
.product-detail-panel.is-open{position:relative;z-index:20;isolation:isolate;background:linear-gradient(130deg,rgba(21,57,78,.985),rgba(8,25,39,.995))}
.product-detail-panel.is-open .detail-content{position:relative;z-index:1}