/* Product navigation, footer, and the first visit's entrance sequence. */
:root{--frame-ink:#07111c;--frame-muted:#586d80;--frame-line:#e6edf2;--frame-height:82px}
.frame-wrap{width:min(1200px,calc(100% - 48px));margin-inline:auto}
.site-top{position:sticky;top:0;z-index:100;background:#ffffffdf;border-bottom:1px solid #e8edf180;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);transition:box-shadow .3s,background .3s;font-family:var(--font-body);color:var(--frame-ink)}
.site-top.is-scrolled{background:#fffffff2;box-shadow:0 6px 28px #152a4508;border-bottom-color:var(--frame-line)}
.site-top-inner{min-height:var(--frame-height);display:flex;align-items:center;gap:30px}
.frame-brand{display:inline-flex;align-items:center;gap:10px;flex-shrink:0;text-decoration:none;color:var(--frame-ink)}
.frame-brand img{width:42px;height:42px;object-fit:contain}
.frame-brand>span{font:750 25px/1.12 var(--font-body);letter-spacing:-.9px}
.frame-brand small{display:block;margin-top:6px;font:400 10px/1.4 var(--font-body);letter-spacing:1.4px;color:#65798c}
.site-top .frame-brand{gap:12px}
.site-top .frame-brand img{width:60px;height:60px}
.site-top .frame-nav{display:flex;align-items:center;gap:26px;margin-left:auto}
.site-top .frame-nav>a{position:relative;white-space:nowrap;padding:9px 0;font-size:13px;line-height:1.5;color:#455d71;letter-spacing:0;transition:color .2s}
.site-top .frame-nav>a:after{height:2px;bottom:2px;border-radius:2px;background:linear-gradient(90deg,#2bbfe8,#9c71ed)}
.site-top .frame-nav>a:hover,.site-top .frame-nav>a.active{color:#168db8}
.site-top .frame-nav>a:hover:after{transform:scaleX(1)}
.frame-top-actions{display:flex;align-items:center;gap:20px;flex-shrink:0}
.frame-source{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:41px;padding:0 20px;border:1.5px solid transparent;border-radius:999px;background:linear-gradient(#fff,#fff) padding-box,var(--download-gradient) border-box;font-size:12px;color:#455d71;white-space:nowrap;transition:background .2s,box-shadow .2s,transform .2s}
.frame-source:hover{background:linear-gradient(#fff,#fff) padding-box,var(--download-gradient-hover) border-box;box-shadow:0 5px 15px #6855e814;transform:translateY(-1px)}
.frame-source:active{transform:translateY(0);box-shadow:none}
.frame-source .github-mark,.mobile-source .github-mark{display:block;width:18px;height:18px;flex:0 0 18px}
.frame-source{gap:8px}
.mobile-source{align-items:center;gap:8px}
.enterprise-hero .hero-actions .hero-source{gap:10px}
.hero-source .github-mark{display:block;width:20px;height:20px;flex:0 0 20px}
.frame-source>span{font-size:15px;font-weight:400}
.frame-download{display:inline-flex;align-items:center;justify-content:center;gap:17px;min-height:41px;padding:0 21px;border:1px solid transparent;border-radius:999px;background:var(--download-gradient);box-shadow:0 5px 16px #6855e824,inset 0 1px 0 #ffffff33;color:#fff;font-size:12px;white-space:nowrap;transition:background .2s,box-shadow .2s,transform .2s}
.frame-download:hover{background:var(--download-gradient-hover);box-shadow:0 8px 20px #6855e838,inset 0 1px 0 #ffffff40;transform:translateY(-1px)}
.frame-download:active{transform:translateY(0);box-shadow:0 3px 10px #6855e81f}
.frame-download>span{font-size:15px;font-weight:400}
.frame-menu,.site-top .mobile-source{display:none}
.frame-brand:focus-visible,.site-top button:focus-visible,.site-top a:focus-visible,.site-bottom a:focus-visible,.site-bottom button:focus-visible{outline:2px solid #269eca;outline-offset:5px;border-radius:5px}
.site-top :is(.frame-download,.frame-source):focus-visible{border-radius:999px}
.scroll-progress{z-index:110}
.page-content [id]{scroll-margin-top:calc(var(--frame-height) + 18px)}
#overview{scroll-margin-top:var(--frame-height)}

/* Give the brand equal presence across the three product illustrations. */
#main-content .soduwork-logo{width:60px;height:60px;object-fit:contain;flex-shrink:0;opacity:1}
#main-content .model-hub,#main-content .reuse-core{gap:16px}
#main-content .architecture-core .wordmark{gap:14px}

.site-bottom{position:relative;isolation:isolate;overflow:clip;border-top:1px solid #e8eef3;background:radial-gradient(ellipse 60% 90% at 0 0,#eafaff99,transparent 75%),radial-gradient(ellipse 50% 100% at 100% 0,#f2ebff7d,transparent 76%),#fbfcfe;color:var(--frame-ink);font-family:var(--font-body)}
.site-bottom:before{content:"";position:absolute;inset:0 0 auto;height:2px;background:linear-gradient(90deg,transparent 3%,#a4e8f3 26%,#cbb6f2 63%,#d5ecab 83%,transparent);opacity:.8}
.frame-footer-main{display:grid;grid-template-columns:1.85fr .8fr .8fr 1.25fr;gap:48px;padding:60px 0 47px}
.frame-footer-brand .frame-brand{gap:11px}
.frame-footer-brand .frame-brand img{width:48px;height:48px}
.frame-footer-brand .frame-brand>span{font-size:30px;letter-spacing:-1.2px}
.frame-footer-tagline{margin-top:20px;font-size:16px;font-weight:600;line-height:1.8;letter-spacing:.2px;color:#213647}
.frame-footer-description{margin-top:9px;font-size:12px;line-height:1.9;color:#61788b}
.frame-footer-badge{display:inline-flex;align-items:center;gap:7px;margin-top:21px;padding:6px 11px;border:1px solid #e0edf1;border-radius:999px;background:#ffffffa6;font-size:10px;letter-spacing:.4px;color:#5d7b88}
.frame-footer-badge i{width:6px;height:6px;border-radius:50%;background:linear-gradient(135deg,#2fc2e2,#ad82ec);box-shadow:0 0 0 3px #2fc2e20c}
.frame-footer-column{display:flex;flex-direction:column;align-items:flex-start;gap:15px;min-width:0;padding-top:10px}
.frame-footer-column h2{margin:0 0 7px;font-size:13px;line-height:1.5;font-weight:650;color:#192d3e;letter-spacing:.5px}
.frame-footer-column>a,.frame-footer-column>button{font-size:12px;line-height:1.6;color:#5a7285;text-align:left;transition:color .2s}
.frame-footer-column>a:hover,.frame-footer-column>button:hover{color:#168db8}
.frame-footer-column>button>span{margin-left:4px;opacity:.8}
.frame-footer-contact .frame-phone{font:650 22px/1.3 var(--font-body);color:#152b3b;letter-spacing:-.4px;white-space:nowrap}
.frame-footer-contact .frame-service{display:flex;justify-content:space-between;align-items:center;gap:23px;margin-top:4px;padding:11px 15px;border:1px solid #dce8ed;border-radius:11px;background:#fff;color:#365b6d;box-shadow:0 3px 9px #182d4003}
.frame-footer-contact .frame-service:hover{border-color:#b4d9e5;background:#f5fcff}
.frame-footer-contact>small{font-size:10px;color:#748798;line-height:1.7;margin-top:-5px}
.frame-footer-legal{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:78px;padding:20px 0;border-top:1px solid #e2eaf0;font-size:10px;color:#667d8e;letter-spacing:.15px}
.frame-footer-legal>span>i{font-style:normal;margin:0 8px;color:#a8b8c5}
.frame-footer-platforms{margin-left:auto}
.frame-back-top{display:flex;align-items:center;gap:12px;color:#405e71;margin-left:25px;white-space:nowrap}
.frame-back-top>span{display:grid;place-items:center;width:31px;height:31px;border:1px solid #dfe8ee;border-radius:50%;background:#fff;font-size:15px;transition:transform .2s,border-color .2s}
.frame-back-top:hover>span{transform:translateY(-3px);border-color:#b2d4e4}
.closing-content{padding-bottom:70px}

/* CSS entrances start on document load, including standalone file:// opens. */
@keyframes frame-copy-in{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}
@keyframes frame-top-in{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
@keyframes frame-ornaments-in{from{opacity:0}to{opacity:1}}
.site-top-inner{animation:frame-top-in .7s cubic-bezier(.22,1,.36,1) both}
.enterprise-hero #hero-title{animation:frame-copy-in 1s cubic-bezier(.22,1,.36,1) .08s both}
.enterprise-hero .hero-lead{animation:frame-copy-in 1s cubic-bezier(.22,1,.36,1) .2s both}
.enterprise-hero .hero-actions{animation:frame-copy-in 1s cubic-bezier(.22,1,.36,1) .32s both}
.enterprise-hero .hero-ornaments{animation:frame-ornaments-in 1.5s ease .15s both}
/* Independent, slow cycles keep the accents drifting without moving the copy. */
.hero-ornaments{--ornament-drift:1;--ornament-play-state:paused}
.hero-ornaments.is-motion-active{--ornament-play-state:running}
@keyframes hero-ornament-float{
  0%,100%{transform:translate3d(0,0,0) rotate(var(--float-base-turn,0deg)) scale(1)}
  50%{transform:translate3d(calc(var(--float-x,8px) * var(--ornament-drift)),calc(var(--float-y,-14px) * var(--ornament-drift)),0) rotate(var(--float-turn,4deg)) scale(var(--float-zoom,1.07))}
}
@keyframes hero-ornament-color-flow{
  0%,100%{background-position:0% 15%;filter:hue-rotate(-4deg)}
  50%{background-position:100% 85%;filter:hue-rotate(8deg)}
}
@keyframes hero-ornament-ring-flow{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.hero-ornament-ring{--float-x:14px;--float-y:-18px;--float-base-turn:-24deg;--float-turn:-17deg;--float-zoom:1.05;animation:hero-ornament-float 18s ease-in-out -3s infinite}
.hero-ornament-ring:before{animation:hero-ornament-ring-flow 42s linear infinite}
.hero-ornament-half{--float-x:-12px;--float-y:17px;--float-turn:-5deg;--float-zoom:1.07;background-size:145% 145%;animation:hero-ornament-float 22s ease-in-out -7s infinite,hero-ornament-color-flow 28s ease-in-out -9s infinite}
.hero-ornaments .orb-blue{--float-x:7px;--float-y:-16px;--float-turn:6deg;--float-zoom:1.14;background-size:135% 135%;animation:hero-ornament-float 14s ease-in-out -6s infinite,hero-ornament-color-flow 24s ease-in-out -4s infinite}
.hero-ornaments .orb-violet{--float-x:-9px;--float-y:12px;--float-turn:-7deg;--float-zoom:1.18;background-size:135% 135%;animation:hero-ornament-float 17s ease-in-out -11s infinite,hero-ornament-color-flow 30s ease-in-out -14s infinite}
.hero-ornaments :is(.hero-ornament-ring,.hero-ornament-half,.hero-ornament-orb),.hero-ornament-ring:before{animation-play-state:var(--ornament-play-state)}
@media(max-width:600px){.hero-ornaments{--ornament-drift:.55}}
@media(prefers-reduced-motion:reduce){
  .hero-ornaments :is(.hero-ornament-ring,.hero-ornament-half,.hero-ornament-orb){animation:none;background-size:auto;background-position:initial;filter:none}
  .hero-ornament-ring:before{animation:none}
}
@keyframes frame-card-in{from{opacity:0;transform:translateY(30px) scale(.97) rotate(var(--card-turn,0deg))}to{opacity:1;transform:translateY(0) scale(1) rotate(var(--card-turn,0deg))}}
@keyframes frame-window-in{from{opacity:0;transform:translateX(-50%) translateY(40px) rotateX(13deg) rotateY(-7deg) scale(.98)}to{opacity:1;transform:translateX(-50%) translateY(0) rotateX(var(--window-lean,8deg)) rotateY(var(--window-turn,-7deg)) scale(1)}}
.scene-people{--card-turn:-3deg;--card-delay:.15s}.scene-intelligence{--card-turn:3deg;--card-delay:.25s}.scene-systems{--card-turn:2deg;--card-delay:.35s}.scene-deliverables{--card-turn:-2deg;--card-delay:.45s}
.enterprise-scene.is-entered .scene-card{animation:frame-card-in 1s cubic-bezier(.22,1,.36,1) var(--card-delay,0s) both}
.enterprise-scene.is-entered .scene-window-wrap{animation:frame-window-in 1.25s cubic-bezier(.22,1,.36,1) .08s both}

@media(max-width:1150px){.site-top-inner{gap:22px}.site-top .frame-nav{gap:20px}.frame-source{display:none}.frame-footer-main{gap:30px;grid-template-columns:1.65fr .75fr .75fr 1.2fr}.frame-footer-tagline{font-size:14px}}
@media(max-width:1100px){
  :root{--frame-height:74px}
  .site-top-inner{position:relative;justify-content:space-between;gap:18px}
  .site-top .frame-nav{position:absolute;top:calc(100% + 9px);left:0;right:0;display:none;margin:0;padding:12px;border:1px solid #e2ebf0;border-radius:18px;background:#fffffff9;box-shadow:0 16px 45px #263f5914;backdrop-filter:blur(20px);flex-direction:column;align-items:stretch;gap:2px}
  .site-top .frame-nav.is-open{display:flex;animation:frame-top-in .25s ease both}
  .site-top .frame-nav>a{padding:13px 15px;font-size:14px;border-radius:10px}
  .site-top .frame-nav>a:hover,.site-top .frame-nav>a.active{background:#effaff}
  .site-top .frame-nav>a:after{display:none}
  .site-top .mobile-source{display:flex;align-items:center;justify-content:space-between;margin-top:5px;padding:14px 15px;border-top:1px solid #e8eff4;font-size:13px;color:#587388}
  .frame-top-actions{gap:13px}
  .frame-menu{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:39px;height:39px;border:1px solid #e3ebf0;border-radius:50%;background:#fff}
  .frame-menu>span{display:block;width:15px;height:1.5px;background:#213849;transition:transform .2s}
  .frame-menu[aria-expanded=true]>span:first-child{transform:translateY(3.25px) rotate(45deg)}
  .frame-menu[aria-expanded=true]>span:last-child{transform:translateY(-3.25px) rotate(-45deg)}
  .frame-footer-main{grid-template-columns:1.5fr 1fr 1fr;gap:32px;padding:45px 0 36px}
  .frame-footer-brand{grid-column:1/-1;padding-bottom:27px;border-bottom:1px solid #e3ecf1}
  .frame-footer-tagline{font-size:17px}.frame-footer-description br{display:none}.frame-footer-badge{margin-top:17px}
  .frame-footer-contact .frame-phone{font-size:20px}.frame-footer-legal{flex-wrap:wrap;gap:13px 20px}.frame-footer-platforms{margin:0}.frame-back-top{margin-left:auto}
}
@media(max-width:600px){
  :root{--frame-height:68px}
  .frame-wrap{width:calc(100% - 36px)}
  .frame-brand{gap:8px}.frame-brand img{width:35px;height:35px}.frame-brand>span{font-size:22px;letter-spacing:-.8px}.frame-brand small{font-size:8px;letter-spacing:.5px;margin-top:4px}
  .site-top-inner{gap:10px}.site-top .frame-brand{gap:9px}.site-top .frame-brand img{width:44px;height:44px}
  #main-content .soduwork-logo{width:48px;height:48px}
  #main-content .model-hub{padding:14px;gap:10px}
  #main-content .model-hub .hub-spark .icon{width:18px;height:18px}
  #main-content .reuse-core{padding:16px 14px;gap:12px}
  #main-content .architecture-core .wordmark{gap:12px}
  .frame-download{min-height:36px;padding:0 14px;font-size:11px;gap:10px}.frame-download>span{font-size:13px}.frame-menu{width:35px;height:35px}.frame-top-actions{gap:9px}
  .frame-footer-main{grid-template-columns:1fr 1fr;gap:30px 24px;padding:35px 0 30px}
  .frame-footer-brand{padding-bottom:23px}.frame-footer-brand .frame-brand img{width:42px;height:42px}.frame-footer-brand .frame-brand>span{font-size:28px}.frame-footer-tagline{font-size:15px;margin-top:17px}.frame-footer-description{font-size:11px;max-width:290px;line-height:1.9}
  .frame-footer-column{gap:14px;padding-top:0}.frame-footer-column h2{font-size:12px;margin-bottom:3px}.frame-footer-column>a,.frame-footer-column>button{font-size:12px}
  .frame-footer-contact{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:12px 15px;padding-top:25px;border-top:1px solid #e3ecf1;align-items:start}
  .frame-footer-contact h2{grid-column:1/-1}.frame-footer-contact .frame-phone{font-size:21px}.frame-footer-contact>a[href^="mailto:"]{grid-row:3;grid-column:1;font-size:11px}.frame-footer-contact .frame-service{grid-column:2;grid-row:2/4;align-self:center;margin:0;padding:12px 13px;gap:8px;font-size:11px;white-space:nowrap}.frame-footer-contact>small{grid-column:1/-1;margin:0;font-size:9px}
  .frame-footer-legal{min-height:0;padding:20px 0 23px;gap:16px;font-size:9px}.frame-footer-legal>span:first-child{flex-basis:100%}.frame-footer-legal>span>i{margin:0 6px}.frame-back-top{gap:8px;margin-left:auto}.frame-back-top>span{width:27px;height:27px}
  .scene-window-wrap{--window-lean:5deg;--window-turn:-5deg}.closing-content{padding-bottom:47px}
}
@media(max-width:360px){.frame-wrap{width:calc(100% - 28px)}.frame-brand>span{font-size:20px}.frame-brand small{font-size:7px}.frame-brand img{width:31px;height:31px}.frame-download{padding:0 12px;gap:5px}.frame-top-actions{gap:7px}.frame-footer-contact .frame-phone{font-size:19px}}
@media(max-width:360px){.site-top-inner{gap:8px}.site-top .frame-brand{gap:6px}.site-top .frame-brand img{width:40px;height:40px}.site-top .frame-download{padding:0 10px;gap:3px}}
@media(prefers-reduced-motion:reduce){.site-top-inner,.enterprise-hero #hero-title,.enterprise-hero .hero-lead,.enterprise-hero .hero-actions,.enterprise-hero .hero-ornaments,.enterprise-scene.is-entered .scene-card,.enterprise-scene.is-entered .scene-window-wrap,.site-top .frame-nav.is-open{animation:none}.frame-download:hover,.frame-source:hover,.frame-back-top:hover>span{transform:none}}
/* Restore the original colorful navigation treatment across all product pages. */
.site-top .frame-nav.page-links>a,
html[lang=en] .site-top .frame-nav.page-links>a{font-size:16px;font-weight:550;line-height:1.5}
.site-top .frame-nav.page-links>a:after{
  content:"";display:block;position:absolute;left:0;right:0;bottom:0;height:3px;border-radius:999px;
  background:linear-gradient(90deg,#22b9df 0%,#526ee6 48%,#a36cde 100%);
  transform:scaleX(0);transform-origin:left center;opacity:0;
  transition:transform .24s ease,opacity .24s ease;
}
.site-top .frame-nav.page-links>a:is(.active,[aria-current=page],:hover,:focus-visible){
  background:linear-gradient(105deg,#168fc9 0%,#5865d8 48%,#9860cf 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
}
.site-top .frame-nav.page-links>a:is(.active,[aria-current=page],:hover,:focus-visible):after{transform:scaleX(1);opacity:1}
@media(max-width:1100px){
  .site-top .frame-nav.page-links>a,
  html[lang=en] .site-top .frame-nav.page-links>a{font-size:15px}
  .site-top .frame-nav.page-links>a:after{left:15px;right:15px;bottom:6px;height:2px}
}
@media(prefers-reduced-motion:reduce){.site-top .frame-nav.page-links>a:after{transition:none}}
/* Match both header actions to the 34px language selector. */
.site-top .frame-top-actions :is(.frame-source,.frame-download){box-sizing:border-box;height:34px;min-height:34px;padding-block:0;line-height:1.4;align-items:center}
/* Lighter menu typography with a restrained 2px gradient indicator. */
.site-top .frame-nav.page-links>a,
html[lang=en] .site-top .frame-nav.page-links>a,
.site-top .frame-nav.page-links>a:is(.active,[aria-current=page],:hover,:focus-visible){font-weight:400}
.site-top .frame-nav.page-links>a:after{height:2px}
/* Keep the gradient text without a navigation underline. */
.site-top .frame-nav.page-links>a:after{display:none}
/* Optional product-console entry uses the same compact header geometry. */
.site-top .management-entry{display:inline-flex;align-items:center;justify-content:center;flex:0 0 34px;width:34px;height:34px;box-sizing:border-box;border:1px solid #e3e2f1;border-radius:50%;background:linear-gradient(135deg,#fff,#faf9ff);color:#7565b3;transition:background .2s,border-color .2s,box-shadow .2s}
.site-top .management-entry[hidden]{display:none}
.site-top .management-entry svg{display:block;width:18px;height:18px}
.site-top .management-entry:hover{background:#f4f0ff;border-color:#b9ace2;box-shadow:0 4px 12px #6855e812}
.site-top .management-entry:focus-visible{outline:2px solid #9b89d3;outline-offset:3px}

/* Official Product Hunt badge, with a text link while the remote image is unavailable. */
.hero-intro .hero-actions-with-producthunt{gap:24px}
.hero-producthunt .producthunt-mark{display:block;width:20px;height:20px;flex:0 0 20px}
@media(max-width:767px){
  .hero-intro .hero-actions-with-producthunt{display:grid;grid-template-columns:repeat(2,minmax(0,180px));gap:18px 12px;justify-content:center}
  .hero-intro .hero-actions-with-producthunt .sw-button{width:100%;max-width:none;min-width:0}
  .hero-intro .hero-actions-with-producthunt .hero-producthunt{grid-column:1/-1;justify-self:center;width:calc((100% - 12px)/2);max-width:180px}
}
.producthunt-badge{position:relative;display:block;width:250px;max-width:100%;aspect-ratio:250/54;margin-top:18px;border-radius:10px;overflow:hidden;text-decoration:none}.producthunt-fallback{display:flex;align-items:center;justify-content:center;width:100%;height:100%;border:1px solid #555;border-radius:10px;background:#111;color:#fff;font-size:14px;font-weight:600}.producthunt-badge img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.producthunt-badge img[hidden]{display:none}.producthunt-badge:focus-visible{outline:2px solid #269eca;outline-offset:4px}