/* Dayspring home page only (loaded by index.html after fx.css). */

.hx-hero .logos { margin-top: clamp(56px, 7vw, 96px); padding-bottom: clamp(24px, 3vw, 40px); }
.logos__track img { transition: opacity .3s, transform .3s var(--hx-ease); }
.logos__track img:hover { opacity: 1; transform: scale(1.06); }


/* Hero visual stage sizing + the illustration that breaks out of the frame */
.hx-stage { height: clamp(330px, 46vw, 580px); }
.hx-stage__clip { position: absolute; left: 0; right: 0; top: -40%; bottom: 0; overflow: hidden; border-radius: 0 0 34px 34px; pointer-events: none; }
.hx-stage__img { position: absolute; left: 50%; bottom: -3%; height: 91.5%; width: auto; max-width: none; transform: translate3d(-50%, var(--py, 0px), 0); filter: drop-shadow(0 40px 50px rgba(0, 8, 36, .55)); }
@media (max-width: 860px) {
  .hx-stage { height: clamp(300px, 70vw, 420px); }
  .hx-stage__img { height: 84%; }
  .hx-stage__clip { border-radius: 0 0 26px 26px; }
}

/* ---------- Products: expanding rows ----------
   One row open at a time: the open row fills with a light card and its text,
   button and illustration animate in. Without JS every row is simply open. */
.hx-products { overflow-x: clip; padding-bottom: calc(var(--hx-sheet-r) + clamp(48px, 6vw, 96px)); }
.hx-acc { display: grid; gap: 14px; }
.hx-row {
  --hx-extra: transform .4s var(--hx-ease), border-color .4s;
  position: relative; isolation: isolate; overflow: hidden; border-radius: 30px; color: var(--white);
  border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .035);
  transition: border-color .4s, transform .4s var(--hx-ease);
}
.hx-row::before { content: ''; position: absolute; inset: 0; z-index: -2; background: var(--card-grad); opacity: 0; transition: opacity .55s var(--hx-ease); }
.hx-row::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .35s; background: radial-gradient(480px circle at var(--mx, 50%) var(--my, 50%), rgba(31, 120, 255, .16), transparent 60%); }
.hx-row:hover::after { opacity: 1; }
.hx-row.is-active { border-color: rgba(255, 255, 255, .7); }
.hx-row.is-active::before { opacity: 1; }
.hx-row:not(.is-active):hover { border-color: rgba(255, 255, 255, .4); }

.hx-row__title { margin: 0; font: inherit; letter-spacing: 0; line-height: 1; color: inherit; }
.hx-row__head { display: flex; align-items: center; gap: clamp(14px, 3vw, 40px); width: 100%; padding: clamp(20px, 2.4vw, 32px) clamp(20px, 3vw, 44px); background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.hx-row__head:focus-visible { outline-offset: -4px; border-radius: 30px; }
.hx-row__logo { flex: 0 0 clamp(142px, 17vw, 236px); display: flex; }
.hx-row__logo .product__brand { height: 52px; padding: 11px 14px; box-sizing: border-box; display: inline-flex; background: var(--white); border-radius: 13px; box-shadow: 0 6px 20px rgba(0, 0, 0, .22); transition: transform .5s var(--hx-spring); }
.hx-row:hover .hx-row__logo .product__brand { transform: rotate(-3deg) scale(1.04); }
.hx-row__name { flex: 1; font: 500 clamp(26px, 3.8vw, 54px)/1.05 var(--font-head); letter-spacing: -.03em; color: var(--white); transition: color .45s, transform .55s var(--hx-ease); }
.hx-row.is-active .hx-row__name { color: var(--ink); }
.hx-row:not(.is-active):hover .hx-row__name { transform: translateX(12px); }
.hx-row__icon { flex: none; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; color: var(--white); border: 1.5px solid rgba(255, 255, 255, .42); transition: background-color .3s, border-color .3s, color .3s, rotate .55s var(--hx-spring); }
.hx-row__icon svg { width: 16px; height: 16px; }
.hx-row:not(.is-active):hover .hx-row__icon { background: var(--white); color: var(--ink); border-color: var(--white); }
.hx-row.is-active .hx-row__icon { rotate: 45deg; background: var(--ink); border-color: var(--ink); color: var(--white); }

/* Panel: height animates 0 -> auto via grid rows; hidden panels are removed from tab order */
.js .hx-row__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .7s var(--hx-ease); }
.js .hx-row.is-active .hx-row__panel { grid-template-rows: 1fr; }
.js .hx-row__inner { min-height: 0; overflow: hidden; visibility: hidden; transition: visibility 0s linear .7s; }
.js .hx-row.is-active .hx-row__inner { visibility: visible; transition-delay: 0s; }
.hx-row__body { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 48px); align-items: center; padding: 0 clamp(20px, 3vw, 44px) clamp(22px, 3vw, 40px); }
.hx-row:nth-child(even) .hx-row__art { order: -1; }
.hx-row__text p { font-size: clamp(16px, 1.45vw, 20px); max-width: 450px; margin-bottom: 30px; color: var(--slate); }
.hx-row__text .btn svg { width: 13px; height: 13px; }
.hx-row__art { position: relative; border-radius: 26px; overflow: hidden; display: grid; place-items: center; min-height: clamp(220px, 25vw, 330px); background: linear-gradient(135deg, var(--t1, #eaf2ff), var(--t2, #cfe0ff)); }
.hx-row__art::before, .hx-row__art::after { content: ''; position: absolute; border-radius: 50%; pointer-events: none; }
.hx-row__art::before { width: 64%; aspect-ratio: 1; animation: hxSpin 40s linear infinite; background: conic-gradient(from 0deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, .1), rgba(255, 255, 255, .85)); opacity: .7; }
.hx-row__art::after { width: 112%; aspect-ratio: 1; border: 2px dashed rgba(11, 26, 58, .13); animation: hxSpin 60s linear infinite reverse; }
.hx-row__art img { position: relative; z-index: 1; width: min(70%, 310px); animation: hxFloat 7s ease-in-out infinite alternate; }

/* What plays when a row opens: text rises in, illustration springs in from the side */
.js .hx-row__text > * { opacity: 0; translate: 0 20px; transition: opacity .35s, translate .35s; }
.js .hx-row.is-active .hx-row__text > * { opacity: 1; translate: 0 0; transition: opacity .6s var(--hx-ease) .25s, translate .7s var(--hx-ease) .25s; }
.js .hx-row.is-active .hx-row__text > :nth-child(2) { transition-delay: .36s; }
.js .hx-row__art { opacity: 0; scale: .88; translate: 48px 0; rotate: 4deg; transition: opacity .3s, scale .4s, translate .4s, rotate .4s; }
.js .hx-row.is-active .hx-row__art { opacity: 1; scale: 1; translate: 0 0; rotate: 0deg; transition: opacity .6s var(--hx-ease) .2s, scale .9s var(--hx-spring) .2s, translate .9s var(--hx-spring) .2s, rotate .9s var(--hx-spring) .2s; }
.js .hx-row:nth-child(even):not(.is-active) .hx-row__art { translate: -48px 0; rotate: -4deg; }

/* No JS (or home.js failed): every row is a plain open card */
html:not(.js) .hx-row { border-color: rgba(255, 255, 255, .7); }
html:not(.js) .hx-row::before { opacity: 1; }
html:not(.js) .hx-row__name { color: var(--ink); }
html:not(.js) .hx-row__icon { display: none; }
html:not(.js) .hx-row__head { cursor: default; }

@media (max-width: 760px) {
  .hx-row { border-radius: 24px; }
  .hx-row__head { display: grid; grid-template-columns: 1fr auto; gap: 14px 12px; }
  .hx-row__logo { grid-column: 1; grid-row: 1; flex: none; }
  .hx-row__logo .product__brand { height: 44px; padding: 9px 12px; }
  .hx-row__icon { grid-column: 2; grid-row: 1; width: 42px; height: 42px; }
  .hx-row__name { grid-column: 1 / -1; grid-row: 2; font-size: clamp(28px, 8vw, 36px); }
  .hx-row__body { grid-template-columns: 1fr; }
  .hx-row:nth-child(even) .hx-row__art { order: 0; }
  .hx-row__art { min-height: 220px; }
}

/* ---------- Mission: words light up as you scroll ---------- */
.hx-mission { overflow: hidden; padding: clamp(88px, 10vw, 140px) 0 calc(clamp(56px, 7vw, 96px) + var(--hx-sheet-r)); }
.hx-mission h2 { font-size: clamp(34px, 5.2vw, 70px); max-width: 1000px; margin: 0 auto 30px; letter-spacing: -.03em; line-height: 1.1; }
.hx-mission .lead { font-size: clamp(17px, 1.7vw, 22px); max-width: 760px; }
.js .hx-sw { opacity: .18; }
.hx-float { position: absolute; z-index: 0; pointer-events: none; }
.hx-float--ring { left: 9%; top: 22%; width: 74px; height: 74px; border: 3px solid var(--blue-300); border-radius: 50%; opacity: .5; animation: hxFloat 7s ease-in-out infinite alternate; }
.hx-float--sq { right: 10%; top: 30%; width: 58px; height: 58px; border: 3px solid var(--ink); border-radius: 16px; rotate: 14deg; background: #ffd166; box-shadow: 5px 5px 0 var(--ink); animation: hxFloat 8s ease-in-out infinite alternate; animation-delay: -3s; }
.hx-float--dot { left: 16%; bottom: 20%; width: 26px; height: 26px; border-radius: 50%; background: var(--amber); opacity: .8; animation: hxFloat 5s ease-in-out infinite alternate; animation-delay: -1s; }
@media (max-width: 860px) { .hx-float--ring, .hx-float--sq, .hx-float--dot { display: none; } }

/* ---------- Stats bento ---------- */
.hx-stats { position: relative; overflow: hidden; padding: clamp(80px, 10vw, 128px) 0 calc(clamp(80px, 10vw, 128px) + var(--hx-sheet-r)); }
.hx-stats::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(70% 70% at 50% 40%, #000, transparent); mask-image: radial-gradient(70% 70% at 50% 40%, #000, transparent); }
.hx-stats .section__head h2 { max-width: 860px; margin-inline: auto; }
.hx-bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; }
.hx-stat { --hx-extra: transform .4s var(--hx-ease), border-color .3s, background-color .3s; text-align: center; }
.hx-stat--big { grid-column: span 3; display: flex; align-items: center; justify-content: center; gap: 26px; padding: clamp(32px, 4vw, 52px) 28px; border-radius: 30px; background: var(--card-grad); border: 6px solid #1b2230; }
.hx-stat--big img { width: 58px; height: auto; flex: none; }
.hx-stat--big strong { display: block; font: 500 clamp(44px, 6vw, 80px)/1 var(--font-head); letter-spacing: -.03em; background: linear-gradient(90deg, #0657d0, #1f9bff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hx-stat--big span { display: block; color: var(--slate); font-size: 16px; margin-top: 8px; }
.hx-stat--small { grid-column: span 2; padding: 36px 16px; border-radius: 22px; background: #0e1624; border: 1px solid var(--hx-edge); }
.hx-stat--small strong { display: block; font: 500 clamp(32px, 3.6vw, 46px)/1.1 var(--font-head); color: var(--white); letter-spacing: -.02em; }
.hx-stat--small span { color: var(--mist); font-size: 15px; }
.hx-stat:hover { transform: translateY(-6px); }
.hx-stat--big:hover { border-color: #173a7a; }
.hx-stat--small:hover { border-color: rgba(31, 120, 255, .7); background: #101b30; }
[data-count] { display: inline-block; font-variant-numeric: tabular-nums; }
.hx-stats .stats__note { margin-top: 44px; max-width: 640px; margin-inline: auto; }
@media (max-width: 860px) { .hx-stat--big { grid-column: span 6; } .hx-stat--small { grid-column: span 2; padding: 26px 8px; } }
@media (max-width: 560px) { .hx-stat--small { grid-column: span 6; } .hx-stat--big { flex-direction: column; gap: 14px; } }

/* ---------- Core values ---------- */
.hx-values { overflow: hidden; padding-bottom: calc(clamp(72px, 9vw, 120px) + var(--hx-sheet-r)); }
.hx-vgrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 22px; }
.hx-vcard--wide { grid-column: span 4; display: grid; grid-template-columns: auto 1fr; column-gap: 30px; align-items: center; }
.hx-vcard--wide .badge-icon { grid-row: 1 / 3; margin: 0; width: 76px; height: 76px; border-radius: 22px; }
.hx-vcard--wide .badge-icon img { width: 38px; height: 38px; }
.hx-vcard--wide h3 { align-self: end; }
.hx-vcard--wide p { align-self: start; }
@media (max-width: 860px) { .hx-vgrid { grid-template-columns: 1fr 1fr; } .hx-vcard, .hx-vcard--wide { grid-column: span 1; } .hx-vcard--wide { grid-column: span 2; } }
@media (max-width: 560px) { .hx-vgrid { grid-template-columns: 1fr; } .hx-vcard--wide { grid-column: span 1; grid-template-columns: 1fr; } .hx-vcard--wide .badge-icon { grid-row: auto; margin-bottom: 22px; width: 58px; height: 58px; } }

/* ---------- Security: two cards ---------- */
.hx-security { padding: clamp(72px, 9vw, 120px) 0 calc(clamp(72px, 9vw, 120px) + var(--hx-sheet-r)); }
.hx-security__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.hx-scard { --hx-extra: transform .4s var(--hx-ease), box-shadow .4s var(--hx-ease); position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center; padding: clamp(28px, 3.6vw, 48px); border-radius: 32px; background: var(--card-grad); color: var(--slate); border: 2px solid rgba(255, 255, 255, .7); transition: transform .4s var(--hx-ease), box-shadow .4s var(--hx-ease); }
.hx-scard:hover { transform: translateY(-6px); box-shadow: 0 0 0 3px var(--blue-300), 10px 10px 0 3px rgba(31, 120, 255, .55); }
.hx-scard::before { content: ''; position: absolute; width: 280px; height: 280px; right: -90px; bottom: -110px; border-radius: 50%; background: radial-gradient(closest-side, rgba(31, 120, 255, .3), transparent); }
.hx-scard > * { position: relative; }
.hx-scard h2 { color: var(--ink); margin-bottom: 14px; }
.hx-scard img { width: 150px; animation: hxFloat 6.5s ease-in-out infinite alternate; }
@media (max-width: 860px) { .hx-security__grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .hx-scard { grid-template-columns: 1fr; } .hx-scard img { width: 110px; } }

/* ---------- Testimonials ---------- */
.hx-quotes { background: var(--panel-2); border-top: 1px solid var(--hx-edge); padding: clamp(72px, 9vw, 120px) 0 calc(clamp(72px, 9vw, 120px) + var(--hx-sheet-r)); }
.hx-quotes .section__head { margin-bottom: clamp(36px, 5vw, 56px); }
.home .quote { position: relative; width: 410px; padding: 32px; border-radius: 26px; background: linear-gradient(180deg, #252c38, #1b2029); border: 1px solid rgba(255, 255, 255, .09); transition: transform .4s var(--hx-ease), border-color .3s, box-shadow .4s; }
.home .quote::before { content: '\201C'; position: absolute; right: 24px; top: 8px; font: 600 96px/1 var(--font-head); color: rgba(31, 120, 255, .3); pointer-events: none; }
.home .quote:hover { transform: translateY(-8px) rotate(-.6deg); border-color: rgba(31, 120, 255, .7); box-shadow: 0 24px 50px rgba(0, 0, 0, .4); }
.home .quote blockquote { font-size: 16px; line-height: 1.65; }
@media (max-width: 560px) { .home .quote { width: 310px; padding: 26px; } }


@media (prefers-reduced-motion: reduce) {
  .js .hx-sw { opacity: 1; }
  .hx-float, .hx-row__art::before, .hx-row__art::after, .hx-row__art img, .hx-scard img { animation: none; }
  .js .hx-row__panel, .js .hx-row__inner, .js .hx-row__text > *, .js .hx-row__art, .hx-row::before, .hx-row__icon { transition: none; }
}