/* Gigxie — Home page styles */

/* ============ Hero ============ */
.hero {
  position: relative;
  background: var(--hero-grad);
  color: #fff;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  top: -220px;
  right: -160px;
  width: 720px;
  height: 720px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(108, 59, 255, .35) 0%, transparent 65%);
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute;
  bottom: -260px;
  left: -180px;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(191, 247, 71, .10) 0%, transparent 65%);
  pointer-events: none;
}
.hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 56px;
  align-items: center;
  padding-block: 96px 88px;
}
/* grid items default to min-width:auto — that let the h1's min-content width
   push the whole column past the viewport on narrow screens */
.hero-inner > * { min-width: 0; }
.hero h1 {
  color: #fff;
  max-width: 15ch;
  margin-bottom: 20px;
}
.hero h1 .hl {
  color: var(--accent);
}
.hero-sub {
  font-size: 18px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .78);
  max-width: 50ch;
  margin-bottom: 32px;
}

/* Search */
.hero-search {
  display: flex;
  max-width: 560px;
  border-radius: var(--r-input);
  box-shadow: 0 16px 48px rgba(0, 0, 0, .35);
}
.hero-search input {
  flex: 1;
  min-width: 0;
  height: 56px;
  padding: 0 20px;
  border: 0;
  border-radius: var(--r-input) 0 0 var(--r-input);
  background: #fff;
  color: var(--ink);
  font-size: 16px;
}
.hero-search input::placeholder { color: var(--muted); }
/* same hover affordance as .header-search input, drawn as an inset ring because
   this input is borderless. Keep :hover above :focus so focus wins on both. */
.hero-search input { transition: box-shadow var(--ease); }
.hero-search input:hover { box-shadow: inset 0 0 0 1px #CFCFE0; }
.hero-search input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--brand); }
.hero-search button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 56px;
  padding-inline: 24px;
  border-radius: 0 var(--r-input) var(--r-input) 0;
  background: var(--brand);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  transition: background var(--ease);
}
.hero-search button:hover { background: var(--brand-dark); }
.hero-search button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hero-search button svg { width: 18px; height: 18px; }

/* Popular pills */
.hero-pills {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
  font-size: 14px;
}
.hero-pills-label { color: rgba(255, 255, 255, .6); font-weight: 500; }
.hero-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 16px;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: var(--r-pill);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  transition: background var(--ease), color var(--ease), border-color var(--ease);
}
.hero-pill:hover { background: #fff; border-color: #fff; color: var(--ink); }
.hero-pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Trust bar */
.hero-brands {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 24px;
  margin-top: 56px;
}
.hero-brands-label {
  /* own line: inline, the label ate enough of the row that the fifth wordmark
     wrapped alone underneath (a 4+1 break) at both 1280 and 1440 */
  flex: 1 0 100%;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  /* 13px/600 is not "large text", so this needs the full 4.5:1 — .45 lands at ~4.46:1 */
  color: rgba(255, 255, 255, .55);
}
.hero-brands .wordmark {
  font-family: var(--font-head);
  font-size: 17px;
  color: rgba(255, 255, 255, .55);
  line-height: 1;
  user-select: none;
}
.wordmark--nordwind { font-weight: 800; letter-spacing: -0.03em; }
.wordmark--loopla { font-weight: 700; letter-spacing: -0.05em; text-transform: lowercase; }
.wordmark--brightpath { font-family: var(--font-body); font-weight: 600; font-size: 15px; letter-spacing: .22em; text-transform: uppercase; }
.wordmark--kavu { font-weight: 800; font-style: italic; letter-spacing: .04em; }
.wordmark--hexbyte { font-family: var(--font-body); font-weight: 500; font-size: 16px; letter-spacing: .12em; }

/* Popular carousel: visible affordance while the live rankings are being fetched */
.carousel[aria-busy="true"] .gig-card { opacity: .6; }

/* Hero collage */
.hero-visual {
  position: relative;
  min-height: 540px;
}
.hero-visual .gig-card {
  position: static;
  width: 100%;
  border-color: transparent;
  box-shadow: 0 32px 80px rgba(0, 0, 0, .45);
}
/* Widths are percentages of the collage column and add up to 98%: at fixed px the
   two cards overlapped by 57px at 1440 and more as the column narrowed, which put
   card B's edge across card A's title and price. The stagger carries the depth;
   the float pills do the overlapping. */
.hero-card-a {
  position: absolute;
  width: 53%;
  top: 40px;
  left: 0;
  animation: heroFloat 7s ease-in-out infinite;
}
.hero-card-b {
  position: absolute;
  width: 45%;
  top: 168px;
  right: 0;
  animation: heroFloat 8.5s ease-in-out 1.2s infinite;
}
.hero-float-pill {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--r-pill);
  background: #fff;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .4);
  white-space: nowrap;
}
.hero-float-pill .stars svg { width: 14px; height: 14px; }
.hero-pill-rating { top: 6px; right: 12%; animation: heroFloat 6s ease-in-out .6s infinite; }
.hero-pill-delivered { bottom: 44px; left: 0; animation: heroFloat 7.5s ease-in-out 1.8s infinite; }
.hero-pill-delivered .tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--success);
  color: #fff;
  flex: none;
}
.hero-pill-delivered .tick svg { width: 12px; height: 12px; }
/* clears card B's title even when the two float in opposite phase — it sits on the
   thumbnail's bottom edge, which is chrome */
.hero-pill-commission {
  bottom: 220px;
  right: -4%;
  background: var(--accent);
  animation: heroFloat 6.8s ease-in-out 2.4s infinite;
}
@keyframes heroFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-card-a, .hero-card-b, .hero-float-pill { animation: none; }
}

/* ============ 0% commission strip ============ */
.commission-strip {
  background: var(--accent);
  color: var(--ink);
  padding-block: 40px;
}
.commission-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.commission-claim {
  display: flex;
  align-items: center;
  gap: 20px;
}
.commission-claim .big-zero {
  font-family: var(--font-head);
  font-size: 64px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--ink);
}
.commission-claim h2 {
  font-size: 24px;
  line-height: 1.25;
  max-width: 22ch;
}
.commission-stats {
  display: flex;
  gap: 48px;
  flex-wrap: wrap;
}
.commission-stat strong {
  display: block;
  font-family: var(--font-head);
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.15;
}
.commission-stat span {
  font-size: 14px;
  font-weight: 500;
  color: rgba(14, 14, 26, .72);
}
/* Fee disclosure: a full-width row under the claim and the stats, so the strip's
   "0% commission" reads next to the fees that do exist rather than instead of them. */
.commission-note {
  flex: 1 0 100%;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.55;
  color: rgba(14, 14, 26, .72);
  max-width: 92ch;
}
.commission-note a { color: var(--ink); text-decoration: underline; }

/* Category cards live in components.css — shared by index.html and sell.html */

/* ============ Value props ============ */
.vp-card { display: flex; flex-direction: column; gap: 10px; }
.vp-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--brand-tint);
  color: var(--brand);
  margin-bottom: 4px;
}
.vp-icon svg { width: 22px; height: 22px; }
.vp-icon--accent { background: var(--ink); color: var(--accent); }
.vp-card h3 { font-size: 20px; }
.vp-card p { font-size: 15px; line-height: 1.6; }

/* ============ Testimonials ============ */
/* no align-items: start here — the cards stretch to the row height so
   .testi-foot's margin-top:auto can line the attributions up */
.testi-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 40px 36px 32px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
}
.testi-card::before {
  content: "\201C";
  position: absolute;
  top: 8px;
  left: 28px;
  font-family: var(--font-head);
  font-size: 96px;
  font-weight: 800;
  line-height: 1;
  color: var(--brand-tint);
  pointer-events: none;
}
.testi-quote {
  position: relative;
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.testi-foot { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.testi-who strong { display: block; font-size: 15px; font-weight: 600; color: var(--ink); }
.testi-who span { font-size: 14px; color: var(--muted); }
.testi-foot .stars { margin-left: auto; }

/* Two hand-written lead quotes across the top, six real reviews below */
.testi-grid { display: grid; gap: 24px; grid-template-columns: repeat(6, 1fr); }
.testi-grid .testi-card { grid-column: span 2; }
/* scoped to .testi-grid too, or the line above out-specifies it and the leads
   render at review width */
.testi-grid .testi-card--lead { grid-column: span 3; padding: 40px 40px 32px; }
.testi-card--lead .testi-quote { font-size: 21px; line-height: 1.45; }
.testi-meta { font-size: 13px; color: var(--muted); }
@media (max-width: 1000px) {
  .testi-grid { grid-template-columns: repeat(2, 1fr); }
  .testi-grid .testi-card, .testi-card--lead { grid-column: auto; }
}
@media (max-width: 640px) {
  .testi-grid { grid-template-columns: 1fr; }
  .testi-card--lead { padding: 32px 24px 28px; }
}

/* ============ Made on Gigxie showcase ============ */
.showcase-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 200px;
  gap: 24px;
}
.showcase-tile {
  position: relative;
  border-radius: var(--r-card);
  overflow: hidden;
  display: block;
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--ease), transform var(--ease);
}
.showcase-tile:hover, .showcase-tile:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}
.showcase-tile:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.showcase-tile--tall { grid-row: span 2; }
.showcase-tile svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: transform .5s ease;
}
.showcase-tile:hover svg { transform: scale(1.04); }
.showcase-cap {
  position: absolute;
  inset: auto 0 0 0;
  padding: 40px 20px 16px;
  background: linear-gradient(180deg, transparent, rgba(10, 6, 20, .78));
  color: #fff;
}
.showcase-cap strong { display: block; font-family: var(--font-head); font-size: 16px; font-weight: 700; }
.showcase-cap span { font-size: 13px; color: rgba(255, 255, 255, .75); }

/* ============ Final CTA band ============ */
.cta-band {
  position: relative;
  background: var(--hero-grad);
  color: #fff;
  overflow: hidden;
  text-align: center;
}
.cta-band::before {
  content: "";
  position: absolute;
  top: -300px;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 620px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(108, 59, 255, .4) 0%, transparent 65%);
  pointer-events: none;
}
.cta-band .container { position: relative; z-index: 1; }
.cta-band h2 { color: #fff; max-width: 22ch; margin-inline: auto; margin-bottom: 16px; }
.cta-band p {
  font-size: 18px;
  color: rgba(255, 255, 255, .75);
  max-width: 54ch;
  margin-inline: auto;
  margin-bottom: 32px;
}
.cta-actions { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
.btn-outline-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); }
.btn-outline-light:hover { border-color: #fff; background: rgba(255, 255, 255, .1); color: #fff; }
.btn-outline-light:focus-visible { outline-color: var(--accent); }

/* ============ Responsive ============ */
@media (max-width: 1080px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-visual { display: none; }
}
@media (max-width: 900px) {
  .commission-inner { flex-direction: column; align-items: flex-start; }
  .commission-stats { gap: 32px; }
  .showcase-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; }
  /* 7 tiles with two row-spans is 9 cells — one too many for two columns, so the
     second tall tile drops its span here and the grid fills exactly */
  .showcase-tile--tall ~ .showcase-tile--tall { grid-row: auto; }
}
@media (max-width: 720px) {
  .hero-inner { padding-block: 56px; }
  .hero-brands { margin-top: 40px; gap: 12px 22px; }
  .hero-search button span { display: none; }
  .hero-search button { padding-inline: 18px; }
  .commission-claim .big-zero { font-size: 48px; }
  .commission-claim h2 { font-size: 20px; }
  .commission-stat strong { font-size: 26px; }
}
@media (max-width: 560px) {
  .showcase-grid { grid-template-columns: 1fr; grid-auto-rows: 200px; }
  .showcase-tile--tall { grid-row: auto; }
  .testi-card { padding: 32px 24px 28px; }
  .testi-foot .stars { display: none; }
}