:root {
      --red: #E8261A;
      --red-dark: #B31D13;
      --black: #0A0A0A;
      --dark: #111111;
      --card: #181818;
      --border: #2a2a2a;
      --white: #F5F5F5;
      --muted: #888;
      --gold: #F0A500;
    }
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      background: var(--black);
      color: var(--white);
      font-family: 'Barlow', sans-serif;
      overflow-x: hidden;
    }
    body::before {
      content: '';
      position: fixed; inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
      pointer-events: none; z-index: 9999; opacity: .5;
    }

    /* NAV */
    nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 200;
      display: flex; align-items: center; justify-content: space-between;
      padding: 18px 48px;
      background: rgba(10,10,10,.95);
      backdrop-filter: blur(14px);
      border-bottom: 1px solid var(--border);
    }
    .nav-logo { font-family: 'Bebas Neue', sans-serif; font-size: 1.7rem; letter-spacing: 2px; color: var(--white); cursor: pointer; }
    .nav-logo span { color: var(--red); }
    .nav-links { display: flex; gap: 6px; list-style: none; }
    .nav-links li button {
      background: none; border: none; cursor: pointer;
      color: var(--muted);
      font-family: 'Barlow Condensed', sans-serif;
      font-size: .85rem; letter-spacing: 1.5px; text-transform: uppercase;
      padding: 8px 14px; border-radius: 2px;
      transition: color .2s, background .2s;
    }
    .nav-links li button:hover { color: var(--white); background: rgba(255,255,255,.05); }
    .nav-links li button.nav-active { color: var(--red); border-bottom: 2px solid var(--red); }

    /* HERO */
    .hero {
      min-height: 100vh;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      text-align: center; padding: 100px 24px 60px;
      position: relative; overflow: hidden;
    }
    .hero-bg {
      position: absolute; inset: 0;
      background:
        radial-gradient(ellipse 80% 60% at 50% 60%, rgba(232,38,26,.13) 0%, transparent 70%),
        repeating-linear-gradient(0deg, transparent, transparent 60px, rgba(255,255,255,.015) 60px, rgba(255,255,255,.015) 61px),
        repeating-linear-gradient(90deg, transparent, transparent 60px, rgba(255,255,255,.015) 60px, rgba(255,255,255,.015) 61px);
    }
    .hero-eyebrow {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: .85rem; letter-spacing: 5px; text-transform: uppercase;
      color: var(--red); margin-bottom: 20px;
      animation: fadeUp .8s ease both;
    }
    .hero h1 {
      font-family: 'Bebas Neue', sans-serif;
      font-size: clamp(4.5rem, 14vw, 11rem);
      line-height: .92; letter-spacing: 4px;
      animation: fadeUp .9s .1s ease both;
    }
    .hero h1 .red { color: var(--red); }
    .hero h1 .outline { -webkit-text-stroke: 2px var(--white); color: transparent; }
    .hero-sub {
      margin-top: 24px; max-width: 560px;
      font-size: 1.05rem; font-weight: 300; color: var(--muted); line-height: 1.7;
      animation: fadeUp 1s .2s ease both;
    }
    .hero-badge {
      display: inline-block; margin-top: 18px;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: .8rem; letter-spacing: 3px; text-transform: uppercase;
      padding: 6px 18px; border: 1px solid var(--gold);
      color: var(--gold); border-radius: 2px;
      animation: fadeUp 1s .28s ease both;
    }
    .hero-cta {
      margin-top: 36px; display: flex; gap: 16px; flex-wrap: wrap; justify-content: center;
      animation: fadeUp 1s .35s ease both;
    }
    .btn {
      display: inline-block; padding: 14px 36px;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 1rem; letter-spacing: 2px; text-transform: uppercase;
      text-decoration: none; border: none; cursor: pointer;
      transition: all .25s;
    }
    .btn-primary { background: var(--red); color: #fff; clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%); }
    .btn-primary:hover { background: var(--red-dark); transform: translateY(-2px); }
    .btn-ghost { background: transparent; color: var(--white); border: 1px solid var(--border); clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%); }
    .btn-ghost:hover { border-color: var(--red); color: var(--red); }
    .hero-stats {
      margin-top: 64px; display: flex; gap: 60px; flex-wrap: wrap; justify-content: center;
      animation: fadeUp 1s .5s ease both;
    }
    .stat-item { text-align: center; }
    .stat-num { font-family: 'Bebas Neue', sans-serif; font-size: 2.8rem; color: var(--red); display: block; }
    .stat-label { font-size: .75rem; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); }

    /* FLOATING SWITCHER */
    .floating-switcher {
      position: fixed; right: 20px; top: 50%; transform: translateY(-50%);
      z-index: 150; display: flex; flex-direction: column; gap: 8px;
    }
    .float-btn {
      width: 52px; height: 52px; background: var(--card);
      border: 1px solid var(--border); border-radius: 4px;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      cursor: pointer; transition: all .2s;
      font-family: 'Bebas Neue', sans-serif; color: var(--muted);
      line-height: 1.2; text-align: center;
    }
    .float-btn:hover { border-color: var(--red); color: var(--white); background: rgba(232,38,26,.1); transform: scale(1.08); }
    .float-btn.float-active { background: var(--red); color: #fff; border-color: var(--red); }
    .float-btn .float-day { font-size: .9rem; }
    .float-btn .float-label { font-size: .5rem; letter-spacing: .5px; opacity: .8; }

    /* SCHEDULE */
    .schedule-section { padding: 90px 48px; max-width: 1280px; margin: 0 auto; }
    .section-header { margin-bottom: 48px; }
    .section-tag { font-family: 'Barlow Condensed', sans-serif; font-size: .8rem; letter-spacing: 4px; text-transform: uppercase; color: var(--red); display: block; margin-bottom: 10px; }
    .section-title { font-family: 'Bebas Neue', sans-serif; font-size: clamp(2.8rem, 6vw, 5rem); line-height: 1; letter-spacing: 2px; }
    .section-title .outline { -webkit-text-stroke: 1.5px var(--white); color: transparent; }
    .divider { width: 60px; height: 3px; background: linear-gradient(90deg, var(--red), transparent); margin-top: 18px; }

    /* TABS */
    .day-tabs {
      display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 40px;
      background: var(--dark); padding: 12px; border-radius: 4px;
      border: 1px solid var(--border);
    }
    .day-tab {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: .85rem; letter-spacing: 2px; text-transform: uppercase;
      padding: 12px 20px; border: 1px solid transparent;
      background: transparent; color: var(--muted); cursor: pointer;
      transition: all .2s; border-radius: 2px; flex: 1; min-width: 140px;
      clip-path: polygon(6px 0%, 100% 0%, calc(100% - 6px) 100%, 0% 100%);
    }
    .day-tab:hover { border-color: var(--red); color: var(--white); background: rgba(232,38,26,.08); }
    .day-tab.active { background: var(--red); color: #fff; border-color: var(--red); }

    /* PANELS */
    .day-panel { display: none; animation: panelIn .3s ease; }
    .day-panel.active { display: block; }
    @keyframes panelIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

    .day-header {
      display: flex; align-items: center; gap: 20px;
      margin-bottom: 32px; padding: 24px 28px;
      background: var(--card); border: 1px solid var(--border); border-radius: 4px;
      border-left: 4px solid var(--red);
    }
    .day-name { font-family: 'Bebas Neue', sans-serif; font-size: 2.2rem; letter-spacing: 2px; color: var(--red); }
    .day-focus { font-family: 'Barlow Condensed', sans-serif; font-size: 1rem; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); }
    .day-badges { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
    .muscle-badge {
      font-family: 'Barlow Condensed', sans-serif; font-size: .7rem; letter-spacing: 1.5px; text-transform: uppercase;
      padding: 3px 10px; border-radius: 2px;
      background: rgba(232,38,26,.1); color: var(--red); border: 1px solid rgba(232,38,26,.3);
    }

    /* MUSCLE BLOCK */
    .muscle-block { margin-bottom: 32px; }
    .muscle-block-title {
      font-family: 'Bebas Neue', sans-serif; font-size: 1.4rem; letter-spacing: 2px;
      color: var(--gold); padding: 12px 0; border-bottom: 1px solid var(--border);
      margin-bottom: 16px; display: flex; align-items: center; gap: 10px;
    }

    /* EXERCISES */
    .exercise-grid { display: flex; flex-direction: column; gap: 12px; }
    .exercise-item {
      background: var(--card); border: 1px solid var(--border); border-radius: 4px;
      overflow: hidden; transition: border-color .2s;
    }
    .exercise-item:hover { border-color: rgba(232,38,26,.4); }
    .exercise-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 16px 20px; cursor: pointer; transition: background .2s;
    }
    .exercise-header:hover { background: rgba(232,38,26,.05); }
    .ex-left { display: flex; align-items: center; gap: 14px; }
    .ex-num { font-family: 'Bebas Neue', sans-serif; font-size: 1.1rem; color: var(--red); min-width: 24px; }
    .ex-name { font-family: 'Barlow Condensed', sans-serif; font-size: 1.05rem; font-weight: 700; letter-spacing: .5px; }
    .ex-right { display: flex; align-items: center; gap: 16px; }
    .ex-sets { font-size: .75rem; color: var(--gold); font-family: 'Barlow Condensed', sans-serif; letter-spacing: 1px; white-space: nowrap; }
    .ex-arrow { color: var(--muted); font-size: .7rem; transition: transform .3s; }
    .exercise-item.open .ex-arrow { transform: rotate(180deg); }
    .exercise-body { display: none; padding: 0 20px 18px 58px; }
    .exercise-item.open .exercise-body { display: block; }
    .exercise-body p { font-size: .88rem; color: var(--muted); line-height: 1.75; margin-bottom: 8px; }
    .exercise-body strong { color: var(--white); font-weight: 600; }
    .tips-label {
      font-family: 'Barlow Condensed', sans-serif; font-size: .72rem; letter-spacing: 2px;
      text-transform: uppercase; color: var(--gold); display: block; margin-top: 10px; margin-bottom: 4px;
    }

    /* CARDIO BANNER */
    .cardio-banner {
      background: linear-gradient(135deg, rgba(232,38,26,.12), rgba(232,38,26,.04));
      border: 1px solid rgba(232,38,26,.25); border-radius: 4px;
      padding: 20px 24px; margin-bottom: 32px;
      display: flex; align-items: center; gap: 16px;
    }
    .cardio-icon { font-size: 1.8rem; }
    .cardio-text { font-family: 'Barlow Condensed', sans-serif; font-size: .9rem; letter-spacing: 1px; color: var(--muted); line-height: 1.6; }
    .cardio-text strong { color: var(--white); display: block; font-size: 1rem; letter-spacing: 1.5px; margin-bottom: 2px; }

    /* INFO NOTE */
    .info-note {
      background: linear-gradient(135deg, rgba(240,165,0,.1), rgba(240,165,0,.03));
      border: 1px solid rgba(240,165,0,.25); border-radius: 4px;
      padding: 18px 24px; margin-bottom: 28px;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: .92rem; letter-spacing: 1px; color: var(--muted); line-height: 1.7;
    }
    .info-note strong { color: var(--gold); display: block; font-size: 1rem; margin-bottom: 4px; letter-spacing: 1.5px; }

    /* BANNER */
    .banner {
      background: var(--red); padding: 60px 48px;
      text-align: center; position: relative; overflow: hidden;
    }
    .banner::before {
      content: 'GRIND'; position: absolute; right: -20px; top: -20px;
      font-family: 'Bebas Neue', sans-serif; font-size: 14rem; opacity: .07;
      pointer-events: none; line-height: 1;
    }
    .banner h2 { font-family: 'Bebas Neue', sans-serif; font-size: clamp(2.5rem, 6vw, 5rem); letter-spacing: 3px; }
    .banner p { font-size: 1.1rem; opacity: .85; margin-top: 10px; }

    ::-webkit-scrollbar { width: 6px; }
    ::-webkit-scrollbar-track { background: var(--black); }
    ::-webkit-scrollbar-thumb { background: var(--red-dark); border-radius: 3px; }

    footer { background: var(--dark); border-top: 1px solid var(--border); padding: 40px 48px; text-align: center; }
    footer .logo { font-family: 'Bebas Neue', sans-serif; font-size: 2rem; letter-spacing: 3px; }
    footer .logo span { color: var(--red); }
    footer p { color: var(--muted); font-size: .85rem; margin-top: 8px; }

    @keyframes fadeUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
    .fade-in { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
    .fade-in.visible { opacity: 1; transform: none; }

    @media(max-width: 900px) {
      nav { padding: 14px 20px; }
      .nav-links { display: none; }
      .floating-switcher { right: 10px; }
      .float-btn { width: 44px; height: 44px; }
      .schedule-section { padding: 60px 20px; }
      .banner { padding: 40px 20px; }
      footer { padding: 30px 20px; }
      .day-header { flex-direction: column; align-items: flex-start; gap: 8px; }
      .exercise-body { padding-left: 20px; }
      .day-tab { min-width: 120px; font-size: .75rem; padding: 10px 12px; }
    }
/* MULTI-PAGE LAYOUT */
.page-shell { min-height: 100vh; padding-top: 78px; }
.page-hero { min-height: 58vh; padding: 130px 48px 72px; display: grid; place-items: center; text-align: center; position: relative; overflow: hidden; }
.page-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(232,38,26,.16), transparent 60%); pointer-events: none; }
.page-hero > * { position: relative; z-index: 1; }
.page-kicker { font-family: 'Barlow Condensed', sans-serif; color: var(--red); letter-spacing: 4px; text-transform: uppercase; font-size: .85rem; margin-bottom: 12px; }
.page-title { font-family: 'Bebas Neue', sans-serif; font-size: clamp(3.2rem, 10vw, 8rem); letter-spacing: 3px; line-height: .95; }
.page-copy { max-width: 720px; margin: 20px auto 0; color: var(--muted); line-height: 1.8; font-weight: 300; }
.site-nav .nav-links a { color: var(--muted); text-decoration: none; font-family: 'Barlow Condensed', sans-serif; font-size: .9rem; letter-spacing: 1.5px; text-transform: uppercase; padding: 8px 14px; display: inline-block; border-radius: 2px; }
.site-nav .nav-links a:hover, .site-nav .nav-links a.nav-active { color: var(--red); background: rgba(255,255,255,.05); }
.home-panels, .guide-grid, .demo-library { max-width: 1280px; margin: 0 auto; padding: 80px 48px; }
.home-panels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.feature-panel, .guide-card, .library-card { background: var(--card); border: 1px solid var(--border); border-radius: 6px; padding: 24px; min-width: 0; overflow: hidden; }
.feature-panel h2, .guide-card h2 { font-family: 'Bebas Neue', sans-serif; letter-spacing: 2px; font-size: 2rem; margin-bottom: 10px; }
.feature-panel p, .guide-card p, .guide-card li { color: var(--muted); line-height: 1.7; }
.feature-panel .btn { margin-top: 18px; }
.guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.guide-card ul { padding-left: 18px; }
.demo-library { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 18px; }
.demo-library .demo-card { margin: 0; display: flex; flex-direction: column; align-items: stretch; min-width: 0; }

/* VIDEO-LIKE EXERCISE DEMOS */
.demo-card { display: grid; grid-template-columns: minmax(210px, 260px) minmax(0, 1fr); gap: 16px; align-items: center; margin: 16px 0 18px; padding: 14px; background: #101010; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.demo-screen { position: relative; height: 150px; min-width: 0; overflow: hidden; background: linear-gradient(180deg, #1e1e1e, #0c0c0c); border: 1px solid #272727; border-radius: 5px; }
.demo-screen::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 9px; height: 3px; background: linear-gradient(90deg, var(--red), var(--gold), #333); animation: demoProgress 2.4s linear infinite; transform-origin: left; }
.demo-floor { position: absolute; left: 22px; right: 22px; bottom: 28px; height: 2px; background: #3a3a3a; }
.demo-person { position: absolute; left: 50%; top: 38px; width: 58px; height: 72px; margin-left: -29px; animation: demoPush 2.4s ease-in-out infinite; }
.demo-person span, .demo-prop { position: absolute; display: block; background: var(--white); border-radius: 999px; }
.demo-head { width: 18px; height: 18px; left: 20px; top: 0; background: var(--gold) !important; }
.demo-body { width: 8px; height: 42px; left: 25px; top: 18px; transform-origin: top center; }
.demo-arm, .demo-leg { width: 7px; height: 35px; transform-origin: top center; }
.demo-arm-a { left: 22px; top: 24px; transform: rotate(62deg); background: var(--red) !important; }
.demo-arm-b { left: 30px; top: 24px; transform: rotate(-62deg); background: var(--red) !important; }
.demo-leg-a { left: 24px; top: 56px; transform: rotate(36deg); }
.demo-leg-b { left: 30px; top: 56px; transform: rotate(-36deg); }
.demo-prop { width: 72px; height: 6px; left: 72px; bottom: 42px; background: #666; border-radius: 2px; opacity: .75; }
.demo-play { position: absolute; top: 10px; left: 10px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: rgba(232,38,26,.9); color: #fff; font-size: 0; }
.demo-play::before { content: ''; width: 0; height: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 10px solid #fff; margin-left: 2px; }
.demo-copy { min-width: 0; }
.demo-copy strong { display: block; font-family: 'Barlow Condensed', sans-serif; letter-spacing: 1px; color: var(--white); margin-bottom: 5px; overflow-wrap: anywhere; }
.demo-copy span { color: var(--muted); font-size: .86rem; line-height: 1.55; overflow-wrap: anywhere; }
.demo-row .demo-person { animation-name: demoRow; }
.demo-curl .demo-person { animation-name: demoCurl; }
.demo-core .demo-person { animation-name: demoCore; }
.demo-legs .demo-person { animation-name: demoLegs; }
.demo-dip .demo-person { animation-name: demoDip; }
.demo-shoulder .demo-person { animation-name: demoShoulder; }
.demo-curl .demo-prop { width: 28px; height: 28px; left: 104px; bottom: 36px; border: 3px solid var(--gold); background: transparent; }
.demo-core .demo-person { left: 78px; top: 54px; transform: rotate(90deg); }
.demo-legs .demo-prop, .demo-shoulder .demo-prop, .demo-push .demo-prop { opacity: 0; }

/* Specific movement silhouettes */
.demo-superman .demo-person,
.demo-snowangel .demo-person { top: 76px; animation-name: demoSuperman; }
.demo-superman .demo-body,
.demo-snowangel .demo-body { height: 54px; transform: rotate(86deg); }
.demo-superman .demo-arm-a { top: 16px; left: 0; transform: rotate(82deg); }
.demo-superman .demo-arm-b { top: 16px; left: 42px; transform: rotate(-82deg); }
.demo-snowangel .demo-arm-a { animation: snowArmA 2.4s ease-in-out infinite; }
.demo-snowangel .demo-arm-b { animation: snowArmB 2.4s ease-in-out infinite; }
.demo-table-row .demo-person { top: 68px; animation-name: demoTableRow; }
.demo-table-row .demo-prop { opacity: 1; width: 130px; height: 7px; left: calc(50% - 65px); bottom: 96px; background: #6a6a6a; }

.demo-standard-push .demo-person,
.demo-wide-push .demo-person,
.demo-diamond .demo-person,
.demo-tricep-push .demo-person,
.demo-decline-push .demo-person { top: 78px; animation-name: demoPush; }
.demo-wide-push .demo-arm-a { transform: rotate(76deg); left: 8px; }
.demo-wide-push .demo-arm-b { transform: rotate(-76deg); left: 42px; }
.demo-diamond .demo-arm-a { transform: rotate(28deg); left: 22px; }
.demo-diamond .demo-arm-b { transform: rotate(-28deg); left: 30px; }
.demo-tricep-push .demo-arm-a { transform: rotate(12deg); left: 22px; }
.demo-tricep-push .demo-arm-b { transform: rotate(-12deg); left: 30px; }
.demo-decline-push .demo-prop { opacity: 1; width: 58px; height: 28px; left: 30px; bottom: 46px; background: #333; border: 1px solid #555; border-radius: 3px; }

.demo-chair-dip .demo-person { top: 48px; animation-name: demoDip; }
.demo-chair-dip .demo-prop { opacity: 1; width: 76px; height: 42px; left: calc(50% - 78px); bottom: 36px; background: transparent; border: 3px solid #666; border-top-width: 8px; border-radius: 4px; }

.demo-plank .demo-person,
.demo-hollow .demo-person { top: 78px; animation-name: demoPlank; }
.demo-crunch .demo-person,
.demo-bicycle .demo-person,
.demo-reverse-crunch .demo-person,
.demo-russian-twist .demo-person { top: 72px; animation-name: demoCrunch; }
.demo-leg-raise .demo-person { top: 74px; animation-name: demoLegRaise; }
.demo-bicycle .demo-leg-a { animation: bikeLegA 1.2s ease-in-out infinite; }
.demo-bicycle .demo-leg-b { animation: bikeLegB 1.2s ease-in-out infinite; }
.demo-russian-twist .demo-body { animation: twistTorso 1.6s ease-in-out infinite; }

.demo-towel-curl .demo-person,
.demo-backpack-curl .demo-person { top: 38px; animation-name: demoCurl; }
.demo-towel-curl .demo-prop { opacity: 1; width: 92px; height: 2px; left: calc(50% - 46px); bottom: 52px; background: var(--gold); transform: rotate(-18deg); }
.demo-backpack-curl .demo-prop { opacity: 1; width: 34px; height: 32px; left: calc(50% + 10px); bottom: 44px; background: #333; border: 2px solid var(--gold); border-radius: 5px; }
.demo-chinup .demo-person { top: 48px; animation-name: demoChinup; }
.demo-chinup .demo-prop { opacity: 1; width: 150px; height: 7px; left: calc(50% - 75px); bottom: 114px; background: #777; }

.demo-pike .demo-person,
.demo-elevated-pike .demo-person { top: 68px; animation-name: demoPike; }
.demo-handstand .demo-person { top: 54px; animation-name: demoHandstand; }
.demo-lateral-raise .demo-person { animation-name: demoLateralRaise; }
.demo-front-raise .demo-person { animation-name: demoFrontRaise; }
.demo-front-raise .demo-arm-a,
.demo-front-raise .demo-arm-b { transform: rotate(92deg); top: 30px; }

.demo-split-squat .demo-person { animation-name: demoSplitSquat; }
.demo-single-rdl .demo-person { animation-name: demoRdl; }
.demo-jump-squat .demo-person { animation-name: demoJumpSquat; }
.demo-calf-raise .demo-person { animation-name: demoCalfRaise; }
@keyframes demoProgress { 0% { transform: scaleX(0); } 100% { transform: scaleX(1); } }
@keyframes demoPush { 0%,100% { transform: translateY(0) rotate(82deg); } 50% { transform: translateY(18px) rotate(82deg); } }
@keyframes demoRow { 0%,100% { transform: translateX(12px) rotate(74deg); } 50% { transform: translateX(-12px) rotate(74deg); } }
@keyframes demoCurl { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes demoCore { 0%,100% { transform: rotate(90deg) translateX(0); } 50% { transform: rotate(72deg) translateX(-10px); } }
@keyframes demoLegs { 0%,100% { transform: translateY(0) scaleY(1); } 50% { transform: translateY(22px) scaleY(.82); } }
@keyframes demoDip { 0%,100% { transform: translateY(0); } 50% { transform: translateY(20px); } }
@keyframes demoShoulder { 0%,100% { transform: translateY(8px); } 50% { transform: translateY(-10px); } }
@keyframes demoSuperman { 0%,100% { transform: rotate(86deg) translateY(0); } 50% { transform: rotate(86deg) translateY(-9px); } }
@keyframes demoTableRow { 0%,100% { transform: rotate(74deg) translateY(18px); } 50% { transform: rotate(74deg) translateY(-12px); } }
@keyframes demoPlank { 0%,100% { transform: rotate(86deg); } 50% { transform: rotate(86deg) translateY(-2px); } }
@keyframes demoCrunch { 0%,100% { transform: rotate(74deg); } 50% { transform: rotate(48deg) translateX(-8px); } }
@keyframes demoLegRaise { 0%,100% { transform: rotate(90deg); } 50% { transform: rotate(90deg) translateY(-16px); } }
@keyframes demoChinup { 0%,100% { transform: translateY(20px); } 50% { transform: translateY(-10px); } }
@keyframes demoPike { 0%,100% { transform: rotate(42deg) translateY(10px); } 50% { transform: rotate(42deg) translateY(-10px); } }
@keyframes demoHandstand { 0%,100% { transform: rotate(180deg) translateY(-8px); } 50% { transform: rotate(180deg) translateY(12px); } }
@keyframes demoLateralRaise { 0%,100% { transform: translateY(5px); } 50% { transform: translateY(5px) scaleX(1.08); } }
@keyframes demoFrontRaise { 0%,100% { transform: translateY(5px); } 50% { transform: translateY(-7px); } }
@keyframes demoSplitSquat { 0%,100% { transform: translateY(0) skewX(0); } 50% { transform: translateY(20px) skewX(-8deg); } }
@keyframes demoRdl { 0%,100% { transform: rotate(0); } 50% { transform: rotate(48deg) translateX(12px); } }
@keyframes demoJumpSquat { 0%,100% { transform: translateY(14px) scaleY(.86); } 45% { transform: translateY(-22px) scaleY(1); } 65% { transform: translateY(-10px) scaleY(1); } }
@keyframes demoCalfRaise { 0%,100% { transform: translateY(10px); } 50% { transform: translateY(-10px); } }
@keyframes snowArmA { 0%,100% { transform: rotate(20deg); } 50% { transform: rotate(106deg); } }
@keyframes snowArmB { 0%,100% { transform: rotate(-20deg); } 50% { transform: rotate(-106deg); } }
@keyframes bikeLegA { 0%,100% { transform: rotate(20deg); } 50% { transform: rotate(78deg); } }
@keyframes bikeLegB { 0%,100% { transform: rotate(-78deg); } 50% { transform: rotate(-20deg); } }
@keyframes twistTorso { 0%,100% { transform: rotate(-20deg); } 50% { transform: rotate(20deg); } }
@media(max-width: 900px) {
  .home-panels, .guide-grid { grid-template-columns: 1fr; padding: 48px 20px; }
  .demo-library { padding: 48px 20px; }
  .demo-card { grid-template-columns: 1fr; }
  .demo-screen { height: 150px; }
  .site-nav { padding: 14px 20px; }
}