@import url("./assets/service-menu.css?v=1");
:root {
  color-scheme: dark;
  --night: #101012;
  --paper: #f0f0ee;
  --ink: #171719;
  --white: #f4f4f0;
  --muted: #b0b3b9;
  --ease: cubic-bezier(.22,1,.36,1);
  --travel: cubic-bezier(.76,0,.24,1);
  --font: "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 280px; background: var(--night); }
body { margin: 0; color: var(--white); background: var(--night); font-family: var(--font); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
button, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: wait; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 6px; }
[hidden] { display: none !important; }
::selection { color: var(--night); background: var(--white); }

.visual { position: fixed; z-index: 0; inset: 0; overflow: hidden; background: var(--night); pointer-events: none; }
.visual-poster, .visual-video, #ambient-canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.visual-poster { opacity: .85; }
.visual-video { opacity: .82; }
#ambient-canvas { opacity: 0; transition: opacity 900ms ease; }
#ambient-canvas[data-ready="true"] { opacity: 1; }
.visual-shade { position: absolute; inset: 0; background: rgba(10,10,12,.25); }

.desktop-header { position: absolute; z-index: 5; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 34px 42px; }
.brand { display: inline-flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 500; }
.brand-symbol { font-size: 25px; font-weight: 400; }
.desktop-actions { display: flex; align-items: center; gap: 32px; }
.header-consult, .motion-button, .quiet-button { min-height: 44px; padding: 0; border: 0; background: transparent; color: inherit; font-size: 12px; }
.motion-button { color: #c1c5c8; }
.menu-orb { width: 48px; height: 48px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; color: var(--ink); background: var(--paper); }
.four-dots { width: 17px; height: 17px; display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.four-dots i { display: block; background: currentColor; border-radius: 2px; transition: transform 350ms var(--ease); }
.menu-orb:hover .four-dots i:first-child, .dock-menu:hover .four-dots i:first-child { transform: translate(-1px,-1px); }
.menu-orb:hover .four-dots i:last-child, .dock-menu:hover .four-dots i:last-child { transform: translate(1px,1px); }

main { position: relative; z-index: 1; }
.experience { min-height: 760px; height: 100svh; position: relative; overflow: hidden; }
.intro { position: absolute; z-index: 2; top: 15%; right: 9%; }
.intro-label { margin: 0 0 6px; font-size: 15px; font-weight: 400; letter-spacing: -.02em; }
.intro h1 { margin: 0; font-size: clamp(44px,4.8vw,76px); font-weight: 400; line-height: 1.02; letter-spacing: -.065em; }
.delivery-label { position: absolute; top: 17%; left: 9%; margin: 0; color: #c5c7ca; font-size: 12px; letter-spacing: .03em; }

.service-field { width: min(82%,1240px); height: 50%; position: absolute; top: 37%; left: 50%; transform: translateX(-50%); }
.orbit { width: min(42vw,560px); height: min(42vw,560px); position: absolute; left: 50%; top: 42%; border: 1px solid rgba(225,230,235,.18); border-radius: 50%; transform: translate(-50%,-50%) rotate(-18deg); pointer-events: none; }
.orbit::before { content: ""; position: absolute; left: -27%; right: -27%; top: 50%; height: 1px; background: rgba(225,230,235,.14); transform: rotate(18deg); }
.orbit-point { width: 5px; height: 5px; position: absolute; border-radius: 50%; background: rgba(235,239,242,.9); }
.point-a { left: 18%; top: 10%; }
.point-b { right: 5%; top: 27%; }
.point-c { left: 1%; bottom: 32%; }
.point-d { right: 21%; bottom: 6%; }

.service-entry { min-width: 235px; min-height: 94px; display: flex; flex-direction: column; align-items: flex-start; gap: 13px; position: absolute; z-index: 3; padding: 12px 0; color: var(--white); background: transparent; border: 0; text-align: left; transition: transform 500ms var(--ease); }
.entry-name { display: inline-flex; align-items: baseline; gap: 16px; font-size: clamp(28px,2.5vw,40px); font-weight: 400; line-height: 1.15; letter-spacing: -.045em; white-space: nowrap; }
.entry-arrow { display: inline-block; font-size: .55em; vertical-align: top; transform: translateY(-2px); transition: transform 400ms var(--ease); }
.entry-trace { width: 100%; height: 1px; position: relative; background: rgba(225,230,235,.2); transform-origin: left; }
.entry-trace::after { content: ""; width: 4px; height: 4px; position: absolute; right: 0; top: -1.5px; background: #a0a4a8; border-radius: 50%; }
.entry-trace i { width: 4px; height: 4px; position: absolute; left: 0; top: -1.5px; border-radius: 50%; background: var(--white); }
.entry-meta { color: #c5c7cc; font-size: 12px; line-height: 1; }
.entry-build { left: 0; top: 4%; }
.entry-social { right: 0; top: 0; }
.entry-payment { left: 0; bottom: 0; }
.entry-ai { right: 0; bottom: -2%; }
.entry-ai .entry-trace { margin-top: -4px; }
.center-control { width: 86px; height: 44px; display: grid; place-items: center; position: absolute; z-index: 4; left: 50%; top: 42%; padding: 0; color: var(--ink); background: var(--paper); border: 1px solid rgba(255,255,255,.2); border-radius: 999px; transform: translate(-50%,-50%); transition: width 400ms var(--ease), background-color 250ms ease, color 250ms ease; }
.center-control span { display: block; font-size: 25px; line-height: 1; transition: transform 400ms var(--ease); }
.center-caption { position: absolute; left: 50%; top: calc(42% + 35px); transform: translateX(-50%); font-size: 11px; color: #d1d3d7; letter-spacing: .03em; pointer-events: none; }
.hero-footer { position: absolute; bottom: 36px; left: 9%; right: 9%; display: flex; align-items: center; justify-content: space-between; gap: 15px; color: #b9bec4; font-size: 11px; }
.mobile-motion { display: none; }
.hero-note { margin-left: auto; }
.mobile-dock { display: none; }

dialog { color-scheme: light; color: var(--ink); background: var(--paper); border: 0; padding: 0; overflow: auto; overscroll-behavior: contain; }
dialog::backdrop { background: rgba(7,8,10,.25); }
dialog[open] { animation: sheet-open 650ms var(--ease) both; }
.sheet-header { min-height: 80px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 32px; }
.sheet-header h2 { margin: 0; font-size: 16px; font-weight: 500; }
.sheet-header > span { font-size: 14px; }
.sheet-close { width: 44px; height: 44px; display: grid; place-items: center; flex: none; padding: 0; color: var(--ink); background: transparent; border: 0; border-radius: 50%; }
.close-mark { width: 21px; height: 21px; position: relative; display: block; }
.close-mark::before, .close-mark::after { content: ""; width: 22px; height: 1.5px; position: absolute; top: 10px; left: 0; background: currentColor; }
.close-mark::before { transform: rotate(45deg); }
.close-mark::after { transform: rotate(-45deg); }
.menu-sheet { width: calc(100vw - 32px); max-width: none; height: calc(100svh - 32px); max-height: calc(100svh - 32px); margin: 16px; border-radius: 16px; }
.menu-sheet[open] { animation: menu-reveal 680ms var(--ease) both; }
.menu-sheet .menu-top-consult, .menu-close-footer { display: none; }
.menu-layout { min-height: 0; height: calc(100% - 180px); overflow: auto; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 48px; padding: 35px 32px; }
.menu-preview { height: min(47vw,390px); position: relative; overflow: hidden; border-radius: 16px; background: #101012; color: var(--paper); }
.menu-video { width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.menu-preview > span { position: absolute; left: 32px; bottom: 30px; font-size: clamp(28px,3.8vw,58px); font-weight: 400; line-height: 1.08; letter-spacing: -.05em; }
.menu-links { display: flex; flex-direction: column; gap: 0; }
.menu-links > :is(button,a) { width: 100%; min-height: 87px; display: flex; align-items: center; gap: 14px; padding: 10px 0; color: var(--ink); background: transparent; border: 0; text-align: left; }
.menu-links > :is(button,a) > span:first-child { flex: none; font-size: clamp(26px,2.6vw,44px); font-weight: 400; line-height: 1.3; letter-spacing: -.045em; }
.menu-links small { display: inline-block; margin-left: 7px; font-size: 12px; letter-spacing: 0; vertical-align: top; padding-top: 7px; }
.leader { min-width: 8px; height: 1px; flex: 1; position: relative; background: #d8d8d5; }
.leader::before, .leader::after { content: ""; width: 4px; height: 4px; position: absolute; top: -1.5px; background: #888885; border-radius: 50%; }
.leader::before { left: 0; }
.leader::after { right: 0; }
.menu-link-arrow { font-size: 24px; font-weight: 400; transition: transform 350ms var(--ease); }
.sheet-footer { height: 100px; display: flex; align-items: center; justify-content: center; gap: 38px; padding: 20px 32px 30px; }
.footer-line { height: 1px; flex: 1; background: #d8d8d5; }
.pill-button { min-height: 48px; min-width: 160px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; flex: none; padding: 10px 28px; color: var(--paper); background: var(--ink); border: 1px solid var(--ink); border-radius: 999px; font-size: 14px; font-weight: 500; line-height: 1.3; }
.pill-button:active { transform: scale(.97); }

.service-sheet { width: min(680px,calc(100vw - 32px)); max-height: calc(100svh - 32px); border-radius: 20px; }
.service-content { padding: 25px 42px 20px; }
.service-identifier { margin: 0 0 25px; color: #646464; font-size: 13px; }
.service-content h2 { margin: 0; font-size: 64px; font-weight: 400; letter-spacing: -.06em; line-height: 1.12; overflow-wrap: anywhere; }
.service-scope { margin: 34px 0 0; padding: 0; list-style: none; }
.service-scope li { min-height: 51px; display: flex; align-items: center; justify-content: space-between; gap: 25px; font-size: 17px; border-bottom: 1px solid #d9d9d6; }
.service-scope li:last-child { border-bottom: 0; }
.service-bottom { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 42px 38px; }
.back-to-services { min-height: 44px; padding: 0; background: transparent; color: #505050; border: 0; font-size: 13px; }

.chat-sheet { width: min(430px,calc(100vw - 32px)); max-height: calc(100svh - 40px); border-radius: 20px; }
.chat-content { min-height: 270px; padding: 26px 26px; }
.chat-context-label { margin: 0 0 10px; color: #666; font-size: 12px; }
.chat-context { margin: 0; font-size: 31px; font-weight: 400; letter-spacing: -.04em; line-height: 1.25; overflow-wrap: anywhere; }
.chat-status { margin: 28px 0 0; color: #666; font-size: 13px; line-height: 1.6; }
.chat-status.is-error { color: #a31c1c; }
.chat-form { display: grid; grid-template-columns: minmax(0,1fr) 45px; gap: 10px; align-items: end; padding: 16px; }
.chat-form textarea { min-width: 0; width: 100%; min-height: 45px; max-height: 180px; resize: vertical; padding: 12px 14px; border: 1px solid #d1d1ce; border-radius: 12px; background: transparent; color: var(--ink); font-size: 16px; line-height: 1.4; }
.chat-form textarea::placeholder { color: #6c6c69; opacity: 1; }
.chat-form textarea[aria-invalid="true"] { border-color: #a31c1c; }
.chat-form button { width: 45px; height: 45px; border: 0; border-radius: 50%; background: var(--ink); color: var(--paper); font-size: 24px; }
.sr-only { width: 1px; height: 1px; position: absolute; top: 0; left: 0; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@keyframes sheet-open { from { opacity: .4; transform: translateY(75px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes menu-reveal { from { clip-path: inset(calc(100% - 56px) 0 0 round 16px); } to { clip-path: inset(0 round 16px); } }

@media (hover:hover) and (pointer:fine) {
  .service-entry:hover { transform: translateY(-4px); }
  .service-entry:hover .entry-arrow { transform: translate(4px,-6px); }
  .service-entry:hover .entry-trace { background: rgba(245,245,242,.7); }
  .center-control:hover { width: 100px; color: var(--paper); background: rgba(15,15,17,.7); }
  .center-control:hover span { transform: rotate(45deg); }
  .menu-links > :is(button,a):hover .menu-link-arrow { transform: translate(4px,-4px); }
  .menu-links > :is(button,a):hover .leader { background: #aaa; }
  .header-consult:hover, .motion-button:hover { color: white; }
  .sheet-close:hover { background: #dededb; }
}

@media (max-width: 1000px) and (min-width: 701px) {
  .entry-name { font-size: 27px; }
  .service-entry { min-width: 210px; }
  .menu-layout { gap: 28px; }
  .menu-links > :is(button,a) > span:first-child { font-size: 27px; }
  .menu-link-arrow { font-size: 18px; }
}

@media (max-width: 700px) {
  .desktop-header { display: none; }
  .experience { min-height: 580px; height: 100svh; }
  .intro { top: max(44px,env(safe-area-inset-top)); left: 24px; right: auto; }
  .intro-label { margin-bottom: 11px; font-size: 15px; color: #e0e2e5; }
  .intro h1 { font-size: 43px; line-height: 1.06; letter-spacing: -.06em; }
  .delivery-label { top: 52px; right: 24px; left: auto; font-size: 11px; }
  .service-field { width: calc(100% - 48px); height: 45%; top: 28%; }
  .orbit { width: 275px; height: 275px; top: 47%; transform: translate(-50%,-50%) rotate(-18deg); }
  .orbit::before { left: -9%; right: -9%; }
  .service-entry { min-width: 0; width: 50%; min-height: 75px; gap: 13px; padding: 12px 0; }
  .entry-name { gap: 8px; font-size: 21px; letter-spacing: -.055em; }
  .entry-arrow { font-size: 12px; }
  .entry-meta { font-size: 10px; }
  .entry-build { left: 0; top: 0; }
  .entry-social { right: 0; top: 26%; align-items: flex-end; }
  .entry-social .entry-trace { width: 90%; }
  .entry-payment { left: 0; bottom: 12%; }
  .entry-ai { right: 0; bottom: -12%; align-items: flex-end; }
  .entry-ai .entry-trace { width: 90%; }
  .center-control { width: 70px; height: 38px; top: 47%; }
  .center-control span { font-size: 23px; }
  .center-caption { top: calc(47% + 29px); font-size: 10px; }
  .hero-footer { left: 24px; right: 24px; bottom: calc(98px + env(safe-area-inset-bottom)); font-size: 10px; }
  .mobile-motion { display: inline-block; min-height: 38px; font-size: 11px; color: #c5c9cd; }
  .hero-note { font-size: 10px; }
  .mobile-dock { height: 56px; display: grid; grid-template-columns: 1fr auto auto; align-items: stretch; gap: 0; position: fixed; z-index: 10; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); padding: 0 13px; color: var(--ink); background: var(--paper); border-radius: 15px; }
  .dock-brand { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; }
  .dock-brand > span { font-size: 18px; }
  .dock-consult { min-width: 85px; padding: 0 12px; background: transparent; color: var(--ink); border: 0; font-size: 12px; }
  .dock-menu { display: flex; align-items: center; gap: 7px; padding: 0 0 0 8px; color: var(--ink); background: transparent; border: 0; font-size: 12px; }
  .dock-menu .four-dots { width: 15px; height: 15px; gap: 2px; }
  .menu-sheet { height: clamp(480px,75svh,650px); max-height: calc(100svh - 32px); margin: auto 16px calc(16px + env(safe-area-inset-bottom)); border-radius: 16px; }
  .menu-top-close { display: none; }
  .menu-sheet .menu-top-consult { display: inline-flex; min-width: 145px; min-height: 44px; padding-inline: 18px; font-size: 12px; }
  .sheet-header { min-height: 80px; padding: 18px; }
  .sheet-header h2 { font-size: 14px; }
  .menu-layout { min-height: 0; height: calc(100% - 144px); display: flex; align-items: safe center; padding: 10px 18px; }
  .menu-preview { display: none; }
  .menu-links { width: 100%; }
  .menu-links > :is(button,a) { min-height: 83px; gap: 10px; }
  .menu-links > :is(button,a) > span:first-child { font-size: 28px; line-height: 1.25; letter-spacing: -.055em; }
  .menu-links small { font-size: 10px; padding-top: 3px; margin-left: 5px; }
  .menu-link-arrow { font-size: 18px; }
  .sheet-footer { height: 64px; justify-content: flex-end; padding: 8px 18px 12px; gap: 20px; }
  .sheet-footer .pill-button, .sheet-footer .footer-line { display: none; }
  .menu-close-footer { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; padding: 0; background: transparent; color: var(--ink); border: 0; font-size: 12px; }
  .menu-close-footer .four-dots { width: 15px; height: 15px; gap: 2px; }
  .service-sheet { max-height: calc(100svh - 40px); margin: auto 16px calc(16px + env(safe-area-inset-bottom)); border-radius: 16px; }
  .service-content { padding: 20px 24px 12px; }
  .service-content h2 { font-size: 47px; }
  .service-identifier { margin-bottom: 26px; font-size: 12px; }
  .service-scope { margin-top: 32px; }
  .service-scope li { font-size: 16px; min-height: 49px; }
  .service-bottom { padding: 24px; gap: 15px; }
  .service-bottom .pill-button { min-width: 0; padding-inline: 22px; font-size: 13px; }
  .back-to-services { font-size: 12px; }
  .chat-sheet { margin: auto 16px calc(16px + env(safe-area-inset-bottom)); border-radius: 16px; }
  .chat-content { min-height: 250px; padding: 22px; }
  .chat-context { font-size: 29px; }
}

@media (max-width: 359px) {
  .intro { left: 20px; }
  .intro h1 { font-size: 39px; }
  .delivery-label { right: 20px; }
  .service-field { width: calc(100% - 40px); }
  .entry-name { gap: 6px; font-size: 18px; }
  .orbit { width: 245px; height: 245px; }
  .menu-links > :is(button,a) > span:first-child { font-size: 24px; }
  .menu-links > :is(button,a) { min-height: 76px; }
  .service-content h2 { font-size: 41px; }
  .dock-brand { font-size: 12px; gap: 5px; }
  .dock-consult { min-width: 76px; padding-inline: 8px; font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}