/* Tehnician Digital signature: mint for function, purple for identity. */
:root{--td-purple:#9a3fd2;--td-purple-deep:#5b247c;--td-mint:#62efbc;--td-warm:#ece8df}
.td-chapter{position:relative}
.td-chapter::before{content:"";position:absolute;left:0;top:0;width:min(210px,30vw);height:2px;background:linear-gradient(90deg,var(--td-purple),var(--td-mint),transparent);opacity:.78}
.td-three>article,.td-offers>article,.service-scenarios>article{position:relative;overflow:hidden}
.td-three>article::before,.td-offers>article::before,.service-scenarios>article::before{content:"";position:absolute;z-index:3;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,var(--td-purple),var(--td-mint));opacity:.7}

/* Studio photographs are the visual surface of each card, with no hard black rectangle. */
.td-three>article>.studio-scene.studio-cutout,.td-offers>article>.studio-scene.studio-cutout,.service-scenarios>article>.studio-scene.studio-cutout{position:relative;margin:-24px -24px 18px!important;padding:0 0 14px!important;background:transparent!important;border:0!important;overflow:hidden!important;border-radius:15px 15px 0 0!important}
.td-three>article>.studio-scene.studio-cutout>img,.td-offers>article>.studio-scene.studio-cutout>img,.service-scenarios>article>.studio-scene.studio-cutout>img{width:100%!important;aspect-ratio:3/2!important;object-fit:contain!important;border-radius:0!important;filter:none;-webkit-mask-image:none;mask-image:none}
.studio-cutout .studio-story-caption{position:absolute;z-index:2;left:14px;right:14px;bottom:6px;padding:0!important;text-align:left!important;color:var(--text)!important;font-weight:650;letter-spacing:.015em;text-shadow:none}

.td-proofline .service-shortcut{position:relative;background:linear-gradient(155deg,color-mix(in srgb,var(--panel) 88%,var(--td-purple) 12%),var(--panel))!important}
.td-proofline .shortcut-photo{-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 72%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0%,#000 72%,transparent 100%);filter:saturate(.95) contrast(1.05)}
.td-proofline .service-shortcut:nth-child(4) .shortcut-photo{object-position:center 42%!important;filter:saturate(1.15) brightness(1.14) contrast(1.05)}
.td-proofline .shortcut-photo{background:transparent!important;object-fit:contain!important}
.td-proofline .service-shortcut{background:
 radial-gradient(circle at 80% 14%,color-mix(in srgb,var(--td-purple) 13%,transparent),transparent 42%),
 radial-gradient(circle at 12% 56%,color-mix(in srgb,var(--td-mint) 12%,transparent),transparent 44%),
 var(--panel)!important}
.studio-cutout img[src*="-cutout-r11.png"]{object-fit:contain!important;background:transparent!important;-webkit-mask-image:none!important;mask-image:none!important}
.studio-cutout:has(img[src*="-cutout-r11.png"]){background:
 radial-gradient(circle at 78% 18%,color-mix(in srgb,var(--td-purple) 12%,transparent),transparent 42%),
 radial-gradient(circle at 14% 62%,color-mix(in srgb,var(--td-mint) 12%,transparent),transparent 45%),
 transparent!important}
.studio-cutout:has(img[src*="-cutout-r11.png"]) .studio-story-caption{left:10px;right:auto;bottom:8px;width:max-content;max-width:calc(100% - 20px);padding:6px 10px!important;border:1px solid color-mix(in srgb,var(--line) 72%,var(--td-mint) 28%);border-radius:999px;background:color-mix(in srgb,var(--panel) 91%,transparent);box-shadow:0 5px 16px rgba(18,22,21,.14);backdrop-filter:blur(8px);font-size:.72rem;line-height:1.2}

html[data-theme="light"]{--bg:#ece9e2;--panel:#f8f6f1;--panel2:#e8eee9;--line:rgba(43,36,48,.18)}
html[data-theme="light"] body{background:radial-gradient(circle at 8% 18%,rgba(154,63,210,.08),transparent 28%),radial-gradient(circle at 88% 8%,rgba(98,239,188,.09),transparent 30%),var(--bg)}
html[data-theme="light"] .td-three>article,html[data-theme="light"] .td-offers>article,html[data-theme="light"] .service-scenarios>article{background:linear-gradient(180deg,color-mix(in srgb,var(--panel) 92%,var(--td-purple) 8%),var(--panel) 46%,color-mix(in srgb,var(--panel) 94%,var(--td-mint) 6%))!important;box-shadow:0 18px 46px rgba(51,38,57,.08)}
html[data-theme="dark"] .td-three>article,html[data-theme="dark"] .td-offers>article,html[data-theme="dark"] .service-scenarios>article{background:linear-gradient(165deg,#151816,#111513 70%,#17111c)!important}

.button:not(.button-ghost),.text-button{--button-edge:linear-gradient(90deg,var(--td-purple),var(--td-mint))}
.button:not(.button-ghost){box-shadow:inset 0 -2px color-mix(in srgb,var(--td-purple) 55%,transparent),0 8px 24px color-mix(in srgb,var(--td-mint) 12%,transparent)}
.story-progress span{background:linear-gradient(90deg,var(--td-purple),var(--td-mint))!important}

@media(max-width:700px){.td-three>article>.studio-scene.studio-cutout,.td-offers>article>.studio-scene.studio-cutout,.service-scenarios>article>.studio-scene.studio-cutout{margin:-24px -20px 16px!important}.studio-cutout .studio-story-caption{left:12px;right:12px}}
@media(prefers-reduced-motion:reduce){.td-chapter::before{opacity:.65}}

/* The transparent hardware scene uses the current theme as its real backdrop. */
picture.studio-hardware-cutout{background:
  radial-gradient(circle at 74% 30%,color-mix(in srgb,var(--td-purple) 18%,transparent),transparent 34%),
  radial-gradient(circle at 22% 42%,color-mix(in srgb,var(--td-mint) 16%,transparent),transparent 38%),
  linear-gradient(180deg,color-mix(in srgb,var(--panel) 94%,var(--td-purple) 6%),var(--panel));
  overflow:hidden}
picture.studio-hardware-cutout>img{display:block;width:100%;height:auto;object-fit:contain}
html[data-theme="light"] picture.studio-hardware-cutout{background:
  radial-gradient(circle at 72% 24%,rgba(154,63,210,.12),transparent 34%),
  radial-gradient(circle at 20% 38%,rgba(98,239,188,.16),transparent 40%),
  linear-gradient(180deg,#f7f3ec,#e6e1d8)}
html[data-theme="dark"] picture.studio-hardware-cutout{background:
  radial-gradient(circle at 72% 24%,rgba(154,63,210,.19),transparent 34%),
  radial-gradient(circle at 20% 38%,rgba(98,239,188,.12),transparent 40%),
  linear-gradient(180deg,#171b1a,#090c0b)}

@media(max-width:700px){
  .td-device-stage{width:100vw!important;max-width:none!important;margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important;border-left:0!important;border-right:0!important;border-radius:0!important;overflow:hidden!important}
  .td-device-stage picture.studio-hardware-cutout{border-radius:0!important}
}
