/* ============================================================
   MAXIMALISM / DOPAMINE — Red theme (#cb0802 palette)
   ============================================================ */

:root {
    --mx-bg: #0d0202;
    --mx-fg: #ffffff;
    --mx-muted: rgba(45, 8, 8, 0.88);
    --mx-border: #cb0802;

    /* Five accent rotation (red family) */
    --mx-a1: #cb0802;   /* primary red */
    --mx-a2: #ff4d48;   /* electric light red */
    --mx-a3: #ffd45a;   /* screaming gold */
    --mx-a4: #ff6b35;   /* electric orange */
    --mx-a5: #5c0210;   /* deep burgundy */

    --mx-shadow-1: 8px 8px 0 var(--mx-a3), 16px 16px 0 var(--mx-a1);
    --mx-shadow-2: 12px 12px 0 var(--mx-a2), 24px 24px 0 var(--mx-a1), 36px 36px 0 var(--mx-a3);
    --mx-glow: 0 0 20px rgba(203, 8, 2, 0.55), 0 0 40px rgba(255, 212, 90, 0.35);
    --mx-glow-lg: 0 0 40px rgba(203, 8, 2, 0.65), 0 0 80px rgba(255, 77, 73, 0.4), 0 0 120px rgba(92, 2, 16, 0.35);

    --mx-font-head: "Outfit", "Arial Black", sans-serif;
    --mx-font-body: "DM Sans", Arial, sans-serif;
    --mx-font-display: "Bangers", "Impact", cursive;
}

/* ---- Keyframes ---- */
@keyframes mx-float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-18px) rotate(4deg); }
}
@keyframes mx-float-rev {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(16px) rotate(-4deg); }
}
@keyframes mx-pulse-glow {
    0%, 100% { box-shadow: var(--mx-glow); }
    50%      { box-shadow: var(--mx-glow-lg); }
}
@keyframes mx-gradient-shift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
@keyframes mx-spin-slow {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
@keyframes mx-wiggle {
    0%, 100% { transform: rotate(-4deg); }
    50%      { transform: rotate(4deg); }
}
@keyframes mx-bounce-subtle {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}
@keyframes mx-shine {
    0%, 42% { transform: translateX(-120%); }
    75%, 100% { transform: translateX(120%); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.15s !important;
    }
}

/* Massive background typography */
body::before {
    content: "TERPERCAYA";
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-12deg);
    font-family: var(--mx-font-display);
    font-size: clamp(8rem, 22vw, 18rem);
    color: rgba(203, 8, 2, 0.06);
    letter-spacing: 0.05em;
    white-space: nowrap;
    pointer-events: none;
    z-index: 0;
    user-select: none;
}

/* ---- Global page texture ---- */
html {
    background: var(--mx-bg) !important;
}

body {
    font-family: var(--mx-font-body) !important;
    color: var(--mx-fg) !important;
    background:
        radial-gradient(circle, rgba(203, 8, 2, 0.35) 1px, transparent 1px),
        repeating-linear-gradient(45deg, transparent, transparent 12px, rgba(255, 212, 90, 0.06) 12px, rgba(255, 212, 90, 0.06) 24px),
        radial-gradient(ellipse at 15% 20%, rgba(203, 8, 2, 0.18) 0%, transparent 50%),
        radial-gradient(ellipse at 85% 75%, rgba(255, 107, 53, 0.14) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 50%, rgba(92, 2, 16, 0.12) 0%, transparent 60%),
        linear-gradient(145deg, #080101 0%, #1a0404 42%, #3d0a0a 72%, #0d0202 100%) !important;
    background-size: 24px 24px, auto, auto, auto, auto, auto !important;
    background-attachment: fixed !important;
}

/* ---- Shared section shell ---- */
.brand-spotlight,
.brand-universe,
.brand-community,
.brand-flow-article,
.brand-ticker,
.brand-footer-shell {
    font-family: var(--mx-font-body) !important;
}

/* ============================================================
   BRAND TICKER
   ============================================================ */
.brand-ticker {
    position: relative;
    border: 4px dashed var(--mx-a3) !important;
    border-radius: 999px !important;
    padding: 10px !important;
    margin: 28px 0 !important;
    background:
        radial-gradient(circle, rgba(203, 8, 2, 0.4) 1px, transparent 1px),
        linear-gradient(90deg, #0d0202, #2d0808 35%, #4a0810 68%, #1a0404) !important;
    background-size: 18px 18px, auto !important;
    box-shadow: var(--mx-shadow-1), var(--mx-glow) !important;
    transform: rotate(-0.5deg);
}

.brand-ticker-brand {
    border: 4px solid var(--mx-a1) !important;
    font-family: var(--mx-font-head) !important;
    font-weight: 900 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    box-shadow: 6px 6px 0 var(--mx-a2), var(--mx-glow) !important;
    animation: mx-wiggle 2s ease-in-out infinite;
}

.brand-ticker-pill {
    border: 4px solid var(--mx-a2) !important;
    font-weight: 800 !important;
    box-shadow: 4px 4px 0 var(--mx-a5) !important;
}

.brand-ticker-pill:nth-child(odd) {
    border-color: var(--mx-a4) !important;
    box-shadow: 4px 4px 0 var(--mx-a3) !important;
}

.brand-ticker-live {
    border: 4px solid var(--mx-a3) !important;
    background: linear-gradient(135deg, var(--mx-a1), var(--mx-a5), var(--mx-a2)) !important;
    background-size: 200% 200% !important;
    animation: mx-gradient-shift 4s ease infinite, mx-pulse-glow 2s ease-in-out infinite !important;
    box-shadow: var(--mx-shadow-1) !important;
}

/* ============================================================
   BRAND SPOTLIGHT (Hero)
   ============================================================ */
.brand-spotlight {
    max-width: 760px !important;
    padding: 36px 32px !important;
    border: 4px solid var(--mx-a3) !important;
    border-radius: 24px !important;
    background:
        radial-gradient(circle, rgba(255, 212, 90, 0.12) 1px, transparent 1px),
        repeating-linear-gradient(-45deg, transparent, transparent 14px, rgba(203, 8, 2, 0.07) 14px, rgba(203, 8, 2, 0.07) 28px),
        radial-gradient(ellipse at 80% 10%, rgba(203, 8, 2, 0.25), transparent 45%),
        radial-gradient(ellipse at 10% 90%, rgba(255, 107, 53, 0.2), transparent 40%),
        linear-gradient(145deg, rgba(26, 4, 4, 0.95), rgba(45, 8, 8, 0.9)) !important;
    background-size: 22px 22px, auto, auto, auto, auto !important;
    box-shadow: var(--mx-shadow-2), var(--mx-glow-lg) !important;
    transform: rotate(0.8deg);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%);
}

.brand-spotlight::before {
    background-image:
        radial-gradient(circle, rgba(255, 77, 73, 0.5) 1.5px, transparent 1.5px),
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px) !important;
    background-size: 28px 28px, 40px 40px, 40px 40px !important;
    mask-image: none !important;
    opacity: 0.7;
}

.brand-spotlight::after {
    width: 320px !important;
    height: 320px !important;
    border: 4px dashed var(--mx-a2) !important;
    animation: mx-spin-slow 25s linear infinite !important;
    box-shadow: 0 0 60px rgba(203, 8, 2, 0.35) !important;
}

/* Decorative floating emoji via pseudo on spotlight */
.brand-spotlight .brand-heading::before {
    content: "🔥";
    position: absolute;
    top: -28px;
    left: -12px;
    font-size: 2.2rem;
    animation: mx-float 5s ease-in-out infinite;
    pointer-events: none;
    z-index: 5;
}

.brand-spotlight .brand-heading::after {
    content: "✨";
    position: absolute;
    top: -20px;
    right: -8px;
    font-size: 1.8rem;
    animation: mx-float-rev 4s ease-in-out infinite;
    pointer-events: none;
    z-index: 5;
}

.brand-kicker {
    border: 4px solid var(--mx-a1) !important;
    font-family: var(--mx-font-head) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: 0.2em !important;
    color: var(--mx-a3) !important;
    background: rgba(92, 2, 16, 0.6) !important;
    box-shadow: 4px 4px 0 var(--mx-a4) !important;
    transform: rotate(-1deg);
}

.brand-kicker::before,
.brand-kicker::after {
    color: var(--mx-a2) !important;
    text-shadow: 2px 2px 0 var(--mx-a5), 4px 4px 0 var(--mx-a1) !important;
}

.brand-heading h1 {
    font-family: var(--mx-font-head) !important;
    font-size: clamp(26px, 5vw, 42px) !important;
    font-weight: 900 !important;
    line-height: 1.05 !important;
    letter-spacing: -0.02em !important;
    text-transform: uppercase !important;
    text-shadow:
        2px 2px 0 var(--mx-a5),
        4px 4px 0 var(--mx-a1),
        6px 6px 0 var(--mx-a2) !important;
}

.brand-heading h1 strong {
    background: linear-gradient(90deg, var(--mx-a3), var(--mx-a4), var(--mx-a2), var(--mx-a3)) !important;
    background-size: 250% auto !important;
    animation: mx-gradient-shift 4s ease infinite !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    filter: none !important;
}

.brand-heading h1 span {
    color: var(--mx-a2) !important;
    text-shadow:
        2px 2px 0 var(--mx-a1),
        4px 4px 0 var(--mx-a3) !important;
}

.brand-subtitle {
    font-size: 15px !important;
    line-height: 1.7 !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

.brand-info-panel,
.brand-offer-panel {
    border: 4px solid var(--mx-a2) !important;
    border-radius: 20px !important;
    background: rgba(45, 8, 8, 0.75) !important;
    backdrop-filter: blur(8px) !important;
    box-shadow: 8px 8px 0 var(--mx-a3), 16px 16px 0 var(--mx-a1) !important;
}

.brand-offer-panel {
    border-color: var(--mx-a4) !important;
    border-style: dashed !important;
    transform: rotate(-0.5deg);
}

.brand-panel-head {
    border-bottom: 4px dashed var(--mx-a3) !important;
    background: linear-gradient(90deg, rgba(203, 8, 2, 0.2), rgba(255, 212, 90, 0.15), rgba(255, 107, 53, 0.15)) !important;
}

.brand-panel-head h2 {
    font-family: var(--mx-font-head) !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    text-shadow: 2px 2px 0 var(--mx-a1), 4px 4px 0 var(--mx-a5) !important;
    color: var(--mx-a3) !important;
}

.brand-info-icon {
    border: 3px solid var(--mx-a1) !important;
    border-radius: 12px !important;
    box-shadow: 3px 3px 0 var(--mx-a2) !important;
    transform: rotate(3deg);
}

.brand-info-value {
    border: 4px solid var(--mx-a3) !important;
    font-family: var(--mx-font-head) !important;
    font-weight: 900 !important;
    letter-spacing: 0.05em !important;
    box-shadow: 4px 4px 0 var(--mx-a1) !important;
    background: linear-gradient(135deg, rgba(203, 8, 2, 0.35), rgba(92, 2, 16, 0.5)) !important;
}

.brand-offer-title h3 {
    font-family: var(--mx-font-head) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    text-shadow: 2px 2px 0 var(--mx-a1) !important;
}

.brand-offer-item {
    border: 4px solid var(--mx-a2) !important;
    border-radius: 16px !important;
    box-shadow: 6px 6px 0 var(--mx-a5) !important;
    transform: rotate(0.5deg);
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.brand-offer-item:nth-child(even) {
    border-color: var(--mx-a4) !important;
    box-shadow: 6px 6px 0 var(--mx-a3) !important;
    transform: rotate(-0.8deg);
}

.brand-offer-item:hover {
    transform: rotate(1.5deg) scale(1.02) !important;
    box-shadow: 8px 8px 0 var(--mx-a1), 16px 16px 0 var(--mx-a3) !important;
}

.brand-offer-item::before {
    border: 2px solid var(--mx-a1) !important;
    animation: mx-wiggle 1.5s ease-in-out infinite !important;
}

.brand-offer-item strong {
    color: var(--mx-a2) !important;
}

.brand-btn {
    min-height: 56px !important;
    font-family: var(--mx-font-head) !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    border-width: 4px !important;
    transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55), box-shadow 0.3s ease !important;
}

.brand-btn:hover {
    transform: translateY(-4px) scale(1.05) !important;
}

.brand-btn-login {
    border: 4px solid var(--mx-a3) !important;
    background: linear-gradient(135deg, var(--mx-a1), var(--mx-a5), var(--mx-a2)) !important;
    background-size: 200% auto !important;
    animation: mx-gradient-shift 4s ease infinite !important;
    box-shadow: var(--mx-shadow-1), var(--mx-glow) !important;
}

.brand-btn-login:hover {
    animation: mx-gradient-shift 2s ease infinite, mx-pulse-glow 1.5s ease-in-out infinite !important;
}

.brand-btn-register {
    border: 4px solid var(--mx-a1) !important;
    color: #0d0202 !important;
    box-shadow: 8px 8px 0 var(--mx-a1), 16px 16px 0 var(--mx-a5) !important;
}

.brand-btn-register:hover {
    box-shadow: 10px 10px 0 var(--mx-a2), 20px 20px 0 var(--mx-a1) !important;
}

/* ============================================================
   BRAND UNIVERSE
   ============================================================ */
.brand-universe {
    max-width: 960px !important;
    padding: 32px !important;
    border: 4px solid var(--mx-a2) !important;
    border-radius: 24px !important;
    background:
        conic-gradient(from 90deg at 1px 1px, transparent 90deg, rgba(255, 77, 73, 0.05) 0),
        radial-gradient(ellipse at 20% 30%, rgba(203, 8, 2, 0.2), transparent 50%),
        radial-gradient(ellipse at 80% 70%, rgba(255, 212, 90, 0.12), transparent 50%),
        linear-gradient(145deg, #0d0202, #2d0808) !important;
    background-size: 36px 36px, auto, auto, auto !important;
    box-shadow: var(--mx-shadow-2), var(--mx-glow-lg) !important;
    transform: rotate(-0.6deg);
}

.brand-universe::after {
    border: 4px dashed var(--mx-a3) !important;
    animation: mx-spin-slow 30s linear infinite !important;
}

.brand-universe-badge {
    border: 4px solid var(--mx-a4) !important;
    font-family: var(--mx-font-head) !important;
    font-weight: 900 !important;
    letter-spacing: 0.18em !important;
    box-shadow: 4px 4px 0 var(--mx-a1) !important;
    transform: rotate(1deg);
}

.brand-universe-head h2 {
    font-family: var(--mx-font-head) !important;
    font-size: clamp(28px, 5vw, 48px) !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: -0.02em !important;
    text-shadow:
        2px 2px 0 var(--mx-a5),
        4px 4px 0 var(--mx-a1),
        6px 6px 0 var(--mx-a2) !important;
}

.brand-universe-head h2 strong {
    background: linear-gradient(90deg, var(--mx-a3), var(--mx-a4), var(--mx-a1), var(--mx-a3)) !important;
    background-size: 250% auto !important;
    animation: mx-gradient-shift 5s ease infinite !important;
}

.brand-universe-tabs {
    border: 4px dashed var(--mx-a3) !important;
    border-radius: 20px !important;
    background: rgba(26, 4, 4, 0.7) !important;
    padding: 10px !important;
}

.brand-universe-tab {
    font-family: var(--mx-font-head) !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    font-size: 10px !important;
    border: 3px solid transparent !important;
    border-radius: 14px !important;
}

.brand-universe-tab:hover {
    border-color: var(--mx-a2) !important;
    transform: translateY(-2px) rotate(1deg) !important;
}

.brand-universe-tab.active {
    border: 4px solid var(--mx-a1) !important;
    box-shadow: 6px 6px 0 var(--mx-a5) !important;
    transform: rotate(-1deg) !important;
}

.brand-universe-visual {
    border: 4px solid var(--mx-a4) !important;
    border-radius: 24px !important;
    box-shadow: 10px 10px 0 var(--mx-a3), var(--mx-glow) !important;
}

.brand-universe-orbit {
    border-width: 3px !important;
    border-style: dashed !important;
    border-color: var(--mx-a2) !important;
}

.brand-universe-orbit.second {
    border-color: var(--mx-a3) !important;
}

.brand-universe-icon {
    border: 4px solid var(--mx-a3) !important;
    border-radius: 28px !important;
    box-shadow: var(--mx-glow-lg) !important;
    animation: mx-bounce-subtle 3s ease-in-out infinite !important;
}

.brand-universe-content {
    border: 4px solid var(--mx-a1) !important;
    border-radius: 24px !important;
    box-shadow: 8px 8px 0 var(--mx-a5) !important;
    transform: rotate(0.4deg);
}

.brand-universe-small-title {
    font-family: var(--mx-font-head) !important;
    font-weight: 900 !important;
    letter-spacing: 0.2em !important;
    color: var(--mx-a2) !important;
    text-shadow: 2px 2px 0 var(--mx-a1) !important;
}

.brand-universe-content h3 {
    font-family: var(--mx-font-head) !important;
    font-size: clamp(22px, 4vw, 32px) !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    text-shadow: 2px 2px 0 var(--mx-a5), 4px 4px 0 var(--mx-a1) !important;
}

.brand-universe-tag {
    border: 3px solid var(--mx-a3) !important;
    font-family: var(--mx-font-head) !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    box-shadow: 3px 3px 0 var(--mx-a1) !important;
}

.brand-universe-tag:nth-child(3n+1) { border-color: var(--mx-a1) !important; box-shadow: 3px 3px 0 var(--mx-a3) !important; }
.brand-universe-tag:nth-child(3n+2) { border-color: var(--mx-a4) !important; box-shadow: 3px 3px 0 var(--mx-a2) !important; }
.brand-universe-tag:nth-child(3n)   { border-color: var(--mx-a2) !important; box-shadow: 3px 3px 0 var(--mx-a5) !important; }

.brand-universe-feature {
    border: 3px dashed var(--mx-a2) !important;
    font-weight: 700 !important;
}

.brand-universe-feature:nth-child(even) {
    border-style: solid !important;
    border-color: var(--mx-a4) !important;
    transform: translateY(4px);
}

.brand-universe-button {
    border: 4px solid var(--mx-a1) !important;
    font-family: var(--mx-font-head) !important;
    font-weight: 900 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    min-height: 52px !important;
    box-shadow: var(--mx-shadow-1), var(--mx-glow) !important;
    animation: mx-pulse-glow 2.5s ease-in-out infinite !important;
}

.brand-universe-button:hover {
    transform: translateY(-4px) scale(1.08) !important;
}

/* ============================================================
   FLOW ARTICLE
   ============================================================ */
.brand-flow-article {
    border: 4px solid var(--mx-a4) !important;
    border-radius: 24px !important;
    padding: 32px !important;
    background:
        radial-gradient(circle, rgba(255, 212, 90, 0.15) 1px, transparent 1px),
        linear-gradient(145deg, rgba(26, 4, 4, 0.95), rgba(61, 10, 10, 0.9)) !important;
    background-size: 20px 20px, auto !important;
    box-shadow: var(--mx-shadow-1) !important;
    transform: rotate(0.3deg);
}

.brand-flow-article::before {
    height: 4px !important;
    background: linear-gradient(90deg, transparent, var(--mx-a1), var(--mx-a3), var(--mx-a2), var(--mx-a4), transparent) !important;
    background-size: 200% auto !important;
    animation: mx-gradient-shift 3s ease infinite !important;
}

.brand-flow-article a {
    color: var(--mx-a2) !important;
    font-weight: 800 !important;
    border-bottom: 2px dashed var(--mx-a3) !important;
}

.brand-flow-article a:hover {
    color: var(--mx-a3) !important;
}

.brand-flow-article strong {
    color: var(--mx-a3) !important;
    text-shadow: 1px 1px 0 var(--mx-a1) !important;
}

.brand-flow-article p {
    font-size: 17px !important;
    line-height: 1.75 !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

/* ============================================================
   COMMUNITY / FAQ / REVIEWS
   ============================================================ */
.brand-community {
    border: 4px solid var(--mx-a3) !important;
    border-radius: 24px !important;
    padding: 32px 28px !important;
    background:
        repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(203, 8, 2, 0.06) 10px, rgba(203, 8, 2, 0.06) 20px),
        radial-gradient(ellipse at 100% 0, rgba(203, 8, 2, 0.2), transparent 40%),
        linear-gradient(145deg, #0d0202, #2d0808) !important;
    box-shadow: var(--mx-shadow-2) !important;
    transform: rotate(-0.4deg);
}

.brand-community-label {
    border: 4px solid var(--mx-a1) !important;
    font-family: var(--mx-font-head) !important;
    font-weight: 900 !important;
    letter-spacing: 0.2em !important;
    box-shadow: 4px 4px 0 var(--mx-a4) !important;
    transform: rotate(-1.5deg);
}

.brand-community-head h2,
.brand-review-head h2 {
    font-family: var(--mx-font-head) !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    text-shadow:
        2px 2px 0 var(--mx-a5),
        4px 4px 0 var(--mx-a1),
        6px 6px 0 var(--mx-a2) !important;
}

.brand-community-head h2 strong,
.brand-review-head h2 strong {
    background: linear-gradient(90deg, var(--mx-a3), var(--mx-a2), var(--mx-a4), var(--mx-a3)) !important;
    background-size: 250% auto !important;
    animation: mx-gradient-shift 4s ease infinite !important;
}

.brand-faq-item {
    border: 4px solid var(--mx-a2) !important;
    border-radius: 18px !important;
    box-shadow: 6px 6px 0 var(--mx-a5) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.brand-faq-item:nth-child(odd) {
    border-color: var(--mx-a4) !important;
    border-style: dashed !important;
    box-shadow: 6px 6px 0 var(--mx-a3) !important;
    transform: translateX(4px);
}

.brand-faq-item:hover {
    transform: translateY(-3px) rotate(0.5deg) !important;
    border-color: var(--mx-a3) !important;
}

.brand-faq-item[open] {
    border: 4px solid var(--mx-a3) !important;
    box-shadow: 8px 8px 0 var(--mx-a1), var(--mx-glow) !important;
}

.brand-faq-number {
    border: 3px solid var(--mx-a1) !important;
    font-family: var(--mx-font-head) !important;
    font-weight: 900 !important;
    box-shadow: 3px 3px 0 var(--mx-a3) !important;
}

.brand-faq-question {
    font-family: var(--mx-font-head) !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    font-size: 12px !important;
}

.brand-faq-answer {
    border-left: 4px solid var(--mx-a3) !important;
    background: linear-gradient(90deg, rgba(255, 212, 90, 0.1), rgba(203, 8, 2, 0.08)) !important;
}

.brand-faq-note {
    border: 4px dashed var(--mx-a2) !important;
    border-radius: 16px !important;
}

.brand-review-label {
    font-family: var(--mx-font-head) !important;
    font-weight: 900 !important;
    letter-spacing: 0.15em !important;
    border: 3px solid var(--mx-a1) !important;
    box-shadow: 4px 4px 0 var(--mx-a5) !important;
}

.brand-review-card {
    border: 4px solid var(--mx-a2) !important;
    border-radius: 20px !important;
    box-shadow: 8px 8px 0 var(--mx-a5) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.brand-review-card:nth-child(1) { border-color: var(--mx-a1) !important; transform: rotate(-1deg); box-shadow: 8px 8px 0 var(--mx-a3) !important; }
.brand-review-card:nth-child(2) { border-color: var(--mx-a4) !important; transform: translateY(12px); border-style: dashed !important; }
.brand-review-card:nth-child(3) { border-color: var(--mx-a2) !important; transform: rotate(1deg); box-shadow: 8px 8px 0 var(--mx-a1) !important; }

.brand-review-card:hover {
    transform: translateY(-6px) rotate(1.5deg) scale(1.02) !important;
    box-shadow: 10px 10px 0 var(--mx-a3), var(--mx-glow) !important;
}

.brand-review-card::before {
    color: rgba(203, 8, 2, 0.15) !important;
    font-size: 7rem !important;
}

.brand-review-city {
    color: var(--mx-a2) !important;
}

/* ============================================================
   FOOTER SHELL + SAMSUNG FOOTER
   ============================================================ */
.brand-footer-shell {
    border-top: 4px solid var(--mx-a3) !important;
    background:
        radial-gradient(circle, rgba(203, 8, 2, 0.2) 1px, transparent 1px),
        linear-gradient(135deg, #0d0202, #2d0808, #4a0810) !important;
    background-size: 20px 20px, auto !important;
    box-shadow: 0 -8px 40px rgba(203, 8, 2, 0.25) !important;
}

.brand-footer-shell::before {
    height: 4px !important;
    background: linear-gradient(90deg, var(--mx-a3), var(--mx-a1), var(--mx-a2), transparent) !important;
    box-shadow: var(--mx-glow) !important;
}

.breadcrumb__path a:hover {
    color: var(--mx-a2) !important;
}

.breadcrumb__path>li:first-child a::before {
    color: var(--mx-a2) !important;
    text-shadow: 2px 2px 0 var(--mx-a1) !important;
}

.footer .footer-category__title {
    font-family: var(--mx-font-head) !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    text-shadow: 2px 2px 0 var(--mx-a1) !important;
}

.footer .footer-category__link {
    font-weight: 600 !important;
}

.footer .footer-category__link:hover {
    color: var(--mx-a3) !important;
    text-shadow: 1px 1px 0 var(--mx-a1) !important;
}

/* ============================================================
   FEATURE MOVING BAR
   ============================================================ */
.feature-moving-bar {
    border: 4px solid var(--mx-a1) !important;
    border-radius: 16px !important;
    background: linear-gradient(120deg, var(--mx-a3) 0%, var(--mx-a1) 35%, var(--mx-a4) 65%, var(--mx-a3) 100%) !important;
    background-size: 260% 260% !important;
    animation: barGradientMove 5s linear infinite !important;
    box-shadow: var(--mx-shadow-1), var(--mx-glow) !important;
    transform: rotate(-0.3deg);
}

.feature-icon {
    border: 3px solid var(--mx-a3) !important;
    border-radius: 14px !important;
    box-shadow: 4px 4px 0 var(--mx-a1) !important;
    animation: mx-wiggle 2s ease-in-out infinite !important;
}

.feature-title {
    font-family: var(--mx-font-head) !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    text-shadow: 2px 2px 0 rgba(13, 2, 2, 0.8) !important;
    color: #fff !important;
}

/* ============================================================
   INFO CARDS + ARTICLE
   ============================================================ */
.info-card {
    border: 4px solid var(--mx-a2) !important;
    border-radius: 20px !important;
    box-shadow: 8px 8px 0 var(--mx-a5) !important;
    transform: rotate(0.5deg);
    transition: transform 0.3s ease !important;
}

.info-card:nth-child(2) { border-color: var(--mx-a4) !important; transform: rotate(-0.8deg) translateY(8px); box-shadow: 8px 8px 0 var(--mx-a3) !important; }
.info-card:nth-child(3) { border-color: var(--mx-a3) !important; border-style: dashed !important; box-shadow: 8px 8px 0 var(--mx-a1) !important; }
.info-card:nth-child(4) { border-color: var(--mx-a1) !important; transform: rotate(1deg); box-shadow: 8px 8px 0 var(--mx-a4) !important; }

.info-card:hover {
    transform: translateY(-4px) rotate(0deg) scale(1.03) !important;
}

.info-card .label {
    font-family: var(--mx-font-head) !important;
    font-weight: 800 !important;
    letter-spacing: 0.1em !important;
    color: var(--mx-a1) !important;
}

.info-card .value {
    font-family: var(--mx-font-head) !important;
    font-weight: 900 !important;
}

.gold-divider {
    max-width: 200px !important;
    height: 6px !important;
    border: 2px solid var(--mx-a3) !important;
    border-radius: 999px !important;
    box-shadow: 4px 4px 0 var(--mx-a1) !important;
}

h1 {
    font-family: var(--mx-font-head) !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    text-shadow: 2px 2px 0 var(--mx-a5), 4px 4px 0 var(--mx-a1) !important;
}

h1 span {
    color: var(--mx-a2) !important;
}

h2 {
    font-family: var(--mx-font-head) !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
}

h2::before {
    background: var(--mx-a1) !important;
    width: 6px !important;
}

h3 {
    font-family: var(--mx-font-head) !important;
    color: var(--mx-a2) !important;
    text-shadow: 1px 1px 0 var(--mx-a5) !important;
}

/* ============================================================
   POPUP
   ============================================================ */
#popupOverlay .popup-container {
    border: 4px solid var(--mx-a3) !important;
    border-radius: 24px !important;
    box-shadow: var(--mx-shadow-2), var(--mx-glow-lg) !important;
    background: linear-gradient(145deg, #0d0202, #2d0808 55%, #4a0810) !important;
    transform: rotate(-1deg);
}

#popupOverlay .login {
    border: 4px solid var(--mx-a3) !important;
    font-family: var(--mx-font-head) !important;
    font-weight: 900 !important;
    letter-spacing: 0.12em !important;
    background: linear-gradient(135deg, var(--mx-a1), var(--mx-a5), var(--mx-a2)) !important;
    background-size: 200% auto !important;
    animation: mx-gradient-shift 4s ease infinite !important;
    box-shadow: var(--mx-shadow-1), var(--mx-glow) !important;
}

#popupOverlay .register {
    border: 4px solid var(--mx-a1) !important;
    font-family: var(--mx-font-head) !important;
    font-weight: 900 !important;
    box-shadow: 8px 8px 0 var(--mx-a1) !important;
}

#popupOverlay .close-btn {
    border: 3px solid var(--mx-a3) !important;
    box-shadow: 4px 4px 0 var(--mx-a1) !important;
}

/* ============================================================
   ANCHOR NAV + GALLERY
   ============================================================ */
.pdd39-anchor-nav .tab__item-title,
.pdd39-anchor-nav .tab__item {
    border: 4px solid var(--mx-a2) !important;
    border-radius: 999px !important;
    font-family: var(--mx-font-head) !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    font-size: 12px !important;
    box-shadow: 4px 4px 0 var(--mx-a5) !important;
}

.pdd39-anchor-nav .tab__item.is-active .tab__item-title,
.pdd39-anchor-nav .tab__item-title:hover {
    border-color: var(--mx-a3) !important;
    box-shadow: 6px 6px 0 var(--mx-a1), var(--mx-glow) !important;
    transform: scale(1.05);
}

.hdd02-gallery__thumbnail-item-text {
    border: 4px dashed var(--mx-a3) !important;
    font-family: var(--mx-font-head) !important;
    font-weight: 800 !important;
    box-shadow: 6px 6px 0 var(--mx-a1) !important;
}

/* Floating decorations — use .mx-deco class in HTML */
.mx-deco {
    position: absolute;
    pointer-events: none;
    z-index: 3;
    line-height: 1;
    user-select: none;
}
.mx-deco--float    { animation: mx-float 5s ease-in-out infinite; }
.mx-deco--float-rev { animation: mx-float-rev 4s ease-in-out infinite; }
.mx-deco--wiggle   { animation: mx-wiggle 1.8s ease-in-out infinite; }
.mx-deco--bounce   { animation: mx-bounce-subtle 2.5s ease-in-out infinite; }