/*
Theme Name: FlowFit
Theme URI: https://astrotopia.ru
Author: FlowFit Team
Description: FlowFit — fitness & wellness blog theme
Version: 1.0
Text Domain: flowfit
*/
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{background:#f0ede8;font-family:'Manrope',sans-serif;min-width:1200px}
nav{background:rgba(240,237,232,0.85);border-bottom:1px solid rgba(0,0,0,0.06);position:sticky;top:0;z-index:100;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);}
.nav-inner{max-width:1280px;margin:0 auto;padding:18px 48px;display:flex;align-items:center;justify-content:space-between;}
.logo{font-family:'Sora',sans-serif;font-size:36px;font-weight:800;letter-spacing:-0.03em;display:flex;align-items:baseline;}
.c{display:inline-block;will-change:transform;}
.cF1-l{background:linear-gradient(160deg,#862a78,#0022af);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:aF1 4.2s ease-in-out infinite;}
.cl-l{background:linear-gradient(160deg,#6a20c0,#0033cc);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:al 3.8s ease-in-out infinite 0.3s;}
.co-l{background:linear-gradient(160deg,#4420d0,#0044dd);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:ao 4.5s ease-in-out infinite 0.6s;}
.cw-l{background:linear-gradient(160deg,#2225e0,#cc0080);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:aw 3.6s ease-in-out infinite 0.9s;}
.cF2{color:#0d0d14;animation:aF2 4.8s ease-in-out infinite 1.1s;}
.ci{color:#0d0d14;animation:ai 3.4s ease-in-out infinite 1.3s;}
.ct{color:#0d0d14;animation:at 4s ease-in-out infinite 1.5s;}
@keyframes aF1{0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(-4px) rotate(-0.8deg)}70%{transform:translateY(2px) rotate(0.4deg)}}
@keyframes al{0%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(-3px) rotate(1deg)}65%{transform:translateY(3px) rotate(-0.5deg)}}
@keyframes ao{0%,100%{transform:translateY(0) scale(1)}40%{transform:translateY(-5px) scale(1.02)}75%{transform:translateY(2px) scale(0.99)}}
@keyframes aw{0%,100%{transform:translateY(0) rotate(0)}20%{transform:translateY(-3px) rotate(-0.6deg)}60%{transform:translateY(3px) rotate(0.8deg)}}
@keyframes aF2{0%,100%{transform:translateY(0)}35%{transform:translateY(-2px) rotate(0.4deg)}70%{transform:translateY(3px) rotate(-0.3deg)}}
@keyframes ai{0%,100%{transform:translateY(0) rotate(0)}45%{transform:translateY(-4px) rotate(-1.2deg)}80%{transform:translateY(1px) rotate(0.6deg)}}
@keyframes at{0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(-3px) rotate(0.5deg)}65%{transform:translateY(3px) rotate(-0.4deg)}}
.nav-links{display:flex;gap:28px;align-items:center}
.nav-links a{font-family:'Sora',sans-serif;font-size:18px;font-weight:600;letter-spacing:-0.03em;color:#888;text-decoration:none}
.nav-links a.active{color:#0d0d14}
.nav-links span{color:rgba(0,0,0,0.15);font-size:10px}
.nav-cta{background:linear-gradient(135deg,#862a78,#0022af);color:#fff;padding:14px 36px;border-radius:22px;font-family:'Sora',sans-serif !important;font-size:26px;font-weight:800;letter-spacing:-0.03em;text-decoration:none;box-shadow:0 4px 20px rgba(134,42,120,0.5);transition:box-shadow 0.2s;}
.nav-cta:hover{box-shadow:0 6px 28px rgba(134,42,120,0.7);}
.page{margin:0 auto;padding:40px 48px 80px}
.blog-header{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:32px}
.blog-title{font-family:'Sora',sans-serif;font-size:40px;font-weight:800;letter-spacing:-0.05em;line-height:0.9;color:#0d0d14}
.read-btn{display:flex;align-items:center;justify-content:center;gap:8px;background:#fff;border-radius:50px;padding:12px 24px;font-family:'Sora',sans-serif;font-size:18px;font-weight:700;text-decoration:none;color:#0d0d14;box-shadow:0 2px 16px rgba(0,0,0,0.08);white-space:nowrap;margin-bottom:8px;width:200px;transition:all 0.2s;}
.read-btn:hover{background:#862a78;color:#fff;box-shadow:0 4px 20px rgba(134,42,120,0.4);}
.bento{display:grid;grid-template-columns:1fr 580px 0px 220px;grid-template-rows:320px 200px;gap:8px}
.c-photo{grid-column:1;grid-row:1/3;border-radius:22px;overflow:hidden;position:relative;background:linear-gradient(160deg,#3a2a1a 0%,#6a4a20 50%,#c89050 100%);display:flex;flex-direction:column;}
.c-photo-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;}
.c-photo-bottom{background:#fff;padding:18px 20px 20px;margin-top:auto;position:relative;}
.c-photo-bottom::before{content:'';position:absolute;top:-28px;left:0;right:0;height:30px;background:#fff;clip-path:path('M 0 30 Q 80 5 160 20 Q 260 35 360 10 Q 410 0 473 15 L 473 30 Z');}
.c-photo-person{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:140px;height:280px;background:rgba(0,0,0,0.35);border-radius:70px 70px 0 0}
.c-photo-meta{position:absolute;bottom:16px;left:16px;right:16px;padding:14px 18px;background:rgba(0,0,0,0.45);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:14px;}
.c-photo-meta{padding:0;}
.c-photo-cat{font-family:'Sora',sans-serif;font-size:10px;color:rgba(0,0,0,0.45);font-weight:700;letter-spacing:0.1em;text-transform:uppercase;margin-bottom:6px}
.c-photo-title{font-family:'Sora',sans-serif;font-size:16px;font-weight:800;color:#0d0d14;line-height:1.25;letter-spacing:-0.02em}

/* FEATURE WRAP */
.c-feature-wrap{grid-column:2/4;grid-row:1;position:relative;}

/* Карточка — clip-path пересчитывается JS-ом под реальный размер */
.c-feature{
  width:100%;height:100%;
  background:#862a78;
  border-radius:22px;
  padding:28px 32px;
  position:relative;
  display:flex;flex-direction:column;justify-content:space-between;
}

/* Кружок — снаружи clip-path, внутри wrapper */
.arrow-circle{
  position:absolute;
  top:6px;right:6px;
  width:52px;height:52px;
  border-radius:50%;
  background:rgba(192,212,240,0.95);
  backdrop-filter:blur(10px);
  display:flex;align-items:center;justify-content:center;
  text-decoration:none;
  color:#862a78;font-size:22px;font-weight:700;
  z-index:20;
  transition:0.3s cubic-bezier(.34,1.56,.64,1);
  box-shadow:0 4px 12px rgba(0,0,0,0.1);
}
.arrow-circle:hover{transform:scale(1.12) rotate(12deg)}

.f-cat{font-family:'Sora',sans-serif;font-size:10px;color:rgba(255,255,255,0.5);font-weight:700;letter-spacing:0.1em;text-transform:uppercase;margin-bottom:10px}
.f-title{font-family:'Sora',sans-serif;font-size:26px;font-weight:800;color:#fff;line-height:1.1;letter-spacing:-0.03em;max-width:380px;margin-bottom:12px}
.f-desc{font-size:13px;color:rgba(255,255,255,0.6);line-height:1.6;max-width:380px;margin-bottom:20px}
.f-list{display:flex;flex-direction:column;gap:0;border-top:1px solid rgba(255,255,255,0.15)}
.f-item{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid rgba(255,255,255,0.12);font-family:'Sora',sans-serif;font-size:11px;font-weight:700;color:rgba(255,255,255,0.7);text-transform:uppercase;letter-spacing:0.04em;text-decoration:none;transition:color 0.2s}
.f-item:hover{color:#fff}
.f-item::after{content:'→';font-size:14px}

.c-blue{grid-column:4;grid-row:1;background:#c0d4f0;border-radius:22px;overflow:hidden;position:relative;display:flex;flex-direction:column;justify-content:flex-end}
.c-blue-bg{position:absolute;inset:0;background:linear-gradient(160deg,#b0c8ec 0%,#7090d0 100%)}
.c-blue-person{position:absolute;bottom:0;right:16px;width:100px;height:190px;background:rgba(20,40,120,0.2);border-radius:50px 50px 0 0}
.c-blue-meta{position:relative;z-index:1;padding:18px;background:linear-gradient(to top,rgba(80,110,200,0.3),transparent)}
.c-blue-cat{font-family:'Sora',sans-serif;font-size:9px;color:rgba(0,20,80,0.6);font-weight:700;letter-spacing:0.1em;text-transform:uppercase;margin-bottom:4px;line-height:1.4;}
.c-blue-badge{display:block;background:rgba(255,255,255,0.6);border-radius:4px;padding:1px 7px;font-size:8px;font-weight:700;color:rgba(0,20,80,0.8);width:fit-content;margin-bottom:6px;}
.c-blue-title{font-family:'Sora',sans-serif;font-size:15px;font-weight:800;color:#0a1840;line-height:1.2;letter-spacing:-0.02em}

.c-video{grid-column:2;grid-row:2;background:#1a1228;border-radius:22px;overflow:hidden;position:relative;display:flex;align-items:flex-end}
.c-video-bg{position:absolute;inset:0;background:linear-gradient(160deg,#2a1040 0%,#401060 40%,#b05040 100%)}
.play{position:absolute;top:50%;left:50%;transform:translate(-50%,-65%);width:48px;height:48px;background:rgba(255,255,255,0.92);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;color:#0d0d14;box-shadow:0 4px 20px rgba(0,0,0,0.3)}
.c-video-meta{position:relative;z-index:1;padding:18px 22px;width:100%;background:linear-gradient(to top,rgba(0,0,0,0.55),transparent)}
.v-top{display:flex;gap:12px;align-items:center;margin-bottom:5px}
.v-time{font-family:'Sora',sans-serif;font-size:11px;color:rgba(255,255,255,0.6)}
.v-date{font-family:'Sora',sans-serif;font-size:11px;color:rgba(255,255,255,0.35)}
.v-title{font-family:'Sora',sans-serif;font-size:14px;font-weight:800;color:#fff;line-height:1.2;letter-spacing:-0.02em}

.c-tags{grid-column:3/5;grid-row:2;background:#e4dff4;border-radius:22px;padding:22px;display:flex;flex-direction:column;justify-content:space-between}
.tags-label{font-family:'Sora',sans-serif;font-size:10px;font-weight:700;color:rgba(0,0,0,0.35);text-transform:uppercase;letter-spacing:0.1em;margin-bottom:14px}
.tags-cloud{display:flex;flex-wrap:wrap;gap:7px}
.tag{padding:5px 13px;border-radius:50px;background:rgba(255,255,255,0.7);font-size:12px;font-weight:600;font-family:'Sora',sans-serif;color:#0d0d14;border:1px solid rgba(0,0,0,0.07);cursor:pointer;transition:all 0.2s}
.tag:hover{background:#862a78;color:#fff;border-color:#862a78}
.tag.on{background:#0d0d14;color:#fff;border-color:#0d0d14}
.view-all{display:flex;align-items:center;justify-content:space-between;margin-top:14px;text-decoration:none;font-family:'Sora',sans-serif;font-size:11px;font-weight:700;color:#0d0d14}
.va-circle{width:30px;height:30px;background:#0d0d14;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px}

.c-photo,.c-feature-wrap,.c-blue,.c-video,.c-tags{transition:transform 0.3s cubic-bezier(0.34,1.56,0.64,1)}
.c-photo:hover,.c-feature-wrap:hover,.c-blue:hover,.c-video:hover,.c-tags:hover{transform:translateY(-4px)}

footer{background:#0d0d14;margin-top:80px;}
.theme-toggle{background:none;border:1px solid rgba(0,0,0,0.12);border-radius:50%;width:36px;height:36px;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;margin-left:12px;transition:all 0.2s;}
.theme-toggle:hover{background:rgba(0,0,0,0.06);}

/* ТЁМНАЯ ТЕМА */
body.dark{background:#0d0d14;}
body.dark nav{background:#0d0d14;border-bottom-color:rgba(255,255,255,0.06);}
body.dark .nav-links a{color:rgba(255,255,255,0.5);}
body.dark .nav-links a.active{color:#fff;}
body.dark .blog-title{color:#fff;}
body.dark .read-btn{background:#1a1a2e;color:#fff;box-shadow:0 2px 16px rgba(0,0,0,0.3);}
body.dark .read-btn:hover{background:#862a78;color:#fff;box-shadow:0 4px 20px rgba(134,42,120,0.4);}
body.dark .page{color:#fff;}
body.dark .c-tags{background:#1a1228;}
body.dark .tags-label{color:rgba(255,255,255,0.35);}
body.dark .tag{background:rgba(255,255,255,0.08);color:#fff;border-color:rgba(255,255,255,0.1);}
body.dark .tag.on{background:#fff;color:#0d0d14;border-color:#fff;}
body.dark .view-all{color:#fff;}
body.dark .va-circle{background:#fff;color:#0d0d14;}
body.dark .c-photo-bottom{background:#1a1a2e;}
body.dark .c-photo-cat{color:rgba(255,255,255,0.4);}
body.dark .c-photo-title{color:#fff;}
body.dark .theme-toggle{border-color:rgba(255,255,255,0.2);color:#fff;}
body.dark .theme-toggle:hover{background:rgba(255,255,255,0.08);}
body.dark .cF2{color:#fff;}
body.dark .ci{color:#fff;}
body.dark .ct{color:#fff;}
body.dark .c-photo-bottom{background:#1a1a2e;}
body.dark .c-photo-bottom::before{background:#1a1a2e;}
body.dark .c-photo-cat{color:rgba(255,255,255,0.4);}
body.dark .c-photo-title{color:#fff;}
.footer-inner{max-width:1280px;margin:0 auto;padding:60px 48px 32px;}
.footer-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:48px;}
.footer-logo{font-family:'Sora',sans-serif;font-size:36px;font-weight:800;letter-spacing:-0.03em;display:flex;align-items:baseline;margin-bottom:12px;}
.footer-tagline{font-family:'Sora',sans-serif;font-size:12px;color:rgba(255,255,255,0.3);letter-spacing:0.08em;}
.footer-links{display:flex;gap:64px;}
.footer-col{display:flex;flex-direction:column;gap:12px;}
.footer-col-title{font-family:'Sora',sans-serif;font-size:11px;font-weight:700;color:rgba(255,255,255,0.3);text-transform:uppercase;letter-spacing:0.1em;margin-bottom:4px;}
.footer-col a{font-family:'Sora',sans-serif;font-size:13px;color:rgba(255,255,255,0.6);text-decoration:none;transition:color 0.2s;}
.footer-col a:hover{color:#fff;}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.08);padding-top:24px;display:flex;justify-content:space-between;align-items:center;}
.footer-bottom span{font-family:'Sora',sans-serif;font-size:12px;color:rgba(255,255,255,0.3);}