@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Manrope:wght@400;500;600;700;800&family=Noto+Sans+SC:wght@500;700;900&display=swap');

:root {
    --ink: #0b0b0b;
    --paper: #f6f6f2;
    --brand: #ff6b2d;
    --brand-strong: #ff3b00;
    --brand-soft: rgba(255, 107, 45, 0.18);
    --brand-soft-border: rgba(255, 107, 45, 0.4);
}

body {
    font-family: 'Manrope', 'Noto Sans SC', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
    color: var(--ink);
    background-color: var(--paper);
    line-height: 1.6;
}

h1, h2, h3, h4 {
    font-family: 'Bebas Neue', 'Noto Sans SC', 'PingFang SC', sans-serif;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.hero-shell {
    background:
        radial-gradient(120% 120% at 90% 10%, var(--brand-soft) 0%, rgba(11, 11, 11, 0) 55%),
        linear-gradient(125deg, var(--ink) 0%, #151515 55%, #1c1c1c 100%);
}

.hero-shell::before {
    content: "";
    position: absolute;
    inset: -40% -30% auto auto;
    width: 60%;
    height: 200%;
    background: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.06) 0 8px, transparent 8px 20px);
    opacity: 0.35;
    transform: rotate(8deg);
    pointer-events: none;
}

.hero-image {
    filter: grayscale(100%) contrast(1.1);
    mix-blend-mode: screen;
}

.kicker {
    letter-spacing: 0.35em;
    text-transform: uppercase;
}

.product-card:hover .product-image {
    transform: scale(1.05);
}

.transition-all-300 {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hide-scrollbar::-webkit-scrollbar {
    display: none;
}
.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.text-red-500,
.text-red-600,
.text-red-700 {
    color: var(--brand) !important;
}
.hover\:text-red-500:hover,
.hover\:text-red-600:hover,
.hover\:text-red-700:hover {
    color: var(--brand) !important;
}
.bg-red-600 {
    background-color: var(--brand) !important;
}
.hover\:bg-red-600:hover {
    background-color: var(--brand) !important;
}
.border-red-600 {
    border-color: var(--brand) !important;
}
.hover\:border-red-600\/30:hover {
    border-color: var(--brand-soft-border) !important;
}
.bg-red-50,
.bg-red-50\/30 {
    background-color: var(--brand-soft) !important;
}
.border-red-100\/50 {
    border-color: var(--brand-soft-border) !important;
}
.decoration-red-600 {
    text-decoration-color: var(--brand) !important;
}
.focus\:ring-red-600:focus {
    --tw-ring-color: var(--brand) !important;
}