/* =========================================================
   POCKET PT
   Homepage
========================================================= */

:root {

  --bg: #1f1f1f;
  --bg-deep: #151515;
  --panel: #1a1a1a;
  --panel-light: #242424;
  --border: #363636;

  --blue: #00a6fb;
  --blue-dark: #0582ca;
  --blue-deep: #072536;

  --orange: #ffa700;
  --orange-light: #ffbd3d;

  --white: #f5f5f5;
  --text: #d4d4d4;
  --muted: #888888;
  --dark-text: #171717;

  --max-width: 1240px;

}


*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}


body {

  font-family: "Poppins", sans-serif;
  font-size: 1.6rem;
  font-weight: 400;

  color: var(--text);
  background: var(--bg);

  line-height: 1.7;

  overflow-x: hidden;

}


button,
a {
  font-family: inherit;
}


button {
  cursor: pointer;
}


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



/* =========================================================
   GLOBAL
========================================================= */

.section-kicker {

  display: inline-flex;
  align-items: center;

  margin-bottom: 2rem;

  color: var(--blue);

  font-size: 1.15rem;
  font-weight: 700;

  letter-spacing: .2em;
  text-transform: uppercase;

}


.orange-kicker {
  color: var(--orange);
}


.orange-text {
  color: var(--orange);
}


.button {

  border: none;
  border-radius: 999px;

  padding: 1.35rem 2.8rem;

  font-size: 1.4rem;
  font-weight: 700;

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    background .25s ease;

}


.button:hover {

  transform: translateY(-3px);

}


.button-orange {

  color: #161616;
  background: var(--orange);

  box-shadow:
    0 1.2rem 3.5rem rgba(255, 167, 0, .18);

}


.button-orange:hover {

  background: var(--orange-light);

  box-shadow:
    0 1.6rem 4.5rem rgba(255, 167, 0, .28);

}


.button-blue {

  color: white;
  background: var(--blue);

  box-shadow:
    0 1.2rem 3.5rem rgba(0, 166, 251, .18);

}


.button-blue:hover {

  background: #19b0ff;

}


.button-outline {

  color: white;

  background: transparent;

  border: 1px solid #666;

}


.button-outline:hover {

  border-color: var(--blue);
  color: var(--blue);

}



/* =========================================================
   HEADER
========================================================= */

.site-header {

  position: sticky;

  top: 0;

  z-index: 1000;

  width: 100%;

  background:
    rgba(22, 22, 22, .88);

  border-bottom:
    1px solid rgba(255,255,255,.07);

  backdrop-filter: blur(18px);

}


.header-inner {

  width: min(100% - 4rem, var(--max-width));

  height: 7rem;

  margin: auto;

  display: flex;

  align-items: center;

  gap: 4rem;

}


.brand {

  flex-shrink: 0;

  color: white;

  font-size: 2.8rem;
  font-weight: 600;

letter-spacing: -0.6px;

}

.account-brand-beta {
  font-size: 12px;
  top: -2px;
  position: relative;
  left: -8px;
  color: rgb(126, 126, 126);
}
.brand-p {

      background: linear-gradient(0deg, #ff8300, #ffc640);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;

}
.brand-t {
    background: linear-gradient(0deg, #007ec7, #b5e6ff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.account-brand-beta {
  font-size: 15px;
  top: -11px;
  left: -3px;
  position: relative;
  color: rgb(153, 153, 153);
}

.main-nav {

  display: flex;

  align-items: center;

  gap: 3rem;

  margin-left: auto;

}


.main-nav a {

  position: relative;

  color: #a8a8a8;

  font-size: 1.3rem;
  font-weight: 500;

  transition: color .2s ease;

}


.main-nav a:hover {

  color: white;

}


.main-nav a::after {

  content: "";

  position: absolute;

  left: 0;
  bottom: -.7rem;

  width: 0;
  height: 2px;

  background: var(--orange);

  transition: width .2s ease;

}


.main-nav a:hover::after {

  width: 100%;

}


.header-actions {

  display: flex;

  align-items: center;

  gap: 1.2rem;

}


.beta-label {

  padding: .45rem .8rem;

  border: 1px solid rgba(255,167,0,.45);

  border-radius: 999px;

  color: var(--orange);

  font-size: .95rem;
  font-weight: 700;

  letter-spacing: .12em;

}


.header-start {

  border: none;
  border-radius: 9px;

  padding: .9rem 1.8rem;

  color: #151515;
  background: white;

  font-size: 1.25rem;
  font-weight: 700;

  transition:
    background .2s ease,
    transform .2s ease;

}


.header-start:hover {

  background: var(--orange);

  transform: scale(1.1);

}



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

.hero {

  position: relative;

  min-height: calc(100vh - 7rem);

  display: flex;
  align-items: center;

  overflow: hidden;

  background:

    radial-gradient(
      circle at 75% 45%,
      rgba(0,166,251,.16),
      transparent 32rem
    ),

    radial-gradient(
      circle at 20% 10%,
      rgba(255,167,0,.06),
      transparent 28rem
    ),

    var(--bg);

}


.hero-inner {

  position: relative;
  z-index: 2;

  width: min(100% - 4rem, var(--max-width));

  margin: auto;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(400px, .8fr);

  align-items: center;

  gap: 5rem;

  padding: 9rem 0 10rem;

}


.hero-content {

  max-width: 67rem;

}


.eyebrow {

  display: inline-flex;

  align-items: center;

  gap: 1rem;

  margin-bottom: 2.5rem;

  color: #aaa;

  font-size: 1.2rem;
  font-weight: 600;

  letter-spacing: .12em;
  text-transform: uppercase;

}


.eyebrow-dot {

  width: .8rem;
  height: .8rem;

  border-radius: 50%;

  background: var(--orange);

  box-shadow:
    0 0 1.5rem rgba(255,167,0,.7);

}


.hero h1 {

  color: white;

  font-size: clamp(6rem, 8vw, 10.5rem);

  font-weight: 600;

  letter-spacing: -.075em;

  line-height: .92;

  margin-bottom: 2.5rem;


}


.hero-subheading {

  color: #d7d7d7;

  font-size: clamp(2.4rem, 3vw, 4rem);

  font-weight: 400;

  letter-spacing: -.03em;

  line-height: 1.15;

  margin-bottom: 2.5rem;

}


.hero-subheading span {

  color: var(--blue);

}


.hero-description {

  max-width: 62rem;

  color: #a9a9a9;

  font-size: 1.65rem;

  line-height: 1.8;

  margin-bottom: 3rem;

}


.hero-actions {

  display: flex;

  flex-wrap: wrap;

  gap: 1.2rem;

}


.hero-meta {

  display: flex;

  align-items: center;

  gap: 1.3rem;

  margin-top: 2rem;

  color: #777;

  font-size: 1.1rem;

}


.meta-divider {

  width: .4rem;
  height: .4rem;

  border-radius: 50%;

  background: var(--orange);

}


.hero-product {

  position: relative;

  min-height: 57rem;

  display: flex;

  justify-content: center;

  align-items: center;

}


.hero-phone {

  position: relative;

  z-index: 3;

  width: 25rem;

  padding: 0.4rem;

  border-radius: 3.5rem;

  background:
    linear-gradient(
      145deg,
      #4b4b4b,
      #161616
    );

  box-shadow:
    0 4rem 9rem rgba(0,0,0,.55),
    0 0 7rem rgba(0,166,251,.12);

  transform:
    rotate(3deg);

}


.hero-phone img {

  display: block;

  width: 100%;

  border-radius: 3rem;

}


.phone-top {

  position: absolute;

  z-index: 5;

  top: 1.6rem;
  left: 50%;

  width: 7rem;
  height: 1.8rem;

  transform: translateX(-50%);

  border-radius: 999px;

  background: #111;

}


.product-orbit {

  position: absolute;

  border: 1px solid rgba(0,166,251,.2);

  border-radius: 50%;

}


.orbit-one {

  width: 50rem;
  height: 50rem;

  transform: rotate(-20deg);

}


.orbit-two {

  width: 39rem;
  height: 39rem;

  border-color: rgba(255,167,0,.12);

  transform: rotate(25deg);

}


.floating-stat {

  position: absolute;

  z-index: 5;

  padding: 1.5rem 1.8rem;

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

  border-radius: 1.5rem;

  background:
    rgba(28,28,28,.88);

  box-shadow:
    0 2rem 5rem rgba(0,0,0,.35);

  backdrop-filter: blur(15px);

}


.stat-recovery {

  top: 11rem;
  right: 0;

}


.stat-workout {

  bottom: 10rem;
  left: 0;

  display: flex;
  align-items: center;
  gap: 1.2rem;

}


.stat-label {

  display: block;

  color: #777;

  font-size: .9rem;
  font-weight: 700;

  letter-spacing: .15em;

}


.stat-recovery strong {

  display: block;

  color: #b3ff00;

  font-size: 3rem;
  line-height: 1.1;

}


.stat-status {

  color: #aaa;

  font-size: 1rem;

}


.stat-icon {

  width: 3.2rem;
  height: 3.2rem;

  display: grid;
  place-items: center;

  border-radius: 50%;

  color: white;

  background: var(--blue);

  font-size: 2rem;

}


.stat-workout strong,
.stat-workout span:not(.stat-icon) {

  display: block;

}


.stat-workout strong {

  color: white;

  font-size: 1.2rem;

}


.stat-workout span:not(.stat-icon) {

  color: #777;

  font-size: 1rem;

}


.hero-glow {

  position: absolute;

  border-radius: 50%;

  filter: blur(100px);

  pointer-events: none;

}


.hero-glow-blue {

  width: 30rem;
  height: 30rem;

  right: 5%;

  background: rgba(0,166,251,.09);

}


.hero-glow-orange {

  width: 15rem;
  height: 15rem;

  left: 5%;

  bottom: 5rem;

  background: rgba(255,167,0,.06);

}


.hero-scroll {

  position: absolute;

  bottom: 2.5rem;
  left: 50%;

  z-index: 5;

  display: flex;

  align-items: center;

  gap: 1.5rem;

  transform: translateX(-50%);

  color: #686868;

  font-size: 1rem;

  text-transform: uppercase;
  letter-spacing: .15em;

}


.scroll-line {

  width: 5rem;
  height: 1px;

  background: #555;

}



/* =========================================================
   STATEMENT
========================================================= */

.statement {

  position: relative;

  padding: 12rem 2rem;

  background: #181818;

  border-top: 1px solid #2c2c2c;

  border-bottom: 1px solid #2c2c2c;

}


.statement-inner {

  max-width: 100rem;

  margin: auto;

  text-align: center;

}


.statement h2 {

  color: white;

  font-size: clamp(4rem, 6vw, 7rem);

  font-weight: 500;

  letter-spacing: -.065em;

  line-height: 1.05;

}


.statement h2 span {

  color: #777;

}


.statement p {

  max-width: 68rem;

  margin: 3rem auto;

  color: #929292;

  font-size: 1.7rem;

}


.statement-punch {

  margin-top: 5rem;

  color: #eee;

  font-size: clamp(2.2rem, 3vw, 3.4rem);

  font-weight: 500;

}


.punch-blue {

  color: var(--blue);

  font-weight: 700;

}


.punch-orange {

  color: var(--orange);

  font-weight: 700;

}



/* =========================================================
   PLATFORM MAP
========================================================= */

.platform-map {

  background: #111;

  border-bottom: 1px solid #292929;

}


.platform-map-inner {

  width: min(100% - 4rem, var(--max-width));

  margin: auto;

  display: grid;

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

}


.platform-item {

  position: relative;

  min-height: 13rem;

  padding: 3rem;

  display: flex;

  flex-direction: column;

  justify-content: center;

  gap: .3rem;

  border-left: 1px solid #292929;

}


.platform-item:last-child {

  border-right: 1px solid #292929;

}


.platform-item strong {

  color: #eee;

  font-size: 1.4rem;

  letter-spacing: .1em;

}


.platform-item > span:last-child {

  color: #666;

  font-size: 1.1rem;

}


.platform-number {

  color: #555;

  font-size: .95rem;

}


.platform-item.active {

  background:
    linear-gradient(
      145deg,
      rgba(0,166,251,.09),
      transparent
    );

}


.platform-item.active strong {

  color: var(--blue);

}


.platform-item.active::after {

  content: "";

  position: absolute;

  bottom: 0;
  left: 3rem;

  width: 3.5rem;
  height: 3px;

  background: var(--orange);

}



/* =========================================================
   FEATURES
========================================================= */

.feature {

  position: relative;

  padding: 14rem 2rem;

  overflow: hidden;

}


.feature-recovery {

  background:
    radial-gradient(
      circle at 75% 50%,
      rgba(0,166,251,.07),
      transparent 35rem
    ),
    #1f1f1f;

}


.feature-explore {

  background: #f3f3f3;

  color: var(--dark-text);

}


.feature-workouts {

  background:
    linear-gradient(
      130deg,
      #072536,
      #064b71 55%,
      #082b3c
    );

}


.feature-inner {

  width: min(100% - 4rem, var(--max-width));

  margin: auto;

  display: grid;

  grid-template-columns: 1fr 1fr;

  align-items: center;

  gap: 9rem;

}


.feature-inner-reverse {

  grid-template-columns: 1.05fr .95fr;

}


.feature-copy {

  max-width: 57rem;

}


.feature-copy h2 {

  margin-bottom: 3rem;

  color: white;

  font-size: clamp(4rem, 5vw, 6.5rem);

  font-weight: 500;

  letter-spacing: -.065em;

  line-height: 1.02;

}


.feature-explore .feature-copy h2 {

  color: #202020;

}


.feature-copy h2 span {

  display: block;

  color: var(--blue);

}


.feature-recovery .feature-copy h2 span {

  color: var(--orange);

}


.feature-workouts .feature-copy h2 span {

  color: var(--orange);

}


.feature-copy p {

  margin-bottom: 1.8rem;

  color: #969696;

  font-size: 1.55rem;

  line-height: 1.85;

}


.feature-explore .feature-copy p {

  color: #5f5f5f;

}


.feature-tags {

  display: flex;

  flex-wrap: wrap;

  gap: .8rem;

  margin-top: 3rem;

}


.feature-tags span {

  padding: .7rem 1.1rem;

  border: 1px solid #3b3b3b;

  border-radius: 999px;

  color: #999;

  font-size: 1rem;

}


.feature-visual {

  position: relative;

  min-height: 52rem;

  display: flex;

  justify-content: center;

  align-items: center;

}



/* =========================================================
   RECOVERY VISUAL
========================================================= */

.recovery-visual {

  border-radius: 3rem;

  background:
    radial-gradient(
      circle,
      rgba(0,166,251,.13),
      transparent 60%
    );

}


.avatar-frame {

  position: relative;

  width: min(100%, 40rem);

  padding: 2rem;

  border-radius: 3rem;

  background:
    linear-gradient(
      145deg,
      #2d2d2d,
      #181818
    );

  border: 1px solid #3b3b3b;

  box-shadow:
    0 3rem 8rem rgba(0,0,0,.45);

}


.avatar-frame img {

  display: block;

  width: 100%;

  border-radius: 2rem;

}


.visual-label {

  position: absolute;

  color: #666;

  font-size: .95rem;

  font-weight: 700;

  letter-spacing: .15em;

}


.visual-label-top {

  top: 4rem;
  left: 2rem;

}


.visual-data-card {

  position: absolute;

  right: 0;
  bottom: 6rem;

  width: 18rem;

  padding: 1.6rem;

  border: 1px solid #414141;

  border-radius: 1.5rem;

  background: rgba(25,25,25,.95);

  box-shadow:
    0 2rem 4rem rgba(0,0,0,.3);

}


.visual-data-card span {

  display: block;

  color: #666;

  font-size: .85rem;

  letter-spacing: .12em;

}


.visual-data-card strong {

  display: block;

  margin: .4rem 0 1rem;

  color: white;

  font-size: 1.5rem;

}


.data-bar {

  height: .4rem;

  overflow: hidden;

  border-radius: 999px;

  background: #333;

}


.data-bar span {

  width: 64%;
  height: 100%;

  background: orange;

}



/* =========================================================
   PHILOSOPHY
========================================================= */

.recovery-philosophy {

  position: relative;

  padding: 14rem 2rem;

  background:
    linear-gradient(
      135deg,
      #111,
      #202020
    );

  overflow: hidden;

}


.philosophy-inner {

  width: min(100% - 4rem, 100rem);

  margin: auto;

  display: grid;

  grid-template-columns: 12rem 1fr;

  gap: 5rem;

}


.philosophy-number {

  color: var(--orange);

  font-size: 2rem;
  font-weight: 600;

}


.philosophy-content {

  max-width: 78rem;

}


.philosophy-content h2 {

  margin-bottom: 4rem;

  color: white;

  font-size: clamp(4rem, 6vw, 7rem);

  font-weight: 500;

  letter-spacing: -.065em;

  line-height: 1.03;

}


.philosophy-content h2 span {

  color: #666;

}


.philosophy-content p {

  max-width: 68rem;

  margin-bottom: 2rem;

  color: #8e8e8e;

  font-size: 1.65rem;

}



/* =========================================================
   EXERCISE VISUAL
========================================================= */

.exercise-visual {

  min-height: 48rem;

}


.exercise-window {

  position: relative;
  z-index: 2;

  width: min(100%, 48rem);

  padding: 1.4rem;

  border-radius: 2rem;

  background: white;

  box-shadow:
    0 3rem 7rem rgba(0,0,0,.2);

}


.window-top {

  display: flex;

  gap: .5rem;

  margin-bottom: 1.5rem;

}


.window-top span {

  width: .7rem;
  height: .7rem;

  border-radius: 50%;

  background: #ccc;

}


.exercise-search {

  padding: 1.2rem 1.5rem;

  border-radius: 1rem;

  background: #f0f0f0;

  color: #999;

  font-size: 1.1rem;

}


.exercise-results {

  margin-top: 1rem;

}


.exercise-result {

  padding: 1.4rem;

  border-radius: 1rem;

  margin-bottom: .5rem;

}


.exercise-result.active {

  background: rgba(0,166,251,.1);

  border-left: 3px solid var(--blue);

}


.exercise-result strong {

  display: block;

  color: #252525;

  font-size: 1.2rem;

}


.exercise-result span {

  color: #888;

  font-size: .95rem;

}


.anatomy-node {

  position: absolute;

  z-index: 4;

  padding: 1rem 1.4rem;

  border-radius: 999px;

  color: white;

  background: #1f1f1f;

  box-shadow:
    0 1rem 3rem rgba(0,0,0,.25);

  font-size: 1rem;

}


.node-muscle {

  top: 7rem;
  right: 0;

  border: 1px solid var(--blue);

}


.node-joint {

  right: 4rem;
  bottom: 8rem;

  border: 1px solid #555;

}


.node-movement {

  left: 0;
  bottom: 5rem;

  border: 1px solid var(--orange);

}


.connection-line {

  position: absolute;

  width: 12rem;

  height: 1px;

  background: #aaa;

  opacity: .3;

}


.line-one {

  top: 15rem;
  right: 5rem;

  transform: rotate(-25deg);

}


.line-two {

  bottom: 14rem;
  left: 4rem;

  transform: rotate(20deg);

}


.big-number {

  display: flex;

  align-items: baseline;

  gap: 1.5rem;

  margin-top: 4rem;

}


.big-number strong {

  color: var(--blue);

  font-size: 6rem;

  font-weight: 600;

  letter-spacing: -.07em;

  line-height: 1;

}


.big-number span {

  color: #777;

  font-size: 1.2rem;

}



/* =========================================================
   WORKOUT VISUAL
========================================================= */

.workout-card {

  width: min(100%, 42rem);

  padding: 2rem;

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

  border-radius: 2rem;

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

  box-shadow:
    0 3rem 7rem rgba(0,0,0,.35);

  transform: rotate(2deg);

}


.workout-card-header {

  display: flex;

  justify-content: space-between;

  color: #777;

  font-size: .95rem;
  font-weight: 700;

  letter-spacing: .12em;

}


.orange-dot {

  width: .8rem;
  height: .8rem;

  border-radius: 50%;

  background: var(--orange);

  box-shadow:
    0 0 1.5rem rgba(255,167,0,.7);

}


.workout-title {

  margin: 3rem 0 2rem;

  color: white;

  font-size: 3rem;
  font-weight: 500;

}


.workout-exercise {

  display: flex;

  justify-content: space-between;

  padding: 1.5rem 0;

  border-bottom: 1px solid #303030;

  color: #aaa;

}


.workout-exercise strong {

  color: var(--blue);

}


.mini-add {

  width: 100%;

  margin-top: 2rem;

  padding: 1.2rem;

  border: 1px dashed #555;

  border-radius: 1rem;

  color: var(--orange);

  background: transparent;

  font-size: 1.1rem;

}



/* =========================================================
   WORKOUT POINTS
========================================================= */

.workout-points {

  margin-top: 3.5rem;

}


.workout-points div {

  display: flex;

  align-items: center;

  gap: 1.5rem;

  padding: 1.1rem 0;

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

  color: #bbb;

}


.point-number {

  color: #bbb;

  font-size: .95rem;

  font-weight: 700;

}



/* =========================================================
   PROGRESS
========================================================= */

.progress-section {

  padding: 14rem 2rem;

  background: #181818;

}


.progress-inner {

  width: min(100% - 4rem, var(--max-width));

  margin: auto;

}


.progress-heading {

  max-width: 75rem;

  margin-bottom: 7rem;

}


.progress-heading h2 {

  margin-bottom: 2.5rem;

  color: white;

  font-size: clamp(4rem, 6vw, 7rem);

  font-weight: 500;

  letter-spacing: -.065em;

  line-height: 1.02;

}


.progress-heading h2 span {

  color: var(--blue);

}


.progress-heading p {

  max-width: 65rem;

  color: #888;

  font-size: 1.6rem;

}



/* =========================================================
   DASHBOARD
========================================================= */

.dashboard-preview {

  display: grid;

  grid-template-columns: 19rem 1fr;

  min-height: 45rem;

  overflow: hidden;

  border: 1px solid #363636;

  border-radius: 2rem;

  background: #111;

  box-shadow:
    0 3rem 8rem rgba(0,0,0,.3);

}


.dashboard-sidebar {

  padding: 2.5rem;

  display: flex;

  flex-direction: column;

  gap: 1.5rem;

  border-right: 1px solid #292929;

}


.dashboard-logo {

  margin-bottom: 3rem;

  color: white;

  font-size: 1.7rem;
  font-weight: 600;

}


.dashboard-sidebar span {

  color: #626262;

  font-size: 1.1rem;

}


.dashboard-sidebar .dashboard-active {

  color: var(--blue);

}


.dashboard-main {

  padding: 3.5rem;

}


.dashboard-top {

  display: flex;

  justify-content: space-between;

}


.dashboard-top span {

  display: block;

  color: #666;

  font-size: .9rem;

  letter-spacing: .12em;

}


.dashboard-top strong {

  display: block;

  margin-top: .5rem;

  color: white;

  font-size: 1.8rem;

}


.dashboard-period {

  color: var(--orange) !important;

}


.fake-chart {

  position: relative;

  height: 23rem;

  margin-top: 4rem;

  border-bottom: 1px solid #333;

  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 5.6rem,
      rgba(255,255,255,.04) 5.7rem
    );

}


.chart-line {

  position: absolute;

  left: 3%;
  right: 3%;

  bottom: 20%;

  height: 50%;

  border-top: 2px solid var(--blue);

  transform:
    skewY(-7deg);

  filter:
    drop-shadow(0 0 1rem rgba(0,166,251,.4));

}


.chart-point {

  position: absolute;

  width: 1rem;
  height: 1rem;

  border: 2px solid var(--blue);

  border-radius: 50%;

  background: #111;

}


.point-one {
  left: 8%;
  bottom: 35%;
}

.point-two {
  left: 27%;
  bottom: 45%;
}

.point-three {
  left: 47%;
  bottom: 53%;
}

.point-four {
  left: 68%;
  bottom: 63%;
}

.point-five {
  left: 88%;
  bottom: 72%;
}


.dashboard-stats {

  display: grid;

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

  margin-top: 3rem;

}


.dashboard-stats div {

  padding-left: 2rem;

  border-left: 1px solid #333;

}


.dashboard-stats span {

  display: block;

  color: #666;

  font-size: .9rem;

  letter-spacing: .12em;

}


.dashboard-stats strong {

  color: white;

  font-size: 2.5rem;
  font-weight: 500;

}



/* =========================================================
   JOURNAL
========================================================= */

.journal-section {

  padding: 12rem 2rem;

  background:
    linear-gradient(
      145deg,
      #202020,
      #161616
    );

}


.journal-inner {

  width: min(100% - 4rem, var(--max-width));

  margin: auto;

}


.journal-copy {

  max-width: 68rem;

  margin-bottom: 6rem;

}


.journal-copy h2 {

  margin-bottom: 2rem;

  color: white;

  font-size: clamp(4rem, 5vw, 6rem);

  font-weight: 500;

  letter-spacing: -.06em;

  line-height: 1.05;

}


.journal-copy h2 span {

  color: var(--orange);

}


.journal-copy p {

  color: #888;

  font-size: 1.6rem;

}


.journal-grid {

  display: grid;

  grid-template-columns: 1.2fr .8fr .8fr;

  gap: 1.5rem;

}


.journal-card {

  min-height: 25rem;

  padding: 2.5rem;

  border: 1px solid #333;

  border-radius: 2rem;

  background: #1a1a1a;

}


.card-label {

  margin-bottom: 3rem;

  color: #666;

  font-size: .9rem;
  font-weight: 700;

  letter-spacing: .15em;

}


.calendar-grid {

  display: grid;

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

  gap: .8rem;

}


.calendar-grid span {

  display: grid;

  place-items: center;

  width: 3rem;
  height: 3rem;

  color: #777;

  font-size: 1rem;

}


.calendar-active {

  border-radius: 50%;

  color: white !important;

  background: var(--blue);

}


.calendar-orange {

  border-radius: 50%;

  color: #111 !important;

  background: var(--orange);

}


.note-card strong {

  display: block;

  margin-bottom: 1.5rem;

  color: white;

  font-size: 1.7rem;

}


.note-card p {

  color: #777;

  font-size: 1.25rem;

}


.small-graph {

  position: relative;

  height: 8rem;

  margin-bottom: 2rem;

  border-bottom: 1px solid #333;

}


.small-graph::after {

  content: "";

  position: absolute;

  left: 0;
  right: 0;

  bottom: 1.5rem;

  height: 4rem;

  border-top: 2px solid var(--orange);

  transform: skewY(-8deg);

}


.graph-card > strong {

  color: white;

  font-size: 1.3rem;

}



/* =========================================================
   ASSISTANT
========================================================= */

.assistant {

  max-width: var(--max-width);

  min-height: 720px;

  margin: 0 auto 0;

  padding:
    110px 60px;

  display: grid;

  grid-template-columns:
    0.85fr
    1.15fr;

  align-items: center;

  gap: 90px;

  border:
    1px solid rgba(255,255,255,0.07);

  border-radius: 34px;

  background:
    radial-gradient(
      circle at 80% 40%,
      rgba(0,166,251,0.08),
      transparent 40%
    ),
    #202020;

  overflow: hidden;

}


.assistant__content {

  position: relative;

  z-index: 2;

}


.assistant__title {

  color: var(--white);

  font-size: clamp(42px, 5vw, 65px);

  font-weight: 500;

  letter-spacing: -0.055em;

  line-height: 1.04;

}


.assistant__title span {

  display: block;

  color: var(--text-soft);

}


.assistant__description {

  max-width: 470px;

  margin-top: 25px;

  color: var(--text-soft);

  font-size: 14px;

  line-height: 1.85;

}


.assistant__actions {

  display: flex;

  gap: 10px;

  margin-top: 30px;

}


.assistant-button {

  min-width: 105px;

  min-height: 45px;

  padding:
    0 18px;

  border-radius: 10px;

  cursor: pointer;

  font-size: 12px;

  font-weight: 600;

  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast);

}


.assistant-button:hover {

  transform: translateY(-2px);

}


.assistant-button--login {

  background: var(--blue);

  color: var(--white);

}


.assistant-button--login:hover {

  box-shadow:
    0 10px 25px rgba(0,166,251,0.2);

}


.assistant-button--signup {

  background: var(--orange);

  color: #181818;

}


.assistant-button--signup:hover {

  box-shadow:
    0 10px 25px rgba(255,167,0,0.16);

}


/* =========================================================
   ASSISTANT WINDOW
========================================================= */

.assistant__visual {

  position: relative;

}


.assistant-window {

  position: relative;

  min-height: 510px;

  overflow: hidden;

  border:
    1px solid rgba(255,255,255,0.08);

  border-radius: 23px;

  background: #181818;

  box-shadow:
    0 30px 70px rgba(0,0,0,0.4);

}


.assistant-window__header {

  height: 62px;

  padding:
    0 20px;

  display: flex;

  align-items: center;

  border-bottom:
    1px solid rgba(255,255,255,0.07);

}


.assistant-window__identity {

  display: flex;

  align-items: center;

  gap: 9px;

}


.assistant-window__identity strong {

  color: var(--white);

  font-size: 11px;

  font-weight: 500;

}


.assistant-window__indicator {

  width: 7px;

  height: 7px;

  border-radius: 50%;

  background: var(--blue);

  box-shadow:
    0 0 12px rgba(0,166,251,0.7);

}


.assistant-window__messages {

  min-height: 380px;

  padding: 25px;

  display: flex;

  flex-direction: column;

  gap: 18px;

}


.assistant-message {

  max-width: 78%;

  padding: 14px 16px;

  border-radius: 12px;

  font-size: 11px;

  line-height: 1.7;

}


.assistant-message--user {

  align-self: flex-end;

  background:
    rgba(0,166,251,0.1);

  border:
    1px solid rgba(0,166,251,0.12);

  color: var(--text-soft);

}


.assistant-message--assistant {

  align-self: flex-start;

  background: #252525;

  border:
    1px solid rgba(255,255,255,0.06);

  color: var(--text-soft);

}


.assistant-message__label {

  display: block;

  margin-bottom: 5px;

  color: var(--blue);

  font-size: 8px;

  font-weight: 600;

  letter-spacing: 0.12em;

}


.assistant-window__input {

  position: absolute;

  left: 20px;

  right: 20px;

  bottom: 18px;

  height: 47px;

  padding:
    0 15px;

  display: flex;

  align-items: center;

  border:
    1px solid rgba(255,255,255,0.08);

  border-radius: 10px;

  background: #222222;

  color: #666666;

  font-size: 10px;

}



/* =========================================================
   BETA
========================================================= */

.beta-section {

  padding: 10rem 2rem;

  background: #151515;

  border-top: 1px solid #292929;

  border-bottom: 1px solid #292929;

}


.beta-inner {

  width: min(100% - 4rem, 90rem);

  margin: auto;

  text-align: center;

}


.beta-badge {

  display: inline-block;

  margin-bottom: 2rem;

  padding: .6rem 1rem;

  border: 1px solid rgba(255,167,0,.45);

  border-radius: 999px;

  color: var(--orange);

  font-size: 1rem;
  font-weight: 700;

  letter-spacing: .15em;

}


.beta-inner h2 {

  margin-bottom: 1.8rem;

  color: white;

  font-size: clamp(3rem, 4vw, 5rem);

  font-weight: 500;

  letter-spacing: -.05em;

}


.beta-inner > p {

  max-width: 65rem;

  margin: auto;

  color: #777;

  font-size: 1.5rem;

}


.availability {

  display: flex;

  justify-content: center;

  flex-wrap: wrap;

  gap: 1rem;

  margin-top: 4rem;

}


.availability-item {

  min-width: 19rem;

  display: flex;

  align-items: center;

  gap: 1.2rem;

  padding: 1.4rem 1.7rem;

  border: 1px solid #333;

  border-radius: 1.2rem;

  text-align: left;

}


.availability-icon {

  width: 2.8rem;
  height: 2.8rem;

  display: grid;
  place-items: center;

  border-radius: 50%;

  color: #777;

  background: #252525;

}


.availability-item strong {

  display: block;

  color: #ddd;

  font-size: 1.15rem;

}


.availability-item span:last-child {

  display: block;

  color: #666;

  font-size: .9rem;

}


.availability-item.available {

  border-color: rgba(0,166,251,.3);

}


.availability-item.available .availability-icon {

  color: white;

  background: var(--blue);

}



/* =========================================================
   FINAL CTA
========================================================= */

.final-cta {

  position: relative;

  padding: 16rem 2rem;

  overflow: hidden;

  background:

    radial-gradient(
      circle at 50% 50%,
      rgba(0,166,251,.15),
      transparent 35rem
    ),

    #1f1f1f;

}


.final-inner {

  position: relative;
  z-index: 2;

  max-width: 85rem;

  margin: auto;

  text-align: center;

}


.final-inner h2 {

  color: white;

  font-size: clamp(7rem, 12vw, 13rem);

  font-weight: 500;

  letter-spacing: -.09em;

  line-height: .9;

}


.final-inner h2 span {

  display: block;

  color: var(--orange);

}


.final-inner p {

  max-width: 58rem;

  margin: 4rem auto;

  color: #888;

  font-size: 1.6rem;

}


.final-actions {

  display: flex;

  justify-content: center;

  flex-wrap: wrap;

  gap: 1rem;

}


.final-glow {

  position: absolute;

  width: 20rem;
  height: 20rem;

  left: 50%;
  top: 50%;

  transform: translate(-50%, -50%);

  border-radius: 50%;

  background: rgba(255,167,0,.06);

  filter: blur(100px);

}



/* =========================================================
   FOOTER
========================================================= */

.site-footer {

  padding: 7rem 2rem 3rem;

  background: #111;

  border-top: 1px solid #292929;

}


.footer-main {

  width: min(100% - 4rem, var(--max-width));

  margin: auto;

  display: grid;

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

  gap: 5rem;

  padding-bottom: 6rem;

}


.footer-logo {

  color: white;

  font-size: 3rem;
  font-weight: 600;

  letter-spacing: -.05em;

}


.footer-brand p {

  max-width: 30rem;

  margin: 1.5rem 0;

  color: #666;

  font-size: 1.2rem;

}


.footer-status {

  display: flex;

  align-items: center;

  gap: .8rem;

  color: #777;

  font-size: 1rem;

}


.footer-status span {

  width: .7rem;
  height: .7rem;

  border-radius: 50%;

  background: var(--blue);

}


.footer-column {

  display: flex;

  flex-direction: column;

  gap: 1rem;

}


.footer-column strong {

  margin-bottom: .8rem;

  color: #ddd;

  font-size: 1.1rem;

}


.footer-column a {

  color: #666;

  font-size: 1.1rem;

  transition: color .2s ease;

}


.footer-column a:hover {

  color: var(--blue);

}


.footer-bottom {

  width: min(100% - 4rem, var(--max-width));

  margin: auto;

  padding-top: 2.5rem;

  display: flex;

  justify-content: space-between;

  border-top: 1px solid #292929;

  color: #555;

  font-size: 1rem;

}



/* =========================================================
   RESPONSIVE
========================================================= */

@media screen and (max-width: 1050px) {

  .main-nav {
    gap: 1.8rem;
  }

  .header-inner {
    gap: 2rem;
  }

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

  .hero-content {
    text-align: center;
    margin: auto;
  }

  .hero-description {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-actions,
  .hero-meta {
    justify-content: center;
  }

  .hero-product {
    min-height: 50rem;
  }

  .feature-inner,
  .feature-inner-reverse {
    grid-template-columns: 1fr;
    gap: 6rem;
  }

  .feature-copy {
    max-width: 70rem;
  }

  .feature-inner-reverse .feature-visual {
    order: 2;
  }

  .feature-copy {
    text-align: center;
    margin: auto;
  }

  .feature-tags,
  .workout-points {
    justify-content: center;
  }

  .assistant-inner {
    grid-template-columns: 1fr;
    gap: 4rem;
  }

  .assistant-visual {
    order: 2;
  }

  .assistant-copy {
    text-align: center;
    margin: auto;
  }

  .assistant-actions {
    justify-content: center;
  }

}


@media screen and (max-width: 850px) {

  .main-nav {
    display: none;
  }

  .header-inner {
    width: calc(100% - 3rem);
  }

  .platform-map-inner {
    grid-template-columns: repeat(2, 1fr);
  }

  .platform-item:nth-child(2) {
    border-right: 1px solid #292929;
  }

  .platform-item:nth-child(3) {
    border-top: 1px solid #292929;
  }

  .platform-item:nth-child(4) {
    border-top: 1px solid #292929;
  }

  .dashboard-preview {
    grid-template-columns: 1fr;
  }

  .dashboard-sidebar {
    display: none;
  }

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

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

}


@media screen and (max-width: 600px) {

  html {
    font-size: 58%;
  }

  .header-inner {
    height: 6.2rem;
  }

  .brand {
    font-size: 2.4rem;
  }

  .beta-label {
    display: none;
  }

  .header-start {
    padding: .8rem 1.5rem;
  }

  .hero-inner {
    padding-top: 7rem;
    padding-bottom: 8rem;
  }

  .hero-product {
    min-height: 42rem;
  }

  .hero-phone {
    width: 20rem;
  }

  .orbit-one {
    width: 38rem;
    height: 38rem;
  }

  .orbit-two {
    width: 30rem;
    height: 30rem;
  }

  .floating-stat {
    transform: scale(.85);
  }

  .stat-recovery {
    right: -1rem;
  }

  .stat-workout {
    left: -1rem;
  }

  .hero-meta {
    flex-direction: column;
    gap: .5rem;
  }

  .meta-divider {
    display: none;
  }

  .statement,
  .feature,
  .recovery-philosophy,
  .progress-section,
  .journal-section,
  .assistant-section,
  .final-cta {
    padding-top: 9rem;
    padding-bottom: 9rem;
  }

  .platform-map-inner {
    grid-template-columns: 1fr 1fr;
  }

  .platform-item {
    min-height: 11rem;
    padding: 2rem;
  }

  .feature-visual {
    min-height: 40rem;
  }

  .visual-data-card {
    right: -1rem;
    bottom: 3rem;
  }

  .philosophy-inner {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .philosophy-number {
    margin-bottom: 1rem;
  }

  .dashboard-main {
    padding: 2rem;
  }

  .dashboard-stats {
    gap: 1rem;
  }

  .dashboard-stats div {
    padding-left: 1rem;
  }

  .dashboard-stats strong {
    font-size: 2rem;
  }

  .availability {
    flex-direction: column;
  }

  .availability-item {
    width: 100%;
  }

  .footer-main {
    grid-template-columns: 1fr 1fr;
    gap: 4rem 2rem;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }

  .footer-bottom {
    flex-direction: column;
    gap: .8rem;
  }

}


@media screen and (max-width: 430px) {

  .hero h1 {
    font-size: 5.8rem;
  }

  .hero-subheading {
    font-size: 2.3rem;
  }

  .hero-actions {
    flex-direction: column;
  }

  .button {
    width: 100%;
  }

  .hero-phone {
    width: 18rem;
  }

  .floating-stat {
    display: none;
  }

  .platform-map-inner {
    grid-template-columns: 1fr;
  }

  .platform-item,
  .platform-item:nth-child(3),
  .platform-item:nth-child(4) {
    border-right: 1px solid #292929;
    border-top: 1px solid #292929;
  }

  .platform-item:first-child {
    border-top: none;
  }

  .feature-visual {
    min-height: 34rem;
  }

  .avatar-frame {
    width: 85%;
  }

  .visual-data-card {
    width: 15rem;
    right: 0;
  }

  .exercise-window {
    width: 100%;
  }

  .anatomy-node {
    transform: scale(.8);
  }

  .node-muscle {
    right: -1rem;
  }

  .node-movement {
    left: -1rem;
  }

  .assistant-orb {
    width: 19rem;
    height: 19rem;
  }

  .ring-one {
    width: 24rem;
    height: 24rem;
  }

  .ring-two {
    width: 29rem;
    height: 29rem;
  }

  .assistant-orb span {
    font-size: 4.5rem;
  }

  .assistant-actions {
    flex-direction: column;
  }

  .assistant-login,
  .assistant-signup {
    width: 100%;
  }

  .final-inner h2 {
    font-size: 7rem;
  }

}