/* OLED Glass Design System for MyGolf - v2.0 (2026 Edition) */

:root {
    --terracotta: #D4AF37;
    --ivory: #EDE9E3;
    --warm-black: #121824;
    --cool-sage: #A9855F;
    --glass-alpha: rgba(255, 255, 255, 0.05);
    --glass-refraction: rgba(255, 255, 255, 0.08);
    --border-alpha: rgba(255, 255, 255, 0.12);
    --gradient-glow: radial-gradient(circle at top left, rgba(212, 175, 55, 0.15), transparent 40%);
    --spacing-unit: 8px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--warm-black);
    background-image: var(--gradient-glow);
    background-attachment: fixed;
    color: var(--ivory);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-wrap: pretty;
}

img {
    outline: 1px solid rgba(255, 255, 255, 0.1);
    outline-offset: -1px;
}

h1, h2, h3, .mono {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    text-wrap: balance;
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
}

/* --- Hero Section --- */
.hero {
    min-height: 90vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 120px 0 60px;
    opacity: 0;
    transform: translateY(20px);
    animation: enter-fade 0.8s cubic-bezier(0.2, 0, 0, 1) forwards;
}

.hero-tag {
    color: var(--terracotta);
    font-size: 0.9rem;
    margin-bottom: 24px;
    display: inline-block;
    padding: 6px 16px;
    border: 1px solid var(--terracotta);
    border-radius: 20px;
    transition: transform 0.2s cubic-bezier(0.2, 0, 0, 1);
}

.hero-tag:hover {
    transform: scale(1.02);
}

.hero-title {
    font-size: clamp(3rem, 8vw, 5rem);
    color: var(--ivory);
    line-height: 1.1;
    margin-bottom: 24px;
    font-weight: 800;
}

.hero-subtitle {
    font-size: 1.25rem;
    color: var(--cool-sage);
    max-width: 600px;
    margin-bottom: 48px;
}

/* --- Bento Grid --- */
.bento-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(200px, auto);
    gap: 24px;
    margin: 80px 0;
}

.bento-item {
    background: var(--glass-alpha);
    border-radius: 32px;
    padding: 32px;
    backdrop-filter: blur(12px);
    transition-property: transform, background-color, box-shadow;
    transition-duration: 0.3s;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    opacity: 0;
    transform: translateY(30px);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.08),
        0 4px 6px -1px rgba(0, 0, 0, 0.1),
        0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.bento-item:hover {
    transform: translateY(-8px);
    background: var(--glass-refraction);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.13),
        0 20px 25px -5px rgba(0, 0, 0, 0.2),
        0 10px 10px -5px rgba(0, 0, 0, 0.1);
}

/* Staggered Animations */
.bento-item:nth-child(1) { animation: enter-fade 0.8s 0.1s cubic-bezier(0.2, 0, 0, 1) forwards; }
.bento-item:nth-child(2) { animation: enter-fade 0.8s 0.2s cubic-bezier(0.2, 0, 0, 1) forwards; }
.bento-item:nth-child(3) { animation: enter-fade 0.8s 0.3s cubic-bezier(0.2, 0, 0, 1) forwards; }
.bento-item:nth-child(4) { animation: enter-fade 0.8s 0.4s cubic-bezier(0.2, 0, 0, 1) forwards; }
.bento-item:nth-child(5) { animation: enter-fade 0.8s 0.5s cubic-bezier(0.2, 0, 0, 1) forwards; }

.bento-large { grid-column: span 2; grid-row: span 2; }
.bento-wide { grid-column: span 2; }
.bento-tall { grid-row: span 2; }

.bento-item h3 {
    font-size: 1.25rem;
    margin-bottom: 12px;
    color: var(--terracotta);
}

.bento-item p {
    font-size: 0.95rem;
    color: var(--cool-sage);
}

.bag-preview {
    position: relative;
    height: 240px;
    margin-top: 24px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    overflow: hidden;
    background: rgba(0,0,0,0.1);
    border-radius: 20px;
    padding-bottom: 10px;
}

.bag-base {
    height: 90%;
    z-index: 1;
    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.3));
}

.bag-rim {
    position: absolute;
    height: 90%;
    z-index: 5;
    pointer-events: none;
}

.club {
    position: absolute;
    height: 60%;
    z-index: 3;
    transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1);
}

.club:hover {
    transform: translateY(-20px) rotate(5deg);
    z-index: 6;
}

.club-driver { bottom: 30%; left: 35%; transform: rotate(-10deg); height: 70%; }
.club-iron   { bottom: 30%; left: 45%; transform: rotate(5deg); }
.club-wedge  { bottom: 30%; right: 35%; transform: rotate(15deg); height: 55%; }
.club-putter { bottom: 35%; left: 40%; transform: rotate(-5deg); height: 50%; }

.placeholder-img {
    background: rgba(0,0,0,0.2);
    height: 180px;
    border-radius: 16px;
    margin-top: 24px;
    border: 1px dashed var(--cool-sage);
    display: flex;
    align-items: center;
    justify-content: center;
    outline: 1px solid rgba(255, 255, 255, 0.1);
    outline-offset: -1px;
}

/* --- Trust Strip --- */
.trust-strip {
    display: flex;
    justify-content: center;
    gap: 40px;
    padding: 40px 0;
    opacity: 0.6;
    flex-wrap: wrap;
    border-top: 1px solid var(--border-alpha);
    border-bottom: 1px solid var(--border-alpha);
    font-variant-numeric: tabular-nums;
}

.trust-item {
    font-family: monospace;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
}

/* --- Buttons --- */
.cta-group {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
}

.btn {
    padding: 18px 36px;
    border-radius: 16px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1rem;
    transition-property: transform, filter, background-color, box-shadow;
    transition-duration: 0.2s;
    transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
    cursor: pointer;
    border: none;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-primary {
    background-color: var(--terracotta);
    color: var(--warm-black);
    box-shadow: 0 4px 6px -1px rgba(212, 175, 55, 0.1), 0 2px 4px -1px rgba(212, 175, 55, 0.06);
}

.btn-secondary {
    background: var(--glass-alpha);
    color: var(--ivory);
    border: 1px solid var(--border-alpha);
}

.btn:active {
    transform: scale(0.96);
}

.btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
}

/* --- Animations --- */
@keyframes enter-fade {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- FAQ --- */
.faq-section {
    padding: 100px 0;
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border-alpha);
}

.faq-item h4 {
    margin-bottom: 12px;
    color: var(--ivory);
}

/* --- Footer --- */
footer {
    padding: 80px 0 40px;
    text-align: center;
    box-shadow: 0 -1px 0 0 rgba(255, 255, 255, 0.08);
}

.footer-logo {
    font-size: 1.5rem;
    color: var(--terracotta);
    margin-bottom: 24px;
}

.footer-links {
    display: flex;
    justify-content: center;
    gap: 32px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.footer-links a {
    color: var(--cool-sage);
    text-decoration: none;
    font-size: 0.8rem;
    transition-property: color;
    transition-duration: 0.2s;
    transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
    padding: 8px 0;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.footer-links a:hover {
    color: var(--ivory);
}

/* --- Responsive --- */
@media (max-width: 900px) {
    .bento-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .hero-title { font-size: 3.5rem; }
}

@media (max-width: 600px) {
    .bento-grid {
        grid-template-columns: 1fr;
    }
    .bento-large, .bento-wide, .bento-tall {
        grid-column: span 1;
        grid-row: span 1;
    }
    .hero-title { font-size: 2.5rem; }
    .hero { padding-top: 80px; }
}