#nano-platform-design {
  --np-ink: #101f31;
  --np-paper: #f8f7f2;
  --np-navy: #0b1728;
  --np-blue: #79b4ff;
  --np-white: #f5f8fd;
  --np-muted: #b7c7d9;
  color: var(--np-ink);
  background: var(--np-paper);
  font-family: 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  padding: clamp(28px, 5vw, 76px) 0;
  box-sizing: border-box;
}
#nano-platform-design *, #nano-platform-design *::before, #nano-platform-design *::after { box-sizing: border-box; }
/* Aligned to the same 1200px content grid and responsive gutters as every
   other section on the page (see .wrap in styles.css), so headings and
   intro copy start on the same line as "Three Different Variables" above
   and "ZetaWorks" below. */
#nano-platform-design .np-wrap { width: 100%; max-width:none; margin: 0; padding-inline:max(clamp(22px,4.2vw,64px), calc((100% - 1200px) / 2)); }
#nano-platform-design .np-intro { max-width: auto !important; margin-bottom: clamp(28px, 4vw, 46px); }
.np-system {
    margin-top: 30px !important;
}
/* The platform diagram itself is allowed to run a little wider than the text
   column, matching the "graphics can remain wider" note. */
@media (min-width: 900px) {
  #nano-platform-design .np-system { width: calc(100% + 64px); margin-left: -32px; margin-right: -32px; }
}
#nano-platform-design .np-eyebrow { display: block; margin: 0 0 17px; color: #2d64ac; font-size: 11px; font-weight: 700; line-height: 1.4; letter-spacing: .17em; text-transform: uppercase; }
#nano-platform-design .np-intro h2 { max-width: 760px; margin: 0 0 21px; font-size: clamp(30px, 3.4vw, 44px); line-height: 1.12; letter-spacing: -.03em; font-weight: 700; text-wrap: balance; }
#nano-platform-design .np-intro p { max-width: 745px; margin: 12px 0 0; color: #536172; font-size: 15px; line-height: 1.65; }
#nano-platform-design .np-system { position: relative; isolation: isolate; overflow: hidden; border-radius: 22px; border: 1px solid #253951; background: var(--np-navy); color: var(--np-white); box-shadow: 0 24px 60px -34px rgba(10,22,38,.55); }
#nano-platform-design .np-system::before { content: ""; z-index: -1; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 91% 1%, rgba(50,110,181,.13), transparent 46%), linear-gradient(105deg, rgba(255,255,255,.015), transparent 50%); }
#nano-platform-design .np-system-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 22px; padding: clamp(24px, 3.2vw, 42px) clamp(22px, 3.2vw, 42px) 27px; }
#nano-platform-design .np-system-head h3 { margin: 0 0 11px; font-weight: 600; font-size: clamp(24px, 2.5vw, 33px); line-height: 1.15; letter-spacing: -.025em; }
#nano-platform-design .np-system-head h3 sup { display: inline-block; margin-left: 2px; font-size: .41em; vertical-align: super; letter-spacing: 0; }
#nano-platform-design .np-system-head p { margin: 0; max-width: 640px; font-size: 14px; line-height: 1.6; color: var(--np-muted); }
#nano-platform-design .np-head-mark { width: 48px; height: 48px; position: relative; flex: 0 0 48px; opacity: .9; }
#nano-platform-design .np-head-mark::before, #nano-platform-design .np-head-mark::after { content:""; position:absolute; inset: 9px; border:1px solid #496687; border-radius:50%; }
#nano-platform-design .np-head-mark::after { inset:17px; border-color:var(--np-blue); background:rgba(121,180,255,.1); }
#nano-platform-design .np-top-rule { height: 1px; margin: 0 42px; background: linear-gradient(90deg, #5a98ea 0%, #345270 42%, #223247 100%); }
#nano-platform-design .np-core { padding: 26px clamp(22px, 3.2vw, 42px) 34px; }
#nano-platform-design .np-section-label { font-size: 11px; line-height: 1.4; font-weight: 650; letter-spacing: .17em; text-transform: uppercase; color: var(--np-blue); margin: 0; }
#nano-platform-design .np-process { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 21px; }
#nano-platform-design .np-stage { position: relative; min-width: 0; border:1px solid #2a3b50; border-radius: 13px; background: linear-gradient(155deg, rgba(40,67,96,.2), rgba(16,32,51,.22)); padding: 20px 19px 22px; transition: border-color .25s ease, background-color .25s ease; }
@media (hover:hover) { #nano-platform-design .np-stage:hover { border-color: #557aa5; background-color: rgba(65,107,160,.08); } }
#nano-platform-design .np-stage-top { display: flex; align-items: center; gap: 10px; }
#nano-platform-design .np-step { color: var(--np-blue); font-size: 11px; font-weight: 600; letter-spacing: .08em; font-variant-numeric: tabular-nums; }
#nano-platform-design .np-step-line { height: 1px; background: #31465e; flex: 1; }
#nano-platform-design .np-art { width: 100%; height: 165px; display:flex; align-items:center; justify-content:center; margin: 0 0 12px; }
#nano-platform-design .np-art svg { display:block; width:100%; height:100%; overflow:visible; }
#nano-platform-design .np-stage h4 { margin: 0 0 11px; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.25; letter-spacing: -.018em; font-weight: 600; }
#nano-platform-design .np-stage p { margin: 0; font-size: 14px; line-height: 1.65; color: var(--np-muted); }
#nano-platform-design .np-link { position: absolute; top: 117px; left: calc(100% + 1px); width: 28px; height: 12px; display: flex; align-items: center; justify-content: center; color: var(--np-blue); z-index: 2; }
#nano-platform-design .np-link::before { content:""; width:16px; height:1px; background:currentColor; }
#nano-platform-design .np-link::after { content:""; position:absolute; right:6px; width:5px; height:5px; border-right:1px solid currentColor; border-top:1px solid currentColor; transform:rotate(45deg); }
#nano-platform-design .np-foundation { position:relative; margin: 0 clamp(22px, 3.2vw, 42px); padding: 25px 0 28px; border-top:1px solid #47617e; }
#nano-platform-design .np-foundation::before, #nano-platform-design .np-foundation::after { content:""; position:absolute; top:-6px; width:6px; height:6px; border-radius:50%; background:var(--np-blue); border:1px solid #0b1728; }
#nano-platform-design .np-foundation::before { left:0; } #nano-platform-design .np-foundation::after { right:0; }
#nano-platform-design .np-capabilities { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; margin-top:23px; }
#nano-platform-design .np-capability { min-width:0; padding-left:15px; border-left:1px solid #395671; }
#nano-platform-design .np-capability h4 { margin:0 0 10px; color:var(--np-white); font-size:15px; line-height:1.35; font-weight:600; }
#nano-platform-design .np-capability p { margin:0; color:#c7d6e6; font-size:15px; line-height:1.65; }
#nano-platform-design .np-hierarchy { display:flex; align-items:center; justify-content:center; gap:15px; flex-wrap:wrap; padding:25px 24px; border-top:1px solid #273b52; background:rgba(4,14,27,.32); }
#nano-platform-design .np-hierarchy span { font-size:14px; line-height:1.4; font-weight:500; text-align:center; }
#nano-platform-design .np-platform-name { color:#deecff; padding:9px 14px; border:1px solid #36577c; background:rgba(67,121,190,.12); border-radius:7px; }
#nano-platform-design .np-product-name { color:var(--np-white); }
#nano-platform-design .np-environment-name { color:var(--np-muted); }
#nano-platform-design .np-hierarchy-arrow { width:24px; height:1px; background:#536d89; position:relative; flex:0 0 24px; }
#nano-platform-design .np-hierarchy-arrow::after { content:""; position:absolute; right:0; top:-2px; width:5px; height:5px; transform:rotate(45deg); border-right:1px solid #7b96b4; border-top:1px solid #7b96b4; }
#nano-platform-design .np-close { max-width:1020px; margin:30px 0 0; padding:2px 0 2px 22px; border-left:2px solid #5289d5; color:#536172; font-size:clamp(15px,1.45vw,17px); line-height:1.7; }
#nano-platform-design .np-close strong { color:var(--np-ink); font-weight:600; }
#nano-platform-design .np-trace { opacity:0; }
#nano-platform-design.np-reveal .np-trace { animation:np-trace-once 2.2s ease-in-out both; }
#nano-platform-design.np-reveal .np-stage:nth-child(2) .np-trace { animation-delay:.28s; }
#nano-platform-design.np-reveal .np-stage:nth-child(3) .np-trace { animation-delay:.56s; }
#nano-platform-design.np-reveal .np-link { animation:np-link-once 2.4s ease-out both; }
@keyframes np-trace-once { 0% { opacity:0; stroke-dashoffset:1; } 20% { opacity:1; } 72% { opacity:1; stroke-dashoffset:0; } 100% { opacity:0; stroke-dashoffset:0; } }
@keyframes np-link-once { 0%,15% { opacity:.35; } 45% { opacity:1; } 100% { opacity:.8; } }
@media (max-width: 850px) {
  #nano-platform-design { padding:30px 20px; }
  #nano-platform-design .np-system-head { padding:28px 25px 25px; }
  #nano-platform-design .np-top-rule { margin:0 25px; }
  #nano-platform-design .np-core { padding:23px 25px 28px; }
  #nano-platform-design .np-process { gap:20px; }
  #nano-platform-design .np-stage { padding:17px 13px 20px; }
  #nano-platform-design .np-art { height:136px; margin-bottom:10px; }
  #nano-platform-design .np-stage h4 { min-height:44px; font-size:17px; }
  #nano-platform-design .np-stage p { font-size:13px; }
  #nano-platform-design .np-link { width:20px; top:101px; }
  #nano-platform-design .np-link::before { width:12px; }
  #nano-platform-design .np-link::after { right:4px; }
  #nano-platform-design .np-foundation { margin:0 25px; }
  #nano-platform-design .np-capabilities { gap:17px; }
  #nano-platform-design .np-capability { padding-left:11px; }
  #nano-platform-design .np-head-mark { display:none; }
  #nano-platform-design .np-hierarchy { gap:10px; }
  #nano-platform-design .np-hierarchy span { font-size:11px; }
  #nano-platform-design .np-hierarchy-arrow { width:14px; flex-basis:14px; }
}
@media (max-width: 610px) {
  #nano-platform-design { padding:30px 16px; }
  #nano-platform-design .np-intro { margin-bottom:26px; }
  #nano-platform-design .np-intro h2 { font-size:31px; }
  #nano-platform-design .np-intro p { font-size:14px; }
  #nano-platform-design .np-system { border-radius:17px; }
  #nano-platform-design .np-system-head { padding:26px 21px 23px; }
  #nano-platform-design .np-system-head h3 { font-size:27px; max-width:280px; }
  #nano-platform-design .np-system-head p { font-size:13px; }
  #nano-platform-design .np-top-rule { margin:0 21px; }
  #nano-platform-design .np-core { padding:22px 21px 30px; }
  #nano-platform-design .np-process { grid-template-columns:minmax(0,1fr); gap:28px; margin-top:20px; }
  #nano-platform-design .np-stage { padding:19px 21px 23px; }
  #nano-platform-design .np-art { max-width:320px; height:166px; margin:0 auto 8px; }
  #nano-platform-design .np-stage h4 { min-height:0; font-size:20px; }
  #nano-platform-design .np-stage p { font-size:14px; }
  #nano-platform-design .np-link { top:100%; left:50%; width:28px; height:28px; transform:translateX(-50%) rotate(90deg); }
  #nano-platform-design .np-link::before { width:18px; }
  #nano-platform-design .np-link::after { right:5px; }
  #nano-platform-design .np-foundation { margin:0 21px; padding:25px 0; }
  #nano-platform-design .np-capabilities { grid-template-columns:minmax(0,1fr); gap:22px; }
  #nano-platform-design .np-capability { padding-left:15px; }
  #nano-platform-design .np-capability h4 { font-size:15px; }
  #nano-platform-design .np-capability p { font-size:14px; }
  #nano-platform-design .np-hierarchy { flex-direction:column; gap:13px; padding:24px 18px; }
  #nano-platform-design .np-hierarchy span { font-size:12px; }
  #nano-platform-design .np-hierarchy-arrow { transform:rotate(90deg); flex:0 0 1px; width:15px; height:1px; margin:4px 0; }
  #nano-platform-design .np-close { font-size:15px; padding-left:17px; margin-top:24px; }
}
@media (prefers-reduced-motion: reduce) {
  #nano-platform-design *, #nano-platform-design *::before, #nano-platform-design *::after { animation:none!important; transition:none!important; }
  #nano-platform-design .np-trace { display:none; }
}
@media print {
  #nano-platform-design { padding:0; print-color-adjust:exact; -webkit-print-color-adjust:exact; }
  #nano-platform-design .np-system { box-shadow:none; }
  #nano-platform-design .np-stage { break-inside:avoid; }
  #nano-platform-design .np-trace { display:none; }
}
/* Supplied NANO blue-dot wordmark; all existing section styles remain above. */
#nano-platform-design .np-wordmark { display:inline-block; position:relative; width:3.113077em; height:.78em; vertical-align:-.035em; color:#071827; font:inherit; line-height:1; letter-spacing:0; white-space:nowrap; }
#nano-platform-design .np-wordmark--plain { width:3.013846em; }
#nano-platform-design .np-system .np-wordmark { color:var(--np-white); }
#nano-platform-design .np-wordmark-svg { display:block; width:100%; height:100%; overflow:visible; }
#nano-platform-design .np-wordmark-text { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }