/* PowerPullUp — 100 Day Redesign · Tokens & primitives */
:root{
  --bg:#08090C;
  --bg-2:#0E1015;
  --surface:#151821;
  --surface-2:#1C202B;
  --surface-3:#242936;
  --line:#2A2F3A;
  --line-2:#FF6A2A;
  --txt:#F4F5F7;
  --txt-2:#A0A6B2;
  --txt-3:#626A78;
  --txt-4:#3E4450;
  --accent:#FF4D1C;
  --accent-2:#FF7A2F;
  --accent-dark:#C93410;
  --accent-glow:rgba(255,77,28,0.38);
  --success:#22C97A;
  --warn:#F5B946;
  --danger:#FF4D4D;
  --gold:#F6C453;
  --level-blue:#4D8DFF;
  --premium:#8B5CF6;
  --display:'Oswald',system-ui,sans-serif;
  --body:'Manrope',system-ui,sans-serif;
  --num:'Oswald',system-ui,sans-serif;
}
.pp{font-family:var(--body);color:var(--txt);background:var(--bg);height:100%;width:100%;overflow:hidden;position:relative;display:flex;flex-direction:column;-webkit-font-smoothing:antialiased;letter-spacing:0.005em}
.pp *{box-sizing:border-box}
.pp .display{font-family:var(--display);letter-spacing:0.02em;text-transform:uppercase;font-weight:700;line-height:0.98}
.pp .num{font-family:var(--num);font-variant-numeric:tabular-nums;font-weight:600}

.pp-scroll{flex:1;overflow-y:auto;overflow-x:hidden}
.pp-scroll::-webkit-scrollbar{display:none}

/* Status bar */
.pp-status{height:28px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;font-size:12px;font-weight:600;color:var(--txt);flex-shrink:0;background:var(--bg)}
.pp-status .right{display:flex;gap:5px;align-items:center}
.pp-status svg{display:block}

/* App bar */
.pp-bar{display:flex;align-items:center;justify-content:space-between;padding:14px 18px 8px;flex-shrink:0;background:var(--bg)}
.pp-bar .icon{width:36px;height:36px;border-radius:10px;background:var(--surface);display:flex;align-items:center;justify-content:center;border:1px solid var(--line)}
.pp-bar .logo{font-family:var(--display);font-size:18px;letter-spacing:0.06em}
.pp-bar .logo b{color:var(--accent)}

/* Buttons */
.pp-btn{height:54px;border-radius:14px;display:flex;align-items:center;justify-content:center;gap:8px;font-family:var(--body);font-weight:800;font-size:15px;letter-spacing:0.04em;text-transform:uppercase;cursor:pointer;border:none}
.pp-btn.primary{background:var(--accent);color:#0A0A0D;box-shadow:0 10px 30px -8px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.25)}
.pp-btn.ghost{background:transparent;color:var(--txt);border:1px solid var(--line-2)}
.pp-btn.dark{background:var(--surface-2);color:var(--txt);border:1px solid var(--line)}
.pp-btn.sm{height:40px;font-size:12px;border-radius:10px;padding:0 14px}

/* Cards */
.pp-card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:16px}
.pp-card.flat{background:var(--bg-2)}

/* Day chip */
.day-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;background:rgba(255,87,34,0.12);color:var(--accent);font-size:11px;font-weight:800;letter-spacing:0.12em;text-transform:uppercase;border:1px solid rgba(255,87,34,0.25)}
.day-chip .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent)}

/* Sections / labels */
.eyebrow{font-size:10px;font-weight:800;letter-spacing:0.18em;text-transform:uppercase;color:var(--txt-3)}
.eyebrow.acc{color:var(--accent)}
.h1{font-family:var(--display);font-size:32px;line-height:1;letter-spacing:0.01em;text-transform:uppercase}
.h2{font-family:var(--display);font-size:22px;line-height:1.05;letter-spacing:0.02em;text-transform:uppercase}
.h3{font-size:15px;font-weight:800;letter-spacing:0.02em}
.muted{color:var(--txt-2);font-size:13px;line-height:1.4}

/* Phone shell (artboard sized) */
.phone{width:340px;height:720px;background:#000;border-radius:34px;overflow:hidden;position:relative;border:1px solid #2a2a30;box-shadow:0 30px 60px -20px rgba(0,0,0,0.6),0 8px 24px -8px rgba(0,0,0,0.4)}

/* Flame number ring */
.ring{position:relative}

/* Stat tile */
.stat{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 12px}
.stat .v{font-family:var(--num);font-size:24px;line-height:1;color:var(--txt);margin-top:6px}
.stat .l{font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--txt-3);font-weight:700}

/* Progress bar */
.bar{height:6px;background:var(--surface-2);border-radius:99px;overflow:hidden}
.bar > i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2));border-radius:99px}

/* Calendar dots */
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal .d{aspect-ratio:1;border-radius:8px;background:var(--surface-2);display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--txt-3);font-weight:700}
.cal .d.done{background:rgba(34,201,122,0.15);color:#22C97A;border:1px solid rgba(34,201,122,0.4)}
.cal .d.today{background:var(--accent);color:#0A0A0D}
.cal .d.miss{background:rgba(255,77,77,0.1);color:rgba(255,255,255,0.3);border:1px dashed rgba(255,77,77,0.3)}

/* Hero photo treatment — duotone via filters */
.hero-img{filter:contrast(1.05) saturate(0.7) brightness(0.85)}
.hero-mask{position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(10,10,13,0.6) 70%,#0A0A0D 100%)}

/* Numeric counter for workout */
.counter{font-family:var(--num);font-size:148px;line-height:0.85;color:var(--txt);letter-spacing:-0.02em;text-shadow:0 0 60px rgba(255,87,34,0.25)}

/* Tab bar (segmented) */
.seg{display:flex;background:var(--surface-2);border-radius:12px;padding:4px;gap:4px}
.seg > div{flex:1;padding:8px 10px;border-radius:9px;font-size:12px;font-weight:700;color:var(--txt-2);text-align:center}
.seg > div.on{background:var(--accent);color:#0A0A0D}

/* Switches */
.sw{width:38px;height:22px;border-radius:99px;background:var(--surface-3);position:relative}
.sw > i{position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#fff}
.sw.on{background:var(--accent)}
.sw.on > i{left:19px}

/* Bottom sheet popup */
.sheet{background:var(--bg-2);border-radius:24px 24px 0 0;border-top:1px solid var(--line-2);padding:8px 18px 22px;flex-shrink:0}
.sheet .grab{width:36px;height:4px;background:var(--surface-3);border-radius:99px;margin:6px auto 16px}

/* Glow accents */
.glow-accent{position:absolute;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,var(--accent-glow),transparent 70%);pointer-events:none}

/* Photo placeholder grid */
.placeholder-bar{background:repeating-linear-gradient(135deg,#1a1a20 0 12px,#16161c 12px 24px);position:relative;overflow:hidden}

/* Achievement card (locked / unlocked) */
.ach{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.ach.locked{opacity:0.55}
.ach .icon{width:62px;height:62px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#2a2d38,#15171e);display:flex;align-items:center;justify-content:center;border:1px solid var(--line-2)}
.ach.unlocked .icon{background:radial-gradient(circle at 30% 30%,rgba(255,87,34,0.5),rgba(255,87,34,0.1));border-color:rgba(255,87,34,0.4);box-shadow:0 0 20px rgba(255,87,34,0.25)}
.ach .t{font-size:11px;font-weight:800;letter-spacing:0.04em}
.ach .s{font-size:10px;color:var(--txt-3)}

/* Subtle frame for level start */
.level-card{background:linear-gradient(180deg,#1a1c25,#101218);border:1px solid var(--line-2);border-radius:20px;padding:16px;position:relative;overflow:hidden}

/* Underline tab */
.utab{display:flex;gap:18px;border-bottom:1px solid var(--line);padding:0 18px}
.utab > div{padding:10px 0;font-size:12px;font-weight:700;color:var(--txt-3);letter-spacing:0.06em;text-transform:uppercase;border-bottom:2px solid transparent;margin-bottom:-1px}
.utab > div.on{color:var(--txt);border-color:var(--accent)}

/* Nav pill at bottom */
.nav-pill{position:absolute;bottom:6px;left:50%;transform:translateX(-50%);width:108px;height:4px;background:rgba(255,255,255,0.35);border-radius:99px}

/* Rep dot strip */
.dots{display:flex;gap:5px}
.dots > i{flex:1;height:6px;border-radius:99px;background:var(--surface-3)}
.dots > i.on{background:var(--accent)}
.dots > i.cur{background:var(--accent);box-shadow:0 0 10px var(--accent-glow)}

/* Generic hairline */
.hr{height:1px;background:var(--line);margin:14px -16px}

/* Strength index radial */
.radial{width:140px;height:140px;border-radius:50%;background:conic-gradient(var(--accent) 0 78%,var(--surface-2) 78% 100%);display:flex;align-items:center;justify-content:center;position:relative}
.radial::before{content:"";position:absolute;inset:8px;border-radius:50%;background:var(--bg)}
.radial .v{position:relative;font-family:var(--num);font-size:38px}

/* ============================================================
   MOBILE: устранение горизонтального скролла
   Обрезает элементы, которые на узких экранах вылезают за край
   (макеты телефонов в hero, широкие секции). Десктоп не затрагивается.
   ============================================================ */
html, body {
  max-width: 100%;
  overflow-x: hidden; /* запасной вариант для старых браузеров */
  overflow-x: clip;   /* clip обрезает горизонтальный выход за край, но НЕ ломает position:sticky */
}
#root {
  overflow-x: clip;
}
@media (max-width: 880px) {
  /* hero-блок с абсолютными телефонами не должен расширять страницу */
  .hero-phones {
    max-width: 100%;
    overflow: clip;
  }
}

/* ============================================================
   SCROLL REVEAL — плавна поява секцій при прокрутці
   Клас .pp-reveal додається скриптом js/scroll-reveal.js ТІЛЬКИ
   якщо JS і IntersectionObserver доступні. Тому при вимкненому
   JS контент завжди видимий (нічого не ховається).
   ============================================================ */
.pp-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}
.pp-reveal.pp-in {
  opacity: 1;
  transform: none;
}
/* Повага до системного налаштування «зменшити рух» */
@media (prefers-reduced-motion: reduce) {
  .pp-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}