/* Interactive studio: artwork stays intact; labels are real accessible links. */
.interactive-hero{position:relative;padding-top:38px}
.interactive-hero .hero-grid{display:block;position:relative;min-height:570px}
.hero-copy{position:relative;z-index:2;width:38%;padding-top:38px;pointer-events:none}
.hero-copy a{pointer-events:auto}
.hero-copy h1{font-size:clamp(46px,4.6vw,68px);letter-spacing:-3px}
.hero-copy .intro{font-size:16px;max-width:350px}
.hero-copy .hero-detail{max-width:330px;font-size:13px}
.hero-copy .actions{gap:20px}
.setup{position:absolute;width:92%;right:-4%;top:0;aspect-ratio:1672/941}
.setup-image{display:block;width:100%;height:auto;mask-image:linear-gradient(to right,transparent 0%,#000 30%);user-select:none}
.setup-hint{position:absolute;bottom:1%;right:4%;font-size:8px;letter-spacing:1.5px;color:#c2cacc;background:#080a0bd9;padding:10px 12px;border:1px solid #26373e}
.hotspot{position:absolute;display:flex;align-items:center;gap:8px;z-index:3;color:#f1f0ea;white-space:nowrap;font-size:11px;transition:transform .2s,filter .2s}
.hotspot>span:last-child{padding:11px 12px;background:#0b1418f5;border:1px solid #2e8799;box-shadow:0 6px 24px #0009;border-radius:4px}
.hotspot b{margin-left:9px;color:var(--cyan);font-weight:400}
.hotspot-dot{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1px solid var(--cyan);background:#0a252d;color:var(--cyan);font-size:9px;box-shadow:0 0 0 5px #12b6d71a;animation:signal 3s ease-in-out infinite}
.hotspot-web{left:52%;top:14%}.hotspot-software{right:1%;top:45%}.hotspot-auto{right:0;top:79%}
.hotspot-software .hotspot-dot{color:var(--salmon);border-color:var(--salmon);background:#33211e;animation-delay:1s}
.hotspot-software>span:last-child{border-color:#aa6557}.hotspot-software b{color:var(--salmon)}
.hotspot-auto .hotspot-dot{animation-delay:2s}
.hotspot:hover,.hotspot:focus-visible{color:white;transform:translateY(-4px);filter:brightness(1.2)}
.interactive-hero .hero-foot{position:relative;margin-top:0}
nav a{position:relative}nav a.is-active{color:var(--cyan)}nav a.is-active:after{content:'';height:2px;background:var(--cyan);position:absolute;left:0;right:0;bottom:-9px}
.services article{transition:background .25s}.services article:hover{background:#101719}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .65s,transform .65s}.reveal.is-visible{opacity:1;transform:none}
.dialog-open{overflow:hidden}
dialog{color:var(--text);background:#101719;border:1px solid #3e565e;border-radius:8px;padding:44px;width:min(600px,calc(100% - 32px));max-height:85dvh;box-shadow:0 30px 100px #000a}
dialog::backdrop{background:#030608cf;backdrop-filter:blur(8px)}
dialog[open]{animation:dialog-in .2s ease-out}
.dialog-close{position:absolute;top:14px;right:14px;width:34px;height:34px;cursor:pointer;border:1px solid #425159;background:#172226;color:white;border-radius:50%}
dialog h2{font-size:36px;margin-right:12px}dialog .eyebrow{color:var(--cyan);font-size:9px;margin-top:10px}
.example{background:#182529;border-left:2px solid var(--cyan);padding:20px;margin-top:24px}.example>span{font-size:8px;letter-spacing:1.6px;color:var(--cyan)}.example p{font-size:14px;line-height:1.8;margin-bottom:0}
dialog ul{padding-left:18px;color:var(--muted);font-size:13px;line-height:2.1;margin-block:24px}dialog .button{width:100%}
@keyframes signal{0%,100%{box-shadow:0 0 0 5px #12b6d711}50%{box-shadow:0 0 0 8px #12b6d72a}}
@keyframes dialog-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(min-width:1500px){.interactive-hero .hero-grid{min-height:650px}.hero-copy{padding-top:62px}}
@media(max-width:1100px) and (min-width:721px){.interactive-hero .hero-grid{min-height:540px}.hero-copy{width:43%}.hero-copy h1{font-size:48px}.setup{top:65px;width:92%}.hotspot{font-size:9px;gap:5px}.hotspot>span:last-child{padding:9px}.hotspot-dot{width:23px;height:23px}.hotspot-software{right:-1%}.setup-hint{font-size:6px}}
@media(max-width:720px){.interactive-hero{padding-top:28px}.interactive-hero .hero-grid{min-height:0}.hero-copy{width:100%;padding-top:0}.hero-copy h1{font-size:clamp(44px,10vw,64px)}.hero-copy .intro,.hero-copy .hero-detail{max-width:100%}.setup{position:relative;width:100%;right:auto;top:auto;aspect-ratio:auto;margin-top:24px}.setup-image{mask-image:none;border-radius:4px}.setup-hint{position:static;font-size:8px;margin:0;padding:14px 0;border:0;background:none;letter-spacing:1px}.setup-links{display:grid;gap:9px}.hotspot{position:static;font-size:12px;gap:12px}.hotspot>span:last-child{flex:1;display:flex;justify-content:space-between}.hotspot-dot{animation:none;width:28px;height:28px}.interactive-hero .hero-foot{margin-top:28px}.hero-copy .actions{margin-top:24px}dialog{padding:30px 22px}dialog h2{font-size:29px}dialog .button{font-size:11px;padding:14px}.reveal{transform:translateY(10px)}}
@media(prefers-reduced-motion:reduce){.hotspot-dot,dialog[open]{animation:none}.reveal{opacity:1;transform:none}.hotspot:hover{transform:none}}