/* HiFuture brand landing page styles */

.brand-landing {
    margin: 0 auto;
}

.brand-hero {
    background: radial-gradient(1200px 600px at 20% -10%, rgba(109,0,199,0.30), transparent 60%),
                radial-gradient(800px 400px at 100% 0%, rgba(42,122,226,0.25), transparent 60%),
                linear-gradient(180deg, #fbf9ff, #f4f8ff 40%, #ffffff);
    color: #1a1a1a;
    padding: 72px 24px 56px 24px;
    text-align: center;
}
.brand-hero { position: relative; overflow: hidden; }
.brand-hero .hero-bg { position: absolute; inset: 0; z-index: 0; }
.brand-hero .hero-bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.45; display: block; }
.brand-hero.has-bg::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,0.75), rgba(255,255,255,0.6)); z-index: 1; }
.brand-hero .brand-hero-inner { position: relative; z-index: 2; }
.brand-hero h1 {
    font-size: clamp(2rem, 3.5vw, 3rem);
    margin: 0 0 8px 0;
}
.brand-hero p {
    margin: 0 auto 18px auto;
    max-width: 760px;
    color: #333;
}
.brand-cta {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.brand-collection {
    padding: 32px 5vw 48px;
    max-width: none;
    margin: 0;
}
.brand-collection h2 {
    text-align: left;
    margin: 0 0 18px 0;
    padding: 0 1vw;
    color: #1a4d8f;
}
.brand-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
    width: 100%;
}
/* Mobile adjustments moved to hifuture.mobile.css */

.brand-card {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.06);
    overflow: hidden;
    display: flex; flex-direction: column;
}
.card-media { background: linear-gradient(135deg, #ece2f7, #e6eefb); height: 160px; position: relative; overflow: hidden; }
.brand-card.has-bg .card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.6; }
.brand-card.has-bg .card-body { position: relative; z-index: 2; }
.brand-card.has-bg .card-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,0.35), rgba(255,255,255,0.6)); z-index: 1; }
.card-body {
    padding: 16px;
}
.card-body h3 {
    margin: 0 0 6px 0;
}
.card-body p {
    margin: 0 0 14px 0;
    color: #444;
}
.card-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.brand-values {
    background: #fafafa;
    padding: 32px 5vw 48px;
}
.brand-values h2 {
    text-align: left;
    margin: 0 0 14px 1vw;
    color: #1a4d8f;
}
.values-list {
    max-width: none;
    margin: 0;
    padding: 0 1vw;
    line-height: 1.8;
}
.values-list li {
    margin-bottom: 8px;
}