/* Socks additions on top of the template's stylesheets.
   Everything here uses the template's own tokens so it stays in theme. */

html { scroll-behavior: smooth; }
section[id], .carousel[id] { scroll-margin-top: 90px; }
[hidden] { display: none !important; }

/* ---- logo ---- */
.sk-logo { display: flex !important; align-items: center; gap: 8px; width: auto !important; color: var(--text-primary); }
.sk-logo img { height: 27px !important; width: auto !important; flex: none; }
.sk-logo span { font-family: 'Space Grotesk', sans-serif; font-weight: 500; font-size: 26px; line-height: 1; letter-spacing: -.04em; }
.sk-logo-lg img { height: 42px !important; width: auto !important; }
.sk-logo-lg span { font-size: 40px; }
.sk-tagline { color: var(--text-secondary); }
.sk-glyph { height: 68px !important; width: auto !important; max-width: none; flex: none; align-self: flex-start; object-fit: contain; }

@media (min-width: 768px) {
  .sk-logo img { height: 35px !important; width: auto !important; }
  .sk-logo span { font-size: 32px; }
  .sk-logo-lg img { height: 42px !important; width: auto !important; }
  .sk-logo-lg span { font-size: 40px; }
}

/* ---- hero widget ---- */
h1.svelte-1arjust { max-width: 300px !important; }
@media (min-width: 1024px) { h1.svelte-1arjust { max-width: 440px !important; } }
.sk-static { cursor: default !important; }
.sk-static:hover { opacity: 1 !important; }
.sk-cardicon svg { width: 2.5rem; height: 2.5rem; }
.sk-tokenicon {
  border-radius: 50%; background: var(--btn-primary); color: var(--text-inverse);
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 16px;
}
.sk-select { position: relative; }
.sk-select select {
  position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer;
  font-size: 16px; -webkit-appearance: none; appearance: none;
}
.sk-select:focus-within { outline: 2px solid var(--text-primary); outline-offset: 2px; }
.sk-usd { display: flex; align-items: baseline; justify-content: flex-end; font-family: 'Space Mono', monospace; color: var(--text-secondary); font-size: 24px; }
.sk-usd input { width: 5ch; min-width: 0; }
@media (min-width: 768px) { .sk-usd { font-size: 28px; } }
.amount.svelte-olfzke { white-space: nowrap; }
.quote-error.svelte-olfzke { line-height: 1.4 !important; }
.volume.svelte-1arjust strong { font-weight: 700; }

/* ---- asset tape ---- */
.sk-tape { width: max-content; overflow: visible !important; gap: 0 !important; animation: sk-tape 60s linear infinite; }
.sk-tape li {
  width: auto !important; padding: 0 34px; white-space: nowrap;
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 22px; letter-spacing: -.02em;
  color: var(--text-primary);
}
.sk-tape li::before { content: ''; width: 9px; height: 9px; margin-right: 14px; background: var(--text-tertiary); display: inline-block; }
.carousel:hover .sk-tape { animation-play-state: paused; }
@keyframes sk-tape { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .sk-tape { animation: none; } }

/* ---- feature mocks ---- */
.sk-mock { position: relative; z-index: 10; height: 100%; display: flex; align-items: center; justify-content: center; padding: 14px 24px; }
.sk-panel {
  width: min(260px, 100%); background: #fffffff2; border: 1px solid #ffffff;
  box-shadow: 0 14px 34px #0000000d; padding: 8px 12px;
  font-family: 'Space Grotesk', sans-serif; font-size: 12px; color: var(--text-primary);
}
.sk-panel b { font-weight: 500; }
.sk-ok { color: var(--alert-success); }
.sk-kv > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 2px; }
.sk-kv > div + div { border-top: 1px solid var(--border-secondary); }
.sk-kv span { color: var(--text-secondary); }
.sk-kv .sk-head { flex-direction: column; gap: 2px; padding: 6px 2px 10px; }
.sk-kv .sk-head span { font-size: 10px; }
.sk-kv .sk-head b { font-family: 'Space Mono', monospace; font-size: 20px; }
.sk-list { padding: 0; display: flex; flex-direction: column; gap: 5px; background: transparent; border: 0; box-shadow: none; }
.sk-li { display: flex; align-items: center; gap: 8px; background: #fffffff2; border: 1px solid #fff; padding: 6px 10px; box-shadow: 0 8px 20px #0000000a; }
.sk-li em { font-style: normal; color: var(--text-secondary); font-size: 11px; margin-right: auto; }
.sk-dot { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-style: normal; font-size: 10px; font-weight: 700; flex: none; }
.sk-radio { width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--text-tertiary); }
.sk-radio.on { background: #7fd34e; border-color: #7fd34e; }
.sk-center { display: flex; align-items: center; justify-content: center; padding: 22px 12px; }
.sk-btn-light { color: #2f7df6; font-weight: 500; }
.sk-btn-blue { display: block; text-align: center; background: #5b9bf0; color: #fff; padding: 9px; font-weight: 700; border-radius: 999px; }
.sk-topup { display: flex; flex-direction: column; gap: 10px; padding: 12px; }
.sk-chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.sk-chips span { text-align: center; padding: 7px 0; border: 1px solid var(--border-primary); font-family: 'Space Mono', monospace; font-size: 11px; }
.sk-chips .on { background: var(--btn-primary); color: var(--text-inverse); border-color: var(--btn-primary); }
.sk-switch { width: 30px; height: 16px; border-radius: 999px; background: var(--bg-tertiary); position: relative; }
.sk-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px #0003; }

/* ---- how it works ---- */
.testimonials.svelte-e4leda .sk-note { padding: 24px; }
.testimonials.svelte-e4leda .sk-note b { display: block; font-family: 'Wix Madefor Text', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--text-primary); }
.sk-stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px; }
.sk-glass {
  width: min(430px, 100%); padding: 16px;
  background: #ffffff40; border: 1.3px solid #ffffff99; -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px);
  box-shadow: inset 0 1.5px .5px #ffffff8c, 0 12px 40px #0000000f;
  font-family: 'Space Grotesk', sans-serif; color: var(--text-primary);
  animation: sk-rise .45s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes sk-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sk-glass { animation: none; } }
.sk-glass h4 { display: flex; justify-content: space-between; font-size: 18px; font-weight: 500; padding: 4px 4px 14px; }
.sk-glass h4 span { color: var(--text-secondary); font-family: 'Space Mono', monospace; font-size: 14px; }
.sk-row { display: flex; align-items: center; gap: 12px; background: #fff; padding: 16px; box-shadow: 0 14px 34px #00000008; }
.sk-row + .sk-row { margin-top: 10px; }
.sk-row .sk-dot { width: 36px; height: 36px; font-size: 14px; }
.sk-row div { margin-right: auto; }
.sk-row div b { display: block; font-weight: 500; font-size: 16px; }
.sk-row div span { color: var(--text-secondary); font-size: 12px; }
.sk-row > b { font-family: 'Space Mono', monospace; font-weight: 400; font-size: 14px; }
.sk-row > .sk-ok { font-family: 'Space Grotesk', sans-serif; font-weight: 500; }
.sk-card {
  aspect-ratio: 1.586 / 1; width: min(340px, 100%); margin: 0 auto; padding: 22px;
  background: #1e1e1e; color: #fff; border-radius: 14px; display: flex; flex-direction: column; justify-content: space-between;
  box-shadow: 0 24px 50px #00000033; position: relative; overflow: hidden;
}
.sk-card::before { content: ''; position: absolute; inset: -40% -20% auto auto; width: 80%; aspect-ratio: 1; background: radial-gradient(circle, #9bf6ff66, #d4b3ee33 45%, transparent 68%); }
.sk-card > * { position: relative; }
.sk-card .sk-logo { color: #fff; }
.sk-card .sk-logo span { font-size: 22px; }
.sk-card .sk-logo img { height: 22px !important; width: auto !important; }
.sk-card p { font-family: 'Space Mono', monospace; font-size: 18px; letter-spacing: .12em; }
.sk-card small { display: block; font-family: 'Space Grotesk', sans-serif; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; opacity: .6; margin-top: 6px; }

/* ---- fees receipt ---- */
.sk-receipt { background: #1e1e2e; color: #cdd6f4; padding: 20px 22px; font-family: 'Space Mono', monospace; font-size: 13px; line-height: 1.6; }
.sk-receipt > div { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; }
.sk-receipt span { color: #9399b2; }
.sk-receipt b { font-weight: 400; color: #cdd6f4; text-align: right; }
.sk-receipt .sk-total { border-top: 1px dashed #45475a; margin-top: 6px; padding-top: 13px; }
.sk-receipt .sk-total b { color: #a6e3a1; }
.sk-receipt p { color: #6c7086; font-style: italic; margin-top: 12px; }

/* ---- faq ---- */
.sk-faq { border-top: 1px solid var(--border-primary); margin-top: 64px; }
@media (min-width: 768px) { .sk-faq { margin-top: 84px; } }
.sk-faq details { border-bottom: 1px solid var(--border-primary); }
.sk-faq details:last-child { border-bottom: 0; }
.sk-faq summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 24px 20px; color: var(--text-primary); font-weight: 500;
}
.sk-faq summary::-webkit-details-marker { display: none; }
.sk-faq summary::after { content: '+'; font-family: 'Space Mono', monospace; font-size: 22px; color: var(--text-secondary); flex: none; }
.sk-faq details[open] summary::after { content: '–'; }
.sk-faq summary:hover { background: var(--bg-primary); }
.sk-faq summary:focus-visible { outline: 2px solid var(--text-primary); outline-offset: -2px; }
.sk-faq p { color: var(--text-secondary); padding: 0 20px 28px; max-width: 760px; }
@media (min-width: 768px) {
  .sk-faq summary { padding: 28px 64px; }
  .sk-faq p { padding: 0 64px 32px; }
}

/* footer has two link columns of different meaning; keep the template grid */
footer .copy { line-height: 1.5; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 2px; }

/* ---- event strip ---- */
.sk-event {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: 22px 20px; border-bottom: 1px solid var(--border-primary); color: var(--text-primary);
}
.sk-event::before {
  content: ''; position: absolute; inset: -10px; z-index: 0;
  background: url(../images/landing/card-gradient.png) center / 160% 300%; filter: blur(20px); opacity: .5;
}
.sk-event > * { position: relative; z-index: 1; }
.sk-event-tag { background: var(--btn-primary); color: var(--text-inverse); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 7px 10px; }
.sk-event p { font-weight: 500; }
.sk-event-meta { display: flex; gap: 0; color: var(--text-secondary); font-family: 'Space Mono', monospace; font-size: 14px; }
.sk-event-meta span + span::before { content: '|'; margin: 0 12px; color: var(--text-tertiary); }
@media (min-width: 768px) {
  .sk-event { flex-direction: row; align-items: center; gap: 24px; padding: 22px 64px; }
  .sk-event-meta { margin-left: auto; font-size: 16px; }
}

.sk-logo img { flex: none; object-fit: contain; max-width: none; }