/* Sectie 04: losse stylesheet, wordt NA v2.css geladen. */

.ask{position:relative;background:var(--paper);overflow:hidden;isolation:isolate;
  min-height:min(94vh,900px);display:flex;align-items:center;
  padding:clamp(58px,6vw,90px) 0}
.ask::before{content:"";position:absolute;z-index:-1;right:-12%;top:8%;width:76%;height:84%;
  background:radial-gradient(ellipse at 56% 48%,rgba(185,216,255,.22),rgba(255,255,255,0) 64%);
  filter:blur(35px);pointer-events:none}

/* De volledige, verbonden Campus blijft binnen het canvas. */
.ask-right{position:absolute;right:clamp(24px,3vw,48px);top:50%;translate:0 -50%;
  width:min(57vw,820px);z-index:3;
  pointer-events:auto}
.c-stage{position:relative;width:100%;aspect-ratio:1672/941;
  filter:drop-shadow(0 34px 48px rgba(10,10,11,.08));pointer-events:none}
.c-stage img,.c-stage canvas.c-fx,.c-spots{position:absolute;inset:0;width:100%;height:100%}
.c-bw{display:block;z-index:1;object-fit:contain;pointer-events:none;
  filter:grayscale(1) saturate(.1) brightness(1.025)}
.c-spots,.c-fx{pointer-events:none}
.c-spots{z-index:1}
.c-fx{z-index:5}
.c-spot{position:absolute;inset:0;background-size:100% 100%;background-repeat:no-repeat}
.c-spot{z-index:2;
  opacity:0;transition:opacity 360ms var(--ease-out);pointer-events:none}
.c-spot.on{opacity:1}

.ask-inner{position:relative;z-index:2;width:100%}
.ask-left{max-width:min(36%,460px)}

.ask .shead{margin-bottom:clamp(8px,1.2vw,14px)}
.ask .shead h2{font-size:clamp(2.2rem,3.45vw,3.45rem);line-height:1.04;text-wrap:nowrap}
.ask .shead p{max-width:27rem}

/* Proof-of-life grammatica: Hermy staat vrij; alleen de bediening is glas. */
.prompt-deck{position:relative;margin:6px 0 0}
.proof-stage{display:grid;justify-items:center;align-content:center;padding:0 4px 8px}
.prompt-hermy{position:relative;width:270px;height:292px;overflow:hidden;flex:none}
.prompt-hermy .pod-img,.prompt-hermy .c-dome{position:absolute;left:5px;bottom:-47px;width:260px;
  height:auto;aspect-ratio:1086/1448;pointer-events:none}
.prompt-hermy .c-dome{z-index:2}
.prompt-hermy .c-dome canvas{position:absolute;left:35%;top:28%;width:30%;aspect-ratio:1;height:auto}
.answer-caption{display:grid;justify-items:center;gap:5px;width:100%;min-height:72px;text-align:center}
.answer-caption>span{font-family:var(--mono);font-size:.54rem;text-transform:uppercase;
  letter-spacing:.14em;color:var(--mist)}
.answer-caption p{max-width:27rem;min-height:2.8em;font-size:clamp(1rem,1.06vw,1.08rem);line-height:1.42;
  font-weight:580;letter-spacing:-.018em;color:var(--soft)}
.answer-caption p.is-speaking{color:var(--ink)}
.answer-word{visibility:hidden;opacity:0;transition:opacity .16s cubic-bezier(.22,1,.36,1)}
.answer-word.on{visibility:visible;opacity:1}
.question-panel{padding:7px;border:1px solid rgba(255,255,255,.88);border-radius:20px;
  background:linear-gradient(145deg,rgba(255,255,255,.77),rgba(245,247,250,.52));
  box-shadow:0 25px 56px -42px rgba(18,25,36,.4),inset 0 1px 0 #fff;
  backdrop-filter:blur(24px) saturate(1.22);-webkit-backdrop-filter:blur(24px) saturate(1.22)}
.prompt-clouds{display:grid;grid-template-columns:1fr 1fr;gap:6px}

/* Duidelijker als vraag: glasmateriaal uit dezelfde familie als de
   platform-knoppen, met een mono-label "ASK ME" en een pijl rechtsonder
   zodat direct leesbaar is dat dit klikbare vragen aan Hermy zijn. */
.req{appearance:none;position:relative;z-index:1;width:100%;min-height:78px;height:100%;
  --tier:122,163,202;border:1px solid rgba(255,255,255,.68);border-radius:17px;
  padding:24px 12px 12px;
  font-family:var(--ui);line-height:1.2;color:var(--ink);text-align:left;cursor:pointer;
  display:block;isolation:isolate;overflow:hidden;
  background:
    radial-gradient(130% 150% at 10% -10%,rgba(var(--tier),.20),transparent 58%),
    linear-gradient(135deg,rgba(255,255,255,.62),rgba(255,255,255,.26) 62%,rgba(255,255,255,.36));
  box-shadow:0 14px 28px -22px rgba(18,25,36,.5),inset 0 1px 0 rgba(255,255,255,.92);
  backdrop-filter:blur(22px) saturate(1.4);-webkit-backdrop-filter:blur(22px) saturate(1.4);
  opacity:0;transform:translateY(7px) scale(.985);
  transition:opacity 300ms var(--ease-out),transform 300ms var(--ease-out),
    border-color 180ms ease,background 180ms ease,color 180ms ease,box-shadow 180ms ease}
.req::before{content:"Ask me";position:absolute;left:12px;top:8px;
  font-family:var(--mono);font-size:6.5px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(var(--tier),.95);
  filter:saturate(.7) brightness(.72)}
.req::after{content:"\2197";position:absolute;right:10px;bottom:8px;
  font-size:.78rem;font-weight:650;color:var(--mist);
  transition:transform 180ms var(--ease-out),color 180ms ease}
.req.on:hover::after{transform:translate(2px,-2px);color:var(--ink)}
.req[data-tier="local"]{--tier:63,196,117}.req[data-tier="cloud"]{--tier:230,96,165}
.req[data-tier="specialist"]{--tier:241,148,68}
.req[hidden]{display:none}
.req span{display:block}.req.on{opacity:1;transform:none}
.req:not(.on){pointer-events:none}
.req.on:focus-visible{transform:translateY(-2px);border-color:rgba(var(--tier),.64);
  background:linear-gradient(145deg,#fff,rgba(var(--tier),.36));
  box-shadow:0 16px 27px -19px rgba(var(--tier),.92),inset 0 1px 0 #fff;outline:0}
.req.on:active{transform:scale(.98)}
.req.is-active{border-color:rgba(var(--tier),.72);background:linear-gradient(145deg,#fff,rgba(var(--tier),.42));
  box-shadow:0 16px 30px -20px rgba(var(--tier),.96),0 0 0 1px rgba(var(--tier),.14),inset 0 1px 0 #fff}
.req.is-dimmed{opacity:.42}
.req-copy{font-size:.8rem;line-height:1.32;font-weight:620;letter-spacing:-.016em;color:var(--ink)}

/* het invoerveld: groot, wit, zwevend */
.askbar{display:flex;align-items:center;gap:8px;background:var(--pure);
  border:1px solid var(--line-2);border-radius:999px;padding:7px 7px 7px 20px;
  box-shadow:0 18px 36px -26px rgba(10,10,11,.32)}
.askbar input{flex:1;min-width:0;background:transparent;border:0;padding:14px 0;
  color:var(--ink);font-family:var(--ui);font-size:1rem}
.askbar input:focus{outline:0}
.askbar input::placeholder{color:var(--mist)}
.askbar .btn{width:46px;height:46px;padding:0;justify-content:center;font-size:1.05rem;flex:none}
.err{color:#d0538a;font-size:.82rem;margin:8px 0 0;min-height:1em}

/* de drie lagen als fijne pillen, geen kaarten */
.legend{display:flex;gap:7px;flex-wrap:wrap;margin-top:16px}
.campus-legend{position:relative;z-index:7;justify-content:center;margin:14px 0 0;
  pointer-events:auto}
.mobile-tier-note{display:none}
/* Liquid glass, herontworpen: echt materiaal (blur + verzadiging), een
   specular highlight bovenlangs, en per laag een zachte tintgloed IN het
   glas. Actief = helderder glas met sterkere gloed en tintring — geen
   zwarte kaart, geen platte pastel-pill. */
.marker{position:relative;display:inline-flex;flex-direction:column;align-items:flex-start;gap:3px;
  isolation:isolate;overflow:hidden;
  background:
    radial-gradient(120% 150% at 12% -8%,rgba(var(--tier),.14),transparent 55%),
    linear-gradient(135deg,rgba(255,255,255,.56),rgba(255,255,255,.20) 60%,rgba(255,255,255,.30));
  border:1px solid rgba(255,255,255,.65);border-radius:19px;
  padding:9px 15px 8px 14px;cursor:pointer;font-family:var(--ui);
  box-shadow:0 16px 34px -26px rgba(18,25,36,.5),
    inset 0 1px 0 rgba(255,255,255,.92),inset 0 -1px 0 rgba(10,10,11,.05);
  backdrop-filter:blur(26px) saturate(1.45);-webkit-backdrop-filter:blur(26px) saturate(1.45);
  transition:border-color 180ms ease,background 180ms ease,box-shadow 180ms ease,
    transform var(--dur-press) var(--ease-out)}
/* de glans-veeg die het "vloeibare" maakt */
.marker::before{content:"";position:absolute;z-index:0;inset:-40% -20% auto;height:80%;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.5) 48%,transparent 62%);
  transform:translateX(-24%);transition:transform 500ms var(--ease-out);pointer-events:none}
.marker:hover::before{transform:translateX(18%)}
.marker>*{position:relative;z-index:1}
.marker.on{border-color:rgba(var(--tier),.5);
  background:
    radial-gradient(120% 160% at 12% -8%,rgba(var(--tier),.30),transparent 60%),
    linear-gradient(135deg,rgba(255,255,255,.86),rgba(255,255,255,.46) 62%,rgba(var(--tier),.10));
  box-shadow:0 18px 38px -24px rgba(var(--tier),.55),0 0 0 1px rgba(var(--tier),.14),
    inset 0 1px 0 #fff}
.marker:active{transform:scale(.97)}
.marker[data-tier="0"]{--tier:63,196,117}.marker[data-tier="1"]{--tier:230,96,165}
.marker[data-tier="2"]{--tier:241,148,68}
.marker .mt{font-size:.84rem;font-weight:620;letter-spacing:-.01em;color:var(--soft);
  transition:color .3s;white-space:nowrap}
.marker .price-note{font-family:var(--mono);font-size:7px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;color:var(--mist);white-space:nowrap}
.marker.on .mt{color:var(--ink)}
.marker.on .price-note{color:var(--soft)}
.marker .mp{position:absolute;left:0;top:calc(100% + 9px);width:max(100%,270px);
  background:var(--ink);color:#fff;border-radius:12px;padding:11px 13px;
  font-size:.76rem;font-weight:400;line-height:1.45;text-align:left;
  opacity:0;transform:translateY(-5px);pointer-events:none;z-index:9;
  box-shadow:0 20px 40px -20px rgba(10,10,11,.6);transition:opacity .28s,transform .28s}
.marker:focus-visible .mp{opacity:1;transform:none}
.marker .mp b{display:block;margin-bottom:2px;font-weight:680}
.campus-legend .marker .mp{top:auto;bottom:calc(100% + 9px);transform:translateY(5px)}
.campus-legend .marker:focus-visible .mp{transform:none}

/* verdiepingen van de toren + taakpillen over de campus */
.floors,.tasks{position:absolute;inset:0;pointer-events:none}.floors{z-index:3}.tasks{z-index:6}
.fl{position:absolute;left:49.55%;top:var(--fy);transform:translate(-50%,-50%);
  min-width:clamp(62px,7.4vw,124px);text-align:center;
  background:rgba(242,242,241,.78);border:1px solid rgba(10,10,11,.14);border-radius:999px;
  padding:3px 10px;font-family:var(--ui);font-size:clamp(7px,.58vw,10px);font-weight:580;
  letter-spacing:-.01em;color:rgba(28,28,30,.52);white-space:nowrap;
  box-shadow:0 4px 12px -8px rgba(10,10,11,.42);backdrop-filter:blur(4px);
  transition:color 360ms ease,border-color 360ms ease,box-shadow 360ms ease,transform 360ms var(--ease-out),background 360ms ease}
.fl.on{color:#fff;transform:translate(-50%,-50%) scale(1.065);background:rgba(17,17,19,.88)}
.fl.on[data-tier]{border-color:rgba(255,255,255,.95);box-shadow:0 0 0 3px rgba(255,255,255,.24),0 6px 16px -8px rgba(10,10,11,.45)}
.task{position:absolute;left:var(--tx);top:var(--ty);
  transform:translate(-50%,-50%) translateY(8px) scale(.96);
  display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.96);
  border:1px solid var(--line);border-radius:999px;padding:6px 13px;
  font-family:var(--ui);font-size:.72rem;font-weight:600;color:var(--ink);white-space:nowrap;
  box-shadow:0 12px 24px -16px rgba(10,10,11,.3);opacity:0;
  transition:opacity 360ms var(--ease-out),transform 360ms var(--ease-out)}
.task.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.task svg{color:var(--mist);flex:none}

/* Op lage laptops blijft de hele vraagbediening in de eerste sectieblik,
   zonder de ronde sokkel opnieuw af te snijden. */
@media(min-width:1001px) and (max-height:820px){
  .ask{min-height:100vh;padding:32px 0}
  .ask .shead{margin-bottom:4px}.ask .shead h2{font-size:clamp(2.25rem,3.3vw,2.8rem)}
  .ask .shead p{font-size:.95rem;line-height:1.48}
  .prompt-deck{margin-top:0}.proof-stage{padding-bottom:3px}
  .prompt-hermy{width:238px;height:258px}
  .prompt-hermy .pod-img,.prompt-hermy .c-dome{left:5px;bottom:-43px;width:228px}
  .answer-caption{min-height:62px}.answer-caption p{font-size:.96rem}
  .req{min-height:66px}
}

@media(max-width:1000px){
  .ask{display:flex;flex-direction:column;min-height:auto;padding:clamp(64px,9vw,96px) 0 26px}
  .ask-inner{order:1}.ask-right{order:2}
  .ask-right{position:relative;right:auto;top:auto;translate:none;
    width:calc(100% - 24px);flex:none;
    margin:clamp(28px,5vw,42px) auto 0}
  .ask-left{max-width:none}
  .prompt-deck{width:min(100%,620px);max-width:620px}
  .campus-legend{margin:12px 0 0}
  .campus-legend .marker .mp{left:auto;right:0}
}

@media(max-width:600px){
  .ask{padding:64px 0 24px}
  .ask-right,.ask-inner,.ask-left{display:contents}
  .ask .shead{order:1;width:calc(100% - 40px);margin:0 auto 2px}
  .ask .shead h2{font-size:clamp(2rem,10vw,2.65rem);text-wrap:balance}
  .ask .shead p{font-size:1rem}
  .prompt-deck{order:4;width:calc(100% - 40px);margin:8px auto 0}
  .proof-stage{padding-bottom:8px}
  .prompt-hermy{width:235px;height:258px}.prompt-hermy .pod-img,.prompt-hermy .c-dome{left:5px;bottom:-43px;width:225px}
  .answer-caption{min-height:78px}.answer-caption p{max-width:22rem;font-size:1rem;line-height:1.42;min-height:3em}
  .question-panel{padding:7px;border-radius:19px}
  .prompt-clouds{grid-template-columns:1fr 1fr}
  .req{min-height:96px;padding:22px 9px 14px;border-radius:14px}.req-copy{font-size:.74rem;line-height:1.3}
  .req::before{left:9px;top:7px}.req::after{right:8px;bottom:7px;font-size:.7rem}
  .askbar{padding:5px 5px 5px 16px}.askbar input{font-size:16px}.askbar .btn{width:44px;height:44px}
  .campus-legend{order:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
    width:calc(100% - 40px);margin:17px auto 0;padding:4px;gap:4px;border-radius:18px;
    border:1px solid rgba(255,255,255,.88);
    background:linear-gradient(145deg,rgba(255,255,255,.76),rgba(240,243,248,.5));
    box-shadow:0 18px 38px -30px rgba(18,25,36,.5),inset 0 1px 0 #fff;
    backdrop-filter:blur(20px) saturate(1.24);-webkit-backdrop-filter:blur(20px) saturate(1.24);
    --tier-index:0}
  .campus-legend[data-active-tier="1"]{--tier-index:1}
  .campus-legend[data-active-tier="2"]{--tier-index:2}
  .campus-legend::before{content:"";position:absolute;z-index:0;left:4px;top:4px;bottom:4px;
    width:calc((100% - 16px)/3);border-radius:14px;border:1px solid rgba(255,255,255,.9);
    background:linear-gradient(145deg,#fff,rgba(var(--active-tier,63,196,117),.2));
    box-shadow:0 8px 18px -14px rgba(var(--active-tier,63,196,117),.82),inset 0 1px 0 #fff;
    transform:translateX(calc(var(--tier-index) * (100% + 4px)));
    transition:transform 250ms var(--ease-in-out),background-color 180ms ease}
  .campus-legend[data-active-tier="0"]{--active-tier:63,196,117}
  .campus-legend[data-active-tier="1"]{--active-tier:230,96,165}
  .campus-legend[data-active-tier="2"]{--active-tier:241,148,68}
  .campus-legend .marker,.campus-legend .marker.on{min-width:0;width:100%;justify-content:center;
    z-index:1;padding:10px 5px;border-color:transparent;background:transparent;box-shadow:none;transform:none}
  .campus-legend .marker.is-selected{border-color:transparent;background:transparent;box-shadow:none}
  .campus-legend .marker{align-items:center}
  .campus-legend .marker::before{display:none}
  .campus-legend .marker .mt{font-size:.7rem;text-align:center;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
  .campus-legend .marker .price-note,.campus-legend .marker .mp{display:none}
  .mobile-tier-note{order:3;display:block;width:calc(100% - 48px);min-height:1.4em;
    margin:7px auto 1px;text-align:center;font-size:.74rem;line-height:1.4;
    font-weight:560;color:var(--soft)}
  .c-stage{order:5;width:calc(100% - 24px);flex:none;margin:28px auto 0}
  .tasks{display:none}
}

@media(hover:hover) and (pointer:fine){
  .req.on:hover{transform:translateY(-2px);border-color:rgba(var(--tier),.64);
    background:linear-gradient(145deg,#fff,rgba(var(--tier),.36));
    box-shadow:0 16px 27px -19px rgba(var(--tier),.92),inset 0 1px 0 #fff}
  .marker:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.9);
    box-shadow:0 20px 40px -26px rgba(18,25,36,.55),inset 0 1px 0 #fff}
  .marker:hover .mp{opacity:1;transform:none}
  .campus-legend .marker:hover .mp{transform:none}
}

@media(prefers-reduced-motion:reduce){
  .c-spot,.req,.marker,.fl,.task,.answer-word,.campus-legend::before{transition-duration:180ms}
  .req{transform:none}.task{transform:translate(-50%,-50%)}
}

.req.on:active{transform:scale(.98)}
.marker:active{transform:scale(.97)}

@media(max-width:380px){
  .req{min-height:100px;padding-inline:7px}.req-copy{font-size:.68rem}
  .prompt-clouds{gap:5px}
}