/* Loaf V101 — profile credit rings, dotted catalogs, homepage showcase, animated 404 */

/* Credit-ring avatar ------------------------------------------------------- */
.profile-credit-ring{
  --credit-p:0;
  --ring-color:#77737f;
  --ring-track:rgba(255,255,255,.12);
  position:relative!important;
  display:grid!important;
  place-items:center!important;
  border-radius:50%!important;
  padding:3px!important;
  overflow:visible!important;
  background:conic-gradient(var(--ring-color) calc(var(--credit-p)*1%),var(--ring-track) 0)!important;
  box-shadow:0 0 0 1px rgba(255,255,255,.05),0 10px 25px rgba(0,0,0,.26)!important;
}
.profile-credit-ring::after{
  content:"";
  position:absolute;
  inset:3px;
  border-radius:50%;
  background:#0a0a0e;
  z-index:0;
}
.profile-credit-ring>img,.profile-credit-ring>.avatar-initial{
  position:relative;
  z-index:1;
  width:100%!important;
  height:100%!important;
  border-radius:50%!important;
  object-fit:cover!important;
  display:grid!important;
  place-items:center!important;
  overflow:hidden!important;
  border:2px solid #0a0a0e!important;
  background:linear-gradient(145deg,#7e29a8,#5e0d83 62%,#39064f)!important;
  color:#fff!important;
  font-weight:800!important;
  font-size:12px!important;
  line-height:1!important;
}
.profile-credit-ring[data-plan="free"]{--ring-color:#77737f}
.profile-credit-ring[data-plan="essential"]{--ring-color:#55b8ff}
.profile-credit-ring[data-plan="plus"],.profile-credit-ring[data-plan="pro"]{--ring-color:#8e60ff}
.profile-credit-ring[data-plan="ultimate"],.profile-credit-ring[data-plan="team"]{--ring-color:#ff5ccf}
.profile-credit-ring[data-unlimited="1"]{background:conic-gradient(from 180deg,#ff5ccf,#9b65ff,#61e7ff,#91ff15,#ff5ccf)!important}
.user-avatar.profile-credit-ring{width:38px!important;height:38px!important}
.user-avatar-lg.profile-credit-ring{width:48px!important;height:48px!important}
.profile-meter-tip{display:none}

.catalog-dotted .navbar .user-chip-v19{
  min-width:0!important;
  padding:3px!important;
  border-radius:999px!important;
  background:rgba(10,10,14,.72)!important;
  border-color:rgba(255,255,255,.07)!important;
  box-shadow:0 10px 34px rgba(0,0,0,.3)!important;
}
.catalog-dotted .navbar .user-chip-copy,.catalog-dotted .navbar .user-chip-chevron{display:none!important}
.catalog-dotted .navbar .user-avatar.profile-credit-ring{width:40px!important;height:40px!important}

/* Dotted dark atmosphere on Templates + Animations ------------------------ */
body.catalog-dotted{
  background:#020203!important;
  min-height:100vh;
}
body.catalog-dotted main{
  position:relative;
  isolation:isolate;
  background:
    radial-gradient(ellipse at 11% 8%,rgba(113,69,255,.13),transparent 28%),
    radial-gradient(ellipse at 87% 20%,rgba(58,207,255,.07),transparent 24%),
    linear-gradient(180deg,#030304 0%,#020203 100%)!important;
}
body.catalog-dotted main::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background-image:radial-gradient(circle,rgba(255,255,255,.16) .7px,transparent .84px);
  background-size:13px 13px;
  opacity:.40;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.92) 78%,rgba(0,0,0,.35) 100%);
  mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.92) 78%,rgba(0,0,0,.35) 100%);
}
body.catalog-dotted main::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 9%,rgba(137,86,255,.09),transparent 24%),
    linear-gradient(90deg,rgba(0,0,0,.26),transparent 13%,transparent 87%,rgba(0,0,0,.26));
}
body.catalog-dotted .page-hero,body.catalog-dotted .page-shell{background:transparent!important}
body.catalog-dotted .page-hero{border-bottom-color:rgba(255,255,255,.045)!important}

/* Homepage creative freedom ------------------------------------------------ */
.home-freedom-v101{padding:105px 0 86px;position:relative}
.home-section-center-v101{text-align:center;max-width:830px;margin:0 auto 36px}
.home-kicker-pink-v101,.home-kicker-green-v101{font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.home-kicker-pink-v101{color:#ff62d9}.home-kicker-green-v101{color:#91ff15}
.home-section-center-v101 h2{margin:13px 0 8px;font:900 clamp(34px,4.2vw,56px)/1.02 Manrope,Inter,sans-serif;letter-spacing:-.055em;color:#fff}
.home-section-center-v101 p{max-width:720px;margin:0 auto;color:#9994a3;font-size:14px;line-height:1.65}
.freedom-demo-v101{max-width:1120px;margin:0 auto;border:1px solid rgba(255,255,255,.085);border-radius:24px;background:#060609;box-shadow:0 38px 110px rgba(0,0,0,.52),0 0 80px rgba(111,69,255,.08);overflow:hidden;position:relative}
.freedom-demo-v101::before{content:"";position:absolute;inset:-30% 12% auto;height:220px;background:radial-gradient(ellipse,rgba(143,89,255,.16),transparent 68%);filter:blur(24px);pointer-events:none}
.freedom-topbar-v101{height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;border-bottom:1px solid rgba(255,255,255,.06);background:#050507;color:#8f8999;font-size:10px}
.freedom-brand-v101,.freedom-actions-v101{display:flex;align-items:center;gap:8px}.freedom-brand-v101 img{width:17px;height:17px}.freedom-brand-v101 b{color:#f3eff8;font-size:11px}.freedom-pill-v101{padding:7px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.07);background:#0a0a0e;color:#8e8799}.freedom-pill-v101.primary{background:linear-gradient(135deg,#8153ff,#6e48f6);color:#fff;border-color:rgba(195,175,255,.22)}
.freedom-stage-v101{padding:22px;background:radial-gradient(circle at 50% 110%,rgba(119,65,255,.19),transparent 35%),#07070b}
.freedom-stage-v101 img{display:block;width:100%;aspect-ratio:16/8.65;object-fit:cover;border-radius:16px;border:1px solid rgba(255,255,255,.07);box-shadow:0 22px 68px rgba(0,0,0,.42)}
.compat-v101{max-width:1120px;margin:30px auto 0;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.compat-v101>span{display:block;text-align:center;color:#8e8996;font-size:11px;margin-bottom:16px}
.compat-track-v101{display:flex;gap:16px;width:max-content;animation:compatScrollV101 25s linear infinite;padding:0 10px 6px}
.compat-icon-v101{width:52px;height:52px;border-radius:14px;border:1px solid rgba(255,255,255,.07);background:linear-gradient(180deg,#0b0c11,#07070a);display:grid;place-items:center;box-shadow:0 10px 25px rgba(0,0,0,.24);position:relative}
.compat-icon-v101 b{font-size:13px;letter-spacing:-.04em;color:#f5f2f8}.compat-icon-v101 small{position:absolute;top:58px;white-space:nowrap;color:#6f6977;font-size:8px;opacity:0;transition:.2s}.compat-icon-v101:hover{transform:translateY(-3px);border-color:rgba(148,95,255,.26)}.compat-icon-v101:hover small{opacity:1}
.compat-icon-v101:nth-child(4n+1) b{color:#a786ff}.compat-icon-v101:nth-child(4n+2) b{color:#62e4ff}.compat-icon-v101:nth-child(4n+3) b{color:#ff66d1}.compat-icon-v101:nth-child(4n) b{color:#98ff35}
@keyframes compatScrollV101{to{transform:translateX(-50%)}}

/* Homepage reviews --------------------------------------------------------- */
.home-reviews-v101{padding:78px 0 92px}
.review-grid-v101{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.review-card-v101{min-height:238px;padding:22px 22px 18px;border:1px solid rgba(255,255,255,.10);border-radius:20px;background:linear-gradient(180deg,rgba(8,8,10,.86),rgba(5,5,7,.94));box-shadow:inset 0 1px rgba(255,255,255,.025),0 24px 65px rgba(0,0,0,.2);display:flex;flex-direction:column;transition:.25s transform,.25s border-color,.25s box-shadow}
.review-card-v101:hover{transform:translateY(-4px);border-color:rgba(145,255,21,.20);box-shadow:0 28px 75px rgba(0,0,0,.32)}
.review-stars-v101{color:#5eeaa6;font-size:13px;letter-spacing:2px;margin-bottom:12px}.review-card-v101 h3{font-size:15px;margin:0 0 10px;color:#f4f2f6}.review-card-v101 p{margin:0;color:#938e9b;font-size:13px;line-height:1.58}
.review-person-v101{margin-top:auto;padding-top:20px;display:flex;align-items:center;gap:10px}.review-avatar-v101{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:900;color:#fff;background:linear-gradient(145deg,#6942ff,#ff5bbd);border:1px solid rgba(255,255,255,.16)}.review-person-v101 div{display:grid;gap:3px}.review-person-v101 b{font-size:12px}.review-person-v101 span{font-size:10px;color:#716c78}
.review-summary-v101{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:26px;color:#8c8793;font-size:11px}.review-summary-v101 i{width:7px;height:7px;border-radius:50%;background:#5eeaa6;box-shadow:0 0 14px rgba(94,234,166,.45)}

/* Homepage CTA ------------------------------------------------------------- */
.cta-v101{padding:54px 0 105px}
.cta-panel-v101{position:relative;min-height:265px;overflow:hidden;border-radius:34px;background:linear-gradient(90deg,#f7f2e8 0%,#f6f2ec 45%,#eee7ff 100%);color:#09090b;box-shadow:0 32px 90px rgba(0,0,0,.34);display:grid;grid-template-columns:1.02fr .98fr;align-items:center}
.cta-copy-v101{padding:46px 32px 46px 64px;position:relative;z-index:3}.cta-copy-v101 h2{margin:0 0 14px;font:900 clamp(30px,3.1vw,48px)/1 Manrope,Inter,sans-serif;letter-spacing:-.05em}.cta-copy-v101 p{margin:0 0 24px;color:#2c2b2f;font-size:17px}.cta-btn-v101{display:inline-flex;align-items:center;justify-content:center;min-width:220px;height:52px;padding:0 22px;border-radius:15px;background:linear-gradient(180deg,#7d55ff,#6745ee);color:#fff;font-weight:900;font-size:13px;box-shadow:0 14px 32px rgba(97,64,226,.3),inset 0 1px rgba(255,255,255,.34);transition:.22s}.cta-btn-v101:hover{transform:translateY(-2px) scale(1.01);filter:brightness(1.04)}
.cta-art-v101{position:absolute;right:-28px;top:-100px;width:58%;height:470px;transform:rotate(1deg);filter:saturate(1.04)}.cta-art-v101 img{width:100%;height:100%;object-fit:contain}.cta-panel-v101::after{content:"";position:absolute;right:0;inset-block:0;width:58%;background:radial-gradient(circle at 55% 48%,rgba(118,70,255,.19),transparent 42%);pointer-events:none}

/* Animated 404 ------------------------------------------------------------- */
body.loaf-404-v101{margin:0;min-height:100vh;overflow:hidden;background:#040408;color:#fff}
.nf-v101{position:relative;min-height:100vh;display:grid;place-items:center;overflow:hidden;isolation:isolate;background:radial-gradient(circle at 50% 60%,rgba(102,60,255,.13),transparent 35%),#040408}
.nf-v101-bg{position:absolute;inset:-30px;z-index:-4;filter:blur(8px);transform:scale(1.04);opacity:.48;animation:nfBgDrift 12s ease-in-out infinite alternate}
.nf-v101-bg::after{content:"";position:absolute;inset:0;background:rgba(3,3,8,.58);backdrop-filter:blur(4px)}
.nf-ghost-head{position:absolute;top:20%;left:50%;transform:translateX(-50%);text-align:center;width:80%;color:#d6d0df}.nf-ghost-head b{font-size:48px;display:block;letter-spacing:-.05em}.nf-ghost-head span{font-size:28px}.nf-ghost-grid{position:absolute;left:5%;right:5%;bottom:5%;display:grid;grid-template-columns:repeat(5,1fr);gap:18px}.nf-ghost-card{height:210px;border:1px solid rgba(255,255,255,.09);border-radius:24px;background:linear-gradient(160deg,rgba(106,55,255,.35),rgba(255,76,176,.12));box-shadow:0 24px 60px rgba(0,0,0,.28)}.nf-ghost-card:nth-child(2){background:linear-gradient(160deg,rgba(194,41,255,.33),rgba(65,25,122,.16))}.nf-ghost-card:nth-child(3){background:linear-gradient(160deg,rgba(31,113,255,.37),rgba(20,78,154,.14))}.nf-ghost-card:nth-child(4){background:linear-gradient(160deg,rgba(255,139,41,.28),rgba(142,54,43,.14))}.nf-ghost-card:nth-child(5){background:linear-gradient(160deg,rgba(38,220,98,.26),rgba(29,97,60,.14))}
.nf-v101-dotgrid{position:absolute;inset:0;z-index:-3;background-image:radial-gradient(circle,rgba(255,255,255,.10) .7px,transparent .8px);background-size:14px 14px;opacity:.22;mask-image:radial-gradient(circle at center,#000,transparent 78%)}
.nf-v101-center{position:relative;z-index:4;width:min(420px,calc(100vw - 34px));text-align:center;padding:32px 20px;animation:nfCenterIn .7s cubic-bezier(.2,.9,.2,1) both}.nf-v101-title{display:flex;align-items:center;justify-content:center;gap:11px;font:900 32px/1 Manrope,Inter,sans-serif;letter-spacing:-.04em}.nf-v101-title img{width:28px;height:28px;filter:brightness(0) invert(1) drop-shadow(0 0 18px rgba(255,255,255,.2))}.nf-v101-center p{font-size:13px;color:#a59eb2;margin:12px 0 23px}.nf-v101-btn{height:48px;width:100%;border-radius:999px;display:flex;align-items:center;justify-content:center;background:linear-gradient(90deg,#7252ff,#8158ff);color:#fff;font-weight:900;font-size:13px;box-shadow:0 18px 50px rgba(95,59,255,.34);transition:.22s}.nf-v101-btn:hover{transform:translateY(-2px);filter:brightness(1.08)}.nf-v101-help{display:block;margin-top:17px;color:#625c69;font-size:10px}
.nf-gem{position:absolute;z-index:1;width:34px;height:34px;border-radius:10px;filter:blur(2px);opacity:.75;animation:nfGem 5.6s ease-in-out infinite}.nf-gem.g1{left:28%;top:48%;background:#80ff2d;clip-path:polygon(0 0,100% 34%,34% 100%)}.nf-gem.g2{right:25%;top:45%;background:#ff278d;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);animation-delay:-1.4s}.nf-gem.g3{right:15%;top:16%;background:#47d6ff;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);animation-delay:-2.6s}.nf-gem.g4{left:22%;top:13%;background:#a858ff;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);animation-delay:-3.5s}.nf-gem.g5{left:9%;bottom:23%;background:#fff;width:18px;height:18px;filter:blur(3px);animation-delay:-.8s}.nf-gem.g6{right:8%;bottom:22%;background:#fff;width:18px;height:18px;filter:blur(3px);animation-delay:-2s}
@keyframes nfBgDrift{to{transform:scale(1.07) translate3d(0,-8px,0)}}@keyframes nfCenterIn{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}@keyframes nfGem{0%,100%{transform:translateY(0) rotate(-7deg) scale(.9)}50%{transform:translateY(-20px) rotate(9deg) scale(1.06)}}

/* Animator avatar ring ----------------------------------------------------- */
.motion-top-avatar.profile-credit-ring{width:42px!important;height:42px!important;padding:3px!important;text-decoration:none!important;flex:none}
.motion-top-avatar.profile-credit-ring>img,.motion-top-avatar.profile-credit-ring>.avatar-initial{font-size:12px!important}

@media(max-width:900px){
  .review-grid-v101{grid-template-columns:1fr 1fr}
  .cta-panel-v101{grid-template-columns:1fr;min-height:420px}.cta-copy-v101{padding:42px 34px;max-width:70%}.cta-art-v101{width:62%;right:-20%;top:45px}
}
@media(max-width:640px){
  .home-freedom-v101{padding:72px 0 58px}.freedom-stage-v101{padding:10px}.freedom-topbar-v101{height:42px}.freedom-actions-v101 .freedom-pill-v101:not(.primary){display:none}
  .review-grid-v101{grid-template-columns:1fr}.review-card-v101{min-height:210px}
  .cta-v101{padding-bottom:72px}.cta-panel-v101{min-height:510px;border-radius:26px;align-items:start}.cta-copy-v101{padding:34px 24px;max-width:none}.cta-copy-v101 p{font-size:14px}.cta-art-v101{top:220px;right:-16%;width:92%;height:330px}
  .nf-ghost-grid{grid-template-columns:repeat(2,1fr);left:4%;right:4%}.nf-ghost-card:nth-child(n+3){display:none}.nf-gem.g1{left:13%}.nf-gem.g2{right:12%}.nf-ghost-head b{font-size:32px}.nf-ghost-head span{font-size:19px}
}
@media(prefers-reduced-motion:reduce){.compat-track-v101,.nf-v101-bg,.nf-gem,.nf-v101-center{animation:none!important}}