/* Shared visual language with ZTT-E/H; established architecture SVG is untouched. */
:root{--color-primary:#050a10;--color-primary-light:#0d1a25;--color-primary-dark:#050a10;--color-text-primary:#f4f8fc;--color-text-secondary:#a9bbc9;--color-text-muted:#8b9fae;--font-primary:-apple-system,BlinkMacSystemFont,'Hiragino Sans','Yu Gothic',Meiryo,sans-serif;--gradient-dark:linear-gradient(180deg,#050a10,#0a1722)}
body{background:#050a10;font-family:var(--font-primary)}
.nav{background:#050a10f5;border-bottom:1px solid #20323f;backdrop-filter:blur(18px)}
.nav-container{max-width:1440px;min-height:88px;padding-inline:40px}.nav-logo img{display:block;width:145px;height:auto}.nav-links{font-size:14px;letter-spacing:.025em}.nav-dropdown-menu{background:#0b1c29;border:1px solid #294553;border-radius:12px}
.container{max-width:1280px;padding-inline:48px}.section{padding-block:88px}.section-alt{background:#0a1520}.section-header{text-align:left;margin-bottom:40px}.section-number,.platform-eyebrow{font-size:10px;letter-spacing:.16em;color:#9ebdce}.section-title{font-size:clamp(28px,3vw,42px);line-height:1.45;letter-spacing:-.035em}.section-desc{font-size:15px;line-height:1.9;max-width:820px;margin:16px 0 0}
.hero{display:grid;grid-template-columns:1.05fr 1fr;gap:64px;min-height:0;max-width:1280px;margin:auto;padding:160px 48px 80px;overflow:visible}.hero-content{text-align:left;padding:0}.hero-title{font-size:clamp(34px,4vw,56px);margin:20px 0 25px;letter-spacing:-.03em}.hero-title .title-accent{background:none;color:#d8e4ee;-webkit-text-fill-color:initial}.platform-hero-message{font-size:clamp(30px,3.3vw,46px);line-height:1.5;letter-spacing:-.04em;color:#f4f8fc}.hero-subtitle{font-size:18px;line-height:1.9;letter-spacing:0;margin:24px 0 0;color:#adbfcc}.hero-bg{inset:0 calc((100vw - 100%)/-2);overflow:hidden;pointer-events:none}.glow-effect{background:radial-gradient(ellipse,#123e5338,transparent 65%)}
.platform-actions{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:32px}.platform-button{display:inline-flex;align-items:center;padding:17px 25px;border-radius:999px;background:linear-gradient(120deg,#dbe7f0,#a8bdcc);color:#05101a;font-size:14px;font-weight:600;text-decoration:none}.platform-text-link{color:#c0d4e0;border-bottom:1px solid #416173;padding-bottom:8px;font-size:13px}
.platform-hero-visual{position:relative;z-index:1;align-self:center;min-width:0}.platform-hero-visual>.platform-eyebrow{margin-bottom:20px}.platform-origin,.platform-hub{padding:24px 28px;border:1px solid #355367;border-radius:14px;background:#0c1d29}.platform-origin small,.platform-hub small{display:block;color:#91adbe;font-size:11px;margin-bottom:10px}.platform-origin strong{display:block;font-size:22px}.platform-origin>span,.platform-hub>span{display:block;color:#adc4d3;font-size:12px;margin-top:10px}.platform-hub{background:linear-gradient(110deg,#103447,#102c40);border-color:#547888}.platform-hub strong{font-size:29px}.platform-bridge{text-align:center;color:#7398ae;font-size:23px;padding:8px}.platform-outcomes{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.platform-outcomes>span{background:#0b1c29;border:1px solid #2e4a5e;border-radius:10px;text-align:center;padding:18px 8px}.platform-outcomes b{display:block;font-size:18px}.platform-outcomes small{display:block;color:#9cb4c4;font-size:10px;margin-top:7px}.platform-visual-note{font-size:10px;color:#8198a9;line-height:1.7;margin-top:15px}
#architecture{background:radial-gradient(ellipse at 50% 45%,#0b2636,#08131e 75%);border-block:1px solid #243e4e}.architecture-visual{max-width:980px;padding:24px;border:1px solid #304b5c;border-radius:16px;background:#07111b;margin:0 auto}.platform-diagram-toolbar{display:flex;justify-content:space-between;align-items:center;gap:20px;max-width:980px;margin:0 auto 20px;color:#9cb3c3;font-size:12px}.platform-diagram-toolbar button{background:#142b3a;color:#d8e8f2;border:1px solid #42677b;border-radius:8px;padding:10px 16px;cursor:pointer}.diagram-expanded .architecture-visual{max-width:none;overflow-x:auto}.diagram-expanded #platformFlowDiagram{min-width:1080px}.diagram-expanded #platformFlowDiagram svg{max-width:none!important;width:1080px!important}
.approach-block,.principle-card{background:#0c1b27;border:1px solid #294351;border-radius:14px;box-shadow:none}.principle-card{padding:28px}.principle-title{color:#e8f2f9}.principle-number{color:#91b2c7}.principle-desc,.principle-list{line-height:1.85}.principles-grid{gap:22px}.approach-comparison{gap:26px}.arch-contrast{padding-top:0}.cta-section{background:#0a1925;border-top:1px solid #23404f;padding-block:80px}.cta-title{font-size:clamp(28px,3.5vw,46px);line-height:1.5}.btn-cta-primary,.btn-cta-secondary{border-radius:999px}.btn-cta-primary{background:linear-gradient(120deg,#dbe7f0,#a8bdcc);color:#05101a}.cta-desc{color:#adc0cf}.footer{background:#050a10}
@media(max-width:1023px){.hero{gap:32px;padding-inline:32px}.nav-container{padding-inline:24px}.container{padding-inline:32px}.principles-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:767px){.hero{grid-template-columns:1fr;padding:120px 24px 56px;gap:40px}.hero-title{font-size:38px}.platform-hero-message{font-size:31px}.hero-subtitle{font-size:16px}.container{padding-inline:24px}.section{padding-block:60px}.section-header{margin-bottom:28px}.section-desc{font-size:13px}.nav-container{min-height:72px}.nav-logo img{width:125px}.platform-actions{gap:20px}.platform-outcomes small{font-size:9px}.architecture-visual{padding:8px;border-radius:10px}.platform-diagram-toolbar{align-items:flex-start;flex-direction:column;gap:12px}.principles-grid{grid-template-columns:1fr}.principle-card{padding:24px}.platform-origin,.platform-hub{padding:22px}.cta-section{padding-block:56px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media(max-width:767px){.hero{grid-template-columns:minmax(0,1fr);width:100%;box-sizing:border-box}.hero-content,.platform-hero-visual{min-width:0;width:100%}.hero-title{white-space:normal}.platform-actions{flex-direction:column;align-items:flex-start}.platform-button{max-width:100%;white-space:normal}.platform-outcomes{grid-template-columns:repeat(3,minmax(0,1fr))}.platform-origin,.platform-hub{box-sizing:border-box}}

/* Presentation default: use the available desktop width for the original diagram. */
@media(min-width:768px){#architecture.diagram-expanded>.container{max-width:1800px;padding-inline:40px}#architecture.diagram-expanded .platform-diagram-toolbar{max-width:none}#architecture.diagram-expanded .architecture-visual{max-width:none}#architecture.diagram-expanded #platformFlowDiagram{min-width:0;width:100%}#architecture.diagram-expanded #platformFlowDiagram svg{width:100%!important;max-width:none!important}}
/* Two disconnections: full-width, aligned comparison for presentations. */
#disconnection>.container{max-width:1800px;padding-inline:40px}
#disconnection .arch-contrast{max-width:none;padding-top:12px!important}
#disconnection .arch-contrast-grid{display:grid;grid-template-columns:minmax(0,1fr) 48px minmax(0,1fr);gap:24px;align-items:stretch}
#disconnection .arch-contrast-item{padding:30px;border-radius:16px;background:#0b1925;border:1px solid #355060}
#disconnection .arch-contrast-traditional{border-color:#65444b}
#disconnection .arch-contrast-ztt{border-color:#377565}
#disconnection .arch-contrast-label{font-size:20px;letter-spacing:.03em;margin-bottom:24px}
#disconnection .arch-contrast-traditional .arch-contrast-label{color:#efa6ad}
#disconnection .arch-contrast-ztt .arch-contrast-label{color:#80dcc0}
#disconnection .disconnect-diagram,#disconnection .connected-diagram{padding:0;display:grid;grid-template-rows:58px 44px 114px 44px 58px;align-items:stretch}
#disconnection .disconnect-top,#disconnection .connected-top{grid-row:1}
#disconnection .disconnect-vertical-break:nth-child(2){grid-row:2}
#disconnection .disconnect-middle{grid-row:3;grid-column:1;align-self:start;height:78px}
#disconnection .disconnect-horizontal-label{grid-row:3;grid-column:1;align-self:end;padding:8px 0 0}
#disconnection .disconnect-vertical-break:nth-last-child(2){grid-row:4}
#disconnection .disconnect-bottom,#disconnection .connected-bottom{grid-row:5}
#disconnection .disconnect-node,#disconnection .connected-node{display:flex;flex-direction:column;justify-content:center;width:100%;padding:12px 20px;font-size:18px;line-height:1.5;border-radius:8px;color:#e2edf5;background:#112634}
#disconnection .disconnect-unknown{color:#efadb2;background:#241e29}
#disconnection .disconnect-unknown span{font-size:12px;opacity:1;color:#d2949e}
#disconnection .disconnect-silo{flex:1;min-width:0;padding:15px 10px;font-size:15px;display:flex;align-items:center;justify-content:center;border-radius:7px;color:#d9e5ef;background:#192431;border-color:#455363}
#disconnection .disconnect-wall{margin-inline:8px;flex-shrink:0;background:repeating-linear-gradient(180deg,#d18d98 0 5px,transparent 5px 10px)}
#disconnection .break-label{font-size:13px;color:#eaa1ad}
#disconnection .break-line{max-width:90px;height:2px}
#disconnection .disconnect-horizontal-label{font-size:12px;color:#eaa1ad;letter-spacing:0}
#disconnection .connected-modules-group{width:100%;gap:10px;margin:0}
#disconnection .connected-middle{gap:10px;flex:1}
#disconnection .connected-module{flex:1;min-width:0;font-size:17px;padding:15px 8px;border-radius:7px;display:flex;align-items:center;justify-content:center}
#disconnection .connected-module-w{font-size:14px;padding:10px;border-radius:7px;color:#80dcc0;background:#103038;border-color:#3a7667}
#disconnection .connected-flow-down{padding:8px 0;gap:0;justify-content:space-around}
#disconnection .connected-flow-down span{position:relative;width:2px;height:100%;background:#68b69f}
#disconnection .connected-flow-down span:after{content:'';position:absolute;bottom:0;left:-3px;width:8px;height:8px;border-right:2px solid #68b69f;border-bottom:2px solid #68b69f;transform:rotate(45deg)}
#disconnection .connected-outcome,#disconnection .connected-origin{border-color:#3e7c6c;background:#102a31;color:#bcf0df}
#disconnection .disconnect-summary,#disconnection .connected-summary{font-size:15px;line-height:1.8;margin-top:24px;color:#b8cbd9}
#disconnection .arch-contrast-arrow{display:flex;align-items:center;justify-content:center}
#disconnection .arch-contrast-arrow path{stroke:#8eacbf;stroke-width:2}
#disconnection .arch-contrast-footnote{font-size:15px;line-height:1.9;margin-top:32px;color:#a9bfce}
@media(max-width:1000px){#disconnection>.container{padding-inline:24px}#disconnection .arch-contrast-grid{grid-template-columns:minmax(0,1fr);gap:20px}#disconnection .arch-contrast-arrow{transform:rotate(90deg);height:32px}#disconnection .arch-contrast-item{padding:24px}}
@media(max-width:480px){#disconnection .arch-contrast-item{padding:18px 12px}#disconnection .disconnect-node,#disconnection .connected-node{font-size:15px;padding:10px}#disconnection .disconnect-silo{font-size:12px;padding:8px 4px}#disconnection .disconnect-wall{margin-inline:3px}#disconnection .connected-middle{gap:5px}#disconnection .connected-module{font-size:13px;padding:10px 4px}#disconnection .connected-module-w{font-size:12px}#disconnection .disconnect-horizontal-label{font-size:10px}#disconnection .disconnect-summary,#disconnection .connected-summary{font-size:13px}}
/* Balanced presentation size: preserve breathing room, reduce oversized elements. */
@media(min-width:1001px){
 #architecture.diagram-expanded>.container{max-width:1400px;padding-inline:40px}
 #architecture.diagram-expanded .architecture-visual{max-width:1160px}
 #architecture.diagram-expanded .platform-diagram-toolbar{max-width:1160px}
 #architecture{padding-block:56px}
 #architecture .section-title,#philosophy .section-title,#disconnection .section-title{font-size:32px}
 #philosophy,#disconnection{padding-block:28px}
 #philosophy>.container,#disconnection>.container{max-width:1400px;padding-inline:40px}
 #philosophy .section-header,#disconnection .section-header{margin-bottom:22px}
 #philosophy .section-desc,#disconnection .section-desc{margin-top:8px;font-size:13px}
 #philosophy .approach-comparison{gap:24px;margin-bottom:18px}
 #philosophy .approach-block{padding:20px 24px}
 #philosophy .approach-header{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:14px}
 #philosophy .approach-icon{width:30px;height:30px;margin:0;flex-shrink:0}
 #philosophy .approach-icon svg{width:22px;height:22px}
 #philosophy .approach-title{font-size:18px;margin:0}
 #philosophy .approach-label{font-size:10px;margin:0;padding:4px 8px}
 #philosophy .approach-flow{gap:0}
 #philosophy .flow-item{padding:7px 12px;font-size:12px;line-height:1.6}
 #philosophy .flow-arrow{font-size:13px;line-height:1.2;padding:1px}
 #philosophy .approach-result{margin-top:12px;padding:10px 14px}
 #philosophy .result-label{font-size:10px;margin-bottom:2px}
 #philosophy .result-text{font-size:12px;line-height:1.6}
 #philosophy .key-message{padding:14px 22px;margin-bottom:18px;display:grid;grid-template-columns:1fr 1.4fr;gap:28px;align-items:center;text-align:left}
 #philosophy .key-message-text{font-size:12px;line-height:1.7;margin:0}
 #philosophy .key-message-text br{display:none}
 #philosophy .philosophy-content{gap:18px;margin-bottom:0}
 #philosophy .philosophy-principle{padding:14px 18px;display:grid;grid-template-columns:30px 1fr;gap:4px 12px;align-items:center}
 #philosophy .philosophy-principle .principle-icon{grid-row:1/3;width:28px;height:28px;margin:0}
 #philosophy .philosophy-principle .principle-icon svg{width:24px;height:24px}
 #philosophy .philosophy-principle .principle-title{font-size:14px;margin:0}
 #philosophy .philosophy-principle .principle-desc{font-size:11px;line-height:1.6;margin:0}
 #disconnection .arch-contrast{padding-top:0!important}
 #disconnection .arch-contrast-grid{gap:20px;grid-template-columns:minmax(0,1fr) 36px minmax(0,1fr)}
 #disconnection .arch-contrast-item{padding:24px}
 #disconnection .arch-contrast-label{font-size:18px;margin-bottom:18px}
 #disconnection .disconnect-diagram,#disconnection .connected-diagram{grid-template-rows:48px 34px 96px 34px 48px}
 #disconnection .disconnect-node,#disconnection .connected-node{font-size:15px;padding:8px 16px}
 #disconnection .disconnect-middle{height:64px}
 #disconnection .disconnect-silo{font-size:13px;padding:12px 8px}
 #disconnection .connected-module{font-size:15px;padding:10px 8px}
 #disconnection .connected-module-w{font-size:12px;padding:8px}
 #disconnection .disconnect-summary,#disconnection .connected-summary{font-size:13px;line-height:1.7;margin-top:18px}
 #disconnection .arch-contrast-footnote{font-size:13px;margin-top:20px;line-height:1.7}
}
@media(min-width:1001px){#philosophy .approach-flow{margin-bottom:0}#philosophy>.container{zoom:.9}}
@media(min-width:1001px) and (max-height:760px){#philosophy>.container{zoom:.8}#disconnection>.container{zoom:.86}#philosophy,#disconnection{padding-block:22px}}
/* Final public sequence: introduction, architecture, comparison, traction, CTA. */
#disconnection{border-bottom:1px solid #243e4e}
#traction{border-top:1px solid #203744}
#contact .cta-title{letter-spacing:-.035em}
#contact .cta-desc{line-height:1.9}
.platform-module-links{display:flex;justify-content:center;gap:28px;flex-wrap:wrap;margin-top:24px;font-size:13px;color:#adc3d2}
.platform-module-links a{padding-bottom:6px;border-bottom:1px solid #35596d}
#contact .cta-sub-link{margin-top:28px}
@media(max-width:767px){.platform-module-links{gap:18px;flex-direction:column;align-items:center}}