:root {
  --crystal-ink: #111721;
  --crystal-surface: #171f2b;
  --crystal-panel: #222b38;
  --crystal-line: #3b4656;
  --crystal-muted: #b7c1ce;
  --crystal-bright: #eff3f8;
  --crystal-lavender: #b4a3d5;
  --crystal-silver: #d1d9e3;
}

.crystal-page,
.crystal-case-page {
  color: var(--crystal-bright);
  background: var(--crystal-ink);
}

.crystal-page a,
.crystal-case-page a { color: inherit; }

.crystal-header,
.crystal-footer,
.crystal-case-header,
.crystal-case-footer {
  display: flex;
  min-height: 76px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 max(24px, calc((100vw - 1320px) / 2));
}

.crystal-header { border-bottom: 1px solid var(--crystal-line); background: var(--crystal-ink); }

.crystal-brand { display: flex; flex-direction: column; gap: 2px; line-height: 1; }
.crystal-brand strong { font-size: 22px; letter-spacing: .18em; }
.crystal-brand small { color: var(--crystal-muted); font-size: 9px; font-weight: 800; letter-spacing: .18em; }

.crystal-nav { display: flex; align-items: center; gap: 28px; color: var(--crystal-muted); font-size: 14px; }
.crystal-nav a:hover { color: var(--crystal-bright); }
.crystal-header-link { display: inline-flex; min-height: 40px; align-items: center; padding: 0 14px; border: 1px solid var(--crystal-line); color: var(--crystal-silver); font-size: 13px; font-weight: 800; }
.crystal-header-link:hover { border-color: var(--crystal-lavender); color: var(--crystal-bright); }

.crystal-hero {
  display: grid;
  grid-template-columns: minmax(0, .87fr) minmax(0, 1.13fr);
  align-items: center;
  background: var(--crystal-surface);
}

.crystal-hero-copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 80px clamp(32px, 7vw, 124px); }
.crystal-eyebrow { margin: 0 0 20px; color: var(--crystal-lavender); font-size: 12px; font-weight: 800; letter-spacing: .16em; }
.crystal-hero h1 { max-width: 440px; margin: 0; font-size: clamp(45px, 4.2vw, 64px); line-height: 1.04; letter-spacing: -.065em; }
.crystal-hero-copy > p:not(.crystal-eyebrow) { max-width: 410px; margin: 25px 0 0; color: var(--crystal-muted); font-size: 17px; line-height: 1.75; }
.crystal-hero-visual { margin: 0; }
.crystal-hero-visual img { display: block; width: 100%; height: auto; }

.crystal-actions,
.crystal-case-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.crystal-button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: 9px; padding: 0 18px; border: 1px solid transparent; font-size: 14px; font-weight: 800; transition: transform 180ms ease, background 180ms ease, border-color 180ms ease; }
.crystal-button:hover { transform: translateY(-2px); }
.crystal-button:active { transform: translateY(0); }
.crystal-button-primary { color: var(--crystal-ink); background: var(--crystal-silver); }
.crystal-button-primary:hover { background: #fff; }
.crystal-button-secondary { border-color: var(--crystal-line); color: var(--crystal-bright); }
.crystal-button-secondary:hover { border-color: var(--crystal-lavender); }
.crystal-button-light { color: var(--crystal-ink); background: var(--crystal-lavender); }

.crystal-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .74fr); gap: clamp(36px, 8vw, 130px); align-items: end; padding: 106px max(24px, calc((100vw - 1320px) / 2)); border-bottom: 1px solid var(--crystal-line); }
.crystal-intro h2,
.crystal-section-heading h2,
.crystal-care h2,
.crystal-contact h2,
.crystal-case-scope h2,
.crystal-case-detail h2 { max-width: 620px; margin: 0; font-size: clamp(34px, 4.2vw, 59px); line-height: 1.03; letter-spacing: -.055em; }
.crystal-intro p,
.crystal-section-heading p,
.crystal-care > div > p,
.crystal-contact p,
.crystal-case-scope > div > p,
.crystal-case-detail p { margin: 0; color: var(--crystal-muted); line-height: 1.75; }

.crystal-collection { padding: 108px max(24px, calc((100vw - 1320px) / 2)); background: var(--crystal-ink); }
.crystal-section-heading { max-width: 600px; margin-bottom: 55px; }
.crystal-section-heading p { max-width: 420px; margin-top: 17px; }
.crystal-product-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .74fr); gap: clamp(22px, 4vw, 66px); align-items: start; }
.crystal-product { display: block; }
.crystal-product-offset { margin-top: 105px; }
.crystal-product img { display: block; width: 100%; height: auto; }
.crystal-product > div { padding-top: 20px; }
.crystal-product p { margin: 0; color: var(--crystal-lavender); font-size: 13px; font-weight: 800; }
.crystal-product h3 { margin: 8px 0 0; font-size: clamp(34px, 4vw, 54px); letter-spacing: -.055em; }
.crystal-product span { display: block; margin-top: 7px; color: var(--crystal-muted); font-size: 14px; }
.crystal-product a { display: inline-block; margin-top: 22px; color: var(--crystal-silver); font-weight: 800; }
.crystal-product a:hover { color: var(--crystal-lavender); }
.crystal-product a span { display: inline-block; margin: 0 0 0 4px; color: currentColor; transition: transform 180ms ease; }
.crystal-product a:hover span { transform: translateX(4px); }

.crystal-care { display: grid; grid-template-columns: minmax(0, .9fr) minmax(320px, 1fr); gap: clamp(36px, 8vw, 126px); align-items: center; padding: 110px max(24px, calc((100vw - 1320px) / 2)); background: var(--crystal-surface); }
.crystal-care figure { margin: 0; }
.crystal-care figure img { display: block; width: 100%; height: auto; }
.crystal-care > div > p { max-width: 520px; margin-top: 20px; }
.crystal-care dl { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 38px; max-width: 570px; margin: 36px 0 0; }
.crystal-care dl div:last-child { grid-column: span 2; }
.crystal-care dt { color: var(--crystal-lavender); font-size: 13px; font-weight: 800; }
.crystal-care dd { margin: 7px 0 0; color: var(--crystal-muted); font-size: 14px; line-height: 1.6; }

.crystal-contact { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: end; padding: 92px max(24px, calc((100vw - 1320px) / 2)); background: #2a3545; }
.crystal-contact p { max-width: 500px; margin-top: 19px; }

.crystal-footer { min-height: 96px; background: #0e131b; color: var(--crystal-muted); }
.crystal-footer > div { display: flex; gap: 14px; align-items: baseline; }
.crystal-footer strong { color: var(--crystal-bright); font-size: 18px; letter-spacing: .14em; }
.crystal-footer span,
.crystal-footer a { font-size: 13px; }
.crystal-footer a:hover { color: var(--crystal-bright); }

.crystal-case-header { min-height: 70px; border-bottom: 1px solid var(--crystal-line); color: var(--crystal-muted); font-size: 14px; font-weight: 800; }
.crystal-case-header a:hover { color: var(--crystal-bright); }
.crystal-case-hero { display: grid; grid-template-columns: minmax(320px, .75fr) minmax(0, 1.25fr); align-items: center; background: var(--crystal-surface); }
.crystal-case-hero > div { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 78px clamp(32px, 7vw, 114px); }
.crystal-case-hero > div > p:first-child { margin: 0; color: var(--crystal-lavender); font-size: 12px; font-weight: 800; letter-spacing: .14em; }
.crystal-case-hero h1 { margin: 21px 0 0; font-size: clamp(58px, 7vw, 98px); line-height: .92; letter-spacing: -.07em; }
.crystal-case-hero > div > span { margin-top: 13px; color: var(--crystal-silver); font-size: 16px; font-weight: 800; }
.crystal-case-hero > div > p:last-of-type { max-width: 410px; margin: 25px 0 0; color: var(--crystal-muted); line-height: 1.75; }
.crystal-case-hero > img { display: block; width: 100%; height: auto; }

.crystal-case-scope { display: grid; grid-template-columns: minmax(260px, .74fr) minmax(0, 1.26fr); gap: clamp(42px, 8vw, 132px); padding: 108px max(24px, calc((100vw - 1320px) / 2)); }
.crystal-case-scope > div > p { max-width: 360px; margin-top: 19px; }
.crystal-case-scope dl { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 44px; margin: 0; }
.crystal-case-scope dt { color: var(--crystal-lavender); font-size: 14px; font-weight: 800; }
.crystal-case-scope dd { margin: 9px 0 0; color: var(--crystal-muted); line-height: 1.7; }
.crystal-case-detail { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(290px, .9fr); align-items: center; gap: clamp(36px, 7vw, 112px); padding: 100px max(24px, calc((100vw - 1320px) / 2)); background: var(--crystal-surface); }
.crystal-case-detail img { display: block; width: 100%; height: auto; }
.crystal-case-detail p { max-width: 410px; margin-top: 20px; }
.crystal-case-detail a { display: inline-block; margin-top: 28px; color: var(--crystal-silver); font-weight: 800; }
.crystal-case-detail a:hover { color: var(--crystal-lavender); }
.crystal-case-footer { min-height: 86px; background: #0e131b; color: var(--crystal-muted); font-size: 13px; }
.crystal-case-footer a { color: var(--crystal-silver); font-weight: 800; }
.crystal-case-footer a:hover { color: var(--crystal-lavender); }

@media (max-width: 900px) {
  .crystal-hero,
  .crystal-case-hero,
  .crystal-care,
  .crystal-case-scope,
  .crystal-case-detail { grid-template-columns: 1fr; }
  .crystal-hero-copy { padding: 78px max(24px, 9vw) 55px; }
  .crystal-product-grid { gap: 30px; }
  .crystal-product-offset { margin-top: 64px; }
  .crystal-care { gap: 48px; }
  .crystal-case-scope { gap: 42px; }
}

@media (max-width: 680px) {
  .crystal-header,
  .crystal-footer,
  .crystal-case-header,
  .crystal-case-footer { min-height: 67px; padding: 0 18px; }
  .crystal-nav { display: none; }
  .crystal-header-link { min-height: 38px; padding: 0 11px; font-size: 12px; }
  .crystal-hero h1 { font-size: clamp(46px, 14vw, 64px); }
  .crystal-hero-copy > p:not(.crystal-eyebrow) { font-size: 16px; }
  .crystal-intro,
  .crystal-collection,
  .crystal-care,
  .crystal-contact,
  .crystal-case-scope,
  .crystal-case-detail { grid-template-columns: 1fr; gap: 27px; padding: 72px 18px; }
  .crystal-intro h2,
  .crystal-section-heading h2,
  .crystal-care h2,
  .crystal-contact h2,
  .crystal-case-scope h2,
  .crystal-case-detail h2 { font-size: 39px; }
  .crystal-product-grid { grid-template-columns: 1fr; }
  .crystal-product-offset { margin-top: 22px; }
  .crystal-care dl,
  .crystal-case-scope dl { grid-template-columns: 1fr; gap: 20px; }
  .crystal-care dl div:last-child { grid-column: auto; }
  .crystal-contact .crystal-button { width: 100%; }
  .crystal-footer { align-items: flex-start; flex-direction: column; justify-content: center; gap: 9px; }
  .crystal-footer > div { gap: 11px; flex-wrap: wrap; }
  .crystal-case-hero > div { padding: 67px 18px 48px; }
  .crystal-case-hero h1 { font-size: 70px; }
  .crystal-case-footer { flex-direction: column; justify-content: center; align-items: flex-start; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .crystal-button,
  .crystal-product a span { transition: none; }
  .crystal-button:hover,
  .crystal-button:active,
  .crystal-product a:hover span { transform: none; }
}