:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #1b2430;
  background: #f5f7fb;
}

/* ===== REVIEWER WORKSPACE ===== */

.review-detail { background: #fff; border: 1px solid #e1e6ef; border-radius: 14px; padding: 1.5rem; }
.review-detail section { border-top: 1px solid #edf0f5; margin-top: 1.25rem; padding-top: 1rem; }
.review-detail h3 { font-size: .95rem; }
.review-detail dd { color: #526174; line-height: 1.5; margin: .25rem 0 1rem; }
.review-vote-form { border-top: 1px solid #edf0f5; display: grid; gap: .75rem; margin-top: 1.5rem; padding-top: 1rem; }
.review-vote-form textarea { border: 1px solid #c9d2df; border-radius: 8px; font: inherit; padding: .65rem .7rem; }

* { box-sizing: border-box; }

body { margin: 0; min-width: 320px; }

a { color: inherit; }

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1180px;
  margin: 0 auto;
  padding: 1.25rem 1.5rem;
}

.brand { color: #18212f; font-size: 1.15rem; font-weight: 800; letter-spacing: -0.03em; text-decoration: none; }
.api-link, .back-link { color: #41566f; font-size: .925rem; font-weight: 600; }

.page-shell { max-width: 1180px; margin: 0 auto; padding: 2rem 1.5rem 4rem; }

.hero { max-width: 700px; margin: 1.25rem 0 2.5rem; }
.eyebrow { color: #6254d8; font-size: .8rem; font-weight: 800; letter-spacing: .12em; margin: 0 0 .5rem; text-transform: uppercase; }
.hero h1 { color: #18212f; font-size: clamp(2.25rem, 5vw, 4.5rem); letter-spacing: -.065em; line-height: .98; margin: 0; }
.hero > p:last-child { color: #526174; font-size: 1.12rem; line-height: 1.65; margin: 1.25rem 0 0; }

.filters { background: #fff; border: 1px solid #e1e6ef; border-radius: 16px; box-shadow: 0 12px 32px rgba(40, 55, 80, .05); margin-bottom: 2rem; padding: 1.25rem; }
.filters form { align-items: end; display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; }
label { color: #3d4c5f; display: grid; font-size: .78rem; font-weight: 750; gap: .4rem; }
input, select { background: #fff; border: 1px solid #c9d2df; border-radius: 8px; color: #18212f; font: inherit; min-width: 0; padding: .65rem .7rem; }
select { cursor: pointer; }
input:focus { border-color: #6254d8; box-shadow: 0 0 0 3px rgba(98, 84, 216, .15); outline: none; }
.filter-actions { display: flex; gap: .5rem; }
button { background: #6254d8; border: 1px solid #6254d8; border-radius: 8px; color: white; cursor: pointer; font: inherit; font-weight: 700; padding: .65rem .85rem; white-space: nowrap; }
button:hover { background: #5143c2; }
button:disabled { cursor: wait; opacity: .6; }
.button-secondary { background: white; color: #41566f; }
.button-secondary:hover { background: #f1f3f7; }

.results-heading { align-items: center; color: #526174; display: flex; font-size: .95rem; justify-content: space-between; margin-bottom: 1rem; }
.view-toggle { align-items: center; display: flex; gap: .35rem; }
.view-toggle-label { font-size: .75rem; font-weight: 700; margin-right: .25rem; }
.view-toggle-button { align-items: center; background: transparent; border-color: #c9d2df; border-radius: 7px; color: #526174; display: inline-flex; font-size: .75rem; gap: .4rem; padding: .42rem .6rem; }
.view-toggle-button:hover { background: #f1f3f7; color: #18212f; }
.view-toggle-button[aria-pressed="true"] { background: #18212f; border-color: #18212f; color: #fff; }
.card-view-icon { display: grid; gap: 1px; grid-template-columns: repeat(2, 3px); }
.card-view-icon i { background: currentColor; display: block; height: 3px; width: 3px; }
.list-view-icon { display: grid; gap: 1px; }
.list-view-icon i { background: currentColor; display: block; height: 1px; width: 7px; }
.bounty-grid { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bounty-card { background: #fff; border: 1px solid #e1e6ef; border-radius: 14px; display: flex; flex-direction: column; min-height: 235px; padding: 1.3rem; text-decoration: none; transition: border-color .16s, box-shadow .16s, transform .16s; }
.bounty-card:hover { border-color: #bcb4f5; box-shadow: 0 12px 28px rgba(40, 55, 80, .1); transform: translateY(-2px); }
.card-top-row { align-items: center; display: flex; justify-content: space-between; gap: 1rem; }
.pill { background: #eceafd; border-radius: 999px; color: #5143c2; display: inline-block; font-size: .75rem; font-weight: 750; padding: .3rem .55rem; }
.price { color: #18212f; font-size: .95rem; }
.bounty-card h2 { font-size: 1.12rem; letter-spacing: -.025em; line-height: 1.25; margin: 1.1rem 0 .6rem; }
.card-statuses { align-items: flex-start; display: flex; flex-wrap: wrap; gap: .35rem; margin: -.15rem 0 .55rem; }
.submission-status { align-self: flex-start; background: #effaf3; border-radius: 999px; color: #26734d; font-size: .75rem; font-weight: 750; padding: .28rem .5rem; }
.review-status { background: #fff3cf; color: #765a13; }
.card-description { color: #5d6b7d; font-size: .9rem; line-height: 1.5; margin: 0; }
.metadata { border-top: 1px solid #edf0f5; color: #526174; display: grid; font-size: .78rem; gap: .25rem .6rem; grid-template-columns: auto 1fr; margin: auto 0 0; padding-top: 1rem; }
.metadata dt { font-weight: 700; }
.metadata dd { margin: 0; }
.metadata .expiration-urgent { color: #b42318; font-weight: 800; }
.bounty-grid.bounty-list-view { grid-template-columns: 1fr; }
.bounty-list-view .bounty-card { display: grid; gap: .5rem 1.4rem; grid-template-areas: "top title metadata" "statuses description metadata"; grid-template-columns: minmax(155px, .65fr) minmax(260px, 1.35fr) minmax(240px, 1fr); min-height: 0; padding: 1rem 1.15rem; }
.bounty-list-view .bounty-card:hover { transform: translateX(3px); }
.bounty-list-view .card-top-row { grid-area: top; }
.bounty-list-view .bounty-card h2 { align-self: center; grid-area: title; margin: 0; }
.bounty-list-view .card-statuses { grid-area: statuses; margin: 0; }
.bounty-list-view .card-description { grid-area: description; }
.bounty-list-view .metadata { align-content: center; border-left: 1px solid #edf0f5; border-top: 0; grid-area: metadata; margin: 0; padding: 0 0 0 1.4rem; }
.state-message { color: #526174; margin: 2rem 0; text-align: center; }
.state-error { color: #a32442; }
.load-more-wrap { display: flex; justify-content: center; margin-top: 1.75rem; }

.detail-shell { max-width: 820px; }
.back-link { display: inline-block; margin-bottom: 2rem; text-decoration: none; }
.back-link:hover { color: #5143c2; }
#bounty-detail { background: #fff; border: 1px solid #e1e6ef; border-radius: 16px; padding: clamp(1.5rem, 5vw, 3rem); }
.detail-header { border-bottom: 1px solid #e8ecf2; margin-bottom: 2rem; padding-bottom: 1.75rem; }
.detail-header h1 { color: #18212f; font-size: clamp(2rem, 5vw, 3.5rem); letter-spacing: -.055em; line-height: 1.02; margin: .85rem 0; }
.detail-price { color: #5143c2; font-size: 1.25rem; font-weight: 800; margin: 0; }
#bounty-detail section { margin: 2rem 0; }
#bounty-detail h2 { font-size: 1rem; margin-bottom: .65rem; }
#bounty-detail p { color: #526174; line-height: 1.65; }
.detail-metadata { border-top: 1px solid #e8ecf2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.detail-metadata > div { border-bottom: 1px solid #e8ecf2; padding: 1rem 0; }
.detail-metadata > div:nth-child(odd) { padding-right: 1rem; }
.detail-metadata > div:nth-child(even) { padding-left: 1rem; }
.detail-metadata dt { color: #657388; font-size: .76rem; font-weight: 750; text-transform: uppercase; }
.detail-metadata dd { color: #253244; font-weight: 600; line-height: 1.5; margin: .25rem 0 0; }

@media (max-width: 980px) {
  .filters form { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .filter-actions { grid-column: span 3; }
  .bounty-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bounty-list-view .bounty-card { grid-template-areas: "top title" "statuses description" "metadata metadata"; grid-template-columns: minmax(155px, .65fr) minmax(260px, 1.35fr); }
  .bounty-list-view .metadata { border-left: 0; border-top: 1px solid #edf0f5; grid-template-columns: repeat(4, auto 1fr); padding: .7rem 0 0; }
}

@media (max-width: 640px) {
  .site-header, .page-shell { padding-left: 1rem; padding-right: 1rem; }
  .page-shell { padding-top: 1rem; }
  .filters form, .bounty-grid { grid-template-columns: 1fr; }
  .results-heading { align-items: flex-start; gap: .75rem; }
  .view-toggle-label { display: none; }
  .bounty-list-view .bounty-card { display: flex; gap: 0; padding: 1rem; }
  .bounty-list-view .bounty-card h2 { margin: .75rem 0 .45rem; }
  .bounty-list-view .card-statuses { margin: 0 0 .45rem; }
  .bounty-list-view .metadata { grid-template-columns: auto 1fr; margin-top: .75rem; padding-top: .75rem; }
  .filter-actions { grid-column: auto; }
  .filter-actions button { flex: 1; }
  .detail-metadata { grid-template-columns: 1fr; }
  .detail-metadata > div:nth-child(odd), .detail-metadata > div:nth-child(even) { padding-left: 0; padding-right: 0; }
  .landing-hero { grid-template-columns: 1fr; }
  .section-content { grid-template-columns: 1fr; }
  .section-content.reverse { grid-template-columns: 1fr; }
  .steps-grid { grid-template-columns: 1fr; }
  .footer-content { grid-template-columns: repeat(2, 1fr); }
}

/* ===== LANDING PAGE STYLES ===== */

.landing-header {
  justify-content: space-between;
}

.header-nav {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.user-nav { position: relative; }
.user-nav[hidden], .modal-backdrop[hidden], .reviewer-action[hidden] { display: none; }
.user-menu-trigger { align-items: center; background: transparent; border: 0; color: #41566f; cursor: pointer; display: flex; font-size: .95rem; font-weight: 600; gap: .3rem; padding: .45rem 0; }
.user-balance { border-left: 1px solid #cfd6df; color: #526174; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .68rem; font-weight: 700; margin-left: .35rem; padding-left: .65rem; white-space: nowrap; }
.user-balance-empty { color: #788495; }
.user-nav-avatar { align-items: center; background: #eceafd; border-radius: 50%; color: #5143c2; display: inline-flex; flex: 0 0 28px; font-size: .78rem; font-weight: 800; height: 28px; justify-content: center; margin-right: .15rem; overflow: hidden; width: 28px; }
.user-nav-avatar img { height: 100%; object-fit: cover; width: 100%; }
.user-menu-trigger:hover, .user-menu-trigger:focus { background: transparent; color: #5143c2; outline: none; }
.user-menu-trigger:focus-visible { box-shadow: 0 0 0 3px rgba(98, 84, 216, .2); border-radius: 6px; }
.user-menu-list { background: #fff; border: 1px solid #e1e6ef; border-radius: 10px; box-shadow: 0 12px 28px rgba(40, 55, 80, .14); display: grid; gap: .15rem; min-width: 150px; opacity: 0; padding: .4rem; pointer-events: none; position: absolute; right: 0; top: calc(100% - .15rem); transform: translateY(-.25rem); transition: opacity .16s, transform .16s; visibility: hidden; z-index: 5; }
.user-nav:hover .user-menu-list, .user-nav:focus-within .user-menu-list { opacity: 1; pointer-events: auto; transform: translateY(0); visibility: visible; }
.user-menu-list .nav-link { border-radius: 6px; padding: .55rem .65rem; }
.user-menu-list .nav-link:hover { background: #f5f7fb; }

.header-spacer {
  flex: 1;
}

.nav-link {
  color: #41566f;
  font-size: .95rem;
  font-weight: 600;
  text-decoration: none;
  transition: color .16s;
}

.nav-link:hover {
  color: #5143c2;
}

.cta-button {
  background: #6254d8;
  color: white;
  padding: .55rem .85rem;
  border-radius: 8px;
  font-weight: 700;
  font-size: .9rem;
}

.cta-button:hover {
  background: #5143c2;
  color: white;
}

.login-link {
  color: #41566f;
}

.logout-link { color: #a32442; }
.logout-link:hover { color: #7c1830; }

.evidence-submission {
  align-items: flex-start;
  background: #f9f8fe;
  border: 1px solid #dcd8fb;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding: 1.25rem;
}

.evidence-submission h2, .evidence-submission p { margin: 0; }
.evidence-submission button { margin-top: .75rem; }
.evidence-submission.has-submitted { background: #effaf3; border-color: #b8e4c7; }
.evidence-submission.has-submitted h2 { color: #1d6b3d; }
#bounty-detail .evidence-submission.has-submitted p { color: #39724f; }
.evidence-submission.has-submitted button { background: #2e8b57; border-color: #2e8b57; }
.evidence-submission.has-submitted button:hover { background: #246f46; }
.reviewer-action { align-items: flex-start; background: #fffdf6; border: 1px solid #efd38a; border-radius: 12px; display: flex; flex-direction: column; gap: .4rem; margin-top: 1.25rem; padding: 1.25rem; }
.reviewer-action h2, .reviewer-action p { margin: 0; }
.reviewer-action button { margin-top: .6rem; }
.reviewer-task-list { display: grid; gap: .75rem; margin-top: .5rem; width: 100%; }
.reviewer-task { background: #fff; border: 1px solid #eadfbf; border-radius: 10px; padding: 1rem; }
.reviewer-task h3 { font-size: 1rem; margin: 0; }
.reviewer-task p { color: #526174; font-size: .9rem; line-height: 1.45; margin-top: .35rem; }
.reviewer-task button { margin-top: .8rem; }
.review-progress { border-top: 1px solid #cbd6c8; margin-top: .85rem; padding-top: .85rem; width: 100%; }
.review-progress-heading { align-items: baseline; display: flex; flex-wrap: wrap; gap: .35rem 1rem; justify-content: space-between; }
.review-progress-heading h3 { font-size: .9rem; margin: 0; }
.review-progress-count { color: #405344; font-size: .8rem; }
.review-progress-checks { display: grid; gap: .65rem; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; margin: .8rem 0; padding: 0; }
.review-progress-check { align-items: flex-start; display: flex; gap: .5rem; }
.review-progress-marker { align-items: center; background: #eef0ea; border: 1px solid #b7c0b3; border-radius: 50%; color: #52604f; display: flex; flex: 0 0 1.65rem; font-size: .8rem; font-weight: 700; height: 1.65rem; justify-content: center; }
.review-progress-check strong, .review-progress-check div > span { display: block; font-size: .78rem; line-height: 1.4; }
.review-progress-check div > span { color: #52604f; font-size: .73rem; margin-top: .15rem; }
.review-progress-check.is-completed .review-progress-marker { background: #267244; border-color: #267244; color: #fff; }
.review-progress-check.is-in_progress .review-progress-marker { background: #fff0bc; border-color: #b09a49; color: #68500e; }
.review-progress-check.is-not_needed .review-progress-marker { background: transparent; border-style: dashed; }
#bounty-detail .review-progress .review-progress-note, .review-progress .review-progress-note { color: #52604f; font-size: .75rem; line-height: 1.5; margin: 0; }
@media (max-width: 480px) {
  .review-progress-check { align-items: center; flex-direction: column; text-align: center; }
  .review-progress-marker { flex-basis: auto; width: 1.65rem; }
}
.docs-shell { display: grid; gap: 2.5rem; grid-template-columns: minmax(190px, 250px) minmax(0, 860px); margin: 0 auto; max-width: 1200px; padding: 3rem 1.5rem 5rem; }
.docs-nav { align-self: start; display: grid; gap: .65rem; position: sticky; top: 1.25rem; }
.docs-nav h1 { color: #18212f; font-size: 1.5rem; letter-spacing: -.03em; margin: -.35rem 0 .5rem; }
.docs-nav a { color: #526174; font-size: .92rem; text-decoration: none; }
.docs-nav a:hover { color: #5143c2; text-decoration: underline; }
.docs-content { min-width: 0; }
.docs-content section { border-top: 1px solid #e1e6ef; padding: 2.2rem 0; }
.docs-content section:first-child { border-top: 0; padding-top: 0; }
.docs-content h2 { color: #18212f; font-size: 1.6rem; letter-spacing: -.03em; margin: 0 0 1rem; }
.docs-content h3 { color: #26364a; font-size: 1.05rem; margin: 1.7rem 0 .6rem; }
.docs-content p, .docs-content li { color: #526174; line-height: 1.65; }
.docs-content code { background: #eef1f6; border-radius: 4px; color: #26364a; font-size: .9em; padding: .1em .3em; }
.docs-content pre { background: #18212f; border-radius: 10px; color: #eef4fc; margin: 1rem 0 1.3rem; max-width: 100%; overflow-x: auto; padding: 1rem 1.15rem; }
.docs-content pre code { background: transparent; color: inherit; font-size: .85rem; padding: 0; }
.docs-notice { background: #fff8df; border: 1px solid #efd38a; border-radius: 10px; color: #604d13; line-height: 1.55; margin: 1.25rem 0; padding: .9rem 1rem; }
.docs-notice code { background: rgba(255,255,255,.65); }
.docs-endpoint { align-items: center; border-bottom: 1px solid #edf0f5; display: flex; flex-wrap: wrap; gap: .55rem; padding: .8rem 0; }
.docs-endpoint code { background: transparent; font-weight: 700; padding: 0; }
.docs-endpoint > span:last-child { color: #65758a; font-size: .84rem; margin-left: auto; }
.method { border-radius: 4px; color: #fff; font-size: .72rem; font-weight: 800; letter-spacing: .04em; min-width: 52px; padding: .22rem .35rem; text-align: center; }
.method.get { background: #237b55; }
.method.post { background: #3554b8; }
.method.patch { background: #a76b00; }
.method.delete { background: #a23c3c; }
@media (max-width: 760px) { .docs-shell { display: block; padding-top: 2rem; } .docs-nav { margin-bottom: 2rem; position: static; } .docs-endpoint > span:last-child { margin-left: 0; width: 100%; } }
.modal-open { overflow: hidden; }
.modal-backdrop { align-items: center; background: rgba(24, 33, 47, .54); display: flex; inset: 0; justify-content: center; padding: 1rem; position: fixed; z-index: 10; }
.modal-backdrop.is-busy, .modal-backdrop.is-busy * { cursor: wait !important; }
.submission-confirmation-backdrop { z-index: 20; }
.evidence-modal { background: #fff; border-radius: 16px; box-shadow: 0 24px 60px rgba(24, 33, 47, .28); max-width: 580px; padding: 1.5rem; width: 100%; }
.submission-confirmation-modal { max-width: 500px; }
.submission-confirmation-modal p { color: #526174; line-height: 1.5; }
.submission-acknowledgement { align-items: flex-start; color: #18212f; display: flex; font-weight: 600; gap: .65rem; line-height: 1.45; margin: 1.25rem 0; }
.submission-acknowledgement input { flex: 0 0 auto; height: 1.1rem; margin-top: .15rem; width: 1.1rem; }
.submission-confirmation-error { color: #a32442; font-size: .9rem; min-height: 1.35rem; }
.review-modal { max-height: calc(100vh - 2rem); max-width: 760px; overflow-y: auto; }
.modal-header { align-items: flex-start; display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.modal-header .eyebrow { margin-bottom: .35rem; }
.modal-header h2 { color: #18212f; font-size: 1.5rem; letter-spacing: -.03em; margin: 0; }
.modal-close { background: transparent; border: 0; color: #526174; font-size: 1.75rem; line-height: 1; padding: .15rem .4rem; }
.modal-close:hover { background: #f1f3f7; color: #18212f; }
.evidence-modal form { display: grid; gap: .5rem; }
.evidence-modal textarea { border: 1px solid #c9d2df; border-radius: 8px; color: #18212f; font: inherit; padding: .65rem .7rem; resize: vertical; }
.evidence-modal textarea[readonly] { background: #f5f7fb; color: #526174; cursor: default; }
.evidence-modal textarea:focus { border-color: #6254d8; box-shadow: 0 0 0 3px rgba(98, 84, 216, .15); outline: none; }
.evidence-dropzone { background: #f9f8fe; border: 1px dashed #8d82e7; color: #5143c2; display: grid; gap: .35rem; padding: 1.25rem; text-align: center; white-space: normal; }
.evidence-dropzone:hover, .evidence-dropzone.is-dragging { background: #eceafd; border-color: #6254d8; }
.evidence-dropzone span { color: #657388; font-size: .82rem; font-weight: 500; }
.evidence-dropzone:disabled { cursor: not-allowed; }
.evidence-file-list { color: #41566f; display: grid; font-size: .85rem; gap: .35rem; list-style: none; margin: .25rem 0; padding: 0; }
.evidence-file-list li { align-items: center; background: #f5f7fb; border-radius: 6px; display: flex; justify-content: space-between; padding: .45rem .6rem; }
.attachment-delete { background: transparent; border: 0; color: #a32442; font-size: .8rem; padding: .2rem .4rem; }
.attachment-delete:hover { background: #fdeff2; color: #7c1830; }
.field-hint { color: #657388; font-size: .85rem; margin: -.15rem 0 .65rem; }
.modal-actions { display: flex; gap: .75rem; justify-content: flex-end; margin-top: .75rem; }
.form-message { font-size: .9rem; margin: .5rem 0 0; min-height: 1.35rem; }
.form-message-error { color: #a32442; }
.form-message-success { color: #26734d; }
.wallet-required-link { background: #5143c2; border-radius: 999px; color: #fff; cursor: pointer; display: inline-block; font-weight: 700; margin-top: .45rem; padding: .35rem .7rem; text-decoration: none; }
.wallet-required-link:hover { background: #3f329f; color: #fff; }

.breadcrumb-nav {
  margin-bottom: 1.5rem;
}

.breadcrumb-nav a {
  color: #41566f;
  font-size: .95rem;
  font-weight: 600;
  text-decoration: none;
}

.breadcrumb-nav a:hover {
  color: #5143c2;
}

.landing-page {
  max-width: 100%;
  padding: 0;
}

.landing-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  max-width: 1180px;
  margin: 0 auto;
  padding: 3rem 1.5rem;
}

.hero-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.hero-content .eyebrow {
  font-size: .8rem;
}

.hero-content h1 {
  font-size: clamp(2.25rem, 6vw, 3.5rem);
  letter-spacing: -.065em;
  line-height: 1.1;
  color: #18212f;
  margin: 0;
}

.hero-description {
  color: #526174;
  font-size: 1.12rem;
  line-height: 1.65;
  margin: 0.5rem 0 1rem;
}

.hero-actions {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
}

.button {
  display: inline-block;
  padding: .75rem 1.5rem;
  border-radius: 8px;
  font-weight: 700;
  text-decoration: none;
  font-size: .95rem;
  border: none;
  cursor: pointer;
  transition: all .16s;
  white-space: nowrap;
}

.button-primary {
  background: #6254d8;
  color: white;
}

.button-primary:hover {
  background: #5143c2;
  transform: translateY(-2px);
}

.button-secondary {
  background: white;
  color: #6254d8;
  border: 2px solid #6254d8;
}

.button-secondary:hover {
  background: #f5f7fb;
}

.hero-image-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-placeholder {
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: 12px;
  overflow: hidden;
  background: #f5f7fb;
}

.image-placeholder svg {
  width: 100%;
  height: 100%;
}

.image-placeholder img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.landing-metrics { display: grid; gap: 1rem; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 auto; max-width: 1180px; padding: 0 1.5rem 3rem; }
.metric-card { background: #fff; border: 1px solid #e1e6ef; border-radius: 12px; display: grid; gap: .35rem; padding: 1.25rem; }
.metric-card strong { color: #5143c2; font-size: clamp(1.5rem, 3vw, 2.15rem); letter-spacing: -.04em; }
.metric-card span { color: #526174; font-size: .85rem; font-weight: 650; }

.landing-section {
  max-width: 1180px;
  margin: 0 auto;
  padding: 3rem 1.5rem;
  border-top: 1px solid #e1e6ef;
}

.section-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: center;
}

.section-content.reverse {
  grid-template-columns: 1fr 1fr;
}

.section-content.reverse .section-image-placeholder {
  order: -1;
}

.section-text h2 {
  font-size: 2rem;
  letter-spacing: -.04em;
  line-height: 1.2;
  color: #18212f;
  margin: 0 0 1rem;
}

.section-text p {
  color: #526174;
  font-size: 1.05rem;
  line-height: 1.65;
  margin: 0 0 1.5rem;
}

.feature-list {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.feature-list li {
  color: #526174;
  font-size: .98rem;
  line-height: 1.5;
  padding-left: 1.75rem;
  position: relative;
}

.feature-list li:before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #6254d8;
  font-weight: 700;
  font-size: 1.2rem;
}

.section-image-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
}

.section-image-placeholder .image-placeholder {
  width: 100%;
  aspect-ratio: 1.25/1;
}

.how-it-works {
  background: #f9f8fe;
}

.how-it-works h2 {
  text-align: center;
  font-size: 2rem;
  letter-spacing: -.04em;
  line-height: 1.2;
  color: #18212f;
  margin: 0 0 2.5rem;
}

.steps-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.step-card {
  background: white;
  border: 1px solid #e1e6ef;
  border-radius: 12px;
  padding: 2rem 1.5rem;
  text-align: center;
}

.step-number {
  width: 50px;
  height: 50px;
  background: #6254d8;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 800;
  margin: 0 auto 1rem;
}

.step-card h3 {
  font-size: 1.1rem;
  letter-spacing: -.02em;
  line-height: 1.3;
  color: #18212f;
  margin: 0 0 0.75rem;
}

.step-card p {
  color: #526174;
  font-size: .95rem;
  line-height: 1.5;
  margin: 0;
}

.landing-cta-banner {
  max-width: 1180px;
  margin: 3rem auto;
  padding: 3rem 1.5rem;
  background: linear-gradient(135deg, #6254d8 0%, #5143c2 100%);
  border-radius: 16px;
  text-align: center;
  color: white;
}

.landing-cta-banner h2 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  letter-spacing: -.04em;
  line-height: 1.2;
  margin: 0 0 0.75rem;
  color: white;
}

.landing-cta-banner p {
  font-size: 1.1rem;
  line-height: 1.5;
  margin: 0 0 2rem;
  color: rgba(255, 255, 255, 0.95);
}

.banner-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.banner-actions .button-primary {
  background: white;
  color: #6254d8;
}

.banner-actions .button-primary:hover {
  background: #f5f7fb;
}

.banner-actions .button-secondary {
  background: transparent;
  color: white;
  border-color: white;
}

.banner-actions .button-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
}

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

.site-footer {
  background: #18212f;
  color: #b3bcc8;
  padding: 3rem 1.5rem 2rem;
  margin-top: 3rem;
}

.footer-content {
  max-width: 1180px;
  margin: 0 auto 2rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem;
}

.footer-section h3 {
  color: white;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  margin: 0 0 1rem;
}

.footer-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer-section a {
  color: #b3bcc8;
  text-decoration: none;
  font-size: .9rem;
  transition: color .16s;
}

.footer-section a:hover {
  color: #6254d8;
}

.footer-bottom {
  max-width: 1180px;
  margin: 0 auto;
  padding-top: 2rem;
  border-top: 1px solid #2a3a4a;
  text-align: center;
  font-size: .85rem;
  color: #7a8a9a;
}

.footer-bottom p {
  margin: 0;
}

/* ===== FAQ AND TERMS ===== */

.legal-page { max-width: 860px; }
.legal-page-header { margin: 1rem 0 2.5rem; }
.legal-page-header h1 { color: #18212f; font-size: clamp(2.25rem, 5vw, 3.5rem); letter-spacing: -.055em; line-height: 1.05; margin: 0 0 .9rem; }
.legal-page-header > p:not(.eyebrow) { color: #526174; line-height: 1.65; margin: 0; }
.legal-meta { font-size: .88rem; margin-top: 1rem !important; }
.legal-draft-notice { background: #fff6df; border: 1px solid #eed69a; border-radius: 10px; color: #735300 !important; margin-top: 1.25rem !important; padding: .85rem 1rem; }
.faq-group { margin: 2.5rem 0; }
.faq-group h2, .legal-content h2 { color: #18212f; font-size: 1.25rem; letter-spacing: -.025em; margin: 0 0 1rem; }
.faq-group details { background: #fff; border: 1px solid #e1e6ef; border-radius: 10px; margin: .75rem 0; padding: 0 1rem; }
.faq-group summary { color: #253244; cursor: pointer; font-weight: 700; padding: 1rem 1.5rem 1rem 0; }
.faq-group details p { color: #526174; line-height: 1.65; margin: 0 0 1rem; }
.legal-content { background: #fff; border: 1px solid #e1e6ef; border-radius: 16px; padding: clamp(1.5rem, 5vw, 3rem); }
.legal-content section + section { border-top: 1px solid #e8ecf2; margin-top: 1.75rem; padding-top: 1.75rem; }
.legal-content p { color: #526174; line-height: 1.7; margin: .75rem 0 0; }

/* ===== DASHBOARD ===== */

.dashboard-shell { max-width: 960px; }
.dashboard-header { margin: 1rem 0 2rem; }
.dashboard-header h1 { color: #18212f; font-size: clamp(2.25rem, 5vw, 3.5rem); letter-spacing: -.055em; margin: 0 0 .8rem; }
.dashboard-header > p:last-child { color: #526174; margin: 0; }
.wallet-card { background: #fff; border: 1px solid #e1e6ef; border-radius: 14px; margin: 0 0 1.25rem; padding: 1.35rem; }
.wallet-card-heading { align-items: flex-start; display: flex; gap: 1rem; justify-content: space-between; }
.wallet-card-heading h2 { color: #18212f; font-size: 1.3rem; margin: .25rem 0 1rem; }
.wallet-card p { color: #526174; line-height: 1.55; }
.wallet-network { background: #eef0f5; border-radius: 999px; color: #526174; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .65rem; padding: .35rem .55rem; white-space: nowrap; }
.wallet-otp-form { display: grid; gap: .5rem; margin-top: 1rem; max-width: 390px; }
.wallet-otp-form[hidden], .wallet-details[hidden], #wallet-empty[hidden] { display: none; }
.wallet-otp-form > div { display: flex; gap: .6rem; }
.wallet-otp-form input { flex: 1; min-width: 0; }
.wallet-details { display: grid; gap: 1rem; grid-template-columns: minmax(160px, .7fr) minmax(250px, 1.3fr) auto; }
.wallet-details > div { display: grid; gap: .35rem; }
.wallet-details span { color: #657388; font-size: .75rem; font-weight: 700; }
.wallet-details strong { color: #18212f; font-size: 1.45rem; }
.wallet-details code { color: #41566f; font-size: .78rem; overflow-wrap: anywhere; }
.wallet-address-link { align-items: center; display: inline-flex; text-decoration-color: #a7afbb; text-underline-offset: .2em; }
.wallet-address-link:hover code { color: #5143c2; }
.wallet-details button { align-self: end; }
.wallet-transactions { border-top: 1px solid #e1e6ef; margin-top: 1.25rem; padding-top: 1.25rem; }
.wallet-transactions-heading { align-items: baseline; display: flex; gap: 1rem; justify-content: space-between; }
.wallet-transactions-heading h3 { color: #18212f; font-size: 1rem; margin: 0; }
.wallet-transactions-heading a { color: #5143c2; font-size: .78rem; font-weight: 700; }
.wallet-transactions-list { display: grid; margin-top: .8rem; }
.wallet-transaction { align-items: center; border-top: 1px solid #e8ecf2; color: #253244; display: grid; gap: .8rem; grid-template-columns: 5.5rem minmax(0, 1fr) auto; padding: .85rem 0; text-decoration: none; }
.wallet-transaction:hover { background: #f7f8fa; }
.wallet-transaction-direction { border-radius: 999px; font-size: .68rem; font-weight: 800; justify-self: start; padding: .28rem .48rem; text-transform: uppercase; }
.wallet-transaction-direction.received { background: #ddf7e8; color: #17683e; }
.wallet-transaction-direction.sent { background: #f7e5e1; color: #8a382b; }
.wallet-transaction-direction.self { background: #eef0f5; color: #526174; }
.wallet-transaction-details { display: grid; gap: .2rem; min-width: 0; }
.wallet-transaction-details strong { font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wallet-transaction-details small { color: #657388; font-size: .7rem; }
.wallet-transaction-amount { font-size: .86rem; white-space: nowrap; }
.wallet-transaction-amount.received { color: #26734d; }
.dashboard-summary { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dashboard-stat { background: #fff; border: 1px solid #e1e6ef; border-radius: 12px; display: grid; gap: .4rem; padding: 1.25rem; }
.dashboard-stat span { color: #657388; font-size: .82rem; font-weight: 700; }
.dashboard-stat strong { color: #5143c2; font-size: 1.6rem; letter-spacing: -.035em; }
.dashboard-note { background: #fff6df; border: 1px solid #eed69a; border-radius: 10px; color: #735300; font-size: .9rem; line-height: 1.5; margin: 1rem 0 2rem; padding: .85rem 1rem; }
.dashboard-history { margin-top: 2.5rem; }
.dashboard-history h2 { color: #18212f; font-size: 1.3rem; margin: 0 0 1rem; }
.dashboard-submissions { display: grid; gap: .8rem; }
.dashboard-submission { background: #fff; border: 1px solid #e1e6ef; border-radius: 12px; display: block; padding: 1.1rem 1.2rem; text-decoration: none; transition: border-color .16s, box-shadow .16s; }
.dashboard-submission:hover { border-color: #bcb4f5; box-shadow: 0 8px 20px rgba(40, 55, 80, .08); }
.dashboard-submission h3 { color: #18212f; font-size: 1.05rem; margin: .8rem 0 .35rem; }
.dashboard-submission > p { color: #657388; font-size: .88rem; margin: 0; }
.dashboard-submission-footer { color: #657388; display: flex; font-size: .82rem; justify-content: space-between; margin-top: 1rem; }
.dashboard-submission-footer strong { color: #253244; }
.fee-disclosure { color: #657388; display: block; font-size: .76rem; font-weight: 650; margin-top: -.35rem; }

.profile-shell { max-width: 800px; }
.profile-header { margin: 1rem 0 2rem; }
.profile-header h1 { color: #18212f; font-size: clamp(2.25rem, 5vw, 3.5rem); letter-spacing: -.055em; margin: 0 0 .8rem; }
.profile-header > p:last-child { color: #526174; margin: 0; }
.profile-content { display: grid; gap: 1rem; }
.profile-card { background: #fff; border: 1px solid #e1e6ef; border-radius: 12px; padding: clamp(1.25rem, 4vw, 2rem); }
.profile-card h2 { color: #18212f; font-size: 1.2rem; margin: 0 0 1.25rem; }
.profile-photo-row { align-items: center; display: flex; gap: 1.25rem; }
.profile-photo-row p { color: #657388; font-size: .85rem; margin: .55rem 0 0; }
.profile-avatar { align-items: center; background: #eceafd; border-radius: 50%; color: #5143c2; display: flex; flex: 0 0 84px; font-size: 2rem; font-weight: 800; height: 84px; justify-content: center; overflow: hidden; width: 84px; }
.profile-avatar img { height: 100%; object-fit: cover; width: 100%; }
.photo-upload-button { background: #6254d8; border: 1px solid #6254d8; border-radius: 8px; color: #fff; cursor: pointer; display: inline-block; font-size: .9rem; font-weight: 700; padding: .65rem .85rem; }
.photo-upload-button:hover { background: #5143c2; }
.profile-fields { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.profile-fields input { width: 100%; }
.profile-field-full { grid-column: 1 / -1; }
.field-help { color: #657388; font-size: .85rem; margin: -.4rem 0 0; }
.form-message { font-size: .9rem; margin: 1rem 0; min-height: 1.2em; }
.form-message-success { color: #26734d; }
.form-message-error { color: #a32442; }

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

@media (max-width: 1024px) {
  .landing-hero {
    grid-template-columns: 1fr;
    padding: 2rem 1.5rem;
  }

  .hero-actions {
    flex-direction: column;
  }

  .section-content {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .section-content.reverse .section-image-placeholder {
    order: 0;
  }

  .steps-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }

  .landing-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wallet-details { grid-template-columns: 1fr; }
  .dashboard-summary { grid-template-columns: 1fr; }
  .profile-fields { grid-template-columns: 1fr; }

  .footer-content {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
  }
}

@media (max-width: 768px) {
  .wallet-transaction { gap: .55rem; grid-template-columns: 4.8rem minmax(0, 1fr); }
  .wallet-transaction-amount { grid-column: 2; }

  .landing-hero {
    padding: 1.5rem 1rem;
  }

  .hero-content h1 {
    font-size: 1.75rem;
  }

  .section-text h2 {
    font-size: 1.5rem;
  }

  .how-it-works h2 {
    font-size: 1.5rem;
  }

  .landing-cta-banner {
    margin: 2rem 1.5rem;
    padding: 2rem 1.5rem;
  }

  .banner-actions {
    gap: 0.75rem;
  }

  .banner-actions .button {
    flex: 1;
    min-width: 150px;
  }

  .steps-grid {
    grid-template-columns: 1fr;
  }

  .landing-metrics { padding-left: 1rem; padding-right: 1rem; }

  .step-card {
    padding: 1.5rem 1rem;
  }

  .header-nav {
    gap: 0.75rem;
  }

  .nav-link {
    font-size: .85rem;
  }

  .cta-button {
    padding: .45rem .7rem;
    font-size: .8rem;
  }
}

@media (max-width: 480px) {
  .landing-hero {
    padding: 1rem;
  }

  .hero-content h1 {
    font-size: 1.5rem;
  }

  .hero-content h1 br {
    display: none;
  }

  .hero-actions {
    flex-direction: column;
  }

  .hero-actions .button {
    width: 100%;
  }

  .section-content {
    padding: 1rem;
  }

  .section-text h2 {
    font-size: 1.3rem;
  }

  .feature-list {
    gap: 0.5rem;
  }

  .feature-list li {
    font-size: .9rem;
    padding-left: 1.5rem;
  }

  .how-it-works {
    padding: 1.5rem 1rem;
  }

  .how-it-works h2 {
    font-size: 1.3rem;
  }

  .step-card {
    padding: 1.25rem 1rem;
  }

  .landing-cta-banner {
    margin: 1.5rem;
    padding: 1.5rem 1rem;
  }

  .landing-cta-banner h2 {
    font-size: 1.3rem;
  }

  .landing-cta-banner p {
    font-size: .95rem;
  }

  .banner-actions {
    flex-direction: column;
  }

  .banner-actions .button {
    width: 100%;
  }

  .footer-content {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 0 1rem;
  }

  .header-nav {
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-end;
  }

  .nav-link {
    font-size: .8rem;
  }

  .cta-button {
    padding: .4rem .6rem;
    font-size: .75rem;
  }
}