/* Refinement: same design language, clearer hierarchy and a shorter narrative. */
html{scroll-padding-top:94px}
:root{--ink-3:#596378;--ink-4:#667087}
.sec{padding:80px 0}.sec-s{padding:48px 0}
.eyebrow{font-size:12px;letter-spacing:.12em;margin-bottom:0}
.demo-t,.mono-s,.tag{font-size:12px}.small{font-size:14px}
.hero{min-height:650px;padding:66px 0 64px}
.hero .h1{font-size:clamp(50px,5.5vw,76px);line-height:1.04}
.hero .lead{font-size:20px;max-width:43ch;line-height:1.6}
.hero-bg{opacity:.78}.hero-card{background:rgba(255,255,255,.97)}
.hero-audience{font-size:14px;line-height:1.55;margin:0;color:var(--ink-2)}
.hero-facts{padding-top:16px;border-top:1px solid var(--line);gap:8px 16px}
.hero-in>.stack{gap:21px!important}
.customer-band{padding:30px 0 34px;border-block:1px solid var(--line);background:var(--bg-alt)}
.customer-band .small{margin-bottom:22px}.customer-band .plogo{height:auto}
.customer-band .plogo span{font-size:16px;color:var(--ink-2)}
.products .teaser{box-shadow:none;padding:28px;gap:22px}
.products .teaser:hover{border-color:#A5BDFF;box-shadow:var(--sh)}
.product-label{font-size:14px;line-height:1.4;margin:0;color:var(--ink-3)}
.product-link{margin-top:auto;padding-top:10px;color:var(--blue);font-weight:600;font-size:15px;display:flex;justify-content:space-between;gap:12px}
.products .teaser-arrow{display:none}.products .ico{background:var(--blue-tint)}
.customer-voice{margin-top:52px;padding-top:36px;border-top:1px solid #DBDFE8;display:grid;grid-template-columns:.8fr 1.2fr;gap:64px}
.customer-voice .body{margin:12px 0 18px}.customer-voice figure{margin:0}
.customer-voice blockquote{font-size:18px;line-height:1.65;margin:0 0 18px;color:var(--ink-2)}
.customer-voice figcaption{font-size:14px}.customer-voice figcaption span{display:block;color:var(--ink-3);font-size:12px;margin-top:4px}
.workflow .card{box-shadow:none;padding:26px 24px}.workflow .card:hover{transform:none}
.workflow-more{margin-top:28px}.trust .grid-side{gap:48px}.trust .h2{font-size:44px}
.trust .lead{font-size:18px}.trust .tag{letter-spacing:0}
.cta{background:#fff;padding:80px 0}.cta-note{text-align:center;margin:22px 20px 0}
/* The quieter second option under the demo button: people not ready to talk yet. */
.cta-nl{width:min(420px,calc(100% - 40px));margin:28px auto 0;padding-top:22px;border-top:1px solid var(--line);text-align:center}
.cta-nl .btn-link{font-size:14px}
.ftr{border-top:1px solid var(--line)}.ftr-bot{font-size:12px}
.legal-pending small{font-size:12px;color:var(--ink-3);margin-left:4px}
.rv{opacity:1;transform:none} /* Content remains available if JavaScript is disabled. */
.skip-link{position:fixed;top:-80px;left:20px;z-index:1000;background:var(--blue);color:#fff;padding:12px 18px;border-radius:8px}
.skip-link:focus{top:12px;color:#fff}
@media(max-width:1100px){
 .nav,.hdr-by{display:none}.hdr-in{height:62px;gap:16px}
 .hdr-right{gap:10px}.burger{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--line);border-radius:10px;background:#fff;flex:none}
 .nav.is-open{display:flex;position:absolute;top:62px;left:0;right:0;background:white;flex-direction:column;align-items:stretch;gap:0;padding:10px 20px 16px;border-bottom:1px solid var(--line);box-shadow:var(--sh)}
 .nav a{padding:12px 8px;min-height:44px}.nav a.is-active{box-shadow:none}
}
@media(max-width:900px){
 .sec{padding:56px 0}.hero{min-height:0;padding:44px 0 40px}
 .hero .h1{font-size:clamp(46px,8vw,64px)}.hero .lead{font-size:18px}
 .hero-bg{opacity:.48}.hero-in{gap:32px}.hero-card{max-width:560px;width:100%}
 .hero-facts{font-size:12px}.customer-band{padding:26px 0}.customer-band .logos-static{gap:18px 26px;justify-content:flex-start}
 .customer-band .plogo span{font-size:14px;white-space:normal}
 .customer-voice{grid-template-columns:1fr;gap:32px}
 .trust .h2{font-size:32px}
 .customer-voice{margin-top:36px;padding-top:28px}
 .trust .grid-side{gap:28px}.cta{padding:56px 0}.cta .lead{font-size:18px}
}
@media(max-width:440px){
 .hero .h1{font-size:48px}
 .hero .eyebrow{font-size:12px;letter-spacing:.06em}.hero-card{padding:18px 16px}
 .customer-voice blockquote{font-size:17px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}.livedot{animation:none}}


/* Customer-logo variant: original artwork, balanced sizes, no headline or carousel. */
.customer-band{background:#fff;padding:30px 0;border-block:1px solid var(--line)}
.customer-band .logos-static{display:grid;grid-template-columns:.7fr 1.15fr 1fr 1.2fr 1fr;align-items:center;gap:28px;margin:0}
.customer-band .plogo{height:64px;min-width:0;justify-content:center}
.customer-band .plogo a{display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:6px}
.customer-band .plogo img{width:100%;max-width:178px;height:auto;max-height:60px;object-fit:contain}
.customer-band [data-logo="kwf"] img{width:52px;height:50px}
.customer-band [data-logo="build"] img{max-width:188px}
.customer-band [data-logo="stadt-villach"] img{max-width:126px;max-height:54px}
@media(max-width:700px){
 .customer-band{padding:24px 0}
 .customer-band .logos-static{display:flex;justify-content:center;flex-wrap:wrap;gap:18px 24px}
 .customer-band .plogo{width:calc((100% - 48px)/3);height:58px}
 .customer-band .plogo img{max-height:48px}
 .customer-band [data-logo="kwf"] img{width:44px;height:44px}
 .customer-band [data-logo="stadt-villach"] img{max-width:110px;max-height:44px}
}
@media(max-width:380px){.customer-band .plogo{width:calc((100% - 24px)/2)}}


/* Selected customers: three restrained groups, with clearly attributed quotes. */
.customer-spotlight{border-block:1px solid var(--line);background:#fff;padding:32px 0 18px}
.customer-slides{display:grid}
.customer-slide{grid-area:1/1;display:grid;grid-template-columns:1fr 1.1fr;gap:54px;align-items:center;visibility:hidden;opacity:0;pointer-events:none;transition:opacity .45s ease,visibility .45s}
.customer-slide.is-current{visibility:visible;opacity:1;pointer-events:auto}
.spotlight-logos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:center;gap:22px}
.spotlight-logo{display:flex;align-items:center;justify-content:center;height:70px;min-width:0;border-radius:6px}
.spotlight-logo img{display:block;width:100%;height:auto;max-height:60px;object-fit:contain}
.spotlight-logo[data-customer="stadt-villach"] img{max-width:116px;max-height:50px}
.spotlight-quote{margin:0;padding-left:34px;border-left:1px solid var(--line)}
.spotlight-quote blockquote{font-size:19px;line-height:1.5;letter-spacing:-.01em;margin:0 0 13px;color:var(--ink);max-width:43ch}
.spotlight-quote figcaption{font-size:13px;line-height:1.6;color:var(--ink-2)}
.spotlight-quote figcaption strong{margin-right:8px}.spotlight-quote small{font-size:12px;color:var(--ink-3);display:block;margin-top:2px}
.spotlight-bottom{display:flex;justify-content:flex-end;align-items:center;gap:20px;margin-top:22px}


.spotlight-controls{display:flex;align-items:center;gap:6px}
.spotlight-controls button{border:1px solid var(--line);border-radius:8px;background:white;color:var(--ink-2);min-width:40px;min-height:40px;font:500 13px var(--sans);cursor:pointer;padding:0 10px}
.spotlight-controls button:hover{background:var(--bg-alt);border-color:#B7C2D8}
.spotlight-controls [data-customer-pause]{min-width:96px}
.spotlight-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(max-width:900px){.customer-slide{gap:26px;grid-template-columns:.95fr 1.05fr}.spotlight-logos{gap:12px}.spotlight-quote{padding-left:22px}.spotlight-quote blockquote{font-size:17px}}
@media(max-width:650px){
 .customer-spotlight{padding:22px 0 18px}.customer-slide{grid-template-columns:1fr;gap:22px;align-content:start}
 .spotlight-logos{gap:24px;max-width:430px;width:100%;margin:auto}.spotlight-logo{height:58px}
 .spotlight-quote{border-left:0;border-top:1px solid var(--line);padding:20px 0 0}
 .spotlight-quote blockquote{font-size:18px;max-width:none}.spotlight-quote figcaption span{display:block}
 .spotlight-bottom{gap:12px;flex-wrap:wrap;margin-top:18px}
 .spotlight-controls{margin-left:auto}
}
@media(prefers-reduced-motion:reduce){.customer-slide{transition:none}}


/* Product cards with a click-through preview. */
.pv-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:border-color .2s,box-shadow .2s}
.pv-card:hover{border-color:#C9D8FF;box-shadow:var(--sh)}
.pv{position:relative;background:linear-gradient(180deg,#F5F8FF 0%,#EDF2FD 100%);border-bottom:1px solid var(--line)}
.pv-stage{position:relative;aspect-ratio:10/8.6;overflow:hidden}
/* The stage links to the product page; the front view lifts a little on hover. */
a.pv-stage{display:block;color:inherit}
a.pv-stage:hover .pv-slide.is-current{transform:translateY(-4px)}

/* App views: a window anchored top left, running off the right and bottom
   edge, so the part that matters is shown larger than a whole screen would be. */
.pv-stage-window .pv-slide{position:absolute;left:22px;top:22px;width:118%;height:auto;margin:0;border-radius:12px;
  box-shadow:0 14px 36px rgba(18,23,42,.13);opacity:0;transform:translateY(10px);transition:opacity .35s ease,transform .45s cubic-bezier(.2,.7,.2,1)}
.pv-stage-window .pv-slide:not(.is-current){pointer-events:none}
.pv-stage-window .pv-slide.is-current{opacity:1;transform:none}
.pv-code{right:-40px;bottom:-40px;width:auto!important}
.pv-code pre.code{height:100%;border-radius:12px;font-size:12px;line-height:1.65;padding:18px 20px;overflow:hidden;white-space:pre}

/* Reports: three sheets on a stack; the chosen one comes to the front. */
.pv-sheet{position:absolute;left:12%;top:9%;width:76%;aspect-ratio:1100/778;margin:0;background:#fff;border-radius:6px;overflow:hidden;
  box-shadow:0 1px 0 rgba(18,23,42,.04),0 16px 36px rgba(18,23,42,.16);transform-origin:50% 90%;
  transition:transform .5s cubic-bezier(.2,.7,.2,1),opacity .35s ease,box-shadow .3s}
.pv-sheet img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.pv-sheet.is-current{z-index:3}
.pv-sheet.is-next{z-index:2;transform:translateX(19%) rotate(5deg) scale(.86);opacity:.92;cursor:pointer}
.pv-sheet.is-prev{z-index:1;transform:translateX(-19%) rotate(-5deg) scale(.86);opacity:.92;cursor:pointer}
.pv-sheet.is-next:hover{transform:translateX(22%) rotate(6deg) scale(.87)}
.pv-sheet.is-prev:hover{transform:translateX(-22%) rotate(-6deg) scale(.87)}

/* The switch floats over the bottom of the stage, so the views keep the full height. */
.pv-tabs{position:absolute;z-index:5;left:14px;right:14px;bottom:14px;display:flex;gap:2px;padding:4px;background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(18,23,42,.08);border-radius:12px;box-shadow:0 6px 20px rgba(18,23,42,.10)}
.pv-tabs button{flex:1 1 auto;min-width:0;min-height:36px;padding:6px 6px;border:0;border-radius:8px;background:transparent;
  font:500 13px/1.2 var(--sans);color:var(--ink-3);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .15s,color .15s}
.pv-tabs button:hover{color:var(--ink)}
.pv-tabs button[aria-pressed="true"]{background:var(--blue-tint);color:var(--blue-ink);font-weight:600}

.pv-body{display:flex;flex-direction:column;gap:10px;flex:1;padding:24px 26px 24px}
.pv-body .h3{margin-bottom:2px}
/* Pushed to the bottom, so the links line up across the three cards. */
.pv-body .product-link{margin-top:auto;padding-top:16px;border-top:1px solid var(--line-2)}

/* Stream note, custom tiles, CTA eyebrow. */
.stream-note{padding-top:22px;border-top:1px solid var(--line);font-size:15px;color:var(--ink-3);max-width:none}
.stream-note b{color:var(--ink);font-weight:600}
.custom-tile{display:flex;align-items:center;gap:14px;padding:22px}
.custom-tile .ico{background:#fff}
.cta .eyebrow{text-align:center}

@media(max-width:900px){
 .products .grid-3{gap:20px}
 .pv-card{max-width:560px}
 .pv-body{padding:20px 20px 20px}
}
@media(max-width:440px){
 .pv-stage-window .pv-slide{left:16px;top:16px}
 .pv-code{right:-16px;bottom:-16px}
 .pv-tabs{left:10px;right:10px;bottom:10px}.pv-tabs button{font-size:12.5px;padding:6px 4px}
}
@media(prefers-reduced-motion:reduce){.pv-slide,.pv-sheet{transition:none}}