/*
 * Homepage layout. Tokens and shared components live in base.css.
 * Source: "HILO Design files/HILO Home.dc.html".
 *
 * Mobile rules are collected at the bottom rather than spread through the
 * file — the design ships desktop only, so every breakpoint here is a
 * decision rather than a translation, and they are easier to review together.
 */

/* ---------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------- */
.hl-hero {
	position: relative;
	/* The design fixes this at 700px. A fixed height clips the headline the
	   moment the viewport is short or the copy is edited longer, so it's a
	   minimum here and the stat strip flows after the content on mobile. */
	min-height: 700px;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	overflow: hidden;
	background: var(--hl-black);
}

.hl-hero__media,
.hl-hero__scrim,
.hl-hero__grid,
.hl-hero__bloom {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.hl-hero__media { z-index: 0; }
.hl-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Darkens left-to-right so the headline stays legible over any photo. */
.hl-hero__scrim {
	z-index: 1;
	background: linear-gradient(90deg,
		rgba(7, 8, 10, 0.95) 0%,
		rgba(7, 8, 10, 0.72) 45%,
		rgba(7, 8, 10, 0.25) 100%);
}

.hl-hero__grid {
	z-index: 2;
	background-image:
		linear-gradient(var(--hl-cyan-grid) 1px, transparent 1px),
		linear-gradient(90deg, var(--hl-cyan-grid) 1px, transparent 1px);
	background-size: 60px 60px;
}

/* Full-height wrapper; the 2px line is the ::before. See the note on
   @keyframes hiloScan in base.css for why it can't be the line itself. */
.hl-hero__scan {
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	animation: hiloScan 6s linear infinite;
}
.hl-hero__scan::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--hl-cyan), transparent);
	opacity: 0.5;
}

.hl-hero__bloom {
	z-index: 2;
	inset: auto auto -220px -140px;
	width: 640px;
	height: 640px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(224, 31, 19, 0.42), transparent 65%);
	filter: blur(30px);
}

/* The photo and the four overlay layers stay full-bleed; only the copy is
   held to the container. */
.hl-hero__inner {
	position: relative;
	z-index: 4;
	width: 100%;
	max-width: var(--hl-maxw);
	margin-inline: auto;
	padding: clamp(80px, 11vh, 120px) var(--hl-pad-x) 0;
	/* Leaves room for the stat strip pinned at the bottom. */
	padding-bottom: 160px;
}

.hl-hero__kicker { margin: 0; }

.hl-hero__heading {
	margin: 22px 0 0;
	font: 700 clamp(44px, 7.6vw, 108px)/0.9 var(--hl-font-head);
	letter-spacing: -0.02em;
	text-transform: uppercase;
	max-width: 900px;
}

.hl-hero__heading-accent {
	background: linear-gradient(100deg, var(--hl-orange), var(--hl-red));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.hl-hero__subline {
	margin: 26px 0 0;
	max-width: 470px;
	font: 400 16px/1.65 var(--hl-font-body);
	color: var(--hl-body);
	text-wrap: pretty;
}

.hl-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 34px;
}

.hl-hero__stats {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	max-width: var(--hl-maxw);
	z-index: 4;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	border-top: 1px solid var(--hl-cyan-hairline);
	background: rgba(7, 8, 10, 0.6);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.hl-hero__stat {
	padding: 22px clamp(16px, 3vw, 40px);
	border-right: 1px solid var(--hl-line);
}
.hl-hero__stat:last-child { border-right: none; }

/* dd before dt in the markup so the number reads first; the visual order is
   the same, so no ordering override is needed. */
.hl-hero__stat-value {
	margin: 0;
	font: 700 clamp(22px, 2.4vw, 30px)/1 var(--hl-font-head);
	color: var(--hl-cyan);
	white-space: nowrap;
}

.hl-hero__stat-label {
	margin-top: 6px;
	font: 500 10px/1 var(--hl-font-mono);
	letter-spacing: 0.18em;
	color: var(--hl-mono);
	text-transform: uppercase;
}

/* ---------------------------------------------------------------------
   Categories
   --------------------------------------------------------------------- */
.hl-categories__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	margin-top: 32px;
}

.hl-cat-card {
	position: relative;
	display: block;
	padding: 26px 22px 22px;
	background: var(--hl-surface);
	border: 1px solid var(--hl-line-2);
	border-radius: var(--hl-radius-card);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: border-color 0.18s;
}
.hl-cat-card:hover { border-color: var(--hl-cyan-border-strong); }

/* Tinted from the term's accent colour (--hl-card-accent, set inline) so all
   four cards come from one source rather than four hard-coded gradients. */
.hl-cat-card__glow {
	position: absolute;
	top: 0;
	right: 0;
	width: 70px;
	height: 70px;
	background: linear-gradient(225deg, var(--hl-card-accent), transparent 70%);
	opacity: 0.22;
}

.hl-cat-card__code {
	display: block;
	font: 500 10px/1 var(--hl-font-mono);
	letter-spacing: 0.2em;
	color: var(--hl-card-accent);
}

.hl-cat-card__name {
	/* margin:0 is load-bearing — this is an <h3>, and the browser default
	   margin would break the 52px gap the design specifies. */
	margin: 52px 0 0;
	font: 700 clamp(19px, 1.9vw, 24px)/1.05 var(--hl-font-head);
	text-transform: uppercase;
}

.hl-cat-card__patterns {
	display: block;
	margin-top: 12px;
	font: 400 13px/1.5 var(--hl-font-body);
	color: var(--hl-muted);
}

/* ---------------------------------------------------------------------
   Featured patterns
   The card itself (.hl-pattern-card) is shared with the Range page and the
   related row on pattern pages, so it lives in base.css.
   --------------------------------------------------------------------- */
.hl-featured__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
	margin-top: 32px;
}

.hl-featured__all {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 220px;
	padding: 26px 24px;
	background: var(--hl-heat-tile);
	border-radius: var(--hl-radius-product);
	color: var(--hl-on-heat);
	text-decoration: none;
}
.hl-featured__all:hover { color: var(--hl-on-heat); filter: brightness(1.06); }

.hl-featured__all-kicker {
	font: 500 10px/1 var(--hl-font-mono);
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.hl-featured__all-heading {
	display: block;
	font: 700 clamp(24px, 2.4vw, 30px)/1 var(--hl-font-head);
	text-transform: uppercase;
}

.hl-featured__all-link {
	display: block;
	margin-top: 14px;
	font: 600 12px/1 var(--hl-font-head);
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

/* ---------------------------------------------------------------------
   Technology
   --------------------------------------------------------------------- */
.hl-tech {
	position: relative;
	margin-top: var(--hl-section-y);
	padding: clamp(52px, 6vw, 80px) var(--hl-pad-x);
	background: var(--hl-black-2);
	border-top: 1px solid var(--hl-line);
	border-bottom: 1px solid var(--hl-line);
	overflow: hidden;
}

.hl-tech__texture {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: linear-gradient(rgba(23, 231, 220, 0.05) 1px, transparent 1px);
	background-size: 100% 8px;
	animation: hiloDrift 14s linear infinite;
}

/* The band's background and drift texture stay full-bleed; the two columns
   sit in the container. */
.hl-tech__inner {
	position: relative;
	max-width: var(--hl-maxw);
	margin-inline: auto;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(32px, 4.4vw, 64px);
	align-items: start;
}

.hl-tech__heading {
	margin: 18px 0 0;
	font: 700 clamp(30px, 3.8vw, 46px)/1.02 var(--hl-font-head);
	text-transform: uppercase;
}

.hl-tech__body {
	margin: 22px 0 0;
	max-width: 460px;
	font: 400 16px/1.65 var(--hl-font-body);
	color: var(--hl-body-2);
	text-wrap: pretty;
}

.hl-tech__list {
	list-style: none;
	margin: 34px 0 0;
	padding: 0;
}

.hl-tech__item {
	display: flex;
	gap: 22px;
	padding: 20px 0;
	border-top: 1px solid var(--hl-line-3);
}
.hl-tech__item:last-child { border-bottom: 1px solid var(--hl-line-3); }

.hl-tech__num {
	flex: none;
	min-width: 28px;
	font: 500 11px/1.6 var(--hl-font-mono);
	color: var(--hl-cyan);
}

.hl-tech__item-title {
	display: block;
	font: 700 16px/1.2 var(--hl-font-head);
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.hl-tech__item-body {
	display: block;
	margin-top: 6px;
	font: 400 14px/1.55 var(--hl-font-body);
	color: var(--hl-muted);
}

.hl-tech__more { display: inline-block; margin-top: 30px; }

.hl-tech__media {
	height: 520px;
	position: relative;
	border: 1px solid rgba(23, 231, 220, 0.2);
	border-radius: var(--hl-radius-product);
	overflow: hidden;
}
.hl-tech__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ---------------------------------------------------------------------
   Dual CTA band
   --------------------------------------------------------------------- */
/* Unlike the Technology band, this one's two backgrounds ARE the design — a
   full-bleed gradient panel butted against a dark one. Holding the whole grid
   to the container keeps the split aligned with every other section instead
   of running to the screen edge on a wide monitor. */
.hl-dual {
	max-width: var(--hl-maxw);
	margin-inline: auto;
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
}

.hl-dual__retail,
.hl-dual__trade {
	padding: clamp(48px, 5.6vw, 72px) var(--hl-pad-x);
}

.hl-dual__retail {
	background: var(--hl-heat-panel);
	color: var(--hl-on-heat);
}
/* The kicker is cyan by default; on the gradient panel that is unreadable. */
.hl-dual__kicker { color: inherit; }

.hl-dual__trade {
	background: var(--hl-surface);
	border-left: 1px solid var(--hl-line-2);
}

.hl-dual__body {
	margin: 18px 0 0;
	max-width: 420px;
	font: 400 15px/1.6 var(--hl-font-body);
	text-wrap: pretty;
}
.hl-dual__body--dark { color: var(--hl-body-2); max-width: 380px; }

.hl-dual__form {
	display: flex;
	margin-top: 28px;
	max-width: 420px;
}

.hl-dual__input {
	flex: 1;
	min-width: 0;
	padding: 16px 18px;
	border: none;
	background: rgba(10, 6, 5, 0.12);
	color: var(--hl-on-heat);
	font: 500 14px/1 var(--hl-font-mono);
	outline: none;
}
.hl-dual__input::placeholder { color: rgba(10, 6, 5, 0.55); }
.hl-dual__input:focus-visible { outline: 2px solid var(--hl-on-heat); outline-offset: -2px; }

.hl-dual__submit {
	border: none;
	background: #0a0b0d;
	color: #fff;
	font: 700 12px/1 var(--hl-font-head);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 0 26px;
	cursor: pointer;
	white-space: nowrap;
}
.hl-dual__submit:hover { background: #16181c; }

.hl-dual__trade-cta { margin-top: 28px; }

/* ---------------------------------------------------------------------
   Breakpoints
   The design bundle is desktop-only; these are the collapse rules its
   README lists as outstanding.
   --------------------------------------------------------------------- */
@media (max-width: 1100px) {
	.hl-categories__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hl-featured__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
	.hl-tech__inner { grid-template-columns: minmax(0, 1fr); }
	.hl-tech__media { height: 380px; }

	.hl-dual { grid-template-columns: minmax(0, 1fr); }
	.hl-dual__trade { border-left: none; border-top: 1px solid var(--hl-line-2); }
}

@media (max-width: 760px) {
	/* The stat strip stops fitting as four columns well before the rest of
	   the page breaks, and pinning it to the bottom of a min-height hero
	   would overlap the CTAs — so it flows after the content instead. */
	.hl-hero { min-height: 0; }
	.hl-hero__inner { padding-bottom: clamp(48px, 9vw, 72px); }
	.hl-hero__stats {
		position: static;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.hl-hero__stat:nth-child(2n) { border-right: none; }
	.hl-hero__stat:nth-child(-n+2) { border-bottom: 1px solid var(--hl-line); }

	.hl-hero__bloom { width: 380px; height: 380px; bottom: -160px; }
}

@media (max-width: 620px) {
	.hl-categories__grid,
	.hl-featured__grid { grid-template-columns: minmax(0, 1fr); }

	.hl-cat-card__name { margin-top: 32px; }

	.hl-dual__form { flex-direction: column; gap: 10px; }
	.hl-dual__submit { padding: 16px 26px; }
}