/* Material, motion and a phone-first product experience. Hero styles are separate. */
:root {
  --sx-bg: #050c18;
  --sx-surface: #0c1828;
  --sx-line: #aecbff29;
  --sx-text: #f3f7ff;
  --sx-muted: #a6b7cd;
  --sx-blue: #269eff;
  --sx-ice: #a7e3ff;
  --sx-radius: 20px;
}
.sx-wrap { width: min(100%, 1480px); padding-inline: clamp(20px, 5vw, 76px); margin-inline: auto; }
.sx-section { position: relative; isolation: isolate; padding-block: clamp(84px, 8vw, 128px); }
/* Static, masked material layers: detail at the edges, quiet behind the copy.
   No bitmap requests, canvas, blend modes or continuous animation. */
.sx-section::before, .sx-section::after { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; }
.sx-section::before {
  background: radial-gradient(circle, #afcfe9 0.7px, transparent 1px) 0 0 / 22px 22px;
  opacity: .2; mask-image: radial-gradient(ellipse at 88% 18%, #000, transparent 66%);
}
.sx-section::after {
  background-image: linear-gradient(#86b8dd0d 1px, transparent 1px), linear-gradient(90deg, #86b8dd0d 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: radial-gradient(ellipse at 92% 28%, #000, transparent 65%);
}
.craft-section::before { opacity: .17; mask-image: radial-gradient(ellipse at 8% 65%, #000, transparent 68%); }
.craft-section::after {
  background: repeating-radial-gradient(ellipse at 100% 48%, transparent 0 79px, #82b9e011 80px 81px, transparent 82px 146px);
  mask-image: linear-gradient(115deg, transparent 25%, #000 80%, transparent);
}
.connections-section::before { mask-image: radial-gradient(ellipse at 92% 12%, #000, transparent 52%), radial-gradient(ellipse at 0 92%, #000, transparent 50%); }
.connections-section::after { background-size: 64px 64px; mask-image: radial-gradient(ellipse at 8% 95%, #000, transparent 54%); }
.project-section::before { opacity: .19; mask-image: radial-gradient(ellipse at 95% 85%, #000, transparent 68%); }
.project-section::after {
  background: repeating-radial-gradient(ellipse at 0 100%, transparent 0 110px, #89bcdf10 111px 112px, transparent 113px 178px);
  mask-image: linear-gradient(90deg, #000, transparent 68%);
}
.sx-section h2 { font-size: clamp(38px, 4.45vw, 68px); line-height: 1.08; font-weight: 550; letter-spacing: -.054em; }
.sx-section h2 span, .delivery-layout h3 span { color: var(--sx-ice); }
.sx-index { display: block; margin-bottom: 26px; color: #a8c0dc; font-size: 12px; line-height: 1.5; letter-spacing: .14em; text-transform: uppercase; }
.sx-lead { color: var(--sx-muted); font-size: clamp(17px, 1.45vw, 21px); line-height: 1.65; max-width: 550px; }
.sx-text-link { display: inline-flex; align-items: center; justify-content: space-between; gap: 20px; padding: 12px 0; min-height: 44px; color: #c0e8ff; font-size: 14px; font-weight: 550; }
.sx-text-link .icon { width: 18px; height: 18px; transition: transform .25s; }
.sx-text-link:hover .icon { transform: translateX(4px); }
.sx-button {
  position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 52px; padding: 13px 24px; border: 1px solid #81cbff7a; border-radius: 10px;
  color: white; background: linear-gradient(125deg, #259df6, #1162e4);
  box-shadow: inset 0 1px #ffffff2c, 0 6px 30px #1479ff25;
  font-size: 15px; font-weight: 600; overflow: hidden; transition: box-shadow .25s, transform .25s;
}
.sx-button::after { content: ""; position: absolute; z-index: -1; inset: -50%; background: linear-gradient(100deg, transparent 35%, #fff5, transparent 65%); transform: translateX(-100%) skewX(-20deg); }
.sx-button:not(:disabled):hover { box-shadow: inset 0 1px #ffffff66, 0 8px 36px #1689ff55; transform: translateY(-2px); }
.sx-button:not(:disabled):hover::after { animation: sx-sheen .65s ease-out; }
.sx-button .icon { width: 19px; height: 19px; }
.sx-button:disabled { opacity: .85; }
@keyframes sx-sheen { to { transform: translateX(100%) skewX(-20deg); } }
.sx-section-heading { display: flex; justify-content: space-between; align-items: end; gap: 60px; margin-bottom: 54px; }
.sx-section-heading .sx-lead { max-width: 355px; }
.solution-section { padding-top: 50px; background: var(--sx-bg); overflow: clip; }
.solution-intro { position: relative; display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; min-height: 490px; padding-block: 40px 68px; }
.solution-intro-copy { position: relative; z-index: 1; }
.solution-intro-copy .sx-lead { max-width: 560px; margin-top: 25px; }
.solution-intro-copy .sx-text-link { margin-top: 18px; }
.solution-intro h2 { font-size: clamp(40px, 4.65vw, 72px); }
.solution-intro h2 span { background: linear-gradient(110deg, #a4e7ff, #268ff6); background-clip: text; -webkit-text-fill-color: transparent; }
.ribbon-art { position: relative; display: grid; place-items: center; min-width: 0; margin: 0 -80px 0 -55px; pointer-events: none; }
.ribbon-sculpture {
  position: relative; width: 100%; min-width: 0; aspect-ratio: 3 / 2;
  /* Only the deliberately cropped top edge fades; the object has real alpha. */
  mask-image: linear-gradient(180deg, transparent, #000 12%, #000 96%, transparent);
  animation: ribbon-levitate 8s ease-in-out infinite; animation-play-state: paused;
}
.ribbon-sculpture img { display: block; width: 100%; height: 100%; object-fit: contain; }
.ribbon-sheen { position: absolute; inset: 0; opacity: 0; mask-size: contain; mask-position: center; mask-repeat: no-repeat; }
/* Reuse the already-loaded cutout as a static mask, only while on screen.
   The inner highlight animates transform/opacity, never mask position or blur. */
.ribbon-art.motion-visible .ribbon-sheen { mask-image: url("/assets/experience/ribbon-cutout.webp"); opacity: 1; }
.ribbon-sheen::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(112deg, transparent 36%, #bdeaff55 44%, #effaff 50%, #bdeaff55 56%, transparent 64%);
  transform: translateX(-85%); opacity: 0;
  animation: ribbon-reflect 12s ease-in-out infinite; animation-play-state: paused;
}
.ribbon-art.motion-visible .ribbon-sculpture, .ribbon-art.motion-visible .ribbon-sheen::after, .motion-visible .phone-ribbon { animation-play-state: running; }
@keyframes ribbon-levitate {
  0%, 100% { transform: translate3d(0, 6px, 0) rotate(.5deg); }
  50% { transform: translate3d(0, -7px, 0) rotate(-.5deg); }
}
@keyframes ribbon-reflect {
  0%, 58% { transform: translateX(-85%); opacity: 0; }
  63% { opacity: .28; }
  77% { transform: translateX(85%); opacity: .28; }
  82%, 100% { transform: translateX(85%); opacity: 0; }
}
@keyframes ribbon-float { from { transform: translateY(-8px) rotate(-1.5deg); } to { transform: translateY(8px) rotate(1.5deg); } }
.solution-lab { position: relative; z-index: 2; scroll-margin-top: 28px; }
.solution-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 7px; margin-bottom: 20px; background: linear-gradient(110deg, #0b182a, #071320); border: 1px solid var(--sx-line); border-radius: 17px; }
.solution-tabs button { position: relative; display: flex; gap: 17px; align-items: center; padding: 19px 22px; min-height: 85px; border: 1px solid transparent; border-radius: 11px; text-align: left; color: #9db4cc; transition: background .25s, border-color .25s, color .25s; }
.solution-tabs button:hover { color: #fff; background: #ffffff05; }
.solution-tabs button[aria-selected="true"] { border-color: #2997ebc2; color: #fff; background: radial-gradient(ellipse at 10% 0, #1b68c780, transparent 80%), #0c2647; box-shadow: inset 0 1px #acdaff26, 0 3px 25px #0876ff14; }
.solution-tabs .icon { width: 27px; height: 27px; color: #b3dfff; }
.solution-tabs button[aria-selected="true"] .icon { color: #62c8ff; filter: drop-shadow(0 0 7px #3da7ff66); }
.solution-tabs strong { display: block; font-size: 17px; font-weight: 600; letter-spacing: -.025em; }
.solution-tabs small { display: block; font-size: 12px; color: #a1b7d0; margin-top: 5px; }
.lab-shell { position: relative; background: linear-gradient(130deg, #101d30, #0a1423 70%); border: 1px solid #4c80b765; border-radius: var(--sx-radius); box-shadow: 0 20px 80px #0004, inset 0 1px #c4deff17; overflow: hidden; }
.lab-shell::before, .brief-builder::before { content: ""; pointer-events: none; position: absolute; inset: 0; background: radial-gradient(460px circle at var(--light-x, 90%) var(--light-y, -30%), #469bff0e, transparent 70%); }
.lab-toolbar { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 67px; padding: 0 28px; border-bottom: 1px solid var(--sx-line); }
.lab-brand { display: flex; align-items: center; gap: 10px; font-size: 15px; letter-spacing: -.02em; }
.lab-brand > .icon { width: 24px; height: 24px; color: #9cd9ff; }
.lab-brand b { font-weight: 400; color: #a2b9d0; }
.lab-demo-label { display: flex; align-items: center; gap: 8px; color: #b0c3d8; font-size: 12px; }
.lab-demo-label i, .lab-caption i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #6bdabc; box-shadow: 0 0 10px #6bdabc44; }
.lab-panel { position: relative; padding: 30px; }
.lab-panel + .lab-panel { border-top: 1px solid var(--sx-line); }
.lab-shell.enhanced .lab-panel { border-top: 0; }
.lab-panel.panel-enter { animation: sx-panel-in .3s ease-out; }
@keyframes sx-panel-in { from { opacity: .3; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.demo-description { display: flex; justify-content: space-between; align-items: flex-start; gap: 30px; margin-bottom: 26px; }
.demo-description h3 { font-size: 25px; font-weight: 550; letter-spacing: -.035em; line-height: 1.2; }
.demo-description p { margin-top: 9px; color: #a5b7ca; font-size: 14px; line-height: 1.6; }
.demo-number { color: #7795b650; font-size: 38px; font-weight: 300; line-height: 1; letter-spacing: -.05em; }
.flow-workspace { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.message-panel, .workflow-panel { min-width: 0; border: 1px solid #739ac635; border-radius: 13px; padding: 24px; background: #040d1880; }
.panel-label { display: flex; align-items: center; gap: 9px; margin-bottom: 22px; font-size: 15px; font-weight: 550; }
.panel-label .icon { width: 20px; height: 20px; color: #87cbfb; }
.quiet-tag { font-size: 11px; line-height: 1.4; border: 1px solid #86baff26; border-radius: 100px; color: #bdd6ee; padding: 4px 9px; font-weight: 450; }
.panel-label .quiet-tag { margin-left: auto; }
.sample-message { padding: 20px; background: linear-gradient(130deg, #1a2b40, #132135); border: 1px solid #a1bdd92b; border-radius: 10px; box-shadow: 0 4px 24px #0002; }
.sender { display: flex; align-items: center; gap: 12px; }
.sender-avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(130deg, #405c7e, #203854); color: #e6f1ff; font-size: 12px; }
.sender strong { display: block; font-weight: 550; font-size: 14px; }
.sender small { display: block; color: #9db4ce; font-size: 12px; margin-top: 3px; }
.sender > .icon { margin-left: auto; width: 15px; color: #7891ae; }
.sample-message > p { min-height: 3.2em; margin-top: 22px; color: #edf3fc; font-size: 17px; line-height: 1.6; }
.demo-field { display: block; margin: 22px 0 7px; color: #acc0d7; font-size: 12px; }
.message-panel select { width: 100%; min-height: 47px; padding: 10px 14px; background: #15253a; border: 1px solid #6b8cba5c; border-radius: 8px; font-size: 15px; color: #eef6ff; }
.message-panel select, .brief-dialog select {
  appearance: none; -webkit-appearance: none; padding-right: 40px;
  background-color: #15253a;
  background-image: linear-gradient(45deg, transparent 50%, #c3def5 50%), linear-gradient(135deg, #c3def5 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
  background-size: 5px 5px; background-repeat: no-repeat;
}
.workflow-steps { position: relative; display: flex; flex-direction: column; gap: 12px; list-style: none; padding: 0; margin: 0; }
.workflow-steps::before { content: ""; position: absolute; top: 40px; bottom: 40px; left: 17px; width: 1px; background: #31648d; }
.workflow-steps li { position: relative; display: grid; grid-template-columns: 36px minmax(0,1fr) auto; gap: 14px; align-items: center; min-height: 82px; padding: 10px 0; }
.step-dot { position: relative; z-index: 1; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: #b9d8f6; background: #112942; border: 1px solid #4688bf; font-size: 14px; transition: background .35s, box-shadow .35s; }
.workflow-steps strong { display: block; color: #e2ebf7; font-weight: 550; font-size: 15px; }
.workflow-steps p { color: #91a8c0; font-size: 13px; line-height: 1.45; margin-top: 6px; }
.step-state { color: #8ba4bf; font-size: 11px; width: 48px; text-align: right; }
.workflow-steps li[data-state="active"] .step-dot { background: #137ddb; box-shadow: 0 0 0 6px #137ddc1a, 0 0 23px #288fff66; }
.workflow-steps li[data-state="active"] strong { color: #a7e4ff; }
.workflow-steps li[data-state="done"] .step-dot { background: #123e3d; border-color: #65cfb7; color: #97f1d2; }
.workflow-steps li[data-state="done"] .step-state { color: #80dcbd; }
.lab-actionbar { display: flex; justify-content: space-between; align-items: center; gap: 28px; margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--sx-line); }
.demo-feedback { display: flex; align-items: center; gap: 12px; min-height: 44px; max-width: 64%; color: #a9bfd6; font-size: 13px; line-height: 1.5; }
.demo-feedback .icon { width: 21px; height: 21px; color: #80ccff; }
.demo-feedback span { display: block; }
.lab-actionbar .sx-button { flex: none; min-width: 235px; }
.lab-caption { display: flex; justify-content: space-between; gap: 20px; margin-top: 20px; color: #8ba2bd; font-size: 12px; }
.lab-caption > span:first-child { display: flex; align-items: center; gap: 9px; }
.lab-caption > span:last-child { color: #849ab2; }
.lab-footnote { color: #9aaec6; margin-top: 18px; font-size: 12px; line-height: 1.6; }

/* Booking is a real local interaction; no simulated network or actual appointment. */
.booking-workspace { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; padding: 6px 0 4px; }
.booking-picker fieldset { margin: 0; padding: 0; border: 0; }
.booking-picker fieldset + fieldset { margin-top: 28px; }
.booking-picker legend { padding: 0; font-size: 15px; font-weight: 550; margin-bottom: 15px; }
.booking-picker legend > span { display: block; margin-top: 4px; color: #97adc5; font-size: 12px; font-weight: 400; }
.booking-days, .booking-times { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.booking-times { grid-template-columns: repeat(4, 1fr); }
.booking-picker label { position: relative; }
.booking-picker input, .direction-options input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.booking-picker label > span { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 107px; gap: 8px; border: 1px solid #456283; border-radius: 10px; background: #0d1d30; cursor: pointer; transition: background .2s, border-color .2s; }
.booking-days small { font-size: 13px; color: #a1b9d3; }
.booking-days strong { font-size: 31px; font-weight: 500; letter-spacing: -.04em; }
.booking-times label > span { min-height: 46px; font-size: 14px; }
.booking-picker input:checked + span { border-color: #52b7ff; background: #12396a; box-shadow: inset 0 0 24px #2b8aff11; }
.booking-picker input:focus-visible + span, .direction-options input:focus-visible + span { outline: 3px solid #87d3ff; outline-offset: 4px; }
.booking-ticket { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 22px; border: 1px solid #417cb552; border-radius: 14px; background: radial-gradient(ellipse at 50% 0, #153a6480, transparent 70%), #081421; text-align: center; }
.ticket-icon { display: grid; place-items: center; width: 50px; height: 50px; margin-bottom: 14px; border-radius: 13px; background: #144273; color: #a9e5ff; box-shadow: inset 0 1px #b5e7ff44; }
.ticket-icon .icon { width: 26px; height: 26px; }
.booking-ticket h4 { margin: 18px 0 9px; font-size: 21px; font-weight: 550; letter-spacing: -.03em; }
.booking-ticket > p { color: #b5c9dc; font-size: 13px; }
.ticket-time { font-size: 34px; line-height: 1.2; font-weight: 400; letter-spacing: -.05em; margin: 8px 0; }
.ticket-duration { color: #88a3bf !important; }
.ticket-state { margin-top: 16px; border-top: 1px dashed #5b88b050; padding-top: 12px; width: 100%; min-height: 54px; display: grid; align-items: center; }
.booking-ticket.confirmed { border-color: #60d3b58c; }
.booking-ticket.confirmed .ticket-state { color: #91e9c9; }
.booking-ticket.confirmed .ticket-icon { color: #b0f4d8; background: #155c52; }

.operations-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-bottom: 18px; }
.operations-toolbar > span { font-size: 15px; font-weight: 550; }
.operations-toolbar b { font-weight: 500; color: #91b6d5; padding-left: 6px; }
.order-filters { display: flex; padding: 4px; border: 1px solid #55749947; border-radius: 9px; background: #060f1c; }
.order-filters button { padding: 8px 13px; border-radius: 6px; color: #a8bfd7; font-size: 13px; min-height: 40px; }
.order-filters button[aria-pressed="true"] { background: #1d3451; color: #f0f7ff; }
.order-list { min-height: 308px; }
.order-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) 120px 96px; align-items: center; gap: 22px; padding: 17px 20px; border: 1px solid #4663844f; border-radius: 10px; background: #0b1a2b; }
.order-row + .order-row { margin-top: 10px; }
.order-mark { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 11px; background: #17314d; color: #8fd2ff; }
.order-info small { color: #91abc7; font-size: 11px; }
.order-info h4 { margin: 2px 0; font-size: 16px; font-weight: 550; }
.order-info p { color: #93a8bf; font-size: 12px; }
.order-status { color: #aad3fd; font-size: 12px; justify-self: start; padding: 5px 9px; background: #15477944; border: 1px solid #5a99d13d; border-radius: 6px; }
.order-row[data-state="1"] .order-status { color: #d6c4ff; background: #6840a330; border-color: #ab8cda38; }
.order-row[data-state="2"] .order-status { color: #96e1c3; background: #235a3e36; border-color: #6bb59842; }
.order-next { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 10px; color: #cce9ff; font-size: 13px; border-radius: 7px; border: 1px solid #5b8fb85c; }
.order-next .icon { width: 16px; height: 16px; }
.order-next:hover { background: #21415e; }
.order-empty { padding: 50px 20px; text-align: center; color: #a8c1d9; border: 1px dashed #476a8e; border-radius: 12px; }
.website-controls { display: flex; gap: 9px; margin-bottom: 16px; }
.website-controls button { display: flex; align-items: center; gap: 9px; padding: 9px 14px; min-height: 43px; border: 1px solid #55759966; border-radius: 9px; color: #abc4df; font-size: 13px; }
.website-controls button[aria-pressed="true"] { color: white; background: #193a60; border-color: #4ca7f6; }
.website-controls i { width: 12px; height: 12px; border-radius: 50%; background: #edf7ff; border: 1px solid #607893; }
.website-controls [data-site-theme="dark"] i { background: #0c1625; }
.website-controls [data-site-theme="blue"] i { background: #2484ff; }
.website-demo { --preview-ink: #102535; --preview-surface: #e3f1fa; position: relative; isolation: isolate; min-height: 345px; border-radius: 12px; overflow: hidden; background: var(--preview-surface); color: var(--preview-ink); transition: background .4s, color .4s; }
.website-demo > img { position: absolute; right: 0; bottom: 0; width: 76%; height: 100%; object-fit: cover; object-position: center; mask-image: linear-gradient(90deg, transparent, black 45%); transition: filter .4s, opacity .4s; }
.website-demo[data-theme="dark"] { --preview-ink: #eef6ff; --preview-surface: #0a1525; }
.website-demo[data-theme="dark"] > img { opacity: .65; }
.website-demo[data-theme="blue"] { --preview-ink: white; --preview-surface: #0644a5; }
.website-demo[data-theme="blue"] > img { opacity: .8; }
.website-demo-content { position: relative; z-index: 1; padding: 34px; width: 66%; }
.fictional-brand { font-size: 11px; letter-spacing: .12em; font-weight: 600; }
.website-demo h4 { font-size: clamp(36px, 4vw, 59px); font-weight: 600; line-height: 1.03; letter-spacing: -.06em; margin: 32px 0 12px; }
.website-demo p { font-size: 14px; }
.website-demo-content button, .architecture-link { display: inline-flex; align-items: center; gap: 18px; margin-top: 24px; padding: 11px 18px; min-height: 44px; color: #15293c; background: #fff; border-radius: 100px; font-size: 12px; font-weight: 550; box-shadow: 0 3px 15px #11294915; }
.website-demo-content .icon, .architecture-link .icon { width: 17px; height: 17px; }
.site-detail-copy { position: absolute; bottom: 20px; right: 20px; z-index: 2; padding: 20px; width: 32%; border-radius: 10px; background: #f6fbfff2; color: #15334a; box-shadow: 0 15px 40px #0003; font-size: 14px; }

/* Editorial examples have real imagery and code-native text, never UI screenshots. */
.craft-section { background: linear-gradient(180deg, #070f1d, #081320 65%, #050c18); border-block: 1px solid #789bbb14; overflow: clip; }
.craft-grid { display: grid; grid-template-columns: 1.65fr 1fr; align-items: start; gap: 26px; }
.craft-example { min-width: 0; }
.showcase-browser { position: relative; overflow: hidden; border-radius: 17px; border: 1px solid #cae3fb6e; background: #daebf6; box-shadow: 0 15px 60px #0003; }
.showcase-toolbar { height: 39px; display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 0 17px; background: #e5eef8; color: #46627c; font-size: 10px; }
.window-dots { display: flex; gap: 5px; }
.window-dots i { width: 6px; height: 6px; border-radius: 50%; background: #a0b3c6; }
.showcase-toolbar > .icon { width: 13px; height: 13px; }
.architecture-preview { position: relative; min-height: 475px; overflow: hidden; }
.architecture-preview > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% center; transition: transform 1.3s cubic-bezier(.2,.7,.2,1); }
.architecture-preview:hover > img { transform: scale(1.045); }
.architecture-copy { position: relative; z-index: 1; padding: 29px 34px; color: #071926; }
.architecture-copy h3 { font-size: clamp(34px, 3.6vw, 55px); font-weight: 650; line-height: 1.04; letter-spacing: -.06em; margin-top: 75px; }
.architecture-copy > p { margin-top: 20px; color: #26445b; font-size: 13px; line-height: 1.6; }
.architecture-corner { position: absolute; bottom: 25px; right: 24px; font-size: 8px; letter-spacing: .16em; text-transform: uppercase; color: #123650; }
.craft-caption { display: flex; align-items: start; gap: 18px; margin-top: 24px; }
.craft-caption > span { font-size: 12px; color: #82b7db; border-right: 1px solid #78cfff7a; padding: 5px 14px 5px 0; }
.craft-caption h3 { font-size: 21px; font-weight: 530; line-height: 1.2; letter-spacing: -.03em; }
.craft-caption p { font-size: 14px; line-height: 1.65; color: #a4b6ca; margin-top: 10px; max-width: 550px; }
.phone-stage { height: 516px; position: relative; isolation: isolate; display: grid; place-items: center; overflow: hidden; border: 1px solid #698db141; border-radius: 17px; background: #050c18; }
.phone-ribbon { position: absolute; z-index: -1; height: 94%; width: 155%; max-width: none; object-fit: cover; animation: ribbon-float 15s ease-in-out infinite alternate; animation-play-state: paused; }
.product-phone { position: relative; width: 243px; min-height: 426px; padding: 43px 18px 25px; border: 4px solid #1a2938; outline: 1px solid #acccdf80; border-radius: 37px; background: linear-gradient(140deg, #101e31, #050c17); box-shadow: 2px 7px 0 #030a11, 0 20px 50px #0009, inset 0 1px #c2e2ff66; transform: rotate(6deg); transition: transform .5s; }
.phone-stage:hover .product-phone { transform: rotate(1deg) translateY(-5px); }
.phone-speaker { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); width: 64px; height: 14px; border-radius: 15px; background: #030812; }
.phone-heading { display: flex; align-items: center; justify-content: space-between; font-size: 10px; }
.phone-heading .icon { width: 14px; height: 14px; }
.product-phone h3 { margin-top: 24px; font-size: 24px; font-weight: 540; letter-spacing: -.045em; }
.product-phone h3 span { display: block; margin-top: 8px; color: #91abc4; font-size: 11px; letter-spacing: 0; font-weight: 400; }
.phone-tasks { display: flex; flex-direction: column; gap: 9px; margin-top: 22px; }
.phone-tasks > div { display: flex; align-items: center; gap: 10px; padding: 12px 10px; border-radius: 9px; background: #172b42a1; border: 1px solid #90b6d41f; }
.phone-tasks .icon { width: 22px; height: 22px; color: #8dd1ff; }
.phone-tasks span { font-size: 12px; }
.phone-tasks small { display: block; font-size: 9px; color: #98b3cd; margin-top: 4px; }
.product-phone > a { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; padding: 12px; border-radius: 10px; color: white; background: #147fea; font-size: 11px; min-height: 44px; }
.product-phone > a .icon { width: 15px; height: 15px; }
.phone-home { position: absolute; bottom: 9px; left: 50%; transform: translateX(-50%); width: 72px; height: 3px; background: #8c9fae; border-radius: 4px; }
.craft-principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 62px; padding-top: 36px; border-top: 1px solid var(--sx-line); }
.craft-principles > div { position: relative; padding-left: 43px; }
.craft-principles > div + div { border-left: 1px solid var(--sx-line); padding-left: 72px; }
.craft-principles .icon { position: absolute; top: 1px; left: 0; width: 24px; height: 24px; color: #93d3f8; }
.craft-principles > div + div .icon { left: 28px; }
.craft-principles h3 { font-size: 17px; font-weight: 550; letter-spacing: -.025em; }
.craft-principles p { font-size: 13px; color: #9fb3c9; line-height: 1.6; margin-top: 11px; }

/* A tactile illustration with readable controls on every viewport. */
.connections-section { overflow: clip; }
.connections-layout { display: grid; grid-template-columns: .87fr 1.13fr; gap: 65px; align-items: center; }
.connections-copy .sx-lead { margin-top: 25px; }
.connection-choices { display: flex; flex-direction: column; gap: 10px; margin-top: 32px; }
.connection-choices button { display: flex; align-items: center; gap: 18px; padding: 20px; min-height: 87px; border: 1px solid #779eb13a; border-radius: 12px; background: #0c1825; text-align: left; transition: background .25s, border-color .25s; }
.connection-choices button > .icon:first-child { width: 25px; height: 25px; color: #a1d4fb; }
.connection-choices button > .icon:last-child { width: 17px; height: 17px; color: #88b9d9; margin-left: auto; }
.connection-choices strong { display: block; font-size: 18px; letter-spacing: -.025em; font-weight: 550; }
.connection-choices small { display: block; color: #a0b5cd; font-size: 12px; line-height: 1.5; margin-top: 5px; }
.connection-choices button[aria-pressed="true"] { border-color: #4eaef378; background: linear-gradient(110deg, #102f56, #0b1b2e); box-shadow: inset 3px 0 #7edcff, 0 3px 28px #0f76e512; }
.connections-visual { min-width: 0; }
.core-scene { position: relative; aspect-ratio: 1; }
.core-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.core-links { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: #619aca77; stroke-width: 1; }
.core-links path { opacity: .3; transition: opacity .35s; }
.core-links path.is-active { opacity: 1; stroke: #b2e7ff; stroke-dasharray: 6 7; animation: connection-travel 20s linear infinite; animation-play-state: paused; }
.motion-visible .core-links path.is-active { animation-play-state: running; }
@keyframes connection-travel { to { stroke-dashoffset: -180; } }
.core-center { position: absolute; top: 45%; left: 49%; transform: translate(-50%,-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; color: #c8e7fc; text-shadow: 0 2px 5px #000; }
.core-center .icon { width: 40px; height: 40px; }
.core-center span { font-size: 14px; font-weight: 500; }
.core-node { position: absolute; display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-radius: 12px; border: 1px solid #7ba4ca80; background: linear-gradient(120deg, #183b61e8, #0a1b2ef5); box-shadow: 0 8px 24px #0005, inset 0 1px #d4eeff30; font-size: 14px; color: #dbeeff; opacity: .45; transition: opacity .35s, transform .35s, box-shadow .35s; }
.core-node .icon { width: 23px; height: 23px; color: #a1d4fc; }
.core-node.is-active { opacity: 1; box-shadow: 0 0 28px #2589fb35, inset 0 1px #d4eeff66; transform: translateY(-4px); }
.core-crm { top: 15%; left: 0; }.core-erp { top: 15%; right: 0; }.core-shop { top: 45%; right: -5%; }.core-files { bottom: 16%; right: 1%; }.core-ai { bottom: 16%; left: 1%; }.core-mail { top: 45%; left: -5%; }
.connection-result { position: relative; display: flex; gap: 14px; align-items: center; min-height: 90px; margin-top: -4px; padding: 17px 20px; border-top: 1px solid var(--sx-line); border-bottom: 1px solid var(--sx-line); }
.connection-result > .icon { color: #69bcf5; width: 24px; height: 24px; }
.connection-result strong { font-size: 15px; font-weight: 550; color: #d2e8fc; }
.connection-result p { font-size: 12px; color: #94adc6; line-height: 1.6; margin-top: 5px; }
.delivery-layout {
  --delivery-progress: 0; position: relative; display: grid; grid-template-columns: .88fr 1.12fr;
  gap: clamp(60px, 7vw, 105px); padding-top: 72px; margin-top: 85px; border-top: 1px solid #8bb6d93a;
}
.delivery-layout::before { content: ""; position: absolute; z-index: -1; width: min(70vw, 880px); aspect-ratio: 1; left: -30%; bottom: -85%; border: 1px solid #85b6de16; border-radius: 50%; pointer-events: none; }
.delivery-copy { display: flex; flex-direction: column; align-items: flex-start; }
.delivery-layout h3 { font-size: clamp(35px, 4.15vw, 64px); font-weight: 530; letter-spacing: -.052em; line-height: 1.1; }
.delivery-copy > p { margin-top: 27px; color: #a6bdd6; font-size: clamp(17px, 1.5vw, 22px); line-height: 1.6; }
.delivery-route { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); width: min(100%, 420px); list-style: none; padding: 0; margin: 40px 0 36px; }
.delivery-route::before, .delivery-route::after { content: ""; position: absolute; top: 22px; left: 12.5%; width: 75%; height: 1px; background: #37526d; }
.delivery-route::after { background: #8bd4ff; transform-origin: left; transform: scaleX(var(--delivery-progress)); transition: transform .45s ease; }
.delivery-route li { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 13px; }
.delivery-route span { display: grid; place-items: center; width: 45px; height: 45px; border-radius: 50%; border: 1px solid #6485a6; outline: 6px solid var(--sx-bg); background: var(--sx-bg); color: #a5c0dc; font-size: 14px; transition: border-color .3s, box-shadow .3s, color .3s; }
.delivery-route small { color: #a8bfd7; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.delivery-layout:has(details:nth-child(2)[open]) { --delivery-progress: .3333; }
.delivery-layout:has(details:nth-child(3)[open]) { --delivery-progress: .6667; }
.delivery-layout:has(details:nth-child(4)[open]) { --delivery-progress: 1; }
.delivery-layout:has(details:nth-child(1)[open]) .delivery-route li:nth-child(1) span,
.delivery-layout:has(details:nth-child(2)[open]) .delivery-route li:nth-child(2) span,
.delivery-layout:has(details:nth-child(3)[open]) .delivery-route li:nth-child(3) span,
.delivery-layout:has(details:nth-child(4)[open]) .delivery-route li:nth-child(4) span { border-color: #92e3ff; box-shadow: 0 0 0 1px #92e3ff, 0 0 24px #268df533; color: #e2f6ff; }
.delivery-contact { margin-top: auto; border-bottom: 1px solid #75b9e759; font-size: 14px; }
.delivery-steps { position: relative; min-width: 0; padding-left: 23px; }
.delivery-steps::before { content: ""; position: absolute; top: 45px; bottom: 48px; left: 23px; width: 1px; background: linear-gradient(#7cd5faaa, #41628666); }
.delivery-steps details { position: relative; border: 1px solid #719bc42b; border-radius: 15px; background: #0713218c; transition: border-color .3s, background .3s, box-shadow .3s; }
.delivery-steps details + details { margin-top: 15px; }
.delivery-steps details[open] { border-color: #66c9ffb3; background: linear-gradient(125deg, #10243bea, #081524e6); box-shadow: inset 0 1px #d0edff26, 0 12px 40px #0002; }
.delivery-steps summary { position: relative; display: flex; align-items: center; gap: 18px; min-height: 98px; padding: 23px 26px 23px 46px; list-style: none; cursor: pointer; border-radius: 14px; }
.delivery-steps summary::-webkit-details-marker { display: none; }
.delivery-number { position: absolute; left: -24px; top: 25px; display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid #7095b8; border-radius: 50%; background: #061120; color: #c3d9ee; font-size: 15px; box-shadow: 0 0 0 5px var(--sx-bg); transition: border-color .3s, box-shadow .3s; }
.delivery-label { min-width: 0; }
.delivery-label strong { display: block; font-size: 25px; line-height: 1.25; font-weight: 550; letter-spacing: -.035em; }
.delivery-label small { display: block; color: #a5bed7; font-size: 15px; line-height: 1.45; margin-top: 5px; }
.delivery-toggle { flex: none; margin-left: auto; color: #a4cbe9; width: 30px; height: 30px; padding: 6px; border: 1px solid #648daf88; border-radius: 50%; }
.delivery-toggle-vertical { transition: opacity .2s; }
.delivery-steps details[open] .delivery-toggle-vertical { opacity: 0; }
.delivery-steps details[open] .delivery-number { border-color: #90dfff; color: #e7f7ff; box-shadow: 0 0 0 1px #82dfff, 0 0 0 5px var(--sx-bg), 0 0 25px #219af546; }
.delivery-steps details[open] .delivery-label small { color: #97d8ff; }
.delivery-detail { margin: 0 26px 26px 42px; padding-top: 21px; border-top: 1px solid #80b9dc33; }
.delivery-steps details[open] .delivery-detail { animation: sx-panel-in .3s ease-out; }
.delivery-detail > p { color: #aec2d9; font-size: 15px; line-height: 1.7; }
.delivery-output { display: flex; align-items: center; gap: 16px; margin-top: 21px; padding: 18px; border: 1px solid #729bbd38; border-radius: 10px; background: #06101e50; }
.delivery-output > .icon { width: 26px; height: 26px; color: #93d6ff; }
.delivery-output span { display: block; margin-bottom: 6px; font-size: 9px; letter-spacing: .13em; text-transform: uppercase; color: #9fbddb; }
.delivery-output strong { display: block; font-size: 14px; line-height: 1.5; font-weight: 450; color: #e7f1ff; }
@media (hover: hover) and (pointer: fine) {
  .delivery-steps details:not([open]):hover { background: #0e2033b3; border-color: #6ba3d36b; }
  .delivery-steps summary:hover .delivery-number { border-color: #a3ddff; box-shadow: 0 0 0 5px var(--sx-bg), 0 0 23px #208def33; }
  .delivery-contact:hover { color: white; border-color: #a2dfff; }
}

.project-section { isolation: isolate; overflow: clip; border-top: 1px solid #759ccf1a; background: radial-gradient(ellipse at 85% 35%, #0e2c4e4f, transparent 50%), #050c18; padding-bottom: 100px; }
.project-layout { display: grid; grid-template-columns: 1fr .92fr; align-items: center; gap: clamp(55px, 8vw, 130px); }
.project-copy { position: relative; min-width: 0; padding-block: 20px 0; }
.project-copy > h2, .project-copy > .sx-lead, .project-copy > .sx-index { position: relative; z-index: 1; }
.project-copy .sx-lead { margin-top: 29px; max-width: 460px; }
.closing-ribbon { position: relative; z-index: 0; width: 100%; height: 260px; max-width: none; left: -15%; margin-top: 20px; object-fit: contain; opacity: .85; mask-image: radial-gradient(ellipse at 50% 50%, #000 42%, transparent 73%); pointer-events: none; }
.brief-builder { position: relative; min-width: 0; padding: clamp(28px,3vw,45px); border-radius: 22px; border: 1px solid #4b86bf88; background: linear-gradient(145deg, #101f36, #07111e 75%); box-shadow: inset 0 1px #b4e0ff88, 0 20px 70px #0004; }
.brief-builder fieldset { position: relative; margin: 0; padding: 0; border: 0; min-width: 0; }
.brief-builder legend { margin: 0 0 28px; padding: 0; font-size: clamp(25px, 2.4vw, 35px); letter-spacing: -.04em; font-weight: 550; }
.direction-options { display: flex; flex-direction: column; gap: 10px; }
.direction-options label { position: relative; cursor: pointer; }
.direction-choice { display: flex; align-items: center; gap: 17px; min-height: 66px; padding: 17px 20px; border: 1px solid #91afd643; border-radius: 10px; background: #0d1829a3; transition: background .2s, border-color .2s; }
.direction-choice > .icon { color: #9fbfd9; width: 22px; height: 22px; }
.direction-choice strong { font-size: 16px; font-weight: 450; }
.direction-choice i { margin-left: auto; flex: none; width: 16px; height: 16px; border-radius: 50%; border: 1px solid #679aca; }
.direction-options input:checked + .direction-choice { border-color: #79c8ff; background: linear-gradient(120deg, #153b67, #10243f); box-shadow: 0 0 15px #238bff19; }
.direction-options input:checked + .direction-choice i { box-shadow: inset 0 0 0 4px #163453; background: #8ad7ff; border-color: #8ad7ff; }
.direction-summary { position: relative; display: flex; align-items: flex-start; gap: 16px; min-height: 115px; margin-top: 26px; padding-top: 23px; border-top: 1px solid var(--sx-line); }
.direction-summary .icon { color: #83d0ff; width: 24px; height: 24px; }
.direction-summary p { color: #adc3db; font-size: 14px; line-height: 1.6; }
.builder-submit { width: 100%; justify-content: space-between; margin-top: 17px; }
.builder-note { display: flex; align-items: center; gap: 8px; justify-content: center; color: #92abc4; font-size: 12px; line-height: 1.5; margin-top: 17px; }
.builder-note .icon { width: 15px; height: 15px; }

[data-reveal] { transition: opacity .65s ease, transform .65s cubic-bezier(.2,.7,.2,1); }
.reveal-pending { opacity: 0; transform: translateY(20px); }
.sx-section :focus-visible { outline: 2px solid #9bdaff; outline-offset: 5px; }
.sx-section button:focus:not(:focus-visible) { outline: none; }

@media (min-width: 1101px) {
  .solution-intro { display: flex; min-height: 455px; padding-block: 35px 60px; }
  .solution-intro-copy { width: 74%; }
  .solution-intro .desktop-break { display: none; }
  .ribbon-art { position: absolute; width: 64%; right: -8%; top: -55px; margin: 0; }
}
@media (max-width: 1100px) {
  .solution-intro { min-height: 450px; grid-template-columns: 1.2fr 1fr; }
  .solution-tabs button { padding: 15px 12px; gap: 11px; }
  .solution-tabs strong { font-size: 15px; }.solution-tabs small { font-size: 11px; }
  .solution-tabs .icon { width: 23px; height: 23px; }
  .lab-panel { padding: 24px; }
  .message-panel, .workflow-panel { padding: 19px; }
  .workflow-steps li { gap: 10px; }
  .workflow-steps li p { font-size: 12px; }.step-state { width: 38px; }
  .sample-message { padding: 17px; }
  .sender small { font-size: 11px; }
  .connections-layout { gap: 38px; }
  .core-node { padding: 11px 13px; gap: 7px; }
  .core-node .icon { width: 19px; height: 19px; }
  .core-center .icon { width: 27px; height: 27px; }
  .core-center span { font-size: 12px; }
  .craft-grid { grid-template-columns: 1.35fr 1fr; gap: 20px; }
  .architecture-copy { padding-inline: 26px; }
  .architecture-preview { min-height: 441px; }
  .phone-stage { height: 482px; }
  .architecture-copy h3 { margin-top: 65px; }
  .project-layout { gap: 46px; }
}
@media (max-width: 850px) {
  .sx-section { padding-block: 80px; }
  .solution-section { padding-top: 25px; }
  .solution-intro { grid-template-columns: 1.25fr 1fr; padding-block: 38px 45px; min-height: 405px; }
  .solution-intro h2 { font-size: 44px; }
  .ribbon-art { margin-inline: -80px -75px; }
  .solution-tabs button { flex-direction: column; align-items: flex-start; gap: 9px; min-height: 107px; }
  .flow-workspace { gap: 13px; }.message-panel, .workflow-panel { padding: 16px; }
  .panel-label { font-size: 14px; }.panel-label .quiet-tag { display: none; }
  .workflow-steps li { grid-template-columns: 30px 1fr; gap: 10px; min-height: 79px; padding-right: 0; }
  .step-dot { width: 30px; height: 30px; }.workflow-steps::before { left: 14px; }
  .step-state { position: absolute; right: 0; top: 8px; font-size: 10px; }.workflow-steps strong { padding-right: 30px; font-size: 13px; }
  .sender-avatar { width: 32px; height: 32px; flex: none; }.sender strong { font-size: 12px; }.sender small { font-size: 10px; }
  .sample-message > p { font-size: 15px; }.sample-message { padding: 14px; }
  .lab-caption { font-size: 11px; }
  .booking-workspace { gap: 24px; }
  .connections-layout { grid-template-columns: 1fr; gap: 25px; }
  .connections-copy { display: grid; grid-template-columns: 1.1fr 1fr; gap: 25px; align-items: center; }
  .connections-copy .sx-index { grid-column: 1 / -1; margin-bottom: 0; }
  .connections-copy .sx-lead { grid-column: 1; }
  .connection-choices { grid-column: 2; grid-row: 2 / span 2; margin-top: 0; }
  .connection-choices button { min-height: 88px; padding: 15px; }
  .connection-choices strong { font-size: 16px; }
  .connections-visual { width: min(570px, 100%); margin-inline: auto; }
  .core-node { padding: 13px 18px; font-size: 14px; }.core-node .icon { width: 22px; height: 22px; }.core-center span { font-size: 14px; }
  .craft-grid { grid-template-columns: 1fr; gap: 45px; }
  .architecture-preview { min-height: 480px; }
  .architecture-copy h3 { font-size: 58px; }
  .phone-stage { height: 500px; }
  .phone-ribbon { width: 100%; height: 150%; }
  .craft-principles { gap: 20px; }
  .craft-principles > div { padding-left: 0; }
  .craft-principles > div + div { padding-left: 20px; }
  .craft-principles .icon, .craft-principles > div + div .icon { position: static; margin-bottom: 16px; }
  .delivery-layout { grid-template-columns: .85fr 1.15fr; gap: 35px; }
  .delivery-layout h3 { font-size: 38px; }
  .delivery-route { margin-top: 30px; }.delivery-route small { font-size: 9px; }.delivery-route span { width: 36px; height: 36px; font-size: 12px; }.delivery-route::before, .delivery-route::after { top: 18px; }
  .delivery-steps summary { padding-inline: 35px 18px; }.delivery-label strong { font-size: 22px; }.delivery-label small { font-size: 13px; }
  .delivery-detail { margin-inline: 27px 18px; }.delivery-output { padding: 15px 12px; gap: 12px; }.delivery-output strong { font-size: 13px; }
  .project-layout { grid-template-columns: .95fr 1.05fr; gap: 30px; }
  .brief-builder { padding: 24px 20px; }
  .direction-choice { padding: 15px 13px; gap: 10px; }
  .direction-choice strong { font-size: 14px; }
  .direction-summary p { font-size: 13px; }.builder-note { font-size: 11px; }
}
@media (max-width: 600px) {
  .sx-wrap { padding-inline: 22px; }
  .sx-section { padding-block: 72px; }
  .sx-section h2 { font-size: clamp(34px, 9.2vw, 49px); font-weight: 530; line-height: 1.1; letter-spacing: -.05em; }
  .sx-index { font-size: 10px; margin-bottom: 21px; letter-spacing: .14em; }
  .sx-lead { font-size: 16px; line-height: 1.65; }
  .desktop-break { display: none; }
  .sx-section-heading { display: block; margin-bottom: 34px; }
  .sx-section-heading .sx-lead { margin-top: 22px; }
  .sx-section-heading .sx-lead br { display: none; }
  .solution-section { padding-top: 15px; }
  .solution-intro { display: flex; flex-direction: column; align-items: stretch; min-height: 0; padding-block: 45px 0; }
  .solution-intro-copy .sx-lead { margin-top: 22px; }
  .solution-intro-copy .sx-text-link { margin-top: 10px; font-size: 13px; }
  .ribbon-art { --ribbon-height: clamp(208px, 56vw, 310px); margin: -10px -22px 0; height: var(--ribbon-height); }
  .ribbon-sculpture { width: min(100%, calc(var(--ribbon-height) * 1.5)); }
  .solution-tabs { grid-template-columns: 1fr 1fr; gap: 8px; padding: 0; border: 0; background: none; margin-bottom: 17px; }
  .solution-tabs button { flex-direction: row; align-items: center; gap: 10px; min-height: 75px; padding: 13px 12px; background: #0b1829; border: 1px solid #42688e70; border-radius: 11px; }
  .solution-tabs .icon { width: 23px; height: 23px; }
  .solution-tabs strong { font-size: 14px; letter-spacing: -.02em; }
  .solution-tabs small { font-size: 11px; line-height: 1.4; max-width: 108px; margin-top: 4px; }
  .lab-shell { border-radius: 16px; }
  .lab-toolbar { height: 58px; padding-inline: 17px; gap: 8px; }
  .lab-brand { font-size: 13px; gap: 8px; }.lab-brand > .icon { width: 20px; height: 20px; }
  .lab-demo-label { font-size: 10px; gap: 5px; }.lab-demo-label span { max-width: 62px; line-height: 1.3; }
  .lab-panel { padding: 22px 15px 17px; }
  .demo-description { gap: 15px; margin-bottom: 22px; }
  .demo-description h3 { font-size: 22px; line-height: 1.2; }
  .demo-description p { font-size: 13px; line-height: 1.6; margin-top: 10px; }
  .demo-number { display: none; }
  .flow-workspace { grid-template-columns: 1fr; gap: 16px; }
  .message-panel, .workflow-panel { padding: 15px; }
  .panel-label { font-size: 14px; margin-bottom: 16px; gap: 8px; }
  .panel-label .icon { width: 18px; height: 18px; }
  .sample-message { padding: 16px; }
  .sender { gap: 10px; }
  .sender-avatar { width: 34px; height: 34px; }
  .sender strong { font-size: 13px; }.sender small { font-size: 11px; }.sender > .icon { display: none; }
  .sample-message > p { font-size: 15px; margin-top: 16px; min-height: 4.8em; }
  .demo-field { margin-top: 18px; font-size: 12px; }
  .message-panel select { font-size: 16px; padding-left: 10px; }
  .workflow-steps { gap: 5px; }.workflow-steps::before { top: 32px; bottom: 32px; }
  .workflow-steps li { min-height: 78px; padding: 10px 0; grid-template-columns: 30px 1fr; gap: 10px; }
  .workflow-steps strong { padding-right: 0; font-size: 14px; }
  .workflow-steps p { font-size: 12px; max-width: 180px; margin-top: 5px; }
  .step-state { display: none; }
  .workflow-steps li[data-state="done"] .step-dot { font-size: 0; }
  .workflow-steps li[data-state="done"] .step-dot::after { content: "✓"; font-size: 15px; }
  .lab-actionbar { flex-direction: column; align-items: stretch; gap: 15px; margin-top: 18px; padding-top: 16px; }
  .demo-feedback { max-width: none; min-height: 60px; font-size: 12px; line-height: 1.55; gap: 10px; }
  .demo-feedback .icon { width: 20px; height: 20px; }
  .lab-actionbar .sx-button { min-width: 0; width: 100%; min-height: 51px; padding-inline: 13px; font-size: 14px; gap: 10px; }
  .lab-caption { display: block; padding-inline: 4px; line-height: 1.55; font-size: 11px; }
  .lab-caption > span:last-child { display: block; margin: 7px 0 0 15px; font-size: 10px; }
  .booking-workspace { grid-template-columns: 1fr; gap: 22px; }
  .booking-days, .booking-times { gap: 8px; }.booking-picker label > span { min-height: 82px; }.booking-times label > span { min-height: 45px; font-size: 13px; }
  .booking-days strong { font-size: 28px; }.booking-days small { font-size: 12px; }
  .booking-ticket { padding: 21px 18px; }
  .ticket-icon { width: 40px; height: 40px; margin-bottom: 12px; }.ticket-icon .icon { width: 22px; height: 22px; }
  .booking-ticket h4 { font-size: 21px; margin-top: 15px; }.ticket-time { font-size: 29px; }
  .operations-toolbar { display: block; }.operations-toolbar > span { display: block; margin-bottom: 15px; }.order-filters { display: flex; }.order-filters button { flex: 1; padding-inline: 10px; font-size: 12px; min-height: 42px; }
  .order-row { grid-template-columns: 35px minmax(0, 1fr) auto; gap: 12px; padding: 17px 13px; }
  .order-mark { width: 33px; height: 33px; }.order-mark .icon { width: 19px; height: 19px; }
  .order-info h4 { font-size: 14px; line-height: 1.35; }.order-info p { font-size: 11px; }.order-info small { font-size: 10px; }
  .order-status { grid-column: 2; font-size: 11px; margin-top: 1px; }.order-next { grid-column: 3; grid-row: 1 / span 2; font-size: 12px; padding: 8px; flex-direction: column; min-height: 57px; gap: 3px; }
  .order-list { min-height: 365px; }
  .website-controls { gap: 6px; }.website-controls button { flex: 1; justify-content: center; gap: 6px; padding-inline: 9px; font-size: 12px; }.website-controls i { width: 10px; height: 10px; }
  .website-demo { min-height: 380px; }
  .website-demo > img { width: 100%; height: 54%; mask-image: linear-gradient(180deg, transparent, black 28%); object-position: 65% 50%; }
  .website-demo-content { padding: 25px 22px; width: 100%; }.website-demo h4 { font-size: 39px; margin-top: 26px; }.website-demo-content p { font-size: 12px; }
  .website-demo-content button { font-size: 11px; min-height: 42px; padding: 9px 14px; margin-top: 18px; }
  .site-detail-copy { bottom: 12px; right: 12px; width: calc(100% - 24px); padding: 16px; font-size: 13px; }
  .lab-footnote { font-size: 11px; }
  .craft-grid { gap: 36px; }
  .showcase-browser { border-radius: 14px; }.showcase-toolbar { height: 34px; padding-inline: 13px; font-size: 9px; }.showcase-toolbar > .icon { width: 12px; height: 12px; }
  .architecture-preview { min-height: 415px; background: #e1eef7; }
  .architecture-preview > img { top: auto; height: 58%; object-position: 60% 50%; mask-image: linear-gradient(180deg, transparent, black 32%); }
  .architecture-copy { padding: 26px 22px; }.architecture-copy .fictional-brand { font-size: 10px; }.architecture-copy h3 { font-size: 43px; margin-top: 29px; }.architecture-copy > p { font-size: 12px; margin-top: 17px; }
  .architecture-link { margin-top: 22px; font-size: 11px; padding-inline: 14px; }
  .architecture-corner { font-size: 7px; right: 16px; bottom: 18px; }
  .craft-caption { gap: 13px; margin-top: 20px; }.craft-caption > span { font-size: 11px; padding-right: 12px; }.craft-caption h3 { font-size: 20px; }.craft-caption p { font-size: 14px; margin-top: 9px; }
  .phone-stage { height: 465px; }.phone-ribbon { width: 150%; height: 100%; }.product-phone { transform: rotate(4deg); width: 231px; min-height: 414px; padding-inline: 16px; }
  .craft-principles { grid-template-columns: 1fr; gap: 0; margin-top: 38px; padding-top: 7px; }
  .craft-principles > div, .craft-principles > div + div { position: relative; padding: 23px 0 23px 43px; border-left: 0; border-bottom: 1px solid var(--sx-line); }
  .craft-principles .icon, .craft-principles > div + div .icon { position: absolute; top: 24px; left: 0; width: 23px; height: 23px; }
  .craft-principles h3 { font-size: 16px; }.craft-principles p { font-size: 13px; margin-top: 7px; }
  .connections-copy { display: block; }.connections-copy .sx-index { margin-bottom: 22px; }.connections-copy .sx-lead { margin-top: 22px; }
  .connection-choices { margin-top: 27px; gap: 9px; }.connection-choices button { padding: 16px; min-height: 81px; gap: 14px; }.connection-choices strong { font-size: 17px; }.connection-choices small { font-size: 12px; max-width: 224px; }.connection-choices button > .icon:first-child { width: 23px; height: 23px; }
  .core-scene { margin-top: 2px; width: 100%; }
  .core-node { padding: 10px 11px; gap: 6px; font-size: 12px; border-radius: 9px; }
  .core-node .icon { width: 17px; height: 17px; }
  .core-mail { left: -2%; }.core-shop { right: -2%; }
  .core-center { gap: 6px; }.core-center .icon { width: 25px; height: 25px; }.core-center span { font-size: 11px; }
  .connection-result { padding: 16px 4px; gap: 12px; min-height: 108px; }.connection-result strong { font-size: 14px; }.connection-result p { font-size: 12px; }.connection-result > .icon { width: 21px; height: 21px; }
  .sx-section::before { background-size: 20px 20px; opacity: .16; }
  .sx-section::after { opacity: .8; }
  .delivery-layout { display: block; margin-top: 62px; padding-top: 43px; }
  .delivery-layout::before { width: 500px; left: -80%; bottom: -180px; }
  .delivery-layout .sx-index { margin-bottom: 18px; }.delivery-layout h3 { font-size: 39px; }
  .delivery-copy > p { margin-top: 20px; font-size: 17px; }.delivery-copy > p br { display: none; }
  .delivery-route { max-width: 350px; margin-block: 29px 22px; }.delivery-route span { width: 38px; height: 38px; font-size: 12px; }.delivery-route small { font-size: 9px; }.delivery-route::before, .delivery-route::after { top: 19px; }
  .delivery-contact { margin-top: 0; font-size: 13px; }
  .delivery-steps { margin-top: 32px; padding-left: 20px; }.delivery-steps::before { left: 20px; }
  .delivery-steps details + details { margin-top: 13px; }.delivery-steps details { border-radius: 12px; }
  .delivery-steps summary { gap: 12px; min-height: 96px; padding: 20px 17px 20px 33px; }
  .delivery-number { width: 38px; height: 38px; left: -20px; top: 28px; font-size: 13px; }
  .delivery-label strong { font-size: 22px; }.delivery-label small { font-size: 13px; }
  .delivery-toggle { width: 27px; height: 27px; padding: 5px; }
  .delivery-detail { margin: 0 17px 20px 25px; padding-top: 17px; }.delivery-detail > p { font-size: 14px; }
  .delivery-output { margin-top: 18px; padding: 15px 12px; gap: 11px; }.delivery-output > .icon { width: 23px; height: 23px; }.delivery-output strong { font-size: 13px; }.delivery-output span { font-size: 8px; }
  .project-layout { display: block; }.project-copy { padding: 0 0 55px; }.project-copy .sx-lead { margin-top: 24px; max-width: 330px; }.closing-ribbon { display: none; }
  .brief-builder { padding: 26px 19px 24px; border-radius: 17px; }
  .brief-builder legend { font-size: 27px; margin-bottom: 24px; }.direction-choice { min-height: 61px; padding: 15px; gap: 13px; }.direction-choice strong { font-size: 15px; }.direction-choice > .icon { width: 21px; height: 21px; }.direction-summary { gap: 12px; min-height: 122px; margin-top: 24px; padding-top: 22px; }.direction-summary p { font-size: 14px; }.direction-summary .icon { width: 22px; height: 22px; }.builder-submit { margin-top: 12px; font-size: 15px; }.builder-note { align-items: flex-start; font-size: 11px; text-align: left; }.builder-note .icon { margin-top: 2px; }
}
@media (max-width: 360px) {
  .sx-wrap { padding-inline: 18px; }
  .sx-section h2 { font-size: 34px; }
  .ribbon-art { margin-inline: -18px; }
  .solution-tabs button { gap: 9px; padding-inline: 10px; }.solution-tabs strong { font-size: 12px; }.solution-tabs small { font-size: 10px; }.solution-tabs .icon { width: 19px; height: 19px; }
  .lab-panel { padding-inline: 12px; }.message-panel, .workflow-panel { padding-inline: 12px; }.sample-message { padding-inline: 12px; }.workflow-steps strong { font-size: 13px; }.workflow-steps p { font-size: 11px; }.sample-message > p { font-size: 14px; }.lab-brand { font-size: 12px; }
  .booking-times { grid-template-columns: repeat(2, 1fr); }
  .order-row { grid-template-columns: 1fr auto; }.order-mark { display: none; }.order-info { grid-column: 1; }.order-status { grid-column: 1; }.order-next { grid-column: 2; }
  .architecture-copy h3 { font-size: 39px; }
  .delivery-layout h3 { font-size: 35px; }.delivery-label small { font-size: 12px; }.delivery-steps summary { padding-right: 13px; gap: 9px; }.delivery-output { gap: 9px; }
  .direction-choice { padding-inline: 12px; gap: 10px; }.direction-choice strong { font-size: 14px; }
}
@media (scripting: none) {
  .lab-demo-label span { font-size: 0; }.lab-demo-label span::after { content: "Podgląd"; font-size: 12px; }
  [data-flow-run], [data-booking-confirm], [data-order-next], [data-orders-reset], .order-filters, .website-controls, [data-site-details], .lab-caption { display: none; }
  .core-node { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal-pending { opacity: 1; transform: none; }
  .ribbon-sculpture, .product-phone, .architecture-preview:hover > img { transform: none; }
  .ribbon-sheen { display: none; }
  .core-links path { animation: none; }
}