/* Reference navigation and motion, scoped to the landing page. */
body.fasheon-motion { --motion-ease: cubic-bezier(.2,0,0,1); }
.fasheon-motion #navbar { top: 0; padding: 0 24px; transition: background-color .3s var(--motion-ease), box-shadow .3s var(--motion-ease), transform .35s var(--motion-ease); }
.fasheon-motion #navbar.scrolled { top: 0; background: rgba(0,0,0,.72); backdrop-filter: blur(20px) saturate(150%); box-shadow: 0 1px rgba(244,223,160,.06); }
.fasheon-motion .nav-inner, .fasheon-motion #navbar.scrolled .nav-inner { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap: 16px; max-width: none; height: 72px; padding: 0; border-radius: 0; background: transparent; border: 0; box-shadow: none; backdrop-filter: none; transform: none; }
.fasheon-motion .nav-inner { animation: fasheon-nav-in .6s cubic-bezier(.22,1,.36,1) both; }
.fasheon-motion .nav-logo { justify-self: start; }
.fasheon-motion .nav-logo img { width: 26px !important; height: 26px !important; }
.fasheon-motion .nav-logo span { font-size: 22px; font-weight: 800; letter-spacing: -.025em; }
.fasheon-motion .nav-links { display: flex; gap: 4px; margin: 0; justify-self: center; }
.fasheon-motion .nav-links a { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 16px; border-radius: 20px; color: #ececec; font: 700 14px/1 var(--font-main); letter-spacing: .01em; }
.fasheon-motion .nav-links a::before { display: none; }
.fasheon-motion .nav-links a.active { background: #1c1c1f; }
.fasheon-motion .nav-right { justify-self: end; gap: 8px; margin-left: 0; min-width: 0; }
.fasheon-motion .nav-social { display: flex !important; gap: 8px !important; }
.fasheon-motion .nav-social a { width: 40px; height: 40px; border-radius: 50%; align-items: center; justify-content: center; background: #141416; display: inline-flex !important; color: #ececec !important; transform: none !important; }
.fasheon-motion .nav-social a svg { width: 18px; height: 18px; }
.fasheon-motion .lang-current { height: 40px; padding: 0 12px; gap: 8px; border: 0; border-radius: 20px; background: #141416; color: #ececec; font: 700 13px/1 var(--font-main); }
.fasheon-motion .lang-current:hover, .fasheon-motion .lang-switch[data-open="true"] .lang-current { background: #1c1c1f; }
.fasheon-motion .lang-menu { transform-origin: right top; transform: scale(.92); transition: opacity .2s var(--motion-ease), transform .3s cubic-bezier(.05,.7,.1,1), visibility .2s; }
.fasheon-motion .lang-switch[data-open="true"] .lang-menu { transform: scale(1); }
.fasheon-motion .nav-cta { height: 40px; padding: 0 20px 0 16px; gap: 8px; border: 0; border-radius: 20px; background: var(--fasheon-yellow); color: #17150e; font: 800 14px/1 var(--font-main); }
.fasheon-motion .nav-cta:hover { opacity: 1; transform: none; box-shadow: 0 2px 6px rgba(0,0,0,.3); }
.fasheon-motion .nav-cta:active { border-radius: 12px; }
.fasheon-motion #nav-user-pill { height: 40px; max-width: 190px; padding: 0 16px 0 4px !important; gap: 10px !important; border: 0 !important; border-radius: 20px !important; background: #141416 !important; }
.fasheon-motion #nav-user-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fasheon-motion #nav-user-avatar { width: 32px !important; height: 32px !important; flex-shrink: 0; }
.fasheon-motion #navbar :is(.nav-links a,.nav-cta,.lang-current,.lang-btn,.nav-social a,#nav-user-pill) { position: relative; overflow: hidden; isolation: isolate; translate: var(--mg-x,0px) var(--mg-y,0px); scale: var(--mg-sx,1) var(--mg-sy,1); transition: translate .4s cubic-bezier(.34,1.56,.64,1), scale .4s cubic-bezier(.34,1.56,.64,1), background-color .2s var(--motion-ease), color .2s var(--motion-ease), border-radius .35s var(--motion-ease), box-shadow .2s var(--motion-ease); }
.fasheon-motion #navbar :is(.nav-links a,.nav-cta,.lang-current,.lang-btn,.nav-social a,#nav-user-pill)::after { content: ''; position: absolute; inset: 0; width: auto; height: auto; border-radius: inherit; background: currentColor; opacity: 0; pointer-events: none; transition: opacity .2s var(--motion-ease); }
.fasheon-motion #navbar :is(.nav-links a,.nav-cta,.lang-current,.lang-btn,.nav-social a,#nav-user-pill):hover::after { opacity: .08; }
.fasheon-motion #navbar :is(.nav-links a,.nav-cta,.lang-current,.lang-btn,.nav-social a,#nav-user-pill):focus-visible::after { opacity: .1; }
.fasheon-motion #navbar :is(.nav-links a,.nav-cta,.lang-current,.lang-btn,.nav-social a,#nav-user-pill):active::after { opacity: .12; }
.fasheon-motion .motion-ripple { position: absolute; z-index: 0; border-radius: 50%; background: currentColor; opacity: .16; transform: scale(0); pointer-events: none; animation: fasheon-ripple .6s cubic-bezier(.05,.7,.1,1) forwards; }
.fasheon-motion .hero-bg { overflow: hidden; mask: radial-gradient(150% 115% at 50% 4%,#000 48%,rgba(0,0,0,.55) 72%,transparent 100%); }
.fasheon-motion .hero-bg .ribbon { position: absolute; inset: 0; display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 1.4s ease; }
.fasheon-motion .hero-bg .ribbon.on { opacity: 1; }
.fasheon-motion .hero-bg.flat::before { content: ''; position: absolute; inset: 0; background: radial-gradient(58% 42% at 74% 36%,rgba(244,223,160,.08),transparent 70%),linear-gradient(118deg,transparent 36%,rgba(244,223,160,.045) 52%,transparent 68%); }
.fasheon-motion .hero-bg::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(44% 30% at 50% 52%,rgba(0,0,0,.55),rgba(0,0,0,.22) 55%,transparent 82%); }
.fasheon-motion :is(#hero,#features,#pricing) { scroll-margin-top: 88px; }
@keyframes fasheon-nav-in { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
@keyframes fasheon-ripple { to { transform: scale(1); opacity: 0; } }
@media (max-width: 760px) {
  .fasheon-motion #navbar { padding: 0 14px; }
  .fasheon-motion .nav-inner, .fasheon-motion #navbar.scrolled .nav-inner { grid-template-columns: minmax(0,1fr) auto; grid-template-rows: 56px 44px; height: 104px; gap: 0 12px; }
  .fasheon-motion .nav-links { grid-column: 1 / -1; grid-row: 2; }
  .fasheon-motion .nav-right { grid-column: 2; grid-row: 1; }
  .fasheon-motion :is(#hero,#features,#pricing) { scroll-margin-top: 116px; }
  .fasheon-motion #nav-user-pill { max-width: 138px; }
}
@media (max-width: 420px) { .fasheon-motion .nav-logo span { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .fasheon-motion .nav-inner { animation: none; }
  .fasheon-motion #navbar :is(.nav-links a,.nav-cta,.lang-current,.lang-btn,.nav-social a,#nav-user-pill), .fasheon-motion .hero-bg .ribbon, .fasheon-motion .lang-menu { transition: none; translate: none; scale: none; }
  .fasheon-motion .motion-ripple { display: none; }
}