
.app-architecture-visual{min-height:570px;border:1px solid var(--line);border-radius:28px;padding:18px;background:#fff;box-shadow:var(--shadow);position:relative;overflow:hidden}
.app-visual-head{display:flex;justify-content:space-between;align-items:center;padding:3px 3px 15px;color:#7d8995;font-size:10px;text-transform:uppercase;letter-spacing:.11em;font-weight:900}
.app-board{min-height:520px;border:1px solid #e0e7ea;border-radius:19px;background:linear-gradient(rgba(13,23,39,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(13,23,39,.025) 1px,transparent 1px),#f7fafb;background-size:34px 34px,34px 34px,auto;padding:22px;display:grid;grid-template-rows:auto 1fr;gap:14px}
.app-role-row{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.app-role{padding:11px;border:1px solid #e0e7ea;border-radius:10px;background:#fff}.app-role small{display:block;color:#85929e;font-size:8px;text-transform:uppercase;font-weight:900;letter-spacing:.08em}.app-role b{display:block;margin-top:4px;font-size:11px}
.app-layer-stack{display:grid;grid-template-columns:1fr 44px 1fr 44px 1fr;gap:9px;align-items:center}.app-layer{min-height:255px;padding:17px;border:1px solid #dfe7ea;border-radius:15px;background:#fff}.app-layer.accent{border-color:#bbe7e3;background:#f4fbfa}.app-layer.dark{background:#0d1727;color:#fff;border-color:#0d1727}
.app-layer>span{color:var(--brand-dark);font-size:8px;text-transform:uppercase;font-weight:900;letter-spacing:.1em}.app-layer.dark>span{color:#77e4dd}.app-layer h3{margin:44px 0 12px;font-size:15px}.app-layer ul{list-style:none;padding:0;margin:0}.app-layer li{padding:8px 0;border-top:1px solid var(--line);font-size:9px;color:#71808d}.app-layer.dark li{border-color:rgba(255,255,255,.08);color:#9fb0ba}.app-arrow{text-align:center;color:var(--brand-dark);font-weight:900;font-size:18px}
.app-problem-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.app-problem{min-height:240px;padding:24px;border:1px solid var(--line);border-radius:18px;background:#fff}.app-problem span{color:var(--brand-dark);font-size:10px;font-weight:900;letter-spacing:.11em}.app-problem h3{margin:38px 0 8px;font-size:17px;letter-spacing:-.025em}.app-problem p{margin:0;color:var(--muted);font-size:12px;line-height:1.62}
.app-system{position:relative;z-index:2;display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.15);border-radius:20px;overflow:hidden}.app-system article{min-height:345px;padding:26px 19px;background:rgba(7,43,56,.3)}.app-system span{color:#8bece5;font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.11em}.app-system h3{margin:62px 0 8px;font-size:17px}.app-system p{margin:0;color:rgba(255,255,255,.7);font-size:12px;line-height:1.62}
.app-types{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}.app-type{min-height:290px;padding:27px;border:1px solid var(--line);border-radius:18px;background:#fff}.app-type.big{grid-column:span 6}.app-type.small{grid-column:span 4}.app-type.dark{background:#0d1727;color:#fff;border-color:#0d1727}
.app-type span{color:var(--brand-dark);font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.11em}.app-type.dark span{color:#7be7e0}.app-type h3{margin:50px 0 8px;font-size:20px;letter-spacing:-.03em}.app-type p{margin:0;color:var(--muted);font-size:13px;line-height:1.65}.app-type.dark p{color:#a8b8c2}
.app-build-vs-buy{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:start}.app-build-copy{position:sticky;top:118px}.app-build-copy h2{margin:14px 0 18px;font-size:clamp(40px,4.7vw,62px);line-height:1;letter-spacing:-.055em}.app-build-copy p{color:var(--muted);line-height:1.7}
.app-decision-list{border-top:1px solid var(--line)}.app-decision{display:grid;grid-template-columns:70px 1fr;gap:16px;padding:27px 0;border-bottom:1px solid var(--line)}.app-decision>span{color:var(--brand-dark);font-size:10px;font-weight:900}.app-decision h3{margin:0 0 7px;font-size:20px;letter-spacing:-.025em}.app-decision p{margin:0;color:var(--muted);font-size:13px;line-height:1.65}
.app-quality{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.app-quality-card{min-height:225px;padding:23px;border:1px solid var(--line);border-radius:17px;background:#fff}.app-quality-card i{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand-dark);font-style:normal;font-size:10px;font-weight:900}.app-quality-card h3{margin:35px 0 7px;font-size:15px}.app-quality-card p{margin:0;color:var(--muted);font-size:11px;line-height:1.6}
.app-process{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:var(--line)}.app-process article{min-height:245px;padding:24px 18px;background:#fff}.app-process span{color:var(--brand-dark);font-size:9px;font-weight:900;letter-spacing:.1em}.app-process h3{margin:45px 0 8px;font-size:15px}.app-process p{margin:0;color:var(--muted);font-size:11px;line-height:1.55}
@media(max-width:1040px){.app-layer-stack{grid-template-columns:1fr}.app-arrow{transform:rotate(90deg)}.app-problem-grid{grid-template-columns:1fr 1fr}.app-system{grid-template-columns:1fr 1fr}.app-system article:last-child{grid-column:1/-1}.app-type.big,.app-type.small{grid-column:span 6}.app-build-vs-buy{grid-template-columns:1fr}.app-build-copy{position:static}.app-quality{grid-template-columns:1fr 1fr}.app-process{grid-template-columns:repeat(3,1fr)}}
@media(max-width:680px){.app-role-row,.app-problem-grid,.app-system,.app-quality,.app-process{grid-template-columns:1fr}.app-system article:last-child{grid-column:auto}.app-types{grid-template-columns:1fr}.app-type.big,.app-type.small{grid-column:auto}}
