.dn-patterns { position:relative; isolation:isolate; padding:80px 24px 88px; background:#0d1117; scroll-margin-top:140px; }
/* The shared shader clears section backgrounds; keep this reading area calm. */
.dn-patterns::before { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(ellipse at 10% 0,rgba(23,135,153,.1),transparent 55%),#0d1117; }
.dn-patterns__inner { max-width:1200px; margin:0 auto; }
.dn-patterns__intro { max-width:720px; margin-bottom:36px; }
.dn-patterns__eyebrow { display:block; margin-bottom:14px; color:#66d0dc; font-size:12px; font-weight:600; letter-spacing:.15em; text-transform:uppercase; }
.dn-patterns h2 { margin:0 0 18px; color:#fff; font-size:clamp(30px,4vw,48px); font-weight:600; line-height:1.15; letter-spacing:-.035em; }
.dn-patterns__intro p { color:#b3c2cf; max-width:650px; font-size:16px; line-height:1.8; }
.dn-pattern-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.dn-pattern-card { display:flex; flex-direction:column; min-width:0; overflow:hidden; border:1px solid #2c3946; border-radius:22px; background:#141e28; }
.dn-pattern-card__heading { padding:23px 24px 19px; }
.dn-pattern-card h3 { font-size:21px; line-height:1.3; font-weight:600; color:#fff; letter-spacing:-.02em; margin:0 0 7px; }
.dn-pattern-card__muscle { color:#91aab9; font-size:12px; line-height:1.5; }
.dn-pattern-image { display:block; margin:0 12px; border-radius:12px; overflow:hidden; background:#fff; color:#1d4657; text-decoration:none; }
.dn-pattern-image img { display:block; width:100%; aspect-ratio:3/4; height:auto; object-fit:contain; background:#fff; }
.dn-pattern-review-note { margin:0 24px; padding:24px 0; color:#b5c3cf; font-size:14px; line-height:1.6; }
.dn-pattern-image__label { display:flex; align-items:center; justify-content:center; gap:8px; min-height:44px; border-top:1px solid #e7eef0; font-size:12px; font-weight:600; background:#f6f9fa; }
.dn-pattern-card__body { display:flex; flex-direction:column; flex:1; padding:22px 24px 24px; }
.dn-pattern-card__body p { color:#b5c3cf; font-size:14px; line-height:1.8; margin:0 0 17px; }
.dn-pattern-card__link { display:flex; align-items:center; gap:9px; margin-top:auto; min-height:44px; color:#83d4e0; font-size:13px; font-weight:600; text-decoration:none; }
.dn-pattern-card__link span { transition:transform .15s; }
.dn-pattern-card__link:hover span { transform:translateX(3px); }
.dn-patterns a:focus-visible,.dn-pattern-dialog a:focus-visible,.dn-pattern-dialog button:focus-visible { outline:3px solid #49bace; outline-offset:4px; }
.dn-patterns__note { margin:28px 0 0; color:#a8b8c6; font-size:13px; line-height:1.7; }
.dn-patterns__actions { display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-top:24px; }
.dn-patterns__button { display:inline-flex; align-items:center; justify-content:center; gap:14px; min-height:48px; padding:12px 22px; border-radius:999px; border:1px solid #3f6c7a; color:#def9ff; text-decoration:none; font-size:13px; font-weight:600; transition:background .15s; }
.dn-patterns__button--primary { background:#155467; border-color:#23738a; }
.dn-patterns__button:hover { background:#1b6172; }
.dn-pattern-bridge { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:36px; margin-top:48px; padding:36px 0 0; border-top:1px solid #2c3946; }
.dn-pattern-bridge h3 { font-size:24px; color:#fff; line-height:1.35; letter-spacing:-.02em; }
.dn-pattern-bridge p { font-size:15px; color:#b3c2cf; line-height:1.85; }
.dn-pattern-bridge a { display:inline-flex; min-height:44px; align-items:center; color:#83d4e0; font-size:13px; font-weight:600; }
.dn-pattern-sources { margin-top:25px; color:#93a6b7; font-size:12px; line-height:1.7; }
.dn-pattern-sources summary { display:flex; align-items:center; min-height:44px; cursor:pointer; }
.dn-pattern-sources summary::before { content:'+'; font-size:20px; margin-right:10px; }
.dn-pattern-sources[open] summary::before { content:'−'; }
.dn-pattern-sources p { max-width:800px; margin:0 0 12px; }
.dn-pattern-sources ul { list-style:disc; padding-left:20px; }
.dn-pattern-dialog { position:fixed; inset:0; margin:auto; width:min(980px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); padding:0; border:1px solid #344a5c; border-radius:18px; background:#111d28; color:#edf6fa; overflow:auto; overscroll-behavior:contain; font-family:'Plus Jakarta Sans',sans-serif; }
.dn-pattern-dialog::backdrop { background:rgba(3,9,16,.88); }
.dn-pattern-dialog__bar { position:sticky; top:0; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:10px 18px; background:#111d28; border-bottom:1px solid #344a5c; }
.dn-pattern-dialog__bar h2 { font-size:18px; line-height:1.4; font-weight:600; }
.dn-pattern-dialog__close { display:flex; align-items:center; justify-content:center; gap:8px; min-width:44px; min-height:44px; padding:8px 12px; border:1px solid #4d667b; border-radius:10px; background:#1e3040; color:#fff; font:inherit; font-size:13px; }
.dn-pattern-dialog__image { display:block; width:100%; height:min(68dvh,900px); object-fit:contain; background:#fff; }
.dn-pattern-dialog__caption { padding:18px 22px 0; font-size:14px; line-height:1.7; color:#c3d1dc; }
.dn-pattern-dialog__link { display:inline-flex; margin:8px 22px 20px; align-items:center; min-height:44px; font-size:14px; color:#83d4e0; }
html.dn-pattern-view-open { overflow:hidden; }
@media (max-width:900px) { .dn-pattern-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:600px) { .dn-patterns { padding:48px 20px 56px; } .dn-pattern-grid { grid-template-columns:minmax(0,1fr); gap:22px; } .dn-patterns__intro { margin-bottom:25px; } .dn-pattern-card__heading { padding:20px; } .dn-pattern-card__body { padding:20px; } .dn-pattern-bridge { grid-template-columns:1fr; gap:14px; margin-top:36px; } .dn-patterns__actions { align-items:stretch; flex-direction:column; } .dn-pattern-dialog { width:calc(100vw - 16px); max-height:calc(100dvh - 16px); } .dn-pattern-dialog__image { height:auto; max-height:64dvh; } }
@media (prefers-reduced-motion:reduce) { .dn-patterns * { transition:none!important; } }