/* ── Design tokens ── */
:root {
  --dark:    #0B0F13;
  --navy:    #0B1828;
  --blue:    #0066cc;
  --accent:  #4a9eff;
  --mid:     #0b1220;
  --deep:    #050A10;
  --border:  rgba(255,255,255,0.07);
  --border-accent: rgba(74,158,255,0.25);
}

* { box-sizing: border-box; }
html, body {
  overflow-x: hidden;
}
body {
  font-family: 'Montserrat', sans-serif;
  color: #0d3c61; /* Matches the dark blue in the logo */
  margin: 0;
  background: #f0f4f8;
}

/* Headings (Punchy and Bold like "TRAVELING GUNS") */
h1, h2, h3, h4, h5 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700; /* Bold */
  text-transform: uppercase; /* Optional: Gives it that logo feel */
  letter-spacing: -0.5px; /* Keeps tight, impactful header spacing */
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }

/* Paragraph Text (Clean and highly readable) */
p {
  font-family: 'Montserrat', sans-serif;
  font-weight: 400; /* Regular */
  font-size: 1rem;
  line-height: 1.6; /* Good breathing room for reading body text */
}

/* Links (Slightly sharper emphasis) */
a {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500; /* Medium weight to pop out from body text */
  color: #4b6b88; /* Accent color matching the lighter "T G K" shading */
  text-decoration: none !important;
  transition: color 0.2s ease;
}

a:hover {
  color: #0d3c61; /* Darker blue on hover */
  text-decoration: underline;
}

.logo-subtext-style {
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 4px; /* Creates the wide tracking effect */
  font-size: 0.85rem;
}

/* ── Scrolled header ── */
#main-header {
  transition: background 0.35s ease, box-shadow 0.35s ease, padding 0.35s ease;
}
#main-header.scrolled {
  background: rgba(11, 15, 19, 0.97) !important;
  backdrop-filter: blur(20px);
  box-shadow: 0 4px 40px rgba(0,0,0,0.5);
}
#top-header {
  height: 36px;
  opacity: 1;
  overflow: hidden;
  transition: height 0.3s ease, opacity 0.25s ease;
}
#main-header.scrolled #top-header {
  height: 0;
  opacity: 0;
  pointer-events: none;
}

/* ── Mega menu ── */
.mega-menu-wrapper { position: relative; }
.mega-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 100%;
  transform: translateX(-50%) translateY(-6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
  width: 750px;
}
.mega-menu-wrapper:hover .mega-menu,
.mega-menu-wrapper:focus-within .mega-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.mega-menu::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  height: 8px;
}

/* ── Standard dropdown ── */
.dropdown-wrapper { position: relative; }
.dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
  min-width: 230px;
}
.dropdown-wrapper:hover .dropdown-menu,
.dropdown-wrapper:focus-within .dropdown-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.dropdown-menu::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  height: 8px;
}

/* ── Nav link style ── */
.nav-link {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.82);
  position: relative;
  padding-bottom: 2px;
  transition: color 0.2s;
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 2px;
  background: #4a9eff;
  transition: width 0.25s ease;
}
.nav-link:hover { color: #fff; }
.nav-link:hover::after { width: 100%; }

/* ── CTA button ── */
.cta-btn {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  letter-spacing: 0.14em;
  background: linear-gradient(135deg, #003f80, #0066cc);
  border: 1px solid rgba(74,158,255,0.35);
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
}
.cta-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #0055aa, #0080ff);
  opacity: 0;
  transition: opacity 0.25s;
}
.cta-btn:hover::before { opacity: 1; }
.cta-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 24px rgba(0,102,204,0.45); }
.cta-btn span { position: relative; z-index: 1; }

/* ── Dropdown item ── */
.dd-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  color: rgba(255,255,255,0.75);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
  transition: background 0.18s, color 0.18s;
  cursor: pointer;
  width: 270px;
}
.dd-item:hover {
  background: rgba(74,158,255,0.12);
  color: #fff;
}
.dd-item i { color: #4a9eff; width: 14px; }

.dd-item a:hover {
  color: #fff;
  text-decoration: none;
  transition: all 0.2s ease;
  padding-right: 5px;
}

/* ── Mega column header ── */
.col-header {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #4a9eff;
  border-bottom: 1px solid rgba(74,158,255,0.25);
  padding-bottom: 8px;
  margin-bottom: 8px;
  cursor: pointer;
  
}

.col-header a {
  color: #4a9eff;
  transition: all 0.2s ease;
  font-weight: 600;
}

.col-header a:hover {
  color: #fff;
}

.col-header:hover {
  color: #fff;
  background: rgba(74,158,255,0.12);
  padding: 9px 14px; 
  transition: all 0.2s ease; 
}

/* ── Glass panel ── */
.glass-panel {
  background: rgba(11,15,19,0.95);
  backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,0.08);
}

/* ── Mobile drawer ── */
#mobile-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0);
  z-index: 90;
  pointer-events: none;
  transition: background 0.35s ease;
}
#mobile-overlay.open {
  background: rgba(0,0,0,0.65);
  pointer-events: auto;
}
#mobile-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 320px;
  z-index: 100;
  transform: translateX(100%);
  transition: transform 0.38s cubic-bezier(0.22,1,0.36,1);
  background: #0B0F13;
  border-left: 1px solid rgba(255,255,255,0.07);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
#mobile-drawer.open { transform: translateX(0); }

/* ── Mobile accordion ── */
.mob-acc-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.32s ease;
}
.mob-acc-content.open { max-height: 400px; }
.mob-acc-chevron { transition: transform 0.25s ease; }
.mob-acc-chevron.open { transform: rotate(180deg); }

/* ── Footer ── */
.footer-link {
  color: rgba(255,255,255,0.55);
  font-size: 0.82rem;
  transition: color 0.18s;
  line-height: 2;
}
.footer-link:hover { color: #4a9eff; }

/* ── Social icon ── */
.social-icon {
  width: 36px; height: 36px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.5);
  transition: all 0.22s;
  font-size: 0.85rem;
}
.social-icon:hover {
  border-color: #4a9eff;
  color: #4a9eff;
  background: rgba(74,158,255,0.1);
  transform: translateY(-2px);
}

/* ── Scroll reveal ── */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Logo cross-hair accent ── */
.logo-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  background: linear-gradient(135deg, #003f80, #0066cc);
  border: 1px solid rgba(74,158,255,0.4);
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  color: #fff;
  flex-shrink: 0;
}

/* ── Hamburger lines ── */
.ham-line {
  display: block;
  width: 22px; height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: all 0.28s ease;
}

/* placeholder content area */
.page-content {
  min-height: 200vh;
  background: linear-gradient(180deg, #e8edf3 0%, #d0d8e4 100%);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
  gap: 16px;
  padding: 120px 24px 80px;
}

/* ── Keyframes ── */
@keyframes fadeUp   { from { opacity:0; transform:translateY(32px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeIn   { from { opacity:0; } to { opacity:1; } }
@keyframes scaleIn  { from { opacity:0; transform:scale(0.94); } to { opacity:1; transform:scale(1); } }
@keyframes scrollPulse { 0%,100% { transform:translateY(0); opacity:.8; } 50% { transform:translateY(8px); opacity:.4; } }
@keyframes counterUp { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
@keyframes shimmer  { 0% { background-position:-200% center; } 100% { background-position:200% center; } }
@keyframes ripple   { to { transform:scale(4); opacity:0; } }

/* ── Animation utilities ── */
.anim-fade-up   { animation: fadeUp   0.7s cubic-bezier(.22,1,.36,1) both; }
.anim-fade-in   { animation: fadeIn   0.6s ease both; }
.anim-scale-in  { animation: scaleIn  0.65s cubic-bezier(.22,1,.36,1) both; }
.delay-100 { animation-delay:.1s; }
.delay-200 { animation-delay:.2s; }
.delay-300 { animation-delay:.3s; }
.delay-400 { animation-delay:.4s; }
.delay-500 { animation-delay:.5s; }
.delay-600 { animation-delay:.6s; }
.delay-700 { animation-delay:.7s; }

/* ── Scroll reveal variants ── */
.reveal-left  { opacity:0; transform:translateX(-28px); transition: opacity .6s ease, transform .6s ease; }
.reveal-right { opacity:0; transform:translateX(28px);  transition: opacity .6s ease, transform .6s ease; }
.reveal-scale { opacity:0; transform:scale(.96);         transition: opacity .55s ease, transform .55s ease; }
.reveal-left.visible, .reveal-right.visible, .reveal-scale.visible { opacity:1; transform:none; }

/* ── Hero ── */
.hero-bg {
    background-image: linear-gradient(to right, rgba(11, 15, 19, 0.95) 20%, rgba(11, 15, 19, 0.65) 60%, rgba(11, 15, 19, 0.9) 100%), url('../images/hero-bg.png');
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
}
.hero-bg::before {
    content:'';
    position:absolute; inset:0;
    background:
    radial-gradient(ellipse 60% 50% at 30% 40%, rgba(0,60,130,.25) 0%, transparent 70%),
    radial-gradient(ellipse 40% 60% at 20% 80%, rgba(0,30,80,.3) 0%, transparent 60%);
    pointer-events:none;
}
/* crosshair reticle watermark — moved to left under content */
.hero-bg::after {
    content:'';
    position:absolute; left:5%; top:50%; transform:translateY(-50%);
    width:min(520px,55vw); height:min(520px,55vw);
    background-image:
    radial-gradient(circle, transparent 48%, rgba(74,158,255,.06) 49%, rgba(74,158,255,.06) 50%, transparent 51%),
    radial-gradient(circle, transparent 30%, rgba(74,158,255,.04) 31%, rgba(74,158,255,.04) 32%, transparent 33%),
    linear-gradient(rgba(74,158,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74,158,255,.04) 1px, transparent 1px);
    background-size: 100% 100%, 100% 100%, 40px 40px, 40px 40px;
    pointer-events:none;
    opacity:.8;
}

.hero-headline {
    font-family:'Montserrat',sans-serif;
    font-weight:900;
    font-size:clamp(2.6rem, 7vw, 5.5rem);
    line-height:1.0;
    letter-spacing:-.02em;
    text-transform:uppercase;
    color:#ffffff;
}
.hero-headline .accent { color:#4a9eff; }
.hero-headline .outline {
    -webkit-text-stroke: 2px rgba(255,255,255,.18);
    color: transparent;
}

/* scroll indicator */
.scroll-arrow { animation: scrollPulse 1.8s ease-in-out infinite; }

/* ── Hero two-column layout ── */
.hero-layout {
    display: flex;
    align-items: center;
    gap: 48px;
    min-height: calc(100vh - 180px);
}
.hero-content {
    flex: 0 0 52%;
    max-width: 52%;
}
.hero-image-col {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.hero-img-frame {
    position: relative;
    width: 100%;
    max-width: 520px;
}
.hero-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
    filter: drop-shadow(0 24px 64px rgba(0,0,0,.7));
    position: relative;
    z-index: 1;
}
.hero-img-glow {
    position: absolute;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
    height: 80px;
    background: radial-gradient(ellipse at center, rgba(74,158,255,.22) 0%, transparent 70%);
    filter: blur(20px);
    pointer-events: none;
    z-index: 0;
}
@media (max-width: 900px) {
    .hero-layout {
        flex-direction: column;
        gap: 36px;
        min-height: auto;
    }
    .hero-content {
        flex: none;
        max-width: 100%;
        order: 1;
    }
    .hero-image-col {
        order: 2;
        width: 100%;
        max-width: 420px;
        margin: 0 auto;
    }
}

/* ── CTA buttons ── */
.btn-primary {
    display:inline-flex; align-items:center; gap:10px;
    padding:14px 30px;
    background: linear-gradient(135deg,#003f80,#0066cc);
    border: 1px solid rgba(74,158,255,.4);
    color:#fff; font-weight:700; font-size:.82rem; letter-spacing:.16em; text-transform:uppercase;
    transition: all .25s ease; position:relative; overflow:hidden;
    border-radius:2px;
}
.btn-primary::before {
    content:''; position:absolute; inset:0;
    background: linear-gradient(135deg,#0055aa,#0080ff);
    opacity:0; transition:opacity .25s;
}
.btn-primary:hover::before { opacity:1; }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(0,102,204,.45); color:#fff; text-decoration:none; }
.btn-primary span { position:relative; z-index:1; }

.btn-ghost {
    display:inline-flex; align-items:center; gap:10px;
    padding:13px 28px;
    background: transparent;
    border: 1px solid rgba(255,255,255,.2);
    color:rgba(255,255,255,.8); font-weight:600; font-size:.82rem; letter-spacing:.14em; text-transform:uppercase;
    transition: all .25s ease; border-radius:2px;
}
.btn-ghost:hover { border-color:rgba(255,255,255,.55); color:#fff; transform:translateY(-1px); text-decoration:none; }

.btn-orange {
    display:inline-flex; align-items:center; gap:10px;
    padding:14px 30px;
    background: linear-gradient(135deg,#b84a00,#e05c00);
    border: 1px solid rgba(255,120,40,.3);
    color:#fff; font-weight:700; font-size:.82rem; letter-spacing:.16em; text-transform:uppercase;
    transition: all .25s ease; position:relative; overflow:hidden; border-radius:2px;
}
.btn-orange:hover { background: linear-gradient(135deg,#d45500,#ff6a00); transform:translateY(-2px); box-shadow:0 8px 28px rgba(200,80,0,.4); color:#fff; text-decoration:none; }

/* ripple */
.ripple-btn { position:relative; overflow:hidden; }
.ripple-btn .ripple-effect {
    position:absolute; border-radius:50%;
    transform:scale(0); animation:ripple .6s linear;
    background:rgba(255,255,255,.25); pointer-events:none;
}

/* ── Section titles ── */
.section-eyebrow {
    font-size:.7rem; font-weight:700; letter-spacing:.28em; text-transform:uppercase;
    color:#4a9eff; margin-bottom:12px; display:block;
}
.section-title {
    font-family:'Montserrat',sans-serif; font-weight:900;
    font-size:clamp(1.8rem, 4vw, 2.8rem);
    text-transform:uppercase; letter-spacing:-.01em; line-height:1.05;
    color:#fff;
}
.section-title.dark { color:#0B1828; }
.section-divider {
    width:44px; height:3px; background:linear-gradient(90deg,#4a9eff,#0066cc);
    margin:16px 0 20px; border-radius:2px;
}

/* ── Category cards ── */
.cat-card {
    position:relative; overflow:hidden; border-radius:4px;
    background:#0f1923;
    border: 1px solid rgba(255,255,255,.07);
    cursor:pointer; transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
    aspect-ratio: 4/5;
    display:flex; align-items:flex-end;
}
.cat-card:hover { transform:translateY(-6px); border-color:rgba(74,158,255,.3); box-shadow:0 20px 48px rgba(0,0,0,.5); }
.cat-card .cat-img {
    position:absolute; inset:0;
    background-size:cover; background-position:center;
    transition: transform .5s ease;
}
.cat-card:hover .cat-img { transform:scale(1.07); }
.cat-card .cat-overlay {
    position:absolute; inset:0;
    background: linear-gradient(to top, rgba(5,10,20,.9) 0%, rgba(5,10,20,.3) 50%, transparent 100%);
}
.cat-card .cat-body { position:relative; z-index:2; padding:20px; width:100%; }
 .cat-label {
    font-size:.68rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
    color:#b3b3b3; margin-bottom:4px; display:block;
}
.cat-card .cat-name {
    font-weight:900; font-size:1.2rem; text-transform:uppercase; color:#fff; letter-spacing:-.01em;
} 
.cat-arrow {
    width:32px; height:32px; border:1px solid rgba(255, 255, 255, 0.4); border-radius:2px;
    display:inline-flex; align-items:center; justify-content:center;
    color: #fff; font-size:.75rem;
    transition: background .25s, color .25s, transform .25s;
    margin-top:10px;
    background: #003f80;
    flex-shrink: 0;
    text-decoration: none !important;
}
.cat-arrow:hover {
    background:#0055aa;
    color:#fff !important;
    transform: scale(1.07);
    text-decoration: none !important;
}
/* Arrow inside hover panel — remove top margin, it’s already at the bottom of a flex column */
.cat6-hover-content .cat-arrow {
    margin-top: 4px;
    align-self: flex-start;
}

/* ── Product cards ── */
.product-card {
    background:#0f1923;
    border: 1px solid rgba(255,255,255,.07);
    border-radius:4px; overflow:hidden;
    transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
    position:relative;
}
.product-card:hover { transform:translateY(-5px); border-color:rgba(74,158,255,.25); box-shadow:0 16px 40px rgba(0,0,0,.45); }
.product-card .prod-img-wrap {
    position:relative; overflow:hidden; aspect-ratio:1;
    background: linear-gradient(135deg, #0d1820 0%, #0a1520 100%);
}
.product-card .prod-img-wrap img,
.product-card .prod-img-wrap .prod-placeholder {
    width:100%; height:100%; object-fit:cover;
    transition: transform .45s ease;
}
.product-card:hover .prod-img-wrap img,
.product-card:hover .prod-img-wrap .prod-placeholder { transform:scale(1.06); }
.product-card .prod-badge {
    position:absolute; top:12px; left:12px;
    padding:3px 10px; border-radius:2px;
    font-size:.62rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
}
.badge-new  { background:#4a9eff; color:#fff; }
.badge-sale { background:#c0392b; color:#fff; }
.badge-hot  { background:#e05c00; color:#fff; }
.prod-wishlist {
    position:absolute; top:12px; right:12px;
    width:32px; height:32px; border-radius:2px;
    background:rgba(11,15,19,.75); border:1px solid rgba(255,255,255,.1);
    display:flex; align-items:center; justify-content:center;
    color:rgba(255,255,255,.4); font-size:.8rem;
    opacity:0; transform:translateY(-4px); pointer-events:none;
    transition: opacity .25s, transform .25s, color .2s, background .2s;
}
.product-card:hover .prod-wishlist { opacity:1; transform:translateY(0); pointer-events:auto; }
.prod-wishlist:hover { color:#e05c00; background:rgba(11,15,19,.95); }
.prod-quick-view {
    position:absolute; bottom:0; left:0; right:0;
    background:rgba(0,50,120,.9); backdrop-filter:blur(8px);
    color:#fff; font-size:.7rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
    padding:10px; text-align:center;
    transform:translateY(100%); transition: transform .28s ease;
}
.product-card:hover .prod-quick-view { transform:translateY(0); }
.prod-stars { color:#f59e0b; font-size:.7rem; }
.prod-rating-count { color:rgba(255,255,255,.35); font-size:.68rem; }
.prod-name { font-weight:700; font-size:.88rem; text-transform:uppercase; letter-spacing:.03em; color:#fff; line-height:1.3; }
.prod-price-current { font-weight:800; font-size:1.05rem; color:#4a9eff; }
.prod-price-old { font-size:.8rem; color:rgba(255,255,255,.3); text-decoration:line-through; }
.btn-cart {
    width:100%; padding:10px; border-radius:2px;
    background: linear-gradient(135deg,#003f80,#0066cc);
    border: 1px solid rgba(74,158,255,.3);
    color:#fff; font-weight:700; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
    display:flex; align-items:center; justify-content:center; gap:8px;
    transition: all .22s ease;
}
.btn-cart:hover { background: linear-gradient(135deg,#0055aa,#0080ff); color:#fff; text-decoration:none; }


/* ── Blog cards ── */
.blog-card {
    background:#0f1923; border:1px solid rgba(255,255,255,.07); border-radius:4px;
    overflow:hidden; transition: transform .3s, border-color .3s, box-shadow .3s;
}
.blog-card:hover { transform:translateY(-5px); border-color:rgba(74,158,255,.25); box-shadow:0 14px 36px rgba(0,0,0,.4); }
.blog-img-wrap { overflow:hidden; aspect-ratio:16/10; }
.blog-img-wrap .blog-placeholder { width:100%; height:100%; transition:transform .45s ease; }
.blog-card:hover .blog-placeholder { transform:scale(1.06); }


/* ── Misc ── */
.section-bg-dark { background:#080d14; }
.section-bg-mid  { background:#0b1220; }
.section-bg-light { background:linear-gradient(180deg,#0e1a28 0%,#0a1520 100%); }
.divider-line { border:none; border-top:1px solid rgba(255,255,255,.06); }

/* ── Shimmer placeholder ── */
.shimmer-bg {
    background: linear-gradient(90deg, #0d1820 25%, #122030 50%, #0d1820 75%);
    background-size:200% 100%;
    animation: shimmer 2.5s infinite;
}

/* ══════════════════════════════════════════════
   VIDEO SECTION
══════════════════════════════════════════════ */
.video-section {
    background: linear-gradient(160deg, #060c15 0%, #0a1525 50%, #060c15 100%);
    position: relative;
    overflow: hidden;
}
.video-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 55% 70% at 70% 50%, rgba(0,80,180,.1) 0%, transparent 65%),
        radial-gradient(ellipse 35% 50% at 15% 60%, rgba(0,40,100,.12) 0%, transparent 60%);
    pointer-events: none;
}

/* Two-column layout */
.video-layout {
    display: flex;
    align-items: center;
    gap: 60px;
}

/* Left copy column */
.video-copy {
    flex: 0 0 42%;
    max-width: 42%;
}

/* Right embed column */
.video-embed-col {
    flex: 1;
    position: relative;
}

/* Frame wrapper with corners */
.video-embed-frame {
    position: relative;
    border-radius: 6px;
    padding: 10px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(74,158,255,.18);
    transition: border-color .4s ease, box-shadow .4s ease;
}
.video-embed-frame:hover {
    border-color: rgba(74,158,255,.45);
    box-shadow: 0 0 48px rgba(0,80,200,.2);
}

/* 16:9 ratio container */
.video-embed-ratio {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 4px;
    overflow: hidden;
    background: #000;
}
.video-embed-ratio iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* Blue corner accents */
.video-corner {
    position: absolute;
    width: 18px;
    height: 18px;
    border-color: #4a9eff;
    border-style: solid;
    z-index: 2;
    transition: width .3s ease, height .3s ease;
}
.video-embed-frame:hover .video-corner { width: 24px; height: 24px; }
.video-corner-tl { top: -1px; left: -1px;  border-width: 2px 0 0 2px; border-radius: 4px 0 0 0; }
.video-corner-tr { top: -1px; right: -1px; border-width: 2px 2px 0 0; border-radius: 0 4px 0 0; }
.video-corner-bl { bottom: -1px; left: -1px;  border-width: 0 0 2px 2px; border-radius: 0 0 0 4px; }
.video-corner-br { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; border-radius: 0 0 4px 0; }

/* Soft glow beneath the embed */
.video-glow {
    position: absolute;
    bottom: -32px;
    left: 50%;
    transform: translateX(-50%);
    width: 65%;
    height: 60px;
    background: radial-gradient(ellipse at center, rgba(74,158,255,.2) 0%, transparent 70%);
    filter: blur(18px);
    pointer-events: none;
}

/* Responsive */
@media (max-width: 900px) {
    .video-layout {
        flex-direction: column;
        gap: 40px;
    }
    .video-copy {
        flex: none;
        max-width: 100%;
    }
    .video-embed-col {
        width: 100%;
    }
}

/* ══════════════════════════════════════════════
   CAT6 — 6-card equal-grid category section
══════════════════════════════════════════════ */
.cat6-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 380px);
    gap: 16px;
}

/* ── Individual card ── */
.cat6-card {
    position: relative;
    overflow: hidden;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,.07);
    cursor: pointer;
    outline: none;
    /* transition covers transform, z-index workaround via scale */
    transition:
        transform 0.45s cubic-bezier(.22,1,.36,1),
        box-shadow 0.45s ease,
        opacity 0.45s ease,
        filter 0.45s ease;
    will-change: transform, opacity, filter;
}

/* Background image */
.cat6-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s cubic-bezier(.22,1,.36,1);
    z-index: 0;
}

/* Gradient overlay */
.cat6-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(5,10,20,.92) 0%,
        rgba(5,10,20,.55) 45%,
        rgba(5,10,20,.15) 100%
    );
    transition: background 0.45s ease;
    z-index: 1;
}

/* Body container */
.cat6-body {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 24px;
}

/* ── Default (non-hovered) state ── */
.cat6-default {
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.cat6-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 1.25rem;
    text-transform: uppercase;
    letter-spacing: -.01em;
    line-height: 1.15;
    color: #fff;
    margin-bottom: 4px;
}

.cat6-arrow-default {
    margin-top: 8px;
}

/* ── Hover-revealed content ── */
.cat6-hover-content {
    position: absolute;
    inset: 0;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.38s ease, transform 0.38s cubic-bezier(.22,1,.36,1);
    pointer-events: none;
}

.cat6-hover-content .cat6-title {
    font-size: 1.1rem;
    margin-bottom: 6px;
}

.cat6-desc {
    font-family: 'Montserrat', sans-serif;
    font-size: .78rem;
    font-weight: 400;
    line-height: 1.55;
    color: rgba(255,255,255,.65);
    margin-bottom: 14px;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.3s ease 0.06s, transform 0.3s ease 0.06s;
}

.cat6-features {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 12px;
}

.cat6-features li {
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: 'Montserrat', sans-serif;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255,255,255,.6);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.28s ease, transform 0.28s ease;
}

.cat6-features li i {
    color: #4a9eff;
    width: 12px;
    font-size: .7rem;
    flex-shrink: 0;
}

/* Stagger each feature item */
.cat6-features li:nth-child(1) { transition-delay: 0.08s; }
.cat6-features li:nth-child(2) { transition-delay: 0.11s; }
.cat6-features li:nth-child(3) { transition-delay: 0.14s; }
.cat6-features li:nth-child(4) { transition-delay: 0.17s; }
.cat6-features li:nth-child(5) { transition-delay: 0.20s; }
.cat6-features li:nth-child(6) { transition-delay: 0.23s; }

/* ── Hover: active card ── */
.cat6-card:hover,
.cat6-card:focus-visible {
    transform: scale(1.04);
    z-index: 10;
    box-shadow: 0 24px 60px rgba(0,0,0,.7), 0 0 0 1px rgba(74,158,255,.25);
}

.cat6-card:hover .cat6-img,
.cat6-card:focus-visible .cat6-img {
    transform: scale(1.1);
}

.cat6-card:hover .cat6-overlay,
.cat6-card:focus-visible .cat6-overlay {
    background: linear-gradient(
        to top,
        rgba(3,7,15,.97) 0%,
        rgba(3,7,15,.75) 40%,
        rgba(3,7,15,.35) 100%
    );
}

/* Hide default, show hover content */
.cat6-card:hover .cat6-default,
.cat6-card:focus-visible .cat6-default {
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
}

.cat6-card:hover .cat6-hover-content,
.cat6-card:focus-visible .cat6-hover-content {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.cat6-card:hover .cat6-desc,
.cat6-card:focus-visible .cat6-desc {
    opacity: 1;
    transform: translateY(0);
}

.cat6-card:hover .cat6-features li,
.cat6-card:focus-visible .cat6-features li {
    opacity: 1;
    transform: translateY(0);
}

/* ── Sibling recession: when ANY card in grid is hovered ── */
.cat6-grid:has(.cat6-card:hover) .cat6-card:not(:hover),
.cat6-grid:has(.cat6-card:focus-visible) .cat6-card:not(:focus-visible) {
    opacity: 0.55;
    filter: blur(0.5px) brightness(0.7);
    transform: scale(0.97);
}

/* ── Mobile tap: active class toggled by JS ── */
.cat6-card.cat6-active {
    transform: scale(1.02);
    box-shadow: 0 20px 48px rgba(0,0,0,.65), 0 0 0 1px rgba(74,158,255,.2);
    z-index: 10;
}
.cat6-card.cat6-active .cat6-img { transform: scale(1.08); }
.cat6-card.cat6-active .cat6-overlay {
    background: linear-gradient(to top, rgba(3,7,15,.95) 0%, rgba(3,7,15,.7) 40%, rgba(3,7,15,.3) 100%);
}
.cat6-card.cat6-active .cat6-default {
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
}
.cat6-card.cat6-active .cat6-hover-content {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.cat6-card.cat6-active .cat6-desc {
    opacity: 1;
    transform: translateY(0);
}
.cat6-card.cat6-active .cat6-features li {
    opacity: 1;
    transform: translateY(0);
}
.cat6-grid.has-active .cat6-card:not(.cat6-active) {
    opacity: 0.5;
    filter: brightness(0.65);
    transform: scale(0.97);
}

/* ── Responsive ── */
/* Tablet: 2 columns, keep 380px row height */
@media (max-width: 900px) {
    .cat6-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, 380px);
    }
}

/* Mobile: 1 column, keep 380px row height */
@media (max-width: 560px) {
    .cat6-grid {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(6, 380px);
    }
    /* Disable scale hover on touch — use tap instead */
    .cat6-card:hover {
        transform: none;
    }
    .cat6-grid:has(.cat6-card:hover) .cat6-card:not(:hover) {
        opacity: 1;
        filter: none;
        transform: none;
    }
}


/* ══════════════════════════════════════════════
   OUTDOOR ADVENTURES SECTION
══════════════════════════════════════════════ */
.adventure-card {
    background: #0f1923;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform .35s cubic-bezier(.22,1,.36,1), border-color .35s ease, box-shadow .35s ease;
}

.adventure-card:hover {
    transform: translateY(-6px);
    border-color: rgba(74,158,255,.3);
    box-shadow: 0 20px 48px rgba(0,0,0,.5);
}

.adventure-img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.adventure-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s cubic-bezier(.22,1,.36,1);
}

.adventure-card:hover .adventure-img {
    transform: scale(1.07);
}

/* Glassmorphic Location Badge */
.adventure-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(11,15,19,0.72);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,.1);
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    z-index: 2;
}

.adventure-badge i {
    color: #4a9eff;
}

/* Card Body */
.adventure-content {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.adventure-tag-category {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #4a9eff;
    margin-bottom: 8px;
    display: block;
}

.adventure-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 1.3rem;
    text-transform: uppercase;
    color: #fff;
    letter-spacing: -.01em;
    line-height: 1.15;
    margin-bottom: 10px;
}

.adventure-desc {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8rem;
    line-height: 1.6;
    color: rgba(255,255,255,0.5);
    margin-bottom: 20px;
    flex-grow: 1;
}

/* Adventure details row (Season, Difficulty, Lodging, etc.) */
.adventure-details {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 8px;
}

.adventure-detail-item {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.06);
    padding: 6px 12px;
    border-radius: 4px;
}

.adventure-detail-item i {
    color: rgba(255,255,255,0.35);
    font-size: 0.75rem;
}

.adventure-detail-item span {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: rgba(255,255,255,0.7);
}

/* Pricing layout */
.adventure-price-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: rgba(255,255,255,0.35);
    display: block;
    margin-bottom: 2px;
}

.adventure-price {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 1.4rem;
    color: #fff;
    line-height: 1;
}

    /* ── Section eyebrow / title / divider ── */
    .section-eyebrow {
      font-size: .7rem; font-weight: 700; letter-spacing: .28em;
      text-transform: uppercase; color: var(--accent);
      display: block; margin-bottom: 10px;
    }
    .section-title {
      font-family: 'Montserrat', sans-serif; font-weight: 900;
      font-size: clamp(1.8rem, 4vw, 2.8rem);
      text-transform: uppercase; letter-spacing: -.01em; line-height: 1.05;
      color: #fff;
    }
    .section-divider {
      width: 44px; height: 3px;
      background: linear-gradient(90deg, var(--accent), var(--blue));
      margin: 16px 0 20px; border-radius: 2px;
    }

    /* ── Buttons ── */
    .btn-primary {
      display: inline-flex; align-items: center; gap: 10px;
      padding: 14px 30px;
      background: linear-gradient(135deg, #003f80, #0066cc);
      border: 1px solid rgba(74,158,255,.4);
      color: #fff; font-weight: 700; font-size: .82rem;
      letter-spacing: .16em; text-transform: uppercase;
      transition: all .25s ease; position: relative; overflow: hidden;
      border-radius: 2px; text-decoration: none; cursor: pointer;
    }
    .btn-primary::before {
      content: ''; position: absolute; inset: 0;
      background: linear-gradient(135deg, #0055aa, #0080ff);
      opacity: 0; transition: opacity .25s;
    }
    .btn-primary:hover::before { opacity: 1; }
    .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,102,204,.45); color: #fff; text-decoration: none; }
    .btn-primary span { position: relative; z-index: 1; }

    .btn-ghost {
      display: inline-flex; align-items: center; gap: 10px;
      padding: 13px 28px;
      background: transparent;
      border: 1px solid rgba(255,255,255,.2);
      color: rgba(255,255,255,.8); font-weight: 600; font-size: .82rem;
      letter-spacing: .14em; text-transform: uppercase;
      transition: all .25s ease; border-radius: 2px; text-decoration: none;
    }
    .btn-ghost:hover { border-color: rgba(255,255,255,.55); color: #fff; transform: translateY(-1px); text-decoration: none; }

    /* ── Hero ── */
    .about-hero {
      position: relative;
      overflow: hidden;
      min-height: 92vh;
      display: flex;
      align-items: center;
      padding-top: 90px; /* clear fixed header */
    }

    /* Full-bleed background photo */
    .about-hero-bg {
      position: absolute;
      inset: 0;
      background-image: url('../images/about-hero-bg.png');
      background-size: cover;
      background-position: center 30%;
      background-repeat: no-repeat;
      transform-origin: center;
      will-change: transform;
    }

    /* Multi-layer overlay: left dark ramp + global dim */
    .about-hero-overlay {
      position: absolute;
      inset: 0;
      background:
        linear-gradient(90deg,  rgba(5,10,16,.97) 0%,  rgba(5,10,16,.85) 42%, rgba(5,10,16,.35) 72%, rgba(5,10,16,.12) 100%),
        linear-gradient(180deg, rgba(5,10,16,.0) 55%, rgba(5,10,16,.92) 100%);
      pointer-events: none;
    }

    /* Noise texture grain */
    .about-hero-grain {
      position: absolute; inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
      opacity: .45; pointer-events: none; mix-blend-mode: overlay;
    }

    /* Thin accent left border line */
    .about-hero-line {
      position: absolute;
      left: 0; top: 0; bottom: 0;
      width: 3px;
      background: linear-gradient(180deg, transparent 0%, var(--accent) 35%, var(--blue) 65%, transparent 100%);
      opacity: .5;
    }

    /* breadcrumb */
    .breadcrumb { display: flex; align-items: center; gap: 8px; font-size: .68rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.35); margin-bottom: 28px; }
    .breadcrumb a { color: rgba(255,255,255,.35); text-decoration: none; transition: color .2s; }
    .breadcrumb a:hover { color: var(--accent); }
    .breadcrumb .sep { color: rgba(255,255,255,.15); }
    .breadcrumb .current { color: var(--accent); }

    /* Decorative right crosshair */
    .hero-crosshair {
      position: absolute;
      right: 6vw;
      top: 50%;
      transform: translateY(-50%);
      width: clamp(200px, 26vw, 380px);
      height: clamp(200px, 26vw, 380px);
      opacity: .08;
      pointer-events: none;
    }
    .hero-crosshair svg { width: 100%; height: 100%; }

    /* Floating badge top-right */
    .hero-cert-badge {
      position: absolute;
      top: 28%;
      right: max(32px, 5vw);
      background: rgba(11,15,19,.8);
      backdrop-filter: blur(14px);
      border: 1px solid rgba(74,158,255,.2);
      border-radius: 6px;
      padding: 16px 20px;
      display: flex;
      align-items: center;
      gap: 14px;
      z-index: 10;
      max-width: 240px;
    }
    .hero-cert-icon {
      width: 42px; height: 42px; border-radius: 50%;
      background: linear-gradient(135deg, #003f80, #0066cc);
      border: 1px solid rgba(74,158,255,.4);
      display: flex; align-items: center; justify-content: center;
      font-size: 1rem; color: #fff; flex-shrink: 0;
    }

    @media (max-width: 768px) {
      .hero-cert-badge { display: none; }
      .hero-stat-item + .hero-stat-item { padding-left: 20px; padding-right: 20px; }
    }

    .hero-headline {
      font-family: 'Montserrat', sans-serif; font-weight: 900;
      font-size: clamp(2.8rem, 7vw, 5.2rem);
      line-height: 1.0; letter-spacing: -.02em; text-transform: uppercase; color: #fff;
    }
    .hero-headline .accent { color: var(--accent); }

    /* ── Section base ── */
    .section-dark  { background: var(--dark); }
    .section-navy  { background: var(--navy); }
    .section-mid   { background: var(--mid); }
    .section-deep  { background: var(--deep); }
    .section-alt   { background: #080d14; }

    /* ── Story image frame ── */
    .story-frame {
      position: relative; border-radius: 4px; overflow: hidden;
      border: 1px solid var(--border-accent);
    }
    .story-frame::before {
      content: ''; position: absolute; inset: 0;
      background: linear-gradient(160deg, rgba(74,158,255,.08) 0%, transparent 60%);
      z-index: 1; pointer-events: none;
    }
    .story-frame-corner {
      position: absolute; width: 28px; height: 28px;
      border-color: var(--accent); border-style: solid;
      opacity: .6; z-index: 2;
    }
    .story-frame-corner.tl { top: 10px; left: 10px; border-width: 2px 0 0 2px; }
    .story-frame-corner.br { bottom: 10px; right: 10px; border-width: 0 2px 2px 0; }

    /* ── Mission / Value cards ── */
    .mvv-card {
      background: #0f1923;
      border: 1px solid var(--border);
      border-radius: 4px;
      padding: 36px 28px;
      position: relative; overflow: hidden;
      transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
    }
    .mvv-card::before {
      content: ''; position: absolute; inset: 0;
      background: linear-gradient(135deg, rgba(74,158,255,.06) 0%, transparent 60%);
      opacity: 0; transition: opacity .3s;
    }
    .mvv-card:hover { transform: translateY(-6px); border-color: var(--border-accent); box-shadow: 0 20px 48px rgba(0,0,0,.5); }
    .mvv-card:hover::before { opacity: 1; }
    .mvv-card .icon-ring {
      width: 56px; height: 56px; border-radius: 50%;
      background: rgba(74,158,255,.1); border: 1px solid rgba(74,158,255,.25);
      display: flex; align-items: center; justify-content: center;
      font-size: 1.3rem; color: var(--accent); margin-bottom: 22px;
      transition: background .3s, border-color .3s;
    }
    .mvv-card:hover .icon-ring { background: rgba(74,158,255,.18); border-color: rgba(74,158,255,.5); }

    /* ── Why choose / feature cards ── */
    .feature-card {
      background: #0f1923;
      border: 1px solid var(--border);
      border-radius: 4px;
      padding: 28px 24px;
      transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
      display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
    }
    .feature-card:hover { transform: translateY(-5px); border-color: var(--border-accent); box-shadow: 0 16px 40px rgba(0,0,0,.45); }
    .feature-card .fc-icon {
      width: 46px; height: 46px; border-radius: 3px;
      background: linear-gradient(135deg, rgba(0,63,128,.6), rgba(0,102,204,.35));
      border: 1px solid rgba(74,158,255,.2);
      display: flex; align-items: center; justify-content: center;
      font-size: 1.1rem; color: var(--accent); flex-shrink: 0;
    }

    /* ── Philosophy split ── */
    .philosophy-pill {
      display: inline-flex; align-items: center; gap: 10px;
      padding: 10px 18px;
      background: rgba(74,158,255,.07);
      border: 1px solid rgba(74,158,255,.18);
      border-radius: 40px;
      font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
      color: rgba(255,255,255,.75);
      transition: all .22s ease;
    }
    .philosophy-pill:hover { background: rgba(74,158,255,.15); border-color: rgba(74,158,255,.4); color: #fff; }
    .philosophy-pill i { color: var(--accent); font-size: .85rem; }

    /* ── Stats ── */
    .stat-card {
      text-align: center; padding: 36px 20px;
      border-right: 1px solid var(--border);
      position: relative;
    }
    .stat-card:last-child { border-right: none; }
    .stat-number {
      font-family: 'Montserrat', sans-serif; font-weight: 900;
      font-size: clamp(2.4rem, 5vw, 3.8rem);
      color: #fff; line-height: 1; letter-spacing: -.03em;
    }
    .stat-number .stat-suffix { color: var(--accent); }

    /* ── CTA section ── */
    .about-cta-bg {
      position: relative;
      background-image: linear-gradient(180deg, rgba(5,10,16,0.92) 0%, rgba(11,24,40,0.85) 50%, rgba(5,10,16,0.92) 100%), url('../images/cta-bg.png');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      overflow: hidden;
    }
    .about-cta-bg::before {
      content: '';
      position: absolute; inset: 0;
      background: radial-gradient(ellipse 60% 70% at 50% 50%, rgba(74,158,255,0.08) 0%, transparent 70%);
      pointer-events: none;
    }
    /* Decorative corner line */
    .cta-line {
      position: absolute; background: linear-gradient(90deg, transparent, rgba(74,158,255,.15), transparent);
      height: 1px; width: 60%;
    }

    /* ── Hero content entrance — CSS-only, no JS dependency ── */
    @keyframes heroFadeUp {
      from { opacity: 0; transform: translateY(22px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes heroBadgeIn {
      from { opacity: 0; transform: translateX(20px); }
      to   { opacity: 1; transform: translateX(0); }
    }
    @keyframes heroLineIn {
      from { opacity: 0; transform: scaleY(0); }
      to   { opacity: 0.5; transform: scaleY(1); }
    }

    #hero-breadcrumb { animation: heroFadeUp .45s ease both; animation-delay: .05s; }
    #hero-eyebrow    { animation: heroFadeUp .45s ease both; animation-delay: .12s; }
    #hero-stats      { animation: heroFadeUp .45s ease both; animation-delay: .42s; }
    #hero-badge      { animation: heroBadgeIn .4s ease both; animation-delay: .25s; }
    .about-hero-line { animation: heroLineIn  .8s ease both; animation-delay: .05s; transform-origin: top center; }

/* ─────────────────────────────────────────────
   SHOPPING CART MODAL & BADGE STYLES
   ───────────────────────────────────────────── */

/* Cart Overlay Backdrop */
#cart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  z-index: 9999;
  pointer-events: none;
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  transition: background 0.38s cubic-bezier(0.16, 1, 0.3, 1), backdrop-filter 0.38s cubic-bezier(0.16, 1, 0.3, 1);
}
#cart-overlay.open {
  background: rgba(0, 0, 0, 0.7);
  pointer-events: auto;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Slide-out Cart Drawer */
#cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(440px, 100vw);
  z-index: 10000;
  transform: translateX(100%);
  background: #0B0F13;
  border-left: 1px solid rgba(255, 255, 255, 0.07);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  will-change: transform;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.5);
}
#cart-drawer.open {
  transform: translateX(0);
}

/* Inner Scroll Area */
#cart-drawer-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(74, 158, 255, 0.25) transparent;
  display: flex;
  flex-direction: column;
}
#cart-drawer-body::-webkit-scrollbar {
  width: 4px;
}
#cart-drawer-body::-webkit-scrollbar-track {
  background: transparent;
}
#cart-drawer-body::-webkit-scrollbar-thumb {
  background: rgba(74, 158, 255, 0.25);
  border-radius: 4px;
}

/* Cart Item Card */
.cart-item-card {
  background: #0f1923;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 6px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.cart-item-card:hover {
  border-color: rgba(74, 158, 255, 0.2);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4);
}

/* Badges */
.cat-badge {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 2px;
  display: inline-block;
}
.cat-badge-training {
  background: rgba(74, 158, 255, 0.12);
  color: #4a9eff;
  border: 1px solid rgba(74, 158, 255, 0.22);
}
.cat-badge-merch {
  background: rgba(224, 92, 0, 0.12);
  color: #e05c00;
  border: 1px solid rgba(224, 92, 0, 0.22);
}
.cat-badge-equipment {
  background: rgba(34, 197, 94, 0.1);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.18);
}
.cat-badge-adventure {
  background: rgba(168, 85, 247, 0.1);
  color: #a855f7;
  border: 1px solid rgba(168, 85, 247, 0.18);
}

/* Quantity Controls */
.qty-btn {
  width: 28px;
  height: 28px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}
.qty-btn:hover {
  background: rgba(74, 158, 255, 0.15);
  border-color: rgba(74, 158, 255, 0.35);
  color: #4a9eff;
}
.qty-display {
  min-width: 32px;
  text-align: center;
  font-weight: 700;
  font-size: 0.85rem;
  color: #fff;
}

/* Action Buttons */
.item-action-btn {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: color 0.2s ease;
  padding: 0;
}
.item-action-btn:hover {
  color: rgba(255, 255, 255, 0.75);
}
.item-action-btn.remove:hover {
  color: #ef4444;
}

/* Checkout Button */
.btn-checkout {
  width: 100%;
  padding: 14px 20px;
  background: linear-gradient(135deg, #003f80, #0066cc);
  border: 1px solid rgba(74, 158, 255, 0.4);
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 3px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  overflow: hidden;
  transition: all 0.25s ease;
}
.btn-checkout::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #0055aa, #0080ff);
  opacity: 0;
  transition: opacity 0.25s;
}
.btn-checkout:hover::before {
  opacity: 1;
}
.btn-checkout:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0, 102, 204, 0.4);
}
.btn-checkout span {
  position: relative;
  z-index: 1;
}

.btn-continue-shopping {
  width: 100%;
  padding: 12px 20px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.6);
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.22s ease;
}
.btn-continue-shopping:hover {
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}

/* Header Cart Toggle Button */
#header-cart-btn {
  background: none;
  border: none;
  cursor: pointer;
  outline: none;
}
#header-cart-btn:hover i {
  color: #fff;
  transform: scale(1.05);
}
#header-cart-btn i {
  transition: transform 0.2s, color 0.2s;
}

/* Empty State Styling */
.empty-cart-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(74, 158, 255, 0.05);
  border: 1px solid rgba(74, 158, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  color: rgba(74, 158, 255, 0.4);
  margin: 0 auto 20px;
}