:root { color-scheme: dark; font-family: Arial, Helvetica, sans-serif; background: #1c1d1c; color: #fff9da; --wrapper-width: 1600px; }
* { box-sizing: border-box; }
html { min-width: 320px; min-height: 100%; }
body { position: relative; margin: 0; min-height: 100vh; isolation: isolate; }
/* Het lint ligt over de pagina; de begrenzing voorkomt horizontaal scrollen. */
.construction-overlay { position: absolute; inset: 0; z-index: 20; overflow: hidden; pointer-events: none; }
.construction-tapes { --tape-top: clamp(400px, 68vh, 780px); }
.construction-ribbon { position: absolute; top: calc(var(--tape-top) - 170px); left: -10%; width: 120%; padding-block: 15px; overflow: hidden; color: #11120d; background: linear-gradient(180deg, #ffdf3c, #ffc900 55%, #ffd52b); box-shadow: 0 5px 12px rgb(0 0 0 / 36%), inset 0 1px 0 #fff28c, inset 0 -1px 0 #b58a00; }
.construction-ribbon::before, .construction-ribbon::after { content: ""; position: absolute; left: 0; right: 0; height: 10px; background: repeating-linear-gradient(-48deg, #14150f 0 17px, transparent 17px 34px); }
.construction-ribbon::before { top: 0; }
.construction-ribbon::after { bottom: 0; }
.construction-ribbon-back { transform: rotate(-8deg); margin-top: 18px; }
.construction-ribbon-front { transform: rotate(6deg); margin-top: -18px; }
.construction-track { display: flex; justify-content: center; align-items: center; gap: clamp(24px, 4vw, 70px); width: max-content; min-width: 100%; position: relative; left: 50%; transform: translateX(-50%); }
.construction-track span { flex: 0 0 auto; font-family: 'Arial Narrow', Arial, sans-serif; font-size: clamp(1rem, 1.7vw, 1.5rem); font-weight: 900; line-height: 1.2; letter-spacing: .015em; text-transform: uppercase; white-space: nowrap; }
@media (max-width: 700px) { .construction-tapes { --tape-top: 430px; } .construction-ribbon { padding-block: 13px; } .construction-ribbon::before, .construction-ribbon::after { height: 8px; } }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(13 17 18 / 38%), rgb(17 20 20 / 18%) 55%, rgb(13 17 18 / 34%)), url('../images/servers-background.jpg') center / cover no-repeat; }
body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, rgb(13 17 18 / 38%), rgb(17 20 20 / 18%) 55%, rgb(13 17 18 / 34%)), url('../images/servers-background-blue.jpg') center / cover no-repeat; opacity: 0; animation: server-background-fade 20s ease-in-out infinite; }
@keyframes server-background-fade { 0%, 40%, 100% { opacity: 0; } 50%, 90% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { body::after { animation: none; } }
.site-shell { width: 100%; min-height: 100svh; margin: 0 auto; display: flex; flex-direction: column; }
.wrapper { width: min(var(--wrapper-width), calc(100% - 96px)); margin-inline: auto; }
.site-header { height: 66px; flex-shrink: 0; background: linear-gradient(120deg, #2d2b27, #5a5038 48%, #f3dc82); border-bottom: 1px solid #f7e4a477; box-shadow: 0 16px 55px #0003; }
.header-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.header-nav { margin-left: auto; padding-inline: clamp(16px, 2vw, 32px); }
.login-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; color: #fff0b5; background: rgb(45 43 39 / 85%); font-size: 15px; font-weight: 500; text-decoration: none; border-radius: 4px; }
.login-link[href]:hover { color: #fff9da; background: #2d2b27; }
.login-link:focus-visible { outline: 2px solid #f3dc82; outline-offset: 2px; }
.customer-login { width: min(460px, calc(100% - 32px)); max-height: calc(100svh - 40px); overflow-y: auto; padding: clamp(24px, 5vw, 40px); border: 1px solid #d6c79565; border-radius: 16px; color: #fff9da; background: linear-gradient(145deg, #36362d, #20231e); box-shadow: 0 30px 100px #0009; }
.customer-login::backdrop { background: rgb(10 13 11 / 55%); backdrop-filter: blur(4px); }
.customer-login h2 { margin: 8px 32px 12px 0; font-size: 30px; font-weight: 550; letter-spacing: -.035em; }
.customer-login p { color: #c9c7b9; line-height: 1.6; font-size: 15px; }
.customer-login .login-eyebrow { color: #ecd18b; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.customer-login-form { display: grid; gap: 10px; margin-top: 24px; }
.customer-login-form label { margin-top: 7px; font-size: 14px; }
.customer-login-form input { min-width: 0; width: 100%; min-height: 46px; padding: 12px 14px; border: 1px solid #ffffff35; border-radius: 7px; color: #fff; background: #171a16; font: inherit; }
.customer-login-form button { margin-top: 14px; min-height: 46px; padding: 12px; border: 1px solid #eed799; border-radius: 7px; color: #25251c; background: linear-gradient(110deg, #cbae69, #f2dfa6); font: 600 16px 'Segoe UI', Arial, sans-serif; cursor: pointer; }
.customer-login-close { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 6px; background: transparent; color: #e8d6aa; font-size: 28px; text-decoration: none; cursor: pointer; }
.customer-login[open]:not(:modal) { position: fixed; top: 50%; left: 50%; margin: 0; transform: translate(-50%, -50%); z-index: 100; }
.customer-login :focus-visible { outline: 2px solid #ecd18b; outline-offset: 3px; }
.customer-login-error { padding: 12px 14px; border: 1px solid #d9a36270; border-radius: 7px; color: #ffe0bb; background: #68451935; line-height: 1.5; }
.site-main { flex: 1; min-height: 560px; display: grid; place-items: start; align-content: start; margin-block: 10px; padding: 44px clamp(16px, 2vw, 32px) 104px; background: rgb(255 255 255 / 12%); border: 1px solid rgb(255 255 255 / 24%); border-radius: 8px; box-shadow: 0 12px 40px rgb(0 0 0 / 10%); }
.logo-filters { position: absolute; pointer-events: none; }
.logo-panel { margin: 0; width: min(360px, 100%); justify-self: end; transform: translate(calc(clamp(16px, 2vw, 32px) - 12px), -32px); }
.logo-panel img { display: block; width: 100%; height: auto; filter: url('#xmail-bright-logo'); }
.logo-wordmark { display: block; aspect-ratio: 898 / 251; overflow: hidden; }
.logo-wordmark img { clip-path: polygon(0 0, 100% 0, 100% 68%, 79% 68%, 79% 75%, 68% 75%, 68% 68%, 0 68%); }
.logo-subtitle { display: block; padding-right: 9%; margin-top: -2px; color: #fff9da; font-size: clamp(24px, 3vw, 36px); line-height: 1.15; font-weight: 400; font-style: italic; text-align: right; }
.site-main { grid-template-rows: auto 1fr; }
.ai-promo { width: min(1120px, 100%); min-width: 0; justify-self: center; align-self: center; padding-block: clamp(12px, 3vw, 40px) 8px; text-align: center; transform: translateY(-140px); }
/* Op smallere schermen staat het logo boven het embleem: behoud tussenruimte. */
@media (max-width: 1100px) { .ai-promo { transform: translateY(-24px); } }
.ai-emblem { position: relative; width: clamp(252px, 35vw, 420px); max-width: 100%; margin: 0 auto clamp(24px, 3vw, 38px); isolation: isolate; }
.ai-emblem::before { content: ""; position: absolute; z-index: -1; inset: -12%; border-radius: 50%; background: radial-gradient(ellipse, rgb(243 220 130 / 14%), transparent 68%); }
.ai-emblem img { display: block; width: 100%; height: auto; }
.ai-promo h2 { margin: 0; color: #fff9e8; font-size: clamp(40px, 6.2vw, 88px); font-weight: 700; line-height: 1.1; letter-spacing: -.045em; text-wrap: balance; text-shadow: 0 2px 18px rgb(0 0 0 / 50%); }
.ai-promo p { max-width: 1120px; margin: clamp(22px, 3vw, 36px) auto 0; color: #f0eadb; font-size: clamp(34px, 4.7vw, 68px); line-height: 1.25; letter-spacing: -.025em; text-wrap: balance; text-shadow: 0 2px 8px #000; }
.ai-promo strong { color: #ffe5a0; font-weight: 700; }
.promo-word { display: inline-block; max-width: 100%; overflow-wrap: anywhere; transform-origin: center bottom; animation: word-impact 420ms cubic-bezier(.2, .8, .25, 1) both; animation-delay: calc(300ms + var(--word) * 230ms); }
.promo-word[data-word="0"] { --word: 0; }
.promo-word[data-word="1"] { --word: 1; }
.promo-word[data-word="2"] { --word: 2; }
.promo-word[data-word="3"] { --word: 3; }
.promo-word[data-word="4"] { --word: 4; }
.promo-word[data-word="5"] { --word: 5; }
.promo-word[data-word="6"] { --word: 6; }
.promo-word[data-word="7"] { --word: 7; }
.promo-word[data-word="8"] { --word: 8; }
.promo-word[data-word="9"] { --word: 9; }
.promo-finale { display: block; margin-top: .12em; white-space: normal; }
/* Laat 'knives' landen (420ms), wacht 1 seconde en vervolg het woordritme. */
.ai-promo p .promo-word { animation-delay: calc(300ms + var(--word) * 230ms + 730ms); }
/* 'and are getting ready': dubbel tempo, met behoud van de pauze na 'knives'. */
.ai-promo p > .promo-word:nth-child(-n+4) { animation-duration: 210ms; animation-delay: calc(2410ms + (var(--word) - 4) * 115ms); }
.ai-promo p .promo-finale { animation-delay: calc(300ms + var(--word) * 230ms + 1730ms); }
@keyframes word-impact {
  0% { opacity: 0; transform: translateY(-.45em) scale(.65); }
  65% { opacity: 1; transform: translateY(.045em) scale(1); }
  82% { opacity: 1; transform: translateY(-.025em) scale(.98); }
  100% { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .promo-word { animation: none; } }
.blade-glint { position: absolute; left: 74.5%; top: 20%; width: 34px; height: 34px; pointer-events: none; opacity: 0; transform: translate(-50%, -50%) scale(.2); background: radial-gradient(circle, #fff 0 6%, #fff5ca 10%, transparent 52%); filter: drop-shadow(0 0 5px #fff1b9); animation: blade-glimmer 8s ease-in-out infinite; }
.blade-glint::before, .blade-glint::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent, #fff 48% 52%, transparent); clip-path: polygon(50% 0, 55% 44%, 100% 50%, 55% 56%, 50% 100%, 45% 56%, 0 50%, 45% 44%); }
.blade-glint::after { transform: rotate(45deg) scale(.6); }
.sickle-glint { left: 15%; top: 30%; width: 28px; height: 28px; animation-duration: 11s; animation-delay: 3.5s; }
@keyframes blade-glimmer { 0%, 72%, 88%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(.2) rotate(-15deg); } 78% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0); } 84% { opacity: .4; transform: translate(-50%, -50%) scale(.5) rotate(12deg); } }
@media (prefers-reduced-motion: reduce) { .blade-glint { animation: none; } }
.site-footer { position: relative; min-height: 290px; background: linear-gradient(120deg, #2d2b27, #5a5038 48%, #f3dc82); border-top: 1px solid #f7e4a477; box-shadow: 0 -16px 55px #0003; }
.footer-inner { display: flex; flex-direction: column; min-height: inherit; }
.footer-space { flex: 1; min-height: 200px; }
.footer-address { display: flex; flex-direction: column; align-items: flex-start; padding-block: 32px; color: #fff9da; font-size: 16px; font-style: normal; line-height: 1.65; overflow-wrap: anywhere; }
.footer-address strong { margin-bottom: 8px; font-size: 18px; font-weight: 600; }
.footer-address a { display: inline-flex; align-items: center; min-height: 44px; margin-top: 4px; color: #fff0b5; text-decoration: underline; text-decoration-color: rgb(255 240 181 / 40%); text-underline-offset: 5px; }
.footer-address a:hover { color: #fff; text-decoration-color: currentColor; }
.footer-address a:focus-visible { outline: 2px solid #f3dc82; outline-offset: 4px; border-radius: 2px; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 74px; border-top: 1px solid rgb(255 249 218 / 28%); }
.footer-bottom > span { font-size: 22px; font-weight: 600; letter-spacing: -.04em; }
.domain { font-weight: 400; opacity: .7; }
.footer-bottom small { color: #29271f; font-size: 13px; }
@media (min-width: 1600px) { .site-main { min-height: 660px; } .site-footer { min-height: 320px; } }
@media (max-width: 700px) {
 .wrapper { width: calc(100% - 40px); } .site-header { height: 56px; }
 .site-main { min-height: 450px; padding-block: 30px 70px; } .logo-panel { width: min(280px, 85%); transform: translate(calc(clamp(16px, 2vw, 32px) - 12px), -18px); }
 .site-header, .site-footer { background: linear-gradient(120deg, #2d2b27, #5a5038 60%, #baa363); }
 .site-footer { min-height: 240px; }
 .footer-space { min-height: 160px; } .footer-bottom small { color: #fff9da; }
}