/* A standalone product hero framed around the titanium sculpture. */
.site-header { display: flex; align-items: center; justify-content: space-between; height: 86px; gap: 28px; }
.wordmark { display: inline-flex; align-items: center; gap: 8px; font-size: 24px; font-weight: 750; line-height: 1; letter-spacing: -.055em; }
.brand-mark { display: block; width: 21px; height: 28px; fill: currentColor; }
.main-nav { display: flex; align-items: center; gap: 30px; }
.main-nav a { color: #6e6e73; font-size: 13px; font-weight: 450; transition: color .18s; }
.main-nav a:hover, .main-nav a.active { color: #171719; }
.header-actions { display: flex; align-items: center; gap: 20px; }
.prelaunch { font-size: 12px; color: #6e6e73; }
.hero { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 0; min-height: 610px; padding: 52px 42px 56px; border: 1px solid #c4ee73; border-radius: 32px; background: radial-gradient(ellipse at 87% 12%, #f1ffc466, transparent 50%), linear-gradient(125deg, #d4ff71, #bcf343 55%, #c6fa57); box-shadow: 0 12px 40px #3447190c, inset 0 1px 0 #efffc2a6; position: relative; isolation: isolate; overflow: clip; }
.hero-copy { position: relative; z-index: 2; min-width: 0; }
.hero-eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; color: #37462c; font-size: 13px; }
.hero-token { display: inline-flex; background: #17200f; border-radius: 99px; color: #d2ff85; font-size: 12px; font-weight: 600; letter-spacing: .025em; padding: 5px 10px; }
h1 { font-size: clamp(60px, 6.1vw, 84px); font-weight: 600; line-height: 1.07; letter-spacing: -.025em; word-spacing: .025em; margin: 0; }
h1>span { display: block; }
.hero h1>span:last-child { color: #3d5c1e; }
.hero-description { max-width: 405px; margin: 26px 0 28px; color: #394927; font-size: 17px; line-height: 1.65; letter-spacing: -.015em; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 27px; }
.hero-explore { display: inline-flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 500; padding-block: 8px; }
.hero-explore:hover { text-decoration: underline; text-underline-offset: 5px; }
.hero-art { position: relative; margin: 0 -81px 0 -78px; min-width: 0; z-index: 1; }
.hero-art::before { content: ''; position: absolute; left: 19%; right: 18%; height: 15px; bottom: 4%; border-radius: 50%; background: #40404424; filter: blur(20px); }
.hero-art img { position: relative; display: block; width: 100%; height: auto; object-fit: contain; }
@media (max-width: 1100px) {
  .site-header { gap: 20px; }
  .main-nav { gap: 24px; }
  .prelaunch { display: none; }
  .hero { padding: 48px 32px 53px; min-height: 590px; }
  h1 { font-size: clamp(60px, 6.8vw, 77px); }
  .hero-art { margin-inline: -58px -54px; }
}
@media (max-width: 850px) {
  .site-header { height: 76px; }
  .main-nav { display: none; }
  .hero { padding: 43px 26px 48px; min-height: 540px; grid-template-columns: 1.15fr .85fr; }
  h1 { font-size: clamp(50px, 7.1vw, 64px); }
  .hero-description { font-size: 16px; max-width: 330px; margin-block: 23px 26px; }
  .hero-art { margin-inline: -54px -48px; }
  .hero-actions { gap: 19px; }
  .hero-actions .button { font-size: 13px; min-height: 46px; padding-inline: 20px; }
  .hero-explore { font-size: 13px; gap: 8px; }
}
@media (max-width: 620px) {
  .site-header { height: 72px; }
  .wordmark { font-size: 21px; }
  .brand-mark { width: 18px; height: 25px; }
  .header-actions .button { font-size: 12px; gap: 11px; min-height: 37px; padding: 9px 15px; }
  .hero { grid-template-columns: 1fr; padding: 33px 23px 10px; border-radius: 25px; min-height: 0; overflow: hidden; }
  .hero-eyebrow { margin-bottom: 25px; font-size: 12px; gap: 10px; }
  .hero-token { font-size: 12px; }
  h1 { font-size: clamp(34px, 9.4vw, 57px); line-height: 1.07; letter-spacing: -.025em; }
  .hero-description { max-width: 365px; margin: 22px 0 26px; font-size: 16px; line-height: 1.65; }
  .hero-actions { gap: 24px; }
  .hero-art { margin: 9px -24px 3px; }
  .hero-art img { max-height: 315px; }
  .hero-art::before { display: none; }
}

.hero-contract { display: flex; align-items: center; gap: 10px; margin-top: 22px; color: #41542c; font-size: 12px; }
.hero-contract button { border: 0; background: #ffffff40; color: #41542c; border-radius: 99px; padding: 6px 10px; font-size: 12px; }
.hero-contract button:not(:disabled) { color: #273817; cursor: pointer; }