@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,500;0,600;0,700;0,800;1,600;1,700&family=DM+Mono&family=Noto+Sans+SC:wght@400;500;600;700&display=swap');

:root { --hub-ink:#121212; --hub-panel:#1b1b1b; --hub-paper:#f2efe8; --hub-muted:#a9a69f; --hub-line:rgba(255,255,255,.14); --hub-red:#e64631; --hub-red-bright:#ff654c; --hub-display:'Barlow Condensed','Noto Sans SC',sans-serif; --hub-sans:'Noto Sans SC',-apple-system,BlinkMacSystemFont,sans-serif; --hub-mono:'DM Mono',monospace; }
* { box-sizing:border-box; }
.hub-topbar { height:56px; position:fixed; inset:0 0 auto; display:flex; align-items:center; gap:28px; z-index:999; padding:0 clamp(18px,4vw,54px); background:rgba(18,18,18,.96); border-bottom:1px solid var(--hub-line); color:#fff; font-family:var(--hub-sans); }
.hub-brand { color:#fff!important; text-decoration:none!important; display:flex; align-items:center; gap:9px; font-family:var(--hub-display); letter-spacing:.06em; font-size:20px; font-weight:700; white-space:nowrap; }
.hub-mark { display:grid; place-items:center; width:24px; height:24px; background:var(--hub-red); color:#fff; font-size:18px; line-height:1; font-style:italic; }
.hub-nav { display:flex; align-items:stretch; align-self:stretch; margin-left:12px; }
.hub-nav a { position:relative; color:rgba(255,255,255,.62); padding:0 17px; line-height:56px; text-decoration:none!important; font-size:13px; transition:color .18s ease; white-space:nowrap; }
.hub-nav a:hover,.hub-nav a[aria-current='page'] { color:#fff; }
.hub-nav a[aria-current='page']::after { content:''; height:2px; background:var(--hub-red); position:absolute; left:17px; right:17px; bottom:0; }
.hub-cta-small { margin-left:auto; color:#fff!important; text-decoration:none!important; font-size:12px; letter-spacing:.03em; white-space:nowrap; }
.hub-cta-small span { color:var(--hub-red-bright); font-size:16px; margin-left:4px; }

.hub-home { margin:0; min-height:100vh; background:var(--hub-ink); color:#fff; font-family:var(--hub-sans); }
.home-hero { min-height:54vh; padding:clamp(130px,17vw,210px) clamp(22px,8vw,126px) clamp(70px,9vw,120px); position:relative; overflow:hidden; background:radial-gradient(ellipse 60% 110% at 90% 20%,rgba(230,70,49,.3),transparent 65%),linear-gradient(105deg,#0f0f0f 0%,#181716 70%,#30221d 100%); }
.home-hero::after { content:'GYM'; position:absolute; right:-.08em; bottom:-.38em; font:800 clamp(240px,39vw,600px)/.8 var(--hub-display); color:rgba(255,255,255,.035); letter-spacing:-.08em; pointer-events:none; }
.hero-kicker { position:relative; z-index:1; color:var(--hub-red-bright); font:12px var(--hub-mono); letter-spacing:.11em; display:flex; align-items:center; gap:10px; }
.hero-kicker i { display:block; width:30px; height:1px; background:currentColor; }
.home-hero h1 { position:relative; z-index:1; margin:20px 0; font:700 clamp(64px,10vw,148px)/.83 var(--hub-display); letter-spacing:-.025em; text-transform:uppercase; max-width:800px; }
.home-hero h1 em { color:var(--hub-red-bright); font-style:italic; }
.home-hero p { position:relative; z-index:1; color:#cecbc4; font-size:15px; line-height:1.9; max-width:420px; }
.hero-actions { position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }
.hub-button { padding:13px 18px; text-decoration:none!important; display:inline-flex; align-items:center; gap:22px; font-weight:600; font-size:13px; transition:transform .15s,background .15s; }
.hub-button:hover { transform:translateY(-2px); }
.hub-button span { font-size:18px; }
.hub-button-primary { background:var(--hub-red); color:#fff!important; }.hub-button-primary:hover { background:var(--hub-red-bright); }
.hub-button-ghost { border:1px solid var(--hub-line); color:#fff!important; }.hub-button-ghost:hover { background:rgba(255,255,255,.08); }
.plan-callout { min-height:290px; display:flex; align-items:center; justify-content:space-between; gap:36px; padding:clamp(42px,6vw,76px) clamp(22px,8vw,126px); background:#dcd7cd; color:#181818; }.plan-callout h2 { margin:8px 0 10px; font:700 clamp(40px,5vw,66px)/.9 var(--hub-display); }.plan-callout p { max-width:590px; color:#5f5b55; font-size:14px; line-height:1.8; }.plan-callout .door-label { color:#87665f; }.plan-callout .hub-button { flex-shrink:0; }
.library-doors { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
.library-door { min-height:420px; padding:34px clamp(26px,5vw,76px); position:relative; overflow:hidden; color:#fff; text-decoration:none!important; display:block; border-top:1px solid var(--hub-line); }
.video-door { background:#20201f; border-right:1px solid var(--hub-line); }.exercise-door { background:#e74932; }
.door-index { font:12px var(--hub-mono); letter-spacing:.08em; opacity:.62; }.door-content { position:relative; z-index:2; padding-top:60px; max-width:390px; }.door-label { font:11px var(--hub-mono); letter-spacing:.13em; }.door-content h2 { margin:10px 0 12px; font:700 clamp(46px,6vw,80px)/.85 var(--hub-display); letter-spacing:-.01em; }.door-content p { max-width:310px; color:rgba(255,255,255,.73); line-height:1.8; font-size:14px; }.door-link { display:inline-flex; gap:14px; align-items:center; margin-top:35px; font-size:13px; font-weight:600; }.door-link b { font-size:18px; }.door-art { position:absolute; right:-12px; bottom:-15px; width:45%; height:78%; opacity:.85; }.door-art span { position:absolute; display:block; }.door-art-video span:nth-child(1) { width:9px;height:100%;right:44%;background:var(--hub-red);transform:rotate(25deg); }.door-art-video span:nth-child(2) { width:62%;height:9px;right:-5%;bottom:20%;background:#77716b;transform:rotate(-13deg); }.door-art-video span:nth-child(3) { width:40px;height:40px;border:8px solid var(--hub-red);border-radius:50%;right:12%;top:23%; }.door-art-exercise span:nth-child(1) { width:75%;height:75%;right:0;bottom:0;border:24px solid rgba(18,18,18,.88);border-radius:50%; }.door-art-exercise span:nth-child(2) { width:46%;height:46%;right:15%;bottom:15%;border:19px solid rgba(18,18,18,.88);border-radius:50%; }.door-art-exercise span:nth-child(3) { width:8px;height:110%;right:43%;bottom:-10%;background:#161616;transform:rotate(28deg); }.door-art-exercise span:nth-child(4) { width:110%;height:8px;right:-16%;bottom:42%;background:#161616;transform:rotate(-17deg); }.home-note { display:flex; justify-content:space-between; align-items:center; padding:24px clamp(22px,8vw,126px); background:var(--hub-paper); color:#181818; }.home-note span { font:700 24px var(--hub-display); letter-spacing:.06em; }.home-note p { margin:0; color:#77716b; font:11px var(--hub-mono); letter-spacing:.12em; }

/* Video library integration */
body.hub-video { background:#121212; }.hub-video .header { top:56px; height:58px; padding:0 clamp(14px,3vw,34px); background:#181818; border-color:var(--hub-line); }.hub-video .layout { margin-top:114px; height:calc(100vh - 114px); }.hub-video .header .logo { font:700 22px var(--hub-display); letter-spacing:.03em; }.hub-video .header .video-count { font-family:var(--hub-mono); color:#a9a69f; }.hub-video .header-left { min-width:auto; }.hub-video .header-center { max-width:620px; }.hub-video .search-input { background:#252525; border-color:#3a3a3a; border-radius:0; }.hub-video .btn-mode,.hub-video .sort-select { border-radius:0; }.hub-video .btn-mode.active,.hub-video .btn-mode:hover { background:var(--hub-red); border-color:var(--hub-red); }.hub-video .sidebar { background:#171717; }.hub-video .card { border-radius:0; background:#1b1b1b; }.hub-video .card:hover { border-color:var(--hub-red); }.hub-video .tag.accent { background:var(--hub-red); }.hub-video .page-btn.active { background:var(--hub-red); border-color:var(--hub-red); }

/* Exercise library integration */
body.hub-exercise { background:#181818; }.hub-exercise .app-shell { height:calc(100vh - 56px); margin-top:56px; }.hub-exercise .sidebar { background:#181818; border-color:#373737; }.hub-exercise .sidebar-header { background:#181818; border-color:#373737; }.hub-exercise .sidebar-logo { color:#f4f1ea; font-family:var(--hub-display); font-size:25px; letter-spacing:.05em; }.hub-exercise .sidebar-logo span { color:var(--hub-red-bright); }.hub-exercise .db-setup-btn { border-color:#4a4a4a; color:#d8d5ce; }.hub-exercise .main-content { background:#121212; }.hub-exercise .results-bar { background:#121212; border-color:#373737; }.hub-exercise .exercise-card { background:#1d1d1d; border-color:#373737; border-radius:0; }.hub-exercise .exercise-card:hover { border-color:var(--hub-red); }.hub-exercise .exercise-name,.hub-exercise .results-count,.hub-exercise .filter-summary { color:#f4f1ea; }.hub-exercise .exercise-meta,.hub-exercise .card-category,.hub-exercise .filter-clear,.hub-exercise .show-more-btn { color:#aaa69e; }.hub-exercise .filter-chip { background:#282828; border-color:#444; color:#d8d5ce; }.hub-exercise .filter-chip.active { background:var(--hub-red); border-color:var(--hub-red); color:#fff; }.hub-exercise .search-box { background:#282828; border-color:#444; color:#f4f1ea; }.hub-exercise .exercise-image-wrap,.hub-exercise .exercise-image { background:#242424; }.hub-exercise .active-filter { background:#36231e; border-color:#714536; color:#f5d8d2; }.hub-exercise .modal-panel,.hub-exercise .db-panel { background:#1c1c1c; color:#f4f1ea; }.hub-exercise .modal-header,.hub-exercise .db-panel-header,.hub-exercise .db-step { border-color:#393939; }.hub-exercise .modal-close,.hub-exercise .db-panel-close { color:#f4f1ea; }.hub-exercise .modal-meta-item,.hub-exercise .muscle-tag { background:#292929; color:#ddd9d1; }.hub-exercise .instructions-list li::before { background:var(--hub-red); }.hub-exercise .modal-overlay,.hub-exercise .db-overlay { background:rgba(0,0,0,.75); }
@media (max-width:720px){ .hub-topbar { gap:8px; padding:0 14px; }.hub-brand { font-size:16px; }.hub-mark { width:21px;height:21px;font-size:15px; }.hub-nav { margin-left:0; }.hub-nav a { padding:0 6px; font-size:11px; }.hub-nav a[aria-current='page']::after { left:6px;right:6px; }.hub-cta-small { display:none; }.home-hero { min-height:500px; padding-top:130px; }.library-doors { grid-template-columns:1fr; }.library-door { min-height:340px; }.video-door { border-right:0; }.door-content { padding-top:32px; }.door-art { width:48%; height:65%; }.home-note p { display:none; }.plan-callout { display:block; }.plan-callout .hub-button { margin-top:24px; }.hub-video .header { top:56px; height:52px; }.hub-video .layout { margin-top:108px; height:calc(100vh - 108px); }.hub-video .header-left .logo { font-size:18px; }.hub-video .header-center { min-width:0; }.hub-video .header-right .btn-mode,.hub-video .header-right .sort-select { display:none; }.hub-video .header-right .btn-filter-mobile { display:block; }.hub-exercise .app-shell { grid-template-columns:1fr; }.hub-exercise .sidebar { display:none; }.hub-exercise .main-content { min-width:0; } }
