@import url("https://fonts.googleapis.com/css2?family=Syne:wght@300;400;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap"); :root {
--bs-red:           #E8294A;
--bs-red-dim:       rgba(232, 41, 74, 0.45);
--bs-red-glow:      rgba(232, 41, 74, 0.32); --bs-light:         #f7f5f1;
--bs-light-2:       #eeeae4; --bs-dark:          #09090d;
--bs-dark-2:        #0f1018;
--bs-dark-3:        #161720; --bs-border:        rgba(0, 0, 0, 0.07); --bs-text:          #111118;
--bs-text-dim:      rgba(17, 17, 24, 0.48); --bs-text-inv:      #dde1ec;
--bs-text-inv-dim:  rgba(221, 225, 236, 0.48); --bs-spring:        cubic-bezier(0.34, 1.56, 0.64, 1);
--bs-ease-out:      cubic-bezier(0.22, 1, 0.36, 1);
--bs-ff-display: 'Syne', sans-serif;
--bs-ff-mono:    'JetBrains Mono', monospace;
} .bs-section {
background: var(--bs-light);
color: var(--bs-text);
position: relative;
overflow: hidden;
width: 100vw;
margin-left: calc(50% - 50vw);
padding-bottom: 120px;
} .bs-section::before {
content: '';
position: absolute;
inset: 0;
background-image:
radial-gradient(circle, rgba(17, 17, 24, 0.055) 1.2px, transparent 1.2px);
background-size: 32px 32px;
pointer-events: none;
z-index: 0;
opacity: 0;
transition: opacity 2.2s var(--bs-ease-out) 0.4s;
}
.bs-section.is-visible::before {
opacity: 1;
} .bs-section::after {
content: '';
position: absolute;
top: 0;
left: -100%;
height: 3px;
width: 100%;
background: linear-gradient(
90deg,
transparent 0%,
var(--bs-red) 20%,
var(--bs-red) 80%,
transparent 100%
);
z-index: 10;
transition: left 1.4s var(--bs-ease-out) 0.15s;
}
.bs-section.is-visible::after {
left: 0;
} .bs-header {
text-align: center;
padding: 100px 40px 64px;
position: relative;
z-index: 2;
}
.bs-eyebrow {
display: inline-flex;
align-items: center;
gap: 14px;
font-family: var(--bs-ff-mono);
font-size: 10px;
font-weight: 500;
letter-spacing: 4px;
text-transform: uppercase;
color: var(--bs-red);
margin-bottom: 28px;
opacity: 0;
transform: translateY(20px);
transition: opacity 0.7s ease 0.2s, transform 0.8s var(--bs-ease-out) 0.2s;
}
.bs-section.is-visible .bs-eyebrow {
opacity: 1;
transform: translateY(0);
}
.bs-eyebrow-line {
display: block;
width: 36px;
height: 1px;
background: var(--bs-red);
opacity: 0.6;
}
.bs-title {
font-family: var(--bs-ff-display);
font-size: clamp(38px, 5vw, 68px);
font-weight: 700;
letter-spacing: -2px;
color: var(--bs-text);
margin: 0 0 22px;
line-height: 1.05;
perspective: 900px;
transform-style: preserve-3d;
} .bs-word {
display: inline-block;
opacity: 0;
transform: translateY(70px) rotateX(-28deg);
transform-origin: bottom center;
transition:
opacity  0.65s ease            calc(var(--word-i, 0) * 80ms + 320ms),
transform 0.95s var(--bs-spring) calc(var(--word-i, 0) * 80ms + 320ms);
}
.bs-section.is-visible .bs-word {
opacity: 1;
transform: translateY(0) rotateX(0deg);
} .bs-title:not(:has(.bs-word)) {
opacity: 0;
transform: translateY(32px);
transition: opacity 0.9s ease 0.35s, transform 0.9s var(--bs-ease-out) 0.35s;
}
.bs-section.is-visible .bs-title:not(:has(.bs-word)) {
opacity: 1;
transform: translateY(0);
}
.bs-subtitle {
font-family: var(--bs-ff-mono);
font-size: 13px;
color: var(--bs-text-dim);
max-width: 500px;
margin: 0 auto;
line-height: 1.9;
letter-spacing: 0.3px;
opacity: 0;
transform: translateY(18px);
transition: opacity 0.8s ease 0.78s, transform 0.8s var(--bs-ease-out) 0.78s;
}
.bs-section.is-visible .bs-subtitle {
opacity: 1;
transform: translateY(0);
} .bs-stage {
position: relative;
display: flex;
align-items: center;
padding: 0 32px;
max-width: 1600px;
margin: 0 auto;
z-index: 2;
} .bs-edge {
flex-shrink: 0;
width: 130px;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
opacity: 0;
transition:
opacity   0.7s ease             0.9s,
transform 1s   var(--bs-spring) 0.9s;
}
.bs-edge--left  { transform: translateX(-60px); }
.bs-edge--right { transform: translateX(60px); flex-direction: column; }
.bs-section.is-visible .bs-edge {
opacity: 1;
transform: translateX(0) !important;
}
.bs-edge-label {
font-family: var(--bs-ff-mono);
font-size: 11px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--bs-text);
line-height: 1.8;
text-align: center;
}
.bs-edge-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--bs-red);
box-shadow: 0 0 12px var(--bs-red-glow);
opacity: 0.7;
}
.bs-edge-arrow {
font-size: 40px;
color: var(--bs-red);
opacity: 0.35;
line-height: 1;
} .bs-bridge-wrap {
flex: 1;
min-width: 0;
}
.bs-image-container {
position: relative;
width: 100%;
padding-bottom: 56.25%;
background: var(--bs-dark);
overflow: hidden;
border-radius: 4px; opacity: 0;
transform: translateY(40px) scale(0.96);
filter: blur(6px);
transition:
opacity   1.3s var(--bs-ease-out) 0.55s,
transform 1.5s var(--bs-ease-out) 0.55s,
filter    1.1s ease               0.55s,
box-shadow 0.4s ease;
box-shadow:
0 20px 70px rgba(0, 0, 0, 0.18),
0 4px  16px rgba(0, 0, 0, 0.1),
0 0 0 1px rgba(0, 0, 0, 0.05);
}
.bs-section.is-visible .bs-image-container {
opacity: 1;
transform: translateY(0) scale(1);
filter: blur(0);
}
.bs-image-container:hover {
box-shadow:
0 32px 100px rgba(0, 0, 0, 0.24),
0 8px  32px  rgba(0, 0, 0, 0.14),
0 0 0 1px rgba(232, 41, 74, 0.08);
}
.bs-bridge-img {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
object-fit: contain;
object-position: center;
display: block;
opacity: 0;
transform: scale(0.97);
transition:
opacity   1.4s var(--bs-ease-out) 0.7s,
transform 1.6s var(--bs-ease-out) 0.7s;
}
.bs-section.is-visible .bs-bridge-img {
opacity: 1;
transform: scale(1);
} .bs-scanline {
position: absolute;
top: 0; left: -130px;
width: 130px; height: 100%;
background: linear-gradient(
90deg,
transparent 0%,
rgba(232, 41, 74, 0.22) 50%,
transparent 100%
);
z-index: 5;
pointer-events: none;
}
.bs-section.is-visible .bs-scanline {
animation: bsScanReveal 2.2s cubic-bezier(0.25, 0, 0.25, 1) 0.65s forwards;
}
@keyframes bsScanReveal {
0%   { left: -130px; opacity: 0; }
8%   { opacity: 1; }
88%  { opacity: 1; }
100% { left: 110%;  opacity: 0; }
} .bs-nodes-bar {
position: relative;
width: 100%;
height: 112px;
background: var(--bs-dark-2);
border-top: 1px solid rgba(232, 41, 74, 0.22);
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.14);
} .bs-node {
position: absolute;
top: 50%;
transform: translateX(-50%) translateY(calc(-50% + 18px));
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
background: none;
border: none;
cursor: pointer;
padding: 0;
z-index: 20;
opacity: 0;
transition:
opacity  0.6s ease,
transform 0.8s var(--bs-spring);
}
.bs-section.is-visible .bs-node--software  { opacity: 1; transform: translateX(-50%) translateY(-50%); transition-delay: 0.72s; }
.bs-section.is-visible .bs-node--ai        { opacity: 1; transform: translateX(-50%) translateY(-50%); transition-delay: 0.88s; }
.bs-section.is-visible .bs-node--embedded  { opacity: 1; transform: translateX(-50%) translateY(-50%); transition-delay: 1.04s; }
.bs-section.is-visible .bs-node--hardware  { opacity: 1; transform: translateX(-50%) translateY(-50%); transition-delay: 1.20s; }
.bs-node--software { left: 23%; }
.bs-node--ai       { left: 40%; }
.bs-node--embedded { left: 57%; }
.bs-node--hardware { left: 74%; } .bs-node-core {
width: 50px;
height: 50px;
border-radius: 50%;
background: rgba(9, 9, 13, 0.9);
border: 1.5px solid rgba(232, 41, 74, 0.38);
display: flex;
align-items: center;
justify-content: center;
color: rgba(232, 41, 74, 0.78);
position: relative;
z-index: 2;
transition: all 0.32s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow:
0 0 18px rgba(232, 41, 74, 0.1),
inset 0 0 14px rgba(232, 41, 74, 0.05);
backdrop-filter: blur(4px); animation: bsCoreFloat 4.2s ease-in-out infinite;
}
.bs-node--ai       .bs-node-core { animation-duration: 3.7s; animation-delay: -1.1s; }
.bs-node--embedded .bs-node-core { animation-duration: 4.6s; animation-delay: -2.4s; }
.bs-node--hardware .bs-node-core { animation-duration: 3.4s; animation-delay: -0.6s; }
@keyframes bsCoreFloat {
0%, 100% { transform: translateY(0px); }
50%       { transform: translateY(-8px); }
} .bs-node:hover     .bs-node-core,
.bs-node.is-active .bs-node-core {
animation: none;
} .bs-node-ring {
position: absolute;
width: 50px;
height: 50px;
border-radius: 50%;
border: 1px solid rgba(232, 41, 74, 0.28);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
z-index: 1;
animation: bsRingPulse 3.5s ease-out infinite;
}
.bs-node-ring--2 {
animation-delay: 1.2s;
}
@keyframes bsRingPulse {
0%   { width: 50px;  height: 50px;  opacity: 0.5; }
100% { width: 110px; height: 110px; opacity: 0; }
} .bs-node-label {
font-family: var(--bs-ff-mono);
font-size: 9px;
font-weight: 700;
letter-spacing: 2.5px;
color: #fff;
background: transparent;
border: none;
padding: 4px 0;
white-space: nowrap;
transition: all 0.3s ease;
position: relative;
z-index: 2;
} .bs-node:hover .bs-node-core {
border-color: var(--bs-red);
color: #fff;
background: rgba(232, 41, 74, 0.88);
box-shadow:
0 0 28px rgba(232, 41, 74, 0.55),
0 0 64px rgba(232, 41, 74, 0.28),
0 0 120px rgba(232, 41, 74, 0.12),
inset 0 0 14px rgba(255, 255, 255, 0.12);
transform: scale(1.12) translateY(-3px);
}
.bs-node:hover .bs-node-label {
color: #fff;
letter-spacing: 3px;
}
.bs-node:hover .bs-node-ring {
border-color: rgba(232, 41, 74, 0.42);
} .bs-node.is-active .bs-node-core {
border-color: var(--bs-red);
color: #fff;
background: var(--bs-red);
box-shadow:
0 0 40px rgba(232, 41, 74, 0.65),
0 0 90px rgba(232, 41, 74, 0.38),
0 0 160px rgba(232, 41, 74, 0.18),
inset 0 0 20px rgba(255, 255, 255, 0.16);
transform: scale(1.18) translateY(-5px);
}
.bs-node.is-active .bs-node-label {
color: var(--bs-red);
letter-spacing: 3.5px;
}
.bs-node.is-active .bs-node-ring {
animation-duration: 1.8s;
border-color: rgba(232, 41, 74, 0.48);
} .bs-section.has-active .bs-node:not(.is-active) {
opacity: 0.32;
} .bs-beam {
position: absolute;
top: 58%;
width: 2px;
height: 0;
transform: translateX(-50%);
background: linear-gradient(to bottom, var(--bs-red), rgba(232, 41, 74, 0));
box-shadow: 0 0 14px var(--bs-red-glow);
z-index: 15;
pointer-events: none;
opacity: 0;
transition: left 0.22s ease; }
.bs-beam.is-active {
animation: bsBeamDraw 0.6s var(--bs-ease-out) forwards;
}
@keyframes bsBeamDraw {
0%   { height: 0;   opacity: 0;   filter: brightness(5) blur(3px); }
12%  {              opacity: 1;   filter: brightness(3) blur(1px); }
50%  { height: 28%; opacity: 1;   filter: brightness(1.6); }
100% { height: 42%; opacity: 1;   filter: brightness(1); }
} .bs-cards-area {
max-width: 1200px;
margin: 0 auto;
padding: 0 40px;
position: relative;
z-index: 2;
min-height: 100px;
} .bs-prompt {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
padding: 48px 20px;
font-family: var(--bs-ff-mono);
font-size: 12px;
color: var(--bs-text-dim);
letter-spacing: 1.5px;
transition: opacity 0.35s ease, transform 0.35s ease;
}
.bs-prompt.is-hidden {
opacity: 0;
pointer-events: none;
transform: translateY(-8px);
display: none;
}
.bs-prompt-arrow {
display: inline-block;
color: var(--bs-red);
opacity: 0.6;
animation: bsPromptBounce 1.8s ease-in-out infinite;
font-size: 18px;
}
@keyframes bsPromptBounce {
0%, 100% { transform: translateY(0); }
50%       { transform: translateY(-7px); }
} .bs-card {
display: none;
grid-template-columns: 80px 1fr;
background: var(--bs-dark-2);
border: 1px solid rgba(255, 255, 255, 0.04);
border-top: 2px solid var(--bs-red);
border-radius: 2px 2px 12px 12px;
overflow: hidden;
margin-top: 0; opacity: 0;
transform: perspective(1100px) rotateX(-10deg) translateY(32px);
transition:
opacity   0.6s var(--bs-ease-out),
transform 0.85s var(--bs-spring);
box-shadow:
0 20px 60px rgba(0, 0, 0, 0.2),
0 4px  16px rgba(0, 0, 0, 0.1);
}
.bs-card.is-active {
display: grid;
}
.bs-card.is-visible {
opacity: 1;
transform: perspective(1100px) rotateX(0deg) translateY(0);
box-shadow:
0 32px 90px rgba(0, 0, 0, 0.22),
0 8px  24px rgba(0, 0, 0, 0.12),
0 0 0 1px rgba(232, 41, 74, 0.07);
} .bs-card-sidebar {
background: var(--bs-red);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--bs-ff-mono);
font-size: 11px;
font-weight: 700;
letter-spacing: 4px;
color: rgba(255, 255, 255, 1) !important;
writing-mode: vertical-lr;
text-orientation: mixed;
transform: rotate(180deg);
padding: 28px 0;
} .bs-card-body {
padding: 40px 48px;
}
.bs-card-top {
margin-bottom: 32px;
padding-bottom: 24px;
border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.bs-card-tag {
display: inline-block;
font-family: var(--bs-ff-mono);
font-size: 11px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--bs-red) !important;
border: 1px solid rgba(232, 41, 74, 0.35);
padding: 5px 14px;
border-radius: 2px;
margin-bottom: 14px;
}
.bs-card-top h3 {
font-family: var(--bs-ff-display);
font-size: clamp(24px, 2.5vw, 34px);
font-weight: 600;
color: #fff !important;
margin: 0;
line-height: 1.2;
letter-spacing: -0.5px;
} .bs-card-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 36px;
}
.bs-block h4 {
display: flex;
align-items: center;
gap: 10px;
font-family: var(--bs-ff-mono);
font-size: 10px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.7);
margin: 0 0 14px;
}
.bs-badge {
font-family: var(--bs-ff-mono);
font-size: 10px;
font-weight: 700;
letter-spacing: 2px;
padding: 4px 10px;
border-radius: 2px;
}
.bs-badge--why  { background: rgba(255, 200, 0, 0.12);  color: #ffc800; border: 1px solid rgba(255, 200, 0, 0.25); }
.bs-badge--how  { background: rgba(0, 200, 150, 0.12);  color: #00c896; border: 1px solid rgba(0, 200, 150, 0.25); }
.bs-badge--what { background: rgba(232, 41, 74, 0.12);  color: var(--bs-red); border: 1px solid rgba(232, 41, 74, 0.25); }
.bs-block p {
font-size: 14px;
color: var(--bs-text-inv-dim);
line-height: 1.8;
margin: 0;
}
.bs-results {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.bs-results li {
font-size: 14px;
color: var(--bs-text-inv-dim);
padding-left: 20px;
position: relative;
line-height: 1.7;
}
.bs-results li::before {
content: '→';
position: absolute;
left: 0;
color: var(--bs-red);
font-size: 11px;
line-height: 1.8;
}
.bs-results strong {
color: #fff;
font-weight: 600;
} .bs-card-footer {
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.bs-card-link {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--bs-ff-mono);
font-size: 11px;
font-weight: 600;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--bs-red) !important;
text-decoration: none !important;
transition: gap 0.3s var(--bs-ease-out), opacity 0.2s ease;
opacity: 0.85;
}
.bs-card-link:hover {
gap: 12px;
opacity: 1;
color: var(--bs-red) !important;
} .bs-quote-wrap {
text-align: center;
padding: 80px 40px 0;
position: relative;
z-index: 2;
opacity: 0;
transform: translateY(28px);
transition: opacity 0.9s ease 1.4s, transform 0.9s var(--bs-ease-out) 1.4s;
}
.bs-section.is-visible .bs-quote-wrap {
opacity: 1;
transform: translateY(0);
}
.bs-quote-line {
width: 1px;
height: 64px;
background: linear-gradient(to bottom, transparent, rgba(232, 41, 74, 0.4));
margin: 0 auto 48px;
}
.bs-quote {
font-family: var(--bs-ff-display);
font-size: clamp(20px, 2.8vw, 36px);
font-weight: 300;
font-style: italic;
color: var(--bs-text-dim);
line-height: 1.55;
max-width: 860px;
margin: 0 auto;
border: none;
padding: 0;
}
.bs-quote-mark {
color: var(--bs-red);
font-style: normal;
font-size: 1.3em;
line-height: 0;
vertical-align: -0.25em;
opacity: 0.7;
} @media (max-width: 1200px) {
.bs-edge { width: 90px; }
.bs-edge-label { font-size: 8px; }
}
@media (max-width: 900px) {
.bs-stage { padding: 0 16px; }
.bs-edge  { display: none; }
.bs-card.is-active { grid-template-columns: 1fr; }
.bs-card-sidebar {
writing-mode: horizontal-tb;
transform: none;
padding: 14px 24px;
}
.bs-card-grid {
grid-template-columns: 1fr;
gap: 24px;
}
.bs-node-core { width: 40px; height: 40px; }
.bs-node-ring { width: 40px; height: 40px; }
@keyframes bsRingPulse {
0%   { width: 40px;  height: 40px;  opacity: 0.5; }
100% { width: 90px;  height: 90px;  opacity: 0; }
}
}
@media (max-width: 600px) {
.bs-header { padding: 60px 20px 40px; }
.bs-stage  { padding: 0; }
.bs-cards-area { padding: 0 16px; }
.bs-card-body  { padding: 24px; }
.bs-card-top h3 { font-size: 20px; }
.bs-node-core  { width: 32px; height: 32px; }
.bs-node-core svg { width: 15px; height: 15px; }
.bs-node-label { font-size: 7.5px; padding: 4px 8px; letter-spacing: 1.5px; }
}