/* Websites: paginaspecifiek. */
/* ---------- Websites: paginaspecifiek (voorstel: css/websites.css) ---------- */

.vis--site { width: min(460px, 100%); }
.vis--site .vis__cap { margin-top: 52px; }
.vis--site .chip-float--2 { top: -4%; right: -8%; }
.build { padding: 0; }
.build__page { display: grid; gap: 12px; padding: 16px; }
.build__page > * { opacity: 0; transform: translateY(8px); animation: build 9s ease infinite; }
.build__page > *:nth-child(2) { animation-delay: .4s; } .build__page > *:nth-child(3) { animation-delay: .8s; } .build__page > *:nth-child(4) { animation-delay: 1.2s; }
@keyframes build { 0% { opacity: 0; transform: translateY(8px); } 8%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.b-nav { display: flex; justify-content: space-between; align-items: center; }
.b-nav i { width: 70px; height: 12px; border-radius: 6px; background: rgba(255,255,255,0.3); }
.b-nav em { width: 64px; height: 22px; border-radius: var(--r-pill); background: var(--signal); }
.b-hero { display: grid; gap: 8px; padding: 18px; border-radius: 14px; background: radial-gradient(90% 90% at 20% 20%, #1D6B50, #0F2E28); }
.b-hero .sk { background: rgba(255,255,255,0.3); }
.b-hero em { width: 110px; height: 28px; margin-top: 6px; border-radius: var(--r-pill); background: var(--signal); }
.b-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.b-cards i { height: 64px; border-radius: 10px; background: #152034; }
.b-foot { height: 10px; border-radius: 5px; background: rgba(255,255,255,0.06); }
.mini-phone { position: absolute; z-index: 2; right: -28px; bottom: -36px; width: 150px; border-radius: 24px; padding: 7px; background: #1A2333; box-shadow: 0 24px 50px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.08); }
.mini-phone__screen { display: grid; gap: 7px; padding: 12px 10px; border-radius: 18px; background: #0B141A; min-height: 210px; align-content: start; }
.mini-phone__screen small { font-size: 10.5px; font-weight: 700; color: #fff; }
.field { height: 22px; border-radius: 6px; background: #1F2C33; overflow: hidden; }
.field::after { content: ""; display: block; height: 100%; width: 0; background: rgba(61,245,161,0.25); animation: fill 9s ease infinite; }
.field:nth-of-type(2)::after { animation-delay: .5s; }
@keyframes fill { 0%, 20% { width: 0; } 35%, 90% { width: 100%; } 100% { width: 0; } }
.wa-pop { margin-top: 6px; padding: 8px 9px; border-radius: 10px 10px 10px 3px; background: #005C4B; font-size: 10.5px; line-height: 1.35; color: #E9EDEF; opacity: 0; transform: scale(.9); transform-origin: left bottom; animation: pop 9s ease infinite; }
@keyframes pop { 0%, 42% { opacity: 0; transform: scale(.9); } 48%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@media (max-width: 600px) { .mini-phone { right: -6px; bottom: -28px; width: 120px; } .mini-phone__screen { min-height: 170px; } .b-cards i { height: 44px; } }
@media (prefers-reduced-motion: reduce) { .build__page > *, .field::after, .wa-pop { animation: none; opacity: 1; transform: none; } .field::after { width: 100%; } }

.compare { grid-template-columns: 1fr 1fr; }
.compare .tile { display: grid; gap: 14px; align-content: start; }
.compare h3 { font-size: 28px; }
.compare__price { font-family: var(--f-display); font-size: 26px; font-weight: 600; letter-spacing: -0.02em; }
.compare__price small { font-family: var(--f-body); font-size: 14px; font-weight: 500; color: var(--muted); }
.compare .tile--ink .compare__price small { color: var(--on-ink-muted); }
.compare .tile--ink p { color: var(--on-ink-muted); }
@media (max-width: 860px) { .compare { grid-template-columns: 1fr; } }