/* ============================================================
   DnrKyc · Ice theme for the PUBLIC pages (homepage, marketplace,
   deal history, services, log in, register). Loaded last in <head>.
   Frost-blue accent instead of gold, colder backgrounds, and the
   diamond / frost effects. The dashboard pages use static/ice.css.
   Only the homepage has the drifting crystals (.ice-fall) and the
   extra sparkles (.spark) in its markup.
   ============================================================ */
body.home {
  --accent: #8fd8ff; --accent-dim: #4ab3f4; --accent-bright: #d6f3ff; --on-accent: #04121f;
  --accent-soft: rgba(143,216,255,.14);
  --accent-grad: linear-gradient(135deg, #e6f8ff 0%, #8fd8ff 48%, #4ab3f4 100%);
  --accent-grad-h: linear-gradient(135deg, #f4fcff 0%, #aee4ff 48%, #63bff7 100%);
  --bg: #070b11; --surface: #0e141d; --raised: #121a25; --surface-2: #121a25;
  --text: #eef6fc; --muted: #8497ab;
  --border: rgba(190,228,255,.10); --border-strong: rgba(190,228,255,.18);
  /* prism edge: light catching a cut stone */
  --prism: linear-gradient(135deg, #8fd8ff 0%, #ffffff 30%, #c3b6ff 55%, #8fd8ff 80%, #e6f8ff 100%);
  --prism-dim: linear-gradient(135deg, rgba(143,216,255,.42) 0%, rgba(255,255,255,.20) 30%, rgba(195,182,255,.26) 55%, rgba(143,216,255,.42) 100%);
}

/* cold light falling in from the top */
body.home::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(900px 540px at 18% -10%, rgba(143,216,255,.16), transparent 70%),
    radial-gradient(760px 500px at 96% 4%, rgba(170,160,255,.09), transparent 70%),
    radial-gradient(1100px 700px at 50% 118%, rgba(74,179,244,.08), transparent 70%);
}

/* drifting ice crystals (tiny diamonds), behind the content */
.ice-fall { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.ice-fall i {
  position: absolute; top: -12px; width: var(--s); height: var(--s);
  background: linear-gradient(135deg, #ffffff, #8fd8ff);
  animation: iceFall var(--d) linear infinite; will-change: transform;
}
@keyframes iceFall {
  from { transform: translate3d(0, -4vh, 0) rotate(45deg); }
  to   { transform: translate3d(var(--w), 108vh, 0) rotate(405deg); }
}

/* ---- headline: "Crypto" is cut ice, with a glint running over it and sparkles ---- */
body.home h1 .hl {
  position: relative; display: inline-block; color: #8fd8ff;
  background: linear-gradient(105deg, #4ab3f4 0%, #8fd8ff 28%, #f6fdff 47%, #ffffff 50%, #8fd8ff 64%, #6cc6fb 100%);
  background-size: 280% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: iceGlint 6s ease-in-out infinite;
}
@keyframes iceGlint { 0%, 50% { background-position: 100% 0; } 100% { background-position: 0% 0; } }
.spark {
  position: absolute; width: 18px; height: 18px; background: #fff; pointer-events: none;
  clip-path: polygon(50% 0, 59% 41%, 100% 50%, 59% 59%, 50% 100%, 41% 59%, 0 50%, 41% 41%);
  transform: scale(0); animation: iceTwinkle 3.6s ease-in-out infinite;
}
.spark.s1 { right: -16px; top: -4px; }
.spark.s2 { left: 22%; top: -12px; width: 11px; height: 11px; animation-delay: 1.3s; }
.spark.s3 { right: 24%; bottom: -2px; width: 9px; height: 9px; animation-delay: 2.4s; background: #d6f3ff; }
@keyframes iceTwinkle { 0%, 55%, 100% { transform: scale(0) rotate(0deg); opacity: 0; } 70% { transform: scale(1) rotate(20deg); opacity: 1; } 85% { transform: scale(.5) rotate(40deg); opacity: .7; } }
body.home h1 u { text-decoration-color: #8fd8ff; }
/* "Escrow" next to the logo: the same cut ice + glint, and one small sparkle */
body.home .topbar .brand span.ice {
  position: relative; display: inline-block; color: #8fd8ff;
  background: linear-gradient(105deg, #4ab3f4 0%, #8fd8ff 28%, #f6fdff 47%, #ffffff 50%, #8fd8ff 64%, #6cc6fb 100%);
  background-size: 280% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: iceGlint 6s ease-in-out 1.2s infinite;
}
body.home .topbar .brand .spark { width: 9px; height: 9px; right: -8px; top: -3px; animation-delay: .8s; }

/* ---- logo: a little bigger, and it gives way like a pillow where you push it ---- */
html:root body.home .topbar .brand-logo { height: 2.3em; width: 2.3em; }
body.home .topbar .brand { perspective: 260px; }
body.home .topbar .brand-logo {
  transform-origin: 50% 50%; will-change: transform;
  /* letting go: it springs back with a soft wobble */
  transition: transform .55s cubic-bezier(.3,1.9,.45,1), filter .3s ease;
}
/* while the cursor is on it the script tilts it towards the pressed spot */
body.home .topbar .brand-logo.pressing { transition: transform .12s ease-out, filter .2s ease; filter: brightness(.93); }

/* ---- top bar: frosted glass ---- */
body.home .topbar, body.home .bar-wrap {
  background: rgba(12,19,28,.62) !important;
  -webkit-backdrop-filter: blur(16px) saturate(150%) !important; backdrop-filter: blur(16px) saturate(150%) !important;
  border-color: rgba(190,228,255,.16) !important;
}
body.home .nav a.active { background: rgba(143,216,255,.14); }

/* ---- main buttons: clear ice, crisp edge, no glow ---- */
body.home .btn-main, body.home .topbar-cta, body.home .menu a.login {
  background: var(--accent-grad) !important; color: #04121f !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75), inset 0 -1px 0 rgba(4,18,31,.18) !important;
}
body.home .btn-main:hover, body.home .topbar-cta:hover { background: var(--accent-grad-h) !important; }
/* header font, but compact: smaller and tighter so the button does not get wider */
body.home .btn-start { font-family: Unbounded, sans-serif !important; font-weight: 700 !important; font-size: .76rem !important; letter-spacing: -.02em; }
body.home .btn-start svg { width: 1.1rem; height: 1.1rem; margin-right: -.05rem; }
body.home .btn-ghost { border-color: rgba(190,228,255,.2); background: rgba(143,216,255,.04); }
body.home .btn-ghost:hover { border-color: rgba(190,228,255,.5); background: rgba(143,216,255,.09); }

/* ---- cards: prism edge, diamond facets in ice, frost creeping in from the corners ---- */
body.home .hiw-card {
  border: 2px solid transparent;
  background: linear-gradient(#090e15, #090e15) padding-box, var(--prism-dim) border-box;
}
body.home .hiw-card:hover { border-color: transparent; background: linear-gradient(#0a1019, #0a1019) padding-box, var(--prism) border-box; }
body.home .hiw-art {
  background-color: #0f1822; border-bottom-color: rgba(190,228,255,.10);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='96' viewBox='0 0 56 96'><path d='M28 0 L56 48 L28 96 L0 48 Z' fill='%23142230' stroke='%232f4a63' stroke-width='0.7'/><path d='M0 0 L28 48 L0 96' fill='%230d1620' stroke='%23263c52' stroke-width='0.6'/><path d='M56 0 L28 48 L56 96' fill='%230d1620' stroke='%23263c52' stroke-width='0.6'/></svg>");
}
/* a soft sheen from the top left, like light through ice */
body.home .hiw-art::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(135deg, rgba(214,243,255,.13) 0%, rgba(143,216,255,.05) 32%, transparent 58%);
}
/* frost: an icy grain that is thick in the corners and gone towards the middle */
body.home .hiw-art::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .46;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='f' x='0' y='0' width='100%25' height='100%25'><feTurbulence type='fractalNoise' baseFrequency='.035 .06' numOctaves='4' seed='11' result='a'/><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='3' result='b'/><feComposite in='a' in2='b' operator='arithmetic' k1='1.6' k2='.25' k3='.1' k4='-.12'/><feColorMatrix values='0 0 0 0 .86  0 0 0 0 .95  0 0 0 0 1  0 0 0 3.4 -.6'/></filter><rect width='260' height='260' filter='url(%23f)'/></svg>");
  -webkit-mask-image: radial-gradient(88% 105% at 50% 50%, transparent 62%, rgba(0,0,0,.45) 86%, #000 100%);
          mask-image: radial-gradient(88% 105% at 50% 50%, transparent 62%, rgba(0,0,0,.45) 86%, #000 100%);
}
body.home .hiw-art > * { position: relative; z-index: 1; }
body.home .hiw-art > .hiw-num { position: absolute; }
body.home .hiw-card { --tag: #8fd8ff; }
body.home .hiw-body p b { color: #eef6fc; }

/* the escrow lock: frozen solid */
body.home .a4 .lock, body.home .s1 .lock {
  color: #d6f3ff; border-color: rgba(190,228,255,.55);
  background: linear-gradient(160deg, rgba(214,243,255,.26), rgba(74,179,244,.10) 55%, rgba(12,20,29,.9));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 0 14px rgba(143,216,255,.22);
}

/* ---- Recent deals: when a set leaves, it is blown away to the left in a small snow storm ---- */
body.home .recent-wrap { position: relative; }
body.home .recent-card { background: rgba(12,19,28,.78); border-color: rgba(190,228,255,.14); }
body.home .recent-card.out { animation: recentOutIce .75s ease-in both; }
@keyframes recentOutIce {
  0%   { opacity: 1; transform: none; filter: none; }
  30%  { opacity: 1; filter: brightness(1.5) blur(.6px); }
  100% { opacity: 0; transform: translateX(-80px); filter: brightness(2.1) blur(7px); }
}
.recent-snow { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.recent-snow i {
  position: absolute; width: var(--s); height: var(--s); border-radius: 50%; opacity: 0;
  background: radial-gradient(circle at 35% 35%, #ffffff, #cfeeff 70%);
  animation: snowBlow var(--t) cubic-bezier(.3,.1,.5,1) var(--dl) both; will-change: transform, opacity;
}
.recent-snow i.shard { border-radius: 0; background: linear-gradient(135deg, #ffffff, #8fd8ff); }
@keyframes snowBlow {
  0%   { opacity: 0; transform: translate3d(0, 0, 0) rotate(45deg) scale(.6); }
  12%  { opacity: 1; }
  100% { opacity: 0; transform: translate3d(var(--dx), var(--dy), 0) rotate(260deg) scale(1); }
}

/* FAQ: same prism edge as the cards above, ice-blue plus sign */
body.home .faq details.card {
  border: 2px solid transparent !important;
  background: linear-gradient(#090e15, #090e15) padding-box, var(--prism-dim) border-box !important;
}
body.home .faq details.card:hover, body.home .faq details.card[open]:not(.closing) {
  border-color: transparent !important;
  background: linear-gradient(#0a1019, #0a1019) padding-box, var(--prism) border-box !important;
}
body.home .faq details.card summary::after { color: #8fd8ff; border-color: rgba(190,228,255,.26); }
body.home .faq details.card p { border-top-color: rgba(190,228,255,.10); color: #8497ab; }
/* FAQ + plain cards */
body.home .card { border-color: rgba(190,228,255,.14); background: rgba(12,19,28,.72); }
body.home .card:hover { border-color: rgba(143,216,255,.5); }
body.home .sec-title { color: #eef6fc; }
body.home footer, body.home .site-foot { border-top-color: rgba(190,228,255,.10); }

/* ---------- the other public pages (no extra markup needed) ---------- */
/* "Escrow" in the top bar: cut ice with a glint and one small sparkle */
body.home .topbar .brand span:not(.ice) {
  position: relative; display: inline-block; color: #8fd8ff;
  background: linear-gradient(105deg, #4ab3f4 0%, #8fd8ff 28%, #f6fdff 47%, #ffffff 50%, #8fd8ff 64%, #6cc6fb 100%);
  background-size: 280% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: iceGlint 6s ease-in-out 1.2s infinite;
}
body.home .topbar .brand span:not(.ice)::after {
  content: ""; position: absolute; right: -8px; top: -3px; width: 9px; height: 9px; background: #fff; pointer-events: none;
  clip-path: polygon(50% 0, 59% 41%, 100% 50%, 59% 59%, 50% 100%, 41% 59%, 0 50%, 41% 41%);
  transform: scale(0); animation: iceTwinkle 3.6s ease-in-out .8s infinite;
}
/* logo push (static/ice.js) */
.ice-logo { will-change: transform; transition: transform .55s cubic-bezier(.3,1.9,.45,1), filter .3s ease; }
.ice-logo.pressing { transition: transform .12s ease-out, filter .2s ease; filter: brightness(.93); }

/* listing cards, history cards and the log in / register card: prism edge */
body.home .mk-item, body.home .auth-card {
  border: 2px solid transparent;
  background: linear-gradient(#090e15, #090e15) padding-box, var(--prism-dim) border-box;
}
body.home .mk-item:hover, body.home .auth-card:hover {
  border-color: transparent;
  background: linear-gradient(#0a1019, #0a1019) padding-box, var(--prism) border-box;
}
body.home .mk-foot { border-top-color: rgba(190,228,255,.09); }
/* fields */
body.home .auth-card input, body.home .mk-search input, body.home .modal .box input, body.home .modal .box select, body.home .modal .box textarea {
  background-color: #070c13; border-color: rgba(190,228,255,.18);
}
body.home .auth-card input:focus, body.home .mk-search input:focus, body.home .modal .box input:focus,
body.home .modal .box select:focus, body.home .modal .box textarea:focus { border-color: rgba(143,216,255,.7); }
/* the icon on the log in / register card: frozen like the escrow lock */
body.home .auth-ico {
  color: #d6f3ff; border-color: rgba(190,228,255,.55);
  background: linear-gradient(160deg, rgba(214,243,255,.26), rgba(74,179,244,.10) 55%, rgba(12,20,29,.9));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 0 14px rgba(143,216,255,.22);
}
body.home .auth-alt { border-top-color: rgba(190,228,255,.09); }
/* popups: frosted glass with a prism edge */
body.home .modal { -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); }
body.home .modal .box {
  border: 1px solid transparent;
  background: linear-gradient(rgba(11,17,25,.97), rgba(11,17,25,.97)) padding-box, var(--prism-dim) border-box;
}

/* homepage: the three buttons under the headline stay on one row on desktop */
@media (min-width: 900px) {
  body.home .hero .actions { gap: .5rem; flex-wrap: nowrap; }
  body.home .hero .actions .btn { padding-left: 1rem; padding-right: 1rem; white-space: nowrap; }
}

/* ---- logo name "Safescrow": "Safe" white, "escrow" cut ice; the shared "e" turns from
   white into ice across its middle, so it reads as Safe + Escrow in one word ---- */
body.home .topbar .brand span.sw,
body.home .topbar .brand span.sw-w,
body.home .topbar .brand span.sw-e {
  position: static; animation: none; background-image: none;
  color: #fff; -webkit-text-fill-color: #fff;
}
body.home .topbar .brand span.sw { display: inline-flex; align-items: baseline; gap: 0; }
body.home .topbar .brand span.sw-w, body.home .topbar .brand span.sw-e { display: inline; }
/* the letters sit right next to each other (site.css gives every span in the logo a gap in front) */
html:root body.home .topbar .brand span.sw > span { margin-left: 0 !important; }
body.home .topbar .brand span.sw-e {
  color: #8fd8ff;
  background-image: linear-gradient(90deg, #ffffff 0%, #ffffff 40%, #8fd8ff 60%, #8fd8ff 100%);
  background-size: 100% 100%; background-position: 0 0;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
body.home .topbar .brand span.sw::after,
body.home .topbar .brand span.sw-w::after,
body.home .topbar .brand span.sw-e::after { content: none; }

/* ---- bigger logo + "Safescrow" in the top bar; the bar itself keeps its height:
   the logo reaches a little into the bar's padding (negative margin) instead of pushing it ---- */
html:root body.home:not(:has(aside.side)) .topbar .brand { font-size: 1.42rem !important; }
html:root body.home .topbar .brand-logo { height: 1.95em !important; width: 1.95em !important; margin-top: -.2em; margin-bottom: -.2em; }