/* Doberg app demos: small looping phone mockups shared by every page variation.
   Each demo runs an 8 s timeline; stages fade in with s1..s4 and leave together. */
.demo{--ease:cubic-bezier(.32,.72,0,1);position:relative;display:flex;flex-direction:column;align-items:center;gap:14px}
.demo-tabs{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:rgba(0,0,0,.06)}
.demo-tabs.dark{background:rgba(255,255,255,.08)}
.demo-tabs button{font:inherit;font-size:13px;font-weight:600;min-height:36px;padding:0 16px;border:0;border-radius:999px;background:transparent;color:inherit;opacity:.65;cursor:pointer;transition:background .5s var(--ease),opacity .5s var(--ease)}
.demo-tabs button[aria-pressed="true"]{background:rgba(255,255,255,.95);color:#1F1F21;opacity:1;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.demo-tabs.dark button[aria-pressed="true"]{background:rgba(255,255,255,.14);color:#EEF1EC}
.phone{width:248px;aspect-ratio:9/18.6;border-radius:42px;padding:7px;background:linear-gradient(160deg,#2a2a2c,#121213);box-shadow:0 30px 60px -24px rgba(20,16,10,.45),inset 0 1px 1px rgba(255,255,255,.18)}
.screen{position:relative;width:100%;height:100%;border-radius:35px;overflow:hidden}
.screen>.stage{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .5s var(--ease)}
.screen>.stage.is-on{opacity:1;visibility:visible}
.island{position:absolute;top:9px;left:50%;width:76px;height:22px;margin-left:-38px;border-radius:12px;background:#0b0b0c;z-index:3}
.ex{position:absolute;top:40px;right:14px;font:500 10px/1 'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;padding:4px 7px;border-radius:6px;z-index:2}
.hd{position:absolute;top:40px;left:16px;font:600 17px/1.1 inherit;z-index:2}

/* timelines */
@keyframes s1{0%,4%{opacity:0;transform:translateY(10px)}10%,90%{opacity:1;transform:none}97%,100%{opacity:0}}
@keyframes s2{0%,20%{opacity:0;transform:translateY(10px)}27%,90%{opacity:1;transform:none}97%,100%{opacity:0}}
@keyframes s3{0%,38%{opacity:0;transform:translateY(10px)}45%,90%{opacity:1;transform:none}97%,100%{opacity:0}}
@keyframes s4{0%,56%{opacity:0;transform:translateY(10px)}63%,90%{opacity:1;transform:none}97%,100%{opacity:0}}
@keyframes spin{0%,3%{transform:rotateY(0) scale(1)}12%,20%{transform:rotateY(180deg) scale(1.03)}30%,100%{transform:rotateY(360deg) scale(1)}}
@keyframes sweep{0%{transform:translateY(0);opacity:0}5%{opacity:1}34%{transform:translateY(176px);opacity:1}38%,100%{transform:translateY(176px);opacity:0}}
@keyframes sheet{0%,38%{transform:translateY(105%)}47%,89%{transform:none}97%,100%{transform:translateY(105%)}}
@keyframes tap{0%,26%{opacity:0;transform:scale(.4)}32%{opacity:1;transform:scale(1)}46%,100%{opacity:0;transform:scale(2.1)}}
@keyframes grow{0%,56%{transform:scaleX(0)}68%,90%{transform:scaleX(1)}97%,100%{transform:scaleX(1)}}
.a1{animation:s1 8s var(--ease) infinite both}.a2{animation:s2 8s var(--ease) infinite both}
.a3{animation:s3 8s var(--ease) infinite both}.a4{animation:s4 8s var(--ease) infinite both}

/* Skintel */
.sk{background:#F4EDE0;color:#1A1814;font-family:'Hanken Grotesk',-apple-system,sans-serif}
.sk .ex{background:rgba(163,88,72,.12);color:#A35848}
.sk .finder{position:absolute;left:24px;right:24px;top:84px;height:220px;border-radius:22px;background:radial-gradient(120% 90% at 50% 30%,#EFE4D2,#E2D3BC)}
.sk .finder::before,.sk .finder::after{content:"";position:absolute;inset:10px;border-radius:16px;border:2px solid transparent;
  background:linear-gradient(#A35848,#A35848) top left/22px 2px no-repeat,linear-gradient(#A35848,#A35848) top left/2px 22px no-repeat,
  linear-gradient(#A35848,#A35848) top right/22px 2px no-repeat,linear-gradient(#A35848,#A35848) top right/2px 22px no-repeat,
  linear-gradient(#A35848,#A35848) bottom left/22px 2px no-repeat,linear-gradient(#A35848,#A35848) bottom left/2px 22px no-repeat,
  linear-gradient(#A35848,#A35848) bottom right/22px 2px no-repeat,linear-gradient(#A35848,#A35848) bottom right/2px 22px no-repeat}
.sk .finder::after{display:none}
.sk .bottle{position:absolute;left:50%;top:10px;width:66px;height:204px;margin-left:-33px;perspective:700px;filter:drop-shadow(0 8px 10px rgba(26,24,20,.18))}
.sk .bottle .spin{position:relative;width:100%;height:100%;transform-style:preserve-3d;animation:spin 8s var(--ease) infinite both}
.sk .bottle img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.sk .bottle img.b{transform:rotateY(180deg)}
.sk .line{position:absolute;left:18px;right:18px;top:12px;height:2px;border-radius:2px;background:#A35848;box-shadow:0 0 12px 2px rgba(163,88,72,.5);animation:sweep 8s var(--ease) infinite}
.sk .hint{position:absolute;left:0;right:0;top:318px;text-align:center;font-size:12px;color:#7a6c60}
.sk .sheet{position:absolute;left:8px;right:8px;bottom:8px;padding:16px;border-radius:26px;background:#FFFDF9;box-shadow:0 -10px 30px rgba(26,24,20,.12);animation:sheet 8s var(--ease) infinite both}
.sk .sheet .k{font:500 10px/1 'IBM Plex Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:#8a7a6c}
.sk .sheet h4{margin:6px 0 10px;font-size:17px;line-height:1.2}
.sk .verdict{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:rgba(163,88,72,.12);color:#8E4A3B;font-size:12px;font-weight:700}
.sk .verdict::before{content:"";width:7px;height:7px;border-radius:4px;background:#A35848}
.sk .why{margin:10px 0 0;font-size:12.5px;line-height:1.45;color:#4A3F37}
.sk .why b{color:#1A1814}
.sk .chat{position:absolute;left:12px;right:12px;top:78px;display:flex;flex-direction:column;gap:10px}
.sk .me{align-self:flex-end;max-width:86%;padding:9px 13px;border-radius:18px 18px 6px 18px;background:#1A1814;color:#F4EDE0;font-size:13px;line-height:1.35}
.sk .ai{font-family:'Instrument Serif',Georgia,serif;font-size:17px;line-height:1.35;color:#1A1814}
.sk .chip{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:16px;background:#FFFDF9;box-shadow:0 1px 0 rgba(26,24,20,.06)}
.sk .chip .t{width:28px;height:36px;border-radius:8px;background:linear-gradient(#1A1814 0 22%,#fff 22%);box-shadow:inset 0 0 0 1px rgba(26,24,20,.12)}
.sk .chip span{font-size:12px;line-height:1.3}
.sk .chip em{display:block;font-style:normal;color:#A35848;font-weight:600}
.sk .composer,.bl .composer{position:absolute;left:10px;right:10px;bottom:12px;height:40px;border-radius:20px;display:flex;align-items:center;justify-content:space-between;padding:0 5px 0 14px;font-size:12.5px}
.sk .composer{background:#FFFDF9;color:#8a7a6c}
.composer i{width:30px;height:30px;border-radius:15px;display:flex;align-items:center;justify-content:center}
.sk .composer i{background:#A35848}
.composer i::before{content:"";width:9px;height:9px;border-left:2px solid currentColor;border-top:2px solid currentColor;transform:translateY(2px) rotate(45deg)}
.sk .composer i{color:#FFF8F0}

/* Blith */
.bl{background:#0E1211;color:#EEF1EC;font-family:'Hanken Grotesk',-apple-system,sans-serif}
.bl .ex{background:rgba(94,196,192,.14);color:#8ED8D4}
.bl .body{position:absolute;left:0;right:0;top:56px}
.bl .body img{display:block;width:100%;height:auto}
.bl .ring{position:absolute;left:39%;top:85%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;border:2px solid #fff;animation:tap 8s var(--ease) infinite both}
.bl .note{position:absolute;left:10px;right:10px;bottom:10px;padding:14px;border-radius:22px;background:rgba(22,27,26,.92);box-shadow:0 -6px 24px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.06)}
.bl .note .k{font:500 10px/1 'IBM Plex Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:#7E8883}
.bl .note h4{margin:6px 0 2px;font-size:17px}
.bl .note p{margin:0;font-size:12.5px;color:#A9B2AD}
.bl .saved{margin-top:10px;display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:#5EC4C0}
.bl .saved::before{content:"";width:10px;height:5px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg) translateY(-2px)}
.bl .chat{position:absolute;left:12px;right:12px;top:78px;display:flex;flex-direction:column;gap:12px}
.bl .me{align-self:flex-end;max-width:86%;padding:9px 13px;border-radius:18px 18px 6px 18px;background:#1E2423;font-size:13px}
.bl .ai{font-family:'Newsreader',Georgia,serif;font-size:16px;line-height:1.4}
.bl .card{padding:14px;border-radius:20px;background:#161B1A;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.bl .card .k{font:500 10px/1 'IBM Plex Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:#7E8883}
.bl .score{display:flex;align-items:flex-end;gap:10px;margin:8px 0 12px}
.bl .score b{font-size:46px;line-height:.85;font-weight:600;letter-spacing:-.03em}
.bl .score span{font-size:13px;font-weight:700;color:#5EC4C0;padding-bottom:3px}
.bl .bar{position:relative;height:16px}
.bl .bar::before{content:"";position:absolute;left:0;right:0;top:6px;height:4px;border-radius:2px;background:rgba(255,255,255,.08)}
.bl .bar .band{position:absolute;left:64%;width:10%;top:3px;height:10px;border-radius:3px;background:rgba(94,196,192,.22)}
.bl .bar .fill{position:absolute;left:0;width:78%;top:6px;height:4px;border-radius:2px;background:#5EC4C0;transform-origin:left;animation:grow 8s var(--ease) infinite both}
.bl .bar .mk{position:absolute;left:78%;top:0;width:3px;height:16px;margin-left:-1px;border-radius:2px;background:#EEF1EC}
.bl .usual{margin-top:6px;font-size:11px;color:#7E8883}
.bl .composer{background:#161B1A;color:#7E8883;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.bl .composer i{background:#5EC4C0;color:#0E1211}

@media (prefers-reduced-motion:reduce){
  .demo *{animation:none!important}
  .sk .line{display:none}
}