/* =========================================================
   Service pages + clickable demos (ordering, booking)
   Reuses the dark system; demo phones are light "client sites".
   ========================================================= */

/* breadcrumb */
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 22px; font-family: var(--font-mono); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.crumbs a { color: var(--muted); transition: color .2s ease; }
.crumbs a:hover { color: var(--ink); }
.crumbs span[aria-hidden] { opacity: .5; }

.svc-hero { padding-bottom: clamp(70px, 9vw, 120px); }
.svc-hero h1 { max-width: 16ch; }
.svc-hero .lead { max-width: 54ch; }
.svc-facts { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 28px; color: var(--muted); font-size: .9rem; }
.svc-facts span { display: inline-flex; align-items: center; gap: 8px; }
.svc-facts i { width: 6px; height: 6px; border-radius: 50%; background: var(--grad); }
.btn-wa { background: #1fae54; color: #fff; box-shadow: 0 10px 30px -12px rgba(37, 211, 102, .6), inset 0 1px 0 rgba(255,255,255,.25); }
.btn-wa:hover { background: #1c9d4c; }
.btn-wa img { width: 20px; height: 20px; }

/* visual column */
.svc-visual { position: relative; display: grid; justify-items: center; }
.svc-visual::before {
  content: ""; position: absolute; inset: 8% 4%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 43, 214, .32), rgba(138, 43, 255, .18) 55%, transparent);
  filter: blur(30px);
}
.demo-flag { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255,255,255,.05); font-family: var(--font-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.demo-flag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #4cff9a; box-shadow: 0 0 8px #4cff9a; }
.demo-note { margin-top: 14px; max-width: 34ch; text-align: center; color: var(--dim); font-size: .82rem; }

/* ---------------- phone frame ---------------- */
.phone {
  position: relative; width: min(340px, 100%); height: 640px; padding: 10px;
  border-radius: 44px; background: #0d0a14;
  box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 0 0 7px #1b1526, 0 50px 90px -30px rgba(255, 43, 214, .55), 0 30px 60px -20px rgba(0,0,0,.7);
}
.phone-screen { position: relative; height: 100%; border-radius: 35px; overflow: hidden; background: #fbf8f4; color: #1d1712; font-size: 14px; line-height: 1.4; }
.phone-notch { position: absolute; z-index: 5; top: 10px; left: 50%; width: 92px; height: 24px; margin-left: -46px; border-radius: 999px; background: #0d0a14; }
.phone-view { position: absolute; inset: 0; display: flex; flex-direction: column; transition: transform .45s var(--ease-out), opacity .3s ease; }
.phone-view[data-view="chat"] { transform: translateX(100%); opacity: 0; pointer-events: none; }
.phone.is-chat .phone-view[data-view="app"] { transform: translateX(-30%); opacity: 0; pointer-events: none; }
.phone.is-chat .phone-view[data-view="chat"] { transform: none; opacity: 1; pointer-events: auto; }

/* client app header */
.app-head { padding: 46px 18px 14px; color: #fff; background: linear-gradient(160deg, #3a1d0e, #1d0f08); }
.app-head.cafe { background: linear-gradient(160deg, #1b0f3a, #0c0820); }
.app-head b { display: block; font-size: 1.25rem; letter-spacing: -0.02em; }
.app-head small { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: .78rem; color: rgba(255,255,255,.72); }
.app-head small i { width: 6px; height: 6px; border-radius: 50%; background: #4cff9a; }
.app-body { flex: 1; overflow-y: auto; padding: 14px 14px 10px; scrollbar-width: none; }
.app-body::-webkit-scrollbar { display: none; }
.app-label { margin: 4px 2px 10px; font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #8b7d70; }

/* menu rows */
.menu-row { display: flex; align-items: center; gap: 12px; padding: 12px; margin-bottom: 8px; border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(40,20,0,.06), 0 0 0 1px rgba(40,20,0,.05); }
.menu-row .dish { flex: 1; min-width: 0; }
.menu-row .dish b { display: block; font-size: .92rem; }
.menu-row .dish small { color: #8b7d70; font-size: .78rem; }
.menu-row .rs { font-variant-numeric: tabular-nums; font-size: .82rem; font-weight: 600; color: #5a3a1c; }
.step-ctl { display: flex; align-items: center; gap: 2px; border-radius: 999px; background: #f4eee7; }
.step-ctl button { width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; color: #3a1d0e; font-size: 1.05rem; line-height: 1; transition: background-color .15s ease, transform .12s ease; }
.step-ctl button:hover { background: #ebe1d5; }
.step-ctl button:active { transform: scale(.92); }
.step-ctl output { min-width: 16px; text-align: center; font-size: .85rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.step-ctl.has { background: #3a1d0e; color: #fff; }
.step-ctl.has button { color: #fff; }
.step-ctl.has button:hover { background: rgba(255,255,255,.14); }

.app-field { display: grid; gap: 4px; margin-top: 10px; }
.app-field label { font-size: .72rem; color: #8b7d70; }
.app-field input { height: 38px; padding: 0 12px; border-radius: 10px; border: 1px solid rgba(40,20,0,.12); background: #fff; font: inherit; font-size: 16px; color: #1d1712; }
.app-field input:focus { outline: 2px solid #1fae54; outline-offset: 0; border-color: transparent; }

/* bottom bar */
.app-bar { padding: 12px 14px 18px; background: #fff; border-top: 1px solid rgba(40,20,0,.08); }
.app-sum { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: .82rem; color: #8b7d70; }
.app-sum b { color: #1d1712; font-variant-numeric: tabular-nums; }
.wa-go { display: flex; width: 100%; height: 48px; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: 14px; background: #1fae54; color: #fff; font-weight: 600; font-size: .95rem; transition: background-color .2s ease, transform .12s ease, opacity .2s ease; }
.wa-go img { width: 20px; height: 20px; filter: brightness(0) invert(1); }
.wa-go:hover { background: #1c9d4c; }
.wa-go:active { transform: scale(.97); }
.wa-go:disabled { opacity: .4; cursor: not-allowed; transform: none; }

/* booking controls */
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 12px; background: #ece8f4; }
.seg button, .chips button, .slots button { border: 0; font: inherit; }
.seg button { height: 34px; border-radius: 9px; background: transparent; color: #4a4060; font-size: .82rem; font-weight: 600; transition: background-color .2s ease, color .2s ease; }
.seg button[aria-pressed="true"] { background: #fff; color: #1a1228; box-shadow: 0 1px 3px rgba(20,13,34,.12); }
.chips { display: flex; gap: 6px; }
.chips button { flex: 1; height: 36px; border-radius: 10px; background: #fff; color: #4a4060; font-size: .8rem; box-shadow: 0 0 0 1px rgba(20,13,34,.1); transition: box-shadow .2s ease, color .2s ease; }
.chips button[aria-pressed="true"] { color: #6a1fe0; box-shadow: 0 0 0 2px #6a1fe0; font-weight: 600; }
.slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.slots button { height: 36px; border-radius: 10px; background: #fff; color: #1a1228; font-size: .8rem; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 1px rgba(20,13,34,.1); transition: background-color .2s ease, color .2s ease, transform .12s ease; }
.slots button:active { transform: scale(.95); }
.slots button[aria-pressed="true"] { background: #6a1fe0; color: #fff; box-shadow: none; }
.slots button:disabled { color: #b3abc4; background: repeating-linear-gradient(135deg, #f1eef7 0 6px, #e8e3f1 6px 12px); box-shadow: none; text-decoration: line-through; cursor: not-allowed; transform: none; }
.slot-key { display: flex; gap: 14px; margin-top: 8px; font-size: .7rem; color: #8a80a0; }
.slot-key i { display: inline-block; width: 10px; height: 10px; margin-right: 5px; vertical-align: -1px; border-radius: 3px; background: repeating-linear-gradient(135deg, #f1eef7 0 3px, #ddd6ea 3px 6px); }
.cafe-screen { background: #f7f5fb; color: #1a1228; }
.cafe-screen .app-label { color: #8a80a0; }
.cafe-screen .step-ctl.has { background: #6a1fe0; }
.cafe-screen .app-sum { color: #8a80a0; }
.cafe-screen .app-sum b { color: #1a1228; }

/* WhatsApp chat view (what the owner receives) */
.chat-head { display: flex; align-items: center; gap: 10px; padding: 44px 14px 12px; background: #075e54; color: #fff; }
.chat-head .av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #075e54; font-weight: 700; font-size: .85rem; }
.chat-head b { display: block; font-size: .95rem; }
.chat-head small { font-size: .72rem; opacity: .8; }
.chat-body { flex: 1; overflow-y: auto; padding: 16px 12px; background: #e9e1d6; scrollbar-width: none; }
.chat-body::-webkit-scrollbar { display: none; }
.chat-day { width: max-content; margin: 0 auto 12px; padding: 3px 10px; border-radius: 8px; background: #fff; font-size: .7rem; color: #667; }
.bubble { position: relative; max-width: 88%; margin-left: auto; padding: 8px 10px 18px; border-radius: 10px 0 10px 10px; background: #d9fdd3; box-shadow: 0 1px 1px rgba(0,0,0,.08); font-size: .82rem; white-space: pre-line; transform-origin: top right; }
.bubble.in { margin-left: 0; border-radius: 0 10px 10px 10px; background: #fff; transform-origin: top left; }
.bubble + .bubble { margin-top: 10px; }
.bubble time { position: absolute; right: 8px; bottom: 4px; font-size: .64rem; color: #667; }
.bubble time::after { content: " ✓✓"; color: #34b7f1; }
.bubble.in time::after { content: ""; }
.phone.is-chat .bubble { animation: bubble-in .35s var(--ease-out) both; }
.phone.is-chat .bubble.in { animation-delay: .9s; }
@keyframes bubble-in { from { opacity: 0; transform: scale(.94) translateY(6px); } }
.chat-foot { padding: 12px 14px 18px; background: #f0ebe4; }
.chat-foot p { margin: 0 0 10px; font-size: .74rem; color: #6b6156; text-align: center; }
.chat-back { width: 100%; height: 42px; border: 0; border-radius: 12px; background: #fff; color: #1d1712; font-weight: 600; font-size: .85rem; box-shadow: 0 0 0 1px rgba(0,0,0,.08); transition: transform .12s ease; }
.chat-back:active { transform: scale(.97); }

/* ---------------- static hero visuals ---------------- */
.mock-card { width: min(420px, 100%); padding: 22px; border-radius: 22px; background: #fbf8ff; color: #1a1228; box-shadow: 0 40px 80px -30px rgba(255, 43, 214, .45), 0 0 0 1px rgba(255,255,255,.6) inset; }
.mock-card + .mock-card { margin-top: -18px; width: min(380px, 92%); transform: translateX(14%) rotate(1.5deg); }
.mock-top { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid rgba(20,13,34,.08); font-size: .8rem; color: #5d5470; }
.mock-top img { width: 18px; height: auto; }
.mock-top .ex { margin-left: auto; font-family: var(--font-mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: #8a80a0; }
.gbp-name { font-family: var(--font-head); font-size: 1.35rem; font-weight: 600; letter-spacing: -0.03em; }
.gbp-meta { margin-top: 4px; font-size: .84rem; color: #5d5470; }
.gbp-meta .open { color: #188038; font-weight: 600; }
.gbp-acts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 16px; }
.gbp-acts span { display: grid; justify-items: center; gap: 6px; font-size: .72rem; color: #1a73e8; }
.gbp-acts i { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(26,115,232,.3); }
.gbp-acts svg { width: 18px; height: 18px; }
.gbp-row { display: flex; gap: 10px; padding: 10px 0; border-top: 1px solid rgba(20,13,34,.07); font-size: .84rem; color: #3c3450; }
.gbp-row:first-of-type { margin-top: 14px; }
.gbp-row b { min-width: 74px; color: #8a80a0; font-weight: 500; }

.check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.check-list li { display: flex; align-items: center; gap: 10px; padding: 9px 0; font-size: .88rem; color: #3c3450; border-bottom: 1px dashed rgba(20,13,34,.1); }
.check-list li:last-child { border-bottom: 0; }
.check-list i { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: #e6f6ec; color: #188038; font-size: .7rem; font-style: normal; font-weight: 700; }
.check-list li.todo i { background: #f1e8ff; color: #6a1fe0; }
.check-list small { margin-left: auto; font-family: var(--font-mono); font-size: .66rem; color: #8a80a0; text-transform: uppercase; letter-spacing: .06em; }

.ad-mock .spons { font-size: .74rem; font-weight: 700; color: #1a1228; }
.ad-mock .ad-url { font-size: .78rem; color: #5d5470; }
.ad-mock .ad-title { margin: 6px 0 4px; font-size: 1.15rem; line-height: 1.3; color: #1a0dab; }
.ad-mock .ad-desc { font-size: .84rem; color: #4d5156; }
.ad-mock .ad-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.ad-mock .ad-links span { padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(20,13,34,.12); font-size: .76rem; color: #1a0dab; }
.money-split { display: grid; gap: 10px; }
.money-split div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: .86rem; color: #5d5470; }
.money-split b { font-family: var(--font-mono); font-size: .82rem; color: #1a1228; }
.money-bar { display: flex; height: 10px; margin-top: 6px; border-radius: 999px; overflow: hidden; background: #ece8f4; }
.money-bar i { background: #1a73e8; }
.money-bar i + i { background: var(--grad); }

.photo-stack { position: relative; width: min(460px, 100%); }
.photo-stack figure { margin: 0; border-radius: 20px; overflow: hidden; border: 1px solid var(--line-2); box-shadow: 0 40px 80px -30px rgba(255, 43, 214, .5); }
.photo-stack img { width: 100%; height: auto; aspect-ratio: 720 / 402; object-fit: cover; }
.photo-stack figure + figure { position: absolute; width: 58%; right: -6%; bottom: -22%; transform: rotate(3deg); }
.photo-stack .crop { position: absolute; inset: 14px; pointer-events: none; }
.photo-stack .crop i { position: absolute; width: 18px; height: 18px; border-color: rgba(255,255,255,.8); border-style: solid; border-width: 0; }
.photo-stack .crop i:nth-child(1) { left: 0; top: 0; border-left-width: 2px; border-top-width: 2px; }
.photo-stack .crop i:nth-child(2) { right: 0; top: 0; border-right-width: 2px; border-top-width: 2px; }
.photo-stack .crop i:nth-child(3) { left: 0; bottom: 0; border-left-width: 2px; border-bottom-width: 2px; }
.photo-stack .crop i:nth-child(4) { right: 0; bottom: 0; border-right-width: 2px; border-bottom-width: 2px; }
.photo-cap { position: absolute; left: 14px; top: 14px; padding: 5px 10px; border-radius: 999px; background: rgba(7,5,12,.7); backdrop-filter: blur(8px); font-family: var(--font-mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: #fff; }

.case-shots { position: relative; width: min(520px, 100%); padding-bottom: 40px; }
.case-shots .desk { border-radius: 14px; overflow: hidden; border: 1px solid var(--line-2); box-shadow: 0 40px 80px -30px rgba(255, 43, 214, .5); }
.case-shots .desk img { width: 100%; height: auto; }
.case-shots .mob { position: absolute; right: -4%; bottom: 0; width: 30%; border-radius: 22px; overflow: hidden; border: 5px solid #1b1526; box-shadow: 0 30px 60px -20px rgba(0,0,0,.7); }

/* ---------------- body sections ---------------- */
.svc-intro { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 6vw, 90px); align-items: start; }
.svc-intro .prose p { color: var(--muted); font-size: 1.05rem; }
.svc-intro .prose p + p { margin-top: 18px; }
.light .svc-intro .prose p { color: var(--light-muted); }

.price-panel { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.price-panel .card { display: flex; flex-direction: column; }
.price-panel .tag { align-self: flex-start; }
.price-panel .price b { font-size: clamp(1.7rem, 3vw, 2.2rem); }
.price-panel .card p { margin: 10px 0 18px; flex: 1; }
.price-panel .card.soon { border-style: dashed; }
.price-panel .note { margin-top: 18px; color: var(--dim); font-size: .88rem; }

.related { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.related a { display: flex; flex-direction: column; gap: 6px; padding: 22px; border-radius: var(--radius); border: 1px solid var(--line); background: rgba(255,255,255,.025); transition: border-color .25s ease, transform .3s var(--ease-out), background-color .25s ease; }
.related a:hover { border-color: rgba(255,140,240,.3); background: rgba(255,255,255,.045); transform: translateY(-2px); }
.related b { font-family: var(--font-head); font-size: 1.05rem; }
.related span { color: var(--muted); font-size: .9rem; }
.related em { margin-top: 6px; font-style: normal; color: var(--pink); font-size: .85rem; }

.svc-faq { max-width: 860px; margin-inline: auto; }
.svc-faq .faq summary { font-size: 1.05rem; }

.service-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; color: var(--pink); font-size: .92rem; font-weight: 500; }
.service-more:hover { color: #ffc7f5; }
.service-more::after { content: "→"; transition: transform .25s var(--ease-out); }
.service-more:hover::after { transform: translateX(3px); }

@media (max-width: 1024px) {
  .svc-visual { margin-top: 30px; }
}
@media (max-width: 860px) {
  .svc-intro { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .phone { height: 600px; }
  .mock-card + .mock-card { transform: none; width: 100%; margin-top: 16px; }
  .photo-stack figure + figure { right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .phone-view, .bubble { transition: none !important; animation: none !important; }
}

/* homepage: links from the service cards to the service pages */
.service-links { display: flex; flex-wrap: wrap; gap: 4px 22px; margin-top: 18px; }
.service-links .service-more { margin-top: 0; }

/* ---------------- Homepage services: "choose one" (approved 2026-11-13) ---------------- */
.pick-title { margin-top: 18px; font-size: clamp(2.1rem, 4.4vw, 3.4rem); max-width: 18ch; }
.pick-sub { margin-top: 16px; font-size: 1.2rem; color: #cfc6e0; }
.pick { margin-top: 40px; }
.pick-tabs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.pick-tabs button {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  min-height: 112px; padding: 20px 12px; border-radius: 20px;
  border: 1.5px solid var(--line-2); background: rgba(255,255,255,.03);
  color: var(--ink); font: 600 1.08rem/1.25 var(--font-body); text-align: center;
  transition: border-color .2s ease, background-color .2s ease, transform .15s var(--ease-out);
}
.pick-tabs button:hover { border-color: rgba(255,140,240,.45); background: rgba(255,255,255,.05); }
.pick-tabs button:active { transform: scale(.98); }
.pick-tabs button img, .pick-tabs button svg { width: 34px; height: 34px; object-fit: contain; }
.pick-tabs button svg { color: #ff8be9; }
.pick-tabs button[aria-selected="true"] { border-color: #ff8be9; background: linear-gradient(180deg, rgba(138,43,255,.24), rgba(255,43,214,.08)); box-shadow: 0 18px 40px -24px rgba(255,43,214,.7); }
.pick-panel {
  margin-top: 16px; display: grid; grid-template-columns: 1.1fr .9fr; gap: 44px; align-items: center;
  padding: clamp(26px, 3.4vw, 44px); border-radius: 28px; border: 1px solid var(--line-2);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  animation: pick-in .28s var(--ease-out);
}
.pick-panel[hidden] { display: none; }
@keyframes pick-in { from { opacity: 0; transform: translateY(6px); } }
.pick-panel h3 { font-size: clamp(1.9rem, 3vw, 2.5rem); letter-spacing: -0.03em; line-height: 1.08; }
.pick-panel p { margin-top: 14px; font-size: 1.15rem; line-height: 1.55; color: #cfc6e0; max-width: 46ch; }
.pick-panel ul { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 12px; }
.pick-panel li { display: flex; gap: 12px; align-items: center; font-size: 1.12rem; color: #ece6f7; }
.pick-panel li::before { content: "✓"; flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--grad); color: #fff; font-size: .8rem; font-weight: 700; }
.pick-foot { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 22px; align-items: center; }
.btn-lg { height: 56px; padding: 0 28px; font-size: 1.05rem; }
.pick-price { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.01em; color: #fff; font-variant-numeric: tabular-nums; line-height: 1.2; }
.pick-price small { display: block; font-size: .85rem; font-weight: 500; color: #b8aecb; }
.pick-more { display: inline-block; margin-top: 18px; font-size: 1.02rem; color: #ffb3f2; text-decoration: underline; text-underline-offset: 4px; }
.pick-more:hover { color: #fff; }
.pick-shot { border-radius: 20px; overflow: hidden; border: 1px solid var(--line-2); box-shadow: 0 30px 70px -30px rgba(255,43,214,.45); }
.pick-shot img { width: 100%; height: auto; display: block; }
.pick-panel .mock-card { justify-self: center; }

@media (max-width: 860px) {
  .pick-tabs { grid-template-columns: repeat(2, 1fr); }
  .pick-tabs button:last-child { grid-column: 1 / -1; }
  .pick-tabs button { min-height: 96px; }
  .pick-panel { grid-template-columns: 1fr; gap: 26px; }
  .pick-foot .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .pick-panel { animation: none; } }
#demo { scroll-margin-top: 96px; }

/* ---------------- "How it works" journey: wavy line drawn by scroll (2026-11-13) ---------------- */
.journey { --p: 0; position: relative; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: auto 260px auto; column-gap: 24px; }
.j-track { grid-column: 1 / -1; grid-row: 2; position: relative; height: 260px; }
.j-track svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.j-base { fill: none; stroke: rgba(106, 31, 224, .28); stroke-width: 3; stroke-dasharray: 8 12; stroke-linecap: round; }
.j-line { fill: none; stroke: url(#j-grad); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: calc(1 - var(--p)); filter: drop-shadow(0 4px 10px rgba(255, 43, 214, .35)); }
.j-dot { position: absolute; left: 0; top: 130px; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 5px rgba(255, 43, 214, .35), 0 0 22px 6px rgba(255, 43, 214, .55); opacity: 0; transition: opacity .3s ease; }
.journey.moving .j-dot { opacity: 1; }
.j-node {
  position: absolute; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%;
  display: grid; place-items: center; font: 700 1.3rem/1 var(--font-head); color: var(--violet-2);
  background: #fff; border: 2px dashed rgba(106, 31, 224, .4);
  box-shadow: 0 10px 24px -14px rgba(20, 13, 34, .4);
  transition: background-color .35s ease, color .35s ease, border-color .35s ease, transform .45s var(--ease-out), box-shadow .45s ease;
}
.j-node.on { background: var(--grad); color: #fff; border: 2px solid transparent; transform: scale(1.08); box-shadow: 0 14px 30px -10px rgba(255, 43, 214, .6); }
.j-step { grid-column: var(--c); padding: 6px 4px; transition: transform .45s var(--ease-out); }
.j-step > div { opacity: .5; transition: opacity .45s ease; }
.j-step.on > div { opacity: 1; }
.j-step.j-up { grid-row: 1; align-self: end; padding-bottom: 14px; transform: translateY(8px); }
.j-step.j-down { grid-row: 3; align-self: start; padding-top: 14px; transform: translateY(-8px); }
.j-step.on { transform: none; }
.j-step h3 { font-size: 1.6rem; color: var(--light-ink); }
.j-step p { margin-top: 8px; font-size: 1.08rem; line-height: 1.55; color: var(--light-muted); }
.j-num { display: none; }

@media (max-width: 860px) {
  .journey { display: block; padding-left: 74px; }
  .j-track { display: none; }
  .journey::before, .journey::after { content: ""; position: absolute; left: 28px; top: 28px; bottom: 28px; width: 3px; border-radius: 3px; }
  .journey::before { background: repeating-linear-gradient(180deg, rgba(106, 31, 224, .3) 0 8px, transparent 8px 18px); }
  .journey::after { background: linear-gradient(180deg, #8a2bff, #ff2bd6); transform-origin: top; transform: scaleY(var(--p)); box-shadow: 0 0 14px rgba(255, 43, 214, .45); }
  .j-step.j-up, .j-step.j-down { position: relative; padding: 0 0 38px; transform: translateY(8px); }
  .j-step.on { transform: none; }
  .j-step:last-child { padding-bottom: 0; }
  .j-num {
    display: grid; place-items: center; position: absolute; left: -74px; top: 0; z-index: 1; width: 58px; height: 58px; border-radius: 50%;
    font: 700 1.3rem/1 var(--font-head); color: var(--violet-2); background: #fff; border: 2px dashed rgba(106, 31, 224, .4);
    transition: background-color .35s ease, color .35s ease, border-color .35s ease;
  }
  .j-step.on .j-num { background: var(--grad); color: #fff; border: 2px solid transparent; }
  .j-step h3 { padding-top: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .j-step, .j-node, .j-num, .j-dot { transition: none; }
}

/* ---------------- Menu: Services dropdown + phone menu (2026-11-13) ---------------- */
.nav-drop { position: relative; }
.nav-drop-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px 8px 16px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: inherit; font-size: .92rem; transition: color .2s, background-color .2s; }
.nav-drop-btn svg { width: 14px; height: 14px; transition: transform .25s var(--ease-out); }
.nav-drop-btn:hover, .nav-drop.open .nav-drop-btn, .nav-drop-btn[data-current] { color: var(--ink); background: rgba(255,255,255,.07); }
.nav-drop.open .nav-drop-btn svg { transform: rotate(180deg); }
.nav-drop-panel {
  position: absolute; top: calc(100% + 14px); left: -6px; z-index: 60; width: 380px; padding: 10px;
  display: grid; gap: 2px; border-radius: 20px; border: 1px solid var(--line-2);
  background: rgba(16, 11, 26, .97); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 30px 70px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.02) inset;
  opacity: 0; visibility: hidden; transform: translateY(-6px); transform-origin: top left;
  transition: opacity .18s ease, transform .22s var(--ease-out), visibility .18s;
}
.nav-drop-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; } /* hover bridge */
.nav-drop.open .nav-drop-panel { opacity: 1; visibility: visible; transform: none; }
@media (hover: hover) and (pointer: fine) {
  .nav-drop:hover .nav-drop-panel { opacity: 1; visibility: visible; transform: none; }
  .nav-drop:hover .nav-drop-btn svg { transform: rotate(180deg); }
}
.nav-links .nav-drop-panel a { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 14px; color: var(--ink); }
.nav-links .nav-drop-panel a:hover, .nav-links .nav-drop-panel a[aria-current="page"] { background: rgba(255,255,255,.07); }
.dd-ic { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,255,255,.05); border: 1px solid var(--line); color: #ff8be9; }
.dd-ic svg { width: 20px; height: 20px; }
.dd-ic img { width: auto; height: 20px; }
.nav-drop-panel b { display: block; font-size: .95rem; font-weight: 600; }
.nav-drop-panel small { display: block; margin-top: 2px; font-size: .8rem; color: var(--muted); }
.nav-links .nav-drop-panel a.dd-all { justify-content: center; margin-top: 6px; padding: 12px; border-top: 1px solid var(--line); border-radius: 0 0 12px 12px; font-size: .88rem; color: #ffb3f2; }

/* phone menu: services listed, everything scrolls */
.mobile-menu { justify-content: flex-start; overflow-y: auto; padding-top: 96px; }
.mobile-menu .m-head { margin-top: 4px; font: 600 .74rem/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--pink); }
.mobile-menu a.m-sub { display: block; padding: 9px 0 9px 14px; border-left: 2px solid var(--line-2); font-size: 1.1rem; color: #e9e3f5; opacity: 0; transform: translateY(8px); transition: transform .45s var(--ease-out), opacity .45s, color .2s, border-color .2s; }
.mobile-menu a.m-sub:hover { color: #fff; border-left-color: var(--pink); }
.menu-open .mobile-menu a.m-sub { opacity: 1; transform: none; }
.mobile-menu a.m-link { font-size: 1.7rem; }
@media (prefers-reduced-motion: reduce) { .nav-drop-panel, .mobile-menu a.m-sub { transition: none; } }

/* ---------------- /demos page ---------------- */
.demos-hero .wrap { max-width: 860px; }
.demos-hero h1 { max-width: 15ch; }
.demos-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px); }
.dm-card { display: grid; gap: 28px; align-content: start; justify-items: center; padding: clamp(26px, 3vw, 40px); border-radius: 28px; border: 1px solid var(--line-2); background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)); scroll-margin-top: 96px; }
.dm-card .dm-copy { justify-self: stretch; }
.dm-card h2 { margin-top: 14px; font-size: clamp(1.8rem, 3vw, 2.4rem); }
.dm-card p { margin: 12px 0 20px; font-size: 1.12rem; line-height: 1.55; color: #cfc6e0; max-width: 40ch; }
.dm-card .svc-visual { margin-top: 0; }
@media (max-width: 960px) { .demos-grid { grid-template-columns: 1fr; } .dm-card .btn { width: 100%; } }
@media (max-width: 560px) { .dm-card { padding: 22px 12px 26px; border-radius: 22px; } .dm-card .dm-copy { padding-inline: 8px; } }