.cognitive-enterprise-section{.diagram-container { position: relative; display: flex; flex-direction: column; align-items: center; margin: 0 auto; width: 100%; max-width: 1280px; } .users-row, .systems-row { display: flex; justify-content: space-between; width: 100%; margin-left: auto; margin-right: auto; z-index: 2; padding: 0 5%; flex-wrap: nowrap; .icon { margin-top: 0.5rem; display: flex; justify-content: center; svg { width: 3rem; height: 3rem; } } } .user-item, .system-item { display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; flex: 1; max-width: 20%; min-width: 0; p { margin-top: 0.3rem; font-size: clamp(0.6rem, 2vw, 0.9rem); line-height: 1.1; } } .connection-lines { width: 100%; height: max(8rem, 10vh); position: relative; } .synthgrid-wordmark { margin-bottom: 0rem; font-size: 3rem; } .synthgrid-section { align-items: center; display: flex; justify-content: center; padding: 0.5rem; img { max-width: 4rem; } } .infrastructure-label { font-size: 1rem; color: #525252; } .detail { text-align: center; font-size: clamp(1.0rem, 2vw, 1rem); margin: 0.5rem 0 1rem 0; padding: 0 1rem; } canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; } @media (max-width: 1024px) { .connection-lines { display: block; height: clamp(4rem, 10vw, 8rem); } .users-row, .systems-row { flex-wrap: nowrap; justify-content: space-between; } .system-item { display: flex; } } @media (max-width: 768px) { .synths-row { flex-wrap: wrap; } .synth-avatar { margin-bottom: 2rem; } } @keyframes svg-pulse { 0% { filter: drop-shadow(0 0 0.2rem rgba(22, 133, 199, 0)); transform: scale(1); } 25% { filter: drop-shadow(0 0 0.2rem rgba(22, 133, 199, 0.9)); } 50% { filter: drop-shadow(0 0 0.2rem rgba(22, 133, 199, 1)) drop-shadow(0 0 0.2rem rgba(22, 133, 199, 0.8)); } 75% { filter: drop-shadow(0 0 0.2rem rgba(22, 133, 199, 0.9)); } 100% { filter: drop-shadow(0 0 0.2rem rgba(22, 133, 199, 0)); transform: scale(1); } } .svg-glow-container { position: relative; display: inline-block; transition: all 0.5s ease-out; } .svg-item.pulse svg { animation: svg-pulse 2s cubic-bezier(0.215, 0.610, 0.355, 1.000); z-index: 10; }}@font-face{font-family:simplon norm;src:url(/fonts/SimplonNorm-Light-WebS.woff2)format('woff2');font-weight:300;font-style:normal;font-display:block}@font-face{font-family:simplon norm;src:url(/fonts/SimplonNorm-LightItalic-WebS.woff2)format('woff2');font-weight:300;font-style:italic;font-display:block}@font-face{font-family:simplon norm;src:url(/fonts/SimplonNorm-Regular-WebS.woff2)format('woff2');font-weight:400;font-style:normal;font-display:block}@font-face{font-family:simplon norm;src:url(/fonts/SimplonNorm-RegularItalic-WebS.woff2)format('woff2');font-weight:400;font-style:italic;font-display:block}@font-face{font-family:simplon norm;src:url(/fonts/SimplonNorm-Medium-WebS.woff2)format('woff2');font-weight:500;font-style:normal;font-display:block}@font-face{font-family:simplon norm;src:url(/fonts/SimplonNorm-MediumItalic-WebS.woff2)format('woff2');font-weight:500;font-style:italic;font-display:block}@font-face{font-family:simplon norm;src:url(/fonts/SimplonNorm-Bold-WebS.woff2)format('woff2');font-weight:700;font-style:normal;font-display:block}@font-face{font-family:simplon norm;src:url(/fonts/SimplonNorm-BoldItalic-WebS.woff2)format('woff2');font-weight:700;font-style:italic;font-display:block}footer{margin-top:2rem;margin-left:4rem;margin-right:4rem}.footer-icon svg{width:1rem;height:1rem;vertical-align:text-top;fill:currentColor;margin-right:.25rem}.site-title{object-fit:contain;width:10rem;display:block}.header-nav{padding-top:1rem;display:flex;justify-content:space-between;max-width:min(72rem,calc(100vw - 8rem));margin:auto;align-items:end}.header-nav a{text-decoration:none;text-underline-offset:4px}.header-nav h1{margin:0;padding:0}.theme-switcher svg{width:1.125rem;height:1.125rem}@media(max-width:767px){.sidebar{position:fixed;top:0;left:0;bottom:0;overflow-y:auto;overflow-x:hidden;padding:1rem;width:250px;transform:translateX(-100%);transition:transform .3s ease-in-out;box-shadow:var(--pico-card-box-shadow)}.header-nav{margin-top:1rem;padding-left:2rem;padding-right:2rem;max-width:100vw}.sidebar.active{transform:translateX(0)}}.hamburger{display:none;background:0 0;border:none;cursor:pointer;padding:.5rem;color:var(--pico-primary-color)}@media(max-width:767px){.hamburger{display:block}}@media(min-width:768px){body>main>nav[aria-label=breadcrumb]{display:none}}@media(min-width:768px){.hero-wordmark{font-size:8rem}}.no-underline{text-decoration:none}figure{justify-content:center;display:flex}.nav-container{display:flex;align-items:center;gap:1rem}.desktop-nav{display:flex;gap:1rem;align-items:center}.mobile-nav{display:none}.nav-items{background-color:var(--color-background-alt)}@media(max-width:767px){.desktop-nav{display:none}.mobile-nav{display:block;position:relative}.nav-toggle{font-weight:200;text-decoration:none;text-transform:uppercase;color:var(--pico-h2-color);cursor:pointer;padding:.5rem;display:flex;align-items:center;gap:.25rem}.nav-toggle span{font-size:.9rem}.nav-toggle svg{width:24px;height:24px}.mobile-nav:hover .nav-toggle svg,.mobile-nav:focus-within .nav-toggle svg{transform:rotate(180deg)}.nav-content{display:none;position:absolute;top:100%;right:0;color:var(--pico-color);font-weight:200;min-width:200px;z-index:1000;border-radius:var(--pico-border-radius);border:1px solid var(--pico-muted-border-color)}.mobile-nav:hover .nav-content,.mobile-nav:focus-within .nav-content{display:block}.nav-item{padding:.5rem 1rem}.nav-item:hover{transition-duration:0}.nav-item:hover a{color:var(--pico-primary-hover)}.nav-item a{display:block;font-weight:200;width:100%;text-decoration:none;justify-self:right;text-align:right;color:var(--pico-color);text-transform:uppercase;transition-duration:0s}.theme-switcher{display:none}}header,.tagline,.hero-text,.site-title,.hero-wordmark,.hero-oneliner{position:relative}.hero-text::before,.header-nav::before{content:'';position:absolute;inset:2rem;box-shadow:0 0 3rem 3rem var(--color-background);background-color:var(--color-background);pointer-events:none;z-index:-1}.hero-oneliner::before{content:'';position:absolute;inset:0;box-shadow:0 0 3rem 3rem var(--color-background);background-color:var(--color-background);pointer-events:none;z-index:-2}.synthgrid-wordmark{display:inline-block;color:var(--color-accent);font-weight:200;letter-spacing:.3rem;margin-left:1rem}.hero-cover{display:flex;align-items:center;width:100%;justify-content:center;margin-bottom:1rem;.synthgrid-logo { max-height: min(14rem, 20vw); max-width: min(14rem, 20vw); aspect-ratio: 1; z-index: 2; } .synthgrid-wordmark { margin-top: 1rem; inset: 4rem; box-shadow: 0 0 3rem 3rem var(--color-background); background-color: var(--color-background); display: inline-block; color: var(--color-accent); font-size: min(8rem, 10vw); font-weight: 200; letter-spacing: 0.3rem; margin-top: calc(min(8rem, 10vw) * -1rem); margin-left: 1rem; margin-bottom: 0rem; padding-bottom: 0rem; margin-right: 1rem; } img { max-height: 20rem; max-width: 20rem; aspect-ratio: 1/1; } p { margin-left: -0.5rem; font-size: min(3rem, 4vw); font-weight: 200; strong { font-weight: 500; } }}.section-hero{p {} .hero-form { margin-top: 1rem; z-index: 99; display: flex; align-items: center; justify-items: center; .hero-email-input { flex: 1; height: 3rem; width: 12rem; border: 2px solid var(--color-accent); border-radius: 0.5rem; margin-right: 1rem; font-size: 0.875rem; background: white; color: var(--color-primary); margin-bottom: 0; } .hero-email-input:focus { outline: none; border-color: var(--color-accent-light); } .hero-submit-btn { height: 3rem; border: 2px solid var(--color-accent); border-radius: 0.5rem; background: var(--color-accent); color: white; border: none; font-size: 0.875rem; cursor: pointer; margin: 0; } .hero-submit-btn:hover { background: var(--color-accent-light); } }}@media(max-width:480px){.section-hero{width:100%;margin-left:auto;margin-right:auto}.hero-cover{flex-direction:column;align-items:center;.synthgrid-logo { margin-bottom: 3rem; max-height: min(12rem, 50vw); max-width: min(12rem, 50vw); } .synthgrid-wordmark { font-size: 3.5rem; } .hero-text { font-size: 1.44rem; }}}.tagline{display:inline-block;font-size:1.5rem;padding-bottom:20vh}.section-hero{position:relative;display:flex;overflow:hidden;flex-direction:column;justify-content:center;align-items:center;text-align:center;min-height:calc(100svh - 6rem);width:100vw}.section-hero::before{content:"";position:absolute;left:-20rem;right:-20em;overflow-x:hidden;top:0;bottom:0;z-index:4;background:linear-gradient(to bottom,color-mix(in srgb,var(--color-background) 0%,transparent) 0%,color-mix(in srgb,var(--color-background) 0%,transparent) 75%,color-mix(in srgb,var(--color-background) 100%,transparent) 98%)}.section-hero>img{max-height:50svh}.section-header{display:flex;flex-direction:column;position:relative;padding-left:1rem;padding-right:1rem;margin-bottom:2rem}.section-header.align-left{padding-left:1rem}.section-header.align-right{padding-left:0;padding-right:1rem;text-align:right}.section-header.align-left::before{content:'';position:absolute;left:0;top:0;bottom:0;width:.15rem;background:var(--pico-primary)}.section-header.align-right{text-align:right}.section-header.align-right::before{content:'';position:absolute;right:0;top:0;bottom:0;width:.15rem;background:var(--pico-primary)}.section-synths{margin-bottom:2rem}.section-title{margin-top:4rem;text-transform:uppercase;font-weight:100;text-align:center;letter-spacing:calc(var(--pico-font-size)*.125);padding-bottom:calc(var(--pico-font-size)* var(--pico-line-height)*.5)}.section-subtitle{text-align:center;font-style:italic;color:var(--pico-muted-color);font-size:.9rem;margin-bottom:0;font-weight:400}.section-header h3{font-weight:100;letter-spacing:calc(var(--pico-font-size)*.125);margin-bottom:0;padding-bottom:calc(var(--pico-font-size)* var(--pico-line-height)*.125)}.section-header .explanation{color:var(--pico-contrast)}.section-grid{display:grid;grid-template-columns:fit-content(40%)1fr;gap:4rem}.section-grid-right{grid-template-columns:1fr fit-content(40%)}.bullets-panel-right{text-align:right}.bullets-panel-right .bullet{flex-direction:row-reverse;justify-content:flex-start}.bullets-panel-right .bullet svg{margin-left:0;margin-right:0}.bullet{display:flex;align-items:center;gap:1rem;cursor:pointer;padding:.5rem}.bullet .icon{width:1.5 rem;height:1.5 rem}.bullet:hover{color:var(--pico-primary-hover)}.bullet.active{color:var(--pico-primary)}.bullet.active:hover{color:var(--pico-primary)}.bullet svg{width:1.25rem;min-width:1.25rem;fill:currentColor;stroke-width:.5px}.bullet.active svg{fill:currentColor}.content-grid{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2rem;height:100%}.content-block{padding:1rem}.content-block .content-text{max-width:800px;margin:0 auto}.content-block .content-pictogram{color:var(--pico-primary);fill:currentColor;width:100%;height:100%;max-width:10rem;max-height:10rem;margin:1rem;margin:0 auto}.metrics-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:3rem;margin:4rem auto;padding:0 1rem}.metric-box{display:flex;flex-direction:column;padding:2rem;text-align:center}.metric-number{font-size:calc(var(--pico-font-size)*2);font-weight:unset;text-transform:uppercase;text-align:center;letter-spacing:calc(var(--pico-font-size)*.125);padding-bottom:0;margin-bottom:0;color:var(--pico-primary)}.metric-context{font-size:calc(var(--pico-font-size));font-weight:500;margin-top:.5rem;color:var(--pico-contrast)}.metric-statement{margin-top:1rem;color:var(--pico-muted)}@media(max-width:640px){.feature-section{padding-top:.25rem;padding-bottom:.25rem;padding-left:.25rem;padding-right:.25rem}.metrics-grid{grid-template-columns:1fr;gap:1rem}.section-grid{gap:1rem}.section-grid-right{gap:1rem}}.section-key-quote{display:flex;flex-direction:column;align-items:center;text-align:center}.success-content{text-align:justify;text-align-last:center;max-width:800px;line-height:1.6;padding-top:1rem;color:var(--pico-text)}@media(max-width:640px){.success-content{text-align:center}}.final-statement{text-align:center;margin-top:2rem !important;font-weight:500;color:var(--pico-contrast);padding-bottom:4rem}.implementation-timeline{padding-top:4rem;padding-left:0;padding-right:0;padding-bottom:0;margin-bottom:-2rem;.timeline-wrapper { padding-top: 1rem; max-width: 1200px; margin: 0 auto; } .timeline-nodes { display: flex; align-items: center; justify-content: space-between; margin: 2rem 0; } .node { text-align: center; cursor: pointer; } .node .icon:hover { background: var(--pico-mark-background-color); color: white; } .node.active .icon { background: var(--pico-primary); color: white; } .node.active .icon:hover { background: var(--pico-primary); color: white; } .connector { flex-grow: 1; height: 2px; background: var(--pico-primary); margin: 0 1rem; } .icon { width: 40px; height: 40px; border: 2px solid var(--pico-primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 1rem auto; transition: all 0.3s ease; } .week { font-weight: 500; margin-bottom: 0.5rem; } .phase { font-size: 0.9rem; color: var(--pico-contrast); } .phase-details { margin-top: 3rem; padding: 2rem; background: var(--pico-bg-secondary); border-radius: 4px; } .phase-details h4 { text-align: center; } .details-grid { display: grid; text-align: center; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: 1rem; padding: 1rem; } .detail-item { padding: 1.5rem; background: var(--pico-bg-secondary); border-radius: 4px; } .detail-title { font-weight: 500; margin-bottom: 0.5rem; color: var(--pico-primary); } .detail-description { color: var(--pico-muted); font-size: 0.9rem; } @media (max-width: 640px) { .phase-details { margin-top: 1rem; } .connector { display: none; } .detail-item { padding: 0.5rem; } .phase-details { padding-left: 0.25rem; padding-right: 0.25rem; } .details-grid { padding-left: 0rem; padding-right: 0rem; margin: 0rem; } } .section-benefits { margin-bottom: 2rem; } .benefits-explanation { text-align: center; } .core-problem { margin-top: 2rem; display: flex; flex-direction: column; justify-content: center; align-content: center; justify-items: center; align-items: center; text-align: center; } .core-problem .pictogram { width: 4rem; height: 4rem; margin-bottom: 2rem; }}:root{--color-background:#ffff;--color-background-alt:#f4f4f4;--color-primary:#000;--color-secondary:#333333;--color-accent-green:#007E9A;--color-accent-green-bright:#28a745;--color-accent:#2868b4;--color-accent-light:#81cdfa;--color-accent-green-bright:#28a745;--font-family:'Simplon Norm';--line-height:1.5;--spacing:1rem;--border-radius:0.25rem;--header-font-weight:700;--header-line-height:1.2;--header-base-size:2.25rem;--header-scale-factor:0.25}:root[data-theme=dark]{--pico-primary:rgb(40, 104, 180)}*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}html{font-size:100%;scroll-behavior:smooth;background-color:var(--color-background)}body{color:var(--color-primary);font-family:var(--font-family);line-height:var(--line-height)}img,video{max-width:100%;height:auto}main{display:block;margin-inline:auto;width:min(70rem,100% - 2rem);padding-block:calc(var(--spacing) * 2)}p,h1,h2,h3,h4,h5,h6,ul,ol,blockquote,pre,table,form{margin-bottom:var(--spacing)}h1,h2,h3,h4,h5,h6{font-weight:var(--header-font-weight);line-height:var(--header-line-height)}:root{--base-size:1rem;--scale-factor:0.25}h1{font-size:var(--header-base-size)}h2{font-size:calc(var(--header-base-size) - var(--header-scale-factor) * 1rem)}h3{font-size:calc(var(--header-base-size) - var(--header-scale-factor) * 2rem)}h4{font-size:calc(var(--header-base-size) - var(--header-scale-factor) * 3rem)}h5{font-size:calc(var(--header-base-size) - var(--header-scale-factor) * 4rem)}h6{font-size:calc(var(--header-base-size) - var(--header-scale-factor) * 5rem)}a{color:var(--color-accent)}a:hover{color:var(--color-accent-light)}ul,ol{padding-inline-start:1.5rem}blockquote{padding-inline-start:var(--spacing);border-inline-start:.25rem solid var(--border-color)}code{font-family:ui-monospace,Monaco,Consolas,monospace}pre{overflow-x:auto;padding:var(--spacing);border-radius:var(--border-radius)}em{color:var(--color-accent);font-style:normal}strong{font-weight:500}button,input,select,textarea{border:1px solid var(--border-color);border-radius:var(--border-radius);padding:.5rem .75rem;width:100%}input,select,textarea{margin-bottom:var(--spacing)}label{display:block;font-weight:600;margin-bottom:.375rem}button{width:auto;cursor:pointer;border-color:var(--accent-color);background-color:var(--accent-color);color:#fff;font-weight:600}input[type=checkbox],input[type=radio]{width:auto;accent-color:var(--accent-color)}pre.mermaid{display:flex;justify-content:center;align-items:center;background-color:transparent}.is-hidden{display:none}[data-theme=light] .hide-light{display:none}[data-theme=dark] .hide-dark{display:none}header:has(>h2+p){border-left:.3rem solid var(--color-accent);padding-left:1.5rem}header:has(>h2+p)>h2{margin-top:4rem;text-transform:uppercase;font-weight:100;letter-spacing:.1em}header:has(>h2+p){color:var(--color-secondary)}main>section{margin-inline:auto;width:min(100% - 2rem,1450px)}.container-fluid{width:100%;margin-right:auto;margin-left:auto;padding-right:var(--pico-spacing);padding-left:var(--pico-spacing)}.synthgrid-logo-text{margin-left:.5rem;font-size:1.5rem;letter-spacing:.125em;font-weight:200;text-transform:uppercase}.tm-symbol{font-size:50%}.contact-container{display:flex;flex-direction:column;justify-items:center;align-content:center;justify-content:center;align-items:center;text-align:center}.call-us{font-size:1.25rem;font-weight:500}.connection-promise{text-align:center;display:flex;color:var(--pico-secondary)}.online-indicator{display:flex;justify-items:center;align-content:center;justify-content:center;align-items:center}.online-indicator-ball{width:.7rem;height:.7rem;background-color:var(--color-accent-green-bright);border-radius:25%;display:inline-block;animation:pulse 2s infinite}.status-text{color:var(--color-accent-green-bright)}@keyframes pulse{0%{box-shadow:0 0 rgba(40,167,69,.7)}70%{box-shadow:0 0 0 10px rgba(40,167,69,0)}100%{box-shadow:0 0 rgba(40,167,69,0)}}.ecosystem-section{margin-top:8rem;margin-bottom:8rem;text-align:center;.section-title { margin-bottom: 3rem; } .ecosystem-logo-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem; max-width: 1200px; padding: 0 1rem; margin: 0 auto; } .ecosystem-logo { flex: 1 1 14rem; max-width: 14rem; height: 4rem; display: flex; align-items: center; justify-content: center; } img { object-fit: contain; display: inline-block; height: 3rem; max-width: 12rem; } .tech { img { height: 3rem; max-width: 12rem; } } @media (max-width: 480px) { .ecosystem-logo { margin: 0em; max-width: 30vw; max-height: 30vw; display: flex; align-items: center; justify-content: center; img { width: 100%; height: auto; } } }}.process-flow-section{margin-top:16rem;margin-bottom:16rem}.process-flow-section .section-title{text-align:center}.process-flow-section .process-flow-container{margin-top:4rem;display:flex;justify-content:center;align-items:center;flex-wrap:nowrap;position:relative}.process-flow-section .process-step{display:flex;flex-direction:column;align-items:center;text-align:center;padding:1rem;transition:transform .3s ease;z-index:2}.process-flow-section .process-step.highlight .step-icon-container{animation:step-glow 2s ease-out}.process-flow-section .process-step h3{font-weight:400;margin-top:1rem;margin-bottom:.5rem}.process-flow-section .process-step p{max-width:12rem;margin:0;font-size:.9rem}.process-flow-section .step-icon-container{display:flex;align-items:center;justify-content:center;height:4.5rem;width:4.5rem;transition:box-shadow .3s ease}.process-flow-section .pictogram{height:4rem;width:4rem;display:flex;align-items:center;justify-content:center}.process-flow-section .pictogram svg{max-height:100%;max-width:100%;height:auto !important;width:auto !important}.process-flow-section .logo-container{height:5rem;width:5rem;display:flex;align-items:center;justify-content:center}.process-flow-section .logo-container img{max-height:100%;max-width:100%;height:auto !important;width:auto !important;object-fit:contain}.process-flow-section .process-connection{position:relative;width:8rem;height:4rem;display:flex;align-items:center;justify-content:center}.process-flow-section .process-connection .connection-line{position:absolute;width:100%;z-index:1}.process-flow-section .process-connection .connection-arrow{position:absolute;font-size:3rem;padding-top:.5rem;color:var(--color-accent);z-index:3}.process-flow-section .process-connection .data-pulse-container{position:absolute;width:100%;height:100%;z-index:2}.process-flow-section .data-particle{position:absolute;width:6px;height:6px;border-radius:50%;background-color:var(--color-accent-light);transform:translateY(-50%);top:50%;opacity:0}.process-flow-section .data-particle.text-particle{width:1rem;height:1rem;border-radius:50%}.process-flow-section .data-particle.number-particle{width:4px;height:4px}@keyframes step-glow{0%{box-shadow:0 0 rgba(0,102,204,0)}40%{box-shadow:0 0 20px rgba(0,102,204,.4)}100%{box-shadow:0 0 rgba(0,102,204,0)}}@keyframes particle-flow{0%{left:0%;opacity:0}10%{opacity:.8}90%{opacity:.8}100%{left:100%;opacity:0}}@media(max-width:768px){.process-flow-section .process-flow-container{flex-direction:column}.process-flow-section .process-connection{width:4rem;height:6rem;transform:rotate(90deg);margin:1rem 0}}@media(max-width:767px){.sidebar{position:fixed;top:0;left:0;bottom:0;overflow-y:auto;overflow-x:hidden;padding:1rem;width:250px;background-color:var(--color-background-alt);transform:translateX(-100%);transition:transform .3s ease-in-out;box-shadow:var(--pico-card-box-shadow)}.header-nav{padding-left:1rem;padding-right:1rem}.sidebar.active{transform:translateX(0)}}.hamburger{display:none;background:0 0;border:none;cursor:pointer;padding:.5rem;color:var(--pico-primary-color)}@media(max-width:767px){.hamburger{display:block}}@media(min-width:768px){body>main>nav[aria-label=breadcrumb]{display:none}}@media(min-width:768px){.hero-wordmark{font-size:8rem}}.no-underline{text-decoration:none}figure{justify-content:center;display:flex}.nav-container{display:flex;align-items:center;gap:1rem}.desktop-nav{display:flex;gap:1rem;align-items:center}.mobile-nav{display:none}@media(max-width:767px){.desktop-nav{display:none}.mobile-nav{display:block;position:relative}.nav-toggle{font-weight:200;text-decoration:none;text-transform:uppercase;color:var(--pico-h2-color);cursor:pointer;padding:.5rem;display:flex;align-items:center;gap:.25rem}.nav-toggle span{font-size:.9rem}.nav-toggle svg{width:24px;height:24px}.mobile-nav:hover .nav-toggle svg,.mobile-nav:focus-within .nav-toggle svg{transform:rotate(180deg)}.nav-content{display:none;position:absolute;top:100%;right:0;color:var(--pico-color);font-weight:200;background-color:var(--pico-card-background-color);min-width:200px;box-shadow:var(--pico-card-box-shadow);z-index:1000;border-radius:var(--pico-border-radius);border:1px solid var(--pico-muted-border-color)}.mobile-nav:hover .nav-content,.mobile-nav:focus-within .nav-content{display:block}.nav-item{padding:.5rem 1rem}.nav-item:hover{transition-duration:0}.nav-item:hover a{color:var(--pico-primary-hover)}.nav-item a{display:block;font-weight:200;width:100%;text-decoration:none;justify-self:right;text-align:right;color:var(--pico-color);text-transform:uppercase;transition-duration:0s}.theme-switcher{display:none}}.docs{grid-template-columns:auto 1fr;grid-column-gap:3rem}@media(min-width:768px){.hamburger{display:none}}@media(min-width:768px){.grid.docs{display:grid;grid-template-columns:auto 1fr;gap:2rem}}.grid.docs>aside{display:none}@media(min-width:768px){.grid.docs>aside{display:block}}body.sidebar-open .grid.docs>aside{display:block;position:fixed;list-style:none;top:0;left:0;width:280px;height:100%;background-color:#fff;z-index:1000;box-shadow:2px 0 5px rgba(0,0,0,.1)}aside>nav>ul{padding-left:0;list-style:none}aside>nav>ul>li{padding-top:1rem}aside>nav>ul * a{color:var(--color-primary);text-decoration:none}aside>nav>ul * a:hover{color:var(--color-accent)}:where(nav li)::before{float:left;content:"​"}nav,nav ul{display:flex}nav{justify-content:space-between;overflow:visible}nav ol,nav ul{align-items:center;margin-bottom:0;padding:0;list-style:none}nav ol:first-of-type,nav ul:first-of-type{margin-left:calc(var(--pico-nav-element-spacing-horizontal) * -1)}nav ol:last-of-type,nav ul:last-of-type{margin-right:calc(var(--pico-nav-element-spacing-horizontal) * -1)}nav li{display:inline-block;margin:0;padding:var(--pico-nav-element-spacing-vertical)var(--pico-nav-element-spacing-horizontal)}nav li :where(a,[role=link]){display:inline-block;margin:calc(var(--pico-nav-link-spacing-vertical) * -1)calc(var(--pico-nav-link-spacing-horizontal) * -1);padding:var(--pico-nav-link-spacing-vertical)var(--pico-nav-link-spacing-horizontal);border-radius:var(--pico-border-radius)}nav li :where(a,[role=link]):not(:hover){text-decoration:none}nav li button,nav li [role=button],nav li [type=button],nav li input:not([type=checkbox],[type=radio],[type=range],[type=file]),nav li select{height:auto;margin-right:inherit;margin-bottom:0;margin-left:inherit;padding:calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2)var(--pico-nav-link-spacing-horizontal)}nav[aria-label=breadcrumb]{align-items:center;justify-content:start}nav[aria-label=breadcrumb] ul li:not(:first-child){margin-inline-start:var(--pico-nav-link-spacing-horizontal)}nav[aria-label=breadcrumb] ul li a{margin:calc(var(--pico-nav-link-spacing-vertical) * -1)0;margin-inline-start:calc(var(--pico-nav-link-spacing-horizontal) * -1)}nav[aria-label=breadcrumb] ul li:not(:last-child)::after{display:inline-block;position:absolute;width:calc(var(--pico-nav-link-spacing-horizontal) * 4);margin:0 calc(var(--pico-nav-link-spacing-horizontal) * -1);content:var(--pico-nav-breadcrumb-divider);color:var(--pico-muted-color);text-align:center;text-decoration:none;white-space:nowrap}nav[aria-label=breadcrumb] a[aria-current]:not([aria-current=false]){background-color:transparent;color:inherit;text-decoration:none;pointer-events:none}aside nav,aside ol,aside ul,aside li{display:block}aside li{padding:calc(var(--pico-nav-element-spacing-vertical) * .5)var(--pico-nav-element-spacing-horizontal)}aside li a{display:block}aside li [role=button]{margin:inherit}[dir=rtl] nav[aria-label=breadcrumb] ul li:not(:last-child) ::after{content:"\\"}.stop-fighting-systems-section{position:relative;overflow:hidden;.container { max-width: 1400px; margin: 0 auto; padding: 0 2rem; } .section-header { text-align: center; margin-bottom: 4rem; } .section-header h2 { font-size: 3rem; font-weight: 200; margin-bottom: 0.5rem; } .section-header h3 { font-size: 2.25rem; font-weight: 200; color: var(--color-accent); } .comparison-container { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; margin-bottom: 4rem; } .before-container, .after-container { background: white; border-radius: 12px; padding: 2rem; } .before-container { border: 2px solid #f8D0D0; } .after-container { border: 2px solid #BEE3F8; } .before-container h4, .after-container h4 { font-size: 1.5rem; font-weight: 700; margin-bottom: 1.25rem; letter-spacing: -0.01em; } .before-container h4 { color: #4A5568; font-weight: 400; } .after-container h4 { color: var(--color-accent); font-weight: 400; } .before-container ul, .after-container ul { margin-bottom: 2rem; padding-left: 0; list-style: none; } .before-container li, .after-container li { margin-bottom: 1rem; padding-left: 1.75rem; position: relative; line-height: 1.6; color: #4A5568; } .before-container li::before { content: "→"; position: absolute; left: 0; color: #E53E3E; font-weight: bold; } .after-container li::before { content: "✓"; position: absolute; left: 0; color: #48BB78; font-weight: bold; } .canvas-wrapper { position: relative; width: 100%; height: 400px; overflow: hidden; } #before-canvas, #after-canvas { width: 100%; height: 100%; display: block; z-index: 1; } .before-static-elements, .after-static-elements { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; } .system-item, .after-system-item { position: absolute; width: 6rem; height: 6rem; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 12px; transition: all 0.3s ease; } .system-item .icon, .after-system-item .icon { width: 3rem; height: 3rem; margin-bottom: 4px; } .system-item .icon svg, .after-system-item .icon svg { width: 100%; height: 100%; fill: #6b7280; } .system-item .name, .after-system-item .name { font-size: 11px; font-weight: 500; color: #374151; text-align: center; margin: 0; line-height: 1.2; } .after-system-item .abbr { display: block; font-size: 9px; color: #9ca3af; margin-top: 2px; } .system-item:nth-child(1) { top: 50%; right: 15%; transform: translate(50%, -50%); } .system-item:nth-child(2) { bottom: 12.5%; right: 35%; transform: translate(50%, 50%); } .system-item:nth-child(3) { bottom: 12.5%; left: 35%; transform: translate(-50%, 50%); } .system-item:nth-child(4) { top: 50%; left: 15%; transform: translate(-50%, -50%); } .system-item:nth-child(5) { top: 12.5%; left: 20%; transform: translate(50%, -50%); } .system-item:nth-child(6) { top: 12.5%; right: 20%; transform: translate(-50%, -50%); } .after-system-item:nth-child(2) { top: 2%; right: 37.5%; } .after-system-item:nth-child(3) { top: 7%; right: 21%; } .after-system-item:nth-child(4) { top: 29%; right: 10%; } .after-system-item:nth-child(5) { bottom: 29%; right: 10%; } .after-system-item:nth-child(6) { bottom: 7%; right: 21%; } .after-system-item:nth-child(7) { bottom: 2%; right: 37.5%; } .user-item { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; background: #2563eb; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 10; transition: all 0.3s ease; } .user-item .icon { width: 24px; height: 24px; } .user-item .icon svg { width: 100%; height: 100%; fill: white; } .after-static-elements .user-item { top: 50%; left: 15%; transform: translate(-50%, -50%); } .synthgrid-section { margin-top: -1rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; z-index: 15; display: flex; flex-direction: column; align-items: center; } .synthgrid-section img { margin-top: 2rem; width: 8rem; height: 8rem; } .synthgrid-wordmark { font-size: 2rem; font-weight: 200; color: var(--color-accent); margin: 0; text-align: center; } .system-item.loading, .after-system-item.loading { border-color: #3b82f6; background: #eff6ff; animation: pulse 1.5s ease-in-out infinite; } .system-item.error, .after-system-item.error { border-color: #dc2626; background: #fef2f2; animation: frustration 0.5s ease-in-out infinite; } .system-item.active, .after-system-item.active { border-color: #10b981; background: #ecfdf5; } .system-status { position: absolute; top: -8px; right: -8px; width: 16px; height: 16px; border-radius: 50%; display: none; } .system-item.loading .system-status, .after-system-item.loading .system-status { display: block; background: #3b82f6; animation: loading 1s linear infinite; } .system-item.error .system-status, .after-system-item.error .system-status { display: block; background: #dc2626; } .system-item.active .system-status, .after-system-item.active .system-status { display: block; background: #10b981; } .speech-bubble { position: absolute; background: white; border: 2px solid #d1d5db; border-radius: 12px; padding: 8px 12px; max-width: 200px; font-size: 12px; display: none; z-index: 15; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .speech-bubble.show { display: block; } .speech-bubble.loading { border-color: #f59e0b; background: #fef3c7; } .speech-bubble.frustrated { border-color: #dc2626; background: #fee2e2; } .speech-bubble.command { border-color: #3b82f6; background: #ebf8ff; } .speech-bubble.success { border-color: #10b981; background: #d1fae5; } .bubble-content { color: #1f2937; line-height: 1.4; } .bubble-pointer { position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid white; } .bubble-pointer::before { content: ''; position: absolute; bottom: 2px; left: -8px; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 8px solid #d1d5db; } .connection-lines { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } .testimonial { text-align: center; max-width: 900px; margin: 0 auto; padding: 3rem; background: white; border-radius: 12px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); border: 2px solid #E2E8F0; } .testimonial blockquote { font-size: 1.5rem; font-style: italic; color: #2D3748; margin-bottom: 1rem; line-height: 1.8; } .testimonial cite { font-size: 1.125rem; color: #718096; font-style: normal; font-weight: 500; } @media (max-width: 1024px) { .comparison-container { gap: 2rem; } .canvas-wrapper { height: 350px; } .system-item, .after-system-item { width: 70px; height: 70px; } .system-item .icon, .after-system-item .icon { width: 28px; height: 28px; } } @media (max-width: 768px) { .container { padding: 0; } .comparison-container { grid-template-columns: 1fr; gap: 2rem; } .section-header h2 { font-size: 2rem; } .section-header h3 { font-size: 1.5rem; } .before-container, .after-container { padding: 1.5rem; } .canvas-wrapper { height: 300px; } .system-item, .after-system-item { width: 60px; height: 60px; } .system-item .icon, .after-system-item .icon { width: 24px; height: 24px; } .user-item { width: 35px; height: 35px; } .testimonial { padding: 2rem; } .testimonial blockquote { font-size: 1.25rem; } } @keyframes pulse { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.05); opacity: 0.8; } 100% { transform: scale(1); opacity: 1; } } @keyframes frustration { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-2px); } 75% { transform: translateX(2px); } } @keyframes loading { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }}:root{--synthgrid-animation-duration:4s;--synthgrid-color-lightest:#A1E8FF;--synthgrid-color-light:#81CDFA;--synthgrid-color-medium:#61B3F5;--synthgrid-color-dark:#2868B4;--synthgrid-color-darker:#1685C7;--synthgrid-color-darkest:#04162F;--synthgrid-border-color:#ffffff;--synthgrid-bg-square-color:rgba(255, 255, 255, 0.1);--synthgrid-drop-shadow-color:rgba(40, 120, 255, 0.5)}.synthgrid-logo{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:15%;width:100%;aspect-ratio:1/1;position:relative;min-width:4rem;overflow:visible}.synthgrid-logo::before{content:"";position:absolute;width:80%;height:80%;top:10%;left:10%;overflow:visible;background-color:#fff;border:1px solid var(--synthgrid-bg-square-color);box-sizing:border-box;z-index:-1;filter:drop-shadow(0 0 4rem var(--synthgrid-drop-shadow-color))}.synthgrid-logo>div{min-width:1rem;min-height:1rem;border-radius:50%;background-color:var(--synthgrid-color-medium);box-sizing:border-box;border:.25rem solid var(--synthgrid-border-color)}.synthgrid-logo>div:nth-child(1){background-color:var(--synthgrid-color-lightest)}.synthgrid-logo>div:nth-child(2){background-color:var(--synthgrid-color-medium)}.synthgrid-logo>div:nth-child(3){background-color:var(--synthgrid-color-dark)}.synthgrid-logo>div:nth-child(4){background-color:var(--synthgrid-color-medium)}.synthgrid-logo>div:nth-child(5){background-color:var(--synthgrid-color-darker)}.synthgrid-logo>div:nth-child(6){background-color:var(--synthgrid-color-medium)}.synthgrid-logo>div:nth-child(7){background-color:var(--synthgrid-color-dark)}.synthgrid-logo>div:nth-child(8){background-color:var(--synthgrid-color-medium)}.synthgrid-logo>div:nth-child(9){background-color:var(--synthgrid-color-lightest)}.synthgrid-logo>div{animation:synthgrid-pulse var(--synthgrid-animation-duration)infinite alternate}.synthgrid-logo>div:nth-child(1){animation-delay:0s}.synthgrid-logo>div:nth-child(2){animation-delay:-.4s}.synthgrid-logo>div:nth-child(3){animation-delay:-.8s}.synthgrid-logo>div:nth-child(4){animation-delay:-.4s}.synthgrid-logo>div:nth-child(5){animation-delay:-.8s}.synthgrid-logo>div:nth-child(6){animation-delay:-1.2s}.synthgrid-logo>div:nth-child(7){animation-delay:-.8s}.synthgrid-logo>div:nth-child(8){animation-delay:-1.2s}.synthgrid-logo>div:nth-child(9){animation-delay:-1.6s}@keyframes synthgrid-pulse{0%{background-color:var(--synthgrid-color-lightest)}25%{background-color:var(--synthgrid-color-light)}50%{background-color:var(--synthgrid-color-medium)}75%{background-color:var(--synthgrid-color-dark)}100%{background-color:var(--synthgrid-color-darkest)}}.synths-intro{display:flex;justify-content:center;.synth { display: inline-block; max-width: 30vw; * { text-align: center; width: 100%; margin-right: auto; margin-left: auto; } p { margin: 0; padding: 0; } .synth-name { font-size: 1.5rem; margin-bottom: 0.5rem; font-weight: 400; color: var(--color-accent); } .synth-role { font-style: italic; margin-bottom: 1.5rem; } } .meet-synth-btn { background-color: var(--color-accent); color: white; border: none; width: auto; padding: 0.4rem 1rem; border-radius: 0.25rem; cursor: pointer; font-size: 1rem; font-weight: 400; } .meet-synth-btn:hover { background-color: var(--color-accent-light); } .synth-conversation { margin-top: 1rem; padding-top: 1rem; } .conversation-container { margin-bottom: 1.5rem; } .message-bubble { min-height: 3rem; margin-bottom: 1rem; padding: 0.75rem; background-color: var(--color-background-alt); border-radius: 0.5rem; max-width: 95%; } .continue-btn { background-color: var(--color-accent); color: white; border: none; padding: 0.4rem 1rem; border-radius: 4px; cursor: pointer; font-size: 1rem; font-weight: 400; margin-top: 0.5rem; } .continue-btn:hover { background-color: #0052a3; } .synth-capabilities { margin-top: 1.5rem; } .synth-capabilities h4, .synth-principles h4, .synth-tips h4 { margin: 1.5rem 0 0.75rem 0; font-size: 1rem; color: #333; } .capabilities-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 1rem; } .capability-item { margin-bottom: 1rem; padding: 0.75rem; background-color: #f9f9f9; border-left: 2px solid #0066cc; } .capability-item h5 { margin: 0 0 0.5rem 0; font-size: 1rem; color: #0066cc; } .capability-item p { margin: 0 0 0.5rem 0; font-size: 0.9rem; } .capability-examples { margin: 0; padding-left: 1.25rem; font-size: 0.85rem; } .capability-examples li { margin-bottom: 0.25rem; } .synth-principles ul, .synth-tips ul { margin: 0; padding-left: 1.25rem; } .synth-principles li, .synth-tips li { margin-bottom: 0.5rem; font-size: 0.9rem; } .typing-indicator-wrapper { display: inline-block; padding: 0.5rem 1rem; background-color: #f5f5f5; border-radius: 1rem; } .typing-indicator { display: inline-block; width: 1rem; height: 1rem; border-radius: 50%; background-color: var(--color-accent); background-size: cover; } @media (max-width: 768px) { .synth-profile { flex-direction: column; text-align: center; } .capabilities-list { grid-template-columns: 1fr; } .message-bubble { max-width: 95%; } .meet-synth-btn { display: none; } }}