/* ==========================================================
   SOUTHBOUND FOUNDATION

   Canonical design tokens for the whole site. Every page loads
   this file first — page-specific stylesheets should only add
   page-unique rules, not redeclare :root. (They used to; that's
   what caused three different background shades and two
   different accent blues across the site. Consolidated here.)
========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Bebas+Neue&family=Saira:ital,wght@0,800;1,900&family=JetBrains+Mono:wght@400;500;700&display=swap');

*,
*::before,
*::after{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

    /* iOS Safari's rubber-band overscroll (and Android's over-scroll
       glow) scrolls past the body's own box, exposing whatever the
       html element's background is -- without this it's the browser
       default white, flashing behind every page at the top/bottom
       edge of a scroll. Match body's base color here too. */
    background:#0F2019;

}

:root{

    --bg:#0F2019;

    --surface:#17291F;

    --surface-light:#203528;

    --border:rgba(255,255,255,.08);

    --text:#F2EEE4;

    --text-secondary:#C3C9BD;

    --muted:#8E9A89;

    --primary:#C9AD84;

    --primary-light:#DCC6A3;

    --primary-dark:#A68A62;

    /* Southbound brand palette (from the brand board). --primary is
       the tan; text sitting on a tan fill uses --on-primary. */
    --forest:#173226;

    --sage:#8FA388;

    --stone:#E3DDD0;

    --cream:#F2EEE4;

    --on-primary:#0F2019;

    --green:#22C55E;

    --yellow:#FACC15;

    --orange:#FB923C;

    --red:#EF4444;

    --purple:#A78BFA;

    --purple-light:#8B5CF6;

    --pink:#EC4899;

    --pink-light:#F472B6;

    --cyan:#06B6D4;

    --cyan-light:#22D3EE;

    --amber:#FFB020;

    --amber-light:#FBBF24;

    --teal:#2FB6B0;

    --indigo:#6366F1;

    --radius:22px;

    --shadow:0 18px 40px rgba(0,0,0,.22);

    --font-body:'Inter',sans-serif;

    --font-display:'Bebas Neue',sans-serif;

    --font-brand:'Saira',sans-serif;

    --font-mono:'JetBrains Mono',monospace;

}
body{

    font-family:"Inter",sans-serif;

    background:
        radial-gradient(circle at top,#1F3A2C 0%,#0F2019 45%,#07100C 100%);

    color:var(--text);

    min-height:100vh;

    overflow-x:hidden;

    line-height:1.6;

}

a{

    color:inherit;

}

img{

    max-width:100%;

    display:block;

}

button{

    font-family:inherit;

}

.container{

    width:min(1450px,94%);

    margin:0 auto;

    padding:40px 0 80px;

}

h1,
h2,
h3,
h4{

    color:var(--text);

    font-weight:800;

    line-height:1.1;

}

p{

    color:var(--text-secondary);

}

section{

    margin-bottom:55px;

}

::selection{

    background:var(--primary);

    color:var(--on-primary);

}

/* ==========================================================
   PAGE TRANSITIONS

   This is a static multi-page site -- every nav tap or card
   click is a real full-document navigation, not a client-side
   route change. Cross-Document View Transitions turn that from
   an instant white-flash reload into a soft animated handoff,
   with zero JavaScript: the browser snapshots the outgoing page,
   snapshots the incoming one once it's ready, and cross-fades
   between them. It has to be opted into on every participating
   page (source AND destination), which is why this lives in the
   one stylesheet every page already loads rather than being
   added per-page. Supported same-origin only, on Safari 18.2+
   (iOS 18.2+) and Chromium 126+; unsupported browsers just get
   today's instant navigation, no breakage either way.
========================================================== */

@view-transition{
    navigation:auto;
}

::view-transition-old(root),
::view-transition-new(root){
    animation-duration:.36s;
    /* Apple's own sheet-presentation curve -- an ease-out with a
       flat landing, reads as calm rather than snappy/bouncy. */
    animation-timing-function:cubic-bezier(.32,.72,0,1);
}

::view-transition-old(root){
    animation-name:eos-page-out;
}

::view-transition-new(root){
    animation-name:eos-page-in;
}

@keyframes eos-page-out{
    from{ opacity:1; transform:scale(1); }
    to{ opacity:0; transform:scale(.99); }
}

@keyframes eos-page-in{
    from{ opacity:0; transform:scale(1.01); }
    to{ opacity:1; transform:scale(1); }
}

@media (prefers-reduced-motion:reduce){
    @view-transition{
        navigation:none;
    }
}

/* ==========================================================
   NAVIGATION
   Clean Southbound dropdown header
========================================================== */

.navbar{
    position:relative;
    z-index:1000;
    width:min(1450px,94%);
    margin:25px auto;
    padding:14px 20px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    background:rgba(17,31,24,.82);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    border:1px solid rgba(255,255,255,.08);
    border-radius:22px;
    box-shadow:0 15px 45px rgba(0,0,0,.28);
}

.nav-left{
    display:flex;
    align-items:center;
    gap:24px;
    min-width:0;
}

.logo{
    display:flex;
    align-items:center;
    gap:12px;
    flex:0 0 auto;
    color:white;
    text-decoration:none;
    font-size:1.45rem;
    font-weight:800;
    white-space:nowrap;
}

.logo-dot{
    width:36px;
    height:36px;
    flex:0 0 36px;
    border-radius:10px;
    background-image:url('../icons/icon-512.png');
    background-size:cover;
    background-position:center;
    box-shadow:0 0 14px rgba(201,173,132,.35);
}

/* Southbound logo: the SB mark (brand/sb-mark.svg) plus the squared
   heavy wordmark from the brand board. Used by every header. */
.brand-mark{
    display:block;
    height:34px;
    width:auto;
    flex:0 0 auto;
}

.brand-word{
    font-family:var(--font-brand);
    font-weight:800;
    font-style:normal;
    text-transform:uppercase;
    letter-spacing:.02em;
    line-height:1;
    color:var(--cream);
}

.eos-logo .brand-word{
    font-size:1.2rem;
}

.nav-links{
    display:flex;
    align-items:center;
    gap:3px;
    min-width:0;
}

.nav-links > a,
.nav-dropdown-trigger,
.nav-dropdown > summary{
    appearance:none;
    -webkit-appearance:none;
    border:0;
    font-family:inherit;
}

.eos-navbar .eos-nav-item,
.eos-navbar .eos-dropdown-trigger{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    min-height:40px;
    padding:9px 12px;
    border-radius:10px;
    color:#C3C9BD;
    background:transparent;
    font-size:.92rem;
    font-weight:650;
    line-height:1;
    text-decoration:none;
    white-space:nowrap;
    cursor:pointer;
    transition:background .2s ease,color .2s ease;
}

.eos-navbar .eos-nav-item:hover,
.eos-navbar .eos-dropdown-trigger:hover,
.eos-navbar .eos-dropdown[open] > .eos-dropdown-trigger{
    background:rgba(255,255,255,.055);
    color:#fff;
}

.eos-navbar .eos-dropdown-trigger.section-active{
    background:rgba(201,173,132,.14);
    color:#fff;
}

.eos-navbar .eos-nav-item.active{
    background:#C9AD84;
    color:var(--on-primary);
}

/* Nav items get [hidden] toggled by js/loadHeader.js based on
   account entitlements (see js/navAccess.js) -- .eos-dropdown,
   .eos-dropdown-menu and .eos-dropdown-link all set their own
   display below, and an author display rule always outranks the
   browser's native [hidden]{display:none} at equal specificity/
   origin. One blanket rule instead of chasing it per element. */
.eos-navbar [hidden]{
    display:none !important;
}

.eos-navbar .eos-dropdown{
    position:relative;
    display:block;
    flex:0 0 auto;
}

.eos-navbar .eos-dropdown > summary{
    list-style:none;
}

.eos-navbar .eos-dropdown > summary::-webkit-details-marker{
    display:none;
}

.eos-navbar .eos-chevron{
    display:inline-block;
    font-size:.72rem;
    opacity:.65;
    line-height:1;
    transform:translateY(-1px);
    transition:transform .2s ease;
}

.eos-navbar .eos-dropdown[open] .eos-chevron{
    transform:rotate(180deg) translateY(1px);
}

/* Important: menu is hidden until its dropdown is actually opened,
   via opacity/visibility rather than display, so open/close can
   animate smoothly instead of snapping on and off. */
.eos-navbar .eos-dropdown-menu{
    display:block;
    position:absolute;
    z-index:1100;
    top:calc(100% + 8px);
    left:50%;
    width:max-content;
    min-width:190px;
    padding:6px;
    transform:translateX(-50%) translateY(-6px);
    background:#1A2E23;
    border:1px solid rgba(255,255,255,.10);
    border-radius:14px;
    box-shadow:0 18px 42px rgba(0,0,0,.38);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .16s ease, transform .16s ease, visibility .16s;
}

.eos-navbar .eos-dropdown[open] > .eos-dropdown-menu{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateX(-50%) translateY(0);
}

.eos-navbar .eos-dropdown-menu::before{
    content:"";
    position:absolute;
    top:-5px;
    left:50%;
    width:9px;
    height:9px;
    transform:translateX(-50%) rotate(45deg);
    background:#1A2E23;
    border-left:1px solid rgba(255,255,255,.10);
    border-top:1px solid rgba(255,255,255,.10);
}

.eos-navbar .eos-dropdown-link{
    display:flex;
    align-items:center;
    width:100%;
    min-height:38px;
    padding:9px 11px;
    border-radius:9px;
    color:#E3DDD0;
    background:transparent;
    font-size:.90rem;
    font-weight:600;
    line-height:1.2;
    text-decoration:none;
    white-space:nowrap;
    transition:background .18s ease,color .18s ease;
}

.eos-navbar .eos-dropdown-link:hover,
.eos-navbar .eos-dropdown-link.active{
    background:rgba(201,173,132,.13);
    color:#fff;
}

.nav-right{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:10px;
    flex:0 0 auto;
    white-space:nowrap;
}

.search-btn{
    width:40px;
    height:40px;
    border:none;
    border-radius:11px;
    background:rgba(255,255,255,.05);
    color:white;
    cursor:pointer;
    transition:.2s ease;
}

.search-btn:hover{
    background:#C9AD84;
}

.sync-status-btn{
    display:inline-flex;
    align-items:center;
    gap:6px;
    min-height:40px;
    padding:8px 12px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:999px;
    background:rgba(255,255,255,.04);
    color:#C3C9BD;
    font-size:.76rem;
    font-weight:600;
    cursor:pointer;
    transition:.2s ease;
}

.sync-status-btn:hover{
    border-color:#C9AD84;
    color:white;
}

.sync-status-btn.sync-syncing{
    opacity:.7;
    cursor:default;
}

.sync-status-btn.sync-error{
    border-color:#EF4444;
    color:#EF4444;
}

.sync-status-btn.sync-error:hover{
    background:rgba(239,68,68,.12);
}

#user-name{
    max-width:105px;
    overflow:hidden;
    text-overflow:ellipsis;
    color:#C3C9BD;
    font-weight:600;
    font-size:.92rem;
}

#loginBtn,
#logoutBtn{
    padding:10px 16px;
    border:none;
    border-radius:11px;
    background:#C9AD84;
    color:var(--on-primary);
    font-weight:650;
    cursor:pointer;
    white-space:nowrap;
    transition:.2s ease;
}

#loginBtn:hover,
#logoutBtn:hover{
    transform:translateY(-1px);
    box-shadow:0 10px 25px rgba(201,173,132,.30);
}

@media (max-width:1200px){
    .navbar{
        gap:14px;
        padding:13px 16px;
    }

    .nav-left{
        gap:16px;
    }

    .eos-navbar .eos-nav-item,
    .eos-navbar .eos-dropdown-trigger{
        padding-left:9px;
        padding-right:9px;
        font-size:.86rem;
    }

    #user-name{
        display:none;
    }
}

/* The coach nav has seven menus; on laptop widths the sync pill's
   text and then the wordmark give way so the menus never slide
   under the right-hand controls. The pill keeps its icon + title. */
@media (max-width:1440px){
    .sync-status-btn #syncStatusText{
        display:none;
    }
}

@media (max-width:1120px){
    .eos-logo .brand-word{
        display:none;
    }
}

/* ==========================================================
   MOBILE APP SHELL

   Below 900px the desktop dropdown navbar gives way to a
   Fitbod-style shell: a slim top bar (just the logo + account/
   sync controls) plus a fixed 4-tab bottom bar for Today/Train/
   Health/More. A page whose "tab" actually covers several real
   pages (Train, Health) also gets a horizontally-scrolling pill
   row under the top bar to move between its siblings, since
   those pages are no longer reachable via the (now hidden)
   dropdown menu. Both the bottom bar and the pill row are built
   and injected by loadHeader.js, not present in each page's own
   markup.
========================================================== */

@media (max-width:900px){
    /* The desktop dropdown navbar is fully replaced on mobile by
       .eos-mobile-topbar below -- not just restyled, since account/
       sync controls moved to the More page and the remaining three
       actions (quick add, logo, search) don't fit that structure. */
    .eos-navbar{
        display:none;
    }

    body{
        padding-bottom:calc(64px + env(safe-area-inset-bottom));
    }

    /* .grid.eos-dashboard-grid (not just .eos-dashboard-grid) --
       the generic .grid{display:grid} rule sits much further down
       this file at equal specificity, so it was winning on source
       order and this never actually hid on mobile. */
    .grid.eos-dashboard-grid{
        display:none;
    }
}

.eos-mobile-topbar,
.eos-search-overlay{
    display:none;
}

@media (max-width:900px){

    .eos-mobile-topbar{
        display:grid;
        grid-template-columns:44px 1fr 44px;
        align-items:center;
        width:min(1450px,94%);
        margin:14px auto;
        position:sticky;
        top:0;
        z-index:1200;
        padding:10px 14px;
        background:rgba(17,31,24,.82);
        backdrop-filter:blur(18px);
        -webkit-backdrop-filter:blur(18px);
        border:1px solid rgba(255,255,255,.08);
        border-radius:22px;
        box-shadow:0 15px 45px rgba(0,0,0,.28);
    }

    .eos-mobile-icon-btn{
        width:40px;
        height:40px;
        display:flex;
        align-items:center;
        justify-content:center;
        border:1px solid rgba(255,255,255,.14);
        border-radius:50%;
        background:rgba(255,255,255,.05);
        color:var(--text);
        cursor:pointer;
        transition:background-color .15s ease,border-color .15s ease;
    }

    .eos-mobile-icon-btn:active{
        background:rgba(201,173,132,.16);
        border-color:var(--primary);
    }

    .eos-mobile-quickadd{
        position:relative;
        justify-self:start;
    }

    .eos-mobile-topbar-logo{
        justify-self:center;
        display:flex;
        align-items:center;
        gap:9px;
        color:white;
        text-decoration:none;
        font-size:1.15rem;
        font-weight:800;
        white-space:nowrap;
    }

    .eos-mobile-topbar-logo .brand-mark{
        height:28px;
    }

    #mobileSearchBtn{
        justify-self:end;
    }

    .eos-mobile-quickadd-menu{
        position:absolute;
        top:calc(100% + 10px);
        left:0;
        z-index:1250;
        min-width:200px;
        padding:6px;
        background:#1A2E23;
        border:1px solid rgba(255,255,255,.10);
        border-radius:14px;
        box-shadow:0 18px 42px rgba(0,0,0,.38);
        opacity:0;
        visibility:hidden;
        transform:translateY(-6px);
        pointer-events:none;
        transition:opacity .16s ease,transform .16s ease,visibility .16s;
    }

    .eos-mobile-quickadd.open .eos-mobile-quickadd-menu{
        opacity:1;
        visibility:visible;
        transform:translateY(0);
        pointer-events:auto;
    }

    .eos-mobile-quickadd-link{
        display:flex;
        align-items:center;
        gap:10px;
        padding:11px 12px;
        border-radius:9px;
        color:#E3DDD0;
        font-size:.92rem;
        font-weight:650;
        text-decoration:none;
        white-space:nowrap;
    }

    .eos-mobile-quickadd-link:active{
        background:rgba(201,173,132,.13);
        color:#fff;
    }

    .eos-mobile-quickadd-icon{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        width:28px;
        height:28px;
        border-radius:8px;
        flex-shrink:0;
        background:color-mix(in srgb, currentColor 16%, transparent);
    }

    .eos-mobile-quickadd-icon .ui-icon{
        width:15px;
        height:15px;
    }

    .eos-search-overlay{
        display:flex;
        flex-direction:column;
        position:fixed;
        inset:0;
        z-index:4000;
        padding:14px 14px calc(14px + env(safe-area-inset-bottom));
        background:var(--bg);
        opacity:0;
        visibility:hidden;
        transform:translateY(-8px);
        transition:opacity .2s ease,transform .2s ease,visibility .2s;
    }

    .eos-search-overlay.open{
        opacity:1;
        visibility:visible;
        transform:translateY(0);
    }

    .eos-search-bar{
        flex:0 0 auto;
        display:flex;
        align-items:center;
        gap:10px;
        padding:12px 14px;
        margin-top:env(safe-area-inset-top);
        background:var(--surface);
        border:1px solid var(--border);
        border-radius:14px;
    }

    .eos-search-bar-icon{
        flex-shrink:0;
        color:var(--muted);
    }

    .eos-search-input{
        flex:1;
        min-width:0;
        background:none;
        border:none;
        outline:none;
        color:var(--text);
        font-size:16px;
        font-family:inherit;
    }

    .eos-search-input::placeholder{
        color:var(--muted);
    }

    .eos-search-close{
        flex-shrink:0;
        width:30px;
        height:30px;
        display:flex;
        align-items:center;
        justify-content:center;
        border:none;
        border-radius:50%;
        background:rgba(255,255,255,.06);
        color:var(--text-secondary);
        cursor:pointer;
    }

    .eos-search-results{
        flex:1;
        overflow-y:auto;
        margin-top:14px;
        display:flex;
        flex-direction:column;
        gap:4px;
    }

    .eos-search-result{
        display:flex;
        align-items:center;
        gap:14px;
        padding:14px 12px;
        border-radius:12px;
        color:var(--text);
        text-decoration:none;
        font-size:15px;
        font-weight:650;
    }

    .eos-search-result:active{
        background:var(--surface-light);
    }

    .eos-search-result-icon{
        flex-shrink:0;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        width:34px;
        height:34px;
        border-radius:10px;
        background:color-mix(in srgb, currentColor 16%, transparent);
    }

    .eos-search-result-icon .ui-icon{
        width:18px;
        height:18px;
    }

    .eos-search-empty{
        padding:14px 12px;
        color:var(--muted);
        font-size:14px;
    }

}

/* ==========================================================
   SIGN-IN PROMPT

   Unlike the bottom bar/search above, this isn't mobile-only --
   guests land on every form factor. Shown once per browser
   session (loadHeader.js gates it via sessionStorage), on
   whichever page happens to load first.
========================================================== */

.eos-signin-overlay{
    position:fixed;
    inset:0;
    z-index:4500;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    background:rgba(4,10,7,.72);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    opacity:0;
    transition:opacity .2s ease;
}

.eos-signin-overlay.open{
    opacity:1;
}

.eos-signin-modal{
    width:100%;
    max-width:400px;
    background:linear-gradient(160deg,rgba(26,42,33,.98),rgba(14,26,20,.98));
    border:1px solid var(--border);
    border-radius:22px;
    padding:30px 26px;
    text-align:center;
    box-shadow:0 30px 70px rgba(0,0,0,.5);
    transform:translateY(10px);
    transition:transform .2s ease;
}

.eos-signin-overlay.open .eos-signin-modal{
    transform:translateY(0);
}

.eos-signin-icon{
    width:56px;
    height:56px;
    margin:0 auto 16px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:16px;
    background:rgba(201,173,132,.14);
    color:var(--primary);
}

.eos-signin-icon .ui-icon{
    width:26px;
    height:26px;
}

.eos-signin-modal h2{
    font-size:19px;
    margin-bottom:10px;
}

.eos-signin-modal p{
    color:var(--text-secondary);
    font-size:14px;
    line-height:1.6;
    margin-bottom:24px;
}

.eos-signin-actions{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.eos-signin-btn{
    padding:13px 18px;
    border-radius:12px;
    font-weight:700;
    font-size:14.5px;
    cursor:pointer;
    border:none;
    font-family:inherit;
    transition:.2s ease;
}

.eos-signin-btn.primary{
    background:var(--primary);
    color:#0f2019;
}

.eos-signin-btn.primary:hover{
    background:var(--primary-light);
}

.eos-signin-btn.primary:disabled{
    opacity:.7;
    cursor:default;
}

.eos-signin-btn.secondary{
    background:transparent;
    border:1px solid var(--border);
    color:var(--text-secondary);
}

.eos-signin-btn.secondary:hover{
    border-color:rgba(255,255,255,.2);
    color:var(--text);
}

.eos-bottomnav{
    display:none;
}

.eos-subnav{
    display:none;
}

@media (max-width:900px){
    .eos-bottomnav{
        display:flex;
        align-items:stretch;
        position:fixed;
        left:0;
        right:0;
        bottom:0;
        z-index:1300;
        padding:6px 6px calc(6px + env(safe-area-inset-bottom));
        background:rgba(15,32,25,.94);
        backdrop-filter:blur(20px);
        -webkit-backdrop-filter:blur(20px);
        border-top:1px solid rgba(255,255,255,.08);
        box-shadow:0 -12px 30px rgba(0,0,0,.35);
    }

    .eos-bottomnav-item{
        flex:1 1 0;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:3px;
        padding:7px 2px;
        border-radius:14px;
        color:var(--muted);
        text-decoration:none;
        font-size:.66rem;
        font-weight:700;
        letter-spacing:.01em;
        transition:color .15s ease,background-color .15s ease;
    }

    .eos-bottomnav-item .ui-icon{
        width:22px;
        height:22px;
    }

    .eos-bottomnav-item.active{
        color:var(--tab-color, var(--primary));
        background:color-mix(in srgb, var(--tab-color, var(--primary)) 16%, transparent);
    }

    .eos-subnav{
        display:flex;
        gap:8px;
        width:min(1450px,94%);
        margin:0 auto 22px;
        padding:2px;
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
        scrollbar-width:none;
    }

    .eos-subnav::-webkit-scrollbar{
        display:none;
    }

    .eos-subnav-link{
        flex:0 0 auto;
        padding:9px 16px;
        border-radius:999px;
        background:rgba(255,255,255,.05);
        border:1px solid rgba(255,255,255,.08);
        color:var(--text-secondary);
        font-size:.84rem;
        font-weight:650;
        text-decoration:none;
        white-space:nowrap;
        transition:background-color .15s ease,border-color .15s ease,color .15s ease;
    }

    .eos-subnav-link.active{
        background:var(--primary);
        border-color:var(--primary);
        color:var(--on-primary);
    }
}

/* Below 900px the dropdown nav-links are hidden entirely (see the
   max-width:900px block above) in favor of the bottom tab bar, so
   the old sub-560px fallback layout for them no longer applies. */

/* ==========================================================
   HERO
========================================================== */

.hero{

    display:grid;

    grid-template-columns:1.7fr .9fr;

    gap:40px;

    align-items:center;

    margin-bottom:55px;

    position:relative;

    overflow:hidden;

}

.hero::before{

    content:"";
    position:absolute;
    top:-100px;
    right:-60px;
    width:340px;
    height:340px;
    background-image:url('../icons/icon-512.png');
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center;
    opacity:.045;
    mix-blend-mode:screen;
    filter:saturate(.9) brightness(1.15);
    pointer-events:none;

}

.hero-left{

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.welcome{

    display:inline-flex;

    align-items:center;

    gap:8px;

    width:max-content;

    padding:8px 16px;

    margin-bottom:20px;

    border-radius:999px;

    background:rgba(201,173,132,.10);

    border:1px solid rgba(201,173,132,.20);

    color:#C9AD84;

    font-weight:700;

    font-size:.9rem;

}

.hero h1{

    margin-bottom:20px;

    font-size:3.2rem;

    font-weight:900;

    line-height:1.05;

    letter-spacing:-1px;

}

.hero-text{

    max-width:600px;

    color:#C3C9BD;

    font-size:1.08rem;

    line-height:1.8;

    margin-bottom:30px;

}

.hero-actions{

    display:flex;

    gap:16px;

    flex-wrap:wrap;

}
.primary-btn{

    display:inline-block;

    text-decoration:none;

    padding:14px 26px;

    border:none;

    border-radius:14px;

    background:linear-gradient(
        135deg,
        #C9AD84,
        #2D7FFF
    );

    color:var(--on-primary);

    font-weight:700;

    cursor:pointer;

    transition:.3s;

    box-shadow:0 12px 30px rgba(201,173,132,.30);

}

.primary-btn:hover{

    transform:translateY(-3px);

    box-shadow:0 18px 40px rgba(201,173,132,.40);

}

.secondary-btn{

    display:inline-block;

    text-decoration:none;

    padding:14px 26px;

    border-radius:14px;

    border:1px solid rgba(255,255,255,.10);

    background:rgba(255,255,255,.05);

    color:white;

    font-weight:700;

    cursor:pointer;

    transition:.3s;

}

.secondary-btn:hover{

    background:rgba(255,255,255,.08);

}

.hero-right{

    display:flex;

    justify-content:flex-end;

}
.goal-card{

    position:relative;

    overflow:hidden;

    width:100%;

    padding:36px;

    border-radius:28px;

    background:linear-gradient(
        135deg,
        #2E4A3A 0%,
        #1F3A2C 55%,
        #173226 100%
    );

    color:white;

    box-shadow:0 28px 60px rgba(0,0,0,.35);

    border:1px solid rgba(201,173,132,.25);

    transition:.35s;

}

.goal-card:hover{

    transform:translateY(-8px);

    box-shadow:0 38px 80px rgba(166,138,98,.45);

}

.goal-card::before{

    content:"";

    position:absolute;

    top:-120px;

    right:-90px;

    width:240px;

    height:240px;

    border-radius:50%;

    background:rgba(255,255,255,.10);

}

.goal-card span{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:8px 14px;

    border-radius:999px;

    background:rgba(255,255,255,.15);

    font-size:.82rem;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.5px;

}

.goal-card h2{

    margin-top:24px;

    margin-bottom:12px;

    font-size:2rem;

}

.goal-card p{

    color:rgba(255,255,255,.80);

    margin-bottom:8px;

}
.goal-card h1{

    font-size:3.6rem;

    font-weight:900;

    line-height:1;

    letter-spacing:-2px;

    margin-bottom:24px;

}

.goal-divider{

    width:100%;

    height:1px;

    margin:24px 0;

    background:rgba(255,255,255,.20);

}

.goal-stats{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:24px;

}

.goal-stats small{

    display:block;

    margin-bottom:8px;

    color:rgba(255,255,255,.75);

    font-size:.8rem;

    text-transform:uppercase;

    letter-spacing:.6px;

}

.goal-stats strong{

    font-size:1.2rem;

    font-weight:800;

    color:white;

}

@media (max-width:1200px){

    .hero{

        grid-template-columns:1fr;

    }

    .hero-right{

        justify-content:flex-start;

    }

}

@media (max-width:700px){

    .hero{

        gap:30px;

    }

    .hero h1{

        font-size:2.4rem;

    }

    .goal-card h1{

        font-size:2.9rem;

    }

    .goal-stats{

        grid-template-columns:1fr;

        gap:16px;

    }

}
/* ==========================================================
   QUICK STATS
========================================================== */

.stats{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));

    gap:24px;

    margin-bottom:55px;

}

.stat-card{

    position:relative;

    overflow:hidden;

    padding:28px;

    border-radius:24px;

    background:linear-gradient(
        180deg,
        rgba(24,41,31,.95),
        rgba(17,31,24,.95)
    );

    border:1px solid rgba(255,255,255,.08);

    transition:.3s;

    box-shadow:0 12px 35px rgba(0,0,0,.20);

}

.stat-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:4px;

    background:#C9AD84;

    transform:scaleX(0);

    transform-origin:left;

    transition:.3s;

}

.stat-card:hover{

    transform:translateY(-8px);

    border-color:rgba(201,173,132,.25);

    box-shadow:0 24px 55px rgba(0,0,0,.30);

}

.stat-card:hover::before{

    transform:scaleX(1);

}
.stat-card span{

    display:block;

    margin-bottom:14px;

    color:#8E9A89;

    font-size:.85rem;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.7px;

}

.stat-card h2{

    font-size:2.8rem;

    font-weight:900;

    line-height:1;

    letter-spacing:-1px;

    color:white;

    margin-bottom:10px;

}

.stat-card p{

    color:#C3C9BD;

    line-height:1.6;

}

.stat-card:nth-child(1)::before{

    background:linear-gradient(
        90deg,
        #C9AD84,
        #7DD3FC
    );

}

.stat-card:nth-child(2)::before{

    background:linear-gradient(
        90deg,
        #22C55E,
        #4ADE80
    );

}

.stat-card:nth-child(3)::before{

    background:linear-gradient(
        90deg,
        #F59E0B,
        #FBBF24
    );

}

.stat-card:nth-child(4)::before{

    background:linear-gradient(
        90deg,
        #EF4444,
        #FB7185
    );

}
/* ==========================================================
   AI COACH
========================================================== */

.coach-card{

    position:relative;

    overflow:hidden;

    padding:38px;

    margin-bottom:55px;

    border-radius:30px;

    background:linear-gradient(
        180deg,
        rgba(21,36,28,.96),
        rgba(13,26,20,.96)
    );

    border:1px solid rgba(201,173,132,.15);

    box-shadow:0 24px 60px rgba(0,0,0,.30);

}

.coach-card::before{

    content:"";

    position:absolute;

    top:-180px;

    right:-140px;

    width:360px;

    height:360px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(201,173,132,.18),
        transparent 70%
    );

}

.coach-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:34px;

}

.coach-label{

    color:#C9AD84;

    font-size:.85rem;

    font-weight:800;

    letter-spacing:1px;

    text-transform:uppercase;

    margin-bottom:10px;

}

.coach-header h2{

    font-size:2.2rem;

    font-weight:800;

}

.coach-status{

    display:flex;

    align-items:center;

    gap:8px;

    padding:10px 18px;

    border-radius:999px;

    background:rgba(34,197,94,.14);

    border:1px solid rgba(34,197,94,.30);

    color:#4ADE80;

    font-weight:700;

    font-size:.85rem;

}

.coach-status::before{

    content:"";

    width:10px;

    height:10px;

    border-radius:50%;

    background:#22C55E;

    box-shadow:0 0 12px #22C55E;

}
.coach-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:18px;

    margin-bottom:30px;

}

.coach-stat{

    padding:24px;

    border-radius:20px;

    text-align:center;

    background:rgba(255,255,255,.03);

    border:1px solid rgba(255,255,255,.06);

    transition:.3s;

}

.coach-stat:hover{

    transform:translateY(-6px);

    background:rgba(201,173,132,.08);

    border-color:rgba(201,173,132,.25);

}

.coach-stat span{

    display:block;

    color:#8E9A89;

    font-size:.85rem;

    text-transform:uppercase;

    letter-spacing:.6px;

    margin-bottom:12px;

}

.coach-stat strong{

    font-size:1.7rem;

    font-weight:800;

    color:white;

}

.coach-message{

    padding:24px 28px;

    margin-bottom:28px;

    border-radius:20px;

    background:rgba(255,255,255,.03);

    border-left:4px solid #C9AD84;

}

.coach-message h3{

    margin-bottom:14px;

}

.coach-message ul{

    padding-left:20px;

}

.coach-message li{

    margin-bottom:10px;

    color:#C3C9BD;

    line-height:1.7;

}

.coach-message li a{

    color:inherit;

    text-decoration:underline;

    text-decoration-color:rgba(201,173,132,.5);

    text-underline-offset:3px;

    transition:.2s;

}

.coach-message li a:hover{

    color:#C9AD84;

}
.coach-button{

    display:block;

    text-align:center;

    text-decoration:none;

    width:100%;

    padding:18px;

    border:none;

    border-radius:18px;

    background:linear-gradient(
        135deg,
        #C9AD84,
        #2D7FFF
    );

    color:var(--on-primary);

    font-size:1rem;

    font-weight:800;

    cursor:pointer;

    transition:.3s;

    box-shadow:0 16px 40px rgba(201,173,132,.30);

}

.coach-button:hover{

    transform:translateY(-3px);

    box-shadow:0 22px 50px rgba(201,173,132,.40);

}

@media (max-width:900px){

    .coach-grid{

        grid-template-columns:repeat(2,1fr);

    }

}

@media (max-width:700px){

    .coach-grid{

        grid-template-columns:1fr;

    }

}
/* ==========================================================
   DASHBOARD APPS
========================================================== */

.grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:28px;

    margin-bottom:55px;

}

.card{

    position:relative;

    overflow:hidden;

    display:flex;

    flex-direction:column;

    gap:18px;

    padding:32px;

    border-radius:28px;

    background:linear-gradient(
        180deg,
        rgba(24,41,31,.95),
        rgba(14,27,21,.95)
    );

    border:1px solid rgba(255,255,255,.08);

    text-decoration:none;

    color:white;

    transition:.35s;

    box-shadow:0 18px 40px rgba(0,0,0,.22);

}

.card::before{

    content:"";

    position:absolute;

    inset:0;

    background:radial-gradient(
        circle at top right,
        rgba(201,173,132,.12),
        transparent 60%
    );

    opacity:0;

    transition:.35s;

}

.card::after{

    content:"→";

    position:absolute;

    right:28px;

    bottom:24px;

    font-size:1.3rem;

    color:rgba(255,255,255,.20);

    transition:.3s;

}

.card:hover{

    transform:translateY(-10px);

    border-color:rgba(201,173,132,.25);

    box-shadow:0 28px 60px rgba(0,0,0,.35);

}

.card:hover::before{

    opacity:1;

}

.card:hover::after{

    color:#C9AD84;

    transform:translateX(6px);

}
.card-icon{

    display:flex;

    align-items:center;

    justify-content:center;

    width:72px;

    height:72px;

    border-radius:22px;

    font-size:1.75rem;

    color:var(--primary);

    background:linear-gradient(
        135deg,
        rgba(201,173,132,.18),
        rgba(201,173,132,.08)
    );

    border:1px solid rgba(201,173,132,.18);

    transition:.35s;

}

.card:hover .card-icon{

    transform:scale(1.08) rotate(-6deg);

    box-shadow:0 12px 30px rgba(201,173,132,.22);

}

.card h2{

    font-size:1.55rem;

    font-weight:800;

    color:white;

    letter-spacing:-.5px;

}

.card p{

    color:#C3C9BD;

    line-height:1.75;

    flex:1;

}

.card:hover h2{

    color:#C9AD84;

}

.card:nth-child(1) .card-icon{

    background:linear-gradient(135deg,#A68A62,#B89A70);

}

.card:nth-child(2) .card-icon{

    background:linear-gradient(135deg,#22C55E,#4ADE80);

}

.card:nth-child(3) .card-icon{

    background:linear-gradient(135deg,#F59E0B,#FBBF24);

}
.card:nth-child(4) .card-icon{

    background:linear-gradient(135deg,#8B5CF6,#A855F7);

}

.card:nth-child(5) .card-icon{

    background:linear-gradient(135deg,#EC4899,#F472B6);

}

.card:nth-child(6) .card-icon{

    background:linear-gradient(135deg,#06B6D4,#22D3EE);

}

@media (max-width:700px){

    .grid{

        grid-template-columns:1fr;

    }

}
/* ==========================================================
   TRAINING PANELS
========================================================== */

.training-panel{

    position:relative;

    overflow:hidden;

    margin-bottom:55px;

    padding:34px;

    border-radius:30px;

    background:linear-gradient(
        180deg,
        rgba(21,36,28,.97),
        rgba(13,25,19,.97)
    );

    border:1px solid rgba(255,255,255,.08);

    box-shadow:0 22px 55px rgba(0,0,0,.28);

}

.training-panel::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:5px;

    background:linear-gradient(
        90deg,
        #C9AD84,
        #64C7FF
    );

}

.panel-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:30px;

}

.panel-header h2{

    font-size:2rem;

    font-weight:800;

}

.training-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));

    gap:22px;

}
.training-card{

    position:relative;

    overflow:hidden;

    padding:24px;

    border-radius:22px;

    background:linear-gradient(
        180deg,
        rgba(255,255,255,.04),
        rgba(255,255,255,.02)
    );

    border:1px solid rgba(255,255,255,.06);

    transition:.3s;

}

.training-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:4px;

    height:100%;

    background:#C9AD84;

    transform:scaleY(0);

    transform-origin:top;

    transition:.3s;

}

.training-card:hover{

    transform:translateY(-8px);

    border-color:rgba(201,173,132,.25);

    box-shadow:0 18px 35px rgba(0,0,0,.25);

}

.training-card:hover::before{

    transform:scaleY(1);

}

.training-card span{

    display:inline-block;

    margin-bottom:14px;

    padding:6px 12px;

    border-radius:999px;

    background:rgba(201,173,132,.10);

    color:#C9AD84;

    font-size:.82rem;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.6px;

}

.training-card h3{

    margin-bottom:10px;

    font-size:1.45rem;

    font-weight:800;

    color:white;

}

.training-card p{

    color:#C3C9BD;

    line-height:1.7;

}
/* ==========================================================
   SHOE PANEL
========================================================== */

.shoe-panel{

    position:relative;

    overflow:hidden;

    margin-bottom:55px;

    padding:34px;

    border-radius:30px;

    background:linear-gradient(
        180deg,
        rgba(21,36,28,.97),
        rgba(13,25,19,.97)
    );

    border:1px solid rgba(255,255,255,.08);

    box-shadow:0 22px 55px rgba(0,0,0,.28);

}

.shoe-panel::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:5px;

    background:linear-gradient(
        90deg,
        #22C55E,
        #4ADE80
    );

}

.progress-bar{

    width:100%;

    height:8px;

    margin-top:18px;

    border-radius:999px;

    overflow:hidden;

    background:rgba(255,255,255,.08);

}

.progress-fill{

    height:100%;

    border-radius:999px;

    background:linear-gradient(
        90deg,
        #22C55E,
        #4ADE80
    );

    transition:width .6s ease;

}

.training-panel:hover,
.shoe-panel:hover{

    box-shadow:0 28px 70px rgba(0,0,0,.34);

}
/* ==========================================================
   ANIMATIONS & RESPONSIVE
========================================================== */

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.hero{

    animation:fadeUp .5s ease forwards;

}

.stats{

    animation:fadeUp .65s ease forwards;

}

.coach-card{

    animation:fadeUp .8s ease forwards;

}

.grid{

    animation:fadeUp .95s ease forwards;

}

.training-panel{

    animation:fadeUp 1.1s ease forwards;

}

.shoe-panel{

    animation:fadeUp 1.25s ease forwards;

}

@media (max-width:1200px){

    .hero{

        grid-template-columns:1fr;

        gap:30px;

    }

    .hero-right{

        justify-content:flex-start;

    }

}

/* .navbar/.nav-left/.nav-links used to get re-stacked here too --
   a leftover duplicate of the rules in the MOBILE APP SHELL block
   above that fought with them for the cascade. That block now owns
   the navbar's mobile layout; this one keeps only what's actually
   unique to it. */
@media (max-width:900px){

    .coach-grid{

        grid-template-columns:repeat(2,1fr);

    }

}

@media (max-width:700px){

    .container{

        width:94%;

    }

    .hero h1{

        font-size:2.4rem;

    }

    .stats{

        grid-template-columns:1fr;

    }

    .grid{

        grid-template-columns:1fr;

    }

    .training-grid{

        grid-template-columns:1fr;

    }

    .coach-grid{

        grid-template-columns:1fr;

    }

    .goal-stats{

        grid-template-columns:1fr;

    }

}

@media (max-width:500px){

    .goal-card,
    .coach-card,
    .training-panel,
    .shoe-panel{

        padding:24px;

    }

    .card{

        padding:24px;

    }

    .card-icon{

        width:60px;

        height:60px;

        font-size:1.6rem;

    }

    .hero-actions{

        flex-direction:column;

    }

    .primary-btn,
    .secondary-btn{

        width:100%;

    }

}

/* ==========================================
   Shared icons (js/icons.js) -- inline SVGs
   used in place of raw emoji/ASCII symbols.
   Sized in em by default so an icon matches
   the font-size of whatever it sits inside;
   a context that needs a specific pixel size
   can still set width/height directly.
========================================== */

.ui-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:1em;
    height:1em;
    flex-shrink:0;
    vertical-align:-0.125em;
}

.ui-icon svg{
    display:block;
    width:100%;
    height:100%;
}