/* =====================================================================
   GlowStrong — Global Stylesheet & Design System
   Mobile-first. All design decisions live in the tokens below so the
   whole brand can be re-tuned from one place.
   ===================================================================== */

/* ----------------------------------------------------------------------
   1. DESIGN TOKENS
   ---------------------------------------------------------------------- */
:root {
    /* Brand color palette — GlowStrong unified (navy / silver / red / white) */
    --gs-ink:        #0D244A;  /* GlowStrong navy — primary text & dark surfaces */
    --gs-charcoal:   #081A38;  /* deeper navy for dark sections */
    --gs-slate:      #636E78;  /* GlowStrong silver — secondary text */
    --gs-mist:       #EEF1F4;  /* subtle silver-grey backgrounds / borders */
    --gs-canvas:     #FFFFFF;  /* white page background */
    --gs-white:      #FFFFFF;
    --gs-glow:       #C00000;  /* GlowStrong red — signature accent / primary CTA */
    --gs-glow-soft:  #F2CDCD;  /* soft red tint (hover / wash) */
    --gs-sage:       #1F4E8C;  /* secondary navy-blue accent (gradients) */
    --gs-sage-deep:  #0D244A;  /* navy (links) */
    --gs-success:    #2E7D5B;
    --gs-danger:     #8E1B16;  /* distinct error red, separate from CTA red */

    /* Semantic tokens */
    --gs-bg:            var(--gs-canvas);
    --gs-bg-alt:        #F3F5F8;
    --gs-text:          var(--gs-ink);
    --gs-text-muted:    var(--gs-slate);
    --gs-accent:        var(--gs-glow);
    --gs-link:          var(--gs-sage-deep);
    --gs-border:        rgba(13, 36, 74, 0.12);

    /* Typography */
    --gs-font-heading: "Fraunces", Georgia, "Times New Roman", serif;
    --gs-font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    /* Fluid type scale (clamp: min, preferred, max) */
    --gs-fs-xs:      0.8125rem;
    --gs-fs-sm:      0.9375rem;
    --gs-fs-base:    1rem;
    --gs-fs-lg:      clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
    --gs-fs-xl:      clamp(1.5rem, 1.3rem + 1vw, 2rem);
    --gs-fs-2xl:     clamp(2rem, 1.6rem + 2vw, 3rem);
    --gs-fs-display: clamp(2.5rem, 1.8rem + 3.5vw, 4.5rem);

    --gs-lh-tight:  1.15;
    --gs-lh-snug:   1.3;
    --gs-lh-body:   1.65;

    /* Spacing scale (8pt grid) */
    --gs-space-1: 0.25rem;
    --gs-space-2: 0.5rem;
    --gs-space-3: 0.75rem;
    --gs-space-4: 1rem;
    --gs-space-5: 1.5rem;
    --gs-space-6: 2rem;
    --gs-space-7: 3rem;
    --gs-space-8: 4rem;
    --gs-space-9: 6rem;
    --gs-space-10: 8rem;

    /* Layout */
    --gs-container:      1200px;
    --gs-container-narrow: 760px;
    --gs-gutter:         clamp(1.25rem, 5vw, 2.5rem);

    /* Radius & shadow */
    --gs-radius-sm: 8px;
    --gs-radius:    14px;
    --gs-radius-lg: 24px;
    --gs-radius-pill: 999px;
    --gs-shadow-sm: 0 1px 2px rgba(14,17,23,0.06);
    --gs-shadow:    0 8px 30px rgba(14,17,23,0.08);
    --gs-shadow-lg: 0 24px 60px rgba(14,17,23,0.12);

    /* Motion */
    --gs-ease:      cubic-bezier(0.22, 1, 0.36, 1);
    --gs-dur:       0.4s;

    /* Header */
    --gs-header-h: 72px;
}

/* ----------------------------------------------------------------------
   2. RESET / BASE
   ---------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    font-family: var(--gs-font-body);
    font-size: var(--gs-fs-base);
    line-height: var(--gs-lh-body);
    color: var(--gs-text);
    background: var(--gs-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img, picture, svg, video { display: block; max-width: 100%; height: auto; }

a { color: var(--gs-link); text-decoration: none; transition: color var(--gs-dur) var(--gs-ease); }
a:hover { color: var(--gs-accent); }

h1, h2, h3, h4 {
    font-family: var(--gs-font-heading);
    font-weight: 500;
    line-height: var(--gs-lh-tight);
    letter-spacing: -0.01em;
    color: var(--gs-ink);
}
h1 { font-size: var(--gs-fs-display); }
h2 { font-size: var(--gs-fs-2xl); }
h3 { font-size: var(--gs-fs-xl); }
h4 { font-size: var(--gs-fs-lg); }

p { color: var(--gs-text); }
p + p { margin-top: var(--gs-space-4); }

ul, ol { padding-left: 1.2em; }

:focus-visible { outline: 2px solid var(--gs-sage); outline-offset: 3px; border-radius: 4px; }

/* ----------------------------------------------------------------------
   3. LAYOUT UTILITIES
   ---------------------------------------------------------------------- */
.gs-container {
    width: 100%;
    max-width: var(--gs-container);
    margin-inline: auto;
    padding-inline: var(--gs-gutter);
}
.gs-container--narrow { max-width: var(--gs-container-narrow); }

.gs-section { padding-block: var(--gs-space-8); }
@media (min-width: 768px) { .gs-section { padding-block: var(--gs-space-9); } }

.gs-section--dark { background: var(--gs-charcoal); color: var(--gs-mist); }
.gs-section--dark h1, .gs-section--dark h2, .gs-section--dark h3 { color: var(--gs-white); }
.gs-section--alt { background: var(--gs-bg-alt); }

.gs-grid { display: grid; gap: var(--gs-space-5); }
@media (min-width: 640px)  { .gs-grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .gs-grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px)  { .gs-grid--4 { grid-template-columns: repeat(4, 1fr); } }

.gs-eyebrow {
    display: inline-block;
    font-family: var(--gs-font-body);
    font-size: var(--gs-fs-xs);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gs-accent);
    margin-bottom: var(--gs-space-3);
}
.gs-lead { font-size: var(--gs-fs-lg); color: var(--gs-text-muted); }
.gs-center { text-align: center; }
.gs-measure { max-width: 60ch; }
.gs-mx-auto { margin-inline: auto; }

/* ----------------------------------------------------------------------
   4. BUTTONS
   ---------------------------------------------------------------------- */
.gs-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--gs-space-2);
    font-family: var(--gs-font-body);
    font-size: var(--gs-fs-sm);
    font-weight: 600;
    line-height: 1;
    padding: 0.95em 1.6em;
    border-radius: var(--gs-radius-pill);
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform var(--gs-dur) var(--gs-ease), background var(--gs-dur) var(--gs-ease), color var(--gs-dur) var(--gs-ease), box-shadow var(--gs-dur) var(--gs-ease);
    text-align: center;
}
.gs-btn:hover { transform: translateY(-2px); }
.gs-btn--primary { background: var(--gs-ink); color: var(--gs-white); }
.gs-btn--primary:hover { background: var(--gs-charcoal); color: var(--gs-white); box-shadow: var(--gs-shadow); }
.gs-btn--gold { background: var(--gs-glow); color: var(--gs-ink); }
.gs-btn--gold:hover { background: var(--gs-glow-soft); color: var(--gs-ink); box-shadow: var(--gs-shadow); }
.gs-btn--ghost { background: transparent; color: var(--gs-ink); border-color: var(--gs-border); }
.gs-btn--ghost:hover { border-color: var(--gs-ink); color: var(--gs-ink); }
.gs-btn--on-dark { background: var(--gs-white); color: var(--gs-ink); }
.gs-btn--on-dark:hover { background: var(--gs-glow-soft); color: var(--gs-ink); }

/* ----------------------------------------------------------------------
   5. CARDS
   ---------------------------------------------------------------------- */
.gs-card {
    background: var(--gs-white);
    border: 1px solid var(--gs-border);
    border-radius: var(--gs-radius-lg);
    padding: var(--gs-space-6);
    box-shadow: var(--gs-shadow-sm);
    transition: transform var(--gs-dur) var(--gs-ease), box-shadow var(--gs-dur) var(--gs-ease);
}
.gs-card:hover { transform: translateY(-4px); box-shadow: var(--gs-shadow); }
.gs-card__icon {
    width: 48px; height: 48px;
    display: grid; place-items: center;
    border-radius: var(--gs-radius);
    background: var(--gs-mist);
    color: var(--gs-sage-deep);
    margin-bottom: var(--gs-space-4);
    font-size: 1.25rem;
}
.gs-card__title { font-size: var(--gs-fs-lg); margin-bottom: var(--gs-space-2); }
.gs-card__text { color: var(--gs-text-muted); font-size: var(--gs-fs-sm); }

/* ----------------------------------------------------------------------
   6. HEADER / NAV
   ---------------------------------------------------------------------- */
.gs-header {
    position: sticky; top: 0; z-index: 100;
    background: color-mix(in srgb, var(--gs-canvas) 88%, transparent);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid transparent;
    transition: border-color var(--gs-dur) var(--gs-ease), background var(--gs-dur) var(--gs-ease);
}
.gs-header.is-scrolled { border-bottom-color: var(--gs-border); }
.gs-header__inner {
    display: flex; align-items: center; justify-content: space-between;
    height: var(--gs-header-h); gap: var(--gs-space-5);
}
.gs-logo { font-family: var(--gs-font-heading); font-size: 1.4rem; font-weight: 600; color: var(--gs-ink); letter-spacing: -0.02em; }
.gs-logo span { color: var(--gs-glow); }

.gs-nav { display: none; }
.gs-nav ul { display: flex; gap: var(--gs-space-5); list-style: none; padding: 0; margin: 0; }
.gs-nav a { color: var(--gs-ink); font-size: var(--gs-fs-sm); font-weight: 500; }
.gs-nav a:hover { color: var(--gs-sage-deep); }

.gs-header__actions { display: flex; align-items: center; gap: var(--gs-space-3); }
.gs-cart { position: relative; display: inline-flex; align-items: center; color: var(--gs-ink); font-weight: 600; font-size: var(--gs-fs-sm); }
.gs-cart-count {
    display: inline-grid; place-items: center; min-width: 20px; height: 20px;
    padding: 0 6px; margin-left: 6px;
    background: var(--gs-glow); color: var(--gs-ink);
    border-radius: var(--gs-radius-pill); font-size: 0.7rem; font-weight: 700;
}

.gs-burger {
    display: inline-flex; flex-direction: column; gap: 5px;
    width: 28px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer;
    justify-content: center;
}
.gs-burger span { display: block; height: 2px; width: 100%; background: var(--gs-ink); transition: transform var(--gs-dur) var(--gs-ease), opacity var(--gs-dur) var(--gs-ease); }
.gs-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.gs-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.gs-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile drawer */
.gs-mobile-nav {
    position: fixed; inset: var(--gs-header-h) 0 0 0; z-index: 99;
    background: var(--gs-canvas);
    transform: translateX(100%);
    transition: transform var(--gs-dur) var(--gs-ease);
    padding: var(--gs-space-6) var(--gs-gutter);
    overflow-y: auto;
}
.gs-mobile-nav.is-open { transform: translateX(0); }
.gs-mobile-nav ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--gs-space-2); }
.gs-mobile-nav a { display: block; padding: var(--gs-space-4) 0; font-size: var(--gs-fs-lg); font-family: var(--gs-font-heading); color: var(--gs-ink); border-bottom: 1px solid var(--gs-border); }

@media (min-width: 1024px) {
    .gs-nav { display: block; }
    .gs-burger, .gs-mobile-nav { display: none; }
}

/* ----------------------------------------------------------------------
   7. HERO
   ---------------------------------------------------------------------- */
.gs-hero { position: relative; padding-block: var(--gs-space-9) var(--gs-space-8); overflow: hidden; }
.gs-hero__inner { display: grid; gap: var(--gs-space-6); align-items: center; }
.gs-hero__title { margin-bottom: var(--gs-space-4); }
.gs-hero__text { font-size: var(--gs-fs-lg); color: var(--gs-text-muted); max-width: 52ch; }
.gs-hero__actions { display: flex; flex-wrap: wrap; gap: var(--gs-space-3); margin-top: var(--gs-space-6); }
.gs-hero__media {
    aspect-ratio: 4 / 5;
    border-radius: var(--gs-radius-lg);
    background:
        radial-gradient(120% 120% at 20% 10%, var(--gs-glow-soft) 0%, transparent 55%),
        linear-gradient(160deg, var(--gs-sage) 0%, var(--gs-sage-deep) 100%);
    box-shadow: var(--gs-shadow-lg);
}
@media (min-width: 900px) {
    .gs-hero__inner { grid-template-columns: 1.1fr 0.9fr; gap: var(--gs-space-8); }
}

/* ----------------------------------------------------------------------
   8. TRUST BAR / STATS
   ---------------------------------------------------------------------- */
.gs-trust { display: flex; flex-wrap: wrap; gap: var(--gs-space-5) var(--gs-space-7); align-items: center; justify-content: center; opacity: 0.85; }
.gs-trust span { font-size: var(--gs-fs-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gs-text-muted); }
.gs-stat { text-align: center; }
.gs-stat__num { font-family: var(--gs-font-heading); font-size: var(--gs-fs-2xl); color: var(--gs-ink); display: block; }
.gs-stat__label { font-size: var(--gs-fs-sm); color: var(--gs-text-muted); }

/* ----------------------------------------------------------------------
   9. SCAN TEASER
   ---------------------------------------------------------------------- */
.gs-scan { position: relative; overflow: hidden; }
.gs-scan__panel {
    display: grid; gap: var(--gs-space-6); align-items: center;
    background:
        radial-gradient(100% 140% at 100% 0%, rgba(198,161,91,0.22) 0%, transparent 60%),
        var(--gs-charcoal);
    color: var(--gs-mist);
    border-radius: var(--gs-radius-lg);
    padding: var(--gs-space-7);
}
.gs-scan__panel h2 { color: var(--gs-white); }
.gs-scan__panel .gs-lead { color: rgba(238,241,246,0.78); }
@media (min-width: 900px) { .gs-scan__panel { grid-template-columns: 1.2fr 0.8fr; padding: var(--gs-space-8); } }

/* ----------------------------------------------------------------------
   10. PRODUCT / GOAL / GUIDE GRIDS
   ---------------------------------------------------------------------- */
.gs-goal {
    position: relative; display: block; padding: var(--gs-space-6);
    border-radius: var(--gs-radius-lg); overflow: hidden;
    background: var(--gs-white); border: 1px solid var(--gs-border);
    min-height: 180px;
    transition: transform var(--gs-dur) var(--gs-ease), box-shadow var(--gs-dur) var(--gs-ease);
}
.gs-goal:hover { transform: translateY(-4px); box-shadow: var(--gs-shadow); }
.gs-goal__name { font-family: var(--gs-font-heading); font-size: var(--gs-fs-lg); color: var(--gs-ink); }
.gs-goal__meta { font-size: var(--gs-fs-sm); color: var(--gs-text-muted); margin-top: var(--gs-space-1); }

.gs-section__head { max-width: 64ch; margin-bottom: var(--gs-space-7); }
.gs-section__head.gs-center { margin-inline: auto; }

/* ----------------------------------------------------------------------
   11. CTA BAND + FOOTER
   ---------------------------------------------------------------------- */
.gs-cta { text-align: center; }
.gs-cta__panel {
    background: linear-gradient(160deg, var(--gs-sage) 0%, var(--gs-sage-deep) 100%);
    color: var(--gs-white); border-radius: var(--gs-radius-lg);
    padding: var(--gs-space-8) var(--gs-space-6);
}
.gs-cta__panel h2 { color: var(--gs-white); }

.gs-footer { background: var(--gs-ink); color: rgba(238,241,246,0.72); padding-block: var(--gs-space-8) var(--gs-space-6); }
.gs-footer a { color: rgba(238,241,246,0.72); }
.gs-footer a:hover { color: var(--gs-glow); }
.gs-footer__grid { display: grid; gap: var(--gs-space-6); }
@media (min-width: 768px) { .gs-footer__grid { grid-template-columns: 1.4fr repeat(3, 1fr); } }
.gs-footer .gs-logo { color: var(--gs-white); }
.gs-widget__title { color: var(--gs-white); font-family: var(--gs-font-body); font-size: var(--gs-fs-sm); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: var(--gs-space-4); }
.gs-footer__bottom { margin-top: var(--gs-space-7); padding-top: var(--gs-space-5); border-top: 1px solid rgba(255,255,255,0.10); font-size: var(--gs-fs-xs); display: flex; flex-wrap: wrap; gap: var(--gs-space-3); justify-content: space-between; }

/* ----------------------------------------------------------------------
   12. ACCESSIBILITY HELPERS
   ---------------------------------------------------------------------- */
.screen-reader-text {
    position: absolute !important; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0;
}
.gs-skip-link {
    position: absolute; left: -999px; top: 0; z-index: 200;
    background: var(--gs-ink); color: #fff; padding: var(--gs-space-3) var(--gs-space-4);
    border-radius: 0 0 var(--gs-radius-sm) 0;
}
.gs-skip-link:focus { left: 0; color: #fff; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* ----------------------------------------------------------------------
   13. SHARED COMPONENTS (promoted in Module 4 for cross-page cohesion)
   ---------------------------------------------------------------------- */

/* FAQ accordion (used on goal pages + homepage) */
.gs-faq { display: flex; flex-direction: column; gap: var(--gs-space-3); }
.gs-faq__item { background: var(--gs-white); border: 1px solid var(--gs-border); border-radius: var(--gs-radius); padding: var(--gs-space-4) var(--gs-space-5); }
.gs-faq__q { font-family: var(--gs-font-heading); font-size: var(--gs-fs-lg); color: var(--gs-ink); cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--gs-space-4); }
.gs-faq__q::-webkit-details-marker { display: none; }
.gs-faq__q::after { content: "+"; font-family: var(--gs-font-body); color: var(--gs-glow); font-size: 1.5rem; line-height: 1; transition: transform var(--gs-dur) var(--gs-ease); }
.gs-faq__item[open] .gs-faq__q::after { transform: rotate(45deg); }
.gs-faq__a { padding-top: var(--gs-space-3); color: var(--gs-text-muted); }

/* Product / stack cards (used on goal pages + homepage) */
.gs-stack-grid { align-items: stretch; }
.gs-stack-card { display: flex; flex-direction: column; align-items: flex-start; background: var(--gs-white); border: 1px solid var(--gs-border); border-radius: var(--gs-radius-lg); padding: var(--gs-space-4); transition: transform var(--gs-dur) var(--gs-ease), box-shadow var(--gs-dur) var(--gs-ease); }
.gs-stack-card:hover { transform: translateY(-4px); box-shadow: var(--gs-shadow); }
.gs-stack-card__media { display: block; width: 100%; border-radius: var(--gs-radius); overflow: hidden; margin-bottom: var(--gs-space-3); }
.gs-stack-card__media img { width: 100%; }
.gs-stack-card__title { font-family: var(--gs-font-heading); font-size: var(--gs-fs-base); color: var(--gs-ink); margin-bottom: var(--gs-space-1); }
.gs-stack-card__price { color: var(--gs-text-muted); font-weight: 600; margin-bottom: var(--gs-space-3); }
.gs-stack-card__btn { margin-top: auto; align-self: stretch; text-align: center; }

/* ----------------------------------------------------------------------
   14. EXIT/LEAD POPUP (Module 7) — global so it can appear on any page
   ---------------------------------------------------------------------- */
.gs-popup { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; }
.gs-popup[hidden] { display: none; }
.gs-popup__overlay { position: absolute; inset: 0; background: rgba(8,26,56,0.6); backdrop-filter: blur(2px); }
.gs-popup__box { position: relative; z-index: 1; background: var(--gs-white); border-radius: var(--gs-radius-lg); padding: var(--gs-space-7); max-width: 460px; width: calc(100% - 2rem); box-shadow: var(--gs-shadow-lg); text-align: center; animation: gsPopIn .4s var(--gs-ease); }
@keyframes gsPopIn { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.gs-popup__close { position: absolute; top: 10px; right: 14px; background: none; border: 0; font-size: 1.6rem; line-height: 1; color: var(--gs-text-muted); cursor: pointer; }
.gs-lead-magnet { background: var(--gs-bg-alt); border: 1px solid var(--gs-border); border-radius: var(--gs-radius-lg); padding: var(--gs-space-6); text-align: center; }
@media (prefers-reduced-motion: reduce) { .gs-popup__box { animation: none; } }