:root {
  --ink: #17181c;
  --paper: #f4f2ed;
  --white: #fff;
  --muted: #77787f;
  --line: rgba(23, 24, 28, 0.12);
  --coral: #ed6658;
  --coral-dark: #c94f43;
  --lime: #d8ff74;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }
html { width: 100%; max-width: 100%; overflow-x: hidden; color-scheme: only light; scroll-behavior: smooth; }
body {
  width: 100%; max-width: 100%;
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
button { color: inherit; }
::selection { color: var(--white); background: var(--coral); }

.noise {
  position: fixed; inset: 0; z-index: 1000; opacity: .035; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
}
.cursor-glow {
  position: fixed; z-index: 0; width: 420px; height: 420px; border-radius: 50%;
  background: rgba(237, 102, 88, .1); filter: blur(90px); pointer-events: none;
  transform: translate(-50%, -50%); opacity: 0; transition: opacity .4s;
}
body.has-pointer .cursor-glow { opacity: 1; }

.site-header {
  position: fixed; z-index: 100; top: 20px; left: 50%; transform: translateX(-50%);
  width: min(1180px, calc(100% - 40px)); height: 74px; display: flex; align-items: center;
  justify-content: space-between; padding: 10px 12px 10px 18px; color: var(--white);
  border: 1px solid rgba(255,255,255,.16); border-radius: 22px;
  background: rgba(20, 21, 25, .68); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  transition: background .3s, box-shadow .3s, top .3s;
}
.site-header.scrolled { top: 10px; background: rgba(20, 21, 25, .9); box-shadow: 0 12px 50px rgba(0,0,0,.2); }
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand-mark { width: 46px; height: 46px; display: grid; place-items: center; color: #fff; background: var(--coral); border-radius: 14px; font-size: 22px; }
.brand-mark svg { width: 30px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; }
.brand-name { display: flex; flex-direction: column; line-height: 1; }
.brand-name strong { font-family: "Songti SC", STSong, serif; font-size: 23px; letter-spacing: .08em; }
.brand-name small { margin-top: 7px; color: #aaaab0; font-size: 9px; letter-spacing: .16em; }
.site-header nav { display: flex; gap: 34px; }
.site-header nav a { position: relative; color: #c8c8cc; font-size: 14px; }
.site-header nav a::after { content: ""; position: absolute; left: 0; bottom: -8px; width: 100%; height: 1px; background: var(--coral); transform: scaleX(0); transform-origin: right; transition: transform .3s var(--ease); }
.site-header nav a:hover { color: #fff; }
.site-header nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.header-cta { display: flex; align-items: center; gap: 24px; padding: 15px 18px 15px 22px; color: var(--ink); background: #fff; border-radius: 14px; font-size: 14px; font-weight: 700; }
.header-cta i { font-style: normal; font-size: 18px; }
.menu-toggle { display: none; border: 0; background: transparent; }

.hero {
  position: relative; min-height: 970px; padding: 190px max(6vw, 32px) 100px; overflow: hidden;
  color: #fff; background: var(--ink);
}
.hero::before { content: ""; position: absolute; inset: 0; opacity: .22; background: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 80px 80px; mask-image: linear-gradient(to bottom, black, transparent 88%); }
.hero-orbit { position: absolute; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; pointer-events: none; }
.orbit-one { width: 860px; height: 860px; top: -340px; right: -260px; animation: orbit 18s linear infinite; }
.orbit-one::after, .orbit-two::after { content: ""; position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 30px var(--coral); }
.orbit-one::after { left: 80px; bottom: 145px; }
.orbit-two { width: 580px; height: 580px; bottom: -360px; left: 35%; animation: orbit 13s linear infinite reverse; }
.orbit-two::after { right: 20px; top: 190px; background: var(--lime); box-shadow: 0 0 30px var(--lime); }
@keyframes orbit { to { transform: rotate(360deg); } }
.hero-copy { position: relative; z-index: 2; width: 46%; max-width: 740px; }
.eyebrow { display: flex; align-items: center; gap: 12px; color: #aaaab0; font-size: 12px; letter-spacing: .18em; }
.eyebrow > span { width: 28px; height: 2px; background: var(--coral); }
.hero h1 { margin: 34px 0 32px; font-family: "Songti SC", STSong, serif; font-size: clamp(58px, 6vw, 104px); line-height: 1.08; font-weight: 700; letter-spacing: -.06em; }
.ink-stroke { position: relative; display: inline-block; margin-left: .08em; color: var(--coral); }
.ink-stroke::after { content: ""; position: absolute; left: -4%; right: -7%; bottom: -7px; height: 15px; background: var(--coral); -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 14C69 3 178 6 297 12' fill='none' stroke='black' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 14C69 3 178 6 297 12' fill='none' stroke='black' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat; }
.hero-description { color: #aeafb4; font-size: 18px; line-height: 1.9; }
.hero-actions { display: flex; gap: 14px; margin-top: 44px; }
.button { min-height: 58px; display: inline-flex; align-items: center; justify-content: space-between; gap: 44px; padding: 0 22px 0 26px; border: 1px solid transparent; border-radius: 16px; font-weight: 700; transition: transform .3s var(--ease), background .3s, color .3s; cursor: pointer; }
.button:hover { transform: translateY(-3px); }
.button b { font-size: 20px; }
.button-primary { color: #fff; background: var(--coral); box-shadow: 0 18px 50px rgba(237,102,88,.22); }
.button-primary:hover { background: #f17365; }
.button-ghost { color: #d0d0d3; border-color: rgba(255,255,255,.18); }
.button-ghost:hover { color: #fff; background: rgba(255,255,255,.06); }
.hero-proof { display: flex; align-items: center; gap: 18px; margin-top: 58px; }
.avatar-stack { display: flex; }
.avatar-stack i { width: 38px; height: 38px; display: grid; place-items: center; margin-left: -8px; border: 3px solid var(--ink); border-radius: 50%; color: var(--ink); background: #efe2da; font-style: normal; font-size: 12px; }
.avatar-stack i:first-child { margin-left: 0; background: var(--lime); }
.avatar-stack i:last-child { background: var(--coral); color: #fff; }
.hero-proof p { display: flex; flex-direction: column; margin: 0; font-size: 13px; }
.hero-proof span { margin-top: 5px; color: #85868c; }

.hero-visual { position: absolute; z-index: 2; width: 58vw; max-width: 900px; right: -7vw; top: 196px; transform-style: preserve-3d; perspective: 1200px; }
.visual-halo { position: absolute; z-index: -1; width: 70%; height: 80%; right: 20%; top: 5%; background: var(--coral); opacity: .2; filter: blur(120px); }
.dashboard-window { overflow: hidden; border: 1px solid rgba(255,255,255,.18); border-radius: 26px; background: #f6f5f1; box-shadow: -30px 55px 120px rgba(0,0,0,.5); transform: rotateY(-6deg) rotateX(2deg); transition: transform .25s ease-out; }
.window-bar { height: 68px; display: flex; align-items: center; justify-content: space-between; padding: 0 25px; color: var(--ink); border-bottom: 1px solid #ddd; background: #fff; }
.mini-brand { display: flex; align-items: center; gap: 9px; font-family: "Songti SC", serif; font-size: 18px; }
.mini-brand span { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 9px; color: #fff; background: var(--coral); font-size: 14px; }
.mini-brand svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; }
.window-date { color: #77787f; font-size: 11px; }
.window-date i { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #4bbb75; box-shadow: 0 0 0 4px #e2f4e8; }
.window-user { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 50%; color: #3552a2; background: #dce4ff; font-weight: 700; }
.dashboard-body { display: grid; grid-template-columns: 105px 1fr; min-height: 525px; color: var(--ink); }
.mock-sidebar { display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 25px 13px; background: #1b1c20; }
.mock-store { width: 100%; padding: 10px 6px; color: #eee; border: 1px solid #36373d; border-radius: 9px; overflow: hidden; white-space: nowrap; font-size: 8px; }
.mock-sidebar i { width: 58%; height: 8px; border-radius: 9px; background: #4b4c52; }
.mock-sidebar i.active { width: 80%; height: 26px; border-left: 3px solid var(--coral); background: #303138; }
.mock-content { position: relative; padding: 28px; }
.mock-heading { display: flex; justify-content: space-between; align-items: flex-end; }
.mock-heading span { display: flex; flex-direction: column; gap: 5px; }
.mock-heading small { color: #9b9ca1; font-size: 10px; }
.mock-heading b { font-family: "Songti SC", serif; font-size: 22px; }
.mock-heading em { padding: 8px 14px; border: 1px solid #ddd; border-radius: 9px; color: #777; font-style: normal; font-size: 10px; background: #fff; }
.metric-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 25px; }
.metric-grid article { min-height: 105px; display: flex; flex-direction: column; padding: 17px; border: 1px solid #e1e1e1; border-radius: 15px; background: #fff; }
.metric-grid small { color: #96979c; font-size: 9px; }
.metric-grid strong { margin: 8px 0; font-size: 24px; }
.metric-grid span { color: #5a9d70; font-size: 8px; }
.metric-grid .dark { color: #fff; border-color: #222329; background: #222329; }
.metric-grid .dark span { color: var(--lime); }
.chart-card { margin-top: 13px; padding: 18px 18px 12px; border: 1px solid #e1e1e1; border-radius: 17px; background: #fff; }
.chart-head { display: flex; justify-content: space-between; align-items: center; }
.chart-head span { display: flex; flex-direction: column; gap: 3px; }
.chart-head b { font-size: 12px; }.chart-head small { color: #aaa; font-size: 8px; }.chart-head strong { color: var(--coral); font-size: 12px; }
.chart-card svg { width: 100%; height: 145px; overflow: visible; }
.chart-area { fill: url(#area); }
.chart-line { fill: none; stroke: var(--coral); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 2.4s .8s var(--ease) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.chart-labels { display: flex; justify-content: space-between; color: #aaa; font-size: 7px; }
.booking-float { position: absolute; right: -36px; bottom: 28px; display: flex; align-items: center; gap: 10px; min-width: 270px; padding: 14px 16px; border: 1px solid #ddd; border-radius: 14px; background: rgba(255,255,255,.92); box-shadow: 0 18px 40px rgba(0,0,0,.12); animation: bob 4s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-8px); } }
.pulse { width: 9px; height: 9px; border-radius: 50%; background: #4bbb75; box-shadow: 0 0 0 5px #e4f5e9; }
.booking-float div { display: flex; flex: 1; flex-direction: column; gap: 4px; }.booking-float small { color: #999; font-size: 8px; }.booking-float b { font-size: 10px; }.booking-float em { color: #4b8d62; font-size: 8px; font-style: normal; }
.float-chip { position: absolute; z-index: 5; display: flex; align-items: center; gap: 11px; padding: 15px 17px; color: var(--ink); border-radius: 15px; background: rgba(255,255,255,.95); box-shadow: 0 18px 50px rgba(0,0,0,.2); }
.float-chip > i { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 9px; color: #fff; background: var(--coral); font-style: normal; }
.float-chip span { display: flex; flex-direction: column; gap: 4px; }.float-chip small { color: #999; font-size: 8px; }.float-chip b { font-size: 10px; }
.chip-one { left: -50px; top: 80px; animation: bob 5s ease-in-out infinite reverse; }.chip-two { left: 35px; bottom: -35px; animation: bob 4.6s 1s ease-in-out infinite; }.chip-two > i { color: var(--ink); background: var(--lime); }
.scroll-hint { position: absolute; z-index: 3; bottom: 44px; left: max(6vw, 32px); display: flex; align-items: center; gap: 14px; color: #74757b; font-size: 9px; letter-spacing: .16em; }
.scroll-hint i { width: 38px; height: 38px; border: 1px solid #393a40; border-radius: 50%; position: relative; }.scroll-hint i::after { content: "↓"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; animation: scrollDown 1.6s infinite; }
@keyframes scrollDown { 50% { transform: translateY(4px); } }

.marquee { overflow: hidden; color: var(--ink); border-bottom: 1px solid var(--line); background: var(--coral); transform: rotate(-1.2deg) scale(1.02); }
.marquee-track { width: max-content; display: flex; align-items: center; gap: 34px; padding: 24px 0; animation: marquee 28s linear infinite; }
.marquee span { font-family: "Songti SC", serif; font-size: 25px; font-weight: 700; }.marquee i { font-style: normal; }
@keyframes marquee { to { transform: translateX(-50%); } }

.section { position: relative; padding: 140px max(6vw, 32px); }
.section-index { display: flex; align-items: center; gap: 15px; font-size: 11px; letter-spacing: .12em; }.section-index span { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; }.section-index small { color: var(--muted); }
.manifesto { min-height: 640px; display: grid; grid-template-columns: 1fr 3fr; align-items: start; }
.manifesto-copy { padding-top: 90px; }.manifesto-copy > p { color: var(--muted); font-size: 16px; }.manifesto h2 { max-width: 1000px; margin: 26px 0 0; font-family: "Songti SC", serif; font-size: clamp(52px, 6.8vw, 104px); line-height: 1.12; letter-spacing: -.06em; }.manifesto h2 span { color: var(--coral); }
.manifesto-note { position: absolute; right: 7vw; bottom: 100px; width: min(360px, 30vw); display: flex; gap: 18px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); line-height: 1.8; }.manifesto-note i { color: var(--coral); font-style: normal; }.manifesto-note p { margin: 0; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 50px; margin-bottom: 70px; }.section-heading h2, .mobile-copy h2 { margin: 24px 0 0; font-family: "Songti SC", serif; font-size: clamp(48px, 5vw, 82px); line-height: 1.1; letter-spacing: -.05em; }.section-heading > p { width: 380px; margin: 0; color: var(--muted); line-height: 1.9; }
.product { background: #fff; }
.feature-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; }
.feature { position: relative; overflow: hidden; min-height: 470px; padding: 34px; border: 1px solid var(--line); border-radius: 26px; background: #f6f5f2; transition: transform .45s var(--ease), box-shadow .45s; }.feature:hover { transform: translateY(-8px); box-shadow: 0 30px 60px rgba(24,24,28,.08); }.feature-calendar, .feature-chain { grid-column: span 7; }.feature-profile, .feature-growth { grid-column: span 5; }.feature-money { grid-column: span 12; min-height: 350px; color: #fff; background: var(--ink); }
.feature-top { display: flex; align-items: center; justify-content: space-between; }.feature-top span { color: #aaa; font-size: 12px; }.feature-top i { padding: 8px 13px; border: 1px solid var(--line); border-radius: 999px; font-style: normal; font-size: 11px; }.feature h3 { margin: 38px 0 12px; font-family: "Songti SC", serif; font-size: 34px; }.feature > p { width: min(390px, 90%); color: var(--muted); line-height: 1.8; }.feature-money > p { color: #aaa; }
.calendar-demo { position: absolute; left: 34px; right: 34px; bottom: -18px; height: 205px; display: grid; grid-template-columns: 52px 1fr 1fr; border: 1px solid #ddd; border-radius: 16px 16px 0 0; background: #fff; }.time-axis { display: flex; flex-direction: column; justify-content: space-around; padding: 28px 8px 8px; color: #aaa; border-right: 1px solid #eee; font-size: 8px; }.staff-column { position: relative; padding: 14px; border-right: 1px solid #eee; }.staff-column b { font-size: 10px; }.event { position: absolute; left: 10px; right: 10px; top: 52px; min-height: 70px; padding: 10px; border-left: 3px solid var(--coral); border-radius: 7px; color: #873c34; background: #feebe8; font-size: 9px; font-style: normal; }.event small { display: block; margin-top: 5px; opacity: .65; }.event.dark { top: 85px; color: #fff; border-color: var(--lime); background: #25262b; }
.profile-demo { position: absolute; left: 34px; right: 34px; bottom: 35px; display: grid; grid-template-columns: 54px 1fr auto; align-items: center; gap: 13px; padding: 22px; border-radius: 18px; background: #fff; box-shadow: 0 16px 45px rgba(0,0,0,.07); }.profile-face { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; background: #f5ddd8; }.profile-demo div:nth-child(2) { display: flex; flex-direction: column; gap: 6px; }.profile-demo small { color: #aaa; font-size: 9px; }.profile-demo em { padding: 7px 9px; border-radius: 7px; color: var(--coral-dark); background: #feebe8; font-style: normal; font-size: 8px; }.profile-demo > span { grid-column: 1 / -1; height: 6px; border-radius: 9px; background: #eee; }.profile-demo > span:nth-last-child(2) { width: 76%; }.profile-demo > span:last-child { width: 48%; }
.money-demo { position: absolute; right: 5%; top: 50%; width: 43%; transform: translateY(-45%); }.money-demo small { display: block; color: #929399; }.money-demo strong { display: block; margin: 12px 0 22px; font-size: clamp(42px, 5vw, 76px); letter-spacing: -.05em; }.money-demo span { display: inline-flex; gap: 9px; padding: 9px 13px; border-radius: 999px; color: var(--lime); background: rgba(216,255,116,.08); font-size: 11px; }.money-demo i { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); }
.growth-demo { position: absolute; left: 34px; right: 34px; bottom: 22px; height: 170px; }.growth-demo i { display: inline-block; margin: 0 7px 8px 0; padding: 8px 10px; border: 1px solid #ddd; border-radius: 9px; background: #fff; font-style: normal; font-size: 9px; }.growth-demo svg { position: absolute; left: 0; bottom: 0; width: 100%; height: 90px; }.growth-demo path { fill: none; stroke: var(--coral); stroke-width: 4; stroke-linecap: round; }
.chain-demo { position: absolute; inset: 220px 40px 30px; }.chain-demo span { position: absolute; width: 88px; height: 88px; display: grid; place-items: center; border: 1px solid #ddd; border-radius: 50%; background: #fff; font-size: 11px; box-shadow: 0 0 0 12px rgba(255,255,255,.6); }.chain-demo span::before { content: ""; position: absolute; z-index: -1; width: 160px; height: 1px; left: -120px; top: 44px; background: #ccc; transform-origin: right; }.chain-demo .hub { z-index: 2; left: 50%; top: 20%; transform: translateX(-50%); color: #fff; background: var(--coral); box-shadow: 0 0 0 14px #f9d9d5; font-family: "Songti SC", serif; font-size: 17px; }.chain-demo .hub::before { display: none; }.chain-demo span:nth-child(2) { left: 2%; bottom: 0; }.chain-demo span:nth-child(2)::before { left: 75px; transform: rotate(-24deg); }.chain-demo span:nth-child(3) { left: 50%; bottom: -15px; transform: translateX(-50%); }.chain-demo span:nth-child(3)::before { left: 42px; top: -52px; transform: rotate(90deg); }.chain-demo span:nth-child(4) { right: 2%; bottom: 0; }.chain-demo span:nth-child(4)::before { left: -145px; transform: rotate(24deg); }

.journey { display: grid; grid-template-columns: .8fr 1.2fr; gap: 9vw; color: #fff; background: var(--ink); }
.journey-sticky { align-self: start; position: sticky; top: 140px; }.section-index.light span { border-color: #404147; }.section-index.light small { color: #88898f; }.journey h2 { margin: 75px 0 28px; font-family: "Songti SC", serif; font-size: clamp(52px, 5vw, 82px); line-height: 1.12; letter-spacing: -.05em; }.journey-sticky > p { max-width: 430px; color: #898a90; line-height: 1.9; }
.journey-list { margin: 0; padding: 0; list-style: none; }.journey-list li { min-height: 220px; display: grid; grid-template-columns: 70px 1fr 40px; align-items: center; gap: 30px; border-top: 1px solid #37383e; transition: padding .35s var(--ease), background .35s; }.journey-list li:last-child { border-bottom: 1px solid #37383e; }.journey-list li:hover { padding: 0 22px; background: #202126; }.journey-list > li > span { width: 51px; height: 51px; display: grid; place-items: center; border: 1px solid #45464b; border-radius: 50%; color: var(--coral); font-size: 12px; }.journey-list small { color: #696a70; font-size: 9px; letter-spacing: .15em; }.journey-list h3 { margin: 12px 0 10px; font-family: "Songti SC", serif; font-size: 30px; }.journey-list p { margin: 0; color: #898a90; line-height: 1.7; }.journey-list > li > i { font-style: normal; font-size: 25px; transition: transform .3s; }.journey-list li:hover > i { color: var(--coral); transform: translate(5px, -5px); }

.mobile { min-height: 900px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 10vw; overflow: hidden; background: #ece9e1; }.mobile-copy > p:not(.eyebrow) { max-width: 520px; margin-top: 32px; color: var(--muted); line-height: 2; }.mobile-copy ul { margin: 38px 0 0; padding: 0; list-style: none; }.mobile-copy li { margin: 16px 0; }.mobile-copy li i { width: 23px; height: 23px; display: inline-grid; place-items: center; margin-right: 10px; border-radius: 50%; color: #fff; background: var(--coral); font-style: normal; font-size: 10px; }
.phone-stage { position: relative; min-height: 670px; display: grid; place-items: center; }.phone-orbit { position: absolute; width: 610px; height: 610px; border: 1px solid rgba(23,24,28,.15); border-radius: 50%; animation: orbit 24s linear infinite; }.phone-orbit::before, .phone-orbit::after { content: ""; position: absolute; inset: 70px; border: 1px solid rgba(23,24,28,.1); border-radius: 50%; }.phone-orbit::after { inset: 145px; }.phone-orbit span { position: absolute; display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%; color: #fff; background: var(--ink); box-shadow: 0 14px 40px rgba(0,0,0,.16); font-size: 12px; }.phone-orbit span:nth-child(1) { left: -10px; top: 44%; }.phone-orbit span:nth-child(2) { top: 5%; right: 14%; }.phone-orbit span:nth-child(3) { bottom: 3%; right: 17%; background: var(--coral); }
.phone { position: relative; z-index: 3; width: 315px; height: 650px; padding: 10px; border: 2px solid #393a3e; border-radius: 50px; background: #111216; box-shadow: 20px 40px 80px rgba(0,0,0,.25); transform: rotate(4deg); transition: transform .5s var(--ease); }.phone:hover { transform: rotate(0) translateY(-10px); }.phone-island { position: absolute; z-index: 5; top: 20px; left: 50%; width: 90px; height: 24px; border-radius: 20px; background: #111; transform: translateX(-50%); }.phone-screen { height: 100%; padding: 18px 15px; overflow: hidden; border-radius: 40px; color: var(--ink); background: #f7f6f2; }.phone-status { display: flex; justify-content: space-between; padding: 0 8px; font-size: 9px; }.phone-status i { font-style: normal; font-size: 7px; }.phone-greeting { display: flex; justify-content: space-between; align-items: center; margin-top: 28px; }.phone-greeting span { display: flex; flex-direction: column; gap: 5px; }.phone-greeting small { color: #999; font-size: 9px; }.phone-greeting b { font-family: "Songti SC", serif; font-size: 18px; }.phone-greeting > i { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: #f5ddd8; font-style: normal; }.salon-card { height: 150px; display: flex; align-items: flex-end; justify-content: space-between; margin-top: 20px; padding: 18px; color: #fff; border-radius: 18px; background: radial-gradient(circle at 80% 15%, rgba(237,102,88,.8), transparent 40%), linear-gradient(135deg,#292a2f,#16171b); }.salon-card div { display: flex; flex-direction: column; gap: 7px; }.salon-card small { color: #aaa; font-size: 7px; letter-spacing: .15em; }.salon-card b { font-family: "Songti SC", serif; font-size: 17px; }.salon-card span { color: #aaa; font-size: 8px; }.salon-card em { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 50%; color: var(--ink); background: #fff; font-style: normal; }.quick-actions { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: 12px; }.quick-actions span { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 4px; border-radius: 13px; background: #fff; font-size: 8px; }.quick-actions i { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 10px; color: var(--coral-dark); background: #feebe8; font-style: normal; font-size: 16px; }.next-booking { position: relative; margin-top: 12px; padding: 16px; border-radius: 16px; background: #fff; }.next-booking > small { color: #aaa; font-size: 7px; letter-spacing: .12em; }.next-booking div { display: flex; align-items: baseline; gap: 8px; margin: 12px 0 7px; }.next-booking div b { font-family: "Songti SC", serif; font-size: 20px; }.next-booking div span { font-size: 12px; }.next-booking p { margin: 0; color: #777; font-size: 9px; }.next-booking em { position: absolute; right: 15px; bottom: 15px; padding: 6px 8px; border-radius: 7px; color: #4c8b62; background: #e6f4e9; font-size: 8px; font-style: normal; }

.numbers { background: #fff; }.number-grid { display: grid; grid-template-columns: repeat(4,1fr); margin-top: 55px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }.number-grid article { min-height: 245px; padding: 42px 25px; border-right: 1px solid var(--line); }.number-grid article:last-child { border: 0; }.number-grid strong { font-family: "Songti SC", serif; font-size: clamp(50px,5vw,82px); color: var(--coral); }.number-grid p { margin-top: 55px; color: var(--muted); }
.experience { position: relative; min-height: 690px; display: grid; grid-template-columns: 1fr 1fr; gap: 9vw; align-items: center; padding: 120px max(6vw,32px); overflow: hidden; color: #fff; background: var(--coral); }.experience-bg { position: absolute; left: -30px; bottom: -160px; font-family: "Songti SC", serif; font-size: 440px; font-weight: 900; color: rgba(255,255,255,.055); white-space: nowrap; }.experience-copy, .experience-form { position: relative; z-index: 2; }.experience-copy > p { font-size: 11px; letter-spacing: .2em; }.experience-copy h2 { margin: 28px 0; font-family: "Songti SC", serif; font-size: clamp(52px,5vw,80px); line-height: 1.1; letter-spacing: -.05em; }.experience-copy > span { color: rgba(255,255,255,.76); line-height: 1.8; }.experience-form { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 34px; border: 1px solid rgba(255,255,255,.25); border-radius: 25px; background: rgba(139,48,40,.18); backdrop-filter: blur(10px); }.experience-form label, .experience-form .form-field { display: flex; flex-direction: column; gap: 10px; }.experience-form .scale-field { grid-column: 1 / -1; }.experience-form label span, .experience-form .form-label { font-size: 12px; }.experience-form input:not([type="hidden"]) { width: 100%; height: 56px; padding: 0 15px; color: #fff; border: 1px solid rgba(255,255,255,.3); border-radius: 12px; outline: none; background: rgba(255,255,255,.08); }.experience-form input::placeholder { color: rgba(255,255,255,.55); }.experience-form input:focus { border-color: #fff; background: rgba(255,255,255,.14); }.custom-select { position: relative; }.select-trigger { width: 100%; height: 58px; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; color: rgba(255,255,255,.78); border: 1px solid rgba(255,255,255,.34); border-radius: 14px; outline: none; background: rgba(255,255,255,.09); cursor: pointer; transition: border-color .25s, background .25s, box-shadow .25s; }.select-trigger:hover, .custom-select.open .select-trigger { color: #fff; border-color: rgba(255,255,255,.85); background: rgba(255,255,255,.15); box-shadow: 0 12px 34px rgba(115,35,28,.16); }.select-trigger svg { width: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease); }.custom-select.open .select-trigger svg { transform: rotate(180deg); }.select-options { position: absolute; z-index: 20; top: calc(100% + 10px); left: 0; right: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px; border: 1px solid rgba(255,255,255,.45); border-radius: 18px; background: rgba(112,39,33,.94); box-shadow: 0 24px 60px rgba(85,25,21,.34); backdrop-filter: blur(20px); transform-origin: top; animation: selectOpen .25s var(--ease); }.select-options[hidden] { display: none; }.select-options button { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 14px; color: #fff; border: 1px solid transparent; border-radius: 12px; text-align: left; background: rgba(255,255,255,.06); cursor: pointer; transition: background .2s, border-color .2s, transform .2s; }.select-options button:hover, .select-options button:focus-visible { border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.14); transform: translateY(-1px); outline: none; }.select-options button[aria-selected="true"] { color: var(--ink); background: #fff; }.select-options button span { display: flex; flex-direction: column; gap: 4px; }.select-options b { font-size: 13px; }.select-options small { color: rgba(255,255,255,.58); font-size: 9px; }.select-options button[aria-selected="true"] small { color: #818188; }.select-options i { width: 29px; height: 29px; display: grid; flex: 0 0 auto; place-items: center; border: 1px solid rgba(255,255,255,.2); border-radius: 9px; color: rgba(255,255,255,.55); font-size: 9px; font-style: normal; }.select-options button[aria-selected="true"] i { color: var(--coral); border-color: #f2c8c2; background: #fff0ed; }.button-light { grid-column: 1 / -1; width: 100%; color: var(--ink); border: 0; background: #fff; }.experience-form > small { grid-column: 1 / -1; color: rgba(255,255,255,.62); font-size: 10px; line-height: 1.6; }
@keyframes selectOpen { from { opacity: 0; transform: translateY(-8px) scale(.98); } to { opacity: 1; transform: none; } }
footer { min-height: 310px; display: grid; grid-template-columns: 1fr 1fr; align-content: center; gap: 40px; padding: 70px max(6vw,32px); color: #fff; background: var(--ink); }.footer-brand { width: max-content; }.footer-brand .brand-mark { font-size: 18px; }.footer-brand + p { margin: 0; color: #85868b; text-align: right; }.footer-brand ~ div { display: flex; gap: 28px; font-size: 13px; }.footer-brand ~ div a:hover { color: var(--coral); }.footer-brand ~ small { color: #64656b; text-align: right; font-size: 9px; letter-spacing: .12em; }
.toast { position: fixed; z-index: 200; left: 50%; bottom: 30px; max-width: calc(100vw - 40px); padding: 14px 20px; color: #fff; border-radius: 12px; background: #1c1d21; box-shadow: 0 14px 40px rgba(0,0,0,.25); transform: translate(-50%, 120px); opacity: 0; transition: .45s var(--ease); }.toast.show { transform: translate(-50%,0); opacity: 1; }
.mobile-sticky-cta { display: none; }
.reveal { opacity: 0; transform: translateY(35px); transition: opacity .85s var(--ease), transform .85s var(--ease); }.reveal.visible { opacity: 1; transform: none; }

@media (max-width: 1050px) {
  .site-header nav { display: none; }.hero { min-height: 1150px; }.hero-copy { width: 90%; }.hero-visual { top: 670px; right: 4vw; width: 85vw; }.manifesto { grid-template-columns: 1fr; }.manifesto-copy { padding-top: 60px; }.manifesto-note { position: static; width: 60%; margin: 80px 0 0 auto; }.feature-calendar,.feature-chain,.feature-profile,.feature-growth { grid-column: span 12; }.journey { grid-template-columns: 1fr; }.journey-sticky { position: static; }.mobile { grid-template-columns: 1fr; }.mobile-copy { max-width: 650px; }.experience { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  :root { --coral: #f06f62; --coral-dark: #d6584d; }
  html,body { overflow-x: hidden; }
  body { padding-bottom: calc(82px + env(safe-area-inset-bottom)); }
  main,section,footer { width: 100%; max-width: 100%; min-width: 0; }
  .noise { opacity: .02; }
  .site-header { top: max(8px, env(safe-area-inset-top)); width: calc(100% - 24px); height: 58px; padding: 8px 9px 8px 13px; border-radius: 17px; }.brand { gap: 10px; }.brand-mark { width: 38px; height: 38px; border-radius: 11px; }.brand-name strong { font-size: 18px; }.brand-name small { display: none; }.header-cta { display: none; }.menu-toggle { position: absolute; top: 8px; right: 9px; width: 40px; height: 40px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; border-radius: 12px; background: rgba(255,255,255,.06); }.menu-toggle span { width: 21px; height: 1px; background: #fff; transition: transform .3s; }.site-header.menu-open { height: auto; align-items: flex-start; flex-wrap: wrap; padding-bottom: 14px; }.site-header.menu-open nav { order: 3; width: 100%; display: flex; flex-direction: column; gap: 0; padding-top: 9px; }.site-header.menu-open nav a { min-height: 48px; display: flex; align-items: center; padding: 0 5px; border-top: 1px solid rgba(255,255,255,.1); }.site-header.menu-open .menu-toggle span:first-child { transform: translateY(4px) rotate(45deg); }.site-header.menu-open .menu-toggle span:last-child { transform: translateY(-4px) rotate(-45deg); }

  .hero { min-height: 900px; padding: 112px 20px 52px; }.hero-copy { width: 100%; min-width: 0; }.hero .eyebrow { font-size: 10px; line-height: 1.5; }.hero h1 { margin: 24px 0 22px; font-size: clamp(42px, 12vw, 50px); line-height: 1.08; }.hero-description { font-size: 14px; line-height: 1.75; }.hero-description br { display: none; }.hero-actions { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 10px; margin-top: 28px; }.button { width: 100%; min-width: 0; min-height: 52px; gap: 8px; padding: 0 13px; border-radius: 14px; font-size: 12px; }.button-primary { box-shadow: 0 14px 34px rgba(240,111,98,.18); }.hero-proof { margin-top: 26px; }.hero-visual { top: 565px; right: auto; left: 20px; width: calc(100% - 40px); }.dashboard-window { border-radius: 20px; transform: none; box-shadow: 0 28px 70px rgba(0,0,0,.42); }.window-bar { height: 48px; padding: 0 15px; }.mini-brand { font-size: 14px; }.mini-brand span { width: 25px; height: 25px; }.window-user { width: 24px; height: 24px; }.dashboard-body { grid-template-columns: 1fr; min-height: 292px; }.mock-sidebar { display: none; }.mock-content { padding: 17px; }.mock-heading b { font-size: 17px; }.mock-heading em { padding: 6px 10px; }.metric-grid { gap: 7px; margin-top: 15px; }.metric-grid article { min-width: 0; min-height: 74px; padding: 11px; border-radius: 11px; }.metric-grid strong { margin: 5px 0; font-size: 17px; }.chart-card { margin-top: 8px; padding: 12px 12px 9px; border-radius: 12px; }.chart-card svg { height: 73px; }.booking-float,.float-chip,.scroll-hint { display: none; }.marquee { width: 100%; transform: rotate(-.55deg); }.marquee-track { gap: 22px; padding: 15px 0; }.marquee span { font-size: 18px; }

  .section { padding: 70px 20px; }.section-index span { width: 38px; height: 38px; }.manifesto { min-height: auto; }.manifesto-copy { padding-top: 34px; }.manifesto-copy > p { font-size: 14px; line-height: 1.7; }.manifesto h2 { font-size: clamp(36px, 10.5vw, 43px); line-height: 1.16; }.manifesto-note { width: 100%; margin-top: 44px; font-size: 14px; }.section-heading { align-items: flex-start; flex-direction: column; gap: 22px; margin-bottom: 34px; }.section-heading h2,.mobile-copy h2 { font-size: clamp(36px, 10.5vw, 43px); }.section-heading > p { width: 100%; font-size: 14px; line-height: 1.75; }

  .feature-grid { gap: 14px; }.feature { min-height: 390px; padding: 23px; border-radius: 20px; }.feature h3 { margin-top: 28px; font-size: 27px; }.feature > p { width: 100%; margin-top: 8px; font-size: 14px; line-height: 1.7; }.feature-calendar { min-height: 405px; }.feature-profile { min-height: 350px; }.feature-money { min-height: 365px; }.feature-growth { min-height: 375px; }.feature-chain { min-height: 420px; }.money-demo { top: auto; right: 23px; left: 23px; bottom: 38px; width: auto; transform: none; }.money-demo strong { font-size: 42px; }.calendar-demo,.profile-demo { left: 23px; right: 23px; }.calendar-demo { height: 180px; }.profile-demo { bottom: 25px; }.growth-demo { left: 23px; right: 23px; height: 145px; }.chain-demo { inset: 220px 14px 24px; }.chain-demo span { width: 72px; height: 72px; }.chain-demo .hub { font-size: 15px; }

  .journey { gap: 42px; }.journey h2 { margin-top: 36px; font-size: clamp(37px, 10.5vw, 44px); }.journey-list li { grid-template-columns: 44px 1fr; gap: 14px; min-height: 170px; }.journey-list > li > span { width: 42px; height: 42px; }.journey-list h3 { margin: 8px 0; font-size: 25px; }.journey-list > li > i { display: none; }.journey-list p { font-size: 13px; line-height: 1.65; }

  .mobile { gap: 34px; }.mobile-copy { min-width: 0; }.mobile-copy > p:not(.eyebrow) { margin-top: 24px; font-size: 14px; line-height: 1.75; }.mobile-copy ul { margin-top: 26px; font-size: 14px; }.phone-stage { width: 100%; min-width: 0; min-height: 540px; overflow: hidden; transform: scale(.78); transform-origin: top center; }.phone-orbit { width: 440px; height: 440px; }.phone-orbit span { width: 62px; height: 62px; }.number-grid { grid-template-columns: 1fr 1fr; margin-top: 34px; }.number-grid article { min-height: 135px; padding: 25px 17px; border-bottom: 1px solid var(--line); }.number-grid strong { font-size: 42px; }.number-grid p { margin-top: 20px; font-size: 12px; line-height: 1.5; }

  .experience { min-height: auto; gap: 36px; padding: 70px 20px; }.experience-copy,.experience-form { min-width: 0; }.experience-copy h2 { margin: 20px 0; font-size: clamp(38px, 11vw, 46px); }.experience-copy > span { font-size: 14px; }.experience-form { grid-template-columns: 1fr; gap: 16px; padding: 19px; border-radius: 20px; background: rgba(112,42,36,.1); }.experience-form label,.experience-form .form-field,.experience-form .button,.experience-form > small { grid-column: 1; }.experience-form input:not([type="hidden"]),.select-trigger { height: 52px; }.select-options { position: static; grid-template-columns: 1fr; margin-top: 9px; max-height: 280px; overflow-y: auto; background: rgba(183,69,59,.98); }.select-options button { min-height: 62px; }.experience-bg { font-size: 240px; bottom: -70px; }

  footer { min-height: auto; grid-template-columns: 1fr; gap: 28px; padding: 56px 20px 48px; }.footer-brand + p,.footer-brand ~ small { text-align: left; }.footer-brand ~ div { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }.footer-brand ~ div a { min-height: 44px; display: flex; align-items: center; }
  .mobile-sticky-cta { position: fixed; z-index: 90; left: 12px; right: 12px; bottom: max(10px, env(safe-area-inset-bottom)); min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 14px 10px 18px; color: #fff; border: 1px solid rgba(255,255,255,.14); border-radius: 18px; background: rgba(24,25,29,.94); box-shadow: 0 15px 42px rgba(0,0,0,.28); backdrop-filter: blur(16px); transition: opacity .25s, transform .25s; }.mobile-sticky-cta span { display: flex; flex-direction: column; gap: 3px; }.mobile-sticky-cta small { color: #aaaab0; font-size: 10px; }.mobile-sticky-cta strong { font-size: 15px; }.mobile-sticky-cta i { width: 38px; height: 38px; display: grid; flex-shrink: 0; place-items: center; border-radius: 12px; color: var(--ink); background: var(--coral); font-style: normal; font-size: 20px; }.mobile-sticky-cta.hidden { opacity: 0; transform: translateY(90px); pointer-events: none; }
  .toast { bottom: calc(88px + env(safe-area-inset-bottom)); width: max-content; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; } *,*::before,*::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }.reveal { opacity: 1; transform: none; }
}