:root { color: #fff; background: #050508; font: 15px/1.5 -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", system-ui, sans-serif; }
* { box-sizing: border-box; }
html, body { width: 100%; min-width: 320px; min-height: 100%; margin: 0; background: #050508; }
body { overflow: hidden; }
a { color: inherit; text-decoration: none; }

.site-header { position: fixed; z-index: 10; top: 0; right: 0; left: 0; display: flex; align-items: center; justify-content: space-between; height: 64px; padding: 0 clamp(22px, 4vw, 68px); background: rgba(5,5,8,.6); border-bottom: 1px solid rgba(255,255,255,.06); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.brand { display: inline-flex; align-items: center; gap: 10px; color: rgba(255,255,255,.82); font-size: 14px; font-weight: 650; letter-spacing: .02em; }
.brand-mark { display: grid; width: 25px; height: 25px; place-items: center; border: 1px solid rgba(255,255,255,.7); clip-path: polygon(50% 0, 100% 100%, 0 100%); color: rgba(255,255,255,.9); font-size: 11px; font-weight: 800; }
.brand em { color: rgba(255,255,255,.52); font-style: normal; font-weight: 500; }
.admin-link { padding: 8px 18px; border: 1px solid rgba(255,255,255,.15); border-radius: 8px; background: rgba(255,255,255,.05); color: rgba(255,255,255,.78); font-size: 14px; font-weight: 500; transition: transform .25s cubic-bezier(.16,1,.3,1), background .2s ease, border-color .2s ease; }
.admin-link:hover, .admin-link:focus-visible { border-color: rgba(255,255,255,.42); background: rgba(255,255,255,.11); transform: translateY(-2px); }

.hero { position: relative; display: grid; width: 100%; height: 100vh; min-height: 580px; place-items: center; overflow: hidden; isolation: isolate; }
#blackHole { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; }
.vignette { position: absolute; z-index: -1; inset: 0; pointer-events: none; background: radial-gradient(ellipse 65% 65% at 50% 50%, transparent 25%, rgba(5,5,8,.55) 65%, rgba(5,5,8,.94) 100%); }
.hero::after { position: absolute; right: 0; bottom: 0; left: 0; height: 150px; background: linear-gradient(to bottom, transparent, rgba(5,5,8,.98)); content: ""; pointer-events: none; }
.hero-copy { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; width: min(760px, calc(100% - 48px)); margin-top: 25px; text-align: center; }
h1 { margin: 0; color: transparent; background-image: linear-gradient(160deg, #fff 0%, rgba(255,255,255,.76) 40%, rgba(255,255,255,.54) 70%, rgba(255,255,255,.88) 100%); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 0 40px rgba(255,255,255,.18)) drop-shadow(0 2px 12px rgba(255,255,255,.1)); font-size: clamp(54px, 8vw, 112px); font-weight: 800; letter-spacing: -.05em; line-height: 1.05; }
h1 span { margin-right: .08em; }
.hero-copy p { margin: 25px 0 48px; color: rgba(255,255,255,.55); font-size: clamp(18px, 2.45vw, 28px); font-weight: 300; letter-spacing: .2em; }
.lawyer-login { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 190px; height: 54px; padding: 0 36px; overflow: hidden; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; background: rgba(28,28,28,.76); box-shadow: inset 0 1px 0 rgba(255,255,255,.07); color: #fff; font-size: 15px; font-weight: 500; letter-spacing: .08em; transition: transform .4s cubic-bezier(.16,1,.3,1), border-color .3s ease, background .3s ease, box-shadow .4s ease; }
.lawyer-login::before { position: absolute; inset: 0; background: linear-gradient(105deg, transparent 20%, rgba(255,255,255,.15) 50%, transparent 80%); content: ""; transform: translateX(-100%); transition: transform .6s cubic-bezier(.16,1,.3,1); }
.lawyer-login::after { position: absolute; inset: -1px; border-radius: inherit; box-shadow: 0 0 0 0 rgba(255,255,255,0); content: ""; pointer-events: none; transition: box-shadow .4s ease; }
.lawyer-login:hover, .lawyer-login:focus-visible { border-color: rgba(255,255,255,.46); background: radial-gradient(ellipse 120% 120% at 50% 140%, rgba(255,255,255,.12) 0%, rgba(30,30,30,.78) 60%); box-shadow: 0 0 32px rgba(255,255,255,.08), 0 0 80px rgba(255,255,255,.04), inset 0 1px 0 rgba(255,255,255,.12); transform: translateY(-3px) scale(1.04); }
.lawyer-login:hover::before, .lawyer-login:focus-visible::before { transform: translateX(100%); }
.lawyer-login:hover::after, .lawyer-login:focus-visible::after { box-shadow: 0 0 0 1px rgba(255,255,255,.25), 0 0 20px 2px rgba(255,255,255,.08); }
.arrow { display: inline-block; width: 0; overflow: hidden; opacity: 0; transition: width .3s cubic-bezier(.16,1,.3,1), opacity .25s ease, margin-left .3s ease; }
.lawyer-login:hover .arrow, .lawyer-login:focus-visible .arrow { width: 18px; margin-left: 8px; opacity: 1; }
.hero-copy small { margin-top: 20px; color: rgba(255,255,255,.35); font-size: 12px; letter-spacing: .08em; }

@media (max-width: 620px) { .site-header { height: 58px; padding: 0 20px; } .brand { font-size: 13px; } .brand-mark { width: 22px; height: 22px; } .admin-link { padding: 7px 12px; font-size: 13px; } .hero { min-height: 520px; } .hero-copy { margin-top: 20px; } .hero-copy p { margin: 18px 0 38px; letter-spacing: .15em; } h1 { font-size: clamp(49px, 15vw, 72px); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }