/* SYNX Workflow — Animated Code Edition
   Enhancements are decorative and optional; no network requests or external assets.
   Reduced-motion devices get a fully readable static version. */
:root{--code-ink:#080e1f;--code-violet:#918dff;--code-cyan:#73e3ed;--code-mint:#75edcd}
.site-header{position:sticky;top:0;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);background:rgba(11,17,36,.94);box-shadow:0 14px 40px rgba(7,14,34,.14)}
.preview-ribbon{position:relative;z-index:21}
.brand img{transition:transform .6s cubic-bezier(.2,.8,.2,1),filter .3s}
.brand:hover img{transform:rotate(-11deg) scale(1.11);filter:drop-shadow(0 0 11px #76e5d688)}
.desktop-nav a{position:relative}
.desktop-nav a::after{content:"";position:absolute;bottom:-11px;left:0;width:100%;height:2px;background:linear-gradient(90deg,#7779ff,#75e5d6);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.desktop-nav a:hover::after,.desktop-nav a.active::after{transform:scaleX(1)}
.btn{position:relative;isolation:isolate;overflow:hidden}
.btn:before{content:"";position:absolute;top:-80%;bottom:-80%;left:-45%;width:36%;transform:rotate(18deg) translateX(-210%);background:linear-gradient(90deg,transparent,#ffffff3a,transparent);transition:transform .7s ease;pointer-events:none}
.btn:hover:before{transform:rotate(18deg) translateX(500%)}
.hero{isolation:isolate}
.hero:before{animation:meshTravel 22s linear infinite;opacity:.43}
.hero:after{content:"";pointer-events:none;position:absolute;inset:0;z-index:0;background:radial-gradient(340px circle at var(--pointer-x,65%) var(--pointer-y,38%),rgba(123,132,255,.15),transparent 85%)}
.hero-aurora{animation:auroraShift 16s ease-in-out infinite alternate}
.hero-grid{z-index:1}
.hero h1 em{background-size:190% 190%;animation:gradientShift 7s ease-in-out infinite alternate}
.hero-copy{animation:riseIntro .8s both}
.hero-art{animation:riseArt 1s .12s both}
.hero-art .showcase{transition:transform .6s cubic-bezier(.2,.75,.2,1),box-shadow .6s}
.hero-art:hover .showcase{transform:rotate(0deg) translateY(-8px);box-shadow:0 45px 100px #040a22a8,0 0 0 9px #ffffff12}
.metric-graphic i:nth-child(even){animation:barBreathe 3.8s ease-in-out infinite alternate}
.metric-graphic i:nth-child(3){animation:barBreathe 3.1s .5s ease-in-out infinite alternate}
.bartrack span{animation:meterFill 1.6s .6s backwards}
.float-one{animation:floatOne 5.5s ease-in-out infinite}
.float-two{animation:floatTwo 6.5s ease-in-out infinite}
.hero-code-tag{border:1px solid #8a98ea50;background:rgba(11,19,41,.52);color:#cbd7f8;padding:9px 12px;display:inline-flex;align-items:center;gap:9px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:11px;letter-spacing:.005em;border-radius:8px;margin-bottom:12px;box-shadow:inset 0 0 15px #7991f20a}
.tag-terminal{color:#83ecd6;font-weight:900}
.tag-comment{color:#7f97b6}
.tag-blink{width:7px;height:13px;background:#79f2c9;animation:cursorBlink 1.1s steps(1) infinite;display:inline-block}
/* Entrance effects are progressive enhancement: visible by default when JS is absent. */
html.enhanced-motion .reveal-ready{opacity:0;transform:translateY(28px);transition:opacity .76s ease,transform .76s cubic-bezier(.16,1,.3,1);will-change:opacity,transform}
html.enhanced-motion .reveal-ready.is-visible{opacity:1;transform:translateY(0);will-change:auto}
.feature-tile,.benefit-card,.segment-card,.principle-card,.metric-card,.demo-metrics>div{transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease}
.feature-tile:hover,.benefit-card:hover,.segment-card:hover,.principle-card:hover,.demo-metrics>div:hover{transform:translateY(-6px);border-color:#a6adf1;box-shadow:0 20px 50px rgba(29,39,90,.12)}
.section-ink{position:relative;overflow:hidden}
.section-ink:after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 20%,#ffffff08 45%,transparent 70%);background-size:200% 200%;pointer-events:none;animation:gradientShift 16s linear infinite}
.subhero{position:relative;overflow:hidden}
.subhero:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 83% 21%,#727cff1c,transparent 42%);pointer-events:none}
.subhero>*{position:relative;z-index:1}
/* Coding/terminal showcase */
.build-section{background:#080e1d;color:#ecf1ff;padding:124px 0;position:relative;overflow:hidden;isolation:isolate;border-top:1px solid #a6b4ed1b;border-bottom:1px solid #a6b4ed20}
.build-section:before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(#9fbaff08 1px,transparent 1px),linear-gradient(90deg,#9fbaff08 1px,transparent 1px);background-size:46px 46px;mask-image:linear-gradient(90deg,transparent,black 35%,black 90%,transparent);animation:meshTravel 26s linear infinite}
.build-section:after{content:"";position:absolute;width:640px;height:640px;right:-220px;top:0;z-index:-1;background:radial-gradient(circle,#6c70ed30,transparent 65%);filter:blur(20px);animation:auroraShift 20s ease-in-out infinite alternate}
.build-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:70px;align-items:center}
.build-copy .eyebrow{color:#8cdef2;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:11px;letter-spacing:.1em}
.build-copy h2{font-size:clamp(37px,3.8vw,56px);line-height:1.11;letter-spacing:-.06em;margin:24px 0}
.build-copy h2 span{color:#7ce4d3}
.build-copy>p{font-size:15px;color:#b5c1df;max-width:480px;line-height:1.9}
.dev-notes{margin:35px 0 32px;display:grid;gap:22px}
.dev-note{display:flex;align-items:start;gap:15px}
.dev-note-number{font-size:12px;font-weight:900;color:#75dfcd;font-family:ui-monospace,monospace;border:1px solid #79ded34d;border-radius:7px;min-width:36px;height:35px;display:grid;place-items:center}
.dev-note strong{display:block;color:#f3f5ff;font-size:14px;margin-bottom:5px}
.dev-note small{color:#99a9c8;font-size:12px;line-height:1.7;display:block}
.code-stage{position:relative;min-width:0}
.ide-frame{background:#0d1528;border:1px solid #3a4b70;border-radius:18px;overflow:hidden;box-shadow:0 38px 100px #0007,0 0 0 9px #7581ff09;position:relative}
.ide-top{height:51px;display:flex;justify-content:space-between;align-items:center;padding:0 18px;background:#141f37;border-bottom:1px solid #2b3b60;gap:12px}
.ide-filename{color:#e2e9ff;display:flex;gap:9px;align-items:center;font-size:12px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;white-space:nowrap}
.ide-js-symbol{color:#172033;background:#f5d864;font-size:9px;padding:4px 3px;border-radius:3px;font-weight:800}
.ide-draft{font-size:8px;font-weight:800;letter-spacing:.12em;color:#91a0cb;white-space:nowrap}
.ide-body{display:grid;grid-template-columns:49px minmax(0,1fr);min-height:287px;background:linear-gradient(145deg,#111a30,#0d1528);overflow:hidden}
.ide-gutter{border-right:1px solid #293651;color:#536381;text-align:right;padding:24px 13px 24px 0;font:13px/27px ui-monospace,SFMono-Regular,Consolas,monospace;user-select:none}
.ide-source{padding:24px 10px 24px 18px;overflow-x:auto;white-space:nowrap;color:#d3ddf5;font:13px/27px ui-monospace,SFMono-Regular,Consolas,monospace}
.syntax-purple{color:#bf9dff}.syntax-blue{color:#83b9ff}.syntax-cyan{color:#83e4d5}.syntax-yellow{color:#ffce8e}.ide-comment{color:#6b849a;font-style:italic}
.terminal-caret{width:7px;height:14px;background:#73e9d2;display:inline-block;margin-left:4px;vertical-align:middle;animation:cursorBlink 1.1s steps(1) infinite}
.terminal-head{border-top:1px solid #26365a;border-bottom:1px solid #26365a;height:47px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;color:#bec9ea;font:11px ui-monospace,SFMono-Regular,Consolas,monospace;gap:12px}
.terminal-head>span{display:inline-flex;align-items:center;gap:8px}
.terminal-led{width:7px;height:7px;border-radius:50%;background:#79eac9;box-shadow:0 0 11px #79eac960;display:inline-block;animation:pulseLed 2.3s infinite}
.terminal-meta{font-size:10px;color:#788bb3}
.terminal-state{font-size:10px;color:#84eac7;border:1px solid #419d8055;padding:5px 9px;border-radius:6px;letter-spacing:.08em}
.terminal-screen{background:#080f20;padding:19px 21px;min-height:120px;color:#b1c6e7;font:12px/1.9 ui-monospace,SFMono-Regular,Consolas,monospace;white-space:pre-line}
.terminal-screen p{margin:0;line-height:1.85}
.terminal-prompt{color:#7cedc8;font-weight:800}
.terminal-success{color:#72e9be}
.terminal-muted{color:#7f94b5}
.ide-controls{padding:16px 20px;background:#111b32;display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.run-preview-btn,.reset-preview-btn{border:1px solid transparent;padding:10px 14px;border-radius:8px;font-size:11px;font-weight:800;transition:background .2s,transform .2s}
.run-preview-btn{background:#75e5cd;color:#102336}.run-preview-btn:hover{background:#b3f8e6;transform:translateY(-2px)}
.run-preview-btn:disabled{opacity:.55;cursor:wait}
.reset-preview-btn{background:#26324c;color:#cbd8ed;border-color:#344765}.reset-preview-btn:hover{background:#314163}
.ide-label{margin-left:auto;color:#7f91b4;font-size:10px}
.code-satellite{position:absolute;border:1px solid #516b8b;background:#172842e8;border-radius:9px;color:#dfecff;display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;padding:11px 14px;box-shadow:0 18px 35px #05091288;pointer-events:none}
.satellite-icon{font-family:ui-monospace,monospace;color:#72efd0}
.satellite-one{right:-25px;top:105px;animation:satelliteFloat 6s ease-in-out infinite}
.satellite-two{left:-20px;bottom:76px;animation:satelliteFloat 5s 1s ease-in-out infinite}
/* Rhythm and subtle movement */
@keyframes meshTravel{from{background-position:0 0}to{background-position:70px 70px}}
@keyframes auroraShift{from{transform:translate(-4%,-1%) scale(1)}to{transform:translate(4%,4%) scale(1.12)}}
@keyframes gradientShift{from{background-position:0% 50%}to{background-position:100% 50%}}
@keyframes riseIntro{from{transform:translateY(27px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes riseArt{from{transform:translateY(35px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes floatOne{0%,100%{transform:rotate(1.6deg) translateY(0)}50%{transform:rotate(1.6deg) translateY(-12px)}}
@keyframes floatTwo{0%,100%{transform:rotate(1.6deg) translateY(0)}50%{transform:rotate(1.6deg) translateY(12px)}}
@keyframes satelliteFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes cursorBlink{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes pulseLed{0%,100%{box-shadow:0 0 0 0 #7deacf44}50%{box-shadow:0 0 0 6px #7deacf00}}
@keyframes barBreathe{from{transform:scaleY(.55);transform-origin:bottom}to{transform:scaleY(1.05);transform-origin:bottom}}
@keyframes meterFill{from{width:0}}
@media(max-width:1100px){.build-grid{gap:35px}.ide-source{font-size:11px}.ide-draft{display:none}.code-satellite{display:none}}
@media(max-width:850px){.build-section{padding:82px 0}.build-grid{grid-template-columns:1fr;gap:44px}.build-copy{max-width:650px}.ide-source{font-size:13px}.hero-art{animation:none}.float-one,.float-two{animation:none}}
@media(max-width:610px){.site-header{position:sticky}.hero-code-tag{font-size:9px}.tag-comment{display:none}.build-section{padding:68px 0}.build-copy h2{font-size:37px}.ide-body{grid-template-columns:34px 1fr}.ide-gutter{padding:17px 7px 17px 0;font-size:10px;line-height:23px}.ide-source{padding:17px 7px 17px 10px;font-size:10px;line-height:23px}.ide-top{padding:0 11px;height:45px}.ide-filename{font-size:10px}.terminal-screen{font-size:10px;padding:15px;min-height:110px}.terminal-head{padding:0 12px}.terminal-meta{display:none}.ide-controls{padding:12px}.ide-label{margin-left:0;width:100%;font-size:9px}.dev-notes{gap:19px}}
@media(prefers-reduced-motion:reduce){.hero-aurora,.hero:before,.hero h1 em,.hero-copy,.hero-art,.float-one,.float-two,.tag-blink,.terminal-caret,.terminal-led,.build-section:before,.build-section:after,.section-ink:after,.code-satellite,.metric-graphic i,.bartrack span{animation:none!important}.hero:after{display:none}html.enhanced-motion .reveal-ready{opacity:1!important;transform:none!important;transition:none!important}.btn:before{display:none}}
html.user-reduced-motion *,html.user-reduced-motion *::before,html.user-reduced-motion *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}