/* Home page: kit builder band and the "New" link in the hero. Brand Guidelines v1.0 tokens from main.css. */
.hero-new { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; padding: 7px 14px 7px 8px; border: 1px solid var(--ll-navy-line); border-radius: 999px; background: rgba(11, 31, 58, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff !important; font: 500 14px/1.2 var(--ll-font-body); text-decoration: none; transition: border-color .25s, transform .25s var(--ease); }
.hero-new:hover { border-color: var(--ll-green-signal); text-decoration: none; transform: translateY(-1px); }
.hero-new b { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 999px; background: var(--ll-green-signal); color: var(--ll-navy); font: 700 11px/1 var(--ll-font-code); letter-spacing: .06em; text-transform: uppercase; }
.hero-new b i { width: 6px; height: 6px; border-radius: 50%; background: var(--ll-navy); animation: pulse 1.6s infinite; }
.hero-new .icon { color: var(--ll-green-signal); transition: transform .25s var(--ease); }
.hero-new:hover .icon { transform: translateX(3px); }

.kithome { --kh-glow: 163, 213, 255; position: relative; overflow: hidden; isolation: isolate; padding: 96px 0; }
.kithome::before { content: ""; position: absolute; z-index: -1; inset: -20% -10%; background: radial-gradient(38% 46% at 72% 52%, rgba(var(--kh-glow), .18), transparent 70%), radial-gradient(30% 40% at 16% 20%, rgba(23, 195, 123, .12), transparent 70%); pointer-events: none; }
.kithome::after { content: ""; position: absolute; z-index: -1; inset: 0; background-image: linear-gradient(var(--ll-navy-line) 1px, transparent 1px), linear-gradient(90deg, var(--ll-navy-line) 1px, transparent 1px); background-size: 48px 48px; opacity: .12; -webkit-mask-image: radial-gradient(ellipse at 70% 50%, #000, transparent 70%); mask-image: radial-gradient(ellipse at 70% 50%, #000, transparent 70%); pointer-events: none; }
.kithome__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: center; }
.kithome__badge { display: inline-block; margin-left: 8px; padding: 2px 7px; border: 1px solid rgba(23, 195, 123, .5); border-radius: 6px; color: var(--ll-green-signal); font-size: 11px; letter-spacing: .06em; vertical-align: 1px; }
.kithome h2 { font-size: clamp(32px, 4vw, 48px); }
.kithome .lead { color: var(--ll-steel-light); }
.kithome__steps { list-style: none; display: grid; gap: 10px; margin: 28px 0 32px; padding: 0; }
.kithome__steps li { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border: 1px solid var(--ll-navy-line); border-radius: 14px; background: linear-gradient(90deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015)); }
.kithome__steps .code { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border: 1px solid rgba(var(--kh-glow), .45); border-radius: 10px; color: rgb(var(--kh-glow)); font-size: 12px; }
.kithome__steps b { display: block; color: #fff; font: 700 15px/1.3 var(--ll-font-heading); }
.kithome__steps small { color: var(--ll-steel-light); font-size: 13.5px; }
.kithome__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.kithome__count { color: var(--ll-steel-light); font-size: 12.5px; }

/* Stage: three kits floating over a moving grid floor. */
.kithome__stage { position: relative; display: block; aspect-ratio: 6 / 5; border: 1px solid var(--ll-navy-line); border-radius: 26px; background: radial-gradient(55% 50% at 50% 58%, rgba(var(--kh-glow), .14), transparent 70%), linear-gradient(180deg, #0f2647, #0a1b33); overflow: hidden; box-shadow: 0 50px 90px -45px rgba(0, 0, 0, .75), inset 0 1px 0 rgba(255, 255, 255, .06); transition: border-color .3s, transform .5s var(--ease); }
.kithome__stage:hover { border-color: rgba(var(--kh-glow), .55); transform: translateY(-3px); }
.kithome__stage .hud { border-color: rgba(var(--kh-glow), .6); }
.kithome__floor { position: absolute; left: -25%; right: -25%; bottom: -12%; height: 52%; background-image: linear-gradient(rgba(var(--kh-glow), .35) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--kh-glow), .35) 1px, transparent 1px); background-size: 46px 46px; transform: perspective(520px) rotateX(64deg); transform-origin: top center; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 30%, transparent 95%); mask-image: linear-gradient(to bottom, transparent, #000 30%, transparent 95%); opacity: .45; animation: khFloor 6s linear infinite; pointer-events: none; }
@keyframes khFloor { to { background-position: 0 46px, 0 0; } }
.kithome__kit { position: absolute; height: auto; filter: drop-shadow(0 28px 30px rgba(0, 0, 0, .45)); animation: khFloat 7s ease-in-out infinite; }
.kithome__kit--a { left: 3%; top: 22%; width: 40%; opacity: .78; animation-delay: -2.4s; }
.kithome__kit--b { left: 29%; top: 12%; width: 46%; z-index: 2; }
.kithome__kit--c { right: 2%; top: 24%; width: 38%; opacity: .78; animation-delay: -4.6s; }
@keyframes khFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.kithome__chip { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid var(--ll-navy-line); border-radius: 999px; background: rgba(11, 31, 58, .7); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; font-size: 11.5px; white-space: nowrap; }
.kithome__chip i { width: 8px; height: 8px; border-radius: 50%; }
.kithome__chip--top { top: 16px; left: 50%; transform: translateX(-50%); }
.kithome__chip--top i { background: var(--ll-green-signal); box-shadow: 0 0 10px var(--ll-green-signal); animation: pulse 1.6s infinite; }
.kithome__chip--a { left: 5%; bottom: 9%; }
.kithome__chip--a i { background: #ffb46a; box-shadow: 0 0 10px #ffb46a; }
.kithome__chip--c { right: 5%; bottom: 9%; }
.kithome__chip--c i { background: #a3d5ff; box-shadow: 0 0 10px #a3d5ff; }
.kithome__play { position: absolute; z-index: 3; left: 50%; bottom: 8%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: var(--ll-green-signal); color: var(--ll-navy); font: 700 14px/1 var(--ll-font-body); box-shadow: 0 10px 30px -8px rgba(23, 195, 123, .6); }

@media (max-width: 1080px) {
	.kithome__grid { grid-template-columns: 1fr; gap: 36px; }
	.kithome__stage { max-width: 680px; }
}
@media (max-width: 640px) {
	.kithome { padding: 64px 0; }
	.kithome__chip--a, .kithome__chip--c { display: none; }
	.hero-new { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
	.kithome__floor, .kithome__kit, .hero-new b i { animation: none; }
}