feat: refine BossAI console and website design

website/app/globals.css

@@ -104,6 +104,8 @@ a {
 .workflow-section,
 .ops-section,
 .factory-section,
+.studio-section,
+.control-section,
 .deploy-section,
 .final-section {
   position: relative;
@@ -601,6 +603,8 @@ a {
 .workflow-section,
 .ops-section,
 .factory-section,
+.studio-section,
+.control-section,
 .deploy-section,
 .final-section {
   padding-block: 72px;
@@ -620,6 +624,8 @@ a {
 }
 
 .section-heading span,
+.studio-copy span,
+.control-panel span,
 .ops-copy span,
 .factory-copy span,
 .deploy-section > div:first-child > span {
@@ -633,6 +639,8 @@ a {
 
 .section-heading h2,
 .workflow-panel h2,
+.studio-copy h2,
+.control-panel h2,
 .ops-copy h2,
 .factory-copy h2,
 .deploy-section h2,
@@ -692,6 +700,8 @@ a {
 .capability-card p,
 .section-heading.split p,
 .endpoint-card p,
+.studio-copy p,
+.studio-flow p,
 .workflow-panel p,
 .ops-copy p,
 .ops-card p,
@@ -705,6 +715,8 @@ a {
 
 .capability-card,
 .endpoint-card,
+.studio-flow article,
+.control-grid > div,
 .ops-card,
 .module-strip span {
   transform-style: preserve-3d;
@@ -713,6 +725,8 @@ a {
 
 .capability-card:hover,
 .endpoint-card:hover,
+.studio-flow article:hover,
+.control-grid > div:hover,
 .ops-card:hover,
 .module-strip span:hover {
   transform: translateY(-3px);
@@ -728,6 +742,64 @@ a {
   border-bottom: 1px solid var(--line);
 }
 
+.studio-section {
+  display: grid;
+  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
+  gap: 18px;
+  align-items: stretch;
+}
+
+.studio-copy,
+.studio-flow article,
+.control-section {
+  border: 1px solid var(--line);
+  border-radius: 32px;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.022)),
+    rgba(255, 255, 255, 0.025);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
+}
+
+.studio-copy {
+  display: grid;
+  align-content: end;
+  gap: 18px;
+  padding: 34px;
+}
+
+.studio-flow {
+  display: grid;
+  gap: 12px;
+}
+
+.studio-flow article {
+  min-height: 146px;
+  display: grid;
+  align-content: center;
+  gap: 10px;
+  padding: 22px;
+}
+
+.studio-flow em {
+  width: 42px;
+  height: 42px;
+  display: inline-grid;
+  place-items: center;
+  border: 1px solid rgba(215, 255, 77, 0.24);
+  border-radius: 14px;
+  background: rgba(215, 255, 77, 0.08);
+  color: var(--acid);
+  font-family: var(--font-geist-mono), monospace;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 800;
+}
+
+.studio-flow strong {
+  font-size: 24px;
+  letter-spacing: -0.045em;
+}
+
 .endpoint-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -905,6 +977,49 @@ a {
   padding: 34px;
 }
 
+.control-section {
+  display: grid;
+  grid-template-columns: minmax(0, 0.76fr) minmax(0, 1.24fr);
+  gap: 24px;
+  align-items: center;
+  padding: 34px;
+}
+
+.control-panel {
+  display: grid;
+  gap: 16px;
+}
+
+.control-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.control-grid > div {
+  min-height: 92px;
+  display: grid;
+  align-content: center;
+  gap: 12px;
+  border: 1px solid var(--line);
+  border-radius: 22px;
+  background: rgba(255, 255, 255, 0.03);
+  padding: 16px;
+}
+
+.control-grid span {
+  width: 9px;
+  height: 9px;
+  border-radius: 999px;
+  background: var(--acid);
+  box-shadow: 0 0 22px rgba(215, 255, 77, 0.5);
+}
+
+.control-grid strong {
+  font-size: 15px;
+  letter-spacing: -0.02em;
+}
+
 .module-strip {
   display: flex;
   flex-wrap: wrap;
@@ -970,6 +1085,8 @@ a {
   .api-section,
   .workflow-section,
   .ops-section,
+  .studio-section,
+  .control-section,
   .factory-section,
   .deploy-section {
     grid-template-columns: 1fr;
@@ -997,6 +1114,8 @@ a {
   .api-section,
   .workflow-section,
   .ops-section,
+  .studio-section,
+  .control-section,
   .factory-section,
   .deploy-section,
   .final-section {
@@ -1066,6 +1185,8 @@ a {
   }
 
   .workflow-panel,
+  .studio-copy,
+  .control-section,
   .ops-copy,
   .ops-grid,
   .factory-section,
@@ -1079,6 +1200,10 @@ a {
     gap: 4px;
     padding-block: 10px;
   }
+
+  .control-grid {
+    grid-template-columns: 1fr;
+  }
 }
 
 @media (prefers-reduced-motion: reduce) {