/* The opening human and system sequence.
   Load order is part of the cascade: keep the numeric prefixes in sequence. */
/* The two panels of the opening sequence. */
.match-intro { position: absolute; inset: 0; z-index: 5; overflow: hidden; background: #0b0c0d; display: block }
.human-system { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr }
.hs-side { position: relative; display: flex; align-items: center; padding: clamp(32px,8vw,120px); overflow: hidden }
.hs-human { background: #f1eee7; color: #151515 }
.hs-system { background: #121417; color: #edf0eb }
.hs-human .hs-label { left: 42px }
.hs-system .hs-label { right: 42px }
.hs-original { max-width: 620px; transition: opacity .7s,filter .7s,transform .7s }
.hs-result { max-width: 620px; transition: opacity .7s,filter .7s,transform .7s; position: absolute; left: clamp(32px,8vw,120px); right: clamp(32px,8vw,120px); opacity: 0; transform: translateY(24px); font-size: clamp(34px,5vw,72px); line-height: .98; letter-spacing: -.05em }
.human-system.connected .hs-original { opacity: .12; filter: blur(7px); transform: translateY(-18px) }
.human-system.connected .hs-result { opacity: 1; transform: none }
.hs-bridge:hover { transform: scale(1.08); box-shadow: 0 0 0 12px rgba(179,255,72,.12) }
.connected .hs-bridge { border-radius: 19px; transform: rotate(45deg) }
.hs-bridge span { display: block; transition: transform .45s }
.connected .hs-bridge span { transform: rotate(-45deg) }
/* Human and system design language */
#work::before { background: none }
#fit::before { background: none }
#hitch-method::before { background: none }
#process::before { background: none }
#about::before { background: none }
#services::before { background: none }
#specialization::before { background: none }
#contact::before { background: none }
.hero .btn-g { color: rgba(17,19,21,.65); border-color: rgba(17,19,21,.28) }
.hero .signal-chip { border-color: rgba(17,19,21,.14); background: rgba(255,255,255,.35); color: rgba(17,19,21,.58) }
.hero .scroll-ind { color: rgba(243,241,234,.42) }
#fit .fit-card { background: #121416; border-color: rgba(243,241,234,.14) }
#services .svc-item { background: #121416; border-color: rgba(243,241,234,.14) }
#about .skill::before { box-shadow: none }
#specialization .special-card::after { background: var(--accent); opacity: .16 }
.fit-card { border-radius: 0 }
.fit-card:nth-child(2)::before { background: #0b0c0d }
.btn-p:hover { opacity: 1; transform: translateY(-2px); box-shadow: 0 10px 36px rgba(179,255,72,.2) }
.signal-chip::before { content: ''; position: absolute; inset: -1px; transform: translateX(-120%); animation: chipSweep 5.5s ease-in-out infinite; background: linear-gradient(100deg,transparent 20%,rgba(179,255,72,.18) 48%,transparent 76%) }
.skill::before { content: ''; position: absolute; left: 1px; width: 5px; height: 5px; border-radius: 50%; box-shadow: 0 0 10px rgba(120,151,255,.42); opacity: .55; transition: opacity .3s,transform .3s; background: var(--accent) }
.w-item:hover { transform: translateY(-3px); border-color: rgba(179,255,72,.42); box-shadow: 0 22px 70px rgba(0,0,0,.24),0 0 44px rgba(179,255,72,.08) }
@media(max-width:768px) {
  .human-system { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr }
  .hs-side { padding: 56px 24px 30px }
  .hs-human .hs-original { font-size: 13vw }
  .hs-system .hs-original { font-size: 11vw }
  .hs-label { top: 20px }
  .hs-human .hs-label { left: 24px }
  .hs-system .hs-label { right: 24px }
  .hs-result { left: 24px; right: 24px; font-size: 9vw }
  .hs-system .hs-result { font-size: 8vw }
  .hs-bridge { width: 66px; height: 66px }
  .hs-note { bottom: 14px }
  .hero { background: #f3f1ea }
  .hero::before { background: linear-gradient(180deg,transparent 0 68%,var(--accent) 68% 68.3%,#101214 68.3%) }
  .hero-title { max-width: 100% }
  .hero-sub { max-width: 100% }
  .hero .scroll-ind { display: none }
  #about { background: #f3f1ea }
  #contact { background: #0b0c0d }
  #contact .contact-wrap::after { display: none }
}