/* ===========================================================================
   VAULT  —  home: the hero, its graphic, and the catalogue
   =========================================================================== */

.hero {
  padding-top: clamp(var(--s6), 6.5vw, 92px);
  padding-bottom: var(--s8);
}
.hero-grid {
  display: grid; grid-template-columns: 1.02fr .98fr;
  gap: var(--s6); align-items: center;
}
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: var(--s5); text-align: center; }
  .hero-copy .cta, .hero-copy .pills { justify-content: center; }
  .hero-copy .lead { margin-left: auto; margin-right: auto; }
  /* `width` and `justify-self`, NOT `margin: 0 auto`. An auto margin on a grid
     item overrides the default stretch and sizes it to its CONTENT — and every
     card in here is absolutely positioned, so the content was nothing and the
     whole graphic collapsed to a 0x0 box on phones.

     It stays BELOW the words on one column. A graphic above the headline on a
     phone is a headline nobody sees without scrolling, and on a shop the
     headline is the thing that has to land first. */
  .hero-art { width: min(100%, 440px); justify-self: center; }
}
/* The hand is drawn at a fixed proportion of its box, so on a narrow one the
   outer two cards run past the edge. Scaling the whole fan keeps the shape
   rather than re-tuning four numbers for one breakpoint. */
@media (max-width: 560px) { .fan { transform: scale(.84); } }

.hero h1 { margin: var(--s4) 0; max-width: 13ch; }
@media (max-width: 980px) { .hero h1 { margin-left: auto; margin-right: auto; } }
/* The half of the line that is the promise gets the metal. */
.hero h1 em {
  font-style: normal;
  background: var(--gold-grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero .lead { margin-bottom: var(--s5); max-width: 44ch; }
.hero .cta { margin-bottom: var(--s5); }
.hero-trust { gap: 8px; }

/* The flag above the headline: one line, a live dot, and a link. */
.hero-flag {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 14px 6px 7px; border-radius: var(--rp);
  border: 1px solid var(--line-2);
  background: rgba(255, 255, 255, .03);
  font-size: .86rem; color: var(--tx-2);
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.hero-flag:hover { border-color: rgba(224,168,60,.4); background: var(--gold-wash); }
.hero-flag .i { width: 15px; height: 15px; color: var(--gold); transition: transform .25s var(--ease); }
.hero-flag:hover .i { transform: translateX(3px); }
.hero-flag .pill { padding: 4px 11px; font-size: .74rem; }

/* ============================================================ THE GRAPHIC ==
   A dealt hand, built out of the game's own rank symbols rather than a stock
   illustration - the picture on the home page is made of the thing we sell.
   Everything here is an inline symbol and a transform, so it weighs nothing,
   stays sharp at any size, and needs no image request.
   ========================================================================= */

.hero-art {
  position: relative;
  aspect-ratio: 1 / .86;
  display: grid; place-items: center;
  isolation: isolate;
}

/* the light behind the hand */
.hero-art .halo {
  position: absolute; z-index: -2;
  width: 78%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle,
              rgba(224, 168, 60, .3) 0%, rgba(224, 168, 60, .08) 42%, transparent 68%);
  filter: blur(18px);
}
/* two hairline circles, so the hand sits ON something */
.hero-art .ring {
  position: absolute; z-index: -1;
  border-radius: 50%; border: 1px solid var(--line);
  aspect-ratio: 1;
}
.hero-art .ring.r1 { width: 62%; }
.hero-art .ring.r2 { width: 86%; border-color: rgba(255, 255, 255, .045); }

.fan { position: relative; width: 100%; height: 100%; }

/* CARD ANGLE AND LIFT COME FROM ONE NUMBER. --i is the card's distance from
   the middle of the hand, so the sideways step, the rotation, the drop and the
   stagger of the float all derive from it and the fan cannot end up lopsided
   by hand.

   The sideways step is the load-bearing one. Rotation alone, around an origin
   below the card, moved five stacked cards by a few pixels each and the hand
   read as one card with a shadow. */
.pc {
  position: absolute; left: 50%; top: 50%;
  width: 32%; aspect-ratio: 5 / 7;
  margin: -22.4% 0 0 -16%;
  border-radius: 14px;
  background: linear-gradient(158deg, #f7f2e7 0%, #e6dfcd 62%, #d6cdb8 100%);
  color: #1a1613;
  box-shadow: 0 26px 54px -16px rgba(0, 0, 0, .9), 0 2px 0 rgba(255, 255, 255, .5) inset;
  transform:
    translateX(calc(var(--i) * 56%))
    translateY(calc(var(--i) * var(--i) * 3.4%))
    rotate(calc(var(--i) * 8deg));
  transform-origin: 50% 90%;
  animation: cardFloat 7s ease-in-out infinite;
  animation-delay: calc(var(--i) * .3s);
}
@keyframes cardFloat {
  50% {
    transform:
      translateX(calc(var(--i) * 56%))
      translateY(calc(var(--i) * var(--i) * 3.4% - 11px))
      rotate(calc(var(--i) * 8deg));
  }
}
.pc::after {
  content: ''; position: absolute; inset: 7px;
  border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(26, 22, 19, .18);
}
/* `color: inherit` is not decoration. base.css paints every <b> in the page's
   text colour, which on a cream card is white on white - the ranks were there
   the whole time and none of them could be seen. */
.pc b {
  position: absolute; left: 10%; top: 6%;
  color: inherit;
  font-size: clamp(1rem, 1.5vw, 1.35rem);
  font-weight: 800; line-height: 1; letter-spacing: -.03em;
}
.pc > svg {
  position: absolute; left: 50%; top: 50%;
  width: 44%; height: 44%; transform: translate(-50%, -50%);
  fill: currentColor; opacity: .9;
}
/* the middle card is the joker, and it carries the game's red */
.pc.joker { color: #8f2b2b; z-index: 2; }
.pc.joker > svg { opacity: 1; }

/* Chips and a skull, scattered off the hand. Purely decorative, so they are
   the first things to go when the column gets narrow. */
.tok { position: absolute; display: grid; place-items: center; }
.tok svg { width: 100%; height: 100%; }
.tok.chip svg { fill: var(--gold); }
.tok.chip.a { width: 12%; left: 4%;  top: 22%; opacity: .85; animation: cardFloat 9s ease-in-out infinite; }
.tok.chip.b { width: 8%;  right: 8%; top: 68%; opacity: .6;  animation: cardFloat 11s ease-in-out .8s infinite; }
.tok.skull  { width: 11%; right: 3%; top: 14%; opacity: .3; }
.tok.skull svg { fill: var(--tx-3); }
@keyframes tokFloat { 50% { transform: translateY(-9px); } }
.tok.chip.a, .tok.chip.b { animation-name: tokFloat; }
@media (max-width: 560px) { .tok { display: none; } }

/* ============================================================= CATALOGUE ==
   One big card and one plain one. The next-thing card is deliberately not
   dressed as a product: a "coming soon" tile that looks buyable is a tile
   that has to be explained.
   ========================================================================= */

.catalogue { display: grid; grid-template-columns: 1.55fr 1fr; gap: var(--s3); align-items: stretch; }
@media (max-width: 940px) { .catalogue { grid-template-columns: 1fr; } }

.feature { position: relative; overflow: hidden; min-height: 440px; display: flex; }
.feature-art { position: absolute; inset: 0; }
.feature-art img {
  width: 100%; height: 100%; object-fit: cover; object-position: 62% 22%;
  /* Tinted into the page's gold so a full-colour render reads as art
     direction rather than a sticker dropped on a dark card. */
  filter: sepia(.4) saturate(1.15) hue-rotate(-8deg) contrast(1.05) brightness(.72);
  transition: transform 1s var(--ease);
}
.feature:hover .feature-art img { transform: scale(1.045); }
.feature-art::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(185deg, rgba(10,11,13,.22) 0%, rgba(10,11,13,.86) 48%, rgba(10,11,13,.98) 82%),
    linear-gradient(75deg, rgba(10,11,13,.92) 12%, transparent 74%);
}
.feature-body {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; justify-content: flex-end; gap: var(--s3);
  padding: var(--s5); width: 100%;
}
.feature-body h3 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); letter-spacing: -.035em; }
.feature-body > p { max-width: 44ch; font-size: .98rem; color: var(--tx-2); }
.feature-body .ticks { max-width: 46ch; }
.feature-body .go { margin-top: var(--s1); }
@media (max-width: 560px) { .feature-body { padding: var(--s4); } }

.next { display: flex; flex-direction: column; justify-content: center; gap: var(--s3); padding: var(--s5); }
.next h3 { font-size: 1.35rem; }
.next p { font-size: .95rem; color: var(--tx-3); max-width: 32ch; }
.next .go { margin-top: var(--s2); align-self: flex-start; }

/* THE CARD BESIDE THE PRODUCT. It carries five reassurances and a button now
   rather than a note about what we might build next, so it is a column of
   content and not a centred sentence - top-aligned, tighter gaps, and the
   button pinned to the bottom so it lines up with the feature card's own
   call to action however the list wraps. */
.buyside {
  justify-content: flex-start;
  gap: var(--s2);
  border-color: rgba(224,168,60,.28);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(224,168,60,.09), transparent 62%),
    linear-gradient(180deg, var(--surf), var(--bg-lift));
}
.buyside .ticks { margin: 0; }
.buyside .ticks li { font-size: .92rem; align-items: flex-start; }
.buyside .ticks .i { margin-top: .22em; }
.buyside .ticks code {
  font-family: var(--mono); font-size: .86em;
  padding: .1em .35em; border-radius: 5px;
  background: rgba(0,0,0,.35); color: var(--tx-2);
}
.buyside .btn { margin-top: auto; width: 100%; justify-content: center; }
.buyside-fine { font-size: .84rem; color: var(--tx-4); margin: 0; max-width: none; }
/* Underlined, because at this size a link that is only a shade lighter than
   the sentence around it is not a link anybody finds. */
.buyside-fine a { color: var(--tx-2); text-decoration: underline; text-underline-offset: 3px; }
.buyside-fine a:hover { color: var(--gold); }

/* The hero's trust row: same rule, same reason as .pcard-top in
   catalogue.css. Below this width the third pill wraps alone under the other
   two, directly beneath a headline - which is the worst place on the site for
   something to look accidental. All three claims are repeated in the copy and
   on /scripts. */
@media (max-width: 1180px) {
  .hero-trust .pill:nth-child(n + 3) { display: none; }
}