.home-aws { display: grid; grid-template-columns: minmax(0,1fr) minmax(520px,.9fr); gap: 7vw; min-height: 860px; padding: 120px 5vw; overflow: hidden; background: var(--surface-muted); color: var(--ink); border-top: 1px solid rgba(23,21,28,.12); }
.aws-content { align-self: center; }
.aws-kicker { display: flex; align-items: center; justify-content: space-between; max-width: 760px; }
.aws-kicker img { display: none; }
.aws-content h2 {max-width: 830px; margin: 34px 0 24px; letter-spacing: -.065em; font-family:var(--display);font-size:var(--type-h2);font-weight:600;line-height:.98;}
.aws-subtitle { max-width: 690px; margin: 0 0 42px; font: 500 clamp(18px,1.45vw,23px)/1.46 var(--display); letter-spacing: -.025em; }
.aws-copy { max-width: 740px; columns: 2; column-gap: 48px; color: #5d5961; font-size: 14px; line-height: 1.68; }
.aws-copy p { margin: 0 0 18px; break-inside: avoid; }
.aws-cta { margin-top: 38px; background: var(--violet); border-color: var(--violet); color: #fff; }
.aws-cta:hover { background: #2d185e; border-color: #2d185e; }
.aws-visual { align-self: center; }
.aws-canvas { position: relative; width: min(640px,45vw); aspect-ratio: 1.12; margin: 0 auto; border: 1px solid #cbc7c5; background: rgba(255,255,255,.68); box-shadow: 0 28px 65px rgba(42,31,52,.08); }
.aws-canvas::before { content: ''; position: absolute; inset: 14px; border: 1px solid rgba(35,47,62,.1); }
.aws-cloud-label { position: absolute; top: 28px; right: 30px; display: flex; align-items: center; gap: 12px; color: #616972; font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; }
.aws-cloud-label img { width: 38px; height: 24px; object-fit: contain; filter: grayscale(1); opacity: .66; mix-blend-mode: multiply; }
.aws-system,.aws-device,.aws-lxc-node { position: absolute; z-index: 3; display: flex; flex-direction: column; justify-content: center; }
.aws-system { right: 6%; width: 25%; height: 17%; padding: 16px; border: 1px solid #b8bec5; background: #e6e8e9; }
.aws-system small { color: #747b83; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.aws-system b { margin-top: 4px; font: 600 clamp(15px,1.3vw,19px) var(--display); }
.system-workflows { top: 14%; }.system-services { top: 42%; }.system-data { bottom: 12%; }
.aws-core-ring { position: absolute; z-index: 2; left: 47.5%; top: 49.5%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%,-50%); }
.aws-core-ring-outer { width: 33%; background: rgb(140,117,184); }
.aws-core-ring-inner { width: 26%; background: rgb(184,167,211); }
.aws-lxc-node { left: 38%; top: 40%; width: 19%; aspect-ratio: 1; align-items: center; border-radius: 50%; background: #d8cfee; color: #2e1859; box-shadow: 0 10px 28px rgba(72,45,124,.2); }
.aws-lxc-node::after { content: none; }
.aws-lxc-node small { width: 100%; font-size: 9px; letter-spacing: .09em; text-align: center; text-transform: uppercase; }.aws-lxc-node b { font: 600 clamp(24px,3vw,40px) var(--display); letter-spacing: -.05em; }
.aws-lxc-core-note { display: block; width: 100%; margin-top: 1px; font-size: 9px; line-height: 1.1; text-align: center; }
.aws-lxc-detail { position: absolute; top: calc(100% + 44px); right: auto; bottom: auto; left: 50%; width: 126px; color: #5f5865; font-size: 10px; font-weight: 600; line-height: 1.42; letter-spacing: .025em; text-align: center; transform: translateX(-50%); }
.aws-device { left: 5%; width: 23%; height: 14%; padding: 13px 15px 13px 35px; border: 1px solid #b8bec5; border-left: 2px solid #9e7acb; background: #e6e8e9; color: #424952; font-size: 12px; font-weight: 500; }
.aws-device i { position: absolute; left: 14px; width: 9px; height: 9px; border-radius: 50%; background: #7157b7; }
.device-one { top: 13%; }.device-two { top: 31%; }.device-three { top: 51%; }.device-four { top: 69%; }
.aws-lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.aws-lines path { fill: none; stroke: #9e7acb; stroke-width: 1.6; }.aws-lines .orange { stroke: #7157b7; }
.aws-signal { position: absolute; z-index: 4; width: 9px; height: 9px; border-radius: 50%; background: #7157b7; box-shadow: 0 0 0 4px rgba(113,87,183,.12); transform: translate(-50%,-50%); }
.signal-a { left: 91.5%; top: 17%; }.signal-b { left: 91.5%; top: 45%; }.signal-c { left: 91.5%; top: 74%; }
.aws-visual-caption { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 24px; color: #676e76; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.aws-visual-caption i { width: 40px; height: 1px; background: #7157b7; }
.aws-canvas--homepage-edited .aws-core-ring-outer { background: rgb(143,119,187); }
.aws-canvas--homepage-edited .aws-core-ring-inner { background: rgb(191,175,217); }
.aws-canvas--homepage-edited .aws-device { width: 23.125%; padding: 8px 12px 8px 35px; background: rgb(230,232,233); color: rgb(66,73,82); }
.aws-canvas--homepage-edited .device-one { top: 12.96%; height: 11.21%; }
.aws-canvas--homepage-edited .device-two { top: 31%; height: 11.03%; }
.aws-canvas--homepage-edited .device-three { top: 48.86%; height: 11.21%; }
.aws-canvas--homepage-edited .device-four { top: 67.46%; left: 5.21%; height: 10.51%; }
.aws-canvas--homepage-edited .aws-device-cap { position: absolute; z-index: 3; left: 5%; display: flex; align-items: center; justify-content: center; width: 23.125%; height: 4.9%; border: 1px solid #b8bec5; background: rgb(77,65,93); color: #fff; font-size: 12px; text-align: center; }
.aws-canvas--homepage-edited .device-cap-one { top: 23.96%; left: 5.06%; }
.aws-canvas--homepage-edited .device-cap-two { top: 41.82%; }
.aws-canvas--homepage-edited .device-cap-three { top: 59.54%; left: 4.94%; }
.aws-canvas--homepage-edited .device-cap-four { top: 77.35%; left: 5.21%; }
@media (max-width: 1080px) { .home-aws { grid-template-columns: 1fr; } .aws-canvas { width: min(640px,88vw); margin-top: 65px; } }
@media (max-width: 650px) { .home-aws { padding: 85px 7vw; } .aws-content h2 { font-family:var(--display);font-size:var(--type-h2);font-weight:600;line-height:.98;} .aws-copy { columns: 1; } .aws-canvas { width: 90vw; transform: scale(.96); } .aws-system { padding: 9px; }.aws-system small { display: none; }.aws-device { width: 28%; padding-left: 25px; }.aws-device i { left: 9px; }.aws-cloud-label { top: 22px; right: 20px; } }