.compact-landing .landing-card--future .landing-card-copy strong {
  font-size: clamp(.82rem, 1.25vw, 1rem);
  letter-spacing: -.02em;
  white-space: nowrap;
}

/* Final Webdesign scene overrides — intentionally last in the cascade. */
.webdesign-feature-section {
  position: relative;
  min-height: clamp(1080px, 128vw, 1420px);
  padding: 0;
  overflow: hidden;
  background: #101723 url("assets/generated/webdesign-coworking-flipchart-table-v3.optimized.webp") center top / 100% 100% no-repeat;
  isolation: isolate;
}
.webdesign-feature-section::before {
  z-index: 0;
  background: linear-gradient(180deg, rgba(3,7,15,.15), transparent 20% 76%, rgba(3,7,15,.28)), linear-gradient(90deg, rgba(3,7,15,.14), transparent 24% 76%, rgba(3,7,15,.12));
}
.webdesign-feature-section .websites-tile {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.webdesign-feature-section .websites-tile::before { display: none; }
.webdesign-feature-section .websites-tile > .webdesign-flipchart-copy {
  position: absolute;
  z-index: 3;
  top: 17.4%;
  left: 25.2%;
  width: 36.5%;
  margin: 0;
  padding: clamp(.55rem,1.2vw,1rem);
  color: #13263a;
  text-align: left;
  transform: rotate(-.35deg);
}
.webdesign-feature-section .webdesign-flipchart-copy h2,
.webdesign-feature-section .webdesign-flipchart-copy h3 { max-width: none; margin: 0; color: #102438; text-shadow: none; }
.webdesign-feature-section .webdesign-flipchart-copy h2 { font-size: clamp(1.7rem,3.5vw,3.7rem); line-height: .98; }
.webdesign-feature-section .webdesign-flipchart-copy h3 { margin-top: .25em; color: #de177b; font-size: clamp(1.25rem,2.55vw,2.7rem); line-height: 1.02; }
.webdesign-feature-section .webdesign-reel {
  position: absolute;
  z-index: 4;
  top: 58.7%;
  left: 34%;
  width: 32%;
  margin: 0;
  aspect-ratio: 16/7.3;
  border: 2px solid rgba(158,239,247,.68);
  border-radius: 12px;
  box-shadow: 0 16px 34px rgba(0,0,0,.48),0 0 24px rgba(16,232,255,.12);
  transform: perspective(900px) rotateX(4deg) rotateZ(-.5deg);
}
.webdesign-feature-section .compact-landing {
  position: absolute;
  z-index: 5;
  top: 69.6%;
  left: 0;
  width: 100%;
  height: 17.5%;
  margin: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.webdesign-feature-section .compact-landing .landing-carousel-track {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  grid-auto-flow: row;
  grid-auto-columns: auto;
  align-items: stretch;
  gap: 3.4%;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0 2.1%;
  overflow: visible;
  transform: none !important;
}
.webdesign-feature-section .compact-landing .landing-card,
.webdesign-feature-section .compact-landing .landing-card.is-active,
.webdesign-feature-section .compact-landing .landing-card[data-pos="0"],
.webdesign-feature-section .compact-landing .landing-card[data-pos="1"],
.webdesign-feature-section .compact-landing .landing-card[data-pos="2"] {
  width: 100%;
  height: 100%;
  min-width: 0;
  margin: 0;
  padding: .32rem;
  opacity: .96;
  border: 1px solid rgba(255,255,255,.62);
  border-radius: 5px;
  background: #e9dfcc;
  box-shadow: 0 13px 20px rgba(14,10,8,.42);
  filter: saturate(.92) contrast(.97);
  transform: none;
}
.webdesign-feature-section .compact-landing .landing-card:nth-child(1) { transform: perspective(1100px) rotateX(4deg) rotateZ(-2.1deg); }
.webdesign-feature-section .compact-landing .landing-card:nth-child(2) { transform: perspective(1100px) rotateX(3deg) rotateZ(.25deg); }
.webdesign-feature-section .compact-landing .landing-card:nth-child(3) { transform: perspective(1100px) rotateX(4deg) rotateZ(2deg); }
.webdesign-feature-section .compact-landing .landing-card:hover,
.webdesign-feature-section .compact-landing .landing-card:focus-visible {
  z-index: 8;
  filter: saturate(1.08) brightness(1.08);
  box-shadow: 0 46px 54px rgba(4,8,15,.68), 0 0 0 2px rgba(16,232,255,.72), 0 0 42px rgba(16,232,255,.2);
  transform: perspective(900px) translate3d(0,-78px,120px) rotateX(-2deg) rotateZ(0) scale(1.27);
}
.webdesign-feature-section .compact-landing .landing-carousel-controls { display: none; }

.webdesign-feature-section .compact-landing .landing-card {
  transform-origin: 50% 100%;
  backface-visibility: hidden;
  will-change: transform;
  transition: transform .58s cubic-bezier(.16,.82,.2,1), filter .38s ease, box-shadow .5s ease;
}

@media (max-width:759px) {
  .webdesign-feature-section { min-height: 1180px; background-size: auto 100%; background-position: center top; }
  .webdesign-feature-section .websites-tile { width: 100%; padding: 0; }
  .webdesign-feature-section .websites-tile > .webdesign-flipchart-copy { top: 17%; left: 18%; width: 64%; padding: .35rem; }
  .webdesign-feature-section .webdesign-flipchart-copy h2 { font-size: clamp(1.35rem,7.1vw,2rem); }
  .webdesign-feature-section .webdesign-flipchart-copy h3 { font-size: clamp(1.05rem,5.4vw,1.55rem); }
  .webdesign-feature-section .webdesign-reel { top: 59.5%; left: 27%; width: 46%; }
  .webdesign-feature-section .compact-landing { top: 70.5%; height: 16%; }
  .webdesign-feature-section .compact-landing .landing-carousel-track { gap: 2.2%; padding-inline: 1%; overflow: visible; }
  .webdesign-feature-section .compact-landing .landing-card,
  .webdesign-feature-section .compact-landing .landing-card.is-active { padding: .14rem; }
}

/* Definitive Webdesign rollback after the former scene overrides. */
.webdesign-feature-section { min-height:0; padding:clamp(3.5rem,7vw,6.5rem) 0 clamp(4rem,8vw,7rem); overflow:visible; background:radial-gradient(circle at 18% 8%,rgba(16,232,255,.1),transparent 34%),radial-gradient(circle at 86% 78%,rgba(255,36,154,.09),transparent 34%),linear-gradient(180deg,#070d17,#04070d); isolation:auto; }
.webdesign-feature-section::before { z-index:auto; background:linear-gradient(90deg,transparent,rgba(255,255,255,.025),transparent); }
.webdesign-feature-section .websites-tile { position:relative; inset:auto; width:min(1080px,calc(100% - 2rem)); height:auto; margin-inline:auto; padding:clamp(1rem,2vw,1.5rem); overflow:hidden; border:1px solid rgba(16,232,255,.25); border-radius:27px; background:linear-gradient(145deg,rgba(11,18,31,.82),rgba(5,8,15,.7)); box-shadow:0 28px 90px rgba(0,0,0,.38),inset 0 1px rgba(255,255,255,.08); }
.webdesign-feature-section .websites-tile::before { display:block; }
.webdesign-feature-section .websites-tile > header { position:static; width:auto; margin:0; padding:.35rem .45rem .2rem; transform:none; }
.webdesign-feature-section .websites-tile > header h3 { max-width:760px; margin:.25rem 0 0; color:#fff; font-size:clamp(1.55rem,3vw,2.65rem); }
.webdesign-feature-section .webdesign-reel { position:relative; top:auto; left:auto; width:100%; margin:.7rem 0 .65rem; aspect-ratio:16/9; border:1px solid rgba(16,232,255,.22); border-radius:22px; box-shadow:none; transform:none; }
.webdesign-feature-section .compact-landing { position:relative; top:auto; left:auto; width:auto; height:auto; margin-top:.2rem; overflow:hidden; border-radius:22px; }
.webdesign-feature-section .compact-landing .landing-carousel-track { display:flex; grid-template-columns:none; grid-auto-flow:initial; justify-content:center; align-items:center; gap:0; width:auto; height:auto; min-height:370px; padding:.75rem 1rem 1.2rem; overflow:visible; }
.webdesign-feature-section .compact-landing .landing-card,
.webdesign-feature-section .compact-landing .landing-card.is-active,
.webdesign-feature-section .compact-landing .landing-card[data-pos="0"],
.webdesign-feature-section .compact-landing .landing-card[data-pos="1"],
.webdesign-feature-section .compact-landing .landing-card[data-pos="2"] { width:auto; height:auto; flex:0 0 clamp(170px,16vw,205px); aspect-ratio:.69; margin-left:-16px; padding:.55rem; opacity:.92; border:1px solid rgba(255,255,255,.22); border-radius:21px; background:linear-gradient(145deg,rgba(16,232,255,.34),rgba(15,18,31,.96) 28%,rgba(255,20,147,.3)); box-shadow:0 22px 55px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.12); filter:saturate(.88) brightness(.86); transform-origin:50% 50%; transition:transform .32s cubic-bezier(.2,.8,.2,1),filter .28s ease,opacity .28s ease,box-shadow .28s ease; }
.webdesign-feature-section .compact-landing .landing-card:nth-child(1) { margin-left:0; transform:rotate(-4deg); }
.webdesign-feature-section .compact-landing .landing-card:nth-child(2) { transform:translateY(-6px); }
.webdesign-feature-section .compact-landing .landing-card:nth-child(3) { transform:rotate(4deg); }
.webdesign-feature-section .compact-landing .landing-card:hover,
.webdesign-feature-section .compact-landing .landing-card:focus-visible { transform:perspective(950px) translateY(-18px) scale(1.065) rotateX(var(--rx)) rotateY(var(--ry)); opacity:1; filter:saturate(1.15) brightness(1.04); z-index:8; box-shadow:0 38px 85px rgba(0,0,0,.68),0 0 42px rgba(16,232,255,.3),0 0 64px rgba(255,20,147,.14); }
.webdesign-feature-section .compact-landing .landing-carousel-controls { display:none; }

@media (max-width:759px) {
  .webdesign-feature-section .websites-tile { width:calc(100% - 1rem); padding:.75rem; }
  .webdesign-feature-section .compact-landing .landing-carousel-track { display:grid; grid-auto-flow:column; grid-auto-columns:84%; grid-template-columns:none; justify-content:start; gap:.75rem; overflow-x:auto; padding:.35rem .2rem 1rem; }
  .webdesign-feature-section .compact-landing .landing-card,
  .webdesign-feature-section .compact-landing .landing-card.is-active { width:100%; height:auto; margin-left:0; transform:none; }
}

/* Final placement of story 01 on the photographic flipchart and papers. */
#watch { scroll-margin-top:78px; }
.watch-table-scene .watch-flipchart-copy { position:absolute; z-index:2; top:17.2%; left:25.2%; width:36.5%; margin:0; padding:clamp(.55rem,1.2vw,1rem); color:#13263a; transform:rotate(-.3deg); }
.watch-table-scene .watch-flipchart-copy .eyebrow { margin-bottom:clamp(.55rem,1vw,.85rem); color:#08758b; text-shadow:none; }
.watch-table-scene .watch-flipchart-copy h2 { max-width:none; margin:0; color:#102438; font-size:clamp(1.45rem,3vw,3.2rem); line-height:1.02; letter-spacing:-.045em; text-shadow:none; }
.watch-table-scene .watch-flipchart-copy > p:last-child { max-width:34rem; margin:clamp(.7rem,1.2vw,1.05rem) 0 0; color:#283b4c; font-size:clamp(.68rem,1vw,.96rem); font-weight:700; line-height:1.42; }
.watch-table-scene .watch-concept-papers article { position:relative; min-height:0; height:100%; padding:clamp(.65rem,1.25vw,1.15rem); overflow:hidden; border:1px solid rgba(16,78,98,.26); border-radius:5px; background:rgba(247,241,228,.95); box-shadow:0 14px 22px rgba(22,12,7,.35); color:#14283a; transform-origin:50% 100%; backface-visibility:hidden; transition:transform .6s cubic-bezier(.16,.82,.2,1),box-shadow .5s ease,filter .35s ease; }
.watch-table-scene .watch-concept-papers article:nth-child(1) { transform:perspective(1000px) rotateX(5deg) rotateZ(-2deg); }
.watch-table-scene .watch-concept-papers article:nth-child(2) { transform:perspective(1000px) rotateX(4deg); }
.watch-table-scene .watch-concept-papers article:nth-child(3) { transform:perspective(1000px) rotateX(5deg) rotateZ(2deg); }
.watch-table-scene .watch-concept-papers article:hover,
.watch-table-scene .watch-concept-papers article:focus-visible { z-index:8; outline:none; filter:brightness(1.04); box-shadow:0 48px 58px rgba(4,8,15,.62),0 0 0 2px rgba(16,232,255,.58),0 0 38px rgba(16,232,255,.18); transform:perspective(900px) translate3d(0,-88px,140px) rotateX(-2deg) rotateZ(0) scale(1.25); }
.watch-table-scene .watch-concept-papers small { color:#08758b; }
.watch-table-scene .watch-concept-papers strong { color:#102438; font-size:clamp(.8rem,1.25vw,1.05rem); }
.watch-table-scene .watch-concept-papers p { color:#425365; font-size:clamp(.62rem,.92vw,.82rem); line-height:1.4; }

@media (max-width:759px) {
  .watch-table-scene .watch-flipchart-copy { top:17%; left:18%; width:64%; padding:.35rem; }
  .watch-table-scene .watch-flipchart-copy h2 { font-size:clamp(1.15rem,5.5vw,1.65rem); }
  .watch-table-scene .watch-flipchart-copy > p:last-child { font-size:clamp(.56rem,2.2vw,.7rem); line-height:1.32; }
}

/* Story papers match the portrait-format concept sheets on the table. */
.watch-table-scene .watch-concept-papers {
  top:69.9%;
  left:0;
  display:flex;
  grid-template-columns:none;
  justify-content:space-between;
  align-items:stretch;
  gap:0;
  width:100%;
  height:19.2%;
  padding:0 4%;
  box-sizing:border-box;
  overflow:visible;
}
.watch-table-scene .watch-concept-papers article {
  flex:0 0 20%;
  width:20%;
  height:100%;
  padding:clamp(.65rem,1.15vw,1rem);
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}
.watch-table-scene .watch-concept-papers strong { margin-bottom:clamp(.45rem,.8vw,.7rem); line-height:1.18; }
.watch-table-scene .watch-concept-papers p { margin:0; }

@media (max-width:759px) {
  .watch-table-scene .watch-concept-papers { top:70.5%; height:18%; padding-inline:2.5%; }
  .watch-table-scene .watch-concept-papers article { flex-basis:28%; width:28%; padding:.42rem; }
}

/* Use the full flipchart writing area with a larger editorial hierarchy. */
.watch-table-scene .watch-flipchart-copy {
  height:33.5%;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.watch-table-scene .watch-flipchart-copy h2 {
  font-size:clamp(1.7rem,3.35vw,3.55rem);
  line-height:1.04;
}
.watch-table-scene .watch-flipchart-copy > p:last-child {
  max-width:100%;
  margin-top:clamp(1rem,1.8vw,1.65rem);
  font-size:clamp(.82rem,1.28vw,1.18rem);
  line-height:1.52;
}

@media (max-width:759px) {
  .watch-table-scene .watch-flipchart-copy { height:32%; }
  .watch-table-scene .watch-flipchart-copy h2 { font-size:clamp(1.2rem,5.8vw,1.75rem); }
  .watch-table-scene .watch-flipchart-copy > p:last-child { margin-top:.7rem; font-size:clamp(.64rem,2.45vw,.78rem); line-height:1.42; }
}

/* Three project stages live directly on the three laptop displays. */
.watch-table-scene .watch-laptop-screens {
  top:0;
  left:0;
  width:100%;
  height:100%;
  padding:0;
  display:block;
  box-sizing:border-box;
}
.watch-table-scene .watch-laptop-screens article {
  position:absolute;
  padding:clamp(.72rem,1.25vw,1.05rem);
  border:1px solid rgba(16,232,255,.26);
  border-radius:7px;
  background:linear-gradient(145deg,rgba(4,14,27,.92),rgba(8,12,27,.84));
  box-shadow:inset 0 0 22px rgba(16,232,255,.06),0 5px 12px rgba(0,0,0,.22);
  color:#f4fbff;
  transform-origin:50% 100%;
  cursor:zoom-in;
  z-index:2;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  transition:transform .48s cubic-bezier(.2,.8,.2,1),box-shadow .48s ease,border-color .3s ease;
  will-change:transform;
}
.watch-table-scene .watch-laptop-screens article:nth-child(1) { left:5%; top:72.45%; width:25.8%; height:12.3%; clip-path:polygon(1.5% 2%,97% 0,100% 96.5%,5% 100%); transform:perspective(1100px) rotateZ(-5.2deg) rotateY(1.5deg); }
.watch-table-scene .watch-laptop-screens article:nth-child(2) { left:38.55%; top:71.85%; width:24.1%; height:10.65%; clip-path:polygon(.8% 0,99.2% 0,100% 100%,0 100%); transform:none; }
.watch-table-scene .watch-laptop-screens article:nth-child(3) { left:69.7%; top:72.45%; width:25.8%; height:12.4%; clip-path:polygon(3% 0,98.5% 2%,95% 100%,0 96.5%); transform:perspective(1100px) rotateZ(5.2deg) rotateY(-1.5deg); }
.watch-table-scene .watch-laptop-screens article:hover,
.watch-table-scene .watch-laptop-screens article:focus-visible { z-index:20; clip-path:polygon(0 0,100% 0,100% 100%,0 100%); transform:perspective(850px) translate3d(0,-70px,180px) rotateX(0) rotateY(0) rotateZ(0) scale(1.38); border-color:rgba(16,232,255,.9); box-shadow:0 42px 62px rgba(2,6,14,.78),0 0 0 2px rgba(16,232,255,.78),0 0 48px rgba(16,232,255,.3); }
.watch-table-scene .watch-laptop-screens small { margin:0; color:#35dff1; font-size:clamp(.55rem,.78vw,.72rem); line-height:1; letter-spacing:.055em; }
.watch-table-scene .watch-laptop-screens strong { margin:0; color:#fff; font-size:clamp(.86rem,1.22vw,1.08rem); line-height:1.12; }
.watch-table-scene .watch-laptop-screens p { margin:0; color:#b9c9d8; font-size:clamp(.66rem,.92vw,.84rem); line-height:1.34; }
.watch-table-scene .watch-laptop-screens article:nth-child(2) { padding:clamp(.58rem,.9vw,.78rem); }
.watch-table-scene .watch-laptop-screens article:nth-child(2) small { font-size:clamp(.48rem,.65vw,.58rem); }
.watch-table-scene .watch-laptop-screens article:nth-child(2) strong { font-size:clamp(.76rem,1vw,.9rem); line-height:1.08; }
.watch-table-scene .watch-laptop-screens article:nth-child(2) p { font-size:clamp(.58rem,.76vw,.7rem); line-height:1.22; }

@media (max-width:759px) {
  .watch-table-scene .watch-laptop-screens { top:0; height:100%; padding:0; }
  .watch-table-scene .watch-laptop-screens article { padding:.3rem; }
  .watch-table-scene .watch-laptop-screens small { font-size:.42rem; }
  .watch-table-scene .watch-laptop-screens strong { font-size:clamp(.5rem,2vw,.66rem); }
  .watch-table-scene .watch-laptop-screens p { font-size:clamp(.4rem,1.55vw,.52rem); line-height:1.18; }
}

/* Correct placement: restore Webdesign, move the meeting-table scene to project story 01. */
.webdesign-feature-section {
  min-height: 0;
  padding-top: clamp(3.5rem,7vw,6.5rem);
  padding-bottom: clamp(4rem,8vw,7rem);
  overflow: visible;
  background: radial-gradient(circle at 18% 8%,rgba(16,232,255,.1),transparent 34%), radial-gradient(circle at 86% 78%,rgba(255,36,154,.09),transparent 34%), linear-gradient(180deg,#070d17,#04070d);
  isolation: auto;
}
.webdesign-feature-section::before { z-index:auto; background:linear-gradient(90deg,transparent,rgba(255,255,255,.025),transparent); }
.webdesign-feature-section .websites-tile {
  position: relative;
  inset: auto;
  width: min(1080px,calc(100% - 2rem));
  height: auto;
  margin-inline: auto;
  padding: clamp(1rem,2vw,1.5rem);
  overflow: hidden;
  border: 1px solid rgba(16,232,255,.25);
  border-radius: 27px;
  background: linear-gradient(145deg,rgba(11,18,31,.82),rgba(5,8,15,.7));
  box-shadow: 0 28px 90px rgba(0,0,0,.38), inset 0 1px rgba(255,255,255,.08);
}
.webdesign-feature-section .websites-tile::before { display:block; }
.webdesign-feature-section .websites-tile > header { position:static; width:auto; margin:0; padding:.35rem .45rem .2rem; color:inherit; transform:none; }
.webdesign-feature-section .websites-tile > header h3 { max-width:760px; margin:.25rem 0 0; color:#fff; font-size:clamp(1.55rem,3vw,2.65rem); }
.webdesign-feature-section .webdesign-reel {
  position:relative;
  top:auto;
  left:auto;
  width:100%;
  margin:.7rem 0 .65rem;
  aspect-ratio:16/9;
  border:1px solid rgba(16,232,255,.22);
  border-radius:22px;
  box-shadow:none;
  transform:none;
}
.webdesign-feature-section .compact-landing {
  position:relative;
  top:auto;
  left:auto;
  width:auto;
  height:auto;
  margin-top:.2rem;
  overflow:hidden;
  border-radius:22px;
}
.webdesign-feature-section .compact-landing .landing-carousel-track {
  display:flex;
  grid-template-columns:none;
  grid-auto-flow:initial;
  justify-content:center;
  align-items:center;
  gap:0;
  width:auto;
  height:auto;
  min-height:370px;
  padding:.75rem 1rem 1.2rem;
  overflow:visible;
}
.webdesign-feature-section .compact-landing .landing-card,
.webdesign-feature-section .compact-landing .landing-card.is-active,
.webdesign-feature-section .compact-landing .landing-card[data-pos="0"],
.webdesign-feature-section .compact-landing .landing-card[data-pos="1"],
.webdesign-feature-section .compact-landing .landing-card[data-pos="2"] {
  width:auto;
  height:auto;
  min-width:0;
  flex:0 0 clamp(170px,16vw,205px);
  aspect-ratio:.69;
  margin-left:-16px;
  padding:.55rem;
  opacity:.92;
  border:1px solid rgba(255,255,255,.22);
  border-radius:21px;
  background:linear-gradient(145deg,rgba(16,232,255,.34),rgba(15,18,31,.96) 28%,rgba(255,20,147,.3));
  box-shadow:0 22px 55px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.12);
  filter:saturate(.88) brightness(.86);
  transform-origin:50% 50%;
  transition:transform .32s cubic-bezier(.2,.8,.2,1),filter .28s ease,opacity .28s ease,box-shadow .28s ease;
}
.webdesign-feature-section .compact-landing .landing-card:nth-child(1) { margin-left:0; transform:rotate(-4deg); }
.webdesign-feature-section .compact-landing .landing-card:nth-child(2) { transform:translateY(-6px); }
.webdesign-feature-section .compact-landing .landing-card:nth-child(3) { transform:rotate(4deg); }
.webdesign-feature-section .compact-landing .landing-card:hover,
.webdesign-feature-section .compact-landing .landing-card:focus-visible { transform:perspective(950px) translateY(-18px) scale(1.065) rotateX(var(--rx)) rotateY(var(--ry)); opacity:1; filter:saturate(1.15) brightness(1.04); z-index:8; }

.production-screen { padding-top:0 !important; }
.watch-table-scene {
  position:relative;
  width:100vw;
  min-height:clamp(1080px,128vw,1420px);
  margin-left:calc(50% - 50vw);
  overflow:hidden;
  background:#101723 url("assets/generated/watch-coworking-table-cards-v9.png") center top/100% 100% no-repeat;
  isolation:isolate;
}

/* Flipchart table: four interactive pricing playing cards. */
.watch-price-cards {
  position:absolute;
  z-index:8;
  inset:0;
  pointer-events:none;
  perspective:1800px;
}
.watch-price-card {
  --card-accent:#16e8ff;
  --rest-rotate:0deg;
  --hover-x:0%;
  position:absolute;
  top:75.2%;
  width:17.2%;
  aspect-ratio: .7;
  pointer-events:auto;
  outline:none;
}
.watch-price-card:nth-child(1) { left:8.2%; --rest-rotate:-7deg; --hover-x:172%; }
.watch-price-card:nth-child(2) { left:30.2%; --rest-rotate:-2.5deg; --hover-x:56%; }
.watch-price-card:nth-child(3) { left:52.4%; --rest-rotate:3deg; --hover-x:-60%; }
.watch-price-card:nth-child(4) { left:74.4%; --rest-rotate:7deg; --hover-x:-176%; }
.watch-price-card--diamond { --card-accent:#ffd900; }
.watch-price-card--spade { --card-accent:#12e8ff; }
.watch-price-card--club { --card-accent:#11d99a; }
.watch-price-card--heart { --card-accent:#ff2095; }
.watch-price-card-stage {
  width:100%;
  height:100%;
  transform:perspective(1300px) rotateX(58deg) rotateZ(var(--rest-rotate)) scale(.9);
  transform-origin:50% 58%;
  transform-style:preserve-3d;
  transition:transform .72s cubic-bezier(.16,.82,.2,1),filter .45s ease;
  filter:drop-shadow(0 18px 14px rgba(26,10,3,.48));
}
.watch-price-card-inner {
  position:relative;
  width:100%;
  height:100%;
  transform-style:preserve-3d;
  transition:transform .72s cubic-bezier(.16,.82,.2,1);
}
.watch-price-face {
  position:absolute;
  inset:0;
  box-sizing:border-box;
  overflow:hidden;
  border:2px solid color-mix(in srgb,var(--card-accent) 74%,#ffffff 26%);
  border-radius:clamp(9px,1.15vw,18px);
  backface-visibility:hidden;
  background:
    radial-gradient(circle at 50% 38%,color-mix(in srgb,var(--card-accent) 18%,transparent),transparent 42%),
    linear-gradient(145deg,rgba(17,24,43,.98),rgba(3,7,18,.99));
  box-shadow:inset 0 0 0 4px rgba(255,255,255,.035),inset 0 0 38px rgba(0,0,0,.46),0 0 22px color-mix(in srgb,var(--card-accent) 30%,transparent);
  color:#fff;
}
.watch-price-front {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:16% 10%;
  text-align:center;
}
.watch-price-front::before {
  content:"";
  position:absolute;
  inset:8%;
  border:1px solid color-mix(in srgb,var(--card-accent) 55%,transparent);
  border-radius:inherit;
  opacity:.62;
}
.watch-price-front > i {
  position:relative;
  color:var(--card-accent);
  font:normal clamp(2.2rem,4.9vw,5rem)/1 Georgia,serif;
  filter:drop-shadow(0 0 13px var(--card-accent));
}
.watch-price-front h3 {
  position:relative;
  max-width:92%;
  margin:.45rem 0 .55rem;
  color:#fff;
  font:800 clamp(.72rem,1.3vw,1.35rem)/1.08 "Orbitron",sans-serif;
  letter-spacing:-.03em;
}
.watch-price-front > small:last-of-type {
  position:relative;
  color:#b9c9d8;
  font:700 clamp(.4rem,.56vw,.6rem)/1.2 "Orbitron",sans-serif;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.watch-card-corner {
  position:absolute;
  z-index:2;
  top:6%;
  left:8%;
  display:flex;
  flex-direction:column;
  color:var(--card-accent);
  font:800 clamp(.66rem,1.1vw,1.1rem)/.82 "Orbitron",sans-serif;
}
.watch-card-corner small { color:inherit; font:inherit; }
.watch-card-corner--bottom { inset:auto 8% 6% auto; transform:rotate(180deg); }
.watch-price-back {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  padding:10%;
  text-align:left;
  transform:rotateY(180deg);
}
.watch-price-back > small {
  margin-bottom:.45rem;
  color:var(--card-accent);
  font:800 clamp(.42rem,.62vw,.62rem)/1.2 "Orbitron",sans-serif;
  letter-spacing:.11em;
  text-transform:uppercase;
}
.watch-price-back h3 {
  margin:0;
  color:#fff;
  font:800 clamp(.78rem,1.25vw,1.3rem)/1.04 "Orbitron",sans-serif;
  letter-spacing:-.04em;
}
.watch-price-back p {
  margin:.65rem 0;
  color:#c3cfdf;
  font-size:clamp(.52rem,.72vw,.76rem);
  line-height:1.42;
}
.watch-price-back strong {
  margin-top:auto;
  color:#fff;
  font:800 clamp(.86rem,1.35vw,1.4rem)/1 "Orbitron",sans-serif;
}
.watch-price-back a {
  display:inline-flex;
  margin-top:.7rem;
  padding:.48rem .7rem;
  border:1px solid var(--card-accent);
  border-radius:999px;
  color:#fff;
  background:color-mix(in srgb,var(--card-accent) 15%,transparent);
  font:800 clamp(.42rem,.57vw,.6rem)/1 "Orbitron",sans-serif;
  text-decoration:none;
}
.watch-price-back .joker-check-action {
  position:relative;
  isolation:isolate;
  cursor:pointer;
  transition:transform .2s ease,background-color .2s ease,box-shadow .2s ease;
}
.watch-price-back .joker-check-action:hover,
.watch-price-back .joker-check-action:focus-visible {
  transform:translateY(-2px) scale(1.04);
  background:color-mix(in srgb,var(--card-accent) 28%,rgba(4,9,20,.82));
  box-shadow:0 0 20px color-mix(in srgb,var(--card-accent) 48%,transparent);
  outline:none;
}
.watch-price-card:is(:hover,:focus,:focus-within) { z-index:50; }
.watch-price-card:is(:hover,:focus,:focus-within) .watch-price-card-stage {
  transform:perspective(1300px) translate3d(var(--hover-x),-24%,180px) rotateX(0) rotateZ(0) scale(2.02);
  filter:drop-shadow(0 34px 32px rgba(1,5,15,.72)) drop-shadow(0 0 20px color-mix(in srgb,var(--card-accent) 34%,transparent));
}
.watch-price-card:is(:hover,:focus,:focus-within) .watch-price-card-inner { transform:rotateY(180deg); }

#kontakt.is-check-target > div {
  animation:joker-check-target 1.15s ease-out both;
}
@keyframes joker-check-target {
  0% { box-shadow:0 0 0 0 rgba(16,232,255,0); }
  32% { box-shadow:0 0 0 4px rgba(16,232,255,.78),0 0 52px rgba(255,24,164,.32); }
  100% { box-shadow:0 0 0 1px rgba(16,232,255,0),0 0 0 rgba(255,24,164,0); }
}

@media (max-width:680px) {
  .watch-price-card { width:34%; aspect-ratio:.7; }
  .watch-price-card:nth-child(1) { top:70%; left:8%; --rest-rotate:-6deg; --hover-x:68%; }
  .watch-price-card:nth-child(2) { top:70%; left:58%; --rest-rotate:5deg; --hover-x:-68%; }
  .watch-price-card:nth-child(3) { top:85%; left:8%; --rest-rotate:-4deg; --hover-x:68%; }
  .watch-price-card:nth-child(4) { top:85%; left:58%; --rest-rotate:6deg; --hover-x:-68%; }
  .watch-price-card:is(:hover,:focus,:focus-within) .watch-price-card-stage {
    transform:perspective(1100px) translate3d(var(--hover-x),-55%,160px) rotateX(0) rotateZ(0) scale(1.48);
  }
}

@media (prefers-reduced-motion:reduce) {
  .watch-price-card-stage,.watch-price-card-inner { transition-duration:.01ms; }
}

/* Conference table: the same four cards, dealt as an asymmetrical hand in the centre. */
.play-space-fair .conference-price-cards {
  position:relative;
  z-index:8;
  width:min(88%,940px);
  height:clamp(570px,67vw,710px);
  margin:0 auto;
  perspective:1800px;
}
.conference-price-card {
  --conf-rotate:0deg;
  --conf-hover-x:0%;
  --conf-hover-y:0%;
  position:absolute;
  width:21%;
  aspect-ratio:.7;
  outline:none;
}
.conference-price-card:nth-child(1) { left:20%; top:25%; --conf-rotate:-12deg; --conf-hover-x:93%; --conf-hover-y:15%; }
.conference-price-card:nth-child(2) { left:37%; top:17%; --conf-rotate:6deg; --conf-hover-x:12%; --conf-hover-y:34%; }
.conference-price-card:nth-child(3) { left:49%; top:34%; --conf-rotate:-5deg; --conf-hover-x:-45%; --conf-hover-y:-8%; }
.conference-price-card:nth-child(4) { left:62%; top:21%; --conf-rotate:13deg; --conf-hover-x:-107%; --conf-hover-y:25%; }
.conference-price-card .watch-price-card-stage {
  transform:perspective(1300px) rotateX(59deg) rotateZ(var(--conf-rotate)) scale(.86);
  transform-origin:50% 58%;
}
.conference-price-card:is(:hover,:focus,:focus-within) { z-index:60; }
.conference-price-card:is(:hover,:focus,:focus-within) .watch-price-card-stage {
  transform:perspective(1300px) translate3d(var(--conf-hover-x),var(--conf-hover-y),190px) rotateX(0) rotateZ(0) scale(1.88);
  filter:drop-shadow(0 36px 34px rgba(1,5,15,.76)) drop-shadow(0 0 22px color-mix(in srgb,var(--card-accent) 38%,transparent));
}
.conference-price-card:is(:hover,:focus,:focus-within) .watch-price-card-inner { transform:rotateY(180deg); }

@media (max-width:759px) {
  .play-space-fair .conference-price-cards { width:94%; height:620px; }
  .conference-price-card { width:36%; }
  .conference-price-card:nth-child(1) { left:9%; top:15%; --conf-rotate:-8deg; --conf-hover-x:64%; --conf-hover-y:32%; }
  .conference-price-card:nth-child(2) { left:55%; top:11%; --conf-rotate:7deg; --conf-hover-x:-64%; --conf-hover-y:38%; }
  .conference-price-card:nth-child(3) { left:10%; top:49%; --conf-rotate:5deg; --conf-hover-x:62%; --conf-hover-y:-28%; }
  .conference-price-card:nth-child(4) { left:54%; top:45%; --conf-rotate:-7deg; --conf-hover-x:-62%; --conf-hover-y:-20%; }
  .conference-price-card:is(:hover,:focus,:focus-within) .watch-price-card-stage {
    transform:perspective(1100px) translate3d(var(--conf-hover-x),var(--conf-hover-y),170px) rotateX(0) rotateZ(0) scale(1.48);
  }
}
.watch-table-scene::after { content:""; position:absolute; z-index:0; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(3,7,15,.12),transparent 20% 82%,rgba(3,7,15,.24)); }
.watch-flipchart-copy {
  position:absolute;
  z-index:2;
  top:17.2%;
  left:25.2%;
  width:36.5%;
  margin:0;
  padding:clamp(.55rem,1.2vw,1rem);
  color:#13263a;
  transform:rotate(-.3deg);
}
.watch-flipchart-copy .eyebrow { margin-bottom:clamp(.55rem,1vw,.85rem); color:#08758b; text-shadow:none; }
.watch-flipchart-copy h2 { max-width:none; margin:0; color:#102438; font-size:clamp(1.45rem,3vw,3.2rem); line-height:1.02; letter-spacing:-.045em; text-shadow:none; }
.watch-flipchart-copy > p:last-child { max-width:34rem; margin:clamp(.7rem,1.2vw,1.05rem) 0 0; color:#283b4c; font-size:clamp(.68rem,1vw,.96rem); font-weight:700; line-height:1.42; }
.watch-concept-papers {
  position:absolute;
  z-index:3;
  top:72.2%;
  left:1.2%;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:4.3%;
  width:97.6%;
  height:15.2%;
  margin:0;
  perspective:1200px;
}
.watch-concept-papers article {
  min-height:0;
  height:100%;
  padding:clamp(.65rem,1.25vw,1.15rem);
  overflow:hidden;
  border:1px solid rgba(16,78,98,.26);
  border-radius:5px;
  background:rgba(247,241,228,.95);
  box-shadow:0 14px 22px rgba(22,12,7,.35);
  color:#14283a;
  transform-origin:50% 100%;
  backface-visibility:hidden;
  transition:transform .6s cubic-bezier(.16,.82,.2,1),box-shadow .5s ease,filter .35s ease;
}
.watch-concept-papers article:nth-child(1) { transform:perspective(1000px) rotateX(5deg) rotateZ(-2deg); }
.watch-concept-papers article:nth-child(2) { transform:perspective(1000px) rotateX(4deg); }
.watch-concept-papers article:nth-child(3) { transform:perspective(1000px) rotateX(5deg) rotateZ(2deg); }
.watch-concept-papers article:hover,
.watch-concept-papers article:focus-visible { z-index:8; outline:none; filter:brightness(1.04); box-shadow:0 48px 58px rgba(4,8,15,.62),0 0 0 2px rgba(16,232,255,.58),0 0 38px rgba(16,232,255,.18); transform:perspective(900px) translate3d(0,-88px,140px) rotateX(-2deg) rotateZ(0) scale(1.25); }
.watch-concept-papers small { color:#08758b; }
.watch-concept-papers strong { color:#102438; font-size:clamp(.8rem,1.25vw,1.05rem); }
.watch-concept-papers p { color:#425365; font-size:clamp(.62rem,.92vw,.82rem); line-height:1.4; }
.production-screen .production-layout { margin-top:clamp(2.5rem,5vw,4.5rem); }

@media (max-width:759px) {
  .webdesign-feature-section .websites-tile { width:calc(100% - 1rem); padding:.75rem; }
  .webdesign-feature-section .compact-landing .landing-carousel-track { display:grid; grid-auto-flow:column; grid-auto-columns:84%; grid-template-columns:none; justify-content:start; gap:.75rem; overflow-x:auto; padding:.35rem .2rem 1rem; }
  .webdesign-feature-section .compact-landing .landing-card,
  .webdesign-feature-section .compact-landing .landing-card.is-active { width:100%; height:auto; margin-left:0; transform:none; }
  .watch-table-scene { min-height:1180px; background-size:auto 100%; background-position:center top; }
  .watch-flipchart-copy { top:17%; left:18%; width:64%; padding:.35rem; }
  .watch-flipchart-copy h2 { font-size:clamp(1.15rem,5.5vw,1.65rem); }
  .watch-flipchart-copy > p:last-child { font-size:clamp(.56rem,2.2vw,.7rem); line-height:1.32; }
  .watch-concept-papers { top:72%; left:1%; gap:2%; width:98%; height:15%; }
  .watch-concept-papers article { padding:.4rem; }
  .watch-concept-papers strong { font-size:clamp(.54rem,2.2vw,.72rem); }
  .watch-concept-papers p { font-size:clamp(.46rem,1.8vw,.6rem); }
}
/* Webdesign showreel directly follows the Social-Media & Web Check. */
.webdesign-feature-section {
  position: relative;
  padding-top: clamp(3.5rem, 7vw, 6.5rem);
  padding-bottom: clamp(4rem, 8vw, 7rem);
  background:
    radial-gradient(circle at 18% 8%, rgba(16, 232, 255, .1), transparent 34%),
    radial-gradient(circle at 86% 78%, rgba(255, 36, 154, .09), transparent 34%),
    linear-gradient(180deg, #070d17, #04070d);
}

.webdesign-feature-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .025), transparent);
}

.webdesign-feature-section .websites-tile {
  position: relative;
  z-index: 1;
  grid-row: auto;
  width: min(1080px, calc(100% - 2rem));
  margin-inline: auto;
  padding: clamp(1rem, 2vw, 1.5rem);
  border-color: rgba(16, 232, 255, .25);
  box-shadow: 0 28px 90px rgba(0, 0, 0, .38), inset 0 1px rgba(255, 255, 255, .08);
}

.webdesign-feature-section .websites-tile > header {
  padding: .35rem .45rem .2rem;
}

.webdesign-feature-section .websites-tile > header h3 {
  max-width: 760px;
  font-size: clamp(1.55rem, 3vw, 2.65rem);
}

/* Close the former Webdesign gap in the later showcase. */
.formats-screen .formats-bento {
  height: auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto auto;
}

.formats-screen .drone-tile,
.formats-screen .avatar-tile,
.formats-screen .content-strip,
.formats-screen .room-tile {
  grid-row: auto;
}

.formats-screen .drone-tile { grid-column: 1; }
.formats-screen .avatar-tile { grid-column: 2; }
.formats-screen .content-strip { grid-column: 1; }
.formats-screen .room-tile { grid-column: 2; }

@media (max-width: 759px) {
  .webdesign-feature-section .websites-tile {
    width: calc(100% - 1rem);
    padding: .75rem;
  }

  .formats-screen .formats-bento { grid-template-columns: 1fr; }
  .formats-screen .drone-tile,
  .formats-screen .avatar-tile,
  .formats-screen .content-strip,
  .formats-screen .room-tile { grid-column: 1; }
}

/* Karten auf den Tisch: Webdesign als echte Besprechungsszene. */
.webdesign-feature-section {
  position: relative;
  min-height: clamp(1080px, 128vw, 1420px);
  padding: 0;
  overflow: hidden;
  background: #101723 url("assets/generated/webdesign-coworking-flipchart-table-v3.optimized.webp") center top / 100% 100% no-repeat;
  isolation: isolate;
}

.webdesign-feature-section::before {
  z-index: 0;
  background:
    linear-gradient(180deg, rgba(3, 7, 15, .15), transparent 20% 76%, rgba(3, 7, 15, .28)),
    linear-gradient(90deg, rgba(3, 7, 15, .14), transparent 24% 76%, rgba(3, 7, 15, .12));
}

.webdesign-feature-section .websites-tile {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.webdesign-feature-section .websites-tile::before { display: none; }

.webdesign-feature-section .websites-tile > .webdesign-flipchart-copy {
  position: absolute;
  z-index: 3;
  top: 17.4%;
  left: 25.2%;
  width: 36.5%;
  margin: 0;
  padding: clamp(.55rem, 1.2vw, 1rem);
  color: #13263a;
  text-align: left;
  transform: rotate(-.35deg);
}

.webdesign-flipchart-copy span {
  display: inline-block;
  margin-bottom: clamp(.65rem, 1.2vw, 1rem);
  color: #0a7085;
  font: 900 clamp(.58rem, .85vw, .78rem)/1.2 Inter, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.webdesign-feature-section .webdesign-flipchart-copy h2,
.webdesign-feature-section .webdesign-flipchart-copy h3 {
  max-width: none;
  margin: 0;
  color: #102438;
  font-family: "Orbitron", Inter, sans-serif;
  letter-spacing: -.045em;
  text-shadow: none;
}

.webdesign-feature-section .webdesign-flipchart-copy h2 {
  font-size: clamp(1.7rem, 3.5vw, 3.7rem);
  line-height: .98;
}

.webdesign-feature-section .webdesign-flipchart-copy h3 {
  margin-top: .25em;
  color: #de177b;
  font-size: clamp(1.25rem, 2.55vw, 2.7rem);
  line-height: 1.02;
}

.webdesign-flipchart-copy p {
  max-width: 34rem;
  margin: clamp(.75rem, 1.4vw, 1.25rem) 0 0;
  color: #26394a;
  font: 700 clamp(.7rem, 1.05vw, 1rem)/1.45 Inter, sans-serif;
}

.webdesign-feature-section .webdesign-reel {
  position: absolute;
  z-index: 4;
  top: 58.7%;
  left: 34%;
  width: 32%;
  margin: 0;
  aspect-ratio: 16 / 7.3;
  border: 2px solid rgba(158, 239, 247, .68);
  border-radius: 12px;
  box-shadow: 0 16px 34px rgba(0, 0, 0, .48), 0 0 24px rgba(16, 232, 255, .12);
  transform: perspective(900px) rotateX(4deg) rotateZ(-.5deg);
}

.webdesign-feature-section .webdesign-reel-copy {
  left: .8rem;
  right: 3.6rem;
  bottom: .6rem;
}

.webdesign-feature-section .webdesign-reel-copy strong { font-size: clamp(.85rem, 1.6vw, 1.35rem); }
.webdesign-feature-section .webdesign-reel-copy small,
.webdesign-feature-section .webdesign-reel-copy em { font-size: clamp(.46rem, .62vw, .62rem); }
.webdesign-feature-section .webdesign-reel-play { right: .65rem; bottom: .65rem; width: 2.2rem; height: 2.2rem; }

.webdesign-feature-section .compact-landing {
  position: absolute;
  z-index: 5;
  top: 69.6%;
  left: 0;
  width: 100%;
  height: 17.5%;
  margin: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.webdesign-feature-section .compact-landing .landing-carousel-track {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 3.4%;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0 2.1%;
  overflow: visible;
  transform: none !important;
}

.webdesign-feature-section .compact-landing .landing-card,
.webdesign-feature-section .compact-landing .landing-card.is-active {
  width: 100%;
  height: 100%;
  min-width: 0;
  margin: 0;
  padding: .32rem;
  opacity: .96;
  border: 1px solid rgba(255, 255, 255, .62);
  border-radius: 5px;
  background: #e9dfcc;
  box-shadow: 0 13px 20px rgba(14, 10, 8, .42);
  filter: saturate(.92) contrast(.97);
  transform: none;
  transition: transform .35s ease, filter .35s ease, box-shadow .35s ease;
}

.webdesign-feature-section .compact-landing .landing-card:nth-child(1) { transform: perspective(1100px) rotateX(4deg) rotateZ(-2.1deg); }
.webdesign-feature-section .compact-landing .landing-card:nth-child(2) { transform: perspective(1100px) rotateX(3deg) rotateZ(.25deg); }
.webdesign-feature-section .compact-landing .landing-card:nth-child(3) { transform: perspective(1100px) rotateX(4deg) rotateZ(2deg); }

.webdesign-feature-section .compact-landing .landing-card:hover,
.webdesign-feature-section .compact-landing .landing-card:focus-visible {
  z-index: 4;
  filter: saturate(1.05) brightness(1.06);
  box-shadow: 0 24px 38px rgba(6, 8, 14, .55), 0 0 0 2px rgba(16, 232, 255, .55);
  transform: perspective(1100px) translateY(-15px) rotateX(0) rotateZ(0) scale(1.045);
}

.webdesign-feature-section .compact-landing .landing-browser { border-radius: 3px 3px 0 0; }
.webdesign-feature-section .compact-landing .landing-card img { border-radius: 0 0 3px 3px; }
.webdesign-feature-section .compact-landing .landing-carousel-controls { display: none; }

@media (max-width: 759px) {
  .webdesign-feature-section {
    min-height: 1180px;
    background-size: auto 100%;
    background-position: center top;
  }

  .webdesign-feature-section .websites-tile { width: 100%; padding: 0; }
  .webdesign-feature-section .websites-tile > .webdesign-flipchart-copy {
    top: 17%;
    left: 18%;
    width: 64%;
    padding: .35rem;
  }

  .webdesign-feature-section .webdesign-flipchart-copy h2 { font-size: clamp(1.35rem, 7.1vw, 2rem); }
  .webdesign-feature-section .webdesign-flipchart-copy h3 { font-size: clamp(1.05rem, 5.4vw, 1.55rem); }
  .webdesign-flipchart-copy p { font-size: clamp(.6rem, 2.45vw, .76rem); line-height: 1.35; }
  .webdesign-flipchart-copy span { font-size: .53rem; margin-bottom: .45rem; }

  .webdesign-feature-section .webdesign-reel {
    top: 59.5%;
    left: 27%;
    width: 46%;
  }

  .webdesign-feature-section .compact-landing { top: 70.5%; height: 16%; }
  .webdesign-feature-section .compact-landing .landing-carousel-track { gap: 2.2%; padding-inline: 1%; }
  .webdesign-feature-section .compact-landing .landing-card,
  .webdesign-feature-section .compact-landing .landing-card.is-active { padding: .14rem; }
  .webdesign-feature-section .compact-landing .landing-card-copy { padding: .35rem; }
  .webdesign-feature-section .compact-landing .landing-card-copy small,
  .webdesign-feature-section .compact-landing .landing-card-copy em { display: none; }
  .webdesign-feature-section .compact-landing .landing-card-copy strong { font-size: clamp(.54rem, 2.4vw, .8rem); }
  .webdesign-feature-section .compact-landing .landing-browser { height: 16px; padding-inline: 4px; }
  .webdesign-feature-section .compact-landing .landing-browser b { display: none; }
}
/* Unified photographic material and precise lower-table alignment. */
@media (min-width: 760px) {
  .play-space-fair .starter-deck article:nth-child(2) .price-chip-face {
    transform: perspective(1050px) translate3d(-40px, 76px, 0) rotateX(62deg) rotateZ(78deg) scale(.62);
  }

  .play-space-fair .starter-deck article:nth-child(3) .price-chip-face {
    transform: perspective(1050px) translate3d(0, -3px, 0) rotateX(54deg) rotateZ(-77deg) scale(.90);
    filter: brightness(.82) saturate(.72) drop-shadow(6px 12px 8px rgba(0, 0, 0, .4));
    border-color: rgba(103, 181, 187, .56);
  }

  .play-space-fair .starter-deck article:nth-child(4) .price-chip-face {
    transform: perspective(1050px) translate3d(10px, 8px, 0) rotateX(54deg) rotateZ(9deg) scale(.92);
    filter: brightness(.82) saturate(.72) drop-shadow(6px 12px 8px rgba(0, 0, 0, .4));
    border-color: rgba(156, 77, 125, .54);
  }

  .play-space-fair .starter-deck article:nth-child(n + 3)::before {
    opacity: .54;
    filter: blur(12px);
    transform: translate(6px, 18px) scaleX(.76);
  }

  .play-space-fair .starter-deck article:hover .price-chip-face,
  .play-space-fair .starter-deck article:focus-within .price-chip-face {
    transform: perspective(1050px) rotateX(0) rotateZ(0) translate3d(0, -45px, 105px) scale(1.06);
    filter: brightness(1.04) saturate(1.08) drop-shadow(0 24px 18px rgba(0, 0, 0, .42));
    border-color: rgba(164, 246, 251, .95);
  }
}
/* Precision pass: rear chips clear the glasses and sit inside the table inlays. */
@media (min-width: 760px) {
  .play-space-fair .starter-deck article:nth-child(1) .price-chip-face {
    transform: perspective(1050px) translate3d(20px, 82px, 0) rotateX(62deg) rotateZ(-7deg) scale(.68);
    filter: brightness(.76) saturate(.6) drop-shadow(5px 8px 6px rgba(0, 0, 0, .38));
    border-color: rgba(101, 164, 170, .44);
  }

  .play-space-fair .starter-deck article:nth-child(2) .price-chip-face {
    transform: perspective(1050px) translate3d(-40px, 80px, 0) rotateX(62deg) rotateZ(78deg) scale(.58);
    filter: brightness(.76) saturate(.6) drop-shadow(5px 8px 6px rgba(0, 0, 0, .38));
    border-color: rgba(145, 72, 116, .42);
  }

  .play-space-fair .starter-deck article:nth-child(-n + 2)::before {
    bottom: 8%;
    height: 20px;
    opacity: .42;
    filter: blur(10px);
    transform: translate(5px, 12px) scaleX(.62);
  }

  .play-space-fair .starter-deck article:hover .price-chip-face,
  .play-space-fair .starter-deck article:focus-within .price-chip-face {
    transform: perspective(1050px) rotateX(0) rotateZ(0) translate3d(0, -45px, 105px) scale(1.06);
    filter: brightness(1.04) saturate(1.08) drop-shadow(0 24px 18px rgba(0, 0, 0, .42));
    border-color: rgba(164, 246, 251, .95);
  }
}
/* Rear stacks: placed entirely inside the two free table zones. */
@media (min-width: 760px) {
  .play-space-fair .starter-deck article:nth-child(1) .price-chip-face {
    transform: perspective(1050px) translate3d(20px, 30px, 0) rotateX(61deg) rotateZ(-8deg) scale(.74);
    filter: brightness(.79) saturate(.68) drop-shadow(0 9px 7px rgba(0, 0, 0, .36));
    border-color: rgba(112, 184, 190, .52);
  }

  .play-space-fair .starter-deck article:nth-child(2) .price-chip-face {
    transform: perspective(1050px) translate3d(-40px, 29px, 0) rotateX(61deg) rotateZ(79deg) scale(.66);
    filter: brightness(.79) saturate(.68) drop-shadow(0 9px 7px rgba(0, 0, 0, .36));
    border-color: rgba(161, 79, 128, .48);
  }

  .play-space-fair .starter-deck article:nth-child(-n + 2)::before {
    bottom: 24%;
    height: 24px;
    opacity: .48;
    filter: blur(11px);
    transform: translateY(20px) scaleX(.68);
  }

  .play-space-fair .starter-deck article:hover .price-chip-face,
  .play-space-fair .starter-deck article:focus-within .price-chip-face {
    transform: perspective(1050px) rotateX(0) rotateZ(0) translate3d(0, -45px, 105px) scale(1.06);
    filter: brightness(1.04) saturate(1.08) drop-shadow(0 24px 18px rgba(0, 0, 0, .42));
    border-color: rgba(164, 246, 251, .95);
  }
}
/* Final table-plane geometry: all stacks share the photographic vanishing line. */
@media (min-width: 760px) {
  .play-space-fair .starter-deck article:nth-child(1) .price-chip-face {
    transform: perspective(1050px) translate3d(13px, 14px, 0) rotateX(58deg) rotateZ(-11deg) scale(.86);
  }

  .play-space-fair .starter-deck article:nth-child(2) .price-chip-face {
    transform: perspective(1050px) translate3d(-18px, 9px, 0) rotateX(58deg) rotateZ(82deg) scale(.82);
  }

  .play-space-fair .starter-deck article:nth-child(3) .price-chip-face {
    transform: perspective(1050px) translate3d(4px, -3px, 0) rotateX(54deg) rotateZ(-77deg) scale(.94);
  }

  .play-space-fair .starter-deck article:nth-child(4) .price-chip-face {
    transform: perspective(1050px) translate3d(-7px, 8px, 0) rotateX(54deg) rotateZ(9deg) scale(.98);
  }

  .play-space-fair .starter-deck article:hover .price-chip-face,
  .play-space-fair .starter-deck article:focus-within .price-chip-face {
    transform: perspective(1050px) rotateX(0) rotateZ(0) translate3d(0, -45px, 105px) scale(1.06);
  }
}
:root {
  color-scheme: dark;
  --bg: #03050a;
  --panel: rgba(10, 15, 28, 0.72);
  --panel-strong: rgba(14, 20, 36, 0.92);
  --line: rgba(132, 231, 255, 0.18);
  --line-hot: rgba(255, 55, 173, 0.32);
  --text: #f4f8ff;
  --muted: #a9b6ca;
  --cyan: #10e8ff;
  --blue: #168dff;
  --pink: #ff1493;
  --gold: #f2d38b;
  --radius: 28px;
  --max: 1180px;
  --shadow-cyan: 0 0 32px rgba(16, 232, 255, .24);
  --shadow-pink: 0 0 34px rgba(255, 20, 147, .26);
  font-family: "Orbitron", Inter, ui-sans-serif, system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body { margin: 0; background: radial-gradient(circle at 18% -8%, rgba(16, 232, 255, .13), transparent 30rem), radial-gradient(circle at 92% 0%, rgba(255, 20, 147, .10), transparent 30rem), linear-gradient(180deg, #040711 0%, #03050a 42%, #010205 100%); color: var(--text); overflow-x: hidden; }
.site-test-banner { position: relative; z-index: 70; display: grid; place-items: center; min-height: clamp(72px, 12vw, 132px); padding: .8rem 1rem; color: #fff; font: 900 clamp(3.2rem, 10vw, 8rem)/.9 "Orbitron", ui-sans-serif, sans-serif; letter-spacing: .02em; text-transform: uppercase; text-align: center; background: linear-gradient(115deg, rgba(22,221,255,.24), rgba(255,24,164,.2) 56%, rgba(152,91,255,.2)), #030714; border-bottom: 1px solid rgba(22,221,255,.26); box-shadow: 0 0 34px rgba(22,221,255,.16), inset 0 -1px rgba(255,255,255,.08); text-shadow: 0 0 24px rgba(22,221,255,.72), 0 0 42px rgba(255,24,164,.45); }
a { color: inherit; text-decoration: none; }
img, video { max-width: 100%; display: block; }
.noise { position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .035; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.6' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E"); }
.particle-field { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; opacity: .55; }
.particle-field i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: rgba(16,232,255,.8); box-shadow: 0 0 16px rgba(16,232,255,.65); animation: particle-drift 18s linear infinite; }
.particle-field i:nth-child(2n) { background: rgba(255,20,147,.75); box-shadow: 0 0 16px rgba(255,20,147,.45); }
.particle-field i:nth-child(1) { left: 8%; top: 86%; animation-duration: 21s; }
.particle-field i:nth-child(2) { left: 18%; top: 72%; animation-duration: 17s; animation-delay: -5s; }
.particle-field i:nth-child(3) { left: 31%; top: 92%; animation-duration: 23s; animation-delay: -9s; }
.particle-field i:nth-child(4) { left: 42%; top: 80%; animation-duration: 19s; animation-delay: -2s; }
.particle-field i:nth-child(5) { left: 56%; top: 88%; animation-duration: 24s; animation-delay: -12s; }
.particle-field i:nth-child(6) { left: 70%; top: 70%; animation-duration: 18s; animation-delay: -7s; }
.particle-field i:nth-child(7) { left: 83%; top: 91%; animation-duration: 22s; animation-delay: -14s; }
.particle-field i:nth-child(8) { left: 94%; top: 78%; animation-duration: 20s; animation-delay: -3s; }
.particle-field i:nth-child(9) { left: 12%; top: 54%; animation-duration: 26s; animation-delay: -15s; }
.particle-field i:nth-child(10) { left: 38%; top: 62%; animation-duration: 19s; animation-delay: -8s; }
.particle-field i:nth-child(11) { left: 62%; top: 58%; animation-duration: 23s; animation-delay: -10s; }
.particle-field i:nth-child(12) { left: 88%; top: 48%; animation-duration: 27s; animation-delay: -6s; }
.aurora { position: fixed; width: 36rem; height: 36rem; border-radius: 999px; filter: blur(88px); opacity: .11; pointer-events: none; z-index: 0; animation: drift 14s ease-in-out infinite alternate; }
.aurora-a { background: var(--cyan); left: -14rem; top: 35%; }
.aurora-b { background: var(--pink); right: -16rem; top: 8%; animation-delay: -5s; }
.site-header { --scroll-progress: 0%; position: sticky; top: 0; z-index: 50; display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 1rem; padding: .75rem clamp(1rem, 4vw, 2rem); border-bottom: 1px solid rgba(255,255,255,.06); background: rgba(3,5,10,.76); backdrop-filter: blur(22px) saturate(125%); transition: padding .42s cubic-bezier(.22,1,.36,1), background .42s ease, border-color .42s ease, box-shadow .42s ease; }
.site-header.is-scrolled { padding-top: .5rem; padding-bottom: .5rem; background: rgba(3,5,10,.9); border-bottom-color: rgba(16,232,255,.2); box-shadow: 0 12px 42px rgba(0,0,0,.34), 0 1px 18px rgba(16,232,255,.06); }
.brand { display: flex; align-items: center; gap: .72rem; min-width: 0; }
.brand img { width: 64px; height: 64px; object-fit: contain; border-radius: 14px; border: 1px solid rgba(16,232,255,.18); box-shadow: 0 0 28px rgba(16,232,255,.24), 0 0 26px rgba(255,20,147,.18); transition: width .42s cubic-bezier(.22,1,.36,1), height .42s cubic-bezier(.22,1,.36,1), border-radius .42s ease, filter .42s ease; }
.site-header.is-scrolled .brand img { width: 52px; height: 52px; border-radius: 12px; filter: saturate(1.08) brightness(1.05); }
.brand-copy { display: grid; line-height: 1.05; }
.brand-copy strong { letter-spacing: .02em; }
.brand-copy small { color: var(--muted); font-size: .72rem; margin-top: .18rem; white-space: nowrap; }
.brand-line { justify-self: start; color: #f8fbff; font-weight: 800; font-size: .78rem; letter-spacing: .02em; }
.brand-line span { color: var(--cyan); margin: 0 .35rem; }
.nav { position: relative; display: none; align-items: center; gap: 1rem; color: var(--muted); font-size: .74rem; justify-self: end; padding: .62rem .15rem; }
.nav a { position: relative; z-index: 2; transition: color .38s ease, text-shadow .38s ease, transform .38s cubic-bezier(.22,1,.36,1); }
.nav a:hover { color: #fff; transform: translateY(-2px); text-shadow: 0 0 16px rgba(16,232,255,.5); }
.nav a.is-active { color: #fff; text-shadow: 0 0 14px rgba(16,232,255,.7); }
.nav a.is-active::before { content: ""; position: absolute; left: 50%; top: -.5rem; width: 4px; height: 4px; translate: -50% 0; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px var(--cyan), 0 0 20px rgba(16,232,255,.75); animation: nav-active-pulse 2.2s ease-in-out infinite; }
.nav-indicator { position: absolute; z-index: 1; left: 0; bottom: .12rem; width: var(--indicator-width,0px); height: 2px; translate: var(--indicator-x,0px) 0; border-radius: 99px; opacity: var(--indicator-opacity,0); background: linear-gradient(90deg,var(--cyan),#8bdcff 50%,var(--pink)); box-shadow: 0 0 12px rgba(16,232,255,.72), 0 0 18px rgba(255,20,147,.35); transition: width .52s cubic-bezier(.22,1,.36,1), translate .52s cubic-bezier(.22,1,.36,1), opacity .3s ease; }
.header-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; overflow: hidden; pointer-events: none; }
.header-progress i { display: block; width: var(--scroll-progress); height: 100%; background: linear-gradient(90deg,var(--cyan),var(--pink)); box-shadow: 0 0 12px rgba(16,232,255,.85); transition: width .12s linear; }
.header-cta { padding: .72rem 1rem; border: 1px solid rgba(16,232,255,.28); border-radius: 999px; font-weight: 800; font-size: .82rem; background: rgba(16,232,255,.08); box-shadow: var(--shadow-cyan); transition: transform .3s ease, background .3s ease, border-color .3s ease; }
.header-cta:hover { transform: translateY(-2px); background: rgba(16,232,255,.14); border-color: rgba(16,232,255,.58); }
.section-pad { position: relative; z-index: 1; padding: clamp(4rem, 9vw, 8rem) clamp(1rem, 4vw, 2rem); max-width: var(--max); margin: 0 auto; }
.hero { position: relative; isolation: isolate; overflow: hidden; min-height: calc(100svh - 77px); max-width: none; margin: 0; display: flex; align-items: center; padding: clamp(3.25rem, 6vh, 5rem) max(1rem, calc((100vw - var(--max)) / 2)); }
.hero::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(2,4,9,.97) 0%, rgba(2,4,9,.88) 31%, rgba(2,4,9,.43) 57%, rgba(2,4,9,.25) 76%, rgba(2,4,9,.48) 100%), linear-gradient(0deg, rgba(1,2,5,.88) 0%, transparent 24%, rgba(1,2,5,.24) 70%, rgba(1,2,5,.66) 100%); }
.hero-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #020409; }
.hero-intro .hero-media::after { content:""; position:absolute; z-index:1; left:clamp(62%,68vw,72%); top:50%; width:clamp(150px,18vw,300px); aspect-ratio:.74; translate:-50% -50%; border-radius:clamp(18px,2vw,34px); pointer-events:none; background:radial-gradient(ellipse at 50% 45%,rgba(255,255,255,.2) 0%,rgba(16,232,255,.2) 34%,rgba(255,24,164,.16) 56%,transparent 78%); mix-blend-mode:screen; opacity:.5; filter:blur(13px) saturate(1.2); transform:translate3d(0,0,0); animation:hero-logo-card-glow 4.8s ease-in-out infinite; }
.hero-media video { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; filter: brightness(.78) saturate(.9) contrast(1.08); }
.hero-media img { position:relative; z-index:0; width:100%; height:100%; max-width:none; object-fit:cover; object-position:center; filter:brightness(.82) saturate(1.08) contrast(1.06); }
.hero-copy { position: relative; z-index: 2; width: min(100%, 690px); }
.hero-copy h1, .hero-copy .lead { text-shadow: 0 3px 28px rgba(0,0,0,.9); }
.hero-film-label { position: absolute; z-index: 2; right: max(1rem, calc((100vw - var(--max)) / 2)); bottom: 1.35rem; display: flex; align-items: center; gap: .55rem; color: rgba(229,240,255,.62); font-size: .66rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.hero-film-label span { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 14px rgba(16,232,255,.9); animation: hero-pulse 2.4s ease-in-out infinite; }
.eyebrow { margin: 0 0 1rem; color: var(--cyan); text-transform: uppercase; letter-spacing: .16em; font-size: .74rem; font-weight: 800; text-shadow: 0 0 18px rgba(16,232,255,.55); }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(3.2rem, 14vw, 7.8rem); line-height: .9; letter-spacing: -.08em; max-width: 10ch; margin-bottom: 1.35rem; }
h1 span { display: block; color: transparent; background: linear-gradient(105deg, #fff 10%, #c9f9ff 45%, #ffb5e2 88%); -webkit-background-clip: text; background-clip: text; }
h2 { font-size: clamp(2.15rem, 8vw, 5rem); line-height: .95; letter-spacing: -.06em; margin-bottom: 1rem; }
h3 { font-size: 1.35rem; letter-spacing: -.03em; }
.lead { color: #d5deec; font-size: clamp(1.05rem, 2.4vw, 1.28rem); line-height: 1.65; max-width: 680px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .85rem; margin: 2rem 0; }
.btn { display: inline-flex; justify-content: center; align-items: center; min-height: 48px; padding: .92rem 1.35rem; border-radius: 11px; font-weight: 900; font-size: .86rem; letter-spacing: .08em; text-transform: uppercase; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.btn:hover { transform: translateY(-2px); }
.btn.primary { background: var(--pink); color: white; box-shadow: 0 0 24px rgba(255,20,147,.46), 0 12px 34px rgba(255,20,147,.24); }
.btn.ghost { border: 1px solid rgba(16,232,255,.38); background: rgba(8, 20, 32, .55); color: #dce8ff; box-shadow: 0 0 18px rgba(16,232,255,.14); }
.trust-row { display: flex; flex-wrap: wrap; gap: .6rem; color: var(--muted); }
.trust-row span { border: 1px solid rgba(255,255,255,.09); background: rgba(255,255,255,.035); padding: .5rem .75rem; border-radius: 999px; font-size: .85rem; }
.hero-stage { position: relative; min-height: 560px; perspective: 1400px; }
.show-card { position: absolute; left: 50%; top: 50%; border: 1px solid var(--line); background: linear-gradient(145deg, rgba(12,18,32,.92), rgba(6,8,16,.8)); border-radius: 30px; padding: 1rem; box-shadow: var(--shadow-cyan), inset 0 1px rgba(255,255,255,.08); overflow: hidden; cursor: pointer; outline: none; transition: transform .7s cubic-bezier(.2,.8,.2,1), z-index .2s, filter .45s ease, opacity .45s ease, border-color .25s ease; }
.show-card:hover, .show-card:focus-visible, .show-card.is-active { z-index: 30 !important; filter: brightness(1.08); border-color: rgba(16,232,255,.48); }
.show-card:focus-visible { box-shadow: var(--shadow-cyan), 0 0 0 3px rgba(16,232,255,.22), inset 0 1px rgba(255,255,255,.08); }
.show-card::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, rgba(16,232,255,.55), transparent 42%, rgba(255,20,147,.55)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.card-video { width: min(86vw, 430px); height: 318px; }
.card-brand { width: min(72vw, 340px); height: 235px; }
.card-social { width: 198px; height: 306px; }
.card-model { width: 250px; height: 224px; }
.show-card[data-pos="0"] { z-index: 12; opacity: 1; transform: translate(-50%, -52%) translate3d(34px, -20px, 180px) rotateY(-5deg) rotateZ(-1deg) scale(1.03); }
.show-card[data-pos="1"] { z-index: 9; opacity: .82; transform: translate(-50%, -50%) translate3d(-96px, 98px, 70px) rotateY(8deg) rotateZ(2deg) scale(.92); }
.show-card[data-pos="2"] { z-index: 7; opacity: .72; transform: translate(-50%, -50%) translate3d(130px, 132px, 20px) rotateY(-9deg) rotateZ(-3deg) scale(.82); }
.show-card[data-pos="3"] { z-index: 5; opacity: .62; transform: translate(-50%, -50%) translate3d(-132px, -112px, -30px) rotateY(12deg) rotateZ(3deg) scale(.76); }
.show-card[data-pos="0"]::after { box-shadow: 0 0 70px rgba(16,232,255,.28); }
.card-top { display: flex; justify-content: space-between; color: var(--muted); font-size: .76rem; text-transform: uppercase; letter-spacing: .08em; position: relative; z-index: 3; }
.show-card p { position: absolute; z-index: 4; bottom: 1rem; left: 1rem; right: 1rem; color: #eaf9ff; font-weight: 900; text-shadow: 0 2px 12px rgba(0,0,0,.9); }
.has-media video { position: absolute; inset: 2.7rem .85rem 3.2rem; width: calc(100% - 1.7rem); height: calc(100% - 5.9rem); object-fit: cover; border-radius: 22px; filter: saturate(1.06) contrast(1.04); }
.card-3d model-viewer { position: absolute; inset: 2.5rem .75rem 3.2rem; width: calc(100% - 1.5rem); height: calc(100% - 5.7rem); border-radius: 22px; background: radial-gradient(circle at 50% 50%, rgba(16,232,255,.16), transparent 65%); }
.has-media::after { content: ""; position: absolute; inset: 2.7rem .85rem 3.2rem; border-radius: 22px; background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.5)); pointer-events: none; }
.brand-board { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin-top: 2.4rem; }
.brand-board i { height: 56px; border-radius: 16px; background: linear-gradient(135deg, rgba(16,232,255,.7), rgba(255,20,147,.45)); }
.brand-board i:nth-child(2) { background: rgba(255,255,255,.9); }
.brand-board i:nth-child(3) { background: rgba(242,211,139,.8); }
.brand-board i:nth-child(4) { background: rgba(22,141,255,.55); }
.phone { width: 108px; height: 210px; border: 7px solid rgba(255,255,255,.16); border-radius: 28px; margin: 1rem auto; background: linear-gradient(180deg, rgba(16,232,255,.2), rgba(255,20,147,.24)); padding: .7rem; }
.phone div { height: 90px; border-radius: 18px; background: linear-gradient(135deg, #0ff, #168dff, #ff1493); animation: hue 4s linear infinite; }
.phone span { display: block; height: 10px; border-radius: 99px; background: rgba(255,255,255,.4); margin-top: .8rem; }
.wire-cube, .mesh-object { width: 104px; height: 104px; margin: 2.4rem auto 0; background: conic-gradient(from 45deg, var(--cyan), var(--blue), var(--pink), var(--cyan)); clip-path: polygon(50% 0, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%); filter: drop-shadow(0 0 24px rgba(16,232,255,.55)); animation: spin 9s linear infinite; }
.output-strip { position: relative; z-index: 2; max-width: var(--max); margin: 0 auto; padding: 1rem; border-block: 1px solid rgba(255,255,255,.08); display: grid; gap: .8rem; }
.output-strip p { color: var(--muted); margin: 0; }
.marquee { display: flex; gap: .65rem; overflow-x: auto; scrollbar-width: none; }
.marquee span { flex: 0 0 auto; padding: .7rem 1rem; border-radius: 999px; color: #eafcff; background: rgba(255,255,255,.045); border: 1px solid rgba(16,232,255,.14); }
.section-heading { max-width: 900px; margin-bottom: 2rem; }
.section-heading p:not(.eyebrow) { color: var(--muted); font-size: 1.05rem; line-height: 1.7; }
.service-stage-section { padding-top: clamp(4.5rem, 8vw, 7rem); }
.service-stage-section .section-heading { max-width: 970px; }
.service-stage-section .section-heading h2 { max-width: 18ch; font-size: clamp(2.4rem, 5.2vw, 4.2rem); }
.service-stage-section .section-heading p { max-width: 680px; font-size: clamp(.88rem, 1.35vw, 1rem); line-height: 1.6; }
.service-stage { position: relative; display: grid; gap: clamp(2rem, 6vw, 5.5rem); align-items: center; min-height: 650px; padding: clamp(.5rem, 1vw, 1rem) 0; background: transparent; overflow: visible; }
.service-stage::before { content: ""; position: absolute; z-index: -1; width: min(58vw,720px); height: min(58vw,720px); left: -24%; top: 50%; translate: 0 -50%; border-radius: 50%; background: radial-gradient(circle, rgba(16,232,255,.11), rgba(16,232,255,.025) 42%, transparent 70%); filter: blur(20px); pointer-events: none; }
.service-stage::after { content: ""; position: absolute; z-index: -1; width: min(48vw,620px); height: min(48vw,620px); right: -18%; top: 42%; translate: 0 -50%; border-radius: 50%; background: radial-gradient(circle, rgba(255,20,147,.09), rgba(255,20,147,.018) 45%, transparent 72%); filter: blur(28px); pointer-events: none; }
.service-deck-column { min-width: 0; }
.service-deck { position: relative; width: min(100%, 540px); min-height: 560px; margin-inline: auto; perspective: 1500px; transform-style: preserve-3d; }
.service-choice { --active-transform: translate(-50%,-50%) translate3d(-62px,0,170px) rotateY(5deg) rotateZ(-1.5deg) scale(1); --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%; position: absolute; left: 50%; top: 50%; width: clamp(280px, 30vw, 350px); aspect-ratio: .72; padding: 0; border: 1px solid rgba(255,255,255,.2); border-radius: 30px; overflow: hidden; color: white; cursor: pointer; text-align: left; background: #080c16; box-shadow: 0 28px 85px rgba(0,0,0,.64), inset 0 1px rgba(255,255,255,.12); transform-style: preserve-3d; will-change: transform, opacity, filter; transition: transform .56s cubic-bezier(.22,1,.36,1), opacity .48s ease, filter .48s ease, border-color .28s ease, box-shadow .34s ease; }
.service-choice img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.92) contrast(1.04); }
.service-card-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(2,5,12,.08) 22%, rgba(2,5,12,.38) 54%, rgba(2,5,12,.98) 100%), linear-gradient(125deg, rgba(16,232,255,.16), transparent 42%, rgba(255,20,147,.14)); pointer-events: none; }
.service-choice::after { content: ""; position: absolute; z-index: 3; inset: 0; border-radius: inherit; background: radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,.72), rgba(16,232,255,.24) 18%, rgba(255,20,147,.14) 35%, transparent 60%), linear-gradient(115deg, transparent 20%, rgba(255,255,255,.36) 45%, transparent 70%); mix-blend-mode: screen; opacity: 0; pointer-events: none; transition: opacity .28s ease; }
.service-choice:hover { border-color: rgba(16,232,255,.72); box-shadow: 0 38px 90px rgba(0,0,0,.68), 0 0 42px rgba(16,232,255,.3), 0 0 64px rgba(255,20,147,.14), inset 0 1px rgba(255,255,255,.16); }
.service-choice:hover::after, .service-choice:focus-visible::after { opacity: .72; }
.service-choice:hover img { filter: saturate(1.04) contrast(1.07) brightness(1.05); }
.service-choice img { transition: filter .45s ease, scale .7s cubic-bezier(.22,1,.36,1); }
.service-choice:hover img { scale: 1.035; }
.service-card-meta { position: absolute; z-index: 2; inset: auto 1.15rem 1.15rem; display: grid; gap: .32rem; }
.service-card-meta small { color: var(--cyan); font-size: .64rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.service-card-meta strong { color: #fff; font-size: clamp(2.1rem, 5vw, 3.25rem); line-height: .92; letter-spacing: -.06em; }
.service-card-meta em { color: #cad5e5; font-size: .86rem; font-style: normal; }
.playing-corner { position: absolute; z-index: 5; display: grid; place-items: center; min-width: 42px; padding: .38rem .3rem; border: 1px solid rgba(255,255,255,.19); border-radius: 13px; color: #dffcff; background: rgba(2,7,15,.72); box-shadow: inset 0 1px rgba(255,255,255,.12), 0 0 22px rgba(16,232,255,.16); backdrop-filter: blur(10px); font-family: Georgia,"Times New Roman",serif; line-height: .82; text-shadow: 0 0 12px rgba(16,232,255,.5); pointer-events: none; }
.playing-corner b { font-size: 1.2rem; font-weight: 800; }
.playing-corner i { margin-top: .25rem; font-size: .9rem; font-style: normal; }
.playing-corner-top { left: .82rem; top: .82rem; }
.playing-corner-bottom { right: .82rem; bottom: .82rem; rotate: 180deg; }
.playing-corner.is-red { color: #ff9dcf; border-color: rgba(255,20,147,.3); box-shadow: inset 0 1px rgba(255,255,255,.12), 0 0 22px rgba(255,20,147,.18); text-shadow: 0 0 12px rgba(255,20,147,.55); }
.playing-suit { position: absolute; z-index: 1; right: 1rem; top: 18%; color: rgba(16,232,255,.12); font: 400 clamp(5.4rem,8vw,8rem)/1 Georgia,"Times New Roman",serif; text-shadow: 0 0 34px rgba(16,232,255,.16); pointer-events: none; }
.playing-suit.is-red { color: rgba(255,20,147,.12); text-shadow: 0 0 34px rgba(255,20,147,.18); }
.service-choice[data-pos="0"] { z-index: 8; opacity: 1; filter: brightness(1.04); transform: var(--active-transform); border-color: rgba(16,232,255,.52); }
.service-choice[data-pos="0"].is-dealing { pointer-events: none; transition: none!important; animation: service-card-deal .74s cubic-bezier(.16,1,.3,1) backwards; }
.service-choice[data-pos="1"] { z-index: 6; opacity: .82; filter: brightness(.76) saturate(.75); transform: translate(-50%,-50%) translate3d(46px,-28px,40px) rotateY(-7deg) rotateZ(2.8deg) scale(.9); }
.service-choice[data-pos="2"] { z-index: 4; opacity: .62; filter: brightness(.61) saturate(.62); transform: translate(-50%,-50%) translate3d(112px,-48px,-40px) rotateY(-10deg) rotateZ(4.5deg) scale(.8); }
.service-choice[data-pos="3"] { z-index: 2; opacity: .42; filter: brightness(.48) saturate(.5); transform: translate(-50%,-50%) translate3d(166px,-66px,-100px) rotateY(-12deg) rotateZ(6deg) scale(.7); }
.service-choice:focus-visible { outline: 3px solid rgba(16,232,255,.7); outline-offset: 5px; }
.service-choice[data-pos="0"]:hover { transform: translate(-50%,-50%) translate3d(-62px,-18px,205px) scale(1.055) rotateX(var(--rx)) rotateY(calc(2deg + var(--ry))) rotateZ(-.6deg); }
.service-choice[data-pos="1"]:hover { opacity: 1; filter: brightness(1.02) saturate(1.08); transform: translate(-50%,-50%) translate3d(48px,-52px,112px) scale(.97) rotateX(var(--rx)) rotateY(calc(-4deg + var(--ry))) rotateZ(1.5deg); }
.service-choice[data-pos="2"]:hover { opacity: .94; filter: brightness(.94) saturate(1); transform: translate(-50%,-50%) translate3d(120px,-72px,38px) scale(.89) rotateX(var(--rx)) rotateY(calc(-6deg + var(--ry))) rotateZ(2.5deg); }
.service-choice[data-pos="3"]:hover { opacity: .84; filter: brightness(.86) saturate(.94); transform: translate(-50%,-50%) translate3d(176px,-90px,-24px) scale(.8) rotateX(var(--rx)) rotateY(calc(-8deg + var(--ry))) rotateZ(3.8deg); }
.service-controls { display: flex; justify-content: center; align-items: center; gap: 1rem; margin-top: .35rem; }
.service-controls button { width: 48px; height: 48px; border: 1px solid rgba(16,232,255,.34); border-radius: 50%; background: rgba(8,18,30,.78); color: #efffff; cursor: pointer; font-size: 1.65rem; line-height: 1; transition: transform .2s ease, background .2s ease, border-color .2s ease; }
.service-controls button:hover { transform: translateY(-2px); background: rgba(16,232,255,.13); border-color: rgba(16,232,255,.7); }
.service-controls button:active { transform: translateY(1px) scale(.97); }
.service-controls span { min-width: 72px; text-align: center; color: #73839b; font-size: .75rem; letter-spacing: .14em; }
.service-controls b { color: var(--cyan); }
.service-showcase { min-width: 0; min-height: 590px; position: relative; }
.service-panel { position: relative; min-height: 590px; display: grid; grid-template-rows: minmax(260px,1.03fr) auto; border: 1px solid rgba(255,255,255,.12); border-left-color: rgba(16,232,255,.42); border-radius: 30px; overflow: hidden; background: linear-gradient(145deg, rgba(12,20,34,.72), rgba(5,9,18,.48)); box-shadow: 0 32px 95px rgba(0,0,0,.36), -18px 0 70px rgba(16,232,255,.05), inset 0 1px rgba(255,255,255,.09); backdrop-filter: blur(20px) saturate(128%); -webkit-backdrop-filter: blur(20px) saturate(128%); }
.service-panel::before { content: ""; position: absolute; z-index: 5; left: 0; top: 12%; bottom: 12%; width: 1px; background: linear-gradient(transparent, var(--cyan), rgba(255,20,147,.65), transparent); box-shadow: 0 0 20px rgba(16,232,255,.5); pointer-events: none; }
.service-panel[hidden] { display: none; }
.service-panel.is-entering { animation: service-panel-in .9s cubic-bezier(.22,1,.36,1) both; }
.service-panel.is-leaving { position: absolute; inset: 0; z-index: 4; pointer-events: none; animation: service-panel-out .52s cubic-bezier(.4,0,.2,1) both; }
.service-panel-media { position: relative; overflow: hidden; background: #050812; }
.service-panel-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 52%, rgba(5,9,18,.72)); pointer-events: none; }
.service-panel-media img, .service-panel-media video { width: 100%; height: 100%; min-height: 260px; object-fit: cover; }
.service-panel-copy { padding: clamp(1.2rem, 3vw, 2rem); }
.service-panel-copy > span { color: var(--cyan); font-size: .7rem; text-transform: uppercase; letter-spacing: .13em; font-weight: 900; }
.service-panel-copy h3 { margin: .55rem 0 .75rem; max-width: 18ch; font-size: clamp(1.7rem, 3vw, 2.55rem); line-height: 1.02; }
.service-panel-copy p { color: var(--muted); line-height: 1.6; max-width: 58ch; }
.service-panel-copy ul { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .55rem; margin: 1.1rem 0 0; padding: 0; list-style: none; }
.service-panel-copy li { padding: .65rem .75rem; border-left: 2px solid rgba(16,232,255,.56); background: rgba(255,255,255,.035); color: #dfe8f5; font-size: .82rem; }
.service-audio-visual::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(2,5,12,.34); }
.service-wave { position: absolute; z-index: 3; left: 8%; right: 8%; bottom: 17%; height: 82px; display: flex; align-items: center; justify-content: center; gap: 7px; }
.service-wave i { width: 5px; height: 24%; border-radius: 999px; background: linear-gradient(180deg,var(--cyan),var(--pink)); box-shadow: 0 0 14px rgba(16,232,255,.32); animation: service-wave 1.2s ease-in-out infinite alternate; }
.service-wave i:nth-child(2n) { height: 62%; animation-delay: -.42s; }.service-wave i:nth-child(3n) { height: 92%; animation-delay: -.73s; }.service-wave i:nth-child(5n) { height: 44%; animation-delay: -.2s; }
.service-grid, .why-grid { display: grid; gap: 1rem; }
.service-card, .why-grid article, .automation-card, .case-card, .model-window, .process-list li, .reality-demo { border: 1px solid rgba(255,255,255,.09); background: linear-gradient(145deg, rgba(12,18,32,.72), rgba(8,10,18,.54)); border-radius: var(--radius); padding: 1.25rem; box-shadow: inset 0 1px rgba(255,255,255,.06); }
.service-card { min-height: 245px; transition: transform .25s ease, border-color .25s ease; }
.service-card:hover { transform: translateY(-5px); border-color: rgba(16,232,255,.36); }
.suit { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; margin-bottom: 1.4rem; background: rgba(16,232,255,.08); color: var(--cyan); box-shadow: var(--shadow-cyan); font-size: 1.4rem; }
.service-card:nth-child(even) .suit { color: var(--pink); background: rgba(255,20,147,.08); box-shadow: var(--shadow-pink); }
.service-card p, .why-grid p, .automation-card p, .case-card p, .process-list p, .reality-copy p, .demo-copy p { color: var(--muted); line-height: 1.65; }
.reality-grid { display: grid; gap: 1rem; }
.reality-demo { overflow: hidden; padding: .85rem; }
.demo-media { aspect-ratio: 16/9; border-radius: 22px; overflow: hidden; background: #080b14; border: 1px solid rgba(255,255,255,.08); }
.demo-media video, .case-art video { width: 100%; height: 100%; object-fit: cover; }
.split-demo { display: grid; grid-template-columns: .42fr .58fr; gap: 1px; background: rgba(16,232,255,.14); }
.split-demo model-viewer, .split-demo video { width: 100%; height: 100%; background: #050812; }
.split-demo video { object-fit: cover; }
.demo-copy { padding: 1rem .25rem .25rem; }
.demo-copy span { color: var(--cyan); text-transform: uppercase; letter-spacing: .1em; font-size: .75rem; font-weight: 900; }
.demo-copy h3 { max-width: 660px; }
.room-concept-card { grid-column: 1 / -1; padding: clamp(.75rem, 1.5vw, 1rem); border-color: rgba(16,232,255,.18); box-shadow: 0 28px 90px rgba(0,0,0,.44), inset 0 1px rgba(255,255,255,.06); }
.room-concept-grid { display: grid; gap: .75rem; }
.room-plan-panel, .room-render-panel { min-width: 0; margin: 0; padding: .65rem; border: 1px solid rgba(255,255,255,.09); border-radius: 24px; background: rgba(3,7,14,.84); overflow: hidden; }
.room-panel-top { min-height: 54px; display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .25rem .35rem .7rem; }
.room-panel-top span { color: var(--cyan); font: 900 .66rem/1 Inter,sans-serif; letter-spacing: .11em; text-transform: uppercase; }
.room-panel-top b { color: #eaf6ff; font-size: .76rem; text-align: right; }
.room-plan-panel > img, .room-look-viewer { width: 100%; aspect-ratio: 3/2; border-radius: 17px; border: 1px solid rgba(16,232,255,.16); background: #050a12; }
.room-plan-panel > img { display: block; object-fit: contain; }
.room-plan-panel figcaption, .room-render-panel figcaption { display: grid; gap: .3rem; padding: .8rem .35rem .25rem; }
.room-plan-panel figcaption strong, .room-render-panel figcaption strong { color: #f4fbff; font-size: .86rem; line-height: 1.4; }
.room-plan-panel figcaption small, .room-render-panel figcaption small { color: var(--muted); line-height: 1.5; }
.room-look-viewer { --pan-x: 0px; --pan-y: 0px; --look-zoom: 1.2; position: relative; overflow: hidden; touch-action: none; cursor: grab; outline: none; user-select: none; }
.room-look-viewer:active, .room-look-viewer.is-dragging { cursor: grabbing; }
.room-look-viewer:focus-visible { border-color: rgba(16,232,255,.7); box-shadow: 0 0 0 3px rgba(16,232,255,.13), 0 0 36px rgba(16,232,255,.16); }
.room-look-viewer > img { position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; object-fit: cover; transform: translate(calc(-50% + var(--pan-x)), calc(-50% + var(--pan-y))) scale(var(--look-zoom)); transition: transform .18s ease-out; pointer-events: none; will-change: transform; }
.room-look-viewer.is-dragging > img { transition: none; }
.room-panorama { position: absolute !important; inset: 0; width: 100%; height: 100%; background: #03070e; }
.room-panorama .pnlm-render-container, .room-panorama canvas { border-radius: 16px; }
.room-look-viewer .pnlm-container { background: #03070e; }
.room-look-viewer .pnlm-grab { cursor: grab; }
.room-look-viewer .pnlm-grabbing { cursor: grabbing; }
.room-look-shade { position: absolute; inset: 0; background: radial-gradient(circle at center, transparent 48%, rgba(0,0,0,.38) 100%), linear-gradient(180deg, rgba(0,0,0,.12), transparent 30%, rgba(0,0,0,.22)); pointer-events: none; }
.room-look-hint { position: absolute; left: 50%; bottom: .75rem; translate: -50% 0; padding: .58rem .78rem; border: 1px solid rgba(16,232,255,.38); border-radius: 999px; background: rgba(2,5,12,.78); color: #eaffff; font: 800 .64rem/1 Inter,sans-serif; letter-spacing: .04em; white-space: nowrap; pointer-events: none; transition: opacity .25s ease; backdrop-filter: blur(10px); }
.room-look-viewer.is-dragging .room-look-hint, .room-look-viewer.has-interacted .room-look-hint { opacity: .18; }
.room-look-compass { position: absolute; right: .7rem; top: .7rem; display: flex; align-items: center; gap: .45rem; padding: .45rem .58rem; border-radius: 999px; background: rgba(2,5,12,.72); color: #dffaff; font: 900 .56rem/1 Inter,sans-serif; letter-spacing: .08em; pointer-events: none; }
.room-look-compass i { width: 18px; height: 18px; border: 1px solid rgba(16,232,255,.55); border-radius: 50%; position: relative; }
.room-look-compass i::after { content: ""; position: absolute; left: 50%; top: 2px; width: 2px; height: 7px; border-radius: 2px; background: var(--cyan); transform: translateX(-50%) rotate(var(--look-angle,0deg)); transform-origin: 50% 7px; }
.room-concept-copy { padding: 1.15rem .35rem .35rem; display: grid; grid-template-columns: minmax(0,1.25fr) minmax(250px,.75fr); gap: .35rem 1.5rem; align-items: start; }
.room-concept-copy > span { grid-column: 1 / -1; }.room-concept-copy h3, .room-concept-copy p { margin-block: .35rem 0; }
.watch-section { padding-top: clamp(2rem, 5vw, 5rem); }
.watch-grid { display: grid; gap: 1rem; }
.watch-hero, .watch-model { border: 1px solid rgba(255,255,255,.09); background: radial-gradient(circle at 16% 0, rgba(16,232,255,.14), transparent 36%), radial-gradient(circle at 90% 12%, rgba(255,20,147,.15), transparent 40%), linear-gradient(145deg, rgba(12,18,32,.78), rgba(8,10,18,.58)); border-radius: 34px; padding: clamp(.85rem, 2vw, 1.25rem); box-shadow: inset 0 1px rgba(255,255,255,.06); overflow: hidden; }
.watch-hero video { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 24px; border: 1px solid rgba(255,255,255,.08); box-shadow: var(--shadow-pink); }
.watch-caption { padding: 1rem .2rem .2rem; }
.watch-caption span, .watch-model span { color: var(--cyan); text-transform: uppercase; letter-spacing: .11em; font-size: .78rem; font-weight: 900; }
.watch-model { display: grid; gap: 1rem; align-content: start; }
.watch-model model-viewer { width: 100%; min-height: 360px; border-radius: 24px; background: radial-gradient(circle at 50% 45%, rgba(16,232,255,.14), transparent 62%), #050812; border: 1px solid rgba(16,232,255,.18); }
.watch-model p { color: var(--muted); line-height: 1.65; }
.landing-carousel { position: relative; border: 1px solid rgba(16,232,255,.14); border-radius: 34px; padding: clamp(1.4rem, 3vw, 2.4rem); background: radial-gradient(circle at 50% 20%, rgba(16,232,255,.1), transparent 46%), rgba(5,8,16,.58); box-shadow: var(--shadow-cyan); overflow: visible; }
.landing-carousel-track { display: flex; justify-content: center; align-items: center; min-height: 420px; padding: 1.5rem 2rem 2.2rem; perspective: 1200px; }
.landing-card { --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%; position: relative; flex: 0 0 clamp(210px, 21vw, 260px); aspect-ratio: .69; margin-left: -16px; padding: .55rem; border: 1px solid rgba(255,255,255,.22); border-radius: 26px; overflow: hidden; background: linear-gradient(145deg, rgba(16,232,255,.34), rgba(15,18,31,.96) 28%, rgba(255,20,147,.3)); color: #fff; cursor: zoom-in; text-align: left; transform-style: preserve-3d; transition: transform .32s cubic-bezier(.2,.8,.2,1), filter .28s ease, opacity .28s ease, box-shadow .28s ease; box-shadow: 0 22px 55px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.12); opacity: .92; filter: saturate(.88) brightness(.86); }
.landing-card:first-child { margin-left: 0; transform: rotate(-4deg); }.landing-card:nth-child(2) { transform: translateY(-6px); z-index: 2; }.landing-card:nth-child(3) { transform: rotate(4deg); }
.landing-card[data-pos="0"], .landing-card[data-pos="1"], .landing-card[data-pos="2"] { opacity: .92; filter: saturate(.88) brightness(.86); }
.landing-card:hover, .landing-card:focus-visible, .landing-card.is-active:hover { transform: perspective(950px) translateY(-18px) scale(1.065) rotateX(var(--rx)) rotateY(var(--ry)); opacity: 1; filter: saturate(1.15) brightness(1.04); z-index: 8; box-shadow: 0 38px 85px rgba(0,0,0,.68), 0 0 42px rgba(16,232,255,.3), 0 0 64px rgba(255,20,147,.14); }
.landing-card::before { content: ""; position: absolute; inset: 0; z-index: 4; border-radius: inherit; background: radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,.75), rgba(16,232,255,.22) 18%, rgba(255,20,147,.12) 34%, transparent 58%), linear-gradient(115deg, transparent 20%, rgba(255,255,255,.42) 45%, transparent 70%); mix-blend-mode: screen; opacity: 0; transition: opacity .25s ease; pointer-events: none; }
.landing-card:hover::before, .landing-card:focus-visible::before { opacity: .72; }
.landing-card::after { content: "Klick zum Vergrößern ↗"; position: absolute; inset: 50% auto auto 50%; z-index: 6; translate: -50% -50%; padding: .66rem .82rem; border-radius: 999px; background: rgba(2,5,12,.9); border: 1px solid rgba(16,232,255,.56); color: #eaffff; font: 900 .66rem/1 Inter, sans-serif; letter-spacing: .04em; white-space: nowrap; opacity: 0; transform: scale(.9); transition: opacity .24s ease, transform .24s ease; pointer-events: none; box-shadow: 0 0 30px rgba(16,232,255,.28); }
.landing-card:hover::after, .landing-card:focus-visible::after { opacity: 1; transform: scale(1); }
.landing-card img { width: 100%; height: calc(100% - 32px); object-fit: cover; object-position: top; display: block; border-radius: 17px; }
.landing-browser { height: 32px; padding: 0 .55rem; display: flex; align-items: center; gap: .3rem; border-bottom: 1px solid rgba(255,255,255,.08); background: #0d111c; border-radius: 17px 17px 0 0; }
.landing-browser i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.22); }
.landing-browser i:nth-child(1) { background: #ff4f68; }.landing-browser i:nth-child(2) { background: #ffd65a; }.landing-browser i:nth-child(3) { background: #44e0a3; }
.landing-browser b { margin-left: .3rem; color: #8090a8; font: 700 .58rem/1 Inter, sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.landing-card-copy { position: absolute; inset: auto .55rem .55rem; z-index: 3; display: grid; gap: .1rem; padding: 4.4rem .75rem .75rem; border-radius: 0 0 17px 17px; background: linear-gradient(transparent, rgba(2,5,12,.98)); pointer-events: none; }
.landing-card-copy small { color: var(--cyan); text-transform: uppercase; letter-spacing: .1em; font-size: .6rem; font-weight: 900; }.landing-card-copy strong { font-size: clamp(1.15rem, 2.4vw, 1.65rem); }.landing-card-copy em { display: none; }
.landing-carousel-controls { display: none; align-items: center; justify-content: center; gap: 1rem; margin-top: 1rem; }
.landing-carousel-controls > button, .landing-device-switch button, .landing-modal-close { border: 1px solid rgba(16,232,255,.24); background: rgba(255,255,255,.05); color: #eaffff; border-radius: 999px; min-width: 44px; min-height: 44px; cursor: pointer; font-weight: 900; }
.landing-dots { display: flex; gap: .5rem; }.landing-dots button { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.26); cursor: pointer; }.landing-dots button.is-active { width: 28px; border-radius: 999px; background: var(--cyan); box-shadow: 0 0 18px var(--cyan); }
.landing-modal { width: 96vw; max-width: none; height: 94dvh; max-height: none; padding: 0; border: 1px solid rgba(16,232,255,.28); border-radius: 24px; background: #050811; color: #fff; box-shadow: 0 50px 160px #000; overflow: hidden; }.landing-modal::backdrop { background: rgba(0,0,0,.84); backdrop-filter: blur(10px); }.landing-modal-shell { height: 100%; display: grid; grid-template-rows: auto 1fr; }.landing-modal-header { min-height: 72px; padding: .8rem 1rem; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 1rem; border-bottom: 1px solid rgba(255,255,255,.09); }.landing-modal-header small { color: var(--cyan); text-transform: uppercase; letter-spacing: .12em; font-weight: 900; }.landing-modal-header h2 { margin: .18rem 0 0; font-size: clamp(1rem, 2vw, 1.45rem); }.landing-device-switch { display: flex; gap: .35rem; }.landing-device-switch button { min-height: 36px; padding: .45rem .75rem; }.landing-device-switch button.is-active { background: rgba(16,232,255,.16); border-color: rgba(16,232,255,.48); }.landing-modal-close { font-size: 1.6rem; }.landing-modal-viewport { width: 100%; height: 100%; margin: 0 auto; background: #111; transition: width .4s ease; overflow: hidden; }.landing-modal-viewport[data-device="mobile"] { width: min(430px, 100%); border-inline: 1px solid rgba(255,255,255,.16); }.landing-modal iframe { width: 100%; height: 100%; border: 0; background: #fff; }
.avatar-media { background: url('assets/generated/ai-avatar-showcase.webp') center/cover; }.avatar-media video { display: block; }.hover-hint { position: absolute; right: .7rem; bottom: 2.8rem; z-index: 3; padding: .58rem .72rem; border-radius: 999px; background: rgba(2,5,12,.86); border: 1px solid rgba(16,232,255,.42); color: #eaffff!important; font-size: .66rem!important; letter-spacing: .06em!important; transition: opacity .25s ease; pointer-events: none; box-shadow: 0 0 22px rgba(16,232,255,.18); }.case-card--avatar:hover .hover-hint, .case-card--avatar:focus-within .hover-hint { opacity: 0; }.avatar-feature .avatar-media { height: clamp(260px, 34vw, 420px); }.avatar-feature { border-color: rgba(16,232,255,.22); box-shadow: var(--shadow-cyan); }.avatar-feature p { color: var(--muted); line-height: 1.65; }
.drone-showcase { position: relative; padding-block: clamp(2.5rem, 5vw, 4.5rem); }.drone-showcase .section-heading { max-width: 920px; }.drone-showcase .section-heading h2 { max-width: 18ch; font-size: clamp(2rem, 4.2vw, 3.9rem); }.drone-grid { display: grid; gap: 1rem; max-width: 1100px; margin: 0 auto; }.drone-card { overflow: hidden; border: 1px solid rgba(16,232,255,.18); border-radius: 24px; background: linear-gradient(145deg, rgba(12,18,32,.82), rgba(6,8,15,.7)); box-shadow: 0 20px 55px rgba(0,0,0,.4); }.drone-media { position: relative; overflow: hidden; background: #02050b; }.drone-media video { width: 100%; aspect-ratio: 2/1; display: block; object-fit: cover; }.drone-badge { position: absolute; left: .7rem; top: .7rem; padding: .48rem .62rem; border-radius: 999px; background: rgba(2,5,12,.82); border: 1px solid rgba(16,232,255,.34); color: #eaffff; font-size: .62rem; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; pointer-events: none; }.drone-copy { padding: .95rem 1rem 1.05rem; }.drone-copy span { color: var(--cyan); font-size: .66rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 900; }.drone-copy h3 { margin: .35rem 0 .55rem; font-size: clamp(1.08rem, 2vw, 1.45rem); }.drone-copy p { color: var(--muted); line-height: 1.55; margin: 0; font-size: .88rem; }
.case-grid { display: grid; gap: 1rem; }
.showreel-panel { border: 1px solid rgba(16,232,255,.18); background: linear-gradient(145deg, rgba(12,18,32,.82), rgba(8,10,18,.64)); border-radius: 34px; padding: clamp(1rem, 2vw, 1.35rem); margin-bottom: 1.2rem; box-shadow: var(--shadow-cyan); display: grid; gap: 1rem; }
.showreel-panel video { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 24px; border: 1px solid rgba(255,255,255,.08); }
.showreel-panel span, .case-card span { color: var(--cyan); font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 800; }
.showreel-panel p { color: var(--muted); line-height: 1.6; }
.case-card { overflow: hidden; min-height: 320px; }
details.case-card { cursor: pointer; }
details.case-card summary { list-style: none; }
details.case-card summary::-webkit-details-marker { display: none; }
details.case-card[open] { border-color: rgba(16,232,255,.25); box-shadow: var(--shadow-cyan); }
.case-art { height: 190px; border-radius: 22px; margin-bottom: 1rem; position: relative; overflow: hidden; background: #101827; }
.case-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent, rgba(255,255,255,.25), transparent); transform: translateX(-100%); animation: sheen 5s ease-in-out infinite; pointer-events: none; }
.art-drink { background: linear-gradient(90deg, rgba(0,0,0,.08), rgba(0,0,0,.1)), url('assets/generated/auron-product-campaign.webp') center/cover; }
.art-brand-img { background: url('assets/generated/b2b-brand-board.webp') center/cover; }
.avatar-img { background: url('assets/generated/ai-avatar-showcase.webp') center/cover; }
.webdesign-img { background: url('assets/generated/webdesign-showcase.webp') center/cover; }
.shorts-img { background: url('assets/generated/shorts-showcase.webp') center/cover; }
.case-card span { color: var(--cyan); font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 800; }

/* Two-screen compact portfolio */
.portfolio-screen { min-height: min(920px, calc(100svh - 68px)); padding-top: clamp(2.6rem,5vh,4.5rem); padding-bottom: clamp(2.6rem,5vh,4.5rem); display: flex; flex-direction: column; justify-content: center; scroll-margin-top: 72px; }
.compact-heading { max-width: 980px; margin-bottom: clamp(1.25rem,2.5vh,2rem); }
.compact-heading .eyebrow { margin-bottom: .6rem; }
.compact-heading h2 { max-width: 18ch; margin-bottom: .65rem; font-size: clamp(2.35rem,4.7vw,4.35rem); }
.compact-heading > p:last-child { max-width: 720px; margin: 0; color: var(--muted); line-height: 1.55; }
.production-layout { display: grid; grid-template-columns: minmax(0,1.58fr) minmax(255px,.72fr); gap: 1rem; height: clamp(480px,57vh,570px); }
.production-viewer { position: relative; min-width: 0; overflow: hidden; border: 1px solid rgba(16,232,255,.22); border-radius: 30px; background: #050812; box-shadow: 0 32px 85px rgba(0,0,0,.46), 0 0 42px rgba(16,232,255,.08); }
.production-view { position: absolute; inset: 0; overflow: hidden; background: #050812; animation: production-view-in .55s cubic-bezier(.22,1,.36,1) both; }
.production-view[hidden] { display: none; }
.production-view > img, .production-view > video, .production-view > model-viewer { width: 100%; height: 100%; object-fit: cover; }
.production-view > model-viewer { background: radial-gradient(circle at 50% 42%,rgba(16,232,255,.14),transparent 60%),#040812; }
.production-view::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,transparent 54%,rgba(2,5,12,.9)); }
.production-caption { position: absolute; z-index: 2; left: clamp(1rem,3vw,2rem); right: clamp(1rem,3vw,2rem); bottom: clamp(1rem,2vw,1.6rem); display: grid; gap: .38rem; }
.production-caption span, .production-case > span, .format-tile header span, .format-media > span, .content-strip > div:first-child > span { color: var(--cyan); font-size: .68rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.production-caption strong { max-width: 23ch; font-size: clamp(1.25rem,2.2vw,2rem); line-height: 1.08; }
.production-selector { display: grid; grid-template-rows: repeat(2,minmax(0,1fr)); gap: 1rem; }
.production-case { position: relative; overflow: hidden; padding: clamp(1.15rem,2vw,1.55rem); border: 1px solid rgba(255,255,255,.11); border-radius: 26px; background: linear-gradient(145deg,rgba(12,19,33,.86),rgba(6,9,17,.7)); transition: border-color .35s ease, background .35s ease, box-shadow .35s ease; }
.production-case::before { content:""; position:absolute; width:150px; height:150px; right:-55px; top:-65px; border-radius:50%; background:var(--pink); filter:blur(65px); opacity:.12; }
.production-case.is-active { border-color: rgba(16,232,255,.36); background: linear-gradient(145deg,rgba(10,29,40,.9),rgba(11,9,24,.76)); box-shadow: 0 0 35px rgba(16,232,255,.09); }
.production-case h3 { margin: .48rem 0 .35rem; font-size: clamp(1.35rem,2vw,1.8rem); }
.production-case p { margin: 0; color: var(--muted); font-size: .86rem; }
.production-tabs, .mini-tabs { position: absolute; left: 1.15rem; right: 1.15rem; bottom: 1.15rem; display: flex; flex-wrap: wrap; gap: .45rem; }
.production-tabs button, .mini-tabs button { min-height: 36px; padding: .55rem .75rem; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; color: #cbd6e6; background: rgba(255,255,255,.045); cursor: pointer; font: 800 .7rem/1 Inter,sans-serif; transition: color .25s ease, border-color .25s ease, background .25s ease, box-shadow .25s ease; }
.production-tabs button:hover, .mini-tabs button:hover, .production-tabs button.is-active, .mini-tabs button.is-active { color: #fff; border-color: rgba(16,232,255,.56); background: rgba(16,232,255,.11); box-shadow: 0 0 20px rgba(16,232,255,.13); }
.formats-screen { position: relative; }
.section-anchor { position: absolute; top: 47%; width: 1px; height: 1px; pointer-events:none; }
.showcase-anchor { top: 60%; }
.formats-bento { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(290px,.78fr); grid-template-rows: repeat(2,minmax(0,1fr)) 180px; gap: 1rem; height: clamp(640px,70vh,720px); }
.format-tile { min-width: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: 27px; background: linear-gradient(145deg,rgba(11,18,31,.82),rgba(5,8,15,.7)); box-shadow: inset 0 1px rgba(255,255,255,.06); }
.websites-tile { grid-row: 1/3; padding: 1rem; border-color: rgba(16,232,255,.2); }
.webdesign-reel { position:relative; display:block; width:100%; aspect-ratio:16/9; margin:.7rem 0 .65rem; overflow:hidden; border:1px solid rgba(16,232,255,.22); border-radius:22px; padding:0; color:#fff; background:#050608; cursor:pointer; text-align:left; }
.webdesign-reel video { width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.75,.2,1),filter .45s ease; }
.webdesign-reel-shade { position:absolute; inset:0; background:linear-gradient(180deg,transparent 34%,rgba(2,5,10,.9)); }
.webdesign-reel-copy { position:absolute; z-index:2; left:1rem; right:4.5rem; bottom:.85rem; display:grid; gap:.16rem; }
.webdesign-reel-copy small,.webdesign-reel-copy em { color:var(--cyan); font-size:.64rem; font-style:normal; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.webdesign-reel-copy strong { font-size:clamp(1.05rem,1.8vw,1.45rem); }
.webdesign-reel-play { position:absolute; z-index:2; right:1rem; bottom:1rem; width:2.65rem; height:2.65rem; display:grid; place-items:center; border:1px solid rgba(255,255,255,.34); border-radius:50%; background:rgba(5,6,8,.72); backdrop-filter:blur(12px); color:var(--cyan); }
.webdesign-reel:hover video,.webdesign-reel:focus-visible video { transform:scale(1.035); filter:brightness(1.08); }
.reel-modal { position:fixed; z-index:999; inset:0; display:grid; place-items:center; padding:clamp(1rem,4vw,4rem); background:rgba(1,3,8,.9); backdrop-filter:blur(18px); }
.reel-modal[hidden] { display:none; }
.reel-modal video {
  width:min(1280px,94vw,156vh);
  aspect-ratio:16 / 9;
  max-height:88vh;
  object-fit:contain;
  border:2px solid #16e8ff;
  border-radius:18px;
  background:#000;
  box-shadow:
    0 0 0 1px rgba(255,24,164,.82),
    0 0 20px rgba(16,232,255,.74),
    0 0 48px rgba(255,24,164,.42),
    0 40px 120px rgba(0,0,0,.78);
}
.reel-modal-close {
  position:fixed;
  z-index:2;
  top:1.2rem;
  right:1.4rem;
  width:3rem;
  height:3rem;
  border:1px solid #16e8ff;
  border-radius:50%;
  background:rgba(5,8,15,.9);
  color:#fff;
  font-size:2rem;
  cursor:pointer;
  box-shadow:0 0 18px rgba(16,232,255,.5),0 0 28px rgba(255,24,164,.26);
}
.format-tile header { padding: .25rem .35rem 0; }
.format-tile header h3 { margin: .25rem 0 0; font-size: 1.4rem; }
.compact-landing { margin-top: .2rem; padding: 0; border: 0; border-radius: 22px; background: transparent; box-shadow: none; }
.compact-landing .landing-carousel-track { min-height: 370px; padding: .75rem 1rem 1.2rem; }
.compact-landing .landing-card { flex-basis: clamp(170px,16vw,205px); border-radius: 21px; }
.compact-landing .landing-card-copy strong { font-size: 1.15rem; }
.drone-tile, .avatar-tile { display: grid; grid-template-columns: 1.08fr .92fr; }
.format-media { position: relative; min-height: 0; overflow: hidden; background:#050812; }
.format-media video, .format-media img { width:100%; height:100%; object-fit:cover; }
.format-media::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(2,5,12,.82)); pointer-events:none; }
.format-media > span { position:absolute; z-index:2; left:.8rem; bottom:.7rem; }
.format-copy { padding: 1rem; display:flex; flex-direction:column; justify-content:center; }
.format-copy h3 { margin:0; font-size:clamp(1rem,1.7vw,1.35rem); line-height:1.08; }
.format-copy p { margin:.55rem 0 0; color:var(--muted); font-size:.78rem; }
.mini-tabs { position: static; margin-top: 1rem; }
.mini-tabs button { padding: .48rem .6rem; font-size: .62rem; }
.avatar-tile { cursor: pointer; }
.avatar-tile:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.content-strip { grid-column: 1; display:grid; grid-template-columns:minmax(230px,.8fr) 1.2fr; align-items:center; gap:1rem; padding:.8rem 1rem; border-color:rgba(255,20,147,.18); }
.content-strip h3 { margin:.28rem 0 0; font-size:clamp(1rem,1.7vw,1.35rem); }
.content-rail { height:90px; display:grid; grid-template-columns:repeat(4,1fr); gap:.55rem; overflow:hidden; }
.content-rail img { width:100%; height:100%; border-radius:13px; object-fit:cover; filter:saturate(.92) brightness(.86); transition:filter .3s ease, transform .3s ease; }
.content-rail img:hover { filter:none; transform:scale(1.025); }
.room-tile { grid-column: 2; min-width: 0; border-color: rgba(16,232,255,.22); box-shadow: 0 0 32px rgba(16,232,255,.08); }
.room-tile .room-look-viewer { width: 100%; height: 100%; aspect-ratio: auto; border: 0; border-radius: 0; }
.room-tile-copy { position: absolute; z-index: 4; left: .9rem; top: .85rem; pointer-events: none; text-shadow: 0 2px 12px rgba(0,0,0,.9); }
.room-tile-copy span { color: var(--cyan); font-size: .64rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.room-tile-copy h3 { margin: .25rem 0 0; font-size: clamp(1.05rem,1.7vw,1.35rem); }
.room-tile .room-look-hint { max-width: calc(100% - 1.4rem); overflow: hidden; text-overflow: ellipsis; }
@keyframes production-view-in { from { opacity:0; transform:scale(1.025); filter:blur(5px); } to { opacity:1; transform:scale(1); filter:blur(0); } }

.why-grid article strong { display: block; font-size: 1.2rem; margin-bottom: .75rem; }

/* Team — original flip behaviour, quieter premium surface */
.team-section { overflow: hidden; scroll-margin-top: 72px; }
.team-heading { max-width: 850px; }
.team-heading > p:last-child { max-width: 720px; color: var(--muted); }
.team-grid { width: min(100%,1000px); margin: 2.4rem auto 0; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: clamp(.85rem,1.6vw,1.25rem); align-items: start; }
.team-card { min-width: 0; aspect-ratio: 3/4; padding: 0; border: 0; border-radius: 25px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; perspective: 1100px; -webkit-tap-highlight-color: transparent; }
.team-card-inner { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.2,.7,.25,1); }
.team-card:hover .team-card-inner, .team-card:focus-visible .team-card-inner, .team-card.is-flipped .team-card-inner { transform: rotateY(180deg); }
.team-card:focus-visible { outline: 2px solid rgba(16,232,255,.72); outline-offset: 5px; }
.team-card-face { position: absolute; inset: 0; display: block; overflow: hidden; border: 1px solid rgba(255,255,255,.13); border-radius: 25px; background: linear-gradient(145deg,rgba(20,25,35,.98),rgba(5,8,14,.98)); box-shadow: 0 26px 70px rgba(0,0,0,.38), inset 0 1px rgba(255,255,255,.08); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.team-card-front::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,transparent 42%,rgba(4,7,12,.32) 62%,rgba(4,7,12,.98) 100%); pointer-events: none; }
.team-card-front { transition: border-color .35s ease, box-shadow .35s ease; }
.team-card:hover .team-card-front { border-color: rgba(16,232,255,.3); box-shadow: 0 30px 75px rgba(0,0,0,.44), 0 0 28px rgba(16,232,255,.07), inset 0 1px rgba(255,255,255,.1); }
.team-portrait { position: absolute; inset: 0 0 22%; display: block; overflow: hidden; background: #070a10; }
.team-portrait img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: 50% 18%; filter: saturate(.78) contrast(1.02); transform: scale(1.02); transition: transform .6s cubic-bezier(.2,.7,.25,1), filter .4s ease; }
.team-card:hover .team-portrait img { transform: scale(1.055); filter: saturate(.9) contrast(1.03); }
.team-card-index { position: absolute; z-index: 3; left: .85rem; top: .8rem; padding: .4rem .55rem; border: 1px solid rgba(255,255,255,.13); border-radius: 999px; background: rgba(4,7,12,.7); color: rgba(238,246,255,.82); font-size: .56rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; backdrop-filter: blur(12px); }
.team-front-copy { position: absolute; z-index: 3; left: 1rem; right: 1rem; bottom: 2.15rem; display: grid; gap: .25rem; }
.team-front-copy strong { color: #f7f9fd; font-size: clamp(1rem,1.55vw,1.28rem); line-height: 1.08; letter-spacing: -.025em; }
.team-front-copy small { color: rgba(207,217,230,.75); font-size: clamp(.61rem,.78vw,.72rem); line-height: 1.35; }
.team-flip-cue { position: absolute; z-index: 3; left: 1rem; right: 1rem; bottom: .78rem; display: flex; justify-content: space-between; align-items: center; color: rgba(226,235,245,.63); font-size: .58rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.team-flip-cue i { color: var(--cyan); font-style: normal; font-size: .9rem; }
.team-card-back { padding: clamp(1.1rem,1.6vw,1.45rem); display: flex; flex-direction: column; justify-content: center; gap: .75rem; transform: rotateY(180deg); border-color: rgba(255,255,255,.15); background: radial-gradient(circle at 15% 10%,rgba(16,232,255,.09),transparent 36%), radial-gradient(circle at 90% 85%,rgba(255,20,147,.075),transparent 38%), linear-gradient(145deg,#111722,#070a10 72%); }
.team-card-back::before { content: ""; position: absolute; left: 1.2rem; top: 4.2rem; width: 42px; height: 1px; background: linear-gradient(90deg,var(--cyan),transparent); }
.team-card-back > strong { color: #f7f9fd; font-size: clamp(1.12rem,1.75vw,1.45rem); line-height: 1.12; letter-spacing: -.025em; }
.team-card-back > span:not(.team-card-index) { color: rgba(215,224,235,.78); font-size: clamp(.72rem,.9vw,.82rem); line-height: 1.55; }
.team-card-back > small { position: absolute; left: clamp(1.1rem,1.6vw,1.45rem); right: clamp(1.1rem,1.6vw,1.45rem); bottom: 1rem; color: rgba(16,232,255,.72); font-size: .58rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.team-card-freelancer .team-card-front { border-style: dashed; border-color: rgba(16,232,255,.25); }
.team-card-freelancer .team-portrait img { filter: saturate(.55) brightness(.88); }

.automation-card { max-width: 1100px; margin: 0 auto; display: grid; gap: 2rem; align-items: center; border-color: var(--line-hot); box-shadow: var(--shadow-pink); text-align: left; }
.automation-card > * { min-width: 0; }
.automation-copy h2 { font-size: clamp(2rem, 6vw, 4.2rem); }
.dashboard { width: 100%; max-width: 100%; min-width: 0; overflow: hidden; border-radius: 26px; border: 1px solid rgba(16,232,255,.22); background: radial-gradient(circle at 20% 0, rgba(16,232,255,.17), transparent 42%), rgba(2,5,12,.72); padding: 1rem; box-shadow: var(--shadow-cyan); }
.dash-head { display: flex; justify-content: space-between; align-items: center; color: #eafcff; margin-bottom: 1rem; }
.dash-head span { color: var(--cyan); font-size: .78rem; }
.dash-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; margin-bottom: 1rem; }
.dash-metrics div { background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.08); border-radius: 18px; padding: .8rem; }
.dash-metrics strong { display: block; font-size: 1.45rem; }
.dash-metrics span, .dash-feed p { color: var(--muted); font-size: .78rem; margin: 0; }
.pipeline { display: grid; grid-template-columns: repeat(5, 1fr); gap: .55rem; min-height: 180px; align-items: end; }
.pipeline section { position: relative; min-height: 170px; border-radius: 18px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.08); padding: .65rem; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
.pipeline b, .pipeline span { position: relative; z-index: 2; font-size: .72rem; }
.pipeline i { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(180deg, rgba(16,232,255,.55), rgba(255,20,147,.48)); border-radius: 18px 18px 0 0; box-shadow: 0 0 22px rgba(16,232,255,.28); }
.dash-feed { display: flex; gap: .7rem; align-items: center; margin-top: 1rem; padding: .85rem; border-radius: 18px; background: rgba(255,255,255,.045); }
.dash-feed span { width: 10px; height: 10px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 16px var(--pink); flex: 0 0 auto; }
.final-cta { text-align: center; }
.final-cta > div { max-width: 820px; margin: 0 auto; padding: clamp(2rem, 7vw, 4rem); border-radius: 36px; background: radial-gradient(circle at 20% 0, rgba(16,232,255,.18), transparent 40%), radial-gradient(circle at 90% 20%, rgba(255,20,147,.18), transparent 45%), rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); }

.footer { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 1rem; color: var(--muted); padding: 3rem 1rem; border-top: 1px solid rgba(255,255,255,.08); text-align: center; }
.footer img { width: 76px; height: 76px; object-fit: cover; border-radius: 20px; }
.footer-claim { display:grid; gap:.2rem; margin:0; font-family:"Orbitron",sans-serif; line-height:1.05; }
.footer-claim span { color:#d8e6f5; font-size:clamp(1rem,2vw,1.35rem); }
.footer-claim strong { color:var(--cyan); font-size:clamp(1.35rem,3vw,2rem); text-shadow:0 0 22px rgba(16,232,255,.28); }
.footer > small { color:#718096; font-size:.68rem; letter-spacing:.08em; }

/* Fair agency positioning */
.play-space-fair::after { background:radial-gradient(circle at 12% 0,rgba(16,232,255,.2),transparent 31%),radial-gradient(circle at 92% 16%,rgba(255,20,147,.18),transparent 34%),linear-gradient(145deg,#0b1d31,#11152f 55%,#27102f); border:1px solid rgba(155,223,255,.25); box-shadow:inset 0 1px rgba(255,255,255,.1),0 32px 90px rgba(0,0,0,.28); }
.play-space-fair::after { background-color:#07152a; background-image:linear-gradient(180deg,rgba(3,8,20,.16) 0%,rgba(3,8,20,.06) 48%,rgba(3,8,20,.16) 70%,rgba(3,8,20,.44) 100%),url("assets/generated/ki-joker-preistafel-offene-karten-v1.optimized.webp"); background-size:100% 100%,100% auto; background-position:center,center bottom; background-repeat:no-repeat; border-color:rgba(120,229,255,.32); box-shadow:inset 0 1px rgba(255,255,255,.12),inset 0 0 120px rgba(0,0,0,.28),0 38px 100px rgba(0,0,0,.34); }
.fair-deal-head { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(300px,.78fr); gap:.8rem 4rem; align-items:end; margin-bottom:2rem; }
.fair-deal-head .eyebrow { grid-column:1 / -1; margin-bottom:0; }
.fair-deal-head h2 { max-width:15ch; margin:0; font-size:clamp(2.2rem,4.5vw,4.3rem); }
.fair-deal-copy h3 { margin:0 0 .85rem; color:#f4f8ff; font-size:clamp(1.15rem,2vw,1.65rem); line-height:1.2; }
.fair-deal-copy p { margin:0; color:#c0cde0; line-height:1.7; }
.fair-deal-copy p strong { color:#fff; }
.fair-principles { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.8rem; margin-bottom:1.2rem; }
.fair-principles article { padding:1.25rem; border:1px solid rgba(255,255,255,.12); border-radius:20px; background:rgba(3,8,20,.58); }
.fair-principles span { display:block; margin-bottom:.75rem; color:var(--cyan); font:800 .68rem/1 "Orbitron",sans-serif; }
.fair-principles strong { display:block; min-height:2.6em; margin-bottom:.55rem; color:#f7fbff; font-size:1.02rem; }
.fair-principles p { margin:0; color:#aebed2; font-size:.88rem; line-height:1.6; }
.starter-deck { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.75rem; }
.starter-deck article { position:relative; display:flex; flex-direction:column; min-height:310px; padding:1.2rem; overflow:hidden; border:1px solid rgba(16,232,255,.2); border-radius:22px; background:linear-gradient(155deg,rgba(13,25,45,.96),rgba(5,9,20,.9)); box-shadow:0 20px 50px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.07); }
.starter-deck article { border-color:rgba(134,239,255,.32); background:linear-gradient(155deg,rgba(13,25,45,.9),rgba(5,9,20,.8)); box-shadow:0 24px 58px rgba(0,0,0,.34),0 0 24px rgba(16,232,255,.05),inset 0 1px rgba(255,255,255,.1); backdrop-filter:blur(11px); }
.starter-deck[data-reveal] { opacity:1; transform:none; filter:none; transition:none; }
.starter-deck[data-reveal] article { opacity:0; transform:translate3d(-82vw,-3rem,0) rotate(-12deg) scale(.82); transform-origin:50% 100%; will-change:transform,opacity; }
.starter-deck[data-reveal].is-visible article { animation:price-card-deal .9s cubic-bezier(.16,.82,.2,1) both; }
.starter-deck[data-reveal].is-visible article:nth-child(1) { animation-delay:.08s; }
.starter-deck[data-reveal].is-visible article:nth-child(2) { animation-delay:.22s; }
.starter-deck[data-reveal].is-visible article:nth-child(3) { animation-delay:.36s; }
.starter-deck[data-reveal].is-visible article:nth-child(4) { animation-delay:.5s; }
@keyframes price-card-deal {
  0% { opacity:0; transform:translate3d(-82vw,-3rem,0) rotate(-12deg) scale(.82); }
  62% { opacity:1; transform:translate3d(1.1rem,.35rem,0) rotate(2.2deg) scale(1.025); }
  82% { transform:translate3d(-.35rem,-.12rem,0) rotate(-.8deg) scale(.992); }
  100% { opacity:1; transform:none; }
}
@media (prefers-reduced-motion:reduce) { .starter-deck[data-reveal] article { opacity:1 !important; transform:none !important; animation:none !important; } }
.starter-deck article::after { content:""; }
.starter-deck small { color:var(--cyan); font:700 .62rem/1.2 "Orbitron",sans-serif; letter-spacing:.1em; text-transform:uppercase; }
.starter-deck h3 { margin:1rem 0 .7rem; font-size:clamp(1.25rem,2vw,1.75rem); }
.starter-deck p { margin:0 0 1.1rem; color:#aebed2; font-size:.88rem; line-height:1.55; }
.starter-deck .price-chip-face > strong { margin-top:auto; color:#fff; font:800 clamp(1.35rem,2.3vw,2rem)/1 "Orbitron",sans-serif; }
.starter-deck a { margin-top:1rem; padding-top:.85rem; border-top:1px solid rgba(255,255,255,.1); color:var(--cyan); font-size:.78rem; font-weight:700; }
.price-note { max-width:82ch; margin:1.2rem auto 0; color:#8fa0b6; text-align:center; font-size:.8rem; }
@media (max-width:980px) { .fair-deal-head { grid-template-columns:1fr; align-items:start; } .fair-deal-head .eyebrow { grid-column:1; } .starter-deck { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:759px) { .fair-principles,.starter-deck { grid-template-columns:1fr; } .fair-principles strong { min-height:0; } .starter-deck article { min-height:270px; } }

/* Rectangular poker-chip price stacks */
.starter-deck {
  gap:clamp(.8rem,1.35vw,1.25rem);
  padding:2.2rem .3rem 4.8rem;
  perspective:1450px;
  perspective-origin:50% 18%;
  overflow:visible;
}
.starter-deck article {
  position:relative;
  z-index:1;
  display:block;
  min-height:330px;
  padding:0;
  overflow:visible;
  border:0;
  border-radius:24px;
  background:none;
  box-shadow:none;
  backdrop-filter:none;
  transform-style:preserve-3d;
  transition:z-index 0s .34s;
}
.starter-deck article:hover,
.starter-deck article:focus-within {
  z-index:20;
  transition-delay:0s;
}
.starter-deck article:focus { outline:none; }
.price-chip-face {
  position:relative;
  display:flex;
  flex-direction:column;
  width:100%;
  min-height:310px;
  padding:1.35rem;
  overflow:hidden;
  border:3px solid #15dff0;
  border-radius:22px;
  background:
    radial-gradient(circle at 82% 14%,rgba(255,24,150,.18),transparent 25%),
    linear-gradient(145deg,#10233d 0%,#07101f 52%,#10162c 100%);
  box-shadow:
    0 3px 0 #09101d,
    0 6px 0 #12aabd,
    0 9px 0 #07101c,
    0 18px 28px rgba(0,0,0,.56),
    inset 0 0 0 2px rgba(255,255,255,.1),
    inset 0 0 24px rgba(16,232,255,.08);
  transform:rotateX(48deg) rotateZ(-2deg);
  transform-origin:50% 92%;
  transform-style:preserve-3d;
  transition:transform .68s cubic-bezier(.16,.82,.2,1),box-shadow .68s cubic-bezier(.16,.82,.2,1),border-color .35s ease;
  will-change:transform;
}
.price-chip-face::before {
  content:"";
  position:absolute;
  inset:9px;
  pointer-events:none;
  border:1px dashed rgba(169,248,255,.42);
  border-radius:14px;
}
.price-chip-face::after {
  content:"J";
  position:absolute;
  right:1.05rem;
  top:.95rem;
  color:#ff249a;
  text-shadow:0 0 12px rgba(255,36,154,.78);
  font:900 1rem/1 "Orbitron",sans-serif;
}
.starter-deck article:nth-child(1) .price-chip-face {
  transform:rotateX(48deg) rotateZ(-3.2deg) translateY(18px);
  box-shadow:0 3px 0 #07101c,0 6px 0 #13a9bd,0 9px 0 #07101c,0 13px 0 #0a6071,0 25px 34px rgba(0,0,0,.58),inset 0 0 0 2px rgba(255,255,255,.1),inset 0 0 24px rgba(16,232,255,.08);
}
.starter-deck article:nth-child(2) .price-chip-face {
  transform:rotateX(48deg) rotateZ(2deg) translateY(5px);
  box-shadow:0 3px 0 #07101c,0 6px 0 #d01b7d,0 9px 0 #07101c,0 12px 0 #13a9bd,0 15px 0 #07101c,0 18px 0 #8a175c,0 31px 40px rgba(0,0,0,.6),inset 0 0 0 2px rgba(255,255,255,.1),inset 0 0 24px rgba(255,36,154,.07);
}
.starter-deck article:nth-child(3) .price-chip-face {
  transform:rotateX(48deg) rotateZ(-1deg) translateY(-9px);
  box-shadow:0 3px 0 #07101c,0 6px 0 #13a9bd,0 9px 0 #07101c,0 12px 0 #d01b7d,0 15px 0 #07101c,0 18px 0 #13a9bd,0 21px 0 #07101c,0 24px 0 #8755e8,0 39px 48px rgba(0,0,0,.62),inset 0 0 0 2px rgba(255,255,255,.1),inset 0 0 24px rgba(16,232,255,.08);
}
.starter-deck article:nth-child(4) .price-chip-face {
  transform:rotateX(48deg) rotateZ(3.2deg) translateY(11px);
  box-shadow:0 3px 0 #07101c,0 6px 0 #d01b7d,0 9px 0 #07101c,0 12px 0 #13a9bd,0 15px 0 #07101c,0 27px 36px rgba(0,0,0,.58),inset 0 0 0 2px rgba(255,255,255,.1),inset 0 0 24px rgba(255,36,154,.07);
}
.starter-deck article:hover .price-chip-face,
.starter-deck article:focus-within .price-chip-face {
  border-color:#8ff8ff;
  transform:rotateX(0deg) rotateZ(0deg) translate3d(0,-46px,96px) scale(1.09);
  box-shadow:0 5px 0 #07101c,0 10px 0 #12aabd,0 15px 0 #07101c,0 28px 70px rgba(0,0,0,.72),0 0 45px rgba(16,232,255,.3),inset 0 0 0 2px rgba(255,255,255,.14),inset 0 0 30px rgba(16,232,255,.1);
}
@media (max-width:980px) {
  .starter-deck { padding-bottom:3.5rem; }
}
@media (max-width:759px) {
  .starter-deck { padding:1.2rem .2rem 2rem; perspective:none; }
  .starter-deck article { min-height:315px; }
  .starter-deck article .price-chip-face { transform:none; }
  .starter-deck article:hover .price-chip-face,
  .starter-deck article:focus-within .price-chip-face { transform:translateY(-8px) scale(1.015); }
}
@media (prefers-reduced-motion:reduce) {
  .price-chip-face { transition:none; }
}

/* Pricing table alignment and premium plaque finish */
.play-space-fair::after {
  background-image:
    linear-gradient(180deg,rgba(3,8,20,.14) 0%,rgba(3,8,20,.03) 39%,rgba(3,8,20,.12) 76%,rgba(3,8,20,.55) 100%),
    url("assets/generated/ki-joker-preistafel-offene-karten-v1.optimized.webp");
  background-size:100% 100%,100% auto;
  background-position:center,center 72%;
}
.starter-deck {
  max-width:1180px;
  margin-inline:auto;
  gap:clamp(1.4rem,2.5vw,2.6rem);
  padding:2.7rem clamp(.5rem,1.6vw,1.4rem) 4.2rem;
  perspective:1600px;
  perspective-origin:50% 10%;
}
.starter-deck article {
  min-height:282px;
}
.starter-deck article::before {
  content:"";
  position:absolute;
  z-index:-1;
  left:7%;
  right:7%;
  bottom:8px;
  height:48px;
  border-radius:50%;
  background:rgba(0,0,0,.72);
  filter:blur(16px);
  transform:translateY(18px) scaleX(.94);
  opacity:.9;
  transition:transform .65s cubic-bezier(.16,.82,.2,1),opacity .4s ease;
}
.price-chip-face {
  min-height:252px;
  padding:1.25rem 1.35rem 1.15rem;
  border:2px solid rgba(137,247,255,.95);
  border-radius:18px;
  background:
    linear-gradient(115deg,rgba(255,255,255,.13) 0%,transparent 12%,transparent 73%,rgba(255,255,255,.055) 87%,transparent 100%),
    radial-gradient(circle at 84% 10%,rgba(255,25,153,.25),transparent 28%),
    radial-gradient(circle at 10% 95%,rgba(16,232,255,.12),transparent 35%),
    linear-gradient(145deg,#122843 0%,#081322 49%,#10172c 100%);
  box-shadow:
    0 2px 0 #bbfbff,
    0 4px 0 #087986,
    0 7px 0 #03101a,
    0 10px 0 #cf187e,
    0 13px 0 #05101c,
    0 25px 36px rgba(0,0,0,.66),
    inset 0 1px 0 rgba(255,255,255,.42),
    inset 0 -2px 0 rgba(0,0,0,.7),
    inset 0 0 0 5px rgba(5,14,27,.72),
    inset 0 0 0 7px rgba(76,228,240,.3),
    inset 0 0 34px rgba(16,232,255,.08);
  transform-origin:50% 92%;
}
.price-chip-face::before {
  inset:11px;
  border:1px solid rgba(180,251,255,.52);
  border-radius:10px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05),0 0 14px rgba(16,232,255,.08);
}
.price-chip-face::after {
  right:1.15rem;
  top:1.08rem;
  display:grid;
  width:1.55rem;
  height:1.55rem;
  place-items:center;
  border:1px solid rgba(255,78,174,.72);
  border-radius:50%;
  background:rgba(31,7,31,.58);
  font-size:.72rem;
  box-shadow:0 0 18px rgba(255,36,154,.38),inset 0 0 10px rgba(255,36,154,.16);
}
.starter-deck h3 { margin:.78rem 0 .48rem; }
.starter-deck p { margin-bottom:.72rem; line-height:1.48; }
.starter-deck a { margin-top:.72rem; padding-top:.68rem; }
.starter-deck article:nth-child(1) .price-chip-face {
  transform:rotateX(54deg) rotateZ(-3deg) translateY(17px);
  box-shadow:0 2px 0 #bbfbff,0 4px 0 #087986,0 7px 0 #03101a,0 10px 0 #0a8e9c,0 13px 0 #04101a,0 16px 0 #c21a79,0 19px 0 #05101c,0 32px 40px rgba(0,0,0,.68),inset 0 1px 0 rgba(255,255,255,.42),inset 0 -2px 0 rgba(0,0,0,.7),inset 0 0 0 5px rgba(5,14,27,.72),inset 0 0 0 7px rgba(76,228,240,.3),inset 0 0 34px rgba(16,232,255,.08);
}
.starter-deck article:nth-child(2) .price-chip-face {
  transform:rotateX(54deg) rotateZ(2.2deg) translateY(4px);
  box-shadow:0 2px 0 #ffc4e3,0 4px 0 #9d155e,0 7px 0 #03101a,0 10px 0 #0a8e9c,0 13px 0 #04101a,0 16px 0 #c21a79,0 19px 0 #05101c,0 22px 0 #087986,0 25px 0 #04101a,0 40px 48px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.42),inset 0 -2px 0 rgba(0,0,0,.7),inset 0 0 0 5px rgba(5,14,27,.72),inset 0 0 0 7px rgba(222,51,145,.28),inset 0 0 34px rgba(255,36,154,.08);
}
.starter-deck article:nth-child(3) .price-chip-face {
  transform:rotateX(54deg) rotateZ(-1.2deg) translateY(-8px);
  box-shadow:0 2px 0 #bbfbff,0 4px 0 #087986,0 7px 0 #03101a,0 10px 0 #c21a79,0 13px 0 #04101a,0 16px 0 #0a8e9c,0 19px 0 #05101c,0 22px 0 #7547ca,0 25px 0 #04101a,0 28px 0 #c21a79,0 31px 0 #05101c,0 47px 55px rgba(0,0,0,.72),inset 0 1px 0 rgba(255,255,255,.42),inset 0 -2px 0 rgba(0,0,0,.7),inset 0 0 0 5px rgba(5,14,27,.72),inset 0 0 0 7px rgba(76,228,240,.3),inset 0 0 34px rgba(16,232,255,.08);
}
.starter-deck article:nth-child(4) .price-chip-face {
  transform:rotateX(54deg) rotateZ(3deg) translateY(10px);
  box-shadow:0 2px 0 #ffc4e3,0 4px 0 #9d155e,0 7px 0 #03101a,0 10px 0 #0a8e9c,0 13px 0 #04101a,0 16px 0 #c21a79,0 19px 0 #05101c,0 34px 43px rgba(0,0,0,.68),inset 0 1px 0 rgba(255,255,255,.42),inset 0 -2px 0 rgba(0,0,0,.7),inset 0 0 0 5px rgba(5,14,27,.72),inset 0 0 0 7px rgba(222,51,145,.28),inset 0 0 34px rgba(255,36,154,.08);
}
.starter-deck article:hover::before,
.starter-deck article:focus-within::before {
  opacity:.48;
  transform:translateY(32px) scaleX(.8);
}
.starter-deck article:hover .price-chip-face,
.starter-deck article:focus-within .price-chip-face {
  transform:rotateX(0deg) rotateZ(0deg) translate3d(0,-50px,105px) scale(1.075);
  box-shadow:0 2px 0 #d7fdff,0 5px 0 #087986,0 9px 0 #03101a,0 13px 0 #c21a79,0 17px 0 #05101c,0 34px 76px rgba(0,0,0,.76),0 0 52px rgba(16,232,255,.31),inset 0 1px 0 rgba(255,255,255,.5),inset 0 -2px 0 rgba(0,0,0,.7),inset 0 0 0 5px rgba(5,14,27,.72),inset 0 0 0 7px rgba(110,243,255,.36),inset 0 0 38px rgba(16,232,255,.11);
}
@media (max-width:980px) {
  .play-space-fair::after { background-position:center,center 70%; }
  .starter-deck { gap:1.8rem 2rem; padding-top:2rem; }
}
@media (max-width:759px) {
  .play-space-fair::after { background-size:100% 100%,auto 68%; background-position:center,center 76%; }
  .starter-deck { gap:1.4rem; padding:1.4rem .35rem 2.5rem; }
  .starter-deck article { min-height:270px; }
  .price-chip-face { min-height:248px; }
}

/* Conference-room presentation stage */
.play-space-fair {
  padding-top:clamp(8.4rem,14vw,10rem);
  padding-bottom:clamp(4.2rem,7vw,6.4rem);
}
.play-space-fair::after {
  background-color:#061225;
  background-image:
    linear-gradient(180deg,rgba(2,7,18,.03) 0%,rgba(2,7,18,.08) 43%,rgba(2,7,18,.02) 58%,rgba(2,7,18,.14) 100%),
    url("assets/generated/ki-joker-konferenzraum-preise-v1.optimized.webp");
  background-size:100% 100%,cover;
  background-position:center,center top;
  border-color:rgba(126,231,255,.38);
  box-shadow:inset 0 1px rgba(255,255,255,.14),inset 0 0 150px rgba(0,0,0,.18),0 40px 110px rgba(0,0,0,.38);
}
.fair-deal-head {
  gap:.45rem 3rem;
  margin-bottom:1.05rem;
}
.fair-deal-head h2 {
  max-width:14ch;
  font-size:clamp(2rem,4.1vw,3.8rem);
  text-shadow:0 2px 22px rgba(0,0,0,.72),0 0 26px rgba(16,232,255,.1);
}
.fair-deal-copy {
  padding:.85rem 1rem;
  border-left:2px solid rgba(16,232,255,.62);
  background:linear-gradient(90deg,rgba(4,13,29,.5),rgba(4,13,29,.12));
  backdrop-filter:blur(3px);
}
.fair-deal-copy h3 { margin-bottom:.55rem; }
.fair-deal-copy p { font-size:clamp(.82rem,1.15vw,.98rem); line-height:1.55; }
.fair-principles {
  gap:.7rem;
  margin-bottom:1rem;
}
.fair-principles article {
  padding:.9rem 1rem;
  border-color:rgba(143,240,255,.22);
  border-radius:14px;
  background:linear-gradient(155deg,rgba(5,15,32,.72),rgba(3,8,20,.48));
  box-shadow:inset 0 1px rgba(255,255,255,.07),0 12px 28px rgba(0,0,0,.18);
  backdrop-filter:blur(4px);
}
.fair-principles span { margin-bottom:.45rem; }
.fair-principles strong { min-height:2.35em; margin-bottom:.35rem; font-size:.94rem; }
.fair-principles p { font-size:.78rem; line-height:1.45; }
.play-space-fair .starter-deck {
  grid-template-columns:repeat(2,minmax(0,1fr));
  max-width:960px;
  gap:2rem 2.4rem;
  padding:3.4rem 1rem 4rem;
  perspective-origin:50% 4%;
}
.play-space-fair .price-note {
  padding:.72rem 1.15rem;
  border:1px solid rgba(143,240,255,.16);
  border-radius:999px;
  background:rgba(3,9,20,.6);
  color:#c2cede;
  backdrop-filter:blur(5px);
}
@media (min-width:981px) {
  .play-space-fair .starter-deck article { min-height:294px; }
  .play-space-fair .price-chip-face { min-height:264px; }
}
@media (max-width:980px) {
  .play-space-fair {
    padding-top:clamp(8rem,16vw,9.2rem);
    padding-bottom:4.5rem;
  }
  .play-space-fair::after { background-size:100% 100%,cover; background-position:center,center top; }
  .play-space-fair .starter-deck { padding-top:3rem; }
}
@media (max-width:759px) {
  .play-space-fair { padding-top:7rem; }
  .play-space-fair::after {
    background-size:100% 100%,auto 100%;
    background-position:center,center top;
  }
  .fair-deal-copy { padding:.75rem .8rem; }
  .fair-principles article { padding:.85rem; }
  .play-space-fair .starter-deck {
    grid-template-columns:1fr;
    gap:1.35rem;
    padding:2.2rem .35rem 2.8rem;
  }
  .play-space-fair .price-note { border-radius:18px; }
}

/* Robust independent face flip */
.hero-flip-inner { transform:none!important; filter:none!important; -webkit-transform-style:preserve-3d; transform-style:preserve-3d; }
.hero-card-face { transition:transform .72s cubic-bezier(.2,.82,.2,1),filter .35s ease; -webkit-backface-visibility:hidden; backface-visibility:hidden; }
.hero-card-front { transform:rotateY(0deg); }
.hero-card-back { transform:rotateY(180deg); }
.hero-flip-card.is-flipped .hero-card-front,
.hero-flip-card.is-expanded .hero-card-front { transform:rotateY(-180deg); }
.hero-flip-card.is-flipped .hero-card-back,
.hero-flip-card.is-expanded .hero-card-back { transform:rotateY(0deg); }
.hero-flip-card.is-flipped { filter:drop-shadow(0 22px 28px rgba(0,0,0,.5)); }
.hero-flip-card.is-expanded .hero-flip-inner { transform:none!important; filter:none!important; }

/* Detailzustand bleibt für ältere Klassen erhalten; Hover öffnet nun direkt die Vollansicht per JS. */
.hero-flip-card { transform-origin:center center; transition:scale .42s cubic-bezier(.2,.82,.2,1),filter .35s ease; }
.hero-flip-card:hover,
.hero-flip-card:focus-visible { z-index:12; filter:drop-shadow(0 18px 28px rgba(0,0,0,.52)) drop-shadow(0 0 24px rgba(16,232,255,.2)); }
.hero-flip-card:hover .hero-card-face,
.hero-flip-card:focus-visible .hero-card-face { border-color:rgba(16,232,255,.88); box-shadow:0 0 30px rgba(16,232,255,.3),0 0 46px rgba(255,20,147,.14),inset 0 1px rgba(255,255,255,.18); filter:brightness(1.08) saturate(1.08); }
.service-detail-hotspot { position:relative; z-index:2; cursor:pointer; }
.service-detail-hotspot:hover,
.service-detail-hotspot:focus-visible { text-shadow:0 0 18px currentColor; }
.hero-flip-card.is-flipped { z-index:45; scale:1.84; filter:drop-shadow(0 38px 50px rgba(0,0,0,.78)) drop-shadow(0 0 30px rgba(16,232,255,.24)); }
.hero-flip-card:nth-child(1) { transform-origin:left center; }
.hero-flip-card:nth-child(4) { transform-origin:right center; }
.hero-flip-card.is-expanded { scale:1!important; transform-origin:center center; }
.has-expanded-hero-card .hero-card-table { z-index:220; overflow:visible; isolation:auto; }
.has-expanded-hero-card .hero-card-grid { perspective:none; }
.has-expanded-hero-card .hero-flip-card.is-expanded { z-index:260; }
.has-expanded-hero-card::after { z-index:210; }
.hero-flip-card.is-flipped .hero-video-copy ul { display:grid; }
.hero-flip-card.is-flipped .hero-video-copy { min-height:46%; }
.hero-card-grid { overflow:visible; }
.hero-card-grid:has(.hero-flip-card.is-flipped) .hero-flip-card:not(.is-flipped) { opacity:.28; filter:blur(1.5px) saturate(.55); }
.hero-flip-card { transition:scale .42s cubic-bezier(.2,.82,.2,1),filter .35s ease,opacity .3s ease; }
@media (max-width:1100px) { .hero-flip-card.is-flipped { scale:1.46; } }
@media (max-width:680px) { .hero-flip-card.is-flipped { scale:1.18; } }
.hero-card-back .hero-video-play { display:none; }
[data-reveal] { opacity: 1; transform: translateY(14px); transition: transform .7s ease, filter .7s ease; filter: saturate(.92); }
[data-reveal].is-visible { transform: translateY(0); filter: saturate(1); }
@media (min-width: 760px) { .nav { display: flex; } .brand-line { display: block; } .hero { grid-template-columns: .98fr 1.02fr; } .hero-copy { position: relative; z-index: 8; } .hero-stage { z-index: 2; } h1 { font-size: clamp(4rem, 7.6vw, 6.55rem); max-width: 9.2ch; } .output-strip { grid-template-columns: auto 1fr; align-items: center; padding-inline: 2rem; } .service-grid { grid-template-columns: repeat(2, 1fr); } .reality-grid { grid-template-columns: repeat(2, 1fr); } .watch-grid { grid-template-columns: 1.25fr .75fr; align-items: stretch; } .landing-preview { grid-template-columns: 1.15fr .85fr; align-items: center; } .case-grid { grid-template-columns: repeat(3, 1fr); } .case-card.large { grid-column: span 2; grid-row: span 2; } .case-card.wide { grid-column: span 2; } .showreel-panel { grid-template-columns: 1.25fr .75fr; align-items: center; } .why-grid { grid-template-columns: repeat(3, 1fr); } .automation-card { grid-template-columns: .9fr 1.1fr; padding: 2rem; } }
@media (min-width: 760px) {
  .hero-copy { width: min(100%, 700px); }
  .hero-copy h1 { max-width: 10.5ch; font-size: clamp(3.65rem, 5.1vw, 4.6rem); }
}
@media (min-width: 900px) { .service-stage { grid-template-columns: minmax(400px,.9fr) minmax(0,1.1fr); } .reality-demo:first-child { grid-column: 1 / -1; } .room-concept-grid { grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); } }
@media (min-width: 760px) { .drone-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 759px) { .brand-copy small { display: none; } .brand-line { display: none; } .site-header { grid-template-columns: auto auto; } .header-cta { display: none; } .nav { display: none; } h1 { font-size: clamp(3rem, 15vw, 4.8rem); } .hero-stage { min-height: 620px; } .show-card[data-pos="0"] { transform: translate(-50%, -54%) translate3d(0, -42px, 180px) rotateY(-3deg) rotateZ(-1deg) scale(.94); } .show-card[data-pos="1"] { transform: translate(-50%, -50%) translate3d(-52px, 126px, 70px) rotateY(8deg) rotateZ(2deg) scale(.82); } .show-card[data-pos="2"] { transform: translate(-50%, -50%) translate3d(74px, 158px, 20px) rotateY(-9deg) rotateZ(-3deg) scale(.72); } .show-card[data-pos="3"] { transform: translate(-50%, -50%) translate3d(-70px, -150px, -30px) rotateY(12deg) rotateZ(3deg) scale(.66); } .dash-metrics { grid-template-columns: 1fr; } .pipeline { grid-template-columns: repeat(5, minmax(82px, 1fr)); overflow-x: auto; } }
@media (max-width: 759px) {
  .hero { min-height: calc(100svh - 69px); padding: 3.6rem 1rem 5rem; align-items: center; }
  .hero::before { background: linear-gradient(90deg, rgba(2,4,9,.78), rgba(2,4,9,.46)), linear-gradient(180deg, rgba(1,2,5,.58) 0%, rgba(1,2,5,.38) 44%, rgba(1,2,5,.88) 100%); }
  .hero-intro .hero-media::after { left:68%; top:47%; width:clamp(120px,42vw,185px); opacity:.38; filter:blur(12px) saturate(1.08); }
  .hero-media video { object-position: center; filter: brightness(.64) saturate(.86) contrast(1.08); }
  .hero-copy { width: 100%; }
  .hero-copy h1 { max-width: 9.5ch; font-size: clamp(2.85rem, 12.5vw, 4.1rem); }
  .hero-copy .lead { max-width: 35rem; font-size: 1rem; line-height: 1.55; }
  .hero-actions { margin: 1.4rem 0; }
  .hero-film-label { right: auto; left: 1rem; bottom: 1rem; font-size: .58rem; }
  .service-stage-section { padding-top: 4rem; }
  .service-stage-section .section-heading h2 { font-size: clamp(2.35rem, 11vw, 3.5rem); }
  .service-stage { min-height: 0; padding: 1rem .7rem 1.2rem; border-radius: 26px; gap: 1.35rem; }
  .service-deck { min-height: 470px; width: 100%; overflow: visible; }
  .service-choice { --active-transform: translate(-50%,-50%) translate3d(-30px,4px,140px) rotateY(4deg) rotateZ(-1deg) scale(.98); width: min(72vw,280px); border-radius: 25px; }
  .service-choice[data-pos="0"] { transform: var(--active-transform); }
  .service-choice[data-pos="1"] { transform: translate(-50%,-50%) translate3d(26px,-20px,30px) rotateY(-6deg) rotateZ(2deg) scale(.87); }
  .service-choice[data-pos="2"] { transform: translate(-50%,-50%) translate3d(62px,-34px,-35px) rotateY(-8deg) rotateZ(3deg) scale(.78); }
  .service-choice[data-pos="3"] { transform: translate(-50%,-50%) translate3d(92px,-46px,-90px) rotateY(-10deg) rotateZ(4deg) scale(.69); }
  .service-choice[data-pos="0"]:hover { transform: translate(-50%,-50%) translate3d(-28px,-4px,140px) rotateY(3deg) rotateZ(-1deg) scale(.98); }
  .service-showcase, .service-panel { min-height: 0; }
  .service-panel { grid-template-rows: 240px auto; border-radius: 22px; }
  .service-panel-media img, .service-panel-media video { min-height: 240px; }
  .service-panel-copy ul { grid-template-columns: 1fr; }
  .landing-carousel { padding: .65rem; overflow: hidden; }
  .landing-carousel-track { display: grid; grid-auto-flow: column; grid-auto-columns: 84%; grid-template-columns: none; gap: .75rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: .35rem .2rem 1rem; }
  .landing-card, .landing-card[data-pos="0"], .landing-card[data-pos="1"], .landing-card[data-pos="2"] { width: 100%; margin-left: 0; border-radius: 22px; scroll-snap-align: center; opacity: 1; filter: none; transform: none; }
  .landing-card-copy { grid-template-columns: 1fr; padding: 3.2rem .85rem .8rem; }
  .landing-card-copy em { display: none; }
  .landing-carousel-controls { display: flex; }
  .room-concept-copy { grid-template-columns: 1fr; }
  .room-concept-copy > span { grid-column: auto; }
  .room-panel-top { align-items: flex-start; flex-direction: column; gap: .35rem; }
  .room-panel-top b { text-align: left; }
  .room-plan-panel > img, .room-look-viewer { aspect-ratio: 4/3; }
  .landing-modal { width: 100vw; height: 100dvh; border: 0; border-radius: 0; }
  .landing-modal-header { grid-template-columns: 1fr auto; }
  .landing-device-switch { grid-column: 1/-1; grid-row: 2; justify-content: center; }
  .hover-hint { font-size: .58rem!important; }
  .portfolio-screen { min-height: 0; padding-top: 3.2rem; padding-bottom: 3.2rem; }
  .compact-heading h2 { font-size: clamp(2.2rem,10.5vw,3.2rem); }
  .production-viewer { height: 355px; border-radius: 23px; }
  .production-selector { grid-template-columns: 1fr; }
  .production-case { min-height: 178px; }
  .formats-bento { grid-template-columns: 1fr; }
  .websites-tile, .drone-tile, .avatar-tile, .content-strip, .room-tile { grid-column: auto; grid-row: auto; }
  .websites-tile { padding: .75rem; }
  .compact-landing .landing-carousel-track { min-height: 330px; }
  .drone-tile, .avatar-tile { min-height: 250px; grid-template-columns: 1.08fr .92fr; }
  .content-strip { grid-template-columns: 1fr; padding: 1rem; }
  .room-tile { min-height: 280px; }
  .content-rail { height: 82px; grid-template-columns: repeat(4, minmax(125px,1fr)); overflow-x: auto; }
}
@media (max-width: 980px) {
  .production-layout { height: auto; grid-template-columns: 1fr; }
  .production-viewer { min-height: 470px; }
  .production-selector { grid-template-rows: none; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .production-case { min-height: 190px; }
  .formats-bento { height: auto; grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: none; }
  .websites-tile { grid-column: 1/-1; grid-row: auto; }
  .drone-tile, .avatar-tile { min-height: 260px; }
  .content-strip { grid-column: 1; }
  .room-tile { grid-column: 2; min-height: 260px; }
}
@media (max-width: 759px) {
  .production-selector { grid-template-columns: 1fr; }
  .production-viewer { min-height: 355px; }
  .formats-bento { grid-template-columns: 1fr; }
  .websites-tile, .content-strip, .room-tile { grid-column: auto; }
}
@media (max-width: 1050px) {
  .team-grid { max-width: 790px; grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 680px) {
  .team-grid { max-width: 560px; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .85rem; }
}
@media (max-width: 460px) {
  .team-grid { max-width: 315px; grid-template-columns: 1fr; gap: 1rem; }
  .team-card { border-radius: 27px; }
  .team-front-copy strong { font-size: 1.28rem; }
  .team-front-copy small, .team-card-back > span:not(.team-card-index) { font-size: .78rem; }
}
@media (prefers-reduced-motion: reduce) {
  .site-header, .brand img, .nav a, .nav-indicator, .header-progress i, .service-choice, .service-choice::after, .service-choice img, .service-panel, .service-wave i, .team-card-inner, .team-portrait img { transition: none!important; animation: none!important; }
}
@keyframes nav-active-pulse { 0%,100% { opacity: .65; scale: .8; } 50% { opacity: 1; scale: 1.35; } }
@keyframes service-card-deal { from { opacity: 0; transform: translate(-50%,-50%) translate3d(280px,-48px,280px) rotateY(-18deg) rotateZ(8deg) scale(.9); filter: brightness(1.16) blur(4px); } 48% { opacity: 1; filter: brightness(1.08) blur(0); } 78% { transform: translate(-50%,-50%) translate3d(-72px,-8px,188px) rotateY(7deg) rotateZ(-2.2deg) scale(1.015); } to { opacity: 1; transform: var(--active-transform); filter: brightness(1.04) blur(0); } }
@keyframes service-panel-in { from { opacity: 0; transform: translate3d(110px,0,0) scale(.97); filter: blur(9px); } 58% { opacity: 1; filter: blur(0); } to { opacity: 1; transform: translate3d(0,0,0) scale(1); filter: blur(0); } }
@keyframes service-panel-out { from { opacity: 1; transform: translate3d(0,0,0) scale(1); filter: blur(0); } to { opacity: 0; transform: translate3d(-42px,0,0) scale(.985); filter: blur(6px); } }
@keyframes service-wave { from { transform: scaleY(.58); opacity: .58; } to { transform: scaleY(1.08); opacity: 1; } }
@keyframes float { 0%,100% { translate: 0 0; } 50% { translate: 0 -14px; } }
@keyframes drift { to { transform: translate(4rem, 2rem) scale(1.08); } }
@keyframes hue { to { filter: hue-rotate(360deg); } }
@keyframes spin { to { rotate: 1turn; } }
@keyframes sheen { 20%, 100% { transform: translateX(120%); } }
@keyframes hero-pulse { 0%,100% { opacity: .45; transform: scale(.75); } 50% { opacity: 1; transform: scale(1.15); } }
@keyframes hero-logo-card-glow {
  0%,100% { opacity:.36; transform:translate3d(0,8px,0) scale(.96); filter:blur(15px) saturate(1.05); }
  48% { opacity:.74; transform:translate3d(0,-8px,0) scale(1.05); filter:blur(11px) saturate(1.32); }
}
@keyframes particle-drift { from { transform: translate3d(0, 0, 0) scale(.75); opacity: 0; } 12% { opacity: .85; } to { transform: translate3d(20px, -115vh, 0) scale(1.35); opacity: 0; } }

/* Card-table hero */
body { font-weight: 400; letter-spacing: .01em; }
p, li { font-family: "Orbitron", ui-sans-serif, system-ui, sans-serif; }
.hero-card-table { min-height: calc(100svh - 77px); max-width: none; display: grid; grid-template-columns: minmax(300px,.82fr) minmax(560px,1.18fr); gap: clamp(2.5rem,6vw,7rem); align-items: center; padding: clamp(4rem,8vh,6.5rem) max(1rem,calc((100vw - 1380px)/2)); background: radial-gradient(circle at 72% 46%,rgba(16,232,255,.13),transparent 30rem), radial-gradient(circle at 28% 12%,rgba(255,20,147,.08),transparent 27rem), #03060c; overflow: hidden; }
.hero-card-table::before { content:""; position:absolute; inset:0; pointer-events:none; background-image: linear-gradient(rgba(16,232,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(16,232,255,.025) 1px,transparent 1px); background-size:48px 48px; mask-image:linear-gradient(to bottom,transparent,#000 25%,#000 80%,transparent); }
.hero-card-table .hero-copy { width:100%; max-width:600px; }
.hero-card-table h1 { max-width:11ch; font-size:clamp(3.2rem,6vw,6.7rem); line-height:.95; letter-spacing:-.055em; color:var(--cyan); text-shadow:0 0 34px rgba(16,232,255,.2); }
.hero-card-table .hero-claim { max-width:none; font-size:clamp(2.25rem,3.45vw,4.35rem); line-height:1; letter-spacing:-.05em; text-align:center; }
.hero-claim span { display:block; white-space:nowrap; }
.hero-claim-intro { margin-bottom:.2em; color:#d8e6f5; font-size:.68em; font-weight:500; letter-spacing:-.025em; text-shadow:0 0 22px rgba(16,232,255,.1); }
.hero-claim-main { color:var(--cyan); font-size:1em; font-weight:800; }
.hero-card-table .lead { max-width:58ch; font-size:clamp(.9rem,1.25vw,1.05rem); line-height:1.75; color:#b8c6d9; }
.hero-card-grid { position:relative; z-index:2; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(.65rem,1.25vw,1rem); perspective:1600px; }
.hero-check-slot { position:relative; z-index:3; grid-column:2; width:min(1240px,calc(100% - 2rem)); min-height:540px; margin:clamp(3.5rem,7vw,6.5rem) auto 0; border:1px solid rgba(16,232,255,.16); border-radius:34px; background-image:linear-gradient(90deg,rgba(2,6,15,.66) 0%,rgba(2,6,15,.28) 44%,rgba(2,6,15,.08) 76%,rgba(2,6,15,.2) 100%),url("assets/generated/ki-joker-check-desk-laptop-v3.optimized.webp"); background-size:cover; background-position:center; background-repeat:no-repeat; box-shadow:0 34px 90px rgba(0,0,0,.42),inset 0 1px rgba(255,255,255,.08); overflow:hidden; perspective:1200px; perspective-origin:50% 50%; isolation:isolate; }
.hero-check-slot[data-reveal] { opacity:1; transform:none; filter:none; transition:none; }
.hero-check-cta { position:absolute; top:1.5rem; left:68%; display:flex; flex-direction:column; align-items:center; justify-content:center; width:250px; min-height:360px; aspect-ratio:.72; padding:2rem; border:1px solid rgba(16,232,255,.55); border-radius:24px; background:radial-gradient(circle at 50% 46%,rgba(45,37,91,.66),transparent 44%),linear-gradient(145deg,rgba(5,14,27,.98),rgba(24,10,38,.98)); box-shadow:0 30px 65px rgba(0,0,0,.55),0 0 34px rgba(16,232,255,.12),0 0 40px rgba(255,24,164,.1),inset 0 1px rgba(255,255,255,.12); text-align:center; overflow:hidden; opacity:0; transform:translate3d(-90vw,-1rem,0) rotateX(8deg) rotateY(14deg) rotateZ(-12deg) scale(.78); transform-origin:50% 65%; transform-style:preserve-3d; will-change:transform,opacity; }
.hero-check-cta::before { content:""; position:absolute; inset:13px; border:1px solid rgba(255,255,255,.14); border-radius:23px; background:linear-gradient(135deg,rgba(16,232,255,.05),transparent 38%,rgba(255,24,164,.07)); pointer-events:none; }
.hero-check-cta::after { content:none; }
.hero-check-slot.is-visible .hero-check-cta { animation:check-card-deal 1.6s cubic-bezier(.14,.82,.18,1) both,check-card-wobble 3.8s 1.6s ease-in-out infinite; }
@keyframes check-card-deal {
  0% { opacity:0; transform:translate3d(-90vw,-1rem,0) rotateX(8deg) rotateY(14deg) rotateZ(-12deg) scale(.78); }
  27% { opacity:1; transform:translate3d(-24vw,1.1rem,35px) rotateX(-8deg) rotateY(-10deg) rotateZ(5deg) scale(.91); }
  52% { transform:translate3d(calc(-50% + 4.5vw),-.3rem,12px) rotateX(7deg) rotateY(6deg) rotateZ(3deg) scale(1.025); }
  70% { transform:translate3d(calc(-50% - 1.8vw),.2rem,-8px) rotateX(-5deg) rotateY(-4deg) rotateZ(-1.8deg) scale(.99); }
  86% { transform:translate3d(calc(-50% + .6vw),-.08rem,4px) rotateX(3.5deg) rotateY(2deg) rotateZ(1.4deg) scale(1.005); }
  100% { opacity:1; transform:translate3d(-50%,0,0) rotateX(1.5deg) rotateY(0) rotateZ(-1deg) scale(1); }
}
@keyframes check-card-wobble {
  0%,100% { transform:translate3d(-50%,0,0) rotateX(1.5deg) rotateY(0) rotateZ(-1deg); }
  24% { transform:translate3d(calc(-50% - 2px),-2px,5px) rotateX(-2.2deg) rotateY(1.4deg) rotateZ(-.35deg); }
  52% { transform:translate3d(calc(-50% + 2px),1px,-4px) rotateX(2.8deg) rotateY(-1.2deg) rotateZ(-1.55deg); }
  76% { transform:translate3d(calc(-50% - 1px),-1px,3px) rotateX(-1.4deg) rotateY(.7deg) rotateZ(-.7deg); }
}
.hero-check-copy { position:absolute; z-index:1; top:48%; right:calc(32% + 190px); width:min(480px,calc(68% - 215px)); text-align:right; opacity:0; filter:blur(14px); transform:translate3d(5.5rem,-50%,0) scaleX(.18); transform-origin:100% 50%; will-change:transform,filter,opacity; }
.hero-check-copy::before { content:""; position:absolute; z-index:-1; top:50%; right:-2.2rem; width:130%; height:145%; translate:0 -50%; background:repeating-linear-gradient(0deg,transparent 0 11px,rgba(16,232,255,.12) 12px 13px,transparent 14px 22px); mask-image:linear-gradient(90deg,transparent,rgba(0,0,0,.25) 28%,#000 100%); opacity:0; }
.hero-check-slot.is-visible .hero-check-copy { animation:check-copy-container .01s 1.22s linear both; }
.hero-check-slot.is-visible .hero-check-copy::before { animation:check-trails .9s 1.18s ease-out both; }
@keyframes check-copy-container {
  to { opacity:1; filter:blur(0); transform:translate3d(0,-50%,0) scaleX(1); }
}
@keyframes check-copy-slipstream {
  0% { opacity:0; filter:blur(14px); transform:translate3d(5.5rem,-50%,0) scaleX(.18); }
  55% { opacity:.75; filter:blur(4px); transform:translate3d(-.8rem,-50%,0) scaleX(1.04); }
  100% { opacity:1; filter:blur(0); transform:translate3d(0,-50%,0) scaleX(1); }
}
.check-word { display:inline-block; white-space:nowrap; }
.check-copy-line { display:block; white-space:nowrap; }
.check-letter { display:inline-block; opacity:0; filter:blur(8px); transform:translate3d(28px,0,0) rotateY(-74deg) scale(.7); transform-origin:100% 50%; will-change:transform,filter,opacity; }
.hero-check-slot.is-visible .check-letter { animation:check-letter-build .46s var(--char-delay) cubic-bezier(.14,.82,.2,1) both; }
@keyframes check-letter-build {
  0% { opacity:0; filter:blur(8px); transform:translate3d(28px,0,0) rotateY(-74deg) scale(.7); text-shadow:18px 0 16px rgba(16,232,255,.34); }
  62% { opacity:1; filter:blur(1px); transform:translate3d(-2px,0,0) rotateY(7deg) scale(1.04); text-shadow:-5px 0 10px rgba(255,24,164,.24); }
  100% { opacity:1; filter:blur(0); transform:none; text-shadow:none; }
}
@keyframes check-trails {
  0% { opacity:0; transform:translateX(4rem) scaleX(.25); }
  45% { opacity:.7; }
  100% { opacity:.22; transform:translateX(0) scaleX(1); }
}
.hero-check-copy h3 { margin:1rem 0 .9rem; color:#fff; font-size:clamp(1.8rem,3.2vw,3.35rem); line-height:1.08; letter-spacing:-.05em; text-wrap:balance; }
.hero-check-copy p { margin:0 0 0 auto; max-width:42ch; color:#b8c6d9; font-size:clamp(.96rem,1.35vw,1.12rem); line-height:1.65; }
.hero-check-copy small { display:block; width:max-content; max-width:100%; margin:0 0 .9rem auto; padding:.52rem .75rem .5rem .9rem; border-left:3px solid var(--cyan); border-radius:4px 10px 10px 4px; color:#86f5ff; background:linear-gradient(90deg,rgba(3,9,20,.52),rgba(3,9,20,.78)); box-shadow:0 10px 28px rgba(0,0,0,.22),0 0 24px rgba(16,232,255,.08); backdrop-filter:blur(7px); font-size:clamp(.88rem,1.25vw,1.08rem); font-weight:800; letter-spacing:.04em; line-height:1.35; text-align:right; text-shadow:0 2px 12px rgba(0,0,0,.9),0 0 15px rgba(16,232,255,.25); text-transform:uppercase; white-space:nowrap; }
.check-card-logo { position:absolute; z-index:2; display:block; width:62px; aspect-ratio:1; object-fit:cover; border-radius:50%; mix-blend-mode:screen; -webkit-mask-image:radial-gradient(ellipse 76% 82% at 50% 50%,#000 46%,rgba(0,0,0,.92) 64%,transparent 100%); mask-image:radial-gradient(ellipse 76% 82% at 50% 50%,#000 46%,rgba(0,0,0,.92) 64%,transparent 100%); filter:brightness(1.12) contrast(1.32) saturate(1.28) drop-shadow(0 0 13px rgba(16,232,255,.26)) drop-shadow(0 0 15px rgba(255,24,164,.24)); }
.check-card-logo-top { top:1.3rem; left:1.3rem; }
.check-card-logo-bottom { right:1.3rem; bottom:1.3rem; transform:rotate(180deg); }
.check-card-button { position:absolute; z-index:4; top:50%; left:50%; display:grid; place-items:center; width:106px; aspect-ratio:1; translate:-50% -50%; border:1px solid rgba(255,255,255,.5); border-radius:50%; color:#fff; background:linear-gradient(135deg,#ff18a4,#985bff); box-shadow:0 0 28px rgba(255,24,164,.48),0 15px 34px rgba(0,0,0,.38),inset 0 1px rgba(255,255,255,.35); font:800 .76rem/1 "Orbitron",sans-serif; letter-spacing:.09em; text-decoration:none; transition:transform .25s ease,box-shadow .25s ease; }
.check-card-button:hover,.check-card-button:focus-visible { transform:scale(1.07) rotate(-3deg); box-shadow:0 0 44px rgba(255,24,164,.68),0 22px 48px rgba(0,0,0,.42),inset 0 1px rgba(255,255,255,.42); }
.check-card-button:focus-visible { outline:2px solid var(--cyan); outline-offset:5px; }
.hero-flip-card { min-width:0; aspect-ratio:.68; outline:none; perspective:1100px; cursor:pointer; }
.hero-flip-inner { position:relative; width:100%; height:100%; transform-style:preserve-3d; transition:transform .78s cubic-bezier(.2,.82,.2,1),filter .35s ease; }
.hero-flip-card:nth-child(2) { transform:translateY(2.2rem); }
.hero-flip-card:nth-child(3) { transform:translateY(-1.1rem); }
.hero-flip-card:nth-child(4) { transform:translateY(1.2rem); }
.hero-flip-card.is-flipped .hero-flip-inner { transform:rotateY(180deg) translateY(-10px); filter:drop-shadow(0 22px 28px rgba(0,0,0,.5)); }
.has-expanded-hero-card { overflow:hidden; }
.has-expanded-hero-card::after { content:""; position:fixed; z-index:199; inset:0; background:rgba(1,3,8,.88); backdrop-filter:blur(16px); }
.hero-flip-card.is-expanded { position:fixed; z-index:200; left:50%; top:50%; width:min(92vw,780px); height:min(88vh,920px); aspect-ratio:auto; translate:-50% -50%; transform:none!important; perspective:1800px; }
.hero-flip-card.is-expanded .hero-flip-inner { transform:rotateY(180deg)!important; filter:drop-shadow(0 35px 70px rgba(0,0,0,.72)); }
.hero-flip-card.is-expanded .hero-card-face { border-radius:clamp(18px,2vw,32px); border-color:rgba(16,232,255,.75); box-shadow:0 0 55px rgba(16,232,255,.25),0 0 90px rgba(255,20,147,.12); }
.hero-flip-card.is-expanded .hero-video-play { width:78px; height:78px; top:42%; font-size:1.35rem; }
.hero-flip-card.is-expanded .hero-video-copy { left:clamp(1.4rem,4vw,3.2rem); right:clamp(1.4rem,4vw,3.2rem); bottom:clamp(1.4rem,4vw,3rem); }
.hero-flip-card.is-expanded .hero-video-copy strong { font-size:clamp(1rem,2vw,1.5rem); }
.hero-flip-card.is-expanded .hero-video-copy p { max-width:62ch; margin-top:.75rem; font-size:clamp(.72rem,1.2vw,1rem); }
.hero-flip-card.is-expanded::after { content:"×  Ansicht schließen"; position:absolute; z-index:210; right:1rem; top:1rem; padding:.55rem .75rem; border:1px solid rgba(255,255,255,.28); border-radius:999px; color:#fff; background:rgba(2,7,15,.75); font:600 .62rem/1 "Orbitron",sans-serif; letter-spacing:.04em; pointer-events:none; }
.hero-card-face { position:absolute; inset:0; overflow:hidden; border:1px solid rgba(16,232,255,.55); border-radius:clamp(16px,1.6vw,25px); backface-visibility:hidden; background:linear-gradient(145deg,#101522,#070a12); box-shadow:0 0 24px rgba(16,232,255,.16),inset 0 1px rgba(255,255,255,.11); }
.hero-card-front { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:1rem; text-align:center; }
.hero-card-front::before { content:""; position:absolute; inset:9px; border:1px solid rgba(255,255,255,.07); border-radius:inherit; pointer-events:none; }
.hero-card-front > b { font:400 clamp(4rem,6vw,7rem)/1 Georgia,serif; color:var(--cyan); filter:drop-shadow(0 0 17px currentColor); }
.hero-card-front strong { margin-top:1.1rem; font-size:clamp(.9rem,1.5vw,1.35rem); line-height:1.15; text-transform:uppercase; letter-spacing:.045em; }
.hero-card-front > small { margin-top:.45rem; color:#8190a6; font-size:clamp(.5rem,.65vw,.65rem); line-height:1.4; }
.card-rank { position:absolute; left:.8rem; top:.7rem; display:grid; color:#dffcff; font-weight:800; font-size:1.1rem; line-height:1; text-align:center; }
.card-rank small { font:400 1rem Georgia,serif; }
.suit-diamond > b,.suit-heart > b,.suit-diamond .card-rank,.suit-heart .card-rank { color:var(--pink); }
.suit-club > b { color:#08d79b; }
.hero-card-back { transform:rotateY(180deg); background:#050916; }
.hero-card-back video,.hero-card-back > img { width:100%; height:62%; object-fit:cover; object-position:center; filter:saturate(1.04) contrast(1.04) brightness(.96); }
.hero-card-back::after { content:""; position:absolute; z-index:2; left:0; right:0; top:0; height:62%; background:linear-gradient(180deg,transparent 58%,#050916 100%); pointer-events:none; }
.hero-video-play { position:absolute; z-index:3; left:50%; top:29%; translate:-50% -50%; display:grid; place-items:center; width:clamp(42px,4vw,58px); height:clamp(42px,4vw,58px); padding-left:0; border:1px solid rgba(16,232,255,.7); border-radius:50%; color:#fff; background:rgba(2,7,15,.58); box-shadow:0 0 28px rgba(16,232,255,.38); font-size:clamp(.9rem,1.3vw,1.15rem); font-style:normal; backdrop-filter:blur(8px); }
.hero-video-copy { position:absolute; z-index:4; left:0; right:0; bottom:0; min-height:42%; padding:clamp(.8rem,1.2vw,1.1rem); background:linear-gradient(145deg,rgba(8,14,29,.98),rgba(5,9,19,.99)); border-top:1px solid rgba(16,232,255,.2); }
.hero-video-copy strong { display:block; color:#fff; font-size:clamp(.58rem,.78vw,.76rem); line-height:1.35; text-transform:uppercase; }
.hero-video-copy p { margin:.38rem 0 0; color:#b8c6d9; font-size:clamp(.46rem,.58vw,.58rem); line-height:1.5; }
.hero-video-copy ul { display:none; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.28rem; margin:.55rem 0 0; padding:0; list-style:none; }
.hero-video-copy li { padding:.3rem .35rem; border:1px solid rgba(16,232,255,.18); border-radius:7px; color:#dcecff; background:rgba(3,9,20,.68); font-size:clamp(.38rem,.48vw,.48rem); line-height:1.25; }
.hero-flip-card.is-expanded .hero-card-back > img { height:64%; }
.hero-flip-card.is-expanded .hero-card-back::after { height:64%; }
.hero-flip-card.is-expanded .hero-video-copy { left:0; right:0; bottom:0; min-height:34%; padding:clamp(1.4rem,4vw,3rem); }
.hero-flip-card.is-expanded .hero-video-copy ul { display:none!important; }

/* Independent service detail modal: only image and description */
.service-detail-open { overflow:hidden; }
.service-detail-modal[hidden] { display:none!important; }
.service-detail-modal { position:fixed; z-index:1000; inset:0; display:grid; place-items:center; padding:clamp(1rem,4vw,3rem); background:rgba(1,3,10,.9); backdrop-filter:blur(18px); }
.service-detail-shell { position:relative; width:min(86vw,600px); height:min(92vh,900px); aspect-ratio:2/3; overflow:hidden; isolation:isolate; border:1px solid rgba(16,232,255,.72); border-radius:clamp(24px,3vw,38px); background:#030712; box-shadow:0 48px 130px rgba(0,0,0,.82),0 0 68px rgba(16,232,255,.28),0 0 110px rgba(255,20,147,.18),inset 0 1px rgba(255,255,255,.16); }
.service-detail-shell::before { content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,transparent 42%,rgba(3,7,18,.12) 54%,rgba(3,7,18,.88) 78%,#030712 100%); pointer-events:none; }
.service-detail-shell::after { content:""; position:absolute; inset:10px; z-index:4; border:1px solid rgba(255,255,255,.12); border-radius:calc(clamp(24px,3vw,38px) - 8px); box-shadow:inset 0 0 34px rgba(16,232,255,.06); pointer-events:none; }
.service-detail-shell > img { display:block; width:100%; height:100%; object-fit:cover; object-position:center; padding:0; background:#030712; filter:saturate(1.08) contrast(1.05) brightness(.96); transform:scale(1.002); }
.service-detail-copy { position:absolute; z-index:3; left:0; right:0; bottom:0; padding:clamp(1.65rem,4vw,2.7rem) clamp(1.5rem,4vw,2.7rem) clamp(1.8rem,4vw,2.8rem); background:none; text-shadow:0 2px 18px rgba(0,0,0,.9); }
.service-detail-copy::before { content:"LEISTUNG"; display:block; width:max-content; margin:0 0 .75rem; padding:.32rem .62rem; border:1px solid rgba(16,232,255,.55); border-radius:999px; background:rgba(5,10,25,.62); color:#69f4ff; font-size:.65rem; font-weight:800; letter-spacing:.18em; line-height:1; backdrop-filter:blur(10px); }
.service-detail-copy h2 { max-width:20ch; margin:0 0 .72rem; color:#fff; font-size:clamp(1.65rem,3.4vw,2.65rem); line-height:1.04; letter-spacing:-.02em; }
.service-detail-modal[data-service="copywriting"] .service-detail-copy h2 { max-width:none; font-size:clamp(1.35rem,2.45vw,1.95rem); white-space:nowrap; }
.service-detail-copy p { width:min(72%,38ch); max-width:38ch; margin:0 0 0 auto; color:#e6edf7; font-size:clamp(.88rem,1.2vw,1.04rem); line-height:1.52; text-align:right; text-wrap:pretty; }
.service-detail-close { position:absolute; z-index:3; right:1rem; top:1rem; display:grid; place-items:center; width:46px; height:46px; border:1px solid rgba(255,255,255,.35); border-radius:50%; color:#fff; background:rgba(2,7,15,.78); cursor:pointer; font-size:1.5rem; box-shadow:0 0 22px rgba(16,232,255,.2); }
@media (max-width:680px) { .service-detail-shell { width:min(92vw,500px); height:min(88vh,750px); } .service-detail-copy { padding:1.35rem 1.25rem 1.55rem; } .service-detail-copy::before { margin-bottom:.55rem; font-size:.57rem; } .service-detail-copy h2 { margin-bottom:.5rem; font-size:1.45rem; } .service-detail-copy p { width:82%; font-size:.82rem; line-height:1.42; } }
@media (max-width:680px) { .service-detail-modal[data-service="copywriting"] .service-detail-copy h2 { font-size:clamp(.92rem,4vw,1.25rem); } }
.hero-flip-card.is-expanded .hero-video-copy li { padding:.65rem .75rem; border-radius:12px; font-size:clamp(.7rem,1vw,.9rem); }
.hero-flip-card.is-expanded .hero-video-copy strong { max-width:32ch; }
.hero-flip-card.is-expanded .hero-video-copy p { max-width:54ch; }
.hero-hover-hint { position:absolute; z-index:3; right:max(1rem,calc((100vw - 1380px)/2)); bottom:1.25rem; display:flex; align-items:center; gap:.55rem; margin:0; color:#718096; font-size:.62rem; text-transform:uppercase; letter-spacing:.12em; }
.hero-hover-hint span { width:7px; height:7px; border-radius:50%; background:var(--cyan); box-shadow:0 0 12px var(--cyan); animation:hero-pulse 2s infinite; }
h1,h2,h3,.nav,.btn,.brand-copy,.brand-line,.eyebrow,strong { font-family:"Orbitron",ui-sans-serif,system-ui,sans-serif; }
h2 { letter-spacing:-.045em; }
.btn,.nav,.brand-line { letter-spacing:.025em; }
@media (max-width:1100px) { .hero-card-table { grid-template-columns:1fr; padding-top:4rem; } .hero-card-table .hero-copy { max-width:820px; text-align:center; margin:auto; } .hero-card-table h1,.hero-card-table .lead { margin-left:auto; margin-right:auto; } .hero-actions,.trust-row { justify-content:center; } .hero-card-grid { width:min(820px,100%); margin:auto; } .hero-check-slot { grid-column:1; width:min(940px,calc(100% - 2rem)); } .hero-check-copy { right:calc(32% + 180px); width:min(410px,calc(68% - 200px)); } }
@media (max-width:680px) { .hero-card-table { padding-bottom:5.5rem; } .hero-card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem; } .hero-flip-card:nth-child(n) { transform:none; } .hero-card-table h1 { font-size:clamp(2.7rem,13vw,4.2rem); } .hero-hover-hint { left:50%; right:auto; width:max-content; max-width:calc(100% - 2rem); translate:-50% 0; justify-content:center; text-align:center; white-space:normal; line-height:1.35; } }
@media (max-width:680px) { .hero-card-table .hero-claim { font-size:clamp(1.75rem,8.2vw,2.35rem); } }
@media (max-width:680px) { .hero-check-slot { display:flex; flex-direction:column-reverse; align-items:center; width:min(420px,calc(100% - .5rem)); min-height:690px; gap:2.5rem; padding:3rem 1.25rem; background-position:62% center; } .hero-check-copy { position:relative; top:auto; right:auto; width:100%; text-align:center; transform:translate3d(2rem,0,0) scaleX(.4); transform-origin:50% 50%; } .hero-check-copy::before { right:-5%; width:110%; } .hero-check-slot.is-visible .hero-check-copy { animation:check-copy-container-mobile .01s 1.12s linear both; } @keyframes check-copy-container-mobile { to { opacity:1; filter:blur(0); transform:none; } } .hero-check-copy p { margin-inline:auto; } .hero-check-copy small { white-space:normal; } .hero-check-cta { position:relative; top:auto; left:auto; width:min(235px,72vw); min-height:338px; padding:2rem; border-radius:22px; } .hero-check-slot.is-visible .hero-check-cta { animation:check-card-deal-mobile 1.35s cubic-bezier(.14,.82,.18,1) both,check-card-wobble-mobile 3.8s 1.35s ease-in-out infinite; } @keyframes check-card-deal-mobile { 0% { opacity:0; transform:translate3d(-105vw,0,0) rotateX(8deg) rotateZ(-10deg) scale(.78); } 45% { opacity:1; transform:translate3d(7vw,0,0) rotateX(-7deg) rotateZ(4deg) scale(1.02); } 72% { transform:translate3d(-2vw,0,0) rotateX(5deg) rotateZ(-2deg) scale(.99); } 100% { opacity:1; transform:rotateX(1.5deg) rotateZ(-1deg); } } @keyframes check-card-wobble-mobile { 0%,100% { transform:rotateX(1.5deg) rotateZ(-1deg); } 33% { transform:translateY(-2px) rotateX(-2deg) rotateZ(.4deg); } 66% { transform:translateY(1px) rotateX(2.5deg) rotateZ(-1.5deg); } } .check-card-logo { width:54px; } .check-card-logo-top { top:1rem; left:1rem; } .check-card-logo-bottom { right:1rem; bottom:1rem; } .check-card-button { width:92px; } }

/* Split opening: cinematic claim first, service deck second */
.hero-intro { min-height:calc(100svh - 77px); justify-content:flex-start; }
.hero-intro .hero-copy { align-self:stretch; display:grid; grid-template-rows:repeat(3,1fr); align-items:center; width:min(58vw,720px); max-width:720px; min-height:calc(100svh - 77px - clamp(6.5rem,12vh,10rem)); }
.hero-intro .hero-copy > .eyebrow { align-self:center; margin:0; color:#fff; font-size:clamp(1rem,1.55vw,1.38rem); line-height:1.2; letter-spacing:.08em; text-shadow:0 2px 22px rgba(0,0,0,.9),0 0 20px rgba(255,20,147,.22); }
.hero-intro .hero-claim { display:flex; flex-direction:column; max-width:none; margin:.5rem 0 1.5rem; color:#fff; font-size:clamp(2.65rem,5.15vw,5.85rem); line-height:.9; letter-spacing:-.055em; }
.hero-intro .hero-claim-intro { font-size:.58em; color:#e8f4ff; }
.hero-intro .hero-claim-main { color:var(--cyan); text-shadow:0 0 34px rgba(16,232,255,.34); }
.hero-intro .lead { max-width:62ch; color:#d4deeb; font-size:clamp(1rem,1.45vw,1.22rem); line-height:1.7; }
.hero-intro .hero-positioning { align-self:center; max-width:none; margin:0; font-size:clamp(.9rem,1.15vw,1.08rem); line-height:1.55; }
.hero-intro .hero-positioning span { display:block; width:max-content; max-width:100%; white-space:nowrap; }
.services-deck-section { min-height:auto; grid-template-columns:1fr; gap:clamp(2rem,4vw,3.5rem); padding-top:clamp(4.5rem,8vw,7.5rem); padding-bottom:clamp(5rem,9vw,8rem); overflow:hidden; }
.services-deck-intro { position:relative; z-index:3; max-width:850px; margin:0 auto; text-align:center; }
.services-deck-intro h2 { margin:.25rem 0 .8rem; font-size:clamp(2rem,4.6vw,4.5rem); color:#fff; }
.services-deck-intro > p:last-child { max-width:64ch; margin:0 auto; color:#aebdd0; line-height:1.7; }
.services-deck-section .hero-card-grid { width:min(1180px,100%); margin:0 auto; }
.services-deck-section .hero-check-slot { grid-column:1; }
.services-deck-section .hero-hover-hint { bottom:1.5rem; }
@media (max-width:680px) {
  .hero-intro { min-height:calc(100svh - 69px); padding:4rem 1.25rem 4.5rem; }
  .hero-intro .hero-copy { min-height:calc(100svh - 69px - 8.5rem); }
  .hero-intro .hero-copy > .eyebrow { font-size:clamp(.85rem,4.4vw,1.15rem); }
  .hero-intro .hero-claim { font-size:clamp(2.8rem,14vw,4.7rem); }
  .hero-intro .lead { font-size:clamp(.68rem,2.85vw,.86rem); }
  .services-deck-section { padding-top:4rem; }
}
@media (max-width:680px) { .hero-flip-card.is-expanded { width:94vw; height:84vh; transform:none!important; } }
@media (max-width:680px) { .hero-video-copy ul { grid-template-columns:1fr; gap:.2rem; } .hero-video-copy li { padding:.24rem .3rem; } .hero-flip-card.is-expanded .hero-video-copy ul { grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* Dezentes Kartenspiel-System für die gesamte Seite */
.section-heading,.compact-heading { position:relative; padding-left:1.3rem; border-left:1px solid rgba(16,232,255,.42); }
.section-heading::before,.compact-heading::before { content:"♠"; position:absolute; left:-.52rem; top:-1.2rem; color:rgba(16,232,255,.62); font:400 1rem Georgia,serif; text-shadow:0 0 12px rgba(16,232,255,.45); }
.production-viewer,.format-tile,.why-grid article,.automation-card,.contact-card,.team-card,.landing-card,.case-card { position:relative; border-color:rgba(16,232,255,.2); box-shadow:0 20px 70px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.06); }
.production-viewer::before,.format-tile::before,.why-grid article::before,.automation-card::before,.contact-card::before { content:"J"; position:absolute; z-index:6; right:.8rem; top:.65rem; display:grid; place-items:center; width:25px; height:25px; border:1px solid rgba(16,232,255,.22); border-radius:8px; color:rgba(16,232,255,.64); background:rgba(3,7,14,.62); font:700 .62rem/1 "Orbitron",sans-serif; box-shadow:0 0 16px rgba(16,232,255,.1); pointer-events:none; }
.format-tile:nth-child(2n)::before,.why-grid article:nth-child(2n)::before { content:"♥"; color:rgba(255,20,147,.72); border-color:rgba(255,20,147,.25); font-family:Georgia,serif; }
.format-tile:nth-child(3n)::before,.why-grid article:nth-child(3n)::before { content:"♣"; color:rgba(8,215,155,.72); font-family:Georgia,serif; }
.service-panel-copy > span,.production-caption span,.format-tile header span { text-shadow:0 0 14px currentColor; }
.contact-card { overflow:hidden; }
.contact-card::after { content:"KI JOKER"; position:absolute; right:-1.2rem; bottom:-.5rem; color:rgba(255,255,255,.025); font:900 clamp(3rem,9vw,8rem)/1 "Orbitron",sans-serif; pointer-events:none; }
.btn.primary { background:linear-gradient(120deg,#ff1493,#e90078); }
.btn.primary::after { content:"  ›"; }

/* Logo-basierte Farbwelt */
:root {
  --bg:#02030a;
  --panel:rgba(7,11,27,.76);
  --panel-strong:rgba(10,15,34,.94);
  --line:rgba(21,210,255,.22);
  --line-hot:rgba(255,24,164,.36);
  --text:#f5f7ff;
  --muted:#9aa9c7;
  --cyan:#16ddff;
  --blue:#2480ff;
  --pink:#ff18a4;
  --gold:#985bff;
  --violet:#985bff;
}
body { background:radial-gradient(circle at 14% -5%,rgba(36,128,255,.16),transparent 31rem),radial-gradient(circle at 90% 2%,rgba(255,24,164,.13),transparent 30rem),radial-gradient(circle at 55% 42%,rgba(152,91,255,.055),transparent 38rem),linear-gradient(180deg,#040615 0%,#02030a 48%,#010208 100%); }
.aurora-a { background:var(--blue); }
.aurora-b { background:var(--pink); }
.hero-card-table { background:radial-gradient(circle at 72% 46%,rgba(22,221,255,.13),transparent 30rem),radial-gradient(circle at 28% 12%,rgba(255,24,164,.1),transparent 27rem),radial-gradient(circle at 58% 76%,rgba(152,91,255,.07),transparent 29rem),#02040d; }
.suit-club > b,.suit-club .card-rank { color:var(--violet); }
.hero-card-face,.service-choice,.service-panel,.format-tile,.automation-card,.contact-card { background-color:#070b1b; }
.hero-card-face { border-color:rgba(22,221,255,.52); box-shadow:0 0 25px rgba(36,128,255,.17),inset 0 1px rgba(255,255,255,.1); }
.hero-flip-card:nth-child(3) .hero-card-face { border-color:rgba(152,91,255,.5); box-shadow:0 0 26px rgba(152,91,255,.18),inset 0 1px rgba(255,255,255,.1); }
.hero-flip-card:nth-child(4) .hero-card-face { border-color:rgba(255,24,164,.48); box-shadow:0 0 26px rgba(255,24,164,.17),inset 0 1px rgba(255,255,255,.1); }
.wire-cube,.mesh-object { background:conic-gradient(from 45deg,var(--cyan),var(--blue),var(--violet),var(--pink),var(--cyan)); }
.phone div { background:linear-gradient(135deg,var(--cyan),var(--blue),var(--violet),var(--pink)); }
.brand-board i { background:linear-gradient(135deg,var(--cyan),var(--violet)); }
.brand-board i:nth-child(3) { background:linear-gradient(135deg,var(--blue),var(--violet)); }
.brand-board i:nth-child(4) { background:linear-gradient(135deg,var(--violet),var(--pink)); }
.format-tile:nth-child(3n)::before,.why-grid article:nth-child(3n)::before { color:rgba(152,91,255,.78); border-color:rgba(152,91,255,.28); }
.btn.primary { background:linear-gradient(115deg,#ff18a4,#db168f 62%,#985bff); box-shadow:0 0 28px rgba(255,24,164,.48),0 14px 38px rgba(152,91,255,.2); }
.nav-indicator,.header-progress i { background:linear-gradient(90deg,var(--blue),var(--cyan),var(--violet),var(--pink)); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition: none !important; } [data-reveal] { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hero-intro .hero-media::after { animation:none !important; opacity:.42; transform:none; } }
@media (prefers-reduced-motion: reduce) { .hero-check-cta { opacity:1 !important; transform:translate3d(-50%,0,0) rotateX(1.5deg) rotateZ(-1deg) !important; } }
@media (prefers-reduced-motion: reduce) { .hero-check-copy { opacity:1 !important; filter:none !important; transform:translate3d(0,-50%,0) !important; } }
@media (prefers-reduced-motion: reduce) { .check-letter { opacity:1 !important; filter:none !important; transform:none !important; } }
@media (max-width:680px) and (prefers-reduced-motion: reduce) { .hero-check-cta,.hero-check-copy { transform:none !important; } }

/* Check reveal: show the desk first, then deal the card onto the laptop motif. */
.hero-check-copy { text-align:left; }
.hero-check-copy p { margin-left:0; margin-right:0; }
.hero-check-copy small { margin-left:0; margin-right:auto; text-align:left; }
.hero-check-cta { border:2px solid rgba(120,241,255,.86); border-radius:26px; background:radial-gradient(circle at 50% 48%,rgba(101,45,142,.54),transparent 36%),repeating-linear-gradient(135deg,rgba(16,232,255,.035) 0 2px,transparent 2px 13px),linear-gradient(145deg,#071426 0%,#100d28 48%,#210b2e 100%); box-shadow:0 34px 78px rgba(0,0,0,.68),0 0 0 5px rgba(4,9,20,.72),0 0 34px rgba(16,232,255,.26),0 0 48px rgba(255,24,164,.18),inset 0 0 0 1px rgba(255,255,255,.14),inset 0 0 48px rgba(7,17,40,.75); }
.hero-check-cta::before { inset:11px; border:1px solid rgba(134,245,255,.48); border-radius:19px; background:linear-gradient(135deg,rgba(16,232,255,.1),transparent 28%,transparent 70%,rgba(255,24,164,.12)); box-shadow:inset 0 0 0 4px rgba(4,9,20,.38); }
.hero-check-cta::after { content:""; position:absolute; z-index:1; inset:27px; border:1px solid rgba(255,255,255,.08); border-radius:14px; background:repeating-linear-gradient(45deg,transparent 0 15px,rgba(152,91,255,.07) 15px 16px),repeating-linear-gradient(-45deg,transparent 0 15px,rgba(16,232,255,.055) 15px 16px); pointer-events:none; }
.check-card-rank { position:absolute; z-index:3; display:flex; flex-direction:column; align-items:center; color:#e9fbff; font:800 1.05rem/1 "Orbitron",sans-serif; letter-spacing:0; text-shadow:0 0 10px rgba(16,232,255,.72),0 0 14px rgba(255,24,164,.42); }
.check-card-rank small { margin-top:.18rem; color:var(--pink); font-size:.78rem; line-height:1; }
.check-card-rank-top { top:1.35rem; right:1.45rem; }
.check-card-rank-bottom { bottom:1.35rem; left:1.45rem; transform:rotate(180deg); }
.check-card-button { z-index:5; border:2px solid rgba(255,255,255,.72); box-shadow:0 0 0 7px rgba(8,12,29,.68),0 0 32px rgba(255,24,164,.58),0 18px 38px rgba(0,0,0,.46),inset 0 1px rgba(255,255,255,.42); }
.hero-check-cta { top:50%; left:74%; translate:0 -50%; }
.hero-check-slot.is-visible .hero-check-cta { animation:check-card-deal 1.6s cubic-bezier(.14,.82,.18,1) 3s both,check-card-wobble 3.8s 4.6s ease-in-out infinite; }
.hero-check-copy { right:calc(23% + 190px); width:min(520px,calc(77% - 215px)); }
.hero-check-slot.is-visible .hero-check-copy { animation:check-copy-container .01s 4.23s linear both; }
.hero-check-slot.is-visible .hero-check-copy::before { animation:check-trails .9s 4.17s ease-out both; }
@media (max-width:1100px) {
  .hero-check-copy { right:calc(23% + 180px); width:min(445px,calc(77% - 200px)); }
}
@media (max-width:680px) {
  .hero-check-cta { top:auto; left:auto; translate:none; }
  .hero-check-copy { right:auto; width:100%; }
  .hero-check-slot.is-visible .hero-check-copy { animation:check-copy-container-mobile .01s 4.25s linear both; }
  .hero-check-slot.is-visible .hero-check-cta { animation:check-card-deal-mobile 1.35s cubic-bezier(.14,.82,.18,1) 3s both,check-card-wobble-mobile 3.8s 4.35s ease-in-out infinite; }
  .hero-check-copy small { width:fit-content; margin-inline:auto; font-size:clamp(.68rem,3.1vw,.84rem); text-align:center; white-space:normal; }
  .check-card-rank { font-size:.92rem; }
  .check-card-rank small { font-size:.68rem; }
  .check-card-rank-top { top:1.05rem; right:1.15rem; }
  .check-card-rank-bottom { bottom:1.05rem; left:1.15rem; }
}

/* 2026 editorial balance: expressive display type, calm reading type */
body { font-family:"Space Grotesk",Inter,ui-sans-serif,system-ui,sans-serif; font-size:17px; line-height:1.55; }
h1,h2,h3,.eyebrow,.brand-copy,.brand-line,.nav,.btn,button,.service-card-meta,.playing-corner,.production-caption,.format-tile header,.team-card-index,.dash-head,.pipeline b { font-family:"Orbitron",ui-sans-serif,sans-serif; }
p,.lead,.service-panel-copy p,.compact-heading > p,.why-grid p,.team-heading > p,.automation-copy > p,.final-cta p { letter-spacing:.005em; }
.section-pad:not(.hero) { padding-top:clamp(3.5rem,6vw,5.5rem); padding-bottom:clamp(3.5rem,6vw,5.5rem); }
.portfolio-screen { min-height:0; }
.service-stage { min-height:0; }
.service-deck { min-height:520px; }
.service-showcase,.service-panel { min-height:540px; }
.service-panel { grid-template-rows:minmax(220px,.82fr) auto; }
.service-panel-media img,.service-panel-media video { min-height:220px; }

/* Brighter play spaces */
.play-space { isolation:isolate; }
.play-space::after { content:""; position:absolute; z-index:-2; inset:1.25rem 0; border-radius:42px; pointer-events:none; }
.play-space-services::after { background:linear-gradient(145deg,rgba(30,63,104,.42),rgba(23,29,71,.46) 52%,rgba(74,34,92,.38)); border:1px solid rgba(169,220,255,.18); box-shadow:inset 0 1px rgba(255,255,255,.08),0 30px 90px rgba(0,0,0,.18); }
.play-space-light { color:#071326; }
.play-space-light::after { background:radial-gradient(circle at 10% 0,rgba(255,255,255,.94),transparent 34%),radial-gradient(circle at 100% 20%,rgba(255,202,239,.6),transparent 38%),linear-gradient(135deg,#cdeeff,#d9d7ff 54%,#f1d8f0); border:1px solid rgba(255,255,255,.72); box-shadow:0 32px 90px rgba(7,29,65,.28); }
.play-space-light .eyebrow { color:#08677c; text-shadow:none; }
.play-space-light h2 { color:#071326; text-shadow:none; }
.play-space-light .section-heading > p { color:#32445d; }
.play-space-light .why-grid article { background:rgba(6,15,34,.9); color:#f6fbff; border-color:rgba(255,255,255,.18); box-shadow:0 20px 50px rgba(24,42,72,.18); }
.play-space-light .why-grid p { color:#c5d3e5; }
.play-space-finder::after { background:radial-gradient(circle at 18% 18%,rgba(22,221,255,.18),transparent 30%),radial-gradient(circle at 88% 20%,rgba(255,24,164,.2),transparent 34%),linear-gradient(145deg,#101b35,#15112d 58%,#251238); border:1px solid rgba(166,213,255,.24); box-shadow:inset 0 1px rgba(255,255,255,.1),0 35px 100px rgba(0,0,0,.3); }

/* Perspective switch */
.perspective-intro { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:1.1rem 2rem; align-items:end; margin:0 auto clamp(2rem,4vw,3.5rem); padding:clamp(1.3rem,3vw,2.1rem); border:1px solid rgba(255,255,255,.14); border-radius:28px; background:rgba(4,10,24,.56); box-shadow:inset 0 1px rgba(255,255,255,.08); backdrop-filter:blur(18px); }
.perspective-intro h2 { max-width:16ch; margin-bottom:0; font-size:clamp(1.8rem,3.3vw,3.2rem); }
.perspective-intro .eyebrow { margin-bottom:.55rem; }
.perspective-switch { display:flex; gap:.45rem; padding:.36rem; border:1px solid rgba(16,232,255,.22); border-radius:999px; background:rgba(1,5,15,.68); }
.perspective-switch button { min-height:46px; padding:.72rem 1rem; border:0; border-radius:999px; color:#94a6bc; background:transparent; cursor:pointer; font-size:.68rem; font-weight:700; }
.perspective-switch button.is-active { color:#03101c; background:linear-gradient(120deg,#a9f6ff,#e5d4ff); box-shadow:0 0 24px rgba(16,232,255,.28); }
.perspective-lead { grid-column:1 / -1; max-width:76ch; margin:0; color:#c7d4e4; }

/* Case storytelling */
.case-story-strip { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.75rem; margin:1.4rem 0 1.7rem; }
.case-story-strip article { min-height:150px; padding:1.15rem; border:1px solid rgba(255,255,255,.1); border-radius:20px; background:linear-gradient(145deg,rgba(16,28,48,.9),rgba(8,12,24,.76)); }
.case-story-strip small { display:block; margin-bottom:.55rem; color:var(--cyan); font:700 .62rem/1.2 "Orbitron",sans-serif; letter-spacing:.1em; text-transform:uppercase; }
.case-story-strip strong { display:block; margin-bottom:.45rem; color:#fff; font-size:1.04rem; }
.case-story-strip p { margin:0; color:#aebbd0; font-size:.88rem; line-height:1.55; }
.impact-tags { display:flex; flex-wrap:wrap; gap:.55rem; margin:1.2rem 0 1.6rem; }
.impact-tags span { padding:.5rem .75rem; border:1px solid rgba(16,232,255,.22); border-radius:999px; color:#cceeff; background:rgba(16,232,255,.065); font:600 .65rem/1 "Orbitron",sans-serif; }

/* Joker finder */
.joker-finder-head { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(280px,.72fr); gap:1rem 4rem; align-items:end; margin-bottom:2rem; }
.joker-finder-head .eyebrow { grid-column:1 / -1; margin-bottom:0; }
.joker-finder-head h2 { margin:0; max-width:18ch; font-size:clamp(2rem,4vw,3.7rem); }
.joker-finder-head > p:last-child { margin:0; color:#b8c6db; }
.joker-finder-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem; }
.joker-finder fieldset { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.5rem; margin:0; padding:1rem; border:1px solid rgba(255,255,255,.12); border-radius:20px; background:rgba(4,9,22,.58); }
.joker-finder legend { padding:0 .35rem; color:#eef8ff; font:700 .7rem/1.2 "Orbitron",sans-serif; }
.joker-finder label { cursor:pointer; }
.joker-finder input { position:absolute; opacity:0; pointer-events:none; }
.joker-finder label span { display:grid; place-items:center; min-height:48px; padding:.65rem; border:1px solid rgba(255,255,255,.1); border-radius:12px; color:#9eacc1; background:rgba(255,255,255,.035); text-align:center; font-size:.8rem; transition:.2s ease; }
.joker-finder input:checked + span { color:#03101c; border-color:rgba(173,246,255,.9); background:linear-gradient(120deg,#9ff4ff,#dec9ff); box-shadow:0 0 20px rgba(16,232,255,.18); font-weight:700; }
.joker-finder input:focus-visible + span { outline:2px solid var(--cyan); outline-offset:3px; }
.joker-result { grid-column:1 / -1; display:grid; grid-template-columns:auto 1fr auto; gap:1.25rem; align-items:center; margin-top:.45rem; padding:clamp(1.2rem,3vw,2rem); border:1px solid rgba(16,232,255,.28); border-radius:26px; background:linear-gradient(135deg,rgba(10,22,43,.94),rgba(33,16,53,.9)); box-shadow:0 24px 70px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.08); }
.joker-result-card { display:grid; place-items:center; width:74px; aspect-ratio:.7; border:1px solid rgba(255,24,164,.55); border-radius:14px; color:var(--pink); background:#090d1a; font:800 2.3rem/1 "Orbitron",sans-serif; box-shadow:0 0 28px rgba(255,24,164,.2); }
.joker-result small { color:var(--cyan); font:700 .62rem/1.2 "Orbitron",sans-serif; text-transform:uppercase; letter-spacing:.1em; }
.joker-result h3 { margin:.4rem 0 .45rem; font-size:clamp(1.35rem,2.4vw,2.25rem); }
.joker-result p { margin:0; color:#bdc9d9; }
.joker-result [data-joker-result-tags] { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.75rem; }
.joker-result [data-joker-result-tags] span { padding:.38rem .55rem; border-radius:999px; color:#dcefff; background:rgba(255,255,255,.07); font-size:.7rem; }

@media (max-width:980px) {
  .brand-line { display:none; }
  .site-header { grid-template-columns:auto 1fr auto; }
  .perspective-intro,.joker-finder-head { grid-template-columns:1fr; align-items:start; }
  .perspective-lead,.joker-finder-head .eyebrow { grid-column:1; }
  .perspective-switch { width:max-content; max-width:100%; }
}
@media (max-width:759px) {
  body { font-size:16px; }
  .play-space::after { inset:.6rem 0; border-radius:26px; }
  .case-story-strip,.joker-finder-grid { grid-template-columns:1fr; }
  .perspective-switch { display:grid; grid-template-columns:1fr 1fr; width:100%; }
  .perspective-switch button { padding:.65rem .5rem; font-size:.58rem; }
  .joker-finder fieldset { grid-template-columns:1fr; }
  .joker-result { grid-column:1; grid-template-columns:auto 1fr; }
  .joker-result .btn { grid-column:1 / -1; width:100%; text-align:center; }
  .service-deck { min-height:430px; }
}

/* Keep the entire pricing presentation inside the projected screen. */
.section-pad.play-space-fair {
  padding-top:clamp(8.8rem,15vw,10rem) !important;
}
@media (max-width:759px) {
  .section-pad.play-space-fair { padding-top:7.5rem !important; }
}

/* Five-slide projector presentation */
.pricing-presentation {
  position:relative;
  min-height:430px;
  margin:0 auto .9rem;
  overflow:hidden;
  border:1px solid rgba(120,238,255,.2);
  border-radius:20px;
  background:linear-gradient(145deg,rgba(3,11,27,.28),rgba(3,9,22,.08));
  box-shadow:inset 0 0 50px rgba(16,232,255,.035);
  isolation:isolate;
}
.pricing-slides { position:absolute; inset:0; }
.pricing-presentation-logo {
  position:absolute;
  z-index:7;
  top:clamp(1.3rem,3vw,2.6rem);
  right:clamp(1.5rem,4.5vw,4.4rem);
  width:clamp(68px,8.5vw,112px);
  height:auto;
  border-radius:8px;
  mix-blend-mode:normal;
  filter:drop-shadow(0 0 12px rgba(22,223,255,.2));
  pointer-events:none;
}
.pricing-slide {
  --slide-accent:#10e8ff;
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(210px,.65fr);
  gap:clamp(1rem,4vw,4rem);
  align-items:center;
  padding:clamp(1.5rem,4vw,3.4rem);
  opacity:0;
  visibility:hidden;
  transform:translate3d(2.6rem,0,0) scale(.985);
  transition:opacity .65s ease,transform .75s cubic-bezier(.16,.82,.2,1),visibility 0s .75s;
}
.pricing-slide::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:radial-gradient(circle at 82% 45%,color-mix(in srgb,var(--slide-accent) 20%,transparent),transparent 31%),linear-gradient(100deg,rgba(2,8,22,.72),rgba(2,8,22,.2) 70%);
}
.pricing-slide.is-active { opacity:1; visibility:visible; transform:none; transition-delay:0s; }
.pricing-slide--violet { --slide-accent:#9b67ff; }
.pricing-slide--pink { --slide-accent:#ff249a; }
.pricing-slide-copy { position:relative; z-index:2; }
.pricing-slide .eyebrow { margin-bottom:1.1rem; }
.pricing-slide-kicker { display:block; margin-bottom:.75rem; color:var(--slide-accent); font:800 .64rem/1.2 "Orbitron",sans-serif; letter-spacing:.12em; text-transform:uppercase; }
.pricing-slide h2 { max-width:14ch; margin:0; font-size:clamp(2rem,5.2vw,4.5rem); line-height:1.02; text-shadow:0 2px 24px rgba(0,0,0,.58); }
.pricing-slide h3 { margin:1rem 0 0; color:#dce7f6; font-size:clamp(1rem,2vw,1.45rem); }
.pricing-slide p { max-width:70ch; margin:1rem 0 0; color:#c8d4e3; font-size:clamp(.82rem,1.35vw,1rem); line-height:1.58; }
.pricing-slide p strong { color:#fff; }
.pricing-slide--position { grid-template-columns:minmax(0,1.55fr) minmax(180px,.45fr); }
.pricing-slide--position h2 { max-width:17ch; font-size:clamp(1.8rem,4vw,3.45rem); }
.pricing-slide--position p { max-width:68ch; }
.pricing-slide--beamer {
  grid-template-columns:1fr;
  align-items:center;
  padding:clamp(2rem,4.2vw,4rem) clamp(2rem,6vw,5.6rem);
}
.pricing-slide--beamer .pricing-slide-copy { width:min(92%,980px); }
.pricing-slide--beamer h2 {
  max-width:25ch;
  font-size:clamp(1.9rem,4.1vw,3.8rem);
  line-height:1.08;
}
.pricing-slide--beamer h3 { font-size:clamp(1.05rem,2.25vw,1.7rem); }
.pricing-slide--beamer p {
  max-width:78ch;
  font-size:clamp(.88rem,1.45vw,1.08rem);
  line-height:1.62;
}
.pricing-slide-number { position:absolute; left:-.08em; top:-.48em; z-index:-1; color:color-mix(in srgb,var(--slide-accent) 13%,transparent); font:900 clamp(6rem,15vw,11rem)/1 "Orbitron",sans-serif; }
.pricing-slide--principle h2 { max-width:13ch; font-size:clamp(2.2rem,5.4vw,4.8rem); }
.pricing-slide--principle p { max-width:47ch; font-size:clamp(.92rem,1.55vw,1.12rem); }
.pricing-slide-art { position:relative; width:min(100%,280px); aspect-ratio:1; justify-self:center; color:var(--slide-accent); }
.pricing-slide-art b { position:absolute; display:grid; place-items:center; font:900 clamp(2rem,5vw,4rem)/1 "Orbitron",sans-serif; }
.pricing-slide-art--deal i { position:absolute; width:43%; aspect-ratio:.72; border:2px solid currentColor; border-radius:13px; background:linear-gradient(145deg,rgba(16,232,255,.18),rgba(7,13,27,.88)); box-shadow:0 0 24px color-mix(in srgb,currentColor 28%,transparent); }
.pricing-slide-art--deal i:nth-child(1) { left:4%; top:21%; transform:rotate(-16deg); }
.pricing-slide-art--deal i:nth-child(2) { left:28%; top:8%; transform:rotate(-2deg); }
.pricing-slide-art--deal i:nth-child(3) { right:3%; top:21%; transform:rotate(14deg); }
.pricing-slide-art--deal b { inset:25% 28%; border:1px solid rgba(255,36,154,.65); border-radius:50%; color:#ff249a; background:#08101f; box-shadow:0 0 28px rgba(255,36,154,.32); }
.pricing-slide-art--orbit { border:1px solid rgba(16,232,255,.3); border-radius:50%; box-shadow:inset 0 0 40px rgba(16,232,255,.09),0 0 32px rgba(16,232,255,.1); }
.pricing-slide-art--orbit::before,.pricing-slide-art--orbit::after,.pricing-slide-art--orbit i { content:""; position:absolute; inset:14%; border:1px solid rgba(255,36,154,.4); border-radius:50%; transform:rotate(52deg) scaleY(.42); }
.pricing-slide-art--orbit::after { inset:24%; border-color:rgba(16,232,255,.45); transform:rotate(-34deg) scaleY(.52); }
.pricing-slide-art--orbit b { inset:31%; border-radius:50%; color:#ff249a; background:radial-gradient(circle,#1a1432,#07101f 70%); }
.pricing-slide-art--modules { display:grid; grid-template-columns:1fr 1fr; gap:.7rem; align-content:center; transform:rotate(3deg); }
.pricing-slide-art--modules i { display:grid; min-height:72px; place-items:center; border:1px solid color-mix(in srgb,var(--slide-accent) 60%,transparent); border-radius:14px; background:linear-gradient(145deg,color-mix(in srgb,var(--slide-accent) 14%,#07101f),#07101f); box-shadow:0 10px 24px rgba(0,0,0,.24); font:700 .62rem/1 "Orbitron",sans-serif; font-style:normal; text-transform:uppercase; }
.pricing-slide-art--focus { border:1px solid color-mix(in srgb,var(--slide-accent) 48%,transparent); border-radius:24px; background:linear-gradient(145deg,color-mix(in srgb,var(--slide-accent) 15%,transparent),rgba(3,9,22,.72)); transform:rotate(-3deg); }
.pricing-slide-art--focus::before,.pricing-slide-art--focus::after { content:""; position:absolute; left:12%; right:12%; height:1px; background:linear-gradient(90deg,transparent,var(--slide-accent),transparent); }
.pricing-slide-art--focus::before { top:25%; }.pricing-slide-art--focus::after { bottom:25%; }
.pricing-slide-art--focus i { position:absolute; inset:19%; border:1px dashed color-mix(in srgb,var(--slide-accent) 55%,transparent); border-radius:16px; }
.pricing-slide-art--focus b { inset:36% 12%; color:#fff; font-size:clamp(.75rem,2vw,1.15rem); text-transform:uppercase; letter-spacing:.1em; }
.pricing-slide-art--share i { position:absolute; width:34%; aspect-ratio:1; border:1px solid color-mix(in srgb,var(--slide-accent) 65%,transparent); border-radius:50%; background:color-mix(in srgb,var(--slide-accent) 12%,#07101f); box-shadow:0 0 30px color-mix(in srgb,var(--slide-accent) 18%,transparent); }
.pricing-slide-art--share i:nth-child(1) { left:4%; top:34%; }.pricing-slide-art--share i:nth-child(2) { right:4%; top:34%; }.pricing-slide-art--share i:nth-child(3) { left:33%; bottom:4%; }
.pricing-slide-art--share::before,.pricing-slide-art--share::after { content:""; position:absolute; left:28%; right:28%; top:50%; height:2px; background:var(--slide-accent); transform:rotate(30deg); box-shadow:0 0 12px var(--slide-accent); }
.pricing-slide-art--share::after { transform:rotate(-30deg); }
.pricing-slide-art--share b { inset:32%; border:1px solid color-mix(in srgb,var(--slide-accent) 72%,transparent); border-radius:50%; color:#fff; background:#101126; box-shadow:0 0 32px color-mix(in srgb,var(--slide-accent) 24%,transparent); }
.pricing-presentation-controls { position:absolute; z-index:6; left:50%; bottom:.8rem; display:flex; gap:1rem; transform:translateX(-50%); }
.pricing-presentation-controls button {
  position:relative;
  width:38px;
  height:34px;
  padding:0;
  overflow:visible;
  border:0;
  border-radius:0;
  background:transparent;
  filter:drop-shadow(0 0 7px rgba(255,40,72,.28));
  cursor:pointer;
}
.pricing-presentation-controls button span {
  position:absolute;
  inset:3px;
  border-radius:0;
  background:#b51e37;
  clip-path:polygon(13% 4%,94% 50%,13% 96%);
  transform:none;
  transform-origin:center;
  transition:background .25s ease,filter .25s ease,transform .25s ease;
}
.pricing-presentation-controls button:where(:hover,:focus-visible) span {
  background:#ff3558;
  filter:brightness(1.2);
  transform:scale(1.08);
}
.pricing-presentation-controls button.is-active span {
  background:#ff2848;
  filter:drop-shadow(0 0 8px rgba(255,40,72,.9));
  animation:pricing-play-pulse 1.6s ease-in-out infinite;
}
@keyframes pricing-play-pulse { 50% { transform:scale(1.1); filter:drop-shadow(0 0 13px rgba(255,40,72,1)); } }
@keyframes pricing-progress { to { transform:scaleX(1); } }
.pricing-presentation:where(:hover,:focus-within) .pricing-presentation-controls button.is-active span { animation-play-state:paused; }
@media (max-width:759px) {
  .pricing-presentation { min-height:510px; }
  .pricing-presentation-logo { top:1rem; right:1rem; width:58px; }
  .pricing-slide { grid-template-columns:1fr; align-content:center; padding:1.35rem 1.2rem 3.2rem; }
  .pricing-slide-art { position:absolute; right:-2rem; bottom:1.5rem; width:145px; opacity:.28; }
  .pricing-slide h2,.pricing-slide--principle h2 { font-size:clamp(1.8rem,9vw,3rem); }
  .pricing-slide--position { grid-template-columns:1fr; }
  .pricing-slide--position p { font-size:.78rem; line-height:1.48; }
  .pricing-slide--beamer { padding:1.4rem 1.25rem 3.4rem; }
  .pricing-slide--beamer .pricing-slide-copy { width:100%; }
  .pricing-slide--beamer h2 { font-size:clamp(1.7rem,8vw,2.7rem); }
  .pricing-slide--beamer p { font-size:.8rem; line-height:1.5; }
  .pricing-presentation-controls button { width:34px; height:30px; }
}
@media (prefers-reduced-motion:reduce) {
  .pricing-slide { transition:none; }
  .pricing-presentation-controls button.is-active span { animation:none; transform:none; }
}

/* Fit the four pricing stacks into the clear table zones. */
@media (min-width:760px) {
  .play-space-fair .starter-deck {
    max-width:620px;
    gap:3.1rem 3.1rem;
    padding:3.2rem 1rem 4.3rem;
  }
  .play-space-fair .starter-deck article { min-height:270px; }
  .play-space-fair .price-chip-face {
    min-height:236px;
    padding:1.1rem 1.2rem .95rem;
  }
  .play-space-fair .starter-deck article:nth-child(1) .price-chip-face {
    transform:translate3d(20px,15px,0) rotateX(56deg) rotateZ(-5deg);
  }
  .play-space-fair .starter-deck article:nth-child(2) .price-chip-face {
    transform:translate3d(-14px,5px,0) rotateX(56deg) rotateZ(4deg);
  }
  .play-space-fair .starter-deck article:nth-child(3) .price-chip-face {
    transform:translate3d(10px,-4px,0) rotateX(56deg) rotateZ(-3deg);
  }
  .play-space-fair .starter-deck article:nth-child(4) .price-chip-face {
    transform:translate3d(-8px,10px,0) rotateX(56deg) rotateZ(4.5deg);
  }
  .play-space-fair .starter-deck article:hover .price-chip-face,
  .play-space-fair .starter-deck article:focus-within .price-chip-face {
    transform:rotateX(0deg) rotateZ(0deg) translate3d(0,-45px,105px) scale(1.06);
  }
}

/* Photographic table integration: depth, material and vanishing point */
@media (min-width:760px) {
  .play-space-fair .starter-deck article::before {
    left:17%;
    right:17%;
    bottom:20%;
    height:34px;
    background:rgba(0,0,0,.58);
    filter:blur(13px);
    opacity:.68;
    transform:translateY(18px) scaleX(.88);
  }
  .play-space-fair .price-chip-face {
    border-width:1px;
    border-color:rgba(137,225,233,.72);
    background:
      linear-gradient(112deg,rgba(255,255,255,.085) 0%,transparent 15%,transparent 72%,rgba(255,255,255,.035) 88%,transparent 100%),
      repeating-linear-gradient(0deg,rgba(255,255,255,.012) 0 1px,transparent 1px 4px),
      radial-gradient(circle at 84% 10%,rgba(226,30,139,.16),transparent 29%),
      linear-gradient(145deg,rgba(16,35,56,.97),rgba(6,14,27,.985) 54%,rgba(14,19,37,.98));
    filter:brightness(.86) saturate(.86) drop-shadow(0 13px 10px rgba(0,0,0,.34));
    transition:transform .78s cubic-bezier(.16,.82,.2,1),box-shadow .68s cubic-bezier(.16,.82,.2,1),border-color .35s ease,filter .45s ease;
  }
  .play-space-fair .price-chip-face::before {
    border-color:rgba(168,232,238,.3);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);
  }
  .play-space-fair .starter-deck article:nth-child(1) .price-chip-face {
    transform:perspective(1050px) translate3d(23px,-4px,0) rotateX(64deg) rotateZ(-10deg) scale(.83);
    box-shadow:0 2px 0 #477e83,0 4px 0 #061019,0 6px 0 #8a205e,0 8px 0 #07111c,0 15px 21px rgba(0,0,0,.48),inset 0 1px rgba(255,255,255,.2),inset 0 0 0 5px rgba(4,12,23,.75),inset 0 0 0 6px rgba(83,189,197,.22);
  }
  .play-space-fair .starter-deck article:nth-child(2) .price-chip-face {
    transform:perspective(1050px) translate3d(-20px,-9px,0) rotateZ(82deg) rotateX(64deg) scale(.78);
    box-shadow:0 2px 0 #6f2855,0 4px 0 #061019,0 6px 0 #39787f,0 8px 0 #07111c,0 10px 0 #75234f,0 17px 24px rgba(0,0,0,.48),inset 0 1px rgba(255,255,255,.19),inset 0 0 0 5px rgba(4,12,23,.75),inset 0 0 0 6px rgba(189,52,130,.2);
  }
  .play-space-fair .starter-deck article:nth-child(3) .price-chip-face {
    transform:perspective(1050px) translate3d(5px,-2px,0) rotateZ(-77deg) rotateX(59deg) scale(.9);
    box-shadow:0 2px 0 #548b90,0 5px 0 #061019,0 8px 0 #8b235d,0 11px 0 #07111c,0 14px 0 #416e77,0 17px 0 #07111c,0 27px 33px rgba(0,0,0,.53),inset 0 1px rgba(255,255,255,.22),inset 0 0 0 5px rgba(4,12,23,.75),inset 0 0 0 6px rgba(83,189,197,.22);
  }
  .play-space-fair .starter-deck article:nth-child(4) .price-chip-face {
    transform:perspective(1050px) translate3d(-10px,11px,0) rotateX(59deg) rotateZ(8deg) scale(.94);
    box-shadow:0 2px 0 #742853,0 5px 0 #061019,0 8px 0 #3f7e84,0 11px 0 #07111c,0 14px 0 #792450,0 23px 29px rgba(0,0,0,.52),inset 0 1px rgba(255,255,255,.22),inset 0 0 0 5px rgba(4,12,23,.75),inset 0 0 0 6px rgba(189,52,130,.2);
  }
  .play-space-fair .starter-deck article:hover .price-chip-face,
  .play-space-fair .starter-deck article:focus-within .price-chip-face {
    transform:perspective(1050px) rotateX(0deg) rotateZ(0deg) translate3d(0,-45px,105px) scale(1.06);
    filter:brightness(1.04) saturate(1.08) drop-shadow(0 24px 18px rgba(0,0,0,.42));
    border-color:rgba(164,246,251,.95);
  }
}

/* Asymmetrically dealt pricing stacks */
@media (min-width:760px) {
  .play-space-fair .price-chip-face { transform-origin:50% 50%; }
  .play-space-fair .starter-deck article:nth-child(1) .price-chip-face {
    transform:translate3d(13px,10px,0) rotateX(56deg) rotateZ(-11deg);
  }
  .play-space-fair .starter-deck article:nth-child(2) .price-chip-face {
    transform:translate3d(-18px,3px,0) rotateZ(82deg) rotateX(56deg);
  }
  .play-space-fair .starter-deck article:nth-child(3) .price-chip-face {
    transform:translate3d(4px,-3px,0) rotateZ(-77deg) rotateX(56deg);
  }
  .play-space-fair .starter-deck article:nth-child(4) .price-chip-face {
    transform:translate3d(-7px,8px,0) rotateX(56deg) rotateZ(9deg);
  }
  .play-space-fair .starter-deck article:hover .price-chip-face,
  .play-space-fair .starter-deck article:focus-within .price-chip-face {
    transform:rotateZ(0deg) rotateX(0deg) translate3d(0,-45px,105px) scale(1.06);
  }
}

/* Projector-accurate presentation framing */
/* Final table-plane alignment: each stack follows its photographic inlay. */
@media (min-width:760px) {
  .play-space-fair .starter-deck {
    grid-template-columns:repeat(2,minmax(0,1fr));
    max-width:960px;
    gap:3.1rem;
    padding:3.2rem 1rem 4.3rem;
    perspective:1600px;
    perspective-origin:50% 0%;
  }
  .play-space-fair .starter-deck article { min-height:270px; }
  .play-space-fair .price-chip-face {
    min-height:236px;
    transform-origin:50% 50%;
  }
  .play-space-fair .starter-deck article:nth-child(1) .price-chip-face {
    transform:perspective(1200px) translate3d(74px,58px,0) rotateX(57deg) rotateZ(-4deg) scale(.64);
  }
  .play-space-fair .starter-deck article:nth-child(2) .price-chip-face {
    transform:perspective(1200px) translate3d(-83px,58px,0) rotateX(57deg) rotateZ(5deg) scale(.64);
  }
  .play-space-fair .starter-deck article:nth-child(3) .price-chip-face {
    transform:perspective(1200px) translate3d(-5px,5px,0) rotateX(50deg) rotateZ(-5deg) scale(.86);
  }
  .play-space-fair .starter-deck article:nth-child(4) .price-chip-face {
    transform:perspective(1200px) translate3d(0,5px,0) rotateX(50deg) rotateZ(4deg) scale(.88);
  }
  .play-space-fair .starter-deck article:nth-child(1):hover .price-chip-face,
  .play-space-fair .starter-deck article:nth-child(1):focus-within .price-chip-face {
    transform:perspective(1200px) translate3d(80px,-50px,130px) rotateX(0) rotateZ(0) scale(.95);
  }
  .play-space-fair .starter-deck article:nth-child(2):hover .price-chip-face,
  .play-space-fair .starter-deck article:nth-child(2):focus-within .price-chip-face {
    transform:perspective(1200px) translate3d(-80px,-50px,130px) rotateX(0) rotateZ(0) scale(.95);
  }
  .play-space-fair .starter-deck article:nth-child(3):hover .price-chip-face,
  .play-space-fair .starter-deck article:nth-child(3):focus-within .price-chip-face {
    transform:perspective(1200px) translate3d(70px,-70px,140px) rotateX(0) rotateZ(0) scale(.95);
  }
  .play-space-fair .starter-deck article:nth-child(4):hover .price-chip-face,
  .play-space-fair .starter-deck article:nth-child(4):focus-within .price-chip-face {
    transform:perspective(1200px) translate3d(-70px,-70px,140px) rotateX(0) rotateZ(0) scale(.95);
  }
}

/* Projector-accurate presentation framing */
/* Object-safe table placement: keep every stack clear of cups, bottles, glasses and documents. */
@media (min-width:760px) {
  .play-space-fair .starter-deck article:nth-child(1) .price-chip-face {
    translate:28px 14px;
    scale:.92;
  }
  .play-space-fair .starter-deck article:nth-child(2) .price-chip-face {
    translate:-28px 14px;
    scale:.92;
  }
  .play-space-fair .starter-deck article:nth-child(3) .price-chip-face {
    translate:36px -10px;
    scale:.89;
  }
  .play-space-fair .starter-deck article:nth-child(4) .price-chip-face {
    translate:-44px -10px;
    scale:.89;
  }
}

/* Projector-accurate presentation framing */
@media (min-width:760px) {
  .section-pad.play-space-fair {
    padding-top:clamp(9.1rem,15.6vw,9.6rem) !important;
  }
  .play-space-fair::after {
    background-size:100% 100%,100% 100%;
    background-position:center,center;
  }
  .pricing-presentation {
    width:84%;
    min-height:clamp(510px,60vw,545px);
    margin-inline:auto;
    border-color:rgba(119,236,255,.12);
    border-radius:7px;
    background:rgba(2,9,22,.08);
    box-shadow:inset 0 0 40px rgba(16,232,255,.025);
  }
}

/* Flipchart presentation: two readable sheets inside the photographed paper. */
.watch-flipchart-copy { z-index:6; overflow:hidden; isolation:isolate; }
.flipchart-presentation-logo {
  position:absolute;
  z-index:6;
  top:clamp(.6rem,1.05vw,1rem);
  right:clamp(.6rem,1.05vw,1rem);
  width:clamp(42px,4.6vw,64px);
  height:auto;
  border-radius:6px;
  mix-blend-mode:normal;
  filter:drop-shadow(0 2px 5px rgba(8,28,44,.18));
  pointer-events:none;
}
.flipchart-slides { position:absolute; inset:0; }
.flipchart-slide {
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  box-sizing:border-box;
  padding:clamp(.75rem,1.25vw,1.15rem) clamp(.85rem,1.45vw,1.35rem) 3rem;
  opacity:0;
  visibility:hidden;
  transform:translateX(1.2rem);
  transition:opacity .55s ease,transform .65s cubic-bezier(.16,.82,.2,1),visibility 0s .65s;
}
.flipchart-slide.is-active { opacity:1; visibility:visible; transform:none; transition-delay:0s; }
.flipchart-slide .eyebrow {
  max-width:calc(100% - 72px);
  margin:0 0 .4rem;
  color:#08758b;
  text-shadow:none;
}
.flipchart-slide-kicker {
  display:block;
  margin-bottom:.55rem;
  color:#08758b;
  font:800 clamp(.48rem,.65vw,.66rem)/1.2 "Orbitron",sans-serif;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.watch-flipchart-copy .flipchart-slide h2 {
  max-width:92%;
  margin:0;
  color:#102438;
  font-size:clamp(1.75rem,2.65vw,3rem);
  line-height:1.03;
  letter-spacing:-.045em;
  text-shadow:none;
}
.watch-flipchart-copy .flipchart-slide h3 {
  margin:.45rem 0 0;
  color:#9f1733;
  font-size:clamp(1rem,1.35vw,1.35rem);
  line-height:1.1;
}
.watch-flipchart-copy .flipchart-slide > p:last-child {
  max-width:100%;
  margin:clamp(.65rem,1vw,.9rem) 0 0;
  color:#283b4c;
  font-size:clamp(.68rem,.86vw,.86rem);
  font-weight:700;
  line-height:1.42;
}
.flipchart-slide--position h2 { font-size:clamp(1.65rem,2.35vw,2.65rem) !important; }
.flipchart-slide--position > p:last-child { font-size:clamp(.61rem,.77vw,.78rem) !important; line-height:1.38 !important; }
.flipchart-presentation-controls {
  position:absolute;
  z-index:7;
  left:50%;
  bottom:.7rem;
  display:flex;
  gap:.7rem;
  transform:translateX(-50%);
}
.flipchart-presentation-controls button {
  position:relative;
  width:30px;
  height:27px;
  padding:0;
  border:0;
  background:transparent;
  filter:drop-shadow(0 0 5px rgba(209,25,55,.25));
  cursor:pointer;
}
.flipchart-presentation-controls button span {
  position:absolute;
  inset:2px;
  background:#b51e37;
  clip-path:polygon(13% 4%,94% 50%,13% 96%);
  transition:background .25s ease,filter .25s ease,transform .25s ease;
}
.flipchart-presentation-controls button:where(:hover,:focus-visible) span { background:#e32445; transform:scale(1.08); }
.flipchart-presentation-controls button.is-active span {
  background:#ed1f43;
  filter:drop-shadow(0 0 6px rgba(237,31,67,.65));
  animation:flipchart-play-pulse 1.6s ease-in-out infinite;
}
@keyframes flipchart-play-pulse { 50% { transform:scale(1.1); filter:drop-shadow(0 0 9px rgba(237,31,67,.8)); } }
@media (max-width:680px) {
  .flipchart-presentation-logo { width:34px; top:.35rem; right:.35rem; }
  .flipchart-slide { padding:.5rem .55rem 2rem; }
  .flipchart-slide .eyebrow { max-width:calc(100% - 42px); margin-bottom:.25rem; }
  .flipchart-slide-kicker { margin-bottom:.3rem; font-size:.42rem; }
  .watch-flipchart-copy .flipchart-slide h2 { font-size:clamp(1rem,4.9vw,1.5rem); }
  .watch-flipchart-copy .flipchart-slide h3 { margin-top:.25rem; font-size:.72rem; }
  .watch-flipchart-copy .flipchart-slide > p:last-child { margin-top:.35rem; font-size:clamp(.48rem,1.9vw,.62rem); line-height:1.3; }
  .flipchart-slide--position h2 { font-size:clamp(.95rem,4.2vw,1.3rem) !important; }
  .flipchart-slide--position > p:last-child { font-size:clamp(.43rem,1.7vw,.55rem) !important; line-height:1.25 !important; }
  .flipchart-presentation-controls { bottom:.25rem; gap:.4rem; }
  .flipchart-presentation-controls button { width:20px; height:18px; }
}
@media (prefers-reduced-motion:reduce) {
  .flipchart-slide { transition:none; }
  .flipchart-presentation-controls button.is-active span { animation:none; }
}

/* Technical mobile hardening: keep the hero inside the viewport. */
@media (max-width:680px) {
  .hero-intro .hero-copy {
    grid-template-rows:repeat(3,minmax(0,1fr));
    width:100%;
    min-width:0;
  }
  .hero-intro .hero-copy > .eyebrow,
  .hero-intro .hero-claim,
  .hero-intro .lead {
    width:100%;
    max-width:100%;
    min-width:0;
  }
  .hero-intro .hero-copy > .eyebrow {
    max-width:100%;
    font-size:clamp(.62rem,2.72vw,.78rem);
    letter-spacing:.035em;
    white-space:normal;
    overflow-wrap:anywhere;
  }
  .hero-intro .hero-claim {
    max-width:calc(100vw - 2.5rem);
    font-size:clamp(1.5rem,6.35vw,2rem);
    letter-spacing:-.032em;
  }
  .hero-intro .hero-claim-intro { font-size:.62em; }
  .hero-intro .hero-claim span,
  .hero-intro .hero-positioning span { width:auto; white-space:normal; }
}

/* Geodesic city media stage */
.webdesign-feature-section.city-media-section {
  position:relative;
  display:block;
  width:100%;
  max-width:none;
  min-height:0;
  margin:0;
  padding:0;
  overflow:hidden;
  background:#06111c;
  isolation:isolate;
}
.webdesign-feature-section.city-media-section::before,
.webdesign-feature-section.city-media-section::after { display:none; }
.city-media-scene {
  position:relative;
  width:100%;
  aspect-ratio:16 / 9;
  overflow:hidden;
  background:
    linear-gradient(180deg,rgba(2,8,17,.08) 0%,transparent 48%,rgba(2,7,14,.18) 100%),
    url("assets/generated/webdesign-urban-city-media-pikaso-alternative.jpg") center / 100% 100% no-repeat;
  box-shadow:inset 0 0 110px rgba(0,0,0,.18);
}
.city-media-heading {
  position:absolute;
  z-index:6;
  right:3.2%;
  left:3.2%;
  bottom:3%;
  width:auto;
  padding:0;
  text-align:right;
}
.city-media-heading span {
  display:block;
  margin-bottom:.35rem;
  color:#79f5ff;
  font-size:clamp(.52rem,.72vw,.76rem);
  font-weight:800;
  letter-spacing:.13em;
  text-transform:uppercase;
  text-shadow:0 0 14px rgba(16,232,255,.38);
}
.city-media-heading h3 {
  margin:0;
  color:#fff;
  font-size:clamp(1rem,2.15vw,2.45rem);
  line-height:1;
  letter-spacing:-.045em;
  text-shadow:0 3px 22px rgba(0,0,0,.78);
}
.city-media-heading .city-story-claim {
  position:relative;
  display:block;
  height:clamp(80px,7vw,112px);
  white-space:nowrap;
}
.city-media-heading .city-claim-part {
  position:absolute;
  display:block;
  margin:0;
  color:#fff;
  font:inherit;
  letter-spacing:inherit;
  text-transform:none;
  text-shadow:inherit;
}
.city-media-heading .city-claim-part:first-child { top:0; left:0; text-align:left; }
.city-media-heading .city-claim-part:last-child { right:0; bottom:0; text-align:right; }
.city-all-in-button {
  position:absolute;
  top:50%;
  left:60%;
  display:grid;
  width:clamp(66px,7vw,112px);
  margin:0;
  translate:-50% -50%;
  font-size:clamp(.48rem,.58vw,.7rem);
  border-color:rgba(255,255,255,.82);
  background:linear-gradient(135deg,#13e9ff 0%,#477bff 34%,#c82eff 66%,#ff169b 100%);
  box-shadow:
    0 0 0 2px rgba(19,233,255,.48),
    -8px 0 28px rgba(19,233,255,.82),
    9px 0 34px rgba(255,22,155,.82),
    0 18px 36px rgba(0,0,0,.42),
    inset 0 1px rgba(255,255,255,.52);
  text-shadow:none;
}
.city-all-in-button:hover,
.city-all-in-button:focus-visible {
  box-shadow:
    0 0 0 2px rgba(19,233,255,.7),
    -10px 0 38px rgba(19,233,255,.95),
    12px 0 46px rgba(255,22,155,.95),
    0 22px 46px rgba(0,0,0,.48),
    inset 0 1px rgba(255,255,255,.65);
}
.city-media-heading p {
  width:min(100%,760px);
  margin:.55rem auto 0;
  color:#d3e3ed;
  font-size:clamp(.56rem,.78vw,.9rem);
  line-height:1.5;
  text-shadow:0 2px 12px rgba(0,0,0,.82);
}
.city-media-screens { position:absolute; z-index:4; inset:0; pointer-events:none; }
.city-media-screen {
  position:absolute;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-width:0;
  min-height:0;
  margin:0;
  padding:clamp(.2rem,.55vw,.7rem);
  overflow:hidden;
  border:0;
  border-radius:clamp(2px,.32vw,6px);
  color:#eaffff;
  background:
    radial-gradient(circle at 50% 42%,rgba(21,91,115,.2),transparent 52%),
    linear-gradient(145deg,rgba(3,12,22,.94),rgba(5,7,16,.98));
  box-shadow:inset 0 0 28px rgba(16,232,255,.08),0 0 18px rgba(16,232,255,.08);
  text-align:center;
  pointer-events:auto;
  transition:filter .35s ease,box-shadow .35s ease,background .35s ease;
}
.city-media-screen::before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(110deg,transparent 15%,rgba(255,255,255,.08) 43%,transparent 68%);
  translate:-110% 0;
  transition:translate .7s cubic-bezier(.22,1,.36,1);
}
.city-media-screen:hover,
.city-media-screen:focus-visible {
  outline:none;
  filter:brightness(1.24) saturate(1.12);
  background:radial-gradient(circle at 50% 44%,rgba(16,232,255,.18),transparent 54%),linear-gradient(145deg,rgba(4,18,31,.96),rgba(9,7,22,.98));
  box-shadow:inset 0 0 34px rgba(16,232,255,.14),0 0 24px rgba(16,232,255,.24),0 0 26px rgba(255,24,164,.14);
}
.city-media-screen:hover::before,
.city-media-screen:focus-visible::before { translate:110% 0; }
.city-media-screen > span {
  position:absolute;
  top:8%;
  left:7%;
  color:#78f6ff;
  font-size:clamp(.32rem,.48vw,.58rem);
  font-weight:900;
  letter-spacing:.08em;
}
.city-media-screen strong {
  color:#fff;
  font-size:clamp(.34rem,.72vw,.86rem);
  line-height:1.05;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.city-media-screen small {
  margin-top:.24em;
  color:#9fd9e4;
  font-size:clamp(.22rem,.42vw,.52rem);
  line-height:1.15;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.city-media-screen i {
  display:grid;
  place-items:center;
  width:clamp(16px,2.1vw,34px);
  aspect-ratio:1;
  margin-top:.45em;
  padding-left:.12em;
  border:1px solid rgba(126,246,255,.48);
  border-radius:50%;
  color:#fff;
  background:rgba(4,10,21,.66);
  font-size:clamp(.3rem,.52vw,.64rem);
  font-style:normal;
  box-shadow:0 0 18px rgba(16,232,255,.2);
}
.city-media-screen--portrait {
  left:9.689%;
  top:17.110%;
  width:9.031%;
  height:36.769%;
  padding:0;
  border-radius:1px;
  background:#02040a;
  clip-path:polygon(0 0,100% 6.36%,100% 100%,0 98.84%);
  cursor:pointer;
  font-family:inherit;
}
.city-media-video {
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  background:#02040a;
  pointer-events:none;
}
.city-media-screen--hero {
  left:58.612%;
  top:24.548%;
  width:18.780%;
  height:20.935%;
  border-radius:1px;
  clip-path:polygon(0 0,100% 23.86%,100% 100%,0 87.82%);
  cursor:pointer;
  font-family:inherit;
}
.city-media-note {
  position:absolute;
  z-index:5;
  left:3.2%;
  bottom:3%;
  display:flex;
  align-items:center;
  gap:.6rem;
  margin:0;
  color:rgba(232,247,255,.84);
  font-size:clamp(.45rem,.66vw,.72rem);
  font-weight:800;
  letter-spacing:.1em;
  text-shadow:0 2px 14px rgba(0,0,0,.9);
  text-transform:uppercase;
}
.city-media-note span { width:7px; height:7px; border-radius:50%; background:var(--cyan); box-shadow:0 0 15px var(--cyan); }

@media (max-width:759px) {
  .city-media-scene {
    aspect-ratio:auto;
    min-height:900px;
    padding:235px 1rem 2rem;
    background:
      linear-gradient(180deg,transparent 0 185px,#07111c 235px),
      url("assets/generated/webdesign-urban-city-media-pikaso-alternative.jpg") center top / auto 235px no-repeat,
      #07111c;
    box-shadow:none;
  }
  .city-media-heading {
    position:absolute;
    top:172px;
    right:1rem;
    bottom:auto;
    left:1rem;
    width:auto;
    padding:0;
    text-align:right;
  }
  .city-media-heading h3 { font-size:clamp(.65rem,2.8vw,.78rem); line-height:1.05; }
  .city-media-heading .city-story-claim { height:62px; white-space:normal; }
  .city-media-heading .city-claim-part:first-child { width:40%; }
  .city-media-heading .city-claim-part:last-child { width:35%; }
  .city-all-in-button { left:54%; width:52px; font-size:.4rem; }
  .city-media-screens {
    position:relative;
    inset:auto;
    display:grid;
    grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
    align-items:center;
    gap:.8rem;
    margin-top:1.2rem;
  }
  .city-media-screen {
    position:relative;
    inset:auto;
    width:100%;
    height:auto;
    min-height:118px;
    padding:1rem;
    border:1px solid rgba(96,238,255,.36);
    border-radius:16px;
    clip-path:none;
  }
  .city-media-screen > span { top:.7rem; left:.75rem; font-size:.56rem; }
  .city-media-screen strong { font-size:.84rem; }
  .city-media-screen small { font-size:.5rem; }
  .city-media-screen--portrait { min-height:252px; }
  .city-media-screen--hero { min-height:0; aspect-ratio:1.7; transform:none; }
  .city-media-note { position:relative; inset:auto; margin:1.15rem 0 0; font-size:.56rem; line-height:1.5; }
}

/* Full-width 16:9 sportscar film between services and city media. */
.sportscar-showcase {
  position:relative;
  z-index:1;
  width:100%;
  max-width:none;
  margin:0;
  padding:0;
  overflow:hidden;
  background:#02050a;
  border-block:1px solid rgba(16,232,255,.18);
  box-shadow:inset 0 1px rgba(255,255,255,.04),0 28px 80px rgba(0,0,0,.26);
}
.sportscar-showcase-frame {
  position:relative;
  width:100%;
  aspect-ratio:16 / 9;
  overflow:hidden;
  background:#02050a;
}
.sportscar-showcase-frame::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  border:1px solid rgba(255,255,255,.06);
  box-shadow:inset 0 0 70px rgba(0,0,0,.12);
}
.sportscar-showcase video {
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  object-position:center;
  background:#02050a;
}

/* Keep the interactive flipchart above the transparent laptop overlay. */
.watch-table-scene .watch-flipchart-copy {
  z-index:6;
  overflow:hidden;
  isolation:isolate;
}

/* Use the complete flipchart sheet: label top, statement center, copy below. */
.watch-flipchart-copy .flipchart-slide {
  display:grid;
  grid-template-rows:auto auto minmax(0,1fr) auto;
  align-items:start;
  gap:.35rem;
}
.watch-flipchart-copy .flipchart-slide--opening {
  grid-template-rows:auto minmax(0,1fr) auto;
}
.watch-flipchart-copy .flipchart-slide h2 {
  align-self:center;
  max-width:96%;
}
.watch-flipchart-copy .flipchart-slide > p:last-child {
  align-self:end;
  margin:0 0 .25rem;
}
.watch-flipchart-copy .flipchart-slide--position {
  grid-template-rows:minmax(0,1fr) auto auto;
}
.watch-flipchart-copy .flipchart-slide--position h2 { align-self:center; }
.watch-flipchart-copy .flipchart-slide--position h3 { margin:.15rem 0 0; }

/* Stronger transparent branding and presentation copy matched to each surface. */
@media (min-width:681px) {
  .pricing-presentation-logo {
    top:clamp(2.6rem,5vw,4.75rem);
    right:clamp(2.6rem,5vw,4.75rem);
    width:clamp(92px,10.5vw,142px);
    filter:saturate(1.35) contrast(1.2) drop-shadow(0 0 15px rgba(22,223,255,.3));
  }
  .flipchart-presentation-logo {
    top:.75rem;
    right:.85rem;
    width:clamp(58px,5.8vw,80px);
    filter:saturate(1.5) contrast(1.28) drop-shadow(0 2px 6px rgba(8,28,44,.22));
  }
  .flipchart-slide .eyebrow { max-width:calc(100% - 94px); }
  .watch-flipchart-copy .flipchart-slide > p:last-child {
    color:#1f3447;
    font-size:clamp(.78rem,1vw,1rem);
    line-height:1.48;
  }
  .watch-flipchart-copy .flipchart-slide--position > p:last-child {
    font-size:clamp(.7rem,.88vw,.9rem) !important;
    line-height:1.42 !important;
  }
}
@media (max-width:680px) {
  .pricing-presentation-logo { width:66px; filter:saturate(1.3) contrast(1.15) drop-shadow(0 0 9px rgba(22,223,255,.25)); }
  .flipchart-presentation-logo { width:40px; filter:saturate(1.4) contrast(1.2) drop-shadow(0 1px 4px rgba(8,28,44,.2)); }
}

/* Typography scale after removing slide metadata. */
@media (min-width:681px) {
  .pricing-slide--opening .eyebrow { font-size:clamp(.82rem,1.15vw,1rem); }
  .pricing-slide--opening h2 {
    max-width:20ch;
    font-size:clamp(2.8rem,5.15vw,4.65rem);
    line-height:1.02;
  }
  .pricing-slide--opening p {
    max-width:72ch;
    font-size:clamp(1rem,1.55vw,1.2rem);
    line-height:1.62;
  }
  .pricing-slide--beamer:not(.pricing-slide--opening) h2 {
    font-size:clamp(2.5rem,4.7vw,4.25rem);
  }
  .pricing-slide--beamer:not(.pricing-slide--opening) p {
    font-size:clamp(.94rem,1.35vw,1.08rem);
  }
  .flipchart-slide--opening .eyebrow { font-size:clamp(.72rem,.9vw,.9rem); }
  .watch-flipchart-copy .flipchart-slide--opening h2 {
    max-width:96%;
    font-size:clamp(2.2rem,3.05vw,3.5rem);
    line-height:1.02;
  }
  .watch-flipchart-copy .flipchart-slide--opening > p:last-child {
    font-size:clamp(.88rem,1.08vw,1.08rem);
    line-height:1.5;
  }
  .watch-flipchart-copy .flipchart-slide--position h2 {
    font-size:clamp(2rem,2.75vw,3rem) !important;
  }
  .watch-flipchart-copy .flipchart-slide--position h3 {
    font-size:clamp(1.1rem,1.5vw,1.5rem);
  }
  .watch-flipchart-copy .flipchart-slide--position > p:last-child {
    font-size:clamp(.74rem,.94vw,.94rem) !important;
    line-height:1.42 !important;
  }
}


/* Performance sprint: keep the KI-Joker look, but avoid off-screen paint and heavy mobile compositing. */video[preload="none"] {
  background-color: #050914;
  background-size: cover;
  background-position: center;
}

model-viewer[reveal="interaction"] {
  background: radial-gradient(circle at 50% 24%, rgba(16,232,255,.16), transparent 42%), #050914;
}

@media (max-width: 759px), (pointer: coarse) {
  .aurora,
  .particle-field i,
  .noise {
    animation: none !important;
  }
  .hero-flip-card,
  .service-choice,
  .watch-price-card-stage,
  .conference-price-card,
  .team-card-inner,
  .watch-table-scene .watch-concept-papers article,
  .watch-table-scene .watch-laptop-screens article {
    will-change: auto;
  }
  .city-media-screen,
  .sportscar-showcase-frame,
  .production-viewer,
  .service-detail-shell {
    box-shadow: 0 18px 48px rgba(0,0,0,.42), 0 0 26px rgba(16,232,255,.12);
  }
}

@media (prefers-reduced-motion: reduce) {
  model-viewer {
    --poster-color: #050914;
  }
}

/* Unified rounded frames for all top-level website sections. */
main { --section-frame-gutter:clamp(.85rem,2.4vw,2.25rem); }
main > section.hero,
main > section.section-pad,
main > section.sportscar-showcase,
main > section.webdesign-feature-section.city-media-section {
  width:min(1480px,calc(100% - (var(--section-frame-gutter) * 2)));
  max-width:min(1480px,calc(100% - (var(--section-frame-gutter) * 2)));
  margin:clamp(1rem,2.3vw,2.25rem) auto;
  border:1px solid rgba(16,232,255,.18);
  border-radius:clamp(24px,3vw,46px);
  box-shadow:0 24px 72px rgba(0,0,0,.34),0 0 48px rgba(16,232,255,.08),inset 0 1px rgba(255,255,255,.07);
  overflow:hidden;
  background-clip:padding-box;
}
main > section.section-pad { max-width:min(1480px,calc(100% - (var(--section-frame-gutter) * 2))); }
main > section.hero { min-height:calc(100svh - 120px); }
main > section:first-child { margin-top:var(--section-frame-gutter); }
main > section:last-child { margin-bottom:var(--section-frame-gutter); }
@media (max-width:680px) {
  main { --section-frame-gutter:.65rem; }
  main > section.hero,
  main > section.section-pad,
  main > section.sportscar-showcase,
  main > section.webdesign-feature-section.city-media-section {
    border-radius:clamp(20px,7vw,30px);
    margin-block:.85rem;
  }
}