/* ==========================================================================
   Pathway IT — technology.css  (Depth: Technology)
   ========================================================================== */

/* architecture principles */
.principles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem; margin-top: clamp(2.5rem, 5vw, 3.4rem); }
.principle { display: grid; grid-template-columns: 56px 1fr; gap: 1.2rem; padding: 1.6rem; border-radius: var(--r-xl); background: var(--paper); border: 1px solid var(--line); transition: all var(--t) var(--ease); }
.principle:hover { border-color: var(--indigo-400); box-shadow: var(--sh-md); }
.principle .n { font-family: var(--font-mono); font-size: 1.4rem; font-weight: 700; color: var(--indigo); }
.principle h4 { margin-bottom: .4rem; }
.principle p { font-size: .92rem; color: var(--slate-600); }
@media (max-width: 700px) { .principles { grid-template-columns: 1fr; } }

/* layered stack */
.layers { display: grid; gap: 1rem; margin-top: clamp(2.5rem, 5vw, 3.4rem); }
.layer { display: grid; grid-template-columns: 220px 1fr; gap: 1.5rem; padding: 1.6rem clamp(1.2rem, 2.5vw, 2rem); border-radius: var(--r-xl); background: var(--paper); border: 1px solid var(--line); }
.layer .lname { display: flex; align-items: center; gap: .7rem; align-self: start; }
.layer .lname .ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: var(--indigo-50); color: var(--indigo); }
.layer .lname .ico svg { width: 20px; height: 20px; }
.layer .lname b { font-size: 1.05rem; }
.layer p { color: var(--slate-600); font-size: .92rem; margin-bottom: .8rem; }
@media (max-width: 700px) { .layer { grid-template-columns: 1fr; } }

/* security badges */
.badges { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: clamp(2.5rem, 5vw, 3.4rem); }
.badge-c { text-align: center; padding: 1.6rem 1rem; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--paper); }
.badge-c .ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--indigo-50); color: var(--indigo); margin: 0 auto .9rem; }
.badge-c .ico svg { width: 26px; height: 26px; }
.badge-c b { display: block; } .badge-c span { font-size: .82rem; color: var(--slate-500); }
@media (max-width: 820px) { .badges { grid-template-columns: repeat(2, 1fr); } }

/* code snippet cards */
.snippet { border-radius: var(--r-lg); overflow: hidden; border: 1px solid rgba(124,126,245,.2); background: #0d1428; }
.snippet .sh { display: flex; gap: .4rem; padding: .8rem 1rem; background: #0a1024; border-bottom: 1px solid rgba(124,126,245,.14); }
.snippet .sh .dot { width: 10px; height: 10px; border-radius: 50%; }
.snippet pre { margin: 0; padding: 1.2rem; overflow-x: auto; font-family: var(--font-mono); font-size: .82rem; line-height: 1.7; color: #c7d0ee; }
.snippet .k { color: var(--indigo-400); } .snippet .s { color: var(--sky); } .snippet .c { color: #5f6b98; }