/* Home page (design: Ngital Website v2) */

.home-hero { position: relative; min-height: calc(100svh - var(--header-h)); display: flex; align-items: center; overflow: hidden; }
.home-hero__inner { padding-block: clamp(56px, 7vw, 104px); display: flex; flex-direction: column; gap: 32px; }
.home-hero .h1 { color: var(--white); }
.home-hero__intro { color: var(--on-navy-2); }
.home-hero__stripe { position: absolute; left: 0; right: 0; bottom: 0; }

.home-partners { display: flex; flex-direction: column; gap: 24px; }
.home-partners__head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px 24px; flex-wrap: wrap; }
.home-partners__head h2 { margin: 0; font-family: var(--font-head); font-weight: 700; font-size: clamp(18px, 1.58vw, 21px); letter-spacing: -0.01em; }
.home-partners__head p { margin: 0; font-size: 15px; color: var(--ink-3); }

.home-gap-20 { gap: 20px; }
.home-about__body { display: flex; flex-direction: column; gap: 20px; }
.home-about__link { color: var(--navy); font-weight: 700; border-bottom: 2px solid var(--orange); }
.home-founder-chip { display: flex; align-items: center; gap: 14px; }
.home-founder-chip img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 2px solid var(--navy); }
.home-founder-chip > span { display: flex; flex-direction: column; }
.home-founder-chip b { font-size: 16px; }

.home-why__intro { line-height: 1.6; }
.home-why__card { border-width: 2px; }
.home-why__card .card__index { color: var(--yellow); }

.home-rating { font-weight: 700; font-size: 16px; }

.home-founder { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: clamp(32px, 5vw, 72px); align-items: center; }
.home-founder__media { position: relative; aspect-ratio: 4 / 5; max-width: 520px; width: 100%; }
.home-founder__block { position: absolute; inset: 6% 0 0 6%; background: var(--orange); border-radius: 32px; }
.home-founder__media img { position: absolute; inset: 0 6% 6% 0; width: 94%; height: 94%; object-fit: cover; border-radius: 32px; background: var(--pink); }
.home-founder__copy { display: flex; flex-direction: column; gap: 20px; }
.home-founder__copy .body-lg { line-height: 1.6; }
.home-founder__name { display: flex; flex-direction: column; gap: 2px; }
.home-founder__name b { font-family: var(--font-head); font-weight: 700; font-size: 21px; }
.home-founder__name span { font-size: 16px; color: var(--ink-2); }
.home-founder__cta { align-self: flex-start; }

.home-awards { gap: clamp(56px, 7vw, 96px); }
.home-awards__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 16px; align-items: stretch; }
.home-awards__feature { background: var(--navy); color: var(--white); border-radius: 28px; padding: clamp(28px, 3vw, 40px); display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
.home-awards__feature .eyebrow { font-size: 13px; color: var(--yellow); }
.home-awards__big { display: flex; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.home-awards__num { font-family: var(--font-head); font-weight: 700; font-size: clamp(88px, 8.76vw, 124px); letter-spacing: -0.06em; line-height: 0.8; }
.home-awards__caption { font-family: var(--font-head); font-weight: 700; font-size: clamp(20px, 1.94vw, 25px); letter-spacing: -0.02em; line-height: 1.05; max-width: 12ch; padding-bottom: 4px; }
.home-awards__badges { background: var(--paper); border-radius: 16px; padding: 14px 18px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.home-awards__badges img { height: 44px; width: auto; }
.home-awards__tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 16px; }
.home-awards__tiles li { background: var(--paper); border: 2px solid var(--navy); border-radius: 24px; padding: 24px; display: flex; flex-direction: column; justify-content: space-between; gap: 20px; min-height: 150px; }
.home-awards__tiles .mono { font-size: 13px; color: var(--ink-3); }
.home-awards__tiles h3 { margin: 0; font-family: var(--font-head); font-weight: 700; font-size: clamp(20px, 1.76vw, 23px); line-height: 1.1; letter-spacing: -0.015em; text-wrap: balance; }

.home-members { display: flex; align-items: center; gap: 16px 24px; flex-wrap: wrap; padding: 24px 0; border-top: 2px solid var(--navy); border-bottom: 2px solid var(--navy); }
.home-members .mono { margin: 0; font-size: 13px; color: var(--ink-3); }
.home-members__chip { padding: 8px 16px; }

.home-press { display: flex; flex-direction: column; gap: 24px; }
.home-press h3 { margin: 0; font-family: var(--font-head); font-weight: 700; font-size: clamp(22px, 2.19vw, 29px); letter-spacing: -0.025em; }
.home-press__list { background: var(--paper); border: 2px solid var(--navy); border-radius: 28px; overflow: hidden; }
.home-press__list li + li { border-top: 1px solid var(--line-violet); }
.home-press__list a { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr) auto; gap: 8px 24px; align-items: baseline; padding: 20px clamp(20px, 2.5vw, 32px); color: var(--navy); }
.home-press__list a:hover { color: var(--orange); background: var(--cream); }
.home-press__list .mono { font-size: 13px; color: var(--ink-3); }
.home-press__title { font-weight: 600; font-size: 16px; line-height: 1.35; text-wrap: pretty; }
.home-press__list a > span:last-child { font-size: 16px; }
@media (max-width: 640px) {
	.home-press__list a { grid-template-columns: minmax(0, 1fr) auto; }
	.home-press__list .mono { grid-column: 1 / -1; }
}

.home-faq { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 48px; align-items: start; }
.home-faq__intro { display: flex; flex-direction: column; gap: 20px; }
.home-faq__intro .body-lg { line-height: 1.5; }
.home-faq__intro .btn { align-self: flex-start; }

/* Client logo marquee — every client is a real link in the HTML; home.js
   clones each row (aria-hidden) and adds .is-animated for the seamless loop.
   Without JS or with reduced motion it is a static, wrapping grid. */
.home-clients__intro { max-width: 760px; }
.logo-marquee { display: flex; flex-direction: column; gap: 14px; margin-top: 40px; }
.logo-marquee__row { overflow: hidden; }
.logo-marquee__track { list-style: none; margin: 0 auto; padding: 0 var(--gutter); max-width: var(--container); display: flex; flex-wrap: wrap; gap: 12px; }
.logo-marquee__item { flex: 0 0 auto; }
.logo-marquee__link { width: 200px; height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 16px; background: var(--paper); border: 2px solid var(--line-cream); border-radius: 20px; color: var(--navy); text-align: center; transition: border-color .2s, transform .2s, box-shadow .2s; }
.logo-marquee__link:hover, .logo-marquee__link:focus-visible { border-color: var(--navy); transform: translateY(-2px); box-shadow: var(--shadow-tile); color: var(--navy); }
.logo-marquee__logo { height: 64px; width: 100%; overflow: hidden; font-size: 11px; display: flex; align-items: center; justify-content: center; }
.logo-marquee__logo img { max-width: 100%; max-height: 64px; width: auto; height: auto; object-fit: contain; }
.logo-marquee__logo b { font-family: var(--font-head); font-size: 18px; }
.logo-marquee__name { font-weight: 700; font-size: 13px; line-height: 1.25; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.logo-marquee__industry { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.logo-marquee.is-animated .logo-marquee__row {
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.logo-marquee.is-animated .logo-marquee__track {
	flex-wrap: nowrap; width: max-content; max-width: none; margin: 0; padding: 0;
	animation: ng-marquee var(--marquee-duration, 60s) linear infinite;
}
.logo-marquee.is-animated .logo-marquee__row--reverse .logo-marquee__track { animation-direction: reverse; }
.logo-marquee.is-animated .logo-marquee__row:hover .logo-marquee__track,
.logo-marquee.is-animated .logo-marquee__row:focus-within .logo-marquee__track { animation-play-state: paused; }
@keyframes ng-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(calc(-50% - 6px)); }
}
@media (prefers-reduced-motion: reduce) {
	.logo-marquee.is-animated .logo-marquee__track { animation: none; }
}

/* Light hero: size to content instead of filling the viewport. */
.home-hero { min-height: 0; }
.home-hero__inner { padding-block: clamp(56px, 7vw, 96px) clamp(64px, 8vw, 104px); }