/* Level Up Customs — shared design system
   Extracted & adapted from the Level-Up-Customs.html prototype (dark / gold aesthetic) */

body {
    font-family: 'Inter', sans-serif;
    background-color: #07080a;
    color: #f1f1f1;
    overflow-x: hidden;
}
h1,h2,h3,.hf { font-family: 'Barlow Condensed', sans-serif; }

.glass {
    background: rgba(10,12,16,0.72);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255,255,255,0.06);
    box-shadow: 0 4px 30px rgba(0,0,0,0.6);
}
.orb {
    position:absolute; border-radius:50%; filter:blur(115px);
    pointer-events:none; animation: orb-float 24s infinite alternate ease-in-out;
}
@keyframes orb-float {
    0%   { transform: translate(0,0) scale(1); }
    50%  { transform: translate(5%,6%) scale(1.06); }
    100% { transform: translate(-3%,3%) scale(0.95); }
}

.text-gold {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 40%, #d97706 80%, #fbbf24 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gold-shift 6s ease infinite;
}
@keyframes gold-shift {
    0%,100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}

.spot-card { position:relative; overflow:hidden; transition:transform .4s ease, box-shadow .4s ease; }
.spot-card::before {
    content:''; position:absolute;
    top:var(--cy,50%); left:var(--cx,50%);
    transform:translate(-50%,-50%);
    width:500px; height:500px;
    background:radial-gradient(circle,rgba(245,158,11,0.14) 0%,transparent 70%);
    opacity:0; transition:opacity .4s; pointer-events:none; z-index:0;
}
.spot-card:hover::before { opacity:1; }
.spot-card:hover { transform:translateY(-4px); box-shadow:0 20px 60px rgba(245,158,11,0.12); }
.spot-content { position:relative; z-index:1; }

.btn-gold {
    background: linear-gradient(135deg, #d97706 0%, #92400e 100%);
    transition: all .3s;
    box-shadow: 0 0 20px rgba(245,158,11,0.35);
}
.btn-gold:hover { transform:translateY(-2px); box-shadow:0 0 44px rgba(245,158,11,0.55); }

.btn-outline-red {
    border:1px solid rgba(220,38,38,.45); color:#f87171; transition:all .3s;
}
.btn-outline-red:hover {
    background:rgba(220,38,38,.08); border-color:#dc2626;
    box-shadow:0 0 22px rgba(220,38,38,.25); transform:translateY(-2px);
}

.gold-rule { height:2px; background:linear-gradient(90deg,transparent,#f59e0b,transparent); }
.amber-rule { height:1px; background:linear-gradient(90deg,transparent,rgba(245,158,11,.35),transparent); }

.nav-link { position:relative; transition:color .2s; }
.nav-link::after { content:''; position:absolute; bottom:-3px; left:0; right:0; height:1px; background:#f59e0b; transform:scaleX(0); transition:transform .25s; }
.nav-link:hover::after,.nav-link.active::after { transform:scaleX(1); }
.nav-link:hover,.nav-link.active { color:#fbbf24; }

#mobile-menu { transition:max-height .35s ease,opacity .35s ease; max-height:0; opacity:0; overflow:hidden; }
#mobile-menu.open { max-height:480px; opacity:1; }

.badge {
    display:inline-flex; align-items:center; gap:.5rem;
    padding:.35rem 1rem; border-radius:9999px;
    border:1px solid rgba(245,158,11,.35);
    background:rgba(245,158,11,.07);
    color:#fbbf24;
    font-size:.65rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
}

.reveal { opacity:0; transform:translateY(26px); transition:opacity .7s ease,transform .7s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }

.ticker-wrap { overflow:hidden; border-top:1px solid rgba(245,158,11,.18); border-bottom:1px solid rgba(245,158,11,.18); }
.ticker-inner { display:flex; width:max-content; animation:ticker 26s linear infinite; }
@keyframes ticker { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.ticker-item { white-space:nowrap; padding:.6rem 2.5rem; font-family:'Barlow Condensed',sans-serif; font-size:.78rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:#6b7280; }
.ticker-item .dot { color:#f59e0b; margin-right:2.5rem; }

.stat-val { font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:3.5rem; line-height:1; }

.tag-amber { display:inline-block; padding:.2rem .7rem; border-radius:9999px; background:rgba(245,158,11,.12); color:#fbbf24; font-size:.65rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; cursor:pointer; border:1px solid transparent; transition:all .2s; }
.tag-amber:hover { background:rgba(245,158,11,.22); }
.tag-amber.active { background:rgba(245,158,11,.28); border-color:rgba(245,158,11,.5); color:#f59e0b; }
.tag-red   { display:inline-block; padding:.2rem .7rem; border-radius:9999px; background:rgba(220,38,38,.12); color:#f87171; font-size:.65rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }

.sister-nav-pill {
    display:inline-flex; align-items:center; gap:.5rem;
    padding:.25rem .8rem; border-radius:9999px;
    border:1px solid rgba(220,38,38,.3);
    background:rgba(220,38,38,.06);
    color:#f87171; font-size:.65rem; font-weight:700;
    letter-spacing:.15em; text-transform:uppercase;
    transition:all .25s;
}
.sister-nav-pill:hover { background:rgba(220,38,38,.13); border-color:#dc2626; }

.build-cat {
    font-family:'Barlow Condensed',sans-serif;
    font-style:italic;
    font-weight:800;
    font-size:1rem;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:#f59e0b;
}

/* FAQ accordion */
.faq-item { border-top: 1px solid rgba(255,255,255,.06); }
.faq-item:last-child { border-bottom: 1px solid rgba(255,255,255,.06); }
.faq-q { cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.25rem 0; }
.faq-q h3 { font-family:'Inter',sans-serif; font-weight:600; font-size:1rem; color:#fff; }
.faq-icon { flex-shrink:0; transition:transform .25s; color:#f59e0b; }
.faq-item.open .faq-icon { transform:rotate(45deg); }
.faq-a { max-height:0; overflow:hidden; transition:max-height .35s ease; }
.faq-item.open .faq-a { max-height:400px; }
.faq-a p { padding:0 0 1.25rem; color:#94a3b8; font-size:.9rem; line-height:1.65; font-weight:300; }

/* Gallery placeholder tiles */
.gallery-tile {
    aspect-ratio: 4/3; border-radius:1rem; position:relative; overflow:hidden;
    background: linear-gradient(135deg, rgba(245,158,11,.10), rgba(0,0,0,.4));
    border:1px solid rgba(245,158,11,.14);
    display:flex; align-items:center; justify-content:center;
}
.gallery-tile .gt-label { font-family:'Barlow Condensed',sans-serif; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#78716c; font-size:.85rem; text-align:center; padding: 0 1rem; }

/* Gallery tiles with real photos */
.gallery-tile.has-photo { display:block; }
.gallery-tile.has-photo img {
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
    transition: transform .5s ease;
}
.gallery-tile.has-photo:hover img { transform:scale(1.06); }
.gallery-tile .gt-photo-caption {
    position:absolute; left:0; right:0; bottom:0; z-index:1;
    background:linear-gradient(0deg, rgba(0,0,0,.88) 10%, transparent 100%);
    padding:2rem .9rem .8rem;
    font-family:'Barlow Condensed',sans-serif; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
    color:#fff; font-size:.8rem; text-align:left;
}

/* Featured build photo strip (home page) */
.build-photo-card { position:relative; border-radius:1rem; overflow:hidden; aspect-ratio:4/5; border:1px solid rgba(245,158,11,.14); }
.build-photo-card img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.build-photo-card:hover img { transform:scale(1.06); }
.build-photo-card .bp-caption {
    position:absolute; left:0; right:0; bottom:0;
    background:linear-gradient(0deg, rgba(0,0,0,.88) 10%, transparent 100%);
    padding:2.5rem 1rem 1rem;
    font-family:'Barlow Condensed',sans-serif; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
    color:#fff; font-size:.9rem;
}

/* Real photo banner (about page) */
.photo-banner { border-radius:1rem; overflow:hidden; border:1px solid rgba(245,158,11,.14); }
.photo-banner img { width:100%; height:100%; object-fit:cover; display:block; }

/* Brand partner logo grid */
.brand-card {
    background: rgba(255,255,255,.03); border:1px solid rgba(245,158,11,.12); border-radius:.85rem;
    padding:1.1rem; display:flex; align-items:center; justify-content:center; height:88px;
    transition: border-color .25s, background .25s;
}
.brand-card:hover { border-color:rgba(245,158,11,.4); background:rgba(245,158,11,.05); }
.brand-card img { max-height:46px; max-width:100%; width:auto; object-fit:contain; filter:brightness(0) invert(1); opacity:.85; }
.brand-card:hover img { opacity:1; }
.brand-card.text-only { font-family:'Barlow Condensed',sans-serif; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#9ca3af; font-size:.85rem; text-align:center; }
/* Logos that ship with their own opaque/colored background (not transparent line art) — show natural color on a light plate instead of forcing white-silhouette */
.brand-card.light { background:#f2f1ee; border-color:rgba(0,0,0,.08); }
.brand-card.light:hover { background:#ffffff; border-color:rgba(245,158,11,.5); }
.brand-card.light img { filter:none; opacity:1; }
.brand-cat-label { font-family:'Barlow Condensed',sans-serif; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:#f59e0b; font-size:.75rem; margin-bottom:.9rem; }

/* Breadcrumb */
.crumb-nav { font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:#64748b; }
.crumb-nav a { color:#94a3b8; transition:color .2s; }
.crumb-nav a:hover { color:#fbbf24; }