/** Shopify CDN: Minification failed

Line 16:0 Unexpected "<"
Line 30:5 Expected identifier but found "%"
Line 31:6 Unexpected "<"
Line 32:5 Expected identifier but found "%"
Line 34:4 Unexpected "{"
Line 34:5 Expected identifier but found "%"
Line 35:6 Unexpected "<"
Line 36:5 Expected identifier but found "%"
Line 38:3 Unexpected "<"
Line 43:2 Expected identifier but found "%"
... and 746 more hidden warnings

**/
<!doctype html>
<html class="no-js" lang="{{ request.locale.iso_code }}">

  <head>
    <meta name="google-site-verification" content="4WTI8DEwb1hYWpgFu5PLHUvXSGJhVs_3kJ2R4zChqNo" />
    <meta name="google-site-verification" content="ZGvbxqKSvMOhj-JK7zCZPa4HkyyVvhttkltG7CB___k" />
    <meta name="facebook-domain-verification" content="4rjo5nma7ji0n8rzw9k9tjvb36ty5d" />
    <meta name="google-site-verification" content="Y5GcB7X9VnUfJ2QoikISgt3IPcHVy08dwNDQZmkwwDM" />
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="theme-color" content="">
    <link rel="canonical" href="{{ canonical_url }}">

    {%- if settings.favicon != blank -%}
      <link rel="icon" type="image/png" href="{{ settings.favicon | image_url: width: 32, height: 32 }}">
    {%- endif -%}

    {%- unless settings.type_header_font.system? and settings.type_body_font.system? -%}
      <link rel="preconnect" href="/cdn/fonts" crossorigin>
    {%- endunless -%}

   <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Mea+Culpa&family=Stardos+Stencil:wght@400;700&family=Rationale&display=swap" rel="stylesheet">

  <!-- Air Reviews Script -->
 {% include 'air-reviews-setting' %}
  <!-- /Air Reviews Script -->

<title>
  {% if template.name == 'index' %}
    {{ shop.name }} - Firearms Training & Defense
  {% elsif template.name == 'page' %}
    {{ page.title }} | {{ shop.name }}
  {% elsif template.name == 'product' %}
    {{ product.title }} | {{ shop.name }}
  {% elsif template.name == 'collection' %}
    {{ collection.title }} | {{ shop.name }}
  {% elsif template.name == 'article' %}
    {{ article.title }} | {{ shop.name }}
  {% else %}
    {{ page_title }} | {{ shop.name }}
  {% endif %}
</title>

    {% if page_description %}
      <meta name="description" content="{{ page_description | escape }}">
    {% endif %}

    {% render 'meta-tags' %}

    <script src="{{ 'constants.js' | asset_url }}" defer="defer"></script>
    <script src="{{ 'pubsub.js' | asset_url }}" defer="defer"></script>
    <script src="{{ 'global.js' | asset_url }}" defer="defer"></script>
    {%- if settings.animations_reveal_on_scroll -%}
      <script src="{{ 'animations.js' | asset_url }}" defer="defer"></script>
    {%- endif -%}

    {{ content_for_header }}

    {%- liquid
      assign body_font_bold = settings.type_body_font | font_modify: 'weight', 'bold'
      assign body_font_italic = settings.type_body_font | font_modify: 'style', 'italic'
      assign body_font_bold_italic = body_font_bold | font_modify: 'style', 'italic'
    %}

    {% style %}
      {{ settings.type_body_font | font_face: font_display: 'swap' }}
      {{ body_font_bold | font_face: font_display: 'swap' }}
      {{ body_font_italic | font_face: font_display: 'swap' }}
      {{ body_font_bold_italic | font_face: font_display: 'swap' }}
      {{ settings.type_header_font | font_face: font_display: 'swap' }}

      {% for scheme in settings.color_schemes -%}
        {% assign scheme_classes = scheme_classes | append: ', .color-' | append: scheme.id %}
        {% if forloop.index == 1 -%}
          :root,
        {%- endif %}
        .color-{{ scheme.id }} {
          --color-background: {{ scheme.settings.background.red }},{{ scheme.settings.background.green }},{{ scheme.settings.background.blue }};
        {% if scheme.settings.background_gradient != empty %}
          --gradient-background: {{ scheme.settings.background_gradient }};
        {% else %}
          --gradient-background: {{ scheme.settings.background }};
        {% endif %}
        --color-foreground: {{ scheme.settings.text.red }},{{ scheme.settings.text.green }},{{ scheme.settings.text.blue }};
        --color-shadow: {{ scheme.settings.shadow.red }},{{ scheme.settings.shadow.green }},{{ scheme.settings.shadow.blue }};
        --color-button: {{ scheme.settings.button.red }},{{ scheme.settings.button.green }},{{ scheme.settings.button.blue }};
        --color-button-text: {{ scheme.settings.button_label.red }},{{ scheme.settings.button_label.green }},{{ scheme.settings.button_label.blue }};
        --color-secondary-button: {{ scheme.settings.background.red }},{{ scheme.settings.background.green }},{{ scheme.settings.background.blue }};
        --color-secondary-button-text: {{ scheme.settings.secondary_button_label.red }},{{ scheme.settings.secondary_button_label.green }},{{ scheme.settings.secondary_button_label.blue }};
        --color-link: {{ scheme.settings.secondary_button_label.red }},{{ scheme.settings.secondary_button_label.green }},{{ scheme.settings.secondary_button_label.blue }};
        --color-badge-foreground: {{ scheme.settings.text.red }},{{ scheme.settings.text.green }},{{ scheme.settings.text.blue }};
        --color-badge-background: {{ scheme.settings.background.red }},{{ scheme.settings.background.green }},{{ scheme.settings.background.blue }};
        --color-badge-border: {{ scheme.settings.text.red }},{{ scheme.settings.text.green }},{{ scheme.settings.text.blue }};
        --payment-terms-background-color: rgb({{ scheme.settings.background.rgb }});
      }
      {% endfor %}

      {{ scheme_classes | prepend: 'body' }} {
        color: rgba(var(--color-foreground), 0.75);
        background-color: rgb(var(--color-background));
      }

      :root {
        --font-body-family: {{ settings.type_body_font.family }}, {{ settings.type_body_font.fallback_families }};
        --font-body-style: {{ settings.type_body_font.style }};
        --font-body-weight: {{ settings.type_body_font.weight }};
        --font-body-weight-bold: {{ settings.type_body_font.weight | plus: 300 | at_most: 1000 }};

        --font-heading-family: {{ settings.type_header_font.family }}, {{ settings.type_header_font.fallback_families }};
        --font-heading-style: {{ settings.type_header_font.style }};
        --font-heading-weight: {{ settings.type_header_font.weight }};

        --font-body-scale: {{ settings.body_scale | divided_by: 100.0 }};
        --font-heading-scale: {{ settings.heading_scale | times: 1.0 | divided_by: settings.body_scale }};

        --media-padding: {{ settings.media_padding }}px;
        --media-border-opacity: {{ settings.media_border_opacity | divided_by: 100.0 }};
        --media-border-width: {{ settings.media_border_thickness }}px;
        --media-radius: {{ settings.media_radius }}px;
        --media-shadow-opacity: {{ settings.media_shadow_opacity | divided_by: 100.0 }};
        --media-shadow-horizontal-offset: {{ settings.media_shadow_horizontal_offset }}px;
        --media-shadow-vertical-offset: {{ settings.media_shadow_vertical_offset }}px;
        --media-shadow-blur-radius: {{ settings.media_shadow_blur }}px;
        --media-shadow-visible: {% if settings.media_shadow_opacity > 0 %}1{% else %}0{% endif %};

        --page-width: {{ settings.page_width | divided_by: 10 }}rem;
        --page-width-margin: {% if settings.page_width == '1600' %}2{% else %}0{% endif %}rem;

        --product-card-image-padding: {{ settings.card_image_padding | divided_by: 10.0 }}rem;
        --product-card-corner-radius: {{ settings.card_corner_radius | divided_by: 10.0 }}rem;
        --product-card-text-alignment: {{ settings.card_text_alignment }};
        --product-card-border-width: {{ settings.card_border_thickness | divided_by: 10.0 }}rem;
        --product-card-border-opacity: {{ settings.card_border_opacity | divided_by: 100.0 }};
        --product-card-shadow-opacity: {{ settings.card_shadow_opacity | divided_by: 100.0 }};
        --product-card-shadow-visible: {% if settings.card_shadow_opacity > 0 %}1{% else %}0{% endif %};
        --product-card-shadow-horizontal-offset: {{ settings.card_shadow_horizontal_offset | divided_by: 10.0 }}rem;
        --product-card-shadow-vertical-offset: {{ settings.card_shadow_vertical_offset | divided_by: 10.0 }}rem;
        --product-card-shadow-blur-radius: {{ settings.card_shadow_blur | divided_by: 10.0 }}rem;

        --collection-card-image-padding: {{ settings.collection_card_image_padding | divided_by: 10.0 }}rem;
        --collection-card-corner-radius: {{ settings.collection_card_corner_radius | divided_by: 10.0 }}rem;
        --collection-card-text-alignment: {{ settings.collection_card_text_alignment }};
        --collection-card-border-width: {{ settings.collection_card_border_thickness | divided_by: 10.0 }}rem;
        --collection-card-border-opacity: {{ settings.collection_card_border_opacity | divided_by: 100.0 }};
        --collection-card-shadow-opacity: {{ settings.collection_card_shadow_opacity | divided_by: 100.0 }};
        --collection-card-shadow-visible: {% if settings.collection_card_shadow_opacity > 0 %}1{% else %}0{% endif %};
        --collection-card-shadow-horizontal-offset: {{ settings.collection_card_shadow_horizontal_offset | divided_by: 10.0 }}rem;
        --collection-card-shadow-vertical-offset: {{ settings.collection_card_shadow_vertical_offset | divided_by: 10.0 }}rem;
        --collection-card-shadow-blur-radius: {{ settings.collection_card_shadow_blur | divided_by: 10.0 }}rem;

        --blog-card-image-padding: {{ settings.blog_card_image_padding | divided_by: 10.0 }}rem;
        --blog-card-corner-radius: {{ settings.blog_card_corner_radius | divided_by: 10.0 }}rem;
        --blog-card-text-alignment: {{ settings.blog_card_text_alignment }};
        --blog-card-border-width: {{ settings.blog_card_border_thickness | divided_by: 10.0 }}rem;
        --blog-card-border-opacity: {{ settings.blog_card_border_opacity | divided_by: 100.0 }};
        --blog-card-shadow-opacity: {{ settings.blog_card_shadow_opacity | divided_by: 100.0 }};
        --blog-card-shadow-visible: {% if settings.blog_card_shadow_opacity > 0 %}1{% else %}0{% endif %};
        --blog-card-shadow-horizontal-offset: {{ settings.blog_card_shadow_horizontal_offset | divided_by: 10.0 }}rem;
        --blog-card-shadow-vertical-offset: {{ settings.blog_card_shadow_vertical_offset | divided_by: 10.0 }}rem;
        --blog-card-shadow-blur-radius: {{ settings.blog_card_shadow_blur | divided_by: 10.0 }}rem;

        --badge-corner-radius: {{ settings.badge_corner_radius | divided_by: 10.0 }}rem;

        --popup-border-width: {{ settings.popup_border_thickness }}px;
        --popup-border-opacity: {{ settings.popup_border_opacity | divided_by: 100.0 }};
        --popup-corner-radius: {{ settings.popup_corner_radius }}px;
        --popup-shadow-opacity: {{ settings.popup_shadow_opacity | divided_by: 100.0 }};
        --popup-shadow-horizontal-offset: {{ settings.popup_shadow_horizontal_offset }}px;
        --popup-shadow-vertical-offset: {{ settings.popup_shadow_vertical_offset }}px;
        --popup-shadow-blur-radius: {{ settings.popup_shadow_blur }}px;

        --drawer-border-width: {{ settings.drawer_border_thickness }}px;
        --drawer-border-opacity: {{ settings.drawer_border_opacity | divided_by: 100.0 }};
        --drawer-shadow-opacity: {{ settings.drawer_shadow_opacity | divided_by: 100.0 }};
        --drawer-shadow-horizontal-offset: {{ settings.drawer_shadow_horizontal_offset }}px;
        --drawer-shadow-vertical-offset: {{ settings.drawer_shadow_vertical_offset }}px;
        --drawer-shadow-blur-radius: {{ settings.drawer_shadow_blur }}px;

        --spacing-sections-desktop: {{ settings.spacing_sections }}px;
        --spacing-sections-mobile: {% if settings.spacing_sections < 24 %}{{ settings.spacing_sections }}{% else %}{{ settings.spacing_sections | times: 0.7 | round | at_least: 20 }}{% endif %}px;

        --grid-desktop-vertical-spacing: {{ settings.spacing_grid_vertical }}px;
        --grid-desktop-horizontal-spacing: {{ settings.spacing_grid_horizontal }}px;
        --grid-mobile-vertical-spacing: {{ settings.spacing_grid_vertical | divided_by: 2 }}px;
        --grid-mobile-horizontal-spacing: {{ settings.spacing_grid_horizontal | divided_by: 2 }}px;

        --text-boxes-border-opacity: {{ settings.text_boxes_border_opacity | divided_by: 100.0 }};
        --text-boxes-border-width: {{ settings.text_boxes_border_thickness }}px;
        --text-boxes-radius: {{ settings.text_boxes_radius }}px;
        --text-boxes-shadow-opacity: {{ settings.text_boxes_shadow_opacity | divided_by: 100.0 }};
        --text-boxes-shadow-visible: {% if settings.text_boxes_shadow_opacity > 0 %}1{% else %}0{% endif %};
        --text-boxes-shadow-horizontal-offset: {{ settings.text_boxes_shadow_horizontal_offset }}px;
        --text-boxes-shadow-vertical-offset: {{ settings.text_boxes_shadow_vertical_offset }}px;
        --text-boxes-shadow-blur-radius: {{ settings.text_boxes_shadow_blur }}px;

        --buttons-radius: {{ settings.buttons_radius }}px;
        --buttons-radius-outset: {% if settings.buttons_radius > 0 %}{{ settings.buttons_radius | plus: settings.buttons_border_thickness }}{% else %}0{% endif %}px;
        --buttons-border-width: {% if settings.buttons_border_opacity > 0 %}{{ settings.buttons_border_thickness }}{% else %}0{% endif %}px;
        --buttons-border-opacity: {{ settings.buttons_border_opacity | divided_by: 100.0 }};
        --buttons-shadow-opacity: {{ settings.buttons_shadow_opacity | divided_by: 100.0 }};
        --buttons-shadow-visible: {% if settings.buttons_shadow_opacity > 0 %}1{% else %}0{% endif %};
        --buttons-shadow-horizontal-offset: {{ settings.buttons_shadow_horizontal_offset }}px;
        --buttons-shadow-vertical-offset: {{ settings.buttons_shadow_vertical_offset }}px;
        --buttons-shadow-blur-radius: {{ settings.buttons_shadow_blur }}px;
        --buttons-border-offset: {% if settings.buttons_radius > 0 or settings.buttons_shadow_opacity > 0 %}0.3{% else %}0{% endif %}px;

        --inputs-radius: {{ settings.inputs_radius }}px;
        --inputs-border-width: {{ settings.inputs_border_thickness }}px;
        --inputs-border-opacity: {{ settings.inputs_border_opacity | divided_by: 100.0 }};
        --inputs-shadow-opacity: {{ settings.inputs_shadow_opacity | divided_by: 100.0 }};
        --inputs-shadow-horizontal-offset: {{ settings.inputs_shadow_horizontal_offset }}px;
        --inputs-margin-offset: {% if settings.inputs_shadow_vertical_offset != 0 and settings.inputs_shadow_opacity > 0 %}{{ settings.inputs_shadow_vertical_offset | abs }}{% else %}0{% endif %}px;
        --inputs-shadow-vertical-offset: {{ settings.inputs_shadow_vertical_offset }}px;
        --inputs-shadow-blur-radius: {{ settings.inputs_shadow_blur }}px;
        --inputs-radius-outset: {% if settings.inputs_radius > 0 %}{{ settings.inputs_radius | plus: settings.inputs_border_thickness }}{% else %}0{% endif %}px;

        --variant-pills-radius: {{ settings.variant_pills_radius }}px;
        --variant-pills-border-width: {{ settings.variant_pills_border_thickness }}px;
        --variant-pills-border-opacity: {{ settings.variant_pills_border_opacity | divided_by: 100.0 }};
        --variant-pills-shadow-opacity: {{ settings.variant_pills_shadow_opacity | divided_by: 100.0 }};
        --variant-pills-shadow-horizontal-offset: {{ settings.variant_pills_shadow_horizontal_offset }}px;
        --variant-pills-shadow-vertical-offset: {{ settings.variant_pills_shadow_vertical_offset }}px;
        --variant-pills-shadow-blur-radius: {{ settings.variant_pills_shadow_blur }}px;
      }

      *,
      *::before,
      *::after {
        box-sizing: inherit;
      }

      html {
        box-sizing: border-box;
        font-size: calc(var(--font-body-scale) * 62.5%);
        height: 100%;
      }

      body {
        display: grid;
        grid-template-rows: auto auto 1fr auto;
        grid-template-columns: 100%;
        min-height: 100%;
        margin: 0;
        font-size: 1.5rem;
        letter-spacing: 0.06rem;
        line-height: calc(1 + 0.8 / var(--font-body-scale));
        font-family: var(--font-body-family);
        font-style: var(--font-body-style);
        font-weight: var(--font-body-weight);
      }

      @media screen and (min-width: 750px) {
        body {
          font-size: 1.6rem;
        }
      }
    {% endstyle %}

    {{ 'base.css' | asset_url | stylesheet_tag }}

    {%- unless settings.type_body_font.system? -%}
      <link rel="preload" as="font" href="{{ settings.type_body_font | font_url }}" type="font/woff2" crossorigin>
    {%- endunless -%}
    {%- unless settings.type_header_font.system? -%}
      <link rel="preload" as="font" href="{{ settings.type_header_font | font_url }}" type="font/woff2" crossorigin>
    {%- endunless -%}

    
       <!-- Custom Fonts for Firearms Instructor Site -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Stardos+Stencil:wght@400;700&family=Rationale&display=swap" rel="stylesheet">

 
    
<style>
/* =============================================
   16 FUNNEL CARDS - FIXED COLORS & PROPER PLACEMENT
   ============================================= */

/* === CARDS CONTAINER === */
.funnel-cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 25px;
    margin: 30px 0 40px 0;
}

/* === INDIVIDUAL CARD === */
.funnel-card {
    background: linear-gradient(145deg, var(--card-bg-top) 0%, var(--card-bg-btm) 100%);
    border: 1px solid rgba(45, 45, 45, 0.8);
    padding: 0;
    margin: 0 0 25px 0;
    border-radius: 6px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;
    box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.4),
        0 1px 2px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
    position: relative;
    overflow: hidden;
}

.funnel-card:hover {
    transform: translateY(-4px);
    border-color: rgba(183, 155, 108, 0.4);
    box-shadow: 
        0 8px 25px rgba(0, 0, 0, 0.6),
        0 3px 10px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* === CARD HEADER === */
.funnel-card-header {
    position: relative;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 20px;
    font-family: "Rationale", sans-serif;
    font-weight: 700;
    color: #fff;
    text-shadow: 
        -1px -1px 0 #2a2a2a,
        1px -1px 0 #2a2a2a,
        -1px 1px 0 #2a2a2a,
        1px 1px 0 #2a2a2a,
        0 2px 2px rgba(0, 0, 0, 0.9),
        0 3px 5px rgba(0, 0, 0, 0.8);
    overflow: hidden;
    box-shadow: 
        0 5px 15px var(--shadow-strong),
        0 15px 30px var(--shadow-soft),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    background: linear-gradient(
        145deg,
        var(--charcoal-light) 0%,
        var(--charcoal) 100%
    );
    border: 1px solid rgba(108, 97, 59, 0.4);
    border-radius: 4px 4px 0 0;
    user-select: none;
    margin: 0;
    width: 100%;
}

.funnel-card-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 20px;
    right: 20px;
    height: 2px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        #e40303 20%, 
        var(--gold-soft) 50%, 
        #e40303 80%, 
        transparent 100%
    );
    opacity: 0.7;
    filter: drop-shadow(0 0 4px rgba(228, 3, 3, 0.3));
}

/* FIXED: RED TITLE e40303 */
.funnel-card-title {
    font-family: "Stardos Stencil", serif;
    font-size: 21px;
    color: #e40303 !important; /* Your exact red */
    margin: 0 0 6px 0;
    text-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.9),
        0 0 15px rgba(228, 3, 3, 0.25); /* Updated shadow color */
    letter-spacing: 0.6px;
    line-height: 1.3;
    padding: 0;
    text-align: center;
    position: relative;
    z-index: 2;
}

/* FIXED: GREEN SUBTITLE 8b8972 */
.funnel-card-subtitle {
    font-family: "Rationale", sans-serif;
    font-size: 15px;
    color: #8b8972 !important; /* Your exact green */
    margin: 0;
    text-shadow: 
        0 1px 2px rgba(0, 0, 0, 0.8),
        0 0 10px rgba(139, 137, 114, 0.15); /* Updated shadow color */
    font-weight: 500;
    opacity: 0.9;
    padding: 0;
    text-align: center;
    position: relative;
    z-index: 2;
}

/* FREE/GATED status badge */
.status-badge {
    position: absolute;
    top: 15px;
    right: 20px;
    font-family: "Rationale", sans-serif;
    font-size: 12px;
    font-weight: bold;
    padding: 4px 12px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    z-index: 3;
}

.free .status-badge {
    background: rgba(0, 255, 136, 0.1);
    color: var(--tactical-green);
    border: 1px solid var(--tactical-green);
    box-shadow: 0 0 8px rgba(0, 255, 136, 0.2);
}

.gated .status-badge {
    background: rgba(255, 0, 0, 0.1);
    color: #e40303; /* Updated to your red */
    border: 1px solid #e40303;
    box-shadow: 0 0 8px rgba(228, 3, 3, 0.2);
}

/* === CARD BODY === */
.funnel-card-body { 
    padding: 20px;
    background: linear-gradient(180deg, #1a1a1a, #111);
    margin: 0;
    border: none;
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        inset 0 -1px 0 rgba(0, 0, 0, 0.8);
    border-radius: 0 0 4px 4px;
}

.funnel-card-features {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
}

.funnel-card-features li {
    padding: 10px 0 10px 32px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    color: var(--eggshell);
    font-size: 15px;
    line-height: 1.6;
    position: relative;
    transition: all 0.3s ease;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.funnel-card-features li:last-child { 
    border-bottom: none; 
}

.funnel-card-features li:hover {
    color: white;
    padding-left: 38px;
    border-bottom-color: rgba(255, 255, 255, 0.15);
}

/* Triangle bullet - UPDATED to proper bullet format */
.funnel-card-features li::before {
    content: "•";
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #87856f;
    font-size: 24px;
    transition: all 0.3s ease;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.funnel-card-features li:hover::before {
    color: #a09e7f;
    transform: translateY(-50%) scale(1.15);
}

/* === CARD FOOTER === */
.funnel-card-footer {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid rgba(51, 51, 51, 0.8);
    position: relative;
}

/* Action button */
.funnel-card-btn {
    flex: 1;
    position: relative;
    cursor: pointer;
    border: none;
    border-radius: 8px;
    padding: 12px 20px;
    background: linear-gradient(145deg, #444, #0a0a0a);
    color: #fff;
    font: 600 14px "Share", serif;
    text-shadow: 0 2px 3px #000;
    box-shadow: 
        0 5px 15px var(--shadow-strong),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    isolation: isolate;
    min-height: 44px;
    border: 1px solid rgba(108, 97, 59, 0.3);
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.funnel-card-btn:hover {
    background: linear-gradient(145deg, #5a5a5a, #1a1a1a);
    border-color: var(--bronze);
    color: var(--gold-soft);
    transform: translateY(-2px);
    box-shadow: 
        0 8px 25px rgba(0, 0, 0, 0.9),
        0 0 0 1px rgba(183, 155, 108, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.funnel-card-btn:active {
    transform: translateY(2px);
    box-shadow: 
        0 2px 8px var(--shadow-strong),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Shine effect on hover */
.funnel-card-btn::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
    );
    transform: skewX(-20deg);
    transition: left 0.6s ease;
    pointer-events: none;
}

.funnel-card-btn:hover::after {
    left: 100%;
}

/* === STAGE HEADERS === */
.stage-section {
    margin: 30px 0 20px 0;
    text-align: center;
}

.stage-title {
    font-family: "Stardos Stencil", serif;
    font-size: 26px;
    color: #e40303 !important; /* Your red */
    margin: 0 0 8px 0;
    text-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.9),
        0 0 15px rgba(228, 3, 3, 0.25); /* Updated shadow */
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.stage-subtitle {
    font-family: "Rationale", sans-serif;
    font-size: 16px;
    color: #8b8972 !important; /* Your green */
    margin: 0 0 25px 0;
    font-style: italic;
    opacity: 0.9;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
    .funnel-cards-container {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .funnel-card-header {
        padding: 15px 20px 12px;
    }
    
    .funnel-card-body {
        padding: 18px;
    }
    
    .funnel-card-footer {
        flex-direction: column;
        gap: 15px;
    }
    
    .funnel-card-title {
        font-size: 20px;
    }
    
    .stage-title {
        font-size: 22px;
    }
    
    .stage-subtitle {
        font-size: 15px;
    }
}

@media (max-width: 480px) {
    .funnel-card-header {
        padding: 14px 18px 10px;
    }
    
    .funnel-card-body {
        padding: 16px;
    }
    
    .funnel-card-title {
        font-size: 18px;
    }
    
    .funnel-card-subtitle {
        font-size: 13px;
    }
    
    .funnel-card-features li {
        font-size: 14px;
        padding-left: 28px;
    }
    
    .funnel-card-features li::before {
        left: 10px;
        font-size: 20px;
    }
    
    .funnel-card-btn {
        padding: 10px 16px;
        font-size: 13px;
    }
    
    .stage-title {
        font-size: 20px;
    }
    
    .stage-subtitle {
        font-size: 14px;
    }
}

/* === ANIMATIONS === */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.funnel-card {
    animation: fadeIn 0.3s ease-out;
}

/* === COLLECTION LIST REPLACEMENT STYLES === */
.collection-list {
  margin-top: 0;
  margin-bottom: 0;
}

.collection-list-title {
  margin: 0;
}

@media screen and (max-width: 749px) {
  .collection-list:not(.slider) {
    padding-left: 0;
    padding-right: 0;
  }

  .section-collection-list .page-width {
    padding-left: 0;
    padding-right: 0;
  }

  .section-collection-list .collection-list:not(.slider) {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

.collection-list__item:only-child {
  max-width: 100%;
  width: 100%;
}

@media screen and (max-width: 749px) {
  .slider.collection-list--1-items {
    padding-bottom: 0;
  }
}

@media screen and (min-width: 750px) and (max-width: 989px) {
  .slider.collection-list--1-items,
  .slider.collection-list--2-items,
  .slider.collection-list--3-items,
  .slider.collection-list--4-items {
    padding-bottom: 0;
  }
}

@media screen and (min-width: 750px) {
  .collection-list__item a:hover {
    box-shadow: none;
  }
}

@media screen and (max-width: 989px) {
  .collection-list.slider .collection-list__item {
    max-width: 100%;
  }
}

.collection-list-view-all {
  margin-top: 2rem;
}
</style>
    </script>
  </head>

  <body>

    {%- if settings.cart_type == 'drawer' -%}
      {%- render 'cart-drawer' -%}
    {%- endif -%}

    {% sections 'header-group' %}

    <main id="MainContent" class="content-for-layout focus-none" role="main" tabindex="-1">
      {{ content_for_layout }}
      
      {% comment %} FUNNEL CARDS - PLACED WHERE COLLECTIONS NORMALLY APPEAR {% endcomment %}
      {% if template.name == 'index' or template.name == 'page' %}
        <!-- STAGE 1: CURIOSITY & APPROACHABILITY -->
        <div class="stage-section">
            <div class="stage-title">STAGE 1 — CURIOSITY & APPROACHABILITY</div>
            <div class="stage-subtitle">"This feels serious, but I can explore safely."</div>
        </div>

        <div class="funnel-cards-container">
            <!-- Card 1 -->
            <div class="funnel-card free">
                <div class="funnel-card-header">
                    <div class="funnel-card-title">1. Why This Isn't YouTube</div>
                    <div class="funnel-card-subtitle">FREE</div>
                    <div class="status-badge">FREE</div>
                </div>
                <div class="funnel-card-body">
                    <ul class="funnel-card-features">
                        <li>Sets tone immediately</li>
                        <li>Establishes professionalism</li>
                        <li>Differentiates from casual content</li>
                    </ul>
                    <div class="funnel-card-footer">
                        <button class="funnel-card-btn">Explore</button>
                    </div>
                </div>
            </div>

            <!-- Card 2 -->
            <div class="funnel-card free">
                <div class="funnel-card-header">
                    <div class="funnel-card-title">2. Equipment Myths</div>
                    <div class="funnel-card-subtitle">FREE</div>
                    <div class="status-badge">FREE</div>
                </div>
                <div class="funnel-card-body">
                    <ul class="funnel-card-features">
                        <li>Low-threat entry point</li>
                        <li>Breaks assumptions gently</li>
                        <li>No ego threat involved</li>
                    </ul>
                    <div class="funnel-card-footer">
                        <button class="funnel-card-btn">Explore</button>
                    </div>
                </div>
            </div>

            <!-- Card 3 -->
            <div class="funnel-card free">
                <div class="funnel-card-header">
                    <div class="funnel-card-title">3. Training vs. Trigger Time</div>
                    <div class="funnel-card-subtitle">FREE</div>
                    <div class="status-badge">FREE</div>
                </div>
                <div class="funnel-card-body">
                    <ul class="funnel-card-features">
                        <li>Reframes improvement process</li>
                        <li>Clarifies actual skill development</li>
                        <li>Sets realistic expectations</li>
                    </ul>
                    <div class="funnel-card-footer">
                        <button class="funnel-card-btn">Explore</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- STAGE 2: CONFIDENCE DISRUPTION -->
        <div class="stage-section">
            <div class="stage-title">STAGE 2 — CONFIDENCE DISRUPTION</div>
            <div class="stage-subtitle">"I may not be as solid as I thought."</div>
        </div>

        <div class="funnel-cards-container">
            <!-- Card 4 -->
            <div class="funnel-card free">
                <div class="funnel-card-header">
                    <div class="funnel-card-title">4. Firearms Reality Check</div>
                    <div class="funnel-card-subtitle">FREE - Preview</div>
                    <div class="status-badge">FREE</div>
                </div>
                <div class="funnel-card-body">
                    <ul class="funnel-card-features">
                        <li>Unscored assessment</li>
                        <li>Creates uncertainty safely</li>
                        <li>No embarrassment factor</li>
                    </ul>
                    <div class="funnel-card-footer">
                        <button class="funnel-card-btn">Preview</button>
                    </div>
                </div>
            </div>

            <!-- Card 5 -->
            <div class="funnel-card free">
                <div class="funnel-card-header">
                    <div class="funnel-card-title">5. The Anatomy of a Miss</div>
                    <div class="funnel-card-subtitle">FREE</div>
                    <div class="status-badge">FREE</div>
                </div>
                <div class="funnel-card-body">
                    <ul class="funnel-card-features">
                        <li>Shows problems clearly</li>
                        <li>Doesn't provide solutions</li>
                        <li>Creates diagnostic curiosity</li>
                    </ul>
                    <div class="funnel-card-footer">
                        <button class="funnel-card-btn">Analyze</button>
                    </div>
                </div>
            </div>

            <!-- Card 6 -->
            <div class="funnel-card free">
                <div class="funnel-card-header">
                    <div class="funnel-card-title">6. Under Pressure</div>
                    <div class="funnel-card-subtitle">FREE</div>
                    <div class="status-badge">FREE</div>
                </div>
                <div class="funnel-card-body">
                    <ul class="funnel-card-features">
                        <li>Introduces stress degradation</li>
                        <li>Shows decision collapse</li>
                        <li>Demonstrates pressure effects</li>
                    </ul>
                    <div class="funnel-card-footer">
                        <button class="funnel-card-btn">Experience</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- STAGE 3: LEGAL & MORAL WEIGHT -->
        <div class="stage-section">
            <div class="stage-title">STAGE 3 — LEGAL & MORAL WEIGHT</div>
            <div class="stage-subtitle">"This isn't just technical—it's serious."</div>
        </div>

        <div class="funnel-cards-container">
            <!-- Card 7 -->
            <div class="funnel-card free">
                <div class="funnel-card-header">
                    <div class="funnel-card-title">7. Would This Be Legal?</div>
                    <div class="funnel-card-subtitle">FREE</div>
                    <div class="status-badge">FREE</div>
                </div>
                <div class="funnel-card-body">
                    <ul class="funnel-card-features">
                        <li>Forces judgment calls</li>
                        <li>Limited feedback only</li>
                        <li>Creates legal awareness</li>
                    </ul>
                    <div class="funnel-card-footer">
                        <button class="funnel-card-btn">Assess</button>
                    </div>
                </div>
            </div>

            <!-- Card 8 -->
            <div class="funnel-card free">
                <div class="funnel-card-header">
                    <div class="funnel-card-title">8. Standards Matter</div>
                    <div class="funnel-card-subtitle">FREE</div>
                    <div class="status-badge">FREE</div>
                </div>
                <div class="funnel-card-body">
                    <ul class="funnel-card-features">
                        <li>Establishes ethical bar</li>
                        <li>Sets instructional standards</li>
                        <li>Defines professional expectations</li>
                    </ul>
                    <div class="funnel-card-footer">
                        <button class="funnel-card-btn">Review</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- STAGE 4: AUTHORITY & INVISIBLE GAPS -->
        <div class="stage-section">
            <div class="stage-title">STAGE 4 — AUTHORITY & INVISIBLE GAPS</div>
            <div class="stage-subtitle">"There are things I can't self-diagnose."</div>
        </div>

        <div class="funnel-cards-container">
            <!-- Card 9 -->
            <div class="funnel-card gated">
                <div class="funnel-card-header">
                    <div class="funnel-card-title">9. The Instructor's Eye</div>
                    <div class="funnel-card-subtitle">GATED</div>
                    <div class="status-badge">GATED</div>
                </div>
                <div class="funnel-card-body">
                    <ul class="funnel-card-features">
                        <li>First hard gate</li>
                        <li>Introduces expert correction</li>
                        <li>Professional assessment begins</li>
                    </ul>
                    <div class="funnel-card-footer">
                        <button class="funnel-card-btn">Verify</button>
                    </div>
                </div>
            </div>

            <!-- Card 10 -->
            <div class="funnel-card gated">
                <div class="funnel-card-header">
                    <div class="funnel-card-title">10. What You're Not Seeing Yet</div>
                    <div class="funnel-card-subtitle">GATED</div>
                    <div class="status-badge">GATED</div>
                </div>
                <div class="funnel-card-body">
                    <ul class="funnel-card-features">
                        <li>Names blind spots directly</li>
                        <li>Doesn't reveal fixes</li>
                        <li>Creates need for guidance</li>
                    </ul>
                    <div class="funnel-card-footer">
                        <button class="funnel-card-btn">Verify</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- STAGE 5: SELF-MEASUREMENT & VERIFICATION -->
        <div class="stage-section">
            <div class="stage-title">STAGE 5 — SELF-MEASUREMENT & VERIFICATION</div>
            <div class="stage-subtitle">"I want to know where I actually stand."</div>
        </div>

        <div class="funnel-cards-container">
            <!-- Card 11 -->
            <div class="funnel-card gated">
                <div class="funnel-card-header">
                    <div class="funnel-card-title">11. Firearms Reality Check — Full</div>
                    <div class="funnel-card-subtitle">GATED</div>
                    <div class="status-badge">GATED</div>
                </div>
                <div class="funnel-card-body">
                    <ul class="funnel-card-features">
                        <li>Scored evaluation</li>
                        <li>Feedback-driven assessment</li>
                        <li>Non-public results</li>
                    </ul>
                    <div class="funnel-card-footer">
                        <button class="funnel-card-btn">Assess</button>
                    </div>
                </div>
            </div>

            <!-- Card 12 -->
            <div class="funnel-card gated">
                <div class="funnel-card-header">
                    <div class="funnel-card-title">12. Skill Self-Assessment</div>
                    <div class="funnel-card-subtitle">GATED</div>
                    <div class="status-badge">GATED</div>
                </div>
                <div class="funnel-card-body">
                    <ul class="funnel-card-features">
                        <li>Performance evaluation</li>
                        <li>No drills required</li>
                        <li>Structured self-analysis</li>
                    </ul>
                    <div class="funnel-card-footer">
                        <button class="funnel-card-btn">Evaluate</button>
                    </div>
                </div>
            </div>

            <!-- Card 13 -->
            <div class="funnel-card gated">
                <div class="funnel-card-header">
                    <div class="funnel-card-title">13. Legal Knowledge Test</div>
                    <div class="funnel-card-subtitle">GATED</div>
                    <div class="status-badge">GATED</div>
                </div>
                <div class="funnel-card-body">
                    <ul class="funnel-card-features">
                        <li>Graded responsibility</li>
                        <li>Decision-making evaluation</li>
                        <li>Legal knowledge assessment</li>
                    </ul>
                    <div class="funnel-card-footer">
                        <button class="funnel-card-btn">Test</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- STAGE 6: CONSEQUENCE & COMMITMENT -->
        <div class="stage-section">
            <div class="stage-title">STAGE 6 — CONSEQUENCE & COMMITMENT</div>
            <div class="stage-subtitle">"This deserves proper training."</div>
        </div>

        <div class="funnel-cards-container">
            <!-- Card 14 -->
            <div class="funnel-card gated">
                <div class="funnel-card-header">
                    <div class="funnel-card-title">14. Decision-Making Under Stress</div>
                    <div class="funnel-card-subtitle">GATED</div>
                    <div class="status-badge">GATED</div>
                </div>
                <div class="funnel-card-body">
                    <ul class="funnel-card-features">
                        <li>Expanded outcomes analysis</li>
                        <li>Legal examination scenarios</li>
                        <li>Ethical decision frameworks</li>
                    </ul>
                    <div class="funnel-card-footer">
                        <button class="funnel-card-btn">Unlock</button>
                    </div>
                </div>
            </div>

            <!-- Card 15 -->
            <div class="funnel-card gated">
                <div class="funnel-card-header">
                    <div class="funnel-card-title">15. Where You're Losing Efficiency</div>
                    <div class="funnel-card-subtitle">GATED</div>
                    <div class="status-badge">GATED</div>
                </div>
                <div class="funnel-card-body">
                    <ul class="funnel-card-features">
                        <li>Optimization framing</li>
                        <li>No tactical instruction</li>
                        <li>Efficiency gap analysis</li>
                    </ul>
                    <div class="funnel-card-footer">
                        <button class="funnel-card-btn">Unlock</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- STAGE 7: RESOLUTION & INVITATION -->
        <div class="stage-section">
            <div class="stage-title">STAGE 7 — RESOLUTION & INVITATION</div>
            <div class="stage-subtitle">"I'm ready for structured instruction."</div>
        </div>

        <div class="funnel-cards-container">
            <!-- Card 16 -->
            <div class="funnel-card gated">
                <div class="funnel-card-header">
                    <div class="funnel-card-title">16. Inside the Program</div>
                    <div class="funnel-card-subtitle">GATED / FINAL</div>
                    <div class="status-badge">GATED</div>
                </div>
                <div class="funnel-card-body">
                    <ul class="funnel-card-features">
                        <li>Explains philosophy clearly</li>
                        <li>Sets program standards</li>
                        <li>Defines expectations only (no drills)</li>
                    </ul>
                    <div class="funnel-card-footer">
                        <button class="funnel-card-btn">Unlock</button>
                    </div>
                </div>
            </div>
        </div>
      {% endif %}
    </main>

    {% sections 'footer-group' %}

    <ul hidden>
      <li id="a11y-refresh-page-message">{{ 'accessibility.refresh_page' | t }}</li>
      <li id="a11y-new-window-message">{{ 'accessibility.link_messages.new_window' | t }}</li>
    </ul>

    <script>
      window.shopUrl = '{{ request.origin }}';
      window.routes = {
        cart_add_url: '{{ routes.cart_add_url }}',
        cart_change_url: '{{ routes.cart_change_url }}',
        cart_update_url: '{{ routes.cart_update_url }}',
        cart_url: '{{ routes.cart_url }}',
        predictive_search_url: '{{ routes.predictive_search_url }}',
      };

      window.cartStrings = {
        error: `{{ 'sections.cart.cart_error' | t }}`,
        quantityError: `{{ 'sections.cart.cart_quantity_error_html' | t: quantity: '[quantity]' }}`,
      };

      window.variantStrings = {
        addToCart: `{{ 'products.product.add_to_cart' | t }}`,
        soldOut: `{{ 'products.product.sold_out' | t }}`,
        unavailable: `{{ 'products.product.unavailable' | t }}`,
        unavailable_with_option: `{{ 'products.product.value_unavailable' | t: option_value: '[value]' }}`,
      };

      window.accessibilityStrings = {
        imageAvailable: `{{ 'products.product.media.image_available' | t: index: '[index]' }}`,
        shareSuccess: `{{ 'general.share.success_message' | t }}`,
        pauseSlideshow: `{{ 'sections.slideshow.pause_slideshow' | t }}`,
        playSlideshow: `{{ 'sections.slideshow.play_slideshow' | t }}`,
      };
    </script>

    {%- if settings.predictive_search_enabled -%}
      <script src="{{ 'predictive-search.js' | asset_url }}" defer="defer"></script>
    {%- endif -%}

  <!-- Tactical Navigation Bar - NO FONT AWESOME -->
<nav class="tactical-navbar" id="tacticalNavbar">
    <div class="tactical-navbar-container">
        <!-- Dashboard -->
        <a href="/pages/dashboard" class="tactical-nav-item" title="Dashboard">
            <svg class="tactical-nav-icon" width="24" height="24" viewBox="0 0 24 24">
                <rect x="3" y="3" width="7" height="7" stroke="#c0c0c0" stroke-width="2" fill="none"/>
                <rect x="14" y="3" width="7" height="7" stroke="#c0c0c0" stroke-width="2" fill="none"/>
                <rect x="3" y="14" width="7" height="7" stroke="#c0c0c0" stroke-width="2" fill="none"/>
                <rect x="14" y="14" width="7" height="7" stroke="#c0c0c0" stroke-width="2" fill="none"/>
            </svg>
            <span class="tactical-nav-label">DASH</span>
        </a>
        
        <!-- Courses -->
        <a href="/pages/courses" class="tactical-nav-item" title="Courses">
            <svg class="tactical-nav-icon" width="24" height="24" viewBox="0 0 24 24">
                <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" stroke="#c0c0c0" stroke-width="2" fill="none"/>
                <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z" stroke="#c0c0c0" stroke-width="2" fill="none"/>
            </svg>
            <span class="tactical-nav-label">COURSES</span>
        </a>
        
        <!-- Home/Witness Defense (CENTER) -->
        <a href="/" class="tactical-nav-item tactical-nav-home" title="Home">
            <svg class="tactical-nav-icon" width="24" height="24" viewBox="0 0 24 24">
                <circle cx="12" cy="12" r="10" stroke="#c0c0c0" stroke-width="2" fill="none"/>
                <line x1="22" y1="12" x2="18" y2="12" stroke="#c0c0c0" stroke-width="2"/>
                <line x1="6" y1="12" x2="2" y2="12" stroke="#c0c0c0" stroke-width="2"/>
                <line x1="12" y1="6" x2="12" y2="2" stroke="#c0c0c0" stroke-width="2"/>
                <line x1="12" y1="22" x2="12" y2="18" stroke="#c0c0c0" stroke-width="2"/>
            </svg>
            <span class="tactical-nav-label">HOME</span>
        </a>
        
        <!-- Drills -->
        <a href="/pages/drills" class="tactical-nav-item" title="Drills">
            <svg class="tactical-nav-icon" width="24" height="24" viewBox="0 0 24 24">
                <circle cx="12" cy="12" r="10" stroke="#c0c0c0" stroke-width="2" fill="none"/>
                <circle cx="12" cy="12" r="6" stroke="#c0c0c0" stroke-width="2" fill="none"/>
                <circle cx="12" cy="12" r="2" stroke="#c0c0c0" stroke-width="2" fill="none"/>
            </svg>
            <span class="tactical-nav-label">DRILLS</span>
        </a>
        
        <!-- Progress -->
        <a href="/pages/progress" class="tactical-nav-item" title="Progress">
            <svg class="tactical-nav-icon" width="24" height="24" viewBox="0 0 24 24">
                <line x1="3" y1="16" x2="8" y2="8" stroke="#c0c0c0" stroke-width="2"/>
                <line x1="10" y1="8" x2="14" y2="16" stroke="#c0c0c0" stroke-width="2"/>
                <line x1="16" y1="8" x2="21" y2="16" stroke="#c0c0c0" stroke-width="2"/>
            </svg>
            <span class="tactical-nav-label">PROG</span>
        </a>
        
        <!-- Profile -->
        <a href="/account" class="tactical-nav-item" title="Profile">
            <svg class="tactical-nav-icon" width="24" height="24" viewBox="0 0 24 24">
                <circle cx="12" cy="8" r="4" stroke="#c0c0c0" stroke-width="2" fill="none"/>
                <path d="M6 20c0-2.2 1.8-4 4-4h4c2.2 0 4 1.8 4 4" stroke="#c0c0c0" stroke-width="2" fill="none"/>
            </svg>
            <span class="tactical-nav-label">PROF</span>
        </a>
    </div>
</nav>

<!-- JavaScript for active state -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    const navItems = document.querySelectorAll('.tactical-nav-item');
    const currentPath = window.location.pathname;
    
    navItems.forEach(item => {
        const itemPath = item.getAttribute('href');
        // Remove trailing slash for comparison
        const cleanCurrentPath = currentPath.replace(/\/$/, '');
        const cleanItemPath = itemPath.replace(/\/$/, '');
        
        // Check if current path starts with item path (for nested pages)
        if (cleanCurrentPath === cleanItemPath || 
            (cleanItemPath !== '/' && cleanCurrentPath.startsWith(cleanItemPath))) {
            item.classList.add('active');
        }
        
        // Special case for home page
        if (cleanCurrentPath === '' || cleanCurrentPath === '/') {
            document.querySelector('.tactical-nav-home').classList.add('active');
        }
    });
    
    // Optional: Auto-hide/show on scroll
    let lastScrollTop = 0;
    const navbar = document.getElementById('tacticalNavbar');
    
    window.addEventListener('scroll', function() {
        const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
        
        if (scrollTop > lastScrollTop && scrollTop > 100) {
            // Scrolling down
            navbar.style.transform = 'translateY(100%)';
        } else {
            // Scrolling up
            navbar.style.transform = 'translateY(0)';
        }
        
        lastScrollTop = scrollTop;
    });
});

</script>
  </body>
</html>