:root {
  --nx-navy: #031b3b;
  --nx-blue: #064aa0;
  --nx-green: #22d56b;
  --nx-mint: #8af5a7;
  --nx-ink: #10233e;
  --nx-paper: #f4f8f5;
}

body.product-experience {
  margin: 0;
  background: var(--nx-paper);
  color: var(--nx-ink);
  font-family: Arial, Helvetica, sans-serif;
}

.px-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 6vw;
  box-sizing: border-box;
  color: #fff;
  background: rgba(3, 27, 59, .93);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(139, 245, 167, .18);
}

.px-brand img { display: block; width: 174px; height: auto; }
.px-back { color: #fff; font-size: .82rem; font-weight: 700; letter-spacing: .06em; text-decoration: none; text-transform: uppercase; }
.px-back:hover { color: var(--nx-mint); }

.px-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 745px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(390px, .9fr);
  align-items: center;
  padding: 72px max(6vw, 30px) 88px;
  box-sizing: border-box;
  color: #fff;
  background: radial-gradient(circle at 80% 30%, rgba(34, 213, 107, .25), transparent 24%), linear-gradient(130deg, #02142d 0%, #07356e 56%, #041a36 100%);
}

.px-hero:before, .px-hero:after { content: ''; position: absolute; z-index: -1; border-radius: 50%; filter: blur(1px); }
.px-hero:before { width: 740px; height: 740px; right: -310px; bottom: -400px; border: 1px solid rgba(134, 245, 170, .32); box-shadow: 0 0 0 80px rgba(34, 213, 107, .025), 0 0 0 160px rgba(34, 213, 107, .02); }
.px-hero:after { width: 400px; height: 400px; left: 35%; top: -260px; background: rgba(19, 118, 230, .26); }

.px-kicker { margin: 0 0 16px; color: var(--nx-mint); font-size: .8rem; font-weight: 800; letter-spacing: .19em; text-transform: uppercase; }
.px-hero h1 { max-width: 720px; margin: 0; font-size: clamp(3.3rem, 7vw, 7.2rem); line-height: .86; letter-spacing: -.065em; }
.px-hero h1 span { display: block; color: var(--nx-green); }
.px-lead { max-width: 560px; margin: 28px 0 32px; color: #d8e9ff; font-size: clamp(1rem, 1.5vw, 1.25rem); line-height: 1.65; }
.px-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.px-pills span { padding: 11px 15px; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; background: rgba(255,255,255,.08); font-size: .87rem; font-weight: 700; }
.px-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; }
.px-button { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 24px; border: 1px solid transparent; border-radius: 9px; color: #021b38; background: var(--nx-green); font-size: .86rem; font-weight: 800; letter-spacing: .03em; text-decoration: none; text-transform: uppercase; transition: transform .2s, box-shadow .2s; }
.px-button:hover { color: #021b38; transform: translateY(-2px); box-shadow: 0 14px 26px rgba(34,213,107,.22); }
.px-button.ghost { color: #fff; border-color: rgba(255,255,255,.4); background: transparent; }

.px-product-stage { position: relative; min-height: 500px; display: grid; place-items: center; perspective: 900px; }
.px-orbit { position: absolute; width: min(40vw, 530px); aspect-ratio: 1; border: 1px solid rgba(138,245,167,.33); border-radius: 50%; transform: rotateX(65deg) rotateZ(-20deg); }
.px-orbit:before, .px-orbit:after { content: ''; position: absolute; inset: 9% -10%; border: 1px solid rgba(54,153,255,.28); border-radius: 50%; }
.px-orbit:after { inset: 22% -20%; border-color: rgba(34,213,107,.24); }
.px-product-card { position: relative; z-index: 2; transform: rotate(7deg); transition: transform .18s ease-out; transform-style: preserve-3d; }
.px-bottle { position: relative; width: min(290px, 54vw); height: 460px; overflow: hidden; border: 1px solid rgba(181,244,218,.48); border-radius: 32px 32px 47px 47px; background: linear-gradient(115deg, rgba(255,255,255,.25), transparent 25%), linear-gradient(160deg, #1a4d8b, #06234c 53%, #021631); box-shadow: inset 18px 0 20px rgba(255,255,255,.09), inset -30px -20px 40px rgba(0,0,0,.25), 0 35px 60px rgba(0,0,0,.42), 0 0 65px rgba(34,213,107,.18); }
.px-bottle:before { content: ''; position: absolute; top: -54px; left: 26%; width: 48%; height: 76px; border-radius: 15px 15px 6px 6px; background: linear-gradient(90deg, #01224b, #1c63ae, #041d43); box-shadow: 0 -7px 0 #8ceea2; }
.px-bottle:after { content: ''; position: absolute; width: 75%; height: 75%; left: -14%; bottom: -26%; border-radius: 50%; background: rgba(40,232,114,.22); filter: blur(16px); }
.px-bottle-content { position: relative; z-index: 1; padding: 72px 28px 28px; }
.px-bottle-brand { display: block; margin-bottom: 55px; color: #bdffcc; font-size: .7rem; font-weight: 800; letter-spacing: .18em; }
.px-bottle-name { display: block; color: #fff; font-size: 2.9rem; font-weight: 900; line-height: .86; letter-spacing: -.075em; }
.px-bottle-name em { display: block; color: var(--nx-green); font-style: normal; }
.px-bottle-type { display: block; margin-top: 18px; color: #d5edff; font-size: .68rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.px-bottle-g { display: block; position: absolute; right: 22px; bottom: 21px; color: #d8ffe1; font-size: 1.1rem; font-weight: 800; }
.px-drag { position: absolute; z-index: 3; bottom: 18px; color: #cfe4ff; font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.px-node { position: absolute; z-index: 5; width: 15px; height: 15px; padding: 0; border: 2px solid #d8ffe4; border-radius: 50%; outline: 0; background: #20d66e; box-shadow: 0 0 0 7px rgba(32,214,110,.17),0 0 18px rgba(32,214,110,.92); cursor: pointer; transition: transform .2s; }
.px-node:hover,.px-node:focus { transform: scale(1.35); }.px-node.one{top:35%;right:-20px}.px-node.two{top:61%;left:-20px}.px-node.three{bottom:15%;right:-17px}
.px-node span { position:absolute; width:156px; padding:10px 12px; border:1px solid rgba(185,255,210,.38); border-radius:8px; color:#e8fff0; background:rgba(2,21,50,.93); box-shadow:0 12px 25px rgba(0,0,0,.24); font-size:.72rem; font-weight:700; line-height:1.35; opacity:0; pointer-events:none; transform:translate(-8px,-50%); transition:.2s; }.px-node:hover span,.px-node:focus span{opacity:1;transform:translate(0,-50%)}.px-node.one span,.px-node.three span{right:26px}.px-node.two span{left:26px}

.px-section { padding: 105px max(6vw, 30px); }
.px-section-inner { max-width: 1180px; margin: auto; }
.px-eyebrow { margin: 0 0 12px; color: #078a4c; font-size: .78rem; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; }
.px-section h2 { max-width: 720px; margin: 0; color: #08295b; font-size: clamp(2rem, 4vw, 4rem); line-height: .98; letter-spacing: -.055em; }
.px-intro { max-width: 740px; margin: 26px 0 0; color: #4b5d72; font-size: 1.08rem; line-height: 1.75; }

.px-flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 55px; }
.px-flow-card { position: relative; min-height: 190px; padding: 24px; overflow: hidden; border-radius: 17px; background: #fff; box-shadow: 0 13px 35px rgba(5,39,81,.09); }
.px-flow-number { color: #17aa60; font-size: .78rem; font-weight: 900; letter-spacing: .1em; }
.px-flow-card h3 { margin: 43px 0 9px; color: #08295b; font-size: 1.27rem; }
.px-flow-card p { margin: 0; color: #526477; font-size: .94rem; line-height: 1.5; }
.px-flow-card:after { content: ''; position: absolute; right: -30px; top: -30px; width: 110px; height: 110px; border: 1px solid #7be8a5; border-radius: 50%; }

.px-spec-section { color: #fff; background: #041e43; }
.px-spec-section h2 { color: #fff; }
.px-spec-section .px-eyebrow { color: var(--nx-mint); }
.px-spec-grid { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 18px; margin-top: 52px; }
.px-spec { min-height: 178px; padding: 28px; border: 1px solid rgba(154,222,205,.22); border-radius: 16px; background: linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.025)); }
.px-spec.wide { grid-row: span 2; }
.px-spec strong { display: block; color: #76efa3; font-size: clamp(2.1rem,4vw,3.8rem); line-height: 1; letter-spacing: -.06em; }
.px-spec h3 { margin: 17px 0 8px; color: #fff; font-size: 1.08rem; }
.px-spec p { margin: 0; color: #c8d8e8; line-height: 1.55; }
.px-spec-list { display: grid; gap: 15px; margin-top: 25px; }
.px-spec-list div { padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.12); }
.px-spec-list span { display: block; color: #a8c2de; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.px-spec-list b { display: block; margin-top: 4px; font-size: 1rem; }

.px-cultures { display: flex; flex-wrap: wrap; gap: 12px; margin: 42px 0 0; }
.px-culture { min-width: 160px; flex: 1; padding: 23px 19px; border: 1px solid #c9d9d1; border-radius: 14px; color: #0b3565; background: #fff; text-align: left; font-weight: 800; transition: transform .2s, background .2s, color .2s; cursor: pointer; }
.px-culture:hover, .px-culture.active { transform: translateY(-4px); border-color: #26c96b; color: #fff; background: #087444; }
.px-culture small { display: block; margin-top: 7px; opacity: .72; font-weight: 500; }
.px-culture-note { min-height: 60px; margin: 24px 0 0; padding: 20px 24px; border-left: 4px solid #18b961; color: #405269; background: #e8f7ed; line-height: 1.6; }

.px-cta { position: relative; overflow: hidden; color: #fff; background: linear-gradient(110deg, #04204a, #075e48); }
.px-cta:after { content: 'Mn'; position: absolute; right: 4vw; bottom: -100px; color: rgba(255,255,255,.07); font-size: clamp(13rem, 28vw, 29rem); font-weight: 900; letter-spacing: -.12em; }
.px-cta-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: end; }
.px-cta h2 { color: #fff; }
.px-cta p { max-width: 650px; color: #d2e7f7; font-size: 1.1rem; line-height: 1.65; }
.px-cta .px-button { white-space: nowrap; }

@media (max-width: 900px) {
  .px-hero { grid-template-columns: 1fr; min-height: auto; padding-top: 78px; }
  .px-product-stage { min-height: 440px; margin-top: 20px; }
  .px-orbit { width: 440px; }
  .px-flow { grid-template-columns: repeat(2, 1fr); }
  .px-spec-grid { grid-template-columns: 1fr 1fr; }
  .px-spec.wide { grid-row: auto; grid-column: span 2; }
}
@media (max-width: 600px) {
  .px-topbar { min-height: 66px; padding: 0 20px; }
  .px-brand img { width: 132px; }
  .px-back { font-size: .68rem; }
  .px-hero, .px-section { padding-left: 22px; padding-right: 22px; }
  .px-hero { padding-top: 55px; }
  .px-product-stage { min-height: 408px; }
  .px-bottle { height: 390px; }
  .px-flow, .px-spec-grid, .px-cta-grid { grid-template-columns: 1fr; }
  .px-spec.wide { grid-column: auto; }
  .px-section { padding-top: 74px; padding-bottom: 74px; }
  .px-cta .px-button { width: 100%; }
}