.toekomst-ai .page{height:auto;min-height:100svh}
.toekomst-ai main{display:flex;flex-direction:column;max-height:none;margin:28px 0 44px;gap:24px;padding:0}
.toekomst-ai .intro{padding:18px 0 24px}
.ai-feature{position:relative;isolation:isolate;display:flex;align-items:center;min-height:300px;overflow:hidden;border-radius:16px;color:#fff5f8;background:radial-gradient(ellipse at 78% 45%,#8b225280,transparent 48%),linear-gradient(115deg,#21131e,#391529 62%,#20121c);border:1px solid #a75a7c70;box-shadow:0 20px 45px #43182d15}
.ai-feature-copy{position:relative;z-index:2;padding:42px 48px;flex:1}
.ai-feature-label{display:flex;align-items:center;gap:9px;font-size:8px;letter-spacing:2px;color:#e6abc6}
.ai-feature-label>span{height:6px;width:6px;border-radius:50%;background:#f5accd;box-shadow:0 0 16px #f5accd}
.ai-feature h2{font-size:clamp(45px,5.5vw,80px);font-weight:500;letter-spacing:-1.8px;margin:24px 0 14px;line-height:1}
.ai-feature h2>span{color:#e796ba}
.ai-feature p{font-size:14px;color:#e0c7d4;margin:0;line-height:1.7}
.ai-feature-invite{display:inline-flex;align-items:center;gap:32px;margin-top:28px;font-size:11px;color:#fff}
.ai-feature-invite>span{display:grid;place-items:center;width:32px;height:32px;border:1px solid #e6abc65c;border-radius:50%;font-size:20px;transition:background .2s,transform .2s}
.ai-feature:hover .ai-feature-invite>span{background:#8b2252;transform:translate(3px,-3px)}
.ai-feature-art{position:absolute;width:48%;height:100%;right:0;top:0;display:grid;place-items:center;pointer-events:none}
.ai-core{width:175px;height:175px;border-radius:50%;background:radial-gradient(circle at 32% 26%,#fff4f8,#f6c0d9 8%,#ac4a78 30%,#45162f 65%,#1d0c18 85%);box-shadow:inset -15px -12px 35px #150610,inset 3px 2px 10px #fff9,0 0 70px #c45c9060;transform:rotate(-18deg)}
.ai-orbit{position:absolute;width:320px;height:230px;border:1px solid #e9a6c244;border-radius:50%;transform:rotate(-30deg)}
.orbit-two{width:360px;height:170px;transform:rotate(38deg);border-color:#e9a6c227}
.ai-art-label{position:absolute;bottom:27px;font-size:6px;letter-spacing:2px;color:#c995ae}
.toekomst-ai .choices{height:auto;max-height:none;width:100%}
.toekomst-ai .choice{height:300px}
.toekomst-ai .meet-softora{height:auto;min-height:150px;margin:12px 0 0}
@media(max-width:760px){.toekomst-ai main{margin:10px 0 30px;gap:18px}.toekomst-ai .intro{padding:20px 0}.ai-feature{min-height:400px;align-items:flex-end}.ai-feature-copy{padding:26px;flex:none;width:100%}.ai-feature h2{font-size:43px;letter-spacing:-1px;margin:17px 0 12px}.ai-feature-label{font-size:6px;letter-spacing:1.2px}.ai-feature p{font-size:12px}.ai-feature-art{width:100%;height:190px;top:0;opacity:.85}.ai-core{width:100px;height:100px}.ai-orbit{width:210px;height:140px}.orbit-two{width:235px;height:105px}.ai-art-label{display:none}.ai-feature-invite{margin-top:17px}.toekomst-ai .choice{height:285px}.toekomst-ai .choice:last-child{height:200px}.toekomst-ai .meet-softora{min-height:300px}}
@media(prefers-reduced-motion:reduce){.ai-feature-invite>span{transition:none}}

.ai-feature-invite{padding:9px 15px;border:1px solid #e6abc64d;border-radius:30px;color:#f3c4da;background:#ffffff08;font-size:9px;letter-spacing:1.8px}

/* Approved AI appliance artwork. */
.ai-feature{min-height:340px;background:#200d18;border-color:#b7718b55}
.ai-feature-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-2}
.ai-feature:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#1b0b1640,transparent 65%);z-index:-1}
.ai-feature-copy{padding:48px;max-width:65%}
@media(max-width:760px){.ai-feature{min-height:460px;align-items:flex-end}.ai-feature-image{object-position:79% top}.ai-feature:after{background:linear-gradient(0deg,#200d18 0%,#200d18ed 28%,#200d1800 75%)}.ai-feature-copy{padding:26px;max-width:100%}.ai-feature h2{font-size:43px}}
@media(max-width:760px){.ai-feature-image{height:285px;object-position:82% center}.ai-feature:after{background:linear-gradient(0deg,#200d18 0%,#200d18 32%,#200d1800 66%)}}
/* Desktop rows restore the tall service cards after removing the AI banner. */
@media(min-width:761px){
 .toekomst-ai .page{height:100svh;min-height:640px}
 .toekomst-ai header{height:58px}
 .toekomst-ai main{display:grid;flex:1;grid-template-rows:204px minmax(300px,2fr) minmax(130px,1fr);gap:18px;min-height:0;max-height:800px;margin:0 0 auto;padding:0 0 14px}
 .toekomst-ai .intro{padding:112px 0 16px;align-self:start}
 .toekomst-ai h1{font-size:clamp(38px,5.2svh,56px)}
 .toekomst-ai .ai-feature{min-height:0;height:100%}
 .toekomst-ai .ai-feature-copy{padding:18px 32px;max-width:72%}
 .toekomst-ai .ai-feature h2{font-size:clamp(22px,2.85vw,40px);white-space:nowrap;line-height:1.05;margin:8px 0}
 .toekomst-ai .ai-feature p{font-size:12px}
 .toekomst-ai .ai-feature-invite{margin-top:8px;padding:6px 12px;font-size:8px}
 .toekomst-ai .ai-feature-label{font-size:7px;letter-spacing:1.6px}
 .toekomst-ai .choices{height:100%;min-height:0}
 .toekomst-ai .choice{height:100%;padding:18px}
 .toekomst-ai .choice h2{font-size:clamp(20px,12.7cqw,28px)}
 .toekomst-ai .choice-title{margin-bottom:8px}
 .toekomst-ai .choice-tagline{padding-top:8px;font-size:9px}
 .toekomst-ai .meet-softora{height:100%;min-height:0;margin:0;padding:18px 32px}
 .toekomst-ai .meet-heading h2{font-size:25px}
 .toekomst-ai footer{min-height:32px;padding:8px 0}
}
@media(max-width:760px){.ai-feature h2{font-size:34px;line-height:1.05}}

/* Photography from the same warm office series as the service cards. */
.toekomst-ai .meet-softora{background-image:linear-gradient(90deg,#21121dc2,#21121d6b 52%,#21121d30),url('/assets/entry/meet-softora-office.webp')}
@media(min-width:761px){.toekomst-ai .ai-feature-image{object-position:center 47%}}

@media(min-width:761px) and (max-height:800px){.toekomst-ai main{grid-template-rows:192px minmax(250px,2fr) minmax(116px,1fr);gap:10px}.toekomst-ai .intro{padding:112px 0 8px}}
@media(min-width:761px) and (max-height:680px){.toekomst-ai main{grid-template-rows:176px minmax(220px,2fr) minmax(94px,1fr);gap:8px}.toekomst-ai .intro{padding:112px 0 0}.toekomst-ai .ai-feature-copy{padding:8px 24px}.toekomst-ai .ai-feature h2{margin:4px 0}.toekomst-ai .ai-feature-invite{margin-top:4px}}
@media(max-width:760px){.toekomst-ai .intro{padding-top:20px}}

.toekomst-ai .choice{justify-content:flex-end}

/* Matching 3D figures for login destinations and contact methods. */
.toekomst-ai .login-options .login-avatar,.toekomst-ai .contact-options .contact-avatar{width:36px;height:36px;background:transparent;border-radius:0}
.toekomst-ai .login-avatar img,.toekomst-ai .contact-avatar img{display:block;width:100%;height:100%;object-fit:contain}
.toekomst-ai .login-options .login-avatar--seo img{width:85%;height:85%}

/* Mobile chooser: lead with the website and keep the introduction compact. */
@media(max-width:760px){
 .toekomst-ai .login-menu{display:none}
 .toekomst-ai .contact-menu .contact{min-height:36px;min-width:94px;padding:6px 8px 6px 14px;gap:8px;font-size:10px}
 .toekomst-ai .contact-menu .contact-chevron{width:22px;height:22px}
 .toekomst-ai .choice:last-child{grid-column:auto;height:285px}
 .toekomst-ai .choice:last-child .choice-photo{object-position:50% 64%}
 .toekomst-ai .choice:last-child .choice-content{max-width:none}
 .toekomst-ai .choice:last-child::before{background:linear-gradient(180deg,#160a181f 0%,#160a1800 25%,#21121d30 45%,#21121dde 85%,#21121df2 100%)}
 .toekomst-ai .choice[href="/nieuwe-website"]{grid-column:1/-1;height:200px}
 .toekomst-ai .choice[href="/nieuwe-website"] .choice-photo{object-position:50% 55%}
 .toekomst-ai .choice[href="/nieuwe-website"] .choice-content{max-width:65%}
 .toekomst-ai .choice[href="/nieuwe-website"]::before{background:linear-gradient(90deg,#21121dc9,#21121d25)}
 .toekomst-ai .meet-softora{height:200px;min-height:0;padding:20px 22px;border-radius:12px}
 .toekomst-ai .meet-label{margin-bottom:10px;font-size:8px;letter-spacing:1.4px}
 .toekomst-ai .meet-heading h2{font-size:clamp(22px,6vw,28px);letter-spacing:-.4px}
 .toekomst-ai .meet-link{margin-top:16px;padding:9px 14px;gap:20px;font-size:11px}
 .toekomst-ai .meet-link svg{width:17px;height:17px}
}

/* A quiet, centered invitation to read more. */
.toekomst-ai footer{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:16px}
.toekomst-ai .footer-copyright{justify-self:start}
.toekomst-ai .footer-copyright,.toekomst-ai .articles-link,.toekomst-ai .footer-personnel{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:32px;color:#766b71;font-size:11px;font-weight:400;letter-spacing:0;line-height:1.5;transition:color .2s}
.toekomst-ai .footer-personnel{justify-self:end}
.toekomst-ai .footer-copyright>span,.toekomst-ai .articles-link>span,.toekomst-ai .footer-personnel>span{margin:0}
.toekomst-ai .footer-copyright:is(:hover,:focus-visible),.toekomst-ai .articles-link:is(:hover,:focus-visible),.toekomst-ai .footer-personnel:is(:hover,:focus-visible){color:var(--wine)}
.toekomst-ai .footer-copyright:is(:hover,:focus-visible)>span,.toekomst-ai .articles-link:is(:hover,:focus-visible)>span,.toekomst-ai .footer-personnel:is(:hover,:focus-visible)>span{text-decoration:underline;text-underline-offset:4px}
@media(max-width:760px){
 .toekomst-ai footer{grid-template-columns:minmax(0,1fr);justify-items:center;gap:4px;padding:18px 0 20px;text-align:center}
 .toekomst-ai .articles-link{grid-row:1}
 .toekomst-ai .footer-copyright{grid-row:2;justify-self:center;min-height:44px}
 .toekomst-ai .footer-personnel{display:none}
}
