@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  color-scheme: dark;
  font-family: 'DM Sans', sans-serif;
  background: #101612;
  color: #edf0e7;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { min-width: 320px; }
body { margin: 0; }
a { color: inherit; }

.site-shell {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: radial-gradient(circle at 78% 43%, rgba(79, 104, 66, .11), transparent 34%), #101612;
}

.site-header, .site-footer {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.site-header { padding: 34px clamp(26px, 5.3vw, 84px); }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; font: 800 18px/1 'Manrope', sans-serif; letter-spacing: .105em; }
.brand:focus-visible { outline: 2px solid #d4ed88; outline-offset: 8px; }
.brand-mark { width: 25px; height: 25px; display: flex; flex-direction: column; justify-content: space-between; transform: rotate(-31deg); }
.brand-mark span { display: block; height: 5px; border-radius: 10px; background: #d4ed88; }
.brand-mark span:nth-child(1) { width: 75%; align-self: flex-end; }
.brand-mark span:nth-child(2) { width: 100%; }
.brand-mark span:nth-child(3) { width: 75%; }
.header-note, .site-footer, .eyebrow, .hero-footer, .art-label { font-size: 10px; font-weight: 700; letter-spacing: .19em; }
.header-note { display: flex; align-items: center; gap: 11px; color: #aeb8a9; text-transform: uppercase; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: #d4ed88; box-shadow: 0 0 12px rgba(212, 237, 136, .7); }

main { flex: 1; display: flex; align-items: center; }
.hero { width: 100%; min-height: 620px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; padding: 0 clamp(26px, 8vw, 126px); gap: 4vw; }
.hero-copy { position: relative; z-index: 1; padding: 20px 0 40px; }
.eyebrow { display: flex; align-items: center; gap: 16px; margin: 0 0 42px; color: #d4ed88; }
.eyebrow-line { width: 34px; height: 1px; background: #d4ed88; }
h1 { margin: 0; font: 500 clamp(52px, 6.6vw, 100px)/1.075 'Manrope', sans-serif; letter-spacing: -.075em; white-space: nowrap; }
h1 em { font-weight: 500; font-style: normal; color: #d4ed88; }
.hero-description { max-width: 410px; margin: 34px 0 0; color: #aab4a9; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.7; }
.hero-footer { display: flex; align-items: center; gap: 19px; margin-top: 76px; color: #d5dbce; }
.hero-footer span:last-child span { padding-left: 9px; color: #d4ed88; font-size: 15px; }
.small-rule { width: 39px; height: 1px; background: #77846f; }

.artwork { position: relative; width: min(42vw, 620px); aspect-ratio: 1; justify-self: center; display: grid; place-items: center; isolation: isolate; }
.artwork-glow { position: absolute; width: 76%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(160, 193, 112, .11), transparent 68%); filter: blur(22px); }
.orbit { position: absolute; border: 1px solid rgba(190, 209, 165, .2); border-radius: 50%; }
.orbit-one { width: 100%; height: 100%; }
.orbit-two { width: 80%; height: 80%; }
.orbit-three { width: 59%; height: 59%; border-color: rgba(190, 209, 165, .28); }
.orbit-one::before, .orbit-two::before, .orbit-three::before { content: ''; position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #d4ed88; box-shadow: 0 0 12px #d4ed88; }
.orbit-one::before { top: 15%; left: 14%; }
.orbit-two::before { bottom: 10%; right: 22%; }
.orbit-three::before { top: 4%; right: 27%; }
.core { width: 38%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 32% 27%, #e8f4c2 0%, #c8e49a 23%, #7f9e62 58%, #324a37 82%, #172a22 100%); box-shadow: inset -24px -30px 45px rgba(12, 25, 21, .6), 0 0 65px rgba(181, 223, 138, .16), 0 35px 70px rgba(0, 0, 0, .38); }
.core-inner { width: 63%; height: 63%; border: 1px solid rgba(240, 255, 217, .22); border-radius: 50%; transform: rotate(-28deg) scaleX(.7); }
.art-label { position: absolute; color: #859486; font-size: 9px; }
.art-label-top { top: 9%; right: -4%; }
.art-label-bottom { bottom: 8%; left: -1%; }
.art-cross { position: absolute; color: #7f947b; font-size: 18px; font-weight: 300; }
.art-cross-one { top: 30%; left: 6%; }
.art-cross-two { bottom: 22%; right: 3%; }
.site-footer { padding: 28px clamp(26px, 5.3vw, 84px); border-top: 1px solid rgba(216, 232, 194, .1); color: #88958b; }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 0; min-height: auto; padding-top: 75px; padding-bottom: 50px; }
  .hero-copy { padding-bottom: 0; }
  .artwork { width: min(75vw, 500px); margin-top: 30px; }
  h1 { font-size: clamp(50px, 9vw, 76px); }
  .hero-footer { margin-top: 50px; }
}

@media (max-width: 560px) {
  .site-header { padding-top: 28px; }
  .header-note { font-size: 0; gap: 0; }
  .status-dot { width: 8px; height: 8px; }
  .hero { padding-top: 65px; }
  .eyebrow { margin-bottom: 31px; font-size: 9px; }
  h1 { font-size: clamp(42px, 10.4vw, 58px); white-space: normal; }
  .hero-description { margin-top: 27px; }
  .artwork { width: 86vw; margin-top: 42px; }
  .art-label { font-size: 7px; }
  .site-footer { font-size: 8px; }
}

@media (prefers-reduced-motion: no-preference) {
  .core { animation: breathe 6s ease-in-out infinite; }
  .orbit-one { animation: rotate 60s linear infinite; }
  .orbit-two { animation: rotate 42s linear infinite reverse; }
  @keyframes breathe { 50% { transform: scale(1.035); } }
  @keyframes rotate { to { transform: rotate(360deg); } }
}