/* =========================================
   Inputo — Build tools marquee
   3 copies + translateX(-33.333%) for seamless loop
   ========================================= */

.marquee-section {
    padding: 2.5rem 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    overflow: hidden;
}

.marquee-track {
    display: flex;
    width: max-content;
    animation: marquee 25s linear infinite;
}

.marquee-track:hover {
    animation-play-state: paused;
}

.marquee-content {
    display: flex;
    align-items: center;
    gap: 3.5rem;
    padding-right: 3.5rem;
    flex-shrink: 0;
}

.marquee-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    opacity: 0.6;
    transition: opacity 0.3s;
    font-family: var(--font);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text2);
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}

.marquee-item:hover {
    opacity: 1;
}

.marquee-item svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

/* Brand colors */
.marquee-item[data-brand="lovable"]   { --brand: #e84393; }
.marquee-item[data-brand="bolt"]      { --brand: #6c5ce7; }
.marquee-item[data-brand="cursor"]    { --brand: #00d2ff; }
.marquee-item[data-brand="supabase"]  { --brand: #3ecf8e; }
.marquee-item[data-brand="replit"]    { --brand: #f97316; }
.marquee-item[data-brand="vercel"]    { --brand: #ffffff; }
.marquee-item[data-brand="railway"]   { --brand: #c084fc; }
.marquee-item[data-brand="stripe"]    { --brand: #635bff; }
.marquee-item[data-brand="hostinger"] { --brand: #673de6; }

.marquee-item[data-brand="lovable"] svg,
.marquee-item[data-brand="railway"] svg {
    fill: none;
    stroke: var(--brand);
}

.marquee-item[data-brand="bolt"] svg,
.marquee-item[data-brand="cursor"] svg,
.marquee-item[data-brand="supabase"] svg,
.marquee-item[data-brand="replit"] svg,
.marquee-item[data-brand="vercel"] svg,
.marquee-item[data-brand="stripe"] svg,
.marquee-item[data-brand="hostinger"] svg {
    stroke: none;
    fill: var(--brand);
}

@keyframes marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-33.333%); }
}