/* Overzicht beveiliging en privacy (security-and-privacy.html). Bouwt op site.css en security.css. */

.tr-sec { padding: clamp(70px, 9vw, 120px) 0 0; }
.tr-sec > h2 { text-align: center; font-size: clamp(30px, 3.6vw, 44px); }
.tr-intro { margin: 14px auto 0; text-align: center; max-width: 640px; color: var(--muted); font-size: 18px; line-height: 1.55; }

.tr-two { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 44px; }
.tr-col { display: flex; flex-direction: column; padding: 32px 32px 32px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg); }
.tr-k { margin: 0 0 6px; font-size: 14px; font-weight: 600; color: var(--muted); }
.tr-col h3 { margin: 0; font-size: clamp(22px, 2.2vw, 26px); letter-spacing: -.02em; }
.tr-sub { margin: 8px 0 0; font-size: 17px; color: var(--muted); }
.tr-list { margin: 24px 0 0; padding: 0; list-style: none; flex: 1; }
.tr-list li { position: relative; padding: 7px 0 7px 28px; font-size: 16px; line-height: 1.5; }
.tr-list li::before { content: ""; position: absolute; left: 2px; top: 13px; width: 12px; height: 7px; border-left: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(-45deg); }
.tr-col .m-more { margin-top: 22px; }
.tr-ill { display: grid; place-items: center; margin-top: 30px; aspect-ratio: 16 / 9; border-radius: 12px; }
.tr-ill.you { background: radial-gradient(90% 80% at 15% 10%, #e3f1ff 0%, transparent 60%), linear-gradient(135deg, #cfe6ff, #b9dcff 50%, #c2ece6); }
.tr-ill.biz { background: radial-gradient(90% 80% at 85% 10%, #efe6ff 0%, transparent 60%), linear-gradient(135deg, #dcd6ff, #c9dcff 55%, #d6eefc); }
.tr-tile { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 20px; background: #fff; box-shadow: 0 14px 34px -14px rgba(20, 50, 120, .35); }
.tr-tile svg { width: 40px; height: 40px; fill: none; stroke: #1d1d1f; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.tr-four { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 48px; }
.tr-card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 34px 22px 32px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg); }
.tr-seal { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; margin-bottom: 22px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6), 0 10px 26px -14px rgba(20, 50, 120, .45); }
.tr-seal svg { width: 40px; height: 40px; fill: none; stroke: #1d1d1f; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tr-seal .dots { fill: #1d1d1f; stroke: none; }
.tr-seal.code { background: linear-gradient(135deg, #d9ecff, #b9dcff); }
.tr-seal.seal { background: linear-gradient(135deg, #d8f5e8, #b7e9d4); }
.tr-seal.eu { background: linear-gradient(135deg, #e3e0ff, #c9d3ff); }
.tr-seal.wait { background: var(--soft); box-shadow: none; }
.tr-seal.wait svg { stroke: var(--muted); }
.tr-card h3 { margin: 0; font-size: 19px; }
.tr-card p { margin: 10px 0 0; color: var(--muted); font-size: 15.5px; line-height: 1.55; }

.tr-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 40px; }
.tr-n { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--soft); font-size: 14px; font-weight: 600; }
.tr-steps h3 { margin: 18px 0 0; font-size: 19px; }
.tr-steps p { margin: 8px 0 0; color: var(--muted); font-size: 16px; line-height: 1.55; }

.tr-res { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 40px; margin: 30px 0 0; padding: 0; list-style: none; }
.tr-res li { border-top: 1px solid var(--line); }
.tr-res a { display: flex; justify-content: space-between; padding: 18px 0; color: var(--ink); font-size: 17px; font-weight: 500; }
.tr-res a::after { content: "→"; color: var(--muted); transition: transform .3s var(--ease); }
.tr-res a:hover { text-decoration: none; }
.tr-res a:hover::after { transform: translateX(4px); }

@media (max-width: 960px) { .tr-four { grid-template-columns: repeat(2, 1fr); } .tr-res { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) { .tr-two, .tr-four, .tr-steps, .tr-res { grid-template-columns: 1fr; } .tr-steps { gap: 30px; } }
.tr-sec:first-child { padding-top: 10px; }
.tr-sec > .tr-two:first-child { margin-top: 0; }