/* deltasix.nl/gebouwd/<klant>/ (10-10-2026): de pagina achter het Delta Six-zegel.
   Eerst de intro "Hé, <klant> heeft een mooie website, hè?", dan bam, de boekpagina. */
body.gb-intro-open{overflow:hidden}

.gb-intro{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:24px;background:radial-gradient(120% 120% at 50% 0%,#2a1340 0%,#140c1c 48%,#09070c 100%);color:#f7f1fb;overflow:auto;animation:gb-intro-in .5s ease both}
.gb-intro[hidden]{display:none}
.gb-intro::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:conic-gradient(from 45deg,#2d1544 0deg 90deg,#1b1026 90deg 180deg,#170c22 180deg 270deg,#24123a 270deg 360deg);background-size:60px 60px;opacity:.35;-webkit-mask:radial-gradient(90% 80% at 50% 50%,transparent 0%,transparent 20%,#000 85%);mask:radial-gradient(90% 80% at 50% 50%,transparent 0%,transparent 20%,#000 85%)}
.gb-intro-binnen{position:relative;width:min(100%,1060px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:48px;align-items:center}
.gb-intro .eyebrow{justify-content:flex-start;margin-bottom:18px}
.gb-intro h1{margin:0;font-family:var(--heading);font-size:clamp(34px,4.6vw,62px);line-height:1.04;letter-spacing:-.045em;text-wrap:balance}
.gb-intro h1 b{font-weight:inherit;background:linear-gradient(110deg,#ecdcf8 6%,#d7a9f7 55%,#a57fc0 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.gb-vraag{margin:20px 0 26px;font-size:clamp(20px,2.2vw,26px);color:#cbc0d4;line-height:1.4}
.gb-knop{display:inline-flex;align-items:center;gap:12px;min-height:64px;padding:0 30px;border-radius:999px;border:1px solid #bf41ff;background:linear-gradient(108deg,#9700e9,#8500cd 70%,#a600ff);color:#fff;font:700 18px var(--body);text-decoration:none;cursor:pointer;box-shadow:0 18px 50px #8800da66,0 0 0 6px #a600ff1f;transition:transform .2s,box-shadow .2s}
.gb-knop:hover{transform:translateY(-2px);box-shadow:0 22px 60px #8800da88,0 0 0 8px #a600ff26}
.gb-knop:active{transform:scale(.97)}
.gb-later{display:inline-block;margin:18px 0 0 6px;background:none;border:0;padding:0;color:#aa96b9;font:500 15px var(--body);cursor:pointer;text-decoration:underline;text-underline-offset:4px}
.gb-later:hover{color:#f7f1fb}

/* De site van de klant in een venster */
.gb-venster{position:relative;border-radius:18px;background:#15101c;border:1px solid #4a3558;box-shadow:0 40px 100px #000c,0 0 0 1px #ffffff0a inset;overflow:hidden;transform:rotate(-1.2deg);animation:gb-venster-in .8s cubic-bezier(.2,1,.3,1) .15s both}
.gb-venster-balk{display:flex;align-items:center;gap:8px;padding:10px 14px;background:#1d1527;border-bottom:1px solid #2d2039}
.gb-venster-balk i{width:10px;height:10px;border-radius:50%;background:#3b2a47}
.gb-venster-balk i:nth-child(1){background:#ff5f57}.gb-venster-balk i:nth-child(2){background:#febc2e}.gb-venster-balk i:nth-child(3){background:#28c840}
.gb-venster-balk span{margin-left:8px;flex:1;padding:5px 12px;border-radius:999px;background:#0c0911;color:#aa96b9;font-size:12px;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gb-venster img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top}
.gb-venster[hidden]{display:none}
.gb-venster-leeg{display:grid;place-items:center;aspect-ratio:16/10;color:#8f7d9d;font-size:15px;padding:20px;text-align:center}

/* Bam */
.gb-intro.is-bam{animation:gb-bam .62s cubic-bezier(.6,0,.9,.4) both;pointer-events:none}
.gb-flits{position:fixed;inset:0;z-index:81;background:#A600FF;opacity:0;pointer-events:none}
.gb-intro.is-bam ~ .gb-flits{animation:gb-flits .7s ease-out both}
@keyframes gb-intro-in{from{opacity:0}to{opacity:1}}
@keyframes gb-venster-in{from{opacity:0;transform:rotate(-1.2deg) translateY(30px) scale(.96)}to{opacity:1;transform:rotate(-1.2deg)}}
@keyframes gb-bam{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.12)}}
@keyframes gb-flits{0%{opacity:0}18%{opacity:.75}100%{opacity:0}}

/* Op de boekpagina: het zegel-vlak boven de funnel en de bevestiging dat de site al klaar staat */
.gb-klaar{display:inline-flex;align-items:center;gap:10px;margin:0 0 18px;padding:8px 14px 8px 10px;border-radius:999px;border:1px solid #654374;background:#1a1222;color:#ecdcf8;font-size:14px;font-weight:600}
.gb-klaar i{width:8px;height:8px;border-radius:50%;background:#2ee57a;box-shadow:0 0 0 4px #2ee57a2b}

@media(max-width:860px){
  .gb-intro{align-items:flex-start;padding:28px 18px 40px}
  .gb-intro-binnen{grid-template-columns:1fr;gap:26px}
  .gb-intro h1{font-size:clamp(30px,8.4vw,42px)}
  .gb-vraag{font-size:19px;margin:14px 0 20px}
  .gb-knop{min-height:58px;padding:0 24px;font-size:16px;width:100%;justify-content:center}
  .gb-venster{transform:none;order:-1}
  .gb-venster img{aspect-ratio:16/11}
}
@media(prefers-reduced-motion:reduce){.gb-intro,.gb-venster,.gb-intro.is-bam,.gb-flits{animation:none}.gb-intro.is-bam{opacity:0}}