:root {
  --space: #050510;
  --space-soft: #090d1d;
  --mint: #38f9d7;
  --sky: #60a5fa;
  --white: #e6edf3;
  --muted: #8b949e;
  --line: rgba(112, 198, 245, .18);
  --display: "Space Grotesk", "Avenir Next", sans-serif;
  --body: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-snap-type: y mandatory; }
body { min-width: 320px; margin: 0; overflow-x: hidden; background: var(--space); color: var(--white); font-family: var(--body); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
.skip-link { position: fixed; z-index: 100; top: 10px; left: 10px; padding: 12px 16px; transform: translateY(-150%); border-radius: 8px; background: var(--mint); color: #04211f; font-weight: 700; transition: transform .2s; }
.skip-link:focus { transform: translateY(0); }
.starfield, .ambient { position: fixed; inset: 0; pointer-events: none; }
.starfield { z-index: 0; width: 100%; height: 100%; }
.ambient { z-index: 0; }
.ambient-one { background: radial-gradient(ellipse at 86% 12%, rgba(18, 82, 116, .28), transparent 34%), radial-gradient(ellipse at 14% 84%, rgba(42, 12, 93, .22), transparent 35%); animation: breathe 18s ease-in-out infinite alternate; }
.ambient-two { background: radial-gradient(ellipse at 45% 45%, rgba(42, 249, 215, .04), transparent 44%); filter: blur(18px); }
main { position: relative; z-index: 1; }
.section { position: relative; min-height: 100vh; scroll-snap-align: start; scroll-snap-stop: always; }
.hero { display: flex; align-items: center; padding: 11vh 9vw 15vh; overflow: hidden; }
.hero-copy { position: relative; z-index: 2; max-width: 790px; }
.eyebrow, .section-kicker { margin: 0; color: var(--mint); font-family: var(--display); font-size: 12px; font-weight: 700; letter-spacing: .19em; }
.hero h1, .not-found h1 { max-width: 1100px; margin: 20px 0 24px; font-family: var(--display); font-size: clamp(45px, 6.1vw, 78px); font-weight: 700; letter-spacing: -.06em; line-height: 1.08; background: linear-gradient(105deg, var(--mint), var(--sky) 48%, var(--white) 88%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-intro { max-width: 590px; margin: 0; color: rgba(230, 237, 243, .9); font-size: clamp(18px, 2.15vw, 28px); font-weight: 500; letter-spacing: .04em; line-height: 1.65; }
.hero-tags { display: flex; flex-wrap: wrap; gap: 10px; margin: 27px 0 0; padding: 0; list-style: none; }
.hero-tags li { padding: 8px 14px; border: 1px solid rgba(56, 249, 215, .22); border-radius: 99px; background: rgba(56, 249, 215, .04); color: var(--muted); font-size: 13px; }
.primary-link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 34px; padding: 12px 18px; border: 1px solid rgba(56, 249, 215, .58); border-radius: 999px; color: var(--mint); font-size: 15px; font-weight: 700; letter-spacing: .03em; box-shadow: 0 0 0 rgba(56, 249, 215, 0); transition: color .3s, background .3s, transform .3s, box-shadow .3s; }
.primary-link span, .email-link span { margin-left: 9px; font-size: 1.15em; }
.primary-link:hover, .primary-link:focus-visible { transform: translateY(-3px); background: rgba(56, 249, 215, .12); box-shadow: 0 0 30px rgba(56, 249, 215, .22); outline: none; }
.signal-system { position: absolute; top: 50%; right: -8vw; width: min(52vw, 780px); aspect-ratio: 1; transform: translateY(-50%); opacity: .95; }
.signal-core { position: absolute; top: 49%; left: 50%; width: 15px; height: 15px; border-radius: 50%; background: #fff; box-shadow: 0 0 14px 4px var(--mint), 0 0 48px 13px rgba(96, 165, 250, .4); }
.signal-orbit { position: absolute; top: 50%; left: 50%; width: 76%; height: 34%; border: 1px solid rgba(56, 249, 215, .56); border-radius: 50%; transform: translate(-50%, -50%) rotate(-23deg); box-shadow: 0 0 20px rgba(56, 249, 215, .08); animation: orbital-drift 13s linear infinite; }
.orbit-two { width: 84%; height: 28%; border-color: rgba(96, 165, 250, .5); transform: translate(-50%, -50%) rotate(59deg); animation-duration: 17s; animation-direction: reverse; }
.orbit-three { width: 45%; height: 79%; border-color: rgba(230, 237, 243, .24); transform: translate(-50%, -50%) rotate(22deg); animation-duration: 20s; }
.signal-line { position: absolute; height: 1px; transform-origin: right; background: linear-gradient(90deg, transparent, rgba(96, 165, 250, .7), transparent); }
.line-one { top: 52%; right: 50%; width: 54%; transform: rotate(152deg); }.line-two { top: 44%; left: 48%; width: 46%; transform: rotate(-37deg); }
.signal-pulse { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--sky); box-shadow: 0 0 16px 3px var(--sky); animation: point-pulse 3s ease-in-out infinite; }
.pulse-one { top: 22%; left: 65%; }.pulse-two { right: 22%; bottom: 24%; background: var(--mint); box-shadow: 0 0 16px 3px var(--mint); animation-delay: -1.2s; }
.scroll-cue { position: absolute; bottom: 8vh; left: 9vw; display: grid; width: 44px; min-height: 44px; place-items: center; }
.scroll-cue span { width: 14px; height: 14px; border-right: 1px solid var(--mint); border-bottom: 1px solid var(--sky); transform: rotate(45deg); animation: cue 1.8s ease-in-out infinite; }
.section-lined::before { position: absolute; top: 0; right: 9vw; left: 9vw; height: 1px; background: linear-gradient(90deg, transparent, var(--line), rgba(56, 249, 215, .34), var(--line), transparent); content: ""; }
.about, .focus { display: flex; align-items: center; padding: 14vh 9vw; }.section-inner { width: min(100%, 1240px); margin: 0 auto; }.narrow { width: min(100%, 910px); margin-left: 0; }.section-kicker { margin-bottom: 28px; }.about h2, .focus h2, .contact h2 { margin: 0; font-size: clamp(31px, 4.6vw, 62px); font-weight: 500; letter-spacing: -.04em; line-height: 1.34; }.section-copy { max-width: 650px; margin: 35px 0 0; color: var(--muted); font-size: 16px; line-height: 2; }.signal-rule { position: absolute; right: 10%; bottom: 12%; width: 26%; height: 1px; background: linear-gradient(90deg, transparent, var(--mint), transparent); }.signal-rule span { position: absolute; top: -3px; right: 35%; width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 18px 4px var(--mint); }
.focus { align-items: flex-start; padding-top: 18vh; }.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 34px; }.section-heading h2 { max-width: 760px; }.practice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-top: 9vh; }.practice-card { position: relative; min-height: 310px; padding: 28px; overflow: hidden; border: 1px solid rgba(96, 165, 250, .2); border-radius: 18px; background: linear-gradient(135deg, rgba(56, 249, 215, .08), rgba(96, 165, 250, .045) 43%, rgba(9, 13, 29, .72)); box-shadow: 0 20px 50px rgba(0, 0, 0, .14); transition: transform .45s var(--ease), border-color .45s, box-shadow .45s; }.practice-card:hover { transform: translateY(-12px); border-color: rgba(56, 249, 215, .48); box-shadow: 0 26px 56px rgba(0, 0, 0, .3), 0 0 32px rgba(56, 249, 215, .09); }.card-index { color: rgba(56, 249, 215, .62); font-family: var(--display); font-size: 13px; letter-spacing: .12em; }.card-signal { position: absolute; top: 35px; right: 30px; width: 40px; height: 40px; border: 1px solid rgba(56, 249, 215, .45); border-radius: 50%; }.card-signal::after { position: absolute; top: 13px; left: 13px; width: 12px; height: 12px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 13px var(--mint); content: ""; }.practice-card h3 { margin: 82px 0 14px; font-size: 24px; font-weight: 600; }.practice-card p { max-width: 270px; margin: 0; color: var(--muted); font-size: 15px; line-height: 1.85; }
.contact { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; padding: 18vh 24px 8vh; text-align: center; }.contact-content { max-width: 950px; }.contact h2 { font-size: clamp(31px, 5vw, 65px); }.email-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 38px; border-bottom: 1px solid rgba(56, 249, 215, .55); color: var(--mint); font-family: var(--display); font-size: clamp(21px, 3vw, 36px); font-weight: 600; transition: color .25s, border-color .25s; }.email-link:hover, .email-link:focus-visible { color: #fff; border-color: #fff; outline: none; }.footer-note { margin: auto 0 0; padding-top: 60px; color: rgba(139, 148, 158, .68); font-family: var(--display); font-size: 12px; letter-spacing: .08em; }
.page-nav { position: fixed; z-index: 9; top: 50%; left: 28px; display: flex; flex-direction: column; gap: 19px; transform: translateY(-50%); }.page-dot { position: relative; display: block; width: 12px; min-height: 12px; border-radius: 99px; background: rgba(230, 237, 243, .17); transition: width .3s, background .3s; }.page-dot span { position: absolute; top: 50%; left: 20px; transform: translateY(-50%); color: rgba(230, 237, 243, .54); font-size: 12px; opacity: 0; transition: opacity .25s; }.page-dot:hover span, .page-dot:focus-visible span { opacity: 1; }.page-dot.is-active { width: 28px; background: var(--mint); box-shadow: 0 0 12px rgba(56, 249, 215, .45); }.page-dot:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; }
.reveal { opacity: 0; transform: translateY(32px); transition: opacity .8s var(--ease), transform .8s var(--ease); }.reveal.is-visible { opacity: 1; transform: translateY(0); }.practice-card.reveal:nth-child(2) { transition-delay: .12s; }.practice-card.reveal:nth-child(3) { transition-delay: .24s; }
.not-found-page { min-height: 100vh; background: radial-gradient(ellipse at 75% 34%, rgba(30, 103, 139, .22), transparent 38%), var(--space); }.not-found { position: relative; display: grid; min-height: 100vh; place-items: center; padding: 48px 8vw; overflow: hidden; }.not-found-copy { position: relative; z-index: 2; max-width: 760px; }.not-found h1 { margin-bottom: 20px; }.not-found-copy > p:not(.eyebrow) { color: var(--muted); font-size: 17px; }.not-found-orbit { position: absolute; top: 50%; left: 67%; width: min(58vw, 680px); aspect-ratio: 1; transform: translate(-50%, -50%); }.not-found-orbit::before, .not-found-orbit span, .not-found-orbit i { position: absolute; border: 1px solid rgba(56, 249, 215, .42); border-radius: 50%; content: ""; }.not-found-orbit::before { inset: 20% 5%; transform: rotate(28deg); }.not-found-orbit span { inset: 4% 25%; border-color: rgba(96, 165, 250, .52); transform: rotate(-54deg); }.not-found-orbit i { inset: 38%; background: var(--mint); border: 0; box-shadow: 0 0 18px 8px var(--mint), 0 0 60px 24px rgba(96, 165, 250, .28); }.not-found-orbit b { position: absolute; top: 30%; left: 16%; width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 14px 3px var(--sky); }
@keyframes orbital-drift { to { transform: translate(-50%, -50%) rotate(337deg); } } @keyframes point-pulse { 50% { transform: scale(1.7); opacity: .6; } } @keyframes cue { 50% { transform: rotate(45deg) translate(6px, 6px); opacity: .45; } } @keyframes breathe { to { transform: scale(1.08) translate(-1%, 2%); } }
@media (max-width: 767px) { html { scroll-snap-type: none; }.section { min-height: auto; scroll-snap-align: none; }.page-nav { display: none; }.hero { min-height: 100svh; padding: 15vh 24px 13vh; align-items: flex-start; }.hero h1 { font-size: clamp(43px, 13vw, 61px); }.hero-intro { font-size: 18px; }.signal-system { top: auto; right: -39vw; bottom: -13vw; width: 100vw; transform: none; opacity: .45; }.signal-orbit, .signal-line, .signal-pulse { animation: none; }.scroll-cue { bottom: 25px; left: 24px; }.about, .focus { min-height: auto; padding: 15vh 24px; }.section-lined::before { right: 24px; left: 24px; }.section-copy { font-size: 15px; }.signal-rule { display: none; }.section-heading { display: block; }.practice-grid { grid-template-columns: 1fr; margin-top: 42px; }.practice-card { min-height: 238px; }.practice-card h3 { margin-top: 55px; }.contact { min-height: 85svh; padding: 18vh 24px 8vh; }.contact h2 { font-size: 32px; }.email-link { font-size: 20px; word-break: break-all; }.not-found { justify-items: start; padding: 36px 24px; }.not-found-orbit { top: auto; bottom: -90px; left: 68%; width: 105vw; }.not-found h1 { font-size: clamp(49px, 15vw, 66px); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }.reveal { opacity: 1; transform: none; } }