/* ==========================================================
   My Workout AI  -  site wide CSS
   Plain CSS. No build step, no Tailwind.
   Save the file and refresh - the change is live immediately.
   ========================================================== */


/* ----------------------------------------------------------
   1. Reset - clear the browser default margin and padding
   ---------------------------------------------------------- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Form controls do not inherit the page font on their own - the
   browser hands them its own. Without this line every button and
   input on the site quietly uses the wrong typeface. */
button,
input,
select,
textarea {
    font-family: inherit;
    font-size: inherit;
}


/* ----------------------------------------------------------
   2. Every colour in one place
      Change them here and the whole site follows
   ---------------------------------------------------------- */
:root {
    /* ---- backgrounds and text ---- */
    --bg: #0a0a12;          /* page background - a deep blue black */
    --bg-soft: #0f0f1a;     /* slightly lighter, for alternate sections */
    --card: #15151f;        /* card and box background */
    --card-hi: #1c1c2a;     /* a touch lighter on hover */
    --line: #272736;        /* border colour */
    --text: #ecebf5;        /* normal text */
    --muted: #9391ab;       /* softer text, used for paragraphs */

    /* ---- BRAND COLOUR ----
       The whole site takes its colour from here.
       To switch, change just these four lines. */
    --brand: #ff5a1f;                       /* orange - taken from the logo */
    --brand-dark: #e5480f;                  /* darker, for hover */
    --brand-soft: rgba(255, 90, 31, 0.15);  /* faint background wash */
    --on-brand: #ffffff;                    /* text colour on top of brand */

    --brand-2: #ffc24b;     /* secondary amber, only used in gradients */

    /* ---- Ready made palettes ----
       Copy any line below into the four values above:

       VIOLET : #7c5cff | #6a49f2 | rgba(124,92,255,.15) | #ffffff
       CYAN   : #22d3ee | #0fb9d6 | rgba(34,211,238,.15) | #06212a
       LIME   : #c6f432 | #a8d61b | rgba(198,244,50,.12) | #10130a
       PINK   : #ff4d8d | #ea3576 | rgba(255,77,141,.15) | #ffffff
    */

    --radius: 14px;         /* how rounded the corners are */
    --max: 1180px;          /* maximum content width */
}


/* ----------------------------------------------------------
   3. Body and base text
   ---------------------------------------------------------- */
body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Inter', Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: 'Barlow Condensed', Arial, sans-serif;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
    display: block;
}

/* container keeps content centred and capped in width */
.container {
    width: 100%;
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 20px;
}


/* ----------------------------------------------------------
   4. Buttons - two kinds: filled and outlined
   ---------------------------------------------------------- */
.btn {
    position: relative;
    display: inline-block;
    padding: 13px 26px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    border: 1px solid transparent;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.25s;

    /* These four lines matter more than they look.

       A <button> is not a plain box - the browser gives it its own
       light background, its own font and its own text colour. On a
       dark page that made every outlined button turn into a white
       pill with white writing on it, so the text vanished.

       An <a class="btn"> never had the problem, which is why it only
       showed up on the settings and login forms. */
    background: transparent;
    color: var(--text);
    font-family: inherit;
    line-height: 1.25;

    text-align: center;
    text-decoration: none;
}

/* on hover a white shine sweeps across the button */
.btn::after {
    content: "";
    position: absolute;
    top: 0;
    left: -80%;
    width: 50%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.28), transparent);
    transform: skewX(-20deg);
    transition: left 0.55s ease;
}

.btn:hover::after {
    left: 130%;
}

.btn-fill {
    background: var(--brand);
    color: var(--on-brand);
    box-shadow: 0 6px 22px rgba(255, 90, 31, 0.32);
}

/* A dark button, for use on top of the orange CTA box.

   .cta-box has an orange gradient background, and .btn-fill paints an
   orange button - which on that box is orange on orange with only the
   shadow to separate them. Six CTA buttons across the site were
   carrying this class expecting it to fix that, and it had never been
   written, so all six were nearly invisible.

   Written after .btn-fill so it wins on order rather than by piling
   on specificity. */
.btn-fill:hover {
    background: var(--brand-dark);
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(255, 90, 31, 0.45);
}

.btn-dark {
    background: var(--bg);
    color: var(--text);
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.35);
}

.btn-dark:hover {
    background: #000000;
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

.btn-line {
    background: transparent;
    border-color: var(--line);
    color: var(--text);
}

.btn-line:hover {
    border-color: var(--brand);
    color: var(--brand);
}

.btn-sm {
    padding: 9px 20px;
    font-size: 13px;
}


/* ----------------------------------------------------------
   5. Header - the top bar (logo and menu)
      position:sticky keeps it pinned as you scroll
   ---------------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(11, 11, 13, 0.85);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid transparent;
    transition: border-color 0.25s, background 0.25s;
}

/* jQuery adds this class on scroll, which shows the line */
.site-header.scrolled {
    border-bottom-color: var(--line);
    background: rgba(11, 11, 13, 0.95);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 70px;
    gap: 20px;
}

/* ---- LOGO ----
   One image: logo-light.png, the real wordmark.

   It used to be an icon plus the words "Myworkout ai" typed out in
   HTML and coloured with CSS. That was a workaround, not a design -
   the artwork on file is black lettering drawn for a white page, and
   this site is #0a0a12, so the real logo could not be used. The text
   version was a rebuild of it that had to be kept in step by hand.

   logo-light.png is that same artwork with the ink flipped to white
   and the orange left alone, so the actual logo can be shown. */
.logo {
    display: inline-flex;
    align-items: center;
}

/* Width only. The height follows the artwork's own 873x173, so the
   lettering can never be squashed by a number typed here going out of
   step with the file. */
.logo img {
    display: block;
    width: 196px;
    height: auto;
    transition: transform 0.3s;
}

/* A gentle lift. The old rule rotated the icon six degrees, which
   reads as playful on a round mark and as crooked on a wordmark. */
.logo:hover img {
    transform: scale(1.04);
}

/* The stand-in, if the wordmark ever fails to load. jQuery swaps the
   src and adds this class - without a size of its own the square icon
   would be drawn 196px wide. */
.logo img.logo-svg {
    width: 44px;
    height: 44px;
    object-fit: contain;
}

/* Narrow phones: the header still has to hold a hamburger and, on
   some pages, a button. */
@media (max-width: 480px) {
    .logo img {
        width: 158px;
    }
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 28px;
    list-style: none;
}

.nav-links a {
    font-size: 14px;
    font-weight: 500;
    color: var(--muted);
    transition: color 0.2s;
}

.nav-links a:hover {
    color: var(--brand);
}

/* THE PAGE YOU ARE ON.

   Colour alone is a weak signal - it reads as "hovered" more than
   "you are here", and it disappears entirely for anyone who cannot
   separate orange from grey. The bar underneath is what actually
   says it, and it works without colour. */
.nav-links a.on {
    color: var(--text);
    font-weight: 600;
    position: relative;
}

.nav-links a.on::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -7px;
    height: 2px;
    border-radius: 2px;
    background: var(--brand);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* the mobile hamburger button - hidden on desktop */
.menu-btn {
    display: none;
    background: none;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 8px 10px;
    cursor: pointer;
}

.menu-btn span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--text);
    margin: 4px 0;
}

/* the menu that opens on mobile - hidden to begin with */
.mobile-menu {
    display: none;
    border-top: 1px solid var(--line);
    padding: 16px 20px 24px;
}

.mobile-menu ul {
    list-style: none;
}

.mobile-menu li {
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
}

/* On a phone there is no room for an underline under a full width
   row, so the marker moves to the left edge where it does not
   compete with anything. */
.mobile-menu a.on {
    display: block;
    color: var(--text);
    font-weight: 600;
    border-left: 3px solid var(--brand);
    padding-left: 11px;
    margin-left: -14px;
}

.mobile-menu .btn {
    margin-top: 16px;
    width: 100%;
    text-align: center;
}


/* ----------------------------------------------------------
   6. Hero - the large block at the top
   ---------------------------------------------------------- */
.hero {
    position: relative;
    padding: 80px 0 70px;
    overflow: hidden;
}

/* a soft glow behind the hero */
/* a real gym photo behind the hero.
   Paths are relative to this CSS file:
   public/css/style.css + ../images/hero.webp = public/images/hero.webp */
.hero-bg {
    position: absolute;
    z-index: 0;
    inset: 0;
    background-image: url('../images/hero.webp');
    background-position: center;
    background-size: cover;
    opacity: 0.30;
    /* fade the photo out towards the bottom */
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 40%, transparent 92%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 40%, transparent 92%);
    pointer-events: none;
}

.hero::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: -180px;
    left: 50%;
    width: 700px;
    height: 500px;
    background: var(--brand);
    filter: blur(130px);
    border-radius: 50%;
    pointer-events: none;
    /* roshni dheere dheere tez-halki hoti rahegi */
    animation: glowPulse 7s ease-in-out infinite;
}

/* a faint graph paper grid behind the hero */
.hero::after {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(circle at 50% 25%, #000 0%, transparent 72%);
    mask-image: radial-gradient(circle at 50% 25%, #000 0%, transparent 72%);
    pointer-events: none;
}

.hero-inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 60px;
    align-items: center;
}

/* the small badge, the "AI Powered" one */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border: 1px solid var(--line);
    background: var(--card);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--muted);
}

/* the small dot in the badge - it keeps pulsing */
.badge i {
    width: 7px;
    height: 7px;
    background: var(--brand);
    border-radius: 50%;
    animation: dotPulse 1.8s ease-in-out infinite;
}

.hero h1 {
    font-size: 68px;
    margin: 22px 0 18px;
}

/* the second half of the heading - a moving gradient */
.hero h1 em {
    font-style: normal;
    background: linear-gradient(100deg, #ffb37a, var(--brand) 35%, var(--brand-2) 65%, #ffb37a);
    background-size: 250% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: gradientMove 7s linear infinite;
}

.hero p.lead {
    color: var(--muted);
    font-size: 17px;
    max-width: 530px;
}

/* three small pills - "No equipment", "5-30 min" and so on */
.hero-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 13px;
    color: var(--text);
}

.chip b {
    color: var(--brand);
}

.hero-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 28px;
}

/* the three stats */
.hero-stats {
    display: flex;
    gap: 40px;
    margin-top: 40px;
    padding-top: 26px;
    border-top: 1px solid var(--line);
}

.hero-stats b {
    display: block;
    font-family: 'Barlow Condensed', Arial, sans-serif;
    font-size: 34px;
    color: var(--brand);
    line-height: 1;
}

.hero-stats small {
    font-size: 12px;
    color: var(--muted);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}


/* ==========================================================
   7. RIGHT SIDE OF THE HERO  -  a photo with floating cards over it

   How it is put together:
       .hero-visual   = the whole block, holding the space
         .hv-photo    = the large photo behind
         .hv-streak   = the small streak pill, top left
         .hv-ring     = the circular timer, top right
         .hv-mini     = today plan, bottom left
   ========================================================== */

.hero-visual {
    position: relative;
    height: 520px;
    /* tilts slightly in 3D as the mouse moves (driven by jQuery) */
    transform: perspective(1100px);
    transition: transform 0.3s ease-out;
}

/* ---- the large photo behind ---- */
.hv-photo {
    position: absolute;
    inset: 0;
    border: 1px solid rgba(255, 90, 31, 0.32);
    border-radius: 26px;
    overflow: hidden;
    /* three shadows: a deep one below, a thin light edge, and a glow */
    box-shadow:
        0 40px 90px rgba(0, 0, 0, 0.6),
        inset 0 0 0 1px rgba(255, 255, 255, 0.05),
        0 0 70px rgba(255, 90, 31, 0.18);
}

.hv-photo picture,
.hv-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hv-photo img {
    /* the photo zooms very slowly, which keeps it feeling alive.
       strength.webp is a bright image, so brightness is turned down
       to keep the cards on top readable. */
    filter: brightness(0.62) saturate(0.85) contrast(1.05);
    animation: slowZoom 20s ease-in-out infinite alternate;
}

/* a dark veil over the photo so the cards stay readable */
.hv-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(200deg, rgba(255, 90, 31, 0.34), transparent 58%),
        linear-gradient(0deg, rgba(10, 10, 18, 0.95) 5%, rgba(10, 10, 18, 0.35) 55%, rgba(10, 10, 18, 0.6));
    pointer-events: none;
}

/* ---- frosted glass card (used by all three) ---- */
.glass {
    position: absolute;
    background: rgba(18, 18, 30, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 18px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.5);
}

/* ---- top left: the streak pill ---- */
.hv-streak {
    top: -18px;
    left: 26px;
    padding: 10px 16px;
    border-radius: 999px;
    font-size: 13.5px;
    color: var(--muted);
    animation: floaty 7s ease-in-out infinite;
}

.hv-streak b {
    color: var(--text);
}

/* ---- top right: the circular timer ---- */
.hv-ring {
    top: 34px;
    right: -14px;
    width: 172px;
    padding: 16px 14px 14px;
    text-align: center;
    animation: floaty 6s ease-in-out infinite;
}

.hv-ring-wrap {
    position: relative;
    width: 104px;
    height: 104px;
    margin: 0 auto 10px;
}

.hv-ring-wrap svg {
    width: 100%;
    height: 100%;
}

/* the time shown in the middle of the ring */
.hv-ring-text {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.hv-ring-text b {
    font-family: 'Barlow Condensed', Arial, sans-serif;
    font-size: 30px;
    line-height: 1;
}

.hv-ring-text small {
    font-size: 10px;
    letter-spacing: 1.5px;
    color: var(--muted);
    margin-top: 2px;
}

.hv-ring-name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text);
}

.hv-ring-tag {
    display: block;
    font-size: 11px;
    color: var(--muted);
    margin-top: 4px;
    white-space: nowrap;
}

.hv-ring-tag b {
    color: var(--brand);
    font-weight: 600;
}

/* ---- bottom left: today plan ---- */
.hv-mini {
    left: -16px;
    bottom: 30px;
    width: 268px;
    padding: 17px 19px;
    animation: floaty 8s ease-in-out infinite;
}

.hv-mini-top {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 13px;
}

/* the small green dot meaning "in progress" */
.hv-live {
    width: 8px;
    height: 8px;
    background: #4ade80;
    border-radius: 50%;
    animation: dotPulse 1.8s ease-in-out infinite;
}

.hv-mini-top b {
    font-size: 14px;
}

/* the thin progress bar */
.hv-bar {
    height: 6px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 14px;
}

.hv-bar i {
    display: block;
    width: 50%;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--brand), var(--brand-2));
    transition: width 0.6s ease;
}

.hv-mini-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.hv-mini-stats b {
    display: block;
    font-family: 'Barlow Condensed', Arial, sans-serif;
    font-size: 24px;
    line-height: 1;
    color: var(--brand);
}

.hv-mini-stats small {
    font-size: 9.5px;
    letter-spacing: 1px;
    color: var(--muted);
}


/* ----------------------------------------------------------
   7b. The old plan card - unused right now,
       it will be reused on the plan page later
   ---------------------------------------------------------- */
.plan-card {
    position: relative;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
    /* the card floats gently up and down */
    animation: floaty 6s ease-in-out infinite;
}

/* a soft glow around the card */
.plan-card::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 21px;
    padding: 1px;
    background: linear-gradient(150deg, rgba(255, 90, 31, 0.55), transparent 45%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.plan-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
}

.plan-card-top h4 {
    font-size: 20px;
}

.plan-card-top small {
    display: block;
    font-family: 'Inter', Arial, sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: var(--muted);
    text-transform: none;
    letter-spacing: 0;
    margin-top: 2px;
}

.plan-card-top span {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--brand);
    border: 1px solid var(--brand);
    border-radius: 999px;
    padding: 4px 10px;
    white-space: nowrap;
}

.exercise-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 8px;
    margin: 0 -8px;
    border-radius: 9px;
    border-bottom: 1px solid var(--line);
    transition: background 0.2s, transform 0.2s;
}

/* on hover the row slides slightly to the right */
.exercise-row:hover {
    background: rgba(255, 90, 31, 0.08);
    transform: translateX(5px);
}

.exercise-row:last-child {
    border-bottom: 0;
}

.exercise-row .num {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-soft);
    border-radius: 10px;
    font-size: 17px;
}

.exercise-row .name {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
}

.exercise-row .sets {
    font-size: 13px;
    color: var(--muted);
}

/* the strip under the card - total time and calories */
.plan-card-foot {
    display: flex;
    justify-content: space-between;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
    font-size: 13px;
    color: var(--muted);
}

.plan-card-foot b {
    color: var(--brand);
}


/* ----------------------------------------------------------
   8. Shared section heading
   ---------------------------------------------------------- */
.section {
    padding: 80px 0;
}

.section-soft {
    background: var(--bg-soft);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.section-head {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 46px;
}

.section-head .kicker {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--brand);
}

.section-head h2 {
    font-size: 46px;
    margin: 12px 0 14px;
}

.section-head p {
    color: var(--muted);
}


/* ----------------------------------------------------------
   9. Card grid - used by features, steps and more
   ---------------------------------------------------------- */
.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.card {
    position: relative;
    overflow: hidden;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 26px;
    transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}

/* a faint shine sweeps across the card */
.card::before {
    content: "";
    position: absolute;
    top: -60%;
    left: -70%;
    width: 60%;
    height: 220%;
    background: linear-gradient(100deg, transparent, rgba(255, 90, 31, 0.16), transparent);
    transform: skewX(-18deg);
    transition: left 0.6s ease;
    pointer-events: none;
}

.card:hover::before {
    left: 130%;
}

.card:hover {
    border-color: var(--brand);
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

.card .icon {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-soft);
    border-radius: 12px;
    font-size: 22px;
    margin-bottom: 16px;
    transition: transform 0.25s;
}

.card:hover .icon {
    transform: scale(1.12) rotate(-6deg);
}

.card h3 {
    font-size: 21px;
    margin-bottom: 8px;
}

.card p {
    color: var(--muted);
    font-size: 14px;
}

/* the small "Coming soon" tag */
.tag-soon {
    display: inline-block;
    margin-top: 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #f4c542;
    border: 1px solid rgba(244, 197, 66, 0.4);
    border-radius: 999px;
    padding: 3px 10px;
}


/* ----------------------------------------------------------
   10. Body part cards - Abs, Chest, Arms, Legs and so on
       A four column grid
   ---------------------------------------------------------- */
/*
   Each card carries its own colour.
   It is set in the HTML as style="--c: #ff7a45"
   and read here through var(--c).
   To change a colour, edit that one line in the HTML.
*/
.muscle-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.muscle {
    --c: var(--brand);
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 18px 18px 16px;
    overflow: hidden;
    transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}

/* a soft wash of the card colour from the top left corner */
.muscle::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 95% at 12% 0%, var(--c), transparent 62%);
    opacity: 0.10;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

/* a thin line on top that grows to full width on hover */
.muscle::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: var(--c);
    transition: width 0.4s ease;
}

.muscle:hover::before {
    opacity: 0.24;
}

.muscle:hover::after {
    width: 100%;
}

.muscle:hover {
    border-color: var(--c);
    transform: translateY(-6px);
    box-shadow: 0 20px 42px rgba(0, 0, 0, 0.5);
}

/* the top row - icon and number */
.m-top {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 16px;
}

.muscle .m-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}

.muscle:hover .m-icon {
    transform: scale(1.1) rotate(-7deg);
    border-color: var(--c);
    box-shadow: 0 10px 26px -8px var(--c);
}

.m-num {
    font-family: 'Barlow Condensed', Arial, sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #3d3d52;
    transition: color 0.25s;
}

.muscle:hover .m-num {
    color: var(--c);
}

.muscle h3,
.muscle small,
.m-foot {
    position: relative;
}

.muscle h3 {
    font-size: 21px;
    margin-bottom: 3px;
}

.muscle small {
    display: block;
    color: var(--muted);
    font-size: 12.5px;
}

/* the bottom row - exercise count and arrow */
.m-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
    padding-top: 13px;
    border-top: 1px solid var(--line);
}

.m-pill {
    font-size: 11.5px;
    font-weight: 600;
    padding: 4px 11px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text);
}

.m-arrow {
    color: var(--c);
    font-size: 16px;
    transition: transform 0.25s;
}

.muscle:hover .m-arrow {
    transform: translateX(6px);
}


/* ----------------------------------------------------------
   11. Level tabs - Beginner / Intermediate / Advanced
       jQuery adds and removes the "active" class
   ---------------------------------------------------------- */
.level-tabs {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 32px;
}

.level-tab {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: var(--card);
    border: 1px solid var(--line);
    color: var(--muted);
    padding: 11px 22px;
    border-radius: 999px;
    font-family: 'Inter', Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

/* difficulty meter - three small bars */
.lvl-dots {
    display: inline-flex;
    align-items: flex-end;
    gap: 3px;
}

.lvl-dots i {
    width: 4px;
    height: 7px;
    background: currentColor;
    border-radius: 2px;
    opacity: 0.25;
}

.lvl-dots i:nth-child(2) { height: 11px; }
.lvl-dots i:nth-child(3) { height: 15px; }

/* the more bars marked "on", the harder it is */
.lvl-dots i.on {
    opacity: 1;
}

.level-tab:hover {
    color: var(--text);
    border-color: #3a3a46;
}

.level-tab.active {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--on-brand);
}

/* the panel shown under the tabs - all hidden to begin with */
.level-panel {
    display: none;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 32px;
}

.level-panel.show {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 40px;
}

.level-panel h3 {
    font-size: 30px;
    margin-bottom: 10px;
}

.level-panel .lvl-desc {
    color: var(--muted);
    font-size: 14.5px;
    margin-bottom: 20px;
}

.lvl-meta {
    display: flex;
    gap: 26px;
}

.lvl-meta b {
    display: block;
    font-family: 'Barlow Condensed', Arial, sans-serif;
    font-size: 28px;
    color: var(--brand);
    line-height: 1;
}

.lvl-meta small {
    font-size: 12px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* the short "This is right for you if..." list */
.lvl-fit {
    list-style: none;
    margin: 24px 0 24px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}

.lvl-fit .fit-head {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 12px;
}

.lvl-fit li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 13.5px;
    color: var(--muted);
    padding: 5px 0;
}

.lvl-fit li b {
    color: var(--brand);
    flex: 0 0 auto;
}

/* the exercise list on the right */
.lvl-list {
    list-style: none;
}

.lvl-list li {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 12px 14px;
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: 10px;
    margin-bottom: 10px;
    font-size: 14px;
    transition: border-color 0.2s, transform 0.2s, background 0.2s;
}

.lvl-list li:last-child {
    margin-bottom: 0;
}

/* on hover the row slides slightly right */
.lvl-list li:hover {
    border-color: var(--brand);
    background: rgba(255, 90, 31, 0.08);
    transform: translateX(5px);
}

/* the row number - 1, 2, 3 and so on */
.lvl-list .e-no {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-soft);
    color: var(--brand);
    border-radius: 7px;
    font-size: 12px;
    font-weight: 700;
}

.lvl-list .e-emoji {
    font-size: 18px;
}

.lvl-list .e-name {
    flex: 1;
    font-weight: 500;
}

.lvl-list .e-count {
    color: var(--muted);
    font-size: 13px;
}


/* ----------------------------------------------------------
   12. The ticked feature list (two columns)
   ---------------------------------------------------------- */
/* Each feature has its own colour, set in the HTML as style="--c: ..." */
.feature-list {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.feature-list li {
    --c: var(--brand);
    position: relative;
    display: flex;
    gap: 15px;
    align-items: flex-start;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 20px;
    overflow: hidden;
    transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}

/* a soft wash of its own colour from the corner */
.feature-list li::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(110% 90% at 8% 0%, var(--c), transparent 60%);
    opacity: 0.09;
    transition: opacity 0.3s;
    pointer-events: none;
}

.feature-list li:hover::before {
    opacity: 0.20;
}

.feature-list li:hover {
    border-color: var(--c);
    transform: translateY(-4px);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.4);
}

/* the square tile behind the icon */
.f-icon {
    position: relative;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 13px;
    transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}

.feature-list li:hover .f-icon {
    transform: scale(1.08) rotate(-6deg);
    border-color: var(--c);
    box-shadow: 0 10px 24px -9px var(--c);
}

.feature-list li > div {
    position: relative;
}

.feature-list b {
    display: block;
    font-size: 15.5px;
    margin-bottom: 3px;
}

.feature-list small {
    color: var(--muted);
    font-size: 13.5px;
    line-height: 1.55;
}


/* ----------------------------------------------------------
   13. Exercise name pills - Push Ups, Squats and so on
   ---------------------------------------------------------- */
.ex-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.ex-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 14.5px;
    font-weight: 500;
    transition: all 0.2s;
}

.ex-chip:hover {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--on-brand);
    transform: translateY(-3px);
    box-shadow: 0 10px 24px -8px var(--brand);
}


/* ----------------------------------------------------------
   14. The compact free tools list
   ---------------------------------------------------------- */
.tool-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.tool {
    /* falls back to the brand colour if none is set */
    --c: var(--brand);
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 16px 18px;
    overflow: hidden;
    transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}

.tool::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(110% 90% at 6% 0%, var(--c), transparent 58%);
    opacity: 0.09;
    transition: opacity 0.3s;
    pointer-events: none;
}

.tool:hover::before {
    opacity: 0.20;
}

.tool:hover {
    border-color: var(--c);
    transform: translateY(-4px);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.4);
}

.tool > div {
    position: relative;
}

/* the rounded tile behind the icon */
.tool .t-icon {
    position: relative;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 13px;
}

.tool:hover .t-icon {
    border-color: var(--c);
    box-shadow: 0 10px 24px -9px var(--c);
}

.tool b {
    display: block;
    font-size: 15px;
}

.tool small {
    color: var(--muted);
    font-size: 12.5px;
}

.tool .arrow {
    position: relative;
    margin-left: auto;
    color: var(--muted);
    transition: transform 0.25s, color 0.25s;
}

.tool:hover .arrow {
    color: var(--c);
    transform: translateX(6px);
}


/* ----------------------------------------------------------
   15. How it works - three steps
   ---------------------------------------------------------- */
/* a dashed line between the three steps, showing the order */
.grid-3.steps {
    position: relative;
}

.grid-3.steps::before {
    content: "";
    position: absolute;
    top: 62px;
    left: 17%;
    right: 17%;
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--line) 0 7px, transparent 7px 15px);
    z-index: 0;
}

.step {
    position: relative;
    z-index: 1;
    text-align: center;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 32px 24px 28px;
    transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}

.step:hover {
    border-color: var(--brand);
    transform: translateY(-6px);
    box-shadow: 0 20px 42px rgba(0, 0, 0, 0.45);
}

.step .step-no {
    position: relative;
    width: 60px;
    height: 60px;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--brand);
    color: var(--brand);
    border-radius: 50%;
    font-family: 'Barlow Condensed', Arial, sans-serif;
    font-size: 26px;
    font-weight: 700;
    transition: background 0.25s, color 0.25s, transform 0.25s;
}

/* a ripple spreading out from the number */
.step .step-no::after {
    content: "";
    position: absolute;
    inset: -2px;
    border: 2px solid var(--brand);
    border-radius: 50%;
    animation: ripple 2.6s ease-out infinite;
}

.step:hover .step-no {
    background: var(--brand);
    color: var(--on-brand);
    transform: scale(1.08);
}

.step h3 {
    font-size: 22px;
    margin-bottom: 8px;
}

.step p {
    color: var(--muted);
    font-size: 14px;
}


/* ----------------------------------------------------------
   16. It is free - the band that replaced the pricing table
   ---------------------------------------------------------- */
.free-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.free-item {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 26px 22px;
    text-align: center;
}

.free-item span {
    display: block;
    font-size: 30px;
    margin-bottom: 12px;
}

.free-item b {
    display: block;
    font-family: 'Barlow Condensed', Arial, sans-serif;
    font-size: 21px;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.free-item small {
    display: block;
    font-size: 13px;
    line-height: 1.55;
    color: var(--muted);
}

.free-line {
    max-width: 560px;
    margin: 30px auto 0;
    text-align: center;
    font-size: 15px;
    color: var(--muted);
}

@media (max-width: 900px) {
    .free-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 520px) {
    .free-grid {
        grid-template-columns: 1fr;
    }
}

/* ----------------------------------------------------------
   17. The large CTA box near the bottom
   ---------------------------------------------------------- */
.cta-box {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    color: #ffffff;
    border-radius: 22px;
    padding: 60px 40px;
    text-align: center;
    box-shadow: 0 24px 60px rgba(255, 90, 31, 0.25);
}

/* a faint gym photo behind the gradient, purely as texture */
.cta-box::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url('../images/freeweights.webp');
    background-position: center;
    background-size: cover;
    opacity: 0.25;
    mix-blend-mode: overlay;
    pointer-events: none;
}

/* keep the text above the photo */
.cta-box > * {
    position: relative;
    z-index: 1;
}

.cta-box h2 {
    font-size: 46px;
    margin-bottom: 12px;
}

.cta-box p {
    font-size: 16px;
    opacity: 0.8;
    max-width: 560px;
    margin: 0 auto 26px;
}

/* a white button reads best on top of the gradient */
.cta-box .btn-dark {
    background: #ffffff;
    color: #2b1206;
    box-shadow: none;
}

.cta-box .btn-dark:hover {
    background: #ffeede;
}


/* ----------------------------------------------------------
   18. Footer
   ---------------------------------------------------------- */
.site-footer {
    border-top: 1px solid var(--line);
    padding: 55px 0 26px;
    margin-top: 80px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: 34px;
}

.footer-grid p {
    color: var(--muted);
    font-size: 14px;
    margin-top: 12px;
    max-width: 300px;
}

.footer-grid h4 {
    font-size: 15px;
    letter-spacing: 1px;
    margin-bottom: 14px;
}

.footer-grid ul {
    list-style: none;
}

.footer-grid li {
    padding: 5px 0;
}

.footer-grid li a {
    color: var(--muted);
    font-size: 14px;
}

.footer-grid li a:hover {
    color: var(--brand);
}

.footer-bottom {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    gap: 14px;
    color: var(--muted);
    font-size: 13px;
}


/* ----------------------------------------------------------
   19. Large photo cards - "Where will you train?"
   ---------------------------------------------------------- */
.place-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.place {
    position: relative;
    display: block;
    height: 300px;
    border: 1px solid var(--line);
    border-radius: 16px;
    overflow: hidden;
    transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}

.place picture,
.place img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.place img {
    /* the photo is dimmed slightly so the text on top stays readable */
    filter: grayscale(0.3) brightness(0.72);
    transition: transform 0.7s ease, filter 0.4s ease;
}

.place:hover img {
    transform: scale(1.08);
    filter: grayscale(0) brightness(0.85);
}

.place:hover {
    border-color: var(--brand);
    transform: translateY(-6px);
    box-shadow: 0 22px 45px rgba(0, 0, 0, 0.5);
}

/* a dark gradient at the base of the photo for the text to sit on */
.place-in {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 22px 20px 20px;
    background: linear-gradient(0deg, rgba(10, 10, 18, 0.96) 15%, rgba(10, 10, 18, 0.6) 55%, transparent);
}

.place-in .tagline {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--brand);
    margin-bottom: 6px;
}

.place-in h3 {
    font-size: 25px;
    margin-bottom: 4px;
}

.place-in small {
    display: block;
    color: #b9b6cf;
    font-size: 13px;
}

/* the round arrow badge in the corner */
.place-go {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 10, 18, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    font-size: 15px;
    backdrop-filter: blur(6px);
    transition: background 0.25s, transform 0.25s;
}

.place:hover .place-go {
    background: var(--brand);
    transform: rotate(-45deg) scale(1.08);
}


/* ----------------------------------------------------------
   19b. Top block on inner pages (everything except home)
       For example the title area on /tools
   ---------------------------------------------------------- */
.page-hero {
    position: relative;
    padding: 60px 0 50px;
    text-align: center;
    border-bottom: 1px solid var(--line);
    overflow: hidden;
    /* a faint cardio photo behind it */
    background-image:
        linear-gradient(rgba(10, 10, 18, 0.90), rgba(10, 10, 18, 0.99)),
        url('../images/cardio.webp');
    background-position: center;
    background-size: cover;
}

.page-hero::before {
    content: "";
    position: absolute;
    top: -220px;
    left: 50%;
    transform: translateX(-50%);
    width: 620px;
    height: 420px;
    background: var(--brand);
    opacity: 0.18;
    filter: blur(130px);
    border-radius: 50%;
    pointer-events: none;
}

.page-hero .inner {
    position: relative;
    max-width: 660px;
    margin: 0 auto;
}

.page-hero h1 {
    font-size: 52px;
    margin: 16px 0 14px;
}

.page-hero p {
    color: var(--muted);
    font-size: 16px;
}

/* breadcrumb - Home > Free Tools */
.crumb {
    font-size: 13px;
    color: var(--muted);
}

.crumb a:hover {
    color: var(--brand);
}

/* the three point strip explaining why it is free */
.info-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 40px;
}

.info-strip div {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 20px;
}

.info-strip b {
    display: block;
    font-size: 15px;
    margin-bottom: 4px;
}

.info-strip small {
    color: var(--muted);
    font-size: 13.5px;
    line-height: 1.55;
}

/* the written content at the bottom, for search engines */
.prose {
    max-width: 760px;
    margin: 0 auto;
    color: var(--muted);
    font-size: 15px;
}

.prose h3 {
    color: var(--text);
    font-size: 24px;
    margin: 26px 0 8px;
}

.prose p {
    margin-bottom: 12px;
}

@media (max-width: 900px) {

    .page-hero h1 {
        font-size: 38px;
    }

    .info-strip {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================
   20. ANIMATION - everything that moves lives here
   ========================================================== */

/* ---- keyframes: the steps of each animation ---- */

/* float up and down */
@keyframes floaty {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-12px); }
}

/* a very slow zoom on the photo */
@keyframes slowZoom {
    from { transform: scale(1); }
    to   { transform: scale(1.1); }
}

/* keep the gradient moving */
@keyframes gradientMove {
    to { background-position: 250% 0; }
}

/* let the glow pulse brighter and softer */
@keyframes glowPulse {
    0%, 100% { opacity: 0.20; transform: translateX(-50%) scale(1); }
    50%      { opacity: 0.34; transform: translateX(-50%) scale(1.1); }
}

/* make the small dot pulse */
@keyframes dotPulse {
    0%, 100% { opacity: 1;   box-shadow: 0 0 0 0 rgba(255, 90, 31, 0.6); }
    70%      { opacity: 0.7; box-shadow: 0 0 0 7px rgba(255, 90, 31, 0); }
}

/* send a ripple outwards from the circle */
@keyframes ripple {
    0%   { transform: scale(1);    opacity: 0.5; }
    100% { transform: scale(1.45); opacity: 0; }
}

/* keep the strip sliding to the left */
@keyframes tickerMove {
    to { transform: translateX(-50%); }
}


/* ----------------------------------------------------------
   Sections fading in as you scroll

   How it works:
   1. main.js first adds the "js-anim" class to the body
   2. only then do these blocks hide themselves
   3. as you scroll, jQuery adds "in" and they appear

   If JavaScript is off, nothing hides - everything is visible.
   ---------------------------------------------------------- */
.reveal {
    transition: opacity 0.7s ease, transform 0.7s ease;
}

body.js-anim .reveal {
    opacity: 0;
    transform: translateY(30px);
}

body.js-anim .reveal.in {
    opacity: 1;
    transform: none;
}

/* stagger them slightly instead of all at once */
body.js-anim .reveal.d1 { transition-delay: 0.09s; }
body.js-anim .reveal.d2 { transition-delay: 0.18s; }
body.js-anim .reveal.d3 { transition-delay: 0.27s; }


/* ----------------------------------------------------------
   The thin scroll progress bar at the very top
   ---------------------------------------------------------- */
.scroll-bar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--brand), var(--brand-2));
}


/* ----------------------------------------------------------
   The scrolling ticker of body part names
   ---------------------------------------------------------- */
.ticker {
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: var(--bg-soft);
    padding: 18px 0;
    overflow: hidden;
}

.ticker-track {
    display: flex;
    width: max-content;
    animation: tickerMove 32s linear infinite;
}

.ticker-track span {
    display: flex;
    align-items: center;
    gap: 26px;
    padding: 0 26px;
    font-family: 'Barlow Condensed', Arial, sans-serif;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    white-space: nowrap;
    color: #2f2f42;
}

/* every second name takes the brand colour so the strip is not flat */
.ticker-track span:nth-child(even) {
    color: var(--brand);
}

/* pause the strip on hover */
.ticker:hover .ticker-track {
    animation-play-state: paused;
}


/* ----------------------------------------------------------
   Everything off for anyone who prefers reduced motion
   (picked up automatically from the OS setting)
   ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }

    body.js-anim .reveal {
        opacity: 1;
        transform: none;
    }
}


/* ----------------------------------------------------------
   21. Mobile and tablet
       max-width: 900px applies to anything narrower than 900px
   ---------------------------------------------------------- */
@media (max-width: 900px) {

    .nav-links,
    .header-actions .btn {
        display: none;
    }

    .menu-btn {
        display: block;
    }

    .hero-inner {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .hero h1 {
        font-size: 50px;
    }

    /* mobile par tairte hue card andar ki taraf le aao,
       warna screen se bahar chale jayenge */
    .hero-visual {
        height: 440px;
    }

    .hv-ring {
        right: 12px;
    }

    .hv-mini {
        left: 12px;
    }

    .section-head h2,
    .cta-box h2 {
        font-size: 34px;
    }

    .grid-3,
    .tool-grid,
    .feature-list {
        grid-template-columns: 1fr 1fr;
    }

    .muscle-grid,
    .place-grid {
        grid-template-columns: 1fr 1fr;
    }

    .place {
        height: 250px;
    }

    .level-panel.show {
        grid-template-columns: 1fr;
        gap: 26px;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px) {

    .hero {
        padding: 50px 0;
    }

    .hero h1 {
        font-size: 40px;
    }

    .hero-stats {
        gap: 24px;
    }

    .hero-stats b {
        font-size: 26px;
    }

    .hero-visual {
        height: 380px;
    }

    .hv-ring {
        top: 16px;
        right: 10px;
        width: 128px;
        padding: 12px 10px 10px;
    }

    .hv-ring-wrap {
        width: 84px;
        height: 84px;
    }

    .hv-mini {
        left: 10px;
        right: 10px;
        bottom: 16px;
        width: auto;
    }

    .section {
        padding: 55px 0;
    }

    .grid-3,
    .tool-grid,
    .feature-list,
    .footer-grid {
        grid-template-columns: 1fr;
    }

    .muscle-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .muscle {
        padding: 18px 16px;
    }

    .place-grid {
        grid-template-columns: 1fr;
    }

    .place {
        height: 220px;
    }

    .hero-bg {
        opacity: 0.20;
    }

    .level-panel {
        padding: 22px 18px;
    }

    .level-tab {
        padding: 9px 18px;
        font-size: 13px;
    }

    .cta-box {
        padding: 42px 22px;
    }

    .footer-bottom {
        flex-direction: column;
    }
}

/* the last chip on the home page - the one that goes to /workouts */
.ex-chip.more {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
    font-weight: 700;
}


/* ==========================================================
   DRAG AND DROP FILE UPLOAD

   Used in two places - the blog cover in the admin panel and
   the progress photo on /progress. Both pages load style.css,
   which is why it lives here rather than in admin.css.
   ========================================================== */
.drop-zone {
    display: block;
    position: relative;
    width: 100%;
    box-sizing: border-box;

    border: 2px dashed var(--line);
    border-radius: 13px;
    padding: 28px 20px;
    text-align: center;
    cursor: pointer;
    background: var(--bg);
    transition: border-color 0.18s, background 0.18s;
}

.drop-zone:hover {
    border-color: var(--brand);
    background: var(--card-hi);
}

/* while a file is being dragged over it */
.drop-zone.over {
    border-color: var(--brand);
    background: var(--brand-soft);
}

/* The real file input, stretched over the whole box and invisible.
   That is what makes a click anywhere open the file chooser. */
.drop-zone input[type="file"] {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.dz-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin: 0 auto 13px;
    border-radius: 50%;
    background: var(--brand-soft);
    font-size: 21px;
    line-height: 1;
}

.drop-zone:hover .dz-icon,
.drop-zone.over .dz-icon {
    background: var(--brand);
}

.dz-main {
    display: block;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 6px;
}

.dz-or {
    display: block;
    font-size: 13px;
    color: var(--brand);
    font-weight: 600;
    margin-bottom: 12px;
}

.dz-sub {
    display: block;
    font-size: 11.5px;
    color: var(--muted);
    line-height: 1.6;
    padding-top: 11px;
    border-top: 1px solid var(--line);
}

/* what is on the post now, or what was just chosen */
.dz-preview {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--line);
    margin-bottom: 11px;
}

.dz-preview img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: var(--bg);
}

.dz-name {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 13px;
    background: var(--bg);
    font-size: 12px;
    color: var(--muted);
}

.dz-name b {
    color: var(--text);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dz-drop {
    flex: none;
    border: 0;
    background: none;
    color: #ff8080;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    font-family: inherit;
}

.dz-drop:hover {
    text-decoration: underline;
}

.dz-error {
    margin-top: 10px;
    padding: 9px 13px;
    border-radius: 9px;
    font-size: 12.5px;
    color: #ff8080;
    background: rgba(255, 90, 90, 0.1);
    border: 1px solid rgba(255, 90, 90, 0.3);
}



/* ==========================================================
   THE HEALTH NOTE

   Bottom of every page that hands out a number or a plan.
   Deliberately quiet - it should be findable and readable,
   not shout over the content it is qualifying.
   ========================================================== */
.health-note-wrap {
    padding-top: 0;
}

.health-note {
    display: flex;
    gap: 15px;
    align-items: flex-start;
    padding: 20px 22px;
    border: 1px solid var(--line);
    border-left: 3px solid var(--brand);
    border-radius: var(--radius);
    background: var(--card);
}

.hn-icon {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--brand-soft);
    font-size: 17px;
    line-height: 1;
}

.hn-body {
    flex: 1;
    min-width: 0;
}

.hn-body > b {
    display: block;
    font-size: 14.5px;
    color: var(--text);
    margin-bottom: 8px;
}

.hn-body p {
    font-size: 13px;
    line-height: 1.75;
    color: var(--muted);
    margin: 0 0 9px;
}

.hn-body p:last-child {
    margin-bottom: 0;
}

.hn-body p b {
    color: var(--text);
}

.hn-body a:not(.btn) {
    color: var(--brand);
}

.hn-small {
    font-size: 12px !important;
}

@media (max-width: 560px) {

    .health-note {
        gap: 12px;
        padding: 16px 15px;
    }

    .hn-icon {
        width: 32px;
        height: 32px;
        font-size: 15px;
    }
}