:root {
  color-scheme: dark;
  --ink: #edf2ed;
  --muted: #9ca9a1;
  --line: rgba(229, 240, 231, .16);
  --accent: #b8d7a4;
  font-family: 'DM Sans', sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: #101917; }
body { margin: 0; min-height: 100vh; color: var(--ink); }
a { color: inherit; }
.stage {
  position: relative; isolation: isolate; overflow: hidden; min-height: 100svh;
  padding: 34px clamp(24px, 6.2vw, 96px) 22px;
  display: flex; flex-direction: column;
  background: radial-gradient(ellipse at 71% 47%, #1e302a 0%, #15211d 32%, #101917 72%);
}
.stage::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .17; 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='.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.2'/%3E%3C/svg%3E"); }
.ambient { position: absolute; z-index: -1; border-radius: 50%; filter: blur(2px); pointer-events: none; }
.ambient-one { width: 370px; height: 370px; top: 14%; right: 4%; background: radial-gradient(circle, rgba(164, 198, 153, .12), transparent 68%); }
.ambient-two { width: 300px; height: 300px; bottom: 4%; left: 25%; background: radial-gradient(circle, rgba(119, 151, 133, .1), transparent 70%); }
.topline, .footer { display: flex; align-items: center; justify-content: space-between; }
.topline { min-height: 36px; }
.wordmark { display: inline-flex; align-items: center; gap: 12px; color: #d7e0d8; text-decoration: none; font-size: 10px; font-weight: 700; letter-spacing: .19em; }
.mark { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid rgba(230,242,231,.45); border-radius: 50%; color: var(--accent); font-family: Manrope,sans-serif; font-size: 13px; letter-spacing: 0; }
.location, .footer { color: #819087; font-size: 9px; font-weight: 600; letter-spacing: .16em; }
.location { display: flex; align-items: center; }
.location-dot { width: 6px; height: 6px; margin-right: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px rgba(184,215,164,.55); }
.hero { width: min(1120px, 100%); flex: 1; align-self: center; display: grid; grid-template-columns: 1fr .84fr; align-items: center; gap: clamp(48px, 9vw, 132px); padding: 54px 0 64px; }
.intro { position: relative; z-index: 2; }
.eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 31px; color: #aebbb2; font-size: 9px; font-weight: 700; letter-spacing: .2em; }
.eyebrow-line { width: 25px; height: 1px; background: var(--accent); }
h1 { margin: 0; font-family: Manrope, sans-serif; font-size: clamp(48px, 6.45vw, 88px); line-height: .99; letter-spacing: -.075em; font-weight: 500; }
h1 span { color: #c4d2c5; }
.patronymic { margin: 12px 0 36px; color: #84938a; font-size: 15px; letter-spacing: .055em; }
.role { margin: 0 0 7px; font-family: Manrope,sans-serif; font-size: 19px; font-weight: 600; letter-spacing: -.025em; }
.company { margin: 0; color: #9ba89f; font-size: 14px; }
.company span { color: #627269; padding: 0 4px; }
.contact-links { display: grid; justify-items: start; gap: 10px; margin-top: 39px; }
.contact-link { display: inline-flex; align-items: center; gap: 14px; padding: 13px 17px 13px 13px; border: 1px solid rgba(229,240,231,.18); border-radius: 12px; background: rgba(239,247,240,.045); text-decoration: none; transition: border-color .2s ease, background .2s ease, transform .2s ease; }
.contact-link:hover { border-color: rgba(184,215,164,.55); background: rgba(239,247,240,.085); transform: translateY(-2px); }
.contact-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; color: #172119; background: var(--accent); font-size: 19px; }
.contact-link small { display: block; margin-bottom: 4px; color: #8f9c93; font-size: 8px; font-weight: 700; letter-spacing: .16em; }
.contact-link strong { font-size: 13px; font-weight: 500; }
.arrow { margin-left: 24px; color: var(--accent); font-size: 15px; }
.glass-card { position: relative; min-height: 430px; overflow: hidden; padding: 25px 27px 22px; border: 1px solid rgba(239,248,240,.24); border-radius: 18px; background: linear-gradient(143deg, rgba(230,244,232,.14), rgba(214,233,219,.035) 54%, rgba(151,180,158,.085)); box-shadow: 0 32px 90px rgba(4,12,8,.28), inset 0 1px 0 rgba(255,255,255,.14); backdrop-filter: blur(24px) saturate(125%); -webkit-backdrop-filter: blur(24px) saturate(125%); transform: rotate(2deg); }
.card-top, .card-bottom { display: flex; justify-content: space-between; align-items: flex-start; color: #b9c8bd; font-size: 8px; font-weight: 700; letter-spacing: .17em; }
.card-index { color: #77877c; font-size: 7px; }
.card-art { position: absolute; inset: 64px 0 71px; display: grid; place-items: center; overflow: hidden; }
.orbit { position: absolute; width: 232px; height: 232px; border: 1px solid rgba(214,235,215,.22); border-radius: 50%; }
.orbit-a { transform: scaleY(.41) rotate(-26deg); }
.orbit-b { transform: scaleY(.41) rotate(34deg); }
.orbit-c { width: 180px; height: 180px; opacity: .54; }
.art-core { position: relative; z-index: 1; display: grid; place-items: center; width: 114px; height: 114px; border: 1px solid rgba(223,239,222,.42); border-radius: 50%; background: radial-gradient(circle at 34% 28%, rgba(217,239,211,.23), rgba(40,62,49,.14) 66%); box-shadow: inset 0 0 35px rgba(211,237,208,.08), 0 0 55px rgba(165,198,158,.08); color: #e4eee2; font-family: Manrope,sans-serif; font-size: 42px; font-weight: 400; letter-spacing: -.09em; }
.art-core span { color: var(--accent); }
.art-caption { position: absolute; top: 18%; right: 17%; color: #b9cbb8; font-size: 7px; font-weight: 600; letter-spacing: .16em; line-height: 1.7; }
.art-coordinates { position: absolute; bottom: 15%; left: 14%; color: #809086; font-size: 7px; letter-spacing: .1em; }
.card-bottom { align-items: flex-end; position: absolute; bottom: 23px; left: 27px; right: 27px; color: #9caca0; font-size: 7px; line-height: 1.6; }
.card-signature { color: #d6e3d6; font-family: Manrope,sans-serif; font-size: 19px; font-weight: 500; letter-spacing: -.08em; }
.card-signature span { color: var(--accent); padding-left: 3px; }
.glass-shine { position: absolute; top: 0; left: -40%; width: 80%; height: 100%; pointer-events: none; transform: skewX(-18deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.035), transparent); }
.footer { min-height: 24px; border-top: 1px solid rgba(222,236,224,.11); padding-top: 15px; font-size: 8px; }
.footer-year { color: #b5c1b8; }
@media (max-width: 760px) {
  .stage { padding: 24px 24px 17px; }
  .location { max-width: 145px; justify-content: flex-end; text-align: right; line-height: 1.6; font-size: 7px; }
  .hero { grid-template-columns: 1fr; gap: 42px; padding: 62px 0 46px; }
  .eyebrow { margin-bottom: 25px; }
  h1 { font-size: clamp(50px, 12.5vw, 76px); }
  .patronymic { margin-bottom: 29px; }
  .glass-card { width: min(100%, 410px); min-height: 350px; justify-self: center; transform: rotate(1deg); }
  .card-art { inset-block: 58px 62px; }
  .orbit { width: 205px; height: 205px; }
  .orbit-c { width: 158px; height: 158px; }
  .art-core { width: 98px; height: 98px; font-size: 36px; }
  .footer { gap: 10px; font-size: 6px; letter-spacing: .1em; }
  .footer span:nth-child(2) { text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .glass-card { background: #23332a; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .contact-link { background: #1c2922; }
}