/* =====================================================================
   MacLab Stores — Home page
   ===================================================================== */

/* ---- Hero (animated design banner) ---- */
.hero { position: relative; overflow: hidden; isolation: isolate; padding-block: clamp(4rem, 10vw, 8rem); background: radial-gradient(120% 120% at 82% 0%, rgba(20,23,33,0) 0%, #0A0B0D 62%), linear-gradient(135deg, #0B1E3A 0%, #0A0B0D 55%, #1B0B20 100%); color: #fff; }
.hero__bg { position: absolute; inset: 0; z-index: -2; }
.hero__grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 46px 46px; -webkit-mask-image: radial-gradient(120% 80% at 50% 0%, #000 30%, transparent 75%); mask-image: radial-gradient(120% 80% at 50% 0%, #000 30%, transparent 75%); }
.hero__orb { position: absolute; border-radius: 50%; filter: blur(64px); opacity: .5; }
.hero__orb--red { width: 420px; height: 420px; background: #E30613; top: -130px; left: -90px; animation: hero-drift 16s ease-in-out infinite; }
.hero__orb--cyan { width: 480px; height: 480px; background: #00AEEF; bottom: -170px; right: -70px; animation: hero-drift 20s ease-in-out infinite reverse; }
.hero__orb--violet { width: 300px; height: 300px; background: #7C4DFF; top: 26%; right: 34%; opacity: .38; animation: hero-drift 24s ease-in-out infinite; }

.hero__inner { position: relative; z-index: 2; text-align: center; max-width: 820px; margin-inline: auto; }
.hero__eyebrow { display: inline-block; font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.72); padding: .4rem .9rem; border: 1px solid rgba(255,255,255,.18); border-radius: var(--r-pill); backdrop-filter: blur(6px); animation: hero-in .7s var(--ease-out) both; }
.hero__title { color: #fff; font-size: clamp(2.4rem, 6.4vw, 4.5rem); line-height: 1.03; letter-spacing: var(--tracking-tight); margin-top: var(--sp-5); animation: hero-in .7s var(--ease-out) .08s both; }
.hero__grad { background: var(--grad-spectrum); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__lead { color: rgba(255,255,255,.72); font-size: var(--text-lg); max-width: 52ch; margin: var(--sp-5) auto 0; animation: hero-in .7s var(--ease-out) .16s both; }
.hero__cta { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; margin-top: var(--sp-7); animation: hero-in .7s var(--ease-out) .24s both; }
.hero__trust { display: flex; gap: var(--sp-6); justify-content: center; flex-wrap: wrap; list-style: none; padding: 0; margin-top: var(--sp-7); animation: hero-in .7s var(--ease-out) .32s both; }
.hero__trust li { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: rgba(255,255,255,.55); display: flex; align-items: center; gap: var(--sp-2); }
.hero__trust li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }

@keyframes hero-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes hero-rise { from { opacity: 0; transform: translateY(42px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes hero-float { 0%,100% { transform: translateY(0) rotate(-.6deg); } 50% { transform: translateY(-16px) rotate(.6deg); } }
@keyframes hero-drift { 0%,100% { transform: translate(0,0); } 50% { transform: translate(28px,20px); } }
@media (prefers-reduced-motion: reduce) { .hero__orb { animation: none !important; } }

/* ---- Trust strip ---- */
.trust-strip { border-block: 1px solid var(--hairline); background: var(--surface); }
.trust-strip__row { display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-8); justify-content: space-between; padding-block: var(--sp-4); }
.trust-strip__row span { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--text-sm); color: var(--graphite); }
.trust-strip__row svg { width: 18px; height: 18px; color: var(--cyan-ink); }

/* ---- Tabs ---- */
.tabs { display: inline-flex; gap: 4px; padding: 4px; background: var(--surface-sunk); border-radius: var(--r-pill); }
.tab { padding: 0.55rem 1.1rem; border-radius: var(--r-pill); font-size: var(--text-sm); font-weight: 500; color: var(--graphite); transition: color var(--dur-2), background var(--dur-2), box-shadow var(--dur-2); }
.tab.is-active { background: var(--canvas); color: var(--ink); box-shadow: var(--shadow-sm); }
.tab-panel { display: none; margin-top: var(--sp-6); }
.tab-panel.is-active { display: block; animation: fade-up var(--dur-3) var(--ease-out); }
@keyframes fade-up { from { opacity: 0; transform: translateY(8px); } }

/* ---- Feature (guarantee) cards ---- */
.feature { padding: var(--sp-5); }
.feature__icon { width: 44px; height: 44px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--cyan-wash); color: var(--cyan-ink); margin-bottom: var(--sp-4); }
.feature__icon svg { width: 22px; height: 22px; }
.feature h4 { font-size: var(--text-lg); }
.feature p { color: var(--graphite); font-size: var(--text-sm); margin-top: var(--sp-2); }

/* ---- Resources band ---- */
.resources-band { background: var(--grad-ink); }
.resource-card {
    display: flex; flex-direction: column; gap: var(--sp-2);
    padding: var(--sp-5); border-radius: var(--r-lg);
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
    color: #fff; transition: transform var(--dur-3) var(--ease-out), background var(--dur-3);
}
.resource-card:hover { transform: translateY(-4px); background: rgba(255,255,255,.07); }
.resource-card__icon { width: 42px; height: 42px; border-radius: var(--r-md); display: grid; place-items: center; background: rgba(0,174,239,.16); color: var(--cyan); margin-bottom: var(--sp-2); }
.resource-card__icon svg { width: 22px; height: 22px; }
.resource-card h4 { color: #fff; font-size: var(--text-lg); }
.resource-card p { color: rgba(255,255,255,.6); font-size: var(--text-sm); flex: 1; }
.resource-card__link { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--cyan); letter-spacing: var(--tracking-wide); }

/* ---- Newsletter ---- */
.newsletter { max-width: 640px; margin-inline: auto; text-align: center; padding: clamp(2rem, 5vw, 3.5rem); background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-2xl); }
.newsletter p { margin-top: var(--sp-2); }
.newsletter__form { display: flex; gap: var(--sp-3); margin-top: var(--sp-5); max-width: 440px; margin-inline: auto; }
.newsletter__form .input { border-radius: var(--r-pill); }
.newsletter__form .btn { border-radius: var(--r-pill); flex: none; }

/* ---- Responsive ---- */
@media (max-width: 940px) {
    .hero-card { max-width: 460px; }
}
@media (max-width: 560px) {
    .newsletter__form { flex-direction: column; }
    .tabs { width: 100%; justify-content: space-between; }
    .tab { flex: 1; text-align: center; padding-inline: 0.5rem; }
}