/* ==========================================================================
   Glacier — components. Exodus-inspired: glassy rounded shells, bright pill
   buttons, big colourful hero, soft coloured glows.
   ========================================================================== */

/* ============================================================= HEADER === */

.hdr {
  position: sticky; top: 0; z-index: 100;
  background: var(--scrim);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
          backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: var(--hairline) solid var(--line);
}
.hdr-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-5);
  height: var(--header-h);
}

.brand {
  display: flex; align-items: center; gap: var(--s-3);
  font-family: var(--font-display);
  font-weight: 800; font-size: 1.3rem;
  letter-spacing: -0.02em;
  color: var(--text);
  flex: none;
}
.brand-mark {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: var(--grad-accent);
  color: var(--on-accent);
  box-shadow: var(--glow-cyan);
  font-size: 1.05rem;
}

.nav-list { display: flex; align-items: center; gap: var(--s-6); }

.nav-link {
  position: relative;
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--muted);
  transition: color var(--t-base) var(--ease);
}
.nav-link::after {
  content: "";
  position: absolute; left: 0; bottom: -8px;
  width: 0; height: 2px; border-radius: 2px;
  background: var(--grad-accent);
  transition: width var(--t-base) var(--ease);
}
.nav-link:hover, .nav-link[aria-current="true"] { color: var(--text); }
.nav-link:hover::after, .nav-link[aria-current="true"]::after { width: 100%; }

.hdr-tools { display: flex; align-items: center; gap: var(--s-3); }
.hdr-cta { flex: none; }

.icon-btn {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: var(--wash-ice);
  border: var(--hairline) solid var(--line);
  color: var(--text);
  font-size: 1.05rem;
  transition: border-color var(--t-base) var(--ease), background var(--t-base) var(--ease),
              transform var(--t-base) var(--ease);
}
.icon-btn:hover { border-color: var(--cyan); background: var(--wash-cyan); transform: translateY(-1px); }
.icon-btn:active { transform: translateY(0); }
.icon-btn .i { transition: transform .4s var(--ease); }
.icon-btn:hover .i { transform: rotate(18deg); }
.nav-toggle { display: none; }

/* .hdr-cta is hidden further down, in the responsive block at the end of this
   file. It cannot be hidden here: `.btn { display: inline-flex }` is declared
   below with the same specificity and would win on source order, which is why
   the header CTA was overflowing 360px viewports by 35px. */
@media (max-width: 760px) {
  .nav-toggle { display: grid; }
  .nav-list {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: var(--s-4) clamp(16px, 4vw, 40px) var(--s-5);
    background: var(--scrim-solid);
    -webkit-backdrop-filter: blur(20px);
            backdrop-filter: blur(20px);
    border-bottom: var(--hairline) solid var(--line);
    transform: translateY(-101%);
    visibility: hidden;
    transition: transform .3s var(--ease), visibility 0s linear .3s;
  }
  .nav-list[data-open="true"] { transform: none; visibility: visible; transition-delay: 0s; }
  .nav-list li { border-bottom: var(--hairline) solid var(--line); }
  .nav-list li:last-child { border-bottom: 0; }
  .nav-link { display: block; padding-block: var(--s-4); font-size: var(--fs-body); }
  .nav-link::after { display: none; }
}

/* ============================================================ BUTTONS === */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  padding: 14px 28px;
  border: var(--hairline) solid transparent;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-small);
  letter-spacing: .005em;
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease),
              background var(--t-base) var(--ease), border-color var(--t-base) var(--ease),
              filter var(--t-base) var(--ease), opacity var(--t-base) var(--ease);
}
.btn:active { transform: translateY(1px) scale(.99); }

.btn-primary {
  color: var(--on-accent);
  background: var(--grad-accent);
  box-shadow: var(--glow-cyan), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--glow-cyan), var(--glow-azure); filter: brightness(1.06); }

.btn-ghost {
  color: var(--text);
  background: var(--wash-ice);
  border-color: var(--line);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
.btn-ghost:hover { transform: translateY(-2px); border-color: var(--cyan); background: var(--wash-cyan); }

.btn-sm { padding: 9px 18px; font-size: var(--fs-data); }
.btn-lg { padding: 17px 34px; font-size: var(--fs-body); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }

/* =============================================================== CARD === */

.card {
  position: relative;
  background: linear-gradient(180deg, var(--card-top), var(--card-bottom));
  border: var(--hairline) solid var(--line);
  border-radius: var(--r-lg);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease);
}
/* A gradient hairline that brightens on hover, drawn with a mask so it never
   affects layout. */
.card::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(140deg, color-mix(in srgb, var(--ice) 55%, transparent), transparent 45%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity .3s var(--ease);
  pointer-events: none;
}
.card:hover::before { opacity: 1; }

/* =============================================================== HERO === */

.hero { position: relative; padding-block: var(--s-9) var(--s-8); overflow: hidden; }

/* One centred column: copy stacked above the visual, everything on the axis. */
.hero-x {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: var(--s-8);
  text-align: center;
}
.hero-x-copy {
  display: flex; flex-direction: column; align-items: center;
  width: 100%; max-width: 62rem;
}
.hero-x-copy > * + * { margin-top: var(--s-5); }
.hero-x-title { font-size: var(--fs-display); line-height: 1.06; }
/* background-clip:text paints only within the line box, so a tight line-height
   shears descenders (the “g” in “long”). The padding gives them room. */
.hero-x-title .gradient-text { display: block; padding-bottom: 0.12em; }
.hero-x .lead { max-width: 44rem; margin-inline: auto; }

.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3); }
.chip {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: var(--wash-ice);
  border: var(--hairline) solid var(--line);
  font-size: var(--fs-micro);
  font-weight: 500;
  color: var(--muted);
}
.dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--good);
  box-shadow: 0 0 10px var(--good);
  animation: pulse 2s var(--ease) infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }

.lead { color: var(--muted); font-size: var(--fs-lead); }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3); }

.hero-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3); width: 100%; max-width: 40rem; }
.hero-points { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3) var(--s-5); margin-top: var(--s-2); }
.hero-point { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-data); color: var(--muted); white-space: nowrap; }
.hero-point .i { color: var(--cyan); }

/* stat tiles (hero + reused elsewhere) */
.stat {
  flex: 1 1 auto; min-width: 128px;
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-md);
  background: var(--wash-ice);
  border: var(--hairline) solid var(--line);
}
.stat b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.4vw, 2rem);
  font-weight: 800;
  color: var(--text);
  line-height: 1;
}
.stat span {
  display: block; margin-top: var(--s-2);
  font-size: var(--fs-micro);
  color: var(--faint);
}

/* ---- the colourful hero visual ---- */
.hero-x-visual {
  position: relative;
  width: 100%;
  max-width: 34rem;
  min-height: 420px;
  margin-inline: auto;
  display: grid; place-items: center;
}
.hx-orb {
  position: absolute; border-radius: 50%;
  filter: blur(50px); opacity: .8; z-index: 0;
  animation: float 9s ease-in-out infinite alternate;
}
.hx-orb-a { width: 260px; height: 260px; top: 2%; right: 6%;  background: radial-gradient(circle, var(--pink), transparent 70%); }
.hx-orb-b { width: 300px; height: 300px; bottom: 0; left: 2%; background: radial-gradient(circle, var(--azure), transparent 70%); animation-delay: -4s; }

.hx-card {
  position: relative; z-index: 2;
  width: min(100%, 400px);
  padding: var(--s-5);
  border-radius: var(--r-xl);
  background: linear-gradient(165deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03));
  border: var(--hairline) solid rgba(255, 255, 255, .16);
  box-shadow: var(--shadow-2);
  -webkit-backdrop-filter: blur(24px);
          backdrop-filter: blur(24px);
  transform: rotate(-2deg);
  animation: float 11s ease-in-out infinite alternate;
}
.hx-card-bar { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-5); }
.hx-card-bar i { width: 10px; height: 10px; border-radius: 50%; }
.hx-card-bar i:nth-child(1) { background: var(--bad); }
.hx-card-bar i:nth-child(2) { background: var(--warn); }
.hx-card-bar i:nth-child(3) { background: var(--good); }
.hx-card-bar span {
  margin-left: auto;
  font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--faint);
}
.hx-row {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) 0;
  border-top: var(--hairline) solid var(--line);
}
.hx-row:first-of-type { border-top: 0; }
.hx-ic {
  width: 38px; height: 38px; flex: none;
  display: grid; place-items: center;
  border-radius: 11px;
  background: var(--grad-accent); color: var(--on-accent);
  font-size: .95rem;
}
.hx-ic-2 { background: linear-gradient(135deg, var(--pink), var(--deep)); }
.hx-ic-3 { background: linear-gradient(135deg, var(--teal), var(--azure)); }
.hx-lines { flex: 1; min-width: 0; display: grid; gap: 7px; }
.hx-lines b { display: block; height: 9px; width: 70%; border-radius: 5px; background: rgba(255, 255, 255, .28); }
.hx-lines i { display: block; height: 7px; width: 45%; border-radius: 5px; background: rgba(255, 255, 255, .12); }
.hx-tag {
  flex: none;
  padding: 6px 14px; border-radius: var(--r-pill);
  background: var(--grad-accent); color: var(--on-accent);
  font-family: var(--font-display); font-size: var(--fs-micro); font-weight: 600;
}
.hx-badge {
  position: absolute; z-index: 3;
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 10px 16px;
  border-radius: var(--r-pill);
  background: var(--scrim-solid);
  border: var(--hairline) solid rgba(255, 255, 255, .16);
  box-shadow: var(--shadow-2);
  font-family: var(--font-display); font-size: var(--fs-data); font-weight: 600; color: var(--text);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
}
.hx-badge .i { color: var(--warn); }
.hx-badge-rating { top: 8%; right: 0; animation: float 7s ease-in-out infinite alternate; }
.hx-badge-verified { bottom: 10%; left: 0; animation: float 8s ease-in-out infinite alternate -3s; }
.hx-badge-verified .i { color: var(--good); }

@keyframes float {
  from { transform: translateY(-8px) rotate(-2deg); }
  to   { transform: translateY(8px)  rotate(-2deg); }
}
.hx-badge-rating, .hx-badge-verified { animation-name: floaty; }
@keyframes floaty { from { transform: translateY(-10px); } to { transform: translateY(10px); } }

@media (max-width: 980px) {
  .hero-x { grid-template-columns: minmax(0, 1fr); gap: var(--s-7); }
  .hero-x-visual { min-height: 360px; }
  .hx-card { transform: none; }
}
@media (max-width: 520px) {
  .hero-x-visual { min-height: 300px; }
  .hx-orb-a, .hx-orb-b { width: 200px; height: 200px; }
}

/* ============================================================= TICKER === */

.ticker {
  position: relative; overflow: hidden;
  padding: 14px 0;
  background: var(--card-bottom);
  border-top: var(--hairline) solid var(--line);
  border-bottom: var(--hairline) solid var(--line);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
.ticker::before, .ticker::after {
  content: ""; position: absolute; top: 0; bottom: 0;
  width: 140px; z-index: 2; pointer-events: none;
}
.ticker::before { left: 0;  background: linear-gradient(90deg, var(--bg-0), transparent); }
.ticker::after  { right: 0; background: linear-gradient(270deg, var(--bg-0), transparent); }

.ticker-track { display: inline-flex; gap: var(--s-6); white-space: nowrap; animation: ticker 40s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.ticker-item { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-small); color: var(--muted); }
.ticker-item b { color: var(--text); font-weight: 600; }
.ticker-item .i { color: var(--good); font-size: .8rem; }

.cc {
  font-family: var(--font-mono);
  font-size: .62rem; font-weight: 600; letter-spacing: .08em;
  padding: 3px 6px;
  border-radius: 6px;
  color: var(--ice);
  background: var(--wash-cyan-2);
  border: var(--hairline) solid var(--line);
}

/* ============================================================== TRUST === */

.trust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); }
.trust-cell {
  text-align: center;
  padding: var(--s-6) var(--s-5);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--card-top), var(--card-bottom));
  border: var(--hairline) solid var(--line);
  box-shadow: var(--shadow-card);
}
.trust-num {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800; line-height: 1;
  background: var(--grad-sheen);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.trust-num .sfx { font-size: .55em; }
.trust-label { margin-top: var(--s-3); font-size: var(--fs-data); color: var(--muted); }

/* =========================================================== FEATURES === */

.features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
.feature { padding: var(--s-6); display: flex; flex-direction: column; }
.feature-icon {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: 15px;
  background: var(--grad-accent);
  color: var(--on-accent);
  box-shadow: var(--glow-cyan);
  font-size: 1.3rem;
  margin-bottom: var(--s-5);
}
.feature h3 { font-size: var(--fs-h3); margin-bottom: var(--s-3); }
.feature p { color: var(--muted); font-size: var(--fs-small); }

/* ========================================================== CATALOGUE === */

.cat-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-6);
}
.cat-search {
  display: flex; align-items: center; gap: var(--s-2);
  flex: 1 1 240px; max-width: 380px;
  padding: 11px var(--s-5);
  background: var(--bg-1);
  border: var(--hairline) solid var(--line);
  border-radius: var(--r-pill);
  transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.cat-search:focus-within { border-color: var(--cyan); box-shadow: 0 0 0 3px var(--wash-cyan-2); }
.cat-search .i { color: var(--faint); flex: none; }
.cat-search input {
  flex: 1; min-width: 0;
  background: none; border: 0;
  font-size: var(--fs-small); color: var(--text);
}
/* The wrapper draws the visible focus state via :focus-within. A transparent
   outline rather than `outline: none` keeps a ring in forced-colours mode,
   where the wrapper's border and shadow may not be painted at all. */
.cat-search input:focus { outline: 2px solid transparent; outline-offset: 2px; }
.cat-search input::placeholder { color: var(--faint); }

/* Filters and the sort control travel together on the right of the toolbar,
   so the search field keeps the whole left side to itself. */
.cat-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--s-3); }
.cat-filters { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip-btn {
  padding: 9px 18px;
  border-radius: var(--r-pill);
  font-family: var(--font-display); font-size: var(--fs-data); font-weight: 600;
  color: var(--muted);
  background: var(--wash-ice);
  border: var(--hairline) solid var(--line);
  transition: color var(--t-base) var(--ease), background var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.chip-btn:hover { color: var(--text); border-color: var(--cyan); }
.chip-btn.is-active {
  color: var(--on-accent);
  background: var(--grad-accent);
  border-color: transparent;
  box-shadow: var(--glow-cyan);
}
/* Sort control. A native <select> so the OS picker and keyboard behaviour come
   for free; the chevron is drawn by the wrapper because `appearance: none`
   removes the built-in one. */
.cat-sort { position: relative; display: flex; align-items: center; }
.cat-sort::after {
  content: ""; position: absolute; right: 17px; top: 50%;
  width: 7px; height: 7px;
  border-right: 2px solid var(--faint); border-bottom: 2px solid var(--faint);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
  transition: border-color var(--t-base) var(--ease);
}
.cat-sort:hover::after { border-color: var(--text); }
.cat-sort-select {
  appearance: none; -webkit-appearance: none;
  padding: 9px 40px 9px 18px;
  border-radius: var(--r-pill);
  font-family: var(--font-display); font-size: var(--fs-data); font-weight: 600;
  color: var(--muted);
  background: var(--wash-ice);
  border: var(--hairline) solid var(--line);
  cursor: pointer;
  transition: color var(--t-base) var(--ease), background var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.cat-sort-select:hover { color: var(--text); border-color: var(--cyan); }
.cat-sort-select:focus-visible {
  outline: 2px solid transparent; outline-offset: 2px;
  color: var(--text); border-color: var(--cyan); box-shadow: 0 0 0 3px var(--wash-cyan-2);
}
/* The dropdown list is painted by the OS, which ignores the control's colours
   on most platforms — set them on the options too or it renders unreadable. */
.cat-sort-select option { background: var(--bg-1); color: var(--text); }

.cat-empty { text-align: center; padding: var(--s-8); color: var(--muted); font-size: var(--fs-small); }

.mods { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); }
.mod { display: flex; flex-direction: column; }
/* The lift is a token in the composed transform below, not a transform of its
   own — writing `transform` here would be cancelled by the pointer effect. */
.mod:hover { --lift: 5px; box-shadow: var(--shadow-card), var(--glow-cyan); border-color: color-mix(in srgb, var(--cyan) 40%, var(--line)); }

.mod-thumb { display: block; position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-2); }
.mod-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease); }
.mod:hover .mod-thumb img { transform: scale(1.06); }
.mod-thumb::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, var(--scrim) 100%);
}

.mod-tag {
  position: absolute; top: var(--s-4); left: var(--s-4); z-index: 2;
  font-family: var(--font-display);
  font-size: .68rem; font-weight: 700; letter-spacing: var(--tr-micro);
  padding: 6px 12px;
  border-radius: var(--r-pill);
  color: var(--on-accent);
  background: var(--grad-accent);
  box-shadow: var(--glow-cyan);
}

.mod-body { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); flex: 1; }
.mod-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); }
.mod-name { font-family: var(--font-display); font-size: 1.18rem; font-weight: 700; }
.mod-name-link { transition: color var(--t-base) var(--ease); }
.mod:hover .mod-name-link { color: var(--cyan); }
.mod-rating {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-display); font-size: var(--fs-data); font-weight: 600;
  color: var(--ice); white-space: nowrap;
}
.mod-rating .i { color: var(--warn); fill: currentColor; stroke: none; }
.mod-desc { color: var(--muted); font-size: var(--fs-small); flex: 1; }
.mod-foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding-top: var(--s-4); border-top: var(--hairline) solid var(--line);
}
.mod-dl { font-family: var(--font-mono); font-size: var(--fs-data); color: var(--faint); }
.mod-dl b { color: var(--muted); font-weight: 600; }

/* ========================================================== UPDATES ==== */

.updates { display: flex; flex-direction: column; gap: var(--s-4); }
.update { display: flex; gap: var(--s-6); padding: var(--s-6); }
.update-date { font-family: var(--font-mono); font-size: var(--fs-data); color: var(--faint); white-space: nowrap; min-width: 7rem; padding-top: 3px; }
.update h3 { font-size: 1.1rem; margin-bottom: var(--s-2); }
.update-link { transition: color var(--t-base) var(--ease); }
.update:hover .update-link { color: var(--cyan); }
.update p { color: var(--muted); font-size: var(--fs-small); }
.ver {
  display: inline-block; margin-left: var(--s-3);
  font-family: var(--font-mono); font-size: .68rem;
  padding: 3px 10px; border-radius: var(--r-pill);
  color: var(--ice); background: var(--wash-cyan-2);
  border: var(--hairline) solid var(--line);
}

/* ======================================================= TESTIMONIALS === */

.quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
.quote { padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-4); }
.stars { display: flex; gap: 3px; color: var(--warn); font-size: var(--fs-data); }
.stars .i { fill: currentColor; stroke: none; }
/* Unearned stars stay in place so the row keeps its shape, just dimmed. */
.stars .i.is-off { opacity: .24; }
.quote p { color: var(--text); font-size: var(--fs-small); flex: 1; }
.quote-by { display: flex; align-items: center; gap: var(--s-3); padding-top: var(--s-4); border-top: var(--hairline) solid var(--line); }
.avatar {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; flex: none;
  background: var(--grad-accent); color: var(--on-accent);
  font-family: var(--font-display); font-size: var(--fs-data); font-weight: 700;
}
.quote-name { font-size: var(--fs-small); font-weight: 600; }
.quote-meta { font-size: var(--fs-micro); color: var(--faint); }

/* ========================================================= GUARANTEES === */

.guarantees { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
.guarantee {
  text-align: center;
  padding: var(--s-7) var(--s-5);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--card-top), var(--card-bottom));
  border: var(--hairline) solid var(--line);
  box-shadow: var(--shadow-card);
}
.g-icon {
  width: 56px; height: 56px; margin: 0 auto var(--s-5);
  display: grid; place-items: center;
  border-radius: 16px;
  background: var(--wash-cyan-2);
  color: var(--cyan);
  font-size: 1.4rem;
}
.guarantee h3 { font-size: var(--fs-h3); margin-bottom: var(--s-3); }
.guarantee p { color: var(--muted); font-size: var(--fs-small); }

/* ================================================================ FAQ === */

.faq { display: flex; flex-direction: column; gap: var(--s-3); max-width: 840px; margin-inline: auto; }
.faq-item { overflow: hidden; }
.faq-q {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-5) var(--s-6);
  text-align: left;
  font-family: var(--font-display);
  font-size: 1.08rem; font-weight: 600;
  color: var(--text);
  transition: color var(--t-base) var(--ease);
}
.faq-q:hover { color: var(--cyan); }
.faq-q .i { color: var(--cyan); transition: transform .3s var(--ease); }
.faq-item[data-open="true"] .faq-q .i { transform: rotate(45deg); }
.faq-a { display: none; }
.faq-item[data-open="true"] .faq-a { display: block; }
.faq-a p { padding: 0 var(--s-6) var(--s-6); color: var(--muted); font-size: var(--fs-small); }

/* ============================================================ SIGN-UP === */

/* ============================================================ INSTALL === */
/* Numbered steps. An <ol> so the order is in the markup, not just the styling;
   the visible numerals are the counter badge, so the list marker is dropped. */
.steps {
  list-style: none;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4);
}
.step {
  position: relative;
  padding: var(--s-6) var(--s-5) var(--s-5);
  background: var(--card-top);
  border: var(--hairline) solid var(--line);
  border-radius: var(--r-lg);
}
.step-n {
  position: absolute; top: calc(var(--s-5) * -1 + 4px); left: var(--s-5);
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  font-family: var(--font-display); font-size: var(--fs-data); font-weight: 700;
  color: var(--on-accent); background: var(--grad-accent);
  box-shadow: var(--glow-cyan);
}
.step-ic { display: inline-flex; margin-bottom: var(--s-3); color: var(--cyan); }
.step-ic .i { width: 26px; height: 26px; }
.step h3 { font-size: 1.05rem; margin-bottom: var(--s-2); }
.step p { color: var(--muted); font-size: var(--fs-small); }

.install-note {
  display: flex; gap: var(--s-4); align-items: flex-start;
  margin-top: var(--s-5); padding: var(--s-5) var(--s-6);
}
.install-note-ic { flex: none; color: var(--warn); display: inline-flex; padding-top: 2px; }
.install-note h3 { font-size: 1rem; margin-bottom: var(--s-2); }
.install-note p { color: var(--muted); font-size: var(--fs-small); max-width: 78ch; }

@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--s-4); } }
@media (max-width: 520px) {
  .steps { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .install-note { flex-direction: column; gap: var(--s-3); }
}

.input {
  width: 100%;
  padding: 15px var(--s-5);
  background: var(--bg-1);
  border: var(--hairline) solid var(--line);
  border-radius: var(--r-pill);
  font-size: var(--fs-small);
  transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.input::placeholder { color: var(--faint); opacity: 1; }
.input:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px var(--wash-cyan-2); }
.input[aria-invalid="true"] { border-color: var(--bad); }
.field-msg { margin-top: var(--s-2); padding-left: var(--s-4); font-size: var(--fs-data); min-height: 1.2em; }
.field-msg[data-state="error"] { color: var(--bad); }
.field-msg[data-state="ok"]    { color: var(--good); }

/* ============================================================= FOOTER === */

.foot { margin-top: var(--s-9); border-top: var(--hairline) solid var(--line); background: var(--card-bottom); }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--s-6); padding-block: var(--s-8); }
.foot-col h2 {
  font-family: var(--font-display);
  font-size: var(--fs-data); letter-spacing: .04em;
  color: var(--faint); font-weight: 700;
  margin-bottom: var(--s-4);
}
.foot-col ul { display: flex; flex-direction: column; gap: var(--s-3); }
.foot-link { font-size: var(--fs-small); color: var(--muted); transition: color var(--t-base) var(--ease); }
.foot-link:hover { color: var(--cyan); }
.foot-about p { color: var(--muted); font-size: var(--fs-small); max-width: 26rem; margin-top: var(--s-4); }
.foot-bottom {
  display: flex; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap;
  padding-block: var(--s-5);
  border-top: var(--hairline) solid var(--line);
  font-size: var(--fs-data); color: var(--faint);
}

/* ============================================================= TOASTS === */

.toasts {
  position: fixed; right: var(--s-5); bottom: var(--s-5); z-index: 200;
  display: flex; flex-direction: column-reverse; gap: var(--s-3);
  max-width: min(22rem, calc(100vw - var(--s-8)));
  pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: var(--s-3);
  min-width: 240px;
  padding: 14px 18px;
  background: var(--bg-2);
  border: var(--hairline) solid var(--line);
  border-left: 3px solid var(--good);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-2);
  font-size: var(--fs-small);
  animation: toast-in .35s var(--ease);
}
.toast[data-kind="error"] { border-left-color: var(--bad); }
.toast .i { color: var(--good); }
.toast[data-kind="error"] .i { color: var(--bad); }
.toast.is-out { opacity: 0; transition: opacity var(--t-fast) linear; }
@keyframes toast-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }

/* ============================================================ EDIT BAR == */

.edit-bar {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: var(--s-5); z-index: 210;
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-2) var(--s-2) var(--s-2) var(--s-4);
  background: var(--bg-2);
  border: var(--hairline) solid var(--line);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-2);
  font-size: var(--fs-data); color: var(--muted);
}

/* ========================================================= RESPONSIVE === */

@media (max-width: 1100px) {
  .mods { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px)  { .quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guarantees { grid-template-columns: minmax(0, 1fr); }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: var(--s-5); }
  .foot-about { grid-column: 1 / -1; }
}
@media (max-width: 820px) { .mods { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .features { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 680px) {
  .foot-grid { grid-template-columns: minmax(0, 1fr); }
  .update { flex-direction: column; gap: var(--s-2); }
  .update-date { min-width: 0; }
}
@media (max-width: 640px) {
  .quotes { grid-template-columns: minmax(0, 1fr); }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }
  .toasts { left: var(--s-4); right: var(--s-4); max-width: none; }
  .toast { min-width: 0; }
}
@media (max-width: 560px) {
  .cat-toolbar { flex-direction: column; align-items: stretch; }
  .cat-search { max-width: none; }
  .cat-controls { justify-content: flex-start; }
  .cat-sort, .cat-sort-select { width: 100%; }
}
@media (max-width: 480px) { .mods { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 400px) { .trust { grid-template-columns: minmax(0, 1fr); } }

/* ================================================= POINTER TILT LAYER === */
/* Cards lean toward the cursor; their neighbours slide and lean away from it.
   Every part of the movement is a custom property, composed into one
   transform here. JavaScript never writes `transform` directly — doing that
   is what silently cancelled the hover lift in an earlier build. */

.tilt {
  --rx: 0deg;    /* rotateX — set by JS */
  --ry: 0deg;    /* rotateY — set by JS */
  --tx: 0px;     /* push away from the cursor, horizontal */
  --ty: 0px;     /* push away from the cursor, vertical */
  --lift: 0px;   /* hover lift, set in CSS */
  --scale: 1;
  transform:
    perspective(1100px)
    translate3d(var(--tx), calc(var(--ty) - var(--lift)), 0)
    rotateX(var(--rx)) rotateY(var(--ry))
    scale(var(--scale));
  transform-style: preserve-3d;
  will-change: transform;
  transition:
    transform var(--t-fast) var(--ease),
    box-shadow var(--t-base) var(--ease),
    border-color var(--t-base) var(--ease);
}

/* Returning home after the pointer leaves takes longer than following it. */
.tilt-group[data-idle="true"] .tilt { transition-duration: var(--t-slow), var(--t-base), var(--t-base); }

/* The card under the cursor gets a soft highlight that tracks the pointer. */
.tilt-lit::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 4;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--t-base) var(--ease);
  background: radial-gradient(
    26rem circle at var(--mx, 50%) var(--my, 50%),
    color-mix(in srgb, var(--cyan) 16%, transparent) 0%,
    transparent 60%);
}
.tilt-lit[data-lit="true"]::after { opacity: 1; }

/* A pointer effect is decoration. Anyone who asked for less motion, or is on
   a touch device, gets the static layout — JS also skips binding entirely. */
@media (prefers-reduced-motion: reduce), (pointer: coarse) {
  .tilt { transform: none; will-change: auto; }
  .tilt-lit::after { display: none; }
}

/* ============================================== LATE RESPONSIVE RULES === */
/* These must come after the component declarations they override, so equal
   specificity resolves in their favour on source order. */

@media (max-width: 860px) {
  .hdr-cta { display: none; }
}