/* Transparent architecture: original glass foundations and four unrotated capability panes. */
body.website-variant-4 { background:radial-gradient(ellipse at 70% 46%,rgb(218 232 243 / 72%),transparent 54%),linear-gradient(145deg,#fbfaf6,#f1f2ee 55%,#eef3f5); }
.website-variant-4 .website-shell { max-width:1500px; padding-inline:clamp(20px,5vw,76px); }
.website-variant-4 .website-nav { min-height:64px; }
.website-variant-4 main.website-main { display:flex; flex-direction:column; align-items:stretch; justify-content:center; max-width:1360px; gap:16px; padding:12px 0; }
.website-variant-4 .website-intro { display:grid; width:100%; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:0 32px; padding:0; }
.website-variant-4 .website-eyebrow { grid-column:1; grid-row:1; margin:0 0 12px; font:10px/1.5 var(--font-mono); letter-spacing:.12em; }
.website-variant-4 .website-eyebrow>span { width:24px; height:1px; background:#6c8495; }
.website-variant-4 .website-intro h1 { grid-column:1; grid-row:2; position:relative; width:fit-content; font-size:clamp(80px,10.5vw,156px); font-weight:500; line-height:.94; letter-spacing:-.075em; white-space:nowrap; color:#21323c; }
.website-variant-4 .website-intro h1>span { display:inline; margin-top:0; font-size:inherit; font-weight:inherit; line-height:inherit; letter-spacing:inherit; color:#6a7f8e; background:linear-gradient(155deg,#223946 5%,#6a7f8e 38%,#506c81 62%,#6e8798); background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.website-variant-4 .website-intro h1>small { position:absolute; top:7px; right:-28px; font:11px/1.4 var(--font-mono); letter-spacing:0; color:#728595; }
.website-variant-4 .website-intro__body { grid-column:2; grid-row:1 / span 2; align-self:end; padding-bottom:8px; }
.website-variant-4 .website-description { margin:0; font-size:21px; line-height:1.5; font-weight:500; letter-spacing:.02em; }
.website-variant-4 .website-actions { margin-top:20px; justify-content:flex-start; }
.website-variant-4 .website-start { min-width:148px; }
.website-variant-4 .website-demo { width:100%; max-width:none; }
.website-variant-4 .website-demo__head { margin:0 0 4px; padding:0; font:10px/1.5 var(--font-mono); letter-spacing:.04em; }
.website-variant-4 .website-demo__badge { font:9px/1.5 var(--font-mono); letter-spacing:.06em; }
.website-variant-4 .website-canvas { height:auto; min-height:340px; max-width:none; margin:0; padding:24px 0 28px; }
.website-variant-4 .website-canvas__environment { overflow:visible; border-radius:0; }
.website-architecture-light { position:absolute; inset:0 10% 3% 26%; background:radial-gradient(ellipse at 60% 60%,rgb(208 229 247 / 60%),transparent 62%); }
.website-architecture { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.website-variant-4 .website-flow { position:relative; inset:auto; display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.1fr) minmax(0,1.5fr) minmax(0,1fr); gap:clamp(24px,3.5vw,64px); align-items:start; min-height:288px; margin:0 40px; }
.website-variant-4 .website-node { position:relative; isolation:isolate; z-index:2; inset:auto; width:auto; margin:0; min-height:168px; padding:20px; border:1px solid #fff; border-radius:18px; background:linear-gradient(120deg,rgb(255 255 255 / 96%),rgb(255 255 255 / 72%) 32%,rgb(229 239 245 / 76%) 78%,rgb(255 255 255 / 92%)); box-shadow:inset 2px 2px 3px #fff,inset -4px -3px 7px rgb(152 173 188 / 14%),10px 15px 0 rgb(129 159 179 / 6%),0 35px 38px -24px rgb(36 65 85 / 36%); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.website-variant-4 .website-node:not(.website-node--ai)::after,.website-variant-4 .website-node__ai-copy::after { content:''; position:absolute; z-index:-1; inset:7px -8px -8px 7px; border:1px solid rgb(255 255 255 / 90%); border-radius:inherit; background:linear-gradient(120deg,rgb(220 232 240 / 92%),rgb(246 250 252 / 80%) 64%,rgb(201 218 230 / 76%)); pointer-events:none; }
.website-variant-4 .website-node--input { margin-top:24px; }
.website-variant-4 .website-node--source { margin-top:96px; }
.website-variant-4 .website-node--output { margin-top:64px; }
.website-variant-4 .website-node--ai { min-height:248px; padding:0; border:0; background:none; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; }
.website-variant-4 .website-node,.website-variant-4 .website-node__ai-copy { transform:none; translate:none; rotate:none; scale:none; }
.website-variant-4 .website-node__ai-copy { display:flex; flex-direction:column; isolation:isolate; width:100%; min-height:248px; padding:24px; border:1px solid #fff; border-radius:18px; background:linear-gradient(145deg,rgb(253 255 255 / 98%),rgb(216 233 246 / 84%) 66%,rgb(242 250 255 / 94%)); box-shadow:inset 2px 2px 4px #fff,inset -4px -3px 9px rgb(107 149 181 / 14%),10px 18px 0 rgb(111 154 187 / 7%),0 45px 44px -28px rgb(54 91 122 / 39%); }
.website-variant-4 .website-node__ai-copy::before { display:none; }
.website-architecture-ai { position:absolute; top:62px; left:22px; z-index:1; color:#377abb; opacity:.12; font-size:112px; font-weight:500; line-height:1; letter-spacing:-.08em; pointer-events:none; }
.website-variant-4 .website-node__head { margin-bottom:18px; font:10px/1.5 var(--font-mono); gap:8px; letter-spacing:.02em; }
.website-variant-4 .website-node__ai-copy .website-node__head { margin-bottom:auto; }
.website-variant-4 .website-node__icon { width:28px; height:28px; border:1px solid rgb(143 172 193 / 16%); border-radius:8px; background:rgb(248 252 255 / 70%); }
.website-variant-4 .website-node strong { font-size:19px; font-weight:600; line-height:1.4; overflow-wrap:anywhere; }
.website-variant-4 .website-node__ai-copy strong { font-size:22px; color:var(--color-primary); }
.website-variant-4 .website-node small { margin-top:6px; font-size:12px; line-height:1.6; overflow-wrap:anywhere; }
.website-architecture-mark { position:absolute; bottom:5px; right:0; color:#6a8293; font:9px/1.5 var(--font-mono); letter-spacing:.1em; }
.website-variant-4 .website-wires { z-index:1; }
.website-variant-4 .website-explore { display:grid; grid-template-columns:minmax(0,auto) minmax(0,1fr) auto; align-items:center; gap:28px; margin-top:0; padding:14px 0; border:0; border-top:1px solid rgb(89 118 139 / 22%); border-radius:0; background:none; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; }
.website-variant-4 .website-explore__top { flex-direction:column; align-items:flex-start; gap:8px; }
.website-variant-4 .website-explore__top>span { font:10px/1.5 var(--font-mono); letter-spacing:.04em; }
.website-variant-4 .website-scenarios>.btn { padding-inline:14px; font-size:12px; }
.website-variant-4 .website-scenario-copy { min-width:0; margin-top:0; padding-right:0; overflow-wrap:anywhere; }
.website-variant-4 .website-scenario-copy h2 { font-size:14px; }
.website-variant-4 .website-scenario-copy p { font-size:12px; }
.website-variant-4 .website-scenario-copy p.website-result { margin-top:6px; font-size:12px; }
.website-variant-4 .website-scenario-start { position:static; inset:auto; translate:none; align-self:center; }
.website-variant-4 .website-footer { min-height:44px; }
@media(min-width:1001px) and (max-height:780px) {
  .website-variant-4 main.website-main { gap:10px; padding:8px 0; }
  .website-variant-4 .website-eyebrow { margin-bottom:8px; }
  .website-variant-4 .website-intro h1 { font-size:96px; }
  .website-variant-4 .website-description { font-size:19px; }
  .website-variant-4 .website-actions { margin-top:14px; }
  .website-variant-4 .website-canvas { min-height:260px; padding:18px 0; }
  .website-variant-4 .website-flow { min-height:224px; margin-inline:24px; }
  .website-variant-4 .website-node { min-height:148px; padding:16px; }
  .website-variant-4 .website-node--input { margin-top:12px; }
  .website-variant-4 .website-node--source { margin-top:64px; }
  .website-variant-4 .website-node--output { margin-top:40px; }
  .website-variant-4 .website-node--ai { min-height:212px; padding:0; }
  .website-variant-4 .website-node__ai-copy { min-height:212px; padding:20px; }
  .website-architecture-ai { top:56px; font-size:88px; }
  .website-variant-4 .website-node__ai-copy strong { font-size:19px; }
  .website-variant-4 .website-explore { padding-block:10px; }
}
@media(max-width:1000px) {
  .website-variant-4 .website-shell { padding-inline:28px; }
  .website-variant-4 .website-nav { min-height:56px; }
  .website-variant-4 main.website-main { gap:12px; padding:8px 0; }
  .website-variant-4 .website-intro { gap:0 24px; }
  .website-variant-4 .website-eyebrow { grid-column:1; margin-bottom:8px; font-size:9px; }
  .website-variant-4 .website-intro h1 { grid-column:1; font-size:clamp(54px,8.5vw,88px); }
  .website-variant-4 .website-intro__body { grid-column:2; padding-bottom:0; }
  .website-variant-4 .website-description { font-size:18px; }
  .website-variant-4 .website-actions { margin-top:12px; }
  .website-variant-4 .website-canvas { min-height:0; padding:18px 0; }
  .website-variant-4 .website-flow { min-height:0; margin-inline:20px; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:stretch; gap:28px 40px; }
  .website-variant-4 .website-node { min-height:116px; padding:14px; margin-top:0; }
  .website-variant-4 .website-node:nth-child(3) { grid-column:2; grid-row:2; }
  .website-variant-4 .website-node:nth-child(4) { grid-column:1; grid-row:2; }
  .website-variant-4 .website-node--ai { display:flex; align-items:stretch; min-height:132px; padding:0; }
  .website-variant-4 .website-node__ai-copy { min-height:132px; padding:14px; }
  .website-variant-4 .website-node__head { margin-bottom:10px; }
  .website-variant-4 .website-node__icon { width:24px; height:24px; }
  .website-variant-4 .website-node strong,.website-variant-4 .website-node__ai-copy strong { font-size:18px; }
  .website-architecture-ai { top:42px; left:14px; font-size:62px; }
  .website-variant-4 .website-explore { gap:16px; padding-block:10px; }
  .website-variant-4 .website-footer { min-height:44px; }
}
@media(max-width:680px) {
  .website-variant-4 .website-shell { padding-inline:20px; }
  .website-variant-4 main.website-main { gap:24px; padding:20px 0; }
  .website-variant-4 .website-intro { grid-template-columns:minmax(0,1fr); gap:12px; }
  .website-variant-4 .website-eyebrow { grid-row:1; margin-bottom:0; }
  .website-variant-4 .website-intro h1 { grid-row:2; font-size:clamp(46px,11.7vw,80px); }
  .website-variant-4 .website-intro__body { grid-column:1; grid-row:3; }
  .website-variant-4 .website-intro h1>small { top:3px; right:-23px; font-size:9px; }
  .website-variant-4 .website-intro h1>span { display:inline; }
  .website-variant-4 .website-actions { justify-content:flex-start; margin-top:12px; }
  .website-variant-4 .website-demo__head { font-size:9px; gap:10px; }
  .website-variant-4 .website-demo__badge { font-size:8px; }
  .website-variant-4 .website-canvas { padding:22px 0; }
  .website-variant-4 .website-flow { margin-inline:0; gap:28px; }
  .website-variant-4 .website-node { min-height:132px; }
  .website-variant-4 .website-node--ai,.website-variant-4 .website-node__ai-copy { min-height:148px; }
  .website-variant-4 .website-canvas__environment { opacity:.55; }
  .website-variant-4 .website-explore { grid-template-columns:minmax(0,1fr) auto; gap:12px 16px; padding-block:16px; }
  .website-variant-4 .website-explore__top { grid-column:1 / -1; flex-direction:row; align-items:center; }
  .website-variant-4 .website-scenario-start { align-self:end; }
}
@media(prefers-reduced-transparency:reduce) {
  body.website-variant-4 { background:#f4f5f2; }
  .website-variant-4 .website-node,.website-variant-4 .website-node__ai-copy { background:#f7fafc; backdrop-filter:none; -webkit-backdrop-filter:none; }
  .website-variant-4 .website-node--ai { background:none; }
  .website-variant-4 .website-canvas__environment { opacity:.25; }
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .website-variant-4 .website-node,.website-variant-4 .website-node__ai-copy { background:#f7fafc; }
  .website-variant-4 .website-node--ai { background:none; }
}
@media(forced-colors:active) {
  body.website-variant-4,.website-variant-4 .website-node,.website-variant-4 .website-node__ai-copy { background:Canvas; color:CanvasText; box-shadow:none; border-color:CanvasText; }
  .website-variant-4 .website-node--ai { background:none; }
  .website-variant-4 .website-node[data-website-fused=true],.website-variant-4 .website-node__ai-copy[data-website-fused=true] { border-color:CanvasText; }
  .website-variant-4 .website-intro h1,.website-variant-4 .website-intro h1>span,.website-variant-4 .website-node__ai-copy strong { color:CanvasText; background:none; -webkit-text-fill-color:CanvasText; }
  .website-variant-4 .website-canvas__environment,.website-architecture-ai,.website-architecture-mark,.website-variant-4 .website-node::after,.website-variant-4 .website-node__ai-copy::after { display:none; }
  .website-variant-4 .website-explore { border-color:CanvasText; }
}
