/* Original navy / ice-blue phone story, refreshed for MoteryoAI. Public surface only. */
.phone-site { background:#030712; --mp-muted:#9daec4; }
.phone-site main { overflow:clip; }
.phone-site em { font-style:normal; color:#9bc7ff; }
.mp-nav { height:72px; padding:0 5.5%; display:flex; align-items:center; justify-content:space-between; gap:20px; position:sticky; top:0; z-index:20; border-bottom:1px solid #ffffff12; background:#030712; }
.mp-nav nav { display:flex; align-items:center; gap:32px; font-size:12px; }
.mp-nav .brand { font-size:24px; }
.mp-login { display:flex; align-items:center; gap:12px; border-left:1px solid #ffffff22; padding-left:30px; }
.mp-story { position:relative; }
.mp-stage { display:none; }
.mp-static-intro { padding:55px 6% 0; max-width:1250px; margin:auto; }
.mp-static-intro h1 { font-size:clamp(38px,5vw,68px); font-weight:400; margin:22px 0; }
.is-animated .mp-static-intro { display:none; }
.mp-story.is-animated { height:780svh; }
.is-animated .mp-stage { display:grid; grid-template-columns:45% 55%; position:sticky; top:72px; height:calc(100svh - 72px); min-height:548px; padding:50px 5.5% 105px; overflow:hidden; background:radial-gradient(ellipse at 76% 46%,#10233a 0%,#07111e 32%,#030712 65%); }
.mp-copy { z-index:3; align-self:center; padding-bottom:22px; }
.mp-eyebrow { display:block; font-size:10px; letter-spacing:2.4px; line-height:1.6; color:#9bc7ff; font-weight:600; }
.mp-copy h1 { font-size:clamp(42px,5.3vw,82px); letter-spacing:-.065em; line-height:1.06; margin:26px 0; font-weight:400; max-width:670px; }
.mp-copy>p { max-width:370px; font-size:16px; line-height:1.85; color:var(--mp-muted); }
.mp-discover { display:flex; align-items:center; gap:28px; font-size:12px; margin-top:35px; width:fit-content; }
.mp-down { display:grid; place-items:center; width:36px; height:36px; border:1px solid #9bc7ff50; border-radius:50%; color:#9bc7ff; font-size:17px; }
.mp-skip { display:inline-block; color:#8898ad; font-size:10px; margin-top:22px; }
.mp-scene { position:relative; height:100%; min-height:0; perspective:1400px; display:grid; place-items:center; isolation:isolate; }
.mp-orbit { position:absolute; width:95%; aspect-ratio:1; border:1px solid #9bc7ff12; border-radius:50%; transform:rotateX(68deg) rotateZ(-25deg); bottom:-9%; pointer-events:none; }
.mp-phone-shadow { position:absolute; bottom:1%; width:56%; height:30px; border-radius:50%; background:#0009; filter:blur(22px); }
.mp-device { height:min(650px,100%); aspect-ratio:284/590; position:relative; transform-style:preserve-3d; transform:rotateY(-23deg) rotateX(5deg) rotateZ(5deg); will-change:transform; }
.mp-device-front { position:absolute; inset:0; border-radius:46px; background:linear-gradient(135deg,#b8c3d2,#303d50 20%,#8d9aab 48%,#c0c9d5 62%,#263548 85%); padding:3px; transform:translateZ(8px); box-shadow:0 26px 80px #0008; }
.mp-device-rim { position:absolute; inset:-1px; border-radius:46px; transform:translateZ(0); background:#8090a5; box-shadow:2px 1px 0 #d2dce8,-2px 1px 0 #c6d3df,4px 4px 0 #314055,6px 4px 0 #617187; }
.mp-device-back { position:absolute; inset:0; border-radius:46px; background:#101c2d; transform:translateZ(-8px); }
.mp-device-screen { height:100%; position:relative; overflow:hidden; background:#030712; border:8px solid #090e17; border-radius:43px; }
.mp-device-button { width:5px; height:58px; background:linear-gradient(90deg,#b0bdcb,#334259); position:absolute; right:-5px; top:115px; border-radius:4px; }
.mp-screen { position:absolute; top:26px; left:0; width:100%; height:calc(100% - 26px); object-fit:cover; object-position:top; opacity:0; transition:opacity 220ms var(--ease-out); }
.mp-screen.is-current { opacity:1; }
.mp-island { position:absolute; width:70px; height:20px; left:calc(50% - 35px); top:3px; background:#000; border-radius:20px; z-index:3; }
.mp-statusbar { height:27px; display:flex; align-items:center; justify-content:space-between; padding:0 15px; font-size:8px; background:#030712; }
.mp-home-indicator { position:absolute; z-index:4; width:34%; height:3px; border-radius:3px; background:#f8fafc9a; left:33%; bottom:5px; }
.mp-diagnosis-card { position:absolute; bottom:17%; left:0; width:245px; z-index:5; background:#0e1b2aee; border:1px solid #91a9c83b; box-shadow:0 18px 50px #0006; padding:20px; border-radius:16px; }
.mp-card-label { font-size:8px; letter-spacing:1.8px; color:#a7c7ec; }
.mp-diagnosis-card strong { display:block; font-size:22px; font-weight:400; margin:10px 0 15px; }
.mp-cause-track { height:3px; background:#ffffff10; margin-bottom:13px; }
.mp-cause-track span { display:block; width:48%; height:100%; background:#9bc7ff; }
.mp-diagnosis-card small { font-size:9px; color:#a5b4c8; }
.mp-floating-chat { position:absolute; inset:0; z-index:7; pointer-events:none; }
.mp-bubble { position:absolute; top:0; left:0; width:290px; padding:18px 20px; opacity:0; visibility:hidden; border:1px solid #9bc7ff33; box-shadow:0 20px 65px #0007; transform-origin:50% 75%; }
.mp-bubble.user { border-radius:22px 22px 5px 22px; background:#173354f5; }
.mp-bubble.assistant { border-radius:22px 22px 22px 5px; background:#0d1a2df7; }
.mp-bubble>span { font-size:8px; letter-spacing:1.3px; color:#9bc7ff; }
.mp-bubble p { font-size:13px; line-height:1.7; margin:9px 0 0; color:#f0f5fc; }
.mp-bubble small { display:block; text-align:right; color:#9bc7ff; font-size:9px; margin-top:3px; }
.mp-model-slot { position:absolute; inset:8% -5% 2% -5%; z-index:8; visibility:hidden; opacity:0; }
.mp-model { height:100%; min-height:360px; display:flex; flex-direction:column; border:1px solid #6c86a42d; border-radius:22px; background:#030712; overflow:hidden; box-shadow:0 22px 70px #0005; }
.mp-model-top { display:flex; justify-content:space-between; gap:15px; font-size:9px; letter-spacing:1.2px; padding:22px 24px 0; color:#9bc7ff; }
.mp-model-top span:last-child { color:#92a0b4; font-size:8px; }
.mp-model-viewport { position:relative; flex:1; min-height:260px; }
.mp-model iframe { position:absolute; inset:0; border:0; width:100%; height:100%; pointer-events:none; }
.mp-model-status { position:absolute; inset:35% 15% auto; font-size:12px; text-align:center; }
.mp-model-controls { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; padding:0 12px; }
.mp-model-controls button { font-size:10px; padding:10px 12px; min-height:40px; border-radius:8px; background:transparent; }
.mp-model-controls button[aria-pressed=true] { color:#b4daff; border-color:#9bc7ff66; background:#122337; }
.mp-model-note { text-align:center; padding:0 18px; font-size:9px; margin:12px 0 18px; }
.mp-photo-stack { position:absolute; left:-4%; bottom:13%; width:275px; z-index:8; opacity:0; visibility:hidden; }
.mp-reference { margin:0; border-radius:16px; border:1px solid #9bc7ff33; background:#0c192a; box-shadow:0 24px 60px #0008; overflow:hidden; }
.mp-reference img { display:block; width:100%; height:150px; object-fit:cover; }
.mp-reference figcaption { padding:14px 16px; }
.mp-reference figcaption>span { display:block; font-size:8px; letter-spacing:1.8px; color:#9bc7ff; }
.mp-reference strong { display:block; font-size:14px; margin:6px 0; font-weight:400; }
.mp-reference small,.mp-reference a { display:block; font-size:9px; color:#9eafc4; line-height:1.6; }
.mp-reference a { color:#b8d6fa; margin-top:5px; text-decoration:underline; text-underline-offset:3px; }
.mp-photo-back { position:absolute; z-index:-1; width:78%; right:-56%; top:-90px; transform:rotate(9deg); }
.mp-photo-back img { height:120px; }
.mp-photo-back figcaption { padding:12px; }
.mp-saved { position:absolute; bottom:18%; left:0; display:flex; align-items:center; gap:16px; padding:20px 24px; background:#101e2d; border:1px solid #9bc7ff38; border-radius:18px; box-shadow:0 20px 60px #0006; z-index:6; opacity:0; visibility:hidden; }
.mp-saved>span { color:#a7deca; font-size:22px; }
.mp-saved strong,.mp-saved small { display:block; }
.mp-saved strong { font-weight:400; font-size:18px; }
.mp-saved small { font-size:10px; margin-top:7px; }
.mp-stage-bottom { position:absolute; left:5.5%; right:5.5%; bottom:28px; display:flex; align-items:end; justify-content:space-between; gap:24px; }
.mp-stage-bottom>p { font-size:9px; color:#788ba5; margin:0 0 7px; text-align:right; }
.mp-chapters { display:flex; gap:22px; }
.mp-chapters a { min-height:44px; color:#8293ab; font-size:11px; display:flex; flex-direction:column; justify-content:center; gap:7px; border-top:1px solid #ffffff20; min-width:56px; padding:8px 0; }
.mp-chapters a span { font-size:8px; letter-spacing:1px; color:#697d98; }
.mp-chapters a[aria-current] { color:#e6f2ff; border-color:#b9d8ff; }
.mp-chapters a[aria-current] span { color:#b9d8ff; }
.mp-progress { position:absolute; bottom:0; left:0; right:0; height:2px; background:#ffffff08; }
.mp-progress span { display:block; height:100%; background:#9bc7ff; transform:scaleX(0); transform-origin:left; }
.is-animated .mp-transcript { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.mp-transcript { max-width:1250px; margin:auto; padding:35px 6%; }
.mp-act { display:grid; grid-template-columns:1.1fr 1fr; align-items:center; gap:50px; padding:60px 0; border-bottom:1px solid #ffffff15; scroll-margin-top:20px; }
.mp-act h2 { font-size:clamp(32px,4.5vw,65px); line-height:1.1; letter-spacing:-.05em; margin:20px 0; font-weight:400; }
.mp-act-copy>p { max-width:410px; }
.mp-static-screen { margin:0; text-align:center; }
.mp-static-screen img { width:min(100%,270px); height:auto; border-radius:25px; border:6px solid #8090a533; }
.mp-static-screen figcaption { font-size:10px; color:#93a4bb; margin-top:12px; }
.mp-static-model-slot { min-height:430px; }
.mp-static-model-slot .mp-model { min-height:430px; }
.mp-chat-transcript { list-style:none; padding:0; display:grid; gap:15px; }
.mp-chat-transcript li { border-left:2px solid #9bc7ff55; padding:5px 0 5px 16px; }
.mp-chat-transcript strong { font-size:10px; color:#9bc7ff; }
.mp-chat-transcript p { font-size:13px; margin:5px 0; }
.mp-static-photos { grid-column:1/-1; display:grid; grid-template-columns:1fr 1fr; gap:25px; }
.mp-features { max-width:1440px; margin:auto; padding:125px 7%; display:grid; grid-template-columns:1fr 1fr; gap:60px; border-top:1px solid #ffffff16; }
.phone-site h2 em { color:#9bc7ff; }
.mp-features h2,.mp-workshop h2,.mp-ending h2 { font-size:clamp(36px,4vw,60px); line-height:1.1; letter-spacing:-.055em; margin:25px 0; font-weight:400; }
.mp-feature-list article { display:flex; gap:25px; padding:22px 0; border-top:1px solid #ffffff17; }
.mp-feature-list article>span { font-size:10px; color:#9bc7ff; padding-top:4px; }
.mp-feature-list h3 { font-size:20px; font-weight:400; }
.mp-feature-list p { font-size:13px; margin-bottom:0; }
.mp-note { grid-column:1/-1; font-size:11px; max-width:670px; margin:0; color:#8293aa; }
.mp-workshop { display:grid; grid-template-columns:1.1fr 1fr; max-width:1440px; margin:0 auto; padding:0 7% 115px; gap:75px; align-items:center; }
.mp-workshop>img { width:100%; height:450px; object-fit:cover; border-radius:8px; object-position:58%; }
.mp-workshop p { font-size:14px; max-width:390px; }
.mp-workshop .primary { margin-top:14px; font-size:12px; }
.mp-text-link { display:block; width:fit-content; font-size:11px; color:#9dadc4; margin-top:22px; }
.mp-ending { text-align:center; padding:100px 6% 90px; border-top:1px solid #ffffff16; background:radial-gradient(ellipse at 50% 95%,#0d1d32,transparent 70%); }
.mp-ending h2 { font-size:clamp(38px,5vw,76px); }
.mp-ending .button { margin-top:12px; font-size:12px; }
.mp-ending p { font-size:11px; margin-top:25px; }
.mp-ending p a { text-decoration:underline; text-underline-offset:3px; }
.mp-credits { padding:22px 6%; font-size:11px; color:#8ea0b9; border-top:1px solid #ffffff12; }
.mp-credits summary { cursor:pointer; width:fit-content; padding:6px 0; }
.mp-credits p { font-size:11px; max-width:750px; }
.mp-credits a { text-decoration:underline; text-underline-offset:3px; }
.mp-credits li { margin:10px 0; }
.mp-footer { display:flex; align-items:center; gap:35px; padding:30px 6%; border-top:1px solid #ffffff15; }
.mp-footer>span { color:#8a9bb1; font-size:11px; flex:1; }
.mp-footer>a:last-child { font-size:11px; }
@media (hover:hover) and (pointer:fine) { .mp-nav a:hover,.mp-text-link:hover,.mp-skip:hover { color:#c8e2ff; } .mp-chapters a:hover { color:#c8e2ff; } }
@media (max-width:1100px) {
  .is-animated .mp-stage { grid-template-columns:43% 57%; padding-inline:5%; }
  .mp-copy h1 { font-size:clamp(42px,5.7vw,65px); }
  .mp-copy>p { font-size:14px; max-width:300px; }
  .mp-device { height:min(600px,100%); }
  .mp-diagnosis-card { width:215px; padding:17px; left:-3%; }
  .mp-model-slot { inset:12% -2% 2% -4%; }
  .mp-chapters { gap:18px; }
  .mp-stage-bottom>p { max-width:140px; }
  .mp-nav nav { gap:22px; }
  .mp-workshop { gap:40px; }
}
@media (max-width:700px) {
  .mp-nav { height:64px; padding:0 6%; }
  .mp-nav .brand { font-size:21px; gap:7px; }
  .mp-nav .brandmark { width:38px; }
  .mp-nav nav>a:not(.mp-login) { display:none; }
  .mp-login { padding:0; border:0; font-size:10px; gap:6px; }
  .is-animated .mp-stage { top:64px; height:calc(100svh - 64px); min-height:556px; grid-template-columns:1fr; grid-template-rows:auto minmax(0,1fr); padding:28px 6% 78px; }
  .mp-copy { padding:0; align-self:start; }
  .mp-eyebrow { font-size:8px; letter-spacing:1.6px; }
  .mp-copy h1 { font-size:clamp(34px,9.4vw,49px); letter-spacing:-.055em; line-height:1.05; margin:14px 0 13px; }
  .mp-copy>p { font-size:11px; max-width:355px; line-height:1.7; margin:0; }
  .mp-discover { display:none; }
  .mp-skip { position:absolute; top:25px; right:6%; font-size:0; margin:0; }
  .mp-skip:after { content:'Überspringen ↓'; font-size:9px; }
  .mp-scene { margin-top:20px; height:calc(100% - 20px); }
  .mp-device { height:min(420px,100%); }
  .mp-device-front,.mp-device-rim,.mp-device-back { border-radius:30px; }
  .mp-device-screen { border-radius:28px; border-width:6px; }
  .mp-island { width:50px; left:calc(50% - 25px); height:13px; }
  .mp-statusbar { font-size:6px; height:20px; padding:0 10px; }
  .mp-screen { top:19px; height:calc(100% - 19px); }
  .mp-diagnosis-card { width:173px; left:-3px; bottom:10%; padding:13px; border-radius:12px; }
  .mp-card-label { font-size:6px; }
  .mp-diagnosis-card strong { font-size:17px; margin:8px 0 12px; }
  .mp-diagnosis-card small { font-size:7px; }
  .mp-cause-track { margin-bottom:9px; }
  .mp-bubble { width:240px; padding:13px 16px; }
  .mp-bubble p { font-size:11px; line-height:1.55; }
  .mp-bubble>span { font-size:7px; }
  .mp-stage-bottom { left:6%; right:6%; bottom:16px; display:block; }
  .mp-stage-bottom>p { display:none; }
  .mp-chapters { gap:0; justify-content:space-between; }
  .mp-chapters a { min-width:0; font-size:9px; gap:5px; padding-right:5px; }
  .mp-chapters a span { font-size:7px; }
  .mp-model-slot { inset:0 -3% 0; }
  .mp-model { min-height:0; border-radius:15px; }
  .mp-model-viewport { min-height:100px; }
  .mp-model-top { padding:16px 15px 0; font-size:8px; }
  .mp-model-top span:last-child { font-size:6px; }
  .mp-model-controls { gap:4px; }
  .mp-model-controls button { padding:6px 9px; font-size:9px; min-height:32px; }
  .mp-model-note { font-size:7px; margin:8px 0 12px; }
  .mp-photo-stack { width:176px; left:0; bottom:2%; }
  .mp-reference img { height:100px; }
  .mp-reference figcaption { padding:10px 12px; }
  .mp-reference strong { font-size:11px; }
  .mp-reference figcaption>span { font-size:6px; }
  .mp-reference small,.mp-reference a { font-size:7px; }
  .mp-photo-back { right:-76%; top:-94px; width:90%; }
  .mp-photo-back img { height:82px; }
  .mp-photo-back figcaption { padding:10px; }
  .mp-saved { padding:14px 17px; left:0; bottom:7%; gap:12px; }
  .mp-saved strong { font-size:15px; }
  .mp-saved small { font-size:8px; }
  .mp-features { grid-template-columns:1fr; padding:70px 7%; gap:26px; }
  .mp-features h2,.mp-workshop h2 { font-size:40px; }
  .mp-feature-list h3 { font-size:18px; }
  .mp-workshop { grid-template-columns:1fr; padding:0 7% 70px; gap:35px; }
  .mp-workshop>img { height:270px; }
  .mp-ending { padding:65px 7%; }
  .mp-ending h2 { font-size:41px; }
  .mp-act { grid-template-columns:1fr; gap:30px; padding:35px 0; }
  .mp-static-screen img { max-width:235px; }
  .mp-static-model-slot,.mp-static-model-slot .mp-model { min-height:340px; }
  .mp-static-photos { grid-template-columns:1fr 1fr; gap:12px; }
  .mp-footer { flex-wrap:wrap; gap:20px; }
  .mp-footer>span { flex-basis:45%; }
}
@media (prefers-reduced-motion:reduce) { .phone-site *, .phone-site *::before, .phone-site *::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }