/* MetaMask Card — full-page clone (metamask.io/en-GB/card) */

body.has-fixed-nav {
  --header-offset: 7.2rem;
}

body.has-fixed-nav .hero {
  padding-top: var(--nav-spacer, 0);
}

@font-face {
  font-family: "MMEuclidCircularB";
  src: url("https://metamask.io/_next/static/media/ea533aa8097cccf0-s.p.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "MMEuclidCircularB";
  src: url("https://metamask.io/_next/static/media/31ed70c509aa5870-s.p.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: auto;
  font-size: 10px;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.6rem;
  line-height: 1.5;
  color: var(--black);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overscroll-behavior-y: none;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

/* Buttons → css/components.css */

/* ========== HERO ========== */
.hero {
  background: var(--green-light);
  color: var(--green-dark);
  padding-bottom: clamp(56px, 8vw, 96px);
  overflow: hidden;
}

.nav-pill {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 8px 12px;
  width: calc(100% - var(--page-pad) * 2);
  max-width: var(--wrap);
  margin: 1.6rem auto 0;
  padding: 1rem 1rem 1rem 2.2rem;
  background: var(--white);
  border-radius: 999px;
  box-shadow: 0 4px 28px rgba(1, 51, 48, 0.1);
  transition:
    box-shadow 0.35s cubic-bezier(0.25, 0.1, 0.25, 1),
    top 0.35s cubic-bezier(0.25, 0.1, 0.25, 1);
  will-change: box-shadow;
}

.nav-pill.is-scrolled {
  position: fixed;
  top: 1.2rem;
  left: var(--page-pad);
  right: var(--page-pad);
  width: auto;
  margin: 0 auto;
  max-width: var(--wrap);
  z-index: 200;
  box-shadow: 0 12px 48px rgba(1, 51, 48, 0.14);
}

.nav-pill__logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 1.6rem;
  text-decoration: none;
  color: var(--black);
}

.nav-pill__actions {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  flex: 0 0 auto;
  margin-left: auto;
  min-width: 0;
}

.nav-pill__links {
  display: none;
  align-items: center;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
  justify-content: center;
  margin: 0;
}
.nav-pill__links a {
  padding: 8px 14px;
  font-size: 1.4rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--black);
  border-radius: 999px;
  transition: background 0.25s, color 0.25s;
}
.nav-pill__links a:hover { background: #f3f4f6; }

@media (min-width: 900px) {
  .nav-pill__links {
    display: flex;
  }
}

@media (max-width: 520px) {
  .nav-pill {
    padding-right: 0.8rem;
    gap: 6px 8px;
  }

  .nav-pill__logo span {
    display: none;
  }
}

.hero__grid {
  display: grid;
  gap: 32px;
  align-items: end;
  padding-top: clamp(28px, 5vw, 48px);
}

@media (min-width: 900px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
    gap: 3.2rem 6.4rem;
    align-items: center;
    min-height: clamp(52rem, 72vh, 68rem);
    padding-top: clamp(4rem, 6vw, 7.2rem);
  }

  .hero__text {
    padding-bottom: 2.4rem;
    padding-left: clamp(5rem, 5.2vw, 7rem);
  }

  .hero__media {
    align-self: start;
  }

  .hero__float-wrap {
    margin-left: calc(-1.55rem - 1cm);
    margin-top: calc(0.55rem + 0.5cm);
  }

}

.hero__title {
  margin: 0 0 2rem;
  font-size: clamp(4.3rem, 10.2vw, 10.6rem);
  font-weight: 400;
  line-height: 0.86;
  text-transform: uppercase;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

html.fonts-pending .hero__title {
  visibility: hidden;
}

html.fonts-ready .hero__title {
  visibility: visible;
}

.hero__line {
  display: block;
  overflow: hidden;
}

.hero__line--1 { transform: translateX(-0.01em); }
.hero__line--2 { transform: translateX(0.015em); }
.hero__line--3 { transform: translateX(-0.005em); }

.hero__title span { display: block; }

.hero__promo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.8rem;
  margin-bottom: 1.8rem;
  max-width: 38rem;
}

.hero__promo-text + .hero__promo-note {
  margin-top: -0.2rem;
}

.hero__promo-badge {
  display: inline-block;
  padding: 0.45rem 1.1rem;
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--green);
  color: var(--green-dark);
  border-radius: 999px;
  line-height: 1.2;
}

.hero__promo-text {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.45;
  color: var(--green-dark);
}

.hero__promo-text strong {
  font-weight: 700;
  letter-spacing: -0.02em;
  background: linear-gradient(180deg, transparent 72%, rgba(186, 242, 74, 0.45) 72%);
  padding: 0 0.08em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.hero__promo-note {
  margin: 0;
  font-size: var(--type-caption);
  line-height: 1.4;
  color: var(--gray);
}

.hero__lead {
  margin: 0 0 2.8rem;
  font-size: var(--type-body);
  line-height: 1.4;
  max-width: 26em;
}

.hero__cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
}

.hero__hint { margin: 0; font-size: var(--type-caption); color: var(--gray); }
.hero__hint.is-ok { color: #15803d; font-weight: 600; }

.hero__media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 280px;
}

.hero__shape {
  position: absolute;
  width: min(100%, 520px);
  height: 88%;
  right: 0;
  top: 8%;
  background: var(--green-dark);
  clip-path: polygon(22% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 18%);
  z-index: 0;
}

.hero__float-wrap {
  position: relative;
  z-index: 1;
}

.hero__cards {
  width: min(100%, 580px);
  filter: drop-shadow(0 32px 64px rgba(0, 0, 0, 0.22));
}

@media (max-width: 899px) {
  .hero__grid {
    padding-top: 2.4rem;
    min-height: auto;
  }

  .hero__text { text-align: center; }
  .hero__promo { align-items: center; margin-left: auto; margin-right: auto; }
  .hero__lead { margin-left: auto; margin-right: auto; }
  .hero__cta { align-items: center; margin: 0 auto; }
  .hero__shape { width: 110%; right: -5%; }
  .hero__cards { max-width: min(100%, 42rem); margin: 0 auto; }
  .hero__float-wrap { transform: none; }
}

/* ========== FEATURES (horizontal scroll — metamask.io/card) ========== */
.features {
  background: var(--green-light);
  padding: clamp(48px, 7vw, 72px) 0 0;
  color: var(--green-dark);
}

.features:has(.features__scroll--active) {
  padding-bottom: 0;
}

.features__header {
  padding-bottom: clamp(20px, 3vw, 32px);
}

.features__scroll--active .features__sticky {
  position: sticky;
  top: var(--features-sticky-top, calc(50vh - 24rem));
  min-height: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 0 0 clamp(20px, 3vw, 32px);
  box-sizing: border-box;
  contain: layout style;
  backface-visibility: hidden;
}

.features__scroll--active .features__viewport {
  overflow: hidden;
  scroll-snap-type: none;
}

.features__scroll--active .features__track {
  transform: translate3d(var(--features-x, 0), 0, 0);
  backface-visibility: hidden;
}

body.is-scrolling .features__scroll--pinning .features__track {
  will-change: transform;
}

.features__inner {
  width: 100%;
}

.features__title {
  margin: 0;
  max-width: 18em;
  font-size: var(--type-h2);
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: -0.03em;
  color: var(--green-dark);
  text-align: left;
}

.features__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 3cm;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin: 0 calc(var(--pad) * -1);
  padding: 0 var(--pad);
}

.features__viewport::-webkit-scrollbar {
  display: none;
}

.features__track {
  display: flex;
  align-items: flex-start;
  gap: var(--card-gap);
  width: max-content;
}

.features__track.is-scrolling .fcard {
  transition: none;
}

.fcard {
  display: flex;
  flex-direction: column;
  flex: 0 0 var(--card-w);
  width: var(--card-w);
  min-width: 0;
  scroll-snap-align: start;
}

.fcard:first-child {
  margin-inline-start: max(0px, calc(3cm - var(--pad)));
}

.fcard:last-child {
  margin-inline-end: max(0px, calc(3cm - var(--pad)));
}

.fcard__visual {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  aspect-ratio: 388 / 448;
  border-radius: var(--card-radius);
  overflow: hidden;
  box-sizing: border-box;
  background-color: var(--green-dark);
}

/* Угловатый low-poly объём (как грани лисы MetaMask), без мягких бликов */
.fcard__visual::before,
.fcard__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  pointer-events: none;
  z-index: 0;
  filter: none;
  opacity: 1;
}

/* Палитры по блокам: грани по углам, спокойный центр под мокап */
.fcard--1 .fcard__visual {
  background-color: #0c3431;
  background-image:
    radial-gradient(ellipse 72% 64% at 50% 54%, #123f3a 0%, #0c3431 58%, transparent 80%),
    linear-gradient(145deg, #1e5a52 0%, #1e5a52 16%, transparent 16%),
    linear-gradient(228deg, #0a2624 0%, #0a2624 18%, transparent 18%),
    linear-gradient(18deg, #081f1e 0%, #0c3431 100%);
}

.fcard--1 .fcard__visual::before {
  background: linear-gradient(158deg, #2a6f62 0%, #174a42 100%);
  clip-path: polygon(0 0, 52% 0, 28% 36%, 0 48%);
}

.fcard--1 .fcard__visual::after {
  background: linear-gradient(208deg, #c47a42 0%, #9f5a28 100%);
  clip-path: polygon(100% 0, 100% 40%, 62% 24%, 78% 0);
}

.fcard--2 .fcard__visual {
  background-color: #c5e086;
  background-image:
    radial-gradient(ellipse 70% 62% at 50% 52%, #d8eca8 0%, #c5e086 55%, transparent 78%),
    linear-gradient(150deg, #eef6c8 0%, #eef6c8 18%, transparent 18%),
    linear-gradient(240deg, #8fb84a 0%, #8fb84a 16%, transparent 16%),
    linear-gradient(180deg, #b8d972 0%, #c5e086 100%);
}

.fcard--2 .fcard__visual::before {
  background: linear-gradient(152deg, #f2f9dc 0%, #b9d86a 100%);
  clip-path: polygon(0 0, 48% 0, 22% 32%, 0 44%);
}

.fcard--2 .fcard__visual::after {
  background: linear-gradient(196deg, #6fa038 0%, #4f7c28 100%);
  clip-path: polygon(100% 0, 100% 100%, 34% 58%, 58% 0);
}

.fcard--3 .fcard__visual {
  background-color: #9ec5e8;
  background-image:
    radial-gradient(ellipse 72% 64% at 50% 50%, #b8d8f4 0%, #9ec5e8 52%, transparent 78%),
    linear-gradient(138deg, #dceefb 0%, #dceefb 17%, transparent 17%),
    linear-gradient(222deg, #5a8fbf 0%, #5a8fbf 15%, transparent 15%),
    linear-gradient(180deg, #8eb8dc 0%, #9ec5e8 100%);
}

.fcard--3 .fcard__visual::before {
  background: linear-gradient(162deg, #e6f2fc 0%, #6a9ec8 100%);
  clip-path: polygon(0 0, 46% 0, 18% 38%, 0 52%);
}

.fcard--3 .fcard__visual::after {
  background: linear-gradient(214deg, #4a7da8 0%, #356189 100%);
  clip-path: polygon(100% 0, 100% 46%, 56% 30%, 74% 0);
}

.fcard--4 .fcard__visual {
  background-color: #b396d4;
  background-image:
    radial-gradient(ellipse 70% 62% at 50% 52%, #c9aedf 0%, #b396d4 54%, transparent 78%),
    linear-gradient(128deg, #d9c2ec 0%, #d9c2ec 16%, transparent 16%),
    linear-gradient(212deg, #8f6bab 0%, #8f6bab 14%, transparent 14%),
    linear-gradient(18deg, #a684c8 0%, #b396d4 100%);
}

.fcard--4 .fcard__visual::before {
  background: linear-gradient(166deg, #efe0f8 0%, #c9a0e0 100%);
  clip-path: polygon(0 0, 50% 0, 24% 40%, 0 54%);
}

.fcard--4 .fcard__visual::after {
  background: linear-gradient(210deg, #d8843c 0%, #b86528 55%, #9a4e18 100%);
  clip-path: polygon(100% 0, 100% 48%, 54% 32%, 72% 0);
}

.fcard__visual img {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 20px 40px rgba(1, 51, 48, 0.22));
  pointer-events: none;
  user-select: none;
}

.features__scroll--active .fcard__visual img {
  transform: translateZ(0);
}

.fcard__body {
  flex: 0 0 auto;
  padding: 1.6rem 0 0;
  width: 100%;
  box-sizing: border-box;
}

.fcard__body h3 {
  margin: 0 0 0.6rem;
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.fcard__body p {
  margin: 0;
  font-size: 1.6rem;
  line-height: 1.5;
  color: var(--gray);
  max-width: 36em;
}

@media (max-width: 767px) {
  .features__title {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ========== PRICING ========== */
.pricing {
  position: relative;
  z-index: 0;
  background: var(--green-dark);
  color: var(--green-dark);
  padding: 0 0 clamp(56px, 10vw, 96px);
}

.pricing.has-flap-top .pricing__wrap {
  padding-top: clamp(3.2rem, 5vw, 5.6rem);
}

.pricing__sentinel {
  position: relative;
  width: 100%;
  height: 1px;
  margin: 0;
  pointer-events: none;
  visibility: hidden;
}

.pricing .pricing__wrap,
.lifestyle > .wrap,
.metal > .wrap,
.faq > .wrap,
.features__header {
  max-width: var(--wrap);
}

.pricing__sheet {
  background: var(--white);
  border-radius: 0;
  overflow: visible;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.2);
  border: none;
  transform-origin: 50% 20%;
}

.pricing__table {
  overflow: hidden;
  border-radius: 0 0 16px 16px;
}

.pricing__head {
  display: grid;
  overflow: visible;
  border-bottom: 1px solid var(--gray-border);
}

@media (min-width: 768px) {
  .pricing__head {
    grid-template-columns: 1.15fr 1fr 1fr;
  }
}

.pricing__intro {
  padding: 28px 24px;
  border-bottom: 1px solid var(--gray-border);
}

@media (min-width: 768px) {
  .pricing__intro {
    border-bottom: none;
    border-right: 1px solid var(--gray-border);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    grid-row: span 1;
  }
}

.pricing__h2 {
  margin: 0 0 0.8rem;
  font-size: var(--type-h2);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.16;
}

.pricing__intro p {
  margin: 0.8rem 0 0;
  font-size: var(--type-body-sm);
  color: var(--gray);
  line-height: 1.5;
}

.pricing__plan {
  padding: 24px 16px 28px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
  overflow: visible;
  border-bottom: 1px solid var(--gray-border);
}

.pricing__plan .btn {
  width: 100%;
  max-width: 220px;
}

@media (min-width: 768px) {
  .pricing__plan {
    border-bottom: none;
    border-right: 1px solid var(--gray-border);
  }

  .pricing__plan:last-child {
    border-right: none;
  }
}

body.is-wallet-connected .btn-connect.is-connected .btn__label {
  letter-spacing: 0.01em;
}

.pricing__plan--metal {
  background: linear-gradient(180deg, #f4fae8 0%, #fff 55%);
}

.pricing__card-visual {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
}

.pricing__card-visual img {
  height: 9.6rem;
  width: auto;
  max-width: 92%;
  object-fit: contain;
  filter: drop-shadow(0 20px 40px rgba(1, 51, 48, 0.22));
  pointer-events: none;
}

.pricing__card-visual--metal img {
  height: 11.2rem;
}

.pricing__tier {
  margin: 0;
  font-weight: 600;
  font-size: 1.7rem;
}

.pricing__tag {
  display: inline-block;
  margin: 6px 0 18px;
  padding: 0.35rem 1rem;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--green-dark);
  background: var(--green);
  border-radius: 999px;
}

.pricing__group {
  padding: 10px 24px;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green-dark);
  background: #f4f6f9;
  border-bottom: 1px solid var(--gray-border);
}

.pricing__row {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 0.8fr;
  gap: 8px;
  padding: 12px 24px;
  align-items: center;
  font-size: 1.4rem;
  border-bottom: 1px solid var(--gray-border);
  transition: background 0.25s ease;
}

.pricing__row:not(.pricing__row--head):hover {
  background: #f8fafc;
}

.pricing__row > span:first-child { font-weight: 500; }
.pricing__row > span:not(:first-child) { text-align: center; color: var(--gray); }

@media (min-width: 768px) {
  .pricing__row > span:nth-child(3) {
    background: rgba(186, 242, 74, 0.05);
  }
  .pricing__row--head > span:nth-child(3) {
    background: rgba(186, 242, 74, 0.08);
  }
}

.pricing__row .ok {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--green-light);
  color: var(--green-dark);
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1;
}

.pricing__row .na { opacity: 0.35; font-weight: 500; }
.pricing__row:last-child { border-bottom: none; }

.pricing__row--head {
  font-size: 1.2rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gray);
  background: #fafbfc;
}

.pricing__row--head span:not(:first-child) {
  color: var(--green-dark);
}

.pricing__note {
  margin: 2.4rem 0 0;
  padding-top: 0.4rem;
  text-align: center;
  font-size: 1.2rem;
  line-height: 1.45;
  color: rgba(229, 255, 195, 0.65);
}

@media (max-width: 767px) {
  .pricing__head {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .pricing__intro {
    grid-column: 1 / -1;
  }
}

@media (max-width: 600px) {
  .pricing__row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .pricing__row > span:not(:first-child) {
    text-align: left;
    padding-left: 12px;
    font-size: 1.3rem;
  }
  .pricing__row > span:nth-child(2)::before { content: "Virtual: "; font-weight: 600; }
  .pricing__row > span:nth-child(3)::before { content: "Metal: "; font-weight: 600; }
}

/* ========== LIFESTYLE ========== */
.lifestyle {
  background: var(--green-dark);
  color: var(--green-light);
  padding: clamp(56px, 10vw, 96px) 0;
}

.lifestyle__title {
  margin: 0 0 4.8rem;
  font-size: var(--type-h2);
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: -0.03em;
  text-align: center;
  color: var(--white);
  max-width: 16em;
  margin-left: auto;
  margin-right: auto;
}

.lifestyle__grid {
  display: grid;
  gap: 24px;
}

@media (min-width: 768px) {
  .lifestyle__grid { grid-template-columns: 1fr 1fr; }
}

.lcard {
  background: var(--green-light);
  color: var(--green-dark);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition:
    transform 0.55s var(--spring-ease),
    box-shadow 0.55s var(--spring-ease);
}

.lcard:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 64px rgba(0, 0, 0, 0.22);
}

.lcard > img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  object-position: center bottom;
  padding: 20px 20px 0;
  background: var(--green-light);
}

.lcard__inner {
  padding: 24px 20px 28px;
}

.lcard__inner h3 {
  margin: 0 0 10px;
  font-size: var(--type-h3);
  font-weight: 600;
  line-height: 1.2;
}

.lcard__inner p {
  margin: 0 0 2.2rem;
  font-size: var(--type-body-sm);
  line-height: 1.45;
  color: var(--gray);
}

/* ========== GO METAL ========== */
.metal {
  background: var(--green-dark);
  color: var(--green-light);
  padding: clamp(64px, 12vw, 120px) 0;
  overflow: hidden;
}

.metal__grid {
  display: grid;
  gap: 40px;
  align-items: center;
}

@media (min-width: 900px) {
  .metal__grid { grid-template-columns: 1fr 1fr; gap: 48px; }
}

.metal__eyebrow {
  margin: 0 0 1.6rem;
  font-size: clamp(4rem, 10vw, 10rem);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--green);
  text-transform: uppercase;
}

.metal__title {
  margin: 0 0 2rem;
  font-size: clamp(2.4rem, 3.5vw, 3.6rem);
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: -0.03em;
  color: var(--white);
}

.metal__copy .btn {
  margin-top: 0.4rem;
}

.metal__lead {
  margin: 0 0 3.2rem;
  font-size: var(--type-body);
  line-height: 1.5;
  opacity: 0.9;
  max-width: 28em;
}

.metal__visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 320px;
}

.metal__shape {
  position: absolute;
  width: min(100%, 440px);
  height: 80%;
  right: 0;
  top: 10%;
  background: var(--green);
  clip-path: polygon(18% 0%, 100% 2%, 92% 100%, 0% 88%);
  opacity: 0.95;
}

.metal__visual img {
  position: relative;
  z-index: 1;
  max-width: min(100%, 420px);
  filter: drop-shadow(0 24px 48px rgba(0, 0, 0, 0.35));
}

/* ========== FAQ ========== */
.faq {
  background: var(--green-light);
  padding: clamp(56px, 10vw, 96px) 0;
}

.faq__grid {
  display: grid;
  gap: 32px;
}

@media (min-width: 900px) {
  .faq__grid {
    grid-template-columns: 0.85fr 1.15fr;
    gap: 48px 64px;
    align-items: start;
  }
}

.faq__heading h2 {
  margin: 0 0 1.6rem;
  font-size: var(--type-h2);
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: -0.03em;
  color: var(--green-dark);
}

.faq__more {
  margin: 0 0 0.8rem;
  font-size: var(--type-body-sm);
  color: var(--gray);
  line-height: 1.5;
}

.faq__more a {
  color: var(--green-dark);
  font-weight: 600;
}

.faq__list {
  border-top: 1px solid rgba(1, 51, 48, 0.15);
}

.faq__item {
  border-bottom: 1px solid rgba(1, 51, 48, 0.15);
  transition: background 0.3s ease;
}

.faq__item[open] {
  background: rgba(255, 255, 255, 0.55);
  border-radius: 12px;
  margin: 0 -12px;
  padding: 0 12px;
  border-bottom-color: transparent;
}

.faq__item summary {
  padding: 18px 0;
  font-weight: 600;
  font-size: var(--type-body-sm);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: var(--green-dark);
}

.faq__item summary::-webkit-details-marker { display: none; }

.faq__item summary::after {
  content: "+";
  font-size: 2rem;
  font-weight: 400;
  flex-shrink: 0;
  line-height: 1;
}

.faq__item[open] summary::after { content: "−"; }

.faq__item p {
  margin: 0 0 18px;
  font-size: var(--type-body-sm);
  line-height: 1.55;
  color: var(--gray);
}

/* ========== FOOTER ========== */
.site-footer {
  background: var(--white);
  border-top: 1px solid var(--gray-border);
  padding: 48px 0 24px;
}

.site-footer__grid {
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .site-footer__grid {
    grid-template-columns: 1.2fr repeat(4, 1fr);
    gap: 24px;
  }
}

.site-footer__logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.8rem;
  text-decoration: none;
  color: var(--black);
}

.site-footer__label {
  margin: 0 0 12px;
  font-size: 1.2rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gray);
}

.site-footer__col a {
  display: block;
  margin-bottom: 8px;
  font-size: 1.4rem;
  text-decoration: none;
  color: var(--black);
}

.site-footer__col a:hover { text-decoration: underline; }

.site-footer__col a.is-active {
  color: var(--green-dark);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.site-footer__bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--gray-border);
  font-size: 1.3rem;
  color: var(--gray);
}

.site-footer__bar a { color: var(--green-dark); font-weight: 500; }

/* ========== DOCK & TOAST ========== */
.dock { display: none; }

@media (max-width: 899px) {
  body { padding-bottom: 76px; }
  .dock {
    display: block;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 90;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.97);
    border-top: 1px solid var(--gray-border);
    backdrop-filter: blur(10px);
  }
}

.toast {
  position: fixed;
  bottom: 88px;
  left: 50%;
  transform: translateX(-50%) translateY(16px);
  padding: 12px 18px;
  background: var(--black);
  color: var(--white);
  font-size: 1.4rem;
  border-radius: 10px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
  z-index: 200;
  max-width: 90vw;
  text-align: center;
}

.toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@media (min-width: 900px) {
  .toast { bottom: 24px; }
}