/* Metal Custody: a Metallicus product site, set to metallicus.com's
   measurements: Inter at 14px/500 for text and tight display headings,
   boxed uppercase eyebrows, dark buttons (white only for Contact),
   borderless cards, alternating section bands, and the Metallicus
   spectrum on the logo and the stats. */
:root {
  --bg: #000; --band: #0a0a0a; --card: #0a0a0a; --card-2: #111; --line: #171717; --line-2: #242424;
  --ink: #fff; --ink-2: #d6d6d6; --muted: #9a9a9a; --blue: #0099ff;
  --spectrum: linear-gradient(90deg, #7013c5, #7543e3, #f94e6c, #fc9237, #ffd305, #20bf55);
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --mono: "Fragment Mono", ui-monospace, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: linear-gradient(#080808 0%, #000 80%, #080e17 100%); color: var(--ink-2); font: 500 14px/1.6 var(--sans); letter-spacing: -.035em; font-optical-sizing: auto; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--ink); }
a:focus-visible, .btn:focus-visible, summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.skip { position: absolute; left: -999px; top: 8px; background: #fff; color: #000; padding: 8px 12px; border-radius: 8px; }
.skip:focus { left: 16px; z-index: 50; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.wrap { max-width: 1200px; margin: 0 auto; padding-inline: 64px; }
h1, h2, h3 { margin: 0; color: var(--ink); font-weight: 600; text-wrap: balance; }
h1 { font-size: clamp(34px, 4.5vw, 64px); line-height: 1.1; letter-spacing: -.043em; }
h2 { font-size: clamp(28px, 3vw, 40px); line-height: 1.3; letter-spacing: -.044em; }
h3 { font-size: 18px; font-weight: 500; line-height: 1.3; letter-spacing: -.055em; }
p { margin: 0; }

.pill { display: inline-block; font: 600 12px/18px var(--sans); letter-spacing: 2px; text-transform: uppercase; color: var(--ink);
  border: 1px solid rgba(255,255,255,.05); border-radius: 8px; padding: 10px; margin-bottom: 20px; }
.btn { display: inline-flex; align-items: center; gap: 8px; min-height: 33px; padding: 8px 12px; border-radius: 8px; background: #242424;
  color: #fff; text-decoration: none; font: 600 14px/1.2 var(--sans); letter-spacing: -.03em; border: 0; transition: background .2s; }
.btn:hover { background: #292929; }
.btn.ghost { background: transparent; box-shadow: inset 0 0 0 1px #242424; }
.btn.ghost:hover { background: #111; }
.btn.white { background: #fff; color: #000; }
.btn.white:hover { background: #e8e8e8; }
.btn .arr { color: var(--muted); }
.cta { display: flex; gap: 12px; flex-wrap: wrap; }

.nav { background: #000; position: relative; z-index: 30; }
.nav-in { display: flex; justify-content: space-between; align-items: center; min-height: 72px; gap: 16px; max-width: none; padding-inline: 24px; }
.brand { display: flex; align-items: center; gap: 14px; }
.mark img { display: block; height: 32px; width: auto; }
.product { color: #fff; text-decoration: none; font-weight: 600; font-size: 17px; letter-spacing: -.03em; padding-left: 14px; border-left: 1px solid var(--line-2); line-height: 26px; white-space: nowrap; }
.nav .links { display: flex; align-items: center; gap: 32px; font-size: 14px; margin-left: auto; margin-right: 8px; }
.nav .links a { color: var(--muted); text-decoration: none; white-space: nowrap; }
.nav .links a:hover { color: #fff; }

.hero { position: relative; overflow: hidden; padding-block: 120px 128px; }
.hero-grid { position: relative; }
.hero-in { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; max-width: 560px; }
.lede { font-size: 16px; color: var(--ink-2); }
.visual { position: absolute; top: -120px; right: -150px; width: 700px; margin: 0; pointer-events: none; }
.globe { width: 100%; aspect-ratio: 1; display: block; }
.globe-caption { position: absolute; left: 0; right: 0; bottom: 36px; text-align: center; font: 400 12px/1 var(--mono); letter-spacing: 2px; text-transform: uppercase; color: var(--muted); }

.section { padding-block: 128px; }
.band { background: var(--band); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; }
.prose { display: flex; flex-direction: column; gap: 16px; font-size: 16px; }
.prose a, .faq a { color: var(--blue); }

.showcase { position: relative; margin: 0; padding-bottom: 56px; }
.showcase .desk, .frame img { border-radius: 12px; }
.showcase .desk { box-shadow: 0 40px 120px -40px rgba(0,153,255,.35); }
.showcase .phone { position: absolute; right: 3%; bottom: 0; width: 22%; border-radius: 24px; border: 6px solid #1c1c1c; box-shadow: 0 30px 60px -20px rgba(0,0,0,.7); }
.frame { margin: 32px 0 0; padding: 16px; border-radius: 16px; background: linear-gradient(180deg, #0c1830, #000); }

.steps { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.steps li, .card, .networks li { background: var(--card-2); border-radius: 16px; padding: 24px; transition: background .3s; }
.band .steps li, .band .card, .band .networks li { background: #000; }
.steps li { display: flex; flex-direction: column; gap: 10px; }
.steps .n { font: 400 12px/1 var(--mono); color: var(--blue); letter-spacing: 0; }
.steps p, .card p { color: var(--muted); }
.card:hover, .steps li:hover { background: transparent; }

.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 40px; }
.card { display: flex; flex-direction: column; gap: 10px; }
.card.lit { background: linear-gradient(180deg, rgba(0,153,255,.1), #000 70%); }
.tag { font: 600 12px/18px var(--sans); color: var(--blue); text-transform: uppercase; letter-spacing: 2px; }
.card dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 6px 0 0; }
.card dt { color: var(--muted); }
.card dd { margin: 0; color: var(--ink); }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.pair .frame { margin: 0; }

.compare-wrap { overflow-x: auto; margin-top: 12px; border-radius: 16px; background: #000; }
.compare { border-collapse: collapse; width: 100%; }
.compare th, .compare td { padding: 16px 24px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.compare thead th { font: 600 12px/18px var(--sans); text-transform: uppercase; letter-spacing: 2px; color: var(--muted); }
.compare tbody th { font-weight: 500; white-space: nowrap; color: var(--ink-2); }
.compare td { color: var(--muted); }
.compare td:last-child { color: #fff; }
.compare tr:last-child th, .compare tr:last-child td { border-bottom: 0; }

.networks { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.networks li { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; min-height: 150px; color: #fff; font-size: 16px; }
.networks li.metal { border: 1.5px solid transparent; background: linear-gradient(#000, #000) padding-box, var(--spectrum) border-box; }
.networks li.dim { color: var(--muted); }
.networks li.dim .ico { opacity: .55; }
.networks .icons { display: flex; gap: 10px; }
.networks .nm { flex: 1; }
.networks em { font: 600 12px/18px var(--sans); font-style: normal; text-transform: uppercase; letter-spacing: 2px; color: var(--muted); }
.networks em.on { color: #20bf55; }
.networks .wide { height: 32px; width: auto; }
.ico { width: 32px; height: 32px; flex: none; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.note { margin-top: 16px; font-size: 12px; color: var(--muted); }

.phones { display: grid; grid-template-columns: repeat(3, minmax(0, 220px)); justify-content: center; gap: 24px; margin-top: 64px; }
.phones img { border-radius: 24px; border: 6px solid #1c1c1c; }

.faq { display: flex; flex-direction: column; }
.faq details { border-bottom: 1px solid var(--line-2); padding: 20px 0; }
.faq details:first-child { border-top: 1px solid var(--line-2); }
.faq summary { cursor: pointer; color: #fff; font-weight: 500; font-size: 18px; letter-spacing: -.04em; list-style: none; display: flex; justify-content: space-between; gap: 16px; min-height: 28px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--muted); font-weight: 400; }
.faq details[open] summary::after { content: "–"; }
.faq p { margin-top: 10px; color: var(--muted); }

.closing { background: radial-gradient(ellipse at 50% 120%, rgba(0,153,255,.18), transparent 60%); }
.closing-in { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.closing p { max-width: 36em; font-size: 16px; }

.foot { border-top: 1px solid var(--line); padding-block: 64px 32px; background: #000; }
.foot-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; }
.foot h4 { margin: 0 0 14px; font: 500 12px/18px var(--sans); letter-spacing: 0; color: var(--muted); }
.foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.foot ul a { color: #fff; text-decoration: none; }
.foot ul a:hover { color: var(--ink-2); }
.foot .mark img { height: 28px; }
.foot-base { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-top: 56px; font-size: 12px; color: var(--muted); }
.foot-base p { max-width: 60em; }

/* Scroll reveal, only when scripts run and motion is welcome. */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s cubic-bezier(.2,.8,.2,1), transform .6s cubic-bezier(.2,.8,.2,1); }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } }

@media (max-width: 1100px) {
  .visual { right: -260px; opacity: .8; }
}
@media (max-width: 960px) {
  .split { grid-template-columns: 1fr; gap: 24px; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards { grid-template-columns: 1fr; }
  .networks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-grid { grid-template-columns: repeat(2, 1fr); }
  .nav-in { flex-wrap: wrap; }
  .nav .links { order: 3; flex-basis: 100%; margin: 0 -24px; padding: 0 24px 14px; gap: 22px; overflow-x: auto; scrollbar-width: none; }
  .nav .links::-webkit-scrollbar { display: none; }
}
@media (max-width: 810px) {
  .wrap { padding-inline: 24px; }
  .section { padding-block: 64px; }
  .hero { padding-block: 48px 48px; }
  .visual { margin-top: 24px !important; }
  .visual { position: relative; top: 0; right: 0; width: min(340px, 90%); margin: 0 auto 8px; opacity: 1; }
  .globe-caption { bottom: 8px; }
}
@media (max-width: 560px) {
  .btn { min-height: 40px; }
      .steps, .pair { grid-template-columns: 1fr; }
  .phones { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .phones img { border-width: 3px; border-radius: 14px; }
  .showcase .phone { width: 30%; border-width: 4px; }
  .mark img { height: 22px; } .product { font-size: 14px; padding-left: 10px; } .brand { gap: 10px; }
  .nav-in > .btn.white { min-height: 34px; padding: 6px 10px; font-size: 13px; }
  .nav-in { padding-inline: 16px; padding-top: 14px; min-height: 0; row-gap: 14px; }
  .nav .links { margin: 0 -16px; padding: 0 16px 12px; }
  .pill { letter-spacing: 1.5px; }
  .frame { padding: 8px; }
}

.status { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
.status .dot { width: 8px; height: 8px; border-radius: 50%; background: #20bf55; box-shadow: 0 0 0 4px rgba(32,191,85,.15); flex: none; }
.showcase figcaption, .frame figcaption { margin-top: 14px; font-size: 13px; color: var(--muted); }
.showcase figcaption { max-width: 60%; }
.steps.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card ul { margin: 4px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; color: var(--ink-2); }
.note a { color: var(--blue); }
.path { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; counter-reset: none; }
.path li { position: relative; padding: 24px; border-radius: 16px; background: #000; display: flex; flex-direction: column; gap: 10px; }
.path li::before { content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 2px; border-radius: 2px; background: var(--spectrum); opacity: .8; }
.path .n { font: 400 12px/1 var(--mono); color: var(--blue); }
.path p { color: var(--muted); }
@media (max-width: 960px) {
  .steps.three, .cards.two, .path { grid-template-columns: 1fr; }
  .showcase figcaption { max-width: 100%; margin-top: 18px; }
}
@media (max-width: 360px) { .nav-in > .btn.white { display: none; } }