/* Hoides — home page: hero showcase, floating product tiles, bento product grid. Loaded after premium.css. */

.home-hero { padding: 72px 0 40px; }
.home-hero .hero-grid { grid-template-columns: 1fr 1.08fr; gap: 64px; }
.home-hero h1 { font-size: clamp(2.8rem, 5.6vw, 5rem); max-width: 13ch; margin-top: 22px; }
.home-hero .lead { font-size: 1.18rem; max-width: 44ch; margin-top: 22px; }
.home-hero .platforms { margin-top: 26px; }
@media (max-width: 980px) { .home-hero .hero-grid { grid-template-columns: 1fr; gap: 48px; } }

/* showcase: a window that cycles through the products */
.showcase { position: relative; }
.showcase .stage { position: relative; aspect-ratio: 16 / 10.4; border-radius: 20px; overflow: hidden; isolation: isolate;
  border: 1px solid var(--border-strong); background: #0b0a12;
  box-shadow: 0 60px 120px -50px rgba(0, 0, 0, 1), 0 0 0 1px rgba(255, 255, 255, .02), 0 0 120px -40px rgba(139, 92, 246, .7); }
.showcase .chrome { position: absolute; inset: 0 0 auto 0; height: 38px; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 0 14px;
  background: linear-gradient(180deg, rgba(20, 18, 30, .95), rgba(14, 12, 22, .9)); border-bottom: 1px solid var(--border); }
.showcase .chrome i { width: 11px; height: 11px; border-radius: 50%; background: #3a3646; }
.showcase .chrome i:nth-child(1) { background: #ff5f57; } .showcase .chrome i:nth-child(2) { background: #febc2e; } .showcase .chrome i:nth-child(3) { background: #28c840; }
.showcase .chrome .url { margin: 0 auto; padding: 3px 14px; border-radius: 8px; font-size: .74rem; color: var(--muted); background: rgba(255, 255, 255, .05); border: 1px solid var(--border); }
.showcase .slides { position: absolute; inset: 38px 0 0 0; }
.showcase .slide { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transform: scale(1.04); filter: blur(6px);
  transition: opacity .9s var(--ease), transform 1.2s var(--ease), filter .9s var(--ease); }
.showcase .slide.on { opacity: 1; transform: none; filter: none; z-index: 1; }
.showcase .slide > img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.showcase .slide.contain > img { object-fit: contain; background: #0b0a12; }
.showcase .slide .tvframe { width: 94%; animation: none; box-shadow: none; border-radius: 12px; }
.showcase .slide .label { position: absolute; left: 16px; bottom: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px;
  border-radius: 999px; font-size: .78rem; font-weight: 600; color: #fff; background: rgba(10, 9, 16, .72); border: 1px solid var(--border-strong); backdrop-filter: blur(10px); }
.showcase .slide .label img { width: 20px; height: 20px; object-fit: contain; }

.showcase .tabs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-top: 14px; }
.showcase .tabs button { position: relative; overflow: hidden; display: grid; justify-items: center; gap: 6px; padding: 10px 4px 12px; cursor: pointer;
  border-radius: 12px; border: 1px solid transparent; background: transparent; color: var(--muted); font: inherit; font-size: .74rem; font-weight: 600;
  transition: background .3s ease, color .3s ease, border-color .3s ease; }
.showcase .tabs button img { width: 26px; height: 26px; object-fit: contain; transition: transform .4s var(--ease), filter .3s ease; filter: saturate(.6) brightness(.85); }
.showcase .tabs button:hover { color: var(--text); background: rgba(255, 255, 255, .04); }
.showcase .tabs button.on { color: #fff; background: rgba(139, 92, 246, .12); border-color: rgba(187, 166, 255, .28); }
.showcase .tabs button.on img { filter: none; transform: translateY(-2px) scale(1.08); }
.showcase .tabs .fill { position: absolute; left: 10px; right: 10px; bottom: 4px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.showcase .tabs .fill::after { content: ""; position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, #8b5cf6, #67e8f9); }
.showcase .tabs button.on .fill::after { animation: fill var(--every, 5200ms) linear forwards; }
.showcase.paused .tabs button.on .fill::after { animation-play-state: paused; }
@keyframes fill { to { transform: scaleX(1); } }
@media (max-width: 640px) { .showcase .tabs { grid-template-columns: repeat(3, 1fr); } }

/* floating product tiles around the showcase */
.floater { position: absolute; z-index: 4; width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center;
  background: linear-gradient(180deg, rgba(30, 26, 44, .9), rgba(16, 14, 26, .9)); border: 1px solid var(--border-strong); backdrop-filter: blur(10px);
  box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .9), 0 0 40px -14px rgba(139, 92, 246, .7); transition: translate .6s var(--ease);
  animation: bob 7s ease-in-out infinite; }
.floater img { width: 38px; height: 38px; object-fit: contain; }
.floater.f1 { top: -26px; right: -24px; animation-delay: -1s; }
.floater.f2 { top: 42%; left: -34px; width: 56px; height: 56px; animation-delay: -3s; }
.floater.f3 { bottom: 96px; right: -30px; width: 54px; height: 54px; animation-delay: -5s; }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-12px) rotate(3deg); } }
@media (max-width: 980px) { .floater { display: none; } }

/* marquee sits under the hero */
.home-marquee { margin-top: 64px; }

/* stats */
.stats-sec { padding-top: 88px; padding-bottom: 40px; }

/* bento product grid */
.bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(250px, auto); gap: 16px; }
.bento > a { display: flex; flex-direction: column; padding: 26px; min-height: 250px; }
.bento .tag { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 5px 11px 5px 7px; border-radius: 999px;
  font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #d8ccff; background: rgba(255, 255, 255, .04); border: 1px solid var(--border); }
.bento .tag img { width: 18px; height: 18px; object-fit: contain; }
.bento h3 { font-size: 1.5rem; margin: 16px 0 8px; letter-spacing: -.03em; }
.bento p { color: var(--muted); font-size: .95rem; margin: 0 0 16px; max-width: 44ch; }
.bento .more { margin-top: auto; font-weight: 650; font-size: .9rem; color: var(--text); display: inline-flex; gap: 8px; align-items: center; }
.bento .more::after { content: "\2192"; color: var(--brand); transition: transform .35s var(--ease); }
.bento > a:hover .more::after { transform: translateX(5px); }
.bento .pic { margin: 22px -26px -26px; border-top: 1px solid var(--border); overflow: hidden; position: relative; }
.bento .pic img { width: 100%; display: block; transition: transform 1.1s var(--ease); }
.bento .pic video { width: 100%; height: 100%; display: block; object-fit: cover; background: #0b0a12; transition: transform 1.1s var(--ease); }
.bento > a:hover .pic img, .bento > a:hover .pic video { transform: scale(1.045); }
.bento .pic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(7, 6, 12, .55)); pointer-events: none; }
.b-matte { grid-column: span 2; grid-row: span 2; }
.b-matte .pic { flex: 1; }
.b-matte .pic img, .b-matte .pic video { height: 100%; object-fit: cover; }
.b-matte .pic { min-height: 300px; }
.b-downloader { grid-column: span 2; }
.b-downloader .pic { max-height: 210px; }
.b-tv { grid-column: span 2; background: linear-gradient(180deg, rgba(7, 6, 12, .25), rgba(7, 6, 12, .85)), url("assets/tv-wallpaper.jpg") center 30% / cover !important; }
.b-tv p { color: #d6d2e2; }
.b-icon { position: absolute; right: 22px; top: 22px; width: 64px; height: 64px; object-fit: contain; opacity: .95;
  filter: drop-shadow(0 14px 24px rgba(0, 0, 0, .5)); transition: transform .6s var(--ease); }
.bento > a:hover .b-icon { transform: translateY(-4px) rotate(-6deg) scale(1.06); }
@media (max-width: 1100px) { .bento { grid-template-columns: repeat(2, 1fr); } .b-matte { grid-row: span 1; } .b-matte .pic { max-height: 300px; } }
@media (max-width: 640px) { .bento { grid-template-columns: 1fr; } .b-matte, .b-downloader, .b-tv { grid-column: span 1; } }

/* principles */
.principles .card { padding: 30px; }

/* keep titles clear of the corner icon */
.bento .b-icon ~ h3, .bento .b-icon ~ .tag { margin-right: 76px; }