/* Home only: the company name, then what it makes. */
/* First-visit loader: the logo traces itself, then fills in. Same animation as adrenalinebot.xyz. */
html.loader-mini .home .loader { display: none; }
.home .loader { --deep: #B8002A; }
.loader-mark { position: relative; width: 283px; }
.loader-trace { width: 100%; height: auto; overflow: visible; display: block; }
.loader-ghost path { fill: var(--red); opacity: .08; }
.trace-path { fill: none; stroke: var(--red); stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 5px var(--red)) drop-shadow(0 0 12px var(--deep)); animation: loader-trace-draw 1.3s cubic-bezier(.65, 0, .35, 1) forwards; }
@keyframes loader-trace-draw { to { stroke-dashoffset: 0; } }
.loader-fill path { fill: var(--red); opacity: 0; filter: drop-shadow(0 0 10px var(--deep)); animation: loader-fill-in .5s ease 1.5s forwards; }
@keyframes loader-fill-in { to { opacity: 1; } }
.loader-label { position: absolute; bottom: -34px; left: -40px; right: -40px; text-align: center; font: 500 11px "Geist Mono", ui-monospace, monospace; letter-spacing: .15em; color: var(--muted); text-transform: uppercase; opacity: 0; animation: loader-label-in .4s ease 1.7s forwards; }
@keyframes loader-label-in { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .trace-path { animation: none; stroke-dashoffset: 0 !important; }
  .loader-fill path, .loader-label { animation: none; opacity: 1; }
}
.home .hero { padding: clamp(40px, 6vw, 72px) 0 clamp(28px, 4vw, 44px); }
.home .hero::before { display: none; }
.company { display: flex; align-items: center; justify-content: center; gap: clamp(16px, 2.4vw, 28px); text-align: center; }
@media (max-width: 640px) { .company { flex-direction: column; } }
.company img { flex: none; width: clamp(64px, 8vw, 104px); height: auto; }
.home h1 { font-size: clamp(2.5rem, 6vw, 4.6rem); letter-spacing: -0.035em; }
.home .lede { margin-top: 18px; max-width: none; text-align: center; }

/* products */
.home .band--products { border-top: 0; padding: 0 0 clamp(56px, 8vw, 96px); }
.home .band--products > .wrap { gap: 20px; }
.home .band--products h2 { font-size: var(--s1); font-weight: 600; letter-spacing: -0.01em; color: var(--muted); }
.home .products { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.home .product { --accent: #FF7D96; --ring: rgba(245, 3, 50, .35); position: relative; display: flex; flex-direction: column; gap: 0; padding: 0; overflow: hidden; border: 0; background: linear-gradient(160deg, #3A0812, #14060A 75%); transition: transform .2s ease; }
/* The outline sits on top of the card, so the artwork can't cover it. */
.home .product::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--ring); pointer-events: none; transition: box-shadow .2s ease; }
.home .product:hover { transform: translateY(-3px); }
.home .product:hover::after { box-shadow: inset 0 0 0 2px var(--accent); }
.product__art { flex: none; aspect-ratio: 16 / 10; overflow: hidden; background: #14060A; }
.home .product__art img { width: 100%; height: 100%; border-radius: 0; object-fit: cover; object-position: top left; }
.product__body { flex: 1; display: grid; grid-template-rows: auto auto 1fr auto; gap: 10px; padding: 24px; }
.product__kind { font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.home .product h3 { font-size: clamp(1.7rem, 2.4vw, 2.1rem); letter-spacing: -0.03em; }
.home .product p { color: #EBD5DA; }
.home .product .more { color: var(--accent); margin-top: 6px; }

.home .product--adrenaline { background: linear-gradient(160deg, #2E1216, #151014 80%); }
/* Logo covers: pinned to the art panel so they stay centred and never clip at any card size. */
.product__art { position: relative; }
.product--adrenaline .product__art { background: transparent; }
.home .product--adrenaline .product__art img { position: absolute; inset: 0; box-sizing: border-box; width: 100%; height: 100%; padding: 12%; object-fit: contain; object-position: center; }

.home .product--clover { --accent: #FF9DBC; --ring: rgba(240, 69, 123, .3); background: linear-gradient(160deg, #2C141F, #151018 80%); }
.product--clover .product__art { background: transparent; }
.home .product--clover .product__art img { position: absolute; inset: 0; box-sizing: border-box; width: 100%; height: 100%; padding: 7%; object-fit: contain; object-position: center; }

.home .product--btf { --accent: #7FAEFF; --ring: rgba(42, 116, 255, .45); background: linear-gradient(160deg, #101B44, #060B1A 75%); }
.home .product--btf .product__art img { object-position: center; }
.home .product--btf p { color: #D5DFF5; }
.home .product--btf h3 { font-family: "Lilita One", var(--font); font-weight: 400; letter-spacing: .005em; }
.wm-red { color: #FF4560; }
.wm-the { color: #fff; font-size: .62em; }
.wm-blue { color: #5B97FF; }

.home .product--box { --accent: #8FC4FF; --ring: rgba(62, 155, 240, .4); background: linear-gradient(160deg, #122A44, #0F1218 80%); }
.product--box .product__art { background: transparent; }
.home .product--box .product__art img { position: absolute; inset: 0; box-sizing: border-box; width: 100%; height: 100%; padding: 7%; object-fit: contain; object-position: center; }
.home .product--box p { color: #D8E4F2; }

/* partner and contact: small, after the products */
.closing { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.closing > div { display: grid; grid-template-rows: auto 1fr auto; gap: 12px; padding: clamp(24px, 3vw, 34px); border-radius: 20px; background: var(--surface); border: 1px solid var(--line); scroll-margin-top: 90px; }
.closing h2 { font-size: var(--s2); }
.closing p { color: var(--muted); max-width: 32em; }
.closing .actions { margin-top: 8px; }

/* footer in columns */
.home .foot__in { display: grid; grid-template-columns: minmax(200px, 1.2fr) repeat(3, minmax(120px, 1fr)); gap: 32px; align-items: start; }
.foot__col { display: grid; gap: 10px; align-content: start; }
.foot__h { font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); font-weight: 600; margin-bottom: 4px; }
.foot__col a { color: var(--muted); text-decoration: none; }
.foot__col a:hover { color: var(--text); }
.foot__base { grid-column: 1 / -1; padding-top: 24px; border-top: 1px solid var(--line-soft); }
.home .foot__copy { margin: 0; }

/* tablet: art beside the text */
@media (max-width: 980px) {
  .home .products { grid-template-columns: 1fr; }
  .home .product { flex-direction: row; }
  .product__art { width: 40%; aspect-ratio: auto; min-height: 220px; }
}
/* phone: art on top again */
@media (max-width: 640px) {
  .home .product { flex-direction: column; }
  .product__art { width: auto; min-height: 0; aspect-ratio: 16 / 10; }
  .closing { grid-template-columns: 1fr; }
  .home .foot__in { grid-template-columns: 1fr 1fr; }
  .foot__col:first-child { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { .home .product, .home .product:hover { transition: none; transform: none; } }

/* light mode */
html[data-theme="light"] .home .product { --accent: #B80026; --ring: rgba(214, 0, 44, .3); }
html[data-theme="light"] .home .product--adrenaline { background: #FFFFFF; }
html[data-theme="light"] .home .product--clover { --accent: #B3144F; --ring: rgba(179, 20, 79, .3); background: #FFFFFF; }
html[data-theme="light"] .home .product--btf { --accent: #1B4FBF; --ring: rgba(27, 79, 191, .35); background: linear-gradient(160deg, #EAF0FF, #FFFFFF 80%); }
html[data-theme="light"] .home .product p, html[data-theme="light"] .home .product--clover p, html[data-theme="light"] .home .product--btf p { color: var(--muted); }
html[data-theme="light"] .wm-red { color: #D6002C; }
html[data-theme="light"] .wm-the { color: var(--text); }
html[data-theme="light"] .wm-blue { color: #1B4FBF; }

/* four product cards */
@media (min-width: 1100px) {
  .product__kind { min-height: 2.8em; }
  .home .product h3 { font-size: 1.6rem; }
  .product__body { padding: 20px; }
}
@media (min-width: 981px) and (max-width: 1099px) { .home .products { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
html[data-theme="light"] .home .product--box { --accent: #1B5FA8; --ring: rgba(27, 95, 168, .32); background: #FFFFFF; }
html[data-theme="light"] .home .product--box p { color: var(--muted); }